diff --git a/src/views/git-bisect-arena/composables/useBisectArena.ts b/src/views/git-bisect-arena/composables/useBisectArena.ts
new file mode 100644
index 00000000..a7b220bc
--- /dev/null
+++ b/src/views/git-bisect-arena/composables/useBisectArena.ts
@@ -0,0 +1,463 @@
+import { computed, ref, watch } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import type { BisectLevel, CommitStatus, Difficulty } from '../types'
+
+const LEVELS: BisectLevel[] = [
+  {
+    id: 1,
+    name: 'First Bug Hunt',
+    difficulty: 'easy',
+    commitCount: 7,
+    badCommit: 5,
+    untestable: [],
+    description: '7 commit tuyến tính. Tìm commit đầu tiên gây lỗi.',
+    hint: 'Bắt đầu từ commit giữa để giảm số bước.',
+  },
+  {
+    id: 2,
+    name: 'Bigger Timeline',
+    difficulty: 'easy',
+    commitCount: 15,
+    badCommit: 11,
+    untestable: [],
+    description: '15 commit với tín hiệu pass/fail ổn định.',
+    hint: 'Giữ chiến thuật chia đôi thay vì đoán ngẫu nhiên.',
+  },
+  {
+    id: 3,
+    name: 'Sharp Split',
+    difficulty: 'easy',
+    commitCount: 31,
+    badCommit: 18,
+    untestable: [],
+    description: 'Độ dài lịch sử tăng mạnh, cần tối ưu số lượt test.',
+    hint: 'Nhìn dải nghi vấn hiện tại rồi test điểm giữa.',
+  },
+  {
+    id: 4,
+    name: 'One Broken Build',
+    difficulty: 'easy',
+    commitCount: 31,
+    badCommit: 24,
+    untestable: [13],
+    description: 'Một commit không thể test được vì build hỏng.',
+    hint: 'Nếu gặp SKIP, quay lại commit giữa bên trái hoặc phải.',
+  },
+  {
+    id: 5,
+    name: 'Skipped Islands',
+    difficulty: 'medium',
+    commitCount: 63,
+    badCommit: 40,
+    untestable: [12, 33, 52],
+    description: 'Nhiều commit skip rải rác làm nhiễu quá trình khoanh vùng.',
+    hint: 'Ưu tiên commit gần midpoint nhưng vẫn test được.',
+  },
+  {
+    id: 6,
+    name: 'Narrow Corridor',
+    difficulty: 'medium',
+    commitCount: 63,
+    badCommit: 27,
+    untestable: [9, 10, 11],
+    description: 'Một cụm commit liền nhau không test được.',
+    hint: 'Đừng mắc kẹt trong cụm SKIP, hãy đổi hướng test.',
+  },
+  {
+    id: 7,
+    name: 'Late Regression',
+    difficulty: 'medium',
+    commitCount: 95,
+    badCommit: 71,
+    untestable: [49, 50],
+    description: 'Bug xuất hiện khá muộn trong lịch sử commit.',
+    hint: 'Nếu nhiều lần PASS, hãy đẩy thấp cận trái lên nhanh.',
+  },
+  {
+    id: 8,
+    name: 'Noisy Middle',
+    difficulty: 'medium',
+    commitCount: 95,
+    badCommit: 58,
+    untestable: [44, 45, 46, 47],
+    description: 'Vùng giữa có chuỗi commit không test được.',
+    hint: 'Tận dụng thông tin từ hai phía của vùng giữa.',
+  },
+  {
+    id: 9,
+    name: 'Long History',
+    difficulty: 'hard',
+    commitCount: 127,
+    badCommit: 64,
+    untestable: [31, 32, 33, 34, 35],
+    description: 'Lịch sử dài và có block SKIP lớn gần vùng trọng tâm.',
+    hint: 'Đừng test dàn trải. Mỗi lượt cần giảm dải nghi vấn rõ rệt.',
+  },
+  {
+    id: 10,
+    name: 'Shifting Window',
+    difficulty: 'hard',
+    commitCount: 127,
+    badCommit: 91,
+    untestable: [70, 71, 72, 90],
+    description: 'Vùng gần culprit chứa nhiều commit khó test.',
+    hint: 'Khi cận phải đã gần, cần test chính xác để chốt nhanh.',
+  },
+  {
+    id: 11,
+    name: 'Dense Chaos',
+    difficulty: 'hard',
+    commitCount: 127,
+    badCommit: 102,
+    untestable: [48, 49, 50, 66, 67, 68, 69, 84],
+    description: 'Nhiều cụm SKIP khiến lựa chọn midpoint thường thất bại.',
+    hint: 'Tìm commit test được gần midpoint nhất.',
+  },
+  {
+    id: 12,
+    name: 'Arena Finale',
+    difficulty: 'hard',
+    commitCount: 127,
+    badCommit: 73,
+    untestable: [24, 25, 26, 62, 63, 74, 75, 76, 109],
+    description: 'Màn cuối tổng hợp lịch sử dài, nhiều SKIP và bẫy quyết định.',
+    hint: 'Chỉ tố cáo khi phạm vi nghi vấn đã thu hẹp đủ nhỏ.',
+  },
+]
+
+const toleranceByDifficulty: Record<Difficulty, number> = {
+  easy: 2,
+  medium: 3,
+  hard: 4,
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function formatCommit(index: number) {
+  return `C${index.toString().padStart(3, '0')}`
+}
+
+export function useBisectArena() {
+  const levelIndex = ref(0)
+  const selectedCommit = ref<number | null>(null)
+  const attempts = ref(0)
+  const solved = ref(false)
+  const stars = ref(0)
+  const candidateStart = ref(1)
+  const candidateEnd = ref(1)
+  const testedStatuses = ref<Record<number, CommitStatus>>({})
+  const logs = ref<string[]>([])
+
+  const unlockedUpTo = useLocalStorage<number>('git-bisect-arena-unlocked-up-to', 1)
+  const bestAttempts = useLocalStorage<Record<string, number>>(
+    'git-bisect-arena-best-attempts',
+    {},
+  )
+  const bestStars = useLocalStorage<Record<string, number>>('git-bisect-arena-best-stars', {})
+
+  const levels = LEVELS
+
+  const currentLevel = computed(() => levels[levelIndex.value] ?? levels[0]!)
+
+  const currentPar = computed(() => Math.ceil(Math.log2(currentLevel.value.commitCount)))
+
+  const maxUnlockedIndex = computed(() => clamp(unlockedUpTo.value - 1, 0, levels.length - 1))
+
+  const canGoPrev = computed(() => levelIndex.value > 0)
+
+  const canGoNext = computed(() => levelIndex.value < maxUnlockedIndex.value)
+
+  const hasNextLevel = computed(() => levelIndex.value < levels.length - 1)
+
+  const levelKey = computed(() => `level-${currentLevel.value.id}`)
+
+  const bestAttemptForCurrent = computed(() => bestAttempts.value[levelKey.value])
+
+  const bestStarsForCurrent = computed(() => bestStars.value[levelKey.value] ?? 0)
+
+  const remainingCandidates = computed(() => {
+    const remaining = candidateEnd.value - candidateStart.value + 1
+    return remaining > 0 ? remaining : 0
+  })
+
+  const testedCommitsCount = computed(() => Object.keys(testedStatuses.value).length)
+
+  const suggestedCommit = computed(() => {
+    if (solved.value || candidateStart.value > candidateEnd.value) {
+      return null
+    }
+
+    const midpoint = Math.floor((candidateStart.value + candidateEnd.value) / 2)
+    const level = currentLevel.value
+
+    if (!level.untestable.includes(midpoint)) {
+      return midpoint
+    }
+
+    for (let offset = 1; offset <= level.commitCount; offset += 1) {
+      const left = midpoint - offset
+      const right = midpoint + offset
+
+      if (
+        left >= candidateStart.value &&
+        left <= candidateEnd.value &&
+        !level.untestable.includes(left)
+      ) {
+        return left
+      }
+
+      if (
+        right >= candidateStart.value &&
+        right <= candidateEnd.value &&
+        !level.untestable.includes(right)
+      ) {
+        return right
+      }
+    }
+
+    return null
+  })
+
+  function appendLog(message: string) {
+    logs.value = [`• ${message}`, ...logs.value].slice(0, 24)
+  }
+
+  function resetLevel() {
+    const level = currentLevel.value
+
+    selectedCommit.value = Math.floor(level.commitCount / 2)
+    attempts.value = 0
+    solved.value = false
+    stars.value = 0
+    candidateStart.value = 1
+    candidateEnd.value = level.commitCount
+    testedStatuses.value = {}
+    logs.value = []
+
+    appendLog(`Màn ${level.id} bắt đầu: ${level.name}`)
+    appendLog(`Phạm vi nghi vấn: ${formatCommit(1)} -> ${formatCommit(level.commitCount)}`)
+  }
+
+  function getStatus(index: number): CommitStatus {
+    return testedStatuses.value[index] ?? 'unknown'
+  }
+
+  function isUntestable(index: number) {
+    return currentLevel.value.untestable.includes(index)
+  }
+
+  function markStatus(index: number, status: CommitStatus) {
+    testedStatuses.value[index] = status
+  }
+
+  function logRange() {
+    appendLog(
+      `Phạm vi hiện tại: ${formatCommit(candidateStart.value)} -> ${formatCommit(candidateEnd.value)}`,
+    )
+  }
+
+  function testCommit(index: number) {
+    const level = currentLevel.value
+
+    if (index < 1 || index > level.commitCount) {
+      return
+    }
+
+    selectedCommit.value = index
+
+    if (solved.value) {
+      appendLog('Màn đã hoàn thành. Hãy sang màn mới hoặc reset để chơi lại.')
+      return
+    }
+
+    const existing = testedStatuses.value[index]
+    if (existing) {
+      appendLog(`${formatCommit(index)} đã được test trước đó (${existing.toUpperCase()}).`)
+      return
+    }
+
+    attempts.value += 1
+
+    if (isUntestable(index)) {
+      markStatus(index, 'skip')
+      appendLog(`${formatCommit(index)}: SKIP (build lỗi, không thể chạy test).`)
+      return
+    }
+
+    if (index < level.badCommit) {
+      markStatus(index, 'pass')
+      candidateStart.value = Math.max(candidateStart.value, index + 1)
+      appendLog(`${formatCommit(index)}: PASS`)
+    } else {
+      markStatus(index, 'fail')
+      candidateEnd.value = Math.min(candidateEnd.value, index)
+      appendLog(`${formatCommit(index)}: FAIL`)
+    }
+
+    logRange()
+
+    if (candidateStart.value === candidateEnd.value) {
+      appendLog(`Đã khoanh vùng còn 1 commit: ${formatCommit(candidateStart.value)}.`)
+    }
+  }
+
+  function calculateStars(nextAttempts: number) {
+    const basePar = currentPar.value
+    const skipBuffer = Math.floor(currentLevel.value.untestable.length / 2)
+    const tolerance = toleranceByDifficulty[currentLevel.value.difficulty]
+
+    const threeStarsThreshold = basePar + tolerance + skipBuffer
+    const twoStarsThreshold = threeStarsThreshold + 3
+
+    if (nextAttempts <= threeStarsThreshold) {
+      return 3
+    }
+
+    if (nextAttempts <= twoStarsThreshold) {
+      return 2
+    }
+
+    return 1
+  }
+
+  function unlockNextLevel() {
+    const nextUnlock = Math.min(currentLevel.value.id + 1, levels.length)
+    if (nextUnlock > unlockedUpTo.value) {
+      unlockedUpTo.value = nextUnlock
+    }
+  }
+
+  function updateBestResult(nextAttempts: number, nextStars: number) {
+    const key = levelKey.value
+    const previousAttempts = bestAttempts.value[key]
+    const previousStars = bestStars.value[key] ?? 0
+
+    if (previousAttempts === undefined || nextAttempts < previousAttempts) {
+      bestAttempts.value = {
+        ...bestAttempts.value,
+        [key]: nextAttempts,
+      }
+    }
+
+    if (nextStars > previousStars) {
+      bestStars.value = {
+        ...bestStars.value,
+        [key]: nextStars,
+      }
+    }
+  }
+
+  function accuseCommit(index: number) {
+    const level = currentLevel.value
+
+    if (index < 1 || index > level.commitCount || solved.value) {
+      return false
+    }
+
+    selectedCommit.value = index
+    attempts.value += 1
+
+    if (index === level.badCommit) {
+      solved.value = true
+      stars.value = calculateStars(attempts.value)
+      unlockNextLevel()
+      updateBestResult(attempts.value, stars.value)
+
+      appendLog(
+        `Chính xác! ${formatCommit(index)} là commit đầu tiên gây lỗi. Bạn nhận ${stars.value} sao.`,
+      )
+      return true
+    }
+
+    appendLog(`Sai rồi: ${formatCommit(index)} không phải culprit commit.`)
+    return false
+  }
+
+  function accuseSelectedCommit() {
+    if (selectedCommit.value === null) {
+      appendLog('Hãy chọn commit trước khi tố cáo.')
+      return false
+    }
+
+    return accuseCommit(selectedCommit.value)
+  }
+
+  function goToLevel(index: number) {
+    const bounded = clamp(index, 0, levels.length - 1)
+    if (bounded > maxUnlockedIndex.value) {
+      appendLog('Màn này chưa mở khóa.')
+      return false
+    }
+
+    levelIndex.value = bounded
+    return true
+  }
+
+  function nextLevel() {
+    if (!canGoNext.value) {
+      return false
+    }
+
+    levelIndex.value += 1
+    return true
+  }
+
+  function prevLevel() {
+    if (!canGoPrev.value) {
+      return false
+    }
+
+    levelIndex.value -= 1
+    return true
+  }
+
+  function resetProgress() {
+    unlockedUpTo.value = 1
+    bestAttempts.value = {}
+    bestStars.value = {}
+    levelIndex.value = 0
+    resetLevel()
+    appendLog('Đã reset toàn bộ tiến trình.')
+  }
+
+  watch(levelIndex, () => {
+    resetLevel()
+  }, { immediate: true })
+
+  return {
+    levels,
+    levelIndex,
+    currentLevel,
+    currentPar,
+    maxUnlockedIndex,
+    canGoPrev,
+    canGoNext,
+    hasNextLevel,
+    selectedCommit,
+    attempts,
+    solved,
+    stars,
+    candidateStart,
+    candidateEnd,
+    testedStatuses,
+    logs,
+    remainingCandidates,
+    testedCommitsCount,
+    suggestedCommit,
+    bestAttemptForCurrent,
+    bestStarsForCurrent,
+    getStatus,
+    isUntestable,
+    testCommit,
+    accuseCommit,
+    accuseSelectedCommit,
+    goToLevel,
+    nextLevel,
+    prevLevel,
+    resetLevel,
+    resetProgress,
+    formatCommit,
+  }
+}
diff --git a/src/views/git-bisect-arena/index.vue b/src/views/git-bisect-arena/index.vue
new file mode 100644
index 00000000..03e82e06
--- /dev/null
+++ b/src/views/git-bisect-arena/index.vue
@@ -0,0 +1,498 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useHead } from '@unhead/vue'
+import { Icon } from '@iconify/vue'
+import { useBisectArena } from './composables/useBisectArena'
+import type { CommitStatus, Difficulty } from './types'
+import metaData from './meta'
+
+useHead({
+  title: `${metaData.name} - Vibe Coding`,
+  meta: [{ name: 'description', content: metaData.description }],
+})
+
+const {
+  levels,
+  levelIndex,
+  currentLevel,
+  currentPar,
+  maxUnlockedIndex,
+  canGoPrev,
+  canGoNext,
+  hasNextLevel,
+  selectedCommit,
+  attempts,
+  solved,
+  stars,
+  candidateStart,
+  candidateEnd,
+  logs,
+  remainingCandidates,
+  testedCommitsCount,
+  suggestedCommit,
+  bestAttemptForCurrent,
+  bestStarsForCurrent,
+  getStatus,
+  testCommit,
+  accuseSelectedCommit,
+  goToLevel,
+  nextLevel,
+  prevLevel,
+  resetLevel,
+  resetProgress,
+  formatCommit,
+} = useBisectArena()
+
+const commitIndices = computed(() =>
+  Array.from({ length: currentLevel.value.commitCount }, (_, index) => index + 1),
+)
+
+const selectedCommitLabel = computed(() => {
+  if (selectedCommit.value === null) return 'Chưa chọn'
+  return formatCommit(selectedCommit.value)
+})
+
+const selectedCommitStatus = computed<CommitStatus>(() => {
+  if (selectedCommit.value === null) return 'unknown'
+  return getStatus(selectedCommit.value)
+})
+
+const filledStars = computed(() =>
+  Array.from({ length: 3 }, (_, index) => index < stars.value),
+)
+
+const statusLabels: Record<CommitStatus, string> = {
+  unknown: 'Chưa test',
+  pass: 'PASS',
+  fail: 'FAIL',
+  skip: 'SKIP',
+}
+
+const statusClasses: Record<CommitStatus, string> = {
+  unknown: 'border-border-default bg-bg-surface text-text-secondary hover:border-accent-sky/70',
+  pass: 'border-accent-sky bg-accent-sky/15 text-accent-sky',
+  fail: 'border-accent-coral bg-accent-coral/15 text-accent-coral',
+  skip: 'border-accent-amber bg-accent-amber/15 text-accent-amber',
+}
+
+const statusBadgeClasses: Record<CommitStatus, string> = {
+  unknown: 'border-border-default bg-bg-deep/60 text-text-secondary',
+  pass: 'border-accent-sky/50 bg-accent-sky/15 text-accent-sky',
+  fail: 'border-accent-coral/50 bg-accent-coral/15 text-accent-coral',
+  skip: 'border-accent-amber/50 bg-accent-amber/15 text-accent-amber',
+}
+
+const difficultyClasses: Record<Difficulty, string> = {
+  easy: 'border-accent-sky/40 bg-accent-sky/10 text-accent-sky',
+  medium: 'border-accent-amber/40 bg-accent-amber/10 text-accent-amber',
+  hard: 'border-accent-coral/40 bg-accent-coral/10 text-accent-coral',
+}
+
+const difficultyLabels: Record<Difficulty, string> = {
+  easy: 'Dễ',
+  medium: 'Trung bình',
+  hard: 'Khó',
+}
+
+function difficultyPillClass(difficulty: Difficulty) {
+  return `border px-3 py-1 text-[10px] font-display tracking-[0.2em] uppercase ${difficultyClasses[difficulty]}`
+}
+
+function isLevelUnlocked(index: number) {
+  return index <= maxUnlockedIndex.value
+}
+
+function levelButtonClass(index: number) {
+  const unlocked = isLevelUnlocked(index)
+  const active = index === levelIndex.value
+  const base =
+    'border px-3 py-2 text-left text-xs font-display tracking-widest transition-all min-h-[62px] flex flex-col justify-center gap-1'
+
+  if (!unlocked) return `${base} border-border-default/40 text-text-dim/70 cursor-not-allowed`
+  if (active) return `${base} border-accent-coral bg-accent-coral/10 text-accent-coral`
+  return `${base} border-border-default text-text-secondary hover:border-accent-sky hover:text-text-primary`
+}
+
+function commitButtonClass(index: number) {
+  const status = getStatus(index)
+  const inRange = index >= candidateStart.value && index <= candidateEnd.value
+  const selected = selectedCommit.value === index
+  const base = 'h-11 border text-[11px] font-mono tracking-wide transition-all duration-200'
+  let classes = `${base} ${statusClasses[status]}`
+  if (!inRange && status === 'unknown') classes += ' opacity-45'
+  if (selected) classes += ' ring-2 ring-accent-amber ring-offset-2 ring-offset-bg-deep'
+  return classes
+}
+
+function onChooseLevel(index: number) {
+  goToLevel(index)
+}
+
+function onSelectCommit(index: number) {
+  testCommit(index)
+}
+
+function onUseSuggestion() {
+  if (suggestedCommit.value === null) return
+  testCommit(suggestedCommit.value)
+}
+
+function onAccuseSelected() {
+  accuseSelectedCommit()
+}
+
+function onPrevLevel() {
+  prevLevel()
+}
+
+function onNextLevel() {
+  nextLevel()
+}
+
+function onResetLevel() {
+  resetLevel()
+}
+
+function onResetProgress() {
+  resetProgress()
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-bg-deep text-text-primary font-body">
+    <div class="mx-auto max-w-[1500px] px-4 py-10 sm:px-6 xl:px-8">
+      <header
+        class="mb-8 border-b border-border-default pb-8 animate-fade-up flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between"
+      >
+        <div>
+          <div class="mb-3 flex items-center gap-3 text-accent-coral font-display text-sm tracking-widest">
+            <Icon icon="lucide:git-branch" class="size-4" />
+            // GIT DEBUG ARENA
+          </div>
+          <h1 class="font-display text-4xl md:text-5xl font-bold tracking-tight">
+            Đấu Trường <span class="text-accent-coral italic">Git Bisect</span>
+          </h1>
+          <p class="mt-3 max-w-2xl text-sm md:text-base text-text-secondary">
+            Luyện tư duy chia đôi để truy tìm commit đầu tiên gây lỗi. Chơi từ level dễ đến khó,
+            mỗi lượt test đều phải làm thu hẹp dải nghi vấn.
+          </p>
+        </div>
+
+        <div class="flex flex-wrap items-center gap-3 animate-fade-up animate-delay-2">
+          <div :class="difficultyPillClass(currentLevel.difficulty)">
+            {{ difficultyLabels[currentLevel.difficulty] }} / {{ currentLevel.difficulty }}
+          </div>
+          <div class="border border-border-default px-3 py-1 text-[10px] font-display tracking-[0.2em] text-text-secondary uppercase">
+            level {{ currentLevel.id }}/{{ levels.length }}
+          </div>
+          <RouterLink
+            to="/"
+            class="inline-flex items-center gap-2 border border-border-default px-3 py-1 text-xs text-text-secondary transition hover:border-accent-sky hover:text-text-primary"
+          >
+            <Icon icon="lucide:home" class="size-4" />
+            Home
+          </RouterLink>
+        </div>
+      </header>
+
+      <main class="grid gap-8 xl:gap-10 lg:grid-cols-12">
+        <section class="space-y-6 lg:col-span-4 2xl:col-span-3">
+          <article class="border border-border-default bg-bg-surface p-6 animate-fade-up animate-delay-2">
+            <h2 class="mb-4 font-display text-xl font-semibold flex items-center gap-3">
+              <span class="text-accent-sky text-sm tracking-widest">//</span>
+              Cách chơi nhanh
+            </h2>
+
+            <div class="space-y-4 text-sm text-text-secondary">
+              <div>
+                <p class="mb-2 font-display text-xs tracking-widest uppercase text-text-primary">
+                  Cách chơi
+                </p>
+                <ol class="space-y-2 list-decimal pl-5">
+                  <li>Chọn một commit trong Commit Arena để chạy test.</li>
+                  <li>PASS nghĩa là lỗi nằm bên phải commit đó, FAIL nghĩa là lỗi ở commit đó hoặc bên trái.</li>
+                  <li>SKIP nghĩa là commit không test được, hãy chọn commit khác để tiếp tục khoanh vùng.</li>
+                  <li>Khi đủ tự tin, bấm Tố cáo commit đang chọn.</li>
+                </ol>
+              </div>
+
+              <div class="border-t border-border-default/60 pt-4">
+                <p class="mb-2 font-display text-xs tracking-widest uppercase text-accent-coral">
+                  Điều kiện qua màn
+                </p>
+                <ul class="space-y-2 list-disc pl-5">
+                  <li>Chỉ qua màn khi tố cáo đúng commit đầu tiên gây lỗi.</li>
+                  <li>Tố cáo sai sẽ không thua ngay, nhưng tốn thêm lượt thao tác.</li>
+                  <li>Thắng màn sẽ mở khóa level tiếp theo và được chấm sao theo số lượt dùng.</li>
+                </ul>
+              </div>
+            </div>
+          </article>
+
+          <article class="border border-border-default bg-bg-surface p-6 animate-fade-up animate-delay-3">
+            <h2 class="mb-4 font-display text-xl font-semibold flex items-center gap-3">
+              <span class="text-accent-amber text-sm tracking-widest">//</span>
+              Git Bisect CLI
+            </h2>
+
+            <div class="space-y-3 text-xs">
+              <div class="border border-border-default/60 bg-bg-deep/50 px-3 py-2">
+                <p class="font-display tracking-widest text-accent-sky mb-1">Bắt đầu bisect</p>
+                <p class="font-mono text-text-primary">git bisect start</p>
+              </div>
+              <div class="border border-border-default/60 bg-bg-deep/50 px-3 py-2">
+                <p class="font-display tracking-widest text-accent-sky mb-1">Đánh dấu mốc tốt/xấu</p>
+                <p class="font-mono text-text-primary">git bisect good &lt;commit&gt;</p>
+                <p class="font-mono text-text-primary">git bisect bad &lt;commit&gt;</p>
+              </div>
+              <div class="border border-border-default/60 bg-bg-deep/50 px-3 py-2">
+                <p class="font-display tracking-widest text-accent-sky mb-1">Trong khi test</p>
+                <p class="font-mono text-text-primary">git bisect good</p>
+                <p class="font-mono text-text-primary">git bisect bad</p>
+                <p class="font-mono text-text-primary">git bisect skip</p>
+              </div>
+              <div class="border border-border-default/60 bg-bg-deep/50 px-3 py-2">
+                <p class="font-display tracking-widest text-accent-sky mb-1">Kết thúc</p>
+                <p class="font-mono text-text-primary">git bisect reset</p>
+              </div>
+            </div>
+          </article>
+
+          <article class="border border-border-default bg-bg-surface p-6 animate-fade-up animate-delay-2">
+            <h2 class="mb-4 font-display text-xl font-semibold flex items-center gap-3">
+              <span class="text-accent-coral text-sm tracking-widest">//</span>
+              Mục tiêu level
+            </h2>
+            <p class="text-sm text-text-secondary leading-relaxed">{{ currentLevel.description }}</p>
+            <div class="mt-4 border-l-4 border-accent-amber bg-bg-deep/60 p-3 text-xs text-accent-amber">
+              Gợi ý: {{ currentLevel.hint }}
+            </div>
+          </article>
+
+          <article class="border border-border-default bg-bg-surface p-6 animate-fade-up animate-delay-3">
+            <h2 class="mb-4 font-display text-xl font-semibold flex items-center gap-3">
+              <span class="text-accent-amber text-sm tracking-widest">//</span>
+              Trạng thái truy vết
+            </h2>
+            <div class="space-y-3 text-sm">
+              <div class="flex items-center justify-between border-b border-border-default/60 pb-2">
+                <span class="text-text-secondary">Phạm vi nghi vấn</span>
+                <strong class="font-mono text-accent-sky">
+                  {{ formatCommit(candidateStart) }} -> {{ formatCommit(candidateEnd) }}
+                </strong>
+              </div>
+              <div class="flex items-center justify-between border-b border-border-default/60 pb-2">
+                <span class="text-text-secondary">Commit đã test</span>
+                <strong class="font-display text-text-primary">{{ testedCommitsCount }}</strong>
+              </div>
+              <div class="flex items-center justify-between border-b border-border-default/60 pb-2">
+                <span class="text-text-secondary">Commit còn nghi vấn</span>
+                <strong class="font-display text-accent-coral">{{ remainingCandidates }}</strong>
+              </div>
+              <div class="flex items-center justify-between border-b border-border-default/60 pb-2">
+                <span class="text-text-secondary">Số lượt đã dùng</span>
+                <strong class="font-display text-text-primary">{{ attempts }}</strong>
+              </div>
+              <div class="flex items-center justify-between">
+                <span class="text-text-secondary">PAR tối ưu</span>
+                <strong class="font-display text-accent-amber">{{ currentPar }}</strong>
+              </div>
+            </div>
+          </article>
+
+          <article class="border border-border-default bg-bg-surface p-6 animate-fade-up animate-delay-4">
+            <h2 class="mb-4 font-display text-xl font-semibold flex items-center gap-3">
+              <span class="text-accent-sky text-sm tracking-widest">//</span>
+              Thành tích
+            </h2>
+            <div class="space-y-3 text-sm">
+              <div class="flex items-center justify-between">
+                <span class="text-text-secondary">Best attempts</span>
+                <strong class="font-display text-text-primary">{{ bestAttemptForCurrent ?? '-' }}</strong>
+              </div>
+              <div class="flex items-center justify-between">
+                <span class="text-text-secondary">Best stars</span>
+                <div class="flex items-center gap-1">
+                  <Icon
+                    v-for="(filled, index) in Array.from({ length: 3 }, (_, i) => i < bestStarsForCurrent)"
+                    :key="`best-${index}`"
+                    icon="lucide:star"
+                    class="size-4"
+                    :class="filled ? 'text-accent-amber fill-current' : 'text-border-default'"
+                  />
+                </div>
+              </div>
+            </div>
+          </article>
+        </section>
+
+        <section class="space-y-6 lg:col-span-8 2xl:col-span-9">
+          <article class="border border-border-default bg-bg-surface p-6 animate-fade-up animate-delay-2">
+            <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
+              <h2 class="font-display text-xl font-semibold flex items-center gap-3">
+                <span class="text-accent-coral text-sm tracking-widest">//</span>
+                Commit Arena
+              </h2>
+              <div class="flex flex-wrap items-center gap-2 text-xs">
+                <span class="border border-accent-sky/40 bg-accent-sky/10 px-2 py-1 text-accent-sky">PASS</span>
+                <span class="border border-accent-coral/40 bg-accent-coral/10 px-2 py-1 text-accent-coral">FAIL</span>
+                <span class="border border-accent-amber/40 bg-accent-amber/10 px-2 py-1 text-accent-amber">SKIP</span>
+              </div>
+            </div>
+
+            <p class="mb-4 text-sm text-text-secondary">
+              Chạm vào commit để test. Khi đủ tự tin, bấm tố cáo commit đã chọn để chốt culprit.
+            </p>
+
+            <div class="mb-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+              <div class="border border-border-default/70 bg-bg-deep/50 px-3 py-2 text-xs">
+                <p class="text-text-dim mb-1">Commit đang chọn</p>
+                <div class="flex items-center justify-between gap-2">
+                  <strong class="font-mono text-accent-amber">{{ selectedCommitLabel }}</strong>
+                  <span
+                    :class="`border px-2 py-1 text-[10px] font-display tracking-widest uppercase ${statusBadgeClasses[selectedCommitStatus]}`"
+                  >
+                    {{ statusLabels[selectedCommitStatus] }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="border border-border-default/70 bg-bg-deep/50 px-3 py-2 text-xs">
+                <p class="text-text-dim mb-1">Gợi ý lần test tiếp theo</p>
+                <strong class="font-mono text-accent-sky">
+                  {{ suggestedCommit ? formatCommit(suggestedCommit) : 'Không khả dụng' }}
+                </strong>
+              </div>
+
+              <div class="border border-border-default/70 bg-bg-deep/50 px-3 py-2 text-xs sm:col-span-2 lg:col-span-1">
+                <p class="text-text-dim mb-1">Nhịp độ hiện tại</p>
+                <strong class="font-display text-text-primary">{{ attempts }} lượt / PAR {{ currentPar }}</strong>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-[repeat(auto-fill,minmax(3.1rem,1fr))] gap-2 sm:gap-2.5 max-h-[520px] overflow-y-auto pr-2">
+              <button
+                v-for="commit in commitIndices"
+                :key="commit"
+                :class="commitButtonClass(commit)"
+                :title="`Test ${formatCommit(commit)}`"
+                @click="onSelectCommit(commit)"
+              >
+                {{ commit.toString().padStart(3, '0') }}
+              </button>
+            </div>
+
+            <div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+              <button
+                class="border border-border-default px-4 py-3 text-xs font-display tracking-widest text-text-secondary transition hover:border-accent-sky hover:text-accent-sky disabled:opacity-50 disabled:cursor-not-allowed"
+                :disabled="suggestedCommit === null"
+                @click="onUseSuggestion"
+              >
+                Test gợi ý {{ suggestedCommit ? formatCommit(suggestedCommit) : '' }}
+              </button>
+              <button
+                class="border border-accent-coral px-4 py-3 text-xs font-display tracking-widest text-accent-coral transition hover:bg-accent-coral/10 disabled:opacity-50 disabled:cursor-not-allowed"
+                :disabled="selectedCommit === null || solved"
+                @click="onAccuseSelected"
+              >
+                Tố cáo {{ selectedCommitLabel }}
+              </button>
+              <button
+                class="border border-border-default px-4 py-3 text-xs font-display tracking-widest text-text-secondary transition hover:border-accent-amber hover:text-accent-amber"
+                @click="onResetLevel"
+              >
+                Reset level
+              </button>
+              <button
+                class="border border-border-default px-4 py-3 text-xs font-display tracking-widest text-text-secondary transition hover:border-accent-coral hover:text-accent-coral"
+                @click="onResetProgress"
+              >
+                Reset progress
+              </button>
+            </div>
+
+            <div
+              v-if="solved"
+              class="mt-6 border border-accent-amber bg-accent-amber/10 p-4 animate-fade-up"
+            >
+              <div class="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <p class="font-display text-lg text-accent-amber">Hoàn thành level {{ currentLevel.id }}!</p>
+                  <p class="text-sm text-text-secondary">
+                    Bạn chốt đúng culprit với {{ attempts }} lượt thao tác.
+                  </p>
+                </div>
+                <div class="flex items-center gap-1">
+                  <Icon
+                    v-for="(filled, index) in filledStars"
+                    :key="`solved-${index}`"
+                    icon="lucide:star"
+                    class="size-5"
+                    :class="filled ? 'text-accent-amber fill-current' : 'text-border-default'"
+                  />
+                </div>
+              </div>
+              <button
+                v-if="hasNextLevel && canGoNext"
+                class="mt-4 border border-accent-sky px-4 py-2 text-xs font-display tracking-widest text-accent-sky transition hover:bg-accent-sky/10"
+                @click="onNextLevel"
+              >
+                Sang level tiếp theo
+              </button>
+            </div>
+          </article>
+
+          <article class="border border-border-default bg-bg-surface p-6 animate-fade-up animate-delay-3">
+            <h2 class="mb-4 font-display text-xl font-semibold flex items-center gap-3">
+              <span class="text-accent-amber text-sm tracking-widest">//</span>
+              Mission Log
+            </h2>
+            <ul class="space-y-2 text-xs font-mono text-text-secondary max-h-56 overflow-y-auto pr-2">
+              <li v-for="(line, index) in logs" :key="`${line}-${index}`">
+                {{ line }}
+              </li>
+            </ul>
+          </article>
+
+          <article class="border border-border-default bg-bg-surface p-6 animate-fade-up animate-delay-4">
+            <div class="mb-4 flex items-center justify-between gap-4">
+              <h2 class="font-display text-xl font-semibold flex items-center gap-3">
+                <span class="text-accent-sky text-sm tracking-widest">//</span>
+                Level Select
+              </h2>
+              <div class="flex items-center gap-2">
+                <button
+                  class="border border-border-default px-3 py-2 text-xs text-text-secondary transition hover:border-accent-sky hover:text-accent-sky disabled:opacity-40 disabled:cursor-not-allowed"
+                  :disabled="!canGoPrev"
+                  @click="onPrevLevel"
+                >
+                  <Icon icon="lucide:chevron-left" class="size-4" />
+                </button>
+                <button
+                  class="border border-border-default px-3 py-2 text-xs text-text-secondary transition hover:border-accent-sky hover:text-accent-sky disabled:opacity-40 disabled:cursor-not-allowed"
+                  :disabled="!canGoNext"
+                  @click="onNextLevel"
+                >
+                  <Icon icon="lucide:chevron-right" class="size-4" />
+                </button>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
+              <button
+                v-for="(level, index) in levels"
+                :key="level.id"
+                :class="levelButtonClass(index)"
+                :disabled="!isLevelUnlocked(index)"
+                @click="onChooseLevel(index)"
+              >
+                <span class="text-text-primary">L{{ level.id }} · {{ difficultyLabels[level.difficulty] }}</span>
+                <span class="text-[10px] text-text-dim normal-case tracking-normal">{{ level.name }}</span>
+              </button>
+            </div>
+          </article>
+        </section>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/src/views/git-bisect-arena/meta.ts b/src/views/git-bisect-arena/meta.ts
new file mode 100644
index 00000000..967b4ee4
--- /dev/null
+++ b/src/views/git-bisect-arena/meta.ts
@@ -0,0 +1,11 @@
+import type { PageMeta } from '@/types/page'
+
+const meta: PageMeta = {
+  name: 'Đấu Trường Git Bisect',
+  description: 'Game luyện tư duy git bisect với cấp độ từ dễ đến khó',
+  author: 'trinhminhnhat',
+  facebook: 'https://www.facebook.com/iamtrinhminhnhat',
+  category: 'game',
+}
+
+export default meta
diff --git a/src/views/git-bisect-arena/types.ts b/src/views/git-bisect-arena/types.ts
new file mode 100644
index 00000000..c74bd526
--- /dev/null
+++ b/src/views/git-bisect-arena/types.ts
@@ -0,0 +1,20 @@
+export type Difficulty = 'easy' | 'medium' | 'hard'
+
+export type CommitStatus = 'unknown' | 'pass' | 'fail' | 'skip'
+
+export interface BisectLevel {
+  id: number
+  name: string
+  difficulty: Difficulty
+  commitCount: number
+  badCommit: number
+  untestable: number[]
+  description: string
+  hint: string
+}
+
+export interface LevelResult {
+  attempts: number
+  stars: number
+  par: number
+}