diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
index 71b0944b00..292a878352 100644
--- a/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`Service view component renders service view 1`] = `
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer
-        size="xl"
+        size="m"
       />
       <EuiPanel>
         <PanelTitle
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index 20a0263dc9..e5470d0861 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -39,6 +39,7 @@ import { observabilityLogsID } from '../../../../../common/constants/shared';
 import { setNavBreadCrumbs } from '../../../../../common/utils/set_nav_bread_crumbs';
 import { dataSourceFilterFn } from '../../../../../common/utils/shared';
 import { coreRefs } from '../../../../framework/core_refs';
+import { HeaderControlledComponentsWrapper } from '../../../../plugin_helpers/plugin_headerControl';
 import { TraceAnalyticsComponentDeps } from '../../home';
 import {
   handleServiceMapRequest,
@@ -107,7 +108,7 @@ export function ServiceView(props: ServiceViewProps) {
           props.parentBreadcrumb,
           {
             text: 'Trace analytics',
-            href: '#/services',
+            href: '#/traces',
           },
         ],
         [
@@ -207,6 +208,12 @@ export function ServiceView(props: ServiceViewProps) {
     },
   ];
 
+  const serviceHeader = (
+    <EuiText size="s">
+      <h1 className="overview-content">{props.serviceName}</h1>
+    </EuiText>
+  );
+
   const renderTitle = (
     serviceName: string,
     startTime: SearchBarProps['startTime'],
@@ -221,11 +228,7 @@ export function ServiceView(props: ServiceViewProps) {
         {_page === 'serviceFlyout' ? (
           <EuiFlyoutHeader hasBorder>
             <EuiFlexGroup justifyContent="spaceBetween">
-              <EuiFlexItem>
-                <EuiText size="s">
-                  <h2 className="overview-content">{serviceName}</h2>
-                </EuiText>
-              </EuiFlexItem>
+              <EuiFlexItem>{serviceHeader}</EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiPopover
                   panelPaddingSize="none"
@@ -239,13 +242,13 @@ export function ServiceView(props: ServiceViewProps) {
             </EuiFlexGroup>
             {renderDatePicker(startTime, setStartTime, endTime, setEndTime)}
           </EuiFlyoutHeader>
+        ) : coreRefs?.chrome?.navGroup.getNavGroupEnabled() ? (
+          <HeaderControlledComponentsWrapper
+            components={[renderDatePicker(startTime, setStartTime, endTime, setEndTime)]}
+          />
         ) : (
           <EuiFlexGroup alignItems="center" gutterSize="s">
-            <EuiFlexItem>
-              <EuiText size="s">
-                <h1 className="overview-content">{serviceName}</h1>
-              </EuiText>
-            </EuiFlexItem>
+            <EuiFlexItem>{serviceHeader}</EuiFlexItem>
             <EuiFlexItem grow={false}>
               {renderDatePicker(startTime, setStartTime, endTime, setEndTime)}
             </EuiFlexItem>
@@ -489,7 +492,7 @@ export function ServiceView(props: ServiceViewProps) {
           results are filtered by {activeFilters.map((filter) => filter.field).join(', ')}
         </EuiText>
       )}
-      <EuiSpacer size="xl" />
+      <EuiSpacer size="m" />
       {overview}
 
       {mode === 'data_prepper' || mode === 'custom_data_prepper' ? (
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
index 94b206021c..3632172948 100644
--- a/public/components/trace_analytics/components/traces/trace_view.tsx
+++ b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -242,7 +242,7 @@ export function TraceView(props: TraceViewProps) {
         props.parentBreadcrumb,
         {
           text: 'Trace analytics',
-          href: '#/services',
+          href: '#/traces',
         },
       ],
       [
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index 16b4b5853b..0420640205 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -118,9 +118,11 @@ export const Home = (props: HomeProps) => {
 
   const [dataSourceMDSId, setDataSourceMDSId] = useState([{ id: '', label: '' }]);
   const [currentSelectedService, setCurrentSelectedService] = useState('');
-  let defaultRoute = props.defaultRoute ?? '/services';
-  const currentHash = window.location.hash.split('#')[1] || '';
 
+  // Navigate a valid routes when suffixed with '/traces' and '/services'
+  // Route defaults to traces page
+  let defaultRoute = props.defaultRoute ?? '/traces';
+  const currentHash = window.location.hash.split('#')[1] || '';
   if (currentHash.startsWith('/traces') || currentHash.startsWith('/services')) {
     defaultRoute = currentHash;
   }
@@ -203,7 +205,7 @@ export const Home = (props: HomeProps) => {
       ? [
           {
             text: 'Trace analytics',
-            href: '#/services',
+            href: '#/traces',
           },
         ]
       : []),
@@ -218,7 +220,7 @@ export const Home = (props: HomeProps) => {
       ? [
           {
             text: 'Trace analytics',
-            href: '#/services',
+            href: '#/traces',
           },
         ]
       : []),
diff --git a/public/components/trace_analytics/trace_side_nav.tsx b/public/components/trace_analytics/trace_side_nav.tsx
index 1691c5b51c..15fae9df24 100644
--- a/public/components/trace_analytics/trace_side_nav.tsx
+++ b/public/components/trace_analytics/trace_side_nav.tsx
@@ -16,12 +16,12 @@ import React from 'react';
 
 export function TraceSideBar(props: { children: React.ReactNode }) {
   function setIsSelected(items: Array<EuiSideNavItemType<React.ReactNode>>, hash: string): boolean {
-    if (hash === '#/traces') {
-      items[0].items[1].isSelected = true;
+    if (hash === '#/traces' || hash === '#/') {
+      items[0].items[0].isSelected = true;
       return true;
     }
-    if (hash === '#/services' || hash === '#/') {
-      items[0].items[0].isSelected = true;
+    if (hash === '#/services') {
+      items[0].items[1].isSelected = true;
       return true;
     }
   }
@@ -30,17 +30,17 @@ export function TraceSideBar(props: { children: React.ReactNode }) {
     {
       name: 'Trace analytics',
       id: 1,
-      href: '#/services',
+      href: '#/traces',
       items: [
         {
-          name: 'Services',
+          name: 'Traces',
           id: 1.1,
-          href: '#/services',
+          href: '#/traces',
         },
         {
-          name: 'Traces',
+          name: 'Services',
           id: 1.2,
-          href: '#/traces',
+          href: '#/services',
         },
       ],
     },