diff --git a/Logic/Leaflet/Basemap.ts b/Logic/Leaflet/Basemap.ts
index f24a6ece2..c19198a33 100644
--- a/Logic/Leaflet/Basemap.ts
+++ b/Logic/Leaflet/Basemap.ts
@@ -24,7 +24,7 @@ export class BaseLayers {
                 {
                     // omwrgbmrvl
                     attribution: 'Luchtfoto\'s van © AIV Vlaanderen (Laatste)  © AGIV',
-                    maxZoom: 20,
+                    maxZoom: 22,
                     minZoom: 1,
                     wmts: true
                 })
diff --git a/assets/themes/fruit_trees/fruit_trees.json b/assets/themes/fruit_trees/fruit_trees.json
new file mode 100644
index 000000000..e9eb8c7ac
--- /dev/null
+++ b/assets/themes/fruit_trees/fruit_trees.json
@@ -0,0 +1,169 @@
+{
+  "id": "boomgaarden",
+  "title": {
+    "nl": "Open Boomgaardenkaart"
+  },
+  "shortDescription": {
+    "nl": "Boomgaarden en fruitbomen"
+  },
+  "description": {
+    "nl": "Op deze kaart vindt je boomgaarden en fruitbomen"
+  },
+  "language": [
+    "nl"
+  ],
+  "maintainer": "",
+  "icon": "https://upload.wikimedia.org/wikipedia/commons/4/4e/Low_Hanging_Fruit_-_The_Noun_Project.svg",
+  "version": "0",
+  "startLat": 0,
+  "startLon": 0,
+  "startZoom": 1,
+  "widenFactor": 0.001,
+  "socialImage": "",
+  "layers": [
+    {
+      "id": "orchards",
+      "name": {
+        "nl": "Boomgaarden"
+      },
+      "minzoom": 12,
+      "overpassTags": {
+        "and": [
+          "landuse=orchard"
+        ]
+      },
+      "title": {
+        "render": {
+          "nl": "Boomgaard"
+        }
+      },
+      "description": {},
+      "tagRenderings": [],
+      "hideUnderlayingFeaturesMinPercentage": 0,
+      "icon": {
+        "render": "./assets/themes/buurtnatuur/forest.svg"
+      },
+      "width": {
+        "render": "8"
+      },
+      "iconSize": {
+        "render": "40,40,center"
+      },
+      "color": {
+        "render": "#00f"
+      },
+      "presets": [
+        {
+          "tags": [
+            "landuse=orchard",
+            "fixme=Added with mapcomplete - geometry still to draw"
+          ],
+          "title": {
+            "nl": "Boomgaard"
+          },
+          "description": {
+            "nl": "Voeg een boomgaard toe (als punt - omtrek nog te tekenen)"
+          }
+        }
+      ]
+    },
+    {
+      "id": "fruitboom",
+      "name": {
+        "nl": "Boom"
+      },
+      "minzoom": 12,
+      "overpassTags": {
+        "and": [
+          "natural=tree"
+        ]
+      },
+      "title": {
+        "render": {
+          "nl": "Boom"
+        }
+      },
+      "description": {
+        "nl": "Een boom"
+      },
+      "tagRenderings": [
+        {
+          "render": {
+            "nl": "De soort is {species:nl}"
+          },
+          "question": {
+            "nl": "Wat is de soort van deze boom (in het Nederlands)?"
+          },
+          "freeform": {
+            "key": "species:nl"
+          }
+        },
+        {
+          "render": {
+            "nl": "Het ras (taxon) van deze boom is <b>{taxon}</b>"
+          },
+          "question": {
+            "nl": "Wat is het taxon (ras) van deze boom?"
+          },
+          "freeform": {
+            "key": "taxon"
+          },
+          "condition": {
+            "and": [
+              "species:nl~*"
+            ]
+          }
+        },
+        {
+          "render": {
+            "nl": "Beschrijving: <i>{description}</i>"
+          },
+          "question": {
+            "nl": "Welke beschrijving past bij deze boom?"
+          },
+          "freeform": {
+            "key": "description"
+          }
+        },
+        {
+          "render": {
+            "nl": "Referentienummer: <b>{ref}</b>"
+          },
+          "question": {
+            "nl": "Is er een refernetienummer?"
+          },
+          "freeform": {
+            "key": "ref"
+          }
+        }
+      ],
+      "hideUnderlayingFeaturesMinPercentage": 0,
+      "icon": {
+        "render": "https://upload.wikimedia.org/wikipedia/commons/4/4e/Low_Hanging_Fruit_-_The_Noun_Project.svg"
+      },
+      "width": {
+        "render": "8"
+      },
+      "iconSize": {
+        "render": "40,40,center"
+      },
+      "color": {
+        "render": "#00f"
+      },
+      "presets": [
+        {
+          "tags": [
+            "natural=tree"
+          ],
+          "title": {
+            "nl": "Boom"
+          },
+          "description": {
+            "nl": "Voeg hier een boom toe"
+          }
+        }
+      ]
+    }
+  ],
+  "roamingRenderings": []
+}
\ No newline at end of file
diff --git a/css/mobile.css b/css/mobile.css
index e69de29bb..8488c67dd 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -0,0 +1,93 @@
+/*
+Contains tweaks for small screens
+*/
+
+.only-on-mobile {
+    display: none;
+}
+
+@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
+
+    .only-on-mobile {
+        display: unset;
+    }
+    
+    .hidden-on-mobile {
+        display: none !important;
+    }
+
+    #messagesbox {
+        display: none;
+    }
+
+    #help-button-mobile{
+        display: unset;
+        pointer-events: all;
+    }
+
+    #help-button-mobile div {
+        box-shadow: 0 0 10px #0006;
+        margin-bottom: 10px;
+    }
+
+    #geolocate-button {
+        display: block;
+    }
+
+    .leaflet-popup {
+        /* Popups are hidden on mobile */
+        display: none;
+    }
+
+    #centermessage {
+        top: 30%;
+        left: 15%;
+        width: 60%;
+
+    }
+    
+    .add-popup-all-buttons {
+        /* Buttons in the 'add new point' have a default of 50vh maxheight which is ugly in the new context*/
+        max-height: unset !important;
+    }
+
+    #messagesboxmobile {
+        display: block;
+        position: absolute;
+        z-index: 10000;
+        background-color: white;
+        width: 100vw;
+    }
+
+    #welcomeMessage {
+        display: inline-block;
+        background-color: white;
+        border-radius: 0;
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        max-height: max-content;
+        box-shadow: unset;
+        overflow-y: unset;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    /* Portrait */
+    #userbadge-and-search {
+        display: inline-block;
+        width: auto;
+        max-width: 100vw;
+    }
+
+    #topleft-tools {
+        padding: 0.2em !important;
+        padding-top: 0.3em !important;
+    }
+
+    #userbadge {
+        margin-bottom: 0.3em;
+    }
+}
\ No newline at end of file
diff --git a/index.css b/index.css
index 57e4ccc37..105ce424a 100644
--- a/index.css
+++ b/index.css
@@ -24,7 +24,6 @@ body {
     cursor: pointer;
     width: 43px;
     height: 43px;
-    display: none; /*Hidden by default, only visible on mobile*/
 }
 
 #geolocate-button img {
