diff --git a/www/assets/css/app.css b/www/assets/css/app.css
index 336dddd..fe4aea6 100644
--- a/www/assets/css/app.css
+++ b/www/assets/css/app.css
@@ -234,4 +234,24 @@ Framework7 and FontAwesome both have a .fab class
     width: 100%;
     transform-origin: 50% 100%;
     transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
+}
+
+#trackMapContainer {
+    margin: 0;
+    min-height: 200px;
+    max-height: 500px;
+    height: 30vh;
+}
+
+@media all and (min-width: 1024px) {
+    #trackMapContainer {
+        height: calc(calc(100vh - calc(var(--f7-list-margin-vertical) * 2)) - var(--f7-navbar-height));
+        min-height: none;
+        max-height: none;
+        margin: var(--f7-list-margin-vertical) 0;
+    }
+    #trackResultContainer ul {
+        height: calc(calc(100vh - calc(var(--f7-list-margin-vertical) * 2)) - var(--f7-navbar-height));
+        overflow-y: auto;
+    }
 }
\ No newline at end of file
diff --git a/www/assets/css/tablet.css b/www/assets/css/tablet.css
index 89cf403..a7a48ed 100644
--- a/www/assets/css/tablet.css
+++ b/www/assets/css/tablet.css
@@ -16,6 +16,11 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     margin-top: 0;
 }
 
+.no-margin-vertical-md {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
 @media all and (min-width: 768px) {
     .only-tablet {
         display: inherit;
@@ -46,4 +51,18 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     .list.no-margin-top-sm {
         margin: var(--f7-list-margin-vertical) 0;
     }
+}
+
+@media all and (min-width: 1024px) {
+    .margin-top-tablet-md {
+        margin-top: 1rem;
+    }
+
+    .list.no-margin-vertical-md {
+        margin: var(--f7-list-margin-vertical) 0;
+    }
+
+    .flex-direction-row-reverse-md {
+        flex-direction: row-reverse;
+    }
 }
\ No newline at end of file
diff --git a/www/pages/trackresult.html b/www/pages/trackresult.html
index b68785e..5330c10 100644
--- a/www/pages/trackresult.html
+++ b/www/pages/trackresult.html
@@ -25,51 +25,57 @@
 
     <div class="page-content">
         <div class="row justify-content-center">
-            <div class="col-100 medium-60 large-50 xlarge-40">
-                <div class="list transparent no-hairlines no-margin-top-sm tablet-inset elevation-tablet">
-                    <ul>
-                        {{#if map.enabled}}
-                        <li>
-                            <div class="mapbox" style="width: 100%; min-height: 200px; max-height: 500px; height: 30vh;" id="mapbox-track" data-latitude="{{map.latitude}}" data-longitude="{{map.longitude}}" data-accurate="{{map.accurate}}"></div>
-                        </li>
-                        {{/if}}
-                        {{#js_if "this.info != []"}}
-                        <li class="item-divider">Info</li>
-                        {{#each info}}
-                        <li>
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title" style="white-space: normal !important;">
-                                        <div class="item-header">{{label}}</div>
-                                        {{value}}
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        {{/each}}
-                        {{/js_if}}
-                        {{#if events}}
-                        <li class="item-divider">Events</li>
-                        {{#each events}}
-                        <li>
-                            <div class="item-content">
-                                <div class="item-inner item-cell">
-                                    <div class="item-row">
-                                        <div class="item-cell">
-                                            <img src="{{icon}}" class="trackingeventicon" /> {{text}}
+            <div class="col-100 medium-75 large-90 xlarge-75">
+                <div class="row justify-content-center align-items-stretch flex-direction-row-reverse-md">
+                    {{#if map.enabled}}
+                    <div class="col-100 large-50 xlarge-50">
+                        <div class="no-margin-vertical-md tablet-inset elevation-tablet display-flex align-items-stretch" id="trackMapContainer">
+                            <div class="mapbox" style="width: 100%; height: 100%;" id="mapbox-track" data-latitude="{{map.latitude}}" data-longitude="{{map.longitude}}" data-accurate="{{map.accurate}}"></div>
+                        </div>
+                    </div>
+                    {{/if}}
+                    <div class="col-100 large-50 xlarge-50">
+                        <div class="list transparent no-hairlines no-margin-vertical-md tablet-inset elevation-tablet" id="trackResultContainer">
+                            <ul>
+                                {{#js_if "this.info != []"}}
+                                <li class="item-divider">Info</li>
+                                {{#each info}}
+                                <li>
+                                    <div class="item-content">
+                                        <div class="item-inner">
+                                            <div class="item-title" style="white-space: normal !important;">
+                                                <div class="item-header">{{label}}</div>
+                                                {{value}}
+                                            </div>
                                         </div>
                                     </div>
-                                    <div class="item-row">
-                                        <div class="item-cell">
-                                            {{date}}
+                                </li>
+                                {{/each}}
+                                {{/js_if}}
+                                {{#if events}}
+                                <li class="item-divider">Events</li>
+                                {{#each events}}
+                                <li>
+                                    <div class="item-content">
+                                        <div class="item-inner item-cell">
+                                            <div class="item-row">
+                                                <div class="item-cell">
+                                                    <img src="{{icon}}" class="trackingeventicon" /> {{text}}
+                                                </div>
+                                            </div>
+                                            <div class="item-row">
+                                                <div class="item-cell">
+                                                    {{date}}
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                        </li>
-                        {{/each}}
-                        {{/if}}
-                    </ul>
+                                </li>
+                                {{/each}}
+                                {{/if}}
+                            </ul>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>