diff --git a/examples/docker-local/main.tf b/examples/docker-local/main.tf
index e17fb84d08c59..912e903e11116 100644
--- a/examples/docker-local/main.tf
+++ b/examples/docker-local/main.tf
@@ -37,7 +37,7 @@ resource "docker_volume" "coder_volume" {
 }
 
 resource "docker_container" "workspace" {
-  count = data.coder_workspace.me.start_count
+  count   = data.coder_workspace.me.start_count
   image   = var.docker_image
   name    = "coder-${data.coder_workspace.me.owner}-${data.coder_workspace.me.name}-root"
   dns     = ["1.1.1.1"]
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index 373e11e09a166..91c5f09ced71a 100644
--- a/site/src/AppRouter.tsx
+++ b/site/src/AppRouter.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Route, Routes } from "react-router-dom"
-import { RequireAuth } from "./components"
 import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
+import { RequireAuth } from "./components/Page/RequireAuth"
 import { PreferencesLayout } from "./components/Preferences/Layout"
 import { IndexPage } from "./pages"
 import { NotFoundPage } from "./pages/404"
diff --git a/site/src/components/AuthAndFrame/AuthAndFrame.tsx b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
index d7e61e4d6422e..3eff8369ce927 100644
--- a/site/src/components/AuthAndFrame/AuthAndFrame.tsx
+++ b/site/src/components/AuthAndFrame/AuthAndFrame.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Navbar } from "../Navbar"
+import { Navbar } from "../Navbar/Navbar"
 import { Footer } from "../Page/Footer"
 import { RequireAuth } from "../Page/RequireAuth"
 
diff --git a/site/src/components/Button/index.ts b/site/src/components/Button/index.ts
deleted file mode 100644
index ddaa69c447241..0000000000000
--- a/site/src/components/Button/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./CopyButton"
-export * from "./LoadingButton"
-export * from "./SplitButton"
diff --git a/site/src/components/CodeBlock/index.stories.tsx b/site/src/components/CodeBlock/CodeBlock.stories.tsx
similarity index 92%
rename from site/src/components/CodeBlock/index.stories.tsx
rename to site/src/components/CodeBlock/CodeBlock.stories.tsx
index 156cf2b4edca9..db2d1d22ca8cc 100644
--- a/site/src/components/CodeBlock/index.stories.tsx
+++ b/site/src/components/CodeBlock/CodeBlock.stories.tsx
@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react"
 import React from "react"
