diff --git a/README.md b/README.md
index 76921e4..8cb4702 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,69 @@
 # Coding-Quiz
-Coding Quiz Challenge
+Coding Quiz Challenge using JavaScript
+
+## Overview
+
+Welcome to the Coding Quiz Website! This web application allows users to test their coding knowledge through a series of interactive quizzes. The quiz challenges users with code-related questions and provides instant feedback on their answers.
+
+## Table of Contents
+
+- [Features](#features)
+- [Screenshots](#screenshots)
+- [Deployment](#deployment)
+- [How to Use](#how-to-use)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+
+- **Quiz Challenges:** Engage in coding challenges covering various programming topics.
+- **Timer:** A countdown timer adds an element of urgency to the quiz, and incorrect answers result in a time penalty.
+- **Score Tracking:** Keep track of your score as you progress through the quiz.
+- **Highscores:** View and submit your scores to compete with others on the highscores leaderboard.
+
+## Screenshots
+
+![Screenshot1](/assets/images/finished_startquiz_Page.png)
+![Screenshot2](/assets/images/finished_question1_Page.png)
+![Screenshot3](/assets/images/finished_question2_Page.png)
+![Screenshot4](/assets/images/finished_end_quiz.png)
+![Screenshot5](/assets/images/finished_highscores_page.png)
+
+## Deployment
+
+1. Site is live at https://vivekiyer7.github.io/Coding-Quiz/
+
+To run the application locally, follow these steps:
+
+1. Clone the repository: `git clone https://github.com/vivekiyer7/Coding-Quiz.git`
+2. Open the `index.html` file in your preferred browser.
+
+## How to Use
+
+1. Open the web application in your preferred browser.
+2. Quiz is for 75 Sec and has 10 Questions (which ever finish first)
+3. There is a peanlty of 10 Sec if answer is worng.
+4. At the end answer is displayed and can be stored.
+5. Past highscrores can be seen from High-Scores Page.
+
+## Contributing
+
+If you'd like to contribute to this project, please follow these steps:
+
+1. Fork the repository.
+2. Create a new branch: `git checkout -b feature/new-feature`.
+3. Commit your changes: `git commit -m 'Add new feature'`.
+4. Push to the branch: `git push origin feature/new-feature`.
+5. Submit a pull request.
+
+## License
+
+This project is licensed under the [GNU General Public License v3.0](LICENSE).
+
+### Author
+
+Vivek Iyer
+
+---
+
+Made with ❤️️ by Vivek Iyer
diff --git a/assets/Challenge_ReadME.md b/assets/Challenge_ReadME.md
index 6d8b9a2..fd28cb8 100644
--- a/assets/Challenge_ReadME.md
+++ b/assets/Challenge_ReadME.md
@@ -35,7 +35,7 @@ Create a code quiz that contains the following requirements:
 
 The following animation demonstrates the application functionality:
 
-![Animation of code quiz. Presses button to start quiz. Clicks the button for the answer to each question, displays if answer was correct or incorrect. Quiz finishes and displays high scores. User adds their intials, then clears their intials and starts over.](./assets/08-web-apis-challenge-demo.gif)
+![Animation of code quiz. Presses button to start quiz. Clicks the button for the answer to each question, displays if answer was correct or incorrect. Quiz finishes and displays high scores. User adds their intials, then clears their intials and starts over.](./images/08-web-apis-challenge-demo.gif)
 
 ## Grading Requirements
 
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 8f2861b..f3122ab 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,6 +1,7 @@
 body {
   font-family: Arial;
-  font-size: 120%;
+  font-size: 100%;
+  background-color: #f0f0f0;
 }
 
 a {
@@ -42,6 +43,7 @@ ol {
   padding-left: 0px;
   max-height: 400px;
   overflow: auto;
+  text-align: left;
 }
 
 li {
@@ -56,10 +58,12 @@ li:nth-child(odd) {
 .wrapper {
   margin: 100px auto 0 auto;
   max-width: 600px;
+  text-align: center;
 }
 
 .hide {
   display: none;
+  text-align: center;
 }
 
 .start {
@@ -86,3 +90,31 @@ li:nth-child(odd) {
   top: 10px;
   right: 10px;
 }
+
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#questions-title {
+  text-align: center;
+}
+
+.flex-container h2 {
+  text-align: left;
+}
+
+.flex-container h3 {
+  text-align: left;
+  font-style: italic;
+}
+
+#questions-html {
+  display: none;
+}
+
+.separator {
+  border: 1px solid #ccc;
+  margin: 10px 0;
+}
diff --git a/assets/html/highscores.html b/assets/html/highscores.html
index 470387b..17b477b 100644
--- a/assets/html/highscores.html
+++ b/assets/html/highscores.html
@@ -4,9 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
     <title>Highscores</title>
 
-    <link rel="stylesheet" href="./assets/css/styles.css" />
+    <link rel="stylesheet" href="../css/styles.css" />
   </head>
 
   <body>
@@ -14,10 +15,10 @@
       <h1>Highscores</h1>
       <ol id="highscores"></ol>
 
-      <a href="index.html"><button>Go Back</button></a>
+      <a href="../../index.html"><button>Go Back</button></a>
       <button id="clear">Clear Highscores</button>
     </div>
 
-    <script src="./assets/js/scores.js"></script>
+    <script src="../js/scores.js"></script>
   </body>
 </html>
diff --git a/assets/images/08-web-apis-challenge-demo-134 (dragged).tiff b/assets/images/08-web-apis-challenge-demo-134 (dragged).tiff
deleted file mode 100644
index b11e445..0000000
Binary files a/assets/images/08-web-apis-challenge-demo-134 (dragged).tiff and /dev/null differ
diff --git a/assets/images/08-web-apis-challenge-demo-135 (dragged).tiff b/assets/images/08-web-apis-challenge-demo-135 (dragged).tiff
deleted file mode 100644
index e1ee771..0000000
Binary files a/assets/images/08-web-apis-challenge-demo-135 (dragged).tiff and /dev/null differ
diff --git a/assets/images/08-web-apis-challenge-demo-178 (dragged).tiff b/assets/images/08-web-apis-challenge-demo-178 (dragged).tiff
deleted file mode 100644
index a02127a..0000000
Binary files a/assets/images/08-web-apis-challenge-demo-178 (dragged).tiff and /dev/null differ
diff --git a/assets/images/08-web-apis-challenge-demo-179 (dragged).tiff b/assets/images/08-web-apis-challenge-demo-179 (dragged).tiff
deleted file mode 100644
index 53bd4b9..0000000
Binary files a/assets/images/08-web-apis-challenge-demo-179 (dragged).tiff and /dev/null differ
diff --git a/assets/images/08-web-apis-challenge-demo-20 (dragged).tiff b/assets/images/08-web-apis-challenge-demo-20 (dragged).tiff
deleted file mode 100644
index d9c11be..0000000
Binary files a/assets/images/08-web-apis-challenge-demo-20 (dragged).tiff and /dev/null differ
diff --git a/assets/images/08-web-apis-challenge-demo-7 (dragged).tiff b/assets/images/08-web-apis-challenge-demo-7 (dragged).tiff
deleted file mode 100644
index 6c13439..0000000
Binary files a/assets/images/08-web-apis-challenge-demo-7 (dragged).tiff and /dev/null differ
diff --git a/assets/images/favicon.ico b/assets/images/favicon.ico
new file mode 100644
index 0000000..0a0447a
Binary files /dev/null and b/assets/images/favicon.ico differ
diff --git a/assets/images/finished_end_quiz.png b/assets/images/finished_end_quiz.png
new file mode 100644
index 0000000..0d36959
Binary files /dev/null and b/assets/images/finished_end_quiz.png differ
diff --git a/assets/images/finished_highscores_page.png b/assets/images/finished_highscores_page.png
new file mode 100644
index 0000000..53ce64c
Binary files /dev/null and b/assets/images/finished_highscores_page.png differ
diff --git a/assets/images/finished_question1_Page.png b/assets/images/finished_question1_Page.png
new file mode 100644
index 0000000..ff56f0e
Binary files /dev/null and b/assets/images/finished_question1_Page.png differ
diff --git a/assets/images/finished_question2_Page.png b/assets/images/finished_question2_Page.png
new file mode 100644
index 0000000..ae0cd57
Binary files /dev/null and b/assets/images/finished_question2_Page.png differ
diff --git a/assets/images/finished_startquiz_Page.png b/assets/images/finished_startquiz_Page.png
new file mode 100644
index 0000000..7323e45
Binary files /dev/null and b/assets/images/finished_startquiz_Page.png differ
diff --git a/assets/js/logic.js b/assets/js/logic.js
new file mode 100644
index 0000000..6dbef71
--- /dev/null
+++ b/assets/js/logic.js
@@ -0,0 +1,142 @@
+document.addEventListener('DOMContentLoaded', function () {
+  // Your existing code here
+  let currentQuestionIndex = 0
+  let score = 0
+  let totalTime = 75
+  let timerDisplay = document.getElementById('time')
+  let timerInterval
+  let startScreen = document.getElementById('start-screen')
+  let questionsContainer = document.getElementById('questions-html')
+  timerDisplay.textContent = totalTime
+  var highscores_link = document.getElementById('highscores_page_link')
+
+  var startBtn = document.querySelector('#start')
+  var submitBtn = document.querySelector('#submit')
+
+  startBtn.addEventListener('click', function () {
+    startQuiz()
+    displayQuestion()
+  })
+
+  submitBtn.addEventListener('click', function () {
+    submit_score()
+  })
+
+  function startQuiz () {
+    updateTimer()
+    timerInterval = setInterval(updateTimer, 1000)
+    // Hide the start screen when the quiz starts
+    startScreen.style.display = 'none'
+    highscores_link.style.display = 'none'
+    // Apply flex styles to center questions when starting the quiz
+    questionsContainer.style.display = 'flex'
+  }
+
+  function updateTimer () {
+    if (totalTime > 0) {
+      totalTime--
+      timerDisplay.textContent = totalTime
+    } else {
+      clearInterval(timerInterval)
+      timerDisplay.textContent = "0 -- Time's Up!"
+      // Hide the questions container
+      questionsContainer.style.display = 'none'
+      endQuiz()
+    }
+  }
+
+  function displayQuestion () {
+    // Assuming you have an array of questions named quizQuestions
+    let question = quizQuestions[currentQuestionIndex]
+
+    // Clear previous question and answer elements
+    let questionTitleEl = document.getElementById('question-title')
+    questionTitleEl.textContent =
+      'Ques:' + `${currentQuestionIndex + 1}: ` + question.question
+
+    let answerheaderEl = document.getElementById('answer-header')
+    answerheaderEl.textContent = 'Options:'
+
+    let choicesContainer = document.getElementById('choices')
+    choicesContainer.innerHTML = '' // Clear previous choices
+
+    // Display each option on a separate line with numbering
+    for (let j = 0; j < question.choices.length; j++) {
+      let choice = question.choices[j]
+
+      let choiceEl = document.createElement('button')
+      choiceEl.textContent = `${j + 1}. ${choice}` // Add numbering
+      choiceEl.addEventListener('click', function () {
+        handleAnswer(choice)
+      })
+
+      choicesContainer.appendChild(choiceEl)
+    }
+  }
+
+  function handleAnswer (answer) {
+    let answerstatusEl = document.getElementById('answer-status')
+
+    // Check if the answer is correct
+    if (answer === quizQuestions[currentQuestionIndex].correctAnswer) {
+      // If the answer is correct, increase the score
+      score++
+      answerstatusEl.textContent = 'Answer Status: Correct'
+      //wait for 2 seconds before moving to next question
+      setTimeout(function () {
+        answerstatusEl.textContent = ''
+      }, 2000)
+    } else {
+      answerstatusEl.textContent = 'Answer Status: Incorrect'
+      //wait for 2 seconds before moving to next question
+      setTimeout(function () {
+        answerstatusEl.textContent = ''
+      }, 2000)
+      // If the answer is wrong, penalize the time
+      totalTime -= 10
+      if (totalTime < 0) {
+        totalTime = 0
+      }
+      timerDisplay.textContent = totalTime
+    }
+
+    // Move to the next question
+    currentQuestionIndex++
+
+    // If there are more questions, display the next one
+    if (currentQuestionIndex < quizQuestions.length) {
+      displayQuestion(currentQuestionIndex)
+    } else {
+      // Hide the questions container
+      questionsContainer.style.display = 'none'
+      endQuiz()
+    }
+  }
+
+  function endQuiz () {
+    // Stop the timer
+    clearInterval(timerInterval)
+
+    // Display the final score
+    let scoreElement = document.getElementById('final-score')
+    scoreElement.textContent = score
+
+    // Show the end screen
+    let endScreen = document.getElementById('end-screen')
+    endScreen.style.display = 'block'
+  }
+
+  function submit_score () {
+    let initials = document.querySelector('#initials').value
+    let newScore = {
+      initials: initials,
+      score: score
+    }
+    //Save in local storage of highscores.html page
+
+    let highScores = JSON.parse(localStorage.getItem('highscoresstorage')) || []
+    highScores.push(newScore)
+    localStorage.setItem('highscoresstorage', JSON.stringify(highScores))
+    window.location.href = './assets/html/highscores.html'
+  }
+})
diff --git a/assets/js/questions.js b/assets/js/questions.js
new file mode 100644
index 0000000..eeefa0b
--- /dev/null
+++ b/assets/js/questions.js
@@ -0,0 +1,52 @@
+const quizQuestions = [
+    {
+        question: "What does HTML stand for?",
+        choices: [ "Hyper Text Markup Language", "Highly Typed Machine Learning", "Hyperlink and Text Markup Language", "Home Tool Markup Language" ],
+        correctAnswer: "Hyper Text Markup Language"
+    },
+    {
+        question: "Which programming language is known as the 'language of the web'?",
+        choices: [ "Java", "Python", "JavaScript", "C++" ],
+        correctAnswer: "JavaScript"
+    },
+    {
+        question: "What is the purpose of CSS?",
+        choices: [ "To create dynamic web pages", "To style and layout web pages", "To perform server-side scripting", "To store and organize data in databases" ],
+        correctAnswer: "To style and layout web pages"
+    },
+    {
+        question: "What is the result of the expression '5 + 3' in JavaScript?",
+        choices: [ "8", "15", "53", "Error" ],
+        correctAnswer: "8"
+    },
+    {
+        question: "Which symbol is used for single-line comments in JavaScript?",
+        choices: [ "//", "/*", "#", "--" ],
+        correctAnswer: "//"
+    },
+    {
+        question: "What is the default behavior of the 'a' tag in HTML if no 'href' attribute is provided?",
+        choices: [ "It will link to the current page", "It will link to the homepage of the website", "It will not be a clickable link", "It will cause an error" ],
+        correctAnswer: "It will not be a clickable link"
+    },
+    {
+        question: "Which keyword is used to declare a variable in JavaScript?",
+        choices: [ "var", "let", "const", "variable" ],
+        correctAnswer: "var"
+    },
+    {
+        question: "What is the purpose of the 'head' element in HTML?",
+        choices: [ "To define the main content of the document", "To contain metadata about the document", "To create a header section", "To define a hyperlink" ],
+        correctAnswer: "To contain metadata about the document"
+    },
+    {
+        question: "What does CSS stand for?",
+        choices: [ "Counter Style Sheets", "Computer Style Sheets", "Cascading Style Sheets", "Colorful Style Sheets" ],
+        correctAnswer: "Cascading Style Sheets"
+    },
+    {
+        question: "What is the purpose of the 'console.log()' function in JavaScript?",
+        choices: [ "To log messages to the console for debugging", "To display a message on the webpage", "To create a popup window", "To define a new function" ],
+        correctAnswer: "To log messages to the console for debugging"
+    }
+]
diff --git a/assets/js/scores.js b/assets/js/scores.js
new file mode 100644
index 0000000..46d1222
--- /dev/null
+++ b/assets/js/scores.js
@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', function () {
+    displayhighScore();
+  
+    // Clear High Scores button
+    var clearBtn = document.querySelector('#clear');
+    clearBtn.addEventListener('click', function () {
+      clearhighScore();
+    });
+  
+    function displayhighScore() {
+        let highScores = JSON.parse(localStorage.getItem('highscoresstorage')) || [];
+        let highScoreList = document.getElementById('highscores');
+        
+        // Clear existing content
+        highScoreList.innerHTML = '';
+    
+        // Sort scores by score property in descending order
+        highScores.sort((a, b) => b.score - a.score);
+
+        // Loop through highScores and create list items
+        highScores.forEach((score, index) => {
+            let listItem = document.createElement('li');
+            listItem.textContent = `${score.initials} : ${score.score}`;
+            highScoreList.appendChild(listItem);
+        });
+    }
+    
+  
+    function clearhighScore() {
+      // Clear high scores in local storage
+      localStorage.removeItem('highscoresstorage');
+  
+      // Clear the displayed high scores on the page
+      let highScoreList = document.getElementById('highscores');
+      highScoreList.innerHTML = '';
+    }
+  });
+  
diff --git a/index.html b/index.html
index f264f38..077b8d9 100644
--- a/index.html
+++ b/index.html
@@ -5,14 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Coding Quiz</title>
-
     <link rel="stylesheet" href="./assets/css/styles.css" />
+    <link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
   </head>
 
   <body>
-    <div class="scores"><a href="highscores.html">View Highscores</a></div>
+    <div class="scores">
+      <a id="highscores_page_link" href="./assets/html/highscores.html">View Highscores</a>
+    </div>
 
-    <div class="timer">Time: <span id="time">0</span></div>
+    <div class="timer">
+      Time: <span id="time">0</span>
+    </div>
 
     <div class="wrapper">
       <div id="start-screen" class="start">
@@ -25,24 +29,26 @@ <h1>Coding Quiz Challenge</h1>
         <button id="start">Start Quiz</button>
       </div>
 
-      <div id="questions" class="hide">
+      <div id="questions-html" class="hide flex-container">
         <h2 id="question-title"></h2>
+        <h2 id="answer-header"></h2>
         <div id="choices" class="choices"></div>
+        <hr class="separator">
+        <h3 id="answer-status"></h3>
       </div>
 
       <div id="end-screen" class="hide">
-        <h2>All done!</h2>
-        <p>Your final score is <span id="final-score"></span>.</p>
+        <h3>All done!</h3>
+        <h2>Your final score is <span id="final-score"></span>.</h2>
         <p>
           Enter initials: <input type="text" id="initials" max="3" />
           <button id="submit">Submit</button>
         </p>
       </div>
-
       <div id="feedback" class="feedback hide"></div>
     </div>
 
-    <script src="./assets/js/questions.js"></script>
     <script src="./assets/js/logic.js"></script>
+    <script src="./assets/js/questions.js"></script>
   </body>
 </html>