diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 5a0decfa7b..9f9326efd1 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -32,7 +32,12 @@ export function displayDaysAgo(dateString: string): string {
 	} else if (isToday(date)) {
 		return `today at ${date.toLocaleTimeString()}`
 	} else {
-		return `${daysAgo(date) + 1} days ago`
+		let dAgo = daysAgo(date)
+		if (dAgo == 0) {
+			return `yday at ${date.toLocaleTimeString()}`
+		} else {
+			return `${dAgo + 1} days ago`
+		}
 	}
 }
 
@@ -41,9 +46,8 @@ export function displayDate(dateString: string | undefined): string {
 	if (date.toString() === 'Invalid Date') {
 		return ''
 	} else {
-		return `${date.getFullYear()}/${
-			date.getMonth() + 1
-		}/${date.getDate()} at ${date.toLocaleTimeString()}`
+		return `${date.getFullYear()}/${date.getMonth() + 1
+			}/${date.getDate()} at ${date.toLocaleTimeString()}`
 	}
 }
 
diff --git a/frontend/src/routes/run/[...run].svelte b/frontend/src/routes/run/[...run].svelte
index 550b8ba2ac..ac0dc1e542 100644
--- a/frontend/src/routes/run/[...run].svelte
+++ b/frontend/src/routes/run/[...run].svelte
@@ -380,14 +380,15 @@
 									>{job.schedule_path}</a
 								></span
 							>
-						{:else}
+						{/if}
+						<div>
 							<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span
 								class="mx-2"
 							>
 								By {job.created_by}
 								{#if job.permissioned_as != `u/${job.created_by}`}but permissioned as {job.permissioned_as}{/if}
 							</span>
-						{/if}
+						</div>
 					</div>
 					<div class="text-gray-700 text-2xs pt-2">
 						run id: <a href={`/run/${job.id}`}>{job.id}</a>
diff --git a/frontend/src/routes/runs/[...path].svelte b/frontend/src/routes/runs/[...path].svelte
index 17d940a0b0..df7ae9d547 100644
--- a/frontend/src/routes/runs/[...path].svelte
+++ b/frontend/src/routes/runs/[...path].svelte
@@ -15,7 +15,8 @@
 		forLater,
 		setQuery,
 		truncateHash,
-		msToSec
+		msToSec,
+		truncateRev
 	} from '$lib/utils'
 	import Icon from 'svelte-awesome'
 	import { check } from 'svelte-awesome/icons'
@@ -53,8 +54,7 @@
 			: false
 
 	let showOlderJobs = true
-	// The API returns 30 jobs per page. We use it to display a next page button or not.
-	const jobsPerPage = 30
+	const jobsPerPage = 100
 
 	let jobKindsCat: string | undefined = $page.url.searchParams.get('job_kinds') ?? 'runs'
 
