diff --git a/src/libs/utils-map.ts b/src/libs/utils-map.ts
index fb83df8fc..ae8c61864 100644
--- a/src/libs/utils-map.ts
+++ b/src/libs/utils-map.ts
@@ -1,3 +1,7 @@
+import * as turf from '@turf/turf'
+import type { Feature, Polygon } from 'geojson'
+import * as L from 'leaflet'
+
 import type { WaypointCoordinates } from '@/types/mission'
 
 /**
@@ -158,3 +162,124 @@ export class TargetFollower {
     this.onTargetChange(this.target)
   }
 }
+
+/**
+ * Generates a survey path based on the given polygon and parameters.
+ * @param {L.LatLng[]} polygonPoints - The points of the polygon.
+ * @param {number} distanceBetweenLines - The distance between survey lines in meters.
+ * @param {number} linesAngle - The angle of the survey lines in degrees.
+ * @returns {L.LatLng[]} The generated survey path.
+ */
+export const generateSurveyPath = (
+  polygonPoints: L.LatLng[],
+  distanceBetweenLines: number,
+  linesAngle: number
+): L.LatLng[] => {
+  if (polygonPoints.length < 4) return []
+
+  const polygonCoords = polygonPoints.map((p) => [p.lng, p.lat])
+  if (
+    polygonCoords[0][0] !== polygonCoords[polygonCoords.length - 1][0] ||
+    polygonCoords[0][1] !== polygonCoords[polygonCoords.length - 1][1]
+  ) {
+    polygonCoords.push(polygonCoords[0])
+  }
+
+  try {
+    const poly = turf.polygon([polygonCoords])
+    const bbox = turf.bbox(poly)
+    const [minX, minY, maxX, maxY] = bbox
+    const diagonal = Math.sqrt(Math.pow(maxX - minX, 2) + Math.pow(maxY - minY, 2))
+
+    const adjustedAngle = linesAngle + 90
+    const angleRad = (adjustedAngle * Math.PI) / 180
+
+    const continuousPath: L.LatLng[] = []
+    let d = -diagonal
+    let isReverse = false
+
+    while (d <= diagonal * 2) {
+      const lineStart = [
+        minX + d * Math.cos(angleRad) - diagonal * Math.sin(angleRad),
+        minY + d * Math.sin(angleRad) + diagonal * Math.cos(angleRad),
+      ]
+      const lineEnd = [
+        minX + d * Math.cos(angleRad) + diagonal * Math.sin(angleRad),
+        minY + d * Math.sin(angleRad) - diagonal * Math.cos(angleRad),
+      ]
+
+      const line = turf.lineString([lineStart, lineEnd])
+      const clipped = turf.lineIntersect(poly, line)
+
+      if (clipped.features.length >= 2) {
+        const coords = clipped.features.map((f) => f.geometry.coordinates)
+        if (isReverse) coords.reverse()
+
+        const linePoints = coords.map((c) => L.latLng(c[1], c[0]))
+
+        if (continuousPath.length > 0) {
+          const lastPoint = continuousPath[continuousPath.length - 1]
+          const edgePath = moveAlongEdge(poly, lastPoint, linePoints[0], distanceBetweenLines / 111000)
+          continuousPath.push(...edgePath)
+        }
+
+        continuousPath.push(...linePoints)
+        isReverse = !isReverse
+      }
+
+      d += distanceBetweenLines / 111000
+    }
+
+    return continuousPath
+  } catch (error) {
+    console.error('Error in generateSurveyPath:', error)
+    return []
+  }
+}
+
+/**
+ * Moves along the edge of a polygon from start to end point.
+ * @param {Feature<Polygon>} polygon - The polygon to move along.
+ * @param {L.LatLng} start - The starting point.
+ * @param {L.LatLng} end - The ending point.
+ * @param {number} maxDistance - The maximum distance to move.
+ * @returns {L.LatLng[]} The path along the edge.
+ */
+export const moveAlongEdge = (
+  polygon: Feature<Polygon>,
+  start: L.LatLng,
+  end: L.LatLng,
+  maxDistance: number
+): L.LatLng[] => {
+  const coords = polygon.geometry.coordinates[0]
+  const path: L.LatLng[] = []
+  let remainingDistance = maxDistance
+  let currentPoint = turf.point([start.lng, start.lat])
+
+  for (let i = 0; i < coords.length; i++) {
+    const nextPoint = turf.point(coords[(i + 1) % coords.length])
+    const edgeLine = turf.lineString([coords[i], coords[(i + 1) % coords.length]])
+
+    if (turf.booleanPointOnLine(currentPoint, edgeLine)) {
+      while (remainingDistance > 0) {
+        const distance = turf.distance(currentPoint, nextPoint)
+        if (distance <= remainingDistance) {
+          path.push(L.latLng(nextPoint.geometry.coordinates[1], nextPoint.geometry.coordinates[0]))
+          remainingDistance -= distance
+          currentPoint = nextPoint
+          break
+        } else {
+          const move = turf.along(edgeLine, remainingDistance, { units: 'kilometers' })
+          path.push(L.latLng(move.geometry.coordinates[1], move.geometry.coordinates[0]))
+          break
+        }
+      }
+    }
+
+    if (turf.booleanPointOnLine(turf.point([end.lng, end.lat]), edgeLine)) {
+      break
+    }
+  }
+
+  return path
+}
diff --git a/src/views/MissionPlanningView.vue b/src/views/MissionPlanningView.vue
index 300251898..2c12f36a6 100644
--- a/src/views/MissionPlanningView.vue
+++ b/src/views/MissionPlanningView.vue
@@ -3,6 +3,43 @@
     <div id="planningMap" ref="planningMap" />
     <div class="absolute left-0 w-40 h-auto flex flex-col p-2 m-4 rounded-md bg-slate-700 opacity-90 max-h-[85%]">
       <div class="flex flex-col w-full h-full p-2 overflow-y-scroll">
