diff --git a/src/public/javascripts/widgets/type_widgets/book.js b/src/public/javascripts/widgets/type_widgets/book.js
index f2ff9301b..83130939d 100644
--- a/src/public/javascripts/widgets/type_widgets/book.js
+++ b/src/public/javascripts/widgets/type_widgets/book.js
@@ -259,8 +259,8 @@ export default class BookTypeWidget extends TypeWidget {
                 const label = `${childCount} child${childCount > 1 ? 'ren' : ''}`;
 
                 $card.append($('<div class="note-book-children">')
-                    .append($(`<a class="note-book-open-children-button" href="javascript:">+ Show ${label}</a>`))
-                    .append($(`<a class="note-book-hide-children-button" href="javascript:">- Hide ${label}</a>`).hide())
+                    .append($(`<a class="note-book-open-children-button no-print" href="javascript:">+ Show ${label}</a>`))
+                    .append($(`<a class="note-book-hide-children-button no-print" href="javascript:">- Hide ${label}</a>`).hide())
                     .append($('<div class="note-book-children-content">'))
                 );
             }
diff --git a/src/public/stylesheets/detail.css b/src/public/stylesheets/detail.css
new file mode 100644
index 000000000..c441c231c
--- /dev/null
+++ b/src/public/stylesheets/detail.css
@@ -0,0 +1,61 @@
+.note-detail-book {
+    height: 100%;
+}
+
+.note-detail-book-content {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+    height: 100%;
+    align-content: start;
+}
+
+.note-book-card {
+    border-radius: 10px;
+    background-color: var(--accented-background-color);
+    padding: 15px;
+    padding-bottom: 5px;
+    margin: 5px;
+    margin-left: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+}
+
+.note-book-card .note-book-card {
+    border: 1px solid var(--main-border-color);
+}
+
+.note-book-content {
+    overflow: hidden;
+}
+
+.note-book-card.type-image .note-book-content, .note-book-card.type-file .note-book-content, .note-book-card.type-protected-session .note-book-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.note-book-card.type-image .note-book-content img, .note-book-card.type-text .note-book-content img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.note-book-title {
+    flex-grow: 0;
+}
+
+.note-book-content {
+    flex-grow: 1;
+}
+
+.note-book-auto-message {
+    background-color: var(--accented-background-color);
+    text-align: center;
+    width: 100%;
+    border-radius: 10px;
+    padding: 5px;
+    margin-top: 5px;
+}
\ No newline at end of file
diff --git a/src/public/stylesheets/print.css b/src/public/stylesheets/print.css
new file mode 100644
index 000000000..6abc23c8d
--- /dev/null
+++ b/src/public/stylesheets/print.css
@@ -0,0 +1,7 @@
+@media print
+{
+    .no-print, .no-print *
+    {
+        display: none !important;
+    }
+}
\ No newline at end of file
diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs
index 07aba8c16..842cd608c 100644
--- a/src/views/desktop.ejs
+++ b/src/views/desktop.ejs
@@ -74,6 +74,7 @@
 
 <link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
+<link href="stylesheets/detail.css" rel="stylesheet">
 
 <script src="javascripts/desktop.js" crossorigin type="module"></script>
 
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index 00d52ab35..33cbca278 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -42,6 +42,7 @@
 
 <link href="stylesheets/themes.css" rel="stylesheet">
 <link href="stylesheets/style.css" rel="stylesheet">
+<link href="stylesheets/detail.css" rel="stylesheet">
 
 <link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">