diff --git a/frontend/src/app/user/my-courses/[courseId]/lessons/[lessonId]/page.tsx b/frontend/src/app/user/my-courses/[courseId]/lessons/[lessonId]/page.tsx
index f1a9261d..9b9e0eb9 100644
--- a/frontend/src/app/user/my-courses/[courseId]/lessons/[lessonId]/page.tsx
+++ b/frontend/src/app/user/my-courses/[courseId]/lessons/[lessonId]/page.tsx
@@ -360,7 +360,6 @@ export default function LessonDetailPage({ params }: PageProps) {
         console.warn('⚠️ Backend did not fully award exp, attempting direct user-service call...');
         try {
           await userApi.addExperience({ exp: awardedExp });
-          console.log('✅ Successfully awarded exp via fallback mechanism');
         } catch (fallbackError) {
           console.error('❌ Fallback exp award also failed:', fallbackError);
           showToast.error('Không thể cộng điểm kinh nghiệm. Vui lòng kiểm tra lại sau.');
@@ -761,16 +760,6 @@ export default function LessonDetailPage({ params }: PageProps) {
                   );
                 })}
               </div>
-
-              {nextLessonId && (
-                <button
-                  type="button"
-                  onClick={() => router.push(`/user/my-courses/${courseId}/lessons/${nextLessonId}`)}
-                  className="w-full px-3 py-2 rounded-lg bg-gradient-to-r from-orange-500 to-orange-600 text-white text-xs font-semibold hover:from-orange-600 hover:to-orange-700 shadow-sm transition-all"
-                >
-                  Bài tiếp theo →
-                </button>
-              )}
             </CardContent>
           </Card>
         </aside>
