diff --git a/26.9-14.00/README.md b/26.9-14.00/README.md
new file mode 100644
index 0000000..c77b332
--- /dev/null
+++ b/26.9-14.00/README.md
@@ -0,0 +1,18 @@
+# Backgammon Game
+
+A modern, fully interactive backgammon game optimized for mobile and desktop browsers.
+
+## Features
+- 3D animated board and dice
+- Dynamic player guidance
+- Customizable themes and player names
+- Save and load game states with local storage
+- Sound effects for in-game actions
+
+## How to Play
+1. Clone or download the repository.
+2. Open `index.html` in your browser.
+3. Roll the dice, move the pieces, and enjoy the game!
+
+## Contributing
+Feel free to fork the project and make pull requests with improvements!
diff --git a/26.9-14.00/assets/images/board-background.png b/26.9-14.00/assets/images/board-background.png
new file mode 100644
index 0000000..3e7f2cd
Binary files /dev/null and b/26.9-14.00/assets/images/board-background.png differ
diff --git a/26.9-14.00/assets/images/dice1.png b/26.9-14.00/assets/images/dice1.png
new file mode 100644
index 0000000..a452a13
Binary files /dev/null and b/26.9-14.00/assets/images/dice1.png differ
diff --git a/26.9-14.00/assets/images/dice2.png b/26.9-14.00/assets/images/dice2.png
new file mode 100644
index 0000000..63b599b
Binary files /dev/null and b/26.9-14.00/assets/images/dice2.png differ
diff --git a/26.9-14.00/assets/images/dice3.png b/26.9-14.00/assets/images/dice3.png
new file mode 100644
index 0000000..003cb6d
Binary files /dev/null and b/26.9-14.00/assets/images/dice3.png differ
diff --git a/26.9-14.00/assets/images/dice4.png b/26.9-14.00/assets/images/dice4.png
new file mode 100644
index 0000000..9d49cb9
Binary files /dev/null and b/26.9-14.00/assets/images/dice4.png differ
diff --git a/26.9-14.00/assets/images/dice5.png b/26.9-14.00/assets/images/dice5.png
new file mode 100644
index 0000000..32d29dc
Binary files /dev/null and b/26.9-14.00/assets/images/dice5.png differ
diff --git a/26.9-14.00/assets/images/dice6.png b/26.9-14.00/assets/images/dice6.png
new file mode 100644
index 0000000..197ba2f
Binary files /dev/null and b/26.9-14.00/assets/images/dice6.png differ
diff --git a/26.9-14.00/assets/images/white-piece.png b/26.9-14.00/assets/images/white-piece.png
new file mode 100644
index 0000000..056ff19
Binary files /dev/null and b/26.9-14.00/assets/images/white-piece.png differ
diff --git a/26.9-14.00/assets/images/yellow-piece.png b/26.9-14.00/assets/images/yellow-piece.png
new file mode 100644
index 0000000..095e631
Binary files /dev/null and b/26.9-14.00/assets/images/yellow-piece.png differ
diff --git a/26.9-14.00/bg1.js b/26.9-14.00/bg1.js
new file mode 100644
index 0000000..1b684c0
--- /dev/null
+++ b/26.9-14.00/bg1.js
@@ -0,0 +1,98 @@
+// bg1.js - Enhancing UI with animations and 3D effects
+
+document.addEventListener("DOMContentLoaded", () => {
+    const board = document.getElementById("backgammon-board");
+    const leftBar = document.getElementById("left-bar");
+    const rightBar = document.getElementById("right-bar");
+    const dice1 = document.getElementById("dice1");
+    const dice2 = document.getElementById("dice2");
+    const rollBtn = document.getElementById("roll-btn");
+    let currentPlayer = "yellow";
+
+    // 3D Rotating Board Animation
+    function addBoardRotation() {
+        board.style.transition = "transform 1s ease-in-out";
+        board.style.transformStyle = "preserve-3d";
+        board.style.transform = "rotateX(15deg) rotateY(15deg)";
+    }
+
+    function resetBoardRotation() {
+        board.style.transform = "rotateX(0deg) rotateY(0deg)";
+    }
+
+    // Event listeners for board rotation
+    board.addEventListener("mouseenter", addBoardRotation);
+    board.addEventListener("mouseleave", resetBoardRotation);
+
+    // Highlight the active player's side
+    function highlightActivePlayer() {
+        const yellowShadow = "0px 0px 20px 10px rgba(255, 204, 0, 0.8)";
+        const whiteShadow = "0px 0px 20px 10px rgba(255, 255, 255, 0.8)";
+        if (currentPlayer === "yellow") {
+            leftBar.style.boxShadow = yellowShadow;
+            rightBar.style.boxShadow = "none";
+        } else {
+            rightBar.style.boxShadow = whiteShadow;
+            leftBar.style.boxShadow = "none";
+        }
+    }
+
+    // Animate dice roll
+    function animateDiceRoll(diceElement) {
+        diceElement.style.transition = "transform 0.5s ease";
+        diceElement.style.transform = "rotateX(360deg)";
+        setTimeout(() => {
+            diceElement.style.transform = "rotateX(0)";
+        }, 500);
+    }
+
+    // Event listeners for dice roll animations
+    dice1.addEventListener("click", () => animateDiceRoll(dice1));
+    dice2.addEventListener("click", () => animateDiceRoll(dice2));
+
+    // Pieces Animation - Interactive hover effects
+    function animatePieces() {
+        const pieces = document.querySelectorAll(".piece");
+        pieces.forEach(piece => {
+            piece.style.transition = "transform 0.3s ease, box-shadow 0.3s ease";
+            piece.addEventListener("mouseenter", () => {
+                piece.style.transform = "scale(1.1)";
+                piece.style.boxShadow = "0px 5px 10px rgba(0, 0, 0, 0.5)";
+            });
+            piece.addEventListener("mouseleave", () => {
+                piece.style.transform = "scale(1)";
+                piece.style.boxShadow = "none";
+            });
+        });
+    }
+
+    // Call to animate pieces (run when pieces are initialized)
+    animatePieces();
+
+    // Roll button 3D bounce effect
+    rollBtn.style.transition = "transform 0.5s ease";
+    rollBtn.addEventListener("mousedown", () => {
+        rollBtn.style.transform = "scale(0.9)";
+    });
+    rollBtn.addEventListener("mouseup", () => {
+        rollBtn.style.transform = "scale(1)";
+    });
+
+    // Board background color change on click
+    function changeBoardColor() {
+        const colors = ["#2f2f2f", "#3e3e3e", "#4d4d4d"];
+        const randomColor = colors[Math.floor(Math.random() * colors.length)];
+        board.style.backgroundColor = randomColor;
+    }
+
+    board.addEventListener("click", changeBoardColor);
+
+    // Toggle the active player and highlight the respective side
+    function togglePlayer() {
+        currentPlayer = currentPlayer === "yellow" ? "white" : "yellow";
+        highlightActivePlayer();
+    }
+
+    // Initial highlight of active player
+    highlightActivePlayer();
+});
diff --git a/26.9-14.00/bg2.js b/26.9-14.00/bg2.js
new file mode 100644
index 0000000..12dd70c
--- /dev/null
+++ b/26.9-14.00/bg2.js
@@ -0,0 +1,168 @@
+// bg2.js - Enhancing gameplay mechanics and dynamic interactions
+
+document.addEventListener("DOMContentLoaded", () => {
+    const board = document.getElementById("board");
+    let currentPlayer = "yellow";
+    let diceRolls = [];
+
+    // Dice Roll Functionality
+    function rollDice() {
+        const dice1 = getRandomDiceRoll();
+        const dice2 = getRandomDiceRoll();
+        diceRolls = [dice1, dice2];
+
+        displayDiceRolls(dice1, dice2);
+        animateDiceRolls();
+        togglePlayer();
+        showPlayerTooltip();
+    }
+
+    // Generate random dice roll
+    function getRandomDiceRoll() {
+        return Math.floor(Math.random() * 6) + 1;
+    }
+
+    // Display dice roll values
+    function displayDiceRolls(dice1, dice2) {
+        document.getElementById("dice1").textContent = dice1;
+        document.getElementById("dice2").textContent = dice2;
+    }
+
+    // Animate dice after rolling
+    function animateDiceRolls() {
+        const diceElements = [document.getElementById("dice1"), document.getElementById("dice2")];
+
+        diceElements.forEach(dice => {
+            dice.style.transform = "rotateX(360deg) rotateY(360deg)";
+            setTimeout(() => {
+                dice.style.transform = "rotateX(0deg) rotateY(0deg)";
+            }, 500);
+        });
+    }
+
+    // Move pieces based on dice roll
+    function movePiece(piece, diceValue) {
+        const currentPosition = Array.from(board.children).indexOf(piece.parentElement);
+        let newPosition = currentPosition + (currentPlayer === "yellow" ? diceValue : -diceValue);
+
+        if (newPosition < 0 || newPosition >= board.children.length) {
+            newPosition = currentPosition; // Invalid move, stay in place
+        }
+
+        const targetSpot = board.children[newPosition];
+        if (targetSpot) {
+            piece.style.transition = "transform 0.3s ease";
+            targetSpot.appendChild(piece);
+        }
+    }
+
+    // Add drag & drop functionality for pieces
+    let draggedPiece = null;
+
+    board.addEventListener("dragstart", (e) => {
+        if (e.target.classList.contains("piece")) {
+            draggedPiece = e.target;
+            setTimeout(() => (e.target.style.opacity = "0.5"), 0);
+        }
+    });
+
+    board.addEventListener("dragend", (e) => {
+        e.target.style.opacity = "1";
+    });
+
+    board.addEventListener("dragover", (e) => {
+        e.preventDefault();
+    });
+
+    board.addEventListener("drop", (e) => {
+        if (draggedPiece && e.target.classList.contains("triangle")) {
+            movePiece(draggedPiece, diceRolls[0]); // Move based on the first dice roll
+            diceRolls.shift(); // Remove the used dice roll
+        }
+    });
+
+    // Display a tooltip guiding the player
+    function showPlayerTooltip() {
+        const tooltip = createTooltip(
+            `${currentPlayer === "yellow" ? 'Yellow' : 'White'}'s Turn! Roll the dice to continue.`,
+            currentPlayer === "yellow" ? "#ffcc00" : "#ffffff",
+            currentPlayer === "yellow" ? "#333" : "#000"
+        );
+        document.body.appendChild(tooltip);
+
+        setTimeout(() => {
+            tooltip.remove();
+        }, 3000);
+    }
+
+    // Create tooltip element
+    function createTooltip(text, bgColor, textColor) {
+        const tooltip = document.createElement("div");
+        tooltip.style.position = "absolute";
+        tooltip.style.bottom = "20px";
+        tooltip.style.left = "50%";
+        tooltip.style.transform = "translateX(-50%)";
+        tooltip.style.padding = "10px";
+        tooltip.style.backgroundColor = bgColor;
+        tooltip.style.color = textColor;
+        tooltip.style.borderRadius = "5px";
+        tooltip.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
+        tooltip.style.fontSize = "1.2rem";
+        tooltip.textContent = text;
+
+        return tooltip;
+    }
+
+    // Toggle active player
+    function togglePlayer() {
+        currentPlayer = currentPlayer === "yellow" ? "white" : "yellow";
+    }
+
+    // Show valid moves for the current player
+    function highlightValidMoves() {
+        const allTriangles = Array.from(board.children);
+        allTriangles.forEach(triangle => {
+            if (Math.random() < 0.2) {
+                triangle.style.backgroundColor = "rgba(0, 255, 0, 0.3)";
+                setTimeout(() => {
+                    triangle.style.backgroundColor = "";
+                }, 1000);
+            }
+        });
+    }
+
+    // Display tooltips for invalid moves
+    function showInvalidMoveMessage() {
+        const invalidMoveTooltip = createTooltip(
+            "Invalid Move! Try Again.",
+            "#ff4444",
+            "#fff"
+        );
+        invalidMoveTooltip.style.top = "50%";
+        invalidMoveTooltip.style.left = "50%";
+        invalidMoveTooltip.style.transform = "translate(-50%, -50%)";
+
+        document.body.appendChild(invalidMoveTooltip);
+
+        setTimeout(() => {
+            invalidMoveTooltip.remove();
+        }, 2000);
+    }
+
+    // Handle piece movements and check for validity
+    function handlePieceMove(diceRoll) {
+        const valid = Math.random() < 0.5; // Simulate move validation (to be implemented)
+
+        if (valid) {
+            movePiece(draggedPiece, diceRoll);
+        } else {
+            showInvalidMoveMessage();
+        }
+    }
+
+    // Add event listener for dice roll button
+    document.getElementById("roll-btn").addEventListener("click", rollDice);
+
+    // Initial player guidance
+    showPlayerTooltip();
+});
diff --git a/26.9-14.00/bg3.js b/26.9-14.00/bg3.js
new file mode 100644
index 0000000..8443c95
--- /dev/null
+++ b/26.9-14.00/bg3.js
@@ -0,0 +1,193 @@
+// bg3.js - Advanced gameplay mechanics and rule refinement
+
+document.addEventListener("DOMContentLoaded", () => {
+    const board = document.getElementById("board");
+    const rollBtn = document.getElementById("roll-btn");
+    let currentPlayer = "yellow";
+    let diceRolls = [];
+    let activePiece = null;
+    const maxBoardPositions = 24;
+
+    // Dice Roll Functionality
+    function rollDice() {
+        const dice1 = getRandomDiceRoll();
+        const dice2 = getRandomDiceRoll();
+        diceRolls = [dice1, dice2];
+        updateDiceDisplay(dice1, dice2);
+        enablePieceSelection();
+    }
+
+    // Generate random dice roll
+    function getRandomDiceRoll() {
+        return Math.floor(Math.random() * 6) + 1;
+    }
+
+    // Update dice display
+    function updateDiceDisplay(dice1, dice2) {
+        document.getElementById("dice1").textContent = dice1;
+        document.getElementById("dice2").textContent = dice2;
+        animateDiceRolls();
+    }
+
+    // Animate dice rolls
+    function animateDiceRolls() {
+        const diceElements = [document.getElementById("dice1"), document.getElementById("dice2")];
+        diceElements.forEach(dice => {
+            dice.style.transform = "rotateX(360deg) rotateY(360deg)";
+            setTimeout(() => {
+                dice.style.transform = "rotateX(0deg) rotateY(0deg)";
+            }, 500);
+        });
+    }
+
+    // Enable piece selection
+    function enablePieceSelection() {
+        const pieces = document.querySelectorAll(`.${currentPlayer}-piece`);
+        pieces.forEach(piece => {
+            piece.style.cursor = "pointer";
+            piece.addEventListener("click", () => {
+                if (!activePiece) {
+                    activePiece = piece;
+                    highlightPossibleMoves(piece);
+                }
+            });
+        });
+    }
+
+    // Highlight possible moves based on dice roll
+    function highlightPossibleMoves(piece) {
+        const currentPosition = getCurrentPosition(piece);
+        diceRolls.forEach(dice => {
+            const newPosition = calculateNewPosition(currentPosition, dice);
+            if (isValidPosition(newPosition)) {
+                const target = board.children[newPosition];
+                highlightTargetPosition(target);
+            }
+        });
+    }
+
+    // Get the current position of a piece
+    function getCurrentPosition(piece) {
+        return Array.from(board.children).indexOf(piece.parentElement);
+    }
+
+    // Calculate new position based on dice roll
+    function calculateNewPosition(currentPosition, diceRoll) {
+        return currentPlayer === "yellow"
+            ? currentPosition + diceRoll
+            : currentPosition - diceRoll;
+    }
+
+    // Validate new position
+    function isValidPosition(newPosition) {
+        return newPosition >= 0 && newPosition < maxBoardPositions;
+    }
+
+    // Highlight the target position
+    function highlightTargetPosition(target) {
+        target.style.border = "2px solid #00ff00";
+        target.addEventListener("click", () => movePieceToTarget(target));
+    }
+
+    // Move piece to target position
+    function movePieceToTarget(target) {
+        if (activePiece && target) {
+            target.appendChild(activePiece);
+            animatePieceMove(activePiece);
+
+            setTimeout(() => {
+                resetHighlights();
+                activePiece = null;
+                diceRolls.shift(); // Use up the dice
+                if (diceRolls.length === 0) endTurn();
+            }, 300);
+        }
+    }
+
+    // Animate piece movement
+    function animatePieceMove(piece) {
+        piece.style.transition = "transform 0.5s ease";
+        piece.style.transform = "scale(1.1)";
+        setTimeout(() => {
+            piece.style.transform = "scale(1)";
+        }, 500);
+    }
+
+    // Reset highlighted positions
+    function resetHighlights() {
+        const triangles = document.querySelectorAll(".triangle");
+        triangles.forEach(triangle => {
+            triangle.style.border = "none";
+        });
+    }
+
+    // End turn and switch players
+    function endTurn() {
+        currentPlayer = currentPlayer === "yellow" ? "white" : "yellow";
+        alert(`${currentPlayer === "yellow" ? 'Yellow' : 'White'}'s Turn!`);
+        showPlayerTooltip();
+    }
+
+    // Show a tooltip for the current player
+    function showPlayerTooltip() {
+        const tooltip = createTooltip(`${currentPlayer === "yellow" ? 'Yellow' : 'White'}'s Turn! Roll the dice to continue.`);
+        document.body.appendChild(tooltip);
+
+        setTimeout(() => {
+            tooltip.remove();
+        }, 3000);
+    }
+
+    // Create tooltip element
+    function createTooltip(message) {
+        const tooltip = document.createElement("div");
+        tooltip.id = "player-tooltip";
+        tooltip.style.position = "absolute";
+        tooltip.style.bottom = "20px";
+        tooltip.style.left = "50%";
+        tooltip.style.transform = "translateX(-50%)";
+        tooltip.style.padding = "10px";
+        tooltip.style.backgroundColor = currentPlayer === "yellow" ? "#ffcc00" : "#ffffff";
+        tooltip.style.color = currentPlayer === "yellow" ? "#333" : "#000";
+        tooltip.style.borderRadius = "5px";
+        tooltip.style.boxShadow = "0 0 10px rgba(0,0,0,0.5)";
+        tooltip.style.fontSize = "1.2rem";
+        tooltip.textContent = message;
+
+        return tooltip;
+    }
+
+    // Validate moves based on current rules
+    function isValidMove(piece, targetPosition) {
+        const currentPosition = getCurrentPosition(piece);
+        if (currentPlayer === "yellow" && currentPosition >= targetPosition) return false;
+        if (currentPlayer === "white" && currentPosition <= targetPosition) return false;
+        // Additional move validation logic can go here
+        return true;
+    }
+
+    // Check win condition
+    function checkWinCondition() {
+        const yellowPieces = document.querySelectorAll(".yellow-piece");
+        const whitePieces = document.querySelectorAll(".white-piece");
+
+        if (yellowPieces.length === 0) {
+            alert("Yellow wins!");
+            resetGame();
+        } else if (whitePieces.length === 0) {
+            alert("White wins!");
+            resetGame();
+        }
+    }
+
+    // Reset the game after a win
+    function resetGame() {
+        location.reload(); // Reload the page to reset the game
+    }
+
+    // Add event listener for rolling dice
+    rollBtn.addEventListener("click", rollDice);
+
+    // Show initial player tooltip
+    showPlayerTooltip();
+});
diff --git a/26.9-14.00/gameRules.js b/26.9-14.00/gameRules.js
new file mode 100644
index 0000000..2b60171
--- /dev/null
+++ b/26.9-14.00/gameRules.js
@@ -0,0 +1,70 @@
+// gameRules.js - Enforcing the rules of Backgammon
+
+const gameRules = {
+    // Validate if the move is allowed based on the piece's current position and dice roll
+    isMoveValid: function (piece, startPos, diceRoll) {
+        const targetPos = this.calculateTargetPosition(startPos, diceRoll);
+
+        // Ensure the target position is within bounds
+        if (!this.isWithinBounds(targetPos)) return false;
+
+        // Check if the target position is blocked by the opponent's pieces
+        const targetSpot = board.children[targetPos];
+        return !this.isBlocked(targetSpot);
+    },
+
+    // Calculate the target position based on the dice roll and current player's color
+    calculateTargetPosition: function (startPos, diceRoll) {
+        return currentPlayer === "yellow" ? startPos + diceRoll : startPos - diceRoll;
+    },
+
+    // Check if the target position is within the valid bounds of the board
+    isWithinBounds: function (position) {
+        return position >= 0 && position < board.children.length;
+    },
+
+    // Check if a target position is blocked by two or more of the opponent's pieces
+    isBlocked: function (spot) {
+        const opponentColor = this.getOpponentColor();
+        const piecesInSpot = spot.querySelectorAll(`.${opponentColor}-piece`);
+        return piecesInSpot.length >= 2;
+    },
+
+    // Get the opponent player's color
+    getOpponentColor: function () {
+        return currentPlayer === "yellow" ? "white" : "yellow";
+    },
+
+    // Capture an opponent's piece if there is only one on the target spot
+    capturePiece: function (targetSpot) {
+        const opponentColor = this.getOpponentColor();
+        const opponentPiece = targetSpot.querySelector(`.${opponentColor}-piece`);
+
+        if (opponentPiece) {
+            // Move the captured piece to the bar (prison)
+            document.getElementById(`${opponentColor}-bar`).appendChild(opponentPiece);
+        }
+    },
+
+    // Check if the player can bear off pieces (all pieces must be in the home quadrant)
+    canBearOff: function () {
+        const homeRange = this.getHomeRange();
+
+        // Verify all pieces are within the home range
+        const pieces = document.querySelectorAll(`.${currentPlayer}-piece`);
+        for (const piece of pieces) {
+            const pos = Array.from(board.children).indexOf(piece.parentElement);
+            if (pos < homeRange.start || pos > homeRange.end) {
+                return false;
+            }
+        }
+        return true;
+    },
+
+    // Get the home range for bearing off pieces, depending on the player's color
+    getHomeRange: function () {
+        return currentPlayer === "yellow"
+            ? { start: 18, end: 23 }
+            : { start: 0, end: 5 };
+    }
+};
diff --git a/26.9-14.00/index.html b/26.9-14.00/index.html
new file mode 100644
index 0000000..e94b43d
--- /dev/null
+++ b/26.9-14.00/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Backgammon Game</title>
+    <!-- Link to external stylesheets for cleaner HTML -->
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <!-- Backgammon Board -->
+    <div id="backgammon-board">
+        <div id="left-bar"></div>
+        <div id="right-bar"></div>
+        <div id="board">
+            <!-- Dynamically generated triangles for the board -->
+            <!-- 24 positions on the board -->
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+            <div class="triangle"></div>
+        </div>
+
+        <!-- Roll Dice Button -->
+        <button id="roll-btn">Roll Dice</button>
+
+        <!-- Dice Display -->
+        <div id="dice-container">
+            <div class="dice" id="dice1">1</div>
+            <div class="dice" id="dice2">6</div>
+        </div>
+    </div>
+
+    <!-- External JavaScript -->
+    <script src="bg1.js"></script>
+    <script src="bg2.js"></script>
+    <script src="bg3.js"></script>
+    <script src="gameRules.js"></script>
+    <script src="sounds.js"></script>
+    <script src="settings.js"></script>
+    <script src="localStorage.js"></script>
+    <script src="index.js"></script>
+
+</body>
+</html>
diff --git a/26.9-14.00/index.js b/26.9-14.00/index.js
new file mode 100644
index 0000000..0e72c1c
--- /dev/null
+++ b/26.9-14.00/index.js
@@ -0,0 +1,67 @@
+// index.js - Initialize the Game and Interactions
+
+document.addEventListener("DOMContentLoaded", () => {
+    const board = document.getElementById('board');
+    const rollBtn = document.getElementById('roll-btn');
+    const dice1 = document.getElementById('dice1');
+    const dice2 = document.getElementById('dice2');
+    let turn = 'yellow';
+
+    // Initialize Pieces
+    const pieces = { yellow: [], white: [] };
+
+    // Function to roll the dice
+    function rollDice() {
+        const diceRoll1 = getRandomDiceRoll();
+        const diceRoll2 = getRandomDiceRoll();
+
+        displayDice(dice1, diceRoll1);
+        displayDice(dice2, diceRoll2);
+
+        toggleTurn();
+        alertTurn(turn, diceRoll1, diceRoll2);
+    }
+
+    // Generate a random dice roll
+    function getRandomDiceRoll() {
+        return Math.floor(Math.random() * 6) + 1;
+    }
+
+    // Display dice value
+    function displayDice(diceElement, rollValue) {
+        diceElement.textContent = rollValue;
+    }
+
+    // Switch turns between yellow and white
+    function toggleTurn() {
+        turn = turn === 'yellow' ? 'white' : 'yellow';
+    }
+
+    // Alert the current turn and dice rolls
+    function alertTurn(turn, diceRoll1, diceRoll2) {
+        alert(`It's ${turn === 'yellow' ? 'Yellow' : 'White'}'s turn! Roll: ${diceRoll1}, ${diceRoll2}`);
+    }
+
+    // Function to add pieces to the board
+    function addPiece(color, position) {
+        const piece = document.createElement('div');
+        piece.classList.add('piece');
+        if (color === 'white') piece.classList.add('white-piece');
+        board.children[position].appendChild(piece);
+        pieces[color].push(piece);
+    }
+
+    // Initialize the board with default pieces
+    function initializeBoard() {
+        addPiece('yellow', 0);
+        addPiece('yellow', 0);
+        addPiece('white', 23);
+        addPiece('white', 23);
+    }
+
+    // Add event listener to the roll button
+    rollBtn.addEventListener('click', rollDice);
+
+    // Set up the board initially
+    initializeBoard();
+});
diff --git a/26.9-14.00/localStorage.js b/26.9-14.00/localStorage.js
new file mode 100644
index 0000000..e2ee950
--- /dev/null
+++ b/26.9-14.00/localStorage.js
@@ -0,0 +1,53 @@
+// localStorage.js - Save and load game state using browser's localStorage
+
+const storage = {
+    // Save the current game state to localStorage
+    saveGameState: function () {
+        const gameState = {
+            pieces: this.getPiecesState(),
+            currentPlayer: currentPlayer,
+            diceRolls: diceRolls
+        };
+        localStorage.setItem('backgammonGameState', JSON.stringify(gameState));
+        this.showAlert('Game state saved!');
+    },
+
+    // Load the saved game state from localStorage
+    loadGameState: function () {
+        const savedState = localStorage.getItem('backgammonGameState');
+        if (savedState) {
+            const { pieces, currentPlayer: savedPlayer, diceRolls: savedDiceRolls } = JSON.parse(savedState);
+            this.restorePieces(pieces);
+            currentPlayer = savedPlayer;
+            diceRolls = savedDiceRolls;
+            this.showAlert('Game state loaded!');
+        } else {
+            this.showAlert('No saved game state found.');
+        }
+    },
+
+    // Get the current state of the pieces on the board
+    getPiecesState: function () {
+        return Array.from(document.querySelectorAll('.piece')).map(piece => {
+            const position = Array.from(board.children).indexOf(piece.parentElement);
+            return {
+                color: piece.classList.contains('white-piece') ? 'white' : 'yellow',
+                position
+            };
+        });
+    },
+
+    // Restore pieces to their saved positions
+    restorePieces: function (pieces) {
+        pieces.forEach(pieceData => {
+            const piece = document.createElement('div');
+            piece.classList.add('piece', `${pieceData.color}-piece`);
+            board.children[pieceData.position].appendChild(piece);
+        });
+    },
+
+    // Utility function to display alerts
+    showAlert: function (message) {
+        alert(message);
+    }
+};
diff --git a/26.9-14.00/settings.js b/26.9-14.00/settings.js
new file mode 100644
index 0000000..97d0ad7
--- /dev/null
+++ b/26.9-14.00/settings.js
@@ -0,0 +1,25 @@
+// settings.js - Game Settings and Preferences
+
+const gameSettings = {
+    theme: "classic",
+    soundEnabled: true,
+    playerNames: { yellow: "Player 1", white: "Player 2" },
+
+    // Toggle sound on or off
+    toggleSound: function () {
+        this.soundEnabled = !this.soundEnabled;
+        this.showAlert(`Sound ${this.soundEnabled ? 'enabled' : 'disabled'}`);
+    },
+
+    // Set player names for yellow and white
+    setPlayerNames: function (yellowName, whiteName) {
+        this.playerNames.yellow = yellowName;
+        this.playerNames.white = whiteName;
+        this.showAlert(`Player names updated: ${yellowName} (Yellow), ${whiteName} (White)`);
+    },
+
+    // Utility function to show alerts (can be extended)
+    showAlert: function (message) {
+        alert(message);
+    }
+};
diff --git a/26.9-14.00/sounds.js b/26.9-14.00/sounds.js
new file mode 100644
index 0000000..772b630
--- /dev/null
+++ b/26.9-14.00/sounds.js
@@ -0,0 +1,23 @@
+// sounds.js - Adding sound effects to the game
+
+const sounds = {
+    diceRoll: new Audio('assets/sounds/dice-roll.mp3'),
+    pieceMove: new Audio('assets/sounds/piece-move.mp3'),
+    invalidMove: new Audio('assets/sounds/invalid-move.mp3'),
+    win: new Audio('assets/sounds/win.mp3'),
+
+    // Play the sound corresponding to the given type
+    playSound: function (type) {
+        const soundMap = {
+            'dice': this.diceRoll,
+            'move': this.pieceMove,
+            'invalid': this.invalidMove,
+            'win': this.win
+        };
+
+        // Play the appropriate sound if the type exists
+        if (soundMap[type]) {
+            soundMap[type].play();
+        }
+    }
+};
diff --git a/26.9-14.00/styles.css b/26.9-14.00/styles.css
new file mode 100644
index 0000000..b83196e
--- /dev/null
+++ b/26.9-14.00/styles.css
@@ -0,0 +1,163 @@
+/* styles.css - Optimized Layout and Styling */
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f3f3f3;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+}
+
+#backgammon-board {
+    width: 100vw;
+    max-width: 800px;
+    height: 100vw;
+    max-height: 800px;
+    background-color: #2f2f2f;
+    border-radius: 15px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    position: relative;
+    overflow: hidden;
+}
+
+/* Side bars */
+#left-bar, #right-bar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 50%;
+}
+
+#left-bar {
+    left: 0;
+    background-color: #333;
+}
+
+#right-bar {
+    right: 0;
+    background-color: #222;
+}
+
+/* Board Layout */
+#board {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: 1fr 1fr;
+    gap: 5px;
+    padding: 10px;
+}
+
+/* Triangles */
+.triangle {
+    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
+    background-color: #fff;
+    transition: background-color 0.3s ease;
+    margin: 5px;
+}
+
+.triangle:nth-child(even) {
+    background-color: #ddd;
+}
+
+.triangle:hover {
+    background-color: #ffcc00;
+}
+
+/* Pieces */
+.piece {
+    width: 90%;
+    height: 90%;
+    border-radius: 50%;
+    background-color: #ffcc00;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    color: #333;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
+}
+
+.piece:hover {
+    transform: scale(1.1);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+}
+
+.white-piece {
+    background-color: #fff;
+}
+
+/* Dice */
+#dice-container {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 15px;
+}
+
+.dice {
+    width: 60px;
+    height: 60px;
+    background-color: white;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    transition: transform 0.5s ease;
+}
+
+.dice:hover {
+    transform: rotate(360deg);
+}
+
+/* Roll Button */
+#roll-btn {
+    position: absolute;
+    bottom: 90px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    font-size: 1.2rem;
+    border-radius: 5px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+#roll-btn:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    #backgammon-board {
+        width: 95vw;
+        height: 95vw;
+    }
+
+    .dice {
+        width: 40px;
+        height: 40px;
+        font-size: 1.5rem;
+    }
+
+    #roll-btn {
+        padding: 8px 16px;
+        font-size: 1rem;
+    }
+}