diff --git a/.build-files/BuildConfig.py b/.build-files/BuildConfig.py
index 5ddd24b8..86f39198 100644
--- a/.build-files/BuildConfig.py
+++ b/.build-files/BuildConfig.py
@@ -37,8 +37,6 @@ def __init__(self, message):
         # Now for your custom code...
 
 
-
-
 class BuildConfig:
     def __init__(self, configFile, envFile):
         try:
diff --git a/.build-files/docker-compose-local.template.yml b/.build-files/docker-compose-local.template.yml
index 0be80e51..ae67fb95 100644
--- a/.build-files/docker-compose-local.template.yml
+++ b/.build-files/docker-compose-local.template.yml
@@ -31,6 +31,8 @@ services:
       - "8000:8000"
     environment:
       DJANGO_ENV_FILE: "/app/.env"
+    volumes:
+      - ../apps/server/api/migrations:/app/api/migrations
     depends_on:
       db:
         condition: service_healthy
diff --git a/.build-files/docker-compose.template.yml b/.build-files/docker-compose.template.yml
index acb9de6a..5a0eca99 100644
--- a/.build-files/docker-compose.template.yml
+++ b/.build-files/docker-compose.template.yml
@@ -34,6 +34,8 @@ services:
       - "8000:8000"
     environment:
       DJANGO_ENV_FILE: "/app/.env"
+    volumes:
+      - ../apps/server/api/migrations:/app/api/migrations
     depends_on:
       db:
         condition: service_healthy
diff --git a/apps/client/src/App.scss b/apps/client/src/App.scss
index a2e2c61f..820b6c84 100644
--- a/apps/client/src/App.scss
+++ b/apps/client/src/App.scss
@@ -51,3 +51,10 @@
 // Utilities
 @import 'bootstrap/scss/utilities';
 @import 'bootstrap/scss/utilities/api';
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+:root,
+[data-bs-theme='light'] {
+    --bs-font-sans-serif: 'Inter', sans-serif;
+}
diff --git a/apps/client/src/App.vue b/apps/client/src/App.vue
index 5bbef694..703eb7d8 100644
--- a/apps/client/src/App.vue
+++ b/apps/client/src/App.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { watch, onBeforeMount, ref } from 'vue';
 import { useQuasar } from 'quasar';
-import GridstackLayout from './components/GridstackLayout.vue';
 import GlobalSettingsView from './components/globalSettings/GlobalSettingsView.vue';
-import { useProvenanceStore } from '@/stores/provenanceStore';
+import { useProvenanceStore } from '@/stores/misc/provenanceStore';
 import { onKeyStroke } from '@vueuse/core';
 import { router } from '@/router';
+import LBtn from './components/custom/LBtn.vue';
 
 const $q = useQuasar();
 const provenanceStore = useProvenanceStore();
@@ -60,8 +60,17 @@ onBeforeMount(() => {
         >
             <q-toolbar>
                 <q-toolbar-title>Loon</q-toolbar-title>
-                <q-btn @click="router.push('/')" flat dense>Home</q-btn>
-                <q-btn @click="router.push('/upload')" flat dense>Upload</q-btn>
+                <l-btn
+                    @click="router.push('/')"
+                    type="basic"
+                    label="Home"
+                    class="q-mr-sm"
+                />
+                <l-btn
+                    @click="router.push('/upload')"
+                    type="basic"
+                    label="Upload"
+                />
             </q-toolbar>
         </q-header>
         <GlobalSettingsView></GlobalSettingsView>
diff --git a/apps/client/src/components/AggregateLineChart.vue b/apps/client/src/components/AggregateLineChart.vue
index 678cd002..ee22a67c 100644
--- a/apps/client/src/components/AggregateLineChart.vue
+++ b/apps/client/src/components/AggregateLineChart.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
 import { useElementSize } from '@vueuse/core';
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import {
     useAggregateLineChartStore,
     type AggDataPoint,
     type AggLineData,
-} from '@/stores/aggregateLineChartStore';
+} from '@/stores/componentStores/aggregateLineChartStore';
 import { scaleLinear } from 'd3-scale';
 import { extent, max, min } from 'd3-array';
 import { area, line } from 'd3-shape';
 import { axisBottom, axisLeft } from 'd3-axis';
 import { select } from 'd3-selection';
 import { format } from 'd3-format';
-import { useDataPointSelectionUntrracked } from '@/stores/dataPointSelectionUntrracked';
-import { useDataPointSelection } from '@/stores/dataPointSelection';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
+import { useDataPointSelectionUntrracked } from '@/stores/interactionStores/dataPointSelectionUntrrackedStore';
+import { useDataPointSelection } from '@/stores/interactionStores/dataPointSelectionTrrackedStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
 import CellSnippetsLayer from './layers/CellSnippetsLayer';
 import type { Selection } from './layers/CellSnippetsLayer';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
-import { useLooneageViewStore } from '@/stores/looneageViewStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useLooneageViewStore } from '@/stores/componentStores/looneageViewStore';
 import { Deck, OrthographicView } from '@deck.gl/core/typed';
 import {
     GeoJsonLayer,
@@ -42,9 +42,11 @@ import { storeToRefs } from 'pinia';
 import { LRUCache } from 'lru-cache';
 import { getBBoxAroundPoint } from '@/util/imageSnippets';
 import colors from '@/util/colors';
+import { useConfigStore } from '@/stores/misc/configStore';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
+const configStore = useConfigStore();
 const aggregateLineChartStore = useAggregateLineChartStore();
 const dataPointSelectionUntrracked = useDataPointSelectionUntrracked();
 const dataPointSelection = useDataPointSelection();
@@ -262,7 +264,7 @@ watch(currentLocationMetadata, async () => {
 
     pixelSource.value = null;
 
-    const fullImageUrl = datasetSelectionStore.getFileUrl(
+    const fullImageUrl = configStore.getFileUrl(
         currentLocationMetadata.value.imageDataFilename
     );
     loader.value = await loadOmeTiff(fullImageUrl, { pool: new Pool() });
diff --git a/apps/client/src/components/AggregateLineChartSettingsSidebar.vue b/apps/client/src/components/AggregateLineChartSettingsSidebar.vue
index 25960801..575ea8ec 100644
--- a/apps/client/src/components/AggregateLineChartSettingsSidebar.vue
+++ b/apps/client/src/components/AggregateLineChartSettingsSidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useAggregateLineChartStore } from '@/stores/aggregateLineChartStore';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useAggregateLineChartStore } from '@/stores/componentStores/aggregateLineChartStore';
 const cellMetaData = useCellMetaData();
 const aggregateLineChartStore = useAggregateLineChartStore();
 const globalSettings = useGlobalSettings();
diff --git a/apps/client/src/components/AggregateLineChartSettingsToolbar.vue b/apps/client/src/components/AggregateLineChartSettingsToolbar.vue
index 8ff9e34b..b559fb53 100644
--- a/apps/client/src/components/AggregateLineChartSettingsToolbar.vue
+++ b/apps/client/src/components/AggregateLineChartSettingsToolbar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useAggregateLineChartStore } from '@/stores/aggregateLineChartStore';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useAggregateLineChartStore } from '@/stores/componentStores/aggregateLineChartStore';
 const cellMetaData = useCellMetaData();
 const aggregateLineChartStore = useAggregateLineChartStore();
 const globalSettings = useGlobalSettings();
diff --git a/apps/client/src/components/BasicInfo.vue b/apps/client/src/components/BasicInfo.vue
index 39955bc1..8adb8c2f 100644
--- a/apps/client/src/components/BasicInfo.vue
+++ b/apps/client/src/components/BasicInfo.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useCellMetaData, type Lineage } from '@/stores/cellMetaData';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
+import {
+    useCellMetaData,
+    type Lineage,
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
 import { storeToRefs } from 'pinia';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
 
diff --git a/apps/client/src/components/CellTrackView.vue b/apps/client/src/components/CellTrackView.vue
index 4aa79dad..0a0a8752 100644
--- a/apps/client/src/components/CellTrackView.vue
+++ b/apps/client/src/components/CellTrackView.vue
@@ -7,14 +7,14 @@ import {
     type Lineage,
     type Track,
     type Cell,
-} from '@/stores/cellMetaData';
-import { useDataPointSelection } from '@/stores/dataPointSelection';
-import { useSegmentationStore } from '@/stores/segmentationStore';
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useDataPointSelection } from '@/stores/interactionStores/dataPointSelectionTrrackedStore';
+import { useSegmentationStore } from '@/stores/dataStores/segmentationStore';
 import CellSnippetsLayer from './layers/CellSnippetsLayer.js';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
-import { useEventBusStore } from '@/stores/eventBusStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 import { clamp } from 'lodash-es';
 import Pool from '../util/Pool';
 import type { Feature } from 'geojson';
@@ -45,6 +45,7 @@ import {
 // @ts-ignore
 import { TripsLayer } from '@deck.gl/geo-layers';
 import { render } from 'vue';
+import { useConfigStore } from '@/stores/misc/configStore';
 
 const cellMetaData = useCellMetaData();
 
@@ -55,6 +56,7 @@ const datasetSelectionStore = useDatasetSelectionStore();
 const { currentLocationMetadata } = storeToRefs(datasetSelectionStore);
 const { contrastLimitSlider } = storeToRefs(imageViewerStoreUntrracked);
 const { selectedTrack } = storeToRefs(cellMetaData);
+const configStore = useConfigStore();
 const eventBusStore = useEventBusStore();
 const segmentationStore = useSegmentationStore();
 
@@ -76,7 +78,7 @@ watch(currentLocationMetadata, async () => {
 
     pixelSource.value = null;
 
-    const fullImageUrl = datasetSelectionStore.getFileUrl(
+    const fullImageUrl = configStore.getFileUrl(
         currentLocationMetadata.value.imageDataFilename
     );
     loader.value = await loadOmeTiff(fullImageUrl, { pool: new Pool() });
diff --git a/apps/client/src/components/GridstackLayout.vue b/apps/client/src/components/GridstackLayout.vue
index 6b717099..4dab416c 100644
--- a/apps/client/src/components/GridstackLayout.vue
+++ b/apps/client/src/components/GridstackLayout.vue
@@ -4,8 +4,8 @@ import { onMounted } from 'vue';
 import { GridStack } from 'gridstack';
 import screenfull from 'screenfull';
 import 'gridstack/dist/gridstack.min.css';
-import { useGridstackLayoutStore } from '@/stores/gridstackLayoutStore';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGridstackLayoutStore } from '@/stores/interactionStores/gridstackLayoutStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 const globalSettings = useGlobalSettings();
 const gridstackLayoutStore = useGridstackLayoutStore();
 // useful reference
diff --git a/apps/client/src/components/HorizonChartLegend.vue b/apps/client/src/components/HorizonChartLegend.vue
index 5e1a98ea..fd5fb96a 100644
--- a/apps/client/src/components/HorizonChartLegend.vue
+++ b/apps/client/src/components/HorizonChartLegend.vue
@@ -4,7 +4,7 @@ import HorizonChart from '@/components/HorizonChart.vue';
 import { scaleLinear } from 'd3-scale';
 import { format } from 'd3-format';
 
-import { useLooneageViewStore } from '@/stores/looneageViewStore';
+import { useLooneageViewStore } from '@/stores/componentStores/looneageViewStore';
 
 const looneageViewStore = useLooneageViewStore();
 
diff --git a/apps/client/src/components/ImageViewer.vue b/apps/client/src/components/ImageViewer.vue
index 3efc7692..0bffb2ab 100644
--- a/apps/client/src/components/ImageViewer.vue
+++ b/apps/client/src/components/ImageViewer.vue
@@ -7,19 +7,20 @@ import {
     type Lineage,
     type Track,
     type Cell,
-} from '@/stores/cellMetaData';
-import { useDataPointSelection } from '@/stores/dataPointSelection';
-
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
-import { useDataPointSelectionUntrracked } from '@/stores/dataPointSelectionUntrracked';
-import { useSegmentationStore } from '@/stores/segmentationStore';
-import { useEventBusStore } from '@/stores/eventBusStore';
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useDataPointSelection } from '@/stores/interactionStores/dataPointSelectionTrrackedStore';
+
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useDataPointSelectionUntrracked } from '@/stores/interactionStores/dataPointSelectionUntrrackedStore';
+import { useSegmentationStore } from '@/stores/dataStores/segmentationStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 import { clamp } from 'lodash-es';
 import Pool from '../util/Pool';
-import { useLooneageViewStore } from '@/stores/looneageViewStore';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useLooneageViewStore } from '@/stores/componentStores/looneageViewStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+
 
 import {
     loadOmeTiff,
@@ -40,9 +41,11 @@ import {
 import { TripsLayer } from '@deck.gl/geo-layers';
 import { format } from 'd3-format';
 import colors from '@/util/colors';
+import { useConfigStore } from '@/stores/misc/configStore';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
+const configStore = useConfigStore();
 const { darkMode } = storeToRefs(globalSettings);
 const segmentationStore = useSegmentationStore();
 const dataPointSelection = useDataPointSelection();
@@ -159,7 +162,7 @@ watch(currentLocationMetadata, async () => {
     // imageViewerStore.frameIndex = 0;
     pixelSource.value = null;
 
-    const fullImageUrl = datasetSelectionStore.getFileUrl(
+    const fullImageUrl = configStore.getFileUrl(
         currentLocationMetadata.value.imageDataFilename
     );
     loader.value = await loadOmeTiff(fullImageUrl, { pool: new Pool() });
@@ -201,7 +204,7 @@ function createBaseImageLayer(): typeof ImageLayer {
 }
 
 function createSegmentationsLayer(): typeof GeoJsonLayer {
-    const folderUrl = datasetSelectionStore.getFileUrl(
+    const folderUrl = configStore.getFileUrl(
         datasetSelectionStore.currentLocationMetadata?.segmentationsFolder ??
             'UNKNOWN'
     );
diff --git a/apps/client/src/components/ImageViewerSettingsSidebar.vue b/apps/client/src/components/ImageViewerSettingsSidebar.vue
index 4ed69b6e..17e1f184 100644
--- a/apps/client/src/components/ImageViewerSettingsSidebar.vue
+++ b/apps/client/src/components/ImageViewerSettingsSidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useEventBusStore } from '@/stores/eventBusStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 
 import { storeToRefs } from 'pinia';
 import { watch } from 'vue';
diff --git a/apps/client/src/components/ImageViewerSettingsToolbar.vue b/apps/client/src/components/ImageViewerSettingsToolbar.vue
index f2d7093c..01a151e6 100644
--- a/apps/client/src/components/ImageViewerSettingsToolbar.vue
+++ b/apps/client/src/components/ImageViewerSettingsToolbar.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useCellMetaData } from '@/stores/cellMetaData';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
 import { storeToRefs } from 'pinia';
-import { useEventBusStore } from '@/stores/eventBusStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
 
 const imageViewerStoreUntrracked = useImageViewerStoreUntrracked();
 const cellMetaData = useCellMetaData();
diff --git a/apps/client/src/components/LooneageViewGL.vue b/apps/client/src/components/LooneageViewGL.vue
index d0cf1409..400cfb39 100644
--- a/apps/client/src/components/LooneageViewGL.vue
+++ b/apps/client/src/components/LooneageViewGL.vue
@@ -7,24 +7,24 @@ import {
     type Lineage,
     type Track,
     type Cell,
-} from '@/stores/cellMetaData';
-import { useDataPointSelection } from '@/stores/dataPointSelection';
-import { useDataPointSelectionUntrracked } from '@/stores/dataPointSelectionUntrracked';
-import { useSegmentationStore } from '@/stores/segmentationStore';
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useDataPointSelection } from '@/stores/interactionStores/dataPointSelectionTrrackedStore';
+import { useDataPointSelectionUntrracked } from '@/stores/interactionStores/dataPointSelectionUntrrackedStore';
+import { useSegmentationStore } from '@/stores/dataStores/segmentationStore';
 import CellSnippetsLayer from './layers/CellSnippetsLayer';
 import type { Selection } from './layers/CellSnippetsLayer';
-import { useImageViewerStore } from '@/stores/imageViewerStore';
-import { useImageViewerStoreUntrracked } from '@/stores/imageViewerStoreUntrracked';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
-import { useDatasetSelectionTrrackedStore } from '@/stores/datasetSelectionTrrackedStore';
-import { useEventBusStore } from '@/stores/eventBusStore';
+import { useImageViewerStore } from '@/stores/componentStores/imageViewerTrrackedStore';
+import { useImageViewerStoreUntrracked } from '@/stores/componentStores/imageViewerUntrrackedStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+import { useDatasetSelectionTrrackedStore } from '@/stores/dataStores/datasetSelectionTrrackedStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 import {
     useLooneageViewStore,
     type SelectedSnippet,
     type InnerHorizonChartSettings,
-} from '@/stores/looneageViewStore';
+} from '@/stores/componentStores/looneageViewStore';
 import { isEqual } from 'lodash-es';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 
 import Pool from '../util/Pool';
 import type { Feature } from 'geojson';
@@ -72,10 +72,11 @@ import SnippetSegmentationLayer from './layers/SnippetSegmentationLayer/SnippetS
 import SnippetSegmentationOutlineLayer from './layers/SnippetSegmentationOutlineLayer/SnippetSegmentationOutlineLayer';
 
 import HorizonChartLayer from './layers/HorizonChartLayer/HorizonChartLayer';
+import { useConfigStore } from '@/stores/misc/configStore';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
-
+const configStore = useConfigStore();
 const dataPointSelection = useDataPointSelection();
 const dataPointSelectionUntrracked = useDataPointSelectionUntrracked();
 const { hoveredCellIndex } = storeToRefs(dataPointSelectionUntrracked);
@@ -247,7 +248,7 @@ watch(currentLocationMetadata, async () => {
 
     pixelSource.value = null;
 
-    const fullImageUrl = datasetSelectionStore.getFileUrl(
+    const fullImageUrl = configStore.getFileUrl(
         currentLocationMetadata.value.imageDataFilename
     );
     loader.value = await loadOmeTiff(fullImageUrl, { pool: new Pool() });
diff --git a/apps/client/src/components/LooneageViewSettingsSidebar.vue b/apps/client/src/components/LooneageViewSettingsSidebar.vue
index 34aa29c4..f79f9359 100644
--- a/apps/client/src/components/LooneageViewSettingsSidebar.vue
+++ b/apps/client/src/components/LooneageViewSettingsSidebar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useLooneageViewStore } from '@/stores/looneageViewStore';
-import { useEventBusStore } from '@/stores/eventBusStore';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useLooneageViewStore } from '@/stores/componentStores/looneageViewStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 import { clamp } from 'lodash-es';
 
 import {
diff --git a/apps/client/src/components/LooneageViewSettingsToolbar.vue b/apps/client/src/components/LooneageViewSettingsToolbar.vue
index 5a0ffb94..17d7cfdd 100644
--- a/apps/client/src/components/LooneageViewSettingsToolbar.vue
+++ b/apps/client/src/components/LooneageViewSettingsToolbar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useLooneageViewStore } from '@/stores/looneageViewStore';
-import { useEventBusStore } from '@/stores/eventBusStore';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useLooneageViewStore } from '@/stores/componentStores/looneageViewStore';
+import { useEventBusStore } from '@/stores/misc/eventBusStore';
 
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
diff --git a/apps/client/src/components/NoDataSplash.vue b/apps/client/src/components/NoDataSplash.vue
index 114e4a5b..390687be 100644
--- a/apps/client/src/components/NoDataSplash.vue
+++ b/apps/client/src/components/NoDataSplash.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 const cellMetaData = useCellMetaData();
 const globalSettings = useGlobalSettings();
 </script>
diff --git a/apps/client/src/components/SimpleTable.vue b/apps/client/src/components/SimpleTable.vue
index ff8a659d..61655381 100644
--- a/apps/client/src/components/SimpleTable.vue
+++ b/apps/client/src/components/SimpleTable.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { useCellMetaData, type Lineage } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import {
+    useCellMetaData,
+    type Lineage,
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { useElementSize } from '@vueuse/core';
 import NoDataSplash from './NoDataSplash.vue';
 
diff --git a/apps/client/src/components/TrrackVisWrapper.vue b/apps/client/src/components/TrrackVisWrapper.vue
index ec18c323..535e747a 100644
--- a/apps/client/src/components/TrrackVisWrapper.vue
+++ b/apps/client/src/components/TrrackVisWrapper.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useGlobalSettings, type SettingsPage } from '@/stores/globalSettings';
-import { useProvenanceStore } from '@/stores/provenanceStore';
+import {
+    useGlobalSettings,
+    type SettingsPage,
+} from '@/stores/componentStores/globalSettingsStore';
+import { useProvenanceStore } from '@/stores/misc/provenanceStore';
 import { ProvVisCreator } from '@trrack/vis-react';
 import type { NodeId } from '@trrack/core';
 const globalSettings = useGlobalSettings();
diff --git a/apps/client/src/components/custom/LBanner.vue b/apps/client/src/components/custom/LBanner.vue
new file mode 100644
index 00000000..6c4af6c1
--- /dev/null
+++ b/apps/client/src/components/custom/LBanner.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { QBanner, QIcon } from 'quasar';
+
+// Props
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'info',
+        validator: (value: string) =>
+            ['success', 'error', 'warning', 'info'].includes(value),
+    },
+    message: {
+        type: String,
+        required: true,
+    },
+});
+
+const bannerIcon = computed(() => {
+    switch (props.type) {
+        case 'success':
+            return 'check_circle';
+        case 'error':
+            return 'error';
+        case 'warning':
+            return 'warning';
+        case 'info':
+        default:
+            return 'info';
+    }
+});
+
+// Define dynamic classes based on `type`
+const bannerTypeClass = computed(() => {
+    return {
+        'banner-success': props.type === 'success',
+        'banner-error': props.type === 'error',
+        'banner-warning': props.type === 'warning',
+        'banner-info ': props.type === 'info',
+    };
+});
+</script>
+
+<template>
+    <q-banner
+        :class="[
+            'banner',
+            'q-pa-md',
+            'rounded-borders',
+            bannerTypeClass,
+            $attrs.class,
+        ]"
+        :icon="bannerIcon"
+        dense
+    >
+        <template v-slot:avatar>
+            <q-icon :name="bannerIcon" class="banner-icon" />
+        </template>
+
+        <div>{{ message }}</div>
+        <template v-slot:action>
+            <slot name="action"></slot>
+        </template>
+    </q-banner>
+</template>
+
+<style lang="scss" scoped>
+.banner {
+    border-style: solid;
+    border-width: 2px;
+
+    &.banner-success {
+        background-color: $green-1;
+        border-color: $green-8;
+        color: $green-10;
+    }
+
+    &.banner-warning {
+        background-color: $yellow-1;
+        border-color: $orange-7;
+        color: $deep-orange-10;
+    }
+
+    &.banner-info {
+        background-color: $blue-1;
+        border-color: $blue-9;
+        color: $blue-10;
+    }
+
+    &.banner-error {
+        background-color: $red-1;
+        border-color: $red-10;
+        color: $red-10;
+    }
+}
+</style>
diff --git a/apps/client/src/components/custom/LBtn.vue b/apps/client/src/components/custom/LBtn.vue
new file mode 100644
index 00000000..d61a4504
--- /dev/null
+++ b/apps/client/src/components/custom/LBtn.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// Props
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'confirm',
+        validator: (value: string) =>
+            [
+                'confirm',
+                'previous',
+                'cancel',
+                'basic',
+                'action',
+                'delete',
+            ].includes(value),
+    },
+    label: {
+        type: String,
+        required: false,
+    },
+});
+
+const isFlat = computed(
+    () =>
+        props.type === 'previous' ||
+        props.type === 'basic' ||
+        props.type === 'cancel'
+);
+const isUnelevated = computed(
+    () => props.type === 'confirm' || props.type === 'delete'
+);
+const isOutline = computed(() => props.type === 'action');
+
+const buttonColor = computed(() => {
+    switch (props.type) {
+        case 'confirm':
+            return 'info';
+        case 'cancel':
+            return 'red';
+        case 'delete':
+            return 'red';
+        case 'previous':
+            return 'standard';
+        case 'basic':
+            return 'standard';
+        default:
+            return 'standard';
+    }
+});
+</script>
+<template>
+    <q-btn
+        v-bind="$attrs"
+        :class="$attrs.class"
+        :label="label"
+        :color="buttonColor"
+        :flat="isFlat"
+        :outline="isOutline"
+        :unelevated="isUnelevated"
+        no-caps
+    />
+</template>
diff --git a/apps/client/src/components/custom/LChip.vue b/apps/client/src/components/custom/LChip.vue
new file mode 100644
index 00000000..0f4bd573
--- /dev/null
+++ b/apps/client/src/components/custom/LChip.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// Props
+defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+});
+</script>
+<template>
+    <q-chip color="primary" square dense outline :label="label" />
+</template>
+<style scoped lang="scss"></style>
diff --git a/apps/client/src/components/globalSettings/DatasetSelector.vue b/apps/client/src/components/globalSettings/DatasetSelector.vue
index 25221108..dbc79a12 100644
--- a/apps/client/src/components/globalSettings/DatasetSelector.vue
+++ b/apps/client/src/components/globalSettings/DatasetSelector.vue
@@ -1,26 +1,21 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
 import { useQuasar } from 'quasar';
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useDatasetSelectionTrrackedStore } from '@/stores/datasetSelectionTrrackedStore';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
-
-import { useDataPointSelection } from '@/stores/dataPointSelection';
-import { useConfigStore } from '@/stores/configStore';
-import { useSelectionStore } from '@/stores/selectionStore';
-import { useFilterStore } from '@/stores/filterStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useDatasetSelectionTrrackedStore } from '@/stores/dataStores/datasetSelectionTrrackedStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 
+import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
+import { useFilterStore } from '@/stores/componentStores/filterStore';
 
 const globalSettings = useGlobalSettings();
 const datasetSelectionStore = useDatasetSelectionStore();
 const datasetSelectionTrrackedStore = useDatasetSelectionTrrackedStore();
 const $q = useQuasar();
 
