diff --git a/packages/runtime/src/components/index.ts b/packages/runtime/src/components/index.ts
index 26a39b9..5bdfe8d 100644
--- a/packages/runtime/src/components/index.ts
+++ b/packages/runtime/src/components/index.ts
@@ -8,6 +8,7 @@ export * from "./input.r";
 export * from "./list.r";
 export * from "./paragraph.r";
 export * from "./span.r";
+export * from "./subPage.r";
 export * from "./table.r";
 export * from "./tableItem.r";
 export * from "./textNode.r";
@@ -22,12 +23,14 @@ import qInput from "./input.r";
 import qList from "./list.r";
 import qParagraph from "./paragraph.r";
 import qSpan from "./span.r";
+import qSubPage from "./subPage.r";
 import qTable from "./table.r";
 import qTableItem from "./tableItem.r";
 import qTextNode from "./textNode.r";
 
 export const componentInfoObj = {
   qAppLayout,
+  qSubPage,
   qButton,
   qCard,
   qDiv,
diff --git a/packages/runtime/src/components/subPage.r.ts b/packages/runtime/src/components/subPage.r.ts
new file mode 100644
index 0000000..339f8d9
--- /dev/null
+++ b/packages/runtime/src/components/subPage.r.ts
@@ -0,0 +1,44 @@
+import { ComponentContext, Content, OutputComponent } from "refina";
+import QuasiRuntime from "../plugin";
+import { AppLayoutModel, currentNavSymbol } from "./appLayout.r";
+import { component, content, input, textProp } from "../types";
+
+export default component({
+  displayName: () => "Sub page",
+  contents: {
+    inner: content("inner"),
+  },
+  inputs: {
+    title: input("title", "as-primary"),
+  },
+  props: {
+    icon: textProp("icon"),
+  },
+});
+
+export interface SubPageProps {
+  title: string;
+  icon: string;
+  inner: Content;
+}
+
+@QuasiRuntime.outputComponent("qSubPage")
+export class QSubPage extends OutputComponent {
+  main(_: ComponentContext, props: SubPageProps): void {
+    const model = _.$runtimeData[currentNavSymbol] as AppLayoutModel;
+
+    if (model.renderingState === "nav") {
+      model.items.push([props.title, props.icon]);
+    } else {
+      if (model.current === props.title) {
+        _.embed(props.inner);
+      }
+    }
+  }
+}
+
+declare module "refina" {
+  interface OutputComponents {
+    qSubPage: QSubPage;
+  }
+}