diff --git a/web/src/components/repo/RepoItems.vue b/web/src/components/repo/RepoItems.vue
index 81d8ee23f..fa0ce4a65 100644
--- a/web/src/components/repo/RepoItems.vue
+++ b/web/src/components/repo/RepoItems.vue
@@ -3,36 +3,51 @@
     <div
       class="flex flex-col border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200 cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300"
     >
-      <div class="grid grid-cols-[1.5rem,auto,1fr] gap-2 items-center">
-        <PipelineStatusIcon v-if="pipeline" :status="pipeline.status" />
-        <Icon v-else name="new" class="text-wp-text-100" />
-        <span class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</span>
-        <span class="ml-auto">
+      <div class="grid grid-cols-[auto,1fr] gap-y-2 items-center">
+        <div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
+        <div class="ml-auto">
           <Badge
             v-if="repo.visibility === RepoVisibility.Public"
             :label="$t('repo.settings.general.visibility.public.public')"
           />
-        </span>
+        </div>
 
-        <div class="col-start-2 col-span-2 text-wp-text-100">
-          <div v-if="pipeline" class="flex gap-1 items-center">
-            <span :title="pipelineEventTitle">
-              <Icon v-if="pipeline.event === 'pull_request'" name="pull-request" />
-              <Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" />
-              <Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
-              <Icon v-else-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" />
-              <Icon v-else-if="pipeline.event === 'cron'" name="push" />
-              <Icon v-else-if="pipeline.event === 'manual'" name="manual-pipeline" />
-              <Icon v-else name="push" />
-            </span>
+        <div class="col-span-2 text-wp-text-100">
+          <div v-if="pipeline" class="flex gap-x-1 items-center">
+            <PipelineStatusIcon v-if="pipeline" :status="pipeline.status" />
+            <Icon v-else name="new" class="text-wp-text-100" />
             <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ shortMessage }}</span>
-            <span class="ml-auto hidden sm:inline-block flex-shrink-0">{{ since }}</span>
           </div>
 
-          <div v-else class="flex gap-2">
+          <div v-else class="flex gap-x-2">
             <span>{{ $t('repo.pipeline.no_pipelines') }}</span>
           </div>
         </div>
+
+        <div class="col-span-2 text-wp-text-100 text-sm min-h-5 mt-2">
+          <div v-if="pipeline" class="flex gap-x-4 items-center">
+            <div class="flex items-center gap-x-1">
+              <span :title="pipelineEventTitle">
+                <Icon v-if="pipeline.event === 'pull_request'" name="pull-request" size="22" />
+                <Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" size="22" />
+                <Icon v-else-if="pipeline.event === 'deployment'" name="deployment" size="22" />
+                <Icon v-else-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" size="22" />
+                <Icon v-else-if="pipeline.event === 'cron'" name="push" size="22" />
+                <Icon v-else-if="pipeline.event === 'manual'" name="manual-pipeline" size="22" />
+                <Icon v-else name="push" size="22" />
+              </span>
+              <span class="truncate">{{ prettyRef }}</span>
+            </div>
+            <div class="hidden sm:flex gap-x-1 items-center">
+              <Icon name="commit" size="22" />
+              <span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span>
+            </div>
+            <div class="flex flex-shrink-0 gap-x-1 items-center ml-auto">
+              <Icon name="since" size="22" />
+              <span>{{ since }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </router-link>
@@ -54,8 +69,8 @@ const props = defineProps<{
 }>();
 
 const repo = props.repo;
-const pipeline = toRef(repo.last_pipeline);
-const { since, shortMessage } = usePipeline(pipeline);
+const pipeline = toRef(repo.last_pipeline_item);
+const { since, shortMessage, prettyRef } = usePipeline(pipeline);
 
 const { t } = useI18n();
 
diff --git a/web/src/compositions/useRepos.ts b/web/src/compositions/useRepos.ts
index 4f3d505f8..ac754727a 100644
--- a/web/src/compositions/useRepos.ts
+++ b/web/src/compositions/useRepos.ts
@@ -16,8 +16,8 @@ export default function useRepos() {
 
   function sortReposByLastActivity(repos: Repo[]): Repo[] {
     return repos.sort((a, b) => {
-      const aLastActivity = a.last_pipeline?.created || 0;
-      const bLastActivity = b.last_pipeline?.created || 0;
+      const aLastActivity = a.last_pipeline_item?.created || 0;
+      const bLastActivity = b.last_pipeline_item?.created || 0;
 
       return bLastActivity - aLastActivity;
     });
diff --git a/web/src/lib/api/types/repo.ts b/web/src/lib/api/types/repo.ts
index 20e1ba641..cfb323b2b 100644
--- a/web/src/lib/api/types/repo.ts
+++ b/web/src/lib/api/types/repo.ts
@@ -67,7 +67,9 @@ export interface Repo {
 
   visibility: RepoVisibility;
 
-  last_pipeline: Pipeline;
+  last_pipeline: number;
+
+  last_pipeline_item: Pipeline;
 
   require_approval: RepoRequireApproval;
 
diff --git a/web/src/store/repos.ts b/web/src/store/repos.ts
index 467a9105d..f14d9a5b8 100644
--- a/web/src/store/repos.ts
+++ b/web/src/store/repos.ts
@@ -35,7 +35,7 @@ export const useRepoStore = defineStore('repos', () => {
     await Promise.all(
       _ownedRepos.map(async (repo) => {
         const latestPipeline = await apiClient.getPipelineList(repo.id, { page: 1, perPage: 1 });
-        repo.last_pipeline = latestPipeline[0];
+        repo.last_pipeline_item = latestPipeline[0];
         repos.set(repo.id, repo);
       }),
     );