diff --git a/esp/src/src-react/components/FileDetails.tsx b/esp/src/src-react/components/FileDetails.tsx
index cad9f801cc4..4111fe870f6 100644
--- a/esp/src/src-react/components/FileDetails.tsx
+++ b/esp/src/src-react/components/FileDetails.tsx
@@ -1,12 +1,10 @@
 import * as React from "react";
-import { Pivot, PivotItem } from "@fluentui/react";
 import { WsDfu } from "@hpcc-js/comms";
 import { SizeMe } from "react-sizeme";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { FileParts } from "./FileParts";
 import { useFile, useDefFile } from "../hooks/file";
-import { pivotItemStyle, usePivotItemDisable } from "../layouts/pivot";
 import { pushUrl, replaceUrl } from "../util/history";
 import { FileBlooms } from "./FileBlooms";
 import { FileHistory } from "./FileHistory";
@@ -20,23 +18,25 @@ import { SuperFileSummary } from "./SuperFileSummary";
 import { DataPatterns } from "./DataPatterns";
 import { Result } from "./Result";
 import { Queries } from "./Queries";
+import { IndexFileSummary } from "./IndexFileSummary";
+import { DelayLoadedPanel, OverflowTabList, TabInfo } from "./controls/TabbedPanes/index";
 
 import "react-reflex/styles.css";
-import { IndexFileSummary } from "./IndexFileSummary";
 
+type StringStringMap = { [key: string]: string };
 interface FileDetailsProps {
     cluster?: string;
     logicalFile: string;
     tab?: string;
-    sort?: QuerySortItem;
-    queryParams?: { [key: string]: string };
+    sort?: { subfiles?: QuerySortItem, superfiles?: QuerySortItem, parts?: QuerySortItem, graphs?: QuerySortItem, history?: QuerySortItem, blooms?: QuerySortItem, protectby?: QuerySortItem };
+    queryParams?: { contents?: StringStringMap };
 }
 
 export const FileDetails: React.FunctionComponent<FileDetailsProps> = ({
     cluster,
     logicalFile,
     tab = "summary",
-    sort,
+    sort = {},
     queryParams = {}
 }) => {
     const [file] = useFile(cluster, logicalFile);
@@ -47,59 +47,112 @@ export const FileDetails: React.FunctionComponent<FileDetailsProps> = ({
     }, [cluster, file?.NodeGroup, logicalFile]);
     const [defFile] = useDefFile(cluster, logicalFile, WsDfu.DFUDefFileFormat.def);
     const [xmlFile] = useDefFile(cluster, logicalFile, WsDfu.DFUDefFileFormat.xml);
-    const wuidDisable = usePivotItemDisable(file?.Wuid?.length && file?.Wuid[0] === "D");
+
+    const onTabSelect = React.useCallback((tab: TabInfo) => {
+        pushUrl(tab.__state ?? `/files/${cluster}/${logicalFile}/${tab.id}`);
+    }, [cluster, logicalFile]);
+
+    const tabs = React.useMemo((): TabInfo[] => {
+        return [{
+            id: "summary",
+            label: nlsHPCC.Summary,
+        }, {
+            id: "contents",
+            label: nlsHPCC.Contents,
+        }, {
+            id: "datapatterns",
+            label: nlsHPCC.DataPatterns,
+        }, {
+            id: "ecl",
+            label: nlsHPCC.ECL,
+        }, {
+            id: "def",
+            label: nlsHPCC.DEF,
+        }, {
+            id: "xml",
+            label: nlsHPCC.XML,
+        }, file?.isSuperfile ? {
+            id: "subfiles",
+            label: nlsHPCC.Subfiles,
+            count: file?.subfiles?.Item.length ?? 0
+        } : {
+            id: "superfiles",
+            label: nlsHPCC.Superfiles,
+            count: file?.Superfiles?.DFULogicalFile.length ?? 0
+        }, {
+            id: "parts",
+            label: nlsHPCC.FileParts,
+            count: file?.fileParts().length ?? 0
+        }, {
+            id: "queries",
+            label: nlsHPCC.Queries,
+        }, {
+            id: "graphs",
+            label: nlsHPCC.Graphs,
+            count: file?.Graphs?.ECLGraph?.length ?? 0
+        }, {
+            id: "history",
+            label: nlsHPCC.History
+        }, {
+            id: "blooms",
+            label: nlsHPCC.Blooms,
+            count: file?.Blooms?.DFUFileBloom?.length ?? 0
+        }, {
+            id: "protectby",
+            label: nlsHPCC.ProtectBy
+        }];
+    }, [file]);
 
     return <SizeMe monitorHeight>{({ size }) =>
-        <Pivot overflowBehavior="menu" style={{ height: "100%" }} selectedKey={tab} onLinkClick={evt => pushUrl(`/files/${cluster}/${logicalFile}/${evt.props.itemKey}`)}>
-            <PivotItem headerText={nlsHPCC.Summary} itemKey="summary" style={pivotItemStyle(size)}>
+        <div style={{ height: "100%" }}>
+            <OverflowTabList tabs={tabs} selectedTab={tab} onTabSelect={onTabSelect} size="medium" />
+            <DelayLoadedPanel visible={tab === "summary"} size={size}>
                 {file?.ContentType === "key"
                     ? <IndexFileSummary cluster={cluster} logicalFile={logicalFile} />
                     : file?.isSuperfile
                         ? <SuperFileSummary cluster={cluster} logicalFile={logicalFile} />
                         : <LogicalFileSummary cluster={cluster} logicalFile={logicalFile} />
                 }
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Contents} itemKey="contents" style={pivotItemStyle(size, 0)}>
-                <Result cluster={cluster} logicalFile={logicalFile} filter={queryParams} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.DataPatterns} itemKey="datapatterns" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "contents"} size={size}>
+                <Result cluster={cluster} logicalFile={logicalFile} filter={queryParams.contents} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "datapatterns"} size={size}>
                 <DataPatterns cluster={cluster} logicalFile={logicalFile} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.ECL} itemKey="ecl" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "ecl"} size={size}>
                 <SourceEditor text={file?.Ecl} mode="ecl" readonly={true} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.DEF} itemKey="def" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "def"} size={size}>
                 <XMLSourceEditor text={defFile} readonly={true} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.XML} itemKey="xml" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "xml"} size={size}>
                 <XMLSourceEditor text={xmlFile} readonly={true} />
