diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
index ca40bf50c..140c15693 100644
--- a/public/components/application_analytics/components/application.tsx
+++ b/public/components/application_analytics/components/application.tsx
@@ -326,6 +326,9 @@ export function Application(props: AppDetailProps) {
           setStartTime={setStartTimeForApp}
           setEndTime={setEndTimeForApp}
           dataSourceMDSId={[{ id: '', label: '' }]}
+          setCurrentSelectedService={() => {}}
+          tracesTableMode="traces"
+          setTracesTableMode={() => {}}
         />
         <EuiPanel>
           <PanelTitle title="Spans" totalItems={totalSpans} />
diff --git a/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
index ee51138f0..bbbaeb6cf 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
@@ -907,10 +907,10 @@ exports[`Added Integration View Test Renders added integration view using dummy
                     </EuiFlexGroup>
                   </EuiSearchBar>
                   <EuiSpacer
-                    size="l"
+                    size="m"
                   >
                     <div
-                      className="euiSpacer euiSpacer--l"
+                      className="euiSpacer euiSpacer--m"
                     />
                   </EuiSpacer>
                   <EuiBasicTable
diff --git a/public/components/trace_analytics/components/traces/trace_table_helpers.tsx b/public/components/trace_analytics/components/traces/trace_table_helpers.tsx
index 575a406ef..2ff58d50d 100644
--- a/public/components/trace_analytics/components/traces/trace_table_helpers.tsx
+++ b/public/components/trace_analytics/components/traces/trace_table_helpers.tsx
@@ -13,7 +13,7 @@ import {
   EuiText,
   EuiToolTip,
 } from '@elastic/eui';
-import { round, truncate } from 'lodash';
+import { round } from 'lodash';
 import moment from 'moment';
 import React from 'react';
 import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
@@ -40,8 +40,8 @@ export const fetchDynamicColumns = (columnItems: string[]) => {
         item ? (
           <EuiText>
             <EuiToolTip content={item}>
-              <EuiText size="s">
-                {item.length < 36 ? item : <div title={item}>{truncate(item, { length: 36 })}</div>}
+              <EuiText size="s" className="attributes-column" title={item}>
+                {item}
               </EuiText>
             </EuiToolTip>
           </EuiText>
@@ -64,8 +64,8 @@ export const getTableColumns = (
     item ? (
       <EuiText>
         <EuiToolTip content={item}>
-          <EuiText size="s">
-            {item.length < 36 ? item : <div title={item}>{truncate(item, { length: 36 })}</div>}
+          <EuiText size="s" className="traces-table traces-table-trace-id" title={item}>
+            {item}
           </EuiText>
         </EuiToolTip>
       </EuiText>
@@ -166,6 +166,7 @@ export const getTableColumns = (
         align: 'right',
         sortable: true,
         render: renderDateField,
+        className: 'span-group-column',
       },
       ...(showAttributes ? fetchDynamicColumns(columnItems) : []),
     ] as Array<EuiTableFieldDataColumnType<any>>;
@@ -209,7 +210,13 @@ export const getTableColumns = (
         sortable: true,
         render: renderErrorsField,
       },
-      { field: 'last_updated', name: 'Last updated', align: 'left', sortable: true },
+      {
+        field: 'last_updated',
+        name: 'Last updated',
+        align: 'left',
+        sortable: true,
+        className: 'span-group-column',
+      },
     ] as Array<EuiTableFieldDataColumnType<any>>;
   }
 
@@ -230,6 +237,12 @@ export const getTableColumns = (
       sortable: true,
       render: renderErrorsField,
     },
-    { field: 'last_updated', name: 'Last updated', align: 'left', sortable: true },
+    {
+      field: 'last_updated',
+      name: 'Last updated',
+      align: 'left',
+      sortable: true,
+      className: 'span-group-column',
+    },
   ] as Array<EuiTableFieldDataColumnType<any>>;
 };
diff --git a/public/components/trace_analytics/components/traces/traces.tsx b/public/components/trace_analytics/components/traces/traces.tsx
index eacfb050f..baa725f8b 100644
--- a/public/components/trace_analytics/components/traces/traces.tsx
+++ b/public/components/trace_analytics/components/traces/traces.tsx
@@ -7,6 +7,7 @@ import { EuiBreadcrumb } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React from 'react';
 import { DataSourceOption } from '../../../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
+import { TraceQueryMode } from '../../../../../common/types/trace_analytics';
 import { TraceAnalyticsComponentDeps } from '../../home';
 import { TracesContent } from './traces_content';
 
@@ -18,6 +19,8 @@ export interface TracesProps extends TraceAnalyticsComponentDeps {
   openTraceFlyout?: (traceId: string) => void;
   toasts: Toast[];
   dataSourceMDSId: DataSourceOption[];
+  tracesTableMode: TraceQueryMode;
+  setTracesTableMode: React.Dispatch<React.SetStateAction<TraceQueryMode>>;
 }
 
 export function Traces(props: TracesProps) {
diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx
index 4700ec0aa..bc78a4a4c 100644
--- a/public/components/trace_analytics/components/traces/traces_content.tsx
+++ b/public/components/trace_analytics/components/traces/traces_content.tsx
@@ -16,8 +16,6 @@ import {
 } from '@elastic/eui';
 import cloneDeep from 'lodash/cloneDeep';
 import React, { useEffect, useState } from 'react';
-import { TRACE_TABLE_TYPE_KEY } from '../../../../../common/constants/trace_analytics';
-import { TraceQueryMode } from '../../../../../common/types/trace_analytics';
 import { coreRefs } from '../../../../framework/core_refs';
 import { handleServiceMapRequest } from '../../requests/services_request_handler';
 import {
@@ -58,6 +56,8 @@ export function TracesContent(props: TracesProps) {
     jaegerIndicesExist,
     attributesFilterFields,
     setCurrentSelectedService,
+    tracesTableMode,
+    setTracesTableMode,
   } = props;
   const [tableItems, setTableItems] = useState([]);
   const [columns, setColumns] = useState([]);
@@ -70,9 +70,6 @@ export function TracesContent(props: TracesProps) {
     'latency' | 'error_rate' | 'throughput'
   >('');
   const [includeMetrics, setIncludeMetrics] = useState(false);
-  const [tracesTableMode, setTracesTableMode] = useState<TraceQueryMode>(
-    (sessionStorage.getItem(TRACE_TABLE_TYPE_KEY) as TraceQueryMode) || 'all_spans'
-  );
   const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled();
 
   useEffect(() => {
diff --git a/public/components/trace_analytics/components/traces/traces_custom_indices_table.tsx b/public/components/trace_analytics/components/traces/traces_custom_indices_table.tsx
index ce1d9bb67..8a9669ab1 100644
--- a/public/components/trace_analytics/components/traces/traces_custom_indices_table.tsx
+++ b/public/components/trace_analytics/components/traces/traces_custom_indices_table.tsx
@@ -53,7 +53,7 @@ export function TracesCustomIndicesTable(props: TracesLandingTableProps) {
   const { columnItems, items, refresh, mode, loading, getTraceViewUri, openTraceFlyout } = props;
   const [showAttributes, setShowAttributes] = useState(false);
   const [isTitlePopoverOpen, setIsTitlePopoverOpen] = useState(false);
-  const [tableOptions, setTableOptions] = useState<EuiSelectableOption[]>(
+  const [tableOptions, setTableOptions] = useState<EuiSelectableOption[]>(() =>
     TRACE_TABLE_OPTIONS.map((obj) =>
       obj.key === props.tracesTableMode ? { ...obj, checked: 'on' } : obj
     )
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
index 042064020..268881c04 100644
--- a/public/components/trace_analytics/home.tsx
+++ b/public/components/trace_analytics/home.tsx
@@ -5,7 +5,7 @@
 
 import { EuiGlobalToastList } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
-import React, { ReactChild, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { HashRouter, Redirect, Route, RouteComponentProps } from 'react-router-dom';
 import {
   ChromeBreadcrumb,
@@ -19,7 +19,8 @@ import {
   DataSourceManagementPluginSetup,
   DataSourceSelectableConfig,
 } from '../../../../../src/plugins/data_source_management/public';
-import { TraceAnalyticsMode } from '../../../common/types/trace_analytics';
+import { TRACE_TABLE_TYPE_KEY } from '../../../common/constants/trace_analytics';
+import { TraceAnalyticsMode, TraceQueryMode } from '../../../common/types/trace_analytics';
 import { dataSourceFilterFn } from '../../../common/utils/shared';
 import { coreRefs } from '../../framework/core_refs';
 import { FilterType } from './components/common/filters/filters';
@@ -111,11 +112,9 @@ export const Home = (props: HomeProps) => {
   };
   const [toasts, setToasts] = useState<Toast[]>([]);
 
-  const _setToast = (title: string, color = 'success', text?: ReactChild, _side?: string) => {
-    if (!text) text = '';
-    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
-  };
-
+  const [tracesTableMode, setTracesTableMode] = useState<TraceQueryMode>(
+    (sessionStorage.getItem(TRACE_TABLE_TYPE_KEY) as TraceQueryMode) || 'all_spans'
+  );
   const [dataSourceMDSId, setDataSourceMDSId] = useState([{ id: '', label: '' }]);
   const [currentSelectedService, setCurrentSelectedService] = useState('');
 
@@ -230,7 +229,11 @@ export const Home = (props: HomeProps) => {
     },
   ];
 
-  const traceColumnAction = () => location.assign('#/traces');
+  const traceColumnAction = () => {
+    location.assign('#/traces');
+    setTracesTableMode('traces');
+    sessionStorage.setItem(TRACE_TABLE_TYPE_KEY, 'traces');
+  };
 
   const getTraceViewUri = (traceId: string) => `#/traces/${encodeURIComponent(traceId)}`;
 
@@ -329,6 +332,8 @@ export const Home = (props: HomeProps) => {
                   setCurrentSelectedService={setCurrentSelectedService}
                   toasts={toasts}
                   dataSourceMDSId={dataSourceMDSId}
+                  tracesTableMode={tracesTableMode}
+                  setTracesTableMode={setTracesTableMode}
                   {...commonProps}
                 />
               </TraceSideBar>
@@ -343,6 +348,8 @@ export const Home = (props: HomeProps) => {
                   setCurrentSelectedService={setCurrentSelectedService}
                   toasts={toasts}
                   dataSourceMDSId={dataSourceMDSId}
+                  tracesTableMode={tracesTableMode}
+                  setTracesTableMode={setTracesTableMode}
                   {...commonProps}
                 />
               </>
diff --git a/public/components/trace_analytics/index.scss b/public/components/trace_analytics/index.scss
index 98ec7479f..779a47259 100644
--- a/public/components/trace_analytics/index.scss
+++ b/public/components/trace_analytics/index.scss
@@ -97,6 +97,10 @@ th[data-test-subj^='tableHeaderCell_dashboard_latency_variance'] {
 .attributes-column-header,
 .attributes-column {
   max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 8px;
 }
 
 .trace-group-column {