diff --git a/Dockerfile b/Dockerfile
index faaf1f14..f86a1a0e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -16,6 +16,8 @@ RUN echo -e "	server {\n" \
             "			root   /app;\n" \
             "			index  index.html;\n" \
             "			try_files \$uri \$uri/ /index.html;\n" \
+            "			add_header 'Cross-Origin-Embedder-Policy' 'require-corp';\n" \
+            "			add_header 'Cross-Origin-Opener-Policy' 'same-origin';\n" \
             "		}\n" \
             "	}\n" \
             > /etc/nginx/conf.d/datalab.conf
diff --git a/package-lock.json b/package-lock.json
index 34f02b80..a9a0e9c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "vue": "^3.5.9",
         "vue-router": "^4.2.5",
         "vue3-carousel": "^0.3.1",
-        "vuetify": "^3.6.0",
+        "vuetify": "^3.7.4",
         "webfontloader": "^1.0.0"
       },
       "devDependencies": {
@@ -12726,9 +12726,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.6.0.tgz",
-      "integrity": "sha512-ic7VrB+nOTo8F7APhcKPjtDEO3yBCK5CJ2LIQ/4oAC/aaAKtuGuNMBUiUVitDKQjr0tcnDgy9Ar1CrHU5d28IA==",
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.4.tgz",
+      "integrity": "sha512-Y8UU5wUDQXC3oz2uumPb8IOdvB4XMCxtxnmqdOc+LihNuPlkSgxIwf92ndRzbOtJFKHsggFUxpyLqpQp+A+5kg==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
@@ -12740,7 +12740,6 @@
         "typescript": ">=4.7",
         "vite-plugin-vuetify": ">=1.0.0",
         "vue": "^3.3.0",
-        "vue-i18n": "^9.0.0",
         "webpack-plugin-vuetify": ">=2.0.0"
       },
       "peerDependenciesMeta": {
@@ -12750,9 +12749,6 @@
         "vite-plugin-vuetify": {
           "optional": true
         },
-        "vue-i18n": {
-          "optional": true
-        },
         "webpack-plugin-vuetify": {
           "optional": true
         }
diff --git a/package.json b/package.json
index 393e5634..f5a0c48f 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "vue": "^3.5.9",
     "vue-router": "^4.2.5",
     "vue3-carousel": "^0.3.1",
-    "vuetify": "^3.6.0",
+    "vuetify": "^3.7.4",
     "webfontloader": "^1.0.0"
   },
   "devDependencies": {
diff --git a/src/components/DataSession/OperationWizard.vue b/src/components/DataSession/OperationWizard.vue
index 505a7f52..2af91d0c 100644
--- a/src/components/DataSession/OperationWizard.vue
+++ b/src/components/DataSession/OperationWizard.vue
@@ -3,7 +3,7 @@ import { ref, onMounted, computed, defineEmits, defineProps} from 'vue'
 import { fetchApiCall, handleError } from '@/utils/api'
 import { calculateColumnSpan } from '@/utils/common'
 import ImageGrid from '../Global/ImageGrid'
-import ImageScalingGroup from '../Global/ImageScalingGroup'
+import ImageScalingGroup from '../Global/Scaling/ImageScalingGroup'
 import { useConfigurationStore } from '@/stores/configuration'
 import { useAlertsStore } from '@/stores/alerts'
 
diff --git a/src/components/Global/CompositeImage.vue b/src/components/Global/Scaling/CompositeImage.vue
similarity index 100%
rename from src/components/Global/CompositeImage.vue
rename to src/components/Global/Scaling/CompositeImage.vue
diff --git a/src/components/Global/Scaling/HistogramSlider.vue b/src/components/Global/Scaling/HistogramSlider.vue
new file mode 100644
index 00000000..41d23238
--- /dev/null
+++ b/src/components/Global/Scaling/HistogramSlider.vue
@@ -0,0 +1,229 @@
+<script setup>
+import { ref, defineProps, defineEmits, computed, watch } from 'vue'
+
+// This component draws a sparkline histogram with range slider controls on top of it.
+// It has two coordinate systems - sliderRange which is a linear system of bins for the
+// histogram passed in, with bin middles defined by a same-sized array bins, and scaleRange
+// which is the actual lower/upper point values in pixel space. You can get better granularity
+// on changing scaleRange with the number fields, since that can change to any value in the range
+// vs using the histogram slider which has steps according to the highly non-linear bins used
+// to generate the histogram.
+
+const props = defineProps({
+  histogram: {
+    type: Array,
+    required: true
+  },
+  bins: {
+    type: Array,
+    required: true
+  },
+  maxValue: {
+    type: Number,
+    required: false,
+    default: 65500
+  },
+  zMin: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  zMax: {
+    type: Number,
+    required: false,
+    default: 65500
+  }
+})
+
+const emit = defineEmits(['updateScaling'])
+
+const scaleRange = ref([props.bins[0], props.bins[props.bins.length-1]])
+const sliderRange = ref([0, props.bins.length-1])
+const selectedColor = 'rgb(20,182,246)'
+const backgroundColor = 'rgb(204,208,211)'
+
+const gradient = computed(() => {
+  // This function computes a "gradient" for the histogram sparkline, showing the selected region as highlighted
+  let gradientArray = []
+  for (let i = 0; i < props.bins.length; i++) {
+    if (i > (sliderRange.value[0]+1) && i < (sliderRange.value[1]-1)) {
+      gradientArray.push(selectedColor)
+    }
+    else {
+      gradientArray.push(backgroundColor)
+    }
+  }
+  return gradientArray
+})
+
+function sliderToBinValue(sliderValue) {
+  // This converts from sliderRange coordinates to scaleRange coordinates
+  if (props.bins.length >= sliderValue) {
+    return props.bins[sliderValue]
+  }
+}
+
+function labelSliderToScaleValue(sliderValue) {
+  // This returns the current scaleRange value given a sliderValue. It doesn't convert and show the sliderValue
+  // so that we can correctly show what the scaleRange is if it is modified in the number fields.
+  if (sliderValue == sliderRange.value[0]) {
+    return scaleRange.value[0]
+  }
+  return scaleRange.value[1]
+}
+
+function scaleToSliderValue(scaleValue) {
+  // This converts from scaleRange to the nearest sliderRange value, which allows us to map from scale space to
+  // slider space when the user makes a change to the scaleRange directly with the number fields
+  if (Math.abs(scaleValue - props.zMin) > Math.abs(scaleValue - props.zMax)) {
+    // Closer to the zMax, so iterate in reverse to find a match sooner
+    let previousDistance = Math.abs(scaleValue - props.bins[props.bins.length-1])
+    for (let i = props.bins.length-2; i >= 0; i--) {
+      let distance = Math.abs(scaleValue - props.bins[i])
+      if (distance > previousDistance) {
+        return i + 1
+      }
+      else {
+        previousDistance = distance
+      }
+    }
+    return 0
+  }
+  else {
+    // Closer to zMin, so iterate in the natural order
+    let previousDistance = Math.abs(scaleValue - props.bins[0])
+    for (let i = 1; i < props.bins.length; i++) {
+      let distance = Math.abs(scaleValue - props.bins[i])
+      if (distance > previousDistance) {
+        return i - 1
+      }
+      else {
+        previousDistance = distance
+      }
+    }
+    return props.bins.length - 1
+  }
+}
+
+function updateScaleRange() {
+  // This is called when the range slider control is moved
+  scaleRange.value[0] = sliderToBinValue(sliderRange.value[0])
+  scaleRange.value[1] = sliderToBinValue(sliderRange.value[1])
+  emit('updateScaling', scaleRange.value[0], scaleRange.value[1])
+}
+
+function updateLowerScale(value) {
+  // This is called when a change is made on the lower point number control
+  scaleRange.value = [Number(value), scaleRange.value[1]]
+  sliderRange.value[0] = scaleToSliderValue(Number(value))
+  emit('updateScaling', scaleRange.value[0], scaleRange.value[1])
+}
+
+function updateUpperScale(value) {
+  // This is called when a change is made on the upper point number control
+  scaleRange.value = [scaleRange.value[0], Number(value)]
+  sliderRange.value[1] = scaleToSliderValue(Number(value))
+  emit('updateScaling', scaleRange.value[0], scaleRange.value[1])
+}
+
+function zScaleImage() {
+  // This is called to reset the ranges to the zMin/zMax
+  scaleRange.value = [props.zMin, props.zMax]
+  sliderRange.value = [scaleToSliderValue(props.zMin), scaleToSliderValue(props.zMax)]
+  emit('updateScaling', scaleRange.value[0], scaleRange.value[1])
+}
+
+watch(
+  () => props.zMax, () => {
+    zScaleImage()
+  }
+)
+
+</script>
+<template>
+  <v-row class="ml-4">
+    <v-col cols="4">
+      <v-text-field
+        v-model="scaleRange[0]"
+        :min="0"
+        label="lower point"
+        density="compact"
+        type="number"
+        variant="outlined"
+        step="10"
+        hide-details
+        @update:modelValue="updateLowerScale">
+      </v-text-field>
+    </v-col>
+    <v-col cols="4">
+      <v-text-field
+        v-model="scaleRange[1]"
+        :max="props.maxValue"
+        label="upper point"
+        density="compact"
+        type="number"
+        variant="outlined"
+        step="10"
+        hide-details
+        @update:modelValue="updateUpperScale">
+      </v-text-field>
+    </v-col>
+    <v-col cols="4">
+      <v-btn
+        class="ml-2"
+        variant="outlined"
+        @click="zScaleImage"
+      >Z-Scale</v-btn>
+    </v-col>
+  </v-row>
+  <v-row class="ma-0">
+    <v-sheet class="stackSheet">
+      <v-sparkline
+        smooth=true
+        fill=true
+        line-width="0.1"
+        height="50"
+        :gradient="gradient"
+        gradient-direction='left'
+        :model-value="props.histogram"
+        auto-draw
+      >
+      </v-sparkline>
+      <v-range-slider
+        class="stackControls"
+        v-model="sliderRange"
+        step="1"
+        track-size="0"
+        :track-color="backgroundColor"
+        :track-fill-color="selectedColor"
+        :thumb-color="selectedColor"
+        thumb-size="16"
+        :max="props.bins.length-1"
+        thumb-label="always"
+        strict
+        hide-details
+        @update:modelValue="updateScaleRange"
+      >
+        <template v-slot:thumb-label="{ modelValue }">
+          {{ labelSliderToScaleValue(modelValue) }}
+        </template>
+      </v-range-slider>
+    </v-sheet>
+  </v-row>
+</template>
+<style scoped>
+
+.stackSheet {
+  position: relative;
+  width: 500px;
+  margin-left: 10px;
+}
+
+.stackControls {
+  position: absolute;
+  bottom: -6px;
+  left: 5px;
+  width: 473px;
+}
+
+</style>
diff --git a/src/components/Global/ImageScaler.vue b/src/components/Global/Scaling/ImageScaler.vue
similarity index 58%
rename from src/components/Global/ImageScaler.vue
rename to src/components/Global/Scaling/ImageScaler.vue
index c4b04bd2..75f51444 100644
--- a/src/components/Global/ImageScaler.vue
+++ b/src/components/Global/Scaling/ImageScaler.vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted, defineEmits, defineProps } from 'vue'
 import { useConfigurationStore } from '@/stores/configuration'
 import { fetchApiCall } from '@/utils/api'
 import RawScaledImage from './RawScaledImage.vue'
