diff --git a/public/app.tsx b/public/app.tsx
index de205a60..78e29ef1 100644
--- a/public/app.tsx
+++ b/public/app.tsx
@@ -4,7 +4,12 @@
  */
 
 import React from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import {
+  Route,
+  RouteComponentProps,
+  Switch,
+  useLocation,
+} from 'react-router-dom';
 import {
   EuiPageSideBar,
   EuiSideNav,
@@ -19,8 +24,10 @@ import {
   WorkflowsRouterProps,
 } from './pages';
 import { MountPoint } from '../../../src/core/public';
-import queryString from 'query-string';
-import { constructHrefWithDataSourceId } from './utils/utils';
+import {
+  constructHrefWithDataSourceId,
+  getDataSourceFromURL,
+} from './utils/utils';
 
 // styling
 import './global-styles.scss';
@@ -31,9 +38,8 @@ interface Props extends RouteComponentProps {
 
 export const FlowFrameworkDashboardsApp = (props: Props) => {
   const { setHeaderActionMenu } = props;
-  const queryParams = queryString.parse(location.search) as {
-    [key: string]: string;
-  };
+  const location = useLocation();
+  const queryParams = getDataSourceFromURL(location);
   const dataSourceId = queryParams.dataSourceId;
   const sidebar = (
     <EuiPageSideBar style={{ minWidth: 190 }} hidden={false} paddingSize="l">
@@ -49,8 +55,7 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
                 id: 1,
                 href: constructHrefWithDataSourceId(
                   APP_PATH.WORKFLOWS,
-                  dataSourceId,
-                  true
+                  dataSourceId
                 ),
                 isSelected: props.location.pathname === APP_PATH.WORKFLOWS,
               },
@@ -78,7 +83,6 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
             ) => (
               <WorkflowDetail
                 setActionMenu={setHeaderActionMenu}
-                landingDataSourceId={dataSourceId}
                 {...routeProps}
               />
             )}
@@ -86,11 +90,7 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
           <Route
             path={APP_PATH.WORKFLOWS}
             render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => (
-              <Workflows
-                setActionMenu={setHeaderActionMenu}
-                landingDataSourceId={dataSourceId}
-                {...routeProps}
-              />
+              <Workflows setActionMenu={setHeaderActionMenu} {...routeProps} />
             )}
           />
           {/*
@@ -109,7 +109,6 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
               return (
                 <Workflows
                   setActionMenu={setHeaderActionMenu}
-                  landingDataSourceId={dataSourceId}
                   {...routeProps}
                 />
               );
diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx
index 111bd78d..d7e3a7a7 100644
--- a/public/pages/workflow_detail/workflow_detail.tsx
+++ b/public/pages/workflow_detail/workflow_detail.tsx
@@ -45,7 +45,6 @@ export interface WorkflowDetailRouterProps {
 interface WorkflowDetailProps
   extends RouteComponentProps<WorkflowDetailRouterProps> {
   setActionMenu: (menuMount?: MountPoint) => void;
-  landingDataSourceId?: string;
 }
 
 /**
diff --git a/public/pages/workflows/workflow_list/columns.tsx b/public/pages/workflows/workflow_list/columns.tsx
index 77739bbf..46956ba0 100644
--- a/public/pages/workflows/workflow_list/columns.tsx
+++ b/public/pages/workflows/workflow_list/columns.tsx
@@ -10,8 +10,10 @@ import {
   Workflow,
   toFormattedDate,
 } from '../../../../common';
-import { constructHrefWithDataSourceId, getDataSourceId } from '../../../utils/utils';
-
+import {
+  constructHrefWithDataSourceId,
+  getDataSourceId,
+} from '../../../utils/utils';
 
 export const columns = (actions: any[]) => {
   const dataSourceId = getDataSourceId();
@@ -26,8 +28,7 @@ export const columns = (actions: any[]) => {
         <EuiLink
           href={constructHrefWithDataSourceId(
             `/workflows/${workflow.id}`,
-            dataSourceId,
-            true
+            dataSourceId
           )}
         >
           {name}
diff --git a/public/pages/workflows/workflows.test.tsx b/public/pages/workflows/workflows.test.tsx
index 6d9f3b65..5d82ce9e 100644
--- a/public/pages/workflows/workflows.test.tsx
+++ b/public/pages/workflows/workflows.test.tsx
@@ -30,10 +30,9 @@ const renderWithRouter = () => ({
       <Router>
         <Switch>
           <Route
-            render={(props: RouteComponentProps) => <Workflows 
-              setActionMenu={jest.fn()}
-              landingDataSourceId={undefined} 
-              {...props} />}
+            render={(props: RouteComponentProps) => (
+              <Workflows setActionMenu={jest.fn()} {...props} />
+            )}
           />
         </Switch>
       </Router>
diff --git a/public/pages/workflows/workflows.tsx b/public/pages/workflows/workflows.tsx
index 114e3180..1a5ca628 100644
--- a/public/pages/workflows/workflows.tsx
+++ b/public/pages/workflows/workflows.tsx
@@ -44,7 +44,6 @@ export interface WorkflowsRouterProps {}
 
 interface WorkflowsProps extends RouteComponentProps<WorkflowsRouterProps> {
   setActionMenu: (menuMount: MountPoint | undefined) => void;
-  landingDataSourceId?: string;
 }
 
 export enum WORKFLOWS_TAB {
@@ -187,10 +186,7 @@ export function Workflows(props: WorkflowsProps) {
           componentConfig={{
             fullWidth: false,
             activeOption:
-              props.landingDataSourceId === undefined ||
-              dataSourceId === undefined
-                ? undefined
-                : [{ id: dataSourceId }],
+              dataSourceId === undefined ? undefined : [{ id: dataSourceId }],
             savedObjects: getSavedObjectsClient(),
             notifications: getNotifications(),
             onSelectedDataSources: (dataSources) =>
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
index 80c7fb30..151ebb63 100644
--- a/public/utils/constants.ts
+++ b/public/utils/constants.ts
@@ -20,6 +20,6 @@ export const BREADCRUMBS = Object.freeze({
   FLOW_FRAMEWORK: { text: 'Flow Framework' },
   WORKFLOWS: (dataSourceId?: string) => ({
     text: 'Workflows',
-    href: constructHrefWithDataSourceId(APP_PATH.WORKFLOWS, dataSourceId, true),
+    href: constructHrefWithDataSourceId(APP_PATH.WORKFLOWS, dataSourceId),
   }),
 });
diff --git a/public/utils/utils.ts b/public/utils/utils.ts
index aebd497b..62619e97 100644
--- a/public/utils/utils.ts
+++ b/public/utils/utils.ts
@@ -242,8 +242,7 @@ export const getDataSourceFromURL = (location: {
 
 export const constructHrefWithDataSourceId = (
   basePath: string,
-  dataSourceId: string = '',
-  withHash: boolean
+  dataSourceId: string = ''
 ): string => {
   const dataSourceEnabled = getDataSourceEnabled().enabled;
   const url = new URLSearchParams();
@@ -253,7 +252,7 @@ export const constructHrefWithDataSourceId = (
   // we share this helper function to construct the href with dataSourceId
   // some places we need to return the url with hash, some places we don't need to
   // so adding this flag to indicate if we want to return the url with hash
-  return `${withHash ? '#' : ''}${basePath}?${url.toString()}`;
+  return `#${basePath}?${url.toString()}`;
 };
 
 export const getDataSourceId = () => {