[UI/UX] Added Account deletion, with some new features too.

backend/app/api/auth_routes.py

@@ -8,6 +8,7 @@ from app.services.oauth_service import handle_oauth_login
 from app.services.email_service import send_reset_password_email, send_verification_email
 from app.security.turnstile import verify_turnstile_token
 from app.core.auth_dependancy import get_current_user
+from app.utils.jwt_handler import create_access_token
 
 router = APIRouter(prefix="/auth", tags=["Auth"])
 
@@ -108,10 +109,11 @@ def reset_password(data: PasswordResetConfirm, request: Request, db: Session = D
 
 @router.post("/verify-email")
 def verify_email(data: VerifyEmailConfirm, db: Session = Depends(get_db)):
-    success = confirm_email_verification(db, data.token)
-    if not success:
+    user = confirm_email_verification(db, data.token)
+    if not user:
         raise HTTPException(status_code=400, detail="Invalid or expired verification token")
-    return {"message": "Email successfully verified!"}
+    token = create_access_token({"user_id": user.id})
+    return {"message": "Email successfully verified!", "access_token": token}
 
 @router.post("/resend-verification")
 def resend_verification_endpoint(

backend/app/api/user_routes.py

@@ -5,6 +5,9 @@ from app.services.user_service import create_user
 from app.db.session import get_db
 from app.services.email_service import send_verification_email
 from app.security.turnstile import verify_turnstile_token
+from app.core.auth_dependancy import get_current_user
+from app.models.user_model import User
+from app.services.user_service import delete_user_account
 
 router = APIRouter(prefix="/users", tags=["Users"])
 
@@ -39,4 +42,15 @@ async def register(
     return {
         "message": "User Created Successfully! Please check your email to verify.",
         "user_id": new_user.id
-    }
+    }
+
+@router.delete("/delete")
+def delete_account(
+    db: Session = Depends(get_db),
+    current_user: User = Depends(get_current_user)
+):
+    try:
+        delete_user_account(db, current_user.id)
+        return {"message": "Account successfully deleted"}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

backend/app/services/auth_service.py

@@ -102,17 +102,17 @@ def confirm_email_verification(db: Session, token: str) -> bool:
             break
 
     if not target_user:
-        return False
+        return None
     
     if datetime.now(UTC) > target_user.verification_token_expire_at.replace(tzinfo=UTC):
-        return False
+        return None
     
     target_user.is_verified = True
     target_user.verification_token_hash = None
     target_user.verification_token_expire_at = None
     db.commit()
     
-    return True
+    return target_user
 
 def resend_verification(db: Session, email: str) -> str | None:
     user = db.query(User).filter(User.email == email).first()

backend/app/services/email_service.py

@@ -7,19 +7,24 @@ logger = logging.getLogger(__name__)
 async def send_reset_password_email(email_to: str, raw_token: str):
     reset_link = f"{settings.FRONTEND_URL}/reset-password?token={raw_token}"
     html_content = f"""
-    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; color: #333;">
-        <h2>Password Reset Request</h2>
-        <p>You recently requested to reset your password for your account.</p>
-        <p>Click the button below to reset it. <strong>This link will expire perfectly in 15 minutes.</strong></p>
-        <div style="text-align: center; margin: 30px 0;">
-            <a href="{reset_link}" style="background-color: #4CAF50; color: white; padding: 14px 20px; text-decoration: none; border-radius: 4px; font-weight: bold; display: inline-block;">
-                Reset Password
-            </a>
+    <div style="font-family: 'Inter', Arial, sans-serif; max-width: 600px; margin: 0 auto; background-color: #080c14; border: 1px solid #1f2937; border-radius: 16px; overflow: hidden;">
+        <div style="background-color: #11141d; padding: 40px; text-align: center; border-bottom: 1px solid #1f2937;">
+            <h1 style="color: #fde8d6; margin: 0; font-size: 28px; letter-spacing: 2px; text-transform: uppercase; font-weight: 900;">SPOTIX</h1>
+        </div>
+        <div style="padding: 40px; color: #d0c4bb; line-height: 1.6;">
+            <h2 style="color: #fde8d6; margin-top: 0; font-size: 20px;">Password Reset Request</h2>
+            <p>You recently requested to reset your password for your Spotix account.</p>
+            <p>Click the secure link below to reset it. <strong style="color: #fde8d6;">This link will expire perfectly in 15 minutes.</strong></p>
+            <div style="text-align: center; margin: 40px 0;">
+                <a href="{reset_link}" style="background-color: #fde8d6; color: #080c14; padding: 14px 32px; text-decoration: none; border-radius: 8px; font-weight: bold; display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-size: 14px;">
+                    Reset Password
+                </a>
+            </div>
+            <p style="font-size: 14px; opacity: 0.8;">If you did not request a password reset, please ignore this email or contact support if you have concerns.</p>
+            <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #1f2937; font-size: 11px; text-align: center; opacity: 0.5; text-transform: uppercase; letter-spacing: 1px;">
+                © 2026 SPOTIX KINETIC. ENGINEERED FOR THE ETHEREAL.
+            </div>
         </div>
-        <p>If you did not request a password reset, please ignore this email or contact support if you have concerns.</p>
-        <p style="font-size: 12px; color: #777; margin-top: 40px;">
-            This is an automated message from our system.
-        </p>
     </div>
     """
 
@@ -27,14 +32,15 @@ async def send_reset_password_email(email_to: str, raw_token: str):
                 logger.warning(f"[DEV MODE] SMTP credentials missing. To manually test, use this link: {reset_link}")
                 return
     try:
+        is_ssl = int(settings.SMTP_PORT) == 465
         conf = ConnectionConfig(
             MAIL_USERNAME=settings.SMTP_USER,
             MAIL_PASSWORD=settings.SMTP_PASSWORD,
             MAIL_FROM=settings.SMTP_SENDER_EMAIL or "noreply@localhost.com",
             MAIL_PORT=settings.SMTP_PORT,
             MAIL_SERVER=settings.SMTP_SERVER,
-            MAIL_STARTTLS=True,
-            MAIL_SSL_TLS=False,
+            MAIL_STARTTLS=not is_ssl,
+            MAIL_SSL_TLS=is_ssl,
             USE_CREDENTIALS=True,
             VALIDATE_CERTS=True
         )
@@ -57,14 +63,23 @@ async def send_verification_email(email_to: str, raw_token: str):
     verify_link = f"{settings.FRONTEND_URL}/verify-email?token={raw_token}"
 
     html_content = f"""
-    <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; color: #333;">
-        <h2>Welcome to Spotix!</h2>
-        <p>Please confirm your email address to activate your account.</p>
-        <p>Click the button below to verify. <strong>This link will expire in 24 hours.</strong></p>
-        <div style="text-align: center; margin: 30px 0;">
-            <a href="{verify_link}" style="background-color: #2196F3; color: white; padding: 14px 20px; text-decoration: none; border-radius: 4px; font-weight: bold; display: inline-block;">
-                Verify My Email
-            </a>
+    <div style="font-family: 'Inter', Arial, sans-serif; max-width: 600px; margin: 0 auto; background-color: #080c14; border: 1px solid #1f2937; border-radius: 16px; overflow: hidden;">
+        <div style="background-color: #11141d; padding: 40px; text-align: center; border-bottom: 1px solid #1f2937;">
+            <h1 style="color: #fde8d6; margin: 0; font-size: 28px; letter-spacing: 2px; text-transform: uppercase; font-weight: 900;">SPOTIX</h1>
+            <p style="color: #d0c4bb; margin: 10px 0 0 0; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; opacity: 0.7;">Identity Uplink</p>
+        </div>
+        <div style="padding: 40px; color: #d0c4bb; line-height: 1.6;">
+            <h2 style="color: #fde8d6; margin-top: 0; font-size: 20px;">Welcome to the Engine.</h2>
+            <p>Please confirm your neural-link authorization by verifying your email address.</p>
+            <p>Click the secure uplink button below to activate your account. <strong style="color: #fde8d6;">This link will expire in 24 hours.</strong></p>
+            <div style="text-align: center; margin: 40px 0;">
+                <a href="{verify_link}" style="background-color: #fde8d6; color: #080c14; padding: 14px 32px; text-decoration: none; border-radius: 8px; font-weight: bold; display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-size: 14px;">
+                    Verify Authorization
+                </a>
+            </div>
+            <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #1f2937; font-size: 11px; text-align: center; opacity: 0.5; text-transform: uppercase; letter-spacing: 1px;">
+                © 2026 SPOTIX KINETIC. ENGINEERED FOR THE ETHEREAL.
+            </div>
         </div>
     </div>
     """
@@ -74,14 +89,15 @@ async def send_verification_email(email_to: str, raw_token: str):
         return
     
     try:
+        is_ssl = int(settings.SMTP_PORT) == 465
         conf = ConnectionConfig(
             MAIL_USERNAME=settings.SMTP_USER,
             MAIL_PASSWORD=settings.SMTP_PASSWORD,
             MAIL_FROM=settings.SMTP_SENDER_EMAIL or "noreply@localhost.com",
             MAIL_PORT=settings.SMTP_PORT,
             MAIL_SERVER=settings.SMTP_SERVER,
-            MAIL_STARTTLS=True,
-            MAIL_SSL_TLS=False,
+            MAIL_STARTTLS=not is_ssl,
+            MAIL_SSL_TLS=is_ssl,
             USE_CREDENTIALS=True,
             VALIDATE_CERTS=True
         )

backend/app/services/file_delete_service.py

@@ -15,6 +15,10 @@ def delete_file_service(db: Session, file_id: int, user_id: int):
     
     active_storage.delete(file.filepath)
         
+    # Delete related jobs first to prevent FK IntegrityError in SQLite
+    from app.models.job_model import Job
+    db.query(Job).filter(Job.file_id == file.id).delete()
+        
     db.delete(file)
     db.commit()
     

backend/app/services/user_service.py

@@ -2,7 +2,10 @@ import secrets
 from datetime import timedelta, datetime, UTC
 from sqlalchemy.orm import Session
 from app.models.user_model import User
+from app.models.file_model import File
+from app.models.user_issue_model import UserIssue
 from app.utils.security import hash_password
+from app.services.file_delete_service import delete_file_service
 
 def create_user(db: Session, email: str, username: str, password: str) -> tuple[User | None, str | None]:
     if db.query(User).filter(User.email == email).first():
@@ -29,5 +32,25 @@ def create_user(db: Session, email: str, username: str, password: str) -> tuple[
     db.add(new_user)
     db.commit()
     db.refresh(new_user)
-    
-    return new_user, raw_token
+    return new_user, raw_token
+
+def delete_user_account(db: Session, user_id: int):
+    # 1. Fetch user
+    user = db.query(User).filter(User.id == user_id).first()
+    if not user:
+        raise ValueError("User not found")
+
+    # 2. Delete all files (and Cloudinary storage media)
+    files = db.query(File).filter(File.owner_id == user_id).all()
+    for file in files:
+        try:
+            delete_file_service(db, file.id, user_id)
+        except Exception:
+            pass # ignore if already deleted or error, ensure we keep deleting others
+
+    # 3. Delete all User Issues
+    db.query(UserIssue).filter(UserIssue.user_id == user_id).delete()
+
+    # 4. Delete the user
+    db.delete(user)
+    db.commit()

backend/app/worker/tasks.py

@@ -46,7 +46,14 @@ def process_file_task(self, file_id: int):
         from app.models.file_model import File
         db_file = db.query(File).filter(File.id == file_id).first()
         
-        if db_file and db_file.filetype and db_file.filetype.startswith('video/'):
+        if not db_file:
+            logger.info(f"File {file_id} not found (possibly user deleted account). Aborting task.")
+            job.status = "CANCELLED"
+            job.finished_at = datetime.now(UTC)
+            db.commit()
+            return
+
+        if db_file.filetype and db_file.filetype.startswith('video/'):
             from app.services.video_processor import process_video_pipeline
             process_video_pipeline(file_id, db_file.filepath, db)
         else:

backend/main.py

@@ -38,6 +38,7 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# Trigger reload
 app.mount("/static", StaticFiles(directory="."), name="static")
 
 app.state.limiter = limiter

frontend/app/layout.tsx

@@ -19,7 +19,7 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
   title: "Spotix",
-  description: "Detect AI generated Image/Video",
+  description: "Spotix is a modern, dark-themed SaaS platform that helps users detect whether images, videos, and audio are AI-generated or authentic. It uses multi-signal analysis—including noise patterns, frequency characteristics, and temporal consistency—to produce a confidence score along with visual explanations like heatmaps. The experience is smooth and minimal, with real-time processing, a unified upload-to-result flow, and a dashboard for tracking past analyses. Spotix focuses on clarity, trust, and explainability rather than black-box predictions.",
 };
 
 import { AuthProvider } from "@/contexts/AuthContext";

frontend/app/login/page.tsx

@@ -132,7 +132,7 @@ export default function LoginPage() {
                 </button>
             </div>
 
-            <div className="z-10 w-full max-w-md relative mt-4 mb-16">
+            <div className="z-10 w-full max-w-md relative mt-0 mb-2">
                 <div className="bg-[var(--theme-bg)]/80 backdrop-blur-3xl border border-theme-border shadow-[0_0_80px_rgba(0,0,0,0.8)] rounded-3xl p-8 relative overflow-hidden">
                     <div className="absolute -top-40 -right-40 w-80 h-80 bg-theme-text/5 rounded-full blur-[80px] pointer-events-none"></div>
                     
@@ -155,51 +155,51 @@ export default function LoginPage() {
                     <form onSubmit={handleSubmit} className="space-y-4">
                         {mode === 'signup' && (
                             <div className="relative group">
-                                <User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#d0c4bb]/40 group-focus-within:text-[var(--theme-border)] transition-colors" />
+                                <User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#d0c4bb]/40 group-focus-within:text-[var(--theme-text)] transition-colors" />
                                 <input 
                                     type="text" 
                                     required={mode === 'signup'}
                                     value={username}
                                     onChange={(e) => setUsername(e.target.value)}
                                     placeholder="Username"
-                                    className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/40 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
+                                    className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/60 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
                                 />
                             </div>
                         )}
                         {mode === 'login' ? (
                             <div className="relative group">
-                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#d0c4bb]/40 group-focus-within:text-[var(--theme-border)] transition-colors" />
+                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#d0c4bb]/40 group-focus-within:text-[var(--theme-text)] transition-colors" />
                                 <input 
                                     type="text" 
                                     required={mode === 'login'}
                                     value={identifier}
                                     onChange={(e) => setIdentifier(e.target.value)}
                                     placeholder="Email or Username"
-                                    className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/40 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
+                                    className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/60 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
                                 />
                             </div>
                         ) : (
                             <div className="relative group">
-                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#d0c4bb]/40 group-focus-within:text-[var(--theme-border)] transition-colors" />
+                                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#d0c4bb]/40 group-focus-within:text-[var(--theme-text)] transition-colors" />
                                 <input 
                                     type="email" 
                                     required={mode === 'signup'}
                                     value={email}
                                     onChange={(e) => setEmail(e.target.value)}
                                     placeholder="Email"
-                                    className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/40 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
+                                    className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/60 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
                                 />
                             </div>
                         )}
                         <div className="relative group">
-                            <KeyRound className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#d0c4bb]/40 group-focus-within:text-[var(--theme-border)] transition-colors" />
+                            <KeyRound className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[#d0c4bb]/40 group-focus-within:text-[var(--theme-text)] transition-colors" />
                             <input 
                                 type="password" 
                                 required
                                 value={password}
                                 onChange={(e) => setPassword(e.target.value)}
                                 placeholder="Password"
-                                className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/40 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
+                                className="w-full bg-theme-text/5 border border-theme-border rounded-xl py-4 pl-12 pr-4 text-[var(--theme-text)] placeholder-[#d0c4bb]/60 focus:outline-none focus:border-theme-border/50 focus:bg-theme-text/10 transition-all font-mono text-sm"
                             />
                         </div>
                         

frontend/app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import axios from "axios";
 import { ArrowRight, CloudUpload, CheckCircle, Menu, X, Fingerprint, Activity, Network } from "lucide-react";
 import UploadZone from "@/components/upload/UploadZone";
@@ -11,6 +11,20 @@ export default function LandingPage() {
     const router = useRouter();
 
     const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+    const searchParams = useSearchParams();
+    const [deletedToast, setDeletedToast] = useState(false);
+
+    useEffect(() => {
+        if (searchParams.get("deleted") === "true") {
+            setDeletedToast(true);
+            setTimeout(() => setDeletedToast(false), 5000);
+            
+            // Clean up URL
+            const url = new URL(window.location.href);
+            url.searchParams.delete("deleted");
+            window.history.replaceState({}, '', url.toString());
+        }
+    }, [searchParams]);
 
     // --- Footer Copyright and Dynamic Date ---
     const [year, setYear] = useState(new Date().getFullYear());
@@ -299,6 +313,14 @@ export default function LandingPage() {
                 </div>
             )}
 
+            {/* Deleted Account Toast */}
+            {deletedToast && (
+                <div className="fixed top-24 left-1/2 -translate-x-1/2 z-[100] bg-green-500/10 border border-green-500/20 text-green-400 px-6 py-3 rounded-full flex items-center gap-3 shadow-[0_0_40px_rgba(34,197,94,0.2)] animate-[fade-in_0.5s_ease-out]">
+                    <CheckCircle className="w-5 h-5" />
+                    <span className="font-bold tracking-widest uppercase text-sm">Account Deleted Successfully</span>
+                </div>
+            )}
+
             {/* Global Navbar */}
             <Navbar />
 

frontend/app/profile/page.tsx

@@ -16,6 +16,11 @@ export default function ProfilePage() {
     const [statusMsg, setStatusMsg] = useState<{type: "error" | "success", text: string} | null>(null);
     const [localAvatar, setLocalAvatar] = useState<string | null>(null);
 
+    // Delete Modal States
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [deleteInput, setDeleteInput] = useState("");
+    const [isDeleting, setIsDeleting] = useState(false);
+
     // Handle cursor physics (Globally handled now, we just need the local parallax if any, but profile page doesn't have a dash-grid)
 
     useEffect(() => {
@@ -80,6 +85,21 @@ export default function ProfilePage() {
         reader.readAsDataURL(file);
     };
 
+    const handleDeleteAccount = async () => {
+        if (deleteInput !== "DELETE") return;
+        setIsDeleting(true);
+        try {
+            await apiLayer.deleteAccount();
+            updateUser(null);
+            localStorage.removeItem("access_token");
+            window.location.href = "/?deleted=true";
+        } catch (err: any) {
+            setStatusMsg({ type: "error", text: err.response?.data?.detail || "Failed to delete account." });
+            setIsDeleting(false);
+            setIsDeleteModalOpen(false);
+        }
+    };
+
     if (loading) return null;
 
     return (
@@ -185,9 +205,9 @@ export default function ProfilePage() {
                             <div className="border border-red-500/20 bg-red-500/5 rounded-2xl p-6 flex justify-between items-center">
                                 <div>
                                     <h4 className="text-red-400 font-semibold mb-1">Delete Account</h4>
-                                    <p className="text-sm text-[var(--theme-text)]/50">Permanently delete your account and all associated data.</p>
+                                    <p className="text-sm text-[var(--theme-text)]/50">This will permanently delete your account, all analyses, and uploaded media. This action cannot be undone.</p>
                                 </div>
-                                <button className="bg-red-500/10 text-red-400 border border-red-500/20 px-4 py-2 rounded-lg font-bold text-sm uppercase hover:bg-red-500/20 transition-colors !cursor-none" onClick={() => alert('Please contact support to delete your account.')}>
+                                <button className="bg-red-500/10 text-red-400 border border-red-500/20 px-4 py-2 rounded-lg font-bold text-sm uppercase hover:bg-red-500/20 transition-colors !cursor-none" onClick={() => setIsDeleteModalOpen(true)}>
                                     Delete
                                 </button>
                             </div>
@@ -195,6 +215,57 @@ export default function ProfilePage() {
                     </div>
                 </div>
             </div>
+
+            {/* Delete Account Modal */}
+            {isDeleteModalOpen && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+                    <div className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onClick={() => setIsDeleteModalOpen(false)}></div>
+                    <div className="relative bg-[#080c13] border border-red-500/20 rounded-2xl w-full max-w-md p-8 shadow-[0_0_40px_rgba(239,68,68,0.15)] flex flex-col items-center text-center transform transition-all">
+                        <div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center mb-6">
+                            <Trash2 className="w-8 h-8 text-red-500" />
+                        </div>
+                        <h2 className="text-2xl font-black text-white uppercase tracking-widest mb-2">Delete Account</h2>
+                        <p className="text-white/60 text-sm mb-6">
+                            This will permanently delete your account, all analyses, and uploaded media. This action cannot be undone.
+                        </p>
+                        
+                        <div className="w-full mb-8">
+                            <label className="block text-left text-xs uppercase tracking-widest text-red-400/80 mb-2 font-bold">Type "DELETE" to confirm</label>
+                            <input 
+                                type="text"
+                                value={deleteInput}
+                                onChange={(e) => setDeleteInput(e.target.value.toUpperCase())}
+                                placeholder="DELETE"
+                                className="w-full bg-red-500/5 border border-red-500/20 rounded-lg p-3 text-center outline-none focus:border-red-500/50 text-white transition-colors !cursor-none uppercase"
+                            />
+                        </div>
+
+                        <div className="flex w-full gap-4">
+                            <button 
+                                onClick={() => {
+                                    setIsDeleteModalOpen(false);
+                                    setDeleteInput("");
+                                }}
+                                disabled={isDeleting}
+                                className="flex-1 border border-white/10 text-white/70 py-3 rounded-lg font-bold text-xs uppercase hover:bg-white/5 hover:text-white transition-colors !cursor-none disabled:opacity-50"
+                            >
+                                Cancel
+                            </button>
+                            <button 
+                                onClick={handleDeleteAccount}
+                                disabled={deleteInput !== "DELETE" || isDeleting}
+                                className="flex-1 bg-red-500 text-white py-3 rounded-lg font-bold text-xs uppercase hover:bg-red-600 transition-colors !cursor-none disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center"
+                            >
+                                {isDeleting ? (
+                                    <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
+                                ) : (
+                                    "Confirm Delete"
+                                )}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

frontend/app/verify-email/page.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import axios from "axios";
+import { CheckCircle, XCircle, ArrowRight, ArrowLeft } from "lucide-react";
+import { useRef } from "react";
+
+export default function VerifyEmailPage() {
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const token = searchParams.get("token");
+
+    const [status, setStatus] = useState<"verifying" | "success" | "error">("verifying");
+    const [message, setMessage] = useState("Establishing Neural Uplink...");
+    const hasAttempted = useRef(false);
+
+    useEffect(() => {
+        if (!token) {
+            setStatus("error");
+            setMessage("Invalid Authorization Link.");
+            return;
+        }
+
+        if (hasAttempted.current) return;
+        hasAttempted.current = true;
+
+        const verifyToken = async () => {
+            try {
+                const res = await axios.post("http://localhost:8000/auth/verify-email", { token });
+                setStatus("success");
+                setMessage("Identity Verified. Re-routing to Dashboard...");
+                
+                // Automatically log the user in
+                if (res.data.access_token) {
+                    localStorage.setItem("access_token", res.data.access_token);
+                    // Slight delay for cinematic effect before redirecting
+                    setTimeout(() => {
+                        window.location.href = "/dashboard";
+                    }, 2000);
+                }
+            } catch (err: any) {
+                setStatus("error");
+                setMessage(err.response?.data?.detail || "Verification failed. The link may have expired.");
+            }
+        };
+
+        verifyToken();
+    }, [token]);
+
+    return (
+        <div className="min-h-screen bg-[var(--theme-bg)] text-[var(--theme-text)] font-sans relative flex items-center justify-center p-6 overflow-hidden">
+            {/* Base Styles & Cursor */}
+            <style dangerouslySetInnerHTML={{
+                __html: `
+                html, body, a, button, [role="button"], input, select, textarea, .cursor-pointer { cursor: none !important; }
+                body { background-color: var(--theme-bg); }
+                `
+            }} />
+
+            {/* Background Effects */}
+            <div className="absolute inset-0 bg-[var(--theme-bg)] z-0"></div>
+            <div className="absolute inset-0 opacity-40 pointer-events-none bg-[radial-gradient(circle_at_50%_50%,_#11141d_0%,_var(--theme-bg)_100%)] z-[1]"></div>
+            <div className="absolute inset-0 z-[2] opacity-[0.03] pointer-events-none" style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }}></div>
+            
+            {/* Content Container */}
+            <div className="relative z-10 w-full max-w-md bg-[var(--theme-text)]/5 p-10 rounded-[2rem] border border-[var(--theme-border)] backdrop-blur-xl text-center shadow-[0_0_80px_rgba(0,0,0,0.5)]">
+                
+                {status === "verifying" && (
+                    <div className="flex flex-col items-center animate-pulse">
+                        <div className="w-16 h-16 rounded-full border-4 border-[var(--theme-text)]/20 border-t-[var(--theme-text)] animate-spin mb-6"></div>
+                        <h2 className="text-2xl font-black uppercase tracking-widest mb-2">Analyzing Node</h2>
+                        <p className="text-[var(--theme-text)]/60 text-sm font-mono uppercase">{message}</p>
+                    </div>
+                )}
+
+                {status === "success" && (
+                    <div className="flex flex-col items-center">
+                        <div className="w-16 h-16 rounded-full bg-green-500/10 flex items-center justify-center border border-green-500/30 mb-6 shadow-[0_0_40px_rgba(34,197,94,0.3)]">
+                            <CheckCircle className="w-8 h-8 text-green-400" />
+                        </div>
+                        <h2 className="text-2xl font-black uppercase tracking-widest mb-2 text-green-400">Uplink Established</h2>
+                        <p className="text-[var(--theme-text)]/60 text-sm font-mono uppercase mb-8">{message}</p>
+                        
+                        <div className="w-full bg-[var(--theme-text)]/10 h-1 rounded-full overflow-hidden">
+                            <div className="bg-[var(--theme-text)] h-full animate-[progress_2s_ease-in-out_forwards]"></div>
+                        </div>
+                        <style dangerouslySetInnerHTML={{__html: `
+                            @keyframes progress {
+                                0% { width: 0%; }
+                                100% { width: 100%; }
+                            }
+                        `}} />
+                    </div>
+                )}
+
+                {status === "error" && (
+                    <div className="flex flex-col items-center">
+                        <div className="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center border border-red-500/30 mb-6 shadow-[0_0_40px_rgba(239,68,68,0.3)]">
+                            <XCircle className="w-8 h-8 text-red-400" />
+                        </div>
+                        <h2 className="text-2xl font-black uppercase tracking-widest mb-2 text-red-400">Uplink Failed</h2>
+                        <p className="text-[var(--theme-text)]/60 text-sm font-mono uppercase mb-8">{message}</p>
+
+                        <button 
+                            onClick={() => router.push('/login')}
+                            className="w-full group relative overflow-hidden rounded-full bg-[var(--theme-text)] text-[var(--theme-bg)] px-8 py-4 font-bold tracking-widest text-xs uppercase transition-all duration-300 hover:shadow-[0_0_40px_rgba(253,232,214,0.3)] hover:scale-105 flex items-center justify-center gap-3 !cursor-none"
+                        >
+                            <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-1" />
+                            <span>Return to Access Portal</span>
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/lib/api.ts

@@ -37,5 +37,8 @@ export const apiLayer = {
     updateUsername: (username: string) => api.put('/profile/username', { username }),
 
     // Feedback
-    submitFeedback: (data: { issue_type: string, message: string }) => api.post('/issues/', data)
+    submitFeedback: (data: { issue_type: string, message: string }) => api.post('/issues/', data),
+
+    // Account deletion
+    deleteAccount: () => api.delete('/users/delete')
 };