diff --git a/.github/ISSUE_TEMPLATE/documentation.yml b/.github/ISSUE_TEMPLATE/documentation.yml
index 554caab74..6d917b1af 100644
--- a/.github/ISSUE_TEMPLATE/documentation.yml
+++ b/.github/ISSUE_TEMPLATE/documentation.yml
@@ -1,71 +1,37 @@
-name: 📝 Documentation Update
-description: Improve Documentation
-title: "[Doc]: "
-labels: [documentation]
+name: "📝 Documentation Update"
+description: "Propose an update or correction to the documentation"
+title: "DOC UPDATE:"
+labels: ["Documentation"]
 body:
-  - type: checkboxes
-    id: existing-issue
-    attributes:
-      label: Is there an existing issue for this?
-      description: Please search to see if an issue already exists for the updates you want to make.
-      options:
-        - label: I have searched the existing issues
-          required: true
-
   - type: textarea
-    id: issue-description
     attributes:
-      label: Issue Description
-      description: Please provide a clear description of the documentation update you are suggesting.
-      placeholder: Describe the improvement or correction you'd like to see in the documentation.
+      label: "Documentation Page"
+      description: "Which page or section of the documentation needs to be updated?"
     validations:
       required: true
-
   - type: textarea
-    id: suggested-change
     attributes:
-      label: Suggested Change
-      description: Provide details of the proposed change to the documentation.
-      placeholder: Explain how the documentation should be updated or corrected.
+      label: "Description of Changes"
+      description: "Describe the changes you propose for the documentation."
     validations:
       required: true
-
   - type: textarea
-    id: rationale
     attributes:
-      label: Rationale
-      description: Why is this documentation update necessary or beneficial?
-      placeholder: Explain the importance or reasoning behind the suggested change.
+      label: "Reason for Update"
+      description: "Explain why these changes are necessary or beneficial."
     validations:
       required: false
-
-  - type: dropdown
-    id: urgency
+  - type: textarea
     attributes:
-      label: Urgency
-      description: How urgently do you believe this documentation update is needed?
-      options:
-        - High
-        - Medium
-        - Low
-      default: 0
+      label: "Screenshots/Logs"
+      description: "If applicable, add screenshots or logs that can help us understand the issue better."
     validations:
-      required: true
-
+      required: false
   - type: checkboxes
-    id: terms
     attributes:
-      label: Acknowledgements
-      description: Ensure you have read and agree to the project's guidelines.
+      label: "Additional Information"
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/alo7lika/master-web-development/blob/test/CONTRIBUTING.md)*
-          required: true
-        - label: I'm a GSSOC'24-Extd contributor
-        - label: I'm a Hacktoberfest contributor
-        - label: I have starred the repository
+        - label: "I have checked the documentation for accuracy"
           required: true
