diff --git a/headerTextStyle.js b/headerTextStyle.js
new file mode 100644
index 0000000..e191d57
--- /dev/null
+++ b/headerTextStyle.js
@@ -0,0 +1,214 @@
+const gameOfLifeText = document.getElementById('game-of-life');
+
+let rowsStyleText = 11;
+let colsStyleText = 50;
+
+function initMatrixStyleText() {
+    return Array.from({ length: rowsStyleText }, () => Array(colsStyleText).fill(0));
+}
+
+gameOfLifeText.style.gridTemplateColumns = `repeat(${colsStyleText ? colsStyleText : 100}, 5px)`;
+gameOfLifeText.style.gridTemplateRows = `repeat(${rowsStyleText ? rowsStyleText : 100}, 5px)`;
+
+
+let cellsMatrixStyleText = initMatrixStyleText();
+//G
+cellsMatrixStyleText[3][1] = 1;
+cellsMatrixStyleText[3][2] = 1;
+cellsMatrixStyleText[3][3] = 1;
+cellsMatrixStyleText[3][4] = 1
+cellsMatrixStyleText[4][1] = 1;
+cellsMatrixStyleText[5][1] = 1;
+cellsMatrixStyleText[6][1] = 1;
+cellsMatrixStyleText[7][1] = 1;
+cellsMatrixStyleText[7][2] = 1;
+cellsMatrixStyleText[7][3] = 1;
+cellsMatrixStyleText[7][4] = 1;
+cellsMatrixStyleText[5][3] = 1;
+cellsMatrixStyleText[5][4] = 1;
+cellsMatrixStyleText[6][4] = 1;
+
+//A
+cellsMatrixStyleText[3][7] = 1;
+cellsMatrixStyleText[3][8] = 1;
+cellsMatrixStyleText[4][6] = 1;
+cellsMatrixStyleText[5][6] = 1;
+cellsMatrixStyleText[6][6] = 1;
+cellsMatrixStyleText[7][6] = 1;
+
+cellsMatrixStyleText[4][9] = 1;
+cellsMatrixStyleText[5][9] = 1;
+cellsMatrixStyleText[6][9] = 1;
+cellsMatrixStyleText[7][9] = 1;
+
+cellsMatrixStyleText[5][7] = 1;
+cellsMatrixStyleText[5][8] = 1;
+
+//M
+cellsMatrixStyleText[3][11] = 1;
+cellsMatrixStyleText[3][12] = 1;
+cellsMatrixStyleText[3][14] = 1;
+cellsMatrixStyleText[3][15] = 1;
+cellsMatrixStyleText[3][11] = 1;
+
+cellsMatrixStyleText[4][11] = 1;
+cellsMatrixStyleText[4][13] = 1;
+cellsMatrixStyleText[5][11] = 1;
+cellsMatrixStyleText[6][11] = 1;
+cellsMatrixStyleText[7][11] = 1;
+
+cellsMatrixStyleText[4][15] = 1;
+cellsMatrixStyleText[5][15] = 1;
+cellsMatrixStyleText[6][15] = 1;
+cellsMatrixStyleText[7][15] = 1;
+
+//E
+cellsMatrixStyleText[3][17] = 1;
+cellsMatrixStyleText[3][18] = 1;
+cellsMatrixStyleText[3][19] = 1;
+cellsMatrixStyleText[4][17] = 1;
+cellsMatrixStyleText[5][17] = 1;
+cellsMatrixStyleText[5][18] = 1;
+cellsMatrixStyleText[6][17] = 1;
+cellsMatrixStyleText[7][17] = 1;
+cellsMatrixStyleText[7][18] = 1;
+cellsMatrixStyleText[7][19] = 1;
+
+//O
+
+cellsMatrixStyleText[3][24] = 1;
+cellsMatrixStyleText[3][25] = 1;
+cellsMatrixStyleText[3][26] = 1;
+
+cellsMatrixStyleText[4][23] = 1;
+cellsMatrixStyleText[5][23] = 1;
+cellsMatrixStyleText[6][23] = 1;
+
+
+cellsMatrixStyleText[4][27] = 1;
+cellsMatrixStyleText[5][27] = 1;
+cellsMatrixStyleText[5][25] = 1;
+cellsMatrixStyleText[6][27] = 1;
+
+cellsMatrixStyleText[7][24] = 1;
+cellsMatrixStyleText[7][25] = 1;
+cellsMatrixStyleText[7][26] = 1;
+
+//F
+cellsMatrixStyleText[3][29] = 1;
+cellsMatrixStyleText[3][30] = 1;
+cellsMatrixStyleText[3][31] = 1;
+cellsMatrixStyleText[4][29] = 1;
+cellsMatrixStyleText[5][29] = 1;
+cellsMatrixStyleText[5][30] = 1;
+cellsMatrixStyleText[6][29] = 1;
+cellsMatrixStyleText[7][29] = 1;
+
+//L
+cellsMatrixStyleText[3][35] = 1;
+cellsMatrixStyleText[4][35] = 1;
+cellsMatrixStyleText[5][35] = 1;
+cellsMatrixStyleText[6][35] = 1;
+cellsMatrixStyleText[7][35] = 1;
+cellsMatrixStyleText[7][36] = 1;
+cellsMatrixStyleText[7][37] = 1;
+
+//I
+cellsMatrixStyleText[3][39] = 1;
+cellsMatrixStyleText[4][39] = 1;
+cellsMatrixStyleText[5][39] = 1;
+cellsMatrixStyleText[6][39] = 1;
+cellsMatrixStyleText[7][39] = 1;
+
+//F
+cellsMatrixStyleText[3][41] = 1;
+cellsMatrixStyleText[3][42] = 1;
+cellsMatrixStyleText[3][43] = 1;
+cellsMatrixStyleText[4][41] = 1;
+cellsMatrixStyleText[5][41] = 1;
+cellsMatrixStyleText[5][42] = 1;
+cellsMatrixStyleText[6][41] = 1;
+cellsMatrixStyleText[7][41] = 1;
+
+//E
+cellsMatrixStyleText[3][45] = 1;
+cellsMatrixStyleText[3][46] = 1;
+cellsMatrixStyleText[3][47] = 1;
+cellsMatrixStyleText[4][45] = 1;
+cellsMatrixStyleText[5][45] = 1;
+cellsMatrixStyleText[5][46] = 1;
+cellsMatrixStyleText[5][47] = 1;
+cellsMatrixStyleText[6][45] = 1;
+cellsMatrixStyleText[7][45] = 1;
+cellsMatrixStyleText[7][46] = 1;
+cellsMatrixStyleText[7][47] = 1;
+
+let allCellsStyleText = [];
+
+
+createCellsElementsStyleText();
+
+
+function createCellsElementsStyleText() {
+    for (let i = 0; i < rowsStyleText; i++) {
+        for (let j = 0; j < colsStyleText; j++) {
+            const cellStyleText = document.createElement('div');
+            cellStyleText.className = 'gameOfLifeCase';
+            cellStyleText.id = `styleText-${i}-${j}`;
+            gameOfLifeText.appendChild(cellStyleText);
+            allCellsStyleText.push(cellStyleText);
+        }
+    }
+}
+
+updateCellClassStyleText();
+
+
+function getAliveCellNeighborsStyleText(row, col) {
+    let neighborsStyleText = [];
+
+    for (let i = row - 1; i <= row + 1; i++) {
+        for (let j = col - 1; j <= col + 1; j++) {
+            if (i >= 0 && i < cellsMatrixStyleText.length && j >= 0 && j < cellsMatrixStyleText[0].length) {
+                if (!(i === row && j === col) && cellsMatrixStyleText[i][j] === 1) {
+                    neighborsStyleText = [...neighborsStyleText, { "row": i, "col": j }];
+                }
+            }
+        }
+    }
+
+    return neighborsStyleText;
+}
+
+
+function UpdateCellStyleText() {
+    const updatedMatrixStyleText = initMatrixStyleText();
+    cellsMatrixStyleText.forEach((row, i) => {
+        row.forEach((col, j) => {
+            const numNeighborsAliveStyleText = getAliveCellNeighborsStyleText(i, j).length;
+
+            if (cellsMatrixStyleText[i][j] === 0 && numNeighborsAliveStyleText === 3) {
+                updatedMatrixStyleText[i][j] = 1;
+            } else if (cellsMatrixStyleText[i][j] === 1 && (numNeighborsAliveStyleText === 3 || numNeighborsAliveStyleText === 2)) {
+                updatedMatrixStyleText[i][j] = 1;
+            } else if (numNeighborsAliveStyleText < 2 || numNeighborsAliveStyleText > 3) {
+                updatedMatrixStyleText[i][j] = 0;
+            }
+        });
+    });
+
+    cellsMatrixStyleText = updatedMatrixStyleText;
+    updateCellClassStyleText();
+}
+
+function updateCellClassStyleText() {
+    allCellsStyleText.forEach((cellStyleText) => {
+        const idCellStyleText = cellStyleText.id;
+        const cellRowStyleText = Number(idCellStyleText.split("-")[1]);
+        const cellColStyleText = Number(idCellStyleText.split("-")[2]);
+        cellStyleText.classList.toggle("aliveStyleText", cellsMatrixStyleText[cellRowStyleText][cellColStyleText] === 1);
+    });
+}
+
+let intervalStyleText = 2 * 1000; // 1 second
+setInterval(UpdateCellStyleText, intervalStyleText);
diff --git a/index.html b/index.html
index 0e2fd7f..40b254c 100644
--- a/index.html
+++ b/index.html
@@ -9,15 +9,32 @@
     <link rel="icon" href="https://pbs.twimg.com/profile_images/588790281966850049/Xr9ia_DB_400x400.png">
 </head>
 
