diff --git a/apps/client/src/widgets/NoteDetail.tsx b/apps/client/src/widgets/NoteDetail.tsx
index c1a15a675..767d16b10 100644
--- a/apps/client/src/widgets/NoteDetail.tsx
+++ b/apps/client/src/widgets/NoteDetail.tsx
@@ -9,6 +9,7 @@ import { VNode } from "preact";
 import Doc from "./type_widgets/Doc";
 import { TypeWidgetProps } from "./type_widgets/type_widget";
 import ProtectedSession from "./type_widgets/ProtectedSession";
+import Book from "./type_widgets/Book";
 
 /**
  * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
@@ -60,6 +61,7 @@ function getCorrespondingWidget(noteType: ExtendedNoteType | undefined, props: T
         case "doc": return <Doc {...props} />
         case "search": return <div className="note-detail-none note-detail-printable" />
         case "protectedSession": return <ProtectedSession />
+        case "book": return <Book {...props} />
         default: break;
     }
 }
diff --git a/apps/client/src/widgets/type_widgets/Book.css b/apps/client/src/widgets/type_widgets/Book.css
new file mode 100644
index 000000000..63398390e
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Book.css
@@ -0,0 +1,4 @@
+.note-detail-book-empty-help {
+    margin: 50px;
+    padding: 20px;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/Book.tsx b/apps/client/src/widgets/type_widgets/Book.tsx
new file mode 100644
index 000000000..a591626ab
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/Book.tsx
@@ -0,0 +1,23 @@
+import { t } from "../../services/i18n";
+import Alert from "../react/Alert";
+import { useNoteLabel } from "../react/hooks";
+import RawHtml from "../react/RawHtml";
+import { TypeWidgetProps } from "./type_widget";
+import "./Book.css";
+
+const VIEW_TYPES = [ "list", "grid" ];
+
+export default function Book({ note }: TypeWidgetProps) {
+    const [ viewType ] = useNoteLabel(note, "viewType");
+    const shouldDisplayNoChildrenWarning = !note.hasChildren() && VIEW_TYPES.includes(viewType ?? "");
+
+    return (
+        <div className="note-detail-book note-detail-printable">
+            {(shouldDisplayNoChildrenWarning && (
+                <Alert type="warning" className="note-detail-book-empty-help">
+                    <RawHtml html={t("book.no_children_help")} />
+                </Alert>
+            ))}
+        </div>
+    )
+}
diff --git a/apps/client/src/widgets/type_widgets_old/book.ts b/apps/client/src/widgets/type_widgets_old/book.ts
deleted file mode 100644
index ba32fd3a6..000000000
--- a/apps/client/src/widgets/type_widgets_old/book.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-
-const TPL = /*html*/`
-<div class="note-detail-book note-detail-printable">
-    <style>
-    .note-detail-book-auto-help {
-        background-color: var(--accented-background-color);
-        text-align: center;
-        border-radius: 10px;
-        padding: 5px;
-        margin: 0 10px 10px 10px;
-    }
-    </style>
-
-    <div class="note-detail-book-empty-help alert alert-warning" style="margin: 50px; padding: 20px;">
-        ${t("book.no_children_help")}
-    </div>
-</div>`;
-
-export default class BookTypeWidget extends TypeWidget {
-
-    private $helpNoChildren!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "book";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$helpNoChildren = this.$widget.find(".note-detail-book-empty-help");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        this.$helpNoChildren.toggle(this.shouldDisplayNoChildrenWarning());
-    }
-
-    shouldDisplayNoChildrenWarning() {
-        if (this.note?.hasChildren()) {
-            return false;
-        }
-
-        switch (this.note?.getAttributeValue("label", "viewType")) {
-            case "list":
-            case "grid":
-                return true;
-            default:
-                return false;
-        }
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId && attr.name === "viewType")) {
-            this.refresh();
-        }
-    }
-
-}