diff --git a/css/end.css b/css/end.css
new file mode 100644
index 0000000..7fb382b
--- /dev/null
+++ b/css/end.css
@@ -0,0 +1,313 @@
+#top-banner-end{
+    position: absolute;
+    top:0;
+    width:100%;
+    height:5vw;
+    background-color: black;
+}
+#back-home{
+    background-color:rgb(43, 43, 43);
+    position: absolute;
+    top:1vw;
+    left:0.9vw;
+    width: 3vw;
+    height:3vw;
+    z-index: 2;
+    border-radius:0.3vw;
+  }
+  #house{
+    width:1vw;
+    height:1vw;
+    position: absolute;
+    top:1.5vw;
+    left:0.8vw;
+    font-size:2vw;
+    color:rgb(255, 255, 255);
+    z-index: 3;
+}
+#maindrop{
+  
+  position: absolute;
+  width: 3vw;
+  height: 2.5vw;
+  top:1.5vw;
+}
+#drop1{
+  background-color: white;
+  position: absolute;
+  width: 3vw;
+  height: 0.23vw;
+  top:0.1vw;
+  right:0vw;
+  /* pointer-events: none; */
+}
+#drop2{
+  background-color: white;
+  position: absolute;
+  width: 3vw;
+  height: 0.23vw;
+  top:1.1vw;
+  right:0vw;
+  /* pointer-events: none; */
+}
+#drop3{
+  background-color: white;
+  position: absolute;
+  width: 3vw;
+  height: 0.23vw;
+  top:2.1vw;
+  right:0vw;
+  /* pointer-events: none; */
+}
+#sidedrop{
+  position: absolute;
+  height: 0;
+  width: 0;
+  background-color: rgb(250, 250, 250);
+  right:-2vw;
+  top: -3.5vh;
+  overflow:hidden;
+  transition: width 1s, height 1s;
+  
+}
+#maindrop:hover #sidedrop{
+  height: 100vh;
+  width: 800%;
+  
+}
+#maindrop:hover #drop1{
+  background-color:black;
+}
+#maindrop:hover #drop2{
+  background-color:black;
+}
+#maindrop:hover #drop3{
+  background-color:black;
+}
+.btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:7vw;
+  left:6vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  
+}
+#topics-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:13vw;
+  right:vw;
+  color:black;
+  font-family:sans-serif; 
+  font-style:italic; 
+ 
+}
+#rules-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:19vw;
+  right:9vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  
+}
+#suggestion-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:25vw;
+  right:9vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+ 
+}
+#highscore-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:31vw;
+  right:9vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  
+  }
+#releases-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:37vw;
+  right:9vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+ 
+}
+.btn:hover{
+  text-decoration: underline;
+}
+
+#topics-btn:hover{
+  text-decoration: underline;
+}
+#rules-btn:hover{
+  text-decoration: underline;
+}
+#suggestion-btn:hover{
+  text-decoration: underline;
+}
+#highscore-btn:hover{
+  text-decoration: underline;
+}
+#releases-btn:hover{
+  text-decoration: underline;
+}
+.btn1{
+  position:absolute;
+  top:6.7vw;
+  left:2vw;
+  font-size:2.5vw;
+  text-decoration:none;
+}
+#topics-btn1{
+  text-decoration:none;
+  top: 12.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#rules-btn1{
+  text-decoration:none;
+  top: 18.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#suggestion-btn1{
+  text-decoration:none;
+  top: 24.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#highscore-btn1{
+  text-decoration:none;
+  top: 30.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#releases-btn1{
+  text-decoration:none;
+  top: 36.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#middle-container{
+    background-color: black;
+    position: absolute;
+    left:39vw;
+    top:12vw;
+    width:20vw;
+    height: 30vw;;
+    box-shadow: 1vw 1vw 4vw rgb(70, 70, 70);
+    border-radius:1vw;
+}
+#finalScore{
+    padding-top: 1.3vw;
+    z-index:2;
+    
+    text-shadow: 0.2vw 0.2vw#505050;
+    font-size:2.6vw;
+}
+#noScore-container{
+    color:#505050;
+    position: absolute;
+    top:5.4vw;
+   width:15vw;
+    font-size:1vw;
+    left:5.3vw;
+}
+#noScore{
+    color:rgb(21, 255, 0);
+    font-size:1.5vw;
+}
+.end-form-container{
+    position: absolute;
+    top:8vw;
+}
+
+#username{
+    position: absolute;
+    top:0.6vw;
+    width:17vw;
+    height:3vw;
+}
+#saveScoreBtn{
+    position: absolute;
+    background-color: rgb(21, 255, 0);
+    top:4.5vw;
+    left:-0.6vw;
+    width:17vw;
+    font-size:1vw;
+    height:3vw;
+    font-style: normal;
+    border-radius: 0.5vw;;
+   color:rgba(0, 0, 0, 0.719);
+   cursor: pointer;
+}
+#divider-line{
+    position: absolute;
+    width: 15vw;
+    height:0.01vw;
+    background-color: #ffffff;
+    top:17vw;
+    border-radius: 1vw;;
+}
+#go-back-end{
+    position: absolute;
+    top:18.5vw;
+    color:white;
+    font-size:1vw;
+    font-style:normal;
+    width:17vw;
+    height:3vw;
+    background-color: rgba(56, 56, 56, 0.808);
+    text-align: center;
+    border-radius:0.5vw;;
+    left:1.6vw;
+    padding-top:0.9vw;
+    cursor:pointer;
+}
+#rate-quiz-end{
+    position: absolute;
+    top:21.9vw;
+    color:white;
+    font-size:1vw;
+    font-style:normal;
+    width:17vw;
+    height:3vw;
+    background-color: rgba(56, 56, 56, 0.808);
+    text-align: center;
+    border-radius:0.5vw;;
+    left:1.6vw;
+    padding-top:0.9vw;
+}
+
+#highscore-quiz-end{
+    position: absolute;
+    top: 25.3vw;
+    color:white;
+    font-size:1vw;
+    font-style:normal;
+    width:17vw;
+    height:3vw;
+    background-color: rgba(56, 56, 56, 0.808);
+    text-align: center;
+    border-radius:0.5vw;;
+    left:1.6vw;
+    padding-top:0.9vw;
+}
\ No newline at end of file
diff --git a/css/game.css b/css/game.css
index 4672d1f..14ccd4b 100644
--- a/css/game.css
+++ b/css/game.css
@@ -1,54 +1,27 @@
 body {
   color: #fff;
-  user-select: none;
+ user-select: none;
 }
 
 .container h2 {
   color: #fff;
 }
 
-.choice-container {
-  display: flex;
-  width: 80%;
-  margin: 0 auto 0.8rem auto;
-  border-radius: 4px;
-  background: rgb(18, 93, 255);
-  font-size: 3rem;
-}
-
-.choice-container:hover {
-  cursor: pointer;
-  box-shadow: 0 0.4rem 1.4rem 0 rgba(6, 103, 247, 0.5);
-  transform: scale(1.02);
-  transform: transform 100ms;
-}
-
-.choice-prefix {
-  padding: 2rem 2.5rem;
-  color: white;
-}
-
 .choice-text {
   padding: 2rem;
   width: 100%;
+  font-size:2vw;
+  padding-top: 1.3vw;
+  font-weight:lighter;
 }
 
-.correct {
-  background: linear-gradient(
-    32deg,
-    rgba(11, 223, 36) 0%,
-    rgb(41, 232, 111) 100%
-  );
-}
-
-.incorrect {
-  background: linear-gradient(
-    32deg,
-    rgba(230, 29, 29, 1) 0%,
-    rgb(224, 11, 11, 1) 100%
-  );
+.choice-prefix {
+  padding: 2rem 2.5rem;
+  color: white;
+  font-size:2vw;
+  padding-top:1.3vw;
+  font-weight:bolder;
 }
-
 /* Heads up Display */
 #hud {
   padding: 1rem;
@@ -56,22 +29,34 @@ body {
   justify-content: space-between;
 }
 
-.hud-prefix {
-  text-align: center;
-  font-size: 2rem;
+#progressText{
+  position: absolute;
+  top:0.5vw;
+   color:rgb(255, 255, 255);
+   font-size:2vw;
+   right: 0.3vw;
+  
 }
 
-.hud-main-text {
+#score {
   text-align: center;
+ color:rgb(255, 255, 255);
+ position: absolute;
+ top:0.4vw;
+ right:0.7vw;
+ font-size:2vw;
 }
 
 #progressBar {
-  width: 20rem;
-  height: 3rem;
-  border: 0.2rem solid rgb(11, 223, 36);
-  margin-top: 2rem;
-  border-radius: 50px;
+  width: 30vw;  ;
+  height: 3vw;
+  border: 0.1vw solid rgb(65, 248, 86);
+  margin-top: 1vw;
+  border-radius: 1vw;
   overflow: hidden;
+  position:absolute;
+ top:0vw;
+ left: 35vw;
 }
 
 #progressBarFull {
@@ -89,19 +74,19 @@ body {
 #addPoints{
   display:none;
   position: relative;
-  right:90px;
+  right:3vw;
   color:green;
-  font-size: 20px;
-  top: -100px;
+  font-size: 2vw;;
+  top: 3vw;
   animation: ripple-animation 0.6s linear;
 }
 #subPoints{
   display:none;
   position: relative;
-  right:90px;
+  right:3vw;
   color:red;
-  font-size: 20px;
-  top: -100px;
+  font-size: 2vw;
+  top: 3vw;
   animation: ripple-animation 0.6s linear;
 }
 @keyframes ripple-animation {
@@ -109,4 +94,131 @@ body {
     transform: scale(2);
     opacity: 0;
   }
+}
+#question{
+  color:black;
+  font-weight:lighter;
+  margin-bottom: 5vw;;
+
+}
+#musicOnButton{
+  cursor:pointer;
+  font-size:2vw;
+position:absolute;
+top:0.6vw;
+left:0.4vw;
+
+}
+#musicOffButton{
+  cursor:pointer;
+  font-size:2vw;
+position:absolute;
+top:0.6vw;
+left:0.4vw;
+
+}
+.hud-prefix{
+  font-size:2vw;
+  position: absolute;
+  top:1.4vw;
+  right:7.6vw;
+  color:rgb(255, 255, 255);
+  font-weight:bolder;
+  z-index: 1;
+  font-weight:lighter;
+}
+#back-home{
+  background-color:rgb(43, 43, 43);
+  position: absolute;
+  top:1vw;
+  left:0.9vw;
+  width: 3vw;
+  height:3vw;
+  z-index: 2;
+  border-radius:0.3vw;
+}
+.choice-container {
+  display: flex;
+  width: 95%;
+  margin: 0 auto 0.8rem auto;
+  border-radius: 0.6vw;
+  background: rgb(0, 0, 0);
+  font-size: 3rem;
+  height:5vw;
+}
+
+.choice-container:hover {
+  cursor: pointer;
+  box-shadow: 0 0.4rem 1.4rem 0 rgba(0, 0, 0, 0.5);
+  transform: scale(1.02);
+  transform: transform 100ms;
+}
+
+#house{
+  width:1vw;
+  height:1vw;
+  position: absolute;
+  top:1.5vw;
+  left:0.8vw;
+  font-size:2vw;
+  color:rgb(255, 255, 255);
+  z-index: 3;
+}
+#topbanner-game{
+  background-color: black;
+  position: absolute;
+  top:0vw;
+  width:100%;
+  height:5vw;
+}
+#hud-main-text-container{
+  position: absolute;
+  top:1vw;
+  right:1vw;
+  background-color: rgb(43, 43, 43);
+  height:3vw;
+  width:13vw;
+  border-radius: 0.3vw;
+}
+#music-container{
+  position:absolute;
+  top:1vw;
+  left:5vw;
+  width:3vw;
+  height:3vw;
+  background-color: rgb(43, 43, 43);
+  border-radius: 0.3vw;;
+}
+#progressText-container{
+  position: absolute;
+  top:1vw;
+  left:9vw;
+  background-color: rgb(43, 43, 43) ;
+  width:5.6vw;
+  height:3vw;
+  border-radius: 0.3vw;
+  
+}
+#bottombanner-game{
+  position: absolute;
+  bottom:0vw;
+  width:100%;
+  height:5vw;
+  background-color: black;
+}
+#bonne-chance-2{
+ color:rgb(255, 255, 255);
+ position: absolute;
+ top:1vw;
+ left:38vw;
+ font-style: italic;
+ font-size:3vw;
+}
+#bonne-chance-1{
+  color:rgb(78, 78, 78);
+ position: absolute;
+ top:1vw;
+ left:38.5vw;
+ font-style: italic;
+ font-size:3vw;
 }
