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/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 {