diff --git a/backend/backend/graphene/types.py b/backend/backend/graphene/types.py
index f6144b263..2eb1d2ccd 100644
--- a/backend/backend/graphene/types.py
+++ b/backend/backend/graphene/types.py
@@ -38,7 +38,7 @@ def resolve_recovery(self, info):
             user=info.context.user, organisation=self, deleted_at=None)
         return org_member.wrapped_recovery
 
-    def resolve_idenity_key(self, info):
+    def resolve_identity_key(self, info):
         org_member = OrganisationMember.objects.get(
             user=info.context.user, organisation=self, deleted_at=None)
         return org_member.identity_key
diff --git a/frontend/app/[team]/newdevice/page.tsx b/frontend/app/[team]/newdevice/page.tsx
index 5facf3fa7..d119422b8 100644
--- a/frontend/app/[team]/newdevice/page.tsx
+++ b/frontend/app/[team]/newdevice/page.tsx
@@ -34,7 +34,7 @@ export default function NewDevice({ params }: { params: { team: string } }) {
       icon: <MdOutlineKey />,
       title: 'Sudo password',
       description:
-        "Please set up a strong 'sudo' password to continue. This will be used to to perform administrative tasks and to encrypt keys locally on this device.",
+        "Please set up a strong 'sudo' password to continue. This will be used to encrypt keys and perform administrative tasks.",
     },
   ])
 
@@ -74,7 +74,7 @@ export default function NewDevice({ params }: { params: { team: string } }) {
           icon: <MdOutlineKey />,
           title: 'Sudo password',
           description:
-            "Please set up a strong 'sudo' password to continue. This will be used to to perform administrative tasks and to encrypt keys locally on this device.",
+            "Please set up a strong 'sudo' password to continue. This will be used to encrypt keys and perform administrative tasks.",
         },
       ])
 
diff --git a/frontend/app/[team]/settings/page.tsx b/frontend/app/[team]/settings/page.tsx
index c2e33cad5..6cb7cc37f 100644
--- a/frontend/app/[team]/settings/page.tsx
+++ b/frontend/app/[team]/settings/page.tsx
@@ -4,14 +4,16 @@ import { Alert } from '@/components/common/Alert'
 import { Avatar } from '@/components/common/Avatar'
 import { Button } from '@/components/common/Button'
 import { ModeToggle } from '@/components/common/ModeToggle'
-import { AccountSeedGen } from '@/components/onboarding/AccountSeedGen'
+import { AccountRecovery } from '@/components/onboarding/AccountRecovery'
 import { RoleLabel } from '@/components/users/RoleLabel'
 import { organisationContext } from '@/contexts/organisationContext'
 import { cryptoUtils } from '@/utils/auth'
+import { copyRecoveryKit, generateRecoveryPdf } from '@/utils/recovery'
 import { Dialog, Transition } from '@headlessui/react'
 import { useSession } from 'next-auth/react'
 import { Fragment, useContext, useState } from 'react'
 import { FaEye, FaEyeSlash, FaMoon, FaSun, FaTimes } from 'react-icons/fa'