@@ -188,12 +187,6 @@ body {
         padding-bottom: 0.2em;
     }
 
-    #hidden-on-mobile {
-        display: none; /*Only shown on small screens - this is probably named wrongly*/
-    }
-    
-    
-
     .add-popup-all-buttons {
         max-height: 50vh;
         display: inline-block;
@@ -201,61 +194,6 @@ body {
         width: 100%;
     }
 
-@media only screen and (max-height: 600px) and (not (max-width:700px)) {
-
-    /* Landscape and portrait */
-    #topleft-tools {
-        padding: 0.1em 0.1em 0.1em unset;
-    }
-
-    .hidden-on-mobile {
-        display: none !important;
-    }
-
-    #userbadge-and-search {
-        position: relative;
-        display: inline-block;
-            width: auto;
-            max-width: 50vw;
-            margin: 0;
-        }
-
-    #userbadge {
-        position: fixed;
-        right: 0.3em;
-        width: min-content;
-        max-width: 50vw;
-        margin: 0;
-        padding: 0;
-    }
-
-
-    }
-
-
-    @media only screen and (max-width: 600px) {
-        /* Portrait */
-        #userbadge-and-search {
-            display: inline-block;
-            width: auto;
-            max-width: 100vw;
-        }
-
-
-        .hidden-on-mobile {
-            display: none !important;
-        }
-
-        #topleft-tools {
-            padding: 0.2em !important;
-            padding-top: 0.3em !important;
-        }
-
-        #userbadge {
-            margin-bottom: 0.3em;
-        }
-
-    }
 
 
 /**************************************/