-            </PivotItem>
-            {file?.isSuperfile
-                ? <PivotItem headerText={nlsHPCC.Subfiles} itemKey="subfiles" itemCount={file?.subfiles?.Item.length ?? 0} style={pivotItemStyle(size, 0)}>
-                    <SubFiles cluster={cluster} logicalFile={logicalFile} sort={sort} />
-                </PivotItem>
-                : <PivotItem headerText={nlsHPCC.Superfiles} itemKey="superfiles" itemCount={file?.Superfiles?.DFULogicalFile.length ?? 0} style={pivotItemStyle(size, 0)}>
-                    <SuperFiles cluster={cluster} logicalFile={logicalFile} sort={sort} />
-                </PivotItem>
-            }
-            <PivotItem headerText={nlsHPCC.FileParts} itemKey="parts" itemCount={file?.fileParts().length ?? 0} style={pivotItemStyle(size, 0)}>
-                <FileParts cluster={cluster} logicalFile={logicalFile} sort={sort} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Queries} itemKey="queries" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "subfiles"} size={size}>
+                <SubFiles cluster={cluster} logicalFile={logicalFile} sort={sort.subfiles} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "superfiles"} size={size}>
+                <SuperFiles cluster={cluster} logicalFile={logicalFile} sort={sort.superfiles} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "parts"} size={size}>
+                <FileParts cluster={cluster} logicalFile={logicalFile} sort={sort.parts} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "queries"} size={size}>
                 <Queries filter={{ FileName: logicalFile }} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Graphs} itemKey="graphs" itemCount={file?.Graphs?.ECLGraph?.length ?? 0} headerButtonProps={wuidDisable} style={pivotItemStyle(size, 0)}>
-                <FileDetailsGraph cluster={cluster} logicalFile={logicalFile} sort={sort} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.History} itemKey="history" style={pivotItemStyle(size, 0)}>
-                <FileHistory cluster={cluster} logicalFile={logicalFile} sort={sort} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Blooms} itemKey="blooms" itemCount={file?.Blooms?.DFUFileBloom?.length} style={pivotItemStyle(size, 0)}>
-                <FileBlooms cluster={cluster} logicalFile={logicalFile} sort={sort} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.ProtectBy} itemKey="protectby" style={pivotItemStyle(size, 0)}>
-                <ProtectedBy cluster={cluster} logicalFile={logicalFile} sort={sort} />
-            </PivotItem>
-        </Pivot>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "graphs"} size={size}>
+                <FileDetailsGraph cluster={cluster} logicalFile={logicalFile} sort={sort.graphs} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "history"} size={size}>
+                <FileHistory cluster={cluster} logicalFile={logicalFile} sort={sort.history} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "blooms"} size={size}>
+                <FileBlooms cluster={cluster} logicalFile={logicalFile} sort={sort.blooms} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "protectby"} size={size}>
+                <ProtectedBy cluster={cluster} logicalFile={logicalFile} sort={sort.protectby} />
+            </DelayLoadedPanel>
+        </div>
     }</SizeMe>;
 };
