diff --git a/frontend/app/review-tests/page.tsx b/frontend/app/review-design/page.tsx
similarity index 93%
rename from frontend/app/review-tests/page.tsx
rename to frontend/app/review-design/page.tsx
index 90e36df..2275fd4 100644
--- a/frontend/app/review-tests/page.tsx
+++ b/frontend/app/review-design/page.tsx
@@ -66,13 +66,14 @@ export default function ReviewTestsPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       <Navigation />
 
-      <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="max-w-4xl mx-auto px-4 py-8">
         {/* 頁面標題 */}
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">Review Tests 組件展示</h1>
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Review 組件設計</h1>
+          <p className="text-gray-600">所有 review-tests 組件的 UI 設計頁面</p>
         </div>
 
         {/* Tab 導航 */}
@@ -98,12 +99,12 @@ export default function ReviewTestsPage() {
 
 
         {/* 當前測驗組件展示 */}
-        <div className="bg-white rounded-lg shadow-md overflow-hidden">
-          <div className={`px-6 py-4 border-b ${testComponents.find(c => c.id === activeTab)?.color}`}>
+        <div className="mb-8">
+          <div className="mb-6">
             <h2 className="text-2xl font-semibold text-gray-900">{activeTab}</h2>
             <p className="text-sm text-gray-600 mt-1">{testComponents.find(c => c.id === activeTab)?.name}</p>
           </div>
-          <div className="p-8">
+          <div>
             {/* 條件渲染當前選中的測驗組件 */}
             {activeTab === 'FlipMemoryTest' && (
               <FlipMemoryTest