diff --git a/src/components/auth/SignupDialog.tsx b/src/components/auth/SignupDialog.tsx
index efe744b..f700c98 100644
--- a/src/components/auth/SignupDialog.tsx
+++ b/src/components/auth/SignupDialog.tsx
@@ -270,8 +270,8 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
             {getTitle()}
           </DialogTitle>
         </DialogHeader>
-        
-        <div className='px-6 pt-2 pb-6 space-y-6 overflow-y-scroll flex-1'>
+
+        <div className='px-6 pt-2 pb-6 space-y-6 overflow-y-auto flex-1'>
           {/* Initial Key Step - Soapbox style */}
           {step === 'key' && (
             <div className='flex flex-col items-center space-y-6'>
@@ -279,21 +279,23 @@ const SignupDialog: React.FC<SignupDialogProps> = ({ isOpen, onClose, onComplete
                 You need a key to continue
               </p>
 
-              <div className='text-6xl'>
-                🔑
+              <div className='rounded-full bg-gray-100 p-8 dark:bg-gray-800'>
+                <div className='text-8xl'>
+                  🔑
+                </div>
               </div>
 
               <div className='flex flex-col items-center space-y-3 w-full'>
-                <Button 
+                <Button
                   className='bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg'
-                  size='lg' 
+                  size='lg'
                   onClick={handleGenerateKey}
                 >
                   Generate key
                 </Button>
 
-                <Button 
-                  variant='ghost' 
+                <Button
+                  variant='ghost'
                   className='text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'
                   onClick={handleHasKey}
                 >