diff --git a/docusaurus.config.js b/docusaurus.config.js
index 416b1d0..c17119d 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -74,7 +74,7 @@ module.exports = {
           position: "right",
         },
         { to: "blog/", label: "Blog", position: "right" },
-        { to: "projects/", label: "Projects", position: "right" },
+        { to: "minesweeper/", label: "Games", position: "right" },
         {
           href: "https://behitek.com/pdf/resume.pdf",
           label: "Resume",
diff --git a/src/pages/minesweeper/index.js b/src/pages/minesweeper/index.js
new file mode 100644
index 0000000..faa6fe6
--- /dev/null
+++ b/src/pages/minesweeper/index.js
@@ -0,0 +1,219 @@
+import Layout from '@theme/Layout';
+import React, { useEffect, useState } from 'react';
+import styles from './styles.module.css';
+
+const DIFFICULTIES = {
+    easy: { rows: 8, cols: 8, mines: 10 },
+    medium: { rows: 16, cols: 16, mines: 40 },
+    hard: { rows: 16, cols: 30, mines: 99 }
+};
+
+const createBoard = (rows, cols, mines) => {
+    const board = Array(rows).fill().map(() =>
+        Array(cols).fill().map(() => ({
+            isMine: false,
+            isRevealed: false,
+            isFlagged: false,
+            neighborMines: 0
+        }))
+    );
+
+    // Place mines randomly
+    let minesPlaced = 0;
+    while (minesPlaced < mines) {
+        const row = Math.floor(Math.random() * rows);
+        const col = Math.floor(Math.random() * cols);
+        if (!board[row][col].isMine) {
+            board[row][col].isMine = true;
+            minesPlaced++;
+        }
+    }
+
+    // Calculate neighbor mines
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+            if (!board[row][col].isMine) {
+                let count = 0;
+                for (let i = -1; i <= 1; i++) {
+                    for (let j = -1; j <= 1; j++) {
+                        if (row + i >= 0 && row + i < rows && col + j >= 0 && col + j < cols) {
+                            if (board[row + i][col + j].isMine) count++;
+                        }
+                    }
+                }
+                board[row][col].neighborMines = count;
+            }
+        }
+    }
+
+    return board;
+};
+
+const MinesweeperGame = () => {
+    const [difficulty, setDifficulty] = useState('medium');
+    const [board, setBoard] = useState([]);
+    const [gameOver, setGameOver] = useState(false);
+    const [gameWon, setGameWon] = useState(false);
+    const [flagsPlaced, setFlagsPlaced] = useState(0);
+    const [time, setTime] = useState(0);
+    const [timerActive, setTimerActive] = useState(false);
+
+    useEffect(() => {
+        resetGame();
+    }, [difficulty]);
+
+    useEffect(() => {
+        let interval;
+        if (timerActive && !gameOver && !gameWon) {
+            interval = setInterval(() => {
+                setTime(prevTime => prevTime + 1);
+            }, 1000);
+        }
+        return () => clearInterval(interval);
+    }, [timerActive, gameOver, gameWon]);
+
+    const resetGame = () => {
+        const { rows, cols, mines } = DIFFICULTIES[difficulty];
+        setBoard(createBoard(rows, cols, mines));
+        setGameOver(false);
+        setGameWon(false);
+        setFlagsPlaced(0);
+        setTime(0);
+        setTimerActive(false);
+    };
+
+    const revealCell = (row, col) => {
+        if (gameOver || gameWon || board[row][col].isRevealed || board[row][col].isFlagged) return;
+
+        if (!timerActive) {
+            setTimerActive(true);
+        }
+
+        const newBoard = [...board];
+
+        if (newBoard[row][col].isMine) {
+            // Game Over - reveal all mines
+            newBoard.forEach(row => row.forEach(cell => {
+                if (cell.isMine) cell.isRevealed = true;
+            }));
+            setGameOver(true);
+        } else {
+            // Reveal clicked cell and neighbors if empty
+            const revealNeighbors = (r, c) => {
+                if (r < 0 || r >= board.length || c < 0 || c >= board[0].length) return;
+                if (newBoard[r][c].isRevealed || newBoard[r][c].isFlagged) return;
+
+                newBoard[r][c].isRevealed = true;
+
+                if (newBoard[r][c].neighborMines === 0) {
+                    for (let i = -1; i <= 1; i++) {
+                        for (let j = -1; j <= 1; j++) {
+                            revealNeighbors(r + i, c + j);
+                        }
+                    }
+                }
+            };
+
+            revealNeighbors(row, col);
+        }
+
+        setBoard(newBoard);
+
+        // Check for win
+        const unrevealedCount = newBoard.flat().filter(cell => !cell.isRevealed).length;
+        if (unrevealedCount === DIFFICULTIES[difficulty].mines) {
+            setGameWon(true);
+        }
+    };
+
+    const toggleFlag = (row, col, e) => {
+        e.preventDefault();
+        if (gameOver || gameWon || board[row][col].isRevealed) return;
+
+        const newBoard = [...board];
+        const cell = newBoard[row][col];
+
+        if (!cell.isFlagged && flagsPlaced >= DIFFICULTIES[difficulty].mines) return;
+
+        cell.isFlagged = !cell.isFlagged;
+        setFlagsPlaced(prev => cell.isFlagged ? prev + 1 : prev - 1);
+        setBoard(newBoard);
+    };
+
+    const renderCell = (cell, row, col) => {
+        let content = '';
+        let className = styles.cell;
+
+        if (cell.isRevealed) {
+            className += ` ${styles.revealed}`;
+            if (cell.isMine) {
+                content = '💣';
+                className += ` ${styles.mine}`;
+            } else if (cell.neighborMines > 0) {
+                content = cell.neighborMines;
+                className += ` ${styles[`number-${cell.neighborMines}`]}`;
+            }
+        } else if (cell.isFlagged) {
+            content = '🚩';
+            className += ` ${styles.flag}`;
+        }
+
+        return (
+            <button
+                key={`${row}-${col}`}
+                className={className}
+                onClick={() => revealCell(row, col)}
+                onContextMenu={(e) => toggleFlag(row, col, e)}
+            >
+                {content}
+            </button>
+        );
+    };
+
+    return (
+        <Layout title="Minesweeper">
+            <div className={styles.container}>
+                <div className={styles.header}>
+                    <h1 className={styles.title}>Minesweeper</h1>
+                </div>
+
+                <div className={styles.gameContainer}>
+                    <div className={styles.controls}>
+                        {Object.keys(DIFFICULTIES).map(mode => (
+                            <button
+                                key={mode}
+                                className={`${styles.button} ${mode === difficulty ? styles.active : ''}`}
+                                onClick={() => setDifficulty(mode)}
+                            >
+                                {mode.charAt(0).toUpperCase() + mode.slice(1)}
+                            </button>
+                        ))}
+                        <button className={styles.button} onClick={resetGame}>Reset</button>
+                    </div>
+
+                    <div className={styles.gameStatus}>
+                        <span>💣 {DIFFICULTIES[difficulty].mines - flagsPlaced}</span>
+                        <span>⏱️ {String(Math.floor(time / 60)).padStart(2, '0')}:{String(time % 60).padStart(2, '0')}</span>
+                        <span>
+                            {gameOver ? '💥 Game Over!' : gameWon ? '🎉 You Win!' : 'Playing...'}
+                        </span>
+                    </div>
+
+                    <div
+                        className={styles.grid}
+                        style={{
+                            gridTemplateColumns: `repeat(${DIFFICULTIES[difficulty].cols}, 30px)`,
+                            gridTemplateRows: `repeat(${DIFFICULTIES[difficulty].rows}, 30px)`
+                        }}
+                    >
+                        {board.map((row, rowIndex) =>
+                            row.map((cell, colIndex) => renderCell(cell, rowIndex, colIndex))
+                        )}
+                    </div>
+                </div>
+            </div>
+        </Layout>
+    );
+};
+
+export default MinesweeperGame;
\ No newline at end of file
diff --git a/src/pages/minesweeper/styles.module.css b/src/pages/minesweeper/styles.module.css
new file mode 100644
index 0000000..9a15f90
--- /dev/null
+++ b/src/pages/minesweeper/styles.module.css
@@ -0,0 +1,218 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  padding: 2rem;
+  background: linear-gradient(45deg, #2c3e50, #3498db);
+}
+
+.gameContainer {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  margin-top: 2rem;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.title {
+  font-size: 2.5rem;
+  color: #fff;
+  margin-bottom: 1rem;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.controls {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  justify-content: center;
+}
+
+.button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: #fff;
+  color: #2c3e50;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.button.active {
+  background: #3498db;
+  color: #fff;
+}
+
+.button:last-child {
+  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
+  color: white;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.button:last-child:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
+  background: linear-gradient(45deg, #ff8e53, #ff6b6b);
+}
+
+.button:last-child:active {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
+}
+
+.gameStatus {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(52, 73, 94, 0.8);
+  backdrop-filter: blur(10px);
+  padding: 0.5rem 1rem;
+  border-radius: 12px;
+  color: #fff;
+  margin-bottom: 1rem;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  position: relative;
+}
+
+.gameStatus > * {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.9rem;
+}
+
+.gameStatus > * {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.grid {
+  display: grid;
+  gap: 0.5px;
+  background: #34495e;
+  padding: 0.5px;
+  border-radius: 4px;
+  width: fit-content;
+  margin: 0 auto;
+  overflow-x: auto;
+  max-width: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+
+.cell {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #ffffff;
+  border: none;
+  font-weight: bold;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cell:hover {
+  background: #e2e8f0;
+}
+
+.cell.revealed {
+  background: #e2e2e2;
+}
+
+.cell.mine {
+  background: #ff4444;
+  animation: explode 0.5s ease-out;
+}
+
+@keyframes explode {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+    background: #ffeb3b;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+    background: #ff9800;
+  }
+  100% {
+    transform: scale(1);
+    background: #ff4444;
+  }
+}
+
+.cell.flag {
+  background: #ffd700;
+}
+
+.number-1 { color: #3498db; }
+.number-2 { color: #2ecc71; }
+.number-3 { color: #e74c3c; }
+.number-4 { color: #8e44ad; }
+.number-5 { color: #c0392b; }
+.number-6 { color: #16a085; }
+.number-7 { color: #2c3e50; }
+.number-8 { color: #7f8c8d; }
+
+@media (max-width: 768px) {
+  .container {
+    padding: 1rem;
+  }
+
+  .gameContainer {
+    padding: 1rem;
+  }
+
+  .cell {
+    width: 25px;
+    height: 25px;
+    font-size: 0.9rem;
+  }
+
+  .title {
+    font-size: 2rem;
+  }
+
+  .mobileWarning {
+    background: rgba(255, 193, 7, 0.2);
+    color: #856404;
+    padding: 0.75rem;
+    border-radius: 6px;
+    margin-bottom: 1rem;
+    text-align: center;
+    font-size: 0.9rem;
+    border: 1px solid rgba(255, 193, 7, 0.3);
+  }
+
+  .grid {
+    padding: 0.5px 0.5px 0.5px;
+    margin: 0 -1rem;
+    border-radius: 0;
+  }
+}
\ No newline at end of file