diff --git a/imports/client/ui/components/DetailDrawer/DetailDrawer.js b/imports/client/ui/components/DetailDrawer/DetailDrawer.js
new file mode 100644
index 00000000000..74a4165aaac
--- /dev/null
+++ b/imports/client/ui/components/DetailDrawer/DetailDrawer.js
@@ -0,0 +1,85 @@
+import React, { Children } from "react";
+import PropTypes from "prop-types";
+import AppBar from "@material-ui/core/AppBar";
+import IconButton from "@material-ui/core/IconButton";
+import Toolbar from "@material-ui/core/Toolbar";
+import Drawer from "@material-ui/core/Drawer";
+import withStyles from "@material-ui/core/styles/withStyles";
+import CloseIcon from "mdi-material-ui/Close";
+import { Typography } from "@material-ui/core";
+import { UIContext } from "../../context/UIContext";
+
+const styles = (theme) => ({
+  action: {
+    marginLeft: theme.spacing.unit
+  },
+  content: {
+    paddingTop: theme.spacing.unit,
+    marginLeft: "-1px",
+    marginRight: "-1px"
+  },
+  title: {
+    flex: 1,
+    paddingLeft: theme.spacing.unit
+  }
+});
+
+/**
+ * Detail drawer used for displaying supplementary info and actions for a view.
+ * @param {Object} props Component props
+ * @returns {React.Component} Sidebar component
+ */
+function DetailDrawer(props) {
+  const {
+    anchor,
+    children,
+    classes,
+    title
+  } = props;
+
+  return (
+    <UIContext.Consumer>
+      {({ isMobile, onCloseDetailDrawer, isDetailDrawerOpen }) => (
+        <Drawer
+          elevation={2}
+          variant={isMobile ? "temporary" : "persistent"}
+          anchor={anchor}
+          open={isDetailDrawerOpen}
+          onClose={onCloseDetailDrawer}
+          ModalProps={{
+            keepMounted: true // Better open performance on mobile.
+          }}
+        >
+          <AppBar
+            color="default"
+            elevation={0}
+            position="sticky"
+          >
+            <Toolbar>
+              <Typography className={classes.title} variant="h3">{title}</Typography>
+              <IconButton onClick={onCloseDetailDrawer} size="small">
+                <CloseIcon />
+              </IconButton>
+            </Toolbar>
+          </AppBar>
+          {Children.map(children, (child) => (
+            <div className={classes.content}>{child}</div>
+          ))}
+        </Drawer>
+      )}
+    </UIContext.Consumer>
+  );
+}
+
+DetailDrawer.propTypes = {
+  anchor: PropTypes.oneOf(["left", "right", "top", "bottom"]),
+  children: PropTypes.node,
+  classes: PropTypes.object,
+  title: PropTypes.string
+};
+
+DetailDrawer.defaultProps = {
+  anchor: "right"
+};
+
+export default withStyles(styles, { name: "RuiDetailDrawer" })(DetailDrawer);
diff --git a/imports/client/ui/components/DetailDrawer/index.js b/imports/client/ui/components/DetailDrawer/index.js
new file mode 100644
index 00000000000..26662fa57bb
--- /dev/null
+++ b/imports/client/ui/components/DetailDrawer/index.js
@@ -0,0 +1 @@
+export { default } from "./DetailDrawer";
diff --git a/imports/client/ui/components/DetailDrawerButton/DetailDrawerButton.js b/imports/client/ui/components/DetailDrawerButton/DetailDrawerButton.js
new file mode 100644
index 00000000000..9d0951b1420
--- /dev/null
+++ b/imports/client/ui/components/DetailDrawerButton/DetailDrawerButton.js
@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "@material-ui/core/Button";
+import { UIContext } from "../../context/UIContext";
+
+/**
+ * Detail drawer open button
+ * @param {Object} props Component props
+ * @returns {React.Component} Sidebar component
+ */
+function DetailDrawerButton(props) {
+  const {
+    component: ComponentProp,
+    children,
+    ...otherProps
+  } = props;
+
+  return (
+    <UIContext.Consumer>
+      {({ onToggleDetailDrawer }) => (
+        <ComponentProp {...otherProps} onClick={onToggleDetailDrawer}>{children}</ComponentProp>
+      )}
+    </UIContext.Consumer>
+  );
+}
+
+DetailDrawerButton.propTypes = {
+  children: PropTypes.node,
+  component: PropTypes.func
+};
+
+DetailDrawerButton.defaultProps = {
+  component: Button
+};
+
+export default DetailDrawerButton;
diff --git a/imports/client/ui/components/DetailDrawerButton/index.js b/imports/client/ui/components/DetailDrawerButton/index.js
new file mode 100644
index 00000000000..b3ee599e5e3
--- /dev/null
+++ b/imports/client/ui/components/DetailDrawerButton/index.js
@@ -0,0 +1 @@
+export { default } from "./DetailDrawerButton";
diff --git a/imports/client/ui/components/PrimaryAppBar/PrimaryAppBar.js b/imports/client/ui/components/PrimaryAppBar/PrimaryAppBar.js
index 41ca51e3462..36c010fdb53 100644
--- a/imports/client/ui/components/PrimaryAppBar/PrimaryAppBar.js
+++ b/imports/client/ui/components/PrimaryAppBar/PrimaryAppBar.js
@@ -17,6 +17,9 @@ const styles = (theme) => ({
   primarySidebarOpen: {
     ...theme.mixins.leadingPaddingWhenPrimaryDrawerIsOpen
   },
+  detailDrawerOpen: {
+    ...theme.mixins.trailingPaddingWhenDetailDrawerIsOpen
+  },
   title: {
     flex: 1
   }
@@ -31,13 +34,17 @@ const styles = (theme) => ({
 function PrimaryAppBar({ children, classes, title }) {
   return (
     <UIContext.Consumer>
-      {({ isMobile, isPrimarySidebarOpen, onTogglePrimarySidebar }) => {
+      {({ isMobile, isDetailDrawerOpen, isPrimarySidebarOpen, onTogglePrimarySidebar }) => {
         const toolbarClassName = classNames({
-          // Add padding to the right when the primary sidebar is open,
+          // Add padding to the left when the primary sidebar is open,
           // only if we're on desktop. On mobile the sidebar floats over
           // the content like a modal that's docked to either the left
           // or right side of the screen.
-          [classes.primarySidebarOpen]: isPrimarySidebarOpen && !isMobile
+          [classes.primarySidebarOpen]: isPrimarySidebarOpen && !isMobile,
+
+          // Add padding to the right when the detail sidebar is open.
+          // Omit on mobile as the sidebar will float over content.
+          [classes.detailDrawerOpen]: isDetailDrawerOpen && !isMobile
         });
 
         return (
diff --git a/imports/client/ui/components/Sidebar/Sidebar.js b/imports/client/ui/components/Sidebar/Sidebar.js
index 5c909f7d4d7..2dc799f20bc 100644
--- a/imports/client/ui/components/Sidebar/Sidebar.js
+++ b/imports/client/ui/components/Sidebar/Sidebar.js
@@ -25,6 +25,17 @@ const activeClassName = "nav-item-active";
 const routeSort = (routeA, routeB) => (routeA.priority || Number.MAX_SAFE_INTEGER) - (routeB.priority || Number.MAX_SAFE_INTEGER);
 
 const styles = (theme) => ({
+  closeButton: {
+    "color": theme.palette.colors.white,
+    "backgroundColor": theme.palette.colors.darkBlue500,
+    "&:hover": {
+      "backgroundColor": theme.palette.colors.darkBlue600,
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: theme.palette.colors.darkBlue500
+      }
+    }
+  },
   icon: {
     width: 32,
     display: "flex",
@@ -115,7 +126,7 @@ function Sidebar(props) {
           <ShopLogoWithData className={classes.shopLogo} shouldShowShopName size={32} />
 
           <Hidden mdUp>
-            <Fab color="secondary" onClick={onDrawerClose} size="small">
+            <Fab classes={{ root: classes.closeButton }} onClick={onDrawerClose} size="small">
               <CloseIcon />
             </Fab>
           </Hidden>
diff --git a/imports/client/ui/context/UIContext.js b/imports/client/ui/context/UIContext.js
index fef2ece383b..9cdc43b7c7b 100644
--- a/imports/client/ui/context/UIContext.js
+++ b/imports/client/ui/context/UIContext.js
@@ -1,8 +1,11 @@
 import { createContext } from "react";
 
 export const UIContext = createContext({
+  isDetailDrawerOpen: false,
   isMobile: false,
   isPrimarySidebarOpen: true,
+  onCloseDetailDrawer: () => { },
   onClosePrimarySidebar: () => { },
+  onToggleDetailDrawer: () => { },
   onTogglePrimarySidebar: () => { }
 });
diff --git a/imports/client/ui/layouts/ContentViewExtraWideLayout.js b/imports/client/ui/layouts/ContentViewExtraWideLayout.js
index 26d536e5c72..69d55d0de5f 100644
--- a/imports/client/ui/layouts/ContentViewExtraWideLayout.js
+++ b/imports/client/ui/layouts/ContentViewExtraWideLayout.js
@@ -18,16 +18,20 @@ const styles = (theme) => ({
     flexGrow: 1,
     transition: "padding 225ms cubic-bezier(0, 0, 0.2, 1) 0ms"
   },
-  leftSidebarOpen: {
+  leadingDrawerOpen: {
+    ...theme.mixins.leadingPaddingWhenPrimaryDrawerIsOpen
+  },
+  trailingDrawerOpen: {
     ...theme.mixins.leadingPaddingWhenPrimaryDrawerIsOpen
   }
 });
 
-const ContentViewExtraWideLayout = ({ children, classes, isSidebarOpen }) => (
+const ContentViewExtraWideLayout = ({ children, classes, isLeadingDrawerOpen, isTrailingDrawerOpen }) => (
   <div
     className={
       classNames(classes.root, {
-        [classes.leftSidebarOpen]: isSidebarOpen
+        [classes.leadingDrawerOpen]: isLeadingDrawerOpen,
+        [classes.trailingDrawerOpen]: isTrailingDrawerOpen
       })
     }
   >
@@ -38,8 +42,9 @@ const ContentViewExtraWideLayout = ({ children, classes, isSidebarOpen }) => (
 ContentViewExtraWideLayout.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.object,
+  isLeadingDrawerOpen: PropTypes.bool,
   isMobile: PropTypes.bool,
-  isSidebarOpen: PropTypes.bool
+  isTrailingDrawerOpen: PropTypes.bool
 };
 
 export default withStyles(styles, { name: "RuiContentViewExtraWideLayout" })(ContentViewExtraWideLayout);
diff --git a/imports/client/ui/layouts/ContentViewFullLayout.js b/imports/client/ui/layouts/ContentViewFullLayout.js
index 4e1fe60b729..f9b046e952c 100644
--- a/imports/client/ui/layouts/ContentViewFullLayout.js
+++ b/imports/client/ui/layouts/ContentViewFullLayout.js
@@ -17,16 +17,20 @@ const styles = (theme) => ({
     transition: "padding 225ms cubic-bezier(0, 0, 0.2, 1) 0ms",
     overflow: "hidden"
   },
-  leftSidebarOpen: {
+  leadingDrawerOpen: {
     paddingLeft: theme.spacing.drawerWidth
+  },
+  trailingDrawerOpen: {
+    paddingRight: theme.spacing.detailDrawerWidth
   }
 });
 
-const ContentViewFullLayout = ({ children, classes, isSidebarOpen }) => (
+const ContentViewFullLayout = ({ children, classes, isLeadingDrawerOpen, isTrailingDrawerOpen }) => (
   <div
     className={
       classNames(classes.root, {
-        [classes.leftSidebarOpen]: isSidebarOpen
+        [classes.leadingDrawerOpen]: isLeadingDrawerOpen,
+        [classes.trailingDrawerOpen]: isTrailingDrawerOpen
       })
     }
   >
@@ -37,8 +41,9 @@ const ContentViewFullLayout = ({ children, classes, isSidebarOpen }) => (
 ContentViewFullLayout.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.object,
+  isLeadingDrawerOpen: PropTypes.bool,
   isMobile: PropTypes.bool,
-  isSidebarOpen: PropTypes.bool
+  isTrailingDrawerOpen: PropTypes.bool
 };
 
 export default withStyles(styles, { name: "RuiContentViewFullLayout" })(ContentViewFullLayout);
diff --git a/imports/client/ui/layouts/ContentViewStandardLayout.js b/imports/client/ui/layouts/ContentViewStandardLayout.js
index 5865c6bf140..8341214805b 100644
--- a/imports/client/ui/layouts/ContentViewStandardLayout.js
+++ b/imports/client/ui/layouts/ContentViewStandardLayout.js
@@ -17,16 +17,20 @@ const styles = (theme) => ({
     paddingBottom: theme.spacing.unit * 2,
     margin: "0 auto"
   },
-  leftSidebarOpen: {
+  leadingDrawerOpen: {
     paddingLeft: theme.spacing.drawerWidth
+  },
+  trailingDrawerOpen: {
+    paddingRight: theme.spacing.detailDrawerWidth
   }
 });
 
-const ContentViewStandardLayout = ({ children, classes, isSidebarOpen }) => (
+const ContentViewStandardLayout = ({ children, classes, isLeadingDrawerOpen, isTrailingDrawerOpen }) => (
   <div
     className={
       classNames(classes.root, {
-        [classes.leftSidebarOpen]: isSidebarOpen
+        [classes.leadingDrawerOpen]: isLeadingDrawerOpen,
+        [classes.trailingDrawerOpen]: isTrailingDrawerOpen
       })
     }
   >
@@ -39,8 +43,9 @@ const ContentViewStandardLayout = ({ children, classes, isSidebarOpen }) => (
 ContentViewStandardLayout.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.object,
+  isLeadingDrawerOpen: PropTypes.bool,
   isMobile: PropTypes.bool,
-  isSidebarOpen: PropTypes.bool
+  isTrailingDrawerOpen: PropTypes.bool
 };
 
 export default withStyles(styles, { name: "RuiContentViewStandardLayout" })(ContentViewStandardLayout);
diff --git a/imports/client/ui/layouts/Dashboard.js b/imports/client/ui/layouts/Dashboard.js
index f607229f6b7..2fff6b1fa97 100644
--- a/imports/client/ui/layouts/Dashboard.js
+++ b/imports/client/ui/layouts/Dashboard.js
@@ -6,6 +6,7 @@ import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
 import { CustomPropTypes } from "@reactioncommerce/components/utils";
 import { withComponents } from "@reactioncommerce/components-context";
 import { Route, Switch } from "react-router";
+import { withRouter } from "react-router-dom";
 import PrimaryAppBar from "../components/PrimaryAppBar/PrimaryAppBar";
 import ProfileImageWithData from "../components/ProfileImageWithData";
 import Sidebar from "../components/Sidebar";
@@ -35,6 +36,7 @@ class Dashboard extends Component {
     components: PropTypes.shape({
       IconHamburger: CustomPropTypes.component.isRequired
     }),
+    location: PropTypes.object,
     width: PropTypes.string
   };
 
@@ -44,15 +46,18 @@ class Dashboard extends Component {
     // State also contains the updater function so it will
     // be passed down into the context provider
     this.state = {
+      isDetailDrawerOpen: false,
       isMobile: false,
       isPrimarySidebarOpen: true,
       onClosePrimarySidebar: this.onClosePrimarySidebar,
-      onTogglePrimarySidebar: this.onTogglePrimarySidebar
+      onTogglePrimarySidebar: this.onTogglePrimarySidebar,
+      onCloseDetailDrawer: this.onCloseDetailDrawer,
+      onToggleDetailDrawer: this.onToggleDetailDrawer
     };
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { width } = this.props;
+    const { width, location } = this.props;
     const isMobile = isWidthDown("sm", width);
 
     if (prevState.isMobile !== isMobile) {
@@ -68,6 +73,14 @@ class Dashboard extends Component {
         isPrimarySidebarOpen: true
       });
     }
+
+    // Close the detail drawer on route change
+    if (location.pathname !== prevProps.location.pathname) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        isDetailDrawerOpen: false
+      });
+    }
   }
 
   onTogglePrimarySidebar = () => {
@@ -76,12 +89,23 @@ class Dashboard extends Component {
     }));
   };
 
+  onToggleDetailDrawer = () => {
+    this.setState((state) => ({
+      isDetailDrawerOpen: !state.isDetailDrawerOpen
+    }));
+  };
+
+  onCloseDetailDrawer = () => {
+    this.setState({ isDetailDrawerOpen: false });
+  };
+
   onClosePrimarySidebar = () => {
     this.setState({ isPrimarySidebarOpen: false });
   };
 
   render() {
     const { classes, width } = this.props;
+    const { isDetailDrawerOpen, isPrimarySidebarOpen } = this.state;
     const isMobile = isWidthDown("sm", width);
 
     return (
@@ -92,7 +116,7 @@ class Dashboard extends Component {
           </PrimaryAppBar>
           <Sidebar
             isMobile={isMobile}
-            isSidebarOpen={this.state.isPrimarySidebarOpen}
+            isSidebarOpen={isPrimarySidebarOpen && !isDetailDrawerOpen}
             setIsSidebarOpen={(value) => {
               this.setState({ isPrimarySidebarOpen: value });
             }}
@@ -110,7 +134,10 @@ class Dashboard extends Component {
                     // If the layout component is explicitly null
                     if (route.layoutComponent === null) {
                       return (
-                        <ContentViewFullLayout isSidebarOpen={!isMobile}>
+                        <ContentViewFullLayout
+                          isLeadingDrawerOpen={!isMobile}
+                          isTrailingDrawerOpen={isDetailDrawerOpen && !isMobile}
+                        >
                           <route.mainComponent uiState={this.state} {...props} />
                         </ContentViewFullLayout>
                       );
@@ -119,7 +146,10 @@ class Dashboard extends Component {
                     const LayoutComponent = route.layoutComponent || ContentViewStandardLayout;
 
                     return (
-                      <LayoutComponent isSidebarOpen={!isMobile}>
+                      <LayoutComponent
+                        isLeadingDrawerOpen={!isMobile}
+                        isTrailingDrawerOpen={isDetailDrawerOpen && !isMobile}
+                      >
                         <route.mainComponent uiState={this.state} {...props} />
                       </LayoutComponent>
                     );
@@ -136,6 +166,7 @@ class Dashboard extends Component {
 
 export default compose(
   withComponents,
+  withRouter,
   withWidth({ initialWidth: "md" }),
   withStyles(styles, { name: "RuiDashboard" })
 )(Dashboard);
diff --git a/imports/plugins/core/accounts/client/components/accountsDashboard.js b/imports/plugins/core/accounts/client/components/accountsDashboard.js
index e6e3f38cee5..7cadef9f5f4 100644
--- a/imports/plugins/core/accounts/client/components/accountsDashboard.js
+++ b/imports/plugins/core/accounts/client/components/accountsDashboard.js
@@ -1,7 +1,10 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Components } from "@reactioncommerce/reaction-components";
+import { i18next } from "/client/api";
 import sortUsersIntoGroups, { sortGroups } from "../helpers/accountsHelper";
+import DetailDrawer from "/imports/client/ui/components/DetailDrawer";
+import DetailDrawerButton from "/imports/client/ui/components/DetailDrawerButton";
 
 class AccountsDashboard extends Component {
   static propTypes = {
@@ -24,7 +27,8 @@ class AccountsDashboard extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { adminGroups, accounts, groups } = nextProps;
     const sortedGroups = sortUsersIntoGroups({ groups: sortGroups(adminGroups), accounts });
     const selectedGroup = adminGroups.find((grp) => grp._id === (this.state.selectedGroup || {})._id);
@@ -86,13 +90,14 @@ class AccountsDashboard extends Component {
 
   render() {
     return (
-      <div className="row list-group accounts-table">
-        <div className="col-md-9">
-          {this.renderGroupsTable(this.state.adminGroups)}
+      <div className="accounts-table">
+        <div className="group-container" style={{ textAlign: "right" }}>
+          <DetailDrawerButton color="primary" variant="outlined">{i18next.t("admin.dashboard.manageGroups")}</DetailDrawerButton>
         </div>
-        <div className="col-md-3">
+        {this.renderGroupsTable(this.state.adminGroups)}
+        <DetailDrawer title={i18next.t("admin.dashboard.manageGroups")}>
           {this.renderGroupDetail()}
-        </div>
+        </DetailDrawer>
       </div>
     );
   }
diff --git a/imports/plugins/core/accounts/client/components/adminInviteForm.js b/imports/plugins/core/accounts/client/components/adminInviteForm.js
index 63c2d826f0d..e9eab9841d6 100644
--- a/imports/plugins/core/accounts/client/components/adminInviteForm.js
+++ b/imports/plugins/core/accounts/client/components/adminInviteForm.js
@@ -5,6 +5,9 @@ import _ from "lodash";
 import { Components, registerComponent } from "@reactioncommerce/reaction-components";
 import ReactionAlerts from "/imports/plugins/core/layout/client/templates/layout/alerts/inlineAlerts";
 import { Reaction, i18next } from "/client/api";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardHeader from "@material-ui/core/CardHeader";
 import { getDefaultUserInviteGroup } from "../helpers/accountsHelper";
 
 /**
@@ -36,7 +39,8 @@ class AdminInviteForm extends Component {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { groups } = nextProps;
     this.setState({ groups, group: getDefaultUserInviteGroup(groups) });
   }
@@ -183,17 +187,15 @@ class AdminInviteForm extends Component {
 
   render() {
     return (
-      <Components.Card>
-        <Components.CardHeader
-          actAsExpander={true}
+      <Card elevation={0}>
+        <CardHeader
           data-i18n="accountsUI.info.addAdminUser"
-          title="Add Admin User"
-          id="accounts"
+          title={i18next.t("accountsUI.info.addAdminUser", { defaultValue: "Add Admin User" })}
         />
-        <Components.CardBody expandable={true}>
+        <CardContent>
           {this.renderForm()}
-        </Components.CardBody>
-      </Components.Card>
+        </CardContent>
+      </Card>
     );
   }
 }
diff --git a/imports/plugins/core/accounts/client/components/editGroup.js b/imports/plugins/core/accounts/client/components/editGroup.js
index 5fa74862f5c..edcac619675 100644
--- a/imports/plugins/core/accounts/client/components/editGroup.js
+++ b/imports/plugins/core/accounts/client/components/editGroup.js
@@ -5,7 +5,10 @@ import classnames from "classnames";
 import PropTypes from "prop-types";
 import { Components } from "@reactioncommerce/reaction-components";
 import ReactionAlerts from "/imports/plugins/core/layout/client/templates/layout/alerts/inlineAlerts";
-import { Reaction } from "/client/api";
+import { Reaction, i18next } from "/client/api";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardHeader from "@material-ui/core/CardHeader";
 import { groupPermissions } from "../helpers/accountsHelper";
 
 /**
@@ -41,7 +44,8 @@ class EditGroup extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { groups, selectedGroup } = nextProps;
     this.setState({ groups, selectedGroup: selectedGroup || {} });
   }
@@ -179,17 +183,17 @@ class EditGroup extends Component {
     const alertId = this.state.alertOptions.id;
     return (
       <div className="edit-group-container">
-        <Components.Card>
-          <Components.CardHeader actAsExpander={true} i18nKeyTitle="admin.groups.editGroups" title="Edit Groups" />
-          <Components.CardBody expandable={true}>
+        <Card elevation={0}>
+          <CardHeader title={i18next.t("admin.groups.editGroups", { defaultValue: "Edit Groups" })} />
+          <CardContent>
             <div className="settings">
               <Components.Alerts placement={alertId} id={alertId} onAlertRemove={this.removeAlert} />
               {this.renderGroups()}
               {this.renderGroupForm()}
               {this.renderPermissionsList()}
             </div>
-          </Components.CardBody>
-        </Components.Card>
+          </CardContent>
+        </Card>
       </div>
     );
   }
diff --git a/imports/plugins/core/accounts/client/components/manageGroups.js b/imports/plugins/core/accounts/client/components/manageGroups.js
index 64b95142b8a..83769c2e1f2 100644
--- a/imports/plugins/core/accounts/client/components/manageGroups.js
+++ b/imports/plugins/core/accounts/client/components/manageGroups.js
@@ -1,12 +1,20 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Components, registerComponent } from "@reactioncommerce/reaction-components";
+import withStyles from "@material-ui/core/styles/withStyles";
 import { getInvitableGroups } from "../helpers/accountsHelper";
 
+const styles = (theme) => ({
+  editGroup: {
+    paddingTop: theme.spacing.unit
+  }
+});
+
 class ManageGroups extends Component {
   static propTypes = {
     accounts: PropTypes.array,
     adminGroups: PropTypes.array,
+    classes: PropTypes.object,
     group: PropTypes.object,
     groups: PropTypes.array,
     isAdmin: PropTypes.bool,
@@ -24,12 +32,14 @@ class ManageGroups extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { group, groups, adminGroups, accounts } = nextProps;
     this.setState({ group, groups, accounts, adminGroups });
   }
 
   render() {
+    const { classes } = this.props;
     // this gets a list of groups the user can invite to, we show only those in the dropdown
     // see doc for getInvitableGroups in helpers/accountsHelper.js
     const groupsInvitable = getInvitableGroups(this.state.adminGroups);
@@ -42,19 +52,23 @@ class ManageGroups extends Component {
           />
         }
         {this.props.isAdmin &&
-          <Components.EditGroup
-            // filter out owner group from editable groups.
-            // The edit group meteor method also prevents editing owner group
-            groups={this.state.groups.filter((grp) => grp.slug !== "owner")}
-            selectedGroup={this.state.group}
-            onChangeGroup={this.props.onChangeGroup}
-          />
+          <div className={classes.editGroup}>
+            <Components.EditGroup
+              // filter out owner group from editable groups.
+              // The edit group meteor method also prevents editing owner group
+              groups={this.state.groups.filter((grp) => grp.slug !== "owner")}
+              selectedGroup={this.state.group}
+              onChangeGroup={this.props.onChangeGroup}
+            />
+          </div>
         }
       </div>
     );
   }
 }
 
-registerComponent("ManageGroups", ManageGroups);
+registerComponent("ManageGroups", ManageGroups, [
+  withStyles(styles, { name: "RuiManageGroups" })
+]);
 
-export default ManageGroups;
+export default withStyles(styles, { name: "RuiManageGroups" })(ManageGroups);
diff --git a/imports/plugins/core/accounts/server/i18n/en.json b/imports/plugins/core/accounts/server/i18n/en.json
index a33b98d4d45..9d64b9366fb 100644
--- a/imports/plugins/core/accounts/server/i18n/en.json
+++ b/imports/plugins/core/accounts/server/i18n/en.json
@@ -7,7 +7,8 @@
         "dashboard": {
           "accountsLabel": "Accounts",
           "accountsTitle": "Accounts",
-          "accountsDescription": "Account Settings"
+          "accountsDescription": "Account Settings",
+          "manageGroups": "Manage Groups"
         },
         "settings": {
           "continue": "Continue",
diff --git a/imports/plugins/core/router/client/theme/muiTheme.js b/imports/plugins/core/router/client/theme/muiTheme.js
index 8fb199fc5c2..d8881ec94cf 100644
--- a/imports/plugins/core/router/client/theme/muiTheme.js
+++ b/imports/plugins/core/router/client/theme/muiTheme.js
@@ -10,14 +10,20 @@ const toolbarMobileHeight = 54;
 
 // Colors
 export const colorPrimaryMain = colors.coolGrey;
-export const colorSecondaryMain = colors.darkBlue500;
+export const colorSecondaryMain = colors.reactionBlue;
 
 // Spacing
 export const defaultSpacingUnit = 8;
 export const drawerWidth = 280;
+export const detailDrawerWidth = 400;
 
 // Typography
 export const defaultFontSize = 16;
+export const fontWeightLight = 400;
+export const fontWeightRegular = 400;
+export const fontWeightMedium = 500;
+export const fontWeightSemiBold = 600;
+export const fontWeightBold = 700;
 
 export const rawMuiTheme = {
   palette: {
@@ -42,11 +48,11 @@ export const rawMuiTheme = {
   typography: {
     fontSize: defaultFontSize,
     fontFamily: typography.bodyText.fontFamily,
-    fontWeightLight: 400,
-    fontWeightRegular: 400,
-    fontWeightMedium: 500,
-    fontWeightSemiBold: 600,
-    fontWeightBold: 700,
+    fontWeightLight,
+    fontWeightRegular,
+    fontWeightMedium,
+    fontWeightSemiBold,
+    fontWeightBold,
     useNextVariants: true,
     subtitle1: {
       fontSize: defaultFontSize
@@ -71,15 +77,17 @@ export const rawMuiTheme = {
       fontSize: defaultFontSize * 1.125
     },
     h4: {
-      fontSize: defaultFontSize
+      fontSize: defaultFontSize,
+      fontWeight: fontWeightSemiBold
     },
     h5: {
-      fontSize: defaultFontSize * 0.875
+      fontSize: defaultFontSize * 0.875,
+      fontWeight: fontWeightSemiBold
     },
     h6: {
-      fontSize: defaultFontSize * 0.75
+      fontSize: defaultFontSize * 0.75,
+      fontWeight: fontWeightSemiBold
     }
-
   },
   shadows: [
     "none",
@@ -113,12 +121,16 @@ export const rawMuiTheme = {
   },
   spacing: {
     drawerWidth,
+    detailDrawerWidth,
     unit: defaultSpacingUnit
   },
   mixins: {
     leadingPaddingWhenPrimaryDrawerIsOpen: {
       paddingLeft: drawerWidth + (defaultSpacingUnit * 2)
     },
+    trailingPaddingWhenDetailDrawerIsOpen: {
+      paddingRight: detailDrawerWidth + (defaultSpacingUnit * 2)
+    },
     toolbar: {
       minHeight: toolbarHeight,
       [`${breakpoints.up("xs")} and (orientation: landscape)`]: {
@@ -143,7 +155,7 @@ export const rawMuiTheme = {
     },
     MuiCardHeader: {
       titleTypographyProps: {
-        variant: "h6"
+        variant: "h4"
       }
     }
   },
@@ -224,6 +236,14 @@ export const rawMuiTheme = {
       },
       paperAnchorDockedLeft: {
         borderRight: "none"
+      },
+      paperAnchorRight: {
+        borderLeft: "none",
+        backgroundColor: colors.black02,
+        width: detailDrawerWidth
+      },
+      paperAnchorDockedRight: {
+        borderRight: "none"
       }
     },
     MuiFab: {
diff --git a/package-lock.json b/package-lock.json
index fe1eeaa54ac..70c9cb91cd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1626,9 +1626,9 @@
       }
     },
     "@babel/types": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.0.tgz",
-      "integrity": "sha512-aPvkXyU2SPOnztlgo8n9cEiXW755mgyvueUPcpStqdzoSPm0fjO0vQBjLkt3JKJW7ufikfcnMTTPsN1xaTsBPA==",
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz",
+      "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==",
       "requires": {
         "esutils": "^2.0.2",
         "lodash": "^4.17.11",
@@ -2614,26 +2614,89 @@
       "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
     },
     "@reactioncommerce/components": {
-      "version": "0.62.1",
-      "resolved": "https://registry.npmjs.org/@reactioncommerce/components/-/components-0.62.1.tgz",
-      "integrity": "sha512-0A5jPvuN5syOr+BRi8SKJIr5pFLdQgno1fK6xn0uArMGi2z5Sffbpv6Xp2HyYcUVSNvjb+xF89FvWIOi0eLZYw==",
-      "requires": {
-        "@material-ui/core": "^3.1.0",
-        "accounting-js": "^1.1.1",
-        "lodash.debounce": "^4.0.8",
-        "lodash.get": "^4.4.2",
-        "lodash.isempty": "^4.4.0",
-        "lodash.isequal": "^4.5.0",
-        "lodash.uniqueid": "^4.0.1",
-        "mdi-material-ui": "^5.8.0",
-        "react-is": "^16.4.1",
-        "react-select": "^2.0.0"
+      "version": "0.65.4",
+      "resolved": "https://registry.npmjs.org/@reactioncommerce/components/-/components-0.65.4.tgz",
+      "integrity": "sha512-bq3J4JcytdDW9lTm9piV2u7gDGDDOzeo5UOCDpFxDShiy5IIfqY8VvADQExT8JMtbr0KHvYybjZP7RqKIDtt+g==",
+      "requires": {
+        "@babel/runtime": "~7.3.1",
+        "@material-ui/core": "~3.1.0",
+        "accounting-js": "~1.1.1",
+        "lodash.debounce": "~4.0.8",
+        "lodash.get": "~4.4.2",
+        "lodash.isempty": "~4.4.0",
+        "lodash.isequal": "~4.5.0",
+        "lodash.uniqueid": "~4.0.1",
+        "mdi-material-ui": "~5.8.0",
+        "react-is": "~16.4.1",
+        "react-select": "~2.4.0"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.3.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
+          "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "@material-ui/core": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.2.tgz",
+          "integrity": "sha512-tTRjlTVJY78GDKRHKSuxpoghrFyDAu9GrYCnaARHaZ2pZWiBHuviqUgAC8n8jWUXG3e6vfAXn9zZWzFedb4LwQ==",
+          "requires": {
+            "@babel/runtime": "7.0.0",
+            "@types/jss": "^9.5.6",
+            "@types/react-transition-group": "^2.0.8",
+            "brcast": "^3.0.1",
+            "classnames": "^2.2.5",
+            "csstype": "^2.5.2",
+            "debounce": "^1.1.0",
+            "deepmerge": "^2.0.1",
+            "dom-helpers": "^3.2.1",
+            "hoist-non-react-statics": "^2.5.0",
+            "is-plain-object": "^2.0.4",
+            "jss": "^9.3.3",
+            "jss-camel-case": "^6.0.0",
+            "jss-default-unit": "^8.0.2",
+            "jss-global": "^3.0.0",
+            "jss-nested": "^6.0.1",
+            "jss-props-sort": "^6.0.0",
+            "jss-vendor-prefixer": "^7.0.0",
+            "keycode": "^2.1.9",
+            "normalize-scroll-left": "^0.1.2",
+            "popper.js": "^1.14.1",
+            "prop-types": "^15.6.0",
+            "react-event-listener": "^0.6.2",
+            "react-jss": "^8.1.0",
+            "react-transition-group": "^2.2.1",
+            "recompose": "0.28.0 - 0.30.0",
+            "warning": "^4.0.1"
+          },
+          "dependencies": {
+            "@babel/runtime": {
+              "version": "7.0.0",
+              "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+              "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+              "requires": {
+                "regenerator-runtime": "^0.12.0"
+              }
+            }
+          }
+        },
+        "brcast": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz",
+          "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg=="
+        },
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        },
         "react-select": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/react-select/-/react-select-2.4.2.tgz",
-          "integrity": "sha512-5xFOQ6JJktkY5NTaHrc6x9mKwIjhNIiBkGic1j71uyY+ulFpRFra6f4WKLd9fuCylk4WjLpO5zDhdF4CAcwFzA==",
+          "version": "2.4.4",
+          "resolved": "https://registry.npmjs.org/react-select/-/react-select-2.4.4.tgz",
+          "integrity": "sha512-C4QPLgy9h42J/KkdrpVxNmkY6p4lb49fsrbDk/hRcZpX7JvZPNb6mGj+c5SzyEtBv1DmQ9oPH4NmhAFvCrg8Jw==",
           "requires": {
             "classnames": "^2.2.5",
             "emotion": "^9.1.2",
@@ -2643,6 +2706,32 @@
             "react-input-autosize": "^2.2.1",
             "react-transition-group": "^2.2.1"
           }
+        },
+        "recompose": {
+          "version": "0.30.0",
+          "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+          "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
+          "requires": {
+            "@babel/runtime": "^7.0.0",
+            "change-emitter": "^0.1.2",
+            "fbjs": "^0.8.1",
+            "hoist-non-react-statics": "^2.3.1",
+            "react-lifecycles-compat": "^3.0.2",
+            "symbol-observable": "^1.0.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        },
+        "warning": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+          "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
         }
       }
     },
@@ -4432,9 +4521,9 @@
       }
     },
     "babel-plugin-macros": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.5.1.tgz",
-      "integrity": "sha512-xN3KhAxPzsJ6OQTktCanNpIFnnMsCV+t8OloKxIL72D6+SUZYFn9qfklPgef5HyyDtzYZqqb+fs1S12+gQY82Q==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz",
+      "integrity": "sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ==",
       "requires": {
         "@babel/runtime": "^7.4.2",
         "cosmiconfig": "^5.2.0",
@@ -4442,9 +4531,9 @@
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.4.3",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz",
-          "integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==",
+          "version": "7.4.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
           "requires": {
             "regenerator-runtime": "^0.13.2"
           }
@@ -4460,9 +4549,9 @@
           "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
         },
         "resolve": {
-          "version": "1.10.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
-          "integrity": "sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==",
+          "version": "1.11.1",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
+          "integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
           "requires": {
             "path-parse": "^1.0.6"
           }
@@ -5564,13 +5653,13 @@
       }
     },
     "cosmiconfig": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.0.tgz",
-      "integrity": "sha512-nxt+Nfc3JAqf4WIWd0jXLjTJZmsPLrA9DDc4nRw2KFJQJK7DNooqSXrNI7tzLG50CF8axczly5UV929tBmh/7g==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
       "requires": {
         "import-fresh": "^2.0.0",
         "is-directory": "^0.3.1",
-        "js-yaml": "^3.13.0",
+        "js-yaml": "^3.13.1",
         "parse-json": "^4.0.0"
       },
       "dependencies": {
@@ -7701,7 +7790,8 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7725,13 +7815,15 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7741,19 +7833,22 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7874,7 +7969,8 @@
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7888,6 +7984,7 @@
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7904,6 +8001,7 @@
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7912,13 +8010,36 @@
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "dev": true,
+          "optional": true
+        },
+        "minipass": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
+          "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "^5.1.1",
+            "yallist": "^3.0.0"
+          }
+        },
+        "minizlib": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz",
+          "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minipass": "^2.2.1"
+          }
         },
         "mkdirp": {
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -8007,7 +8128,8 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -8021,6 +8143,7 @@
           "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8116,7 +8239,8 @@
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -8158,6 +8282,7 @@
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -8179,6 +8304,7 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -8236,12 +8362,13 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
-          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
+          "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
           "dev": true,
           "optional": true
         }
@@ -9528,6 +9655,11 @@
         "number-is-nan": "^1.0.0"
       }
     },
+    "is-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
+      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU="
+    },
     "is-generator-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
@@ -12200,11 +12332,32 @@
         "hyphenate-style-name": "^1.0.2"
       }
     },
+    "jss-compose": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
+      "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
     "jss-default-unit": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
       "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
     },
+    "jss-expand": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.3.0.tgz",
+      "integrity": "sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg=="
+    },
+    "jss-extend": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz",
+      "integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==",
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
     "jss-global": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
@@ -12218,11 +12371,36 @@
         "warning": "^3.0.0"
       }
     },
+    "jss-preset-default": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz",
+      "integrity": "sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==",
+      "requires": {
+        "jss-camel-case": "^6.1.0",
+        "jss-compose": "^5.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-expand": "^5.3.0",
+        "jss-extend": "^6.2.0",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-template": "^1.0.1",
+        "jss-vendor-prefixer": "^7.0.0"
+      }
+    },
     "jss-props-sort": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
       "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
     },
+    "jss-template": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz",
+      "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==",
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
     "jss-vendor-prefixer": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
@@ -12271,6 +12449,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -12862,9 +13045,9 @@
       "dev": true
     },
     "mdi-material-ui": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/mdi-material-ui/-/mdi-material-ui-5.10.0.tgz",
-      "integrity": "sha512-vxInUhZBere/acbErn6MMNn2szHmexEgDuBJ3XzgG2GffIPI6s8e1z4iOnU+19cHUC6oeuayUNI82duvoh591A=="
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/mdi-material-ui/-/mdi-material-ui-5.8.0.tgz",
+      "integrity": "sha512-KixZVfNg0ejURv9CIliB1M3kl4Soe6f6yAFjFNsoYPMvGGw1AhnQKGZ3EOEKOIdp2X9YeZFOaO+i9e4ZHUrpNA=="
     },
     "mdurl": {
       "version": "1.0.1",
@@ -12902,9 +13085,9 @@
       }
     },
     "memoize-one": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.2.tgz",
-      "integrity": "sha512-o7lldN4fs/axqctc03NF+PMhd2veRrWeJ2n2GjEzUPBD4F9rmNg4A+bQCACIzwjHJEXuYv4aFFMaH35KZfHUrw=="
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
+      "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
     },
     "memory-pager": {
       "version": "1.5.0",
@@ -15692,6 +15875,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz",
       "integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg=="
     },
+    "react-jss": {
+      "version": "8.6.1",
+      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
+      "integrity": "sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==",
+      "requires": {
+        "hoist-non-react-statics": "^2.5.0",
+        "jss": "^9.7.0",
+        "jss-preset-default": "^4.3.0",
+        "prop-types": "^15.6.0",
+        "theming": "^1.3.0"
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -18471,6 +18666,24 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
+    "theming": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz",
+      "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==",
+      "requires": {
+        "brcast": "^3.0.1",
+        "is-function": "^1.0.1",
+        "is-plain-object": "^2.0.1",
+        "prop-types": "^15.5.8"
+      },
+      "dependencies": {
+        "brcast": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz",
+          "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg=="
+        }
+      }
+    },
     "then-fs": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/then-fs/-/then-fs-2.0.0.tgz",
diff --git a/package.json b/package.json
index dbb010dd217..8a5182eb015 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.7.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@material-ui/core": "^3.9.2",
-    "@reactioncommerce/components": "^0.62.1",
+    "@reactioncommerce/components": "^0.65.4",
     "@reactioncommerce/components-context": "1.2.0",
     "@reactioncommerce/data-factory": "^1.0.0",
     "@reactioncommerce/file-collections": "0.6.0",