diff --git a/Tic_Tac_Toe/index.html b/Tic_Tac_Toe/index.html
index f2cb954..8e5390a 100644
--- a/Tic_Tac_Toe/index.html
+++ b/Tic_Tac_Toe/index.html
@@ -9,29 +9,30 @@
           rel="stylesheet">
     <title>Book Library</title>
     <link rel="stylesheet" href="style/style.css">
+    <script src="main.js" defer></script>
 </head>
 <body>
-<div class="screen-start">
+<div class="screen-start" id="setup-scene">
     <div class="game-start-info flex flex-center">
         <div class="game-start-container flex flex-column flex-center">
             <h1 class="game-name">Tic Tac Toe</h1>
             <div class="game-move-options flex flex-column">
                 <p>Pick Player Sign</p>
-                <div class="game-move-choice-container flex flex-center">
-                    <button class="game-options-button game-move-choice flex selected-move" id="choice-x">X</button>
-                    <button class="game-options-button game-move-choice flex" id="choice-O">O</button>
+                <div id="player-choice" class="game-move-choice-container flex flex-center">
+                    <button class="mark-button game-options-button game-move-choice flex selected-move" id="X">X</button>
+                    <button class="mark-button game-options-button game-move-choice flex" id="O">O</button>
                 </div>
                 <p>Choose your opponent</p>
                 <div class="game-move-choice-container flex flex-center">
-                    <button class="game-options-button game-move-choice game-opponent-choice flex selected-move" id="choice-ai">AI</button>
-                    <button class="game-options-button game-move-choice game-opponent-choice flex" id="choice-player">Player</button>
+                    <button class="game-options-button game-move-choice game-opponent-choice flex" id="choice-ai">AI</button>
+                    <button class="game-options-button game-move-choice game-opponent-choice flex selected-move" id="choice-player">Player</button>
                 </div>
             </div>
-            <button class="game-options-button game-start-button">Start Game</button>
+            <button id="start-game-button" class="game-options-button game-start-button">Start Game</button>
         </div>
     </div>
 </div>
-<div class="screen-game">
+<div class="screen-game flex flex-column display-none" id="game-scene">
     <div class="game-container flex flex-column">
         <div class="game-options-header flex">
             <button class="button-option button-back" id="button-back">
diff --git a/Tic_Tac_Toe/main.js b/Tic_Tac_Toe/main.js
new file mode 100644
index 0000000..4a48a5b
--- /dev/null
+++ b/Tic_Tac_Toe/main.js
@@ -0,0 +1,97 @@
+"use strict";
+
+const players = (mark) => {
+    const getMark = () => mark
+
+    return {
+        getMark,
+    }
+}
+
+const gameBoard = (() => {
+    const gameBoardPlaceList = ["1", "", "", "", "", "", "", "", ""];
+
+    const getBoardPosition = (index) => {
+        return gameBoardPlaceList[index];
+    }
+
+    const setBoardMark = (mark, index) => {
+        gameBoardPlaceList[index] = mark;
+    }
+
+    const restartGameBoard = () => {
+        for (let i = 0; i < gameBoardPlaceList.length; i++) {
+            gameBoardPlaceList[i] = '';
+        }
+    }
+
+    return {
+        getBoardPosition,
+        setBoardMark,
+        restartGameBoard,
+    }
+})();
+
+const gameController = (() => {
+    const playerMarkChoiceButton = document.querySelectorAll(".mark-button");
+    const startGameButton = document.getElementById("start-game-button");
+    const setupScene = document.getElementById("setup-scene");
+    const gameScene = document.getElementById("game-scene");
+    const restartButton = document.getElementById("button-restart");
+    const closeGameButton = document.getElementById("button-back");
+
+    let playerMark = null;
+    let player1 = null
+    let player2 = null;
+
+    const playerMarkChoice = function () {
+        playerMarkChoiceButton.forEach(button => {
+            if (button.classList.contains("selected-move")) {
+                button.classList.remove("selected-move");
+            }
+        })
+        this.classList.add("selected-move");
+        playerMark = this.id;
+
+        const player1 = players(playerMark);
+        const player2 = players(playerMark === 'X' ? 'O' : 'X');
+    }
+
+    const startGame = function () {
+        playerMarkChoiceButton.forEach(button => {
+            if (button.classList.contains("selected-move")) {
+                setupScene.classList.add("display-none");
+                gameScene.classList.remove("display-none");
+            }
+        })
+
+        gameFlow(player1, player2)
+    }
+
+    const restartGame = () => {
+        gameBoard.restartGameBoard();
+    }
+
+    const closeGame = () => {
+        restartGame();
+        setupScene.classList.remove("display-none");
+        gameScene.classList.add("display-none");
+    }
+
+    //Buttons
+    playerMarkChoiceButton.forEach(button => {
+        button.addEventListener('click', playerMarkChoice);
+    })
+    startGameButton.addEventListener('click', startGame);
+    restartButton.addEventListener('click', restartGame);
+    closeGameButton.addEventListener('click', closeGame);
+
+    return {
+        playerMarkChoice,
+    }
+})();
+
+
+const gameFlow = (player1, player2) => {
+
+}
\ No newline at end of file
diff --git a/Tic_Tac_Toe/style/base.css b/Tic_Tac_Toe/style/base.css
index 8e7c18d..22007b1 100644
--- a/Tic_Tac_Toe/style/base.css
+++ b/Tic_Tac_Toe/style/base.css
@@ -65,4 +65,8 @@
 
 .grid {
     display: grid;
+}
+
+.display-none {
+    display: none;
 }
\ No newline at end of file
diff --git a/Tic_Tac_Toe/style/style.css b/Tic_Tac_Toe/style/style.css
index e28fd34..29549da 100644
--- a/Tic_Tac_Toe/style/style.css
+++ b/Tic_Tac_Toe/style/style.css
@@ -147,8 +147,7 @@ body {
     width: 80vw;
     height: 100vh;
     margin: 20px auto 50px;
-    display: flex;
-    flex-direction: column;
+
     justify-content: center;
 }
 