-const configStore = useConfigStore();
 const selectionStore = useSelectionStore();
 const filterStore = useFilterStore();
 
-
 watch(
     () => datasetSelectionStore.fetchingTabularData,
     () => {
@@ -52,7 +47,6 @@ const shortExpName = computed<string>(() => {
     return shortName;
 });
 
-
 function onSelectExperiment() {
     selectionStore.clearAllSelections();
     filterStore.clearAllFilters();
diff --git a/apps/client/src/components/globalSettings/FilterEditMenu.vue b/apps/client/src/components/globalSettings/FilterEditMenu.vue
index d6d2aca4..e1db419b 100644
--- a/apps/client/src/components/globalSettings/FilterEditMenu.vue
+++ b/apps/client/src/components/globalSettings/FilterEditMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import {
     QMenu,
     QItem,
@@ -13,8 +13,8 @@ import {
     QBtn,
     QBanner,
 } from 'quasar';
-import { useSelectionStore } from '@/stores/selectionStore';
-import { useFilterStore } from '@/stores/filterStore';
+import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
+import { useFilterStore } from '@/stores/componentStores/filterStore';
 
 const globalSettings = useGlobalSettings();
 const props = defineProps<{
diff --git a/apps/client/src/components/globalSettings/FilterSelector.vue b/apps/client/src/components/globalSettings/FilterSelector.vue
index 6dd5b813..39231c48 100644
--- a/apps/client/src/components/globalSettings/FilterSelector.vue
+++ b/apps/client/src/components/globalSettings/FilterSelector.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import PlotSelector from './PlotSelector.vue';
-import { useFilterStore } from '@/stores/filterStore';
-import { useSelectionStore } from '@/stores/selectionStore';
+import { useFilterStore } from '@/stores/componentStores/filterStore';
+import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
 import { storeToRefs } from 'pinia';
 import FilterEditMenu from './FilterEditMenu.vue';
 
diff --git a/apps/client/src/components/globalSettings/GeneralSettings.vue b/apps/client/src/components/globalSettings/GeneralSettings.vue
index 52d56c3b..dee8b64c 100644
--- a/apps/client/src/components/globalSettings/GeneralSettings.vue
+++ b/apps/client/src/components/globalSettings/GeneralSettings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 const globalSettings = useGlobalSettings();
 </script>
 
diff --git a/apps/client/src/components/globalSettings/GlobalSettingsView.vue b/apps/client/src/components/globalSettings/GlobalSettingsView.vue
index aba61333..e17428b1 100644
--- a/apps/client/src/components/globalSettings/GlobalSettingsView.vue
+++ b/apps/client/src/components/globalSettings/GlobalSettingsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { onKeyStroke } from '@vueuse/core';
 const globalSettings = useGlobalSettings();
 onKeyStroke(['b', 'B'], (e: KeyboardEvent) => {
diff --git a/apps/client/src/components/globalSettings/LayoutSelector.vue b/apps/client/src/components/globalSettings/LayoutSelector.vue
index af146399..32ec7a36 100644
--- a/apps/client/src/components/globalSettings/LayoutSelector.vue
+++ b/apps/client/src/components/globalSettings/LayoutSelector.vue
@@ -2,8 +2,8 @@
 import {
     useGridstackLayoutStore,
     type Layout,
-} from '@/stores/gridstackLayoutStore';
-import { useGlobalSettings } from '@/stores/globalSettings';
+} from '@/stores/interactionStores/gridstackLayoutStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { nextTick } from 'vue';
 
 const gridstackLayoutStore = useGridstackLayoutStore();
diff --git a/apps/client/src/components/globalSettings/PlotSelector.vue b/apps/client/src/components/globalSettings/PlotSelector.vue
index e0cbbf39..23911791 100644
--- a/apps/client/src/components/globalSettings/PlotSelector.vue
+++ b/apps/client/src/components/globalSettings/PlotSelector.vue
@@ -4,17 +4,20 @@ import { QBtn, QDialog, QCard, QCardSection, QCardActions } from 'quasar';
 import * as vg from '@uwdata/vgplot';
 import { storeToRefs } from 'pinia';
 import UnivariateCellPlot from './UnivariateCellPlot.vue';
-import { useSelectionStore, emitter } from '@/stores/selectionStore';
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import {
+    useSelectionStore,
+    emitter,
+} from '@/stores/interactionStores/selectionStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useNotificationStore } from '@/stores/misc/notificationStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
+const datasetSelectionStore = useDatasetSelectionStore();
 
 const globalSettings = useGlobalSettings();
-const cellMetaData = useCellMetaData();
-const { dataInitialized } = storeToRefs(cellMetaData);
-
-interface Selection {
-    [key: string]: [number, number] | undefined;
-}
+const notificationStore = useNotificationStore();
+const { experimentDataInitialized, currentExperimentMetadata } = storeToRefs(
+    datasetSelectionStore
+);
 
 const menuOpen = ref(false);
 const loading = ref(true);
@@ -25,25 +28,60 @@ const displayedPlots = computed(() =>
 const totalPlots = computed(() => displayedPlots.value.length);
 
 // On any update, computes the plots to be shown.
+
+// Checks if specifically experiment metadata is already loaded.
 const allPlotNames = computed(() => {
-    return dataInitialized.value ? cellMetaData.headers : [];
+    if (
+        experimentDataInitialized.value &&
+        currentExperimentMetadata.value &&
+        currentExperimentMetadata.value.headers
+    ) {
+        return currentExperimentMetadata.value.headers;
+    } else {
+        return [];
+    }
 });
+
 const firstPlotName = computed(() => {
-    return dataInitialized.value ? cellMetaData.headerKeys.mass : '';
+    if (
+        experimentDataInitialized.value &&
+        currentExperimentMetadata.value &&
+        currentExperimentMetadata.value.headers &&
+        currentExperimentMetadata.value.headers.length > 0
+    ) {
+        // does headerTransforms['mass'] exist
+        const headerTransforms =
+            currentExperimentMetadata.value.headerTransforms;
+        if (
+            headerTransforms &&
+            headerTransforms['mass'] &&
+            headerTransforms['mass'] !== ''
+        ) {
+            return headerTransforms['mass'];
+        } else {
+            // otherwise return first header from headers
+            return currentExperimentMetadata.value.headers[0];
+        }
+    } else {
+        return '';
+    }
 });
 
 const selectionStore = useSelectionStore();
 
 const { dataSelections } = storeToRefs(selectionStore);
 
-const showErrorDialog = ref(false);
 const errorPlotName = ref('');
 
 // If there is a plot loading here, a dialog is displayed.
 function handlePlotError(plotName: string) {
     // console.log('handlePlotError called with:', plotName);
     errorPlotName.value = plotName;
-    showErrorDialog.value = true;
+
+    notificationStore.notify({
+        type: 'problem',
+        message: `An Error occured while loading the plot ${errorPlotName}`,
+    });
 
     // Deselect the plot and remove it from the shown plots
     selectionStore.removePlotWithErrors(plotName);
@@ -59,7 +97,7 @@ function handlePlotError(plotName: string) {
 onMounted(() => {
     emitter.on('plot-error', handlePlotError);
     watch(
-        dataInitialized,
+        experimentDataInitialized,
         (isInitialized) => {
             if (isInitialized && firstPlotName.value) {
                 selectionStore.addPlot(firstPlotName.value);
@@ -130,7 +168,7 @@ window.addEventListener(
 </script>
 <template>
     <div>
-        <div v-if="!dataInitialized" class="flex justify-center">
+        <div v-if="!experimentDataInitialized" class="flex justify-center">
             <div class="text-h6 q-m-lg">Loading...</div>
         </div>
         <div v-else>
@@ -179,20 +217,6 @@ window.addEventListener(
                 @plot-loaded="handlePlotLoaded"
                 @plot-error="handlePlotError"
             />
-            <q-dialog v-model="showErrorDialog">
-                <q-card>
-                    <q-card-section>
-                        <div class="text-h6">Error</div>
-                    </q-card-section>
-                    <q-card-section class="q-pt-none">
-                        An error occurred while loading the plot:
-                        {{ errorPlotName }}
-                    </q-card-section>
-                    <q-card-actions align="right">
-                        <q-btn flat label="OK" color="primary" v-close-popup />
-                    </q-card-actions>
-                </q-card>
-            </q-dialog>
         </div>
     </div>
 </template>
diff --git a/apps/client/src/components/globalSettings/StubView.vue b/apps/client/src/components/globalSettings/StubView.vue
index c7075b22..8ff00767 100644
--- a/apps/client/src/components/globalSettings/StubView.vue
+++ b/apps/client/src/components/globalSettings/StubView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useCellMetaData, type AnyAttributes } from '@/stores/cellMetaData';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
 
 const cellMetaData = useCellMetaData();
 </script>
diff --git a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
index 5cd0ed58..aeb7c661 100644
--- a/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
+++ b/apps/client/src/components/globalSettings/UnivariateCellPlot.vue
@@ -2,17 +2,21 @@
 import { ref, watch, onMounted, computed } from 'vue';
 import type { PropType } from 'vue';
 import * as vg from '@uwdata/vgplot';
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useSelectionStore, type DataSelection } from '@/stores/selectionStore';
+import {
+    useSelectionStore,
+    type DataSelection,
+} from '@/stores/interactionStores/selectionStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import { storeToRefs } from 'pinia';
 import FilterEditMenu from './FilterEditMenu.vue';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 import { QItemSection } from 'quasar';
 
 // Initialise Data
+const datasetSelectionStore = useDatasetSelectionStore();
+const { experimentDataInitialized } = storeToRefs(datasetSelectionStore);
+
 const globalSettings = useGlobalSettings();
-const cellMetaData = useCellMetaData();
-const { dataInitialized } = storeToRefs(cellMetaData);
 const selectionStore = useSelectionStore();
 
 // Define Plot Emits and Props
@@ -33,7 +37,7 @@ function makePlot(column: string) {
     try {
         return vg.plot(
             // Background grey data
-            vg.rectY(vg.from('current_cell_metadata'), {
+            vg.rectY(vg.from('composite_experiment_cell_metadata'), {
                 x: vg.bin(column),
                 y: vg.count(),
                 fill: '#cccccc',
@@ -41,7 +45,9 @@ function makePlot(column: string) {
             }),
             // Currently Selected Data
             vg.rectY(
-                vg.from('current_cell_metadata', { filterBy: props.plotBrush }),
+                vg.from('composite_experiment_cell_metadata', {
+                    filterBy: props.plotBrush,
+                }),
                 {
                     x: vg.bin(column),
                     y: vg.count(),
@@ -57,7 +63,7 @@ function makePlot(column: string) {
             vg.width(268),
             vg.height(85),
             vg.style({ 'font-size': '.85em' }),
-            vg.xDomain(vg.toFixed),
+            vg.xDomain(vg.Fixed),
             vg.xLabelAnchor('center'),
             vg.xTickPadding(8),
             vg.xLabelOffset(38),
@@ -110,13 +116,13 @@ async function handlePlotLoading() {
 
 // Handle Rendering
 onMounted(() => {
-    if (dataInitialized.value) {
+    if (experimentDataInitialized.value) {
         createCharts();
     }
 });
 
 // Waits for data to be initialized before creating charts
-watch(dataInitialized, createCharts);
+watch(experimentDataInitialized, createCharts);
 
 const plotContainer = ref<HTMLDivElement | null>(null);
 
diff --git a/apps/client/src/components/upload/LoadingProgress.vue b/apps/client/src/components/upload/LoadingProgress.vue
index f1c1512a..73b914f1 100644
--- a/apps/client/src/components/upload/LoadingProgress.vue
+++ b/apps/client/src/components/upload/LoadingProgress.vue
@@ -1,113 +1,120 @@
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import type { progress } from '@/stores/uploadStore';
-export interface ProgressRecord {
-    label: string;
-    progress: progress;
-    subProgress?: ProgressRecord[];
-}
+import type {
+    FileToUpload,
+} from '@/stores/componentStores/uploadStore';
 
 const props = defineProps({
     progressStatus: {
-        type: Array as PropType<ProgressRecord[]>,
+        type: Array as PropType<FileToUpload[]>,
         required: true,
     },
 });
 
-const getProgresses = (progressStatus: ProgressRecord[]) => {
-    let tempProgressStatus: [ProgressRecord, string][] = progressStatus.map(
-        (entry: ProgressRecord) => {
-            return [entry, entry.progress];
+const getLabel = (file: FileToUpload): string => {
+    const splitUniqueId = file.uniqueId?.split('_');
+    let fileType = '';
+    let locationId = '';
+    if (splitUniqueId) {
+        fileType = splitUniqueId[2];
+        locationId = splitUniqueId[1];
+    }
+
+    if(file.uploading === 'not_started'){
+        return `Waiting to upload Location ${locationId} ${fileType}...`
+    }
+
+    if (file.uploading !== 'succeeded' && file.uploading !== 'failed') {
+        return `Uploading Location ${locationId} ${fileType}... `;
+    } else if (
+        file.processing !== 'succeeded' &&
+        file.processing !== 'failed'
+    ) {
+        return `Processing Location ${locationId} ${fileType}... `;
+    } else {
+        return `Finished Location ${locationId} ${fileType}`;
+    }
+};
+
+const getCurrProgressValue = (file: FileToUpload): number => {
+    if (file.uploading == 'succeeded') {
+        if (file.processing == 'running') {
+            if (file.metadata && file.metadata.total && file.metadata.current) {
+                const total = file.metadata.total;
+                const current = file.metadata.current;
+                const slope = 0.7 / total;
+                if (current === total) {
+                    return 1;
+                }
+                return slope * current + 0.3;
+            } else {
+                return 0.3;
+            }
+        } else if (file.processing === 'succeeded') {
+            return 1;
+        } else {
+            return 0.3;
         }
-    );
-    return tempProgressStatus;
+    }
+    return 0;
 };
 </script>
 
 <template>
-    <div class="column">
-        <template
-            v-for="(item, idx) in getProgresses(progressStatus)"
-            :key="item.label"
-        >
-            <div class="spinner-container">
-                <q-spinner v-if="item[1] == 'running'" size="20" />
+    <template v-for="item in progressStatus" :key="item.uniqueId">
+        <div class="row q-ma-sm q-mt-lg justify-between items-center">
+            <div class="row items-center">
                 <q-icon
-                    v-if="item[1] == 'succeeded'"
-                    name="mdi-check-circle"
-                    color="green"
-                    size="20px"
+                    v-if="
+                        item.uploading === 'failed' ||
+                        item.processing === 'failed'
+                    "
+                    class="q-mr-sm"
+                    name="mdi-alert-box"
+                    color="red"
                 />
                 <q-icon
-                    v-if="item[1] == 'not_started'"
+                    v-if="item.uploading === 'not_started'"
                     name="mdi-circle-outline"
-                    size="20px"
                     color="grey"
+                    class="q-mr-sm"
+                />
+                <q-spinner
+                    v-else-if="item.processing !== 'succeeded'"
+                    class="q-mr-sm"
                 />
                 <q-icon
-                    v-if="item[1] === 'failed'"
-                    name="mdi-alert-circle-outline"
-                    size="20px"
-                    color="red"
+                    v-else-if="item.processing === 'succeeded' && item.uploading === 'succeeded'"
+                    name="check_circle"
+                    color="success"
+                    class="q-mr-sm"
                 />
-                <span
-                    :class="{
-                        'progress-running': item[1] === 'running',
-                        'progress-not-started': item[1] === 'not_started',
-                        'progress-succeeded': item[1] === 'succeeded',
-                        'progress-failed': item[1] === 'failed',
-                    }"
-                    style="font-size: 1.1em"
-                    >{{ item[0].label }}</span
-                >
+                <q-icon
+                    v-else
+                    name="mdi-circle-outline"
+                    color="grey"
+                    class="q-mr-sm"
+                />
+                <div>{{ getLabel(item) }}</div>
+            </div>
+
+            <div
+                v-if="item.metadata?.current && item.metadata?.total"
+                class="row"
+            >
+                {{ `${item.metadata?.current}/${item.metadata?.total}` }}
             </div>
-            <template v-for="subProgress in item[0].subProgress">
-                <div class="spinner-container" style="margin-left: 50px">
-                    <q-spinner-dots
-                        v-if="subProgress.progress == 'dispatched'"
-                        size="20"
-                    />
-                    <q-spinner
-                        v-if="subProgress.progress == 'running'"
-                        size="20"
-                    />
-                    <q-icon
-                        v-if="subProgress.progress == 'succeeded'"
-                        name="mdi-check-circle"
-                        color="green"
-                        size="20px"
-                    />
-                    <q-icon
-                        v-if="subProgress.progress == 'not_started'"
-                        name="mdi-circle-outline"
-                        size="20px"
-                        color="grey"
-                    />
-                    <q-icon
-                        v-if="subProgress.progress === 'failed'"
-                        name="mdi-alert-circle-outline"
-                        size="20px"
-                        color="red"
-                    />
-                    <span
-                        :class="{
-                            'progress-dispatched':
-                                subProgress.progress === 'dispatched',
-                            'progress-running':
-                                subProgress.progress === 'running',
-                            'progress-not-started':
-                                subProgress.progress === 'not_started',
-                            'progress-succeeded':
-                                subProgress.progress === 'succeeded',
-                            'progress-failed':
-                                subProgress.progress === 'failed',
-                        }"
-                        >{{ subProgress.label }}</span
-                    >
-                </div>
-            </template>
-        </template>
-    </div>
+        </div>
+        <div class="q-ma-sm q-mb-xl">
+            <q-linear-progress
+                size="5px"
+                :value="getCurrProgressValue(item)"
+                animation-speed="500"
+                color="success"
+            >
+            </q-linear-progress>
+        </div>
+    </template>
 </template>
 
 <style scoped>
diff --git a/apps/client/src/components/upload/StepColumnNameMapping.vue b/apps/client/src/components/upload/StepColumnNameMapping.vue
index 1bd2f4d5..687c9d80 100644
--- a/apps/client/src/components/upload/StepColumnNameMapping.vue
+++ b/apps/client/src/components/upload/StepColumnNameMapping.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useUploadStore } from '@/stores/uploadStore';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useUploadStore } from '@/stores/componentStores/uploadStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 const uploadStore = useUploadStore();
 const globalSettings = useGlobalSettings();
 
@@ -45,7 +45,6 @@ const specialVariables = ref<SpecialVariable[]>([
         description: 'Same, but for the Y coordinate.',
     },
 ]);
-
 </script>
 
 <template>
diff --git a/apps/client/src/components/upload/StepExperimentMetadata.vue b/apps/client/src/components/upload/StepExperimentMetadata.vue
index 386a1464..3135b0e0 100644
--- a/apps/client/src/components/upload/StepExperimentMetadata.vue
+++ b/apps/client/src/components/upload/StepExperimentMetadata.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useUploadStore } from '@/stores/uploadStore';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { useUploadStore } from '@/stores/componentStores/uploadStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
 const uploadStore = useUploadStore();
 const globalSettings = useGlobalSettings();
 
diff --git a/apps/client/src/components/upload/StepFileSelection.vue b/apps/client/src/components/upload/StepFileSelection.vue
index f79589b9..ce830846 100644
--- a/apps/client/src/components/upload/StepFileSelection.vue
+++ b/apps/client/src/components/upload/StepFileSelection.vue
@@ -1,12 +1,71 @@
 <script setup lang="ts">
-import { useUploadStore } from '@/stores/uploadStore';
-import { useGlobalSettings } from '@/stores/globalSettings';
+import { ref } from 'vue';
+import { useUploadStore } from '@/stores/componentStores/uploadStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import LBtn from '../custom/LBtn.vue';
+import LChip from '../custom/LChip.vue';
 const uploadStore = useUploadStore();
 const globalSettings = useGlobalSettings();
+
+const currentLocationIndex = ref<number>(0);
+
+function handleLocationIdInput(index: number) {
+    currentLocationIndex.value = index;
+}
+
+const dialog = ref(false);
+
+const tempTags = ref<[string, string][]>([['', '']]);
+
+const openTagModal = (index: number) => {
+    currentLocationIndex.value = index;
+    tempTags.value = JSON.parse(JSON.stringify(uploadStore.tags[index]));
+    dialog.value = true;
+};
+
+const closeTagModal = () => {
+    tempTags.value = [['', '']];
+    dialog.value = false;
+};
+
+// Saves current tags to the tags in upload store
+const saveTags = () => {
+    uploadStore.tags[currentLocationIndex.value] = JSON.parse(
+        JSON.stringify(tempTags.value)
+    );
+    for (let i = 0; i < tempTags.value.length; i++) {
+        if (!(tempTags.value[i][0] in uploadStore.tagColors)) {
+            uploadStore.tagColors[tempTags.value[i][0]] =
+                colors[currColorIndex.value];
+            currColorIndex.value = (currColorIndex.value + 1) % colors.length;
+        }
+    }
+    dialog.value = false;
+};
+
+// Add new tag key-value pair in dialog
+const addTag = () => {
+    tempTags.value.push(['', '']);
+};
+
+// Remove tag key-value pair in dialog
+const removeTag = (idx: number) => {
+    tempTags.value.splice(idx, 1);
+};
+
+const currColorIndex = ref<number>(0);
+const colors = [
+    'indigo-10',
+    'teal-10',
+    'purple-10',
+    'red-10',
+    'blue-grey-10',
+    'brown-9',
+];
 </script>
 
 <template>
-    <div>
+    <div class="q-mb-lg">
         Select all files for the experiment. Location ID should be unique for
         each location. The table should be a CSV file. The images for a single
         location should be in a .zip files. The segmentations for a single
@@ -15,59 +74,144 @@ const globalSettings = useGlobalSettings();
     <div
         v-for="(locationFile, index) in uploadStore.locationFileList"
         :key="index"
-        class="row q-mt-lg q-gutter-sm"
+        class="column"
     >
-        <q-input
-            class="flex-grow-1"
-            outlined
-            v-model="locationFile.locationId"
-            label="Location ID"
-            :dark="globalSettings.darkMode"
-        />
-        <q-file
-            class="flex-grow-1"
-            outlined
-            v-model="locationFile.table.file"
-            label="Table (csv)"
-            :dark="globalSettings.darkMode"
-            @update:model-value="uploadStore.populateDefaultColumnMappings"
-        />
+        <div class="row">
+            <template
+                v-for="(tag, tagIndex) in uploadStore.tags[index]"
+                :key="tagIndex"
+            >
+                <l-chip
+                    v-if="tag[0] !== ''"
+                    :color="uploadStore.tagColors[tag[0]]"
+                    :label="`${tag[0]}: ${tag[1]}`"
+                />
+            </template>
+        </div>
+        <div class="row q-col-gutter-x-sm">
+            <q-input
+                class="flex-grow-1"
+                outlined
+                v-model="locationFile.locationId"
+                label="Location ID"
+                :dark="globalSettings.darkMode"
+                :rules="[(val: any) => !!val || 'Field is required']"
+                :error="
+                    !uploadStore.locationIdsUnique &&
+                    currentLocationIndex === index
+                "
+                :error-message="
+                    !uploadStore.locationIdsUnique &&
+                    currentLocationIndex === index
+                        ? 'Id is already in use.'
+                        : 'Field is required'
+                "
+                @update:model-value="handleLocationIdInput(index)"
+            />
+            <q-file
+                class="flex-grow-1"
+                outlined
+                v-model="locationFile.table.file"
+                label="Table (csv)"
+                :dark="globalSettings.darkMode"
+                @update:model-value="uploadStore.populateDefaultColumnMappings"
+            />
 
-        <q-file
-            class="flex-grow-1"
-            outlined
-            v-model="locationFile.images.file"
-            label="Images (zip)"
-            :dark="globalSettings.darkMode"
-        />
-        <q-file
-            class="flex-grow-1"
-            outlined
-            v-model="locationFile.segmentations.file"
-            label="Segmentations (zip)"
-            :dark="globalSettings.darkMode"
-        />
-        <q-btn
-            @click="uploadStore.removeLocation(index)"
-            icon="delete"
-            title="Remove Location"
-            outline
-            :dark="globalSettings.darkMode"
-        />
+            <q-file
+                class="flex-grow-1"
+                outlined
+                v-model="locationFile.images.file"
+                label="Images (zip)"
+                :dark="globalSettings.darkMode"
+            />
+            <q-file
+                class="flex-grow-1"
+                outlined
+                v-model="locationFile.segmentations.file"
+                label="Segmentations (zip)"
+                :dark="globalSettings.darkMode"
+            />
+            <l-btn
+                @click="openTagModal(index)"
+                icon="mdi-tag"
+                :dark="globalSettings.darkMode"
+                class="self-stretch q-pl-sm q-pr-sm q-mr-none q-ml-none"
+                style="margin-bottom: 20px"
+                type="previous"
+                color="blue"
+            />
+            <l-btn
+                @click="uploadStore.removeLocation(index)"
+                icon="delete"
+                :dark="globalSettings.darkMode"
+                class="self-stretch q-pl-sm q-pr-sm q-mr-none q-ml-sm"
+                style="margin-bottom: 20px"
+                type="previous"
+                color="red"
+            />
+        </div>
     </div>
-
-    <q-btn
-        class="q-mt-lg"
+    <l-btn
         @click="uploadStore.addLocation"
         label="Add Location"
-        outline
+        class="q-mt-lg"
+        type="action"
+        icon-right="mdi-plus"
     />
+    <q-dialog v-model="dialog" backdrop-filter="blur(4px)'">
+        <q-card>
+            <q-card-section class="row items-center q-pb-none text-h6">
+                Add Or Remove Tags
+            </q-card-section>
+            <q-card-section class="row items-center q-pt-sm q-pb-none">
+                Use the tags to allow for filtering on your data in the Loon UI.
+            </q-card-section>
 
-    <q-banner
-        v-if="!uploadStore.locationIdsUnique()"
-        class="q-mt-sm text-white bg-red"
-        >Location IDs must be Unique.</q-banner
-    >
+            <q-card-section>
+                <template v-for="(item, idx) in tempTags" :key="idx">
+                    <div class="row items-center q-mt-md">
+                        <q-input
+                            class="q-mr-md"
+                            v-model="item[0]"
+                            outlined
+                            dense
+                        ></q-input>
+                        <div style="font-size: 18pt; margin-bottom: 5px">=</div>
+                        <q-input
+                            outlined
+                            dense
+                            class="q-ml-md"
+                            v-model="item[1]"
+                        ></q-input>
+                        <l-btn
+                            @click="removeTag(idx)"
+                            icon="delete"
+                            :dark="globalSettings.darkMode"
+                            class="self-stretch"
+                            type="previous"
+                            color="red"
+                        />
+                    </div>
+                </template>
+                <l-btn
+                    label="Add tag"
+                    icon-right="mdi-plus"
+                    @click="addTag()"
+                    class="q-mt-lg"
+                    type="action"
+                />
+            </q-card-section>
+            <q-card-actions :align="'right'">
+                <l-btn
+                    type="cancel"
+                    color="red"
+                    @click="closeTagModal"
+                    label="Cancel"
+                />
+                <l-btn type="confirm" @click="saveTags" label="Save" />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/apps/client/src/components/upload/StepReview.vue b/apps/client/src/components/upload/StepReview.vue
index 0bc17bab..065b09b1 100644
--- a/apps/client/src/components/upload/StepReview.vue
+++ b/apps/client/src/components/upload/StepReview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useUploadStore } from '@/stores/uploadStore';
+import { useUploadStore } from '@/stores/componentStores/uploadStore';
 const uploadStore = useUploadStore();
 </script>
 
diff --git a/apps/client/src/components/upload/StepUploadStatus.vue b/apps/client/src/components/upload/StepUploadStatus.vue
index 92ffd21a..ba357c51 100644
--- a/apps/client/src/components/upload/StepUploadStatus.vue
+++ b/apps/client/src/components/upload/StepUploadStatus.vue
@@ -1,95 +1,47 @@
 <script setup lang="ts">
-import { useUploadStore } from '@/stores/uploadStore';
+import { useUploadStore } from '@/stores/componentStores/uploadStore';
 import LoadingProgress from '@/components/upload/LoadingProgress.vue';
-import { router } from '@/router';
+import LBanner from '@/components/custom/LBanner.vue';
+
 const uploadStore = useUploadStore();
-function returnHome(): void {
-    router.push('/');
-}
-function addNewExperiment(): void {
-    uploadStore.resetState();
-}
 </script>
 
 <template>
-    <div class="column">
-        <div class="row" style="justify-content: space-between">
-            <span class="text-h4" style="font-weight: bold">
-                Finish Creating Your Experiment</span
-            >
-        </div>
-    </div>
-    <div class="row q-pa-md" style="justify-content: space-between">
-        <div class="column" style="flex: 0.65; border-right: 1px solid #dcdcdc">
-            <span class="q-pa-sm" style="font-size: 1.5em"
-                >Uploading and Processing Progress</span
-            >
-            <div class="q-pa-sm">
-                <div class="q-pa-sm">
-                    <LoadingProgress
-                        :progress-status="uploadStore.progressStatusList"
-                    />
-                </div>
-            </div>
-        </div>
-        <div
-            class="column"
-            style="
-                flex: 1;
-                margin-left: 30px;
-                justify-content: center;
-                align-items: center;
-            "
-        >
+    <div class="column" style="justify-content: space-between">
+        <div class="flex-row q-mt-md">
             <template
                 v-if="
-                    uploadStore.overallProgress.status !== 2 &&
-                    uploadStore.overallProgress.status !== -1
+                    uploadStore.overallProgress.status === 'not_started' || uploadStore.overallProgress.status === 'running'
                 "
             >
-                <q-banner inline-actions class="text-white bg-blue">
-                    Your data is currently being processed. Please do not exit
-                    this page.
-                    <template v-slot:avatar>
-                        <q-icon name="mdi-alert" color="white" />
-                    </template>
-                </q-banner>
+                <l-banner
+                    class="q-mb-md"
+                    type="info"
+                    :message="uploadStore.overallProgress.message"
+                />
             </template>
-            <template v-else-if="uploadStore.overallProgress.status === -1">
-                <q-banner inline-actions class="text-white bg-red">
-                    There was an error in one or more processing steps. Your
-                    experiment will need to be re-uploaded.
-                    <template v-slot:avatar>
-                        <q-icon name="mdi-alert-circle-outline" color="white" />
-                    </template>
-                </q-banner>
+            <template v-else-if="uploadStore.overallProgress.status === 'failed'">
+                <l-banner
+                    type="error"
+                    class="q-mb-md"
+                    :message="uploadStore.overallProgress.message"
+                />
             </template>
             <template v-else>
-                <q-banner class="text-white bg-green">
-                    All your data has been processed and your experiment has
-                    been successfully added. You can now navigate away from this
-                    page.
-                    <template v-slot:avatar>
-                        <q-icon name="mdi-check-circle" color="white" />
-                    </template>
-                    <template v-slot:action>
-                        <q-btn
-                            flat
-                            color="white"
-                            label="Return to Home"
-                            @click="returnHome()"
-                        />
-                        <q-btn
-                            flat
-                            color="white"
-                            label="Add another experiment"
-                            @click="addNewExperiment()"
-                        />
-                    </template>
-                </q-banner>
+                <l-banner
+                    class="q-mb-md"
+                    type="success"
+                    :message="uploadStore.overallProgress.message"
+                />
             </template>
         </div>
+        <div class="flex-row q-mt-md">
+            <div class="flex-column">
+                <LoadingProgress :progress-status="uploadStore.progressList" />
+            </div>
+        </div>
     </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+</style>
diff --git a/apps/client/src/pages/UploadPage.vue b/apps/client/src/pages/UploadPage.vue
index f52185fe..2518d903 100644
--- a/apps/client/src/pages/UploadPage.vue
+++ b/apps/client/src/pages/UploadPage.vue
@@ -1,20 +1,22 @@
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref } from 'vue';
 import StepExperimentMetadata from '@/components/upload/StepExperimentMetadata.vue';
 import StepFileSelection from '@/components/upload/StepFileSelection.vue';
 import StepReview from '@/components/upload/StepReview.vue';
 import StepUploadStatus from '@/components/upload/StepUploadStatus.vue';
 import StepColumnNameMapping from '@/components/upload/StepColumnNameMapping.vue';
 import type { QStepper } from 'quasar';
-import { useUploadStore } from '@/stores/uploadStore';
-import { useConfigStore } from '@/stores/configStore';
-import { useGlobalSettings } from '@/stores/globalSettings';
-import { useQuasar } from 'quasar';
+import { useUploadStore } from '@/stores/componentStores/uploadStore';
+import { useConfigStore } from '@/stores/misc/configStore';
+import { useGlobalSettings } from '@/stores/componentStores/globalSettingsStore';
+import { useNotificationStore } from '@/stores/misc/notificationStore';
+import LBtn from '@/components/custom/LBtn.vue';
 
 import { router } from '@/router';
 const uploadStore = useUploadStore();
 const configStore = useConfigStore();
 const globalSettings = useGlobalSettings();
+const notificationStore = useNotificationStore();
 const stepper = ref(null);
 
 // Function to determine if the create experiment button should be enabled.
@@ -31,7 +33,7 @@ function experimentMetadataDone(): boolean {
 }
 
 function fileSelectionDone(): boolean {
-    return uploadStore.allFilesPopulated() && uploadStore.locationIdsUnique();
+    return uploadStore.allFilesPopulated() && uploadStore.locationIdsUnique;
 }
 
 function columnNameMappingDone(): boolean {
@@ -42,24 +44,23 @@ function returnHome(): void {
     router.push('/');
 }
 
-const $q = useQuasar();
+function addNewExperiment(): void {
+    uploadStore.resetState();
+}
 
 async function handleNextStep(): Promise<void> {
     if (uploadStore.step === 'finalReview' || uploadStore.step === 'metadata') {
         const verifyExperimentName = await uploadStore.verifyExperimentName();
         if (verifyExperimentName) {
             uploadStore.experimentNameValid = true;
-            if (uploadStore.step === 'metadata') {
-                (stepper.value as any).next();
-            } else {
+            if (uploadStore.step === 'finalReview') {
                 uploadStore.uploadAll();
             }
+            (stepper.value as any).next();
         } else {
-            $q.notify({
-                color: 'negative',
+            notificationStore.notify({
                 message: 'Experiment Name already in use.',
-                icon: 'report_problem',
-                position: 'top',
+                type: 'problem',
             });
             uploadStore.experimentNameValid = false;
         }
@@ -92,14 +93,21 @@ function handlePreviousStep(): void {
                 </template>
             </q-banner>
         </template>
-        <template v-else-if="!uploadStore.experimentCreated">
+        <template v-else>
+            <div class="row">
+                <div class="row" style="justify-content: space-between">
+                    <span class="text-h4">Uploading An Experiment</span>
+                </div>
+            </div>
+            <div class="row"></div>
             <q-stepper
                 v-model="uploadStore.step"
                 ref="stepper"
                 color="primary"
                 animated
+                flat
+                bordered
                 keep-alive
-                header-nav
                 :dark="globalSettings.darkMode"
             >
                 <q-step
@@ -130,9 +138,33 @@ function handlePreviousStep(): void {
                     <StepColumnNameMapping />
                 </q-step>
 
-                <q-step title="Review" name="finalReview" icon="settings">
+                <q-step
+                    title="Review"
+                    name="finalReview"
+                    icon="settings"
+                    :done="uploadStore.step == 'uploading'"
+                    done-color="green"
+                >
                     <StepReview />
                 </q-step>
+                <q-step
+                    title="Uploading"
+                    name="uploading"
+                    icon="upload"
+                    :active-icon="
+                        uploadStore.overallProgress.status == 'succeeded'
+                            ? 'mdi-check'
+                            : 'upload'
+                    "
+                    :active-color="
+                        uploadStore.overallProgress.status == 'succeeded'
+                            ? 'green'
+                            : '#1976d2'
+                    "
+                    :done="uploadStore.overallProgress.status == 'succeeded'"
+                >
+                    <StepUploadStatus />
+                </q-step>
 
                 <template v-slot:navigation>
                     <q-stepper-navigation
@@ -142,17 +174,19 @@ function handlePreviousStep(): void {
                             justify-content: flex-end;
                         "
                     >
-                        <q-btn
-                            v-if="uploadStore.step !== 'metadata'"
-                            flat
-                            color="primary"
-                            @click="handlePreviousStep"
+                        <l-btn
+                            v-if="
+                                uploadStore.step !== 'metadata' &&
+                                uploadStore.step !== 'uploading'
+                            "
                             label="Back"
-                            class="q-ml-sm"
+                            class="q-mr-sm"
+                            @click="handlePreviousStep"
+                            type="previous"
                         />
-                        <q-btn
+                        <l-btn
+                            v-if="uploadStore.step !== 'uploading'"
                             @click="handleNextStep"
-                            color="primary"
                             :label="
                                 uploadStore.step === 'finalReview'
                                     ? 'Begin Processing'
@@ -164,13 +198,24 @@ function handlePreviousStep(): void {
                                     : false
                             "
                         />
+                        <l-btn
+                            v-if="uploadStore.step == 'uploading'"
+                            @click="returnHome"
+                            label="Return To Home"
+                            class="q-mr-sm"
+                            :disabled="uploadStore.overallProgress.status !== 'succeeded'"
+                            type="previous"
+                        />
+                        <l-btn
+                            v-if="uploadStore.step == 'uploading'"
+                            @click="addNewExperiment"
+                            label="Create New Experiment"
+                            :disabled="uploadStore.overallProgress.status !== 'succeeded'"
+                        />
                     </q-stepper-navigation>
                 </template>
             </q-stepper>
         </template>
-        <template v-else>
-            <StepUploadStatus />
-        </template>
     </q-page>
 </template>
 
diff --git a/apps/client/src/stores/aggregateLineChartStore.ts b/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
similarity index 98%
rename from apps/client/src/stores/aggregateLineChartStore.ts
rename to apps/client/src/stores/componentStores/aggregateLineChartStore.ts
index 2bbf17ca..5410446b 100644
--- a/apps/client/src/stores/aggregateLineChartStore.ts
+++ b/apps/client/src/stores/componentStores/aggregateLineChartStore.ts
@@ -1,12 +1,16 @@
 import { ref, computed, watch } from 'vue';
 import { defineStore } from 'pinia';
-import { useCellMetaData, type Cell, type Track } from '@/stores/cellMetaData';
-import { useSkipTrackingMap } from '@/stores/skipTrackingMap';
-import { useDataPointSelection } from '@/stores/dataPointSelection';
+import {
+    useCellMetaData,
+    type Cell,
+    type Track,
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useSkipTrackingMap } from '@/stores/misc/skipTrackingMapStore';
+import { useDataPointSelection } from '@/stores/interactionStores/dataPointSelectionTrrackedStore';
 import { useLooneageViewStore } from './looneageViewStore';
 
 import { min, max, mean, sum, median, quantile, deviation } from 'd3-array';
-import { useDataPointSelectionUntrracked } from './dataPointSelectionUntrracked';
+import { useDataPointSelectionUntrracked } from '../interactionStores/dataPointSelectionUntrrackedStore';
 
 export interface AggLine {
     data: AggLineData;
diff --git a/apps/client/src/stores/filterStore.ts b/apps/client/src/stores/componentStores/filterStore.ts
similarity index 100%
rename from apps/client/src/stores/filterStore.ts
rename to apps/client/src/stores/componentStores/filterStore.ts
diff --git a/apps/client/src/stores/globalSettings.ts b/apps/client/src/stores/componentStores/globalSettingsStore.ts
similarity index 100%
rename from apps/client/src/stores/globalSettings.ts
rename to apps/client/src/stores/componentStores/globalSettingsStore.ts
diff --git a/apps/client/src/stores/imageViewerStore.ts b/apps/client/src/stores/componentStores/imageViewerTrrackedStore.ts
similarity index 96%
rename from apps/client/src/stores/imageViewerStore.ts
rename to apps/client/src/stores/componentStores/imageViewerTrrackedStore.ts
index 4726353e..b102c54d 100644
--- a/apps/client/src/stores/imageViewerStore.ts
+++ b/apps/client/src/stores/componentStores/imageViewerTrrackedStore.ts
@@ -1,6 +1,6 @@
 import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
-import { useDataPointSelection } from './dataPointSelection';
+import { useDataPointSelection } from '../interactionStores/dataPointSelectionTrrackedStore';
 
 export interface SelectionIndex {
     c: number;
diff --git a/apps/client/src/stores/imageViewerStoreUntrracked.ts b/apps/client/src/stores/componentStores/imageViewerUntrrackedStore.ts
similarity index 100%
rename from apps/client/src/stores/imageViewerStoreUntrracked.ts
rename to apps/client/src/stores/componentStores/imageViewerUntrrackedStore.ts
diff --git a/apps/client/src/stores/looneageViewStore.ts b/apps/client/src/stores/componentStores/looneageViewStore.ts
similarity index 97%
rename from apps/client/src/stores/looneageViewStore.ts
rename to apps/client/src/stores/componentStores/looneageViewStore.ts
index 44c1443a..25c1a535 100644
--- a/apps/client/src/stores/looneageViewStore.ts
+++ b/apps/client/src/stores/componentStores/looneageViewStore.ts
@@ -1,7 +1,10 @@
 import { ref, watch, computed } from 'vue';
 import { defineStore } from 'pinia';
-import { useCellMetaData, type Cell } from '@/stores/cellMetaData';
-import { useSkipTrackingMap } from '@/stores/skipTrackingMap';
+import {
+    useCellMetaData,
+    type Cell,
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useSkipTrackingMap } from '@/stores/misc/skipTrackingMapStore';
 import { schemeReds, schemeBlues } from 'd3-scale-chromatic';
 import { min as d3Min, max as d3Max } from 'd3-array';
 
diff --git a/apps/client/src/stores/uploadStore.ts b/apps/client/src/stores/componentStores/uploadStore.ts
similarity index 75%
rename from apps/client/src/stores/uploadStore.ts
rename to apps/client/src/stores/componentStores/uploadStore.ts
index a62aabd2..9f522d4f 100644
--- a/apps/client/src/stores/uploadStore.ts
+++ b/apps/client/src/stores/componentStores/uploadStore.ts
@@ -8,7 +8,8 @@ import {
     type VerifyExperimentNameResponseData,
 } from '@/util/axios';
 
-import type { ProgressRecord } from '@/components/upload/LoadingProgress.vue';
+import { useConfigStore } from '../misc/configStore';
+import { useNotificationStore } from '../misc/notificationStore';
 
 export type progress =
     | 'failed'
@@ -29,7 +30,9 @@ export interface FileToUpload {
     checkForUpdates?: boolean;
     uploading: progress;
     processing: progress;
+    uniqueId?: string;
     processedData?: Record<string, any>;
+    metadata?: Record<string, any>;
 }
 
 export interface LocationConfig {
@@ -40,8 +43,8 @@ export interface LocationConfig {
 }
 
 export interface OverallProgress {
-    status: -1 | 0 | 1 | 2; // Failed, not started, running, succeeded
-    message?: string;
+    status: 'failed' | 'not_started' | 'running' | 'succeeded'; // Failed, not started, running, succeeded
+    message: string;
 }
 
 export interface WorkflowConfiguration {
@@ -58,8 +61,11 @@ const initialState = () => ({
     }),
     experimentName: ref<string>(''),
     overallProgress: ref<OverallProgress>({
-        status: 1,
+        status: 'not_started',
+        message: 'Waiting to upload and process data.'
     }),
+    tags: ref<[string, string][][]>([[['', '']]]),
+    tagColors: ref<Record<string, string>>({}),
     experimentCreated: ref(false),
     columnMappings: ref<Record<string, string> | null>(null),
     columnNames: ref<string[]>([]),
@@ -72,18 +78,21 @@ const initialState = () => ({
                 checkForUpdates: true,
                 uploading: 'not_started',
                 processing: 'not_started',
+                uniqueId: 'location_1_table',
             },
             images: {
                 file: null,
                 checkForUpdates: true,
                 uploading: 'not_started',
                 processing: 'not_started',
+                uniqueId: 'location_1_images',
             },
             segmentations: {
                 file: null,
                 checkForUpdates: true,
                 uploading: 'not_started',
                 processing: 'not_started',
+                uniqueId: 'location_1_segmentations',
             },
         },
     ]),
@@ -92,8 +101,10 @@ const initialState = () => ({
 
 export const useUploadStore = defineStore('uploadStore', () => {
     // const currBaseUrl = window.location.origin;
+    const configStore = useConfigStore();
+    const { notify } = useNotificationStore();
     const loonAxios = createLoonAxiosInstance({
-        baseURL: `${window.location.origin}/api`,
+        baseURL: configStore.apiUrl,
     });
 
     const {
@@ -106,6 +117,8 @@ export const useUploadStore = defineStore('uploadStore', () => {
         columnNames,
         step,
         experimentNameValid,
+        tags,
+        tagColors,
     } = initialState();
 
     function resetState(): void {
@@ -120,6 +133,8 @@ export const useUploadStore = defineStore('uploadStore', () => {
         columnNames.value = newState.columnNames.value;
         step.value = newState.step.value;
         experimentNameValid.value = newState.experimentNameValid.value;
+        tags.value = newState.tags.value;
+        tagColors.value = newState.tagColors.value;
     }
 
     async function verifyExperimentName(): Promise<boolean> {
@@ -202,33 +217,47 @@ export const useUploadStore = defineStore('uploadStore', () => {
     });
 
     function addLocation() {
+        const currId = locationFileList.value.length + 1;
         locationFileList.value.push({
-            locationId: (locationFileList.value.length + 1).toString(),
+            locationId: `${currId}`,
             table: {
                 file: null,
                 checkForUpdates: true,
                 uploading: 'not_started',
                 processing: 'not_started',
+                uniqueId: `location_${currId}_table`,
             },
             images: {
                 file: null,
                 checkForUpdates: true,
                 uploading: 'not_started',
                 processing: 'not_started',
+                uniqueId: `location_${currId}_images`,
             },
             segmentations: {
                 file: null,
                 checkForUpdates: true,
                 uploading: 'not_started',
                 processing: 'not_started',
+                uniqueId: `location_${currId}_segmentations`,
             },
         });
+        // Add initial tags
+        tags.value.push([['', '']]);
     }
 
     function removeLocation(index: number) {
         locationFileList.value.splice(index, 1);
     }
 
+    function addTag(locationIndex: number) {
+        tags.value[locationIndex].push(['', '']);
+    }
+
+    function removeTag(locationIndex: number, tagIndex: number) {
+        tags.value[locationIndex].splice(tagIndex, 1);
+    }
+
     function allFilesPopulated(): boolean {
         for (const locationFiles of locationFileList.value) {
             if (
@@ -242,7 +271,7 @@ export const useUploadStore = defineStore('uploadStore', () => {
         return true;
     }
 
-    function locationIdsUnique(): boolean {
+    const locationIdsUnique = computed((): boolean => {
         const locationIds = new Set<string>();
         for (const locationFiles of locationFileList.value) {
             if (locationIds.has(locationFiles.locationId)) {
@@ -251,7 +280,17 @@ export const useUploadStore = defineStore('uploadStore', () => {
             locationIds.add(locationFiles.locationId);
         }
         return true;
-    }
+    });
+
+    watch(locationIdsUnique, () => {
+        if (!locationIdsUnique.value) {
+            notify({
+                type: 'problem',
+                message: 'Location ids must be unique.',
+            });
+        }
+    });
+
 
     // Function to upload all necessary files in experiment.
     async function uploadAll() {
@@ -326,6 +365,12 @@ export const useUploadStore = defineStore('uploadStore', () => {
                 // Make a request to your server to check for updates
                 const response = await loonAxios.checkForUpdates(task_id);
                 const responseData = response.data as StatusResponseData;
+
+                // Set metadata
+                if (responseData.data) {
+                    uploadingFile.metadata = responseData.data.metadata;
+                }
+
                 if (responseData.status === 'SUCCEEDED') {
                     updatesAvailable = true;
                     if (responseData.data) {
@@ -342,10 +387,10 @@ export const useUploadStore = defineStore('uploadStore', () => {
                 } else if (responseData.status === 'RUNNING') {
                     // show running symbol like it normally does
                     uploadingFile.processing = 'running';
-                    await new Promise((resolve) => setTimeout(resolve, 5000));
+                    await new Promise((resolve) => setTimeout(resolve, 2500));
                 } else {
                     // show queued symbol
-                    await new Promise((resolve) => setTimeout(resolve, 5000));
+                    await new Promise((resolve) => setTimeout(resolve, 2500));
                 }
             }
         } catch (error) {
@@ -358,137 +403,59 @@ export const useUploadStore = defineStore('uploadStore', () => {
     // --------------------------------------------------------
     // --------------------------------------------------------
 
-    const createExperimentProgress = ref<ProgressRecord>({
-        label: 'Create Experiment',
-        progress: 'not_started',
-    });
+    const createExperimentProgress = ref<progress>('not_started')
 
-    // Function to construct the Progress Status List
-    function initializeProgressStatusList(): ProgressRecord[] {
-        const keyList = ['Table', 'Images', 'Segmentations'];
-        let currentProgressStatusList: ProgressRecord[] = keyList.map((key) => {
-            return {
-                label: 'Uploading and Processing ' + key,
-                progress: 'not_started',
-                subProgress: [],
-            };
+    const progressList = computed<FileToUpload[]>((): FileToUpload[] => {
+        const tempProgressList: FileToUpload[] = [];
+        locationFileList.value.forEach((locationFile: LocationFiles) => {
+            tempProgressList.push(locationFile.table);
+            tempProgressList.push(locationFile.images);
+            tempProgressList.push(locationFile.segmentations);
         });
-        const tableListIndex = 0;
-        const imageListIndex = 1;
-        const segmentationListIndex = 2;
-        for (let i = 0; i < numberOfLocations.value; i++) {
-            const locationFiles = locationFileList.value[i];
-            addToSubProgressList(
-                currentProgressStatusList[tableListIndex].subProgress!,
-                locationFiles.table,
-                locationFiles.locationId
-            );
-            addToSubProgressList(
-                currentProgressStatusList[imageListIndex].subProgress!,
-                locationFiles.images,
-                locationFiles.locationId
-            );
-            addToSubProgressList(
-                currentProgressStatusList[segmentationListIndex].subProgress!,
-                locationFiles.segmentations,
-                locationFiles.locationId
-            );
-        }
+        return tempProgressList;
+    });
 
-        currentProgressStatusList.push(createExperimentProgress.value);
+    // Watches progress list for all successes or any failures. Sets overall status based on the findings.
 
-        return currentProgressStatusList;
-    }
+    // Starts as 'not_started', so if anyRunning, anyFailed, allSucceeded all are false, will indicate it is not running and will, by default, be displayed as such.
 
-    // Computes the Progress Status list whenever individual FileToUpload objects change in their uploading/processing status
-    const rawProgressStatusList = computed<ProgressRecord[]>(() =>
-        initializeProgressStatusList()
-    );
+    watch(
+        [progressList, createExperimentProgress],
+        ([newList, newCreateExperimentProgress]) => {
 
-    //Once the raw progress status gets updated, we compute the overall statuses dependent on their subprogress.
-    const progressStatusList = computed((): ProgressRecord[] => {
-        const progressStatusResult: ProgressRecord[] = [];
-        for (let i = 0; i < rawProgressStatusList.value.length; i++) {
-            let currentProgress = rawProgressStatusList.value[i];
-            if (currentProgress.subProgress) {
-                // determine based on sub progress
-                const currentSubProgress = determineProgress(
-                    currentProgress.subProgress
-                );
-                currentProgress.progress = currentSubProgress;
-                progressStatusResult.push(currentProgress);
-            } else {
-                progressStatusResult.push(currentProgress);
-            }
-        }
-        return progressStatusResult;
-    });
+            const anyRunning = newList.some(
+                (item: FileToUpload) =>
+                    item.uploading === 'running' || item.processing === 'running'
 
-    const determineProgress = (subProgress: ProgressRecord[]) => {
-        const failed = subProgress.some(
-            (element) => element.progress === 'failed'
-        );
-        if (failed) {
-            // If any failed, set total to failed
-            return 'failed';
-        } else {
-            const running = subProgress.some(
-                (element) =>
-                    element.progress === 'running' ||
-                    element.progress === 'dispatched'
             );
-            if (running) {
-                // If none failed but any are running/queued, set to running
-                return 'running';
-            } else {
-                const succeeded = subProgress.every(
-                    (element) => element.progress === 'succeeded'
-                );
-                if (succeeded) {
-                    // If none running, none failed, and all have succeeded, set to 3
-                    return 'succeeded';
-                }
-            }
-        }
-        // If none running, none failed, and not all succeeded, then it's still starting. Return 0
-        return 'not_started';
-    };
-
-    function addToSubProgressList(
-        subProgressList: ProgressRecord[],
-        uploadingFile: FileToUpload,
-        locationId: string
-    ) {
-        subProgressList.push({
-            label: 'Uploading ' + locationId,
-            progress: uploadingFile.uploading,
-        });
-        if (uploadingFile.checkForUpdates) {
-            subProgressList.push({
-                label: 'Processing ' + locationId,
-                progress: uploadingFile.processing,
-            });
-        }
-    }
 
-    // Watches progress list for all successes or any failures. Sets overall status based on the findings.
-    watch(
-        progressStatusList,
-        (newList) => {
             const anyFailed = newList.some(
-                (item: ProgressRecord) => item.progress == 'failed'
+                (item: FileToUpload) =>
+                    item.uploading === 'failed' || item.processing === 'failed'
             );
-            if (anyFailed) {
-                overallProgress.value.status = -1;
-                overallProgress.value.message =
-                    'There was an error submitting this experiment.';
-            }
+
             const allSucceeded = newList.every(
-                (item: ProgressRecord) => item.progress === 'succeeded'
+                (item: FileToUpload) =>
+                    item.uploading === 'succeeded' &&
+                    item.processing === 'succeeded'
             );
-            if (allSucceeded) {
-                overallProgress.value.status = 2;
-                overallProgress.value.message = 'Succeeded.';
+
+            if (anyFailed) {
+                overallProgress.value.status = 'failed';
+                overallProgress.value.message =
+                    'There was an processing one or more datasets. This experiment will need to be re-submitted.';
+            } else if (allSucceeded) {
+                if (newCreateExperimentProgress === 'succeeded') {
+                    overallProgress.value.status = 'succeeded';
+                    overallProgress.value.message = 'All your data has been processed and your experiment has been successfully added. You can now navigate away from this page.';
+                } else if (newCreateExperimentProgress === 'failed') {
+                    overallProgress.value.status = 'failed';
+                    overallProgress.value.message = 'There was an error when creating the final experiment. Please contact an administrator or re-try the experiment.'
+                }
+            } else if (anyRunning) {
+                overallProgress.value.status = 'running';
+                overallProgress.value.message =
+                    'Your data is currently being processed. Please do not exit this page.';
             }
         },
         { deep: true }
@@ -502,14 +469,14 @@ export const useUploadStore = defineStore('uploadStore', () => {
     watch(experimentConfig, async (newVal) => {
         if (newVal !== null) {
             // This only triggers when everything is done since experimentConfig is only computed once all has finished.
-            if (experimentConfig && experimentHeaders) {
-                createExperimentProgress.value.progress = 'running';
+            if (experimentConfig.value && experimentHeaders.value) {
+                createExperimentProgress.value = 'running';
                 const submitExperimentResponse: CreateExperimentResponseData =
                     await onSubmitExperiment();
                 if (submitExperimentResponse.status === 'SUCCESS') {
-                    createExperimentProgress.value.progress = 'succeeded';
+                    createExperimentProgress.value = 'succeeded';
                 } else {
-                    createExperimentProgress.value.progress = 'failed';
+                    createExperimentProgress.value = 'failed';
                 }
             }
         }
@@ -517,11 +484,14 @@ export const useUploadStore = defineStore('uploadStore', () => {
 
     async function onSubmitExperiment(): Promise<CreateExperimentResponseData> {
         if (experimentName.value && experimentConfig.value) {
+            const locationTags = convertTags();
+            console.log(locationTags);
             const submitExperimentResponse = await loonAxios.createExperiment(
                 experimentName.value,
                 experimentConfig.value,
                 experimentHeaders.value,
-                columnMappings.value
+                columnMappings.value,
+                locationTags
             );
 
             const submitExperimentResponseData: CreateExperimentResponseData =
@@ -532,6 +502,15 @@ export const useUploadStore = defineStore('uploadStore', () => {
         return { status: 'failed', message: 'No experiment name given.' };
     }
 
+    function convertTags(): Record<string, Record<string, string>> {
+        const locationBasedTags: Record<string, Record<string, string>> = {};
+        tags.value.forEach((location: [string, string][], idx: number) => {
+            const currentTags = Object.fromEntries(location);
+            locationBasedTags[`location_${idx}`] = currentTags;
+        });
+        return locationBasedTags;
+    }
+
     function allColumnsMapped(): boolean {
         if (!columnMappings.value) {
             return false;
@@ -574,7 +553,7 @@ export const useUploadStore = defineStore('uploadStore', () => {
             text += decoder.decode(chunk, { stream: true });
             const lines = text.split('\n');
             if (lines.length > 1) {
-                let headerIndex = currentWorkflowConfig.value.skip_lines;
+                const headerIndex = currentWorkflowConfig.value.skip_lines;
                 firstLine = lines[headerIndex];
                 break;
             }
@@ -632,7 +611,6 @@ export const useUploadStore = defineStore('uploadStore', () => {
         addLocation,
         removeLocation,
         uploadAll,
-        progressStatusList,
         onSubmitExperiment,
         experimentConfig,
         experimentHeaders,
@@ -644,5 +622,10 @@ export const useUploadStore = defineStore('uploadStore', () => {
         resetState,
         step,
         experimentNameValid,
+        progressList,
+        tags,
+        tagColors,
+        addTag,
+        removeTag,
     };
 });
diff --git a/apps/client/src/stores/configStore.ts b/apps/client/src/stores/configStore.ts
deleted file mode 100644
index 1ad7c3c5..00000000
--- a/apps/client/src/stores/configStore.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useConfigStore = defineStore('configStore', () => {
-    let environment =
-        import.meta.env.VITE_ENVIRONMENT !== undefined
-            ? import.meta.env.VITE_ENVIRONMENT
-            : 'production';
-    let useHttp = import.meta.env.VITE_USE_HTTP?.toLowerCase() === 'true';
-    let envServerUrl = import.meta.env.VITE_SERVER_URL;
-
-    return {
-        environment,
-        useHttp,
-        envServerUrl,
-    };
-});
diff --git a/apps/client/src/stores/cellMetaData.ts b/apps/client/src/stores/dataStores/cellMetaDataStore.ts
similarity index 98%
rename from apps/client/src/stores/cellMetaData.ts
rename to apps/client/src/stores/dataStores/cellMetaDataStore.ts
index 6ffd1598..058c476b 100644
--- a/apps/client/src/stores/cellMetaData.ts
+++ b/apps/client/src/stores/dataStores/cellMetaDataStore.ts
@@ -1,8 +1,14 @@
 import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 import { isEqual, every, sortBy } from 'lodash-es';
-import { useDataPointSelection } from './dataPointSelection';
+import { useDataPointSelection } from '../interactionStores/dataPointSelectionTrrackedStore';
 import { extent as d3Extent } from 'd3-array';
+import type {
+    NumericalAttributes,
+    StringAttributes,
+    AnyAttributes,
+    TextTransforms,
+} from '@/util/datasetLoader';
 
 export interface Lineage {
     lineageId: string; // should be equal to the founder trackId
@@ -27,22 +33,6 @@ export interface Cell {
     attrStr: StringAttributes;
 }
 
-export interface NumericalAttributes {
-    [index: string]: number;
-}
-
-export interface StringAttributes {
-    [index: string]: string;
-}
-
-export interface AnyAttributes {
-    [index: string]: any;
-}
-
-export interface TextTransforms {
-    [index: string]: string;
-}
-
 export interface SpecialHeaders {
     time: string;
     trackId: string;
diff --git a/apps/client/src/stores/dataStores/datasetSelectionTrrackedStore.ts b/apps/client/src/stores/dataStores/datasetSelectionTrrackedStore.ts
new file mode 100644
index 00000000..73af0045
--- /dev/null
+++ b/apps/client/src/stores/dataStores/datasetSelectionTrrackedStore.ts
@@ -0,0 +1,19 @@
+import { ref, computed } from 'vue';
+import { defineStore } from 'pinia';
+
+export interface SelectedLocationIds {
+    [index: string]: boolean;
+}
+
+export const useDatasetSelectionTrrackedStore = defineStore(
+    'datasetSelectionTrrackedStore',
+    () => {
+        const currentExperimentFilename = ref<string | null>(null);
+        const selectedLocationIds = ref<SelectedLocationIds>({});
+
+        return {
+            currentExperimentFilename,
+            selectedLocationIds,
+        };
+    }
+);
diff --git a/apps/client/src/stores/datasetSelectionStore.ts b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
similarity index 52%
rename from apps/client/src/stores/datasetSelectionStore.ts
rename to apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
index 97ea495d..024c5530 100644
--- a/apps/client/src/stores/datasetSelectionStore.ts
+++ b/apps/client/src/stores/dataStores/datasetSelectionUntrrackedStore.ts
@@ -1,16 +1,20 @@
 import { ref, computed, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { asyncComputed } from '@vueuse/core';
-import { parse, type ParseResult } from 'papaparse';
 import * as vg from '@uwdata/vgplot';
 
 import { computedAsync } from '@vueuse/core';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useDatasetSelectionTrrackedStore } from '@/stores/dataStores/datasetSelectionTrrackedStore';
+import { useConfigStore } from '../misc/configStore';
+import type { TextTransforms } from '@/util/datasetLoader';
+
 import {
-    useCellMetaData,
-    type AnyAttributes,
-    type TextTransforms,
-} from '@/stores/cellMetaData';
-import { useDatasetSelectionTrrackedStore } from '@/stores/datasetSelectionTrrackedStore';
+    type CsvParserResults,
+    loadCsv,
+    loadFileIntoDuckDb,
+} from '@/util/datasetLoader';
+import { useNotificationStore } from '../misc/notificationStore';
 
 export interface ExperimentMetadata {
     // name?: string; // user friendly name
@@ -21,6 +25,7 @@ export interface ExperimentMetadata {
     // can precompute min/max for each column across experiments
     // conditions?: string[]; // TODO: - does this need to be 2d?
     locationMetadataList: LocationMetadata[];
+    compositeTabularDataFilename?: string;
 }
 
 export interface LocationMetadata {
@@ -44,16 +49,24 @@ export const useDatasetSelectionStore = defineStore(
         const errorMessage = ref('default error message');
 
         const cellMetaData = useCellMetaData();
+
         const datasetSelectionTrrackedStore =
             useDatasetSelectionTrrackedStore();
+        const configStore = useConfigStore();
+        const { notify } = useNotificationStore();
         const fetchingTabularData = ref(false);
         const refreshTime = ref<string>(new Date().getTime().toString());
+        const experimentDataLoaded = ref(false);
+        const experimentDataInitialized = computed(() => {
+            return experimentDataLoaded.value;
+        });
         let controller: AbortController;
 
+        // Generate Experiment List
         const experimentFilenameList = asyncComputed<string[]>(async () => {
-            if (datasetSelectionTrrackedStore.serverUrl == null) return null;
-            const fullURL = getFileUrl(
-                datasetSelectionTrrackedStore.entryPointFilename
+            if (configStore.serverUrl == null) return null;
+            const fullURL = configStore.getFileUrl(
+                configStore.entryPointFilename
             );
             if (controller) {
                 controller.abort('stale request'); // cancel last fetch if it's still trying
@@ -79,16 +92,22 @@ export const useDatasetSelectionStore = defineStore(
             }
             fetchingEntryFile.value = false;
             serverUrlValid.value = true;
+
+            const connector = vg.socketConnector(
+                configStore.duckDbWebSocketUrl
+            );
+
+            // If you need to use web instance of duckdb instead, you can use this connector rather than the one above.
+            // const connector = vg.wasmConnector();
+
+            // Initialize Duckdb Socket Connection
+            vg.coordinator().databaseConnector(connector);
+
             const data = await response.json();
             return data.experiments;
         }, [refreshTime.value]);
 
-        function handleFetchEntryError(message: string): void {
-            errorMessage.value = message;
-            serverUrlValid.value = false;
-            fetchingEntryFile.value = false;
-        }
-
+        // Sets location Metadata
         const currentExperimentMetadata =
             computedAsync<ExperimentMetadata | null>(async () => {
                 if (
@@ -96,14 +115,56 @@ export const useDatasetSelectionStore = defineStore(
                     null
                 )
                     return null;
-                const fullURL = getFileUrl(
+                const fullURL = configStore.getFileUrl(
                     datasetSelectionTrrackedStore.currentExperimentFilename
                 );
                 const response = await fetch(fullURL, {});
                 const data = await response.json();
+                console.log(data);
                 return data;
             });
 
+        // Initialize experiment cell metadata store and create duckdb table.
+        watch(currentExperimentMetadata, async () => {
+            if (currentExperimentMetadata.value?.compositeTabularDataFilename) {
+                fetchingTabularData.value = true;
+
+                let duckDbFileUrl = configStore.getDuckDbFileUrl(
+                    currentExperimentMetadata.value
+                        ?.compositeTabularDataFilename
+                );
+                try {
+                    console.log('here')
+                    await loadFileIntoDuckDb(
+                        duckDbFileUrl,
+                        'composite_experiment_cell_metadata',
+                        'parquet'
+                    );
+                    notify({
+                        type: 'success',
+                        message: `Created DuckDb Table for ${duckDbFileUrl}.`,
+                    });
+                } catch (error) {
+                    const typedError = error as Error;
+                    notify({
+                        type: 'problem',
+                        message: typedError.message,
+                    });
+                    experimentDataLoaded.value = false;
+                }
+                experimentDataLoaded.value = true;
+                fetchingTabularData.value = false;
+            } else {
+                if (currentExperimentMetadata.value !== null) {
+                    notify({
+                        type: 'warning',
+                        message:
+                            'No composite dataset specified in Experiment file.',
+                    });
+                }
+            }
+        });
+
         function selectImagingLocation(location: LocationMetadata): void {
             datasetSelectionTrrackedStore.$patch(() => {
                 for (const key in datasetSelectionTrrackedStore.selectedLocationIds) {
@@ -123,7 +184,7 @@ export const useDatasetSelectionStore = defineStore(
                     .locationMetadataList) {
                     if (
                         datasetSelectionTrrackedStore.selectedLocationIds[
-                            location.id
+                        location.id
                         ]
                     ) {
                         return location;
@@ -133,81 +194,69 @@ export const useDatasetSelectionStore = defineStore(
             }
         );
 
-        watch(
-            currentLocationMetadata,
-            () => {
-                if (!currentLocationMetadata.value?.tabularDataFilename) {
-                    cellMetaData.dataInitialized = false;
-                    return;
-                }
-                const url = getFileUrl(
-                    currentLocationMetadata.value?.tabularDataFilename
-                );
+        watch(currentLocationMetadata, async () => {
+            if (!currentLocationMetadata.value?.tabularDataFilename) {
+                cellMetaData.dataInitialized = false;
+                return;
+            }
+            const tabularDataFileUrl = configStore.getFileUrl(
+                currentLocationMetadata.value?.tabularDataFilename
+            );
 
-                const duckDbFileUrl = getDuckDbFileUrl(
-                    currentLocationMetadata.value?.tabularDataFilename
-                );
+            fetchingTabularData.value = true;
+            await loadCurrentLocationCsvFile(tabularDataFileUrl);
 
-                fetchingTabularData.value = true;
-                parse(url, {
-                    header: true,
-                    dynamicTyping: true,
-                    skipEmptyLines: true,
-                    download: true,
-                    worker: true,
-                    comments: '#',
-                    complete: async (results: ParseResult<AnyAttributes>) => {
-                        // If you need to use web based duckDb instance, you can use this.
-                        // vg.coordinator().databaseConnector(vg.wasmConnector());
-
-                        vg.coordinator().databaseConnector(
-                            vg.socketConnector(
-                                datasetSelectionTrrackedStore.duckDbWebsocketUrl
-                            )
-                        );
-                        await vg
-                            .coordinator()
-                            .exec([
-                                vg.loadCSV(
-                                    'current_cell_metadata',
-                                    duckDbFileUrl
-                                ),
-                            ]);
-                        cellMetaData.init(
-                            results.data,
-                            results.meta.fields as string[],
-                            currentExperimentMetadata.value?.headerTransforms
-                        );
-                        fetchingTabularData.value = false;
-                    },
+            const duckDbFileUrl = configStore.getDuckDbFileUrl(
+                currentLocationMetadata.value?.tabularDataFilename
+            );
+
+            try {
+                await loadFileIntoDuckDb(
+                    duckDbFileUrl,
+                    'current_cell_metadata',
+                    'csv'
+                );
+                notify({
+                    type: 'success',
+                    message: `Created DuckDb Table for ${duckDbFileUrl}.`,
+                });
+            } catch (error) {
+                const typedError = error as Error;
+                notify({
+                    type: 'problem',
+                    message: typedError.message,
                 });
             }
-            // { deep: true }
-        );
+        });
 
-        function getFileUrl(path: string): string {
-            // Trims any leading slashes from path
-            let trimmedPath = path.replace(/^\/+/, '');
-            return `${datasetSelectionTrrackedStore.serverUrl}/${trimmedPath}`;
+        function refreshFileNameList() {
+            refreshTime.value = new Date().getTime().toString();
         }
 
-        function getDuckDbFileUrl(path: string): string {
-            // Trims any leading slashes from path
-            let trimmedPath = path.replace(/^\/+/, '');
-            return `${datasetSelectionTrrackedStore.duckDbUrl}/${trimmedPath}`;
+        function initializeLocationCsvFile(results: CsvParserResults) {
+            cellMetaData.init(
+                results.data,
+                results.meta.fields as string[],
+                currentExperimentMetadata.value?.headerTransforms
+            );
+            fetchingTabularData.value = false;
         }
 
-        const segmentationFolderUrl = computed<string>(() => {
-            if (currentLocationMetadata.value?.segmentationsFolder == null) {
-                return '';
+        async function loadCurrentLocationCsvFile(tabularDataFileUrl: string) {
+            try {
+                await loadCsv(tabularDataFileUrl, initializeLocationCsvFile);
+            } catch (error) {
+                notify({
+                    type: 'problem',
+                    message: 'Failed to load location CSV file.',
+                });
             }
-            return getFileUrl(
-                currentLocationMetadata.value.segmentationsFolder
-            );
-        });
+        }
 
-        function refreshFileNameList() {
-            refreshTime.value = new Date().getTime().toString();
+        function handleFetchEntryError(message: string): void {
+            errorMessage.value = message;
+            serverUrlValid.value = false;
+            fetchingEntryFile.value = false;
         }
 
         return {
@@ -215,12 +264,11 @@ export const useDatasetSelectionStore = defineStore(
             errorMessage,
             fetchingEntryFile,
             experimentFilenameList,
+            experimentDataInitialized,
             currentExperimentMetadata,
             currentLocationMetadata,
             fetchingTabularData,
             selectImagingLocation,
-            getFileUrl,
-            segmentationFolderUrl,
             refreshFileNameList,
         };
     }
diff --git a/apps/client/src/stores/segmentationStore.ts b/apps/client/src/stores/dataStores/segmentationStore.ts
similarity index 76%
rename from apps/client/src/stores/segmentationStore.ts
rename to apps/client/src/stores/dataStores/segmentationStore.ts
index 7b77c5d6..7cb1abdd 100644
--- a/apps/client/src/stores/segmentationStore.ts
+++ b/apps/client/src/stores/dataStores/segmentationStore.ts
@@ -1,9 +1,14 @@
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
-import { useCellMetaData, type Cell, type Track } from '@/stores/cellMetaData';
-import { useDatasetSelectionStore } from '@/stores/datasetSelectionStore';
+import {
+    useCellMetaData,
+    type Cell,
+    type Track,
+} from '@/stores/dataStores/cellMetaDataStore';
+import { useDatasetSelectionStore } from '@/stores/dataStores/datasetSelectionUntrrackedStore';
 import type { Feature } from 'geojson';
 import { LRUCache } from 'lru-cache';
+import { useConfigStore } from '../misc/configStore';
 
 /**
  * Custom store for managing segmentations.
@@ -12,6 +17,7 @@ import { LRUCache } from 'lru-cache';
 export const useSegmentationStore = defineStore('segmentationStore', () => {
     const datasetSelectionStore = useDatasetSelectionStore();
     const cellMetaData = useCellMetaData();
+    const configStore = useConfigStore();
     const cache = ref(
         new LRUCache<string, Feature>({
             max: 25_000,
@@ -47,6 +53,19 @@ export const useSegmentationStore = defineStore('segmentationStore', () => {
     //     // Implementation goes here
     // }
 
+    const segmentationFolderUrl = computed<string>(() => {
+        if (
+            datasetSelectionStore.currentLocationMetadata
+                ?.segmentationsFolder == null
+        ) {
+            return '';
+        }
+        const url = configStore.getFileUrl(
+            datasetSelectionStore.currentLocationMetadata.segmentationsFolder
+        );
+        return url;
+    });
+
     /**
      * Get segmentations for a specific cell.
      * @param cell - The cell object.
@@ -58,7 +77,7 @@ export const useSegmentationStore = defineStore('segmentationStore', () => {
         const frame = cellMetaData.getFrame(cell);
         const id = cell.trackId;
         return await cache.value.fetch(
-            `${datasetSelectionStore.segmentationFolderUrl}/cells/${frame}-${id}.json`
+            `${segmentationFolderUrl.value}/cells/${frame}-${id}.json`
         );
     }
 
diff --git a/apps/client/src/stores/datasetSelectionTrrackedStore.ts b/apps/client/src/stores/datasetSelectionTrrackedStore.ts
deleted file mode 100644
index a9b906b8..00000000
--- a/apps/client/src/stores/datasetSelectionTrrackedStore.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ref, computed } from 'vue';
-import { defineStore } from 'pinia';
-import { useStorage } from '@vueuse/core';
-import { useConfigStore } from '@/stores/configStore';
-
-export interface SelectedLocationIds {
-    [index: string]: boolean;
-}
-
-export const useDatasetSelectionTrrackedStore = defineStore(
-    'datasetSelectionTrrackedStore',
-    () => {
-        const configStore = useConfigStore();
-
-        let httpValue = 'http://';
-        let wsValue = 'ws://';
-        if (!configStore.useHttp) {
-            httpValue = 'https://';
-            wsValue = 'wss://';
-        }
-
-        // Used to retrieve static files hosted by data store (local or MinIO)
-        const serverUrl = ref<string>(
-            `${httpValue}${configStore.envServerUrl}`
-        );
-        // Location of websocket for DuckDb as specified in NGINX
-        const duckDbWebsocketUrl = ref<string>(
-            `${wsValue}${configStore.envServerUrl.replace('/data', '/ws/')}`
-        );
-
-        // Environment based location of data retrieval for DuckDb
-        let duckDbDataLocation =
-            configStore.environment === 'local' ? 'data:9000' : 'minio:9000';
-        const duckDbUrl = ref<string>(`${httpValue}${duckDbDataLocation}`);
-        const entryPointFilename = '/aa_index.json';
-        const currentExperimentFilename = ref<string | null>(null);
-        const selectedLocationIds = ref<SelectedLocationIds>({});
-        const selectedLocationId = computed<string | null>(() => {
-            for (const id in selectedLocationIds.value) {
-                if (selectedLocationIds.value[id]) {
-                    return id;
-                }
-            }
-            return null;
-        });
-
-        return {
-            serverUrl,
-            entryPointFilename,
-            currentExperimentFilename,
-            selectedLocationIds,
-            selectedLocationId,
-            duckDbWebsocketUrl,
-            duckDbUrl,
-        };
-    }
-);
diff --git a/apps/client/src/stores/dataPointSelection.ts b/apps/client/src/stores/interactionStores/dataPointSelectionTrrackedStore.ts
similarity index 89%
rename from apps/client/src/stores/dataPointSelection.ts
rename to apps/client/src/stores/interactionStores/dataPointSelectionTrrackedStore.ts
index 0039c51b..7437c978 100644
--- a/apps/client/src/stores/dataPointSelection.ts
+++ b/apps/client/src/stores/interactionStores/dataPointSelectionTrrackedStore.ts
@@ -1,7 +1,7 @@
 import { computed, ref, type ComputedRef, watch } from 'vue';
 import { defineStore, storeToRefs } from 'pinia';
-import { useCellMetaData } from '@/stores/cellMetaData';
-import { useDatasetSelectionTrrackedStore } from './datasetSelectionTrrackedStore';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
+import { useDatasetSelectionTrrackedStore } from '../dataStores/datasetSelectionTrrackedStore';
 
 export const useDataPointSelection = defineStore('dataPointSelection', () => {
     const cellMetaData = useCellMetaData();
diff --git a/apps/client/src/stores/dataPointSelectionUntrracked.ts b/apps/client/src/stores/interactionStores/dataPointSelectionUntrrackedStore.ts
similarity index 96%
rename from apps/client/src/stores/dataPointSelectionUntrracked.ts
rename to apps/client/src/stores/interactionStores/dataPointSelectionUntrrackedStore.ts
index 4a017c88..de90bb67 100644
--- a/apps/client/src/stores/dataPointSelectionUntrracked.ts
+++ b/apps/client/src/stores/interactionStores/dataPointSelectionUntrrackedStore.ts
@@ -1,6 +1,6 @@
 import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
-import { useCellMetaData } from '@/stores/cellMetaData';
+import { useCellMetaData } from '@/stores/dataStores/cellMetaDataStore';
 import { v4 as uuidv4 } from 'uuid';
 
 export const useDataPointSelectionUntrracked = defineStore(
diff --git a/apps/client/src/stores/gridstackLayoutStore.ts b/apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
similarity index 100%
rename from apps/client/src/stores/gridstackLayoutStore.ts
rename to apps/client/src/stores/interactionStores/gridstackLayoutStore.ts
diff --git a/apps/client/src/stores/selectionStore.ts b/apps/client/src/stores/interactionStores/selectionStore.ts
similarity index 99%
rename from apps/client/src/stores/selectionStore.ts
rename to apps/client/src/stores/interactionStores/selectionStore.ts
index c1068994..4560543e 100644
--- a/apps/client/src/stores/selectionStore.ts
+++ b/apps/client/src/stores/interactionStores/selectionStore.ts
@@ -124,7 +124,7 @@ export const useSelectionStore = defineStore('Selection', {
                     SELECT
                         MIN("${escapedPlotName}") AS min_value,
                         MAX("${escapedPlotName}") AS max_value
-                    FROM current_cell_metadata
+                    FROM composite_experiment_cell_metadata
                 `;
 
                 console.log('Constructed query:', query);
diff --git a/apps/client/src/stores/misc/configStore.ts b/apps/client/src/stores/misc/configStore.ts
new file mode 100644
index 00000000..5b3f4f2a
--- /dev/null
+++ b/apps/client/src/stores/misc/configStore.ts
@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia';
+
+export const useConfigStore = defineStore('configStore', () => {
+    const environment =
+        import.meta.env.VITE_ENVIRONMENT !== undefined
+            ? import.meta.env.VITE_ENVIRONMENT
+            : 'production';
+    const useHttp = import.meta.env.VITE_USE_HTTP?.toLowerCase() === 'true';
+    const envServerUrl = import.meta.env.VITE_SERVER_URL;
+
+    let httpValue = 'http://';
+    let wsValue = 'ws://';
+    if (!useHttp) {
+        httpValue = 'https://';
+        wsValue = 'wss://';
+    }
+
+    // Used to retrieve static files hosted by data store (local or MinIO)
+    const serverUrl = `${httpValue}${envServerUrl}`;
+    // Location of websocket for DuckDb as specified in NGINX
+    const duckDbWebSocketUrl = `${wsValue}${envServerUrl.replace(
+        '/data',
+        '/ws/'
+    )}`;
+    const apiUrl = `${httpValue}${envServerUrl.replace('/data', '/api')}`;
+
+    // Environment based location of data retrieval for DuckDb
+
+    // let duckDbDataLocation =
+    //     environment === 'local' ? 'data:9000' : 'minio:9000/data';
+    const duckDbDataLocation = 'client/data';
+    const duckDbUrl = `${httpValue}${duckDbDataLocation}`;
+    const entryPointFilename = '/aa_index.json';
+
+    function getFileUrl(path: string): string {
+        // Trims any leading slashes from path
+        const trimmedPath = path.replace(/^\/+/, '');
+        return `${serverUrl}/${trimmedPath}`;
+    }
+
+    function getDuckDbFileUrl(path: string): string {
+        // Trims any leading slashes from path
+        const trimmedPath = path.replace(/^\/+/, '');
+        return `${duckDbUrl}/${trimmedPath}`;
+    }
+
+    return {
+        environment,
+        useHttp,
+        envServerUrl,
+        serverUrl,
+        duckDbWebSocketUrl,
+        apiUrl,
+        duckDbUrl,
+        entryPointFilename,
+        getFileUrl,
+        getDuckDbFileUrl,
+    };
+});
diff --git a/apps/client/src/stores/eventBusStore.ts b/apps/client/src/stores/misc/eventBusStore.ts
similarity index 100%
rename from apps/client/src/stores/eventBusStore.ts
rename to apps/client/src/stores/misc/eventBusStore.ts
diff --git a/apps/client/src/stores/misc/notificationStore.ts b/apps/client/src/stores/misc/notificationStore.ts
new file mode 100644
index 00000000..88abde3a
--- /dev/null
+++ b/apps/client/src/stores/misc/notificationStore.ts
@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia';
+import { type QNotifyCreateOptions, useQuasar } from 'quasar';
+
+type NotificationType = 'problem' | 'warning' | 'success' | 'info';
+
+interface Notification {
+    type: NotificationType;
+    message: string;
+}
+
+interface QNotification {
+    color: string;
+    icon: string;
+    position: QNotifyCreateOptions['position'];
+}
+
+export const useNotificationStore = defineStore('notificationStore', () => {
+    const $q = useQuasar();
+
+    const typeToQNotify: Record<NotificationType, QNotification> = {
+        problem: {
+            color: 'negative',
+            icon: 'mdi-alert-box',
+            position: 'top',
+        },
+        warning: {
+            color: 'warning',
+            icon: 'mdi-alert',
+            position: 'top',
+        },
+        success: {
+            color: 'positive',
+            icon: 'mdi-check-circle',
+            position: 'top',
+        },
+        info: {
+            color: 'info',
+            icon: 'mdi-information-outline',
+            position: 'top',
+        },
+    };
+
+    function notify({ message, type }: Notification) {
+        $q.notify({
+            ...typeToQNotify[type],
+            message,
+        });
+    }
+
+    return {
+        notify,
+    };
+});
diff --git a/apps/client/src/stores/provenanceStore.ts b/apps/client/src/stores/misc/provenanceStore.ts
similarity index 81%
rename from apps/client/src/stores/provenanceStore.ts
rename to apps/client/src/stores/misc/provenanceStore.ts
index 1ab0c70a..23579170 100644
--- a/apps/client/src/stores/provenanceStore.ts
+++ b/apps/client/src/stores/misc/provenanceStore.ts
@@ -1,14 +1,14 @@
-import { useDatasetSelectionTrrackedStore } from './datasetSelectionTrrackedStore';
-import { useGridstackLayoutStore } from './gridstackLayoutStore';
-import { useGlobalSettings } from './globalSettings';
-import { useAggregateLineChartStore } from './aggregateLineChartStore';
-import { useDatasetSelectionStore } from './datasetSelectionStore';
-import { useImageViewerStore } from './imageViewerStore';
-import { useLooneageViewStore } from './looneageViewStore';
-import { useDataPointSelection } from './dataPointSelection';
-import { useFilterStore } from './filterStore';
-import { useSelectionStore } from './selectionStore';
-import { useSkipTrackingMap } from '@/stores/skipTrackingMap';
+import { useDatasetSelectionTrrackedStore } from '../dataStores/datasetSelectionTrrackedStore';
+import { useGridstackLayoutStore } from '../interactionStores/gridstackLayoutStore';
+import { useGlobalSettings } from '../componentStores/globalSettingsStore';
+import { useAggregateLineChartStore } from '../componentStores/aggregateLineChartStore';
+import { useDatasetSelectionStore } from '../dataStores/datasetSelectionUntrrackedStore';
+import { useImageViewerStore } from '../componentStores/imageViewerTrrackedStore';
+import { useLooneageViewStore } from '../componentStores/looneageViewStore';
+import { useDataPointSelection } from '../interactionStores/dataPointSelectionTrrackedStore';
+import { useFilterStore } from '../componentStores/filterStore';
+import { useSelectionStore } from '../interactionStores/selectionStore';
+import { useSkipTrackingMap } from '@/stores/misc/skipTrackingMapStore';
 import { defineStore } from 'pinia';
 import { initializeTrrack, Registry, type Trigger } from '@trrack/core';
 import { cloneDeep, isEqual, debounce } from 'lodash-es';
diff --git a/apps/client/src/stores/skipTrackingMap.ts b/apps/client/src/stores/misc/skipTrackingMapStore.ts
similarity index 100%
rename from apps/client/src/stores/skipTrackingMap.ts
rename to apps/client/src/stores/misc/skipTrackingMapStore.ts
diff --git a/apps/client/src/stores/readme.md b/apps/client/src/stores/readme.md
new file mode 100644
index 00000000..a3650ad2
--- /dev/null
+++ b/apps/client/src/stores/readme.md
@@ -0,0 +1,21 @@
+Store Location and Naming Conventions:
+
+We separate our datastores based on the source that is affected when actions are taken.
+
+For example, a store may expose actions that are called in several components. But if the actions take produce side effects in only one component, that would be considered a "component store". Similarly, actions taken which alter data initialized, it would be included in the data store.
+
+Component Stores
+
+- If your store is used mostly for interaction with a specific component
+
+Data Stores
+
+- Used for initializing and choosing datasets/locations
+
+User interaction
+
+- Stores which handle general user interactions, such as viewing images, selecting or deselections in the UI, etc
+
+Misc
+
+- All stores which are rarely accessed and do not fall into these other categories.
\ No newline at end of file
diff --git a/apps/client/src/stores/readme.txt b/apps/client/src/stores/readme.txt
deleted file mode 100644
index b6775bd8..00000000
--- a/apps/client/src/stores/readme.txt
+++ /dev/null
@@ -1,16 +0,0 @@
-State planning
-
-* list of all points
-* rowID
-* list of tracks
-* * track level attributes
-* * track ID
-* list of lineages
-* * * lineage level attributes
-* * * lineage ID (= to founder track id)
-
-key mapping?
-* time key
-* location, frame, segment, locator?
-
-images?
\ No newline at end of file
diff --git a/apps/client/src/util/axios.ts b/apps/client/src/util/axios.ts
index 00bbe2df..3dc02244 100644
--- a/apps/client/src/util/axios.ts
+++ b/apps/client/src/util/axios.ts
@@ -1,14 +1,11 @@
-import S3FileFieldClient, {
-    type S3FileFieldProgress,
-    S3FileFieldProgressState,
-} from 'django-s3-file-field';
+import S3FileFieldClient from 'django-s3-file-field';
 import axios, {
     type AxiosInstance,
     type AxiosPromise,
     type AxiosRequestConfig,
     type AxiosResponse,
 } from 'axios';
-import type { LocationConfig } from '../stores/uploadStore';
+import type { LocationConfig } from '../stores/componentStores/uploadStore';
 
 interface LoonAxiosInstance extends AxiosInstance {
     upload(file: File): Promise<string>;
@@ -25,7 +22,8 @@ interface LoonAxiosInstance extends AxiosInstance {
         experiment_name: string,
         experiment_settings: LocationConfig[],
         experiment_headers: string[] | null,
-        experiment_transforms: Record<string, string> | null
+        experiment_transforms: Record<string, string> | null,
+        location_tags: Record<string, Record<string, string>>
     ): AxiosPromise<CreateExperimentResponseData>;
     verifyExperimentName(
         experiment_name: string
@@ -102,7 +100,8 @@ export function createLoonAxiosInstance(
         experiment_name: string,
         experiment_settings: LocationConfig[],
         experiment_headers: string[],
-        experiment_header_transforms: Record<string, string>
+        experiment_header_transforms: Record<string, string>,
+        location_tags: Record<string, Record<string, string>>
     ): AxiosPromise<CreateExperimentResponseData> {
         const formData = new FormData();
         formData.append('experimentName', experiment_name);
@@ -118,6 +117,7 @@ export function createLoonAxiosInstance(
             'experimentHeaderTransforms',
             JSON.stringify(experiment_header_transforms)
         );
+        formData.append('locationTags', JSON.stringify(location_tags));
 
         return this.post(
             `${this.defaults.baseURL}/createExperiment/`,
diff --git a/apps/client/src/util/datasetLoader.ts b/apps/client/src/util/datasetLoader.ts
new file mode 100644
index 00000000..1c024941
--- /dev/null
+++ b/apps/client/src/util/datasetLoader.ts
@@ -0,0 +1,82 @@
+import { parse, type ParseResult } from 'papaparse';
+import * as vg from '@uwdata/vgplot';
+
+export type CsvParserResults = ParseResult<AnyAttributes>;
+
+type ParseCsvCompleteCallback = (results: CsvParserResults) => void;
+
+type FileType = 'csv' | 'parquet';
+
+export interface NumericalAttributes {
+    [index: string]: number;
+}
+
+export interface StringAttributes {
+    [index: string]: string;
+}
+
+export interface AnyAttributes {
+    [index: string]: any;
+}
+
+export interface TextTransforms {
+    [index: string]: string;
+}
+
+// Parses CSV file. Accepts callback for additional processing.
+export function loadCsv(
+    csvUrl: string,
+    completeCallback: ParseCsvCompleteCallback
+): Promise<void> {
+    return new Promise((resolve, reject) => {
+        parse(csvUrl, {
+            header: true,
+            dynamicTyping: true,
+            skipEmptyLines: true,
+            download: true,
+            worker: true,
+            comments: '#',
+            complete: async (results: ParseResult<AnyAttributes>) => {
+                try {
+                    completeCallback(results);
+                    resolve();
+                } catch (error) {
+                    reject(error);
+                }
+            },
+        });
+    });
+}
+
+// Gets correct URl and loads file into DuckDb with specified table name.
+export async function loadFileIntoDuckDb(
+    url: string,
+    tableName: string,
+    type: FileType
+): Promise<void> {
+    // const url = configStore.getDuckDbFileUrl(fileName);
+    if (type === 'csv') {
+        try {
+            await vg.coordinator().exec([vg.loadCSV(tableName, url)]);
+            console.log(`Got DuckDb file: ${url}`);
+        } catch (error) {
+            const message = `Unexpected error when loading ${url} into DuckDb with file type ${type}`;
+            console.error(message);
+            throw new Error(message);
+        }
+    } else if (type === 'parquet') {
+        console.log('im here')
+        try {
+            await vg.coordinator().exec([vg.loadParquet(tableName, url)]);
+            console.log(`Got DuckDb file: ${url}`);
+        } catch (error) {
+            const message = `Unexpected error when loading ${url} into DuckDb with file type ${type}`;
+            console.error(message);
+            throw new Error(message);
+        }
+    } else {
+        const message = `Invalid File Type passed into function.`;
+        console.error(message);
+        throw new Error(message);
+    }
+}
diff --git a/apps/client/tsconfig.json b/apps/client/tsconfig.json
index 2247931f..0fa7790e 100644
--- a/apps/client/tsconfig.json
+++ b/apps/client/tsconfig.json
@@ -6,9 +6,12 @@
         "paths": {
             "@/*": ["./src/*"]
         },
-        "types": ["vite/client"]
+        "types": ["vite/client"],
+        "lib":[
+            "dom",
+            "ES2021.String"
+        ]
     },
-
     "references": [
         {
             "path": "./tsconfig.config.json"
diff --git a/apps/client/yarn.lock b/apps/client/yarn.lock
index e91a340c..0cd08b31 100644
--- a/apps/client/yarn.lock
+++ b/apps/client/yarn.lock
@@ -1515,7 +1515,7 @@
 
 "@uwdata/vgplot@^0.9.0":
   version "0.9.0"
-  resolved "https://registry.npmjs.org/@uwdata/vgplot/-/vgplot-0.9.0.tgz"
+  resolved "https://registry.yarnpkg.com/@uwdata/vgplot/-/vgplot-0.9.0.tgz#e78a97f533312c525c8cac1c71024ebc16516c9e"
   integrity sha512-NQbqPXYCqsE8gILISx77GZx4QW7A9pWu/OtZhiKq2M9t5UNYyWW4B7zRl2l4L20+Xcb8WhKmAL7aFilS2y5h3w==
   dependencies:
     "@uwdata/mosaic-core" "^0.9.0"
diff --git a/apps/docs-website/docs/loon-for-developers/building-loon.md b/apps/docs-website/docs/loon-for-developers/building-loon.md
index 6fe949dc..53e857b8 100644
--- a/apps/docs-website/docs/loon-for-developers/building-loon.md
+++ b/apps/docs-website/docs/loon-for-developers/building-loon.md
@@ -86,7 +86,6 @@ The build script will do its best to validate each of these fields before starti
 | -D, --down            | Stops all containers and removes all containers. Note that this will not build or start containers nor validate the configuration file.                                                                 | -D                             |
 | -o, --overwrite       | When set, any settings in your configuration file which are present as environment variables in the current session will be overwritten.                                                                | -o                             |
 | -s, --disable-spinner | When set, disables inline spinner                                                                                                                                                                       | -s                             |
-| --run-dev             | When set, will launch a separate development client server running on http://localhost:5173. A `.env` file will be generated in the apps/client directory. This cannot be set when using detached mode. | --run-dev                      |
 | --prepare-dev         | When set, will create the `.env` file based on the current configuration that is required to run a separate client development server.                                                                  | --prepare-dev                  |
 
 In the repository, you will see two docker directories: `docker` and `docker-local`. The main deployment will use the `docker` directory. The `docker-local` directory is a separate local version of Loon which we will discuss shortly. Below are some examples.
@@ -95,7 +94,22 @@ In the repository, you will see two docker directories: `docker` and `docker-loc
 python3 build.py
 ```
 
-The above script will build and then run all containers using a default of "config.json" as the configuration file and creating a ".env" file in the `.build-files` directory.
+
+**Running Development Server**
+
+If you'd like to have access to all the development server functionality when working with Loon, you can run a separate development server that connects to the running Docker container. We start by building and running the docker container with the additional flag `--prepare-dev`. This will generate the necessary `.env` file in the `apps/client` directory that will be used by the client.
+
+```bash
+python3 build.py --prepare-dev
+```
+Once that has started, navigate to the `apps/client` directory and run the development server.
+
+```bash
+cd apps/client
+yarn run dev
+```
+
+This will start a separate development server at `http://localhost:5173`. The standard client will still be available as well. 
 
 **Specifying the env file name and configuration file name**
 
@@ -117,7 +131,7 @@ This will enable verbose mode so that we can see the build process as it runs. I
 
 ```bash
 export LOCALDATASETTINGS_SOURCEVOLUMELOCATION=/Users/MyUser/my-loon-data
-python3 build -o
+python3 build.py -o
 ```
 
 This will take your current config (in this case `config.json` in the root directory since no file name was specified) and overwrite the `localDataSettings.sourceVolumeLocation` value to be `/Users/MyUser/my-loon-data`. The original `config.json` will not be altered. Instead, a temporary file (in this case named `config.json.temp`) will be created and then used.
diff --git a/apps/docs-website/docs/loon-for-scientists/data.md b/apps/docs-website/docs/loon-for-scientists/data.md
index 825bf7e6..46716995 100644
--- a/apps/docs-website/docs/loon-for-scientists/data.md
+++ b/apps/docs-website/docs/loon-for-scientists/data.md
@@ -32,7 +32,7 @@ Example Content:
 }
 ```
 
-## `Experiment metadata file`
+## Experiment Metadata File
 
 Each experiment metadata file is stored as a JSON file. This defines some metadata aspects of the experiment and points to the other data files.
 
@@ -40,11 +40,13 @@ At the top level it expects the following attributes:
 
 | Attribute              | Definition                                                                                                                                                                                                                                                                                                              |
 | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`                 | Name of the experiment as it should appear in the Loon dashboard.
 | `headers`              | The list of column names in the CSV feature tables. The order should match the CSV files.                                                                                                                                                                                                                               |
-| `headerTransforms`     | Defines the name of certain special columns (`time`, `frame`, `id`, `parent`, `mass`, `x`, `y`). This is optional if the name already exactly matches in headers. See [the table below](https://github.com/visdesignlab/aardvark-util?tab=readme-ov-file#headertransforms) for information about these special columns. |
-| `locationMetadataList` | A list of imaging location metadata. Each imaging location will include an `id`, `tabularDataFilename`, `imageDataFilename`, and `segmentationsFolder`. See [the table below](https://github.com/visdesignlab/aardvark-util?tab=readme-ov-file#locationmetadatalist) for more information on each of these.             |
+| `headerTransforms`     | Defines the name of certain special columns (`time`, `frame`, `id`, `parent`, `mass`, `x`, `y`). This is optional if the name already exactly matches in headers. See [the table below](#header-transforms) for information about these special columns. |
+| `locationMetadataList` | A list of imaging location metadata. Each imaging location will include an `id`, `tabularDataFilename`, `imageDataFilename`, and `segmentationsFolder`. See [the table below](#location-metadata-list) for more information on each of these.             |
+| `compositeTabularDataFilename` | Specifies the path to the combined tabular data file. See the [section below](#composite-tabular-data-file) for  more information. |
 
-### `headerTransforms`
+### Header Transforms
 
 | Attribute | Definition                                                                                                                                                                         |
 | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -56,17 +58,21 @@ At the top level it expects the following attributes:
 | `x`       | The X coordinate for the cell's center position in pixel space. (It does not matter what definition of center is used.)                                                            |
 | `y`       | Same, but for the Y coordinate.                                                                                                                                                    |
 
-### `locationMetadataList`
+### Location Metadata List
 
-`id` | A unique name for this location. Can be anything, but will be displayed in the interface, so a more descriptive name is better.
-`tabularDataFilename` | The location of the CSV file feature table for this experiment.
-`imageDataFilename` | The location of the OME TIFF image file. This should be a `*.companion.ome` file.
-`segmentationsFolder` | This folder contains all of the segmentation files for a given location. See the [section on segmentations](#segmentations-folder) for more details.
+| Attribute | Definition                                                                                                                                                                         |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                  | A unique name for this location. Can be anything, but will be displayed in the interface, so a more descriptive name is better.
+| `tabularDataFilename` | The location of the CSV file feature table for this experiment.
+| `imageDataFilename`   | The location of the OME TIFF image file. This should be a `*.companion.ome` file.
+|` segmentationsFolder` | This folder contains all of the segmentation files for a given location. See the [section on segmentations](#segmentations-folder) for more details.
+| `tags`                | A JSON object containing key-value pairs that capture metadata about the particular location. See the [tags section](#tags) for more information and some examples.
 
 So, altogether a single experiment metadata file should look something like the following:
 
 ```
 {
+  "name":"ExperimentOne",
   "headers": [
     "Frame",
     "Tracking ID",
@@ -92,29 +98,90 @@ So, altogether a single experiment metadata file should look something like the
     "x": "Pixel Position X (pixels)",
     "y": "Pixel Position Y (pixels)"
   },
+  "compositeTabularDataFilename":"experiment1/composite_tabular_data_file.parquet",
   "locationMetadataList": [
     {
-        "id": "Condition A",
-        "tabularDataFilename": "experiment1/Table_A.csv",
-        "imageDataFilename": "experiment1/images_A.companion.ome",
-        "segmentationsFolder": "experiment1/segmentations_A/"
+      "id": "Condition A",
+      "tabularDataFilename": "experiment1/location_A/Table_A.csv",
+      "imageDataFilename": "experiment1/location_A/images_A.companion.ome",
+      "segmentationsFolder": "experiment1/location_A/segmentations_A",
+      "tags":{
+        "drug":"drug_1",
+        "concentration":"0.1"
+      }
     },
     {
-        "id": "Condition B",
-        "tabularDataFilename": "experiment1/Table_B.csv",
-        "imageDataFilename": "experiment1/images_B.companion.ome",
-        "segmentationsFolder": "experiment1/segmentations_B/"
+      "id": "Condition B",
+      "tabularDataFilename": "experiment1/location_B/Table_B.csv",
+      "imageDataFilename": "experiment1/location_B/images_B.companion.ome",
+      "segmentationsFolder": "experiment1/location_B/segmentations_B"
+      "tags":{}
     },
     {
-        "id": "Condition C",
-        "tabularDataFilename": "experiment1/Table_C.csv",
-        "imageDataFilename": "experiment1/images_C.companion.ome",
-        "segmentationsFolder": "experiment1/segmentations_C/"
+      "id": "Condition C",
+      "tabularDataFilename": "experiment1/location_C/Table_C.csv",
+      "imageDataFilename": "experiment1/location_C/images_C.companion.ome",
+      "segmentationsFolder": "experiment1/location_C/segmentations_C",
+      "tags":{
+        "drug":"drug_2",
+      }
     }
   ]
 }
 ```
 
+### Tags
+
+Tags are used to define metadata about an individual location. This is used in the Loon UI to specify specific conditions corresponding to the location. The tags object has no restrictions. For example, locations have have completely different sets of tags, locations may have no tags, and locations can overlap on one more tags.
+
+For example, suppose we have three locations. Your tags may look like this:
+
+```json
+[
+  {
+    "id": "location_1",
+    ...
+    "tags": {
+      "drug": "drug_1",
+      "concentration":"0.1"
+    }
+  },
+  {
+    "id": "location_2",
+    ...
+    "tags": {}
+  },
+  {
+    "id": "location_3",
+    ...
+    "tags": {
+      "drug": "drug_3"
+    }
+  }
+]
+```
+
+### Composite Tabular Data File
+
+This key specifies the location (relative to the root of the current experiment directory) of a "combined metadata table" as a parquet file.
+
+This table must be the union of each of the individual location metadata csv files with an additional location column and the union of all tags separated as columns as well.
+
+For example, suppose we use the example from [tags section](#tags). Then, a sample of 6 rows of our parquet file would be something like this:
+
+| location | \{rest_of_headers\} | drug | concentration |
+|----------|-------------------|------|----------------|
+| location_1 | . . . | drug_1 | 0.1 |
+| location_1 | . . . | drug_1 | 0.1 |
+| location_2 | . . . |  |  |
+| location_2 | . . . |  |  |
+| location_3 | . . . | drug_3 |  |
+| location_3 | . . . | drug_3 |  |
+
+Here, the empty spaces denote empty strings.
+
+
+
 ## `Segmentations Folder`
 
 Each imaging location should have a corresponding folder that contains all of the segmentation files. The names of the files must correspond to the imaging frame. That is `1.json` will contain all of the cell segmentations for the first frame., `2.json` will contain the second frame, and so on. Each json file must follow the GeoJSON specification. In addition to the standard geometry attribute, the `bbox` attribute must be defined. To link the segmentations with the corresponding metadata the cell `id` defined in the feature table must be included as an `ID` in the GeoJSON properties object.
diff --git a/apps/server/api/migrations/0001_initial.py b/apps/server/api/migrations/0001_initial.py
new file mode 100644
index 00000000..b4a0ab90
--- /dev/null
+++ b/apps/server/api/migrations/0001_initial.py
@@ -0,0 +1,56 @@
+# Generated by Django 5.0.6 on 2024-09-16 20:39
+
+import api.models
+import django.db.models.deletion
+import s3_file_field.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Experiment',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255)),
+                ('headers', models.TextField(default='')),
+                ('header_time', models.CharField(max_length=255)),
+                ('header_frame', models.CharField(max_length=255)),
+                ('header_id', models.CharField(max_length=255)),
+                ('header_parent', models.CharField(max_length=255)),
+                ('header_mass', models.CharField(max_length=255)),
+                ('header_x', models.CharField(max_length=255)),
+                ('header_y', models.CharField(max_length=255)),
+                ('number_of_locations', models.IntegerField())
+            ],
+        ),
+        migrations.CreateModel(
+            name='LoonUpload',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('workflow_code', models.CharField(choices=[('live_cyte', 'Live Cyte')], max_length=30)),
+                ('file_type', models.CharField(choices=[('segmentations', 'Segmentations'), ('cell_images', 'Cell Images'), ('metadata', 'Metadata')], max_length=20)),
+                ('file_name', models.CharField(max_length=255)),
+                ('location', models.DecimalField(decimal_places=0, max_digits=5)),
+                ('experiment_name', models.CharField(max_length=255)),
+                ('blob', s3_file_field.fields.S3FileField(upload_to=api.models.LoonUpload.upload_path)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Location',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255)),
+                ('tabular_data_filename', models.CharField(max_length=255)),
+                ('images_data_filename', models.CharField(max_length=255)),
+                ('segmentations_folder', models.CharField(max_length=255)),
+                ('experiment', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='locations', to='api.experiment')),
+            ],
+        ),
+    ]
diff --git a/apps/server/api/migrations/0002_experiment_composite_tabular_data_file_name.py b/apps/server/api/migrations/0002_experiment_composite_tabular_data_file_name.py
new file mode 100644
index 00000000..2fd7466b
--- /dev/null
+++ b/apps/server/api/migrations/0002_experiment_composite_tabular_data_file_name.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.0.6 on 2024-09-16 21:53
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='experiment',
+            name='composite_tabular_data_file_name',
+            field=models.CharField(default='', max_length=255),
+        ),
+    ]
diff --git a/apps/server/api/migrations/0003_location_tags.py b/apps/server/api/migrations/0003_location_tags.py
new file mode 100644
index 00000000..230541ef
--- /dev/null
+++ b/apps/server/api/migrations/0003_location_tags.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.0.6 on 2024-09-27 01:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0002_experiment_composite_tabular_data_file_name'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='location',
+            name='tags',
+            field=models.JSONField(default={}),
+        ),
+    ]
diff --git a/apps/server/api/migrations/__init__.py b/apps/server/api/migrations/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/server/api/models.py b/apps/server/api/models.py
index 64059b9e..b7b8a730 100644
--- a/apps/server/api/models.py
+++ b/apps/server/api/models.py
@@ -1,9 +1,9 @@
 from django.db import models  # type: ignore
 from s3_file_field import S3FileField  # type: ignore
 import uuid
-# Create your models here.
 
 
+# Upload model for uploading files to MinIO
 class LoonUpload(models.Model):
 
     def upload_path(instance, filename):
@@ -25,6 +25,7 @@ class FileType(models.TextChoices):
     blob = S3FileField(upload_to=upload_path)
 
 
+# Experiment Model. Contains all information regarding a specific experiment.
 class Experiment(models.Model):
 
     def to_json(self):
@@ -33,6 +34,7 @@ def to_json(self):
         data = {
             "name": self.name,
             "headers": self.headers.split("|"),
+            "compositeTabularDataFilename": self.composite_tabular_data_file_name,
             "headerTransforms": {
                 "time": self.header_time,
                 "frame": self.header_frame,
@@ -56,6 +58,7 @@ def to_json(self):
     header_x = models.CharField(max_length=255)
     header_y = models.CharField(max_length=255)
     number_of_locations = models.IntegerField()
+    composite_tabular_data_file_name = models.CharField(max_length=255, default='')
 
 
 class Location(models.Model):
@@ -65,7 +68,8 @@ def to_json(self):
             "id": self.name,
             "tabularDataFilename": self.tabular_data_filename,
             "imageDataFilename": self.images_data_filename,
-            "segmentationsFolder": self.segmentations_folder
+            "segmentationsFolder": self.segmentations_folder,
+            "tags": self.tags
         }
         return data
 
@@ -74,6 +78,7 @@ def to_json(self):
     tabular_data_filename = models.CharField(max_length=255)
     images_data_filename = models.CharField(max_length=255)
     segmentations_folder = models.CharField(max_length=255)
+    tags = models.JSONField(default={})
 
     def __str__(self):
         return f"{self.experiment}_{self.name}"
diff --git a/apps/server/api/serializers.py b/apps/server/api/serializers.py
index 9c337cfa..faf87d44 100644
--- a/apps/server/api/serializers.py
+++ b/apps/server/api/serializers.py
@@ -53,6 +53,7 @@ def create(self, validated_data):
     name = serializers.CharField()
     headers = serializers.CharField()
     number_of_locations = serializers.IntegerField()
+    composite_tabular_data_file_name = serializers.CharField()
 
 
 class LocationCreateSerializer(serializers.Serializer):
@@ -67,3 +68,4 @@ def create(self, validated_data):
     tabular_data_filename = serializers.CharField()
     images_data_filename = serializers.CharField()
     segmentations_folder = serializers.CharField()
+    tags = serializers.JSONField()
diff --git a/apps/server/api/tasks.py b/apps/server/api/tasks.py
index ebadd647..ecd23c53 100644
--- a/apps/server/api/tasks.py
+++ b/apps/server/api/tasks.py
@@ -86,11 +86,17 @@ def cleanup_temp_files(self):
         logger.info('Fake Cleaning')
 
     # Generic unpacking of a zip file with callback for additional processing.
-    def process_zip_file(self, base_file_location="", callback=None):
+    def process_zip_file(self,
+                         base_file_location="",
+                         callback=None,
+                         base_file_location_suffix="",
+                         task_instance=None
+                         ):
         try:
             companion_ome = ""
             with zipfile.ZipFile(self.blob, 'r') as zip_ref:
                 zip_contents = zip_ref.namelist()
+                total = len(zip_contents)
                 for i, curr_file_name in enumerate(zip_contents):
                     if not _badFileChecker(
                         curr_file_name
@@ -115,7 +121,7 @@ def process_zip_file(self, base_file_location="", callback=None):
                                         "message": f"Failed at callback: {e.message}",
                                     }
 
-                            file_location = f"{base_file_location}/" \
+                            file_location = f"{base_file_location}/{base_file_location_suffix}/" \
                                             f"{corrected_curr_file_name}"
                             # Create a ContentFile object with the file contents
                             content_file = ContentFile(file_contents)
@@ -128,11 +134,25 @@ def process_zip_file(self, base_file_location="", callback=None):
                                 pass  # If setting size manually is not possible
 
                             default_storage.save(file_location, content_file)
+                            if task_instance:
+                                task_instance.update_state(
+                                    state='STARTED',
+                                    meta={
+                                        'metadata': {
+                                            'current': i, 'total': total
+                                        }
+                                    }
+                                )
 
-            # return {"process_zip_file_status": "SUCCEEDED"}
-            return {"processed_zip_file_status": "SUCCESS",
+            return {
+                    "processed_zip_file_status": "SUCCESS",
                     "base_file_location": base_file_location,
-                    "companion_ome": companion_ome}
+                    "companion_ome": companion_ome,
+                    "metadata": {
+                        "total": total,
+                        "current": total
+                        }
+                    }
 
         except FileNotFoundError:
             return {"process_zip_file_status": "FAILED", "message": "Could not find file"}
@@ -185,7 +205,7 @@ def process_csv_file(self, base_file_location="", skip_rows=0, delimiter=',', ca
 
     # Declare abstract execute method
     @abstractmethod
-    def execute(self):
+    def execute(self, task_instance=None):
         pass
 
     # Declare abstract cleanup method
@@ -213,12 +233,17 @@ def create_task(workflow_code, workflow_file_type, **kwargs):
 
 
 class LiveCyteSegmentationsTask(Task):
-    def execute(self):
+    def execute(self, task_instance=None):
         logger.info(f"Executing task: {self.record_id}")
         base_file_location = f"{self.experiment_name}/" \
                              f"location_{self.location}/" \
-                             "segmentations/cells"
-        data = self.process_zip_file(base_file_location=base_file_location, callback=roi_to_geojson)
+                             "segmentations"
+        data = self.process_zip_file(
+            base_file_location=base_file_location,
+            callback=roi_to_geojson,
+            base_file_location_suffix="cells",
+            task_instance=task_instance
+            )
         return data
 
     def cleanup(self):
@@ -227,12 +252,16 @@ def cleanup(self):
 
 
 class LiveCyteCellImagesTask(Task):
-    def execute(self):
+    def execute(self, task_instance=None):
         logger.info(f"Executing task: {self.record_id}")
         base_file_location = f"{self.experiment_name}/" \
                              f"location_{self.location}/" \
                              "images"
-        data = self.process_zip_file(base_file_location=base_file_location, callback=None)
+        data = self.process_zip_file(
+            base_file_location=base_file_location,
+            callback=None,
+            task_instance=task_instance
+            )
         return data
 
     def cleanup(self):
@@ -241,7 +270,7 @@ def cleanup(self):
 
 
 class LiveCyteMetadataTask(Task):
-    def execute(self):
+    def execute(self, task_instance=None):
         logger.info(f"Executing task: {self.record_id}")
 
         base_file_location = f"{self.experiment_name}/" \
@@ -255,8 +284,8 @@ def cleanup(self):
         self.cleanup_temp_files()
 
 
-@shared_task
-def execute_task(record_id):
+@shared_task(bind=True)
+def execute_task(self, record_id):
     # Get entry from our SQL Table
     loonUpload: LoonUpload = LoonUpload.objects.get(id=record_id)
     # Create a task for this entry
@@ -270,7 +299,7 @@ def execute_task(record_id):
         record_id=record_id
     )
     # Execute the task
-    response_data = curr_task.execute()
+    response_data = curr_task.execute(task_instance=self)
     # Perform cleanup
     curr_task.cleanup()
 
diff --git a/apps/server/api/views.py b/apps/server/api/views.py
index e6d1b957..56f758a6 100644
--- a/apps/server/api/views.py
+++ b/apps/server/api/views.py
@@ -17,6 +17,9 @@
 )
 from .models import LoonUpload, Location, Experiment
 from django.core.files.base import ContentFile  # type: ignore
+import tempfile
+import os
+import pandas as pd
 
 
 def field_value_object_key(serializer: serializers.Serializer) -> Optional[str]:
@@ -30,12 +33,67 @@ def field_value_object_key(serializer: serializers.Serializer) -> Optional[str]:
     return object_key
 
 
+def create_composite_tabular_data_file(
+        experiment_name: str,
+        experiment_settings: list,
+        location_tags: dict
+        ) -> str:
+
+    composite_tabular_data_file_name = f"{experiment_name}/composite_tabular_data.parquet"
+
+    # Get all new columns to append
+    tag_key_list = []
+    for entry in location_tags.values():
+        for key in entry.keys():
+            tag_key_list.append(key)
+
+    tag_key_list = list(set(tag_key_list))
+
+    with tempfile.NamedTemporaryFile(mode='w+', newline='', delete=False) as temp_file:
+        temp_file_name = temp_file.name
+        for idx, entry in enumerate(experiment_settings):
+
+            curr_tabular_data_file = entry['tabularDataFilename']
+
+            with default_storage.open(curr_tabular_data_file, 'rb') as curr_source_file:
+
+                # Read CSV
+                df = pd.read_csv(curr_source_file)
+
+                # First column is location
+                df.insert(0, "location", entry['id'])
+
+                # Insert all tags
+                for tag_column in tag_key_list:
+                    # Using get -- much easier to get defaults with dictionaries
+                    df[tag_column] = location_tags.get(f'location_{idx}',{}).get(tag_column, '')
+
+                # Add current data_frame to data_frames list
+
+            if idx == 0:
+                # Write the first DataFrame
+                df.to_parquet(temp_file_name, index=False, engine='fastparquet')
+            else:
+                # Append subsequent DataFrames
+                df.to_parquet(temp_file_name, index=False, engine='fastparquet', append=True)
+                
+    # Store
+    with open(temp_file_name, 'rb') as composite_temp_file:
+        default_storage.save(composite_tabular_data_file_name, composite_temp_file)
+
+    # Clean up the temp file from local disk
+    os.remove(temp_file_name)
+
+    return composite_tabular_data_file_name
+
+
 InvalidFieldValueResponse = Response(
     {'field_value': ['field_value is not a valid signed string.']},
     status=status.HTTP_400_BAD_REQUEST,
 )
 
 
+# Called on each individual upload
 class ProcessDataView(APIView):
     def post(self, request):
         serializer = LoonUploadCreateSerializer(data=request.data)
@@ -72,10 +130,16 @@ def post(self, request):
 
     def get(self, request, task_id):
         result = AsyncResult(task_id)
+
+        '''
+        Celery response:
+
+        May return 'current' and 'total'
+        Returns processed data when finished
+        '''
         response_data = {
-            "task_id": task_id
+            "task_id": task_id,
         }
-        print(result.state, flush=True)
         if result.state == 'PENDING':
             response_data['status'] = 'QUEUED'
         elif result.state == 'STARTED':
@@ -88,27 +152,34 @@ def get(self, request, task_id):
             response_data['status'] = 'ERROR'
             response_data['message'] = 'Unable to retrieve status'
 
-        if result.ready():
-            return_value = result.get()
-            response_data['data'] = return_value
+        response_data['data'] = result.info
 
         return Response(response_data)
 
 
+# Called once all processing steps have finished and all data has been uploaded.
 class FinishExperimentView(APIView):
     def post(self, request):
         data = request.data
         experiment_settings = json.loads(data.get('experimentSettings'))
         experiment_headers = json.loads(data.get('experimentHeaders'))
         experiment_header_transforms = json.loads(data.get('experimentHeaderTransforms'))
+        location_tags = json.loads(data.get('locationTags'))
 
         experiment_name = data.get('experimentName')
+
+        composite_tabular_data_file_name = create_composite_tabular_data_file(
+            experiment_name, experiment_settings, location_tags
+            )
+
         experiment_data = {
             "name": experiment_name,
             "headers": "|".join(experiment_headers),
             "number_of_locations": len(experiment_settings),
+            "composite_tabular_data_file_name": composite_tabular_data_file_name,
             "header_transforms": experiment_header_transforms
         }
+
         experiment_serializer = ExperimentCreateSerializer(data=experiment_data)
         if not experiment_serializer.is_valid():
             print(experiment_serializer.errors, flush=True)
@@ -116,12 +187,14 @@ def post(self, request):
 
         experiment_instance = experiment_serializer.save()
 
+        # Create individual Location table entries
         for i in range(len(experiment_settings)):
             location_data = {
                 "name": experiment_settings[i]['id'],
                 "tabular_data_filename": experiment_settings[i]['tabularDataFilename'],
                 "images_data_filename": experiment_settings[i]['imageDataFilename'],
                 "segmentations_folder": experiment_settings[i]['segmentationsFolder'],
+                "tags": location_tags[f'location_{i}']
             }
             location_serializer = LocationCreateSerializer(data=location_data)
             if not location_serializer.is_valid():
diff --git a/apps/server/requirements.txt b/apps/server/requirements.txt
index bf44ed64..6cab7703 100644
--- a/apps/server/requirements.txt
+++ b/apps/server/requirements.txt
@@ -12,20 +12,28 @@ click==8.1.7
 click-didyoumean==0.3.1
 click-plugins==1.1.1
 click-repl==0.3.0
+cramjam==2.8.4
+diskcache==5.6.3
 Django==5.0.6
 django-cors-headers==4.3.1
 django-environ==0.11.2
 django-minio-storage==0.5.7
 django-s3-file-field==1.0.1
 djangorestframework==3.15.1
+duckdb==1.0.0
+duckdb-server==0.10.0
+fastparquet==2024.5.0
+fsspec==2024.9.0
 geojson==3.1.0
 jmespath==1.0.1
 kombu==5.3.7
 minio==7.2.7
 mysqlclient==2.2.4
 numpy==2.0.0
+packaging==24.1
 pandas==2.2.2
 prompt_toolkit==3.0.46
+pyarrow==16.1.0
 pycparser==2.22
 pycryptodome==3.20.0
 python-dateutil==2.9.0.post0
@@ -34,9 +42,11 @@ redis==5.0.5
 roifile==2024.5.24
 s3transfer==0.10.1
 six==1.16.0
+socketify==0.0.27
 sqlparse==0.5.0
 typing_extensions==4.12.1
 tzdata==2024.1
+ujson==5.10.0
 urllib3==2.2.1
 vine==5.1.0
 wcwidth==0.2.13
diff --git a/build.py b/build.py
index 03025fa7..0da131ac 100644
--- a/build.py
+++ b/build.py
@@ -190,6 +190,7 @@ def run_command(command, shell=True):
 
     process = subprocess.Popen(
         command,
+        encoding='utf-8',
         shell=True,
         stdout=subprocess.PIPE,
         stderr=subprocess.PIPE,
@@ -197,9 +198,17 @@ def run_command(command, shell=True):
     )
 
     for line in iter(process.stdout.readline, ''):
-        logging.info(line.strip())  # Log each line as INFO
+        try:
+            logging.info(line.strip())  # Log the line
+        except UnicodeEncodeError:
+            # Replace invalid characters
+            logging.info(line.encode('utf-8', 'replace').decode('utf-8').strip())
     for line in iter(process.stderr.readline, ''):
-        logging.info(line.strip())  # Log errors as ERROR
+        try:
+            logging.info(line.strip())  # Log the line
+        except UnicodeEncodeError:
+            # Replace invalid characters
+            logging.info(line.encode('utf-8', 'replace').decode('utf-8').strip())
 
     return process
 
@@ -212,6 +221,7 @@ def follow_logs(service_name, logs_path, verbose=False, detached=False):
         subprocess.Popen(
             command,
             shell=True,
+            encoding='utf-8',
             stdout=subprocess.PIPE,
             stderr=subprocess.PIPE,
             start_new_session=True
@@ -221,6 +231,7 @@ def follow_logs(service_name, logs_path, verbose=False, detached=False):
         process = subprocess.Popen(
             command,
             shell=True,
+            encoding='utf-8',
             stdout=subprocess.PIPE,
             stderr=subprocess.PIPE,
             start_new_session=True,
@@ -233,14 +244,21 @@ def follow_logs(service_name, logs_path, verbose=False, detached=False):
                 f.write(clean_line)  # Clean line of ASCII characters
                 f.flush()
                 if verbose:
-                    logging.info(line.strip())
-
+                    try:
+                        logging.info(line.strip())  # Log the line
+                    except UnicodeEncodeError:
+                        # Replace invalid characters
+                        logging.info(line.encode('utf-8', 'replace').decode('utf-8').strip())
             for line in iter(process.stderr.readline, ''):
                 clean_line = strip_ansi_escape_codes(line)
                 f.write(clean_line)  # Write cleaned line to file
                 f.flush()  # Ensure the line is written to the file immediately
                 if verbose:
-                    logging.info(line.strip())
+                    try:
+                        logging.info(line.strip())  # Log the line
+                    except UnicodeEncodeError:
+                        # Replace invalid characters
+                        logging.info(line.encode('utf-8', 'replace').decode('utf-8').strip())
 
             process.stdout.close()
             process.stderr.close()
@@ -351,18 +369,7 @@ def prepare_dev(buildConfig):
     fullEnvFileName = 'apps/client/.env'
     with open(fullEnvFileName, 'w') as outF:
         outF.write(outString)
-
-
-def run_dev():
-    print("Starting dev server")
-    client_directory = 'apps/client'
-    subprocess.Popen(
-                    ['yarn', 'dev'],
-                    cwd=client_directory,
-                    stdout=subprocess.PIPE,
-                    stderr=subprocess.PIPE
-                    )
-    print("Started dev server at http://localhost:5173")
+    print("Dev server can now be run by using 'yarn run dev' in the apps/client directory.")
 
 
 def strip_ansi_escape_codes(text):
@@ -401,8 +408,6 @@ def spinner(msg):
                         help="If present, overwrites chosen config with current env variables")
     parser.add_argument("-s", "--disable-spinner", action="store_true", required=False,
                         help="Disables spinner")
-    parser.add_argument("--run-dev", action="store_true", required=False,
-                        help="Runs additional client dev environment")
     parser.add_argument("--prepare-dev", action="store_true", required=False,
                         help="Generates .env file for client environment.")
 
@@ -410,10 +415,6 @@ def spinner(msg):
 
     config_file_name = args.config_file
 
-    if args.detached and args.run_dev:
-        print("Cannot run dev server in detached mode.")
-        sys.exit()
-
     if not args.validate_build:
         if not args.down:
             # Create the env file, returning the build config
@@ -454,6 +455,9 @@ def spinner(msg):
 
             handlers = [logging.FileHandler(full_output_path)]
 
+            # Update the default encoding for stdout to utf-8
+            sys.stdout.reconfigure(encoding='utf-8')
+
             # If verbose, add additional handler to output info to terminal
             if args.verbose:
                 handlers.append(logging.StreamHandler(sys.stdout))
@@ -473,10 +477,8 @@ def spinner(msg):
             print(f"Visit {http_value}{base_url} to view application.\n")
             follow_all_logs(logs_path, services, args.verbose, args.detached)
 
-            if args.prepare_dev or args.run_dev:
+            if args.prepare_dev:
                 prepare_dev(buildConfig)
-            if args.run_dev:
-                run_dev()
 
             check_containers_status(services, args.detached)
         else: