diff --git a/assets/config/settings.yml b/assets/config/settings.yml
index ad7842902..034fa9745 100755
--- a/assets/config/settings.yml
+++ b/assets/config/settings.yml
@@ -1,4 +1,5 @@
 theme: default
 language: en
 maps:
-  animate: 5000
+  animate: 0
+  style: streets
diff --git a/frontend/src/pages/places.vue b/frontend/src/pages/places.vue
index 89a2a526f..70a411192 100644
--- a/frontend/src/pages/places.vue
+++ b/frontend/src/pages/places.vue
@@ -38,17 +38,19 @@
             }
         },
         data() {
+            const s = this.$config.values.settings.maps;
+
             return {
                 initialized: false,
                 map: null,
                 markers: {},
                 markersOnScreen: {},
                 loading: false,
-                url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=xCDwZsNKW3rlveVG0WUU',
+                url: 'https://api.maptiler.com/maps/' + s.style + '/{z}/{x}/{y}.png?key=xCDwZsNKW3rlveVG0WUU',
                 attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
                 options: {
                     container: "map",
-                    style: "https://api.maptiler.com/maps/streets/style.json?key=xCDwZsNKW3rlveVG0WUU",
+                    style: "https://api.maptiler.com/maps/" + s.style + "/style.json?key=xCDwZsNKW3rlveVG0WUU",
                     attributionControl: true,
                     customAttribution: this.attribution,
                     zoom: 0,
@@ -63,7 +65,7 @@
                     search: this.$gettext("Search"),
                 },
                 config: this.$config.values,
-                settings: this.$config.values.settings.maps,
+                settings: s,
             }
         },
         methods: {
diff --git a/frontend/src/pages/settings/general.vue b/frontend/src/pages/settings/general.vue
index e4e0b1925..7cd530abb 100644
--- a/frontend/src/pages/settings/general.vue
+++ b/frontend/src/pages/settings/general.vue
@@ -1,50 +1,78 @@
 <template>
     <div class="p-tab p-settings-general">
-        <v-container fluid>
-            <v-form lazy-validation dense
-                    ref="form" class="p-form-settings" accept-charset="UTF-8"
-                    @submit.prevent="save">
-                <v-layout wrap align-center>
-                    <v-flex xs12 sm6 class="pr-3">
-                        <v-select
-                                :items="options.languages"
-                                :label="labels.language"
-                                color="secondary-dark"
-                                v-model="settings.language"
-                                flat
-                        ></v-select>
-                    </v-flex>
+        <v-form lazy-validation dense
+                ref="form" class="p-form-settings" accept-charset="UTF-8"
+                @submit.prevent="save">
+            <v-card flat tile class="px-1 application">
+                <v-card-title primary-title>
+                    <h3 class="body-2 mb-0">User Interface</h3>
+                </v-card-title>
 
-                    <v-flex xs12 sm6 class="pr-3">
-                        <v-select
-                                :items="options.themes"
-                                :label="labels.theme"
-                                color="secondary-dark"
-                                v-model="settings.theme"
-                                flat
-                        ></v-select>
-                    </v-flex>
+                <v-card-actions>
+                    <v-layout wrap align-center>
+                        <v-flex xs12 sm6 class="px-2">
+                            <v-select
+                                    :items="options.languages"
+                                    :label="labels.language"
+                                    color="secondary-dark"
+                                    v-model="settings.language"
+                                    flat
+                            ></v-select>
+                        </v-flex>
 
-                    <v-flex xs12 sm6 class="pr-3">
-                        <v-select
-                                :items="options.mapsAnimate"
-                                :label="labels.mapsAnimate"
-                                color="secondary-dark"
-                                v-model="settings.maps.animate"
-                                flat
-                        ></v-select>
-                    </v-flex>
-                </v-layout>
+                        <v-flex xs12 sm6 class="px-2">
+                            <v-select
+                                    :items="options.themes"
+                                    :label="labels.theme"
+                                    color="secondary-dark"
+                                    v-model="settings.theme"
+                                    flat
+                            ></v-select>
+                        </v-flex>
+                    </v-layout>
+                </v-card-actions>
+            </v-card>
 
+            <v-card flat tile class="mt-0 px-1 application">
+                <v-card-title primary-title>
+                    <h3 class="body-2 mb-0">Places</h3>
+                </v-card-title>
+
+                <v-card-actions>
+                    <v-layout wrap align-center>
+                        <v-flex xs12 sm6 class="px-2">
+                            <v-select
+                                    :items="options.mapsAnimate"
+                                    :label="labels.mapsAnimate"
+                                    color="secondary-dark"
+                                    v-model="settings.maps.animate"
+                                    flat
+                            ></v-select>
+                        </v-flex>
+
+                        <v-flex xs12 sm6 class="px-2">
+                            <v-select
+                                    :items="options.mapsStyle"
+                                    :label="labels.mapsStyle"
+                                    color="secondary-dark"
+                                    v-model="settings.maps.style"
+                                    flat
+                            ></v-select>
+                        </v-flex>
+                    </v-layout>
+                </v-card-actions>
+            </v-card>
+
+            <v-container fluid>
                 <v-btn color="secondary-dark"
-                       class="white--text ml-0 mt-2"
-                       depressed
+                       class="ml-1 mt-0"
+                       depressed dark
                        @click.stop="save">
                     <translate>Save</translate>
                     <v-icon right dark>save</v-icon>
                 </v-btn>
-            </v-form>
-        </v-container>
+            </v-container>
+        </v-form>
     </div>
 </template>
 
@@ -62,7 +90,8 @@
                 labels: {
                     language: this.$gettext("Language"),
                     theme: this.$gettext("Theme"),
-                    mapsAnimate: this.$gettext("Maps Animation"),
+                    mapsAnimate: this.$gettext("Animation"),
+                    mapsStyle: this.$gettext("Style"),
                 },
             };
         },
