diff --git a/QuizApp/ANKUR2304/index.html b/QuizApp/ANKUR2304/index.html
index 1c7ab31ac..4d290a775 100644
--- a/QuizApp/ANKUR2304/index.html
+++ b/QuizApp/ANKUR2304/index.html
@@ -4,12 +4,19 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+    <!-- Fontawesome CSS CDN -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"/>
     <link href="styles.css" rel="stylesheet">
     <script defer src="script.js"></script>
     <title>Quiz Game</title>
 </head>
 <body>
+  <!-- Theme button -->
+  <div class="theme-button">
+    <button id="light-theme-btn"><i class="fas fa-sun fa-2x"></i></button>
+    <button id="dark-theme-btn"><i class="fas fa-moon fa-2x"></i></button>
+  </div>
+
   <div class="container">
     <div id="question-container" class="hide">
       <div id="question">Question</div>
@@ -27,5 +34,8 @@
     </div>
 
   </div>
+
+  <!-- Fontawesome JS CDN -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/js/all.min.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/QuizApp/ANKUR2304/script.js b/QuizApp/ANKUR2304/script.js
index ff83f7d8d..82d3eb755 100644
--- a/QuizApp/ANKUR2304/script.js
+++ b/QuizApp/ANKUR2304/script.js
@@ -6,6 +6,13 @@ const questionContainerElement = document.getElementById("question-container");
 const questionElement = document.getElementById("question");
 const answerButtonsElement = document.getElementById("answer-buttons");
 
+// Theme buttons
+const lightThemeButton = document.getElementById('light-theme-btn');
+const darkThemeButton = document.getElementById('dark-theme-btn');
+// Theme body
+const mainContainer = document.querySelector('.container');
+
+
 let shuffledQuestions, currentQuestionIndex;
 
 startButton.addEventListener("click", startGame);
@@ -123,3 +130,40 @@ const questions = [
     ],
   },
 ];
+
+
+// Check for saved theme preference on page load
+window.addEventListener('load', () => {
+  const savedDarkMode = localStorage.getItem('darkMode');
+  if (savedDarkMode === 'enabled') {
+    applyDarkTheme();
+  } else {
+    applyLightTheme();
+  }
+});
+
+// Dark theme activation
+darkThemeButton.addEventListener('click', () => {
+  applyDarkTheme();
+  localStorage.setItem('darkMode', 'enabled');
+});
+
+// Dark theme deactivation
+lightThemeButton.addEventListener('click', () => {
+  applyLightTheme();
+  localStorage.setItem('darkMode', 'disabled');
+});
+
+// Function to apply dark theme styles
+function applyDarkTheme() {
+  darkThemeButton.style.display = 'none';
+  lightThemeButton.style.display = 'initial';
+  mainContainer.classList.add('container-dark');
+}
+
+// Function to apply light theme styles
+function applyLightTheme() {
+  darkThemeButton.style.display = 'initial';
+  lightThemeButton.style.display = 'none';
+  mainContainer.classList.remove('container-dark');
+}
\ No newline at end of file
diff --git a/QuizApp/ANKUR2304/styles.css b/QuizApp/ANKUR2304/styles.css
index 1f56697be..a713e2472 100644
--- a/QuizApp/ANKUR2304/styles.css
+++ b/QuizApp/ANKUR2304/styles.css
@@ -82,4 +82,33 @@
   
   .hide {
     display: none;
+  }
+
+  /*--================================== 
+  Dark theme styles
+  ==================================--*/
+  .theme-button {
+    width: 100%;
+    padding: 30px;
+    text-align: right;
+    position: fixed;
+    top: 0;
+  }
+
+  .theme-button button {
+    background: transparent;
+    border: none;
+    color: #ffffff;
+    cursor: pointer;
+    padding: 5px;
+  }
+
+  .theme-button #light-theme-btn {
+    display: none;
+  }
+
+  .container-dark {
+    background: #000000;
+    color: #ffffff;
+    box-shadow: 0 0 10px 2px #000000;
   }
\ No newline at end of file
