diff --git a/apps/web/components/ui/UsernameAvailability/index.tsx b/apps/web/components/ui/UsernameAvailability/index.tsx
index 899ea4472f..dbc587b771 100644
--- a/apps/web/components/ui/UsernameAvailability/index.tsx
+++ b/apps/web/components/ui/UsernameAvailability/index.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
@@ -6,6 +5,8 @@ import { User } from "@calcom/prisma/client";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
 
+import useRouterQuery from "@lib/hooks/useRouterQuery";
+
 import { PremiumTextfield } from "./PremiumTextfield";
 import { UsernameTextfield } from "./UsernameTextfield";
 
@@ -21,7 +22,7 @@ export const UsernameAvailabilityField = ({
   onErrorMutation,
   user,
 }: UsernameAvailabilityFieldProps) => {
-  const [currentUsername, setCurrentUsername] = useState(user.username ?? "");
+  const { username: currentUsername, setQuery: setCurrentUsername } = useRouterQuery("username");
   const formMethods = useForm({
     defaultValues: {
       username: currentUsername,