diff --git a/ui/litellm-dashboard/src/app/(dashboard)/workflows/WorkflowRuns.tsx b/ui/litellm-dashboard/src/app/(dashboard)/workflows/WorkflowRuns.tsx
index 119e61c0222..9afa07251c2 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/workflows/WorkflowRuns.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/workflows/WorkflowRuns.tsx
@@ -67,7 +67,13 @@ const STATUS_DOT: Record<RunStatus, string> = {
 };
 
 const RUN_STATUS_OPTIONS: RunStatus[] = ["pending", "running", "paused", "completed", "failed"];
-const FILTER_ALL = "__all__";
+const STATUS_LABELS: Record<RunStatus, string> = {
+  pending: "Pending",
+  running: "Running",
+  paused: "Paused",
+  completed: "Completed",
+  failed: "Failed",
+};
 
 const EVENT_COLOR: Record<string, { bar: string; border: string; text: string }> = {
   "step.started": { bar: "#f0fdf4", border: "#86efac", text: "#16a34a" },
@@ -562,7 +568,7 @@ const WorkflowRuns: React.FC<WorkflowRunsProps> = ({ accessToken }) => {
         id: "run",
         accessorFn: (row) => `${runTitle(row)} ${row.run_id}`,
         header: "Run",
-        meta: { title: "Run" },
+        meta: { title: "Run", skeleton: "twoLine" },
         cell: ({ row }) => {
           const run = row.original;
           return (
@@ -674,17 +680,18 @@ const WorkflowRuns: React.FC<WorkflowRunsProps> = ({ accessToken }) => {
                 <>
                   <DataTableFilterField label="Status">
                     <Select
-                      value={(get("status") as string) || FILTER_ALL}
-                      onValueChange={(value) => set("status", value === FILTER_ALL ? "" : value)}
+                      items={STATUS_LABELS}
+                      value={(get("status") as string) || null}
+                      onValueChange={(value: string | null) => set("status", value ?? "")}
                     >
                       <SelectTrigger className="w-full">
-                        <SelectValue />
+                        <SelectValue placeholder="All statuses" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value={FILTER_ALL}>All statuses</SelectItem>
+                        <SelectItem value={null}>All statuses</SelectItem>
                         {RUN_STATUS_OPTIONS.map((status) => (
-                          <SelectItem key={status} value={status} className="capitalize">
-                            {status}
+                          <SelectItem key={status} value={status}>
+                            {STATUS_LABELS[status]}
                           </SelectItem>
                         ))}
                       </SelectContent>
diff --git a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.test.tsx b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.test.tsx
index c32dbe10455..ef0d842ad3e 100644
--- a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.test.tsx
+++ b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.test.tsx
@@ -286,6 +286,23 @@ describe("DataTable loading", () => {
     expect(screen.queryAllByTestId("skeleton-row")).toHaveLength(0);
     expect(names()).toEqual(["Charlie", "Alice", "Bob"]);
   });
+
+  it("varies skeleton shape and width per column instead of one fixed bar", () => {
+    const columns: ColumnDef<Person, unknown>[] = [
+      { accessorKey: "name", header: "Name", meta: { skeleton: "twoLine" }, cell: () => null },
+      { accessorKey: "email", header: "Email", cell: () => null },
+    ];
+    render(<DataTable data={CHARLIE_ALICE_BOB} columns={columns} isLoading />);
+
+    const firstRow = screen.getAllByTestId("skeleton-row").at(0);
+    expect(firstRow).toBeDefined();
+    const bars = Array.from(firstRow?.querySelectorAll('[data-slot="skeleton"]') ?? []);
+
+    // twoLine column contributes a main + sub bar (2); the text column contributes 1
+    expect(bars).toHaveLength(3);
+    // per-column widths differ instead of every cell sharing one fixed width
+    expect(new Set(bars.map((bar) => bar.className)).size).toBeGreaterThan(1);
+  });
 });
 
 describe("DataTable column visibility", () => {
diff --git a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx
index dcc341f3c78..758ca5a597b 100644
--- a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx
+++ b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx
@@ -333,26 +333,42 @@ function DefaultEmptyState() {
   );
 }
 
-function SkeletonRows({
+const SKELETON_WIDTHS = ["w-[58%]", "w-[44%]", "w-[70%]", "w-[50%]", "w-[64%]", "w-[48%]"] as const;
+
+function SkeletonCell<TData>({ column, index }: { column: Column<TData, unknown> | undefined; index: number }) {
+  const meta = column?.columnDef.meta;
+  const width = SKELETON_WIDTHS[index % SKELETON_WIDTHS.length];
+  if (meta?.skeleton === "twoLine") {
+    return (
+      <div className="flex flex-col gap-2">
+        <Skeleton className={cn("h-3.5", width)} />
+        <Skeleton className="h-2.5 w-2/5 opacity-65" />
+      </div>
+    );
+  }
+  return <Skeleton className={cn("h-3.5", width, meta?.numeric ? "ml-auto" : "")} />;
+}
+
+function SkeletonRows<TData>({
   rowCount,
-  columnCount,
+  columns,
   size,
   message,
 }: {
   rowCount: number;
-  columnCount: number;
+  columns: readonly Column<TData, unknown>[];
   size: DataTableSize;
   message?: string;
 }) {
   const rowKeys = Array.from({ length: Math.max(rowCount, 1) }, (_, index) => index);
-  const columnKeys = Array.from({ length: Math.max(columnCount, 1) }, (_, index) => index);
+  const cells = columns.length > 0 ? columns : [undefined];
   return (
     <Fragment>
       {rowKeys.map((rowKey) => (
         <TableRow key={`skeleton-${rowKey}`} className="hover:bg-transparent" data-testid="skeleton-row">
-          {columnKeys.map((columnKey) => (
-            <TableCell key={columnKey} className={size === "compact" ? "px-2 py-1" : ""}>
-              <Skeleton className="h-4 w-3/5" />
+          {cells.map((column, columnKey) => (
+            <TableCell key={column?.id ?? columnKey} className={size === "compact" ? "px-2 py-1" : ""}>
+              <SkeletonCell column={column} index={columnKey} />
               {rowKey === 0 && columnKey === 0 && message !== undefined ? (
                 <span className="sr-only">{message}</span>
               ) : null}
@@ -521,7 +537,7 @@ export function DataTable<TData extends RowData, TValue>(props: DataTableProps<T
       return (
         <SkeletonRows
           rowCount={skeletonRowCount}
-          columnCount={visibleColumnCount}
+          columns={table.getVisibleLeafColumns()}
           size={size}
           message={loadingMessage}
         />
diff --git a/ui/litellm-dashboard/src/components/shared/DataTable/columnMeta.ts b/ui/litellm-dashboard/src/components/shared/DataTable/columnMeta.ts
index 46e72226038..0f14c277c6f 100644
--- a/ui/litellm-dashboard/src/components/shared/DataTable/columnMeta.ts
+++ b/ui/litellm-dashboard/src/components/shared/DataTable/columnMeta.ts
@@ -1,6 +1,6 @@
 import type { RowData } from "@tanstack/react-table";
 
-import type { ColumnPinnedSide } from "./types";
+import type { ColumnPinnedSide, DataTableSkeletonShape } from "./types";
 
 declare module "@tanstack/react-table" {
   interface ColumnMeta<TData extends RowData, TValue> {
@@ -9,5 +9,6 @@ declare module "@tanstack/react-table" {
     headerClassName?: string;
     title?: string;
     pinned?: ColumnPinnedSide;
+    skeleton?: DataTableSkeletonShape;
   }
 }
diff --git a/ui/litellm-dashboard/src/components/shared/DataTable/types.ts b/ui/litellm-dashboard/src/components/shared/DataTable/types.ts
index 045cfa895e1..f5130b4c823 100644
--- a/ui/litellm-dashboard/src/components/shared/DataTable/types.ts
+++ b/ui/litellm-dashboard/src/components/shared/DataTable/types.ts
@@ -18,6 +18,7 @@ export type FilterMode = "none" | "client" | "server";
 export type ColumnResizeMode = "onEnd" | "onChange";
 export type DataTableSize = "compact" | "default";
 export type ColumnPinnedSide = "left" | "right";
+export type DataTableSkeletonShape = "text" | "twoLine";
 
 export interface DataTableProps<TData extends RowData, TValue> {
   data: TData[];