@@ -365,108 +303,6 @@ body {
 }
 
 
-@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
-    #hidden-on-mobile {
-        display: block;
-    }
-
-
-    .hidden-on-mobile {
-        display: none !important;
-    }
-  
-    #messagesbox-wrapper {
-        display: none;
-    }
-
-    #messagesbox {
-        display: none;
-    }
-    
-    #help-button-mobile{
-        display: unset;
-        pointer-events: all;
-    }
-    
-    #help-button-mobile div {
-        box-shadow: 0 0 10px #0006;
-        margin-bottom: 10px;
-    }
-
-    #geolocate-button {
-        display: block;
-    }
-
-    .leaflet-popup {
-        /* Popups are hidden on mobile */
-        display: none;
-    }
-    
-    #centermessage {
-        top: 30%;
-        left: 15%;
-        width: 60%;
-
-    }
-    .add-popup-all-buttons {
-        max-height: calc(100vh - 12em);
-        height: min-content;
-        display: inline-block;
-        overflow-y: auto;
-        width: 100%;
-    }
-
-
-
-    #messagesboxmobile {
-        display: block;
-        position: absolute;
-        z-index: 10000;
-        background-color: white;
-    }
-
-    #welcomeMessage {
-        display: inline-block;
-        background-color: white;
-        border-radius: 0;
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        max-height: max-content;
-        box-shadow: unset;
-        overflow-y: unset;
-    }
-}
-
-    @media only screen and (max-height: 400px) {
-        /* Landscape: small 'to the map' */
-        #hidden-on-mobile {
-            display: unset;
-        }
-
-
-        .hidden-on-mobile {
-            display: none !important;
-        }
-
-        #messagesboxmobile {
-            position: absolute;
-            display: block;
-            z-index: 10000;
-            padding-bottom: 5em;
-        }
-
-
-        #welcomeMessage {
-            box-shadow: unset;
-            max-height: 100vh;
-        }
-
-    }
-
-
 .imgWithAttr {
     max-height: 20em;
 
diff --git a/index.html b/index.html
index 0166eed24..f125b5583 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="./css/userbadge.css"/>
     <link rel="stylesheet" href="./css/tabbedComponent.css"/>
     <link rel="stylesheet" href="./css/slideshow.css"/>
+    <link rel="stylesheet" href="./css/mobile.css"/>
     <link rel="manifest" href="./manifest.manifest">
     <link rel="icon" href="assets/add.svg" sizes="any" type="image/svg+xml">
     
@@ -34,7 +35,7 @@
     <!-- DECORATION 0 END -->
 </div>
 
-<div id="hidden-on-mobile">
+<div class="only-on-mobile">
     <div id="messagesboxmobile">
     </div>
 </div>
diff --git a/index.ts b/index.ts
index 22bcaa9a1..70c8f6c1f 100644
--- a/index.ts
+++ b/index.ts
@@ -18,7 +18,6 @@ if (location.href.startsWith("http://buurtnatuur.be")) {
     window.location.replace("https://buurtnatuur.be");
 }
 
-let defaultLayout = "bookcases"
 if (location.href.indexOf("buurtnatuur.be") >= 0) {
     // Reload the https version. This is important for the 'locate me' button
     defaultLayout = "buurtnatuur"