diff --git a/frontend/components/SignatureForm.js b/frontend/components/SignatureForm.js
index 09a9346..17e64e1 100644
--- a/frontend/components/SignatureForm.js
+++ b/frontend/components/SignatureForm.js
@@ -20,11 +20,13 @@ class SignatureForm extends Component {
     this.state = {
       loading: false,
       passkeyAvailable: false,
-      usePasskey: false, // disabled by default; enabled only when ?passkey=true in URL
+      usePasskey: false,
+      emailOptional: false, // true when passkey is available and user hasn't switched to email
       form: {
         name: null,
         occupation: null,
         city: null,
+        organization: null,
         email: null,
         share_email: false,
         id: this.props.signature && this.props.signature.id,
@@ -37,11 +39,10 @@ class SignatureForm extends Component {
   }
 
   async componentDidMount() {
-    // Only enable passkey when ?passkey=true is in the URL
     const params = new URLSearchParams(window.location.search);
     if (params.get('passkey') === 'true' && isPasskeySupported()) {
       const available = await isPlatformAuthenticatorAvailable();
-      this.setState({ passkeyAvailable: available, usePasskey: available });
+      this.setState({ passkeyAvailable: available, usePasskey: available, emailOptional: available });
     }
   }
 
@@ -62,7 +63,6 @@ class SignatureForm extends Component {
 
     await this.props.onSubmit(formData);
 
-    // just in case
     setTimeout(() => {
       this.setState({ loading: false });
     }, 2000);
@@ -73,9 +73,12 @@ class SignatureForm extends Component {
 
   render() {
     const { error, t, letter } = this.props;
-    const { passkeyAvailable, usePasskey } = this.state;
-    const showEmailField = !this.updatingSignature && !usePasskey;
-    const showEmailOptional = !this.updatingSignature && usePasskey && passkeyAvailable;
+    const { passkeyAvailable, usePasskey, emailOptional } = this.state;
+
+    // When ?passkey=true and passkey is available, show the redesigned flow
+    const showPasskeyFlow = passkeyAvailable && !this.updatingSignature;
+    // Fallback: current interface when passkey is NOT available
+    const showFallbackFlow = !passkeyAvailable && !this.updatingSignature;
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -117,76 +120,140 @@ class SignatureForm extends Component {
             />
           </div>
 
-          {/* Passkey toggle */}
-          {passkeyAvailable && !this.updatingSignature && (
-            <div className="w-full py-2">
-              <div className="flex items-center gap-2 text-sm">
+          {/* ── Redesigned passkey flow ───────────────────────────────── */}
+          {showPasskeyFlow && (
+            <>
+              {/* Email: optional (with subtext) or required (with checkbox) */}
+              {emailOptional ? (
+                // Passkey-first mode: email optional + subtext
+                <div className="w-full py-1">
+                  <Input type="email" name="email" placeholder={t('sign.email')} onChange={this.handleChange} />
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    {t('sign.email.optional.subtext')}
+                  </p>
+                </div>
+              ) : (
+                // Email mode: required + checkbox opt-in
+                <div className="w-full py-1">
+                  <Input
+                    type="email"
+                    name="email"
+                    placeholder={t('sign.email')}
+                    onChange={this.handleChange}
+                    required
+                  />
+                  {letter.user_id && (
+                    <div className="my-2">
+                      <Label>
+                        <div className="mt-1 mr-0">
+                          <Checkbox
+                            id="share_email"
+                            name="share_email"
+                            onChange={(e) => this.handleChange('share_email', e.target.checked)}
+                          />
+                        </div>
+                        <label className="ml-1 text-sm text-gray-600 dark:text-gray-300">
+                          {t('sign.share_email')}
+                        </label>
+                      </Label>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Primary button */}
+              <div className="mt-4 mb-2">
                 <button
-                  type="button"
-                  onClick={() => this.setState({ usePasskey: true })}
-                  className={`px-3 py-1.5 rounded-lg border transition-colors ${
-                    usePasskey
-                      ? 'bg-gray-900 text-white border-gray-900 dark:bg-white dark:text-black dark:border-white'
-                      : 'bg-transparent text-gray-500 border-gray-300 dark:border-gray-600'
-                  }`}
+                  type="submit"
+                  className="text-white text-base font-sans border-white bg-gray-900 p-3 rounded-lg w-full disabled:bg-gray-500 dark:bg-black dark:text-white dark:border-white border-2 font-bold"
+                  disabled={this.state.loading}
                 >
-                  🔐 {t('sign.passkey')}
+                  {t('sign.button.passkey')}
                 </button>
+              </div>
+
+              {/* Toggle link */}
+              <div className="text-center mb-6">
+                {emailOptional ? (
+                  <button
+                    type="button"
+                    className="text-sm text-gray-500 underline hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                    onClick={() => this.setState({ usePasskey: false, emailOptional: false })}
+                  >
+                    {t('sign.email.instead')}
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    className="text-sm text-gray-500 underline hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                    onClick={() => this.setState({ usePasskey: true, emailOptional: true })}
+                  >
+                    {t('sign.passkey.instead')}
+                  </button>
+                )}
+              </div>
+            </>
+          )}
+
+          {/* ── Fallback: standard interface when passkey not available ── */}
+          {showFallbackFlow && (
+            <>
+              <div className="w-full py-1">
+                <Input
+                  type="email"
+                  name="email"
+                  placeholder={t('sign.email')}
+                  onChange={this.handleChange}
+                  required
+                />
+              </div>
+              {letter.user_id && (
+                <div className="my-1">
+                  <Label>
+                    <div className="mt-1 mr-0">
+                      <Checkbox
+                        id="share_email"
+                        name="share_email"
+                        onChange={(e) => this.handleChange('share_email', e.target.checked)}
+                      />
+                    </div>
+                    <label className="ml-1">{t('sign.share_email')}</label>
+                  </Label>
+                </div>
+              )}
+              <div className="mt-4 mb-6">
                 <button
-                  type="button"
-                  onClick={() => this.setState({ usePasskey: false })}
-                  className={`px-3 py-1.5 rounded-lg border transition-colors ${
-                    !usePasskey
-                      ? 'bg-gray-900 text-white border-gray-900 dark:bg-white dark:text-black dark:border-white'
-                      : 'bg-transparent text-gray-500 border-gray-300 dark:border-gray-600'
-                  }`}
+                  className="text-white text-base font-sans border-white bg-gray-900 p-3 rounded-lg w-full disabled:bg-gray-500 dark:bg-black dark:text-white dark:border-white border-2 font-bold"
+                  disabled={this.state.loading}
                 >
-                  ✉️ {t('sign.email')}
+                  {this.props.signature ? t('sign.update') : t('sign.button')}
                 </button>
               </div>
-              {usePasskey && (
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  {t('sign.passkey.info')}
-                </p>
-              )}
-            </div>
-          )}
-
-          {/* Email field: required for email flow, optional for passkey (for updates) */}
-          {showEmailField && (
-            <div className="w-full py-1">
-              <Input type="email" name="email" placeholder={t('sign.email')} onChange={this.handleChange} required />
-            </div>
-          )}
-          {showEmailOptional && (
-            <div className="w-full py-1">
-              <Input type="email" name="email" placeholder={t('sign.email.optional')} onChange={this.handleChange} />
-            </div>
+            </>
           )}
 
-          {!this.updatingSignature && !usePasskey && letter.user_id && (
-            <div className="my-1">
-              <Label>
-                <div className="mt-1 mr-0">
-                  <Checkbox
-                    id="share_email"
-                    name="share_email"
-                    onChange={(e) => this.handleChange('share_email', e.target.checked)}
-                  />
-                </div>
-                <label className="ml-1">{t('sign.share_email')}</label>
-              </Label>
-            </div>
+          {/* ── Existing signature update (no passkey flow) ── */}
+          {this.updatingSignature && (
+            <>
+              <div className="w-full py-1">
+                <Input
+                  type="email"
+                  name="email"
+                  placeholder={t('sign.email')}
+                  onChange={this.handleChange}
+                />
+              </div>
+              <div className="mt-4 mb-6">
+                <button
+                  className="text-white text-base font-sans border-white bg-gray-900 p-3 rounded-lg w-full disabled:bg-gray-500 dark:bg-black dark:text-white dark:border-white border-2 font-bold"
+                  disabled={this.state.loading}
+                >
+                  {t('sign.update')}
+                </button>
+              </div>
+            </>
           )}
         </div>
-        <div className="mt-4 mb-6">
-          <button
-            className="text-white text-base font-sans border-white bg-gray-900 p-3 rounded-lg w-full disabled:bg-gray-500 dark:bg-black dark:text-white dark:border-white border-2 font-bold"
-            disabled={this.state.loading}
-          >
-            {this.props.signature ? t('sign.update') : usePasskey ? t('sign.button.passkey') : t('sign.button')}
-          </button>
-        </div>
         {error && <div className="text-red font-bold text-center m-4">{error.message}</div>}
       </form>
     );
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 102e1b3..dddc2c4 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -36,15 +36,51 @@ export const GlobalStyle = createGlobalStyle`
   }
 `;
 
+const GIT_SHA = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA || process.env.GIT_SHA || 'unknown';
+const GIT_MSG = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_MESSAGE || process.env.GIT_MSG || '';
+
+function DevBanner() {
+  const [visible, setVisible] = React.useState(false);
+  React.useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    setVisible(params.get('devmode') === 'true');
+    document.body.style.paddingTop = params.get('devmode') === 'true' ? '36px' : '';
+  }, []);
+
+  if (!visible) return null;
+
+  const sha = GIT_SHA.slice(0, 8);
+  return (
+    <div
+      style={{
+        background: '#ff6b6b',
+        color: '#fff',
+        textAlign: 'center',
+        padding: '6px 12px',
+        fontSize: '13px',
+        fontFamily: 'monospace',
+        fontWeight: 'bold',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 9999,
+      }}
+    >
+      🔧 devmode: {sha} {GIT_MSG && `— ${GIT_MSG}`}
+    </div>
+  );
+}
+
 function MyApp({ Component, pageProps }) {
   const router = useRouter();
   const locale = router.locale;
   const messages = getMessagesForLocale(locale);
-  // Use currentLocale as needed
   return (
     <IntlContext.Provider value={{ locale, messages }}>
       <ThemeProvider theme={theme}>
         <GlobalStyle />
+        <DevBanner />
         <Component {...pageProps} />
       </ThemeProvider>
     </IntlContext.Provider>
diff --git a/frontend/public/locales/de.json b/frontend/public/locales/de.json
index 30a08b2..d2ecfe1 100644
--- a/frontend/public/locales/de.json
+++ b/frontend/public/locales/de.json
@@ -75,6 +75,9 @@
   "sign.city": "Stadt",
   "sign.email": "E-Mail",
   "sign.email.optional": "E-Mail (optional, für Updates)",
+  "sign.email.optional.subtext": "um Updates zu diesem Brief zu erhalten",
+  "sign.email.instead": "stattdessen mit Ihrer E-Mail anmelden",
+  "sign.passkey.instead": "stattdessen mit Passkey anmelden",
   "sign.name": "Ihr Name",
   "sign.occupation": "Beruf",
   "sign.organization": "Organisation",
diff --git a/frontend/public/locales/en.json b/frontend/public/locales/en.json
index 79c94dd..cf19b45 100644
--- a/frontend/public/locales/en.json
+++ b/frontend/public/locales/en.json
@@ -75,6 +75,9 @@
   "sign.city": "city",
   "sign.email": "email",
   "sign.email.optional": "email (optional, for updates)",
+  "sign.email.optional.subtext": "to receive updates about this letter",
+  "sign.email.instead": "sign with your email instead",
+  "sign.passkey.instead": "sign with passkey instead",
   "sign.name": "Your name",
   "sign.occupation": "occupation",
   "sign.organization": "organization",
diff --git a/frontend/public/locales/fr.json b/frontend/public/locales/fr.json
index d8e126e..abeaec8 100644
--- a/frontend/public/locales/fr.json
+++ b/frontend/public/locales/fr.json
@@ -75,6 +75,9 @@
   "sign.city": "ville",
   "sign.email": "email",
   "sign.email.optional": "email (optionnel, pour les mises à jour)",
+  "sign.email.optional.subtext": "pour recevoir des mises à jour concernant cette lettre",
+  "sign.email.instead": "signer avec votre email à la place",
+  "sign.passkey.instead": "signer avec passkey à la place",
   "sign.name": "Votre nom",
   "sign.occupation": "occupation",
   "sign.organization": "organisation",
diff --git a/frontend/public/locales/nl.json b/frontend/public/locales/nl.json
index 21bbe83..ac53e45 100644
--- a/frontend/public/locales/nl.json
+++ b/frontend/public/locales/nl.json
@@ -75,6 +75,9 @@
   "sign.city": "stad",
   "sign.email": "email",
   "sign.email.optional": "email (optioneel, voor updates)",
+  "sign.email.optional.subtext": "om updates te ontvangen over deze brief",
+  "sign.email.instead": "in plaats daarvan aanmelden met je email",
+  "sign.passkey.instead": "in plaats daarvan aanmelden met passkey",
   "sign.name": "Uw naam",
   "sign.occupation": "beroep",
   "sign.organization": "organisatie",