diff --git a/frontend/src/app/user/my-courses/page.tsx b/frontend/src/app/user/my-courses/page.tsx
index e971f821..5817d241 100644
--- a/frontend/src/app/user/my-courses/page.tsx
+++ b/frontend/src/app/user/my-courses/page.tsx
@@ -396,8 +396,10 @@ function MyCoursesContent() {
         </div>
       </div>
 
-      <div className="flex flex-wrap items-center gap-3 justify-between">
-        <div className="relative flex-1 min-w-[240px]">
+      {/* Mobile-friendly layout */}
+      <div className="flex flex-col gap-3">
+        {/* Search bar - full width on mobile */}
+        <div className="relative w-full">
           <input
             value={search}
             onChange={(e) => setSearch(e.target.value)}
@@ -409,8 +411,8 @@ function MyCoursesContent() {
           </svg>
         </div>
         
-        {/* View Mode Toggle */}
-        <div className="flex items-center gap-1 bg-gray-100 p-1 rounded-lg">
+        {/* View Mode Toggle - Hide on mobile */}
+        <div className="hidden md:flex items-center gap-1 bg-gray-100 p-1 rounded-lg self-end">
           <button
             onClick={() => setViewMode('grid')}
             className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
@@ -573,7 +575,7 @@ function MyCoursesContent() {
         )}
 
         {!loading && !error && (
-          <div className={viewMode === 'grid' ? 'grid gap-5 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr' : 'space-y-4'}>
+          <div className={viewMode === 'grid' ? 'grid gap-4 sm:gap-5 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr' : 'space-y-4'}>
             {remaining.map((course) => (
               <div
                 key={course.id}
@@ -583,7 +585,7 @@ function MyCoursesContent() {
               </div>
             ))}
             {remaining.length === 0 && courses.length > 0 && (
-              <div className="bg-white rounded-xl p-10 text-center border border-dashed border-gray-300 col-span-full">
+              <div className="bg-white rounded-xl p-8 sm:p-10 text-center border border-dashed border-gray-300 col-span-full">
                 <p className="text-gray-600">Không tìm thấy khóa học phù hợp với bộ lọc.</p>
                 <button
                   onClick={() => { setSearch(''); setLevelFilter('all'); setStatusFilter('all'); }}
@@ -594,7 +596,7 @@ function MyCoursesContent() {
               </div>
             )}
             {courses.length === 0 && (
-              <div className="bg-white rounded-xl p-12 text-center border border-dashed border-gray-300 col-span-full">
+              <div className="bg-white rounded-xl p-8 sm:p-12 text-center border border-dashed border-gray-300 col-span-full">
                 <svg className="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                 </svg>
diff --git a/frontend/src/app/user/my-quizzes/[quizId]/play/page.tsx b/frontend/src/app/user/my-quizzes/[quizId]/play/page.tsx
index 277dd2de..7b94b34e 100644
--- a/frontend/src/app/user/my-quizzes/[quizId]/play/page.tsx
+++ b/frontend/src/app/user/my-quizzes/[quizId]/play/page.tsx
@@ -98,6 +98,7 @@ export default function QuizPlayPage({ params }: PageProps) {
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const [timerFrozen, setTimerFrozen] = useState(false);
   const freezeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const isProcessingTimeout = useRef(false);
   
   // Power-ups
   const [powerUps, setPowerUps] = useState<PowerUp[]>([
@@ -193,10 +194,6 @@ export default function QuizPlayPage({ params }: PageProps) {
           const responseData = userInfoResp?.data as { Info?: { current_exp?: number; subscription?: number }; info?: { current_exp?: number; subscription?: number } } | undefined;
           // Try both Info (capital) and info (lowercase) for compatibility
           const userInfo = responseData?.Info || responseData?.info;
-          console.log('User info response:', responseData);
-          console.log('Extracted user info:', userInfo);
-          console.log('Current EXP:', userInfo?.current_exp);
-          console.log('Subscription:', userInfo?.subscription);
           
           const exp = userInfo?.current_exp || 0;
           const subscription = userInfo?.subscription || 0;
@@ -233,10 +230,22 @@ export default function QuizPlayPage({ params }: PageProps) {
   }, [quizId]);
 
   const handleTimeUp = useCallback(() => {
-    if (timerRef.current) clearInterval(timerRef.current);
+    // Prevent duplicate execution
+    if (isProcessingTimeout.current) {
+      return;
+    }
+    isProcessingTimeout.current = true;
+    
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
     
     const currentCard = quiz?.cards[currentIndex];
-    if (!currentCard) return;
+    if (!currentCard) {
+      isProcessingTimeout.current = false;
+      return;
+    }
 
     // Show toast after state updates to avoid setState in render
     setTimeout(() => {
@@ -257,6 +266,8 @@ export default function QuizPlayPage({ params }: PageProps) {
         // Auto submit on last question
         handleSubmit();
       }
+      // Reset flag after transition
+      isProcessingTimeout.current = false;
     }, 1500);
   }, [quiz, currentIndex, answers, timePerQuestion]);
 
@@ -266,9 +277,9 @@ export default function QuizPlayPage({ params }: PageProps) {
 
     timerRef.current = setInterval(() => {
       setTimeLeft((prev) => {
-        if (prev <= 0) {
-          // Time's up for this question
-          handleTimeUp();
+        if (prev <= 1) {
+          // Time's up for this question - use ref to avoid dependency issues
+          handleTimeUpRef.current();
           return 0;
         }
         
@@ -282,9 +293,12 @@ export default function QuizPlayPage({ params }: PageProps) {
     }, 1000);
 
     return () => {
-      if (timerRef.current) clearInterval(timerRef.current);
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
     };
-  }, [quiz, submitted, loading, currentIndex, timePerQuestion, handleTimeUp, timerFrozen]);
+  }, [quiz, submitted, loading, currentIndex, timePerQuestion, timerFrozen]);
 
   const handleTimeUpRef = useRef(handleTimeUp);
   useEffect(() => {
@@ -576,13 +590,11 @@ export default function QuizPlayPage({ params }: PageProps) {
       
       // Calculate average score for saving as previous_score
       const avgScore = quiz ? Math.round(actualTotalScore / quiz.cards.length) : 0;
-      console.log('Average score for quiz:', avgScore);
       
       // Update previous_score if this score is higher
       if (avgScore > (quiz.previous_score || 0)) {
         try {
           await quizApi.updatePreviousScore(quizId, avgScore);
-          console.log('Updated previous_score to:', avgScore);
         } catch (updateError) {
           console.error('Failed to update previous_score:', updateError);
           // Don't show error to user, just log it
@@ -618,10 +630,15 @@ export default function QuizPlayPage({ params }: PageProps) {
     setEliminatedOptions({});
     setShowHint({});
     setPowerUps(prev => prev.map(p => ({ ...p, usesLeft: p.maxUses, active: false })));
+    isProcessingTimeout.current = false;
     
     if (freezeTimeoutRef.current) {
       clearTimeout(freezeTimeoutRef.current);
     }
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
     
     // Reload to fetch fresh user EXP
     window.location.reload();
@@ -860,12 +877,12 @@ export default function QuizPlayPage({ params }: PageProps) {
         </div>
 
         {/* Power-ups */}
-        <div className="bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-gray-100">
-          <div className="flex items-center gap-2 mb-3">
-            <Zap className="w-4 h-4 text-purple-600" />
-            <h3 className="font-bold text-gray-900 text-sm">Items (EXP: {userExp})</h3>
+        <div className="bg-white/70 backdrop-blur-sm rounded-xl p-3 sm:p-4 shadow-sm border border-gray-100">
+          <div className="flex items-center gap-1.5 sm:gap-2 mb-2 sm:mb-3">
+            <Zap className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-purple-600" />
+            <h3 className="font-bold text-gray-900 text-xs sm:text-sm">Items (EXP: {userExp})</h3>
           </div>
-          <div className="flex gap-2 flex-wrap">
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-1.5 sm:gap-2">
             {powerUps.map((powerUp) => {
               const isActive = powerUp.active;
               const canUse = powerUp.usesLeft > 0 && userExp >= powerUp.cost;
@@ -883,7 +900,7 @@ export default function QuizPlayPage({ params }: PageProps) {
                   key={powerUp.id}
                   onClick={() => activatePowerUp(powerUp.id)}
                   disabled={!canUse || isActive}
-                  className={`group relative flex items-center gap-2 px-4 py-2.5 rounded-lg border-2 font-semibold text-sm transition-all ${
+                  className={`group relative flex flex-col lg:flex-row items-center justify-center lg:justify-start gap-1 sm:gap-1.5 lg:gap-2 px-2 sm:px-3 lg:px-4 py-2 sm:py-2.5 rounded-lg border-2 font-semibold text-[10px] sm:text-xs lg:text-sm transition-all ${
                     isActive
                       ? 'border-green-500 bg-green-50 text-green-700'
                       : canUse
@@ -892,11 +909,11 @@ export default function QuizPlayPage({ params }: PageProps) {
                   }`}
                   title={powerUp.description}
                 >
-                  <PowerUpIcon className="w-4 h-4" />
-                  <span>{powerUp.name}</span>
-                  <span className="text-xs opacity-75">({powerUp.usesLeft}/{powerUp.maxUses})</span>
+                  <PowerUpIcon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                  <span className="text-center lg:text-left leading-tight">{powerUp.name}</span>
+                  <span className="text-[9px] sm:text-xs opacity-75">({powerUp.usesLeft}/{powerUp.maxUses})</span>
                   {canUse && !isActive && (
-                    <span className="absolute -top-2 -right-2 bg-purple-600 text-white text-xs px-1.5 py-0.5 rounded-full">
+                    <span className="absolute -top-1.5 sm:-top-2 -right-1.5 sm:-right-2 bg-purple-600 text-white text-[9px] sm:text-xs px-1 sm:px-1.5 py-0.5 rounded-full">
                       -{powerUp.cost}
                     </span>
                   )}
diff --git a/frontend/src/app/user/my-quizzes/page.tsx b/frontend/src/app/user/my-quizzes/page.tsx
index 39785a05..a3b28b52 100644
--- a/frontend/src/app/user/my-quizzes/page.tsx
+++ b/frontend/src/app/user/my-quizzes/page.tsx
@@ -239,9 +239,9 @@ function MyQuizzesContent() {
 				</div>
 			</div>
 
-			<div className="space-y-6">
-				<div className="flex flex-col gap-4">
-					<div className="relative">
+			<div className="space-y-4 sm:space-y-6">
+				<div className="flex flex-col gap-3">
+					<div className="relative w-full">
 						<input
 							value={search}
 							onChange={(e) => setSearch(e.target.value)}
@@ -253,14 +253,14 @@ function MyQuizzesContent() {
 						</svg>
 					</div>
 
-					<div className="flex flex-wrap items-center justify-between gap-3">
-						<div className="flex flex-wrap items-center gap-3">
+					<div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
+						<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
 							<div className="flex items-center gap-2">
-								<label className="text-xs font-medium text-gray-500 uppercase tracking-wide">Độ khó</label>
+								<label className="text-xs font-medium text-gray-500 uppercase tracking-wide shrink-0">Độ khó</label>
 								<select
 									value={levelFilter}
 									onChange={(e) => setLevelFilter(e.target.value as LevelFilter)}
-									className="h-10 pl-3 pr-8 rounded-lg bg-white border border-gray-200 shadow-sm text-sm focus:ring-2 focus:ring-sky-500/40 focus:border-sky-400"
+									className="flex-1 sm:flex-initial h-10 pl-3 pr-8 rounded-lg bg-white border border-gray-200 shadow-sm text-sm focus:ring-2 focus:ring-sky-500/40 focus:border-sky-400"
 								>
 									<option value="all">Tất cả</option>
 									<option value="easy">Dễ</option>
@@ -270,12 +270,12 @@ function MyQuizzesContent() {
 							</div>
 
 							<div className="flex items-center gap-2">
-								<label className="text-xs font-medium text-gray-500 uppercase tracking-wide hidden sm:block">Sắp xếp</label>
-								<div className="relative">
+								<label className="text-xs font-medium text-gray-500 uppercase tracking-wide shrink-0">Sắp xếp</label>
+								<div className="relative flex-1 sm:flex-initial">
 									<select
 										value={sort}
 										onChange={(e) => setSort(e.target.value as SortOption)}
-										className="appearance-none h-10 pl-4 pr-10 rounded-lg bg-white border border-gray-200 shadow-sm text-sm focus:ring-2 focus:ring-sky-500/40 focus:border-sky-400 cursor-pointer"
+										className="appearance-none w-full h-10 pl-4 pr-10 rounded-lg bg-white border border-gray-200 shadow-sm text-sm focus:ring-2 focus:ring-sky-500/40 focus:border-sky-400 cursor-pointer"
 									>
 										<option value="latest">Mới nhất</option>
 										<option value="questions_desc">Số câu hỏi giảm dần</option>
@@ -318,8 +318,8 @@ function MyQuizzesContent() {
 
 				<div>
 					{paginatedQuizzes.length === 0 ? (
-						<div className="bg-white rounded-xl p-12 text-center border border-dashed border-gray-300">
-							<p className="text-gray-600 mb-4">
+						<div className="bg-white rounded-xl p-8 sm:p-12 text-center border border-dashed border-gray-300">
+							<p className="text-gray-600 mb-4 text-sm sm:text-base">
 								{filteredMy.length === 0 && (activeTab === 'my' ? myQuizzes : publicQuizzes).length === 0
 									? (activeTab === 'my' ? 'Bạn chưa có quiz nào.' : 'Chưa có quiz công khai nào.')
 									: 'Không tìm thấy quiz phù hợp.'}
@@ -335,7 +335,7 @@ function MyQuizzesContent() {
 						</div>
 					) : (
 						<>
-							<div className={viewMode === 'grid' ? 'grid gap-5 sm:grid-cols-2 lg:grid-cols-3' : 'space-y-4'}>
+							<div className={viewMode === 'grid' ? 'grid gap-4 sm:gap-5 md:grid-cols-2 lg:grid-cols-3' : 'space-y-4'}>
 								{paginatedQuizzes.map((quiz) => (
 									<QuizCard key={quiz.id || quiz.quiz_id} quiz={quiz} viewMode={viewMode} />
 								))}
diff --git a/frontend/src/app/user/ranking/page.tsx b/frontend/src/app/user/ranking/page.tsx
index 4d5ae52b..b7d87a0a 100644
--- a/frontend/src/app/user/ranking/page.tsx
+++ b/frontend/src/app/user/ranking/page.tsx
@@ -33,57 +33,57 @@ export default function RankingPage() {
     : 0;
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-cyan-50 via-blue-50 to-indigo-50 py-8 px-4">
+    <div className="min-h-screen bg-gradient-to-br from-cyan-50 via-blue-50 to-indigo-50 py-4 sm:py-6 md:py-8 px-3 sm:px-4">
       <div className="max-w-6xl mx-auto">
         {/* Header */}
-        <div className="mb-8 text-center">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">🏆 Bảng Xếp Hạng</h1>
-          <p className="text-gray-600">Xem thứ hạng của bạn trong cộng đồng học tập</p>
+        <div className="mb-6 sm:mb-8 text-center">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-2">🏆 Bảng Xếp Hạng</h1>
+          <p className="text-sm sm:text-base text-gray-600">Xem thứ hạng của bạn trong cộng đồng học tập</p>
         </div>
 
         {/* Loading State */}
         {loading && (
-          <div className="bg-white rounded-lg shadow p-8 text-center">
+          <div className="bg-white rounded-lg shadow p-6 sm:p-8 text-center">
             <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-600"></div>
-            <p className="mt-4 text-gray-600">Đang tải bảng xếp hạng...</p>
+            <p className="mt-4 text-sm sm:text-base text-gray-600">Đang tải bảng xếp hạng...</p>
           </div>
         )}
 
         {/* Current User Stats Card */}
         {!loading && user && (
-          <div className="mb-8 bg-gradient-to-br from-cyan-600 to-blue-700 rounded-2xl shadow-2xl p-6 text-white">
-            <div className="grid md:grid-cols-3 gap-6">
+          <div className="mb-6 sm:mb-8 bg-gradient-to-br from-cyan-600 to-blue-700 rounded-2xl shadow-2xl p-4 sm:p-6 text-white">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
               {/* User Info */}
-              <div className="md:col-span-1 flex flex-col items-center justify-center text-center border-r border-white/20">
-                <div className="text-6xl font-black mb-2">
+              <div className="md:col-span-1 flex flex-col items-center justify-center text-center md:border-r border-white/20 pb-4 md:pb-0">
+                <div className="text-4xl sm:text-5xl md:text-6xl font-black mb-2">
                   #{user.rank || '—'}
                 </div>
-                <div className="text-sm text-cyan-100">Thứ hạng của bạn</div>
-                <div className="mt-3 text-xs text-cyan-200">
+                <div className="text-xs sm:text-sm text-cyan-100">Thứ hạng của bạn</div>
+                <div className="mt-2 sm:mt-3 text-xs text-cyan-200">
                   trong {user.total_users || 0} người dùng
                 </div>
               </div>
 
               {/* Level & Exp Progress */}
-              <div className="md:col-span-2 space-y-4">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-xl font-bold">{user.name}</h3>
-                    <p className="text-sm text-cyan-100">{user.email}</p>
+              <div className="md:col-span-2 space-y-3 sm:space-y-4">
+                <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
+                  <div className="text-center sm:text-left">
+                    <h3 className="text-lg sm:text-xl font-bold">{user.name}</h3>
+                    <p className="text-xs sm:text-sm text-cyan-100">{user.email}</p>
                   </div>
                   <div className="bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2">
-                    <div className="text-2xl font-bold">Lv {user.level || 1}</div>
+                    <div className="text-xl sm:text-2xl font-bold">Lv {user.level || 1}</div>
                     <div className="text-xs text-cyan-100">Level</div>
                   </div>
                 </div>
 
                 {/* Progress Bar */}
                 <div className="space-y-2">
-                  <div className="flex items-center justify-between text-sm">
+                  <div className="flex items-center justify-between text-xs sm:text-sm">
                     <span>Tiến độ lên level</span>
                     <span className="font-semibold">{expPercent}%</span>
                   </div>
-                  <div className="h-4 bg-white/20 rounded-full overflow-hidden backdrop-blur-sm">
+                  <div className="h-3 sm:h-4 bg-white/20 rounded-full overflow-hidden backdrop-blur-sm">
                     <div 
                       className="h-full bg-gradient-to-r from-yellow-400 via-amber-400 to-orange-400 transition-all duration-500 rounded-full shadow-lg"
                       style={{ width: `${expPercent}%` }}
@@ -96,17 +96,17 @@ export default function RankingPage() {
                 </div>
 
                 {/* Quick Stats */}
-                <div className="grid grid-cols-3 gap-3 pt-2">
-                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 text-center">
-                    <div className="text-xl font-bold">{user.completed_courses || 0}</div>
+                <div className="grid grid-cols-3 gap-2 sm:gap-3 pt-2">
+                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3 text-center">
+                    <div className="text-lg sm:text-xl font-bold">{user.completed_courses || 0}</div>
                     <div className="text-xs text-cyan-100">Khóa học</div>
                   </div>
-                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 text-center">
-                    <div className="text-xl font-bold">{user.current_exp || 0}</div>
+                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3 text-center">
+                    <div className="text-lg sm:text-xl font-bold">{user.current_exp || 0}</div>
                     <div className="text-xs text-cyan-100">Kinh nghiệm</div>
                   </div>
-                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-3 text-center">
-                    <div className="text-xl font-bold">{user.total_lessons || 0}</div>
+                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3 text-center">
+                    <div className="text-lg sm:text-xl font-bold">{user.total_lessons || 0}</div>
                     <div className="text-xs text-cyan-100">Bài học</div>
                   </div>
                 </div>
@@ -117,45 +117,45 @@ export default function RankingPage() {
 
         {/* Competitor Comparison Widget */}
         {!loading && competitors && (
-          <div className="mb-6 bg-gradient-to-br from-orange-50 to-amber-50 rounded-2xl shadow-xl p-6 border-2 border-orange-200">
-            <div className="flex items-center gap-3 mb-4">
-              <Users className="w-6 h-6 text-orange-600" />
-              <h3 className="text-xl font-bold text-gray-900">Đối thủ xung quanh bạn</h3>
+          <div className="mb-4 sm:mb-6 bg-gradient-to-br from-orange-50 to-amber-50 rounded-2xl shadow-xl p-4 sm:p-6 border-2 border-orange-200">
+            <div className="flex items-center gap-2 sm:gap-3 mb-3 sm:mb-4">
+              <Users className="w-5 h-5 sm:w-6 sm:h-6 text-orange-600" />
+              <h3 className="text-lg sm:text-xl font-bold text-gray-900">Đối thủ xung quanh bạn</h3>
             </div>
-            <div className="space-y-3">
+            <div className="space-y-2 sm:space-y-3">
               {competitors.above && (
-                <div className="bg-white rounded-lg p-4 border-2 border-orange-200">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <div className="text-2xl font-black text-orange-600">#{competitors.above.rank}</div>
-                      <div>
-                        <div className="font-semibold text-gray-900">{competitors.above.name}</div>
-                        <div className="text-sm text-gray-600">Lv {competitors.above.level} • {(competitors.above.experience || 0).toLocaleString()} EXP</div>
+                <div className="bg-white rounded-lg p-3 sm:p-4 border-2 border-orange-200">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                      <div className="text-xl sm:text-2xl font-black text-orange-600 shrink-0">#{competitors.above.rank}</div>
+                      <div className="min-w-0 flex-1">
+                        <div className="font-semibold text-gray-900 truncate text-sm sm:text-base">{competitors.above.name}</div>
+                        <div className="text-xs sm:text-sm text-gray-600">Lv {competitors.above.level} • {(competitors.above.experience || 0).toLocaleString()} EXP</div>
                       </div>
                     </div>
-                    <TrendingUp className="w-5 h-5 text-orange-500" />
+                    <TrendingUp className="w-4 h-4 sm:w-5 sm:h-5 text-orange-500 shrink-0" />
                   </div>
                 </div>
               )}
-              <div className="bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg p-4 border-2 border-cyan-400 shadow-lg">
-                <div className="flex items-center justify-between text-white">
-                  <div className="flex items-center gap-3">
-                    <div className="text-2xl font-black">#{competitors.current.rank}</div>
-                    <div>
-                      <div className="font-bold text-lg">{competitors.current.name} (Bạn)</div>
-                      <div className="text-sm text-cyan-100">Lv {competitors.current.level} • {(competitors.current.experience || 0).toLocaleString()} EXP</div>
+              <div className="bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg p-3 sm:p-4 border-2 border-cyan-400 shadow-lg">
+                <div className="flex items-center justify-between text-white gap-2">
+                  <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                    <div className="text-xl sm:text-2xl font-black shrink-0">#{competitors.current.rank}</div>
+                    <div className="min-w-0 flex-1">
+                      <div className="font-bold text-base sm:text-lg truncate">{competitors.current.name} (Bạn)</div>
+                      <div className="text-xs sm:text-sm text-cyan-100">Lv {competitors.current.level} • {(competitors.current.experience || 0).toLocaleString()} EXP</div>
                     </div>
                   </div>
                 </div>
               </div>
               {competitors.below && (
-                <div className="bg-white rounded-lg p-4 border-2 border-gray-200">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <div className="text-2xl font-black text-gray-600">#{competitors.below.rank}</div>
-                      <div>
-                        <div className="font-semibold text-gray-900">{competitors.below.name}</div>
-                        <div className="text-sm text-gray-600">Lv {competitors.below.level} • {(competitors.below.experience || 0).toLocaleString()} EXP</div>
+                <div className="bg-white rounded-lg p-3 sm:p-4 border-2 border-gray-200">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                      <div className="text-xl sm:text-2xl font-black text-gray-600 shrink-0">#{competitors.below.rank}</div>
+                      <div className="min-w-0 flex-1">
+                        <div className="font-semibold text-gray-900 truncate text-sm sm:text-base">{competitors.below.name}</div>
+                        <div className="text-xs sm:text-sm text-gray-600">Lv {competitors.below.level} • {(competitors.below.experience || 0).toLocaleString()} EXP</div>
                       </div>
                     </div>
                   </div>
@@ -163,8 +163,8 @@ export default function RankingPage() {
               )}
             </div>
             {competitors.above && competitors.expGap > 0 && (
-              <div className="mt-4 bg-white rounded-lg p-4 border-l-4 border-orange-500">
-                <p className="text-sm text-gray-700">
+              <div className="mt-3 sm:mt-4 bg-white rounded-lg p-3 sm:p-4 border-l-4 border-orange-500">
+                <p className="text-xs sm:text-sm text-gray-700">
                   💪 <span className="font-semibold">Bạn chỉ còn cách {competitors.above.name} {competitors.expGap} EXP nữa thôi!</span> Học ngay 1 bài để vượt mặt nào!
                 </p>
               </div>
@@ -174,21 +174,21 @@ export default function RankingPage() {
 
         {/* Ranking Display */}
         {!loading && users.length > 0 && (
-          <div className="space-y-6">
+          <div className="space-y-4 sm:space-y-6">
             {/* Top 3 Podium */}
-            <div className="bg-white rounded-2xl shadow-xl p-6 sm:p-8 border-2 border-amber-200">
-              <div className="flex items-center justify-center gap-2 mb-6">
-                <span className="text-3xl">👑</span>
-                <h2 className="text-2xl font-bold text-gray-900">Top 3 Xuất Sắc</h2>
+            <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 md:p-8 border-2 border-amber-200">
+              <div className="flex items-center justify-center gap-2 mb-4 sm:mb-6">
+                <span className="text-2xl sm:text-3xl">👑</span>
+                <h2 className="text-xl sm:text-2xl font-bold text-gray-900">Top 3 Xuất Sắc</h2>
               </div>
               <Leaderboard top={users} />
             </div>
 
             {/* Full Ranking Table */}
-            <div className="bg-white rounded-2xl shadow-xl p-6 sm:p-8">
-              <div className="flex items-center justify-between mb-6">
-                <h2 className="text-2xl font-bold text-gray-900">📊 Bảng Xếp Hạng</h2>
-                <div className="text-sm text-gray-500">
+            <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 md:p-8">
+              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-4 mb-4 sm:mb-6">
+                <h2 className="text-xl sm:text-2xl font-bold text-gray-900">📊 Bảng Xếp Hạng</h2>
+                <div className="text-xs sm:text-sm text-gray-500">
                   Tổng: <span className="font-semibold text-gray-900">{users.length}</span> người
                 </div>
               </div>
@@ -196,12 +196,12 @@ export default function RankingPage() {
             </div>
 
             {/* Info Box */}
-            <div className="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl p-6 border border-blue-200">
-              <div className="flex items-start gap-4">
-                <div className="text-3xl">💡</div>
-                <div>
-                  <h3 className="font-semibold text-gray-900 mb-2">Cách tăng thứ hạng</h3>
-                  <ul className="text-sm text-gray-700 space-y-1">
+            <div className="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl p-4 sm:p-6 border border-blue-200">
+              <div className="flex items-start gap-3 sm:gap-4">
+                <div className="text-2xl sm:text-3xl shrink-0">💡</div>
+                <div className="min-w-0">
+                  <h3 className="font-semibold text-gray-900 mb-2 text-sm sm:text-base">Cách tăng thứ hạng</h3>
+                  <ul className="text-xs sm:text-sm text-gray-700 space-y-1">
                     <li>✅ Hoàn thành bài học và quiz để nhận EXP</li>
                     <li>🎯 Đạt điểm cao trong các bài kiểm tra</li>
                     <li>🔥 Duy trì streak học tập mỗi ngày</li>
diff --git a/frontend/src/app/user/tracking/page.tsx b/frontend/src/app/user/tracking/page.tsx
index f9066a86..3f8be2ff 100644
--- a/frontend/src/app/user/tracking/page.tsx
+++ b/frontend/src/app/user/tracking/page.tsx
@@ -73,6 +73,7 @@ function TrackingInner() {
           progress_percentage: typeof r.progress_percentage === 'number' ? r.progress_percentage : undefined,
           current_step: r.current_step ? String(r.current_step) : undefined,
           current_step_detail: r.current_step_detail ? String(r.current_step_detail) : undefined,
+          vectorized: r.vectorized !== undefined ? Boolean(r.vectorized) : undefined,
           plan_ready: r.plan_ready !== undefined ? Boolean(r.plan_ready) : undefined,
           questions_ready: r.questions_ready !== undefined ? Boolean(r.questions_ready) : undefined,
           title: r.title ? String(r.title) : undefined,
@@ -132,41 +133,41 @@ function TrackingInner() {
   };
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 py-8 space-y-6">
+    <div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-10 py-4 sm:py-6 md:py-8 space-y-4 sm:space-y-6">
       {/* Header */}
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="space-y-2">
+      <div className="flex flex-col gap-3 sm:gap-4">
+        <div className="space-y-1 sm:space-y-2">
           <div className="flex items-center gap-2">
-            <TrendingUp className="w-6 h-6 text-purple-500" />
-            <span className="text-sm font-medium text-purple-600 uppercase tracking-wide">
+            <TrendingUp className="w-5 h-5 sm:w-6 sm:h-6 text-purple-500" />
+            <span className="text-xs sm:text-sm font-medium text-purple-600 uppercase tracking-wide">
               Generation Tracking
             </span>
           </div>
-          <h1 className="text-3xl font-bold text-gray-900">Theo dõi tiến trình tạo nội dung</h1>
-          <p className="text-gray-600 max-w-2xl">
+          <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">Theo dõi tiến trình tạo nội dung</h1>
+          <p className="text-xs sm:text-sm md:text-base text-gray-600">
             Theo dõi chi tiết quá trình AI tạo khóa học và quiz tự động của bạn.
           </p>
         </div>
         
-        <div className="flex items-center gap-3">
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
           <Button 
             variant="outline" 
             onClick={handleRefresh} 
             disabled={loading}
-            className="border-gray-200"
+            className="border-gray-200 text-sm w-full sm:w-auto"
           >
             <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
             Làm mới
           </Button>
           {activeTab === 'courses' ? (
             <>
-              <Link href="/user/my-courses">
-                <Button variant="outline" className="border-gray-200">
+              <Link href="/user/my-courses" className="w-full sm:w-auto">
+                <Button variant="outline" className="border-gray-200 text-sm w-full">
                   Khóa học của tôi
                 </Button>
               </Link>
-              <Link href="/user/create-course">
-                <Button className="bg-orange-500 hover:bg-orange-600">
+              <Link href="/user/create-course" className="w-full sm:w-auto">
+                <Button className="bg-orange-500 hover:bg-orange-600 text-sm w-full">
                   <Plus className="w-4 h-4 mr-2" />
                   Tạo khóa học mới
                 </Button>
@@ -174,13 +175,13 @@ function TrackingInner() {
             </>
           ) : (
             <>
-              <Link href="/user/my-quizzes">
-                <Button variant="outline" className="border-gray-200">
+              <Link href="/user/my-quizzes" className="w-full sm:w-auto">
+                <Button variant="outline" className="border-gray-200 text-sm w-full">
                   Quiz của tôi
                 </Button>
               </Link>
-              <Link href="/user/create-quiz">
-                <Button className="bg-green-500 hover:bg-green-600">
+              <Link href="/user/create-quiz" className="w-full sm:w-auto">
+                <Button className="bg-green-500 hover:bg-green-600 text-sm w-full">
                   <Plus className="w-4 h-4 mr-2" />
                   Tạo Quiz mới
                 </Button>
@@ -191,10 +192,10 @@ function TrackingInner() {
       </div>
 
       {/* Tabs */}
-      <div className="flex items-center gap-2 border-b border-gray-200">
+      <div className="flex items-center gap-1 sm:gap-2 border-b border-gray-200 overflow-x-auto">
         <button
           onClick={() => handleTabChange('courses')}
-          className={`flex items-center gap-2 px-6 py-3 font-medium transition-all ${
+          className={`flex items-center gap-2 px-4 sm:px-6 py-2 sm:py-3 font-medium transition-all text-sm sm:text-base whitespace-nowrap ${
             activeTab === 'courses'
               ? 'text-orange-600 border-b-2 border-orange-600'
               : 'text-gray-600 hover:text-gray-900'
diff --git a/frontend/src/components/auth/SignInForm.tsx b/frontend/src/components/auth/SignInForm.tsx
index bed2ff69..ff9f0097 100644
--- a/frontend/src/components/auth/SignInForm.tsx
+++ b/frontend/src/components/auth/SignInForm.tsx
@@ -17,8 +17,8 @@ export default function SignInForm() {
       imageAlt="Login illustration"
       headerVariant="auth"
     >
-      <form className="space-y-4 sm:space-y-5" onSubmit={handleSubmit}>
-        <div className="space-y-2">
+      <form className="space-y-3 sm:space-y-4" onSubmit={handleSubmit}>
+        <div className="space-y-1.5">
           <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
           <input
             id="email"
@@ -27,11 +27,11 @@ export default function SignInForm() {
             placeholder="Nhập email"
             value={formData.email}
             onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-            className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm"
+            className="block w-full px-3 py-2.5 sm:py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500 text-sm"
           />
         </div>
 
-        <div className="space-y-2">
+        <div className="space-y-1.5">
           <label htmlFor="password" className="block text-sm font-medium text-gray-700">Mật Khẩu</label>
           <input
             id="password"
@@ -40,11 +40,11 @@ export default function SignInForm() {
             placeholder="Nhập mật khẩu"
             value={formData.password}
             onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-            className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500 sm:text-sm"
+            className="block w-full px-3 py-2.5 sm:py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500 text-sm"
           />
         </div>
 
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-sm">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-3 text-sm pt-1">
           <label className="flex items-center gap-2 text-muted-foreground cursor-pointer">
             <input
               type="checkbox"
@@ -57,7 +57,7 @@ export default function SignInForm() {
           <Link href="/auth/forgot-password" className="text-muted-foreground hover:text-primary transition-colors">Quên mật khẩu?</Link>
         </div>
 
-        <Button type="submit" disabled={loading} className="w-full bg-gray-900 hover:bg-gray-800 text-white" size="lg">
+        <Button type="submit" disabled={loading} className="w-full bg-gray-900 hover:bg-gray-800 text-white h-11 sm:h-12">
           {loading ? (
             <div className="flex items-center">
               <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
@@ -66,7 +66,7 @@ export default function SignInForm() {
           ) : 'Đăng Nhập →'}
         </Button>
 
-        <div className="relative my-6">
+        <div className="relative my-4 sm:my-6">
           <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-gray-200" /></div>
           <div className="relative flex justify-center text-sm"><span className="px-6 bg-white text-muted-foreground">Đăng Nhập Với</span></div>
         </div>
diff --git a/frontend/src/components/auth/SignUpForm.tsx b/frontend/src/components/auth/SignUpForm.tsx
index 98f3fbcd..38692b3e 100644
--- a/frontend/src/components/auth/SignUpForm.tsx
+++ b/frontend/src/components/auth/SignUpForm.tsx
@@ -124,23 +124,23 @@ export default function SignUpForm() {
       imageAlt="Signup illustration"
       headerVariant="auth"
     >
-      <form className="space-y-4 sm:space-y-5" onSubmit={handleSubmit}>
+      <form className="space-y-3 sm:space-y-4" onSubmit={handleSubmit}>
         <div>
-          <label htmlFor="email" className="block text-base font-medium text-gray-700 mb-3">
+          <label htmlFor="email" className="block text-sm sm:text-base font-medium text-gray-700 mb-2 sm:mb-3">
             Email
           </label>
           <input
             type="email"
             id="email"
             required
-            className="w-full border-b-2 border-gray-200 py-3 sm:py-4 bg-transparent focus:outline-none focus:border-[#F97316] transition-colors text-gray-900 placeholder-gray-400 text-base"
+            className="w-full border-b-2 border-gray-200 py-2.5 sm:py-3 bg-transparent focus:outline-none focus:border-[#F97316] transition-colors text-gray-900 placeholder-gray-400 text-sm sm:text-base"
             value={formData.email}
             onChange={(e) => setFormData({ ...formData, email: e.target.value })}
             placeholder="Nhập Email"
           />
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5">
           <div>
             <label htmlFor="password" className="block text-base font-medium text-gray-700 mb-3">
               Mật Khẩu
diff --git a/frontend/src/components/layout/AuthLayout.tsx b/frontend/src/components/layout/AuthLayout.tsx
index b736bb1e..299d336a 100644
--- a/frontend/src/components/layout/AuthLayout.tsx
+++ b/frontend/src/components/layout/AuthLayout.tsx
@@ -39,8 +39,8 @@ export default function AuthLayout({
       />
 
       {/* Main Content */}
-      <div className="flex-1 flex justify-center items-start px-4 sm:px-6 lg:px-10 pb-8 pt-4 sm:pt-16 lg:pt-20">
-        <div className="w-full max-w-6xl flex flex-col lg:flex-row items-start lg:items-center gap-6 lg:gap-12">
+      <div className="flex-1 flex justify-center items-start px-4 sm:px-6 lg:px-10 pb-8 pt-2 sm:pt-8 lg:pt-20">
+        <div className="w-full max-w-6xl flex flex-col lg:flex-row items-start lg:items-center gap-4 sm:gap-6 lg:gap-12">
           {/* Left side - Image */}
           <div className="hidden lg:flex lg:w-[48%] items-center justify-center bg-gray-50 rounded-2xl p-4 xl:p-6">
             <div className="w-full max-w-2xl">
@@ -57,19 +57,19 @@ export default function AuthLayout({
 
           {/* Right side - Content */}
           <div className="w-full lg:w-[52%] flex items-start lg:items-center justify-center">
-            <div className="w-full max-w-lg space-y-6 sm:space-y-8">
+            <div className="w-full max-w-lg space-y-4 sm:space-y-6">
               {/* Title and Subtitle */}
-            <div className="text-center space-y-2 sm:space-y-3">
-              <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900">
+            <div className="text-center space-y-1.5 sm:space-y-2">
+              <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 leading-tight">
                 {title}
               </h1>
-              <p className="text-gray-600 text-base sm:text-lg lg:text-xl leading-relaxed">
+              <p className="text-gray-600 text-sm sm:text-base lg:text-lg leading-relaxed">
                 {subtitle}
               </p>
             </div>
 
               {/* Children content (forms, buttons, etc.) */}
-              <div className="space-y-8">
+              <div className="space-y-6 sm:space-y-8">
                 {children}
               </div>
             </div>
diff --git a/frontend/src/components/user/Dashboard.tsx b/frontend/src/components/user/Dashboard.tsx
index cd04dee9..fa3329e8 100644
--- a/frontend/src/components/user/Dashboard.tsx
+++ b/frontend/src/components/user/Dashboard.tsx
@@ -71,35 +71,35 @@ export default function Dashboard({ onLogout }: DashboardProps) {
 
   return (
     <div className="p-3 sm:p-4 md:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-slate-50 via-gray-50 to-blue-50">
-      <div className="max-w-7xl mx-auto space-y-6">
+      <div className="max-w-7xl mx-auto space-y-4 sm:space-y-6">
         
         {/* Header Row */}
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 mb-4 sm:mb-6">
           <div className="flex-1">
-            <h1 className="text-3xl font-bold text-gray-900">
+            <h1 className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900">
               Xin chào, {user.given_name || user.name}! 👋
             </h1>
-            <div className="flex items-center gap-3 mt-1">
-              <p className="text-gray-600">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 mt-1">
+              <p className="text-sm sm:text-base text-gray-600">
                 {user.remind_time 
                   ? `Hẹn gặp bạn vào lúc ${user.remind_time} để học bài!` 
                   : 'Chào mừng trở lại hành trình học tập'}
               </p>
               <a 
                 href="/user/profile" 
-                className="text-xs text-blue-600 hover:text-blue-700 font-semibold hover:underline"
+                className="text-xs text-blue-600 hover:text-blue-700 font-semibold hover:underline inline-block"
               >
                 {user.remind_time ? 'Thay đổi giờ nhắc' : 'Cài đặt giờ nhắc'}
               </a>
             </div>
           </div>
           
-          {/* Redesigned Streak - No box */}
+          {/* Redesigned Streak - Responsive */}
           <div className="flex items-center gap-2">
             <svg 
               viewBox="0 0 24 24" 
               fill="currentColor"
-              className="text-orange-500 w-8 h-8 drop-shadow-lg"
+              className="text-orange-500 w-6 h-6 sm:w-8 sm:h-8 drop-shadow-lg"
               style={{ 
                 filter: (user?.streak ?? 0) > 10 ? 'drop-shadow(0 0 8px rgba(249, 115, 22, 0.5))' : 'none'
               }}
@@ -108,79 +108,79 @@ export default function Dashboard({ onLogout }: DashboardProps) {
             </svg>
             <div className="flex flex-col">
               <div className="flex items-baseline gap-1">
-                <span className="text-3xl font-black text-orange-600">{user?.streak ?? 0}</span>
-                <span className="text-sm text-orange-600 font-bold">ngày</span>
+                <span className="text-2xl sm:text-3xl font-black text-orange-600">{user?.streak ?? 0}</span>
+                <span className="text-xs sm:text-sm text-orange-600 font-bold">ngày</span>
               </div>
             </div>
           </div>
         </div>
 
         {/* Row 1: Profile & Stats */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
           <ProfileCard user={user} />
           
           {/* Stats */}
-          <div className="bg-white rounded-2xl shadow-xl p-6 border border-gray-200">
-            <h3 className="text-xl font-bold text-gray-900 mb-4">📊 Thống kê</h3>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="text-2xl">📚</div>
-                  <span className="text-sm font-semibold text-gray-700">Khóa học</span>
+          <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 border border-gray-200">
+            <h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4">📊 Thống kê</h3>
+            <div className="space-y-2 sm:space-y-3">
+              <div className="flex items-center justify-between p-2 sm:p-3 bg-blue-50 rounded-lg">
+                <div className="flex items-center gap-2 sm:gap-3">
+                  <div className="text-xl sm:text-2xl">📚</div>
+                  <span className="text-xs sm:text-sm font-semibold text-gray-700">Khóa học</span>
                 </div>
-                <span className="text-xl font-bold text-blue-600">{user.total_courses}</span>
+                <span className="text-lg sm:text-xl font-bold text-blue-600">{user.total_courses}</span>
               </div>
-              <div className="flex items-center justify-between p-3 bg-indigo-50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="text-2xl">📖</div>
-                  <span className="text-sm font-semibold text-gray-700">Bài học</span>
+              <div className="flex items-center justify-between p-2 sm:p-3 bg-indigo-50 rounded-lg">
+                <div className="flex items-center gap-2 sm:gap-3">
+                  <div className="text-xl sm:text-2xl">📖</div>
+                  <span className="text-xs sm:text-sm font-semibold text-gray-700">Bài học</span>
                 </div>
-                <span className="text-xl font-bold text-indigo-600">{user.total_lessons}</span>
+                <span className="text-lg sm:text-xl font-bold text-indigo-600">{user.total_lessons}</span>
               </div>
-              <div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="text-2xl">📝</div>
-                  <span className="text-sm font-semibold text-gray-700">Quiz đã làm</span>
+              <div className="flex items-center justify-between p-2 sm:p-3 bg-purple-50 rounded-lg">
+                <div className="flex items-center gap-2 sm:gap-3">
+                  <div className="text-xl sm:text-2xl">📝</div>
+                  <span className="text-xs sm:text-sm font-semibold text-gray-700">Quiz đã làm</span>
                 </div>
-                <span className="text-xl font-bold text-purple-600">{user.completed_quizzes}</span>
+                <span className="text-lg sm:text-xl font-bold text-purple-600">{user.completed_quizzes}</span>
               </div>
-              <div className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="text-2xl">🏆</div>
-                  <span className="text-sm font-semibold text-gray-700">Xếp hạng</span>
+              <div className="flex items-center justify-between p-2 sm:p-3 bg-yellow-50 rounded-lg">
+                <div className="flex items-center gap-2 sm:gap-3">
+                  <div className="text-xl sm:text-2xl">🏆</div>
+                  <span className="text-xs sm:text-sm font-semibold text-gray-700">Xếp hạng</span>
                 </div>
-                <span className="text-xl font-bold text-yellow-600">#{user.rank}</span>
+                <span className="text-lg sm:text-xl font-bold text-yellow-600">#{user.rank}</span>
               </div>
             </div>
           </div>
         </div>
 
         {/* Row 2: Continue Learning & Top Learners */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
           {/* Continue Learning */}
-          <div className="bg-white rounded-2xl shadow-xl p-6 border-2 border-blue-200">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-xl font-bold text-gray-900">🚀 Học tiếp</h3>
-              <span className="text-sm text-gray-600">Bài học đang học</span>
+          <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-6 border-2 border-blue-200">
+            <div className="flex items-center justify-between mb-3 sm:mb-4">
+              <h3 className="text-lg sm:text-xl font-bold text-gray-900">🚀 Học tiếp</h3>
+              <span className="text-xs sm:text-sm text-gray-600">Bài học đang học</span>
             </div>
             
             {user.total_courses > 0 ? (
-              <div className="space-y-4">
+              <div className="space-y-3 sm:space-y-4">
                 {/* Main Course Card */}
-                <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-5 border border-blue-200">
-                  <div className="flex items-center gap-4 mb-4">
-                    <div className="w-16 h-16 bg-blue-500 rounded-lg flex items-center justify-center text-white text-2xl">
+                <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-4 sm:p-5 border border-blue-200">
+                  <div className="flex items-center gap-3 sm:gap-4 mb-3 sm:mb-4">
+                    <div className="w-12 h-12 sm:w-16 sm:h-16 bg-blue-500 rounded-lg flex items-center justify-center text-white text-xl sm:text-2xl shrink-0">
                       📚
                     </div>
-                    <div className="flex-1">
-                      <h4 className="font-bold text-gray-900 mb-1">
+                    <div className="flex-1 min-w-0">
+                      <h4 className="font-bold text-gray-900 mb-1 text-sm sm:text-base">
                         Tiếp tục khóa học của bạn
                       </h4>
-                      <p className="text-sm text-gray-600">
+                      <p className="text-xs sm:text-sm text-gray-600">
                         Đã hoàn thành {user.completed_courses}/{user.total_courses} khóa học
                       </p>
                       <div className="mt-2 flex items-center gap-2">
-                        <div className="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
+                        <div className="flex-1 h-1.5 sm:h-2 bg-gray-200 rounded-full overflow-hidden">
                           <div 
                             className="h-full bg-gradient-to-r from-blue-500 to-cyan-500"
                             style={{ width: `${completionRate}%` }}
@@ -192,7 +192,7 @@ export default function Dashboard({ onLogout }: DashboardProps) {
                   </div>
                   <Link 
                     href="/user/my-courses" 
-                    className="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-colors"
+                    className="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 sm:py-3 rounded-lg transition-colors text-sm sm:text-base"
                   >
                     Xem khóa học của tôi →
                   </Link>
diff --git a/frontend/src/components/user/ProfilePage.tsx b/frontend/src/components/user/ProfilePage.tsx
index 5bb7f2d7..227fe032 100644
--- a/frontend/src/components/user/ProfilePage.tsx
+++ b/frontend/src/components/user/ProfilePage.tsx
@@ -193,20 +193,20 @@ export default function ProfilePage() {
   return (
     <>
       <div className="min-h-screen bg-[#f5f7fb]">
-        <div className="max-w-[1330px] mx-auto px-3 sm:px-6 md:px-8 py-6 sm:py-8 md:py-12">
-          <div className="bg-white/90 backdrop-blur rounded-2xl border border-gray-100 shadow-[0_8px_30px_rgba(15,23,42,0.05)] p-4 sm:p-6 md:p-8 lg:p-10">
-            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-6">
+        <div className="max-w-[1330px] mx-auto px-3 sm:px-4 md:px-6 lg:px-8 py-4 sm:py-6 md:py-8 lg:py-12">
+          <div className="bg-white/90 backdrop-blur rounded-xl sm:rounded-2xl border border-gray-100 shadow-[0_8px_30px_rgba(15,23,42,0.05)] p-3 sm:p-4 md:p-6 lg:p-8">
+            <div className="flex flex-col gap-2 sm:gap-3 mb-4 sm:mb-6">
               <div>
-                <h1 className="text-xl sm:text-2xl md:text-[26px] font-semibold text-gray-900 leading-tight">Thông Tin Hồ Sơ</h1>
+                <h1 className="text-lg sm:text-xl md:text-2xl font-semibold text-gray-900 leading-tight">Thông Tin Hồ Sơ</h1>
               </div>
             </div>
 
           {user && (
-            <div className="mb-6 sm:mb-8 grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-3 sm:gap-4">
+            <div className="mb-4 sm:mb-6 md:mb-8 grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-3 sm:gap-4">
               {/* Avatar section - shows first on mobile */}
               <div className="w-full lg:hidden flex justify-center">
-                <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-4 sm:p-6 flex flex-col items-center gap-3 sm:gap-4 w-full max-w-[280px]">
-                  <div className="w-full aspect-[1/1.02] min-h-[200px] sm:min-h-[240px] rounded-lg bg-gray-50/60 border border-dashed border-gray-200 relative">
+                <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3 sm:p-4 md:p-6 flex flex-col items-center gap-3 sm:gap-4 w-full max-w-[280px]">
+                  <div className="w-full aspect-[1/1.02] min-h-[180px] sm:min-h-[200px] md:min-h-[240px] rounded-lg bg-gray-50/60 border border-dashed border-gray-200 relative">
                     <ProfileAvatar user={user} uploading={uploading} avatarLoading={avatarLoading} avatarKey={avatarKey} onUpload={uploadAvatar} />
                     {!user && (
                       <div className="absolute inset-0 flex items-center justify-center text-xs text-gray-400">Đang tải ảnh...</div>
@@ -221,35 +221,36 @@ export default function ProfilePage() {
               </div>
 
               {/* Stats card */}
-              <div className="p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl bg-white border border-gray-100 shadow-sm text-gray-900 lg:col-span-1">
+              <div className="p-3 sm:p-4 md:p-5 lg:p-6 rounded-xl sm:rounded-2xl bg-white border border-gray-100 shadow-sm text-gray-900 lg:col-span-1">
                 <div className="flex items-center justify-between mb-3 sm:mb-4 gap-2">
                   <div>
-                    <p className="text-base sm:text-lg font-semibold text-gray-900">Hành trình của bạn</p>
+                    <p className="text-sm sm:text-base md:text-lg font-semibold text-gray-900">Hành trình của bạn</p>
                   </div>
-                  <div className="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm font-semibold text-gray-700">
-                    <div className="px-2 sm:px-3 py-1 rounded-full bg-gray-100 border border-gray-200">Rank #{user.rank ?? '—'}</div>
-                    <div className="px-2 sm:px-3 py-1 rounded-full bg-gray-100 border border-gray-200">Lv {user.level || 1}</div>
+                  <div className="flex items-center gap-1 sm:gap-1.5 md:gap-2 text-xs sm:text-sm font-semibold text-gray-700">
+                    <div className="px-1.5 sm:px-2 md:px-3 py-0.5 sm:py-1 rounded-full bg-gray-100 border border-gray-200 text-[10px] sm:text-xs">Rank #{user.rank ?? '—'}</div>
+                    <div className="px-1.5 sm:px-2 md:px-3 py-0.5 sm:py-1 rounded-full bg-gray-100 border border-gray-200 text-[10px] sm:text-xs">Lv {user.level || 1}</div>
                   </div>
                 </div>
-                <div className="h-3 w-full bg-gray-100 rounded-full overflow-hidden border border-gray-200">
+                <div className="h-2.5 sm:h-3 w-full bg-gray-100 rounded-full overflow-hidden border border-gray-200">
                   <div className="h-full bg-orange-500" style={{ width: `${expPercent}%` }} />
                 </div>
-                <div className="mt-2 flex justify-between text-xs text-gray-600">
+                <div className="mt-1.5 sm:mt-2 flex justify-between text-[10px] sm:text-xs text-gray-600">
                   <span>{currentExp} / {requireExp || 0} EXP</span>
-                  <span>Còn {remainingExp} EXP lên Lv {nextLevelLabel}</span>
+                  <span className="hidden sm:inline">Còn {remainingExp} EXP lên Lv {nextLevelLabel}</span>
+                  <span className="sm:hidden">{remainingExp} EXP</span>
                 </div>
-                <div className="mt-3 sm:mt-4 grid grid-cols-3 gap-2 sm:gap-3 text-xs sm:text-sm text-gray-800">
-                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
-                    <div className="text-[11px] text-gray-500">Khóa học</div>
-                    <div className="font-semibold text-gray-900">{courseCount}</div>
+                <div className="mt-3 sm:mt-4 grid grid-cols-3 gap-1.5 sm:gap-2 md:gap-3 text-xs sm:text-sm text-gray-800">
+                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-2 sm:px-3 py-1.5 sm:py-2">
+                    <div className="text-[10px] sm:text-[11px] text-gray-500">Khóa học</div>
+                    <div className="font-semibold text-gray-900 text-xs sm:text-sm">{courseCount}</div>
                   </div>
-                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
-                    <div className="text-[11px] text-gray-500">Bài học</div>
-                    <div className="font-semibold text-gray-900">{lessonCount}</div>
+                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-2 sm:px-3 py-1.5 sm:py-2">
+                    <div className="text-[10px] sm:text-[11px] text-gray-500">Bài học</div>
+                    <div className="font-semibold text-gray-900 text-xs sm:text-sm">{lessonCount}</div>
                   </div>
-                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
-                    <div className="text-[11px] text-gray-500">Khóa đã hoàn thành</div>
-                    <div className="font-semibold text-gray-900">{completedCourses}</div>
+                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-2 sm:px-3 py-1.5 sm:py-2">
+                    <div className="text-[10px] sm:text-[11px] text-gray-500 leading-tight">Khóa đã hoàn thành</div>
+                    <div className="font-semibold text-gray-900 text-xs sm:text-sm">{completedCourses}</div>
                   </div>
                 </div>
 
diff --git a/frontend/src/components/user/StudyTimeSetup.tsx b/frontend/src/components/user/StudyTimeSetup.tsx
index c9486573..71ff64e7 100644
--- a/frontend/src/components/user/StudyTimeSetup.tsx
+++ b/frontend/src/components/user/StudyTimeSetup.tsx
@@ -48,12 +48,8 @@ export default function StudyTimeSetup({ onComplete, onSkip }: StudyTimeSetupPro
         return;
       }
 
-      console.log('Setting reminder time:', selectedTime);
-
       const response = await api.user.setNotifyTime({ remind_time: selectedTime }) as NotifyTimeResponse;
 
-      console.log('Response:', response);
-
       if (response.status === 200) {
         // Mark setup as completed
         storage.set('study_time_setup_completed', 'true');
diff --git a/frontend/src/components/user/courses/CourseCard.tsx b/frontend/src/components/user/courses/CourseCard.tsx
index 3130909e..16d4ef0f 100644
--- a/frontend/src/components/user/courses/CourseCard.tsx
+++ b/frontend/src/components/user/courses/CourseCard.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Progress } from '@/components/ui/progress';
 import { User, Calendar, BookOpen, Clock } from 'lucide-react';
@@ -79,44 +79,34 @@ export function CourseCard({ course, onSelect, onOwnerClick }: CourseCardProps)
       onClick={() => onSelect?.(course)}
       onKeyDown={(e) => { if (onSelect && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onSelect(course); } }}
     >
-      <CardHeader className="pb-3">
-        <div className="flex items-start justify-between mb-2">
-          <div className="flex-1">
-            <CardTitle className="text-2xl font-bold mb-1 text-gray-900 group-hover:text-orange-600 transition-colors">
+      <CardHeader className="pb-3 p-4 sm:p-6">
+        <div className="flex flex-col sm:flex-row items-start justify-between mb-3 gap-2">
+          <div className="flex-1 w-full">
+            <CardTitle className="text-lg sm:text-xl font-bold text-gray-900 group-hover:text-orange-600 transition-colors leading-tight mb-1 line-clamp-1">
               {course.title}
             </CardTitle>
             {course.subtitle && (
-              <p className="text-sm text-gray-600 font-medium">{course.subtitle}</p>
+              <p className="text-xs sm:text-sm text-gray-600 font-medium">{course.subtitle}</p>
             )}
           </div>
-          {hasRecommendationScore && (
-            <Badge className="shrink-0 ml-2 border-amber-200 text-amber-700 bg-amber-50">
-              <svg className="w-3 h-3 mr-1 inline" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-              </svg>
-              {(course.recommendation_score * 100).toFixed(0)}% phù hợp
-            </Badge>
-          )}
-        </div>
-        <div className="flex items-start justify-between gap-3 mb-3">
-          <div className="flex-1 min-w-0">
-            <CardTitle className="text-xl font-bold text-gray-900 group-hover:text-orange-600 transition-colors leading-tight mb-2 truncate">
-              {course.title}
-            </CardTitle>
-            {course.subtitle && (
-              <CardDescription className="text-sm text-gray-600 font-medium">
-                {course.subtitle}
-              </CardDescription>
+          <div className="flex items-center gap-2 w-full sm:w-auto justify-between sm:justify-end">
+            <div className="text-left sm:text-right">
+              <div className="text-2xl sm:text-3xl font-bold text-orange-600">{course.progress}%</div>
+              <div className="text-xs text-gray-500 mt-0.5">hoàn thành</div>
+            </div>
+            {hasRecommendationScore && (
+              <Badge className="shrink-0 text-xs border-amber-200 text-amber-700 bg-amber-50">
+                <svg className="w-3 h-3 mr-1 inline" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                </svg>
+                {(course.recommendation_score * 100).toFixed(0)}%
+              </Badge>
             )}
           </div>
-          <div className="text-right shrink-0">
-            <div className="text-3xl font-bold text-orange-600">{course.progress}%</div>
-            <div className="text-xs text-gray-500 mt-0.5">hoàn thành</div>
-          </div>
         </div>
         
         {/* Meta Information */}
-        <div className="flex flex-wrap items-center gap-3 text-xs text-gray-600 pb-3 border-b border-gray-100">
+        <div className="flex flex-wrap items-center gap-2 sm:gap-3 text-xs text-gray-600 pb-3 border-b border-gray-100">
           <div className="flex items-center gap-1.5" title="Người tạo">
             <User className="w-3.5 h-3.5 text-blue-500" />
             {course.isPublic && course.ownerId && onOwnerClick ? (
@@ -144,9 +134,9 @@ export function CourseCard({ course, onSelect, onOwnerClick }: CourseCardProps)
         </div>
       </CardHeader>
       
-      <CardContent className="space-y-4">
+      <CardContent className="space-y-3 sm:space-y-4 p-4 sm:p-6">
         {/* Description */}
-        <p className="text-sm text-gray-700 leading-relaxed line-clamp-2 min-h-[2.5rem]">
+        <p className="text-xs sm:text-sm text-gray-700 leading-relaxed line-clamp-2 min-h-[2.5rem]">
           {course.description}
         </p>
         
diff --git a/frontend/src/components/user/create-course/CreateCourseWizard.tsx b/frontend/src/components/user/create-course/CreateCourseWizard.tsx
index 7d63a00e..bc74ebb3 100644
--- a/frontend/src/components/user/create-course/CreateCourseWizard.tsx
+++ b/frontend/src/components/user/create-course/CreateCourseWizard.tsx
@@ -152,7 +152,6 @@ export function CreateCourseWizard() {
   const validateMeta = (meta: CourseDraftState['meta']) => {
     const missing: string[] = [];
     if (!meta.userPosition.trim()) missing.push('Vị trí người học');
-    if (!meta.shortPrompt.trim()) missing.push('Prompt ngắn');
     if (!meta.courseLevel) missing.push('Trình độ khóa học');
     if (!meta.courseConstraint) missing.push('Văn phong khóa học');
     if (!meta.durationDays || meta.durationDays < 1) missing.push('Thời lượng (ngày)');
@@ -214,13 +213,9 @@ export function CreateCourseWizard() {
 
       if (resp?.status === 202 && isQueuedCreateResponse(data)) {
         const courseId = data.course_id || payload.id;
-        const messageId = data.sqs_message_id;
 
         showToast.success('Đã gửi yêu cầu tạo khóa học thành công!');
         setDraft((d) => ({ ...d, step: 4, courseId }));
-        if (courseId) {
-          console.log('Course submitted:', { courseId, messageId });
-        }
       } else if (data && isCourseResponse(data)) {
         setResult(data);
         setDraft((d) => ({ ...d, step: 4, courseId: payload.id }));
diff --git a/frontend/src/components/user/create-course/MetaStep.tsx b/frontend/src/components/user/create-course/MetaStep.tsx
index 82dc5ddc..30438c8d 100644
--- a/frontend/src/components/user/create-course/MetaStep.tsx
+++ b/frontend/src/components/user/create-course/MetaStep.tsx
@@ -46,7 +46,6 @@ export function MetaStep({ meta, onChange, onBack, onNext }: MetaStepProps) {
 
   const isValid = Boolean(
     meta.userPosition.trim() &&
-    meta.shortPrompt.trim() &&
     meta.durationDays >= 1 &&
     meta.courseLevel &&
     meta.courseConstraint
@@ -56,7 +55,7 @@ export function MetaStep({ meta, onChange, onBack, onNext }: MetaStepProps) {
     <div className="mx-auto max-w-3xl">
       <div className="text-center space-y-2">
         <h2 className="text-2xl font-semibold text-gray-900">Thông tin bắt buộc</h2>
-        <p className="text-sm text-gray-600">Nhập đủ Vị trí người học, Prompt ngắn, Thời lượng (ngày), Trình độ và Văn phong để multi-agent tạo khóa học chính xác.</p>
+        <p className="text-sm text-gray-600">Nhập đủ Vị trí người học, Thời lượng (ngày), Trình độ và Văn phong để multi-agent tạo khóa học chính xác.</p>
       </div>
 
       <div className="mt-10 space-y-6">
@@ -139,7 +138,7 @@ export function MetaStep({ meta, onChange, onBack, onNext }: MetaStepProps) {
 
         <div className="sm:col-span-2">
           <label htmlFor="shortPrompt" className="block text-sm font-medium text-gray-700 mb-1">
-            Prompt ngắn <span className="text-red-500">*</span>
+            Prompt ngắn
           </label>
           <textarea
             id="shortPrompt"
diff --git a/frontend/src/components/user/create-course/Stepper.tsx b/frontend/src/components/user/create-course/Stepper.tsx
index 5ff4c391..c4115362 100644
--- a/frontend/src/components/user/create-course/Stepper.tsx
+++ b/frontend/src/components/user/create-course/Stepper.tsx
@@ -30,7 +30,7 @@ export function Stepper({ current, onStepChange }: StepperProps) {
   const progress = (current - 1) / (steps.length - 1) * 100;
   return (
     <div className="relative">
-      <ol className="flex items-center text-sm font-medium">
+      <ol className="flex items-center text-xs sm:text-sm font-medium">
         {steps.map((s, i) => {
           const active = current === s.id;
             const complete = current > s.id;
@@ -40,12 +40,12 @@ export function Stepper({ current, onStepChange }: StepperProps) {
                   type="button"
                   disabled={!complete}
                   onClick={() => complete && onStepChange?.(s.id)}
-                  className={cn('flex items-center gap-2 py-4 px-4 transition-colors w-full justify-center select-none', active && 'text-orange-600', complete && 'text-green-600 hover:text-green-700', !complete && !active && 'text-gray-500')}
+                  className={cn('flex items-center gap-1.5 sm:gap-2 py-3 sm:py-4 px-2 sm:px-4 transition-colors w-full justify-center select-none', active && 'text-orange-600', complete && 'text-green-600 hover:text-green-700', !complete && !active && 'text-gray-500')}
                   aria-current={active ? 'step' : undefined}
                 >
-                  <div className={cn('w-8 h-8 rounded-full flex items-center justify-center border text-gray-500', active && 'border-orange-500 bg-orange-50 text-orange-600', complete && 'border-green-500 bg-green-50 text-green-600') }>
+                  <div className={cn('w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center border text-gray-500', active && 'border-orange-500 bg-orange-50 text-orange-600', complete && 'border-green-500 bg-green-50 text-green-600') }>
                     {complete ? (
-                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
+                      <svg className="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
                     ) : (
                       <Icon name={s.icon} />
                     )}
diff --git a/frontend/src/components/user/create-course/SuccessStep.tsx b/frontend/src/components/user/create-course/SuccessStep.tsx
index 48e8400d..56ca5292 100644
--- a/frontend/src/components/user/create-course/SuccessStep.tsx
+++ b/frontend/src/components/user/create-course/SuccessStep.tsx
@@ -117,14 +117,9 @@ export function SuccessStep({ draft, result, onRestart, onGoToCourses }: Success
   const fetchGenerationStatus = async () => {
     if (!courseId) return;
     try {
-      console.log('[SuccessStep] Fetching generation status for courseId:', courseId);
       const resp = await courseApi.getStatus(courseId);
-      console.log('[SuccessStep] API response:', resp);
       if (resp?.data?.body && typeof resp.data.body === 'object') {
-        console.log('[SuccessStep] Setting generation status:', resp.data.body);
         setGenerationStatus(resp.data.body as GenerationStatus);
-      } else {
-        console.log('[SuccessStep] No valid body in response');
       }
     } catch (error) {
       console.error('[SuccessStep] Failed to fetch generation status:', error);
diff --git a/frontend/src/components/user/dashboard/ActivityHeatmap.tsx b/frontend/src/components/user/dashboard/ActivityHeatmap.tsx
index df0a7fd2..e0bd8e60 100644
--- a/frontend/src/components/user/dashboard/ActivityHeatmap.tsx
+++ b/frontend/src/components/user/dashboard/ActivityHeatmap.tsx
@@ -10,21 +10,21 @@ interface ActivityHeatmapProps {
 export const ActivityHeatmap: React.FC<ActivityHeatmapProps> = ({ selectedYear, setSelectedYear, generateYearActivityData }) => {
   return (
     <Card className="md:col-span-2 bg-cyan-50 border border-cyan-200 overflow-hidden">
-      <CardHeader className="p-4 pb-2 flex flex-row items-start justify-between">
-        <CardTitle className="text-base text-gray-800">Hoạt động {selectedYear}</CardTitle>
+      <CardHeader className="p-3 sm:p-4 pb-2 flex flex-row items-start justify-between">
+        <CardTitle className="text-sm sm:text-base text-gray-800">Hoạt động {selectedYear}</CardTitle>
         <select
           value={selectedYear}
           onChange={(e) => setSelectedYear(+e.target.value)}
-          className="text-[11px] rounded-full border border-cyan-300 bg-white/80 text-gray-700 px-3 py-1 focus:outline-none focus:ring-2 focus:ring-cyan-400"
+          className="text-[10px] sm:text-[11px] rounded-full border border-cyan-300 bg-white/80 text-gray-700 px-2 sm:px-3 py-1 focus:outline-none focus:ring-2 focus:ring-cyan-400"
         >
           {[new Date().getFullYear(), new Date().getFullYear() - 1, new Date().getFullYear() - 2].map((y) => (
             <option key={y}>{y}</option>
           ))}
         </select>
       </CardHeader>
-      <CardContent className="px-4 pt-0 pb-4">
-        <div className="space-y-2">
-          <div className="flex text-[10px] text-gray-600 mb-1 px-px select-none">
+      <CardContent className="px-3 sm:px-4 pt-0 pb-3 sm:pb-4">
+        <div className="space-y-1.5 sm:space-y-2">
+          <div className="flex text-[9px] sm:text-[10px] text-gray-600 mb-1 px-px select-none">
             {['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].map(m => (
               <div key={m} className="flex-1 text-center font-medium tracking-wide">{m}</div>
             ))}
diff --git a/frontend/src/components/user/dashboard/Leaderboard.tsx b/frontend/src/components/user/dashboard/Leaderboard.tsx
index 8e3a5c36..28224479 100644
--- a/frontend/src/components/user/dashboard/Leaderboard.tsx
+++ b/frontend/src/components/user/dashboard/Leaderboard.tsx
@@ -89,15 +89,15 @@ export const LeaderboardTable: React.FC<{ users: LeaderboardUser[]; currentUserI
   
   return (
   <div className="rounded-xl border bg-white -mx-1 sm:mx-0 overflow-x-auto">
-    <table className="w-full text-sm">
-      <thead className="bg-gradient-to-r from-gray-50 to-gray-100 text-xs uppercase text-gray-700">
+    <table className="w-full text-xs sm:text-sm">
+      <thead className="bg-gradient-to-r from-gray-50 to-gray-100 text-[10px] sm:text-xs uppercase text-gray-700">
         <tr>
-          <th className="py-3 px-3 text-left font-semibold">Hạng</th>
-          <th className="py-3 px-3 text-left font-semibold w-12"></th>
-          <th className="py-3 px-3 text-left font-semibold">Người dùng</th>
-          <th className="py-3 px-3 text-left font-semibold">Cấp độ</th>
-          <th className="py-3 px-3 text-right font-semibold">Tổng EXP</th>
-          <th className="py-3 px-3 text-center font-semibold">Huy hiệu</th>
+          <th className="py-2 sm:py-3 px-2 sm:px-3 text-left font-semibold">Hạng</th>
+          <th className="py-2 sm:py-3 px-2 sm:px-3 text-left font-semibold w-10 sm:w-12 hidden sm:table-cell"></th>
+          <th className="py-2 sm:py-3 px-2 sm:px-3 text-left font-semibold">Người dùng</th>
+          <th className="py-2 sm:py-3 px-2 sm:px-3 text-left font-semibold">Level</th>
+          <th className="py-2 sm:py-3 px-2 sm:px-3 text-right font-semibold">EXP</th>
+          <th className="py-2 sm:py-3 px-2 sm:px-3 text-center font-semibold hidden md:table-cell">Huy hiệu</th>
         </tr>
       </thead>
       <tbody className="divide-y divide-gray-100">
@@ -105,23 +105,23 @@ export const LeaderboardTable: React.FC<{ users: LeaderboardUser[]; currentUserI
           const badges = getBadges(u);
           const isCurrentUser = currentUserId && u.id === currentUserId;
           return (
-          <tr key={u.rank} className={`hover:bg-blue-50 transition-colors ${isCurrentUser ? 'bg-cyan-50 border-l-4 border-cyan-500' : ''}`}>
-            <td className="py-3 px-3 font-bold text-gray-900">#{u.rank}</td>
-            <td className="py-3 px-3"><Avatar user={u} size={36} displayName={u.name} showInitialsFallback className="shadow-sm" cacheKey={u.avatarKey ?? u.id} /></td>
-            <td className="py-3 px-3">
-              <div className="font-semibold text-gray-900">{u.name}</div>
-              {isCurrentUser && <span className="text-xs text-cyan-600 font-medium">(Bạn)</span>}
+          <tr key={u.rank} className={`hover:bg-blue-50 transition-colors ${isCurrentUser ? 'bg-cyan-50 border-l-2 sm:border-l-4 border-cyan-500' : ''}`}>
+            <td className="py-2 sm:py-3 px-2 sm:px-3 font-bold text-gray-900">#{u.rank}</td>
+            <td className="py-2 sm:py-3 px-2 sm:px-3 hidden sm:table-cell"><Avatar user={u} size={36} displayName={u.name} showInitialsFallback className="shadow-sm" cacheKey={u.avatarKey ?? u.id} /></td>
+            <td className="py-2 sm:py-3 px-2 sm:px-3">
+              <div className="font-semibold text-gray-900 truncate max-w-[120px] sm:max-w-none">{u.name}</div>
+              {isCurrentUser && <span className="text-[10px] sm:text-xs text-cyan-600 font-medium">(Bạn)</span>}
             </td>
-            <td className="py-3 px-3">
-              <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-violet-500 to-purple-500 text-white shadow-sm">
+            <td className="py-2 sm:py-3 px-2 sm:px-3">
+              <span className="inline-flex items-center px-1.5 sm:px-2.5 py-0.5 sm:py-1 rounded-full text-[10px] sm:text-xs font-bold bg-gradient-to-r from-violet-500 to-purple-500 text-white shadow-sm">
                 Lv {u.level}
               </span>
             </td>
-            <td className="py-3 px-3 text-right">
+            <td className="py-2 sm:py-3 px-2 sm:px-3 text-right">
               <span className="font-semibold text-gray-900">{(u.experience || 0).toLocaleString()}</span>
-              <span className="text-xs text-gray-500 ml-1">EXP</span>
+              <span className="text-[10px] sm:text-xs text-gray-500 ml-0.5 sm:ml-1 hidden sm:inline">EXP</span>
             </td>
-            <td className="py-3 px-3">
+            <td className="py-2 sm:py-3 px-2 sm:px-3 hidden md:table-cell">
               <div className="flex gap-1 justify-center">
                 {badges.slice(0, 3).map((badge, idx) => (
                   <div key={idx} className="group relative">
diff --git a/frontend/src/components/user/dashboard/ProfileCard.tsx b/frontend/src/components/user/dashboard/ProfileCard.tsx
index 9c92ebdb..09b0078d 100644
--- a/frontend/src/components/user/dashboard/ProfileCard.tsx
+++ b/frontend/src/components/user/dashboard/ProfileCard.tsx
@@ -13,19 +13,19 @@ export const ProfileCard: React.FC<{ user: UserProfile }> = ({ user }) => {
   
   return (
     <Card className="bg-white border border-gray-200 shadow-lg">
-      <CardContent className="p-6">
+      <CardContent className="p-4 sm:p-6">
         <div className="flex flex-col items-center text-center">
           <Avatar 
             user={user} 
             size={80} 
             displayName={user.name} 
             showInitialsFallback 
-            className="ring-4 ring-blue-400/30 mb-4" 
+            className="ring-4 ring-blue-400/30 mb-3 sm:mb-4" 
             cacheKey={user.avatarKey} 
             priority 
           />
-          <h2 className="text-xl font-bold text-gray-900 mb-1">{user.name}</h2>
-          <p className="text-sm text-gray-600 mb-4">{user.email}</p>
+          <h2 className="text-lg sm:text-xl font-bold text-gray-900 mb-1">{user.name}</h2>
+          <p className="text-xs sm:text-sm text-gray-600 mb-3 sm:mb-4 truncate max-w-full">{user.email}</p>
           
           {/* Level Badge */}
           <div className="bg-gradient-to-r from-purple-500 to-indigo-600 text-white rounded-full px-4 py-2 mb-4 shadow-md">
diff --git a/frontend/src/components/user/dashboard/StatsGrid.tsx b/frontend/src/components/user/dashboard/StatsGrid.tsx
index 888ce8bb..9a844195 100644
--- a/frontend/src/components/user/dashboard/StatsGrid.tsx
+++ b/frontend/src/components/user/dashboard/StatsGrid.tsx
@@ -3,13 +3,6 @@ import { UserProfile } from './types';
 
 interface StatDef { label: string; value: number | string; color: string; icon: React.ReactNode }
 export const StatsGrid: React.FC<{ user: UserProfile }> = ({ user }) => {
-  console.log('📊 StatsGrid received user:', {
-    total_courses: user.total_courses,
-    completed_courses: user.completed_courses,
-    total_lessons: user.total_lessons,
-    total_quizzes: user.total_quizzes,
-  });
-  
   const totalCourses = user.total_courses || 0;
   const completedCourses = user.completed_courses || 0;
   const totalQuizzes = user.total_quizzes || 0;
@@ -28,15 +21,15 @@ export const StatsGrid: React.FC<{ user: UserProfile }> = ({ user }) => {
     { label: 'Tổng Số Người Dùng', value: totalUsers, color: 'bg-slate-100 text-slate-700', icon: (<svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 21v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2M13 7a4 4 0 11-8 0 4 4 0 018 0M21 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>) },
   ];
   return (
-    <div className="grid gap-4 md:gap-5 grid-cols-2 sm:grid-cols-3 xl:grid-cols-4">
+    <div className="grid gap-3 md:gap-4 lg:gap-5 grid-cols-2 sm:grid-cols-3 xl:grid-cols-4">
       {stats.map(stat => (
-        <div key={stat.label} className="bg-white rounded-lg border flex items-center gap-4 p-4 shadow-sm hover:shadow transition">
-          <div className={`w-12 h-12 rounded-md flex items-center justify-center ${stat.color}/10 ${stat.color.split(' ')[1]} font-medium`}>
+        <div key={stat.label} className="bg-white rounded-lg border flex items-center gap-2 sm:gap-3 md:gap-4 p-3 sm:p-4 shadow-sm hover:shadow transition">
+          <div className={`w-9 h-9 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded-md flex items-center justify-center ${stat.color}/10 ${stat.color.split(' ')[1]} font-medium shrink-0`}>
             <span className={stat.color}>{stat.icon}</span>
           </div>
-          <div className="min-w-0">
-            <div className="text-xl font-semibold leading-none tracking-tight truncate">{stat.value}</div>
-            <p className="mt-1 text-[11px] font-medium text-gray-500 uppercase tracking-wide">{stat.label}</p>
+          <div className="min-w-0 flex-1">
+            <div className="text-base sm:text-lg md:text-xl font-semibold leading-none tracking-tight truncate">{stat.value}</div>
+            <p className="mt-1 text-[10px] sm:text-[11px] font-medium text-gray-500 uppercase tracking-wide line-clamp-2">{stat.label}</p>
           </div>
         </div>
       ))}
diff --git a/frontend/src/components/user/generation/GenerationCard.tsx b/frontend/src/components/user/generation/GenerationCard.tsx
index e5c9c8a9..8b7dfb25 100644
--- a/frontend/src/components/user/generation/GenerationCard.tsx
+++ b/frontend/src/components/user/generation/GenerationCard.tsx
@@ -11,21 +11,23 @@ export type GenerationItem = {
   progress?: string;
   title_ready?: boolean;
   lessons_ready?: boolean;
+  tests_ready?: boolean;
   final_ready?: boolean;
   vectorized?: boolean;
   lessons_count?: number;
   lessons_planned?: number;
   roadmap_count?: number;
+  tests_count?: number;
   final_count?: number;
   updated_at?: string;
 };
 
 function getGenerationStatus(item: GenerationItem) {
   const steps = [
-    { key: 'vectorized', label: 'Docs', done: item.vectorized, count: null },
-    { key: 'title_ready', label: 'Plan', done: item.title_ready, count: item.roadmap_count },
-    { key: 'lesson_planned', label: 'L.Plan', done: item.title_ready && item.lessons_planned, count: item.lessons_planned },
-    { key: 'lessons_ready', label: 'Lessons', done: item.lessons_ready, count: item.lessons_count },
+    { key: 'vectorized', label: 'Vectorized', done: Boolean(item.vectorized), count: null },
+    { key: 'title_ready', label: 'Plan', done: Boolean(item.title_ready), count: item.roadmap_count },
+    { key: 'lessons_ready', label: 'Lessons', done: Boolean(item.lessons_ready), count: item.lessons_count },
+    { key: 'tests_ready', label: 'Tests', done: Boolean(item.tests_ready), count: item.tests_count },
   ];
   
   const completedSteps = steps.filter(s => s.done).length;
@@ -104,15 +106,15 @@ export default function GenerationCard({
 
   return (
     <Card 
-      className="group p-6 hover:shadow-xl transition-all duration-300 border-gray-200 cursor-pointer hover:border-orange-300 bg-white h-full flex flex-col"
+      className="group p-4 sm:p-6 hover:shadow-xl transition-all duration-300 border-gray-200 cursor-pointer hover:border-orange-300 bg-white h-full flex flex-col"
       onClick={onClick}
     >
-      <div className="space-y-4 flex-1 flex flex-col">
+      <div className="space-y-3 sm:space-y-4 flex-1 flex flex-col">
         {/* Header with Status Badge */}
-        <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start justify-between gap-2 sm:gap-3">
           <div className="flex-1 min-w-0">
             <h3 
-              className="font-bold text-lg text-gray-900 group-hover:text-orange-600 transition-colors leading-tight mb-1 line-clamp-2" 
+              className="font-bold text-base sm:text-lg text-gray-900 group-hover:text-orange-600 transition-colors leading-tight mb-1 line-clamp-1" 
               title={item.title}
             >
               {displayTitle}
@@ -198,17 +200,17 @@ export default function GenerationCard({
         )}
 
         {/* Todo List Style Steps */}
-        <div className="grid grid-cols-4 gap-3">
+        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-4 gap-2 sm:gap-3 md:gap-4">
           {status.steps.map((step) => (
-            <div key={step.key} className="flex flex-col items-center gap-1.5">
-              <div className={`w-10 h-10 rounded-full flex items-center justify-center text-xs font-semibold transition-all ${
+            <div key={step.key} className="flex flex-col items-center gap-1 sm:gap-1.5">
+              <div className={`w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-full flex items-center justify-center text-xs font-semibold transition-all ${
                 step.done 
                   ? 'bg-green-500 text-white shadow-md scale-105' 
                   : 'bg-gray-200 text-gray-600'
               }`}>
-                {step.done ? <CheckCircle className="w-5 h-5" /> : <Clock className="w-4 h-4" />}
+                {step.done ? <CheckCircle className="w-4 h-4 sm:w-5 sm:h-5" /> : <Clock className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
               </div>
-              <span className={`text-xs text-center leading-tight whitespace-nowrap ${
+              <span className={`text-[10px] sm:text-xs text-center leading-tight whitespace-nowrap ${
                 step.done ? 'text-green-700 font-medium' : 'text-gray-600'
               }`}>
                 {step.label}
diff --git a/frontend/src/components/user/generation/GenerationDetailModal.tsx b/frontend/src/components/user/generation/GenerationDetailModal.tsx
index 6df10894..c0996d3e 100644
--- a/frontend/src/components/user/generation/GenerationDetailModal.tsx
+++ b/frontend/src/components/user/generation/GenerationDetailModal.tsx
@@ -15,30 +15,30 @@ function getDetailedStatus(item: GenerationItem) {
     { 
       key: 'vectorized', 
       label: 'Phân tích tài liệu', 
-      done: item.vectorized,
+      done: Boolean(item.vectorized),
       description: 'Vectorize và index tài liệu vào OpenSearch',
       count: null
     },
     { 
       key: 'title_ready', 
       label: 'Tạo kế hoạch khóa học', 
-      done: item.title_ready,
+      done: Boolean(item.title_ready),
       description: 'Sinh tiêu đề, mô tả và roadmap học tập',
       count: item.roadmap_count
     },
     { 
-      key: 'lesson_planned', 
+      key: 'lessons_ready', 
       label: 'Lập kế hoạch bài học', 
-      done: item.title_ready && item.lessons_planned,
-      description: `Xác định số lượng bài học cần tạo${item.lessons_planned ? ` (${item.lessons_planned} bài)` : ''}`,
-      count: item.lessons_planned
+      done: Boolean(item.lessons_ready),
+      description: `Xác định số lượng bài học cần tạo${item.lessons_count ? ` (${item.lessons_count} bài)` : ''}`,
+      count: item.lessons_count
     },
     { 
-      key: 'lessons_ready', 
+      key: 'tests_ready', 
       label: 'Tạo nội dung bài học', 
-      done: item.lessons_ready,
-      description: `Sinh nội dung chi tiết cho từng bài học${item.lessons_count ? ` (${item.lessons_count}/${item.lessons_planned || 0} bài hoàn thành)` : ''}`,
-      count: item.lessons_count
+      done: Boolean(item.tests_ready),
+      description: `Sinh nội dung chi tiết cho từng bài học${item.lessons_count ? ` (${item.lessons_count} bài hoàn thành)` : ''}`,
+      count: null
     },
   ];
   
diff --git a/frontend/src/components/user/quiz-generation/QuizGenerationCard.tsx b/frontend/src/components/user/quiz-generation/QuizGenerationCard.tsx
index 443a35ef..7dd38ff3 100644
--- a/frontend/src/components/user/quiz-generation/QuizGenerationCard.tsx
+++ b/frontend/src/components/user/quiz-generation/QuizGenerationCard.tsx
@@ -12,15 +12,21 @@ export interface QuizGenerationCardProps {
 function getQuizStatus(item: QuizGenerationItem) {
   const steps = [
     { 
-      key: 'plan', 
+      key: 'vectorized', 
+      label: 'Vectorized', 
+      done: Boolean(item.vectorized),
+      count: null
+    },
+    { 
+      key: 'plan_ready', 
       label: 'Plan', 
-      done: item.plan_ready ?? item.title_ready ?? false,
+      done: Boolean(item.plan_ready),
       count: item.ideas_count
     },
     { 
-      key: 'questions', 
+      key: 'questions_ready', 
       label: 'Questions', 
-      done: item.questions_ready ?? item.cards_ready ?? false,
+      done: Boolean(item.questions_ready),
       count: item.questions_count
     },
   ];
@@ -31,7 +37,7 @@ function getQuizStatus(item: QuizGenerationItem) {
   const progressPercent = item.progress_percentage ?? (completedSteps / steps.length) * 100;
   
   let overallStatus: 'done' | 'processing' | 'error' = 'processing';
-  if (isComplete) {
+  if (isComplete || item.final_ready === true) {
     overallStatus = 'done';
   } else if (item.status === 'error' || item.status === 'failed') {
     overallStatus = 'error';
@@ -89,15 +95,15 @@ export default function QuizGenerationCard({ item, onClick, userNames }: {
 
   return (
     <Card 
-      className="group p-6 hover:shadow-xl transition-all duration-300 border-gray-200 cursor-pointer hover:border-green-300 bg-white h-full flex flex-col"
+      className="group p-4 sm:p-6 hover:shadow-xl transition-all duration-300 border-gray-200 cursor-pointer hover:border-green-300 bg-white h-full flex flex-col"
       onClick={onClick}
     >
-      <div className="space-y-4 flex-1 flex flex-col">
+      <div className="space-y-3 sm:space-y-4 flex-1 flex flex-col">
         {/* Header with Status Badge */}
-        <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start justify-between gap-2 sm:gap-3">
           <div className="flex-1 min-w-0">
             <h3 
-              className="font-bold text-lg text-gray-900 group-hover:text-green-600 transition-colors leading-tight mb-1 line-clamp-2" 
+              className="font-bold text-base sm:text-lg text-gray-900 group-hover:text-green-600 transition-colors leading-tight mb-1 line-clamp-1" 
               title={item.title}
             >
               {displayTitle}
@@ -183,17 +189,17 @@ export default function QuizGenerationCard({ item, onClick, userNames }: {
         )}
 
         {/* Todo List Style Steps */}
-        <div className="grid grid-cols-2 gap-3">
+        <div className="grid grid-cols-3 gap-2 sm:gap-3 md:gap-4 lg:gap-5">
           {status.steps.map((step) => (
-            <div key={step.key} className="flex flex-col items-center gap-1.5">
-              <div className={`w-10 h-10 rounded-full flex items-center justify-center text-xs font-semibold transition-all ${
+            <div key={step.key} className="flex flex-col items-center gap-1 sm:gap-1.5">
+              <div className={`w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 rounded-full flex items-center justify-center text-xs font-semibold transition-all ${
                 step.done 
                   ? 'bg-green-500 text-white shadow-md scale-105' 
                   : 'bg-gray-200 text-gray-600'
               }`}>
-                {step.done ? <CheckCircle className="w-5 h-5" /> : <Clock className="w-4 h-4" />}
+                {step.done ? <CheckCircle className="w-4 h-4 sm:w-5 sm:h-5" /> : <Clock className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
               </div>
-              <span className={`text-xs text-center leading-tight ${
+              <span className={`text-[10px] sm:text-xs text-center leading-tight ${
                 step.done ? 'text-green-700 font-medium' : 'text-gray-600'
               }`}>
                 {step.label}
diff --git a/frontend/src/components/user/quiz-generation/QuizGenerationDetailModal.tsx b/frontend/src/components/user/quiz-generation/QuizGenerationDetailModal.tsx
index 498ef683..07dfd30c 100644
--- a/frontend/src/components/user/quiz-generation/QuizGenerationDetailModal.tsx
+++ b/frontend/src/components/user/quiz-generation/QuizGenerationDetailModal.tsx
@@ -13,26 +13,26 @@ import { QuizGenerationItem } from "./QuizGenerationList";
 function getDetailedStatus(item: QuizGenerationItem) {
   const steps = [
     { 
-      key: 'khoi_tao', 
-      label: 'Khởi tạo Quiz', 
-      done: item.plan_ready ?? item.title_ready ?? false,
-      description: 'Tạo tiêu đề, tổng quan và lập kế hoạch quiz',
+      key: 'vectorized', 
+      label: 'Vectorized', 
+      done: Boolean(item.vectorized),
+      description: 'Vector hóa tài liệu để chuẩn bị dữ liệu cho AI',
+      count: null
+    },
+    { 
+      key: 'plan_ready', 
+      label: 'Lập kế hoạch Quiz', 
+      done: Boolean(item.plan_ready),
+      description: `Tạo tiêu đề, tổng quan và lập kế hoạch quiz${item.ideas_count ? ` (${item.ideas_count} ý tưởng)` : ''}`,
       count: item.ideas_count
     },
     { 
-      key: 'questions', 
+      key: 'questions_ready', 
       label: 'Tạo câu hỏi', 
-      done: item.questions_ready ?? item.cards_ready ?? false,
+      done: Boolean(item.questions_ready),
       description: `Sinh câu hỏi và đáp án chi tiết${item.questions_count ? ` (${item.questions_count} câu)` : ''}`,
       count: item.questions_count
     },
-    { 
-      key: 'hoan_thien', 
-      label: 'Hoàn thiện và xuất bản', 
-      done: item.status === 'completed',
-      description: 'Kiểm tra chất lượng và xuất bản quiz',
-      count: null
-    },
   ];
   
   const completedSteps = steps.filter(s => s.done).length;
diff --git a/frontend/src/components/user/quiz-generation/QuizGenerationList.tsx b/frontend/src/components/user/quiz-generation/QuizGenerationList.tsx
index d12a194f..e46a0043 100644
--- a/frontend/src/components/user/quiz-generation/QuizGenerationList.tsx
+++ b/frontend/src/components/user/quiz-generation/QuizGenerationList.tsx
@@ -14,6 +14,7 @@ export interface QuizGenerationItem {
   progress_percentage?: number;
   current_step?: string;
   current_step_detail?: string;
+  vectorized?: boolean;
   plan_ready?: boolean;
   questions_ready?: boolean;
   title?: string;
diff --git a/frontend/src/components/user/quizzes/QuizCard.tsx b/frontend/src/components/user/quizzes/QuizCard.tsx
index 6fa2dc10..64603180 100644
--- a/frontend/src/components/user/quizzes/QuizCard.tsx
+++ b/frontend/src/components/user/quizzes/QuizCard.tsx
@@ -85,7 +85,7 @@ export function QuizCard({ quiz, onSelect, viewMode = 'grid' }: QuizCardProps) {
               <div className="flex items-start gap-3">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-3 mb-2">
-                    <h3 className="text-xl font-bold text-gray-900 group-hover:text-sky-600 transition-colors truncate">
+                    <h3 className="text-xl font-bold text-gray-900 group-hover:text-sky-600 transition-colors line-clamp-1">
                       {quiz.title}
                     </h3>
                     <Badge className={`shrink-0 border ${levelInfo.color}`}>
@@ -190,27 +190,37 @@ export function QuizCard({ quiz, onSelect, viewMode = 'grid' }: QuizCardProps) {
       className="group hover:shadow-xl transition-all duration-200 cursor-pointer border-gray-200 hover:border-sky-300 flex flex-col h-full"
       onClick={handleClick}
     >
-      <CardHeader className="pb-3">
-        <div className="flex items-start justify-between gap-3 mb-3">
-          <div className="flex-1 min-w-0">
-            <CardTitle className="text-lg font-bold text-gray-900 truncate group-hover:text-sky-600 transition-colors mb-2">
+      <CardHeader className="pb-2 sm:pb-3 p-3 sm:p-4 md:p-6">
+        <div className="flex flex-col sm:flex-row items-start justify-between gap-2 mb-2 sm:mb-3">
+          <div className="flex-1 min-w-0 w-full">
+            <CardTitle className="text-sm sm:text-base md:text-lg font-bold text-gray-900 line-clamp-1 group-hover:text-sky-600 transition-colors mb-1 sm:mb-1.5">
               {quiz.title}
             </CardTitle>
-            <CardDescription className="text-sm text-gray-600 line-clamp-2">
+            <CardDescription className="text-[11px] sm:text-xs md:text-sm text-gray-600 line-clamp-2">
               {quiz.overview}
             </CardDescription>
           </div>
-          <Badge className={`shrink-0 border ${levelInfo.color}`}>
-            {levelInfo.label}
-          </Badge>
+          <div className="flex items-center gap-2 w-full sm:w-auto justify-between sm:justify-end">
+            <Badge className={`shrink-0 border text-xs ${levelInfo.color}`}>
+              {levelInfo.label}
+            </Badge>
+            {hasRecommendationScore && (
+              <Badge className="shrink-0 border-amber-200 text-amber-700 bg-amber-50 text-xs">
+                <svg className="w-3 h-3 mr-1 inline" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                </svg>
+                {(quiz.recommendation_score * 100).toFixed(0)}%
+              </Badge>
+            )}
+          </div>
         </div>
         
         {/* Creator and Time Info */}
         {(quiz.owner_name || quiz.created_at) && (
-          <div className="flex items-center gap-2 text-xs text-gray-500 pt-2 border-t border-gray-100">
+          <div className="flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-gray-500 pt-1.5 sm:pt-2 border-t border-gray-100">
             {quiz.owner_name && (
-              <div className="flex items-center gap-1">
-                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <div className="flex items-center gap-1 truncate max-w-[120px] sm:max-w-none">
+                <svg className="w-3 h-3 sm:w-3.5 sm:h-3.5 shrink-0" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                 </svg>
                 <span>{quiz.owner_name}</span>
@@ -226,31 +236,31 @@ export function QuizCard({ quiz, onSelect, viewMode = 'grid' }: QuizCardProps) {
         )}
       </CardHeader>
 
-      <CardContent className="space-y-3 flex flex-col flex-1">
+      <CardContent className="space-y-2 sm:space-y-3 flex flex-col flex-1 p-3 sm:p-4 md:p-6">
         {/* Stats row */}
-        <div className="grid grid-cols-2 gap-3">
-          <div className="bg-sky-50 rounded-lg p-3 border border-sky-100">
-            <div className="text-xs text-gray-600 mb-1">Số câu hỏi</div>
-            <div className="text-xl font-bold text-sky-700">{quiz.num_questions}</div>
+        <div className="grid grid-cols-2 gap-2 sm:gap-3">
+          <div className="bg-sky-50 rounded-lg p-2 sm:p-3 border border-sky-100">
+            <div className="text-[10px] sm:text-xs text-gray-600 mb-0.5 sm:mb-1">Số câu hỏi</div>
+            <div className="text-lg sm:text-xl font-bold text-sky-700">{quiz.num_questions}</div>
           </div>
-          <div className="bg-purple-50 rounded-lg p-3 border border-purple-100">
-            <div className="text-xs text-gray-600 mb-1">Thời lượng</div>
-            <div className="text-xl font-bold text-purple-700">{quiz.duration} phút</div>
+          <div className="bg-purple-50 rounded-lg p-2 sm:p-3 border border-purple-100">
+            <div className="text-[10px] sm:text-xs text-gray-600 mb-0.5 sm:mb-1">Thời lượng</div>
+            <div className="text-lg sm:text-xl font-bold text-purple-700">{quiz.duration} phút</div>
           </div>
         </div>
 
         {/* High score */}
         {quiz.previous_score !== null && quiz.previous_score !== undefined && (
-          <div className={`rounded-lg p-3 border ${
+          <div className={`rounded-lg p-2 sm:p-3 border ${
             quiz.previous_score >= 70 
               ? 'bg-green-50 border-green-200' 
               : 'bg-amber-50 border-amber-200'
           }`}>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <span className="text-xs font-medium text-gray-700">Điểm cao nhất</span>
+                <span className="text-[10px] sm:text-xs font-medium text-gray-700">Điểm cao nhất</span>
               </div>
-              <span className={`text-2xl font-bold ${
+              <span className={`text-xl sm:text-2xl font-bold ${
                 quiz.previous_score >= 70 ? 'text-green-700' : 'text-amber-700'
               }`}>
                 {quiz.previous_score}
@@ -260,10 +270,10 @@ export function QuizCard({ quiz, onSelect, viewMode = 'grid' }: QuizCardProps) {
         )}
 
         {/* Actions */}
-        <div className="flex items-center justify-between pt-3 mt-auto border-t border-gray-100">
+        <div className="flex items-center justify-between pt-2 sm:pt-3 mt-auto border-t border-gray-100">
           <div className="flex items-center gap-2">
             {quiz.finish && (
-              <Badge variant="outline" className="border-green-200 text-green-700 bg-green-50 text-xs">
+              <Badge variant="outline" className="border-green-200 text-green-700 bg-green-50 text-[10px] sm:text-xs">
                 Hoàn thành
               </Badge>
             )}
@@ -271,7 +281,7 @@ export function QuizCard({ quiz, onSelect, viewMode = 'grid' }: QuizCardProps) {
           <Link
             href={`/user/my-quizzes/${quizId}`}
             onClick={(e) => e.stopPropagation()}
-            className="text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-1"
+            className="text-xs sm:text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-1"
           >
             Chi tiết
             <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
diff --git a/frontend/src/lib/api/admin.ts b/frontend/src/lib/api/admin.ts
index b2cac748..87829092 100644
--- a/frontend/src/lib/api/admin.ts
+++ b/frontend/src/lib/api/admin.ts
@@ -102,7 +102,7 @@ export const adminApi = {
     apiClient.delete<{ status: number; message?: string }>(`/course/admin/courses/${courseId}`),
   
   toggleCourseVisibility: (courseId: string, publish: boolean) =>
-    apiClient.put<{ status: number; message?: string }>(`/course/admin/courses/${courseId}/visibility`, { publish }),
+    apiClient.put<{ status: number; message?: string }>(`/course/admin/courses/${courseId}/visibility`, { course_id: courseId, is_public: publish }),
 
   // Quiz management
   listAllQuizzes: (params?: { page?: number; limit?: number; search?: string }) => {
@@ -120,7 +120,7 @@ export const adminApi = {
     apiClient.delete<{ status: number; message?: string }>(`/quiz/admin/quizzes/${quizId}`),
   
   toggleQuizVisibility: (quizId: string, publish: boolean) =>
-    apiClient.put<{ status: number; message?: string }>(`/quiz/admin/quizzes/${quizId}/visibility`, { publish }),
+    apiClient.put<{ status: number; message?: string }>(`/quiz/admin/quizzes/${quizId}/visibility`, { quiz_id: quizId, is_public: publish }),
 
   // System monitoring
   getCosts: () =>
diff --git a/frontend/src/types/create-course.ts b/frontend/src/types/create-course.ts
index dd4bcc28..60e5ce20 100644
--- a/frontend/src/types/create-course.ts
+++ b/frontend/src/types/create-course.ts
@@ -14,13 +14,13 @@ export interface CourseDraftDocumentMeta {
   size: number;
   type: string;
   uploadedAt: Date;
-  url?: string; // local object URL for preview if needed
-  s3Key?: string; // backend-returned S3 key for this file
+  url?: string;
+  s3Key?: string;
 }
 
 export interface CourseDraftState {
   step: number;
-  courseId?: string; // server-side identifier for tracking status
+  courseId?: string;
   documents: CourseDraftDocumentMeta[];
   uploading: UploadingFile[];
   meta: {
@@ -47,7 +47,7 @@ export const createEmptyDraft = (): CourseDraftState => ({
   documents: [],
   uploading: [],
   meta: {
-    userPosition: '',
+    userPosition: 'Sinh viên',
     shortPrompt: '',
     durationDays: 7,
     courseLevel: 'overview',
@@ -56,7 +56,6 @@ export const createEmptyDraft = (): CourseDraftState => ({
   modules: [],
 });
 
-// In-memory ephemeral store (simple, replace with context/store later)
 let _draft: CourseDraftState = createEmptyDraft();
 
 export function getDraft(): CourseDraftState {
diff --git a/services/course-service/src/services/status_service.py b/services/course-service/src/services/status_service.py
index 1074ea98..4cbd7d9e 100644
--- a/services/course-service/src/services/status_service.py
+++ b/services/course-service/src/services/status_service.py
@@ -115,11 +115,13 @@ def fetch_user_generations(user_id: str) -> Optional[List[Dict[str, Any]]]:
                     "progress": it.get("progress"),
                     "title_ready": bool(it.get("title_ready", False)),
                     "lessons_ready": bool(it.get("lessons_ready", False)),
+                    "tests_ready": bool(it.get("tests_ready", False)),
                     "final_ready": bool(it.get("final_ready", False)),
                     "vectorized": bool(it.get("vectorized", False)),
                     "lessons_count": it.get("lessons_count"),
                     "lessons_planned": it.get("lessons_planned"),
                     "roadmap_count": it.get("roadmap_count"),
+                    "tests_count": it.get("lessons_count"),
                     "updated_at": it.get("updated_at"),
                 }
             )
diff --git a/services/quiz-service/src/services/status_service.py b/services/quiz-service/src/services/status_service.py
index 652688c3..03f7d2f1 100644
--- a/services/quiz-service/src/services/status_service.py
+++ b/services/quiz-service/src/services/status_service.py
@@ -76,6 +76,7 @@ def fetch_generation_status(quiz_id: str) -> Optional[Dict[str, Any]]:
             return None
         
         # Check both old and new field names for compatibility
+        vectorized = bool(item.get("vectorized", False))
         plan_ready = bool(item.get("plan_ready", False) or item.get("title_ready", False))
         questions_ready = bool(item.get("questions_ready", False) or item.get("cards_ready", False))
         
@@ -89,6 +90,7 @@ def fetch_generation_status(quiz_id: str) -> Optional[Dict[str, Any]]:
             "progress_percentage": progress_percentage,
             "current_step": item.get("current_step"),
             "current_step_detail": item.get("current_step_detail"),
+            "vectorized": vectorized,
             "plan_ready": plan_ready,
             "questions_ready": questions_ready,
             "title": item.get("title"),
@@ -142,6 +144,7 @@ def fetch_user_quiz_generations(user_id: str) -> Optional[List[Dict[str, Any]]]:
         # Normalize fields for frontend (all items are quizzes in this table)
         normalized: List[Dict[str, Any]] = []
         for it in items:
+            vectorized = bool(it.get("vectorized", False))
             plan_ready = bool(it.get("plan_ready", False) or it.get("title_ready", False))
             questions_ready = bool(it.get("questions_ready", False) or it.get("cards_ready", False))
             
@@ -152,6 +155,7 @@ def fetch_user_quiz_generations(user_id: str) -> Optional[List[Dict[str, Any]]]:
                 "progress_percentage": int(it.get("progress_percentage", 0)),
                 "current_step": it.get("current_step"),
                 "current_step_detail": it.get("current_step_detail"),
+                "vectorized": vectorized,
                 "plan_ready": plan_ready,
                 "questions_ready": questions_ready,
                 "title": it.get("title"),