diff --git a/web/src/App.tsx b/web/src/App.tsx
index 1e60c5f4431a6173bc656685c726257f4b87e69d..948c6002ec2454d617fc83b210f2253554fe70db 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -5,9 +5,8 @@ import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
-import Routes from 'src/Routes'
 
-import './index.css'
+import { Layout } from './layouts'
 
 const extendedTheme = extendTheme(theme)
 
@@ -17,7 +16,7 @@ const App = () => (
       <ColorModeScript />
       <ChakraProvider theme={extendedTheme}>
         <RedwoodApolloProvider>
-          <Routes />
+          <Layout />
         </RedwoodApolloProvider>
       </ChakraProvider>
     </RedwoodProvider>
diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
index 2c8f02ab4fe2e9fe243ae523a9a152faa8b17b90..f9af536a70eb036e74a3859dd442b48578e1d673 100644
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@@ -9,10 +9,13 @@
 
 import { Router, Route } from '@redwoodjs/router'
 
+import { HomePage } from './pages/HomePage'
+
 const Routes = () => {
   return (
     <Router>
       <Route notfound page={NotFoundPage} />
+      <Route path="/" page={HomePage} name="home" />
     </Router>
   )
 }
diff --git a/web/src/components/.keep b/web/src/components/.keep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/web/src/index.css b/web/src/index.css
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/web/src/layouts/.keep b/web/src/layouts/.keep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/web/src/layouts/index.ts b/web/src/layouts/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..626835ba5575bbebdc8c22a0028b68425606297d
--- /dev/null
+++ b/web/src/layouts/index.ts
@@ -0,0 +1 @@
+export * from './layout'
diff --git a/web/src/layouts/layout.tsx b/web/src/layouts/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0ee887f76f8ce2d296cb1c3d56e89f70e4e3c47c
--- /dev/null
+++ b/web/src/layouts/layout.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { Box, Container, Flex, HStack } from '@chakra-ui/react'
+
+import Routes from 'src/Routes'
+
+export const Layout: React.FC = () => {
+  return (
+    <HStack>
+      <Box bgColor="teal.50">{/* navbar */}</Box>
+      <Flex h="100vh" flexGrow="1" bgColor="white">
+        <Container maxW="lg" py="10" flexGrow="1">
+          <Routes />
+        </Container>
+      </Flex>
+    </HStack>
+  )
+}
diff --git a/web/src/pages/HomePage/home-page.tsx b/web/src/pages/HomePage/home-page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..58bb37c592e9298feb11977d16a365131ecfe3a3
--- /dev/null
+++ b/web/src/pages/HomePage/home-page.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Box, Heading, Text } from '@chakra-ui/react'
+
+export const HomePage: React.FC = () => {
+  return (
+    <Box>
+      <Heading as="h1" size="xl" mb="6">
+        Welcome to My App
+      </Heading>
+      <Text fontSize="lg" mb="4">
+        This is a simple example of how to add content to your app.
+      </Text>
+    </Box>
+  )
+}
diff --git a/web/src/pages/HomePage/index.ts b/web/src/pages/HomePage/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f98af6b76e2efa9595bca562b0b9365fcf6668e2
--- /dev/null
+++ b/web/src/pages/HomePage/index.ts
@@ -0,0 +1 @@
+export * from './home-page'