diff --git a/packages/runtime/src/components/appLayout.r.ts b/packages/runtime/src/components/appLayout.r.ts
new file mode 100644
index 0000000..d0e9698
--- /dev/null
+++ b/packages/runtime/src/components/appLayout.r.ts
@@ -0,0 +1,45 @@
+/// <reference types="vite/client" />
+import { ComponentContext, Content, OutputComponent } from "refina";
+import QuasiRuntime from "../plugin";
+import { Direction, component, content, textProp } from "../types";
+
+export default component({
+  displayName: () => "App layout",
+  contents: {
+    title: content("title", "as-primary"),
+    topBar: content("top bar", "as-socket"),
+    main: content("main", "as-socket", Direction.BOTTOM),
+  },
+  props: {
+    class: textProp("class"),
+  },
+});
+
+export interface AppLayoutProps {
+  class: string;
+  title: string;
+  topBar: Content;
+  main: Content;
+}
+
+@QuasiRuntime.outputComponent("qAppLayout")
+export class QAppLayout extends OutputComponent {
+  main(_: ComponentContext, props: AppLayoutProps): void {
+    _.$cls(props.class);
+    _.mdTopAppBar(_ => {
+      _.mdTopAppBarTitle(
+        _ =>
+          _.$css`user-select:none;text-decoration:none;color:inherit` &&
+          _._a({ href: window.__QUASI_PREVIEW__ ? "" : import.meta.env.BASE_URL }, props.title),
+      );
+      _.embed(props.topBar);
+    });
+    _.mdLayoutMain(props.main);
+  }
+}
+
+declare module "refina" {
+  interface OutputComponents {
+    qAppLayout: QAppLayout;
+  }
+}
diff --git a/packages/runtime/src/components/appbar.r.ts b/packages/runtime/src/components/appbar.r.ts
deleted file mode 100644
index bf77a53..0000000
--- a/packages/runtime/src/components/appbar.r.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ComponentContext, Content, OutputComponent } from "refina";
-import QuasiRuntime from "../plugin";
-import { component, content, textProp } from "../types";
-
-export default component({
-  displayName: () => "Appbar",
-  contents: {
-    inner: content("inner", "as-socket"),
-  },
-  props: {
-    class: textProp("class"),
-  },
-});
-
-export interface AppbarProps {
-  class: string;
-  inner: Content;
-}
-
-@QuasiRuntime.outputComponent("qAppbar")
-export class QAppbar extends OutputComponent {
-  main(_: ComponentContext, props: AppbarProps): void {
-    _.$cls(props.class);
-    _.mdTopAppBar(props.inner);
-  }
-}
-
-declare module "refina" {
-  interface OutputComponents {
-    qAppbar: QAppbar;
-  }
-}
diff --git a/packages/runtime/src/components/index.ts b/packages/runtime/src/components/index.ts
index 6edfecd..5a929ff 100644
--- a/packages/runtime/src/components/index.ts
+++ b/packages/runtime/src/components/index.ts
@@ -1,4 +1,4 @@
-export * from "./appbar.r";
+export * from "./appLayout.r";
 export * from "./button.r";
 export * from "./div.r";
 export * from "./forEach.r";
@@ -11,7 +11,7 @@ export * from "./table.r";
 export * from "./tableItem.r";
 export * from "./textNode.r";
 
-import qAppbar from "./appbar.r";
+import qAppLayout from "./appLayout.r";
 import qButton from "./button.r";
 import qDiv from "./div.r";
 import qForEach from "./forEach.r";
@@ -25,7 +25,7 @@ import qTableItem from "./tableItem.r";
 import qTextNode from "./textNode.r";
 
 export const componentInfoObj = {
-  qAppbar,
+  qAppLayout,
   qButton,
   qDiv,
   qForEach,