diff --git a/internal/components/book/book.go b/internal/components/book/book.go
new file mode 100644
index 0000000..4941510
--- /dev/null
+++ b/internal/components/book/book.go
@@ -0,0 +1,8 @@
+package book
+
+type BookParams struct {
+	Yes24Id     string
+	Title       string
+	Author      string
+	Description string
+}
diff --git a/internal/components/book/book.templ b/internal/components/book/book.templ
new file mode 100644
index 0000000..90353f3
--- /dev/null
+++ b/internal/components/book/book.templ
@@ -0,0 +1,34 @@
+package book
+
+import "fmt"
+
+templ Book(params BookParams) {
+	<style>
+        .hide {
+            display: none;
+        }
+        .book:hover + .hide {
+            display: block;
+        }
+    </style>
+	<div class="relative inline-block">
+		<img
+			alt={ fmt.Sprintf("%s's spine", params.Title) }
+			src={ templ.SafeURL(fmt.Sprintf("https://image.yes24.com/goods/%s/SIDE/XL", params.Yes24Id)) }
+			class="book w-6"
+		/>
+		<div class="hide absolute top-10 left-5 border bg-white z-10">
+			<div class="flex gap-2 w-96">
+				<div class="w-3/4">
+					<h2>{ params.Title }</h2>
+					<h4>By { params.Author }</h4>
+					<p>{ params.Description }</p>
+				</div>
+				<img
+					class="w-1/4 h-fit"
+					src={ templ.SafeURL(fmt.Sprintf("https://image.yes24.com/goods/%s/XL", params.Yes24Id)) }
+				/>
+			</div>
+		</div>
+	</div>
+}
diff --git a/internal/components/header/header.go b/internal/components/header/header.go
index d0455e1..4a8e463 100644
--- a/internal/components/header/header.go
+++ b/internal/components/header/header.go
@@ -1,4 +1,4 @@
-package components
+package header
 
 import "shlf.space/internal/server/oauth"
 
diff --git a/internal/components/header/header.templ b/internal/components/header/header.templ
index 2b13bf1..a3655d9 100644
--- a/internal/components/header/header.templ
+++ b/internal/components/header/header.templ
@@ -1,4 +1,4 @@
-package components
+package header
 
 import "fmt"
 
@@ -36,7 +36,7 @@ templ Header(params HeaderParams) {
 						<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
 							<button
 								type="button"
-								onclick="localStorage.setItem('shlf-language', 'ko');"
+								@click="localStorage.setItem('shlf-language', 'ko');"
 								hx-swap="none"
 								class="button border-none text-sm w-full"
 							>
diff --git a/internal/server/my-books.go b/internal/server/my-books.go
new file mode 100644
index 0000000..ba8314c
--- /dev/null
+++ b/internal/server/my-books.go
@@ -0,0 +1,15 @@
+package server
+
+import (
+	"net/http"
+
+	mybooks "shlf.space/internal/views/my-books"
+)
+
+func (s *Server) MyBooks(w http.ResponseWriter, r *http.Request) {
+	user := s.oauth.GetAccountUser(r)
+
+	mybooks.MyBooksPage(mybooks.MyBooksParams{
+		User: user,
+	}).Render(r.Context(), w)
+}
diff --git a/internal/server/router.go b/internal/server/router.go
index 016f58d..060e72e 100644
--- a/internal/server/router.go
+++ b/internal/server/router.go
@@ -72,6 +72,7 @@ func (s *Server) UserRouter(middleware *middleware.Middleware) http.Handler {
 	router := chi.NewRouter()
 
 	router.With(middleware.ResolveIdent()).Route("/{user}", func(r chi.Router) {
+		r.Get("/books", s.MyBooks)
 	})
 
 	router.NotFound(func(w http.ResponseWriter, r *http.Request) {
diff --git a/internal/views/index/index.templ b/internal/views/index/index.templ
index 2012fa2..11e3e79 100644
--- a/internal/views/index/index.templ
+++ b/internal/views/index/index.templ
@@ -5,7 +5,7 @@ import "shlf.space/internal/components/header"
 
 templ IndexPage(params IndexPageParams) {
 	@layouts.Base(layouts.BaseParams{Title: "home"}) {
-		@components.Header(components.HeaderParams{User: params.User})
+		@header.Header(header.HeaderParams{User: params.User})
 		<div></div>
 	}
 }
diff --git a/internal/views/my-books/my-books.go b/internal/views/my-books/my-books.go
new file mode 100644
index 0000000..564bfa8
--- /dev/null
+++ b/internal/views/my-books/my-books.go
@@ -0,0 +1,7 @@
+package mybooks
+
+import "shlf.space/internal/server/oauth"
+
+type MyBooksParams struct {
+	User *oauth.AccountUser
+}
diff --git a/internal/views/my-books/my-books.templ b/internal/views/my-books/my-books.templ
new file mode 100644
index 0000000..e424c3d
--- /dev/null
+++ b/internal/views/my-books/my-books.templ
@@ -0,0 +1,43 @@
+package mybooks
+
+import (
+	"fmt"
+	"shlf.space/internal/components/book"
+	"shlf.space/internal/components/header"
+	"shlf.space/internal/layouts/base"
+)
+
+templ MyBooksPage(params MyBooksParams) {
+	<style>
+        .add-book {
+            writing-mode: vertical-rl;
+            text-orientation: upright;
+        }
+    </style>
+	@layouts.Base(layouts.BaseParams{Title: fmt.Sprintf("%s's books", params.User.Account.Handle)}) {
+		@header.Header(header.HeaderParams{User: params.User})
+		<div class="container">
+			<div id="book-row-1" class="flex items-end">
+				@book.Book(book.BookParams{
+					Yes24Id:     "124807552",
+					Title:       "메멘과 모리",
+					Author:      "요시타케 신스케",
+					Description: "‘사람은 무엇을 위해 살아가는가?’, ‘살아가는 의미와 목적이 필요한가?’에 대한 정답 없는 고민으로 괴로운 당신에게 요시타케 신스케가 전하는 세 가지 이야기. ",
+				})
+				@book.Book(book.BookParams{
+					Yes24Id:     "58552371",
+					Title:       "세계를 건너 너에게 갈게",
+					Author:      "이꽃님",
+					Description: "“나에게. 아빠가 쓰라고 해서 쓰는 거야.” 첫 문장으로 시작한 편지가 “세계를 건너 너에게 갈게.”라는 마지막 문장에 닿기까지, 두 사람의 진심이 하나의 진실을 향해 가는 동안 쌓아올린 감동은 많은 독자들에게 울음을 울게 만들었다.",
+				})
+				<a
+					href="/browse"
+					class="flex flex-col items-center justify-between gap-10 py-2 border border-dashed"
+				>
+					<i class="w-4 h-4" data-lucide="plus"></i>
+					<span class="uppercase text-sm add-book">add book</span>
+				</a>
+			</div>
+		</div>
+	}
+}