diff --git a/esp/src/src-react/components/QueryDetails.tsx b/esp/src/src-react/components/QueryDetails.tsx
index 35ecd7b259a..92a58a014c6 100644
--- a/esp/src/src-react/components/QueryDetails.tsx
+++ b/esp/src/src-react/components/QueryDetails.tsx
@@ -1,9 +1,7 @@
 import * as React from "react";
-import { Pivot, PivotItem } from "@fluentui/react";
 import { SizeMe } from "react-sizeme";
 import nlsHPCC from "src/nlsHPCC";
 import * as ESPQuery from "src/ESPQuery";
-import { pivotItemStyle, usePivotItemDisable } from "../layouts/pivot";
 import { pushUrl } from "../util/history";
 import { QueryErrors } from "./QueryErrors";
 import { QueryLibrariesUsed } from "./QueryLibrariesUsed";
@@ -14,14 +12,15 @@ import { QuerySuperFiles } from "./QuerySuperFiles";
 import { QueryTests } from "./QueryTests";
 import { Resources } from "./Resources";
 import { QueryMetrics } from "./QueryMetrics";
+import { DelayLoadedPanel, OverflowTabList, TabInfo } from "./controls/TabbedPanes/index";
 
 interface QueryDetailsProps {
     querySet: string;
     queryId: string;
     tab?: string;
     metricsTab?: string;
+    metricsState?: string;
     testTab?: string;
-    state?: string;
 }
 
 export const QueryDetails: React.FunctionComponent<QueryDetailsProps> = ({
@@ -29,8 +28,8 @@ export const QueryDetails: React.FunctionComponent<QueryDetailsProps> = ({
     queryId,
     tab = "summary",
     metricsTab,
-    testTab = "form",
-    state
+    metricsState,
+    testTab = "form"
 }) => {
 
     const [query, setQuery] = React.useState<any>();
@@ -38,7 +37,6 @@ export const QueryDetails: React.FunctionComponent<QueryDetailsProps> = ({
     const [logicalFileCount, setLogicalFileCount] = React.useState<number>(0);
     const [superFileCount, setSuperFileCount] = React.useState<number>(0);
     const [libsUsedCount, setLibsUsedCount] = React.useState<number>(0);
-    const wuidDisable = usePivotItemDisable(wuid === "");
 
     React.useEffect(() => {
         setQuery(ESPQuery.Get(querySet, queryId));
@@ -53,47 +51,82 @@ export const QueryDetails: React.FunctionComponent<QueryDetailsProps> = ({
         });
     }, [query, setLogicalFileCount, setSuperFileCount, setLibsUsedCount]);
 
+    const onTabSelect = React.useCallback((tab: TabInfo) => {
+        switch (tab.id) {
+            case "testPages":
+                pushUrl(tab.__state ?? `/queries/${querySet}/${queryId}/testPages/${testTab}`);
+                break;
+            default:
+                pushUrl(tab.__state ?? `/queries/${querySet}/${queryId}/${tab.id}`);
+                break;
+        }
+    }, [queryId, querySet, testTab]);
+
+    const tabs = React.useMemo((): TabInfo[] => {
+        return [{
+            id: "summary",
+            label: nlsHPCC.Summary,
+        }, {
+            id: "errors",
+            label: nlsHPCC.Errors,
+        }, {
+            id: "logicalFiles",
+            label: nlsHPCC.LogicalFiles,
+            count: logicalFileCount
+        }, {
+            id: "superfiles",
+            label: nlsHPCC.SuperFiles,
+            count: superFileCount
+        }, {
+            id: "librariesUsed",
+            label: nlsHPCC.LibrariesUsed,
+            count: libsUsedCount
+        }, {
+            id: "summaryStatistics",
+            label: nlsHPCC.SummaryStatistics,
+        }, {
+            id: "metrics",
+            label: nlsHPCC.Metrics,
+        }, {
+            id: "resources",
+            label: nlsHPCC.Resources,
+            disabled: wuid === ""
+        }, {
+            id: "testPages",
+            label: nlsHPCC.TestPages,
+        }];
+    }, [libsUsedCount, logicalFileCount, superFileCount, wuid]);
+
     return <SizeMe monitorHeight>{({ size }) =>
-        <Pivot
-            overflowBehavior="menu" style={{ height: "100%" }} selectedKey={tab}
-            onLinkClick={evt => {
-                switch (evt.props.itemKey) {
-                    case "testPages":
-                        pushUrl(`/queries/${querySet}/${queryId}/testPages/${testTab}`);
-                        break;
-                    default:
-                        pushUrl(`/queries/${querySet}/${queryId}/${evt.props.itemKey}`);
-                        break;
-                }
-            }}
-        >
-            <PivotItem headerText={queryId} itemKey="summary" style={pivotItemStyle(size)} >
+        <div style={{ height: "100%" }}>
+            <OverflowTabList tabs={tabs} selectedTab={tab} onTabSelect={onTabSelect} size="medium" />
+            <DelayLoadedPanel visible={tab === "summary"} size={size}>
                 <QuerySummary queryId={queryId} querySet={querySet} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Errors} itemKey="errors" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "errors"} size={size}>
                 <QueryErrors queryId={queryId} querySet={querySet} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.LogicalFiles} itemKey="logicalFiles" itemCount={logicalFileCount} style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "logicalFiles"} size={size}>
                 <QueryLogicalFiles queryId={queryId} querySet={querySet} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.SuperFiles} itemKey="superfiles" itemCount={superFileCount} style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "superfiles"} size={size}>
                 <QuerySuperFiles queryId={queryId} querySet={querySet} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.LibrariesUsed} itemKey="librariesUsed" itemCount={libsUsedCount} style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "librariesUsed"} size={size}>
                 <QueryLibrariesUsed queryId={queryId} querySet={querySet} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.SummaryStatistics} itemKey="summaryStatistics" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "summaryStatistics"} size={size}>
                 <QuerySummaryStats queryId={queryId} querySet={querySet} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Metrics} itemKey="metrics" style={pivotItemStyle(size, 0)}>
