diff --git a/dist/index.js b/dist/index.js
index c6abccf1..98ce4422 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -96,9 +96,19 @@
     return translations.en[key];
   }
 
+  // src/messageTab.tsx
+  function MessageTab() {
+    return /* @__PURE__ */ createElement("article", { id: "message-tab" }, /* @__PURE__ */ createElement("header", null, getText("messages")));
+  }
+
+  // src/settingsTab.tsx
+  function SettingsTab() {
+    return /* @__PURE__ */ createElement("article", { id: "settings-tab" }, /* @__PURE__ */ createElement("header", null, getText("settings")));
+  }
+
   // src/index.tsx
   document.body.prepend(
-    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "settings-tab", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "message-tab" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), getText("messages")))
+    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#settings-tab", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-tab" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), getText("messages")))
   );
-  document.querySelector("main").append();
+  document.querySelector("main").append(SettingsTab(), MessageTab());
 })();
diff --git a/src/messageTab.tsx b/src/messageTab.tsx
index 57578d0b..e485780b 100644
--- a/src/messageTab.tsx
+++ b/src/messageTab.tsx
@@ -3,5 +3,9 @@ import * as React from "bloatless-react";
 import { getText } from "./translations";
 
 export function MessageTab() {
-  return <article></article>;
+  return (
+    <article id="message-tab">
+      <header>{getText("messages")}</header>
+    </article>
+  );
 }
diff --git a/src/settingsTab.tsx b/src/settingsTab.tsx
index ad511132..2cba13c5 100644
--- a/src/settingsTab.tsx
+++ b/src/settingsTab.tsx
@@ -3,5 +3,9 @@ import * as React from "bloatless-react";
 import { getText } from "./translations";
 
 export function SettingsTab() {
-  return <article></article>;
+  return (
+    <article id="settings-tab">
+      <header>{getText("settings")}</header>
+    </article>
+  );
 }