diff --git a/src/components/Global/FilterBadge.vue b/src/components/Global/FilterBadge.vue
index 8edbedd8..ef03ae2a 100644
--- a/src/components/Global/FilterBadge.vue
+++ b/src/components/Global/FilterBadge.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue'
+import { filterToColor } from '@/utils/common'
+
 const props = defineProps({
   filter: {
     type: String,
@@ -7,23 +8,11 @@ const props = defineProps({
   }
 })
 
-const badgeColor = computed(() => {
-  switch (props.filter) {
-  case 'R': case 'rp':
-    return 'red'
-  case 'V': case 'gp':
-    return 'green'
-  case 'B':
-    return 'blue'
-  default:
-    return 'var(--metal)'
-  }
-})
 </script>
 <template>
   <p
     class="filter-badge"
-    :style="{ backgroundColor: badgeColor}"
+    :style="{ backgroundColor: filterToColor(props.filter) }"
   >
     {{ props.filter }}
   </p>
diff --git a/src/components/Global/Scaling/CompositeImage.vue b/src/components/Global/Scaling/CompositeImage.vue
index c831d91d..1f917174 100644
--- a/src/components/Global/Scaling/CompositeImage.vue
+++ b/src/components/Global/Scaling/CompositeImage.vue
@@ -20,9 +20,7 @@ const props = defineProps({
 })
 
 const store = useScalingStore()
-// This isn't currently used by can be used to trigger showing a spinning circular
-// loading icon over the image if we add a debounce to the redraw in the future
-const isLoading = ref(false)
+const isLoading = ref(false) // not being used yet
 const imageCanvas = ref(null)
 var context = null
 
@@ -32,7 +30,12 @@ const ableToDraw = computed(() => {
 
 function redrawImage() {
   if (ableToDraw.value) {
-    context.putImageData(store.scaledImageArrays[props.imageName].combined, 0, 0)
+    const compositeImage = store.scaledImageArrays[props.imageName].combined
+    // convert to ImageBitMap to use drawImage
+    createImageBitmap(compositeImage).then((compositeImageBitMap) => {
+      // scale image to fit canvas
+      context.drawImage(compositeImageBitMap, 0, 0, compositeImageBitMap.width, compositeImageBitMap.height, 0, 0, props.width, props.height)
+    })
   }
 }
 
@@ -51,18 +54,22 @@ watch(
 
 </script>
 <template>
-  <div class="image-container mt-4" :id="'image-container-' + imageName" :style="'max-width: ' + props.width">
-    <canvas ref="imageCanvas" :width="props.width" :height="props.height">
-    </canvas>
-    <v-progress-circular v-show="isLoading" color="primary" size="200" indeterminate></v-progress-circular>
-  </div>
+  <canvas
+    ref="imageCanvas"
+    :width="props.width"
+    :height="props.height"
+  />
+  <v-progress-circular
+    v-show="isLoading"
+    color="primary"
+    size="200"
+    indeterminate
+  />
 </template>
 <style scoped>
-
 .v-progress-circular {
   position:fixed;
   bottom: 40%;
   left: 60%;
 }
-
 </style>
diff --git a/src/components/Global/Scaling/HistogramSlider.vue b/src/components/Global/Scaling/HistogramSlider.vue
index 4b1fb312..ad5f1f53 100644
--- a/src/components/Global/Scaling/HistogramSlider.vue
+++ b/src/components/Global/Scaling/HistogramSlider.vue
@@ -32,22 +32,26 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 65500
-  }
+  },
+  selectedColor: {
+    type: String,
+    required: false,
+    default: 'var(--light-blue)'
+  },
 })
 
 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 backgroundColor = 'var(--light-gray)'
 
 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)
