diff --git a/index.html b/index.html
index 7a7a089..e596278 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <main
       class="mx-auto h-fit h-screen w-full max-w-screen-xl place-content-center sm:w-96"
-      id="root"
+      id="app"
     ></main>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/src/components/App.tsx b/src/components/App.tsx
new file mode 100644
index 0000000..12c4b36
--- /dev/null
+++ b/src/components/App.tsx
@@ -0,0 +1,9 @@
+import Chat from './Chat';
+
+export default function App() {
+  return (
+    <section class="flex h-screen flex-col rounded-xl bg-white sm:h-[70vh] sm:border sm:shadow">
+      <Chat />
+    </section>
+  );
+}
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index bf7f8fc..f83a1aa 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -38,7 +38,7 @@ export default function Chat() {
   });
 
   return (
-    <section class="flex h-screen flex-col rounded-xl bg-white sm:h-[70vh] sm:border sm:shadow">
+    <>
       <Header />
       <ChatError error={error} reload={reload} />
       <Messages messages={messages} />
@@ -48,6 +48,6 @@ export default function Chat() {
         onSubmit={handleSubmit}
         value={input}
       />
-    </section>
+    </>
   );
 }
diff --git a/src/main.tsx b/src/main.tsx
index db644af..6b1fe4e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,6 @@ import './index.css';
 
 import { render } from 'preact';
 
-import Chat from './components/Chat';
+import App from './components/App';
 
-render(<Chat />, document.getElementById('root')!);
+render(<App />, document.getElementById('app')!);