diff --git a/src/extensions/example-extension/example-extension.tsx b/src/extensions/example-extension/example-extension.tsx
index f360cbf3cf..8ee52e6f66 100644
--- a/src/extensions/example-extension/example-extension.tsx
+++ b/src/extensions/example-extension/example-extension.tsx
@@ -1,30 +1,30 @@
-import { DynamicPageType, Icon, LensExtension } from "@lens/extensions"; // fixme: map to generated types from "extension-api.ts"
+import { Button, DynamicPageType, Icon, LensExtension } from "@lens/extensions"; // fixme: map to generated types from "extension-api.ts"
 import React from "react";
 import path from "path";
 
+let extension: ExampleExtension; // todo: provide instance from context
+
 export default class ExampleExtension extends LensExtension {
   protected unRegisterPage = Function();
 
   onActivate() {
+    extension = this
     console.log('EXAMPLE EXTENSION: ACTIVATE', this.getMeta())
-    const { dynamicPages, components: { MainLayout } } = this.runtime;
+    const { dynamicPages } = this.runtime;
 
     this.unRegisterPage = dynamicPages.register({
       type: DynamicPageType.CLUSTER,
       path: "/extension-example",
       menuTitle: "Example Extension",
       components: {
-        Page: () => (
-          <MainLayout>
-            <ExtensionPage/>
-          </MainLayout>
-        ),
+        Page: ExtensionPage,
         MenuIcon: ExtensionIcon,
       }
     })
   }
 
   onDeactivate() {
+    extension = null;
     console.log('EXAMPLE EXTENSION: DEACTIVATE', this.getMeta());
     this.unRegisterPage();
   }
@@ -34,16 +34,22 @@ export function ExtensionIcon(props: {} /*IconProps |*/) {
   return <Icon {...props} material="camera" tooltip={path.basename(__filename)}/>
 }
 
-// todo: provide extension-instance and lens-runtime (context/props/extension-js-scope)
 export class ExtensionPage extends React.Component {
+  deactivate = () => {
+    extension.runtime.navigate("/")
+    extension.disable();
+  }
+
   render() {
+    const { MainLayout } = extension.runtime.components;
     return (
-      <div className="ExampleExtension" style={{ padding: "20px" }}>
-        <div className="content flex column gaps align-flex-start">
+      <MainLayout className="ExampleExtension">
+        <div className="flex column gaps align-flex-start">
           <p>Hello from extensions-api!</p>
           <p>File: <i>{__filename}</i></p>
+          <Button accent label="Deactivate" onClick={this.deactivate}/>
         </div>
-      </div>
+      </MainLayout>
     )
   }
 }
diff --git a/src/extensions/lens-runtime.ts b/src/extensions/lens-runtime.ts
index 4e335317e1..5fdc4c35eb 100644
--- a/src/extensions/lens-runtime.ts
+++ b/src/extensions/lens-runtime.ts
@@ -3,8 +3,10 @@
 import logger from "../main/logger";
 import { dynamicPages } from "./register-page";
 import { MainLayout } from "../renderer/components/layout/main-layout";
+import { navigate } from "../renderer/navigation";
 
 export interface LensRuntimeRendererEnv {
+  navigate: typeof navigate;
   logger: typeof logger;
   dynamicPages: typeof dynamicPages
   components: {
@@ -15,6 +17,7 @@ export interface LensRuntimeRendererEnv {
 export function getLensRuntime(): LensRuntimeRendererEnv {
   return {
     logger,
+    navigate,
     dynamicPages,
     components: {
       MainLayout // fixme: refactor, import as pure component from "@lens/extensions"