diff --git a/public/css/logic_game.css b/public/css/logic_game.css
index 9714af2..0cd833a 100644
--- a/public/css/logic_game.css
+++ b/public/css/logic_game.css
@@ -38,7 +38,6 @@ body { font-family: sans-serif;
       margin-bottom: 5px;
     }
     .branch {
-      border: 2px dashed #666;
       padding: 8px;
       min-height: 40px;
       margin: 6px 0;
@@ -48,8 +47,8 @@ body { font-family: sans-serif;
       font-size: 12px;
       font-weight: bold;
     }
-    .container {
-      margin: 10px 2rem 10px 2rem;
+    .main-content {
+     margin: 10px 2rem 10px 2rem;
       border-radius: 1.125rem;
       padding: 2.5rem clamp(1.75rem, 1vw, 25rem);
       background:
@@ -62,6 +61,21 @@ body { font-family: sans-serif;
       backdrop-filter: blur(0.875rem) saturate(120%);
       border: 0.0625rem solid rgba(255,255,255,.10);
       overflow: auto; /* เพิ่มการเลื่อนภายใน container */
+    }
+    .container {
+      margin: 10px 5rem 10px 5rem;
+      border-radius: 1.125rem;
+      padding: 2.5rem clamp(1.75rem, 1vw, 25rem);
+      background:
+        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) padding-box,
+        radial-gradient(120% 140% at 100% 0%, rgba(224,133,0,.30), transparent 40%) padding-box,
+        radial-gradient(120% 140% at 0% 100%, rgba(0,95,163,.35), transparent 40%) padding-box;
+      box-shadow:
+        0 0.625rem 1.875rem rgba(0,0,0,.45),
+        inset 0 0.0625rem 0 rgba(255,255,255,.06);
+      backdrop-filter: blur(0.875rem) saturate(120%);
+      border: 0.0625rem solid rgba(255,255,255,.10);
+      justify-content: center;
 }
     .btn_submitlogic {
       --_ring: rgba(0,95,163,.38);
@@ -99,6 +113,7 @@ body { font-family: sans-serif;
     .level-header {
       text-align: center;
       margin-bottom: 20px;
+      font-size: 1.5rem;
     }
     .level-select {
       margin: 10px 0 20px 0;
diff --git a/public/html/logic_game.html b/public/html/logic_game.html
index fffe1d6..8b01fc0 100644
--- a/public/html/logic_game.html
+++ b/public/html/logic_game.html
@@ -16,37 +16,39 @@ <h1>CAMT OPEN HOUSE 68<span class="cursor">_</span></h1>
   </header>
 </head>
 <body>
-  <div class="container">
-  <header class="level-header">
-    <h2 id="level-title">Level 1: IF ฝนตก → หยิบร่ม</h2>
-    <p id="level-description">ลากบล็อกเข้าไปใน Branch True/False ของ IF ได้</p>
-  </header>
-
-  <!-- Dropdown สำหรับเลือกข้อ -->
-  <label for="level-select">เลือกข้อ:</label>
-  <select id="level-select" onchange="selectLevel()" class="level-select">
-    <option value="0">Level 1</option>
-    <option value="1">Level 2</option>
-    <option value="2">Level 3</option>
-    <option value="3">Level 4</option>
-    <option value="4">Level 5</option>
-    <option value="5">Level 6</option>
-    <option value="6">Level 7</option>
-    <option value="7">Level 8</option>
-    <option value="8">Level 9</option>
-    <option value="9">Level 10</option>
-  </select>
-
-  <h3>บล็อกที่ให้</h3>
-  <ul id="blocks" class="list"></ul>
-
-  <h3>Flow หลัก</h3>
-  <ul id="dropzone" class="list"></ul>
-
-  <button onclick="checkAnswer()" class="btn_submitlogic">ตรวจคำตอบ</button>
-  <div class="result">
-    <p id="result"></p>
+  <div class="main-content">
+    <div class="container">
+      <header class="level-header">
+        <h2 id="level-title">Level 1: IF ฝนตก → หยิบร่ม</h2>
+        <p id="level-description">ลากบล็อกเข้าไปใน Branch True/False ของ IF ได้</p>
+      </header>
+    
+      <!-- Dropdown สำหรับเลือกข้อ -->
+      <label for="level-select">เลือกข้อ:</label>
+      <select id="level-select" onchange="selectLevel()" class="level-select">
+        <option value="0">Level 1</option>
+        <option value="1">Level 2</option>
+        <option value="2">Level 3</option>
+        <option value="3">Level 4</option>
+        <option value="4">Level 5</option>
+        <option value="5">Level 6</option>
+        <option value="6">Level 7</option>
+        <option value="7">Level 8</option>
+        <option value="8">Level 9</option>
+        <option value="9">Level 10</option>
+      </select>
+    
+      <h3>บล็อกที่ให้</h3>
+      <ul id="blocks" class="list"></ul>
+    
+      <h3>Flow หลัก</h3>
+      <ul id="dropzone" class="list"></ul>
+    
+      <button onclick="checkAnswer()" class="btn_submitlogic">ตรวจคำตอบ</button>
+      <div class="result">
+        <p id="result"></p>
+      </div>
+    </div>
   </div>
-</div>
 </body>
 </html>
diff --git a/src/logic_game.ts b/src/logic_game.ts
index 84b6efa..d1f81c0 100644
--- a/src/logic_game.ts
+++ b/src/logic_game.ts
@@ -20,60 +20,55 @@ const levels = [
     correctFalse: ["ไปโรงเรียน"],
   },
   {
-    title: "Level 2: IF หนาว → ใส่เสื้อกันหนาว",
-    description: "เพิ่ม IF หนาวใน Flowchart",
+    title: "Level 2: Prime Number ",
+    description: "รับตัวเลขจำนวนเต็มจากผู้ใช้ ถ้าเป็นจำนวนเฉพาะ (Prime Number) ให้แสดงข้อความว่า “เป็นจำนวนเฉพาะ” แต่ถ้าไม่ใช่ให้แสดง “ไม่ใช่จำนวนเฉพาะ”",
     blocks: [
       "Start",
-      "ตื่นนอน",
-      "อาบน้ำ",
-      "แต่งตัว",
-      "IF หนาว?",
-      "ใส่เสื้อกันหนาว",
-      "ไปโรงเรียน",
+      "เป็นจำนวนเฉพาะ",
+      "รับตัวเลขจากผู้ใช้",
+      "ไม่ใช่จำนวนเฉพาะ",
+      "IF ตัวเลขเป็นจำนวนเฉพาะ?",
       "End",
     ],
     correctMain: [
       "Start",
-      "ตื่นนอน",
-      "อาบน้ำ",
-      "แต่งตัว",
-      "IF หนาว?",
-      "ไปโรงเรียน",
-      "End",
+      "รับตัวเลขจากผู้ใช้",
+      "IF ตัวเลขเป็นจำนวนเฉพาะ?",
+      "End"
     ],
-    correctTrue: ["ใส่เสื้อกันหนาว"],
-    correctFalse: [],
+    correctTrue: ["เป็นจำนวนเฉพาะ"],
+    correctFalse: ["ไม่ใช่จำนวนเฉพาะ"],
   },
   {
-    title: "Level 3: IF หิว → กินข้าว",
-    description: "เพิ่ม IF หิวใน Flowchart",
-    blocks: ["Start", "ตื่นนอน", "IF หิว?", "กินข้าว", "ไปโรงเรียน", "End"],
-    correctMain: ["Start", "ตื่นนอน", "IF หิว?", "ไปโรงเรียน", "End"],
-    correctTrue: ["กินข้าว"],
-    correctFalse: [],
+    title: "Level 3: เปรียบเทียบรหัสผ่าน",
+    description: "ถ้ารหัสผ่านตรงกับ “abc123” ให้แสดง “เข้าสู่ระบบสำเร็จ” ถ้าไม่ตรง ให้แสดง “รหัสผ่านผิด”",
+    blocks: [  "IF รหัสผ่าน == abc123?", "เข้าสู่ระบบสำเร็จ","รับรหัสผ่านจากผู้ใช้","Start", "รหัสผ่านผิด", "End"],
+    correctMain: ["Start", "รับรหัสผ่านจากผู้ใช้", "IF รหัสผ่าน == abc123?", "End"],
+    correctTrue: ["เข้าสู่ระบบสำเร็จ"],
+    correctFalse: ["รหัสผ่านผิด"],
   },
   {
-    title: "Level 4: IF มีเวลา → อ่านหนังสือ",
-    description: "เพิ่ม IF มีเวลาใน Flowchart",
+    title: "Level 4: ระบบส่วนลด",
+    description: "รับยอดซื้อสินค้าจากผู้ใช้ ถ้ายอดซื้อมากกว่า 1000 บาทให้แสดง “ได้ส่วนลด 10%” ถ้าน้อยกว่าหรือเท่ากับ 1000 บาทให้แสดง “ไม่ได้ส่วนลด”",
     blocks: [
       "Start",
-      "ตื่นนอน",
-      "IF มีเวลา?",
-      "อ่านหนังสือ",
-      "ไปโรงเรียน",
+      "ได้ส่วนลด 10%",
+      "IF ยอดซื้อ > 1000?",
+      "ไม่ได้ส่วนลด",
       "End",
+      "รับยอดซื้อจากผู้ใช้"
     ],
-    correctMain: ["Start", "ตื่นนอน", "IF มีเวลา?", "ไปโรงเรียน", "End"],
-    correctTrue: ["อ่านหนังสือ"],
-    correctFalse: [],
+    correctMain: ["Start", "รับยอดซื้อจากผู้ใช้", "IF ยอดซื้อ > 1000?", "End"],
+    correctTrue: ["ได้ส่วนลด 10%"],
+    correctFalse: ["ไม่ได้ส่วนลด"],
   },
   {
-    title: "Level 5: IF มีงาน → ทำงาน",
-    description: "เพิ่ม IF มีงานใน Flowchart",
-    blocks: ["Start", "ตื่นนอน", "IF มีงาน?", "ทำงาน", "ไปโรงเรียน", "End"],
-    correctMain: ["Start", "ตื่นนอน", "IF มีงาน?", "ไปโรงเรียน", "End"],
-    correctTrue: ["ทำงาน"],
-    correctFalse: [],
+    title: "Level 5: เช็คเลขคู่หรือเลขคี่",
+    description: "รับตัวเลขจำนวนเต็มจากผู้ใช้ ถ้าเลขนั้นเป็นเลขคู่ ให้แสดง “เลขคู่” ถ้าเป็นเลขคี่ ให้แสดง “เลขคี่”",
+    blocks: ["เลขคู่","Start",  "IF ตัวเลข % 2 == 0?",  "เลขคี่","รับตัวเลขจากผู้ใช้", "End"],
+    correctMain: ["Start", "รับตัวเลขจากผู้ใช้", "IF ตัวเลข % 2 == 0?", "End"],
+    correctTrue: ["เลขคู่"],
+    correctFalse: ["เลขคี่"],
   },
   {
     title: "Level 6: IF ฝนตก → หยิบร่ม, IF หนาว → ใส่เสื้อกันหนาว",
@@ -249,6 +244,7 @@ function loadLevel(levelIndex: number) {
   if (resultElement) resultElement.innerText = "";
   new Sortable(blocksContainer, { group: "shared", animation: 150 });
   new Sortable(dropzone, { group: "shared", animation: 150 });
+  
   Array.from(document.querySelectorAll(".branch")).forEach((branch) => {
     new Sortable(branch, { group: "shared", animation: 150 });
   });
