diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index 58d32623649b0..237f22152b39e 100644
--- a/site/src/AppRouter.tsx
+++ b/site/src/AppRouter.tsx
@@ -71,7 +71,10 @@ const SettingsGroupPage = lazy(
   () => import("./pages/GroupsPage/SettingsGroupPage"),
 )
 const GeneralSettingsPage = lazy(
-  () => import("./pages/DeploySettingsPage/GeneralSettingsPage"),
+  () =>
+    import(
+      "./pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage"
+    ),
 )
 const SecuritySettingsPage = lazy(
   () => import("./pages/DeploySettingsPage/SecuritySettingsPage"),
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
new file mode 100644
index 0000000000000..0cb1528a88247
--- /dev/null
+++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
@@ -0,0 +1,20 @@
+import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
+import React from "react"
+import { Helmet } from "react-helmet-async"
+import { pageTitle } from "util/page"
+import { GeneralSettingsPageView } from "./GeneralSettingsPageView"
+
+const GeneralSettingsPage: React.FC = () => {
+  const { deploymentConfig: deploymentConfig } = useDeploySettings()
+
+  return (
+    <>
+      <Helmet>
+        <title>Codestin Search App</title>
+      </Helmet>
+      <GeneralSettingsPageView deploymentConfig={deploymentConfig} />
+    </>
+  )
+}
+
+export default GeneralSettingsPage
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
new file mode 100644
index 0000000000000..93544a0e5aa0a
--- /dev/null
+++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
@@ -0,0 +1,33 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+  GeneralSettingsPageView,
+  GeneralSettingsPageViewProps,
+} from "./GeneralSettingsPageView"
+
+export default {
+  title: "pages/GeneralSettingsPageView",
+  component: GeneralSettingsPageView,
+  argTypes: {
+    deploymentConfig: {
+      defaultValue: {
+        access_url: {
+          name: "Access URL",
+          usage:
+            "External URL to access your deployment. This must be accessible by all provisioned workspaces.",
+          value: "https://dev.coder.com",
+        },
+        wildcard_access_url: {
+          name: "Wildcard Access URL",
+          usage:
+            'Specifies the wildcard hostname to use for workspace applications in the form "*.example.com".',
+          value: "*--apps.dev.coder.com",
+        },
+      },
+    },
+  },
+} as ComponentMeta<typeof GeneralSettingsPageView>
+
+const Template: Story<GeneralSettingsPageViewProps> = (args) => (
+  <GeneralSettingsPageView {...args} />
+)
+export const Page = Template.bind({})
diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
similarity index 55%
rename from site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx
rename to site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
index 26a39f4dbb858..d68d18ff3a45d 100644
--- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage.tsx
+++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -1,18 +1,15 @@
-import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
+import { DeploymentConfig } from "api/typesGenerated"
 import { Header } from "components/DeploySettingsLayout/Header"
 import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
-import React from "react"
-import { Helmet } from "react-helmet-async"
-import { pageTitle } from "util/page"
-
-const GeneralSettingsPage: React.FC = () => {
-  const { deploymentConfig: deploymentConfig } = useDeploySettings()
 
+export type GeneralSettingsPageViewProps = {
+  deploymentConfig: Pick<DeploymentConfig, "access_url" | "wildcard_access_url">
+}
+export const GeneralSettingsPageView = ({
+  deploymentConfig,
+}: GeneralSettingsPageViewProps): JSX.Element => {
   return (
     <>
-      <Helmet>
-        <title>Codestin Search App</title>
-      </Helmet>
       <Header
         title="General"
         description="Information about your Coder deployment."
@@ -27,5 +24,3 @@ const GeneralSettingsPage: React.FC = () => {
     </>
   )
 }
-
-export default GeneralSettingsPage