diff --git a/src/app/content/views/setup/index.tsx b/src/app/content/views/setup/index.tsx
index 28c103a..5cd83b5 100644
--- a/src/app/content/views/setup/index.tsx
+++ b/src/app/content/views/setup/index.tsx
@@ -97,28 +97,30 @@ const Setup: FC = () => {
 
   return (
     <div className="absolute inset-0 z-50 flex rounded-xl bg-black/10 shadow-2xl  backdrop-blur-sm">
-      <div className="m-auto flex flex-col items-center justify-center gap-y-8 pb-40 drop-shadow-lg">
-        <BlurFade key={userInfo?.avatar} inView>
-          <Avatar className="size-24 cursor-pointer border-4 border-white ">
-            <AvatarImage src={userInfo?.avatar} className="size-full" alt="avatar" />
-            <AvatarFallback>
-              <UserIcon size={30} className="text-slate-400" />
-            </AvatarFallback>
-          </Avatar>
-        </BlurFade>
-        <div className="flex items-center" key={userInfo?.name}>
-          <motion.div
-            className="text-2xl font-bold text-primary"
-            initial={{ x: -10, opacity: 0 }}
-            animate={{ x: 0, opacity: 1 }}
-            transition={{ duration: 0.5 }}
-          >
-            @
-          </motion.div>
-          <WordRotate className="text-2xl font-bold text-primary" words={[`${userInfo?.name || ''.padEnd(10, ' ')}`]} />
+      {userInfo && (
+        <div className="m-auto flex flex-col items-center justify-center gap-y-8 pb-40 drop-shadow-lg">
+          <BlurFade key={userInfo.avatar} inView>
+            <Avatar className="size-24 cursor-pointer border-4 border-white ">
+              <AvatarImage src={userInfo.avatar} className="size-full" alt="avatar" />
+              <AvatarFallback>
+                <UserIcon size={30} className="text-slate-400" />
+              </AvatarFallback>
+            </Avatar>
+          </BlurFade>
+          <div className="flex items-center" key={userInfo.name}>
+            <motion.div
+              className="text-2xl font-bold text-primary"
+              initial={{ x: -10, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              transition={{ duration: 0.5 }}
+            >
+              @
+            </motion.div>
+            <WordRotate className="text-2xl font-bold text-primary" words={[userInfo.name]} />
+          </div>
+          <PulsatingButton onClick={handleSetup}>Start chatting</PulsatingButton>
         </div>
-        <PulsatingButton onClick={handleSetup}>Start chatting</PulsatingButton>
-      </div>
+      )}
     </div>
   )
 }