diff --git a/.env.example b/.env.example
index 4f5b54116e5..7dd9377434b 100644
--- a/.env.example
+++ b/.env.example
@@ -188,7 +188,7 @@ VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 
 ###################################################################
 # Vite local development without running a server.                #
-# set VITE_LOCA_DEV to true                                       #
+# set VITE_LOCAL_DEV to true                                       #
 # set VITE_HTTP_PROXY_TARGET to the rediction for the API calls.  #
 ###################################################################
 # VITE_LOCAL_DEV=true
diff --git a/vite.config.ts b/vite.config.ts
index e90f70b75f3..f7dc776ffeb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,108 +1,142 @@
-import { fileURLToPath, URL } from 'node:url';
-import { defineConfig, loadEnv, UserConfig } from 'vite';
-import laravel from 'laravel-vite-plugin';
-import vue from '@vitejs/plugin-vue';
-import i18n from 'laravel-vue-i18n/vite';
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig, loadEnv, PluginOption, UserConfig } from "vite";
+import laravel from "laravel-vite-plugin";
+import vue from "@vitejs/plugin-vue";
+import i18n from "laravel-vue-i18n/vite";
 
 const laravelPlugin = laravel({
-    input: [
-      'resources/sass/app.scss',
-      'resources/js/app.ts',
-    ],
-    refresh: true,
-  })
+	input: ["resources/sass/app.scss", "resources/js/app.ts"],
+	refresh: true,
+});
 
-const baseConfig =   {
-  base: './',
-  plugins: [
-    vue(
-    {
-      template: {
-        transformAssetUrls: {
-          base: null,
-          includeAbsolute: false,
-        },
-      },
-    }),
-    i18n(),
-  ],
-  server: {
-    watch: {
-      ignored: [
-        "**/.*/**",
-        "**/app/**",
-        "**/database/**",
-        "**/node_modules/**",
-        "**/public/**",
-        "**/storage/**",
-        "**/tests/**",
-        "**/vendor/**",
-        "**/presets/**",
-      ],
-    },
-  },
-  resolve: {
-    alias: {
-      // @ts-ignore-next-line
-      '@': fileURLToPath(new URL('./resources/js/', import.meta.url)),
-      vue: 'vue/dist/vue.esm-bundler.js',
-    },
-  },
-  build: {
-    rollupOptions: {
-        output:{
-            manualChunks(id) {
-                if (id.includes('node_modules')) {
-                    return id.toString().split('node_modules/')[1].split('/')[0].toString();
-                }
-            }
-        }
-    }
+const localDevelopMiddleware: PluginOption = {
+  name: "develop-rewrite-middleware",
+  configureServer(server) {
+    const viteIndexPath = "/vite/index.html";
+
+    server.middlewares.use((req, res, next) => {
+      if (!req.url) {
+        next();
+        return;
+      }
+
+      const requestUrl : string = req.url;
+      const doNotTouch = ["/@", "/api", "/resources", "/node_modules"];
+      if (doNotTouch.some((page) => requestUrl.startsWith(page))) {
+        next();
+        return;
+      }
+
+      console.log(req.url);
+      const startsWithPages = ["/gallery", "/frame", "/map", "/search"];
+      // Check if req.url starts with pages
+      if (startsWithPages.some((page) => requestUrl.startsWith(page))) {
+        req.url = viteIndexPath;
+      }
+
+      const pages = [
+        "/",
+        "/diagnostics",
+        "/permissions",
+        "/jobs",
+        "/maintenance",
+        "/profile",
+        "/settings",
+        "/sharing",
+        "/statistics",
+        "/users",
+      ];
+      // Check if requestUrl is in pages
+      if (pages.includes(requestUrl)) {
+        req.url = viteIndexPath;
+      }
+
+      next();
+    });
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: 'modern'
-      },
-    }
-  }
-} as UserConfig;
+}
 
+const baseConfig = {
+	base: "./",
+	plugins: [
+		vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false } } }),
+		i18n(),
+	],
+	server: {
+		watch: {
+			ignored: [
+				"**/.*/**",
+				"**/app/**",
+				"**/database/**",
+				"**/node_modules/**",
+				"**/public/**",
+				"**/storage/**",
+				"**/tests/**",
+				"**/vendor/**",
+				"**/presets/**",
+			],
+		},
+	},
+	resolve: {
+		alias: {
+			// @ts-ignore-next-line
+			"@": fileURLToPath(new URL("./resources/js/", import.meta.url)),
+			vue: "vue/dist/vue.esm-bundler.js",
+		},
+	},
+	build: {
+		rollupOptions: {
+			output: {
+				manualChunks(id) {
+					if (id.includes("node_modules")) {
+						return id.toString().split("node_modules/")[1].split("/")[0].toString();
+					}
+				},
+			},
+		},
+	},
+	css: {
+		preprocessorOptions: {
+			scss: {
+				api: "modern",
+			},
+		},
+	},
+} as UserConfig;
 
 /** @type {import('vite').UserConfig} */
-export default defineConfig(
-  ({ command, mode, isSsrBuild, isPreview }) => {
-    const config = baseConfig;
-    const env = loadEnv(mode, process.cwd(), '')
-
-    if (config.server === undefined) {
-      throw new Error('server config is missing');
-    }
-    if (config.plugins === undefined) {
-      throw new Error('plugins list is missing');
-    }
+export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
+	const config = baseConfig;
+	const env = loadEnv(mode, process.cwd(), "");
 
-    if (command === 'serve') {
+	if (config.server === undefined) {
+		throw new Error("server config is missing");
+	}
+	if (config.plugins === undefined) {
+		throw new Error("plugins list is missing");
+	}
 
-      console.log("LOCAL VITE MODE detected")
-      if (env.VITE_HTTP_PROXY_TARGET !== undefined) {
-        console.log("api calls will be forwarded to:")
-        console.log(env.VITE_HTTP_PROXY_TARGET);
-      }
+	if (command === "serve") {
+		console.log("LOCAL VITE MODE detected");
+		if (env.VITE_HTTP_PROXY_TARGET !== undefined) {
+			console.log("api calls will be forwarded to:");
+			console.log(env.VITE_HTTP_PROXY_TARGET);
+		}
 
-      if (env.VITE_LOCAL_DEV === 'true') {
-        if (env.VITE_HTTP_PROXY_TARGET === undefined) {
-          throw new Error('VITE_HTTP_PROXY_TARGET is missing');
-        }
-        config.server.open = 'vite/index.html';
-        config.server.proxy =  {
-          '/api/': env.VITE_HTTP_PROXY_TARGET,
-        }
-        return config;
-      }
-    }
+		if (env.VITE_LOCAL_DEV === "true") {
+			if (env.VITE_HTTP_PROXY_TARGET === undefined) {
+				throw new Error("VITE_HTTP_PROXY_TARGET is missing");
+			}
+			config.server.open = "vite/index.html";
+			config.server.proxy = {
+				"/api/": env.VITE_HTTP_PROXY_TARGET,
+			};
+			config.plugins.push(localDevelopMiddleware);
+			return config;
+		}
+	}
 
-    // command === 'build'
-    config.plugins.push(laravelPlugin);
-    return config;
-  });
+	// command === 'build'
+	config.plugins.push(laravelPlugin);
+	return config;
+});