\ No newline at end of file
diff --git a/css/highscores.css b/css/highscores.css
index 15e4c03..94d71d5 100644
--- a/css/highscores.css
+++ b/css/highscores.css
@@ -1,14 +1,476 @@
-body {
-  color: #fff;
-  user-select: none;
+#top-banner-highscores{
+  background-color: black;
+  position:absolute;
+  width:100%;
+  top:0;
+  height:5.5vw;
+}
+#house{
+  width:1vw;
+  height:1vw;
+  position: absolute;
+  top:1.9vw;
+  left:0.8vw;
+  font-size:2vw;
+  color:rgb(255, 255, 255);
+  z-index: 3;
+}
+#back-home{
+  background-color:rgb(43, 43, 43);
+  position: absolute;
+  top:1.4vw;
+  left:0.9vw;
+  width: 3vw;
+  height:3vw;
+  z-index: 2;
+  border-radius:0.3vw;
+}
+#Leaderboard{
+color:white;
+position: absolute;
+top:0.7vw;
+font-size:3.5vw;
+left:37.7vw;
+font-style: italic;
+z-index: 2;
+font-weight: lighter;
+text-shadow:
+0 0 7px #fff,
+0 0 10px #fff,
+0 0 21px #fff,
+0 0 42px rgb(255, 255, 255);
+}
+#highScoresList{
+  font-size:4vw;
+  z-index:6;
+  padding-top:5vw;
+}
+.high-score{
+  padding-bottom:1vw;
+}
+#highScoresList .high-score:first-child {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:39.5vw;
+  top:20.5vw; 
+  font-size:2.5vw;
+}
+#highScoresList .high-score:first-child .player-score {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  right:-18.7vw;
+  top:0.2vw; 
+  font-style: italic;
+  font-size:2.5vw;
+}
+#highScoresList .high-score:first-child .player-name {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:0vw;
+  top:0vw; 
+  font-style: italic;
+  font-size:2.5vw;
+}
+#highScoresList .high-score:nth-child(2) {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:39.5vw;
+  top:24.8vw; 
+ font-size:2vw;
+}
+#highScoresList .high-score:nth-child(2) .player-score {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:12.5vw;
+  top:0vw; 
+  font-style: italic;
+  font-size:2vw;
+}
+#highScoresList .high-score:nth-child(2) .player-name {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:0.3vw;
+  top:0vw; 
+  font-style: italic;
+  font-size:2vw;
+}
+#highScoresList .high-score:nth-child(3) {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:39.5vw;
+  top:29.2vw; 
+   font-size:1.5vw;
+}
+#highScoresList .high-score:nth-child(3) .player-score {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:13vw;
+  top:0vw; 
+  font-style: italic;
+  font-size:1.5vw;
+}
+#highScoresList .high-score:nth-child(3) .player-name {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:0.3vw;
+  top:0vw; 
+  font-style: italic;
+  font-size:1.5vw;
+}
+#highScoresList .high-score:nth-child(4) {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:39.5vw;
+  top:33.4vw; 
+  font-size:1vw;
+}
+#highScoresList .high-score:nth-child(4) .player-score {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:14vw;
+  top:0.1vw; 
+  font-style: italic;
+  font-size:1vw;
+}
+#highScoresList .high-score:nth-child(4) .player-name {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:0.3vw;
+  top:0vw; 
+  font-style: italic;
+  font-size:1vw;
+}
+#highScoresList .high-score:nth-child(5) {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:40vw;
+  top:37.6vw; 
+  font-size:0.8vw;
+}
+#highScoresList .high-score:nth-child(5) .player-score {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:13.8vw;
+  top:0vw; 
+  font-style: italic;
+  font-size:0.8vw;
+}
+#highScoresList .high-score:nth-child(5) .player-name {
+  color: rgb(0, 0, 0);
+  font-weight:bold;
+  position:absolute;
+  left:0.3vw;
+  top:0vw; 
+  font-style: italic;
+  font-size:0.8vw;
+  width:max-content;
+}
+#leaderboard-container{
+ 
+  position:absolute;
+  top:10vw;
+  left:35vw;
+  width:25vw;
+  height:35vw;
+  border-radius:1vw;
+  z-index:5;
+}
+#leaderboard-container-1{
+  background-color: #FFD700;
+  border-color: rgb(58, 58, 58);
+  border-style: solid;
+  position: absolute;
+  top:10vw;
+  left:0.7vw;
+  width:95%;
+  height:4vw;
+  z-index: 5;
+  box-shadow: 0.1vw 0.1vw 4vw rgb(255, 241, 52);
+}
+#leaderboard-container-2{
+  background-color: #C0C0C0;
+  border-color: rgb(58, 58, 58);
+  border-style: solid;
+  position: absolute;
+  top:14vw;
+  left:1.3vw;
+  width:90%;
+  height:4vw;
+  z-index: 4;
+  box-shadow: 0.1vw 0.1vw 4vw rgb(196, 196, 196);
+}
+#leaderboard-container-3{
+  background-color: #CD7F32;
+  border-color: rgb(58, 58, 58);
+  border-style: solid;
+  position: absolute;
+  top:18vw;
+  left: 1.9vw;
+  width:85%;
+  height:4vw;
+  z-index: 3;
+  box-shadow: 0.1vw 0.1vw 4vw rgb(179, 96, 19);
+}
+#leaderboard-container-4{
+  background-color: rgb(255, 255, 255);
+  border-color: rgb(58, 58, 58);
+  border-style: solid;
+  position: absolute;
+  top:22vw;
+  left:2.5vw;
+  width:80%;
+  height:4vw;
+  z-index: 2;
+  
+}
+#leaderboard-container-5{
+  background-color: rgb(255, 255, 255);
+  border-color: rgb(58, 58, 58);
+  border-style: solid;
+  position: absolute;
+  top:26vw;
+  left:3.1vw;
+  width:75%;
+  height:4vw;
+  z-index: 1;
+  
 }
 
-#highScoresList {
-  list-style: none;
-  margin-bottom: 4rem;
+#confetti-1{
+  width:0.6vw;
+  height:1vw;
+  background-color:pink;
+  position:absolute;
+  top:0.9vw;
+  left:1vw;
+  transform:rotate(-24deg)
+}
+#confetti-2{
+  width:0.6vw;
+  height:1vw;
+  background-color:rgb(113, 113, 255);
+  position:absolute;
+  top:0.4vw;
+  right:1vw;
+  transform:rotate(24deg)
+}
+#confetti-3{
+  width:0.6vw;
+  height:1vw;
+  background-color:rgb(255, 67, 98);
+  position:absolute;
+  top:0.6vw;
+  left:5vw;
+  transform:rotate(44deg)
+}
+#confetti-4{
+  width:0.6vw;
+  height:1vw;
+  background-color:rgb(99, 255, 107);
+  position:absolute;
+  top:0.5vw;
+  right:5vw;
+  transform:rotate(-68deg)
+}
+#confetti-5{
+  width:0.6vw;
+  height:1vw;
+  background-color:aqua;
+  position: absolute;
+  top:0.9vw;
+  right: 11vw;
+  transform:rotate(59deg)
+}
+#confetti-6{
+  width:0.6vw;
+  height:1vw;
+  background-color:pink;
+  position:absolute;
+  top:1.9vw;
+  right:2vw;
+  transform:rotate(-24deg)
+}
+#confetti-7{
+  width:0.6vw;
+  height:1vw;
+  background-color:rgb(113, 113, 255);
+  position:absolute;
+  top:1.9vw;
+  left:3vw;
+  transform:rotate(24deg)
+}
+#confetti-8{
+  width:0.6vw;
+  height:1vw;
+  background-color:rgb(255, 67, 98);
+  position:absolute;
+  top:2vw;
+  left:15vw;
+  transform:rotate(44deg)
+}
+#confetti-9{
+  width:0.6vw;
+  height:1vw;
+  background-color:rgb(99, 255, 107);
+  position:absolute;
+  top:2vw;
+  right:14vw;
+  transform:rotate(-68deg)
+}
+#confetti-thrower{
+  width:7vw;
+  height:3.5vw;
+  border-radius: 5.25vw 5.25vw 0 0;
+  background-color: orange;
+  position: absolute;
+  top:8.5vw;
+  left:47.5vw;
+  transform: translate(-50%, -50%);
+  
+}
+#confetti-thrower-semi-circle{
+  width:5vw;
+  height:5vw;
+  border-radius: 5vw 0 5vw 0;
+  background-color: rgb(99, 64, 0);
+  position: absolute;
+  top:7.6vw;
+  left:45vw;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  transform:rotate(45deg)
+  
+}
+#svg {
+  width: 10vw;
+  height: 40vw; /* Adjust height as needed */
+  display: block;
+ position: absolute;
+ left:40vw;
+ transform:rotate(90deg);
+ top:-5.5vw;
+ z-index:3;
 }
 
-.high-score {
-  font-size: 2.8rem;
-  margin-bottom: 0.5rem;
+#path {
+  fill: none;
+  stroke: rgb(255, 87, 247);
+  stroke-width: 20;
+  stroke-linecap: round;
+  stroke-dasharray: 750; /* Initial value of dash array */
+   /* Animation for the squiggly effect */
+   
+   
+}
+#svg1 {
+  width: 10vw;
+  height: 40vw; /* Adjust height as needed */
+  display: block;
+ position: absolute;
+ left:45vw;
+ transform:rotate(90deg);
+ top:-5.5vw;
+ z-index:3;
 }
+
+#path1 {
+  fill: none;
+  stroke: rgb(87, 249, 255);
+  stroke-width: 20;
+  stroke-linecap: round;
+  stroke-dasharray: 750; /* Initial value of dash array */
+   /* Animation for the squiggly effect */
+   
+   
+}
+#svg2 {
+  width: 10vw;
+  height: 40vw; /* Adjust height as needed */
+  display: block;
+ position: absolute;
+ left:42.5vw;
+ transform:rotate(90deg);
+ top:-6.2vw;
+ z-index:3;
+}
+
+#path2 {
+  fill: none;
+  stroke: rgb(121, 255, 87);
+  stroke-width: 20;
+  stroke-linecap: round;
+  stroke-dasharray: 750; /* Initial value of dash array */
+   /* Animation for the squiggly effect */
+   
+   
+}
+#confetti-thrower-1{
+  position:absolute;
+  width:0.6vw;
+  height:1vw;
+  background-color:rgb(113, 113, 255) ;
+  top: 14vw;
+  left:46vw;
+  transform: rotate(45deg);
+}
+#confetti-thrower-2{
+  position:absolute;
+  width:0.6vw;
+  height:1vw;
+  background-color:rgb(255, 67, 98);
+  top: 12vw;
+  left:48vw;
+  transform: rotate(-45deg);
+}
+#confetti-thrower-3{
+  position:absolute;
+  width:0.6vw;
+  height:1vw;
+  background-color:pink ;
+  top: 12vw;
+  left:43vw;
+  transform: rotate(45deg);
+}
+#confetti-thrower-4{
+  position:absolute;
+  width:0.6vw;
+  height:1vw;
+  background-color:rgb(99, 64, 0); ;
+  top: 12vw;
+  right:49vw;
+  transform: rotate(45deg);
+}
+.confetti-container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  
+}
+.confetti {
+  position: absolute;
+  width: 2.5vw;
+  height: 2.5vw;
+  background-color: #f00; /* Initial color, will be overwritten */
+  border-radius: 50%;
+  animation: fall 5s linear infinite;
+}
+
+@keyframes fall {
+  to {
+    transform: translateY(100vh) rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index 13d684f..26086f6 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Nova+Square&family=Poppins:wght@300;400;600;700;800&display=swap");
 
 :root {
-  background-color: rgb(29, 26, 26);
+  background-color: rgb(255, 255, 255);
   user-select: none;
 }
 
@@ -10,6 +10,7 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  
 }
 
 * {
@@ -17,7 +18,7 @@ body {
   margin: 0;
   padding: 0;
   font-size: 62.5%;
-  font-family: "Nova Square", cursive;
+  font-family:sans-serif;
 }
 
 h1 {
@@ -58,71 +59,6 @@ h2 {
   display: none;
 }
 
-.btn {
-  font-size: 2.4rem;
-  padding: 2rem 0;
-  width: 30rem;
-  text-align: center;
-  margin-bottom: 1rem;
-  text-decoration: none;
-  color: rgb(28, 26, 26);
-  background-image: linear-gradient(
-    109.6deg,
-    rgba(45, 116, 213, 1) 11.2%,
-    rgba(121, 137, 212, 1) 91.2%
-  );
-  border: 4px;
-}
-
-.btn:hover {
-  cursor: pointer;
-  box-shadow: 0 0.4rem 1.4rem - rgba(8, 114, 244, 0.6);
-  transition: transform 150ms;
-  transform: scale(1.03);
-}
-
-.btn[disabled]:hover {
-  cursor: not-allowed;
-  box-shadow: none;
-  transform: none;
-}
-
-#topics-btn {
-  background-image: radial-gradient(
-    circle 489px at 49.3% 46.6%,
-    rgba(255, 214, 126, 1) 0%,
-    rgba(253, 200, 0, 1) 100.2%
-  );
-}
-
-#highscore-btn {
-  background-image: radial-gradient(
-    circle 957px at 8.7% 50.5%,
-    rgba(246, 191, 13, 1) 0%,
-    rgba(249, 47, 47, 1) 90%
-  );
-}
-
-#highscore-btn:hover {
-  box-shadow: -0.4rem 1.4rem - rgba(255, 255, 0, 0.5);
-}
-
-#rules-btn {
-  background-image: linear-gradient(
-    180.5deg,
-    rgba(46, 255, 171, 1) 12.3%,
-    rgba(252, 251, 222, 0.46) 92%
-  );
-}
-
-#suggestion-btn {
-  background-image: radial-gradient(
-    circle farthest-corner at 10% 20%,
-    rgba(14, 174, 87, 1) 0%,
-    rgba(12, 116, 117, 1) 90%
-  );
-}
-
 #music-btn {
   background-image: linear-gradient(
     83.2deg,
@@ -131,17 +67,6 @@ h2 {
   );
 }
 
-#releases-btn {
-  background-image: radial-gradient(
-    circle 860px at 11.8% 33.5%,
-    rgba(240, 30, 92, 1) 0%,
-    rgba(244, 49, 74, 1) 30.5%,
-    rgba(249, 75, 37, 1) 56.1%,
-    rgba(250, 88, 19, 1) 75.6%,
-    rgba(253, 102, 2, 1) 100.2%
-  );
-}
-
 #christmas-btn {
   background: linear-gradient(
     90deg,
@@ -233,24 +158,1086 @@ input::placeholder {
   color: rgb(59, 196, 255) !important;
 }
 
-.button1 {
-  background-color: #4CAF50; /* Green */
-  border: none;
-  color: white;
-  padding: 15px 32px;
-  text-align: center;
+#topbanner{
+  background-color:rgb(0, 0, 0);
+  position: absolute;
+  width:100%;
+  height:10px;
+  max-width: 100%;
+  top:0px;
+  height:10%;
+}
+#kendallhome{
+  position: absolute;
+  top:1.5vw;
+  left:2vw;
+  font-size: 2vw;
+  font-family:sans-serif;
+  font-style: italic;
+  font-weight:lighter;
   text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
+  color:white;
 }
