diff --git a/frontend-v2/src/components/layouts.tsx b/frontend-v2/src/components/layouts.tsx
index d447e8210..f70b909d4 100644
--- a/frontend-v2/src/components/layouts.tsx
+++ b/frontend-v2/src/components/layouts.tsx
@@ -23,6 +23,15 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@ui/dialog";
+import { Types } from "@monitor/client";
+import { ResourceComponents } from "./resources";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@ui/card";
 
 export const Layout = () => {
   const type = useResourceParamType();
@@ -160,3 +169,35 @@ export const NewResource = ({
     </Dialog>
   );
 };
+
+export const ResourceCard = ({
+  target: { type, id },
+}: {
+  target: Exclude<Types.ResourceTarget, { type: "System" }>;
+}) => {
+  const Components = ResourceComponents[type];
+
+  return (
+    <Link
+      to={`/${type.toLowerCase()}s/${id}`}
+      className="group hover:translate-y-[-2.5%] focus:translate-y-[-2.5%] transition-transform"
+    >
+      <Card className="h-full hover:bg-accent/50 group-focus:bg-accent/50 transition-colors">
+        <CardHeader className="justify-between">
+          <div>
+            <CardTitle>
+              <Components.Name id={id} />
+            </CardTitle>
+            <CardDescription>
+              <Components.Description id={id} />
+            </CardDescription>
+          </div>
+          <Components.Icon id={id} />
+        </CardHeader>
+        <CardContent className="text-sm text-muted-foreground">
+          <Components.Info id={id} />
+        </CardContent>
+      </Card>
+    </Link>
+  );
+};
diff --git a/frontend-v2/src/components/resources/builder/index.tsx b/frontend-v2/src/components/resources/builder/index.tsx
new file mode 100644
index 000000000..db645a500
--- /dev/null
+++ b/frontend-v2/src/components/resources/builder/index.tsx
@@ -0,0 +1,27 @@
+import { useRead } from "@lib/hooks";
+import { RequiredResourceComponents } from "@types";
+import { Cloud, Bot, Factory } from "lucide-react";
+
+const useBuilder = (id?: string) =>
+  useRead("ListBuilders", {}).data?.find((d) => d.id === id);
+
+export const Builder: RequiredResourceComponents = {
+  Name: ({ id }) => <>{useBuilder(id)?.name}</>,
+  Description: ({ id }) => <>{id}</>,
+  Info: ({ id }) => (
+    <>
+      <div className="flex items-center gap-2">
+        <Cloud className="w-4 h-4" />
+        {useBuilder(id)?.info.provider}
+      </div>
+      <div className="flex items-center gap-2">
+        <Bot className="w-4 h-4" />
+        {useBuilder(id)?.info.instance_type ?? "N/A"}
+      </div>
+    </>
+  ),
+  Icon: () => <Factory className="w-4 h-4" />,
+  Page: {},
+  Actions: () => null,
+  New: () => null,
+};
diff --git a/frontend-v2/src/components/resources/index.tsx b/frontend-v2/src/components/resources/index.tsx
index 799a82142..9e1d2e4ab 100644
--- a/frontend-v2/src/components/resources/index.tsx
+++ b/frontend-v2/src/components/resources/index.tsx
@@ -1,92 +1,18 @@
-import { useRead } from "@lib/hooks";
-import { Types } from "@monitor/client";
 import { RequiredResourceComponents, UsableResource } from "@types";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@ui/card";
-import { Bot, Cloud, Factory, GitBranch } from "lucide-react";
-import { Link } from "react-router-dom";
 import { Deployment } from "./deployment";
 import { Server } from "./server";
 import { Alerter } from "./alerter";
 import { Build } from "./build";
-
-const useBuilder = (id?: string) =>
-  useRead("ListBuilders", {}).data?.find((d) => d.id === id);
-
-const useRepo = (id?: string) =>
-  useRead("ListRepos", {}).data?.find((d) => d.id === id);
+import { Builder } from "./builder";
+import { Repo } from "./repo";
 
 export const ResourceComponents: {
   [key in UsableResource]: RequiredResourceComponents;
 } = {
   Alerter,
   Build,
-  Builder: {
-    Name: ({ id }) => <>{useBuilder(id)?.name}</>,
-    Description: ({ id }) => <>{id}</>,
-    Info: ({ id }) => (
-      <>
-        <div className="flex items-center gap-2">
-          <Cloud className="w-4 h-4" />
-          {useBuilder(id)?.info.provider}
-        </div>
-        <div className="flex items-center gap-2">
-          <Bot className="w-4 h-4" />
-          {useBuilder(id)?.info.instance_type ?? "N/A"}
-        </div>
-      </>
-    ),
-    Icon: () => <Factory className="w-4 h-4" />,
-    Page: {},
-    Actions: () => null,
-    New: () => null,
-  },
-  Repo: {
-    Name: ({ id }) => <>{useRepo(id)?.name}</>,
-    Description: ({ id }) => <>{id}</>,
-    Info: ({ id }) => <>{id}</>,
-    Icon: () => <GitBranch className="w-4 h-4" />,
-    Page: {},
-    Actions: () => null,
-    New: () => null,
-  },
+  Builder,
   Deployment,
   Server,
-};
-
-export const ResourceCard = ({
-  target: { type, id },
-}: {
-  target: Exclude<Types.ResourceTarget, { type: "System" }>;
-}) => {
-  const Components = ResourceComponents[type];
-
-  return (
-    <Link
-      to={`/${type.toLowerCase()}s/${id}`}
-      className="group hover:translate-y-[-2.5%] focus:translate-y-[-2.5%] transition-transform"
-    >
-      <Card className="h-full hover:bg-accent/50 group-focus:bg-accent/50 transition-colors">
-        <CardHeader className="justify-between">
-          <div>
-            <CardTitle>
-              <Components.Name id={id} />
-            </CardTitle>
-            <CardDescription>
-              <Components.Description id={id} />
-            </CardDescription>
-          </div>
-          <Components.Icon id={id} />
-        </CardHeader>
-        <CardContent className="text-sm text-muted-foreground">
-          <Components.Info id={id} />
-        </CardContent>
-      </Card>
-    </Link>
-  );
+  Repo,
 };
diff --git a/frontend-v2/src/components/resources/repo/index.tsx b/frontend-v2/src/components/resources/repo/index.tsx
new file mode 100644
index 000000000..f065be772
--- /dev/null
+++ b/frontend-v2/src/components/resources/repo/index.tsx
@@ -0,0 +1,16 @@
+import { useRead } from "@lib/hooks";
+import { RequiredResourceComponents } from "@types";
+import { GitBranch } from "lucide-react";
+
+const useRepo = (id?: string) =>
+  useRead("ListRepos", {}).data?.find((d) => d.id === id);
+
+export const Repo: RequiredResourceComponents = {
+  Name: ({ id }) => <>{useRepo(id)?.name}</>,
+  Description: ({ id }) => <>{id}</>,
+  Info: ({ id }) => <>{id}</>,
+  Icon: () => <GitBranch className="w-4 h-4" />,
+  Page: {},
+  Actions: () => null,
+  New: () => null,
+};