diff --git a/app/components/Bubble.js b/app/components/Bubble.js
index 2bfd3dc2..656ba7b5 100644
--- a/app/components/Bubble.js
+++ b/app/components/Bubble.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import styled from "styled-components";
-import { bounceIn } from "shared/styles/animations";
+import { bounceIn } from "styles/animations";
 
 type Props = {|
   count: number,
diff --git a/app/components/ContextMenu/index.js b/app/components/ContextMenu/index.js
index 5a3ec9cf..69c14113 100644
--- a/app/components/ContextMenu/index.js
+++ b/app/components/ContextMenu/index.js
@@ -4,13 +4,13 @@ import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import usePrevious from "hooks/usePrevious";
 import {
   fadeIn,
   fadeAndSlideUp,
   fadeAndSlideDown,
   mobileContextMenu,
-} from "shared/styles/animations";
-import usePrevious from "hooks/usePrevious";
+} from "styles/animations";
 
 type Props = {|
   "aria-label": string,
diff --git a/app/components/Editor.js b/app/components/Editor.js
index 6360a148..60ba6f62 100644
--- a/app/components/Editor.js
+++ b/app/components/Editor.js
@@ -4,7 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
-import { light } from "shared/styles/theme";
+import { light } from "shared/theme";
 import UiStore from "stores/UiStore";
 import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
diff --git a/app/components/Fade.js b/app/components/Fade.js
index f649bc8f..baff26a3 100644
--- a/app/components/Fade.js
+++ b/app/components/Fade.js
@@ -1,6 +1,6 @@
 // @flow
 import styled from "styled-components";
-import { fadeIn } from "shared/styles/animations";
+import { fadeIn } from "styles/animations";
 
 const Fade = styled.span`
   animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
diff --git a/app/components/HoverPreview.js b/app/components/HoverPreview.js
index 8db9781a..d7dcd602 100644
--- a/app/components/HoverPreview.js
+++ b/app/components/HoverPreview.js
@@ -4,10 +4,10 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { fadeAndSlideDown } from "shared/styles/animations";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import HoverPreviewDocument from "components/HoverPreviewDocument";
+import { fadeAndSlideDown } from "styles/animations";
 import { isInternalUrl } from "utils/urls";
 
 const DELAY_OPEN = 300;
diff --git a/app/components/Modal.js b/app/components/Modal.js
index 05caa8ca..c23a472e 100644
--- a/app/components/Modal.js
+++ b/app/components/Modal.js
@@ -7,12 +7,12 @@ import { useTranslation } from "react-i18next";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { fadeAndScaleIn } from "shared/styles/animations";
 import Flex from "components/Flex";
 import NudeButton from "components/NudeButton";
 import Scrollable from "components/Scrollable";
 import usePrevious from "hooks/usePrevious";
 import useUnmount from "hooks/useUnmount";
+import { fadeAndScaleIn } from "styles/animations";
 
 let openModals = 0;
 
diff --git a/app/components/PlaceholderText.js b/app/components/PlaceholderText.js
index beccbfdd..042eeed4 100644
--- a/app/components/PlaceholderText.js
+++ b/app/components/PlaceholderText.js
@@ -2,8 +2,8 @@
 import * as React from "react";
 import styled from "styled-components";
 import { randomInteger } from "shared/random";
-import { pulsate } from "shared/styles/animations";
 import Flex from "components/Flex";
+import { pulsate } from "styles/animations";
 
 type Props = {|
   header?: boolean,
diff --git a/app/components/Popover.js b/app/components/Popover.js
index e1af37a7..b43a0657 100644
--- a/app/components/Popover.js
+++ b/app/components/Popover.js
@@ -2,7 +2,7 @@
 import * as React from "react";
 import { Popover as ReakitPopover } from "reakit/Popover";
 import styled from "styled-components";
-import { fadeAndScaleIn } from "shared/styles/animations";
+import { fadeAndScaleIn } from "styles/animations";
 
 type Props = {
   children: React.Node,
diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js
index f63b7627..77acb750 100644
--- a/app/components/Sidebar/Sidebar.js
+++ b/app/components/Sidebar/Sidebar.js
@@ -6,13 +6,13 @@ import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { fadeIn } from "shared/styles/animations";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
 import ResizeBorder from "./components/ResizeBorder";
 import Toggle, { ToggleButton, Positioner } from "./components/Toggle";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
+import { fadeIn } from "styles/animations";
 
 let ANIMATION_MS = 250;
 let isFirstRender = true;
diff --git a/app/components/Theme.js b/app/components/Theme.js
index bdcf6288..62138f3b 100644
--- a/app/components/Theme.js
+++ b/app/components/Theme.js
@@ -2,10 +2,10 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
-import GlobalStyles from "shared/styles/globals";
-import { dark, light, lightMobile, darkMobile } from "shared/styles/theme";
+import { dark, light, lightMobile, darkMobile } from "shared/theme";
 import useMediaQuery from "hooks/useMediaQuery";
 import useStores from "hooks/useStores";
+import GlobalStyles from "styles/globals";
 
 const empty = {};
 
diff --git a/app/components/Toast.js b/app/components/Toast.js
index 21fe38cb..da4c272d 100644
--- a/app/components/Toast.js
+++ b/app/components/Toast.js
@@ -3,7 +3,7 @@ import { CheckboxIcon, InfoIcon, WarningIcon } from "outline-icons";
 import { darken } from "polished";
 import * as React from "react";
 import styled, { css } from "styled-components";
-import { fadeAndScaleIn, pulse } from "shared/styles/animations";
+import { fadeAndScaleIn, pulse } from "styles/animations";
 import type { Toast as TToast } from "types";
 
 type Props = {
diff --git a/app/scenes/Document/components/Editor.js b/app/scenes/Document/components/Editor.js
index 0dd943a8..766e37e2 100644
--- a/app/scenes/Document/components/Editor.js
+++ b/app/scenes/Document/components/Editor.js
@@ -7,7 +7,7 @@ import { type TFunction, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { MAX_TITLE_LENGTH } from "shared/constants";
-import { light } from "shared/styles/theme";
+import { light } from "shared/theme";
 import parseTitle from "shared/utils/parseTitle";
 import Document from "models/Document";
 import ClickablePadding from "components/ClickablePadding";
diff --git a/app/stores/UiStore.js b/app/stores/UiStore.js
index c4050eee..1a0280f5 100644
--- a/app/stores/UiStore.js
+++ b/app/stores/UiStore.js
@@ -1,6 +1,6 @@
 // @flow
 import { action, autorun, computed, observable } from "mobx";
-import { light as defaultTheme } from "shared/styles/theme";
+import { light as defaultTheme } from "shared/theme";
 import Collection from "models/Collection";
 import Document from "models/Document";
 
diff --git a/shared/styles/animations.js b/app/styles/animations.js
similarity index 100%
rename from shared/styles/animations.js
rename to app/styles/animations.js
diff --git a/shared/styles/globals.js b/app/styles/globals.js
similarity index 100%
rename from shared/styles/globals.js
rename to app/styles/globals.js
diff --git a/app/types/index.js b/app/types/index.js
index 0aecebc6..afa96865 100644
--- a/app/types/index.js
+++ b/app/types/index.js
@@ -1,6 +1,6 @@
 // @flow
 import { type Location } from "react-router-dom";
-import theme from "shared/styles/theme";
+import theme from "shared/theme";
 import Document from "models/Document";
 
 export type Theme = typeof theme;
diff --git a/server/emails/components/EmailLayout.js b/server/emails/components/EmailLayout.js
index 05cd84c7..c87ac884 100644
--- a/server/emails/components/EmailLayout.js
+++ b/server/emails/components/EmailLayout.js
@@ -1,7 +1,7 @@
 // @flow
 import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
-import theme from "../../../shared/styles/theme";
+import theme from "../../../shared/theme";
 
 type Props = {
   children: React.Node,
diff --git a/server/emails/components/Footer.js b/server/emails/components/Footer.js
index c54330ac..c865066a 100644
--- a/server/emails/components/Footer.js
+++ b/server/emails/components/Footer.js
@@ -1,7 +1,7 @@
 // @flow
 import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
-import theme from "../../../shared/styles/theme";
+import theme from "../../../shared/theme";
 import { twitterUrl } from "../../../shared/utils/routeHelpers";
 
 type Props = {
diff --git a/shared/styles/theme.js b/shared/theme.js
similarity index 100%
rename from shared/styles/theme.js
rename to shared/theme.js