-.button2 {
-  background-color: red;
-  border: none;
-  color: white;
-  padding: 15px 32px;
-  text-align: center;
+#maindrop{
+  
+  position: absolute;
+  width: 3vw;
+  height: 2.5vw;
+  top:1.5vw;
+  right:2vw;
+}
+#drop1{
+  background-color: white;
+  position: absolute;
+  width: 3vw;
+  height: 0.23vw;
+  top:0.1vw;
+  right:0vw;
+  /* pointer-events: none; */
+}
+#drop2{
+  background-color: white;
+  position: absolute;
+  width: 3vw;
+  height: 0.23vw;
+  top:1.1vw;
+  right:0vw;
+  /* pointer-events: none; */
+}
+#drop3{
+  background-color: white;
+  position: absolute;
+  width: 3vw;
+  height: 0.23vw;
+  top:2.1vw;
+  right:0vw;
+  /* pointer-events: none; */
+}
+#sidedrop{
+  position: absolute;
+  height: 0;
+  width: 0;
+  background-color: rgb(250, 250, 250);
+  right:-2vw;
+  top: -3.5vh;
+  overflow:hidden;
+  transition: width 1s, height 1s;
+  
+}
+#maindrop:hover #sidedrop{
+  height: 100vh;
+  width: 800%;
+  
+}
+#maindrop:hover #drop1{
+  background-color:black;
+}
+#maindrop:hover #drop2{
+  background-color:black;
+}
+#maindrop:hover #drop3{
+  background-color:black;
+}
+.btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:7vw;
+  left:6vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  
+}
+#topics-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:13vw;
+  right:vw;
+  color:black;
+  font-family:sans-serif; 
+  font-style:italic; 
+ 
+}
+#rules-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:19vw;
+  right:9vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  
+}
+#suggestion-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:25vw;
+  right:9vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+ 
+}
+#highscore-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:31vw;
+  right:9vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  
+  }
+#releases-btn{
+  text-decoration: none;
+  font-size:2.5vw;
+  position:absolute;
+  top:37vw;
+  right:9vw;
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+ 
+}
+.btn:hover{
+  text-decoration: underline;
+}
+
+#topics-btn:hover{
+  text-decoration: underline;
+}
+#rules-btn:hover{
+  text-decoration: underline;
+}
+#suggestion-btn:hover{
+  text-decoration: underline;
+}
+#highscore-btn:hover{
+  text-decoration: underline;
+}
+#releases-btn:hover{
+  text-decoration: underline;
+}
+.btn1{
+  position:absolute;
+  top:6.7vw;
+  left:2vw;
+  font-size:2.5vw;
+  text-decoration:none;
+}
+#topics-btn1{
+  text-decoration:none;
+  top: 12.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#rules-btn1{
+  text-decoration:none;
+  top: 18.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#suggestion-btn1{
+  text-decoration:none;
+  top: 24.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#highscore-btn1{
+  text-decoration:none;
+  top: 30.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#releases-btn1{
+  text-decoration:none;
+  top: 36.7vw;
+  left:2vw;
+  font-size:2.5vw;
+}
+#semi-circle-div{
+  background-color: black;
+  width:60%;
+  height:80%;
+  overflow:hidden;
+  position:absolute;
+  right:0vw;
+  border-radius: 0vw 0vw 0vw 100vw;
+  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4);
+}
+#big-circle-div{
+  background-color: rgb(0, 0, 0);
+  width:10%;
+  height:20%;
+  overflow:hidden;
+  position:absolute;
+  right:50vw;
+  top:35vw;
+  border-radius: 100vw 100vw 100vw 100vw;
+  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4);
+}
+#small-circle-div{
+  background-color: rgb(0, 0, 0);
+  width:5%;
+  height:10%;
+  overflow:hidden;
+  position:absolute;
+  right:40vw;
+  top:42vw;
+  border-radius: 100vw 100vw 100vw 100vw;
+  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4);
+}
+#test-your{
+  color:#000000;
+  font-size:9vw;
+  font-family:sans-serif;
+  position: absolute;
+  left:3.5vw;
+  top:10.2vw;
+  font-style: italic;
+  font-weight:lighter;
+}
+#self{
+  color: #ffffff;
+  font-size:9vw;
+  font-family:sans-serif;
+  position: absolute;
+  left:1vw;
+  top:5vw;
+  font-style: italic;
+  font-weight:lighter;
+  
+}
+#desc{
+  font-family:sans-serif;
+  font-weight:lighter;
+  font-style: italic;
+  position:absolute;
+  left:5vw;
+  color:rgb(0, 0, 0);
+  top:22.2vw;
+  width:60vw;
+  font-size:2.1vw;
+}
+#desc1{
+  font-family: sans-serif;
+  color:white;
+  font-style:italic;
+  font-weight:lighter;
+  position:absolute;
+  top:17.2vw;
+  left:4.3vw;
+  font-size:2.1vw;
+}
+#desc2{
+  font-family: sans-serif;
+  color:white;
+  font-style:italic;
+  font-weight:lighter;
+  position:absolute;
+  top:19.6vw;
+  left:5.2vw;
+  font-size:2.1vw;
+}
+#desc3{
+  font-family: sans-serif;
+  color:white;
+  font-style:italic;
+  font-weight:lighter;
+  position:absolute;
+  top:22vw;
+  left:6.9vw;
+  font-size:2.1vw;
+}
+#desc4{
+  font-family: sans-serif;
+  color:white;
+  font-style:italic;
+  font-weight:lighter;
+  position:absolute;
+  top:25.1vw;
+  left:8vw;
+  font-size:2.1vw;
+}
+#mainsample{
+ background-color: black;;
+  position:absolute;
+  top:40vw;
+  left:5vw;
+  width:18.5vw;
+  border-radius:1vw;
+  height:4.5vw;
+  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4);
+}
+#sample{
+  position: absolute;
+  color:white;
+  top:1vw;
   text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
+  font-size:2vw;
+  font-style:italic;
+  font-family: sans-serif;
+  left:1.5vw;
+  font-weight: lighter;
+  transition-duration: 1s;
+}
+#arrow{
+  font-family:sans-serif;
+  font-style: italic;
+  position: absolute;
+  left:15.5vw;
+  font-weight: lighter;
+  top:1.1vw;
+  font-size:2vw;
+  transition-duration: 1s;
+}
+#mainsample:hover #arrow{
+  left:16.5vw;
+}
+#mainsample:hover #sample{
+  left:1vw;
+}
+#example{
+  background-color:white;
+  border-radius:1vw;
+  position: absolute;
+  top:3vw;
+  right:6.5vw;
+  height:25vw;
+  width:20vw;
+  box-shadow: 20px 20px 20px rgba(255, 255, 255, 0.4);
+}
+#question-example{
+  font-size:1.8vw;
+  font-family: sans-serif;
+  color:#404040;
+  position:absolute;
+  top:2vw;
+  text-align:center;
+ padding-left:0.5vw;
+ padding-right:0.5vw;
+  
+  font-weight:lighter;
+}
+
+#option-1{
+  font-family: sans-serif;
+  font-size:1.5vw;
+  font-weight:lighter;
+  position: absolute;
+  top:0.6vw;
+  left:1vw;
+  color:white;
+}
+#option-2{
+  font-family: sans-serif;
+  font-size:1.5vw;
+  font-weight:lighter;
+  position: absolute;
+  top:0.6vw;
+  left:1vw;
+  color:rgb(255, 255, 255);
+}
+#option-3{
+  font-family: sans-serif;
+  font-size:1.5vw;
+  font-weight:lighter;
+  position: absolute;
+  top:0.6vw;
+  left:1vw;
+  color:rgb(255, 255, 255);
+}
+#option-4{
+  font-family: sans-serif;
+  font-size:1.5vw;
+  font-weight:lighter;
+  position: absolute;
+  top:0.6vw;
+  left:1vw;
+  color:rgb(255, 255, 255);
+}
+#div-option-1{
+  background-color:black;
+  border-radius:1vw;
+  position: absolute;
+  top:8vw;
+  left:1vw;
+  width:18vw;
+  height:3vw;
+}
+#div-option-2{
+  background-color:black;
+  border-radius:1vw;
+  position: absolute;
+  top:11.2vw;
+  left:1vw;
+  width:18vw;
+  height:3vw;
+  filter: blur(4px);
+  -webkit-filter: blur(4px);
+}
+#div-option-3{
+  background-color:black;
+  border-radius:1vw;
+  position: absolute;
+  top:14.4vw;
+  left:1vw;
+  width:18vw;
+  height:3vw;
+  filter: blur(4px);
+  -webkit-filter: blur(4px);
+}
+#div-option-4{
+  background-color:black;
+  border-radius:1vw;
+  position: absolute;
+  top:17.6vw;
+  left:1vw;
+  width:18vw;
+  height:3vw;
+  filter: blur(4px);
+  -webkit-filter: blur(4px);
+}
+#tick1{
+  background-color:#00FF1A;
+  width:0.1vw;
+  height:0.7vw;
+  position:absolute;
+  top:1.5vw;
+  right:2.5vw;
+  transform:rotate(-45deg)
+}
+#tick2{
+  background-color:#00FF1A;
+  width:0.1vw;
+  height:1.2vw;
+  position:absolute;
+  top:1.01vw;
+  right:1.9vw;
+  transform:rotate(45deg)
+}
+#home-second-part{
+  
+  position: absolute;
+  width:100%;
+  background-color: black;
+  height:53vw;
+  top:100%
+
+}
+#explore{
+  font-family: sans-serif;
+  position: absolute;
+  top: 2vw;
+  left:42vw;
+  font-weight:lighter;
+  font-style:italic;
+  font-size:3vw;
+}
+#find-more{
+  font-family:sans-serif;
+  font-weight:lighter;
+  position: absolute;
+  bottom: 0.1vw;
+  right:1vw;
+  font-size:2vw;
+  font-style: italic;
+}
+#fruit-quiz{
+  background-color:rgb(255, 255, 255);
+  position:absolute;
+  top:13vw;
+  height:30vw;
+  width:20vw;
+  left:27.5vw;
+  border-radius:2vw;
+  border: 10px solid rgb(53, 53, 53);
+  box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
+}
+#christmas-quiz{
+  background-color:white;
+  position:absolute;
+  top:13vw;
+  height:30vw;
+  width:20vw;
+  left:5.5vw;
+  border-radius:2vw;
+  border: 10px solid rgb(53, 53, 53);
+  box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
+}
+#football-quiz{
+  background-color:white;
+  position:absolute;
+  top:13vw;
+  height:30vw;
+  width:20vw;
+  left:49.5vw;
+  border-radius:2vw;
+  border: 10px solid rgb(53, 53, 53);
+  box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
+}
+#roblox-quiz{
+  background-color:white;
+  position:absolute;
+  top:13vw;
+  height:30vw;
+  width:20vw;
+  left:71.5vw;
+  border-radius:2vw;
+  border: 10px solid rgb(53, 53, 53);
+  box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
+}
+#fruit-png{
+  top:5vw;
+  left:6.6vw;
+  position: absolute;
+  border-radius:1vw;
+  width:6vw;
+}
+#christmas-png{
+  top:5vw;
+  left:6.6vw;
+  position: absolute;
+  border-radius:1vw;
+  width:6vw;
+}
+#football-png{
+  top:6vw;
+  left:7.6vw;
+  position: absolute;
+    width:4vw;
+}
+#roblox-png{
+  top:5vw;
+  left:6.6vw;
+  position: absolute;
+  border-radius:1vw;
+  width:6vw;
+}
+#fruit-txt{
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  font-weight:lighter;
+  position: absolute;
+  top:14vw;
+  left:3.9vw;
+  font-size:2.5vw;
+  text-shadow: 0 0 10px #a0a0a0, 0 0 20px #a0a0a0, 0 0 30px #a0a0a0;
+}
+#christmas-txt{
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  font-weight:lighter;
+  position: absolute;
+  top:14vw;
+  left:0.7vw;
+  font-size:2.5vw;
+  text-shadow: 0 0 10px #a0a0a0, 0 0 20px #a0a0a0, 0 0 30px #a0a0a0;
+}
+#football-txt{
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  font-weight:lighter;
+  position: absolute;
+  top:14vw;
+  left:2.1vw;
+  font-size:2.5vw;
+  text-shadow: 0 0 10px #a0a0a0, 0 0 20px #a0a0a0, 0 0 30px #a0a0a0;
+}
+#roblox-txt{
+  color:black;
+  font-family:sans-serif;
+  font-style:italic;
+  font-weight:lighter;
+  position: absolute;
+  top:14vw;
+  left:2.6vw;
+  font-size:2.5vw;
+  text-shadow: 0 0 10px #a0a0a0, 0 0 20px #a0a0a0, 0 0 30px #a0a0a0;
+}
+#playbutton-1{
+  background-color:#000000;
+  position:absolute;
+  height:3vw;
+  width:13vw;
+  border-radius:1vw;
+  bottom:5vw;
+  left:3vw;
+}
+#playbutton-2{
+  background-color:#000000;
+  position:absolute;
+  height:3vw;
+  width:13vw;
+  border-radius:1vw;
+  bottom:5vw;
+  left:3vw;
+}
+#playbutton-3{
+  background-color:#000000;
+  position:absolute;
+  height:3vw;
+  width:13vw;
+  border-radius:1vw;
+  bottom:5vw;
+  left:3vw;
+}
+#playbutton-4{
+  background-color:#000000;
+  position:absolute;
+  height:3vw;
+  width:13vw;
+  border-radius:1vw;
+  bottom:5vw;
+  left:3vw;
+}
+#play-now-1{
+  font-size:1.5vw;
+  position: absolute;
+  color:rgb(255, 255, 255);
+  font-style:italic;
+  font-family:sans-serif;
+  font-weight:lighter;
+  top:0.7vw;
+  left:1vw;
+  transition-duration: 1s;
+}
+#play-now-2{
+  font-size:1.5vw;
+  position: absolute;
+  color:rgb(255, 255, 255);
+  font-style:italic;
+  font-family:sans-serif;
+  font-weight:lighter;
+  top:0.7vw;
+  left:1vw;
+  transition-duration: 1s;
+}
+#play-now-3{
+  font-size:1.5vw;
+  position: absolute;
+  color:rgb(255, 255, 255);
+  font-style:italic;
+  font-family:sans-serif;
+  font-weight:lighter;
+  top:0.7vw;
+  left:1vw;
+  transition-duration: 1s;
+}
+#play-now-4{
+  font-size:1.5vw;
+  position: absolute;
+  color:rgb(255, 255, 255);
+  font-style:italic;
+  font-family:sans-serif;
+  font-weight:lighter;
+  top:0.7vw;
+  left:1vw;
+  transition-duration: 1s;
+}
+#arrow-1{
+  position:absolute;
+  font-size:2vw;
+  font-family:sans-serif;
+  top:0.5vw;
+  right:1vw;
+  font-weight:lighter;
+  text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
+  transition-duration: 1s;
+}
+#arrow-2{
+  position:absolute;
+  font-size:2vw;
+  font-family:sans-serif;
+  top:0.5vw;
+  right:1vw;
+  font-weight:lighter;
+  text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
+  transition-duration: 1s;
+}
+#arrow-3{
+  position:absolute;
+  font-size:2vw;
+  font-family:sans-serif;
+  top:0.5vw;
+  right:1vw;
+  font-weight:lighter;
+  text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
+  transition-duration: 1s;
+}
+#arrow-4{
+  position:absolute;
+  font-size:2vw;
+  font-family:sans-serif;
+  top:0.5vw;
+  right:1vw;
+  font-weight:lighter;
+  text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
+  transition-duration: 1s;
+}
+#playbutton-1:hover #play-now-1{
+  left:0.5vw;
+}
+#playbutton-2:hover #play-now-2{
+  left:0.5vw;
+}
+#playbutton-3:hover #play-now-3{
+  left:0.5vw;
+}
+#playbutton-4:hover #play-now-4{
+  left:0.5vw;
+}
+#playbutton-1:hover #arrow-1{
+  right:0.5vw;
+}
+#playbutton-2:hover #arrow-2{
+  right:0.5vw;
+}
+#playbutton-3:hover #arrow-3{
+  right:0.5vw;
+}
+#playbutton-4:hover #arrow-4{
+  right:0.5vw;
+}
+#home-third-part{
+  position: absolute;
+  top:200%;
+  width:100%;
+  height:26.5vw;
+}
+#home-third-part-first-curved{
+  width:60%;
+  height:100%;
+  position: absolute;
+  background-color:black;
+  border-radius: 0vw 100vw 100vw 0vw;
+}
+#earn-points{
+  position:absolute;
+  top:5vw;
+  left:17vw;
+  font-size:4vw;;
+}
+#earn-points-desc{
+  position: absolute;
+  top:11vw;
+  left:7vw;
+  color:rgba(226, 226, 226, 0.37);
+  font-size:2vw;
+  font-weight:100;
+  text-align:center;
+  font-style: italic;
+  width:40vw;
+}
+#home-third-part-second-curved{
+  width:60%;
+  height:100%;
+  position: absolute;
+  background-color:black;
+  border-radius: 100vw 0vw 0vw 100vw;
+  top:100%;
+  right:0vw;
+}
+#get-ranked{
+  position:absolute;
+  top:3vw;
+  right:16vw;
+  font-size:4vw;;
+}
+#get-ranked-desc{
+  position: absolute;
+  top:9vw;
+  right:7vw;
+  color:rgba(226, 226, 226, 0.37);
+  font-size:2vw;
+  font-weight:100;
+  text-align:center;
+  font-style: italic;
+  width:40vw;
+}
+#nine-hun{
+  position:absolute;
+  right:20vw;
+  font-size:3.5vw;
+  color:black;
+  top:5vw;
+  font-style: italic;
+  font-weight:bold;
+}
+#one-hun{
+  position:absolute;
+  right:20vw;
+  font-size:3.5vw;
+  color:black;
+  top:12vw;
+ font-style: italic;
+ font-weight:bold;
+}
+#five-hun{
+  position:absolute;
+  right:20vw;
+  font-size:3.5vw;
+  color:black;
+  bottom:2vw;
+  font-style: italic;
+  font-weight:bold;
+}
+#home-third-part-first-arrow-first{
+  position:absolute;
+  width:0.4vw;
+  height:2vw; 
+  transform:rotate(45deg);
+  background-color:#00FF1A;
+  top:5vw;
+  right:15vw;
+  box-shadow: 0 4px 8px 0 rgb(43, 255, 0), 0 6px 20px 0 rgba(43, 255, 0);
+}
+#home-third-part-first-arrow-second{
+  position:absolute;
+  width:0.4vw;
+  height:2vw; 
+  transform:rotate(-45deg);
+  background-color:#00FF1A;
+  top:5vw;
+  right:13.8vw;
+  box-shadow: 0 4px 8px 0 rgb(43, 255, 0), 0 6px 20px 0 rgba(43, 255, 0);
+}
+#home-third-part-first-arrow-third{
+  position:absolute;
+  width:0.4vw;
+  height:3vw; 
+  transform:rotate(180deg);
+  background-color:#00FF1A;
+  top:5.5vw;
+  right:14.36vw;
+  box-shadow: 0 4px 8px 0 rgb(43, 255, 0), 0 6px 20px 0 rgba(43, 255, 0);
+}
+#home-third-part-second-arrow-first{
+  position:absolute;
+  width:0.4vw;
+  height:2vw; 
+  transform:rotate(-45deg);
+  background-color:#FF1616;
+  top:13vw;
+  right:15vw;
+  box-shadow: 0 0px 8px 0 rgb(255, 0, 0), 0 6px 20px 0 rgb(255, 0, 0);
+}
+#home-third-part-second-arrow-second{
+  position:absolute;
+  width:0.4vw;
+  height:2vw; 
+  transform:rotate(45deg);
+  background-color:#FF1616;
+  top:13vw;
+  right:13.8vw;
+  box-shadow: 0 0px 8px 0 rgb(255, 0, 0), 0 6px 20px 0 rgb(255, 0, 0);
+}
+#home-third-part-second-arrow-third{
+  position:absolute;
+  width:0.4vw;
+  height:3vw; 
+  transform:rotate(180deg);
+  background-color:#FF1616;
+  top:11.5vw;
+  right:14.36vw;
+  box-shadow: 0 5px 8px 0 rgb(255, 0, 0), 0 6px 20px 0 rgb(255, 0, 0);
+}
+#home-third-part-third-arrow-first{
+  position:absolute;
+  width:0.4vw;
+  height:2vw; 
+  transform:rotate(45deg);
+  background-color:#00FF1A;
+  top:18.8vw;
+  right:15vw;
+  box-shadow: 0 4px 8px 0 rgb(43, 255, 0), 0 6px 20px 0 rgba(43, 255, 0);
+}
+#home-third-part-third-arrow-second{
+  position:absolute;
+  width:0.4vw;
+  height:2vw; 
+  transform:rotate(-45deg);
+  background-color:#00FF1A;
+  top:18.8vw;
+  right:13.8vw;
+  box-shadow: 0 4px 8px 0 rgb(43, 255, 0), 0 6px 20px 0 rgba(43, 255, 0);
+}
+#home-third-part-third-arrow-third{
+  position:absolute;
+  width:0.4vw;
+  height:3vw; 
+  transform:rotate(180deg);
+  background-color:#00FF1A;
+  top:19.3vw;
+  right:14.36vw;
+  box-shadow: 0 10px 8px 0 rgb(43, 255, 0), 0 6px 20px 0 rgba(43, 255, 0);
+}
+#king-png{
+  position: absolute;
+  top:29vw;
+  left:17vw;
+  width:5vw;
+}
+#home-third-part-second-button{
+  background-color: white;
+  position:absolute;
+  width:23vw;
+  height:5vw;
+  font-size:10vw;
+  top:18vw;
+  left:21vw;
+  border-radius:1vw;
+
+}
+#leaderboard-button{
+  color:rgb(0, 0, 0);
+  position: absolute;
+  top:1.5vw;
+  left:2.5vw;
+  font-size:2vw;
+  font-style:italic;
+  text-shadow: 0 0 10px #a0a0a0, 0 0 20px #a0a0a0, 0 0 30px #a0a0a0;
+  transition-duration:1s;
+}
+#leaderboard-arrow{
+  color:rgb(0, 0, 0);
+  position: absolute;
+  top:1.5vw;
+  right:3vw;
+  font-size:2vw;
+  text-shadow: 0 0 10px #a0a0a0, 0 0 20px #a0a0a0, 0 0 30px #a0a0a0;
+  transition-duration:1s;
+}
+#home-third-part-second-button:hover #leaderboard-button{
+  left:2vw;
+}
+#home-third-part-second-button:hover #leaderboard-arrow{
+  right:2.5vw;
+}
+#leaderboard-sample-main{
+  background-color:white;
+  border: 3px solid rgb(0, 0, 0);
+  position: absolute;
+  left:6.5vw;
+  top: 35vw;
+  width:26vw;
+  height:4vw;
+  border-radius:1vw;
+  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4);
+}
+#leaderboard-sample-1{
+  color:black;
+  font-size:1.4vw;
+  position:absolute;
+  left:1vw;
+  top:1vw;
+  font-weight:lighter;
+}
+#neev-j{
+  font-size:1.4vw;
+  color:black;
+  position:absolute;
+  left:3vw;
+  top:1vw;
+  font-style:italic;
+  font-weight:lighter;
+}
+#king-png-small{
+  position: absolute;
+  left:8vw;
+  top:0.6vw;
+  width:2.4vw;
+}
+#five-thou-one-hun{
+  color:black;
+  font-style:italic;
+  font-weight:lighter;
+  position: absolute;
+  right:1vw;
+  top:0.7vw;
+  font-size:2vw;
+}
+#leaderboard-sample-main-2{
+  background-color:black;
+  position: absolute;
+  left:8vw;
+  top: 39.1vw;
+  width:23vw;
+  height:4vw;
+  border-radius:1vw;
+  filter: blur(3px);
+  -webkit-filter: blur(3px);
+}
+#leaderboard-sample-2{
+  color:rgb(255, 255, 255);
+  font-size:1.4vw;
+  position:absolute;
+  left:1vw;
+  top:1.2vw;
+  font-weight:lighter;  
+}
+#oscar-w{
+  font-size:1.4vw;
+  color:rgb(255, 255, 255);
+  position:absolute;
+  left:3vw;
+  top:1.2vw;
+  font-style:italic;
+  font-weight:lighter;
+}
+#five-thou{
+  color:rgb(255, 255, 255);
+  font-style:italic;
+  font-weight:lighter;
+  position: absolute;
+  right:1vw;
+  top:0.9vw;
+  font-size:2vw;
+  
+}
+#leaderboard-sample-main-3{
+  background-color:black;
+  position: absolute;
+  left:9.5vw;
+  top: 43.2vw;
+  width:20vw;
+  height:4vw;
+  border-radius:1vw;
+  filter: blur(3px);
+  -webkit-filter: blur(3px);
+}
+#leaderboard-sample-3{
+  color:rgb(255, 255, 255);
+  font-size:1.4vw;
+  position:absolute;
+  left:1vw;
+  top:1.2vw;
+  font-weight:lighter;  
+}
+#martin-s{
+  font-size:1.4vw;
+  color:rgb(255, 255, 255);
+  position:absolute;
+  left:3vw;
+  top:1.2vw;
+  font-style:italic;
+  font-weight:lighter;
+}
+#four-thou-nine{
+  color:rgb(255, 255, 255);
+  font-style:italic;
+  font-weight:lighter;
+  position: absolute;
+  right:1vw;
+  top:0.9vw;
+  font-size:2vw;
   
 }
