diff --git a/src/pages/challenges/challenge1.tsx b/src/pages/challenges/challenge1.tsx
index 8c36e93db..60ff3781b 100644
--- a/src/pages/challenges/challenge1.tsx
+++ b/src/pages/challenges/challenge1.tsx
@@ -4,7 +4,8 @@ import Layout from "@theme/Layout";
 const DataStructuresQuiz: React.FC = () => {
   const questions = [
     {
-      question: "1. What is the time complexity of accessing an element in an array?",
+      question:
+        "1. What is the time complexity of accessing an element in an array?",
       options: ["A) O(1)", "B) O(n)", "C) O(log n)", "D) O(n^2)"],
       answer: "A) O(1)",
     },
@@ -19,7 +20,8 @@ const DataStructuresQuiz: React.FC = () => {
       answer: "C) Enqueue",
     },
     {
-      question: "4. The minimum number of stacks needed to implement a queue is:",
+      question:
+        "4. The minimum number of stacks needed to implement a queue is:",
       options: ["A) 1", "B) 2", "C) 3", "D) 4"],
       answer: "B) 2",
     },
@@ -30,17 +32,34 @@ const DataStructuresQuiz: React.FC = () => {
     },
     {
       question: "6. Which of the following is not a type of linked list?",
-      options: ["A) Singly linked list", "B) Doubly linked list", "C) Circular linked list", "D) Quadruple linked list"],
+      options: [
+        "A) Singly linked list",
+        "B) Doubly linked list",
+        "C) Circular linked list",
+        "D) Quadruple linked list",
+      ],
       answer: "D) Quadruple linked list",
     },
     {
-      question: "7. What is the main advantage of using a linked list over an array?",
-      options: ["A) Faster access time", "B) Dynamic size", "C) Better memory utilization", "D) Simplicity"],
+      question:
+        "7. What is the main advantage of using a linked list over an array?",
+      options: [
+        "A) Faster access time",
+        "B) Dynamic size",
+        "C) Better memory utilization",
+        "D) Simplicity",
+      ],
       answer: "B) Dynamic size",
     },
     {
-      question: "8. Which traversal technique is used to visit all nodes in a binary tree?",
-      options: ["A) In-order", "B) Pre-order", "C) Post-order", "D) All of the above"],
+      question:
+        "8. Which traversal technique is used to visit all nodes in a binary tree?",
+      options: [
+        "A) In-order",
+        "B) Pre-order",
+        "C) Post-order",
+        "D) All of the above",
+      ],
       answer: "D) All of the above",
     },
     {
@@ -50,27 +69,56 @@ const DataStructuresQuiz: React.FC = () => {
     },
     {
       question: "10. What is the main characteristic of a binary search tree?",
-      options: ["A) All nodes have two children", "B) Left subtree has lesser values, right subtree has greater values", "C) Balanced height", "D) None of the above"],
-      answer: "B) Left subtree has lesser values, right subtree has greater values",
+      options: [
+        "A) All nodes have two children",
+        "B) Left subtree has lesser values, right subtree has greater values",
+        "C) Balanced height",
+        "D) None of the above",
+      ],
+      answer:
+        "B) Left subtree has lesser values, right subtree has greater values",
     },
     {
-      question: "11. Which of the following is an application of Queue Data Structure?",
-      options: ["A) When a resource is shared among multiple consumers", "B) When data is transferred asynchronously", "C) Load Balancing", "D) All of the above"],
+      question:
+        "11. Which of the following is an application of Queue Data Structure?",
+      options: [
+        "A) When a resource is shared among multiple consumers",
+        "B) When data is transferred asynchronously",
+        "C) Load Balancing",
+        "D) All of the above",
+      ],
       answer: "D) All of the above",
     },
     {
-      question: "12. Consider the following statements about binary trees: i. First-in-first-out computations are efficiently supported by STACKS. ii. Implementing LISTS on linked lists is more efficient than on arrays. iii. Implementing QUEUES on a circular array is more efficient than on a linear array with two indices. Which is correct?",
-      options: ["A) (ii) is true", "B) (i) and (ii) are true", "C) (iii) is true", "D) (ii) and (iv) are true"],
+      question:
+        "12. Consider the following statements about binary trees: i. First-in-first-out computations are efficiently supported by STACKS. ii. Implementing LISTS on linked lists is more efficient than on arrays. iii. Implementing QUEUES on a circular array is more efficient than on a linear array with two indices. Which is correct?",
+      options: [
+        "A) (ii) is true",
+        "B) (i) and (ii) are true",
+        "C) (iii) is true",
+        "D) (ii) and (iv) are true",
+      ],
       answer: "A) (ii) is true",
     },
     {
       question: "13. Which of the following option is not correct?",
-      options: ["A) If the queue is implemented with a linked list, only rear pointer will change during insertion", "B) Queue data structure can implement LRU page fault algorithm", "C) Queue data structure can implement Quick sort algorithm but not LRU", "D) Both A and C"],
+      options: [
+        "A) If the queue is implemented with a linked list, only rear pointer will change during insertion",
+        "B) Queue data structure can implement LRU page fault algorithm",
+        "C) Queue data structure can implement Quick sort algorithm but not LRU",
+        "D) Both A and C",
+      ],
       answer: "D) Both A and C",
     },
     {
-      question: "14. The conditions to detect queue full and queue empty in a circular queue are:",
-      options: ["A) Full: (REAR+1) mod n == FRONT, empty: REAR == FRONT", "B) Full: REAR == FRONT, empty: (REAR+1) mod n == FRONT", "C) Full: (FRONT+1) mod n == REAR, empty: REAR == FRONT", "D) Full: (REAR+1) mod n == FRONT, empty: (FRONT+1) mod n == REAR"],
+      question:
+        "14. The conditions to detect queue full and queue empty in a circular queue are:",
+      options: [
+        "A) Full: (REAR+1) mod n == FRONT, empty: REAR == FRONT",
+        "B) Full: REAR == FRONT, empty: (REAR+1) mod n == FRONT",
+        "C) Full: (FRONT+1) mod n == REAR, empty: REAR == FRONT",
+        "D) Full: (REAR+1) mod n == FRONT, empty: (FRONT+1) mod n == REAR",
+      ],
       answer: "A) Full: (REAR+1) mod n == FRONT, empty: REAR == FRONT",
     },
     {
@@ -80,76 +128,119 @@ const DataStructuresQuiz: React.FC = () => {
     },
     {
       question: "16. The in-order traversal of a binary search tree yields:",
-      options: ["A) The values in descending order", "B) The values in random order", "C) The values in ascending order", "D) The values in sorted order based on depth"],
+      options: [
+        "A) The values in descending order",
+        "B) The values in random order",
+        "C) The values in ascending order",
+        "D) The values in sorted order based on depth",
+      ],
       answer: "C) The values in ascending order",
     },
     {
-      question: "17. The postorder traversal of a binary tree visits nodes in what order?",
-      options: ["A) Left, Right, Root", "B) Root, Left, Right", "C) Right, Left, Root", "D) Root, Right, Left"],
+      question:
+        "17. The postorder traversal of a binary tree visits nodes in what order?",
+      options: [
+        "A) Left, Right, Root",
+        "B) Root, Left, Right",
+        "C) Right, Left, Root",
+        "D) Root, Right, Left",
+      ],
       answer: "A) Left, Right, Root",
     },
     {
-      question: "18. Which data structure is best suited for implementing a priority queue?",
+      question:
+        "18. Which data structure is best suited for implementing a priority queue?",
       options: ["A) Array", "B) Linked List", "C) Heap", "D) Stack"],
       answer: "C) Heap",
     },
     {
-      question: "19. What is the time complexity for inserting an element in a binary heap?",
+      question:
+        "19. What is the time complexity for inserting an element in a binary heap?",
       options: ["A) O(log n)", "B) O(n)", "C) O(1)", "D) O(n log n)"],
       answer: "A) O(log n)",
     },
     {
       question: "20. In a hash table, what is the purpose of a hash function?",
-      options: ["A) To store values", "B) To retrieve values", "C) To convert keys into array indices", "D) To sort the data"],
+      options: [
+        "A) To store values",
+        "B) To retrieve values",
+        "C) To convert keys into array indices",
+        "D) To sort the data",
+      ],
       answer: "C) To convert keys into array indices",
     },
     {
-      question: "21. Which of the following is NOT a characteristic of a binary tree?",
-      options: ["A) Each node can have at most two children", "B) A binary tree can be empty", "C) A binary tree has a maximum depth of log n", "D) Every node in a binary tree has two children"],
+      question:
+        "21. Which of the following is NOT a characteristic of a binary tree?",
+      options: [
+        "A) Each node can have at most two children",
+        "B) A binary tree can be empty",
+        "C) A binary tree has a maximum depth of log n",
+        "D) Every node in a binary tree has two children",
+      ],
       answer: "D) Every node in a binary tree has two children",
     },
     {
-      question: "22. Which tree structure allows for efficient searching, inserting, and deleting operations?",
+      question:
+        "22. Which tree structure allows for efficient searching, inserting, and deleting operations?",
       options: ["A) Binary Tree", "B) AVL Tree", "C) Linked List", "D) Stack"],
       answer: "B) AVL Tree",
     },
     {
-      question: "23. In which data structure can you not delete an arbitrary element?",
+      question:
+        "23. In which data structure can you not delete an arbitrary element?",
       options: ["A) Array", "B) Stack", "C) Queue", "D) All of the above"],
       answer: "B) Stack",
     },
     {
-      question: "24. What traversal method is used in a level order traversal of a binary tree?",
-      options: ["A) Depth-First Search", "B) Breadth-First Search", "C) In-order", "D) Pre-order"],
+      question:
+        "24. What traversal method is used in a level order traversal of a binary tree?",
+      options: [
+        "A) Depth-First Search",
+        "B) Breadth-First Search",
+        "C) In-order",
+        "D) Pre-order",
+      ],
       answer: "B) Breadth-First Search",
     },
     {
-      question: "25. What is the space complexity of a recursive function that uses O(n) stack space?",
+      question:
+        "25. What is the space complexity of a recursive function that uses O(n) stack space?",
       options: ["A) O(1)", "B) O(n)", "C) O(n^2)", "D) O(log n)"],
       answer: "B) O(n)",
     },
     {
-      question: "26. Which of the following data structures can be used to implement a recursive function?",
+      question:
+        "26. Which of the following data structures can be used to implement a recursive function?",
       options: ["A) Queue", "B) Stack", "C) Array", "D) Linked List"],
       answer: "B) Stack",
     },
     {
-      question: "27. What is the worst-case time complexity for searching an element in a binary search tree?",
+      question:
+        "27. What is the worst-case time complexity for searching an element in a binary search tree?",
       options: ["A) O(log n)", "B) O(n)", "C) O(n log n)", "D) O(1)"],
       answer: "B) O(n)",
     },
     {
-      question: "28. Which of the following is true for the adjacency list representation of a graph?",
-      options: ["A) It uses more memory than an adjacency matrix", "B) It is faster to find if an edge exists", "C) It is more space-efficient for sparse graphs", "D) None of the above"],
+      question:
+        "28. Which of the following is true for the adjacency list representation of a graph?",
+      options: [
+        "A) It uses more memory than an adjacency matrix",
+        "B) It is faster to find if an edge exists",
+        "C) It is more space-efficient for sparse graphs",
+        "D) None of the above",
+      ],
       answer: "C) It is more space-efficient for sparse graphs",
     },
     {
-      question: "29. Which data structure would you use to implement a function that reverses a string?",
+      question:
+        "29. Which data structure would you use to implement a function that reverses a string?",
       options: ["A) Queue", "B) Stack", "C) Array", "D) Linked List"],
       answer: "B) Stack",
     },
     {
-      question: "30. What is a disadvantage of using a linked list over an array?",
+      question:
+        "30. What is a disadvantage of using a linked list over an array?",
       options: [
         "A) More memory usage",
         "B) Random access",
@@ -184,7 +275,7 @@ const DataStructuresQuiz: React.FC = () => {
   }, [timeLeft]);
 
   // Handle option selection
-  const handleOptionSelect = (option:string) => {
+  const handleOptionSelect = (option: string) => {
     setSelectedOption(option);
     if (option === questions[currentQuestionIndex].answer) {
       setCorrectAnswers(correctAnswers + 1);
@@ -200,7 +291,6 @@ const DataStructuresQuiz: React.FC = () => {
       setCurrentQuestionIndex(currentQuestionIndex + 1);
       setSelectedOption("");
     }
-    
   };
 
   // Function to finish the quiz
@@ -237,26 +327,45 @@ const DataStructuresQuiz: React.FC = () => {
       title="Data Structures Quiz"
       description="Test your knowledge of data structures with this quiz."
     >
-      <div className="bg-gray-200 max-w-2xl mx-auto rounde-2xl my-10 rounded-3xl p-10">
-        <h2 className="text-center">Data Structures Challenge-1</h2>
+      <div className="bg-gray-200 dark:bg-gray-800 max-w-2xl mx-auto rounded-2xl my-10 p-10">
+        <h2 className="text-center text-gray-900 dark:text-gray-100">
+          Data Structures Challenge-1
+        </h2>
         {showResult ? (
           <div>
-            <h2>
+            <h2 className="text-gray-900 dark:text-gray-100">
               Your Score: {correctAnswers} out of {questions.length}
             </h2>
-            <h2>Time Spent: {formatTime(timeSpent)}</h2>{" "}
-            {/* Show time spent here */}
-            <div style={{ textAlign: "left", marginTop: "20px" }}>              <h4 style={{ color: "black", marginBottom: "10px" }}>Review Your Answers:</h4>
+            <h2 className="text-gray-900 dark:text-gray-100">
+              Time Spent: {formatTime(timeSpent)}
+            </h2>
+            <div className="text-left mt-5">
+              <h4 className="text-black dark:text-gray-100 mb-2">
+                Review Your Answers:
+              </h4>
               <ul>
                 {questions.map((question, index) => (
-                  <li key={index} style={{ marginBottom: "15px" }}>
-                    <p><strong>{question.question}</strong></p>
+                  <li key={index} className="mb-4">
+                    <p className="font-bold text-gray-900 dark:text-gray-100">
+                      {question.question}
+                    </p>
                     <p>
-                      Your Answer: <span style={{ color: userAnswers[index] === question.answer ? "green" : "red" }}>
+                      Your Answer:{" "}
+                      <span
+                        style={{
+                          color:
+                            userAnswers[index] === question.answer
+                              ? "green"
+                              : "red",
+                        }}
+                      >
                         {userAnswers[index]}
                       </span>
                     </p>
-                    <p>Correct Answer: <span style={{ color: "green" }}>{question.answer}</span></p>
+                    <p>
+                      Correct Answer:{" "}
+                      <span className="text-green-600">{question.answer}</span>
+                    </p>
                   </li>
                 ))}
               </ul>
@@ -264,19 +373,29 @@ const DataStructuresQuiz: React.FC = () => {
           </div>
         ) : (
           <div>
-            <h3 className="text-center">Time Left: {formatTime(timeLeft)}</h3>{" "}
-            {/* Show running timer */}
-            <div className="bg-white rounded-2xl p-4">
-              <h3>{questions[currentQuestionIndex].question}</h3>
+            <h3 className="text-center text-gray-900 dark:text-gray-100">
+              Time Left: {formatTime(timeLeft)}
+            </h3>
+            <div className="bg-white dark:bg-gray-900 rounded-2xl p-4">
+              <h3 className="text-gray-900 dark:text-gray-100">
+                {questions[currentQuestionIndex].question}
+              </h3>
               <div>
                 {questions[currentQuestionIndex].options.map(
                   (option, index) => (
                     <div
                       key={index}
-                      className="text-left my-2 bg-white rounded-md p-3 w-full"
+                      className="text-left my-2 dark:text-gray-900 rounded-md p-3 w-full"
                       style={{
-                        border: selectedOption === option ? "2px solid orange" : "1px solid #ddd",
-                        backgroundColor: selectedOption === option ? "rgba(255, 165, 0, 0.1)" : "white",
+                        border:
+                          selectedOption === option
+                            ? "2px solid orange"
+                            : "1px solid #ddd",
+                        backgroundColor:
+                          selectedOption === option
+                            ? "rgb(17, 24, 39, 1)"
+                            : "white",
+                        color: selectedOption === option ? "#ffffff" : "black",
                         cursor: "pointer",
                       }}
                       onClick={() => handleOptionSelect(option)}
@@ -286,10 +405,19 @@ const DataStructuresQuiz: React.FC = () => {
                   )
                 )}
               </div>
-              <button className="mt-5 bg-gray-800 rounded-lg text-white border border-gray-800 p-3 disabled:bg-gray-500 disabled:border-gray-500 disabled:cursor-not-allowed" onClick={handleNextQuestion} disabled={!selectedOption}>
+              <button
+                className="mt-5 bg-gray-800 dark:bg-orange-600 text-white dark:text-gray-100 rounded-lg border border-gray-800 dark:border-orange-600 p-3 disabled:bg-gray-500 disabled:border-gray-500 disabled:cursor-not-allowed"
+                onClick={handleNextQuestion}
+                disabled={!selectedOption}
+              >
                 Next Question
               </button>
-              <button className="mt-5 bg-gray-100 border border-gray-800 rounded-lg text-gray-800 ml-2 p-3" onClick={handleSubmitQuiz}>Submit Quiz</button>
+              <button
+                className="mt-5 bg-gray-100 dark:bg-gray-700 border border-gray-800 dark:border-gray-600 rounded-lg text-gray-800 dark:text-gray-100 ml-2 p-3"
+                onClick={handleSubmitQuiz}
+              >
+                Submit Quiz
+              </button>
             </div>
           </div>
         )}
@@ -299,4 +427,3 @@ const DataStructuresQuiz: React.FC = () => {
 };
 
 export default DataStructuresQuiz;
-
diff --git a/src/pages/challenges/challenge2.tsx b/src/pages/challenges/challenge2.tsx
index f213e5955..770037b11 100644
--- a/src/pages/challenges/challenge2.tsx
+++ b/src/pages/challenges/challenge2.tsx
@@ -206,7 +206,7 @@ const DataStructuresQuiz = () => {
   }, [timeLeft]);
 
   // Handle option selection
-  const handleOptionSelect = (option:string) => {
+  const handleOptionSelect = (option: string) => {
     setSelectedOption(option);
     if (option === questions[currentQuestionIndex].answer) {
       setCorrectAnswers(correctAnswers + 1);
@@ -222,7 +222,6 @@ const DataStructuresQuiz = () => {
       setCurrentQuestionIndex(currentQuestionIndex + 1);
       setSelectedOption("");
     }
-    
   };
 
   // Function to finish the quiz
@@ -259,26 +258,45 @@ const DataStructuresQuiz = () => {
       title="Data Structures Quiz"
       description="Test your knowledge of data structures with this quiz."
     >
-      <div className="bg-gray-200 max-w-2xl mx-auto rounde-2xl my-10 rounded-3xl p-10">
-        <h2 className="text-center">Data Structures Challenge-2</h2>
+      <div className="bg-gray-200 dark:bg-gray-800 max-w-2xl mx-auto rounded-2xl my-10 p-10">
+        <h2 className="text-center text-gray-900 dark:text-gray-100">
+          Data Structures Challenge-1
+        </h2>
         {showResult ? (
           <div>
-            <h2>
+            <h2 className="text-gray-900 dark:text-gray-100">
               Your Score: {correctAnswers} out of {questions.length}
             </h2>
-            <h2>Time Spent: {formatTime(timeSpent)}</h2>{" "}
-            {/* Show time spent here */}
-            <div style={{ textAlign: "left", marginTop: "20px" }}>              <h4 style={{ color: "black", marginBottom: "10px" }}>Review Your Answers:</h4>
+            <h2 className="text-gray-900 dark:text-gray-100">
+              Time Spent: {formatTime(timeSpent)}
+            </h2>
+            <div className="text-left mt-5">
+              <h4 className="text-black dark:text-gray-100 mb-2">
+                Review Your Answers:
+              </h4>
               <ul>
                 {questions.map((question, index) => (
-                  <li key={index} style={{ marginBottom: "15px" }}>
-                    <p><strong>{question.question}</strong></p>
+                  <li key={index} className="mb-4">
+                    <p className="font-bold text-gray-900 dark:text-gray-100">
+                      {question.question}
+                    </p>
                     <p>
-                      Your Answer: <span style={{ color: userAnswers[index] === question.answer ? "green" : "red" }}>
+                      Your Answer:{" "}
+                      <span
+                        style={{
+                          color:
+                            userAnswers[index] === question.answer
+                              ? "green"
+                              : "red",
+                        }}
+                      >
                         {userAnswers[index]}
                       </span>
                     </p>
-                    <p>Correct Answer: <span style={{ color: "green" }}>{question.answer}</span></p>
+                    <p>
+                      Correct Answer:{" "}
+                      <span className="text-green-600">{question.answer}</span>
+                    </p>
                   </li>
                 ))}
               </ul>
@@ -286,19 +304,29 @@ const DataStructuresQuiz = () => {
           </div>
         ) : (
           <div>
-            <h3 className="text-center">Time Left: {formatTime(timeLeft)}</h3>{" "}
-            {/* Show running timer */}
-            <div className="bg-white rounded-2xl p-4">
-              <h3>{questions[currentQuestionIndex].question}</h3>
+            <h3 className="text-center text-gray-900 dark:text-gray-100">
+              Time Left: {formatTime(timeLeft)}
+            </h3>
+            <div className="bg-white dark:bg-gray-900 rounded-2xl p-4">
+              <h3 className="text-gray-900 dark:text-gray-100">
+                {questions[currentQuestionIndex].question}
+              </h3>
               <div>
                 {questions[currentQuestionIndex].options.map(
                   (option, index) => (
                     <div
                       key={index}
-                      className="text-left my-2 bg-white rounded-md p-3 w-full"
+                      className="text-left my-2 dark:text-gray-900 rounded-md p-3 w-full"
                       style={{
-                        border: selectedOption === option ? "2px solid orange" : "1px solid #ddd",
-                        backgroundColor: selectedOption === option ? "rgba(255, 165, 0, 0.1)" : "white",
+                        border:
+                          selectedOption === option
+                            ? "2px solid orange"
+                            : "1px solid #ddd",
+                        backgroundColor:
+                          selectedOption === option
+                            ? "rgb(17, 24, 39, 1)"
+                            : "white",
+                        color: selectedOption === option ? "#ffffff" : "black",
                         cursor: "pointer",
                       }}
                       onClick={() => handleOptionSelect(option)}
@@ -308,10 +336,19 @@ const DataStructuresQuiz = () => {
                   )
                 )}
               </div>
-              <button className="mt-5 bg-gray-800 rounded-lg text-white border border-gray-800 p-3 disabled:bg-gray-500 disabled:border-gray-500 disabled:cursor-not-allowed" onClick={handleNextQuestion} disabled={!selectedOption}>
+              <button
+                className="mt-5 bg-gray-800 dark:bg-orange-600 text-white dark:text-gray-100 rounded-lg border border-gray-800 dark:border-orange-600 p-3 disabled:bg-gray-500 disabled:border-gray-500 disabled:cursor-not-allowed"
+                onClick={handleNextQuestion}
+                disabled={!selectedOption}
+              >
                 Next Question
               </button>
-              <button className="mt-5 bg-gray-100 border border-gray-800 rounded-lg text-gray-800 ml-2 p-3" onClick={handleSubmitQuiz}>Submit Quiz</button>
+              <button
+                className="mt-5 bg-gray-100 dark:bg-gray-700 border border-gray-800 dark:border-gray-600 rounded-lg text-gray-800 dark:text-gray-100 ml-2 p-3"
+                onClick={handleSubmitQuiz}
+              >
+                Submit Quiz
+              </button>
             </div>
           </div>
         )}
diff --git a/src/pages/challenges/challenge3.tsx b/src/pages/challenges/challenge3.tsx
index c19781a2c..5ffeeb920 100644
--- a/src/pages/challenges/challenge3.tsx
+++ b/src/pages/challenges/challenge3.tsx
@@ -292,7 +292,7 @@ const DataStructuresQuiz = () => {
   }, [timeLeft]);
 
   // Handle option selection
-  const handleOptionSelect = (option:string) => {
+  const handleOptionSelect = (option: string) => {
     setSelectedOption(option);
     if (option === questions[currentQuestionIndex].answer) {
       setCorrectAnswers(correctAnswers + 1);
@@ -344,26 +344,45 @@ const DataStructuresQuiz = () => {
       title="Data Structures Quiz"
       description="Test your knowledge of data structures with this quiz."
     >
-      <div className="bg-gray-200 max-w-2xl mx-auto rounde-2xl my-10 rounded-3xl p-10">
-        <h2 className="text-center">Advanced Data Structures Challenge</h2>
+      <div className="bg-gray-200 dark:bg-gray-800 max-w-2xl mx-auto rounded-2xl my-10 p-10">
+        <h2 className="text-center text-gray-900 dark:text-gray-100">
+          Data Structures Challenge-1
+        </h2>
         {showResult ? (
           <div>
-            <h2>
+            <h2 className="text-gray-900 dark:text-gray-100">
               Your Score: {correctAnswers} out of {questions.length}
             </h2>
-            <h2>Time Spent: {formatTime(timeSpent)}</h2>{" "}
-            {/* Show time spent here */}
-            <div style={{ textAlign: "left", marginTop: "20px" }}>              <h4 style={{ color: "black", marginBottom: "10px" }}>Review Your Answers:</h4>
+            <h2 className="text-gray-900 dark:text-gray-100">
+              Time Spent: {formatTime(timeSpent)}
+            </h2>
+            <div className="text-left mt-5">
+              <h4 className="text-black dark:text-gray-100 mb-2">
+                Review Your Answers:
+              </h4>
               <ul>
                 {questions.map((question, index) => (
-                  <li key={index} style={{ marginBottom: "15px" }}>
-                    <p><strong>{question.question}</strong></p>
+                  <li key={index} className="mb-4">
+                    <p className="font-bold text-gray-900 dark:text-gray-100">
+                      {question.question}
+                    </p>
                     <p>
-                      Your Answer: <span style={{ color: userAnswers[index] === question.answer ? "green" : "red" }}>
+                      Your Answer:{" "}
+                      <span
+                        style={{
+                          color:
+                            userAnswers[index] === question.answer
+                              ? "green"
+                              : "red",
+                        }}
+                      >
                         {userAnswers[index]}
                       </span>
                     </p>
-                    <p>Correct Answer: <span style={{ color: "green" }}>{question.answer}</span></p>
+                    <p>
+                      Correct Answer:{" "}
+                      <span className="text-green-600">{question.answer}</span>
+                    </p>
                   </li>
                 ))}
               </ul>
@@ -371,19 +390,29 @@ const DataStructuresQuiz = () => {
           </div>
         ) : (
           <div>
-            <h3 className="text-center">Time Left: {formatTime(timeLeft)}</h3>{" "}
-            {/* Show running timer */}
-            <div className="bg-white rounded-2xl p-4">
-              <h3>{questions[currentQuestionIndex].question}</h3>
+            <h3 className="text-center text-gray-900 dark:text-gray-100">
+              Time Left: {formatTime(timeLeft)}
+            </h3>
+            <div className="bg-white dark:bg-gray-900 rounded-2xl p-4">
+              <h3 className="text-gray-900 dark:text-gray-100">
+                {questions[currentQuestionIndex].question}
+              </h3>
               <div>
                 {questions[currentQuestionIndex].options.map(
                   (option, index) => (
                     <div
                       key={index}
-                      className="text-left my-2 bg-white rounded-md p-3 w-full"
+                      className="text-left my-2 dark:text-gray-900 rounded-md p-3 w-full"
                       style={{
-                        border: selectedOption === option ? "2px solid orange" : "1px solid #ddd",
-                        backgroundColor: selectedOption === option ? "rgba(255, 165, 0, 0.1)" : "white",
+                        border:
+                          selectedOption === option
+                            ? "2px solid orange"
+                            : "1px solid #ddd",
+                        backgroundColor:
+                          selectedOption === option
+                            ? "rgb(17, 24, 39, 1)"
+                            : "white",
+                        color: selectedOption === option ? "#ffffff" : "black",
                         cursor: "pointer",
                       }}
                       onClick={() => handleOptionSelect(option)}
@@ -393,10 +422,19 @@ const DataStructuresQuiz = () => {
                   )
                 )}
               </div>
-              <button className="mt-5 bg-gray-800 rounded-lg text-white border border-gray-800 p-3 disabled:bg-gray-500 disabled:border-gray-500 disabled:cursor-not-allowed" onClick={handleNextQuestion} disabled={!selectedOption}>
+              <button
+                className="mt-5 bg-gray-800 dark:bg-orange-600 text-white dark:text-gray-100 rounded-lg border border-gray-800 dark:border-orange-600 p-3 disabled:bg-gray-500 disabled:border-gray-500 disabled:cursor-not-allowed"
+                onClick={handleNextQuestion}
+                disabled={!selectedOption}
+              >
                 Next Question
               </button>
-              <button className="mt-5 bg-gray-100 border border-gray-800 rounded-lg text-gray-800 ml-2 p-3" onClick={handleSubmitQuiz}>Submit Quiz</button>
+              <button
+                className="mt-5 bg-gray-100 dark:bg-gray-700 border border-gray-800 dark:border-gray-600 rounded-lg text-gray-800 dark:text-gray-100 ml-2 p-3"
+                onClick={handleSubmitQuiz}
+              >
+                Submit Quiz
+              </button>
             </div>
           </div>
         )}