diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
index 5096007d2c..7eec57aa51 100644
--- a/site/.storybook/preview.js
+++ b/site/.storybook/preview.js
@@ -1,9 +1,9 @@
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { withThemes } from "@react-theming/storybook-addon"
-import { light, dark } from "../src/theme"
-import { addDecorator } from "node_modules/@storybook/react"
 import { createMemoryHistory } from "history"
+import { addDecorator } from "node_modules/@storybook/react"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
+import { dark, light } from "../src/theme"
 import "../src/theme/global-fonts"
 
 addDecorator(withThemes(ThemeProvider, [light, dark]))
diff --git a/site/e2e/playwright.config.ts b/site/e2e/playwright.config.ts
index c9080c1108..5b719475a8 100644
--- a/site/e2e/playwright.config.ts
+++ b/site/e2e/playwright.config.ts
@@ -1,5 +1,5 @@
-import * as path from "path"
 import { PlaywrightTestConfig } from "@playwright/test"
+import * as path from "path"
 
 const config: PlaywrightTestConfig = {
   testDir: "tests",
diff --git a/site/e2e/tests/login.spec.ts b/site/e2e/tests/login.spec.ts
index b751aecd9d..49337d8896 100644
--- a/site/e2e/tests/login.spec.ts
+++ b/site/e2e/tests/login.spec.ts
@@ -1,6 +1,6 @@
 import { test } from "@playwright/test"
-import { ProjectsPage, SignInPage } from "../pom"
 import { email, password } from "../constants"
+import { ProjectsPage, SignInPage } from "../pom"
 import { waitForClientSideNavigation } from "./../util"
 
 test("Login takes user to /projects", async ({ baseURL, page }) => {
diff --git a/site/package.json b/site/package.json
index e8960bbdee..e6e1ea030a 100644
--- a/site/package.json
+++ b/site/package.json
@@ -80,6 +80,7 @@
     "mini-css-extract-plugin": "2.6.0",
     "msw": "0.39.2",
     "prettier": "2.6.2",
+    "prettier-plugin-organize-imports": "2.3.4",
     "react-hot-loader": "4.13.0",
     "sql-formatter": "4.0.2",
     "style-loader": "3.3.1",
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index f67d887e28..e573ac5ecb 100644
--- a/site/src/AppRouter.tsx
+++ b/site/src/AppRouter.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import { Routes, Route } from "react-router-dom"
-import { RequireAuth, AuthAndNav } from "./components"
+import { Route, Routes } from "react-router-dom"
+import { AuthAndNav, RequireAuth } from "./components"
 import { IndexPage } from "./pages"
 import { NotFoundPage } from "./pages/404"
 import { CliAuthenticationPage } from "./pages/cli-auth"
diff --git a/site/src/Main.tsx b/site/src/Main.tsx
index 3cbbd65359..bdcfa54c7a 100644
--- a/site/src/Main.tsx
+++ b/site/src/Main.tsx
@@ -1,6 +1,6 @@
+import { inspect } from "@xstate/inspect"
 import React from "react"
 import ReactDOM from "react-dom"
-import { inspect } from "@xstate/inspect"
 import { Interpreter } from "xstate"
 import { App } from "./app"
 
diff --git a/site/src/api/index.test.ts b/site/src/api/index.test.ts
index ec70749931..c29be8728d 100644
--- a/site/src/api/index.test.ts
+++ b/site/src/api/index.test.ts
@@ -1,6 +1,6 @@
 import axios from "axios"
 import { getApiKey, login, logout } from "."
-import { LoginResponse, APIKeyResponse } from "./types"
+import { APIKeyResponse, LoginResponse } from "./types"
 
 // Mock the axios module so that no real network requests are made, but rather
 // we swap in a resolved or rejected value
diff --git a/site/src/app.tsx b/site/src/app.tsx
index fcbc455d5d..607602f043 100644
--- a/site/src/app.tsx
+++ b/site/src/app.tsx
@@ -1,13 +1,12 @@
-import React from "react"
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
-import { SWRConfig } from "swr"
-import { light } from "./theme"
+import React from "react"
 import { BrowserRouter as Router } from "react-router-dom"
-
-import { XServiceProvider } from "./xServices/StateContext"
+import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
+import { light } from "./theme"
 import "./theme/global-fonts"
+import { XServiceProvider } from "./xServices/StateContext"
 
 export const App: React.FC = () => {
   return (
diff --git a/site/src/components/Button/CopyButton.tsx b/site/src/components/Button/CopyButton.tsx
index b10a6088da..4608111bb7 100644
--- a/site/src/components/Button/CopyButton.tsx
+++ b/site/src/components/Button/CopyButton.tsx
@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles"
 import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import Check from "@material-ui/icons/Check"
 import React, { useState } from "react"
diff --git a/site/src/components/Button/index.ts b/site/src/components/Button/index.ts
index a0845e5d31..ddaa69c447 100644
--- a/site/src/components/Button/index.ts
+++ b/site/src/components/Button/index.ts
@@ -1,3 +1,3 @@
-export * from "./SplitButton"
-export * from "./LoadingButton"
 export * from "./CopyButton"
+export * from "./LoadingButton"
+export * from "./SplitButton"
diff --git a/site/src/components/CodeBlock/index.test.tsx b/site/src/components/CodeBlock/index.test.tsx
index 05316e5443..baa1f07335 100644
--- a/site/src/components/CodeBlock/index.test.tsx
+++ b/site/src/components/CodeBlock/index.test.tsx
@@ -1,6 +1,6 @@
 import { screen } from "@testing-library/react"
-import { render } from "../../test_helpers"
 import React from "react"
+import { render } from "../../test_helpers"
 import { CodeBlock } from "./index"
 
 describe("CodeBlock", () => {
diff --git a/site/src/components/CodeExample/CodeExample.test.tsx b/site/src/components/CodeExample/CodeExample.test.tsx
index 7618f29d38..fa4d5f67dd 100644
--- a/site/src/components/CodeExample/CodeExample.test.tsx
+++ b/site/src/components/CodeExample/CodeExample.test.tsx
@@ -1,6 +1,6 @@
 import { screen } from "@testing-library/react"
-import { render } from "../../test_helpers"
 import React from "react"
+import { render } from "../../test_helpers"
 import { CodeExample } from "./CodeExample"
 
 describe("CodeExample", () => {
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index c3145af8f3..6b5b3b346d 100644
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,7 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-
 import { CopyButton } from "../Button"
 
 export interface CodeExampleProps {
diff --git a/site/src/components/EmptyState/index.test.tsx b/site/src/components/EmptyState/index.test.tsx
index f7c16ee3d4..4596ec17a7 100644
--- a/site/src/components/EmptyState/index.test.tsx
+++ b/site/src/components/EmptyState/index.test.tsx
@@ -1,6 +1,6 @@
 import { screen } from "@testing-library/react"
-import { render } from "../../test_helpers"
 import React from "react"
+import { render } from "../../test_helpers"
 import { EmptyState } from "./index"
 
 describe("EmptyState", () => {
diff --git a/site/src/components/EmptyState/index.tsx b/site/src/components/EmptyState/index.tsx
index 5fab2e04da..e3539dee3a 100644
--- a/site/src/components/EmptyState/index.tsx
+++ b/site/src/components/EmptyState/index.tsx
@@ -1,8 +1,8 @@
-import React from "react"
-import { makeStyles } from "@material-ui/core/styles"
 import Box from "@material-ui/core/Box"
 import Button, { ButtonProps } from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
+import React from "react"
 
 export interface EmptyStateProps {
   /** Text Message to display, placed inside Typography component */
diff --git a/site/src/components/Form/FormDropdownField.tsx b/site/src/components/Form/FormDropdownField.tsx
index c4d8993da7..9b6cdab444 100644
--- a/site/src/components/Form/FormDropdownField.tsx
+++ b/site/src/components/Form/FormDropdownField.tsx
@@ -3,7 +3,6 @@ import MenuItem from "@material-ui/core/MenuItem"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-
 import { FormTextField, FormTextFieldProps } from "./FormTextField"
 
 export interface DropdownItem {
diff --git a/site/src/components/Form/FormTextField.tsx b/site/src/components/Form/FormTextField.tsx
index 34b0c083fe..d59fe203da 100644
--- a/site/src/components/Form/FormTextField.tsx
+++ b/site/src/components/Form/FormTextField.tsx
@@ -1,7 +1,7 @@
 import TextField, { TextFieldProps } from "@material-ui/core/TextField"
+import { FormikContextType } from "formik"
 import React from "react"
 import { PasswordField } from "./PasswordField"
-import { FormikContextType } from "formik"
 
 /**
  * FormFieldProps are required props for creating form fields using a factory.
diff --git a/site/src/components/Form/index.ts b/site/src/components/Form/index.ts
index 3987a1cfb1..df13aff05b 100644
--- a/site/src/components/Form/index.ts
+++ b/site/src/components/Form/index.ts
@@ -2,8 +2,8 @@ import { FormikContextType, getIn } from "formik"
 import { ChangeEvent, ChangeEventHandler, FocusEventHandler } from "react"
 
 export * from "./FormCloseButton"
-export * from "./FormSection"
 export * from "./FormDropdownField"
+export * from "./FormSection"
 export * from "./FormTextField"
 export * from "./FormTitle"
 
diff --git a/site/src/components/Header/index.test.tsx b/site/src/components/Header/index.test.tsx
index 1c98f6466b..7ae0b335ef 100644
--- a/site/src/components/Header/index.test.tsx
+++ b/site/src/components/Header/index.test.tsx
@@ -1,6 +1,6 @@
 import { screen } from "@testing-library/react"
-import { render } from "./../../test_helpers"
 import React from "react"
+import { render } from "./../../test_helpers"
 import { Header } from "./index"
 
 describe("Header", () => {
diff --git a/site/src/components/Header/index.tsx b/site/src/components/Header/index.tsx
index 4be56e65bf..15c01789ba 100644
--- a/site/src/components/Header/index.tsx
+++ b/site/src/components/Header/index.tsx
@@ -1,6 +1,6 @@
 import Box from "@material-ui/core/Box"
-import Typography from "@material-ui/core/Typography"
 import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
 import React from "react"
 import { HeaderButton } from "./HeaderButton"
 
diff --git a/site/src/components/Icons/index.test.tsx b/site/src/components/Icons/index.test.tsx
index 5d4a8971a0..31a0e98f82 100644
--- a/site/src/components/Icons/index.test.tsx
+++ b/site/src/components/Icons/index.test.tsx
@@ -1,7 +1,6 @@
-import React from "react"
 import SvgIcon from "@material-ui/core/SvgIcon"
+import React from "react"
 import { render } from "./../../test_helpers"
-
 import * as Icons from "./index"
 
 const getAllIcons = (): [string, typeof SvgIcon][] => {
diff --git a/site/src/components/Navbar/NavbarView.test.tsx b/site/src/components/Navbar/NavbarView.test.tsx
index cc1089cb1d..8fd54020cc 100644
--- a/site/src/components/Navbar/NavbarView.test.tsx
+++ b/site/src/components/Navbar/NavbarView.test.tsx
@@ -1,6 +1,5 @@
-import React from "react"
 import { screen } from "@testing-library/react"
-
+import React from "react"
 import { render } from "../../test_helpers"
 import { MockUser } from "../../test_helpers/entities"
 import { NavbarView } from "./NavbarView"
diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
index b6e05c2b10..8e1d1d26a6 100644
--- a/site/src/components/Navbar/NavbarView.tsx
+++ b/site/src/components/Navbar/NavbarView.tsx
@@ -1,10 +1,10 @@
-import React from "react"
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 import { Link } from "react-router-dom"
+import { UserResponse } from "../../api/types"
 import { Logo } from "../Icons"
 import { UserDropdown } from "./UserDropdown"
-import { UserResponse } from "../../api/types"
 
 export interface NavbarViewProps {
   user?: UserResponse
diff --git a/site/src/components/Navbar/UserDropdown.tsx b/site/src/components/Navbar/UserDropdown.tsx
index 4a5f741ab0..b5f259efb7 100644
--- a/site/src/components/Navbar/UserDropdown.tsx
+++ b/site/src/components/Navbar/UserDropdown.tsx
@@ -7,12 +7,11 @@ import { fade, makeStyles } from "@material-ui/core/styles"
 import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
 import React, { useState } from "react"
-import { LogoutIcon } from "../Icons"
-import { BorderedMenu } from "./BorderedMenu"
-import { UserProfileCard } from "../User/UserProfileCard"
-
-import { UserAvatar } from "../User"
 import { UserResponse } from "../../api/types"
+import { LogoutIcon } from "../Icons"
+import { UserAvatar } from "../User"
+import { UserProfileCard } from "../User/UserProfileCard"
+import { BorderedMenu } from "./BorderedMenu"
 
 export interface UserDropdownProps {
   user: UserResponse
diff --git a/site/src/components/Navbar/index.tsx b/site/src/components/Navbar/index.tsx
index b1f751b4fa..dd4004e588 100644
--- a/site/src/components/Navbar/index.tsx
+++ b/site/src/components/Navbar/index.tsx
@@ -1,7 +1,7 @@
-import React, { useContext } from "react"
 import { useActor } from "@xstate/react"
-import { NavbarView } from "./NavbarView"
+import React, { useContext } from "react"
 import { XServiceContext } from "../../xServices/StateContext"
+import { NavbarView } from "./NavbarView"
 
 export const Navbar: React.FC = () => {
   const xServices = useContext(XServiceContext)
diff --git a/site/src/components/Page/Footer.test.tsx b/site/src/components/Page/Footer.test.tsx
index 32d710d1ad..e61694b936 100644
--- a/site/src/components/Page/Footer.test.tsx
+++ b/site/src/components/Page/Footer.test.tsx
@@ -1,6 +1,5 @@
-import React from "react"
 import { screen } from "@testing-library/react"
-
+import React from "react"
 import { render } from "../../test_helpers"
 import { Footer } from "./Footer"
 
diff --git a/site/src/components/Page/index.tsx b/site/src/components/Page/index.tsx
index 8232f4db24..3d0429de63 100644
--- a/site/src/components/Page/index.tsx
+++ b/site/src/components/Page/index.tsx
@@ -1,3 +1,3 @@
+export * from "./AuthAndNav"
 export * from "./Footer"
 export * from "./RequireAuth"
-export * from "./AuthAndNav"
diff --git a/site/src/components/SignIn/CliAuthToken.test.tsx b/site/src/components/SignIn/CliAuthToken.test.tsx
index d17fdbcce8..b7d7a99c10 100644
--- a/site/src/components/SignIn/CliAuthToken.test.tsx
+++ b/site/src/components/SignIn/CliAuthToken.test.tsx
@@ -1,7 +1,6 @@
-import React from "react"
 import { screen } from "@testing-library/react"
+import React from "react"
 import { render } from "../../test_helpers"
-
 import { CliAuthToken } from "./CliAuthToken"
 
 describe("CliAuthToken", () => {
diff --git a/site/src/components/SignIn/CliAuthToken.tsx b/site/src/components/SignIn/CliAuthToken.tsx
index a6d0886e60..1eee647c79 100644
--- a/site/src/components/SignIn/CliAuthToken.tsx
+++ b/site/src/components/SignIn/CliAuthToken.tsx
@@ -1,6 +1,6 @@
 import Paper from "@material-ui/core/Paper"
-import Typography from "@material-ui/core/Typography"
 import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
 import React from "react"
 import { CodeExample } from "../CodeExample"
 
diff --git a/site/src/components/SignIn/SignInForm.tsx b/site/src/components/SignIn/SignInForm.tsx
index 2e36f2d6b2..917211082a 100644
--- a/site/src/components/SignIn/SignInForm.tsx
+++ b/site/src/components/SignIn/SignInForm.tsx
@@ -1,13 +1,12 @@
+import FormHelperText from "@material-ui/core/FormHelperText"
 import { makeStyles } from "@material-ui/core/styles"
+import TextField from "@material-ui/core/TextField"
 import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-
-import { Welcome } from "./Welcome"
-import FormHelperText from "@material-ui/core/FormHelperText"
-import { LoadingButton } from "./../Button"
-import TextField from "@material-ui/core/TextField"
 import { getFormHelpers, onChangeTrimmed } from "../Form"
+import { LoadingButton } from "./../Button"
+import { Welcome } from "./Welcome"
 
 /**
  * BuiltInAuthFormValues describes a form using built-in (email/password)
diff --git a/site/src/components/SignIn/Welcome.tsx b/site/src/components/SignIn/Welcome.tsx
index b208c80e16..5b4710670c 100644
--- a/site/src/components/SignIn/Welcome.tsx
+++ b/site/src/components/SignIn/Welcome.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
-import { CoderIcon } from "../Icons"
-import React from "react"
 import Typography from "@material-ui/core/Typography"
+import React from "react"
+import { CoderIcon } from "../Icons"
 
 export const Welcome: React.FC = () => {
   const styles = useStyles()
diff --git a/site/src/components/Table/Cells/UserCell.test.tsx b/site/src/components/Table/Cells/UserCell.test.tsx
index 33b493bbc4..50eca32af8 100644
--- a/site/src/components/Table/Cells/UserCell.test.tsx
+++ b/site/src/components/Table/Cells/UserCell.test.tsx
@@ -1,7 +1,7 @@
+import { fireEvent, render, screen } from "@testing-library/react"
+import React from "react"
 import { MockUser, MockUserAgent, WrapperComponent } from "../../../test_helpers"
 import { UserCell, UserCellProps } from "./UserCell"
-import React from "react"
-import { fireEvent, render, screen } from "@testing-library/react"
 
 namespace Helpers {
   export const Props: UserCellProps = {
diff --git a/site/src/components/Table/Table.test.tsx b/site/src/components/Table/Table.test.tsx
index 6de1f84a0e..085dc653c9 100644
--- a/site/src/components/Table/Table.test.tsx
+++ b/site/src/components/Table/Table.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
-import { render } from "./../../test_helpers"
 import React from "react"
-import { Table, Column } from "./Table"
+import { render } from "./../../test_helpers"
+import { Column, Table } from "./Table"
 
 interface TestData {
   name: string
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
index 786f019705..a0ac0961b2 100644
--- a/site/src/components/Table/Table.tsx
+++ b/site/src/components/Table/Table.tsx
@@ -1,13 +1,12 @@
-import React from "react"
 import Box from "@material-ui/core/Box"
 import MuiTable from "@material-ui/core/Table"
+import TableBody from "@material-ui/core/TableBody"
+import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
-import TableCell from "@material-ui/core/TableCell"
-
-import { TableTitle } from "./TableTitle"
+import React from "react"
 import { TableHeaders } from "./TableHeaders"
-import TableBody from "@material-ui/core/TableBody"
+import { TableTitle } from "./TableTitle"
 
 export interface Column<T> {
   /**
diff --git a/site/src/components/Table/TableHeaders.tsx b/site/src/components/Table/TableHeaders.tsx
index 63f0f2f13f..f91aa578df 100644
--- a/site/src/components/Table/TableHeaders.tsx
+++ b/site/src/components/Table/TableHeaders.tsx
@@ -1,7 +1,7 @@
-import React from "react"
+import { makeStyles } from "@material-ui/core/styles"
 import TableCell from "@material-ui/core/TableCell"
 import TableRow from "@material-ui/core/TableRow"
-import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 
 export interface TableHeadersProps {
   columns: string[]
diff --git a/site/src/components/User/UserProfileCard.tsx b/site/src/components/User/UserProfileCard.tsx
index 9b987cd784..6f80caf431 100644
--- a/site/src/components/User/UserProfileCard.tsx
+++ b/site/src/components/User/UserProfileCard.tsx
@@ -2,7 +2,6 @@ import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
 import { UserResponse } from "../../api/types"
-
 import { UserAvatar } from "./UserAvatar"
 
 interface UserProfileCardProps {
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
index 94d60aa6d6..fc2b1e2cda 100644
--- a/site/src/components/Workspace/Workspace.stories.tsx
+++ b/site/src/components/Workspace/Workspace.stories.tsx
@@ -1,7 +1,7 @@
 import { Story } from "@storybook/react"
 import React from "react"
-import { Workspace, WorkspaceProps } from "./Workspace"
 import { MockOrganization, MockProject, MockWorkspace } from "../../test_helpers"
+import { Workspace, WorkspaceProps } from "./Workspace"
 
 export default {
   title: "Workspaces/Workspace",
diff --git a/site/src/components/Workspace/Workspace.test.tsx b/site/src/components/Workspace/Workspace.test.tsx
index e085171070..3e7fefab06 100644
--- a/site/src/components/Workspace/Workspace.test.tsx
+++ b/site/src/components/Workspace/Workspace.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { Workspace } from "./Workspace"
 import { MockOrganization, MockProject, MockWorkspace, render } from "../../test_helpers"
+import { Workspace } from "./Workspace"
 
 describe("Workspace", () => {
   it("renders", async () => {
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 466b7a6cb0..a1ae4eb9aa 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -1,12 +1,12 @@
 import Box from "@material-ui/core/Box"
 import Paper from "@material-ui/core/Paper"
-import Typography from "@material-ui/core/Typography"
 import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
 import CloudCircleIcon from "@material-ui/icons/CloudCircle"
-import { Link } from "react-router-dom"
 import React from "react"
-import * as Constants from "./constants"
+import { Link } from "react-router-dom"
 import * as Types from "../../api/types"
+import * as Constants from "./constants"
 import { WorkspaceSection } from "./WorkspaceSection"
 
 export interface WorkspaceProps {
diff --git a/site/src/forms/CreateProjectForm.test.tsx b/site/src/forms/CreateProjectForm.test.tsx
index a3eb0c0ce7..8debde5919 100644
--- a/site/src/forms/CreateProjectForm.test.tsx
+++ b/site/src/forms/CreateProjectForm.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react"
 import React from "react"
+import { MockOrganization, MockProject, MockProvisioner } from "./../test_helpers"
 import { CreateProjectForm } from "./CreateProjectForm"
-import { MockProvisioner, MockOrganization, MockProject } from "./../test_helpers"
 
 describe("CreateProjectForm", () => {
   it("renders", async () => {
diff --git a/site/src/forms/CreateProjectForm.tsx b/site/src/forms/CreateProjectForm.tsx
index 77aefacef7..f0c0f48099 100644
--- a/site/src/forms/CreateProjectForm.tsx
+++ b/site/src/forms/CreateProjectForm.tsx
@@ -3,17 +3,16 @@ import { makeStyles } from "@material-ui/core/styles"
 import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-
+import { CreateProjectRequest, Organization, Project, Provisioner } from "../api/types"
+import { LoadingButton } from "../components/Button"
 import {
   DropdownItem,
+  FormCloseButton,
   FormDropdownField,
+  FormSection,
   FormTextField,
   FormTitle,
-  FormSection,
-  FormCloseButton,
 } from "../components/Form"
-import { LoadingButton } from "../components/Button"
-import { Organization, Project, Provisioner, CreateProjectRequest } from "../api/types"
 
 export interface CreateProjectFormProps {
   provisioners: Provisioner[]
diff --git a/site/src/forms/CreateWorkspaceForm.test.tsx b/site/src/forms/CreateWorkspaceForm.test.tsx
index 09df65215c..14501a127a 100644
--- a/site/src/forms/CreateWorkspaceForm.test.tsx
+++ b/site/src/forms/CreateWorkspaceForm.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react"
 import React from "react"
-import { CreateWorkspaceForm } from "./CreateWorkspaceForm"
 import { MockProject, MockWorkspace } from "./../test_helpers"
+import { CreateWorkspaceForm } from "./CreateWorkspaceForm"
 
 describe("CreateWorkspaceForm", () => {
   it("renders", async () => {
diff --git a/site/src/forms/CreateWorkspaceForm.tsx b/site/src/forms/CreateWorkspaceForm.tsx
index 5d95e14498..a5b3411e82 100644
--- a/site/src/forms/CreateWorkspaceForm.tsx
+++ b/site/src/forms/CreateWorkspaceForm.tsx
@@ -3,10 +3,9 @@ import { makeStyles } from "@material-ui/core/styles"
 import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-
-import { FormCloseButton, FormTextField, FormTitle, FormSection } from "../components/Form"
+import { CreateWorkspaceRequest, Project, Workspace } from "../api/types"
 import { LoadingButton } from "../components/Button"
-import { Project, Workspace, CreateWorkspaceRequest } from "../api/types"
+import { FormCloseButton, FormSection, FormTextField, FormTitle } from "../components/Form"
 
 export interface CreateWorkspaceForm {
   project: Project
diff --git a/site/src/pages/404.tsx b/site/src/pages/404.tsx
index facd13c1b2..edbc38088f 100644
--- a/site/src/pages/404.tsx
+++ b/site/src/pages/404.tsx
@@ -1,7 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
-
 import Typography from "@material-ui/core/Typography"
+import React from "react"
 
 export const NotFoundPage: React.FC = () => {
   const styles = useStyles()
diff --git a/site/src/pages/cli-auth.tsx b/site/src/pages/cli-auth.tsx
index 26620a9d0b..3887bc7249 100644
--- a/site/src/pages/cli-auth.tsx
+++ b/site/src/pages/cli-auth.tsx
@@ -1,10 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles"
+import { useActor } from "@xstate/react"
 import React, { useContext, useEffect, useState } from "react"
 import { getApiKey } from "../api"
-import { CliAuthToken } from "../components/SignIn"
-
 import { FullScreenLoader } from "../components/Loader/FullScreenLoader"
-import { useActor } from "@xstate/react"
+import { CliAuthToken } from "../components/SignIn"
 import { XServiceContext } from "../xServices/StateContext"
 
 export const CliAuthenticationPage: React.FC = () => {
diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx
index 970d010d60..d0a2906772 100644
--- a/site/src/pages/index.tsx
+++ b/site/src/pages/index.tsx
@@ -1,5 +1,4 @@
 import React from "react"
-
 import { Navigate } from "react-router-dom"
 
 export const IndexPage: React.FC = () => {
diff --git a/site/src/pages/login.test.tsx b/site/src/pages/login.test.tsx
index bb1caadb95..c770c4ce0b 100644
--- a/site/src/pages/login.test.tsx
+++ b/site/src/pages/login.test.tsx
@@ -1,11 +1,11 @@
-import React from "react"
 import { act, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { history, render } from "../test_helpers"
-import { SignInPage } from "./login"
-import { server } from "../test_helpers/server"
 import { rest } from "msw"
+import React from "react"
 import { Language } from "../components/SignIn/SignInForm"
+import { history, render } from "../test_helpers"
+import { server } from "../test_helpers/server"
+import { SignInPage } from "./login"
 
 describe("SignInPage", () => {
   beforeEach(() => {
diff --git a/site/src/pages/login.tsx b/site/src/pages/login.tsx
index f072bb51d8..f917471c16 100644
--- a/site/src/pages/login.tsx
+++ b/site/src/pages/login.tsx
@@ -1,10 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
-import { SignInForm } from "./../components/SignIn"
 import { Navigate, useLocation } from "react-router-dom"
-import { XServiceContext } from "../xServices/StateContext"
 import { retrieveRedirect } from "../util/redirect"
+import { XServiceContext } from "../xServices/StateContext"
+import { SignInForm } from "./../components/SignIn"
 
 export const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/site/src/pages/projects/[organization]/[project]/create.tsx b/site/src/pages/projects/[organization]/[project]/create.tsx
index 87e93d36bb..4f5dd0f254 100644
--- a/site/src/pages/projects/[organization]/[project]/create.tsx
+++ b/site/src/pages/projects/[organization]/[project]/create.tsx
@@ -1,10 +1,9 @@
-import React, { useCallback } from "react"
 import { makeStyles } from "@material-ui/core/styles"
+import React, { useCallback } from "react"
 import { useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
-
-import * as Types from "../../../../api/types"
 import * as API from "../../../../api"
+import * as Types from "../../../../api/types"
 import { ErrorSummary } from "../../../../components/ErrorSummary"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
 import { CreateWorkspaceForm } from "../../../../forms/CreateWorkspaceForm"
diff --git a/site/src/pages/projects/[organization]/[project]/index.tsx b/site/src/pages/projects/[organization]/[project]/index.tsx
index b762335bce..2cfb2a9165 100644
--- a/site/src/pages/projects/[organization]/[project]/index.tsx
+++ b/site/src/pages/projects/[organization]/[project]/index.tsx
@@ -1,18 +1,17 @@
-import React from "react"
-import { makeStyles } from "@material-ui/core/styles"
 import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 import { Link, useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
-
 import { Organization, Project, Workspace } from "../../../../api/types"
+import { EmptyState } from "../../../../components/EmptyState"
+import { ErrorSummary } from "../../../../components/ErrorSummary"
 import { Header } from "../../../../components/Header"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
 import { Footer } from "../../../../components/Page"
 import { Column, Table } from "../../../../components/Table"
-import { ErrorSummary } from "../../../../components/ErrorSummary"
-import { firstOrItem } from "../../../../util/array"
-import { EmptyState } from "../../../../components/EmptyState"
 import { unsafeSWRArgument } from "../../../../util"
+import { firstOrItem } from "../../../../util/array"
 
 export const ProjectPage: React.FC = () => {
   const styles = useStyles()
diff --git a/site/src/pages/projects/index.tsx b/site/src/pages/projects/index.tsx
index 84d4ce411c..98af51f076 100644
--- a/site/src/pages/projects/index.tsx
+++ b/site/src/pages/projects/index.tsx
@@ -1,17 +1,16 @@
-import React from "react"
-import { makeStyles } from "@material-ui/core/styles"
 import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 import { Link } from "react-router-dom"
+import useSWR from "swr"
+import { Organization, Project } from "../../api/types"
 import { EmptyState } from "../../components"
+import { CodeExample } from "../../components/CodeExample/CodeExample"
 import { ErrorSummary } from "../../components/ErrorSummary"
 import { Header } from "../../components/Header"
+import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 import { Footer } from "../../components/Page"
 import { Column, Table } from "../../components/Table"
-import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
-
-import { Organization, Project } from "../../api/types"
-import useSWR from "swr"
-import { CodeExample } from "../../components/CodeExample/CodeExample"
 
 export const ProjectsPage: React.FC = () => {
   const styles = useStyles()
diff --git a/site/src/pages/workspaces/[workspace].tsx b/site/src/pages/workspaces/[workspace].tsx
index 8e153eebb7..3b2c585f4c 100644
--- a/site/src/pages/workspaces/[workspace].tsx
+++ b/site/src/pages/workspaces/[workspace].tsx
@@ -1,14 +1,14 @@
-import React from "react"
-import useSWR from "swr"
 import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
 import { useParams } from "react-router-dom"
-import { Footer } from "../../components/Page"
-import { firstOrItem } from "../../util/array"
+import useSWR from "swr"
+import * as Types from "../../api/types"
 import { ErrorSummary } from "../../components/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
+import { Footer } from "../../components/Page"
 import { Workspace } from "../../components/Workspace"
 import { unsafeSWRArgument } from "../../util"
-import * as Types from "../../api/types"
+import { firstOrItem } from "../../util/array"
 
 export const WorkspacePage: React.FC = () => {
   const styles = useStyles()
diff --git a/site/src/test_helpers/entities.ts b/site/src/test_helpers/entities.ts
index f00d9441f4..90743b7b0a 100644
--- a/site/src/test_helpers/entities.ts
+++ b/site/src/test_helpers/entities.ts
@@ -1,4 +1,4 @@
-import { Provisioner, Organization, Project, Workspace, UserResponse, UserAgent } from "../api/types"
+import { Organization, Project, Provisioner, UserAgent, UserResponse, Workspace } from "../api/types"
 
 export const MockSessionToken = { session_token: "my-session-token" }
 
diff --git a/site/src/test_helpers/index.tsx b/site/src/test_helpers/index.tsx
index ce192658cc..4da5fd5758 100644
--- a/site/src/test_helpers/index.tsx
+++ b/site/src/test_helpers/index.tsx
@@ -1,10 +1,9 @@
-import { render as wrappedRender, RenderResult } from "@testing-library/react"
-import React from "react"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
-
-import { dark } from "../theme"
+import { render as wrappedRender, RenderResult } from "@testing-library/react"
 import { createMemoryHistory } from "history"
+import React from "react"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
+import { dark } from "../theme"
 import { XServiceProvider } from "../xServices/StateContext"
 
 export const history = createMemoryHistory()
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index deba38a0dd..db2f13e0bb 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -1 +1 @@
-export { light, dark } from "./theme"
+export { dark, light } from "./theme"
diff --git a/site/src/xServices/StateContext.tsx b/site/src/xServices/StateContext.tsx
index 75b2cf2a4c..26ba574655 100644
--- a/site/src/xServices/StateContext.tsx
+++ b/site/src/xServices/StateContext.tsx
@@ -1,5 +1,5 @@
-import React, { createContext } from "react"
 import { useInterpret } from "@xstate/react"
+import React, { createContext } from "react"
 import { ActorRefFrom } from "xstate"
 import { userMachine } from "./user/userXService"
 
diff --git a/site/src/xServices/user/userXService.ts b/site/src/xServices/user/userXService.ts
index 150f89b8a8..98d32f09c7 100644
--- a/site/src/xServices/user/userXService.ts
+++ b/site/src/xServices/user/userXService.ts
@@ -1,6 +1,6 @@
-import { createMachine, assign } from "xstate"
-import * as Types from "../../api/types"
+import { assign, createMachine } from "xstate"
 import * as API from "../../api"
+import * as Types from "../../api/types"
 
 export interface UserContext {
   getUserError?: Error | unknown
diff --git a/site/webpack.dev.ts b/site/webpack.dev.ts
index 84339f9ef6..0e8baf84ba 100644
--- a/site/webpack.dev.ts
+++ b/site/webpack.dev.ts
@@ -5,7 +5,6 @@
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
 import { Configuration } from "webpack"
 import "webpack-dev-server"
-
 import { commonWebpackConfig } from "./webpack.common"
 
 const commonPlugins = commonWebpackConfig.plugins || []
diff --git a/site/yarn.lock b/site/yarn.lock
index f1c6144a99..325c40c158 100644
--- a/site/yarn.lock
+++ b/site/yarn.lock
@@ -11664,6 +11664,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier-plugin-organize-imports@2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-2.3.4.tgz#65473861ae5ab7960439fff270a2258558fbe9ba"
+  integrity sha512-R8o23sf5iVL/U71h9SFUdhdOEPsi3nm42FD/oDYIZ2PQa4TNWWuWecxln6jlIQzpZTDMUeO1NicJP6lLn2TtRw==
+
 prettier@2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"