diff --git a/src/App.vue b/src/App.vue
index 39422761e..d41a510d0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,24 @@
 <template>
+  <div id="app">
+    <MobileHeader />
     <router-view />
+  </div>
 </template>
 
-<script lang="ts" setup>
-// import { defineComponent } from 'vue'
+<script>
+import MobileHeader from './components/MobileHeader.vue';
 
-// export default defineComponent({
-//   name: 'App',
-
-//   components: {
-//     HelloWorld,
-//   },
-
-//   data () {
-//     return {
-//       //
-//     }
-//   },
-// })
+export default {
+  name: 'App',
+  components: {
+    MobileHeader
+  }
+};
 </script>
+
+<style>
+body {
+  margin: 0;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+</style>
diff --git a/src/components/MobileHeader.vue b/src/components/MobileHeader.vue
new file mode 100644
index 000000000..8e2025150
--- /dev/null
+++ b/src/components/MobileHeader.vue
@@ -0,0 +1,52 @@
+<template>
+  <header class="mobile-header">
+    <h1 class="title">CircuitVerse Simulator</h1>
+    <nav class="nav-links">
+      <a href="/simulatorvue/">Simulator</a>
+      <a href="/docs">Docs</a>
+      <a href="/about">About</a>
+    </nav>
+  </header>
+</template>
+
+<script>
+export default {
+  name: "MobileHeader"
+};
+</script>
+
+<style scoped>
+.mobile-header {
+  background-color: #003366;
+  color: white;
+  padding: 1rem;
+  text-align: center;
+}
+.title {
+  font-size: 1.8rem;
+}
+.nav-links {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 0.5rem;
+}
+.nav-links a {
+  color: #fff;
+  text-decoration: none;
+  margin: 0.5rem 1rem;
+  font-size: 1rem;
+}
+.nav-links a:hover {
+  text-decoration: underline;
+}
+@media (max-width: 600px) {
+  .title {
+    font-size: 1.4rem;
+  }
+  .nav-links a {
+    margin: 0.25rem;
+    font-size: 0.9rem;
+  }
+}
+</style>