diff --git a/uvdat/asgi.py b/uvdat/asgi.py
index e48ba3c3..e166ad2e 100644
--- a/uvdat/asgi.py
+++ b/uvdat/asgi.py
@@ -6,7 +6,7 @@
 from django.core.asgi import get_asgi_application
 from django.urls import path
 
-from uvdat.core.notifications import AnalyticsConsumer
+from uvdat.core.notifications import AnalyticsConsumer, ConversionConsumer
 
 os.environ['DJANGO_SETTINGS_MODULE'] = 'uvdat.settings'
 if not os.environ.get('DJANGO_CONFIGURATION'):
@@ -23,7 +23,12 @@
                         'ws/analytics/project/<int:project_id>/results/',
                         AnalyticsConsumer.as_asgi(),
                         name='analytics-ws',
-                    )
+                    ),
+                    path(
+                        'ws/conversion/',
+                        ConversionConsumer.as_asgi(),
+                        name='conversion-ws',
+                    ),
                 ]
             )
         ),
diff --git a/uvdat/core/notifications.py b/uvdat/core/notifications.py
index 00adc070..7cbaf3b3 100644
--- a/uvdat/core/notifications.py
+++ b/uvdat/core/notifications.py
@@ -1,4 +1,5 @@
 from asgiref.sync import async_to_sync
+from channels.exceptions import StopConsumer
 from channels.generic.websocket import JsonWebsocketConsumer
 
 
@@ -11,6 +12,21 @@ def connect(self):
 
     def disconnect(self, code):
         async_to_sync(self.channel_layer.group_discard)(self.group_name, self.channel_name)
+        raise StopConsumer()
+
+    def send_notification(self, event):
+        self.send_json(content=event['message'])
+
+
+class ConversionConsumer(JsonWebsocketConsumer):
+    def connect(self):
+        self.group_name = 'conversion'
+        async_to_sync(self.channel_layer.group_add)(self.group_name, self.channel_name)
+        self.accept()
+
+    def disconnect(self, code):
+        async_to_sync(self.channel_layer.group_discard)(self.group_name, self.channel_name)
+        raise StopConsumer()
 
     def send_notification(self, event):
         self.send_json(content=event['message'])
diff --git a/uvdat/core/tasks/conversion.py b/uvdat/core/tasks/conversion.py
index 71d0d531..7c2ba1ec 100644
--- a/uvdat/core/tasks/conversion.py
+++ b/uvdat/core/tasks/conversion.py
@@ -32,6 +32,11 @@ def get_cog_path(file):
         source = large_image.open(file)
         if source.geospatial:
             raster_path = file
+            metadata = source.getMetadata()
+            if len(metadata.get('frames', [])) > 1:
+                # If multiframe, return early;
+                # large_image_converter is not multiframe-compatible yet
+                return raster_path
     except large_image.exceptions.TileSourceError:
         pass
 
diff --git a/uvdat/core/tasks/dataset.py b/uvdat/core/tasks/dataset.py
index 163d776c..d7d276af 100644
--- a/uvdat/core/tasks/dataset.py
+++ b/uvdat/core/tasks/dataset.py
@@ -26,11 +26,11 @@ def create_layers_and_frames(dataset, layer_options=None):
             frames = []
             kwargs = dict(dataset=dataset)
             data_name = layer_info.get('data')
-            source_file_name = layer_info.get('source_file')
+            source_file_names = layer_info.get('source_files')
             if data_name is not None:
                 kwargs['name'] = data_name
-            if source_file_name is not None:
-                kwargs['source_file__name'] = source_file_name
+            if source_file_names is not None:
+                kwargs['source_file__name__in'] = source_file_names
 
             for layer_data in [
                 *VectorData.objects.filter(**kwargs).order_by('name').all(),
@@ -40,6 +40,7 @@ def create_layers_and_frames(dataset, layer_options=None):
                 additional_filters = layer_info.get('additional_filters', {})
                 metadata = layer_data.metadata or {}
                 bands = metadata.get('bands')
+                raster_frames = metadata.get('frames')
                 summary = layer_data.summary if hasattr(layer_data, 'summary') else {}
                 properties = summary.get('properties')
                 if properties and frame_property and frame_property in properties:
@@ -54,7 +55,7 @@ def create_layers_and_frames(dataset, layer_options=None):
                                         index=len(frames),
                                         data=layer_data.name,
                                         source_filters=dict(
-                                            frame_property=value, **additional_filters
+                                            **{frame_property: value}, **additional_filters
                                         ),
                                     )
                                 )
@@ -66,10 +67,23 @@ def create_layers_and_frames(dataset, layer_options=None):
                                         name=f'Frame {i}',
                                         index=len(frames),
                                         data=layer_data.name,
-                                        source_filters=dict(frame_property=i, **additional_filters),
+                                        source_filters=dict(
+                                            **{frame_property: i}, **additional_filters
+                                        ),
                                     )
                                 )
