diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..28aff13
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(timeout:*)",
+      "Bash(exit 0)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
diff --git a/backend/app/crud.py b/backend/app/crud.py
index 1a143d9..ed8c4ea 100644
--- a/backend/app/crud.py
+++ b/backend/app/crud.py
@@ -1,17 +1,363 @@
 from sqlalchemy.orm import Session
 from . import models
 from passlib.context import CryptContext
+from datetime import datetime
+import secrets
+
 pwd_context = CryptContext(schemes=["argon2"], deprecated="auto")
 
 
 def get_user_by_username(db: Session, username: str):
     return db.query(models.User).filter(models.User.username==username).first()
 
+def verify_password(plain_password: str, hashed_password: str) -> bool:
+    """Verify a password against its hash"""
+    return pwd_context.verify(plain_password, hashed_password)
+
+def authenticate_user(db: Session, username: str, password: str):
+    """Authenticate a user by username and password"""
+    user = get_user_by_username(db, username)
+    if not user:
+        return None
+    if not verify_password(password, user.password_hash):
+        return None
+    return user
+
 def create_user(db: Session, username: str, password: str):
     password = password[:72]  # truncate to max bcrypt length
     hashed_password = pwd_context.hash(password)
-    db_user = models.User(username=username, password_hash=hashed_password)
+
+    # Generate a random avatar seed
+    avatar_seed = secrets.token_urlsafe(8)
+
+    db_user = models.User(
+        username=username,
+        password_hash=hashed_password,
+        total_points=0,
+        avatar_style="avataaars",
+        avatar_seed=avatar_seed
+    )
     db.add(db_user)
     db.commit()
     db.refresh(db_user)
-    return db_user
\ No newline at end of file
+
+    # Initialize default achievements and avatar styles
+    initialize_achievements(db)
+    initialize_avatar_styles(db)
+
+    return db_user
+
+# API Key functions
+def generate_api_key() -> str:
+    """Generate a secure random API key"""
+    return f"llw_{secrets.token_urlsafe(32)}"
+
+def create_api_key(db: Session, user_id: int, name: str):
+    key = generate_api_key()
+    api_key = models.APIKey(user_id=user_id, key=key, name=name)
+    db.add(api_key)
+    db.commit()
+    db.refresh(api_key)
+    return api_key
+
+def get_user_by_api_key(db: Session, api_key: str):
+    key_obj = db.query(models.APIKey).filter(
+        models.APIKey.key == api_key,
+        models.APIKey.is_active == True
+    ).first()
+
+    if key_obj:
+        # Update last used timestamp
+        key_obj.last_used = datetime.utcnow()
+        db.commit()
+        return key_obj.user
+    return None
+
+def get_user_api_keys(db: Session, user_id: int):
+    return db.query(models.APIKey).filter(models.APIKey.user_id == user_id).all()
+
+def revoke_api_key(db: Session, user_id: int, key_id: int):
+    key = db.query(models.APIKey).filter(
+        models.APIKey.id == key_id,
+        models.APIKey.user_id == user_id
+    ).first()
+    if key:
+        key.is_active = False
+        db.commit()
+        return True
+    return False
+
+# Progress tracking functions
+def update_progress(db: Session, user_id: int, lesson_id: int, completed: bool, score: int = None):
+    progress = db.query(models.Progress).filter(
+        models.Progress.user_id == user_id,
+        models.Progress.lesson_id == lesson_id
+    ).first()
+
+    if not progress:
+        progress = models.Progress(
+            user_id=user_id,
+            lesson_id=lesson_id,
+            completed=completed,
+            score=score,
+            best_score=score,
+            attempts=1
+        )
+        db.add(progress)
+    else:
+        progress.completed = completed
+        progress.attempts += 1
+        if score:
+            progress.score = score
+            if not progress.best_score or score > progress.best_score:
+                progress.best_score = score
+
+    if completed:
+        progress.completed_at = datetime.utcnow()
+
+    progress.last_practiced = datetime.utcnow()
+
+    db.commit()
+    db.refresh(progress)
+
+    # Check for achievements
+    check_and_award_achievements(db, user_id)
+
+    return progress
+
+def get_user_progress(db: Session, user_id: int):
+    return db.query(models.Progress).filter(models.Progress.user_id == user_id).all()
+
+def get_lesson_progress(db: Session, user_id: int, lesson_id: int):
+    return db.query(models.Progress).filter(
+        models.Progress.user_id == user_id,
+        models.Progress.lesson_id == lesson_id
+    ).first()
+
+# Achievement functions
+def initialize_achievements(db: Session):
+    """Create default achievements if they don't exist"""
+    achievements = [
+        {"name": "First Steps", "description": "Complete your first lesson", "icon": "🎯", "points": 10, "category": "lessons"},
+        {"name": "Dedicated Learner", "description": "Complete 3 lessons", "icon": "📚", "points": 25, "category": "lessons"},
+        {"name": "Spanish Master", "description": "Complete all 5 lessons", "icon": "🏆", "points": 50, "category": "lessons"},
+        {"name": "Perfect Score", "description": "Get 100% on any quiz", "icon": "⭐", "points": 20, "category": "scores"},
+        {"name": "Quiz Champion", "description": "Get 100% on 3 different quizzes", "icon": "🌟", "points": 40, "category": "scores"},
+        {"name": "Vocabulary Expert", "description": "Complete all vocabulary lessons", "icon": "📖", "points": 30, "category": "lessons"},
+        {"name": "Persistent", "description": "Retry a lesson 5 times", "icon": "💪", "points": 15, "category": "streak"},
+        {"name": "Quick Learner", "description": "Complete a lesson on first try with 80%+", "icon": "🚀", "points": 25, "category": "scores"},
+        {"name": "Point Collector", "description": "Earn 100 total points", "icon": "💎", "points": 50, "category": "points"},
+        {"name": "Practice Makes Perfect", "description": "Complete 10 quiz attempts", "icon": "🎓", "points": 35, "category": "streak"},
+    ]
+
+    for ach_data in achievements:
+        existing = db.query(models.Achievement).filter(models.Achievement.name == ach_data["name"]).first()
+        if not existing:
+            achievement = models.Achievement(**ach_data)
+            db.add(achievement)
+
+    db.commit()
+
+def check_and_award_achievements(db: Session, user_id: int):
+    """Check if user earned any new achievements"""
+    user = db.query(models.User).filter(models.User.id == user_id).first()
+    if not user:
+        return
+
+    progress_list = get_user_progress(db, user_id)
+    completed_lessons = [p for p in progress_list if p.completed]
+    perfect_scores = [p for p in progress_list if p.best_score == 5]  # 5 questions per quiz
+    total_attempts = sum(p.attempts for p in progress_list)
+
+    # Check achievements
+    achievement_checks = {
+        "First Steps": len(completed_lessons) >= 1,
+        "Dedicated Learner": len(completed_lessons) >= 3,
+        "Spanish Master": len(completed_lessons) >= 5,
+        "Perfect Score": len(perfect_scores) >= 1,
+        "Quiz Champion": len(perfect_scores) >= 3,
+        "Persistent": any(p.attempts >= 5 for p in progress_list),
+        "Quick Learner": any(p.attempts == 1 and p.best_score and p.best_score >= 4 for p in progress_list),
+        "Point Collector": user.total_points >= 100,
+        "Practice Makes Perfect": total_attempts >= 10,
+    }
+
+    for achievement_name, earned in achievement_checks.items():
+        if earned:
+            achievement = db.query(models.Achievement).filter(models.Achievement.name == achievement_name).first()
+            if achievement:
+                # Check if user already has this achievement
+                existing = db.query(models.UserAchievement).filter(
+                    models.UserAchievement.user_id == user_id,
+                    models.UserAchievement.achievement_id == achievement.id
+                ).first()
+
+                if not existing:
+                    # Award achievement
+                    user_achievement = models.UserAchievement(
+                        user_id=user_id,
+                        achievement_id=achievement.id
+                    )
+                    db.add(user_achievement)
+
+                    # Add points to user
+                    user.total_points += achievement.points
+
+    db.commit()
+
+def get_user_achievements(db: Session, user_id: int):
+    """Get all achievements earned by user"""
+    user_achievements = db.query(models.UserAchievement).filter(
+        models.UserAchievement.user_id == user_id
+    ).all()
+
+    return [
+        {
+            "id": ua.achievement.id,
+            "name": ua.achievement.name,
+            "description": ua.achievement.description,
+            "icon": ua.achievement.icon,
+            "points": ua.achievement.points,
+            "category": ua.achievement.category,
+            "earned_at": ua.earned_at
+        }
+        for ua in user_achievements
+    ]
+
+def get_all_achievements(db: Session):
+    """Get all available achievements"""
+    return db.query(models.Achievement).all()
+
+def get_user_stats(db: Session, user_id: int):
+    """Get comprehensive user statistics"""
+    user = db.query(models.User).filter(models.User.id == user_id).first()
+    if not user:
+        return None
+
+    progress_list = get_user_progress(db, user_id)
+    completed_count = len([p for p in progress_list if p.completed])
+    achievements_list = get_user_achievements(db, user_id)
+    total_achievements = db.query(models.Achievement).count()
+
+    best_scores = [
+        {"lesson_id": p.lesson_id, "score": p.best_score, "attempts": p.attempts}
+        for p in progress_list if p.best_score
+    ]
+    best_scores.sort(key=lambda x: x["score"], reverse=True)
+
+    recent_activity = [
+        {"lesson_id": p.lesson_id, "last_practiced": p.last_practiced, "completed": p.completed}
+        for p in progress_list
+    ]
+    recent_activity.sort(key=lambda x: x["last_practiced"], reverse=True)
+
+    return {
+        "username": user.username,
+        "total_points": user.total_points,
+        "lessons_completed": completed_count,
+        "total_lessons": 5,
+        "achievements_count": len(achievements_list),
+        "total_achievements": total_achievements,
+        "best_scores": best_scores[:5],
+        "recent_activity": recent_activity[:10]
+    }
+
+# Avatar functions
+def initialize_avatar_styles(db: Session):
+    """Create default avatar styles"""
+    styles = [
+        {"name": "Classic", "style_type": "avataaars", "cost": 0, "preview_url": "https://api.dicebear.com/7.x/avataaars/svg?seed=classic", "description": "Classic avatar style - FREE!", "is_premium": False},
+        {"name": "Pixel Art", "style_type": "pixel-art", "cost": 50, "preview_url": "https://api.dicebear.com/7.x/pixel-art/svg?seed=pixel", "description": "Retro pixel art style", "is_premium": False},
+        {"name": "Bottts", "style_type": "bottts", "cost": 75, "preview_url": "https://api.dicebear.com/7.x/bottts/svg?seed=robot", "description": "Fun robot avatars", "is_premium": False},
+        {"name": "Adventurer", "style_type": "adventurer", "cost": 100, "preview_url": "https://api.dicebear.com/7.x/adventurer/svg?seed=adventure", "description": "Adventurous character style", "is_premium": True},
+        {"name": "Big Smile", "style_type": "big-smile", "cost": 100, "preview_url": "https://api.dicebear.com/7.x/big-smile/svg?seed=smile", "description": "Cheerful big smile avatars", "is_premium": True},
+        {"name": "Lorelei", "style_type": "lorelei", "cost": 125, "preview_url": "https://api.dicebear.com/7.x/lorelei/svg?seed=lorelei", "description": "Elegant illustrated style", "is_premium": True},
+        {"name": "Miniavs", "style_type": "miniavs", "cost": 150, "preview_url": "https://api.dicebear.com/7.x/miniavs/svg?seed=mini", "description": "Minimalist avatar style", "is_premium": True},
+        {"name": "Shapes", "style_type": "shapes", "cost": 200, "preview_url": "https://api.dicebear.com/7.x/shapes/svg?seed=shapes", "description": "Abstract geometric shapes", "is_premium": True},
+    ]
+
+    for style_data in styles:
+        existing = db.query(models.AvatarStyle).filter(models.AvatarStyle.name == style_data["name"]).first()
+        if not existing:
+            style = models.AvatarStyle(**style_data)
+            db.add(style)
+
+    db.commit()
+
+def get_all_avatar_styles(db: Session, user_id: int = None):
+    """Get all avatar styles, optionally marking which ones the user owns"""
+    styles = db.query(models.AvatarStyle).all()
+
+    if user_id:
+        purchases = db.query(models.AvatarPurchase).filter(
+            models.AvatarPurchase.user_id == user_id
+        ).all()
+        purchased_ids = {p.avatar_style_id for p in purchases}
+
+        return [
+            {
+                "id": s.id,
+                "name": s.name,
+                "style_type": s.style_type,
+                "cost": s.cost,
+                "preview_url": s.preview_url,
+                "description": s.description,
+                "is_premium": s.is_premium,
+                "is_owned": s.id in purchased_ids or s.cost == 0
+            }
+            for s in styles
+        ]
+
+    return styles
+
+def purchase_avatar_style(db: Session, user_id: int, avatar_style_id: int):
+    """Purchase an avatar style with points"""
+    user = db.query(models.User).filter(models.User.id == user_id).first()
+    if not user:
+        return None, "User not found"
+
+    style = db.query(models.AvatarStyle).filter(models.AvatarStyle.id == avatar_style_id).first()
+    if not style:
+        return None, "Avatar style not found"
+
+    # Check if already purchased
+    existing = db.query(models.AvatarPurchase).filter(
+        models.AvatarPurchase.user_id == user_id,
+        models.AvatarPurchase.avatar_style_id == avatar_style_id
+    ).first()
+    if existing:
+        return None, "Already purchased"
+
+    # Check if user has enough points
+    if user.total_points < style.cost:
+        return None, f"Not enough points. Need {style.cost}, have {user.total_points}"
+
+    # Deduct points and create purchase
+    user.total_points -= style.cost
+    purchase = models.AvatarPurchase(user_id=user_id, avatar_style_id=avatar_style_id)
+    db.add(purchase)
+    db.commit()
+
+    return purchase, None
+
+def update_user_avatar(db: Session, user_id: int, avatar_style: str, avatar_seed: str):
+    """Update user's avatar"""
+    user = db.query(models.User).filter(models.User.id == user_id).first()
+    if not user:
+        return None
+
+    # Verify user owns this style
+    style = db.query(models.AvatarStyle).filter(models.AvatarStyle.style_type == avatar_style).first()
+    if style and style.cost > 0:
+        purchase = db.query(models.AvatarPurchase).filter(
+            models.AvatarPurchase.user_id == user_id,
+            models.AvatarPurchase.avatar_style_id == style.id
+        ).first()
+        if not purchase:
+            return None
+
+    user.avatar_style = avatar_style
+    user.avatar_seed = avatar_seed
+    db.commit()
+    db.refresh(user)
+    return user
\ No newline at end of file
diff --git a/backend/app/main.py b/backend/app/main.py
index 928e937..86ba705 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -1,15 +1,21 @@
-from fastapi import FastAPI, HTTPException, Depends
+from fastapi import FastAPI, HTTPException, Depends, Header
 from sqlalchemy import create_engine
