diff --git a/devcon-app/src/assets/icons/zupass.svg b/devcon-app/src/assets/icons/zupass.svg
new file mode 100644
index 000000000..7df935882
--- /dev/null
+++ b/devcon-app/src/assets/icons/zupass.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.25483 11.3154C3.25483 13.1102 3.26558 14.6733 3.25483 16.2418C3.24945 17.0395 3.34625 17.6755 4.41109 17.5623C4.57781 17.5461 4.86284 17.9342 4.96502 18.1875C5.14787 18.6349 5.2393 19.12 5.34686 19.5943C5.43828 20.0039 5.54047 20.419 5.56736 20.834C5.605 21.4754 5.57811 22.1168 5.57811 22.8121C6.35792 22.742 6.33641 22.3162 6.33641 21.8796C6.33641 19.7398 6.35792 17.6 6.33103 15.4656C6.32027 14.738 6.61606 14.2906 7.21302 13.881C7.92829 13.3905 8.53599 12.7491 9.19211 12.1778C9.27278 12.1994 9.35345 12.2209 9.43412 12.2425V21.4916C9.54705 21.4916 9.66537 21.4916 9.77831 21.4916V16.3496C10.8485 16.8724 11.8058 17.1096 12.0424 18.29C12.1123 18.2792 12.1823 18.263 12.2522 18.2522C12.2844 17.9773 12.3436 17.6971 12.349 17.4222C12.3705 16.1394 12.4727 14.8458 12.349 13.5738C12.2414 12.4581 12.6878 11.6765 13.473 11.0783C14.7476 10.1135 15.167 8.86839 15.0057 7.34304C14.9627 6.91724 15.0165 6.48605 14.9681 6.06025C14.8336 4.86369 15.1509 3.92584 16.1889 3.18203C16.8665 2.69694 17.372 1.97469 17.969 1.37641C18.1679 1.1716 18.4153 1.0099 18.6358 0.832031C18.7111 0.864371 18.7918 0.89671 18.8671 0.92905V22.6181L19.2167 22.6396V19.5889C19.4533 19.4326 19.5017 19.3733 19.5501 19.3733C20.4177 19.3446 20.8516 18.9062 20.8516 18.0582C20.8516 16.1502 20.8408 14.2367 20.8408 12.3287C20.8408 11.3855 20.9537 11.3208 21.7873 11.7412C22.5725 12.1401 23.3738 12.5066 24.1052 12.9863C24.4064 13.1857 24.6376 13.6169 24.7183 13.9834C24.8205 14.4469 24.7775 14.9482 24.7345 15.4333C24.6484 16.4466 24.7344 17.3413 25.8208 17.8426C25.9821 17.918 26.1273 18.4463 26.0305 18.6026C25.2077 19.9177 24.4387 21.2921 23.433 22.4564C21.7873 24.3536 19.663 25.6795 17.2644 26.3802C14.9089 27.0701 12.4834 27.248 10.0203 26.7306C5.99759 25.8843 2.98593 23.626 0.705668 20.2788C0.426013 19.8638 0.24854 19.4865 0.608864 18.9745C0.813227 18.678 0.845495 18.2253 0.856251 17.8372C0.888519 16.6676 0.920787 15.498 0.850873 14.3284C0.797094 13.4121 1.00683 12.7276 1.85655 12.2748C2.29755 12.0377 2.68476 11.7089 3.26558 11.3046L3.25483 11.3154Z" fill="#7D52F4"/>
+</svg>
diff --git a/devcon-app/src/components/domain/app/dc7/profile/zupass/index.tsx b/devcon-app/src/components/domain/app/dc7/profile/zupass/index.tsx
index e69de29bb..b8f0ef9c3 100644
--- a/devcon-app/src/components/domain/app/dc7/profile/zupass/index.tsx
+++ b/devcon-app/src/components/domain/app/dc7/profile/zupass/index.tsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import { usePageContext } from 'context/page-context'
+import Image from 'next/image'
+import { Button } from 'lib/components/button'
+import { Separator } from 'lib/components/ui/separator'
+import { motion } from 'framer-motion'
+import ZupassIcon from 'assets/icons/zupass.svg'
+import OnboardingZupass from 'assets/images/dc-7/onboarding-zupass.png'
+import { Toaster } from 'lib/components/ui/toaster'
+import { useToast } from 'lib/hooks/use-toast'
+
+export const Zupass = (props: any) => {
+  //   const pageContext = usePageContext()
+  //   const { toast } = useToast()
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.25,
+      },
+    },
+  }
+
+  const itemVariants = {
+    hidden: { opacity: 0, x: -30 },
+    visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
+  }
+
+  return (
+    <motion.div variants={containerVariants} initial="hidden" animate="visible">
+      <motion.div
+        className="flex items-center justify-center p-4 mb-6 lg:mb-12 rounded-full bg-[#EFEBFF] h-[48px] w-[48px] lg:h-[64px] lg:w-[64px]"
+        variants={itemVariants}
+      >
+        <ZupassIcon
+          style={{ '--color-icon': '#7D52F4' }}
+          className="text-[20px] lg:text-[28px] icon border-[1px] border-[#7D52F4] border-solid rounded-full p-[1px]"
+        />
+      </motion.div>
+      <motion.div className="flex flex-col gap-2 mb-4" variants={itemVariants}>
+        <motion.p className="font-xl semi-bold" variants={itemVariants}>
+          Connect your Zupass
+        </motion.p>
+        <motion.p className="text-[#939393] text-sm" variants={itemVariants}>
+          To import your Visual Ticket, Swag items, and unlock unique experiences made available through Zupass at
+          Devcon.
+        </motion.p>
+      </motion.div>
+      <motion.div variants={itemVariants}>
+        <Image
+          src={OnboardingZupass}
+          alt="Onboarding Notifications"
+          className="w-full object-cover min-h-[200px] max-h-[30vh] rounded-xl lg:hidden my-2"
+        />
+      </motion.div>
+      <motion.div variants={itemVariants}>
+        <Button
+          className="plain mt-2 lg:mt-8 w-full"
+          color="purple-2"
+          fat
+          fill
+          // disabled={isLoading}
+        >
+          Connect Zupass
+        </Button>
+      </motion.div>
+
+      {props.onSkip && (
+        <>
+          <Separator className="my-4" />
+
+          <motion.p
+            className="flex items-center justify-center lg:items-start text-sm semi-bold cursor-pointer w-full"
+            variants={itemVariants}
+            onClick={props.onSkip}
+          >
+            Not right now
+          </motion.p>
+        </>
+      )}
+
+      <Toaster />
+    </motion.div>
+  )
+}
diff --git a/devcon-app/src/pages/wip/onboarding/index.tsx b/devcon-app/src/pages/wip/onboarding/index.tsx
index 9ef59e975..b09a7c3e2 100644
--- a/devcon-app/src/pages/wip/onboarding/index.tsx
+++ b/devcon-app/src/pages/wip/onboarding/index.tsx
@@ -1,4 +1,5 @@
 import { Notifications } from 'components/domain/app/dc7/profile/notifications'
+import { Zupass } from 'components/domain/app/dc7/profile/zupass'
 import React, { useState } from 'react'
 import Page from 'components/domain/app/dc7/page'
 import { DotsSelector } from 'lib/components/dots-selector'
@@ -126,7 +127,7 @@ const OnboardingPage = (props: any) => {
     >
       <div>
         {currentStep === 0 && <Notifications onSkip={() => setCurrentStep(1)} />}
-        {currentStep === 1 && <Notifications onSkip={() => setCurrentStep(2)} />}
+        {currentStep === 1 && <Zupass onSkip={() => setCurrentStep(2)} />}
         {currentStep === 2 && <div>Content for Step 3</div>}
         {currentStep === 3 && <div>Content for Step 4</div>}
       </div>