-        - label: 'I am willing to work on this issue (optional)'
-          required: false
-        
-        
-    
+        - label: "I am willing to help with this update"
+        - label: "I can provide further clarification if needed"
\ No newline at end of file
diff --git a/Dice_Rolling_Simulator/Readme.md b/Dice_Rolling_Simulator/Readme.md
index e69de29bb..51e88fc0b 100644
--- a/Dice_Rolling_Simulator/Readme.md
+++ b/Dice_Rolling_Simulator/Readme.md
@@ -0,0 +1,65 @@
+### Description
+The dice rolling simulator is a simple application built using Python and the Tkinter library for the graphical user interface (GUI). The simulator mimics the action of rolling a dice, providing a random outcome between 1 and 6 each time the user interacts with the interface. This application is useful for games, educational purposes, or simply for fun.
+
+### Game_Logic
+
+- Initialization: When the program starts, it initializes the main window using Tkinter.
+- Dice Roll: A function generates a random number between 1 and 6 using Python's random module.
+- Display: The result of the dice roll is displayed on the GUI, typically as a number or a graphical representation of a dice face.
+- Interaction: The user can roll the dice by clicking a button on the GUI, which triggers the dice roll function.
+
+### FEATURES
+Random Dice Roll: Uses the random.randint(1, 6) function to generate a number between 1 and 6.
+Graphical Interface: A user-friendly interface built with Tkinter, making it easy to interact with the simulator.
+Roll Button: A button that the user clicks to roll the dice.
+Display Area: Shows the result of the dice roll, either as a numeric value or a visual representation.
+
+### Screenshot![Dice_Rolling_simulator_Game](https://github.com/priyashuu/GameZone/assets/150767072/46569298-3844-4240-a3c3-544fc47c524e)
+### Video 
+
+https://github.com/priyashuu/GameZone/assets/150767072/0d88b796-9125-4bf4-bb58-7178a456ecc8
+
+
+
+
+### Tech Stack Overview
+
+The dice rolling simulator utilizes a combination of technologies and libraries to create a functional and interactive application. Below is a breakdown of the tech stack used:
+
+#### **Programming Language:**
+- **Python**
+
+#### **Graphical User Interface (GUI):**
+- **Tkinter** 
+
+#### **Libraries and Modules:**
+- **Random**
+
+#### **Development Environment:**
+- **IDLE**
+- **VS Code**
+#### **Version Control:**
+- **Git**
+- **GitHub**
+### Example of Tech Stack in Action
+1. **Python**: The logic of the dice roll is implemented in Python using simple functions and conditional statements.
+2. **Tkinter**: Used to create the main window, buttons, and labels that make up the user interface.
+3. **Random Module**: Utilized within the dice roll function to generate a random number between 1 and 6 each time the user clicks the roll button.
+4. **Git and GitHub**: The code is version-controlled using Git and hosted on GitHub, making it easy to share and collaborate with others.
+
+### Installation Instructions
+1. **Install Python**: Download and install Python from [python.org](https://www.python.org/).
+2. **Install Tkinter**: Tkinter is included with Python, so no additional installation is required.
+3. **Clone the Repository**: If the project is hosted on GitHub, clone the repository using Git.
+   ```bash
+   git clone https://github.com/username/repository-name.git
+   ```
+4. **Run the Application**: Navigate to the project directory and run the Python script.
+   ```bash
+   cd repository-name
+   python dice_simulator.py
+   ```
+<<<<<<< HEAD
+
+=======
+>>>>>>> priyashuu-patch-1
diff --git a/EndlessRunner/Readme.md b/EndlessRunner/Readme.md
index e69de29bb..2573867a1 100644
--- a/EndlessRunner/Readme.md
+++ b/EndlessRunner/Readme.md
@@ -0,0 +1,83 @@
+# Endless Runner Game
+
+Welcome to the **Endless Runner** game! This is a fun, simple game where you control a chicken navigating through obstacles. The game ends when the chicken collides with an obstacle. 
+
+## Table of Contents
+
+- [Features](#features)
+- [Demo](#demo)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+- [Acknowledgments](#acknowledgments)
+
+## Features
+
+- **Dynamic Gameplay**: Navigate a chicken through obstacles.
+- **Jump Mechanics**: Jump to avoid obstacles.
+- **Responsive Design**: Adapts to different screen sizes.
+- **Scoring System**: Displays score when the game ends.
+- **Background Animation**: Dynamic background for a better visual experience.
+
+## Demo
+
+![Endless Runner Demo](path_to_your_demo_image.gif)
+
+You can play the game live [here](link_to_your_live_demo).
+
+## Installation
+
+To set up and run the Endless Runner game locally:
+
+1. **Clone the repository**:
+    ```bash
+    git clone https://github.com/yourusername/endless-runner.git
+    ```
+
+2. **Navigate to the project directory**:
+    ```bash
+    cd endless-runner
+    ```
+
+3. **Open `index.html` in your web browser**:
+    Simply open the `index.html` file to start playing the game.
+
+## Usage
+
+- **Jump**: Click anywhere on the page to make the chicken jump and avoid obstacles.
+- **Score**: The game displays your score when the chicken collides with an obstacle.
+
+## Contributing
+
+We welcome contributions to improve the Endless Runner game. To contribute:
+
+1. **Fork the repository**.
+2. **Create a new branch**:
+    ```bash
+    git checkout -b feature-branch
+    ```
+3. **Commit your changes**:
+    ```bash
+    git commit -m 'Add new feature'
+    ```
+4. **Push to the branch**:
+    ```bash
+    git push origin feature-branch
+    ```
+5. **Create a Pull Request**.
+
+Please make sure to follow the existing coding style and write tests for any new features or fixes.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+.
+
+## Contact
+
+For any questions or feedback, feel free to contact me at [codewithpriyaa@gmail.com].
+
+---
+
+Happy coding and enjoy the game!
diff --git a/MatchingPair/Readme.md b/MatchingPair/Readme.md
index e69de29bb..c439edde0 100644
--- a/MatchingPair/Readme.md
+++ b/MatchingPair/Readme.md
@@ -0,0 +1,89 @@
+# Matching Pairs Game
+## Description
+
+The Matching Pairs Game is a fun and engaging memory game developed using HTML, CSS, and JavaScript. The game challenges players to match pairs of cards with identical images within a limited time. It offers a simple yet addictive gameplay experience, a countdown timer, and a helpful chatbot for hints.
+
+## Features
+
+- **Interactive Gameplay:** Flip cards to reveal their images and try to find matching pairs.
+- **Scoring System:** Earn points for each successful match.
+- **Countdown Timer:** Complete the game within the allotted time to win.(FutureScope)
+- **Responsive Design:** The game is optimized for both desktop and mobile devices.
+- **Dark Theme:** The game features a modern dark theme for a comfortable playing experience.
+
+### Objective
+
+Match all pairs of cards .
+
+### How to Play
+
+1. **Starting the Game:** 
+   - All cards are placed face down on the game board.
+   - The score and timer are displayed at the top of the game area.
+
+2. **Flipping Cards:**
+   - Click on any card to flip it over and reveal the image on the front.
+   - Click on a second card to flip it over as well.
+
+3. **Matching Pairs:**
+   - If the images on the two flipped cards match, they will remain face up.
+   - If the images do not match, both cards will flip back face down after a short delay.
+
+
+5. **Timer:**
+   - The timer is displayed at the top of the game area.
+ .
+
+
+
+7. **Winning and Losing:**
+   - The game is won when all pairs of cards have been matched before the timer runs out.
+
+
+8. **Restarting the Game:**
+   - Refresh the page to start a new game.
+
+### Tips
+
+- Remember the positions of the cards you have already flipped.
+- Use hints strategically to maximize your chances of finding pairs quickly.
+
+## ScreeShots
+![Matching_Pair_Game](https://github.com/user-attachments/assets/0fc1bf7f-81b4-4124-97a2-9fa135479b66)
+## workingVideo:
+
+
+https://github.com/user-attachments/assets/cc6e7ac3-4057-47ad-b859-2aae2d4e31b9
+
+
+
+## Technologies Used
+
+- **HTML:** Structure of the game.
+- **CSS:** Styling and layout.
+- **JavaScript:** Game logic and interactivity.
+
+## Getting Started
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/yourusername/matching-pairs-game.git
+   ```
+2. Navigate to the project directory:
+   ```bash
+   cd matching-pairs-game
+   ```
+3. Open `index.html` in your web browser to play the game.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- Icons by [Favicon](https://favicon.io/)
+  
+
+---
+
+Replace `"https://github.com/yourusername/matching-pairs-game.git"` with the actual URL of your GitHub repository. This README file provides a detailed description of the game, instructions for playing, and information about the technologies used, making it easy for others to understand and contribute to your project.
diff --git a/css/style.css b/css/style.css
index 6524d55cf..8f2399a36 100644
--- a/css/style.css
+++ b/css/style.css
@@ -739,9 +739,14 @@ body {
 }
 
 .icon {
-    position: fixed;
-    top: 1rem;
-    right: 1rem;
+  position: absolute;
+  right: 0rem;
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: flex-end;
+  align-items: flex-end;
 }
 
 #toggle-mode-btn {
diff --git a/garden-planner.html b/garden-planner.html
index 405fddd02..9ff42d640 100644
--- a/garden-planner.html
+++ b/garden-planner.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Virtual Gardening Planner</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>
     /* Basic styling for the layout */
     body {
@@ -65,9 +66,114 @@
     .dragging {
       opacity: 0.5;
     }
-  </style>
-</head>
-<body>
+    :root { /* Light theme colors */ 
+            --background-color: linear-gradient(to right, #ffcccb, #ffebcd);
+            --text-color: #000000; 
+            --navbar-background: #f8f9fa; 
+            --navbar-text: #000000; 
+            --link-color: #1a73e8; 
+            --button-background: #008cba; 
+            --button-text: #ffffff; 
+        } [data-theme="dark"] { /* Dark theme colors */ 
+            --background-color: #121212; 
+            --text-color: #ffffff;
+             --navbar-background: #333333; 
+             --navbar-text: #ffffff; 
+             --link-color: #bb86fc;
+              --button-background: #3d3d3d; 
+              --button-text: #ffffff;
+             }
+             [data-theme="dark"] #container {
+    background-color: #222;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px #f1f1f15c;
+    padding: 20px;
+    width: 80%;
+    max-width: 800px;
+    text-align: center;
+}
+[data-theme="dark"]   
+.story-builder-container {
+    width: 90%;
+    max-width: 700px;
+    background: #222;
+    padding: 20px;
+    box-shadow: -1px 0px 11px 6px #3d3d3d;
+    border-radius: 10px;
+}
+[data-theme="dark"]         
+input[type="text"] {
+    width: 70%;
+    padding: 10px;
+    color: #ddd;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #333;
+}
+[data-theme="dark"] 
+th {
+    background-color: #222;
+}
+
+
+             * {
+                 padding: 0;
+                  margin: 0; box-sizing: 
+                  border-box; 
+                }
+                 body {
+             font-family: "Poppins", sans-serif;
+                 /* background-color: var(--background-color); */
+              color: var(--text-color); 
+             font-family: 'Roboto', sans-serif;
+             background:  var(--background-color); 
+             padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh; /* Full height */
+                }
+                 #navbar ul { list-style: none;
+                     padding: 0;
+                     } #navbar ul li { 
+                        display: inline;
+                         margin-right: 10px; 
+                        } 
+                        #navbar ul li a { 
+                            color: var(--navbar-text); 
+                            text-decoration: none; 
+                        } 
+                        button   {
+                             border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle 
+         { position: fixed;
+             top: 10px; 
+             right: 10px;
+          } </style>
+           </head>
+            <body data-theme="light"> 
+                            <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> 
+                             <section id="content">  </section> 
+                             <script> const toggleButton = document.getElementById('theme-toggle'); 
+                             const body = document.body; 
+                             toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); 
+                             toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; 
+                             } else { 
+                                body.setAttribute('data-theme', 'light'); 
+                                toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+                                 } }); 
+                                 </script>
 
 <h1>Virtual Gardening Planner</h1>
 <div class="planner-container">
diff --git a/index.html b/index.html
index 6558a16fb..97ad95199 100644
--- a/index.html
+++ b/index.html
@@ -166,7 +166,7 @@
 
 </style>
     <!-- Navbar Component with Centered Links and Title Update -->
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -176,7 +176,7 @@
 </head>
 <body>
     <header>
-        <nav class="navbar">
+    <nav class="navbar">
             <a href="#" class="logo">
                 Master-Web<br>
                 <span>Development</span>
@@ -192,10 +192,10 @@
                 <li><a href="#">Projects</a></li>
                 <li><a href="./feedback.html">Feedback</a></li>
             </ul>
-        </nav>
+        </nav> 
     </header>
 </body>
-</html>
+</html> -->
 
     <link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remix.css" rel="stylesheet" />
     <link rel="stylesheet" href="styles.css">
@@ -590,7 +590,7 @@ <h3 class="card-heading">Virtual Garden Planner</h3>
 
             <a href="./story-builder.html" class="card Generators" target="_blank">
                 <div class="card-cover">
-                    <img src="assets/image/story-builder.webp" alt="">
+                    <img src="assets/image/-builder.webp" alt="">
                 </div>
                 <div class="card-content">
                     <h3 class="card-heading">Story Builder</h3>
diff --git a/navbar.css b/navbar.css
index c9456edad..1997f5395 100644
--- a/navbar.css
+++ b/navbar.css
@@ -230,7 +230,9 @@ body {
   align-items: center;
   justify-content: center;
   border-bottom: 1px solid var(--accent-color);
+  margin-top: -18px;
 }
+
 /* Navbar list */
 .navbar ul {
   list-style: none;
diff --git a/projects/Bakery-Management-System/static/js/main.aa8fead0.js.LICENSE.txt b/projects/Bakery-Management-System/static/js/main.aa8fead0.js.LICENSE.txt
index db8b8a5d0..d04833ac8 100644
--- a/projects/Bakery-Management-System/static/js/main.aa8fead0.js.LICENSE.txt
+++ b/projects/Bakery-Management-System/static/js/main.aa8fead0.js.LICENSE.txt
@@ -194,7 +194,7 @@ object-assign
 
 /**
  * @license
- * jsPDF virtual FileSystem functionality
+ * jsPDF  FileSystem functionality
  *
  * Licensed under the MIT License.
  * http://opensource.org/licenses/mit-license
diff --git a/projects/guess_the_shape/index.html b/projects/guess_the_shape/index.html
index 4a9186fba..67067041a 100644
--- a/projects/guess_the_shape/index.html
+++ b/projects/guess_the_shape/index.html
@@ -5,8 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Guess the Shape!</title>
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
 </head>
-<body>
+<body data-theme="light"> 
+                <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> 
+                 <section id="content">  </section> 
+                 <script> const toggleButton = document.getElementById('theme-toggle'); 
+                 const body = document.body; 
+                 toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); 
+                 toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; 
+                 } else { 
+                    body.setAttribute('data-theme', 'light'); 
+                    toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+                     } }); 
+                     </script>
+
     <div class="game-container">
         <h1>Guess the Shape!</h1>
         <div id="shape-display" class="shape"></div>
diff --git a/projects/guess_the_shape/styles.css b/projects/guess_the_shape/styles.css
index 5ddecdaad..f8e61a83a 100644
--- a/projects/guess_the_shape/styles.css
+++ b/projects/guess_the_shape/styles.css
@@ -57,3 +57,120 @@ body {
     font-weight: bold;
     color: #ff7f50;
 }
+:root { /* Light theme colors */ 
+    --background-color: linear-gradient(to right, #ffcccb, #ffebcd);
+    --text-color: #000000; 
+    --navbar-background: #f8f9fa; 
+    --navbar-text: #000000; 
+    --link-color: #1a73e8; 
+    --button-background: #008cba; 
+    --button-text: #ffffff; 
+} [data-theme="dark"] { /* Dark theme colors */ 
+    --background-color: #121212; 
+    --text-color: #ffffff;
+     --navbar-background: #333333; 
+     --navbar-text: #ffffff; 
+     --link-color: #bb86fc;
+      --button-background: #3d3d3d; 
+      --button-text: #ffffff;
+     }
+     [data-theme="dark"] #container {
+background-color: #222;
+border-radius: 8px;
+box-shadow: 0 4px 20px #f1f1f15c;
+padding: 20px;
+width: 80%;
+max-width: 800px;
+text-align: center;
+}
+[data-theme="dark"]   
+.story-builder-container {
+width: 90%;
+max-width: 700px;
+background: #222;
+padding: 20px;
+box-shadow: -1px 0px 11px 6px #3d3d3d;
+border-radius: 10px;
+}
+[data-theme="dark"]         
+input[type="text"] {
+width: 70%;
+padding: 10px;
+color: #ddd;
+border: 1px solid #ddd;
+border-radius: 5px;
+background-color: #333;
+}
+[data-theme="dark"] 
+th {
+background-color: #222;
+}
+
+
+     * {
+         padding: 0;
+          margin: 0; box-sizing: 
+          border-box; 
+        }
+         body {
+     font-family: "Poppins", sans-serif;
+         /* background-color: var(--background-color); */
+      color: var(--text-color); 
+     font-family: 'Roboto', sans-serif;
+     background:  var(--background-color); 
+     padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* Full height */
+        }
+         #navbar ul { list-style: none;
+             padding: 0;
+             } #navbar ul li { 
+                display: inline;
+                 margin-right: 10px; 
+                } 
+                #navbar ul li a { 
+                    color: var(--navbar-text); 
+                    text-decoration: none; 
+                } 
+                button   {
+                     border: none;
+display: inline-flex;
+appearance: none;
+align-items: center;
+justify-content: center;
+border-radius: 9999px;
+padding: 8px;
+align-items: center;
+background-color: #f43f5e;
+color: #ffffff;
+cursor: pointer;
+}
+ #theme-toggle 
+ { position: fixed;
+     top: 10px; 
+     right: 10px;
+ }
+ 
+ #clue {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+    color: black;
+}
+[data-theme="dark"] 
+.game-container {
+    text-align: center;
+    background: #222;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 16px #f1f1f1;
+    width: 90%;
+    max-width: 400px;
+}
+[data-theme="dark"] 
+#clue {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+    color: #f1f1f1;
+}
\ No newline at end of file
diff --git a/story-builder.html b/story-builder.html
index 24bdc014a..4d64d5e6e 100644
--- a/story-builder.html
+++ b/story-builder.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Interactive Story Builder</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <style>
         * {
             margin: 0;
@@ -73,9 +74,120 @@
         .generate-btn:hover {
             background: #ff5037;
         }
-    </style>
-</head>
-<body>
+   
+        :root { /* Light theme colors */ 
+            --background-color: linear-gradient(to right, #ffcccb, #ffebcd);
+            --text-color: #000000; 
+            --navbar-background: #f8f9fa; 
+            --navbar-text: #000000; 
+            --link-color: #1a73e8; 
+            --button-background: #008cba; 
+            --button-text: #ffffff; 
+        } [data-theme="dark"] { /* Dark theme colors */ 
+            --background-color: #121212; 
+            --text-color: #ffffff;
+             --navbar-background: #333333; 
+             --navbar-text: #ffffff; 
+             --link-color: #bb86fc;
+              --button-background: #3d3d3d; 
+              --button-text: #ffffff;
+             }
+             [data-theme="dark"] #container {
+    background-color: #222;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px #f1f1f15c;
+    padding: 20px;
+    width: 80%;
+    max-width: 800px;
+    text-align: center;
+}
+[data-theme="dark"]   
+.story-builder-container {
+    width: 90%;
+    max-width: 700px;
+    background: #222;
+    padding: 20px;
+    box-shadow: -1px 0px 11px 6px #3d3d3d;
+    border-radius: 10px;
+}
+[data-theme="dark"]         
+input[type="text"] {
+    width: 70%;
+    padding: 10px;
+    color: #ddd;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #333;
+}
+[data-theme="dark"] 
+th {
+    background-color: #222;
+}
+
+[data-theme="dark"] 
+h1 {
+    margin-bottom: 20px;
+    color: #f1f1f1;
+}
+             * {
+                 padding: 0;
+                  margin: 0; box-sizing: 
+                  border-box; 
+                }
+                 body {
+             font-family: "Poppins", sans-serif;
+                 /* background-color: var(--background-color); */
+              color: var(--text-color); 
+             font-family: 'Roboto', sans-serif;
+             background:  var(--background-color); 
+             padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh; /* Full height */
+                }
+                 #navbar ul { list-style: none;
+                     padding: 0;
+                     } #navbar ul li { 
+                        display: inline;
+                         margin-right: 10px; 
+                        } 
+                        #navbar ul li a { 
+                            color: var(--navbar-text); 
+                            text-decoration: none; 
+                        } 
+                        button   {
+                             border: none;
+       display: inline-flex;
+       appearance: none;
+       align-items: center;
+       justify-content: center;
+       border-radius: 9999px;
+       padding: 8px;
+       align-items: center;
+       background-color: #f43f5e;
+       color: #ffffff;
+       cursor: pointer;
+   }
+         #theme-toggle 
+         { position: fixed;
+             top: 10px; 
+             right: 10px;
+          } </style>
+           </head>
+            <body data-theme="light"> 
+                            <button id="theme-toggle"> <i class="fas fa-sun"></i> </button> 
+                             <section id="content">  </section> 
+                             <script> const toggleButton = document.getElementById('theme-toggle'); 
+                             const body = document.body; 
+                             toggleButton.addEventListener('click', () => { if (body.getAttribute('data-theme') === 'light') { body.setAttribute('data-theme', 'dark'); 
+                             toggleButton.innerHTML = '<i class="fas fa-moon"></i>'; 
+                             } else { 
+                                body.setAttribute('data-theme', 'light'); 
+                                toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+                                 } }); 
+                                 </script>
+
     <div class="story-builder-container">
         <h2>Interactive Story Builder</h2>
         <div class="input-group">
diff --git a/styles.css b/styles.css
index 13d9db6dc..e5687772a 100644
--- a/styles.css
+++ b/styles.css
@@ -337,6 +337,7 @@ display: flex;
 align-items: center;
 justify-content: center;
 border-bottom: 1px solid var(--accent-color);
+margin-top: -18px;
 }
 /* Navbar list */
 .navbar ul {