diff --git a/css/rules.css b/css/rules.css
index e89c528..6d10162 100644
--- a/css/rules.css
+++ b/css/rules.css
@@ -1,29 +1,288 @@
-body {
-  width: 80%;
-  margin: 0 auto;
-  user-select: none;
+#top-banner-rules{
+  width: 100%;
+  height:6vw;
+  background-color: black;
+  position: absolute;
+  top:0vw;
+}
+#quiz-rules{
+  color:white;
+  position: absolute;
+  top:0.7vw;
+  font-size:4vw;
+  left:40.7vw;
+  font-style: italic;
+  z-index: 2;
+  font-weight: lighter;
+  text-shadow:
+  0 0 7px #fff,
+  0 0 10px #fff,
+  0 0 21px #fff,
+  0 0 42px rgb(255, 255, 255);
+ 
+}
+#house{
+  color:rgb(255, 255, 255);
+  font-size: 2vw;
+  position: absolute;
+  top:2vw;
+  left:0.9vw;
+  z-index: 3;
+}
+#back-home{
+  position: absolute;
+  top:1.49vw;
+  left:1vw;
+  width:3vw;
+  height:3vw;
+  background-color: rgb(43, 43, 43);
+  border-radius: 0.3vw;;
+}
+#QuizRules{
+ position: absolute;
+
+
+  color:rgb(255, 255, 255); 
+  left:13.1vw;
+  font-size:3vw;
+  top:2vw;
+  text-shadow:
+  0 0 7px #000000,
+  0 0 10px rgb(0, 0, 0);
+  z-index: 2;
+}
+#QuizRules-1{
+  position: absolute;
+
+ 
+  color:rgb(73, 73, 73); 
+  left:13.6vw;
+  font-size:3vw;
+  top:2vw;
+  text-shadow:
+  0 0 7px #000000,
+  0 0 10px rgb(0, 0, 0);
+}
+#ExtraInfo{
+  color:rgb(255, 255, 255);
+  position: absolute;
+  right:14.5vw;
+  font-size:3vw;
+  top:2vw;
+
+
+  text-shadow:
+  0 0 7px #000000,
+  0 0 10px rgb(0, 0, 0);
+  z-index: 2;
+}
+#ExtraInfo-1{
+  color:rgb(73, 73, 73);
+  position: absolute;
+  right:14vw;
+  font-size:3vw;
+  top:2vw;
+
+
+  text-shadow:
+  0 0 7px #000000,
+  0 0 10px rgb(0, 0, 0);
+}
+#QuizRules-desc{
+  width:10vw;
+  text-align: center;
+  position: absolute;
+  left:0.49vw;
+top:4.2vw;
+  font-size:1vw;
+  font-weight: lighter;
+  color:rgba(0, 0, 0, 0.651);
+}
+#QuizRules-desc-1{
+  width:10vw;
+  text-align: center;
+  position: absolute;
+  left:0.49vw;
+  top:4.3vw;
+  font-size:1vw;
+  font-weight: lighter;
+  color:rgba(0, 0, 0, 0.651);
+}
+#QuizRules-desc-2{
+  width:10vw;
+  text-align: center;
+  position: absolute;
+  left:0.49vw;
+  top:3.5vw;
+  font-size:1vw;
+  font-weight: lighter;
+  color:rgba(0, 0, 0, 0.651);
+}
+#ExtraInfo-desc{
+  position: absolute;
+  left:0.6vw;
+  top:1.7vw;
+  width:10vw;
+  text-align: center;
+  font-size:1.3vw;
+  font-weight: lighter;
+  text-decoration: none;
+  color:rgb(0, 0, 0);
+}
+#ExtraInfo-desc-2{
+  position: absolute;
+  left:2.5vw;
+  top:1.7vw;
+  width:20vw;
+  text-align: center;
+  font-size:1.3vw;
+  font-weight: lighter;
+  text-decoration: none;
+  color:rgb(0, 0, 0);
+}
+#note-desc{
+  position: absolute;
+  right:0.6vw;
+  width:89%;
+  bottom:-0.3vw;
+    font-size:1.3vw;
+  font-weight: lighter;
+  color:black;
+  text-align:center;
+}
+#note{
+  color:rgb(255, 255, 255);
+  position: absolute;
+  left:2vw;
+ bottom:11.5vw;
+ font-size:3vw;
+ text-shadow:
+  0 0 7px #000000,
+  0 0 10px rgb(0, 0, 0);
 }
 
-h1 {
-  color: red;
+svg {
+  width: 100%;
+  height: 100%; /* Adjust height as needed */
+  display: block;
+ 
 }
 
-p {
-  color: #ef744b;
+path {
+  fill: none;
+  stroke: rgba(4, 255, 100, 0.288);
+  stroke-width: 50;
+  stroke-linecap: round;
+  stroke-dasharray: 750; /* Initial value of dash array */
+  animation: squiggle 10s linear infinite alternate; /* Animation for the squiggly effect */
 }
 
-h3 {
-  color: violet;
-  font-size: 3rem;
+@keyframes squiggle {
+  0% {
+    stroke-dashoffset: 750; /* Start with dash offset at full length */
+  }
+  100% {
+    stroke-dashoffset: 0; /* End with dash offset at zero */
+  }
+}
+#left-rules{
+  background-color: black;
+  height: 70%;
+  width:35%;
+  position: absolute;
+  top:10.5vw;
+  left:11vw;
+  border-radius:2vw;
+  box-shadow: 1vw 1vw 3vw rgb(43, 43, 43);
+}
+#right-rules{
+  background-color: #000000;
+  height: 70%;
+  width:35%;
+  position: absolute;
+  top:10.5vw;
+  right:11vw;
+  border-radius:2vw;
+  box-shadow: 1vw 1vw 3vw rgb(43, 43, 43);
 }
+#sticky-note-1{
+  background-color: #DAE8C4;
+  position: absolute;
+  top:8vw;
+  left:5.5vw;
+  height: 11vw;
+  width:11vw;
+  box-shadow: 0.1vw 0.1vw 1vw rgba(217, 255, 80, 0.678);
+}
+#sticky-note-2{
+  background-color: #B2DECD;
+  position: absolute;
+  top:8vw;
+  right:5.5vw;
+  height: 11vw;
+  width:11vw;
+  box-shadow: 0.1vw 0.1vw 1vw rgba(86, 255, 80, 0.678);
+}
+#sticky-note-3{
+  background-color: #F7D5BC;
+  position: absolute;
+  bottom:3.5vw;
+  left:5.5vw;
+  height: 11vw;
+  width:11vw;
+  box-shadow: 0.1vw 0.1vw 1vw rgba(248, 171, 108, 0.678);
+}
+#sticky-note-4{
+  background-color: #C1C8E2;
+  position: absolute;
+  bottom:3.5vw;
+  right:5.5svw;
+  height: 11vw;
+  width:11vw;
+  box-shadow: 0.1vw 0.1vw 1vw rgba(223, 88, 250, 0.678);
 
-h2 {
-  color: green;
 }
+#rule-number{
+  color:rgb(0, 0, 0);
+  font-size: 2.7vw;
+}
+#have-fun{
+  color:rgba(0, 0, 0, 0.651);
+  font-size:2vw;
+  position: absolute;
+  top:4.8vw;
+  width:10vw;
+  font-weight: lighter;
+  left:0.9vw;
+  
+}
+#circle-1{
+ 
+  background-color: #F6B3AD;
+  width:11.5vw;
+  height:11vw;
+  position: absolute;
+  top:8vw;
+  left:5vw;
+  box-shadow: 0.1vw 0.1vw 1vw rgba(255, 124, 63, 0.678);
+}
+#circle-2{
 
-footer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 23px;
+  background-color: #88D5F1;
+  width:11.5vw;
+  height:11vw;
+  position: absolute;
+  top:8vw;
+  right:5vw;
+  box-shadow: 0.1vw 0.1vw 1vw rgba(88, 191, 250, 0.678);
 }
