diff --git a/apps/web/lib/buildLegacyCtx.tsx b/apps/web/lib/buildLegacyCtx.tsx
index 73df2075e9..834a36a201 100644
--- a/apps/web/lib/buildLegacyCtx.tsx
+++ b/apps/web/lib/buildLegacyCtx.tsx
@@ -56,7 +56,7 @@ export const buildLegacyCtx = (
   searchParams: SearchParams
 ) => {
   return {
-    query: { ...searchParams, ...params },
+    query: { ...searchParams, ...decodeParams(params) },
     // decoding is required to be backward compatible with Pages Router
     // because Next.js App Router does not auto-decode query params while Pages Router does
     // e.g., params: { name: "John%20Doe" } => params: { name: "John Doe" }
diff --git a/apps/web/playwright/booking-pages.e2e.ts b/apps/web/playwright/booking-pages.e2e.ts
index e10bc3fa33..4a6a934e8d 100644
--- a/apps/web/playwright/booking-pages.e2e.ts
+++ b/apps/web/playwright/booking-pages.e2e.ts
@@ -63,6 +63,20 @@ test("check SSR and OG - User Event Type", async ({ page, users }) => {
 
 todo("check SSR and OG - Team Event Type");
 
+test.describe("user with a special character in the username", () => {
+  test("/[user] page shouldn't 404", async ({ page, users }) => {
+    const user = await users.create({ username: "franz-janßen" });
+    const response = await page.goto(`/${user.username}`);
+    expect(response?.status()).not.toBe(404);
+  });
+
+  test("/[user]/[type] page shouldn't 404", async ({ page, users }) => {
+    const user = await users.create({ username: "franz-janßen" });
+    const response = await page.goto(`/${user.username}/30-min`);
+    expect(response?.status()).not.toBe(404);
+  });
+});
+
 test.describe("free user", () => {
   test.beforeEach(async ({ page, users }) => {
     const free = await users.create(freeUserObj);