diff --git a/src/App2.vue b/src/App2.vue
index db087f0..ce61206 100644
--- a/src/App2.vue
+++ b/src/App2.vue
@@ -1,12 +1,64 @@
 <template>
     <!-- <HelloWorld msg="Welcome to Your Vue.js plus TypeScript App" /> -->
 
-    <!-- <link
-        rel="stylesheet"
-        href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
-        integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
-        crossorigin="anonymous"
-    /> -->
+    <nav class="navbar navbar-light border-bottom" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+            <a class="navbar-item" href="/">
+                <!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> -->
+                <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
+            </a>
+            <a id="menu-icon" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" :class="active ? 'is-active' : ''" @click="showMobilemenu">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </a>
+        </div>
+        <div id="navMenu" class="navbar-menu" :class="active ? 'is-active' : ''">
+            <ul class="navbar-start" style="flex-grow: 1; justify-content: center">
+                <li class="navbar-item">
+                    <a class="navbar-link is-arrowless active" href="//tethys.at">STARTSEITE</a>
+                    <!-- <router-link class="navbar-link is-arrowless" to="/">STARTSEITE</router-link> -->
+                </li>
+                <li class="navbar-item">
+                    <a class="navbar-link is-arrowless" href="//tethys.at/search">SEARCH</a>
+                    <!-- <router-link class="navbar-link is-arrowless" to="/search">SEARCH</router-link> -->
+                </li>
+                <li class="navbar-item">
+                    <a class="navbar-link is-arrowless" href="//tethys.at/services">SERVICES</a>
+                    <!-- <router-link class="navbar-link is-arrowless" to="/services">SERVICES</router-link> -->
+                </li>
+                <li class="navbar-item">
+                    <a class="navbar-link is-arrowless" href="//tethys.at/help">HELP</a>
+                    <!-- <router-link class="navbar-link is-arrowless" to="/help">HELP</router-link> -->
+                </li>
+                <!-- <li class="navbar-item">
+                    <router-link class="navbar-link is-arrowless" to="/map">MAP</router-link>
+                </li> -->
+                <!-- <li class="navbar-item">
+                    <a class="navbar-link is-arrowless" href="#">HELP</a>
+                </li> -->
+                <li class="navbar-item">
+                    <a class="navbar-link is-arrowless" href="//tethys.at/oai">OAI</a>
+                    <!-- <router-link target="_blank" class="navbar-link is-arrowless" to="/oai">OAI</router-link> -->
+                </li>
+                <!-- 
+                <a href="#" class="custom-btn"><i class="fas fa-sign-in-alt"></i>SIGN IN</a> -->
+            </ul>
+            <div class="navbar-end">
+                <div class="navbar-item">
+                    <div class="buttons">
+                        <a v-bind:href="portal" class="button is-primary custom-button">
+                            <i class="fas fa-sign-in-alt"></i>
+                            <!-- <fa :icon="['fas', 'phone']" class="fas fa-sign-in-alt" /> -->
+                            <!-- </span> -->
+                            <strong>Sign in</strong>
+                        </a>
+                        <!-- <a class="button is-light"> Log in </a> -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
 
     <!-- <home-view-component></home-view-component> -->
     <router-view></router-view>
diff --git a/src/main.ts b/src/main.ts
index 23e89c9..50a9bf9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-// import App2 from "./App2.vue";
+import App2 from "./App2.vue";
 import "./assets/scss/main-styles.scss";
 // import FontAwesomeIcon from "@/utilities/fontawesome";
 import index from "./router/index";
@@ -11,17 +11,17 @@ import VueMatomo from "vue-matomo";
 const host = window.location.host;
 const parts = host.split(".");
 // const domainLength = 2; // route1.example.com => domain length = 3
-let router;
+let router, app;
 // let routes;
 if (parts[0] === "doi") {
     router = route1;
-    // app = App2;
+    app = App2;
 } else {
     // If you want to do something else just comment the line below
     router = index;
-    // app = App;
+    app = App;
 }
-const app = App;
+// const app = App;
 
 createApp(app)
     .use(VueMatomo, {