diff --git a/package-lock.json b/package-lock.json
index ea37d302..90210459 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "vue": "^3.5.38",
         "vue-json-pretty": "^2.6.0",
         "vue-router": "^5.1.0",
+        "vue3-select-component": "^1.0.0",
         "zarrita": "^0.7.3"
       },
       "devDependencies": {
@@ -900,6 +901,24 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.2.tgz",
+      "integrity": "sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.7.tgz",
+      "integrity": "sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1686,6 +1705,41 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.17.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.17.3.tgz",
+      "integrity": "sha512-8Np/TFELpI0ySuJoVmjvOrQYXH/8sTX0Biv9szhFhY39xOdAAY+smrMxjxOum/ux3eM8MUJQsEJ0/R0UpvC8dw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.13.31",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.31.tgz",
+      "integrity": "sha512-wZMEoSf852jQqaf3Ika1J7PiBae6341LNy/2CxmIyn0XKDQXMuK41wVX+xp6G0yx8jyR95Ef+Tdr13DK7mbJtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.17.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@turf/boolean-point-in-polygon": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.2.0.tgz",
@@ -2970,6 +3024,18 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -4000,6 +4066,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
+      "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
+      "license": "MIT"
+    },
     "node_modules/delaunator": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
@@ -7242,6 +7314,12 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/ohash": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+      "license": "MIT"
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -7947,6 +8025,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reka-ui": {
+      "version": "2.9.10",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.9.10.tgz",
+      "integrity": "sha512-yuvZVTp4fWH2G3qk+ze/x6YYlyc2Xl1d+eMUlIYrKqzTowBKteoDoN17fitURmqSUck3mc7JbcYgp49DnGu2EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.13",
+        "@floating-ui/vue": "^1.1.6",
+        "@internationalized/date": "^3.5.0",
+        "@internationalized/number": "^3.5.0",
+        "@tanstack/vue-virtual": "^3.12.0",
+        "@vueuse/core": "^14.1.0",
+        "@vueuse/shared": "^14.1.0",
+        "aria-hidden": "^1.2.4",
+        "defu": "^6.1.5",
+        "ohash": "^2.0.11"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/zernonia"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.4.0"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -9588,6 +9691,18 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vue3-select-component": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue3-select-component/-/vue3-select-component-1.0.0.tgz",
+      "integrity": "sha512-KPLAClC7gfg/VkVd3uV8vRIhEtnETRP2kYq1YpFjZ8Mp3RlL31hDFPU9jQWxTgAoViVls/hLSfOZ2bctMbsZiw==",
+      "license": "MIT",
+      "dependencies": {
+        "reka-ui": "2.9.10"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/web-worker": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.5.0.tgz",
diff --git a/package.json b/package.json
index d01108b5..933e7975 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "vue": "^3.5.38",
     "vue-json-pretty": "^2.6.0",
     "vue-router": "^5.1.0",
+    "vue3-select-component": "^1.0.0",
     "zarrita": "^0.7.3"
   },
   "devDependencies": {
diff --git a/public/static/catalog.json b/public/static/catalog.json
index 8e9dd986..2e34246e 100644
--- a/public/static/catalog.json
+++ b/public/static/catalog.json
@@ -17,6 +17,11 @@
       "url": "https://storage.googleapis.com/cmip6/CMIP6/HighResMIP/MOHC/HadGEM3-GC31-HM/highresSST-present/r1i1p1f1/Amon/tas/gn/v20170831/",
       "tag": "regular"
     },
+    {
+      "title": "111km AWI-CM-1-1-MR day sfcWind",
+      "url": "https://storage.googleapis.com/cmip6/CMIP6/ScenarioMIP/AWI/AWI-CM-1-1-MR/ssp585/r1i1p1f1/day/sfcWind/gn/v20190529/",
+      "tag": "regular"
+    },
     {
       "title": "50km tripolar historical NOAA GFDL-ESM4 Omon tos",
       "url": "https://storage.googleapis.com/cmip6/CMIP6/CMIP/NOAA-GFDL/GFDL-ESM4/historical/r2i1p1f1/Omon/tos/gn/v20180701/",
@@ -27,15 +32,15 @@
       "url": "https://cmip6-pds.s3.amazonaws.com/CMIP6/CMIP/AWI/AWI-CM-1-1-MR/historical/r1i1p1f1/Oday/tos/gn/v20181218/",
       "tag": "irregular"
     },
