diff --git a/routes/routes.js b/routes/routes.js
index e72e3a0..99b97f7 100644
--- a/routes/routes.js
+++ b/routes/routes.js
@@ -60,7 +60,7 @@ routes.get(
             pointsThisMonth: wrapper.leaderboardPoints("pointsThisMonth", 1, 10)
         }
 
-        tx(req, res)('pages/maps.njk', { leaderboards }, true, { currentSection: "maps" })
+        tx(req, res)('pages/leaderboards.njk', { leaderboards }, true, { currentSection: "leaderboards" })
     }
 )
 
diff --git a/src/sass/leaderboards.scss b/src/sass/leaderboards.scss
new file mode 100644
index 0000000..5cb6652
--- /dev/null
+++ b/src/sass/leaderboards.scss
@@ -0,0 +1,43 @@
+@use "partials/palette.scss";
+@use "partials/settings.scss";
+@use "partials/shadows.scss";
+
+
+.leaderboard {
+    display: flex;
+    flex-direction: column;
+    
+    width: max-content;
+    margin: 2rem;
+    padding: 1.5rem 2rem;
+
+    background-color: palette.$grey3;
+    border-radius: settings.$border_radius_m;
+    box-shadow: shadows.$small;
+}
+
+.rank {
+    display: flex;
+    margin: 1.5rem 0;
+
+    .country-image {
+        height: 1.5rem;
+        margin: auto .5rem auto 0;
+    }
+
+    .rank-position {
+        color: palette.$primary;
+        margin: auto .5rem auto 0;
+        font-weight: bold;
+    }
+
+    .rank-player {
+        margin: auto 2rem auto 0;
+    }
+
+    .rank-points {
+        color: palette.$grey10;
+        font-family: 'Manrope Light';
+        margin: auto 0 auto auto;
+    }
+}
\ No newline at end of file
diff --git a/static/css/leaderboards.css b/static/css/leaderboards.css
new file mode 100644
index 0000000..5571650
--- /dev/null
+++ b/static/css/leaderboards.css
@@ -0,0 +1 @@
+.leaderboard{display:flex;flex-direction:column;width:max-content;margin:2rem;padding:1.5rem 2rem;background-color:#20203f;border-radius:1rem;box-shadow:.25rem 0 2rem #00001f}.rank{display:flex;margin:1.5rem 0}.rank .country-image{height:1.5rem;margin:auto .5rem auto 0}.rank .rank-position{color:#ee588f;margin:auto .5rem auto 0;font-weight:bold}.rank .rank-player{margin:auto 2rem auto 0}.rank .rank-points{color:#9090af;font-family:"Manrope Light";margin:auto 0 auto auto}
diff --git a/views/pages/leaderboards.njk b/views/pages/leaderboards.njk
index 9facc60..f20ec6b 100644
--- a/views/pages/leaderboards.njk
+++ b/views/pages/leaderboards.njk
@@ -1,17 +1,34 @@
-{% extends "../templates/base.njk" %}
+{% extends "../templates/basic.njk" %}
 {% set leaderboards = data.leaderboards %}
-
+{% 
+    set leaderboardHeadings = {
+        points: "Points",
+        pointsRank: "Rank points",
+        pointsTeam: "Team points",
+        pointsThisWeek: "Points gathered this week",
+        pointsThisMonth: "Points gathered this month"
+    }
+%}
 
 {% block head %}
-    <title> DDStats - Leaderboards</ttile>
+    <link rel="stylesheet" type="text/css" href="/assets/css/leaderboards.css">
+    <title> DDStats - Leaderboards</title>
 {% endblock %}
 
 {% block body %}
     <main class="flex-container">
-        <div class="leaderboard">
-            {% for rank in sequence %}
-                {{ rank }}
-            {% endfor %}
-        </div>
+        {% for leaderboardType, leaderboard in leaderboards %}
+            <div class="leaderboard">
+                <h1>{{ leaderboardHeadings[leaderboardType] }}</h1>
+                {% for rank in leaderboard %}
+                    <div class="rank">
+                        <img src="https://ddnet.tw/countryflags/UNK.png" class="country-image">
+                        <p class="rank-rank">{{ rank.rank }}</p>
+                        <p class="rank-player">{{ rank.player }}</p>
+                        <p class="rank-points">{{ rank.points }} pts</p>
+                    </div>
+                {% endfor %}
+            </div>
+        {% endfor %}
     </main>
 {% endblock %}
\ No newline at end of file