diff --git a/libs/deck-layers/src/layers/vessel/vessel.utils.ts b/libs/deck-layers/src/layers/vessel/vessel.utils.ts
index 04b9e99ced..068fd14e2b 100644
--- a/libs/deck-layers/src/layers/vessel/vessel.utils.ts
+++ b/libs/deck-layers/src/layers/vessel/vessel.utils.ts
@@ -121,7 +121,7 @@ export const getSegmentsFromData = memoize(
     return segments
   },
   (data, params) => {
-    return `${data?.length}-${JSON.stringify(params || {})}`
+    return `${data?.startIndices?.join(',')}-${JSON.stringify(params || {})}`
   }
 )
 
diff --git a/libs/timebar/src/charts/tracks-events.module.css b/libs/timebar/src/charts/tracks-events.module.css
index 91bf9fcf51..a1fdd21822 100644
--- a/libs/timebar/src/charts/tracks-events.module.css
+++ b/libs/timebar/src/charts/tracks-events.module.css
@@ -1,4 +1,7 @@
 .Events {
+  --loiteringIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12"><path fill="%23CFA9F9" fill-rule="nonzero" stroke="%23163F89" stroke-width=".5" d="m15.6 6-5.17 5.3H6L.7 6 6 .7h4.43L15.6 6Zm-2.2 0L9.58 2.17H6.61L2.81 6l3.8 3.82h2.97L13.4 6Z"/></svg>');
+  --encounterIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="12"><path fill="%23FAE9A0" fill-rule="evenodd" stroke="%23163F89" stroke-width=".5" d="M.7 6 6 .7h5.3L16.83 6l-5.53 5.3H6z"/></svg>');
+
   position: absolute;
 }
 
diff --git a/libs/timebar/src/charts/tracks-events.tsx b/libs/timebar/src/charts/tracks-events.tsx
index 43996ba7ef..c542984cbf 100644
--- a/libs/timebar/src/charts/tracks-events.tsx
+++ b/libs/timebar/src/charts/tracks-events.tsx
@@ -2,8 +2,6 @@ import React, { useContext, useMemo } from 'react'
 import cx from 'classnames'
 import { useSetAtom } from 'jotai'
 import TimelineContext, { TimelineScale, TrackGraphOrientation } from '../timelineContext'
-import EncounterIcon from '../icons/events-shapes/encounter.svg'
-import LoiteringIcon from '../icons/events-shapes/loitering.svg'
 import {
   TimebarChartData,
   TimebarChartItem,
@@ -134,19 +132,7 @@ const TracksEvents = ({
     useTrackColor,
   ])
 
-  return (
-    <div
-      className={styles.Events}
-      style={
-        {
-          '--encounterIcon': `url(${EncounterIcon})`,
-          '--loiteringIcon': `url(${LoiteringIcon})`,
-        } as React.CSSProperties
-      }
-    >
-      {trackEvents}
-    </div>
-  )
+  return <div className={styles.Events}>{trackEvents}</div>
 }
 
 export default TracksEvents
diff --git a/libs/timebar/src/components/timeline-handler.tsx b/libs/timebar/src/components/timeline-handler.tsx
index efe670fa1c..7b41cefde1 100644
--- a/libs/timebar/src/components/timeline-handler.tsx
+++ b/libs/timebar/src/components/timeline-handler.tsx
@@ -22,7 +22,7 @@ const Handler = (props: HandlerProps) => (
     })}
     style={{ left: props.dragging === true ? props.mouseX || 0 : props.x }}
   >
-    <Icon icon="drag" />
+    <Icon icon="drag-timebar" />
   </button>
 )
 
diff --git a/libs/ui-components/src/icon/icon.config.ts b/libs/ui-components/src/icon/icon.config.ts
index e3b74e9acf..cc0e2fe749 100644
--- a/libs/ui-components/src/icon/icon.config.ts
+++ b/libs/ui-components/src/icon/icon.config.ts
@@ -33,6 +33,7 @@ const icons = [
   'dots',
   'download',
   'drag',
+  'drag-timebar',
   'draw',
   'draw-points',
   'edit-off',
diff --git a/libs/ui-components/src/icon/icons/drag-timebar.svg b/libs/ui-components/src/icon/icons/drag-timebar.svg
new file mode 100644
index 0000000000..514fb4f1d9
--- /dev/null
+++ b/libs/ui-components/src/icon/icons/drag-timebar.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10.88" height="8.9">
+  <path fill="#FFF" fill-rule="nonzero" d="m3.34 0 1.2.9-2.67 3.55L4.54 8l-1.2.9-3-4L0 4.45.34 4l3-4Zm4.2 0 3 4 .34.45-.34.45-3 4-1.2-.9L9 4.45 6.34.9l1.2-.9Z"/>
+</svg>