+        <button
+          :class="{ 'bg-slate-50': isCreatingSurvey }"
+          class="h-auto py-1 px-2 m-2 font-medium text-sm rounded-sm bg-slate-300 hover:bg-slate-400 transition-colors duration-200"
+          @click="isCreatingSurvey = !isCreatingSurvey"
+        >
+          {{ isCreatingSurvey ? 'Cancel Survey' : 'Create Survey' }}
+        </button>
+        <div v-if="isCreatingSurvey" class="flex flex-col">
+          <p class="m-1 overflow-visible text-sm text-slate-200">Distance between lines (m)</p>
+          <input
+            v-model.number="distanceBetweenSurveyLines"
+            class="px-2 m-1 rounded-sm bg-slate-100"
+            type="number"
+            min="1"
+          />
+          <p class="m-1 overflow-visible text-sm text-slate-200">Lines angle (degrees)</p>
+          <input
+            v-model.number="surveyLinesAngle"
+            class="px-2 m-1 rounded-sm bg-slate-100"
+            type="number"
+            min="0"
+            max="359"
+          />
+          <button
+            class="h-auto py-1 px-2 m-2 font-medium text-sm rounded-sm bg-slate-300 hover:bg-slate-400 transition-colors duration-200"
+            @click="clearSurveyPath"
+          >
+            Clear Path
+          </button>
+          <button
+            class="h-auto py-1 px-2 m-2 font-medium text-sm rounded-sm bg-slate-300 hover:bg-slate-400 transition-colors duration-200"
+            @click="generateWaypointsFromSurvey"
+          >
+            Generate Waypoints
+          </button>
+        </div>
+        <div class="w-full h-px mb-3 bg-gray-50" />
         <p class="text-sm text-slate-200">Waypoint type</p>
         <button
           :class="{ 'bg-slate-50': currentWaypointType === WaypointType.PASS_BY }"
@@ -126,10 +163,11 @@ import { saveAs } from 'file-saver'
 import L, { type LatLngTuple, Map, Marker } from 'leaflet'
 import { v4 as uuid } from 'uuid'
 import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { TargetFollower, WhoToFollow } from '@/libs/utils-map'
