diff --git a/www/pages/alertsettings.html b/www/pages/alertsettings.html
deleted file mode 100644
index 35e93a7..0000000
--- a/www/pages/alertsettings.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
-<div class="page" data-name="alertsettings">
-
-    <div class="navbar">
-        <div class="navbar-bg"></div>
-        <div class="navbar-inner">
-            <div class="left">
-                <a href="#" class="link icon-only back">
-                    <i class="icon icon-back"></i>
-                </a>
-            </div>
-            <div class="title">Alert Settings</div>
-        </div>
-    </div>
-
-
-    <div class="page-content">
-        <div class="list media-list no-hairlines tablet-inset" style="margin-top: 0;">
-            <ul>
-                {{#each settings}}
-                <li>
-                    {{#if toggle}}
-                    <div class="item-content" data-setting="{{setting}}">
-                        <div class="item-inner">
-                            <div style="display: flex; justify-content: between;">
-                                <div class="item-title">
-                                    {{title}}
-                                </div>
-                                <div class="item-after" onclick="{{onclick}}">
-                                    <label class="toggle toggle-init">
-                                        <input type="checkbox" {{#if checked}}checked{{/if}}>
-                                               <span class="toggle-icon"></span>
-                                    </label>
-                                </div>
-                            </div>
-                            <div class="item-text">{{text}}</div>
-                        </div>
-                    </div>
-                    {{else}}
-                    {{#if slider}}
-                    <div class="item-content" data-setting="{{setting}}">
-                        <div class="item-inner">
-                            <div class="item-title" style="background-color: rgba(0,0,0,0);">
-                                {{title}}
-                            </div>
-                            <div class="item-subtitle padding-horizontal padding-top">
-                                <div class="range-slider range-slider-init padding-top margin-top" data-label="true">
-                                    <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value}}">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    {{else}}
-                    {{#if select}}
-                    <a class="item-link smart-select smart-select-init" data-open-in="popover" data-setting="{{setting}}">
-                        <select>
-                            {{#each options}}
-                            <option value="{{value}}"{{#if selected}} selected{{/if}}>{{label}}</option>
-                            {{/each}}
-                        </select>
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title">{{title}}</div>
-                            </div>
-                        </div>
-                    </a>
-                    {{else}}
-                    <div class="item-content" data-setting="{{setting}}" onclick="{{onclick}}">
-                        <div class="item-inner">
-                            <div class="item-title-row">
-                                <div class="item-title">{{title}}</div>
-                            </div>
-                            <div class="item-text">{{text}}</div>
-                        </div>
-                    </div>
-                    {{/if}}
-                    {{/if}}
-                    {{/if}}
-                </li>
-                {{/each}}
-            </ul>
-        </div>
-    </div>
-
-    <script src="assets/js/settings.js"></script>
-
-</div>
diff --git a/www/pages/settings.html b/www/pages/settings.html
index 65e3c9b..32eee5b 100644
--- a/www/pages/settings.html
+++ b/www/pages/settings.html
@@ -12,7 +12,7 @@
                     <i class="icon icon-back"></i>
                 </a>
             </div>
-            <div class="title">Settings</div>
+            <div class="title">{{page_title}}</div>
         </div>
     </div>
 
diff --git a/www/routes.js b/www/routes.js
index 47b2375..20aaaee 100644
--- a/www/routes.js
+++ b/www/routes.js
@@ -203,17 +203,6 @@ var routes = [
         path: '/settings',
         name: 'settings',
         async: function (routeTo, routeFrom, resolve, reject) {
-            var mapstyles = [];
-            for (var id in SETTINGS.maptileurls) {
-                if (SETTINGS.maptileurls.hasOwnProperty(id)) {
-                    mapstyles.push({
-                        value: id,
-                        label: SETTINGS.maptileurls[id].name,
-                        selected: localStorage.getItem("mapsource") == id
-                    });
-                }
-            }
-
             var settings = [
                 {
                     setting: "alerts",
@@ -221,6 +210,13 @@ var routes = [
                     text: "Change the alert sound, volume, and distance.",
                     onclick: "router.navigate('/settings/alerts')",
                     link: true
+                },
+                {
+                    setting: "maps",
+                    title: "Map and Navigation",
+                    text: "Change map settings and units.",
+                    onclick: "router.navigate('/settings/maps')",
+                    link: true
                 }
             ];
 
@@ -244,38 +240,6 @@ var routes = [
                         checked: localStorage.getItem("darktheme") == "true",
                         onclick: ""
                     },
-                    {
-                        setting: "units",
-                        title: "Measurement units",
-                        select: true,
-                        options: [
-                            {
-                                value: "metric",
-                                label: "Meters/Kilometers",
-                                selected: localStorage.getItem("units") == "metric"
-                            },
-                            {
-                                value: "imperial",
-                                label: "Feet/Miles",
-                                selected: localStorage.getItem("units") == "imperial"
-                            }
-                        ]
-                    },
-                    {
-                        setting: "mapsource",
-                        title: "Map style",
-                        select: true,
-                        options: mapstyles,
-                        text: "Choose which map style to use."
-                    },
-                    {
-                        setting: "maptype",
-                        title: "Map viewer",
-                        text: "Use alternate/lightweight map viewer",
-                        toggle: true,
-                        checked: localStorage.getItem("maptype") == "leaflet",
-                        onclick: ""
-                    },
                     {
                         setting: "versions",
                         title: "PackageHelper app v" + app_version,
@@ -301,6 +265,7 @@ var routes = [
                 templateUrl: './pages/settings.html'
             }, {
                 context: {
+                    page_title: "Settings",
                     settings: settings
                 }
             });
@@ -308,7 +273,7 @@ var routes = [
         routes: [
             {
                 path: '/alerts',
-                name: 'alertsettings',
+                name: 'settings',
                 async: function (routeTo, routeFrom, resolve, reject) {
                     var alertsounds = [];
                     for (var id in SETTINGS.alertsounds) {
@@ -321,7 +286,8 @@ var routes = [
                         }
                     }
 
-                    var settings = [{
+                    var settings = [
+                        {
                             setting: "alertsound",
                             title: "Alert sound",
                             text: "Select which sound to play when a package is nearby.",
@@ -354,12 +320,74 @@ var routes = [
                             step: 15,
                             value: localStorage.getItem("alertinterval") == null ? 30 : localStorage.getItem("alertinterval"),
                             slider: true
-                        }];
+                        }
+                    ];
+
+                    resolve({
+                        templateUrl: './pages/settings.html'
+                    }, {
+                        context: {
+                            page_title: "Alert Settings",
+                            settings: settings
+                        }
+                    });
+                }
+            },
+            {
+                path: '/maps',
+                name: 'settings',
+                async: function (routeTo, routeFrom, resolve, reject) {
+                    var mapstyles = [];
+                    for (var id in SETTINGS.maptileurls) {
+                        if (SETTINGS.maptileurls.hasOwnProperty(id)) {
+                            mapstyles.push({
+                                value: id,
+                                label: SETTINGS.maptileurls[id].name,
+                                selected: localStorage.getItem("mapsource") == id
+                            });
+                        }
+                    }
+
+                    var settings = [
+                        {
+                            setting: "mapsource",
+                            title: "Map style",
+                            select: true,
+                            options: mapstyles,
+                            text: "Choose which map style to use."
+                        },
+                        {
+                            setting: "units",
+                            title: "Measurement units",
+                            select: true,
+                            options: [
+                                {
+                                    value: "metric",
+                                    label: "Meters/Kilometers",
+                                    selected: localStorage.getItem("units") == "metric"
+                                },
+                                {
+                                    value: "imperial",
+                                    label: "Feet/Miles",
+                                    selected: localStorage.getItem("units") == "imperial"
+                                }
+                            ]
+                        },
+                        {
+                            setting: "maptype",
+                            title: "Alternative map",
+                            text: "Turn this on if you have problems with the map.",
+                            toggle: true,
+                            checked: localStorage.getItem("maptype") == "leaflet",
+                            onclick: ""
+                        }
+                    ];
 
                     resolve({
-                        templateUrl: './pages/alertsettings.html'
+                        templateUrl: './pages/settings.html'
                     }, {
                         context: {
+                            page_title: "Map Settings",
                             settings: settings
                         }
                     });