diff --git a/Cargo.toml b/Cargo.toml
index 5165811..42ffc76 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -22,5 +22,8 @@ panic = "abort"
 strip = true
 
 [dependencies]
-makepad-widgets = { version = "0.6.0" }
+# makepad-widgets = { path = "../../../../sample/makepad/widgets", version = "0.6.0" }
 # makepad-widgets = { git = "https://github.com/makepad/makepad/", branch = "rik" }
+
+# makepad-widgets = { path = "../../../samples/makepad/widgets", version = "0.6.0" }
+makepad-widgets = { path = "../makepad/widgets", version = "0.6.0" }
diff --git a/README.md b/README.md
index 1e15390..33b42e1 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ This template should help get you started developing with Makepad Rust UI.
 
 # Desktop in Debug Mode
 cargo run
+MAKEPAD=lines cargo +nightly run simplestacknavigation
 
 # Desktop in Release Mode
 cargo run --release
@@ -34,5 +35,5 @@ cargo makepad apple ios install-toolchain
 cargo makepad android --abi=all install-toolchain
 
 git add .
-git commit -m "welcome screen centered"
+git commit -m "refoctor to latest rik branch"
 git push -u origin main
\ No newline at end of file
diff --git a/makepad_state.ron b/makepad_state.ron
new file mode 100644
index 0000000..bb81ad2
--- /dev/null
+++ b/makepad_state.ron
@@ -0,0 +1,115 @@
+(
+    dock_items:[
+        Tab(
+            id:file_tree,
+            name:"Explore",
+            closable:false,
+            kind:StudioFileTree,
+        ),
+        Tabs(
+            id:file_tree_tabs,
+            tabs:[
+                file_tree,
+                search,
+                run_list,
+            ],
+            selected:0,
+            closable:false,
+        ),
+        Tab(
+            id:log_list,
+            name:"Log",
+            closable:false,
+            kind:LogList,
+        ),
+        Splitter(
+            id:split2,
+            axis:Horizontal,
+            align:Weighted(0.5),
+            a:edit_tabs,
+            b:run_tabs,
+        ),
+        Tabs(
+            id:log_tabs,
+            tabs:[
+                log_list,
+                profiler,
+            ],
+            selected:0,
+            closable:false,
+        ),
+        Tab(
+            id:file1,
+            name:"app.rs",
+            closable:true,
+            kind:StudioEditor,
+        ),
+        Splitter(
+            id:root,
+            axis:Horizontal,
+            align:FromA(230),
+            a:file_tree_tabs,
+            b:split1,
+        ),
+        Tab(
+            id:run_first,
+            name:"View",
+            closable:false,
+            kind:RunFirst,
+        ),
+        Tabs(
+            id:edit_tabs,
+            tabs:[
+                edit_first,
+                17924207437592000735,
+            ],
+            selected:1,
+            closable:false,
+        ),
+        Tab(
+            id:search,
+            name:"Search",
+            closable:false,
+            kind:Search,
+        ),
+        Tab(
+            id:edit_first,
+            name:"Edit",
+            closable:false,
+            kind:EditFirst,
+        ),
+        Tab(
+            id:profiler,
+            name:"Profiler",
+            closable:false,
+            kind:Profiler,
+        ),
+        Splitter(
+            id:split1,
+            axis:Vertical,
+            align:FromB(200),
+            a:split2,
+            b:log_tabs,
+        ),
+        Tab(
+            id:17924207437592000735,
+            name:"makepad_state.ron",
+            closable:true,
+            kind:StudioEditor,
+        ),
+        Tabs(
+            id:run_tabs,
+            tabs:[
+                run_first,
+            ],
+            selected:0,
+            closable:false,
+        ),
+        Tab(
+            id:run_list,
+            name:"Run",
+            closable:false,
+            kind:RunList,
+        ),
+    ],
+)
\ No newline at end of file
diff --git a/src/app.rs b/src/app.rs
index 623752e..c4cf052 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -9,10 +9,8 @@ live_design!{
 
     import crate::welcome::welcome_screen::WelcomeScreen
     import crate::counter::counter_screen::CounterScreen
-
     import crate::shared::clickable_view::ClickableView
     import crate::shared::stack_navigation::*;
-
     import crate::shared::styles::*;
     import crate::shared::helpers::*;
 
@@ -37,11 +35,10 @@ live_design!{
     }
     
     App = {{App}} {
-
         ui: <Window>{
             window: {
                 position: vec2(0, 0), 
-                // inner_size: vec2(360, 800)
+                inner_size: vec2(360, 800)
                 dpi_override: 2
             },
             pass: {clear_color: #2A}
@@ -82,14 +79,11 @@ app_main!(App);
 #[derive(Live)]
 pub struct App {
     #[live] ui: WidgetRef,
-    #[rust] counter: usize,
     #[rust] navigation_destinations: HashMap<StackViewAction, LiveId>,
 }
-
-impl LiveHook for App {
-    fn before_live_design(cx: &mut Cx) {
+impl LiveRegister for App {
+    fn live_register(cx: &mut Cx) {
         crate::makepad_widgets::live_design(cx);
-
         // welcome
         crate::welcome::welcome_screen::live_design(cx);
         // counter
@@ -106,30 +100,15 @@ impl LiveHook for App {
         crate::shared::stack_navigation::live_design(cx);
         crate::shared::clickable_view::live_design(cx);
     }
+}
+impl LiveHook for App {
     fn after_new_from_doc(&mut self, _cx: &mut Cx) {
-        self.init_navigation_destinations();
+       self.init_navigation_destinations();
     }
 }
 
-impl App{
-    fn init_navigation_destinations(&mut self) {
-        self.navigation_destinations = HashMap::new();
-        self.navigation_destinations.insert(StackViewAction::ShowCounterScreen, live_id!(my_counter_stack_view));
-    }
-    
-    async fn _do_network_request(_cx:CxRef, _ui:WidgetRef, _url:&str)->String{
-        "".to_string()
-    }
-    
-}
-
-impl AppMain for App{
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
-        if let Event::Draw(event) = event {
-            return self.ui.draw_widget_all(&mut Cx2d::new(cx, event));
-        }
-        let actions = self.ui.handle_widget_event(cx, event);
-
+impl MatchEvent for App{
+    fn handle_actions(&mut self, cx:&mut Cx, actions:&Actions){
         self.ui.radio_button_set(ids!(
             mobile_modes.tab1,
         ))
@@ -148,4 +127,28 @@ impl AppMain for App{
             &self.navigation_destinations
         );
     }
-}
\ No newline at end of file
+}
+
+impl App{
+    fn init_navigation_destinations(&mut self) {
+        self.navigation_destinations = HashMap::new();
+        self.navigation_destinations.insert(StackViewAction::ShowCounterScreen, live_id!(my_counter_stack_view));
+    }
+    
+    async fn _do_network_request(_cx:CxRef, _ui:WidgetRef, _url:&str)->String{
+        "".to_string()
+    }
+    // fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
+    //     if let Event::Draw(event) = event {
+    //         return self.ui.draw_widget_all(&mut Cx2d::new(cx, event));
+    //     }
+    //     let actions = self.ui.handle_widget_event(cx, event);
+    // }
+}
+
+impl AppMain for App {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
+        self.match_event(cx, event);
+        self.ui.handle_event(cx, event, &mut Scope::empty());
+    }
+}
diff --git a/src/counter/counter_screen.rs b/src/counter/counter_screen.rs
index e0bd5fb..78473e3 100644
--- a/src/counter/counter_screen.rs
+++ b/src/counter/counter_screen.rs
@@ -1,5 +1,3 @@
-use crate::shared::clickable_view::*;
-use crate::shared::stack_view_action::StackViewAction;
 use makepad_widgets::widget::WidgetCache;
 use makepad_widgets::*;
 
@@ -15,84 +13,81 @@ live_design! {
     import crate::shared::search_bar::SearchBar;
     import crate::shared::custom_button::CustomButton;
 
-    IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
-    IMG_FAVORITES = dep("crate://self/resources/img/favorites.png")
-    IMG_MY_POSTS = dep("crate://self/resources/img/my-posts.png")
-    IMG_STICKER_GALLERY = dep("crate://self/resources/img/sticker-gallery.png")
-    IMG_SETTINGS = dep("crate://self/resources/img/settings.png")
-    IMG_QR = dep("crate://self/resources/img/qr_icon.png")
-
     Counter = {{Counter}} {
-        view: {
-            width: Fill, height: Fit
-            spacing: 10.
+        width: Fill, height: Fill
+        flow: Down,
+        spacing: 10.
+        draw_bg: {
+            color: #000
+        }
+        // draw_bg: {
+        //     fn pixel(self) -> vec4 {
+        //         return mix(#3, #1, self.pos.y);
+        //     }
+        // }
+        CounterInfo = <View> {
+            width: Fill, height: Fill
+            flow: Right, 
+            spacing: 10., 
+            align: {
+                x: 0.5,
+                y: 0.5
+            },
+            show_bg: true
             draw_bg: {
-                color: #000
+                color: #fff
             }
-            CounterInfo = <View> {
-                width: Fill, height: Fill
-                flow: Right, 
-                spacing: 10., 
-                align: {
-                    x: 0.5,
-                    y: 0.5
-                },
-                show_bg: true
-                draw_bg: {
-                    color: #fff
-                }
-                <View> {
-                    width: Fit
-                    height: Fill
-                    show_bg: false
+            <View> {
+                width: Fit
+                height: Fill
+                show_bg: false
+                align: {x: 0.5, y: 0.5}
+                container = <RoundedView> {
+                    width: 360
+                    height: 400
                     align: {x: 0.5, y: 0.5}
-                    container = <RoundedView> {
-                        width: 360
-                        height: 400
-                        align: {x: 0.5, y: 0.5}
-                        spacing: 2.0
-                        draw_bg: {
-                            color: #ddd,
-                            radius: (CARD_CORNER_RADIUS)
-                        }
-                        <View> {
-                            width: Fit, height: Fill
-                            flow: Down, 
-                            align: {x: 0.5, y: 0.5}, 
-                            padding: {top: 5., left: 10., right: 10.}, spacing: 20.
+                    spacing: 2.0
+                    draw_bg: {
+                        color: #ddd,
+                        radius: (CARD_CORNER_RADIUS)
+                    }
+                    <View> {
+                        width: Fit, height: Fill
+                        flow: Down, 
+                        align: {x: 0.5, y: 0.5}, 
+                        padding: {top: 5., left: 10., right: 10.}, spacing: 20.
 
-                            avatar = <Image> {
-                                source: (LOGO_MAKEPAD),
-                                width: 300., height: 80.
+                        avatar = <Image> {
+                            source: (LOGO_MAKEPAD),
+                            width: 300., height: 80.
+                        }
+                        button1 = <CustomButton> {
+                            button = {
+                                text: "Hello world"
                             }
-                            button1 = <CustomButton> {
-                                button = {
-                                    text: "Hello world"
+                        }
+                        message_input = <SearchBar> {
+                            show_bg: false
+                            input = {
+                                width: Fill, height: Fit, margin: 0
+                                empty_message: "Click to count"
+                                draw_bg: {
+                                    color: #fff
+                                    border_width: 0.5,
+                                    border_color: #b4b4b4,
                                 }
                             }
-                            message_input = <SearchBar> {
-                                show_bg: false
-                                input = {
-                                    width: Fill, height: Fit, margin: 0
-                                    empty_message: "Click to count"
-                                    draw_bg: {
-                                        color: #fff
-                                        border_width: 0.5,
-                                        border_color: #b4b4b4,
-                                    }
-                                }
-                            }
-                            label1 = <Label> {
-                                draw_text: {
-                                    color: #000
-                                },
-                                text: "Counter: 0"
-                            }
+                        }
+                        label1 = <Label> {
+                            draw_text: {
+                                color: #000
+                            },
+                            text: "Counter: 0"
                         }
                     }
                 }
-
             }
+
         }
     }
 
@@ -102,54 +97,33 @@ live_design! {
     }
 }
 
-#[derive(Live)]
+#[derive(Live, LiveHook, Widget)]
 pub struct Counter {
-    #[live]
-    view:View,
+    #[deref] view: View,
     #[rust] counter: usize,
-}
 
-impl LiveHook for Counter {
-    fn before_live_design(cx: &mut Cx) {
-        register_widget!(cx, Counter);
-    }
 }
 
 impl Widget for Counter {
-    fn handle_widget_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, WidgetActionItem),
-    ) {
-        let uid = self.widget_uid();
-        self.handle_event_with(cx, event, &mut |cx, action: StackViewAction| {
-            dispatch_action(cx, WidgetActionItem::new(action.into(), uid));
-        });
-    }
-
-    fn redraw(&mut self, cx: &mut Cx) {
-        self.view.redraw(cx);
-    }
-
-    fn find_widgets(&mut self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet) {
-        self.view.find_widgets(path, cached, results);
-    }
-
-    fn draw_walk_widget(&mut self, cx: &mut Cx2d, walk: Walk) -> WidgetDraw {
-        self.view.draw_walk_widget(cx, walk)
-    }
-}
-
-impl Counter {
-    fn handle_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        _dispatch_action: &mut dyn FnMut(&mut Cx, StackViewAction),
-    ) {
-        let actions = self.view.handle_widget_event(cx, event);
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let actions = cx.capture_actions(|cx| self.view.handle_event(cx, event, scope));
+        // if self
+        //     .view
+        //     .clickable_view(id!(my_profile_frame))
+        //     .clicked(&actions)
+        // {
+        //     let uid = self.widget_uid();
+        //     cx.widget_action(uid, &scope.path, StackViewAction::ShowMyProfile);
+        // }
 
+        // if self.view.button(id!(welcome_frame)).clicked(&actions) 
+        // {
+        //     let uid = self.widget_uid();
+        //     cx.widget_action(uid, &scope.path, StackViewAction::ShowCounterScreen);
+        //     // dispatch_action(cx, StackViewAction::ShowCounterScreen);
+        //     let user_prompt1 = self.view.text_input(id!(message_input.input)).text();
+        //     log!("WELCOME BUTTON CLICKED: {}", user_prompt1);
+        // }
         if self.view.button(id!(button1)).clicked(&actions) 
         {
             log!("BUTTON CLICKED {}", self.counter); 
@@ -158,4 +132,26 @@ impl Counter {
             label.set_text_and_redraw(cx,&format!("Counter: {}", self.counter));
         }
     }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
 }
+
+// impl Counter {
+//     fn handle_event_with(
+//         &mut self,
+//         cx: &mut Cx,
+//         event: &Event,
+//         _dispatch_action: &mut dyn FnMut(&mut Cx, StackViewAction),
+//     ) {
+//         let actions = self.view.handle_widget_event(cx, event);
+//         if self.view.button(id!(button1)).clicked(&actions) 
+//         {
+//             log!("BUTTON CLICKED {}", self.counter); 
+//             self.counter += 1;
+//             let label = self.view.label(id!(label1));
+//             label.set_text_and_redraw(cx,&format!("Counter: {}", self.counter));
+//         }
+//     }
+// }
diff --git a/index.html b/src/index.html
similarity index 58%
rename from index.html
rename to src/index.html
index 34f5eda..44dea98 100644
--- a/index.html
+++ b/src/index.html
@@ -3,25 +3,25 @@
 	<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>Makepad Template</title>
+    <title>Simple UI example</title>
     <script type='module'>
-        import {WasmWebGL} from "/makepad-template/platform/src/os/web/web_gl.js"
+        import {WasmWebGL} from "/makepad/platform/src/os/web/web_gl.js"
         
         const wasm = await WasmWebGL.fetch_and_instantiate_wasm(
-            "makepad-template/target/wasm32-unknown-unknown/release/login.wasm"
+            "/makepad/target/wasm32-unknown-unknown/release/simplestacknavigation.wasm"
         );
         
         class MyWasmApp {
             constructor(wasm) {
                 let canvas = document.getElementsByClassName('full_canvas')[0];
-                this.webgl = new WasmWebGL (wasm, this, canvas);
+                this.bridge = new WasmWebGL (wasm, this, canvas);
             }
         } 
         
         let app = new MyWasmApp(wasm);
     </script>
-    <script type='module' src='/makepad-template/platform/src/os/web/auto_reload.js'></script>
-    <link rel='stylesheet' type='text/css' href='/makepad-template/platform/src/os/web/full_canvas.css'>
+    <script type='module' src='/makepad/platform/src/os/web/auto_reload.js'></script>
+    <link rel='stylesheet' type='text/css' href='/makepad/platform/src/os/web/full_canvas.css'>
 	</head> 
 	<body>
 		<canvas class='full_canvas'></canvas>
diff --git a/src/shared/clickable_view.rs b/src/shared/clickable_view.rs
index b8e6242..9cc125d 100644
--- a/src/shared/clickable_view.rs
+++ b/src/shared/clickable_view.rs
@@ -14,82 +14,41 @@ live_design! {
     }
 }
 
-#[derive(Live)]
+#[derive(Live, LiveHook, Widget)]
 pub struct ClickableView {
     #[deref]
-    view:View,
+    view: View,
 }
-
-impl LiveHook for ClickableView {
-    fn before_live_design(cx: &mut Cx) {
-        register_widget!(cx, ClickableView);
-    }
-}
-
-#[derive(Clone, WidgetAction)]
+#[derive(Clone, DefaultNone, Debug)]
 pub enum ClickableViewAction {
     None,
     Click,
 }
 
 impl Widget for ClickableView {
-    fn handle_widget_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, WidgetActionItem),
-    ) {
-        let uid = self.widget_uid();
-        self.handle_event_with(cx, event, &mut |cx, action| {
-            dispatch_action(cx, WidgetActionItem::new(action.into(), uid));
-        });
-    }
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let uid = self.widget_uid().clone();
 
-    fn redraw(&mut self, cx: &mut Cx) {
-        self.view.redraw(cx);
-    }
-
-    fn walk(&mut self, cx: &mut Cx) -> Walk {
-        self.view.walk(cx)
-    }
-
-    fn find_widgets(&mut self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet) {
-        self.view.find_widgets(path, cached, results);
-    }
-
-    fn draw_walk_widget(&mut self, cx: &mut Cx2d, walk: Walk) -> WidgetDraw {
-        self.view.draw_walk_widget(cx, walk)
-    }
-}
-
-impl ClickableView {
-    pub fn handle_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, ClickableViewAction),
-    ) {
         match event.hits(cx, self.view.area()){
             Hit::FingerDown(_fe) => {
                 cx.set_key_focus(self.view.area());
             }
             Hit::FingerUp(fe) => if fe.was_tap() {
-                dispatch_action(cx, ClickableViewAction::Click);
+                cx.widget_action(uid, &scope.path, ClickableViewAction::Click);
             }
             _ =>()
         }
     }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
 }
 
-#[derive(Debug, Clone, PartialEq, WidgetRef)]
-pub struct ClickableViewRef(WidgetRef);
-
 impl ClickableViewRef {
-    pub fn clicked(&self, actions: &WidgetActions) -> bool {
-        if let Some(item) = actions.find_single_action(self.widget_uid()) {
-            if let ClickableViewAction::Click = item.action() {
-                return true;
-            }
+    pub fn clicked(&self, actions: &Actions) -> bool {
+        if let ClickableViewAction::Click = actions.find_widget_action(self.widget_uid()).cast() {
+            return true;
         }
         false
     }
diff --git a/src/shared/dropdown_menu.rs b/src/shared/dropdown_menu.rs
index 5b39078..1ebbb7a 100644
--- a/src/shared/dropdown_menu.rs
+++ b/src/shared/dropdown_menu.rs
@@ -81,7 +81,7 @@ live_design! {
     }
 }
 
-#[derive(Live)]
+#[derive(Live, Widget)]
 pub struct WechatDropDown {
     #[animator]
     animator: Animator,
@@ -91,7 +91,7 @@ pub struct WechatDropDown {
     #[layout]
     layout: Layout,
 
-    #[live]
+    #[live] #[redraw]
     draw_bg: DrawQuad,
     #[live]
     draw_icon: DrawIcon,
@@ -124,10 +124,6 @@ pub struct WechatDropDown {
 }
 
 impl LiveHook for WechatDropDown {
-    fn before_live_design(cx: &mut Cx) {
-        register_widget!(cx, WechatDropDown)
-    }
-
     fn after_apply(&mut self, cx: &mut Cx, from: ApplyFrom, _index: usize, _nodes: &[LiveNode]) {
         if self.popup_menu.is_none() || !from.is_from_doc() {
             return;
@@ -144,7 +140,7 @@ impl LiveHook for WechatDropDown {
         });
     }
 }
-#[derive(Clone, WidgetAction, Debug)]
+#[derive(Clone, DefaultNone, Debug)]
 pub enum WechatDropDownAction {
     Select(usize, LiveValue),
     None,
@@ -180,14 +176,42 @@ impl WechatDropDown {
         self.draw_bg.redraw(cx);
         cx.sweep_unlock(self.draw_bg.area());
     }
+}
 
-    pub fn handle_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, WechatDropDownAction),
-    ) {
+// It is named WechatDropDown because DropDown is already a widget in makepad_widgets
+impl Widget for WechatDropDown {
+    fn widget_to_data(
+        &self,
+        _cx: &mut Cx,
+        actions: &Actions,
+        nodes: &mut LiveNodeVec,
+        path: &[LiveId],
+    ) -> bool {
+        match actions.find_widget_action(self.widget_uid()).cast() {
+            WechatDropDownAction::Select(_, value) => {
+                nodes.write_field_value(path, value.clone());
+                true
+            }
+            _ => false,
+        }
+    }
+
+    fn data_to_widget(&mut self, cx: &mut Cx, nodes: &[LiveNode], path: &[LiveId]) {
+        if let Some(value) = nodes.read_field_value(path) {
+            if let Some(index) = self.values.iter().position(|v| v == value) {
+                if self.selected_item != index {
+                    self.selected_item = index;
+                    self.redraw(cx);
+                }
+            } else {
+                // error!("Value not in values list {:?}", value);
+            }
+        }
+    }
+
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.animator_handle_event(cx, event);
+        let uid = self.widget_uid();
 
         if self.is_open && self.popup_menu.is_some() {
             let global = cx.global::<PopupMenuGlobal>().clone();
@@ -199,16 +223,17 @@ impl WechatDropDown {
                 event,
                 self.draw_bg.area(),
                 &mut |cx, action| if let PopupMenuAction::WasSelected(node_id) = action {
-                    self.selected_item = node_id.0 .0 as usize;
-                    dispatch_action(
-                        cx,
+                    self.selected_item = node_id.0.0 as usize;
+                    cx.widget_action(
+                        uid,
+                        &scope.path,
                         WechatDropDownAction::Select(
                             self.selected_item,
                             self.values
                                 .get(self.selected_item)
                                 .cloned()
-                                .unwrap_or(LiveValue::None),
-                        ),
+                                .unwrap_or(LiveValue::None)
+                            )
                     );
                     self.draw_bg.redraw(cx);
                     close = true;
@@ -237,12 +262,16 @@ impl WechatDropDown {
                 KeyCode::ArrowUp => {
                     if self.selected_item > 0 {
                         self.selected_item -= 1;
-                        dispatch_action(
-                            cx,
+                        cx.widget_action(
+                            uid,
+                            &scope.path,
                             WechatDropDownAction::Select(
                                 self.selected_item,
-                                self.values[self.selected_item].clone(),
-                            ),
+                                self.values
+                                    .get(self.selected_item)
+                                    .cloned()
+                                    .unwrap_or(LiveValue::None)
+                            )
                         );
                         self.set_closed(cx);
                         self.draw_bg.redraw(cx);
@@ -251,12 +280,16 @@ impl WechatDropDown {
                 KeyCode::ArrowDown => {
                     if !self.values.is_empty() && self.selected_item < self.values.len() - 1 {
                         self.selected_item += 1;
-                        dispatch_action(
-                            cx,
+                        cx.widget_action(
+                            uid,
+                            &scope.path,
                             WechatDropDownAction::Select(
                                 self.selected_item,
-                                self.values[self.selected_item].clone(),
-                            ),
+                                self.values
+                                    .get(self.selected_item)
+                                    .cloned()
+                                    .unwrap_or(LiveValue::None)
+                            )
                         );
                         self.set_closed(cx);
                         self.draw_bg.redraw(cx);
@@ -289,7 +322,7 @@ impl WechatDropDown {
         };
     }
 
-    pub fn draw_walk(&mut self, cx: &mut Cx2d, walk: Walk) {
+    fn draw_walk(&mut self, cx: &mut Cx2d, _scope: &mut Scope, walk: Walk) -> DrawStep {
         // cx.clear_sweep_lock(self.draw_bg.area());
 
         self.draw_bg.begin(cx, walk, self.layout);
@@ -314,73 +347,15 @@ impl WechatDropDown {
 
             popup_menu.end(cx, self.draw_bg.area());
         }
+
+        DrawStep::done()
     }
 }
 
-// It is named WechatDropDown because DropDown is already a widget in makepad_widgets
-impl Widget for WechatDropDown {
-    fn widget_to_data(
-        &self,
-        _cx: &mut Cx,
-        actions: &WidgetActions,
-        nodes: &mut LiveNodeVec,
-        path: &[LiveId],
-    ) -> bool {
-        match actions.single_action(self.widget_uid()) {
-            WechatDropDownAction::Select(_, value) => {
-                nodes.write_field_value(path, value.clone());
-                true
-            }
-            _ => false,
-        }
-    }
-
-    fn data_to_widget(&mut self, cx: &mut Cx, nodes: &[LiveNode], path: &[LiveId]) {
-        if let Some(value) = nodes.read_field_value(path) {
-            if let Some(index) = self.values.iter().position(|v| v == value) {
-                if self.selected_item != index {
-                    self.selected_item = index;
-                    self.redraw(cx);
-                }
-            } else {
-                // error!("Value not in values list {:?}", value);
-            }
-        }
-    }
-
-    fn redraw(&mut self, cx: &mut Cx) {
-        self.draw_bg.redraw(cx);
-    }
-
-    fn handle_widget_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, WidgetActionItem),
-    ) {
-        let uid = self.widget_uid();
-        self.handle_event_with(cx, event, &mut |cx, action| {
-            dispatch_action(cx, WidgetActionItem::new(action.into(), uid))
-        });
-    }
-
-    fn walk(&mut self, _cx: &mut Cx) -> Walk {
-        self.walk
-    }
-
-    fn draw_walk_widget(&mut self, cx: &mut Cx2d, walk: Walk) -> WidgetDraw {
-        self.draw_walk(cx, walk);
-        WidgetDraw::done()
-    }
-}
-
-#[derive(Clone, PartialEq, WidgetRef)]
-pub struct WechatDropDownRef(WidgetRef);
-
 impl WechatDropDownRef {
-    pub fn item_clicked(&mut self, item_id: &[LiveId], actions: &WidgetActions) -> bool {
-        if let Some(item) = actions.find_single_action(self.widget_uid()) {
-            if let WechatDropDownAction::Select(_id, value) = item.action() {
+    pub fn item_clicked(&mut self, item_id: &[LiveId], actions: &Actions) -> bool {
+        if let Some(item) = actions.find_widget_action(self.widget_uid()) {
+            if let WechatDropDownAction::Select(_id, value) = item.cast() {
                 return LiveValue::Bool(true) == value.enum_eq(item_id)
             }
         }
diff --git a/src/shared/header.rs b/src/shared/header.rs
index 68581ff..c20a406 100644
--- a/src/shared/header.rs
+++ b/src/shared/header.rs
@@ -165,59 +165,23 @@ live_design! {
     }
 }
 
-#[derive(Live)]
+#[derive(Live, LiveHook, Widget)]
 pub struct HeaderDropDownMenu {
     #[deref]
     view: View,
 }
 
-impl LiveHook for HeaderDropDownMenu {
-    fn before_live_design(cx: &mut Cx) {
-        register_widget!(cx, HeaderDropDownMenu);
-    }
-}
-
 impl Widget for HeaderDropDownMenu {
-    fn handle_widget_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, WidgetActionItem),
-    ) {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let uid = self.widget_uid();
-        self.handle_event_with(cx, event, &mut |cx, action: StackViewAction| {
-            dispatch_action(cx, WidgetActionItem::new(action.into(), uid));
-        });
-    }
-
-    fn redraw(&mut self, cx: &mut Cx) {
-        self.view.redraw(cx);
-    }
-
-    fn walk(&mut self, cx: &mut Cx) -> Walk {
-        self.view.walk(cx)
-    }
-
-    fn find_widgets(&mut self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet) {
-        self.view.find_widgets(path, cached, results);
-    }
-
-    fn draw_walk_widget(&mut self, cx: &mut Cx2d, walk: Walk) -> WidgetDraw {
-        self.view.draw_walk_widget(cx, walk)
-    }
-}
-
-impl HeaderDropDownMenu {
-    pub fn handle_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, StackViewAction),
-    ) {
-        let actions = self.view.handle_widget_event(cx, event);
+        let actions = cx.capture_actions(|cx| self.view.handle_event(cx, event, scope));
 
         if self.wechat_drop_down(id!(menu)).item_clicked(id!(AddContact), &actions) {
-            dispatch_action(cx, StackViewAction::ShowAddContact);
+            cx.widget_action(uid, &scope.path, StackViewAction::ShowAddContact);
         }
     }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep  {
+        self.view.draw_walk(cx, scope, walk)
+    }
 }
diff --git a/src/shared/popup_menu.rs b/src/shared/popup_menu.rs
index d9dd95d..6e22d39 100644
--- a/src/shared/popup_menu.rs
+++ b/src/shared/popup_menu.rs
@@ -7,41 +7,6 @@ live_design! {
     import makepad_widgets::theme_desktop_dark::*;
     import crate::shared::styles::*;
 
-    DrawBg = {{DrawBg}} {
-        instance color: #4
-        instance color_selected: #5
-        instance border_radius: 4.0
-
-        fn pixel(self) -> vec4 {
-            let sdf = Sdf2d::viewport(self.pos * self.rect_size)
-            sdf.box(
-                1.0,
-                1.0,
-                self.rect_size.x,
-                self.rect_size.y,
-                self.border_radius
-            )
-            sdf.fill_keep(mix(self.color, self.color_selected, self.hover))
-            return sdf.result;
-        }
-    }
-
-    DrawName = {{DrawName}} {
-        text_style: <REGULAR_TEXT>{font_size: 9},
-
-        fn get_color(self) -> vec4 {
-            return mix(
-                mix(
-                    THEME_COLOR_TEXT_DEFAULT,
-                    THEME_COLOR_TEXT_SELECTED,
-                    self.selected
-                ),
-                THEME_COLOR_TEXT_HOVER,
-                self.hover
-            )
-        }
-    }
-
     MenuItem = {{MenuItem}} {
         align: {y: 0.5},
         padding: {left: 5., top: 10., bottom: 10., right: 5.},
@@ -49,6 +14,46 @@ live_design! {
         width: Fill,
         height: Fit
 
+        draw_bg: {
+            instance color: #4
+            instance color_selected: #5
+            instance border_radius: 4.0
+
+            instance selected: 0.0
+            instance hover: 0.0
+    
+            fn pixel(self) -> vec4 {
+                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+                sdf.box(
+                    1.0,
+                    1.0,
+                    self.rect_size.x,
+                    self.rect_size.y,
+                    self.border_radius
+                )
+                sdf.fill_keep(mix(self.color, self.color_selected, self.hover))
+                return sdf.result;
+            }
+        }
+    
+        draw_name: {
+            text_style: <REGULAR_TEXT>{font_size: 9},
+            instance selected: 0.0
+            instance hover: 0.0
+    
+            fn get_color(self) -> vec4 {
+                return mix(
+                    mix(
+                        THEME_COLOR_TEXT_DEFAULT,
+                        THEME_COLOR_TEXT_SELECTED,
+                        self.selected
+                    ),
+                    THEME_COLOR_TEXT_HOVER,
+                    self.hover
+                )
+            }
+        }
+
         icon_walk: {width: 15., height: Fit, margin: {bottom: 3.}}
         draw_icon: {
             color: #f2f2f2;
@@ -152,29 +157,7 @@ live_design! {
     }
 }
 
-#[derive(Live, LiveHook)]
-#[repr(C)]
-struct DrawBg {
-    #[deref]
-    draw_super: DrawQuad,
-    #[live]
-    selected: f32,
-    #[live]
-    hover: f32,
-}
-
-#[derive(Live, LiveHook)]
-#[repr(C)]
-struct DrawName {
-    #[deref]
-    draw_super: DrawText,
-    #[live]
-    selected: f32,
-    #[live]
-    hover: f32,
-}
-
-#[derive(Live)]
+#[derive(Live, LiveRegister, WidgetWrap)]
 pub struct PopupMenu {
     #[live]
     draw_list: DrawList2d,
@@ -182,9 +165,9 @@ pub struct PopupMenu {
     #[live]
     menu_item: Option<LivePtr>,
 
-    #[live]
+    #[live] #[redraw]
     draw_bg: DrawQuad,
-    #[live]
+    #[live] #[redraw]
     draw_icon: DrawIcon,
     #[live]
     icon_walk: Walk,
@@ -213,10 +196,6 @@ pub struct PopupMenu {
 }
 
 impl LiveHook for PopupMenu {
-    fn before_live_design(cx: &mut Cx) {
-        register_widget!(cx, PopupMenu)
-    }
-
     fn after_apply(&mut self, cx: &mut Cx, from: ApplyFrom, index: usize, nodes: &[LiveNode]) {
         if let Some(index) = nodes.child_by_name(index, live_id!(list_node).as_field()) {
             for (_, node) in self.menu_items.iter_mut() {
@@ -228,28 +207,14 @@ impl LiveHook for PopupMenu {
 }
 
 impl Widget for PopupMenu {
-    fn handle_widget_event_with(
-        &mut self,
-        _cx: &mut Cx,
-        _event: &Event,
-        _dispatch_action: &mut dyn FnMut(&mut Cx, WidgetActionItem),
-    ) {
+    fn handle_event(&mut self, _cx: &mut Cx, _event: &Event, _scope: &mut Scope) {
     }
 
-    fn draw_walk_widget(&mut self, cx: &mut Cx2d, walk: Walk) -> WidgetDraw {
+    fn draw_walk(&mut self, cx: &mut Cx2d, _scope: &mut Scope, walk: Walk) -> DrawStep {
         self.draw_bg.begin(cx, walk, self.layout);
         self.draw_icon.draw_walk(cx, self.icon_walk);
         self.draw_bg.end(cx);
-        WidgetDraw::done()
-    }
-
-    fn walk(&mut self, _cx: &mut Cx) -> Walk {
-        self.walk
-    }
-
-    fn redraw(&mut self, cx: &mut Cx) {
-        self.draw_bg.redraw(cx);
-        self.draw_icon.redraw(cx);
+        DrawStep::done()
     }
 }
 
@@ -347,19 +312,19 @@ impl PopupMenu {
     }
 }
 
-#[derive(Live, LiveHook)]
+#[derive(Live, LiveHook, LiveRegister, WidgetWrap)]
 pub struct MenuItem {
     #[layout]
     layout: Layout,
     #[walk]
     walk: Walk,
 
-    #[live]
-    draw_bg: DrawBg,
-    #[live]
-    draw_name: DrawName,
+    #[live] #[redraw]
+    draw_bg: DrawQuad,
+    #[live] #[redraw]
+    draw_name: DrawText,
 
-    #[live]
+    #[live] #[redraw]
     draw_icon: DrawIcon,
     #[live]
     icon_walk: Walk,
@@ -377,7 +342,7 @@ pub struct MenuItem {
     selected: f32,
 }
 
-#[derive(Default, Clone)]
+#[derive(Default, Clone, Debug)]
 pub enum MenuItemAction {
     WasSweeped,
     WasSelected,
@@ -385,7 +350,7 @@ pub enum MenuItemAction {
     None,
 }
 
-#[derive(Clone, WidgetAction, Debug)]
+#[derive(Clone, DefaultNone, Debug)]
 pub enum PopupMenuAction {
     WasSweeped(MenuItemId),
     WasSelected(MenuItemId),
diff --git a/src/shared/search_bar.rs b/src/shared/search_bar.rs
index f2535dd..50e3bb6 100644
--- a/src/shared/search_bar.rs
+++ b/src/shared/search_bar.rs
@@ -20,7 +20,6 @@ live_design! {
             clip_y: true,
             align: {y: 0.5}
             empty_message: "Search"
-            // text: "Here"
             draw_bg: {
                 color: #fff
             }
diff --git a/src/shared/stack_navigation.rs b/src/shared/stack_navigation.rs
index 3fc6be8..be07bf7 100644
--- a/src/shared/stack_navigation.rs
+++ b/src/shared/stack_navigation.rs
@@ -32,7 +32,6 @@ live_design! {
         visible: false
         width: Fill, height: Fill
         flow: Down
-        // flow: Overlay
         show_bg: true
         draw_bg: {
             color: #fff
@@ -41,6 +40,7 @@ live_design! {
         header = <Header> {}
 
         // TBD Adjust this based on actual screen size
+        // offset: 400.0
         offset: 2.0
 
         animator: {
@@ -51,7 +51,7 @@ live_design! {
                     from: {all: Forward {duration: 0.3}}
                     // Bug: Constants are not working as part of an live state value
                     // apply: {offset: 400.0}
-                    apply: {offset: 0.0}
+                    apply: {offset: 2.0}
                 }
 
                 show = {
@@ -71,7 +71,7 @@ live_design! {
     }
 }
 
-#[derive(Live)]
+#[derive(Live, LiveHook, Widget)]
 pub struct StackNavigationView {
     #[deref]
     view:View,
@@ -83,75 +83,35 @@ pub struct StackNavigationView {
     animator: Animator,
 }
 
-impl LiveHook for StackNavigationView {
-    fn before_live_design(cx: &mut Cx) {
-        register_widget!(cx, StackNavigationView);
-    }
-}
-
 impl Widget for StackNavigationView {
-    fn walk(&mut self, cx: &mut Cx) -> Walk {
-        self.view.walk(cx)
-    }
-
-    fn redraw(&mut self, cx: &mut Cx) {
-        self.view.redraw(cx)
-    }
-
-    fn find_widgets(&mut self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet) {
-        self.view.find_widgets(path, cached, results);
-    }
-
-    fn handle_widget_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, WidgetActionItem),
-    ) {
-        self.handle_event_with(cx, event, dispatch_action);
-    }
-
-    fn draw_walk_widget(&mut self, cx: &mut Cx2d, walk: Walk) -> WidgetDraw {
-        self.view.draw_walk_widget(
-            cx,
-            walk.with_abs_pos(DVec2 {
-                x: self.offset,
-                y: 0.,
-            }),
-        )
-    }
-}
-
-impl StackNavigationView {
-    pub fn handle_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, WidgetActionItem),
-    ) {
+    fn handle_event(&mut self, cx:&mut Cx, event:&Event, scope:&mut Scope) {
         if self.animator_handle_event(cx, event).is_animating() {
             self.view.redraw(cx);
         }
 
-        let actions = self.view.handle_widget_event(cx, event);
+        let actions = cx.capture_actions(|cx| self.view.handle_event(cx, event, scope));
         if self.button(id!(left_button)).clicked(&actions) {
             self.animator_play(cx, id!(slide.hide));
         }
 
-        for action in actions.into_iter() {
-            dispatch_action(cx, action);
-        }
-
         if self.animator.animator_in_state(cx, id!(slide.hide))
             && !self.animator.is_track_animating(cx, id!(slide))
         {
             self.apply_over(cx, live! {visible: false});
         }
     }
-}
 
-#[derive(Clone, PartialEq, WidgetRef)]
-pub struct StackNavigationViewRef(pub WidgetRef);
+    fn draw_walk(&mut self, cx:&mut Cx2d, scope:&mut Scope, walk:Walk) -> DrawStep{
+        self.view.draw_walk(
+            cx,
+            scope,
+            walk.with_abs_pos(DVec2 {
+                x: self.offset,
+                y: 0.,
+            }),
+        )
+    }
+}
 
 impl StackNavigationViewRef {
     pub fn show(&mut self, cx: &mut Cx) {
@@ -186,42 +146,39 @@ enum ActiveStackView {
     Active(LiveId),
 }
 
-#[derive(Live)]
+#[derive(Live, LiveRegisterWidget, WidgetRef)]
 pub struct StackNavigation {
     #[deref]
     view: View,
+
     #[rust]
     active_stack_view: ActiveStackView,
 }
 
 impl LiveHook for StackNavigation {
-    fn before_live_design(cx: &mut Cx) {
-        register_widget!(cx, StackNavigation);
-    }
-
     fn after_new_from_doc(&mut self, _cx: &mut Cx) {
         self.active_stack_view = ActiveStackView::None;
     }
 }
 
 impl Widget for StackNavigation {
-    fn handle_widget_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, WidgetActionItem),
-    ) {
-        let mut actions = vec![];
-
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         for widget_ref in self.get_active_views(cx).iter() {
-            for a in widget_ref.handle_widget_event(cx, event) {
-                actions.push(a);
-            }
+            widget_ref.handle_event(cx, event, scope);
         }
+    }
 
-        for action in actions.into_iter() {
-            dispatch_action(cx, action);
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep  {
+        for widget_ref in self.get_active_views(cx.cx).iter() {
+            widget_ref.draw_walk(cx, scope, walk) ?;
         }
+        DrawStep::done()
+    }
+}
+
+impl WidgetNode for StackNavigation {
+    fn walk(&mut self, cx:&mut Cx) -> Walk{
+        self.view.walk(cx)
     }
 
     fn redraw(&mut self, cx: &mut Cx) {
@@ -229,20 +186,13 @@ impl Widget for StackNavigation {
             widget_ref.redraw(cx);
         }
     }
-
+    
     fn find_widgets(&mut self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet) {
-        // We're only usingView widget ability to find widgets
         self.view.find_widgets(path, cached, results);
     }
-
-    fn draw_walk_widget(&mut self, cx: &mut Cx2d, walk: Walk) -> WidgetDraw {
-        for widget_ref in self.get_active_views(cx.cx).iter() {
-            widget_ref.draw_walk_widget(cx, walk) ?;
-        }
-        WidgetDraw::done()
-    }
 }
 
+
 impl StackNavigation {
     pub fn show_stack_view_by_id(&mut self, stack_view_id: LiveId, cx: &mut Cx) {
         if let ActiveStackView::None = self.active_stack_view {
@@ -277,9 +227,6 @@ impl StackNavigation {
     }
 }
 
-#[derive(Clone, PartialEq, WidgetRef, Debug)]
-pub struct StackNavigationRef(pub WidgetRef);
-
 impl StackNavigationRef {
     pub fn show_stack_view_by_id(&mut self, stack_view_id: LiveId, cx: &mut Cx) {
         if let Some(mut inner) = self.borrow_mut() {
@@ -287,9 +234,9 @@ impl StackNavigationRef {
         }
     }
 
-    pub fn handle_stack_view_actions(&mut self, cx: &mut Cx, actions: &WidgetActions, destinations: &HashMap<StackViewAction, LiveId>) {
+    pub fn handle_stack_view_actions(&mut self, cx: &mut Cx, actions: &Actions, destinations: &HashMap<StackViewAction, LiveId>) {
         for action in actions {
-            let stack_view_action = action.action();
+            let stack_view_action = action.as_widget_action().cast();
             if let Some(stack_view_id) = destinations.get(&stack_view_action) {
                 self.show_stack_view_by_id(*stack_view_id, cx);
                 break;
diff --git a/src/shared/stack_view_action.rs b/src/shared/stack_view_action.rs
index 043316e..3ed2b0c 100644
--- a/src/shared/stack_view_action.rs
+++ b/src/shared/stack_view_action.rs
@@ -1,11 +1,11 @@
 use makepad_widgets::*;
 
-#[derive(Clone, WidgetAction, Eq, Hash, PartialEq)]
+#[derive(Clone, DefaultNone, Eq, Hash, PartialEq, Debug)]
 pub enum StackViewAction {
     None,
     ShowAddContact,
     ShowMoments,
-    ShowMyProfile,
     ShowCounterScreen,
+    ShowMyProfile,
     ShowChat,
 }
diff --git a/src/welcome/welcome_screen.rs b/src/welcome/welcome_screen.rs
index a72e2b4..b79b37c 100644
--- a/src/welcome/welcome_screen.rs
+++ b/src/welcome/welcome_screen.rs
@@ -14,84 +14,53 @@ live_design! {
     import crate::shared::search_bar::SearchBar;
     import crate::shared::custom_button::CustomButton;
 
-    IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
-    IMG_FAVORITES = dep("crate://self/resources/img/favorites.png")
-    IMG_MY_POSTS = dep("crate://self/resources/img/my-posts.png")
-    IMG_STICKER_GALLERY = dep("crate://self/resources/img/sticker-gallery.png")
-    IMG_SETTINGS = dep("crate://self/resources/img/settings.png")
-    IMG_QR = dep("crate://self/resources/img/qr_icon.png")
-
     Welcome = {{Welcome}} {
-        view: {
-            width: Fill, height: Fill
-            spacing: 10.
-            draw_bg: {
-                color: #000
-            }
-            WelcomeInfo = <View> {
-                width: Fill, height: Fill
-                flow: Right, 
-                spacing: 10., 
-                // padding: {top: 100., bottom: 100., right: 10., left: 10.}
-                align: {
-                    x: 0.5,
-                    y: 0.5
-                },
-                show_bg: true
+        // show_bg: true
+        draw_bg: {
+            color: #f00 //Color Red
+        }
+        <View> {
+            align: {x: 0.5, y: 0.5}
+            container = <RoundedView> {
+                width: 360
+                height: 400
+                flow: Down
+                align: {x: 0.5, y: 0.5}
+                spacing: 2.0
                 draw_bg: {
-                    color: #fff
+                    color: #ddd,
+                    radius: (CARD_CORNER_RADIUS)
                 }
                 <View> {
-                    width: Fill height: Fill
-                    show_bg: false
-                    // align:{ x: 0.5 }
-                    align: {x: 0.5, y: 0.5}
-                    container = <RoundedView> {
-                        width: 360
-                        height: 400
-                        flow: Down
-                        align: {x: 0.5, y: 0.5}
-                        // margin: {left: 200.0, right: 200.0, top: 100.0, bottom: 100.0}
-                        spacing: 2.0
-                        draw_bg: {
-                            color: #ddd,
-                            // border_width: 1.0,
-                            // border_color: #000,  
-                            radius: (CARD_CORNER_RADIUS)
+                    width: Fit, height: Fill
+                    flow: Down, 
+                    align: {x: 0, y: 0.5}, 
+                    padding: {top: 5., left: 10., right: 10.}, spacing: 20.
+                    username = <Label> {
+                        draw_text:{
+                            color: #000,
+                            text_style: <TEXT_SUB>{font_size: 20.},
                         }
-                        <View> {
-                            width: Fill, height: Fill
-                            flow: Down, 
-                            align: {x: 0, y: 0.5}, 
-                            padding: {top: 5., left: 10., right: 10.}, spacing: 20.
-                            username = <Label> {
-                                draw_text:{
-                                    color: #000,
-                                    text_style: <TEXT_SUB>{font_size: 20.},
-                                }
-                                text:"Welcome To Simple Nav"
-                            }
-                            message_input = <SearchBar> {
-                                show_bg: false
-                                input = {
-                                    width: Fill, height: Fit, margin: 0
-                                    empty_message: "Enter Your Name"
-                                    draw_bg: {
-                                        color: #fff
-                                        border_width: 0.5,
-                                        border_color: #b4b4b4,
-                                    }
-                                }
-                            }
-                            welcome_frame = <CustomButton> {
-                                button = {
-                                    text: "Welcome"
-                                }
+                        text:"Welcome To Simple Nav"
+                    }
+                    message_input = <SearchBar> {
+                        show_bg: false
+                        input = {
+                            width: Fill, height: Fit, margin: 0
+                            empty_message: "Enter Your Name"
+                            draw_bg: {
+                                color: #fff
+                                border_width: 0.5,
+                                border_color: #b4b4b4,
                             }
                         }
                     }
+                    welcome_frame = <CustomButton> {
+                        button = {
+                            text: "Welcome"
+                        }
+                    }
                 }
-
             }
         }
     }
@@ -102,75 +71,33 @@ live_design! {
     }
 }
 
-#[derive(Live)]
+#[derive(Live, LiveHook, Widget)]
 pub struct Welcome {
-    #[live]
-    view:View,
-}
-
-impl LiveHook for Welcome {
-    fn before_live_design(cx: &mut Cx) {
-        register_widget!(cx, Welcome);
-    }
+    #[deref] view: View
 }
 
 impl Widget for Welcome {
-    fn handle_widget_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, WidgetActionItem),
-    ) {
-        let uid = self.widget_uid();
-        self.handle_event_with(cx, event, &mut |cx, action: StackViewAction| {
-            dispatch_action(cx, WidgetActionItem::new(action.into(), uid));
-        });
-    }
-
-    fn redraw(&mut self, cx: &mut Cx) {
-        self.view.redraw(cx);
-    }
-
-    fn find_widgets(&mut self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet) {
-        self.view.find_widgets(path, cached, results);
-    }
-
-    fn draw_walk_widget(&mut self, cx: &mut Cx2d, walk: Walk) -> WidgetDraw {
-        self.view.draw_walk_widget(cx, walk)
-    }
-}
-
-impl Welcome {
-    fn handle_event_with(
-        &mut self,
-        cx: &mut Cx,
-        event: &Event,
-        dispatch_action: &mut dyn FnMut(&mut Cx, StackViewAction),
-    ) {
-        let actions = self.view.handle_widget_event(cx, event);
-
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let actions = cx.capture_actions(|cx| self.view.handle_event(cx, event, scope));
         // if self
         //     .view
-        //     .clickable_view(id!(welcome_frame))
+        //     .clickable_view(id!(my_profile_frame))
         //     .clicked(&actions)
         // {
-        //     dispatch_action(cx, StackViewAction::ShowCounterScreen);
-        //     // let input11 = self.view.text_input(id!(message_input));
-        //     let user_prompt1 = self.view.text_input(id!(message_input.input)).text();
-
-        //     log!("WELCOME BUTTON CLICKED: {}", user_prompt1); 
+        //     let uid = self.widget_uid();
+        //     cx.widget_action(uid, &scope.path, StackViewAction::ShowMyProfile);
         // }
-
         if self.view.button(id!(welcome_frame)).clicked(&actions) 
         {
-            dispatch_action(cx, StackViewAction::ShowCounterScreen);
+            let uid = self.widget_uid();
+            cx.widget_action(uid, &scope.path, StackViewAction::ShowCounterScreen);
+            // dispatch_action(cx, StackViewAction::ShowCounterScreen);
             let user_prompt1 = self.view.text_input(id!(message_input.input)).text();
             log!("WELCOME BUTTON CLICKED: {}", user_prompt1);
-            
-            // log!("BUTTON CLICKED {}", self.counter); 
-            // self.counter += 1;
-            // let label = self.view.label(id!(label1));
-            // label.set_text_and_redraw(cx,&format!("Counter: {}", self.counter));
         }
     }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
 }