diff --git a/ng-app-native/.gitignore b/ng-app-native/.gitignore
index a547bf3..a49d34c 100644
--- a/ng-app-native/.gitignore
+++ b/ng-app-native/.gitignore
@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-web
 dist-ssr
 *.local
 
diff --git a/ng-app-native/package.json b/ng-app-native/package.json
index 0405ff1..5394766 100644
--- a/ng-app-native/package.json
+++ b/ng-app-native/package.json
@@ -5,6 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "webdev": "cross-env NG_APP_WEB=1 TAURI_DEBUG=1 vite",
+    "webbuild": "cross-env NG_APP_WEB=1 vite build",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
@@ -24,6 +26,7 @@
     "@tsconfig/svelte": "^3.0.0",
     "@types/node": "^18.7.10",
     "autoprefixer": "^10.4.14",
+    "cross-env": "^7.0.3",
     "internal-ip": "^7.0.0",
     "postcss": "^8.4.23",
     "postcss-load-config": "^4.0.1",
diff --git a/ng-app-native/pnpm-lock.yaml b/ng-app-native/pnpm-lock.yaml
index 1fe4f57..bed661f 100644
--- a/ng-app-native/pnpm-lock.yaml
+++ b/ng-app-native/pnpm-lock.yaml
@@ -9,6 +9,7 @@ specifiers:
   '@types/node': ^18.7.10
   autoprefixer: ^10.4.14
   classnames: ^2.3.2
+  cross-env: ^7.0.3
   flowbite: ^1.6.5
   flowbite-svelte: ^0.37.1
   internal-ip: ^7.0.0
@@ -37,6 +38,7 @@ devDependencies:
   '@tsconfig/svelte': 3.0.0
   '@types/node': 18.16.13
   autoprefixer: 10.4.14_postcss@8.4.23
+  cross-env: 7.0.3
   internal-ip: 7.0.0
   postcss: 8.4.23
   postcss-load-config: 4.0.1_postcss@8.4.23
@@ -557,6 +559,14 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
+  /cross-env/7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+    dependencies:
+      cross-spawn: 7.0.3
+    dev: true
+
   /cross-spawn/7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
diff --git a/ng-app-native/src/lib/Greet.svelte b/ng-app-native/src/lib/Greet.svelte
index 05c46ef..b96dbaf 100644
--- a/ng-app-native/src/lib/Greet.svelte
+++ b/ng-app-native/src/lib/Greet.svelte
@@ -1,21 +1,30 @@
 <script lang="ts">
-  import { invoke } from "@tauri-apps/api/tauri"
-
   let name = "";
-  let greetMsg = ""
+  let greetMsg = "";
+  let ng;
+
+  if (import.meta.env.NG_APP_WEB) {
+    ng = {
+      greet: async function (n) {
+        return "greetings from web " + n;
+      },
+    };
+  } else {
+    import("@tauri-apps/api/tauri").then((tauri) => {
+      ng = { greet: (n) => tauri.invoke("greet", { name: n }) };
+    });
+  }
 
-  async function greet(){
+  async function greet() {
     // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    greetMsg = await invoke("greet", { name })
+    greetMsg = await ng.greet(name);
   }
 </script>
 
 <div>
   <div class="row">
     <input id="greet-input" placeholder="Enter a name..." bind:value={name} />
-    <button on:click={greet}>
-      Greet
-    </button>
+    <button on:click={greet}> Greet </button>
   </div>
   <p>{greetMsg}</p>
-</div>
\ No newline at end of file
+</div>
diff --git a/ng-app-native/src/routes/Home.svelte b/ng-app-native/src/routes/Home.svelte
index 62bc65e..51d3200 100644
--- a/ng-app-native/src/routes/Home.svelte
+++ b/ng-app-native/src/routes/Home.svelte
@@ -1,3 +1,8 @@
+<script>
+  import { Button } from "flowbite-svelte";
+  import { link } from "svelte-spa-router";
+</script>
+
 <main class="container2">
   <div class="row">
     <img src="/nextgraph.svg" class="logo block h-40" alt="NextGraph Logo" />
@@ -5,27 +10,29 @@
   <h1 class="text-2xl mb-10">Welcome to NextGraph</h1>
 
   <div class="row">
-    <button
-      type="button"
-      class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mr-2 mb-2"
-    >
-      <svg
-        class="w-8 h-8 mr-2 -ml-1"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.5"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-        aria-hidden="true"
+    <a href="/test" use:link>
+      <button
+        type="button"
+        class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mr-2 mb-2"
       >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
-        />
-      </svg>
-      Create account
-    </button>
+        <svg
+          class="w-8 h-8 mr-2 -ml-1"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
+          />
+        </svg>
+        Create account
+      </button>
+    </a>
   </div>
   <div class="row mt-10">
     <button
diff --git a/ng-app-native/src/routes/Test.svelte b/ng-app-native/src/routes/Test.svelte
index a66e8f8..6363a34 100644
--- a/ng-app-native/src/routes/Test.svelte
+++ b/ng-app-native/src/routes/Test.svelte
@@ -2,7 +2,7 @@
   import Greet from "../lib/Greet.svelte";
 </script>
 
-<main class="container">
+<main class="container2">
   <h1>Welcome to test</h1>
 
   <div class="row">
diff --git a/ng-app-native/vite.config.ts b/ng-app-native/vite.config.ts
index d8437cd..b4cbd9c 100644
--- a/ng-app-native/vite.config.ts
+++ b/ng-app-native/vite.config.ts
@@ -24,21 +24,22 @@ export default defineConfig(async () => {
   clearScreen: false,
   // tauri expects a fixed port, fail if that port is not available
   server: {
-    port: 1420,
+    port: process.env.NG_APP_WEB ? 1421 : 1420,
     host: '0.0.0.0',
     strictPort: true,
     hmr: {
       protocol: 'ws',
       host,
-      port: 5183,
+      port: process.env.NG_APP_WEB ? 5184 : 5183,
     },
   },
   // to make use of `TAURI_DEBUG` and other env variables
   // https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
-  envPrefix: ["VITE_", "TAURI_"],
+  envPrefix: ["VITE_", "TAURI_", "NG_"],
   build: {
+    outDir: process.env.NG_APP_WEB ? 'dist-web' : 'dist',
     // Tauri supports es2021
-    target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
+    target: process.env.NG_APP_WEB ? 'modules' : process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
     // don't minify for debug builds
     minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
     // produce sourcemaps for debug builds