-from sqlalchemy.orm import sessionmaker
+from sqlalchemy.orm import sessionmaker, Session
 from app import models, schemas, crud
 from fastapi.middleware.cors import CORSMiddleware
+from typing import Optional, List
+import json
 
 DATABASE_URL = "sqlite:///./data/users.db"
 engine = create_engine(DATABASE_URL, connect_args={"check_same_thread": False})
 SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
 models.Base.metadata.create_all(bind=engine)
 
-app = FastAPI(title="Language-Learning-Web Backend")
+app = FastAPI(
+    title="Language-Learning-Web API",
+    description="Developer-friendly API for Spanish learning with progress tracking, achievements, and avatar shop",
+    version="2.0.0"
+)
 
 # Allow CORS for local dev frontend
 app.add_middleware(
@@ -20,6 +26,9 @@
     allow_headers=["*"],
 )
 
+# Simple in-memory session store (in production, use Redis or similar)
+active_sessions = {}
+
 # Dependency
 def get_db():
     db = SessionLocal()
@@ -28,17 +37,286 @@ def get_db():
     finally:
         db.close()
 
+# Authentication dependencies
+def get_current_user_from_session(
+    authorization: Optional[str] = Header(None),
+    db: Session = Depends(get_db)
+):
+    """Get user from session token"""
+    if not authorization or not authorization.startswith("Bearer "):
+        raise HTTPException(status_code=401, detail="Not authenticated")
+
+    token = authorization.replace("Bearer ", "")
+    user_id = active_sessions.get(token)
+
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Invalid or expired session")
+
+    user = db.query(models.User).filter(models.User.id == user_id).first()
+    if not user:
+        raise HTTPException(status_code=401, detail="User not found")
+
+    return user
+
+def get_current_user_from_api_key(
+    x_api_key: Optional[str] = Header(None),
+    db: Session = Depends(get_db)
+):
+    """Get user from API key (for developer API)"""
+    if not x_api_key:
+        raise HTTPException(status_code=401, detail="API key required")
+
+    user = crud.get_user_by_api_key(db, x_api_key)
+    if not user:
+        raise HTTPException(status_code=401, detail="Invalid API key")
+
+    return user
+
+# ==================== User Management ====================
+
 @app.post("/api/v1/users/register", response_model=schemas.UserResponse)
-def register_user(user: schemas.UserCreate, db: SessionLocal = Depends(get_db)):
+def register_user(user: schemas.UserCreate, db: Session = Depends(get_db)):
+    """Register a new user"""
     db_user = crud.get_user_by_username(db, user.username)
     if db_user:
         raise HTTPException(status_code=400, detail="Username already exists")
     new_user = crud.create_user(db, user.username, user.password)
     return new_user
 