-<body>
-    <h1>Game of Life</h1>
-    <div class="grid"></div>
+<body id="body">
+    <div class="container">
+        <div id="game-of-life"></div>
+        <div class="grid"></div>
+
+        <div id="command">
+            <button id="play">
+                Reset
+            </button>
+            <button id="play">
+                Play
+            </button>
+            <button id="stop">
+                Stop
+            </button>
+        </div>
+
 
-    <div class="">
-        <button id="play"><img src="https://cdn-icons-png.flaticon.com/512/0/375.png" alt="play button"></button>
     </div>
 
+
+
+
     <script src="script.js"></script>
+    <script src="style.js"></script>
+    <script src="headerTextStyle.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index a57d64c..52f512a 100644
--- a/script.js
+++ b/script.js
@@ -100,4 +100,4 @@ function updateCellClasses() {
 }
 
 let interval = .1 * 1000; // 1 second
-setInterval(UpdateCell, interval);
\ No newline at end of file
+// setInterval(UpdateCell, interval);
\ No newline at end of file
diff --git a/style.css b/style.css
index e5e645a..2e169ee 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Arbutus&display=swap');
 * {
     margin: 0;
     padding: 0;
@@ -7,35 +7,45 @@
 }
 
 body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: grid;
     height: 100vh;
