diff --git a/web/package-lock.json b/web/package-lock.json
index 37cc4bbe..145bd531 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -16,7 +16,7 @@
         "chroma-js": "3.2.0",
         "dayjs": "1.11.20",
         "django-s3-file-field": "1.1.0",
-        "html2canvas": "1.4.1",
+        "html2canvas-pro": "^2.0.2",
         "json-editor-vue": "0.18.1",
         "lodash": "4.18.1",
         "maplibre-gl": "4.7.1",
@@ -6020,17 +6020,17 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
-    "node_modules/html2canvas": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
-      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+    "node_modules/html2canvas-pro": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html2canvas-pro/-/html2canvas-pro-2.0.2.tgz",
+      "integrity": "sha512-9G/t0XgCZWonLwL0JwI7su6NdbOPUY7Ur4Ihpp8+XMaW9ibA2nDXF181Jr6tm94k8lX6sthpaXB3XqEnsMd5Cw==",
       "license": "MIT",
       "dependencies": {
         "css-line-break": "^2.1.0",
         "text-segmentation": "^1.0.3"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/https-proxy-agent": {
diff --git a/web/package.json b/web/package.json
index ccd41e1d..ebc4d284 100644
--- a/web/package.json
+++ b/web/package.json
@@ -24,7 +24,7 @@
     "chroma-js": "3.2.0",
     "dayjs": "1.11.20",
     "django-s3-file-field": "1.1.0",
-    "html2canvas": "1.4.1",
+    "html2canvas-pro": "^2.0.2",
     "json-editor-vue": "0.18.1",
     "lodash": "4.18.1",
     "maplibre-gl": "4.7.1",
diff --git a/web/src/components/ControlsBar.vue b/web/src/components/ControlsBar.vue
index 8b8530ed..8c7d3615 100644
--- a/web/src/components/ControlsBar.vue
+++ b/web/src/components/ControlsBar.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { debounce } from "lodash";
 import { ref, watch, computed } from "vue";
-import html2canvas from "html2canvas";
-import { Map } from "maplibre-gl";
+import html2canvas from "html2canvas-pro";
+import { Map, type LngLatBoundsLike } from "maplibre-gl";
 
 import JsonEditorVue from "json-editor-vue";
 import "vanilla-jsoneditor/themes/jse-theme-dark.css";
@@ -81,7 +82,7 @@ const userHasEditPermission = computed(() => {
 function createBasemapPreviews() {
   if (basemapList.value) {
     const map = mapStore.getMap();
-    const bounds = map.getBounds();
+    const bounds = map.getBounds().toArray() as LngLatBoundsLike;
     mapStore.availableBasemaps.forEach((basemap) => {
       if (basemap.id === undefined || basemap.style === undefined) return;
       if (basemapPreviews.value[basemap.id]) {
@@ -140,7 +141,7 @@ function setNewBasemapStyleFromTileURL() {
   }
 }
 
-function createNewBasemapPreview() {
+async function createNewBasemapPreview() {
   const map = mapStore.getMap();
   const center = map.getCenter();
   const zoom = map.getZoom();
@@ -153,7 +154,17 @@ function createNewBasemapPreview() {
   newBasemapPreview.value.setCenter(center);
   newBasemapPreview.value.setZoom(zoom);
   if (newBasemapStyleJSON.value) {
-    jsonErrors.value = validateStyleMin(newBasemapStyleJSON.value);
+    if (typeof newBasemapStyleJSON.value == "string") {
+      try {
+        const response = await fetch(newBasemapStyleJSON.value);
+        const content = await response.json();
+        jsonErrors.value = validateStyleMin(content);
+      } catch {
+        jsonErrors.value = [{ message: "Invalid URL." }];
+      }
+    } else {
+      jsonErrors.value = validateStyleMin(newBasemapStyleJSON.value);
+    }
     if (!jsonErrors.value?.length) {
       newBasemapPreview.value.setStyle(newBasemapStyleJSON.value);
       return;
@@ -288,8 +299,8 @@ function copyViewStateLink(viewState: ViewState) {
 
 watch(basemapList, createBasemapPreviews);
 watch(newBasemapTab, switchBasemapCreateTab);
-watch(newBasemapTileURL, setNewBasemapStyleFromTileURL);
-watch(newBasemapStyleJSON, createNewBasemapPreview);
+watch(newBasemapTileURL, debounce(setNewBasemapStyleFromTileURL, 1000));
+watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
 </script>
 
 <template>
diff --git a/web/src/components/map/ToggleCompareMap.vue b/web/src/components/map/ToggleCompareMap.vue
index 238d473c..ab2da121 100644
--- a/web/src/components/map/ToggleCompareMap.vue
+++ b/web/src/components/map/ToggleCompareMap.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useAppStore, useLayerStore, useMapStore } from "@/store";
 import { useMapCompareStore } from "@/store/compare";
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import type { Ref } from "vue";
 import { ToggleCompare } from "vue-maplibre-compare";
 import { oauthClient } from "@/api/auth";
 import "vue-maplibre-compare/dist/vue-maplibre-compare.css";
 import { addProtocol, AttributionControl, Popup } from "maplibre-gl";
-import type { StyleSpecification, Map } from "maplibre-gl";
+import { type StyleSpecification, Map } from "maplibre-gl";
 import { useTheme } from "vuetify";
 import { Protocol } from "pmtiles";
 import { storeToRefs } from "pinia";
@@ -246,10 +246,37 @@ const swiperColor = computed(() => {
     arrow: theme.global.current.value.colors["button-text"] as string,
   };
 });
+
+onMounted(() => {
+  if (!appStore.currentUser) {
+    const lightDefault =
+      "https://basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
+    const darkDefault =
+      "https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+    new Map({
+      container: "mapContainer",
+      attributionControl: false,
+      style: {
+        layers: [{ id: "light", type: "raster", source: "light" }],
+        sources: {
+          light: {
+            type: "raster",
+            tiles: [appStore.theme === "light" ? lightDefault : darkDefault],
+            maxzoom: 19,
+            tileSize: 256,
+          },
+        },
+        version: 8,
+      },
+      center: [0, 0],
+      zoom: 1, // Initial zoom level
+    });
+  }
+});
 </script>
 
 <template>
-  <div>
+  <div v-if="appStore.currentUser">
     <ToggleCompare
       :map-style-a="mapStyleA"
       :map-style-b="mapBStyle"
@@ -288,6 +315,7 @@ const swiperColor = computed(() => {
       <MapTooltip compare-map />
     </div>
   </div>
+  <div v-else id="mapContainer" class="map"></div>
 </template>
 
 <style scoped>
diff --git a/web/src/components/projects/ProjectConfig.vue b/web/src/components/projects/ProjectConfig.vue
index 291b1b1e..817d2374 100644
--- a/web/src/components/projects/ProjectConfig.vue
+++ b/web/src/components/projects/ProjectConfig.vue
@@ -574,7 +574,7 @@ watch(
 <style>
 .project-row {
   display: flex;
-  margin: 0px 8px;
+  margin: 8px;
   align-items: center;
   justify-content: space-between;
 }
diff --git a/web/src/components/sidebars/SideBars.vue b/web/src/components/sidebars/SideBars.vue
index 608057a2..cec2b7f4 100644
--- a/web/src/components/sidebars/SideBars.vue
+++ b/web/src/components/sidebars/SideBars.vue
@@ -189,24 +189,18 @@ function togglePanelVisibility(id: string) {
               v-tooltip="'Panel Visibility'"
             ></v-icon>
           </template>
-          <v-list
-            :items="panelStore.panelArrangement.filter((p) => p.closeable)"
-            item-title="label"
-            item-value="id"
-            selectable
-            :selected="panelStore.panelArrangement.filter((p) => p.visible)"
-            @click:select="(item) => togglePanelVisibility(item.id as string)"
-            select-strategy="leaf"
-            return-object
-          >
-            <template v-slot:prepend="{ item, isSelected }">
-              <v-list-item-action start>
-                <v-checkbox-btn
-                  :model-value="isSelected"
-                  @change="togglePanelVisibility(item.id)"
-                ></v-checkbox-btn>
-              </v-list-item-action>
-            </template>
+          <v-list>
+            <v-list-item
+              v-for="item in panelStore.panelArrangement.filter(
+                (p) => p.closeable,
+              )"
+              @click="togglePanelVisibility(item.id)"
+            >
+              <v-checkbox-btn
+                :model-value="item.visible"
+                :label="item.label"
+              ></v-checkbox-btn>
+            </v-list-item>
           </v-list>
         </v-menu>
       </div>
@@ -304,15 +298,11 @@ function togglePanelVisibility(id: string) {
   max-height: calc(100% - 100px);
 }
 
-.v-icon {
-  color: rgb(var(--v-theme-secondary-text)) !important;
-}
-
-.v-btn.bg-primary .v-icon {
-  color: rgb(var(--v-theme-button-text)) !important;
-}
-
 .v-text-field {
   background-color: rgb(var(--v-theme-background));
 }
+
+.v-checkbox-btn .v-label {
+  margin-left: 5px;
+}
 </style>