diff --git a/hack/dockerfiles/bot.Dockerfile b/hack/dockerfiles/bot.Dockerfile
index a686281..e0098a9 100644
--- a/hack/dockerfiles/bot.Dockerfile
+++ b/hack/dockerfiles/bot.Dockerfile
@@ -2,9 +2,9 @@ FROM golang:1.15-alpine AS builder
 
 # Create the user and group files that will be used in the running container to
 # run the process as an unprivileged user.
-RUN mkdir /user && \
-  echo 'nobody:x:65534:65534:nobody:/:' > /user/passwd && \
-  echo 'nobody:x:65534:' > /user/group
+RUN mkdir /user \
+    && echo 'nobody:x:65534:65534:nobody:/:' >/user/passwd \
+    && echo 'nobody:x:65534:' >/user/group
 
 # Install the Certificate-Authority certificates for the app to be able to make
 # calls to HTTPS endpoints.
@@ -24,8 +24,8 @@ COPY ./ ./
 
 # Build the executable to `/app`. Mark the build as statically linked.
 RUN CGO_ENABLED=0 go build \
-  -installsuffix "static" \
-  -o /app ./src/discord-bot
+    -installsuffix "static" \
+    -o /app ./src/discord-bot
 
 # Final stage: the running container.
 FROM scratch AS final
@@ -43,4 +43,4 @@ COPY --from=builder /app /app
 USER nobody:nobody
 
 # Run the compiled binary.
-ENTRYPOINT ["/app"]
\ No newline at end of file
+ENTRYPOINT ["/app"]
diff --git a/hack/dockerfiles/dev-container.Dockerfile b/hack/dockerfiles/dev-container.Dockerfile
index b38ab9f..c1dff45 100644
--- a/hack/dockerfiles/dev-container.Dockerfile
+++ b/hack/dockerfiles/dev-container.Dockerfile
@@ -5,4 +5,4 @@ ARG NODE_VERSION="lts/*"
 RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"
 
 # Install Wrangler
-RUN su vscode -c "npm install -g wrangler"
\ No newline at end of file
+RUN su vscode -c "npm install -g wrangler"
diff --git a/hack/dockerfiles/ui.Dockerfile b/hack/dockerfiles/ui.Dockerfile
index 9324fb9..d511319 100644
--- a/hack/dockerfiles/ui.Dockerfile
+++ b/hack/dockerfiles/ui.Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14-alpine AS base 
+FROM node:14-alpine AS base
 WORKDIR /src
 
 #
@@ -22,4 +22,4 @@ FROM base AS output
 COPY --from=builder /src/.next /src/node_modules ./
 
 EXPOSE 3000
-CMD yarn ui:prod
\ No newline at end of file
+CMD yarn ui:prod
diff --git a/hack/jestSetup.ts b/hack/jestSetup.ts
index bdd340a..cbf4862 100644
--- a/hack/jestSetup.ts
+++ b/hack/jestSetup.ts
@@ -1,5 +1,5 @@
-import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Enzyme from 'enzyme';
 import enableHooks from 'jest-react-hooks-shallow';
 
 Enzyme.configure({ adapter: new Adapter() });
