diff --git a/desktop/package-lock.json b/desktop/package-lock.json
index 09f063c9..0b0650ad 100644
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
@@ -21,6 +21,7 @@
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-markdown": "^10.1.0",
+        "remove-markdown": "^0.5.0",
         "wouter": "^3.7.1"
       },
       "devDependencies": {
@@ -7396,6 +7397,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remove-markdown": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.5.5.tgz",
+      "integrity": "sha512-lMR8tOtDqazFT6W2bZidoXwkptMdF3pCxpri0AEokHg0sZlC2GdoLqnoaxsEj1o7/BtXV1MKtT3YviA1t7rW7g==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
diff --git a/desktop/package.json b/desktop/package.json
index 01281e05..f125fcd0 100644
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -27,6 +27,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
+    "remove-markdown": "^0.5.0",
     "wouter": "^3.7.1"
   },
   "devDependencies": {
diff --git a/desktop/src-tauri/src/commands/executable.rs b/desktop/src-tauri/src/commands/executable.rs
index be6e1697..9976d96f 100644
--- a/desktop/src-tauri/src/commands/executable.rs
+++ b/desktop/src-tauri/src/commands/executable.rs
@@ -25,18 +25,47 @@ impl<E: CommandExecutor + 'static> ExecutableCommands<E> {
         &self,
         workspace: Option<&str>,
         namespace: Option<&str>,
+        tags: Option<&[&str]>,
+        verb: Option<&str>,
+        filter: Option<&str>,
     ) -> CommandResult<Vec<Executable>> {
         let mut args = vec!["browse", "--list"];
 
         if let Some(ws) = workspace {
-            args.extend_from_slice(&["--workspace", ws]);
+            if !ws.is_empty() {
+                args.extend_from_slice(&["--workspace", ws]);
+            }
         }
 
         if let Some(ns) = namespace {
-            args.extend_from_slice(&["--namespace", ns]);
+            if !ns.is_empty() {
+                args.extend_from_slice(&["--namespace", ns]);
+            } else {
+                args.push("--all");
+            }
         } else {
             args.push("--all");
         }
+        
+        if let Some(tags) = tags {
+            for tag in tags {
+                if !tag.is_empty() {
+                    args.extend_from_slice(&["--tag", tag]);
+                }
+            }
+        }
+        
+        if let Some(verb) = verb {
+            if !verb.is_empty() {
+                args.extend_from_slice(&["--verb", verb]);
+            }
+        }
+        
+        if let Some(filter) = filter {
+            if !filter.is_empty() {
+                args.extend_from_slice(&["--filter", filter]);
+            }
+        }
 
         let response: ExecutableResponse = self.executor.execute_json(&args).await?;
         Ok(response.executables)
diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index 2983439f..a1a5835c 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -105,11 +105,26 @@ async fn get_executable(executable_ref: String) -> Result<enriched::Executable,
 async fn list_executables(
     workspace: Option<String>,
     namespace: Option<String>,
+    tags: Option<Vec<String>>,
+    verb: Option<String>,
+    filter: Option<String>,
 ) -> Result<Vec<enriched::Executable>, String> {
     let runner = cli::cli_executor();
+
+    // Convert owned Strings into borrowed &str slices expected by the command layer
+    let tags_ref_vec: Option<Vec<&str>> = tags
+        .as_ref()
+        .map(|v| v.iter().map(|s| s.as_str()).collect());
+
     runner
         .executable
-        .list(workspace.as_deref(), namespace.as_deref())
+        .list(
+            workspace.as_deref(),
+            namespace.as_deref(),
+            tags_ref_vec.as_deref(),
+            verb.as_deref(),
+            filter.as_deref(),
+        )
         .await
         .map_err(|e| e.to_string())
 }
diff --git a/desktop/src/App.tsx b/desktop/src/App.tsx
index ae73fd80..7f131b90 100644
--- a/desktop/src/App.tsx
+++ b/desktop/src/App.tsx
@@ -1,13 +1,12 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Route, Switch } from "wouter";
 import "./App.css";
-import { AppProvider } from "./hooks/useAppContext.tsx";
+import { AppProvider } from "./hooks/useAppContext";
 import { NotifierProvider } from "./hooks/useNotifier";
 import { AppShell } from "./layout";
