diff --git a/index.html b/index.html
index 8f48104..88087d0 100644
--- a/index.html
+++ b/index.html
@@ -8,9 +8,16 @@
   <meta name="viewport"
     content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
   <link rel="stylesheet" href="./style.css">
+ 
+
+</head>
+
+<body>
+
   <!--Link form FontAwesome for volume icon, info icon, left arrow icon-->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
 </head>
+ 
 
 <body>
   <header class="ui__header header">
@@ -47,11 +54,35 @@
   <script src="script1.js"></script>
 
   <div class="ui">
+ 
+    <div class="navbar">
+      <ul>
+        <li><a href="">Home</a></li>
+        <li><a href="">Leaderboard</a></li>
+        <li><a href="">Settings</a></li>
+        <li>
+          <div class="g_id_signin" data-type="standard"></div>
+        </li>
+      </ul>
+    </div>
+
+ 
 
     <div class="ui__background"></div>
 
     <div class="ui__game"></div>
 
+ 
+    <div class="ui__texts">
+      <h1 class="text text--title">
+        <span>Let's</span>
+        <span>Solve!</span>
+      </h1>
+      <div class="text text--note">
+        Double tap to start
+      </div>
+      <div class="text text--timer">
+
     <div class="ui__texts" id="ui_texts">
       <h1 class="text text--title">
         <span>Let's</span>
@@ -63,6 +94,7 @@ <h1 class="text text--title">
       
       <div class="text text--timer">
         <h1> TIME START NOW</h1> 
+ 
         0:00
       </div>
       <div class="text text--complete">
@@ -72,6 +104,68 @@ <h1> TIME START NOW</h1>
         <icon trophy></icon>
         <span>Best Time!</span>
       </div>
+ 
+    </div>
+
+    <div class="ui__prefs">
+      <range name="size" title="Cube Size" list="2,3,4,5"></range>
+      <range name="flip" title="Flip Type" list="Swift&nbsp;,Smooth,Bounce"></range>
+      <range name="scramble" title="Scramble Length" list="20,25,30"></range>
+      <range name="fov" title="Camera Angle" list="Ortographic,Perspective"></range>
+      <range name="theme" title="Color Scheme" list="Cube,Erno,Dust,Camo,Rain"></range>
+    </div>
+
+    <div class="ui__theme">
+      <range name="hue" title="Hue" color></range>
+      <range name="saturation" title="Saturation" color></range>
+      <range name="lightness" title="Lightness" color></range>
+    </div>
+
+    <div class="ui__stats">
+
+      <div class="stats" name="cube-size">
+        <i>Cube:</i><b>3x3x3</b>
+      </div>
+      <div class="stats" name="total-solves">
+        <i>Total solves:</i><b>-</b>
+      </div>
+      <div class="stats" name="best-time">
+        <i>Best time:</i><b>-</b>
+      </div>
+      <div class="stats" name="worst-time">
+        <i>Worst time:</i><b>-</b>
+      </div>
+      <div class="stats" name="average-5">
+        <i>Average of 5:</i><b>-</b>
+      </div>
+      <div class="stats" name="average-12">
+        <i>Average of 12:</i><b>-</b>
+      </div>
+      <div class="stats" name="average-25">
+        <i>Average of 25:</i><b>-</b>
+      </div>
+
+    </div>
+
+    <div class="ui__buttons">
+      <button class="btn btn--bl btn--stats">
+        <icon trophy></icon>
+      </button>
+      <button class="btn btn--br btn--prefs">
+        <icon settings></icon>
+      </button>
+      <button class="btn btn--tl btn--back">
+        <icon back></icon>
+      </button>
+      <button class="btn btn--br btn--theme">
+        <icon theme></icon>
+      </button>
+      <button class="btn btn--br btn--reset">
+        <icon reset></icon>
+      </button>
+    </div>
+
+
       
 
 
@@ -259,10 +353,17 @@ <h1 class="text text--title">
       <source src="Music/8 Bit Space Groove! Chill Pretty Chiptune Game Music by HeatleyBros.mp3" type="audio/mpeg">
     </audio>
 
+ 
   </div>
   <!-- partial -->
   <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js'></script>
   <script src="./script.js"></script>
+ 
+
+</body>
+
+</html>
+
   <script src="progress.js"></script>
   
 
@@ -294,3 +395,4 @@ <h2>2. Changing the view of the cube</h2>
 </body>
 
 </html>
+ 
diff --git a/style.css b/style.css
index 85ec635..4326119 100644
--- a/style.css
+++ b/style.css
@@ -320,6 +320,7 @@ body {
   line-height: 0.75;
   perspective: 100rem;
   opacity: 0;
+
 }
 
 .text i {
@@ -341,6 +342,7 @@ body {
 .text--title span:first-child {
   font-size: 0.5em;
   margin-bottom: 0.2em;
+  margin-top: 28px;
 }
 
 .text--note {
@@ -489,6 +491,7 @@ body {
 .ui {
   pointer-events: none;
   color: #070d15;
+  
 }
 
 .ui,
@@ -530,6 +533,7 @@ body {
 .ui__game {
   pointer-events: all;
   z-index: 2;
+  background: linear-gradient(to bottom, #fffffff0, #7dadb7f0);
 }
 
 .ui__game canvas {
@@ -611,6 +615,43 @@ body {
  
 /* styling element for the goggle login option to be placed at the top right corner of the webpage. */
 
+ 
+.navbar .g_id_signin {
+  position: relative;
+  z-index: 160;
+}
+
+/* styling the navbar issue Back option on leaderboad page #112      */
+
+.navbar{
+  border: 1px solid white;
+  width: 80vw;
+  position: relative;
+  justify-content: center;
+  z-index: 15;
+  align-items: center;
+  margin: auto;
+  border-radius: 40px;
+  padding: 20px 0;
+  background: linear-gradient(to bottom, #fffffff0, #7ba9b3f0);
+}
+.navbar ul{
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+.navbar ul li{
+  list-style: none;
+}
+a{
+  text-decoration: none;
+  color: black;
+  transition-duration: 0.3s;
+  width: 100%;
+  font-size: 0.7em;
+}
+
 .g_id_signin {
   margin-top: 20px;
 }
@@ -804,3 +845,4 @@ body {
     pointer-events: auto;
   }
 }
+ 