+import HistogramSlider from './HistogramSlider.vue'
 
 // This component gets the raw image data from the server for an image
 // and then displays the image and the scaling controls under it
@@ -33,7 +34,7 @@ const isLoading = ref(true)
 const errorReason = ref('')
 const rawData = ref({})
 const sliderRange = ref([0, 65535])
-var zScaleValues = null
+const zScaleValues = ref([0, 65535])
 
 const titleText = computed(() => {
   return props.imageName.replace('_', ' ')
@@ -49,24 +50,29 @@ const maxPixelValue = computed(() => {
   }
 })
 
-function updateLowerScale(value) {
-  sliderRange.value = [Number(value), sliderRange.value[1]]
-  emit('updateScaling', props.imageName, sliderRange.value[0], sliderRange.value[1])
-}
-
-function updateUpperScale(value) {
-  sliderRange.value = [sliderRange.value[0], Number(value)]
-  emit('updateScaling', props.imageName, sliderRange.value[0], sliderRange.value[1])
-}
+const histogram = computed(() => {
+  if (rawData.value && rawData.value.histogram) {
+    return rawData.value.histogram
+  }
+  else {
+    return [0, 10, 10, 5, 4, 3, 2, 1]
+  }
+})
 
-function zScaleImage() {
-  if (zScaleValues){
-    sliderRange.value = [...zScaleValues]
+const bins = computed(() => {
+  if (rawData.value && rawData.value.bins) {
+    return rawData.value.bins
+  }
+  else {
+    return [0, 1, 2, 3, 4, 5, 6, 7]
   }
+})
+
+function updateScaleRange(lowerValue, upperValue) {
+  sliderRange.value = [Number(lowerValue), Number(upperValue)]
   emit('updateScaling', props.imageName, sliderRange.value[0], sliderRange.value[1])
 }
 
-
 onMounted(async () => {
   const url = dataSessionsUrl + 'analysis/raw-data/'
   const body = {
@@ -77,8 +83,7 @@ onMounted(async () => {
   fetchApiCall({url: url, method: 'POST', body: body,
     successCallback: (response) => {
       rawData.value = response
-      zScaleValues = [response.zmin, response.zmax]
-      zScaleImage()
+      zScaleValues.value = [response.zmin, response.zmax]
       isLoading.value = false
     },
     failCallback: (error) => {
@@ -106,46 +111,17 @@ onMounted(async () => {
       </raw-scaled-image>
     </v-row>
     <v-row>
-      <v-range-slider
-        v-model="sliderRange"
-        step="500"
-        :max=maxPixelValue
-        :max-width="props.maxSize + 100"
-        strict
-        thumb-label="always"
-        @update:modelValue="emit('updateScaling', props.imageName, sliderRange[0], sliderRange[1])"
-      >
-        <template v-slot:prepend>
-          <v-text-field
-            v-model="sliderRange[0]"
-            density="compact"
-            type="number"
-            variant="outlined"
-            step="100"
-            style="width: 100px"
-            hide-details
-            single-line
-            @update:modelValue="updateLowerScale">
-          </v-text-field>
-        </template>
-        <template v-slot:append>
-          <v-text-field
-            v-model="sliderRange[1]"
-            density="compact"
-            type="number"
-            variant="outlined"
-            step="100"
-            style="width: 100px"
-            hide-details
-            single-line
-            @update:modelValue="updateUpperScale">
-          </v-text-field>
-          <v-btn
-            class="ml-2"
-            @click="zScaleImage"
-          >ZScale</v-btn>
-        </template>
-      </v-range-slider>
+      <v-col>
+        <histogram-slider
+          :histogram="histogram"
+          :bins="bins"
+          :max-value="maxPixelValue"
+          :z-min="zScaleValues[0]"
+          :z-max="zScaleValues[1]"
+          @update-scaling="updateScaleRange"
+        >
+        </histogram-slider>
+      </v-col>
     </v-row>
   </div>
 </template>
diff --git a/src/components/Global/ImageScalingGroup.vue b/src/components/Global/Scaling/ImageScalingGroup.vue
similarity index 98%
rename from src/components/Global/ImageScalingGroup.vue
rename to src/components/Global/Scaling/ImageScalingGroup.vue
index 80b3370c..21c848f4 100644
--- a/src/components/Global/ImageScalingGroup.vue
+++ b/src/components/Global/Scaling/ImageScalingGroup.vue
@@ -69,7 +69,6 @@ watch(
           :key="groupName"
           :value="groupName"
         >
-          <v-main style="height:100vh">
             <v-container
               fluid
               pa-0
@@ -110,7 +109,6 @@ watch(
                 </v-col>
               </v-row>
             </v-container>
-          </v-main>
         </v-tabs-window-item>
       </v-tabs-window>
     </v-card-text>
diff --git a/src/components/Global/RawScaledImage.vue b/src/components/Global/Scaling/RawScaledImage.vue
similarity index 100%
rename from src/components/Global/RawScaledImage.vue
rename to src/components/Global/Scaling/RawScaledImage.vue