diff --git a/docs/src/components/api/auth-panel.tsx b/docs/src/components/api/auth-panel.tsx
index 1847033d12..dd3c639ccd 100644
--- a/docs/src/components/api/auth-panel.tsx
+++ b/docs/src/components/api/auth-panel.tsx
@@ -3,12 +3,14 @@
 import { AdminOwnedProject, CurrentInternalUser, useUser } from '@stackframe/stack';
 import { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';
 import { stringCompare } from '@stackframe/stack-shared/dist/utils/strings';
-import { AlertTriangle, ChevronDown, Key, X } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
+import { AlertTriangle, Check, ChevronDown, X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useSidebar } from '../layouts/sidebar-context';
 import { Button } from '../mdx/button';
 import { useAPIPageContext } from './api-page-wrapper';
 
+type AuthTab = 'select-project' | 'manual';
+
 type StackAuthHeaderKey =
   | 'X-Stack-Access-Type'
   | 'X-Stack-Project-Id'
@@ -56,8 +58,32 @@ export function AuthPanel() {
   const projects = useMemo<AdminOwnedProject[]>(() => ownedProjectsResult ?? [], [ownedProjectsResult]);
   const hasOwnedProjects = Boolean(internalUser);
 
-  // State for project selection
+  // State for project selection and tabs
   const [selectedProjectId, setSelectedProjectId] = useState<string>('');
+  const [activeTab, setActiveTab] = useState<AuthTab>('select-project');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const mobileDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      const isOutsideDesktop = dropdownRef.current && !dropdownRef.current.contains(target);
+      const isOutsideMobile = mobileDropdownRef.current && !mobileDropdownRef.current.contains(target);
+
+      // Only close if click is outside both dropdowns (or if the ref doesn't exist for that viewport)
+      if (
+        (!dropdownRef.current || isOutsideDesktop) &&
+        (!mobileDropdownRef.current || isOutsideMobile)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
 
   // Use default functions if sidebar context is not available
   const { isAuthOpen, toggleAuth } = sidebarContext || {
@@ -141,7 +167,6 @@ export function AuthPanel() {
 
   // Calculate position based on homepage and scroll state (same as AIChatDrawer)
   const topPosition = isHomePage && isScrolled ? 'top-0' : 'top-0';
-  const height = isHomePage && isScrolled ? 'h-screen' : 'h-[calc(100vh)]';
 
   const missingRequiredHeaders = stackAuthHeaders.filter(
     header => header.required && !(headers[header.key] ?? '').trim()
@@ -185,168 +210,204 @@ export function AuthPanel() {
 
   return (
     <>
-      {/* Desktop Auth Panel - Matching AIChatDrawer design */}
+      {/* Desktop Auth Panel */}
       <div
-        className={`hidden md:block fixed ${topPosition} right-0 ${height} bg-fd-background border-l border-fd-border flex flex-col transition-all duration-300 ease-out z-50 w-96 ${
-          isAuthOpen ? 'translate-x-0' : 'translate-x-full'
+        className={`hidden md:flex fixed ${topPosition} right-4 top-4 bottom-4 bg-fd-background border border-fd-border rounded-xl flex-col transition-all duration-300 ease-out z-50 w-96 shadow-lg ${
+          isAuthOpen ? 'translate-x-0 opacity-100' : 'translate-x-[calc(100%+1rem)] opacity-0'
         }`}
       >
-        {/* Header - Matching AIChatDrawer */}
-        <div className="flex items-center justify-between p-3 border-b border-fd-border bg-fd-background">
-          <div className="flex items-center gap-2">
-            <div className={`w-5 h-5 rounded flex items-center justify-center ${
-              highlightMissingHeaders
-                ? 'bg-red-100 dark:bg-red-900/30 auth-error-pulse'
-                : 'bg-blue-100 dark:bg-blue-900/30'
-            }`}>
-              {highlightMissingHeaders ? (
-                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400" />
-              ) : (
-                <Key className="w-3 h-3 text-blue-600 dark:text-blue-400" />
-              )}
-            </div>
-            <div>
-              <h3 className="font-medium text-fd-foreground text-sm">
-                {highlightMissingHeaders ? 'Authentication Required' : 'API Authentication'}
-              </h3>
-              <p className="text-xs text-fd-muted-foreground">
-                Configure headers for requests
-              </p>
-            </div>
-          </div>
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-fd-border bg-fd-background rounded-t-xl">
+          <h3 className="font-semibold text-fd-foreground text-sm">
+            API Authentication
+          </h3>
           <button
             onClick={toggleAuth}
-            className="p-1 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors"
+            className="p-1 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors hover:transition-none"
             title="Close auth panel"
           >
-            <X className="w-3 h-3" />
+            <X className="w-4 h-4" />
           </button>
         </div>
 
-        {/* Error Message - Reserve space to prevent layout shifts */}
-        <div className="mx-3 mt-3 h-auto">
-          {highlightMissingHeaders && lastError ? (
-            <div className="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse">
-              <div className="flex items-center gap-2 text-xs">
-                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400 flex-shrink-0" />
-                <span className="text-red-800 dark:text-red-300 font-medium">
-                  {lastError.status} Error - Authentication required
-                </span>
-              </div>
-              {missingRequiredHeaders.length > 0 && (
-                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
-                  Missing: {missingRequiredHeaders.map(h => h.label).join(', ')}
-                </p>
-              )}
-            </div>
-          ) : null}
+        {/* Tabs */}
+        <div className="flex border-b border-fd-border">
+          <button
+            onClick={() => {
+              setActiveTab('select-project');
+              setIsDropdownOpen(false);
+            }}
+            className={`flex-1 px-4 py-3 text-sm font-medium transition-colors hover:transition-none ${
+              activeTab === 'select-project'
+                ? 'text-fd-foreground border-b-2 border-fd-foreground'
+                : 'text-fd-muted-foreground hover:text-fd-foreground'
+            }`}
+          >
+            Select Project
+          </button>
+          <button
+            onClick={() => {
+              setActiveTab('manual');
+              setIsDropdownOpen(false);
+            }}
+            className={`flex-1 px-4 py-3 text-sm font-medium transition-colors hover:transition-none ${
+              activeTab === 'manual'
+                ? 'text-fd-foreground border-b-2 border-fd-foreground'
+                : 'text-fd-muted-foreground hover:text-fd-foreground'
+            }`}
+          >
+            Manual
+          </button>
         </div>
 
-        {/* Content - Fixed height to prevent layout shifts */}
-        <div className="flex-1 min-h-0">
-          <div className="h-full overflow-y-auto p-3 space-y-3">
-            {/* Project Selector - Show only if user has owned projects */}
-            {hasOwnedProjects && projects.length > 0 && (
-              <div className="space-y-1.5 pb-3 border-b border-fd-border">
-                <label className="text-xs font-medium text-fd-foreground flex items-center gap-2">
-                  Quick Select Project
-                  <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
-                    logged in
-                  </span>
-                </label>
-                <div className="relative">
-                  <select
-                    value={selectedProjectId}
-                    onChange={(e) => handleProjectSelect(e.target.value)}
-                    className="w-full px-2 py-1.5 pr-8 border rounded-md text-xs bg-fd-background text-fd-foreground focus:outline-none focus:ring-1 focus:ring-fd-primary focus:border-fd-primary border-fd-border appearance-none cursor-pointer"
-                  >
-                    <option value="">Select a project...</option>
-                    {sortedProjects.map((project) => (
-                      <option key={project.id} value={project.id}>
-                        {project.displayName} ({project.id.slice(0, 8)}...)
-                      </option>
-                    ))}
-                  </select>
-                  <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 text-fd-muted-foreground pointer-events-none" />
-                </div>
-                {selectedProjectId && (
-                  <p className="text-xs text-green-600 dark:text-green-400">
-                    ✓ Headers auto-populated for admin authentication
-                  </p>
-                )}
-              </div>
+        {/* Error Banner */}
+        {highlightMissingHeaders && lastError && (
+          <div className="mx-4 mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
+              <span className="text-sm font-medium text-red-800 dark:text-red-300">
+                {lastError.status} Error - Authentication required
+              </span>
+            </div>
+            {missingRequiredHeaders.length > 0 && (
+              <p className="text-sm text-red-600 dark:text-red-400 mt-1.5 ml-6">
+                Missing: {missingRequiredHeaders.map(h => h.label).join(', ')}
+              </p>
             )}
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          {activeTab === 'select-project' ? (
+            <div className="p-4 space-y-4">
+              {hasOwnedProjects && projects.length > 0 ? (
+                <>
+                  <div className="space-y-2" ref={dropdownRef}>
+                    <label className="text-sm font-medium text-fd-foreground">
+                      Select Project
+                    </label>
+                    <div className="relative">
+                      <button
+                        type="button"
+                        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                        className="w-full px-3 py-2.5 pr-10 border rounded-lg text-sm bg-fd-muted/50 text-fd-foreground focus:outline-none focus:ring-2 focus:ring-fd-primary focus:border-fd-primary border-fd-border text-left flex items-center justify-between"
+                      >
+                        <span className={selectedProjectId ? 'text-fd-foreground' : 'text-fd-muted-foreground'}>
+                          {selectedProjectId
+                            ? sortedProjects.find(p => p.id === selectedProjectId)?.displayName
+                            : 'Select a project...'}
+                        </span>
+                        <ChevronDown className={`w-4 h-4 text-fd-muted-foreground transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
+                      </button>
+
+                      {/* Dropdown Menu */}
+                      {isDropdownOpen && (
+                        <div className="absolute top-full left-0 right-0 mt-1 bg-fd-background border border-fd-border rounded-lg shadow-lg z-50 max-h-60 overflow-y-auto">
+                          {sortedProjects.map((project) => (
+                            <button
+                              key={project.id}
+                              type="button"
+                              onClick={() => {
+                                handleProjectSelect(project.id);
+                                setIsDropdownOpen(false);
+                              }}
+                              className="w-full px-3 py-2.5 text-sm text-left hover:bg-fd-muted/50 flex items-center justify-between transition-colors hover:transition-none"
+                            >
+                              <span className="text-fd-foreground">{project.displayName}</span>
+                              {selectedProjectId === project.id && (
+                                <Check className="w-4 h-4 text-green-500" />
+                              )}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
 
-            {/* Manual Header Inputs */}
-            {stackAuthHeaders.map((header) => {
-              // Hide certain fields when project is selected
-              if (selectedProjectId && header.hideWhenProjectSelected) {
-                return null;
-              }
-
-              const value = headers[header.key] ?? '';
-              const isMissing = highlightMissingHeaders && header.required && !value.trim();
-              const isAutoPopulated = Boolean(header.isSensitive && selectedProjectId && value.length > 0);
-
-              return (
-                <div key={header.key} className={`space-y-1.5 ${
-                  isMissing ? 'p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse' : ''
-                }`}>
-                  <label className="text-xs font-medium text-fd-foreground flex items-center gap-2">
-                    {header.label}
-                    {header.required && (
-                      <span className={`text-xs px-1.5 py-0.5 rounded text-xs ${
-                        isMissing
-                          ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
-                          : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
-                      }`}>
-                        required
-                      </span>
-                    )}
-                    {isMissing && (
-                      <AlertTriangle className="w-3 h-3 text-red-500" />
-                    )}
-                  </label>
-                  <input
-                    type="text"
-                    placeholder={header.placeholder}
-                    value={value}
-                    onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
-                    readOnly={isAutoPopulated}
-                    className={`w-full px-2 py-1.5 border rounded-md text-xs bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-1 focus:border-transparent transition-all duration-200 ${
-                      isMissing
-                        ? 'border-red-300 focus:ring-red-500 dark:border-red-700'
-                        : 'border-fd-border focus:ring-fd-primary focus:border-fd-primary'
-                    } ${isAutoPopulated ? 'bg-fd-muted/50 cursor-not-allowed' : ''}`}
-                  />
-                  {isAutoPopulated && (
-                    <p className="text-xs text-fd-muted-foreground">Auto-populated from your account</p>
+                  {selectedProjectId && (
+                    <div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-green-500" />
+                        <span className="text-sm font-medium text-green-700 dark:text-green-300">
+                          Ready to make requests
+                        </span>
+                      </div>
+                      <p className="text-xs text-green-600 dark:text-green-400 mt-1.5">
+                        Because you&apos;re signed in, requests are automatically authenticated with your account.
+                      </p>
+                    </div>
                   )}
+                </>
+              ) : (
+                <div className="text-center py-8">
+                  <p className="text-sm text-fd-muted-foreground mb-2">
+                    Sign in to quickly select from your projects
+                  </p>
+                  <p className="text-xs text-fd-muted-foreground">
+                    Or use the Manual tab to enter credentials directly
+                  </p>
                 </div>
-              );
-            })}
-          </div>
+              )}
+            </div>
+          ) : (
+            <div className="p-4 space-y-4">
+              {stackAuthHeaders.map((header) => {
+                const value = headers[header.key] ?? '';
+                const isMissing = highlightMissingHeaders && header.required && !value.trim();
+
+                return (
+                  <div key={header.key} className="space-y-2">
+                    <label className={`text-sm font-medium flex items-center gap-2 ${
+                      isMissing ? 'text-red-600 dark:text-red-400' : 'text-fd-foreground'
+                    }`}>
+                      {header.label}
+                      {header.required && (
+                        <span className={`text-xs px-1.5 py-0.5 rounded ${
+                          isMissing
+                            ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+                            : 'bg-fd-muted text-fd-muted-foreground'
+                        }`}>
+                          required
+                        </span>
+                      )}
+                    </label>
+                    <input
+                      type="text"
+                      placeholder={header.placeholder}
+                      value={value}
+                      onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
+                      className={`w-full px-3 py-2.5 border rounded-lg text-sm bg-fd-muted/50 text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-2 ${
+                        isMissing
+                          ? 'border-red-300 dark:border-red-700 focus:ring-red-500'
+                          : 'border-fd-border focus:ring-fd-primary focus:border-fd-primary'
+                      }`}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          )}
         </div>
 
         {/* Footer Status */}
-        <div className="border-t border-fd-border p-3">
-          <div className="flex items-center gap-2 text-xs">
+        <div className="border-t border-fd-border p-4 rounded-b-xl">
+          <div className="flex items-center gap-2 text-sm">
             <div className={`w-2 h-2 rounded-full ${
-              missingRequiredHeaders.length === 0 ? 'bg-green-500' : 'bg-red-500 auth-error-pulse'
+              missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                ? 'bg-green-500'
+                : 'bg-fd-muted-foreground'
             }`} />
-            <span className="text-fd-muted-foreground">
-              {Object.values(headers).filter(v => v.trim()).length} configured
-              {selectedProjectId && ' (via project selection)'}
+            <span className={`${
+              missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                ? 'text-green-600 dark:text-green-400'
+                : 'text-fd-muted-foreground'
+            }`}>
+              {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                ? 'Ready'
+                : 'Not configured'}
             </span>
           </div>
-          {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim()) && (
-            <div className="flex items-center gap-2 text-xs mt-1">
-              <div className="w-2 h-2 rounded-full bg-green-500" />
-              <span className="text-green-600 dark:text-green-400">
-                Ready for API requests
-              </span>
-            </div>
-          )}
         </div>
       </div>
 
@@ -358,167 +419,201 @@ export function AuthPanel() {
         aria-hidden={!isAuthOpen}
       >
         {/* Mobile Header */}
-        <div className="flex items-center justify-between p-3 border-b border-fd-border bg-fd-background">
-          <div className="flex items-center gap-2">
-            <div className={`w-5 h-5 rounded flex items-center justify-center ${
-              highlightMissingHeaders
-                ? 'bg-red-100 dark:bg-red-900/30 auth-error-pulse'
-                : 'bg-blue-100 dark:bg-blue-900/30'
-            }`}>
-              {highlightMissingHeaders ? (
-                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400" />
-              ) : (
-                <Key className="w-3 h-3 text-blue-600 dark:text-blue-400" />
-              )}
-            </div>
-            <div>
-              <h3 className="font-medium text-fd-foreground text-sm">
-                {highlightMissingHeaders ? 'Authentication Required' : 'API Authentication'}
-              </h3>
-              <p className="text-xs text-fd-muted-foreground">
-                Configure headers for requests
-              </p>
-            </div>
-          </div>
+        <div className="flex items-center justify-between p-4 border-b border-fd-border bg-fd-background">
+          <h3 className="font-semibold text-fd-foreground text-base">
+            API Authentication
+          </h3>
           <button
             onClick={toggleAuth}
-            className="p-1 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors"
+            className="p-1.5 text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted rounded transition-colors hover:transition-none"
           >
-            <X className="w-4 h-4" />
+            <X className="w-5 h-5" />
           </button>
         </div>
 
-        {/* Error Message - Mobile */}
-        <div className="mx-3 mt-3 h-auto">
-          {highlightMissingHeaders && lastError ? (
-            <div className="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse">
-              <div className="flex items-center gap-2 text-xs">
-                <AlertTriangle className="w-3 h-3 text-red-600 dark:text-red-400" />
-                <span className="text-red-800 dark:text-red-300 font-medium">
-                  {lastError.status} Error - Authentication required
-                </span>
-              </div>
-              {missingRequiredHeaders.length > 0 && (
-                <p className="text-xs text-red-600 dark:text-red-400 mt-1">
-                  Missing: {missingRequiredHeaders.map(h => h.label).join(', ')}
-                </p>
-              )}
-            </div>
-          ) : null}
+        {/* Mobile Tabs */}
+        <div className="flex border-b border-fd-border">
+          <button
+            onClick={() => {
+              setActiveTab('select-project');
+              setIsDropdownOpen(false);
+            }}
+            className={`flex-1 px-4 py-3 text-sm font-medium transition-colors hover:transition-none ${
+              activeTab === 'select-project'
+                ? 'text-fd-foreground border-b-2 border-fd-foreground'
+                : 'text-fd-muted-foreground hover:text-fd-foreground'
+            }`}
+          >
+            Select Project
+          </button>
+          <button
+            onClick={() => {
+              setActiveTab('manual');
+              setIsDropdownOpen(false);
+            }}
+            className={`flex-1 px-4 py-3 text-sm font-medium transition-colors hover:transition-none ${
+              activeTab === 'manual'
+                ? 'text-fd-foreground border-b-2 border-fd-foreground'
+                : 'text-fd-muted-foreground hover:text-fd-foreground'
+            }`}
+          >
+            Manual
+          </button>
         </div>
 
-        {/* Mobile Content - Fixed height to prevent layout shifts */}
-        <div className="flex-1 min-h-0">
-          <div className="h-full overflow-y-auto p-3">
-            <div className="space-y-3">
-              {/* Project Selector - Mobile */}
-              {hasOwnedProjects && projects.length > 0 && (
-                <div className="space-y-1.5 pb-3 border-b border-fd-border">
-                  <label className="text-sm font-medium text-fd-foreground flex items-center gap-2">
-                    Quick Select Project
-                    <span className="text-xs px-1.5 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
-                      logged in
-                    </span>
-                  </label>
-                  <div className="relative">
-                    <select
-                      value={selectedProjectId}
-                      onChange={(e) => handleProjectSelect(e.target.value)}
-                      className="w-full px-3 py-2 pr-8 border rounded-md text-sm bg-fd-background text-fd-foreground focus:outline-none focus:ring-1 focus:ring-fd-primary focus:border-fd-primary border-fd-border appearance-none cursor-pointer"
-                    >
-                      <option value="">Select a project...</option>
-                      {sortedProjects.map((project) => (
-                        <option key={project.id} value={project.id}>
-                          {project.displayName} ({project.id.slice(0, 8)}...)
-                        </option>
-                      ))}
-                    </select>
-                    <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-fd-muted-foreground pointer-events-none" />
+        {/* Mobile Error Banner */}
+        {highlightMissingHeaders && lastError && (
+          <div className="mx-4 mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
+              <span className="text-sm font-medium text-red-800 dark:text-red-300">
+                {lastError.status} Error - Authentication required
+              </span>
+            </div>
+            {missingRequiredHeaders.length > 0 && (
+              <p className="text-sm text-red-600 dark:text-red-400 mt-1.5 ml-6">
+                Missing: {missingRequiredHeaders.map(h => h.label).join(', ')}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Mobile Content */}
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          {activeTab === 'select-project' ? (
+            <div className="p-4 space-y-4">
+              {hasOwnedProjects && projects.length > 0 ? (
+                <>
+                  <div className="space-y-2" ref={mobileDropdownRef}>
+                    <label className="text-sm font-medium text-fd-foreground">
+                      Select Project
+                    </label>
+                    <div className="relative">
+                      <button
+                        type="button"
+                        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                        className="w-full px-3 py-3 pr-10 border rounded-lg text-base bg-fd-muted/50 text-fd-foreground focus:outline-none focus:ring-2 focus:ring-fd-primary focus:border-fd-primary border-fd-border text-left flex items-center justify-between"
+                      >
+                        <span className={selectedProjectId ? 'text-fd-foreground' : 'text-fd-muted-foreground'}>
+                          {selectedProjectId
+                            ? sortedProjects.find(p => p.id === selectedProjectId)?.displayName
+                            : 'Select a project...'}
+                        </span>
+                        <ChevronDown className={`w-5 h-5 text-fd-muted-foreground transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
+                      </button>
+
+                      {/* Dropdown Menu */}
+                      {isDropdownOpen && (
+                        <div className="absolute top-full left-0 right-0 mt-1 bg-fd-background border border-fd-border rounded-lg shadow-lg z-50 max-h-60 overflow-y-auto">
+                          {sortedProjects.map((project) => (
+                            <button
+                              key={project.id}
+                              type="button"
+                              onClick={() => {
+                                handleProjectSelect(project.id);
+                                setIsDropdownOpen(false);
+                              }}
+                              className="w-full px-3 py-3 text-base text-left hover:bg-fd-muted/50 flex items-center justify-between transition-colors hover:transition-none"
+                            >
+                              <span className="text-fd-foreground">{project.displayName}</span>
+                              {selectedProjectId === project.id && (
+                                <Check className="w-5 h-5 text-green-500" />
+                              )}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
                   </div>
+
                   {selectedProjectId && (
-                    <p className="text-xs text-green-600 dark:text-green-400">
-                      ✓ Headers auto-populated for admin authentication
-                    </p>
+                    <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-green-500" />
+                        <span className="text-sm font-medium text-green-700 dark:text-green-300">
+                          Ready to make requests
+                        </span>
+                      </div>
+                      <p className="text-sm text-green-600 dark:text-green-400 mt-2">
+                        Because you&apos;re signed in, requests are automatically authenticated with your account.
+                      </p>
+                    </div>
                   )}
+                </>
+              ) : (
+                <div className="text-center py-12">
+                  <p className="text-base text-fd-muted-foreground mb-2">
+                    Sign in to quickly select from your projects
+                  </p>
+                  <p className="text-sm text-fd-muted-foreground">
+                    Or use the Manual tab to enter credentials directly
+                  </p>
                 </div>
               )}
-
-              {/* Manual Header Inputs - Mobile */}
+            </div>
+          ) : (
+            <div className="p-4 space-y-4">
               {stackAuthHeaders.map((header) => {
-                // Hide certain fields when project is selected
-                if (selectedProjectId && header.hideWhenProjectSelected) {
-                  return null;
-                }
-
                 const value = headers[header.key] ?? '';
                 const isMissing = highlightMissingHeaders && header.required && !value.trim();
-                const isAutoPopulated = Boolean(header.isSensitive && selectedProjectId && value.length > 0);
 
                 return (
-                  <div key={header.key} className={`space-y-1.5 ${
-                    isMissing ? 'p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md auth-error-pulse' : ''
-                  }`}>
-                    <label className="text-sm font-medium text-fd-foreground flex items-center gap-2">
+                  <div key={header.key} className="space-y-2">
+                    <label className={`text-sm font-medium flex items-center gap-2 ${
+                      isMissing ? 'text-red-600 dark:text-red-400' : 'text-fd-foreground'
+                    }`}>
                       {header.label}
                       {header.required && (
                         <span className={`text-xs px-1.5 py-0.5 rounded ${
                           isMissing
                             ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
-                            : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                            : 'bg-fd-muted text-fd-muted-foreground'
                         }`}>
                           required
                         </span>
                       )}
-                      {isMissing && (
-                        <AlertTriangle className="w-3 h-3 text-red-500" />
-                      )}
                     </label>
                     <input
                       type="text"
                       placeholder={header.placeholder}
                       value={value}
                       onChange={(e) => updateSharedHeaders({ ...headers, [header.key]: e.target.value })}
-                      readOnly={isAutoPopulated}
-                      className={`w-full px-3 py-2 border rounded-md text-sm bg-fd-background text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-1 focus:border-transparent transition-all duration-200 ${
+                      className={`w-full px-3 py-3 border rounded-lg text-base bg-fd-muted/50 text-fd-foreground placeholder:text-fd-muted-foreground focus:outline-none focus:ring-2 ${
                         isMissing
-                          ? 'border-red-300 focus:ring-red-500 dark:border-red-700'
+                          ? 'border-red-300 dark:border-red-700 focus:ring-red-500'
                           : 'border-fd-border focus:ring-fd-primary focus:border-fd-primary'
-                      } ${isAutoPopulated ? 'bg-fd-muted/50 cursor-not-allowed' : ''}`}
+                      }`}
                     />
-                    {isAutoPopulated && (
-                      <p className="text-xs text-fd-muted-foreground">Auto-populated from your account</p>
-                    )}
                   </div>
                 );
               })}
             </div>
-          </div>
+          )}
         </div>
 
         {/* Mobile Footer */}
-        <div className="border-t border-fd-border p-3 bg-fd-background">
+        <div className="border-t border-fd-border p-4 bg-fd-background">
           <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2 text-xs">
+            <div className="flex items-center gap-2 text-sm">
               <div className={`w-2 h-2 rounded-full ${
-                missingRequiredHeaders.length === 0 ? 'bg-green-500' : 'bg-red-500 auth-error-pulse'
+                missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                  ? 'bg-green-500'
+                  : 'bg-fd-muted-foreground'
               }`} />
-              <span className="text-fd-muted-foreground">
-                {Object.values(headers).filter(v => v.trim()).length} configured
-                {selectedProjectId && ' (via project)'}
+              <span className={`${
+                missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                  ? 'text-green-600 dark:text-green-400'
+                  : 'text-fd-muted-foreground'
+              }`}>
+                {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim())
+                  ? 'Ready'
+                  : 'Not configured'}
               </span>
             </div>
-            <Button onClick={toggleAuth} className="text-xs px-3 py-1">
+            <Button onClick={toggleAuth} className="px-4 py-2">
               Done
             </Button>
           </div>
-          {missingRequiredHeaders.length === 0 && Object.values(headers).some(v => v.trim()) && (
-            <div className="flex items-center gap-2 text-xs mt-2">
-              <div className="w-2 h-2 rounded-full bg-green-500" />
-              <span className="text-green-600 dark:text-green-400">
-                Ready for API requests
-              </span>
-            </div>
-          )}
         </div>
       </div>
     </>