diff --git a/src/routes/Dashboard/DashboardFavoritesView.tsx b/src/routes/Dashboard/DashboardFavoritesView.tsx
index 051cb1eb9..ad41417e2 100644
--- a/src/routes/Dashboard/DashboardFavoritesView.tsx
+++ b/src/routes/Dashboard/DashboardFavoritesView.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from "@tanstack/react-router";
+import { Link } from "@tanstack/react-router";
 import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -17,25 +17,21 @@ function getFavoriteUrl(item: FavoriteItem): string {
 }
 
 const FavoriteCard = ({ item }: { item: FavoriteItem }) => {
-  const navigate = useNavigate();
   const { removeFavorite } = useFavorites();
 
   const isPipeline = item.type === "pipeline";
 
   return (
-    <button
-      onClick={() => navigate({ to: getFavoriteUrl(item) })}
-      className={`group relative flex flex-col gap-2 p-3 border rounded-lg cursor-pointer transition-colors text-left w-full ${
-        isPipeline
-          ? "bg-violet-50/40 hover:bg-violet-50 border-violet-100"
-          : "bg-emerald-50/40 hover:bg-emerald-50 border-emerald-100"
-      }`}
+    <Link
+      to={getFavoriteUrl(item)}
+      className="group relative flex flex-col gap-2.5 p-3 rounded-lg transition-all shadow-sm hover:shadow-md bg-card border border-border hover:border-foreground/20 no-underline"
     >
       {/* Remove button */}
       <Button
         variant="ghost"
         size="icon"
         onClick={(e) => {
+          e.preventDefault();
           e.stopPropagation();
           removeFavorite(item.type, item.id);
         }}
@@ -45,20 +41,18 @@ const FavoriteCard = ({ item }: { item: FavoriteItem }) => {
         <Icon name="X" size="sm" />
       </Button>
 
-      {/* Type badge */}
-      <InlineStack gap="1" blockAlign="center">
-        <Icon
-          name={isPipeline ? "GitBranch" : "Play"}
-          className={`shrink-0 ${isPipeline ? "text-violet-500" : "text-emerald-500"}`}
-          size="sm"
-        />
-        <Text
-          size="xs"
-          weight="semibold"
-          className={isPipeline ? "text-violet-600" : "text-emerald-600"}
+      {/* Type pill */}
+      <InlineStack>
+        <span
+          className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs font-semibold ${
+            isPipeline
+              ? "bg-violet-100 text-violet-700"
+              : "bg-emerald-100 text-emerald-700"
+          }`}
         >
+          <Icon name={isPipeline ? "GitBranch" : "Play"} size="sm" />
           {isPipeline ? "Pipeline" : "Run"}
-        </Text>
+        </span>
       </InlineStack>
 
       {/* Name */}
@@ -70,7 +64,7 @@ const FavoriteCard = ({ item }: { item: FavoriteItem }) => {
       <Text size="xs" className="truncate text-muted-foreground font-mono">
         {item.id}
       </Text>
-    </button>
+    </Link>
   );
 };
 
diff --git a/src/routes/Dashboard/DashboardRecentlyViewedView.tsx b/src/routes/Dashboard/DashboardRecentlyViewedView.tsx
index 5ca966544..708af8e31 100644
--- a/src/routes/Dashboard/DashboardRecentlyViewedView.tsx
+++ b/src/routes/Dashboard/DashboardRecentlyViewedView.tsx
@@ -22,27 +22,21 @@ const RecentlyViewedCard = ({ item }: { item: RecentlyViewedItem }) => {
   return (
     <Link
       to={getRecentlyViewedUrl(item)}
-      className={`flex flex-col gap-2 p-3 border rounded-lg transition-colors no-underline ${
-        isPipeline
-          ? "bg-violet-50/40 hover:bg-violet-50 border-violet-100"
-          : "bg-emerald-50/40 hover:bg-emerald-50 border-emerald-100"
-      }`}
+      className="flex flex-col gap-2.5 p-3 rounded-lg transition-all shadow-sm hover:shadow-md bg-card border border-border hover:border-foreground/20 no-underline"
     >
-      {/* Type badge */}
-      <InlineStack gap="1" blockAlign="center" align="space-between">
-        <InlineStack gap="1" blockAlign="center">
-          <Icon
-            name={isPipeline ? "GitBranch" : "Play"}
-            size="sm"
-            className={`shrink-0 ${isPipeline ? "text-violet-500" : "text-emerald-500"}`}
-          />
-          <Text
-            size="xs"
-            weight="semibold"
-            className={isPipeline ? "text-violet-600" : "text-emerald-600"}
+      {/* Type pill + timestamp */}
+      <InlineStack blockAlign="center" align="space-between">
+        <InlineStack>
+          <span
+            className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs font-semibold ${
+              isPipeline
+                ? "bg-violet-100 text-violet-700"
+                : "bg-emerald-100 text-emerald-700"
+            }`}
           >
+            <Icon name={isPipeline ? "GitBranch" : "Play"} size="sm" />
             {isPipeline ? "Pipeline" : "Run"}
-          </Text>
+          </span>
         </InlineStack>
         <Text size="xs" className="text-muted-foreground">
           {formatRelativeTime(new Date(item.viewedAt))}