diff --git a/gcs/src/components/mapComponents/contextMenuItem.jsx b/gcs/src/components/mapComponents/contextMenuItem.jsx
index 970d8c1b3..03fa547ac 100644
--- a/gcs/src/components/mapComponents/contextMenuItem.jsx
+++ b/gcs/src/components/mapComponents/contextMenuItem.jsx
@@ -4,7 +4,7 @@ export default function ContextMenuItem({ children, onClick }) {
       className="hover:bg-falcongrey-800 hover:cursor-pointer py-1 px-4 rounded"
       onClick={onClick}
     >
-      {children}
+      <div className="w-full flex justify-between gap-2">{children}</div>
     </div>
   )
 }
diff --git a/gcs/src/components/mapComponents/contextMenuSubMenuItem.jsx b/gcs/src/components/mapComponents/contextMenuSubMenuItem.jsx
new file mode 100644
index 000000000..5f29e2eca
--- /dev/null
+++ b/gcs/src/components/mapComponents/contextMenuSubMenuItem.jsx
@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from "react"
+
+export default function ContextMenuSubMenuItem({ children, title }) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [submenuPosition, setSubmenuPosition] = useState({ top: 0, left: 0 })
+  const parentRef = useRef(null)
+  const subMenuRef = useRef(null)
+
+  useEffect(() => {
+    if (isHovered && parentRef.current && subMenuRef.current) {
+      const parentRect = parentRef.current.getBoundingClientRect()
+      const submenuRect = subMenuRef.current.getBoundingClientRect()
+      const viewportWidth = window.innerWidth
+
+      // Calculate whether to position the submenu to the right or left
+      const shouldAppearToLeft =
+        parentRect.right + submenuRect.width > viewportWidth
+
+      setSubmenuPosition({
+        top: parentRect.top,
+        left: shouldAppearToLeft
+          ? parentRect.left - submenuRect.width
+          : parentRect.right,
+      })
+    }
+  }, [isHovered])
+
+  return (
+    <div
+      ref={parentRef}
+      className="hover:bg-falcongrey-800 hover:cursor-pointer py-1 px-4 rounded"
+      onMouseOver={() => setIsHovered(true)}
+      onMouseOut={() => setIsHovered(false)}
+    >
+      <div className="w-full flex justify-between items-center gap-2">
+        <p>{title}</p>
+        <span className="text-gray-400">▶</span>
+      </div>
+      {isHovered && (
+        <div
+          ref={subMenuRef}
+          className="absolute top-0 left-full bg-falcongrey-700  rounded p-1"
+          style={{
+            top: `${submenuPosition.top}px`,
+            left: `${submenuPosition.left}px`,
+            position: "fixed", // Use fixed to align with the viewport
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/gcs/src/components/mapComponents/drawLineCoordinates.jsx b/gcs/src/components/mapComponents/drawLineCoordinates.jsx
index 28e72176a..1f9f75aa8 100644
--- a/gcs/src/components/mapComponents/drawLineCoordinates.jsx
+++ b/gcs/src/components/mapComponents/drawLineCoordinates.jsx
@@ -9,6 +9,8 @@ export default function DrawLineCoordinates({
   colour,
   width = 1,
   lineProps = {},
+  fillLayer = false,
+  fillOpacity = 0.5,
 }) {
   return (
     <Source
@@ -21,6 +23,7 @@ export default function DrawLineCoordinates({
           coordinates,
         },
       }}
+      buffer={512} // Attempt to increase buffer to remove fill layer clipping
     >
       <Layer
         {...{
@@ -36,6 +39,18 @@ export default function DrawLineCoordinates({
           },
         }}
       />
+      {fillLayer && (
+        <Layer
+          type="fill"
+          paint={{
+            "fill-color": colour,
+            "fill-opacity": fillOpacity,
+          }}
+          layout={{
+            "fill-sort-key": 10,
+          }}
+        />
+      )}
     </Source>
   )
 }
diff --git a/gcs/src/components/mapComponents/fenceItems.jsx b/gcs/src/components/mapComponents/fenceItems.jsx
new file mode 100644
index 000000000..795a35b1e
--- /dev/null
+++ b/gcs/src/components/mapComponents/fenceItems.jsx
@@ -0,0 +1,181 @@
+/*
+  The FenceItems component returns the markers and lines connecting the
+  markers together on the map to display. It also filters out any
+  items which should not be displayed on the map as markers or not have lines
+  connecting them. It properly parses the type of fence marker.
+*/
+
+import { useEffect, useState } from "react"
+
+// Helper imports
+import { intToCoord } from "../../helpers/dataFormatters"
+
+// Styling imports
+import "maplibre-gl/dist/maplibre-gl.css"
+
+// Component imports
+
+// Tailing styling
+import { circle } from "@turf/turf"
+import { Layer, Source } from "react-map-gl"
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../tailwind.config"
+import { FENCE_ITEM_COMMANDS_LIST } from "../../helpers/mavlinkConstants"
+import DrawLineCoordinates from "./drawLineCoordinates"
+import MarkerPin from "./markerPin"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
+function getFenceCommandNumber(value) {
+  return parseInt(
+    Object.keys(FENCE_ITEM_COMMANDS_LIST).filter(
+      (key) => FENCE_ITEM_COMMANDS_LIST[key] === value,
+    ),
+  )
+}
+
+const polygonCommands = [
+  getFenceCommandNumber("MAV_CMD_NAV_FENCE_POLYGON_VERTEX_INCLUSION"),
+  getFenceCommandNumber("MAV_CMD_NAV_FENCE_POLYGON_VERTEX_EXCLUSION"),
+]
+const circleCommands = [
+  getFenceCommandNumber("MAV_CMD_NAV_FENCE_CIRCLE_INCLUSION"),
+  getFenceCommandNumber("MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION"),
+]
+
+export default function FenceItems({
+  fenceItems,
+  editable = false,
+  dragEndCallback = () => {},
+}) {
+  const [fencePolygonItems, setFencePolygonItems] = useState([])
+  const [fenceCircleItems, setFenceCircleItems] = useState([])
+
+  useEffect(() => {
+    // Filter out fence items based on their type
+    const polygonItems = fenceItems.filter((item) =>
+      polygonCommands.includes(item.command),
+    )
+    const circleItems = fenceItems.filter((item) =>
+      circleCommands.includes(item.command),
+    )
+
+    setFencePolygonItems(polygonItems)
+    setFenceCircleItems(circleItems)
+  }, [fenceItems])
+
+  return (
+    <>
+      {/* Show mission geo-fence MARKERS */}
+      {fencePolygonItems.map((item, index) => {
+        return (
+          <MarkerPin
+            key={index}
+            id={item.id}
+            lat={intToCoord(item.x)}
+            lon={intToCoord(item.y)}
+            colour={tailwindColors.blue[400]}
+            draggable={editable}
+            dragEndCallback={dragEndCallback}
+          />
+        )
+      })}
+
+      {/* Group fencePolygonItems into separate polygons */}
+      {(() => {
+        const polygons = []
+        let currentPolygon = []
+        let currentPoints = 0
+
+        fencePolygonItems.forEach((item) => {
+          currentPolygon.push(item)
+          currentPoints++
+
+          if (currentPoints === item.param1) {
+            polygons.push(currentPolygon)
+            currentPolygon = []
+            currentPoints = 0
+          }
+        })
+
+        return polygons.map((polygon, index) => {
+          const lastPolygonItem = polygon[polygon.length - 1]
+
+          const color =
+            lastPolygonItem.command === 5002
+              ? tailwindColors.red[500]
+              : tailwindColors.blue[200]
+
+          return (
+            <DrawLineCoordinates
+              key={index}
+              coordinates={[
+                ...polygon.map((item) => [
+                  intToCoord(item.y),
+                  intToCoord(item.x),
+                ]),
+                [intToCoord(polygon[0].y), intToCoord(polygon[0].x)],
+              ]}
+              colour={color}
+              lineProps={{ "line-width": 2, "line-dasharray": [4, 6] }}
+              fillLayer={true}
+              fillOpacity={lastPolygonItem.command === 5002 ? 0.2 : 0}
+            />
+          )
+        })
+      })()}
+
+      {fenceCircleItems.map((item, index) => {
+        return (
+          <MarkerPin
+            key={index}
+            id={item.id}
+            lat={intToCoord(item.x)}
+            lon={intToCoord(item.y)}
+            colour={tailwindColors.blue[400]}
+            draggable={editable}
+            dragEndCallback={dragEndCallback}
+          />
+        )
+      })}
+
+      <Source
+        id="circle-source"
+        type="geojson"
+        data={{
+          type: "FeatureCollection",
+          features: fenceCircleItems.map((item) =>
+            circle([intToCoord(item.y), intToCoord(item.x)], item.param1, {
+              steps: 64, // Number of points to create the circle
+              units: "meters", // Units for the radius
+              properties: {
+                color:
+                  item.command === 5004
+                    ? tailwindColors.red[500]
+                    : tailwindColors.blue[200],
+                fillOpacity: item.command === 5004 ? 0.2 : 0, // No fill if inclusion
+              },
+            }),
+          ),
+        }}
+      >
+        <Layer
+          id="fence-circle-fill-layer"
+          type="fill"
+          paint={{
+            "fill-color": ["get", "color"],
+            "fill-opacity": ["get", "fillOpacity"],
+          }}
+        />
+        <Layer
+          id="fence-circle-border-layer"
+          type="line"
+          paint={{
+            "line-color": ["get", "color"],
+            "line-width": 2,
+            "line-dasharray": [2, 2],
+          }}
+        />
+      </Source>
+    </>
+  )
+}
diff --git a/gcs/src/components/mapComponents/polygon.jsx b/gcs/src/components/mapComponents/polygon.jsx
new file mode 100644
index 000000000..d4f87302f
--- /dev/null
+++ b/gcs/src/components/mapComponents/polygon.jsx
@@ -0,0 +1,54 @@
+/*
+  The PolygonItems component returns the markers and lines connecting the
+  polygon together on the map to display.
+*/
+
+// Helper imports
+
+// Styling imports
+import "maplibre-gl/dist/maplibre-gl.css"
+
+// Component imports
+import DrawLineCoordinates from "./drawLineCoordinates"
+import MarkerPin from "./markerPin"
+
+// Tailing styling
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../tailwind.config"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
+export default function Polygon({
+  polygonPoints,
+  editable = false,
+  dragEndCallback = () => {},
+}) {
+  return (
+    <>
+      {/* Show polygon MARKERS */}
+      {polygonPoints.map((item, index) => {
+        return (
+          <MarkerPin
+            key={index}
+            id={item.id}
+            lat={item.lat}
+            lon={item.lon}
+            colour={tailwindColors.red[400]}
+            draggable={editable}
+            dragEndCallback={dragEndCallback}
+          />
+        )
+      })}
+
+      {/* Show polygon outlines */}
+      {polygonPoints.length > 0 && (
+        <DrawLineCoordinates
+          coordinates={[
+            ...polygonPoints.map((item) => [item.lon, item.lat]),
+            [polygonPoints[0].lon, polygonPoints[0].lat],
+          ]}
+          colour={tailwindColors.red[200]}
+        />
+      )}
+    </>
+  )
+}
diff --git a/gcs/src/components/missions/fenceItemsTable.jsx b/gcs/src/components/missions/fenceItemsTable.jsx
new file mode 100644
index 000000000..0037890af
--- /dev/null
+++ b/gcs/src/components/missions/fenceItemsTable.jsx
@@ -0,0 +1,55 @@
+/*
+  This table displays all the fence items.
+*/
+
+import { Table } from "@mantine/core"
+import React from "react"
+import FenceItemsTableRow from "./fenceItemsTableRow"
+
+function FenceItemsTableNonMemo({
+  fenceItems,
+  updateMissionItem,
+  deleteMissionItem,
+  updateMissionItemOrder,
+}) {
+  return (
+    <Table striped withTableBorder withColumnBorders stickyHeader>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th></Table.Th>
+          <Table.Th>Command</Table.Th>
+          <Table.Th>Param 1</Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th>Lat</Table.Th>
+          <Table.Th>Lng</Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th>Frame</Table.Th>
+          <Table.Th></Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {fenceItems.map((fenceItem, idx) => {
+          return (
+            <FenceItemsTableRow
+              key={fenceItem.id}
+              index={idx}
+              fenceItem={fenceItem}
+              updateMissionItem={updateMissionItem}
+              deleteMissionItem={deleteMissionItem}
+              updateMissionItemOrder={updateMissionItemOrder}
+            />
+          )
+        })}
+      </Table.Tbody>
+    </Table>
+  )
+}
+
+function propsAreEqual(prev, next) {
+  return JSON.stringify(prev) === JSON.stringify(next)
+}
+const FenceItemsTable = React.memo(FenceItemsTableNonMemo, propsAreEqual)
+
+export default FenceItemsTable
diff --git a/gcs/src/components/missions/fenceItemsTableRow.jsx b/gcs/src/components/missions/fenceItemsTableRow.jsx
new file mode 100644
index 000000000..5ba378300
--- /dev/null
+++ b/gcs/src/components/missions/fenceItemsTableRow.jsx
@@ -0,0 +1,142 @@
+/*
+  This component displays the row for a fence item in a table.
+*/
+
+import {
+  ActionIcon,
+  NumberInput,
+  Select,
+  TableTd,
+  TableTr,
+} from "@mantine/core"
+import { IconArrowDown, IconArrowUp, IconTrash } from "@tabler/icons-react"
+import { useEffect, useState } from "react"
+import { coordToInt, intToCoord } from "../../helpers/dataFormatters"
+import {
+  FENCE_ITEM_COMMANDS_LIST,
+  MAV_FRAME_LIST,
+} from "../../helpers/mavlinkConstants"
+
+const coordsFractionDigits = 9
+
+function getDisplayCommandName(commandName) {
+  if (commandName.startsWith("MAV_CMD_NAV_")) {
+    commandName = commandName.replace("MAV_CMD_NAV_", "")
+  } else if (commandName.startsWith("MAV_CMD_")) {
+    commandName = commandName.replace("MAV_CMD_", "")
+  }
+
+  return commandName
+}
+
+function getAvailableCommands() {
+  var commandsList = FENCE_ITEM_COMMANDS_LIST
+
+  return Object.entries(commandsList).map(([key, value]) => ({
+    value: key,
+    label: getDisplayCommandName(value),
+  }))
+}
+
+function getFrameName(frameId) {
+  var frameName = MAV_FRAME_LIST[frameId]
+
+  if (frameName.startsWith("MAV_FRAME_")) {
+    frameName = frameName.replace("MAV_FRAME_", "")
+  }
+
+  return frameName || "UNKNOWN"
+}
+
+export default function FenceItemsTableRow({
+  index,
+  fenceItem,
+  updateMissionItem,
+  deleteMissionItem,
+  updateMissionItemOrder,
+}) {
+  const [fenceItemData, setFenceItemData] = useState(fenceItem)
+
+  useEffect(() => {
+    setFenceItemData(fenceItem)
+  }, [fenceItem])
+
+  useEffect(() => {
+    updateMissionItem(fenceItemData)
+  }, [fenceItemData])
+
+  function updateFenceItemData(key, newVal) {
+    setFenceItemData({
+      ...fenceItemData,
+      [key]: newVal,
+    })
+  }
+
+  return (
+    <TableTr>
+      <TableTd>{index}</TableTd>
+      <TableTd>
+        <Select
+          data={getAvailableCommands()}
+          value={fenceItemData.command.toString()}
+          onChange={(value) => updateFenceItemData("command", parseInt(value))}
+          allowDeselect={false}
+        />
+      </TableTd>
+      <TableTd>
+        <NumberInput
+          value={fenceItemData.param1}
+          onChange={(val) => updateFenceItemData("param1", val)}
+          hideControls
+        />
+      </TableTd>
+      <TableTd>
+        <NumberInput value={fenceItemData.param2} hideControls disabled />
+      </TableTd>
+      <TableTd>
+        <NumberInput value={fenceItemData.param3} hideControls disabled />
+      </TableTd>
+      <TableTd>
+        <NumberInput value={fenceItemData.param4} hideControls disabled />
+      </TableTd>
+      <TableTd>
+        <NumberInput
+          value={intToCoord(fenceItemData.x).toFixed(coordsFractionDigits)}
+          onChange={(val) => updateFenceItemData("x", coordToInt(val))}
+          hideControls
+        />
+      </TableTd>
+      <TableTd>
+        <NumberInput
+          value={intToCoord(fenceItemData.y).toFixed(coordsFractionDigits)}
+          onChange={(val) => updateFenceItemData("y", coordToInt(val))}
+          hideControls
+        />
+      </TableTd>
+      <TableTd>
+        <NumberInput
+          value={fenceItemData.z}
+          onChange={(val) => updateFenceItemData("z", val)}
+          hideControls
+        />
+      </TableTd>
+      <TableTd>{getFrameName(fenceItemData.frame)}</TableTd>
+      <TableTd className="flex flex-row gap-2">
+        <ActionIcon
+          onClick={() => updateMissionItemOrder(fenceItemData.id, -1)}
+        >
+          <IconArrowUp size={20} />
+        </ActionIcon>
+        <ActionIcon onClick={() => updateMissionItemOrder(fenceItemData.id, 1)}>
+          <IconArrowDown size={20} />
+        </ActionIcon>
+        <ActionIcon
+          onClick={() => deleteMissionItem(fenceItemData.id)}
+          color="red"
+        >
+          <IconTrash size={20} />
+        </ActionIcon>
+      </TableTd>
+    </TableTr>
+  )
+}
diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx
index ba5dc84c6..09167b223 100644
--- a/gcs/src/components/missions/missionsMap.jsx
+++ b/gcs/src/components/missions/missionsMap.jsx
@@ -20,19 +20,23 @@ import "maplibre-gl/dist/maplibre-gl.css"
 import Map from "react-map-gl/maplibre"
 
 // Helper scripts
-import { intToCoord } from "../../helpers/dataFormatters"
+import { v4 as uuidv4 } from "uuid"
+import { coordToInt, intToCoord } from "../../helpers/dataFormatters"
 import { filterMissionItems } from "../../helpers/filterMissions"
 import { showNotification } from "../../helpers/notification"
 import { useSettings } from "../../helpers/settings"
 
 // Other dashboard imports
 import ContextMenuItem from "../mapComponents/contextMenuItem"
-import DrawLineCoordinates from "../mapComponents/drawLineCoordinates"
+import ContextMenuSubMenuItem from "../mapComponents/contextMenuSubMenuItem"
 import DroneMarker from "../mapComponents/droneMarker"
+import FenceItems from "../mapComponents/fenceItems"
 import HomeMarker from "../mapComponents/homeMarker"
 import MarkerPin from "../mapComponents/markerPin"
 import MissionItems from "../mapComponents/missionItems"
+import Polygon from "../mapComponents/polygon"
 import useContextMenu from "../mapComponents/useContextMenu"
+import Divider from "../toolbar/menus/divider"
 
 // Tailwind styling
 import resolveConfig from "tailwindcss/resolveConfig"
@@ -55,6 +59,7 @@ function MapSectionNonMemo({
   addNewMissionItem,
   updateMissionHomePosition,
   clearMissionItems,
+  addFencePolygon,
   mapId = "dashboard",
 }) {
   const [connected] = useSessionStorage({
@@ -99,6 +104,9 @@ function MapSectionNonMemo({
 
   const clipboard = useClipboard({ timeout: 500 })
 
+  const [polygonDrawMode, setPolygonDrawMode] = useState(false)
+  const [polygonPoints, setPolygonPoints] = useState([])
+
   useEffect(() => {
     return () => {}
   }, [connected])
@@ -171,6 +179,53 @@ function MapSectionNonMemo({
     }
   }, [homePosition])
 
+  function addNewPolygonVertex(lat, lon) {
+    if (!polygonDrawMode) return
+
+    // Add new point to polygon points
+    setPolygonPoints((prevPoints) => [
+      ...prevPoints,
+      { id: uuidv4(), lat: lat, lon: lon },
+    ])
+  }
+
+  function updatePolygonVertex(updatedPolygonVertex) {
+    setPolygonPoints((prevPoints) =>
+      prevPoints.map((item) =>
+        item.id === updatedPolygonVertex.id
+          ? {
+              ...item,
+              lat: intToCoord(updatedPolygonVertex.x),
+              lon: intToCoord(updatedPolygonVertex.y),
+            }
+          : item,
+      ),
+    )
+  }
+
+  function convertPolygonToFenceItems(fenceType) {
+    if (polygonPoints.length < 3) {
+      showNotification("Polygon must have at least 3 points to be valid")
+      return
+    }
+
+    const fenceItems = polygonPoints.map((point, index) => ({
+      id: point.id,
+      command: fenceType === "inclusion" ? 5001 : 5002, // 5001 for inclusion, 5002 for exclusion
+      param1: polygonPoints.length, // Number of points in the polygon
+      param2: 0,
+      param3: 0,
+      param4: 0,
+      x: coordToInt(point.lat),
+      y: coordToInt(point.lon),
+      z: index,
+    }))
+
+    addFencePolygon(fenceItems)
+    setPolygonPoints([])
+    setPolygonDrawMode(false)
+  }
+
   return (
     <div className="w-initial h-full" id="map">
       <Map
@@ -200,11 +255,19 @@ function MapSectionNonMemo({
             },
           })
         }}
+        onMouseDown={() => {
+          setClicked(false)
+        }}
         onClick={(e) => {
           setClicked(false)
           let lat = e.lngLat.lat
           let lon = e.lngLat.lng
-          addNewMissionItem(lat, lon)
+
+          if (polygonDrawMode) {
+            addNewPolygonVertex(lat, lon)
+          } else {
+            addNewMissionItem(lat, lon)
+          }
         }}
         cursor="default"
       >
@@ -222,41 +285,23 @@ function MapSectionNonMemo({
             />
           )}
 
+        <Polygon
+          polygonPoints={polygonPoints}
+          editable={polygonDrawMode}
+          dragEndCallback={updatePolygonVertex}
+        />
+
         <MissionItems
           missionItems={missionItemsList}
           editable={currentTab === "mission"}
           dragEndCallback={markerDragEndCallback}
         />
 
-        {/* Show mission geo-fence MARKERS */}
-        {missionItems.fence_items.map((item, index) => {
-          return (
-            <MarkerPin
-              key={index}
-              lat={intToCoord(item.x)}
-              lon={intToCoord(item.y)}
-              colour={tailwindColors.blue[400]}
-            />
-          )
-        })}
-
-        {/* Show geo-fence outlines */}
-        {missionItems.fence_items.length > 0 && (
-          <DrawLineCoordinates
-            coordinates={[
-              ...missionItems.fence_items.map((item) => [
-                intToCoord(item.y),
-                intToCoord(item.x),
-              ]),
-              [
-                intToCoord(missionItems.fence_items[0].y),
-                intToCoord(missionItems.fence_items[0].x),
-              ],
-            ]}
-            colour={tailwindColors.blue[200]}
-            lineProps={{ "line-dasharray": [2, 2] }}
-          />
-        )}
+        <FenceItems
+          fenceItems={missionItems.fence_items}
+          editable={currentTab === "fence"}
+          dragEndCallback={markerDragEndCallback}
+        />
 
         {/* Show mission rally point */}
         {missionItems.rally_items.map((item, index) => {
@@ -317,24 +362,22 @@ function MapSectionNonMemo({
                 showNotification("Copied to clipboard")
               }}
             >
-              <div className="w-full flex justify-between gap-2">
-                <p>
-                  {clickedGpsCoords.lat.toFixed(coordsFractionDigits)},{" "}
-                  {clickedGpsCoords.lng.toFixed(coordsFractionDigits)}
-                </p>
-                <svg
-                  className="relative -right-1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm0-2h9V4H9zm-4 6q-.825 0-1.412-.587T3 20V7q0-.425.288-.712T4 6t.713.288T5 7v13h10q.425 0 .713.288T16 21t-.288.713T15 22zm4-6V4z"
-                  />
-                </svg>
-              </div>
+              <p>
+                {clickedGpsCoords.lat.toFixed(coordsFractionDigits)},{" "}
+                {clickedGpsCoords.lng.toFixed(coordsFractionDigits)}
+              </p>
+              <svg
+                className="relative -right-1"
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm0-2h9V4H9zm-4 6q-.825 0-1.412-.587T3 20V7q0-.425.288-.712T4 6t.713.288T5 7v13h10q.425 0 .713.288T16 21t-.288.713T15 22zm4-6V4z"
+                />
+              </svg>
             </ContextMenuItem>
             <ContextMenuItem
               onClick={() => {
@@ -344,15 +387,47 @@ function MapSectionNonMemo({
                 )
               }}
             >
-              <div className="w-full flex justify-between gap-2">
-                <p>Set home position</p>
-              </div>
+              <p>Set home position</p>
             </ContextMenuItem>
             <ContextMenuItem onClick={clearMissionItems}>
-              <div className="w-full flex justify-between gap-2">
-                <p>Clear mission</p>
-              </div>
+              <p>Clear mission</p>
             </ContextMenuItem>
+            <Divider />
+            <ContextMenuSubMenuItem title={"Polygon"}>
+              <ContextMenuItem
+                onClick={() => {
+                  setPolygonDrawMode(true)
+                }}
+              >
+                <p>Draw polygon</p>
+              </ContextMenuItem>
+              <ContextMenuItem
+                onClick={() => {
+                  setPolygonPoints([])
+                  setPolygonDrawMode(false)
+                }}
+              >
+                <p>Clear polygon</p>
+              </ContextMenuItem>
+              {currentTab === "fence" && (
+                <>
+                  <ContextMenuItem
+                    onClick={() => {
+                      convertPolygonToFenceItems("inclusion")
+                    }}
+                  >
+                    <p>Fence inclusion</p>
+                  </ContextMenuItem>
+                  <ContextMenuItem
+                    onClick={() => {
+                      convertPolygonToFenceItems("exclusion")
+                    }}
+                  >
+                    <p>Fence exclusion</p>
+                  </ContextMenuItem>
+                </>
+              )}
+            </ContextMenuSubMenuItem>
           </div>
         )}
       </Map>
diff --git a/gcs/src/components/missions/rallyItemsTable.jsx b/gcs/src/components/missions/rallyItemsTable.jsx
index dc1ea9820..6666742a7 100644
--- a/gcs/src/components/missions/rallyItemsTable.jsx
+++ b/gcs/src/components/missions/rallyItemsTable.jsx
@@ -16,10 +16,10 @@ function RallyItemsTableNonMemo({
         <Table.Tr>
           <Table.Th></Table.Th>
           <Table.Th>Command</Table.Th>
-          <Table.Th>Param 1</Table.Th>
-          <Table.Th>Param 2</Table.Th>
-          <Table.Th>Param 3</Table.Th>
-          <Table.Th>Param 4</Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
           <Table.Th>Lat</Table.Th>
           <Table.Th>Lng</Table.Th>
           <Table.Th>Alt</Table.Th>
diff --git a/gcs/src/helpers/mavlinkConstants.js b/gcs/src/helpers/mavlinkConstants.js
index d26a19843..bf87d7086 100644
--- a/gcs/src/helpers/mavlinkConstants.js
+++ b/gcs/src/helpers/mavlinkConstants.js
@@ -444,12 +444,11 @@ export const COPTER_MISSION_ITEM_COMMANDS_LIST = {
   526: "MAV_CMD_STORAGE_FORMAT",
 }
 
-// TODO: implement
 export const FENCE_ITEM_COMMANDS_LIST = {
-  // 5001: "MAV_CMD_NAV_FENCE_POLYGON_VERTEX_INCLUSION",
-  // 5002: "MAV_CMD_NAV_FENCE_POLYGON_VERTEX_EXCLUSION",
-  // 5003: 'MAV_CMD_NAV_FENCE_CIRCLE_INCLUSION',
-  // 5004: 'MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION',
+  5001: "MAV_CMD_NAV_FENCE_POLYGON_VERTEX_INCLUSION",
+  5002: "MAV_CMD_NAV_FENCE_POLYGON_VERTEX_EXCLUSION",
+  5003: "MAV_CMD_NAV_FENCE_CIRCLE_INCLUSION",
+  5004: "MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION",
 }
 
 export const MAV_FRAME_LIST = {
diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx
index fd0b1181f..2f2f8066e 100644
--- a/gcs/src/missions.jsx
+++ b/gcs/src/missions.jsx
@@ -26,6 +26,7 @@ import {
 } from "@mantine/core"
 import { IconInfoCircle } from "@tabler/icons-react"
 import Layout from "./components/layout"
+import FenceItemsTable from "./components/missions/fenceItemsTable"
 import MissionItemsTable from "./components/missions/missionItemsTable"
 import MissionsMapSection from "./components/missions/missionsMap"
 import RallyItemsTable from "./components/missions/rallyItemsTable"
@@ -43,6 +44,11 @@ import {
 } from "./helpers/notification"
 import { socket } from "./helpers/socket"
 
+// Tailwind styling
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../tailwind.config"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
 const coordsFractionDigits = 7
 
 export default function Missions() {
@@ -57,7 +63,7 @@ export default function Missions() {
 
   const [activeTab, setActiveTab] = useState("mission")
 
-  // Mission
+  // Mission data
   const [missionItems, setMissionItems] = useSessionStorage({
     key: "missionItems",
     defaultValue: [],
@@ -78,11 +84,12 @@ export default function Missions() {
     key: "targetInfo",
     defaultValue: { target_component: 0, target_system: 255 },
   })
+
+  // File import handling
   const [importFile, setImportFile] = useState(null)
   const importFileResetRef = useRef(null)
 
-  const newMissionItemAltitude = 30 // TODO: Make this configurable
-
+  // Modal for mission progress
   const [
     missionProgressModalOpened,
     { open: openMissionProgressModal, close: closeMissionProgressModal },
@@ -92,17 +99,14 @@ export default function Missions() {
   )
   const [missionProgressModalData, setMissionProgressModalData] = useState({})
 
-  // Heartbeat data
+  // Drone data
   const [heartbeatData, setHeartbeatData] = useState({ system_status: 0 })
-
-  // GPS and Telemetry
   const [gpsData, setGpsData] = useState({})
+  const [navControllerOutputData, setNavControllerOutputData] = useState({})
 
-  // Map and messages
   const mapRef = useRef()
 
-  // System data
-  const [navControllerOutputData, setNavControllerOutputData] = useState({})
+  const newMissionItemAltitude = 30 // TODO: Make this configurable
 
   const incomingMessageHandler = useCallback(
     () => ({
@@ -117,6 +121,10 @@ export default function Missions() {
     [],
   )
 
+  useEffect(() => {
+    setActiveTab("mission") // Default to mission tab on load
+  }, [])
+
   useEffect(() => {
     if (!connected) {
       return
@@ -162,7 +170,11 @@ export default function Missions() {
         updateHomePositionBasedOnWaypoints(missionItemsWithIds)
         setMissionItems(missionItemsWithIds)
       } else if (data.mission_type === "fence") {
-        setFenceItems(data.items)
+        const fenceItemsWithIds = []
+        for (let fence of data.items) {
+          fenceItemsWithIds.push(addIdToItem(fence))
+        }
+        setFenceItems(fenceItemsWithIds)
       } else if (data.mission_type === "rally") {
         const rallyItemsWithIds = []
         for (let rallyItem of data.items) {
@@ -196,7 +208,11 @@ export default function Missions() {
 
           setMissionItems(missionItemsWithIds)
         } else if (data.mission_type === "fence") {
-          setFenceItems(data.items)
+          const fenceItemsWithIds = []
+          for (let fence of data.items) {
+            fenceItemsWithIds.push(addIdToItem(fence))
+          }
+          setFenceItems(fenceItemsWithIds)
         } else if (data.mission_type === "rally") {
           const rallyItemsWithIds = []
           for (let rallyItem of data.items) {
@@ -305,7 +321,7 @@ export default function Missions() {
         ),
       ),
       command: null,
-      param1: 0,
+      param1: activeTab === "fence" ? 5 : 0,
       param2: 0,
       param3: 0,
       param4: 0,
@@ -325,7 +341,7 @@ export default function Missions() {
       setMissionItems((prevItems) => [...prevItems, newMissionItem])
     } else if (activeTab === "fence") {
       newMissionItem.seq = fenceItems.length
-      newMissionItem.command = 5100 // MAV_CMD_NAV_FENCE_POINT
+      newMissionItem.command = 5004 // MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION
       newMissionItem.mission_type = 1 // Fence type
 
       setFenceItems((prevItems) => [...prevItems, newMissionItem])
@@ -390,7 +406,7 @@ export default function Missions() {
     if (activeTab === "mission") {
       setMissionItems((prevItems) => getUpdatedItems(prevItems))
     } else if (activeTab === "fence") {
-      // TODO: Implement fence item update logic
+      setFenceItems((prevItems) => getUpdatedItems(prevItems))
     } else if (activeTab === "rally") {
       setRallyItems((prevItems) => getUpdatedItems(prevItems))
     }
@@ -409,14 +425,14 @@ export default function Missions() {
     if (activeTab === "mission") {
       setMissionItems((prevItems) => getUpdatedItems(prevItems))
     } else if (activeTab === "fence") {
-      // TODO: Implement fence item deletion logic
+      setFenceItems((prevItems) => getUpdatedItems(prevItems))
     } else if (activeTab === "rally") {
       setRallyItems((prevItems) => getUpdatedItems(prevItems))
     }
   }
 
   function updateMissionItemOrder(missionItemId, indexIncrement) {
-    setMissionItems((prevItems) => {
+    function updateItemOrder(prevItems) {
       const currentIndex = prevItems.findIndex(
         (item) => item.id === missionItemId,
       )
@@ -446,7 +462,13 @@ export default function Missions() {
       updatedItems[newIndex].seq = newIndex
 
       return updatedItems
-    })
+    }
+
+    if (activeTab === "mission") {
+      setMissionItems((prevItems) => updateItemOrder(prevItems))
+    } else if (activeTab === "fence") {
+      setFenceItems((prevItems) => updateItemOrder(prevItems))
+    }
   }
 
   function readMissionFromDrone() {
@@ -501,6 +523,17 @@ export default function Missions() {
         items = [...missionItems]
       } else if (activeTab === "fence") {
         items = [...fenceItems]
+
+        const newHomeItem = createHomePositionItem()
+        if (newHomeItem) {
+          items.unshift(newHomeItem) // Add home item at the beginning
+        }
+
+        // Ensure all sequence values are updated
+        items = items.map((item, index) => ({
+          ...item,
+          seq: index,
+        }))
       } else if (activeTab === "rally") {
         items = [...rallyItems]
 
@@ -589,6 +622,43 @@ export default function Missions() {
     }
   }
 
+  function addFencePolygon(newFenceItems) {
+    let seqNumber =
+      fenceItems.length > 0 ? fenceItems[fenceItems.length - 1].seq + 1 : 0
+
+    const newFenceMissionItems = newFenceItems.map((item) => {
+      const newFenceMissionItem = {
+        id: item.id,
+        seq: seqNumber,
+        x: item.x,
+        y: item.y,
+        z: item.z,
+        frame: parseInt(
+          Object.keys(MAV_FRAME_LIST).find(
+            (key) => MAV_FRAME_LIST[key] === "MAV_FRAME_GLOBAL_RELATIVE_ALT",
+          ),
+        ),
+        command: item.command,
+        param1: item.param1,
+        param2: item.param2,
+        param3: item.param3,
+        param4: item.param4,
+        current: 0,
+        autocontinue: 1,
+        target_component: targetInfo.target_component,
+        target_system: targetInfo.target_system,
+        mission_type: 1, // Fence type
+        mavpackettype: "MISSION_ITEM_INT",
+      }
+
+      seqNumber++
+
+      return newFenceMissionItem
+    })
+
+    setFenceItems((prevItems) => [...prevItems, ...newFenceMissionItems])
+  }
+
   return (
     <Layout currentPage="missions">
       <Modal
@@ -740,6 +810,7 @@ export default function Missions() {
                   addNewMissionItem={addNewMissionItem}
                   updateMissionHomePosition={updateMissionHomePosition}
                   clearMissionItems={clearMissionItems}
+                  addFencePolygon={addFencePolygon}
                   mapId="missions"
                 />
               </div>
@@ -763,9 +834,18 @@ export default function Missions() {
                   className="mt-2"
                 >
                   <Tabs.List grow>
-                    <Tabs.Tab value="mission">Mission</Tabs.Tab>
-                    <Tabs.Tab value="fence">Fence</Tabs.Tab>
-                    <Tabs.Tab value="rally">Rally</Tabs.Tab>
+                    <Tabs.Tab
+                      value="mission"
+                      color={tailwindColors.yellow[400]}
+                    >
+                      Mission
+                    </Tabs.Tab>
+                    <Tabs.Tab value="fence" color={tailwindColors.blue[400]}>
+                      Fence
+                    </Tabs.Tab>
+                    <Tabs.Tab value="rally" color={tailwindColors.purple[400]}>
+                      Rally
+                    </Tabs.Tab>
                   </Tabs.List>
 
                   <Tabs.Panel value="mission">
@@ -777,7 +857,14 @@ export default function Missions() {
                       updateMissionItemOrder={updateMissionItemOrder}
                     />
                   </Tabs.Panel>
-                  <Tabs.Panel value="fence"></Tabs.Panel>
+                  <Tabs.Panel value="fence">
+                    <FenceItemsTable
+                      fenceItems={fenceItems}
+                      updateMissionItem={updateMissionItem}
+                      deleteMissionItem={deleteMissionItem}
+                      updateMissionItemOrder={updateMissionItemOrder}
+                    />
+                  </Tabs.Panel>
                   <Tabs.Panel value="rally">
                     <RallyItemsTable
                       rallyItems={rallyItems}