-import { PageWrapper } from "./components/PageWrapper.tsx";
-import {Settings, Welcome, Data, Workspaces} from "./pages";
-import { Workspace } from "./pages/Workspace/Workspace.tsx";
-import { ExecutableRoute } from "./pages/Executable/ExecutableRoute.tsx";
+import { PageWrapper } from "./components/PageWrapper";
+import {Settings, Welcome, Data, Workspaces, Executables, Executable} from "./pages";
+import { Workspace } from "./pages/Workspace/Workspace";
 import { Text } from "@mantine/core";
 
 const queryClient = new QueryClient({
@@ -35,13 +34,17 @@ function App() {
                   path="/workspaces"
                   component={Workspaces}
               />
+              <Route
+                  path="/executables"
+                  component={Executables}
+              />
               <Route
                 path="/workspace/:workspaceName"
                 component={Workspace}
               />
               <Route
                 path="/executable/:executableId"
-                component={ExecutableRoute}
+                component={Executable}
               />
               <Route path="/logs">
                 <PageWrapper>
diff --git a/desktop/src/hooks/useAppContext.tsx b/desktop/src/hooks/useAppContext.tsx
index e50e7552..547d7a1d 100644
--- a/desktop/src/hooks/useAppContext.tsx
+++ b/desktop/src/hooks/useAppContext.tsx
@@ -2,10 +2,8 @@ import React from "react";
 import { createContext, useContext, useState, useEffect } from "react";
 import { Config } from "../types/generated/config";
 import { EnrichedWorkspace } from "../types/workspace";
-import { EnrichedExecutable } from "../types/executable";
 import { useConfig } from "./useConfig";
 import { useWorkspaces } from "./useWorkspace";
-import { useExecutables } from "./useExecutable";
 import { invoke } from "@tauri-apps/api/core";
 import { useQuery } from "@tanstack/react-query";
 
@@ -14,7 +12,6 @@ interface AppContextType {
   selectedWorkspace: string | null;
   setSelectedWorkspace: (workspaceName: string | null) => void;
   workspaces: EnrichedWorkspace[];
-  executables: EnrichedExecutable[];
   isLoading: boolean;
   hasError: Error | null;
   refreshAll: () => void;
@@ -78,16 +75,9 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
     }
   }, [config, workspaces, selectedWorkspace]);
 
-  const {
-    executables,
-    isExecutablesLoading,
-    executablesError,
-    refreshExecutables,
-  } = useExecutables(selectedWorkspace, enabled);
-
   const isLoading =
-    isConfigLoading || isWorkspacesLoading || isExecutablesLoading;
-  const hasError = configError || workspacesError || executablesError;
+    isConfigLoading || isWorkspacesLoading;
+  const hasError = configError || workspacesError;
   if (hasError) {
     console.error("Error", hasError);
   }
@@ -95,7 +85,6 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
   const refreshAll = () => {
     refreshConfig();
     refreshWorkspaces();
-    refreshExecutables();
   };
 
   // If flow binary is not available, return early with error state
@@ -107,7 +96,6 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
           workspaces: [],
           selectedWorkspace,
           setSelectedWorkspace,
-          executables: [],
           isLoading: false,
           hasError: binaryCheckError,
           refreshAll: () => {},
@@ -127,7 +115,6 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
           workspaces: [],
           selectedWorkspace,
           setSelectedWorkspace,
-          executables: [],
           isLoading: true,
           hasError: null,
           refreshAll: () => {},
@@ -145,7 +132,6 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
         workspaces: workspaces || [],
         selectedWorkspace,
         setSelectedWorkspace,
-        executables,
         isLoading,
         hasError,
         refreshAll,
diff --git a/desktop/src/hooks/useExecutable.ts b/desktop/src/hooks/useExecutable.ts
index 22fd169d..807a8406 100644
--- a/desktop/src/hooks/useExecutable.ts
+++ b/desktop/src/hooks/useExecutable.ts
@@ -47,32 +47,50 @@ export function useExecutable(executableRef: string) {
 }
 
 export function useExecutables(
-  selectedWorkspace: string | null,
-  enabled: boolean = true,
+  workspace: string | null,
+  namespace: string | null,
+  tags: string[] | null,
+  verb: string | null,
+  filter: string | null,
 ) {
   const queryClient = useQueryClient();
 
+  const normalizedParams = React.useMemo(() => {
+    return {
+      workspace: workspace || undefined,
+      namespace: namespace || undefined,
+      tags: tags && tags.length > 0 ? tags : undefined,
+      verb: verb || undefined,
+      filter: filter || undefined,
+    };
+  }, [workspace, namespace, tags, verb, filter]);
+
+  const queryKey = React.useMemo(() => {
+    return ["executables", normalizedParams];
+  }, [normalizedParams]);
+
   const {
     data: executables,
     isLoading: isExecutablesLoading,
     error: executablesError,
   } = useQuery({
-    queryKey: ["executables", selectedWorkspace],
+    queryKey,
     queryFn: async () => {
-      if (!selectedWorkspace) return [];
+      console.log('Fetching executables with params:', normalizedParams);
       return await invoke<EnrichedExecutable[]>("list_executables", {
-        workspace: selectedWorkspace,
+        workspace: normalizedParams.workspace,
+        namespace: normalizedParams.namespace,
+        tags: normalizedParams.tags,
+        verb: normalizedParams.verb,
+        filter: normalizedParams.filter,
       });
     },
-    enabled: enabled && !!selectedWorkspace, // Only run when workspace is selected AND enabled
   });
 
   const refreshExecutables = () => {
-    if (selectedWorkspace) {
-      queryClient.invalidateQueries({
-        queryKey: ["executables", selectedWorkspace],
-      });
-    }
+    void queryClient.invalidateQueries({
+      queryKey,
+    });
   };
 
   return {
@@ -81,4 +99,4 @@ export function useExecutables(
     executablesError,
     refreshExecutables,
   };
-}
+}
\ No newline at end of file
diff --git a/desktop/src/layout/Sidebar/ExecutableTree/ExecutableTree.tsx b/desktop/src/layout/Sidebar/ExecutableTree/ExecutableTree.tsx
deleted file mode 100644
index 506c0c1d..00000000
--- a/desktop/src/layout/Sidebar/ExecutableTree/ExecutableTree.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import {
-  Group,
-  RenderTreeNodePayload,
-  ScrollArea,
-  Text,
-  Tree,
-  TreeNodeData,
-  useTree,
-} from "@mantine/core";
-import {
-  IconBlocks,
-  IconCircleCheckFilled,
-  IconCirclePlus,
-  IconFolder,
-  IconFolderOpen,
-  IconOctagon,
-  IconPlayerPlayFilled,
-  IconProgressDown,
-  IconProgressX,
-  IconRefresh,
-  IconReload,
-  IconSettingsAutomation,
-  IconWindowMaximize,
-} from "@tabler/icons-react";
-import { useMemo, useCallback } from "react";
-import {
-  BuildVerbType,
-  ConfigurationVerbType,
-  CreationVerbType,
-  DeactivationVerbType,
-  DestructionVerbType,
-  EnrichedExecutable,
-  GetUIVerbType,
-  LaunchVerbType,
-  RestartVerbType,
-  RetrievalVerbType,
-  UpdateVerbType,
-  ValidationVerbType,
-} from "../../../types/executable";
-import { useAppContext } from "../../../hooks/useAppContext.tsx";
-import { useLocation } from "wouter";
-
-interface CustomTreeNodeData extends TreeNodeData {
-  isNamespace: boolean;
-  verbType: string | null;
-}
-
-function getTreeData(executables: EnrichedExecutable[]): CustomTreeNodeData[] {
-  const execsByNamespace: Record<string, EnrichedExecutable[]> = {};
-  const rootExecutables: EnrichedExecutable[] = [];
-
-  // Separate executables into namespaced and root level
-  for (const executable of executables) {
-    if (executable.namespace) {
-      if (!execsByNamespace[executable.namespace]) {
-        execsByNamespace[executable.namespace] = [];
-      }
-      execsByNamespace[executable.namespace].push(executable);
-    } else {
-      rootExecutables.push(executable);
-    }
-  }
-
-  const treeData: CustomTreeNodeData[] = [];
-
-  Object.entries(execsByNamespace)
-    .sort(([namespaceA], [namespaceB]) => namespaceA.localeCompare(namespaceB))
-    .forEach(([namespace, executables]) => {
-      treeData.push({
-        label: namespace,
-        value: namespace,
-        isNamespace: true,
-        verbType: null,
-        children: executables
-          .sort((a, b) => (a.id || "").localeCompare(b.id || ""))
-          .map((executable) => ({
-            label: executable.name
-              ? executable.verb + " " + executable.name
-              : executable.verb,
-            value: executable.ref,
-            isNamespace: false,
-            verbType: GetUIVerbType(executable),
-          })),
-      });
-    });
-
-  rootExecutables
-    .sort((a, b) => (a.id || "").localeCompare(b.id || ""))
-    .forEach((executable) => {
-      treeData.push({
-        label: executable.name
-          ? executable.verb + " " + executable.name
-          : executable.verb,
-        value: executable.ref,
-        isNamespace: false,
-        verbType: GetUIVerbType(executable),
-      });
-    });
-
-  return treeData;
-}
-
-function Leaf({
-  node,
-  selected,
-  expanded,
-  hasChildren,
-  elementProps,
-}: RenderTreeNodePayload) {
-  const customNode = node as CustomTreeNodeData;
-  const [, setLocation] = useLocation();
-
-  const icon = useMemo(() => {
-    if (customNode.isNamespace && hasChildren) {
-      if (selected && expanded) {
-        return <IconFolderOpen size={16} />;
-      } else {
-        return <IconFolder size={16} />;
-      }
-    } else {
-      switch (customNode.verbType) {
-        case DeactivationVerbType:
-          return <IconOctagon size={16} />;
-        case ConfigurationVerbType:
-          return <IconSettingsAutomation size={16} />;
-        case DestructionVerbType:
-          return <IconProgressX size={16} />;
-        case RetrievalVerbType:
-          return <IconProgressDown size={16} />;
-        case UpdateVerbType:
-          return <IconRefresh size={16} />;
-        case ValidationVerbType:
-          return <IconCircleCheckFilled size={16} />;
-        case LaunchVerbType:
-          return <IconWindowMaximize size={16} />;
-        case CreationVerbType:
-          return <IconCirclePlus size={16} />;
-        case RestartVerbType:
-          return <IconReload size={16} />;
-        case BuildVerbType:
-          return <IconBlocks size={16} />;
-        default:
-          return <IconPlayerPlayFilled size={16} />;
-      }
-    }
-  }, [hasChildren, selected, expanded]);
-
-  const handleExecutableClick = useCallback(() => {
-    const encodedId = encodeURIComponent(customNode.value);
-    setLocation(`/executable/${encodedId}`);
-  }, [setLocation]);
-
-  if (customNode.isNamespace) {
-    return (
-      <Group gap="xs" {...elementProps} key={customNode.value} mb="3">
-        {icon}
-        <Text>{customNode.label}</Text>
-      </Group>
-    );
-  }
-
-  return (
-    <Group
-      gap="xs"
-      {...elementProps}
-      mb="3"
-      onClick={handleExecutableClick}
-      style={{ cursor: "pointer" }}
-    >
-      {icon}
-      <Text>{customNode.label}</Text>
-    </Group>
-  );
-}
-
-export function ExecutableTree() {
-  const { executables } = useAppContext();
-  const tree = useTree();
-
-  const treeData = useMemo(() => getTreeData(executables), [executables]);
-
-  return (
-    <>
-      <Text size="xs" fw={700} c="dimmed" mb="0" mt="md">
-        EXECUTABLES ({executables.length})
-      </Text>
-      {executables.length === 0 ? (
-        <Text size="xs" c="red">
-          No executables found
-        </Text>
-      ) : (
-        <ScrollArea scrollbarSize={6} scrollHideDelay={100}>
-          <Tree data={treeData} selectOnClick tree={tree} renderNode={Leaf} />
-        </ScrollArea>
-      )}
-    </>
-  );
-}
diff --git a/desktop/src/layout/Sidebar/Sidebar.tsx b/desktop/src/layout/Sidebar/Sidebar.tsx
index 3eda4384..2468dc4c 100644
--- a/desktop/src/layout/Sidebar/Sidebar.tsx
+++ b/desktop/src/layout/Sidebar/Sidebar.tsx
@@ -4,22 +4,24 @@ import {
   IconFolders,
   IconLogs,
   IconSettings,
+  IconTerminal2,
 } from "@tabler/icons-react";
 import { useCallback } from "react";
 import { Link, useLocation } from "wouter";
-import { useAppContext } from "../../hooks/useAppContext.tsx";
-import { ExecutableTree } from "./ExecutableTree/ExecutableTree";
 import styles from "./Sidebar.module.css";
 import iconImage from "/logo-dark.png";
 
 export function Sidebar() {
   const [location, setLocation] = useLocation();
-  const { executables } = useAppContext();
 
   const navigateToWorkspaces = useCallback(() => {
     setLocation(`/workspaces`);
   }, [setLocation]);
 
+  const navigateToExecutables = useCallback(() => {
+    setLocation(`/executables`);
+  }, [setLocation]);
+
   const navigateToLogs = useCallback(() => {
     setLocation("/logs");
   }, [setLocation]);
@@ -51,6 +53,14 @@ export function Sidebar() {
             onClick={navigateToWorkspaces}
           />
 
+          <NavLink
+            label="Executables"
+            leftSection={<IconTerminal2 size={16} />}
+            active={location.startsWith("/executables")}
+            variant="filled"
+            onClick={navigateToExecutables}
+          />
+
           <NavLink
             label="Logs"
             leftSection={<IconLogs size={16} />}
@@ -88,7 +98,6 @@ export function Sidebar() {
           />
         </Group>
 
-        {executables && executables.length > 0 && <ExecutableTree />}
       </Stack>
     </div>
   );
diff --git a/desktop/src/pages/Executable/Executable.tsx b/desktop/src/pages/Executable/Executable.tsx
index 54b63e4c..13fa968a 100644
--- a/desktop/src/pages/Executable/Executable.tsx
+++ b/desktop/src/pages/Executable/Executable.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   Card,
   Code,
-  Divider,
   Drawer,
   Grid,
   Group,
@@ -12,92 +11,48 @@ import {
   ThemeIcon,
   Title,
   Tooltip,
+  LoadingOverlay,
+  Alert, ButtonGroup,
 } from "@mantine/core";
 import {
+  IconArrowsSplit,
   IconClock,
   IconExternalLink,
   IconEye,
   IconFile,
   IconLabel,
   IconPlayerPlay,
+  IconRoute,
   IconTag,
+  IconTemplate,
   IconTerminal,
 } from "@tabler/icons-react";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import { openPath } from "@tauri-apps/plugin-opener";
 import { useEffect, useState } from "react";
+import { useParams } from "wouter";
 import { MarkdownRenderer } from "../../components/MarkdownRenderer";
 import { useNotifier } from "../../hooks/useNotifier";
 import { useSettings } from "../../hooks/useSettings";
+import { useExecutable } from "../../hooks/useExecutable";
+import { PageWrapper } from "../../components/PageWrapper.tsx";
+import { Hero } from "../../components/Hero";
 import { EnrichedExecutable } from "../../types/executable";
 import { NotificationType } from "../../types/notification";
 import { LogLine, LogViewer } from "../Logs/LogViewer";
 import { ExecutableEnvironmentDetails } from "./ExecutableEnvironmentDetails";
 import { ExecutableTypeDetails } from "./ExecutableTypeDetails";
 import { ExecutionForm, ExecutionFormData } from "./ExecutionForm";
+import { stringToColor } from "../../utils/colors.ts";
 
-export type ExecutableProps = {
-  executable: EnrichedExecutable;
-};
+export function Executable() {
+  const params = useParams();
+  const executableId = decodeURIComponent(params.executableId || "");
+  const { executable, executableError, isExecutableLoading } =
+    useExecutable(executableId);
 
-function getExecutableTypeInfo(executable: EnrichedExecutable) {
-  if (executable.exec)
-    return {
-      type: "exec",
-      icon: IconTerminal,
-      description: "Command execution",
-    };
-  if (executable.serial)
-    return {
-      type: "serial",
-      icon: IconTerminal,
-      description: "Sequential execution",
-    };
-  if (executable.parallel)
-    return {
-      type: "parallel",
-      icon: IconTerminal,
-      description: "Parallel execution",
-    };
-  if (executable.launch)
-    return {
-      type: "launch",
-      icon: IconExternalLink,
-      description: "Launch application/URI",
-    };
-  if (executable.request)
-    return {
-      type: "request",
-      icon: IconExternalLink,
-      description: "HTTP request",
-    };
-  if (executable.render)
-    return {
-      type: "render",
-      icon: IconTerminal,
-      description: "Render template",
-    };
-  return { type: "unknown", icon: IconTerminal, description: "Unknown type" };
-}
-
-function getVisibilityColor(visibility?: string) {
-  switch (visibility) {
-    case "public":
-      return "green";
-    case "private":
-      return "blue";
-    case "internal":
-      return "orange";
-    case "hidden":
-      return "red";
-    default:
-      return "gray";
-  }
-}
-
-export function Executable({ executable }: ExecutableProps) {
-  const typeInfo = getExecutableTypeInfo(executable);
+  // Local UI state and helpers formerly in ExecutableView
   const { settings } = useSettings();
   const { setNotification } = useNotifier();
   const [output, setOutput] = useState<LogLine[]>([]);
@@ -130,19 +85,16 @@ export function Executable({ executable }: ExecutableProps) {
       });
     };
 
-    setupListeners();
+    void setupListeners();
 
     return () => {
-      if (unlistenOutput) {
-        unlistenOutput();
-      }
-      if (unlistenComplete) {
-        unlistenComplete();
-      }
+      if (unlistenOutput) unlistenOutput();
+      if (unlistenComplete) unlistenComplete();
     };
   }, [setNotification]);
 
   const onOpenFile = async () => {
+    if (!executable) return;
     try {
       await openPath(executable.flowfile, settings.executableApp || undefined);
     } catch (error) {
@@ -150,21 +102,8 @@ export function Executable({ executable }: ExecutableProps) {
     }
   };
 
-  const onExecute = async () => {
-    const hasPromptParams = executable.exec?.params?.some(
-      (param) => param.prompt,
-    );
-    const hasArgs = executable.exec?.args && executable.exec.args.length > 0;
-
-    if (hasPromptParams || hasArgs) {
-      setFormOpened(true);
-      return;
-    }
-
-    await executeWithData({ params: {}, args: "" });
-  };
-
   const executeWithData = async (formData: ExecutionFormData) => {
+    if (!executable) return;
     try {
       setOutput([]);
 
@@ -208,149 +147,236 @@ export function Executable({ executable }: ExecutableProps) {
     }
   };
 
+  const onExecute = async () => {
+    if (!executable) return;
+    const hasPromptParams = executable.exec?.params?.some((param) => param.prompt);
+    const hasArgs = executable.exec?.args && executable.exec.args.length > 0;
+
+    if (hasPromptParams || hasArgs) {
+      setFormOpened(true);
+      return;
+    }
+
+    await executeWithData({ params: {}, args: "" });
+  };
+
+  const typeInfo = executable && getExecutableTypeInfo(executable);
+
   return (
-    <Stack gap="lg">
-      <Card withBorder>
-        <Stack gap="md">
-          <Group justify="space-between" align="flex-start">
-            <Stack gap="xs">
-              <Group gap="sm" align="center">
+    <PageWrapper>
+      {isExecutableLoading && (
+        <LoadingOverlay
+          visible={isExecutableLoading}
+          zIndex={1000}
+          overlayProps={{ radius: "sm", blur: 2 }}
+        />
+      )}
+      {executableError && <Alert variant="light" color="red.5">Error: {executableError.message}</Alert>}
+      {executable ? (
+        <Stack gap="sm">
+          <Hero variant="left" pattern="subtle">
+            <Hero.Header>
+              <Group gap="xs">
                 <ThemeIcon variant="light" size="lg">
-                  <typeInfo.icon size={20} />
+                  {typeInfo && <typeInfo.icon size={16} />}
                 </ThemeIcon>
-                <div>
-                  <Title order={2}>{executable.ref}</Title>
-                  <Text size="sm" c="dimmed">
-                    {typeInfo.description}
-                  </Text>
-                </div>
+                <Title order={2}>{executable.ref}</Title>
               </Group>
-
-              <Group gap="xs">
-                <Tooltip label={`Defined in ${executable.flowfile}`}>
-                  <Badge variant="light" size="sm">
-                    <Group gap={4}>
-                      <IconFile size={12} />
-                      {executable.flowfile.split("/").pop() ||
-                        executable.flowfile}
-                    </Group>
-                  </Badge>
-                </Tooltip>
-                <Badge
-                  variant="light"
-                  color={getVisibilityColor(executable.visibility)}
-                >
+              {typeInfo?.description && (
+                <Text size="xs" c="dimmed" pl="calc(34px + var(--mantine-spacing-xs))">{typeInfo.description}</Text>
+              )}
+            </Hero.Header>
+            <Hero.Actions>
+              <Badge variant="light" color={getVisibilityColor(executable.visibility)}>
+                <Group gap={4}>
+                  <IconEye size={12} />
+                  {executable.visibility || "public"}
+                </Group>
+              </Badge>
+              {executable.timeout && (
+                <Badge variant="light" color="gray">
                   <Group gap={4}>
-                    <IconEye size={12} />
-                    {executable.visibility || "public"}
+                    <IconClock size={12} />
+                    {executable.timeout}
                   </Group>
                 </Badge>
-                {executable.timeout && (
-                  <Badge variant="light" color="gray">
-                    <Group gap={4}>
-                      <IconClock size={12} />
-                      {executable.timeout}
-                    </Group>
-                  </Badge>
-                )}
-              </Group>
-            </Stack>
-
-            <Group gap="sm">
-              <Button
-                leftSection={<IconPlayerPlay size={16} />}
-                onClick={onExecute}
-                size="md"
-              >
-                Execute
-              </Button>
-              <Button
-                variant="light"
-                leftSection={<IconExternalLink size={16} />}
-                onClick={onOpenFile}
-                size="md"
-              >
-                Edit
-              </Button>
-            </Group>
-          </Group>
+              )}
+              <Tooltip label={`Defined in ${executable.flowfile}`}>
+                <Badge size="sm" color="tertiary" variant="white">
+                  <Group gap={4}>
+                    <IconFile size={12} />
+                    {executable.flowfile.split("/").pop() || executable.flowfile}
+                  </Group>
+                </Badge>
+              </Tooltip>
+              <ButtonGroup>
+                <Button onClick={onOpenFile} leftSection={<IconExternalLink size={16} />} size="compact-xs" color="tertiary" variant="white">
+                  Edit
+                </Button>
+                <Button onClick={onExecute} leftSection={<IconPlayerPlay size={16} />} size="compact-xs" color="tertiary">
+                  Execute
+                </Button>
+              </ButtonGroup>
+            </Hero.Actions>
+          </Hero>
 
           {executable.description && (
             <>
-              <Divider />
               <MarkdownRenderer>{executable.description}</MarkdownRenderer>
             </>
           )}
-        </Stack>
-      </Card>
 
-      <Grid>
-        {executable.aliases && executable.aliases.length > 0 && (
-          <Grid.Col span={6}>
-            <Card withBorder>
-              <Stack gap="sm">
-                <Title order={4}>
-                  <Group gap="xs">
-                    <IconLabel size={16} />
-                    Aliases
-                  </Group>
-                </Title>
-                <Group gap="xs">
-                  {executable.aliases.map((alias, index) => (
-                    <Code key={index}>{alias}</Code>
-                  ))}
-                </Group>
-              </Stack>
-            </Card>
-          </Grid.Col>
-        )}
+          <Grid>
+            {executable.aliases && executable.aliases.length > 0 && (
+              <Grid.Col span={6}>
+                <Card withBorder>
+                  <Stack gap="sm">
+                    <Title order={4}>
+                      <Group gap="xs">
+                        <IconLabel size={16} />
+                        Aliases
+                      </Group>
+                    </Title>
+                    <Group gap="xs">
+                      {executable.aliases.map((alias, index) => (
+                        <Code key={index}>{alias}</Code>
+                      ))}
+                    </Group>
+                  </Stack>
+                </Card>
+              </Grid.Col>
+            )}
 
-        {executable.tags && executable.tags.length > 0 && (
-          <Grid.Col span={6}>
-            <Card withBorder>
-              <Stack gap="sm">
-                <Title order={4}>
-                  <Group gap="xs">
-                    <IconTag size={16} />
-                    Tags
-                  </Group>
-                </Title>
-                <Group gap="xs">
-                  {executable.tags.map((tag, index) => (
-                    <Badge key={index} variant="dot">
-                      {tag}
-                    </Badge>
-                  ))}
-                </Group>
-              </Stack>
-            </Card>
-          </Grid.Col>
-        )}
-      </Grid>
+            {executable.verbAliases && executable.verbAliases.length > 0 && (
+              <Grid.Col span={6}>
+                <Card withBorder>
+                  <Stack gap="sm">
+                    <Title order={4}>
+                      <Group gap="xs">
+                        <IconLabel size={16} />
+                        Verb Aliases
+                      </Group>
+                    </Title>
+                    <Group gap="xs">
+                      {executable.verbAliases.map((alias, index) => (
+                        <Code key={index}>{String(alias)}</Code>
+                      ))}
+                    </Group>
+                  </Stack>
+                </Card>
+              </Grid.Col>
+            )}
 
-      <ExecutableEnvironmentDetails executable={executable} />
-      <ExecutableTypeDetails executable={executable} />
+            {executable.tags && executable.tags.length > 0 && (
+              <Grid.Col span={6}>
+                <Card withBorder>
+                  <Stack gap="sm">
+                    <Title order={4}>
+                      <Group gap="xs">
+                        <IconTag size={16} />
+                        Tags
+                      </Group>
+                    </Title>
+                    <Group gap="xs">
+                      {executable.tags.map((tag, index) => (
+                        <Badge
+                          key={index}
+                          color={stringToColor(tag)}
+                          size="sm"
+                          autoContrast
+                        >
+                          {tag}
+                        </Badge>
+                      ))}
+                    </Group>
+                  </Stack>
+                </Card>
+              </Grid.Col>
+            )}
+          </Grid>
 
-      {output.length > 0 && (
-        <Drawer
-          opened={true}
-          onClose={() => setOutput([])}
-          title={<Text size="sm">Execution Output</Text>}
-          size="33%"
-          position="bottom"
-        >
-          <LogViewer logs={output} formatted={true} fontSize={12} />
-        </Drawer>
-      )}
+          <ExecutableEnvironmentDetails executable={executable} />
+          <ExecutableTypeDetails executable={executable} />
 
-      {formOpened && (
-        <ExecutionForm
-          opened={formOpened}
-          onClose={() => setFormOpened(false)}
-          onSubmit={executeWithData}
-          executable={executable}
-        />
+          {output.length > 0 && (
+            <Drawer
+              opened={true}
+              onClose={() => setOutput([])}
+              title={<Text size="sm">Execution Output</Text>}
+              size="33%"
+              position="bottom"
+            >
+              <LogViewer logs={output} formatted={true} fontSize={12} />
+            </Drawer>
+          )}
+
+          {formOpened && (
+            <ExecutionForm
+              opened={formOpened}
+              onClose={() => setFormOpened(false)}
+              onSubmit={executeWithData}
+              executable={executable}
+            />
+          )}
+        </Stack>
+      ) : (
+        <Alert variant="light" color="red.5">Error: Executable not found</Alert>
       )}
-    </Stack>
+    </PageWrapper>
   );
 }
+
+function getExecutableTypeInfo(executable: EnrichedExecutable) {
+  if (executable.exec)
+    return {
+      type: "exec",
+      icon: IconTerminal,
+      description: "Command execution",
+    };
+  if (executable.serial)
+    return {
+      type: "serial",
+      icon: IconRoute,
+      description: "Sequential execution",
+    };
+  if (executable.parallel)
+    return {
+      type: "parallel",
+      icon: IconArrowsSplit,
+      description: "Parallel execution",
+    };
+  if (executable.launch)
+    return {
+      type: "launch",
+      icon: IconExternalLink,
+      description: "Launch application/URI",
+    };
+  if (executable.request)
+    return {
+      type: "request",
+      icon: IconExternalLink,
+      description: "HTTP request",
+    };
+  if (executable.render)
+    return {
+      type: "render",
+      icon: IconTemplate,
+      description: "Render template",
+    };
+  return { type: "unknown", icon: IconTerminal, description: "Unknown type" };
+}
+
+function getVisibilityColor(visibility?: string) {
+  switch (visibility) {
+    case "public":
+      return "green.3";
+    case "private":
+      return "blue.3";
+    case "internal":
+      return "orange.3";
+    case "hidden":
+      return "red.3";
+    default:
+      return "gray.3";
+  }
+}
diff --git a/desktop/src/pages/Executable/ExecutableEnvironmentDetails.tsx b/desktop/src/pages/Executable/ExecutableEnvironmentDetails.tsx
index 08f85e24..67d1d66e 100644
--- a/desktop/src/pages/Executable/ExecutableEnvironmentDetails.tsx
+++ b/desktop/src/pages/Executable/ExecutableEnvironmentDetails.tsx
@@ -1,5 +1,4 @@
 import {
-  ActionIcon,
   Badge,
   Card,
   Code,
@@ -9,9 +8,8 @@ import {
   Table,
   Text,
   Title,
-  Tooltip,
 } from "@mantine/core";
-import { IconFlag, IconInfoCircle, IconKey } from "@tabler/icons-react";
+import { IconFlag, IconKey, IconFile } from "@tabler/icons-react";
 import { EnrichedExecutable } from "../../types/executable";
 import {
   ExecutableArgument,
@@ -22,9 +20,9 @@ export type ExecutableEnvironmentDetailsProps = {
   executable: EnrichedExecutable;
 };
 
-export function ExecutableEnvironmentDetails({
-  executable,
-}: ExecutableEnvironmentDetailsProps) {
+type ParamType = "static" | "secret" | "prompt" | "file" | "unknown";
+
+export function ExecutableEnvironmentDetails({executable}: ExecutableEnvironmentDetailsProps) {
   const env =
     executable.exec ||
     executable.launch ||
@@ -50,54 +48,54 @@ export function ExecutableEnvironmentDetails({
                   Environment Parameters
                 </Group>
               </Title>
-              <Table>
+              <Table withTableBorder>
                 <Table.Thead>
                   <Table.Tr>
-                    <Table.Th>Variable</Table.Th>
+                    <Table.Th>Destination</Table.Th>
                     <Table.Th>Type</Table.Th>
                     <Table.Th>Source</Table.Th>
                   </Table.Tr>
                 </Table.Thead>
                 <Table.Tbody>
-                  {env.params.map(
-                    (param: ExecutableParameter, index: number) => {
-                      const type = param.text
-                        ? "static"
-                        : param.secretRef
-                          ? "secret"
-                          : "prompt";
-                      const source =
-                        param.text || param.secretRef || param.prompt;
+                  {env.params.map((param: ExecutableParameter, index: number) => {
+                    const type = getParamType(param);
+                    const source = getParamSource(param);
+                    const fileDestination = param.outputFile;
 
-                      return (
-                        <Table.Tr key={index}>
-                          <Table.Td>
-                            <Code>{param.envKey}</Code>
-                          </Table.Td>
-                          <Table.Td>
-                            <Badge
-                              size="sm"
-                              variant="light"
-                              color={
-                                type === "secret"
-                                  ? "red"
-                                  : type === "prompt"
-                                    ? "blue"
-                                    : "gray"
-                              }
-                            >
-                              {type}
-                            </Badge>
-                          </Table.Td>
-                          <Table.Td>
-                            <Text size="sm" style={{ maxWidth: 200 }}>
-                              {source}
-                            </Text>
-                          </Table.Td>
-                        </Table.Tr>
-                      );
-                    },
-                  )}
+                    return (
+                      <Table.Tr key={index}>
+                        <Table.Td>
+                          {param.envKey ? (
+                            <Group gap={4} wrap="nowrap">
+                              <Code>{param.envKey}</Code>
+                              <Badge size="xs" variant="dot" color="secondary">ENV</Badge>
+                            </Group>
+                          ) : fileDestination ? (
+                            <Group gap={4} wrap="nowrap">
+                              <IconFile size={14} />
+                              <Code>{fileDestination}</Code>
+                            </Group>
+                          ) : (
+                            <Text c="dimmed" size="sm">-</Text>
+                          )}
+                        </Table.Td>
+                        <Table.Td>
+                          <Text
+                            size="sm"
+                            variant="transparent"
+                            c={getParamTypeColor(type)}
+                          >
+                            {type}
+                          </Text>
+                        </Table.Td>
+                        <Table.Td>
+                          <Text size="sm" style={{ wordBreak: "break-word", maxWidth: 300 }} truncate>
+                            {source}
+                          </Text>
+                        </Table.Td>
+                      </Table.Tr>
+                    );
+                  })}
                 </Table.Tbody>
               </Table>
             </Stack>
@@ -115,49 +113,63 @@ export function ExecutableEnvironmentDetails({
                   Command Arguments
                 </Group>
               </Title>
-              <Table>
+              <Table withTableBorder>
                 <Table.Thead>
                   <Table.Tr>
-                    <Table.Th>Variable</Table.Th>
-                    <Table.Th>Input</Table.Th>
+                    <Table.Th>Destination</Table.Th>
+                    <Table.Th>CLI Input</Table.Th>
                     <Table.Th>Type</Table.Th>
                     <Table.Th>Required</Table.Th>
                   </Table.Tr>
                 </Table.Thead>
                 <Table.Tbody>
-                  {env.args.map((arg: ExecutableArgument, index: number) => (
-                    <Table.Tr key={index}>
-                      <Table.Td>
-                        <Code>{arg.envKey}</Code>
-                      </Table.Td>
-                      <Table.Td>
-                        <Group gap="xs">
-                          <Badge size="sm" variant="light">
-                            {arg.pos ? `pos-${arg.pos}` : `--${arg.flag}`}
-                          </Badge>
-                          {arg.default && (
-                            <Tooltip label={`Default: ${arg.default}`}>
-                              <ActionIcon variant="subtle" size="xs">
-                                <IconInfoCircle size={12} />
-                              </ActionIcon>
-                            </Tooltip>
+                  {env.args.map((arg: ExecutableArgument, index: number) => {
+                    const fileDestination = arg.outputFile;
+
+                    return (
+                      <Table.Tr key={index}>
+                        <Table.Td>
+                          {arg.envKey ? (
+                            <Group gap={4} wrap="nowrap">
+                              <Code>{arg.envKey}</Code>
+                              <Badge size="xs" variant="dot" color="secondary">ENV</Badge>
+                            </Group>
+                          ) : fileDestination ? (
+                            <Group gap={4} wrap="nowrap">
+                              <IconFile size={14} />
+                              <Code>{fileDestination}</Code>
+                            </Group>
+                          ) : (
+                            <Text c="dimmed" size="sm">Not saved</Text>
                           )}
-                        </Group>
-                      </Table.Td>
-                      <Table.Td>
-                        <Text size="sm">{arg.type || "string"}</Text>
-                      </Table.Td>
-                      <Table.Td>
-                        <Badge
-                          size="sm"
-                          variant="light"
-                          color={arg.required ? "red" : "green"}
-                        >
-                          {arg.required ? "Yes" : "No"}
-                        </Badge>
-                      </Table.Td>
-                    </Table.Tr>
-                  ))}
+                        </Table.Td>
+                        <Table.Td>
+                          <Group gap="xs" wrap="wrap">
+                            <Code>
+                              {arg.pos ? `position=${arg.pos}` : `flag=${arg.flag}`}
+                            </Code>
+                            {arg.default && (
+                              <Text size="xs" c="secondary">
+                                default: {arg.default}
+                              </Text>
+                            )}
+                          </Group>
+                        </Table.Td>
+                        <Table.Td>
+                          <Code>{arg.type || "string"}</Code>
+                        </Table.Td>
+                        <Table.Td>
+                          <Badge
+                            size="sm"
+                            variant="light"
+                            color={arg.required ? "red.5" : "green.5"}
+                          >
+                            {arg.required ? "Yes" : "No"}
+                          </Badge>
+                        </Table.Td>
+                      </Table.Tr>
+                    );
+                  })}
                 </Table.Tbody>
               </Table>
             </Stack>
@@ -167,3 +179,25 @@ export function ExecutableEnvironmentDetails({
     </Grid>
   );
 }
+
+function getParamType(param: ExecutableParameter): ParamType {
+  if (param.text) return "static";
+  if (param.secretRef) return "secret";
+  if (param.prompt) return "prompt";
+  if (param.envFile) return "file";
+  return "unknown";
+}
+
+function getParamSource(param: ExecutableParameter): string {
+  return param.text || param.secretRef || param.prompt || param.envFile || "-";
+}
+
+function getParamTypeColor(type: ParamType): string {
+  switch (type) {
+    case "secret": return "red.5";
+    case "prompt": return "blue.5";
+    case "file": return "purple.5";
+    case "static": return "gray.5";
+    default: return "gray.5";
+  }
+}
diff --git a/desktop/src/pages/Executable/ExecutableRoute.tsx b/desktop/src/pages/Executable/ExecutableRoute.tsx
deleted file mode 100644
index 1783f752..00000000
--- a/desktop/src/pages/Executable/ExecutableRoute.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Text, LoadingOverlay } from "@mantine/core";
-import { useParams } from "wouter";
-import { useExecutable } from "../../hooks/useExecutable";
-import { PageWrapper } from "../../components/PageWrapper.tsx";
-import { Welcome } from "../Welcome/Welcome";
-import { Executable } from "./Executable";
-
-export function ExecutableRoute() {
-  const params = useParams();
-  const executableId = decodeURIComponent(params.executableId || "");
-  const { executable, executableError, isExecutableLoading } =
-    useExecutable(executableId);
-
-  return (
-    <PageWrapper>
-      {isExecutableLoading && (
-        <LoadingOverlay
-          visible={isExecutableLoading}
-          zIndex={1000}
-          overlayProps={{ radius: "sm", blur: 2 }}
-        />
-      )}
-      {executableError && <Text c="red">Error: {executableError.message}</Text>}
-      {executable ? (
-        <Executable executable={executable} />
-      ) : (
-        <Welcome welcomeMessage="Select an executable to get started." />
-      )}
-    </PageWrapper>
-  );
-}
diff --git a/desktop/src/pages/Executable/types/ExecutableExecDetails.tsx b/desktop/src/pages/Executable/types/ExecutableExecDetails.tsx
index b70e3efc..94eb43df 100644
--- a/desktop/src/pages/Executable/types/ExecutableExecDetails.tsx
+++ b/desktop/src/pages/Executable/types/ExecutableExecDetails.tsx
@@ -1,5 +1,5 @@
-import { Badge, Card, Code, Group, Stack, Title } from "@mantine/core";
-import { IconTerminal } from "@tabler/icons-react";
+import { Badge, Card, Code, Divider, Group, Stack, Title } from "@mantine/core";
+import { IconHash } from "@tabler/icons-react";
 import { useSettings } from "../../../hooks/useSettings";
 import { EnrichedExecutable } from "../../../types/executable";
 import { CodeHighlighter } from "../../../components/CodeHighlighter";
@@ -14,42 +14,50 @@ export function ExecutableExecDetails({
   const { settings } = useSettings();
 
   return (
-    <Card withBorder>
+    <Card withBorder shadow="sm" padding="md">
       <Stack gap="sm">
-        <Title order={4}>
+        <Group justify="space-between" align="center">
+          <Title order={4}>
+            <Group gap="xs">
+              <IconHash size={16} />
+              Execution Configuration
+            </Group>
+          </Title>
           <Group gap="xs">
-            <IconTerminal size={16} />
-            Execution Details
+            {executable.exec?.cmd && (
+              <Badge variant="light" color="green.5">cmd</Badge>
+            )}
+            {executable.exec?.file && (
+              <Badge variant="light" color="blue.5">file</Badge>
+            )}
+            {executable.exec?.logMode && (
+              <Badge variant="light" color="gray.5">format: {executable.exec?.logMode}</Badge>
+            )}
           </Group>
-        </Title>
-        <Stack gap="xs">
-          {executable.exec?.cmd && (
-            <div>
-              <Title order={5}>Command:</Title>
-              <CodeHighlighter theme={settings.theme} copyButton={false}>
-                {executable.exec.cmd}
-              </CodeHighlighter>
-            </div>
-          )}
-          {executable.exec?.file && (
-            <div>
-              <Title order={5}>File:</Title>
-              <Code>{executable.exec.file}</Code>
-            </div>
-          )}
-          {executable.exec?.dir && (
-            <div>
-              <Title order={5}>Directory:</Title>
-              <Code>{executable.exec.dir}</Code>
-            </div>
-          )}
-          {executable.exec?.logMode && (
-            <div>
-              <Title order={5}>Log Mode:</Title>
-              <Badge variant="light">{executable.exec.logMode}</Badge>
-            </div>
-          )}
-        </Stack>
+        </Group>
+
+        {executable.exec?.cmd && (
+          <>
+            <Divider label="Command" labelPosition="left" my="xs" />
+            <CodeHighlighter theme={settings.theme} copyButton={false}>
+              {executable.exec.cmd}
+            </CodeHighlighter>
+          </>
+        )}
+
+        {executable.exec?.file && (
+          <>
+            <Divider label="File" labelPosition="left" my="xs" />
+            <Code>{executable.exec.file}</Code>
+          </>
+        )}
+
+        {executable.exec?.dir && (
+          <>
+            <Divider label="Working directory" labelPosition="left" my="xs" />
+            <Code>{executable.exec.dir}</Code>
+          </>
+        )}
       </Stack>
     </Card>
   );
diff --git a/desktop/src/pages/Executable/types/ExecutableLaunchDetails.tsx b/desktop/src/pages/Executable/types/ExecutableLaunchDetails.tsx
index 280deb08..71fc9925 100644
--- a/desktop/src/pages/Executable/types/ExecutableLaunchDetails.tsx
+++ b/desktop/src/pages/Executable/types/ExecutableLaunchDetails.tsx
@@ -1,4 +1,4 @@
-import { Card, Code, Group, Stack, Text, Title } from "@mantine/core";
+import { Badge, Card, Code, Divider, Group, Stack, Text, Title } from "@mantine/core";
 import { IconExternalLink } from "@tabler/icons-react";
 import { EnrichedExecutable } from "../../../types/executable";
 
@@ -10,35 +10,44 @@ export function ExecutableLaunchDetails({
   executable,
 }: ExecutableLaunchDetailsProps) {
   return (
-    <Card withBorder>
+    <Card withBorder shadow="sm" padding="md">
       <Stack gap="sm">
-        <Title order={4}>
+        <Group justify="space-between" align="center">
+          <Title order={4}>
+            <Group gap="xs">
+              <IconExternalLink size={16} />
+              Launch Configuration
+            </Group>
+          </Title>
           <Group gap="xs">
-            <IconExternalLink size={16} />
-            Launch Configuration
+            {typeof executable.launch?.app !== "undefined" && (
+              <Badge variant="light" color={executable.launch?.app ? "blue.5" : "gray.5"}>
+                app: {executable.launch?.app ? "set" : "unset"}
+              </Badge>
+            )}
           </Group>
-        </Title>
-        <Stack gap="xs">
-          {executable.launch?.app && (
-            <div>
-              <Title order={5}>App:</Title>
-              <Code>{executable.launch.app}</Code>
-            </div>
-          )}
-          {executable.launch?.uri && (
-            <div>
-              <Title order={5}>URI:</Title>
-              <Text
-                component="a"
-                href={executable.launch.uri}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {executable.launch.uri}
-              </Text>
-            </div>
-          )}
-        </Stack>
+        </Group>
+
+        {executable.launch?.uri && (
+          <>
+            <Divider label="Target" labelPosition="left" my="xs" />
+            <Text
+              component="a"
+              href={executable.launch.uri}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {executable.launch.uri}
+            </Text>
+          </>
+        )}
+
+        {executable.launch?.app && (
+          <>
+            <Divider label="Application" labelPosition="left" my="xs" />
+            <Code>{executable.launch.app}</Code>
+          </>
+        )}
       </Stack>
     </Card>
   );
diff --git a/desktop/src/pages/Executable/types/ExecutableParallelDetails.tsx b/desktop/src/pages/Executable/types/ExecutableParallelDetails.tsx
index fe36e617..d5ceaaef 100644
--- a/desktop/src/pages/Executable/types/ExecutableParallelDetails.tsx
+++ b/desktop/src/pages/Executable/types/ExecutableParallelDetails.tsx
@@ -1,8 +1,9 @@
-import { Badge, Card, Code, Group, Stack, Text, Title } from "@mantine/core";
-import { IconTerminal } from "@tabler/icons-react";
+import { Anchor, Badge, Card, Divider, Group, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import { IconArrowsRight } from "@tabler/icons-react";
 import { useSettings } from "../../../hooks/useSettings";
 import { EnrichedExecutable } from "../../../types/executable";
 import { CodeHighlighter } from "../../../components/CodeHighlighter";
+import { Link } from "wouter";
 
 export type ExecutableParallelDetailsProps = {
   executable: EnrichedExecutable;
@@ -13,79 +14,88 @@ export function ExecutableParallelDetails({
 }: ExecutableParallelDetailsProps) {
   const { settings } = useSettings();
 
+  const execs = executable.parallel?.execs || [];
+
   return (
-    <Card withBorder>
+    <Card withBorder shadow="sm" padding="md">
       <Stack gap="sm">
-        <Title order={4}>
+        <Group justify="space-between">
+          <Title order={4}>
+            <Group gap="xs">
+              <IconArrowsRight size={16} />
+              Parallel Configuration
+            </Group>
+          </Title>
           <Group gap="xs">
-            <IconTerminal size={16} />
-            Parallel Configuration
-          </Group>
-        </Title>
-        <Stack gap="xs">
-          {executable.parallel?.maxThreads &&
-            executable.parallel.maxThreads > 0 && (
-              <div>
-                <Title order={5}>Max Threads:</Title>
-                <Code>{executable.parallel.maxThreads}</Code>
-              </div>
-            )}
-          {executable.parallel?.failFast !== undefined && (
-            <div>
-              <Title order={5}>Fail Fast:</Title>
-              <Badge
-                variant="light"
-                color={executable.parallel.failFast ? "red" : "green"}
-              >
-                {executable.parallel.failFast ? "enabled" : "disabled"}
+            {executable.parallel?.failFast && (
+              <Badge variant="light" color={executable.parallel?.failFast ? "red.5" : "green.5"}>
+                Fail fast: {executable.parallel?.failFast ? "on" : "off"}
               </Badge>
-            </div>
-          )}
-          {executable.parallel?.execs &&
-            executable.parallel.execs.length > 0 && (
-              <div>
-                <Title order={5}>Executables:</Title>
-                <Stack gap="md">
-                  {executable.parallel.execs.map((exec, index) => (
-                    <div key={index}>
-                      <Text fw={500}>
-                        {index + 1}. {exec.ref ? `ref: ${exec.ref}` : "cmd:"}
-                      </Text>
-                      {exec.cmd && (
-                        <CodeHighlighter
-                          theme={settings.theme}
-                          copyButton={false}
-                        >
-                          {exec.cmd}
-                        </CodeHighlighter>
-                      )}
-                      {exec.retries !== undefined && exec.retries > 0 && (
-                        <div>
-                          <Text size="sm" c="dimmed">
-                            • Retries: {exec.retries}
-                          </Text>
-                        </div>
-                      )}
-                      {exec.args && exec.args.length > 0 && (
-                        <div>
-                          <Text size="sm" c="dimmed">
-                            • Arguments:
-                          </Text>
-                          <Stack gap="xs" ml="md">
-                            {exec.args.map((arg, argIndex) => (
-                              <Text key={argIndex} size="sm" c="dimmed">
-                                - {arg}
-                              </Text>
-                            ))}
-                          </Stack>
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </Stack>
-              </div>
             )}
-        </Stack>
+            {executable.parallel?.maxThreads && executable.parallel.maxThreads > 0 && (
+              <Badge variant="light" color="blue.5">Max threads: {executable.parallel.maxThreads}</Badge>
+            )}
+            {execs.length > 0 && (
+              <Badge variant="light" color="gray.5">Execs: {execs.length}</Badge>
+            )}
+          </Group>
+        </Group>
+
+        {execs.length > 0 ? (
+          <>
+            <Divider label="Executables" labelPosition="left" my="xs" />
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+              {execs.map((exec, index) => (
+                <Card key={index} withBorder padding="sm" radius="md">
+                  <Stack gap={6}>
+                    <Group justify="space-between" align="center">
+                      <Group gap={6}>
+                        <Text fw={600}>#{index + 1}</Text>
+                        {exec.ref ? (
+                          <>
+                            <Text>ref: </Text>
+                            <Anchor component={Link} to={`/executable/${encodeURIComponent(exec.ref)}`}>
+                               {exec.ref}
+                            </Anchor>
+                          </>
+                        ) : (
+                          <Text>cmd</Text>
+                        )}
+                      </Group>
+                      <Group gap={6}>
+                        {exec.retries !== undefined && exec.retries > 0 && (
+                          <Badge size="sm" variant="dot" color="orange">retries: {exec.retries}</Badge>
+                        )}
+                        {exec.args && exec.args.length > 0 && (
+                          <Badge size="sm" variant="light" color="gray">args: {exec.args.length}</Badge>
+                        )}
+                      </Group>
+                    </Group>
+
+                    {exec.cmd && (
+                      <CodeHighlighter theme={settings.theme} copyButton={false}>
+                        {exec.cmd}
+                      </CodeHighlighter>
+                    )}
+
+                    {exec.args && exec.args.length > 0 && (
+                      <Stack gap={2}>
+                        <Text size="sm" c="dimmed">Arguments</Text>
+                        <Stack gap={2} ml="sm">
+                          {exec.args.map((arg, argIndex) => (
+                            <Text key={argIndex} size="sm" c="dimmed">- {arg}</Text>
+                          ))}
+                        </Stack>
+                      </Stack>
+                    )}
+                  </Stack>
+                </Card>
+              ))}
+            </SimpleGrid>
+          </>
+        ) : (
+          <Text c="dimmed" size="sm">No executables defined.</Text>
+        )}
       </Stack>
     </Card>
   );
diff --git a/desktop/src/pages/Executable/types/ExecutableRenderDetails.tsx b/desktop/src/pages/Executable/types/ExecutableRenderDetails.tsx
index 050a8017..d236862e 100644
--- a/desktop/src/pages/Executable/types/ExecutableRenderDetails.tsx
+++ b/desktop/src/pages/Executable/types/ExecutableRenderDetails.tsx
@@ -1,5 +1,6 @@
-import { Card, Code, Group, Stack, Title } from "@mantine/core";
-import { IconTerminal } from "@tabler/icons-react";
+import { Card, Code, Divider, Group, Stack, Text, Title } from "@mantine/core";
+import { IconArrowAutofitHeightFilled
+} from "@tabler/icons-react";
 import { EnrichedExecutable } from "../../../types/executable";
 
 export type ExecutableRenderDetailsProps = {
@@ -10,34 +11,43 @@ export function ExecutableRenderDetails({
   executable,
 }: ExecutableRenderDetailsProps) {
   return (
-    <Card withBorder>
+    <Card withBorder shadow="sm" padding="md">
       <Stack gap="sm">
-        <Title order={4}>
-          <Group gap="xs">
-            <IconTerminal size={16} />
-            Render Configuration
-          </Group>
-        </Title>
-        <Stack gap="xs">
-          {executable.render?.dir && (
-            <div>
-              <Title order={5}>Executed from:</Title>
-              <Code>{executable.render.dir}</Code>
-            </div>
-          )}
-          {executable.render?.templateFile && (
-            <div>
-              <Title order={5}>Template File:</Title>
-              <Code>{executable.render.templateFile}</Code>
-            </div>
-          )}
-          {executable.render?.templateDataFile && (
-            <div>
-              <Title order={5}>Template Store File:</Title>
-              <Code>{executable.render.templateDataFile}</Code>
-            </div>
-          )}
-        </Stack>
+        <Group justify="space-between" align="center">
+          <Title order={4}>
+            <Group gap="xs">
+              <IconArrowAutofitHeightFilled size={16} />
+              Render Configuration
+            </Group>
+          </Title>
+        </Group>
+
+        {(executable.render?.templateFile || executable.render?.templateDataFile) && (
+          <>
+            <Divider label="Template" labelPosition="left" my="xs" />
+            <Stack gap="xs">
+              {executable.render?.templateFile && (
+                <Stack gap={2}>
+                  <Text size="xs" c="dimmed">Template file</Text>
+                  <Code>{executable.render.templateFile}</Code>
+                </Stack>
+              )}
+              {executable.render?.templateDataFile && (
+                <Stack gap={2}>
+                  <Text size="xs" c="dimmed">Template data file</Text>
+                  <Code>{executable.render.templateDataFile}</Code>
+                </Stack>
+              )}
+            </Stack>
+          </>
+        )}
+
+        {executable.render?.dir && (
+          <>
+            <Divider label="Working directory" labelPosition="left" my="xs" />
+            <Code>{executable.render.dir}</Code>
+          </>
+        )}
       </Stack>
     </Card>
   );
diff --git a/desktop/src/pages/Executable/types/ExecutableRequestDetails.tsx b/desktop/src/pages/Executable/types/ExecutableRequestDetails.tsx
index 5b2526be..125dac86 100644
--- a/desktop/src/pages/Executable/types/ExecutableRequestDetails.tsx
+++ b/desktop/src/pages/Executable/types/ExecutableRequestDetails.tsx
@@ -1,5 +1,5 @@
-import { Badge, Card, Code, Group, Stack, Text, Title } from "@mantine/core";
-import { IconExternalLink } from "@tabler/icons-react";
+import { Badge, Card, Code, Divider, Group, Stack, Table, Text, Title } from "@mantine/core";
+import { IconArrowForwardUpDouble } from "@tabler/icons-react";
 import { useSettings } from "../../../hooks/useSettings";
 import { EnrichedExecutable } from "../../../types/executable";
 import { CodeHighlighter } from "../../../components/CodeHighlighter";
@@ -14,109 +14,124 @@ export function ExecutableRequestDetails({
   const { settings } = useSettings();
 
   return (
-    <Card withBorder>
+    <Card withBorder shadow="sm" padding="md">
       <Stack gap="sm">
-        <Title order={4}>
+        <Group justify="space-between" align="center">
+          <Title order={4}>
+            <Group gap="xs">
+              <IconArrowForwardUpDouble size={16} />
+              Request Configuration
+            </Group>
+          </Title>
           <Group gap="xs">
-            <IconExternalLink size={16} />
-            Request Configuration
-          </Group>
-        </Title>
-        <Stack gap="xs">
-          {executable.request?.method && (
-            <div>
-              <Title order={5}>Method:</Title>
-              <Badge variant="light">{executable.request.method}</Badge>
-            </div>
-          )}
-          {executable.request?.url && (
-            <div>
-              <Title order={5}>URL:</Title>
-              <Text
-                component="a"
-                href={executable.request.url}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {executable.request.url}
-              </Text>
-            </div>
-          )}
-          {executable.request?.timeout && (
-            <div>
-              <Title order={5}>Request Timeout:</Title>
-              <Code>{executable.request.timeout}</Code>
-            </div>
-          )}
-          {executable.request?.logResponse && (
-            <div>
-              <Title order={5}>Log Response:</Title>
-              <Badge variant="light" color="blue">
-                enabled
-              </Badge>
-            </div>
-          )}
-          {executable.request?.body && (
-            <div>
-              <Title order={5}>Body:</Title>
-              <CodeHighlighter theme={settings.theme} copyButton={false}>
-                {executable.request.body}
-              </CodeHighlighter>
-            </div>
-          )}
-          {executable.request?.headers &&
-            Object.keys(executable.request.headers).length > 0 && (
-              <div>
-                <Title order={5}>Headers:</Title>
-                <Stack gap="xs">
-                  {Object.entries(executable.request.headers).map(
-                    ([key, value]) => (
-                      <div key={key}>
-                        <Text size="sm" fw={500}>
-                          {key}:
-                        </Text>
-                        <Code>{value}</Code>
-                      </div>
-                    ),
-                  )}
-                </Stack>
-              </div>
+            {executable.request?.method && (
+              <Badge variant="light" color={methodColor(executable.request.method)}>{executable.request.method}</Badge>
             )}
-          {executable.request?.validStatusCodes &&
-            executable.request.validStatusCodes.length > 0 && (
-              <div>
-                <Title order={5}>Accepted Status Codes:</Title>
-                <Group gap="xs">
-                  {executable.request.validStatusCodes.map((code) => (
-                    <Badge key={code} variant="light">
-                      {code}
-                    </Badge>
-                  ))}
-                </Group>
-              </div>
+            {executable.request?.timeout && (
+              <Badge variant="light" color="gray.5">timeout: {executable.request?.timeout}</Badge>
             )}
-          {executable.request?.responseFile && (
-            <div>
-              <Title order={5}>Response Saved To:</Title>
-              <Code>{executable.request.responseFile.filename}</Code>
+            <Badge variant="light" color={executable.request?.logResponse ? "blue.5" : "gray.5"}>
+              log response: {executable.request?.logResponse ? "on" : "off"}
+            </Badge>
+          </Group>
+        </Group>
+
+        {executable.request?.url && (
+          <>
+            <Divider label="Target" labelPosition="left" my="xs" />
+            <Text
+              component="a"
+              href={executable.request.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {executable.request.url}
+            </Text>
+          </>
+        )}
+
+        {executable.request?.headers && Object.keys(executable.request.headers).length > 0 && (
+          <>
+            <Divider label="Headers" labelPosition="left" my="xs" />
+            <Table variant="vertical" withTableBorder layout="fixed">
+              <Table.Tbody>
+                {Object.entries(executable.request.headers).map(([key, value]) => (
+                  <Table.Tr key={key}>
+                    <Table.Th w="30%">{key}</Table.Th>
+                    <Table.Td>
+                      <Code>{String(value)}</Code>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </>
+        )}
+
+        {executable.request?.validStatusCodes && executable.request.validStatusCodes.length > 0 && (
+          <>
+            <Divider label="Accepted status codes" labelPosition="left" my="xs" />
+            <Group gap="xs">
+              {executable.request.validStatusCodes.map((code) => (
+                <Badge key={code} variant="light">{code}</Badge>
+              ))}
+            </Group>
+          </>
+        )}
+
+        {executable.request?.body && (
+          <>
+            <Divider label="Body" labelPosition="left" my="xs" />
+            <CodeHighlighter theme={settings.theme} copyButton={false}>
+              {executable.request.body}
+            </CodeHighlighter>
+          </>
+        )}
+
+        {executable.request?.transformResponse && (
+          <>
+            <Divider label="Transform response" labelPosition="left" my="xs" />
+            <CodeHighlighter theme={settings.theme} copyButton={false}>
+              {executable.request.transformResponse}
+            </CodeHighlighter>
+          </>
+        )}
+
+        {executable.request?.responseFile && (
+          <>
+            <Divider label="Response file" labelPosition="left" my="xs" />
+            <Group gap="md">
+              <Stack gap={2}>
+                <Text size="sm" c="dimmed">Filename</Text>
+                <Code>{executable.request.responseFile.filename}</Code>
+              </Stack>
               {executable.request.responseFile.saveAs && (
-                <div>
-                  <Title order={6}>Response Saved As:</Title>
+                <Stack gap={2}>
+                  <Text size="sm" c="dimmed">Save as</Text>
                   <Code>{executable.request.responseFile.saveAs}</Code>
-                </div>
+                </Stack>
               )}
-            </div>
-          )}
-          {executable.request?.transformResponse && (
-            <div>
-              <Title order={5}>Transformation Expression:</Title>
-              <CodeHighlighter theme={settings.theme} copyButton={false}>
-                {executable.request.transformResponse}
-              </CodeHighlighter>
-            </div>
-          )}
-        </Stack>
+            </Group>
+          </>
+        )}
       </Stack>
     </Card>
   );
 }
+
+const methodColor = (method?: string) => {
+  switch ((method || "").toUpperCase()) {
+    case "GET":
+      return "green.5";
+    case "POST":
+      return "blue.5";
+    case "PUT":
+      return "orange.5";
+    case "PATCH":
+      return "yellow.5";
+    case "DELETE":
+      return "red.5";
+    default:
+      return "gray.5";
+  }
+};
diff --git a/desktop/src/pages/Executable/types/ExecutableSerialDetails.tsx b/desktop/src/pages/Executable/types/ExecutableSerialDetails.tsx
index 8504cc34..e35d047d 100644
--- a/desktop/src/pages/Executable/types/ExecutableSerialDetails.tsx
+++ b/desktop/src/pages/Executable/types/ExecutableSerialDetails.tsx
@@ -1,8 +1,9 @@
-import { Badge, Card, Group, Stack, Text, Title } from "@mantine/core";
-import { IconTerminal } from "@tabler/icons-react";
+import { Anchor, Badge, Card, Divider, Group, Stack, Text, Timeline, Title } from "@mantine/core";
+import { IconArrowRight } from "@tabler/icons-react";
 import { useSettings } from "../../../hooks/useSettings";
 import { EnrichedExecutable } from "../../../types/executable";
 import { CodeHighlighter } from "../../../components/CodeHighlighter";
+import { Link } from "wouter";
 
 export type ExecutableSerialDetailsProps = {
   executable: EnrichedExecutable;
@@ -13,78 +14,90 @@ export function ExecutableSerialDetails({
 }: ExecutableSerialDetailsProps) {
   const { settings } = useSettings();
 
+  const execs = executable.serial?.execs || [];
+
   return (
-    <Card withBorder>
+    <Card withBorder shadow="sm" padding="md">
       <Stack gap="sm">
-        <Title order={4}>
+        <Group justify="space-between">
+          <Title order={4}>
+            <Group gap="xs">
+              <IconArrowRight size={16} />
+              Serial Configuration
+            </Group>
+          </Title>
           <Group gap="xs">
-            <IconTerminal size={16} />
-            Serial Configuration
-          </Group>
-        </Title>
-        <Stack gap="xs">
-          {executable.serial?.failFast !== undefined && (
-            <div>
-              <Title order={5}>Fail Fast:</Title>
-              <Badge
-                variant="light"
-                color={executable.serial.failFast ? "red" : "green"}
-              >
-                {executable.serial.failFast ? "enabled" : "disabled"}
+            {executable.serial?.failFast && (
+              <Badge variant="light" color={executable.serial?.failFast ? "red.5" : "green.5"}>
+                Fail fast: {executable.serial?.failFast ? "on" : "off"}
               </Badge>
-            </div>
-          )}
-          {executable.serial?.execs && executable.serial.execs.length > 0 && (
-            <div>
-              <Title order={5}>Executables:</Title>
-              <Stack gap="md">
-                {executable.serial.execs.map((exec, index) => (
-                  <div key={index}>
-                    <Text fw={500}>
-                      {index + 1}. {exec.ref ? `ref: ${exec.ref}` : "cmd:"}
-                    </Text>
+            )}
+            {execs.length > 0 && (
+              <Badge variant="light" color="gray.5">Execs: {execs.length}</Badge>
+            )}
+          </Group>
+        </Group>
+
+        {execs.length > 0 ? (
+          <>
+            <Divider label="Execution order" labelPosition="left" my="xs" />
+            <Timeline active={execs.length} bulletSize={20} lineWidth={2}>
+              {execs.map((exec, index) => (
+                <Timeline.Item
+                  key={index}
+                  title={
+                    <Group gap={6} align="center">
+                      <Text fw={600}>#{index + 1}</Text>
+                      {exec.ref ? (
+                        <>
+                          <Text>ref: </Text>
+                          <Anchor component={Link} to={`/executable/${encodeURIComponent(exec.ref)}`}>
+                            {exec.ref}
+                          </Anchor>
+                        </>
+                      ) : (
+                        <Text>cmd</Text>
+                      )}
+                    </Group>
+                  }
+                >
+                  <Stack gap={6}>
+                    <Group gap={6}>
+                      {exec.retries !== undefined && exec.retries > 0 && (
+                        <Badge size="sm" variant="dot" color="orange">retries: {exec.retries}</Badge>
+                      )}
+                      {exec.reviewRequired && (
+                        <Badge size="sm" variant="light" color="violet">review required</Badge>
+                      )}
+                      {exec.args && exec.args.length > 0 && (
+                        <Badge size="sm" variant="light" color="gray">args: {exec.args.length}</Badge>
+                      )}
+                    </Group>
+
                     {exec.cmd && (
-                      <CodeHighlighter
-                        theme={settings.theme}
-                        copyButton={false}
-                      >
+                      <CodeHighlighter theme={settings.theme} copyButton={false}>
                         {exec.cmd}
                       </CodeHighlighter>
                     )}
-                    {exec.retries !== undefined && exec.retries > 0 && (
-                      <div>
-                        <Text size="sm" c="dimmed">
-                          • Retries: {exec.retries}
-                        </Text>
-                      </div>
-                    )}
-                    {exec.reviewRequired && (
-                      <div>
-                        <Text size="sm" c="dimmed">
-                          • Review Required: {exec.reviewRequired.toString()}
-                        </Text>
-                      </div>
-                    )}
+
                     {exec.args && exec.args.length > 0 && (
-                      <div>
-                        <Text size="sm" c="dimmed">
-                          • Arguments:
-                        </Text>
-                        <Stack gap="xs" ml="md">
+                      <Stack gap={2}>
+                        <Text size="sm" c="dimmed">Arguments</Text>
+                        <Stack gap={2} ml="sm">
                           {exec.args.map((arg, argIndex) => (
-                            <Text key={argIndex} size="sm" c="dimmed">
-                              - {arg}
-                            </Text>
+                            <Text key={argIndex} size="sm" c="dimmed">- {arg}</Text>
                           ))}
                         </Stack>
-                      </div>
+                      </Stack>
                     )}
-                  </div>
-                ))}
-              </Stack>
-            </div>
-          )}
-        </Stack>
+                  </Stack>
+                </Timeline.Item>
+              ))}
+            </Timeline>
+          </>
+        ) : (
+          <Text c="dimmed" size="sm">No executables defined.</Text>
+        )}
       </Stack>
     </Card>
   );
diff --git a/desktop/src/pages/Executables/Executables.module.css b/desktop/src/pages/Executables/Executables.module.css
new file mode 100644
index 00000000..31143130
--- /dev/null
+++ b/desktop/src/pages/Executables/Executables.module.css
@@ -0,0 +1,50 @@
+.tableContainer {
+  position: relative;
+  overflow: hidden;
+}
+
+.tableContainer tr {
+    padding-top: var(--mantine-spacing-sm);
+    padding-bottom: var(--mantine-spacing-sm);
+}
+
+.cell {
+    vertical-align: top;
+}
+
+.iconCell {
+    width: 20px;
+}
+
+.tag {
+  font-size: var(--mantine-font-size-xs);
+}
+
+.verbIcon {
+    padding-top: 4px;
+    color: var(--mantine-color-emphasis-0);
+}
+
+.executableRef {
+    font-size: var(--mantine-font-size-sm) !important;
+    font-weight: 600 !important;
+    font-family: var(--mantine-font-family-monospace);
+    color: var(--mantine-color-tertiary-0) !important;
+    cursor: pointer;
+}
+
+.filterTitle{
+    font-weight: 600 !important;
+    color: var(--mantine-color-primary-0) !important;
+}
+
+.filterLabel {
+    font-weight: 600 !important;
+    color: var(--mantine-color-tertiary-0) !important;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--mantine-color-dimmed);
+}
diff --git a/desktop/src/pages/Executables/Executables.tsx b/desktop/src/pages/Executables/Executables.tsx
new file mode 100644
index 00000000..0846bacf
--- /dev/null
+++ b/desktop/src/pages/Executables/Executables.tsx
@@ -0,0 +1,121 @@
+import {
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Group,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { Hero } from "../../components/Hero";
+import { PageWrapper } from "../../components/PageWrapper";
+import { useLocation } from "wouter";
+import { useExecutablesPage } from "./useExecutablesPage";
+import { ExecutablesTable, ViewMode } from "./ExecutablesTable";
+import { FilterButton, FilterDrawer } from "./Filters";
+import classes from "./Executables.module.css";
+import { useState } from "react";
+import { IconArticle, IconList, IconRefresh } from "@tabler/icons-react";
+
+export function Executables() {
+  const {
+    executables,
+    isLoading,
+    error,
+    filterState,
+    onFilterChange,
+    onClearAll,
+    activeFilterCount,
+    workspaceOptions,
+    namespaceOptions,
+    tagOptions,
+    verbOptions,
+    refresh,
+  } = useExecutablesPage();
+
+  if (error) {
+    console.log(error);
+  }
+
+  const [opened, { open, close }] = useDisclosure(false);
+  const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Card);
+  const [, setLocation] = useLocation();
+
+  const handleRowClick = (ref: string) =>
+    setLocation(`/executable/${encodeURIComponent(ref)}`);
+
+  return (
+    <PageWrapper>
+      <Hero variant="split" pattern="subtle">
+        <Hero.Header>
+          <Title order={2}>Executables</Title>
+          <Text c="dimmed">
+            Discover and run your development workflows
+          </Text>
+        </Hero.Header>
+        <Hero.Actions>
+          <Badge size="sm" c="dimmed" color="tertiary" variant="dot">
+            {isLoading ? "Loading..." : `${executables.length} total`}
+          </Badge>
+          <Button size="compact-xs" color="tertiary" leftSection={<IconRefresh size={16} />} onClick={refresh}>
+            Scan Workspaces
+          </Button>
+        </Hero.Actions>
+      </Hero>
+
+      <Group mt="md" gap="sm">
+        <Box>
+          <Button.Group>
+            <Button
+              size="xs"
+              variant={viewMode === ViewMode.Card ? "filled" : "light"}
+              onClick={() => setViewMode(ViewMode.Card)}
+            >
+              <IconArticle size={16} />
+            </Button>
+            <Button
+              size="xs"
+              variant={viewMode === ViewMode.List ? "filled" : "light"}
+              onClick={() => setViewMode(ViewMode.List)}
+            >
+              <IconList size={16} />
+            </Button>
+          </Button.Group>
+        </Box>
+        <Box>
+          <FilterButton activeCount={activeFilterCount} onClick={open} />
+        </Box>
+      </Group>
+
+      {error && (
+        <Alert title="Error" variant="light" color="red.5">
+          Encountered and error while loading executables:
+          {error.name}
+        </Alert>
+      )}
+
+      <Box mt="lg" className={classes.tableContainer}>
+        <ExecutablesTable
+          items={isLoading ? [] : executables}
+          loading={isLoading}
+          hasActiveFilters={activeFilterCount > 0}
+          onRowClick={handleRowClick}
+          viewMode={viewMode}
+        />
+      </Box>
+
+      <FilterDrawer
+        opened={opened}
+        onClose={close}
+        filterState={filterState}
+        onFilterChange={onFilterChange}
+        onClearAll={onClearAll}
+        workspaceOptions={workspaceOptions}
+        namespaceOptions={namespaceOptions}
+        tagOptions={tagOptions}
+        verbOptions={verbOptions}
+      />
+    </PageWrapper>
+  );
+}
diff --git a/desktop/src/pages/Executables/ExecutablesTable.tsx b/desktop/src/pages/Executables/ExecutablesTable.tsx
new file mode 100644
index 00000000..8803fbfe
--- /dev/null
+++ b/desktop/src/pages/Executables/ExecutablesTable.tsx
@@ -0,0 +1,204 @@
+import { ActionIcon, Group, Menu, Badge, Table, Text, Stack } from "@mantine/core";
+import {
+  IconDotsVertical,
+  IconExternalLink,
+  IconFile,
+  IconPlayerPlayFilled,
+  IconOctagon,
+  IconSettingsAutomation,
+  IconProgressX,
+  IconProgressDown,
+  IconRefresh,
+  IconCircleCheckFilled,
+  IconWindowMaximize,
+  IconCirclePlus,
+  IconReload,
+  IconBlocks,
+  IconStar,
+} from "@tabler/icons-react";
+import clsx from "clsx";
+import type { EnrichedExecutable } from "../../types/executable";
+import { GetUIVerbType, DeactivationVerbType, ConfigurationVerbType, DestructionVerbType, RetrievalVerbType, UpdateVerbType, ValidationVerbType, LaunchVerbType, CreationVerbType, RestartVerbType, BuildVerbType } from "../../types/executable";
+import { stringToColor } from "../../utils/colors";
+import { openPath } from "@tauri-apps/plugin-opener";
+import { useNotifier } from "../../hooks/useNotifier";
+import { NotificationType } from "../../types/notification";
+import { shortenCleanDescription } from "../../utils/text";
+import classes from "./Executables.module.css";
+
+export enum ViewMode {
+  List = "list",
+  Card = "card",
+}
+
+function IconForVerbType(verbType: string | null) {
+  switch (verbType) {
+    case DeactivationVerbType:
+      return <IconOctagon size={18} className={classes.verbIcon} />;
+    case ConfigurationVerbType:
+      return <IconSettingsAutomation size={18} className={classes.verbIcon} />;
+    case DestructionVerbType:
+      return <IconProgressX size={18} className={classes.verbIcon} />;
+    case RetrievalVerbType:
+      return <IconProgressDown size={18} className={classes.verbIcon} />;
+    case UpdateVerbType:
+      return <IconRefresh size={18} className={classes.verbIcon} />;
+    case ValidationVerbType:
+      return <IconCircleCheckFilled size={18} className={classes.verbIcon} />;
+    case LaunchVerbType:
+      return <IconWindowMaximize size={18} className={classes.verbIcon} />;
+    case CreationVerbType:
+      return <IconCirclePlus size={18} className={classes.verbIcon} />;
+    case RestartVerbType:
+      return <IconReload size={18} className={classes.verbIcon} />;
+    case BuildVerbType:
+      return <IconBlocks size={18} className={classes.verbIcon} />;
+    default:
+      return <IconPlayerPlayFilled size={18} className={classes.verbIcon} />;
+  }
+}
+
+export function ExecutablesTable({
+  items,
+  loading,
+  hasActiveFilters,
+  onRowClick,
+  viewMode,
+ }: {
+  items: EnrichedExecutable[];
+  loading: boolean;
+  hasActiveFilters: boolean;
+  onRowClick: (ref: string) => void;
+  viewMode: ViewMode;
+}) {
+  const { setNotification } = useNotifier();
+
+  const rows = items.map((exec) => (
+    <Table.Tr
+      key={exec.ref}
+      onClick={() => onRowClick(exec.ref)}
+      style={{ cursor: 'pointer' }}
+      className={classes.tableRow}
+    >
+      <Table.Td className={clsx(classes.cell, classes.iconCell)}>
+        {IconForVerbType(GetUIVerbType(exec))}
+      </Table.Td>
+      <Table.Td className={classes.cell}>
+        <Stack gap="sm">
+          <Group justify="space-between" align="flex-start">
+            <Text className={classes.executableRef}>
+              {exec.ref}
+            </Text>
+
+            <Menu shadow="md" width={200} position="bottom-end">
+              <Menu.Target>
+                <ActionIcon
+                  variant="subtle"
+                  size="sm"
+                  aria-label="Executable actions"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <IconDotsVertical size={16} />
+                </ActionIcon>
+              </Menu.Target>
+              <Menu.Dropdown onClick={(e) => e.stopPropagation()}>
+                <Menu.Item leftSection={<IconExternalLink size={14} />} onClick={() => onRowClick(exec.ref)}>
+                  Open details
+                </Menu.Item>
+                <Menu.Item leftSection={<IconFile size={14} />} onClick={async () => {
+                  try {
+                    await openPath(exec.flowfile);
+                  } catch (error) {
+                    setNotification({ type: NotificationType.Error, title: "Failed to open flowfile", message: String(error) });
+                  }
+                }}>
+                  Open flowfile
+                </Menu.Item>
+                <Menu.Divider />
+                <Menu.Item leftSection={<IconStar size={14} />} onClick={() => {
+                  setNotification({ type: NotificationType.Success, title: "Favorited", message: `${exec.ref} saved as favorite` });
+                }}>
+                  Save as favorite
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+          </Group>
+
+          {viewMode === ViewMode.Card && exec.fullDescription && (
+            <Text size="sm" c="dimmed" style={{ lineHeight: 1.4 }}>
+              {shortenCleanDescription(exec.fullDescription, 180)}
+            </Text>
+          )}
+
+          {viewMode === ViewMode.Card && (
+            <Group gap={6} h="lg">
+              <Badge
+                size="xs"
+                variant="light"
+                color={getExecutableTypeColor(exec)}
+                className={classes.tag}
+              >
+                {getExecutableTypeLabel(exec)}
+              </Badge>
+              {exec.tags && exec.tags.length > 0 && exec.tags.map((tag, i) => (
+                <Badge
+                  key={i}
+                  size="xs"
+                  variant="outline"
+                  color={stringToColor(tag)}
+                  className={classes.tag}
+                >
+                  {tag}
+                </Badge>
+              ))}
+            </Group>
+          )}
+        </Stack>
+      </Table.Td>
+    </Table.Tr>
+  ));
+
+  return (
+    <Table className={classes.table} highlightOnHover>
+      <Table.Tbody>
+        {rows.length > 0 ? (
+          rows
+        ) : (
+          <Table.Tr>
+            <Table.Td>
+              <Group justify="center" gap="sm" className={classes.emptyState}>
+                <Text c="dimmed" size="sm">
+                  {loading
+                    ? "Loading executables..."
+                    : hasActiveFilters
+                      ? "No executables match your filters"
+                      : "No executables found"}
+                </Text>
+              </Group>
+            </Table.Td>
+          </Table.Tr>
+        )}
+      </Table.Tbody>
+    </Table>
+  );
+}
+
+function getExecutableTypeColor(exec: EnrichedExecutable): string {
+  if (exec.exec) return 'blue.5';
+  if (exec.serial) return 'green.5';
+  if (exec.parallel) return 'orange.5';
+  if (exec.launch) return 'purple.5';
+  if (exec.request) return 'teal.5';
+  if (exec.render) return 'pink.5';
+  return 'gray.5';
+}
+
+function getExecutableTypeLabel(exec: EnrichedExecutable): string {
+  if (exec.exec) return 'Command';
+  if (exec.serial) return 'Serial Workflow';
+  if (exec.parallel) return 'Parallel Workflow';
+  if (exec.launch) return 'Launch';
+  if (exec.request) return 'HTTP Request';
+  if (exec.render) return 'Template';
+  return 'Unknown';
+}
\ No newline at end of file
diff --git a/desktop/src/pages/Executables/Filters.tsx b/desktop/src/pages/Executables/Filters.tsx
new file mode 100644
index 00000000..b5a9b9f3
--- /dev/null
+++ b/desktop/src/pages/Executables/Filters.tsx
@@ -0,0 +1,192 @@
+import {
+  Badge,
+  Box,
+  Button,
+  Drawer,
+  Group,
+  MultiSelect,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import {
+  IconAbc,
+  IconBraces,
+  IconCategory,
+  IconEye,
+  IconFilter,
+  IconFolder,
+  IconSearch,
+  IconTags,
+} from "@tabler/icons-react";
+import classes from "./Executables.module.css";
+import { CommonVisibility } from "../../types/generated/flowfile.ts";
+
+export interface FilterState {
+  workspace: string;
+  tags: string[];
+  namespace: string;
+  verb: string;
+  search: string;
+  type: string;
+  visibility: CommonVisibility | '';
+}
+
+export interface WorkspaceOption {
+  label: string;
+  value: string;
+}
+
+export interface FilterDrawerProps {
+  opened: boolean;
+  onClose: () => void;
+  filterState: FilterState;
+  onFilterChange: (updates: Partial<FilterState>) => void;
+  onClearAll: () => void;
+  // Options for dropdowns
+  workspaceOptions: WorkspaceOption[];
+  namespaceOptions: string[];
+  tagOptions: string[];
+  verbOptions: string[];
+}
+
+export function FilterButton({
+ activeCount,
+ onClick
+}: {
+  activeCount: number;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      size="xs"
+      variant={activeCount > 0 ? "filled" : "light"}
+      leftSection={<IconFilter size={16} />}
+      rightSection={activeCount > 0 ? (
+        <Badge size="xs" color="var(--mantine-color-info-0)" variant="white">
+          {activeCount}
+        </Badge>
+      ) : undefined}
+      onClick={onClick}
+    >
+      Filters
+    </Button>
+  );
+}
+
+export function FilterDrawer({
+ opened,
+ onClose,
+ filterState,
+ onFilterChange,
+ onClearAll,
+ workspaceOptions,
+ namespaceOptions,
+ tagOptions,
+ verbOptions,
+}: FilterDrawerProps) {
+  const handleFilterChange = (field: keyof FilterState) => (value: any) => {
+    onFilterChange({ [field]: value });
+  };
+
+  return (
+    <Drawer
+      opened={opened}
+      onClose={onClose}
+      position="right"
+      title="Filter Executables"
+      size="sm"
+      classNames={{title: classes.filterTitle}}
+    >
+      <Stack justify="space-between" gap="xl">
+        <Box>
+          <Stack mt="sm" gap="xs">
+            <TextInput
+              size="xs"
+              placeholder="Search"
+              leftSection={<IconSearch size={16} />}
+              value={filterState.search}
+              onChange={(e) => handleFilterChange('search')(e.currentTarget.value)}
+            />
+            <MultiSelect
+              size="xs"
+              placeholder="Tags"
+              leftSection={<IconTags size={16} />}
+              data={tagOptions}
+              value={filterState.tags}
+              onChange={handleFilterChange('tags')}
+              clearable
+              searchable
+            />
+          </Stack>
+
+          <Stack mt="xl" gap="xs">
+            <Text size='xs' className={classes.filterLabel}>Scope</Text>
+            <Select
+              size="xs"
+              placeholder="Workspace"
+              leftSection={<IconFolder size={16} />}
+              data={workspaceOptions}
+              value={filterState.workspace}
+              onChange={handleFilterChange('workspace')}
+              clearable
+              searchable
+            />
+            <Select
+              size="xs"
+              placeholder="Namespace"
+              leftSection={<IconCategory size={16} />}
+              data={namespaceOptions}
+              value={filterState.namespace}
+              onChange={handleFilterChange('namespace')}
+              clearable
+              searchable
+            />
+          </Stack>
+
+          <Stack mt="xl" gap="xs">
+            <Text size='xs' className={classes.filterLabel}>Properties</Text>
+            <Select
+              size="xs"
+              placeholder="Verb"
+              leftSection={<IconAbc size={16} />}
+              data={verbOptions}
+              value={filterState.verb}
+              onChange={handleFilterChange('verb')}
+              clearable
+              searchable
+            />
+            <Select
+              size="xs"
+              placeholder="Type"
+              leftSection={<IconBraces size={16} />}
+              data={["command", "launch", "render", "request",  "serial", "parallel"]}
+              value={filterState.type}
+              onChange={handleFilterChange('type')}
+              clearable
+            />
+            <Select
+              size="xs"
+              placeholder="Visibility"
+              leftSection={<IconEye size={16} />}
+              data={["public", "private", "internal"]}
+              value={filterState.visibility}
+              onChange={handleFilterChange('visibility')}
+              clearable
+            />
+          </Stack>
+        </Box>
+
+        <Group mt="xl" gap="sm" justify="flex-end">
+          <Button size="xs" variant="light" onClick={onClearAll}>
+            Clear all
+          </Button>
+          <Button size="xs" onClick={onClose}>
+            Close
+          </Button>
+        </Group>
+      </Stack>
+    </Drawer>
+  );
+}
\ No newline at end of file
diff --git a/desktop/src/pages/Executables/useExecutablesPage.ts b/desktop/src/pages/Executables/useExecutablesPage.ts
new file mode 100644
index 00000000..b3fbe35d
--- /dev/null
+++ b/desktop/src/pages/Executables/useExecutablesPage.ts
@@ -0,0 +1,190 @@
+import { useCallback, useMemo, useState } from "react";
+import { useDebouncedValue } from "@mantine/hooks";
+import type { EnrichedExecutable } from "../../types/executable";
+import { FilterState, WorkspaceOption } from "./Filters.tsx";
+import { useExecutables } from "../../hooks/useExecutable.ts";
+import { useAppContext } from "../../hooks/useAppContext.tsx";
+
+const ROOT_NAMESPACE_LABEL = 'Root namespace';
+
+export function useExecutablesPage() {
+  const { workspaces, selectedWorkspace } = useAppContext();
+  const [filterState, setFilterState] = useState<FilterState>({
+    search: '',
+    tags: [],
+    workspace: selectedWorkspace || '',
+    namespace: '',
+    verb: '',
+    visibility: '',
+    type: '',
+  });
+
+  const [debouncedSearch] = useDebouncedValue(filterState.search, 300);
+
+  const cliFilters = useMemo(() => ({
+    workspace: filterState.workspace || null,
+    namespace: filterState.namespace === ROOT_NAMESPACE_LABEL ? '' : filterState.namespace || null,
+    tag: filterState.tags || null,
+    verb: filterState.verb || null,
+  }), [filterState.workspace, filterState.namespace, filterState.tags, filterState.verb]);
+
+  const {
+    executables,
+    isExecutablesLoading: isLoading,
+    executablesError: error,
+    refreshExecutables,
+  } = useExecutables(
+    cliFilters.workspace,
+    cliFilters.namespace,
+    cliFilters.tag,
+    cliFilters.verb,
+    // For now, don't pass search to CLI - do it client-side for responsiveness
+    null,
+  );
+
+  const filteredExecutables = useMemo(() => {
+    let filtered = executables;
+
+    const searchTerm = debouncedSearch.trim().toLowerCase();
+    if (searchTerm) {
+      filtered = filtered.filter((executable : EnrichedExecutable) =>
+        executable.ref.toLowerCase().includes(searchTerm) ||
+        executable.fullDescription?.toLowerCase().includes(searchTerm)
+      );
+    }
+
+    if (filterState.visibility) {
+      filtered = filtered.filter((e) : boolean => {
+        let v = e.visibility;
+        if (!v) {
+          v = 'private'; // default
+        }
+        return v === filterState.visibility
+      });
+    }
+
+    if (filterState.type) {
+      const t = filterState.type;
+      filtered = filtered.filter((e) : boolean => {
+        if (t === 'command' && e.exec) return true;
+        if (t === 'serial' && e.serial) return true;
+        if (t === 'parallel' && e.parallel) return true;
+        if (t === 'launch' && e.launch) return true;
+        if (t === 'request' && e.request) return true;
+        if (t === 'render' && e.render) return true;
+        return false;
+      });
+    }
+
+    // TODO: support filtering root namespace on the client side
+    if (filterState.namespace === ROOT_NAMESPACE_LABEL) {
+      filtered = filtered.filter(e => !e.namespace);
+    }
+
+    return filtered.sort((a : EnrichedExecutable, b : EnrichedExecutable) => a.ref.localeCompare(b.ref));
+  }, [executables, debouncedSearch, filterState.namespace, filterState.tags, filterState.visibility, filterState.type]);
+
+  // Filter Dropdown Options
+  const workspaceOptions : WorkspaceOption[] = useMemo(() => {
+    return Array.from(workspaces).map(ws => ({ value: ws.name, label: ws.displayName } as WorkspaceOption));
+  }, [workspaces]);
+
+  const namespaceOptions: string[] = useMemo(() => {
+    let filtered: EnrichedExecutable[] = executables;
+    if (filterState.workspace) {
+      filtered = filtered.filter(e => e.workspace === filterState.workspace);
+    }
+
+    const namespaces = new Set<string>();
+    let hasRootNamespace = false;
+
+    filtered.forEach(e => {
+      if (e.namespace) {
+        namespaces.add(e.namespace);
+      } else {
+        hasRootNamespace = true;
+      }
+    });
+
+    const options = Array.from(namespaces).sort();
+    if (hasRootNamespace) {
+      options.unshift(ROOT_NAMESPACE_LABEL);
+    }
+
+    return options;
+  }, [executables, filterState.workspace]);
+
+  const tagOptions = useMemo(() => {
+    const tags = new Set<string>();
+    executables.forEach(e => e.tags?.forEach(tag => tags.add(tag)));
+    return Array.from(tags).sort();
+  }, [executables, filterState.workspace, filterState.namespace]);
+
+  const verbOptions = useMemo(() => {
+    const verbs = new Set<string>();
+    executables.forEach(executable => {
+      verbs.add(executable.verb);
+      executable.verbAliases?.forEach(alias => verbs.add(alias as string));
+    });
+    return Array.from(verbs).sort();
+  }, [executables]);
+
+  // Handle filter changes
+  const handleFilterChange = useCallback((updates: Partial<FilterState>) => {
+    setFilterState(prev => {
+      const newState = { ...prev, ...updates };
+
+      // Clear dependent filters when parent changes
+      if ('workspace' in updates && updates.workspace !== prev.workspace) {
+        newState.namespace = '';
+      }
+
+      return newState;
+    });
+  }, []);
+
+  const handleClearAll = useCallback(() => {
+    setFilterState({
+      search: '',
+      tags: [],
+      workspace: '',
+      namespace: '',
+      verb: '',
+      visibility: '',
+      type: '',
+    });
+  }, []);
+
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    if (filterState.search) count++;
+    if (filterState.tags.length > 0) count++;
+    if (filterState.workspace) count++;
+    if (filterState.namespace) count++;
+    if (filterState.verb) count++;
+    if (filterState.visibility) count++
+    if (filterState.type) count++;
+    return count;
+  }, [filterState]);
+
+  return {
+    executables: filteredExecutables,
+    isLoading,
+    error,
+
+    // Filter state and handlers
+    filterState,
+    onFilterChange: handleFilterChange,
+    onClearAll: handleClearAll,
+    activeFilterCount,
+
+    // Options for dropdowns
+    workspaceOptions,
+    namespaceOptions,
+    tagOptions,
+    verbOptions,
+
+    // Actions
+    refresh: refreshExecutables,
+  } as const;
+}
\ No newline at end of file
diff --git a/desktop/src/pages/Workspace/Workspace.tsx b/desktop/src/pages/Workspace/Workspace.tsx
index 4a11adcc..c35fb5c4 100644
--- a/desktop/src/pages/Workspace/Workspace.tsx
+++ b/desktop/src/pages/Workspace/Workspace.tsx
@@ -1,4 +1,5 @@
 import {
+  Alert,
   Badge,
   Button,
   Card,
@@ -49,9 +50,9 @@ export function Workspace() {
           overlayProps={{ radius: "sm", blur: 2 }}
         />
       )}
-      {workspaceError && <Text c="red">Error: {workspaceError.message}</Text>}
+      {workspaceError && <Alert variant="light" color="red.5">Error: {workspaceError.message}</Alert>}
       {workspace ? (
-        <>
+        <Stack gap="sm">
           <Hero variant="split" pattern="subtle">
             <Hero.Header>
               <Group gap="xs">
@@ -250,9 +251,9 @@ export function Workspace() {
               </>
             )}
           </Stack>
-        </>
+        </Stack>
       ) : (
-        <Text c="red">Error: Workspace not found</Text>
+        <Alert c="red.5">Error: Workspace not found</Alert>
       )}
     </PageWrapper>
   );
diff --git a/desktop/src/pages/index.ts b/desktop/src/pages/index.ts
index 5ac45b56..90beaa37 100644
--- a/desktop/src/pages/index.ts
+++ b/desktop/src/pages/index.ts
@@ -4,3 +4,4 @@ export { Settings } from "./Settings/Settings";
 export { Welcome } from "./Welcome/Welcome";
 export { Workspace } from "./Workspace/Workspace";
 export { Workspaces } from "./Workspaces/Workspaces"
+export { Executables } from "./Executables/Executables"
diff --git a/desktop/src/types/executable.ts b/desktop/src/types/executable.ts
index f1953dc1..69c64dd8 100644
--- a/desktop/src/types/executable.ts
+++ b/desktop/src/types/executable.ts
@@ -35,7 +35,6 @@ export function GetUIVerbType(executable: Executable): string | null {
       return DeactivationVerbType;
     case "watch":
     case "monitor":
-    case "track":
       return "monitoring";
     case "restart":
     case "reboot":
diff --git a/desktop/src/utils/text.ts b/desktop/src/utils/text.ts
new file mode 100644
index 00000000..864ef2ff
--- /dev/null
+++ b/desktop/src/utils/text.ts
@@ -0,0 +1,27 @@
+import removeMd from "remove-markdown";
+
+/**
+ * Remove markdown and normalize whitespace from a string.
+ */
+export function cleanMarkdown(input: string | null | undefined): string {
+  if (!input) return "";
+  const stripped = removeMd(input, { useImgAltText: false });
+  // Collapse whitespace and trim
+  return stripped.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * Create a short preview from a markdown-capable description.
+ * - Strips markdown
+ * - Normalizes whitespace
+ * - Truncates to `max` characters with ellipsis if needed
+ */
+export function shortenCleanDescription(input: string | null | undefined, max = 140): string {
+  const cleaned = cleanMarkdown(input);
+  if (cleaned.length <= max) return cleaned;
+  // Try to cut at a word boundary before the limit
+  const slice = cleaned.slice(0, max);
+  const lastSpace = slice.lastIndexOf(" ");
+  const base = lastSpace > max * 0.6 ? slice.slice(0, lastSpace) : slice;
+  return base.replace(/[\s.,;:\-]+$/, "") + "…";
+}