diff --git a/examples/hello.rs b/examples/hello.rs
index 9ba12d2..ed643cd 100644
--- a/examples/hello.rs
+++ b/examples/hello.rs
@@ -1,13 +1,13 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
 
-use std::cell::RefCell;
-use std::rc::Rc;
-
 use eframe::{egui, NativeOptions};
-use egui::color_picker::{color_picker_color32, Alpha};
-use egui::{Color32, RichText, Slider};
+use egui::{
+    color_picker::{color_picker_color32, Alpha},
+    style::Margin,
+    Frame, Id, LayerId, ScrollArea, Slider, Ui, WidgetText,
+};
 
-use egui_dock::{DockArea, DynamicTree, NodeIndex, Style, TabBuilder};
+use egui_dock::{DockArea, NodeIndex, Style, TabViewer, Tree};
 
 fn main() {
     let options = NativeOptions::default();
@@ -18,171 +18,170 @@ fn main() {
     );
 }
 
-#[derive(Clone)]
 struct MyContext {
     pub title: String,
     pub age: u32,
+    pub style: Option<Style>,
 }
 
 struct MyApp {
-    _context: Rc<RefCell<MyContext>>,
-    style: Rc<RefCell<Style>>,
-    tree: DynamicTree,
+    context: MyContext,
+    tree: Tree<String>,
+}
+
+impl TabViewer for MyContext {
+    type Tab = String;
+
+    fn ui(&mut self, ui: &mut Ui, tab: &mut Self::Tab) {
+        ScrollArea::both()
+            .id_source(tab.to_owned() + " - egui_dock::Tab")
+            .show(ui, |ui| {
+                Frame::none()
+                    .inner_margin(Margin::same(4.0))
+                    .show(ui, |ui| match tab.as_str() {
+                        "Simple Demo" => self.simple_demo(ui),
+                        "Style Editor" => self.style_editor(ui),
+                        _ => {
+                            ui.label(tab.as_str());
+                        }
+                    })
+            });
+    }
+
+    fn title(&mut self, tab: &mut Self::Tab) -> WidgetText {
+        tab.as_str().into()
+    }
+}
+
+impl MyContext {
+    fn simple_demo(&mut self, ui: &mut Ui) {
+        ui.heading("My egui Application");
+
+        ui.horizontal(|ui| {
+            ui.label("Your name: ");
+            ui.text_edit_singleline(&mut self.title);
+        });
+        ui.add(Slider::new(&mut self.age, 0..=120).text("age"));
+        if ui.button("Click each year").clicked() {
+            self.age += 1;
+        }
+        ui.label(format!("Hello '{}', age {}", &self.title, &self.age));
+    }
+
+    fn style_editor(&mut self, ui: &mut Ui) {
+        ui.heading("Style Editor");
+
+        let style = self.style.as_mut().unwrap();
+
+        ui.collapsing("Border", |ui| {
+            ui.separator();
+
+            ui.label("Width");
+            ui.add(Slider::new(&mut style.border_width, 1.0..=50.0));
+
+            ui.separator();
+
+            ui.label("Color");
+            color_picker_color32(ui, &mut style.border_color, Alpha::OnlyBlend);
+        });
+
+        ui.collapsing("Selection", |ui| {
+            ui.separator();
+
+            ui.label("Color");
+            color_picker_color32(ui, &mut style.selection_color, Alpha::OnlyBlend);
+        });
+
+        ui.collapsing("Separator", |ui| {
+            ui.separator();
+
+            ui.label("Width");
+            ui.add(Slider::new(&mut style.separator_width, 1.0..=50.0));
+
+            ui.label("Offset limit");
+            ui.add(Slider::new(&mut style.separator_extra, 1.0..=300.0));
+
+            ui.separator();
+
+            ui.label("Color");
+            color_picker_color32(ui, &mut style.separator_color, Alpha::OnlyBlend);
+        });
+
+        ui.collapsing("Tab", |ui| {
+            ui.separator();
+
+            ui.label("Rounding");
+            ui.horizontal(|ui| {
+                ui.add(Slider::new(&mut style.tab_rounding.nw, 0.0..=15.0));
+                ui.label("North-West");
+            });
+            ui.horizontal(|ui| {
+                ui.add(Slider::new(&mut style.tab_rounding.ne, 0.0..=15.0));
+                ui.label("North-East");
+            });
+            ui.horizontal(|ui| {
+                ui.add(Slider::new(&mut style.tab_rounding.sw, 0.0..=15.0));
+                ui.label("South-West");
+            });
+            ui.horizontal(|ui| {
+                ui.add(Slider::new(&mut style.tab_rounding.se, 0.0..=15.0));
+                ui.label("South-East");
+            });
+
+            ui.separator();
+
+            ui.label("Bar background color");
+            color_picker_color32(ui, &mut style.tab_bar_background_color, Alpha::OnlyBlend);
+
+            ui.separator();
+
+            ui.label("Outline color");
+            color_picker_color32(ui, &mut style.tab_outline_color, Alpha::OnlyBlend);
+
+            ui.separator();
+
+            ui.label("Background color");
+            color_picker_color32(ui, &mut style.tab_background_color, Alpha::OnlyBlend);
+        });
+    }
 }
 
 impl Default for MyApp {
     fn default() -> Self {
-        let context = Rc::new(RefCell::new(MyContext {
+        let context = MyContext {
             title: "Hello".to_string(),
             age: 24,
-        }));
-        let style = Rc::new(RefCell::new(Style::default()));
+            style: None,
+        };
 
-        let mt_ctx = context.clone();
-        let node_tree = TabBuilder::default()
-            .title(RichText::new("Simple Demo").color(Color32::BLUE))
-            .content(move |ui| {
-                let mut ctx = mt_ctx.borrow_mut();
-                ui.heading("My egui Application");
-                ui.horizontal(|ui| {
-                    ui.label("Your name: ");
-                    ui.text_edit_singleline(&mut ctx.title);
-                });
-                ui.add(Slider::new(&mut ctx.age, 0..=120).text("age"));
-                if ui.button("Click each year").clicked() {
-                    ctx.age += 1;
-                }
-                ui.label(format!("Hello '{}', age {}", &ctx.title, &ctx.age));
-            })
-            .build();
+        let mut tree = Tree::new(vec!["Simple Demo".to_owned(), "Style Editor".to_owned()]);
+        let [a, b] = tree.split_left(NodeIndex::root(), 0.3, vec!["Inspector".to_owned()]);
+        let [_, _] = tree.split_below(
+            a,
+            0.7,
+            vec!["File Browser".to_owned(), "Asset Manager".to_owned()],
+        );
+        let [_, _] = tree.split_below(b, 0.5, vec!["Hierarchy".to_owned()]);
 
-        let style_clone = style.clone();
-        let style_editor = TabBuilder::default()
-            .title("Style Editor")
-            .content(move |ui| {
-                let mut style = style_clone.borrow_mut();
-                ui.heading("Style Editor");
-
-                ui.collapsing("Border", |ui| {
-                    ui.separator();
-
-                    ui.label("Width");
-                    ui.add(Slider::new(&mut style.border_width, 1.0..=50.0));
-
-                    ui.separator();
-
-                    ui.label("Color");
-                    color_picker_color32(ui, &mut style.border_color, Alpha::OnlyBlend);
-                });
-
-                ui.collapsing("Selection", |ui| {
-                    ui.separator();
-
-                    ui.label("Color");
-                    color_picker_color32(ui, &mut style.selection_color, Alpha::OnlyBlend);
-                });
-
-                ui.collapsing("Separator", |ui| {
-                    ui.separator();
-
-                    ui.label("Width");
-                    ui.add(Slider::new(&mut style.separator_width, 1.0..=50.0));
-
-                    ui.label("Offset limit");
-                    ui.add(Slider::new(&mut style.separator_extra, 1.0..=300.0));
-
-                    ui.separator();
-
-                    ui.label("Color");
-                    color_picker_color32(ui, &mut style.separator_color, Alpha::OnlyBlend);
-                });
-
-                ui.collapsing("Tab", |ui| {
-                    ui.separator();
-
-                    ui.label("Rounding");
-                    ui.horizontal(|ui| {
-                        ui.add(Slider::new(&mut style.tab_rounding.nw, 0.0..=15.0));
-                        ui.label("North-West");
-                    });
-                    ui.horizontal(|ui| {
-                        ui.add(Slider::new(&mut style.tab_rounding.ne, 0.0..=15.0));
-                        ui.label("North-East");
-                    });
-                    ui.horizontal(|ui| {
-                        ui.add(Slider::new(&mut style.tab_rounding.sw, 0.0..=15.0));
-                        ui.label("South-West");
-                    });
-                    ui.horizontal(|ui| {
-                        ui.add(Slider::new(&mut style.tab_rounding.se, 0.0..=15.0));
-                        ui.label("South-East");
-                    });
-
-                    ui.separator();
-
-                    ui.label("Bar background color");
-                    color_picker_color32(ui, &mut style.tab_bar_background_color, Alpha::OnlyBlend);
-
-                    ui.separator();
-
-                    ui.label("Outline color");
-                    color_picker_color32(ui, &mut style.tab_outline_color, Alpha::OnlyBlend);
-
-                    ui.separator();
-
-                    ui.label("Background color");
-                    color_picker_color32(ui, &mut style.tab_background_color, Alpha::OnlyBlend);
-                });
-            })
-            .build();
-
-        let hierarchy = TabBuilder::default()
-            .title("Hierarchy")
-            .content(|ui| {
-                ui.label("Hierarchy");
-            })
-            .build();
-
-        let inspector = TabBuilder::default()
-            .title("Inspector")
-            .content(|ui| {
-                ui.label("Inspector");
-            })
-            .build();
-
-        let files = TabBuilder::default()
-            .title("File Browser")
-            .content(|ui| {
-                ui.label("File Browser");
-            })
-            .build();
-
-        let assets = TabBuilder::default()
-            .title("Asset Manager")
-            .content(|ui| {
-                ui.label("Asset Manager");
-            })
-            .build();
-
-        let mut tree = DynamicTree::new(vec![node_tree, style_editor]);
-
-        let [a, b] = tree.split_left(NodeIndex::root(), 0.3, vec![inspector]);
-        let [_, _] = tree.split_below(a, 0.7, vec![files, assets]);
-        let [_, _] = tree.split_below(b, 0.5, vec![hierarchy]);
-
-        Self {
-            style,
-            _context: context,
-            tree,
-        }
+        Self { context, tree }
     }
 }
 
 impl eframe::App for MyApp {
     fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
-        let style = self.style.borrow().clone();
+        let layer_id = LayerId::background();
+        let max_rect = ctx.available_rect();
+        let clip_rect = ctx.available_rect();
+        let id = Id::new("egui_dock::DockArea");
+        let mut ui = Ui::new(ctx.clone(), layer_id, id, max_rect, clip_rect);
+
+        let style = self
+            .context
+            .style
+            .get_or_insert(Style::from_egui(&ui.ctx().style()))
+            .clone();
         DockArea::new(&mut self.tree)
             .style(style)
-            .show(ctx, &mut egui_dock::DynamicTabViewer {});
+            .show_inside(&mut ui, &mut self.context);
     }
 }