-                <QueryMetrics wuid={query?.Wuid} queryId={queryId} querySet={querySet} tab={metricsTab} selection={state} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Resources} itemKey="resources" headerButtonProps={wuidDisable} style={pivotItemStyle(size, 0)}>
-                {wuid && <Resources wuid={wuid} />}
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.TestPages} itemKey="testPages" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "metrics"} size={size}>
+                <QueryMetrics wuid={query?.Wuid} queryId={queryId} querySet={querySet} tab={metricsTab} selection={metricsState} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "resources"} size={size}>
+                <Resources wuid={wuid} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "testPages"} size={size}>
                 <QueryTests queryId={queryId} querySet={querySet} tab={testTab} />
-            </PivotItem>
-        </Pivot>
+            </DelayLoadedPanel>
+        </div>
     }</SizeMe>;
 };
diff --git a/esp/src/src-react/components/WorkunitDetails.tsx b/esp/src/src-react/components/WorkunitDetails.tsx
index 3ae985ed24c..66d016c479b 100644
--- a/esp/src/src-react/components/WorkunitDetails.tsx
+++ b/esp/src/src-react/components/WorkunitDetails.tsx
@@ -1,14 +1,12 @@
 import * as React from "react";
-import { IPivotItemProps, Pivot, PivotItem } from "@fluentui/react";
+import { Icon } from "@fluentui/react";
 import { scopedLogger } from "@hpcc-js/util";
 import { SizeMe } from "react-sizeme";
 import nlsHPCC from "src/nlsHPCC";
 import { hasLogAccess } from "src/ESPLog";
 import { useWorkunit } from "../hooks/workunit";
-import { useUserTheme } from "../hooks/theme";
 import { useDeepEffect } from "../hooks/deepHooks";
 import { DojoAdapter } from "../layouts/DojoAdapter";
-import { pivotItemStyle } from "../layouts/pivot";
 import { pushUrl } from "../util/history";
 import { WorkunitPersona } from "./controls/StateIcon";
 import { Helpers } from "./Helpers";
@@ -24,14 +22,16 @@ import { SourceFiles } from "./SourceFiles";
 import { Variables } from "./Variables";
 import { Workflows } from "./Workflows";
 import { WorkunitSummary } from "./WorkunitSummary";
+import { TabInfo, DelayLoadedPanel, OverflowTabList } from "./controls/TabbedPanes/index";
 
 const logger = scopedLogger("src-react/components/WorkunitDetails.tsx");
 
+type StringStringMap = { [key: string]: string };
 interface WorkunitDetailsProps {
     wuid: string;
     tab?: string;
-    state?: string;
-    queryParams?: { [key: string]: string };
+    state?: { outputs?: string, metrics?: string, resources?: string, helpers?: string };
+    queryParams?: { outputs?: StringStringMap, inputs?: StringStringMap, resources?: StringStringMap, helpers?: StringStringMap, logs?: StringStringMap };
 }
 
 export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
@@ -41,22 +41,7 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
     queryParams = {}
 }) => {
 
-    const { themeV9 } = useUserTheme();
     const [workunit] = useWorkunit(wuid, true);
-
-    const wuidPivotRenderer = React.useMemo(() => {
-        return function (link?: IPivotItemProps,
-            defaultRenderer?: (link?: IPivotItemProps) => JSX.Element | null) {
-            if (!link || !defaultRenderer) return null;
-            return <span>
-                <WorkunitPersona wuid={wuid} showProtected={false} showWuid={false} />
-                {defaultRenderer({ ...link, itemIcon: undefined })}
-            </span>;
-        };
-    }, [wuid]);
-
-    const resourceCount = workunit?.ResourceURLCount > 1 ? workunit?.ResourceURLCount - 1 : undefined;
-
     const [logCount, setLogCount] = React.useState<number | string>("*");
     const [logsDisabled, setLogsDisabled] = React.useState(true);
 
@@ -70,55 +55,111 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
         });
     }, [wuid], [queryParams]);
 