@@ -205,8 +205,8 @@ the bearer token they use has less privilege."
 			{#if jobs}
 				{#each jobs as job}
 					<div class="border rounded">
-						<div class="grid grid-cols-2">
-							<div class="flex-col py-2">
+						<div class="flex flex-row">
+							<div class="flex-col py-2 grow">
 								<div class="flex flex-row text-sm">
 									{#if job === undefined}
 										No job found
@@ -259,7 +259,7 @@ the bearer token they use has less privilege."
 											{/if}
 										</div>
 
-										<h3 class="break-all text-center align-middle py-2">
+										<h3 class="break-all  py-2">
 											{#if job.script_path}
 												<a class="pr-3" href="/run/{job.id}">{job.script_path} </a>
 											{:else if 'job_kind' in job && job.job_kind == 'preview'}
@@ -285,90 +285,102 @@ the bearer token they use has less privilege."
 									{/if}
 								</div>
 								<div>
-									<span class="pl-14 italic text-gray-500 text-2xs">Run {job.id}</span>
+									<span
+										class="pl-14 italic text-gray-500 text-2xs  whitespace-nowrap overflow-hidden"
+										>Run {job.id}</span
+									>
 								</div>
 							</div>
-							<div
-								class="px-14 md:pl-40 py-6  text-gray-500 text-xs text-left place-self-start flex flex-col gap-1"
-							>
-								<div>
-									<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
-										class="mx-2"
-									>
-										Created {displayDaysAgo(job.created_at ?? '')}</span
-									>
-								</div>
-								{#if 'started_at' in job && job.started_at}
+							<div class="flex flex-row-reverse py-4 max-w-xs w-xs mr-8 place-self-end">
+								<div
+									class="shrink text-gray-500 text-xs text-left place-self-start flex flex-col gap-1"
+								>
 									<div>
 										<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
 											class="mx-2"
 										>
-											Started {displayDaysAgo(job.started_at ?? '')}</span
+											Created {displayDaysAgo(job.created_at ?? '')}</span
 										>
 									</div>
-								{/if}
-								{#if job && 'duration_ms' in job && job.duration_ms != undefined}
+									{#if 'started_at' in job && job.started_at}
+										<div>
+											<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+												class="mx-2"
+											>
+												Started {displayDaysAgo(job.started_at ?? '')}</span
+											>
+										</div>
+									{/if}
+									{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
+										<div>
+											<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} /><span
+												class="mx-2"
+											>
+												<span class="bg-blue-200 text-gray-700 text-xs rounded px-1 "
+													>Scheduled</span
+												>
+												for {displayDate(job.scheduled_for ?? '')}
+											</span>
+										</div>
+									{:else if 'scheduled_for' in job && !job.running}
+										<div>
+											<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+												class="mx-2"
+											>
+												<span class="bg-blue-200 text-gray-700 text-xs rounded px-1 "
+													>Waiting for an executor</span
+												>
+											</span>
+										</div>
+									{/if}
+								</div>
+								<div class="grow w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4">
 									<div>
-										<Icon
-											class="text-gray-700"
-											data={faHourglassHalf}
-											scale={SMALL_ICON_SCALE}
-										/><span class="mx-2"> Ran in {msToSec(job.duration_ms)}s</span>
-									</div>
-								{/if}
-								<div>
-									{#if job && job.parent_job}
-										{#if job.is_flow_step}
-											<Icon class="text-gray-700" data={faWind} scale={SMALL_ICON_SCALE} /><span
-												class="mx-2"
-											>
-												Step of flow <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
-											>
-										{:else}
-											<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
-												class="mx-2"
-											>
-												Triggered by parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a
-												></span
-											>
-										{/if}
-									{:else if job && job.schedule_path}
-										<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
-										<span class="mx-2"
-											>Triggered by the schedule: <a
-												href={`/schedule/add?edit=${job.schedule_path}&isFlow=${
-													job.job_kind == 'flow'
-												}`}>{job.schedule_path}</a
-											></span
-										>
-									{:else}
 										<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span
 											class="mx-2"
 										>
 											By {job.created_by}</span
 										>
+									</div>
+									{#if job && 'duration_ms' in job && job.duration_ms != undefined}
+										<div>
+											<Icon
+												class="text-gray-700"
+												data={faHourglassHalf}
+												scale={SMALL_ICON_SCALE}
+											/><span class="mx-2"> Ran in {msToSec(job.duration_ms)}s</span>
+										</div>
 									{/if}
-								</div>
-								{#if 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
 									<div>
-										<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} /><span
-											class="mx-2"
-										>
-											<span class="bg-blue-200 text-gray-700 text-xs rounded px-1 ">Scheduled</span>
-											for {displayDate(job.scheduled_for ?? '')}
-										</span>
-									</div>
-								{:else if 'scheduled_for' in job && !job.running}
-									<div>
-										<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
-											class="mx-2"
-										>
-											<span class="bg-blue-200 text-gray-700 text-xs rounded px-1 "
-												>Waiting for an executor</span
+										{#if job && job.parent_job}
+											{#if job.is_flow_step}
+												<Icon class="text-gray-700" data={faWind} scale={SMALL_ICON_SCALE} /><span
+													class="mx-2"
+												>
+													Step of flow <a href={`/run/${job.parent_job}`}
+														>{truncateRev(job.parent_job, 6)}</a
+													></span
+												>
+											{:else}
+												<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
+													class="mx-2"
+												>
+													Triggered by parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a
+													></span
+												>
+											{/if}
+										{:else if job && job.schedule_path}
+											<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+											<span class="mx-2"
+												>Triggered by the schedule: <a
+													href={`/schedule/add?edit=${job.schedule_path}&isFlow=${
+														job.job_kind == 'flow'
+													}`}>{job.schedule_path}</a
+												></span
 											>
-										</span>
+										{/if}
 									</div>
-								{/if}
+								</div>
 							</div>
 						</div>
 					</div>