diff --git a/src/BubblingGalaxies.vue b/src/BubblingGalaxies.vue
index a9ff2fa..550cf78 100644
--- a/src/BubblingGalaxies.vue
+++ b/src/BubblingGalaxies.vue
@@ -155,19 +155,34 @@
             >
               About
             </v-btn>
-            <DetailSummary
+            <div
               v-if="!(showSplashScreen || showCrawl) && (showSimulation || selectedGalleryItem) && isLandscape"
-              v-model="labelOpen"
-              :title="currentLabel.title"
-              :use-internal-dialog="false"
-              @open="() => { aboutMode = false; showInfoSheet = !showImageCard; }"
+              class="label-stack"
             >
-              <ImageText
-                v-if="showSimulation || selectedGalleryItem"
-                show-image
-                :which="(showSimulation ? 'simulation' : selectedGalleryItem!.get_name()) as PhantomImageNames"
+              <DetailSummary
+                v-if="showSimulation"
+                v-model="labelOpen"
+                :title="currentLabel.title"
+                :use-internal-dialog="false"
+                @open="() => { aboutMode = false; showInfoSheet = !showImageCard; }"
               />
-            </DetailSummary>
+              <template v-else>
+                <DetailSummary
+                  v-if="foregroundGalleryItem"
+                  v-model="labelOpen"
+                  :title="foregroundLabel.title"
+                  :use-internal-dialog="false"
+                  @open="() => openGalleryInfo(foregroundGalleryItem)"
+                />
+                <DetailSummary
+                  v-if="backgroundGalleryItem"
+                  v-model="labelOpen"
+                  :title="backgroundLabel.title"
+                  :use-internal-dialog="false"
+                  @open="() => openGalleryInfo(backgroundGalleryItem)"
+                />
+              </template>
+            </div>
             <v-btn
               v-hide="!showSimulation"
               class="blur-button"
@@ -209,19 +224,34 @@
               :color="buttonColor"
               @activate="isWWT3D = !isWWT3D"
             /> -->
-            <DetailSummary
+            <div
               v-if="!(showSplashScreen || showCrawl) && (showSimulation || selectedGalleryItem) && !isLandscape"
-              v-model="labelOpen"
-              :title="currentLabel.title"
-              :use-internal-dialog="false"
-              @open="() => { aboutMode = false; showInfoSheet = !showImageCard; }"
+              class="label-stack"
             >
-              <ImageText
-                v-if="showSimulation || selectedGalleryItem"
-                show-image
-                :which="(showSimulation ? 'simulation' : selectedGalleryItem!.get_name()) as PhantomImageNames"
+              <DetailSummary
+                v-if="showSimulation"
+                v-model="labelOpen"
+                :title="currentLabel.title"
+                :use-internal-dialog="false"
+                @open="() => { aboutMode = false; showInfoSheet = !showImageCard; }"
               />
-            </DetailSummary>
+              <template v-else>
+                <DetailSummary
+                  v-if="foregroundGalleryItem"
+                  v-model="labelOpen"
+                  :title="foregroundLabel.title"
+                  :use-internal-dialog="false"
+                  @open="() => openGalleryInfo(foregroundGalleryItem)"
+                />
+                <DetailSummary
+                  v-if="backgroundGalleryItem"
+                  v-model="labelOpen"
+                  :title="backgroundLabel.title"
+                  :use-internal-dialog="false"
+                  @open="() => openGalleryInfo(backgroundGalleryItem)"
+                />
+              </template>
+            </div>
             <icon-button
               v-if="!showImageCard"
               :color="buttonColor"
@@ -318,24 +348,35 @@
               <span>{{ simulationTime.toFixed(1) }} million years</span>
             </div>
 
-            <Gallery
+            <ForegroundBackgroundPicker
               v-show="ready && !showSimulation"
               v-model:open="galleryOpen"
+              v-model:places="galleryPlaces"
+              v-model:foreground="foregroundGalleryItem"
+              v-model:background="backgroundGalleryItem"
+              selected-color="limegreen"
+              :columns="1"
+              width="105px"
+              persist="Optical (Kitt Peak)"
+              :hide-persisted="true"
+              :disabled="showImageCard"
+            />
+            <Gallery
+              v-show="false"
+              v-model:open="galleryLoaderOpen"
               v-model:selected-places="selectedGalleryItems"
               v-model:places="galleryPlaces"
               wtml-url="./ngc628_datasets.wtml"
-              :single-select="true"
+              :single-select="false"
               selected-color="limegreen"
               show-opacity
               :columns="1"
               width="105px"
               persist="Optical (Kitt Peak)"
               :hide-persisted="true"
-              collapse-on-select
               :hide-gallery-layers="showSimulation || showSplashScreen"
