diff --git a/package-lock.json b/package-lock.json
index 8c390df..34f02b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "datalab",
       "version": "0.1.0",
       "dependencies": {
-        "@geoman-io/leaflet-geoman-free": "^2.16.0",
+        "@geoman-io/leaflet-geoman-free": "^2.17.0",
         "@mdi/font": "5.9.55",
         "core-js": "^3.8.3",
         "d3": "^7.9.0",
@@ -1934,16 +1934,17 @@
       }
     },
     "node_modules/@geoman-io/leaflet-geoman-free": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.16.0.tgz",
-      "integrity": "sha512-BnKAAoTXraWVFfhX/0gT/iBgAz1BPfpbdQ9dJamEFI4lIku9UNXXluu/E0k7YkZETq0tENX2GPnKLB4p+VgrSw==",
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.17.0.tgz",
+      "integrity": "sha512-vAY9tKB2I/Ui8d3QUBuebWnunI2sGjsfAUTXMMcf5UpISvPz67io4hpbKXid9GNsW6P4LGv1+ZzrmkpM78GzHA==",
+      "license": "MIT",
       "dependencies": {
         "@turf/boolean-contains": "^6.5.0",
         "@turf/kinks": "^6.5.0",
         "@turf/line-intersect": "^6.5.0",
         "@turf/line-split": "^6.5.0",
         "lodash": "4.17.21",
-        "polygon-clipping": "0.15.3"
+        "polyclip-ts": "^0.16.5"
       },
       "peerDependencies": {
         "leaflet": "^1.2.0"
@@ -4045,6 +4046,15 @@
         "node": "*"
       }
     },
+    "node_modules/bignumber.js": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.1.2.tgz",
+      "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -9782,12 +9792,14 @@
         "node": ">=8"
       }
     },
-    "node_modules/polygon-clipping": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/polygon-clipping/-/polygon-clipping-0.15.3.tgz",
-      "integrity": "sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg==",
+    "node_modules/polyclip-ts": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/polyclip-ts/-/polyclip-ts-0.16.6.tgz",
+      "integrity": "sha512-/s1uKSup6qttXN4EaeRkE2SUkcwm72ZYMhHZH3MkJnBzgTGx1RHruawg15DBefwXqXA5f2Pz/HTXpRLHOjAEIw==",
+      "license": "MIT",
       "dependencies": {
-        "splaytree": "^3.1.0"
+        "bignumber.js": "^9.1.0",
+        "splaytree-ts": "^1.0.1"
       }
     },
     "node_modules/portfinder": {
@@ -11722,10 +11734,11 @@
         "wbuf": "^1.7.3"
       }
     },
-    "node_modules/splaytree": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz",
-      "integrity": "sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A=="
+    "node_modules/splaytree-ts": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/splaytree-ts/-/splaytree-ts-1.0.1.tgz",
+      "integrity": "sha512-B+VzCm33/KEchi/fzT6/3NRHm8k5+Kf37SBQO3meHHS/tK2xBnIm4ZvusQ1wUpHgKMCCqEWgXnwFXAa1nD289g==",
+      "license": "BDS-3-Clause"
     },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
diff --git a/package.json b/package.json
index a3c6528..393e563 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@geoman-io/leaflet-geoman-free": "^2.16.0",
+    "@geoman-io/leaflet-geoman-free": "^2.17.0",
     "@mdi/font": "5.9.55",
     "core-js": "^3.8.3",
     "d3": "^7.9.0",
