diff --git a/src/components/Login/Login.js b/src/components/Login/Login.js
index 34abb12..57db7c8 100644
--- a/src/components/Login/Login.js
+++ b/src/components/Login/Login.js
@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
 
 const Login = () => {
   const [handle, setHandle] = useState('');
   const { login, loading, error, isAuthenticated } = useAuth();
-  const navigate = useNavigate();
   const location = useLocation();
 
   const queryParams = new URLSearchParams(location.search);
diff --git a/src/components/Verifier/Verifier.js b/src/components/Verifier/Verifier.js
index 31a6860..9be340e 100644
--- a/src/components/Verifier/Verifier.js
+++ b/src/components/Verifier/Verifier.js
@@ -1,47 +1,39 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 import { Agent } from '@atproto/api';
+import VerifierForm from './VerifierForm';
+import VerifierSuggestions from './VerifierSuggestions';
 
-function Verifier() {
+export default function Verifier() {
   const { session, loading: isAuthLoading, error: authError } = useAuth();
   const [agent, setAgent] = useState(null);
 
-  // Verification records (all pages, loaded automatically)
   const [verifications, setVerifications] = useState([]);
   const [isLoadingVerifications, setIsLoadingVerifications] = useState(false);
 
-  // User lists (app.bsky.graph.list owned by the account)
   const [userLists, setUserLists] = useState([]);
   const [isLoadingLists, setIsLoadingLists] = useState(false);
 
-  // Verification mode: 'account' or 'list'
   const [mode, setMode] = useState('account');
   const [targetHandle, setTargetHandle] = useState('');
   const [selectedListUri, setSelectedListUri] = useState('');
 
-  // Bulk verification progress
   const [bulkProgress, setBulkProgress] = useState(null);
-
   const [statusMessage, setStatusMessage] = useState('');
+  const [statusType, setStatusType] = useState('success');
   const [isVerifying, setIsVerifying] = useState(false);
 
-  // Typeahead suggestions
   const [suggestions, setSuggestions] = useState([]);
   const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
   const [showSuggestions, setShowSuggestions] = useState(false);
-  const debounceTimeoutRef = useRef(null);
-  const suggestionListRef = useRef(null);
+  const debounceRef = useRef(null);
 
-  // Build agent when session exists
+  // --- Agent ---
   useEffect(() => {
-    if (session) {
-      setAgent(new Agent(session));
-    } else {
-      setAgent(null);
-    }
+    setAgent(session ? new Agent(session) : null);
   }, [session]);
 
-  // Fetch ALL verification records (auto-paginate)
+  // --- Data fetching ---
   const fetchAllVerifications = useCallback(async () => {
     if (!agent || !session) return;
     setIsLoadingVerifications(true);
@@ -49,35 +41,27 @@ function Verifier() {
     try {
       let cursor = null;
       do {
-        const params = {
-          repo: session.did,
-          collection: 'app.bsky.graph.verification',
-          limit: 100,
-        };
+        const params = { repo: session.did, collection: 'app.bsky.graph.verification', limit: 100 };
         if (cursor) params.cursor = cursor;
-        const response = await agent.api.com.atproto.repo.listRecords(params);
-        if (response.data.records) {
-          all.push(...response.data.records.map(record => ({
-            uri: record.uri,
-            cid: record.cid,
-            handle: record.value.handle,
-            displayName: record.value.displayName,
-            subject: record.value.subject,
-            createdAt: record.value.createdAt,
+        const res = await agent.api.com.atproto.repo.listRecords(params);
+        if (res.data.records) {
+          all.push(...res.data.records.map(r => ({
+            uri: r.uri, cid: r.cid,
+            handle: r.value.handle, displayName: r.value.displayName,
+            subject: r.value.subject, createdAt: r.value.createdAt,
           })));
         }
-        cursor = response.data.cursor || null;
+        cursor = res.data.cursor || null;
       } while (cursor);
       setVerifications(all);
     } catch (error) {
-      console.error('Failed to fetch verifications:', error);
       setStatusMessage(`Failed to load verifications: ${error.message || 'Unknown error'}`);
+      setStatusType('error');
     } finally {
       setIsLoadingVerifications(false);
     }
   }, [agent, session]);
 
-  // Fetch ALL user lists owned by the account (curatelist only)
   const fetchUserLists = useCallback(async () => {
     if (!agent || !session) return;
     setIsLoadingLists(true);
@@ -85,52 +69,42 @@ function Verifier() {
     try {
       let cursor = null;
       do {
-        const params = { actor: session.did, limit: 100 };
-        if (cursor) params.cursor = cursor;
-        const response = await agent.api.app.bsky.graph.getLists(params);
-        if (response.data.lists) {
-          all.push(...response.data.lists.filter(l => l.purpose === 'app.bsky.graph.defs#curatelist'));
+        const res = await agent.api.app.bsky.graph.getLists({ actor: session.did, limit: 100, ...(cursor ? { cursor } : {}) });
+        if (res.data.lists) {
+          all.push(...res.data.lists.filter(l => l.purpose === 'app.bsky.graph.defs#curatelist'));
         }
-        cursor = response.data.cursor || null;
+        cursor = res.data.cursor || null;
       } while (cursor);
       setUserLists(all);
-    } catch (error) {
-      console.error('Failed to fetch user lists:', error);
     } finally {
       setIsLoadingLists(false);
     }
   }, [agent, session]);
 
-  // Auto-load verifications + lists once agent is ready
   useEffect(() => {
-    if (agent && session) {
-      fetchAllVerifications();
-      fetchUserLists();
-    }
+    if (agent && session) { fetchAllVerifications(); fetchUserLists(); }
   }, [agent, session, fetchAllVerifications, fetchUserLists]);
 
-  // Set of already-verified subject DIDs for fast duplicate lookup
-  const verifiedDids = new Set(verifications.map(v => v.subject));
-  const verifiedByHandle = {};
-  verifications.forEach(v => { verifiedByHandle[v.handle.toLowerCase()] = v; });
+  // --- Derived data (memoized) ---
+  const verifiedDids = useMemo(() => new Set(verifications.map(v => v.subject)), [verifications]);
+  const verifiedByHandle = useMemo(() => {
+    const map = {};
+    verifications.forEach(v => { map[v.handle.toLowerCase()] = v; });
+    return map;
+  }, [verifications]);
 
-  // Typeahead
+  // --- Typeahead ---
   const fetchSuggestions = useCallback(async (query) => {
-    if (!query || query.length < 1) {
-      setSuggestions([]);
-      setShowSuggestions(false);
-      return;
-    }
+    if (!query || query.length < 1) { setSuggestions([]); setShowSuggestions(false); return; }
     setIsLoadingSuggestions(true);
     setShowSuggestions(true);
     try {
       const url = `https://public.api.bsky.app/xrpc/app.bsky.actor.searchActorsTypeahead?q=${encodeURIComponent(query)}&limit=10`;
-      const response = await fetch(url);
-      if (!response.ok) throw new Error(`API Error: ${response.status}`);
-      const data = await response.json();
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`API Error: ${res.status}`);
+      const data = await res.json();
       setSuggestions(data.actors || []);
-    } catch (error) {
-      console.error('Failed to fetch suggestions:', error);
+    } catch {
       setSuggestions([]);
     } finally {
       setIsLoadingSuggestions(false);
@@ -138,41 +112,24 @@ function Verifier() {
   }, []);
 
   const handleInputChange = (e) => {
-    const newHandle = e.target.value;
-    setTargetHandle(newHandle);
-    if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
-    if (newHandle.trim() === '') {
-      setSuggestions([]);
-      setShowSuggestions(false);
-      setIsLoadingSuggestions(false);
-      return;
-    }
-    debounceTimeoutRef.current = setTimeout(() => fetchSuggestions(newHandle), 300);
+    const val = e.target.value;
+    setTargetHandle(val);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (val.trim() === '') { setSuggestions([]); setShowSuggestions(false); return; }
+    debounceRef.current = setTimeout(() => fetchSuggestions(val), 300);
   };
 
-  const handleSuggestionClick = (handle) => {
-    setTargetHandle(handle);
-    setSuggestions([]);
-    setShowSuggestions(false);
-  };
+  const handleSuggestionSelect = (handle) => { setTargetHandle(handle); setShowSuggestions(false); setSuggestions([]); };
 
-  // Write a single verification record for a profile object
+  // --- Verification ---
   const writeVerification = useCallback(async (did, handle, displayName) => {
-    const verificationRecord = {
-      $type: 'app.bsky.graph.verification',
-      subject: did,
-      handle,
-      displayName,
-      createdAt: new Date().toISOString(),
-    };
     await agent.api.com.atproto.repo.createRecord({
       repo: session.did,
       collection: 'app.bsky.graph.verification',
-      record: verificationRecord,
+      record: { $type: 'app.bsky.graph.verification', subject: did, handle, displayName, createdAt: new Date().toISOString() },
     });
   }, [agent, session]);
 
-  // Single account verification
   const handleVerifyAccount = async (e) => {
     e.preventDefault();
     if (!agent || !session || !targetHandle) return;
@@ -184,36 +141,31 @@ function Verifier() {
 
       if (verifiedDids.has(targetDid)) {
         const existing = verifications.find(v => v.subject === targetDid);
-        setStatusMessage(
-          `@${targetHandle} is already verified (verified ${new Date(existing.createdAt).toLocaleString()}). See your verifications below.`
-        );
+        setStatusMessage(`@${targetHandle} is already verified (verified ${new Date(existing.createdAt).toLocaleString()}). See your verifications below.`);
+        setStatusType('success');
         return;
       }
 
-      setStatusMessage(`Verifying ${targetHandle}...`);
       await writeVerification(targetDid, targetHandle, targetDisplayName);
-
       const postText = `I just verified @${targetHandle} using Bluesky's verification system.`;
       const intentUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(postText)}`;
       setStatusMessage(
-        <>
-          Successfully created verification for {targetHandle}!{' '}
-          <a href={intentUrl} target="_blank" rel="noopener noreferrer" className="verifier-intent-link">
+        <>Successfully verified {targetHandle}!{' '}
+          <a href={intentUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--success-text)', fontWeight: 600, textDecoration: 'underline' }}>
             Post on Bluesky to let them know?
-          </a>
-        </>
+          </a></>
       );
+      setStatusType('success');
       setTargetHandle('');
       fetchAllVerifications();
     } catch (error) {
-      console.error('Verification failed:', error);
       setStatusMessage(`Verification failed: ${error.message || 'Unknown error'}`);
+      setStatusType('error');
     } finally {
       setIsVerifying(false);
     }
   };
 
-  // List (bulk) verification
   const handleVerifyList = async (e) => {
     e.preventDefault();
     if (!agent || !session || !selectedListUri) return;
@@ -221,57 +173,37 @@ function Verifier() {
     setBulkProgress(null);
     try {
       setStatusMessage('Fetching list members...');
+      setStatusType('success');
       const members = [];
       let cursor = null;
       do {
-        const params = { list: selectedListUri, limit: 100 };
-        if (cursor) params.cursor = cursor;
-        const response = await agent.api.app.bsky.graph.getList(params);
-        if (response.data.items) {
-          members.push(...response.data.items.map(item => item.subject));
-        }
-        cursor = response.data.cursor || null;
+        const res = await agent.api.app.bsky.graph.getList({ list: selectedListUri, limit: 100, ...(cursor ? { cursor } : {}) });
+        if (res.data.items) members.push(...res.data.items.map(i => i.subject));
+        cursor = res.data.cursor || null;
       } while (cursor);
 
-      if (members.length === 0) {
-        setStatusMessage('This list has no members.');
-        return;
-      }
-
-      let verified = 0;
-      let skipped = 0;
-      let failed = 0;
+      if (!members.length) { setStatusMessage('This list has no members.'); setStatusType('success'); return; }
 
+      let verified = 0, skipped = 0, failed = 0;
       for (let i = 0; i < members.length; i++) {
-        const member = members[i];
-        setBulkProgress({ current: i + 1, total: members.length, currentHandle: member.handle });
-
-        if (verifiedDids.has(member.did)) {
-          skipped++;
-          continue;
-        }
-
+        const m = members[i];
+        setBulkProgress({ current: i + 1, total: members.length, currentHandle: m.handle });
+        if (verifiedDids.has(m.did)) { skipped++; continue; }
         try {
-          await writeVerification(member.did, member.handle, member.displayName || member.handle);
-          verifiedDids.add(member.did);
-          verified++;
-        } catch (err) {
-          console.error(`Failed to verify ${member.handle}:`, err);
-          failed++;
-        }
-
+          await writeVerification(m.did, m.handle, m.displayName || m.handle);
+          verifiedDids.add(m.did); verified++;
+        } catch { failed++; }
         await new Promise(r => setTimeout(r, 250));
       }
 
       const listName = userLists.find(l => l.uri === selectedListUri)?.name || 'list';
-      setStatusMessage(
-        `Finished verifying "${listName}": ${verified} verified, ${skipped} already verified, ${failed} failed (${members.length} total).`
-      );
+      setStatusMessage(`Finished verifying "${listName}": ${verified} verified, ${skipped} already verified, ${failed} failed (${members.length} total).`);
+      setStatusType('success');
       setSelectedListUri('');
       fetchAllVerifications();
     } catch (error) {
-      console.error('List verification failed:', error);
       setStatusMessage(`List verification failed: ${error.message || 'Unknown error'}`);
+      setStatusType('error');
     } finally {
       setIsVerifying(false);
       setBulkProgress(null);
@@ -283,130 +215,49 @@ function Verifier() {
   const handleRevoke = async (verification) => {
     if (!agent || !session) return;
     setIsVerifying(true);
-    setStatusMessage(`Revoking verification for ${verification.handle}...`);
     try {
-      const rkey = verification.uri.split('/').pop();
       await agent.api.com.atproto.repo.deleteRecord({
-        repo: session.did,
-        collection: 'app.bsky.graph.verification',
-        rkey,
+        repo: session.did, collection: 'app.bsky.graph.verification', rkey: verification.uri.split('/').pop(),
       });
-      setStatusMessage(`Successfully revoked verification for ${verification.handle}`);
+      setStatusMessage(`Revoked verification for ${verification.handle}`);
+      setStatusType('success');
       fetchAllVerifications();
     } catch (error) {
-      console.error('Revocation failed:', error);
       setStatusMessage(`Revocation failed: ${error.message || 'Unknown error'}`);
+      setStatusType('error');
     } finally {
       setIsVerifying(false);
     }
   };
 
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (suggestionListRef.current && !suggestionListRef.current.contains(event.target)) {
-        if (!event.target.classList.contains('verifier-input-field')) {
-          setShowSuggestions(false);
-        }
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
+  // --- Render ---
   if (isAuthLoading) return <p>Loading authentication...</p>;
   if (authError) return <p>Authentication Error: {authError}. <a href="/login">Please login</a>.</p>;
 
-  const isDuplicateHandle = targetHandle && verifications.some(
-    v => v.handle.toLowerCase() === targetHandle.toLowerCase()
-  );
+  const isDuplicateHandle = !!(targetHandle && verifiedByHandle[targetHandle.toLowerCase()]);
+  const duplicateDate = isDuplicateHandle
+    ? new Date(verifiedByHandle[targetHandle.toLowerCase()].createdAt).toLocaleString()
+    : '';
 
   return (
     <div className="verifier-container">
-      <div className="verifier-section">
-        <h2>Verify an ATmosphere account</h2>
-        <form onSubmit={handleVerify} className="verifier-form-container">
-          <select
-            value={mode}
-            onChange={(e) => setMode(e.target.value)}
-            disabled={isVerifying}
-            className="verifier-mode-select"
-          >
-            <option value="account">Account</option>
-            <option value="list">User List</option>
-          </select>
-
-          {mode === 'account' ? (
-            <input
-              type="text"
-              value={targetHandle}
-              onChange={handleInputChange}
-              placeholder="username.bsky.social"
-              disabled={isVerifying || isLoadingVerifications}
-              required
-              className="verifier-input-field"
-              autoComplete="off"
-            />
-          ) : (
-            <select
-              value={selectedListUri}
-              onChange={(e) => setSelectedListUri(e.target.value)}
-              disabled={isVerifying || isLoadingLists}
-              required
-              className="verifier-list-select"
-            >
-              <option value="">
-                {isLoadingLists ? 'Loading your lists...' : 'Select a list to verify'}
-              </option>
-              {userLists.map(list => (
-                <option key={list.uri} value={list.uri}>
-                  {list.name} ({list.listItemCount ?? 0} members)
-                </option>
-              ))}
-            </select>
-          )}
-
-          <button
-            type="submit"
-            disabled={
-              isVerifying ||
-              (mode === 'account' ? !targetHandle : !selectedListUri)
-            }
-            className="verifier-submit-button"
-          >
-            {isVerifying ? 'Verifying...' : 'Verify Account'}
-          </button>
-        </form>
-
-        {mode === 'account' && showSuggestions && suggestions.length > 0 && (
-          <ul className="verifier-suggestions-list" ref={suggestionListRef}>
-            {isLoadingSuggestions ? (
-              <li className="verifier-suggestion-item loading">Loading suggestions...</li>
-            ) : (
-              suggestions.map(actor => (
-                <li key={actor.did} className="verifier-suggestion-item" onClick={() => handleSuggestionClick(actor.handle)}>
-                  <img src={actor.avatar} alt="" className="verifier-suggestion-avatar" onError={(e) => e.target.style.display = 'none'} />
-                  <div className="verifier-suggestion-text">
-                    <span className="verifier-suggestion-name">{actor.displayName || actor.handle}</span>
-                    <span className="verifier-suggestion-handle">@{actor.handle}</span>
-                  </div>
-                </li>
-              ))
-            )}
-          </ul>
-        )}
-
-        {mode === 'account' && isDuplicateHandle && (
-          <p className="verifier-duplicate-note">
-            Already verified on {new Date(verifiedByHandle[targetHandle.toLowerCase()]?.createdAt).toLocaleString()} — see your verifications below.
-          </p>
-        )}
-
-        {mode === 'list' && !isLoadingLists && userLists.length === 0 && (
-          <p className="verifier-duplicate-note">
-            You don't have any user lists. Create one on Bluesky first.
-          </p>
-        )}
-      </div>
+      <VerifierForm
+        mode={mode} setMode={setMode}
+        targetHandle={targetHandle} onChangeHandle={handleInputChange}
+        selectedListUri={selectedListUri} setSelectedListUri={setSelectedListUri}
+        userLists={userLists} isLoadingLists={isLoadingLists}
+        isVerifying={isVerifying}
+        isDuplicateHandle={isDuplicateHandle} duplicateDate={duplicateDate}
+        onSubmit={handleVerify}
+      />
+
+      {mode === 'account' && showSuggestions && (
+        <VerifierSuggestions
+          suggestions={suggestions}
+          isLoading={isLoadingSuggestions}
+          onSelect={handleSuggestionSelect}
+        />
+      )}
 
       {bulkProgress && (
         <div className="verifier-status-box verifier-status-box-success">
@@ -415,40 +266,36 @@ function Verifier() {
       )}
 
       {statusMessage && (
-        <div className={`verifier-status-box ${typeof statusMessage === 'string' && (statusMessage.includes('failed') || statusMessage.includes('Error')) ? 'verifier-status-box-error' : 'verifier-status-box-success'}`}>
+        <div className={`verifier-status-box verifier-status-box-${statusType}`}>
           <p>{statusMessage}</p>
         </div>
       )}
 
       <div className="verifier-section">
         <h2>Your Verifications</h2>
-        {isLoadingVerifications ? (
-          <p>Loading...</p>
-        ) : verifications.length === 0 ? (
-          <p>You haven't verified any accounts.</p>
-        ) : (
-          <ul className="verifier-list">
-            {verifications.map((verification) => (
-              <li key={verification.uri} className="verifier-list-item">
-                <div className="verifier-list-item-content">
-                  <a href={`https://bsky.app/profile/${verification.handle}`} target="_blank" rel="noopener noreferrer" className="verifier-profile-link">
-                    <span className="verifier-display-name">{verification.displayName}</span>
-                    <span className="verifier-list-item-handle">@{verification.handle}</span>
-                  </a>
-                  <div className="verifier-list-item-date">Verified: {new Date(verification.createdAt).toLocaleString()}</div>
-                </div>
-                <div className="verifier-list-item-actions">
-                  <button onClick={() => handleRevoke(verification)} disabled={isVerifying} className="verifier-revoke-button">
-                    {(isVerifying && statusMessage && statusMessage.toString().includes(verification.handle)) ? 'Revoking...' : 'Revoke'}
-                  </button>
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
+        {isLoadingVerifications ? <p>Loading...</p>
+          : verifications.length === 0 ? <p>You haven't verified any accounts.</p>
+          : (
+            <ul className="verifier-list">
+              {verifications.map(v => (
+                <li key={v.uri} className="verifier-list-item">
+                  <div className="verifier-list-item-content">
+                    <a href={`https://bsky.app/profile/${v.handle}`} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text)', textDecoration: 'none' }}>
+                      <span className="verifier-display-name">{v.displayName}</span>
+                      <span className="verifier-list-item-handle">@{v.handle}</span>
+                    </a>
+                    <div className="verifier-list-item-date">Verified: {new Date(v.createdAt).toLocaleString()}</div>
+                  </div>
+                  <div className="verifier-list-item-actions">
+                    <button onClick={() => handleRevoke(v)} disabled={isVerifying} className="verifier-revoke-button">
+                      Revoke
+                    </button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
       </div>
     </div>
   );
 }
-
-export default Verifier;
diff --git a/src/components/Verifier/VerifierForm.jsx b/src/components/Verifier/VerifierForm.jsx
new file mode 100644
index 0000000..55b0a6b
--- /dev/null
+++ b/src/components/Verifier/VerifierForm.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+export default function VerifierForm({
+  mode,
+  setMode,
+  targetHandle,
+  onChangeHandle,
+  selectedListUri,
+  setSelectedListUri,
+  userLists,
+  isLoadingLists,
+  isVerifying,
+  isDuplicateHandle,
+  duplicateDate,
+  onSubmit,
+}) {
+  return (
+    <div className="verifier-section">
+      <h2>Verify an ATmosphere account</h2>
+      <form onSubmit={onSubmit} className="verifier-form-container">
+        <select
+          value={mode}
+          onChange={(e) => setMode(e.target.value)}
+          disabled={isVerifying}
+        >
+          <option value="account">Account</option>
+          <option value="list">User List</option>
+        </select>
+
+        {mode === 'account' ? (
+          <input
+            type="text"
+            value={targetHandle}
+            onChange={onChangeHandle}
+            placeholder="username.bsky.social"
+            disabled={isVerifying}
+            required
+            autoComplete="off"
+          />
+        ) : (
+          <select
+            value={selectedListUri}
+            onChange={(e) => setSelectedListUri(e.target.value)}
+            disabled={isVerifying || isLoadingLists}
+            required
+          >
+            <option value="">
+              {isLoadingLists ? 'Loading your lists...' : 'Select a list to verify'}
+            </option>
+            {userLists.map(list => (
+              <option key={list.uri} value={list.uri}>
+                {list.name} ({list.listItemCount ?? 0} members)
+              </option>
+            ))}
+          </select>
+        )}
+
+        <button
+          type="submit"
+          disabled={isVerifying || (mode === 'account' ? !targetHandle : !selectedListUri)}
+          className="verifier-submit-button"
+        >
+          {isVerifying ? 'Verifying...' : 'Verify Account'}
+        </button>
+      </form>
+
+      {mode === 'account' && isDuplicateHandle && (
+        <p className="verifier-duplicate-note">
+          Already verified on {duplicateDate} — see your verifications below.
+        </p>
+      )}
+
+      {mode === 'list' && !isLoadingLists && userLists.length === 0 && (
+        <p className="verifier-duplicate-note">
+          You don't have any user lists. Create one on Bluesky first.
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Verifier/VerifierSuggestions.jsx b/src/components/Verifier/VerifierSuggestions.jsx
new file mode 100644
index 0000000..8175fee
--- /dev/null
+++ b/src/components/Verifier/VerifierSuggestions.jsx
@@ -0,0 +1,30 @@
+import React, { useRef, useCallback } from 'react';
+
+export default function VerifierSuggestions({ suggestions, isLoading, onSelect, inputRef }) {
+  const listRef = useRef(null);
+
+  if (!suggestions.length) return null;
+
+  return (
+    <ul className="verifier-suggestions-list" ref={listRef}>
+      {isLoading ? (
+        <li className="verifier-suggestion-item loading">Loading suggestions...</li>
+      ) : (
+        suggestions.map(actor => (
+          <li key={actor.did} className="verifier-suggestion-item" onClick={() => onSelect(actor.handle)}>
+            <img
+              src={actor.avatar}
+              alt=""
+              className="verifier-suggestion-avatar"
+              onError={(e) => { e.target.style.display = 'none'; }}
+            />
+            <div className="verifier-suggestion-text">
+              <span className="verifier-suggestion-name">{actor.displayName || actor.handle}</span>
+              <span className="verifier-suggestion-handle">@{actor.handle}</span>
+            </div>
+          </li>
+        ))
+      )}
+    </ul>
+  );
+}
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
index e9905d6..cdc2ee2 100644
--- a/src/contexts/AuthContext.js
+++ b/src/contexts/AuthContext.js
@@ -1,11 +1,8 @@
 import React, { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
 import { BrowserOAuthClient } from '@atproto/oauth-client-browser';
 
-// Create auth context
 export const AuthContext = createContext(null);
 
-
-// Client metadata for Bluesky OAuth
 const clientMetadata = {
   client_id: `https://verifier.psingletary.com/client-metadata.json`,
   client_name: "Verifier",
@@ -27,99 +24,68 @@ export const AuthProvider = ({ children }) => {
   const [error, setError] = useState(null);
   const initializing = useRef(false);
 
-  // Updated initializeAuth for BrowserOAuthClient
   useEffect(() => {
     const initializeAuth = async () => {
       if (initializing.current || client) return;
       initializing.current = true;
       setLoading(true);
       setError(null);
-      console.log('(AuthProvider) Initializing BrowserOAuthClient...');
 
       try {
         const oauthClient = new BrowserOAuthClient({
-          clientMetadata: clientMetadata,
+          clientMetadata,
           handleResolver: 'https://public.api.bsky.app',
           plcDirectoryUrl: 'https://plc.directory',
         });
 
         setClient(oauthClient);
-        console.log('(AuthProvider) Initializing OAuth client...');
         const initResult = await oauthClient.init();
-        console.log('(AuthProvider) Init result:', { 
-          hasSession: !!initResult?.session,
-          hasState: !!initResult?.state,
-          did: initResult?.session?.did 
-        });
 
         if (initResult?.session) {
           setSession(initResult.session);
-          console.log(`(AuthProvider) Session ${initResult.state ? 'established via callback' : 'restored'}:`, initResult.session.did);
         } else {
           setSession(null);
-          console.log('(AuthProvider) No active session found or callback processed.');
         }
       } catch (err) {
-        console.error('(AuthProvider) Error initializing client or handling callback:', err);
+        console.error('Auth initialization failed:', err);
         setError('Authentication initialization failed. Please try refreshing.');
         setSession(null);
       } finally {
         setLoading(false);
         initializing.current = false;
-        console.log('(AuthProvider) Initialization complete.');
       }
     };
 
     initializeAuth();
   }, [client]);
 
-  // Updated login function - uses client.signIn()
   const login = useCallback(async (handle, returnUrl = '/') => {
     if (!client) {
       setError("Client not initialized.");
       return;
     }
-    console.log(`(AuthProvider) Initiating client-side login for handle: ${handle || 'none specified'}, returnUrl: ${returnUrl}`);
     try {
       const stateData = JSON.stringify({ returnUrl });
-      await client.signIn(handle, {
-         state: stateData,
-      });
+      await client.signIn(handle, { state: stateData });
     } catch (err) {
-      console.error('(AuthProvider) Error during signIn initiation or cancellation:', err);
+      console.error('Login failed:', err);
       setError('Login initiation failed or was cancelled.');
     }
   }, [client]);
 
-  // Updated Logout function - uses session.signOut()
   const logout = useCallback(async () => {
-     if (!session) {
-       console.log('(AuthProvider) No active session to log out');
-       return;
-     }
-     console.log('(AuthProvider) Logging out...');
-     try {
-        await session.signOut();
-        setSession(null);
-        console.log('(AuthProvider) Logout complete.');
-        window.location.href = '/';
-     } catch (err) {
-       console.error('(AuthProvider) Error during logout:', err);
-       setSession(null);
-       window.location.href = '/';
-     }
+    if (!session) return;
+    try {
+      await session.signOut();
+      setSession(null);
+      window.location.href = '/';
+    } catch (err) {
+      console.error('Logout failed:', err);
+      setSession(null);
+      window.location.href = '/';
+    }
   }, [session]);
 
-  // Debug effect to log auth state changes
-  useEffect(() => {
-    console.log('(AuthProvider) Auth state updated:', {
-      isAuthenticated: !!session,
-      did: session?.did || null,
-      loading,
-      hasError: !!error
-    });
-  }, [session, loading, error]);
-
   return (
     <AuthContext.Provider
       value={{
@@ -137,7 +103,6 @@ export const AuthProvider = ({ children }) => {
   );
 };
 
-// Custom hook to use the auth context
 export const useAuth = () => {
   const context = useContext(AuthContext);
   if (context === null) {