+    width: 100vw;
     margin: 0;
     flex-direction: column;
-    gap: 20px;
-    background: -webkit-linear-gradient(#e2e79b, #948fbe);
-    background-clip: border-box;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    background-color: rgb(32, 32, 32);
+    overflow: hidden;
 }
 
-h1 {
-    font-size: clamp(32px, 4vw, 48px);
-    font-family: 'Black Ops One', sans-serif;
-    background: -webkit-linear-gradient(#c96b6b, #5c4edb);
-    background-clip: border-box;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+.container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+
+    width: 80%;
+    height: 80%;
+    border: 5px solid #000000;
+    border-radius: 10px 20px;
+    scrollbar-width: none;
+
+    padding: 0 20px;
 }
 
 .grid {
-    padding: 5px;
+    padding: 10px;
     display: grid;
     overflow: scroll;
-    max-width: 90%;
-    max-height: 50%;
-    background-color: white;
+    width: 100%;
+    height: 50%;
+    background-color: #000000;
+    border: 10px solid #000000;
+    border-radius: 20px;
+    scrollbar-width: none;
 }
 
 .cell {
@@ -45,22 +55,77 @@ h1 {
 }
 
 .alive {
-    background-color: yellow;
+    background-color: #9EFF00;
+}
+
+#command {
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
 }
 
-#play {
-    background-color: transparent;
-    color: transparent;
+#command button {
+    background-color: #9dff00a8;
+    color: rgb(32, 32, 32);
+    font-size: larger;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    font-weight: bolder;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 1px 5px black;
+    cursor: pointer;
     border: none;
+    width: 50%;
+    font-family: 'Arbutus', serif;
+
+
+
+}
+
+
+
+#command button:hover {
+    background-color: #9EFF00;
 }
 
-#play img {
-    width: 64px;
-    height: 64px;
+#command button:active {
+    color: #9EFF00;
+    background-color: #191a19;
+    box-shadow: 1px 5px #9EFF00;
+
 }
 
 
