diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..c3a84df
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export * from './page';
diff --git a/src/components/page.ts b/src/components/page.ts
new file mode 100644
index 0000000..3c7a459
--- /dev/null
+++ b/src/components/page.ts
@@ -0,0 +1 @@
+export * from './page/page';
diff --git a/src/components/page/page.css b/src/components/page/page.css
new file mode 100644
index 0000000..a703555
--- /dev/null
+++ b/src/components/page/page.css
@@ -0,0 +1,6 @@
+:host {
+  display: flow-root;
+  color: rgb(var(--mm-color-on-background));
+  background-color: rgb(var(--mm-color-background));
+  font-family: Roboto, system-ui;
+}
diff --git a/src/components/page/page.html b/src/components/page/page.html
new file mode 100644
index 0000000..13e0e91
--- /dev/null
+++ b/src/components/page/page.html
@@ -0,0 +1 @@
+<slot></slot>
diff --git a/src/components/page/page.ts b/src/components/page/page.ts
new file mode 100644
index 0000000..c08e3b0
--- /dev/null
+++ b/src/components/page/page.ts
@@ -0,0 +1,40 @@
+import { useElement } from '../../core/element';
+import { defaultTheme, generateCSSKeys, overrideColorKeys } from '../../utils/theme';
+import template from './page.html';
+import style from './page.css';
+
+const name = 'mm-page';
+const props = {
+  theme: 'auto' as 'auto' | 'light' | 'dark',
+};
+
+const themeStyle = /* css */ `
+:host {
+  ${generateCSSKeys(defaultTheme)}
+}
+@media (prefers-color-scheme: light) {
+  :host {
+    ${overrideColorKeys.light}
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :host {
+    ${overrideColorKeys.dark}
+  }
+}
+:host([theme="light"]) {
+  ${overrideColorKeys.light}
+}
+:host([theme="dark"]) {
+  ${overrideColorKeys.dark}
+}`;
+
+export class Page extends useElement({
+  template,
+  style: [style, themeStyle],
+  props,
+}) {
+  declare theme: typeof props.theme;
+}
+
+Page.define(name);
diff --git a/src/main.ts b/src/main.ts
index e69de29..c567e3b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1 @@
+export * as components from './components/index';