diff --git a/src/assets/images/delete.svg b/src/assets/images/delete.svg
new file mode 100644
index 0000000..21c80c2
--- /dev/null
+++ b/src/assets/images/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>
\ No newline at end of file
diff --git a/src/assets/images/resize.svg b/src/assets/images/resize.svg
new file mode 100644
index 0000000..59d65b7
--- /dev/null
+++ b/src/assets/images/resize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.59,12L14.59,8H11V6H18V13H16V9.41L12,13.41V16H20V4H8V12H10.59M22,2V18H12V22H2V12H6V2H22M10,14H4V20H10V14Z" /></svg>
\ No newline at end of file
diff --git a/src/assets/images/stock-vector-arrows-of-four-directions-linear-icon-black-symbol-on-transparent-background-1277674303.png b/src/assets/images/stock-vector-arrows-of-four-directions-linear-icon-black-symbol-on-transparent-background-1277674303.png
deleted file mode 100644
index 09d4f2d..0000000
Binary files a/src/assets/images/stock-vector-arrows-of-four-directions-linear-icon-black-symbol-on-transparent-background-1277674303.png and /dev/null differ
diff --git a/src/assets/images/vector-line.svg b/src/assets/images/vector-line.svg
new file mode 100644
index 0000000..84168af
--- /dev/null
+++ b/src/assets/images/vector-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15,3V7.59L7.59,15H3V21H9V16.42L16.42,9H21V3M17,5H19V7H17M5,17H7V19H5" /></svg>
\ No newline at end of file
diff --git a/src/assets/images/vector-polyline-edit.svg b/src/assets/images/vector-polyline-edit.svg
new file mode 100644
index 0000000..0a9161a
--- /dev/null
+++ b/src/assets/images/vector-polyline-edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3V9H4.95L6.95 15H6V21H12V16.41L17.41 11H22V5H16V9.57L10.59 15H9.06L7.06 9H8V3H2M4 5H6V7H4V5M18 7H20V9H18V7M21.15 13C21 13 20.87 13.05 20.76 13.16L19.75 14.18L21.82 16.25L22.84 15.24C23.05 15.03 23.05 14.67 22.84 14.46L21.54 13.16C21.43 13.05 21.29 13 21.15 13M19.15 14.76L13 20.91V23H15.09L21.23 16.84L19.15 14.76M8 17H10V19H8V17Z" /></svg>
\ No newline at end of file
diff --git a/src/components/Project/ImageAnalysis/ImageAnalyzer.vue b/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
index a70c321..159c792 100644
--- a/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
+++ b/src/components/Project/ImageAnalysis/ImageAnalyzer.vue
@@ -75,23 +75,22 @@ function handleAnalysisOutput(response, action, action_callback){
 }
 
 function showHeaderDialog() {
-
   if(headerData.value && Object.keys(headerData.value).length > 0) {
     headerDialog.value = true
-    return
   }
-
-  const archiveHeadersUrl = configStore.datalabArchiveApiUrl + 'frames/' + props.image.id + '/headers/'
-  fetchApiCall({url: archiveHeadersUrl, method: 'GET', 
-    successCallback: (response) => {
-      headerData.value = response.data
-      headerDialog.value = true
-    },
-    failCallback: (error) => {
-      console.error('Failed to fetch headers:', error)
-      alertsStore.setAlert('error', `Could not fetch headers for frame ${props.image.id}`)
-    }
-  })
+  else{
+    const archiveHeadersUrl = configStore.datalabArchiveApiUrl + 'frames/' + props.image.id + '/headers/'
+    fetchApiCall({url: archiveHeadersUrl, method: 'GET', 
+      successCallback: (response) => {
+        headerData.value = response.data
+        headerDialog.value = true
+      },
+      failCallback: (error) => {
+        console.error('Failed to fetch headers:', error)
+        alertsStore.setAlert('error', `Could not fetch headers for frame ${props.image.id}`)
+      }
+    })
+  }
 }
 
 </script>