-              :preview-index="4"
-              :disabled="showImageCard"
-              :closed-text="showImageCard ? '' : undefined"
+              :disabled="true"
+              use-layer-selection-order
             />
 
             <!-- <DetailSummary
@@ -436,10 +477,10 @@
           </p>
         </div>
         <ImageText
-          v-else-if="showSimulation || selectedGalleryItem"
+          v-else-if="showSimulation || infoGalleryItem || selectedGalleryItem"
           show-heading
           show-image
-          :which="(showSimulation ? 'simulation' : selectedGalleryItem!.get_name()) as PhantomImageNames"
+          :which="(showSimulation ? 'simulation' : (infoGalleryItem ?? selectedGalleryItem)!.get_name()) as PhantomImageNames"
         />
       </InformationSheet>
     </component>
@@ -462,6 +503,7 @@ import SplitScreenSvg from "./components/SplitScreenSvg.vue";
 
 import { WWTControl } from "@wwtelescope/engine";
 
+import ForegroundBackgroundPicker from "./components/ForegroundBackgroundPicker.vue";
 import Gallery from "./components/Gallery.vue";
 
 
@@ -542,6 +584,7 @@ const showModel = ref(false);
 
 const showImageCard = ref(false);
 const galleryOpen = ref(false);
+const galleryLoaderOpen = ref(false);
 const imageCardIndex = ref(100);
 const imageCardIndexMin = 100;
 const imageCardIndexMax = 300;