+#circle-3{
+
+  background-color: #EED7E9;
+  width:25vw;
+  height:11vw;
+  position: absolute;
+  bottom:3.5vw;
+  left:5vw;
+  box-shadow: 0.1vw 0.1vw 1vw rgba(250, 88, 223, 0.678);
+}
\ No newline at end of file
diff --git a/css/topics.css b/css/topics.css
index c8d6739..18d7591 100644
--- a/css/topics.css
+++ b/css/topics.css
@@ -1,165 +1,266 @@
-body {
-  user-select: none;
+#house{
+  color:rgb(255, 255, 255);
+  font-size: 2vw;
+  position: absolute;
+  top:2vw;
+  left:0.9vw;
+  z-index: 3;
 }
-
-.hide {
-  display: none;
-  /* width: 0; */
+#back-home{
+  position: absolute;
+  top:1.49vw;
+  left:1vw;
+  width:3vw;
+  height:3vw;
+  background-color: rgb(43, 43, 43);
+  border-radius: 0.3vw;;
 }
-
-#home {
-  width: 300px;
-  margin: 0 auto;
+#top-banner-topics{
+  width:100%;
+  position: absolute;
+  top:0vw;
+  height:6vw;
+  background-color: black;
 }
-
-.show {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 7px;
+#quiz-topics{
+  color:white;
+  position: absolute;
+  top:0.7vw;
+  font-size:4vw;
+  left:39vw;
+  font-style: italic;
+  z-index: 2;
+  font-weight: lighter;
+  text-shadow:
+  0 0 7px #fff,
+  0 0 10px #fff,
+  0 0 21px #fff,
+  0 0 42px rgb(255, 255, 255);
+ 
 }
 
-/* need to overite width from .btn in css/index.css */
-.show > a {
-  width: 100%;
-  position: relative;
-  left: 20px;
-}
 
-/* GRADIENTS */
-/* technology */
-#technology {
-  background-image: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
+#topics-browsers{
+  position: absolute;
+  top:8vw;
+  left:8.8vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#tech-btn {
-  background-image: linear-gradient(
-    43deg,
-    #4158d0 0%,
-    #c850c0 46%,
-    #ffcc70 100%
-  );
+#topics-christmas{
+  position: absolute;
+  top:8vw;
+  left:22.5vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#browsers-btn {
-  background-image: linear-gradient(
-    109.6deg,
-    rgba(61, 245, 167, 1) 11.2%,
-    rgba(9, 111, 224, 1) 91.1%
-  );
+#topics-computerParts{
+  position: absolute;
+  top:8vw;
+  left:36.2vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#Computer-btn{
-  
-background-image: linear-gradient(
-  90deg, 
-  rgba(214,224,35,1) 0%, 
-  rgba(152,194,30,1) 29%, 
-  rgba(255,89,0,1) 100%);
+#topics-countries{
+  position: absolute;
+  top:8vw;
+  left:49.9vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-/* Games */
-#games {
-  background-image: linear-gradient(135deg, #f05f57 10%, #360940 100%);
+#topics-disney{
+  position: absolute;
+  top:8vw;
+  left:63.6vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#minecraft-btn {
-  background-image: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
+#topics-easter{
+  position: absolute;
+  top:8vw;
+  left:77.3vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#roblox-btn {
-  background-image: radial-gradient(
-    circle,
-    rgba(63, 94, 251, 1) 0%,
-    rgba(101, 102, 104, 1) 100%
-  );
+#topics-football{
+  position: absolute;
+  top:21.7vw;
+  left:8.8vw; 
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#football-btn {
-  background-image: linear-gradient(
-    90deg,
-    rgba(131, 58, 180, 1) 0%,
-    rgba(236, 103, 103, 1) 50%,
-    rgba(252, 176, 69, 1) 100%
-  );
+#topics-fruit{
+  position: absolute;
+  top:21.7vw;
+  left:22.5vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-/* Festivals */
-#festivals {
-  background-image: radial-gradient(
-    circle farthest-corner at 10% 20%,
-    rgba(14, 174, 87, 1) 0%,
-    rgba(12, 116, 117, 1) 90%
-  );
+#topics-gk{
+  position: absolute;
+  top:21.7vw;
+  left:36.2vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#easter-btn {
-  background-image: linear-gradient(90deg, #fad961 0%, #f76b1c 100%);
+#topics-ja{
+  position: absolute;
+  top:21.7vw;
+  left:49.9vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#christmas-btn {
-  background-image: linear-gradient(
-    0deg,
-    rgba(34, 193, 195, 1) 0%,
-    rgba(253, 187, 45, 1) 100%
-  );
+#topics-kq{
+  position: absolute;
+  top:21.7vw;
+  left:63.6vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-/* General knowledge */
-#general {
-  background-image: radial-gradient(
-    circle farthest-corner at 10% 20%,
-    rgba(255, 94, 247, 1) 17.8%,
-    rgba(2, 245, 255, 1) 100.2%
-  );
+#topics-mc{
+  position: absolute;
+  top:21.7vw;
+  left:77.3vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#country-btn {
-  background-image: radial-gradient(
-    circle farthest-corner at 10% 20%,
-    rgba(255, 94, 247, 1) 17.8%,
-    rgba(2, 245, 255, 1) 100.2%
-  );
+#topics-presidents{
+  position: absolute;
+  top:35.4vw;
+  left:8.8vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#presidents-btn {
-  background-image: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
+#topics-pl{
+  position: absolute;
+  top:35.4vw;
+  left:22.5vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-/* YouTube */
-#youtube{
-  background-image: linear-gradient(90deg, #FF0000 0%, #FF4500 100%);
+#topics-roblox{
+  position: absolute;
+  top:35.4vw;
+  left:36.2vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#youtube-btn {
-  background-image: linear-gradient(90deg, #4285F4 0%, #00BFFF 100%);
+#topics-tech{
+  position: absolute;
+  top:35.4vw;
+  left:49.9vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-/* Others */
-#others {
-  background-image: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
+#topics-o1o{
+  position: absolute;
+  top:35.4vw;
+  left:63.6vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
 }
-
-#disney-btn {
-  background-image: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
+#topics-youtube{
+  position: absolute;
+  top:35.4vw;
+  left:77.3vw;
+  width:13.5vw;
+  height:13.5vw;
+  background-color: black;
+  border-radius: 1vw;;
+  
 }
-
-#fruit-btn {
-  background-image: radial-gradient(
-    circle,
-    rgba(238, 174, 202, 1) 0%,
-    rgba(148, 187, 233, 1) 100%
-  );
+img{
+  width: 90%;
+  height:7.5vw;
+  position: absolute;
+  top:0.5vw;
+  left:0.7vw;
+  border-radius:1vw;
 }
-
-#hwdyk-btn {
-  background-image: radial-gradient(
-    circle,
-    rgba(35, 218, 80, 1) 0%,
-    rgba(252, 0, 209, 1) 100%
-  );
+#kendall-img{
+  width:60%;
+  height:7.5vw;
+  position: absolute;
+  top:0.5vw;
+  left:2.6vw;
+  border-radius:1vw;
 }
-
-#jaidenanimations-btn {
-  background-color: #4158D0;
-  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+#topics-text{
+  font-size:1.1vw;
+  margin-top:8.5vw;
+  font-weight: 700;
+}
+#topics-button{
+  position: absolute;
+  bottom:2vw;
+  background-color:rgb(43, 43, 43) ;
+  width:80%;
+  height:2.6vw;
+  border-radius: 0.8vw;
+  bottom:0.5vw;
+  left:1.4vw; 
+  cursor: pointer;
+}
+.arrow {
+  border: solid rgb(255, 255, 255);
+  border-width: 0 0.2vw 0.2vw 0;
+  display: inline-block;
+  padding: 0.4vw;
+  position: absolute;
+  top:0.8vw;
+  right:4.8vw;
+  transition-duration: 500ms;
+}
+.right {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+#topics-pointer{
+  position: absolute;
+  width:1.5vw;
+  height:0.15vw;
+  background-color: white;
+  top:1.2vw;
+  left:4.5vw;
+  transition-duration: 500ms;
+}
+#topics-button:hover .arrow{
+  right:4.6vw;
+}
+#topics-button:hover #topics-pointer{
+  left:4.7vw;
 }
diff --git a/images/browserss.png b/images/browserss.png
new file mode 100644
index 0000000..223e3c4
Binary files /dev/null and b/images/browserss.png differ
diff --git a/images/christmas.png b/images/christmas.png
new file mode 100644
index 0000000..5f3789b
Binary files /dev/null and b/images/christmas.png differ
diff --git a/images/chritmass.png b/images/chritmass.png
new file mode 100644
index 0000000..144dd4b
Binary files /dev/null and b/images/chritmass.png differ
diff --git a/images/computerParts.png b/images/computerParts.png
new file mode 100644
index 0000000..cdb6c74
Binary files /dev/null and b/images/computerParts.png differ
diff --git a/images/countries.png b/images/countries.png
new file mode 100644
index 0000000..114f98c
Binary files /dev/null and b/images/countries.png differ
diff --git a/images/disney.png b/images/disney.png
new file mode 100644
index 0000000..bccf47d
Binary files /dev/null and b/images/disney.png differ
diff --git a/images/easter.png b/images/easter.png
new file mode 100644
index 0000000..8d1790a
Binary files /dev/null and b/images/easter.png differ
diff --git a/images/football.png b/images/football.png
new file mode 100644
index 0000000..5302da1
Binary files /dev/null and b/images/football.png differ
diff --git a/images/footballs.png b/images/footballs.png
new file mode 100644
index 0000000..f6c49b4
Binary files /dev/null and b/images/footballs.png differ
diff --git a/images/fruits.png b/images/fruits.png
new file mode 100644
index 0000000..aea0b1c
Binary files /dev/null and b/images/fruits.png differ
diff --git a/images/fruitss.png b/images/fruitss.png
new file mode 100644
index 0000000..1cc3755
Binary files /dev/null and b/images/fruitss.png differ
diff --git a/images/gk.png b/images/gk.png
new file mode 100644
index 0000000..922a901
Binary files /dev/null and b/images/gk.png differ
diff --git a/images/ja.png b/images/ja.png
new file mode 100644
index 0000000..6928d87
Binary files /dev/null and b/images/ja.png differ
diff --git a/images/king.png b/images/king.png
new file mode 100644
index 0000000..96418ec
Binary files /dev/null and b/images/king.png differ
diff --git a/images/kq.png b/images/kq.png
new file mode 100644
index 0000000..069208f
Binary files /dev/null and b/images/kq.png differ
diff --git a/images/mc.png b/images/mc.png
new file mode 100644
index 0000000..ffda084
Binary files /dev/null and b/images/mc.png differ
diff --git a/images/o1o.png b/images/o1o.png
new file mode 100644
index 0000000..b29fdf2
Binary files /dev/null and b/images/o1o.png differ
diff --git a/images/pl.png b/images/pl.png
new file mode 100644
index 0000000..b2c4bd9
Binary files /dev/null and b/images/pl.png differ
diff --git a/images/presidents.png b/images/presidents.png
new file mode 100644
index 0000000..9d8ec13
Binary files /dev/null and b/images/presidents.png differ
diff --git a/images/roblox.png b/images/roblox.png
new file mode 100644
index 0000000..b5b6576
Binary files /dev/null and b/images/roblox.png differ
diff --git a/images/robloxs.png b/images/robloxs.png
new file mode 100644
index 0000000..b75a355
Binary files /dev/null and b/images/robloxs.png differ
diff --git a/images/tech.png b/images/tech.png
new file mode 100644
index 0000000..55c8a25
Binary files /dev/null and b/images/tech.png differ
diff --git a/images/youtubes.png b/images/youtubes.png
new file mode 100644
index 0000000..4acfa29
Binary files /dev/null and b/images/youtubes.png differ
diff --git a/index.html b/index.html
index 988d635..ba162d2 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -9,36 +8,245 @@
     <title>Quiz Game - Home Page</title>
 
     <link rel="stylesheet" href="./css/index.css" />
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
-      <link rel="icon" type="image/x-icon" href="./images/Main.ico">
+
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
+    <link rel="icon" type="image/x-icon" href="./images/Main.ico" />
     <!-- Google Analytics -->
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-55DLRTJ04T"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-55DLRTJ04T"
+    ></script>
+    <div id="topbanner">
+      <a href="index.html" id="kendallhome">KendallDoesCoding</a>
+    </div>
+    <h1 id="test-your">Test Yours</h1>
+    <h2 id="desc">
+      We offer a diverse array of engaging quizzes spanning various subjects,
+      from trivia to video games. Challenge yourself with interactive questions
+      and beat your high score. Dive into a world of knowledge and discover new
+      interests.
+    </h2>
+    <a href="./pages/game.html"
+      ><div id="mainsample">
+        <h1 id="sample">Try a sample</h1>
+        <h1 id="arrow">></h1>
+      </div></a
+    >
+
+    <div id="semi-circle-div">
+      <h1 id="self">self.</h1>
+      <h2 id="desc1">es spanning various</h2>
+      <h2 id="desc2">nge yourself with</h2>
+      <h2 id="desc3">e. Dive into a world</h2>
+      <h2 id="desc4"></h2>
+      <div id="example">
+        <h1 id="question-example">1. What's the king of fruits?</h1>
+        <div id="div-option-1">
+          <h1 id="option-1">A. Mango</h1>
+          <div id="tick1"></div>
+          <div id="tick2"></div>
+        </div>
+        <div id="div-option-2">
+          <h1 id="option-2">B. Watermelon</h1>
+        </div>
+        <div id="div-option-3">
+          <h1 id="option-3">C. Peach</h1>
+        </div>
+        <div id="div-option-4">
+          <h1 id="option-4">D. Muskmelon</h1>
+        </div>
+      </div>
+    </div>
+    <div id="big-circle-div"></div>
+    <div id="small-circle-div"></div>
+    <div id="maindrop">
+      <div id="sidedrop">
+        <div id="home" class="flex-column flex-center">
+          <a href="./pages/game.html" class="btn">Play</a>
+          <a href="./pages/game.html" class="btn1">🎮</a>
+          <a href="./pages/topics.html" id="topics-btn" class="btn">Topics </a>
+          <a href="./pages/topics.html" id="topics-btn1" class="btn1">📜</a>
+          <a href="./pages/highscores.html" id="highscore-btn" class="btn"
+            >Leaderboard</a
+          >
+          <a href="./pages/highscores.html" id="highscore-btn1" class="btn1"
+            >🥇</a
+          >
+
+          <a href="./pages/rules.html" id="rules-btn" class="btn">Rules</a>
+
+          <a href="./pages/rules.html" id="rules-btn1" class="btn1">📝</a>
+          <a href="./pages/suggestion.html" id="suggestion-btn" class="btn"
+            >Suggestions</a
+          >
+          <a href="./pages/suggestion.html" id="suggestion-btn1" class="btn1"
+            >✍️</a
+          >
+
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn"
+            class="btn"
+            >Releases</a
+          >
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn1"
+            class="btn1"
+            >🗂️</a
+          >
+        </div>
+      </div>
+      <div id="drop1"></div>
+      <div id="drop2"></div>
+      <div id="drop3"></div>
+    </div>
+    <div id="home-second-part">
+      <h1 id="explore">Explore.</h1>
+      <div id="fruit-quiz">
+        <h1 id="fruit-txt">Fruit Quiz</h1>
+        <img src="images/fruits.png" alt="Fruit.png" id="fruit-png" />
+
+        <a href="./pages/fruit/game.html"
+          ><div id="playbutton-1">
+            <h1 id="play-now-1">Play now</h1>
+            <h1 id="arrow-1">></h1>
+          </div></a
+        >
+      </div>
+      <div id="christmas-quiz">
+        <h1 id="christmas-txt">Christmas Quiz</h1>
+        <img src="images/christmas.png" alt="Fruit.png" id="christmas-png" />
+
+        <a href="./pages/christmas/game.html"
+          ><div id="playbutton-2">
+            <h1 id="play-now-2">Play now</h1>
+            <h1 id="arrow-2">></h1>
+          </div></a
+        >
+      </div>
+      <div id="football-quiz">
+        <h1 id="football-txt">Football Quiz</h1>
+        <img src="images/football.png" alt="Fruit.png" id="football-png" />
+
+        <a href="./pages/football/game.html"
+          ><div id="playbutton-3">
+            <h1 id="play-now-3">Play now</h1>
+            <h1 id="arrow-3">></h1>
+          </div></a
+        >
+      </div>
+      <div id="roblox-quiz">
+        <h1 id="roblox-txt">Roblox Quiz</h1>
+        <img src="images/roblox.png" alt="Fruit.png" id="roblox-png" />
+
+        <a href="./pages/roblox/game.html"
+          ><div id="playbutton-4">
+            <h1 id="play-now-4">Play now</h1>
+            <h1 id="arrow-4">></h1>
+          </div></a
+        >
+      </div>
+
+      <a href="./pages/topics.html"><h1 id="find-more">...and more!</h1></a>
+    </div>
+    <div id="home-third-part">
+      <div id="home-third-part-first">
+        <div id="home-third-part-text">
+          <h1 id="nine-hun">+900</h1>
+          <div id="home-third-part-first-arrow">
+            <div id="home-third-part-first-arrow-first"></div>
+            <div id="home-third-part-first-arrow-second"></div>
+            <div id="home-third-part-first-arrow-third"></div>
+          </div>
+          <h1 id="one-hun">-100</h1>
+          <div id="home-third-part-second-arrow">
+            <div id="home-third-part-second-arrow-first"></div>
+            <div id="home-third-part-second-arrow-second"></div>
+            <div id="home-third-part-second-arrow-third"></div>
+          </div>
+          <h1 id="five-hun">+500</h1>
+          <div id="home-third-part-third-arrow">
+            <div id="home-third-part-third-arrow-first"></div>
+            <div id="home-third-part-third-arrow-second"></div>
+            <div id="home-third-part-third-arrow-third"></div>
+          </div>
+        </div>
+        <div id="home-third-part-first-curved">
+          <h1 id="earn-points">Earn Points.</h1>
+          <h2 id="earn-points-desc">
+            Earn points by getting questions correct- the more you get right,
+            the more points you get!<br />
+            But beware, each wrong answer will cost you.
+          </h2>
+        </div>
+      </div>
+      <div id="home-third-part-second">
+        <div id="home-third-part-second-curved">
+          <h1 id="get-ranked">Get Ranked.</h1>
+          <h2 id="get-ranked-desc">
+            As you continue gaining points, you will also be able to get ranked
+            on a leader board! Create your high score!
+          </h2>
+          <a href="./pages/highscores.html"
+            ><div id="home-third-part-second-button">
+              <h1 id="leaderboard-button">Leaderboard</h1>
+              <h1 id="leaderboard-arrow">></h1>
+            </div></a
+          >
+        </div>
+        <img src="images/king.png" alt="king.png" id="king-png" />
+        <div id="leaderboard-sample-main">
+          <h1 id="leaderboard-sample-1">1.</h1>
+          <h1 id="neev-j">Neev J</h1>
+          <img src="images/king.png" alt="king.png" id="king-png-small" />
+          <h1 id="five-thou-one-hun">+5100</h1>
+        </div>
+        <div id="leaderboard-sample-main-2">
+          <h1 id="leaderboard-sample-2">2.</h1>
+          <h1 id="oscar-w">Oscar W</h1>
+          <h1 id="five-thou">+5000</h1>
+        </div>
+        <div id="leaderboard-sample-main-3">
+          <h1 id="leaderboard-sample-3">3.</h1>
+          <h1 id="martin-s">Martin S</h1>
+          <h1 id="four-thou-nine">+4900</h1>
+        </div>
+      </div>
+    </div>
+    <script src="index.js"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
       }
