diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js
index dc93d5fb..0d0e7478 100644
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@@ -1,5 +1,5 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import {
   DocumentIcon,
   EmailIcon,
@@ -13,11 +13,9 @@ import {
   ExpandedIcon,
 } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import type { RouterHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
 import styled from "styled-components";
-import AuthStore from "stores/AuthStore";
-import PoliciesStore from "stores/PoliciesStore";
 import Flex from "components/Flex";
 import Scrollable from "components/Scrollable";
 
@@ -30,131 +28,123 @@ import Version from "./components/Version";
 import SlackIcon from "./icons/Slack";
 import ZapierIcon from "./icons/Zapier";
 import env from "env";
+import useCurrentTeam from "hooks/useCurrentTeam";
+import useStores from "hooks/useStores";
 
 const isHosted = env.DEPLOYMENT === "hosted";
 
-type Props = {
-  history: RouterHistory,
-  policies: PoliciesStore,
-  auth: AuthStore,
-  t: TFunction,
-};
+function SettingsSidebar() {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const team = useCurrentTeam();
+  const { policies } = useStores();
+  const can = policies.abilities(team.id);
 
-@observer
-class SettingsSidebar extends React.Component<Props> {
-  returnToDashboard = () => {
-    this.props.history.push("/home");
-  };
+  const returnToDashboard = React.useCallback(() => {
+    history.push("/home");
+  }, [history]);
 
-  render() {
-    const { policies, t, auth } = this.props;
-    const { team } = auth;
-    if (!team) return null;
+  return (
+    <Sidebar>
+      <HeaderBlock
+        subheading={
+          <ReturnToApp align="center">
+            <BackIcon color="currentColor" /> {t("Return to App")}
+          </ReturnToApp>
+        }
+        teamName={team.name}
+        logoUrl={team.avatarUrl}
+        onClick={returnToDashboard}
+      />
 
-    const can = policies.abilities(team.id);
-
-    return (
-      <Sidebar>
-        <HeaderBlock
-          subheading={
-            <ReturnToApp align="center">
-              <BackIcon color="currentColor" /> {t("Return to App")}
-            </ReturnToApp>
-          }
-          teamName={team.name}
-          logoUrl={team.avatarUrl}
-          onClick={this.returnToDashboard}
-        />
-
-        <Flex auto column>
-          <Scrollable shadow>
-            <Section>
-              <Header>Account</Header>
-              <SidebarLink
-                to="/settings"
-                icon={<ProfileIcon color="currentColor" />}
-                label={t("Profile")}
-              />
-              <SidebarLink
-                to="/settings/notifications"
-                icon={<EmailIcon color="currentColor" />}
-                label={t("Notifications")}
-              />
-              <SidebarLink
-                to="/settings/tokens"
-                icon={<CodeIcon color="currentColor" />}
-                label={t("API Tokens")}
-              />
-            </Section>
-            <Section>
-              <Header>Team</Header>
-              {can.update && (
-                <SidebarLink
-                  to="/settings/details"
-                  icon={<TeamIcon color="currentColor" />}
-                  label={t("Details")}
-                />
-              )}
-              {can.update && (
-                <SidebarLink
-                  to="/settings/security"
-                  icon={<PadlockIcon color="currentColor" />}
-                  label={t("Security")}
-                />
-              )}
-              <SidebarLink
-                to="/settings/people"
-                icon={<UserIcon color="currentColor" />}
-                exact={false}
-                label={t("People")}
-              />
-              <SidebarLink
-                to="/settings/groups"
-                icon={<GroupIcon color="currentColor" />}
-                exact={false}
-                label={t("Groups")}
-              />
-              <SidebarLink
-                to="/settings/shares"
-                icon={<LinkIcon color="currentColor" />}
-                label={t("Share Links")}
-              />
-              {can.export && (
-                <SidebarLink
-                  to="/settings/export"
-                  icon={<DocumentIcon color="currentColor" />}
-                  label={t("Export Data")}
-                />
-              )}
-            </Section>
+      <Flex auto column>
+        <Scrollable shadow>
+          <Section>
+            <Header>{t("Account")}</Header>
+            <SidebarLink
+              to="/settings"
+              icon={<ProfileIcon color="currentColor" />}
+              label={t("Profile")}
+            />
+            <SidebarLink
+              to="/settings/notifications"
+              icon={<EmailIcon color="currentColor" />}
+              label={t("Notifications")}
+            />
+            <SidebarLink
+              to="/settings/tokens"
+              icon={<CodeIcon color="currentColor" />}
+              label={t("API Tokens")}
+            />
+          </Section>
+          <Section>
+            <Header>{t("Team")}</Header>
             {can.update && (
-              <Section>
-                <Header>{t("Integrations")}</Header>
+              <SidebarLink
+                to="/settings/details"
+                icon={<TeamIcon color="currentColor" />}
+                label={t("Details")}
+              />
+            )}
+            {can.update && (
+              <SidebarLink
+                to="/settings/security"
+                icon={<PadlockIcon color="currentColor" />}
+                label={t("Security")}
+              />
+            )}
+            <SidebarLink
+              to="/settings/people"
+              icon={<UserIcon color="currentColor" />}
+              exact={false}
+              label={t("People")}
+            />
+            <SidebarLink
+              to="/settings/groups"
+              icon={<GroupIcon color="currentColor" />}
+              exact={false}
+              label={t("Groups")}
+            />
+            <SidebarLink
+              to="/settings/shares"
+              icon={<LinkIcon color="currentColor" />}
+              label={t("Share Links")}
+            />
+            {can.export && (
+              <SidebarLink
+                to="/settings/export"
+                icon={<DocumentIcon color="currentColor" />}
+                label={t("Export Data")}
+              />
+            )}
+          </Section>
+          {can.update && (
+            <Section>
+              <Header>{t("Integrations")}</Header>
+              <SidebarLink
+                to="/settings/integrations/slack"
+                icon={<SlackIcon color="currentColor" />}
+                label="Slack"
+              />
+              {isHosted && (
                 <SidebarLink
-                  to="/settings/integrations/slack"
-                  icon={<SlackIcon color="currentColor" />}
-                  label="Slack"
+                  to="/settings/integrations/zapier"
+                  icon={<ZapierIcon color="currentColor" />}
+                  label="Zapier"
                 />
-                {isHosted && (
-                  <SidebarLink
-                    to="/settings/integrations/zapier"
-                    icon={<ZapierIcon color="currentColor" />}
-                    label="Zapier"
-                  />
-                )}
-              </Section>
-            )}
-            {can.update && !isHosted && (
-              <Section>
-                <Header>{t("Installation")}</Header>
-                <Version />
-              </Section>
-            )}
-          </Scrollable>
-        </Flex>
-      </Sidebar>
-    );
-  }
+              )}
+            </Section>
+          )}
+          {can.update && !isHosted && (
+            <Section>
+              <Header>{t("Installation")}</Header>
+              <Version />
+            </Section>
+          )}
+        </Scrollable>
+      </Flex>
+    </Sidebar>
+  );
 }
 
 const BackIcon = styled(ExpandedIcon)`
@@ -166,6 +156,4 @@ const ReturnToApp = styled(Flex)`
   height: 16px;
 `;
 
-export default withTranslation()<SettingsSidebar>(
-  inject("auth", "policies")(SettingsSidebar)
-);
+export default observer(SettingsSidebar);
diff --git a/app/hooks/useCurrentTeam.js b/app/hooks/useCurrentTeam.js
new file mode 100644
index 00000000..e03b0ade
--- /dev/null
+++ b/app/hooks/useCurrentTeam.js
@@ -0,0 +1,9 @@
+// @flow
+import invariant from "invariant";
+import useStores from "./useStores";
+
+export default function useCurrentTeam() {
+  const { auth } = useStores();
+  invariant(auth.team, "team required");
+  return auth.team;
+}