@@ -558,6 +601,9 @@ const layersToMove = computed(() => {
 const isets = ref<Imageset[]>([]);
 const selectedGalleryItems = ref<Place[]>([]);
 const selectedGalleryItem = computed(() => selectedGalleryItems.value[selectedGalleryItems.value.length - 1] ?? null);
+const foregroundGalleryItem = ref<Place | null>(null);
+const backgroundGalleryItem = ref<Place | null>(null);
+const infoGalleryItem = ref<Place | null>(null);
 watch(selectedGalleryItem, (newPlace, oldPlace) => {
   if (oldPlace) {
     console.log("Deselecting place", oldPlace.get_name());
@@ -573,6 +619,15 @@ watch(selectedGalleryItems, (newPlaces, oldPlaces) => {
 });
 const galleryPlaces = ref<Place[]>([]);
 
+watch([backgroundGalleryItem, foregroundGalleryItem], ([background, foreground]) => {
+  selectedGalleryItems.value = [background, foreground].filter((place): place is Place => place !== null);
+});
+
+watch(galleryPlaces, (places) => {
+  if (foregroundGalleryItem.value !== null) return;
+  foregroundGalleryItem.value = places.find(p => p.get_name() === "Infrared Stars & Dust (JWST)") ?? null;
+});
+
 const labelOpen = ref(false);
 
 interface LabelInfo {
@@ -613,9 +668,23 @@ const labelTitles: Record<PhantomImageNames | string, LabelInfo> = {
 
 const currentLabel = computed(() => {
   if (showSimulation.value) return labelTitles['Simulation on Sky'];
-  return labelTitles[selectedGalleryItem.value?.get_name() ?? ''] ?? { title: '', content: '' };
+  return labelForPlace(infoGalleryItem.value ?? selectedGalleryItem.value);
 });
 
+const foregroundLabel = computed(() => labelForPlace(foregroundGalleryItem.value));
+const backgroundLabel = computed(() => labelForPlace(backgroundGalleryItem.value));
+
+function labelForPlace(place: Place | null) {
+  return labelTitles[place?.get_name() ?? ''] ?? { title: '', content: '' };
+}
+
+function openGalleryInfo(place: Place | null) {
+  if (!place) return;
+  infoGalleryItem.value = place;
+  aboutMode.value = false;
+  showInfoSheet.value = !showImageCard.value;
+}
+
 const showSimulation = ref(false);
 
 
@@ -798,7 +867,7 @@ function goToGalleryItem(name: string, instant=false) {
   if (place === null) {
     return;
   }
-  selectedGalleryItems.value = [place];
+  foregroundGalleryItem.value = place;
 
   const iset = place.get_studyImageset() ?? place.get_backgroundImageset();
   if (iset) {
@@ -835,6 +904,7 @@ watch(showImageCard, (showing) => {
     showSimulation.value = false;
     showInfoSheet.value = false;
     galleryOpen.value = false;
+    backgroundGalleryItem.value = null;
     goToGalleryItem("Infrared Stars & Dust (JWST)");
   }
 });
@@ -1050,6 +1120,18 @@ and remember, position:absolute is still a positioned parent, so children can be
   margin-bottom: 10px;
 }
 
+.label-stack {
+  align-self: flex-start;
+  margin-bottom: -999px;
+  overflow: visible;
+  pointer-events: auto;
+  max-width: calc(100% - 7em);
+}
+
+.label-stack .expansion-panel {
+  padding-block: 6px;
+}
+
 #center-buttons {
   display: flex;
   flex-direction: row;
diff --git a/src/components/AltGalleryItemSelector.vue b/src/components/AltGalleryItemSelector.vue
new file mode 100644
index 0000000..c44e960
--- /dev/null
+++ b/src/components/AltGalleryItemSelector.vue
@@ -0,0 +1,319 @@
+<template>
+  <div class="alt-gallery-item-selector">
+    <v-select
+      v-model="selectedKey"
+      :items="selectItems"
+      :placeholder="`Select ${label}`"
+      :clearable="true"
+      :disabled="disabled"
+      density="compact"
+      variant="outlined"
+      hide-details
+      single-line
+      theme="dark"
+      :class="['agls__select', { 'agls__select--active': active, 'agls__select--selected': selected }]"
+      @update:menu="(val: boolean) => val && emit('activate')"
+    >
+      <!-- What shows inside the closed field when a value is selected -->
+      <template #selection="{ item }">
+        <div class="agls__selection">
+          <span
+            v-if="item.thumbnail"
+            class="agls__thumb"
+            :style="{ backgroundImage: `url('${item.thumbnail}')` }"
+          />
+          <span class="agls__name">{{ item.title }}</span>
+        </div>
+      </template>
+
+      <!-- Each row in the open dropdown -->
+      <template #item="{ item, props: itemProps }">
+        <v-list-item v-bind="itemProps">
+          <template #title>
+            <div class="agls__item">
+              <span
+                class="agls__item-thumb"
+                :style="{ backgroundImage: `url('${item.thumbnail}')` }"
+              />
+              <span class="agls__item-name">{{ item.title }}</span>
+            </div>
+          </template>
+        </v-list-item>
+      </template>
+    </v-select>
+
+    <!-- Opacity slider — same structure as GalleryItemSelector -->
+    <div
+      v-if="place"
+      class="agls__opacity"
+    >
+      <span class="agls__opacity-label">{{ label }} opacity</span>
+      <GalleryItem
+        :place="place"
+        :show-opacity="true"
+        :opacity="getOpacity(place)"
+        borderless
+        hide-image
+        hide-label
+        @update:opacity="setOpacity"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { engineStore } from "@wwtelescope/engine-pinia";
+import { Imageset, ImageSetLayer, Place } from "@wwtelescope/engine";
+import GalleryItem from "./GalleryItem.vue";
+
+interface SelectItem {
+  title: string;
+  value: string;
+  thumbnail: string | null;
+}
+
+const props = withDefaults(defineProps<{
+  active?: boolean;
+  disabled?: boolean;
+  label: string;
+  opacity?: number | null;
+  places: Place[];
+  selected?: boolean;
+}>(), {
+  active: false,
+  disabled: false,
+  opacity: null,
+  selected: false,
+});
+
+const emit = defineEmits<{
+  "activate": [];
+  "update:opacity": [value: number];
+}>();
+
+const place = defineModel<Place | null>({ required: false, default: null });
+const selectedKey = ref<string | null>(null);
+const placeOpacities = ref<Record<string, number>>({});
+const store = engineStore();
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function getImageset(p: Place): Imageset | null {
+  return p.get_backgroundImageset() ?? p.get_studyImageset();
+}
+
+function getThumbnailUrl(p: Place): string | null {
+  return getImageset(p)?.get_thumbnailUrl() || p.get_thumbnailUrl() || null;
+}
+
+function getPlaceKey(p: Place): string {
+  const imageset = getImageset(p);
+  if (!imageset) return p.get_name();
+  return imageset.get_url() || imageset.get_name();
+}
+
+function imagesetLayerForPlace(p: Place): ImageSetLayer | null {
+  const imageset = getImageset(p);
+  if (!imageset) return null;
+  const url = imageset.get_url();
+  const name = imageset.get_name();
+  for (const guid in store.imagesetLayers) {
+    const layerImageset = store.imagesetForLayer(guid);
+    if (layerImageset?.get_url() === url || layerImageset?.get_name() === name) {
+      return store.imagesetLayerById(guid);
+    }
+  }
+  return null;
+}
+
+// ── Items for v-select ─────────────────────────────────────────────────────
+
+const selectItems = computed<SelectItem[]>(() =>
+  props.places.map(p => ({
+    title: p.get_name(),
+    value: getPlaceKey(p),
+    thumbnail: getThumbnailUrl(p),
+  }))
+);
+
+// ── Keep selectedKey ↔ place in sync ───────────────────────────────────────
+
+// Outer Place model changes → update the string key v-select uses
+watch(place, (p) => {
+  selectedKey.value = p ? getPlaceKey(p) : null;
+}, { immediate: true });
+
+// User picks a key in the dropdown → resolve back to a Place
+watch(selectedKey, (key) => {
+  if (key === null) {
+    place.value = null;
+  } else {
+    place.value = props.places.find(p => getPlaceKey(p) === key) ?? null;
+  }
+});
+
+// ── Imageset layer (for opacity sync) ─────────────────────────────────────
+
+const imagesetLayer = computed(() => {
+  if (place.value === null) return null;
+  return imagesetLayerForPlace(place.value);
+});
+
+function getOpacity(p: Place): number {
+  if (props.opacity !== null) return props.opacity;
+  return placeOpacities.value[getPlaceKey(p)] ?? 1;
+}
+
+function setOpacity(opacity: number) {
+  if (!place.value) return;
+  placeOpacities.value[getPlaceKey(place.value)] = opacity;
+  emit("update:opacity", opacity);
+  imagesetLayer.value?.set_opacity(opacity);
+}
+
+watch(imagesetLayer, (layer) => {
+  if (!place.value || !layer) return;
+  layer.set_opacity(getOpacity(place.value));
+});
+</script>
+
+<style lang="less">
+.alt-gallery-item-selector {
+  // ── Field (closed state) ───────────────────────────────────────
+  .v-field {
+    min-height: 34px;
+    font-size: 0.72rem;
+    font-weight: bold;
+    background: rgba(255, 255, 255, 0.08) !important;
+  }
+
+  .v-field__input {
+    min-height: 34px;
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 0.72rem;
+  }
+
+  .v-field__append-inner {
+    padding-top: 5px;
+  }
+
+  // Active: outline matching gls__button--active
+  .agls__select--active .v-field {
+    outline: 2px solid rgba(160, 160, 160, 0.9);
+    outline-offset: 0;
+  }
+
+  // Selected: visible border matching gls__button--selected
+  .agls__select--selected .v-field__outline {
+    --v-field-border-opacity: 0.65;
+  }
+
+  // ── Selected value display inside the closed field ─────────────
+  .agls__selection {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .agls__thumb {
+    flex: 0 0 34px;
+    width: 34px;
+    height: 22px;
+    border-radius: 3px;
+    background-position: center;
+    background-size: 200%;
+    background-repeat: no-repeat;
+  }
+
+  .agls__name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.68rem;
+    font-weight: bold;
+    line-height: 1.1;
+  }
+
+  // ── Dropdown list items ────────────────────────────────────────
+  // (also defined at top-level below — menu is teleported out of this DOM subtree)
+
+  // ── Opacity slider (identical to GalleryItemSelector) ──────────
+  .agls__opacity {
+    margin-top: 2px;
+  }
+
+  .agls__opacity-label {
+    display: block;
+    font-size: 0.66rem;
+    opacity: 0.8;
+    margin-bottom: 0;
+  }
+
+  .agls__opacity .gallery-item {
+    width: 100%;
+    height: auto;
+    border: none;
+    cursor: default;
+    --image-width: 100%;
+  }
+
+  .agls__opacity .gallery-opacity {
+    width: 100%;
+    margin: -2px 0 0;
+  }
+}
+
+// ── Dropdown item styles (top-level because v-select menu is teleported to body) ──
+.agls__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.agls__item-thumb {
+  flex: 0 0 56px;
+  width: 56px;
+  height: 38px;
+  border-radius: 3px;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.agls__item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  line-height: 1.2;
+}
+
+// Open-mode size overrides (mirrors fg_picker--open .gallery-item-selector rules)
+.fg_picker--open {
+  .alt-gallery-item-selector {
+    .v-field {
+      min-height: 38px;
+    }
+
+    .v-field__input {
+      min-height: 38px;
+    }
+
+    .agls__thumb {
+      flex-basis: 40px;
+      width: 40px;
+    }
+
+    .agls__opacity-label {
+      font-size: 0.68rem;
+    }
+  }
+}
+</style>
diff --git a/src/components/ForegroundBackgroundPicker.vue b/src/components/ForegroundBackgroundPicker.vue
new file mode 100644
index 0000000..f2903bc
--- /dev/null
+++ b/src/components/ForegroundBackgroundPicker.vue
@@ -0,0 +1,518 @@
+<template>
+  <div
+    :class="['fg_picker', {'gallery-open': open, 'fg_picker--open': open}]"
+    :style="cssVars"
+  >
+    <div
+      v-if="!open"
+      :class="['fg_closed', 'blurred', { 'fg_closed--row': closedRow }]"
+      tabindex="0"
+      @click="openPicker"
+      @keyup.enter="openPicker"
+    >
+      <div
+        class="fg_closed_header"
+      >
+        <span class="fg_closed_title noselect">Choose Views</span>
+      </div>
+      <div
+        class="fg_closed_content"
+      >
+        <GalleryItem
+          v-for="{ which, place } of selectedPlaces"
+          :key="`${which}-${place.get_name()}`"
+          :place="place"
+          :show-opacity="true"
+          :opacity="getOpacity(place)"
+          borderless
+          :hide-label="!showLabel"
+          @update:opacity="(opacity) => setOpacity(place, opacity)"
+        />
+      </div>
+    </div>
+    <div
+      v-else
+      class="fg_select blurred"
+    >
+      <!-- <div
+        v-if="activePick !== null"
+        class="fg_gallery"
+      >
+        <div
+          class="fg_gallery_header"
+        >
+          <span class="fg_gallery_title noselect">Choose Views</span>
+          <button
+            class="fg_gallery_close"
+            type="button"
+            @click="closeMiniGallery"
+            @keyup.enter="closeMiniGallery"
+          >
+            <v-icon
+              icon="mdi-close"
+              tabindex="0"
+            />
+          </button>
+        </div>
+        <div
+          class="fg_gallery_content"
+        >
+          <GalleryItem
+            v-for="[index, place] of shownPlaces.entries()"
+            :key="index"
+            :class="{ 'fg_item--selected': isActivePickSelection(place) }"
+            :place="place"
+            @click="selectPlace(place)"
+          />
+        </div>
+      </div> -->
+      <div
+        class="fg_controls pl-2 pr-2 pt-1 pb-2"
+      >
+        <div class="fg_controls_header">
+          <span class="fg_controls_title noselect">Choose Views</span>
+          <v-btn
+            class="fg_close"
+            icon="mdi-close"
+            size="x-small"
+            variant="text"
+            @click="closePicker"
+          />
+        </div>
+        <!-- <GalleryItemSelector
+          v-model="foreground"
+          label="Foreground"
+          :active="activePick === 'foreground'"
+          :selected="foreground !== null"
+          :opacity="foreground === null ? null : getOpacity(foreground)"
+          :disabled="disabled"
+          @activate="activatePick('foreground')"
+          @update:opacity="(opacity) => foreground && setOpacity(foreground, opacity)"
+        />
+        <GalleryItemSelector
+          v-model="background"
+          label="Background"
+          :active="activePick === 'background'"
+          :selected="background !== null"
+          :opacity="background === null ? null : getOpacity(background)"
+          :disabled="disabled"
+          @activate="activatePick('background')"
+          @update:opacity="(opacity) => background && setOpacity(background, opacity)"
+        /> -->
+        <AltGalleryItemSelector
+          v-model="foreground"
+          label="Foreground"
+          :places="shownPlaces"
+          :active="activePick === 'foreground'"
+          :selected="foreground !== null"
+          :opacity="foreground === null ? null : getOpacity(foreground)"
+          :disabled="disabled"
+          @activate="activatePick('foreground')"
+          @update:opacity="(opacity) => foreground && setOpacity(foreground, opacity)"
+        />
+        <AltGalleryItemSelector
+          v-model="background"
+          label="Background"
+          :places="shownPlaces"
+          :active="activePick === 'background'"
+          :selected="background !== null"
+          :opacity="background === null ? null : getOpacity(background)"
+          :disabled="disabled"
+          @activate="activatePick('background')"
+          @update:opacity="(opacity) => background && setOpacity(background, opacity)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { engineStore } from "@wwtelescope/engine-pinia";
+import { Imageset, ImageSetLayer, Place } from "@wwtelescope/engine";
+// import GalleryItemSelector from "./GalleryItemSelector.vue";
+import AltGalleryItemSelector from "./AltGalleryItemSelector.vue";
+import GalleryItem from "./GalleryItem.vue";
+
+export interface ForegroundBackgroundPickerProps {
+  columns?: number | string;
+  width?: string;
+  selectWidth?: string;
+  maxHeight?: string;
+  itemHeight?: string;
+  selectedColor?: string;
+  persist?: string | null;
+  hidePersisted?: boolean;
+  disabled?: boolean;
+  closedRow?: boolean;
+  showLabel?: boolean;
+}
+
+
+const props = withDefaults(defineProps<ForegroundBackgroundPickerProps>(), {
+  columns: "auto-fit",
+  width: "300px",
+  selectWidth: "240px",
+  maxHeight: "500px",
+  itemHeight: "auto",
+  selectedColor: "dodgerblue",
+  persist: null,
+  hidePersisted: false,
+  disabled: false,
+  closedRow: false,
+  showLabel: false,
+});
+
+const open = defineModel<boolean>("open", { required: false, default: false });
+const places = defineModel<Place[]>("places", { required: false, default: () => [] });
+const foreground = defineModel<Place | null>("foreground", { required: false, default: null });
+const background = defineModel<Place | null>("background", { required: false, default: null });
+const activePick = ref<"foreground" | "background" | null>(null);
+const placeOpacities = ref<Record<string, number>>({});
+const store = engineStore();
+
+const selectedPlaces = computed(() => {
+  return [
+    { which: "foreground", place: foreground.value },
+    { which: "background", place: background.value },
+  ].filter((item): item is { which: string, place: Place } => item.place !== null);
+});
+
+const shownPlaces = computed(() => {
+  if (!props.hidePersisted) return places.value;
+  return places.value.filter(p => (p.get_backgroundImageset() ?? p.get_studyImageset())?.get_name() !== props.persist);
+});
+
+const cssVars = computed(() => {
+  return {
+    "--column-count": props.columns,
+    "--selected-color": props.selectedColor,
+    "--gallery-width": props.width,
+    "--fg-picker-open-width": props.selectWidth,
+    "--gallery-max-height": props.maxHeight,
+    "--gallery-item-height": props.itemHeight,
+  };
+});
+
+function _isActivePickSelection(place: Place) {
+  if (activePick.value === "foreground") {
+    return foreground.value === place;
+  }
+
+  if (activePick.value === "background") {
+    return background.value === place;
+  }
+
+  return false;
+}
+
+function getImageset(place: Place): Imageset | null {
+  return place.get_backgroundImageset() ?? place.get_studyImageset();
+}
+
+function imagesetLayerForPlace(place: Place): ImageSetLayer | null {
+  const imageset = getImageset(place);
+  if (!imageset) return null;
+
+  const url = imageset.get_url();
+  const name = imageset.get_name();
+  for (const guid in store.imagesetLayers) {
+    const layerImageset = store.imagesetForLayer(guid);
+    if (layerImageset?.get_url() === url || layerImageset?.get_name() === name) {
+      return store.imagesetLayerById(guid);
+    }
+  }
+
+  return null;
+}
+
+function getPlaceKey(place: Place): string {
+  const imageset = getImageset(place);
+  if (!imageset) {
+    return place.get_name();
+  }
+
+  return imageset.get_url() || imageset.get_name();
+}
+
+function getOpacity(place: Place): number {
+  const opacity = placeOpacities.value[getPlaceKey(place)];
+  return opacity ?? 1;
+}
+
+function setOpacity(place: Place, opacity: number) {
+  placeOpacities.value[getPlaceKey(place)] = opacity;
+  imagesetLayerForPlace(place)?.set_opacity(opacity);
+}
+
+function activatePick(which: "foreground" | "background") {
+  if (props.disabled) return;
+  activePick.value = which;
+  open.value = true;
+}
+
+function openPicker() {
+  if (props.disabled) return;
+  activePick.value = null;
+  open.value = true;
+}
+
+function closePicker() {
+  activePick.value = null;
+  open.value = false;
+}
+
+function _closeMiniGallery() {
+  activePick.value = null;
+}
+
+function _selectPlace(place: Place) {
+  if (activePick.value === "foreground") {
+    foreground.value = foreground.value === place ? null : place;
+  } else if (activePick.value === "background") {
+    background.value = background.value === place ? null : place;
+  }
+}
+</script>
+
+<style lang="less">
+.fg_picker {
+  transition-property: height, width;
+  transition: 0.5s ease-out;
+  pointer-events: auto;
+
+  .blurred {
+    background: transparent;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6px);
+  }
+  
+  &.gallery-open {
+    .blurred {
+      background: rgba(0,0,0,0.5);
+    }
+  }
+
+  .fg_closed {
+    border-radius: 3px;
+    border: solid 1px white;
+    position: relative;
+    height: fit-content;
+    width: calc(var(--gallery-width) + 10px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .fg_closed_header {
+    width: 100%;
+    display: inline-grid;
+    align-items: center;
+    text-align: center;
+    padding-block: 4px;
+  }
+
+  .fg_closed_title {
+    margin: auto;
+    font-weight: bold;
+    font-size: 0.75rem;
+  }
+
+  .fg_closed--row {
+    width: fit-content;
+
+    .fg_closed_content {
+      flex-direction: row;
+    }
+  }
+
+  .fg_closed_content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 5px;
+
+    .gallery-item {
+      border: none;
+      border-radius: 3px;
+      cursor: pointer;
+      width: var(--gallery-width);
+      height: auto;
+      overflow: visible;
+      --image-width: 100%;
+
+      img {
+        display: block;
+        margin: 0;
+        border-radius: 3px;
+        width: 100%;
+        height: 45px;
+        object-fit: cover;
+      }
+
+      .gallery-opacity {
+        width: 100%;
+        margin: 2px 0 0;
+      }
+    }
+  }
+
+  .fg_select {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: var(--fg-picker-open-width);
+    align-items: center;
+    border-radius: 5px;
+    border: 1px solid white;
+  }
+
+  .fg_gallery {
+    border-radius: 5px;
+    border: 1px solid white;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    max-height: var(--gallery-max-height);
+    width: fit-content;
+    margin-bottom: 0;
+    background: rgba(0,0,0,0.5);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6px);
+  }
+
+  .noselect {
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+  }
+
+  .fg_gallery_header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+  }
+
+  .fg_gallery_title {
+    font-size: 0.82rem;
+  }
+
+  .fg_gallery_close {
+    // float: right;
+    appearance: none;
+    border: none;
+    color: white;
+    background: transparent;
+    cursor: pointer;
+    padding: 2px;
+  }
+  
+  .fg_gallery_close:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 5px;
+  }
+
+  .fg_gallery_content {
+    display: grid;
+    grid-template-columns: repeat(2, var(--gallery-width));
+    gap: 6px;
+    padding: 6px;
+
+    .gallery-item {
+      border-radius: 3px;
+      border: 1px solid white;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      width: var(--gallery-width);
+      height: var(--gallery-item-height);
+      position:relative;
+      --image-width: 96px;
+      
+      &.fg_item--selected {
+        border: 2px solid var(--selected-color);
+
+        span {
+          color: white;
+          font-weight: bold;
+        }
+      }
+
+      img {
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 3px;
+        width: var(--image-width);
+        height: 45px;
+        object-fit: cover;
+      }
+
+      span {
+        flex-grow: 1;
+        display: inline-grid;
+        align-items: center;
+        text-align: center;
+        padding-block: 4px;
+      }
+    }
+  }
+
+  .place-name {
+    font-size: 0.8em;
+    margin-inline: 2px;
+  }
+
+  .fg_controls {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-radius: 5px;
+    width: 100%;
+    box-sizing: border-box;
+    margin-inline: auto;
+  }
+
+  &.fg_picker--open {
+    .gallery-item-selector {
+      .gls__button {
+        min-height: 38px;
+        height: 38px;
+        padding: 4px 7px;
+        font-size: 0.72rem;
+      }
+
+      .gls__thumbnail {
+        flex-basis: 40px;
+        width: 40px;
+      }
+
+      .gls__opacity-label {
+        font-size: 0.68rem;
+      }
+    }
+  }
+
+  .fg_controls_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-inline: 4px;
+    padding-block: 2px;
+    overflow: visible;
+
+    .fg_close {
+      margin-block: -100px;
+    }
+  }
+
+  .fg_controls_title {
+    font-size: 0.72rem;
+    font-weight: bold;
+  }
+}
+</style>
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index 14e5f26..2a27624 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -130,6 +130,8 @@ export interface GalleryProps {
   defaultStarting?: string | null;
   /** prevent the gallery from being opened by user interaction */
   disabled?: boolean;
+  /** order layers by selection order */
+  useLayerSelectionOrder?: boolean;
 }
 
 
@@ -152,6 +154,7 @@ const props = withDefaults(defineProps<GalleryProps>(), {
   collapseOnSelect: false,
   defaultStarting: null,
   disabled: false,
+  useLayerSelectionOrder: false,
 });
 
 const defaultThumbnailUrl = "https://cdn.worldwidetelescope.org/wwtweb/thumbnail.aspx?name=test";
@@ -394,11 +397,38 @@ function setSelectedImagesetVisibility(places: Place[], selectedPlaces: Place[])
   }
 }
 
+function syncSelectedLayerOrder() {
+  if (!props.useLayerSelectionOrder) return;
+  if (props.persist !== null) {
+    const persistedPlace = places.value.find(p => isPersistantLayer(p));
+    if (persistedPlace) {
+      const layer = getImagesetLayerForPlace(persistedPlace);
+      if (layer) {
+        store.setImageSetLayerOrder({
+          id: layer.id.toString(),
+          order: 0,
+        });
+      }
+    }
+  }
+
+  const topOrder = Object.keys(store.imagesetLayers).length;
+  selectedPlaces.value.forEach((place, index) => {
+    const layer = getImagesetLayerForPlace(place);
+    if (!layer) return;
+    store.setImageSetLayerOrder({
+      id: layer.id.toString(),
+      order: topOrder + index,
+    });
+  });
+}
+
 function syncSelectedLayerVisibility() {
   if (props.hideGalleryLayers) return;
   nextTick(async () => {
     await setSelectedImagesetVisibility(places.value, selectedPlaces.value);
     selectedPlaces.value.forEach(applySelectedPlaceOpacity);
+    syncSelectedLayerOrder();
   });
 }
 
diff --git a/src/components/GalleryItemSelector.vue b/src/components/GalleryItemSelector.vue
new file mode 100644
index 0000000..16f66ba
--- /dev/null
+++ b/src/components/GalleryItemSelector.vue
@@ -0,0 +1,205 @@
+<template>
+  <div
+    class="gallery-item-selector"
+  >
+    <button
+      :class="['gls__button', { 'gls__button--active': active, 'gls__button--selected': selected }]"
+      type="button"
+      :disabled="disabled"
+      @click="emit('activate')"
+    >
+      <span
+        v-if="thumbnailUrl"
+        class="gls__thumbnail"
+        :style="{ backgroundImage: `url('${thumbnailUrl}')` }"
+      ></span>
+      <span class="gls__button-label">{{ place ? place.get_name() : `Select ${label}` }}</span>
+    </button>
+    <div
+      v-if="place"
+      class="gls__opacity"
+    >
+      <span class="gls__opacity-label">{{ label }} opacity</span>
+      <GalleryItem
+        :place="place"
+        :show-opacity="true"
+        :opacity="getOpacity(place)"
+        borderless
+        hide-image
+        hide-label
+        @update:opacity="setOpacity"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { engineStore } from "@wwtelescope/engine-pinia";
+import { Imageset, ImageSetLayer, Place } from "@wwtelescope/engine";
+import GalleryItem from "./GalleryItem.vue";
+
+const props = withDefaults(defineProps<{
+  active?: boolean;
+  disabled?: boolean;
+  label: string;
+  opacity?: number | null;
+  selected?: boolean;
+}>(), {
+  active: false,
+  disabled: false,
+  opacity: null,
+  selected: false,
+});
+
+const emit = defineEmits<{
+  "activate": [];
+  "update:opacity": [value: number];
+}>();
+
+const place = defineModel<Place | null>({ required: false, default: null });
+const placeOpacities = ref<Record<string, number>>({});
+const store = engineStore();
+
+const imagesetLayer = computed(() => {
+  if (place.value === null) return null;
+  return imagesetLayerForPlace(place.value);
+});
+
+const thumbnailUrl = computed(() => {
+  if (place.value === null) return null;
+  return getThumbnailUrl(place.value);
+});
+
+function getImageset(place: Place): Imageset | null {
+  return place.get_backgroundImageset() ?? place.get_studyImageset();
+}
+
+function getThumbnailUrl(place: Place): string | null {
+  return getImageset(place)?.get_thumbnailUrl() || place.get_thumbnailUrl() || null;
+}
+
+function imagesetLayerForPlace(place: Place): ImageSetLayer | null {
+  const imageset = getImageset(place);
+  if (!imageset) return null;
+
+  const url = imageset.get_url();
+  const name = imageset.get_name();
+  for (const guid in store.imagesetLayers) {
+    const layerImageset = store.imagesetForLayer(guid);
+    if (layerImageset?.get_url() === url || layerImageset?.get_name() === name) {
+      return store.imagesetLayerById(guid);
+    }
+  }
+
+  return null;
+}
+
+function getPlaceKey(place: Place): string {
+  const imageset = getImageset(place);
+  if (!imageset) {
+    return place.get_name();
+  }
+
+  return imageset.get_url() || imageset.get_name();
+}
+
+function getOpacity(place: Place): number {
+  if (props.opacity !== null) {
+    return props.opacity;
+  }
+
+  const opacity = placeOpacities.value[getPlaceKey(place)];
+  return opacity ?? 1;
+}
+
+function setOpacity(opacity: number) {
+  if (!place.value) return;
+  placeOpacities.value[getPlaceKey(place.value)] = opacity;
+  emit("update:opacity", opacity);
+  imagesetLayer.value?.set_opacity(opacity);
+}
+
+watch(imagesetLayer, (layer) => {
+  if (!place.value || !layer) return;
+  layer.set_opacity(getOpacity(place.value));
+});
+</script>
+
+<style lang="less">
+.gallery-item-selector {
+  .gls__button {
+    appearance: none;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    min-height: 34px;
+    height: 34px;
+    padding: 4px 6px;
+    width: 100%;
+    color: white;
+    background: rgba(0,0,0,0.5);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6px);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.68rem;
+    font-weight: bold;
+    line-height: 1.1;
+    text-align: center;
+    text-transform: none;
+  }
+
+  .gls__button-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .gls__thumbnail {
+    align-self: stretch;
+    flex: 0 0 34px;
+    width: 34px;
+    height: auto;
+    border-radius: 4px;
+    background-position: center;
+    background-size: 200%;
+  }
+
+  .gls__button--active {
+    outline: 2px solid rgba(160, 160, 160, 0.9);
+    outline-offset: 0;
+  }
+
+  .gls__button--selected {
+    border-color: rgba(255, 255, 255, 0.65);
+  }
+
+  .gls__opacity {
+    margin-top: 2px;
+  }
+
+  .gls__opacity-label {
+    display: block;
+    font-size: 0.66rem;
+    opacity: 0.8;
+    margin-bottom: 0;
+  }
+
+  .gls__opacity .gallery-item {
+    width: 100%;
+    height: auto;
+    border: none;
+    cursor: default;
+    --image-width: 100%;
+  }
+
+  .gls__opacity .gallery-opacity {
+    width: 100%;
+    margin: -2px 0 0;
+  }
+}
+</style>