diff --git a/components/Detail.tsx b/components/Detail.tsx
new file mode 100644
index 0000000..733d1e0
--- /dev/null
+++ b/components/Detail.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import { DetailedBook } from "../lib/books";
+
+export default function Detail(props: Props) {
+  return <p>{props.book.title}</p>;
+}
+
+interface Props {
+  book: DetailedBook;
+}
diff --git a/components/List.tsx b/components/List.tsx
new file mode 100644
index 0000000..cc66315
--- /dev/null
+++ b/components/List.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { SimpleBook } from "../lib/books";
+
+export default function List(props: Props) {
+  return (
+    <ul>
+      {props.books.map((book, idx) => {
+        return (
+          <li key={`${idx}_${book.id}`}>
+            {book.id}; {book.title}; {book.authors}; {book.isbn}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+interface Props {
+  books: SimpleBook[];
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index dcf23ac..126e9de 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,34 +1,5 @@
 import React from "react";
 
-import { getBook, getAllBooks, DetailedBook, SimpleBook } from "../lib/books";
-
-export default function Home(props: Props) {
-  return (
-    <div>
-      <ul>
-        {props.books.map((book, idx) => {
-          return (
-            <li key={`${idx}_${book.id}`}>
-              {book.id}; {book.title}; {book.authors}; {book.isbn}
-            </li>
-          );
-        })}
-      </ul>
-      <p>{props.book.title}</p>
-    </div>
-  );
-}
-
-interface Props {
-  book: DetailedBook;
-  books: SimpleBook[];
-}
-
-export async function getServerSideProps() {
-  return {
-    props: {
-      book: await getBook(44),
-      books: await getAllBooks(),
-    },
-  };
+export default function Home() {
+  return <div></div>;
 }
diff --git a/pages/playground.tsx b/pages/playground.tsx
new file mode 100644
index 0000000..543dcde
--- /dev/null
+++ b/pages/playground.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+import Detail from "../components/Detail";
+import List from "../components/List";
+import { DetailedBook, SimpleBook, getBook, getAllBooks } from "../lib/books";
+
+export default function Playground(props: Props) {
+  return (
+    <div>
+      <h1>Detail</h1>
+      <hr />
+      <Detail book={props.book} />
+      <h1>List</h1>
+      <hr />
+      <List books={props.books} />
+    </div>
+  );
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      book: await getBook(44),
+      books: await getAllBooks(),
+    },
+  };
+}
+
+interface Props {
+  book: DetailedBook;
+  books: SimpleBook[];
+}