diff --git a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
index 5726856f424..d6ee2c9863b 100644
--- a/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
+++ b/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor
@@ -56,10 +56,26 @@
                         <div class="col-long-content" title="@context.GetTooltip()" @onclick="() => OnShowProperties(context)">
                             @{
                                 var isServerKind = context.Span.Kind == OtlpSpanKind.Server;
-                                var spanNameContainerStyle = $"margin-left: {(context.Depth - 1) * 15}px;";
+                                // Indent the span name based on the depth of the span.
+                                var marginLeft = (context.Depth - 1) * 15;
+
+                                // We want to have consistent margin for both client and server spans.
+                                string spanNameContainerStyle;
                                 if (!isServerKind)
                                 {
-                                    spanNameContainerStyle += $"border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))}; border-left-width: 5px; border-left-style: solid; padding-left: 5px;";
+                                    // Client span has 19px extra content:
+                                    // - 5px border
+                                    // - 9px padding-left
+                                    // - 5px extra margin-left
+                                    marginLeft += 5;
+                                    spanNameContainerStyle = $"margin-left: {marginLeft}px; border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))}; border-left-width: 5px; border-left-style: solid; padding-left: 9px;";
+                                }
+                                else
+                                {
+                                    // Server span has 19px extra content:
+                                    // - 16px icon
+                                    // - 3px padding-left
+                                    spanNameContainerStyle = $"margin-left: {marginLeft}px;";
                                 }
                             }
                             <span class="span-name-container" style="@spanNameContainerStyle">