diff --git a/package.json b/package.json
index 467f1e14c..e79eaec71 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "@vueuse/math": "^10.1.2",
     "@zip.js/zip.js": "^2.7.34",
     "browser-or-node": "^2.0.0",
+    "cesium": "^1.123.1",
     "colord": "^2.9.3",
     "date-fns": "^2.29.3",
     "file-saver": "^2.0.5",
@@ -52,6 +53,7 @@
     "leaflet": "1.9.3",
     "localforage": "^1.10.0",
     "mathjs": "^13.0.3",
+    "mavlink-browser": "git+https://github.com/williangalvani/mavlink-browser.git#cockpit_updates",
     "pinia": "^2.0.13",
     "roboto-fontface": "*",
     "semver": "^7.5.4",
@@ -59,6 +61,7 @@
     "sweetalert2": "^11.7.1",
     "tailwind-scrollbar-hide": "^1.1.7",
     "uuid": "^8.3.2",
+    "vite-plugin-cesium": "^1.2.23",
     "vue": "^3.4.21",
     "vue-draggable-plus": "^0.2.0-beta.2",
     "vue-router": "^4.0.14",
diff --git a/public/models/bluerov.glb b/public/models/bluerov.glb
new file mode 100755
index 000000000..d64a154c8
Binary files /dev/null and b/public/models/bluerov.glb differ
diff --git a/public/models/boat.glb b/public/models/boat.glb
new file mode 100755
index 000000000..8a4d43cec
Binary files /dev/null and b/public/models/boat.glb differ
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 63aef0f46..16b1b4b98 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -678,6 +678,7 @@ const widgetImages = {
   IFrame: IFrameImg,
   ImageView: ImageViewImg,
   Map: MapImg,
+  Cesium: MapImg,
   MiniWidgetsBar: MiniWidgetsBarImg,
   URLVideoPlayer: URLVideoPlayerImg,
   VideoPlayer: VideoPlayerImg,
diff --git a/src/components/widgets/Cesium.vue b/src/components/widgets/Cesium.vue
new file mode 100644
index 000000000..90a338946
--- /dev/null
+++ b/src/components/widgets/Cesium.vue
@@ -0,0 +1,342 @@
+<template>
+  <div ref="mapBase" class="page-base" :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'">
+    <div ref="cesiumContainer" class="map"></div>
+
+    <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" width="auto">
+      <v-card class="pa-2" :style="interfaceStore.globalGlassMenuStyles">
+        <v-card-title class="text-center">Map widget settings</v-card-title>
+        <v-card-text>
+          <v-switch
+            v-model="widget.options.showVehiclePath"
+            class="my-1"
+            label="Show vehicle path"
+            :color="widget.options.showVehiclePath ? 'white' : undefined"
+            hide-details
+          />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Ref, computed, onBeforeMount, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
+import { 
+  Viewer, 
+  createWorldTerrainAsync, 
+  Cartesian3, 
+  Entity, 
+  HeightReference,
+  ModelGraphics,
+  CallbackProperty,
+  HeadingPitchRoll,
+  Math as CesiumMath,
+  Transforms,
+  Quaternion,
+  JulianDate
+} from 'cesium'
+import 'cesium/Build/Cesium/Widgets/widgets.css'
+
+import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
+import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useMainVehicleStore } from '@/stores/mainVehicle'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import type { WaypointCoordinates } from '@/types/mission'
+import type { Widget } from '@/types/widgets'
+
+// Initialize stores
+const vehicleStore = useMainVehicleStore()
+const interfaceStore = useAppInterfaceStore()
+const widgetStore = useWidgetManagerStore()
+
+// Define props
+const props = defineProps<{ widget: Widget }>()
+const widget = toRefs(props).widget
+
+// Set up refs
+const cesiumContainer = ref<HTMLElement | null>(null)
+const viewer = ref<Viewer | null>(null)
+const vehicleEntity = ref<Entity | null>(null)
+const mapBase = ref<HTMLElement>()
+
+interface Position {
+  lat: number;
+  lon: number;
+  alt: number;
+  timestamp: number;
+}
+
+interface Attitude {
+  yaw: number;
+  pitch: number;
+  roll: number;
+  timestamp: number;
+}
+
+const prevPosition = ref<Position | null>(null)
+const currentPosition = ref<Position | null>(null)
+const prevAttitude = ref<Attitude | null>(null)
+const currentAttitude = ref<Attitude | null>(null)
+
+// Track update rates
+const updateIntervals = ref<number[]>([])
+const maxIntervalSamples = 10
+const getAverageUpdateInterval = () => {
+  if (updateIntervals.value.length === 0) return 200 // Default fallback
+  const sum = updateIntervals.value.reduce((a, b) => a + b, 0)
+  return sum / updateIntervals.value.length
+}
+
+// Watch for position and attitude changes
+watch(() => vehicleStore.coordinates, (newCoords) => {
+  if (newCoords.latitude && newCoords.longitude) {
+    const now = Date.now()
+    
+    if (currentPosition.value) {
+      // Update our interval tracking
+      const interval = now - currentPosition.value.timestamp
+      updateIntervals.value.push(interval)
+      if (updateIntervals.value.length > maxIntervalSamples) {
+        updateIntervals.value.shift()
+      }
+      
+      prevPosition.value = currentPosition.value
+    }
+    
+    currentPosition.value = {
+      lat: newCoords.latitude,
+      lon: newCoords.longitude,
+      alt: newCoords.altitude,
+      timestamp: now
+    }
+  }
+}, { deep: true })
+
+watch(() => vehicleStore.attitude, (newAttitude) => {
+  const now = Date.now()
+  
+  if (currentAttitude.value) {
+    prevAttitude.value = currentAttitude.value
+  }
+  
+  currentAttitude.value = {
+    yaw: newAttitude.yaw,
+    pitch: newAttitude.pitch,
+    roll: newAttitude.roll,
+    timestamp: now
+  }
+}, { deep: true })
+
+const lerp = (start: number, end: number, factor: number) => {
+  return start + (end - start) * factor
+}
+
+const lerpAngle = (start: number, end: number, factor: number) => {
+  let diff = end - start
+  if (diff > globalThis.Math.PI) diff -= globalThis.Math.PI * 2
+  if (diff < -globalThis.Math.PI) diff += globalThis.Math.PI * 2
+  return start + diff * factor
+}
+
+// Create position callback property
+const createPositionCallback = () => {
+  return new CallbackProperty((time, result) => {
+    if (!currentPosition.value || !prevPosition.value) {
+      return currentPosition.value ? 
+        Cartesian3.fromDegrees(
+          currentPosition.value.lon,
+          currentPosition.value.lat,
+          currentPosition.value.alt
+        ) : undefined
+    }
+    
+    const now = Date.now()
+    const updateInterval = getAverageUpdateInterval()
+    const elapsed = now - currentPosition.value.timestamp
+    const expectedInterval = updateInterval * 1 // Add some buffer for jitter
+    
+    // Calculate interpolation factor based on elapsed time relative to expected interval
+    const interpolationFactor = globalThis.Math.min(elapsed / expectedInterval, 1)
+    
+    // If we're at or past the expected next update, just use current position
+    if (interpolationFactor >= 1) {
+      return Cartesian3.fromDegrees(
+        currentPosition.value.lon,
+        currentPosition.value.lat,
+        currentPosition.value.alt
+      )
+    }
+
+    // Apply smoothstep interpolation for more natural motion
+    const smoothFactor = interpolationFactor * interpolationFactor * (3 - 2 * interpolationFactor)
+    
+    // Interpolate between previous and current position
+    const lat = lerp(prevPosition.value.lat, currentPosition.value.lat, smoothFactor)
+    const lon = lerp(prevPosition.value.lon, currentPosition.value.lon, smoothFactor)
+    const alt = lerp(prevPosition.value.alt, currentPosition.value.alt, smoothFactor)
+
+    return Cartesian3.fromDegrees(lon, lat, alt)
+  }, false)
+}
+
+// Create orientation callback property
+const createOrientationCallback = () => {
+  return new CallbackProperty((time, result) => {
+    if (!currentAttitude.value || !currentPosition.value) {
+      return undefined
+    }
+    
+    if (!prevAttitude.value) {
+      const hpr = new HeadingPitchRoll(
+        currentAttitude.value.yaw - CesiumMath.PI_OVER_TWO,
+        currentAttitude.value.pitch,
+        currentAttitude.value.roll
+      )
+      
+      const position = Cartesian3.fromDegrees(
+        currentPosition.value.lon,
+        currentPosition.value.lat,
+        currentPosition.value.alt
+      )
+
+      result = result || new Quaternion()
+      return Transforms.headingPitchRollQuaternion(position, hpr)
+    }
+    
+    const now = Date.now()
+    const updateInterval = getAverageUpdateInterval()
+    const elapsed = now - currentAttitude.value.timestamp
+    const expectedInterval = updateInterval * 1.5 // Add some buffer for jitter
+    
+    // Calculate interpolation factor based on elapsed time relative to expected interval
+    const interpolationFactor = globalThis.Math.min(elapsed / expectedInterval, 1)
+    
+    // Apply smoothstep interpolation
+    const smoothFactor = interpolationFactor * interpolationFactor * (3 - 2 * interpolationFactor)
+    
+    // Interpolate angles
+    const yaw = lerpAngle(prevAttitude.value.yaw, currentAttitude.value.yaw, smoothFactor)
+    const pitch = lerpAngle(prevAttitude.value.pitch, currentAttitude.value.pitch, smoothFactor)
+    const roll = lerpAngle(prevAttitude.value.roll, currentAttitude.value.roll, smoothFactor)
+    
+    const hpr = new HeadingPitchRoll(
+      yaw - CesiumMath.PI_OVER_TWO,
+      pitch,
+      roll
+    )
+    
+    const position = Cartesian3.fromDegrees(
+      currentPosition.value.lon,
+      currentPosition.value.lat,
+      currentPosition.value.alt
+    )
+
+    result = result || new Quaternion()
+    return Transforms.headingPitchRollQuaternion(
+      position,
+      hpr
+    )
+  }, false)
+}
+
+
+// Get model configuration based on vehicle type
+const getModelConfig = () => {
+  let modelUrl = '/models/boat.glb'
+  let modelScale = 1.0
+  let modelMinPixelSize = 50
+
+  if (vehicleStore.vehicleType === MavType.MAV_TYPE_SURFACE_BOAT) {
+    modelUrl = '/models/boat.glb'
+    modelScale = 0.5
+  } else if (vehicleStore.vehicleType === MavType.MAV_TYPE_SUBMARINE) {
+    modelUrl = "/models/bluerov.glb"
+    modelScale = 10
+  }
+
+  return { modelUrl, modelScale, modelMinPixelSize }
+}
+
+// Initialize Cesium viewer
+onMounted(async () => {
+  if (!cesiumContainer.value) return
+
+  const terrainProvider = await createWorldTerrainAsync()
+
+  viewer.value = new Viewer(cesiumContainer.value, {
+    terrainProvider,
+    baseLayerPicker: false,
+    timeline: false,
+    animation: false,
+    homeButton: false,
+    navigationHelpButton: false,
+    sceneModePicker: false,
+    geocoder: false,
+    fullscreenButton: false
+  })
+
+  createVehicleEntity()
+})
+
+// Create and update vehicle entity
+const createVehicleEntity = () => {
+  if (!viewer.value) return
+
+  if (vehicleEntity.value) {
+    viewer.value.entities.remove(vehicleEntity.value)
+  }
+
+  const { modelUrl, modelScale, modelMinPixelSize } = getModelConfig()
+
+  vehicleEntity.value = viewer.value.entities.add({
+    position: createPositionCallback(),
+    orientation: createOrientationCallback(),
+    model: new ModelGraphics({
+      uri: modelUrl,
+      scale: modelScale,
+      minimumPixelSize: modelMinPixelSize,
+      maximumScale: 1000,
+      runAnimations: false,
+      heightReference: HeightReference.RELATIVE_TO_GROUND
+    })
+  })
+  
+  // Set the entity to be tracked by the camera
+  viewer.value.trackedEntity = vehicleEntity.value
+  
+  // Configure the tracking behavior
+  viewer.value.scene.camera.percentageChanged = 0.01
+}
+
+// Cleanup on unmount
+onBeforeUnmount(() => {
+  if (viewer.value) {
+    viewer.value.destroy()
+  }
+})
+</script>
+
+<style>
+.page-base {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.map {
+  position: absolute;
+  z-index: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.cesium-viewer-bottom {
+  display: none;
+}
+
+.cesium-widget-credits {
+  display: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/libs/connection/websocket-connection.ts b/src/libs/connection/websocket-connection.ts
index 2a56d1203..5ed8fa5f0 100644
--- a/src/libs/connection/websocket-connection.ts
+++ b/src/libs/connection/websocket-connection.ts
@@ -1,3 +1,5 @@
+import { MAVLink20Processor } from 'mavlink-browser'
+
 import * as Protocol from '@/libs/vehicle/protocol/protocol'
 
 import * as Connection from './connection'
@@ -9,7 +11,8 @@ export class WebSocketConnection extends Connection.Abstract {
   _socket: WebSocket
   private _textEncoder = new TextEncoder()
   private _textDecoder = new TextDecoder()
-
+  private mavlinkParser = new MAVLink20Processor(null, 255, 240)
+  private raw_mavlink_detected = false
   /**
    * Websocket constructor
    * @param  {Connection.URI} uri
@@ -17,7 +20,11 @@ export class WebSocketConnection extends Connection.Abstract {
    */
   constructor(uri: Connection.URI, vehicleProtocol: Protocol.Type) {
     super(uri, vehicleProtocol)
-
+    this.mavlinkParser.on('message', (message: any) => {
+      this.raw_mavlink_detected = true
+      const data = this._textEncoder.encode(this.mavlink2restfy(message))
+      this.onRead.emit_value(data)
+    })
     this._socket = this.createSocket(uri)
   }
 
@@ -54,7 +61,12 @@ export class WebSocketConnection extends Connection.Abstract {
    * @returns {boolean}
    */
   write(data: Uint8Array): boolean {
-    this._socket?.send(this._textDecoder.decode(data))
+    if (this.raw_mavlink_detected) {
+      data = this.mavlinkParser.fromMavlink2RestV1Format(this._textDecoder.decode(data))
+      this._socket?.send(data)
+    } else {
+      this._socket?.send(this._textDecoder.decode(data))
+    }
     return true
   }
 
@@ -72,7 +84,13 @@ export class WebSocketConnection extends Connection.Abstract {
     // We need to have the same abstraction for all onRead
     socket.onmessage = (message: MessageEvent) => {
       try {
-        this.onRead.emit_value(this._textEncoder.encode(message.data))
+        if (String.fromCharCode(message.data[0]) == '{') {
+          this.onRead.emit_value(this._textEncoder.encode(message.data))
+        } else {
+          new Response(message.data).arrayBuffer().then((buffer) => {
+            this.mavlinkParser.parseBuffer(new Uint8Array(buffer))
+          })
+        }
       } catch (error) {
         console.error('Error reading websocket message: ', error)
       }
@@ -84,4 +102,13 @@ export class WebSocketConnection extends Connection.Abstract {
     }
     return socket
   }
+
+  /**
+   *
+   * @param {any} message a "raw" MAVLink message as it comes from Mavlink20Processor
+   * @returns {string} a MAVLink2Rest-like stringified json object
+   */
+  mavlink2restfy(message): any {
+    return JSON.stringify(this.mavlinkParser.toMavlink2RestV1Format(message))
+  }
 }
diff --git a/src/types/widgets.ts b/src/types/widgets.ts
index 23e2f704e..f74c8408a 100644
--- a/src/types/widgets.ts
+++ b/src/types/widgets.ts
@@ -12,6 +12,7 @@ export enum WidgetType {
   IFrame = 'IFrame',
   ImageView = 'ImageView',
   Map = 'Map',
+  Cesium = 'Cesium',
   MiniWidgetsBar = 'MiniWidgetsBar',
   URLVideoPlayer = 'URLVideoPlayer',
   VideoPlayer = 'VideoPlayer',
diff --git a/vite.config.ts b/vite.config.ts
index 72c3d8fea..2c6e72863 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,7 @@ import { defineConfig } from 'vite'
 import electron, { startup, treeKillSync } from 'vite-plugin-electron'
 import { VitePWA } from 'vite-plugin-pwa'
 import vuetify from 'vite-plugin-vuetify'
+import cesium from 'vite-plugin-cesium'
 
 const path = require('path') // eslint-disable-line @typescript-eslint/no-var-requires
 
@@ -40,8 +41,12 @@ export default defineConfig({
       },
       includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
     }),
+    cesium(), // Add Cesium plugin
   ].filter(Boolean),
-  define: { 'process.env': {} },
+  define: { 
+    'process.env': {},
+    CESIUM_BASE_URL: JSON.stringify('')
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),
@@ -54,4 +59,4 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',
   },
-})
+})
\ No newline at end of file