diff --git a/book/src/todo_4.md b/book/src/todo_4.md
index 55d97e7c6fc8..99d8f2d5f881 100644
--- a/book/src/todo_4.md
+++ b/book/src/todo_4.md
@@ -11,9 +11,9 @@ We will start by adding an empty sidebar without any functionality.
 
 There are a couple of steps we have to go through to get to this state.
 First, we have to replace [`gtk::ApplicationWindow`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.ApplicationWindow.html) with [`adw::ApplicationWindow`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.ApplicationWindow.html).
-The only difference between those two is that `adw::ApplicationWindow` has no titlebar area.
-That comes in handy when we build up our interface with [`adw::Leaflet`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.Leaflet.html).
-In the screenshot above, the `Leaflet` behaves like a [`gtk::Box`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.Box.html) and contains the collection view on the left, a separator in the middle and the task view on the right.
+The main difference between those two is that `adw::ApplicationWindow` has no titlebar area.
+That comes in handy when we build up our interface with [`adw::NavigationSplitView`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.NavigationSplitView.html).
+In the screenshot above, the `NavigationSplitView` adds a sidebar for the collection view to the left, while the task view occupies the space on the right.
 When using `adw::ApplicationWindow` the collection view and task view have their own [`adw::HeaderBar`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.HeaderBar.html) and the separator spans over the whole window.
 
 
@@ -56,12 +56,10 @@ Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master
 ```
 
 
-The `Leaflet` does not always behave like a `gtk::Box`.
-As soon as the requested size is too small to fit all children at the same time, the leaflet folds, and starts behaving like a [`gtk::Stack`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.Stack.html).
+`NavigationSplitView` also helps with making your app [adaptive](https://developer.gnome.org/hig/guidelines/adaptive.html)/
+As soon as the requested size is too small to fit all children at the same time, the splitview collapses, and starts behaving like a [`gtk::Stack`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.Stack.html).
 This means that it only displays one of its children at a time.
-The property "can-navigate-back" controls whether gestures and shortcuts for navigating backward are enabled.
-The `AdwLeafletPage` with the `gtk::Separator` will never be displayed in the folded state since its property "navigatable" is set to `False`.
-The adaptive behavior of the leaflet allows the To-Do app to work on smaller screen sizes even with the added collection view.
+The adaptive behavior of the leaflet allows the To-Do app to work on smaller screen sizes (like e.g. phones) even with the added collection view.
 
 
 <div style="text-align:center">
@@ -73,85 +71,99 @@ The adaptive behavior of the leaflet allows the To-Do app to work on smaller scr
 
 
 We add the necessary UI elements for the collection view, such as a header bar with a button to add a new collection, as well as the list box `collections_list` to display the collections later on.
-
-As you can see in the screencast above, the header bar also displays a close button if the leaflet is folded.
-We include this logic with an expression which can be built up in the UI file with the tag [`lookup`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.Expression.html#gtkexpression-in-ui-files).
+We also add the style [navigations-sidebar](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#sidebars) to `collections_list`.
 
 
 Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/7/resources/window.ui">listings/todo/7/resources/window.ui</a>
 
 ```xml
-<object class="GtkBox">
-  <property name="orientation">vertical</property>
-  <property name="width-request">200</property>
-  <child>
-    <object class="AdwHeaderBar">
-      <binding name="show-end-title-buttons">
-        <lookup name="folded">leaflet</lookup>
-      </binding>
-      <child type="start">
-        <object class="GtkToggleButton">
-          <property name="icon-name">list-add-symbolic</property>
-          <property name="tooltip-text" translatable="yes">New Collection</property>
-          <property name="action-name">win.new-collection</property>
+<object class="AdwNavigationPage">
+  <property name="title" bind-source="TodoWindow"
+    bind-property="title" bind-flags="sync-create" />
+  <property name="child">
+    <object class="AdwToolbarView">
+      <child type="top">
+        <object class="AdwHeaderBar">
+          <child type="start">
+            <object class="GtkToggleButton">
+              <property name="icon-name">list-add-symbolic</property>
+              <property name="tooltip-text" translatable="yes">New Collection</property>
+              <property name="action-name">win.new-collection</property>
+            </object>
+          </child>
         </object>
       </child>
-    </object>
-  </child>
-  <child>
-    <object class="GtkScrolledWindow">
-      <property name="vexpand">True</property>
-      <property name="child">
-        <object class="GtkListBox" id="collections_list">
-          <style>
-            <class name="navigation-sidebar" />
-          </style>
+      <property name="content">
+        <object class="GtkScrolledWindow">
+          <property name="child">
+            <object class="GtkListBox" id="collections_list">
+              <style>
+                <class name="navigation-sidebar" />
+              </style>
+            </object>
+          </property>
         </object>
       </property>
     </object>
-  </child>
-</object>
 ```
 
 We also add a header bar to the task view.
-We don't have to worry about the close button here: it will always be displayed.
-However, we will need a way to go back to the collection view when the leaflet is folded.
-That is why we add `back_button` which can be used to return to the collection view and which is only visible when the leaflet is folded. 
 
 
 Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/7/resources/window.ui">listings/todo/7/resources/window.ui</a>
 
 ```xml
