diff --git a/doric-demo/src/ModalDemo.ts b/doric-demo/src/ModalDemo.ts
index e3e86ecf..2a887a4d 100644
--- a/doric-demo/src/ModalDemo.ts
+++ b/doric-demo/src/ModalDemo.ts
@@ -25,7 +25,7 @@ export class ModalDemo extends Panel {
                         textColor: Color.WHITE,
                         layoutConfig: layoutConfig().just(),
                         onClick: () => {
-                            modal(context).toast('This is a toast.')
+                            modal(this.context).toast('This is a toast.')
                         }
                     }),
                     label('toast on top'),
@@ -37,7 +37,7 @@ export class ModalDemo extends Panel {
                         textColor: Color.WHITE,
                         layoutConfig: layoutConfig().just(),
                         onClick: () => {
-                            modal(context).toast('This is a toast.', Gravity.Top)
+                            modal(this.context).toast('This is a toast.', Gravity.Top)
                         }
                     }),
 
@@ -50,7 +50,7 @@ export class ModalDemo extends Panel {
                         textColor: Color.WHITE,
                         layoutConfig: layoutConfig().just(),
                         onClick: () => {
-                            modal(context).toast('This is a toast.', Gravity.Center)
+                            modal(this.context).toast('This is a toast.', Gravity.Center)
                         }
                     } as Partial<Text>),
                     text({
@@ -70,12 +70,12 @@ export class ModalDemo extends Panel {
                         textColor: Color.WHITE,
                         layoutConfig: layoutConfig().just(),
                         onClick: () => {
-                            modal(context).alert({
+                            modal(this.context).alert({
                                 msg: 'This is alert.',
                                 title: 'Alert title',
                                 okLabel: "OkLabel"
                             }).then(e => {
-                                modal(context).toast('Clicked OK.')
+                                modal(this.context).toast('Clicked OK.')
                             })
                         }
                     }),
@@ -96,17 +96,17 @@ export class ModalDemo extends Panel {
                         textColor: Color.WHITE,
                         layoutConfig: layoutConfig().just(),
                         onClick: () => {
-                            modal(context).confirm({
+                            modal(this.context).confirm({
                                 msg: 'This is Confirm.',
                                 title: 'Confirm title',
                                 okLabel: "OkLabel",
                                 cancelLabel: 'CancelLabel',
                             }).then(
                                 () => {
-                                    modal(context).toast('Clicked OK.')
+                                    modal(this.context).toast('Clicked OK.')
                                 },
                                 () => {
-                                    modal(context).toast('Clicked Cancel.')
+                                    modal(this.context).toast('Clicked Cancel.')
                                 })
                         }
                     }),
@@ -127,17 +127,17 @@ export class ModalDemo extends Panel {
                         textColor: Color.WHITE,
                         layoutConfig: layoutConfig().just(),
                         onClick: () => {
-                            modal(context).prompt({
+                            modal(this.context).prompt({
                                 msg: 'This is Prompt.',
                                 title: 'Prompt title',
                                 okLabel: "OkLabel",
                                 cancelLabel: 'CancelLabel',
                             }).then(
                                 e => {
-                                    modal(context).toast(`Clicked OK.Input:${e}`)
+                                    modal(this.context).toast(`Clicked OK.Input:${e}`)
                                 },
                                 e => {
-                                    modal(context).toast(`Clicked Cancel.Input:${e}`)
+                                    modal(this.context).toast(`Clicked Cancel.Input:${e}`)
                                 })
                         }
                     }),
diff --git a/doric-demo/src/MultiPanelDemo.ts b/doric-demo/src/MultiPanelDemo.ts
index b1521f43..d08268ba 100644
--- a/doric-demo/src/MultiPanelDemo.ts
+++ b/doric-demo/src/MultiPanelDemo.ts
@@ -2,8 +2,9 @@ import { Group, Panel, navbar, text, gravity, Color, LayoutSpec, vlayout, Gravit
 import { title, label, colors } from "./utils";
 import { ModalDemo } from "./ModalDemo";
 import { CounterPage } from './Counter'
+import { PopoverDemo } from "./PopoverDemo";
 
-@Entry(exports = [ModalDemo, CounterPage])
+@Entry
 class MultiPanelDemo extends Panel {
     build(rootView: Group): void {
         scroller(
@@ -32,6 +33,17 @@ class MultiPanelDemo extends Panel {
                             navigator(context).push(CounterPage)
                         }
                     }),
+                    label('Popover').apply({
+                        width: 200,
+                        height: 50,
+                        backgroundColor: colors[0],
+                        textSize: 30,
+                        textColor: Color.WHITE,
+                        layoutConfig: layoutConfig().just(),
+                        onClick: () => {
+                            navigator(context).push(PopoverDemo)
+                        }
+                    }),
                     label('Multi Panel').apply({
                         width: 200,
                         height: 50,
diff --git a/doric-demo/src/PopoverDemo.ts b/doric-demo/src/PopoverDemo.ts
index 7190eeab..927ef4ff 100644
--- a/doric-demo/src/PopoverDemo.ts
+++ b/doric-demo/src/PopoverDemo.ts
@@ -17,7 +17,7 @@ import {
 import { title, label, colors } from "./utils";
 
 @Entry
-class PopoverDemo extends Panel {
+export class PopoverDemo extends Panel {
   build(rootView: Group): void {
     scroller(
       vlayout([
@@ -52,7 +52,7 @@ class PopoverDemo extends Panel {
           textColor: Color.WHITE,
           layoutConfig: layoutConfig().just(),
           onClick: () => {
-            popover(context).show(
+            popover(this.context).show(
               stack(
                 [
                   text({
@@ -69,9 +69,9 @@ class PopoverDemo extends Panel {
                     v.onClick = () => {
                       v.backgroundColor = colors[++idx % colors.length];
                     };
-                    modal(context).toast("Dismissed after 3 seconds");
+                    modal(this.context).toast("Dismissed after 3 seconds");
                     setTimeout(() => {
-                      popover(context).dismiss();
+                      popover(this.context).dismiss();
                     }, 3000);
                   }),
                 ],