diff --git a/frontend/src/components/updates/details.tsx b/frontend/src/components/updates/details.tsx
index 6df987d34..fc230c648 100644
--- a/frontend/src/components/updates/details.tsx
+++ b/frontend/src/components/updates/details.tsx
@@ -69,18 +69,7 @@ export const UpdateDetails = ({
               <UpdateUser userId={update.operator} />
             </div>
             <div className="flex gap-4">
-              <div
-                className="flex items-center gap-2 cursor-pointer"
-                onClick={() => {
-                  update.target.id
-                    ? nav(
-                        `/${update.target.type.toLowerCase()}s/${
-                          update.target.id
-                        }`
-                      )
-                    : null;
-                }}
-              >
+              <div className="flex items-center gap-2">
                 {update.target.type === "Server" && (
                   <>
                     <Server className="w-4 h-4" />
diff --git a/frontend/src/components/updates/resource.tsx b/frontend/src/components/updates/resource.tsx
index 651b320dc..b95cb7155 100644
--- a/frontend/src/components/updates/resource.tsx
+++ b/frontend/src/components/updates/resource.tsx
@@ -1 +1,53 @@
-export const ResourceUpdates = () => {};
+import { useRead } from "@hooks";
+import { Button } from "@ui/button";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardDescription,
+} from "@ui/card";
+import { fmt_update_date } from "@util/helpers";
+import { Bell, ExternalLink, User, Calendar } from "lucide-react";
+import { Link } from "react-router-dom";
+import { UpdateDetails } from "./details";
+
+export const ResourceUpdates = ({ id }: { id: string }) => {
+  const updates = useRead("ListUpdates", { target: { id } }).data;
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex justify-between">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Bell className="w-4 h-4" />
+          <h2 className="text-xl">Updates</h2>
+        </div>
+        <Link to={`/deployments/${id}/updates`}>
+          <Button variant="secondary">
+            <ExternalLink className="w-4 h-4" />
+          </Button>
+        </Link>
+      </div>
+      <div className="grid md:grid-cols-3 mt-2 gap-4">
+        {updates?.slice(0, 3).map((update) => (
+          <UpdateDetails update={update} key={update._id?.$oid}>
+            <Card hoverable>
+              <CardHeader>
+                <CardTitle>{update.operation}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="flex items-center gap-2">
+                  <User className="w-4 h-4" /> {update.operator}
+                </CardDescription>
+                <CardDescription className="flex items-center gap-2">
+                  <Calendar className="w-4 h-4" />
+                  {fmt_update_date(new Date(update.start_ts))}
+                </CardDescription>
+              </CardContent>
+            </Card>
+          </UpdateDetails>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/resources/deployment/components/deployment-logs.tsx b/frontend/src/resources/deployment/components/deployment-logs.tsx
index c10002d86..f6faf8bd0 100644
--- a/frontend/src/resources/deployment/components/deployment-logs.tsx
+++ b/frontend/src/resources/deployment/components/deployment-logs.tsx
@@ -3,20 +3,18 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@ui/tabs";
 import { AlertOctagon, ChevronDown, TerminalSquare } from "lucide-react";
 import { useEffect } from "react";
 import { useRead } from "@hooks";
-import { useParams } from "react-router-dom";
 
 const scroll_to_bottom = (id: string) => () =>
   document
     .getElementById(id)
     ?.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
 
-export const DeploymentLogs = () => {
-  const deployment_id = useParams().deploymentId;
-  const { data, refetch } = useRead(
-    "GetLog",
-    { deployment_id, tail: 200 },
-    { enabled: !!deployment_id }
-  );
+export const DeploymentLogs = ({
+  deployment_id,
+}: {
+  deployment_id: string;
+}) => {
+  const { data, refetch } = useRead("GetLog", { deployment_id, tail: 200 });
 
   useEffect(() => {
     const handle = setInterval(() => refetch(), 30000);
diff --git a/frontend/src/resources/deployment/page.tsx b/frontend/src/resources/deployment/page.tsx
index 24c0ac702..00f9b0a58 100644
--- a/frontend/src/resources/deployment/page.tsx
+++ b/frontend/src/resources/deployment/page.tsx
@@ -1,54 +1,7 @@
-import { Link, useParams } from "react-router-dom";
-import { useRead, useSetRecentlyViewed } from "@hooks";
+import { useParams } from "react-router-dom";
+import { useSetRecentlyViewed } from "@hooks";
 import { DeploymentLogs } from "./components/deployment-logs";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@ui/card";
-import { Bell, Calendar, ExternalLink, User } from "lucide-react";
-import { fmt_update_date } from "@util/helpers";
-import { Button } from "@ui/button";
-
-const DeploymentUpdates = ({ id }: { id: string }) => {
-  const updates = useRead("ListUpdates", { target: { id } }).data;
-
-  return (
-    <div className="flex flex-col">
-      <div className="flex justify-between">
-        <div className="flex items-center gap-2 text-muted-foreground">
-          <Bell className="w-4 h-4" />
-          <h2 className="text-xl">Updates</h2>
-        </div>
-        <Link to={`/deployments/${id}/updates`}>
-          <Button variant="secondary">
-            <ExternalLink className="w-4 h-4" />
-          </Button>
-        </Link>
-      </div>
-      <div className="grid md:grid-cols-3 mt-2 gap-4">
-        {updates?.slice(0, 3).map((update) => (
-          <Card>
-            <CardHeader>
-              <CardTitle>{update.operation}</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <CardDescription className="flex items-center gap-2">
-                <User className="w-4 h-4" /> {update.operator}
-              </CardDescription>
-              <CardDescription className="flex items-center gap-2">
-                <Calendar className="w-4 h-4" />
-                {fmt_update_date(new Date(update.start_ts))}
-              </CardDescription>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-};
+import { ResourceUpdates } from "@components/updates/resource";
 
 export const DeploymentPage = () => {
   const { deploymentId } = useParams();
@@ -59,8 +12,8 @@ export const DeploymentPage = () => {
 
   return (
     <div className="flex flex-col gap-12">
-      <DeploymentUpdates id={deploymentId} />
-      <DeploymentLogs />
+      <ResourceUpdates id={deploymentId} />
+      <DeploymentLogs deployment_id={deploymentId} />
     </div>
   );
 };