diff --git a/frontend/app/[locale]/dashboard/page.tsx b/frontend/app/[locale]/dashboard/page.tsx
index be15de5f..7c19c8a0 100644
--- a/frontend/app/[locale]/dashboard/page.tsx
+++ b/frontend/app/[locale]/dashboard/page.tsx
@@ -64,8 +64,10 @@ export default async function DashboardPage({
       : null;
 
   const userForDisplay = {
+    id: user.id,
     name: user.name ?? null,
     email: user.email ?? '',
+    image: user.image ?? null,
     role: user.role ?? null,
     points: user.points,
     createdAt: user.createdAt ?? null,
diff --git a/frontend/components/dashboard/ExplainedTermsCard.tsx b/frontend/components/dashboard/ExplainedTermsCard.tsx
index 6cb480b3..a9e10ef8 100644
--- a/frontend/components/dashboard/ExplainedTermsCard.tsx
+++ b/frontend/components/dashboard/ExplainedTermsCard.tsx
@@ -2,7 +2,7 @@
 
 import { BookOpen, ChevronDown, GripVertical, RotateCcw, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import AIWordHelper from '@/components/q&a/AIWordHelper';
 import { getCachedTerms } from '@/lib/ai/explainCache';
@@ -21,6 +21,13 @@ export function ExplainedTermsCard() {
   const [selectedTerm, setSelectedTerm] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [touchDragState, setTouchDragState] = useState<{
+    sourceIndex: number;
+    targetIndex: number;
+    x: number;
+    y: number;
+    label: string;
+  } | null>(null);
 
   /* eslint-disable react-hooks/set-state-in-effect */
   useEffect(() => {
@@ -83,6 +90,131 @@ export function ExplainedTermsCard() {
     setDraggedIndex(null);
   };
 
+  // Touch drag support for mobile
+  const touchDragIndex = useRef<number | null>(null);
+  const termRefs = useRef<Map<number, HTMLDivElement>>(new Map());
+  const dragTargetIndex = useRef<number | null>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  const setTermRef = useCallback(
+    (index: number) => (el: HTMLDivElement | null) => {
+      if (el) {
+        termRefs.current.set(index, el);
+      } else {
+        termRefs.current.delete(index);
+      }
+    },
+    []
+  );
+
+  const setTouchDragStateRef = useRef(setTouchDragState);
+  useEffect(() => {
+    setTouchDragStateRef.current = setTouchDragState;
+  }, [setTouchDragState]);
+
+  const termsRef = useRef(terms);
+  useEffect(() => {
+    termsRef.current = terms;
+  }, [terms]);
+
+  const handleTouchStart = useCallback(
+    (index: number, e: React.TouchEvent) => {
+      const touch = e.touches[0];
+      if (!touch) return;
+      touchDragIndex.current = index;
+      dragTargetIndex.current = index;
+      setDraggedIndex(index);
+      setTouchDragStateRef.current({
+        sourceIndex: index,
+        targetIndex: index,
+        x: touch.clientX,
+        y: touch.clientY,
+        label: termsRef.current[index] ?? '',
+      });
+    },
+    []
+  );
+
+  const containerCallbackRef = useCallback((node: HTMLDivElement | null) => {
+    if (cleanupRef.current) {
+      cleanupRef.current();
+      cleanupRef.current = null;
+    }
+
+    if (!node) return;
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (touchDragIndex.current === null) return;
+      e.preventDefault();
+
+      const touch = e.touches[0];
+      if (!touch) return;
+
+      let newTarget = dragTargetIndex.current;
+
+      for (const [index, el] of termRefs.current.entries()) {
+        const rect = el.getBoundingClientRect();
+        if (
+          touch.clientX >= rect.left &&
+          touch.clientX <= rect.right &&
+          touch.clientY >= rect.top &&
+          touch.clientY <= rect.bottom &&
+          index !== touchDragIndex.current
+        ) {
+          newTarget = index;
+          break;
+        }
+      }
+
+      dragTargetIndex.current = newTarget;
+      setDraggedIndex(newTarget);
+      setTouchDragStateRef.current(prev =>
+        prev
+          ? {
+              ...prev,
+              targetIndex: newTarget ?? prev.targetIndex,
+              x: touch.clientX,
+              y: touch.clientY,
+            }
+          : null
+      );
+    };
+
+    const onTouchEnd = () => {
+      const fromIndex = touchDragIndex.current;
+      const toIndex = dragTargetIndex.current;
+
+      if (
+        fromIndex !== null &&
+        toIndex !== null &&
+        fromIndex !== toIndex
+      ) {
+        setTerms(prevTerms => {
+          const newTerms = [...prevTerms];
+          const [dragged] = newTerms.splice(fromIndex, 1);
+          newTerms.splice(toIndex, 0, dragged);
+          saveTermOrder(newTerms);
+          return newTerms;
+        });
+      }
+
+      touchDragIndex.current = null;
+      dragTargetIndex.current = null;
+      setDraggedIndex(null);
+      setTouchDragStateRef.current(null);
+    };
+
+    node.addEventListener('touchmove', onTouchMove, { passive: false });
+    node.addEventListener('touchend', onTouchEnd);
+    node.addEventListener('touchcancel', onTouchEnd);
+
+    cleanupRef.current = () => {
+      node.removeEventListener('touchmove', onTouchMove);
+      node.removeEventListener('touchend', onTouchEnd);
+      node.removeEventListener('touchcancel', onTouchEnd);
+    };
+  }, []);
+
   const handleTermClick = (term: string) => {
     setSelectedTerm(term);
     setIsModalOpen(true);
@@ -132,19 +264,39 @@ export function ExplainedTermsCard() {
               <p className="mb-4 text-sm text-gray-500 dark:text-gray-400">
                 {t('termCount', { count: terms.length })}
               </p>
-            <div className="flex flex-wrap gap-2">
-              {terms.map((term, index) => (
+            <div
+              ref={containerCallbackRef}
+              className="flex flex-wrap gap-2"
+            >
+              {terms.map((term, index) => {
+                const isSource =
+                  touchDragState !== null &&
+                  index === touchDragState.sourceIndex;
+                const isDropTarget =
+                  touchDragState !== null &&
+                  index === touchDragState.targetIndex &&
+                  index !== touchDragState.sourceIndex;
+
+                return (
                 <div
                   key={`${term}-${index}`}
+                  ref={setTermRef(index)}
                   onDragOver={handleDragOver}
                   onDrop={() => handleDrop(index)}
                   className={`group relative inline-flex items-center gap-1 rounded-lg border px-2 py-2 pr-8 transition-all ${
-                    draggedIndex === index ? 'opacity-50' : ''
+                    isSource
+                      ? 'scale-95 opacity-40'
+                      : isDropTarget
+                        ? 'border-(--accent-primary) bg-(--accent-primary)/10 scale-105'
+                        : draggedIndex === index
+                          ? 'opacity-50'
+                          : ''
                   } border-gray-100 bg-gray-50/50 hover:border-(--accent-primary)/30 hover:bg-white dark:border-white/5 dark:bg-neutral-800/50 dark:hover:border-(--accent-primary)/30 dark:hover:bg-neutral-800`}
                 >
                   <button
                     draggable
                     onDragStart={() => handleDragStart(index)}
+                    onTouchStart={e => handleTouchStart(index, e)}
                     aria-label={t('ariaDragHandle', { term })}
                     className={`cursor-grab active:cursor-grabbing touch-none ${
                       draggedIndex === index ? 'cursor-grabbing' : ''
@@ -164,12 +316,13 @@ export function ExplainedTermsCard() {
                       handleRemoveTerm(term);
                     }}
                     aria-label={t('ariaHide', { term })}
-                    className="absolute -right-1 -top-1 rounded-full bg-white p-1 text-gray-400 opacity-0 shadow-sm transition-opacity hover:bg-red-50 hover:text-red-500 group-hover:opacity-100 dark:bg-neutral-800 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+                    className="absolute -right-1 -top-1 rounded-full bg-white p-1 text-gray-400 opacity-100 shadow-sm transition-opacity hover:bg-red-50 hover:text-red-500 sm:opacity-0 sm:group-hover:opacity-100 dark:bg-neutral-800 dark:hover:bg-red-900/20 dark:hover:text-red-400"
                   >
                     <X className="h-3 w-3" />
                   </button>
                 </div>
-              ))}
+                );
+              })}
             </div>
             </>
           ) : (
@@ -220,7 +373,7 @@ export function ExplainedTermsCard() {
                                 handleRestoreTerm(term);
                               }}
                               aria-label={t('ariaRestore', { term })}
-                              className="absolute -right-1 -top-1 rounded-full bg-white p-1 text-gray-400 opacity-0 shadow-sm transition-opacity hover:bg-green-50 hover:text-green-600 group-hover:opacity-100 dark:bg-neutral-800 dark:hover:bg-green-900/20 dark:hover:text-green-400"
+                              className="absolute -right-1 -top-1 rounded-full bg-white p-1 text-gray-400 opacity-100 shadow-sm transition-opacity hover:bg-green-50 hover:text-green-600 sm:opacity-0 sm:group-hover:opacity-100 dark:bg-neutral-800 dark:hover:bg-green-900/20 dark:hover:text-green-400"
                             >
                               <RotateCcw className="h-3 w-3" />
                             </button>
@@ -245,6 +398,20 @@ export function ExplainedTermsCard() {
           onClose={handleModalClose}
         />
       )}
+
+      {touchDragState && (
+        <div
+          className="pointer-events-none fixed z-50 inline-flex items-center gap-1 rounded-lg border border-(--accent-primary) bg-white px-3 py-2 font-medium text-gray-900 shadow-xl dark:bg-neutral-800 dark:text-white"
+          style={{
+            left: touchDragState.x,
+            top: touchDragState.y,
+            transform: 'translate(-50%, -120%)',
+          }}
+        >
+          <GripVertical className="h-4 w-4 text-(--accent-primary)" />
+          {touchDragState.label}
+        </div>
+      )}
     </>
   );
 }
diff --git a/frontend/components/dashboard/ProfileCard.tsx b/frontend/components/dashboard/ProfileCard.tsx
index a3f77fe1..601db04e 100644
--- a/frontend/components/dashboard/ProfileCard.tsx
+++ b/frontend/components/dashboard/ProfileCard.tsx
@@ -2,10 +2,14 @@
 
 import { useTranslations } from 'next-intl';
 
+import { UserAvatar } from '@/components/leaderboard/UserAvatar';
+
 interface ProfileCardProps {
   user: {
+    id: string;
     name: string | null;
     email: string;
+    image: string | null;
     role: string | null;
     points: number;
     createdAt: Date | null;
@@ -15,6 +19,11 @@ interface ProfileCardProps {
 
 export function ProfileCard({ user, locale }: ProfileCardProps) {
   const t = useTranslations('dashboard.profile');
+  const username = user.name || user.email.split('@')[0];
+  const seed = `${username}-${user.id}`;
+  const avatarSrc =
+    user.image ||
+    `https://api.dicebear.com/9.x/avataaars/svg?seed=${encodeURIComponent(seed)}`;
 
   const cardStyles = `
     relative overflow-hidden rounded-2xl
@@ -27,11 +36,15 @@ export function ProfileCard({ user, locale }: ProfileCardProps) {
     <section className={cardStyles} aria-labelledby="profile-heading">
       <div className="flex items-start gap-6">
         <div
-          className="relative rounded-full bg-linear-to-br from-(--accent-primary) to-(--accent-hover) p-0.75"
-          aria-hidden="true"
+          className="relative shrink-0 rounded-full bg-linear-to-br from-(--accent-primary) to-(--accent-hover) p-0.75"
         >
-          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-white text-3xl font-bold text-gray-700 dark:bg-neutral-900 dark:text-gray-200">
-            {user.name?.[0]?.toUpperCase() || user.email[0].toUpperCase()}
+          <div className="relative h-20 w-20 overflow-hidden rounded-full bg-white dark:bg-neutral-900">
+            <UserAvatar
+              src={avatarSrc}
+              username={username}
+              userId={user.id}
+              sizes="80px"
+            />
           </div>
         </div>
 
diff --git a/frontend/components/header/MainSwitcher.tsx b/frontend/components/header/MainSwitcher.tsx
index 9ff08ad1..3754e2f7 100644
--- a/frontend/components/header/MainSwitcher.tsx
+++ b/frontend/components/header/MainSwitcher.tsx
@@ -43,6 +43,11 @@ function isDashboardPath(pathname: string): boolean {
   return segments[0] === 'dashboard' || segments[1] === 'dashboard';
 }
 
+function isLeaderboardPath(pathname: string): boolean {
+  const segments = pathname.split('/').filter(Boolean);
+  return segments[0] === 'leaderboard' || segments[1] === 'leaderboard';
+}
+
 type MainSwitcherProps = {
   children: ReactNode;
   userExists: boolean;
@@ -79,7 +84,7 @@ export function MainSwitcher({
   return (
     <main
       className={
-        isQa || isHome || isQuizzesPath(pathname) || isDashboardPath(pathname)
+        isQa || isHome || isQuizzesPath(pathname) || isDashboardPath(pathname) || isLeaderboardPath(pathname)
           ? 'mx-auto'
           : 'mx-auto min-h-[80vh] px-6'
       }
diff --git a/frontend/components/leaderboard/LeaderboardClient.tsx b/frontend/components/leaderboard/LeaderboardClient.tsx
index b9c0172c..02650205 100644
--- a/frontend/components/leaderboard/LeaderboardClient.tsx
+++ b/frontend/components/leaderboard/LeaderboardClient.tsx
@@ -34,11 +34,11 @@ export default function LeaderboardClient({
             transition={{ duration: 0.6 }}
           >
             <h1 className="relative mb-6 inline-block pb-2 text-4xl font-black tracking-tight md:text-6xl lg:text-7xl">
-              <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
+              <span className="relative inline-block bg-linear-to-r from-(--accent-primary)/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-(--accent-hover)/70 bg-clip-text text-transparent">
                 {t('title')}
               </span>
               <span
-                className="wave-text-gradient pointer-events-none absolute inset-0 inline-block bg-gradient-to-r from-[var(--accent-primary)] via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-transparent"
+                className="wave-text-gradient pointer-events-none absolute inset-0 inline-block bg-linear-to-r from-(--accent-primary) via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-(--accent-hover) bg-clip-text text-transparent"
                 aria-hidden="true"
               >
                 {t('title')}
diff --git a/frontend/components/q&a/AIWordHelper.tsx b/frontend/components/q&a/AIWordHelper.tsx
index 2f2e35b0..7beb3c70 100644
--- a/frontend/components/q&a/AIWordHelper.tsx
+++ b/frontend/components/q&a/AIWordHelper.tsx
@@ -336,6 +336,21 @@ export default function AIWordHelper({
     [position]
   );
 
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      const touch = e.touches[0];
+      if (!touch) return;
+      setDragState({
+        isDragging: true,
+        startX: touch.clientX,
+        startY: touch.clientY,
+        offsetX: position.x,
+        offsetY: position.y,
+      });
+    },
+    [position]
+  );
+
   useEffect(() => {
     if (!dragState.isDragging) return;
 
@@ -348,16 +363,34 @@ export default function AIWordHelper({
       });
     };
 
-    const handleMouseUp = () => {
+    const handleTouchMove = (e: TouchEvent) => {
+      const touch = e.touches[0];
+      if (!touch) return;
+      e.preventDefault();
+      const deltaX = touch.clientX - dragState.startX;
+      const deltaY = touch.clientY - dragState.startY;
+      setPosition({
+        x: dragState.offsetX + deltaX,
+        y: dragState.offsetY + deltaY,
+      });
+    };
+
+    const handleDragEnd = () => {
       setDragState(prev => ({ ...prev, isDragging: false }));
     };
 
     document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mouseup', handleDragEnd);
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchend', handleDragEnd);
+    document.addEventListener('touchcancel', handleDragEnd);
 
     return () => {
       document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mouseup', handleDragEnd);
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleDragEnd);
+      document.removeEventListener('touchcancel', handleDragEnd);
     };
   }, [dragState]);
 
@@ -447,9 +480,10 @@ export default function AIWordHelper({
           className={cn(
             'flex items-center justify-between border-b border-gray-200 p-4 dark:border-neutral-800',
             'cursor-grab active:cursor-grabbing',
-            'select-none'
+            'select-none touch-none'
           )}
           onMouseDown={handleDragStart}
+          onTouchStart={handleTouchStart}
         >
           <div className="flex items-center gap-2">
             <GripHorizontal className="h-4 w-4 text-gray-400" />
@@ -463,6 +497,7 @@ export default function AIWordHelper({
           <button
             onClick={onClose}
             onMouseDown={e => e.stopPropagation()}
+            onTouchStart={e => e.stopPropagation()}
             className={cn(
               'rounded-lg p-1.5',
               'text-gray-500 dark:text-gray-400',
diff --git a/frontend/components/q&a/AccordionList.tsx b/frontend/components/q&a/AccordionList.tsx
index 10a44f67..6d61b035 100644
--- a/frontend/components/q&a/AccordionList.tsx
+++ b/frontend/components/q&a/AccordionList.tsx
@@ -302,6 +302,9 @@ export default function AccordionList({ items }: { items: QuestionEntry[] }) {
     x: number;
     y: number;
   } | null>(null);
+  const [buttonPlacement, setButtonPlacement] = useState<'above' | 'below'>(
+    'above'
+  );
   const [modalOpen, setModalOpen] = useState(false);
   const [cachedTerms, setCachedTerms] = useState<Set<string>>(
     () => new Set(getCachedTerms())
@@ -331,6 +334,7 @@ export default function AccordionList({ items }: { items: QuestionEntry[] }) {
     (text: string, position: { x: number; y: number }) => {
       setSelectedText(text);
       setButtonPosition(position);
+      setButtonPlacement(window.innerWidth < 640 ? 'below' : 'above');
     },
     []
   );
@@ -420,6 +424,7 @@ export default function AccordionList({ items }: { items: QuestionEntry[] }) {
           position={buttonPosition}
           onClick={handleExplainClick}
           onDismiss={handleButtonDismiss}
+          placement={buttonPlacement}
         />
       )}
 
diff --git a/frontend/components/q&a/FloatingExplainButton.tsx b/frontend/components/q&a/FloatingExplainButton.tsx
index dea9c5c6..ee5a53ad 100644
--- a/frontend/components/q&a/FloatingExplainButton.tsx
+++ b/frontend/components/q&a/FloatingExplainButton.tsx
@@ -9,12 +9,14 @@ interface FloatingExplainButtonProps {
   position: { x: number; y: number };
   onClick: () => void;
   onDismiss: () => void;
+  placement?: 'above' | 'below';
 }
 
 export default function FloatingExplainButton({
   position,
   onClick,
   onDismiss,
+  placement = 'above',
 }: FloatingExplainButtonProps) {
   const t = useTranslations('aiHelper');
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -70,7 +72,10 @@ export default function FloatingExplainButton({
       style={{
         left: `${position.x}px`,
         top: `${position.y}px`,
-        transform: 'translate(-50%, -100%) translateY(-8px)',
+        transform:
+          placement === 'below'
+            ? 'translate(-50%, 0) translateY(8px)'
+            : 'translate(-50%, -100%) translateY(-8px)',
       }}
       aria-label={t('buttonText')}
     >
diff --git a/frontend/components/q&a/SelectableText.tsx b/frontend/components/q&a/SelectableText.tsx
index f2ece70c..4e0da2ba 100644
--- a/frontend/components/q&a/SelectableText.tsx
+++ b/frontend/components/q&a/SelectableText.tsx
@@ -49,10 +49,11 @@ export default function SelectableText({
         }
 
         const rect = range.getBoundingClientRect();
+        const isMobile = window.innerWidth < 640;
 
         const position = {
           x: rect.left + rect.width / 2,
-          y: rect.top,
+          y: isMobile ? rect.bottom : rect.top,
         };
 
         onTextSelectRef.current(selectedText, position);