diff --git a/frontend/src/components/updates/resource.tsx b/frontend/src/components/updates/resource.tsx
index 6bc9e9938..37cf4bda9 100644
--- a/frontend/src/components/updates/resource.tsx
+++ b/frontend/src/components/updates/resource.tsx
@@ -1,12 +1,5 @@
 import { useRead } from "@lib/hooks";
 import { Button } from "@ui/button";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardDescription,
-} from "@ui/card";
 import {
   Bell,
   ExternalLink,
@@ -43,14 +36,61 @@ import { UpdateStatus } from "@monitor/client/dist/types";
 const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
   const Icon = () => {
     if (update.status === UpdateStatus.Complete) {
-      if (update.success) return <Check className="w-4 h-4 stroke-green-500" />;
-      else return <X className="w-4 h-4 stroke-red-500" />;
-    } else return <Loader2 className="w-4 h-4 animate-spin" />;
+      if (update.success) return <Check className="w-4 stroke-green-500" />;
+      else return <X className="w-4 stroke-red-500" />;
+    } else return <Loader2 className="w-4 animate-spin" />;
   };
 
   return (
     <UpdateDetails id={update.id}>
-      <Card className="cursor-pointer hover:translate-y-[-2.5%] hover:bg-accent/50 transition-all">
+      <div className="p-4 border rounded-md flex justify-between cursor-pointer hover:bg-accent transition-colors text-sm">
+        <div>
+          <div className="flex items-center gap-2">
+            <Icon />
+            {update.operation}
+          </div>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Milestone className="w-4" />
+            {fmt_version(update.version)}
+          </div>
+        </div>
+        <div>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Calendar className="w-4" />
+            {fmt_update_date(new Date(update.start_ts))}
+          </div>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <User className="w-4" />
+            <UpdateUser user_id={update.operator} />
+          </div>
+        </div>
+      </div>
+      {/* <Card>
+        <CardHeader className="items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <Icon />
+              {update.operation}
+            </CardTitle>
+            <CardDescription className="flex items-center gap-2">
+              <Milestone className="w-4" />
+              {fmt_version(update.version)}
+            </CardDescription>
+          </div>
+          <div>
+            <CardDescription className="flex items-center gap-2">
+              <User className="w-4" />
+              <UpdateUser user_id={update.operator} />
+            </CardDescription>
+            <CardDescription className="flex items-center gap-2">
+              <Milestone className="w-4" />
+              {fmt_version(update.version)}
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent />
+      </Card> */}
+      {/* <Card className="cursor-pointer hover:translate-y-[-2.5%] hover:bg-accent/50 transition-all">
         <CardHeader className="justify-between">
           <div>
             <CardTitle>{update.operation}</CardTitle>
@@ -71,7 +111,7 @@ const UpdateCard = ({ update }: { update: Types.UpdateListItem }) => {
             {fmt_update_date(new Date(update.start_ts))}
           </CardDescription>
         </CardContent>
-      </Card>
+      </Card> */}
     </UpdateDetails>
   );
 };
@@ -96,7 +136,7 @@ export const ResourceUpdates = ({ type, id }: Types.ResourceTarget) => {
         </Link>
       }
     >
-      <div className="grid md:grid-cols-3 gap-4">
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
         {/* {isLoading && <UpdatePlaceHolder />} */}
         {data?.updates.slice(0, 3).map((update) => (
           <UpdateCard update={update} key={update.id} />