-#play img:hover {
-    cursor: pointer;
-    opacity: 80%;
+.cellStyle {
+    width: 50px;
+    height: 50px;
+}
+
+.aliveStyle {
+    background-color: rgb(0, 0, 0);
+}
+
+#game-of-life {
+    padding: 10px;
+    display: grid;
+    overflow: scroll;
+    background-color: rgba(0, 0, 0, 0.185);
+    scrollbar-width: none;
+    border-radius: 10px;
+    box-shadow: 10px 10px black;
+}
+
+.gameOfLifeCase {
+    width: 5px;
+    height: 5px;
+}
+
+.aliveStyleText {
+    background-color: #9EFF00;
+    border: 1px rgb(0, 0, 0);
+    border-style: solid;
 }
\ No newline at end of file
diff --git a/style.js b/style.js
new file mode 100644
index 0000000..42adf2c
--- /dev/null
+++ b/style.js
@@ -0,0 +1,93 @@
+const body = document.getElementById('body');
+
+let rowsStyle = 100;
+let colsStyle = 100;
+
+function initMatrixStyle() {
+    return Array.from({ length: rowsStyle }, () => Array(colsStyle).fill(0));
+}
+
+body.style.gridTemplateColumns = `repeat(${colsStyle ? colsStyle : 100}, 50px)`;
+body.style.gridTemplateRows = `repeat(${rowsStyle ? rowsStyle : 100}, 50px)`;
+
+
+let cellsMatrixStyle = initMatrixStyle();
+setAliveSomeCell();
+setInterval(setAliveSomeCell,2000)
+function setAliveSomeCell() {
+    for (let index = 0; index < rowsStyle*colsStyle; index++) {
+        const r = Math.floor(Math.random() * rowsStyle);
+        const c = Math.floor(Math.random() * colsStyle);
+        cellsMatrixStyle[r][c] = 1;
+    }
+}
+
+let allCellsStyle = [];
+
+
+createCellsElementsStyle();
+
+
+function createCellsElementsStyle() {
+    for (let i = 0; i < rowsStyle; i++) {
+        for (let j = 0; j < colsStyle; j++) {
+            const cellStyle = document.createElement('div');
+            cellStyle.className = 'cellStyle';
+            cellStyle.id = `style-${i}-${j}`;
+            body.appendChild(cellStyle);
+            allCellsStyle.push(cellStyle);
+        }
+    }
+}
+
+updateCellClassStyle();
+
+
+function getAliveCellNeighborsStyle(row, col) {
+    let neighborsStyle = [];
+
+    for (let i = row - 1; i <= row + 1; i++) {
+        for (let j = col - 1; j <= col + 1; j++) {
+            if (i >= 0 && i < cellsMatrixStyle.length && j >= 0 && j < cellsMatrixStyle[0].length) {
+                if (!(i === row && j === col) && cellsMatrixStyle[i][j] === 1) {
+                    neighborsStyle = [...neighborsStyle, { "row": i, "col": j }];
+                }
+            }
+        }
+    }
+
+    return neighborsStyle;
+}
+
+
+function UpdateCellStyle() {
+    const updatedMatrixStyle = initMatrixStyle();
+    cellsMatrixStyle.forEach((row, i) => {
+        row.forEach((col, j) => {
+            const numNeighborsAliveStyle = getAliveCellNeighborsStyle(i, j).length;
+
+            if (cellsMatrixStyle[i][j] === 0 && numNeighborsAliveStyle === 3) {
+                updatedMatrixStyle[i][j] = 1;
+            } else if (cellsMatrixStyle[i][j] === 1 && (numNeighborsAliveStyle === 3 || numNeighborsAliveStyle === 2)) {
+                updatedMatrixStyle[i][j] = 1;
+            } else if (numNeighborsAliveStyle < 2 || numNeighborsAliveStyle > 3) {
+                updatedMatrixStyle[i][j] = 0;
+            }
+        });
+    });
+
+    cellsMatrixStyle = updatedMatrixStyle;
+    updateCellClassStyle();
+}
+
+function updateCellClassStyle() {
+    allCellsStyle.forEach((cellStyle) => {
+        const idCellStyle = cellStyle.id;
+        const cellRowStyle = Number(idCellStyle.split("-")[1]);
+        const cellColStyle = Number(idCellStyle.split("-")[2]);
+        cellStyle.classList.toggle("aliveStyle", cellsMatrixStyle[cellRowStyle][cellColStyle] === 1);
+    });
+}
+
+let intervalStyle = .5 * 1000; // 1 second
+setInterval(UpdateCellStyle, intervalStyle);
\ No newline at end of file