diff --git a/index.html b/index.html
index 2157c6e..f52c9d1 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,7 @@
       #score {
         font-family: monospace;
         margin-top: 30px;
-        font-size: 20px;
+        font-size: 16px;
         padding-left: 20px;
         color: #172b36;
       }
@@ -92,6 +92,12 @@
     const NIGHT_COLOR = colorPalette.NocturnalExpedition;
     const NIGHT_BALL_COLOR = colorPalette.MysticMint;
 
+    const NOON_COLOR = colorPalette.Forsythia;
+    const NOON_BALL_COLOR = colorPalette.DeepSaffron;
+
+    const MIDNIGHT_COLOR = colorPalette.DeepSaffron;
+    const MIDNIGHT_BALL_COLOR = colorPalette.Forsythia;
+
     const SQUARE_SIZE = 25;
 
     const numSquaresX = canvas.width / SQUARE_SIZE;
@@ -102,7 +108,7 @@
     for (let i = 0; i < numSquaresX; i++) {
       squares[i] = [];
       for (let j = 0; j < numSquaresY; j++) {
-        squares[i][j] = i < numSquaresX / 2 ? DAY_COLOR : NIGHT_COLOR;
+        squares[i][j] = i < numSquaresX / 2 ? DAY_COLOR : NIGHT_COLOR; // NOON_COLOR and MIDNIGHT_COLOR are missing here
       }
     }
 
@@ -116,6 +122,16 @@
     let dx2 = -12.5;
     let dy2 = 12.5;
 
+    let x3 = (canvas.width / 3) * 2;
+    let y3 = canvas.height / 2;
+    let dx3 = -12.5;
+    let dy3 = 12.5;
+
+    let x4 = (canvas.width / 3) * 3;
+    let y4 = canvas.height / 3;
+    let dx4 = -12.5;
+    let dy4 = 12.5;
+
     let iteration = 0;
 
     function drawBall(x, y, color) {
@@ -180,17 +196,23 @@
     function updateScoreElement() {
       let dayScore = 0;
       let nightScore = 0;
+      let noonScore = 0;
+      let midnightScore = 0;
       for (let i = 0; i < numSquaresX; i++) {
         for (let j = 0; j < numSquaresY; j++) {
           if (squares[i][j] === DAY_COLOR) {
             dayScore++;
           } else if (squares[i][j] === NIGHT_COLOR) {
             nightScore++;
+          } else if (squares[i][j] === NOON_COLOR) {
+            noonScore++;
+          } else if (squares[i][j] === MIDNIGHT_COLOR) {
+            midnightScore++;
           }
         }
       }
 
-      scoreElement.textContent = `day ${dayScore} | night ${nightScore}`;
+      scoreElement.textContent = `day ${dayScore} | night ${nightScore} | noon ${noonScore} | midnight ${midnightScore}`;
     }
 
     function checkBoundaryCollision(x, y, dx, dy) {
@@ -221,6 +243,16 @@
       dx2 = bounce2.dx;
       dy2 = bounce2.dy;
 
+      drawBall(x3, y3, NOON_BALL_COLOR);
+      let bounce3 = updateSquareAndBounce(x3, y3, dx3, dy3, NOON_COLOR);
+      dx3 = bounce3.dx;
+      dy3 = bounce3.dy;
+
+      drawBall(x4, y4, MIDNIGHT_BALL_COLOR);
+      let bounce4 = updateSquareAndBounce(x4, y4, dx4, dy4, MIDNIGHT_COLOR);
+      dx4 = bounce4.dx;
+      dy4 = bounce4.dy;
+
       let boundary1 = checkBoundaryCollision(x1, y1, dx1, dy1);
       dx1 = boundary1.dx;
       dy1 = boundary1.dy;
@@ -229,10 +261,22 @@
       dx2 = boundary2.dx;
       dy2 = boundary2.dy;
 
+      let boundary3 = checkBoundaryCollision(x3, y3, dx3, dy3);
+      dx3 = boundary3.dx;
+      dy3 = boundary3.dy;
+
+      let boundary4 = checkBoundaryCollision(x4, y4, dx4, dy4);
+      dx4 = boundary4.dx;
+      dy4 = boundary4.dy;
+
       x1 += dx1;
       y1 += dy1;
       x2 += dx2;
       y2 += dy2;
+      x3 += dx3;
+      y3 += dy3;
+      x4 += dx4;
+      y4 += dy4;
 
       iteration++;
       if (iteration % 1_000 === 0) console.log("interation", iteration);