diff --git a/web/src/components/ExamplePostsCell/ExamplePostsCell.mock.ts b/web/src/components/ExamplePostsCell/ExamplePostsCell.mock.ts
deleted file mode 100644
index 67c1c7dbbd8f60d886f41e046451c83e8df07002..0000000000000000000000000000000000000000
--- a/web/src/components/ExamplePostsCell/ExamplePostsCell.mock.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// Define your own mock data here:
-export const standard = (/* vars, { ctx, req } */) => ({
-  examplePosts: [{ id: 42 }, { id: 43 }, { id: 44 }],
-})
diff --git a/web/src/components/ExamplePostsCell/ExamplePostsCell.stories.tsx b/web/src/components/ExamplePostsCell/ExamplePostsCell.stories.tsx
deleted file mode 100644
index 9e25b4e071998c4f6bab39a2b80a525a8f78a7f2..0000000000000000000000000000000000000000
--- a/web/src/components/ExamplePostsCell/ExamplePostsCell.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Loading, Empty, Failure, Success } from './ExamplePostsCell'
-import { standard } from './ExamplePostsCell.mock'
-
-const meta: Meta = {
-  title: 'Cells/ExamplePostsCell',
-}
-
-export default meta
-
-export const loading: StoryObj<typeof Loading> = {
-  render: () => {
-    return Loading ? <Loading /> : <></>
-  },
-}
-
-export const empty: StoryObj<typeof Empty> = {
-  render: () => {
-    return Empty ? <Empty /> : <></>
-  },
-}
-
-export const failure: StoryObj<typeof Failure> = {
-  render: (args) => {
-    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
-  },
-}
-
-export const success: StoryObj<typeof Success> = {
-  render: (args) => {
-    return Success ? <Success {...standard()} {...args} /> : <></>
-  },
-}
diff --git a/web/src/components/ExamplePostsCell/ExamplePostsCell.test.tsx b/web/src/components/ExamplePostsCell/ExamplePostsCell.test.tsx
deleted file mode 100644
index 0e8a5b5ed28faf0a41e00013c1c1d5f3557ba521..0000000000000000000000000000000000000000
--- a/web/src/components/ExamplePostsCell/ExamplePostsCell.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { render } from '@redwoodjs/testing/web'
-
-import { Loading, Empty, Failure, Success } from './ExamplePostsCell'
-import { standard } from './ExamplePostsCell.mock'
-
-// Generated boilerplate tests do not account for all circumstances
-// and can fail without adjustments, e.g. Float and DateTime types.
-//           Please refer to the RedwoodJS Testing Docs:
-//        https://redwoodjs.com/docs/testing#testing-cells
-// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
-
-describe('ExamplePostsCell', () => {
-  it('renders Loading successfully', () => {
-    expect(() => {
-      render(<Loading />)
-    }).not.toThrow()
-  })
-
-  it('renders Empty successfully', async () => {
-    expect(() => {
-      render(<Empty />)
-    }).not.toThrow()
-  })
-
-  it('renders Failure successfully', async () => {
-    expect(() => {
-      render(<Failure error={new Error('Oh no')} />)
-    }).not.toThrow()
-  })
-
-  // When you're ready to test the actual output of your component render
-  // you could test that, for example, certain text is present:
-  //
-  // 1. import { screen } from '@redwoodjs/testing/web'
-  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
-
-  it('renders Success successfully', async () => {
-    expect(() => {
-      render(<Success examplePosts={standard().examplePosts} />)
-    }).not.toThrow()
-  })
-})
diff --git a/web/src/components/ExamplePostsCell/ExamplePostsCell.tsx b/web/src/components/ExamplePostsCell/ExamplePostsCell.tsx
deleted file mode 100644
index e7eac7dc19d2d45f85a27c9d2b9aa4fcef6fb5f0..0000000000000000000000000000000000000000
--- a/web/src/components/ExamplePostsCell/ExamplePostsCell.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ExamplePostsQuery } from 'types/graphql'
-
-import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
-
-export const QUERY = gql`
-  query ExamplePostsQuery {
-    examplePosts {
-      id
-    }
-  }
-`
-
-export const Loading = () => <div>Loading...</div>
-
-export const Empty = () => <div>Empty</div>
-
-export const Failure = ({ error }: CellFailureProps) => (
-  <div style={{ color: 'red' }}>Error: {error?.message}</div>
-)
-
-export const Success = ({
-  examplePosts,
-}: CellSuccessProps<ExamplePostsQuery>) => {
-  return (
-    <ul>
-      {examplePosts.map((item) => {
-        return <li key={item.id}>{JSON.stringify(item)}</li>
-      })}
-    </ul>
-  )
-}
diff --git a/web/src/pages/HomePage/home-page.spec.tsx b/web/src/pages/HomePage/home-page.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c1eaa3b2983b04e9793108022afa3de1a764e233
--- /dev/null
+++ b/web/src/pages/HomePage/home-page.spec.tsx
@@ -0,0 +1,14 @@
+import * as RTL from '@redwoodjs/testing/web'
+
+import { HomePage } from './home-page'
+
+describe('HomePage', () => {
+  it('renders successfully', () => {
+    RTL.render(<HomePage />)
+
+    RTL.screen.getByText(/welcome to my app/i)
+    RTL.screen.getByText(
+      /This is a simple example of how to add content to your app./i
+    )
+  })
+})
diff --git a/web/src/pages/HomePage/home-page.stories.tsx b/web/src/pages/HomePage/home-page.stories.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..083668653161d8c3544c43e9e848d63d87ba8331
--- /dev/null
+++ b/web/src/pages/HomePage/home-page.stories.tsx
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { HomePage } from './home-page'
+
+const meta: Meta = {
+  component: HomePage,
+  title: 'Home',
+}
+
+export default meta
+
+export const Default: StoryObj<typeof HomePage> = {
+  render: () => <HomePage />,
+}