From 8950031d88090680b73ead016724acd0c7ef025f Mon Sep 17 00:00:00 2001
From: Xuan Gu <162244362+xuang7@users.noreply.github.com>
Date: Thu, 25 Jun 2026 00:06:09 -0700
Subject: [PATCH 1/3] update.

---
 .../card-item/card-item.component.html        |  1 +
 .../card-item/card-item.component.ts          | 31 +++++++++++++++-
 .../user-dataset/user-dataset.component.html  | 35 +++++++++++++++++++
 .../user-dataset/user-dataset.component.ts    | 13 +++++++
 4 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html
index 43b965f5bcc..ef7ae349844 100644
--- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html
@@ -40,6 +40,7 @@
     <img
       class="card-preview-image"
       [src]="previewImage"
+      (error)="onCoverError()"
       alt="Workflow Preview" />
   </div>
 
diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts
index ffba9fb9abb..44925da678e 100644
--- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.ts
@@ -105,6 +105,8 @@ export class CardItemComponent implements OnChanges {
   hovering: boolean = false;
   /** The default top image, used when the user has not uploaded a custom one. */
   static readonly DEFAULT_PREVIEW_IMAGE = "assets/card_background.jpg";
+  /** Resolved preview/cover image; stays the placeholder until a dataset cover loads. */
+  coverImageSrc: string = CardItemComponent.DEFAULT_PREVIEW_IMAGE;
 
   @Input()
   get entry(): DashboardEntry {
@@ -136,10 +138,11 @@ export class CardItemComponent implements OnChanges {
 
   /** The top image src for the card preview. */
   get previewImage(): string {
-    return CardItemComponent.DEFAULT_PREVIEW_IMAGE;
+    return this.coverImageSrc;
   }
 
   initializeEntry() {
+    this.coverImageSrc = CardItemComponent.DEFAULT_PREVIEW_IMAGE;
     if (this.entry.type === "workflow") {
       if (typeof this.entry.id === "number") {
         this.disableDelete = !this.entry.workflow.isOwner;
@@ -166,6 +169,7 @@ export class CardItemComponent implements OnChanges {
         }
         this.iconType = "database";
         this.size = this.entry.size;
+        this.loadDatasetCover(this.entry.id);
       }
     } else if (this.entry.type === "file") {
       // not sure where to redirect
@@ -184,6 +188,31 @@ export class CardItemComponent implements OnChanges {
     }
   }
 
+  /** Loads the dataset cover into the preview slot, falling back to the placeholder. */
+  private loadDatasetCover(did: number): void {
+    if (!this.entry.coverImageUrl) {
+      return;
+    }
+    this.datasetService
+      .getDatasetCoverUrl(did)
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        next: ({ url }) => {
+          this.coverImageSrc = url ?? CardItemComponent.DEFAULT_PREVIEW_IMAGE;
+          this.cdr.markForCheck();
+        },
+        error: () => {
+          this.coverImageSrc = CardItemComponent.DEFAULT_PREVIEW_IMAGE;
+          this.cdr.markForCheck();
+        },
+      });
+  }
+
+  /** Falls the preview back to the placeholder if the cover image fails to load. */
+  onCoverError(): void {
+    this.coverImageSrc = CardItemComponent.DEFAULT_PREVIEW_IMAGE;
+  }
+
   onCheckboxChange(entry: DashboardEntry): void {
     entry.checked = !entry.checked;
     this.cdr.markForCheck();
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html
index 08ce28eac60..1c08a580e4a 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html
@@ -32,6 +32,26 @@ <h2 class="page-title">Datasets</h2>
           nzTheme="outline"></i>
         <span>Create Dataset</span>
       </button>
+      <button
+        nz-button
+        title="List View"
+        (click)="setViewType('list')"
+        [nzType]="viewType === 'list' ? 'primary' : 'default'">
+        <i
+          nz-icon
+          nzType="bars"
+          nzTheme="outline"></i>
+      </button>
+      <button
+        nz-button
+        title="Card View"
+        (click)="setViewType('card')"
+        [nzType]="viewType === 'card' ? 'primary' : 'default'">
+        <i
+          nz-icon
+          nzType="appstore"
+          nzTheme="outline"></i>
+      </button>
       <texera-filters #filters></texera-filters>
     </div>
   </nz-card>
@@ -52,9 +72,24 @@ <h2 class="page-title">Datasets</h2>
     </nz-select>
   </div>
 
+  <ng-template
+    #datasetCardTpl
+    let-entry>
+    <texera-card-item
+      [entry]="entry"
+      [currentUid]="currentUid"
+      [isPrivateSearch]="true"
+      [editable]="true"
+      (deleted)="deleteDataset(entry)"
+      (refresh)="search(true)">
+    </texera-card-item>
+  </ng-template>
+
   <texera-search-results
     [editable]="true"
     [isPrivateSearch]="true"
+    [viewMode]="viewType"
+    [cardTemplate]="datasetCardTpl"
     (deleted)="deleteDataset($event)"
     (refresh)="ngAfterViewInit()"
     [currentUid]="currentUid"></texera-search-results>
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts
index 2deedba1048..e2d20e97b1a 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts
@@ -26,6 +26,7 @@ import { DatasetService } from "../../../service/user/dataset/dataset.service";
 import { SortMethod } from "../../../type/sort-method";
 import { DashboardEntry } from "../../../type/dashboard-entry";
 import { SearchResultsComponent } from "../search-results/search-results.component";
+import { CardItemComponent } from "../list-item/card-item/card-item.component";
 import { FiltersComponent } from "../filters/filters.component";
 import { firstValueFrom } from "rxjs";
 import { USER_DATASET } from "../../../../app-routing.constant";
@@ -61,14 +62,18 @@ import { FormsModule } from "@angular/forms";
     NzSelectComponent,
     FormsModule,
     SearchResultsComponent,
+    CardItemComponent,
   ],
 })
 export class UserDatasetComponent implements AfterViewInit {
+  private static readonly VIEW_MODE_STORAGE_KEY = "texera.userDataset.viewMode";
   public sortMethod = SortMethod.EditTimeDesc;
   lastSortMethod: SortMethod | null = null;
   public isLogin = this.userService.isLogin();
   public currentUid = this.userService.getCurrentUser()?.uid;
   public hasMismatch = false; // Display warning when there are mismatched datasets
+  public viewType: "list" | "card" =
+    localStorage.getItem(UserDatasetComponent.VIEW_MODE_STORAGE_KEY) === "card" ? "card" : "list";
 
   private _searchResultsComponent?: SearchResultsComponent;
   @ViewChild(SearchResultsComponent) get searchResultsComponent(): SearchResultsComponent {
@@ -120,6 +125,14 @@ export class UserDatasetComponent implements AfterViewInit {
       .subscribe(() => this.search());
   }
 
+  public setViewType(viewType: "list" | "card"): void {
+    if (this.viewType === viewType) {
+      return;
+    }
+    this.viewType = viewType;
+    localStorage.setItem(UserDatasetComponent.VIEW_MODE_STORAGE_KEY, viewType);
+  }
+
   /*
    * Executes a dataset search with filtering, sorting.
    *

From 2e6ddc1f37cb0b93b4c975d04a1ebdc24030081d Mon Sep 17 00:00:00 2001
From: Xuan Gu <162244362+xuang7@users.noreply.github.com>
Date: Thu, 25 Jun 2026 00:32:36 -0700
Subject: [PATCH 2/3] test(ui): add specs for dataset card view and cover image

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../card-item/card-item.component.spec.ts     | 50 +++++++++++++++++++
 .../user-dataset.component.spec.ts            | 21 ++++++++
 2 files changed, 71 insertions(+)

diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts
index f39f318c34d..eb689596bf0 100644
--- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.spec.ts
@@ -31,6 +31,7 @@ import { commonTestProviders } from "../../../../../common/testing/test-utils";
 import type { Mocked } from "vitest";
 import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry";
 import { HUB_WORKFLOW_RESULT_DETAIL, USER_WORKSPACE } from "../../../../../app-routing.constant";
+import { DatasetService } from "../../../../service/user/dataset/dataset.service";
 
 function makeWorkflowEntry(overrides: Partial<DashboardEntry> = {}): DashboardEntry {
   return {
@@ -48,18 +49,37 @@ function makeWorkflowEntry(overrides: Partial<DashboardEntry> = {}): DashboardEn
   } as unknown as DashboardEntry;
 }
 
+function makeDatasetEntry(overrides: Partial<DashboardEntry> = {}): DashboardEntry {
+  return {
+    id: 5,
+    name: "ds",
+    description: "",
+    type: "dataset",
+    dataset: { isOwner: true },
+    accessibleUserIds: [],
+    likeCount: 0,
+    viewCount: 0,
+    isLiked: false,
+    size: 0,
+    ...overrides,
+  } as unknown as DashboardEntry;
+}
+
 describe("CardItemComponent", () => {
   let component: CardItemComponent;
   let fixture: ComponentFixture<CardItemComponent>;
   let workflowPersistService: Mocked<WorkflowPersistService>;
+  let datasetService: Mocked<DatasetService>;
 
   beforeEach(async () => {
     const workflowPersistServiceSpy = { updateWorkflowName: vi.fn(), updateWorkflowDescription: vi.fn() };
+    const datasetServiceSpy = { getDatasetCoverUrl: vi.fn() };
 
     await TestBed.configureTestingModule({
       imports: [CardItemComponent, HttpClientTestingModule, BrowserAnimationsModule, RouterTestingModule],
       providers: [
         { provide: WorkflowPersistService, useValue: workflowPersistServiceSpy },
+        { provide: DatasetService, useValue: datasetServiceSpy },
         { provide: UserService, useClass: StubUserService },
         NzModalService,
         ...commonTestProviders,
@@ -69,6 +89,7 @@ describe("CardItemComponent", () => {
     fixture = TestBed.createComponent(CardItemComponent);
     component = fixture.componentInstance;
     workflowPersistService = TestBed.inject(WorkflowPersistService) as unknown as Mocked<WorkflowPersistService>;
+    datasetService = TestBed.inject(DatasetService) as unknown as Mocked<DatasetService>;
     component.entry = makeWorkflowEntry();
     fixture.detectChanges();
   });
@@ -157,4 +178,33 @@ describe("CardItemComponent", () => {
     expect((entry as any).checked).toBe(true);
     expect(spy).toHaveBeenCalledTimes(1);
   });
+
+  it("should load the dataset cover into the preview when the entry has a cover", () => {
+    datasetService.getDatasetCoverUrl.mockReturnValue(of({ url: "https://cover.example/img.png" }));
+    component.entry = makeDatasetEntry({ id: 5, coverImageUrl: "cover/path.png" });
+    component.ngOnChanges({ entry: { currentValue: component.entry } as any });
+
+    expect(datasetService.getDatasetCoverUrl).toHaveBeenCalledWith(5);
+    expect(component.previewImage).toBe("https://cover.example/img.png");
+  });
+
+  it("should fall back to the default preview when the cover fetch fails", () => {
+    datasetService.getDatasetCoverUrl.mockReturnValue(throwError(() => new Error("cover fetch failed")));
+    component.entry = makeDatasetEntry({ coverImageUrl: "cover/path.png" });
+    component.ngOnChanges({ entry: { currentValue: component.entry } as any });
+
+    expect(component.previewImage).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
+  });
+
+  it("should reset the preview to the default image on cover load error", () => {
+    component.coverImageSrc = "https://cover.example/img.png";
+    component.onCoverError();
+    expect(component.previewImage).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
+  });
+
+  it("should keep the default preview for non-dataset entries", () => {
+    component.entry = makeWorkflowEntry();
+    component.ngOnChanges({ entry: { currentValue: component.entry } as any });
+    expect(component.previewImage).toBe(CardItemComponent.DEFAULT_PREVIEW_IMAGE);
+  });
 });
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts
index f665b3ea81f..95b2deeca00 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.spec.ts
@@ -309,4 +309,25 @@ describe("UserDatasetComponent", () => {
       expect(searchResultsStub.entries).toEqual([e1, e3]);
     });
   });
+
+  describe("view mode toggle", () => {
+    const VIEW_MODE_KEY = "texera.userDataset.viewMode";
+
+    afterEach(() => localStorage.removeItem(VIEW_MODE_KEY));
+
+    it("setViewType updates viewType, persists it, and is a no-op when unchanged", () => {
+      component.setViewType("card");
+      expect(component.viewType).toBe("card");
+      expect(localStorage.getItem(VIEW_MODE_KEY)).toBe("card");
+
+      // setting the same value should not write again
+      localStorage.removeItem(VIEW_MODE_KEY);
+      component.setViewType("card");
+      expect(localStorage.getItem(VIEW_MODE_KEY)).toBeNull();
+
+      component.setViewType("list");
+      expect(component.viewType).toBe("list");
+      expect(localStorage.getItem(VIEW_MODE_KEY)).toBe("list");
+    });
+  });
 });

From 732c926a694182db2c31a156adf54e9bf6d7bcba Mon Sep 17 00:00:00 2001
From: Xuan Gu <162244362+xuang7@users.noreply.github.com>
Date: Thu, 25 Jun 2026 13:57:17 -0700
Subject: [PATCH 3/3] update.

---
 .../dataset-card-item.component.html          | 101 ---------
 .../dataset-card-item.component.scss          | 198 ------------------
 .../dataset-card-item.component.spec.ts       | 158 --------------
 .../dataset-card-item.component.ts            | 134 ------------
 .../card-item/card-item.component.html        |   2 +-
 .../card-item/card-item.component.scss        |  15 +-
 .../hub-search-result.component.html          |  18 +-
 .../hub-search-result.component.scss          |  24 +--
 .../hub-search-result.component.ts            |   4 +-
 9 files changed, 23 insertions(+), 631 deletions(-)
 delete mode 100644 frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.html
 delete mode 100644 frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.scss
 delete mode 100644 frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.spec.ts
 delete mode 100644 frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.ts

diff --git a/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.html b/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.html
deleted file mode 100644
index 205e3848f32..00000000000
--- a/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements.  See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership.  The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License.  You may obtain a copy of the License at
-
-   http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing,
- software distributed under the License is distributed on an
- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, either express or implied.  See the License for the
- specific language governing permissions and limitations
- under the License.
--->
-
-<nz-card
-  nzHoverable
-  class="dataset-card"
-  [nzCover]="coverTpl"
-  [routerLink]="entryLink">
-  <div class="dataset-card-body-link">
-    <span
-      class="card-title"
-      [title]="entry.name">
-      {{ entry.name }}
-    </span>
-
-    <div class="card-meta">
-      <div class="meta-line meta-line--owner">
-        <span
-          class="meta-owner"
-          [title]="entry.ownerName || entry.ownerEmail || 'Unknown'">
-          <texera-user-avatar
-            class="meta-avatar"
-            [googleAvatar]="entry.ownerGoogleAvatar"
-            userColor="#1E90FF"
-            [userName]="entry.ownerName || entry.ownerEmail || 'Unknown'"
-            [isOwner]="entry.ownerId === currentUid">
-          </texera-user-avatar>
-          <span class="meta-owner-name truncate-single-line">
-            {{ entry.ownerName || entry.ownerEmail || 'Unknown' }}
-          </span>
-        </span>
-        <span
-          class="meta-dot"
-          aria-hidden="true"
-          >·</span
-        >
-        <span class="meta-updated">Created {{ formatRelativeTime(entry.lastModifiedTime) }}</span>
-      </div>
-      <div class="meta-hr"></div>
-      <div class="meta-line meta-line--stats">
-        <div class="meta-stats-left">
-          <span class="meta-stat">
-            <i
-              nz-icon
-              nzType="database"
-              nzTheme="outline"></i>
-            {{ entry.size ? formatSize(entry.size) : '-' }}
-          </span>
-          <span class="meta-stat">
-            <i
-              nz-icon
-              nzType="eye"
-              nzTheme="outline"></i>
-            {{ formatCount(viewCount) }}
-          </span>
-        </div>
-        <button
-          type="button"
-          class="meta-stat meta-stat--like"
-          [class.liked]="isLiked"
-          [class.disabled]="!currentUid"
-          (click)="$event.stopPropagation(); $event.preventDefault(); currentUid && toggleLike()">
-          <i
-            nz-icon
-            nzType="like"
-            [nzTheme]="isLiked ? 'fill' : 'outline'"></i>
-          {{ formatCount(likeCount) }}
-        </button>
-      </div>
-    </div>
-  </div>
-</nz-card>
-
-<ng-template #coverTpl>
-  <div class="cover-container">
-    <img
-      class="cover-image"
-      [src]="coverImageSrc"
-      (error)="onCoverError($event)"
-      loading="lazy"
-      decoding="async"
-      alt="dataset cover" />
-    <span class="cover-id-badge">#{{ entry.id }}</span>
-  </div>
-</ng-template>
diff --git a/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.scss b/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.scss
deleted file mode 100644
index 60f4e159133..00000000000
--- a/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-.dataset-card {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.dataset-card-body-link {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-  color: inherit;
-}
-
-.cover-container {
-  position: relative;
-  height: 124px;
-  background: #f5f5f5;
-  overflow: hidden;
-
-  .cover-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-
-  .cover-id-badge {
-    position: absolute;
-    left: 8px;
-    bottom: 8px;
-    padding: 2px 8px;
-    font-size: 12px;
-    border-radius: 12px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-    background: rgba(15, 14, 12, 0.72);
-    color: white;
-  }
-}
-
-.card-title {
-  display: -webkit-box;
-  height: calc(15px * 1.35 * 2);
-  margin-bottom: 10px;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.35;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  word-break: break-word;
-}
-
-.truncate-single-line {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.card-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  margin-top: auto;
-  padding-top: 4px;
-  min-width: 0;
-
-  .meta-line {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    color: #595959;
-    min-width: 0;
-
-    &--owner {
-      font-size: 13px;
-
-      .meta-owner {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        min-width: 0;
-      }
-
-      .meta-avatar {
-        flex-shrink: 0;
-
-        ::ng-deep nz-avatar.ant-avatar {
-          width: 20px;
-          height: 20px;
-          line-height: 20px;
-          font-size: 10px;
-        }
-        ::ng-deep .owner-badge {
-          font-size: 9px;
-        }
-      }
-
-      .meta-dot {
-        flex-shrink: 0;
-        color: #bfbfbf;
-        font-size: 13px;
-        line-height: 1;
-        user-select: none;
-      }
-
-      .meta-updated {
-        flex-shrink: 0;
-        font-size: 12px;
-        color: #8c8c8c;
-        white-space: nowrap;
-      }
-    }
-
-    &--stats {
-      justify-content: space-between;
-      font-size: 12px;
-      color: #8c8c8c;
-    }
-
-    .meta-stat {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      flex-shrink: 0;
-      white-space: nowrap;
-
-      i {
-        font-size: 12px;
-      }
-    }
-
-    .meta-stat--like {
-      padding: 0 10px;
-      border: 1px solid #e8e8e8;
-      border-radius: 999px;
-      background: transparent;
-      color: inherit;
-      font-size: 12px;
-      gap: 8px;
-      cursor: pointer;
-      transition: border-color 0.15s;
-
-      i {
-        font-size: 11px;
-        transition: color 0.15s;
-      }
-
-      &.liked i,
-      &:not(.disabled):not(.liked):hover i {
-        color: #e0506e;
-      }
-
-      &:not(.disabled):hover {
-        border-color: #e0506e;
-      }
-
-      &.disabled {
-        cursor: default;
-      }
-    }
-  }
-
-  .meta-stats-left {
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-    min-width: 0;
-  }
-
-  .meta-hr {
-    height: 1px;
-    background: #f0f0f0;
-    margin: 2px 0;
-  }
-}
diff --git a/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.spec.ts b/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.spec.ts
deleted file mode 100644
index 1ca8248441c..00000000000
--- a/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.spec.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { HttpClientTestingModule } from "@angular/common/http/testing";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { RouterTestingModule } from "@angular/router/testing";
-import { of, throwError } from "rxjs";
-import type { Mocked } from "vitest";
-
-import { DatasetCardItemComponent } from "./dataset-card-item.component";
-import { DashboardEntry } from "src/app/dashboard/type/dashboard-entry";
-import { DatasetService } from "../../../service/user/dataset/dataset.service";
-import { HubService } from "../../../../hub/service/hub.service";
-import { UserService } from "../../../../common/service/user/user.service";
-import { StubUserService } from "../../../../common/service/user/stub-user.service";
-import { HUB_DATASET_RESULT_DETAIL, USER_DATASET } from "../../../../app-routing.constant";
-import { commonTestProviders } from "../../../../common/testing/test-utils";
-
-function makeDatasetEntry(overrides: Partial<any> = {}): DashboardEntry {
-  return {
-    type: "dataset",
-    id: 42,
-    accessibleUserIds: [1, 2],
-    coverImageUrl: undefined,
-    likeCount: 5,
-    isLiked: false,
-    ...overrides,
-  } as unknown as DashboardEntry;
-}
-
-describe("DatasetCardItemComponent", () => {
-  let component: DatasetCardItemComponent;
-  let fixture: ComponentFixture<DatasetCardItemComponent>;
-  let hubService: Mocked<HubService>;
-
-  beforeEach(async () => {
-    const hubServiceSpy = {
-      toggleLike: vi.fn().mockReturnValue(of({ liked: true, likeCount: 7 })),
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [DatasetCardItemComponent, HttpClientTestingModule, BrowserAnimationsModule, RouterTestingModule],
-      providers: [
-        {
-          provide: DatasetService,
-          useValue: {
-            getDatasetCoverUrl: vi.fn().mockReturnValue(of({ url: "https://s3.example/presigned" })),
-          },
-        },
-        { provide: HubService, useValue: hubServiceSpy },
-        { provide: UserService, useClass: StubUserService },
-        ...commonTestProviders,
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DatasetCardItemComponent);
-    component = fixture.componentInstance;
-    hubService = TestBed.inject(HubService) as unknown as Mocked<HubService>;
-  });
-
-  describe("entryLink", () => {
-    it("routes to the private dataset page when the current user has access", () => {
-      component.currentUid = 1;
-      component.entry = makeDatasetEntry({ id: 99, accessibleUserIds: [1, 2] });
-      component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
-      expect(component.entryLink).toEqual([USER_DATASET, "99"]);
-    });
-
-    it("routes to the hub detail page when the current user has no access", () => {
-      component.currentUid = 5;
-      component.entry = makeDatasetEntry({ id: 99, accessibleUserIds: [1, 2] });
-      component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
-      expect(component.entryLink).toEqual([HUB_DATASET_RESULT_DETAIL, "99"]);
-    });
-  });
-
-  describe("coverImageSrc", () => {
-    it("falls back to the default cover when coverImageUrl is missing", () => {
-      const datasetService = TestBed.inject(DatasetService) as unknown as Mocked<DatasetService>;
-      component.entry = makeDatasetEntry({ coverImageUrl: undefined });
-      component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
-      expect(component.coverImageSrc).toBe(component.defaultCover);
-      expect(datasetService.getDatasetCoverUrl).not.toHaveBeenCalled();
-    });
-
-    it("swaps in the presigned URL once the backend resolves it", () => {
-      const datasetService = TestBed.inject(DatasetService) as unknown as Mocked<DatasetService>;
-      component.entry = makeDatasetEntry({ id: 7, coverImageUrl: "v1/img.png" });
-      component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
-      expect(datasetService.getDatasetCoverUrl).toHaveBeenCalledWith(7);
-      expect(component.coverImageSrc).toBe("https://s3.example/presigned");
-    });
-
-    it("falls back to the default cover when the backend returns a null url", () => {
-      const datasetService = TestBed.inject(DatasetService) as unknown as Mocked<DatasetService>;
-      datasetService.getDatasetCoverUrl.mockReturnValueOnce(of({ url: null }));
-      component.entry = makeDatasetEntry({ id: 9, coverImageUrl: "v1/img.png" });
-      component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
-      expect(component.coverImageSrc).toBe(component.defaultCover);
-    });
-
-    it("falls back to the default cover when the backend errors", () => {
-      const datasetService = TestBed.inject(DatasetService) as unknown as Mocked<DatasetService>;
-      datasetService.getDatasetCoverUrl.mockReturnValueOnce(throwError(() => new Error("403")));
-      component.entry = makeDatasetEntry({ id: 11, coverImageUrl: "v1/img.png" });
-      component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
-      expect(component.coverImageSrc).toBe(component.defaultCover);
-    });
-  });
-
-  describe("toggleLike", () => {
-    beforeEach(() => {
-      component.currentUid = 1;
-      component.entry = makeDatasetEntry();
-      component.ngOnChanges({ entry: { currentValue: component.entry } } as any);
-    });
-
-    it("does nothing when the user is not signed in", () => {
-      component.currentUid = undefined;
-      component.toggleLike();
-      expect(hubService.toggleLike).not.toHaveBeenCalled();
-    });
-
-    it("toggles to liked and reconciles state from the server", () => {
-      component.isLiked = false;
-      component.toggleLike();
-      expect(hubService.toggleLike).toHaveBeenCalledWith(42, "dataset", false);
-      expect(component.isLiked).toBe(true);
-      expect(component.likeCount).toBe(7);
-    });
-
-    it("toggles to unliked and reconciles state from the server", () => {
-      hubService.toggleLike.mockReturnValueOnce(of({ liked: false, likeCount: 6 }));
-      component.isLiked = true;
-      component.toggleLike();
-      expect(hubService.toggleLike).toHaveBeenCalledWith(42, "dataset", true);
-      expect(component.isLiked).toBe(false);
-      expect(component.likeCount).toBe(6);
-    });
-  });
-});
diff --git a/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.ts b/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.ts
deleted file mode 100644
index 5e9fd3e27f1..00000000000
--- a/frontend/src/app/dashboard/component/user/dataset-card-item/dataset-card-item.component.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from "@angular/core";
-import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { RouterLink } from "@angular/router";
-import { NzCardComponent } from "ng-zorro-antd/card";
-import { NzIconDirective } from "ng-zorro-antd/icon";
-import { DashboardEntry } from "../../../type/dashboard-entry";
-import { UserAvatarComponent } from "../user-avatar/user-avatar.component";
-import { DatasetService } from "../../../service/user/dataset/dataset.service";
-import { HubService } from "../../../../hub/service/hub.service";
-import { formatSize } from "../../../../common/util/size-formatter.util";
-import { formatCount, formatRelativeTime } from "../../../../common/util/format.util";
-import { isDefined } from "../../../../common/util/predicate";
-import { HUB_DATASET_RESULT_DETAIL, USER_DATASET } from "../../../../app-routing.constant";
-
-@UntilDestroy()
-@Component({
-  selector: "texera-dataset-card-item",
-  templateUrl: "./dataset-card-item.component.html",
-  styleUrls: ["./dataset-card-item.component.scss"],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterLink, NzCardComponent, NzIconDirective, UserAvatarComponent],
-})
-export class DatasetCardItemComponent implements OnChanges {
-  @Input() currentUid: number | undefined;
-  @Input() entry!: DashboardEntry;
-
-  entryLink: string[] = [];
-  coverImageSrc: string = "";
-  readonly defaultCover = "assets/card_background.jpg";
-  likeCount = 0;
-  viewCount = 0;
-  isLiked = false;
-
-  constructor(
-    private datasetService: DatasetService,
-    private hubService: HubService,
-    private cdr: ChangeDetectorRef
-  ) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes["entry"] || changes["currentUid"]) {
-      this.initializeEntry();
-    }
-    if (changes["entry"]) {
-      this.likeCount = this.entry.likeCount ?? 0;
-      this.viewCount = this.entry.viewCount ?? 0;
-      this.isLiked = this.entry.isLiked ?? false;
-    }
-  }
-
-  private initializeEntry(): void {
-    if (!this.entry || this.entry.type !== "dataset" || typeof this.entry.id !== "number") {
-      return;
-    }
-    const did = this.entry.id;
-    const owners = this.entry.accessibleUserIds;
-    if (this.currentUid !== undefined && owners.includes(this.currentUid)) {
-      this.entryLink = [USER_DATASET, String(did)];
-    } else {
-      this.entryLink = [HUB_DATASET_RESULT_DETAIL, String(did)];
-    }
-
-    this.coverImageSrc = this.defaultCover;
-    if (this.entry.coverImageUrl) {
-      this.datasetService
-        .getDatasetCoverUrl(did)
-        .pipe(untilDestroyed(this))
-        .subscribe({
-          next: ({ url }) => {
-            this.coverImageSrc = url ?? this.defaultCover;
-            this.cdr.markForCheck();
-          },
-          error: () => {
-            this.coverImageSrc = this.defaultCover;
-            this.cdr.markForCheck();
-          },
-        });
-    }
-  }
-
-  onCoverError(event: Event): void {
-    const image = event.target as HTMLImageElement;
-    image.onerror = null;
-    image.src = this.defaultCover;
-  }
-
-  toggleLike(): void {
-    if (!isDefined(this.currentUid) || !isDefined(this.entry.id)) return;
-    // optimistic flip; server response reconciles or reverts
-    const previousLiked = this.isLiked;
-    this.isLiked = !previousLiked;
-    this.likeCount += previousLiked ? -1 : 1;
-    this.cdr.markForCheck();
-
-    this.hubService
-      .toggleLike(this.entry.id, this.entry.type, previousLiked)
-      .pipe(untilDestroyed(this))
-      .subscribe({
-        next: ({ liked, likeCount }) => {
-          this.isLiked = liked;
-          this.likeCount = likeCount;
-          this.cdr.markForCheck();
-        },
-        error: () => {
-          this.isLiked = previousLiked;
-          this.likeCount += previousLiked ? 1 : -1;
-          this.cdr.markForCheck();
-        },
-      });
-  }
-
-  formatSize = formatSize;
-  formatCount = formatCount;
-  formatRelativeTime = formatRelativeTime;
-}
diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html
index ef7ae349844..7b6e1b85d2c 100644
--- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.html
@@ -153,7 +153,7 @@
         (click)="toggleLike(); $event.stopPropagation()">
         <i
           nz-icon
-          nzType="heart"
+          nzType="like"
           [nzTheme]="isLiked ? 'fill' : 'outline'"></i>
         <span>{{ formatCount(this.likeCount) }}</span>
       </button>
diff --git a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.scss b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.scss
index 92a8ab7c6cc..273dbb938be 100644
--- a/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.scss
+++ b/frontend/src/app/dashboard/component/user/list-item/card-item/card-item.component.scss
@@ -16,10 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-// Styled to match the dataset card view (dataset-card-item.component.scss) for
-// a consistent card look across the dashboard: 8px radius, 124px cover, a
+// A consistent card look across the dashboard: 8px radius, 124px cover, a
 // muted #8c8c8c / #595959 meta palette, #f0f0f0 dividers and a #e0506e like
-// accent. Markup/structure intentionally unchanged.
+// accent.
 
 .card-item {
   width: 100%;
@@ -206,9 +205,19 @@
 }
 
 .like-btn {
+  margin-left: auto;
+  padding: 0 12px;
+  border: 1px solid #e8e8e8;
+  border-radius: 999px;
+
+  &:hover {
+    background: transparent;
+  }
+
   &.liked,
   &:not([disabled]):hover {
     color: #e0506e;
+    border-color: #e0506e;
   }
 }
 
diff --git a/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.html b/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.html
index b910262df7e..15bce4a703a 100644
--- a/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.html
+++ b/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.html
@@ -27,11 +27,9 @@
         class="view-toggle">
         <button
           nz-button
-          nzType="text"
-          [class.active]="viewMode === 'list'"
+          title="List view"
           (click)="setViewMode('list')"
-          nz-tooltip="List view"
-          title="List view">
+          [nzType]="viewMode === 'list' ? 'primary' : 'default'">
           <i
             nz-icon
             nzType="bars"
@@ -39,14 +37,12 @@
         </button>
         <button
           nz-button
-          nzType="text"
-          [class.active]="viewMode === 'card'"
+          title="Card view"
           (click)="setViewMode('card')"
-          nz-tooltip="Card view"
-          title="Card view">
+          [nzType]="viewMode === 'card' ? 'primary' : 'default'">
           <i
             nz-icon
-            nzType="table"
+            nzType="appstore"
             nzTheme="outline"></i>
         </button>
       </div>
@@ -56,10 +52,10 @@
   <ng-template
     #datasetCardTpl
     let-entry>
-    <texera-dataset-card-item
+    <texera-card-item
       [entry]="entry"
       [currentUid]="currentUid">
-    </texera-dataset-card-item>
+    </texera-card-item>
   </ng-template>
 
   <div class="search-result">
diff --git a/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.scss b/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.scss
index 15c67772751..959c187ed54 100644
--- a/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.scss
+++ b/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.scss
@@ -28,28 +28,6 @@
 
 .view-toggle {
   display: inline-flex;
-  background: #f5f5f5;
-  border-radius: 6px;
-  padding: 2px;
+  gap: 8px;
   margin-left: auto;
-
-  button {
-    height: 28px;
-    padding: 0 10px;
-    border: none;
-    background: transparent;
-    color: #8c8c8c;
-    border-radius: 4px;
-
-    &:hover {
-      color: #595959;
-      background: rgba(255, 255, 255, 0.6);
-    }
-
-    &.active {
-      background: #fff;
-      color: #1f1f1f;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-    }
-  }
 }
diff --git a/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.ts b/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.ts
index 1f69bdcff71..2cb582c4e9d 100644
--- a/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.ts
+++ b/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.ts
@@ -28,7 +28,7 @@ import {
   SearchResultsViewMode,
 } from "../../../dashboard/component/user/search-results/search-results.component";
 import { FiltersComponent } from "../../../dashboard/component/user/filters/filters.component";
-import { DatasetCardItemComponent } from "../../../dashboard/component/user/dataset-card-item/dataset-card-item.component";
+import { CardItemComponent } from "../../../dashboard/component/user/list-item/card-item/card-item.component";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { SortMethod } from "../../../dashboard/type/sort-method";
 import { UserService } from "../../../common/service/user/user.service";
@@ -53,7 +53,7 @@ const HUB_DATASET_VIEW_MODE_STORAGE_KEY = "texera.hub.dataset.viewMode";
     SortButtonComponent,
     FiltersComponent,
     SearchResultsComponent,
-    DatasetCardItemComponent,
+    CardItemComponent,
   ],
 })
 export class HubSearchResultComponent implements OnInit, AfterViewInit {