diff --git a/src/Library/demos/Center Box/main.blp b/src/Library/demos/Center Box/main.blp
index de66a8cc8..245f6c3c4 100644
--- a/src/Library/demos/Center Box/main.blp	
+++ b/src/Library/demos/Center Box/main.blp	
@@ -3,15 +3,15 @@ using Adw 1;
 
 Adw.StatusPage {
   title: _("Center Box");
-  description: _("Displays three child widgets, while keeping the middle centered");
+  description: _("Displays three child widgets, while keeping the middle one centered");
 
   child: Box {
     spacing: 24;
     orientation: vertical;
 
     Adw.Clamp {
-    maximum-size: bind width_adjustment.value;
-    child: CenterBox {
+      maximum-size: bind width_adjustment.value;
+      child: CenterBox {
         shrink-center-last: true;
 
         [start]
@@ -39,7 +39,7 @@ Adw.StatusPage {
     }
 
     LinkButton {
-      label: "API Reference";
+      label: _("API Reference");
       uri: "https://docs.gtk.org/gtk4/class.CenterBox.html";
     }
   };
diff --git a/src/Library/demos/Toolbar View/main.blp b/src/Library/demos/Toolbar View/main.blp
new file mode 100644
index 000000000..f3f16eaee
--- /dev/null
+++ b/src/Library/demos/Toolbar View/main.blp	
@@ -0,0 +1,216 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.Window {
+  width-request: 360;
+  height-request: 640;
+  default-width: 640;
+  default-height: 640;
+
+  Adw.ToolbarView toolbar_view {
+    extend-content-to-bottom-edge: bind extend_bottom.active;
+    extend-content-to-top-edge: bind extend_top.active;
+    top-bar-style: bind barstyle_select.selected;
+    bottom-bar-style: bind barstyle_select.selected;
+    reveal-top-bars:  bind reveal_topbar.active;
+    reveal-bottom-bars: bind reveal_bottombar.active;
+    
+    // In this demo we are using the API to set the header bars
+    // you can use the [top] and [bottom] child types directly instead
+    // [top]
+    // Adw.HeaderBar {
+      // title-widget: Adw.WindowTitle {
+        // title: _("Header Bar");
+      // };
+    // }
+
+
+    content: Adw.ViewStack stack {
+      Adw.ViewStackPage page_defualt {
+        name: "page_default";
+        title: _("Toolbar View");
+        icon-name: "toolbars-symbolic";
+        child: Adw.StatusPage{
+          Box {
+            halign: center;
+            orientation: vertical;
+            spacing: 18;
+            Label {
+              label: _("Toolbar View");
+              styles ["title-1"]
+            }
+            Label {
+              wrap: true;
+              label: _("A widget containing a page, as well as top and/or bottom bars.");
+            }
+            LinkButton {
+              label: _("API Reference");
+              uri: "https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ToolbarView.html";
+            }
+            ListBox list_box {
+              styles ["boxed-list"]
+              selection-mode: none;
+              Adw.ComboRow topbar_select {
+                title: _("Top bar");
+                model: StringList {
+                  strings [_("Header Bar"),_("Tab Bar"),_("View Switcher Bar"),_("Action Bar"),_("PopOverMenu Bar"),_("Search Bar"),_("Gtk Box")]
+                };
+                selected: 0;
+              }
+              Adw.ComboRow bottombar_select {
+                title: _("Bottom bar");
+                model: StringList {
+                  strings [_("Header Bar"),_("Tab Bar"),_("View Switcher Bar"),_("Action Bar"),_("PopOverMenu Bar"),_("Search Bar"),_("Gtk Box")]
+                };
+                selected: 2;
+              }
+              Adw.ComboRow barstyle_select {
+                title: _("Style");
+                model: StringList {
+                  strings [_("Flat"), _("Raised"), _("Raised-Border")]
+                };
+              }
+              Adw.SwitchRow reveal_topbar {
+                title: _("Reveal Top Bar");
+                active: true;
+              }
+              Adw.SwitchRow reveal_bottombar {
+                title: _("Reveal Bottom Bar");
+                active: true;
+              }
+              Adw.SwitchRow extend_top {
+                title: _("Extend content behind top bar");
+                active: false;
+              }
+              Adw.SwitchRow extend_bottom {
+                title: _("Extend content behind bottom bar");
+                active: false;
+              }
+            }
+          }
+        };
+      }
+
+      Adw.ViewStackPage page1 {
+        name: "page1";
+        title: _("Page 1");
+        icon-name: "explore2-symbolic";
+        use-underline: true;
+        child: Adw.StatusPage{
+          title: _("Hello");
+          };
+        }
+
+      Adw.ViewStackPage page2 {
+        name: "page2";
+        title: _("Page 2");
+        icon-name: "explore2-symbolic";
+        use-underline: true;
+        child: Adw.StatusPage {
+          title: _("from");
+        };
+      }
+
+      Adw.ViewStackPage page3 {
+        name: "page3";
+        title: _("Page 3");
+        icon-name: "explore2-symbolic";
+        use-underline: true;
+        child: Adw.StatusPage {
+          title: _("Workbench");
+        };
+      }
+    };
+  }
+}
+
+Adw.HeaderBar header_bar {
+  title-widget: Adw.WindowTitle {
+    title: _("Header Bar");
+  };
+}
+
+ActionBar action_bar {
+  revealed: true;
+  valign: end;
+
+  [start]
+  Button start_widget {
+    icon-name: "call-start-symbolic";
+  }
+
+  [center]
+  DropDown {
+    model: StringList {
+      strings ["Center Widget","👁️", "❤️", "💼", "🪑"]
+    };
+  }
+
+  [end]
+  Button end_widget {
+    icon-name: "padlock2-symbolic";
+  }
+}
+
+Adw.ViewSwitcherBar switcher_bar {
+  stack: stack;
+  reveal: true;
+}
+
+PopoverMenuBar popover {
+  menu-model: menu_app;
+}
+
+menu menu_app {
+  section {
+    item {
+      label: _("Keyboard Shortcuts");
+      action: "app.shortcuts";
+    }
+
+    item {
+      label: _("About Workbench");
+      action: "app.about";
+    }
+  }
+}
+
+SearchBar search_bar {
+  search-mode-enabled: true;
+  show-close-button: true;
+  SearchEntry {
+    placeholder-text: _("Start Searching…");
+  }
+}
+
+Box gtk_box {
+  name: "gtk_box";
+  halign: fill;
+  height-request: 20;
+}
+
+Adw.TabBar tab_bar {
+  view: tab_view;
+}
+
+Adw.TabView tab_view {
+  Adw.TabPage main_tab_page {
+    title: _("First Page");
+    child: Adw.StatusPage {
+      hexpand: true;
+      vexpand: true;
+      title: _("Tab View");
+      description: _("A dynamic tabbed container");
+    };
+  }
+
+  Adw.TabPage main_tab_page2 {
+    title: _("Second Page");
+    child: Adw.StatusPage {
+      hexpand: true;
+      vexpand: true;
+      title: _("Tab View");
+      description: _("A dynamic tabbed container");
+    };
+  }
+}
diff --git a/src/Library/demos/Toolbar View/main.css b/src/Library/demos/Toolbar View/main.css
new file mode 100644
index 000000000..f6ede076c
--- /dev/null
+++ b/src/Library/demos/Toolbar View/main.css	
@@ -0,0 +1,4 @@
+#gtk_box {
+  background-color: purple;
+}
+
diff --git a/src/Library/demos/Toolbar View/main.js b/src/Library/demos/Toolbar View/main.js
new file mode 100644
index 000000000..5e13511d8
--- /dev/null
+++ b/src/Library/demos/Toolbar View/main.js	
@@ -0,0 +1,85 @@
+import Gio from "gi://Gio";
+import Gdk from "gi://Gdk";
+import GObject from "gi://GObject";
+import Gtk from "gi://Gtk";
+import Adw from "gi://Adw";
+
+const topbar_select = workbench.builder.get_object("topbar_select");
+const bottombar_select = workbench.builder.get_object("bottombar_select");
+const toolbar_view = workbench.builder.get_object("toolbar_view");
+
+let top_bar;
+let bottom_bar;
+
+function changeTopBar(name) {
+  const new_top_bar = workbench.builder.get_object(name);
+  top_bar && toolbar_view.remove(top_bar);
+  toolbar_view.add_top_bar(new_top_bar);
+  top_bar = new_top_bar;
+}
+
+function changeBottomBar(name) {
+  const new_bottom_bar = workbench.builder.get_object(name);
+  bottom_bar && toolbar_view.remove(bottom_bar);
+  toolbar_view.add_bottom_bar(new_bottom_bar);
+  bottom_bar = new_bottom_bar;
+}
+
+topbar_select.connect("notify::selected-item", selectTopBar);
+bottombar_select.connect("notify::selected-item", selectBottomBar);
+
+selectTopBar();
+selectBottomBar();
+
+function selectTopBar() {
+  switch (topbar_select.selected) {
+    case 0:
+      changeTopBar("header_bar");
+      break;
+    case 1:
+      changeTopBar("tab_bar");
+      break;
+    case 2:
+      changeTopBar("switcher_bar");
+      break;
+    case 3:
+      changeTopBar("action_bar");
+      break;
+    case 4:
+      changeTopBar("popover");
+      break;
+    case 5:
+      changeTopBar("search_bar");
+      break;
+    case 6:
+      changeTopBar("gtk_box");
+      break;
+  }
+}
+
+function selectBottomBar() {
+  switch (bottombar_select.selected) {
+    case 0:
+      changeBottomBar("header_bar");
+      break;
+    case 1:
+      changeBottomBar("tab_bar");
+      break;
+    case 2:
+      changeBottomBar("switcher_bar");
+      break;
+    case 3:
+      changeBottomBar("action_bar");
+      break;
+    case 4:
+      changeBottomBar("popover");
+      break;
+    case 5:
+      changeBottomBar("search_bar");
+      break;
+    case 6:
+      changeBottomBar("gtk_box");
+      break;
+  }
+}
+
diff --git a/src/Library/demos/Toolbar View/main.json b/src/Library/demos/Toolbar View/main.json
new file mode 100644
index 000000000..02f7913cf
--- /dev/null
+++ b/src/Library/demos/Toolbar View/main.json	
@@ -0,0 +1,6 @@
+{
+  "category": "layout",
+  "description": "A widget containing a page, as well as top and/or bottom bars.",
+  "panels": ["ui", "preview"],
+  "autorun": true
+}