diff --git a/src/pages/PerformanceDomainPracticePage.tsx b/src/pages/PerformanceDomainPracticePage.tsx
index ce083b4..3997480 100644
--- a/src/pages/PerformanceDomainPracticePage.tsx
+++ b/src/pages/PerformanceDomainPracticePage.tsx
@@ -344,7 +344,7 @@ export default function PerformanceDomainPracticePage() {
         onClick={() => handleSelect(domain.id)}
         disabled={optionDisabled}
         className={clsx(
-          'relative flex h-[112px] flex-col gap-2 overflow-hidden rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800',
+          'relative flex h-16 items-center justify-center overflow-hidden rounded-xl border bg-white p-1 text-center shadow-sm transition-colors dark:bg-gray-800 sm:h-[112px] sm:flex-col sm:items-stretch sm:justify-start sm:gap-2 sm:p-3 sm:text-left',
           'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20',
           optionDisabled && 'cursor-default hover:bg-white dark:hover:bg-gray-800',
           shouldKeepDisabled && 'bg-gray-50 opacity-55 dark:bg-gray-800/70',
@@ -354,7 +354,7 @@ export default function PerformanceDomainPracticePage() {
             'border-rose-300 bg-rose-50 shadow-[inset_0_0_0_2px_rgba(251,113,133,0.65)] dark:border-rose-600 dark:bg-rose-950/30 dark:shadow-[inset_0_0_0_2px_rgba(244,63,94,0.45)]'
         )}
       >
-        <div className="flex items-center gap-3">
+        <div className="hidden items-center gap-3 sm:flex">
           <div
             className={clsx(
               'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-white',
@@ -374,7 +374,11 @@ export default function PerformanceDomainPracticePage() {
           </div>
         </div>
 
-        <div>
+        <div className="text-2xl font-bold leading-none text-gray-900 dark:text-white sm:hidden">
+          {domain.name.charAt(0)}
+        </div>
+
+        <div className="hidden sm:block">
           {(() => {
             const activeProgress = progress.scope === 'expectedGoal' ? expectedGoalProgress : keyPointProgress
             const activeLabel = progress.scope === 'expectedGoal' ? '目标' : '要点'
@@ -430,15 +434,15 @@ export default function PerformanceDomainPracticePage() {
           })()}
         </div>
 
-        <div className="pointer-events-none absolute right-3 top-3 flex h-5 w-12 items-center justify-end">
+        <div className="pointer-events-none absolute right-1 top-1 flex h-4 w-8 items-center justify-end sm:right-3 sm:top-3 sm:h-5 sm:w-12">
           {isCorrectSelected && (
-            <CheckCircle2 className="text-emerald-500" size={18} />
+            <CheckCircle2 className="text-emerald-500" size={16} />
           )}
           {isWrongSelected && (
-            <XCircle className="text-rose-500" size={18} />
+            <XCircle className="text-rose-500" size={16} />
           )}
           {shouldHighlightCorrect && !isCorrectSelected && (
-            <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
+            <span className="rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300 sm:px-2 sm:text-xs">
               正确
             </span>
           )}
@@ -633,7 +637,7 @@ export default function PerformanceDomainPracticePage() {
             </div>
           </section>
 
-          <section className="grid gap-3 sm:grid-cols-2">
+          <section className="grid grid-cols-4 gap-2 sm:grid-cols-2 sm:gap-3">
             {performanceDomains.map((domain) => renderOptionButton(domain.id))}
           </section>
         </div>