-                elif bands and len(bands) > 1:
+                elif frame_property == 'frame' and raster_frames and len(raster_frames) > 1:
+                    for raster_frame in raster_frames:
+                        i = raster_frame.get('Index')
+                        frames.append(
+                            dict(
+                                name=i,
+                                index=i,
+                                data=layer_data.name,
+                                source_filters=dict(frame=i),
+                            )
+                        )
+                elif frame_property == 'band' and bands and len(bands) > 1:
                     for band in bands:
                         frames.append(
                             dict(
diff --git a/web/components.d.ts b/web/components.d.ts
index ab5a30fb..9dd65dfe 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     DatasetList: typeof import('./src/components/DatasetList.vue')['default']
     DatasetSelect: typeof import('./src/components/projects/DatasetSelect.vue')['default']
     DatasetsPanel: typeof import('./src/components/sidebars/DatasetsPanel.vue')['default']
+    DatasetUpload: typeof import('./src/components/projects/DatasetUpload.vue')['default']
     DetailView: typeof import('./src/components/DetailView.vue')['default']
     FloatingPanel: typeof import('./src/components/sidebars/FloatingPanel.vue')['default']
     LayersPanel: typeof import('./src/components/sidebars/LayersPanel.vue')['default']
diff --git a/web/package-lock.json b/web/package-lock.json
index 5246215b..3b93286b 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "uvdat",
-  "version": "1.2.1",
+  "version": "1.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "uvdat",
-      "version": "1.2.1",
+      "version": "1.6.0",
       "dependencies": {
         "@mdi/font": "^7.2.96",
         "@resonant/oauth-client": "^0.9.0",
@@ -16,6 +16,7 @@
         "colormap": "^2.3.2",
         "core-js": "^3.8.3",
         "dayjs": "^1.11.13",
+        "django-s3-file-field": "^1.1.0",
         "git-describe": "^4.1.1",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
@@ -5137,6 +5138,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/django-s3-file-field": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/django-s3-file-field/-/django-s3-file-field-1.1.0.tgz",
+      "integrity": "sha512-yksfBPSuwrFk5702r3ApqUkt/VUVF616mkoWMNDcPa5WnX1viQHNg+hG2+v8dB9OXFt/0IaF0lPBW+BcgNDNMg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "axios": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index 508521ff..8121d8dc 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,6 +17,7 @@
     "colormap": "^2.3.2",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.13",
+    "django-s3-file-field": "^1.1.0",
     "git-describe": "^4.1.1",
     "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
diff --git a/web/src/App.vue b/web/src/App.vue
index 98310172..e60974f3 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -5,10 +5,11 @@ import Map from "./components/map/Map.vue";
 import SideBars from "./components/sidebars/SideBars.vue";
 import ControlsBar from "./components/ControlsBar.vue";
 
-import { useAppStore, usePanelStore, useProjectStore } from "@/store";
+import { useAppStore, usePanelStore, useProjectStore, useConversionStore } from "@/store";
 const appStore = useAppStore();
 const panelStore = usePanelStore();
 const projectStore = useProjectStore();
+const conversionStore = useConversionStore();
 
 const showError = computed(() => appStore.currentError !== undefined);
 
@@ -16,6 +17,7 @@ function onReady() {
   if (appStore.currentUser) {
     projectStore.clearState();
     projectStore.loadProjects();
+    conversionStore.createWebSocket();
   }
 }
 
diff --git a/web/src/api/auth.js b/web/src/api/auth.js
index b93bf6e4..80a9f0d1 100644
--- a/web/src/api/auth.js
+++ b/web/src/api/auth.js
@@ -1,5 +1,6 @@
 import axios from "axios";
 import OauthClient from "@resonant/oauth-client";
+import S3FileFieldClient from 'django-s3-file-field';
 import { useAppStore, useMapStore, useProjectStore } from "@/store";
 
 export const baseURL = `${import.meta.env.VITE_APP_API_ROOT}api/v1/`;
@@ -13,6 +14,12 @@ export const oauthClient = new OauthClient(
   { redirectUrl: window.location.origin }
 );
 
+let s3ffClient = undefined;
+
+export function getS3ffClient() {
+  return s3ffClient
+}
+
 export async function restoreLogin() {
   if (!oauthClient) {
     return;
@@ -24,6 +31,12 @@ export async function restoreLogin() {
         useAppStore().currentUser = response.data;
       }
     });
+    s3ffClient = new S3FileFieldClient({
+      baseUrl: baseURL + 's3-upload/',
+      apiConfig: {
+        headers: oauthClient.authHeaders
+      }
+    })
   }
 }
 
diff --git a/web/src/api/rest.ts b/web/src/api/rest.ts
index e9a63114..098bfdf5 100644
--- a/web/src/api/rest.ts
+++ b/web/src/api/rest.ts
@@ -1,4 +1,4 @@
-import { apiClient } from "./auth";
+import { apiClient, getS3ffClient } from "./auth";
 import {
   User,
   Project,
@@ -93,6 +93,14 @@ export async function getDataset(datasetId: number): Promise<Dataset> {
   return (await apiClient.get(`datasets/${datasetId}`)).data;
 }
 
+export async function createDataset(data: any): Promise<Dataset> {
+  return (await apiClient.post('datasets/', data)).data;
+}
+
+export async function spawnDatasetConversion(datasetId: number, options: any): Promise<Dataset> {
+  return (await apiClient.post(`datasets/${datasetId}/convert/`, options || {})).data;
+}
+
 export async function getDatasetLayers(datasetId: number): Promise<Layer[]> {
   return (await apiClient.get(`datasets/${datasetId}/layers`)).data;
 }
@@ -113,6 +121,17 @@ export async function getFileDataObjects(fileId: number): Promise<(RasterData |
   return (await apiClient.get(`files/${fileId}/data`)).data;
 }
 
+export async function uploadFile(file:File): Promise<string> {
+  const s3ffClient = getS3ffClient()
+  return await s3ffClient.uploadFile(
+    file, 'core.FileItem.file',
+  )
+}
+
+export async function createFileItem(data: any): Promise<FileItem> {
+  return (await apiClient.post('files/', data)).data;
+}
+
 export async function getDatasetNetworks(datasetId: number): Promise<Network[]> {
   return (await apiClient.get(`datasets/${datasetId}/networks`)).data;
 }
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index b3e32efc..911177f9 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -31,7 +31,7 @@ const datasetGroups = computed(() => {
 const expandedGroups = ref();
 
 function expandAllGroups() {
-  if (!expandedGroups.value && filteredDatasets.value) {
+  if (filteredDatasets.value) {
     expandedGroups.value = Object.keys(datasetGroups.value)
   }
 }
diff --git a/web/src/components/projects/DatasetSelect.vue b/web/src/components/projects/DatasetSelect.vue
index 1ba6a071..971dd6fb 100644
--- a/web/src/components/projects/DatasetSelect.vue
+++ b/web/src/components/projects/DatasetSelect.vue
@@ -3,15 +3,18 @@ import { computed } from 'vue';
 import DatasetList from '@/components/DatasetList.vue'
 import DetailView from '@/components/DetailView.vue'
 import { Dataset } from '@/types';
-import { useLayerStore } from '@/store';
 
+import { useLayerStore, useConversionStore } from '@/store';
 const layerStore = useLayerStore();
+const conversionStore = useConversionStore();
 
 const props = defineProps<{
   datasets: Dataset[] | undefined;
-  selectedIds: number[] | undefined;
+  savingId: number | undefined;
+  addedIds?: number[] | undefined;
+  buttonIcon: string
 }>();
-const emit = defineEmits(["toggleDatasets"]);
+const emit = defineEmits(["buttonClick"]);
 
 const datasetsWithLayers = computed(() => {
   return props.datasets?.map((dataset) => {
@@ -21,10 +24,6 @@ const datasetsWithLayers = computed(() => {
     }
   })
 })
-
-function toggleSelected(items: Dataset[]) {
-    emit("toggleDatasets", items);
-}
 </script>
 
 <template>
@@ -37,33 +36,64 @@ function toggleSelected(items: Dataset[]) {
         >
           <v-expansion-panel-title>
             <div style="display: flex; justify-content: space-between; width: 100%;">
-              <div class="item-title">
-                <div>
-                    <v-checkbox-btn
-                      :model-value="props.selectedIds?.includes(dataset.id)"
-                      style="display: inline"
-                      class="mr-2"
-                      @click.stop="() => toggleSelected([dataset])"
-                    />
-                    {{ dataset.name }}
-                </div>
-                <div v-if="dataset.layers" style="min-width: 75px; text-align: right">
-                  <v-icon
-                    icon="mdi-layers"
-                    size="small"
-                    v-tooltip="dataset.layers.length + ' layers'"
-                    class="ml-2"
-                  ></v-icon>
-                  <span class="secondary-text">{{ dataset.layers.length }}</span>
+              <div>
+                <div
+                  v-if="conversionStore.datasetConversionTasks[dataset.id] && !conversionStore.datasetConversionTasks[dataset.id].completed"
+                  style="display: inline-block"
+                >
                   <v-icon
-                    icon="mdi-information-outline"
-                    size="small"
-                    v-tooltip="dataset.description"
-                    class="mx-1"
-                  ></v-icon>
+                    v-if="conversionStore.datasetConversionTasks[dataset.id].error"
+                    v-tooltip="conversionStore.datasetConversionTasks[dataset.id].error"
+                    icon="mdi-alert-outline"
+                    color="error"
+                    class="mr-5"
+                  />
+                  <v-progress-circular
+                    v-else
+                    v-tooltip="conversionStore.datasetConversionTasks[dataset.id].status"
+                    size="24"
+                    class="mr-5"
+                    indeterminate
+                  />
                 </div>
+                <v-progress-circular
+                  v-else-if="props.savingId === dataset.id"
+                  size="24"
+                  class="mr-5"
+                  indeterminate
+                />
+                <v-icon
+                  v-else-if="!props.addedIds || !props.addedIds.includes(dataset.id)"
+                  :icon="props.buttonIcon"
+                  color="primary"
+                  class="icon-button mr-5"
+                  @click.stop="emit('buttonClick', dataset)"
+                />
+                <v-icon
+                  v-else
+                  icon="mdi-check"
+                  color="success"
+                  class="mr-5"
+                  @click.stop
+                />
+                {{ dataset.name }}
+              </div>
+              <div v-if="dataset.layers" style="min-width: 75px; text-align: right">
+                <v-icon
+                  icon="mdi-layers"
+                  size="small"
+                  v-tooltip="dataset.layers.length + ' layers'"
+                  class="ml-2"
+                ></v-icon>
+                <span class="secondary-text">{{ dataset.layers.length }}</span>
+                <v-icon
+                  icon="mdi-information-outline"
+                  size="small"
+                  v-tooltip="dataset.description"
+                  class="mx-1"
+                ></v-icon>
+                <DetailView v-if="dataset" :details="{...dataset, type: 'dataset'}"/>
               </div>
-              <DetailView v-if="dataset" :details="{...dataset, type: 'dataset'}"/>
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text class="pb-2">
@@ -84,3 +114,10 @@ function toggleSelected(items: Dataset[]) {
     </template>
   </DatasetList>
 </template>
+
+<style>
+.icon-button {
+  background-color: rgb(var(--v-theme-secondary));
+  border-radius: 4px;
+}
+</style>
diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
new file mode 100644
index 00000000..6cdf17de
--- /dev/null
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { createDataset, createFileItem, spawnDatasetConversion, uploadFile } from '@/api/rest';
+import { Dataset } from '@/types';
+import { computed, ref, watch } from 'vue';
+
+import { VFileUpload, VFileUploadItem } from 'vuetify/labs/VFileUpload'
+
+interface LayerSpec {
+    id: number;
+    name: string | undefined;
+    files: File[];
+    frame_method: 'single' | 'multi';
+    frame_property: string | undefined
+}
+
+const props = defineProps<{
+  allDatasets: Dataset[];
+  projectPermission: any;
+}>();
+const emit = defineEmits(['addToCurrentProject', 'uploaded']);
+
+
+const open = ref<boolean>(false)
+const name = ref<string>()
+const description = ref<string>()
+const category = ref<string>()
+const layers = ref<LayerSpec[]>([])
+const maxLayerId = ref<number>(0)
+const focusedLayerId = ref<number>(0)
+const addToCurrentProject = ref<boolean>(false)
+const submitting = ref<boolean>(false)
+const mandatoryRule = [
+  (v: any) => (v ? true : "Input required.")
+];
+const acceptTypes = '.json,.geojson,.tif,.tiff,.zip'
+
+const similarExisting = computed(() => {
+    return props.allDatasets.filter((d) => {
+        if (name.value && name.value.length > 2) return d.name?.toLowerCase().includes(name.value.toLowerCase())
+        return false
+    })
+})
+const categories = computed(() => {
+    return [...new Set(props.allDatasets?.map((d) => d.category))]
+})
+const valid = computed(() => {
+    return (
+        name.value && description.value && category.value &&
+        layers.value.length > 0 && layers.value.every((l) => {
+            return l.name && l.files.length && (
+                l.frame_method === 'single' || l.frame_property
+            )
+        })
+    )
+})
+const canEditProject = computed(() => {
+    return ['owner', 'collaborator'].includes(props.projectPermission)
+})
+
+function init() {
+    addLayer()
+    if (canEditProject) {
+        addToCurrentProject.value = true
+    }
+}
+
+function cancel() {
+    open.value = false
+    name.value = undefined
+    description.value = undefined
+    category.value = undefined
+    layers.value = []
+    maxLayerId.value = 0
+    focusedLayerId.value = 0
+    addToCurrentProject.value = false
+    submitting.value = false
+}
+
+function addLayer() {
+    maxLayerId.value += 1
+    const id = maxLayerId.value
+    layers.value.push({
+        id,
+        name: undefined,
+        files: [],
+        frame_method: 'single',
+        frame_property: undefined,
+    })
+    focusedLayerId.value = id
+}
+
+function removeLayer(layer_id: number) {
+    layers.value = layers.value.filter((l) => l.id !== layer_id)
+    if (focusedLayerId.value === layer_id) {
+        focusedLayerId.value = 0
+    }
+}
+
+function isRasterFile(file: File) {
+    return ['image/tiff'].includes(file.type)
+}
+
+function isVectorFile(file: File) {
+    return ['application/json', 'application/geo+json'].includes(file.type)
+}
+
+function submit() {
+    submitting.value = true
+    createDataset({
+        name: name.value,
+        description: description.value,
+        category: category.value,
+    }).then(async (dataset) => {
+        if (addToCurrentProject.value) {
+            emit('addToCurrentProject', dataset)
+        }
+        const layerOptions = await Promise.all(
+            layers.value.map(async (l) => {
+                let fileValues = await Promise.all(
+                    l.files.map(async (f) => await uploadFile(f))
+                )
+                let fileItems = await Promise.all(
+                    l.files.map(async (f, i) => await createFileItem({
+                        name: f.name,
+                        file: fileValues[i],
+                        file_type: f.type.substring(f.type.lastIndexOf('/') + 1).replaceAll('+', ''),
+                        dataset: dataset.id,
+                    }))
+                )
+                const layerInfo: any = {
+                    name: l.name,
+                    source_files: fileItems.map((f) => f.name)
+                }
+                if (l.frame_property) {
+                    layerInfo.frame_property = l.frame_property
+                }
+                return layerInfo
+            })
+        )
+        spawnDatasetConversion(dataset.id, {layer_options: layerOptions}).then((conversionTask) => {
+            emit('uploaded', {dataset, conversionTask})
+            cancel()
+        })
+    })
+}
+
+watch(open, () => {
+    if(!open) cancel()
+    else init()
+})
+</script>
+
+<template>
+    <v-btn color="primary" @click="open=true">
+        <v-icon icon="mdi-upload" class="mr-2" />
+        Upload New Dataset
+
+        <v-dialog v-model="open" persistent width="700">
+            <v-card color="background">
+                <div class="px-4 py-2" style="background-color: rgb(var(--v-theme-surface)); height: 40px">
+                    Upload Dataset
+
+                    <v-icon
+                        icon="mdi-close"
+                        style="position: absolute; top: 10px; right: 5px;"
+                        v-tooltip="'Warning: unsaved changes will be discarded'"
+                        @mousedown="cancel"
+                    />
+                </div>
+                <div class="pa-5 d-flex dataset-upload-form-content" style="flex-direction: column; row-gap: 10px">
+                    <v-text-field
+                        autofocus
+                        label="Dataset Name"
+                        v-model="name"
+                        :rules="mandatoryRule"
+                        hide-details="auto"
+                    />
+                    <div v-if="similarExisting.length" class="bg-surface-light pa-2">
+                        <span class="secondary-text">Similar Existing Datasets:</span>
+                        <div v-for="dataset in similarExisting" style="font-size: 0.8rem; margin-left: 10px">
+                            {{ dataset.name }}
+                        </div>
+                    </div>
+                    <v-text-field
+                        label="Description"
+                        v-model="description"
+                        :rules="mandatoryRule"
+                        hide-details="auto"
+                    />
+                    <v-combobox
+                        label="Category"
+                        v-model="category"
+                        :items="categories"
+                        :rules="mandatoryRule"
+                        hide-details="auto"
+                    >
+                        <template v-slot:append-inner>
+                            <v-icon
+                                v-if="category && !categories.includes(category)"
+                                icon="mdi-information-outline"
+                                class="ml-2"
+                                color="primary"
+                                v-tooltip="'You are creating a new category'"
+                            />
+                        </template>
+                    </v-combobox>
+
+                    <div class="layers-configuration">
+                        <div class="px-4 py-2" style="background-color: rgb(var(--v-theme-surface)); height: 40px">
+                            Layers Configuration
+                        </div>
+                        <div class="pa-2">
+                            <v-card
+                                v-for="layer, index in layers"
+                                :key="layer.id"
+                                class="layer-card"
+                            >
+                                <div v-if="focusedLayerId === layer.id">
+                                    <v-text-field
+                                        label="Layer Name"
+                                        v-model="layer.name"
+                                        :rules="mandatoryRule"
+                                        hide-details="auto"
+                                    />
+                                    <v-icon
+                                        icon="mdi-information-outline"
+                                        color="primary"
+                                        class="upload-info-icon"
+                                        v-tooltip="'Upload multiple files to create a sequence of frames, or upload a single file to optionally split into frames.'"
+                                    />
+                                    <v-file-upload
+                                        v-model="layer.files"
+                                        density="compact"
+                                        class="mt-2"
+                                        multiple
+                                        clearable
+                                        :accept="acceptTypes"
+                                        style="background-color: rgb(var(--v-theme-secondary)); padding: 10px"
+                                        @update:model-value="() => {layer.frame_method = 'single'; layer.frame_property = undefined}"
+                                    >
+                                        <template v-slot:icon>
+                                            <v-icon size="xs" icon="mdi-upload" color="primary"/>
+                                        </template>
+                                        <template v-slot:title>
+                                            <div style="font-weight: normal; font-size: medium;">
+                                                Drag & drop file(s) or
+                                                <span style="text-decoration: underline;" class="text-primary">Browse</span>
+                                            </div>
+                                        </template>
+                                        <template v-slot:item="{ props: itemProps }">
+                                            <v-file-upload-item v-bind="itemProps" lines="one" nav>
+                                                <template v-slot:prepend>
+                                                    <v-icon icon="mdi-file-outline" />
+                                                </template>
+                                                <template v-slot:title="{ title }">
+                                                    <div class="text-primary">{{ title }}</div>
+                                                </template>
+                                                <template v-slot:clear="{ props: clearProps }">
+                                                <v-icon color="error" icon="mdi-close-circle" v-bind="clearProps" />
+                                                </template>
+                                            </v-file-upload-item>
+                                        </template>
+                                    </v-file-upload>
+                                    <div
+                                        v-if="layer.files.length > 1 || layer.files.some((f) => f.type === 'application/zip')"
+                                        class="secondary-text"
+                                        style="text-align: center; font-size: 0.8rem;"
+                                    >
+                                        Each file will be treated as a frame in the layer's sequence.
+                                    </div>
+                                    <div v-else-if="layer.files.length === 1">
+                                        <v-btn-toggle
+                                            v-model="layer.frame_method"
+                                            variant="outlined"
+                                            density="compact"
+                                            divided
+                                            mandatory
+                                        >
+                                            <v-btn value="single">Add as single frame</v-btn>
+                                            <v-btn value="multi">Add as multi-frame</v-btn>
+                                        </v-btn-toggle>
+                                        <div v-if="layer.frame_method === 'multi'" class="mt-2">
+                                            <v-btn-toggle
+                                                v-if="isRasterFile(layer.files[0])"
+                                                v-model="layer.frame_property"
+                                                variant="outlined"
+                                                density="compact"
+                                                divided
+                                                mandatory
+                                            >
+                                                <v-btn value="frame">Split by raster frame</v-btn>
+                                                <v-btn value="band">Split by raster band</v-btn>
+                                            </v-btn-toggle>
+                                            <v-text-field
+                                                v-else-if="isVectorFile(layer.files[0])"
+                                                v-model="layer.frame_property"
+                                                label="Frame Property"
+                                                density="compact"
+                                                :rules="mandatoryRule"
+                                                hide-details="auto"
+                                            >
+                                                <template v-slot:append>
+                                                    <v-icon
+                                                        icon="mdi-information-outline"
+                                                        v-tooltip="'Enter the name of an ordered feature property that corresponds to frame'"
+                                                        color="primary"
+                                                    />
+                                                </template>
+                                            </v-text-field>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div v-else style="width: 100%; display: flex; justify-content: space-between;">
+                                    {{ layer.name || ('Layer ' + (index + 1)) }}
+
+                                    <div>
+                                        <v-icon @click="focusedLayerId = layer.id" class="ml-2">mdi-pencil-outline</v-icon>
+                                        <v-icon @click="removeLayer(layer.id)" class="ml-2">mdi-delete-outline</v-icon>
+                                    </div>
+                                </div>
+                            </v-card>
+                            <div style="text-align: center;" class="pt-2">
+                                <v-btn color="background" class="text-primary" flat @click="addLayer">
+                                    <v-icon icon="mdi-plus" color="primary"/>
+                                    Add Layer
+                                </v-btn>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="d-flex px-3" style="justify-content: right;">
+                    <v-checkbox
+                        v-if="canEditProject"
+                        v-model="addToCurrentProject"
+                        label="Add dataset to current project"
+                        density="compact"
+                        color="primary"
+                        hide-details
+                    />
+                </div>
+                <v-card-actions style="float: right;">
+                    <v-btn class="secondary-button" @click="cancel">
+                        <v-icon color="primary" class="mr-1">mdi-close-circle</v-icon>
+                        Cancel
+                    </v-btn>
+                    <v-btn
+                        class="primary-button"
+                        :disabled="!valid || submitting"
+                        @click="submit"
+                    >
+                        <v-progress-circular v-if="submitting" indeterminate size="20" class="mr-1"/>
+                        <v-icon v-else color="button-text" class="mr-1" icon="mdi-upload" />
+                        Upload
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </v-btn>
+</template>
+
+<style>
+.dataset-upload-form-content {
+    max-height: 70vh!important;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.layers-configuration {
+    border: 1px solid rgb(var(--v-theme-primary-text))
+}
+.layer-card {
+    padding: 8px !important;
+    margin-top: 8px;
+    background-color: rgb(var(--v-theme-background)) !important;
+    box-shadow: none !important;
+    border-bottom: 1px solid rgb(var(--v-theme-surface))
+}
+.upload-info-icon {
+    position: absolute;
+    right: 15px;
+    padding-top: 25px;
+    z-index: 1;
+}
+.v-file-upload-items .v-list-item {
+    border: none!important
+}
+.v-file-upload-items .v-list-item-title {
+    font-size: 1rem!important;
+}
+.v-checkbox-btn .text-primary .v-icon {
+    color: rgb(var(--v-theme-primary))!important
+}
+</style>
diff --git a/web/src/components/projects/ProjectConfig.vue b/web/src/components/projects/ProjectConfig.vue
index bdde60a1..d080a3b4 100644
--- a/web/src/components/projects/ProjectConfig.vue
+++ b/web/src/components/projects/ProjectConfig.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, Ref, computed, onMounted, ComputedRef, watch } from "vue";
+import { ref, Ref, computed, onMounted, watch } from "vue";
 import DatasetSelect from "@/components/projects/DatasetSelect.vue";
+import DatasetUpload from "@/components/projects/DatasetUpload.vue";
 import AccessControl from "@/components/projects/AccessControl.vue";
 import {
   getDatasets,
@@ -9,7 +10,7 @@ import {
   deleteProject,
   patchProject,
 } from "@/api/rest";
-import { Project, Dataset } from "@/types";
+import { Project, Dataset, TaskResult } from "@/types";
 
 import { useMapStore, useAppStore, useProjectStore, useLayerStore } from "@/store";
 const projectStore = useProjectStore();
@@ -30,13 +31,6 @@ const filteredProjects = computed(() => {
 const selectedProject: Ref<Project | undefined> = ref();
 const allDatasets: Ref<Dataset[]> = ref([]);
 const projDatasets: Ref<Dataset[] | undefined> = ref();
-const projSelectedDatasetIds: Ref<number[]> = ref([]);
-const otherDatasets: ComputedRef<Dataset[]> = computed(() => {
-  return allDatasets.value.filter(
-    (d1) => !projDatasets.value?.map((d2) => d2.id).includes(d1.id)
-  );
-});
-const otherSelectedDatasetIds: Ref<number[]> = ref([]);
 
 const permissions = computed(() => {
   const ret = Object.fromEntries(
@@ -62,6 +56,7 @@ const permissions = computed(() => {
   return ret;
 });
 const saving = ref<"waiting" | "done">();
+const savingId = ref<number | undefined>();
 const newProjectName = ref();
 const projectToEdit: Ref<Project | undefined> = ref();
 const projectToDelete: Ref<Project | undefined> = ref();
@@ -145,12 +140,7 @@ function selectProject(project: Project) {
   if (selectedProject.value?.id !== project.id) {
     selectedProject.value = project;
     projectStore.loadingDatasets = true;
-    getDatasets().then(async (datasets) => {
-      allDatasets.value = datasets
-      allDatasets.value.forEach((dataset: Dataset) => {
-        layerStore.fetchAvailableLayersForDataset(dataset.id)
-      })
-    })
+    refreshAllDatasets()
     refreshProjectDatasets(null);
   }
 }
@@ -160,62 +150,35 @@ function loadSelectedProject() {
   projectStore.projectConfigMode = undefined;
 }
 
-function toggleOtherDatasetSelection(datasets: Dataset[]) {
-  datasets.forEach((dataset: Dataset) => {
-    if (!otherSelectedDatasetIds.value.includes(dataset.id)) {
-      otherSelectedDatasetIds.value.push(dataset.id);
-    } else {
-      otherSelectedDatasetIds.value = otherSelectedDatasetIds.value.filter(
-        (id) => id !== dataset.id
-      );
-    }
-  });
-}
-
-function toggleProjDatasetSelection(datasets: Dataset[]) {
-  datasets.forEach((dataset: Dataset) => {
-    if (!projSelectedDatasetIds.value.includes(dataset.id)) {
-      projSelectedDatasetIds.value.push(dataset.id);
-    } else {
-      projSelectedDatasetIds.value = projSelectedDatasetIds.value.filter(
-        (id) => id !== dataset.id
-      );
-    }
-  });
-}
-
-function addAllSelectionToProject() {
-  if (projDatasets.value) {
-    saveDatasetsToProject([
-      ...projDatasets.value.map((d) => d.id),
-      ...otherSelectedDatasetIds.value,
-    ]);
-    otherSelectedDatasetIds.value = [];
+function addDatasetToProject(dataset: Dataset) {
+  savingId.value = dataset.id
+  const projDatasetIds = projDatasets.value?.map((d) => d.id)
+  if (!projDatasetIds?.includes(dataset.id)) {
+    projDatasetIds?.push(dataset.id)
+  }
+  if (projDatasetIds) {
+    saveDatasetsToProject(projDatasetIds)
   }
 }
 
-function removeProjSelectionFromProject() {
-  if (projDatasets.value) {
-    saveDatasetsToProject(
-      projDatasets.value
-        .map((d) => d.id)
-        .filter((id) => !projSelectedDatasetIds.value.includes(id))
-    );
-    projSelectedDatasetIds.value = [];
+function removeDatasetFromProject(dataset: Dataset) {
+  savingId.value = dataset.id
+  let projDatasetIds = projDatasets.value?.map((d) => d.id)
+  if (projDatasetIds?.includes(dataset.id)) {
+    projDatasetIds = projDatasetIds.filter((id) => id !== dataset.id)
+  }
+  if (projDatasetIds) {
+    saveDatasetsToProject(projDatasetIds)
   }
 }
 
 function saveDatasetsToProject(ids: number[]) {
-  saving.value = "waiting";
   if (selectedProject.value) {
     patchProject(selectedProject.value.id, {
       datasets: ids,
     }).then(() => {
       refreshProjectDatasets(() => {
-        saving.value = "done";
-        setTimeout(() => {
-          saving.value = undefined;
-        }, 2000);
+        savingId.value = undefined
       })
     });
   }
@@ -226,6 +189,15 @@ function updateSelectedProject(newProjectData: Project) {
   selectedProject.value = newProjectData;
 }
 
+function refreshAllDatasets() {
+  getDatasets().then(async (datasets) => {
+    allDatasets.value = datasets
+    allDatasets.value.forEach((dataset: Dataset) => {
+      layerStore.fetchAvailableLayersForDataset(dataset.id)
+    })
+  })
+}
+
 function refreshProjectDatasets(callback: Function | null) {
   if (selectedProject.value) {
     getProjectDatasets(selectedProject.value.id).then(async (datasets) => {
@@ -251,6 +223,11 @@ function handleEditFocus(focused: boolean) {
   }
 }
 
+function datasetUploaded(result: {dataset: Dataset, conversionTask: TaskResult}) {
+  refreshAllDatasets()
+  refreshProjectDatasets(null)
+}
+
 onMounted(() => {
   window.addEventListener("keydown", (e) => {
     if (e.key == "Escape" && projectStore.projectConfigMode) {
@@ -261,7 +238,7 @@ onMounted(() => {
 
 watch(selectedProject, resetProjectEdit);
 
-watch(otherDatasets, () => {
+watch(allDatasets, () => {
   if (allDatasets.value && projDatasets.value) {
     projectStore.loadingDatasets = false;
   }
@@ -508,67 +485,38 @@ watch(() => projectStore.projectConfigMode, () => {
           >
             <v-progress-linear v-if="projectStore.loadingDatasets" indeterminate></v-progress-linear>
             <div v-else class="py-3 px-6 d-flex">
-              <div style="width: 30%">
-                <v-card-text>Available Datasets</v-card-text>
-                <v-card class="pa-2 dataset-card">
-                  <DatasetSelect
-                    :datasets="otherDatasets"
-                    :selected-ids="otherSelectedDatasetIds"
-                    @toggleDatasets="toggleOtherDatasetSelection"
-                  />
-                </v-card>
-                <v-btn
-                  color="primary"
-                  @click="addAllSelectionToProject"
-                  :disabled="!!saving || !otherSelectedDatasetIds.length"
-                  class="mt-2"
-                >
-                  Add
-                  <v-icon icon="mdi-chevron-double-right" />
-                  <v-icon
-                    v-if="saving === 'done'"
-                    icon="mdi-check"
-                    color="green"
-                    class="ml-4"
-                  />
-                  <v-progress-circular
-                    v-else-if="saving"
-                    size="25"
-                    indeterminate
-                    class="ml-4"
-                  />
-                </v-btn>
-              </div>
-              <div class="ml-10" style="width: 30%">
+              <div style="width: 45%">
                 <v-card-text>Project Datasets</v-card-text>
-                <v-card class="pa-2 dataset-card">
+                <div class="pa-2 dataset-card">
                   <DatasetSelect
                     :datasets="projDatasets"
-                    :selected-ids="projSelectedDatasetIds"
-                    @toggleDatasets="toggleProjDatasetSelection"
+                    :savingId="savingId"
+                    button-icon="mdi-close"
+                    @buttonClick="removeDatasetFromProject"
                   />
-                </v-card>
-                <v-btn
-                  color="primary"
-                  @click="removeProjSelectionFromProject"
-                  :disabled="!!saving || !projSelectedDatasetIds.length"
-                  class="mt-2"
-                >
-                  <v-icon icon="mdi-chevron-double-left" />
-                  Remove
-                  <v-icon
-                    v-if="saving === 'done'"
-                    icon="mdi-check"
-                    color="green"
-                    class="ml-4"
+                </div>
+              </div>
+              <v-divider class="mx-5" vertical></v-divider>
+              <div style="width: 45%">
+                <div class="d-flex">
+                  <v-card-text>All Datasets</v-card-text>
+                  <DatasetUpload
+                    v-if="projectStore.currentProject"
+                    :allDatasets="allDatasets"
+                    :projectPermission="permissions[projectStore.currentProject.id]"
+                    @addToCurrentProject="addDatasetToProject"
+                    @uploaded="datasetUploaded"
                   />
-                  <v-progress-circular
-                    v-else-if="saving"
-                    size="25"
-                    indeterminate
-                    class="ml-4"
+                </div>
+                <div class="pa-2 dataset-card">
+                  <DatasetSelect
+                    :datasets="allDatasets"
+                    :savingId="savingId"
+                    :addedIds="projDatasets?.map((d) => d.id)"
+                    button-icon="mdi-plus"
+                    @buttonClick="addDatasetToProject"
                   />
-                </v-btn>
+                </div>
               </div>
             </div>
           </div>
diff --git a/web/src/components/sidebars/DatasetsPanel.vue b/web/src/components/sidebars/DatasetsPanel.vue
index da2dfbec..bda7878b 100644
--- a/web/src/components/sidebars/DatasetsPanel.vue
+++ b/web/src/components/sidebars/DatasetsPanel.vue
@@ -4,8 +4,9 @@ import DatasetList from '@/components/DatasetList.vue'
 import DetailView from '@/components/DetailView.vue'
 import { Dataset, Layer } from '@/types';
 
-import { useLayerStore } from '@/store';
+import { useLayerStore, useConversionStore } from '@/store';
 const layerStore = useLayerStore();
+const conversionStore = useConversionStore();
 
 const props = defineProps<{
   datasets: Dataset[] | undefined;
@@ -39,7 +40,28 @@ function toggleSelected(items: Layer[]) {
           <v-expansion-panel-title>
             <div style="display: flex; justify-content: space-between; width: 100%;">
               <div class="item-title" style="margin-left: 12px">
-                {{ dataset.name }}
+                <div>
+                  <div
+                    v-if="conversionStore.datasetConversionTasks[dataset.id] && !conversionStore.datasetConversionTasks[dataset.id].completed"
+                    style="display: inline-block"
+                  >
+                    <v-icon
+                      v-if="conversionStore.datasetConversionTasks[dataset.id].error"
+                      v-tooltip="conversionStore.datasetConversionTasks[dataset.id].error"
+                      icon="mdi-alert-outline"
+                      color="error"
+                      class="mr-2"
+                    />
+                    <v-progress-circular
+                      v-else
+                      v-tooltip="conversionStore.datasetConversionTasks[dataset.id].status"
+                      size="18"
+                      class="mr-2"
+                      indeterminate
+                    />
+                  </div>
+                  {{ dataset.name }}
+                </div>
                 <div style="min-width: 75px; text-align: right" v-if="dataset.layers">
                   <v-icon
                     icon="mdi-layers-outline"
diff --git a/web/src/components/sidebars/FloatingPanel.vue b/web/src/components/sidebars/FloatingPanel.vue
index e5a6dd5f..6e5ffdc4 100644
--- a/web/src/components/sidebars/FloatingPanel.vue
+++ b/web/src/components/sidebars/FloatingPanel.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
-import { usePanelStore } from "@/store";
+import { usePanelStore, useProjectStore } from "@/store";
 const panelStore = usePanelStore();
+const projectStore = useProjectStore();
 
 const props = defineProps<{
   id: string;
@@ -95,6 +96,13 @@ function panelUpdated() {
         <div style="display: flex; align-items: center;">
           <v-card-text class="pa-3" style="font-size: 18px;">{{ panel.label }}</v-card-text>
           <div class="mr-3">
+            <v-icon
+              v-if="panel.id === 'datasets' && projectStore.currentProject"
+              v-tooltip="'Add Dataset'"
+              icon="mdi-plus"
+              color="primary"
+              @mousedown="projectStore.projectConfigMode = 'existing'"
+            />
             <v-icon
               :icon="panel.collapsed ? 'mdi-chevron-down' : 'mdi-chevron-up'"
               v-tooltip="panel.collapsed ? 'Expand' : 'Collapse'"
@@ -103,7 +111,7 @@ function panelUpdated() {
             <v-icon
               icon="mdi-drag"
               class="draggable"
-              @mousedown="(e) => {
+              @mousedown="(e: any) => {
                 updatePanelElement();
                 startDrag(e, panel, ['position'])
               }"
@@ -123,7 +131,7 @@ function panelUpdated() {
             icon="mdi-resize-bottom-right"
             class="right mr-2 draggable-corner"
             @mousedown="
-              (e) => {
+              (e: any) => {
                 updatePanelElement();
                 startDrag(e, panel, ['width', 'height']);
               }
diff --git a/web/src/store/conversion.ts b/web/src/store/conversion.ts
new file mode 100644
index 00000000..21c62e06
--- /dev/null
+++ b/web/src/store/conversion.ts
@@ -0,0 +1,31 @@
+import { TaskResult } from '@/types';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useProjectStore } from './project';
+
+const url = `${import.meta.env.VITE_APP_API_ROOT}ws/conversion/`
+
+export const useConversionStore = defineStore('conversion', () => {
+    const projectStore = useProjectStore();
+    const ws = ref()
+    const datasetConversionTasks = ref<Record<number, TaskResult>>({})
+
+    function createWebSocket() {
+        if (!ws.value) {
+            ws.value = new WebSocket(url)
+            ws.value.onmessage = (event: any) => {
+                const result = JSON.parse(JSON.parse(event.data)) as TaskResult
+                const datasetId = result.inputs.dataset_id
+                if (datasetId !== undefined) {
+                    datasetConversionTasks.value[datasetId] = result
+                    if (result.completed) projectStore.fetchProjectDatasets();
+                }
+            }
+        }
+    }
+
+    return {
+        datasetConversionTasks,
+        createWebSocket,
+    }
+});
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index beb52887..54d890aa 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -6,6 +6,7 @@ import { useNetworkStore } from './network';
 import { useProjectStore } from './project';
 import { useStyleStore } from './style';
 import { usePanelStore } from './panel';
+import { useConversionStore } from './conversion';
 
 export {
     useAppStore,
@@ -16,4 +17,5 @@ export {
     useProjectStore,
     useStyleStore,
     usePanelStore,
-}
\ No newline at end of file
+    useConversionStore,
+}
diff --git a/web/src/store/map.ts b/web/src/store/map.ts
index cc93ded1..c3cec4a3 100644
--- a/web/src/store/map.ts
+++ b/web/src/store/map.ts
@@ -10,6 +10,7 @@ import {
   MapLibreLayerWithMetadata,
   MapLibreLayerMetadata,
   Layer,
+  StyleFilter,
 } from '@/types';
 import {
   Map, MapLayerMouseEvent,
@@ -19,7 +20,7 @@ import {
 import { getRasterDataValues } from '@/api/rest';
 import { baseURL } from '@/api/auth';
 import proj4 from 'proj4';
-import { useStyleStore } from './style';
+import { useStyleStore, useLayerStore } from '.';
 
 function getLayerIsVisible(layer: MapLibreLayerWithMetadata) {
   // Since visibility must be 'visible' for a feature click to even be registered,
@@ -133,6 +134,7 @@ export const useMapStore = defineStore('map', () => {
   const rasterTooltipDataCache = ref<Record<number, RasterDataValues | undefined>>({});
 
   const styleStore = useStyleStore();
+  const layerStore = useLayerStore();
 
   function handleLayerClick(e: MapLayerMouseEvent) {
     const map = getMap();
@@ -430,8 +432,23 @@ export const useMapStore = defineStore('map', () => {
     const queryParams: { projection: string, style?: string } = { projection: 'epsg:3857' }
     const { layerId, layerCopyId } = parseSourceString(sourceId);
     const styleSpec = styleStore.selectedLayerStyles[`${layerId}.${layerCopyId}`].style_spec;
+    let filters: StyleFilter[] = []
+    const layer = layerStore.selectedLayers.find((l: Layer) => l.id = layerId)
+    if (layer) {
+      const frames = layerStore.layerFrames(layer)
+      const frame = frames.find((f: LayerFrame) => f.index === layer.current_frame_index)
+      if (frame?.source_filters) {
+        filters = Object.entries(frame.source_filters).map(([k, v]) => ({
+          filter_by: k,
+          list: [v],
+          include: true,
+          transparency: true,
+          apply: true,
+        }))
+      }
+    }
     if (styleSpec) {
-      const styleParams = styleStore.getRasterTilesQuery(styleSpec)
+      const styleParams = styleStore.getRasterTilesQuery({...styleSpec, filters})
       if (styleParams) queryParams.style = JSON.stringify(styleParams)
     }
     const query = new URLSearchParams(queryParams)
diff --git a/web/src/store/project.ts b/web/src/store/project.ts
index cebb1d66..2ada753b 100644
--- a/web/src/store/project.ts
+++ b/web/src/store/project.ts
@@ -102,6 +102,7 @@ export const useProjectStore = defineStore('project', () => {
         projectConfigMode,
         loadingDatasets,
         availableDatasets,
+        fetchProjectDatasets,
         clearState,
         clearProjectState,
         loadProjects,
diff --git a/web/src/store/style.ts b/web/src/store/style.ts
index 403300ae..bfa3f4fb 100644
--- a/web/src/store/style.ts
+++ b/web/src/store/style.ts
@@ -86,6 +86,11 @@ function getRasterTilesQuery(styleSpec: StyleSpec) {
             if (colorSpec.colormap && colorSpec.visible) query.bands.push(colorQuery)
         }
     })
+    styleSpec.filters.forEach((f) => {
+        if (f.apply && f.filter_by && f.include && f.list?.length === 1) {
+            query[f.filter_by] = f.list[0]
+        }
+    })
     if (!Object.keys(query).length) return undefined
     return query;
 }
@@ -337,6 +342,7 @@ export const useStyleStore = defineStore('style', () => {
                     list: [v],
                     include: true,
                     transparency: true,
+                    apply: true,
                 }))
             ]
         }
@@ -383,7 +389,7 @@ export const useStyleStore = defineStore('style', () => {
                 map.setPaintProperty(mapLayerId, 'circle-stroke-opacity', visibility)
             }
         } else if (mapLayerId.includes("raster")) {
-            const rasterTilesQuery = getRasterTilesQuery(styleSpec)
+            const rasterTilesQuery = getRasterTilesQuery({...styleSpec, filters})
             if (rasterTilesQuery?.bands && !rasterTilesQuery.bands.length) opacity = 0
             map.setPaintProperty(mapLayerId, "raster-opacity", opacity)
             let source = map.getSource(mapLayer.source) as RasterTileSource;