diff --git a/package.json b/package.json
index 2b35d3c..cf549b9 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "scripts": {
         "lint": "run-p -c lint:* --",
         "lint:eslint": "eslint",
-        "lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx,sh,gitignore,mdx}'",
+        "lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx,sh,gitignore,mdx,Dockerfile}'",
         "lint:stylelint": "cross-env stylelint '**/*.{ts,tsx}'",
         "lint:types": "tsc --noEmit",
         "now-build": "run-s storybook:build",
@@ -86,6 +86,7 @@
         "minimist": "^1.2.5",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.2.1",
+        "prettier-plugin-organize-imports": "^1.1.1",
         "prettier-plugin-packagejson": "^2.2.8",
         "prettier-plugin-sh": "^0.6.0",
         "stylelint": "^13.8.0",
diff --git a/src/backend-worker/handlers/login-callback.ts b/src/backend-worker/handlers/login-callback.ts
index f377dc0..e53f24f 100644
--- a/src/backend-worker/handlers/login-callback.ts
+++ b/src/backend-worker/handlers/login-callback.ts
@@ -1,11 +1,11 @@
 import KSUID from 'ksuid';
 import {
+    AuthTokenResponse,
     DiscordUser,
     GuildSlug,
     SessionData,
-    AuthTokenResponse,
 } from '../../common/types';
-import { formData, resolveFailures, parsePermissions } from '../utils/api-tools';
+import { formData, parsePermissions, resolveFailures } from '../utils/api-tools';
 import { Bounce } from '../utils/bounce';
 import { apiPublicURI, botClientID, botClientSecret, uiPublicURI } from '../utils/config';
 import { Sessions } from '../utils/kv';
diff --git a/src/common/types/index.ts b/src/common/types/index.ts
index cb64739..6d88788 100644
--- a/src/common/types/index.ts
+++ b/src/common/types/index.ts
@@ -1,5 +1,5 @@
-export * from './Role';
 export * from './Category';
 export * from './Guild';
-export * from './User';
+export * from './Role';
 export * from './Session';
+export * from './User';
diff --git a/src/common/types/storyData.ts b/src/common/types/storyData.ts
index 921af82..8c53d75 100644
--- a/src/common/types/storyData.ts
+++ b/src/common/types/storyData.ts
@@ -1,16 +1,16 @@
 import {
     Category,
+    CategoryType,
     DiscordUser,
     Guild,
     GuildData,
     GuildEnumeration,
     GuildRoles,
+    GuildSlug,
     Member,
     Role,
     RoleSafety,
     RoleypolyUser,
-    CategoryType,
-    GuildSlug,
 } from '.';
 
 export const roleCategory: Role[] = [
diff --git a/src/common/utils/hasPermission.spec.ts b/src/common/utils/hasPermission.spec.ts
index 48a208d..0df0565 100644
--- a/src/common/utils/hasPermission.spec.ts
+++ b/src/common/utils/hasPermission.spec.ts
@@ -1,6 +1,6 @@
-import { hasPermission, permissions, hasPermissionOrAdmin } from './hasPermission';
 import { Role } from 'roleypoly/common/types';
 import { guildRoles } from 'roleypoly/common/types/storyData';
+import { hasPermission, hasPermissionOrAdmin, permissions } from './hasPermission';
 
 const roles: Role[] = [
     {
diff --git a/src/common/utils/withContext/index.ts b/src/common/utils/withContext/index.ts
index 9884653..321a2cd 100644
--- a/src/common/utils/withContext/index.ts
+++ b/src/common/utils/withContext/index.ts
@@ -1,3 +1,3 @@
 export * from './withContext';
-import * as testHelpers from './contextTestHelpers';
 export { testHelpers };
+import * as testHelpers from './contextTestHelpers';
diff --git a/src/design-system/atoms/avatar/Avatar.styled.ts b/src/design-system/atoms/avatar/Avatar.styled.ts
index b3e5b86..5be8979 100644
--- a/src/design-system/atoms/avatar/Avatar.styled.ts
+++ b/src/design-system/atoms/avatar/Avatar.styled.ts
@@ -1,7 +1,6 @@
-import { AvatarProps } from './Avatar';
-import styled, { css } from 'styled-components';
-
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
+import { AvatarProps } from './Avatar';
 
 type ContainerProps = Pick<AvatarProps, 'size'> & Pick<AvatarProps, 'deliberatelyEmpty'>;
 export const Container = styled.div<ContainerProps>`
diff --git a/src/design-system/atoms/avatar/index.ts b/src/design-system/atoms/avatar/index.ts
index 6cf3c33..a56b5ef 100644
--- a/src/design-system/atoms/avatar/index.ts
+++ b/src/design-system/atoms/avatar/index.ts
@@ -1,4 +1,4 @@
 export * from './Avatar';
+export { utils };
 
 import * as utils from './avatarUtils';
-export { utils };
diff --git a/src/design-system/atoms/branding/Branding.stories.tsx b/src/design-system/atoms/branding/Branding.stories.tsx
index 8e0ad3d..3fdb228 100644
--- a/src/design-system/atoms/branding/Branding.stories.tsx
+++ b/src/design-system/atoms/branding/Branding.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Logomark as BrandingLogomark, Logotype as BrandingLogotype } from './Branding';
 import styled from 'styled-components';
+import { Logomark as BrandingLogomark, Logotype as BrandingLogotype } from './Branding';
 
 export default {
     title: 'Atoms/Branding',
diff --git a/src/design-system/atoms/breakpoints/BreakpointProvider.tsx b/src/design-system/atoms/breakpoints/BreakpointProvider.tsx
index 4679e62..f9a461a 100644
--- a/src/design-system/atoms/breakpoints/BreakpointProvider.tsx
+++ b/src/design-system/atoms/breakpoints/BreakpointProvider.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { mediaQueryDefs } from './Breakpoints';
-import { ScreenSize, BreakpointContext } from './Context';
+import { BreakpointContext, ScreenSize } from './Context';
 
 const resetScreen: ScreenSize = {
     onSmallScreen: false,
diff --git a/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx b/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx
index 29d34ca..9ae9ff4 100644
--- a/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx
+++ b/src/design-system/atoms/breakpoints/Breakpoints.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BreakpointDebugTool } from './DebugTool';
 import { BreakpointsProvider } from './BreakpointProvider';
+import { BreakpointDebugTool } from './DebugTool';
 
 export default {
     title: 'Atoms/Breakpoints',
diff --git a/src/design-system/atoms/breakpoints/index.ts b/src/design-system/atoms/breakpoints/index.ts
index 4c89585..d72bd04 100644
--- a/src/design-system/atoms/breakpoints/index.ts
+++ b/src/design-system/atoms/breakpoints/index.ts
@@ -1,3 +1,3 @@
+export * from './BreakpointProvider';
 export * from './Breakpoints';
 export * from './Context';
-export * from './BreakpointProvider';
diff --git a/src/design-system/atoms/button/Button.spec.tsx b/src/design-system/atoms/button/Button.spec.tsx
index 1f9c192..749c42a 100644
--- a/src/design-system/atoms/button/Button.spec.tsx
+++ b/src/design-system/atoms/button/Button.spec.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
+import * as React from 'react';
 import { Button } from './Button';
 
 it('fires an onClick callback when clicked', () => {
diff --git a/src/design-system/atoms/button/Button.styled.ts b/src/design-system/atoms/button/Button.styled.ts
index fdca82d..db74490 100644
--- a/src/design-system/atoms/button/Button.styled.ts
+++ b/src/design-system/atoms/button/Button.styled.ts
@@ -1,7 +1,7 @@
-import styled, { css } from 'styled-components';
-import { text400, text300 } from 'roleypoly/design-system/atoms/typography';
-import { fontCSS } from 'roleypoly/design-system/atoms/fonts';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import { fontCSS } from 'roleypoly/design-system/atoms/fonts';
+import { text300, text400 } from 'roleypoly/design-system/atoms/typography';
+import styled, { css } from 'styled-components';
 
 export const IconContainer = styled.div`
     margin-right: 0.6rem;
diff --git a/src/design-system/atoms/button/Button.tsx b/src/design-system/atoms/button/Button.tsx
index 9f8d9f4..a08a7ed 100644
--- a/src/design-system/atoms/button/Button.tsx
+++ b/src/design-system/atoms/button/Button.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
     Button as StyledButton,
-    IconContainer,
     ButtonComposerOptions,
+    IconContainer,
 } from './Button.styled';
 
 export type ButtonProps = Partial<ButtonComposerOptions> & {
diff --git a/src/design-system/atoms/colors/colors.stories.tsx b/src/design-system/atoms/colors/colors.stories.tsx
index 1b556f8..49a21af 100644
--- a/src/design-system/atoms/colors/colors.stories.tsx
+++ b/src/design-system/atoms/colors/colors.stories.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { palette } from './colors';
-import styled from 'styled-components';
 import chroma from 'chroma-js';
+import * as React from 'react';
 import { AmbientSmall } from 'roleypoly/design-system/atoms/typography';
+import styled from 'styled-components';
+import { palette } from './colors';
 
 type RatioList = {
     color1: string[];
diff --git a/src/design-system/atoms/colors/colors.tsx b/src/design-system/atoms/colors/colors.tsx
index 47c2995..3546de0 100644
--- a/src/design-system/atoms/colors/colors.tsx
+++ b/src/design-system/atoms/colors/colors.tsx
@@ -1,6 +1,5 @@
-import { css, createGlobalStyle } from 'styled-components';
-
 import chroma from 'chroma-js';
+import { createGlobalStyle, css } from 'styled-components';
 
 export const palette = {
     taupe100: '#332D2D',
diff --git a/src/design-system/atoms/dot-overlay/DotOverlay.tsx b/src/design-system/atoms/dot-overlay/DotOverlay.tsx
index ba1a50c..5d68f73 100644
--- a/src/design-system/atoms/dot-overlay/DotOverlay.tsx
+++ b/src/design-system/atoms/dot-overlay/DotOverlay.tsx
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import * as React from 'react';
+import styled from 'styled-components';
 
 const dotOverlayBase = styled.div`
     opacity: 0.6;
diff --git a/src/design-system/atoms/fader/Fader.stories.tsx b/src/design-system/atoms/fader/Fader.stories.tsx
index 6263e1d..c8a4021 100644
--- a/src/design-system/atoms/fader/Fader.stories.tsx
+++ b/src/design-system/atoms/fader/Fader.stories.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { FaderOpacity, FaderSlide } from './Fader';
-import { Button } from 'roleypoly/design-system/atoms/button';
 import { action } from '@storybook/addon-actions';
+import * as React from 'react';
+import { Button } from 'roleypoly/design-system/atoms/button';
+import { FaderOpacity, FaderSlide } from './Fader';
 
 export default {
     title: 'Atoms/Fader',
diff --git a/src/design-system/atoms/fonts/fonts.stories.tsx b/src/design-system/atoms/fonts/fonts.stories.tsx
index f535c60..6e491ca 100644
--- a/src/design-system/atoms/fonts/fonts.stories.tsx
+++ b/src/design-system/atoms/fonts/fonts.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { UseFontStyled } from './fonts';
-import styled from 'styled-components';
 import { MediumTitle, Text as TextBlock } from 'roleypoly/design-system/atoms/typography';
+import styled from 'styled-components';
+import { UseFontStyled } from './fonts';
 
 const resetFont = (storyFn: () => React.ReactNode) => <FontReset>{storyFn()}</FontReset>;
 
diff --git a/src/design-system/atoms/fonts/fonts.tsx b/src/design-system/atoms/fonts/fonts.tsx
index 17bd959..18e7030 100644
--- a/src/design-system/atoms/fonts/fonts.tsx
+++ b/src/design-system/atoms/fonts/fonts.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import Head from 'next/head';
+import * as React from 'react';
 import styled, { css } from 'styled-components';
 
 export const InjectTypekitFont = () => {
diff --git a/src/design-system/atoms/halfsies/Halfsies.tsx b/src/design-system/atoms/halfsies/Halfsies.tsx
index f2c43df..e5bba65 100644
--- a/src/design-system/atoms/halfsies/Halfsies.tsx
+++ b/src/design-system/atoms/halfsies/Halfsies.tsx
@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
 import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
+import styled, { css } from 'styled-components';
 
 export const HalfsiesContainer = styled.div`
     display: flex;
diff --git a/src/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts b/src/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts
index c1413c7..8cc3454 100644
--- a/src/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts
+++ b/src/design-system/atoms/horizontal-switch/HorizontalSwitch.styled.ts
@@ -1,13 +1,11 @@
-import styled, { css } from 'styled-components';
-import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
 
 export const Item = styled.div<{ selected: boolean }>`
     padding: 10px;
     box-sizing: border-box;
     transition: background-color ease-in-out ${transitions.actionable}s;
-
     ${(props) =>
         props.selected &&
         css`
diff --git a/src/design-system/atoms/popover/Popover.tsx b/src/design-system/atoms/popover/Popover.tsx
index 1b48053..5e46ac9 100644
--- a/src/design-system/atoms/popover/Popover.tsx
+++ b/src/design-system/atoms/popover/Popover.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
+import { IoMdClose } from 'react-icons/io';
+import { globalOnKeyUp } from 'roleypoly/design-system/atoms/key-events';
 import {
-    PopoverBase,
     DefocusHandler,
+    PopoverBase,
+    PopoverContent,
     PopoverHead,
     PopoverHeadCloser,
-    PopoverContent,
 } from './Popover.styled';
-import { globalOnKeyUp } from 'roleypoly/design-system/atoms/key-events';
-import { IoMdClose } from 'react-icons/io';
 
 type PopoverProps = {
     children: () => React.ReactNode;
diff --git a/src/design-system/atoms/role/Role.spec.tsx b/src/design-system/atoms/role/Role.spec.tsx
index 5660efe..0e086c1 100644
--- a/src/design-system/atoms/role/Role.spec.tsx
+++ b/src/design-system/atoms/role/Role.spec.tsx
@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
-import { roleCategory } from 'roleypoly/common/types/storyData';
 import * as React from 'react';
+import { roleCategory } from 'roleypoly/common/types/storyData';
 import { Role } from './Role';
 
 it('fires an OnClick handler when clicked', () => {
diff --git a/src/design-system/atoms/role/Role.stories.tsx b/src/design-system/atoms/role/Role.stories.tsx
index 870e1cf..e232b06 100644
--- a/src/design-system/atoms/role/Role.stories.tsx
+++ b/src/design-system/atoms/role/Role.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Role as RoleComponent } from './Role';
 import { roleCategory } from 'roleypoly/common/types/storyData';
 import { withColors } from 'roleypoly/design-system/atoms/colors/withColors';
 import styled from 'styled-components';
+import { Role as RoleComponent } from './Role';
 
 export default {
     title: 'Atoms/Role',
diff --git a/src/design-system/atoms/role/Role.styled.tsx b/src/design-system/atoms/role/Role.styled.tsx
index e1c3fb1..fd5faa6 100644
--- a/src/design-system/atoms/role/Role.styled.tsx
+++ b/src/design-system/atoms/role/Role.styled.tsx
@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
-import { transitions } from 'roleypoly/design-system/atoms/timings';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
 
 export type StyledProps = {
     selected: boolean;
diff --git a/src/design-system/atoms/role/Role.tsx b/src/design-system/atoms/role/Role.tsx
index 637ebec..1b5dd6d 100644
--- a/src/design-system/atoms/role/Role.tsx
+++ b/src/design-system/atoms/role/Role.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Role as RPCRole, RoleSafety } from 'roleypoly/common/types';
-import * as styled from './Role.styled';
-import { FaCheck, FaTimes } from 'react-icons/fa';
-import { numberToChroma } from 'roleypoly/design-system/atoms/colors';
 import chroma from 'chroma-js';
+import * as React from 'react';
+import { FaCheck, FaTimes } from 'react-icons/fa';
+import { Role as RPCRole, RoleSafety } from 'roleypoly/common/types';
+import { numberToChroma } from 'roleypoly/design-system/atoms/colors';
+import * as styled from './Role.styled';
 
 type Props = {
     role: RPCRole;
diff --git a/src/design-system/atoms/space/Space.stories.tsx b/src/design-system/atoms/space/Space.stories.tsx
index a6294d1..ba95f37 100644
--- a/src/design-system/atoms/space/Space.stories.tsx
+++ b/src/design-system/atoms/space/Space.stories.tsx
@@ -1,5 +1,5 @@
-import { Space as SpaceComponent } from './Space';
 import * as React from 'react';
+import { Space as SpaceComponent } from './Space';
 
 export default {
     title: 'Atoms',
diff --git a/src/design-system/atoms/sparkle/Shapes.tsx b/src/design-system/atoms/sparkle/Shapes.tsx
index 10bb19a..dd093f5 100644
--- a/src/design-system/atoms/sparkle/Shapes.tsx
+++ b/src/design-system/atoms/sparkle/Shapes.tsx
@@ -1,5 +1,5 @@
-import { CSSProperties } from 'styled-components';
 import * as React from 'react';
+import { CSSProperties } from 'styled-components';
 
 type SparkleProps = {
     height: string;
diff --git a/src/design-system/atoms/sparkle/Sparkle.stories.tsx b/src/design-system/atoms/sparkle/Sparkle.stories.tsx
index 4c6d6e1..a9ea6e0 100644
--- a/src/design-system/atoms/sparkle/Sparkle.stories.tsx
+++ b/src/design-system/atoms/sparkle/Sparkle.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { SparkleOverlay } from './Sparkle';
 import { Button } from 'roleypoly/design-system/atoms/button';
 import { Hero } from 'roleypoly/design-system/atoms/hero';
+import { SparkleOverlay } from './Sparkle';
 
 export default {
     title: 'Atoms/Sparkle',
diff --git a/src/design-system/atoms/sparkle/Sparkle.tsx b/src/design-system/atoms/sparkle/Sparkle.tsx
index 6241247..c8ceedf 100644
--- a/src/design-system/atoms/sparkle/Sparkle.tsx
+++ b/src/design-system/atoms/sparkle/Sparkle.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
-
+import styled from 'styled-components';
 import { SparklePatternAlpha, SparklePatternBeta } from './Shapes';
 
 type Props = {
diff --git a/src/design-system/atoms/tab-view/TabView.spec.tsx b/src/design-system/atoms/tab-view/TabView.spec.tsx
index a1ee1bb..f6b7fe0 100644
--- a/src/design-system/atoms/tab-view/TabView.spec.tsx
+++ b/src/design-system/atoms/tab-view/TabView.spec.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
-import { TabView, Tab, TabViewProps } from './TabView';
-import { TabTitle, TabContent } from './TabView.styled';
+import * as React from 'react';
+import { Tab, TabView, TabViewProps } from './TabView';
+import { TabContent, TabTitle } from './TabView.styled';
 
 const makeView = (props: Partial<TabViewProps> = {}) =>
     shallow(
diff --git a/src/design-system/atoms/tab-view/TabView.stories.tsx b/src/design-system/atoms/tab-view/TabView.stories.tsx
index 86f42d0..cf37bd9 100644
--- a/src/design-system/atoms/tab-view/TabView.stories.tsx
+++ b/src/design-system/atoms/tab-view/TabView.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TabView, Tab } from './TabView';
+import { Tab, TabView } from './TabView';
 
 export default {
     title: 'Atoms/Tab View',
diff --git a/src/design-system/atoms/tab-view/TabView.styled.ts b/src/design-system/atoms/tab-view/TabView.styled.ts
index b2051aa..8c5550c 100644
--- a/src/design-system/atoms/tab-view/TabView.styled.ts
+++ b/src/design-system/atoms/tab-view/TabView.styled.ts
@@ -1,7 +1,7 @@
-import styled, { css } from 'styled-components';
+import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
-import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
+import styled, { css } from 'styled-components';
 
 export const TabViewStyled = styled.div``;
 
diff --git a/src/design-system/atoms/tab-view/TabView.tsx b/src/design-system/atoms/tab-view/TabView.tsx
index a8dd7f6..d8dd3e5 100644
--- a/src/design-system/atoms/tab-view/TabView.tsx
+++ b/src/design-system/atoms/tab-view/TabView.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TabTitleRow, TabContent, TabViewStyled, TabTitle } from './TabView.styled';
+import { TabContent, TabTitle, TabTitleRow, TabViewStyled } from './TabView.styled';
 
 export type TabViewProps = {
     children: React.ReactNode[];
diff --git a/src/design-system/atoms/text-input/TextInput.stories.tsx b/src/design-system/atoms/text-input/TextInput.stories.tsx
index 46d3496..4acc386 100644
--- a/src/design-system/atoms/text-input/TextInput.stories.tsx
+++ b/src/design-system/atoms/text-input/TextInput.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { TextInput, TextInputWithIcon } from './TextInput';
-import { SmallTitle } from 'roleypoly/design-system/atoms/typography';
 import { FiKey } from 'react-icons/fi';
+import { SmallTitle } from 'roleypoly/design-system/atoms/typography';
+import { TextInput, TextInputWithIcon } from './TextInput';
 
 export default {
     title: 'Atoms/Text Input',
diff --git a/src/design-system/atoms/text-input/TextInput.tsx b/src/design-system/atoms/text-input/TextInput.tsx
index 989c493..32a9600 100644
--- a/src/design-system/atoms/text-input/TextInput.tsx
+++ b/src/design-system/atoms/text-input/TextInput.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
 
 const StyledTextInput = styled.input`
     appearance: none;
diff --git a/src/design-system/atoms/typography/mdx.tsx b/src/design-system/atoms/typography/mdx.tsx
index 6ee2042..4d2f3a2 100644
--- a/src/design-system/atoms/typography/mdx.tsx
+++ b/src/design-system/atoms/typography/mdx.tsx
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-
 import { Link, Text, text600, text700, text800, text900 } from './typography';
 
 export const mdxComponents = {
diff --git a/src/design-system/atoms/typography/typography.stories.tsx b/src/design-system/atoms/typography/typography.stories.tsx
index a86527a..ebc555a 100644
--- a/src/design-system/atoms/typography/typography.stories.tsx
+++ b/src/design-system/atoms/typography/typography.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import * as typography from './typography';
 import styled from 'styled-components';
+import * as typography from './typography';
 
 export default {
     title: 'Atoms/Typography',
diff --git a/src/design-system/atoms/typography/typography.tsx b/src/design-system/atoms/typography/typography.tsx
index ad7563a..2c478d7 100644
--- a/src/design-system/atoms/typography/typography.tsx
+++ b/src/design-system/atoms/typography/typography.tsx
@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled, { css } from 'styled-components';
 
 const reset = css`
     margin: 0;
diff --git a/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts b/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts
index 38c31fe..0e5ffeb 100644
--- a/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts
+++ b/src/design-system/molecules/demo-discord/DemoDiscord.styled.ts
@@ -1,6 +1,5 @@
-import styled, { keyframes } from 'styled-components';
-
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled, { keyframes } from 'styled-components';
 
 export const Base = styled.div`
     background-color: ${palette.discord100};
diff --git a/src/design-system/molecules/demo-discord/DemoDiscord.tsx b/src/design-system/molecules/demo-discord/DemoDiscord.tsx
index 2a4245e..71c18ec 100644
--- a/src/design-system/molecules/demo-discord/DemoDiscord.tsx
+++ b/src/design-system/molecules/demo-discord/DemoDiscord.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
-import {
-    Base,
-    Timestamp,
-    TextParts,
-    Username,
-    InputBox,
-    Line,
-    InputTextAlignment,
-} from './DemoDiscord.styled';
 import { demoData } from 'roleypoly/common/types/demoData';
 import { Typist } from 'roleypoly/design-system/atoms/typist';
+import {
+    Base,
+    InputBox,
+    InputTextAlignment,
+    Line,
+    TextParts,
+    Timestamp,
+    Username,
+} from './DemoDiscord.styled';
 
 export const DemoDiscord = () => {
     const time = new Date();
diff --git a/src/design-system/molecules/demo-picker/DemoPicker.tsx b/src/design-system/molecules/demo-picker/DemoPicker.tsx
index 63262da..5de52bc 100644
--- a/src/design-system/molecules/demo-picker/DemoPicker.tsx
+++ b/src/design-system/molecules/demo-picker/DemoPicker.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Role } from 'roleypoly/design-system/atoms/role';
 import { Role as RPCRole } from 'roleypoly/common/types';
-import styled from 'styled-components';
 import { demoData } from 'roleypoly/common/types/demoData';
+import { Role } from 'roleypoly/design-system/atoms/role';
+import styled from 'styled-components';
 
 const Container = styled.div`
     display: flex;
diff --git a/src/design-system/molecules/editor-category/EditorCategory.styled.ts b/src/design-system/molecules/editor-category/EditorCategory.styled.ts
index e9a7fb0..196dc48 100644
--- a/src/design-system/molecules/editor-category/EditorCategory.styled.ts
+++ b/src/design-system/molecules/editor-category/EditorCategory.styled.ts
@@ -1,4 +1,3 @@
-import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 import styled from 'styled-components';
 
 export const RoleContainer = styled.div`
diff --git a/src/design-system/molecules/editor-category/EditorCategory.tsx b/src/design-system/molecules/editor-category/EditorCategory.tsx
index 2d580f1..d63cb34 100644
--- a/src/design-system/molecules/editor-category/EditorCategory.tsx
+++ b/src/design-system/molecules/editor-category/EditorCategory.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
+import { GoSearch } from 'react-icons/go';
+import { Category, CategoryType, Role as RoleType } from 'roleypoly/common/types';
+import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
 import { HorizontalSwitch } from 'roleypoly/design-system/atoms/horizontal-switch';
+import { Popover } from 'roleypoly/design-system/atoms/popover';
+import { Role } from 'roleypoly/design-system/atoms/role';
 import { Space } from 'roleypoly/design-system/atoms/space';
 import { TextInput, TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
 import { Text } from 'roleypoly/design-system/atoms/typography';
-import { Popover } from 'roleypoly/design-system/atoms/popover';
-import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
 import { RoleSearch } from 'roleypoly/design-system/molecules/role-search';
-import { Category, CategoryType, Role as RoleType } from 'roleypoly/common/types';
-import { Role } from 'roleypoly/design-system/atoms/role';
-import { GoSearch } from 'react-icons/go';
 import { RoleContainer } from './EditorCategory.styled';
 
 type Props = {
diff --git a/src/design-system/molecules/error-banner/ErrorBanner.tsx b/src/design-system/molecules/error-banner/ErrorBanner.tsx
index b65399a..bec79ff 100644
--- a/src/design-system/molecules/error-banner/ErrorBanner.tsx
+++ b/src/design-system/molecules/error-banner/ErrorBanner.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
-    ErrorWrapper,
     ErrorDivider,
     ErrorSideCode,
     ErrorText,
     ErrorTextLower,
+    ErrorWrapper,
 } from './ErrorBanner.styled';
 
 export type ErrorMessage = {
diff --git a/src/design-system/molecules/footer/Footer.styled.ts b/src/design-system/molecules/footer/Footer.styled.ts
index d5d1cc8..5703e4a 100644
--- a/src/design-system/molecules/footer/Footer.styled.ts
+++ b/src/design-system/molecules/footer/Footer.styled.ts
@@ -1,7 +1,6 @@
-import styled from 'styled-components';
-
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
 
 export const FooterWrapper = styled.div`
     display: flex;
diff --git a/src/design-system/molecules/footer/Footer.tsx b/src/design-system/molecules/footer/Footer.tsx
index 790321f..4b33e53 100644
--- a/src/design-system/molecules/footer/Footer.tsx
+++ b/src/design-system/molecules/footer/Footer.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { FooterWrapper, HoverColor } from './Footer.styled';
-import { AmbientLarge } from 'roleypoly/design-system/atoms/typography';
 import { FaHeart } from 'react-icons/fa';
+import { AmbientLarge } from 'roleypoly/design-system/atoms/typography';
 import { Flags } from './Flags';
+import { FooterWrapper, HoverColor } from './Footer.styled';
 
 const year = new Date().getFullYear();
 
diff --git a/src/design-system/molecules/guild-nav/GuildNav.stories.tsx b/src/design-system/molecules/guild-nav/GuildNav.stories.tsx
index 1c7c74d..6b794ea 100644
--- a/src/design-system/molecules/guild-nav/GuildNav.stories.tsx
+++ b/src/design-system/molecules/guild-nav/GuildNav.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { GuildNav } from './GuildNav';
 import { mastheadSlugs } from 'roleypoly/common/types/storyData';
 import { PopoverBase } from 'roleypoly/design-system/atoms/popover/Popover.styled';
+import { GuildNav } from './GuildNav';
 
 export default {
     title: 'Molecules/Guild Nav',
diff --git a/src/design-system/molecules/guild-nav/GuildNav.styled.ts b/src/design-system/molecules/guild-nav/GuildNav.styled.ts
index cce3a63..a8de1f8 100644
--- a/src/design-system/molecules/guild-nav/GuildNav.styled.ts
+++ b/src/design-system/molecules/guild-nav/GuildNav.styled.ts
@@ -1,7 +1,6 @@
-import styled from 'styled-components';
-
-import { transitions } from 'roleypoly/design-system/atoms/timings';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
 
 export const GuildNavItem = styled.a`
     display: flex;
diff --git a/src/design-system/molecules/help-page-base/HelpPageBase.tsx b/src/design-system/molecules/help-page-base/HelpPageBase.tsx
index 1a5a068..6e71227 100644
--- a/src/design-system/molecules/help-page-base/HelpPageBase.tsx
+++ b/src/design-system/molecules/help-page-base/HelpPageBase.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
 
 export type HelpPageProps = {
     children: React.ReactNode;
diff --git a/src/design-system/molecules/help-page-base/storyDecorator.tsx b/src/design-system/molecules/help-page-base/storyDecorator.tsx
index 6728b8a..a6c9426 100644
--- a/src/design-system/molecules/help-page-base/storyDecorator.tsx
+++ b/src/design-system/molecules/help-page-base/storyDecorator.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HelpPageBase } from './HelpPageBase';
 import { Content } from 'roleypoly/design-system/organisms/app-shell/AppShell.styled';
+import { HelpPageBase } from './HelpPageBase';
 
 export const HelpStoryWrapper = (storyFn: any): React.ReactNode => (
     <Content>
diff --git a/src/design-system/molecules/nav-slug/NavSlug.stories.tsx b/src/design-system/molecules/nav-slug/NavSlug.stories.tsx
index b87ad6f..bfd1f34 100644
--- a/src/design-system/molecules/nav-slug/NavSlug.stories.tsx
+++ b/src/design-system/molecules/nav-slug/NavSlug.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { NavSlug } from './NavSlug';
 import { guild } from 'roleypoly/common/types/storyData';
+import { NavSlug } from './NavSlug';
 
 export default {
     title: 'Molecules/Server Slug',
diff --git a/src/design-system/molecules/picker-category/PickerCategory.stories.tsx b/src/design-system/molecules/picker-category/PickerCategory.stories.tsx
index 08cf7e5..2514778 100644
--- a/src/design-system/molecules/picker-category/PickerCategory.stories.tsx
+++ b/src/design-system/molecules/picker-category/PickerCategory.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
-    roleWikiData,
-    roleCategory,
     mockCategory,
+    roleCategory,
+    roleWikiData,
 } from 'roleypoly/common/types/storyData';
 import { PickerCategory } from './PickerCategory';
 
diff --git a/src/design-system/molecules/picker-category/PickerCategory.tsx b/src/design-system/molecules/picker-category/PickerCategory.tsx
index 06b3842..4932679 100644
--- a/src/design-system/molecules/picker-category/PickerCategory.tsx
+++ b/src/design-system/molecules/picker-category/PickerCategory.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import ReactTooltip from 'react-tooltip';
-import { Role } from 'roleypoly/design-system/atoms/role';
-import { AmbientLarge, LargeText } from 'roleypoly/design-system/atoms/typography';
 import {
     Category as RPCCategory,
     Role as RPCRole,
     RoleSafety,
 } from 'roleypoly/common/types';
+import { Role } from 'roleypoly/design-system/atoms/role';
+import { AmbientLarge, LargeText } from 'roleypoly/design-system/atoms/typography';
 import styled from 'styled-components';
 import { Head, HeadSub, HeadTitle } from './PickerCategory.styled';
 
diff --git a/src/design-system/molecules/preauth-secret-code/PreauthSecretCode.spec.tsx b/src/design-system/molecules/preauth-secret-code/PreauthSecretCode.spec.tsx
index e9098a1..34670a0 100644
--- a/src/design-system/molecules/preauth-secret-code/PreauthSecretCode.spec.tsx
+++ b/src/design-system/molecules/preauth-secret-code/PreauthSecretCode.spec.tsx
@@ -1,12 +1,12 @@
 jest.unmock('roleypoly/design-system/atoms/text-input');
 jest.unmock('./PreauthSecretCode');
 
-import { Button } from 'roleypoly/design-system/atoms/button';
-import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { PreauthSecretCode } from './PreauthSecretCode';
+import { Button } from 'roleypoly/design-system/atoms/button';
 import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
+import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
+import { PreauthSecretCode } from './PreauthSecretCode';
 
 const value = 'unfathomable fishy sticks';
 const onSubmit = jest.fn();
diff --git a/src/design-system/molecules/preauth-secret-code/PreauthSecretCode.tsx b/src/design-system/molecules/preauth-secret-code/PreauthSecretCode.tsx
index 83902c5..4178cf9 100644
--- a/src/design-system/molecules/preauth-secret-code/PreauthSecretCode.tsx
+++ b/src/design-system/molecules/preauth-secret-code/PreauthSecretCode.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
 import { FiKey } from 'react-icons/fi';
-import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
 import { Button } from 'roleypoly/design-system/atoms/button';
+import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
 import { Space } from 'roleypoly/design-system/atoms/space';
+import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
 
 type PreauthProps = {
     onSubmit: (code: string) => void;
diff --git a/src/design-system/molecules/reset-submit/ResetSubmit.spec.tsx b/src/design-system/molecules/reset-submit/ResetSubmit.spec.tsx
index c507ed6..74437e3 100644
--- a/src/design-system/molecules/reset-submit/ResetSubmit.spec.tsx
+++ b/src/design-system/molecules/reset-submit/ResetSubmit.spec.tsx
@@ -1,6 +1,6 @@
-import { Button } from 'roleypoly/design-system/atoms/button';
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { Button } from 'roleypoly/design-system/atoms/button';
 import { ResetSubmit } from './ResetSubmit';
 
 const onReset = jest.fn();
diff --git a/src/design-system/molecules/reset-submit/ResetSubmit.styled.ts b/src/design-system/molecules/reset-submit/ResetSubmit.styled.ts
index 00ab0a8..b21f6e8 100644
--- a/src/design-system/molecules/reset-submit/ResetSubmit.styled.ts
+++ b/src/design-system/molecules/reset-submit/ResetSubmit.styled.ts
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
 import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
+import styled from 'styled-components';
 
 export const Buttons = styled.div`
     display: flex;
diff --git a/src/design-system/molecules/reset-submit/ResetSubmit.tsx b/src/design-system/molecules/reset-submit/ResetSubmit.tsx
index ce392a9..4fc8f6a 100644
--- a/src/design-system/molecules/reset-submit/ResetSubmit.tsx
+++ b/src/design-system/molecules/reset-submit/ResetSubmit.tsx
@@ -1,7 +1,7 @@
-import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
-import { Button } from 'roleypoly/design-system/atoms/button';
 import * as React from 'react';
 import { MdRestore } from 'react-icons/md';
+import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
+import { Button } from 'roleypoly/design-system/atoms/button';
 import styled from 'styled-components';
 
 type Props = {
diff --git a/src/design-system/molecules/role-search/RoleSearch.stories.tsx b/src/design-system/molecules/role-search/RoleSearch.stories.tsx
index 32a5a6d..89b3ada 100644
--- a/src/design-system/molecules/role-search/RoleSearch.stories.tsx
+++ b/src/design-system/molecules/role-search/RoleSearch.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { RoleSearch } from './RoleSearch';
 import { roleCategory } from 'roleypoly/common/types/storyData';
+import { RoleSearch } from './RoleSearch';
 
 export default {
     title: 'Molecules/Role Search',
diff --git a/src/design-system/molecules/role-search/RoleSearch.tsx b/src/design-system/molecules/role-search/RoleSearch.tsx
index ba2ba3f..30c7bcc 100644
--- a/src/design-system/molecules/role-search/RoleSearch.tsx
+++ b/src/design-system/molecules/role-search/RoleSearch.tsx
@@ -1,11 +1,11 @@
-import styled from 'styled-components';
 import Fuse from 'fuse.js';
 import * as React from 'react';
 import { GoSearch } from 'react-icons/go';
+import { Role as RoleType } from 'roleypoly/common/types';
 import { Role } from 'roleypoly/design-system/atoms/role';
 import { Space } from 'roleypoly/design-system/atoms/space';
 import { TextInputWithIcon } from 'roleypoly/design-system/atoms/text-input';
-import { Role as RoleType } from 'roleypoly/common/types';
+import styled from 'styled-components';
 
 type Props = {
     roles: RoleType[];
diff --git a/src/design-system/molecules/server-masthead/ServerMasthead.spec.tsx b/src/design-system/molecules/server-masthead/ServerMasthead.spec.tsx
index 23ac421..df30843 100644
--- a/src/design-system/molecules/server-masthead/ServerMasthead.spec.tsx
+++ b/src/design-system/molecules/server-masthead/ServerMasthead.spec.tsx
@@ -1,9 +1,9 @@
 jest.unmock('./ServerMasthead');
 
-import * as React from 'react';
 import { shallow } from 'enzyme';
-import { ServerMasthead } from './ServerMasthead';
+import * as React from 'react';
 import { guild } from 'roleypoly/common/types/storyData';
+import { ServerMasthead } from './ServerMasthead';
 import { Editable } from './ServerMasthead.styled';
 
 it('shows Edit Server when editable is true', () => {
diff --git a/src/design-system/molecules/server-masthead/ServerMasthead.stories.tsx b/src/design-system/molecules/server-masthead/ServerMasthead.stories.tsx
index 6862f96..0b0d409 100644
--- a/src/design-system/molecules/server-masthead/ServerMasthead.stories.tsx
+++ b/src/design-system/molecules/server-masthead/ServerMasthead.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ServerMasthead } from './ServerMasthead';
 import { guild } from 'roleypoly/common/types/storyData';
+import { ServerMasthead } from './ServerMasthead';
 
 export default {
     title: 'Molecules/Server Masthead',
diff --git a/src/design-system/molecules/server-masthead/ServerMasthead.styled.ts b/src/design-system/molecules/server-masthead/ServerMasthead.styled.ts
index e98fdf5..107d931 100644
--- a/src/design-system/molecules/server-masthead/ServerMasthead.styled.ts
+++ b/src/design-system/molecules/server-masthead/ServerMasthead.styled.ts
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
 
 export const Wrapper = styled.div`
     display: flex;
diff --git a/src/design-system/molecules/server-masthead/ServerMasthead.tsx b/src/design-system/molecules/server-masthead/ServerMasthead.tsx
index 30d8dc6..298da5c 100644
--- a/src/design-system/molecules/server-masthead/ServerMasthead.tsx
+++ b/src/design-system/molecules/server-masthead/ServerMasthead.tsx
@@ -1,10 +1,10 @@
-import { Guild } from 'roleypoly/common/types';
-import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
-import { AccentTitle, AmbientLarge } from 'roleypoly/design-system/atoms/typography';
 import Link from 'next/link';
-import { guild } from 'roleypoly/common/types/storyData';
 import * as React from 'react';
 import { GoPencil } from 'react-icons/go';
+import { Guild } from 'roleypoly/common/types';
+import { guild } from 'roleypoly/common/types/storyData';
+import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
+import { AccentTitle, AmbientLarge } from 'roleypoly/design-system/atoms/typography';
 import { Editable, Icon, Name, Wrapper } from './ServerMasthead.styled';
 
 export type ServerMastheadProps = {
diff --git a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx b/src/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx
index e862055..fdafb00 100644
--- a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx
+++ b/src/design-system/molecules/user-avatar-group/UserAvatarGroup.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { UserAvatarGroup } from './UserAvatarGroup';
 import { user } from 'roleypoly/common/types/storyData';
 import { Hero } from 'roleypoly/design-system/atoms/hero';
+import { UserAvatarGroup } from './UserAvatarGroup';
 
 export default {
     title: 'Molecules/User Avatar Group',
diff --git a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts b/src/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts
index 44137c3..df35271 100644
--- a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts
+++ b/src/design-system/molecules/user-avatar-group/UserAvatarGroup.styled.ts
@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
 import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
 
 export const Collapse = styled.div<{ preventCollapse: boolean }>`
     ${(props) =>
diff --git a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx b/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
index 0fd48c9..d2b8956 100644
--- a/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
+++ b/src/design-system/molecules/user-avatar-group/UserAvatarGroup.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DiscordUser } from 'roleypoly/common/types';
-import { utils, Avatar } from 'roleypoly/design-system/atoms/avatar';
-import { Group, Collapse, Discriminator, GroupText } from './UserAvatarGroup.styled';
+import { Avatar, utils } from 'roleypoly/design-system/atoms/avatar';
+import { Collapse, Discriminator, Group, GroupText } from './UserAvatarGroup.styled';
 
 type Props = {
     user: DiscordUser;
diff --git a/src/design-system/molecules/user-popover/UserPopover.stories.tsx b/src/design-system/molecules/user-popover/UserPopover.stories.tsx
index 578fe56..6d3aa69 100644
--- a/src/design-system/molecules/user-popover/UserPopover.stories.tsx
+++ b/src/design-system/molecules/user-popover/UserPopover.stories.tsx
@@ -1,7 +1,7 @@
-import { user } from 'roleypoly/common/types/storyData';
 import * as React from 'react';
-import { UserPopover as UserPopoverComponent } from './UserPopover';
+import { user } from 'roleypoly/common/types/storyData';
 import { PopoverBase } from 'roleypoly/design-system/atoms/popover/Popover.styled';
+import { UserPopover as UserPopoverComponent } from './UserPopover';
 
 export default {
     title: 'Molecules/User Popover',
diff --git a/src/design-system/molecules/user-popover/UserPopover.styled.ts b/src/design-system/molecules/user-popover/UserPopover.styled.ts
index 81378e3..d8fc05b 100644
--- a/src/design-system/molecules/user-popover/UserPopover.styled.ts
+++ b/src/design-system/molecules/user-popover/UserPopover.styled.ts
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
+import styled from 'styled-components';
 
 export const Base = styled.div`
     text-align: right;
diff --git a/src/design-system/molecules/user-popover/UserPopover.tsx b/src/design-system/molecules/user-popover/UserPopover.tsx
index 0811b12..fe22227 100644
--- a/src/design-system/molecules/user-popover/UserPopover.tsx
+++ b/src/design-system/molecules/user-popover/UserPopover.tsx
@@ -1,9 +1,9 @@
+import Link from 'next/link';
 import * as React from 'react';
+import { GoGear, GoSignOut } from 'react-icons/go';
 import { DiscordUser } from 'roleypoly/common/types';
 import { UserAvatarGroup } from 'roleypoly/design-system/molecules/user-avatar-group';
 import { Base, NavAction } from './UserPopover.styled';
-import { GoGear, GoSignOut } from 'react-icons/go';
-import Link from 'next/link';
 
 type UserPopoverProps = {
     user: DiscordUser;
diff --git a/src/design-system/organisms/app-shell/AppShell.stories.tsx b/src/design-system/organisms/app-shell/AppShell.stories.tsx
index 84dcb03..d87d51d 100644
--- a/src/design-system/organisms/app-shell/AppShell.stories.tsx
+++ b/src/design-system/organisms/app-shell/AppShell.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { mastheadSlugs, user } from 'roleypoly/common/types/storyData';
 import { AppShell } from './AppShell';
-import { user, mastheadSlugs } from 'roleypoly/common/types/storyData';
 
 export default {
     title: 'Organisms/App Shell',
diff --git a/src/design-system/organisms/app-shell/AppShell.styled.tsx b/src/design-system/organisms/app-shell/AppShell.styled.tsx
index 16f0b53..aa0e814 100644
--- a/src/design-system/organisms/app-shell/AppShell.styled.tsx
+++ b/src/design-system/organisms/app-shell/AppShell.styled.tsx
@@ -1,6 +1,6 @@
-import styled, { createGlobalStyle } from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { fontCSS } from 'roleypoly/design-system/atoms/fonts';
+import styled, { createGlobalStyle } from 'styled-components';
 
 export const Content = styled.div<{ small?: boolean }>`
     margin: 0 auto;
diff --git a/src/design-system/organisms/editor/EditorShell.stories.tsx b/src/design-system/organisms/editor/EditorShell.stories.tsx
index 6413b28..7496717 100644
--- a/src/design-system/organisms/editor/EditorShell.stories.tsx
+++ b/src/design-system/organisms/editor/EditorShell.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { EditorShell } from './EditorShell';
 import { guildEnum } from 'roleypoly/common/types/storyData';
+import { EditorShell } from './EditorShell';
 
 export default {
     title: 'Organisms/Editor',
diff --git a/src/design-system/organisms/editor/EditorShell.styled.ts b/src/design-system/organisms/editor/EditorShell.styled.ts
index 22e994f..cb3cbe8 100644
--- a/src/design-system/organisms/editor/EditorShell.styled.ts
+++ b/src/design-system/organisms/editor/EditorShell.styled.ts
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
 
 export const CategoryContainer = styled.div`
     background-color: ${palette.taupe100};
diff --git a/src/design-system/organisms/editor/EditorShell.tsx b/src/design-system/organisms/editor/EditorShell.tsx
index 5608a18..46cb512 100644
--- a/src/design-system/organisms/editor/EditorShell.tsx
+++ b/src/design-system/organisms/editor/EditorShell.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TabView, Tab } from 'roleypoly/design-system/atoms/tab-view';
 import { PresentableGuild } from 'roleypoly/common/types';
+import { Tab, TabView } from 'roleypoly/design-system/atoms/tab-view';
 import { EditorCategory } from '../../molecules/editor-category';
 import { CategoryContainer } from './EditorShell.styled';
 
diff --git a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx b/src/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx
index 4d3b8fd..451fa37 100644
--- a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx
+++ b/src/design-system/organisms/help-why-no-roles/WhyNoRoles.stories.tsx
@@ -1,6 +1,6 @@
-import { WhyNoRoles } from './WhyNoRoles';
 import * as React from 'react';
 import { HelpStoryWrapper } from '../../molecules/help-page-base/storyDecorator';
+import { WhyNoRoles } from './WhyNoRoles';
 
 export default {
     title: 'Organisms/Help Pages',
diff --git a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts b/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
index 666ea1a..f49996e 100644
--- a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
+++ b/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
-import { palette, numberToChroma } from 'roleypoly/design-system/atoms/colors';
 import { Role } from 'roleypoly/common/types';
+import { numberToChroma, palette } from 'roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
 
 export const DiscordBase = styled.div`
     background-color: ${palette.discord100};
diff --git a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx b/src/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx
index d80f805..ffc90ec 100644
--- a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx
+++ b/src/design-system/organisms/help-why-no-roles/WhyNoRoles.tsx
@@ -1,11 +1,11 @@
 import chroma from 'chroma-js';
 import * as React from 'react';
 import { FaCheck, FaTimes } from 'react-icons/fa';
+import { Role } from 'roleypoly/common/types';
+import { demoData } from 'roleypoly/common/types/demoData';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { HalfsiesContainer, HalfsiesItem } from 'roleypoly/design-system/atoms/halfsies';
 import { SparkleOverlay } from 'roleypoly/design-system/atoms/sparkle';
-import { Role } from 'roleypoly/common/types';
-import { demoData } from 'roleypoly/common/types/demoData';
 import { DiscordBase, DiscordRole } from './WhyNoRoles.styled';
 
 const adminRoles: Role[] = [
diff --git a/src/design-system/organisms/landing/Landing.styled.ts b/src/design-system/organisms/landing/Landing.styled.ts
index 755204a..79a5659 100644
--- a/src/design-system/organisms/landing/Landing.styled.ts
+++ b/src/design-system/organisms/landing/Landing.styled.ts
@@ -1,7 +1,6 @@
 import { onTablet } from 'roleypoly/design-system/atoms/breakpoints';
 import { text400 } from 'roleypoly/design-system/atoms/typography';
 import styled, { css } from 'styled-components';
-import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const HeroText = styled.div`
     ${onTablet(css`
diff --git a/src/design-system/organisms/landing/Landing.tsx b/src/design-system/organisms/landing/Landing.tsx
index 6a2a278..87b4409 100644
--- a/src/design-system/organisms/landing/Landing.tsx
+++ b/src/design-system/organisms/landing/Landing.tsx
@@ -1,11 +1,11 @@
+import * as React from 'react';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import { HalfsiesContainer, HalfsiesItem } from 'roleypoly/design-system/atoms/halfsies';
 import { Space } from 'roleypoly/design-system/atoms/space';
 import { LargeText, LargeTitle } from 'roleypoly/design-system/atoms/typography';
 import { DemoDiscord } from 'roleypoly/design-system/molecules/demo-discord';
 import { DemoPicker } from 'roleypoly/design-system/molecules/demo-picker';
-import * as React from 'react';
 import { DemoAlignment, DemoSubtitle, HeroCentering, HeroText } from './Landing.styled';
-import { HalfsiesContainer, HalfsiesItem } from 'roleypoly/design-system/atoms/halfsies';
 
 export const Landing = () => (
     <HeroCentering>
diff --git a/src/design-system/organisms/masthead/Masthead.styled.tsx b/src/design-system/organisms/masthead/Masthead.styled.tsx
index 935e888..a466d96 100644
--- a/src/design-system/organisms/masthead/Masthead.styled.tsx
+++ b/src/design-system/organisms/masthead/Masthead.styled.tsx
@@ -2,7 +2,6 @@ import { onSmallScreen } from 'roleypoly/design-system/atoms/breakpoints';
 import { palette } from 'roleypoly/design-system/atoms/colors';
 import { transitions } from 'roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
-import * as _ from 'styled-components'; // eslint-disable-line no-duplicate-imports
 
 export const MastheadBase = styled.div`
     position: fixed;
diff --git a/src/design-system/organisms/masthead/index.ts b/src/design-system/organisms/masthead/index.ts
index fd88034..d3f96a7 100644
--- a/src/design-system/organisms/masthead/index.ts
+++ b/src/design-system/organisms/masthead/index.ts
@@ -1,2 +1,2 @@
-export * from './Guest';
 export * from './Authed';
+export * from './Guest';
diff --git a/src/design-system/organisms/role-picker/RolePicker.styled.tsx b/src/design-system/organisms/role-picker/RolePicker.styled.tsx
index 78a7189..b4dfc7f 100644
--- a/src/design-system/organisms/role-picker/RolePicker.styled.tsx
+++ b/src/design-system/organisms/role-picker/RolePicker.styled.tsx
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { palette } from 'roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
 
 export const Container = styled.div``;
 
diff --git a/src/design-system/organisms/role-picker/RolePicker.tsx b/src/design-system/organisms/role-picker/RolePicker.tsx
index a555393..08e4469 100644
--- a/src/design-system/organisms/role-picker/RolePicker.tsx
+++ b/src/design-system/organisms/role-picker/RolePicker.tsx
@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { GoInfo } from 'react-icons/go';
-import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
-import { Space } from 'roleypoly/design-system/atoms/space';
-import { PickerCategory } from 'roleypoly/design-system/molecules/picker-category';
-import { ResetSubmit } from 'roleypoly/design-system/molecules/reset-submit';
-import { ServerMasthead } from 'roleypoly/design-system/molecules/server-masthead';
 import {
     Category,
+    CategoryType,
     Guild,
     GuildData,
     GuildRoles,
     Member,
     Role,
-    CategoryType,
 } from 'roleypoly/common/types';
 import { ReactifyNewlines } from 'roleypoly/common/utils/ReactifyNewlines';
+import { FaderOpacity } from 'roleypoly/design-system/atoms/fader';
+import { Space } from 'roleypoly/design-system/atoms/space';
+import { PickerCategory } from 'roleypoly/design-system/molecules/picker-category';
+import { ResetSubmit } from 'roleypoly/design-system/molecules/reset-submit';
+import { ServerMasthead } from 'roleypoly/design-system/molecules/server-masthead';
 import {
     CategoryContainer,
     Container,
diff --git a/src/design-system/templates/auth-login/AuthLogin.stories.tsx b/src/design-system/templates/auth-login/AuthLogin.stories.tsx
index 2f9c230..33eb7d5 100644
--- a/src/design-system/templates/auth-login/AuthLogin.stories.tsx
+++ b/src/design-system/templates/auth-login/AuthLogin.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AuthLogin } from './AuthLogin';
 import { guild } from 'roleypoly/common/types/storyData';
+import { AuthLogin } from './AuthLogin';
 
 export default {
     title: 'Templates/Auth: Login',
diff --git a/src/design-system/templates/auth-login/AuthLogin.tsx b/src/design-system/templates/auth-login/AuthLogin.tsx
index f29a964..f06fffb 100644
--- a/src/design-system/templates/auth-login/AuthLogin.tsx
+++ b/src/design-system/templates/auth-login/AuthLogin.tsx
@@ -1,7 +1,7 @@
+import * as React from 'react';
 import { Hero } from 'roleypoly/design-system/atoms/hero';
 import { AppShell } from 'roleypoly/design-system/organisms/app-shell';
 import { Preauth, PreauthProps } from 'roleypoly/design-system/organisms/preauth';
-import * as React from 'react';
 
 export type AuthLoginProps = PreauthProps;
 
diff --git a/src/design-system/templates/errors/Errors.stories.tsx b/src/design-system/templates/errors/Errors.stories.tsx
index 219c502..ee3eea7 100644
--- a/src/design-system/templates/errors/Errors.stories.tsx
+++ b/src/design-system/templates/errors/Errors.stories.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { storiesOf } from '@storybook/react';
+import * as React from 'react';
 import { Error } from './Errors';
 import { errorMessages } from './errorStrings';
 
diff --git a/src/design-system/templates/help-page/HelpPage.stories.tsx b/src/design-system/templates/help-page/HelpPage.stories.tsx
index 7c1a03b..cd114de 100644
--- a/src/design-system/templates/help-page/HelpPage.stories.tsx
+++ b/src/design-system/templates/help-page/HelpPage.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HelpPageTemplate } from './HelpPage';
 import { WhyNoRoles } from '../../organisms/help-why-no-roles';
+import { HelpPageTemplate } from './HelpPage';
 
 export default {
     title: 'Templates/Help Page',
diff --git a/src/design-system/templates/help-page/HelpPage.tsx b/src/design-system/templates/help-page/HelpPage.tsx
index c64f3d8..1c4123a 100644
--- a/src/design-system/templates/help-page/HelpPage.tsx
+++ b/src/design-system/templates/help-page/HelpPage.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AppShell, AppShellProps } from 'roleypoly/design-system/organisms/app-shell';
 import { HelpPageBase } from 'roleypoly/design-system/molecules/help-page-base';
+import { AppShell, AppShellProps } from 'roleypoly/design-system/organisms/app-shell';
 
 export type HelpPageProps = AppShellProps & {
     children: React.ReactNode;
diff --git a/src/design-system/templates/role-picker/RolePicker.stories.tsx b/src/design-system/templates/role-picker/RolePicker.stories.tsx
index a9f76e5..f7f8dd7 100644
--- a/src/design-system/templates/role-picker/RolePicker.stories.tsx
+++ b/src/design-system/templates/role-picker/RolePicker.stories.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { RolePickerTemplate, RolePickerTemplateProps } from './RolePicker';
 import {
-    guildData,
-    member,
-    guildRoles,
     guild,
-    user,
+    guildData,
     guildEnum,
+    guildRoles,
     mastheadSlugs,
+    member,
+    user,
 } from 'roleypoly/common/types/storyData';
+import { RolePickerTemplate, RolePickerTemplateProps } from './RolePicker';
 
 const props: RolePickerTemplateProps = {
     guildData: {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index fcc3791..56777a0 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,7 +1,7 @@
 import NextApp, { AppContext, AppProps } from 'next/app';
+import nookies from 'nookies';
 import * as React from 'react';
 import { InjectTypekitFont } from 'roleypoly/design-system/atoms/fonts';
-import nookies from 'nookies';
 import { AuthProvider } from 'roleypoly/providers/auth/AuthContext';
 
 type Props = AppProps & {
diff --git a/src/pages/help/why-no-roles.tsx b/src/pages/help/why-no-roles.tsx
index f141f45..6200b78 100644
--- a/src/pages/help/why-no-roles.tsx
+++ b/src/pages/help/why-no-roles.tsx
@@ -1,7 +1,7 @@
 import { WhyNoRoles } from 'roleypoly/design-system/organisms/help-why-no-roles';
 import {
-    HelpPageTemplate,
     HelpPageProps,
+    HelpPageTemplate,
 } from 'roleypoly/design-system/templates/help-page';
 
 const WhyNoRolesPage = (props: HelpPageProps) => (
diff --git a/src/pages/machinery/new-session.tsx b/src/pages/machinery/new-session.tsx
index 1576189..571ac61 100644
--- a/src/pages/machinery/new-session.tsx
+++ b/src/pages/machinery/new-session.tsx
@@ -1,9 +1,9 @@
 import { NextPageContext } from 'next';
-import * as React from 'react';
 import nookies from 'nookies';
-import { AppShell } from 'roleypoly/design-system/organisms/app-shell';
+import * as React from 'react';
 import { Hero } from 'roleypoly/design-system/atoms/hero';
 import { AccentTitle } from 'roleypoly/design-system/atoms/typography';
+import { AppShell } from 'roleypoly/design-system/organisms/app-shell';
 
 type Props = {
     sessionID: string;
diff --git a/yarn.lock b/yarn.lock
index 830e9a0..5e298f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10827,6 +10827,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-organize-imports@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-1.1.1.tgz#7f1ac1a13d4d1752dc16881894dde1c10ccbf3c0"
+  integrity sha512-rFA1lnek1FYkMGthm4xBKME41qUKItTovuo24bCGZu/Vu1n3gW71UPLAkIdwewwkZCe29gRVweSOPXvAdckFuw==
+
 prettier-plugin-packagejson@^2.2.8:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/prettier-plugin-packagejson/-/prettier-plugin-packagejson-2.2.8.tgz#aa20997c8569415bc1f0e56f0c73265a927cd3da"