+@app.post("/api/v1/users/login")
+def login_user(user: schemas.UserLogin, db: Session = Depends(get_db)):
+    """Login and get a session token"""
+    authenticated_user = crud.authenticate_user(db, user.username, user.password)
+    if not authenticated_user:
+        raise HTTPException(status_code=401, detail="Invalid username or password")
+
+    # Generate session token
+    import secrets
+    token = secrets.token_urlsafe(32)
+    active_sessions[token] = authenticated_user.id
+
+    return {
+        "access_token": token,
+        "token_type": "bearer",
+        "user": {
+            "id": authenticated_user.id,
+            "username": authenticated_user.username,
+            "total_points": authenticated_user.total_points,
+            "avatar_style": authenticated_user.avatar_style,
+            "avatar_seed": authenticated_user.avatar_seed
+        }
+    }
+
+@app.post("/api/v1/users/logout")
+def logout_user(authorization: Optional[str] = Header(None)):
+    """Logout and invalidate session"""
+    if authorization and authorization.startswith("Bearer "):
+        token = authorization.replace("Bearer ", "")
+        active_sessions.pop(token, None)
+    return {"message": "Logged out successfully"}
+
+@app.get("/api/v1/users/me", response_model=schemas.UserResponse)
+def get_current_user_info(current_user: models.User = Depends(get_current_user_from_session)):
+    """Get current user info"""
+    return current_user
+
+# ==================== API Key Management (User must be logged in) ====================
+
+@app.post("/api/v1/api-keys", response_model=schemas.APIKeyResponse)
+def create_api_key(
+    key_data: schemas.APIKeyCreate,
+    current_user: models.User = Depends(get_current_user_from_session),
+    db: Session = Depends(get_db)
+):
+    """Create a new API key (requires login)"""
+    api_key = crud.create_api_key(db, current_user.id, key_data.name)
+    return api_key
+
+@app.get("/api/v1/api-keys", response_model=List[schemas.APIKeyResponse])
+def list_api_keys(
+    current_user: models.User = Depends(get_current_user_from_session),
+    db: Session = Depends(get_db)
+):
+    """List all API keys for current user"""
+    return crud.get_user_api_keys(db, current_user.id)
+
+@app.delete("/api/v1/api-keys/{key_id}")
+def revoke_api_key(
+    key_id: int,
+    current_user: models.User = Depends(get_current_user_from_session),
+    db: Session = Depends(get_db)
+):
+    """Revoke an API key"""
+    success = crud.revoke_api_key(db, current_user.id, key_id)
+    if not success:
+        raise HTTPException(status_code=404, detail="API key not found")
+    return {"message": "API key revoked successfully"}
+
+# ==================== Lessons (Public) ====================
+
 @app.get("/api/v1/lessons")
 def get_lessons():
-    import json
+    """Get all available lessons (no auth required)"""
     with open("app/lessons.json") as f:
         lessons = json.load(f)
     return lessons
+
+@app.get("/api/v1/lessons/{lesson_id}")
+def get_lesson(lesson_id: int):
+    """Get a specific lesson by ID (no auth required)"""
+    with open("app/lessons.json") as f:
+        lessons = json.load(f)
+
+    lesson = next((l for l in lessons if l["id"] == lesson_id), None)
+    if not lesson:
+        raise HTTPException(status_code=404, detail="Lesson not found")
+
+    return lesson
+
+# ==================== Progress Tracking (Developer API - requires API key) ====================
+
+@app.get("/api/v1/progress", response_model=List[schemas.ProgressResponse])
+def get_user_progress_api(
+    current_user: models.User = Depends(get_current_user_from_api_key),
+    db: Session = Depends(get_db)
+):
+    """
+    Get all lesson progress for authenticated user (requires API key)
+
+    **Developer API**: Use X-API-Key header
+    """
+    progress = crud.get_user_progress(db, current_user.id)
+    return progress
+
+@app.get("/api/v1/progress/{lesson_id}", response_model=schemas.ProgressResponse)
+def get_lesson_progress_api(
+    lesson_id: int,
+    current_user: models.User = Depends(get_current_user_from_api_key),
+    db: Session = Depends(get_db)
+):
+    """Get progress for a specific lesson (requires API key)"""
+    progress = crud.get_lesson_progress(db, current_user.id, lesson_id)
+    if not progress:
+        raise HTTPException(status_code=404, detail="No progress found for this lesson")
+    return progress
+
+@app.post("/api/v1/progress", response_model=schemas.ProgressResponse)
+def update_progress_api(
+    progress_data: schemas.ProgressUpdate,
+    current_user: models.User = Depends(get_current_user_from_api_key),
+    db: Session = Depends(get_db)
+):
+    """
+    Update lesson progress (requires API key)
+
+    **Automatically checks and awards achievements!**
+    """
+    progress = crud.update_progress(
+        db,
+        current_user.id,
+        progress_data.lesson_id,
+        progress_data.completed,
+        progress_data.score
+    )
+    return progress
+
+# ==================== Achievements ====================
+
+@app.get("/api/v1/achievements")
+def get_all_achievements_api(db: Session = Depends(get_db)):
+    """Get all available achievements (no auth required)"""
+    achievements = crud.get_all_achievements(db)
+    return achievements
+
+@app.get("/api/v1/achievements/user", response_model=List[schemas.AchievementResponse])
+def get_user_achievements_api(
+    current_user: models.User = Depends(get_current_user_from_api_key),
+    db: Session = Depends(get_db)
+):
+    """Get all achievements earned by authenticated user (requires API key)"""
+    achievements = crud.get_user_achievements(db, current_user.id)
+    return achievements
+
+@app.get("/api/v1/achievements/me", response_model=List[schemas.AchievementResponse])
+def get_my_achievements(
+    current_user: models.User = Depends(get_current_user_from_session),
+    db: Session = Depends(get_db)
+):
+    """Get all achievements earned by authenticated user (requires session login)"""
+    achievements = crud.get_user_achievements(db, current_user.id)
+    return achievements
+
+# ==================== User Statistics ====================
+
+@app.get("/api/v1/stats", response_model=schemas.UserStatsResponse)
+def get_user_stats_api(
+    current_user: models.User = Depends(get_current_user_from_api_key),
+    db: Session = Depends(get_db)
+):
+    """
+    Get comprehensive user statistics (requires API key)
+
+    **Returns**: Total points, lessons completed, achievements, best scores, recent activity
+    """
+    stats = crud.get_user_stats(db, current_user.id)
+    if not stats:
+        raise HTTPException(status_code=404, detail="User not found")
+    return stats
+
+# ==================== Avatar Shop ====================
+
+@app.get("/api/v1/avatar-styles", response_model=List[schemas.AvatarStyleResponse])
+def get_avatar_styles(
+    current_user: models.User = Depends(get_current_user_from_session),
+    db: Session = Depends(get_db)
+):
+    """Get all avatar styles with ownership status"""
+    styles = crud.get_all_avatar_styles(db, current_user.id)
+    return styles
+
+@app.post("/api/v1/avatar-styles/purchase")
+def purchase_avatar(
+    purchase: schemas.AvatarPurchaseRequest,
+    current_user: models.User = Depends(get_current_user_from_session),
+    db: Session = Depends(get_db)
+):
+    """Purchase an avatar style with points"""
+    result, error = crud.purchase_avatar_style(db, current_user.id, purchase.avatar_style_id)
+    if error:
+        raise HTTPException(status_code=400, detail=error)
+    return {"message": "Avatar style purchased successfully", "remaining_points": current_user.total_points}
+
+@app.put("/api/v1/users/avatar")
+def update_avatar(
+    avatar_data: schemas.AvatarUpdateRequest,
+    current_user: models.User = Depends(get_current_user_from_session),
+    db: Session = Depends(get_db)
+):
+    """Update user's avatar"""
+    user = crud.update_user_avatar(db, current_user.id, avatar_data.avatar_style, avatar_data.avatar_seed)
+    if not user:
+        raise HTTPException(status_code=400, detail="Cannot update avatar - style not owned")
+    return {"message": "Avatar updated successfully", "avatar_url": f"https://api.dicebear.com/7.x/{user.avatar_style}/svg?seed={user.avatar_seed}"}
+
+# ==================== Health Check ====================
+
+@app.get("/")
+def root():
+    return {
+        "message": "Language Learning Web API",
+        "version": "2.0.0",
+        "docs": "/docs",
+        "features": [
+            "User authentication (login/logout)",
+            "API key authentication for developers",
+            "Progress tracking",
+            "10+ unlockable achievements",
+            "Avatar shop with 8 styles",
+            "Comprehensive statistics",
+            "Points-based reward system"
+        ]
+    }
+
+@app.get("/health")
+def health_check():
+    return {"status": "healthy", "sessions": len(active_sessions)}
diff --git a/backend/app/models.py b/backend/app/models.py
index da072c5..d46483b 100644
--- a/backend/app/models.py
+++ b/backend/app/models.py
@@ -1,6 +1,7 @@
-from sqlalchemy import Column, Integer, String, Boolean, ForeignKey
+from sqlalchemy import Column, Integer, String, Boolean, ForeignKey, DateTime
 from sqlalchemy.orm import relationship
 from sqlalchemy.ext.declarative import declarative_base
+from datetime import datetime
 
 Base = declarative_base()
 
@@ -9,6 +10,29 @@ class User(Base):
     id = Column(Integer, primary_key=True)
     username = Column(String, unique=True, index=True)
     password_hash = Column(String)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    total_points = Column(Integer, default=0)
