diff --git a/src/app/contacts/[contactId]/page.tsx b/src/app/(sidebar)/contacts/[contactId]/page.tsx
similarity index 100%
rename from src/app/contacts/[contactId]/page.tsx
rename to src/app/(sidebar)/contacts/[contactId]/page.tsx
diff --git a/src/app/(sidebar)/layout.tsx b/src/app/(sidebar)/layout.tsx
new file mode 100644
index 0000000..21cd3bb
--- /dev/null
+++ b/src/app/(sidebar)/layout.tsx
@@ -0,0 +1,49 @@
+import React, { Suspense } from "react";
+import Link from "next/link";
+import Form from "next/form";
+import ContactList from "./sidebar-contacts";
+import { getContacts } from "@/app/data";
+import type { Metadata } from "next";
+
+export default function SidebarRootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const contacts = getContacts();
+
+  return (
+    <>
+      <div id="sidebar">
+        <h1>
+          <Link href="/about">React Router Contacts</Link>
+        </h1>
+        <div>
+          <Form id="search-form" role="search" action="." formMethod="get">
+            <input
+              aria-label="Search contacts"
+              id="q"
+              name="q"
+              placeholder="Search"
+              type="search"/>
+            <div
+              aria-hidden
+              hidden={true}
+              id="search-spinner"/>
+          </Form>
+          <Form action="." formMethod="post">
+            <button type="submit">New</button>
+          </Form>
+        </div>
+        <nav>
+          <Suspense fallback={<div>Loading...</div>}>
+            <ContactList contacts={contacts}/>
+          </Suspense>
+        </nav>
+      </div>
+      <div id={'detail'}>
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(sidebar)/page.tsx b/src/app/(sidebar)/page.tsx
new file mode 100644
index 0000000..24f2148
--- /dev/null
+++ b/src/app/(sidebar)/page.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function Home() {
+  return (
+    <p id="index-page">
+      This is a demo for React Router.
+      <br/>
+      Check out{" "}
+      <a href="https://reactrouter.com">
+        the docs at reactrouter.com
+      </a>
+      .
+    </p>
+  );
+}
diff --git a/src/app/sidebar-contacts.tsx b/src/app/(sidebar)/sidebar-contacts.tsx
similarity index 100%
rename from src/app/sidebar-contacts.tsx
rename to src/app/(sidebar)/sidebar-contacts.tsx
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..7a8d782
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,45 @@
+import Link from "next/link";
+
+export default function About() {
+  return (
+    <div id="about">
+      <Link href="/">← Go to demo</Link>
+      <h1>About React Router Contacts</h1>
+
+      <div>
+        <p>
+          This is a demo application showing off some of the
+          powerful features of React Router, including
+          dynamic routing, nested routes, loaders, actions,
+          and more.
+        </p>
+
+        <h2>Features</h2>
+        <p>
+          Explore the demo to see how React Router handles:
+        </p>
+        <ul>
+          <li>
+            Data loading and mutations with loaders and
+            actions
+          </li>
+          <li>
+            Nested routing with parent/child relationships
+          </li>
+          <li>URL-based routing with dynamic segments</li>
+          <li>Pending and optimistic UI</li>
+        </ul>
+
+        <h2>Learn More</h2>
+        <p>
+          Check out the official documentation at{" "}
+          <a href="https://reactrouter.com">
+            reactrouter.com
+          </a>{" "}
+          to learn more about building great web
+          applications with React Router.
+        </p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5e7a68a..7406ee3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,7 @@
+import React from "react";
 import type { Metadata } from "next";
-import React, { Suspense } from "react";
 
 import "./globals.css";
-import Form from "next/form";
-import ContactList from "@/app/sidebar-contacts";
-import { getContacts } from "@/app/data";
 
 export const metadata: Metadata = {
   title: "Next.js Address Book",
@@ -16,42 +13,11 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const contacts = getContacts();
-
   return (
     <html lang="en">
     <body>
-    <div id="sidebar">
-      <h1>React Router Contacts</h1>
-      <div>
-        <Form id="search-form" role="search" action="." formMethod="get">
-          <input
-            aria-label="Search contacts"
-            id="q"
-            name="q"
-            placeholder="Search"
-            type="search"
-          />
-          <div
-            aria-hidden
-            hidden={true}
-            id="search-spinner"
-          />
-        </Form>
-        <Form action="." formMethod="post">
-          <button type="submit">New</button>
-        </Form>
-      </div>
-      <nav>
-        <Suspense fallback={<div>Loading...</div>}>
-          <ContactList contacts={contacts}/>
-        </Suspense>
-      </nav>
-    </div>
-    <div id={'detail'}>
-      {children}
-    </div>
+    {children}
     </body>
     </html>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index f3d92cd..0000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import Form from "next/form";
-import React from "react";
-
-export default function Home() {
-  return (
-    <div></div>
-  );
-}