diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index 1da2cf2c5b413..3f302956a03e1 100644
--- a/site/src/AppRouter.tsx
+++ b/site/src/AppRouter.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Route, Routes } from "react-router-dom"
 import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
-import { RequireAuth } from "./components/Page/RequireAuth"
-import { PreferencesLayout } from "./components/Preferences/Layout"
+import { PreferencesLayout } from "./components/PreferencesLayout/PreferencesLayout"
+import { RequireAuth } from "./components/RequireAuth/RequireAuth"
 import { IndexPage } from "./pages"
 import { NotFoundPage } from "./pages/404Page/404Page"
 import { CliAuthenticationPage } from "./pages/CliAuthPage/CliAuthPage"
diff --git a/site/src/app.tsx b/site/src/app.tsx
index d5a8539ea15f9..f6d119ebeb634 100644
--- a/site/src/app.tsx
+++ b/site/src/app.tsx
@@ -4,7 +4,7 @@ import React from "react"
 import { BrowserRouter as Router } from "react-router-dom"
 import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
-import { GlobalSnackbar } from "./components/Snackbar/GlobalSnackbar"
+import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
 import { light } from "./theme"
 import "./theme/globalFonts"
 import { XServiceProvider } from "./xServices/StateContext"
diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
index 3eff8369ce927..b12d4730c7346 100644
--- a/site/src/components/AuthAndFrame/AuthAndFrame.tsx
+++ b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
@@ -1,7 +1,7 @@
 import React from "react"
