diff --git a/web/lukegbcom/pages/tools/wifi-qrcode.js b/web/lukegbcom/pages/tools/wifi-qrcode.js
index b719d2160f..d94c21e20f 100644
--- a/web/lukegbcom/pages/tools/wifi-qrcode.js
+++ b/web/lukegbcom/pages/tools/wifi-qrcode.js
@@ -1,7 +1,9 @@
 import Head from 'next/head'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 import styles from './wifi-qrcode.module.scss'
 import { QRCodeSVG } from 'qrcode.react'
+import { useRouter } from 'next/router'
 
 function generateQRString(details) {
   const bits = {
@@ -33,7 +35,33 @@ function generateQRString(details) {
   return `WIFI:${generateWifiFromBits(bits)};;`
 }
 
-function WifiQRCode({ details }) {
+export default function WifiQRCode() {
+  const [details, setDetails] = useState(null)
+  const router = useRouter()
+
+  useEffect(() => {
+    let {
+      eventName,
+      ssid,
+      psk,
+      hidden,
+    } = router.query
+
+    eventName = eventName || ''
+    ssid = ssid || ''
+    psk = psk || ''
+    hidden = hidden || false
+
+    setDetails({
+      eventName,
+      ssid,
+      psk,
+      hidden,
+    })
+  }, [router.query])
+
+  if (details === null || !details.eventName) return (<div />)
+
   const hasLogo = details.eventName.match(/^http[s]?:/)
 
   return (
@@ -50,26 +78,3 @@ function WifiQRCode({ details }) {
     </div>
   )
 }
-
-WifiQRCode.getInitialProps = async (ctx) => {
-  let {
-    eventName,
-    ssid,
-    psk,
-    hidden,
-  } = ctx.query
-
-  eventName = eventName || ''
-  ssid = ssid || ''
-  psk = psk || ''
-  hidden = hidden || false
-
-  return {details: {
-    eventName,
-    ssid,
-    psk,
-    hidden,
-  }}
-}
-
-export default WifiQRCode