-    {
-      "title": "WCRP Hackathon - P1D_mean_z7_atm",
-      "url": "https://s3.eu-dkrz-1.dkrz.cloud/wrcp-hackathon/data/ICON/d3hp003.zarr/P1D_mean_z7_atm",
-      "tag": "healpix"
-    },
     {
       "title": "dpp0066 - 2d_ml @ R02B06",
       "url": "https://gridlook.pages.dev/static/index_mr_dpp0066.json",
       "tag": "triangular"
+    },
+    {
+      "title": "50km eerie-future-ssp245-v20240618_P1M_mean_7 pr ts",
+      "url": "https://s3.waterpark.dkrz.de/eerie/eerie-future-ssp245-v20240618_P1M_mean_7.zarr",
+      "tag": "healpix"
     }
   ]
 }
diff --git a/src/main.ts b/src/main.ts
index c1450d75..6208c7b2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,4 @@
-import { definePreset } from "@primevue/themes";
-import Aura from "@primevue/themes/aura";
 import { createPinia } from "pinia";
-import PrimeVue from "primevue/config";
-import ToastService from "primevue/toastservice";
 import { createApp } from "vue";
 
 import App from "./App.vue";
@@ -13,33 +9,6 @@ app.directive("word-break", vWordBreak);
 
 const pinia = createPinia();
 
-const MyPreset = definePreset(Aura, {
-  semantic: {
-    primary: {
-      50: "var(--bulma-info-95)",
-      100: "var(--bulma-info-90)",
-      200: "var(--bulma-info-80)",
-      300: "var(--bulma-info-70)",
-      400: "var(--bulma-info-60)",
-      500: "var(--bulma-info-50)",
-      600: "var(--bulma-info-40)",
-      700: "var(--bulma-info-30)",
-      800: "var(--bulma-info-20)",
-      900: "var(--bulma-info-10)",
-      950: "var(--bulma-info-05)",
-    },
-  },
-  components: {
-    select: {},
-  },
-});
-
 app.use(router);
 app.use(pinia);
-app.use(PrimeVue, {
-  theme: {
-    preset: MyPreset,
-  },
-});
-app.use(ToastService);
 app.mount("#app");
