diff --git a/dist/index.js b/dist/index.js
index 9c1fc2f2..7540d9f1 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -811,6 +811,9 @@
   }
 
   // src/index.tsx
+  document.body.prepend(
+    /* @__PURE__ */ createElement("menu", { class: "mobile-only" }, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#settings-tab", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), translation.settings), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-tab" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), translation.messages))
+  );
   document.querySelector("main").append(SettingsTab(), MessageTab());
   document.querySelector("main").classList.add("split");
 })();
diff --git a/src/index.tsx b/src/index.tsx
index c48442d6..f46ab735 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,22 @@
 import "./styles.css";
 
+import * as React from "bloatless-react";
+
 import { MessageTab } from "./Tabs/messageTab";
 import { SettingsTab } from "./Tabs/settingsTab";
+import { translation } from "./translations";
 
+document.body.prepend(
+  <menu class="mobile-only">
+    <a class="tab-link" href="#settings-tab" active>
+        <span class="icon">settings</span>
+        {translation.settings}
+    </a>
+    <a class="tab-link" href="#message-tab">
+        <span class="icon">forum</span>
+        {translation.messages}
+    </a>
+  </menu>
+);
 document.querySelector("main")!.append(SettingsTab(), MessageTab());
 document.querySelector("main")!.classList.add("split");