+    avatar_style = Column(String, default="avataaars")  # DiceBear style
+    avatar_seed = Column(String, nullable=True)  # Random seed for avatar
+    custom_avatar_url = Column(String, nullable=True)  # Custom uploaded avatar
+
+    # Relationships
+    progress = relationship("Progress", back_populates="user")
+    api_keys = relationship("APIKey", back_populates="user")
+    achievements = relationship("UserAchievement", back_populates="user")
+    purchases = relationship("AvatarPurchase", back_populates="user")
+
+class APIKey(Base):
+    __tablename__ = "api_keys"
+    id = Column(Integer, primary_key=True)
+    user_id = Column(Integer, ForeignKey("users.id"))
+    key = Column(String, unique=True, index=True)
+    name = Column(String)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    last_used = Column(DateTime, nullable=True)
+    is_active = Column(Boolean, default=True)
+
+    user = relationship("User", back_populates="api_keys")
 
 class Progress(Base):
     __tablename__ = "progress"
@@ -16,3 +40,49 @@ class Progress(Base):
     user_id = Column(Integer, ForeignKey("users.id"))
     lesson_id = Column(Integer)
     completed = Column(Boolean, default=False)
+    score = Column(Integer, nullable=True)
+    best_score = Column(Integer, nullable=True)
+    attempts = Column(Integer, default=0)
+    completed_at = Column(DateTime, nullable=True)
+    last_practiced = Column(DateTime, default=datetime.utcnow)
+
+    user = relationship("User", back_populates="progress")
+
+class Achievement(Base):
+    __tablename__ = "achievements"
+    id = Column(Integer, primary_key=True)
+    name = Column(String, unique=True)
+    description = Column(String)
+    icon = Column(String)
+    points = Column(Integer, default=10)
+    category = Column(String)
+
+class UserAchievement(Base):
+    __tablename__ = "user_achievements"
+    id = Column(Integer, primary_key=True)
+    user_id = Column(Integer, ForeignKey("users.id"))
+    achievement_id = Column(Integer, ForeignKey("achievements.id"))
+    earned_at = Column(DateTime, default=datetime.utcnow)
+
+    user = relationship("User", back_populates="achievements")
+    achievement = relationship("Achievement")
+
+class AvatarStyle(Base):
+    __tablename__ = "avatar_styles"
+    id = Column(Integer, primary_key=True)
+    name = Column(String, unique=True)
+    style_type = Column(String)  # DiceBear style name
+    cost = Column(Integer, default=0)  # Point cost (0 = free)
+    preview_url = Column(String)
+    description = Column(String)
+    is_premium = Column(Boolean, default=False)
+
+class AvatarPurchase(Base):
+    __tablename__ = "avatar_purchases"
+    id = Column(Integer, primary_key=True)
+    user_id = Column(Integer, ForeignKey("users.id"))
+    avatar_style_id = Column(Integer, ForeignKey("avatar_styles.id"))
+    purchased_at = Column(DateTime, default=datetime.utcnow)
+
+    user = relationship("User", back_populates="purchases")
+    avatar_style = relationship("AvatarStyle")
diff --git a/backend/app/schemas.py b/backend/app/schemas.py
index faaf653..e9920fb 100644
--- a/backend/app/schemas.py
+++ b/backend/app/schemas.py
@@ -1,16 +1,94 @@
 from pydantic import BaseModel
+from typing import Optional, List
+from datetime import datetime
 
 class UserCreate(BaseModel):
     username: str
     password: str
 
+class UserLogin(BaseModel):
+    username: str
+    password: str
+
 class UserResponse(BaseModel):
     id: int
     username: str
+    total_points: int
+    created_at: datetime
+    avatar_style: str
+    avatar_seed: Optional[str]
+    custom_avatar_url: Optional[str]
 
     class Config:
-        orm_mode = True
+        from_attributes = True
+
+class APIKeyCreate(BaseModel):
+    name: str
+
+class APIKeyResponse(BaseModel):
+    id: int
+    key: str
+    name: str
+    created_at: datetime
+    is_active: bool
+
+    class Config:
+        from_attributes = True
 
 class ProgressUpdate(BaseModel):
     lesson_id: int
     completed: bool
