I think I may change the front end...

web/templates/backups.askama.html

···
                 showTwoFactorCodeInput: false,
                 error: null,
                 showStatusMessage: false,
-                showLoginScreen: true,
+                //The landing page to pick to login with password or oauth
+                showLandingButtons: true,
+                //Password login
+                showLoginScreen: false,
                 showRepoNotFoundScreen: false,
                 addRecoveryKey: true,
                 // Rotation key flow state
···
                         this.showStatusMessage = false;
                     }
                 },
+                handleShowLogin() {
+                    this.showLandingButtons = false;
+                    this.showLoginScreen = true;
+                },
+                async handleOAuthSignup() {
+                    // TODO: Replace this URL with your actual OAuth signup endpoint for backups
+                    // If you have an environment-specific route, consider injecting it or making it configurable
+                    window.location.href = '/oauth/backups';
+                },
                 async handleLoginSubmit() {
+                    this.error = null;
+                    this.showStatusMessage = false;
+                    this.showLandingButtons = false;
                     this.error = null;
                     this.showStatusMessage = false;
 
···
     {% call cow::cow_header("Backups") %}
 
 
-    <form id="backup-signup-form" @submit.prevent="await handleLoginSubmit()" x-show="showLoginScreen">
+    <!-- Landing choice: two buttons -->
+    <div x-show="showLoginScreen">
         <!-- Informational section before sign-in -->
         <div class="section" style="text-align: left;">
-            <p>
-            PDS MOOver can provide worry free backups of your AT Protocol account. This is a free service for individual accounts and stores the backups on PDS MOOver's servers. Just like your  <a target="_blank" rel="noopener noreferrer"  href="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy">AT Proto data</a>, this is also public. On login, you will be asked if you'd like to add a rotation key to your account.
-            A rotation key is a recovery key that allows you to restore your account if your PDS ever goes down. If you're already signed up for backups, then you can log in here to manage them.
-            </p>
+             <p>
+                  PDS MOOver can provide worry-free backups of your AT Protocol account.
+                   This is a free service for individual accounts
+                   and stores the backups on PDS MOOver's servers.
+                   Just like your <a target="_blank" rel="noopener noreferrer" href="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy">AT Proto data</a>,
+                   this is also public.
+                <span x-show="showLoginScreen">On login,
+                   you will be asked if you'd like to add a rotation key to your account.
+                                                                                     A rotation key is a recovery key
+                                                                                     that allows you to restore your account if your PDS ever goes down.
+                                                                                     If you're already signed up for backups, then you can log in here to manage them.</span>
+
+              </p>
         </div>
-        <!-- Sign-in section -->
-        <div class="section">
-            <h2>Sign in to your account</h2>
-            <div class="form-group">
-                <label for="handle">Handle</label>
-                <input type="text" id="handle" name="handle" placeholder="alice.bsky.social" x-model="handle" required>
-            </div>
 
-            <div class="form-group">
-                <label for="password">Real Password</label>
-                <input type="password" id="password" name="password" x-model="password" required>
-            <p> If you are signing up and adding a rotation key you have to use your account's real password. If you are just managing your backups or have your own rotation key you can use an app password</p>
+       <div x-show="showLandingButtons" class="actions" style="display: flex; gap: 1rem; flex-wrap: wrap;">
+            <button type="button" @click="handleShowLogin()">Sign in to add a recovery key</button>
+            <button type="button" @click="await handleOAuthSignup()">Sign in for backups with OAuth</button>
+        </div>
+
+        <!-- Sign in with password section -->
+        <form id="backup-signup-form" @submit.prevent="await handleLoginSubmit()">
+
+            <div class="section">
+                <h2>Sign in to your account</h2>
+                <div class="form-group">
+                    <label for="handle">Handle</label>
+                    <input type="text" id="handle" name="handle" placeholder="alice.bsky.social" x-model="handle" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="password">Real Password</label>
+                    <input type="password" id="password" name="password" x-model="password" required>
+                <p> If you are signing up and adding a rotation key you have to use your account's real password. If you are just managing your backups or have your own rotation key you can use an app password</p>
+
+                </div>
 
+                <div x-show="showTwoFactorCodeInput" class="form-group">
+                    <label for="two-factor-code">Two-factor code (email)</label>
+                    <input type="text" id="two-factor-code" name="two-factor-code" x-model="twoFactorCode">
+                    <div class="error-message">Enter the 2FA code from your email.</div>
+                </div>
             </div>
 
-            <div x-show="showTwoFactorCodeInput" class="form-group">
-                <label for="two-factor-code">Two-factor code (email)</label>
-                <input type="text" id="two-factor-code" name="two-factor-code" x-model="twoFactorCode">
-                <div class="error-message">Enter the 2FA code from your email.</div>
+            <div x-show="error" x-text="error" class="error-message"></div>
+            <div x-show="showStatusMessage" id="status-message" class="status-message"></div>
+            <div>
+                <button type="submit">Login for backups</button>
             </div>
-        </div>
-
-        <div x-show="error" x-text="error" class="error-message"></div>
-        <div x-show="showStatusMessage" id="status-message" class="status-message"></div>
-        <div>
-            <button type="submit">Login for backups</button>
-        </div>
-    </form>
+        </form>
+    </div>
 
     <!-- Repo not found prompt -->
     <div class="section" x-show="showRepoNotFoundScreen">
···
     </template>
 
     <!-- Repo status view for signed-up users -->
-    <div class="section" x-show="!showLoginScreen && !showRepoNotFoundScreen && !showRotationKeyScreen">
+    <div class="section" x-show="!showLandingButtons && !showLoginScreen && !showRepoNotFoundScreen && !showRotationKeyScreen">
         <div class="section-header">
             <h2 style="margin: 0;">Backup repository status</h2>
             <button type="button" class="icon-button" title="Refresh status" aria-label="Refresh status" @click="refreshStatus">