-<object class="GtkBox">
-  <property name="orientation">vertical</property>
-  <property name="hexpand">True</property>
-  <property name="width-request">250</property> 
-  <child>
-    <object class="AdwHeaderBar">
-      <property name="title-widget">
-        <object class="AdwWindowTitle" />
-      </property>
-      <child type="start">
-        <object class="GtkButton" id="back_button">
-          <binding name="visible">
-            <lookup name="folded">leaflet</lookup>
-          </binding>
-          <property name="icon-name">go-previous-symbolic</property>
-          <property name="tooltip-text" translatable="yes">Back</property>
+<object class="AdwNavigationPage">
+  <property name="title" translatable="yes">Tasks</property>
+  <property name="child">
+    <object class="AdwToolbarView">
+      <child type="top">
+        <object class="AdwHeaderBar">
+          <property name="show-title">False</property>
+          <child type="end">
+            <object class="GtkMenuButton">
+              <property name="icon-name">open-menu-symbolic</property>
+              <property name="menu-model">main-menu</property>
+              <property name="tooltip-text" translatable="yes">Main Menu</property>
+            </object>
+          </child>
         </object>
       </child>
-      <child type="end">
-        <object class="GtkMenuButton">
-          <property name="icon-name">open-menu-symbolic</property>
-          <property name="menu-model">main-menu</property>
-          <property name="tooltip-text" translatable="yes">Main Menu</property>
+      <property name="content">
+        <object class="GtkScrolledWindow">
+          <property name="child">
+            <object class="AdwClamp">
+              <property name="maximum-size">400</property>
+              <property name="tightening-threshold">300</property>
+              <property name="child">
+                <object class="GtkBox">
+                  <property name="orientation">vertical</property>
+                  <property name="margin-start">12</property>
+                  <property name="margin-end">12</property>
+                  <property name="spacing">12</property>
+                  <child>
+                    <object class="GtkEntry" id="entry">
+                      <property name="placeholder-text" translatable="yes">Enter a Task…</property>
+                      <property name="secondary-icon-name">list-add-symbolic</property>
+                    </object>
+                  </child>
+                  <child>
+                    <object class="GtkListBox" id="tasks_list">
+                      <property name="visible">False</property>
+                      <property name="selection-mode">none</property>
+                      <style>
+                        <class name="boxed-list" />
+                      </style>
+                    </object>
+                  </child>
+                </object>
+              </property>
+            </object>
+          </property>
         </object>
-      </child>
+      </property>
     </object>
-  </child>
-  <child>
-    <!--This part stays the same-->
-  </child>
+  </property>
 </object>
 ```
 
@@ -207,14 +219,20 @@ Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master
   </menu>
   <template class="TodoWindow" parent="AdwApplicationWindow">
     <property name="title" translatable="yes">To-Do</property>
-    <property name="default_width">650</property>
-    <property name="default_height">550</property>
+    <property name="width-request">360</property>
+    <property name="height-request">200</property>
+    <child>
+      <object class="AdwBreakpoint">
+        <condition>max-width: 500sp</condition>
+        <setter object="split_view" property="collapsed">True</setter>
+      </object>
+    </child>
     <property name="content">
       <object class="GtkStack" id="stack">
         <property name="transition-type">crossfade</property>
         <child>
           <object class="GtkStackPage">
-            <property name="name">empty</property>
+            <property name="name">placeholder</property>
             <property name="child">
               <object class="GtkBox">
                 <!--Placeholder page implementation--> 
@@ -226,7 +244,7 @@ Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master
           <object class="GtkStackPage">
             <property name="name">main</property>
             <property name="child">
-              <object class="AdwLeaflet" id="leaflet">
+              <object class="AdwNavigationSplitView" id="split_view">
                 <!--Main page implementation-->
               </object>
             </property>
@@ -413,11 +431,10 @@ Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master
 ```
 
 
-## Leaflet and Dialog
+## Message Dialog
 
-Thanks to the leaflet the To-Do app folds now when we resize it to a smaller width.
-However, there isn't yet a way to navigate between the different leaflet pages.
-Let us start with the most important one: adding a new collection.
+There isn't yet a way to add a collection.
+Let's implement that functionality.
 
 <div style="text-align:center">
  <video autoplay muted loop>
@@ -463,10 +480,7 @@ We also add more callbacks to `setup_callbacks`.
 Importantly, we want to filter our current task model whenever the value of the "filter" setting changes.
 Whenever the items of our collections change we also want to set the stack.
 This makes sure that our placeholder page is shown if there are no collections.
-When we click on an item of `collections_list`, `current_collection` should be set to the selected collection and we should then navigate to the task view.
-That is setup in `collections_list.connect_row_activated`, but we also need to setup `leaflet.connect_folded_notify` to make sure that no selection of `collections_list` items is happening in folded mode so that it just directly moves to the task view.
-Finally, we connect to a click of the `back_button` in the task view so that we can return to the collections view again in folded mode.
-
+Finally, we assure that when we click on a row of `collections_list`, `current_collection` is set to the selected collection and the split view shows the task view.
 
 Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/8/window/imp.rs">listings/todo/8/window/mod.rs</a>
 
diff --git a/book/src/vid/todo_8_adaptive_sidebar.webm b/book/src/vid/todo_8_adaptive_sidebar.webm
index fad93154a504..f4c7cf7c040f 100644
Binary files a/book/src/vid/todo_8_adaptive_sidebar.webm and b/book/src/vid/todo_8_adaptive_sidebar.webm differ
diff --git a/book/src/vid/todo_8_dialog.webm b/book/src/vid/todo_8_dialog.webm
index 85c9757035ee..887d9b066862 100644
Binary files a/book/src/vid/todo_8_dialog.webm and b/book/src/vid/todo_8_dialog.webm differ