diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index ca1e8a32f..9f8e804b2 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -1,9 +1,28 @@
 <template>
-  <NavBar class="fixed-top" style="z-index: 999;" />
-  <main :class="isMobile ? 'q-ma-md' : 'q-ma-xl'" style="margin-top: 75px;">
+  <q-layout view="hHh lpR fFf">
+
+    <q-header>
+      <NavBar />
+    </q-header>
+
+    <q-drawer v-model="store.showRightDrawer" side="right" bordered :width="240">
+      <SnapshotList />
+    </q-drawer>
+
+    <q-page-container>
+      <div
+        :class="isMobile ? 'q-ma-md' : 'q-ma-xl'" 
+        :style="{ 'margin-top': isMobile ? '10px' : '25px', height: '100' }"
+      >
+        <router-view />
+      </div>
+    </q-page-container>
+
+  </q-layout>
+
+  <!-- <main :class="isMobile ? 'q-ma-md' : 'q-ma-xl'" style="margin-top: 75px;">
     <RouterView />
-  </main>
-  <!-- <AccessibilityTest /> -->
+  </main> -->
 </template>
 
 <script setup lang="ts">
@@ -11,12 +30,20 @@
   import NavBar from '@/components/NavBar.vue'
   import AccessibilityTest from '@/components/AccessibilityTest.vue'
   import { useQuasar } from 'quasar'
-  import { computed, provide } from 'vue'
+  import { computed, provide, watch } from 'vue'
+  import { useLoginStore } from '@/stores/LoginStore'
+  import SnapshotList from './components/SnapshotList.vue'
+
+  const store = useLoginStore()
   
   const route = useRoute()
 
   const $q = useQuasar()
 
+  const isExtraSmall = computed(() => {
+    return $q.screen.xs
+  })
+
   const isMobile = computed(() => {
     return $q.screen.sm || $q.screen.xs
   })
@@ -27,5 +54,14 @@
   
   provide('isMobile', isMobile)
   provide('isMedium', isMedium)
