diff --git a/apps/fishing-map/features/timebar/TimebarActivityGraph.hooks.ts b/apps/fishing-map/features/timebar/TimebarActivityGraph.hooks.ts
index 11607a2722..70cd6b8b5b 100644
--- a/apps/fishing-map/features/timebar/TimebarActivityGraph.hooks.ts
+++ b/apps/fishing-map/features/timebar/TimebarActivityGraph.hooks.ts
@@ -53,7 +53,7 @@ export const useHeatmapActivityGraph = () => {
         }) || EMPTY_ACTIVITY_DATA
       setData(data)
     },
-    [chunk, instance]
+    [chunk, instance?.props?.sublayers]
   )
 
   const setFourwingsHeatmapData = useCallback(
@@ -74,7 +74,13 @@ export const useHeatmapActivityGraph = () => {
         setData(EMPTY_ACTIVITY_DATA)
       }
     },
-    [chunk, instance]
+    [
+      chunk,
+      instance?.props?.aggregationOperation,
+      instance?.props?.maxVisibleValue,
+      instance?.props?.minVisibleValue,
+      instance?.props?.sublayers,
+    ]
   )
 
   useEffect(() => {
diff --git a/apps/fishing-map/features/timebar/timebar.utils.ts b/apps/fishing-map/features/timebar/timebar.utils.ts
index 349fac1593..d63d918fce 100644
--- a/apps/fishing-map/features/timebar/timebar.utils.ts
+++ b/apps/fishing-map/features/timebar/timebar.utils.ts
@@ -83,7 +83,10 @@ export function getGraphDataFromFourwingsPositions(
   features.forEach((feature) => {
     const { htime, value, layer } = feature.properties
     if (htime && value) {
-      const date = getDateInIntervalResolution(CONFIG_BY_INTERVAL['HOUR'].getTime(htime), interval)
+      const date = getDateInIntervalResolution(
+        CONFIG_BY_INTERVAL['HOUR'].getIntervalTimestamp(htime),
+        interval
+      )
       if (!data[date]) {
         data[date] = { date }
       }
@@ -191,7 +194,7 @@ export function getGraphDataFromFourwingsHeatmap(
     })
   }
 
-  return Object.values(data).map(({ date, count, ...rest }: any) => {
+  const timeseries = Object.values(data).map(({ date, count, ...rest }: any) => {
     Object.keys(rest).forEach((key) => {
       if (aggregationOperation === 'avg') {
         const indexKey = parseInt(key)
@@ -202,4 +205,53 @@ export function getGraphDataFromFourwingsHeatmap(
     })
     return { date, ...rest }
   })
+
+  // Inserts a middle point for every sublayer at the start and end of the dataset
+  const extentStarts = sublayers
+    .map((sublayer, index) => ({ extent: sublayer.extentStart, index }))
+    .sort((a, b) => a?.extent! - b?.extent!)
+  const extentEnds = sublayers
+    .map((sublayer, index) => ({ extent: sublayer.extentEnd, index }))
+    .sort((a, b) => a?.extent! - b?.extent!)
+
+  extentStarts.forEach(({ extent, index }) => {
+    if (extent) {
+      const firstSublayerValueIndex = timeseries.findIndex((v) => v.date >= extent!) - 1
+      if (firstSublayerValueIndex >= 0) {
+        // Use the initial date as a new element with all values 0
+        const initialStartDate = timeseries[firstSublayerValueIndex].date
+        const startData = {
+          ...timeseries[firstSublayerValueIndex],
+          date: initialStartDate,
+          [index]: 0,
+        }
+        timeseries.splice(firstSublayerValueIndex, 0, startData)
+        // And replace the original first element with the dataset start extent
+        timeseries[firstSublayerValueIndex + 1].date = extent
+      }
+    }
+  })
+
+  extentEnds.forEach(({ extent, index }) => {
+    if (extent) {
+      const lastSublayerValueIndex = timeseries.findLastIndex((frame) => frame[index] > 0)
+      if (lastSublayerValueIndex >= 0) {
+        const lastSublayerTime = timeseries[lastSublayerValueIndex]
+        const nextIntervalDate = DateTime.fromMillis(lastSublayerTime.date, {
+          zone: 'utc',
+        })
+          .plus({ [interval]: 1 })
+          .toMillis()
+        if (nextIntervalDate > extent) {
+          timeseries.splice(lastSublayerValueIndex + 1, 0, {
+            ...lastSublayerTime,
+            date: extent,
+            [index]: 0,
+          })
+        }
+      }
+    }
+  })
+
+  return timeseries
 }
diff --git a/libs/deck-layer-composer/src/resolvers/fourwings.ts b/libs/deck-layer-composer/src/resolvers/fourwings.ts
index 17c8e2badc..12ac2a0653 100644
--- a/libs/deck-layer-composer/src/resolvers/fourwings.ts
+++ b/libs/deck-layer-composer/src/resolvers/fourwings.ts
@@ -42,6 +42,9 @@ export const resolveDeckFourwingsLayerProps: DeckResolverFunction<FourwingsLayer
     const positionProperties = uniq(
       sublayer?.datasets.flatMap((dataset) => Object.keys(dataset?.schema || {}))
     )
+    const { extentStart, extentEnd } = getDatasetsExtent(sublayer.datasets, {
+      format: 'timestamp',
+    })
 
     if (units.length > 0 && units.length !== 1) {
       console.warn('Shouldnt have distinct units for the same heatmap layer')
@@ -58,6 +61,8 @@ export const resolveDeckFourwingsLayerProps: DeckResolverFunction<FourwingsLayer
       unit: units[0]!,
       filter: sublayer?.filter,
       vesselGroups: sublayer?.vesselGroups,
+      extentStart: extentStart as number,
+      extentEnd: extentEnd as number,
     }
   })
 
diff --git a/libs/deck-layers/src/layers/fourwings/fourwings.types.ts b/libs/deck-layers/src/layers/fourwings/fourwings.types.ts
index 252ba48e3d..9faf9071f0 100644
--- a/libs/deck-layers/src/layers/fourwings/fourwings.types.ts
+++ b/libs/deck-layers/src/layers/fourwings/fourwings.types.ts
@@ -51,6 +51,8 @@ export type FourwingsDeckSublayer = {
   filter?: string
   positionProperties?: string[]
   vesselGroups?: string | string[]
+  extentStart?: number
+  extentEnd?: number
 }
 
 export type BaseFourwingsLayerProps = DeckLayerProps<{
diff --git a/libs/deck-layers/src/layers/fourwings/positions/FourwingsPositionsTileLayer.ts b/libs/deck-layers/src/layers/fourwings/positions/FourwingsPositionsTileLayer.ts
index a1a62ebe7f..dda38e6383 100644
--- a/libs/deck-layers/src/layers/fourwings/positions/FourwingsPositionsTileLayer.ts
+++ b/libs/deck-layers/src/layers/fourwings/positions/FourwingsPositionsTileLayer.ts
@@ -215,7 +215,7 @@ export class FourwingsPositionsTileLayer extends CompositeLayer<
     const { colorScale } = this.state
     const { colorDomain, colorRange } = colorScale as FourwingsTileLayerColorScale
     const { highlightStartTime, highlightEndTime } = this.props
-    const date = CONFIG_BY_INTERVAL['HOUR'].getTime(d.properties.htime)
+    const date = CONFIG_BY_INTERVAL['HOUR'].getIntervalTimestamp(d.properties.htime)
     if (
       highlightStartTime &&
       highlightEndTime &&
diff --git a/libs/deck-loaders/src/fourwings/helpers/time.ts b/libs/deck-loaders/src/fourwings/helpers/time.ts
index 30e0790002..8d255726fd 100644
--- a/libs/deck-loaders/src/fourwings/helpers/time.ts
+++ b/libs/deck-loaders/src/fourwings/helpers/time.ts
@@ -54,10 +54,13 @@ export const getFourwingsInterval = (
 
 export const CONFIG_BY_INTERVAL: Record<
   FourwingsInterval,
-  Record<'getTime' | 'getIntervalFrame', any>
+  {
+    getIntervalTimestamp: (frame: number) => number
+    getIntervalFrame: (timestamp: number) => number
+  }
 > = {
   HOUR: {
-    getTime: (frame: number) => {
+    getIntervalTimestamp: (frame: number) => {
       return frame * 1000 * 60 * 60
     },
     getIntervalFrame: (timestamp: number) => {
@@ -65,7 +68,7 @@ export const CONFIG_BY_INTERVAL: Record<
     },
   },
   DAY: {
-    getTime: (frame: number) => {
+    getIntervalTimestamp: (frame: number) => {
       return frame * 1000 * 60 * 60 * 24
     },
     getIntervalFrame: (timestamp: number) => {
@@ -73,7 +76,7 @@ export const CONFIG_BY_INTERVAL: Record<
     },
   },
   MONTH: {
-    getTime: (frame: number) => {
+    getIntervalTimestamp: (frame: number) => {
       const year = Math.floor(frame / 12)
       const month = frame % 12
       return Date.UTC(year, month)
@@ -84,7 +87,7 @@ export const CONFIG_BY_INTERVAL: Record<
     },
   },
   YEAR: {
-    getTime: (frame: number) => {
+    getIntervalTimestamp: (frame: number) => {
       return Date.UTC(frame)
     },
     getIntervalFrame: (timestamp: number) => {
diff --git a/libs/deck-loaders/src/fourwings/lib/parse-fourwings.ts b/libs/deck-loaders/src/fourwings/lib/parse-fourwings.ts
index 17f797f835..9ebe1883e8 100644
--- a/libs/deck-loaders/src/fourwings/lib/parse-fourwings.ts
+++ b/libs/deck-loaders/src/fourwings/lib/parse-fourwings.ts
@@ -120,7 +120,7 @@ export const getCellTimeseries = (
               cellValue * scale - offset
             // add current date to the array of dates for this sublayer
             features[cellNum].properties.dates[subLayerIndex][Math.floor(j / sublayers)] =
-              CONFIG_BY_INTERVAL[interval].getTime(startFrame + tileStartFrame + j)
+              CONFIG_BY_INTERVAL[interval].getIntervalTimestamp(startFrame + tileStartFrame + j)
 
             // sum current value to the initialValue for this sublayer
             if (j + startFrame >= timeRangeStartFrame && j + startFrame < timeRangeEndFrame) {