diff --git a/ui/components/GradientLink.tsx b/ui/components/GradientLink.tsx
index 688637e..7065d3d 100644
--- a/ui/components/GradientLink.tsx
+++ b/ui/components/GradientLink.tsx
@@ -1,9 +1,10 @@
 import Link from 'next/link'
 import React from 'react'
 
-export default function GradientLink({ text, href, textSize }: any) {
+export default function GradientLink({ id, text, href, textSize }: any) {
   return (
     <Link
+      id={id}
       href={href}
       className={`text-${textSize} font-medium bg-gradient-to-r from-n3blue to-n3green text-transparent bg-clip-text`}
       target={(href?.charAt(0) === '/') ? "_self" : "_blank"}
diff --git a/ui/cypress/e2e/join.cy.ts b/ui/cypress/e2e/join.cy.ts
new file mode 100644
index 0000000..874ab38
--- /dev/null
+++ b/ui/cypress/e2e/join.cy.ts
@@ -0,0 +1,14 @@
+describe('Become a citizen', () => {
+  
+  it('click agreement link', () => {
+    cy.visit('/join')
+
+    cy.get('#agreementLink').click();
+
+    // Expect the IPFS agreement text to be opened in a new browser window
+    // Expected text: "By becoming a Nation3 citizen, I hereby agree to ..."
+    // TO DO
+  })
+})
+
+export {}
diff --git a/ui/pages/join.tsx b/ui/pages/join.tsx
index da9b5d8..f86ecad 100644
--- a/ui/pages/join.tsx
+++ b/ui/pages/join.tsx
@@ -150,6 +150,7 @@ export default function Join() {
               <br />
               {nationPassportAgreementStatement}:{' '}
               <GradientLink
+                id="agreementLink"
                 text="Read the terms"
                 href={nationPassportAgreementURI}
               />