@@ -76,7 +105,7 @@
                 this.settings.save().then((s) => {
                     this.$config.updateSettings(s.getValues(), this.$vuetify);
 
-                    if(reload) {
+                    if (reload) {
                         this.$notify.info(this.$gettext("Reloading..."));
                         this.$notify.blockUI();
                         setTimeout(() => window.location.reload(), 100);
diff --git a/frontend/src/resources/options.json b/frontend/src/resources/options.json
index 439359ef5..6b26e2f58 100644
--- a/frontend/src/resources/options.json
+++ b/frontend/src/resources/options.json
@@ -54,15 +54,33 @@
     },
     {
       "text": "Fast",
-      "value": 5000
+      "value": 2500
     },
     {
       "text": "Medium",
-      "value": 10000
+      "value": 6250
     },
     {
       "text": "Slow",
-      "value": 15000
+      "value": 10000
+    }
+  ],
+  "mapsStyle": [
+    {
+      "text": "Streets",
+      "value": "streets"
+    },
+    {
+      "text": "Hybrid",
+      "value": "hybrid"
+    },
+    {
+      "text": "Topographic",
+      "value": "topo"
+    },
+    {
+      "text": "Moonlight",
+      "value": "darkmatter"
     }
   ]
 }
diff --git a/internal/config/settings.go b/internal/config/settings.go
index 88df5d763..961797a30 100644
--- a/internal/config/settings.go
+++ b/internal/config/settings.go
@@ -10,14 +10,15 @@ import (
 )
 
 type MapsSettings struct {
-	Animate int `json:"animate" yaml:"animate"`
+	Animate int    `json:"animate" yaml:"animate"`
+	Style   string `json:"style" yaml:"style"`
 }
 
 // Settings contains Web UI settings
 type Settings struct {
-	Theme        string       `json:"theme" yaml:"theme"`
-	Language     string       `json:"language" yaml:"language"`
-	Maps         MapsSettings `json:"maps" yaml:"maps"`
+	Theme    string       `json:"theme" yaml:"theme"`
+	Language string       `json:"language" yaml:"language"`
+	Maps     MapsSettings `json:"maps" yaml:"maps"`
 }
 
 // NewSettings returns a empty Settings
@@ -27,6 +28,7 @@ func NewSettings() *Settings {
 		Language: "en",
 		Maps: MapsSettings{
 			Animate: 0,
+			Style:   "streets",
 		},
 	}
 }
diff --git a/internal/config/testdata/configEmpty.yml b/internal/config/testdata/configEmpty.yml
index a85153896..f01b3679b 100644
--- a/internal/config/testdata/configEmpty.yml
+++ b/internal/config/testdata/configEmpty.yml
@@ -2,3 +2,4 @@ theme: lavendel
 language: german
 maps:
   animate: 0
+  style: streets