diff --git a/Flutter.md b/Flutter.md
index e80605c..f0a98c4 100644
--- a/Flutter.md
+++ b/Flutter.md
@@ -59,7 +59,7 @@ The evaluation would be done mainly on the following basis:
 3. Completion of mentioned tasks
 4. Bonus Points for implementing extra features depending on your creativity😉
 
-Remember, the deadline for this week's task is **June 7th, 2022, 23:59**.
+Remember, the deadline for this week's task is **June 10th, 2022, 23:59**.
 
 ## Submission Guidelines :
 
diff --git a/Js/highscore.js b/Js/highscore.js
new file mode 100644
index 0000000..a8fcdc1
--- /dev/null
+++ b/Js/highscore.js
@@ -0,0 +1,55 @@
+
+// return btn
+const btn = document.getElementById("btn");
+btn.addEventListener("click", function () {
+    window.location.href = '../index.html';
+}
+);
+
+
+// convert localStorage to array and get all key names from localStorage
+var high_score = Object.values(localStorage);
+var keys = Object.keys(localStorage);
+
+// find index of name key which is not to print
+var index = high_score.indexOf(localStorage.name);
+
+
+// sorted both keys and score
+for (let j = 0; j < high_score.length; j++) {
+
+    for (let k = 0; k < high_score.length; k++) {
+        if (k != index && j != index) {
+            if (parseInt(high_score[j]) > parseInt(high_score[k])) {
+                var temp = high_score[j];
+                high_score[j] = high_score[k];
+                high_score[k] = temp;
+                var temp2 = keys[j];
+                keys[j] = keys[k];
+                keys[k] = temp2;
+            }
+        }
+    }
+}
+
+// display high_score in page
+for (var i = 0; i < high_score.length && i < 11; i++) {
+
+    if (i != index) {
+        // display keys and values
+        const tr = document.createElement('tr');
+        const th = document.createElement('th');
+        th.scope = "row";
+        const td1 = document.createElement('td');
+        const td2 = document.createElement('td');
+
+        th.textContent = i;
+        td1.textContent = keys[i];
+        td2.textContent = high_score[i];
+        tr.appendChild(th);
+        tr.appendChild(td1);
+        tr.appendChild(td2);
+        document.getElementById('highscore').appendChild(tr);
+    }
+}
+
diff --git a/Js/script.js b/Js/script.js
new file mode 100644
index 0000000..a70c1f8
--- /dev/null
+++ b/Js/script.js
@@ -0,0 +1,224 @@
+// grabbing and declaring variable
+const Head = document.querySelector('#heading');
+const word = document.querySelector('#word');
+const incorrect_place = document.querySelector('#incorrect');
+const alphabet = document.querySelector('#alphabets-place');
+const number_of_lives = document.querySelector('#lives_number');
+const button_of_hint = document.querySelector('#hint-button')
+const URL = 'https://random-word-api.herokuapp.com/word';
+const Whole_page = document.getElementById('container')
+const streak_content = document.querySelector('#streck-place')
+const reset_btn = document.querySelector('#restart_button')
+const timer_content = document.querySelector('#timer-place')
+const head = document.querySelector('.head')
+const body_arms = document.querySelectorAll('.secondthing')
+const words = document.querySelector('#word-place');
+const legs = document.querySelectorAll('.thirdthing')
+const audio = new Audio("../sound/sound.mp3");
+let counting_streak = 0;
+let life;
+let letter_found;
+let hard_level = 1;
+let seconds = 120;
+let array_for_hint_button = [];
+var playing_player_index;
+
+// getting player name and its score to change
+for (var i = 1; i <= localStorage.length; i++) {
+    var the_playing_player = localStorage.key(i);
+    if (the_playing_player === "name") {
+        playing_player_index = i;
+    }
+}
+const name_of_players = localStorage.key(playing_player_index);
+const player_name = localStorage.getItem(name_of_players);
+const score_of_player = localStorage.getItem(player_name);
+
+
+
+
+// restart button event
+reset_btn.addEventListener('click', () => {
+    window.location.href = '../index.html';
+})
+
+
+
+// getting data from API
+fetch(URL).then(function (response) {
+    return response.json();
+}).then(function (Data) {
+
+    // checking hard_level condition of word
+    if (Data[0].length > 5 && hard_level === 1) {
+        life = 3;
+        const WORD_IN_CAPITAL = Data[0].toUpperCase();
+        const array_of_capital_letter = WORD_IN_CAPITAL.split('');
+        number_of_lives.textContent = life;
+        const length_of_word = Data[0].length;
+        var char_array = [];
+        letter_found = length_of_word;
+
+        // timer
+        var countdown = setInterval(() => {
+            seconds -= 1;
+            timer_content.innerHTML = seconds + "s";
+            if (seconds === 0) {
+                clearInterval(countdown);
+                Whole_page.classList.add('loose_win')
+                words.textContent = "";
+                array_of_capital_letter.forEach(alpha => {
+                    words.textContent = words.textContent + " " + alpha + " ";
+                });
+                Head.textContent = "Time is up! You Lose";
+                Whole_page.classList.add('loose_win')
+                reset_btn.classList.remove('loose_win')
+                reset_btn.classList.add('click_able')
+            }
+        }, 1000);
+
+
+
+        // dash for word
+        for (let index = 0; index < length_of_word; index++) {
+            char_array.push('_');
+            words.textContent = words.textContent + '   _  ';
+        }
+
+
+
+
+        // display all aplhabets
+        for (let index = 0; index < 26; index++) {
+            alphabet.innerHTML = alphabet.innerHTML + '<button class="btn btn-outline-primary alphabet" id="alphabet">' + String.fromCharCode(65 + index) + '</button>';
+        }
+
+
+
+
+
+        const all_alphabet = document.querySelectorAll('#alphabet');
+        // nodelist to array
+        all_alphabet.forEach(function (alphabet) {
+
+            alphabet.addEventListener('click', function () {
+                // seeing click on word
+                audio.play();
+                alphabet.classList.remove('btn-outline-primary');
+                alphabet.classList.add('btn-primary');
+                alphabet.classList.add('disabled');
+                // find alphabet exist in word at which place
+                const alphabet_exist = array_of_capital_letter.indexOf(alphabet.textContent);
+                var index = -1;
+                var index_array = [];
+                // if alphabet exist see in word
+                if (alphabet_exist > -1) {
+                    all_alphabet.forEach(e => {
+                        if (e.textContent == alphabet.textContent) {
+                            e.classList.add('btn-success');
+                            e.classList.remove('btn-outline-primary');
+                        }
+                    });
+                    array_of_capital_letter.forEach(alphabets => {
+                        index++;
+                        if (alphabets == alphabet.textContent) {
+                            index_array.push(index);
+                        }
+                    });
+                    index = -1;
+                    counting_streak += index_array.length;
+                    streak_content.textContent = counting_streak;
+                    index_array.forEach(number => {
+                        char_array[number] = alphabet.textContent;
+                    });
+
+
+                    words.innerHTML = "";
+
+                    char_array.forEach(char => {
+                        words.textContent = words.textContent + " " + char + " ";
+                    })
+
+
+                    letter_found -= index_array.length;
+
+
+
+                    if (letter_found === 0) {
+                        clearInterval(countdown);
+                        Whole_page.classList.add('loose_win');
+                        Head.textContent = "You Win";
+                        // string to int convertion
+                        var score = parseInt(score_of_player);
+                        score += 3;
+                        localStorage.setItem(player_name, score);
+                        // location reload after 5 seconds
+                        setTimeout(() => {
+                            window.location.reload();
+                        }
+                            , 3000);
+
+                    }
+                } else {
+                    // display in incorrect_place
+                    counting_streak = 0;
+                    streak_content.textContent = counting_streak;
+                    incorrect_place.textContent = incorrect_place.textContent + " " + alphabet.textContent;
+                    all_alphabet.forEach(e => {
+                        if (e.textContent == alphabet.textContent) {
+                            e.classList.add('btn-danger');
+                            e.classList.remove('btn-outline-primary');
+                        }
+                    });
+
+                    number_of_lives.textContent = number_of_lives.textContent - 1;
+                    life--;
+                    if (life === 2) {
+                        head.classList.remove('display')
+                    }
+                    if (life === 1) {
+                        body_arms.forEach(thing => {
+                            thing.classList.remove('display')
+                        });
+
+                    }
+                    if (life === 0) {
+                        legs.forEach(thing => {
+                            thing.classList.remove('display')
+                        });
+                        clearInterval(countdown);
+                        words.textContent = "";
+                        array_of_capital_letter.forEach(alpha => {
+                            words.textContent = words.textContent + " " + alpha + " ";
+                        });
+                        Whole_page.classList.add('loose_win')
+                        reset_btn.classList.remove('loose_win')
+                        reset_btn.classList.add('click_able')
+                        Head.textContent = "You Lose";
+                    }
+                }
+            })
+            button_of_hint.addEventListener('click', () => {
+                button_of_hint.classList.add('disabled');
+                for (let k = 0; k < length_of_word; k++) {
+                    if (char_array[k] == '_') {
+                        array_for_hint_button.push(k);
+                    }
+                }
+                all_alphabet.forEach(e => {
+                    if (e.textContent == array_of_capital_letter[array_for_hint_button[0]]) {
+                        e.classList.remove('alphabet');
+                        e.classList.add('alphabet-hint');
+                        e.classList.remove('btn-outline-primary');
+                    }
+                });
+            }
+            )
+        })
+
+    }
+    else {
+        location.reload();
+    }
+
+})
diff --git a/Js/scripteasy.js b/Js/scripteasy.js
new file mode 100644
index 0000000..3937773
--- /dev/null
+++ b/Js/scripteasy.js
@@ -0,0 +1,239 @@
+const Head = document.querySelector('#heading');
+const word = document.querySelector('#word');
+const incorrect_place = document.querySelector('#incorrect');
+const words = document.querySelector('#word-place');
+const alphabet = document.querySelector('#alphabets-place');
+const number_of_lives = document.querySelector('#lives_number');
+const button_of_hint = document.querySelector('#hint-button')
+const URL = 'https://random-word-api.herokuapp.com/word';
+const Whole_page = document.getElementById('container')
+const streak_content = document.querySelector('#streck-place')
+const reset_btn = document.querySelector('#restart_button')
+const firstthing = document.querySelector('.head')
+const secondthing = document.querySelector('.body')
+const thirdthing = document.querySelectorAll('.thirdthing')
+const fourththing = document.querySelector('.leg1');
+const fifththing = document.querySelector('.leg2');
+const timer_content = document.querySelector('#timer-place')
+const audio = new Audio("../sound/sound.mp3");
+let counting_streak = 0;
+let lives;
+let letter_found;
+let easy_level = 1;
+let seconds = 240;
+let array_for_hint_button = [];
+
+for (var i = 1; i <= localStorage.length; i++) {
+
+    var the_playing_player = localStorage.key(i);
+    if (the_playing_player === "name") {
+        var index_of_the_player = i;
+    }
+}
+const name_of_players = localStorage.key(index_of_the_player);
+const player_name = localStorage.getItem(name_of_players);
+const score_of_player = localStorage.getItem(player_name);
+
+
+
+
+
+
+
+
+reset_btn.addEventListener('click', () => {
+    window.location.href = '../index.html';
+})
+
+
+
+fetch(URL).then(function (response) {
+    return response.json();
+}).then(function (Data) {
+
+
+
+    if (Data[0].length <= 5 && easy_level === 1) {
+
+        lives = 5;
+        number_of_lives.textContent = lives;
+
+
+
+        const WORD_IN_CAPITAL = Data[0].toUpperCase();
+        const array_of_capital_letter = WORD_IN_CAPITAL.split('');
+        const length_of_word = Data[0].length;
+        letter_found = length_of_word;
+
+
+
+
+        var char_array = [];
+
+
+        var timer = setInterval(() => {
+            seconds -= 1;
+            timer_content.innerHTML = seconds + "s";
+            if (seconds === 0) {
+                clearInterval(timer);
+                Whole_page.classList.add('loose_win')
+                words.textContent = "";
+                array_of_capital_letter.forEach(alpha => {
+                    words.textContent = words.textContent + " " + alpha + " ";
+                });
+                Head.textContent = "Time is up! You Lose";
+                Whole_page.classList.add('loose_win')
+                reset_btn.classList.remove('loose_win')
+                reset_btn.classList.add('click_able')
+            }
+        }, 1000);
+
+
+
+
+        for (let index = 0; index < length_of_word; index++) {
+            char_array.push('_');
+            words.textContent = words.textContent + '   _  ';
+        }
+
+
+
+
+        // display all aplhabets
+        for (let index = 0; index < 26; index++) {
+            alphabet.innerHTML = alphabet.innerHTML + '<button class="btn btn-outline-primary alphabet" id="alphabet">' + String.fromCharCode(65 + index) + '</button>';
+        }
+
+
+
+        const all_alphabet = document.querySelectorAll('#alphabet');
+        // nodelist to array
+        all_alphabet.forEach(function (alphabet) {
+            alphabet.addEventListener('click', function () {
+                audio.play();
+                alphabet.classList.remove('btn-outline-primary');
+                alphabet.classList.add('btn-primary');
+                alphabet.classList.add('disabled');
+
+
+                // find alphabet exist in word at which place
+                const alphabet_exist = array_of_capital_letter.indexOf(alphabet.textContent);
+                var index = -1;
+                var index_array = [];
+
+
+                if (alphabet_exist > -1) {
+                    all_alphabet.forEach(e => {
+                        if (e.textContent == alphabet.textContent) {
+                            e.classList.add('btn-success');
+                            e.classList.remove('btn-outline-primary');
+                        }
+                    });
+                    array_of_capital_letter.forEach(alphabets => {
+                        index++;
+                        if (alphabets == alphabet.textContent) {
+                            index_array.push(index);
+                        }
+                    });
+                    index = -1;
+
+
+                    counting_streak += index_array.length;
+                    streak_content.textContent = counting_streak;
+
+
+                    index_array.forEach(number => {
+                        char_array[number] = alphabet.textContent;
+                    });
+
+
+                    words.innerHTML = "";
+
+                    char_array.forEach(char => {
+                        words.textContent = words.textContent + " " + char + " ";
+                    })
+
+
+                    letter_found -= index_array.length;
+
+
+
+                    if (letter_found === 0) {
+                        clearInterval(timer);
+                        Whole_page.classList.add('loose_win')
+                        Head.textContent = "You Win";
+                        // string to int convertion
+                        var score = parseInt(score_of_player);
+                        score += 2;
+                        localStorage.setItem(player_name, score);
+                        setTimeout(() => {
+                            window.location.reload();
+                        }
+                            , 3000);
+                    }
+                } else {
+                    // display in incorrect_place
+                    counting_streak = 0;
+                    streak_content.textContent = counting_streak;
+                    incorrect_place.textContent = incorrect_place.textContent + " " + alphabet.textContent;
+                    all_alphabet.forEach(e => {
+                        if (e.textContent == alphabet.textContent) {
+                            e.classList.add('btn-danger');
+                            e.classList.remove('btn-outline-primary');
+                        }
+                    });
+
+                    number_of_lives.textContent = number_of_lives.textContent - 1;
+                    lives--;
+                    if (lives === 4) {
+                        firstthing.classList.remove('display');
+                    }
+                    if (lives === 3) {
+                        secondthing.classList.remove('display');
+                    }
+                    if (lives === 2) {
+                        thirdthing.forEach(e => {
+                            e.classList.remove('display');
+                        })
+                    }
+                    if (lives === 1) {
+                        fourththing.classList.remove('display');
+                    }
+                    if (lives === 0) {
+                        fifththing.classList.remove('display');
+                        clearInterval(timer);
+                        words.textContent = "";
+                        array_of_capital_letter.forEach(alpha => {
+                            words.textContent = words.textContent + " " + alpha + " ";
+                        });
+                        Whole_page.classList.add('loose_win')
+                        reset_btn.classList.remove('loose_win')
+                        reset_btn.classList.add('click_able')
+                        Head.textContent = "You Lose";
+                    }
+                }
+            })
+            button_of_hint.addEventListener('click', () => {
+                button_of_hint.classList.add('disabled');
+                for (let k = 0; k < length_of_word; k++) {
+                    if (char_array[k] == '_') {
+                        array_for_hint_button.push(k);
+                    }
+                }
+                all_alphabet.forEach(e => {
+                    if (e.textContent == array_of_capital_letter[array_for_hint_button[0]]) {
+                        e.classList.remove('alphabet');
+                        e.classList.add('alphabet-hint');
+                        e.classList.remove('btn-outline-primary');
+                    }
+                });
+            }
+            )
+        })
+
+    }
+    else {
+        location.reload();
+    }
+
+})
diff --git a/Js/scriptform.js b/Js/scriptform.js
new file mode 100644
index 0000000..b1975bd
--- /dev/null
+++ b/Js/scriptform.js
@@ -0,0 +1,28 @@
+// grabbing all elements 
+const enter_btn = document.querySelector('#enter-btn')
+const highscore_btn = document.querySelector('#highscore-btn')
+
+
+// redirecting to highscore page
+highscore_btn.addEventListener('click', function () {
+    window.location.href = './html/Highscore.html';
+}
+);
+
+
+// see condition and login person 
+const names = document.querySelector('#InputName')
+let player_name;
+enter_btn.addEventListener('click', (e) => {
+    player_name = names.value;
+    console.log(player_name);
+    if (player_name === '' || player_name === "name") {
+        alert('Please enter your name or change the name to something else');
+        e.preventDefault();
+    }
+    else {
+        localStorage.setItem("name", player_name);
+        localStorage.setItem(player_name, '0');
+        window.location.href = './html/hard.html';
+    }
+})
diff --git a/css/chalk-board.jpg b/css/chalk-board.jpg
new file mode 100644
index 0000000..360f65f
Binary files /dev/null and b/css/chalk-board.jpg differ
diff --git a/css/chalk.jpg b/css/chalk.jpg
new file mode 100644
index 0000000..2296467
Binary files /dev/null and b/css/chalk.jpg differ
diff --git a/css/form.css b/css/form.css
new file mode 100644
index 0000000..1005c91
--- /dev/null
+++ b/css/form.css
@@ -0,0 +1,35 @@
+body {
+    text-align: center;
+  background-color: #446A46;
+  margin-top: : 80px ;
+
+
+}
+
+.form-label {
+    color: white;
+font-family: 'Londrina Outline', cursive;
+  font-size: 2rem;
+    line-height: 1.5;
+    font-weight: 500;
+}
+
+
+
+.btn {
+    margin: 10px;
+    padding: 15px;
+    background-image: linear-gradient(90deg,  #ffbbbb, #ffe4c0);
+
+    box-shadow: 0 2px 18px 0 rgba(248, 94, 122, 0.39), 0 1px 2px 0 rgba(248, 91, 124, 0.33);
+
+}
+
+#heading {
+    font-family: 'Cinzel Decorative', cursive;
+    font-size: 4rem;
+    line-height: 1.5;
+    font-weight: 900;
+    margin: 70px auto 10px;
+
+}
diff --git a/css/highscore.css b/css/highscore.css
new file mode 100644
index 0000000..331bb28
--- /dev/null
+++ b/css/highscore.css
@@ -0,0 +1,3 @@
+.head {
+    font-family: 'Cinzel Decorative', cursive;
+}
\ No newline at end of file
diff --git a/css/rope.jpg b/css/rope.jpg
new file mode 100644
index 0000000..ddabdb4
Binary files /dev/null and b/css/rope.jpg differ
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..84ca73a
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,199 @@
+.loose_win {
+    pointer-events: none;
+}
+
+.click_able {
+    pointer-events: all;
+}
+
+body {
+    text-align: center;
+    background-color: #346b31;
+    color: white;
+}
+
+#heading {
+font-family: 'Londrina Outline', cursive;    font-size: 4rem;
+    line-height: 1.5;
+    font-weight: 900;
+    margin: 70px auto 10px;
+
+}
+
+
+/* .easyhardfont{
+     font-family: 'Tourney', cursive;
+     font-weight: bold;
+  }  */
+
+#alphabets-place {
+    margin: 50px;
+}
+
+
+#easy_btn {
+    margin-right: 100px;
+}
+
+#hard_btn {
+    margin-right: 100px;
+}
+
+#word {
+    margin: 1% auto 1%;
+    font-family: 'Montserrat-bold', sans-serif;
+    font-weight: 300;
+}
+
+#hint-button {
+    margin-bottom: 1%;
+}
+
+.alphabet-hint {
+    height: 55px;
+    width: 55px;
+    border-radius: 5px;
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+    transition: all 1s ease;
+    background-image: linear-gradient(90deg, #0AA1DD, #79DAE8);
+    box-shadow: 0 2px 18px 0 rgba(248, 94, 122, 0.39), 0 1px 2px 0 rgba(248, 91, 124, 0.33);
+}
+
+.alphabet {
+    height: 55px;
+    width: 55px;
+    border-radius: 5px;
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+    transition: all 1s ease;
+    background-image: linear-gradient(90deg,  #ffbbbb, #ffe4c0);
+    box-shadow: 0 2px 18px 0 rgba(129, 245, 255, 0.39), 0 1px 2px 0 rgba(248, 91, 124, 0.33);
+}
+
+.recth {
+  background-image:  url("chalk.jpg");
+
+    width: 200px;
+    height: 15px;
+    position: absolute;
+    left: 100px;
+    top: 100px;
+}
+
+.rectv {
+  background-image:  url("chalk.jpg");
+
+    width: 15px;
+    height: 190px;
+    position: absolute;
+    top: 100px;
+    left: 100px;
+
+}
+
+.rope {
+  background-image:  url("chalk.jpg");
+
+    width: 10px;
+    height: 20px;
+    position: absolute;
+    top: 100px;
+    left: 200px;
+
+}
+
+.head {
+  background-image:  url("chalk.jpg");
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    position: absolute;
+    top: 120px;
+    left: 180px;
+}
+
+.body {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 110px;
+    position: absolute;
+    top: 130px;
+    left: 200px;
+
+}
+
+.arms1 {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 40px;
+    position: absolute;
+    top: 160px;
+    left: 208px;
+    transform: rotate(-30deg);
+
+}
+
+.arms2 {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 40px;
+    position: absolute;
+    top: 160px;
+    left: 192px;
+    transform: rotate(30deg);
+
+
+}
+
+.leg1 {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 40px;
+    position: absolute;
+    top: 230px;
+    left: 208px;
+    transform: rotate(-30deg);
+
+
+}
+
+.leg2 {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 40px;
+    position: absolute;
+    top: 230px;
+    left: 192px;
+    transform: rotate(30deg);
+
+}
+
+.display {
+    display: none;
+}
+
+@media screen and (max-width: 1024px) {
+    .hangman {
+        display: none;
+    }
+
+    /* hide it elsewhere */
+}
+
+.timer-place{
+  position: absolute;
+  top:5%;
+  right:7%;
+}
+
+.box{
+
+  background-image: url('chalk-board.jpg' );
+  background-repeat: no-repeat;
+    background-position: center;
+    padding:30px;
+
+  }
diff --git a/css/styleeasy.css b/css/styleeasy.css
new file mode 100644
index 0000000..98594a0
--- /dev/null
+++ b/css/styleeasy.css
@@ -0,0 +1,200 @@
+.loose_win {
+    pointer-events: none;
+}
+
+.click_able {
+    pointer-events: all;
+}
+
+body {
+    text-align: center;
+    background-color: #346b31 ;
+    color: white;
+}
+
+#heading {
+font-family: 'Londrina Outline', cursive;    font-size: 4rem;
+    line-height: 1.5;
+    font-weight: 900;
+    margin: 70px auto 10px;
+
+}
+
+.box{
+
+  background-image: url('chalk-board.jpg' );
+  background-repeat: no-repeat;
+    background-position: center;
+    padding:30px;
+
+  }
+
+
+#alphabets-place {
+    margin: 50px;
+}
+
+.rule-list {
+    color: silver;
+}
+
+#easy_btn {
+    margin-right: 100px;
+}
+
+#hard_btn {
+    margin-right: 100px;
+}
+
+#word {
+    margin: 1% auto 1%;
+    font-family: 'Montserrat-bold', sans-serif;
+    font-weight: 300;
+}
+
+#hint-button {
+    margin-bottom: 1%;
+}
+
+.alphabet-hint {
+    height: 55px;
+    width: 55px;
+    border-radius: 5px;
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+    transition: all 1s ease;
+    background-image: linear-gradient(90deg, #0AA1DD, #79DAE8);
+    box-shadow: 0 2px 18px 0 rgba(248, 94, 122, 0.39), 0 1px 2px 0 rgba(248, 91, 124, 0.33);
+}
+
+
+.alphabet {
+    height: 55px;
+    width: 55px;
+    border-radius: 5px;
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+    transition: all 1s ease;
+    background-image: linear-gradient(90deg,  #ffbbbb, #ffe4c0);
+    box-shadow: 0 2px 18px 0 rgba(248, 94, 122, 0.39), 0 1px 2px 0 rgba(248, 91, 124, 0.33);
+}
+
+.recth {
+  background-image:  url("chalk.jpg");
+
+    width: 200px;
+    height: 15px;
+    position: absolute;
+    left: 100px;
+    top: 100px;
+}
+
+.rectv {
+  background-image:  url("chalk.jpg");
+
+    width: 15px;
+    height: 190px;
+    position: absolute;
+    top: 100px;
+    left: 100px;
+
+}
+
+.rope {
+  background-image:  url("chalk.jpg");
+
+    width: 10px;
+    height: 20px;
+    position: absolute;
+    top: 100px;
+    left: 200px;
+
+}
+
+.head {
+  background-image:  url("chalk.jpg");
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    position: absolute;
+    top: 120px;
+    left: 180px;
+}
+
+.body {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 110px;
+    position: absolute;
+    top: 130px;
+    left: 200px;
+
+}
+
+.arms1 {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 40px;
+    position: absolute;
+    top: 160px;
+    left: 208px;
+    transform: rotate(-30deg);
+
+}
+
+.arms2 {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 40px;
+    position: absolute;
+    top: 160px;
+    left: 192px;
+    transform: rotate(30deg);
+
+
+}
+
+.leg1 {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 40px;
+    position: absolute;
+    top: 230px;
+    left: 208px;
+    transform: rotate(-30deg);
+
+
+}
+
+.leg2 {
+  background-image:  url("chalk.jpg");
+    width: 10px;
+    height: 40px;
+    position: absolute;
+    top: 230px;
+    left: 192px;
+    transform: rotate(30deg);
+
+}
+
+.display {
+    display: none;
+}
+
+
+
+@media screen and (max-width: 1024px) {
+    .hangman {
+        display: none;
+    }
+
+    /* hide it elsewhere */
+}
+
+.timer-place{
+  position: absolute;
+  top:5%;
+  right:7%;
+}
diff --git a/html/Highscore.html b/html/Highscore.html
new file mode 100644
index 0000000..2718b94
--- /dev/null
+++ b/html/Highscore.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet"
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cantarell:wght@700&family=Cinzel+Decorative:wght@700&family=Federo&family=Londrina+Outline&family=Londrina+Shadow&family=Montserrat:wght@100;400;900&family=Tourney:wght@100&family=Ubuntu&display=swap" rel="stylesheet">
+    <title>HangMan</title>
+</head>
+
+<body>
+    <div class="container my-3">
+        <h1 id="heading">LeaderBoard</h1>
+        <!-- the table of top players -->
+        <table class="table table-success table-striped table-hover align-middle">
+            <thead>
+                <tr id="">
+                    <th scope="col">Sr No</th>
+                    <th scope="col">Name</th>
+                    <th scope="col">Score</th>
+                </tr>
+            </thead>
+            <tbody id="highscore">
+
+            </tbody>
+        </table>
+        <button class="btn btn-outline-light btn-lg" id="btn">Return</button>
+    </div>
+</body>
+<script src="../Js/highscore.js"></script>
+
+</html>
diff --git a/html/easy.html b/html/easy.html
new file mode 100644
index 0000000..4e5f9e1
--- /dev/null
+++ b/html/easy.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <link rel="stylesheet" href="../css/styleeasy.css">
+    <link rel="stylesheet"
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="icon" href="favicon.ico">
+
+    <link href="https://fonts.googleapis.com/css2?family=Cantarell:wght@700&family=Cinzel+Decorative:wght@700&family=Federo&family=Londrina+Outline&family=Londrina+Shadow&family=Montserrat:wght@100;400;900&family=Tourney:wght@100&family=Ubuntu&display=swap" rel="stylesheet">
+    <title>Hangman Game</title>
+</head>
+
+
+
+<body>
+    <!-- the hangman photo -->
+    <div class="hangman">
+        <div class="recth">
+        </div>
+        <div class="rectv">
+        </div>
+        <div class="rope">
+        </div>
+        <div class="head display">
+        </div>
+        <div class="body  display">
+        </div>
+        <div class="arms1 thirdthing display">
+        </div>
+        <div class="arms2 thirdthing display">
+        </div>
+        <div class="leg1  display">
+        </div>
+        <div class="leg2  display">
+        </div>
+    </div>
+    <div class="m-0 p-0" id="container">
+        <div>
+            <h1 id="heading">Hangman</h1>
+            <!-- lives place -->
+            <div class="m-2 p-2"> Lives remaining: <span id="lives_number"></span>/5</div>
+
+            <!-- travel between pages -->
+            <div class="box">
+
+            <a href="./easy.html"><button class="btn btn-success m-2 p-2" id="easy_btn">Easy</button></a>
+            <a href="./hard.html"><button class="btn btn-outline-danger m-2 p-2" id="hard_btn">Hard</button></a>
+
+        <!-- the word place -->
+        <div id="word"></div>
+        <!-- hint button -->
+        <div><button class="btn btn-outline-info" id="hint-button">Hint</button>
+
+
+            <div id="word-place"></div>
+
+
+            <div id="hint-statement"></div>
+
+
+            <div>Your streak: <span id="streck-place">0</span></div>
+          </div>
+        </div>
+
+
+            <!-- timer -->
+            <div class="timer-place">Time Left:<span id="timer-place">240s</span></div>
+
+
+            <!-- place to show incorrect word -->
+
+            <div>
+                <h3>Incorrect Words:</h3>
+                <h4>
+                    <div id="incorrect"></div>
+                </h4>
+            </div>
+
+            <!-- all alphabet to be shown -->
+            <div id="alphabets-place"></div>
+
+            <!-- restart game -->
+            <div><button class="btn btn-outline-warning" id="restart_button">Restart Game</button></div>
+        </div>
+    </div>
+</body>
+<script src="../Js/scripteasy.js"></script>
+
+</html>
diff --git a/html/favicon.ico b/html/favicon.ico
new file mode 100644
index 0000000..6f097be
Binary files /dev/null and b/html/favicon.ico differ
diff --git a/html/form.html b/html/form.html
new file mode 100644
index 0000000..7096127
--- /dev/null
+++ b/html/form.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <link rel="stylesheet" href="../css/form.css">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Cantarell:wght@700&family=Cinzel+Decorative:wght@700&family=Federo&family=Londrina+Outline&family=Montserrat:wght@100;400;900&family=Tourney:wght@100&family=Ubuntu&display=swap">
+
+    <title>HangMan Game</title>
+</head>
+
+<body>
+    <div class="container m-5  flex justify-content-between align-content-between">
+        <form>
+            <div class="mb-3 ">
+                <label for="Name" class="form-label my-2">Enter Your Name</label>
+                <input type="text" class="form-control my-2" id="InputName" aria-describedby="emailHelp">
+            </div>
+            <div class="d-grid gap-2">
+                <a href="./index.html"><button class="btn btn-lg btn-outline-light " id="enter-btn"
+                        type="button">Enter</button></a>
+                <button class="btn btn-lg btn-light " type="button">View Highscore</button>
+            </div>
+        </form>
+    </div>
+</body>
+<script src="../Js/scriptform.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/html/hard.html b/html/hard.html
new file mode 100644
index 0000000..2860c86
--- /dev/null
+++ b/html/hard.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- CSS only -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+  <link rel="stylesheet" <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="icon" href="favicon.ico">
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Cantarell:wght@700&family=Cinzel+Decorative:wght@700&family=Federo&family=Londrina+Outline&family=Londrina+Shadow&family=Montserrat:wght@100;400;900&family=Tourney:wght@100&family=Ubuntu&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="../css/style.css">
+
+  <title>Hangman Game</title>
+</head>
+
+
+<body>
+  <!-- the hangman photo -->
+  <div class="hangman">
+
+    <div class="recth">
+
+    </div>
+
+    <div class="rectv">
+
+    </div>
+
+    <div class="rope">
+    </div>
+
+    <div class="head display">
+
+    </div>
+
+    <div class="body secondthing display">
+
+    </div>
+
+    <div class="arms1 secondthing display">
+
+    </div>
+
+    <div class="arms2 secondthing display">
+
+    </div>
+
+    <div class="leg1 thirdthing display">
+
+    </div>
+
+    <div class="leg2 thirdthing display">
+
+    </div>
+
+  </div>
+  <div class="m-0 p-0" id="container">
+    <div>
+      <h1 id="heading">Hangman</h1>
+      <!-- lives place -->
+      <div class="m-2 p-2"> Lives remaining: <span id="lives_number"></span>/3</div>
+
+
+      <div class="box">
+
+
+        <!-- travel between pages -->
+        <a href="./easy.html"><button class="btn btn-outline-success m-2 p-2" id="easy_btn">Easy</button></a>
+        <a href="./hard.html"><button class="btn btn-danger m-2 p-2" id="hard_btn">Hard</button></a>
+      <!-- the word place  -->
+      <div id="word"></div>
+      <!-- hint btn -->
+      <div><button class="btn btn-outline-info" id="hint-button">Hint</button>
+
+
+        <div id="word-place"></div>
+
+
+        <div id="hint-statement"></div>
+
+
+        <div>Your streak: <span id="streck-place">0</span></div>
+      </div>
+    </div>
+
+
+      <!-- timer -->
+      <div class="timer-place">Time Left:<span id="timer-place">120s</span></div>
+
+      <!-- place to show incorrect word -->
+      <div>
+        <h3>Incorrect Words:</h3>
+        <h4>
+          <div id="incorrect"></div>
+        </h4>
+      </div>
+
+      <!-- all alphabet to be shown -->
+      <div id="alphabets-place"></div>
+
+      <!-- restart game -->
+      <div><button class="btn btn-outline-warning" id="restart_button">Restart Game</button></div>
+    </div>
+  </div>
+</body>
+
+<script src="../Js/script.js"></script>
+
+</html>
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..ed53870
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <link rel="stylesheet" href="../css/form.css">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Cantarell:wght@700&family=Cinzel+Decorative:wght@700&family=Federo&family=Londrina+Outline&family=Montserrat:wght@100;400;900&family=Tourney:wght@100&family=Ubuntu&display=swap">
+
+    <title>HangMan Game</title>
+</head>
+
+<body>
+    <div class="container m-5  flex justify-content-between align-content-between">
+        <form>
+            <div class="mb-3 ">
+                <label for="Name" class="form-label my-2">Enter Your Name</label>
+                <input type="text" class="form-control my-2" id="InputName" aria-describedby="emailHelp">
+            </div>
+            <div class="d-grid gap-2">
+                <button class="btn" id="enter-btn" type="button">Enter</button>
+                <button class="btn" id="highscore-btn" type="button">
+                    View
+                    Highscore
+                </button>
+            </div>
+        </form>
+    </div>
+</body>
+<script src="../Js/scriptform.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6e2b44f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <link rel="stylesheet" href="./css/form.css">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Cantarell:wght@700&family=Cinzel+Decorative:wght@700&family=Federo&family=Londrina+Outline&family=Montserrat:wght@100;400;900&family=Tourney:wght@100&family=Ubuntu&display=swap">
+
+    <title>HangMan Game</title>
+</head>
+
+<body>
+    <div class="container m-5  flex justify-content-between align-content-between">
+        <form>
+            <div class="mb-3 ">
+                <!-- form to add name -->
+                <label for="Name" class="form-label my-2" id="heading">Enter Your Name</label>
+                <input type="text" class="form-control my-2" id="InputName" aria-describedby="emailHelp">
+            </div>
+            <div class="d-grid gap-2">
+                <button class="btn" id="enter-btn" type="button">Enter</button>
+                <button class="btn" id="highscore-btn" type="button">
+                    View
+                    Highscore
+                </button>
+            </div>
+        </form>
+    </div>
+</body>
+<script src="./Js/scriptform.js"></script>
+
+</html>
diff --git a/sound/sound.mp3 b/sound/sound.mp3
new file mode 100644
index 0000000..8838c1f
Binary files /dev/null and b/sound/sound.mp3 differ