+    const onTabSelect = React.useCallback((tab: TabInfo) => {
+        pushUrl(tab.__state ?? `/workunits/${wuid}/${tab.id}`);
+    }, [wuid]);
+
+    const tabs = React.useMemo((): TabInfo[] => {
+        return [{
+            id: "summary",
+            icon: <WorkunitPersona wuid={wuid} showProtected={false} showWuid={false} />,
+            label: wuid
+        }, {
+            id: "variables",
+            label: nlsHPCC.Variables,
+            count: (workunit?.VariableCount || 0) + (workunit?.ApplicationValueCount || 0) + (workunit?.DebugValueCount || 0)
+        }, {
+            id: "outputs",
+            label: nlsHPCC.Outputs,
+            count: workunit?.ResultCount
+        }, {
+            id: "inputs",
+            label: nlsHPCC.Inputs,
+            count: workunit?.SourceFileCount
+        }, {
+            id: "metrics",
+            label: nlsHPCC.Metrics,
+            count: workunit?.GraphCount
+        }, {
+            id: "workflows",
+            label: nlsHPCC.Workflows,
+            count: workunit?.WorkflowCount
+        }, {
+            id: "queries",
+            icon: <Icon iconName="Search"></Icon>,
+            label: nlsHPCC.Queries
+        }, {
+            id: "resources",
+            label: nlsHPCC.Resources,
+            count: workunit?.ResourceURLCount
+        }, {
+            id: "helpers",
+            label: nlsHPCC.Helpers,
+            count: workunit?.HelpersCount
+        }, {
+            id: "logs",
+            label: nlsHPCC.Logs,
+            count: logCount,
+            disabled: logsDisabled
+        }, {
+            id: "eclsummary",
+            label: nlsHPCC.ECL
+        }, {
+            id: "xml",
+            label: nlsHPCC.XML
+        }];
+    }, [logCount, logsDisabled, workunit?.ApplicationValueCount, workunit?.DebugValueCount, workunit?.GraphCount, workunit?.HelpersCount, workunit?.ResourceURLCount, workunit?.ResultCount, workunit?.SourceFileCount, workunit?.VariableCount, workunit?.WorkflowCount, wuid]);
+
     return <SizeMe monitorHeight>{({ size }) =>
-        <Pivot overflowBehavior="menu" style={{ height: "100%" }} selectedKey={tab} onLinkClick={evt => pushUrl(`/workunits/${wuid}/${evt.props.itemKey}`)}>
-            <PivotItem headerText={wuid} itemKey="summary" style={pivotItemStyle(size)} onRenderItemLink={wuidPivotRenderer}>
+        <div style={{ height: "100%" }}>
+            <OverflowTabList tabs={tabs} selectedTab={tab} onTabSelect={onTabSelect} size="medium" />
+            <DelayLoadedPanel visible={tab === "summary"} size={size}>
                 <WorkunitSummary wuid={wuid} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Variables} itemCount={(workunit?.VariableCount || 0) + (workunit?.ApplicationValueCount || 0) + (workunit?.DebugValueCount || 0)} itemKey="variables" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "variables"} size={size}>
                 <Variables wuid={wuid} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Outputs} itemKey="outputs" itemCount={workunit?.ResultCount} style={pivotItemStyle(size, 0)}>
-                {state ?
-                    queryParams.hasOwnProperty("__legacy") ? <IFrame src={`/WsWorkunits/WUResult?Wuid=${wuid}&ResultName=${state}`} height="99%" /> :
-                        queryParams.hasOwnProperty("__visualize") ? <DojoAdapter widgetClassID="VizWidget" params={{ Wuid: wuid, Sequence: state }} /> :
-                            <Result wuid={wuid} resultName={state} filter={queryParams} /> :
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "outputs"} size={size}>
+                {state?.outputs ?
+                    queryParams.outputs?.hasOwnProperty("__legacy") ? <IFrame src={`/WsWorkunits/WUResult?Wuid=${wuid}&ResultName=${state?.outputs}`} height="99%" /> :
+                        queryParams.outputs?.hasOwnProperty("__visualize") ? <DojoAdapter widgetClassID="VizWidget" params={{ Wuid: wuid, Sequence: state?.outputs }} /> :
+                            <Result wuid={wuid} resultName={state?.outputs} filter={queryParams.outputs} /> :
                     <Results wuid={wuid} />
                 }
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Inputs} itemKey="inputs" itemCount={workunit?.SourceFileCount} style={pivotItemStyle(size, 0)}>
-                <SourceFiles wuid={wuid} filter={queryParams} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Metrics} itemKey="metrics" itemCount={workunit?.GraphCount} style={pivotItemStyle(size, 0)}>
-                <Metrics wuid={wuid} selection={state} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Workflows} itemKey="workflows" itemCount={workunit?.WorkflowCount} style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "inputs"} size={size}>
+                <SourceFiles wuid={wuid} filter={queryParams.inputs} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "metrics"} size={size}>
+                <Metrics wuid={wuid} selection={state?.metrics} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "workflows"} size={size}>
                 <Workflows wuid={wuid} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Queries} itemIcon="Search" itemKey="queries" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "queries"} size={size}>
                 <Queries filter={{ WUID: wuid }} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Resources} itemKey="resources" itemCount={resourceCount} style={pivotItemStyle(size, 0)}>