+import { toast } from 'react-toastify'
 
 const ViewRecoveryDialog = () => {
   const { activeOrganisation } = useContext(organisationContext)
@@ -49,22 +51,46 @@ const ViewRecoveryDialog = () => {
     setIsOpen(true)
   }
 
+  const handleDownloadRecoveryKit = async () => {
+    toast.promise(
+      generateRecoveryPdf(
+        recovery,
+        session?.user?.email!,
+        activeOrganisation!.name,
+        session?.user?.name || undefined
+      ),
+      {
+        pending: 'Generating recovery kit',
+        success: 'Downloaded recovery kit',
+      }
+    )
+  }
+
+  const handleCopyRecoveryKit = () => {
+    copyRecoveryKit(
+      recovery,
+      session?.user?.email!,
+      activeOrganisation!.name,
+      session?.user?.name || undefined
+    )
+  }
+
   return (
     <>
       <div className="flex flex-col gap-4">
         <Alert variant="info" icon={true}>
           <div className="flex flex-col gap-2">
-            <p>Your recovery phrase is encrypted.</p>
+            <p>Your account keys are encrypted.</p>
 
             <p>
-              Backup your account recovery phrase in a safe place if you haven&apos;t already. If
-              you forget your sudo password, it is the only way to restore your accout keys.
+              Store your account recovery kit in a safe place if you haven&apos;t already. If you
+              forget your sudo password, it is the only way to restore your accout keys.
             </p>
           </div>
         </Alert>
         <div>
           <Button variant="primary" onClick={openModal} title="View recovery">
-            <FaEye /> View recovery
+            <FaEye /> View recovery info
           </Button>
         </div>
       </div>
@@ -106,7 +132,13 @@ const ViewRecoveryDialog = () => {
                   </Dialog.Title>
 
                   <div className="py-4">
-                    {recovery && <AccountSeedGen mnemonic={recovery} />}
+                    {recovery && (
+                      <AccountRecovery
+                        mnemonic={recovery}
+                        onDownload={handleDownloadRecoveryKit}
+                        onCopy={handleCopyRecoveryKit}
+                      />
+                    )}
 
                     {!recovery && (
                       <form onSubmit={handleDecryptRecovery}>
@@ -195,7 +227,7 @@ export default function Settings({ params }: { params: { team: string } }) {
           </div>
 
           <div className="flex flex-col gap-4">
-            <div className="text-lg font-medium">Recovery phrase</div>
+            <div className="text-lg font-medium">Recovery</div>
             <ViewRecoveryDialog />
           </div>
 
diff --git a/frontend/app/invite/[invite]/page.tsx b/frontend/app/invite/[invite]/page.tsx
index e83933a73..b7bce32a4 100644
--- a/frontend/app/invite/[invite]/page.tsx
+++ b/frontend/app/invite/[invite]/page.tsx
@@ -3,7 +3,7 @@
 import { cryptoUtils } from '@/utils/auth'
 import VerifyInvite from '@/graphql/queries/organisation/validateOrganisationInvite.gql'
 import AcceptOrganisationInvite from '@/graphql/mutations/organisation/acceptInvite.gql'
-import { useLazyQuery, useMutation, useQuery } from '@apollo/client'
+import { useLazyQuery, useMutation } from '@apollo/client'
 import { HeroPattern } from '@/components/common/HeroPattern'
 import { Button } from '@/components/common/Button'
 import { FaArrowRight } from 'react-icons/fa'
@@ -11,14 +11,14 @@ import Loading from '@/app/loading'
 import { useEffect, useState } from 'react'
 import { Step, Stepper } from '@/components/onboarding/Stepper'
 import { AccountPassword } from '@/components/onboarding/AccountPassword'
-import { AccountSeedChecker } from '@/components/onboarding/AccountSeedChecker'
-import { AccountSeedGen } from '@/components/onboarding/AccountSeedGen'
-import { MdKey, MdOutlineVerifiedUser, MdOutlinePassword } from 'react-icons/md'
+import { AccountRecovery } from '@/components/onboarding/AccountRecovery'
+import { MdKey, MdOutlinePassword } from 'react-icons/md'
 import { toast } from 'react-toastify'
 import { OrganisationMemberInviteType } from '@/apollo/graphql'
 import { useSession } from 'next-auth/react'
 import { setLocalKeyring } from '@/utils/localStorage'
 import { Logo } from '@/components/common/Logo'
+import { copyRecoveryKit, generateRecoveryPdf } from '@/utils/recovery'
 
 const bip39 = require('bip39')
 
@@ -49,9 +49,9 @@ export default function Invite({ params }: { params: { invite: string } }) {
 
   const [showWelcome, setShowWelcome] = useState<boolean>(true)
   const [step, setStep] = useState<number>(0)
-  const [recoverySkipped, setRecoverySkipped] = useState<boolean>(false)
+
+  const [recoveryDownloaded, setRecoveryDownloaded] = useState<boolean>(false)
   const [success, setSuccess] = useState<boolean>(false)
-  const [inputs, setInputs] = useState<Array<string>>([])
   const [pw, setPw] = useState<string>('')
   const [pw2, setPw2] = useState<string>('')
   const [mnemonic, setMnemonic] = useState('')
@@ -73,26 +73,19 @@ export default function Invite({ params }: { params: { invite: string } }) {
   const steps: Step[] = [
     {
       index: 0,
-      name: 'Set up recovery phrase',
-      icon: <MdKey />,
-      title: 'Recovery',
+      name: 'Sudo Password',
+      icon: <MdOutlinePassword />,
+      title: 'Set a sudo password',
       description:
-        "This is your 24 word recovery phrase. You can use it log in to your Phase account if you forget the sudo password. It's used to derive your encryption keys. Only you have access to it. Please write it down or store it somewhere safe like a password manager.",
+        'This will be used to encrypt your account keys. You will be need to enter this password to perform administrative tasks.',
     },
     {
       index: 1,
-      name: 'Verify recovery phrase',
-      icon: <MdOutlineVerifiedUser />,
-      title: 'Verify recovery phrase',
-      description: 'Please enter the your recovery phrase in the correct order below.',
-    },
-    {
-      index: 2,
-      name: 'Sudo password',
-      icon: <MdOutlinePassword />,
-      title: 'Set a sudo password',
+      name: 'Account recovery',
+      icon: <MdKey />,
+      title: 'Account Recovery',
       description:
-        'Please set up a strong sudo password to continue. This will be used to to perform administrative tasks and to secure your account keys.',
+        'If you forget your sudo password, you will need to use a recovery kit to regain access to your account.',
     },
   ]
 
@@ -160,23 +153,15 @@ export default function Invite({ params }: { params: { invite: string } }) {
     })
   }
 
-  const handleInputUpdate = (newValue: string, index: number) => {
-    if (newValue.split(' ').length === 24) {
-      setInputs(newValue.split(' '))
-    } else setInputs(inputs.map((input: string, i: number) => (index === i ? newValue : input)))
-  }
-
   const validateCurrentStep = () => {
-    if (step === 1 && !recoverySkipped) {
-      if (inputs.join(' ') !== mnemonic && !recoverySkipped) {
-        errorToast('Incorrect account recovery key!')
-        return false
-      }
-    } else if (step === 2) {
+    if (step === 0) {
       if (pw !== pw2) {
         errorToast("Passwords don't match")
         return false
       }
+    } else if (step === 1 && !recoveryDownloaded) {
+      errorToast('Please download the your account recovery kit!')
+      return false
     }
     return true
   }
@@ -198,20 +183,11 @@ export default function Invite({ params }: { params: { invite: string } }) {
     if (step !== 0) setStep(step - 1)
   }
 
-  const skipRecoverySteps = () => {
-    setRecoverySkipped(true)
-    setStep(2)
-  }
-
   useEffect(() => {
     setMnemonic(bip39.generateMnemonic(256))
     const id = crypto.randomUUID()
   }, [])
 
-  useEffect(() => {
-    setInputs([...Array(mnemonic.split(' ').length)].map(() => ''))
-  }, [mnemonic])
-
   const WelcomePane = () => (
     <div className="mx-auto my-auto max-w-2xl space-y-8 p-16 bg-zinc-100 dark:bg-zinc-800 text-black dark:text-white rounded-md shadow-2xl text-center">
       <div className="space-y-2">
@@ -242,8 +218,8 @@ export default function Invite({ params }: { params: { invite: string } }) {
     return (
       <div className="mx-auto my-auto max-w-2xl space-y-8 p-16 bg-zinc-100 dark:bg-zinc-800 text-black dark:text-white rounded-md shadow-2xl text-center">
         <div className="flex flex-col gap-y-2 items-center">
-          <h1 className="text-4xl text-black dark:text-white text-center font-bold">Success!</h1>
-          <p className="text-black/30 dark:text-white/40 text-center">Your account is setup!</p>
+          <h1 className="text-4xl text-black dark:text-white text-center font-bold">You're All Set</h1>
+          <p className="text-black/30 dark:text-white/40 text-center">Your account is ready to go!</p>
           <div className="mx-auto pt-8">
             <Button
               variant="primary"
@@ -258,6 +234,33 @@ export default function Invite({ params }: { params: { invite: string } }) {
     )
   }
 
+  const handleDownloadRecoveryKit = async () => {
+    toast
+      .promise(
+        generateRecoveryPdf(
+          mnemonic,
+          session?.user?.email!,
+          invite.organisation.name,
+          session?.user?.name || undefined
+        ),
+        {
+          pending: 'Generating recovery kit',
+          success: 'Downloaded recovery kit',
+        }
+      )
+      .then(() => setRecoveryDownloaded(true))
+  }
+
+  const handleCopyRecoveryKit = () => {
+    copyRecoveryKit(
+      mnemonic,
+      session?.user?.email!,
+      invite.organisation.name,
+      session?.user?.name || undefined
+    )
+    setRecoveryDownloaded(true)
+  }
+
   return (
     <>
       <div>
@@ -280,16 +283,15 @@ export default function Invite({ params }: { params: { invite: string } }) {
                   <Stepper steps={steps} activeStep={step} />
                 </div>
 
-                {step === 0 && <AccountSeedGen mnemonic={mnemonic} />}
+                {step === 0 && <AccountPassword pw={pw} setPw={setPw} pw2={pw2} setPw2={setPw2} />}
+
                 {step === 1 && (
-                  <AccountSeedChecker
+                  <AccountRecovery
                     mnemonic={mnemonic}
-                    inputs={inputs}
-                    updateInputs={handleInputUpdate}
-                    required={!recoverySkipped}
+                    onDownload={handleDownloadRecoveryKit}
+                    onCopy={handleCopyRecoveryKit}
                   />
                 )}
-                {step === 2 && <AccountPassword pw={pw} setPw={setPw} pw2={pw2} setPw2={setPw2} />}
 
                 <div className="flex justify-between w-full">
                   <div>
@@ -300,13 +302,13 @@ export default function Invite({ params }: { params: { invite: string } }) {
                     )}
                   </div>
                   <div className="flex items-center gap-2">
-                    {step !== 2 && (
-                      <Button variant="secondary" type="button" onClick={skipRecoverySteps}>
-                        Skip
-                      </Button>
-                    )}
-                    <Button variant="primary" type="submit" isLoading={isloading}>
-                      Next
+                    <Button
+                      variant="primary"
+                      type="submit"
+                      isLoading={isloading || loading}
+                      disabled={step === steps.length - 1 && !recoveryDownloaded}
+                    >
+                      {step === steps.length - 1 ? 'Finish' : 'Next'}
                     </Button>
                   </div>
                 </div>
diff --git a/frontend/app/signup/page.tsx b/frontend/app/signup/page.tsx
index 7585e9cda..d028301ba 100644
--- a/frontend/app/signup/page.tsx
+++ b/frontend/app/signup/page.tsx
@@ -4,41 +4,34 @@ import { Button } from '@/components/common/Button'
 import { HeroPattern } from '@/components/common/HeroPattern'
 import { Step, Stepper } from '@/components/onboarding/Stepper'
 import { useEffect, useState } from 'react'
-import {
-  MdOutlineVerifiedUser,
-  MdGroups,
-  MdOutlineKey,
-  MdKey,
-  MdOutlinePassword,
-} from 'react-icons/md'
+import { MdGroups, MdKey, MdOutlinePassword } from 'react-icons/md'
 import { TeamName } from '@/components/onboarding/TeamName'
-import { AccountSeedGen } from '@/components/onboarding/AccountSeedGen'
-import { AccountSeedChecker } from '@/components/onboarding/AccountSeedChecker'
+import { AccountRecovery } from '@/components/onboarding/AccountRecovery'
 import { AccountPassword } from '@/components/onboarding/AccountPassword'
 import { cryptoUtils } from '@/utils/auth'
 import { useSession } from 'next-auth/react'
 import { toast } from 'react-toastify'
-import { gql, useMutation } from '@apollo/client'
+import { useMutation } from '@apollo/client'
 import { useRouter } from 'next/navigation'
-import Link from 'next/link'
 import { CreateOrg } from '@/graphql/mutations/createOrganisation.gql'
 import { setLocalKeyring } from '@/utils/localStorage'
+import { copyRecoveryKit, generateRecoveryPdf } from '@/utils/recovery'
 
 const bip39 = require('bip39')
 
 const Onboard = () => {
   const { data: session } = useSession()
-  const [name, setName] = useState<string>('')
+  const [teamName, setTeamName] = useState<string>('')
   const [pw, setPw] = useState<string>('')
   const [pw2, setPw2] = useState<string>('')
   const [mnemonic, setMnemonic] = useState('')
   const [orgId, setOrgId] = useState('')
   const [inputs, setInputs] = useState<Array<string>>([])
   const [step, setStep] = useState<number>(0)
-  const [showWelcome, setShowWelcome] = useState<boolean>(true)
+
   const [createOrganisation, { data, loading, error }] = useMutation(CreateOrg)
   const [isloading, setIsLoading] = useState<boolean>(false)
-  const [seedDownloaded, setSeedDownloaded] = useState<boolean>(false)
+  const [recoveryDownloaded, setRecoveryDownloaded] = useState<boolean>(false)
   const [success, setSuccess] = useState<boolean>(false)
   const router = useRouter()
 
@@ -46,61 +39,55 @@ const Onboard = () => {
     toast.error(message)
   }
 
-  const handleInputUpdate = (newValue: string, index: number) => {
-    if (newValue.split(' ').length === 24) {
-      setInputs(newValue.split(' '))
-    } else setInputs(inputs.map((input: string, i: number) => (index === i ? newValue : input)))
-  }
-
   const steps: Step[] = [
     {
       index: 0,
-      name: 'Team name',
+      name: 'Team Name',
       icon: <MdGroups />,
       title: 'Choose a name for your team',
-      description: 'Your team name must be alphanumeric.',
+      description: (
+        <div className="space-y-1">
+          Your team name can be alphanumeric.
+          <code>
+            <pre>[a-zA-Z0-9]</pre>
+          </code>
+        </div>
+      ),
     },
     {
       index: 1,
-      name: 'Set up recovery phrase',
-      icon: <MdKey />,
-      title: 'Recovery',
+      name: 'Sudo Password',
+      icon: <MdOutlinePassword />,
+      title: 'Set a sudo password',
       description:
-        "This is your 24 word recovery phrase. You can use it log in to your Phase account if you forget the sudo password. It's used to derive your encryption keys. Only you have access to it. Please write it down or store it somewhere safe like a password manager.",
+        'This will be used to encrypt your account keys. You will be need to enter this password to perform administrative tasks.',
     },
     {
       index: 2,
-      name: 'Verify recovery phrase',
-      icon: <MdOutlineVerifiedUser />,
-      title: 'Verify recovery phrase',
-      description: 'Please enter the your recovery phrase in the correct order below.',
-    },
-    {
-      index: 3,
-      name: 'Sudo password',
-      icon: <MdOutlinePassword />,
-      title: 'Set a sudo password',
+      name: 'Account recovery',
+      icon: <MdKey />,
+      title: 'Account Recovery',
       description:
-        'Please set up a strong sudo password to continue. This will be used to to perform administrative tasks and to encrypt keys locally on this device.',
+        'If you forget your sudo password, you will need to use a recovery kit to regain access to your account.',
     },
   ]
 
   const validateCurrentStep = () => {
     if (step === 0) {
-      if (!name) {
+      if (!teamName) {
         errorToast('Please enter a team name')
         //return false
       }
-    } else if (step === 2) {
-      if (inputs.join(' ') !== mnemonic && !seedDownloaded) {
-        errorToast('Incorrect account recovery key!')
-        return false // TODO: UNCOMMENT THIS!!
-      }
-    } else if (step === 3) {
+    } else if (step === 1) {
       if (pw !== pw2) {
         errorToast("Passwords don't match")
         return false
       }
+    } else if (step === 2) {
+      if (!recoveryDownloaded) {
+        errorToast('Please download the your account recovery kit!')
+        return false
+      }
     }
     return true
   }
@@ -132,6 +119,28 @@ const Onboard = () => {
     )
   }
 
+  const handleDownloadRecoveryKit = async () => {
+    toast
+      .promise(
+        generateRecoveryPdf(
+          mnemonic,
+          session?.user?.email!,
+          teamName,
+          session?.user?.name || undefined
+        ),
+        {
+          pending: 'Generating recovery kit',
+          success: 'Downloaded recovery kit',
+        }
+      )
+      .then(() => setRecoveryDownloaded(true))
+  }
+
+  const handleCopyRecoveryKit = () => {
+    copyRecoveryKit(mnemonic, session?.user?.email!, teamName, session?.user?.name || undefined)
+    setRecoveryDownloaded(true)
+  }
+
   const handleAccountInit = async () => {
     return new Promise<boolean>(async (resolve, reject) => {
       setIsLoading(true)
@@ -141,7 +150,7 @@ const Onboard = () => {
         const result = await createOrganisation({
           variables: {
             id: orgId,
-            name,
+            name: teamName,
             identityKey: publicKey,
             wrappedKeyring: encryptedKeyring,
             wrappedRecovery: encryptedMnemonic,
@@ -182,10 +191,6 @@ const Onboard = () => {
     if (step !== 0) setStep(step - 1)
   }
 
-  const skipSeedCheckerStep = () => {
-    if (seedDownloaded) setStep(3)
-  }
-
   useEffect(() => {
     setMnemonic(bip39.generateMnemonic(256))
     const id = crypto.randomUUID()
@@ -202,34 +207,16 @@ const Onboard = () => {
     setInputs([...Array(mnemonic.split(' ').length)].map(() => ''))
   }, [mnemonic])
 
-  const WelcomePane = () => {
-    return (
-      <div className="flex flex-col gap-y-2 items-center">
-        <h1 className="text-4xl text-black dark:text-white text-center font-bold">
-          Welcome to Phase
-        </h1>
-        <p className="text-black/30 dark:text-white/40 text-center">
-          Setting up your account will take just a few minutes
-        </p>
-        <div className="mx-auto pt-8">
-          <Button variant="primary" onClick={() => setShowWelcome(false)}>
-            Get started
-          </Button>
-        </div>
-      </div>
-    )
-  }
-
   const SuccessPane = () => {
     return (
       <div className="flex flex-col gap-y-2 items-center">
-        <h1 className="text-4xl text-black dark:text-white text-center font-bold">Success!</h1>
-        <p className="text-black/30 dark:text-white/40 text-center">Your account is setup!</p>
+        <h1 className="text-4xl text-black dark:text-white text-center font-bold">You're All Set</h1>
+        <p className="text-black/30 dark:text-white/40 text-center">Your account is ready to go!</p>
         <div className="mx-auto pt-8">
           <Button
             variant="primary"
             arrow="right"
-            onClick={() => (window.location.href = `/${name}`)}
+            onClick={() => (window.location.href = `/${teamName}`)}
           >
             Go to Console
           </Button>
@@ -243,27 +230,29 @@ const Onboard = () => {
       <HeroPattern />
 
       <div className="mx-auto my-auto w-full max-w-4xl flex flex-col gap-y-16 py-40">
-        {showWelcome && <WelcomePane />}
-        {!showWelcome && !success && (
+        {!success && (
           <form
             onSubmit={incrementStep}
-            className="space-y-16 p-8 border border-violet-200/10 rounded-lg dark:bg-black/30 backdrop-blur-lg w-full mx-auto shadow-lg"
+            className="space-y-8 p-8 border border-violet-200/10 rounded-lg bg-zinc-100 dark:bg-black/30 backdrop-blur-lg w-full mx-auto shadow-lg"
           >
             <div className="flex flex-col w-full">
+              {step >= 0 && (
+                <div className="text-black dark:text-white font-semibold text-2xl text-center">
+                  Welcome to Phase
+                </div>
+              )}
               <Stepper steps={steps} activeStep={step} />
             </div>
 
-            {step === 0 && <TeamName name={name} setName={setName} />}
-            {step === 1 && <AccountSeedGen mnemonic={mnemonic} />}
+            {step === 0 && <TeamName name={teamName} setName={setTeamName} />}
+            {step === 1 && <AccountPassword pw={pw} setPw={setPw} pw2={pw2} setPw2={setPw2} />}
             {step === 2 && (
-              <AccountSeedChecker
+              <AccountRecovery
                 mnemonic={mnemonic}
-                inputs={inputs}
-                updateInputs={handleInputUpdate}
-                required={!seedDownloaded}
+                onDownload={handleDownloadRecoveryKit}
+                onCopy={handleCopyRecoveryKit}
               />
             )}
-            {step === 3 && <AccountPassword pw={pw} setPw={setPw} pw2={pw2} setPw2={setPw2} />}
 
             <div className="flex justify-between w-full">
               <div>
@@ -274,13 +263,13 @@ const Onboard = () => {
                 )}
               </div>
               <div className="flex items-center gap-2">
-                {seedDownloaded && step === 2 && (
-                  <Button variant="secondary" type="button" onClick={skipSeedCheckerStep}>
-                    Skip
-                  </Button>
-                )}
-                <Button variant="primary" type="submit" isLoading={isloading || loading}>
-                  Next
+                <Button
+                  variant="primary"
+                  type="submit"
+                  isLoading={isloading || loading}
+                  disabled={step === steps.length - 1 && !recoveryDownloaded}
+                >
+                  {step === steps.length - 1 ? 'Finish' : 'Next'}
                 </Button>
               </div>
             </div>
diff --git a/frontend/components/onboarding/AccountRecovery.tsx b/frontend/components/onboarding/AccountRecovery.tsx
new file mode 100644
index 000000000..fcb286fd2
--- /dev/null
+++ b/frontend/components/onboarding/AccountRecovery.tsx
@@ -0,0 +1,47 @@
+import { FaCopy, FaFileDownload } from 'react-icons/fa'
+import { Button } from '../common/Button'
+import { Alert } from '../common/Alert'
+
+export const AccountRecovery = (props: {
+  mnemonic: string
+  onDownload: Function
+  onCopy: Function
+}) => {
+  return (
+    <div className="space-y-10">
+      <div className="space-y-4">
+        <div className="text-black dark:text-white font-medium text-xl">Recovery kit</div>
+        <p className="text-neutral-500">
+          This recovery kit contains your account recovery phrase along with your account name,
+          email and other information to help you recover your account if you get locked out.
+        </p>
+        <p className="text-neutral-500">
+          Please download the recovery kit and keep it somewhere safe. You can also copy this
+          recovery kit and store it in a password manager.
+        </p>
+
+        <Alert variant="warning" icon={true}>
+          <p>
+            If you forget your <strong>sudo password</strong> and lose your{' '}
+            <strong>recovery kit</strong>, your account cannot be recovered!
+          </p>
+        </Alert>
+
+        <div className="pt-4 flex items-center gap-4">
+          <Button
+            variant={'outline'}
+            title="Copy recovery phrase to the clipboard"
+            onClick={() => props.onCopy()}
+            type="button"
+          >
+            Copy Recovery Kit
+            <FaCopy />
+          </Button>
+          <Button variant="primary" onClick={() => props.onDownload()} type="button">
+            Download Recovery Kit <FaFileDownload />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/components/onboarding/AccountSeedGen.tsx b/frontend/components/onboarding/AccountSeedGen.tsx
deleted file mode 100644
index a249e3c45..000000000
--- a/frontend/components/onboarding/AccountSeedGen.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { copyToClipBoard } from '@/utils/clipboard'
-import { FaCopy } from 'react-icons/fa'
-import { toast } from 'react-toastify'
-import { Button } from '../common/Button'
-
-export const AccountSeedGen = (props: { mnemonic: string }) => {
-  const handleCopyClick = async () => {
-    const copied = await copyToClipBoard(props.mnemonic)
-    copied ? toast.success('Copied to clipboard') : toast.error('Failed to copy')
-  }
-
-  return (
-    <div className="grid grid-cols-6 gap-4">
-      <div className="col-span-6 flex justify-end items-center mb-8">
-        <Button
-          variant={'outline'}
-          title="Copy recovery phrase to the clipboard"
-          onClick={handleCopyClick}
-          type="button"
-        >
-          Copy
-          <FaCopy />
-        </Button>
-      </div>
-      {props.mnemonic.split(' ').map((word: string, index: number) => (
-        <div
-          className="font-mono text-medium text-black dark:text-white flex gap-2 items-center border dark:border-violet-200/10 border-zinc-500/10 rounded-xl px-2 py-1 group"
-          key={word + index}
-        >
-          <span className="text-zinc-400 dark:text-zinc-700">{index + 1}</span>
-          <span className="hidden group-hover:block ph-no-capture">{word}</span>
-          <span className="group-hover:hidden">*****</span>
-        </div>
-      ))}
-    </div>
-  )
-}
diff --git a/frontend/components/onboarding/Stepper.tsx b/frontend/components/onboarding/Stepper.tsx
index b4084679b..f2a5d7c8a 100644
--- a/frontend/components/onboarding/Stepper.tsx
+++ b/frontend/components/onboarding/Stepper.tsx
@@ -5,7 +5,7 @@ export type Step = {
   name: string
   icon: React.ReactNode
   title: string
-  description: string
+  description: React.ReactNode
 }
 
 interface StepperProps {
@@ -78,7 +78,7 @@ export const Stepper = (props: StepperProps) => {
         <div className="text-3xl text-black dark:text-white font-bold text-center">
           {props.steps[props.activeStep].title}
         </div>
-        <p className="text-black/30 dark:text-white/40 text-center">
+        <p className="text-black/30 dark:text-white/40 text-center text-lg">
           {props.steps[props.activeStep].description}
         </p>
       </div>
diff --git a/frontend/package.json b/frontend/package.json
index 491ae57d6..377eb35a3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,7 @@
     "graphql-tag": "^2.12.6",
     "install": "^0.13.0",
     "jsonwebtoken": "^9.0.0",
+    "jspdf": "^2.5.1",
     "libsodium-wrappers-sumo": "^0.7.11",
     "next": "13.1.6",
     "next-auth": "^4.20.1",
diff --git a/frontend/public/assets/images/decrypt.svg b/frontend/public/assets/images/decrypt.svg
deleted file mode 100644
index 43d5f2637..000000000
--- a/frontend/public/assets/images/decrypt.svg
+++ /dev/null
@@ -1,154 +0,0 @@
-<svg width="234" height="273" viewBox="0 0 234 273" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.2">
-<path d="M101.751 245.772L117.151 236.973L131.67 244.892L116.711 254.132L101.751 245.772Z" fill="url(#paint0_linear_307_37)"/>
-<path d="M101.751 245.772V263.372L116.711 272.171V254.132L101.751 245.772Z" fill="url(#paint1_linear_307_37)"/>
-<path d="M116.711 254.132L131.67 244.892V263.02L116.711 272.171V254.132Z" fill="url(#paint2_linear_307_37)"/>
-</g>
-<g opacity="0.4">
-<path d="M101.751 219.966L117.151 211.166L131.67 219.086L116.711 228.326L101.751 219.966Z" fill="url(#paint3_linear_307_37)"/>
-<path d="M101.751 219.966V237.566L116.711 246.365V228.326L101.751 219.966Z" fill="url(#paint4_linear_307_37)"/>
-<path d="M116.711 228.326L131.67 219.086V237.214L116.711 246.365V228.326Z" fill="url(#paint5_linear_307_37)"/>
-</g>
-<g opacity="0.6">
-<path d="M101.751 191.948L117.151 183.148L131.67 191.068L116.711 200.307L101.751 191.948Z" fill="url(#paint6_linear_307_37)"/>
-<path d="M101.751 191.948V209.547L116.711 218.347V200.307L101.751 191.948Z" fill="url(#paint7_linear_307_37)"/>
-<path d="M116.711 200.307L131.67 191.068V209.195L116.711 218.347V200.307Z" fill="url(#paint8_linear_307_37)"/>
-</g>
-<g opacity="0.8">
-<path d="M101.751 166.141L117.151 157.341L131.67 165.261L116.711 174.501L101.751 166.141Z" fill="url(#paint9_linear_307_37)"/>
-<path d="M101.751 166.141V183.74L116.711 192.54V174.501L101.751 166.141Z" fill="url(#paint10_linear_307_37)"/>
-<path d="M116.711 174.501L131.67 165.261V183.388L116.711 192.54V174.501Z" fill="url(#paint11_linear_307_37)"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0742623 110.583L0.0742623 98.3552C0.0742623 98.3552 116.451 46.115 117.32 46.6118L233.14 99.5315V110.851C233.14 110.851 233.14 111.98 232.011 112.544L118.252 178.148C117.382 178.645 116.016 178.645 115.147 178.148L0.75737 112.259C-0.11204 111.763 0.0742623 110.583 0.0742623 110.583Z" fill="#BFC0C0"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.62182 97.5554L115.266 32.4618C116.135 31.965 117.501 31.965 118.371 32.4618L232.56 98.6841C233.43 99.1809 233.43 99.9882 232.56 100.485L119.365 165.544C118.495 166.04 117.129 166.04 116.259 165.544L0.68392 99.3563C-0.185489 98.8595 -0.24759 98.0522 0.62182 97.5554Z" fill="#DDDDDD"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M62.9671 97.1065L115.596 66.8269C115.988 66.591 116.616 66.591 117.086 66.8269L170.029 97.3425C170.421 97.5784 170.421 97.9717 170.029 98.2076L117.478 128.409C117.086 128.645 116.459 128.645 115.988 128.409L62.9671 97.893C62.5749 97.6571 62.5749 97.3425 62.9671 97.1065Z" fill="#BFC0C0"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M73.2584 103.228L115.771 79.3158C116.121 79.1407 116.735 79.1407 117.086 79.3158L160.475 103.053C160.825 103.228 160.825 103.578 160.475 103.841L117.524 128.454C117.173 128.629 116.56 128.629 116.209 128.454L73.2584 104.016C72.9078 103.754 72.9078 103.403 73.2584 103.228Z" fill="black"/>
-<path d="M135.104 27.793L159.241 14L182 26.4137L158.552 40.8964L135.104 27.793Z" fill="white"/>
-<path d="M135.104 27.7933V74.6896L158.552 88.4826V40.8967L135.104 27.7933Z" fill="#F7F7F7"/>
-<path d="M158.552 40.8965L182 26.4138V74.1377L158.552 88.4825V40.8965Z" fill="#E9E9EB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M145.881 40.5359C147.53 40.0409 149.593 41.3607 150.5 43.5879C151.407 45.8151 150.747 47.9598 149.098 48.5372C147.448 49.0322 145.386 47.7123 144.478 45.4852C143.571 43.258 144.231 41.1133 145.881 40.5359Z" fill="#F2FF26"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M146.71 40.5354C147.863 40.5354 150.748 43.5678 150.748 46.304C150.748 46.6949 149.017 48.6114 149.017 48.6114L128.5 83C128.5 83 95.019 86.4995 85.7097 70.0823C78.1643 56.7921 83.8479 44.2837 87.6696 44.6746L144.979 41.1123C144.979 41.1123 145.556 40.5354 146.71 40.5354Z" fill="url(#paint12_linear_307_37)"/>
-<g opacity="0.9">
-<path d="M101.751 108.63L117.151 99.8301L131.67 107.75L116.711 116.989L101.751 108.63Z" fill="url(#paint13_linear_307_37)" fill-opacity="0.8"/>
-<path d="M101.751 108.63V120.33L116.71 129.13V116.989L101.751 108.63Z" fill="url(#paint14_linear_307_37)" fill-opacity="0.8"/>
-<path d="M116.711 116.989L131.67 107.75V119.979L116.711 129.13V116.989Z" fill="url(#paint15_linear_307_37)" fill-opacity="0.8"/>
-</g>
-<path d="M101.751 82.823L117.15 74.0233L131.67 81.943L116.71 91.1827L101.751 82.823Z" fill="url(#paint16_linear_307_37)" fill-opacity="0.8"/>
-<path d="M101.751 82.8231V100.422L116.71 109.222V91.1828L101.751 82.8231Z" fill="url(#paint17_linear_307_37)" fill-opacity="0.8"/>
-<path d="M116.71 91.1828L131.67 81.9432V100.071L116.71 109.222V91.1828Z" fill="url(#paint18_linear_307_37)" fill-opacity="0.8"/>
-<path d="M101.763 54.8045L117.163 46.0048L131.682 53.9245L116.723 63.1642L101.763 54.8045Z" fill="#F67C7C"/>
-<path d="M101.763 54.8046V72.4039L116.723 81.2036V63.1643L101.763 54.8046Z" fill="#DE2424"/>
-<path d="M116.723 63.1643L131.682 53.9247V72.052L116.723 81.2037V63.1643Z" fill="#F32626"/>
-<path d="M102 31.7997L117.399 23L131.919 30.9197L116.959 40.1594L102 31.7997Z" fill="url(#paint19_linear_307_37)" fill-opacity="0.8"/>
-<path d="M102 31.7997V49.3991L116.959 58.1988V40.1594L102 31.7997Z" fill="url(#paint20_linear_307_37)" fill-opacity="0.8"/>
-<path d="M116.959 40.1595L131.919 30.9199V49.0472L116.959 58.1989V40.1595Z" fill="url(#paint21_linear_307_37)" fill-opacity="0.8"/>
-<path d="M103 8.79968L118.399 0L132.919 7.91971L117.959 17.1594L103 8.79968Z" fill="url(#paint22_linear_307_37)" fill-opacity="0.8"/>
-<path d="M103 8.79974V26.3991L117.959 35.1988V17.1594L103 8.79974Z" fill="url(#paint23_linear_307_37)" fill-opacity="0.8"/>
-<path d="M117.959 17.1595L132.919 7.91986V26.0472L117.959 35.1989V17.1595Z" fill="url(#paint24_linear_307_37)" fill-opacity="0.8"/>
-<path d="M163.12 64.5901C168.203 49.9029 168.253 50.2891 170.762 60.1778C173.37 69.9172 177.726 56.8943 177.726 56.1569" stroke="black" stroke-opacity="0.2" stroke-width="0.5"/>
-<path d="M164.317 63.8988C169.401 49.2116 169.45 49.5978 171.959 59.4865C174.567 69.2259 178.924 56.203 178.924 55.4656" stroke="black" stroke-opacity="0.5" stroke-width="0.5"/>
-<path d="M163 64.5253C163.287 64.3594 174.667 57.7895 180.321 54.5253" stroke="black" stroke-width="0.5"/>
-<path d="M165.514 63.2076C170.598 48.5204 170.647 48.9066 173.156 58.7953C175.764 68.5347 180.121 55.5118 180.121 54.7744" stroke="#F2FF26" stroke-width="0.5"/>
-<defs>
-<linearGradient id="paint0_linear_307_37" x1="116.711" y1="236.973" x2="116.711" y2="254.135" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint1_linear_307_37" x1="109.231" y1="245.772" x2="109.231" y2="272.175" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint2_linear_307_37" x1="124.191" y1="244.892" x2="124.191" y2="272.176" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint3_linear_307_37" x1="116.711" y1="211.166" x2="116.711" y2="228.328" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint4_linear_307_37" x1="109.231" y1="219.966" x2="109.231" y2="246.369" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint5_linear_307_37" x1="124.191" y1="219.086" x2="124.191" y2="246.369" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint6_linear_307_37" x1="116.711" y1="183.148" x2="116.711" y2="200.31" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint7_linear_307_37" x1="109.231" y1="191.948" x2="109.231" y2="218.351" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint8_linear_307_37" x1="124.191" y1="191.068" x2="124.191" y2="218.351" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint9_linear_307_37" x1="116.711" y1="157.341" x2="116.711" y2="174.503" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint10_linear_307_37" x1="109.231" y1="166.141" x2="109.231" y2="192.544" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint11_linear_307_37" x1="124.191" y1="165.261" x2="124.191" y2="192.544" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint12_linear_307_37" x1="151.175" y1="40.2067" x2="94.4043" y2="69.1614" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F2FF26" stop-opacity="0.6"/>
-<stop offset="1" stop-color="#F2FF26" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint13_linear_307_37" x1="116.711" y1="99.8301" x2="116.711" y2="116.992" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint14_linear_307_37" x1="109.231" y1="108.63" x2="109.231" y2="129.133" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint15_linear_307_37" x1="124.191" y1="107.75" x2="124.191" y2="129.133" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint16_linear_307_37" x1="116.711" y1="74.0233" x2="116.711" y2="91.1853" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint17_linear_307_37" x1="109.231" y1="82.8231" x2="109.231" y2="109.226" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint18_linear_307_37" x1="124.191" y1="81.9432" x2="124.191" y2="109.226" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint19_linear_307_37" x1="116.96" y1="23" x2="116.96" y2="40.162" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint20_linear_307_37" x1="109.48" y1="31.7997" x2="109.48" y2="58.2028" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint21_linear_307_37" x1="124.44" y1="30.9199" x2="124.44" y2="58.203" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint22_linear_307_37" x1="117.96" y1="0" x2="117.96" y2="17.162" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint23_linear_307_37" x1="110.48" y1="8.79974" x2="110.48" y2="35.2028" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-<linearGradient id="paint24_linear_307_37" x1="125.44" y1="7.91986" x2="125.44" y2="35.203" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E8E8E8"/>
-<stop offset="1" stop-color="#727272"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/frontend/public/assets/images/gradient-1.svg b/frontend/public/assets/images/gradient-1.svg
deleted file mode 100644
index 08aa135e7..000000000
--- a/frontend/public/assets/images/gradient-1.svg
+++ /dev/null
@@ -1,45 +0,0 @@
-<svg width="1440" height="1971" viewBox="0 0 1440 1971" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_147_12)">
-<g filter="url(#filter0_f_147_12)">
-<path d="M-70.1961 994.906C-147.477 906.962 -128.148 787.846 -27.0231 728.853L911.282 181.471C1012.41 122.478 1157.03 145.947 1234.31 233.89L1886.53 976.095C1963.81 1064.04 1944.48 1183.15 1843.36 1242.15L905.052 1789.53C803.927 1848.52 659.301 1825.05 582.02 1737.11L-70.1961 994.906Z" fill="url(#paint0_radial_147_12)" fill-opacity="0.3"/>
-</g>
-<g style="mix-blend-mode:overlay" filter="url(#filter1_f_147_12)">
-<path d="M1440.39 1540.99C1346.48 1699.85 1131.1 1773.98 959.312 1706.56L432.766 1499.92C260.982 1432.51 197.852 1249.08 291.761 1090.22L503.782 731.56C597.691 572.702 813.077 498.574 984.861 565.99L1511.41 772.629C1683.19 840.044 1746.32 1023.47 1652.41 1182.33L1440.39 1540.99Z" fill="url(#paint1_radial_147_12)" fill-opacity="0.3"/>
-</g>
-<g filter="url(#filter2_f_147_12)">
-<path d="M602.356 967.423C487.497 1161.72 224.06 1252.39 13.9528 1169.93L-90.5438 1128.92C-300.651 1046.47 -377.865 822.115 -263.006 627.818V627.818C-148.147 433.521 115.29 342.855 325.398 425.31L429.894 466.319C640.001 548.774 717.215 773.126 602.356 967.423V967.423Z" fill="url(#paint2_radial_147_12)" fill-opacity="0.3"/>
-</g>
-</g>
-<defs>
-<filter id="filter0_f_147_12" x="-225.844" y="40.6537" width="2268.02" height="1889.69" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="54.1446" result="effect1_foregroundBlur_147_12"/>
-</filter>
-<filter id="filter1_f_147_12" x="142.26" y="435.089" width="1659.65" height="1402.37" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="52.9955" result="effect1_foregroundBlur_147_12"/>
-</filter>
-<filter id="filter2_f_147_12" x="-642.745" y="68.3205" width="1624.84" height="1458.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="163.261" result="effect1_foregroundBlur_147_12"/>
-</filter>
-<radialGradient id="paint0_radial_147_12" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(647.243 886.249) rotate(40.8944) scale(961.694 955.596)">
-<stop stop-color="#FFD84B"/>
-<stop offset="1" stop-color="#FFD84B" stop-opacity="0"/>
-</radialGradient>
-<radialGradient id="paint1_radial_147_12" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1238.41 1160.13) rotate(-88.865) scale(490.918 603.693)">
-<stop stop-color="#9207FF"/>
-<stop offset="1" stop-color="#FF9898"/>
-</radialGradient>
-<radialGradient id="paint2_radial_147_12" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(356.343 879.104) rotate(-60.0833) scale(1775.96 2001.6)">
-<stop stop-color="#5AE9FD"/>
-<stop offset="1" stop-color="#5AE9FD" stop-opacity="0"/>
-</radialGradient>
-<clipPath id="clip0_147_12">
-<rect width="1971" height="3299" fill="white" transform="matrix(0 -1 1 0 -797 1971)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/public/assets/images/gradient-purple.svg b/frontend/public/assets/images/gradient-purple.svg
deleted file mode 100644
index 8d299084f..000000000
--- a/frontend/public/assets/images/gradient-purple.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="798" height="607" viewBox="0 0 798 607" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="798" height="607" fill="url(#paint0_radial_153_8)"/>
-<defs>
-<radialGradient id="paint0_radial_153_8" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(148.5 607) rotate(-30.2076) scale(506.822 743.953)">
-<stop stop-color="#B945CC" stop-opacity="0.5"/>
-<stop offset="1" stop-color="#355BE0" stop-opacity="0"/>
-</radialGradient>
-</defs>
-</svg>
diff --git a/frontend/public/assets/images/grello-gradient.svg b/frontend/public/assets/images/grello-gradient.svg
deleted file mode 100644
index dd07a8e75..000000000
--- a/frontend/public/assets/images/grello-gradient.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="755" height="948" viewBox="0 0 755 948" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="1048" height="948" fill="url(#paint0_radial_146_7)"/>
-<defs>
-<radialGradient id="paint0_radial_146_7" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(524 474) rotate(90) scale(474 524)">
-<stop stop-color="#F2FF26" stop-opacity="0.5"/>
-<stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/>
-</radialGradient>
-</defs>
-</svg>
diff --git a/frontend/public/assets/images/hero-bg.webp b/frontend/public/assets/images/hero-bg.webp
deleted file mode 100644
index 029183ca6..000000000
Binary files a/frontend/public/assets/images/hero-bg.webp and /dev/null differ
diff --git a/frontend/public/assets/images/logo.png b/frontend/public/assets/images/logo.png
new file mode 100644
index 000000000..7ff7fbea6
Binary files /dev/null and b/frontend/public/assets/images/logo.png differ
diff --git a/frontend/public/assets/images/meta.png b/frontend/public/assets/images/meta.png
deleted file mode 100644
index c9f42cc71..000000000
Binary files a/frontend/public/assets/images/meta.png and /dev/null differ
diff --git a/frontend/public/assets/images/sandbox.svg b/frontend/public/assets/images/sandbox.svg
deleted file mode 100644
index c42fe442f..000000000
--- a/frontend/public/assets/images/sandbox.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="400" height="335" viewBox="0 0 400 335" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 256.351L133.521 179.219L267.691 256.351L133.521 334.13L0 256.351Z" fill="url(#paint0_linear_55_7141)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M132.245 178.911L132.225 168.849C132.225 168.849 265.901 102.169 266.9 102.74L399.917 170.145V179.22C399.917 179.22 399.917 180.516 398.62 181.164L267.97 256.509C266.971 257.08 265.402 257.08 264.404 256.509L133.029 180.837C132.031 180.267 132.245 178.911 132.245 178.911Z" fill="#3F4658"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M132.874 167.552L264.54 92.7934C265.539 92.2228 267.108 92.2228 268.107 92.7934L399.251 168.849C400.25 169.419 400.25 170.346 399.251 170.917L269.248 245.636C268.249 246.206 266.68 246.206 265.682 245.636L132.945 169.621C131.947 169.05 131.875 168.123 132.874 167.552Z" fill="#777C88"/>
-<path d="M237.227 164.062L264.45 148.107L291.673 163.264L264.45 179.219L237.227 164.062Z" fill="#282828" fill-opacity="0.12"/>
-<path d="M242.413 12.963L264.45 -0.000244141L286.488 12.3148L264.45 25.2781L242.413 12.963Z" fill="#FBFFBD"/>
-<path d="M242.413 12.9626V38.8891L264.45 51.8524V25.2777L242.413 12.9626Z" fill="#F2FF26"/>
-<path d="M264.45 25.2779L286.488 12.3147V38.3708L264.45 51.8526V25.2779Z" fill="#F8FF92"/>
-<defs>
-<linearGradient id="paint0_linear_55_7141" x1="71.946" y1="294.592" x2="161.392" y2="139.682" gradientUnits="userSpaceOnUse">
-<stop stop-color="white" stop-opacity="0"/>
-<stop offset="0.64517" stop-color="#C4C4C4" stop-opacity="0.43"/>
-<stop offset="1" stop-color="#C4C4C4" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/frontend/utils/recovery.ts b/frontend/utils/recovery.ts
new file mode 100644
index 000000000..0e47a8780
--- /dev/null
+++ b/frontend/utils/recovery.ts
@@ -0,0 +1,166 @@
+import jsPDF from 'jspdf'
+import { toast } from 'react-toastify'
+import { copyToClipBoard } from './clipboard'
+
+const PHASE_LOGO = `data:image/png;base64,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`
+
+export const generateRecoveryPdf = async (
+  mnemonic: string,
+  email: string,
+  organisation: string,
+  name?: string
+) => {
+  const title = 'Phase Recovery Kit'
+  const subtitle = `This is a recovery kit for your Phase account. \nYou can use this to recover your account keys if you forget your sudo password.`
+  const hostname = `${window.location.protocol}//${window.location.host}`
+
+  // Create a new jsPDF instance
+  const pdf = new jsPDF()
+
+  // Draw the black rectangle for the header
+  pdf.setFillColor(0, 0, 0)
+  pdf.rect(0, 0, pdf.internal.pageSize.getWidth(), 60, 'F')
+
+  // Set the title
+  pdf.setTextColor(255, 255, 255)
+  pdf.setFontSize(20)
+  pdf.setFont('helvetica', 'bold')
+  pdf.text(title, 10, 25)
+
+  // Set the subtitle
+  pdf.setTextColor(115, 115, 115)
+  pdf.setFont('helvetica', 'regular', '400')
+  pdf.setFontSize(11)
+  pdf.text(subtitle, 10, 35)
+
+  // Add the logo
+  const imgProps = pdf.getImageProperties(PHASE_LOGO)
+  const imgWidth = 30
+  const imgHeight = (imgProps.height * imgWidth) / imgProps.width // scale the height to maintain aspect ratio
+  const pageWidth = pdf.internal.pageSize.getWidth()
+  pdf.addImage(PHASE_LOGO, 'PNG', pageWidth - imgWidth - 10, 10, imgWidth, imgHeight)
+
+  const lineSpace = 6
+  const paragraphSpace = 12
+
+  // Define cursor x and y starting positions
+  let xPosition = 10
+  let yPosition = 80
+
+  //Name
+  if (name) {
+    pdf.setTextColor(115, 115, 115)
+    pdf.setFont('helvetica', 'normal')
+    pdf.setFontSize(11)
+    pdf.text('Name', xPosition, yPosition)
+    yPosition += lineSpace
+
+    pdf.setTextColor(23, 23, 23)
+    pdf.setFont('helvetica', 'bold')
+    pdf.setFontSize(14)
+    pdf.text(name, xPosition, yPosition)
+    yPosition += paragraphSpace
+  }
+
+  //Email
+  pdf.setTextColor(115, 115, 115)
+  pdf.setFont('helvetica', 'normal')
+  pdf.setFontSize(11)
+  pdf.text('Email', xPosition, yPosition)
+  yPosition += lineSpace
+
+  pdf.setTextColor(23, 23, 23)
+  pdf.setFont('helvetica', 'bold')
+  pdf.setFontSize(14)
+  pdf.text(email, xPosition, yPosition)
+  yPosition += paragraphSpace
+
+  //Org
+  pdf.setTextColor(115, 115, 115)
+  pdf.setFont('helvetica', 'normal')
+  pdf.setFontSize(11)
+  pdf.text('Organisation', xPosition, yPosition)
+  yPosition += lineSpace
+
+  pdf.setTextColor(23, 23, 23)
+  pdf.setFont('helvetica', 'bold')
+  pdf.setFontSize(14)
+  pdf.text(organisation, xPosition, yPosition)
+  yPosition += paragraphSpace
+
+  //Phase instance host
+  pdf.setTextColor(115, 115, 115)
+  pdf.setFont('helvetica', 'normal')
+  pdf.setFontSize(11)
+  pdf.text('Login URL', xPosition, yPosition)
+  yPosition += lineSpace
+
+  pdf.setTextColor(23, 23, 23)
+  pdf.setFont('helvetica', 'bold')
+  pdf.setFontSize(14)
+  pdf.text(hostname, xPosition, yPosition)
+  yPosition += paragraphSpace * 2
+
+  //Mnemonic
+  pdf.setTextColor(115, 115, 115)
+  pdf.setFont('helvetica', 'normal')
+  pdf.setFontSize(11)
+  pdf.text('Recovery phrase', xPosition, yPosition)
+  yPosition += lineSpace
+
+  // Define the size of the grid cells
+  const cellWidth = pdf.internal.pageSize.getWidth() / 4
+  const cellHeight = 10
+
+  // Split the mnemonic into words
+  const words = mnemonic.split(' ')
+
+  // Loop over each word and place it in the PDF
+  words.forEach((word, index) => {
+    // Add the word number before the word
+    pdf.setFontSize(14)
+    pdf.setTextColor(23, 23, 23)
+    pdf.setFont('helvetica', 'bold')
+    pdf.text(word, xPosition, yPosition)
+
+    // Increment the x position to the next column
+    xPosition += cellWidth
+
+    // If we've reached the end of a row, reset x and increment y
+    if ((index + 1) % 4 === 0) {
+      xPosition = 10
+      yPosition += cellHeight
+    }
+  })
+
+  yPosition += 10
+  pdf.setTextColor(23, 23, 23)
+  pdf.setFont('helvetica', 'normal')
+  pdf.setFontSize(10)
+  pdf.text(`Generated on ${new Date().toDateString()}`, 10, 280)
+
+  // Save the PDF
+  pdf.save(`phase-recovery-kit--${organisation}.pdf`)
+}
+
+export const copyRecoveryKit = async (
+  mnemonic: string,
+  email: string,
+  organisation: string,
+  name?: string
+) => {
+  const hostname = `${window.location.protocol}//${window.location.host}`
+
+  const recoveryKit = `
+  Phase Recovery Kit\n\n
+  ${name ? `Name: ${name}` : ''}\n
+  Email: ${email}\n
+  Organsation: ${organisation}\n
+  LoginUrl: ${hostname}\n
+  Recovery phrase: ${mnemonic}\n
+  Generated on ${new Date().toDateString()}
+  `
+
+  const copied = await copyToClipBoard(recoveryKit)
+  copied ? toast.info('Copied to clipboard', { autoClose: 2000 }) : toast.error('Failed to copy')
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 2a723259c..f8a69e376 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -481,6 +481,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.14.0":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0":
   version "7.21.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz"
@@ -1647,6 +1654,11 @@
   version "15.7.5"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
 
+"@types/raf@^3.4.0":
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/@types/raf/-/raf-3.4.2.tgz#4e2ea094fcce9ed693cd236e530c0c88f2e09e68"
+  integrity sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==
+
 "@types/react-dom@18.0.11":
   version "18.0.11"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz"
@@ -2070,6 +2082,11 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
 
+atob@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
 auto-bind@~4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-4.0.0.tgz#e3589fc6c2da8f7ca43ba9f84fa52a744fc997fb"
@@ -2151,6 +2168,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -2239,6 +2261,11 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+btoa@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73"
+  integrity sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==
+
 buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz"
@@ -2358,6 +2385,20 @@ caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001517:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001522.tgz#44b87a406c901269adcdb834713e23582dd71856"
   integrity sha512-TKiyTVZxJGhsTszLuzb+6vUZSjVOAhClszBr2Ta2k9IwtNBT/4dzmL6aywt0HCgEZlmwJzXJd8yNiob6HgwTRg==
 
+canvg@^3.0.6:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/canvg/-/canvg-3.0.10.tgz#8e52a2d088b6ffa23ac78970b2a9eebfae0ef4b3"
+  integrity sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@types/raf" "^3.4.0"
+    core-js "^3.8.3"
+    raf "^3.4.1"
+    regenerator-runtime "^0.13.7"
+    rgbcolor "^1.0.1"
+    stackblur-canvas "^2.0.0"
+    svg-pathdata "^6.0.3"
+
 capital-case@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
@@ -2670,6 +2711,11 @@ cookie@^0.5.0:
   version "0.5.0"
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
 
+core-js@^3.6.0, core-js@^3.8.3:
+  version "3.33.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.33.2.tgz#312bbf6996a3a517c04c99b9909cdd27138d1ceb"
+  integrity sha512-XeBzWI6QL3nJQiHmdzbAOiMYqjrb7hwU7A39Qhvd/POSa/t9E1AeZyEZx3fNvp/vtM8zXwhoL0FsiS0hD0pruQ==
+
 cosmiconfig@8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.0.0.tgz#e9feae014eab580f858f8a0288f38997a7bebe97"
@@ -2717,6 +2763,13 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
@@ -2989,6 +3042,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dompurify@^2.2.0:
+  version "2.4.7"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.7.tgz#277adeb40a2c84be2d42a8bcd45f582bfa4d0cfc"
+  integrity sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -3491,7 +3549,7 @@ fbjs@^3.0.0:
     setimmediate "^1.0.5"
     ua-parser-js "^1.0.35"
 
-fflate@^0.4.1:
+fflate@^0.4.1, fflate@^0.4.8:
   version "0.4.8"
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
   integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
@@ -3948,6 +4006,14 @@ hosted-git-info@^6.0.0, hosted-git-info@^6.1.1:
   dependencies:
     lru-cache "^7.5.1"
 
+html2canvas@^1.0.0-rc.5:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 http-cache-semantics@^4.1.0, http-cache-semantics@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz"
@@ -4503,6 +4569,21 @@ jsonwebtoken@^9.0.0:
     ms "^2.1.1"
     semver "^7.3.8"
 
+jspdf@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/jspdf/-/jspdf-2.5.1.tgz#00c85250abf5447a05f3b32ab9935ab4a56592cc"
+  integrity sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==
+  dependencies:
+    "@babel/runtime" "^7.14.0"
+    atob "^2.1.2"
+    btoa "^1.2.1"
+    fflate "^0.4.8"
+  optionalDependencies:
+    canvg "^3.0.6"
+    core-js "^3.6.0"
+    dompurify "^2.2.0"
+    html2canvas "^1.0.0-rc.5"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
   version "3.3.3"
   resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz"
@@ -5667,6 +5748,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -5875,6 +5961,13 @@ quick-lru@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
 
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 rdk@>=6.4.4:
   version "6.4.4"
   resolved "https://registry.npmjs.org/rdk/-/rdk-6.4.4.tgz"
@@ -6040,7 +6133,7 @@ reaviz@^14.4.2:
     react-fast-compare "^3.2.1"
     transformation-matrix "^2.9.0"
 
-regenerator-runtime@^0.13.11:
+regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
@@ -6158,6 +6251,11 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
   integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
 
+rgbcolor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rgbcolor/-/rgbcolor-1.0.1.tgz#d6505ecdb304a6595da26fa4b43307306775945d"
+  integrity sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==
+
 right-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz"
@@ -6429,6 +6527,11 @@ ssri@^9.0.0:
   dependencies:
     minipass "^3.1.1"
 
+stackblur-canvas@^2.0.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz#7876bab4ea99bfc97b69ce662614d7a1afb2d71b"
+  integrity sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==
+
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz"
@@ -6558,6 +6661,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
 
+svg-pathdata@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/svg-pathdata/-/svg-pathdata-6.0.3.tgz#80b0e0283b652ccbafb69ad4f8f73e8d3fbf2cac"
+  integrity sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==
+
 swap-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/swap-case/-/swap-case-2.0.2.tgz#671aedb3c9c137e2985ef51c51f9e98445bf70d9"
@@ -6644,6 +6752,13 @@ tar@^6.1.11, tar@^6.1.13, tar@^6.1.2:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
@@ -6906,6 +7021,13 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"