+  provide('isExtraSmall', isExtraSmall)
+
+  watch(route, (to) => {
+    // on every route change, close snapshot drawer if open
+    if(store.showRightDrawer) {
+      store.showRightDrawer = false
+      store.selectedSnapshot = null
+    }
+  })
 
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/assets/main.css b/src/frontend/src/assets/main.css
index d33396368..50bfefca1 100644
--- a/src/frontend/src/assets/main.css
+++ b/src/frontend/src/assets/main.css
@@ -110,6 +110,7 @@ h1 {
   font-size: clamp(1rem, 10vw, 4rem) !important;
   line-height: 1 !important;
   font-weight: 400 !important;
+  margin-top: 0;
 }
 
 h2 {
@@ -120,7 +121,7 @@ h2 {
 
 .field-label {
   width: 100px;
-  font-size: 1rem;
+  font-size: .6em;
   color: black;
 }
 
diff --git a/src/frontend/src/components/SnapshotList.vue b/src/frontend/src/components/SnapshotList.vue
new file mode 100644
index 000000000..3f9b5ff02
--- /dev/null
+++ b/src/frontend/src/components/SnapshotList.vue
@@ -0,0 +1,106 @@
+<template>
+  <TableComponent
+    :rows="snapshots"
+    :columns="columns"
+    v-model:selected="selected"
+    :title="props.maxHeight ? '' : 'Snapshots'"
+    :hideCreateBtn="true"
+    :hideDeleteBtn="true"
+    :hideEditBtn="true"
+    :hideSearch="true"
+    :disableRadio="true"
+    rowKey="snapshot"
+    :showAll="true"
+    :style="{ 
+      marginTop: '0', 
+      maxHeight: props.maxHeight ? props.maxHeight + 'px' : '',
+      height: props.maxHeight ? '' : 'calc(100vh - 50px)'
+    }"
+  >
+    <template #body-cell-timestamp="props">
+      {{
+        new Intl.DateTimeFormat('en-US', { 
+          year: '2-digit', 
+          month: '2-digit', 
+          day: '2-digit', 
+          hour: 'numeric', 
+          minute: 'numeric', 
+          hour12: true 
+        }).format(new Date(props.row.snapshotCreatedOn))
+      }}
+      <q-chip
+        v-if="props.row.latestSnapshot"
+        label="latest"
+        size="md"
+        dense
+        color="orange"
+        text-color="white"
+      />
+    </template>
+  </TableComponent>
+</template>
+
+<script setup>
+import { useLoginStore } from '@/stores/LoginStore'
+import { useRoute } from 'vue-router'
+import TableComponent from '@/components/TableComponent.vue'
+import { ref, watch } from 'vue'
+import * as api from '@/services/dataApi'
+
+const props = defineProps(['showDialogHistory', 'type', 'id', 'maxHeight'])
+
+const store = useLoginStore()
+const route = useRoute()
+
+const snapshots = ref([])
+const selected = ref([])
+
+async function getSnapshots() {
+  try {
+    const res = await api.getSnapshots(route.meta.type, route.params.id)
+    snapshots.value = res.data.data.reverse()
+    console.log('snapshots = ', snapshots.value)
+  } catch(err) {
+    console.warn(err)
+  }
+}
+
+async function getDialogSnapshots() {
+  try {
+    const res = await api.getSnapshots(props.type, props.id)
+    snapshots.value = res.data.data.reverse()
+    console.log('snapshots = ', snapshots.value)
+  } catch(err) {
+    console.warn(err)
+  }
+}
+
+watch(() => store.showRightDrawer, (history) => {
+  if(history) {
+    getSnapshots()
+  } else {
+    store.selectedSnapshot = null
+  }
+})
+
+watch(() => props.showDialogHistory, (history) => {
+  if(history) {
+    getDialogSnapshots()
+  } else {
+    store.selectedSnapshot = null
+  }
+})
+
+watch(selected, (newVal) => {
+  if(newVal.length > 0) {
+    store.selectedSnapshot = newVal[0]
+  }
+})
+
+const columns = [
+  { name: 'timestamp', label: 'Created On', align: 'left', field: 'snapshotCreatedOn', sortable: true, },
+]
+
+
+
+</script>
\ No newline at end of file
diff --git a/src/frontend/src/components/TableComponent.vue b/src/frontend/src/components/TableComponent.vue
index 737b89cfa..5c9cbd721 100644
--- a/src/frontend/src/components/TableComponent.vue
+++ b/src/frontend/src/components/TableComponent.vue
@@ -7,14 +7,16 @@
     :filter="filter"
     selection="single"
     v-model:selected="selected"
-    row-key="id"
-    :class="`q-mt-lg ${isMobile ? '' : '' }`"
+    :row-key="props.rowKey"
+    :class="'q-mt-lg'"
     flat
     bordered
     dense
     v-model:pagination="pagination"
     @request="onRequest"
-    :rows-per-page-options="[5,10,15,20,25,50,0]"
+    :tabindex="props.disableSelect ? '' : '0'"
+    @keydown="keydown"
+    :rows-per-page-options="props.showAll ? [0] : [5,10,15,20,25,50,0]"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -29,11 +31,12 @@
         :class="`${getSelectedColor(props.selected)} cursor-pointer` " 
         :props="props"
         @click="handleClick(props)"
+        style="padding-left: 50px;"
       >
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <q-radio 
             v-model="radioSelected" 
-            :val="props.row.id"
+            :val="props.row[props.rowKey || 'id']"
             v-if="col.name === 'radio'" 
             @click="handleClick(props)"
           />
@@ -165,19 +168,25 @@
   
   const isMobile = inject('isMobile')
 
-  const props = defineProps([
-    'columns', 
-    'rows', 
-    'title', 
-    'showExpand',
-    'hideCreateBtn',
-    'hideEditBtn', 
-    'hideDeleteBtn', 
-    'showToggleDraft', 
-    'hideSearch', 
-    'disableSelect', 
-    'rightCaption'
-  ])
+  const props = defineProps({
+  columns: Array,
+  rows: Array,
+  title: String,
+  showExpand: Boolean,
+  hideCreateBtn: Boolean,
+  hideEditBtn: Boolean,
+  hideDeleteBtn: Boolean,
+  showToggleDraft: Boolean,
+  hideSearch: Boolean,
+  disableSelect: Boolean,
+  rightCaption: String,
+  showAll: Boolean,
+  disableRadio: Boolean,
+  rowKey: {
+    type: String,
+    default: 'id'
+  },
+})
   const emit = defineEmits([
     'edit', 
     'delete', 
@@ -189,7 +198,7 @@
 
   const finalColumns = computed(() => {
     let defaultColumns = [ ...props.columns ]
-    if(!props.disableSelect) {
+    if(!props.disableSelect  && !props.disableRadio) {
       defaultColumns.unshift({ name: 'radio', align: 'center', sortable: false, label: 'Select', headerStyle: 'width: 100px' })
     }
     if(props.showExpand) {
@@ -221,26 +230,36 @@
 
   function handleClick(tableProps) {
     if(props.disableSelect) return
-    tableProps.selected = !tableProps.selected
-    radioSelected.value = tableProps.row.id
+    // tableProps.selected = !tableProps.selected
+    tableProps.selected = true
+    radioSelected.value = tableProps.row[props.rowKey]
   }
 
   watch(selected, (newVal) => {
     if(newVal.length === 0) radioSelected.value = ''
   })
 
+  watch(() => props.rows, (newVal) => {
+    // when viewing history, auto select first (latest) row
+    if (newVal.length > 0 && props.rowKey === 'snapshot') {
+      if (tableRef.value && newVal[0]) {
+        selected.value = [newVal[0]]
+      }
+    }
+  }, { deep: true })
+
   watch(showDrafts, (newVal, oldVal) => {
     if(newVal !== oldVal) selected.value = []
   })
 
   function getSelectedColor(selected) {
     if(darkMode.value && selected) return 'bg-deep-purple-10'
-    else if(selected) return 'bg-blue-grey-1'
+    // else if(selected) return 'bg-blue-grey-1'
   }
 
   const pagination = ref({
     page: 1,
-    rowsPerPage: 15,
+    rowsPerPage: props.showAll ? 0 : 15,
     sortBy: '',
     descending: false,
   })
@@ -281,4 +300,28 @@
     return new Date(dateString).toLocaleString('en-US', options)
   }
 
+  function keydown(event) {
+  // Ensure there are rows to navigate
+  if (!props.rows || props.rows.length === 0) return;
+
+  // Get the current index of the selected row
+  const currentIndex = props.rows.findIndex(row => row[props.rowKey] === selected.value[0]?.[props.rowKey])
+
+  if (event.key === 'ArrowUp') {
+    // Navigate to the previous row (if not at the first row)
+    if (currentIndex > 0) {
+      const prevRow = props.rows[currentIndex - 1]
+      selected.value = [prevRow]
+      radioSelected.value = prevRow[props.rowKey]
+    }
+  } else if (event.key === 'ArrowDown') {
+    // Navigate to the next row (if not at the last row)
+    if (currentIndex < props.rows.length - 1) {
+      const nextRow = props.rows[currentIndex + 1]
+      selected.value = [nextRow]
+      radioSelected.value = nextRow[props.rowKey]
+    }
+  }
+}
+
 </script>
diff --git a/src/frontend/src/dialogs/DialogComponent.vue b/src/frontend/src/dialogs/DialogComponent.vue
index a16a7487c..a537065fc 100644
--- a/src/frontend/src/dialogs/DialogComponent.vue
+++ b/src/frontend/src/dialogs/DialogComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <q-dialog v-model="showDialog" aria-labelledby="modalTitle" :persistent="persistent">
-    <q-card flat style="min-width: 500px; max-width: 80%;">
+    <q-card flat :style="{ 'min-width': isMedium ? '50%' : '30%' }">
       <q-form @submit="$emit('emitSubmit')">
         <q-card-section class="bg-primary text-white q-mb-md">
           <div class="text-h6 row justify-between">
@@ -37,11 +37,13 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { inject } from 'vue'
   const showDialog = defineModel('showDialog')
   defineEmits(['emitSubmit', 'emitCancel', 'emitSaveDraft'])
   const props = defineProps(['hideDraftBtn', 'persistent', 'showHistoryToggle', 'disableConfirm'])
 
   const history = defineModel('history')
 
+  const isMedium = inject('isMedium')
+
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/dialogs/LeaveFormDialog.vue b/src/frontend/src/dialogs/LeaveFormDialog.vue
index fa86288d4..26b18089c 100644
--- a/src/frontend/src/dialogs/LeaveFormDialog.vue
+++ b/src/frontend/src/dialogs/LeaveFormDialog.vue
@@ -4,7 +4,9 @@
     @emitSubmit="$emit('leaveForm')"
     :hideDraftBtn="true"
   >
-    <template #title>Leave <span class="text-capitalize">{{ type }}</span> Form?</template>
+    <template #title>
+      <span class="text-capitalize">Leave {{ type }} Form?</span>
+    </template>
     <q-card-section class="q-pt-none">
       You are about to leave the {{ type }} form and have unsaved changes. <br>
       All changes will be lost.  Continue?
diff --git a/src/frontend/src/dialogs/QueueDialog.vue b/src/frontend/src/dialogs/QueueDialog.vue
index 8c565743d..a8736e85c 100644
--- a/src/frontend/src/dialogs/QueueDialog.vue
+++ b/src/frontend/src/dialogs/QueueDialog.vue
@@ -13,128 +13,84 @@
         {{editQueue ? 'Edit Queue' : 'Register Queue'}}
       </label>
     </template>
-    <div class="row no-wrap">
+    <div class="row">
       <!-- this is the form col -->
-      <div 
-        style="width: 500px;"
+      <div
+        :class="`${isExtraSmall ? 'col-12 q-mb-md' : 'col'}`"
         :style="{ 
           pointerEvents: history ? 'none' : 'auto', 
           opacity: history ? .65 : 1, 
           cursor: history ? 'not-allowed' : 'default' 
         }"
+        ref="formCol"
       >
-        <div class="row items-center">
-          <label class="col-3 q-mb-lg" id="queueName">
-            Queue Name:
-          </label>
-          <q-input 
-            class="col q-mb-xs" 
-            outlined 
-            dense 
-            v-model.trim="name"  
-            autofocus 
-            :rules="[requiredRule]" 
-            aria-labelledby="queueName"
-            aria-required="true"
-          />
-        </div>
-        <div class="row items-center q-mb-xs">
-          <label class="col-3 q-mb-lg" id="pluginGroup">
-            Group:
-          </label>
-          <q-select
-            class="col"
-            outlined 
-            v-model="group" 
-            :options="store.groups"
-            option-label="name"
-            option-value="id"
-            emit-value
-            map-options
-            dense
-            :rules="[requiredRule]"
-            aria-labelledby="pluginGroup"
-            aria-required="true"
-          />
-        </div>
-        <div class="row items-center">
-          <label class="col-3" id="description">
-            Description:
-          </label>
-          <q-input
-            class="col"
-            v-model.trim="description"
-            outlined
-            type="textarea"
-            aria-labelledby="description"
-          />
-        </div>
-        <!-- <q-inner-loading :showing="history" size="0px" /> -->
+        <q-input 
+          class="q-mb-xs" 
+          outlined 
+          dense 
+          v-model.trim="name"  
+          autofocus 
+          :rules="[requiredRule]" 
+          id="queueName"
+          aria-required="true"
+        >
+          <template #before>
+            <label for="queueName" class="field-label">Queue Name:</label>
+          </template>
+        </q-input>
+        <q-select
+          class="q-mb-xs"
+          outlined 
+          v-model="group" 
+          :options="store.groups"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          dense
+          :rules="[requiredRule]"
+          id="pluginGroup"
+          aria-required="true"
+        >
+          <template #before>
+            <label for="pluginGroup" class="field-label">Group:</label>
+          </template>
+        </q-select>
+        <q-input
+          v-model.trim="description"
+          outlined
+          type="textarea"
+          id="description"
+          dense
+        >
+          <template #before>
+            <label for="description" class="field-label">Description:</label>
+          </template>
+        </q-input>
       </div>
       <!-- this is the history col -->
-      <q-card 
-        v-if="history" 
-        style="width: 240px; max-height: 263px; overflow: auto;"
-        flat
-        bordered
-        class="q-ml-sm col"
-      >
-        <q-list bordered separator>
-          <q-item
-            v-for="(snapshot, i) in snapshots"
-            tag="label" 
-            v-ripple
-            dense
-            clickable
-            @click="loadSnapshot(snapshot, i)"
-            @keydown="keydown"
-            :class="`${getSelectedColor(selectedSnapshotIndex === i)} cursor-pointer` " 
-          >
-            <!-- <q-item-section avatar>
-              <q-radio
-                v-model="selectedSnapshot"
-                :val="snapshot"
-                @update:model-value="loadSnapshot(snapshot)"
-              />
-            </q-item-section> -->
-            <q-item-section>
-              <q-item-label>
-                {{
-                  new Intl.DateTimeFormat('en-US', { 
-                    year: '2-digit', 
-                    month: '2-digit', 
-                    day: '2-digit', 
-                    hour: 'numeric', 
-                    minute: 'numeric', 
-                    hour12: true 
-                  }).format(new Date(snapshot.snapshotCreatedOn))
-                }}
-                <q-chip
-                  v-if="snapshot.latestSnapshot"
-                  label="latest"
-                  size="md"
-                  dense
-                  color="orange"
-                  text-color="white"
-                />
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
+      <SnapshotList 
+        v-show="history"
+        :showDialogHistory="history"
+        type="queues"
+        :id="props.editQueue.id"
+        :maxHeight="formCol?.clientHeight"
+        :class="`${isExtraSmall ? 'col-12' : 'col-sm-auto q-ml-md'}`"
+      />
     </div>
   </DialogComponent>
 </template>
 
 <script setup>
-  import { ref, watch, computed } from 'vue'
+  import { ref, watch, inject } from 'vue'
   import DialogComponent from './DialogComponent.vue'
   import { useLoginStore } from '@/stores/LoginStore.ts'
-  import * as api from '@/services/dataApi'
-  import { useQuasar } from 'quasar'
+  import SnapshotList from '../components/SnapshotList.vue'
 
   const store = useLoginStore()
 
+  const isExtraSmall = inject('isExtraSmall')
+
   const props = defineProps(['editQueue'])
   const emit = defineEmits(['addQueue', 'updateQueue', 'saveDraft'])
 
@@ -148,13 +104,6 @@
   const group = ref('')
   const description = ref('')
 
-  function loadSnapshot(snapshot, index) {
-    selectedSnapshotIndex.value = index
-    name.value = snapshot.name
-    group.value = snapshot.group
-    description.value = snapshot.description
-  }
-
   watch(showDialog, (newVal) => {
     if(newVal) {
       name.value = props.editQueue.name
@@ -165,7 +114,6 @@
       name.value = ''
       description.value = ''
       history.value = false
-      snapshots.value = []
     }
   })
 
@@ -189,57 +137,18 @@
 
   const history = ref(false)
 
-  const snapshots = ref([])
-  const selectedSnapshot = ref()
-  const selectedSnapshotIndex = ref()
-
-  async function getSnapshots() {
-    try {
-      const res = await api.getSnapshots('queues', props.editQueue.id)
-      snapshots.value = res.data.data.reverse()
-      selectedSnapshot.value = snapshots.value[0]
-      selectedSnapshotIndex.value = 0
-      loadSnapshot(snapshots.value[0], 0)
-    } catch(err) {
-      console.warn(err)
-    }
-  }
-
-  watch(history, (newVal) => {
+  watch(() => store.selectedSnapshot, (newVal) => {
     if(newVal) {
-      getSnapshots()
+      name.value = newVal.name
+      group.value = newVal.group
+      description.value = newVal.description
     } else {
-      selectedSnapshotIndex.value = 0
       name.value = props.editQueue.name
-      description.value = props.editQueue.description
       group.value = props.editQueue.group
+      description.value = props.editQueue.description
     }
   })
 
-  const $q = useQuasar()
-
-  const darkMode = computed(() => {
-    if($q.dark.mode === 'auto') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches
-    }
-    return $q.dark.mode
-  })
-
-  function getSelectedColor(selected) {
-    if(darkMode.value && selected) return 'bg-deep-purple-10'
-    else if(selected) return 'bg-blue-grey-2'
-  }
-
-  function keydown(event) {
-    if(event.key === 'ArrowUp' && selectedSnapshotIndex.value > 0) {
-      const newIndex = selectedSnapshotIndex.value - 1
-      loadSnapshot(snapshots.value[newIndex], newIndex)
-    }
-    else if(event.key === 'ArrowDown' && selectedSnapshotIndex.value < snapshots.value.length - 1) {
-      const newIndex = selectedSnapshotIndex.value + 1
-      loadSnapshot(snapshots.value[newIndex], newIndex)
-    }
-  }
-
+  const formCol = ref()
 
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/router/index.ts b/src/frontend/src/router/index.ts
index b7d16b2bd..7a3b15ff9 100644
--- a/src/frontend/src/router/index.ts
+++ b/src/frontend/src/router/index.ts
@@ -54,7 +54,8 @@ const router = createRouter({
     },
     {
       path: '/experiments/:id',
-      component: () => import('../views/CreateExperiment.vue')
+      component: () => import('../views/CreateExperiment.vue'),
+      meta: { type: 'experiments' }
     },
     {
       path: '/groups',
diff --git a/src/frontend/src/stores/LoginStore.ts b/src/frontend/src/stores/LoginStore.ts
index 8e0bcd6f7..42e6ec350 100644
--- a/src/frontend/src/stores/LoginStore.ts
+++ b/src/frontend/src/stores/LoginStore.ts
@@ -44,11 +44,13 @@ export const useLoginStore = defineStore('login', () => {
     files: {},
   })
   
+  const showRightDrawer = ref(false)
+  const selectedSnapshot = ref()
 
   // computed()'s are getters
 
   // function()'s are actions
   
 
-  return { loggedInUser, loggedInGroup, groups, users, savedForms };
+  return { loggedInUser, loggedInGroup, groups, users, savedForms, showRightDrawer, selectedSnapshot };
 })
\ No newline at end of file
diff --git a/src/frontend/src/views/CreateExperiment.vue b/src/frontend/src/views/CreateExperiment.vue
index 7a959594c..1bb1c231c 100644
--- a/src/frontend/src/views/CreateExperiment.vue
+++ b/src/frontend/src/views/CreateExperiment.vue
@@ -1,8 +1,25 @@
 <template>
-  <PageTitle 
-    :title="title"
-  />
-  <div :class="`row ${isMedium ? '' : 'q-mx-xl'} q-my-lg`">
+  <div class="row">
+    <div>
+      <PageTitle 
+        :title="title"
+      />
+    </div>
+    <q-chip
+      v-if="route.params.id !== 'new'"
+      style="margin-top: 28px;"
+      class="q-ml-lg"
+    >
+      <q-toggle
+        v-model="store.showRightDrawer"
+        left-label
+        label="View History"
+        color="orange"
+      />
+    </q-chip>
+  </div>
+
+  <div :class="`row q-my-lg`">
     <div :class="`${isMobile ? 'col-12' : 'col-5'} q-mr-xl`">
       <fieldset>
         <legend>Basic Info</legend>
@@ -15,6 +32,7 @@
               :rules="[requiredRule]"
               class="q-mb-sm q-mt-md"
               aria-required="true"
+              :disable="history"
             >
               <template v-slot:before>
                 <label :class="`field-label`">Name:</label>
@@ -31,6 +49,7 @@
               dense
               :rules="[requiredRule]"
               aria-required="true"
+              :disable="history"
             >
               <template v-slot:before>
                 <div class="field-label">Group:</div>
@@ -42,6 +61,7 @@
               v-model.trim="experiment.description"
               class="q-mb-sm q-mt-sm"
               type="textarea"
+              :disable="history"
             >
               <template v-slot:before>
                 <label :class="`field-label`">Description:</label>
@@ -51,10 +71,11 @@
         </div>
       </fieldset>
     </div>
-    <fieldset :class="`${isMobile ? 'col-12 q-mt-lg' : 'col'}`">
+    <fieldset :class="`${isMobile ? 'col-12 q-mt-lg' : 'col'}`" :disabled="history">
       <legend>Entrypoint</legend>
       <div class="q-ma-lg">
         <q-select
+          v-if="!history"
           outlined
           dense
           v-model="experiment.entrypoints"
@@ -68,24 +89,36 @@
           :options="entrypoints"
           @filter="getEntrypoints"
           class="q-mb-md"
+          :disable="history"
         >
           <template v-slot:before>
             <div class="field-label">Entrypoints:</div>
           </template>  
         </q-select>
 
-        <q-btn 
+        <q-btn
+          v-if="!history"
           color="primary"
           icon="add"
           label="Create new Entry Point"
           class="q-mt-lg"
           @click="router.push('/entrypoints/new')" 
         />
+
+        <div class="row items-center" v-if="history">
+          <q-icon
+            name="sym_o_info"
+            size="2.5em"
+            color="grey"
+            class="q-mr-sm"
+          />
+          <caption>Entrypoints are not part of Experiment snapshots</caption>
+        </div>
       </div>
     </fieldset>
   </div>
 
-  <div :class="`${isMobile ? '' : 'q-mx-xl'} float-right q-mb-lg`">
+  <div :class="`float-right`">
       <q-btn  
         to="/experiments"
         color="negative" 
@@ -97,6 +130,7 @@
         @click="submit()" 
         color="primary" 
         label="Submit Experiment"
+        :disable="history"
       />
     </div>
 
@@ -273,7 +307,7 @@
 
   onBeforeRouteLeave((to, from, next) => {
     toPath.value = to.path
-    if(confirmLeave.value || !valuesChanged.value) {
+    if(confirmLeave.value || !valuesChanged.value || history.value) {
       next(true)
     } else if(route.params.id === 'new') {
       leaveForm()
@@ -303,4 +337,20 @@
     router.push(toPath.value)
   }
 
+  const history = computed(() => {
+    return store.showRightDrawer
+  })
+
+  watch(() => store.selectedSnapshot, (newVal) => {
+    if(newVal) {
+      experiment.value = {
+        name: newVal.name,
+        group: newVal.group,
+        description: newVal.description
+      }
+    } else {
+      getExperiment()
+    }
+  })
+
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/views/CreateJob.vue b/src/frontend/src/views/CreateJob.vue
index e893dca98..a3070b45f 100644
--- a/src/frontend/src/views/CreateJob.vue
+++ b/src/frontend/src/views/CreateJob.vue
@@ -193,7 +193,7 @@
     </fieldset>
   </div>
 
-  <div :class="`${isMobile ? '' : 'q-mx-xl'} float-right q-mb-lg`">
+  <div :class="`float-right q-mb-lg`">
       <q-btn  
         :to="expJobOrAllJobs === 'allJobs' ? `/jobs` : `/experiments/${route.params.id}/jobs`"
         color="negative"