diff --git a/ui/.gitignore b/ui/.gitignore
index 6bc3041b..46ee295d 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -40,3 +40,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+*:Zone.Identifier
+*.diff
+
diff --git a/ui/.prettierrc.json b/ui/.prettierrc.json
index 2197f514..019849bd 100644
--- a/ui/.prettierrc.json
+++ b/ui/.prettierrc.json
@@ -6,7 +6,7 @@
   "printWidth": 120,
   "useTabs": false,
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "arrowParens": "always",
   "endOfLine": "lf",
   "singleAttributePerLine": true
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/CollectionDetails.tsx b/ui/src/app/datasets/[bucket]/[name]/components/CollectionDetails.tsx
index dde3fe12..4d4881f0 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/CollectionDetails.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/CollectionDetails.tsx
@@ -13,10 +13,8 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { useEffect, useRef, useState } from "react";
 
 import Link from "next/link";
-import { useWindowSize } from "usehooks-ts";
 
 import { OutlinedIcon } from "~/components/Icon";
 import { Colors, Tag } from "~/components/Tag";
@@ -31,105 +29,100 @@ interface DatasetDetailsProps {
 
 export const CollectionDetails = ({ dataset }: DatasetDetailsProps) => {
   const toolParamUpdater = useToolParamUpdater();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(0);
-  const windowSize = useWindowSize();
-
-  useEffect(() => {
-    if (containerRef?.current) {
-      setHeight(windowSize.height - containerRef.current.getBoundingClientRect().top - 12);
-    }
-  }, [windowSize.height]);
 
   return (
-    <div ref={containerRef}>
-      <div
-        className="h-full flex flex-col overflow-y-auto w-[33vw] max-w-150 body-component"
-        style={{
-          height: `${height}px`,
-        }}
+    <div className="h-full flex flex-col overflow-y-auto w-[33vw] max-w-150 body-component shadow-xl shadow-black/50 z-10">
+      <section
+        aria-labelledby="details-title"
+        className="h-full w-full flex flex-col dag-details-body"
       >
-        <div className="h-full w-full flex flex-col dag-details-body">
-          <div className="text-center p-3 font-semibold brand-header">{dataset.name}</div>
-          <div className="h-full">
-            <dl className="p-3">
-              <dt>ID</dt>
-              <dd>{dataset.id}</dd>
-              <dt>Bucket</dt>
-              <dd>
-                <Link
-                  key={dataset.bucket}
-                  href={`/datasets/${dataset.bucket}`}
-                  className="tag-container"
-                >
-                  <Tag color={Colors.platform}>{dataset.bucket}</Tag>
-                </Link>
-              </dd>
-              {dataset.created_by && (
-                <>
-                  <dt>Created By</dt>
-                  <dd>{dataset.created_by}</dd>
-                </>
+        <h2
+          id="details-title"
+          className="text-center p-global font-semibold brand-header"
+        >
+          {dataset.name}
+        </h2>
+        <div className="h-full">
+          <dl
+            className="p-global"
+            aria-labelledby="details-title"
+          >
+            <dt>ID</dt>
+            <dd>{dataset.id}</dd>
+            <dt>Bucket</dt>
+            <dd>
+              <Link
+                key={dataset.bucket}
+                href={`/datasets/${dataset.bucket}`}
+                className="tag-container"
+              >
+                <Tag color={Colors.platform}>{dataset.bucket}</Tag>
+              </Link>
+            </dd>
+            {dataset.created_by && (
+              <>
+                <dt>Created By</dt>
+                <dd>{dataset.created_by}</dd>
+              </>
+            )}
+            <dt>Created Date</dt>
+            <dd>{convertToReadableTimezone(dataset.created_date)}</dd>
+            <dt>Labels</dt>
+            <dd>
+              {Object.entries(dataset.labels).length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {Object.entries(dataset.labels).map(([key, value], index) => (
+                    <Tag
+                      key={index}
+                      color={Colors.tag}
+                    >
+                      {key}: {String(value)}
+                    </Tag>
+                  ))}
+                </div>
+              ) : (
+                <p>None</p>
               )}
-              <dt>Created Date</dt>
-              <dd>{convertToReadableTimezone(dataset.created_date)}</dd>
-              <dt>Labels</dt>
-              <dd>
-                {Object.entries(dataset.labels).length > 0 ? (
-                  <div className="flex flex-wrap gap-1">
-                    {Object.entries(dataset.labels).map(([key, value], index) => (
-                      <Tag
-                        key={index}
-                        color={Colors.tag}
-                      >
-                        {key}: {String(value)}
-                      </Tag>
-                    ))}
-                  </div>
-                ) : (
-                  <p>None</p>
-                )}
-              </dd>
-            </dl>
-          </div>
-          <div
-            className={`dag-actions body-footer w-full`}
-            role="list"
-            aria-label="Collection Actions"
+            </dd>
+          </dl>
+        </div>
+        <div
+          className={`dag-actions body-footer w-full`}
+          role="list"
+          aria-label="Collection Actions"
+        >
+          <button
+            className="btn btn-action whitespace-nowrap"
+            role="listitem"
+            onClick={() => {
+              toolParamUpdater({ tool: ToolType.Labels });
+            }}
+          >
+            <OutlinedIcon name="snippet_folder" />
+            Edit Labels
+          </button>
+          <button
+            className="btn btn-action whitespace-nowrap"
+            role="listitem"
+            onClick={() => {
+              toolParamUpdater({ tool: ToolType.Delete });
+            }}
+          >
+            <OutlinedIcon name="delete" />
+            Delete Collection
+          </button>
+          <button
+            className="btn btn-action whitespace-nowrap"
+            role="listitem"
+            onClick={() => {
+              toolParamUpdater({ tool: ToolType.Rename });
+            }}
           >
-            <button
-              className="btn btn-action whitespace-nowrap"
-              role="listitem"
-              onClick={() => {
-                toolParamUpdater({ tool: ToolType.Labels });
-              }}
-            >
-              <OutlinedIcon name="snippet_folder" />
-              Edit Labels
-            </button>
-            <button
-              className="btn btn-action whitespace-nowrap"
-              role="listitem"
-              onClick={() => {
-                toolParamUpdater({ tool: ToolType.Delete });
-              }}
-            >
-              <OutlinedIcon name="delete" />
-              Delete Collection
-            </button>
-            <button
-              className="btn btn-action whitespace-nowrap"
-              role="listitem"
-              onClick={() => {
-                toolParamUpdater({ tool: ToolType.Rename });
-              }}
-            >
-              <OutlinedIcon name="snippet_folder" />
-              Rename Collection
-            </button>
-          </div>
+            <OutlinedIcon name="snippet_folder" />
+            Rename Collection
+          </button>
         </div>
-      </div>
+      </section>
     </div>
   );
 };
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/CollectionOverview.tsx b/ui/src/app/datasets/[bucket]/[name]/components/CollectionOverview.tsx
index 3c9832a3..c2ac5231 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/CollectionOverview.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/CollectionOverview.tsx
@@ -15,11 +15,12 @@
 //SPDX-License-Identifier: Apache-2.0
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useSearchParams } from "next/navigation";
 
-import { DatasetTag } from "~/components/Tag";
+import PageHeader from "~/components/PageHeader";
+import { Colors, Tag } from "~/components/Tag";
 import { type DataInfoResponse, type DatasetTypesSchema } from "~/models";
 
 import { CollectionDetails } from "./CollectionDetails";
@@ -37,7 +38,6 @@ export default function CollectionOverview({
   const searchParams = useSearchParams();
   const toolParamUpdater = useToolParamUpdater();
   const [tool, setTool] = useState<ToolType | undefined>(undefined);
-  const headerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setTool(searchParams.get(PARAM_KEYS.tool) as ToolType | undefined);
@@ -45,17 +45,13 @@ export default function CollectionOverview({
 
   return (
     <>
-      <div
-        className="page-header mb-3 flex items-center text-center gap-3"
-        ref={headerRef}
-      >
-        <DatasetTag isCollection={dataset.type === "COLLECTION"}>{dataset.type}</DatasetTag>
-        <h1>
+      <PageHeader>
+        <h2 className="grow">
           {dataset.bucket}/{dataset.name}
-        </h1>
-        <div className="w-25" />
-      </div>
-      <div className="grid h-full w-full gap-3 grid-cols-[1fr_auto] relative px-3">
+        </h2>
+        <Tag color={Colors.collection}>Collection</Tag>
+      </PageHeader>
+      <div className="grid h-full w-full grid-cols-[1fr_auto] relative overflow-auto">
         <CollectionVersionsTable collection={dataset} />
         <CollectionDetails dataset={dataset} />
       </div>
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/CollectionVersionsTable.tsx b/ui/src/app/datasets/[bucket]/[name]/components/CollectionVersionsTable.tsx
index e659bd48..6a90f9ba 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/CollectionVersionsTable.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/CollectionVersionsTable.tsx
@@ -105,6 +105,7 @@ export const CollectionVersionsTable: React.FC<{
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getRowId: (row) => row.version,
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     onColumnFiltersChange: setColumnFilters,
@@ -123,7 +124,6 @@ export const CollectionVersionsTable: React.FC<{
     <TableBase
       columns={columns}
       table={table}
-      paddingOffset={12}
       className="body-component"
     >
       <TablePagination
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/DatasetDetails.tsx b/ui/src/app/datasets/[bucket]/[name]/components/DatasetDetails.tsx
index 34d87fe0..08240cf9 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/DatasetDetails.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/DatasetDetails.tsx
@@ -30,56 +30,62 @@ export const DatasetDetails = ({ dataset }: DatasetDetailsProps) => {
   const toolParamUpdater = useToolParamUpdater();
 
   return (
-    <div className="dag-details-body body-component h-auto">
-      <div className="text-center p-3 font-semibold brand-header">{dataset.name}</div>
-      <div className="h-full">
-        <dl className="p-3">
-          <dt>ID</dt>
-          <dd>{dataset.id}</dd>
-          <dt>Bucket</dt>
-          <dd>
-            <Link
-              key={dataset.bucket}
-              href={`/datasets/${dataset.bucket}`}
-              className="tag-container"
-            >
-              <Tag color={Colors.platform}>{dataset.bucket}</Tag>
-            </Link>
-          </dd>
-          {dataset.created_by && (
-            <>
-              <dt>Created By</dt>
-              <dd>{dataset.created_by}</dd>
-            </>
-          )}
-          <dt>Created Date</dt>
-          <dd>{convertToReadableTimezone(dataset.created_date)}</dd>
-          {dataset.hash_location_size && (
-            <>
-              <dt>Storage Size</dt>
-              <dd>{convertBytes(dataset.hash_location_size)}</dd>
-            </>
+    <section aria-labelledby="dataset-details-title">
+      <h2
+        id="dataset-details-title"
+        className="text-center p-global font-semibold brand-header"
+      >
+        {dataset.name}
+      </h2>
+      <dl
+        className="p-global grow"
+        aria-labelledby="dataset-details-title"
+      >
+        <dt>ID</dt>
+        <dd>{dataset.id}</dd>
+        <dt>Bucket</dt>
+        <dd>
+          <Link
+            key={dataset.bucket}
+            href={`/datasets/${dataset.bucket}`}
+            className="tag-container"
+          >
+            <Tag color={Colors.platform}>{dataset.bucket}</Tag>
+          </Link>
+        </dd>
+        {dataset.created_by && (
+          <>
+            <dt>Created By</dt>
+            <dd>{dataset.created_by}</dd>
+          </>
+        )}
+        <dt>Created Date</dt>
+        <dd>{convertToReadableTimezone(dataset.created_date)}</dd>
+        {dataset.hash_location_size && (
+          <>
+            <dt>Storage Size</dt>
+            <dd>{convertBytes(dataset.hash_location_size)}</dd>
+          </>
+        )}
+        <dt>Labels</dt>
+        <dd>
+          {Object.entries(dataset.labels).length > 0 ? (
+            <div className="flex flex-wrap gap-1">
+              {Object.entries(dataset.labels).map(([key, value], index) => (
+                <Tag
+                  key={index}
+                  color={Colors.tag}
+                  className="min-h-6 break-all"
+                >
+                  {key}: {String(value)}
+                </Tag>
+              ))}
+            </div>
+          ) : (
+            <p>None</p>
           )}
-          <dt>Labels</dt>
-          <dd>
-            {Object.entries(dataset.labels).length > 0 ? (
-              <div className="flex flex-wrap gap-1">
-                {Object.entries(dataset.labels).map(([key, value], index) => (
-                  <Tag
-                    key={index}
-                    color={Colors.tag}
-                    className="min-h-6 break-all"
-                  >
-                    {key}: {String(value)}
-                  </Tag>
-                ))}
-              </div>
-            ) : (
-              <p>None</p>
-            )}
-          </dd>
-        </dl>
-      </div>
+        </dd>
+      </dl>
       <div
         className={`dag-actions body-footer w-full`}
         role="list"
@@ -106,6 +112,6 @@ export const DatasetDetails = ({ dataset }: DatasetDetailsProps) => {
           Rename Dataset
         </button>
       </div>
-    </div>
+    </section>
   );
 };
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/DatasetOverview.tsx b/ui/src/app/datasets/[bucket]/[name]/components/DatasetOverview.tsx
index 0391d51d..db079d45 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/DatasetOverview.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/DatasetOverview.tsx
@@ -15,17 +15,18 @@
 //SPDX-License-Identifier: Apache-2.0
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { useWindowSize } from "usehooks-ts";
 
 import FileBrowser, { type FilePreviewModalProps } from "~/app/datasets/components/FileBrowser";
 import FullPageModal from "~/components/FullPageModal";
-import { FilledIcon, OutlinedIcon } from "~/components/Icon";
+import { OutlinedIcon } from "~/components/Icon";
+import { IconButton } from "~/components/IconButton";
 import { PageError } from "~/components/PageError";
-import { DatasetTag } from "~/components/Tag";
+import PageHeader from "~/components/PageHeader";
+import { Colors, Tag } from "~/components/Tag";
 import { type DataInfoDatasetEntry, type DataInfoResponse, type DatasetTypesSchema } from "~/models";
 import { api } from "~/trpc/react";
 
@@ -51,10 +52,6 @@ export default function DatasetOverview({
   const [tool, setTool] = useState<ToolType | undefined>(undefined);
   const [openFileData, setOpenFileData] = useState<FilePreviewModalProps | undefined>(undefined);
   const toolParamUpdater = useToolParamUpdater();
-  const headerRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(0);
-  const windowSize = useWindowSize();
-  const containerRef = useRef<HTMLDivElement>(null);
 
   const {
     data: selectedVersionData,
@@ -74,12 +71,6 @@ export default function DatasetOverview({
     },
   );
 
-  useEffect(() => {
-    if (containerRef?.current) {
-      setHeight(windowSize.height - containerRef.current.getBoundingClientRect().top);
-    }
-  }, [windowSize.height, openFileData, selectedVersionData]);
-
   useEffect(() => {
     if (selectedVersion) {
       const selectedVersionIndex = dataset.versions.findIndex((version) => version.version === selectedVersion);
@@ -101,17 +92,8 @@ export default function DatasetOverview({
 
   return (
     <>
-      <div
-        className="page-header flex items-center text-center gap-3"
-        ref={headerRef}
-      >
-        <DatasetTag
-          key="type"
-          isCollection={dataset.type === "COLLECTION"}
-        >
-          {dataset.type}
-        </DatasetTag>
-        <div className="flex flex-row gap-1 items-center">
+      <PageHeader>
+        <div className="flex flex-row gap-1 items-center justify-center grow">
           {previousVersion ? (
             <Link
               href={`/datasets/${dataset.bucket}/${dataset.name}?version=${previousVersion}`}
@@ -128,9 +110,9 @@ export default function DatasetOverview({
               className="text-lg! mx-1 opacity-50"
             />
           )}
-          <h1>
-            {dataset.bucket}/{dataset.name}: {selectedVersion ?? "latest"}
-          </h1>
+          <h2 className="whitespace-nowrap overflow-hidden text-ellipsis">
+            {dataset.bucket}/{dataset.name}
+          </h2>
           {nextVersion ? (
             <Link
               href={`/datasets/${dataset.bucket}/${dataset.name}?version=${nextVersion}`}
@@ -148,15 +130,14 @@ export default function DatasetOverview({
             />
           )}
         </div>
-        <button
-          className="btn btn-primary flex flex-row items-center gap-2"
+        <Tag color={Colors.dataset}>Dataset</Tag>
+        <IconButton
+          className="btn btn-primary"
           onClick={() => toolParamUpdater({ showVersions: true })}
-        >
-          <FilledIcon name="layers" />
-          Versions
-          <FilledIcon name="more_vert" />
-        </button>
-      </div>
+          icon="layers"
+          text="Versions"
+        />
+      </PageHeader>
       {errorSelectedVersionData && (
         <PageError
           title="Failed to fetch dataset"
@@ -165,11 +146,9 @@ export default function DatasetOverview({
       )}
       {selectedVersionData && (
         <div
-          className={`grid h-full w-full gap-3 relative pl-3 ${
-            openFileData ? "grid-cols-[1fr_1fr]" : "grid-cols-[1fr_auto]"
-          }`}
+          className={`grid h-full w-full overflow-x-auto ${openFileData ? "grid-cols-[1fr_1fr]" : "grid-cols-[1fr_auto]"}`}
         >
-          <div className="relative body-component my-3 min-w-100">
+          <div className="relative min-w-100 h-full">
             <FileBrowser
               currentVersion={selectedVersionData}
               dataset={dataset}
@@ -195,19 +174,12 @@ export default function DatasetOverview({
               }}
             />
           ) : (
-            <div ref={containerRef}>
-              <div
-                className="h-full flex flex-col overflow-y-auto gap-3 w-[33vw] max-w-150 py-3 pr-3"
-                style={{
-                  height: `${height}px`,
-                }}
-              >
-                <DatasetDetails dataset={dataset} />
-                <DatasetVersionDetails
-                  datasetVersion={selectedVersionData}
-                  bucket={dataset.bucket}
-                />
-              </div>
+            <div className="h-full flex flex-col overflow-y-auto w-[33vw] max-w-150 body-component shadow-xl shadow-black/50 z-10">
+              <DatasetDetails dataset={dataset} />
+              <DatasetVersionDetails
+                datasetVersion={selectedVersionData}
+                bucket={dataset.bucket}
+              />
             </div>
           )}
         </div>
@@ -215,7 +187,8 @@ export default function DatasetOverview({
       <FullPageModal
         open={showVersions}
         onClose={() => toolParamUpdater({ showVersions: false })}
-        headerChildren={<h2>Versions</h2>}
+        headerChildren={<h2 id="versions-header">Versions</h2>}
+        aria-labelledby="versions-header"
       >
         <DatasetVersionsTable
           dataset={dataset}
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/DatasetVersionDetails.tsx b/ui/src/app/datasets/[bucket]/[name]/components/DatasetVersionDetails.tsx
index a303bb21..22dfc988 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/DatasetVersionDetails.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/DatasetVersionDetails.tsx
@@ -32,56 +32,62 @@ export const DatasetVersionDetails = ({ datasetVersion, bucket }: DatasetVersion
   const toolParamUpdater = useToolParamUpdater();
 
   return (
-    <div className="dag-details-body body-component h-auto flex-grow">
-      <div className="text-center p-3 font-semibold brand-header">Version {datasetVersion.version}</div>
-      <div className="h-full">
-        <dl className="p-3">
-          <dt>Status</dt>
-          <dd>{datasetVersion.status}</dd>
-          <dt>Created By</dt>
-          <dd>{formatForWrapping(datasetVersion.created_by)}</dd>
-          <dt>Created Date</dt>
-          <dd>{convertToReadableTimezone(datasetVersion.created_date)}</dd>
-          <dt>Last Used</dt>
-          <dd>{convertToReadableTimezone(datasetVersion.last_used)}</dd>
-          <dt>Size</dt>
-          <dd>{convertBytes(datasetVersion.size)}</dd>
-          <dt>Retention Policy</dt>
-          <dd>{Math.floor(datasetVersion.retention_policy / (24 * 60 * 60))} days</dd>
-          <dt>Tags</dt>
-          <dd>
-            <div className="flex flex-wrap gap-1">
-              {datasetVersion.tags.map((tag, index) => (
-                <Tag
-                  key={index}
-                  color={Colors.tag}
-                  className="min-h-6 break-all"
+    <section aria-labelledby="dataset-version-details-title">
+      <h2
+        id="dataset-version-details-title"
+        className="text-center p-global font-semibold brand-header"
+      >
+        Version {datasetVersion.version}
+      </h2>
+      <dl
+        className="p-global grow"
+        aria-labelledby="dataset-version-details-title"
+      >
+        <dt>Status</dt>
+        <dd>{datasetVersion.status}</dd>
+        <dt>Created By</dt>
+        <dd>{formatForWrapping(datasetVersion.created_by)}</dd>
+        <dt>Created Date</dt>
+        <dd>{convertToReadableTimezone(datasetVersion.created_date)}</dd>
+        <dt>Last Used</dt>
+        <dd>{convertToReadableTimezone(datasetVersion.last_used)}</dd>
+        <dt>Size</dt>
+        <dd>{convertBytes(datasetVersion.size)}</dd>
+        <dt>Retention Policy</dt>
+        <dd>{Math.floor(datasetVersion.retention_policy / (24 * 60 * 60))} days</dd>
+        <dt>Tags</dt>
+        <dd>
+          <div className="flex flex-wrap gap-1">
+            {datasetVersion.tags.map((tag, index) => (
+              <Tag
+                key={index}
+                color={Colors.tag}
+                className="min-h-6 break-all"
+              >
+                {tag}
+              </Tag>
+            ))}
+          </div>
+        </dd>
+        <dt>Related Collections</dt>
+        <dd>
+          <div className="flex flex-wrap gap-1">
+            {datasetVersion.collections.length > 0 ? (
+              datasetVersion.collections.map((collection) => (
+                <Link
+                  key={collection}
+                  href={`/datasets/${bucket}/${collection}`}
+                  className="btn btn-badge"
                 >
-                  {tag}
-                </Tag>
-              ))}
-            </div>
-          </dd>
-          <dt>Related Collections</dt>
-          <dd>
-            <div className="flex flex-wrap gap-1">
-              {datasetVersion.collections.length > 0 ? (
-                datasetVersion.collections.map((collection) => (
-                  <Link
-                    key={collection}
-                    href={`/datasets/${bucket}/${collection}`}
-                    className="btn btn-badge"
-                  >
-                    <DatasetTag isCollection>{collection}</DatasetTag>
-                  </Link>
-                ))
-              ) : (
-                <p>None</p>
-              )}
-            </div>
-          </dd>
-        </dl>
-      </div>
+                  <DatasetTag isCollection>{collection}</DatasetTag>
+                </Link>
+              ))
+            ) : (
+              <p>None</p>
+            )}
+          </div>
+        </dd>
+      </dl>
       <div
         className={`dag-actions body-footer w-full`}
         role="list"
@@ -104,6 +110,6 @@ export const DatasetVersionDetails = ({ datasetVersion, bucket }: DatasetVersion
           Metadata
         </button>
       </div>
-    </div>
+    </section>
   );
 };
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/DatasetVersionsTable.tsx b/ui/src/app/datasets/[bucket]/[name]/components/DatasetVersionsTable.tsx
index c01b831d..e77a92de 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/DatasetVersionsTable.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/DatasetVersionsTable.tsx
@@ -164,6 +164,7 @@ export const DatasetVersionsTable = ({ dataset, selectedVersion, visible }: Data
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getRowId: (row) => row.version,
     enableMultiSort: true,
     enableSortingRemoval: false,
     state: { sorting },
@@ -176,18 +177,15 @@ export const DatasetVersionsTable = ({ dataset, selectedVersion, visible }: Data
   });
 
   return (
-    <div className="h-full w-full">
-      <TableBase
-        columns={columns}
+    <TableBase
+      columns={columns}
+      table={table}
+      visible={visible}
+    >
+      <TablePagination
         table={table}
-        paddingOffset={10}
-        visible={visible}
-      >
-        <TablePagination
-          table={table}
-          totalRows={dataset.versions.length}
-        />
-      </TableBase>
-    </div>
+        totalRows={dataset.versions.length}
+      />
+    </TableBase>
   );
 };
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/DeleteCollection.tsx b/ui/src/app/datasets/[bucket]/[name]/components/DeleteCollection.tsx
index cfd15da4..61293122 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/DeleteCollection.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/DeleteCollection.tsx
@@ -65,9 +65,10 @@ export const DeleteCollection = ({ dataset }: { dataset: DataInfoResponse<Datase
 
   return (
     <div className="flex flex-col justify-between">
-      <p className="px-3 py-6">Are you sure you want to delete this collection?</p>
-      {error && <InlineBanner status="error">{error}</InlineBanner>}
-      {showSuccess && <InlineBanner status="success">Collection deleted successfully</InlineBanner>}
+      <p className="px-global py-6">Are you sure you want to delete this collection?</p>
+      <InlineBanner status={error ? "error" : showSuccess ? "success" : "none"}>
+        {(error ?? showSuccess) ? "Collection deleted successfully" : ""}
+      </InlineBanner>
       <div className="modal-footer">
         {!showSuccess && (
           <button
@@ -80,7 +81,7 @@ export const DeleteCollection = ({ dataset }: { dataset: DataInfoResponse<Datase
         <button
           className="btn btn-primary h-8"
           onClick={handleDelete}
-          disabled={loading}
+          aria-disabled={loading}
         >
           {loading ? (
             <Spinner
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/PagedFilePreviewer.tsx b/ui/src/app/datasets/[bucket]/[name]/components/PagedFilePreviewer.tsx
index 57487f37..81d1de4c 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/PagedFilePreviewer.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/PagedFilePreviewer.tsx
@@ -29,9 +29,9 @@ export default function PagedFilePreviewer({
   };
 
   return (
-    <div className="flex flex-col body-component my-3 mr-3">
+    <div className="flex flex-col body-component shadow-xl shadow-black/50 z-10">
       <div className="popup-header brand-header items-center">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-global">
           <button
             className="btn btn-action"
             onClick={() => {
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/Rename.tsx b/ui/src/app/datasets/[bucket]/[name]/components/Rename.tsx
index c1a137f3..50f54f87 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/Rename.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/Rename.tsx
@@ -71,7 +71,7 @@ export const Rename = ({
   return (
     <form onSubmit={handleRename}>
       <div className="flex flex-col justify-between">
-        <div className="p-3 w-100 flex flex-col gap-3">
+        <div className="p-global w-100 flex flex-col gap-global">
           <TextInput
             id="current-name"
             label="Current Name"
@@ -88,8 +88,9 @@ export const Rename = ({
           />
         </div>
         <div className="flex flex-col">
-          {error && <InlineBanner status="error">{error}</InlineBanner>}
-          {showSuccess && <InlineBanner status="success">Collection renamed successfully</InlineBanner>}
+          <InlineBanner status={error ? "error" : showSuccess ? "success" : "none"}>
+            {(error ?? showSuccess) ? "Collection renamed successfully" : ""}
+          </InlineBanner>
           <div className="modal-footer">
             {!showSuccess && (
               <button
@@ -103,7 +104,7 @@ export const Rename = ({
             <button
               className="btn btn-primary h-8"
               type="submit"
-              disabled={loading}
+              aria-disabled={loading}
             >
               {loading ? (
                 <Spinner
diff --git a/ui/src/app/datasets/[bucket]/[name]/components/ToolsModal.tsx b/ui/src/app/datasets/[bucket]/[name]/components/ToolsModal.tsx
index 637b7ff0..64bb5915 100644
--- a/ui/src/app/datasets/[bucket]/[name]/components/ToolsModal.tsx
+++ b/ui/src/app/datasets/[bucket]/[name]/components/ToolsModal.tsx
@@ -31,22 +31,29 @@ export interface OnSaveResponse {
   message: string;
 }
 
-interface ToolsModalProps {
+interface ToolsModalProps extends React.HTMLAttributes<HTMLDivElement> {
   tool?: ToolType;
   dataset: DataInfoResponse<DatasetTypesSchema.Dataset | DatasetTypesSchema.Collection>;
   selectedVersionData?: DataInfoDatasetEntry;
   refetch: () => void;
 }
 
-export const ToolsModal = ({ tool, selectedVersionData, dataset, refetch }: ToolsModalProps) => {
+export const ToolsModal = ({ tool, selectedVersionData, dataset, refetch, ...props }: ToolsModalProps) => {
   const toolParamUpdater = useToolParamUpdater();
 
   const header = useMemo(() => {
     if (tool === ToolType.Delete) {
-      return <h2>Delete Collection</h2>;
+      return <h2 id="delete-collection-header">Delete Collection</h2>;
     }
 
-    return <h2 className="capitalize">{tool}</h2>;
+    return (
+      <h2
+        className="capitalize"
+        id="delete-collection-header"
+      >
+        {tool}
+      </h2>
+    );
   }, [tool]);
 
   return (
@@ -56,15 +63,11 @@ export const ToolsModal = ({ tool, selectedVersionData, dataset, refetch }: Tool
         toolParamUpdater({ tool: null });
       }}
       headerChildren={header}
-      size={
-        tool === ToolType.Delete || tool === ToolType.Rename
-          ? "none"
-          : tool === ToolType.Tags || tool === ToolType.Labels
-            ? "sm"
-            : "md"
-      }
+      size={tool === ToolType.Delete || tool === ToolType.Rename ? "none" : tool === ToolType.Metadata ? "lg" : "md"}
+      {...props}
+      aria-labelledby="delete-collection-header"
     >
-      <div className="flex flex-col gap-3 h-full w-full">
+      <div className="flex flex-col gap-global h-full w-full">
         {tool === ToolType.Metadata ? (
           <MetadataEditor
             dataset={dataset}
diff --git a/ui/src/app/datasets/components/CreateCollection.tsx b/ui/src/app/datasets/components/CreateCollection.tsx
index 5e55e9f7..1d57fbe8 100644
--- a/ui/src/app/datasets/components/CreateCollection.tsx
+++ b/ui/src/app/datasets/components/CreateCollection.tsx
@@ -68,6 +68,10 @@ export const CreateCollection = ({ bucket, datasetsInfo }: CreateCollectionProps
       return;
     }
 
+    if (mutation.isLoading || !localDatasetsInfo.length) {
+      return;
+    }
+
     setError(undefined);
     await mutation.mutateAsync(
       {
@@ -98,7 +102,7 @@ export const CreateCollection = ({ bucket, datasetsInfo }: CreateCollectionProps
         onSubmit={handleCreateCollection}
         className="w-full h-full"
       >
-        <div className="flex flex-col gap-3 w-full h-full overflow-y-auto justify-between">
+        <div className="flex flex-col gap-global w-full h-full overflow-y-auto justify-between">
           <table
             aria-label="Datasets"
             className="w-full border-separate border-spacing-y-0"
@@ -118,7 +122,7 @@ export const CreateCollection = ({ bucket, datasetsInfo }: CreateCollectionProps
                     colSpan={4}
                     className="border-none"
                   >
-                    <p aria-live="polite">No datasets selected</p>
+                    <p role="alert">No datasets selected</p>
                   </td>
                 </tr>
               ) : (
@@ -149,7 +153,7 @@ export const CreateCollection = ({ bucket, datasetsInfo }: CreateCollectionProps
                       )}
                     </td>
                     <td>
-                      <div className="flex flex-row gap-3">
+                      <div className="flex flex-row gap-global">
                         <button
                           className="btn btn-badge"
                           title={`Remove ${dataset.name}`}
@@ -176,15 +180,19 @@ export const CreateCollection = ({ bucket, datasetsInfo }: CreateCollectionProps
             </tbody>
           </table>
           <div className="sticky bottom-0 z-10">
-            {error ? (
-              <InlineBanner status="error">{error}</InlineBanner>
-            ) : showSuccess ? (
-              <InlineBanner status="success">
-                Collection created successfully.{" "}
-                <Link href={`/datasets/${bucket}/${collectionName}`}>View Collection</Link>
-              </InlineBanner>
-            ) : undefined}
-            <div className="grid grid-cols-[1fr_auto] gap-3 p-3 body-footer">
+            <InlineBanner status={error ? "error" : showSuccess ? "success" : "none"}>
+              {error ? (
+                error
+              ) : showSuccess ? (
+                <>
+                  Collection created successfully.{" "}
+                  <Link href={`/datasets/${bucket}/${collectionName}`}>View Collection</Link>
+                </>
+              ) : (
+                ""
+              )}
+            </InlineBanner>
+            <div className="grid grid-cols-[1fr_auto] gap-global p-global body-footer">
               <TextInput
                 id="collection-name"
                 aria-label="Collection name"
@@ -199,7 +207,7 @@ export const CreateCollection = ({ bucket, datasetsInfo }: CreateCollectionProps
               />
               <button
                 className="btn btn-primary"
-                disabled={!collectionName || mutation.isLoading || localDatasetsInfo.length === 0}
+                aria-disabled={!collectionName || localDatasetsInfo.length === 0}
                 type="submit"
               >
                 Create
@@ -211,8 +219,16 @@ export const CreateCollection = ({ bucket, datasetsInfo }: CreateCollectionProps
       <FullPageModal
         open={!!editingDataset}
         onClose={() => setEditingDataset(undefined)}
-        headerChildren={<h3 className="text-base font-bold p-0 m-0">{editingDataset?.name}</h3>}
+        headerChildren={
+          <h3
+            className="text-base font-bold p-0 m-0"
+            id="edit-dataset-header"
+          >
+            {editingDataset?.name}
+          </h3>
+        }
         size="none"
+        aria-labelledby="edit-dataset-header"
       >
         {editingDataset && (
           <DatasetPicker
diff --git a/ui/src/app/datasets/components/DatasetPicker.tsx b/ui/src/app/datasets/components/DatasetPicker.tsx
index 300d86af..ad56aa92 100644
--- a/ui/src/app/datasets/components/DatasetPicker.tsx
+++ b/ui/src/app/datasets/components/DatasetPicker.tsx
@@ -65,7 +65,7 @@ export const DatasetPicker = ({ bucket, name, value, onDone }: DatasetPickerProp
 
   if (isLoading) {
     return (
-      <div className="flex justify-center items-center h-full p-3 w-full">
+      <div className="flex justify-center items-center h-full p-global w-full">
         <Spinner size="small" />
       </div>
     );
@@ -74,9 +74,9 @@ export const DatasetPicker = ({ bucket, name, value, onDone }: DatasetPickerProp
   return (
     <form
       onSubmit={handleSubmit}
-      className="p-3 w-full"
+      className="p-global w-full"
     >
-      <div className="grid grid-cols-[1fr_auto] gap-3 w-full">
+      <div className="grid grid-cols-[1fr_auto] gap-global w-full">
         <Select
           id="tag"
           aria-label="Tag"
diff --git a/ui/src/app/datasets/components/Datasets.tsx b/ui/src/app/datasets/components/Datasets.tsx
index eac0b36f..a787b705 100644
--- a/ui/src/app/datasets/components/Datasets.tsx
+++ b/ui/src/app/datasets/components/Datasets.tsx
@@ -27,8 +27,10 @@ import {
   getBestDateRange,
   getDateFromValues,
 } from "~/components/DateRangePicker";
+import { FilterButton } from "~/components/FilterButton";
 import FullPageModal from "~/components/FullPageModal";
-import { FilledIcon } from "~/components/Icon";
+import { IconButton } from "~/components/IconButton";
+import PageHeader from "~/components/PageHeader";
 import { SlideOut } from "~/components/SlideOut";
 import { UserFilterType } from "~/components/UserFilter";
 import useSafeTimeout from "~/hooks/useSafeTimeout";
@@ -48,7 +50,6 @@ export interface SelectedDatasets {
 export default function Datasets() {
   const { username } = useAuth();
   const [showFilters, setShowFilters] = useState(false);
-  const headerRef = useRef<HTMLDivElement>(null);
   const [filterCount, setFilterCount] = useState(0);
   const [name, setName] = useState<string | undefined>(undefined);
   const [bucketFilter, setBucketFilter] = useState<string | undefined>(undefined);
@@ -229,43 +230,40 @@ export default function Datasets() {
 
   return (
     <>
-      <div
-        className="page-header mb-3"
-        ref={headerRef}
-      >
-        <h1>Datasets</h1>
-        <div className="flex flex-row gap-3">
-          {selectedRows.datasets.length > 0 && (
-            <button
-              className="btn btn-primary"
-              // Disable button if selected rows are from multiple buckets
-              disabled={!selectedRows.bucket}
-              onClick={() => {
-                setShowCreateCollectionModal(true);
-              }}
-              title={!selectedRows.bucket ? "Selected datasets must be from the same bucket" : undefined}
-            >
-              Create Collection
-            </button>
-          )}
-          <button
-            className={`btn ${showFilters ? "btn-primary" : ""}`}
-            onClick={() => {
-              setShowFilters(!showFilters);
-            }}
-          >
-            <FilledIcon name="filter_list" />
-            Filters {filterCount > 0 ? `(${filterCount})` : ""}
-          </button>
-        </div>
+      <PageHeader>
+        <IconButton
+          icon="add"
+          text="Create Collection"
+          className="btn btn-primary"
+          // Disable button if selected rows are from multiple buckets
+          aria-disabled={!selectedRows.datasets.length || !selectedRows.bucket}
+          onClick={() => {
+            if (selectedRows.datasets.length && selectedRows.bucket) {
+              setShowCreateCollectionModal(true);
+            }
+          }}
+          title={
+            !selectedRows.datasets.length
+              ? "Please select at least one dataset"
+              : !selectedRows.bucket
+                ? "Selected datasets must be from the same bucket"
+                : undefined
+          }
+        />
+        <FilterButton
+          showFilters={showFilters}
+          setShowFilters={setShowFilters}
+          filterCount={filterCount}
+          aria-controls="datasets-filters"
+        />
+      </PageHeader>
+      <div className="h-full w-full overflow-x-auto relative">
         <SlideOut
           id="workflows-filters"
           open={showFilters}
           onClose={() => setShowFilters(false)}
           className="w-100 border-t-0"
-          containerRef={headerRef}
-          top={headerRef.current?.getBoundingClientRect().top ?? 0}
-          dimBackground={false}
+          aria-label="Datasets Filter"
         >
           {/* By only adding it if showFilters is true, it will reset to url params if closed and reopened */}
           {showFilters && bucketFilter !== undefined && (
@@ -284,27 +282,26 @@ export default function Datasets() {
             />
           )}
         </SlideOut>
-      </div>
-      <div className="h-full w-full px-3">
         <DatasetsTable
           processResources={processResources}
           isLoading={isLoading}
           onRowSelectionChange={handleRowSelectionChange}
         />
+        <FullPageModal
+          open={showCreateCollectionModal}
+          onClose={() => setShowCreateCollectionModal(false)}
+          headerChildren={<h2 id="create-collection-header">Create Collection</h2>}
+          aria-labelledby="create-collection-header"
+          size="md"
+        >
+          {selectedRows.bucket && showCreateCollectionModal && (
+            <CreateCollection
+              bucket={selectedRows.bucket}
+              datasetsInfo={selectedRows.datasets}
+            />
+          )}
+        </FullPageModal>
       </div>
-      <FullPageModal
-        open={showCreateCollectionModal}
-        onClose={() => setShowCreateCollectionModal(false)}
-        headerChildren={<h2>Create Collection</h2>}
-        size="md"
-      >
-        {selectedRows.bucket && showCreateCollectionModal && (
-          <CreateCollection
-            bucket={selectedRows.bucket}
-            datasetsInfo={selectedRows.datasets}
-          />
-        )}
-      </FullPageModal>
     </>
   );
 }
diff --git a/ui/src/app/datasets/components/DatasetsFilter.tsx b/ui/src/app/datasets/components/DatasetsFilter.tsx
index 93a38d76..903ab643 100644
--- a/ui/src/app/datasets/components/DatasetsFilter.tsx
+++ b/ui/src/app/datasets/components/DatasetsFilter.tsx
@@ -142,6 +142,7 @@ export const DatasetsFilter = ({
     setLocalDateRange(defaultDateRange);
     setLocalUserType(UserFilterType.ALL);
     setLocalDatasetType(undefined);
+    setErrors([]);
 
     toolParamUpdater({
       name: null,
@@ -157,7 +158,7 @@ export const DatasetsFilter = ({
 
   return (
     <form onSubmit={handleSubmit}>
-      <div className="flex flex-col gap-3 p-3">
+      <div className="flex flex-col gap-global p-global">
         <UserFilter
           userType={localUserType}
           setUserType={setLocalUserType}
@@ -167,7 +168,7 @@ export const DatasetsFilter = ({
         />
         <fieldset className="flex flex-col gap-1 mb-2">
           <legend>Type</legend>
-          <div className="flex flex-row gap-7">
+          <div className="flex flex-row gap-radios">
             <label className="flex items-center gap-1">
               <input
                 type="radio"
@@ -225,19 +226,17 @@ export const DatasetsFilter = ({
           toDate={localCreatedBefore}
           setFromDate={setLocalCreatedAfter}
           setToDate={setLocalCreatedBefore}
-          className="flex flex-col gap-3 mt-2"
+          className="flex flex-col gap-global mt-2"
         />
-        {errors.length > 0 && (
-          <InlineBanner status="error">
-            <div className="flex flex-col gap-2">
-              {errors.map((error, index) => (
-                <div key={index}>{error}</div>
-              ))}
-            </div>
-          </InlineBanner>
-        )}
       </div>
-      <div className="flex flex-row gap-3 justify-between body-footer p-3 sticky bottom-0">
+      <InlineBanner status={errors.length > 0 ? "error" : "none"}>
+        <div className="flex flex-col">
+          {errors.map((error, index) => (
+            <div key={index}>{error}</div>
+          ))}
+        </div>
+      </InlineBanner>
+      <div className="flex flex-row gap-global justify-between body-footer p-global sticky bottom-0">
         <button
           type="button"
           className="btn"
diff --git a/ui/src/app/datasets/components/DatasetsTable.tsx b/ui/src/app/datasets/components/DatasetsTable.tsx
index 7d9097bb..1dfe1e2c 100644
--- a/ui/src/app/datasets/components/DatasetsTable.tsx
+++ b/ui/src/app/datasets/components/DatasetsTable.tsx
@@ -29,7 +29,6 @@ import Link from "next/link";
 import { Checkbox } from "~/components/Checkbox";
 import { commonFilterFns } from "~/components/commonFilterFns";
 import { TableBase } from "~/components/TableBase";
-import { TableLoader } from "~/components/TableLoader";
 import { TablePagination } from "~/components/TablePagination";
 import { DatasetTag } from "~/components/Tag";
 import { useTableSortLoader } from "~/hooks/useTableSortLoader";
@@ -183,6 +182,7 @@ const DatasetsTable: React.FC<{
     onColumnVisibilityChange: setColumnVisibility,
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getRowId: (row) => `${row.bucket}-${row.name}`,
     enableMultiSort: true,
     enableSortingRemoval: false,
     state: { sorting, columnVisibility },
@@ -210,25 +210,17 @@ const DatasetsTable: React.FC<{
   }, [table.getSelectedRowModel().rows]);
 
   return (
-    <div className="h-full w-full">
-      {isLoading ? (
-        <TableLoader table={table} />
-      ) : (
-        <div className="flex flex-col h-full w-full">
-          <TableBase
-            columns={columns}
-            table={table}
-            paddingOffset={10}
-            className="body-component"
-          >
-            <TablePagination
-              table={table}
-              totalRows={processResources.length}
-            />
-          </TableBase>
-        </div>
-      )}
-    </div>
+    <TableBase
+      columns={columns}
+      table={table}
+      className="body-component"
+      isLoading={isLoading}
+    >
+      <TablePagination
+        table={table}
+        totalRows={processResources.length}
+      />
+    </TableBase>
   );
 };
 
diff --git a/ui/src/app/datasets/components/FileBrowser.tsx b/ui/src/app/datasets/components/FileBrowser.tsx
index 3fcea9ee..9ce7a6f4 100644
--- a/ui/src/app/datasets/components/FileBrowser.tsx
+++ b/ui/src/app/datasets/components/FileBrowser.tsx
@@ -308,40 +308,40 @@ const FileBrowser: React.FC<DatasetFileBrowserProps> = ({ dataset, currentVersio
     disableDragAndDropProvider: true,
   });
 
+  if (!isSuccess) {
+    return null;
+  }
+
   return (
-    <div className="flex flex-col h-full overflow-y-auto">
-      {isSuccess && (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        <ChonkyFileBrowser
-          instanceId="file-browser"
-          files={files}
-          folderChain={folderChain}
-          onFileAction={handleFileBrowserAction}
-          disableSelection={true}
-          defaultFileViewActionId={ChonkyActions.EnableListView.id}
-          thumbnailGenerator={(file: FileData) => {
-            // Only render thumbnail for PNG, JPEG, GIF and MP4
-            if (file.name.match(/\.(mp4|png|jpe?g)$/)) {
-              return file.thumbnailUrl;
-            }
-          }}
-          disableDefaultFileActions={[
-            ChonkyActions.MouseClickFile.id,
-            ChonkyActions.OpenSelection.id,
-            ChonkyActions.SelectAllFiles.id,
-            ChonkyActions.ClearSelection.id,
-            ChonkyActions.SortFilesByDate.id,
-            ChonkyActions.ToggleHiddenFiles.id,
-            ChonkyActions.ChangeSelection.id,
-          ]}
-        >
-          <FileNavbar />
-          <FileToolbar />
-          <FileList />
-        </ChonkyFileBrowser>
-      )}
-    </div>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <ChonkyFileBrowser
+      instanceId="file-browser"
+      files={files}
+      folderChain={folderChain}
+      onFileAction={handleFileBrowserAction}
+      disableSelection={true}
+      defaultFileViewActionId={ChonkyActions.EnableListView.id}
+      thumbnailGenerator={(file: FileData) => {
+        // Only render thumbnail for PNG, JPEG, GIF and MP4
+        if (file.name.match(/\.(mp4|png|jpe?g)$/)) {
+          return file.thumbnailUrl;
+        }
+      }}
+      disableDefaultFileActions={[
+        ChonkyActions.MouseClickFile.id,
+        ChonkyActions.OpenSelection.id,
+        ChonkyActions.SelectAllFiles.id,
+        ChonkyActions.ClearSelection.id,
+        ChonkyActions.SortFilesByDate.id,
+        ChonkyActions.ToggleHiddenFiles.id,
+        ChonkyActions.ChangeSelection.id,
+      ]}
+    >
+      <FileNavbar />
+      <FileToolbar />
+      <FileList />
+    </ChonkyFileBrowser>
   );
 };
 
diff --git a/ui/src/app/datasets/layout.tsx b/ui/src/app/datasets/layout.tsx
index dfe432f0..887933e5 100644
--- a/ui/src/app/datasets/layout.tsx
+++ b/ui/src/app/datasets/layout.tsx
@@ -15,7 +15,6 @@
 //SPDX-License-Identifier: Apache-2.0
 import { type PropsWithChildren } from "react";
 
-import { Layout } from "~/components/Layout";
 import { env } from "~/env.mjs";
 
 export const metadata = {
@@ -23,5 +22,5 @@ export const metadata = {
 };
 
 export default function Datasets({ children }: PropsWithChildren) {
-  return <Layout>{children}</Layout>;
+  return children;
 }
diff --git a/ui/src/app/layout.tsx b/ui/src/app/layout.tsx
index e7c8e5ea..5264dc7f 100644
--- a/ui/src/app/layout.tsx
+++ b/ui/src/app/layout.tsx
@@ -19,6 +19,7 @@ import { headers } from "next/headers";
 import Script from "next/script";
 
 import { AuthProvider } from "~/components/AuthProvider";
+import { Layout } from "~/components/Layout";
 import { StoreProvider } from "~/components/StoreProvider";
 import { env } from "~/env.mjs";
 import { RuntimeEnvProvider } from "~/runtime-env";
@@ -38,13 +39,17 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       suppressHydrationWarning
     >
       <body>
-        <RuntimeEnvProvider value={{
-          DOCS_BASE_URL: env.DOCS_BASE_URL,
-          CLI_INSTALL_SCRIPT_URL: env.CLI_INSTALL_SCRIPT_URL,
-        }}>
+        <RuntimeEnvProvider
+          value={{
+            DOCS_BASE_URL: env.DOCS_BASE_URL,
+            CLI_INSTALL_SCRIPT_URL: env.CLI_INSTALL_SCRIPT_URL,
+          }}
+        >
           <TRPCReactProvider headers={headers()}>
             <AuthProvider>
-              <StoreProvider>{children}</StoreProvider>
+              <StoreProvider>
+                <Layout>{children}</Layout>
+              </StoreProvider>
             </AuthProvider>
           </TRPCReactProvider>
         </RuntimeEnvProvider>
diff --git a/ui/src/app/pools/components/PoolDetails.tsx b/ui/src/app/pools/components/PoolDetails.tsx
index 0a33592e..003f8eb8 100644
--- a/ui/src/app/pools/components/PoolDetails.tsx
+++ b/ui/src/app/pools/components/PoolDetails.tsx
@@ -81,21 +81,27 @@ export const PoolDetails = ({
   }
 
   return (
-    <div className="card w-full h-full body-component">
-      <div className="brand-header px-3 flex flex-row justify-between items-center gap-3">
-        <h3>{name}</h3>
+    <section
+      aria-labelledby="pool-details-title"
+      className="card w-full body-component xs:overflow-y-auto"
+    >
+      <h2
+        id="pool-details-title"
+        className="brand-header px-global flex flex-row justify-between items-center"
+      >
+        {name}
         <Tag
           className="inline-block"
           color={Colors.pool}
         >
           Pool
         </Tag>
-      </div>
+      </h2>
       {pool ? (
-        <>
+        <div className="max-h-full w-full">
           {pool.resource_usage && (
             <div
-              className="body-header p-3 flex flex-row gap-3 min-h-40"
+              className="flex flex-row overflow-x-hidden"
               role="list"
             >
               <AggregatePanels
@@ -105,15 +111,18 @@ export const PoolDetails = ({
               />
             </div>
           )}
-          <div className="flex flex-col gap-3 p-3">
+          <div className="flex flex-col lg:p-global gap-global">
             <div className="card p-0">
               <h3
-                className="body-header text-base p-3"
+                className="body-header text-base p-global"
                 id="platforms"
               >
                 Configurations
               </h3>
-              <dl className="p-3">
+              <dl
+                className="p-global"
+                aria-labelledby="platforms"
+              >
                 <dt>Description</dt>
                 <dd>{pool.description}</dd>
                 <dt>Status</dt>
@@ -147,7 +156,7 @@ export const PoolDetails = ({
             {Object.entries(pool.platforms).length > 1 && (
               <div className="card p-0">
                 <h3
-                  className="body-header text-base p-3"
+                  className="body-header text-base p-global"
                   id="platforms"
                 >
                   Platforms
@@ -166,14 +175,14 @@ export const PoolDetails = ({
             )}
             <div className="card p-0">
               <h3
-                className="body-header text-base p-3"
+                className="body-header text-base p-global"
                 id="action-permissions"
               >
                 Action Permissions
               </h3>
               <dl
                 aria-labelledby="action-permissions"
-                className="p-3"
+                className="p-global"
               >
                 {Object.entries(pool.action_permissions).map(([action, description]) => (
                   <React.Fragment key={action}>
@@ -186,14 +195,14 @@ export const PoolDetails = ({
             {Object.entries(pool.default_exit_actions).length > 0 && (
               <div className="card p-0">
                 <h3
-                  className="body-header text-base p-3"
+                  className="body-header text-base p-global"
                   id="default-exit-actions"
                 >
                   Default Exit Actions
                 </h3>
                 <dl
                   aria-labelledby="default-exit-actions"
-                  className="p-3"
+                  className="p-global"
                 >
                   {Object.entries(pool.default_exit_actions).map(([action, description]) => (
                     <React.Fragment key={action}>
@@ -205,12 +214,12 @@ export const PoolDetails = ({
               </div>
             )}
           </div>
-        </>
+        </div>
       ) : (
         <div className="h-full w-full flex justify-center items-center">
           <Spinner />
         </div>
       )}
-    </div>
+    </section>
   );
 };
diff --git a/ui/src/app/pools/components/PoolPlatform.tsx b/ui/src/app/pools/components/PoolPlatform.tsx
index c6b7a048..175c760b 100644
--- a/ui/src/app/pools/components/PoolPlatform.tsx
+++ b/ui/src/app/pools/components/PoolPlatform.tsx
@@ -15,13 +15,14 @@
 //SPDX-License-Identifier: Apache-2.0
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { PoolDetails } from "~/app/pools/components/PoolDetails";
 import useToolParamUpdater from "~/app/pools/hooks/useToolParamUpdater";
 import { PlatformDetails } from "~/app/resources/components/PlatformDetails";
-import { OutlinedIcon } from "~/components/Icon";
+import { IconButton } from "~/components/IconButton";
 import { PageError } from "~/components/PageError";
+import PageHeader from "~/components/PageHeader";
 import { SlideOut } from "~/components/SlideOut";
 import { Spinner } from "~/components/Spinner";
 import { UrlTypes } from "~/components/StoreProvider";
@@ -32,7 +33,6 @@ import { UsedFreeToggle } from "./UsedFreeToggle";
 import { processPoolsQuotaResponse } from "../models/PoolListitem";
 
 export default function PoolPlatform({ pool, platform }: { pool: string; platform?: string }) {
-  const headerRef = useRef<HTMLDivElement>(null);
   const { updateUrl, isShowingUsed } = useToolParamUpdater(UrlTypes.Pools);
   const [poolPlatform, setPoolPlatform] = useState<string | undefined>(platform);
   const [showActions, setShowActions] = useState(false);
@@ -89,38 +89,31 @@ export default function PoolPlatform({ pool, platform }: { pool: string; platfor
 
   return (
     <>
-      <div
-        className="page-header"
-        ref={headerRef}
-      >
-        <h1>{pool}</h1>
-        <div className="flex items-center gap-3">
-          <UsedFreeToggle
-            isShowingUsed={isShowingUsed}
-            updateUrl={updateUrl}
-          />
-          <button
-            className="btn"
-            onClick={() => setShowActions(true)}
-          >
-            <OutlinedIcon name="more_vert" />
-            Actions
-          </button>
-        </div>
+      <PageHeader>
+        <UsedFreeToggle
+          isShowingUsed={isShowingUsed}
+          updateUrl={updateUrl}
+        />
+        <IconButton
+          icon="more_vert"
+          text="Actions"
+          className="btn"
+          onClick={() => setShowActions(true)}
+          aria-controls="pool-actions"
+          aria-expanded={showActions}
+          aria-haspopup="true"
+        />
+      </PageHeader>
+      <div className="flex flex-col gap-global xs:gap-0 xs:grid xs:grid-cols-[1fr_2fr] xs:h-full w-full relative xs:overflow-x-auto">
         <SlideOut
-          id="workflows-filters"
+          id="pool-actions"
           open={showActions}
           onClose={() => setShowActions(false)}
-          containerRef={headerRef}
-          top={headerRef.current?.offsetHeight ?? 0}
-          dimBackground={false}
           className="border-t-0"
-          bodyClassName="p-3"
+          bodyClassName="p-global"
         >
           <PoolActions name={pool} />
         </SlideOut>
-      </div>
-      <div className="flex flex-col xs:grid xs:grid-cols-[1fr_2fr] gap-3 p-3 w-full grow">
         <PoolDetails
           name={pool}
           pool={pools[0]}
diff --git a/ui/src/app/pools/components/PoolsFilter.tsx b/ui/src/app/pools/components/PoolsFilter.tsx
index 7c3c44e8..ffd9ccf0 100644
--- a/ui/src/app/pools/components/PoolsFilter.tsx
+++ b/ui/src/app/pools/components/PoolsFilter.tsx
@@ -83,7 +83,7 @@ export const PoolsFilter = ({
 
   return (
     <form onSubmit={handleSubmit}>
-      <div className="flex flex-col gap-3 p-3">
+      <div className="flex flex-col gap-global p-global">
         <MultiselectWithAll
           id="pools"
           label="All Pools"
@@ -99,7 +99,7 @@ export const PoolsFilter = ({
         />
         {isLoadingPools && !localAllPools && <Spinner size="small" />}
       </div>
-      <div className="flex flex-row gap-3 justify-between body-footer p-3">
+      <div className="flex flex-row gap-global justify-between body-footer p-global">
         <button
           type="button"
           className="btn"
diff --git a/ui/src/app/pools/components/PoolsTable.tsx b/ui/src/app/pools/components/PoolsTable.tsx
index 6fd4c56d..66114dbd 100755
--- a/ui/src/app/pools/components/PoolsTable.tsx
+++ b/ui/src/app/pools/components/PoolsTable.tsx
@@ -28,7 +28,6 @@ import Link from "next/link";
 
 import { commonFilterFns } from "~/components/commonFilterFns";
 import { TableBase } from "~/components/TableBase";
-import { TableLoader } from "~/components/TableLoader";
 import { TablePagination } from "~/components/TablePagination";
 import { Colors, Tag } from "~/components/Tag";
 import { useTableSortLoader } from "~/hooks/useTableSortLoader";
@@ -182,6 +181,7 @@ export const PoolsTable = ({
     // @ts-ignore
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getRowId: (row) => row.name,
     enableMultiSort: true,
     enableSortingRemoval: false,
     state: { sorting },
@@ -194,22 +194,16 @@ export const PoolsTable = ({
   });
 
   return (
-    <div className="h-full w-full flex-grow">
-      {isLoading ? (
-        <TableLoader table={table} />
-      ) : (
-        <TableBase
-          columns={columns}
-          table={table}
-          paddingOffset={10}
-          className="body-component"
-        >
-          <TablePagination
-            totalRows={pools.length}
-            table={table}
-          />
-        </TableBase>
-      )}
-    </div>
+    <TableBase
+      columns={columns}
+      table={table}
+      className="body-component"
+      isLoading={isLoading}
+    >
+      <TablePagination
+        totalRows={pools.length}
+        table={table}
+      />
+    </TableBase>
   );
 };
diff --git a/ui/src/app/pools/components/UsedFreeToggle.tsx b/ui/src/app/pools/components/UsedFreeToggle.tsx
index dbe4de54..24b8d397 100644
--- a/ui/src/app/pools/components/UsedFreeToggle.tsx
+++ b/ui/src/app/pools/components/UsedFreeToggle.tsx
@@ -1,3 +1,18 @@
+//SPDX-FileCopyrightText: Copyright (c) 2025 NVIDIA CORPORATION. All rights reserved.
+//
+//Licensed under the Apache License, Version 2.0 (the "License");
+//you may not use this file except in compliance with the License.
+//You may obtain a copy of the License at
+//
+//http://www.apache.org/licenses/LICENSE-2.0
+//
+//Unless required by applicable law or agreed to in writing, software
+//distributed under the License is distributed on an "AS IS" BASIS,
+//WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//See the License for the specific language governing permissions and
+//limitations under the License.
+//
+//SPDX-License-Identifier: Apache-2.0
 import { SHOW_USED_KEY } from "~/components/StoreProvider";
 import { ViewToggleButton } from "~/components/ViewToggleButton";
 
@@ -10,7 +25,7 @@ export const UsedFreeToggle = ({
 }) => {
   return (
     <fieldset
-      className="flex flex-row gap-3"
+      className="toggle-group"
       aria-label="View Type"
     >
       <ViewToggleButton
diff --git a/ui/src/app/pools/layout.tsx b/ui/src/app/pools/layout.tsx
index 5530c315..cacaa60f 100644
--- a/ui/src/app/pools/layout.tsx
+++ b/ui/src/app/pools/layout.tsx
@@ -15,7 +15,6 @@
 //SPDX-License-Identifier: Apache-2.0
 import { type PropsWithChildren } from "react";
 
-import { Layout } from "~/components/Layout";
 import { env } from "~/env.mjs";
 
 export const metadata = {
@@ -23,5 +22,5 @@ export const metadata = {
 };
 
 export default function ResourcesLayout({ children }: PropsWithChildren) {
-  return <Layout>{children}</Layout>;
+  return children;
 }
diff --git a/ui/src/app/pools/page.tsx b/ui/src/app/pools/page.tsx
index 1abd1b89..2fa35243 100644
--- a/ui/src/app/pools/page.tsx
+++ b/ui/src/app/pools/page.tsx
@@ -17,7 +17,8 @@
 
 import { useCallback, useMemo, useRef, useState } from "react";
 
-import { FilledIcon } from "~/components/Icon";
+import { FilterButton } from "~/components/FilterButton";
+import PageHeader from "~/components/PageHeader";
 import { SlideOut } from "~/components/SlideOut";
 import { UrlTypes } from "~/components/StoreProvider";
 import useSafeTimeout from "~/hooks/useSafeTimeout";
@@ -36,9 +37,7 @@ export default function Pools() {
     UrlTypes.Pools,
   );
   const [showFilters, setShowFilters] = useState(false);
-  const headerRef = useRef<HTMLDivElement>(null);
   const lastFetchTimeRef = useRef<number>(Date.now());
-  const containerRef = useRef<HTMLDivElement>(null);
   const { setSafeTimeout } = useSafeTimeout();
 
   const {
@@ -76,37 +75,27 @@ export default function Pools() {
 
   return (
     <>
-      <div
-        className="page-header mb-3"
-        ref={headerRef}
-      >
-        <h1>Pools</h1>
-        <div className="flex items-center gap-3">
-          <UsedFreeToggle
-            isShowingUsed={isShowingUsed}
-            updateUrl={updateUrl}
-          />
-          <button
-            className={`btn ${showFilters ? "btn-primary" : ""}`}
-            onClick={() => {
-              setShowFilters(true);
-            }}
-          >
-            <FilledIcon name="filter_list" />
-            Filters {filterCount > 0 ? `(${filterCount})` : ""}
-          </button>
-        </div>
+      <PageHeader>
+        <UsedFreeToggle
+          isShowingUsed={isShowingUsed}
+          updateUrl={updateUrl}
+        />
+        <FilterButton
+          showFilters={showFilters}
+          setShowFilters={setShowFilters}
+          filterCount={filterCount}
+          aria-controls="pools-filters"
+        />
+      </PageHeader>
+      <div className="h-full w-full grid grid-cols-[auto_1fr] overflow-x-auto relative">
         <SlideOut
-          top={headerRef.current?.offsetHeight ?? 0}
-          containerRef={headerRef}
-          id="resources-filter"
+          id="pools-filter"
           open={showFilters}
           onClose={() => {
             setShowFilters(false);
           }}
           aria-label="Pools Filter"
-          dimBackground={false}
-          className="z-40 border-t-0 w-100"
+          className="border-t-0 w-80"
         >
           <PoolsFilter
             selectedPools={selectedPools}
@@ -115,27 +104,12 @@ export default function Pools() {
             onRefresh={forceRefetch}
           />
         </SlideOut>
-      </div>
-      <div
-        className="h-full w-full px-3 gap-3 grid grid-cols-[auto_1fr]"
-        ref={containerRef}
-      >
-        <div
-          className="h-full w-40 2xl:w-50 3xl:w-80 4xl:w-100 flex flex-col relative overflow-y-auto overflow-x-hidden body-component"
-          style={{
-            maxHeight: `calc(100vh - ${10 + (containerRef?.current?.getBoundingClientRect()?.top ?? 0)}px)`,
-          }}
-        >
-          <div className={`popup-header sticky top-0 z-10 brand-header`}>
-            <h2>Gauges</h2>
-          </div>
-          <div className="flex flex-col gap-3 p-3 h-full justify-between">
-            <AggregatePanels
-              totals={processPools.totalResources}
-              isLoading={isFetching}
-              isShowingUsed={isShowingUsed}
-            />
-          </div>
+        <div className="h-full w-40 2xl:w-50 3xl:w-80 4xl:w-100 flex flex-col relative overflow-y-auto overflow-x-hidden">
+          <AggregatePanels
+            totals={processPools.totalResources}
+            isLoading={isFetching}
+            isShowingUsed={isShowingUsed}
+          />
         </div>
         <PoolsTable
           isLoading={isFetching}
diff --git a/ui/src/app/profile/components/CredentialForm.tsx b/ui/src/app/profile/components/CredentialForm.tsx
index ca5cf9f8..6dae8ddd 100644
--- a/ui/src/app/profile/components/CredentialForm.tsx
+++ b/ui/src/app/profile/components/CredentialForm.tsx
@@ -318,7 +318,7 @@ const CredentialForm = ({
               <textarea
                 id="credential"
                 required={true}
-                className="font-mono w-full h-40 border-1 border-border p-3"
+                className="font-mono w-full h-40 border-1 border-border p-global"
                 name="credential"
                 value={credential}
                 onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -337,8 +337,8 @@ const CredentialForm = ({
   };
   return (
     <form onSubmit={handleCreateCredential}>
-      <div className="flex flex-col w-120">
-        <div className="flex flex-row gap-3 p-3 w-full">
+      <div className="flex flex-col md:w-120">
+        <div className="flex flex-row gap-global p-global w-full">
           <Select
             id="credential_type"
             label="Credential Type"
@@ -369,7 +369,7 @@ const CredentialForm = ({
             }}
           />
         </div>
-        <div className="p-3 flex flex-col gap-3 w-full">{renderFormFields()}</div>
+        <div className="p-global flex flex-col gap-global w-full">{renderFormFields()}</div>
         <InlineBanner
           status={error ? "error" : showSuccess ? "success" : "none"}
           className="w-full"
@@ -382,7 +382,7 @@ const CredentialForm = ({
             ""
           )}
         </InlineBanner>
-        <div className="modal-footer p-3">
+        <div className="modal-footer p-global">
           {!showSuccess && (
             <button
               className="btn btn-secondary"
diff --git a/ui/src/app/profile/components/CredentialsTable.tsx b/ui/src/app/profile/components/CredentialsTable.tsx
index ce9363de..876ba460 100644
--- a/ui/src/app/profile/components/CredentialsTable.tsx
+++ b/ui/src/app/profile/components/CredentialsTable.tsx
@@ -129,6 +129,7 @@ const CredentialsTable = ({ credentials, nameFilter }: { credentials: Credential
     onColumnFiltersChange: setColumnFilters,
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getRowId: (row) => row.cred_name,
     enableMultiSort: true,
     enableSortingRemoval: false,
     state: { columnFilters, sorting },
@@ -151,7 +152,6 @@ const CredentialsTable = ({ credentials, nameFilter }: { credentials: Credential
     <TableBase
       columns={columns}
       table={table}
-      paddingOffset={10}
     >
       <TablePagination
         table={table}
diff --git a/ui/src/app/profile/components/DeleteCredential.tsx b/ui/src/app/profile/components/DeleteCredential.tsx
index d2dfd366..3ca6d148 100644
--- a/ui/src/app/profile/components/DeleteCredential.tsx
+++ b/ui/src/app/profile/components/DeleteCredential.tsx
@@ -54,7 +54,7 @@ export const DeleteCredential = ({ credential, onUpdate }: { credential: string;
 
   return (
     <div className="flex flex-col">
-      <div className="flex flex-col gap-3 p-3">
+      <div className="flex flex-col gap-global p-global">
         <p>
           Are you sure you want to delete the credential <strong>{credential}</strong>?
         </p>
diff --git a/ui/src/app/profile/components/ProfileEditor.tsx b/ui/src/app/profile/components/ProfileEditor.tsx
index b521eb78..bcd5a71a 100644
--- a/ui/src/app/profile/components/ProfileEditor.tsx
+++ b/ui/src/app/profile/components/ProfileEditor.tsx
@@ -86,8 +86,8 @@ const ProfileEditor = ({ profile, onUpdate }: { profile: ProfileResponse; onUpda
 
   return (
     <form onSubmit={handleSubmit}>
-      <div className="flex flex-col w-100">
-        <div className="flex flex-col gap-3 p-3 w-full">
+      <div className="flex flex-col md:w-100">
+        <div className="flex flex-col gap-global p-global w-full">
           <Select
             id="bucket"
             value={bucket ?? ""}
diff --git a/ui/src/app/profile/components/ProfileSettings.tsx b/ui/src/app/profile/components/ProfileSettings.tsx
index 334df448..fc29a7b5 100644
--- a/ui/src/app/profile/components/ProfileSettings.tsx
+++ b/ui/src/app/profile/components/ProfileSettings.tsx
@@ -28,7 +28,7 @@ const ProfileSettings = ({ profile }: ProfileSettingsProps) => {
   const auth = useAuth();
 
   return (
-    <dl>
+    <dl className="grid-cols-2">
       <dt>Name</dt>
       <dd>{auth.claims?.name}</dd>
       <dt>Email</dt>
@@ -36,6 +36,7 @@ const ProfileSettings = ({ profile }: ProfileSettingsProps) => {
       <dt>Email Notifications</dt>
       <dd>
         <Switch
+          id="email-notification"
           checked={profile.profile.email_notification}
           disabled
           size="small"
@@ -48,6 +49,7 @@ const ProfileSettings = ({ profile }: ProfileSettingsProps) => {
       <dt>Slack Notifications</dt>
       <dd>
         <Switch
+          id="slack-notification"
           checked={profile.profile.slack_notification}
           disabled
           size="small"
diff --git a/ui/src/app/profile/layout.tsx b/ui/src/app/profile/layout.tsx
index 9f44a4d6..7a11eff1 100644
--- a/ui/src/app/profile/layout.tsx
+++ b/ui/src/app/profile/layout.tsx
@@ -15,7 +15,6 @@
 //SPDX-License-Identifier: Apache-2.0
 import { type PropsWithChildren } from "react";
 
-import { Layout } from "~/components/Layout";
 import { env } from "~/env.mjs";
 
 export const metadata = {
@@ -23,5 +22,5 @@ export const metadata = {
 };
 
 export default function ProfileLayout({ children }: PropsWithChildren) {
-  return <Layout>{children}</Layout>;
+  return children;
 }
diff --git a/ui/src/app/profile/page.tsx b/ui/src/app/profile/page.tsx
index d330f7c2..6bfcc164 100644
--- a/ui/src/app/profile/page.tsx
+++ b/ui/src/app/profile/page.tsx
@@ -22,6 +22,7 @@ import { useSearchParams } from "next/navigation";
 import FullPageModal from "~/components/FullPageModal";
 import { OutlinedIcon } from "~/components/Icon";
 import { PageError } from "~/components/PageError";
+import PageHeader from "~/components/PageHeader";
 import { Spinner } from "~/components/Spinner";
 import { TextInput } from "~/components/TextInput";
 import { type CredentialListItem, type ProfileResponse } from "~/models";
@@ -107,10 +108,14 @@ export default function ProfileSettingsPage() {
 
   return (
     <>
-      <div className={`grid h-full w-full gap-3 p-3 grid-cols-[1fr_3fr]`}>
-        <div className="flex flex-col body-component">
-          <div className={`popup-header brand-header`}>
-            <h2>Profile</h2>
+      <PageHeader />
+      <div className={`flex md:flex-row flex-wrap w-full md:h-full gap-global p-global`}>
+        <div className="flex flex-col body-component md:h-full w-full md:w-auto">
+          <section
+            className={`popup-header brand-header`}
+            aria-labelledby="profile-details-title"
+          >
+            <h2 id="profile-details-title">Profile</h2>
             <button
               className="btn btn-secondary"
               aria-label="Edit Profile"
@@ -121,18 +126,19 @@ export default function ProfileSettingsPage() {
               <OutlinedIcon name="edit" />
               Edit
             </button>
-          </div>
-          <div className="dag-details-body p-3">
+          </section>
+          <div className="dag-details-body p-global sm:h-full sm:overflow-y-auto">
             <ProfileSettings profile={profile.data} />
           </div>
         </div>
-        <div className="flex flex-col body-component">
-          <div
-            className={`popup-header brand-header`}
+        <div className="flex flex-col body-component md:h-full grow">
+          <section
+            className={`popup-header brand-header items-center`}
+            aria-labelledby="credentials-title"
             ref={headerRef}
           >
-            <h2>Credentials</h2>
-            <div className="flex flex-row gap-3">
+            <h2 id="credentials-title">Credentials</h2>
+            <div className="flex flex-row gap-global">
               <TextInput
                 id="credential-name"
                 type="search"
@@ -150,12 +156,13 @@ export default function ProfileSettingsPage() {
                 onClick={() => {
                   toolParamUpdater({ tool: ToolType.CreateCredential });
                 }}
+                title="Add New Credential"
               >
                 <OutlinedIcon name="add" />
-                Add New Credential
+                <span className="hidden md:block">Add New Credential</span>
               </button>
             </div>
-          </div>
+          </section>
           <CredentialsTable
             credentials={processCredentials}
             nameFilter={credNameFilter}
@@ -163,7 +170,8 @@ export default function ProfileSettingsPage() {
         </div>
       </div>
       <FullPageModal
-        headerChildren={<h2>{toolHeading}</h2>}
+        headerChildren={<h2 id="profile-settings-header">{toolHeading}</h2>}
+        aria-labelledby="profile-settings-header"
         size="none"
         open={!!tool}
         onClose={() => {
diff --git a/ui/src/app/resources/[name]/page.tsx b/ui/src/app/resources/[name]/page.tsx
index 6aa20822..b50420d3 100644
--- a/ui/src/app/resources/[name]/page.tsx
+++ b/ui/src/app/resources/[name]/page.tsx
@@ -18,7 +18,8 @@ import { useEffect } from "react";
 
 import Link from "next/link";
 
-import { GenericHeader } from "~/components/Header";
+import { FilledIcon } from "~/components/Icon";
+import PageHeader from "~/components/PageHeader";
 import { getTaskHistoryUrl } from "~/components/TaskHistoryBanner";
 import { env } from "~/env.mjs";
 
@@ -37,20 +38,22 @@ export default function ResourceOverviewPage({ params }: ResourcesSlugParams) {
 
   return (
     <>
-      <GenericHeader
-        rootSegment="resources"
-        tailSegment={[params.name]}
-      >
+      <PageHeader>
+        <h2 className="grow">{params.name}</h2>
         <Link
           href={getTaskHistoryUrl(params.name)}
           className="btn btn-secondary"
         >
-          Task History
+          <FilledIcon name="history" />
+          <span
+            className="hidden lg:block"
+            aria-label="List"
+          >
+            Task History
+          </span>
         </Link>
-      </GenericHeader>
-      <div>
-        <ResourceDetails node={params.name} />
-      </div>
+      </PageHeader>
+      <ResourceDetails node={params.name} />
     </>
   );
 }
diff --git a/ui/src/app/resources/components/AggregatePanels.tsx b/ui/src/app/resources/components/AggregatePanels.tsx
index 73f422f2..20b352f5 100644
--- a/ui/src/app/resources/components/AggregatePanels.tsx
+++ b/ui/src/app/resources/components/AggregatePanels.tsx
@@ -78,8 +78,9 @@ export const AggregatePanels: React.FC<AggregateProps & { isLoading: boolean; is
 
   return (
     <div
-      className="flex flex-col gap-3 p-3 h-full justify-between"
+      className="flex flex-col h-full justify-between"
       role="list"
+      aria-label="Resource usage gauges"
     >
       {gauges}
     </div>
diff --git a/ui/src/app/resources/components/PlatformDetails.tsx b/ui/src/app/resources/components/PlatformDetails.tsx
index 750ecf60..e4714d92 100644
--- a/ui/src/app/resources/components/PlatformDetails.tsx
+++ b/ui/src/app/resources/components/PlatformDetails.tsx
@@ -39,16 +39,22 @@ export const PlatformDetails = ({
   children,
 }: PlatformDetailsProps) => {
   return (
-    <div className="card w-full h-full flex flex-col body-component">
-      <div className="brand-header px-3 flex flex-row justify-between items-center gap-3">
-        <h3>{name}</h3>
+    <section
+      aria-labelledby="platform-details-title"
+      className="card w-full flex flex-col body-component xs:overflow-y-auto"
+    >
+      <h2
+        id="platform-details-title"
+        className="brand-header px-global flex flex-row justify-between items-center gap-global"
+      >
+        {name}
         <Tag
           className="inline-block"
           color={Colors.platform}
         >
           Platform
         </Tag>
-      </div>
+      </h2>
       {showLoadError ? (
         <PageError
           title="Failed to Fetch Platform"
@@ -57,7 +63,7 @@ export const PlatformDetails = ({
       ) : (
         <div className="flex flex-col h-full">
           {children}
-          <div className="body-header flex flex-row gap-3 p-3 justify-around mt-[-1px]">
+          <div className="flex flex-row gap-global p-global justify-around">
             <p>
               <strong>Host Network Allowed:</strong> {hostNetwork ? "True" : "False"}
             </p>
@@ -65,10 +71,10 @@ export const PlatformDetails = ({
               <strong>Privileged Mode Allowed:</strong> {privileged ? "True" : "False"}
             </p>
           </div>
-          <div className={`gap-3 grid sm:grid-cols-2 sm:h-full p-3 ${className}`}>
+          <div className={`grid sm:grid-cols-2 gap-global px-global pb-global sm:h-full ${className}`}>
             <div className="card p-0 h-full">
               <h3
-                className="body-header text-base px-3"
+                className="body-header text-base text-center px-global"
                 id="default-mounts"
               >
                 Default Mounts
@@ -76,19 +82,17 @@ export const PlatformDetails = ({
               {defaultMounts?.length ? (
                 <ul
                   aria-labelledby="default-mounts"
-                  className="p-3"
+                  className="p-global"
                 >
-                  {defaultMounts?.map((mount) => (
-                    <li key={mount}>{mount}</li>
-                  ))}
+                  {defaultMounts?.map((mount) => <li key={mount}>{mount}</li>)}
                 </ul>
               ) : (
-                <p className="p-3">None</p>
+                <p className="p-global">None</p>
               )}
             </div>
             <div className="card p-0 h-full">
               <h3
-                className="body-header text-base px-3"
+                className="body-header text-base text-center px-global"
                 id="allowed-mounts"
               >
                 Allowed Mounts
@@ -96,19 +100,17 @@ export const PlatformDetails = ({
               {allowedMounts?.length ? (
                 <ul
                   aria-labelledby="allowed-mounts"
-                  className="p-3"
+                  className="p-global"
                 >
-                  {allowedMounts?.map((mount) => (
-                    <li key={mount}>{mount}</li>
-                  ))}
+                  {allowedMounts?.map((mount) => <li key={mount}>{mount}</li>)}
                 </ul>
               ) : (
-                <p className="p-3">None</p>
+                <p className="p-global">None</p>
               )}
             </div>
           </div>
         </div>
       )}
-    </div>
+    </section>
   );
 };
diff --git a/ui/src/app/resources/components/ResourceDetails.tsx b/ui/src/app/resources/components/ResourceDetails.tsx
index 35889fe5..6fcb7539 100644
--- a/ui/src/app/resources/components/ResourceDetails.tsx
+++ b/ui/src/app/resources/components/ResourceDetails.tsx
@@ -203,20 +203,20 @@ export const ResourceDetails = ({
         allowedMounts={platformConfig.allowed_mounts}
       >
         {fields && (
-          <div className="grid gap-3 grid-cols-2 md:grid-cols-4 body-header p-3">
-            <div className="body-component flex flex-col text-center items-center justify-center px-1 py-3">
+          <div className="grid gap-global grid-cols-2 md:grid-cols-4 body-header p-global">
+            <div className="body-component flex flex-col text-center items-center justify-center px-1 py-global">
               <strong>{Math.floor(convertResourceValueStr(fields.storage?.toString() ?? "0"))}</strong>
               <p>Storage [Gi]</p>
             </div>
-            <div className="body-component flex flex-col text-center items-center justify-center px-1 py-3">
+            <div className="body-component flex flex-col text-center items-center justify-center px-1 py-global">
               <strong>{Math.floor(convertResourceValueStr(fields.memory?.toString() ?? "0"))}</strong>
               <p>Memory [Gi]</p>
             </div>
-            <div className="body-component flex flex-col text-center items-center justify-center px-1 py-3">
+            <div className="body-component flex flex-col text-center items-center justify-center px-1 py-global">
               <strong>{parseFloat(fields.cpu?.toString() ?? "0")}</strong>
               <p>CPU [#]</p>
             </div>
-            <div className="body-component flex flex-col text-center items-center justify-center px-1 py-3">
+            <div className="body-component flex flex-col text-center items-center justify-center px-1 py-global">
               <strong>{parseFloat(fields.gpu?.toString() ?? "0")}</strong>
               <p>GPU [#]</p>
             </div>
@@ -250,9 +250,9 @@ export const ResourceDetails = ({
   return (
     <>
       {children}
-      <div className={`flex flex-col w-full h-full p-3`}>
+      <div className={`flex flex-col w-full h-full`}>
         {showPoolPlatformList}
-        <div className="flex flex-col xs:grid xs:grid-cols-[1fr_2fr] gap-3 py-3 w-full grow">
+        <div className="flex flex-col xs:grid xs:grid-cols-[1fr_2fr] gap-global p-global w-full grow">
           <PoolDetails
             name={selectedPoolAndPlatform?.pool}
             pool={pool}
diff --git a/ui/src/app/resources/components/ResourcesFilter.tsx b/ui/src/app/resources/components/ResourcesFilter.tsx
index 633ca8dc..7e99905e 100644
--- a/ui/src/app/resources/components/ResourcesFilter.tsx
+++ b/ui/src/app/resources/components/ResourcesFilter.tsx
@@ -131,10 +131,10 @@ export const ResourcesFilter = ({
 
   return (
     <form onSubmit={handleSubmit}>
-      <div className="flex flex-col gap-3 p-3">
+      <div className="flex flex-col gap-global p-global">
         <fieldset className="flex flex-col gap-1">
           <legend>Resource Type</legend>
-          <div className="flex flex-row gap-7">
+          <div className="flex flex-row gap-radios">
             <label className="flex items-center gap-1">
               <input
                 type="radio"
@@ -192,7 +192,7 @@ export const ResourcesFilter = ({
           isSelectAllChecked={localAllNodes}
         />
       </div>
-      <div className="flex flex-row gap-3 justify-between body-footer p-3">
+      <div className="flex flex-row gap-global justify-between body-footer p-global">
         <button
           type="button"
           className="btn"
diff --git a/ui/src/app/resources/components/ResourcesTable.tsx b/ui/src/app/resources/components/ResourcesTable.tsx
index 90e07513..93a587e3 100755
--- a/ui/src/app/resources/components/ResourcesTable.tsx
+++ b/ui/src/app/resources/components/ResourcesTable.tsx
@@ -28,7 +28,6 @@ import Link from "next/link";
 
 import { commonFilterFns } from "~/components/commonFilterFns";
 import { TableBase } from "~/components/TableBase";
-import { TableLoader } from "~/components/TableLoader";
 import { TablePagination } from "~/components/TablePagination";
 import { Colors, Tag } from "~/components/Tag";
 import { useTableSortLoader } from "~/hooks/useTableSortLoader";
@@ -252,6 +251,7 @@ export const ResourcesTable = ({
     onColumnFiltersChange: setColumnFilters,
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getRowId: (row) => `${row.node}-${row.pool}`,
     enableMultiSort: true,
     enableSortingRemoval: false,
     state: { columnFilters, sorting },
@@ -306,22 +306,16 @@ export const ResourcesTable = ({
   }, [table.getFilteredRowModel().flatRows]);
 
   return (
-    <div className="h-full">
-      {isLoading ? (
-        <TableLoader table={table} />
-      ) : (
-        <TableBase
-          columns={resourceTableColumns}
-          table={table}
-          paddingOffset={10}
-          className="body-component"
-        >
-          <TablePagination
-            totalRows={resources.length}
-            table={table}
-          />
-        </TableBase>
-      )}
-    </div>
+    <TableBase
+      columns={resourceTableColumns}
+      table={table}
+      className="body-component"
+      isLoading={isLoading}
+    >
+      <TablePagination
+        totalRows={resources.length}
+        table={table}
+      />
+    </TableBase>
   );
 };
diff --git a/ui/src/app/resources/layout.tsx b/ui/src/app/resources/layout.tsx
index 8443841a..48115c14 100644
--- a/ui/src/app/resources/layout.tsx
+++ b/ui/src/app/resources/layout.tsx
@@ -15,7 +15,6 @@
 //SPDX-License-Identifier: Apache-2.0
 import { type PropsWithChildren } from "react";
 
-import { Layout } from "~/components/Layout";
 import { env } from "~/env.mjs";
 
 export const metadata = {
@@ -23,5 +22,5 @@ export const metadata = {
 };
 
 export default function ResourcesLayout({ children }: PropsWithChildren) {
-  return <Layout>{children}</Layout>;
+  return children;
 }
diff --git a/ui/src/app/resources/page.tsx b/ui/src/app/resources/page.tsx
index 883187f6..1415293a 100644
--- a/ui/src/app/resources/page.tsx
+++ b/ui/src/app/resources/page.tsx
@@ -20,12 +20,13 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import { z } from "zod";
 
+import { FilterButton } from "~/components/FilterButton";
 import FullPageModal from "~/components/FullPageModal";
-import { FilledIcon, OutlinedIcon } from "~/components/Icon";
+import { FilledIcon } from "~/components/Icon";
+import { IconButton } from "~/components/IconButton";
+import PageHeader from "~/components/PageHeader";
 import { SlideOut } from "~/components/SlideOut";
-import { SHOW_USED_KEY } from "~/components/StoreProvider";
 import { TaskHistoryBanner } from "~/components/TaskHistoryBanner";
-import { ViewToggleButton } from "~/components/ViewToggleButton";
 import useSafeTimeout from "~/hooks/useSafeTimeout";
 import { convertFields, ResourcesEntrySchema, roundResources } from "~/models";
 import { api } from "~/trpc/react";
@@ -35,6 +36,7 @@ import { ResourceDetails, type ResourceListItem } from "./components/ResourceDet
 import { ResourcesFilter } from "./components/ResourcesFilter";
 import { ResourcesTable } from "./components/ResourcesTable";
 import useToolParamUpdater from "./hooks/useToolParamUpdater";
+import { UsedFreeToggle } from "../pools/components/UsedFreeToggle";
 import { resourcesToNodes } from "../tasks/components/TasksFilters";
 
 export default function Resources() {
@@ -51,8 +53,6 @@ export default function Resources() {
     selectedResource,
   } = useToolParamUpdater();
   const [showFilters, setShowFilters] = useState(false);
-  const headerRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
   const lastFetchTimeRef = useRef<number>(Date.now());
   const { setSafeTimeout } = useSafeTimeout();
 
@@ -150,68 +150,34 @@ export default function Resources() {
 
   return (
     <>
-      <div
-        className="page-header mb-3"
-        ref={headerRef}
-      >
-        <div className="flex items-center gap-8">
-          <button
-            className={`btn ${showGauges ? "btn-primary" : ""}`}
-            aria-pressed={showGauges}
-            onClick={() => updateUrl({ showGauges: !showGauges })}
-          >
-            <OutlinedIcon name="speed" />
-            Gauges
-            <FilledIcon name="more_vert" />
-          </button>
-          <h1>Resources</h1>
-        </div>
-        <div className="flex items-center gap-3">
-          <fieldset
-            className="flex flex-row gap-3"
-            aria-label="View Type"
-          >
-            <ViewToggleButton
-              name="isShowingUsed"
-              checked={isShowingUsed}
-              onChange={() => {
-                updateUrl({ isShowingUsed: true });
-                localStorage.setItem(SHOW_USED_KEY, "true");
-              }}
-            >
-              Used
-            </ViewToggleButton>
-            <ViewToggleButton
-              name="isShowingUsed"
-              checked={!isShowingUsed}
-              onChange={() => {
-                updateUrl({ isShowingUsed: false });
-                localStorage.setItem(SHOW_USED_KEY, "false");
-              }}
-            >
-              Free
-            </ViewToggleButton>
-          </fieldset>
-          <button
-            className={`btn ${showFilters ? "btn-primary" : ""}`}
-            onClick={() => {
-              setShowFilters(true);
-            }}
-          >
-            <FilledIcon name="filter_list" />
-            Filters {filterCount > 0 ? `(${filterCount})` : ""}
-          </button>
-        </div>
+      <PageHeader>
+        <IconButton
+          id="gauges-button"
+          className={`btn ${showGauges ? "btn-primary" : ""}`}
+          aria-pressed={showGauges}
+          onClick={() => updateUrl({ showGauges: !showGauges })}
+          icon="speed"
+          text="Gauges"
+        />
+        <UsedFreeToggle
+          isShowingUsed={isShowingUsed}
+          updateUrl={updateUrl}
+        />
+        <FilterButton
+          showFilters={showFilters}
+          setShowFilters={setShowFilters}
+          filterCount={filterCount}
+          aria-controls="resources-filters"
+        />
+      </PageHeader>
+      <div className={`${gridClass} h-full w-full overflow-x-auto relative`}>
         <SlideOut
-          top={headerRef.current?.offsetHeight ?? 0}
-          containerRef={headerRef}
           id="resources-filter"
           open={showFilters}
           onClose={() => {
             setShowFilters(false);
           }}
           aria-label="Resources Filter"
-          dimBackground={false}
           className="z-40 border-t-0 w-100"
         >
           <ResourcesFilter
@@ -225,50 +191,29 @@ export default function Resources() {
             onRefresh={forceRefetch}
           />
         </SlideOut>
-      </div>
-      <div
-        ref={containerRef}
-        className={`${gridClass} h-full w-full overflow-x-auto relative px-3 gap-3`}
-      >
         {showGauges && (
-          <div
+          <section
             className="h-full w-40 2xl:w-50 3xl:w-80 4xl:w-100 flex flex-col relative overflow-y-auto overflow-x-hidden body-component"
-            style={{
-              maxHeight: `calc(100vh - ${10 + (containerRef?.current?.getBoundingClientRect()?.top ?? 0)}px)`,
-            }}
+            aria-labelledby="gauges-button"
           >
-            <div className={`popup-header sticky top-0 z-10 brand-header`}>
-              <h2>Gauges</h2>
-              <button
-                className="btn btn-action"
-                aria-label="Close"
-                onClick={() => {
-                  updateUrl({ showGauges: false });
-                }}
-              >
-                <OutlinedIcon name="close" />
-              </button>
-            </div>
             <AggregatePanels
               {...aggregates}
               isLoading={isFetching}
               isShowingUsed={isShowingUsed}
             />
-          </div>
+          </section>
         )}
-        <div className="h-full w-full">
-          <ResourcesTable
-            isLoading={isFetching}
-            resources={processResources}
-            isShowingUsed={isShowingUsed}
-            setAggregates={setAggregates}
-            nodes={nodes}
-            allNodes={isSelectAllNodesChecked}
-            filterResourceTypes={filterResourceTypes}
-            selectedResource={selectedResource}
-            updateUrl={updateUrl}
-          />
-        </div>
+        <ResourcesTable
+          isLoading={isFetching}
+          resources={processResources}
+          isShowingUsed={isShowingUsed}
+          setAggregates={setAggregates}
+          nodes={nodes}
+          allNodes={isSelectAllNodesChecked}
+          filterResourceTypes={filterResourceTypes}
+          selectedResource={selectedResource}
+          updateUrl={updateUrl}
+        />
       </div>
       <FullPageModal
         headerChildren={
@@ -279,13 +224,14 @@ export default function Resources() {
               href={`/resources/${selectedResource.node}`}
               target="_blank"
               rel="noopener noreferrer"
-              aria-label="Open in new tab"
+              aria-label={`${selectedResource.node} - Open in new tab`}
             >
               <span className="font-semibold">{selectedResource.node}</span>
               <FilledIcon name="open_in_new" />
             </Link>
           )
         }
+        aria-label={selectedResource?.node ?? "Node Details"}
         open={!!selectedResource}
         onClose={() => {
           updateUrl({ selectedResource: null });
diff --git a/ui/src/app/tasks/components/StatusFilter.tsx b/ui/src/app/tasks/components/StatusFilter.tsx
new file mode 100644
index 00000000..0b1e9c8f
--- /dev/null
+++ b/ui/src/app/tasks/components/StatusFilter.tsx
@@ -0,0 +1,91 @@
+//SPDX-FileCopyrightText: Copyright (c) 2025 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+
+//Licensed under the Apache License, Version 2.0 (the "License");
+//you may not use this file except in compliance with the License.
+//You may obtain a copy of the License at
+
+//http://www.apache.org/licenses/LICENSE-2.0
+
+//Unless required by applicable law or agreed to in writing, software
+//distributed under the License is distributed on an "AS IS" BASIS,
+//WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//See the License for the specific language governing permissions and
+//limitations under the License.
+
+//SPDX-License-Identifier: Apache-2.0
+import { CheckboxWithLabel } from "~/components/Checkbox";
+import { StatusFilter as StatusFilterCommon, StatusFilterType } from "~/components/StatusFilter";
+import { TaskStatusValues, type TaskStatusType } from "~/models";
+
+export const getMapFromStatusArray = (statusArray: string[]) => {
+  return new Map(TaskStatusValues.map((value) => [value, statusArray.includes(value.toString())]));
+};
+
+export const getTaskStatusArray = (
+  statusFilterType?: StatusFilterType,
+  statusMap?: Map<TaskStatusType, boolean>,
+): string[] => {
+  if (statusFilterType === StatusFilterType.ALL) {
+    return [...TaskStatusValues];
+  }
+
+  if (statusFilterType === StatusFilterType.CURRENT) {
+    return ["SUBMITTING", "SCHEDULING", "WAITING", "PROCESSING", "INITIALIZING", "RUNNING"];
+  }
+
+  if (statusFilterType === StatusFilterType.COMPLETED) {
+    return ["COMPLETED"];
+  }
+
+  if (statusFilterType === StatusFilterType.FAILED) {
+    return TaskStatusValues.filter((status) => status.startsWith("FAILED")).concat(["RESCHEDULED"]);
+  }
+
+  if (!statusFilterType || !statusMap) {
+    return [];
+  }
+
+  return Array.from(statusMap.entries())
+    .filter(([_, enabled]) => enabled)
+    .map(([status]) => status);
+};
+
+export const StatusFilter = ({
+  statusMap,
+  setStatusMap,
+  className,
+  statusFilterType,
+  setStatusFilterType,
+}: {
+  statusMap: Map<TaskStatusType, boolean>;
+  setStatusMap: (map: Map<TaskStatusType, boolean>) => void;
+  className?: string;
+  statusFilterType?: StatusFilterType;
+  setStatusFilterType: (statusFilterType: StatusFilterType) => void;
+}) => {
+  return (
+    <div className={className}>
+      <StatusFilterCommon
+        statusFilterType={statusFilterType}
+        setStatusFilterType={setStatusFilterType}
+      />
+      {statusFilterType === StatusFilterType.CUSTOM &&
+        TaskStatusValues.map((name) => {
+          const checked = Boolean(statusMap.get(name));
+          return (
+            <CheckboxWithLabel
+              key={name}
+              label={name}
+              checked={checked}
+              containerClassName="p-1"
+              onChange={(event) => {
+                const newMap = new Map(statusMap);
+                newMap.set(name, Boolean(event.target.checked));
+                setStatusMap(newMap);
+              }}
+            />
+          );
+        })}
+    </div>
+  );
+};
diff --git a/ui/src/app/tasks/components/TasksFilters.tsx b/ui/src/app/tasks/components/TasksFilters.tsx
index efa6c7ce..dd97620f 100644
--- a/ui/src/app/tasks/components/TasksFilters.tsx
+++ b/ui/src/app/tasks/components/TasksFilters.tsx
@@ -21,20 +21,22 @@ import { OutlinedIcon } from "~/components/Icon";
 import { InlineBanner } from "~/components/InlineBanner";
 import { MultiselectWithAll } from "~/components/MultiselectWithAll";
 import { Spinner } from "~/components/Spinner";
-import { StatusFilter } from "~/components/StatusFilter";
+import { StatusFilterType } from "~/components/StatusFilter";
 import { TextInput } from "~/components/TextInput";
 import { UserFilter, UserFilterType } from "~/components/UserFilter";
-import { PoolsListResponseSchema, type PriorityType, type ResourcesEntry } from "~/models";
+import { PoolsListResponseSchema, type PriorityType, type ResourcesEntry, type TaskStatusType } from "~/models";
 import { api } from "~/trpc/react";
 
+import { getMapFromStatusArray, getTaskStatusArray, StatusFilter } from "./StatusFilter";
+
 export interface TasksFiltersDataProps {
   userType: UserFilterType;
   selectedUsers: string;
   dateRange: number;
   startedAfter?: string;
   startedBefore?: string;
-  allStatuses: boolean;
-  statuses: string;
+  statusFilterType?: StatusFilterType;
+  statuses?: string;
   selectedPools: string;
   isSelectAllPoolsChecked: boolean;
   priority?: PriorityType;
@@ -44,12 +46,10 @@ export interface TasksFiltersDataProps {
 }
 
 interface TasksFiltersProps extends TasksFiltersDataProps {
-  statusValues: string[];
   currentUserName: string;
   onRefresh: () => void;
   validateFilters: (props: TasksFiltersDataProps) => string[];
   updateUrl: (params: ToolParamUpdaterProps) => void;
-  defaults: Record<string, string | undefined>;
 }
 
 export const initNodes = (nodes: string, poolNodes: string[]) => {
@@ -82,13 +82,12 @@ export const resourcesToNodes = (resources: ResourcesEntry[]): PoolNodes[] => {
 };
 
 export const TasksFilters = ({
-  statusValues,
   userType,
   selectedUsers,
   dateRange,
   startedAfter,
   startedBefore,
-  allStatuses,
+  statusFilterType,
   statuses,
   selectedPools,
   isSelectAllPoolsChecked,
@@ -100,12 +99,11 @@ export const TasksFilters = ({
   updateUrl,
   nodes,
   isSelectAllNodesChecked,
-  defaults,
 }: TasksFiltersProps) => {
   const [localDateRange, setLocalDateRange] = useState(dateRange);
   const [localStartedAfter, setLocalStartedAfter] = useState<string | undefined>(undefined);
   const [localStartedBefore, setLocalStartedBefore] = useState<string | undefined>(undefined);
-  const [localStatusMap, setLocalStatusMap] = useState<Map<string, boolean>>(new Map());
+  const [localStatusMap, setLocalStatusMap] = useState<Map<TaskStatusType, boolean>>(new Map());
   const [localPools, setLocalPools] = useState<Map<string, boolean>>(new Map());
   const [localUsers, setLocalUsers] = useState<string>(selectedUsers);
   const [localUserType, setLocalUserType] = useState<UserFilterType>(userType);
@@ -115,7 +113,7 @@ export const TasksFilters = ({
   const [priorityFilter, setPriorityFilter] = useState<PriorityType | undefined>(priority);
   const [localNodes, setLocalNodes] = useState<Map<string, boolean>>(new Map());
   const [localAllNodes, setLocalAllNodes] = useState<boolean>(isSelectAllNodesChecked);
-  const [localAllStatuses, setLocalAllStatuses] = useState(allStatuses);
+  const [localStatusFilterType, setLocalStatusFilterType] = useState<StatusFilterType | undefined>(statusFilterType);
 
   const { data: availablePools, isLoading: isLoadingPools } = api.resources.getPools.useQuery(undefined, {
     refetchOnWindowFocus: false,
@@ -143,6 +141,17 @@ export const TasksFilters = ({
     setLocalUserType(userType);
   }, [userType]);
 
+  useEffect(() => {
+    setLocalStatusFilterType(statusFilterType);
+
+    if (statusFilterType === StatusFilterType.CUSTOM) {
+      const statusArray = statuses?.split(",") ?? [];
+      setLocalStatusMap(getMapFromStatusArray(statusArray));
+    } else {
+      setLocalStatusMap(getMapFromStatusArray(getTaskStatusArray(statusFilterType)));
+    }
+  }, [statuses, statusFilterType]);
+
   const poolNodes = useMemo(() => {
     if (localAllPools) {
       return availableNodes?.flatMap(({ hostname }) => hostname);
@@ -161,11 +170,7 @@ export const TasksFilters = ({
     setLocalStartedAfter(startedAfter);
     setLocalStartedBefore(startedBefore);
     setLocalWorkflowId(workflowId);
-
-    setLocalStatusMap(
-      new Map(statusValues.map((value: string) => [value, !statuses || statuses.split(",").includes(value)])),
-    );
-  }, [dateRange, startedAfter, startedBefore, statuses, workflowId, statusValues]);
+  }, [dateRange, startedAfter, startedBefore, workflowId]);
 
   useEffect(() => {
     const parsedData = PoolsListResponseSchema.safeParse(availablePools);
@@ -192,11 +197,7 @@ export const TasksFilters = ({
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    const statuses = localAllStatuses
-      ? []
-      : Array.from(localStatusMap.entries())
-          .filter(([_, enabled]) => enabled)
-          .map(([status]) => status);
+    const statuses = getTaskStatusArray(localStatusFilterType, localStatusMap);
 
     const pools = Array.from(localPools.entries())
       .filter(([_, enabled]) => enabled)
@@ -219,8 +220,8 @@ export const TasksFilters = ({
       workflowId: localWorkflowId,
       nodes: nodes.join(","),
       isSelectAllNodesChecked: localAllNodes,
-      allStatuses: localAllStatuses,
-      statuses: statuses.join(","),
+      statusFilterType: localStatusFilterType,
+      statuses: localStatusFilterType === StatusFilterType.CUSTOM ? statuses.join(",") : undefined,
     });
 
     setErrors(formErrors);
@@ -233,8 +234,8 @@ export const TasksFilters = ({
       dateRange: localDateRange,
       dateAfter: localDateRange === customDateRange ? localStartedAfter : null,
       dateBefore: localDateRange === customDateRange ? localStartedBefore : null,
-      allStatuses: localAllStatuses,
-      status: statuses.length > 0 ? statuses.join(",") : undefined,
+      statusFilterType: localStatusFilterType,
+      status: localStatusFilterType === StatusFilterType.CUSTOM ? statuses.join(",") : null,
       allPools: localAllPools,
       pools: localAllPools ? null : pools,
       allUsers: localUserType === UserFilterType.ALL,
@@ -249,15 +250,7 @@ export const TasksFilters = ({
   };
 
   const handleReset = () => {
-    setLocalAllStatuses(defaults.allStatuses ? defaults.allStatuses === "true" : true);
-
-    if (defaults.status) {
-      const statuses = defaults.status.split(",");
-      setLocalStatusMap(new Map(statusValues.map((value) => [value, statuses.includes(value)])));
-    } else {
-      setLocalStatusMap(new Map(statusValues.map((value) => [value, true])));
-    }
-
+    setLocalStatusFilterType(StatusFilterType.CURRENT);
     setLocalUserType(UserFilterType.CURRENT);
     setLocalUsers(currentUserName);
     setLocalAllPools(true);
@@ -269,8 +262,8 @@ export const TasksFilters = ({
     setLocalAllNodes(true);
 
     updateUrl({
-      status: undefined,
-      allStatuses: false,
+      status: null,
+      statusFilterType: StatusFilterType.CURRENT,
       allPools: true,
       allUsers: false,
       users: [currentUserName],
@@ -288,7 +281,7 @@ export const TasksFilters = ({
 
   return (
     <form onSubmit={handleSubmit}>
-      <div className="body-component p-3 flex flex-col gap-3">
+      <div className="p-global flex flex-col gap-global">
         <UserFilter
           userType={localUserType}
           setUserType={setLocalUserType}
@@ -298,7 +291,7 @@ export const TasksFilters = ({
         />
         <fieldset className="flex flex-col gap-1 mb-2">
           <legend>Priority</legend>
-          <div className="flex flex-row gap-7">
+          <div className="flex flex-row gap-radios">
             <label className="flex items-center gap-1">
               <input
                 type="radio"
@@ -349,10 +342,10 @@ export const TasksFilters = ({
           className="w-full"
         />
         <StatusFilter
+          statusFilterType={localStatusFilterType}
+          setStatusFilterType={setLocalStatusFilterType}
           statusMap={localStatusMap}
           setStatusMap={setLocalStatusMap}
-          allStatuses={localAllStatuses}
-          setAllStatuses={setLocalAllStatuses}
         />
         <MultiselectWithAll
           id="pools"
@@ -384,19 +377,17 @@ export const TasksFilters = ({
           setFromDate={setLocalStartedAfter}
           toDate={localStartedBefore}
           setToDate={setLocalStartedBefore}
-          className="flex flex-col gap-3 mt-2"
+          className="flex flex-col gap-global mt-2"
         />
-        {errors.length > 0 && (
-          <InlineBanner status="error">
-            <div className="flex flex-col gap-2">
-              {errors.map((error, index) => (
-                <div key={index}>{error}</div>
-              ))}
-            </div>
-          </InlineBanner>
-        )}
       </div>
-      <div className="flex flex-row gap-3 justify-between body-footer p-3 sticky bottom-0">
+      <InlineBanner status={errors.length > 0 ? "error" : "none"}>
+        <div className="flex flex-col">
+          {errors.map((error, index) => (
+            <div key={index}>{error}</div>
+          ))}
+        </div>
+      </InlineBanner>
+      <div className="flex flex-row gap-global justify-between body-footer p-global sticky bottom-0">
         <button
           type="button"
           className="btn"
diff --git a/ui/src/app/tasks/components/TasksTable.tsx b/ui/src/app/tasks/components/TasksTable.tsx
index 5d81520f..b5a5667d 100644
--- a/ui/src/app/tasks/components/TasksTable.tsx
+++ b/ui/src/app/tasks/components/TasksTable.tsx
@@ -27,13 +27,13 @@ import {
 import Link from "next/link";
 
 import { TaskTableRowAction } from "~/app/workflows/components/TaskTableRowAction";
+import { linkToUserWorkflows } from "~/app/workflows/components/WorkflowDetails";
 import { WorkflowTableRowAction } from "~/app/workflows/components/WorkflowTableRowAction";
 import { getStatusDescription } from "~/app/workflows/components/WorkfowStatusInfo";
 import { type ToolParamUpdaterProps, ToolType } from "~/app/workflows/hooks/useToolParamUpdater";
 import { commonFilterFns } from "~/components/commonFilterFns";
 import StatusBadge from "~/components/StatusBadge";
 import { TableBase } from "~/components/TableBase";
-import { TableLoader } from "~/components/TableLoader";
 import { TablePagination } from "~/components/TablePagination";
 import { Colors, Tag } from "~/components/Tag";
 import { useTableSortLoader } from "~/hooks/useTableSortLoader";
@@ -42,6 +42,10 @@ import { type TaskListItem } from "~/models/tasks-model";
 import { useRuntimeEnv } from "~/runtime-env";
 import { convertSeconds, convertToReadableTimezone, formatForWrapping, sortDateWithNA } from "~/utils/string";
 
+export const getActionId = (showWF: boolean, workflowId: string, taskName: string, retryId: number) => {
+  return `${showWF ? "workflow" : "task"}-${workflowId}-${taskName}-${retryId}`;
+};
+
 export const TasksTable = ({
   processResources,
   isLoading,
@@ -73,6 +77,7 @@ export const TasksTable = ({
         accessorKey: "task_name",
         cell: ({ row }) => (
           <TaskTableRowAction
+            id={getActionId(false, row.original.workflow_id, row.original.task_name, row.original.retry_id)}
             name={row.original.task_name}
             retry_id={row.original.retry_id}
             lead={false}
@@ -84,7 +89,6 @@ export const TasksTable = ({
               !showWF
             }
             updateUrl={updateUrl}
-            disableScrollIntoView={true}
             extraParams={{
               workflow: row.original.workflow_id,
               showWF: "false",
@@ -102,10 +106,10 @@ export const TasksTable = ({
         header: "Workflow ID",
         cell: ({ row }) => (
           <WorkflowTableRowAction
+            id={getActionId(true, row.original.workflow_id, row.original.task_name, row.original.retry_id)}
             name={row.original.workflow_id}
             selected={row.original.workflow_id === selectedWorkflowId && showWF}
             updateUrl={updateUrl}
-            disableScrollIntoView={true}
             extraParams={{
               showWF: "true",
               task: row.original.task_name,
@@ -121,7 +125,14 @@ export const TasksTable = ({
       {
         accessorKey: "user",
         header: "User",
-        cell: ({ row }) => formatForWrapping(row.original.user),
+        cell: ({ row }) => (
+          <Link
+            href={linkToUserWorkflows(row.original.user)}
+            className="no-underline px-0"
+          >
+            {formatForWrapping(row.original.user)}
+          </Link>
+        ),
         sortingFn: "alphanumericCaseSensitive",
         enableMultiSort: true,
         invertSorting: true,
@@ -287,6 +298,7 @@ export const TasksTable = ({
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    getRowId: (row) => `${row.workflow_id}-${row.task_name}-${row.retry_id}`,
     state: {
       sorting,
       columnVisibility,
@@ -304,29 +316,17 @@ export const TasksTable = ({
     autoResetPageIndex: false,
   });
 
-  if (isLoading) {
-    return <TableLoader table={table} />;
-  }
-
   return (
-    <div className="h-full w-full">
-      {isLoading ? (
-        <TableLoader table={table} />
-      ) : (
-        <div className="flex flex-col h-full w-full">
-          <TableBase
-            columns={columns}
-            table={table}
-            paddingOffset={10}
-            className="body-component"
-          >
-            <TablePagination
-              table={table}
-              totalRows={processResources.length}
-            />
-          </TableBase>
-        </div>
-      )}
-    </div>
+    <TableBase
+      columns={columns}
+      table={table}
+      className="body-component"
+      isLoading={isLoading}
+    >
+      <TablePagination
+        table={table}
+        totalRows={processResources.length}
+      />
+    </TableBase>
   );
 };
diff --git a/ui/src/app/tasks/layout.tsx b/ui/src/app/tasks/layout.tsx
index 956eea4a..e765183c 100644
--- a/ui/src/app/tasks/layout.tsx
+++ b/ui/src/app/tasks/layout.tsx
@@ -15,7 +15,6 @@
 //SPDX-License-Identifier: Apache-2.0
 import { type PropsWithChildren } from "react";
 
-import { Layout } from "~/components/Layout";
 import { env } from "~/env.mjs";
 
 export const metadata = {
@@ -23,5 +22,5 @@ export const metadata = {
 };
 
 export default function TasksLayout({ children }: PropsWithChildren) {
-  return <Layout>{children}</Layout>;
+  return children;
 }
diff --git a/ui/src/app/tasks/page.tsx b/ui/src/app/tasks/page.tsx
index db40d44d..a50df619 100644
--- a/ui/src/app/tasks/page.tsx
+++ b/ui/src/app/tasks/page.tsx
@@ -21,21 +21,26 @@ import Link from "next/link";
 
 import { useAuth } from "~/components/AuthProvider";
 import { allDateRange, customDateRange } from "~/components/DateRangePicker";
-import { FilledIcon, OutlinedIcon } from "~/components/Icon";
+import { FilterButton } from "~/components/FilterButton";
+import { FilledIcon } from "~/components/Icon";
+import { IconButton } from "~/components/IconButton";
 import { PageError } from "~/components/PageError";
+import PageHeader from "~/components/PageHeader";
 import { SlideOut } from "~/components/SlideOut";
 import { Spinner } from "~/components/Spinner";
+import { StatusFilterType } from "~/components/StatusFilter";
 import { TASK_PINNED_KEY, UrlTypes } from "~/components/StoreProvider";
 import { Colors, Tag } from "~/components/Tag";
 import { UserFilterType } from "~/components/UserFilter";
 import useSafeTimeout from "~/hooks/useSafeTimeout";
-import { TaskStatusValues, type TaskStatusType } from "~/models";
 import { type TaskListItem } from "~/models/tasks-model";
 import { api } from "~/trpc/react";
 import { formatForWrapping } from "~/utils/string";
 
+import { getTaskStatusArray } from "./components/StatusFilter";
 import { TasksFilters, type TasksFiltersDataProps } from "./components/TasksFilters";
 import { TasksTable } from "./components/TasksTable";
+import { getActionId } from "./components/TasksTable";
 import TaskDetails from "../workflows/components/TaskDetails";
 import { ToolsModal } from "../workflows/components/ToolsModal";
 import WorkflowDetails from "../workflows/components/WorkflowDetails";
@@ -45,15 +50,14 @@ import useToolParamUpdater, { type ToolType } from "../workflows/hooks/useToolPa
 export default function Tasks() {
   const { username } = useAuth();
   const defaultState = {
-    status: "PROCESSING,SCHEDULING,INITIALIZING,RUNNING",
-    allStatuses: "false",
+    statusFilterType: StatusFilterType.CURRENT,
     dateRange: allDateRange.toString(),
   };
   const {
     updateUrl,
     userFilter,
     poolFilter,
-    allStatuses,
+    statusFilterType,
     statusFilter,
     userType,
     isSelectAllPoolsChecked,
@@ -74,9 +78,7 @@ export default function Tasks() {
     nodes,
     isSelectAllNodesChecked,
   } = useToolParamUpdater(UrlTypes.Tasks, username, defaultState);
-
-  const headerRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const focusReturnIdRef = useRef<string | undefined>(undefined);
   const lastFetchTimeRef = useRef<number>(Date.now());
   const [taskPinned, setTaskPinned] = useState(false);
   const [activeTool, setActiveTool] = useState<ToolType | undefined>(tool);
@@ -87,7 +89,7 @@ export default function Tasks() {
     data: selectedWorkflow,
     error: selectedWorkflowError,
     isLoading: isLoadingWorkflow,
-  } = useWorkflow(selectedWorkflowName, true, false);
+  } = useWorkflow(selectedTaskName ? selectedWorkflowName : undefined, true, false);
 
   const {
     data: tasks,
@@ -102,7 +104,8 @@ export default function Tasks() {
       users: userType === UserFilterType.CUSTOM ? (userFilter?.split(",") ?? []) : [],
       all_pools: isSelectAllPoolsChecked,
       pools: isSelectAllPoolsChecked ? [] : poolFilter ? poolFilter.split(",") : [],
-      statuses: allStatuses ? undefined : (statusFilter?.split(",") as TaskStatusType[]),
+      statuses:
+        statusFilterType === StatusFilterType.CUSTOM ? statusFilter?.split(",") : getTaskStatusArray(statusFilterType),
       priority: priority,
       started_after: dateRangeDates?.fromDate?.toISOString(),
       started_before: dateRangeDates?.toDate?.toISOString(),
@@ -121,6 +124,12 @@ export default function Tasks() {
       ?.tasks.find((t) => t.name === selectedTaskName && t.retry_id === retryId);
   }, [selectedWorkflow, selectedTaskName, retryId]);
 
+  useEffect(() => {
+    if (selectedTaskName && selectedWorkflowName && retryId !== undefined) {
+      focusReturnIdRef.current = getActionId(!!showWF, selectedWorkflowName, selectedTaskName, retryId);
+    }
+  }, [selectedTaskName, selectedWorkflowName, retryId, showWF]);
+
   // Initialize localStorage values after component mounts
   useEffect(() => {
     try {
@@ -149,7 +158,7 @@ export default function Tasks() {
       dateRange,
       startedAfter,
       startedBefore,
-      allStatuses,
+      statusFilterType,
       statuses,
       nodes,
       isSelectAllNodesChecked,
@@ -164,7 +173,7 @@ export default function Tasks() {
       if (dateRange === customDateRange && (startedAfter === undefined || startedBefore === undefined)) {
         errors.push("Please select a date range");
       }
-      if (!allStatuses && statuses.length === 0) {
+      if (statusFilterType === StatusFilterType.CUSTOM && !statuses?.length) {
         errors.push("Please select at least one status");
       }
       if (!isSelectAllNodesChecked && nodes.length === 0) {
@@ -188,7 +197,7 @@ export default function Tasks() {
         workflowId: nameFilter ?? "",
         nodes: nodes ?? "",
         isSelectAllNodesChecked: isSelectAllNodesChecked ?? true,
-        allStatuses: allStatuses ?? true,
+        statusFilterType,
         statuses: statusFilter ?? "",
       }).length > 0
     ) {
@@ -208,14 +217,14 @@ export default function Tasks() {
     nodes,
     isSelectAllNodesChecked,
     updateUrl,
-    allStatuses,
+    statusFilterType,
     statusFilter,
   ]);
   const { setSafeTimeout } = useSafeTimeout();
 
   const gridClass = useMemo(() => {
     if (taskPinned && selectedTaskName) {
-      return "grid grid-cols-[1fr_auto]";
+      return "grid grid-cols-[75vw_25vw]";
     } else {
       return "flex flex-row";
     }
@@ -307,50 +316,42 @@ export default function Tasks() {
 
   return (
     <>
-      <div
-        className="page-header mb-3"
-        ref={headerRef}
-      >
-        <h1>Tasks</h1>
-        <div className="flex flex-row gap-3">
-          <button
-            className={`btn ${showTotalResources ? "btn-primary" : ""}`}
-            onClick={() => {
-              setShowTotalResources(!showTotalResources);
-            }}
-          >
-            <OutlinedIcon name="memory" />
-            Total Resources
-          </button>
-          <button
-            className={`btn ${showFilters ? "btn-primary" : ""}`}
-            onClick={() => {
-              setShowFilters(!showFilters);
-            }}
-          >
-            <FilledIcon name="filter_list" />
-            Filters {filterCount > 0 ? `(${filterCount})` : ""}
-          </button>
-        </div>
+      <PageHeader>
+        <IconButton
+          icon="memory"
+          text="Total Resources"
+          className={`btn ${showTotalResources ? "btn-primary" : ""}`}
+          onClick={() => {
+            setShowTotalResources(!showTotalResources);
+          }}
+          aria-expanded={showTotalResources}
+          aria-haspopup="true"
+          aria-controls="total-resources"
+        />
+        <FilterButton
+          showFilters={showFilters}
+          setShowFilters={setShowFilters}
+          filterCount={filterCount}
+          aria-controls="tasks-filters"
+        />
+      </PageHeader>
+      <div className={`${gridClass} h-full w-full overflow-x-auto relative`}>
         <SlideOut
           id="tasks-filters"
           open={showFilters}
           onClose={() => setShowFilters(false)}
           className="w-100 border-t-0"
-          containerRef={headerRef}
-          top={headerRef.current?.offsetHeight ?? 0}
-          dimBackground={false}
+          aria-label="Tasks Filter"
         >
           {/* By only adding it if showFilters is true, it will reset to url params if closed and reopened */}
           {showFilters && (
             <TasksFilters
-              statusValues={Object.values(TaskStatusValues)}
               selectedUsers={userFilter ?? ""}
               userType={userType}
               dateRange={dateRange}
               startedAfter={dateAfterFilter}
               startedBefore={dateBeforeFilter}
-              allStatuses={allStatuses ?? true}
+              statusFilterType={statusFilterType}
               statuses={statusFilter ?? ""}
               selectedPools={poolFilter}
               isSelectAllPoolsChecked={isSelectAllPoolsChecked}
@@ -362,7 +363,6 @@ export default function Tasks() {
               updateUrl={updateUrl}
               nodes={nodes ?? ""}
               isSelectAllNodesChecked={isSelectAllNodesChecked ?? true}
-              defaults={defaultState}
             />
           )}
         </SlideOut>
@@ -370,14 +370,14 @@ export default function Tasks() {
           id="total-resources"
           open={showTotalResources}
           onClose={() => setShowTotalResources(false)}
-          containerRef={headerRef}
-          top={headerRef.current?.offsetHeight ?? 0}
-          header={<h2>Total Resources</h2>}
-          dimBackground={false}
-          className="mr-26 border-t-0"
+          header="Total Resources"
+          className="lg:mr-20 border-t-0"
         >
-          <div className="h-full w-full p-3 dag-details-body">
-            <dl>
+          <div className="w-full p-global dag-details-body">
+            <dl
+              className="grid-cols-2"
+              aria-labelledby="total-resources-header"
+            >
               <dt>Storage</dt>
               <dd className="text-right">
                 {Intl.NumberFormat("en-US", { style: "decimal" }).format(totalResources.Storage)}
@@ -397,11 +397,6 @@ export default function Tasks() {
             </dl>
           </div>
         </SlideOut>
-      </div>
-      <div
-        ref={containerRef}
-        className={`${gridClass} h-full w-full overflow-x-auto relative px-3 gap-3`}
-      >
         <TasksTable
           processResources={processResources}
           isLoading={isLoading}
@@ -420,7 +415,6 @@ export default function Tasks() {
                 href={`/workflows/${selectedWorkflowName}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Open in new tab"
               >
                 <span className="font-semibold">Workflow Details</span>
                 <FilledIcon name="open_in_new" />
@@ -432,7 +426,14 @@ export default function Tasks() {
           id="tasks-details"
           open={!!selectedTaskName}
           paused={!!selectedTaskName && !selectedTask}
+          returnFocusOnDeactivate={false}
           onClose={() => {
+            setSafeTimeout(() => {
+              // focus-trap-react does not work well with useReactTable as the ref for button inside the table that triggered the slideout is not persistent
+              const el = focusReturnIdRef.current ? document.getElementById(focusReturnIdRef.current) : undefined;
+              el?.focus();
+            }, 500);
+
             if (showWF) {
               updateUrl({ showWF: false });
             } else {
@@ -448,14 +449,11 @@ export default function Tasks() {
           className="workflow-details-slideout border-t-0"
           headerClassName="brand-header"
           bodyClassName="dag-details-body"
-          containerRef={containerRef}
-          heightOffset={10}
         >
           {selectedWorkflowError ? (
             <PageError
               title="Error loading workflow"
               errorMessage={selectedWorkflowError.message}
-              subText={selectedWorkflowName}
               size="md"
             />
           ) : showWF && selectedWorkflow ? (
@@ -468,7 +466,6 @@ export default function Tasks() {
           ) : selectedTask ? (
             <TaskDetails
               task={selectedTask}
-              showTaskName={true}
               updateUrl={updateUrl}
               extraData={extraData}
             />
diff --git a/ui/src/app/taskssummary/components/TasksTable.tsx b/ui/src/app/taskssummary/components/TasksTable.tsx
index b2c6365e..d2a4d21b 100644
--- a/ui/src/app/taskssummary/components/TasksTable.tsx
+++ b/ui/src/app/taskssummary/components/TasksTable.tsx
@@ -30,7 +30,6 @@ import { WorkflowTableRowAction } from "~/app/workflows/components/WorkflowTable
 import { type ToolParamUpdaterProps } from "~/app/workflows/hooks/useToolParamUpdater";
 import { commonFilterFns } from "~/components/commonFilterFns";
 import { TableBase } from "~/components/TableBase";
-import { TableLoader } from "~/components/TableLoader";
 import { TablePagination } from "~/components/TablePagination";
 import { Colors, Tag } from "~/components/Tag";
 import { useTableSortLoader } from "~/hooks/useTableSortLoader";
@@ -153,10 +152,10 @@ export const TasksTable = ({
         cell: ({ row }) =>
           row.original.workflow_id ? (
             <WorkflowTableRowAction
+              id={`workflow-${row.original.workflow_id}`}
               name={row.original.workflow_id}
               selected={row.original.workflow_id === selectedWorkflowId}
               updateUrl={updateUrl}
-              disableScrollIntoView={true}
             />
           ) : undefined,
         sortingFn: "alphanumericCaseSensitive",
@@ -176,6 +175,9 @@ export const TasksTable = ({
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
+    getRowId: (row) => {
+      return showWF ? `${row.user}-${row.workflow_id}` : row.user;
+    },
     state: {
       sorting,
       columnVisibility,
@@ -193,29 +195,17 @@ export const TasksTable = ({
     autoResetPageIndex: false,
   });
 
-  if (isLoading) {
-    return <TableLoader table={table} />;
-  }
-
   return (
-    <div className="h-full w-full">
-      {isLoading ? (
-        <TableLoader table={table} />
-      ) : (
-        <div className="flex flex-col h-full w-full">
-          <TableBase
-            columns={columns}
-            table={table}
-            paddingOffset={10}
-            className="body-component"
-          >
-            <TablePagination
-              table={table}
-              totalRows={processResources.length}
-            />
-          </TableBase>
-        </div>
-      )}
-    </div>
+    <TableBase
+      columns={columns}
+      table={table}
+      className="body-component"
+      isLoading={isLoading}
+    >
+      <TablePagination
+        table={table}
+        totalRows={processResources.length}
+      />
+    </TableBase>
   );
 };
diff --git a/ui/src/app/taskssummary/layout.tsx b/ui/src/app/taskssummary/layout.tsx
index 6d6aec80..9925d668 100644
--- a/ui/src/app/taskssummary/layout.tsx
+++ b/ui/src/app/taskssummary/layout.tsx
@@ -15,7 +15,6 @@
 //SPDX-License-Identifier: Apache-2.0
 import { type PropsWithChildren } from "react";
 
-import { Layout } from "~/components/Layout";
 import { env } from "~/env.mjs";
 
 export const metadata = {
@@ -23,5 +22,5 @@ export const metadata = {
 };
 
 export default function TasksLayout({ children }: PropsWithChildren) {
-  return <Layout>{children}</Layout>;
+  return children;
 }
diff --git a/ui/src/app/taskssummary/page.tsx b/ui/src/app/taskssummary/page.tsx
index 6f50f666..53c3dedb 100644
--- a/ui/src/app/taskssummary/page.tsx
+++ b/ui/src/app/taskssummary/page.tsx
@@ -21,17 +21,21 @@ import Link from "next/link";
 
 import { useAuth } from "~/components/AuthProvider";
 import { allDateRange, customDateRange } from "~/components/DateRangePicker";
-import { FilledIcon, OutlinedIcon } from "~/components/Icon";
+import { FilterButton } from "~/components/FilterButton";
+import { FilledIcon } from "~/components/Icon";
+import { IconButton } from "~/components/IconButton";
 import { PageError } from "~/components/PageError";
+import PageHeader from "~/components/PageHeader";
 import { SlideOut } from "~/components/SlideOut";
+import { StatusFilterType } from "~/components/StatusFilter";
 import { TASK_PINNED_KEY, UrlTypes } from "~/components/StoreProvider";
 import { UserFilterType } from "~/components/UserFilter";
 import useSafeTimeout from "~/hooks/useSafeTimeout";
-import { type TaskSummaryStatusType, TaskSummaryStatusValues } from "~/models";
 import { type TaskSummaryListItem } from "~/models/tasks-model";
 import { api } from "~/trpc/react";
 
 import { TasksTable } from "./components/TasksTable";
+import { getTaskStatusArray } from "../tasks/components/StatusFilter";
 import { TasksFilters, type TasksFiltersDataProps } from "../tasks/components/TasksFilters";
 import { ToolsModal } from "../workflows/components/ToolsModal";
 import WorkflowDetails from "../workflows/components/WorkflowDetails";
@@ -42,7 +46,7 @@ export default function TasksSummary() {
   const { username } = useAuth();
   const defaultState = {
     status: "RUNNING",
-    allStatuses: "false",
+    statusFilterType: StatusFilterType.CURRENT,
     dateRange: allDateRange.toString(),
   };
   const {
@@ -65,13 +69,11 @@ export default function TasksSummary() {
     dateRangeDates,
     dateAfterFilter,
     dateBeforeFilter,
-    allStatuses,
+    statusFilterType,
     statusFilter,
     nodes,
     isSelectAllNodesChecked,
   } = useToolParamUpdater(UrlTypes.TasksSummary, username, defaultState);
-  const headerRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
   const lastFetchTimeRef = useRef<number>(Date.now());
   const [taskPinned, setTaskPinned] = useState(false);
   const [activeTool, setActiveTool] = useState<ToolType | undefined>(tool);
@@ -98,9 +100,8 @@ export default function TasksSummary() {
       users: userType === UserFilterType.CUSTOM ? (userFilter?.split(",") ?? []) : [],
       all_pools: isSelectAllPoolsChecked,
       pools: isSelectAllPoolsChecked ? [] : poolFilter ? poolFilter.split(",") : [],
-      statuses: allStatuses
-        ? Object.values(TaskSummaryStatusValues)
-        : (statusFilter?.split(",") as TaskSummaryStatusType[]),
+      statuses:
+        statusFilterType === StatusFilterType.CUSTOM ? statusFilter?.split(",") : getTaskStatusArray(statusFilterType),
       priority: priority,
       started_after: dateRangeDates?.fromDate?.toISOString(),
       started_before: dateRangeDates?.toDate?.toISOString(),
@@ -151,7 +152,7 @@ export default function TasksSummary() {
       dateRange,
       startedAfter,
       startedBefore,
-      allStatuses,
+      statusFilterType,
       statuses,
       nodes,
       isSelectAllNodesChecked,
@@ -166,7 +167,7 @@ export default function TasksSummary() {
       if (dateRange === customDateRange && (startedAfter === undefined || startedBefore === undefined)) {
         errors.push("Please select a date range");
       }
-      if (!allStatuses && statuses.length === 0) {
+      if (statusFilterType === StatusFilterType.CUSTOM && !statuses?.length) {
         errors.push("Please select at least one status");
       }
       if (!isSelectAllNodesChecked && nodes.length === 0) {
@@ -190,7 +191,7 @@ export default function TasksSummary() {
         workflowId: nameFilter ?? "",
         nodes: nodes ?? "",
         isSelectAllNodesChecked: isSelectAllNodesChecked ?? true,
-        allStatuses: allStatuses ?? true,
+        statusFilterType,
         statuses: statusFilter ?? "",
       }).length > 0
     ) {
@@ -210,7 +211,7 @@ export default function TasksSummary() {
     nodes,
     isSelectAllNodesChecked,
     updateUrl,
-    allStatuses,
+    statusFilterType,
     statusFilter,
   ]);
   const { setSafeTimeout } = useSafeTimeout();
@@ -266,60 +267,46 @@ export default function TasksSummary() {
 
   return (
     <>
-      <div
-        className="page-header mb-3"
-        ref={headerRef}
-      >
-        <h1>
-          {`${allStatuses ? "Current" : statusFilter}`} Tasks
-          {userType === UserFilterType.ALL
-            ? " for All Users"
-            : userFilter && userFilter.split(",").length === 1
-              ? ` for ${userFilter}`
-              : ""}
-        </h1>
-        <div className="flex flex-row gap-3">
-          <button
-            className={`btn ${showWF ? "btn-primary" : ""}`}
-            onClick={() => {
-              updateUrl({ showWF: !showWF });
-            }}
-          >
-            <OutlinedIcon name="work_outline" />
-            Workflows
-          </button>
-          <button
-            className={`btn ${showTotalResources ? "btn-primary" : ""}`}
-            onClick={() => {
-              setShowTotalResources(!showTotalResources);
-            }}
-          >
-            <OutlinedIcon name="memory" />
-            Total Resources
-          </button>
-          <button
-            className={`btn ${showFilters ? "btn-primary" : ""}`}
-            onClick={() => {
-              setShowFilters(!showFilters);
-            }}
-          >
-            <FilledIcon name="filter_list" />
-            Filters {filterCount > 0 ? `(${filterCount})` : ""}
-          </button>
-        </div>
+      <PageHeader>
+        <h2 className="grow capitalize">
+          {`${statusFilterType?.toString() ?? "Current"} Tasks
+          ${
+            userType === UserFilterType.ALL
+              ? " for All Users"
+              : userFilter && userFilter.split(",").length === 1
+                ? ` for ${userFilter}`
+                : ""
+          }`}
+        </h2>
+        <IconButton
+          className={`btn ${showTotalResources ? "btn-primary" : ""}`}
+          onClick={() => {
+            setShowTotalResources(!showTotalResources);
+          }}
+          icon="memory"
+          text="Total Resources"
+          aria-expanded={showTotalResources}
+          aria-haspopup="true"
+          aria-controls="total-resources"
+        />
+        <FilterButton
+          showFilters={showFilters}
+          setShowFilters={setShowFilters}
+          filterCount={filterCount}
+          aria-controls="tasks-filters"
+        />
+      </PageHeader>
+      <div className={`${gridClass} h-full w-full overflow-x-auto relative`}>
         <SlideOut
           id="tasks-filters"
           open={showFilters}
           onClose={() => setShowFilters(false)}
           className="w-100 border-t-0"
-          containerRef={headerRef}
-          top={headerRef.current?.getBoundingClientRect().top ?? 0}
-          dimBackground={false}
+          aria-label="Tasks Filter"
         >
           {/* By only adding it if showFilters is true, it will reset to url params if closed and reopened */}
           {showFilters && (
             <TasksFilters
-              statusValues={Object.values(TaskSummaryStatusValues)}
               selectedUsers={userFilter ?? ""}
               userType={userType}
               selectedPools={poolFilter}
@@ -330,9 +317,8 @@ export default function TasksSummary() {
               priority={priority}
               workflowId={nameFilter ?? ""}
               updateUrl={updateUrl}
-              defaults={defaultState}
               dateRange={dateRange}
-              allStatuses={allStatuses ?? true}
+              statusFilterType={statusFilterType}
               statuses={statusFilter ?? ""}
               nodes={nodes ?? ""}
               isSelectAllNodesChecked={isSelectAllNodesChecked ?? true}
@@ -343,14 +329,14 @@ export default function TasksSummary() {
           id="total-resources"
           open={showTotalResources}
           onClose={() => setShowTotalResources(false)}
-          containerRef={headerRef}
-          top={headerRef.current?.getBoundingClientRect().top ?? 0}
-          header={<h2>Total Resources</h2>}
-          dimBackground={false}
-          className="mr-30 border-t-0"
+          header="Total Resources"
+          className="mr-20 border-t-0"
         >
-          <div className="h-full w-full p-3 dag-details-body">
-            <dl className="grid-cols-2">
+          <div className="h-full w-full p-global dag-details-body">
+            <dl
+              className="grid-cols-2"
+              aria-labelledby="total-resources-header"
+            >
               <dt>Storage</dt>
               <dd className="text-right">
                 {Intl.NumberFormat("en-US", { style: "decimal" }).format(totalResources.Storage)}
@@ -370,11 +356,6 @@ export default function TasksSummary() {
             </dl>
           </div>
         </SlideOut>
-      </div>
-      <div
-        ref={containerRef}
-        className={`${gridClass} h-full w-full overflow-x-auto relative px-3 gap-3`}
-      >
         {error ? (
           <div className="h-full w-full">
             <PageError
@@ -400,7 +381,7 @@ export default function TasksSummary() {
                   href={`/workflows/${selectedWorkflowName}`}
                   target="_blank"
                   rel="noopener noreferrer"
-                  aria-label="Open in new tab"
+                  aria-label="Workflow Details - Open in new tab"
                 >
                   <span className="font-semibold">Workflow Details</span>
                   <FilledIcon name="open_in_new" />
@@ -421,14 +402,11 @@ export default function TasksSummary() {
               className="workflow-details-slideout border-t-0"
               headerClassName="brand-header"
               bodyClassName="dag-details-body"
-              containerRef={containerRef}
-              heightOffset={10}
             >
               {selectedWorkflowError ? (
                 <PageError
                   title="Error loading workflow"
                   errorMessage={selectedWorkflowError.message}
-                  subText={selectedWorkflowName}
                   size="md"
                 />
               ) : selectedWorkflow ? (
diff --git a/ui/src/app/tutorials/layout.tsx b/ui/src/app/tutorials/layout.tsx
new file mode 100644
index 00000000..51039819
--- /dev/null
+++ b/ui/src/app/tutorials/layout.tsx
@@ -0,0 +1,26 @@
+//SPDX-FileCopyrightText: Copyright (c) 2025 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+
+//Licensed under the Apache License, Version 2.0 (the "License");
+//you may not use this file except in compliance with the License.
+//You may obtain a copy of the License at
+
+//http://www.apache.org/licenses/LICENSE-2.0
+
+//Unless required by applicable law or agreed to in writing, software
+//distributed under the License is distributed on an "AS IS" BASIS,
+//WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//See the License for the specific language governing permissions and
+//limitations under the License.
+
+//SPDX-License-Identifier: Apache-2.0
+import { type PropsWithChildren } from "react";
+
+import { env } from "~/env.mjs";
+
+export const metadata = {
+  title: `${env.NEXT_PUBLIC_APP_NAME} Tutorials`,
+};
+
+export default function TutorialsLayout({ children }: PropsWithChildren) {
+  return children;
+}
diff --git a/ui/src/app/page.tsx b/ui/src/app/tutorials/page.tsx
similarity index 84%
rename from ui/src/app/page.tsx
rename to ui/src/app/tutorials/page.tsx
index d4d28834..da3914a2 100644
--- a/ui/src/app/page.tsx
+++ b/ui/src/app/tutorials/page.tsx
@@ -16,15 +16,12 @@
 import { Container } from "~/components/Container";
 import { HomepageCards } from "~/components/HomepageCards";
 import { HomepageHero } from "~/components/HomepageHero";
-import { Layout } from "~/components/Layout";
 
 export default function Dashboard() {
   return (
-    <Layout>
-      <Container>
-        <HomepageHero />
-        <HomepageCards />
-      </Container>
-    </Layout>
+    <Container>
+      <HomepageHero />
+      <HomepageCards />
+    </Container>
   );
 }
diff --git a/ui/src/app/workflows/[name]/page.tsx b/ui/src/app/workflows/[name]/page.tsx
index b61616d8..19bd30db 100644
--- a/ui/src/app/workflows/[name]/page.tsx
+++ b/ui/src/app/workflows/[name]/page.tsx
@@ -14,17 +14,21 @@
 
 //SPDX-License-Identifier: Apache-2.0
 "use client";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import Link from "next/link";
 import { ReactFlowProvider } from "reactflow";
 
 import { useAuth } from "~/components/AuthProvider";
+import { FilterButton } from "~/components/FilterButton";
 import { FilledIcon, OutlinedIcon } from "~/components/Icon";
+import { IconButton } from "~/components/IconButton";
 import { PageError } from "~/components/PageError";
+import PageHeader from "~/components/PageHeader";
 import { SlideOut } from "~/components/SlideOut";
 import { Spinner } from "~/components/Spinner";
 import StatusBadge from "~/components/StatusBadge";
+import { StatusFilterType } from "~/components/StatusFilter";
 import { TASK_PINNED_KEY, UrlTypes } from "~/components/StoreProvider";
 import { ViewToggleButton } from "~/components/ViewToggleButton";
 import { env } from "~/env.mjs";
@@ -43,8 +47,6 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
   const { username } = useAuth();
   const [taskPinned, setTaskPinned] = useState(false);
   const [workflowNameParts, setWorkflowNameParts] = useState<{ id: number; name: string } | undefined>(undefined);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const headerRef = useRef<HTMLDivElement>(null);
 
   const {
     updateUrl,
@@ -53,7 +55,7 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
     lines,
     view,
     statusFilter,
-    allStatuses,
+    statusFilterType,
     nameFilter,
     nodes,
     isSelectAllNodesChecked,
@@ -62,9 +64,10 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
     showWF,
     selectedTaskName,
     retryId,
-  } = useToolParamUpdater(UrlTypes.Workflows, username, { showWF: "true", allStatuses: "true", status: "" });
+  } = useToolParamUpdater(UrlTypes.Workflows, username, { showWF: "true", statusFilterType: StatusFilterType.ALL });
   const selectedWorkflow = useWorkflow(params.name, true, 2);
   const [selectedTask, setSelectedTask] = useState<Task | undefined>(undefined);
+  const [selectedTaskIndex, setSelectedTaskIndex] = useState<number | undefined>(undefined);
   const [activeTool, setActiveTool] = useState<ToolType | undefined>(undefined);
   const [showFilters, setShowFilters] = useState(false);
 
@@ -76,6 +79,33 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
     [selectedWorkflow.data],
   );
 
+  const flatTasks = useMemo(() => {
+    return (selectedWorkflow.data?.groups ?? []).flatMap((group) => group.tasks);
+  }, [selectedWorkflow.data]);
+
+  const forceSingleTaskView = useMemo(() => {
+    return flatTasks.length === 1;
+  }, [flatTasks]);
+
+  useEffect(() => {
+    if (forceSingleTaskView) {
+      updateUrl({ view: ViewType.SingleTask });
+    } else if (!view) {
+      updateUrl({ view: ViewType.List });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [forceSingleTaskView, view]);
+
+  useEffect(() => {
+    if (view === ViewType.SingleTask && (!selectedTaskName || retryId === undefined)) {
+      const task = selectedWorkflow.data?.groups?.[0]?.tasks?.[0];
+      if (task) {
+        updateUrl({ task: task.name, retry_id: task.retry_id });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [view, selectedTaskName, retryId, selectedWorkflow.data]);
+
   // Initialize localStorage values after component mounts
   useEffect(() => {
     try {
@@ -107,30 +137,56 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
   }, [selectedWorkflow.data, tool]);
 
   useEffect(() => {
-    if (selectedTaskName) {
-      setSelectedTask(
-        selectedWorkflow.data?.groups
-          ?.find((g) =>
-            g.tasks.some((t) => t.name === selectedTaskName && (retryId === undefined || t.retry_id === retryId)),
-          )
-          ?.tasks.find((t) => t.name === selectedTaskName && (retryId === undefined || t.retry_id === retryId)),
-      );
+    if (selectedTaskName && retryId !== undefined) {
+      const taskIndex = flatTasks.findIndex((t) => t.name === selectedTaskName && t.retry_id === retryId);
+
+      setSelectedTask(taskIndex === undefined ? undefined : flatTasks[taskIndex]);
+      setSelectedTaskIndex(taskIndex);
     } else {
       setSelectedTask(undefined);
+      setSelectedTaskIndex(undefined);
+    }
+  }, [flatTasks, selectedTaskName, retryId]);
+
+  const nextTask = useMemo(() => {
+    if (selectedTaskIndex !== undefined && selectedTaskIndex < flatTasks.length - 1) {
+      return flatTasks[selectedTaskIndex + 1];
+    }
+    return undefined;
+  }, [selectedTaskIndex, flatTasks]);
+
+  const previousTask = useMemo(() => {
+    if (selectedTaskIndex !== undefined && selectedTaskIndex > 0) {
+      return flatTasks[selectedTaskIndex - 1];
+    }
+    return undefined;
+  }, [selectedTaskIndex, flatTasks]);
+
+  const onNextTask = useCallback(() => {
+    if (nextTask) {
+      updateUrl({ task: nextTask.name, retry_id: nextTask.retry_id });
+    }
+  }, [nextTask, updateUrl]);
+
+  const onPreviousTask = useCallback(() => {
+    if (previousTask) {
+      updateUrl({ task: previousTask.name, retry_id: previousTask.retry_id });
     }
-  }, [selectedWorkflow?.data, selectedTaskName, retryId]);
+  }, [previousTask, updateUrl]);
 
   const gridClass = useMemo(() => {
-    if (showWF && selectedTask && taskPinned) {
+    if (view === ViewType.SingleTask) {
+      return "grid grid-cols-[1fr_auto_1fr] p-global gap-1";
+    } else if (showWF && selectedTask && taskPinned) {
       return "grid grid-cols-[auto_1fr_auto]";
     } else if (showWF) {
-      return "grid grid-cols-[auto_1fr]";
+      return "grid grid-cols-[25vw_75vw]";
     } else if (taskPinned && selectedTask) {
       return "grid grid-cols-[1fr_auto]";
     } else {
       return "flex flex-row";
     }
-  }, [showWF, selectedTask, taskPinned]);
+  }, [showWF, selectedTask, taskPinned, view]);
 
   const verbose = useMemo(() => {
     const tasks = (selectedWorkflow.data?.groups ?? []).flatMap((group) => group.tasks);
@@ -142,7 +198,7 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
     if (!props.allNodes && props.nodes.length === 0) {
       errors.push("Please select at least one node");
     }
-    if (!props.allStatuses && props.statuses.length === 0) {
+    if (props.statusFilterType === StatusFilterType.CUSTOM && !props.statuses?.length) {
       errors.push("Please select at least one status");
     }
     return errors;
@@ -157,7 +213,7 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
     );
   }
 
-  if (!selectedWorkflow.data) {
+  if (!selectedWorkflow.data || !view) {
     return (
       <div className="h-full flex justify-center items-center">
         <Spinner
@@ -170,28 +226,11 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
 
   return (
     <>
-      <div
-        className="page-header mb-3 flex items-center text-center gap-3"
-        ref={headerRef}
-      >
-        <button
-          className={`btn ${showWF ? "btn-primary" : ""}`}
-          onClick={() => {
-            updateUrl({ showWF: !showWF });
-          }}
-          aria-pressed={showWF}
-        >
-          <StatusBadge
-            status={selectedWorkflow.data.status}
-            compact
-          />
-          Workflow
-          <FilledIcon name="more_vert" />
-        </button>
-        <div className="flex items-center gap-1">
+      <PageHeader>
+        <div className="flex items-center justify-center grow overflow-x-hidden">
           {workflowNameParts && workflowNameParts.id > 1 ? (
             <Link
-              className="no-underline"
+              className="no-underline p-0 m-1"
               href={`/workflows/${workflowNameParts.name}-${workflowNameParts.id - 1}`}
               title="Previous Run"
             >
@@ -203,13 +242,13 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
           ) : (
             <OutlinedIcon
               name="keyboard_double_arrow_left"
-              className="text-lg! opacity-50 mx-1"
+              className="text-lg! opacity-50 m-1"
             />
           )}
-          <h1>{params.name}</h1>
+          <h2>{params.name}</h2>
           {workflowNameParts && (
             <Link
-              className="no-underline"
+              className="no-underline p-0 m-1"
               href={`/workflows/${workflowNameParts.name}-${workflowNameParts.id + 1}`}
               title="Next Run"
             >
@@ -220,41 +259,79 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
             </Link>
           )}
         </div>
-        <div className="flex items-center gap-3">
-          <fieldset
-            className="flex flex-row gap-3"
-            aria-label="View Type"
-          >
-            <ViewToggleButton
-              name="list"
-              checked={view === ViewType.List}
-              onChange={() => updateUrl({ view: ViewType.List })}
+        {!forceSingleTaskView && (
+          <>
+            <IconButton
+              icon="work_outline"
+              text="Workflow"
+              className={`relative btn ${showWF ? "btn-primary" : ""}`}
+              onClick={() => {
+                updateUrl({ showWF: !showWF });
+              }}
+              aria-pressed={showWF}
+              disabled={view === ViewType.SingleTask}
             >
-              <FilledIcon name="list" />
-              List
-            </ViewToggleButton>
-            <ViewToggleButton
-              name="graph"
-              checked={view === ViewType.Graph}
-              onChange={() => updateUrl({ view: ViewType.Graph })}
+              <StatusBadge
+                className="tag-filter right-[-0.75rem] top-[-0.35rem]"
+                status={selectedWorkflow.data.status}
+                compact
+              />
+            </IconButton>
+            <fieldset
+              className="toggle-group"
+              aria-label="View Type"
             >
-              <FilledIcon name="border_clear" />
-              Graph
-            </ViewToggleButton>
-          </fieldset>
-          <button
-            className={`btn ${showFilters ? "btn-primary" : ""}`}
-            onClick={() => {
-              setShowFilters(!showFilters);
-            }}
-          >
-            <FilledIcon name="filter_list" />
-            Filters {filterCount > 0 ? `(${filterCount})` : ""}
-          </button>
-        </div>
+              <ViewToggleButton
+                name="taskViewType"
+                checked={view === ViewType.SingleTask}
+                onChange={() => updateUrl({ view: ViewType.SingleTask, showWF: true })}
+              >
+                <FilledIcon name="task" />
+                <span
+                  className="hidden lg:block"
+                  aria-label="Single Task"
+                >
+                  Task
+                </span>
+              </ViewToggleButton>
+              <ViewToggleButton
+                name="taskViewType"
+                checked={view === ViewType.List}
+                onChange={() => updateUrl({ view: ViewType.List })}
+              >
+                <FilledIcon name="list" />
+                <span
+                  className="hidden lg:block"
+                  aria-label="List"
+                >
+                  List
+                </span>
+              </ViewToggleButton>
+              <ViewToggleButton
+                name="taskViewType"
+                checked={view === ViewType.Graph}
+                onChange={() => updateUrl({ view: ViewType.Graph })}
+              >
+                <FilledIcon name="border_clear" />
+                <span
+                  className="hidden lg:block"
+                  aria-label="Graph"
+                >
+                  Graph
+                </span>
+              </ViewToggleButton>
+            </fieldset>
+            <FilterButton
+              showFilters={showFilters}
+              setShowFilters={setShowFilters}
+              filterCount={filterCount}
+              aria-controls="tasks-filters"
+            />
+          </>
+        )}
+      </PageHeader>
+      <div className={`${gridClass} h-full w-full overflow-x-auto relative`}>
         <SlideOut
-          top={headerRef.current?.offsetHeight ?? 0}
-          containerRef={headerRef}
           id="tasks-filter"
           open={showFilters}
           onClose={() => {
@@ -262,43 +339,38 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
           }}
           aria-label="Tasks Filter"
           className="z-20 border-t-0 w-100"
-          dimBackground={false}
         >
           <TasksFilter
             name={nameFilter}
             nodes={nodes}
             allNodes={isSelectAllNodesChecked ?? true}
             statuses={statusFilter ?? ""}
-            allStatuses={allStatuses ?? true}
+            statusFilterType={statusFilterType}
             pod_ip={podIp}
             availableNodes={availableNodes}
             updateUrl={updateUrl}
             validateFilters={validateFilters}
           />
         </SlideOut>
-      </div>
-      <div
-        ref={containerRef}
-        className={`${gridClass} h-full w-full overflow-x-auto relative px-3 gap-3`}
-      >
         {showWF && (
           <div
-            className="workflow-details-slideout flex flex-col relative overflow-y-auto body-component"
-            style={{
-              maxHeight: `calc(100vh - ${10 + (containerRef?.current?.getBoundingClientRect()?.top ?? 0)}px)`,
-            }}
+            className="flex flex-col relative body-component workflow-details-slideout"
+            role="region"
+            aria-labelledby="workflow-details-header"
           >
             <div className={`popup-header sticky top-0 z-10 brand-header`}>
-              <h2>Workflow Details</h2>
-              <button
-                className="btn btn-action"
-                aria-label="Close"
-                onClick={() => {
-                  updateUrl({ showWF: false });
-                }}
-              >
-                <OutlinedIcon name="close" />
-              </button>
+              <h2 id="workflow-details-header">Workflow Details</h2>
+              {view !== ViewType.SingleTask && (
+                <button
+                  className="btn btn-action"
+                  aria-label="Close Workflow Details"
+                  onClick={() => {
+                    updateUrl({ showWF: false });
+                  }}
+                >
+                  <OutlinedIcon name="close" />
+                </button>
+              )}
             </div>
             <div className="dag-details-body">
               <WorkflowDetails
@@ -308,8 +380,8 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
             </div>
           </div>
         )}
-        <div className="h-full w-full">
-          <div className={`h-full w-full p-3 ${view === ViewType.Graph ? "block" : "hidden"}`}>
+        <div className="h-full w-full overflow-x-auto">
+          <div className={`h-full w-full ${view === ViewType.Graph ? "block p-1" : "hidden"}`}>
             {selectedWorkflow.data?.groups?.length > 0 ? (
               <ReactFlowProvider>
                 <DirectedAcyclicGraph
@@ -324,7 +396,7 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
               <div className="flex items-center justify-center h-full w-full">
                 <p
                   className="text-center"
-                  aria-live="polite"
+                  role="alert"
                 >
                   No tasks found
                 </p>
@@ -338,7 +410,7 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
               nodes={nodes}
               allNodes={isSelectAllNodesChecked}
               statuses={statusFilter}
-              allStatuses={allStatuses}
+              statusFilterType={statusFilterType}
               pod_ip={podIp}
               selectedTask={view === ViewType.List ? selectedTask : undefined}
               visible={view === ViewType.List}
@@ -348,10 +420,9 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
           </div>
         </div>
         <SlideOut
-          canPin
-          containerRef={containerRef}
-          heightOffset={10}
-          pinned={taskPinned}
+          canClose={view !== ViewType.SingleTask}
+          canPin={view !== ViewType.SingleTask}
+          pinned={view === ViewType.SingleTask || taskPinned}
           paused={!!activeTool}
           onPinChange={(pinned) => {
             setTaskPinned(pinned);
@@ -359,6 +430,7 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
           }}
           id={"task-details"}
           header="Task Details"
+          aria-label={`Task Details for ${selectedTaskName}`}
           open={!!selectedTask}
           onClose={() => {
             updateUrl({ task: null });
@@ -371,6 +443,11 @@ export default function WorkflowOverviewPage({ params }: WorkflowSlugParams) {
             <TaskDetails
               task={selectedTask}
               updateUrl={updateUrl}
+              hasNavigation={view === ViewType.SingleTask && !forceSingleTaskView}
+              onNext={onNextTask}
+              onPrevious={onPreviousTask}
+              hasNext={!!nextTask}
+              hasPrevious={!!previousTask}
             />
           )}
         </SlideOut>
diff --git a/ui/src/app/workflows/components/CancelWorkflow.tsx b/ui/src/app/workflows/components/CancelWorkflow.tsx
index 1567ac88..30476197 100644
--- a/ui/src/app/workflows/components/CancelWorkflow.tsx
+++ b/ui/src/app/workflows/components/CancelWorkflow.tsx
@@ -66,7 +66,7 @@ export const CancelWorkflow = ({
 
   return (
     <div className="w-full h-full flex flex-col justify-between">
-      <div className="flex flex-col gap-3 p-3">
+      <div className="flex flex-col gap-global p-global">
         <p>
           Are you sure you want to cancel workflow <strong>{name}</strong>?
         </p>
@@ -79,6 +79,7 @@ export const CancelWorkflow = ({
           disabled={showSuccess || !!error}
         />
         <Switch
+          id="force-cancel"
           className="w-full whitespace-nowrap"
           size="small"
           label="Force Cancel"
@@ -88,16 +89,18 @@ export const CancelWorkflow = ({
         />
       </div>
       <div className="flex flex-col w-full h-full">
-        {showSuccess ? (
-          <InlineBanner status="success">Workflow canceled</InlineBanner>
-        ) : error ? (
-          <InlineBanner status="error">
-            <div className="flex flex-col gap-2">
+        <InlineBanner status={showSuccess ? "success" : error ? "error" : "none"}>
+          {showSuccess ? (
+            "Workflow canceled"
+          ) : error ? (
+            <div className="flex flex-col">
               <p>Error canceling workflow</p>
               <p>{error}</p>
             </div>
-          </InlineBanner>
-        ) : null}
+          ) : (
+            ""
+          )}
+        </InlineBanner>
         <div className="modal-footer">
           {!showSuccess && !error && (
             <button
diff --git a/ui/src/app/workflows/components/ExecTerminal.tsx b/ui/src/app/workflows/components/ExecTerminal.tsx
index 6cd32c5a..7b75f959 100644
--- a/ui/src/app/workflows/components/ExecTerminal.tsx
+++ b/ui/src/app/workflows/components/ExecTerminal.tsx
@@ -270,7 +270,7 @@ const ExecTerminal: FC<ExecTerminalProps> = ({
             <div ref={divRef} />
           </div>
           <form onSubmit={onSearch}>
-            <div className="grid grid-cols-[1fr_auto] p-3 gap-3">
+            <div className="grid grid-cols-[1fr_auto] p-global gap-global">
               <TextInput
                 id="terminal-search"
                 autoFocus
@@ -281,7 +281,7 @@ const ExecTerminal: FC<ExecTerminalProps> = ({
                 className="w-full flex-1"
                 type="search"
               />
-              <div className="flex flex-row gap-3">
+              <div className="flex flex-row gap-global">
                 <button
                   className="btn btn-primary"
                   type="submit"
diff --git a/ui/src/app/workflows/components/LogFilter.tsx b/ui/src/app/workflows/components/LogFilter.tsx
index 109ad30a..86c315ff 100644
--- a/ui/src/app/workflows/components/LogFilter.tsx
+++ b/ui/src/app/workflows/components/LogFilter.tsx
@@ -120,7 +120,6 @@ const LogFilter = ({
       <Select
         id="log-select"
         aria-label="Logs"
-        className="rounded-sm"
         value={formatTaskID(
           task ?? WORKFLOW_KEY,
           retry_id,
@@ -145,12 +144,15 @@ const LogFilter = ({
       </Select>
       <button
         ref={buttonRef}
-        className={`btn btn-dropdown ${open ? "border-b-2 border-b-brand" : ""}`}
+        className="btn btn-dropdown"
         onClick={() => {
           if (!open) {
             setOpen(true);
           }
         }}
+        aria-expanded={open}
+        aria-haspopup="true"
+        aria-controls="log-filter"
       >
         Lines
         <OutlinedIcon name="keyboard_arrow_down" />
@@ -160,13 +162,13 @@ const LogFilter = ({
         open={open}
         onClose={() => setOpen(false)}
         position="left"
-        top={(buttonRef.current?.getBoundingClientRect().height ?? 0) + 8}
-        left={(buttonRef.current?.getBoundingClientRect().left ?? 20) - 20}
-        className="p-3 rounded-md"
+        top={(buttonRef.current?.getBoundingClientRect().bottom ?? 0) - 2}
+        left={buttonRef.current?.getBoundingClientRect().left ?? 0}
+        bodyClassName="p-global"
         dimBackground={false}
       >
         <form onSubmit={onSubmit}>
-          <div className="flex flex-row gap-3">
+          <div className="flex flex-row gap-global">
             <div className="flex flex-row">
               <TextInput
                 id="lines"
@@ -191,7 +193,7 @@ const LogFilter = ({
             </div>
             <button
               type="submit"
-              className="btn btn-primary h-8 mt-4"
+              className="btn btn-primary h-8 mt-5"
             >
               <OutlinedIcon name="refresh" />
               Refresh
diff --git a/ui/src/app/workflows/components/LogPopupHeader.tsx b/ui/src/app/workflows/components/LogPopupHeader.tsx
index fe0b3559..76a72a67 100644
--- a/ui/src/app/workflows/components/LogPopupHeader.tsx
+++ b/ui/src/app/workflows/components/LogPopupHeader.tsx
@@ -24,7 +24,7 @@ interface LogPopupHeaderProps {
 
 const LogPopupHeader = ({ children, href }: LogPopupHeaderProps) => {
   return (
-    <div className="flex flex-row gap-3 items-center">
+    <div className="flex flex-row gap-global items-center">
       {children}
       {href && (
         <a
diff --git a/ui/src/app/workflows/components/PortForward.tsx b/ui/src/app/workflows/components/PortForward.tsx
index 75c1b870..3f0b8793 100644
--- a/ui/src/app/workflows/components/PortForward.tsx
+++ b/ui/src/app/workflows/components/PortForward.tsx
@@ -109,9 +109,9 @@ export const PortForward = ({ workflow, selectedTask }: { workflow: WorkflowResp
 
   return (
     <div className="flex flex-col h-full w-full">
-      {error && <InlineBanner status="error">{error}</InlineBanner>}
+      <InlineBanner status={error ? "error" : "none"}>{error}</InlineBanner>
       <form onSubmit={handleSubmit}>
-        <div className="flex flex-row gap-3 p-3">
+        <div className="flex flex-row gap-global p-global">
           <Select
             id="task"
             value={task}
@@ -148,7 +148,7 @@ export const PortForward = ({ workflow, selectedTask }: { workflow: WorkflowResp
             errorText={portError}
           />
           <button
-            className="btn btn-primary mt-4 mb-5"
+            className="btn btn-primary mt-5 mb-5"
             type="submit"
           >
             Start
diff --git a/ui/src/app/workflows/components/ShellPicker.tsx b/ui/src/app/workflows/components/ShellPicker.tsx
index bff9e013..87770118 100644
--- a/ui/src/app/workflows/components/ShellPicker.tsx
+++ b/ui/src/app/workflows/components/ShellPicker.tsx
@@ -62,9 +62,9 @@ export const ShellPicker = ({
 
   return (
     <div className="flex flex-col h-full w-full">
-      {error && <InlineBanner status="error">{error}</InlineBanner>}
+      <InlineBanner status={error ? "error" : "none"}>{error}</InlineBanner>
       <form onSubmit={handleSubmit}>
-        <div className="flex flex-row gap-3 p-3">
+        <div className="flex flex-row gap-global p-global">
           <Select
             id="task"
             value={task}
@@ -99,7 +99,7 @@ export const ShellPicker = ({
             errorText={cmdError}
           />
           <button
-            className="btn btn-primary mt-4 mb-5"
+            className="btn btn-primary mt-5 mb-5"
             type="submit"
           >
             Start
diff --git a/ui/src/app/workflows/components/StatusFilter.tsx b/ui/src/app/workflows/components/StatusFilter.tsx
new file mode 100644
index 00000000..68b91fa6
--- /dev/null
+++ b/ui/src/app/workflows/components/StatusFilter.tsx
@@ -0,0 +1,91 @@
+//SPDX-FileCopyrightText: Copyright (c) 2025 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+
+//Licensed under the Apache License, Version 2.0 (the "License");
+//you may not use this file except in compliance with the License.
+//You may obtain a copy of the License at
+
+//http://www.apache.org/licenses/LICENSE-2.0
+
+//Unless required by applicable law or agreed to in writing, software
+//distributed under the License is distributed on an "AS IS" BASIS,
+//WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//See the License for the specific language governing permissions and
+//limitations under the License.
+
+//SPDX-License-Identifier: Apache-2.0
+import { CheckboxWithLabel } from "~/components/Checkbox";
+import { StatusFilter as StatusFilterCommon, StatusFilterType } from "~/components/StatusFilter";
+import { WorkflowStatusValues, type WorkflowStatusType } from "~/models";
+
+export const getMapFromStatusArray = (statusArray: string[]) => {
+  return new Map(WorkflowStatusValues.map((value) => [value, statusArray.includes(value.toString())]));
+};
+
+export const getWorkflowStatusArray = (
+  statusFilterType?: StatusFilterType,
+  statusMap?: Map<WorkflowStatusType, boolean>,
+): string[] => {
+  if (statusFilterType === StatusFilterType.ALL) {
+    return [...WorkflowStatusValues];
+  }
+
+  if (statusFilterType === StatusFilterType.CURRENT) {
+    return ["RUNNING", "WAITING", "PENDING"];
+  }
+
+  if (statusFilterType === StatusFilterType.COMPLETED) {
+    return ["COMPLETED"];
+  }
+
+  if (statusFilterType === StatusFilterType.FAILED) {
+    return WorkflowStatusValues.filter((status) => status.startsWith("FAILED"));
+  }
+
+  if (!statusFilterType || !statusMap) {
+    return [];
+  }
+
+  return Array.from(statusMap.entries())
+    .filter(([_, enabled]) => enabled)
+    .map(([status]) => status);
+};
+
+export const StatusFilter = ({
+  statusMap,
+  setStatusMap,
+  className,
+  statusFilterType,
+  setStatusFilterType,
+}: {
+  statusMap: Map<WorkflowStatusType, boolean>;
+  setStatusMap: (map: Map<WorkflowStatusType, boolean>) => void;
+  className?: string;
+  statusFilterType?: StatusFilterType;
+  setStatusFilterType: (statusFilterType: StatusFilterType) => void;
+}) => {
+  return (
+    <div className={className}>
+      <StatusFilterCommon
+        statusFilterType={statusFilterType}
+        setStatusFilterType={setStatusFilterType}
+      />
+      {statusFilterType === StatusFilterType.CUSTOM &&
+        WorkflowStatusValues.map((name) => {
+          const checked = Boolean(statusMap.get(name));
+          return (
+            <CheckboxWithLabel
+              key={name}
+              label={name}
+              checked={checked}
+              containerClassName="p-1"
+              onChange={(event) => {
+                const newMap = new Map(statusMap);
+                newMap.set(name, Boolean(event.target.checked));
+                setStatusMap(newMap);
+              }}
+            />
+          );
+        })}
+    </div>
+  );
+};
diff --git a/ui/src/app/workflows/components/TaskActions.tsx b/ui/src/app/workflows/components/TaskActions.tsx
index 250215f9..722c27af 100644
--- a/ui/src/app/workflows/components/TaskActions.tsx
+++ b/ui/src/app/workflows/components/TaskActions.tsx
@@ -43,10 +43,12 @@ export default function TaskActions({
     <div
       className={`dag-actions body-footer ${className}`}
       aria-label="Task Actions"
+      id="task-actions-list"
     >
       <div
         className="flex flex-col gap-1"
         role="list"
+        aria-labelledby="task-actions-list"
       >
         {task.logs && (
           <button
@@ -82,6 +84,7 @@ export default function TaskActions({
       <div
         className="flex flex-col gap-1"
         role="list"
+        aria-labelledby="task-actions-list"
       >
         {task.dashboard_url && (
           <a
diff --git a/ui/src/app/workflows/components/TaskDetails.tsx b/ui/src/app/workflows/components/TaskDetails.tsx
index 069cad41..eef56940 100644
--- a/ui/src/app/workflows/components/TaskDetails.tsx
+++ b/ui/src/app/workflows/components/TaskDetails.tsx
@@ -18,6 +18,7 @@ import React from "react";
 
 import Link from "next/link";
 
+import { OutlinedIcon } from "~/components/Icon";
 import { Colors, Tag } from "~/components/Tag";
 import { type Task } from "~/models";
 import { useRuntimeEnv } from "~/runtime-env";
@@ -29,12 +30,25 @@ import { type ToolParamUpdaterProps, ToolType } from "../hooks/useToolParamUpdat
 
 interface TaskDetailsProps {
   task: Task;
-  showTaskName?: boolean;
   updateUrl: (params: ToolParamUpdaterProps) => void;
   extraData?: Record<string, React.ReactNode>;
+  hasNavigation?: boolean;
+  onNext?: () => void;
+  onPrevious?: () => void;
+  hasNext?: boolean;
+  hasPrevious?: boolean;
 }
 
-const TaskDetails = ({ task, showTaskName = true, updateUrl, extraData }: TaskDetailsProps) => {
+const TaskDetails = ({
+  task,
+  updateUrl,
+  extraData,
+  hasNavigation,
+  onNext,
+  onPrevious,
+  hasNext,
+  hasPrevious,
+}: TaskDetailsProps) => {
   const runtimeEnv = useRuntimeEnv();
   const [processingDuration, setProcessingDuration] = useState<string | undefined>(undefined);
   const [schedulingDuration, setSchedulingDuration] = useState<string | undefined>(undefined);
@@ -49,128 +63,168 @@ const TaskDetails = ({ task, showTaskName = true, updateUrl, extraData }: TaskDe
   }, [task]);
 
   return (
-    <>
-      <div>
-        {showTaskName && <p className="font-semibold body-header p-3 text-center">{task.name}</p>}
-        <div className="p-3 w-full flex flex-col">
-          <dl>
-            <dt>Status</dt>
-            <dd>
-              <TaskStatusInfo status={task.status} />
-            </dd>
-            <dt>Lead</dt>
-            <dd>{task.lead ? "True" : "False"}</dd>
-            {task.retry_id !== null && (
-              <>
-                <dt>Retry ID</dt>
-                <dd>{task.retry_id}</dd>
-              </>
+    <div className="h-full w-full flex flex-col">
+      <div className="body-header flex flex-row items-center justify-between">
+        {!hasNavigation ? (
+          <p className="font-semibold p-global text-center w-full">{task.name}</p>
+        ) : (
+          <>
+            {hasPrevious ? (
+              <button
+                className="no-underline p-0 m-1"
+                onClick={onPrevious}
+                title="Previous Task"
+              >
+                <OutlinedIcon
+                  name="keyboard_double_arrow_left"
+                  className="text-lg!"
+                />
+              </button>
+            ) : (
+              <OutlinedIcon
+                name="keyboard_double_arrow_left"
+                className="text-lg! opacity-50 m-1"
+              />
             )}
-            {task.node_name && (
-              <>
-                <dt>Node</dt>
-                <dd>
-                  <button
-                    className="tag-container"
-                    onClick={() => {
-                      updateUrl({
-                        task: task.name,
-                        retry_id: task.retry_id,
-                        tool: ToolType.Nodes,
-                      });
-                    }}
-                  >
-                    <Tag color={Colors.platform}>{task.node_name}</Tag>
-                  </button>
-                </dd>
-              </>
+            <p className="font-semibold">{task.name}</p>
+            {hasNext ? (
+              <button
+                className="no-underline p-0 m-1"
+                onClick={onNext}
+                title="Next Task"
+              >
+                <OutlinedIcon
+                  name="keyboard_double_arrow_right"
+                  className="text-lg!"
+                />
+              </button>
+            ) : (
+              <OutlinedIcon
+                name="keyboard_double_arrow_right"
+                className="text-lg! opacity-50 m-1"
+              />
             )}
-            {task.pod_name && (
-              <>
-                <dt>Pod Name</dt>
-                <dd>{task.pod_name}</dd>
-              </>
-            )}
-            {task.pod_ip && (
-              <>
-                <dt>Pod IP</dt>
-                <dd>{task.pod_ip}</dd>
-              </>
-            )}
-            {processingDuration && (
-              <>
-                <dt>Processing Time</dt>
-                <dd>{processingDuration}</dd>
-              </>
-            )}
-            {schedulingDuration && (
-              <>
-                <dt>Scheduling Time</dt>
-                <dd>{schedulingDuration}</dd>
-              </>
-            )}
-            {initializingDuration && (
-              <>
-                <dt>Initializing Time</dt>
-                <dd>{initializingDuration}</dd>
-              </>
-            )}
-            {runningDuration && (
-              <>
-                <dt>Run Time</dt>
-                <dd>{runningDuration}</dd>
-              </>
-            )}
-            {task.start_time && (
-              <>
-                <dt>Start</dt>
-                <dd>{convertToReadableTimezone(task.start_time)}</dd>
-              </>
-            )}
-            {task.end_time && (
-              <>
-                <dt>End</dt>
-                <dd>{convertToReadableTimezone(task.end_time)}</dd>
-              </>
-            )}
-            {task.exit_code !== null && (
-              <>
-                <dt>Exit Code</dt>
-                <dd>
-                  <Link
-                    color={task.exit_code === 0 ? Colors.tag : Colors.error}
-                    href={`${runtimeEnv.DOCS_BASE_URL}workflows/exit_codes.html`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="tag-container"
-                  >
-                    <Tag color={task.exit_code === 0 ? Colors.tag : Colors.error}>{task.exit_code}</Tag>
-                  </Link>
-                </dd>
-              </>
-            )}
-            {extraData &&
-              Object.entries(extraData).map(([key, value]) => (
-                <React.Fragment key={key}>
-                  <dt>{key}</dt>
-                  <dd>{value}</dd>
-                </React.Fragment>
-              ))}
-          </dl>
-          {task.failure_message && (
-            <div className="mt-2">
-              <label>Failure Reason</label>
-              <p className="break-words">{task.failure_message}</p>
-            </div>
+          </>
+        )}
+      </div>
+      <div className="p-global w-full flex flex-col grow">
+        <dl aria-label={task.name}>
+          <dt>Status</dt>
+          <dd>
+            <TaskStatusInfo status={task.status} />
+          </dd>
+          <dt>Lead</dt>
+          <dd>{task.lead ? "True" : "False"}</dd>
+          {task.retry_id !== null && (
+            <>
+              <dt>Retry ID</dt>
+              <dd>{task.retry_id}</dd>
+            </>
+          )}
+          {task.node_name && (
+            <>
+              <dt>Node</dt>
+              <dd>
+                <button
+                  className="tag-container"
+                  onClick={() => {
+                    updateUrl({
+                      task: task.name,
+                      retry_id: task.retry_id,
+                      tool: ToolType.Nodes,
+                    });
+                  }}
+                >
+                  <Tag color={Colors.platform}>{task.node_name}</Tag>
+                </button>
+              </dd>
+            </>
+          )}
+          {task.pod_name && (
+            <>
+              <dt>Pod Name</dt>
+              <dd>{task.pod_name}</dd>
+            </>
+          )}
+          {task.pod_ip && (
+            <>
+              <dt>Pod IP</dt>
+              <dd>{task.pod_ip}</dd>
+            </>
+          )}
+          {processingDuration && (
+            <>
+              <dt>Processing Time</dt>
+              <dd>{processingDuration}</dd>
+            </>
+          )}
+          {schedulingDuration && (
+            <>
+              <dt>Scheduling Time</dt>
+              <dd>{schedulingDuration}</dd>
+            </>
+          )}
+          {initializingDuration && (
+            <>
+              <dt>Initializing Time</dt>
+              <dd>{initializingDuration}</dd>
+            </>
+          )}
+          {runningDuration && (
+            <>
+              <dt>Run Time</dt>
+              <dd>{runningDuration}</dd>
+            </>
+          )}
+          {task.start_time && (
+            <>
+              <dt>Start</dt>
+              <dd>{convertToReadableTimezone(task.start_time)}</dd>
+            </>
+          )}
+          {task.end_time && (
+            <>
+              <dt>End</dt>
+              <dd>{convertToReadableTimezone(task.end_time)}</dd>
+            </>
+          )}
+          {task.exit_code !== null && (
+            <>
+              <dt>Exit Code</dt>
+              <dd>
+                <Link
+                  color={task.exit_code === 0 ? Colors.tag : Colors.error}
+                  href={`${runtimeEnv.DOCS_BASE_URL}workflows/exit_codes.html`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="tag-container"
+                >
+                  <Tag color={task.exit_code === 0 ? Colors.tag : Colors.error}>{task.exit_code}</Tag>
+                </Link>
+              </dd>
+            </>
           )}
-        </div>
+          {extraData &&
+            Object.entries(extraData).map(([key, value]) => (
+              <React.Fragment key={key}>
+                <dt>{key}</dt>
+                <dd>{value}</dd>
+              </React.Fragment>
+            ))}
+        </dl>
+        {task.failure_message && (
+          <div className="mt-2">
+            <label>Failure Reason</label>
+            <p className="break-words">{task.failure_message}</p>
+          </div>
+        )}
       </div>
       <TaskActions
         task={task}
         className="lg:sticky lg:bottom-0"
         updateUrl={updateUrl}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/ui/src/app/workflows/components/TaskTableRowAction.tsx b/ui/src/app/workflows/components/TaskTableRowAction.tsx
index 92916336..23515290 100644
--- a/ui/src/app/workflows/components/TaskTableRowAction.tsx
+++ b/ui/src/app/workflows/components/TaskTableRowAction.tsx
@@ -13,7 +13,7 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { useRef, useEffect } from "react";
+import { useRef } from "react";
 
 import { Tag, TagSizes, Colors } from "~/components/Tag";
 import { formatForWrapping } from "~/utils/string";
@@ -21,6 +21,7 @@ import { formatForWrapping } from "~/utils/string";
 import { type ToolParamUpdaterProps } from "../hooks/useToolParamUpdater";
 
 interface TaskTableRowActionProps {
+  id: string;
   name: string;
   retry_id: number | null;
   lead: boolean;
@@ -28,10 +29,10 @@ interface TaskTableRowActionProps {
   verbose?: boolean;
   updateUrl: (params: ToolParamUpdaterProps) => void;
   extraParams?: Record<string, string>;
-  disableScrollIntoView?: boolean;
 }
 
 export const TaskTableRowAction = ({
+  id,
   name,
   retry_id,
   lead,
@@ -39,18 +40,12 @@ export const TaskTableRowAction = ({
   verbose,
   updateUrl,
   extraParams,
-  disableScrollIntoView = false,
 }: TaskTableRowActionProps) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
 
-  useEffect(() => {
-    if (buttonRef.current && selected && !disableScrollIntoView) {
-      buttonRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  }, [selected, disableScrollIntoView]);
-
   return (
     <button
+      id={id}
       className={`btn ${selected ? "btn-primary disabled:opacity-100" : "btn-secondary"} relative border-gray-400 enabled:hover:border-black`}
       ref={buttonRef}
       onClick={() => {
@@ -60,13 +55,12 @@ export const TaskTableRowAction = ({
           ...extraParams,
         });
       }}
-      disabled={selected}
     >
       {formatForWrapping(name)}
       {lead && (
         <Tag
           color={Colors.tag}
-          className="pt-[1px]! px-[2px]! shadow-md z-10 absolute top-[-0.4rem] right-[-0.8rem] rounded-none!"
+          className="tag-top tag-medium"
           size={TagSizes.xxs}
         >
           Lead
@@ -75,7 +69,7 @@ export const TaskTableRowAction = ({
       {verbose && retry_id !== null && (
         <Tag
           color={Colors.tag}
-          className="pt-[1px]! px-[2px]! shadow-md z-10 absolute bottom-[-0.4rem] right-[-0.4rem] rounded-none!"
+          className="tag-bottom tag-small"
           size={TagSizes.xxs}
         >
           {retry_id}
diff --git a/ui/src/app/workflows/components/TasksFilter.tsx b/ui/src/app/workflows/components/TasksFilter.tsx
index 2a78cd08..9347e780 100644
--- a/ui/src/app/workflows/components/TasksFilter.tsx
+++ b/ui/src/app/workflows/components/TasksFilter.tsx
@@ -15,10 +15,12 @@
 //SPDX-License-Identifier: Apache-2.0
 import { useEffect, useState, type ChangeEvent } from "react";
 
+import { getTaskStatusArray, StatusFilter } from "~/app/tasks/components/StatusFilter";
+import { getMapFromStatusArray } from "~/app/tasks/components/StatusFilter";
 import { OutlinedIcon } from "~/components/Icon";
 import { InlineBanner } from "~/components/InlineBanner";
 import { MultiselectWithAll } from "~/components/MultiselectWithAll";
-import { StatusFilter } from "~/components/StatusFilter";
+import { StatusFilterType } from "~/components/StatusFilter";
 import { TextInput } from "~/components/TextInput";
 import { type TaskStatusType, TaskStatusValues } from "~/models";
 
@@ -28,8 +30,8 @@ export interface TasksFiltersDataProps {
   name: string;
   nodes: string;
   allNodes: boolean;
-  allStatuses: boolean;
-  statuses: string;
+  statusFilterType?: StatusFilterType;
+  statuses?: string;
   pod_ip: string;
 }
 
@@ -41,7 +43,7 @@ interface TasksFiltersProps extends TasksFiltersDataProps {
 
 export const TasksFilter = ({
   name,
-  allStatuses,
+  statusFilterType,
   statuses,
   nodes,
   allNodes,
@@ -50,22 +52,14 @@ export const TasksFilter = ({
   updateUrl,
   validateFilters,
 }: TasksFiltersProps) => {
-  const [localAllStatuses, setLocalAllStatuses] = useState(allStatuses);
   const [localStatusMap, setLocalStatusMap] = useState<Map<TaskStatusType, boolean>>(new Map());
+  const [localStatusFilterType, setLocalStatusFilterType] = useState<StatusFilterType | undefined>(statusFilterType);
   const [taskNameFilter, setTaskNameFilter] = useState<string>(name);
   const [localNodes, setLocalNodes] = useState<Map<string, boolean>>(new Map());
   const [localAllNodes, setLocalAllNodes] = useState<boolean>(allNodes);
   const [podIpFilter, setPodIpFilter] = useState<string>(pod_ip);
   const [errors, setErrors] = useState<string[]>([]);
 
-  useEffect(() => {
-    const statusArray = statuses.split(",");
-
-    setLocalStatusMap(
-      new Map(TaskStatusValues.map((value) => [value, allStatuses || statusArray.includes(value.toString())])),
-    );
-  }, [name, statuses, allStatuses]);
-
   useEffect(() => {
     const filters = new Map<string, boolean>(availableNodes.map((node) => [node, false]));
 
@@ -80,12 +74,21 @@ export const TasksFilter = ({
     setLocalNodes(filters);
   }, [availableNodes, nodes]);
 
+  useEffect(() => {
+    setLocalStatusFilterType(statusFilterType);
+
+    if (statusFilterType === StatusFilterType.CUSTOM) {
+      const statusArray = statuses?.split(",") ?? [];
+      setLocalStatusMap(getMapFromStatusArray(statusArray));
+    } else {
+      setLocalStatusMap(getMapFromStatusArray(getTaskStatusArray(statusFilterType)));
+    }
+  }, [statuses, statusFilterType]);
+
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    const statuses = Array.from(localStatusMap.entries())
-      .filter(([_, enabled]) => enabled)
-      .map(([status]) => status);
+    const statuses = getTaskStatusArray(localStatusFilterType, localStatusMap);
 
     const nodes = Array.from(localNodes.entries())
       .filter(([_, enabled]) => enabled)
@@ -95,8 +98,8 @@ export const TasksFilter = ({
       name: taskNameFilter,
       nodes: nodes.join(","),
       allNodes: localAllNodes,
-      allStatuses: localAllStatuses,
-      statuses: statuses.join(","),
+      statusFilterType: localStatusFilterType,
+      statuses: localStatusFilterType === StatusFilterType.CUSTOM ? statuses.join(",") : undefined,
       pod_ip: podIpFilter,
     });
 
@@ -110,15 +113,31 @@ export const TasksFilter = ({
       filterName: taskNameFilter.length > 0 ? taskNameFilter : null,
       allNodes: localAllNodes,
       nodes: nodes.length > 0 ? nodes.join(",") : undefined,
-      allStatuses: localAllStatuses,
-      status: localAllStatuses ? undefined : statuses.join(","),
+      statusFilterType: localStatusFilterType,
+      status: localStatusFilterType === StatusFilterType.CUSTOM ? statuses.join(",") : null,
       pod_ip: podIpFilter.length > 0 ? podIpFilter : null,
     });
   };
 
+  const handleReset = () => {
+    setTaskNameFilter("");
+    setLocalNodes(new Map());
+    setLocalAllNodes(true);
+    setPodIpFilter("");
+    setLocalStatusMap(new Map(TaskStatusValues.map((value) => [value, true])));
+    setLocalStatusFilterType(StatusFilterType.ALL);
+    setErrors([]);
+    updateUrl({
+      filterName: null,
+      nodes: undefined,
+      status: undefined,
+      pod_ip: undefined,
+    });
+  };
+
   return (
     <form onSubmit={handleSubmit}>
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-global">
         <TextInput
           id="taskSearch"
           label="Task Name"
@@ -134,7 +153,7 @@ export const TasksFilter = ({
           slotLeft={<OutlinedIcon name="search" />}
           autoComplete="off"
         />
-        <div className="px-3">
+        <div className="px-global">
           <MultiselectWithAll
             id="nodes"
             label="All Nodes"
@@ -161,46 +180,33 @@ export const TasksFilter = ({
           slotLeft={<OutlinedIcon name="search" />}
           autoComplete="off"
         />
-        <div className="p-3">
+        <div className="p-global">
           <StatusFilter
             statusMap={localStatusMap}
             setStatusMap={(statusMap) => {
               setLocalStatusMap(statusMap);
             }}
-            allStatuses={localAllStatuses}
-            setAllStatuses={(allStatuses) => {
-              setLocalAllStatuses(allStatuses);
-            }}
+            statusFilterType={localStatusFilterType}
+            setStatusFilterType={setLocalStatusFilterType}
           />
         </div>
-        {errors.length > 0 && (
-          <InlineBanner status="error">
-            <div className="flex flex-col gap-2">
-              {errors.map((error, index) => (
-                <div key={index}>{error}</div>
-              ))}
-            </div>
-          </InlineBanner>
-        )}
       </div>
-      <div className="flex flex-row gap-3 justify-between body-footer p-3 sticky bottom-0">
+      <InlineBanner status={errors.length > 0 ? "error" : "none"}>
+        {errors.length > 0 ? (
+          <div className="flex flex-col">
+            {errors.map((error, index) => (
+              <div key={index}>{error}</div>
+            ))}
+          </div>
+        ) : (
+          ""
+        )}
+      </InlineBanner>
+      <div className="flex flex-row gap-global justify-between body-footer p-global sticky bottom-0">
         <button
           type="button"
           className="btn"
-          onClick={() => {
-            setTaskNameFilter("");
-            setLocalNodes(new Map());
-            setLocalAllNodes(true);
-            setPodIpFilter("");
-            setLocalStatusMap(new Map(TaskStatusValues.map((value) => [value, true])));
-            setLocalAllStatuses(true);
-            updateUrl({
-              filterName: null,
-              nodes: undefined,
-              status: undefined,
-              pod_ip: undefined,
-            });
-          }}
+          onClick={handleReset}
         >
           <OutlinedIcon name="undo" />
           Reset
diff --git a/ui/src/app/workflows/components/TasksTable.tsx b/ui/src/app/workflows/components/TasksTable.tsx
index efaba4bf..09df951f 100644
--- a/ui/src/app/workflows/components/TasksTable.tsx
+++ b/ui/src/app/workflows/components/TasksTable.tsx
@@ -25,7 +25,9 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
+import { getTaskStatusArray } from "~/app/tasks/components/StatusFilter";
 import { commonFilterFns } from "~/components/commonFilterFns";
+import { StatusFilterType } from "~/components/StatusFilter";
 import { TableBase } from "~/components/TableBase";
 import { TablePagination } from "~/components/TablePagination";
 import { Colors, Tag } from "~/components/Tag";
@@ -47,7 +49,7 @@ interface TasksTableProps {
   nodes: string;
   allNodes?: boolean;
   pod_ip: string;
-  allStatuses?: boolean;
+  statusFilterType?: StatusFilterType;
   statuses?: string;
   verbose?: boolean;
   visible: boolean;
@@ -60,7 +62,7 @@ export const TasksTable = ({
   name,
   nodes,
   allNodes,
-  allStatuses,
+  statusFilterType,
   statuses,
   pod_ip,
   verbose,
@@ -78,6 +80,7 @@ export const TasksTable = ({
         accessorKey: "name",
         cell: ({ row }) => (
           <TaskTableRowAction
+            id={`task-${row.original.name}-${row.original.retry_id}`}
             name={row.original.name}
             retry_id={row.original.retry_id}
             lead={row.original.lead}
@@ -217,6 +220,7 @@ export const TasksTable = ({
     onColumnFiltersChange: setColumnFilters,
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => `${row.name}-${row.retry_id}`,
     enableSortingRemoval: false,
     enableMultiSort: true,
     state: { columnFilters, sorting },
@@ -232,17 +236,20 @@ export const TasksTable = ({
     setColumnFilters([
       { id: "name", value: name },
       { id: "node_name", value: allNodes ? undefined : nodes.split(",") },
-      { id: "status", value: allStatuses ? undefined : statuses?.split(",") },
+      {
+        id: "status",
+        value:
+          statusFilterType === StatusFilterType.CUSTOM ? statuses?.split(",") : getTaskStatusArray(statusFilterType),
+      },
       { id: "pod_ip", value: pod_ip },
     ]);
-  }, [name, nodes, statuses, pod_ip, allStatuses, allNodes]);
+  }, [name, nodes, statuses, pod_ip, statusFilterType, allNodes]);
 
   return (
     <TableBase
       columns={table.getAllColumns()}
       table={table}
       className="body-component"
-      paddingOffset={10}
       visible={visible}
     >
       <TablePagination
diff --git a/ui/src/app/workflows/components/ToolsModal.tsx b/ui/src/app/workflows/components/ToolsModal.tsx
index c917eabf..0b10817c 100644
--- a/ui/src/app/workflows/components/ToolsModal.tsx
+++ b/ui/src/app/workflows/components/ToolsModal.tsx
@@ -23,6 +23,7 @@ import { Spinner } from "~/components/Spinner";
 import { TaskHistoryBanner } from "~/components/TaskHistoryBanner";
 import { type Task } from "~/models";
 import { type WorkflowResponse } from "~/models/workflows-model";
+import { checkExhaustive } from "~/utils/common";
 
 import { CancelWorkflow } from "./CancelWorkflow";
 import FullPageModalHeading from "./FullPageModalHeading";
@@ -64,12 +65,45 @@ interface ToolsModalProps {
 }
 
 export const ToolsModal = ({ tool, workflow, selectedTask, fullLog, lines, verbose, updateUrl }: ToolsModalProps) => {
-  const [toolUrl, setToolUrl] = useState<string | undefined>(undefined);
   const [workflowSpec, setWorkflowSpec] = useState<string | undefined>(undefined);
   const ExecTerminal = lazy(() => import("../components/ExecTerminal"));
   const urlParams = useSearchParams();
   const entryCommand = urlParams.get(PARAM_KEYS.entry_command) ?? "/bin/bash";
 
+  const toolTitle = useMemo(() => {
+    if (!tool) {
+      return "";
+    }
+
+    switch (tool) {
+      case ToolType.TaskLogs:
+        return "Task Logs";
+      case ToolType.TaskErrorLogs:
+        return "Task Error Logs";
+      case ToolType.WorkflowLogs:
+        return "Workflow Logs";
+      case ToolType.WorkflowErrorLogs:
+        return "Workflow Error Logs";
+      case ToolType.Spec:
+        return "Workflow Spec";
+      case ToolType.Template:
+        return "Workflow Template Spec";
+      case ToolType.Outputs:
+        return "Workflow Outputs";
+      case ToolType.JSON:
+        return "Workflow JSON";
+      case ToolType.Nodes:
+        return "Node Details";
+      case ToolType.PortForwarding:
+        return "Port Forwarding";
+      case ToolType.Cancel:
+        return "Cancel Workflow";
+      default:
+        checkExhaustive(tool as never);
+        return "";
+    }
+  }, [tool]);
+
   // Load SyntaxHighlighter when the component mounts
   useEffect(() => {
     void loadSyntaxHighlighter();
@@ -152,22 +186,18 @@ export const ToolsModal = ({ tool, workflow, selectedTask, fullLog, lines, verbo
     lines,
   ]);
 
-  useEffect(() => {
+  const toolUrl = useMemo(() => {
     switch (tool) {
       case ToolType.Spec:
-        setToolUrl(workflow?.spec);
-        break;
+        return workflow?.spec;
       case ToolType.Template:
-        setToolUrl(workflow?.template_spec ?? undefined);
-        break;
+        return workflow?.template_spec ?? undefined;
       case ToolType.Outputs:
-        setToolUrl(workflow?.outputs ?? undefined);
-        break;
+        return workflow?.outputs ?? undefined;
       case ToolType.JSON:
-        setToolUrl(workflowSpec);
-        break;
+        return workflowSpec;
       default:
-        setToolUrl(logUrl);
+        return logUrl;
     }
   }, [tool, workflow, logUrl, workflowSpec]);
 
@@ -202,6 +232,7 @@ export const ToolsModal = ({ tool, workflow, selectedTask, fullLog, lines, verbo
           />
         </LogPopupHeader>
       }
+      aria-label={toolTitle}
     >
       {!!logUrl && (
         <SpecViewer
diff --git a/ui/src/app/workflows/components/WorkflowActions.tsx b/ui/src/app/workflows/components/WorkflowActions.tsx
index 2bab42fc..0ebeef12 100644
--- a/ui/src/app/workflows/components/WorkflowActions.tsx
+++ b/ui/src/app/workflows/components/WorkflowActions.tsx
@@ -53,10 +53,12 @@ export default function WorkflowActions({
     <div
       className={`dag-actions body-footer ${className}`}
       aria-label="Workflow Actions"
+      id="workflow-actions-list"
     >
       <div
         className="flex flex-col gap-1"
         role="list"
+        aria-labelledby="workflow-actions-list"
       >
         <button
           className="btn btn-action"
@@ -120,6 +122,7 @@ export default function WorkflowActions({
       <div
         className="flex flex-col gap-1"
         role="list"
+        aria-labelledby="workflow-actions-list"
       >
         {workflow.dashboard_url && (
           <Link
diff --git a/ui/src/app/workflows/components/WorkflowDetails.tsx b/ui/src/app/workflows/components/WorkflowDetails.tsx
index 0368c1de..500336bb 100644
--- a/ui/src/app/workflows/components/WorkflowDetails.tsx
+++ b/ui/src/app/workflows/components/WorkflowDetails.tsx
@@ -15,6 +15,7 @@
 //SPDX-License-Identifier: Apache-2.0
 import Link from "next/link";
 
+import { FilledIcon } from "~/components/Icon";
 import StatusBadge from "~/components/StatusBadge";
 import { Colors, Tag } from "~/components/Tag";
 import type { WorkflowResponse } from "~/models";
@@ -32,21 +33,25 @@ interface WorkflowDetailsProps {
   updateUrl: (params: ToolParamUpdaterProps) => void;
 }
 
+export const linkToUserWorkflows = (username: string) => {
+  return `/workflows?allUsers=false&dateRange=-2&users=${encodeURIComponent(username)}`;
+};
+
 const WorkflowDetails = ({ workflow, includeName = false, includeTasks = false, updateUrl }: WorkflowDetailsProps) => {
   const runtimeEnv = useRuntimeEnv();
   const totalTasks = workflow.groups?.reduce((acc, group) => acc + group.tasks.length, 0);
 
   return (
-    <>
-      <div>
-        <div className="flex flex-col gap-1 body-header text-center py-3">
-          {includeName && <p className="px-3 font-semibold">{workflow.name}</p>}
-          <p className="px-1 text-xxs italic overflow-hidden text-ellipsis whitespace-nowrap">
+    <div className="h-full w-full flex flex-col">
+      <div className="w-full grow">
+        <div className="flex flex-col gap-1 body-header text-center py-global">
+          {includeName && <p className="px-global font-semibold">{workflow.name}</p>}
+          <p className="px-1 italic overflow-hidden text-ellipsis whitespace-nowrap">
             <strong>UUID:</strong> {workflow.uuid}
           </p>
         </div>
-        <div className="p-3 w-full flex flex-col">
-          <dl>
+        <div className="p-global w-full flex flex-col">
+          <dl aria-label={workflow.name}>
             <dt>Status</dt>
             <dd>
               {workflow.status && (
@@ -64,7 +69,18 @@ const WorkflowDetails = ({ workflow, includeName = false, includeTasks = false,
             {workflow.submitted_by && (
               <>
                 <dt>Submitted by</dt>
-                <dd>{formatForWrapping(workflow.submitted_by)}</dd>
+                <dd>
+                  <Link
+                    href={linkToUserWorkflows(workflow.submitted_by)}
+                    className="no-underline p-0 flex items-center gap-1"
+                  >
+                    {formatForWrapping(workflow.submitted_by)}
+                    <FilledIcon
+                      name="open_in_new"
+                      className="my-[-1rem] text-base!"
+                    />
+                  </Link>
+                </dd>
               </>
             )}
             {workflow.cancelled_by && (
@@ -157,7 +173,7 @@ const WorkflowDetails = ({ workflow, includeName = false, includeTasks = false,
         className="lg:sticky lg:bottom-0"
         updateUrl={updateUrl}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/ui/src/app/workflows/components/WorkflowTableRowAction.tsx b/ui/src/app/workflows/components/WorkflowTableRowAction.tsx
index b86e8778..3f3b2968 100644
--- a/ui/src/app/workflows/components/WorkflowTableRowAction.tsx
+++ b/ui/src/app/workflows/components/WorkflowTableRowAction.tsx
@@ -13,37 +13,26 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { useRef, useEffect } from "react";
+import { useRef } from "react";
 
 import { formatForWrapping } from "~/utils/string";
 
 import { type ToolParamUpdaterProps } from "../hooks/useToolParamUpdater";
 
 interface WorkflowTableRowActionProps {
+  id: string;
   name: string;
   selected: boolean;
   updateUrl: (params: ToolParamUpdaterProps) => void;
-  disableScrollIntoView?: boolean;
   extraParams?: Record<string, string>;
 }
 
-export const WorkflowTableRowAction = ({
-  name,
-  selected,
-  updateUrl,
-  disableScrollIntoView = false,
-  extraParams,
-}: WorkflowTableRowActionProps) => {
+export const WorkflowTableRowAction = ({ id, name, selected, updateUrl, extraParams }: WorkflowTableRowActionProps) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
 
-  useEffect(() => {
-    if (buttonRef.current && selected && !disableScrollIntoView) {
-      buttonRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  }, [selected, disableScrollIntoView]);
-
   return (
     <button
+      id={id}
       className={`btn ${selected ? "btn-primary" : "btn-secondary"} table-action`}
       ref={buttonRef}
       onClick={(event) => {
diff --git a/ui/src/app/workflows/components/WorkflowsFilters.tsx b/ui/src/app/workflows/components/WorkflowsFilters.tsx
index c641bee8..03baeb29 100644
--- a/ui/src/app/workflows/components/WorkflowsFilters.tsx
+++ b/ui/src/app/workflows/components/WorkflowsFilters.tsx
@@ -19,12 +19,13 @@ import { customDateRange, DateRangePicker } from "~/components/DateRangePicker";
 import { OutlinedIcon } from "~/components/Icon";
 import { InlineBanner } from "~/components/InlineBanner";
 import { MultiselectWithAll } from "~/components/MultiselectWithAll";
-import { StatusFilter } from "~/components/StatusFilter";
+import { StatusFilterType } from "~/components/StatusFilter";
 import { TextInput } from "~/components/TextInput";
 import { UserFilter, UserFilterType } from "~/components/UserFilter";
 import { PoolsListResponseSchema, type PriorityType, WorkflowStatusValues, type WorkflowStatusType } from "~/models";
 import { api } from "~/trpc/react";
 
+import { getMapFromStatusArray, getWorkflowStatusArray, StatusFilter } from "./StatusFilter";
 import { type ToolParamUpdaterProps } from "../hooks/useToolParamUpdater";
 
 export interface WorkflowsFiltersDataProps {
@@ -33,8 +34,8 @@ export interface WorkflowsFiltersDataProps {
   dateRange: number;
   submittedAfter?: string;
   submittedBefore?: string;
-  allStatuses: boolean;
-  statuses: string;
+  statusFilterType?: StatusFilterType;
+  statuses?: string;
   selectedPools: string;
   isSelectAllPoolsChecked: boolean;
   name: string;
@@ -54,7 +55,7 @@ export const WorkflowsFilters = ({
   dateRange,
   submittedAfter,
   submittedBefore,
-  allStatuses,
+  statusFilterType,
   statuses,
   selectedPools,
   isSelectAllPoolsChecked,
@@ -69,7 +70,7 @@ export const WorkflowsFilters = ({
   const [localDateRange, setLocalDateRange] = useState(dateRange);
   const [localSubmittedAfter, setLocalSubmittedAfter] = useState<string | undefined>(submittedAfter);
   const [localSubmittedBefore, setLocalSubmittedBefore] = useState<string | undefined>(submittedBefore);
-  const [localAllStatuses, setLocalAllStatuses] = useState(allStatuses);
+  const [localStatusFilterType, setLocalStatusFilterType] = useState<StatusFilterType | undefined>(statusFilterType);
   const [localStatusMap, setLocalStatusMap] = useState<Map<WorkflowStatusType, boolean>>(new Map());
   const [localPools, setLocalPools] = useState<Map<string, boolean>>(new Map());
   const [localUsers, setLocalUsers] = useState<string>(selectedUsers);
@@ -91,12 +92,15 @@ export const WorkflowsFilters = ({
   }, [userType]);
 
   useEffect(() => {
-    const statusArray = statuses.split(",");
+    setLocalStatusFilterType(statusFilterType);
 
-    setLocalStatusMap(
-      new Map(WorkflowStatusValues.map((value) => [value, allStatuses || statusArray.includes(value.toString())])),
-    );
-  }, [statuses, allStatuses]);
+    if (statusFilterType === StatusFilterType.CUSTOM) {
+      const statusArray = statuses?.split(",") ?? [];
+      setLocalStatusMap(getMapFromStatusArray(statusArray));
+    } else {
+      setLocalStatusMap(getMapFromStatusArray(getWorkflowStatusArray(statusFilterType)));
+    }
+  }, [statuses, statusFilterType]);
 
   useEffect(() => {
     setLocalName(name);
@@ -124,11 +128,7 @@ export const WorkflowsFilters = ({
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    const statuses = localAllStatuses
-      ? []
-      : Array.from(localStatusMap.entries())
-          .filter(([_, enabled]) => enabled)
-          .map(([status]) => status);
+    const statuses = getWorkflowStatusArray(localStatusFilterType, localStatusMap);
 
     const pools = Array.from(localPools.entries())
       .filter(([_, enabled]) => enabled)
@@ -143,7 +143,7 @@ export const WorkflowsFilters = ({
       submittedAfter: localSubmittedAfter,
       submittedBefore: localSubmittedBefore,
       name: localName,
-      allStatuses: localAllStatuses,
+      statusFilterType: localStatusFilterType,
       statuses: statuses.join(","),
     });
 
@@ -158,8 +158,8 @@ export const WorkflowsFilters = ({
       dateRange: localDateRange,
       dateAfter: localDateRange === customDateRange ? localSubmittedAfter : null,
       dateBefore: localDateRange === customDateRange ? localSubmittedBefore : null,
-      allStatuses: localAllStatuses,
-      status: localAllStatuses ? undefined : statuses.join(","),
+      statusFilterType: localStatusFilterType,
+      status: localStatusFilterType === StatusFilterType.CUSTOM ? statuses.join(",") : null,
       allPools,
       pools: allPools ? null : pools,
       allUsers: localUserType === UserFilterType.ALL,
@@ -172,7 +172,7 @@ export const WorkflowsFilters = ({
 
   const handleReset = () => {
     setLocalName("");
-    setLocalAllStatuses(true);
+    setLocalStatusFilterType(StatusFilterType.ALL);
     setLocalStatusMap(new Map(WorkflowStatusValues.map((value) => [value, true])));
     setLocalUserType(UserFilterType.CURRENT);
     setLocalUsers(currentUserName);
@@ -183,8 +183,8 @@ export const WorkflowsFilters = ({
 
     updateUrl({
       filterName: null,
-      status: undefined,
-      allStatuses: true,
+      statusFilterType: StatusFilterType.ALL,
+      status: null,
       allPools: true,
       allUsers: false,
       users: [currentUserName],
@@ -199,7 +199,7 @@ export const WorkflowsFilters = ({
 
   return (
     <form onSubmit={handleSubmit}>
-      <div className="body-component p-3 flex flex-col gap-3">
+      <div className="body-component p-global flex flex-col gap-global">
         <UserFilter
           userType={localUserType}
           setUserType={setLocalUserType}
@@ -236,7 +236,7 @@ export const WorkflowsFilters = ({
             <label className="flex items-center gap-1">
               <input
                 type="radio"
-                name="resourceType"
+                name="priority"
                 value={"HIGH"}
                 checked={priorityFilter === "HIGH"}
                 onChange={() => setPriorityFilter("HIGH")}
@@ -246,7 +246,7 @@ export const WorkflowsFilters = ({
             <label className="flex items-center gap-1">
               <input
                 type="radio"
-                name="resourceType"
+                name="priority"
                 value={"NORMAL"}
                 checked={priorityFilter === "NORMAL"}
                 onChange={() => setPriorityFilter("NORMAL")}
@@ -256,7 +256,7 @@ export const WorkflowsFilters = ({
             <label className="flex items-center gap-1">
               <input
                 type="radio"
-                name="resourceType"
+                name="priority"
                 value={"LOW"}
                 checked={priorityFilter === "LOW"}
                 onChange={() => setPriorityFilter("LOW")}
@@ -268,8 +268,8 @@ export const WorkflowsFilters = ({
         <StatusFilter
           statusMap={localStatusMap}
           setStatusMap={setLocalStatusMap}
-          allStatuses={localAllStatuses}
-          setAllStatuses={setLocalAllStatuses}
+          statusFilterType={localStatusFilterType}
+          setStatusFilterType={setLocalStatusFilterType}
         />
         <MultiselectWithAll
           id="pools"
@@ -289,11 +289,11 @@ export const WorkflowsFilters = ({
           setFromDate={setLocalSubmittedAfter}
           toDate={localSubmittedBefore}
           setToDate={setLocalSubmittedBefore}
-          className="flex flex-col gap-3 mt-2"
+          className="flex flex-col gap-global mt-2"
         />
         {errors.length > 0 && (
           <InlineBanner status="error">
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-global">
               {errors.map((error, index) => (
                 <div key={index}>{error}</div>
               ))}
@@ -301,7 +301,7 @@ export const WorkflowsFilters = ({
           </InlineBanner>
         )}
       </div>
-      <div className="flex flex-row gap-3 justify-between body-footer p-3 sticky bottom-0">
+      <div className="flex flex-row gap-global justify-between body-footer p-global sticky bottom-0">
         <button
           type="button"
           className="btn"
diff --git a/ui/src/app/workflows/components/WorkflowsSubmit.tsx b/ui/src/app/workflows/components/WorkflowsSubmit.tsx
index d6706cff..419056d1 100644
--- a/ui/src/app/workflows/components/WorkflowsSubmit.tsx
+++ b/ui/src/app/workflows/components/WorkflowsSubmit.tsx
@@ -83,6 +83,7 @@ export const WorkflowsSubmit = ({
   const footerRef = useRef<HTMLDivElement>(null);
   const [warnLocalPath, setWarnLocalPath] = useState(false);
   const [warningList, setWarningList] = useState<ReactNode[]>([]);
+  const [isEditorFocused, setIsEditorFocused] = useState(false);
 
   useEffect(() => {
     setFile(placeholderFile);
@@ -223,7 +224,7 @@ export const WorkflowsSubmit = ({
 
   return (
     <div className="body-component flex flex-col w-full h-full">
-      <div className="flex flex-row gap-3 p-3">
+      <div className="flex flex-row gap-global p-global">
         <Select
           id="pool-select"
           className="w-[25vw]"
@@ -272,10 +273,9 @@ export const WorkflowsSubmit = ({
             htmlFor="workflow-editor"
             className="sr-only display-none"
           >
-            Workflow Submit
+            Workflow Spec
           </label>
           <Editor
-            autoFocus
             value={file ?? ""}
             onValueChange={(code) => {
               setFile(code);
@@ -285,6 +285,12 @@ export const WorkflowsSubmit = ({
             padding={15}
             textareaClassName="editor"
             textareaId="workflow-editor"
+            onFocus={() => {
+              setIsEditorFocused(true);
+            }}
+            onBlur={() => {
+              setIsEditorFocused(false);
+            }}
           />
         </div>
       </div>
@@ -296,11 +302,15 @@ export const WorkflowsSubmit = ({
           status={error ? "error" : warningList.length > 0 ? "warning" : "none"}
           className="w-full"
         >
-          <div className="flex flex-row gap-3 justify-between w-full items-center">
+          <div className="flex flex-row gap-global justify-between w-full items-center">
             {error ? (
               <div className="whitespace-pre-wrap">{error}</div>
             ) : warningList.length > 0 ? (
               <div className="flex flex-col">{warningList}</div>
+            ) : isEditorFocused ? (
+              <p>
+                Press <strong>Ctrl+Shift+M</strong> to toggle between indentation and focus mode
+              </p>
             ) : (
               <div />
             )}
diff --git a/ui/src/app/workflows/components/WorkflowsTable.tsx b/ui/src/app/workflows/components/WorkflowsTable.tsx
index 78599402..34cd071c 100644
--- a/ui/src/app/workflows/components/WorkflowsTable.tsx
+++ b/ui/src/app/workflows/components/WorkflowsTable.tsx
@@ -29,7 +29,6 @@ import Link from "next/link";
 import { commonFilterFns } from "~/components/commonFilterFns";
 import StatusBadge from "~/components/StatusBadge";
 import { TableBase } from "~/components/TableBase";
-import { TableLoader } from "~/components/TableLoader";
 import { TablePagination } from "~/components/TablePagination";
 import { Colors, Tag } from "~/components/Tag";
 import { useTableSortLoader } from "~/hooks/useTableSortLoader";
@@ -38,10 +37,15 @@ import { type WorkflowListItem } from "~/models";
 import { useRuntimeEnv } from "~/runtime-env";
 import { convertSeconds, convertToReadableTimezone, formatForWrapping, sortDateWithNA } from "~/utils/string";
 
+import { linkToUserWorkflows } from "./WorkflowDetails";
 import { WorkflowTableRowAction } from "./WorkflowTableRowAction";
 import { getStatusDescription } from "./WorkfowStatusInfo";
 import { type ToolParamUpdaterProps } from "../hooks/useToolParamUpdater";
 
+export const getActionId = (workflowName: string) => {
+  return `workflow-${workflowName}`;
+};
+
 export const WorkflowsTable = ({
   processResources,
   isLoading,
@@ -67,6 +71,7 @@ export const WorkflowsTable = ({
         accessorKey: "name",
         cell: ({ row }) => (
           <WorkflowTableRowAction
+            id={getActionId(row.original.name)}
             name={row.original.name}
             selected={row.original.name === selectedWorkflowName}
             updateUrl={updateUrl}
@@ -81,7 +86,14 @@ export const WorkflowsTable = ({
       {
         accessorKey: "user",
         header: "User",
-        cell: ({ row }) => formatForWrapping(row.original.user),
+        cell: ({ row }) => (
+          <Link
+            href={linkToUserWorkflows(row.original.user)}
+            className="no-underline px-0"
+          >
+            {formatForWrapping(row.original.user)}
+          </Link>
+        ),
         sortingFn: "alphanumericCaseSensitive",
         enableMultiSort: true,
         invertSorting: true,
@@ -192,6 +204,7 @@ export const WorkflowsTable = ({
     onColumnVisibilityChange: setColumnVisibility,
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.name,
     enableSortingRemoval: false,
     enableMultiSort: true,
     filterFns: commonFilterFns,
@@ -204,24 +217,16 @@ export const WorkflowsTable = ({
   });
 
   return (
-    <div className="h-full w-full">
-      {isLoading ? (
-        <TableLoader table={table} />
-      ) : (
-        <div className="flex flex-col h-full w-full">
-          <TableBase
-            columns={columns}
-            table={table}
-            paddingOffset={10}
-            className="body-component"
-          >
-            <TablePagination
-              table={table}
-              totalRows={processResources.length}
-            />
-          </TableBase>
-        </div>
-      )}
-    </div>
+    <TableBase
+      columns={columns}
+      table={table}
+      className="body-component"
+      isLoading={isLoading}
+    >
+      <TablePagination
+        table={table}
+        totalRows={processResources.length}
+      />
+    </TableBase>
   );
 };
diff --git a/ui/src/app/workflows/hooks/useToolParamUpdater.ts b/ui/src/app/workflows/hooks/useToolParamUpdater.ts
index 06d3e337..790cb146 100644
--- a/ui/src/app/workflows/hooks/useToolParamUpdater.ts
+++ b/ui/src/app/workflows/hooks/useToolParamUpdater.ts
@@ -18,6 +18,7 @@ import { useEffect, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import { allDateRange, defaultDateRange, getBestDateRange, getDateFromValues, type DateRange } from "~/components/DateRangePicker";
+import { StatusFilterType } from "~/components/StatusFilter";
 import { type UrlTypes, useStore } from "~/components/StoreProvider";
 import { UserFilterType } from "~/components/UserFilter";
 import { PARAM_KEYS as TABLE_PARAM_KEYS } from "~/hooks/useTablePageLoader";
@@ -45,6 +46,7 @@ export enum ToolType {
 export enum ViewType {
   List = "list",
   Graph = "graph",
+  SingleTask = "single_task",
 }
 
 export const PARAM_KEYS = {
@@ -57,7 +59,7 @@ export const PARAM_KEYS = {
   filterName: "filter_name",
   allNodes: "allNodes",
   nodes: "nodes",
-  allStatuses: "allStatuses",
+  statusType: "statusType",
   status: "status",
   showWF: "showWF",
   showTask: "showTask",
@@ -84,8 +86,8 @@ export interface ToolParamUpdaterProps {
   filterName?: string | null;
   nodes?: string;
   allNodes?: boolean;
-  allStatuses?: boolean;
-  status?: string;
+  statusFilterType?: StatusFilterType;
+  status?: string | null;
   showWF?: boolean;
   pools?: string[] | null;
   users?: string[] | null;
@@ -109,14 +111,14 @@ const useToolParamUpdater = (urlType?: UrlTypes, username?: string, defaults: Re
   const [tool, setTool] = useState<ToolType | undefined>(undefined);
   const [fullLog, showFullLog] = useState(false);
   const [lines, setLines] = useState(1000);
-  const [view, setView] = useState<ViewType>(ViewType.List);
+  const [view, setView] = useState<ViewType | undefined>(undefined);
   const [nameFilter, setNameFilter] = useState("");
   const [isSelectAllNodesChecked, setIsSelectAllNodesChecked] = useState<boolean | undefined>(undefined);
   const [nodes, setNodes] = useState("");
   const [podIp, setPodIp] = useState("");
   const [userFilter, setUserFilter] = useState<string | undefined>(username);
   const [poolFilter, setPoolFilter] = useState<string>("");
-  const [allStatuses, setAllStatuses] = useState<boolean | undefined>(undefined);
+  const [statusFilterType, setStatusFilterType] = useState<StatusFilterType | undefined>(undefined);
   const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined);
   const [isSelectAllUsersChecked, setIsSelectAllUsersChecked] = useState(false);
   const [isSelectAllPoolsChecked, setIsSelectAllPoolsChecked] = useState(true);
@@ -144,7 +146,7 @@ const useToolParamUpdater = (urlType?: UrlTypes, username?: string, defaults: Re
     setDateBeforeFilter(urlParams.get(PARAM_KEYS.dateBefore) ?? undefined);
     setSelectedWorkflowName(urlParams.get(PARAM_KEYS.workflow) ?? undefined);
     setSelectedTaskName(urlParams.get(PARAM_KEYS.task) ?? undefined);
-    setView(urlParams.get(PARAM_KEYS.view) as ViewType ?? ViewType.List);
+    setView(urlParams.get(PARAM_KEYS.view) as ViewType);
     showFullLog(urlParams.get(PARAM_KEYS.full_log) === "true");
 
     const showWFParam = urlParams.get(PARAM_KEYS.showWF);
@@ -232,28 +234,16 @@ const useToolParamUpdater = (urlType?: UrlTypes, username?: string, defaults: Re
 
     setPoolFilter(urlParams.get(PARAM_KEYS.pools) ?? "");
 
-    const allStatusesParam = urlParams.get(PARAM_KEYS.allStatuses);
-    let allStatus = true;
+    const statusFilterTypeParam = urlParams.get(PARAM_KEYS.statusType);
+    setStatusFilterType(statusFilterTypeParam as StatusFilterType ?? defaults.statusFilterType as StatusFilterType);
+    setStatusFilter(urlParams.get(PARAM_KEYS.status) ?? undefined);
 
-    if (allStatusesParam !== null) {
-      allStatus = allStatusesParam === "true";
-    } else if (defaults.allStatuses) {
-      allStatus = defaults.allStatuses === "true";
-    }
-
-    setAllStatuses(allStatus);
-    if (allStatus) {
-      setStatusFilter(undefined);
-    } else {
-      const statusParam = urlParams.get(PARAM_KEYS.status);
-      setStatusFilter(statusParam ?? defaults.status);
-      if (statusParam ?? defaults.status) {
-        filterCount++;
-      }
+    if (statusFilterType !== StatusFilterType.ALL) {
+      filterCount++;
     }
 
     setFilterCount(filterCount);
-  }, [urlParams, username, defaults]);
+  }, [urlParams, username, defaults, statusFilterType]);
 
   useEffect(() => {
     setDateRangeDates(getDateFromValues(dateRange, dateAfterFilter, dateBeforeFilter));
@@ -280,7 +270,7 @@ const useToolParamUpdater = (urlType?: UrlTypes, username?: string, defaults: Re
       nodes,
       allNodes: isSelectAllNodesChecked,
       status,
-      allStatuses,
+      statusFilterType,
       showWF,
       workflow,
       pools,
@@ -354,8 +344,8 @@ const useToolParamUpdater = (urlType?: UrlTypes, username?: string, defaults: Re
       newParams.set(PARAM_KEYS.status, status);
     }
 
-    if (allStatuses !== undefined) {
-      newParams.set(PARAM_KEYS.allStatuses, allStatuses.toString());
+    if (statusFilterType !== undefined) {
+      newParams.set(PARAM_KEYS.statusType, statusFilterType);
     }
 
     if (showWF !== undefined) {
@@ -446,7 +436,7 @@ const useToolParamUpdater = (urlType?: UrlTypes, username?: string, defaults: Re
     }
   };
 
-  return { updateUrl, tool, fullLog, lines, view, nameFilter, nodes, isSelectAllNodesChecked, podIp, filterCount, userFilter, poolFilter, allStatuses, statusFilter, userType, isSelectAllPoolsChecked, priority, dateRange, dateAfterFilter, dateBeforeFilter, selectedWorkflowName, selectedTaskName, retryId, dateRangeDates, showTask, showWF };
+  return { updateUrl, tool, fullLog, lines, view, nameFilter, nodes, isSelectAllNodesChecked, podIp, filterCount, userFilter, poolFilter, statusFilterType, statusFilter, userType, isSelectAllPoolsChecked, priority, dateRange, dateAfterFilter, dateBeforeFilter, selectedWorkflowName, selectedTaskName, retryId, dateRangeDates, showTask, showWF };
 };
 
 export default useToolParamUpdater;
diff --git a/ui/src/app/workflows/page.tsx b/ui/src/app/workflows/page.tsx
index 58460320..7ce3d867 100644
--- a/ui/src/app/workflows/page.tsx
+++ b/ui/src/app/workflows/page.tsx
@@ -21,21 +21,25 @@ import Link from "next/link";
 
 import { useAuth } from "~/components/AuthProvider";
 import { customDateRange, defaultDateRange } from "~/components/DateRangePicker";
+import { FilterButton } from "~/components/FilterButton";
 import { FilledIcon } from "~/components/Icon";
 import { PageError } from "~/components/PageError";
+import PageHeader from "~/components/PageHeader";
 import { SlideOut } from "~/components/SlideOut";
 import { Spinner } from "~/components/Spinner";
+import { StatusFilterType } from "~/components/StatusFilter";
 import { UrlTypes, WORKFLOW_PINNED_KEY } from "~/components/StoreProvider";
 import { UserFilterType } from "~/components/UserFilter";
 import useSafeTimeout from "~/hooks/useSafeTimeout";
 import { type Task, type WorkflowListItem } from "~/models";
 import { api } from "~/trpc/react";
 
+import { getWorkflowStatusArray } from "./components/StatusFilter";
 import { ToolsModal } from "./components/ToolsModal";
 import WorkflowDetails from "./components/WorkflowDetails";
 import { useWorkflow } from "./components/WorkflowLoader";
 import { WorkflowsFilters, type WorkflowsFiltersDataProps } from "./components/WorkflowsFilters";
-import { WorkflowsTable } from "./components/WorkflowsTable";
+import { getActionId, WorkflowsTable } from "./components/WorkflowsTable";
 import useToolParamUpdater, { type ToolType } from "./hooks/useToolParamUpdater";
 
 export default function Workflows() {
@@ -44,8 +48,8 @@ export default function Workflows() {
     updateUrl,
     userFilter,
     poolFilter,
+    statusFilterType,
     statusFilter,
-    allStatuses,
     userType,
     isSelectAllPoolsChecked,
     nameFilter,
@@ -62,19 +66,16 @@ export default function Workflows() {
     selectedTaskName,
     retryId,
   } = useToolParamUpdater(UrlTypes.Workflows, username, {
-    allStatuses: "true",
-    status: "",
+    statusFilterType: StatusFilterType.ALL,
     dateRange: defaultDateRange.toString(),
   });
-  const headerRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
   const lastFetchTimeRef = useRef<number>(Date.now());
   const [workflowPinned, setWorkflowPinned] = useState(false);
   const selectedWorkflow = useWorkflow(selectedWorkflowName, true, false);
   const [selectedTask, setSelectedTask] = useState<Task | undefined>(undefined);
   const [activeTool, setActiveTool] = useState<ToolType | undefined>(undefined);
   const [showFilters, setShowFilters] = useState(false);
-
+  const focusReturnIdRef = useRef<string | undefined>(undefined);
   // Initialize localStorage values after component mounts
   useEffect(() => {
     try {
@@ -117,7 +118,7 @@ export default function Workflows() {
       dateRange,
       submittedAfter,
       submittedBefore,
-      allStatuses,
+      statusFilterType,
       statuses,
     }: WorkflowsFiltersDataProps): string[] => {
       const errors: string[] = [];
@@ -130,7 +131,7 @@ export default function Workflows() {
       if (dateRange === customDateRange && (submittedAfter === undefined || submittedBefore === undefined)) {
         errors.push("Please select a date range");
       }
-      if (!allStatuses && !statuses?.length) {
+      if (statusFilterType === StatusFilterType.CUSTOM && !statuses?.length) {
         errors.push("Please select at least one status");
       }
       return errors;
@@ -140,7 +141,7 @@ export default function Workflows() {
 
   // Show filters if the params are not valid
   useEffect(() => {
-    if (allStatuses === undefined || statusFilter === undefined) {
+    if (statusFilterType === undefined) {
       return; // Params not read yet
     }
 
@@ -153,7 +154,7 @@ export default function Workflows() {
       submittedAfter: dateAfterFilter,
       submittedBefore: dateBeforeFilter,
       name: nameFilter,
-      allStatuses: allStatuses,
+      statusFilterType,
       statuses: statusFilter,
     });
 
@@ -169,7 +170,7 @@ export default function Workflows() {
     dateAfterFilter,
     dateBeforeFilter,
     nameFilter,
-    allStatuses,
+    statusFilterType,
     statusFilter,
     validateFilters,
     updateUrl,
@@ -178,12 +179,18 @@ export default function Workflows() {
 
   const gridClass = useMemo(() => {
     if (workflowPinned && selectedWorkflowName) {
-      return "grid grid-cols-[1fr_auto]";
+      return "grid grid-cols-[75vw_25vw]";
     } else {
       return "flex flex-row";
     }
   }, [workflowPinned, selectedWorkflowName]);
 
+  useEffect(() => {
+    if (selectedWorkflowName) {
+      focusReturnIdRef.current = getActionId(selectedWorkflowName);
+    }
+  }, [selectedWorkflowName]);
+
   const {
     data: workflows,
     isSuccess,
@@ -197,7 +204,10 @@ export default function Workflows() {
       pools: isSelectAllPoolsChecked ? [] : poolFilter.split(","),
       submitted_after: dateRangeDates?.fromDate?.toISOString(),
       submitted_before: dateRangeDates?.toDate?.toISOString(),
-      statuses: allStatuses ? [] : (statusFilter?.split(",") ?? []),
+      statuses:
+        statusFilterType === StatusFilterType.CUSTOM
+          ? statusFilter?.split(",")
+          : getWorkflowStatusArray(statusFilterType),
       name: nameFilter,
       priority: priority,
     },
@@ -233,36 +243,28 @@ export default function Workflows() {
 
   return (
     <>
-      <div
-        className="page-header mb-3"
-        ref={headerRef}
-      >
-        <h1>Workflows</h1>
-        <div className="flex items-center gap-3">
-          <Link
-            className="btn btn-primary"
-            href="/workflows/submit"
-          >
-            Submit a Workflow
-          </Link>
-          <button
-            className={`btn ${showFilters ? "btn-primary" : ""}`}
-            onClick={() => {
-              setShowFilters(!showFilters);
-            }}
-          >
-            <FilledIcon name="filter_list" />
-            Filters {filterCount > 0 ? `(${filterCount})` : ""}
-          </button>
-        </div>
+      <PageHeader>
+        <Link
+          className="btn"
+          href="/workflows/submit"
+        >
+          <FilledIcon name="send" />
+          <span className="hidden lg:block">Submit Workflow</span>
+        </Link>
+        <FilterButton
+          showFilters={showFilters}
+          setShowFilters={setShowFilters}
+          filterCount={filterCount}
+          aria-controls="workflows-filters"
+        />
+      </PageHeader>
+      <div className={`${gridClass} h-full w-full overflow-x-auto relative`}>
         <SlideOut
           id="workflows-filters"
           open={showFilters}
           onClose={() => setShowFilters(false)}
           className="w-100 border-t-0"
-          containerRef={headerRef}
-          top={headerRef.current?.offsetHeight ?? 0}
-          dimBackground={false}
+          aria-label="Workflows Filter"
         >
           <WorkflowsFilters
             selectedUsers={userFilter ?? ""}
@@ -270,7 +272,7 @@ export default function Workflows() {
             dateRange={dateRange}
             submittedAfter={dateAfterFilter}
             submittedBefore={dateBeforeFilter}
-            allStatuses={allStatuses ?? true}
+            statusFilterType={statusFilterType}
             statuses={statusFilter ?? ""}
             selectedPools={poolFilter}
             isSelectAllPoolsChecked={isSelectAllPoolsChecked}
@@ -282,11 +284,6 @@ export default function Workflows() {
             updateUrl={updateUrl}
           />
         </SlideOut>
-      </div>
-      <div
-        ref={containerRef}
-        className={`${gridClass} h-full w-full overflow-x-auto relative px-3 gap-3`}
-      >
         <WorkflowsTable
           processResources={processResources}
           isLoading={isFetching}
@@ -302,16 +299,21 @@ export default function Workflows() {
                 href={`/workflows/${selectedWorkflowName}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Open in new tab"
+                aria-label={`Workflow Details for ${selectedWorkflowName} - Open in new tab`}
               >
                 <span className="font-semibold">Workflow Details</span>
                 <FilledIcon name="open_in_new" />
               </Link>
             )
           }
-          id="details-slideout"
+          id="workflow-details"
           open={!!selectedWorkflowName}
           onClose={() => {
+            setSafeTimeout(() => {
+              // focus-trap-react does not work well with useReactTable as the ref for button inside the table that triggered the slideout is not persistent
+              const el = focusReturnIdRef.current ? document.getElementById(focusReturnIdRef.current) : undefined;
+              el?.focus();
+            }, 500);
             updateUrl({ workflow: null });
           }}
           canPin={true}
@@ -323,8 +325,6 @@ export default function Workflows() {
           className="workflow-details-slideout border-t-0"
           headerClassName="brand-header"
           bodyClassName="dag-details-body"
-          containerRef={containerRef}
-          heightOffset={10}
         >
           {selectedWorkflow.isLoading ? (
             <div className="flex justify-center items-center h-full">
@@ -334,7 +334,6 @@ export default function Workflows() {
             <PageError
               title="Error loading workflow"
               errorMessage={selectedWorkflow.error.message}
-              subText={selectedWorkflowName}
               size="md"
             />
           ) : selectedWorkflow.data ? (
diff --git a/ui/src/app/workflows/submit/[name]/page.tsx b/ui/src/app/workflows/submit/[name]/page.tsx
index e7245755..dd3f71ce 100644
--- a/ui/src/app/workflows/submit/[name]/page.tsx
+++ b/ui/src/app/workflows/submit/[name]/page.tsx
@@ -16,8 +16,8 @@
 "use client";
 
 import { Container } from "~/components/Container";
-import { GenericHeader } from "~/components/Header";
 import { PageError } from "~/components/PageError";
+import PageHeader from "~/components/PageHeader";
 import { Spinner } from "~/components/Spinner";
 import type { WorkflowSlugParams } from "~/models";
 import { api } from "~/trpc/react";
@@ -46,38 +46,31 @@ const WorkflowsSubmitPage = ({ params }: WorkflowSlugParams) => {
     use_template: false,
   });
 
-  if (templatedSpecLoading || renderedSpecLoading) {
-    return (
-      <Container className="h-full items-center justify-center">
-        <Spinner
-          description="Loading Spec..."
-          size="large"
-        />
-      </Container>
-    );
-  }
-
-  if (templatedSpecError ?? renderedSpecError) {
-    return (
-      <PageError
-        className="h-screen"
-        title="Failed to load workflow spec"
-        errorMessage={templatedSpecError?.message ?? renderedSpecError?.message}
-        icon="error_outline"
-      />
-    );
-  }
-
   return (
     <>
-      <GenericHeader
-        rootSegment="workflows"
-        tailSegment={["submit", workflowName]}
-      />
-      <WorkflowsSubmit
-        placeholderFile={templatedSpec ?? mockCreatedWorkflowFile}
-        renderedSpec={renderedSpec ?? mockCreatedWorkflowFile}
-      />
+      <PageHeader>
+        <h2 className="grow">{workflowName}</h2>
+      </PageHeader>
+      {templatedSpecLoading || renderedSpecLoading ? (
+        <Container className="h-full items-center justify-center">
+          <Spinner
+            description="Loading Spec..."
+            size="large"
+          />
+        </Container>
+      ) : (templatedSpecError ?? renderedSpecError) ? (
+        <PageError
+          className="h-screen"
+          title="Failed to load workflow spec"
+          errorMessage={templatedSpecError?.message ?? renderedSpecError?.message}
+          icon="error_outline"
+        />
+      ) : (
+        <WorkflowsSubmit
+          placeholderFile={templatedSpec ?? mockCreatedWorkflowFile}
+          renderedSpec={renderedSpec ?? mockCreatedWorkflowFile}
+        />
+      )}
     </>
   );
 };
diff --git a/ui/src/app/workflows/submit/groot/page.tsx b/ui/src/app/workflows/submit/groot/page.tsx
index 5b05f1cd..d0462f94 100644
--- a/ui/src/app/workflows/submit/groot/page.tsx
+++ b/ui/src/app/workflows/submit/groot/page.tsx
@@ -13,7 +13,7 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { GenericHeader } from "~/components/Header";
+import PageHeader from "~/components/PageHeader";
 import { GROOT_WORKFLOW_FILE } from "~/models/workflows-model";
 
 import { WorkflowsSubmit } from "../../components/WorkflowsSubmit";
@@ -21,10 +21,9 @@ import { WorkflowsSubmit } from "../../components/WorkflowsSubmit";
 export default function WorkflowsSubmitPage() {
   return (
     <>
-      <GenericHeader
-        rootSegment="workflows"
-        tailSegment={["submit", "groot"]}
-      />
+      <PageHeader>
+        <h2 className="grow">Groot</h2>
+      </PageHeader>
       <WorkflowsSubmit placeholderFile={GROOT_WORKFLOW_FILE} />
     </>
   );
diff --git a/ui/src/app/workflows/submit/isaac_sim_sdg/page.tsx b/ui/src/app/workflows/submit/isaac_sim_sdg/page.tsx
index 88fdb10c..a6c0f5a1 100644
--- a/ui/src/app/workflows/submit/isaac_sim_sdg/page.tsx
+++ b/ui/src/app/workflows/submit/isaac_sim_sdg/page.tsx
@@ -13,7 +13,7 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { GenericHeader } from "~/components/Header";
+import PageHeader from "~/components/PageHeader";
 import { ISAAC_SIM_SDG_WORKFLOW_FILE } from "~/models/workflows-model";
 
 import { WorkflowsSubmit } from "../../components/WorkflowsSubmit";
@@ -21,11 +21,9 @@ import { WorkflowsSubmit } from "../../components/WorkflowsSubmit";
 export default function WorkflowsSubmitPage() {
   return (
     <>
-      <GenericHeader
-        rootSegment="workflows"
-        tailSegment={["submit", "isaac_sim_sdg"]}
-      />
-
+      <PageHeader>
+        <h2 className="grow">Isaac Sim SDG</h2>
+      </PageHeader>
       <WorkflowsSubmit placeholderFile={ISAAC_SIM_SDG_WORKFLOW_FILE} />
     </>
   );
diff --git a/ui/src/app/workflows/submit/mnist_training/page.tsx b/ui/src/app/workflows/submit/mnist_training/page.tsx
index 1a118ce4..75191b18 100644
--- a/ui/src/app/workflows/submit/mnist_training/page.tsx
+++ b/ui/src/app/workflows/submit/mnist_training/page.tsx
@@ -13,7 +13,7 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { GenericHeader } from "~/components/Header";
+import PageHeader from "~/components/PageHeader";
 import { MNIST_TRAINING_WORKFLOW_FILE } from "~/models/workflows-model";
 
 import { WorkflowsSubmit } from "../../components/WorkflowsSubmit";
@@ -21,10 +21,9 @@ import { WorkflowsSubmit } from "../../components/WorkflowsSubmit";
 export default function WorkflowsSubmitPage() {
   return (
     <>
-      <GenericHeader
-        rootSegment="workflows"
-        tailSegment={["submit", "mnist_training"]}
-      />
+      <PageHeader>
+        <h2 className="grow">MNIST Training</h2>
+      </PageHeader>
       <WorkflowsSubmit placeholderFile={MNIST_TRAINING_WORKFLOW_FILE} />
     </>
   );
diff --git a/ui/src/app/workflows/submit/page.tsx b/ui/src/app/workflows/submit/page.tsx
index 3869bc80..bc7db7e9 100644
--- a/ui/src/app/workflows/submit/page.tsx
+++ b/ui/src/app/workflows/submit/page.tsx
@@ -13,7 +13,7 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { GenericHeader } from "~/components/Header";
+import PageHeader from "~/components/PageHeader";
 import { env } from "~/env.mjs";
 
 import { WorkflowsSubmit } from "../components/WorkflowsSubmit";
@@ -25,10 +25,9 @@ export const metadata = {
 export default function WorkflowsSubmitPage() {
   return (
     <>
-      <GenericHeader
-        rootSegment="workflows"
-        tailSegment={["submit"]}
-      />
+      <PageHeader>
+        <h2 className="grow">Submit Workflow</h2>
+      </PageHeader>
       <WorkflowsSubmit />
     </>
   );
diff --git a/ui/src/app/workflows/submit/reinforcement_learning/page.tsx b/ui/src/app/workflows/submit/reinforcement_learning/page.tsx
index e807b1fb..5906572a 100644
--- a/ui/src/app/workflows/submit/reinforcement_learning/page.tsx
+++ b/ui/src/app/workflows/submit/reinforcement_learning/page.tsx
@@ -13,7 +13,7 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { GenericHeader } from "~/components/Header";
+import PageHeader from "~/components/PageHeader";
 import { RL_WORKFLOW_FILE } from "~/models/workflows-model";
 
 import { WorkflowsSubmit } from "../../components/WorkflowsSubmit";
@@ -21,10 +21,9 @@ import { WorkflowsSubmit } from "../../components/WorkflowsSubmit";
 export default function WorkflowsSubmitPage() {
   return (
     <>
-      <GenericHeader
-        rootSegment="workflows"
-        tailSegment={["submit", "reinforcement_learning"]}
-      />
+      <PageHeader>
+        <h2 className="grow">Reinforcement Learning</h2>
+      </PageHeader>
       <WorkflowsSubmit placeholderFile={RL_WORKFLOW_FILE} />
     </>
   );
diff --git a/ui/src/components/Accordion.tsx b/ui/src/components/Accordion.tsx
index 242180df..bb35d42f 100644
--- a/ui/src/components/Accordion.tsx
+++ b/ui/src/components/Accordion.tsx
@@ -41,7 +41,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 }): React.ReactNode => {
   return (
     <div className={`w-full ${className}`}>
-      <div className="flex flex-row gap-3 justify-between items-end w-full">
+      <div className="flex flex-row gap-global justify-between items-end w-full">
         {slotLeft}
         <button
           className={`btn btn-tertiary p-1 min-h-auto ${slotLeft ? "" : "w-full"} text-left flex justify-between items-center ${disabled ? "hidden" : ""}`}
diff --git a/ui/src/components/Breadcrumbs.tsx b/ui/src/components/Breadcrumbs.tsx
index c27384d5..9960c3dc 100644
--- a/ui/src/components/Breadcrumbs.tsx
+++ b/ui/src/components/Breadcrumbs.tsx
@@ -24,7 +24,7 @@ import { FilledIcon } from "./Icon";
 const Breadcrumbs = ({ segments }: { segments: ReactNode[] }) => {
   const count = segments.length;
   return (
-    <div className="flex flex-row gap-3 items-center breadcrumbs">
+    <div className="flex flex-row gap-global items-center breadcrumbs">
       {segments.map((segment, index) =>
         index < count - 1 ? (
           <Link
diff --git a/ui/src/components/Checkbox.tsx b/ui/src/components/Checkbox.tsx
index c03b738c..ed586622 100644
--- a/ui/src/components/Checkbox.tsx
+++ b/ui/src/components/Checkbox.tsx
@@ -25,7 +25,7 @@ export const Checkbox = ({
   ...props
 }: React.InputHTMLAttributes<HTMLInputElement> & { checkSize?: "small" | "large" }) => {
   return (
-    <div className={`flex relative ${checkSize === "small" ? "h-4 w-4" : "h-8 w-8"} ${className}`}>
+    <div className={`flex relative ${checkSize === "small" ? "h-6 w-6" : "h-8 w-8"} ${className}`}>
       <input
         type="checkbox"
         id={id}
@@ -36,13 +36,13 @@ export const Checkbox = ({
           peer shrink-0
           appearance-none w-full h-full border-1 border-gray-400 rounded-none bg-white
           checked:bg-brand checked:border-0
-          disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-offset-0
+          disabled:opacity-50 disabled:cursor-not-allowed
         `}
         {...props}
       />
       <FilledIcon
         name="check"
-        className={`${checkSize === "small" ? "text-xs!" : "text-lg!"} absolute top-0 ${checkSize === "small" ? "left-1/8" : "left-1/4"} hidden peer-checked:block pointer-events-none text-white`}
+        className={`${checkSize === "small" ? "text-base!" : "text-lg!"} absolute top-0 ${checkSize === "small" ? "left-1/6" : "left-1/4"} hidden peer-checked:block pointer-events-none text-white`}
       />
     </div>
   );
@@ -59,7 +59,7 @@ export const CheckboxWithLabel = ({
   ...props
 }: React.InputHTMLAttributes<HTMLInputElement> & { label: string; containerClassName?: string }) => {
   return (
-    <label className={`flex flex-row gap-2 items-center hover:cursor-pointer ${containerClassName}`}>
+    <label className={`flex flex-row gap-global items-center hover:cursor-pointer ${containerClassName}`}>
       <Checkbox
         id={id}
         checked={checked}
diff --git a/ui/src/components/Container.tsx b/ui/src/components/Container.tsx
index 21c0dfd2..641ead63 100644
--- a/ui/src/components/Container.tsx
+++ b/ui/src/components/Container.tsx
@@ -16,5 +16,5 @@
 import { type PropsWithChildren } from "react";
 
 export const Container = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
-  return <div className={`flex flex-col gap-3 p-3 ${className}`}>{children}</div>;
+  return <div className={`flex flex-col ${className}`}>{children}</div>;
 };
diff --git a/ui/src/components/DateRangePicker.tsx b/ui/src/components/DateRangePicker.tsx
index da340f3f..1e2791ca 100644
--- a/ui/src/components/DateRangePicker.tsx
+++ b/ui/src/components/DateRangePicker.tsx
@@ -115,7 +115,7 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = ({
         ))}
       </Select>
       {selectedRange === customDateRange && (
-        <div className="flex flex-row gap-3 items-center w-full justify-between">
+        <div className="flex flex-row gap-global items-center w-full justify-between">
           <label className="flex flex-col gap-1">
             From
             <input
diff --git a/ui/src/components/FilterButton.tsx b/ui/src/components/FilterButton.tsx
new file mode 100644
index 00000000..5cd310ff
--- /dev/null
+++ b/ui/src/components/FilterButton.tsx
@@ -0,0 +1,29 @@
+import { IconButton } from "./IconButton";
+
+export const FilterButton = ({
+  showFilters,
+  setShowFilters,
+  filterCount,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  showFilters: boolean;
+  setShowFilters: (showFilters: boolean) => void;
+  filterCount: number;
+}) => {
+  return (
+    <IconButton
+      icon="filter_list"
+      text="Filters"
+      aria-expanded={showFilters}
+      aria-haspopup="true"
+      className={`relative btn ${showFilters ? "btn-primary" : ""}`}
+      onClick={() => {
+        setShowFilters(!showFilters);
+      }}
+      {...props}
+      aria-label={`Filters${filterCount > 0 ? ` (${filterCount} active filters)` : ""}`}
+    >
+      {filterCount > 0 && <div className="tag-filter">{filterCount}</div>}
+    </IconButton>
+  );
+};
diff --git a/ui/src/components/FullPageModal.tsx b/ui/src/components/FullPageModal.tsx
index dd0c0fc8..91992a5d 100644
--- a/ui/src/components/FullPageModal.tsx
+++ b/ui/src/components/FullPageModal.tsx
@@ -13,85 +13,54 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { useEffect, useRef } from "react";
-
 import { FocusTrap } from "focus-trap-react";
 
 import { OutlinedIcon } from "~/components/Icon";
 
-interface FullPageModalProps {
+interface FullPageModalProps extends React.HTMLAttributes<HTMLDivElement> {
   open: boolean;
   onClose: () => void;
   children: React.ReactNode;
   headerChildren: React.ReactNode;
-  onHeightChange?: (height: number) => void;
   size?: "none" | "sm" | "md" | "lg";
-  onEscapeDeactivate?: () => boolean;
 }
 
-const FullPageModal = ({
-  open,
-  onClose,
-  children,
-  headerChildren,
-  onHeightChange,
-  size = "lg",
-  onEscapeDeactivate,
-}: FullPageModalProps) => {
-  const modalContentRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (modalContentRef.current && typeof window !== "undefined") {
-      const windowHeight = window.innerHeight;
-      if (onHeightChange) {
-        onHeightChange(windowHeight - modalContentRef.current.getBoundingClientRect().top - 26);
-      }
-    }
-  }, [modalContentRef, onHeightChange]);
-
+const FullPageModal = ({ open, onClose, children, headerChildren, size = "lg", ...props }: FullPageModalProps) => {
   return (
-    <FocusTrap
-      active={open}
-      focusTrapOptions={{
-        allowOutsideClick: true,
-        clickOutsideDeactivates: true,
-        escapeDeactivates: onEscapeDeactivate ?? true,
-        onDeactivate: () => {
-          onClose();
-        },
-      }}
-    >
-      <div className={`${open ? "fixed" : "hidden"} top-0 left-0 right-0 bottom-0 bg-black/20 z-30`}>
-        <div className="p-3 w-full h-full flex items-center justify-center">
+    <div className={`${open ? "fixed" : "hidden"} top-0 left-0 right-0 bottom-0 bg-black/10 z-30`}>
+      <FocusTrap
+        active={open}
+        focusTrapOptions={{
+          allowOutsideClick: true,
+          clickOutsideDeactivates: true,
+          escapeDeactivates: true,
+          onDeactivate: () => {
+            onClose();
+          },
+        }}
+      >
+        <div className="p-global w-full h-full flex items-center justify-center">
           <div
-            className={`relative body-component ${size === "none" ? "" : size === "sm" ? "w-1/4 h-1/2" : size === "md" ? "w-1/2 h-3/4" : "w-full h-full"}`}
+            className={`flex flex-col body-component shadow-xl shadow-black/50 ${size === "none" ? "" : size === "sm" ? "w-1/4 h-1/2" : size === "md" ? "w-1/2 h-3/4" : "w-full h-full"} max-h-screen max-w-screen`}
             aria-modal="true"
             role="dialog"
-            tabIndex={0}
-            autoFocus
+            {...props}
           >
-            <div className="flex flex-col h-full w-full">
-              <div className="popup-header body-header">
-                {headerChildren}
-                <button
-                  className="btn"
-                  onClick={onClose}
-                  aria-label="Close"
-                >
-                  <OutlinedIcon name="close" />
-                </button>
-              </div>
-              <div
-                ref={modalContentRef}
-                className="flex flex-col w-full h-full overflow-y-auto"
+            <div className="popup-header body-header">
+              {headerChildren}
+              <button
+                className="btn"
+                onClick={onClose}
+                aria-label="Close"
               >
-                {children}
-              </div>
+                <OutlinedIcon name="close" />
+              </button>
             </div>
+            <div className="flex flex-col w-full h-full overflow-auto">{children}</div>
           </div>
         </div>
-      </div>
-    </FocusTrap>
+      </FocusTrap>
+    </div>
   );
 };
 
diff --git a/ui/src/components/HomepageCards.tsx b/ui/src/components/HomepageCards.tsx
index 60db8718..6963765d 100644
--- a/ui/src/components/HomepageCards.tsx
+++ b/ui/src/components/HomepageCards.tsx
@@ -21,6 +21,7 @@ import Link from "next/link";
 import { useRuntimeEnv } from "~/runtime-env";
 
 interface HomepageCardProps {
+  id: string;
   title: string;
   imageUrl: string;
   imageAlt: string;
@@ -30,6 +31,7 @@ interface HomepageCardProps {
 }
 
 export const HomepageCard: React.FC<HomepageCardProps> = ({
+  id,
   title,
   imageUrl,
   imageAlt,
@@ -38,7 +40,11 @@ export const HomepageCard: React.FC<HomepageCardProps> = ({
   workflowLink,
 }) => {
   return (
-    <div className="card flex flex-col">
+    <div
+      className="card flex flex-col"
+      role="listitem"
+      id={id}
+    >
       <div className="relative h-50">
         <Image
           fill
@@ -49,8 +55,8 @@ export const HomepageCard: React.FC<HomepageCardProps> = ({
         />
       </div>
       <div className="flex flex-col justify-between flex-grow bg-white">
-        <div className="p-4 flex flex-col">
-          <h4>{title}</h4>
+        <div className="p-global flex flex-col">
+          <h4 id={`${id}-title`}>{title}</h4>
           <p>{body}</p>
         </div>
         <div className="modal-footer">
@@ -59,12 +65,14 @@ export const HomepageCard: React.FC<HomepageCardProps> = ({
             href={tutorialLink}
             target="_blank"
             rel="noopener noreferrer"
+            aria-describedby={`${id}-title`}
           >
             View Tutorial
           </a>
           <Link
             className="btn btn-primary"
             href={workflowLink}
+            aria-describedby={`${id}-title`}
           >
             Launch Workflow
           </Link>
@@ -78,10 +86,20 @@ export const HomepageCards = () => {
   const runtimeEnv = useRuntimeEnv();
 
   return (
-    <div className="flex flex-col gap-3 p-3">
-      <h2 className="text-center">Getting Started</h2>
-      <div className="grid grid-cols-1 gap-4 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2">
+    <div className="flex flex-col gap-global p-global">
+      <h2
+        id="getting-started"
+        className="text-center"
+      >
+        Getting Started
+      </h2>
+      <div
+        className="grid grid-cols-1 gap-global xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2"
+        role="list"
+        aria-labelledby="getting-started"
+      >
         <HomepageCard
+          id="isaac-sim-sdg"
           title="Isaac Sim: Generating Synthetic Data"
           imageUrl="/sdg.png"
           imageAlt="Synthetic Data Generation"
@@ -104,6 +122,7 @@ export const HomepageCards = () => {
           workflowLink="/workflows/submit/isaac_sim_sdg"
         />
         <HomepageCard
+          id="torchrun-training"
           title="TorchRun: Training Deep Learning Models"
           imageUrl="/train.jpg"
           imageAlt="Training"
@@ -125,6 +144,7 @@ export const HomepageCards = () => {
           workflowLink="/workflows/submit/mnist_training"
         />
         <HomepageCard
+          id="isaac-lab-training"
           title="Isaac Lab: Training robot policy with Reinforcement Learning (RL)"
           imageUrl="/robot.png"
           imageAlt="Humanoid in Isaac Lab"
@@ -146,6 +166,7 @@ export const HomepageCards = () => {
           workflowLink="/workflows/submit/reinforcement_learning"
         />
         <HomepageCard
+          id="isaac-groot-notebook"
           title="Isaac Groot: Interactive Notebook for Inference and Fine-tuning"
           imageUrl="/groot.png"
           imageAlt="Groot N1.5"
diff --git a/ui/src/components/HomepageHero.tsx b/ui/src/components/HomepageHero.tsx
index b4d58294..a3cffb82 100644
--- a/ui/src/components/HomepageHero.tsx
+++ b/ui/src/components/HomepageHero.tsx
@@ -36,12 +36,12 @@ export const HomepageHero = () => {
       </>
       <div className="bg-gradient-to-r from-black/75 to-black/25 text-white relative p-4 lg:px-16 lg:py-6">
         <div className="flex flex-col gap-4 justify-start">
-          <h1>Welcome to {env.NEXT_PUBLIC_APP_NAME}</h1>
+          <h1 id="welcome-to-osmo">Welcome to {env.NEXT_PUBLIC_APP_NAME}</h1>
           <p>
             Run your workflows seamlessly on any cloud environment including AWS, Azure, GCP, NVIDIA Omniverse Cloud and
             On-premise Kubernetes clusters
           </p>
-          <ul>
+          <ul aria-labelledby="welcome-to-osmo">
             <li>Build a Data factory to manage your synthetic and real data</li>
             <li>Train Deep Neural Networks with experiment tracking</li>
             <li>Evaluate your models and publish the results</li>
diff --git a/ui/src/components/IconButton.tsx b/ui/src/components/IconButton.tsx
new file mode 100644
index 00000000..d1e33f14
--- /dev/null
+++ b/ui/src/components/IconButton.tsx
@@ -0,0 +1,23 @@
+import { FilledIcon } from "./Icon";
+
+export const IconButton = ({
+  icon,
+  text,
+  alwaysShowText = false,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { icon: string; text?: string; alwaysShowText?: boolean }) => {
+  return (
+    <button {...props}>
+      <FilledIcon name={icon} />
+      {text && (
+        <span
+          className={`${alwaysShowText ? "block" : "hidden lg:block"}`}
+          aria-label={text}
+        >
+          {text}
+        </span>
+      )}
+      {props.children}
+    </button>
+  );
+};
diff --git a/ui/src/components/InlineBanner.tsx b/ui/src/components/InlineBanner.tsx
index 92b268ca..d16d3ccf 100644
--- a/ui/src/components/InlineBanner.tsx
+++ b/ui/src/components/InlineBanner.tsx
@@ -42,10 +42,10 @@ export const InlineBanner = ({
 
   return (
     <div
-      className={`flex items-center gap-3 ${statusColor[status]} p-2 min-h-10 ${className}`}
+      className={`flex items-center gap-global ${statusColor[status]} p-2 min-h-10 ${className}`}
       aria-live="polite"
     >
-      {statusIcon[status] && <span>{statusIcon[status]}</span>}
+      {statusIcon[status] && <span aria-hidden="true">{statusIcon[status]}</span>}
       {children}
     </div>
   );
diff --git a/ui/src/components/JSONEditor.tsx b/ui/src/components/JSONEditor.tsx
index b68cf24e..28b2ab34 100644
--- a/ui/src/components/JSONEditor.tsx
+++ b/ui/src/components/JSONEditor.tsx
@@ -146,8 +146,8 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
       onSubmit={handleSaveChanges}
       className="w-full h-full"
     >
-      <div className="flex flex-col gap-3 h-full w-full">
-        <div className="w-full h-full p-3">
+      <div className="flex flex-col gap-global h-full w-full">
+        <div className="w-full h-full p-global">
           {isEditMode ? (
             <textarea
               aria-label="JSON Editor"
@@ -166,7 +166,7 @@ export const JSONEditor: React.FC<JSONEditorProps> = ({
           )}
         </div>
         <div className="flex flex-col">
-          {message && <InlineBanner status={isError ? "error" : "success"}>{message}</InlineBanner>}
+          <InlineBanner status={!message ? "none" : isError ? "error" : "success"}>{message}</InlineBanner>
           <div className="modal-footer">
             {isEditMode ? (
               <>
diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 12803358..a7779c0d 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -17,15 +17,18 @@
 
 import { type PropsWithChildren, useEffect, useRef, useState } from "react";
 
+import { usePathname } from "next/navigation";
 import { ThemeProvider } from "next-themes";
+import { useMediaQuery } from "usehooks-ts";
 
 import { env } from "~/env.mjs";
 import { type AuthClaims } from "~/models/auth-model";
 import { ZERO_WIDTH_SPACE } from "~/utils/string";
 
 import { useAuth } from "./AuthProvider";
-import { OutlinedIcon } from "./Icon";
+import { FilledIcon, OutlinedIcon } from "./Icon";
 import { NavbarProfileMenu } from "./NavbarProfileMenu";
+import { HeaderOutlet, PageHeaderProvider } from "./PageHeaderProvider";
 import { SlideOut } from "./SlideOut";
 import { TopMenu } from "./TopMenu";
 
@@ -46,10 +49,13 @@ const getUserDetails = (claims: AuthClaims | null) => {
 
 export const Layout = ({ children }: PropsWithChildren) => {
   const auth = useAuth();
-  const [menuOpen, setMenuOpen] = useState(false);
+  const pathname = usePathname();
+  const [profileMenuOpen, setProfileMenuOpen] = useState(false);
+  const [mainMenuOpen, setMainMenuOpen] = useState(false);
   const { initials, userName } = getUserDetails(auth.claims);
   const headerRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const showTopMenu = useMediaQuery("(min-width: 1024px)");
+  const mainMenuButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     // Only run in browser environment
@@ -79,70 +85,141 @@ export const Layout = ({ children }: PropsWithChildren) => {
 
   return (
     <ThemeProvider forcedTheme="light">
-      <div className="flex flex-col h-screen w-screen">
-        <header
-          className="page-header"
-          ref={headerRef}
-        >
-          <div className="flex items-center gap-8">
-            <div className="flex items-center gap-2">
-              <svg
-                enableBackground="new 0 0 974.7 179.7"
-                version="1.1"
-                viewBox="0 0 974.7 179.7"
-                xmlns="http://www.w3.org/2000/svg"
-                width="110"
-                height="44"
-                className="mt-[-2px]"
-              >
-                <title>Artificial Intelligence Computing Leadership from NVIDIA</title>
-                <path d="m962.1 144.1v-2.7h1.7c0.9 0 2.2 0.1 2.2 1.2s-0.7 1.5-1.8 1.5h-2.1m0 1.9h1.2l2.7 4.7h2.9l-3-4.9c1.5 0.1 2.7-1 2.8-2.5v-0.4c0-2.6-1.8-3.4-4.8-3.4h-4.3v11.2h2.5v-4.7m12.6-0.9c0-6.6-5.1-10.4-10.8-10.4s-10.8 3.8-10.8 10.4 5.1 10.4 10.8 10.4 10.8-3.8 10.8-10.4m-3.2 0c0.2 4.2-3.1 7.8-7.3 8h-0.3c-4.4 0.2-8.1-3.3-8.3-7.7s3.3-8.1 7.7-8.3 8.1 3.3 8.3 7.7c-0.1 0.1-0.1 0.2-0.1 0.3z"></path>
-                <path d="m578.2 34v118h33.3v-118h-33.3zm-262-0.2v118.1h33.6v-91.7l26.2 0.1c8.6 0 14.6 2.1 18.7 6.5 5.3 5.6 7.4 14.7 7.4 31.2v53.9h32.6v-65.2c0-46.6-29.7-52.9-58.7-52.9h-59.8zm315.7 0.2v118h54c28.8 0 38.2-4.8 48.3-15.5 7.2-7.5 11.8-24.1 11.8-42.2 0-16.6-3.9-31.4-10.8-40.6-12.2-16.5-30-19.7-56.6-19.7h-46.7zm33 25.6h14.3c20.8 0 34.2 9.3 34.2 33.5s-13.4 33.6-34.2 33.6h-14.3v-67.1zm-134.7-25.6l-27.8 93.5-26.6-93.5h-36l38 118h48l38.4-118h-34zm231.4 118h33.3v-118h-33.3v118zm93.4-118l-46.5 117.9h32.8l7.4-20.9h55l7 20.8h35.7l-46.9-117.8h-44.5zm21.6 21.5l20.2 55.2h-41l20.8-55.2z"></path>
-                <path
-                  fill="#76B900"
-                  d="m101.3 53.6v-16.2c1.6-0.1 3.2-0.2 4.8-0.2 44.4-1.4 73.5 38.2 73.5 38.2s-31.4 43.6-65.1 43.6c-4.5 0-8.9-0.7-13.1-2.1v-49.2c17.3 2.1 20.8 9.7 31.1 27l23.1-19.4s-16.9-22.1-45.3-22.1c-3-0.1-6 0.1-9 0.4m0-53.6v24.2l4.8-0.3c61.7-2.1 102 50.6 102 50.6s-46.2 56.2-94.3 56.2c-4.2 0-8.3-0.4-12.4-1.1v15c3.4 0.4 6.9 0.7 10.3 0.7 44.8 0 77.2-22.9 108.6-49.9 5.2 4.2 26.5 14.3 30.9 18.7-29.8 25-99.3 45.1-138.7 45.1-3.8 0-7.4-0.2-11-0.6v21.1h170.2v-179.7h-170.4zm0 116.9v12.8c-41.4-7.4-52.9-50.5-52.9-50.5s19.9-22 52.9-25.6v14h-0.1c-17.3-2.1-30.9 14.1-30.9 14.1s7.7 27.3 31 35.2m-73.5-39.5s24.5-36.2 73.6-40v-13.2c-54.4 4.4-101.4 50.4-101.4 50.4s26.6 77 101.3 84v-14c-54.8-6.8-73.5-67.2-73.5-67.2z"
-                ></path>
-              </svg>
-              <p className="text-lg font-bold">{env.NEXT_PUBLIC_APP_NAME}</p>
-            </div>
-            <TopMenu
-              showIcons={false}
-              className="hidden md:flex lg:flex items-center gap-4 md:gap-2 text-base"
-            />
-          </div>
-          <button
-            className="btn btn-tertiary"
-            onClick={() => {
-              if (!menuOpen) {
-                setMenuOpen(true);
-              }
-            }}
+      <PageHeaderProvider>
+        <div className="flex flex-col h-screen w-screen">
+          <a
+            href="#main-content"
+            className="btn skip-to-content"
+          >
+            Skip to content
+          </a>
+          <header
+            className="page-header py-1 px-1 md:px-2 bg-white lg:border-b-0 shadow-sm"
+            ref={headerRef}
           >
-            <span className="rounded-full bg-blue-800 text-white p-1">{initials}</span>
-            {userName}
-            <OutlinedIcon name="keyboard_arrow_down" />
-          </button>
-        </header>
-        <div
-          className="relative flex flex-col h-full w-screen overflow-y-auto"
-          ref={containerRef}
-        >
-          {children}
-          <SlideOut
-            id="main-menu"
-            open={menuOpen}
-            containerRef={containerRef}
-            top={-2}
-            onClose={() => {
-              setMenuOpen(false);
-            }}
-            aria-label="Main Menu"
-            dimBackground={false}
+            <div className="flex items-center gap-global grow min-w-0">
+              <div className="flex items-center gap-global">
+                <svg
+                  enableBackground="new 0 0 974.7 179.7"
+                  version="1.1"
+                  viewBox="0 0 974.7 179.7"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="110"
+                  height="44"
+                  className="mt-[-2px]"
+                >
+                  <title>Artificial Intelligence Computing Leadership from NVIDIA</title>
+                  <path d="m962.1 144.1v-2.7h1.7c0.9 0 2.2 0.1 2.2 1.2s-0.7 1.5-1.8 1.5h-2.1m0 1.9h1.2l2.7 4.7h2.9l-3-4.9c1.5 0.1 2.7-1 2.8-2.5v-0.4c0-2.6-1.8-3.4-4.8-3.4h-4.3v11.2h2.5v-4.7m12.6-0.9c0-6.6-5.1-10.4-10.8-10.4s-10.8 3.8-10.8 10.4 5.1 10.4 10.8 10.4 10.8-3.8 10.8-10.4m-3.2 0c0.2 4.2-3.1 7.8-7.3 8h-0.3c-4.4 0.2-8.1-3.3-8.3-7.7s3.3-8.1 7.7-8.3 8.1 3.3 8.3 7.7c-0.1 0.1-0.1 0.2-0.1 0.3z"></path>
+                  <path d="m578.2 34v118h33.3v-118h-33.3zm-262-0.2v118.1h33.6v-91.7l26.2 0.1c8.6 0 14.6 2.1 18.7 6.5 5.3 5.6 7.4 14.7 7.4 31.2v53.9h32.6v-65.2c0-46.6-29.7-52.9-58.7-52.9h-59.8zm315.7 0.2v118h54c28.8 0 38.2-4.8 48.3-15.5 7.2-7.5 11.8-24.1 11.8-42.2 0-16.6-3.9-31.4-10.8-40.6-12.2-16.5-30-19.7-56.6-19.7h-46.7zm33 25.6h14.3c20.8 0 34.2 9.3 34.2 33.5s-13.4 33.6-34.2 33.6h-14.3v-67.1zm-134.7-25.6l-27.8 93.5-26.6-93.5h-36l38 118h48l38.4-118h-34zm231.4 118h33.3v-118h-33.3v118zm93.4-118l-46.5 117.9h32.8l7.4-20.9h55l7 20.8h35.7l-46.9-117.8h-44.5zm21.6 21.5l20.2 55.2h-41l20.8-55.2z"></path>
+                  <path
+                    fill="#76B900"
+                    d="m101.3 53.6v-16.2c1.6-0.1 3.2-0.2 4.8-0.2 44.4-1.4 73.5 38.2 73.5 38.2s-31.4 43.6-65.1 43.6c-4.5 0-8.9-0.7-13.1-2.1v-49.2c17.3 2.1 20.8 9.7 31.1 27l23.1-19.4s-16.9-22.1-45.3-22.1c-3-0.1-6 0.1-9 0.4m0-53.6v24.2l4.8-0.3c61.7-2.1 102 50.6 102 50.6s-46.2 56.2-94.3 56.2c-4.2 0-8.3-0.4-12.4-1.1v15c3.4 0.4 6.9 0.7 10.3 0.7 44.8 0 77.2-22.9 108.6-49.9 5.2 4.2 26.5 14.3 30.9 18.7-29.8 25-99.3 45.1-138.7 45.1-3.8 0-7.4-0.2-11-0.6v21.1h170.2v-179.7h-170.4zm0 116.9v12.8c-41.4-7.4-52.9-50.5-52.9-50.5s19.9-22 52.9-25.6v14h-0.1c-17.3-2.1-30.9 14.1-30.9 14.1s7.7 27.3 31 35.2m-73.5-39.5s24.5-36.2 73.6-40v-13.2c-54.4 4.4-101.4 50.4-101.4 50.4s26.6 77 101.3 84v-14c-54.8-6.8-73.5-67.2-73.5-67.2z"
+                  ></path>
+                </svg>
+                <p className="text-lg font-bold">{env.NEXT_PUBLIC_APP_NAME}</p>
+              </div>
+              {showTopMenu ? (
+                <div role="navigation">
+                  <ul
+                    className="list-none flex items-center gap-4 ml-2"
+                    aria-label="Main menu"
+                  >
+                    <TopMenu
+                      showIcons={false}
+                      className="m-0"
+                    />
+                  </ul>
+                </div>
+              ) : (
+                <>
+                  <button
+                    className="btn btn-tertiary px-0 gap-0 relative capitalize text-lg font-bold"
+                    aria-expanded={mainMenuOpen}
+                    aria-haspopup="true"
+                    aria-controls="main-menu"
+                    onClick={() => {
+                      setMainMenuOpen(!mainMenuOpen);
+                    }}
+                    ref={mainMenuButtonRef}
+                  >
+                    {pathname.split("/")[1]}
+                    <OutlinedIcon
+                      className="bg-transparent absolute text-3xl! bottom-[-1rem] right-[-0.6rem]"
+                      name="arrow_drop_down"
+                    />
+                  </button>
+                </>
+              )}
+              <HeaderOutlet />
+            </div>
+            <button
+              className="btn btn-tertiary p-0"
+              aria-expanded={profileMenuOpen}
+              aria-haspopup="true"
+              aria-controls="profile-menu"
+              onClick={() => {
+                if (!profileMenuOpen) {
+                  setProfileMenuOpen(true);
+                }
+              }}
+            >
+              <FilledIcon
+                name="account_circle"
+                className="block! lg:hidden! text-blue-800"
+              />
+              <div className="hidden lg:flex flex-row items-center pl-0 pr-2 gap-0 relative">
+                <span className="rounded-full bg-blue-800 text-white p-1">{initials}</span>
+                <span className="ml-1 ">{userName}</span>
+                <OutlinedIcon
+                  className="bg-transparent absolute bottom-[-0.5rem] right-0"
+                  name="arrow_drop_down"
+                />
+              </div>
+            </button>
+          </header>
+          <main
+            id="main-content"
+            tabIndex={-1}
+            className="relative flex flex-col h-full w-screen overflow-y-auto"
+            aria-label="Main content"
           >
-            <NavbarProfileMenu onItemClick={() => setMenuOpen(false)} />
-          </SlideOut>
+            {children}
+            <SlideOut
+              id="main-menu"
+              open={mainMenuOpen}
+              onClose={() => setMainMenuOpen(false)}
+              dimBackground={false}
+              className="border-t-0"
+              left={mainMenuButtonRef.current?.getBoundingClientRect().left ?? 0}
+              position="left"
+            >
+              <div role="navigation">
+                <ul
+                  className="flex flex-col list-none p-global"
+                  aria-label="Main menu"
+                >
+                  <TopMenu className="m-0 py-0" />
+                </ul>
+              </div>
+            </SlideOut>
+            <SlideOut
+              id="profile-menu"
+              open={profileMenuOpen}
+              onClose={() => {
+                setProfileMenuOpen(false);
+              }}
+              dimBackground={false}
+              className="border-t-0"
+            >
+              <NavbarProfileMenu
+                onItemClick={() => setProfileMenuOpen(false)}
+                userName={userName}
+                initials={initials}
+              />
+            </SlideOut>
+          </main>
         </div>
-      </div>
+      </PageHeaderProvider>
     </ThemeProvider>
   );
 };
diff --git a/ui/src/components/Multiselect.tsx b/ui/src/components/Multiselect.tsx
index ec796db4..2f973d26 100644
--- a/ui/src/components/Multiselect.tsx
+++ b/ui/src/components/Multiselect.tsx
@@ -38,6 +38,7 @@ export const Multiselect: React.FC<MultiselectProps & Omit<InputHTMLAttributes<H
 }) => {
   const [searchValue, setSearchValue] = useState<string>("");
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const [lastActionText, setLastActionText] = useState<string>("");
 
   const selectedOptions = useMemo(() => {
     return Array.from(filter.entries())
@@ -67,17 +68,26 @@ export const Multiselect: React.FC<MultiselectProps & Omit<InputHTMLAttributes<H
 
   return (
     <>
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-global">
         {selectedOptions.length > 0 && (
-          <div className="flex flex-row flex-wrap gap-1 p-1">
+          <div
+            className="flex flex-row flex-wrap gap-1 p-1"
+            role="list"
+            aria-label="Selected options"
+          >
             {selectedOptions.map((o) => (
               <button
+                role="listitem"
                 type="button"
                 className="tag-container"
                 key={o.value}
                 onClick={() => {
                   setFilter(new Map(filter.set(o.value, false)));
                   searchInputRef.current?.focus();
+                  setLastActionText(`Removed ${o.label}`);
+                  setTimeout(() => {
+                    setLastActionText("");
+                  }, 3000);
                 }}
               >
                 <Tag
@@ -103,17 +113,27 @@ export const Multiselect: React.FC<MultiselectProps & Omit<InputHTMLAttributes<H
           autoComplete="off"
           {...props}
           className="w-full"
+          aria-description={lastActionText}
         />
         {filteredOptions.length > 0 && (
-          <div className="flex flex-row flex-wrap gap-1 p-1">
+          <div
+            className="flex flex-row flex-wrap gap-1 p-1"
+            role="list"
+            aria-label="Available options"
+          >
             {filteredOptions.map((o) => (
               <button
                 type="button"
+                role="listitem"
                 className="tag-container"
                 key={o.value}
                 onClick={() => {
                   setFilter(new Map(filter.set(o.value, true)));
                   searchInputRef.current?.focus();
+                  setLastActionText(`Added ${o.label}`);
+                  setTimeout(() => {
+                    setLastActionText("");
+                  }, 3000);
                 }}
               >
                 <Tag
diff --git a/ui/src/components/NavbarProfileMenu.tsx b/ui/src/components/NavbarProfileMenu.tsx
index 572db1c5..fd19b774 100644
--- a/ui/src/components/NavbarProfileMenu.tsx
+++ b/ui/src/components/NavbarProfileMenu.tsx
@@ -25,12 +25,20 @@ import { useRuntimeEnv } from "~/runtime-env";
 import { api } from "~/trpc/react";
 
 import { FilledIcon, OutlinedIcon } from "./Icon";
+import { IconButton } from "./IconButton";
 import { InlineBanner } from "./InlineBanner";
 import { SlideOut } from "./SlideOut";
 import { TextInput } from "./TextInput";
-import { TopMenu } from "./TopMenu";
 
-export const NavbarProfileMenu = ({ onItemClick }: { onItemClick: () => void }) => {
+export const NavbarProfileMenu = ({
+  onItemClick,
+  userName,
+  initials,
+}: {
+  onItemClick: () => void;
+  userName: string;
+  initials: string;
+}) => {
   const auth = useAuth();
   const runtimeEnv = useRuntimeEnv();
   const [openCLI, setOpenCLI] = useState(false);
@@ -40,45 +48,54 @@ export const NavbarProfileMenu = ({ onItemClick }: { onItemClick: () => void })
     refetchOnWindowFocus: false,
   });
   const { setSafeTimeout } = useSafeTimeout();
-
   return (
-    <>
-      <div className="flex flex-col justify-between h-full">
-        <div>
-          <TopMenu
-            className="flex-col items-start border-b border-border p-3 md:hidden"
-            onItemClick={onItemClick}
+    <div role="complementary">
+      <div className="flex lg:hidden flex-row body-header shadow-sm p-1 items-center">
+        <span className="rounded-full bg-blue-800 text-white p-1">{initials}</span>
+        <p className="p-global font-semibold whitespace-nowrap">{userName}</p>
+      </div>
+      <ul
+        className="flex flex-col list-none py-global"
+        aria-label="Profile Menu"
+      >
+        <li className="m-0 px-global list-none">
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={runtimeEnv.DOCS_BASE_URL}
+            className="btn btn-link no-underline w-full"
+          >
+            <FilledIcon name="menu_book" />
+            Documentation
+          </a>
+        </li>
+        <li className="m-0 px-global list-none">
+          <IconButton
+            alwaysShowText
+            icon="download"
+            text="Download CLI"
+            className="btn btn-link no-underline w-full"
+            onClick={() => {
+              setOpenCLI(!openCLI);
+            }}
+            aria-expanded={openCLI}
+            aria-haspopup="true"
+            aria-controls="cli"
           />
-          <div className="p-3 border-b border-border">
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={runtimeEnv.DOCS_BASE_URL}
-              className="btn btn-link no-underline w-full"
-            >
-              <FilledIcon name="menu_book" />
-              Documentation
-            </a>
-            <button
-              className="btn btn-link no-underline w-full"
-              onClick={() => {
-                setOpenCLI(!openCLI);
-              }}
-            >
-              <FilledIcon name="download" />
-              Download CLI
-            </button>
-            <Link
-              href={`/workflows/submit`}
-              className="btn btn-link no-underline w-full"
-              onClick={onItemClick}
-            >
-              <OutlinedIcon name="send" />
-              Submit Workflow
-            </Link>
-          </div>
-          {auth.claims && (
-            <div className="p-3">
+        </li>
+        <li className="m-0 px-global list-none">
+          <Link
+            href={`/workflows/submit`}
+            className="btn btn-link no-underline w-full"
+            onClick={onItemClick}
+          >
+            <OutlinedIcon name="send" />
+            Submit Workflow
+          </Link>
+        </li>
+        {auth.claims && (
+          <>
+            <li className="m-0 px-global mt-global pt-global list-none border-t border-border">
               <Link
                 href="/profile"
                 className="btn btn-link no-underline w-full"
@@ -87,6 +104,8 @@ export const NavbarProfileMenu = ({ onItemClick }: { onItemClick: () => void })
                 <OutlinedIcon name="manage_accounts" />
                 Settings
               </Link>
+            </li>
+            <li className="m-0 px-global list-none">
               <button
                 className="btn btn-link no-underline w-full"
                 onClick={(e) => {
@@ -98,20 +117,23 @@ export const NavbarProfileMenu = ({ onItemClick }: { onItemClick: () => void })
                 <OutlinedIcon name="logout" />
                 Sign Out
               </button>
-            </div>
-          )}
-        </div>
-        {version.data && <p className="body-footer p-1 text-center sticky bottom-0">{version.data}</p>}
-      </div>
+            </li>
+          </>
+        )}
+      </ul>
+      {version.data && <p className="body-footer p-1 text-center sticky bottom-0 border-none">{version.data}</p>}
       <SlideOut
         id="cli"
         open={openCLI}
         onClose={() => setOpenCLI(false)}
         className="fixed top-0 right-2 mt-32 rounded-xl w-fit max-w-[90%]"
       >
-        <div className="flex flex-col gap-3 p-3">
-          <form onSubmit={(e) => e.preventDefault()}>
-            <div className="grid grid-cols-[1fr_auto] gap-3">
+        <div className="flex flex-col gap-global p-global">
+          <form
+            onSubmit={(e) => e.preventDefault()}
+            className="mt-6"
+          >
+            <div className="grid grid-cols-[1fr_auto] gap-global">
               <TextInput
                 id="cli-curl"
                 value={cliCurl}
@@ -121,7 +143,7 @@ export const NavbarProfileMenu = ({ onItemClick }: { onItemClick: () => void })
               />
               <button
                 type="button"
-                className="btn btn-secondary mt-4"
+                className="btn btn-secondary mt-5"
                 onClick={async () => {
                   if (navigator.clipboard) {
                     await navigator.clipboard.writeText(cliCurl);
@@ -135,9 +157,9 @@ export const NavbarProfileMenu = ({ onItemClick }: { onItemClick: () => void })
               </button>
             </div>
           </form>
-          {copied && <InlineBanner status="success">Copied</InlineBanner>}
+          <InlineBanner status={copied ? "success" : "none"}>{copied ? "Copied" : ""}</InlineBanner>
         </div>
       </SlideOut>
-    </>
+    </div>
   );
 };
diff --git a/ui/src/components/PageError.tsx b/ui/src/components/PageError.tsx
index 0766da26..83ca9f1d 100644
--- a/ui/src/components/PageError.tsx
+++ b/ui/src/components/PageError.tsx
@@ -36,24 +36,29 @@ export const PageError = ({
   className?: string;
 }) => {
   return (
-    <div className="h-full w-full flex flex-col">
+    <div
+      className="h-full w-full flex flex-col"
+      role="alert"
+    >
       {subText && (
         <InlineBanner status="error">
-          <div className="flex flex-col gap-2">
+          <div className="flex flex-col gap-global">
             {subTextTitle && <p>{subTextTitle}</p>}
             <p>{subText}</p>
           </div>
         </InlineBanner>
       )}
-      <div
-        className={`grow flex flex-col justify-center items-center text-center gap-2 p-4 ${className}`}
-        aria-live="polite"
-      >
+      <div className={`grow flex flex-col justify-center items-center text-center gap-global p-4 ${className}`}>
         <OutlinedIcon
           name={icon}
           className={`${size === "lg" ? "text-6xl!" : "text-4xl!"}`}
         />
-        <h2 className={`p-0 ${size === "lg" ? "text-2xl" : "text-xl"}`}>{title}</h2>
+        <p
+          aria-label={title}
+          className={`p-0 font-bold ${size === "lg" ? "text-2xl" : "text-xl"}`}
+        >
+          {title}
+        </p>
         <p>{errorMessage ?? "Unknown error occurred"}</p>
         {children}
       </div>
diff --git a/ui/src/components/PageHeader.tsx b/ui/src/components/PageHeader.tsx
new file mode 100644
index 00000000..6a4b5715
--- /dev/null
+++ b/ui/src/components/PageHeader.tsx
@@ -0,0 +1,45 @@
+//SPDX-FileCopyrightText: Copyright (c) 2025 NVIDIA CORPORATION. All rights reserved.
+
+//Licensed under the Apache License, Version 2.0 (the "License");
+//you may not use this file except in compliance with the License.
+//You may obtain a copy of the License at
+
+//http://www.apache.org/licenses/LICENSE-2.0
+
+//Unless required by applicable law or agreed to in writing, software
+//distributed under the License is distributed on an "AS IS" BASIS,
+//WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//See the License for the specific language governing permissions and
+//limitations under the License.
+
+//SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import { useEffect, type PropsWithChildren } from "react";
+
+import { usePathname } from "next/navigation";
+
+import { usePageHeaderContext } from "./PageHeaderProvider";
+
+export default function PageHeader({ children }: PropsWithChildren) {
+  const { setHeaderNode } = usePageHeaderContext();
+  const pathname = usePathname();
+  const title = pathname.split("/")[1];
+
+  useEffect(() => {
+    // Provide a compact header for small screens to be rendered in the root Layout header.
+    setHeaderNode(<div className="flex items-center gap-global justify-end">{children}</div>);
+
+    return () => {
+      setHeaderNode(null);
+    };
+  }, [children, setHeaderNode]);
+
+  // Inline header for large screens; hidden on small to avoid duplication.
+  return (
+    <div className="page-header hidden lg:flex">
+      {title && <h1>{title}</h1>}
+      <div className="flex items-center gap-global grow justify-end">{children}</div>
+    </div>
+  );
+}
diff --git a/ui/src/components/PageHeaderProvider.tsx b/ui/src/components/PageHeaderProvider.tsx
new file mode 100644
index 00000000..d4167e72
--- /dev/null
+++ b/ui/src/components/PageHeaderProvider.tsx
@@ -0,0 +1,60 @@
+//SPDX-FileCopyrightText: Copyright (c) 2025 NVIDIA CORPORATION. All rights reserved.
+
+//Licensed under the Apache License, Version 2.0 (the "License");
+//you may not use this file except in compliance with the License.
+//You may obtain a copy of the License at
+
+//http://www.apache.org/licenses/LICENSE-2.0
+
+//Unless required by applicable law or agreed to in writing, software
+//distributed under the License is distributed on an "AS IS" BASIS,
+//WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//See the License for the specific language governing permissions and
+//limitations under the License.
+
+//SPDX-License-Identifier: Apache-2.0
+"use client";
+
+import { createContext, useContext, useMemo, useState } from "react";
+
+type PageHeaderContextValue = {
+  headerNode: React.ReactNode | null;
+  setHeaderNode: (node: React.ReactNode | null) => void;
+  title?: string;
+  setTitle: (title?: string) => void;
+};
+
+const PageHeaderContext = createContext<PageHeaderContextValue | undefined>(undefined);
+
+export const PageHeaderProvider = ({ children }: { children: React.ReactNode }) => {
+  const [headerNode, setHeaderNode] = useState<React.ReactNode | null>(null);
+  const [title, setTitle] = useState<string | undefined>(undefined);
+
+  const value = useMemo(
+    () => ({
+      headerNode,
+      setHeaderNode,
+      title,
+      setTitle,
+    }),
+    [headerNode, title],
+  );
+
+  return <PageHeaderContext.Provider value={value}>{children}</PageHeaderContext.Provider>;
+};
+
+export const usePageHeaderContext = () => {
+  const ctx = useContext(PageHeaderContext);
+  if (!ctx) {
+    throw new Error("usePageHeaderContext must be used within a PageHeaderProvider");
+  }
+  return ctx;
+};
+
+export const HeaderOutlet = () => {
+  const { headerNode } = usePageHeaderContext();
+  if (!headerNode) {
+    return null;
+  }
+  return <div className="lg:hidden grow min-w-0">{headerNode}</div>;
+};
diff --git a/ui/src/components/RecordBuilder.tsx b/ui/src/components/RecordBuilder.tsx
index 84410911..143bc09f 100644
--- a/ui/src/components/RecordBuilder.tsx
+++ b/ui/src/components/RecordBuilder.tsx
@@ -70,6 +70,7 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
   const [newFieldKey, setNewFieldKey] = useState("");
   const [newFieldValue, setNewFieldValue] = useState("");
   const [isModified, setIsModified] = useState(false);
+  const [lastActionText, setLastActionText] = useState<string>("");
 
   useEffect(() => {
     setIsModified(JSON.stringify(flattenedData) !== JSON.stringify(initialData));
@@ -80,6 +81,7 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
     delete updatedData[fieldKey];
     setFlattenedData(updatedData);
     setDeletedFields({ ...deletedFields, [fieldKey]: fieldValue });
+    setLastActionText(`Deleted ${fieldKey}: ${fieldValue as string}`);
   };
 
   const addField = (fieldKey: string, fieldValue: unknown) => {
@@ -88,6 +90,7 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
       delete deletedFields[fieldKey];
       setNewFieldKey("");
       setNewFieldValue("");
+      setLastActionText(`Added ${newFieldKey}: ${newFieldValue}`);
     }
   };
 
@@ -97,20 +100,29 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
   };
 
   const handleSaveChanges = () => {
-    onSave(deletedFields, unflattenObject(flattenedData));
-    setDeletedFields({});
+    if (isModified) {
+      onSave(deletedFields, unflattenObject(flattenedData));
+      setDeletedFields({});
+      setNewFieldKey("");
+      setNewFieldValue("");
+      setIsModified(false);
+    }
   };
 
   const handleUndoChanges = () => {
-    setFlattenedData(flattenObject(initialData));
-    setDeletedFields({});
-    setNewFieldKey("");
-    setNewFieldValue("");
+    if (isModified) {
+      setFlattenedData(flattenObject(initialData));
+      setDeletedFields({});
+      setNewFieldKey("");
+      setNewFieldValue("");
+      setIsModified(false);
+      setLastActionText("Labels reset");
+    }
   };
 
   return (
     <div className="flex flex-col h-full justify-between">
-      <div className="flex flex-col gap-6 p-3">
+      <div className="flex flex-col gap-6 p-global">
         <div className="flex flex-col">
           <h3
             className="m-0 p-0 text-base"
@@ -126,6 +138,7 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
             {Object.keys(flattenedData).length > 0 ? (
               Object.entries(flattenedData).map(([key, value], index) => (
                 <button
+                  role="listitem"
                   className="btn btn-badge"
                   key={index}
                   onClick={() => handleDeleteField(key, value)}
@@ -146,12 +159,12 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
           </div>
         </div>
         <form onSubmit={handleAddField}>
-          <div className="grid grid-cols-[1fr_auto] gap-3">
+          <div className="grid grid-cols-[1fr_auto] gap-global">
             <fieldset
               aria-label="Add New Label"
               className="w-full"
             >
-              <div className="grid grid-cols-[1fr_1fr] gap-3 w-full">
+              <div className="grid grid-cols-[1fr_1fr] gap-global w-full">
                 <TextInput
                   id="field"
                   value={newFieldKey}
@@ -174,9 +187,9 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
             </fieldset>
             <button
               type="submit"
-              className="btn mt-4 h-8"
+              className="btn mt-5 h-8"
               aria-label="Add Label"
-              disabled={!newFieldKey.trim() || !newFieldValue.trim()}
+              aria-disabled={!newFieldKey.trim() || !newFieldValue.trim()}
             >
               <OutlinedIcon name="add" />
             </button>
@@ -193,6 +206,7 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
             {Object.keys(deletedFields).length > 0 ? (
               Object.entries(deletedFields).map(([field, value], index) => (
                 <button
+                  role="listitem"
                   className="btn btn-badge"
                   key={index}
                   onClick={() => {
@@ -215,12 +229,18 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
         </div>
       </div>
       <div className="flex flex-col">
-        {message && <InlineBanner status={isError ? "error" : "success"}>{message}</InlineBanner>}
+        <InlineBanner status={isError ? "error" : message ? "success" : "none"}>{message}</InlineBanner>
+        <p
+          aria-live="polite"
+          className="sr-only"
+        >
+          {lastActionText}
+        </p>
         <div className="modal-footer">
           <button
             onClick={handleUndoChanges}
             className="btn btn-secondary"
-            disabled={!isModified}
+            aria-disabled={!isModified}
           >
             <OutlinedIcon name="undo" />
             Reset
@@ -228,7 +248,7 @@ export const RecordBuilder: React.FC<RecordBuilderProps> = ({ title, initialData
           <button
             onClick={handleSaveChanges}
             className="btn btn-primary"
-            disabled={!isModified}
+            aria-disabled={!isModified}
           >
             <OutlinedIcon name="check" />
             Save
diff --git a/ui/src/components/Select.tsx b/ui/src/components/Select.tsx
index 102294ec..1ebd2fd3 100644
--- a/ui/src/components/Select.tsx
+++ b/ui/src/components/Select.tsx
@@ -24,7 +24,7 @@ export const Select = ({
   onChange,
   slotLeft,
   className,
-  containerClassName,
+  containerClassName = "",
   required = false,
   ...props
 }: Omit<HTMLAttributes<HTMLSelectElement>, "id"> & {
diff --git a/ui/src/components/SlideOut.tsx b/ui/src/components/SlideOut.tsx
index 175f9ddd..2686aafb 100644
--- a/ui/src/components/SlideOut.tsx
+++ b/ui/src/components/SlideOut.tsx
@@ -16,6 +16,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import { FocusTrap } from "focus-trap-react";
+import { useMediaQuery } from "usehooks-ts";
 
 import { FilledIcon, OutlinedIcon } from "./Icon";
 
@@ -24,6 +25,7 @@ export const SlideOut = ({
   top = 0,
   left,
   open,
+  canClose = true,
   onClose,
   header,
   children,
@@ -35,15 +37,15 @@ export const SlideOut = ({
   pinned = false,
   onPinChange,
   paused = false,
-  containerRef,
-  heightOffset = 0,
   dimBackground = true,
+  returnFocusOnDeactivate = true,
   ...props
 }: {
   id: string;
   top?: number;
   left?: number;
   open: boolean;
+  canClose?: boolean;
   onClose: () => void;
   header?: string | React.ReactNode;
   headerClassName?: string;
@@ -53,37 +55,37 @@ export const SlideOut = ({
   pinned?: boolean;
   onPinChange?: (pinned: boolean) => void;
   paused?: boolean;
-  containerRef?: React.RefObject<HTMLDivElement>;
-  heightOffset?: number;
   dimBackground?: boolean;
+  returnFocusOnDeactivate?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>) => {
+  const allowPinning = useMediaQuery("(min-width: 1024px)");
   const isActivated = useRef(false);
   const [active, setActive] = useState(false);
+  const localPinned = canPin ? pinned && allowPinning : pinned;
 
   useEffect(() => {
     // This fixes the issue where the slideout does not unpause when another slideout is opened
     // It also fixes the slideout deactivating unpinned (the else)
     if (!isActivated.current) {
-      setActive(open && !pinned && !paused);
+      setActive(open && !localPinned && !paused);
     } else {
       setActive(open);
     }
-  }, [open, pinned, paused]);
+  }, [open, localPinned, paused]);
 
   return (
     <>
-      {open && !pinned && (
-        <div
-          className={`fixed top-0 left-0 w-full h-full z-20 ${dimBackground ? "bg-black/20" : "bg-transparent"}`}
-        ></div>
+      {open && !localPinned && (
+        <div className={`fixed top-0 left-0 w-full h-full z-20 ${dimBackground ? "bg-black/10" : ""}`}></div>
       )}
       <FocusTrap
         active={active}
-        paused={pinned || paused}
+        paused={localPinned || paused}
         focusTrapOptions={{
           allowOutsideClick: true,
           clickOutsideDeactivates: true,
           escapeDeactivates: true,
+          returnFocusOnDeactivate: returnFocusOnDeactivate,
           onDeactivate: () => {
             isActivated.current = false;
             console.info(id, "deactivated");
@@ -114,22 +116,22 @@ export const SlideOut = ({
         }}
       >
         <div
-          role="dialog"
-          aria-modal="true"
+          role={localPinned ? "region" : "dialog"}
+          aria-live={localPinned ? "polite" : undefined}
+          aria-modal={!localPinned}
           aria-labelledby={header ? `${id}-header` : undefined}
-          className={`text-left flex flex-col ${open ? "block" : "hidden"} ${pinned ? "relative" : "absolute z-30"} ${position === "right" ? "right-0" : "left-0"} body-component ${className}`}
+          className={`text-left flex flex-col ${open ? "block" : "hidden"} ${localPinned ? "relative" : "absolute z-30"} ${position === "right" ? "right-0" : "left-0"} body-component max-h-full ${dimBackground && !localPinned ? "shadow-xl shadow-black/50" : ""} ${className}`}
           style={{
             top: top,
             left: left,
-            maxHeight: `calc(100vh - ${top + heightOffset + (containerRef?.current?.getBoundingClientRect()?.top ?? 0)}px)`,
           }}
           {...props}
         >
           {header && (
             <div className={`popup-header ${headerClassName}`}>
               {typeof header === "string" ? <h2 id={`${id}-header`}>{header}</h2> : header}
-              <div className="flex items-center gap-2">
-                {canPin && onPinChange && (
+              <div className="flex items-center gap-global">
+                {canPin && onPinChange && allowPinning && (
                   <button
                     className="btn btn-action"
                     onClick={() => {
@@ -140,15 +142,17 @@ export const SlideOut = ({
                     {pinned ? <FilledIcon name="push_pin" /> : <OutlinedIcon name="push_pin" />}
                   </button>
                 )}
-                <button
-                  className="btn btn-action"
-                  aria-label="Close"
-                  onClick={() => {
-                    onClose();
-                  }}
-                >
-                  <OutlinedIcon name="close" />
-                </button>
+                {canClose && (
+                  <button
+                    className="btn btn-action"
+                    aria-label="Close"
+                    onClick={() => {
+                      onClose();
+                    }}
+                  >
+                    <OutlinedIcon name="close" />
+                  </button>
+                )}
               </div>
             </div>
           )}
diff --git a/ui/src/components/Spinner.tsx b/ui/src/components/Spinner.tsx
index 2429adc3..d88a7a5c 100644
--- a/ui/src/components/Spinner.tsx
+++ b/ui/src/components/Spinner.tsx
@@ -30,11 +30,19 @@ export const Spinner = ({
   };
 
   return (
-    <div className="flex flex-col items-center justify-center gap-3">
+    <div className="flex flex-col items-center justify-center gap-global">
       <div
         className={`animate-spin rounded-full ${sizeMap[size]} border-t-3 border-b-3 ${className ?? "border-brand"}`}
       ></div>
-      {description && <div className="text-sm">{description}</div>}
+      {description && (
+        <div
+          className="text-sm"
+          role="status"
+          aria-label={description ?? "Loading..."}
+        >
+          {description}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/ui/src/components/StatusBadge.tsx b/ui/src/components/StatusBadge.tsx
index 88805f38..3703d596 100644
--- a/ui/src/components/StatusBadge.tsx
+++ b/ui/src/components/StatusBadge.tsx
@@ -59,7 +59,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className = "", compa
       color={bgColor}
       reverseColors={true}
       rounded={true}
-      size={TagSizes.xxs}
+      size={TagSizes.xs}
       className={`font-semibold ${className} ${compact ? "px-1! min-h-5" : ""}`}
     >
       <OutlinedIcon
diff --git a/ui/src/components/StatusFilter.tsx b/ui/src/components/StatusFilter.tsx
index 31da3f2d..4c09b6b6 100644
--- a/ui/src/components/StatusFilter.tsx
+++ b/ui/src/components/StatusFilter.tsx
@@ -13,85 +13,77 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { useState, useEffect } from "react";
-
-import { setEachValueInMap } from "~/utils/state";
-
-import { Accordion } from "./Accordion";
-import { CheckboxWithLabel } from "./Checkbox";
-import { Switch } from "./Switch";
+export enum StatusFilterType {
+  ALL = "all",
+  CURRENT = "current",
+  COMPLETED = "completed",
+  FAILED = "failed",
+  CUSTOM = "custom",
+}
 
 export const StatusFilter = ({
-  statusMap,
-  setStatusMap,
-  className,
-  allStatuses,
-  setAllStatuses,
+  statusFilterType,
+  setStatusFilterType,
 }: {
-  statusMap: Map<any, boolean>;
-  setStatusMap: (map: Map<any, boolean>) => void;
   className?: string;
-  allStatuses: boolean;
-  setAllStatuses: (allStatuses: boolean) => void;
+  statusFilterType?: StatusFilterType;
+  setStatusFilterType: (statusFilterType: StatusFilterType) => void;
 }) => {
-  const [openIndex, setOpenIndex] = useState<number>(-1);
-
-  useEffect(() => {
-    const count = Array.from(statusMap.values()).filter(Boolean).length;
-    if (count === 0) {
-      setAllStatuses(false);
-    } else if (count === statusMap.size) {
-      setAllStatuses(true);
-    } else {
-      setAllStatuses(false);
-    }
-  }, [statusMap, setAllStatuses]);
-
-  useEffect(() => {
-    setOpenIndex(allStatuses ? -1 : 0);
-  }, [allStatuses]);
-
   return (
-    <div className={className}>
-      <Accordion
-        items={[
-          {
-            slotLeft: (
-              <Switch
-                id="select-all"
-                label="All Statuses"
-                labelPosition="right"
-                size="small"
-                className="whitespace-nowrap"
-                checked={allStatuses ?? false}
-                onChange={(checked) => {
-                  setAllStatuses(checked);
-                  setStatusMap(setEachValueInMap<any, boolean>(statusMap, checked));
-                }}
-              />
-            ),
-            content: (
-              <>
-                {Array.from(statusMap.entries()).map(([name, checked]) => (
-                  <CheckboxWithLabel
-                    key={name}
-                    label={name}
-                    checked={checked}
-                    containerClassName="p-1"
-                    onChange={(event) => {
-                      const newMap = new Map(statusMap);
-                      newMap.set(name, Boolean(event.target.checked));
-                      setStatusMap(newMap);
-                    }}
-                  />
-                ))}
-              </>
-            ),
-          },
-        ]}
-        openIndex={openIndex}
-        setOpenIndex={setOpenIndex}
-      />
-    </div>
+    <fieldset className="flex flex-col gap-1 mb-2">
+      <legend>Status</legend>
+      <div className="flex flex-row gap-radios">
+        <label className="flex items-center gap-1">
+          <input
+            type="radio"
+            name="statusFilterType"
+            value={StatusFilterType.ALL}
+            checked={statusFilterType === StatusFilterType.ALL}
+            onChange={() => setStatusFilterType(StatusFilterType.ALL)}
+          />
+          All
+        </label>
+        <label className="flex items-center gap-1">
+          <input
+            type="radio"
+            name="statusFilterType"
+            value={StatusFilterType.CURRENT}
+            checked={statusFilterType === StatusFilterType.CURRENT}
+            onChange={() => setStatusFilterType(StatusFilterType.CURRENT)}
+          />
+          Current
+        </label>
+        <label className="flex items-center gap-1">
+          <input
+            type="radio"
+            name="statusFilterType"
+            value={StatusFilterType.COMPLETED}
+            checked={statusFilterType === StatusFilterType.COMPLETED}
+            onChange={() => setStatusFilterType(StatusFilterType.COMPLETED)}
+          />
+          Completed
+        </label>
+        <label className="flex items-center gap-1">
+          <input
+            type="radio"
+            name="statusFilterType"
+            value={StatusFilterType.FAILED}
+            checked={statusFilterType === StatusFilterType.FAILED}
+            onChange={() => setStatusFilterType(StatusFilterType.FAILED)}
+          />
+          Failed
+        </label>
+        <label className="flex items-center gap-1">
+          <input
+            type="radio"
+            name="statusFilterType"
+            value={StatusFilterType.CUSTOM}
+            checked={statusFilterType === StatusFilterType.CUSTOM}
+            onChange={() => setStatusFilterType(StatusFilterType.CUSTOM)}
+          />
+          Custom
+        </label>
+      </div>
+    </fieldset>
   );
 };
diff --git a/ui/src/components/Switch.tsx b/ui/src/components/Switch.tsx
index c8c55408..cff8fc6b 100644
--- a/ui/src/components/Switch.tsx
+++ b/ui/src/components/Switch.tsx
@@ -24,7 +24,7 @@ export const Switch = ({
   disabled = false,
   title,
 }: {
-  id?: string;
+  id: string;
   size?: "small" | "medium" | "large";
   labelPosition?: "left" | "right";
   label?: string;
@@ -59,7 +59,7 @@ export const Switch = ({
   };
 
   return (
-    <div className={`flex items-center group gap-2 w-min ${className}`}>
+    <div className={`flex items-center group gap-global w-min ${className}`}>
       {labelPosition === "left" && getLabel()}
       <button
         id={id}
@@ -72,7 +72,7 @@ export const Switch = ({
         title={title}
       >
         <span
-          className={`flex items-center flex-shrink-0 p-1 rounded-full duration-300 ease-in-out after:bg-white after:rounded-full after:shadow-md after:duration-300 ${switchClass} ${!checked ? " bg-gray-300 " : " bg-brand"} ${switchMove} ${disabled ? " opacity-70" : ""}`}
+          className={`flex items-center flex-shrink-0 p-1 rounded-full duration-300 ease-in-out after:bg-white after:rounded-full after:shadow-md after:duration-300 ${switchClass} ${!checked ? " bg-gray-200 " : " bg-brand"} ${switchMove} ${disabled ? " opacity-70" : ""}`}
         ></span>
       </button>
       {labelPosition === "right" && getLabel()}
diff --git a/ui/src/components/TableBase.tsx b/ui/src/components/TableBase.tsx
index da4ee0a7..2df50231 100644
--- a/ui/src/components/TableBase.tsx
+++ b/ui/src/components/TableBase.tsx
@@ -18,42 +18,31 @@
 import { useEffect, useRef, useState } from "react";
 
 import { type ColumnDef, flexRender, type Table } from "@tanstack/react-table";
-import { useWindowSize } from "usehooks-ts";
 
 import { CheckboxWithLabel } from "./Checkbox";
+import FullPageModal from "./FullPageModal";
 import { OutlinedIcon } from "./Icon";
-import { SlideOut } from "./SlideOut";
+import { Spinner } from "./Spinner";
 
 export function TableBase<TData, TValue>({
   columns,
   table,
+  isLoading,
   children,
-  paddingOffset = 2,
   className,
-  visible = true,
 }: {
   columns: ColumnDef<TData, TValue>[];
   table: Table<TData>;
+  isLoading?: boolean;
   children?: React.ReactNode;
-  paddingOffset?: number;
   className?: string;
   visible?: boolean;
 }) {
-  const outerContainerRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLTableSectionElement>(null);
   const headerRef = useRef<HTMLTableSectionElement>(null);
-  const windowSize = useWindowSize();
-  const [scrollerHeight, setScrollerHeight] = useState(0);
   const pagination = table.getState().pagination;
   const [open, setOpen] = useState(false);
 
-  useEffect(() => {
-    if (containerRef?.current) {
-      const top = containerRef.current.getBoundingClientRect().top;
-      setScrollerHeight(windowSize.height - top - paddingOffset);
-    }
-  }, [windowSize.height, paddingOffset, visible]);
-
   useEffect(() => {
     if (containerRef?.current) {
       containerRef.current.scrollTop = 0;
@@ -61,16 +50,15 @@ export function TableBase<TData, TValue>({
   }, [pagination.pageSize, table, pagination.pageIndex]);
 
   return (
-    <div
-      ref={outerContainerRef}
-      className="relative"
-    >
+    <div className={`relative h-full w-full overflow-auto ${className}`}>
       <div
         ref={containerRef}
-        style={{ height: scrollerHeight }}
-        className={`relative overflow-auto flex h-full justify-between flex-col ${className}`}
+        className={`relative flex h-full justify-between flex-col`}
       >
-        <table className="border-separate border-spacing-y-0">
+        <table
+          className="border-separate border-spacing-y-0 h-full items-baseline"
+          aria-rowcount={table.getRowModel().rows.length}
+        >
           <thead
             className="body-header sticky top-0 z-20"
             ref={headerRef}
@@ -89,7 +77,7 @@ export function TableBase<TData, TValue>({
                             : "none"
                       }
                     >
-                      <div className="flex flex-row gap-3 justify-between">
+                      <div className="flex flex-row gap-global justify-between">
                         {header.column.getCanSort() ? (
                           <button
                             className="btn btn-action gap-0"
@@ -135,45 +123,67 @@ export function TableBase<TData, TValue>({
             ))}
           </thead>
           <tbody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <tr
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
-                  ))}
-                </tr>
-              ))
-            ) : (
+            {table.getRowModel().rows.map((row) => (
+              <tr
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                ))}
+              </tr>
+            ))}
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="h-full"
+              >
+                {isLoading ? (
+                  <div className="h-full flex items-center justify-center">
+                    <Spinner
+                      size="large"
+                      description="Loading..."
+                    />
+                  </div>
+                ) : (
+                  !table.getRowModel().rows.length && (
+                    <p
+                      role="alert"
+                      className="text-center"
+                    >
+                      No results found
+                    </p>
+                  )
+                )}
+              </td>
+            </tr>
+          </tbody>
+          {children && (
+            <tfoot className="body-footer sticky bottom-0 z-20 px-0">
               <tr>
-                <td colSpan={columns.length}>
-                  <p aria-live="polite">No results.</p>
+                <td
+                  colSpan={columns.length}
+                  className="p-0"
+                >
+                  <div className="max-w-[calc(100vw-2px)]">{children}</div>
                 </td>
               </tr>
-            )}
-          </tbody>
+            </tfoot>
+          )}
         </table>
-        {children && <div className="body-footer sticky bottom-0 z-20">{children}</div>}
       </div>
-      <SlideOut
-        id="table-column-selector"
+      <FullPageModal
         open={open}
         onClose={() => setOpen(false)}
-        top={headerRef.current?.offsetHeight ?? 0}
-        containerRef={outerContainerRef}
-        heightOffset={12}
-        aria-label="Show/Hide Columns"
-        className="border-t-0 shadow-lg mr-4"
-        bodyClassName="body-header"
-        dimBackground={false}
+        headerChildren={<h2 id="show-hide-columns-header">Show/Hide Columns</h2>}
+        size="none"
+        aria-labelledby="show-hide-columns-header"
       >
         <CheckboxWithLabel
           checked={table.getIsAllColumnsVisible()}
           onChange={(event) => table.toggleAllColumnsVisible(Boolean(event.target.checked))}
           label="Toggle All"
-          containerClassName="px-3 py-2 mb-2 border-b border-gray-200"
+          containerClassName="px-global py-2 mb-2 border-b border-gray-200"
         />
         {table
           .getAllColumns()
@@ -184,10 +194,10 @@ export function TableBase<TData, TValue>({
               checked={column.getIsVisible()}
               onChange={(event) => column.toggleVisibility(Boolean(event.target.checked))}
               label={column.id}
-              containerClassName="px-3 pb-1"
+              containerClassName="px-global pb-1"
             />
           ))}
-      </SlideOut>
+      </FullPageModal>
     </div>
   );
 }
diff --git a/ui/src/components/TablePageRange.tsx b/ui/src/components/TablePageRange.tsx
index 0a81294c..3d35bf15 100644
--- a/ui/src/components/TablePageRange.tsx
+++ b/ui/src/components/TablePageRange.tsx
@@ -48,7 +48,7 @@ const TablePageRange = ({
   });
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-global">
       <button
         className="btn btn-tertiary"
         onClick={() => setCurrentPage(1)}
@@ -64,7 +64,7 @@ const TablePageRange = ({
       >
         &lt;
       </button>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-global">
         {range.map((page) => (
           <button
             key={page}
diff --git a/ui/src/components/TablePagination.tsx b/ui/src/components/TablePagination.tsx
index 02a8fb07..9deeb140 100644
--- a/ui/src/components/TablePagination.tsx
+++ b/ui/src/components/TablePagination.tsx
@@ -39,15 +39,21 @@ export function TablePagination<TData>({ table, totalRows, className }: TablePag
   }, [pageIndex, pageSize, table]);
 
   return (
-    <div className={`flex items-center justify-between px-3 py-2 ${className}`}>
+    <div className={`flex items-center justify-between px-global py-1 ${className}`}>
       <div className="flex items-center gap-1">
-        <label htmlFor="pageSize">Rows per page:</label>
+        <label
+          htmlFor="pageSize"
+          className="hidden xs:block"
+        >
+          Rows per page:
+        </label>
         <select
           id="pageSize"
           value={pageSize}
           onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
             updateUrl({ pageIndex, pageSize: parseInt(event.target.value) });
           }}
+          aria-label="Rows per page"
         >
           <option value="20">20</option>
           <option value="40">40</option>
diff --git a/ui/src/components/Tag.tsx b/ui/src/components/Tag.tsx
index 9a755a11..778eabdd 100644
--- a/ui/src/components/Tag.tsx
+++ b/ui/src/components/Tag.tsx
@@ -61,7 +61,7 @@ const getColorMapping = (color: (typeof Colors)[keyof typeof Colors], reverseCol
       if (reverseColors) {
         return "bg-[var(--color-error-bg-reversed)] text-[var(--color-error-text-reversed)] hover:bg-[var(--color-error-bg-reversed)] hover:text-[var(--color-error-text-reversed)] border-[var(--color-error-bg-reversed)]";
       } else {
-        return "bg-[var(--color-error-bg)] text-[var(--color-error-text)] hover:bg-[var(--color-error-bg)] hover:text-[var(--color-error-text)] border-[var(--color-error-text)";
+        return "bg-[var(--color-error-bg)] text-[var(--color-error-text)] hover:bg-[var(--color-error-bg)] hover:text-[var(--color-error-text)] border-[var(--color-error-text)]";
       }
     case Colors.pending:
       return "bg-[var(--color-pending-bg-reversed)] text-[var(--color-pending-text)] hover:bg-[var(--color-pending-bg)] hover:text-[var(--color-pending-text)] border-[var(--color-pending-text)]";
@@ -93,11 +93,27 @@ export const Tag = ({
   ...props
 }: TagProps & HTMLAttributes<HTMLDivElement>) => {
   const colorMapping = getColorMapping(color, reverseColors);
-  const sizeMapping = `text-${size} rounded-${rounded ? "full" : "md"}`;
+  const sizeClass = (() => {
+    switch (size) {
+      case TagSizes.xxs:
+      case TagSizes.xs:
+        return "text-xs";
+      case TagSizes.sm:
+        return "text-sm";
+      case TagSizes.base:
+        return "text-base";
+      case TagSizes.lg:
+        return "text-lg";
+      default:
+        checkExhaustive(size);
+        return "";
+    }
+  })();
+  const roundedClass = rounded ? "rounded-full" : "rounded-md";
 
   return (
     <div
-      className={`${colorMapping} border-1 text-center flex flex-row items-center gap-1 ${sizeMapping} py-0 px-2 ${className}`}
+      className={`${colorMapping} border-1 text-center flex flex-row items-center gap-1 ${sizeClass} ${roundedClass} py-0 px-2 ${className}`}
       {...props}
     >
       {props.children}
@@ -109,7 +125,7 @@ export const DatasetTag = ({ isCollection, ...props }: { isCollection: boolean }
   return (
     <Tag
       color={isCollection ? Colors.collection : Colors.dataset}
-      className="break-all"
+      className="inline-block"
       {...props}
     >
       {props.children}
diff --git a/ui/src/components/TagManager.tsx b/ui/src/components/TagManager.tsx
index d8f3fc2f..76860fb0 100644
--- a/ui/src/components/TagManager.tsx
+++ b/ui/src/components/TagManager.tsx
@@ -37,6 +37,7 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
   const [deletedTags, setDeletedTags] = useState<string[]>([]);
   const [addedTags, setAddedTags] = useState<string[]>([]);
   const [error, setError] = useState<string | undefined>(undefined);
+  const [lastActionText, setLastActionText] = useState<string>("");
 
   useEffect(() => {
     const trimmedTag = newTag.trim();
@@ -64,13 +65,24 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
     e.preventDefault();
 
     const trimmedTag = newTag.trim();
+
+    if (!trimmedTag || error) {
+      return;
+    }
+
     addTag(trimmedTag);
     setNewTag("");
+    setLastActionText(`Added ${trimmedTag}`);
   };
 
   const handleDeleteTag = (tagToDelete: string) => {
+    if (isReservedTag(tagToDelete)) {
+      setLastActionText(`Cannot delete reserved tag: ${tagToDelete}`);
+      return;
+    }
     setDeletedTags([...deletedTags, tagToDelete]);
     setAddedTags(addedTags.filter((tag) => tag !== tagToDelete));
+    setLastActionText(`Deleted ${tagToDelete}`);
   };
 
   const handleSave = () => {
@@ -85,6 +97,7 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
     setDeletedTags([]);
     setAddedTags([]);
     setNewTag("");
+    setLastActionText("Tags reset");
   };
 
   const displayTags = useMemo(() => {
@@ -98,7 +111,7 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
 
   return (
     <div className="flex flex-col h-full justify-between">
-      <div className="flex flex-col gap-6 p-3">
+      <div className="flex flex-col gap-6 p-global">
         <div className="flex flex-col">
           <h3
             className="m-0 p-0 text-base"
@@ -114,10 +127,10 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
             {displayTags.length > 0 ? (
               displayTags.map((tag, index) => (
                 <button
+                  role="listitem"
                   className="btn btn-badge"
                   key={index}
                   onClick={() => handleDeleteTag(tag)}
-                  disabled={isReservedTag(tag)}
                 >
                   <Tag
                     color={Colors.tag}
@@ -135,7 +148,7 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
           </div>
         </div>
         <form onSubmit={handleAddTag}>
-          <div className="grid grid-cols-[1fr_auto] gap-3">
+          <div className="grid grid-cols-[1fr_auto] gap-global">
             <TextInput
               id="new-tag"
               value={newTag}
@@ -149,9 +162,9 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
             />
             <button
               type="submit"
-              className="btn mt-4 h-8"
+              className="btn mt-5 h-8"
               aria-label="Add Tag"
-              disabled={!newTag.trim() || !!error}
+              aria-disabled={!newTag.trim() || !!error}
             >
               <OutlinedIcon name="add" />
             </button>
@@ -172,6 +185,7 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
             {deletedTags.length > 0 ? (
               deletedTags.map((tag, index) => (
                 <button
+                  role="listitem"
                   className="btn btn-badge"
                   key={index}
                   onClick={() => {
@@ -194,12 +208,18 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
         </div>
       </div>
       <div className="flex flex-col">
-        {message && <InlineBanner status={isError ? "error" : "success"}>{message}</InlineBanner>}
+        <InlineBanner status={isError ? "error" : message ? "success" : "none"}>{message}</InlineBanner>
+        <p
+          aria-live="polite"
+          className="sr-only"
+        >
+          {lastActionText}
+        </p>
         <div className="modal-footer">
           <button
             onClick={handleUndo}
             className="btn btn-secondary"
-            disabled={!addedTags.length && !deletedTags.length}
+            aria-disabled={!addedTags.length && !deletedTags.length}
           >
             <OutlinedIcon name="undo" />
             Reset
@@ -207,7 +227,7 @@ export const TagManager: React.FC<TagManagerProps> = ({ currentTags, onSave, mes
           <button
             onClick={handleSave}
             className="btn btn-primary"
-            disabled={!addedTags.length && !deletedTags.length}
+            aria-disabled={!addedTags.length && !deletedTags.length}
           >
             <OutlinedIcon name="check" />
             Save
diff --git a/ui/src/components/TaskHistoryBanner.tsx b/ui/src/components/TaskHistoryBanner.tsx
index 38d4aa62..b23e7773 100644
--- a/ui/src/components/TaskHistoryBanner.tsx
+++ b/ui/src/components/TaskHistoryBanner.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { InlineBanner } from "./InlineBanner";
 
 export const getTaskHistoryUrl = (nodeName: string) => {
-  return `/tasks?allUsers=true&allPools=true&nodes=${nodeName}&allNodes=false&allStatuses=true`;
+  return `/tasks?allUsers=true&allPools=true&nodes=${nodeName}&allNodes=false&statusFilterType=all`;
 };
 
 export const TaskHistoryBanner = ({ nodeName }: { nodeName: string }) => {
diff --git a/ui/src/components/TopMenu.tsx b/ui/src/components/TopMenu.tsx
index 7d040d37..504a5575 100644
--- a/ui/src/components/TopMenu.tsx
+++ b/ui/src/components/TopMenu.tsx
@@ -54,13 +54,13 @@ export const getTopLevelLinks = (
 ];
 
 export const TopMenu = ({
-  className,
   showIcons = true,
   onItemClick,
+  className = "",
 }: {
-  className?: string;
   showIcons?: boolean;
   onItemClick?: () => void;
+  className?: string;
 }) => {
   const { sidebarData } = useStore();
   const links = getTopLevelLinks(sidebarData);
@@ -77,20 +77,20 @@ export const TopMenu = ({
     setActiveLink(index ?? 0);
   }, [pathname, links]);
 
-  return (
-    <nav className={`flex ${className}`}>
-      {links.map((link, index) => (
-        <Link
-          key={link.to}
-          href={link.to}
-          className={`btn btn-link no-underline text-base ${activeLink === index ? "font-bold" : ""}`}
-          aria-current={activeLink === index}
-          onClick={onItemClick}
-        >
-          {showIcons && link.icon}
-          {link.label}
-        </Link>
-      ))}
-    </nav>
-  );
+  return links.map((link, index) => (
+    <li
+      key={link.to}
+      className={`${className} list-none`}
+    >
+      <Link
+        href={link.to}
+        className={`btn btn-link no-underline text-lg p-0 ${activeLink === index ? "font-bold" : ""}`}
+        aria-current={activeLink === index}
+        onClick={onItemClick}
+      >
+        {showIcons && link.icon}
+        {link.label}
+      </Link>
+    </li>
+  ));
 };
diff --git a/ui/src/components/UserFilter.tsx b/ui/src/components/UserFilter.tsx
index d7f7e3fc..08f180ac 100644
--- a/ui/src/components/UserFilter.tsx
+++ b/ui/src/components/UserFilter.tsx
@@ -77,7 +77,7 @@ export const UserFilter = ({
     <>
       <fieldset className="flex flex-col gap-1 mb-2">
         <legend>Users</legend>
-        <div className="flex flex-row gap-7">
+        <div className="flex flex-row gap-radios">
           <label className="flex items-center gap-1">
             <input
               type="radio"
diff --git a/ui/src/components/ViewToggleButton.tsx b/ui/src/components/ViewToggleButton.tsx
index 2bcf05eb..29eb1239 100644
--- a/ui/src/components/ViewToggleButton.tsx
+++ b/ui/src/components/ViewToggleButton.tsx
@@ -20,11 +20,11 @@ interface ViewToggleButtonProps extends React.InputHTMLAttributes<HTMLInputEleme
 export const ViewToggleButton = ({ checked, onChange, children, ...props }: ViewToggleButtonProps) => {
   return (
     <label
-      className={`flex items-center gap-1 btn ${checked ? "btn-primary" : "btn-secondary"} focus-within:outline-2`}
+      className={`flex items-center gap-1 btn ${checked ? "btn-primary z-10" : "btn-tertiary border-1 border-border"} rounded-none`}
     >
       <input
         type="radio"
-        className="appearance-none w-0 h-0"
+        className="appearance-none w-0 h-0 mr-[-0.25rem]"
         checked={checked}
         onChange={onChange}
         {...props}
diff --git a/ui/src/models/tasks-model.ts b/ui/src/models/tasks-model.ts
index 13f086f9..374c2107 100644
--- a/ui/src/models/tasks-model.ts
+++ b/ui/src/models/tasks-model.ts
@@ -32,7 +32,7 @@ export const TaskListRequestSchema = z.object({
   users: z.array(z.string()).default([]),
   pools: z.array(z.string()).default([]),
   nodes: z.array(z.string()).default([]),
-  statuses: z.array(z.enum(TaskStatusValues)).default([]),
+  statuses: z.array(z.string()).optional().default([]),
   priority: z.enum(PriorityValues).optional(),
   summary: z.boolean().default(false),
   aggregate_by_workflow: z.boolean().default(false),
diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
index 6de69f7d..5cab1bdb 100644
--- a/ui/src/styles/globals.css
+++ b/ui/src/styles/globals.css
@@ -25,8 +25,12 @@ SPDX-License-Identifier: Apache-2.0
   --breakpoint-3xl: 120rem;
   --breakpoint-4xl: 140rem;
 
+  /* Global spacing scale */
+  --spacing-global: 0.25rem; /* default */
+  --spacing-radios: 0.5rem;
+
   --color-text: black;
-  --color-bg: #f4f4f4;
+  --color-bg: white;
   --color-border: lightgray;
   --color-footerbg: #f0f0f0;
   --color-headerbg: #f0f0f0;
@@ -61,9 +65,22 @@ SPDX-License-Identifier: Apache-2.0
   --color-inline-link-text: #008a00;
 }
 
+/* Responsive override for global spacing */
+@media (min-width: 48rem) {
+  /* matches Tailwind md (768px) */
+  :root {
+    --spacing-global: 0.5rem;
+    --spacing-radios: 1.25rem;
+  }
+}
+
 @layer base {
   body {
     @apply font-['Nvidia_Sans','Nvidia_Sans_Fallback'] bg-bg text-text text-sm;
+
+    * {
+      @apply outline-brand focus-visible:outline-offset-1;
+    }
   }
 
   h1 {
@@ -75,7 +92,7 @@ SPDX-License-Identifier: Apache-2.0
   }
 
   h3 {
-    @apply text-lg font-bold px-0 py-2;
+    @apply text-base font-bold px-0 py-2;
   }
 
   h4 {
@@ -94,9 +111,13 @@ SPDX-License-Identifier: Apache-2.0
     @apply w-full;
   }
 
+  tbody {
+    @apply bg-white align-baseline;
+  }
+
   td,
   th {
-    @apply p-2 border-b-1 border-border text-start;
+    @apply px-2 py-1 border-b-1 border-border text-start content-center;
   }
 
   select,
@@ -104,8 +125,13 @@ SPDX-License-Identifier: Apache-2.0
   input[type="text"],
   input[type="search"],
   input[type="date"],
-  input[type="password"] {
-    @apply p-1 rounded-none! border-1 border-border focus-visible:outline-none focus-visible:border-b-2 focus-visible:border-b-brand focus:bg-gray-50 text-sm;
+  input[type="password"],
+  .btn-dropdown {
+    @apply p-1 border-1 border-border! text-sm bg-white;
+  }
+
+  select {
+    @apply rounded-sm! focus-visible:outline-offset-2 focus-visible:rounded-none!;
   }
 
   label,
@@ -114,7 +140,7 @@ SPDX-License-Identifier: Apache-2.0
   }
 
   legend {
-    @apply contents;
+    @apply contents font-semibold;
   }
 
   ul {
@@ -130,7 +156,7 @@ SPDX-License-Identifier: Apache-2.0
   }
 
   dl {
-    @apply m-0 grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-2 text-sm items-start;
+    @apply m-0 grid grid-cols-1 md:grid-cols-[auto_1fr] gap-global text-sm items-start content-baseline;
   }
 
   dt {
@@ -138,7 +164,7 @@ SPDX-License-Identifier: Apache-2.0
   }
 
   dd {
-    @apply p-0 mb-3 md:mb-0 break-words;
+    @apply p-0 md:mb-1 break-words;
   }
 }
 
@@ -149,7 +175,7 @@ SPDX-License-Identifier: Apache-2.0
   }
 
   .btn {
-    @apply py-1 px-2 rounded-sm border-1 text-text border-text text-sm hover:opacity-90 focus-visible:outline-2 flex items-center gap-2 min-h-8 disabled:opacity-70 no-underline disabled:cursor-not-allowed outline-offset-0;
+    @apply lg:py-1 px-1 lg:px-2 rounded-sm border-1 text-text border-text text-sm hover:opacity-90 focus-visible:outline-2 flex items-center gap-1 min-h-8 no-underline disabled:opacity-70 disabled:cursor-not-allowed aria-disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:hover:opacity-100;
   }
 
   .btn-primary {
@@ -168,13 +194,8 @@ SPDX-License-Identifier: Apache-2.0
     @apply bg-transparent border-transparent hover:border-gray-400 p-0 min-h-auto text-start no-underline;
   }
 
-  /* TODO: Match select */
-  .btn-dropdown {
-    @apply p-1 rounded-none border-1 border-border focus-visible:outline-none focus-visible:border-b-2 focus-visible:border-b-brand focus:bg-gray-50 text-sm;
-  }
-
   .dag-details-body {
-    @apply flex flex-col h-full justify-between;
+    @apply flex flex-col h-full overflow-y-auto;
 
     ul {
       @apply m-0 p-0;
@@ -194,7 +215,7 @@ SPDX-License-Identifier: Apache-2.0
   }
 
   .dag-actions {
-    @apply px-3 py-1 w-full grid lg:grid-cols-2 gap-1;
+    @apply px-global py-1 w-full grid md:grid-cols-2 gap-1;
   }
 
   .btn-badge {
@@ -217,44 +238,51 @@ SPDX-License-Identifier: Apache-2.0
   }
 
   .page-header {
-    @apply flex items-center justify-between p-3 border-b border-border bg-white;
+    @apply flex items-center gap-global border-b border-border px-global pt-global pb-global bg-white grow shadow-sm;
 
     h1 {
-      @apply text-ellipsis overflow-hidden text-lg font-semibold p-0 m-0;
+      @apply text-2xl font-semibold p-0 m-0 capitalize mb-[-0.5rem];
     }
+
+    h2 {
+      @apply whitespace-nowrap overflow-x-hidden text-ellipsis p-0 m-0 text-base flex justify-center items-center;
+    }
+  }
+
+  .toggle-group {
+    @apply flex flex-row border-1 border-border rounded-md overflow-hidden [&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-offset-1;
   }
 
   .body-component {
-    @apply bg-white border-1 border-border shadow-md shadow-neutral-400/50;
+    @apply bg-white border-1 border-border;
   }
 
   .body-header {
     @apply bg-headerbg border-b-1 border-border;
   }
+
   .body-footer {
     @apply bg-footerbg border-t border-border;
   }
 
   .workflow-details-slideout {
-    @apply h-full w-[25vw] max-w-120;
+    @apply h-full min-w-[25vw] overflow-y-auto;
   }
 
   .popup-header {
-    @apply flex flex-row justify-between items-center px-3 py-2 gap-3;
-
-    button {
-      @apply hover:opacity-90;
-    }
+    @apply flex flex-row justify-between items-center px-global py-global gap-global;
 
     h2 {
       @apply text-sm p-0 whitespace-nowrap overflow-hidden text-ellipsis;
     }
   }
+
   .brand-header {
     @apply bg-brand border-b-0;
 
-    h3 {
-      @apply text-base py-2;
+    button,
+    a {
+      @apply hover:outline-1 outline-black;
     }
   }
 
@@ -265,7 +293,7 @@ SPDX-License-Identifier: Apache-2.0
       @apply m-0 p-0;
 
       li {
-        @apply list-none mb-3 border-b border-gray-300 pb-3 overflow-hidden text-ellipsis;
+        @apply list-none mb-3 border-b border-gray-300 pb-global overflow-hidden text-ellipsis;
       }
     }
   }
@@ -283,7 +311,7 @@ SPDX-License-Identifier: Apache-2.0
   }
 
   .modal-footer {
-    @apply flex flex-row w-full justify-end gap-3 p-3 bg-footerbg border-t border-border;
+    @apply flex flex-row w-full justify-end gap-global p-global bg-footerbg border-t border-border;
   }
 
   .link-inline {
@@ -307,6 +335,34 @@ SPDX-License-Identifier: Apache-2.0
       @apply no-underline;
     }
   }
+
+  .tag-bottom {
+    @apply pt-[1px]! px-[2px]! shadow-md z-10 absolute bottom-[-0.25rem] rounded-none!;
+  }
+
+  .tag-top {
+    @apply pt-[1px]! px-[2px]! shadow-md z-10 absolute top-[-0.25rem] rounded-none!;
+  }
+
+  .tag-small {
+    @apply right-[-0.25rem];
+  }
+
+  .tag-medium {
+    @apply right-[-0.8rem];
+  }
+
+  .tag-filter {
+    @apply bg-brand border-black border-1 text-black text-xs rounded-full px-1 absolute top-[-0.25rem] right-[-0.5rem] z-20;
+  }
+
+  .skip-to-content {
+    @apply bg-white border-0 absolute top-1 left-[-9999px] z-1000 outline-offset-0 hidden lg:flex;
+
+    &:focus-visible {
+      @apply left-1 opacity-100;
+    }
+  }
 }
 
 * {
diff --git a/ui/tailwind.config.mjs b/ui/tailwind.config.mjs
index 07affb9e..4637c8f8 100644
--- a/ui/tailwind.config.mjs
+++ b/ui/tailwind.config.mjs
@@ -19,7 +19,14 @@ const config = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   darkMode: "class",
   theme: {
-    extend: {},
+    extend: {
+      padding: {
+        "global": "var(--spacing-global)",
+      },
+      gap: {
+        "global": "var(--spacing-global)",
+      },
+    },
   },
   plugins: [],
 };