diff --git a/components/hcb/apply-button.js b/components/hcb/apply-button.js
index 29006859..73afa54e 100644
--- a/components/hcb/apply-button.js
+++ b/components/hcb/apply-button.js
@@ -1,30 +1,32 @@
 import { Button, Text, Image, Flex } from 'theme-ui'
 import Icon from '../icon'
+import Link from 'next/link'
 
 export default function ApplyButton() {
   return (
-    <Button
-      variant="ctaLg"
-      as="a"
-      href="/hcb/apply"
-      sx={{
-        width: '100%',
-        height: '4.2rem'
-        // borderRadius: '1.5rem',
-      }}
-    >
-      <Flex
+    <Link href="/hcb/apply" passHref legacyBehavior>
+      <Button
+        variant="ctaLg"
+        as="a"
         sx={{
-          alignItems: 'center',
-          gap: 3,
-          mr: '-32px' // Man...
+          width: '100%',
+          height: '4.2rem'
+          // borderRadius: '1.5rem',
         }}
       >
-        <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
-          Apply now
-        </Text>
-        <Icon glyph="view-forward" size={46} color="white" />
-      </Flex>
-    </Button>
+        <Flex
+          sx={{
+            alignItems: 'center',
+            gap: 3,
+            mr: '-32px' // Man...
+          }}
+        >
+          <Text color="white" sx={{ fontWeight: 'bold', fontSize: 4 }}>
+            Apply now
+          </Text>
+          <Icon glyph="view-forward" size={46} color="white" />
+        </Flex>
+      </Button>
+    </Link>
   )
 }
diff --git a/components/hcb/apply/checkbox.js b/components/hcb/apply/checkbox.js
index 0442d343..5ec96ed8 100644
--- a/components/hcb/apply/checkbox.js
+++ b/components/hcb/apply/checkbox.js
@@ -1,20 +1,22 @@
 import { useEffect, useState } from 'react'
 import Icon from '../../icon'
+import { useRouter } from 'next/router'
 
 export default function Checkbox({ name, defaultChecked = false, size = 38 }) {
   const [checked, setChecked] = useState(defaultChecked)
   const toggle = () => setChecked(!checked)
+  const router = useRouter()
 
   /* Fill in the field with the value from sessionStorage.
     For other input elements, the value is set in the Field component,
     but these checkboxes hold their state in useState rather than in the DOM. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name)
     if (value) {
       const input = document.getElementById(name)
-      input && setChecked(value === 'true')
+      input && setChecked(!!value)
     }
-  }, [name])
+  }, [router.query, name])
 
   return (
     <>
diff --git a/components/hcb/apply/field.js b/components/hcb/apply/field.js
index 4b942e1f..8a06d083 100644
--- a/components/hcb/apply/field.js
+++ b/components/hcb/apply/field.js
@@ -18,12 +18,12 @@ export default function Field({
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */
   useEffect(() => {
-    const value = sessionStorage.getItem('bank-signup-' + name)
+    const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name)
     if (value) {
       const input = document.getElementById(name)
       if (input) input.value = value
     }
-  }, [name])
+  }, [router.query, name])
 
   return (
     <FlexCol gap={2} width={'100%'}>
diff --git a/pages/hcb/apply/index.js b/pages/hcb/apply/index.js
index fabde9ef..11dd0ae9 100644
--- a/pages/hcb/apply/index.js
+++ b/pages/hcb/apply/index.js
@@ -67,7 +67,7 @@ export default function Apply() {
 
     // Set the query url parameter to 1 if it's not present
     if (!step || step < 1) {
-      router.push(
+      router.replace(
         {
           pathname: router.pathname,
           query: { ...router.query, step: 1 }
@@ -110,9 +110,7 @@ export default function Apply() {
         <Box sx={{ gridArea: 'form', overflowY: 'auto' }}>
           <FormContainer ref={formContainer}>
             {step === 1 && <HCBInfo />}
-            {step === 2 && (
-              <OrganizationInfoForm requiredFields={requiredFields} />
-            )}
+            {step === 2 && <OrganizationInfoForm requiredFields={requiredFields} />}
             {step === 3 && <PersonalInfoForm requiredFields={requiredFields} />}
           </FormContainer>
         </Box>