-                {state ?
-                    <FetchEditor mode={queryParams?.mode as any} url={queryParams?.url as string} /> :
-                    <Resources wuid={wuid} preview={queryParams?.preview as any} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "resources"} size={size}>
+                {state?.resources ?
+                    <FetchEditor mode={queryParams.resources?.mode as any} url={queryParams.resources?.url as string} /> :
+                    <Resources wuid={wuid} preview={queryParams.resources?.preview as any} />
                 }
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Helpers} itemKey="helpers" itemCount={workunit?.HelpersCount} style={pivotItemStyle(size, 0)}>
-                {state ?
-                    <FetchEditor mode={queryParams?.mode as any} url={queryParams?.src as string} wuid={queryParams?.mode?.toLowerCase() === "ecl" ? wuid : ""} /> :
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "helpers"} size={size}>
+                {state?.helpers ?
+                    <FetchEditor mode={queryParams.helpers?.mode as any} url={queryParams.helpers?.src as string} wuid={queryParams.helpers?.mode?.toLowerCase() === "ecl" ? wuid : ""} /> :
                     <Helpers wuid={wuid} />
                 }
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.Logs} itemKey="logs" itemCount={logCount} headerButtonProps={logsDisabled ? { disabled: true, style: { background: themeV9.colorNeutralBackgroundDisabled, color: themeV9.colorNeutralForegroundDisabled } } : {}} style={pivotItemStyle(size, 0)}>
-                <Logs wuid={wuid} filter={queryParams} setLogCount={setLogCount} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.ECL} itemKey="eclsummary" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "logs"} size={size}>
+                <Logs wuid={wuid} filter={queryParams.logs} setLogCount={setLogCount} />
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "eclsummary"} size={size}>
                 <DojoAdapter widgetClassID="ECLArchiveWidget" params={{ Wuid: wuid }} />
-            </PivotItem>
-            <PivotItem headerText={nlsHPCC.XML} itemKey="xml" style={pivotItemStyle(size, 0)}>
+            </DelayLoadedPanel>
+            <DelayLoadedPanel visible={tab === "xml"} size={size}>
                 <WUXMLSourceEditor wuid={wuid} />
-            </PivotItem>
-        </Pivot>
+            </DelayLoadedPanel>
+        </div>
     }</SizeMe>;
 };