-import { CodeBlock, CodeBlockProps } from "./index"
+import { CodeBlock, CodeBlockProps } from "./CodeBlock"
 
 const sampleLines = `Successfully assigned coder/image-jcws7 to cluster-1
 Container image "gcr.io/coder-dogfood/master/coder-dev-ubuntu@sha256" already present on machine
diff --git a/site/src/components/CodeBlock/index.test.tsx b/site/src/components/CodeBlock/CodeBlock.test.tsx
similarity index 90%
rename from site/src/components/CodeBlock/index.test.tsx
rename to site/src/components/CodeBlock/CodeBlock.test.tsx
index f1fcb82d329d3..396bad80fcdac 100644
--- a/site/src/components/CodeBlock/index.test.tsx
+++ b/site/src/components/CodeBlock/CodeBlock.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
 import { render } from "../../testHelpers"
-import { CodeBlock } from "./index"
+import { CodeBlock } from "./CodeBlock"
 
 describe("CodeBlock", () => {
   it("renders lines)", async () => {
diff --git a/site/src/components/CodeBlock/index.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
similarity index 100%
rename from site/src/components/CodeBlock/index.tsx
rename to site/src/components/CodeBlock/CodeBlock.tsx
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index 6b5b3b346d960..2cb08c06ecd3f 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"
+import { CopyButton } from "../Button/CopyButton"
 
 export interface CodeExampleProps {
   code: string
diff --git a/site/src/components/CodeExample/index.ts b/site/src/components/CodeExample/index.ts
deleted file mode 100644
index a2c38996d0f11..0000000000000
--- a/site/src/components/CodeExample/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./CodeExample"
diff --git a/site/src/components/EmptyState/index.test.tsx b/site/src/components/EmptyState/EmptyState.test.tsx
similarity index 95%
rename from site/src/components/EmptyState/index.test.tsx
rename to site/src/components/EmptyState/EmptyState.test.tsx
index 039ecd446645f..1632044c1c994 100644
--- a/site/src/components/EmptyState/index.test.tsx
+++ b/site/src/components/EmptyState/EmptyState.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
 import { render } from "../../testHelpers"
-import { EmptyState } from "./index"
+import { EmptyState } from "./EmptyState"
 
 describe("EmptyState", () => {
   it("renders (smoke test)", async () => {
diff --git a/site/src/components/EmptyState/index.tsx b/site/src/components/EmptyState/EmptyState.tsx
similarity index 100%
rename from site/src/components/EmptyState/index.tsx
rename to site/src/components/EmptyState/EmptyState.tsx
diff --git a/site/src/components/ErrorSummary/ErrorSummary.stories.tsx b/site/src/components/ErrorSummary/ErrorSummary.stories.tsx
index 33b13106f25e3..af0c07970110e 100644
--- a/site/src/components/ErrorSummary/ErrorSummary.stories.tsx
+++ b/site/src/components/ErrorSummary/ErrorSummary.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
-import { ErrorSummary, ErrorSummaryProps } from "."
+import { ErrorSummary, ErrorSummaryProps } from "./ErrorSummary"
 
 export default {
   title: "components/ErrorSummary",
diff --git a/site/src/components/ErrorSummary/index.test.tsx b/site/src/components/ErrorSummary/ErrorSummary.test.tsx
similarity index 89%
rename from site/src/components/ErrorSummary/index.test.tsx
rename to site/src/components/ErrorSummary/ErrorSummary.test.tsx
index 9cb51484b7fd4..5db395c91e025 100644
--- a/site/src/components/ErrorSummary/index.test.tsx
+++ b/site/src/components/ErrorSummary/ErrorSummary.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react"
 import React from "react"
-import { ErrorSummary } from "./index"
+import { ErrorSummary } from "./ErrorSummary"
 
 describe("ErrorSummary", () => {
   it("renders", async () => {
diff --git a/site/src/components/ErrorSummary/index.tsx b/site/src/components/ErrorSummary/ErrorSummary.tsx
similarity index 100%
rename from site/src/components/ErrorSummary/index.tsx
rename to site/src/components/ErrorSummary/ErrorSummary.tsx
diff --git a/site/src/components/Form/index.test.tsx b/site/src/components/Form/utils.test.tsx
similarity index 97%
rename from site/src/components/Form/index.test.tsx
rename to site/src/components/Form/utils.test.tsx
index eae3486c539d9..a97e30da63541 100644
--- a/site/src/components/Form/index.test.tsx
+++ b/site/src/components/Form/utils.test.tsx
@@ -1,5 +1,5 @@
 import { FormikContextType } from "formik/dist/types"
-import { getFormHelpers, onChangeTrimmed } from "./index"
+import { getFormHelpers, onChangeTrimmed } from "./utils"
 
 interface TestType {
   untouchedGoodField: string
diff --git a/site/src/components/Form/index.ts b/site/src/components/Form/utils.ts
similarity index 87%
rename from site/src/components/Form/index.ts
rename to site/src/components/Form/utils.ts
index 80f466b783918..772aaaecbe660 100644
--- a/site/src/components/Form/index.ts
+++ b/site/src/components/Form/utils.ts
@@ -1,12 +1,6 @@
 import { FormikContextType, getIn } from "formik"
 import { ChangeEvent, ChangeEventHandler, FocusEventHandler } from "react"
 
-export * from "./FormCloseButton"
-export * from "./FormDropdownField"
-export * from "./FormSection"
-export * from "./FormTextField"
-export * from "./FormTitle"
-
 interface FormHelpers {
   name: string
   onBlur: FocusEventHandler
diff --git a/site/src/components/Header/index.test.tsx b/site/src/components/Header/Header.test.tsx
similarity index 96%
rename from site/src/components/Header/index.test.tsx
rename to site/src/components/Header/Header.test.tsx
index 094d64a4b705e..81c7bb2f3e53b 100644
--- a/site/src/components/Header/index.test.tsx
+++ b/site/src/components/Header/Header.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
 import { render } from "../../testHelpers"
-import { Header } from "./index"
+import { Header } from "./Header"
 
 describe("Header", () => {
   it("renders title and subtitle", async () => {
diff --git a/site/src/components/Header/index.tsx b/site/src/components/Header/Header.tsx
similarity index 100%
rename from site/src/components/Header/index.tsx
rename to site/src/components/Header/Header.tsx
diff --git a/site/src/components/Navbar/index.tsx b/site/src/components/Navbar/Navbar.tsx
similarity index 89%
rename from site/src/components/Navbar/index.tsx
rename to site/src/components/Navbar/Navbar.tsx
index 48b4e9ecd63d0..9f9a7b686f14a 100644
--- a/site/src/components/Navbar/index.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"
+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/Navbar/NavbarView/NavbarView.stories.tsx
index e5d43d916d09d..cddf562152ace 100644
--- a/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx
+++ b/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx
@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react"
 import React from "react"
-import { NavbarView, NavbarViewProps } from "."
+import { NavbarView, NavbarViewProps } from "./NavbarView"
 
 export default {
   title: "components/NavbarView",
diff --git a/site/src/components/Navbar/NavbarView/NavbarView.test.tsx b/site/src/components/Navbar/NavbarView/NavbarView.test.tsx
index e11057e80d93f..937031f7e264b 100644
--- a/site/src/components/Navbar/NavbarView/NavbarView.test.tsx
+++ b/site/src/components/Navbar/NavbarView/NavbarView.test.tsx
@@ -1,8 +1,8 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { NavbarView } from "."
 import { render } from "../../../testHelpers"
 import { MockUser } from "../../../testHelpers/entities"
+import { NavbarView } from "./NavbarView"
 
 describe("NavbarView", () => {
   const noop = () => {
diff --git a/site/src/components/Navbar/NavbarView/index.tsx b/site/src/components/Navbar/NavbarView/NavbarView.tsx
similarity index 97%
rename from site/src/components/Navbar/NavbarView/index.tsx
rename to site/src/components/Navbar/NavbarView/NavbarView.tsx
index ef7d62ab55d14..0337dcabc24b3 100644
--- a/site/src/components/Navbar/NavbarView/index.tsx
+++ b/site/src/components/Navbar/NavbarView/NavbarView.tsx
@@ -7,7 +7,7 @@ import { UserResponse } from "../../../api/types"
 import { navHeight } from "../../../theme/constants"
 import { AdminDropdown } from "../../AdminDropdown/AdminDropdown"
 import { Logo } from "../../Icons/Logo"
-import { UserDropdown } from "../UserDropdown"
+import { UserDropdown } from "../UserDropdown/UsersDropdown"
 
 export interface NavbarViewProps {
   user?: UserResponse
diff --git a/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx b/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx
index a4f667a6ab283..48fb3650478dd 100644
--- a/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx
+++ b/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx
@@ -1,7 +1,7 @@
 import Box from "@material-ui/core/Box"
 import { Story } from "@storybook/react"
 import React from "react"
-import { UserDropdown, UserDropdownProps } from "."
+import { UserDropdown, UserDropdownProps } from "./UsersDropdown"
 
 export default {
   title: "components/UserDropdown",
diff --git a/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx b/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx
index 93d1aec941879..739039be44c73 100644
--- a/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx
+++ b/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx
@@ -1,8 +1,8 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { Language, UserDropdown, UserDropdownProps } from "."
 import { render } from "../../../testHelpers"
 import { MockUser } from "../../../testHelpers/entities"
+import { Language, UserDropdown, UserDropdownProps } from "./UsersDropdown"
 
 const renderAndClick = async (props: Partial<UserDropdownProps> = {}) => {
   render(<UserDropdown user={props.user ?? MockUser} onSignOut={props.onSignOut ?? jest.fn()} />)
diff --git a/site/src/components/Navbar/UserDropdown/index.tsx b/site/src/components/Navbar/UserDropdown/UsersDropdown.tsx
similarity index 98%
rename from site/src/components/Navbar/UserDropdown/index.tsx
rename to site/src/components/Navbar/UserDropdown/UsersDropdown.tsx
index 23f3aee71e734..e26dbc87366b3 100644
--- a/site/src/components/Navbar/UserDropdown/index.tsx
+++ b/site/src/components/Navbar/UserDropdown/UsersDropdown.tsx
@@ -12,7 +12,7 @@ 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"
+import { UserAvatar } from "../../User/UserAvatar"
 import { UserProfileCard } from "../../User/UserProfileCard"
 
 export const Language = {
diff --git a/site/src/components/Page/index.tsx b/site/src/components/Page/index.tsx
deleted file mode 100644
index d339834abcb76..0000000000000
--- a/site/src/components/Page/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Footer"
-export * from "./RequireAuth"
diff --git a/site/src/components/Preferences/AccountForm.tsx b/site/src/components/Preferences/AccountForm.tsx
index b851322530d3b..69044453947f1 100644
--- a/site/src/components/Preferences/AccountForm.tsx
+++ b/site/src/components/Preferences/AccountForm.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"
+import { getFormHelpers, onChangeTrimmed } from "../Form/utils"
 import { Stack } from "../Stack/Stack"
-import { LoadingButton } from "./../Button"
+import { LoadingButton } from "./../Button/LoadingButton"
 
 interface AccountFormValues {
   name: string
diff --git a/site/src/components/Preferences/Layout.tsx b/site/src/components/Preferences/Layout.tsx
index bf83154b30e47..bfd58426c91d7 100644
--- a/site/src/components/Preferences/Layout.tsx
+++ b/site/src/components/Preferences/Layout.tsx
@@ -2,7 +2,7 @@ import Box from "@material-ui/core/Box"
 import React from "react"
 import { Outlet } from "react-router-dom"
 import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
-import { TabPanel } from "../TabPanel"
+import { TabPanel } from "../TabPanel/TabPanel"
 
 export const Language = {
   accountLabel: "Account",
diff --git a/site/src/components/Section/index.tsx b/site/src/components/Section/Section.tsx
similarity index 100%
rename from site/src/components/Section/index.tsx
rename to site/src/components/Section/Section.tsx
diff --git a/site/src/components/Section/SectionView.stories.tsx b/site/src/components/Section/SectionView.stories.tsx
index 87871430801f3..dfddc65284a6c 100644
--- a/site/src/components/Section/SectionView.stories.tsx
+++ b/site/src/components/Section/SectionView.stories.tsx
@@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"
 import TextField from "@material-ui/core/TextField"
 import { Story } from "@storybook/react"
 import React from "react"
-import { Section, SectionProps } from "./"
+import { Section, SectionProps } from "./Section"
 
 export default {
   title: "components/Section",
diff --git a/site/src/components/SignIn/CliAuthToken.tsx b/site/src/components/SignIn/CliAuthToken.tsx
index 1eee647c79b0b..75bb13dca5fdf 100644
--- a/site/src/components/SignIn/CliAuthToken.tsx
+++ b/site/src/components/SignIn/CliAuthToken.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 { CodeExample } from "../CodeExample"
+import { CodeExample } from "../CodeExample/CodeExample"
 
 export interface CliAuthTokenProps {
   sessionToken: string
diff --git a/site/src/components/SignIn/SignInForm.tsx b/site/src/components/SignIn/SignInForm.tsx
index 917211082a906..09a7a4d238df7 100644
--- a/site/src/components/SignIn/SignInForm.tsx
+++ b/site/src/components/SignIn/SignInForm.tsx
@@ -4,8 +4,8 @@ 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"
-import { LoadingButton } from "./../Button"
+import { getFormHelpers, onChangeTrimmed } from "../Form/utils"
+import { LoadingButton } from "./../Button/LoadingButton"
 import { Welcome } from "./Welcome"
 
 /**
diff --git a/site/src/components/SignIn/index.tsx b/site/src/components/SignIn/index.tsx
deleted file mode 100644
index 066b58003c67c..0000000000000
--- a/site/src/components/SignIn/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./CliAuthToken"
-export * from "./SignInForm"
diff --git a/site/src/components/Snackbar/GlobalSnackbar.tsx b/site/src/components/Snackbar/GlobalSnackbar.tsx
index cbaa70330c67a..3da97ddd38990 100644
--- a/site/src/components/Snackbar/GlobalSnackbar.tsx
+++ b/site/src/components/Snackbar/GlobalSnackbar.tsx
@@ -1,5 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React, { useCallback, useState } from "react"
+import { useCustomEvent } from "../../hooks/events"
+import { CustomEventListener } from "../../util/events"
+import { ErrorIcon } from "../Icons/ErrorIcon"
+import { Typography } from "../Typography/Typography"
+import { EnterpriseSnackbar } from "./EnterpriseSnackbar"
 import {
   AdditionalMessage,
   isNotificationList,
@@ -8,12 +13,7 @@ import {
   MsgType,
   NotificationMsg,
   SnackbarEventType,
-} from "."
-import { useCustomEvent } from "../../hooks/events"
-import { CustomEventListener } from "../../util/events"
-import { ErrorIcon } from "../Icons/ErrorIcon"
-import { Typography } from "../Typography/Typography"
-import { EnterpriseSnackbar } from "./EnterpriseSnackbar"
+} from "./utils"
 
 export const GlobalSnackbar: React.FC = () => {
   const styles = useStyles()
diff --git a/site/src/components/Snackbar/index.test.ts b/site/src/components/Snackbar/utils.test.ts
similarity index 98%
rename from site/src/components/Snackbar/index.test.ts
rename to site/src/components/Snackbar/utils.test.ts
index 9d7c9999a5b82..5ae3ad6222496 100644
--- a/site/src/components/Snackbar/index.test.ts
+++ b/site/src/components/Snackbar/utils.test.ts
@@ -1,4 +1,4 @@
-import { displaySuccess, isNotificationTextPrefixed, MsgType, NotificationMsg } from "./index"
+import { displaySuccess, isNotificationTextPrefixed, MsgType, NotificationMsg } from "./utils"
 
 describe("Snackbar", () => {
   describe("isNotificationTextPrefixed", () => {
diff --git a/site/src/components/Snackbar/index.ts b/site/src/components/Snackbar/utils.ts
similarity index 89%
rename from site/src/components/Snackbar/index.ts
rename to site/src/components/Snackbar/utils.ts
index 52de0ddab1ab5..84fda4afa3a15 100644
--- a/site/src/components/Snackbar/index.ts
+++ b/site/src/components/Snackbar/utils.ts
@@ -1,11 +1,5 @@
 import { dispatchCustomEvent } from "../../util/events"
 
-///////////////////////////////////////////////////////////////////////////////
-// Notification Component
-///////////////////////////////////////////////////////////////////////////////
-
-export { GlobalSnackbar } from "./GlobalSnackbar"
-
 ///////////////////////////////////////////////////////////////////////////////
 // Notification Types
 ///////////////////////////////////////////////////////////////////////////////
diff --git a/site/src/components/TabPanel/TabPanel.stories.tsx b/site/src/components/TabPanel/TabPanel.stories.tsx
index 2dca616b3262a..9cf305d9ee001 100644
--- a/site/src/components/TabPanel/TabPanel.stories.tsx
+++ b/site/src/components/TabPanel/TabPanel.stories.tsx
@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react"
 import React from "react"
-import { TabPanel, TabPanelProps } from "."
+import { TabPanel, TabPanelProps } from "./TabPanel"
 
 export default {
   title: "components/TabPanel",
diff --git a/site/src/components/TabPanel/index.tsx b/site/src/components/TabPanel/TabPanel.tsx
similarity index 100%
rename from site/src/components/TabPanel/index.tsx
rename to site/src/components/TabPanel/TabPanel.tsx
diff --git a/site/src/components/Table/Cells/UserCell.tsx b/site/src/components/Table/Cells/UserCell.tsx
index a9ea47ef66e4c..d46ca4f27ea3f 100644
--- a/site/src/components/Table/Cells/UserCell.tsx
+++ b/site/src/components/Table/Cells/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"
+import { UserAvatar, UserAvatarProps } from "../../User/UserAvatar"
 
 export interface UserCellProps {
   Avatar: UserAvatarProps
diff --git a/site/src/components/Table/index.tsx b/site/src/components/Table/index.tsx
deleted file mode 100644
index e7ae861eb7a81..0000000000000
--- a/site/src/components/Table/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Table"
diff --git a/site/src/components/User/index.ts b/site/src/components/User/index.ts
deleted file mode 100644
index 324a0afd7a931..0000000000000
--- a/site/src/components/User/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./UserAvatar"
-export * from "./UserProfileCard"
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
index 7fd1bfe8b6a41..e0636a7c1f9d1 100644
--- a/site/src/components/UsersTable/UsersTable.tsx
+++ b/site/src/components/UsersTable/UsersTable.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { UserResponse } from "../../api/types"
-import { Column, Table } from "../../components/Table"
-import { EmptyState } from "../EmptyState"
+import { Column, Table } from "../../components/Table/Table"
+import { EmptyState } from "../EmptyState/EmptyState"
 import { UserCell } from "../Table/Cells/UserCell"
 
 const Language = {
diff --git a/site/src/components/Workspace/index.ts b/site/src/components/Workspace/index.ts
deleted file mode 100644
index 4c8c38cc721c8..0000000000000
--- a/site/src/components/Workspace/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Workspace"
diff --git a/site/src/components/index.tsx b/site/src/components/index.tsx
deleted file mode 100644
index 5fd2a75122e23..0000000000000
--- a/site/src/components/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./Button"
-export * from "./EmptyState"
-export * from "./Page"
diff --git a/site/src/forms/CreateTemplateForm.tsx b/site/src/forms/CreateTemplateForm.tsx
index fa79c35099b4f..8fa3744e1943f 100644
--- a/site/src/forms/CreateTemplateForm.tsx
+++ b/site/src/forms/CreateTemplateForm.tsx
@@ -4,15 +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"
-import {
-  DropdownItem,
-  FormCloseButton,
-  FormDropdownField,
-  FormSection,
-  FormTextField,
-  FormTitle,
-} from "../components/Form"
+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"
 
 export interface CreateTemplateFormProps {
   provisioners: Provisioner[]
diff --git a/site/src/forms/CreateWorkspaceForm.tsx b/site/src/forms/CreateWorkspaceForm.tsx
index 2020aedba59cb..07d6d02d746bb 100644
--- a/site/src/forms/CreateWorkspaceForm.tsx
+++ b/site/src/forms/CreateWorkspaceForm.tsx
@@ -4,8 +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"
-import { FormCloseButton, FormSection, FormTextField, FormTitle } from "../components/Form"
+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"
 
 export interface CreateWorkspaceForm {
   template: Template
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
index ca0c4bd71fed8..fd4f073097bf0 100644
--- a/site/src/pages/UsersPage/UsersPage.tsx
+++ b/site/src/pages/UsersPage/UsersPage.tsx
@@ -1,6 +1,6 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
-import { ErrorSummary } from "../../components/ErrorSummary"
+import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { XServiceContext } from "../../xServices/StateContext"
 import { UsersPageView } from "./UsersPageView"
 
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
index 082a9c9403650..812cc4e318f1e 100644
--- a/site/src/pages/UsersPage/UsersPageView.tsx
+++ b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { Pager, UserResponse } from "../../api/types"
-import { Header } from "../../components/Header"
+import { Header } from "../../components/Header/Header"
 import { UsersTable } from "../../components/UsersTable/UsersTable"
 
 export const Language = {
diff --git a/site/src/pages/cli-auth.tsx b/site/src/pages/cli-auth.tsx
index 034d8d60ff2c4..a6a14a4bd9334 100644
--- a/site/src/pages/cli-auth.tsx
+++ b/site/src/pages/cli-auth.tsx
@@ -3,7 +3,7 @@ import { useActor } from "@xstate/react"
 import React, { useContext, useEffect, useState } from "react"
 import { getApiKey } from "../api"
 import { FullScreenLoader } from "../components/Loader/FullScreenLoader"
-import { CliAuthToken } from "../components/SignIn"
+import { CliAuthToken } from "../components/SignIn/CliAuthToken"
 import { XServiceContext } from "../xServices/StateContext"
 
 export const CliAuthenticationPage: React.FC = () => {
diff --git a/site/src/pages/login.tsx b/site/src/pages/login.tsx
index fdde9fcc61f33..4ca95d9a1cb0d 100644
--- a/site/src/pages/login.tsx
+++ b/site/src/pages/login.tsx
@@ -5,7 +5,7 @@ import { Navigate, useLocation } from "react-router-dom"
 import { Footer } from "../components/Page/Footer"
 import { retrieveRedirect } from "../util/redirect"
 import { XServiceContext } from "../xServices/StateContext"
-import { SignInForm } from "./../components/SignIn"
+import { SignInForm } from "./../components/SignIn/SignInForm"
 
 export const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/site/src/pages/preferences/account.tsx b/site/src/pages/preferences/account.tsx
index fd507337234a4..d55616bc9786e 100644
--- a/site/src/pages/preferences/account.tsx
+++ b/site/src/pages/preferences/account.tsx
@@ -2,7 +2,7 @@ import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { isApiError, mapApiErrorToFieldErrors } from "../../api/errors"
 import { AccountForm } from "../../components/Preferences/AccountForm"
-import { Section } from "../../components/Section"
+import { Section } from "../../components/Section/Section"
 import { XServiceContext } from "../../xServices/StateContext"
 
 export const Language = {
diff --git a/site/src/pages/preferences/linkedAccounts.tsx b/site/src/pages/preferences/linkedAccounts.tsx
index 08e311e7770a3..dbe47ece1b15a 100644
--- a/site/src/pages/preferences/linkedAccounts.tsx
+++ b/site/src/pages/preferences/linkedAccounts.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Section } from "../../components/Section"
+import { Section } from "../../components/Section/Section"
 
 const Language = {
   title: "Linked Accounts",
diff --git a/site/src/pages/preferences/security.tsx b/site/src/pages/preferences/security.tsx
index 56812d744702e..89121519aa2ca 100644
--- a/site/src/pages/preferences/security.tsx
+++ b/site/src/pages/preferences/security.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Section } from "../../components/Section"
+import { Section } from "../../components/Section/Section"
 
 const Language = {
   title: "Security",
diff --git a/site/src/pages/preferences/sshKeys.tsx b/site/src/pages/preferences/sshKeys.tsx
index e7edc78938012..566451f27e92a 100644
--- a/site/src/pages/preferences/sshKeys.tsx
+++ b/site/src/pages/preferences/sshKeys.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Section } from "../../components/Section"
+import { Section } from "../../components/Section/Section"
 
 const Language = {
   title: "SSH Keys",
diff --git a/site/src/pages/templates/[organization]/[template]/create.tsx b/site/src/pages/templates/[organization]/[template]/create.tsx
index 8a24f3437af64..66aff05bbe6e8 100644
--- a/site/src/pages/templates/[organization]/[template]/create.tsx
+++ b/site/src/pages/templates/[organization]/[template]/create.tsx
@@ -4,7 +4,7 @@ import { useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
 import * as API from "../../../../api"
 import * as Types from "../../../../api/types"
-import { ErrorSummary } from "../../../../components/ErrorSummary"
+import { ErrorSummary } from "../../../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
 import { CreateWorkspaceForm } from "../../../../forms/CreateWorkspaceForm"
 import { unsafeSWRArgument } from "../../../../util"
diff --git a/site/src/pages/templates/[organization]/[template]/index.tsx b/site/src/pages/templates/[organization]/[template]/index.tsx
index 0ebde0d161e63..fa3347fb65819 100644
--- a/site/src/pages/templates/[organization]/[template]/index.tsx
+++ b/site/src/pages/templates/[organization]/[template]/index.tsx
@@ -4,11 +4,11 @@ import React from "react"
 import { Link, useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
 import { Organization, Template, Workspace } from "../../../../api/types"
-import { EmptyState } from "../../../../components/EmptyState"
-import { ErrorSummary } from "../../../../components/ErrorSummary"
-import { Header } from "../../../../components/Header"
+import { EmptyState } from "../../../../components/EmptyState/EmptyState"
+import { ErrorSummary } from "../../../../components/ErrorSummary/ErrorSummary"
+import { Header } from "../../../../components/Header/Header"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
-import { Column, Table } from "../../../../components/Table"
+import { Column, Table } from "../../../../components/Table/Table"
 import { unsafeSWRArgument } from "../../../../util"
 import { firstOrItem } from "../../../../util/array"
 
diff --git a/site/src/pages/templates/index.tsx b/site/src/pages/templates/index.tsx
index 51d0166238ed9..1a15f3dc00680 100644
--- a/site/src/pages/templates/index.tsx
+++ b/site/src/pages/templates/index.tsx
@@ -4,12 +4,12 @@ import React from "react"
 import { Link } from "react-router-dom"
 import useSWR from "swr"
 import { Organization, Template } from "../../api/types"
-import { EmptyState } from "../../components"
 import { CodeExample } from "../../components/CodeExample/CodeExample"
-import { ErrorSummary } from "../../components/ErrorSummary"
-import { Header } from "../../components/Header"
+import { EmptyState } from "../../components/EmptyState/EmptyState"
+import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
+import { Header } from "../../components/Header/Header"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
-import { Column, Table } from "../../components/Table"
+import { Column, Table } from "../../components/Table/Table"
 
 export const TemplatesPage: React.FC = () => {
   const styles = useStyles()
diff --git a/site/src/pages/workspaces/[workspace].tsx b/site/src/pages/workspaces/[workspace].tsx
index 2cf95caed2f8c..d952bc7c02176 100644
--- a/site/src/pages/workspaces/[workspace].tsx
+++ b/site/src/pages/workspaces/[workspace].tsx
@@ -3,9 +3,9 @@ import React from "react"
 import { useParams } from "react-router-dom"
 import useSWR from "swr"
 import * as Types from "../../api/types"
-import { ErrorSummary } from "../../components/ErrorSummary"
+import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
-import { Workspace } from "../../components/Workspace"
+import { Workspace } from "../../components/Workspace/Workspace"
 import { unsafeSWRArgument } from "../../util"
 import { firstOrItem } from "../../util/array"
 
diff --git a/site/src/testHelpers/index.tsx b/site/src/testHelpers/index.tsx
index 419484c9c3ea0..552b94954726e 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"
+import { RequireAuth } from "../components/Page/RequireAuth"
 import { dark } from "../theme"
 import { XServiceProvider } from "../xServices/StateContext"
 import { MockUser } from "./entities"
diff --git a/site/src/xServices/auth/authXService.ts b/site/src/xServices/auth/authXService.ts
index 4dddf9f901ab0..8fd7f4be14266 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"
+import { displaySuccess } from "../../components/Snackbar/utils"
 
 export const Language = {
   successProfileUpdate: "Updated preferences.",