diff --git a/src/components/Nav/Navigation.tsx b/src/components/Nav/Navigation.tsx
index f0aada3a3a..f6d1dd667b 100644
--- a/src/components/Nav/Navigation.tsx
+++ b/src/components/Nav/Navigation.tsx
@@ -77,7 +77,7 @@ class Navigation extends React.Component<PropsType> {
       return isRoute;
     });
     return navItems.map(item => {
-      if (item.title === 'Distributed Tracing') {
+      /*if (item.title === 'Distributed Tracing') {
         return (
           <VerticalNav.Item
             key={item.to}
@@ -87,7 +87,7 @@ class Navigation extends React.Component<PropsType> {
             onClick={() => this.goTojaeger()}
           />
         );
-      }
+      }*/
       return (
         <VerticalNav.Item
           key={item.to}
diff --git a/src/pages/ServiceDetails/ServiceDetailsPage.tsx b/src/pages/ServiceDetails/ServiceDetailsPage.tsx
index 4a25eaa179..d783620dbf 100644
--- a/src/pages/ServiceDetails/ServiceDetailsPage.tsx
+++ b/src/pages/ServiceDetails/ServiceDetailsPage.tsx
@@ -10,8 +10,10 @@ import { authentication } from '../../utils/Authentication';
 import IstioObjectDetails from './IstioObjectDetails';
 import ServiceMetricsContainer from '../../containers/ServiceMetricsContainer';
 import ServiceInfo from './ServiceInfo';
+import ServiceTraces from './ServiceTraces';
 import { TargetPage, ListPageLink } from '../../components/ListPage/ListPageLink';
 import { MetricsObjectTypes, MetricsDirection } from '../../types/Metrics';
+import { height } from 'csstips';
 
 type ServiceDetailsState = {
   serviceDetailsInfo: ServiceDetailsInfo;
@@ -210,6 +212,7 @@ class ServiceDetails extends React.Component<RouteComponentProps<ServiceId>, Ser
     const parsedSearch = this.parseSearch();
     const istioObject = this.searchObject(parsedSearch);
     const editorVisible = parsedSearch.name && parsedSearch.type;
+
     return (
       <>
         {this.renderBreadcrumbs(parsedSearch, !!(editorVisible && istioObject))}
@@ -235,7 +238,7 @@ class ServiceDetails extends React.Component<RouteComponentProps<ServiceId>, Ser
                 <NavItem eventKey="metrics">
                   <div>Inbound Metrics</div>
                 </NavItem>
-                <NavItem onClick={this.navigateToJaeger}>
+                <NavItem eventKey="traces">
                   <div>Traces</div>
                 </NavItem>
               </Nav>
@@ -259,6 +262,12 @@ class ServiceDetails extends React.Component<RouteComponentProps<ServiceId>, Ser
                     direction={MetricsDirection.INBOUND}
                   />
                 </TabPane>
+                <TabPane eventKey="traces" style={height('800px')}>
+                  <ServiceTraces
+                    namespace={this.props.match.params.namespace}
+                    service={this.props.match.params.service}
+                  />
+                </TabPane>
               </TabContent>
             </div>
           </TabContainer>
@@ -287,18 +296,6 @@ class ServiceDetails extends React.Component<RouteComponentProps<ServiceId>, Ser
       this.props.history.push(this.props.location.pathname + '?' + urlParams.toString());
     };
   };
-
-  private navigateToJaeger = () => {
-    API.getJaegerInfo(authentication())
-      .then(response => {
-        let data = response['data'];
-        window.open(data.url + `/search?service=${this.props.match.params.service}`, '_blank');
-      })
-      .catch(error => {
-        MessageCenter.add(API.getErrorMsg('Could not fetch Jaeger info', error));
-        console.log(error);
-      });
-  };
 }
 
 export default ServiceDetails;
diff --git a/src/pages/ServiceDetails/ServiceTraces.tsx b/src/pages/ServiceDetails/ServiceTraces.tsx
new file mode 100644
index 0000000000..c0b9d8926e
--- /dev/null
+++ b/src/pages/ServiceDetails/ServiceTraces.tsx
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { ToolbarDropdown } from '../../components/ToolbarDropdown/ToolbarDropdown';
+import { Toolbar, FormGroup, Checkbox } from 'patternfly-react';
+import ServiceId from '../../types/ServiceId';
+import { HistoryManager, URLParams } from '../../app/History';
+import { config } from '../../config';
+import history from '../../app/History';
+import ServiceTracesJaeger from './ServiceTraces/ServiceTracesJaeger';
+
+type ServiceTraceState = {
+  duration: number;
+  onlyErrors: boolean;
+};
+
+class ServiceTraces extends React.Component<ServiceId, ServiceTraceState> {
+  static Durations = config().toolbar.intervalDuration;
+  static DefaultDuration = config().toolbar.defaultDuration;
+
+  constructor(props: ServiceId) {
+    super(props);
+    const urlParams = new URLSearchParams(history.location.search);
+    this.state = {
+      duration: this.initialDuration(urlParams),
+      onlyErrors: true
+    };
+  }
+
+  initialDuration = (urlParams: URLSearchParams): number => {
+    let d = urlParams.get(URLParams.DURATION);
+    if (d !== null) {
+      sessionStorage.setItem(URLParams.DURATION, d);
+      return Number(d);
+    }
+    d = sessionStorage.getItem(URLParams.DURATION);
+    return d !== null ? Number(d) : ServiceTraces.DefaultDuration;
+  };
+
+  onDurationChange = (key: number) => {
+    sessionStorage.setItem(URLParams.DURATION, String(key));
+    HistoryManager.setParam(URLParams.DURATION, String(key));
+    this.setState({ duration: key });
+  };
+
+  onErrorsChange = evt => {
+    this.setState({ onlyErrors: evt.target.checked });
+  };
+
+  render() {
+    return (
+      <div>
+        <Toolbar>
+          <FormGroup>
+            <ToolbarDropdown
+              id={'traces_filter_interval_duration'}
+              disabled={false}
+              handleSelect={this.onDurationChange}
+              nameDropdown={'Displaying'}
+              initialValue={this.state.duration}
+              initialLabel={String(ServiceTraces.Durations[this.state.duration])}
+              options={ServiceTraces.Durations}
+            />
+          </FormGroup>
+          <FormGroup controlId="checkbox">
+            <Checkbox inline={true} checked={this.state.onlyErrors} onChange={this.onErrorsChange}>
+              Only Errors
+            </Checkbox>
+          </FormGroup>
+        </Toolbar>
+        <ServiceTracesJaeger
+          service={this.props.service}
+          duration={this.state.duration}
+          onlyErrors={this.state.onlyErrors}
+        />
+      </div>
+    );
+  }
+
+  /*private navigateToJaeger = () => {
+  API.getJaegerInfo(authentication())
+    .then(response => {
+      let data = response['data'];
+      window.open(data.url + `/search?service=${this.props.match.params.service}`, '_blank');
+    })
+    .catch(error => {
+      MessageCenter.add(API.getErrorMsg('Could not fetch Jaeger info', error));
+      console.log(error);
+    });
+  };*/
+}
+
+export default ServiceTraces;
diff --git a/src/pages/ServiceDetails/ServiceTraces/ServiceTracesJaeger.tsx b/src/pages/ServiceDetails/ServiceTraces/ServiceTracesJaeger.tsx
new file mode 100644
index 0000000000..f22dd4fa4f
--- /dev/null
+++ b/src/pages/ServiceDetails/ServiceTraces/ServiceTracesJaeger.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import Iframe from 'react-iframe';
+
+type ServiceTracesJaegerProps = {
+  service: string;
+  duration: number;
+  onlyErrors: boolean;
+};
+
+type ServiceTracesJaegerState = {
+  url: string;
+};
+
+class ServiceTracesJaeger extends React.Component<ServiceTracesJaegerProps, ServiceTracesJaegerState> {
+  constructor(props: ServiceTracesJaegerProps) {
+    super(props);
+    this.state = {
+      url: this.jaegerQuery()
+    };
+  }
+
+  jaegerQuery = () => {
+    const dateNow = Date.now();
+    const start = (dateNow - this.props.duration * 1000) * 1000;
+    const end = dateNow * 1000;
+    const errors = this.props.onlyErrors ? `&tags=%7B"error"%3A"true"%7D` : ``;
+    const service = this.props.service === 'Filter by Service' ? `` : `&service=${this.props.service}`;
+    console.log(
+      `http://localhost:3000/search?embed` +
+        `&limit=20` +
+        `&start=${start}` +
+        `&end=${end}` +
+        `&maxDuration` +
+        `&minDuration` +
+        service +
+        errors
+    );
+    return (
+      `http://localhost:3000/search?embed` +
+      `&limit=20` +
+      `&start=${start}` +
+      `&end=${end}` +
+      `&maxDuration` +
+      `&minDuration` +
+      service +
+      errors
+    );
+  };
+
+  componentDidUpdate(prevProps: ServiceTracesJaegerProps) {
+    if (this.props !== prevProps) {
+      this.setState({
+        url: this.jaegerQuery()
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <Iframe
+          url={this.state.url}
+          position="inherit"
+          allowFullScreen={true}
+          height="800px"
+          sandbox="allow-same-origin"
+        />
+      </div>
+    );
+  }
+}
+
+export default ServiceTracesJaeger;
diff --git a/src/pages/ServiceJaeger/ServiceJaegerPage.tsx b/src/pages/ServiceJaeger/ServiceJaegerPage.tsx
index 10d0e89602..a56b778eee 100644
--- a/src/pages/ServiceJaeger/ServiceJaegerPage.tsx
+++ b/src/pages/ServiceJaeger/ServiceJaegerPage.tsx
@@ -1,14 +1,27 @@
 import * as React from 'react';
-import Iframe from 'react-iframe';
 import * as API from '../../services/Api';
 import { EmptyState, EmptyStateTitle, EmptyStateIcon } from 'patternfly-react';
 import * as MessageCenter from '../../utils/MessageCenter';
+import { ToolbarDropdown } from '../../components/ToolbarDropdown/ToolbarDropdown';
+import ServiceTracesJaeger from '../ServiceDetails/ServiceTraces/ServiceTracesJaeger';
+import { config } from '../../config';
+import { HistoryManager, URLParams } from '../../app/History';
+import { Toolbar, FormGroup, Checkbox } from 'patternfly-react';
+import history from '../../app/History';
 import { authentication } from '../../utils/Authentication';
-import { RouteComponentProps } from 'react-router-dom';
+import NamespaceDropdownContainer from '../../containers/NamespaceDropdownContainer';
+import Namespace from '../../types/Namespace';
+
+type ServiceJaegerProps = {};
 
 type ServiceJaegerState = {
+  namespace: Namespace;
+  service: string;
+  services: string[];
   jaegerURL: string;
   error: boolean;
+  duration: number;
+  onlyErrors: boolean;
 };
 
 const EmptyStatePage = () => (
@@ -25,13 +38,64 @@ const EmptyStatePage = () => (
   </>
 );
 
-class ServiceJaegerPage extends React.Component<RouteComponentProps<{}>, ServiceJaegerState> {
-  constructor(props: RouteComponentProps<{}>) {
+class ServiceJaegerPage extends React.Component<ServiceJaegerProps, ServiceJaegerState> {
+  static Durations = config().toolbar.intervalDuration;
+  static DefaultDuration = config().toolbar.defaultDuration;
+
+  constructor(props: ServiceJaegerProps) {
     super(props);
-    this.state = { jaegerURL: '', error: false };
+    const urlParams = new URLSearchParams(history.location.search);
+    this.state = {
+      namespace: { name: 'istio-system' },
+      service: 'Filter by Service',
+      services: [],
+      jaegerURL:
+        'http://localhost:3000/search?embed&end=1538998038173000&limit=20&lookback=1h&maxDuration&minDuration&service=productpage&start=1538994438173000',
+      error: false,
+      duration: this.initialDuration(urlParams),
+      onlyErrors: true
+    };
+    this.fetchServices(this.state.namespace.name);
   }
 
-  componentDidMount() {
+  fetchServices = (ns: String) => {
+    API.getServices(authentication(), ns)
+      .then(response => {
+        let services: string[] = [];
+        for (let serv of response.data.services) {
+          services.push(serv.name);
+        }
+        this.setState({ services: services, service: 'Filter by Service' });
+      })
+      .catch(error => {
+        MessageCenter.add('Error getting services');
+      });
+  };
+
+  initialDuration = (urlParams: URLSearchParams): number => {
+    let d = urlParams.get(URLParams.DURATION);
+    if (d !== null) {
+      sessionStorage.setItem(URLParams.DURATION, d);
+      return Number(d);
+    }
+    d = sessionStorage.getItem(URLParams.DURATION);
+    return d !== null ? Number(d) : ServiceJaegerPage.DefaultDuration;
+  };
+
+  onDurationChange = (key: number) => {
+    sessionStorage.setItem(URLParams.DURATION, String(key));
+    HistoryManager.setParam(URLParams.DURATION, String(key));
+    this.setState({ duration: key });
+  };
+
+  onServiceChange = (key: string) => {
+    this.setState({ service: this.state.services[key] });
+  };
+  onErrorsChange = evt => {
+    this.setState({ onlyErrors: evt.target.checked });
+  };
+
+  /*componentDidMount() {
     API.getJaegerInfo(authentication())
       .then(response => {
         let data = response['data'];
@@ -44,21 +108,56 @@ class ServiceJaegerPage extends React.Component<RouteComponentProps<{}>, Service
         this.setState({ error: true });
         console.log(error);
       });
-  }
+  }*/
 
-  render() {
-    let frameUrl = this.state.jaegerURL;
-    const urlParams = new URLSearchParams(this.props.location.search);
-
-    if (frameUrl.length > 0 && urlParams.has('path')) {
-      frameUrl += urlParams.get('path');
-    }
+  onNamespaceChange = (namespace: Namespace) => {
+    this.setState({ namespace: namespace, service: 'Filter by Service', services: [] });
+    this.fetchServices(namespace.name);
+  };
 
+  render() {
+    const serviceLabel = this.state.service;
     return (
       <>
         {this.state.error ? <EmptyStatePage /> : null}
         <div className="container-fluid container-cards-pf" style={{ height: 'calc(100vh - 100px)' }}>
-          <Iframe url={frameUrl} position="inherit" allowFullScreen={true} />
+          <Toolbar>
+            <FormGroup>
+              <NamespaceDropdownContainer activeNamespace={this.state.namespace} onSelect={this.onNamespaceChange} />
+            </FormGroup>
+            <FormGroup>
+              <ToolbarDropdown
+                id={'traces_filter_by_service'}
+                disabled={false}
+                handleSelect={this.onServiceChange}
+                nameDropdown={'Services'}
+                initialValue={serviceLabel}
+                initialLabel={serviceLabel}
+                options={this.state.services}
+              />
+            </FormGroup>
+            <FormGroup>
+              <ToolbarDropdown
+                id={'traces_filter_interval_duration'}
+                disabled={false}
+                handleSelect={this.onDurationChange}
+                nameDropdown={'Displaying'}
+                initialValue={this.state.duration}
+                initialLabel={String(ServiceJaegerPage.Durations[this.state.duration])}
+                options={ServiceJaegerPage.Durations}
+              />
+            </FormGroup>
+            <FormGroup controlId="checkbox">
+              <Checkbox inline={true} checked={this.state.onlyErrors} onChange={this.onErrorsChange}>
+                Only Errors
+              </Checkbox>
+            </FormGroup>
+          </Toolbar>
+          <ServiceTracesJaeger
+            service={this.state.service}
+            duration={this.state.duration}
+            onlyErrors={this.state.onlyErrors}
+          />
         </div>
       </>
     );