diff --git a/app/(account)/page.tsx b/app/(account)/page.tsx
index 4860fed..dec0432 100644
--- a/app/(account)/page.tsx
+++ b/app/(account)/page.tsx
@@ -8,6 +8,7 @@ import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
 import { Avatar } from '@/components/ui/Avatar';
 import { Skeleton } from '@/components/ui/Skeleton';
+import { CopyButton } from '@/components/ui/CopyButton';
 import { User, Shield, Grid, Activity, AlertCircle, ArrowRight, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -139,6 +140,25 @@ export default function OverviewPage() {
         </div>
       )}
 
+      {/* SAMKIEL ID */}
+      <section>
+        <Card className="bg-surface/70">
+          <div className="flex items-start justify-between gap-4">
+            <div className="space-y-2 min-w-0">
+              <p className="text-xs uppercase tracking-wider text-muted font-medium">Your SAMKIEL ID</p>
+              <div className="flex items-center gap-3 flex-wrap">
+                <span className="font-mono text-2xl sm:text-3xl font-bold text-accent tracking-wider">
+                  {user?.samkielId ?? '—'}
+                </span>
+                {user?.samkielId && <CopyButton value={user.samkielId} label="Copy SAMKIEL ID" />}
+              </div>
+              <p className="text-sm text-muted">This is your permanent identifier. It never changes.</p>
+              {user?.username && <p className="text-sm text-white font-medium">@{user.username}</p>}
+            </div>
+          </div>
+        </Card>
+      </section>
+
       {/* Summary grid */}
       <section className="space-y-5">
         <div className="space-y-1">
diff --git a/app/(account)/personal-info/page.tsx b/app/(account)/personal-info/page.tsx
index b932152..b094fc8 100644
--- a/app/(account)/personal-info/page.tsx
+++ b/app/(account)/personal-info/page.tsx
@@ -2,13 +2,14 @@
 
 import React, { useRef, useState } from 'react';
 import { useAuth } from '@samkiel/authsdk/react';
-import { SamkielAuthError } from '@samkiel/authsdk';
+import { SamkielAuthError, UsernameChangeCooldownError } from '@samkiel/authsdk';
 import { Card } from '@/components/ui/Card';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Avatar } from '@/components/ui/Avatar';
 import { Badge } from '@/components/ui/Badge';
 import { Skeleton } from '@/components/ui/Skeleton';
+import { CopyButton } from '@/components/ui/CopyButton';
 import { Camera, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -21,12 +22,25 @@ function formatJoinDate(iso?: string) {
   }
 }
 
+function formatFullDate(iso?: string) {
+  if (!iso) return 'a later date';
+  try {
+    return new Date(iso).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+  } catch {
+    return 'a later date';
+  }
+}
+
 export default function PersonalInfoPage() {
-  const { user, isLoading: authLoading, updateName, updateEmail, uploadAvatar } = useAuth();
+  const { user, isLoading: authLoading, updateName, updateEmail, uploadAvatar, changeUsername } = useAuth();
 
   const [name, setName] = useState(user?.name ?? '');
   const [isSavingName, setIsSavingName] = useState(false);
 
+  const [editingUsername, setEditingUsername] = useState(false);
+  const [usernameInput, setUsernameInput] = useState('');
+  const [isSavingUsername, setIsSavingUsername] = useState(false);
+
   const [newEmail, setNewEmail] = useState('');
   const [currentPassword, setCurrentPassword] = useState('');
   const [isSavingEmail, setIsSavingEmail] = useState(false);
@@ -74,6 +88,36 @@ export default function PersonalInfoPage() {
     }
   };
 