+import { generateSurveyPath } from '@/libs/utils-map'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
 import {
@@ -290,6 +328,300 @@ const loadMissionFromFile = async (e: Event): Promise<void> => {
   reader.readAsText(e.target.files[0])
 }
 
+const isCreatingSurvey = ref(false)
+const surveyPolygonPoints = ref<L.LatLng[]>([])
+const surveyPolygonMarkers = ref<L.Marker[]>([])
+const rawDistanceBetweenSurveyLines = ref(10)
+const rawSurveyLinesAngle = ref(0)
+
+// Distance between lines in the survey path
+const distanceBetweenSurveyLines = computed({
+  get: () => Math.max(1, rawDistanceBetweenSurveyLines.value),
+  set: (value) => (rawDistanceBetweenSurveyLines.value = Math.max(1, value)), // Ensure the distance is at least 1
+})
+
+// Angle of the survey path lines
+const surveyLinesAngle = computed({
+  get: () => ((rawSurveyLinesAngle.value % 360) + 360) % 360, // This ensures the angle is always between 0 and 359
+  set: (value) => (rawSurveyLinesAngle.value = ((value % 360) + 360) % 360),
+})
+
+const surveyPathLayer = ref<L.Polyline | null>(null)
+const surveyPolygonLayer = ref<L.Polygon | null>(null)
+
+const clearSurveyPath = (): void => {
+  if (surveyPathLayer.value) {
+    planningMap.value?.removeLayer(surveyPathLayer.value as unknown as L.Layer)
+    surveyPathLayer.value = null
+  }
+  if (surveyPolygonLayer.value) {
+    planningMap.value?.removeLayer(surveyPolygonLayer.value as unknown as L.Layer)
+    surveyPolygonLayer.value = null
+  }
+  surveyPolygonMarkers.value.forEach((marker) => marker.remove())
+  edgeMarkers.forEach((marker) => marker.remove())
+  surveyPolygonMarkers.value = []
+  surveyPolygonPoints.value = []
+}
+
+watch(isCreatingSurvey, (isCreatingNow) => {
+  if (!isCreatingNow) clearSurveyPath()
+
+  if (planningMap.value) {
+    const mapContainer = planningMap.value.getContainer()
+    if (isCreatingNow) {
+      mapContainer.classList.add('survey-cursor')
+    } else {
+      mapContainer.classList.remove('survey-cursor')
+    }
+  }
+})
+
+const updateSurveyMarkersPositions = (): void => {
+  surveyPolygonMarkers.value.forEach((marker, index) => {
+    const latlng = surveyPolygonPoints.value[index]
+    marker.setLatLng(latlng)
+  })
+  updateEdgeMarkers()
+}
+
+const updatePolygon = (): void => {
+  surveyPolygonPoints.value = surveyPolygonMarkers.value.map((marker) => marker.getLatLng())
+  if (surveyPolygonLayer.value) {
+    surveyPolygonLayer.value.setLatLngs(surveyPolygonPoints.value)
+  } else if (surveyPolygonPoints.value.length >= 3) {
+    surveyPolygonLayer.value = L.polygon(surveyPolygonPoints.value, {
+      color: '#3B82F6',
+      fillColor: '#60A5FA',
+      fillOpacity: 0.2,
+      weight: 3,
+      className: 'survey-polygon',
+    }).addTo(toRaw(planningMap.value)!)
+  }
+  updateSurveyMarkersPositions()
+}
+
+const checkAndRemoveSurveyPath = (): void => {
+  if (surveyPolygonPoints.value.length >= 4 || !surveyPathLayer.value) return
+  planningMap.value?.removeLayer(surveyPathLayer.value as unknown as L.Layer)
+  surveyPathLayer.value = null
+}
+
+const createSurveyPath = (): void => {
+  if (surveyPolygonPoints.value.length < 4) {
+    checkAndRemoveSurveyPath()
+    return
+  }
+
+  try {
+    const continuousPath = generateSurveyPath(
+      surveyPolygonPoints.value,
+      distanceBetweenSurveyLines.value,
+      surveyLinesAngle.value
+    )
+
+    if (continuousPath.length === 0) {
+      showDialog({
+        variant: 'error',
+        message: 'No valid path could be generated. Try adjusting the angle or distance between lines.',
+        timer: 5000,
+      })
+      return
+    }
+
+    if (surveyPathLayer.value) {
+      planningMap.value?.removeLayer(surveyPathLayer.value as unknown as L.Layer)
+    }
+
+    surveyPathLayer.value = L.polyline(continuousPath, {
+      color: '#2563EB',
+      weight: 3,
+      opacity: 0.8,
+      className: 'survey-path',
+    }).addTo(toRaw(planningMap.value)!)
+  } catch (error) {
+    showDialog({
+      variant: 'error',
+      message: `Failed to generate survey path: ${(error as Error).message}`,
+      timer: 5000,
+    })
+  }
+}
+
+// Watch for changes in distanceBetweenSurveyLines and surveyLinesAngle
+watch([distanceBetweenSurveyLines, surveyLinesAngle], () => createSurveyPath())
+
+const customIcon = L.divIcon({
+  html: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="5" fill="#3B82F6" stroke="white" stroke-width="2"/>
+      <g class="delete-icon" style="display: none;">
+        <circle cx="12" cy="12" r="10" fill="rgba(239, 68, 68, 0.8)"/>
+        <path d="M8 8L16 16M16 8L8 16" stroke="white" stroke-width="2"/>
+      </g>
+    </svg>
+  `,
+  className: 'custom-div-icon',
+  iconSize: [24, 24],
+  iconAnchor: [12, 12],
+})
+
+const edgeMarkers: L.Marker[] = []
+
+const updateEdgeMarkers = (): void => {
+  // Remove existing edge markers
+  edgeMarkers.forEach((marker) => marker.remove())
+  edgeMarkers.length = 0
+
+  // Add new edge markers
+  if (surveyPolygonPoints.value.length >= 3) {
+    for (let i = 0; i < surveyPolygonPoints.value.length; i++) {
+      const start = surveyPolygonPoints.value[i]
+      const end = surveyPolygonPoints.value[(i + 1) % surveyPolygonPoints.value.length]
+      const middle = L.latLng((start.lat + end.lat) / 2, (start.lng + end.lng) / 2)
+
+      const edgeMarker = L.marker(middle, {
+        icon: L.divIcon({
+          html: `
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+              <circle cx="10" cy="10" r="9" fill="white" stroke="#3B82F6" stroke-width="2"/>
+              <path d="M10 5V15M5 10H15" stroke="#3B82F6" stroke-width="2"/>
+            </svg>
+          `,
+          className: 'edge-marker',
+          iconSize: [20, 20],
+          iconAnchor: [10, 10],
+        }),
+      })
+
+      edgeMarker.on('click', (e: L.LeafletMouseEvent) => addVertexAtEdge(i, e.latlng))
+      edgeMarker.addTo(toRaw(planningMap.value)!)
+      edgeMarkers.push(edgeMarker)
+    }
+  }
+}
+
+const addVertexAtEdge = (edgeIndex: number, latlng: L.LatLng): void => {
+  surveyPolygonPoints.value.splice(edgeIndex + 1, 0, latlng)
+  const newMarker = L.marker(latlng, {
+    icon: customIcon,
+    draggable: true,
+  })
+    .on('drag', () => {
+      updatePolygon()
+      createSurveyPath()
+    })
+    .on('mouseover', (event: L.LeafletEvent) => {
+      const target = event.target as L.Marker
+      const icon = target.getElement()?.querySelector('.delete-icon') as SVGGElement
+      if (icon) icon.style.display = 'block'
+    })
+    .on('mouseout', (event: L.LeafletEvent) => {
+      const target = event.target as L.Marker
+      const icon = target.getElement()?.querySelector('.delete-icon') as SVGGElement
+      if (icon) icon.style.display = 'none'
+    })
+    .on('click', (event: L.LeafletEvent) => {
+      const target = event.target as L.Marker
+      const index = surveyPolygonMarkers.value.indexOf(target)
+      if (index !== -1) {
+        surveyPolygonPoints.value.splice(index, 1)
+        surveyPolygonMarkers.value.splice(index, 1)
+        target.remove()
+        updatePolygon()
+        updateEdgeMarkers()
+        checkAndRemoveSurveyPath()
+        createSurveyPath()
+      }
+    })
+    .addTo(toRaw(planningMap.value)!)
+  surveyPolygonMarkers.value.splice(edgeIndex + 1, 0, newMarker)
+  updatePolygon()
+  updateEdgeMarkers()
+  createSurveyPath()
+}
+
+const addSurveyPoint = (e: L.LeafletMouseEvent): void => {
+  if (!isCreatingSurvey.value) return
+  const newPoint = e.latlng
+  surveyPolygonPoints.value.push(newPoint)
+  const marker = L.marker(newPoint, {
+    icon: customIcon,
+    draggable: true,
+  })
+    .on('drag', (event: L.LeafletEvent) => {
+      const target = event.target as L.Marker
+      const index = surveyPolygonMarkers.value.indexOf(target)
+      if (index !== -1) {
+        surveyPolygonPoints.value[index] = target.getLatLng()
+      }
+      updatePolygon()
+      updateEdgeMarkers()
+      createSurveyPath()
+    })
+    .on('mouseover', (event: L.LeafletEvent) => {
+      const target = event.target as L.Marker
+      const icon = target.getElement()?.querySelector('.delete-icon') as SVGGElement
+      if (icon) icon.style.display = 'block'
+    })
+    .on('mouseout', (event: L.LeafletEvent) => {
+      const target = event.target as L.Marker
+      const icon = target.getElement()?.querySelector('.delete-icon') as SVGGElement
+      if (icon) icon.style.display = 'none'
+    })
+    .on('click', (event: L.LeafletEvent) => {
+      const target = event.target as L.Marker
+      const index = surveyPolygonMarkers.value.indexOf(target)
+      if (index !== -1) {
+        surveyPolygonPoints.value.splice(index, 1)
+        surveyPolygonMarkers.value.splice(index, 1)
+        target.remove()
+        updatePolygon()
+        updateEdgeMarkers()
+        checkAndRemoveSurveyPath()
+        createSurveyPath()
+      }
+    })
+    .addTo(toRaw(planningMap.value)!)
+  surveyPolygonMarkers.value.push(marker)
+  updatePolygon()
+  updateEdgeMarkers()
+  createSurveyPath()
+}
+
+const generateWaypointsFromSurvey = (): void => {
+  if (!surveyPathLayer.value) {
+    showDialog({ variant: 'error', message: 'No survey path to generate waypoints from.', timer: 3000 })
+    return
+  }
+
+  const surveyLatLngs = surveyPathLayer.value.getLatLngs()
+  if (!Array.isArray(surveyLatLngs) || surveyLatLngs.length === 0) {
+    showDialog({ variant: 'error', message: 'Invalid survey path.', timer: 3000 })
+    return
+  }
+
+  // Clear existing waypoints
+  missionStore.currentPlanningWaypoints.forEach((waypoint) => removeWaypoint(waypoint))
+
+  // Generate new waypoints from survey path
+  // @ts-ignore: L.LatLng is not assignable to LatLngTuple
+  surveyLatLngs.flat().forEach((latLng: L.LatLng) => {
+    addWaypoint(
+      [latLng.lat, latLng.lng],
+      currentWaypointAltitude.value,
+      WaypointType.PASS_BY,
+      currentWaypointAltitudeRefType.value
+    )
+  })
+
+  // Remove survey path and polygon
+  clearSurveyPath()
+  isCreatingSurvey.value = false
+
+  showDialog({ variant: 'success', message: 'Waypoints generated from survey path.', timer: 3000 })
+}
+
 onMounted(async () => {
   const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 19,
@@ -327,12 +659,16 @@ onMounted(async () => {
   await goHome()
 
   planningMap.value.on('click', (e) => {
-    addWaypoint(
-      [e.latlng.lat, e.latlng.lng],
-      currentWaypointAltitude.value,
-      currentWaypointType.value,
-      currentWaypointAltitudeRefType.value
-    )
+    if (isCreatingSurvey.value) {
+      addSurveyPoint(e)
+    } else {
+      addWaypoint(
+        [e.latlng.lat, e.latlng.lng],
+        currentWaypointAltitude.value,
+        currentWaypointType.value,
+        currentWaypointAltitudeRefType.value
+      )
+    }
   })
 
   const layerControl = L.control.layers(baseMaps)
@@ -458,4 +794,110 @@ watch([home, planningMap], async () => {
 .active-events-on-disabled {
   pointer-events: all;
 }
+.survey-polygon {
+  fill-opacity: 0.2;
+  stroke-width: 2;
+  stroke: #3b82f6;
+  animation: pulse 2s infinite;
+}
+.survey-path {
+  stroke-width: 2;
+  stroke-dasharray: 5, 5;
+  stroke: #2563eb;
+  animation: move 5s infinite;
+}
+.survey-cursor {
+  cursor: crosshair;
+}
+.custom-div-icon {
+  background: none;
+  border: none;
+}
+
+.custom-div-icon svg {
+  display: block;
+}
+
+@keyframes pulse {
+  0% {
+    stroke-width: 2;
+  }
+  50% {
+    stroke-width: 4;
+  }
+  100% {
+    stroke-width: 2;
+  }
+}
+
+@keyframes move {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 10;
+  }
+}
+
+/* Increase clickable area */
+.custom-div-icon::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  right: -10px;
+  bottom: -10px;
+}
+
+.edge-marker {
+  background: none;
+  border: none;
+}
+
+.edge-marker svg {
+  transition: all 0.3s ease;
+}
+
+.edge-marker:hover svg {
+  transform: scale(1.2);
+}
+
+/* Add pulsing effect to survey polygon */
+@keyframes pulse {
+  0% {
+    stroke-width: 2;
+    opacity: 1;
+  }
+  50% {
+    stroke-width: 4;
+    opacity: 0.5;
+  }
+  100% {
+    stroke-width: 2;
+    opacity: 1;
+  }
+}
+
+.survey-polygon {
+  animation: pulse 2s infinite;
+}
+
+/* Add hover effect to survey point markers */
+.custom-div-icon:hover .delete-icon {
+  display: block;
+}
+
+/* Add animation to survey path */
+@keyframes move {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -100%;
+  }
+}
+
+.survey-path {
+  animation: move 5s infinite linear;
+}
 </style>