diff --git a/app/assets/stylesheets/pages.scss b/app/assets/stylesheets/pages.scss
index 33d6157..421e5c2 100644
--- a/app/assets/stylesheets/pages.scss
+++ b/app/assets/stylesheets/pages.scss
@@ -163,4 +163,124 @@ h1 {
 
 .btn-4 span:hover:after {
     width: 100%;
-}
\ No newline at end of file
+}
+
+td {
+	border        : 2px solid #333;
+	height        : 100px;
+	width         : 100px;
+	text-align    : center;
+	vertical-align: middle;
+	font-size     : 70px;
+	cursor        : pointer;
+	box-shadow    : 0 2px 10px rgba(0, 0, 0, .3);
+}
+
+table tr:first-child td {
+	border-top: 5px solid #333;
+}
+
+table tr:last-child td {
+	border-bottom: 5px solid #333;
+}
+
+table tr td:first-child {
+	border-left: 5px solid #333;
+}
+
+table tr td:last-child {
+	border-right: 5px solid #333;
+}
+
+table {
+	border-collapse: collapse;
+	position       : absolute;
+	left           : 50%;
+	margin-left    : -155px;
+	top            : 250px;
+}
+
+.endgame {
+	display         : none;
+	width           : 200px;
+	top             : 320px;
+	background-color: rgba(37, 167, 54, 0.8);
+	position        : absolute;
+	left            : 50%;
+	margin-left     : -100px;
+	padding-top     : 50px;
+	padding-bottom  : 50px;
+	text-align      : center;
+	border-radius   : 5px;
+	color           : white;
+	font-size       : 2em;
+}
+
+.btn-2 {
+    background: rgb(96, 9, 240);
+    color        : #fff;
+	background: linear-gradient(0deg, rgba(96, 9, 240, 1) 0%, rgba(129, 5, 240, 1) 100%);
+    border    : none;
+    box-shadow   : inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
+		7px 7px 20px 0px rgba(0, 0, 0, .1),
+		4px 4px 5px 0px rgba(0, 0, 0, .1);
+
+}
+
+.btn-2:before {
+	height: 0%;
+	width : 2px;
+}
+
+.btn-2:hover {
+	box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
+		-4px -4px 6px 0 rgba(116, 125, 136, .5),
+		inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
+		inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
+}
+
+@media (min-width: 1080px) {
+	.replay {
+		left           : 45%;
+		position       : relative;
+		display        : inline-block;
+		padding        : 1.2em 2em;
+		text-decoration: none;
+		text-align     : center;
+		cursor         : pointer;
+		user-select    : none;
+		color          : white;
+	}
+
+	.replay::before {
+		content      : '';
+		position     : absolute;
+		top          : 0;
+		left         : 0%;
+		bottom       : 0;
+		right        : 0;
+		background   : linear-gradient(135deg, #6e8efb, #a777e3);
+		border-radius: 4px;
+		transition   : box-shadow .5s ease, transform .2s ease;
+		will-change  : transform;
+		box-shadow   : 0 2px 5px rgba(0, 0, 0, .2);
+		transform    :
+			translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(var(--tz, -12px));
+	}
+
+	.replay:hover::before {
+		box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
+	}
+
+	.replay::after {
+		position      : relative;
+		display       : inline-block;
+		content       : attr(data-title);
+		transition    : transform .2s ease;
+		font-weight   : bold;
+		letter-spacing: .01em;
+		will-change   : transform;
+		transform     :
+			translateY(var(--ty, 0)) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
+	}
+}
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
index de03c88..2c068b1 100644
--- a/app/views/layouts/_navbar.html.erb
+++ b/app/views/layouts/_navbar.html.erb
@@ -17,6 +17,9 @@
       <li class="nav-item">
         <%= link_to "Two players", twoplayers_path, class:'nav-link' %>
       </li>
+      <li class="nav-item">
+       <%= link_to "Invincible AI Game!", invincible_path, class:'nav-link  ' %>
+      </li>
     </ul>
     <ul class="navbar-nav ml-auto">
       <% if current_user %>
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
index 56ba4ee..6922cc0 100644
--- a/app/views/pages/home.html.erb
+++ b/app/views/pages/home.html.erb
@@ -10,6 +10,7 @@
     <%= link_to "Two players!", twoplayers_path, class:'custom-btn btn-5' %>
     <br />
     <br />
+    <%= link_to "Invincible AI Game!", invincible_path, class:'custom-btn btn-5' %>
     <hr>
     <% if current_user %>
       <%= link_to "Logout", destroy_user_session_path, class:'custom-btn btn-4', method: :delete %>
diff --git a/app/views/pages/invincible.html.erb b/app/views/pages/invincible.html.erb
index d84e2a7..10fb5ae 100644
--- a/app/views/pages/invincible.html.erb
+++ b/app/views/pages/invincible.html.erb
@@ -1,202 +1,237 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
-<div class="container" style="text-align: center">
-  <div style="font-size: 32px" id="result"></div>
-  <button class="replay" onClick="newGame()" data-title="Replay Tic Tac Toe">Replay Tic Tac Toe</button>
+<table style='font-family: "Comic Sans MS", cursive, sans-serif;'>
+    <tr>
+        <td class="cell" id='0'></td>
+        <td class="cell" id='1'></td>
+        <td class="cell" id='2'></td>
+    </tr>
+    <tr>
+        <td class="cell" id='3'></td>
+        <td class="cell" id='4'></td>
+        <td class="cell" id='5'></td>
+    </tr>
+    <tr>
+        <td class="cell" id='6'></td>
+        <td class="cell" id='7'></td>
+        <td class="cell" id='8'></td>
+    </tr>
+</table>
+<div class="endgame">
+    <div class="text"></div>
+    <button class="btn-2" onClick="startGame()">Replay</button>
 </div>
+<br><br><br>
+<a class="replay" onClick="startGame()" data-title="Replay Tic Tac Toe"></a>
 <script>
-  let board;
-var resultText = document.getElementById("result");
-  let w; // = width / 3;
-  let h; // = height / 3;
-  let ai = 'X';
-  let human = 'O';
-  let currentPlayer = human;
-
-  function newGame() {
-      noLoop();
-      resultText.innerHTML = "No winner yet";
-      board = [
-          ['', '', ''],
-          ['', '', ''],
-          ['', '', '']
-      ]
-      loop();
-  }
-
-  function setup() {
-    createCanvas(500, 500);
-    w = width / 3;
-    h = height / 3;
-    newGame();
-    bestMove();
-  }
-  
-  function equals3(a, b, c) {
-    return a == b && b == c && a != '';
-  }
-  
-  function checkWinner() {
-    let winner = null;
-  
-    // horizontal
-    for (let i = 0; i < 3; i++) {
-      if (equals3(board[i][0], board[i][1], board[i][2])) {
-        winner = board[i][0];
-      }
-    }
-  
-    // Vertical
-    for (let i = 0; i < 3; i++) {
-      if (equals3(board[0][i], board[1][i], board[2][i])) {
-        winner = board[0][i];
-      }
-    }
-  
-    // Diagonal
-    if (equals3(board[0][0], board[1][1], board[2][2])) {
-      winner = board[0][0];
+var origBoard;
+const oPlayer = 'O';
+const aiPlayer = 'X'
+const winCombos = [
+    //horizontal
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    //vertical
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    //slant
+    [0, 4, 8],
+    [6, 4, 2]
+]
+
+const cells = document.querySelectorAll('.cell');
+startGame();
+
+function startGame() {
+    document.querySelector(".endgame").style.display = "none";
+    origBoard = Array.from(Array(9).keys());
+    // console.log(origBoard);
+    for (var i = 0; i < cells.length; i++) {
+        cells[i].innerText = ''; //clear
+        cells[i].style.removeProperty('background-color');
+        //add a event process vào click mouse event
+        cells[i].addEventListener('click', turnClick, false);
     }
-    if (equals3(board[2][0], board[1][1], board[0][2])) {
-      winner = board[2][0];
+}
+
+
+function turnClick(square) {
+    // // write down the ID of any cell clicked
+    // console.log(square.target.id)
+
+    if (typeof origBoard[square.target.id] == 'number') { //If the clicked ID is "number", it means that both human and AI have not played in that position. So.....
+        // pass in the ID that clicking 
+        turn(square.target.id, oPlayer)
+
+        //After the player takes a turn, check to see if there is a tie
+        if (!checkTie()) turn(bestSpot(), aiPlayer);
     }
-  
-    let openSpots = 0;
-    for (let i = 0; i < 3; i++) {
-      for (let j = 0; j < 3; j++) {
-        if (board[i][j] == '') {
-          openSpots++;
+}
+
+function turn(squareId, objectPlayer) {
+    origBoard[squareId] = objectPlayer; //shows the player who has clicked the cell
+    document.getElementById(squareId).innerText = objectPlayer; //put more string in the cell with the ID just called
+
+    let gameWon = checkWin(origBoard, objectPlayer) //check win
+    if (gameWon) gameOver(gameWon)
+}
+
+function checkWin(board, player) {
+    let plays = board.reduce((a, e, i) =>
+        (e === player) ? a.concat(i) : a, []); /* Use the minify method which will go through every element in the board array. And the concat function will not change the current array, but it will return a new array that will contain the values of the arrays passed in.
+    // a is the final value to be returned
+    // e is the element in the board array we are running through and indexing*/
+    let gameWon = null;
+    for (let [index, win] of winCombos.entries())
+    /* entries: Returns the enumerable property array of [key, value] pairs with the given object, similar to using the for ... in iteration. */ {
+        if (win.every(elem => plays.indexOf(elem) > -1))
+        //In essence the every function has the same effect as using a loop to loop through all elements of the array. 
+        //The indexOf function will look for an element in the array based on the value of the element, it returns the position (key) of the element if found, and -1 if it is not found.
+        {
+            //if the player satisfies any array of values in winCombos
+            gameWon = { index: index, player: player };
+            break;
         }
-      }
     }
-  
-    if (winner == null && openSpots == 0) {
-      return 'tie';
-    } else {
-      return winner;
+    return gameWon;
+}
+
+//create highlights all cells that make up a victory and prevents the user from entering any more boxes
+function gameOver(gameWon) {
+    for (let index of winCombos[gameWon.index]) {
+        document.getElementById(index).style.backgroundColor =
+            gameWon.player == oPlayer ? "blue" : "red";
     }
-  }
-  
-  function mousePressed() {
-    if (currentPlayer == human) {
-      // Human make turn
-      let i = floor(mouseX / w);
-      let j = floor(mouseY / h);
-      // If valid turn
-      if (board[i][j] == '') {
-        board[i][j] = human;
-        currentPlayer = ai;
-        bestMove();
-      }
+    for (var i = 0; i < cells.length; i++) {
+        cells[i].removeEventListener('click', turnClick, false);
     }
-  }
-  
-  function draw() {
-    background(220);
-    strokeWeight(4);
-  
-    line(w, 0, w, height);
-    line(w * 2, 0, w * 2, height);
-    line(0, h, width, h);
-    line(0, h * 2, width, h * 2);
-  
-    for (let j = 0; j < 3; j++) {
-      for (let i = 0; i < 3; i++) {
-        let x = w * i + w / 2;
-        let y = h * j + h / 2;
-        let spot = board[i][j];
-        textSize(32);
-        let r = w / 4;
-        if (spot == human) {
-          noFill();
-          ellipse(x, y, r * 2);
-        } else if (spot == ai) {
-          line(x - r, y - r, x + r, y + r);
-          line(x + r, y - r, x - r, y + r);
+
+    declareWinner(gameWon.player == oPlayer ? "You win!" : "You lose.");
+}
+
+function declareWinner(whoWin) {
+    document.querySelector(".endgame").style.display = "block";
+    document.querySelector(".endgame .text").innerText = whoWin;
+}
+
+function emptySquares() {
+    //filter every element from the board array
+    return origBoard.filter(s => typeof s == 'number');
+}
+
+function bestSpot() {
+    // //Find all blank cells and get first element from blank cell. So the AI will always play the first slot
+    // return emptySquares()[0];
+
+    return minimax(origBoard, aiPlayer).index;
+}
+
+function checkTie() {
+    if (emptySquares().length == 0) {
+        for (var i = 0; i < cells.length; i++) {
+            cells[i].style.backgroundColor = "pink";
+            cells[i].removeEventListener('click', turnClick, false);
         }
-      }
+        declareWinner("Tie Game!")
+        return true;
     }
-  
-    let result = checkWinner();
-    if (result != null) {
-      noLoop();
-      let resultP = createP('');
-      resultP.style('font-size', '32pt');
-      if (result == 'tie') {
-        resultText.innerHTML = 'Tie!';
-      } else {
-        resultText.innerHTML = `${result} wins!`;
-      }
+    return false;
+}
+
+function minimax(newBoard, player) {
+    //  find the indexes of the available spots in the board and set them to a variable called availSpots
+    var availSpots = emptySquares();
+
+    // check terminal states
+    if (checkWin(newBoard, oPlayer)) {
+        return { score: -10 }; // O win
+    } else if (checkWin(newBoard, aiPlayer)) {
+        return { score: 10 }; // X win
+    } else if (availSpots.length === 0) {
+        return { score: 0 }; // tie
     }
-  }
-  function bestMove() {
-    // AI to make its turn
-    let bestScore = -Infinity;
-    let move;
-    for (let i = 0; i < 3; i++) {
-      for (let j = 0; j < 3; j++) {
-        // Is the spot available?
-        if (board[i][j] == '') {
-          board[i][j] = ai;
-          let score = minimax(board, 0, false);
-          board[i][j] = '';
-          if (score > bestScore) {
-            bestScore = score;
-            move = { i, j };
-          }
+    // Next, you need to collect the scores from each of the empty spots to evaluate later.
+    var moves = [];
+    //  Therefore, make an array called moves and loop through empty spots while collecting each move’s index and score in an object called move.
+    for (var i = 0; i < availSpots.length; i++) {
+        var move = {};
+        // Then, set the index number of the empty spot that was stored as a number in the origBoard to the index property of the move object
+        move.index = newBoard[availSpots[i]];
+        // set the empty spot on the newboard to the current player
+        newBoard[availSpots[i]] = player;
+
+        // store the object resulted from the minimax function call that includes a score property to the score property of the move object.
+        if (player == aiPlayer) {
+            var result = minimax(newBoard, oPlayer);
+            move.score = result.score;
+        } else {
+            var result = minimax(newBoard, aiPlayer);
+            move.score = result.score;
         }
-      }
-     }
-    board[move.i][move.j] = ai;
-    currentPlayer = human;
-  }
-  
-  let scores = {
-    X: 10,
-    O: -10,
-    tie: 0
-  };
-  
-  function minimax(board, depth, isMaximizing) {
-    let result = checkWinner();
-    if (result !== null) {
-      return scores[result];
+
+        newBoard[availSpots[i]] = move.index;
+
+        // minimax reset new board to what it was before and pushes the move object to the moves aray
+        moves.push(move);
     }
-  
-    if (isMaximizing) {
-      let bestScore = -Infinity;
-      for (let i = 0; i < 3; i++) {
-        for (let j = 0; j < 3; j++) {
-          // Is the spot available?
-          if (board[i][j] == '') {
-            board[i][j] = ai;
-            let score = minimax(board, depth + 1, false);
-            board[i][j] = '';
-            bestScore = max(score, bestScore);
-          }
+
+    // Then, the minimax algorithm needs to evaluate the best move in the moves array
+    var bestMove;
+    // It should choose the move with the highest score when AI is playing and the move with the lowest score when the human is playing. So...
+    if (player === aiPlayer) {
+        // If the player is aiPlayer, it sets a variable called bestScore to a very low number and loops through the moves array, 
+        var bestScore = -10000;
+        for (var i = 0; i < moves.length; i++) {
+            // if a move has a higher score than bestScore, the algorithm stores that move
+            if (moves[i].score > bestScore) {
+                bestScore = moves[i].score;
+                bestMove = i; // In case there are moves with similar score, only the first one will be stored.
+            }
         }
-      }
-      return bestScore;
     } else {
-      let bestScore = Infinity;
-      for (let i = 0; i < 3; i++) {
-        for (let j = 0; j < 3; j++) {
-          // Is the spot available?
-          if (board[i][j] == '') {
-            board[i][j] = human;
-            let score = minimax(board, depth + 1, true);
-            board[i][j] = '';
-            bestScore = min(score, bestScore);
-          }
+        var bestScore = 10000;
+        for (var i = 0; i < moves.length; i++) {
+            if (moves[i].score < bestScore) {
+                bestScore = moves[i].score;
+                bestMove = i;
+            }
         }
-      }
-      return bestScore;
     }
-  }
-
-  function keyReleased() {
-      // spacebar = key 32 ->
-      if (keyCode === 32 || keyCode === 13 || keyCode === 16 || keyCode === 17 || keyCode === 88 || keyCode === 9 || keyCode === 27 || keyCode === 46) {
-          newGame();
-      }
-  }
-</script>
+
+    return moves[bestMove];
+}
+
+// Replay Tic Tac Toe button
+const docStyle = document.documentElement.style
+const aElem = document.querySelector('a')
+const boundingClientRect = aElem.getBoundingClientRect()
+
+aElem.onmousemove = function (e) {
+
+    const x = e.clientX - boundingClientRect.left
+    const y = e.clientY - boundingClientRect.top
+
+    const xc = boundingClientRect.width / 2
+    const yc = boundingClientRect.height / 2
+
+    const dx = x - xc
+    const dy = y - yc
+
+    docStyle.setProperty('--rx', `${dy / -1}deg`)
+    docStyle.setProperty('--ry', `${dx / 10}deg`)
+}
+
+aElem.onmouseleave = function (e) {
+    docStyle.setProperty('--ty', '0')
+    docStyle.setProperty('--rx', '0')
+    docStyle.setProperty('--ry', '0')
+}
+
+aElem.onmousedown = function (e) {
+    docStyle.setProperty('--tz', '-25px')
+}
+
+document.body.onmouseup = function (e) {
+    docStyle.setProperty('--tz', '-12px')
+}
+</script>
\ No newline at end of file