diff --git a/src/sass/maps.scss b/src/sass/maps.scss
index 6960e37..ac45074 100644
--- a/src/sass/maps.scss
+++ b/src/sass/maps.scss
@@ -2,12 +2,6 @@
 @use "partials/settings.scss";
 @use "partials/shadows.scss";
 
-.maps-container {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-around;
-}
 
 .map {
     background-color: palette.$grey3;
@@ -37,12 +31,17 @@
     font-size: 1.2rem;
     font-weight: bold;
 
-    margin: .5rem 2rem;
+    margin: 1rem 2rem .5rem 2rem;
 }
 
 .map-info {
     margin: .25rem 2rem;
 
+    td {
+        padding: .25rem 0;
+        vertical-align: middle;
+    }
+
     td:first-child {
         width: 9ch;
     }
@@ -64,4 +63,69 @@ a.map-more-info {
         color: palette.$surface;
         background-color: palette.$accent;
     }
+}
+
+
+.map-detailed {
+    padding-bottom: 1rem;
+
+    &:hover {
+        transform: none;
+    }
+
+    .map-image {
+        width: 100%;
+        height: auto;
+    }
+
+    td:first-child {
+        width: 14ch;
+    }
+}
+
+.leaderboard {
+    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-time {
+        color: palette.$grey10;
+        font-family: 'Manrope Light';
+        margin: auto 0 auto auto;
+    }
+}
+
+.leaderboard-history {
+    width: min(70ch, 70vw);
+    margin: 2rem;
+    padding: 1.5rem 2rem;
+
+    background-color: palette.$grey3;
+    border-radius: settings.$border_radius_m;
+    box-shadow: shadows.$small;
 }
\ No newline at end of file
diff --git a/src/sass/theme.scss b/src/sass/theme.scss
index 31b4a11..1f43d90 100644
--- a/src/sass/theme.scss
+++ b/src/sass/theme.scss
@@ -66,6 +66,15 @@ nav {
     }
 }
 
+main.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+
+    margin: 0 10vw;
+}
+
 
 //
 // TEXT