diff --git a/esp/src/src-react/components/controls/TabbedPanes/Count.tsx b/esp/src/src-react/components/controls/TabbedPanes/Count.tsx
new file mode 100644
index 00000000000..19e02b1e716
--- /dev/null
+++ b/esp/src/src-react/components/controls/TabbedPanes/Count.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+interface CountProps {
+    value: string | number;
+}
+
+export const Count: React.FunctionComponent<CountProps> = ({
+    value
+}) => {
+
+    if (!value) return <></>;
+    return <span> ({value})</span>;
+};
diff --git a/esp/src/src-react/components/controls/TabbedPanes/DelayLoadedPanel.tsx b/esp/src/src-react/components/controls/TabbedPanes/DelayLoadedPanel.tsx
new file mode 100644
index 00000000000..62b7eacf3ee
--- /dev/null
+++ b/esp/src/src-react/components/controls/TabbedPanes/DelayLoadedPanel.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Size, pivotItemStyle } from "../../../layouts/pivot";
+
+export interface DelayLoadedPanelProps {
+    visible: boolean;
+    size: Size;
+    padding?: number;
+}
+
+export const DelayLoadedPanel: React.FunctionComponent<DelayLoadedPanelProps> = ({
+    visible,
+    size,
+    padding = 4,
+    children
+}) => {
+
+    const [loaded, setLoaded] = React.useState(false);
+    const [style, setStyle] = React.useState(pivotItemStyle(size, padding));
+
+    React.useEffect(() => {
+        if (visible) {
+            setLoaded(true);
+            setStyle(pivotItemStyle(size, padding));
+        }
+    }, [padding, size, visible]);
+
+    if (!loaded) return <></>;
+    return <div style={{ ...style, display: visible ? "block" : "none" }}>
+        {children}
+    </div >;
+};
+
diff --git a/esp/src/src-react/components/controls/TabbedPanes/OverflowMenu.tsx b/esp/src/src-react/components/controls/TabbedPanes/OverflowMenu.tsx
new file mode 100644
index 00000000000..018b0e75ce6
--- /dev/null
+++ b/esp/src/src-react/components/controls/TabbedPanes/OverflowMenu.tsx
@@ -0,0 +1,77 @@
+import * as React from "react";
+import { makeStyles, tokens, Button, Menu, MenuList, MenuPopover, MenuTrigger, useOverflowMenu, useIsOverflowItemVisible, MenuItem, } from "@fluentui/react-components";
+import { MoreHorizontalRegular, MoreHorizontalFilled, bundleIcon, } from "@fluentui/react-icons";
+import type { ARIAButtonElement } from "@fluentui/react-aria";
+import { TabInfo } from "./TabInfo";
+import { Count } from "./Count";
+
+const MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);
+
+type OverflowMenuItemProps = {
+    tab: TabInfo;
+    onClick: React.MouseEventHandler<ARIAButtonElement<"div">>;
+};
+
+const OverflowMenuItem = (props: OverflowMenuItemProps) => {
+    const { tab, onClick } = props;
+    const isVisible = useIsOverflowItemVisible(tab.id);
+
+    if (isVisible) {
+        return <></>;
+    }
+
+    return <MenuItem key={tab.id} icon={tab.icon} disabled={tab.disabled} onClick={onClick}>
+        <div>{tab.label}<Count value={tab.count} /></div>
+    </MenuItem>;
+};
+
+const useOverflowMenuStyles = makeStyles({
+    menu: {
+        backgroundColor: tokens.colorNeutralBackground1,
+    },
+    menuButton: {
+        alignSelf: "center",
+    },
+});
+
+export type OverflowMenuProps = {
+    tabs: TabInfo[];
+    onMenuSelect: (tab: TabInfo) => void;
+};
+
+export const OverflowMenu: React.FunctionComponent<OverflowMenuProps> = ({
+    tabs,
+    onMenuSelect
+}) => {
+    const { ref, isOverflowing, overflowCount } = useOverflowMenu<HTMLButtonElement>();
+
+    const styles = useOverflowMenuStyles();
+
+    if (!isOverflowing) {
+        return <></>;
+    }
+
+    return <Menu hasIcons>
+        <MenuTrigger disableButtonEnhancement>
+            <Button
+                appearance="transparent"
+                className={styles.menuButton}
+                ref={ref}
+                icon={<MoreHorizontal />}
+                aria-label={`${overflowCount} more tabs`}
+                role="tab"
+            />
+        </MenuTrigger>
+        <MenuPopover>
+            <MenuList className={styles.menu}>
+                {tabs.map((tab) => (
+                    <OverflowMenuItem
+                        key={tab.id}
+                        tab={tab}
+                        onClick={() => onMenuSelect(tab)}
+                    />
+                ))}
+            </MenuList>
+        </MenuPopover>
+    </Menu>;
+};
diff --git a/esp/src/src-react/components/controls/TabbedPanes/OverflowTabList.tsx b/esp/src/src-react/components/controls/TabbedPanes/OverflowTabList.tsx
new file mode 100644
index 00000000000..585d74c080b
--- /dev/null
+++ b/esp/src/src-react/components/controls/TabbedPanes/OverflowTabList.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Overflow, OverflowItem, SelectTabData, SelectTabEvent, Tab, TabList } from "@fluentui/react-components";
+import { Count } from "./Count";
+import { TabInfo } from "./TabInfo";
+import { OverflowMenu } from "./OverflowMenu";
+
+export interface OverflowTabListProps {
+    tabs: TabInfo[];
+    selectedTab: string;
+    onTabSelect: (tab: TabInfo) => void;
+    size?: "small" | "medium" | "large";
+}
+
+export const OverflowTabList: React.FunctionComponent<OverflowTabListProps> = ({
+    tabs,
+    selectedTab,
+    onTabSelect,
+    size = "medium"
+}) => {
+
+    const state = `${window.location.hash}${window.location.search}`;
+
+    const [overflowItems, tabsIndex] = React.useMemo(() => {
+        const tabsIndex = {};
+        return [tabs.map(tab => {
+            tabsIndex[tab.id] = tab;
+            if (tab.id === selectedTab) {
+                tab.__state = state;
+            }
+            return <OverflowItem key={tab.id} id={tab.id} priority={tab.id === selectedTab ? 2 : 1}>
+                <Tab value={tab.id} icon={tab.icon} disabled={tab.disabled}>{tab.label}<Count value={tab.count} /></Tab>
+            </OverflowItem>;
+        }), tabsIndex];
+    }, [selectedTab, state, tabs]);
+
+    const localTabSelect = React.useCallback((evt: SelectTabEvent, data: SelectTabData) => {
+        onTabSelect(tabsIndex[data.value as string]);
+    }, [onTabSelect, tabsIndex]);
+
+    return <Overflow minimumVisible={2}>
+        <TabList selectedValue={selectedTab} onTabSelect={localTabSelect} size={size}>
+            {...overflowItems}
+            <OverflowMenu onMenuSelect={onTabSelect} tabs={tabs} />
+        </TabList>
+    </Overflow>;
+};
diff --git a/esp/src/src-react/components/controls/TabbedPanes/TabInfo.ts b/esp/src/src-react/components/controls/TabbedPanes/TabInfo.ts
new file mode 100644
index 00000000000..7d87929b3a6
--- /dev/null
+++ b/esp/src/src-react/components/controls/TabbedPanes/TabInfo.ts
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+export interface TabInfo {
+    id: string;
+    icon?: React.ReactElement;
+    label: string;
+    count?: string | number;
+    disabled?: boolean;
+    __state?: any;
+}
diff --git a/esp/src/src-react/components/controls/TabbedPanes/index.tsx b/esp/src/src-react/components/controls/TabbedPanes/index.tsx
new file mode 100644
index 00000000000..ac1cea5b26b
--- /dev/null
+++ b/esp/src/src-react/components/controls/TabbedPanes/index.tsx
@@ -0,0 +1,3 @@
+export * from "./TabInfo";
+export * from "./OverflowTabList";
+export * from "./DelayLoadedPanel";
diff --git a/esp/src/src-react/layouts/pivot.ts b/esp/src/src-react/layouts/pivot.ts
index 7b16a07facf..d6cc85009a5 100644
--- a/esp/src/src-react/layouts/pivot.ts
+++ b/esp/src/src-react/layouts/pivot.ts
@@ -1,6 +1,11 @@
 import { useUserTheme } from "../hooks/theme";
 