-      gtag('js', new Date());
+      gtag("js", new Date());
 
-      gtag('config', 'G-55DLRTJ04T');
+      gtag("config", "G-55DLRTJ04T");
     </script>
     <!-- Google Tag Manager -->
     <script>
       (function (w, d, s, l, i) {
         w[l] = w[l] || [];
         w[l].push({
-          'gtm.start': new Date().getTime(),
-          event: 'gtm.js',
+          "gtm.start": new Date().getTime(),
+          event: "gtm.js",
         });
         var f = d.getElementsByTagName(s)[0],
           j = d.createElement(s),
-          dl = l != 'dataLayer' ? '&l=' + l : '';
+          dl = l != "dataLayer" ? "&l=" + l : "";
         j.async = true;
-        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
         f.parentNode.insertBefore(j, f);
-      })(window, document, 'script', 'dataLayer', 'GTM-TR6RS2G');
+      })(window, document, "script", "dataLayer", "GTM-TR6RS2G");
     </script>
     <!-- End Google Tag Manager -->
   </head>
@@ -47,33 +255,19 @@
     <div id="issue-embed"></div>
     <script src="https://cdn.issueembed.dev/v1/issue-embed.min.js"></script>
     <script>
-      issueEmbed.init('#issue-embed', {
-        key: '66893659-ea5a-4066-be0a-7bcc5586a0bb',
+      issueEmbed.init("#issue-embed", {
+        key: "66893659-ea5a-4066-be0a-7bcc5586a0bb",
       });
     </script>
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TR6RS2G" height="0" width="0"
-        style="display: none; visibility: hidden"></iframe></noscript>
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-TR6RS2G"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
     <!-- End Google Tag Manager (noscript) -->
-
-    <h1>Are you Ready?</h1>
-    <div id="home" class="flex-column flex-center">
-      <a href="./pages/game.html" class="btn">Play <i class="fas fa-play-circle"></i></a>
-
-      <a href="./pages/topics.html" id="topics-btn" class="btn">Topics
-      </a>
-
-      <a href="./pages/highscores.html" id="highscore-btn" class="btn">High Scores <i class="fas fa-crown"></i></a>
-
-      <a href="./pages/rules.html" id="rules-btn" class="btn">Rules & Info <i class="fas fa-info-circle"></i></a>
-      
-      <a href="./pages/suggestion.html" id="suggestion-btn" class="btn">Question Suggestion <i
-          class="fas fa-edit"></i></a>
-
-      <a href="https://github.com/KendallDoesCoding/quiz/releases" target="_blank" id="releases-btn"
-        class="btn">Releases & Updates
-      </a>
-    </div>
   </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/js/QuizClass.js b/js/QuizClass.js
index a065629..3b98305 100644
--- a/js/QuizClass.js
+++ b/js/QuizClass.js
@@ -14,11 +14,11 @@ export class Quiz {
     this.canClick = true;
     this.noOfCorrect = 0;
     this.TOTAL_CORRECT = 0;
-    
     this.correctStreak = 0; // Tracks consecutive correct answers
     this.startTime = 0; // Stores the start time of each question
     // runs here because we want to load the first round of questions
     this._renderNewQuestion();
+    
   }
 
   _newQuestion() {
@@ -38,7 +38,10 @@ export class Quiz {
     const currentQA = this.QUESTIONS_AMOUNT - leftQA;
     const paragraph = document.getElementById("progressText");
 
-    paragraph.textContent = `Question ${currentQA} of ${this.QUESTIONS_AMOUNT}`;
+    paragraph.textContent = `0${currentQA}/${this.QUESTIONS_AMOUNT}`;
+      if (currentQA > 9){
+     paragraph.textContent = `${currentQA}/${this.QUESTIONS_AMOUNT}`;
+   }
   }
 
   _renderNewQuestion() {
@@ -82,11 +85,13 @@ export class Quiz {
 
   checkAnswer(selected = 0, correct = 0) {
     const p = document.querySelector(`[data-number="${selected}"]`);
-
+    
     if (!this.canClick) {
       return;
     }
 
+ 
+
     if (selected === correct) {
       p.parentElement.classList.add("correct");
       this.score += this.QUESTION_VALUE;
@@ -96,11 +101,15 @@ export class Quiz {
       this.updateStreak();
       document.getElementById('score').classList.add('green-score');
       document.getElementById('addPoints').style.display = 'block';
+      console.log(p.parentElement)
+      p.parentElement.style.backgroundColor = 'green';
+
     } else {
       p.parentElement.classList.add("incorrect");
       this.score -= this.QUESTION_VALUE;
       document.getElementById('score').classList.add('red-score');
       document.getElementById('subPoints').style.display = 'block';
+      p.parentElement.style.backgroundColor = 'red';
     }
 
     document.getElementById("score").textContent = this.score;
@@ -116,6 +125,7 @@ export class Quiz {
       document.getElementById('score').classList.remove('red-score');
       document.getElementById('subPoints').style.display = 'none';
       document.getElementById('addPoints').style.display = 'none';
+       p.parentElement.style.backgroundColor = 'black';
     }, 600);
   }
 
diff --git a/js/end.js b/js/end.js
index 2564062..085829d 100644
--- a/js/end.js
+++ b/js/end.js
@@ -39,3 +39,4 @@ saveHighScore = (e) => {
 function goBack(n) {
   history.go(n);
 }
+
diff --git a/js/highscores.js b/js/highscores.js
index bd753bd..2c90cb3 100644
--- a/js/highscores.js
+++ b/js/highscores.js
@@ -1,8 +1,40 @@
 const highScoresList = document.querySelector("#highScoresList");
+
 const highScores = JSON.parse(localStorage.getItem("highScores")) || [];
 
 highScoresList.innerHTML = highScores
+
   .map((score) => {
-    return `<li class="high-score">${score.name} - ${score.score}</li>`;
+    if(score.score > 0){
+       return `<li class="high-score">
+       <span class="player-name">${score.name}</span>
+       <span class="player-score">+${score.score}</span>
+    </li>`
+
+    } else {
+      return `<li class="high-score">
+      <span class="player-name">${score.name}</span>
+      <span class="player-score">${score.score}</span>
+   </li>`
+    }
+   
   })
   .join("");
+  function createConfetti() {
+    const colors = ['#ff0000', '#00ff00', '#0000ff']; // Add more colors if needed
+    const confetti = document.createElement('div');
+    confetti.classList.add('confetti');
+    confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+    confetti.style.left = Math.random() * window.innerWidth + 'px';
+    confetti.style.animationDuration = (Math.random() * 3 + 2) + 's'; // Random duration between 2 and 5 seconds
+    confetti.style.animationDelay = -Math.random() * 5 + 's'; // Random delay up to 5 seconds
+    document.querySelector('.confetti-container').appendChild(confetti);
+  
+    // Remove confetti after animation ends
+    confetti.addEventListener('animationend', () => {
+      confetti.remove();
+    });
+  }
+  
+  // Generate confetti every 0.5 seconds
+  setInterval(createConfetti, 1000);
diff --git a/js/songs.js b/js/songs.js
index 35cf838..62295b1 100644
--- a/js/songs.js
+++ b/js/songs.js
@@ -14,7 +14,7 @@ var songs = [
 
   var audioElement = document.getElementById('my_audio');
   var musicOnButton = document.getElementById('musicOnButton');
-
+  var musicOffButton = document.getElementById('musicOffButton');
   function playMusic() {
     var randomIndex = Math.floor(Math.random() * songs.length);
     var audioSource = document.getElementById('audio_source');
@@ -27,16 +27,19 @@ var songs = [
         pauseMusic();
       });
       musicOnButton.style.display = 'none';
+      musicOffButton.style.display = 'block';
     }, { once: true });
 
     audioElement.addEventListener('pause', function() {
       musicOnButton.style.display = 'block';
+      musicOffButton.style.display = 'none';
     });
   }
 
   function pauseMusic() {
     audioElement.pause();
     musicOnButton.style.display = 'block';
+    musicOffButton.style.display = 'none';
   }
 
   function toggleMusic() {
diff --git a/pages/browsers/game.html b/pages/browsers/game.html
index 157803b..721c8fc 100644
--- a/pages/browsers/game.html
+++ b/pages/browsers/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Tech.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Browsers</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { browsersQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { browsersQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(browsersQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/christmas/game.html b/pages/christmas/game.html
index 82cd5e3..4bb19af 100644
--- a/pages/christmas/game.html
+++ b/pages/christmas/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Festival.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Christmas</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { xmasQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { xmasQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(xmasQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
-  <script src="/js/christmas-songs.js"></script>
+  <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/computer_parts/game.html b/pages/computer_parts/game.html
index 80a7be9..182a5ca 100644
--- a/pages/computer_parts/game.html
+++ b/pages/computer_parts/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Tech.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Computer Parts</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { computerpartsQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { computerpartsQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(computerpartsQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/countries/game.html b/pages/countries/game.html
index 248dda2..3be6707 100644
--- a/pages/countries/game.html
+++ b/pages/countries/game.html
@@ -9,19 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link
-      rel="icon"
-      type="image/x-icon"
-      href="../../images/General Knowledge.ico"
-    />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Countries</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { countriesQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { countriesQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(countriesQA);
 
@@ -38,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/disney/game.html b/pages/disney/game.html
index 881dc47..f787131 100644
--- a/pages/disney/game.html
+++ b/pages/disney/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Main.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Disney</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { disneyQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { disneyQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(disneyQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/easter/game.html b/pages/easter/game.html
index 60e2667..81e7aa3 100644
--- a/pages/easter/game.html
+++ b/pages/easter/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Festival.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Easter</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { easterQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { easterQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(easterQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/end.html b/pages/end.html
index 52f85a1..a6c223b 100644
--- a/pages/end.html
+++ b/pages/end.html
@@ -1,53 +1,106 @@
 <!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" />
 
-<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" />
+    <title>End Page</title>
 
-  <title>End Page</title>
+    <script src="../js/end.js" defer></script>
+    <link rel="stylesheet" href="../css/index.css" />
+    <link rel="stylesheet" href="../css/end.css" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
+  </head>
 
-  <script src="../js/end.js" defer></script>
-  <link rel="stylesheet" href="../css/index.css" />
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-    integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
-    <link rel="icon" type="image/x-icon" href="../images/Main.ico">
-</head>
+  <body>
+  
+  <div id="top-banner-end">
+    <a href="\index.html">
+      <i class="fas fa-home" id="house"></i>
+      <div id="back-home"></div>
+    </a>
+    <div id="maindrop">
+      <div id="sidedrop">
+        <div id="home" class="flex-column flex-center">
+          <a href="game.html" class="btn">Play</a>
+          <a href="game.html" class="btn1">🎮</a>
+          <a href="topics.html" id="topics-btn" class="btn">Topics </a>
+          <a href="topics.html" id="topics-btn1" class="btn1">📜</a>
+          <a href="highscores.html" id="highscore-btn" class="btn"
+            >Leaderboard</a
+          >
+          <a href="highscores.html" id="highscore-btn1" class="btn1">🥇</a>
 
-<body>
-  <div class="container">
+          <a href="rules.html" id="rules-btn" class="btn">Rules</a>
+
+          <a href="rules.html" id="rules-btn1" class="btn1">📝</a>
+          <a href="suggestion.html" id="suggestion-btn" class="btn"
+            >Suggestions</a
+          >
+          <a href="suggestion.html" id="suggestion-btn1" class="btn1">✍️</a>
+
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn"
+            class="btn"
+            >Releases</a
+          >
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn1"
+            class="btn1"
+            >🗂️</a
+          >
+        </div>
+      </div>
+      <div id="drop1"></div>
+      <div id="drop2"></div>
+      <div id="drop3"></div>
+    </div>
+  </div>
+  <div id="middle-container">
+<div class="container">
     <div id="end" class="flex-center flex-column">
       <h1 id="finalScore">0</h1>
+      
       <div style="color: white; font-size: 30px; margin-bottom: 1rem;">
-        <p>You got <span id="noScore" style="font-size: 30px;">0</span> correct. </p>
+        <p id="noScore-container">You got <span id="noScore">0</span> correct. </p>
 
       </div>
       <form class="end-form-container">
-        <h2 id="end-text">Enter your name below to save your score!</h2>
+       
         <input type="text" name="name" id="username" placeholder="Enter your name" />
 
         <button class="btn" id="saveScoreBtn" type="submit" onclick="saveHighScore(event)" disabled>
           Save
         </button>
       </form>
-
-      <p class="btn" onclick="goBack(-1)">Play Again</p>
-
-      <p onclick="goBack(-2)" class="btn" target="_blank">Go back to Quiz Home Page Menu<i class="fas fa-home"></i>
-      </p>
-      <a href="../pages/rating.html" class="btn" target="_blank">Please rate our quiz!<i class="far fa-star"></i></a>
+     <div id="divider-line"></div>
+      <p id="go-back-end" class="btn" onclick="goBack(-1)">Play again!</p>
+      <a href="../pages/rating.html" id="rate-quiz-end"class="btn" target="_blank">Rate our quiz!</a>
+      <a href="../pages/highscores.html" id="highscore-quiz-end"class="btn" target="_blank">See your highscores!</a>  
     </div>
   </div>
+  </div>
 </body>
+ 
 
-<script>
-  const totalScore = localStorage.getItem("noofquestions");
-  document.getElementById("totalScore").textContent = totalScore;
-
-  function goBack(n) {
-    history.go(n);
-  }
-</script>
+    <script>
+      const totalScore = localStorage.getItem("noofquestions");
+      document.getElementById("totalScore").textContent = totalScore;
 
+      function goBack(n) {
+        history.go(n);
+      }
+    </script>
+  </body>
 </html>
diff --git a/pages/football/game.html b/pages/football/game.html
index f5ffd8d..ec63044 100644
--- a/pages/football/game.html
+++ b/pages/football/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Game.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Football</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { footballQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { footballQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(footballQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/fruit/game.html b/pages/fruit/game.html
index 7de203d..8aa4a21 100644
--- a/pages/fruit/game.html
+++ b/pages/fruit/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Main.ico" />
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
+    <title>Quiz Page - Fruits</title>
 
-    <title>Quiz Page - Fruit</title>
-
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { fruitQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { fruitQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(fruitQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/game.html b/pages/game.html
index 657b1be..254599e 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -33,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/general_knowledge/game.html b/pages/general_knowledge/game.html
index 2b71e04..9f3074e 100644
--- a/pages/general_knowledge/game.html
+++ b/pages/general_knowledge/game.html
@@ -9,20 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link
-      rel="icon"
-      type="image/x-icon"
-      href="../../images/General Knowledge.ico"
-    />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - General Knowledge</title>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { generalQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { generalQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(generalQA);
 
@@ -39,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/highscores.html b/pages/highscores.html
index 72a08f0..d10ae7e 100644
--- a/pages/highscores.html
+++ b/pages/highscores.html
@@ -4,7 +4,6 @@
 given that the scores are not stored in any db I'd suppose the 1st is true-->
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -12,22 +11,114 @@
 
     <title>High Scores</title>
 
-    <link rel="icon" type="image/x-icon" href="../images/Main.ico">
-    <script src="../js/highscores.js" defer></script>
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
+
     <link rel="stylesheet" href="../css/index.css" />
     <link rel="stylesheet" href="../css/highscores.css" />
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
   </head>
 
   <body>
-    <div class="container">
-      <div id="highScores" class="flex-center flex-column">
-        <h1 id="finalScore">Leaderboard</h1>
-        <ul id="highScoresList"></ul>
-        <a href="../index.html" class="btn">Go Back to Main Quiz Menu<i class="fas fa-home"></i></a>
+    <div class="confetti-container">
+    <svg viewBox="0 0 500 100" xmlns="http://www.w3.org/2000/svg" id="svg">
+      <path
+        d="M 0 50 Q 50 10, 100 50 T 200 50 T 300 50 T 400 50 T 500 50"
+        id="path"
+      />
+    </svg>
+    <svg viewBox="0 0 500 100" xmlns="http://www.w3.org/2000/svg" id="svg1">
+      <path
+        d="M 0 50 Q 50 10, 100 50 T 200 50 T 300 50 T 400 50 T 500 50"
+        id="path1"
+      />
+    </svg>
+    <svg viewBox="0 0 500 100" xmlns="http://www.w3.org/2000/svg" id="svg2">
+      <path
+        d="M 0 50 Q 50 10, 100 50 T 200 50 T 300 50 T 400 50 T 500 50"
+        id="path2"
+      />
+    </svg>
+    <div id="top-banner-highscores">
+      <a href="\index.html">
+        <i class="fas fa-home" id="house"></i>
+        <div id="back-home"></div>
+      </a>
+      <h1 id="Leaderboard">Leaderboard</h1>
+    </div>
+    <div id="highScores" class="flex-center flex-column">
+      <ol id="highScoresList"></ol>
+    </div>
+    <div id="confetti-thrower-semi-circle"></div>
+    <div id="confetti-thrower"></div>
+    <div id="squiggy-line-1"></div>
+    <div id="squiggy-line-2"></div>
+    <div id="squiggy-line-3"></div>
+    <div id="confetti-thrower-1"></div>
+    <div id="confetti-thrower-2"></div>
+    <div id="confetti-thrower-3"></div>
+    <div id="confetti-thrower-4"></div>
+    <div id="leaderboard-container">
+      <div id="leaderboard-container-1">
+        <div id="confetti-1"></div>
+        <div id="confetti-2"></div>
+        <div id="confetti-3"></div>
+        <div id="confetti-4"></div>
+        <div id="confetti-5"></div>
+        <div id="confetti-6"></div>
+        <div id="confetti-7"></div>
+        <div id="confetti-8"></div>
+        <div id="confetti-9"></div>
       </div>
+      <div id="leaderboard-container-2"></div>
+      <div id="leaderboard-container-3"></div>
+      <div id="leaderboard-container-4"></div>
+      <div id="leaderboard-container-5"></div>
     </div>
-  </body>
+    <div id="maindrop">
+      <div id="sidedrop">
+        <div id="home" class="flex-column flex-center">
+          <a href="game.html" class="btn">Play</a>
+          <a href="game.html" class="btn1">🎮</a>
+          <a href="topics.html" id="topics-btn" class="btn">Topics </a>
+          <a href="topics.html" id="topics-btn1" class="btn1">📜</a>
+          <a href="highscores.html" id="highscore-btn" class="btn"
+            >Leaderboard</a
+          >
+          <a href="highscores.html" id="highscore-btn1" class="btn1">🥇</a>
 
+          <a href="rules.html" id="rules-btn" class="btn">Rules</a>
+
+          <a href="rules.html" id="rules-btn1" class="btn1">📝</a>
+          <a href="suggestion.html" id="suggestion-btn" class="btn"
+            >Suggestions</a
+          >
+          <a href="suggestion.html" id="suggestion-btn1" class="btn1">✍️</a>
+
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn"
+            class="btn"
+            >Releases</a
+          >
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn1"
+            class="btn1"
+            >🗂️</a
+          >
+        </div>
+      </div>
+      <div id="drop1"></div>
+      <div id="drop2"></div>
+      <div id="drop3"></div>
+    </div>
+  </body>
+  <script src="../js/highscores.js" defer></script>
 </html>
diff --git a/pages/jaidenanimations/game.html b/pages/jaidenanimations/game.html
index 4f55491..e8c4ca9 100644
--- a/pages/jaidenanimations/game.html
+++ b/pages/jaidenanimations/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Youtube.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Jaiden Animations</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { JaidenAnimationsQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { JaidenAnimationsQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(JaidenAnimationsQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/kendall-quiz/game.html b/pages/kendall-quiz/game.html
index c03d3f0..deaafee 100644
--- a/pages/kendall-quiz/game.html
+++ b/pages/kendall-quiz/game.html
@@ -9,16 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Main.ico" />
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
+    <title>Quiz Page - Kendall's Quiz</title>
 
-    <title>Quiz Page - How Well Do You Know Kendall Quiz</title>
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { kendallQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { kendallQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(kendallQA);
 
@@ -35,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/minecraft/game.html b/pages/minecraft/game.html
index 1cc1637..3bd7c4f 100644
--- a/pages/minecraft/game.html
+++ b/pages/minecraft/game.html
@@ -9,16 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Game.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Minecraft</title>
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { minecraftQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { minecraftQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(minecraftQA);
 
@@ -35,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/presidents/game.html b/pages/presidents/game.html
index f0176d4..749c209 100644
--- a/pages/presidents/game.html
+++ b/pages/presidents/game.html
@@ -9,19 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Presidents</title>
-    <link
-      rel="icon"
-      type="image/x-icon"
-      href="../../images/General Knowledge.ico"
-    />
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { presidentsQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { presidentsQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(presidentsQA);
 
@@ -38,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/programming_language/game.html b/pages/programming_language/game.html
index 1a37ee7..f16a04b 100644
--- a/pages/programming_language/game.html
+++ b/pages/programming_language/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Tech.ico" />
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
+    <title>Quiz Page - Programming Languages</title>
 
-    <title>Quiz Page - Programming Language</title>
-
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { ProgramminglanguageQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { ProgramminglanguageQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(ProgramminglanguageQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/roblox/game.html b/pages/roblox/game.html
index 7441562..c22efad 100644
--- a/pages/roblox/game.html
+++ b/pages/roblox/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Game.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Roblox</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { robloxQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { robloxQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(robloxQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/rules.html b/pages/rules.html
index 25595a9..7957611 100644
--- a/pages/rules.html
+++ b/pages/rules.html
@@ -1,64 +1,126 @@
 <!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">
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Rules</title>
     <link rel="stylesheet" href="../../css/index.css" />
     <link rel="stylesheet" href="../../css/rules.css" />
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
-      <link rel="icon" type="image/x-icon" href="../images/Main.ico">
 
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
   </head>
 
   <body>
-    <div class="intro">
-      <div class="back-btn">
-        <img class="dropdown" src="../images/arrow-down.png" />
-        <p class="go-back">Go back</p>
-      </div>
-
-    <h1>
-      Quiz Rules!
-
-      <p>
-        There are N questions in this quiz, For every right answer you get, you
-        receive 100 points, for every wrong answer you get, you get -100 points.
-      </p>
-      <p>
-        You can save you score to our website but for now, no-one else but you will
-        be able to see the scores
-      </p>
-      <h2>
-        We are working on making it possible for anyone to be able to see your score
-        so we can host competitions of this quiz.
-      </h2>
-
-      <h1>
-        Info
-        <p>
-          Just a heads up, if your on mobile, you can open up Spotify, Apple Music
-          or Youtube Music and not use our music section, because it will redirect
-          you to the mobile app of Youtube and will not let you do the quiz with the
-          music.
-        </p>
+    <svg viewBox="0 0 500 100" xmlns="http://www.w3.org/2000/svg">
+      <path d="M 0 50 Q 50 10, 100 50 T 200 50 T 300 50 T 400 50 T 500 50" />
+    </svg>
 
-        <h3>Thanks,</h3>
-        <h3>KendallDoesCoding</h3>
+    <div id="top-banner-rules">
+      <h1 id="quiz-rules">Quiz Rules</h1>
+      <a href="\index.html">
+        <i class="fas fa-home" id="house"></i>
+        <div id="back-home"></div
+      ></a>
+    </div>
+    <div id="bottom-rules">
+      <div id="left-rules">
+        <h1 id="QuizRules">Rules</h1>
+        <h1 id="QuizRules-1">Rules</h1>
+        <div id="sticky-note-1">
+          <h1 id="rule-number">#1</h1>
+          <h2 id="QuizRules-desc">
+            There are 'n' number of questions for each quiz.
+          </h2>
+        </div>
+        <div id="sticky-note-2">
+          <h1 id="rule-number">#2</h1>
+          <h2 id="QuizRules-desc-2">
+            Each correct answer gives you more points as you progress further
+            through the questions.
+          </h2>
+        </div>
+        <div id="sticky-note-3">
+          <h1 id="rule-number">#3</h1>
+          <h2 id="QuizRules-desc-1">
+            However, each incorrect answer will cost you 100 points.
+          </h2>
+        </div>
+        <div id="sticky-note-4">
+          <h1 id="rule-number">#4</h1>
+          <h2 id="have-fun">Have Fun!</h2>
+        </div>
+      </div>
+      <div id="right-rules">
+        <h1 id="ExtraInfo">Info</h1>
+        <h1 id="ExtraInfo-1">Info</h1>
+        <div id="circle-1">
+          <h2 id="ExtraInfo-desc">
+            You can save your score; however it won't be seen by any other user.
+          </h2>
+        </div>
+        <div id="circle-2">
+          <h2 id="note-desc">
+            Soon we'll make it possible to host competitions based on our
+            quizzes.
+          </h2>
+        </div>
+        <div id="circle-3">
+          <h2 id="ExtraInfo-desc-2">
+            Also, if you're on your mobile, you can always prefer to use music
+            from Spotify, Youtube Music or Apple Music directly instead of our
+            music.
+          </h2>
+        </div>
+      </div>
+    </div>
+    <div id="maindrop">
+      <div id="sidedrop">
+        <div id="home" class="flex-column flex-center">
+          <a href="game.html" class="btn">Play</a>
+          <a href="game.html" class="btn1">🎮</a>
+          <a href="topics.html" id="topics-btn" class="btn">Topics </a>
+          <a href="topics.html" id="topics-btn1" class="btn1">📜</a>
+          <a href="highscores.html" id="highscore-btn" class="btn"
+            >Leaderboard</a
+          >
+          <a href="highscores.html" id="highscore-btn1" class="btn1">🥇</a>
 
-    <footer>
-      <a href="../../index.html" class="btn" cursorshover="true">Go Home<i class="fas fa-home"
-          cursorshover="true"></i></a>
-    </footer>
-    </h1>
-    </h1>
+          <a href="rules.html" id="rules-btn" class="btn">Rules</a>
 
+          <a href="rules.html" id="rules-btn1" class="btn1">📝</a>
+          <a href="suggestion.html" id="suggestion-btn" class="btn"
+            >Suggestions</a
+          >
+          <a href="suggestion.html" id="suggestion-btn1" class="btn1">✍️</a>
 
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn"
+            class="btn"
+            >Releases</a
+          >
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn1"
+            class="btn1"
+            >🗂️</a
+          >
+        </div>
+      </div>
+      <div id="drop1"></div>
+      <div id="drop2"></div>
+      <div id="drop3"></div>
+    </div>
   </body>
 
   <script src="../js/rules.js"></script>
-
 </html>
diff --git a/pages/tech/game.html b/pages/tech/game.html
index d92df11..960c110 100644
--- a/pages/tech/game.html
+++ b/pages/tech/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Tech.ico" />
-
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <title>Quiz Page - Tech</title>
 
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { techQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { techQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(techQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/theodd1sout/game.html b/pages/theodd1sout/game.html
index a0ae965..2f06915 100644
--- a/pages/theodd1sout/game.html
+++ b/pages/theodd1sout/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Youtube.ico" />
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
+    <title>Quiz Page - Odd1sOut</title>
 
-    <title>Quiz Page - TheOdd1sOut</title>
-
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { TheOdd1sOutQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { TheOdd1sOutQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(TheOdd1sOutQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>
diff --git a/pages/topics.html b/pages/topics.html
index 802e65d..93fedfb 100644
--- a/pages/topics.html
+++ b/pages/topics.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -10,88 +9,232 @@
 
     <link rel="stylesheet" href="../css/index.css" />
     <link rel="stylesheet" href="../css/topics.css" />
-    <link rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
-      <link rel="icon" type="image/x-icon" href="../images/Main.ico">
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+      crossorigin="anonymous"
+    />
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
     <script src="../js/topics.js" defer></script>
   </head>
 
   <body>
-    <div class="intro">
-      <div class="back-btn">
-        <img class="dropdown" src="../images/arrow-down.png" />
-        <p class="go-back">Go back</p>
-      </div>
-      <h1>Quiz Topics</h1>
-      <p>Many more quiz topics coming soon!</p>
-      <p>Select Your Category</p>
+    <div id="top-banner-topics">
+      <h1 id="quiz-topics">Quiz Topics</h1>
+      <a href="\index.html">
+        <i class="fas fa-home" id="house"></i>
+        <div id="back-home"></div
+      ></a>
     </div>
 
-    <div id="home" class="flex-column">
-
-      <div id="technology" class="btn">
-        Technology
-        <img class="dropdown" src="../images/arrow-down.png" />
+    <div id="topics-part">
+      <div id="topics-browsers">
+        <img src="/images/browserss.png" alt="browsers.png" />
+        <h1 id="topics-text">Browsers</h1>
+        <a href="browsers/game.html">
+          <div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
       </div>
-      <div id="technologyMore" class="hide ">
-        <a href="./tech/index.html" id="tech-btn" class="btn">Tech Quiz <i class="fa fa-mobile"
-            aria-hidden="true"></i></a>
-        <a href="./browsers/index.html" id="browsers-btn" class="btn">Browsers Quiz</a>
-        <a href="./programming_language/index.html" id="programming-btn" class="btn">Programming Language Quiz</a>
-        <a href="./computer_parts/index.html" id="Computer-btn" class="btn">Computer Parts Quiz</a>
+      <div id="topics-christmas">
+        <img src="/images/chritmass.png" alt="christmas.png" />
+        <h1 id="topics-text">Christmas</h1>
+        <a href="christmas/game.html">
+          <div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
       </div>
-
-      <div id="games" class="btn">
-        Games
-        <img class="dropdown" src="../images/arrow-down.png" />
+      <div id="topics-computerParts">
+        <img src="/images/computerParts.png" alt="computerParts.png" />
+        <h1 id="topics-text">Computers</h1>
+        <a href="computer_parts/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
       </div>
-      <div id="gamesMore" class="hide ">
-        <a href="./minecraft/index.html" id="minecraft-btn" class="btn">Minecraft Quiz</a>
-        <a href="./roblox/index.html" id="roblox-btn" class="btn">Roblox Quiz</a>
-        <a href="./football/index.html" id="football-btn" class="btn">Football Quiz <i class="fas fa-futbol"></i></a>
+      <div id="topics-countries">
+        <img src="/images/countries.png" alt="countries.png" />
+        <h1 id="topics-text">Countries</h1>
+        <a href="countries/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
       </div>
-
-      <div id="festivals" class="btn">
-        Festivals
-        <img class="dropdown" src="../images/arrow-down.png" />
+      <div id="topics-disney">
+        <img src="/images/disney.png" alt="disney.png" />
+        <h1 id="topics-text">Disney</h1>
+        <a href="disney/game.html">
+          <div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-easter">
+        <img src="/images/easter.png" alt="easter.png" />
+        <h1 id="topics-text">Easter</h1>
+        <a href="easter/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-football">
+        <img src="/images/footballs.png" alt="football.png" />
+        <h1 id="topics-text">Football</h1>
+        <a href="football/game.html">
+          <div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-fruit">
+        <img src="/images/fruitss.png" alt="fruit.png" />
+        <h1 id="topics-text">Fruits</h1>
+        <a href="fruit/game.html">
+          <div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-gk">
+        <img src="/images/gk.png" alt="gk.png" />
+        <h1 id="topics-text">General Knowledge</h1>
+        <a href="general_knowledge/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-ja">
+        <img src="/images/ja.png" alt="ja.png" />
+        <h1 id="topics-text">Jaiden Animations</h1>
+        <a href="jaidenanimations/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-kq">
+        <img src="/images/kq.png" alt="kq.png" id="kendall-img" />
+        <h1 id="topics-text">Kendall</h1>
+        <a href="kendall-quiz/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
       </div>
-      <div id="festivalsMore" class="hide ">
-        <a href="./easter/index.html" id="easter-btn" class="btn">Easter Quiz <i class="fas fa-egg"
-            aria-hidden="true"></i></a>
-        <a href="./christmas/index.html" id="christmas-btn" class="btn">Christmas Quiz <i class="fas fa-gift"></i></a>
+      <div id="topics-mc">
+        <img src="/images/mc.png" alt="mc.png" />
+        <h1 id="topics-text">Minecraft</h1>
+        <a href="minecraft/game.html">
+          <div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
       </div>
+      <div id="topics-presidents">
+        <img src="/images/presidents.png" alt="presidents.png" />
+        <h1 id="topics-text">Presidents</h1>
+        <a href="presidents/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-pl">
+        <img src="/images/pl.png" alt="pl.png" />
+        <h1 id="topics-text">Programming</h1>
+        <a href="programming_language/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-roblox">
+        <img src="/images/robloxs.png" alt="roblox.png" />
+        <h1 id="topics-text">Roblox</h1>
+        <a href="roblox/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-tech">
+        <img src="/images/tech.png" alt="tech.png" />
+        <h1 id="topics-text">Technology</h1>
+        <a href="tech/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-o1o">
+        <img src="/images/o1o.png" alt="o1o.png" />
+        <h1 id="topics-text">Odd1sOut</h1>
+        <a href="theodd1sout/game.html">
+          <div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+      <div id="topics-youtube">
+        <img src="/images/youtubes.png" alt="youtube.png" />
+        <h1 id="topics-text">Youtube</h1>
+        <a href="youtube/game.html"
+          ><div id="topics-button">
+            <i class="arrow right"></i>
+            <div id="topics-pointer"></div></div
+        ></a>
+      </div>
+    </div>
+    <div id="maindrop">
+      <div id="sidedrop">
+        <div id="home" class="flex-column flex-center">
+          <a href="game.html" class="btn">Play</a>
+          <a href="game.html" class="btn1">🎮</a>
+          <a href="topics.html" id="topics-btn" class="btn">Topics </a>
+          <a href="topics.html" id="topics-btn1" class="btn1">📜</a>
+          <a href="highscores.html" id="highscore-btn" class="btn"
+            >Leaderboard</a
+          >
+          <a href="highscores.html" id="highscore-btn1" class="btn1">🥇</a>
+
+          <a href="rules.html" id="rules-btn" class="btn">Rules</a>
 
-      <div id="general" class="btn">
-        General Knowledge
-        <img class="dropdown" src="../images/arrow-down.png" />
-      </div>
-      <div id="generalMore" class="hide ">
-        <a href="./countries/index.html" id="country-btn" class="btn">Country Quiz</a>
-        <a href="./presidents/index.html" id="presidents-btn" class="btn">U.S Presidents Quiz <i
-            class="fas fa-flag-usa"></i></a>
-      </div>
-      <div id="youtube" class="btn">
-        YouTube
-        <img class="dropdown" src="../images/arrow-down.png" />
-      </div>
-      <div id="youtubeMore" class="hide ">
-        <a href="./youtube/index.html" id="youtube-btn" class="btn">YouTube Quiz<i class="fab fa-youtube"></i></a></a>
-        <a href="./theodd1sout/index.html" id="theodd1sout-btn" class="btn">TheOdd1sOut Quiz<i class="fas fa-user"></i></a></a>
-        <a href="./jaidenanimations/index.html" id="jaidenanimations-btn" class="btn">Jaiden Animations Quiz<i class="fas fa-user"></i></a></a>
-      </div>
-      <div id="others" class="btn">
-        Others
-        <img class="dropdown" src="../images/arrow-down.png" />
-      </div>
-      <div id="othersMore" class="hide ">
-        <a href="./disney/index.html" id="disney-btn" class="btn">Disney Quiz</a>
-        <a href="./fruit/index.html" id="fruit-btn" class="btn">Fruit Quiz <i class="fas fa-apple-alt"></i></a>
-        <a href="./kendall-quiz/index.html" id="hwdyk-btn" class="btn">How Well Do You Know Kendall Quiz<i
-            class="fas fa-question"></i></a>
+          <a href="rules.html" id="rules-btn1" class="btn1">📝</a>
+          <a href="suggestion.html" id="suggestion-btn" class="btn"
+            >Suggestions</a
+          >
+          <a href="suggestion.html" id="suggestion-btn1" class="btn1">✍️</a>
+
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn"
+            class="btn"
+            >Releases</a
+          >
+          <a
+            href="https://github.com/KendallDoesCoding/quiz/releases"
+            target="_blank"
+            id="releases-btn1"
+            class="btn1"
+            >🗂️</a
+          >
+        </div>
       </div>
+      <div id="drop1"></div>
+      <div id="drop2"></div>
+      <div id="drop3"></div>
     </div>
   </body>
-
 </html>
diff --git a/pages/youtube/game.html b/pages/youtube/game.html
index e6723e4..78ffd28 100644
--- a/pages/youtube/game.html
+++ b/pages/youtube/game.html
@@ -9,15 +9,14 @@
       integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
       crossorigin="anonymous"
     />
-    <link rel="icon" type="image/x-icon" href="../../images/Youtube.ico" />
+    <link rel="icon" type="image/x-icon" href="../images/Main.ico" />
+    <title>Quiz Page - Youtube</title>
 
-    <title>Quiz Page - YouTube</title>
-
-    <link rel="stylesheet" href="../../css/index.css" />
-    <link rel="stylesheet" href="../../css/game.css" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="stylesheet" href="/css/game.css" />
     <script type="module" defer>
-      import { youtubeQA } from "../../js/data/index.js";
-      import { Quiz } from "../../js/QuizClass.js";
+      import { youtubeQA } from "/js/data/index.js";
+      import { Quiz } from "/js/QuizClass.js";
 
       const QuizInstance = new Quiz(youtubeQA);
 
@@ -34,59 +33,82 @@
 
   <body>
     <div class="container">
-      <div id="game" class="justify-center flex-column">
+      <div id="topbanner-game">
         <div id="hud">
-          <div class="hud-item">
-            <p id="progressText" class="hud-prefix">Question</p>
-            <div id="progressBar">
-              <div id="progressBarFull"></div>
-            </div>
+        <div class="hud-item">
+          <div id="progressText-container"><p id="progressText" class="hud-prefix"></p></div>
+          <div id="progressBar">
+            <div id="progressBarFull"></div>
           </div>
-          <div class="hud-item">
-            <p class="hud-prefix">Score</p>
+        </div>
+        <div class="hud-item">
+          <p class="hud-prefix">Score:</p>
+          <div id="hud-main-text-container">
             <h1 class="hud-main-text" id="score">0</h1>
-            <p id="addPoints" class="hud-item"></p>
-            <p id="subPoints" class="hud-item">-100</p>
           </div>
+          <p id="addPoints" class="hud-item"></p>
+          <p id="subPoints" class="hud-item">-100</p>
+        </div> 
+      </div>
+      <div class="music">
+        <audio loop="loop" id="my_audio" preload="auto" autoplay>
+          <source id="audio_source" src="" type="audio/mpeg" />
+        </audio>
+        
+        <div class="music-container flex-center flex-row" id="music-container">
+          <a onclick="toggleMusic()" class="button1" id="button1">
+            <i
+              class="fas fa-light fa-volume-up"
+              id="musicOnButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
+          <a onclick="pauseMusic()" class="button2" id="button2">
+            <i
+              class="fas fa-light fa-volume-mute"
+              id="musicOffButton"
+              style="color: #ffffff"
+            ></i
+          ></a>
         </div>
-        <h1 id="question">What is the answer to this question</h1>
-        <div class="choice-container">
-          <p class="choice-prefix">A</p>
-          <p class="choice-text" data-number="1">Choice</p>
+      </div>
+      <a href="\index.html">
+        <i
+          class="fas fa-home"
+          id="house"
+        ></i
+        
+      ><div id="back-home"></div></a>
+      
+        
+    
+    </div>
+      <div id="bottombanner-game">
+        <h1 id="bonne-chance-1">BONNE CHANCE!</h1>
+        <h1 id="bonne-chance-2">BONNE CHANCE!</h1>
+      </div>
+      <div id="game" class="justify-center flex-column">
+        
+        <h1 id="question"></h1>
+        <div class="choice-container" >
+          <p class="choice-prefix">A.</p>
+          <p class="choice-text" data-number="1" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">B</p>
-          <p class="choice-text" data-number="2">Choice 2</p>
+        <div class="choice-container" id="choice-container-2" >
+          <p class="choice-prefix">B.</p>
+          <p class="choice-text" data-number="2" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">C</p>
-          <p class="choice-text" data-number="3">Choice 3</p>
+        <div class="choice-container"  id="choice-container-3">
+          <p class="choice-prefix">C.</p>
+          <p class="choice-text" data-number="3" ></p>
         </div>
-        <div class="choice-container">
-          <p class="choice-prefix">D</p>
-          <p class="choice-text" data-number="4">Choice 4</p>
+        <div class="choice-container" id="choice-container-4">
+          <p class="choice-prefix">D.</p>
+          <p class="choice-text" data-number="4" ></p>
         </div>
       </div>
-    </div>
-    <div class="music">
-      <audio loop="loop" id="my_audio" preload="auto" autoplay>
-        <source id="audio_source" src="" type="audio/mpeg" />
-      </audio>
-
-      <div class="music-container flex-center flex-row">
-        <a
-          onclick="toggleMusic()"
-          class="button1"
-          id="musicOnButton"
-          style="display: none"
-        >
-          Music On <i class="fas fa-light fa-headphones"></i
-        ></a>
-        <a onclick="pauseMusic()" class="button2">
-          Music Off <i class="fas fa-light fa-volume-off"></i
-        ></a>
-      </div>
-    </div>
+      
+   
   </body>
   <script src="/js/songs.js"></script>
 </html>