@@ -134,20 +133,25 @@ function showHeaderDialog() {
           <v-sheet
             v-if="image.site_id || image.telescope_id || image.instrument_id || image.observation_date"
             rounded
-            class="side-panel"
+            class="basic-info-sheet"
           >
             <p><v-icon icon="mdi-earth" /> {{ siteIDToName(image.site_id) ?? 'Missing Site' }}</p>
             <p><v-icon icon="mdi-telescope" /> {{ image.telescope_id ?? 'Missing Telescope ID' }}</p>
             <p><v-icon icon="mdi-camera" /> {{ image.instrument_id ?? 'Missing Instrument ID' }} </p>
             <p><v-icon icon="mdi-clock" /> {{ new Date(image.observation_date).toLocaleString() }}</p>
           </v-sheet>
-          <line-plot
-            :y-axis-luminosity="lineProfile"
-            :x-axis-arcsecs="lineProfileLength"
-            :start-coords="startCoords"
-            :end-coords="endCoords"
-            :position-angle="positionAngle"
-          />
+          <v-sheet
+            class="line-plot-sheet"
+            rounded
+          >
+            <line-plot
+              :y-axis-luminosity="lineProfile"
+              :x-axis-arcsecs="lineProfileLength"
+              :start-coords="startCoords"
+              :end-coords="endCoords"
+              :position-angle="positionAngle"
+            />
+          </v-sheet>
         </div>
       </div>
     </v-sheet>
@@ -181,84 +185,50 @@ a{
   color: var(--tan);
 }
 .v-sheet{
-  background-color: var(--metal);
-  color: var(--tan);
-}
-.v-table{
-  background-color: var(--metal);
+  background-color: var(--dark-blue);
   color: var(--tan);
-  max-width: 60ch;
-}
-.table_key{
-  font-weight: bold;
-  font-size: large;
+  font-family: 'Open Sans', sans-serif;
 }
 .analysis-sheet{
-  background-color: var(--dark-blue);
-  font-family: 'Open Sans', sans-serif;
-  text-transform: uppercase;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 .analysis-toolbar{
   color: var(--tan);
   background-color: var(--metal);
 }
 .analysis-content{
+  flex: 1;
   display: flex;
-  width: 100%;
-  height: 100%;
+  flex-direction: row;
+  padding: 1rem;
 }
 .side-panel-container {
-  margin-top: 2%;
   display: flex;
-  flex-direction: column
+  flex-direction: column;
+  margin-left: 10px;
+  width: 45vw;
 }
-.side-panel{
+.basic-info-sheet{
   padding: 1rem;
   color: var(--tan);
-  margin-left: 10px;
-  margin-bottom: 5%;
-}
-@media (min-width: 1201px) {
-  .side-panel-container {
-    margin-left: 20%;
-  }
-}
-@media (max-width: 1200px) {
-.analysis-sheet {
-  overflow: hidden !important;
-}
-.side-panel {
-  font-size: 0.75em;
-}
-}
-@media (max-width: 900px) {
-.analysis-sheet {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden !important;
-}
-.analysis-content {
-  flex-direction: column;
-}
-.side-panel-container {
-  margin-left: 11%;
-  margin-top: 5%;
-  flex-direction: row;
-  height: 30%;
-}
-.side-panel {
-  width: 25%;
-  height: 50%;
-  margin: 0;
+  background-color: var(--metal);
 }
-.line-plot {
-  flex-grow: 1;
+.line-plot-sheet {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: var(--metal);
   height: 100%;
 }
-.image-viewer {
-  order: -1;
-  height: 70%;
+/* FITS Header Info Table */
+.v-table{
+  background-color: var(--dark-blue);
+  color: var(--tan);
+  max-width: 60ch;
 }
+.table_key{
+  font-weight: bold;
+  font-size: large;
 }
-
 </style>
diff --git a/src/components/Project/ImageAnalysis/ImageViewer.vue b/src/components/Project/ImageAnalysis/ImageViewer.vue
index 8d5b440..4505dde 100644
--- a/src/components/Project/ImageAnalysis/ImageViewer.vue
+++ b/src/components/Project/ImageAnalysis/ImageViewer.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { onMounted, ref, nextTick, computed, watch } from 'vue'
+import { onMounted, ref, nextTick, watch } from 'vue'
 import L from 'leaflet'
 import '@geoman-io/leaflet-geoman-free'
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
 import 'leaflet/dist/leaflet.css'
+import { useAlertsStore } from '@/stores/alerts'
 
 const props = defineProps({
   imageSrc: {
@@ -19,84 +20,92 @@ const props = defineProps({
 
 const emit = defineEmits(['analysisAction'])
 
-const isLoading = ref(true)
-
-const imageContainer = ref(null)
-let image = null
+let imageMap = null
 let imageOverlay = null
 let imageBounds
 let initialCenter = [0, 0]
 let initialZoom = 1
-let lastDrawnLine = null
+let lineLayer = null
 let layerControl = null
 const imageWidth = ref(0)
 const imageHeight = ref(0)
+const isLoading = ref(true)
+const imageContainer = ref(null)
+const alerts = useAlertsStore()
 
-const scaledHeight = computed(() => imageHeight.value * 0.7)
-const scaledWidth = computed(() => imageWidth.value * 0.7)
+onMounted(() => {
+  loadImageOverlay()
+  leafletSetup()
+  resizeMap()
+})
+
+watch(() => props.catalog, () => {
+  createCatalogLayer()
+})
 
 // loads image overlay and set bounds
-const loadImageOverlay = () => {
+function loadImageOverlay() {
   // Create leaflet map (here referred to as image)
-  image = L.map(imageContainer.value, {
+  imageMap = L.map(imageContainer.value, {
     center: [0, 0],
-    zoom: 1,
+    maxZoom: 6,
     crs: L.CRS.Simple,
-    minZoom: 0,
-    dragging: false,
+    attributionControl: false,
+    maxBoundsViscosity: 1.0,
   })
 
-  // Can add new layers to this control and they will be able to be turned on and off in the top right corner of the map
-  layerControl = L.control.layers().addTo(image)
+  // Layer control allows the toggling of layers on the map
+  layerControl = L.control.layers(null, null, {collapsed:false}).addTo(imageMap)
 
   const img = new Image()
+  img.src = props.imageSrc
+  
   img.onload = () => {
     imageWidth.value = img.width
     imageHeight.value = img.height
 
+    // source catalog requires image dimensions to be fetched
+    fetchCatalog()
+
     // Getting image bounds based on img's size
     imageBounds = [[0, 0], [imageHeight.value, imageWidth.value]]
     if (imageOverlay) {
-      image.removeLayer(imageOverlay)
+      imageMap.removeLayer(imageOverlay)
     }
 
-    fetchCatalog()
-
     // Add new overlay with correct bounds
-    imageOverlay = L.imageOverlay(props.imageSrc, imageBounds).addTo(image)
+    imageOverlay = L.imageOverlay(props.imageSrc, imageBounds).addTo(imageMap)
     // Fit image view to the bounds of the image
-    image.fitBounds(imageBounds)
-    image.setMaxBounds(imageBounds)
+    imageMap.fitBounds(imageBounds)
+    imageMap.setMaxBounds(imageBounds)
 
     // waits for DOM to load then recalculates image's size and position after the container's dimensions have changed (built in method of Leaflet)
     nextTick(() => {
-      image.invalidateSize()
+      imageMap.invalidateSize()
     })
 
-    initialCenter = image.getCenter()
-    initialZoom = image.getZoom()
+    initialCenter = imageMap.getCenter()
+    initialZoom = imageMap.getZoom()
     isLoading.value = false
   }
-  img.src = props.imageSrc
 }
 
 function leafletSetup(){
   // Create custom control to reset view after zooming in
-  image.pm.Toolbar.createCustomControl({
+  imageMap.pm.Toolbar.createCustomControl({
     name: 'resetView',
     block: 'custom',
     title: 'Reset View',
     className: 'custom-reset-zoom-icon',
     onClick: () => {
-      image.setView(initialCenter, initialZoom)
+      imageMap.setView(initialCenter, initialZoom)
     },
     actions: [],
     toggle: false,
-    disabled: false,
   })
 
   // Disabling default controls
-  image.pm.addControls({
+  imageMap.pm.addControls({
     position: 'topleft',
     drawMarker: false,
     drawCircle: false,
@@ -105,96 +114,65 @@ function leafletSetup(){
     drawText: false,
     drawRectangle: false,
     editMode: true,
-    dragMode: true,
+    dragMode: false,
     cutPolygon: false,
     rotateMode: false,
     removalMode: true
   })
 
-  const zoomedInThreshold = 1
-
-  // Disable dragging until zoomed in
-  image.on('zoomend', () => {
-    if (image.getZoom() >= zoomedInThreshold) {
-      image.dragging.enable()
-    } else {
-      image.dragging.disable()
-    }
-  })
-
-  // Finish line after 2 points (default is multiple points for a line)
-  image.on('pm:drawstart', ({ workingLayer }) => {
+  imageMap.on('pm:drawstart', ({ workingLayer }) => {
     // Remove last drawn line when starting new one
-    if (lastDrawnLine && image.hasLayer(lastDrawnLine)) {
-      image.removeLayer(lastDrawnLine)
+    if (lineLayer && imageMap.hasLayer(lineLayer)) {
+      imageMap.removeLayer(lineLayer)
     }
-    let pointsCount = 0
+    // Limit line to 2 points
     workingLayer.on('pm:vertexadded', () => {
-      pointsCount++
-      if (pointsCount === 2) {
-        image.pm.Draw.Line._finishShape()
+      if (imageMap.pm.Draw.Line._markers.length === 2) {
+        imageMap.pm.Draw.Line._finishShape()
       }
     })
   })
 
   // Get coordinates of the line
-  image.on('pm:create', (e) => {
+  imageMap.on('pm:create', (e) => {
     // Save last drawn line
-    lastDrawnLine = e.layer
-    e.layer.on('pm:edit', handleEdit)
-    requestLineProfile(e.layer.getLatLngs())
+    lineLayer = e.layer
+    lineLayer.on('pm:edit', handleEdit)
+    requestLineProfile(lineLayer.getLatLngs())
   })
 }
 
-// Checks if the point is within the bounds of the image
-function isWithinBounds(point) {
-  const latWithinBounds = point.lat >= 0 && point.lat <= imageBounds[1][0]
-  const lngWithinBounds = point.lng >= 0 && point.lng <= imageBounds[1][1]
-  return latWithinBounds && lngWithinBounds
+// Recalculates image size and position after the container's dimensions have changed
+function resizeMap(){
+  const resizeObserver = new ResizeObserver(() => {
+    imageMap.invalidateSize()
+  })
+  if(imageContainer.value){
+    resizeObserver.observe(imageContainer.value)
+  }
 }
 
 // Adjusts the point to be within the bounds of the image
 function adjustToBounds(point) {
   const lat = Math.max(0, Math.min(imageBounds[1][0], point.lat))
   const lng = Math.max(0, Math.min(imageBounds[1][1], point.lng))
-  // Returns a new point with adjusted coordinates if the point is outside the bounds
   return L.latLng(lat, lng)
 }
 
-// Callback function for when a line is edited and checks if it's within bounds
-function handleEdit(event) {
-  let latLngs = event.layer.getLatLngs()
-
-  // Checking if the line is within the bounds
-  const adjustedLatLngs = latLngs.map(point => {
-    return isWithinBounds(point) ? point : adjustToBounds(point)
-  })
-
-  // Removes the existing layer from the image
-  image.removeLayer(event.layer)
-
-  // Creates a new line with the adjusted coordinates
-  const newLine = L.polyline(adjustedLatLngs)
-  newLine.addTo(image)
-
-  // Re-enable editing and attach the edit handler
-  newLine.pm.enable({
-    allowSelfIntersection: false,
-  })
-
-  // Set this new line as the last drawn line if you're tracking that
-  lastDrawnLine = newLine
-
-  // Re-attach the edit handling logic
-  newLine.on('pm:edit', handleEdit)
-
-  requestLineProfile(event.layer.getLatLngs())
+// Adjust edited lines to bounds and requests line profile
+function handleEdit() {
+  const boundedLatLngs = lineLayer.getLatLngs().map(adjustToBounds)
+  lineLayer.setLatLngs(boundedLatLngs)
+  requestLineProfile(lineLayer.getLatLngs())
 }
 
 // Event handler for drawn lines, emits an action that will trigger an api call in the parent
 function requestLineProfile(latLngs) {
   // Check that there are two points to calculate the line length
-  if (latLngs.length < 2) return
+  if (latLngs.length != 2){
+    alerts.setAlert('error', 'Please draw a line with two points')
+    return
+  }
 
   const startCoordinates = { x1: latLngs[0].lat, y1: latLngs[0].lng }
   const endCoordinates = { x2: latLngs[1].lat, y2: latLngs[1].lng }
@@ -211,9 +189,12 @@ function requestLineProfile(latLngs) {
 
 // When we get the catalog data this creates a layer of circles on the map
 function createCatalogLayer(){
-  if (!props.catalog) return
+  if (!props.catalog){
+    alerts.setAlert('info', 'No source catalog data for this image')
+    return
+  }
 
-  let catalogMarkers = []
+  let sourceCatalogMarkers = []
 
   props.catalog.forEach((source) => {
     let sourceMarker = L.circle([source.y, source.x], {
@@ -221,18 +202,19 @@ function createCatalogLayer(){
       fillColor: 'var(--tangerine)',
       fillOpacity: 0.2,
       radius: 10,
-      // TODO: Figure out a way to make this uneditable without pmIgnore. This breaks the snap to source functionality :(
-      //pmIgnore: true // Ignore this layer for geoman editing
+      pmIgnore: true, // Ignore this layer for editing
+      snapIgnore: false, // Allow snapping to this layer
     })
 
     sourceMarker.bindPopup(`Flux: ${source.flux}<br>Ra: ${source.ra}<br>Dec: ${source.dec}`)
-    catalogMarkers.push(sourceMarker)
+    sourceCatalogMarkers.push(sourceMarker)
   })
 
-  let catalogLayerGroup = L.layerGroup(catalogMarkers)
+  // Associate all source markers with a single layer group
+  let catalogLayerGroup = L.layerGroup(sourceCatalogMarkers)
 
-  // Shows the catalog layer by default
-  catalogLayerGroup.addTo(image)
+  // Displays the catalog layer by default
+  catalogLayerGroup.addTo(imageMap)
 
   layerControl.addOverlay(catalogLayerGroup, 'Source Catalog')
 }
@@ -245,92 +227,67 @@ function fetchCatalog(){
   emit('analysisAction', 'source-catalog', catalogInput)
 }
 
-watch(() => props.catalog, () => {
-  createCatalogLayer()
-})
-
-onMounted(() => {
-  loadImageOverlay()
-  leafletSetup()
-})
-
 </script>
-
-
 <template>
-  <div
-    class="wrapper"
-    :style="{ width: scaledWidth + 'px', height: scaledHeight + 'px' }"
-  >
-    <div
-      v-if="isLoading"
-      class="image-loading-container"
-    >
-      <v-progress-circular
-        indeterminate
-        model-value="20"
-        :size="50"
-        :width="9"
-      />
-    </div>
-    <div
-      ref="imageContainer"
-      class="leaflet-map-container"
-      :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }"
+  <template v-if="isLoading">
+    <v-progress-circular
+      indeterminate
+      model-value="20"
+      :size="50"
+      :width="9"
     />
-  </div>
+  </template>
+  <div
+    ref="imageContainer"
+    :style="{ width: imageWidth + 'px' }"
+  />
 </template>
 <style>
-.leaflet-map-container .marker-icon-middle {
-  display: none !important;
-}
+/* Custom icons for leaflet-geoman */
 .custom-reset-zoom-icon {
-  background-image: url('../../../assets/images/stock-vector-arrows-of-four-directions-linear-icon-black-symbol-on-transparent-background-1277674303.png');
-  background-size: 24px 24px;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 24px;
-  height: 24px;
+  background-image: url('../../../assets/images/resize.svg');
 }
-</style>
-<style scoped>
-.wrapper{
-  background-color: var(--dark-blue);
+
+.leaflet-pm-toolbar .leaflet-pm-icon-delete {
+  background-image: url('../../../assets/images/delete.svg');
 }
-.leaflet-map-container {
-  background-color: transparent;
-  margin-left: 2%;
-  margin-top: 2%;
+
+.leaflet-pm-toolbar .leaflet-pm-icon-polyline {
+  background-image: url('../../../assets/images/vector-line.svg');
 }
-.leaflet-image-layer {
-  width: 100% !important;
-  height: 100% !important;
+
+.leaflet-pm-toolbar .leaflet-pm-icon-edit {
+  background-image: url('../../../assets/images/vector-polyline-edit.svg');
 }
-.leaflet-tooltip {
-  display: none !important;
+/* Custom styling for toolbar */
+.leaflet-bar a:hover{
+  background-color: var(--dark-green);
 }
-.button-container.active .leaflet-pm-actions-container {
-  display: none !important;
+
+.leaflet-bar a{
+  background-color: var(--light-blue);
+  color: var(--dark-blue);
 }
-@media (max-width: 1200px) {
-  .wrapper {
-    overflow: visible;
-  }
-  .leaflet-map-container{
-    transform: scale(0.6);
-    transform-origin: top left;
-    background-color: transparent;
-  }
+
+.leaflet-bar a.leaflet-disabled{
+  background-color: var(--metal);
+  color: var(--dark-blue);
 }
-@media (max-width: 900px) {
-  .wrapper {
-    overflow: visible;
-    margin-left: 10%;
-  }
-  .leaflet-map-container{
-    transform: scale(0.7);
-    transform-origin: top left;
-    background-color: transparent;
-  }
+
+.button-container .leaflet-pm-actions-container .leaflet-pm-action:hover{
+  background-color: var(--dark-green);
+}
+
+.button-container .leaflet-pm-actions-container .leaflet-pm-action{
+  background-color: var(--light-blue);
+  color: var(--dark-blue);
+}
+/* Custom styling for Layer Control */
+.leaflet-control-layers-expanded{
+  background-color: var(--light-blue);
+  color: var(--dark-blue);
+  user-select: none;
 }
 </style>
+<style scoped>
+</style>
diff --git a/src/components/Project/ImageAnalysis/LinePlot.vue b/src/components/Project/ImageAnalysis/LinePlot.vue
index 8d1359b..378dfb1 100644
--- a/src/components/Project/ImageAnalysis/LinePlot.vue
+++ b/src/components/Project/ImageAnalysis/LinePlot.vue
@@ -7,9 +7,9 @@ const svg = ref(null)
 const props = defineProps(['yAxisLuminosity', 'xAxisArcsecs', 'startCoords', 'endCoords', 'positionAngle'])
 
 // Setting dimensions and margins for the plot
-const margin = { top: 20, right: 20, bottom: 70, left: 80 },
-  svgWidth = 700,
-  svgHeight = 480,
+const margin = { top: 0, right: 40, bottom: 50, left: 60 },
+  svgWidth = 500,
+  svgHeight = 350,
   width = svgWidth - margin.left - margin.right,
   height = svgHeight - margin.top - margin.bottom
 
@@ -29,7 +29,7 @@ const line = d3.line()
 
 const updateAxes = () => {
   const maxX = props.xAxisArcsecs
-  // Add 5% to the largest number from the randomNumbers array to buffer the plot
+  // Add 5% to the largest number to buffer the plot
   const maxY = d3.max(props.yAxisLuminosity) * 1.05
 
   x.domain([0, maxX])
@@ -137,23 +137,4 @@ onMounted(() => {
   color: var(--tan);
   font-family: 'Open Sans', sans-serif;
 }
-@media (max-width: 1200px) {
-.svg-wrapper {
-  margin-left: -18%;
-}
-.line-plot {
-  background-color: var(--dark-blue);
-  transform: scale(0.7);
-}
-}
-@media (max-width: 900px) {
-.svg-wrapper {
-  margin-top: -7%;
-  padding-left: 15%;
-}
-.line-plot {
-  background-color: var(--dark-blue);
-  transform: scale(0.8);
-}
-}
 </style>