diff --git a/static/css/maps.css b/static/css/maps.css
index 277fbfd..81988d2 100644
--- a/static/css/maps.css
+++ b/static/css/maps.css
@@ -1 +1 @@
-.maps-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around}.map{background-color:#20203f;border-radius:1rem;box-shadow:.25rem 0 2rem #00001f;display:flex;flex-direction:column;justify-content:center;margin:2rem 1rem;transition:transform .3s,box-shadow .3s}.map:hover{transform:scale(1.05);box-shadow:.5rem 0 4rem #00001f}.map-image{border-radius:1rem 1rem 0 0;width:360px;height:225px}.map-name{font-size:1.2rem;font-weight:bold;margin:.5rem 2rem}.map-info{margin:.25rem 2rem}.map-info td:first-child{width:9ch}a.map-more-info{margin:.75rem auto 1.25rem auto;padding:.15rem .5rem;border:.1rem solid #fba7c6;border-radius:.5rem;color:#fba7c6;text-decoration:none transparent;transition:color .3s,background-color .3s}a.map-more-info:hover{color:#10102f;background-color:#fba7c6}
+.map{background-color:#20203f;border-radius:1rem;box-shadow:.25rem 0 2rem #00001f;display:flex;flex-direction:column;justify-content:center;margin:2rem 1rem;transition:transform .3s,box-shadow .3s}.map:hover{transform:scale(1.05);box-shadow:.5rem 0 4rem #00001f}.map-image{border-radius:1rem 1rem 0 0;width:360px;height:225px}.map-name{font-size:1.2rem;font-weight:bold;margin:1rem 2rem .5rem 2rem}.map-info{margin:.25rem 2rem}.map-info td{padding:.25rem 0;vertical-align:middle}.map-info td:first-child{width:9ch}a.map-more-info{margin:.75rem auto 1.25rem auto;padding:.15rem .5rem;border:.1rem solid #fba7c6;border-radius:.5rem;color:#fba7c6;text-decoration:none transparent;transition:color .3s,background-color .3s}a.map-more-info:hover{color:#10102f;background-color:#fba7c6}.map-detailed{padding-bottom:1rem}.map-detailed:hover{transform:none}.map-detailed .map-image{width:100%;height:auto}.map-detailed td:first-child{width:14ch}.leaderboard{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-time{color:#9090af;font-family:"Manrope Light";margin:auto 0 auto auto}.leaderboard-history{width:min(70ch,70vw);margin:2rem;padding:1.5rem 2rem;background-color:#20203f;border-radius:1rem;box-shadow:.25rem 0 2rem #00001f}
diff --git a/static/css/theme.css b/static/css/theme.css
index c822645..dfdd6ed 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1 +1 @@
-*{margin:0;padding:0;border:0 none transparent;box-sizing:border-box;scroll-behavior:smooth;font-family:"Manrope Regular",sans-serif;font-size:1rem;line-height:1.5}html,body{color:#e0e0ff;background-color:#10102f;height:100%}nav{display:flex;align-items:center;background-color:#20203f;border-radius:0 0 2rem 2rem;box-shadow:.5rem 0 4rem #00001f;margin:0 0 2rem 0;padding:1rem 2rem}nav .logo{width:3rem;height:3rem;margin-right:2rem;border-radius:100%;background-color:#ee588f}nav a{color:#fba7c6;border-bottom:.1rem solid transparent;margin:.25rem 1rem .5rem 1rem;padding:.15rem .5rem .25rem .5rem;font-size:1.25rem;text-decoration:none transparent;transition:border .3s}nav a:hover{border-bottom:.1rem solid #fba7c6}nav a.current{color:#ee588f}nav a.current:hover{border-bottom:.1rem solid #ee588f}header,h1,h2,h3,h4,h5,h6{color:#fba7c6}header{font-size:4rem}h1{font-size:1.5rem;font-weight:normal}h2{font-size:1.35rem;font-weight:normal}h3{font-size:1.2rem;font-weight:normal}h4{font-size:1.05rem;font-weight:normal}h5{font-size:.9rem;font-weight:normal}a{color:#a3cefa}form{display:flex;flex-direction:column;justify-content:center;align-items:center}input{color:#e0e0ff;background-color:#20203f;margin:1em 0;padding:.75em 1.25em;width:min(80ch,80vw);outline:0 none transparent;border:.2rem solid transparent;border-radius:.5rem;box-shadow:.25rem 0 2rem #00001f;transition:border .3s,background-color .5s,border-radius .5s}input:hover{background-color:#30304f;border-radius:1rem}input:active,input:focus{border:.2rem solid #ee588f}footer{display:flex;flex-direction:column;align-items:center;margin:5vh 2rem}footer a{color:#74b6fb;font-size:.8rem}
+*{margin:0;padding:0;border:0 none transparent;box-sizing:border-box;scroll-behavior:smooth;font-family:"Manrope Regular",sans-serif;font-size:1rem;line-height:1.5}html,body{color:#e0e0ff;background-color:#10102f;height:100%}nav{display:flex;align-items:center;background-color:#20203f;border-radius:0 0 2rem 2rem;box-shadow:.5rem 0 4rem #00001f;margin:0 0 2rem 0;padding:1rem 2rem}nav .logo{width:3rem;height:3rem;margin-right:2rem;border-radius:100%;background-color:#ee588f}nav a{color:#fba7c6;border-bottom:.1rem solid transparent;margin:.25rem 1rem .5rem 1rem;padding:.15rem .5rem .25rem .5rem;font-size:1.25rem;text-decoration:none transparent;transition:border .3s}nav a:hover{border-bottom:.1rem solid #fba7c6}nav a.current{color:#ee588f}nav a.current:hover{border-bottom:.1rem solid #ee588f}main.flex-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;margin:0 10vw}header,h1,h2,h3,h4,h5,h6{color:#fba7c6}header{font-size:4rem}h1{font-size:1.5rem;font-weight:normal}h2{font-size:1.35rem;font-weight:normal}h3{font-size:1.2rem;font-weight:normal}h4{font-size:1.05rem;font-weight:normal}h5{font-size:.9rem;font-weight:normal}a{color:#a3cefa}form{display:flex;flex-direction:column;justify-content:center;align-items:center}input{color:#e0e0ff;background-color:#20203f;margin:1em 0;padding:.75em 1.25em;width:min(80ch,80vw);outline:0 none transparent;border:.2rem solid transparent;border-radius:.5rem;box-shadow:.25rem 0 2rem #00001f;transition:border .3s,background-color .5s,border-radius .5s}input:hover{background-color:#30304f;border-radius:1rem}input:active,input:focus{border:.2rem solid #ee588f}footer{display:flex;flex-direction:column;align-items:center;margin:5vh 2rem}footer a{color:#74b6fb;font-size:.8rem}
diff --git a/views/pages/mapSingle.njk b/views/pages/mapSingle.njk
index e3ede41..c03091e 100644
--- a/views/pages/mapSingle.njk
+++ b/views/pages/mapSingle.njk
@@ -13,177 +13,199 @@
 {% endblock %}
 
 {% block body %}
-    <main>
-        <img class="map-image" src="https://ddnet.tw/ranks/maps/{{ map.map | replace(r/[À-ž]/g, "__") | replace(r/[^a-zA-Z0-9]/g, "_") }}.png">
-        <h1 class="map-name">{{ map.map }}</h1>
-        <table class="map-info">
-            <tr>
-                <td>
-                    {% if map.mappers[1] %}
-                        Mappers:
-                    {% else %}
-                        Mapper:
-                    {% endif %}
-                </td>
-                <td>
-                    {{ map.mappers.join(", ") }}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Category:
-                </td>
-                <td>
-                    {{ map.category }}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Rating:
-                </td>
-                <td>
-                    {% for i in range(0, map.stars) %}★{% endfor %}
-                    {% for i in range(0, 5 - map.stars) %}☆{% endfor %}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Points:
-                </td>
-                <td>
-                    {{ map.points }}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Released:
-                </td>
-                <td>
-                    {{ map.release }}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Total finishes:
-                </td>
-                <td>
-                    {{ map.finishes.total }}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Team finishes: 
-                </td>
-                <td>
-                    {{ map.finishes.team }}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Unique finishes
-                </td>
-                <td>
-                    {{ map.finishes.unique }}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Median time: 
-                </td>
-                <td>
-                    {{ map.times.median | round(2) }}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Average time:
-                </td>
-                <td>
-                    {{ map.times.average | round(2) }}
-                </td>
-            </tr>
-        </table>
+    <main class="flex-container">
+        <div class="map map-detailed">
+            <img class="map-image" src="https://ddnet.tw/ranks/maps/{{ map.map | replace(r/[À-ž]/g, "__") | replace(r/[^a-zA-Z0-9]/g, "_") }}.png">
+            <h1 class="map-name">{{ map.map }}</h1>
+            <table class="map-info">
+                <tr>
+                    <td>
+                        {% if map.mappers[1] %}
+                            Mappers:
+                        {% else %}
+                            Mapper:
+                        {% endif %}
+                    </td>
+                    <td>
+                        {{ map.mappers.join(", ") }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        Category:
+                    </td>
+                    <td>
+                        {{ map.category }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        Rating:
+                    </td>
+                    <td>
+                        {% for i in range(0, map.stars) %}★{% endfor %}
+                        {% for i in range(0, 5 - map.stars) %}☆{% endfor %}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        Points:
+                    </td>
+                    <td>
+                        {{ map.points }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        Released:
+                    </td>
+                    <td>
+                        {{ map.release }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        Total finishes:
+                    </td>
+                    <td>
+                        {{ map.finishes.total }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        Team finishes: 
+                    </td>
+                    <td>
+                        {{ map.finishes.team }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        Unique finishes:
+                    </td>
+                    <td>
+                        {{ map.finishes.unique }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        Median time: 
+                    </td>
+                    <td>
+                        {{ map.times.median | round(2) }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        Average time:
+                    </td>
+                    <td>
+                        {{ map.times.average | round(2) }}
+                    </td>
+                </tr>
+            </table>
+        </div>
 
-        <h2> Records! </h2>
-        {% for record in raceLeaderboard %}
-            <img class="country-image" src="https://ddnet.tw/countryflags/{{ record.server }}.png">
-            {{ record.rank }} - 
-            {{ (record.time - (record.time % 60)) / 60 }}:
-            {%- if record.time | round % 60 > 9 %}
-                {{- record.time | round % 60 }}
-            {%- else %}
-                0{{- record.time | round % 60 }}
-            {% endif %}
-            {{ record.player }} <br>
-        {% endfor %}
-        
-        <h2> Team records! </h2>
-        {% for record in teamLeaderboard %}
-            <img class="country-image" src="https://ddnet.tw/countryflags/{{ record.server }}.png">
-            {{ record.teamrank }} - 
-            {{ (record.time - (record.time % 60)) / 60 }}:
-            {%- if record.time | round % 60 > 9 %}
-                {{- record.time | round % 60 }}
-            {%- else %}
-                0{{- record.time | round % 60 }}
-            {% endif %}
-            {{ record.players.join(", ") }} <br>
-        {% endfor %}
 
-    <h1> Record over time </h1>
-    <div class="container">
-    <canvas id="chart"></canvas>
-    </div> 
-    <script>
-    var ctx = document.getElementById("chart").getContext("2d");
-    const graph = {{ data.graphMap | dump | safe }}
+        <div class="leaderboard">
+            <h2> Records! </h2>
+            {% for record in raceLeaderboard %}
+                <div class="rank">
+                    <img class="country-image" data-src="https://ddnet.tw/countryflags/{{ record.server }}.png">
+                    <p class="rank-position">{{ record.rank }}.</p>
+                    <p class="rank-player">{{ record.player }}</p>
+                    <p class="rank-time">
+                        {{ (record.time - (record.time % 60)) / 60 }}:
+                        {%- if record.time | round % 60 > 9 %}
+                            {{- record.time | round % 60 }}
+                        {%- else -%}
+                            0{{- record.time | round % 60 }}
+                        {%- endif %}
+                    </p>
+                </div>
+            {% endfor %}
+        </div>
 
-    var myChart = new Chart(ctx, {
-        type: 'line',
-        options: {
-            tooltips: {
-                mode: 'index',
-                intersect: false
-            },
-            hover: {
-                mode: 'index',
-                intersect: false
-            },
-            /*  This currently doesn't work :( */
-            callbacks: {
-                label: function(tooltipItem, data) {
-                    return data[tooltipItem['index']]['player']
-                }
-            },
-            scales: {
-                xAxes: [{
-                    type: 'time',
-                    time: {
-                        unit: 'year'
+        <div class="leaderboard">
+            <h2> Team records! </h2>
+            {% for record in teamLeaderboard %}
+                <div class="rank">
+                    <img class="country-image" data-src="https://ddnet.tw/countryflags/{{ record.server }}.png">
+                    <p class="rank-position">{{ record.teamrank }}.</p>
+                    <p class="rank-player">{{ record.players.join(", ") }}</p>
+                    <p class="rank-time">
+                        {{ (record.time - (record.time % 60)) / 60 }}:
+                        {%- if record.time | round % 60 > 9 %}
+                            {{- record.time | round % 60 }}
+                        {%- else -%}
+                            0{{- record.time | round % 60 }}
+                        {%- endif %}
+                    </p>
+                </div>
+            {% endfor %}
+        </div>
+
+        <div class="leaderboard-history">
+            <h1> Record over time </h1>
+            <div class="container">
+            <canvas id="chart"></canvas>
+            </div> 
+            <script>
+            const ctx = document.getElementById("chart").getContext("2d");
+            const graph = {{ data.graphMap | dump | safe }}
+
+            const myChart = new Chart(ctx, {
+                type: 'line',
+                options: {
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    hover: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    /*  This currently doesn't work :( */
+                    callbacks: {
+                        label: function(tooltipItem, data) {
+                            return data[tooltipItem['index']]['player']
+                        }
+                    },
+                    scales: {
+                        xAxes: [{
+                            type: 'time',
+                            time: {
+                                unit: 'year'
+                            }
+                        }]
+                    },
+                    elements: {
+                        point: {
+                            radius: 6
+                        },
+                        line: {
+                            fill: false
+                        }
                     }
-                }]
-            },
-            elements: {
-                point: {
-                    radius: 10
                 },
-                line: {
-                    fill: false
+                data: {
+                    datasets: [{
+                        label: '{{ map.map }}',
+                        data: graph,
+                        color: [
+                            '#EE588F'
+                        ],
+                        backgroundColor: [
+                            'rgba(0, 0, 0, 0)'
+                        ],
+                        borderColor: [
+                            '#FBA7C6'
+                        ],
+                        borderWidth: 3
+                    }]
                 }
-            }
-        },
-        data: {
-        datasets: [{
-            label: '{{ map.map }}',
-            data: graph,
-            borderColor: [
-                'rgba(255,99,132,1)'
-            ],
-            borderWidth: 3
-        }
-        ]}
-    });
-    </script>
-
+            })
+            </script>
+        </div>
     </main>
 {% endblock %}
\ No newline at end of file
diff --git a/views/pages/maps.njk b/views/pages/maps.njk
index 9f9b23d..86482e4 100644
--- a/views/pages/maps.njk
+++ b/views/pages/maps.njk
@@ -4,11 +4,10 @@
 {% block head %}
     <title>DDStats - Maps!</title>
     <link rel="stylesheet" type="text/css" href="/assets/css/maps.css">
-    <script src="/assets/scripts/lazyLoadImages.js" defer></script>
 {% endblock %}
 
 {% block body %}
-    <main class="maps-container">
+    <main class="flex-container">
         {% for map in data.maps %}
             {{ mapComponent.card(map) }}
         {% endfor %}
diff --git a/views/templates/basic.njk b/views/templates/basic.njk
index 2cb11af..12ffe2f 100644
--- a/views/templates/basic.njk
+++ b/views/templates/basic.njk
@@ -3,9 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <link rel="stylesheet" href="/assets/css/theme.css">
     <link rel="stylesheet" href="/assets/css/fonts.css">
     <link rel="stylesheet" href="/assets/css/theme.css">
+
+    <script src="/assets/scripts/lazyLoadImages.js" defer></script>
+
     {% block head %}
         <title>DDStats</title>
     {% endblock %}