diff --git a/src/components/DataSession/DataSession.vue b/src/components/DataSession/DataSession.vue
index 2d2d649..ed4a5ce 100644
--- a/src/components/DataSession/DataSession.vue
+++ b/src/components/DataSession/DataSession.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, defineEmits, defineProps, onMounted, watch } from 'vue'
 import OperationPipeline from './OperationPipeline.vue'
-import { fetchApiCall, handleError } from '../../utils/api'
+import { fetchApiCall, handleError, deleteOperation } from '../../utils/api'
 import { calculateColumnSpan } from '@/utils/common'
 import { useConfigurationStore } from '@/stores/configuration'
 import ImageGrid from '../Global/ImageGrid'
@@ -99,11 +99,6 @@ function reconcileFilteredImages() {
   }
 }
 
-function deleteOperation(operationID) {
-  const url = dataSessionsUrl + props.data.id + '/operations/' + operationID + '/'
-  fetchApiCall({ url: url, method: 'DELETE', successCallback: () => {emit('reloadSession')}, failCallback: handleError })
-}
-
 async function addOperation(operationDefinition) {
   const url = dataSessionsUrl + props.data.id + '/operations/'
 
@@ -143,7 +138,6 @@ onMounted(() => {
   <v-container class="d-lg-flex ds-container">
     <v-col
       cols="3"
-      justify="center"
       align="center"
     >
       <!-- The operations bar list goes here -->
@@ -154,7 +148,7 @@ onMounted(() => {
         @operation-completed="addCompletedOperation"
         @select-operation="selectOperation"
         @operation-was-deleted="emit('reloadSession')"
-        @delete-operation="deleteOperation"
+        @delete-operation="(operationID) => deleteOperation(props.data.id, operationID, emit('reloadSession'))"
       />
       <v-btn
         variant="flat"
@@ -188,13 +182,12 @@ onMounted(() => {
   display: flex;
 }
 .addop_button {
-  width: 16rem;
-  height: 4rem;
-  font-size: 1.3rem;
+  font-size: 1rem;
   align-content: center;
   background-color: var(--light-blue);
   font-weight: 700;
-  color: white;
+  color: var(--tan);
   margin-top: 1rem;
+  padding: 25px
 }
 </style>
diff --git a/src/components/DataSession/OperationPipeline.vue b/src/components/DataSession/OperationPipeline.vue
index f51f50b..2fbe9ba 100644
--- a/src/components/DataSession/OperationPipeline.vue
+++ b/src/components/DataSession/OperationPipeline.vue
@@ -90,6 +90,12 @@ function openDeleteOperationDialog(operation) {
   showDeleteDialog.value = true
 }
 
+function itemDeleted(){
+  // Reset the selected operation after its deleted, otherwise the next operation will be selected 
+  selectedOperation.value = -1
+  emit('operationWasDeleted')
+}
+
 watch(() => props.operations, () => {
   if (props.active) {
     props.operations.forEach(operation => {
@@ -167,7 +173,7 @@ onBeforeUnmount(() => {
     v-model="showDeleteDialog"
     :session-id="sessionId"
     :operation-id="deleteOperationId"
-    @item-was-deleted="emit('operationWasDeleted', $event)"
+    @item-was-deleted="itemDeleted()"
   />
 </template>
 
@@ -185,9 +191,8 @@ onBeforeUnmount(() => {
 .operation_button {
   width: 12rem;
   height: 3rem;
-  font-size: 1.2rem;
+  font-size: 1rem;
   font-weight: 600;
-  border-style: none;
   color: var(--metal);
 }
 
diff --git a/src/components/DataSession/OperationWizard.vue b/src/components/DataSession/OperationWizard.vue
index 7a871bb..505a7f5 100644
--- a/src/components/DataSession/OperationWizard.vue
+++ b/src/components/DataSession/OperationWizard.vue
@@ -271,9 +271,7 @@ function selectImage(inputKey, imageIndex) {
             :type="inputDescription.type"
             class="operation-input"
           />
-          <div
-            v-else-if="inputDescription.type == 'file'"
-          >
+          <div v-else-if="inputDescription.type == 'file'">
             <div
               v-if="inputDescription.name"
               class="input-images"
@@ -284,7 +282,6 @@ function selectImage(inputKey, imageIndex) {
               :images="imagesWithFilter(inputDescription.filter)"
               :selected-images="selectedImages[inputKey]"
               :column-span="calculateColumnSpan(images.length, imagesPerRow)"
-              class="wizard-images"
               :allow-selection="true"
               @select-image="selectImage(inputKey, $event)"
             />
@@ -293,17 +290,16 @@ function selectImage(inputKey, imageIndex) {
       </v-card-text>
     </v-slide-y-reverse-transition>
     <v-slide-y-reverse-transition hide-on-leave>
-    <v-card-text
+      <v-card-text
         v-show="page == 'scaling'"
         class="wizard-card"
       >
         <div v-if="isInputComplete">
           <image-scaling-group
-            :inputDescription="selectedOperationInputs"
+            :input-description="selectedOperationInputs"
             :inputs="selectedOperationInput"
             @update-scaling="updateScaling"
-          >
-          </image-scaling-group>
+          />
         </div>
       </v-card-text>
     </v-slide-y-reverse-transition>
@@ -386,12 +382,6 @@ function selectImage(inputKey, imageIndex) {
   font-size: 1.5rem;
   text-transform: uppercase;
 }
-.wizard-images {
-  max-width: 100%;
-  height: auto;
-  box-sizing: border-box;
-  cursor: pointer;
-}
 
 .selected-image {
   border: 0.3rem solid var(--dark-green);
diff --git a/src/components/Global/DeleteDialog.vue b/src/components/Global/DeleteDialog.vue
index 954dee1..5ab4b77 100644
--- a/src/components/Global/DeleteDialog.vue
+++ b/src/components/Global/DeleteDialog.vue
@@ -7,10 +7,6 @@ defineProps({
     type: Boolean,
     required: true
   },
-  showSnackBar: {
-    type: Boolean,
-    required: true
-  },
   dialogTitle: {
     type: String,
     required: true
@@ -70,13 +66,6 @@ function closeDialog() {
       </v-card-actions>
     </v-card>
   </v-dialog>
-  <v-snackbar
-    :model-value="showSnackBar"
-    color="red"
-    :timeout="2000"
-  >
-    Error: Item couldn't be deleted
-  </v-snackbar>
 </template>
 
 <style scoped>
diff --git a/src/components/Global/DeleteOperationDialog.vue b/src/components/Global/DeleteOperationDialog.vue
index 9903726..7e5d6c2 100644
--- a/src/components/Global/DeleteOperationDialog.vue
+++ b/src/components/Global/DeleteOperationDialog.vue
@@ -1,8 +1,6 @@
-<!-- eslint-disable vue/require-prop-types -->
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue'
-import { fetchApiCall } from '../../utils/api'
-import { useConfigurationStore } from '@/stores/configuration'
+import { defineProps, defineEmits } from 'vue'
+import { deleteOperation } from '../../utils/api'
 import DeleteDialog from '@/components/Global/DeleteDialog.vue'
 
 const props = defineProps({
@@ -22,10 +20,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'itemWasDeleted'])
 
-const store = useConfigurationStore()
-
-const showSnackBar = ref(false)
-const dataSessionsUrl = store.datalabApiBaseUrl + 'datasessions/'
 const DIALOG_TITLE = 'DELETE OPERATION'
 const DIALOG_BODY = 'Are you sure you want to delete this Datalab Operation? This is not reversible!'
 
@@ -34,23 +28,16 @@ function itemDeleted(){
   emit('update:modelValue', false)
 }
 
-async function confirmDeleteOperation() {
-  const url = dataSessionsUrl + props.sessionId + '/operations/' + props.operationId + '/'
-  await fetchApiCall({ url: url, method: 'DELETE', successCallback: itemDeleted, failCallback: () => {showSnackBar.value=true} })
-}
-
 </script>
 <template>
   <!-- Shared dialog used to confirm deleting of operations -->
   <delete-dialog
     :model-value="modelValue"
-    @update:model-value="emit('update:modelValue', $event)"
-    :show-snack-bar="showSnackBar"
     :dialog-title="DIALOG_TITLE"
     :dialog-body="DIALOG_BODY"
-    :on-delete="confirmDeleteOperation"
-  >
-  </delete-dialog>
+    :on-delete="() => {deleteOperation(props.sessionId, props.operationId, itemDeleted)}"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
 </template>
 
 <style scoped>
diff --git a/src/components/Global/DeleteSessionDialog.vue b/src/components/Global/DeleteSessionDialog.vue
index 2199bb4..68d7ea2 100644
--- a/src/components/Global/DeleteSessionDialog.vue
+++ b/src/components/Global/DeleteSessionDialog.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/require-prop-types -->
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue'
+import { defineProps, defineEmits } from 'vue'
 import { fetchApiCall } from '../../utils/api'
 import { useConfigurationStore } from '@/stores/configuration'
 import DeleteDialog from '@/components/Global/DeleteDialog.vue'
@@ -20,7 +20,6 @@ const emit = defineEmits(['update:modelValue', 'itemWasDeleted'])
 
 const store = useConfigurationStore()
 
-const showSnackBar = ref(false)
 const dataSessionsUrl = store.datalabApiBaseUrl + 'datasessions/'
 const DIALOG_TITLE = 'DELETE SESSION'
 const DIALOG_BODY = 'Are you sure you want to delete this Datalab Session? This is not reversible!'
@@ -32,7 +31,7 @@ function itemDeleted(){
 
 async function confirmDeleteOperation() {
   const url = dataSessionsUrl + props.sessionId
-  await fetchApiCall({url: url, method: 'DELETE', successCallback: itemDeleted, failCallback: () => {showSnackBar.value=true} })
+  await fetchApiCall({url: url, method: 'DELETE', successCallback: itemDeleted })
 }
 
 </script>
@@ -40,13 +39,11 @@ async function confirmDeleteOperation() {
   <!-- Shared dialog used to confirm deleting of operations -->
   <delete-dialog
     :model-value="modelValue"
-    @update:model-value="emit('update:modelValue', $event)"
-    :show-snack-bar="showSnackBar"
     :dialog-title="DIALOG_TITLE"
     :dialog-body="DIALOG_BODY"
     :on-delete="confirmDeleteOperation"
-  >
-  </delete-dialog>
+    @update:model-value="emit('update:modelValue', $event)"
+  />
 </template>
 
 <style scoped>
diff --git a/src/components/Global/ImageScalingGroup.vue b/src/components/Global/ImageScalingGroup.vue
index cdfbf0e..80b3370 100644
--- a/src/components/Global/ImageScalingGroup.vue
+++ b/src/components/Global/ImageScalingGroup.vue
@@ -59,7 +59,7 @@ watch(
         :value="groupName"
         class="pr-0 tab"
       >
-      {{ groupName }}
+        {{ groupName }}
       </v-tab>
     </v-tabs>
     <v-card-text>
@@ -69,13 +69,21 @@ watch(
           :key="groupName"
           :value="groupName"
         >
-          <v-content style="height:100vh">
-            <v-container fluid pa-0 class="d-flex flex-column flex-grow-1 fill-parent-height">
+          <v-main style="height:100vh">
+            <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 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"
@@ -83,28 +91,29 @@ watch(
                       :image-name="groupInputName"
                       :composite-name="groupName"
                       @update-scaling="(imageName, zmin, zmax) => emit('updateScaling', imageName, zmin, zmax)"
-                    >
-                    </image-scaler>
-                    <v-divider></v-divider>
+                    />
+                    <v-divider />
                   </v-row>
                 </v-col>
-                <v-col cols="6" class="flex-grow-0 flex-shrink-0 fill-parent-height mt-8" v-if="groupName != 'default'">
+                <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
-                      :imageName="groupName"
-                    >
-                    </composite-image>
+                      :width="500"
+                      :height="500"
+                      :image-name="groupName"
+                    />
                   </v-row>
                 </v-col>
               </v-row>
             </v-container>
-          </v-content>
+          </v-main>
         </v-tabs-window-item>
       </v-tabs-window>
     </v-card-text>
-
   </v-card>
 </template>
 <style scoped>
diff --git a/src/components/Project/CreateSessionDialog.vue b/src/components/Project/CreateSessionDialog.vue
index 3a6bb75..195e595 100644
--- a/src/components/Project/CreateSessionDialog.vue
+++ b/src/components/Project/CreateSessionDialog.vue
@@ -69,7 +69,7 @@ async function createNewDataSession(){
 }
 
 function routeToDataSessionView(response){
-  userDataStore.mostRecentSessionId = response.id
+  userDataStore.activeSessionId = response.id
   router.push({ name: 'DataSessionView' })
 }
 
diff --git a/src/stores/userData.js b/src/stores/userData.js
index d63e084..45fae8f 100644
--- a/src/stores/userData.js
+++ b/src/stores/userData.js
@@ -11,7 +11,7 @@ export const useUserDataStore = defineStore('userData', {
       openProposals: [],
       isColorblindMode: false,
       gridToggle: true,
-      mostRecentSessionId: ''
+      activeSessionId: ''
     }
   },
   persist: true,
diff --git a/src/utils/api.js b/src/utils/api.js
index c36f220..cd567e5 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,4 +1,5 @@
 import { useUserDataStore } from '@/stores/userData'
+import { useConfigurationStore } from '@/stores/configuration'
 
 // handles api requests for datasessions with configurable parameters and callback functions
 async function fetchApiCall({ url, method, body = null, header, successCallback = null, failCallback = handleError }) {
@@ -46,5 +47,11 @@ const handleError = (error) => {
   console.error('API call failed with error:', error)
 }
 
+function deleteOperation(sessionId, operationId, successCallback, failCallback = handleError) {
+  const configStore = useConfigurationStore()
+  const url = configStore.datalabApiBaseUrl + 'datasessions/' + sessionId + '/operations/' + operationId + '/'
+  fetchApiCall({ url: url, method: 'DELETE', successCallback: successCallback, failCallback: failCallback })
+}
+
 
-export { fetchApiCall, handleError }
+export { fetchApiCall, handleError, deleteOperation }
diff --git a/src/views/DataSessionsView.vue b/src/views/DataSessionsView.vue
index 1060978..992170f 100644
--- a/src/views/DataSessionsView.vue
+++ b/src/views/DataSessionsView.vue
@@ -11,25 +11,22 @@ const router = useRouter()
 const configurationStore = useConfigurationStore()
 const userDataStore = useUserDataStore()
 const dataSessions = ref([])
-const tab = ref(userDataStore.mostRecentSessionId)
 const deleteSessionId = ref(-1)
 const showDeleteDialog = ref(false)
 const dataSessionsUrl = configurationStore.datalabApiBaseUrl + 'datasessions/'
 
 onMounted(async () => {
+  // display users most recent session by keeping track with activeSessionId
   await loadSessions()
-  if (dataSessions.value.length > 0 && !userDataStore.mostRecentSessionId) {
-    const firstSessionId = dataSessions.value[0].id
-    tab.value = firstSessionId
-    userDataStore.mostRecentSessionId = firstSessionId
-  } else {
+  if (dataSessions.value.length > 0 && !userDataStore.activeSessionId) {
+    userDataStore.activeSessionId = dataSessions.value[0].id
+  } else if (dataSessions.value.length === 0) {
     console.error('no data sessions available to display')
   }
 })
 
 function onTabChange(newSessionId) {
-  tab.value = newSessionId
-  userDataStore.mostRecentSessionId = newSessionId
+  userDataStore.activeSessionId = newSessionId
 }
 
 function openDeleteDialog(id) {
@@ -44,77 +41,65 @@ async function loadSessions() {
 // if tab is not in new data default to displaying first tab
 function updateData(data) {
   dataSessions.value = data.results
-  if (!dataSessions.value.some(ds => ds.id == tab.value)) {
-    tab.value = dataSessions.value[0]?.id
-  }
-}
-
-function tabColor(index) {
-  if (tabActive(index)) {
-    return 'selected'
-  } else {
-    return 'not-selected'
+  if (!dataSessions.value.some(ds => ds.id == userDataStore.activeSessionId)) {
+    userDataStore.activeSessionId = dataSessions.value[0]?.id
   }
 }
 
 function tabActive(index) {
-  if (dataSessions.value[index] && tab.value === dataSessions.value[index].id) {
-    return true
-  } else {
-    return false
-  }
+  // checks if this tabs id is the active session id
+  return dataSessions.value[index] && userDataStore.activeSessionId === dataSessions.value[index].id
 }
 
 </script>
 
 <template>
   <v-container class="d-lg datasession-container">
-    <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
-        @update:model-value="onTabChange"
+    <v-tabs
+      v-model="userDataStore.activeSessionId"
+      class="tabs"
+      next-icon="mdi-chevron-right"
+      prev-icon="mdi-chevron-left"
+      show-arrows
+      center-active
+      @update:model-value="onTabChange"
+    >
+      <v-tab
+        v-for="(ds, index) in dataSessions"
+        :key="ds.id"
+        :value="ds.id"
+        :class="{ selected: tabActive(index) }"
+        class="pr-0 tab"
       >
-        <v-tab
-          v-for="(ds, index) in dataSessions"
-          :key="ds.id"
-          :value="ds.id"
-          :class="tabColor(index)"
-          class="pr-0 tab"
-        >
-          {{ ds.name }}
-          <v-btn
-            variant="plain"
-            size="small"
-            icon="mdi-close"
-            class="tab_button"
-            @click="openDeleteDialog(ds.id)"
-          />
-        </v-tab>
+        {{ ds.name }}
         <v-btn
           variant="plain"
-          icon="mdi-plus-box"
+          size="small"
+          icon="mdi-close"
           class="tab_button"
-          @click="router.push({ name: 'ProjectView' })"
+          @click="openDeleteDialog(ds.id)"
         />
-      </v-tabs>
-      <v-window v-model="tab">
-        <v-window-item
-          v-for="(ds, index) in dataSessions"
-          :key="ds.id"
-          :value="ds.id"
-        >
-          <data-session
-            :data="ds"
-            :active="tabActive(index)"
-            @reload-session="loadSessions()"
-          />
-        </v-window-item>
-      </v-window>
-    </v-card>
+      </v-tab>
+      <v-btn
+        variant="plain"
+        icon="mdi-plus-box"
+        class="tab_button"
+        @click="router.push({ name: 'ProjectView' })"
+      />
+    </v-tabs>
+    <v-window v-model="userDataStore.activeSessionId">
+      <v-window-item
+        v-for="(ds, index) in dataSessions"
+        :key="ds.id"
+        :value="ds.id"
+      >
+        <data-session
+          :data="ds"
+          :active="tabActive(index)"
+          @reload-session="loadSessions()"
+        />
+      </v-window-item>
+    </v-window>
     <delete-session-dialog
       v-model="showDeleteDialog"
       :session-id="deleteSessionId"
@@ -148,10 +133,6 @@ function tabActive(index) {
   color: white;
 }
 
-.not-selected {
-  background-color: var(--metal);
-}
-
 @media (max-width: 1200px) {
   .datasession-container {
     width: 85vw;