diff --git a/.changeset/many-coats-return.md b/.changeset/many-coats-return.md
new file mode 100644
index 00000000..73584061
--- /dev/null
+++ b/.changeset/many-coats-return.md
@@ -0,0 +1,8 @@
+---
+'@spotlightjs/spotlight': patch
+'@spotlightjs/electron': patch
+'@spotlightjs/overlay': patch
+'@spotlightjs/astro': patch
+---
+
+Fix span details showing incorrect span start time
diff --git a/packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanDetails.tsx
index 80fc6f91..9b7e6c06 100644
--- a/packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanDetails.tsx
@@ -86,6 +86,7 @@ export default function SpanDetails({
   totalDuration: number;
 }) {
   const [spanNodeWidth, setSpanNodeWidth] = useState<number>(50);
+  const spanRelativeStart = span.start_timestamp - startTimestamp;
 
   const spanDuration = span.timestamp - span.start_timestamp;
 
@@ -115,7 +116,7 @@ export default function SpanDetails({
               <DateTime date={span.start_timestamp} />
               <span>&mdash;</span>
               <span>
-                <strong>{getFormattedDuration(spanDuration)}</strong> into trace
+                <strong>{getFormattedDuration(spanRelativeStart)}</strong> into trace
               </span>
             </div>
             <div className="flex-1">
@@ -123,7 +124,7 @@ export default function SpanDetails({
                 <div
                   className="bg-primary-800 absolute bottom-0 top-0 -m-0.5 flex w-full items-center p-0.5"
                   style={{
-                    left: `min(${(spanDuration / totalDuration) * 100}%, 100% - 1px)`,
+                    left: `min(${(spanRelativeStart / totalDuration) * 100}%, 100% - 1px)`,
                     width: `max(1px, ${(spanDuration / totalDuration) * 100}%)`,
                   }}
                 >