+      gradientArray.push(props.selectedColor)
     }
     else {
       gradientArray.push(backgroundColor)
@@ -141,7 +145,7 @@ watch(
 
 </script>
 <template>
-  <v-row class="ml-4">
+  <v-row class="histogram-range-controls">
     <v-col cols="4">
       <v-text-field
         v-model="scaleRange[0]"
@@ -171,60 +175,52 @@ watch(
     <v-col cols="4">
       <v-btn
         class="ml-2"
-        variant="outlined"
+        color="var(--light-blue)"
         @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-range-slider
-        v-model="sliderRange"
-        class="stackControls"
-        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:model-value="updateScaleRange"
-      >
-        <template #thumb-label="{ modelValue }">
-          {{ labelSliderToScaleValue(modelValue) }}
-        </template>
-      </v-range-slider>
-    </v-sheet>
-  </v-row>
+  <div class="histogram-range-slider">
+    <v-sparkline
+      :smooth="true"
+      :fill="true"
+      line-width="0.1"
+      height="50"
+      :gradient="gradient"
+      gradient-direction="left"
+      :model-value="props.histogram"
+      auto-draw
+    />
+    <v-range-slider
+      v-model="sliderRange"
+      step="1"
+      track-size="0"
+      :track-color="backgroundColor"
+      :track-fill-color="selectedColor"
+      thumb-color="var(--dark-green)"
+      thumb-size="16"
+      :max="props.bins.length-1"
+      strict
+      hide-details
+      @update:model-value="updateScaleRange"
+    >
+      <template #thumb-label="{ modelValue }">
+        {{ labelSliderToScaleValue(modelValue) }}
+      </template>
+    </v-range-slider>
+  </div>
 </template>
 <style scoped>
-
-.stackSheet {
+.histogram-range-slider {
   position: relative;
-  width: 500px;
-  margin-left: 10px;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
-.stackControls {
-  position: absolute;
-  bottom: -6px;
-  left: 5px;
-  width: 473px;
+.v-range-slider {
+  position: relative;
+  bottom: 30px;
 }
-
 </style>
diff --git a/src/components/Global/Scaling/ImageScaler.vue b/src/components/Global/Scaling/ImageScaler.vue
index 75f51444..082b9875 100644
--- a/src/components/Global/Scaling/ImageScaler.vue
+++ b/src/components/Global/Scaling/ImageScaler.vue
@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, defineEmits, defineProps } from 'vue'
 import { useConfigurationStore } from '@/stores/configuration'
 import { fetchApiCall } from '@/utils/api'
+import { filterToColor } from '@/utils/common'
 import RawScaledImage from './RawScaledImage.vue'
 import HistogramSlider from './HistogramSlider.vue'
 
@@ -96,38 +97,42 @@ onMounted(async () => {
 
 </script>
 <template>
-  <div :style="'max-width: ' + props.maxSize">
-    <v-row class="mt-4">
-      <h3 class="image-scale-title">Adjust Scaling for <span class="text-capitalize">{{ titleText }}</span></h3>
-    </v-row>
-    <v-row class="mt-1">
-      <raw-scaled-image
-        :image-data="rawData"
-        :scale-points="sliderRange"
-        :filter="props.image.filter"
-        :image-name="props.imageName"
-        :composite-name="props.compositeName"
-      >
-      </raw-scaled-image>
-    </v-row>
-    <v-row>
-      <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>
+  <v-sheet
+    class="image-scaler"
+    rounded
+  >
+    <raw-scaled-image
+      :max-size="props.maxSize"
+      :image-data="rawData"
+      :scale-points="sliderRange"
+      :filter="props.image.filter"
+      :image-name="props.imageName"
+      :composite-name="props.compositeName"
+    />
+    <v-col>
+      <h3 class="image-scale-title text-capitalize">
+        {{ titleText }}
+      </h3>
+      <histogram-slider
+        :selected-color="filterToColor(props.image.filter)"
+        :histogram="histogram"
+        :bins="bins"
+        :max-value="maxPixelValue"
+        :z-min="zScaleValues[0]"
+        :z-max="zScaleValues[1]"
+        @update-scaling="updateScaleRange"
+      />
+    </v-col>
+  </v-sheet>
 </template>
 <style scoped>
+.image-scaler{
+  display: flex;
+  padding: 1rem;
+  background-color: var(--metal);
+}
 .image-scale-title {
-  width: 100%;
+  margin-bottom: 0.5rem;
   text-align: center;
   color: var(--tan);
   font-weight: bold;
diff --git a/src/components/Global/Scaling/ImageScalingGroup.vue b/src/components/Global/Scaling/ImageScalingGroup.vue
index 21c848f4..682dbef0 100644
--- a/src/components/Global/Scaling/ImageScalingGroup.vue
+++ b/src/components/Global/Scaling/ImageScalingGroup.vue
@@ -1,10 +1,9 @@
 <script setup>
-import { ref, watch, defineEmits, defineProps, computed } from 'vue'
+import { defineEmits, defineProps, computed } from 'vue'
 import CompositeImage from './CompositeImage.vue'
 import ImageScaler from './ImageScaler.vue'
 
 // This component defines a page in the OperationWizard that takes in operation wizard
-// input descriptions and selected input and creates a tab view for all the groupings
 // of input images that you want scaling parameters for.
 
 const props = defineProps({
@@ -18,9 +17,9 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['updateScaling'])
-const tab = ref('rgb')
+const compositeImageMaxWidth = window.innerWidth * 0.4
 
+const emit = defineEmits(['updateScaling'])
 
 const scaleGroupings = computed(() => {
   var scaleGroups = {}
@@ -36,104 +35,54 @@ const scaleGroupings = computed(() => {
   return scaleGroups
 })
 
-watch(
-  () => props.inputDescription, () => {
-    tab.value = Object.keys(scaleGroupings.value)[0]
-  },
-  { immediate: true }
-)
-
 </script>
 <template>
-  <v-card>
-    <v-tabs
-      v-model="tab"
-      class="tabs"
-      next-icon="mdi-arrow-right-bold-box-outline"
-      prev-icon="mdi-arrow-left-bold-box-outline"
-      show-arrows
-    >
-      <v-tab
-        v-for="(groupInputs, groupName) in scaleGroupings"
-        :key="groupName"
-        :value="groupName"
-        class="pr-0 tab"
-      >
-        {{ groupName }}
-      </v-tab>
-    </v-tabs>
-    <v-card-text>
-      <v-tabs-window v-model="tab">
-        <v-tabs-window-item
-          v-for="(groupInputs, groupName) in scaleGroupings"
-          :key="groupName"
-          :value="groupName"
-        >
-            <v-container
-              fluid
-              pa-0
-              class="d-flex flex-column flex-grow-1 fill-parent-height"
-            >
-              <v-row no-gutters>
-                <v-col
-                  cols="6"
-                  class="flex-grow-1 flex-shrink-1 fill-parent-height scaled-images"
-                >
-                  <v-row
-                    v-for="(groupInput, groupInputName ) in groupInputs"
-                    :key="groupName + '-' + groupInputName"
-                    no-gutters
-                  >
-                    <image-scaler
-                      v-if="groupInput"
-                      :image="groupInput"
-                      :image-name="groupInputName"
-                      :composite-name="groupName"
-                      @update-scaling="(imageName, zmin, zmax) => emit('updateScaling', imageName, zmin, zmax)"
-                    />
-                    <v-divider />
-                  </v-row>
-                </v-col>
-                <v-col
-                  v-if="groupName != 'default'"
-                  cols="6"
-                  class="flex-grow-0 flex-shrink-0 fill-parent-height mt-8"
-                >
-                  <v-row no-gutters>
-                    <composite-image
-                      :width="500"
-                      :height="500"
-                      :image-name="groupName"
-                    />
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-container>
-        </v-tabs-window-item>
-      </v-tabs-window>
-    </v-card-text>
-  </v-card>
+  <div
+    v-for="(groupInputs, groupName) in scaleGroupings"
+    :key="groupName"
+    class="image-scaling-group"
+    :value="groupName"
+  >
+    <div class="composite-image-container">
+      <composite-image
+        :width="compositeImageMaxWidth"
+        :height="compositeImageMaxWidth"
+        :image-name="groupName"
+      />
+    </div>
+    <div class="scale-controls">
+      <image-scaler
+        v-for="(groupInput, groupInputName ) in groupInputs"
+        :key="groupName + '-' + groupInputName"
+        :image="groupInput"
+        :image-name="groupInputName"
+        :composite-name="groupName"
+        @update-scaling="(imageName, zmin, zmax) => emit('updateScaling', imageName, zmin, zmax)"
+      />
+    </div>
+  </div>
 </template>
 <style scoped>
-.tab {
-  font-size: 1.2rem;
-  text-decoration: none;
-  color: var(--tan);
-  font-weight: 600;
-  background-color: var(--metal);
+.image-scaling-group{
+  height: 80vh;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
 }
-
-.tabs {
-  background-color: var(--metal);
-  border-bottom: 0.1rem solid var(--tan);
+.composite-image-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-
-.fill-parent-height {
-  height: 100%;
+.scale-controls {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+  min-width: 532px;
 }
-
-.scaled-images {
-  overflow-y: auto;
-  max-height:550px;
+.image-scaler{
+  width: 100%;
 }
 </style>
diff --git a/src/components/Global/Scaling/RawScaledImage.vue b/src/components/Global/Scaling/RawScaledImage.vue
index 3f85142d..0a23bce3 100644
--- a/src/components/Global/Scaling/RawScaledImage.vue
+++ b/src/components/Global/Scaling/RawScaledImage.vue
@@ -78,9 +78,16 @@ watch(
 
 </script>
 <template>
-  <div class="image-container mt-4" :id="'image-container-' + imageName" :style="'max-width: ' + props.maxSize">
-    <canvas ref="imageCanvas" :width="props.maxSize" :height="props.maxSize"></canvas>
-  </div>
+  <canvas
+    ref="imageCanvas"
+    class="raw-scaled-canvas"
+    :width="props.maxSize"
+    :height="props.maxSize"
+  />
 </template>
 <style scoped>
+.raw-scaled-canvas{
+  width: 200px;
+  height: 200px;
+}
 </style>
diff --git a/src/utils/common.js b/src/utils/common.js
index 55d2bec3..69167aba 100644
--- a/src/utils/common.js
+++ b/src/utils/common.js
@@ -27,6 +27,19 @@ const filterToPixelIndex = (filter) => {
   }
 }
 
+const filterToColor = (filter) => {
+  switch (filter) {
+  case 'R': case 'rp':
+    return 'red'
+  case 'V': case 'gp':
+    return 'green'
+  case 'B':
+    return 'blue'
+  default:
+    return 'var(--light-blue)'
+  }
+}
+
 function siteIDToName(siteID) {
   const siteIDMap = {
     'COJ': 'Siding Spring Observatory @ New South Wales',
@@ -54,4 +67,4 @@ function initializeDate(dateString = 'none', defaultOffsetDays = 0) {
   return isNaN(date.getTime()) ? new Date(Date.now() + defaultOffsetDays * 24 * 3600 * 1000) : date
 }
 
-export { calculateColumnSpan, siteIDToName, initializeDate, convertFilter, filterToPixelIndex }
+export { calculateColumnSpan, siteIDToName, initializeDate, convertFilter, filterToPixelIndex, filterToColor }