+    score: Optional[int] = None
+
+class ProgressResponse(BaseModel):
+    lesson_id: int
+    completed: bool
+    score: Optional[int]
+    best_score: Optional[int]
+    attempts: int
+    last_practiced: datetime
+
+    class Config:
+        from_attributes = True
+
+class AchievementResponse(BaseModel):
+    id: int
+    name: str
+    description: str
+    icon: str
+    points: int
+    category: str
+    earned_at: Optional[datetime] = None
+
+    class Config:
+        from_attributes = True
+
+class UserStatsResponse(BaseModel):
+    username: str
+    total_points: int
+    lessons_completed: int
+    total_lessons: int
+    achievements_count: int
+    total_achievements: int
+    best_scores: List[dict]
+    recent_activity: List[dict]
+
+class AvatarStyleResponse(BaseModel):
+    id: int
+    name: str
+    style_type: str
+    cost: int
+    preview_url: str
+    description: str
+    is_premium: bool
+    is_owned: Optional[bool] = False
+
+    class Config:
+        from_attributes = True
+
+class AvatarPurchaseRequest(BaseModel):
+    avatar_style_id: int
+
+class AvatarUpdateRequest(BaseModel):
+    avatar_style: str
+    avatar_seed: str
diff --git a/backend/data/users.db b/backend/data/users.db
index 860437d..08b5605 100644
Binary files a/backend/data/users.db and b/backend/data/users.db differ
diff --git a/frontend/src/components/AchievementsView.vue b/frontend/src/components/AchievementsView.vue
new file mode 100644
index 0000000..9aba910
--- /dev/null
+++ b/frontend/src/components/AchievementsView.vue
@@ -0,0 +1,339 @@
+<template>
+  <div class="achievements-view">
+    <div class="achievements-header">
+      <h1>🏆 Achievements</h1>
+      <div class="progress-bar-container">
+        <div class="progress-info">
+          <span>{{ earnedCount }} / {{ totalCount }} Unlocked</span>
+          <span>{{ progressPercentage }}%</span>
+        </div>
+        <div class="progress-bar">
+          <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="filter-tabs">
+      <button
+        v-for="category in categories"
+        :key="category.value"
+        @click="selectedCategory = category.value"
+        :class="['filter-tab', { active: selectedCategory === category.value }]"
+      >
+        {{ category.label }}
+      </button>
+    </div>
+
+    <div class="achievements-grid">
+      <div
+        v-for="achievement in filteredAchievements"
+        :key="achievement.id"
+        :class="['achievement-card', { earned: achievement.earned, locked: !achievement.earned }]"
+      >
+        <div class="achievement-icon">{{ achievement.icon }}</div>
+        <div class="achievement-info">
+          <h3>{{ achievement.name }}</h3>
+          <p>{{ achievement.description }}</p>
+          <div class="achievement-footer">
+            <span class="points">💎 {{ achievement.points }} pts</span>
+            <span v-if="achievement.earned" class="earned-badge">✓ Earned</span>
+            <span v-else class="locked-badge">🔒 Locked</span>
+          </div>
+          <div v-if="achievement.earned && achievement.earned_at" class="earned-date">
+            Earned: {{ formatDate(achievement.earned_at) }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="filteredAchievements.length === 0" class="no-achievements">
+      <p>No achievements in this category yet.</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    authToken: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      allAchievements: [],
+      userAchievements: [],
+      selectedCategory: 'all',
+      categories: [
+        { label: 'All', value: 'all' },
+        { label: 'Lessons', value: 'lessons' },
+        { label: 'Scores', value: 'scores' },
+        { label: 'Streak', value: 'streak' },
+        { label: 'Points', value: 'points' }
+      ],
+      apiUrl: import.meta.env.VITE_API_URL || 'http://127.0.0.1:8000'
+    }
+  },
+  computed: {
+    filteredAchievements() {
+      if (this.selectedCategory === 'all') {
+        return this.allAchievements
+      }
+      return this.allAchievements.filter(a => a.category === this.selectedCategory)
+    },
+    earnedCount() {
+      return this.allAchievements.filter(a => a.earned).length
+    },
+    totalCount() {
+      return this.allAchievements.length
+    },
+    progressPercentage() {
+      if (this.totalCount === 0) return 0
+      return Math.round((this.earnedCount / this.totalCount) * 100)
+    }
+  },
+  async mounted() {
+    await this.loadAchievements()
+  },
+  methods: {
+    async loadAchievements() {
+      try {
+        // Load all available achievements
+        const allResponse = await fetch(`${this.apiUrl}/api/v1/achievements`)
+        const allData = await allResponse.json()
+
+        // Load user's earned achievements using session token
+        let earnedIds = new Set()
+        try {
+          const userResponse = await fetch(`${this.apiUrl}/api/v1/achievements/me`, {
+            headers: {
+              'Authorization': `Bearer ${this.authToken}`
+            }
+          })
+          if (userResponse.ok) {
+            const userData = await userResponse.json()
+            earnedIds = new Set(userData.map(a => a.id))
+            this.userAchievements = userData
+          }
+        } catch (err) {
+          console.log('Could not load user achievements:', err)
+        }
+
+        // Combine data
+        this.allAchievements = allData.map(achievement => ({
+          ...achievement,
+          earned: earnedIds.has(achievement.id),
+          earned_at: this.userAchievements.find(ua => ua.id === achievement.id)?.earned_at
+        }))
+      } catch (error) {
+        console.error('Failed to load achievements:', error)
+      }
+    },
+    formatDate(dateString) {
+      if (!dateString) return ''
+      const date = new Date(dateString)
+      return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.achievements-view {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.achievements-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.achievements-header h1 {
+  font-size: 2.5rem;
+  color: #1e40af;
+  margin-bottom: 20px;
+}
+
+.progress-bar-container {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.progress-bar {
+  height: 20px;
+  background: #e5e7eb;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(135deg, #10b981, #059669);
+  transition: width 0.5s ease;
+  border-radius: 10px;
+}
+
+.filter-tabs {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 30px;
+  flex-wrap: wrap;
+}
+
+.filter-tab {
+  padding: 10px 20px;
+  border: none;
+  background: #e5e7eb;
+  color: #374151;
+  font-weight: 600;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.filter-tab:hover {
+  background: #d1d5db;
+}
+
+.filter-tab.active {
+  background: #2563eb;
+  color: white;
+}
+
+.achievements-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.achievement-card {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  border: 3px solid transparent;
+  display: flex;
+  gap: 15px;
+}
+
+.achievement-card.earned {
+  border-color: #10b981;
+}
+
+.achievement-card.locked {
+  opacity: 0.6;
+}
+
+.achievement-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+.achievement-icon {
+  font-size: 3rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.achievement-info {
+  flex: 1;
+}
+
+.achievement-info h3 {
+  color: #1e40af;
+  font-size: 1.3rem;
+  margin-bottom: 8px;
+}
+
+.achievement-info p {
+  color: #6b7280;
+  margin-bottom: 12px;
+  line-height: 1.4;
+}
+
+.achievement-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.points {
+  color: #f59e0b;
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.earned-badge {
+  background: #10b981;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.locked-badge {
+  background: #9ca3af;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.earned-date {
+  font-size: 0.8rem;
+  color: #6b7280;
+  margin-top: 8px;
+  font-style: italic;
+}
+
+.no-achievements {
+  text-align: center;
+  padding: 60px 20px;
+  color: #6b7280;
+  font-size: 1.1rem;
+}
+
+@media (max-width: 768px) {
+  .achievements-header h1 {
+    font-size: 2rem;
+  }
+
+  .achievements-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .achievement-card {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .achievement-icon {
+    font-size: 2.5rem;
+  }
+
+  .achievement-footer {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+</style>
diff --git a/frontend/src/components/AvatarShop.vue b/frontend/src/components/AvatarShop.vue
new file mode 100644
index 0000000..51342fe
--- /dev/null
+++ b/frontend/src/components/AvatarShop.vue
@@ -0,0 +1,418 @@
+<template>
+  <div class="avatar-shop">
+    <button class="back-button" @click="$emit('back')">← Back</button>
+
+    <div class="shop-header">
+      <h1>🎨 Avatar Shop</h1>
+      <div class="points-display">
+        <span class="points-icon">💎</span>
+        <span class="points-text">{{ userPoints }} Points</span>
+      </div>
+    </div>
+
+    <p class="shop-subtitle">Unlock custom avatar styles with your earned points!</p>
+
+    <!-- Avatar Styles Grid -->
+    <div class="avatars-grid">
+      <div
+        v-for="style in avatarStyles"
+        :key="style.id"
+        :class="['avatar-card', { owned: style.is_owned, locked: !style.is_owned }]"
+      >
+        <div class="avatar-preview">
+          <img :src="style.preview_url" :alt="style.name" />
+          <div v-if="style.is_premium" class="premium-badge">⭐ PREMIUM</div>
+        </div>
+
+        <div class="avatar-info">
+          <h3>{{ style.name }}</h3>
+          <p>{{ style.description }}</p>
+
+          <div class="avatar-footer">
+            <div class="cost">
+              <span v-if="style.cost === 0" class="free-badge">FREE</span>
+              <span v-else class="points-cost">💎 {{ style.cost }} pts</span>
+            </div>
+
+            <button
+              v-if="!style.is_owned && style.cost > 0"
+              @click="purchaseStyle(style)"
+              :disabled="userPoints < style.cost || purchasing"
+              :class="['purchase-btn', { disabled: userPoints < style.cost }]"
+            >
+              {{ userPoints < style.cost ? 'Not Enough Points' : 'Purchase' }}
+            </button>
+
+            <button
+              v-if="style.is_owned"
+              @click="selectStyle(style)"
+              :class="['use-btn', { active: currentStyle === style.style_type }]"
+            >
+              {{ currentStyle === style.style_type ? '✓ Using' : 'Use This' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Notification -->
+    <div v-if="notification" :class="['notification', notification.type]">
+      {{ notification.message }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    userPoints: {
+      type: Number,
+      default: 0
+    },
+    currentStyle: {
+      type: String,
+      default: 'avataaars'
+    },
+    authToken: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      avatarStyles: [],
+      purchasing: false,
+      notification: null,
+      apiUrl: import.meta.env.VITE_API_URL || 'http://127.0.0.1:8000'
+    }
+  },
+  async mounted() {
+    await this.loadAvatarStyles()
+  },
+  methods: {
+    async loadAvatarStyles() {
+      try {
+        const response = await fetch(`${this.apiUrl}/api/v1/avatar-styles`, {
+          headers: {
+            'Authorization': `Bearer ${this.authToken}`
+          }
+        })
+        this.avatarStyles = await response.json()
+      } catch (error) {
+        console.error('Failed to load avatar styles:', error)
+      }
+    },
+    async purchaseStyle(style) {
+      this.purchasing = true
+      try {
+        const response = await fetch(`${this.apiUrl}/api/v1/avatar-styles/purchase`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${this.authToken}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ avatar_style_id: style.id })
+        })
+
+        if (response.ok) {
+          const data = await response.json()
+          this.showNotification(`✓ Purchased ${style.name}!`, 'success')
+          this.$emit('points-updated', data.remaining_points)
+          await this.loadAvatarStyles()
+        } else {
+          const error = await response.json()
+          this.showNotification(error.detail || 'Purchase failed', 'error')
+        }
+      } catch (error) {
+        this.showNotification('Purchase failed', 'error')
+      } finally {
+        this.purchasing = false
+      }
+    },
+    async selectStyle(style) {
+      try {
+        // Generate random seed for customization
+        const seed = Math.random().toString(36).substring(7)
+
+        const response = await fetch(`${this.apiUrl}/api/v1/users/avatar`, {
+          method: 'PUT',
+          headers: {
+            'Authorization': `Bearer ${this.authToken}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            avatar_style: style.style_type,
+            avatar_seed: seed
+          })
+        })
+
+        if (response.ok) {
+          this.showNotification(`✓ Now using ${style.name}!`, 'success')
+          this.$emit('avatar-changed', { style: style.style_type, seed })
+        }
+      } catch (error) {
+        this.showNotification('Failed to update avatar', 'error')
+      }
+    },
+    showNotification(message, type) {
+      this.notification = { message, type }
+      setTimeout(() => {
+        this.notification = null
+      }, 3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.avatar-shop {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.back-button {
+  background: none;
+  border: none;
+  color: #2563eb;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-bottom: 20px;
+  padding: 8px 0;
+  transition: 0.2s;
+}
+.back-button:hover {
+  color: #1d4ed8;
+}
+
+.shop-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.shop-header h1 {
+  font-size: 2.5rem;
+  color: #1e40af;
+}
+
+.points-display {
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  color: white;
+  padding: 12px 24px;
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: bold;
+  font-size: 1.2rem;
+  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
+}
+
+.points-icon {
+  font-size: 1.5rem;
+}
+
+.shop-subtitle {
+  color: #6b7280;
+  font-size: 1.1rem;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.avatars-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 24px;
+  margin-bottom: 60px;
+}
+
+.avatar-card {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  border: 3px solid transparent;
+}
+
+.avatar-card.owned {
+  border-color: #10b981;
+}
+
+.avatar-card.locked:not(.owned) {
+  opacity: 0.8;
+}
+
+.avatar-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.avatar-preview {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  margin: 0 auto 15px;
+  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.avatar-preview img {
+  width: 120px;
+  height: 120px;
+}
+
+.premium-badge {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  color: white;
+  font-size: 0.7rem;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-weight: bold;
+}
+
+.avatar-info {
+  text-align: center;
+}
+
+.avatar-info h3 {
+  color: #1e40af;
+  font-size: 1.3rem;
+  margin-bottom: 8px;
+}
+
+.avatar-info p {
+  color: #6b7280;
+  margin-bottom: 15px;
+  min-height: 40px;
+}
+
+.avatar-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 15px;
+  gap: 10px;
+}
+
+.cost {
+  font-weight: bold;
+}
+
+.free-badge {
+  background: #10b981;
+  color: white;
+  padding: 6px 12px;
+  border-radius: 12px;
+  font-size: 0.9rem;
+}
+
+.points-cost {
+  color: #f59e0b;
+  font-size: 1.1rem;
+}
+
+.purchase-btn,
+.use-btn {
+  flex: 1;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 0.95rem;
+}
+
+.purchase-btn {
+  background: linear-gradient(135deg, #2563eb, #1e40af);
+  color: white;
+}
+
+.purchase-btn:hover:not(.disabled) {
+  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
+  transform: scale(1.05);
+}
+
+.purchase-btn.disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.use-btn {
+  background: #e5e7eb;
+  color: #374151;
+}
+
+.use-btn:hover {
+  background: #d1d5db;
+}
+
+.use-btn.active {
+  background: #10b981;
+  color: white;
+}
+
+.notification {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  padding: 16px 24px;
+  border-radius: 12px;
+  font-weight: 600;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  animation: slideIn 0.3s ease;
+  z-index: 1000;
+}
+
+.notification.success {
+  background: #10b981;
+  color: white;
+}
+
+.notification.error {
+  background: #ef4444;
+  color: white;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(400px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .shop-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .avatars-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .avatar-footer {
+    flex-direction: column;
+  }
+
+  .purchase-btn,
+  .use-btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/components/MainPage.vue b/frontend/src/components/MainPage.vue
index dd47890..946ef21 100644
--- a/frontend/src/components/MainPage.vue
+++ b/frontend/src/components/MainPage.vue
@@ -4,8 +4,28 @@
     <header>
       <nav class="nav-bar">
         <h1>Language-Learning-Web</h1>
-        <ul>
-          <li><a href="#lessons">Lessons</a></li>
+        <div v-if="user" class="nav-user-section">
+          <div class="user-info">
+            <div class="user-avatar">
+              <img v-if="user.avatar_style && user.avatar_seed"
+                   :src="`https://api.dicebear.com/7.x/${user.avatar_style}/svg?seed=${user.avatar_seed}`"
+                   :alt="user.username">
+              <span v-else class="identicon">{{ getIdenticon(user.username) }}</span>
+            </div>
+            <div class="user-details">
+              <span class="username">{{ user.username }}</span>
+              <span class="points">💎 {{ user.total_points }} pts</span>
+            </div>
+          </div>
+          <ul class="nav-links">
+            <li><a @click="currentView = 'lessons'" :class="{ active: currentView === 'lessons' }">Lessons</a></li>
+            <li><a @click="currentView = 'achievements'" :class="{ active: currentView === 'achievements' }">Achievements</a></li>
+            <li><a @click="currentView = 'shop'" :class="{ active: currentView === 'shop' }">Shop</a></li>
+            <li><a @click="currentView = 'profile'" :class="{ active: currentView === 'profile' }">Profile</a></li>
+            <li><a @click="logout" class="logout-btn">Logout</a></li>
+          </ul>
+        </div>
+        <ul v-else class="nav-links">
           <li><a href="#about">About</a></li>
           <li><a href="#contact">Contact</a></li>
         </ul>
@@ -16,45 +36,82 @@
     <div class="main-content">
       <!-- Auth Section -->
       <div v-if="!user" class="auth-box">
+        <div v-if="error" class="error-message">{{ error }}</div>
+        <div v-if="success" class="success-message">{{ success }}</div>
+
         <h2>Login</h2>
-        <input v-model="loginData.username" placeholder="Username" autocomplete="username" autocapitalize="none">
-        <input v-model="loginData.password" type="password" placeholder="Password" autocomplete="current-password">
-        <button @click="login">Login</button>
+        <input v-model="loginData.username" placeholder="Username" autocomplete="username" autocapitalize="none" @keyup.enter="login">
+        <input v-model="loginData.password" type="password" placeholder="Password" autocomplete="current-password" @keyup.enter="login">
+        <div class="remember-me">
+          <label>
+            <input type="checkbox" v-model="rememberMe">
+            <span>Remember me</span>
+          </label>
+        </div>
+        <button @click="login" :disabled="loading">{{ loading ? 'Loading...' : 'Login' }}</button>
         <hr>
         <h2>Register</h2>
-        <input v-model="registerData.username" placeholder="Username" autocomplete="username" autocapitalize="none">
-        <input v-model="registerData.password" type="password" placeholder="Password" autocomplete="new-password">
-        <button @click="register">Register</button>
+        <input v-model="registerData.username" placeholder="Username" autocomplete="username" autocapitalize="none" @keyup.enter="register">
+        <input v-model="registerData.password" type="password" placeholder="Password" autocomplete="new-password" @keyup.enter="register">
+        <button @click="register" :disabled="loading">{{ loading ? 'Loading...' : 'Register' }}</button>
       </div>
 
-      <!-- Lessons Section -->
-      <div v-else id="lessons">
-        <LessonView v-if="selectedLesson" :lesson="selectedLesson" @back="selectedLesson = null" />
-        <div v-else class="lessons-grid">
-          <LessonCard
-            v-for="lesson in lessons"
-            :key="lesson.id"
-            :lesson="lesson"
-            @click="selectLesson(lesson)"
-          />
+      <!-- Logged In Views -->
+      <div v-else class="app-views">
+        <!-- Lessons View -->
+        <div v-if="currentView === 'lessons'" class="view-content">
+          <LessonView v-if="selectedLesson" :lesson="selectedLesson" @back="selectedLesson = null" />
+          <div v-else class="lessons-grid">
+            <LessonCard
+              v-for="lesson in lessons"
+              :key="lesson.id"
+              :lesson="lesson"
+              @click="selectLesson(lesson)"
+            />
+          </div>
         </div>
+
+        <!-- Achievements View -->
+        <AchievementsView
+          v-if="currentView === 'achievements'"
+          :authToken="authToken"
+        />
+
+        <!-- Avatar Shop View -->
+        <AvatarShop
+          v-if="currentView === 'shop'"
+          :userPoints="user.total_points"
+          :currentStyle="user.avatar_style"
+          :authToken="authToken"
+          @points-updated="updateUserPoints"
+          @avatar-changed="updateUserAvatar"
+          @back="currentView = 'lessons'"
+        />
+
+        <!-- Profile Settings View -->
+        <ProfileSettings
+          v-if="currentView === 'profile'"
+          :user="user"
+          :authToken="authToken"
+          @back="currentView = 'lessons'"
+        />
       </div>
     </div>
 
     <!-- About Section -->
-    <section id="about" class="about-section">
+    <section v-if="!user" id="about" class="about-section">
       <h2>About this Project</h2>
       <p>
         Language-Learning-Web is a private, self-hosted language learning platform built with Vue and FastAPI.
         Our goal is to provide a safe, threat-free, and fully responsive environment to practice languages at your own pace.
       </p>
       <p>
-        Features include user registration, lesson tracking, and fully responsive layouts with a polished, modern design.
+        Features include user registration, lesson tracking, achievements system, avatar shop, and developer API with comprehensive statistics.
       </p>
     </section>
 
     <!-- Contact Section -->
-    <section id="contact" class="contact-section">
+    <section v-if="!user" id="contact" class="contact-section">
       <h2>Contact</h2>
       <p>Have questions or feedback? You can reach out via your preferred method — this project is just for learning and testing!</p>
     </section>
@@ -69,28 +126,174 @@
 <script>
 import LessonCard from './LessonCard.vue'
 import LessonView from './LessonView.vue'
+import AchievementsView from './AchievementsView.vue'
+import AvatarShop from './AvatarShop.vue'
+import ProfileSettings from './ProfileSettings.vue'
 
 export default {
-  components: { LessonCard, LessonView },
+  components: {
+    LessonCard,
+    LessonView,
+    AchievementsView,
+    AvatarShop,
+    ProfileSettings
+  },
   data() {
     return {
       user: null,
+      authToken: null,
       lessons: [],
       selectedLesson: null,
+      currentView: 'lessons',
       registerData: { username: '', password: '' },
       loginData: { username: '', password: '' },
+      rememberMe: true,
+      loading: false,
+      error: null,
+      success: null,
       apiUrl: import.meta.env.VITE_API_URL || 'http://127.0.0.1:8000'
     }
   },
+  async mounted() {
+    // Check for stored auth token in both localStorage and sessionStorage
+    let storedToken = localStorage.getItem('authToken')
+    let storedUser = localStorage.getItem('user')
+
+    if (!storedToken) {
+      storedToken = sessionStorage.getItem('authToken')
+      storedUser = sessionStorage.getItem('user')
+    }
+
+    if (storedToken && storedUser) {
+      this.authToken = storedToken
+      this.user = JSON.parse(storedUser)
+      await this.loadLessons()
+    }
+  },
   methods: {
-    async register() { /* implement registration call */ },
+    async register() {
+      this.error = null
+      this.success = null
+      this.loading = true
+
+      try {
+        const response = await fetch(`${this.apiUrl}/api/v1/users/register`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(this.registerData)
+        })
+
+        if (!response.ok) {
+          const error = await response.json()
+          this.error = error.detail || 'Registration failed'
+          return
+        }
+
+        this.success = 'Registration successful! Please login.'
+        this.registerData = { username: '', password: '' }
+      } catch (err) {
+        this.error = 'Network error. Please try again.'
+      } finally {
+        this.loading = false
+      }
+    },
+
     async login() {
-      this.user = { username: this.loginData.username }
-      const res = await fetch(`${this.apiUrl}/api/v1/lessons`)
-      this.lessons = await res.json()
+      this.error = null
+      this.success = null
+      this.loading = true
+
+      try {
+        const response = await fetch(`${this.apiUrl}/api/v1/users/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(this.loginData)
+        })
+
+        if (!response.ok) {
+          const error = await response.json()
+          this.error = error.detail || 'Login failed'
+          return
+        }
+
+        const data = await response.json()
+        this.authToken = data.access_token
+        this.user = data.user
+
+        // Store in localStorage or sessionStorage based on "Remember me"
+        const storage = this.rememberMe ? localStorage : sessionStorage
+        storage.setItem('authToken', this.authToken)
+        storage.setItem('user', JSON.stringify(this.user))
+
+        // Load lessons
+        await this.loadLessons()
+
+        this.loginData = { username: '', password: '' }
+      } catch (err) {
+        this.error = 'Network error. Please try again.'
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async logout() {
+      try {
+        await fetch(`${this.apiUrl}/api/v1/users/logout`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${this.authToken}`
+          }
+        })
+      } catch (err) {
+        console.error('Logout error:', err)
+      }
+
+      // Clear local data from both storages
+      this.user = null
+      this.authToken = null
+      this.lessons = []
+      this.currentView = 'lessons'
+      localStorage.removeItem('authToken')
+      localStorage.removeItem('user')
+      sessionStorage.removeItem('authToken')
+      sessionStorage.removeItem('user')
     },
+
+    async loadLessons() {
+      try {
+        const response = await fetch(`${this.apiUrl}/api/v1/lessons`)
+        this.lessons = await response.json()
+      } catch (err) {
+        console.error('Failed to load lessons:', err)
+      }
+    },
+
     selectLesson(lesson) {
       this.selectedLesson = lesson
+    },
+
+    updateUserPoints(newPoints) {
+      this.user.total_points = newPoints
+      // Update whichever storage is currently in use
+      const storage = localStorage.getItem('authToken') ? localStorage : sessionStorage
+      storage.setItem('user', JSON.stringify(this.user))
+    },
+
+    updateUserAvatar({ style, seed }) {
+      this.user.avatar_style = style
+      this.user.avatar_seed = seed
+      // Update whichever storage is currently in use
+      const storage = localStorage.getItem('authToken') ? localStorage : sessionStorage
+      storage.setItem('user', JSON.stringify(this.user))
+    },
+
+    getIdenticon(username) {
+      const emojis = ['😀', '😎', '🤓', '🥳', '🤩', '😇', '🥰', '😊', '🤗', '😺', '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵']
+      let hash = 0
+      for (let i = 0; i < username.length; i++) {
+        hash = username.charCodeAt(i) + ((hash << 5) - hash)
+      }
+      return emojis[Math.abs(hash) % emojis.length]
     }
   }
 }
@@ -122,23 +325,94 @@ export default {
   width: 100%;
   max-width: 1400px;
   margin-bottom: 40px;
+  flex-wrap: wrap;
+  gap: 20px;
 }
 .nav-bar h1 {
   font-size: 2.5rem;
   color: #1e40af;
 }
-.nav-bar ul {
+
+/* User Section in Nav */
+.nav-user-section {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  flex-wrap: wrap;
+}
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: white;
+  padding: 8px 16px;
+  border-radius: 25px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.identicon {
+  font-size: 1.5rem;
+}
+.user-details {
+  display: flex;
+  flex-direction: column;
+}
+.username {
+  font-weight: 700;
+  color: #1e40af;
+  font-size: 0.95rem;
+}
+.points {
+  font-size: 0.85rem;
+  color: #f59e0b;
+  font-weight: 600;
+}
+
+/* Nav Links */
+.nav-links {
   display: flex;
   gap: 25px;
   list-style: none;
+  align-items: center;
 }
-.nav-bar a {
+.nav-links a {
   text-decoration: none;
   color: #1e40af;
   font-weight: 600;
   transition: 0.3s;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 6px;
+}
+.nav-links a:hover {
+  color: #2563eb;
+  background: rgba(37, 99, 235, 0.1);
+}
+.nav-links a.active {
+  background: #2563eb;
+  color: white;
+}
+.logout-btn {
+  background: #ef4444 !important;
+  color: white !important;
+}
+.logout-btn:hover {
+  background: #dc2626 !important;
 }
-.nav-bar a:hover { color: #2563eb; }
 
 /* Main Content */
 .main-content {
@@ -156,6 +430,7 @@ export default {
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
+  margin: 0 auto;
 }
 .auth-box h2 { margin-bottom: 15px; color: #1e40af; }
 .auth-box input {
@@ -166,6 +441,7 @@ export default {
   border: 1px solid #ccc;
   font-size: 1rem;
   transition: 0.3s;
+  box-sizing: border-box;
 }
 .auth-box input:focus {
   border-color: #2563eb;
@@ -185,6 +461,66 @@ export default {
   transition: 0.3s;
 }
 .auth-box button:hover { background: linear-gradient(to right, #1e40af, #2563eb); }
+.auth-box button:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Remember Me Checkbox */
+.remember-me {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+.remember-me label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+.remember-me input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  margin: 0;
+  accent-color: #2563eb;
+}
+.remember-me span {
+  color: #374151;
+  font-size: 0.95rem;
+}
+
+/* Error and Success Messages */
+.error-message {
+  background: #fecaca;
+  color: #991b1b;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 15px;
+  border: 1px solid #fca5a5;
+  font-weight: 600;
+}
+.success-message {
+  background: #bbf7d0;
+  color: #166534;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 15px;
+  border: 1px solid #86efac;
+  font-weight: 600;
+}
+
+/* App Views */
+.app-views {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+.view-content {
+  width: 100%;
+}
 
 /* Lessons Grid */
 .lessons-grid {
@@ -243,14 +579,49 @@ footer {
 
 /* Tablet */
 @media (max-width: 768px) {
-  header h1 { font-size: 2rem; }
+  .nav-bar h1 { font-size: 2rem; }
+  .nav-user-section {
+    width: 100%;
+    justify-content: space-between;
+  }
+  .nav-links {
+    gap: 15px;
+    font-size: 0.9rem;
+  }
+  .nav-links a {
+    padding: 6px 10px;
+  }
   .auth-box { padding: 20px; }
   .auth-box input, .auth-box button { font-size: 0.95rem; }
 }
 
 /* Mobile */
 @media (max-width: 480px) {
-  header h1 { font-size: 1.8rem; }
+  .nav-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .nav-bar h1 {
+    font-size: 1.8rem;
+    text-align: center;
+  }
+  .nav-user-section {
+    flex-direction: column;
+    gap: 15px;
+  }
+  .user-info {
+    width: 100%;
+    justify-content: center;
+  }
+  .nav-links {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+  }
+  .nav-links a {
+    padding: 8px 12px;
+    font-size: 0.85rem;
+  }
   .auth-box input, .auth-box button { font-size: 0.9rem; padding: 10px; }
 }
 </style>
diff --git a/frontend/src/components/ProfileSettings.vue b/frontend/src/components/ProfileSettings.vue
new file mode 100644
index 0000000..a0562ed
--- /dev/null
+++ b/frontend/src/components/ProfileSettings.vue
@@ -0,0 +1,640 @@
+<template>
+  <div class="profile-settings">
+    <button class="back-button" @click="$emit('back')">← Back</button>
+
+    <div class="profile-header">
+      <div class="avatar-section">
+        <div class="avatar-large">
+          <img v-if="user.avatar_style && user.avatar_seed"
+               :src="`https://api.dicebear.com/7.x/${user.avatar_style}/svg?seed=${user.avatar_seed}`"
+               :alt="user.username" />
+          <div v-else class="identicon">{{ getIdenticon(user.username) }}</div>
+        </div>
+        <button @click="$emit('open-shop')" class="customize-btn">🎨 Customize Avatar</button>
+      </div>
+
+      <div class="user-info">
+        <h1>{{ user.username }}</h1>
+        <div class="stats-grid">
+          <div class="stat-box">
+            <span class="stat-value">💎 {{ user.total_points }}</span>
+            <span class="stat-label">Points</span>
+          </div>
+          <div class="stat-box">
+            <span class="stat-value">🏆 {{ achievementsCount }}</span>
+            <span class="stat-label">Achievements</span>
+          </div>
+          <div class="stat-box">
+            <span class="stat-value">📚 {{ lessonsCompleted }}</span>
+            <span class="stat-label">Lessons Done</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- API Keys Section -->
+    <div class="settings-section">
+      <h2>🔑 Developer API Keys</h2>
+      <p class="section-description">Create API keys to access your learning data from external applications.</p>
+
+      <div class="api-keys-list">
+        <div v-if="apiKeys.length === 0" class="empty-state">
+          <p>No API keys yet. Create one to get started!</p>
+        </div>
+
+        <div v-for="key in apiKeys" :key="key.id" class="api-key-card">
+          <div class="key-info">
+            <div class="key-header">
+              <h3>{{ key.name }}</h3>
+              <span :class="['status-badge', key.is_active ? 'active' : 'inactive']">
+                {{ key.is_active ? '✓ Active' : '✗ Revoked' }}
+              </span>
+            </div>
+            <div class="key-details">
+              <div class="key-value">
+                <code>{{ key.key }}</code>
+                <button @click="copyToClipboard(key.key)" class="copy-btn" title="Copy to clipboard">
+                  📋
+                </button>
+              </div>
+              <div class="key-meta">
+                <span>Created: {{ formatDate(key.created_at) }}</span>
+                <span v-if="key.last_used">Last used: {{ formatDate(key.last_used) }}</span>
+              </div>
+            </div>
+          </div>
+          <button
+            v-if="key.is_active"
+            @click="revokeKey(key.id)"
+            class="revoke-btn"
+            :disabled="revoking"
+          >
+            Revoke
+          </button>
+        </div>
+      </div>
+
+      <!-- Create New Key Form -->
+      <div class="create-key-form">
+        <h3>Create New API Key</h3>
+        <div class="form-row">
+          <input
+            v-model="newKeyName"
+            placeholder="Key name (e.g., 'My Mobile App')"
+            maxlength="50"
+            @keyup.enter="createApiKey"
+          />
+          <button @click="createApiKey" :disabled="!newKeyName || creating" class="create-btn">
+            {{ creating ? 'Creating...' : 'Create Key' }}
+          </button>
+        </div>
+      </div>
+
+      <!-- API Documentation Link -->
+      <div class="api-docs-box">
+        <h3>📚 API Documentation</h3>
+        <p>Learn how to use your API keys to build integrations.</p>
+        <div class="docs-links">
+          <a :href="`${apiUrl}/docs`" target="_blank" class="docs-link">
+            Interactive API Docs
+          </a>
+          <a href="https://github.com/yourusername/language-learning-web/blob/main/API_DOCUMENTATION.md" target="_blank" class="docs-link">
+            Full Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Notification -->
+    <div v-if="notification" :class="['notification', notification.type]">
+      {{ notification.message }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    user: {
+      type: Object,
+      required: true
+    },
+    authToken: {
+      type: String,
+      required: true
+    },
+    achievementsCount: {
+      type: Number,
+      default: 0
+    },
+    lessonsCompleted: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      apiKeys: [],
+      newKeyName: '',
+      creating: false,
+      revoking: false,
+      notification: null,
+      apiUrl: import.meta.env.VITE_API_URL || 'http://127.0.0.1:8000'
+    }
+  },
+  async mounted() {
+    await this.loadApiKeys()
+  },
+  methods: {
+    getIdenticon(username) {
+      // Generate emoji-based identicon from username
+      const emojis = ['😀', '😎', '🤓', '🥳', '🤩', '😇', '🥰', '😊', '🙂', '😋',
+                      '🤗', '🥺', '😺', '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻',
+                      '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🦄', '🌟',
+                      '⭐', '✨', '💫', '🔥', '💎', '🎨', '🎭', '🎪', '🎯', '🎲']
+
+      let hash = 0
+      for (let i = 0; i < username.length; i++) {
+        hash = username.charCodeAt(i) + ((hash << 5) - hash)
+      }
+      return emojis[Math.abs(hash) % emojis.length]
+    },
+    async loadApiKeys() {
+      try {
+        const response = await fetch(`${this.apiUrl}/api/v1/api-keys`, {
+          headers: {
+            'Authorization': `Bearer ${this.authToken}`
+          }
+        })
+        if (response.ok) {
+          this.apiKeys = await response.json()
+        }
+      } catch (error) {
+        console.error('Failed to load API keys:', error)
+      }
+    },
+    async createApiKey() {
+      if (!this.newKeyName) return
+
+      this.creating = true
+      try {
+        const response = await fetch(`${this.apiUrl}/api/v1/api-keys`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${this.authToken}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ name: this.newKeyName })
+        })
+
+        if (response.ok) {
+          const newKey = await response.json()
+          this.apiKeys.push(newKey)
+          this.newKeyName = ''
+          this.showNotification(`✓ API key "${newKey.name}" created!`, 'success')
+        } else {
+          this.showNotification('Failed to create API key', 'error')
+        }
+      } catch (error) {
+        this.showNotification('Failed to create API key', 'error')
+      } finally {
+        this.creating = false
+      }
+    },
+    async revokeKey(keyId) {
+      if (!confirm('Are you sure you want to revoke this API key? This cannot be undone.')) {
+        return
+      }
+
+      this.revoking = true
+      try {
+        const response = await fetch(`${this.apiUrl}/api/v1/api-keys/${keyId}`, {
+          method: 'DELETE',
+          headers: {
+            'Authorization': `Bearer ${this.authToken}`
+          }
+        })
+
+        if (response.ok) {
+          const key = this.apiKeys.find(k => k.id === keyId)
+          if (key) {
+            key.is_active = false
+          }
+          this.showNotification('✓ API key revoked', 'success')
+        } else {
+          this.showNotification('Failed to revoke API key', 'error')
+        }
+      } catch (error) {
+        this.showNotification('Failed to revoke API key', 'error')
+      } finally {
+        this.revoking = false
+      }
+    },
+    copyToClipboard(text) {
+      navigator.clipboard.writeText(text).then(() => {
+        this.showNotification('✓ API key copied to clipboard!', 'success')
+      })
+    },
+    formatDate(dateString) {
+      const date = new Date(dateString)
+      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
+    },
+    showNotification(message, type) {
+      this.notification = { message, type }
+      setTimeout(() => {
+        this.notification = null
+      }, 3000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.profile-settings {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.back-button {
+  background: none;
+  border: none;
+  color: #2563eb;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-bottom: 20px;
+  padding: 8px 0;
+  transition: 0.2s;
+}
+.back-button:hover {
+  color: #1d4ed8;
+}
+
+.profile-header {
+  background: white;
+  border-radius: 16px;
+  padding: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  gap: 30px;
+  margin-bottom: 30px;
+}
+
+.avatar-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+}
+
+.avatar-large {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+}
+
+.avatar-large img {
+  width: 130px;
+  height: 130px;
+}
+
+.identicon {
+  font-size: 5rem;
+}
+
+.customize-btn {
+  padding: 10px 20px;
+  border: none;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.customize-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.user-info {
+  flex: 1;
+}
+
+.user-info h1 {
+  color: #1e40af;
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+
+.stat-box {
+  background: #f3f4f6;
+  padding: 15px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #1e40af;
+}
+
+.stat-label {
+  font-size: 0.9rem;
+  color: #6b7280;
+}
+
+.settings-section {
+  background: white;
+  border-radius: 16px;
+  padding: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.settings-section h2 {
+  color: #1e40af;
+  font-size: 2rem;
+  margin-bottom: 10px;
+}
+
+.section-description {
+  color: #6b7280;
+  margin-bottom: 25px;
+}
+
+.api-keys-list {
+  margin-bottom: 30px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px;
+  color: #9ca3af;
+  font-style: italic;
+}
+
+.api-key-card {
+  background: #f9fafb;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 15px;
+}
+
+.key-info {
+  flex: 1;
+}
+
+.key-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.key-header h3 {
+  color: #1e40af;
+  font-size: 1.2rem;
+}
+
+.status-badge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.status-badge.active {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.status-badge.inactive {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.key-value {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.key-value code {
+  background: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+  color: #2563eb;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.copy-btn {
+  background: #e5e7eb;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: 0.2s;
+  font-size: 1.2rem;
+}
+
+.copy-btn:hover {
+  background: #d1d5db;
+}
+
+.key-meta {
+  display: flex;
+  gap: 20px;
+  font-size: 0.85rem;
+  color: #6b7280;
+}
+
+.revoke-btn {
+  padding: 10px 20px;
+  border: 2px solid #ef4444;
+  background: white;
+  color: #ef4444;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.revoke-btn:hover {
+  background: #ef4444;
+  color: white;
+}
+
+.create-key-form {
+  background: #f0f9ff;
+  padding: 25px;
+  border-radius: 12px;
+  margin-bottom: 25px;
+}
+
+.create-key-form h3 {
+  color: #1e40af;
+  margin-bottom: 15px;
+}
+
+.form-row {
+  display: flex;
+  gap: 10px;
+}
+
+.form-row input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: 0.3s;
+}
+
+.form-row input:focus {
+  outline: none;
+  border-color: #2563eb;
+}
+
+.create-btn {
+  padding: 12px 24px;
+  border: none;
+  background: linear-gradient(135deg, #2563eb, #1e40af);
+  color: white;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.create-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
+  transform: scale(1.05);
+}
+
+.create-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.api-docs-box {
+  background: #fffbeb;
+  padding: 20px;
+  border-radius: 12px;
+  border: 2px solid #fbbf24;
+}
+
+.api-docs-box h3 {
+  color: #92400e;
+  margin-bottom: 10px;
+}
+
+.api-docs-box p {
+  color: #78350f;
+  margin-bottom: 15px;
+}
+
+.docs-links {
+  display: flex;
+  gap: 10px;
+}
+
+.docs-link {
+  padding: 10px 20px;
+  background: white;
+  color: #92400e;
+  border: 2px solid #fbbf24;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 600;
+  transition: 0.3s;
+}
+
+.docs-link:hover {
+  background: #fbbf24;
+  color: white;
+}
+
+.notification {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  padding: 16px 24px;
+  border-radius: 12px;
+  font-weight: 600;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  animation: slideIn 0.3s ease;
+  z-index: 1000;
+}
+
+.notification.success {
+  background: #10b981;
+  color: white;
+}
+
+.notification.error {
+  background: #ef4444;
+  color: white;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(400px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .profile-header {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .api-key-card {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-row {
+    flex-direction: column;
+  }
+
+  .docs-links {
+    flex-direction: column;
+  }
+}
+</style>