diff --git a/.gitignore b/.gitignore
index 9b35480..5e91b56 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,7 +43,6 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
 lib64/
 parts/
 sdist/
diff --git a/frontend/src/lib/components/MobileTabBar.svelte b/frontend/src/lib/components/MobileTabBar.svelte
new file mode 100644
index 0000000..879b1e1
--- /dev/null
+++ b/frontend/src/lib/components/MobileTabBar.svelte
@@ -0,0 +1,24 @@
+<nav class="mobile-tab-bar">
+  <a href="/">Home</a>
+  <a href="/profile">Profile</a>
+  <a href="/settings">Settings</a>
+</nav>
+
+<style>
+  .mobile-tab-bar {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    padding: 1rem;
+    background-color: #222;
+    color: white;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+  }
+  a {
+    color: white;
+    text-decoration: none;
+    font-size: 0.9rem;
+  }
+</style>
diff --git a/frontend/src/lib/components/OnlyMobile.svelte b/frontend/src/lib/components/OnlyMobile.svelte
new file mode 100644
index 0000000..c19853d
--- /dev/null
+++ b/frontend/src/lib/components/OnlyMobile.svelte
@@ -0,0 +1,17 @@
+<script>
+    import { onMount } from "svelte";
+    import { isTauri } from "@tauri-apps/api/core";
+
+    let { children } = $props();
+    let isNative = $state(false);
+    let mounted = $state(false);
+
+    onMount(() => {
+        isNative = isTauri();
+        mounted = true;
+    });
+</script>
+
+{#if mounted && isNative}
+    {@render children()}
+{/if}
diff --git a/frontend/src/lib/components/OnlyWeb.svelte b/frontend/src/lib/components/OnlyWeb.svelte
new file mode 100644
index 0000000..d975b8e
--- /dev/null
+++ b/frontend/src/lib/components/OnlyWeb.svelte
@@ -0,0 +1,17 @@
+<script>
+    import { onMount } from "svelte";
+    import { isTauri } from "@tauri-apps/api/core";
+
+    let { children } = $props();
+    let isNative = $state(false);
+    let mounted = $state(false);
+
+    onMount(() => {
+        isNative = isTauri();
+        mounted = true;
+    });
+</script>
+
+{#if mounted && !isNative}
+    {@render children()}
+{/if}
diff --git a/frontend/src/lib/components/WebFooter.svelte b/frontend/src/lib/components/WebFooter.svelte
new file mode 100644
index 0000000..8c672a7
--- /dev/null
+++ b/frontend/src/lib/components/WebFooter.svelte
@@ -0,0 +1,12 @@
+<footer class="web-footer">
+  <p>&copy; 2026 My Website. All rights reserved.</p>
+</footer>
+
+<style>
+  .web-footer {
+    padding: 1rem;
+    text-align: center;
+    background-color: #f4f4f4;
+    margin-top: auto;
+  }
+</style>
diff --git a/frontend/src/lib/components/WebNavbar.svelte b/frontend/src/lib/components/WebNavbar.svelte
new file mode 100644
index 0000000..2a54978
--- /dev/null
+++ b/frontend/src/lib/components/WebNavbar.svelte
@@ -0,0 +1,23 @@
+<nav class="web-navbar">
+  <h1>My Website</h1>
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/about">About</a></li>
+  </ul>
+</nav>
+
+<style>
+  .web-navbar {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+    background-color: #333;
+    color: white;
+  }
+  ul {
+    display: flex;
+    gap: 1rem;
+    list-style: none;
+  }
+  a { color: white; text-decoration: none; }
+</style>