diff --git a/public/index.html b/public/index.html
index 01609e1..c317615 100644
--- a/public/index.html
+++ b/public/index.html
@@ -185,6 +185,7 @@ <h4>Community Service</h4>
             </div>
           </div>
         </div>
+
         <div class="container py-0 py-xl-0">
           <h1 style="text-align: center; padding-top: 7vh;">
             Our Member Of The Month - May 2024
@@ -209,6 +210,12 @@ <h2 class="text-uppercase fw-bold">Saniya Nanu</h2>
           </div>
         </div>
         <div id="press-release-container" style="padding-top: 5vh; padding-bottom: 2vh; text-align: center;"></div>
+        <section>
+          <h1 class="py-xl-5" style="text-align: center;">
+            Volunteer Leaderboard
+          </h1>
+          <script type="module" src="src/leader.js"></script>
+        </section>
 
 <script>
   fetch('press_releases.json')
diff --git a/public/src/leader.js b/public/src/leader.js
new file mode 100644
index 0000000..56859a4
--- /dev/null
+++ b/public/src/leader.js
@@ -0,0 +1,165 @@
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js';
+import { getDatabase, ref, get, child } from 'https://www.gstatic.com/firebasejs/9.1.1/firebase-database.js';
+
+
+  function create_body() {
+    var lead_over_data = []
+    
+
+    // Create a div to hold the leaderboard
+    var leaderboard = document.createElement('div')
+    leaderboard.id = 'leaderboard'
+    document.body.appendChild(leaderboard)
+
+    // Get the firebase database value
+    const firebaseConfig = {
+        apiKey: "AIzaSyBSDW1sgJfpk0PAsbp7JRLHT14-CSL8F_0",
+        authDomain: "erhsfblaweb.firebaseapp.com",
+        databaseURL: "https://erhsfblaweb-default-rtdb.firebaseio.com",
+        projectId: "erhsfblaweb",
+        storageBucket: "erhsfblaweb.appspot.com",
+        messagingSenderId: "123112557466",
+        appId: "1:123112557466:web:6dd4db634f9dee8c378823",
+        measurementId: "G-8RT2TZHY8B"
+    };
+
+    // Initialize Firebase
+    var app = initializeApp(firebaseConfig);
+    var db = getDatabase(app);
+
+    get(child(ref(db), `1rSWiDsligRQFN25PMePdPlImUC1ZnpEo_W0VGerpXoU/Sheet1`)).then((snapshot) => {
+      if (snapshot.exists()) {
+        var num = snapshot.size + 1
+        var lead_data = []
+
+        for (var i, i = 1; (i < num); i++) {
+          var j = 1;
+
+          get(child(ref(db, '1rSWiDsligRQFN25PMePdPlImUC1ZnpEo_W0VGerpXoU/'), `Sheet1/${i}/Name`)).then((snapshot) => {
+            if (snapshot.exists()) {
+              /*var lead = document.createElement('div')
+              var lead_in = document.createElement('h2')
+              lead.setAttribute("style", "display: inline-block; width: 50%")
+              lead_in.innerHTML = j + " " + snapshot.val()
+              lead.innerHTML = lead_in.innerHTML
+              document.body.appendChild(lead)
+              j++*/
+              if (snapshot.val() != "") {
+                lead_data.push(snapshot.val())
+              }
+            } else {
+              console.log("No data available");
+            }
+          }).catch((error) => {
+            console.error(error);
+          });
+      
+          get(child(ref(db, '1rSWiDsligRQFN25PMePdPlImUC1ZnpEo_W0VGerpXoU/'), `Sheet1/${i}/Points`)).then((snapshot) => {
+            if (snapshot.exists()) {
+              /*var lead = document.createElement('div')
+              var lead_in = document.createElement('h2')
+              lead_in.innerHTML = snapshot.val()
+              lead.setAttribute("style", "display: inline-block; width: 50%")
+              lead.innerHTML = lead_in.innerHTML
+              document.body.appendChild(lead)
+              */
+              if (snapshot.val() != "") {
+                lead_data.push(snapshot.val())
+              }
+              j++;
+              if (j == (num-1)) {
+
+                var lead_over_container = document.createElement('div')
+
+                lead_over_container.setAttribute('class', 'tabs_content')
+                lead_over_container.setAttribute('data-tab', '2')
+                var label_container = document.createElement('div')
+                label_container.setAttribute('style', 'margin-left: 10%; margin-right: 15%; font-weight: bold')
+
+                var left_label_container = document.createElement('div')                
+                var place_label = document.createElement('p')
+                place_label.setAttribute('style', 'display: inline; padding-right: 65px; color: black; margin-bottom: 20px !important;')
+                place_label.innerHTML = "Rank"
+                var name_label = document.createElement('p')
+                name_label.setAttribute('style', 'display: inline; color: black; margin-bottom: 20px !important;')
+                name_label.innerHTML = "Name"
+                left_label_container.setAttribute('style', 'float: left')
+                left_label_container.append(place_label, name_label)
+
+                var right_label_container = document.createElement('div')
+                var hours_label = document.createElement('p')
+                hours_label.setAttribute('style', 'color: black; margin-bottom: 20px !important;')
+                hours_label.innerHTML = "Points"
+                right_label_container.setAttribute('style', 'text-align: right;')
+                right_label_container.append(hours_label)            
+
+                label_container.append(left_label_container, right_label_container)
+                lead_over_container.append(label_container)
+
+                for (var i = 0; i < lead_data.length; i+=3) {
+                  lead_over_data.push(lead_data[i])
+                  lead_over_data.push(lead_data[i+1])
+                  lead_over_data.push(lead_data[i+2])
+                }
+
+
+                var rank = 1
+                for (var i = 0; i < lead_over_data.length; i+=2) {
+                  var lead = document.createElement('div')
+                  lead.setAttribute('style', 'outline: 1px solid grey; margin-left: 10%;  outline-offset: 10px; margin-right: 15%; border-radius: 1px')
+                  /*var lead_in = document.createElement('h2')
+                  lead_in.setAttribute("style", "text-align: center")
+                  lead_in.innerHTML = rank + " " + lead_over_data[i] + " " + lead_over_data[i+1] + ": " + lead_over_data[i+2]
+                  lead.innerHTML = lead_in.innerHTML
+                  document.body.appendChild(lead)*/
+
+
+                  var left_container = document.createElement('div')
+                  var place = document.createElement('p')
+                  place.setAttribute('style', 'display: inline; padding-right: 100px; color: black; margin-bottom: 40px !important;')
+                  place.innerHTML = rank
+                  var name = document.createElement('p')
+                  name.setAttribute('style', 'display: inline; color: black; margin-bottom: 40px !important;')
+                  name.innerHTML = lead_over_data[i]
+
+                  left_container.setAttribute('style', 'float: left')
+                  left_container.append(place, name)
+
+
+                  var right_container = document.createElement('div')
+                  var hours = document.createElement('p')
+                  hours.setAttribute('style', 'color: black; margin-bottom: 40px !important;')
+                  hours.innerHTML = Math.floor(lead_over_data[i+1])
+                  right_container.setAttribute('style', 'text-align: right;')
+                  right_container.append(hours)
+
+                  lead.append(left_container, right_container)
+                  lead_over_container.append(lead)
+                  rank++
+                }
+
+                lead_over_container.setAttribute('style', 'overflow-y: scroll; height: 500px; width: 80%; margin-left: 10%;')
+                var content = document.getElementById('content')
+                content.append(lead_over_container)
+            }
+            } else {
+              console.log("No data available");
+            }
+          }).catch((error) => {
+            console.error(error);
+          });
+        }
+      } else {
+        console.log("No data available");
+      }
+    }).catch((error) => {
+      console.error(error);
+    }); 
+
+    
+  
+}
+
+  window.addEventListener("load", create_body());
+
+
diff --git a/public/src/leaderboard.js b/public/src/leaderboard.js
deleted file mode 100644
index faee7cd..0000000
--- a/public/src/leaderboard.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js';
-import { getDatabase, ref, get, child } from 'https://www.gstatic.com/firebasejs/9.1.1/firebase-database.js';
-
-  // Your web app's Firebase configuration
-  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
-  
-
-  function create_body() {
-    
-    console.log("Creating body");
-    const firebaseConfig = {
-      apiKey: "AIzaSyBSDW1sgJfpk0PAsbp7JRLHT14-CSL8F_0",
-      authDomain: "erhsfblaweb.firebaseapp.com",
-      databaseURL: "https://erhsfblaweb-default-rtdb.firebaseio.com",
-      projectId: "erhsfblaweb",
-      storageBucket: "erhsfblaweb.appspot.com",
-      messagingSenderId: "123112557466",
-      appId: "1:123112557466:web:6dd4db634f9dee8c378823",
-      measurementId: "G-8RT2TZHY8B"
-  };
-
-  // Initialize Firebase
-  var app = initializeApp(firebaseConfig);
-  var db = getDatabase(app);
-    // Create a div to hold the leaderboard
-    var leaderboard = document.createElement('div')
-    leaderboard.id = 'leaderboard'
-    document.body.appendChild(leaderboard)
-
-    leaderboard.innerHTML = '<h2>Leaderboard</h2>'
-    // Get the firebase database value
-    get(child(ref(db), `leaderboard/`)).then((snapshot) => {
-      if (snapshot.exists()) {
-        var num = snapshot.size + 1
-        for (var i, i = 1; (i < num); i++) {
-          get(child(ref(db, 'leaderboard/'), `person_${i}/name`)).then((snapshot) => {
-            if (snapshot.exists()) {
-              var lead = document.createElement('div')
-              var lead_in = document.createElement('h2')
-              lead_in.innerHTML = snapshot.val() + ": "
-              lead.innerHTML = lead_in.innerHTML
-              document.body.appendChild(lead)
-            } else {
-              console.log("No data available");
-            }
-          }).catch((error) => {
-            console.error(error);
-          });
-      
-          get(child(ref(db, 'leaderboard/'), `person_${i}/score`)).then((snapshot) => {
-            if (snapshot.exists()) {
-              var lead = document.createElement('div')
-              var lead_in = document.createElement('h2')
-              lead_in.innerHTML = snapshot.val()
-              lead.innerHTML = lead_in.innerHTML
-              document.body.appendChild(lead)
-            } else {
-              console.log("No data available");
-            }
-          }).catch((error) => {
-            console.error(error);
-          });
-        }
-      } else {
-        console.log("No data available");
-      }
-    }).catch((error) => {
-      console.error(error);
-    });
-
-    
-
-    
-}
-
-  // First clear the body before adding in
-  // a title and the join form
-  window.addEventListener("load", create_body);
-
-