+  const startEditUsername = () => {
+    setUsernameInput(user?.username ?? '');
+    setEditingUsername(true);
+  };
+
+  const handleChangeUsername = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = usernameInput.trim().toLowerCase();
+    if (!trimmed || trimmed === user?.username) {
+      setEditingUsername(false);
+      return;
+    }
+
+    setIsSavingUsername(true);
+    try {
+      await changeUsername(trimmed);
+      toast.success('Username updated.');
+      setEditingUsername(false);
+    } catch (err) {
+      if (err instanceof UsernameChangeCooldownError) {
+        toast.error(`You can next change your username on ${formatFullDate(err.nextChangeAt)}.`);
+      } else {
+        const msg = err instanceof Error ? err.message : 'Could not update your username.';
+        toast.error(msg);
+      }
+    } finally {
+      setIsSavingUsername(false);
+    }
+  };
+
   const handleUpdateEmail = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!newEmail || !currentPassword) return;
@@ -205,6 +249,72 @@ export default function PersonalInfoPage() {
             </form>
           </Card>
 
+          {/* Username */}
+          <Card className="space-y-5">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <h2 className="text-lg font-semibold text-white font-syne">Username</h2>
+                <p className="text-sm text-muted mt-0.5">
+                  Your unique handle across SAMKIEL. Changeable once every 23 days.
+                </p>
+              </div>
+              {!editingUsername && (
+                <Button variant="outline" size="sm" className="shrink-0" onClick={startEditUsername}>
+                  Change Username
+                </Button>
+              )}
+            </div>
+            {editingUsername ? (
+              <form onSubmit={handleChangeUsername} className="space-y-5 max-w-md">
+                <Input
+                  label="New username"
+                  value={usernameInput}
+                  onChange={(e) => setUsernameInput(e.target.value.toLowerCase())}
+                  placeholder="ezekiel_dev"
+                  required
+                  disabled={isSavingUsername}
+                  hint="3-20 characters. Letters, numbers, and underscores only."
+                  autoCapitalize="none"
+                  autoCorrect="off"
+                  spellCheck={false}
+                />
+                <div className="flex items-center gap-3">
+                  <Button
+                    type="submit"
+                    isLoading={isSavingUsername}
+                    disabled={!usernameInput.trim() || usernameInput.trim() === user?.username}
+                  >
+                    Save username
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={() => setEditingUsername(false)}
+                    disabled={isSavingUsername}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </form>
+            ) : (
+              <p className="text-xl font-semibold text-white">@{user?.username ?? '—'}</p>
+            )}
+          </Card>
+
+          {/* SAMKIEL ID */}
+          <Card className="space-y-3">
+            <div>
+              <h2 className="text-lg font-semibold text-white font-syne">SAMKIEL ID</h2>
+              <p className="text-sm text-muted mt-0.5">Cannot be changed.</p>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="font-mono text-lg font-semibold text-accent tracking-wider">
+                {user?.samkielId ?? '—'}
+              </span>
+              {user?.samkielId && <CopyButton value={user.samkielId} label="Copy SAMKIEL ID" />}
+            </div>
+          </Card>
+
           <Card className="space-y-5">
             <div>
               <h2 className="text-lg font-semibold text-white font-syne">Email address</h2>
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 76b0e7c..8094efc 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -114,13 +114,16 @@ function LoginContent() {
         <Card className="p-8 bg-surface/50 backdrop-blur-xl border-border shadow-2xl">
           <form onSubmit={handleSubmit} className="space-y-6">
             <Input
-              label="Email Address"
-              type="email"
-              placeholder="name@example.com"
+              label="Email, Username, or SAMKIEL ID"
+              type="text"
+              placeholder="e.g. ezekiel, SKL-A4X9K2, or you@email.com"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
               disabled={isLoading}
+              autoCapitalize="none"
+              autoCorrect="off"
+              spellCheck={false}
               className="bg-background/50"
             />
             <div className="space-y-1.5">
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
index 5900a83..4d7f181 100644
--- a/app/(auth)/register/page.tsx
+++ b/app/(auth)/register/page.tsx
@@ -5,16 +5,26 @@ import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useAuth } from '@samkiel/authsdk/react';
 import { toast } from 'sonner';
+import { Check, X, Loader2 } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils';
 
 function RegisterContent() {
   const [name, setName] = useState('');
+  const [username, setUsername] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const { register, user, signInWithProvider } = useAuth();
+
+  // Live username validation/availability state.
+  const [usernameError, setUsernameError] = useState<string | null>(null);
+  const [usernameAvailable, setUsernameAvailable] = useState(false);
+  const [checkingUsername, setCheckingUsername] = useState(false);
+  const [suggestion, setSuggestion] = useState('');
+
+  const { register, user, signInWithProvider, checkUsernameAvailability, suggestUsername } = useAuth();
   const router = useRouter();
   const searchParams = useSearchParams();
   const redirect = searchParams.get('redirect');
@@ -25,21 +35,81 @@ function RegisterContent() {
     }
   }, [user, router]);
 