+import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
-import { Footer } from "../Page/Footer"
-import { RequireAuth } from "../Page/RequireAuth"
+import { RequireAuth } from "../RequireAuth/RequireAuth"
 
 interface AuthAndFrameProps {
   children: JSX.Element
diff --git a/site/src/components/SignIn/CliAuthToken.stories.tsx b/site/src/components/CliAuthToken/CliAuthToken.stories.tsx
similarity index 100%
rename from site/src/components/SignIn/CliAuthToken.stories.tsx
rename to site/src/components/CliAuthToken/CliAuthToken.stories.tsx
diff --git a/site/src/components/SignIn/CliAuthToken.test.tsx b/site/src/components/CliAuthToken/CliAuthToken.test.tsx
similarity index 100%
rename from site/src/components/SignIn/CliAuthToken.test.tsx
rename to site/src/components/CliAuthToken/CliAuthToken.test.tsx
diff --git a/site/src/components/SignIn/CliAuthToken.tsx b/site/src/components/CliAuthToken/CliAuthToken.tsx
similarity index 100%
rename from site/src/components/SignIn/CliAuthToken.tsx
rename to site/src/components/CliAuthToken/CliAuthToken.tsx
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index 2cb08c06ecd3f..4e1d9f42cb706 100644
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { CopyButton } from "../Button/CopyButton"
+import { CopyButton } from "../CopyButton/CopyButton"
 
 export interface CodeExampleProps {
   code: string
diff --git a/site/src/components/Button/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
similarity index 100%
rename from site/src/components/Button/CopyButton.tsx
rename to site/src/components/CopyButton/CopyButton.tsx
diff --git a/site/src/components/Snackbar/EnterpriseSnackbar.stories.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx
similarity index 100%
rename from site/src/components/Snackbar/EnterpriseSnackbar.stories.tsx
rename to site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx
diff --git a/site/src/components/Snackbar/EnterpriseSnackbar.tsx b/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
similarity index 100%
rename from site/src/components/Snackbar/EnterpriseSnackbar.tsx
rename to site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
diff --git a/site/src/components/Page/Footer.test.tsx b/site/src/components/Footer/Footer.test.tsx
similarity index 100%
rename from site/src/components/Page/Footer.test.tsx
rename to site/src/components/Footer/Footer.test.tsx
diff --git a/site/src/components/Page/Footer.tsx b/site/src/components/Footer/Footer.tsx
similarity index 100%
rename from site/src/components/Page/Footer.tsx
rename to site/src/components/Footer/Footer.tsx
diff --git a/site/src/components/Form/FormCloseButton.stories.tsx b/site/src/components/FormCloseButton/FormCloseButton.stories.tsx
similarity index 100%
rename from site/src/components/Form/FormCloseButton.stories.tsx
rename to site/src/components/FormCloseButton/FormCloseButton.stories.tsx
diff --git a/site/src/components/Form/FormCloseButton.test.tsx b/site/src/components/FormCloseButton/FormCloseButton.test.tsx
similarity index 100%
rename from site/src/components/Form/FormCloseButton.test.tsx
rename to site/src/components/FormCloseButton/FormCloseButton.test.tsx
diff --git a/site/src/components/Form/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx
similarity index 100%
rename from site/src/components/Form/FormCloseButton.tsx
rename to site/src/components/FormCloseButton/FormCloseButton.tsx
diff --git a/site/src/components/Form/FormDropdownField.tsx b/site/src/components/FormDropdownField/FormDropdownField.tsx
similarity index 85%
rename from site/src/components/Form/FormDropdownField.tsx
rename to site/src/components/FormDropdownField/FormDropdownField.tsx
index 9b6cdab4448bd..58c2584f819af 100644
--- a/site/src/components/Form/FormDropdownField.tsx
+++ b/site/src/components/FormDropdownField/FormDropdownField.tsx
@@ -3,23 +3,23 @@ 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"
+import { FormTextField, FormTextFieldProps } from "../FormTextField/FormTextField"
 
-export interface DropdownItem {
+export interface FormDropdownItem {
   value: string
   name: string
   description?: string
 }
 
 export interface FormDropdownFieldProps<T> extends FormTextFieldProps<T> {
-  items: DropdownItem[]
+  items: FormDropdownItem[]
 }
 
 export const FormDropdownField = <T,>({ items, ...props }: FormDropdownFieldProps<T>): React.ReactElement => {
   const styles = useStyles()
   return (
     <FormTextField select {...props}>
-      {items.map((item: DropdownItem) => (
+      {items.map((item: FormDropdownItem) => (
         <MenuItem key={item.value} value={item.value}>
           <Box alignItems="center" display="flex">
             <Box ml={1}>
diff --git a/site/src/components/Form/FormSection.tsx b/site/src/components/FormSection/FormSection.tsx
similarity index 100%
rename from site/src/components/Form/FormSection.tsx
rename to site/src/components/FormSection/FormSection.tsx
diff --git a/site/src/components/Form/FormTextField.test.tsx b/site/src/components/FormTextField/FormTextField.test.tsx
similarity index 100%
rename from site/src/components/Form/FormTextField.test.tsx
rename to site/src/components/FormTextField/FormTextField.test.tsx
diff --git a/site/src/components/Form/FormTextField.tsx b/site/src/components/FormTextField/FormTextField.tsx
similarity index 98%
rename from site/src/components/Form/FormTextField.tsx
rename to site/src/components/FormTextField/FormTextField.tsx
index 2356398fdca1f..0498913cb8589 100644
--- a/site/src/components/Form/FormTextField.tsx
+++ b/site/src/components/FormTextField/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 { PasswordField } from "../PasswordField/PasswordField"
 
 /**
  * FormFieldProps are required props for creating form fields using a factory.
diff --git a/site/src/components/Form/FormTitle.tsx b/site/src/components/FormTitle/FormTitle.tsx
similarity index 100%
rename from site/src/components/Form/FormTitle.tsx
rename to site/src/components/FormTitle/FormTitle.tsx
diff --git a/site/src/components/Snackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
similarity index 97%
rename from site/src/components/Snackbar/GlobalSnackbar.tsx
rename to site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
index 3da97ddd38990..873572848da76 100644
--- a/site/src/components/Snackbar/GlobalSnackbar.tsx
+++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -2,9 +2,9 @@ import { makeStyles } from "@material-ui/core/styles"
 import React, { useCallback, useState } from "react"
 import { useCustomEvent } from "../../hooks/events"
 import { CustomEventListener } from "../../util/events"
+import { EnterpriseSnackbar } from "../EnterpriseSnackbar/EnterpriseSnackbar"
 import { ErrorIcon } from "../Icons/ErrorIcon"
 import { Typography } from "../Typography/Typography"
-import { EnterpriseSnackbar } from "./EnterpriseSnackbar"
 import {
   AdditionalMessage,
   isNotificationList,
diff --git a/site/src/components/Snackbar/utils.test.ts b/site/src/components/GlobalSnackbar/utils.test.ts
similarity index 100%
rename from site/src/components/Snackbar/utils.test.ts
rename to site/src/components/GlobalSnackbar/utils.test.ts
diff --git a/site/src/components/Snackbar/utils.ts b/site/src/components/GlobalSnackbar/utils.ts
similarity index 100%
rename from site/src/components/Snackbar/utils.ts
rename to site/src/components/GlobalSnackbar/utils.ts
diff --git a/site/src/components/Header/Header.tsx b/site/src/components/Header/Header.tsx
index 15c01789baa98..f0f8e8af9df86 100644
--- a/site/src/components/Header/Header.tsx
+++ b/site/src/components/Header/Header.tsx
@@ -2,7 +2,7 @@ import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { HeaderButton } from "./HeaderButton"
+import { HeaderButton } from "../HeaderButton/HeaderButton"
 
 export interface HeaderAction {
   readonly text: string
diff --git a/site/src/components/Header/HeaderButton.tsx b/site/src/components/HeaderButton/HeaderButton.tsx
similarity index 100%
rename from site/src/components/Header/HeaderButton.tsx
rename to site/src/components/HeaderButton/HeaderButton.tsx
diff --git a/site/src/components/Button/LoadingButton.stories.tsx b/site/src/components/LoadingButton/LoadingButton.stories.tsx
similarity index 100%
rename from site/src/components/Button/LoadingButton.stories.tsx
rename to site/src/components/LoadingButton/LoadingButton.stories.tsx
diff --git a/site/src/components/Button/LoadingButton.test.tsx b/site/src/components/LoadingButton/LoadingButton.test.tsx
similarity index 100%
rename from site/src/components/Button/LoadingButton.test.tsx
rename to site/src/components/LoadingButton/LoadingButton.test.tsx
diff --git a/site/src/components/Button/LoadingButton.tsx b/site/src/components/LoadingButton/LoadingButton.tsx
similarity index 100%
rename from site/src/components/Button/LoadingButton.tsx
rename to site/src/components/LoadingButton/LoadingButton.tsx
diff --git a/site/src/components/Navbar/Navbar.tsx b/site/src/components/Navbar/Navbar.tsx
index 9f9a7b686f14a..0ac64ef7d1269 100644
--- a/site/src/components/Navbar/Navbar.tsx
+++ b/site/src/components/Navbar/Navbar.tsx
@@ -1,7 +1,7 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { XServiceContext } from "../../xServices/StateContext"
-import { NavbarView } from "./NavbarView/NavbarView"
+import { NavbarView } from "../NavbarView/NavbarView"
 
 export const Navbar: React.FC = () => {
   const xServices = useContext(XServiceContext)
diff --git a/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx b/site/src/components/NavbarView/NavbarView.stories.tsx
similarity index 100%
rename from site/src/components/Navbar/NavbarView/NavbarView.stories.tsx
rename to site/src/components/NavbarView/NavbarView.stories.tsx
diff --git a/site/src/components/Navbar/NavbarView/NavbarView.test.tsx b/site/src/components/NavbarView/NavbarView.test.tsx
similarity index 87%
rename from site/src/components/Navbar/NavbarView/NavbarView.test.tsx
rename to site/src/components/NavbarView/NavbarView.test.tsx
index 937031f7e264b..7bcf44bb5f658 100644
--- a/site/src/components/Navbar/NavbarView/NavbarView.test.tsx
+++ b/site/src/components/NavbarView/NavbarView.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { render } from "../../../testHelpers"
-import { MockUser } from "../../../testHelpers/entities"
+import { render } from "../../testHelpers"
+import { MockUser } from "../../testHelpers/entities"
 import { NavbarView } from "./NavbarView"
 
 describe("NavbarView", () => {
diff --git a/site/src/components/Navbar/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
similarity index 92%
rename from site/src/components/Navbar/NavbarView/NavbarView.tsx
rename to site/src/components/NavbarView/NavbarView.tsx
index 0337dcabc24b3..ad2108abf6f47 100644
--- a/site/src/components/Navbar/NavbarView/NavbarView.tsx
+++ b/site/src/components/NavbarView/NavbarView.tsx
@@ -3,10 +3,10 @@ import ListItem from "@material-ui/core/ListItem"
 import { fade, makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { NavLink } from "react-router-dom"
-import { UserResponse } from "../../../api/types"
-import { navHeight } from "../../../theme/constants"
-import { AdminDropdown } from "../../AdminDropdown/AdminDropdown"
-import { Logo } from "../../Icons/Logo"
+import { UserResponse } from "../../api/types"
+import { navHeight } from "../../theme/constants"
+import { AdminDropdown } from "../AdminDropdown/AdminDropdown"
+import { Logo } from "../Icons/Logo"
 import { UserDropdown } from "../UserDropdown/UsersDropdown"
 
 export interface NavbarViewProps {
diff --git a/site/src/components/Form/PasswordField.test.tsx b/site/src/components/PasswordField/PasswordField.test.tsx
similarity index 100%
rename from site/src/components/Form/PasswordField.test.tsx
rename to site/src/components/PasswordField/PasswordField.test.tsx
diff --git a/site/src/components/Form/PasswordField.tsx b/site/src/components/PasswordField/PasswordField.tsx
similarity index 100%
rename from site/src/components/Form/PasswordField.tsx
rename to site/src/components/PasswordField/PasswordField.tsx
diff --git a/site/src/components/Preferences/AccountForm.tsx b/site/src/components/PreferencesAccountForm/PreferencesAccountForm.tsx
similarity index 95%
rename from site/src/components/Preferences/AccountForm.tsx
rename to site/src/components/PreferencesAccountForm/PreferencesAccountForm.tsx
index 69044453947f1..c64556e2de64d 100644
--- a/site/src/components/Preferences/AccountForm.tsx
+++ b/site/src/components/PreferencesAccountForm/PreferencesAccountForm.tsx
@@ -3,9 +3,9 @@ import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpers, onChangeTrimmed } from "../Form/utils"
+import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
-import { LoadingButton } from "./../Button/LoadingButton"
 
 interface AccountFormValues {
   name: string
diff --git a/site/src/components/Preferences/Layout.tsx b/site/src/components/PreferencesLayout/PreferencesLayout.tsx
similarity index 100%
rename from site/src/components/Preferences/Layout.tsx
rename to site/src/components/PreferencesLayout/PreferencesLayout.tsx
diff --git a/site/src/components/Page/RequireAuth.tsx b/site/src/components/RequireAuth/RequireAuth.tsx
similarity index 100%
rename from site/src/components/Page/RequireAuth.tsx
rename to site/src/components/RequireAuth/RequireAuth.tsx
diff --git a/site/src/components/Section/SectionView.stories.tsx b/site/src/components/Section/Section.stories.tsx
similarity index 100%
rename from site/src/components/Section/SectionView.stories.tsx
rename to site/src/components/Section/Section.stories.tsx
diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx
index e51ad892df5c0..97dc042be944d 100644
--- a/site/src/components/Section/Section.tsx
+++ b/site/src/components/Section/Section.tsx
@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { fade } from "@material-ui/core/styles/colorManipulator"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { SectionAction } from "./Action"
+import { SectionAction } from "../SectionAction/SectionAction"
 
 type SectionLayout = "fixed" | "fluid"
 
diff --git a/site/src/components/Section/Action.tsx b/site/src/components/SectionAction/SectionAction.tsx
similarity index 100%
rename from site/src/components/Section/Action.tsx
rename to site/src/components/SectionAction/SectionAction.tsx
diff --git a/site/src/components/SignIn/SignInForm.stories.tsx b/site/src/components/SignInForm/SignInForm.stories.tsx
similarity index 100%
rename from site/src/components/SignIn/SignInForm.stories.tsx
rename to site/src/components/SignInForm/SignInForm.stories.tsx
diff --git a/site/src/components/SignIn/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
similarity index 94%
rename from site/src/components/SignIn/SignInForm.tsx
rename to site/src/components/SignInForm/SignInForm.tsx
index 09a7a4d238df7..75e9ba43defdd 100644
--- a/site/src/components/SignIn/SignInForm.tsx
+++ b/site/src/components/SignInForm/SignInForm.tsx
@@ -4,9 +4,9 @@ import TextField from "@material-ui/core/TextField"
 import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpers, onChangeTrimmed } from "../Form/utils"
-import { LoadingButton } from "./../Button/LoadingButton"
-import { Welcome } from "./Welcome"
+import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { Welcome } from "../Welcome/Welcome"
+import { LoadingButton } from "./../LoadingButton/LoadingButton"
 
 /**
  * BuiltInAuthFormValues describes a form using built-in (email/password)
diff --git a/site/src/components/Button/SplitButton.test.tsx b/site/src/components/SplitButton/SplitButton.test.tsx
similarity index 100%
rename from site/src/components/Button/SplitButton.test.tsx
rename to site/src/components/SplitButton/SplitButton.test.tsx
diff --git a/site/src/components/Button/SplitButton.tsx b/site/src/components/SplitButton/SplitButton.tsx
similarity index 100%
rename from site/src/components/Button/SplitButton.tsx
rename to site/src/components/SplitButton/SplitButton.tsx
diff --git a/site/src/components/TabPanel/TabPanel.tsx b/site/src/components/TabPanel/TabPanel.tsx
index 152e26957559e..4771e18279e80 100644
--- a/site/src/components/TabPanel/TabPanel.tsx
+++ b/site/src/components/TabPanel/TabPanel.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { fade } from "@material-ui/core/styles/colorManipulator"
 import React from "react"
-import { TabSidebar, TabSidebarItem } from "./TabSidebar"
+import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar"
 
 export type AdminMenuItemCallback = (menuItem: string) => void
 
diff --git a/site/src/components/TabPanel/TabSidebar.stories.tsx b/site/src/components/TabSidebar/TabSidebar.stories.tsx
similarity index 100%
rename from site/src/components/TabPanel/TabSidebar.stories.tsx
rename to site/src/components/TabSidebar/TabSidebar.stories.tsx
diff --git a/site/src/components/TabPanel/TabSidebar.tsx b/site/src/components/TabSidebar/TabSidebar.tsx
similarity index 100%
rename from site/src/components/TabPanel/TabSidebar.tsx
rename to site/src/components/TabSidebar/TabSidebar.tsx
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
index a0ac0961b2858..a854d1ecdb313 100644
--- a/site/src/components/Table/Table.tsx
+++ b/site/src/components/Table/Table.tsx
@@ -5,8 +5,8 @@ import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import React from "react"
-import { TableHeaders } from "./TableHeaders"
-import { TableTitle } from "./TableTitle"
+import { TableHeaders } from "../TableHeaders/TableHeaders"
+import { TableTitle } from "../TableTitle/TableTitle"
 
 export interface Column<T> {
   /**
diff --git a/site/src/components/Table/TableHeaders.tsx b/site/src/components/TableHeaders/TableHeaders.tsx
similarity index 100%
rename from site/src/components/Table/TableHeaders.tsx
rename to site/src/components/TableHeaders/TableHeaders.tsx
diff --git a/site/src/components/Table/TableTitle.tsx b/site/src/components/TableTitle/TableTitle.tsx
similarity index 100%
rename from site/src/components/Table/TableTitle.tsx
rename to site/src/components/TableTitle/TableTitle.tsx
diff --git a/site/src/components/User/UserAvatar.tsx b/site/src/components/UserAvatar/UserAvatar.tsx
similarity index 100%
rename from site/src/components/User/UserAvatar.tsx
rename to site/src/components/UserAvatar/UserAvatar.tsx
diff --git a/site/src/components/Table/Cells/UserCell.stories.tsx b/site/src/components/UserCell/UserCell.stories.tsx
similarity index 92%
rename from site/src/components/Table/Cells/UserCell.stories.tsx
rename to site/src/components/UserCell/UserCell.stories.tsx
index dcc74fdd5fe27..1cdc0c39aacc5 100644
--- a/site/src/components/Table/Cells/UserCell.stories.tsx
+++ b/site/src/components/UserCell/UserCell.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
-import { MockUser, MockUserAgent } from "../../../testHelpers"
+import { MockUser, MockUserAgent } from "../../testHelpers"
 import { UserCell, UserCellProps } from "./UserCell"
 
 export default {
diff --git a/site/src/components/Table/Cells/UserCell.test.tsx b/site/src/components/UserCell/UserCell.test.tsx
similarity index 99%
rename from site/src/components/Table/Cells/UserCell.test.tsx
rename to site/src/components/UserCell/UserCell.test.tsx
index 7fbb92eec782b..adec2f644f1f1 100644
--- a/site/src/components/Table/Cells/UserCell.test.tsx
+++ b/site/src/components/UserCell/UserCell.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react"
 import React from "react"
-import { MockUser, MockUserAgent, WrapperComponent } from "../../../testHelpers"
+import { MockUser, MockUserAgent, WrapperComponent } from "../../testHelpers"
 import { UserCell, UserCellProps } from "./UserCell"
 
 namespace Helpers {
diff --git a/site/src/components/Table/Cells/UserCell.tsx b/site/src/components/UserCell/UserCell.tsx
similarity index 96%
rename from site/src/components/Table/Cells/UserCell.tsx
rename to site/src/components/UserCell/UserCell.tsx
index d46ca4f27ea3f..4f6774890cf22 100644
--- a/site/src/components/Table/Cells/UserCell.tsx
+++ b/site/src/components/UserCell/UserCell.tsx
@@ -3,7 +3,7 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { UserAvatar, UserAvatarProps } from "../../User/UserAvatar"
+import { UserAvatar, UserAvatarProps } from "../UserAvatar/UserAvatar"
 
 export interface UserCellProps {
   Avatar: UserAvatarProps
diff --git a/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx b/site/src/components/UserDropdown/UserDropdown.stories.tsx
similarity index 100%
rename from site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx
rename to site/src/components/UserDropdown/UserDropdown.stories.tsx
diff --git a/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx b/site/src/components/UserDropdown/UserDropdown.test.tsx
similarity index 94%
rename from site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx
rename to site/src/components/UserDropdown/UserDropdown.test.tsx
index 739039be44c73..c5261b1f0dcc4 100644
--- a/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx
+++ b/site/src/components/UserDropdown/UserDropdown.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { render } from "../../../testHelpers"
-import { MockUser } from "../../../testHelpers/entities"
+import { render } from "../../testHelpers"
+import { MockUser } from "../../testHelpers/entities"
 import { Language, UserDropdown, UserDropdownProps } from "./UsersDropdown"
 
 const renderAndClick = async (props: Partial<UserDropdownProps> = {}) => {
diff --git a/site/src/components/Navbar/UserDropdown/UsersDropdown.tsx b/site/src/components/UserDropdown/UsersDropdown.tsx
similarity index 89%
rename from site/src/components/Navbar/UserDropdown/UsersDropdown.tsx
rename to site/src/components/UserDropdown/UsersDropdown.tsx
index e26dbc87366b3..c7aa3ba49f47a 100644
--- a/site/src/components/Navbar/UserDropdown/UsersDropdown.tsx
+++ b/site/src/components/UserDropdown/UsersDropdown.tsx
@@ -7,13 +7,13 @@ import { fade, makeStyles } from "@material-ui/core/styles"
 import AccountIcon from "@material-ui/icons/AccountCircleOutlined"
 import React, { useState } from "react"
 import { Link } from "react-router-dom"
-import { UserResponse } from "../../../api/types"
-import { BorderedMenu } from "../../BorderedMenu/BorderedMenu"
-import { CloseDropdown, OpenDropdown } from "../../DropdownArrows/DropdownArrows"
-import { DocsIcon } from "../../Icons/DocsIcon"
-import { LogoutIcon } from "../../Icons/LogoutIcon"
-import { UserAvatar } from "../../User/UserAvatar"
-import { UserProfileCard } from "../../User/UserProfileCard"
+import { UserResponse } from "../../api/types"
+import { BorderedMenu } from "../BorderedMenu/BorderedMenu"
+import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
+import { DocsIcon } from "../Icons/DocsIcon"
+import { LogoutIcon } from "../Icons/LogoutIcon"
+import { UserAvatar } from "../UserAvatar/UserAvatar"
+import { UserProfileCard } from "../UserProfileCard/UserProfileCard"
 
 export const Language = {
   accountLabel: "Account",
diff --git a/site/src/components/User/UserProfileCard.tsx b/site/src/components/UserProfileCard/UserProfileCard.tsx
similarity index 96%
rename from site/src/components/User/UserProfileCard.tsx
rename to site/src/components/UserProfileCard/UserProfileCard.tsx
index 6f80caf431221..7e542335c5093 100644
--- a/site/src/components/User/UserProfileCard.tsx
+++ b/site/src/components/UserProfileCard/UserProfileCard.tsx
@@ -2,7 +2,7 @@ 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"
+import { UserAvatar } from "../UserAvatar/UserAvatar"
 
 interface UserProfileCardProps {
   user: UserResponse
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
index e0636a7c1f9d1..764f90dad63d5 100644
--- a/site/src/components/UsersTable/UsersTable.tsx
+++ b/site/src/components/UsersTable/UsersTable.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { UserResponse } from "../../api/types"
-import { Column, Table } from "../../components/Table/Table"
 import { EmptyState } from "../EmptyState/EmptyState"
-import { UserCell } from "../Table/Cells/UserCell"
+import { Column, Table } from "../Table/Table"
+import { UserCell } from "../UserCell/UserCell"
 
 const Language = {
   pageTitle: "Users",
diff --git a/site/src/components/SignIn/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx
similarity index 100%
rename from site/src/components/SignIn/Welcome.tsx
rename to site/src/components/Welcome/Welcome.tsx
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 0d419f67295cc..b349569b51b29 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -6,9 +6,9 @@ import CloudCircleIcon from "@material-ui/icons/CloudCircle"
 import React from "react"
 import { Link } from "react-router-dom"
 import * as Types from "../../api/types"
+import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
+import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import * as Constants from "./constants"
-import { WorkspaceSchedule } from "./WorkspaceSchedule"
-import { WorkspaceSection } from "./WorkspaceSection"
 
 export interface WorkspaceProps {
   organization: Types.Organization
diff --git a/site/src/components/Workspace/WorkspaceSchedule.stories.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.stories.tsx
similarity index 100%
rename from site/src/components/Workspace/WorkspaceSchedule.stories.tsx
rename to site/src/components/WorkspaceSchedule/WorkspaceSchedule.stories.tsx
diff --git a/site/src/components/Workspace/WorkspaceSchedule.tsx b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
similarity index 95%
rename from site/src/components/Workspace/WorkspaceSchedule.tsx
rename to site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
index 4e44cd79c1a31..240f1b7357cba 100644
--- a/site/src/components/Workspace/WorkspaceSchedule.tsx
+++ b/site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx
@@ -3,7 +3,7 @@ import Typography from "@material-ui/core/Typography"
 import cronstrue from "cronstrue"
 import React from "react"
 import { extractTimezone, stripTimezone } from "../../util/schedule"
-import { WorkspaceSection } from "./WorkspaceSection"
+import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 
 const Language = {
   autoStartLabel: (schedule: string): string => {
diff --git a/site/src/components/Workspace/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
similarity index 94%
rename from site/src/components/Workspace/WorkspaceSection.tsx
rename to site/src/components/WorkspaceSection/WorkspaceSection.tsx
index 57192b8daf82e..e5453dd259c10 100644
--- a/site/src/components/Workspace/WorkspaceSection.tsx
+++ b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
@@ -2,7 +2,7 @@ import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { CardPadding, CardRadius } from "./constants"
+import { CardPadding, CardRadius } from "../Workspace/constants"
 
 export interface WorkspaceSectionProps {
   title: string
diff --git a/site/src/forms/CreateTemplateForm.tsx b/site/src/forms/CreateTemplateForm.tsx
index 8fa3744e1943f..2944a3a2ef149 100644
--- a/site/src/forms/CreateTemplateForm.tsx
+++ b/site/src/forms/CreateTemplateForm.tsx
@@ -4,12 +4,12 @@ import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import { CreateTemplateRequest, Organization, Provisioner, Template } from "../api/types"
-import { LoadingButton } from "../components/Button/LoadingButton"
-import { FormCloseButton } from "../components/Form/FormCloseButton"
-import { DropdownItem, FormDropdownField } from "../components/Form/FormDropdownField"
-import { FormSection } from "../components/Form/FormSection"
-import { FormTextField } from "../components/Form/FormTextField"
-import { FormTitle } from "../components/Form/FormTitle"
+import { FormCloseButton } from "../components/FormCloseButton/FormCloseButton"
+import { FormDropdownField, FormDropdownItem } from "../components/FormDropdownField/FormDropdownField"
+import { FormSection } from "../components/FormSection/FormSection"
+import { FormTextField } from "../components/FormTextField/FormTextField"
+import { FormTitle } from "../components/FormTitle/FormTitle"
+import { LoadingButton } from "../components/LoadingButton/LoadingButton"
 
 export interface CreateTemplateFormProps {
   provisioners: Provisioner[]
@@ -45,14 +45,14 @@ export const CreateTemplateForm: React.FC<CreateTemplateFormProps> = ({
     },
   })
 
-  const organizationDropDownItems: DropdownItem[] = organizations.map((org) => {
+  const organizationDropDownItems: FormDropdownItem[] = organizations.map((org) => {
     return {
       value: org.name,
       name: org.name,
     }
   })
 
-  const provisionerDropDownItems: DropdownItem[] = provisioners.map((provisioner) => {
+  const provisionerDropDownItems: FormDropdownItem[] = provisioners.map((provisioner) => {
     return {
       value: provisioner.id,
       name: provisioner.name,
diff --git a/site/src/forms/CreateWorkspaceForm.tsx b/site/src/forms/CreateWorkspaceForm.tsx
index 07d6d02d746bb..60757038611ee 100644
--- a/site/src/forms/CreateWorkspaceForm.tsx
+++ b/site/src/forms/CreateWorkspaceForm.tsx
@@ -4,11 +4,11 @@ import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import { CreateWorkspaceRequest, Template, Workspace } from "../api/types"
-import { LoadingButton } from "../components/Button/LoadingButton"
-import { FormCloseButton } from "../components/Form/FormCloseButton"
-import { FormSection } from "../components/Form/FormSection"
-import { FormTextField } from "../components/Form/FormTextField"
-import { FormTitle } from "../components/Form/FormTitle"
+import { FormCloseButton } from "../components/FormCloseButton/FormCloseButton"
+import { FormSection } from "../components/FormSection/FormSection"
+import { FormTextField } from "../components/FormTextField/FormTextField"
+import { FormTitle } from "../components/FormTitle/FormTitle"
+import { LoadingButton } from "../components/LoadingButton/LoadingButton"
 
 export interface CreateWorkspaceForm {
   template: Template
diff --git a/site/src/pages/CliAuthPage/CliAuthPage.tsx b/site/src/pages/CliAuthPage/CliAuthPage.tsx
index 4aa825d7630e8..44498ab7bb14a 100644
--- a/site/src/pages/CliAuthPage/CliAuthPage.tsx
+++ b/site/src/pages/CliAuthPage/CliAuthPage.tsx
@@ -2,8 +2,8 @@ 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/CliAuthToken/CliAuthToken"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
-import { CliAuthToken } from "../../components/SignIn/CliAuthToken"
 import { XServiceContext } from "../../xServices/StateContext"
 
 export const CliAuthenticationPage: React.FC = () => {
diff --git a/site/src/pages/LoginPage/LoginPage.test.tsx b/site/src/pages/LoginPage/LoginPage.test.tsx
index 25be19631f937..f9c4fb8ebee5f 100644
--- a/site/src/pages/LoginPage/LoginPage.test.tsx
+++ b/site/src/pages/LoginPage/LoginPage.test.tsx
@@ -2,7 +2,7 @@ import { act, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { rest } from "msw"
 import React from "react"
-import { Language } from "../../components/SignIn/SignInForm"
+import { Language } from "../../components/SignInForm/SignInForm"
 import { history, render } from "../../testHelpers"
 import { server } from "../../testHelpers/server"
 import { LoginPage } from "./LoginPage"
diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
index 5ecea1d2f54ae..46b0ab0859abf 100644
--- a/site/src/pages/LoginPage/LoginPage.tsx
+++ b/site/src/pages/LoginPage/LoginPage.tsx
@@ -2,8 +2,8 @@ import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { Navigate, useLocation } from "react-router-dom"
-import { Footer } from "../../components/Page/Footer"
-import { SignInForm } from "../../components/SignIn/SignInForm"
+import { Footer } from "../../components/Footer/Footer"
+import { SignInForm } from "../../components/SignInForm/SignInForm"
 import { retrieveRedirect } from "../../util/redirect"
 import { XServiceContext } from "../../xServices/StateContext"
 
diff --git a/site/src/pages/PreferencesPages/AccountPage/AccountPage.test.tsx b/site/src/pages/PreferencesPages/AccountPage/AccountPage.test.tsx
index 014d735010ef3..67ae6037e5ac1 100644
--- a/site/src/pages/PreferencesPages/AccountPage/AccountPage.test.tsx
+++ b/site/src/pages/PreferencesPages/AccountPage/AccountPage.test.tsx
@@ -1,8 +1,8 @@
 import { fireEvent, screen, waitFor } from "@testing-library/react"
 import React from "react"
 import * as API from "../../../api"
-import * as AccountForm from "../../../components/Preferences/AccountForm"
-import { GlobalSnackbar } from "../../../components/Snackbar/GlobalSnackbar"
+import { GlobalSnackbar } from "../../../components/GlobalSnackbar/GlobalSnackbar"
+import * as AccountForm from "../../../components/PreferencesAccountForm/PreferencesAccountForm"
 import { renderWithAuth } from "../../../testHelpers"
 import * as AuthXService from "../../../xServices/auth/authXService"
 import { AccountPage, Language } from "./AccountPage"
diff --git a/site/src/pages/PreferencesPages/AccountPage/AccountPage.tsx b/site/src/pages/PreferencesPages/AccountPage/AccountPage.tsx
index 53709ffc793bd..a2fab535f5475 100644
--- a/site/src/pages/PreferencesPages/AccountPage/AccountPage.tsx
+++ b/site/src/pages/PreferencesPages/AccountPage/AccountPage.tsx
@@ -1,7 +1,7 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { isApiError, mapApiErrorToFieldErrors } from "../../../api/errors"
-import { AccountForm } from "../../../components/Preferences/AccountForm"
+import { AccountForm } from "../../../components/PreferencesAccountForm/PreferencesAccountForm"
 import { Section } from "../../../components/Section/Section"
 import { XServiceContext } from "../../../xServices/StateContext"
 
diff --git a/site/src/testHelpers/index.tsx b/site/src/testHelpers/index.tsx
index 552b94954726e..873c9687dc2fb 100644
--- a/site/src/testHelpers/index.tsx
+++ b/site/src/testHelpers/index.tsx
@@ -3,7 +3,7 @@ import { render as wrappedRender, RenderResult } from "@testing-library/react"
 import { createMemoryHistory } from "history"
 import React from "react"
 import { MemoryRouter, Route, Routes, unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
-import { RequireAuth } from "../components/Page/RequireAuth"
+import { RequireAuth } from "../components/RequireAuth/RequireAuth"
 import { dark } from "../theme"
 import { XServiceProvider } from "../xServices/StateContext"
 import { MockUser } from "./entities"
diff --git a/site/src/components/Form/utils.test.tsx b/site/src/util/formUtils.test.ts
similarity index 97%
rename from site/src/components/Form/utils.test.tsx
rename to site/src/util/formUtils.test.ts
index a97e30da63541..9218cb906bf14 100644
--- a/site/src/components/Form/utils.test.tsx
+++ b/site/src/util/formUtils.test.ts
@@ -1,5 +1,5 @@
 import { FormikContextType } from "formik/dist/types"
-import { getFormHelpers, onChangeTrimmed } from "./utils"
+import { getFormHelpers, onChangeTrimmed } from "./formUtils"
 
 interface TestType {
   untouchedGoodField: string
diff --git a/site/src/components/Form/utils.ts b/site/src/util/formUtils.ts
similarity index 100%
rename from site/src/components/Form/utils.ts
rename to site/src/util/formUtils.ts
diff --git a/site/src/xServices/auth/authXService.ts b/site/src/xServices/auth/authXService.ts
index 8fd7f4be14266..5dac631539259 100644
--- a/site/src/xServices/auth/authXService.ts
+++ b/site/src/xServices/auth/authXService.ts
@@ -1,7 +1,7 @@
 import { assign, createMachine } from "xstate"
 import * as API from "../../api"
 import * as Types from "../../api/types"
-import { displaySuccess } from "../../components/Snackbar/utils"
+import { displaySuccess } from "../../components/GlobalSnackbar/utils"
 
 export const Language = {
   successProfileUpdate: "Updated preferences.",