-export const pivotItemStyle = (size, padding: number = 4) => {
+export interface Size {
+    width?: number | null
+    height?: number | null
+}
+
+export const pivotItemStyle = (size: Size, padding: number = 4) => {
     if (isNaN(size.width)) {
         return { position: "absolute", padding: `${padding}px`, overflow: "auto", zIndex: 0 } as React.CSSProperties;
     }
diff --git a/esp/src/src-react/routes.tsx b/esp/src/src-react/routes.tsx
index 265d3607633..f8c86624c4f 100644
--- a/esp/src/src-react/routes.tsx
+++ b/esp/src/src-react/routes.tsx
@@ -72,12 +72,12 @@ export const routes: RoutesEx = [
             },
             {
                 path: "/:Wuid/:Tab", action: (ctx, params) => import("./components/WorkunitDetails").then(_ => {
-                    return <_.WorkunitDetails wuid={params.Wuid as string} tab={params.Tab as string} queryParams={parseSearch(ctx.search) as any} />;
+                    return <_.WorkunitDetails wuid={params.Wuid as string} tab={params.Tab as string} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
                 })
             },
             {
                 path: "/:Wuid/:Tab/:State", action: (ctx, params) => import("./components/WorkunitDetails").then(_ => {
-                    return <_.WorkunitDetails wuid={params.Wuid as string} tab={params.Tab as string} state={(params.State as string)} queryParams={parseSearch(ctx.search) as any} />;
+                    return <_.WorkunitDetails wuid={params.Wuid as string} tab={params.Tab as string} state={{ [params.Tab as string]: (params.State as string) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
                 })
             },
         ]
@@ -124,7 +124,7 @@ export const routes: RoutesEx = [
             },
             {
                 path: "/:NodeGroup/:Name/:Tab", action: (ctx, params) => import("./components/FileDetails").then(_ => {
-                    return <_.FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} tab={params.Tab as string} sort={parseSort(ctx.search)} queryParams={parseSearch(ctx.search) as any} />;
+                    return <_.FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} tab={params.Tab as string} sort={{ [params.Tab as string]: parseSort(ctx.search) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
                 })
             },
         ]
@@ -226,7 +226,7 @@ export const routes: RoutesEx = [
             },
             {
                 path: "/:QuerySetId/:Id/metrics/:Wuid/:State", action: (ctx, params) => import("./components/QueryDetails").then(_ => {
-                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab="metrics" metricsTab={params.Wuid as string} state={params.State as string} />;
+                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab="metrics" metricsTab={params.Wuid as string} metricsState={params.State as string} />;
                 })
             },
             {