+  // Validate format instantly, then debounce the availability check by 400ms.
+  useEffect(() => {
+    setUsernameAvailable(false);
+    if (!username) {
+      setUsernameError(null);
+      return;
+    }
+    if (/[^a-z0-9_]/.test(username)) {
+      setUsernameError('Letters, numbers, and underscores only.');
+      return;
+    }
+    if (username.length < 3) {
+      setUsernameError('Must be at least 3 characters.');
+      return;
+    }
+    if (username.length > 20) {
+      setUsernameError('Must be 20 characters or fewer.');
+      return;
+    }
+    setUsernameError(null);
+    setCheckingUsername(true);
+
+    const timer = setTimeout(async () => {
+      try {
+        const { available, error } = await checkUsernameAvailability(username);
+        setUsernameAvailable(available);
+        setUsernameError(available ? null : error || 'That username is taken.');
+      } catch {
+        // Ignore transient network errors for the live check.
+      } finally {
+        setCheckingUsername(false);
+      }
+    }, 400);
+
+    return () => clearTimeout(timer);
+  }, [username, checkUsernameAvailability]);
+
+  // Suggest a handle from the name (debounced) while the username is untouched.
+  useEffect(() => {
+    if (!name.trim()) {
+      setSuggestion('');
+      return;
+    }
+    const timer = setTimeout(async () => {
+      try {
+        const res = await suggestUsername(name);
+        setSuggestion(res.suggestion);
+      } catch {
+        // Suggestions are best-effort.
+      }
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [name, suggestUsername]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    if (usernameError || (!usernameAvailable && username.length > 0)) {
+      toast.error('Please choose a valid, available username.');
+      return;
+    }
+
     setIsLoading(true);
 
     try {
-      // Adjusted to match SDK signature (name, email, password)
-      await register(name, email, password);
+      await register(name, email, password, username);
       toast.success('Account created. Check your email to verify.');
-
     } catch (error: any) {
       const errorMessage = error.message || '';
-      if (errorMessage.includes('409') || errorMessage.includes('exists')) {
+      if (errorMessage.toLowerCase().includes('username')) {
+        toast.error(errorMessage);
+      } else if (errorMessage.includes('409') || errorMessage.toLowerCase().includes('exists')) {
         toast.error('An account with this email already exists.');
       } else {
-        toast.error('We couldn\'t create your account. Please try again.');
+        toast.error("We couldn't create your account. Please try again.");
       }
     } finally {
       setIsLoading(false);
@@ -74,6 +144,57 @@ function RegisterContent() {
               disabled={isLoading}
               className="bg-background/50"
             />
+
+            {/* Username — lowercase, @ prefix (UI only), live availability check */}
+            <div className="flex flex-col gap-1.5 w-full">
+              <label className="text-sm font-medium text-text">Username</label>
+              <div className="relative group">
+                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-muted select-none pointer-events-none">@</span>
+                <input
+                  type="text"
+                  placeholder="e.g. ezekiel_dev"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value.toLowerCase())}
+                  required
+                  disabled={isLoading}
+                  autoCapitalize="none"
+                  autoCorrect="off"
+                  spellCheck={false}
+                  aria-invalid={usernameError ? 'true' : 'false'}
+                  className={cn(
+                    'flex h-11 w-full rounded-lg border border-border bg-background/50 pl-8 pr-11 py-2 text-base text-white placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
+                    usernameError && 'border-red-500 focus:border-red-500 focus:ring-red-500',
+                    usernameAvailable && 'border-green-500 focus:border-green-500 focus:ring-green-500',
+                  )}
+                />
+                <span className="absolute right-3 top-1/2 -translate-y-1/2">
+                  {checkingUsername ? (
+                    <Loader2 size={18} className="animate-spin text-muted" aria-label="Checking" />
+                  ) : usernameAvailable ? (
+                    <Check size={18} className="text-green-500" aria-label="Available" />
+                  ) : usernameError ? (
+                    <X size={18} className="text-red-500" aria-label="Unavailable" />
+                  ) : null}
+                </span>
+              </div>
+              {usernameError ? (
+                <span className="text-xs text-red-500">{usernameError}</span>
+              ) : (
+                <span className="text-xs text-muted">
+                  3-20 characters. Letters, numbers, and underscores only.
+                </span>
+              )}
+              {suggestion && !username && (
+                <button
+                  type="button"
+                  onClick={() => setUsername(suggestion)}
+                  className="text-xs text-accent hover:underline self-start"
+                >
+                  Suggestion: @{suggestion}
+                </button>
+              )}
+            </div>
+
             <Input
               label="Email Address"
               type="email"
@@ -96,9 +217,9 @@ function RegisterContent() {
               className="bg-background/50"
             />
 
-            <Button 
-              type="submit" 
-              fullWidth 
+            <Button
+              type="submit"
+              fullWidth
               isLoading={isLoading}
               className="h-12 text-base font-bold hover:brightness-110 transition-all duration-300 mt-2"
             >
@@ -134,8 +255,8 @@ function RegisterContent() {
           <div className="mt-10 pt-8 border-t border-border text-center">
             <p className="text-muted text-sm">
               Already have an account?{' '}
-              <Link 
-                href={redirect ? `/login?redirect=${encodeURIComponent(redirect)}` : "/login"} 
+              <Link
+                href={redirect ? `/login?redirect=${encodeURIComponent(redirect)}` : "/login"}
                 className="text-accent hover:underline font-bold transition-all"
               >
                 Sign in
@@ -160,4 +281,4 @@ export default function RegisterPage() {
       <RegisterContent />
     </React.Suspense>
   );
-}
\ No newline at end of file
+}
diff --git a/components/ui/CopyButton.tsx b/components/ui/CopyButton.tsx
new file mode 100644
index 0000000..a28f5d5
--- /dev/null
+++ b/components/ui/CopyButton.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+
+interface CopyButtonProps {
+  value: string;
+  /** Accessible label for the button. */
+  label?: string;
+  className?: string;
+}
+
+/** Small icon button that copies `value` to the clipboard with toast feedback. */
+export function CopyButton({ value, label = 'Copy to clipboard', className }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      toast.success('Copied to clipboard');
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error('Could not copy to clipboard');
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      aria-label={label}
+      title={label}
+      className={cn(
+        'inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-background text-muted hover:text-accent hover:border-accent/30 transition-colors focus:outline-none focus:ring-1 focus:ring-accent',
+        className,
+      )}
+    >
+      {copied ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
+    </button>
+  );
+}
diff --git a/package.json b/package.json
index 0d21f03..6bd19f7 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "@samkiel/authsdk": "^1.5.0",
+    "@samkiel/authsdk": "^1.6.0",
     "@vercel/analytics": "^2.0.1",
     "@vercel/speed-insights": "^2.0.0",
     "clsx": "^2.1.1",