diff --git a/build.zig.zon b/build.zig.zon
index 1ea907e..68a0737 100644
--- a/build.zig.zon
+++ b/build.zig.zon
@@ -6,8 +6,8 @@
     .minimum_zig_version = "0.16.0-dev.463+f624191f9",
     .dependencies = .{
         .zterm = .{
-            .url = "git+https://gitea.yves-biener.de/yves-biener/zterm#c645c2efee5ff57fa6fb2b9f9155cf21723bf085",
-            .hash = "zterm-0.3.0-1xmmEMbzGwD3MiXzgXWwnTEFIjvtWTcQrBLqYS5O00ee",
+            .url = "git+https://gitea.yves-biener.de/yves-biener/zterm#7cd1fb139fbf45a3d99f8359dda0d198a283249a",
+            .hash = "zterm-0.3.0-1xmmEPf4GwA0W_Aj0yFGfg4efODoLB3y72LAprcAJwwe",
         },
         .zlog = .{
             .url = "git+https://gitea.yves-biener.de/yves-biener/zlog#411a6dc358a3ef463ab704e2f6b887a019a5decf",
diff --git a/src/content.zig b/src/content.zig
index c524487..ce678bc 100644
--- a/src/content.zig
+++ b/src/content.zig
@@ -1,27 +1,62 @@
 pub fn Content(App: type) type {
     return struct {
+        page: App.Model.Pages,
+
         pub fn init(allocator: Allocator) @This() {
             _ = allocator;
-            return .{};
+            return .{
+                .page = .blog,
+            };
+        }
+
+        pub fn deinit(this: *@This()) void {
+            this.container.deinit();
         }
 
         pub fn element(this: *@This()) App.Element {
             return .{
                 .ptr = this,
                 .vtable = &.{
+                    .minSize = minSize,
                     .handle = handle,
                     .content = content,
                 },
             };
         }
 
+        fn minSize(ctx: *anyopaque, size: zterm.Point) zterm.Point {
+            const this: *const @This() = @ptrCast(@alignCast(ctx));
+            const text = switch (this.page) {
+                .about => @embedFile("about"),
+                .blog => @embedFile("blog"),
+            };
+            var index: usize = 0;
+            var new_size: zterm.Point = .{ .x = size.x };
+
+            for (0..text.len) |_| rows: {
+                for (0..size.x) |_| {
+                    if (index == text.len) break :rows;
+                    const cp = text[index];
+                    index += 1;
+
+                    switch (cp) {
+                        '\n' => break,
+                        else => {},
+                    }
+                }
+                new_size.y += 1;
+            }
+            return new_size;
+        }
+
         fn handle(ctx: *anyopaque, model: *App.Model, event: App.Event) !void {
-            _ = ctx;
+            const this: *@This() = @ptrCast(@alignCast(ctx));
             switch (event) {
                 .about => model.page = .about,
                 .blog => model.page = .blog,
                 else => {},
             }
+            this.page = model.page;
         }
 
         fn content(ctx: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
@@ -37,7 +72,6 @@ pub fn Content(App: type) type {
             for (0..size.y) |row| {
                 for (0..size.x) |col| {
                     const cell = row * size.x + col;
-                    assert(cell < cells.len);
 
                     if (index == text.len) return;
                     const cp = text[index];
diff --git a/src/main.zig b/src/main.zig
index 8b31824..4400d16 100644
--- a/src/main.zig
+++ b/src/main.zig
@@ -59,13 +59,16 @@ pub fn main() !void {
     }
     // main actual tui_website page content
     {
-        // intermediate container for *padding*
         var content: Content = .init(allocator);
-        var content_container: App.Container = try .init(allocator, .{
+        const content_container: App.Container = try .init(allocator, .{}, content.element());
+
+        var scrollable: App.Scrollable = .init(content_container, .enabled(.green));
+        // intermediate container for *padding* containing the scrollable `Content`
+        var scrollable_container: App.Container = try .init(allocator, .{
             .layout = .{ .padding = .horizontal(2) },
         }, .{});
-        try content_container.append(try .init(allocator, .{}, content.element()));
-        try container.append(content_container);
+        try scrollable_container.append(try .init(allocator, .{}, scrollable.element()));
+        try container.append(scrollable_container);
     }
     // footer
     {
diff --git a/src/model.zig b/src/model.zig
index 23608a0..b36ca80 100644
--- a/src/model.zig
+++ b/src/model.zig
@@ -1,6 +1,6 @@
 page: Pages = .blog,
 
-const Pages = enum {
+pub const Pages = enum {
     about,
     blog,
 };