diff --git a/.DS_Store b/.DS_Store
index 3c3ebdb..676b77d 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/css/style.css b/css/style.css
index 27e8057..f8abee7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -10,3 +10,20 @@
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 }
 
+html, body{
+    overflow-x: hidden;
+    align-items: center;
+}
+#fifth, #first, #second, #third, #fourth{
+    /* font-size: 30px; */
+    text-align : center;
+    /* font-size-adjust: initial; */
+    color: #000000;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    align-content: stretch;
+}
+#top5head{
+    background-color: #f0efc0;
+    align-content: center;
+}
+
diff --git a/index.html b/index.html
index 8443c40..1c7e366 100644
--- a/index.html
+++ b/index.html
@@ -49,18 +49,62 @@
 </center>
 
 
-<div id="top5_leaders" >
-  <center>
-    <div id = "top5" class="row" >
-      <div id="first" class="col" style="padding: 10px;"></div>
-      <div id="second" class="col" style="padding: 10px;"></div>
-      <div id="third"  class="col" style="padding: 10px;"></div>
-      <div id="fourth" class="col" style="padding: 10px;"></div>
-      <div id="fifth" class="col" style="padding: 10px;"></div>
-    </div>
-  </center>
+<div class="jumbotron-fluid" id="top5head">
+  <div class="container d-flex align-content-stretch flex-wrap">
+
+
+    <!-- <divclass="d-flex align-content-stretch flex-wrap"> -->
+      
+      <!-- <div class="row"  id="top5" > -->
+        <!-- <div class="col-lg-2 col-sm-4 col-xs-6"> -->
+         
+              <div id="first" style="padding: 10px;">
+              </div>
+           
+        <!-- </div> -->
+        <!-- <div class="row-sm-2"> -->
+              <div  id="second" style="padding: 10px;"></div>
+         <!-- </div> -->
+
+         <!-- <div class="row-sm-2"> -->
+          <div  id="third" style="padding: 10px;"></div>
+        <!-- </div> -->
+          <!-- <div class="row-sm-2"> -->
+              <div  id="fourth" style="padding: 10px;"></div>
+         <!-- </div> -->
+         <!-- <div class="row-sm-2"> -->
+          <div id="fifth" style="padding: 10px;"></div>
+        <!-- </div>  -->
+
+
+
+    <!-- </div> -->
 </div>
+</div>
+
 
+
+
+
+
+<!-- 
+
+<div id="top5_leaders" class="d-flex align-content-stretch flex-wrap">
+  
+    <div id = "top5" class="row" >
+       <div class="row row-lg-12 row-md-6 row-sm-3"> -->
+
+      
+      <!-- <div class="row row-lg-3 " id="first" style="padding: 10px;"></div> -->
+      <!-- <div class="row row-lg-3 " id="second"  style="padding: 10px;"></div>
+      <div class="row row-lg-3 " id="third"  style="padding: 10px;"></div>
+      <div class="row row-lg-3 " id="fourth"  style="padding: 10px;"></div>
+      <div class="row row-lg-3 " id="fifth"  style="padding: 10px;"></div> -->
+    <!-- </div> -->
+    <!-- </div> -->
+<!--   
+</div> --> 
+<div class="container d-flex align-content-stretch flex-wrap">
   <center><div id="loader">
     <img src="https://lingojam.com/img/loading_nice.gif" style="width: 15%;"/>
   </div></center>
@@ -69,7 +113,7 @@
     
   </table>
 </div>
-
+</div>
 <script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
index 59251c3..af38eb2 100644
--- a/main.js
+++ b/main.js
@@ -48,8 +48,8 @@ function addTop5images(arr){
    arr.sort(sortByPoints());
       var ids = ['first', 'second', 'third', 'fourth', 'fifth'];
       var div = document.getElementById("top5");
-      div.className = "row table table-success table-bordered table-hover border border-dark rounded w-100";
-      div.style = "font-size: 0.8em; font-weight: bold; align-self: auto; column-width:auto; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px;"
+      // div.className = "row table table-success table-bordered table-hover border border-dark rounded w-100";
+      // div.style = "font-size: 10px; font-weight: bold;  margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px;"
       
       for(var i=0;i<5;i++)
       {
@@ -57,8 +57,9 @@ function addTop5images(arr){
          div.innerHTML = '';
          var img = document.createElement('img'); 
          img.src = arr[i].img; 
-         img.style.height = '5em';
+         img.style.height='5em'
          img.style.width = '5em';
+         img.style.position ='center';
          div.appendChild(img);
          var breakl = document.createElement('br'); 
          div.appendChild(breakl);
@@ -68,15 +69,22 @@ function addTop5images(arr){
          div.append(markup);
          var breakl2 = document.createElement('br'); 
          div.appendChild(breakl2);
+         
          var markup2 = document.createElement('html');
-         markup2 = arr[i].username + " |" + arr[i].points + "|";
+         markup2 = arr[i].username;
+         
          div.append(markup2);
+         var breakl4 = document.createElement('br'); 
+         div.appendChild(breakl4);
+         var score= " |" + arr[i].points + "|";
+         div.append(score);
         var link = document.createElement('a');
          link.href = "search.html?q="+arr[i].username;
          var imgd = document.createElement('img'); 
          imgd.src = "./img/link.svg"; 
-         imgd.style.height = '1em';
-         imgd.style.width = '1em';
+         imgd.style.height = '0.5em';
+         imgd.style.width = '0.5em';
+        
          var breakl3 = document.createElement('br'); 
          div.appendChild(breakl3);
          link.appendChild(imgd);