diff --git a/src/components/AccountDetails/Avatar.tsx b/src/components/AccountDetails/Avatar.tsx
index dc7a15db9..fa9d0e9aa 100644
--- a/src/components/AccountDetails/Avatar.tsx
+++ b/src/components/AccountDetails/Avatar.tsx
@@ -8,6 +8,7 @@ import { MyKyc } from 'state/kyc/actions'
 import { ReactComponent as Edit } from '../../assets/images/edit.svg'
 import { ReactComponent as DefaultAvatar } from '../../assets/images/default-avatar.svg'
 import styled from 'styled-components'
+import { useQueryParams } from 'hooks/useParams'
 
 interface ModalProps {
   isModalOpen: boolean
@@ -21,6 +22,7 @@ interface AvatarProps {
 }
 
 const Avatar: React.FC<AvatarProps> = ({ kyc, toggleWalletModal }) => {
+  const { objectParams } = useQueryParams<{ referralCode: string }>(['referralCode'])
   const [modalProps, setModalProps] = useState<ModalProps>({ isModalOpen: false, referralCode: '' })
 
   const closeModal = () => {
@@ -30,8 +32,8 @@ const Avatar: React.FC<AvatarProps> = ({ kyc, toggleWalletModal }) => {
     setModalProps({
       isModalOpen: true,
       kycType,
-      referralCode: new URL(window.location.href).href?.split('=')[1]
-        ? `/kyc/${kycType}?referralCode=${new URL(window.location.href).href?.split('=')[1]}`
+      referralCode: objectParams?.referralCode
+        ? `/kyc/${kycType}?referralCode=${objectParams?.referralCode}`
         : `/kyc/${kycType}`,
     })
   }
diff --git a/src/pages/KYC/index.tsx b/src/pages/KYC/index.tsx
index d680c8c34..ce223f417 100644
--- a/src/pages/KYC/index.tsx
+++ b/src/pages/KYC/index.tsx
@@ -33,6 +33,7 @@ import { KYC_REWARD, LineRewardAction } from 'constants/lineRewards'
 import { apiService as lineRewardApiService } from 'hooks/useLineReward'
 import { linePoint } from 'services/apiUrls'
 import { useLineReward } from 'providers/LineRewardProvider'
+import { useQueryParams } from 'hooks/useParams'
 
 interface DescriptionProps {
   description: string | null
@@ -95,6 +96,7 @@ const Description: FC<DescriptionProps> = ({ description }: DescriptionProps) =>
 )
 
 const KYC = () => {
+  const { objectParams } = useQueryParams<{ referralCode: string }>(['referralCode'])
   const { account } = useWeb3React()
   const { chainId } = useAccount()
   const [cookies] = useCookies(['annoucementsSeen'])
@@ -161,9 +163,7 @@ const KYC = () => {
     setModalProps({
       isModalOpen: true,
       kycType,
-      referralCode: new URL(window.location.href).href?.split('=')[1]
-        ? `/kyc/${kycType}?referralCode=${new URL(window.location.href).href?.split('=')[1]}`
-        : `/kyc/${kycType}`,
+      referralCode: objectParams?.referralCode ? `/kyc/${kycType}?referralCode=${objectParams?.referralCode}` : `/kyc/${kycType}`,
       // Add more props as needed
     })
   }