diff --git a/src/store/store.ts b/src/store/store.ts
index a38cd41a..6bf6fb4b 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -150,7 +150,7 @@ export const useGlobeControlStore = defineStore("globeControl", {
       histogram: undefined as number[] | undefined, // selection-range histogram bins
       fullHistogram: undefined as number[] | undefined, // fixed histogram over full data range
       histogramSummary: undefined as THistogramSummary | undefined, // full-resolution (4096-bin) summary
-      colormap: "turbo" as TColorMap,
+      colormap: "viridis" as TColorMap,
       invertColormap: false,
       posterizeLevels: 0 as number,
       hideLowerBound: false,
diff --git a/src/ui/common/Toast.vue b/src/ui/common/Toast.vue
index 1d9e6844..d1edf50f 100644
--- a/src/ui/common/Toast.vue
+++ b/src/ui/common/Toast.vue
@@ -1,62 +1,59 @@
 <script lang="ts" setup>
-import Toast from "primevue/toast";
-type ToastTone = "info" | "success" | "warning" | "danger";
-
-const toastThemes: Record<string, { tone: ToastTone; icon: string }> = {
-  info: { tone: "info", icon: "fa-circle-info" },
-  success: { tone: "success", icon: "fa-check" },
-  warn: { tone: "warning", icon: "fa-triangle-exclamation" },
-  warning: { tone: "warning", icon: "fa-triangle-exclamation" },
-  error: { tone: "danger", icon: "fa-ban" },
-  danger: { tone: "danger", icon: "fa-ban" },
+import { ToastType, useToast, type TToastType } from "./useToast.ts";
+
+type TToastTheme = { tone: TToastType; icon: string };
+
+const { toasts, removeToast } = useToast();
+
+const toastThemes: Record<TToastType, TToastTheme> = {
+  [ToastType.INFO]: { tone: ToastType.INFO, icon: "fa-circle-info" },
+  [ToastType.SUCCESS]: { tone: ToastType.SUCCESS, icon: "fa-check" },
+  [ToastType.WARNING]: {
+    tone: ToastType.WARNING,
+    icon: "fa-triangle-exclamation",
+  },
+  [ToastType.DANGER]: { tone: ToastType.DANGER, icon: "fa-ban" },
 };
 
-const getToastTheme = (severity?: string) =>
-  toastThemes[severity ?? ""] ?? toastThemes.info;
+const getToastTheme = (type: TToastType): TToastTheme => toastThemes[type];
 </script>
 
 <template>
-  <Toast
-    unstyled
-    position="top-right"
-    :pt="{
-      message: { class: 'mb-3' },
-    }"
-  >
-    <template #container="{ message, closeCallback }">
-      <article
-        class="toast-card"
-        :class="`is-${getToastTheme(message.severity).tone}`"
-        role="alert"
+  <div class="toast-container" aria-live="polite" aria-atomic="false">
+    <article
+      v-for="toast in toasts"
+      :key="toast.id"
+      class="toast-card"
+      :class="`is-${getToastTheme(toast.type).tone}`"
+      role="alert"
+    >
+      <span class="toast-icon">
+        <i
+          class="fa-solid"
+          :class="getToastTheme(toast.type).icon"
+          aria-hidden="true"
+        />
+      </span>
+      <div class="toast-copy">
+        <p class="toast-title">
+          <span class="has-text-weight-semibold">
+            {{ toast.summary }}
+          </span>
+        </p>
+        <p v-if="toast.detail" class="toast-detail">
+          {{ toast.detail }}
+        </p>
+      </div>
+      <button
+        class="toast-close"
+        type="button"
+        aria-label="Close notification"
+        @click="removeToast(toast.id)"
       >
-        <span class="toast-icon">
-          <i
-            class="fa-solid"
-            :class="getToastTheme(message.severity).icon"
-            aria-hidden="true"
-          />
-        </span>
-        <div class="toast-copy">
-          <p class="toast-title">
-            <span class="has-text-weight-semibold">
-              {{ message.summary }}
-            </span>
-          </p>
-          <p v-if="message.detail" class="toast-detail">
-            {{ message.detail }}
-          </p>
-        </div>
-        <button
-          class="toast-close"
-          type="button"
-          aria-label="Close notification"
-          @click="closeCallback"
-        >
-          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
-        </button>
-      </article>
-    </template>
-  </Toast>
+        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+      </button>
+    </article>
+  </div>
 </template>
 
 <style lang="scss">
@@ -68,6 +65,16 @@ const getToastTheme = (severity?: string) =>
   background-color: color.adjust($accent, $lightness: 25%);
 }
 
+.toast-container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 50;
+  display: grid;
+  gap: 0.75rem;
+  pointer-events: none;
+}
+
 .toast-card {
   @include toast-accent(bulmaUt.$info);
   position: relative;
@@ -78,7 +85,7 @@ const getToastTheme = (severity?: string) =>
   border-radius: bulmaUt.$radius;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
   pointer-events: auto;
-  width: 28rem;
+  width: min(28rem, calc(100vw - 2rem));
 }
 
 .toast-card.is-success {
diff --git a/src/utils/logging.ts b/src/ui/common/useLog.ts
similarity index 56%
rename from src/utils/logging.ts
rename to src/ui/common/useLog.ts
index 3ebff31f..db616910 100644
--- a/src/utils/logging.ts
+++ b/src/ui/common/useLog.ts
@@ -1,19 +1,18 @@
-import { useToast } from "primevue/usetoast";
+import { ToastType, useToast } from "./useToast.ts";
 
-import { getErrorMessage, toNormalizedError } from "./errorHandling.ts";
+import { getErrorMessage, toNormalizedError } from "@/utils/errorHandling.ts";
 
 export function useLog() {
-  const toast = useToast();
+  const { addToast } = useToast();
 
   function logError(maybeError: unknown, context?: string) {
     const error = toNormalizedError(maybeError);
     console.error(context, error, error?.stack);
     const prefix = context ?? "Error";
-    toast.add({
-      summary: prefix,
+    addToast(prefix, {
       detail: `${getErrorMessage(error)}`,
-      severity: "error",
-      life: 4000,
+      duration: 4000,
+      type: ToastType.DANGER,
     });
   }
 
diff --git a/src/ui/common/useToast.ts b/src/ui/common/useToast.ts
new file mode 100644
index 00000000..897dc29e
--- /dev/null
+++ b/src/ui/common/useToast.ts
@@ -0,0 +1,56 @@
+import { ref, type Ref } from "vue";
+
+export const ToastType = {
+  INFO: "info",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger",
+} as const;
+
+export type TToastType = (typeof ToastType)[keyof typeof ToastType];
+
+export type TToast = {
+  id: number;
+  summary: string;
+  detail?: string;
+  type: TToastType;
+};
+
+export type TAddToastOptions = {
+  detail?: string;
+  duration?: number;
+  type?: TToastType;
+};
+
+type TUseToast = {
+  toasts: Ref<TToast[]>;
+  addToast: (summary: string, options?: TAddToastOptions) => number;
+  removeToast: (toastId: number) => void;
+};
+
+const toasts = ref<TToast[]>([]);
+let id = 0;
+
+export function useToast(): TUseToast {
+  function addToast(summary: string, options: TAddToastOptions = {}): number {
+    const toastId = id++;
+    const duration = options.duration ?? 3000;
+    const type = options.type ?? ToastType.INFO;
+    const toast: TToast = { id: toastId, summary, type };
+
+    if (options.detail !== undefined) {
+      toast.detail = options.detail;
+    }
+
+    toasts.value.push(toast);
+    globalThis.setTimeout(() => removeToast(toastId), duration);
+
+    return toastId;
+  }
+
+  function removeToast(toastId: number): void {
+    toasts.value = toasts.value.filter((t) => t.id !== toastId);
+  }
+
+  return { toasts, addToast, removeToast };
+}
diff --git a/src/ui/grids/Healpix.vue b/src/ui/grids/Healpix.vue
index fa107721..7241981a 100644
--- a/src/ui/grids/Healpix.vue
+++ b/src/ui/grids/Healpix.vue
@@ -43,12 +43,12 @@ import {
   HOVERED_GRID_POINT_STATUS,
   useGlobeControlStore,
 } from "@/store/store.ts";
+import { useLog } from "@/ui/common/useLog.ts";
 import {
   HISTOGRAM_SUMMARY_BINS,
   buildHistogramSummary,
   type THistogramSummary,
 } from "@/utils/histogram.ts";
-import { useLog } from "@/utils/logging.ts";
 
 const props = defineProps<{
   datasources?: TSources;
@@ -705,7 +705,6 @@ async function fetchAndRenderData(
     missingValue,
     fillValue
   );
-
   if (cellCoord) {
     const cellIndexMap = new Map<number, number>();
     for (let index = 0; index < cellCoord.length; index++) {
diff --git a/src/ui/grids/Regular.vue b/src/ui/grids/Regular.vue
index 6fb191e0..c3ec8949 100644
--- a/src/ui/grids/Regular.vue
+++ b/src/ui/grids/Regular.vue
@@ -46,7 +46,7 @@ import {
 import type { TSources } from "@/lib/types/GlobeTypes.ts";
 import { useUrlParameterStore } from "@/store/paramStore.ts";
 import { useGlobeControlStore } from "@/store/store.ts";
-import { useLog } from "@/utils/logging.ts";
+import { useLog } from "@/ui/common/useLog.ts";
 
 const props = defineProps<{
   datasources?: TSources;
@@ -816,6 +816,7 @@ function updateMeshMaterials(rawData: Float32Array) {
   const material = makeMaterial(rawData);
   updateProjectionUniforms(material, projectionHelper.value);
   setMeshMaterials(material);
+  updateColormap(meshes);
 }
 
 async function fetchAndRenderData(
diff --git a/src/ui/grids/Triangular.vue b/src/ui/grids/Triangular.vue
index 8aff7deb..53aa4ab9 100644
--- a/src/ui/grids/Triangular.vue
+++ b/src/ui/grids/Triangular.vue
@@ -26,7 +26,7 @@ import { makeInvertableGpuMeshMaterial } from "@/lib/shaders/gridShaders.ts";
 import type { TDimensionRange, TSources } from "@/lib/types/GlobeTypes.ts";
 import { useUrlParameterStore } from "@/store/paramStore.ts";
 import { useGlobeControlStore } from "@/store/store.ts";
-import { useLog } from "@/utils/logging.ts";
+import { useLog } from "@/ui/common/useLog.ts";
 
 const props = defineProps<{
   datasources?: TSources;
diff --git a/src/ui/grids/composables/useGridDataLoader.ts b/src/ui/grids/composables/useGridDataLoader.ts
index ed45f97a..5805caf8 100644
--- a/src/ui/grids/composables/useGridDataLoader.ts
+++ b/src/ui/grids/composables/useGridDataLoader.ts
@@ -3,7 +3,7 @@ import type * as zarr from "zarrita";
 
 import type { TSources } from "@/lib/types/GlobeTypes.ts";
 import { useGlobeControlStore } from "@/store/store.ts";
-import { useLog } from "@/utils/logging.ts";
+import { useLog } from "@/ui/common/useLog.ts";
 
 type TDataVar = zarr.Array<zarr.DataType, zarr.AsyncReadable>;
 type TGlobeControlStore = ReturnType<typeof useGlobeControlStore>;
diff --git a/src/ui/grids/composables/useGridSnapshot.ts b/src/ui/grids/composables/useGridSnapshot.ts
index e4cec1a8..5011afa2 100644
--- a/src/ui/grids/composables/useGridSnapshot.ts
+++ b/src/ui/grids/composables/useGridSnapshot.ts
@@ -12,7 +12,7 @@ import {
   type TSnapshotOptions,
 } from "@/lib/types/GlobeTypes.ts";
 import { useGlobeControlStore } from "@/store/store.ts";
-import { useLog } from "@/utils/logging.ts";
+import { useLog } from "@/ui/common/useLog.ts";
 
 type UseGridSnapshotOptions = {
   canvas: Ref<HTMLCanvasElement | undefined>;
diff --git a/src/ui/grids/composables/useSharedGridLogic.ts b/src/ui/grids/composables/useSharedGridLogic.ts
index 163ae4d7..ae22de3d 100644
--- a/src/ui/grids/composables/useSharedGridLogic.ts
+++ b/src/ui/grids/composables/useSharedGridLogic.ts
@@ -19,7 +19,7 @@ import { availableColormaps } from "@/lib/shaders/colormapShaders.ts";
 import { getColormapScaleOffset } from "@/lib/shaders/gridShaders.ts";
 import type { TSources } from "@/lib/types/GlobeTypes.ts";
 import { useGlobeControlStore } from "@/store/store.ts";
-import { useLog } from "@/utils/logging.ts";
+import { useLog } from "@/ui/common/useLog.ts";
 
 type TVoidFunction = () => void;
 type TAsyncVoidFunction = () => Promise<void>;
diff --git a/src/ui/overlays/Controls.vue b/src/ui/overlays/Controls.vue
index 6085b3fd..1adabe4e 100644
--- a/src/ui/overlays/Controls.vue
+++ b/src/ui/overlays/Controls.vue
@@ -33,12 +33,14 @@ import { MOBILE_BREAKPOINT } from "@/ui/common/viewConstants.ts";
 const props = defineProps<{
   modelInfo?: TModelInfo;
   currentSource: string;
+  infoPanelOpen: boolean;
 }>();
 
 defineEmits<{
   onSnapshot: [options: TSnapshotOptions];
   onRotate: [];
   toggleDisplay: [];
+  toggleInfoPanel: [];
 }>();
 
 // Bounds management types
@@ -310,6 +312,23 @@ defineExpose({
         <span class="ellipsis" :title="modelInfo.title">
           {{ modelInfo.title }}
         </span>
+        <button
+          type="button"
+          class="borderless-btn dataset-info-trigger ml-1"
+          :class="{ 'has-text-info': infoPanelOpen }"
+          :title="
+            infoPanelOpen
+              ? 'Close Dataset Info panel'
+              : 'Open Dataset Info panel'
+          "
+          aria-label="Dataset Info"
+          :aria-expanded="infoPanelOpen"
+          @click="() => $emit('toggleInfoPanel')"
+        >
+          <span class="icon">
+            <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+          </span>
+        </button>
       </div>
       <div v-else-if="loading" class="title-bar">
         <progress class="progress is-info" max="100"></progress>
@@ -432,6 +451,27 @@ defineExpose({
   order: 2;
 }
 
+.dataset-info-trigger {
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  font-size: 1.6rem;
+  opacity: 0.8;
+
+  &:hover {
+    color: inherit;
+    background: rgb(255 255 255 / 12%);
+    opacity: 1;
+  }
+
+  &.has-text-info {
+    color: var(--bulma-info) !important;
+    opacity: 1;
+  }
+}
+
 .header-container {
   flex-wrap: nowrap;
   overflow: visible;
diff --git a/src/ui/overlays/InfoPanel.vue b/src/ui/overlays/InfoPanel.vue
index 202e202b..2b9cc6ed 100644
--- a/src/ui/overlays/InfoPanel.vue
+++ b/src/ui/overlays/InfoPanel.vue
@@ -28,7 +28,7 @@ import { getMissingValue, getFillValue } from "@/lib/data/variableDecoding.ts";
 import { ZarrDataManager } from "@/lib/data/ZarrDataManager.ts";
 import type { TSources } from "@/lib/types/GlobeTypes.ts";
 import { useGlobeControlStore } from "@/store/store.ts";
-import { useLog } from "@/utils/logging.ts";
+import { useLog } from "@/ui/common/useLog.ts";
 
 const props = defineProps<{
   datasources?: TSources;
@@ -38,7 +38,6 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   close: [];
-  toggle: [];
   selectGridType: [gridType: T_GRID_TYPES];
 }>();
 
@@ -346,20 +345,6 @@ watch(
 </script>
 
 <template>
-  <!-- Toggle button -->
-  <button
-    v-if="!isOpen"
-    type="button"
-    class="button is-small is-info"
-    :title="isOpen ? 'Close info panel' : 'Open info panel'"
-    @click="emit('toggle')"
-  >
-    <span class="icon">
-      <i class="fa-solid fa-circle-info"></i>
-    </span>
-    <span>Dataset Info</span>
-  </button>
-
   <div class="info-panel" :class="[{ 'is-open': isOpen }]">
     <div class="info-panel-header">
       <h3 class="title is-5">Dataset Info</h3>
diff --git a/src/ui/overlays/controls/ColormapControls.vue b/src/ui/overlays/controls/ColormapControls.vue
index 6f30ed11..50b20e56 100644
--- a/src/ui/overlays/controls/ColormapControls.vue
+++ b/src/ui/overlays/controls/ColormapControls.vue
@@ -1,7 +1,16 @@
 <script lang="ts" setup>
 import { storeToRefs } from "pinia";
-import Select from "primevue/select";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
+import {
+  SelectListbox,
+  SelectOption,
+  SelectPopover,
+  SelectRoot,
+  SelectTrailingIcon,
+  SelectTrigger,
+  SelectValue,
+} from "vue3-select-component";
+import "vue3-select-component/styles.css";
 
 import ColorBar from "./ColorBar.vue";
 import { percentileFromBins, roundToDataPrecision } from "./colorbarUtils.ts";
@@ -33,6 +42,15 @@ const {
   histogramSummary,
 } = storeToRefs(store);
 
+type TColormapOption = {
+  label: TColorMap;
+  value: TColorMap;
+};
+
+const colormapOptions = computed<TColormapOption[]>(() =>
+  props.modelInfo.colormaps.map((value) => ({ label: value, value }))
+);
+
 const previousValue = ref(posterizeLevels.value);
 
 watch(posterizeLevels, (newVal) => {
@@ -172,30 +190,44 @@ function handleAutoContrast() {
     </div>
 
     <!-- Row: Colormap selector + options -->
-    <Select
+    <SelectRoot
       v-model="colormap"
-      :options="modelInfo.colormaps"
+      :options="colormapOptions"
       class="colormap-select mb-4"
-      @show="handleDropdownShow"
-      @hide="handleDropdownHide"
-      @change="handleDropdownChange"
+      data-assembled-select
+      @menu-opened="handleDropdownShow"
+      @menu-closed="handleDropdownHide"
+      @option-selected="handleDropdownChange"
     >
-      <template #value="{ value }">
-        <div class="cm-option">
-          <img :src="swatchSrc(value as TColorMap)" class="cm-swatch" alt="" />
-          <span class="cm-name">{{ value }}</span>
-        </div>
-      </template>
-      <template #option="{ option }">
-        <div
-          class="cm-option w-100"
-          @mouseenter="handleOptionHover(option as TColorMap)"
-        >
-          <img :src="swatchSrc(option as TColorMap)" class="cm-swatch" alt="" />
-          <span class="cm-name">{{ option }}</span>
-        </div>
-      </template>
-    </Select>
+      <SelectTrigger>
+        <SelectValue>
+          <div class="cm-option">
+            <img :src="swatchSrc(colormap)" class="cm-swatch" alt="" />
+            <span class="cm-name">{{ colormap }}</span>
+          </div>
+        </SelectValue>
+        <SelectTrailingIcon>
+          <i class="fa-solid fa-angle-down is-size-5"></i>
+        </SelectTrailingIcon>
+      </SelectTrigger>
+
+      <SelectPopover>
+        <SelectListbox>
+          <SelectOption
+            v-for="option in colormapOptions"
+            :key="option.value"
+            :value="option.value"
+            :label="option.label"
+            @mouseenter="handleOptionHover(option.value)"
+          >
+            <div class="cm-option w-100">
+              <img :src="swatchSrc(option.value)" class="cm-swatch" alt="" />
+              <span class="cm-name">{{ option.label }}</span>
+            </div>
+          </SelectOption>
+        </SelectListbox>
+      </SelectPopover>
+    </SelectRoot>
     <div class="columns is-mobile is-multiline is-vcentered compact-row px-1">
       <div class="column is-half">
         <button
@@ -280,42 +312,26 @@ function handleAutoContrast() {
   width: 100%;
   font-size: 1rem;
   font-family: inherit;
+  --vs-min-height: 2.5em;
+  --vs-padding-y: 0;
+  --vs-padding-x: 0.625em;
+  --vs-border: 1px solid var(--bulma-border, #dbdbdb);
+  --vs-border-radius: 4px;
+  --vs-background-color: var(--bulma-scheme-main, #fff);
+  --vs-text-color: var(--bulma-text, #363636);
+  --vs-outline-color: rgb(66, 88, 255);
+  --vs-outline-width: 3px;
+  --vs-trailing-icon-color: var(--bulma-link);
 }
 
-:deep(.p-select) {
-  width: 100%;
-  height: 2.5em;
-  border: 1px solid var(--bulma-border, #dbdbdb);
-  border-radius: 4px;
-  background-color: var(--bulma-scheme-main, #fff);
-  padding: 0 0.625em;
-  font-size: 1rem;
-  color: var(--bulma-text, #363636);
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-
-  &:hover {
-    border-color: var(--bulma-border-hover, #b5b5b5) !important;
-  }
-
-  &.p-focus {
-    border-color: rgb(66, 88, 255) !important;
-    box-shadow: rgba(66, 88, 255, 0.25) 0px 0px 0px 3px !important;
-  }
+:deep([data-select-trigger][aria-expanded="true"]),
+:deep([data-select-trigger]:focus-visible) {
+  box-shadow: rgba(66, 88, 255, 0.25) 0 0 0 3px;
 }
 
-:deep(.p-select-label) {
-  padding: 0;
+:deep([data-select-value]) {
   line-height: 1;
-  display: flex;
-  align-items: center;
   height: 100%;
-  overflow: hidden;
-}
-
-:deep(.p-select-dropdown) {
-  width: 1.75em;
-  color: var(--bulma-link);
 }
 
 .cm-option {
@@ -338,4 +354,14 @@ function handleAutoContrast() {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+:global([data-select-popover]) {
+  --vs-border: 1px solid var(--bulma-border, #dbdbdb);
+  --vs-border-radius: 4px;
+  --vs-menu-background-color: var(--bulma-scheme-main, #fff);
+  --vs-menu-z-index: 1000;
+  --vs-option-hover-background-color: var(--bulma-scheme-main-bis, #fafafa);
+  --vs-option-focused-background-color: var(--bulma-scheme-main-ter, #f5f5f5);
+  --vs-option-selected-background-color: var(--bulma-info-soft, #eef6fc);
+}
 </style>
diff --git a/src/ui/overlays/controls/LayerPanel.vue b/src/ui/overlays/controls/LayerPanel.vue
index d9934ee8..82c93c6e 100644
--- a/src/ui/overlays/controls/LayerPanel.vue
+++ b/src/ui/overlays/controls/LayerPanel.vue
@@ -27,7 +27,7 @@ import {
   type TLayerEntry,
   type TLayerKind,
 } from "@/store/store.ts";
-import { useLog } from "@/utils/logging.ts";
+import { useLog } from "@/ui/common/useLog.ts";
 
 const store = useGlobeControlStore();
 const {
diff --git a/src/ui/overlays/controls/ShareButton.vue b/src/ui/overlays/controls/ShareButton.vue
index ce51110c..ddc93294 100644
--- a/src/ui/overlays/controls/ShareButton.vue
+++ b/src/ui/overlays/controls/ShareButton.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { useToast } from "primevue/usetoast";
 import QRCode from "qrcode";
 import { ref, watch } from "vue";
 
 import PopupDialog from "./PopupDialog.vue";
 
-const toast = useToast();
+import { ToastType, useToast } from "@/ui/common/useToast.ts";
+
+const { addToast } = useToast();
 const dialogOpen = ref(false);
 const currentUrl = ref("");
 const qrCodeDataUrl = ref("");
@@ -33,11 +34,10 @@ async function generateQrCode(url: string) {
     });
   } catch {
     qrCodeDataUrl.value = "";
-    toast.add({
-      summary: "QR code unavailable",
+    addToast("QR code unavailable", {
       detail: "Could not generate a QR code for this URL",
-      severity: "warn",
-      life: 4000,
+      duration: 4000,
+      type: ToastType.WARNING,
     });
   } finally {
     isGeneratingQr.value = false;
@@ -95,18 +95,16 @@ async function shareUrl() {
   // Fall back to clipboard
   try {
     await navigator.clipboard.writeText(url);
-    toast.add({
-      summary: "Link copied",
+    addToast("Link copied", {
       detail: "The URL has been copied to your clipboard",
-      severity: "success",
-      life: 4000,
+      duration: 4000,
+      type: ToastType.SUCCESS,
     });
   } catch {
-    toast.add({
-      summary: "Failed to copy",
+    addToast("Failed to copy", {
       detail: "Could not copy the URL to clipboard",
-      severity: "error",
-      life: 4000,
+      duration: 4000,
+      type: ToastType.DANGER,
     });
   }
   close();
diff --git a/src/views/GlobeView.vue b/src/views/GlobeView.vue
index 58d57cc5..f40c046d 100644
--- a/src/views/GlobeView.vue
+++ b/src/views/GlobeView.vue
@@ -31,6 +31,7 @@ import {
 } from "@/store/usePresenterSync.ts";
 import { useUrlSync } from "@/store/useUrlSync.ts";
 import Toast from "@/ui/common/Toast.vue";
+import { useLog } from "@/ui/common/useLog.ts";
 import { isMobileDevice } from "@/ui/common/viewConstants.ts";
 import type { TCameraState } from "@/ui/grids/composables/useGridCameraState.ts";
 import GridCurvilinear from "@/ui/grids/Curvilinear.vue";
@@ -45,7 +46,6 @@ import { toggleTimeAnimation } from "@/ui/overlays/controls/useTimeAnimation.ts"
 import GlobeControls from "@/ui/overlays/Controls.vue";
 import HoverReadout from "@/ui/overlays/HoverReadout.vue";
 import InfoPanel from "@/ui/overlays/InfoPanel.vue";
-import { useLog } from "@/utils/logging.ts";
 
 const props = defineProps<{ src: string }>();
 
@@ -459,9 +459,11 @@ useEventListener(window, "keydown", (e: KeyboardEvent) => {
         ref="controls"
         :model-info="modelInfo"
         :current-source="props.src"
+        :info-panel-open="infoPanelOpen"
         @on-snapshot="makeSnapshot"
         @on-rotate="toggleRotate"
         @toggle-display="toggleDisplayWindow"
+        @toggle-info-panel="toggleInfoPanel"
       />
     </div>
 
@@ -501,7 +503,6 @@ useEventListener(window, "keydown", (e: KeyboardEvent) => {
         :grid-type="detectedGridType"
         :is-open="infoPanelOpen"
         @close="infoPanelOpen = false"
-        @toggle="toggleInfoPanel"
         @select-grid-type="selectGridType"
       />
       <AboutView />
diff --git a/src/views/HashGlobeView.vue b/src/views/HashGlobeView.vue
index 1fa61fca..30edd288 100644
--- a/src/views/HashGlobeView.vue
+++ b/src/views/HashGlobeView.vue
@@ -16,7 +16,7 @@ import type { TURLParameterValues } from "@/utils/urlParams.ts";
 type TParams = Partial<Record<TURLParameterValues, string>>;
 
 const DEFAULT_DATASET =
-  "https://s3.eu-dkrz-1.dkrz.cloud/wrcp-hackathon/data/ICON/d3hp003.zarr/P1D_mean_z7_atm";
+  "https://storage.googleapis.com/cmip6/CMIP6/ScenarioMIP/AWI/AWI-CM-1-1-MR/ssp585/r1i1p1f1/day/sfcWind/gn/v20190529/";
 
 const DEFAULT_CATALOG = "static/catalog.json";
 
diff --git a/tests/unit/utils/toast.test.ts b/tests/unit/utils/toast.test.ts
new file mode 100644
index 00000000..8dddbe9c
--- /dev/null
+++ b/tests/unit/utils/toast.test.ts
@@ -0,0 +1,37 @@
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+import { ToastType, useToast } from "@/ui/common/useToast.ts";
+
+const { addToast, toasts } = useToast();
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  toasts.value = [];
+});
+
+afterEach(() => {
+  vi.clearAllTimers();
+  vi.useRealTimers();
+  toasts.value = [];
+});
+
+it("adds toasts and removes them after their duration", () => {
+  const toastId = addToast("Saved", {
+    detail: "The layer was saved.",
+    duration: 10,
+    type: ToastType.SUCCESS,
+  });
+
+  expect(toasts.value).toEqual([
+    {
+      id: toastId,
+      summary: "Saved",
+      detail: "The layer was saved.",
+      type: ToastType.SUCCESS,
+    },
+  ]);
+
+  vi.advanceTimersByTime(10);
+
+  expect(toasts.value).toEqual([]);
+});