diff --git a/ui-v2/src/components/automations/automation-details.tsx b/ui-v2/src/components/automations/automation-details.tsx
new file mode 100644
index 000000000000..0e18f34fc260
--- /dev/null
+++ b/ui-v2/src/components/automations/automation-details.tsx
@@ -0,0 +1,56 @@
+import { type Automation } from "@/api/automations";
+import { ActionDetails } from "@/components/automations/action-details";
+import { Typography } from "@/components/ui/typography";
+
+type AutomationDetailsProps = {
+	data: Automation;
+};
+
+export const AutomationDetails = ({ data }: AutomationDetailsProps) => (
+	<div className="flex flex-col gap-4">
+		<AutomationDescription data={data} />
+		<AutomationTrigger data={data} />
+		<AutomationActions data={data} />
+	</div>
+);
+
+const AutomationDescription = ({ data }: AutomationDetailsProps) => {
+	return (
+		<div className="flex flex-col gap-1">
+			<Typography className="text-muted-foreground" variant="bodySmall">
+				Description
+			</Typography>
+			<Typography className="text-muted-foreground">
+				{data.description || "None"}
+			</Typography>
+		</div>
+	);
+};
+
+const AutomationTrigger = ({ data }: AutomationDetailsProps) => {
+	const { trigger } = data;
+	return (
+		<div className="flex flex-col gap-1">
+			<Typography>Trigger</Typography>
+			<Typography variant="bodySmall">
+				TODO: {JSON.stringify(trigger)}
+			</Typography>
+		</div>
+	);
+};
+
+const AutomationActions = ({ data }: AutomationDetailsProps) => {
+	const { actions } = data;
+	return (
+		<div className="flex flex-col gap-1">
+			<Typography>{`Action${actions.length > 1 ? "s" : ""}`}</Typography>
+			<ul className="flex flex-col gap-2">
+				{actions.map((action, i) => (
+					<li key={i}>
+						<ActionDetails action={action} />
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+};
diff --git a/ui-v2/src/components/automations/automation-details/automation-details.stories.tsx b/ui-v2/src/components/automations/automation-details/automation-details.stories.tsx
deleted file mode 100644
index 12369fe5bb42..000000000000
--- a/ui-v2/src/components/automations/automation-details/automation-details.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { createFakeAutomation } from "@/mocks";
-import { reactQueryDecorator, routerDecorator } from "@/storybook/utils";
-import { AutomationDetails } from "./automation-details";
-
-const meta: Meta<typeof AutomationDetails> = {
-	title: "Components/Automations/AutomationDetails",
-	decorators: [routerDecorator, reactQueryDecorator],
-	component: AutomationDetails,
-	args: { data: createFakeAutomation() },
-};
-export default meta;
-
-export const Page: StoryObj = {
-	args: { displayType: "page" },
-};
-
-export const Item: StoryObj = {
-	args: { displayType: "item" },
-};
diff --git a/ui-v2/src/components/automations/automation-details/automation-details.tsx b/ui-v2/src/components/automations/automation-details/automation-details.tsx
deleted file mode 100644
index 22edf110c757..000000000000
--- a/ui-v2/src/components/automations/automation-details/automation-details.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { type Automation } from "@/api/automations";
-import { ActionDetails } from "@/components/automations/action-details";
-import { AutomationEnableToggle } from "@/components/automations/automation-enable-toggle";
-import { AutomationsActionsMenu } from "@/components/automations/automations-actions-menu";
-import { useDeleteAutomationConfirmationDialog } from "@/components/automations/use-delete-automation-confirmation-dialog";
-import {
-	Breadcrumb,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { Card } from "@/components/ui/card";
-import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
-import { Typography } from "@/components/ui/typography";
-
-type DisplayType = "page" | "item";
-
-type AutomationDetailsProps = {
-	data: Automation;
-	displayType: DisplayType;
-};
-
-export const AutomationDetails = ({
-	data,
-	displayType,
-}: AutomationDetailsProps) => {
-	if (displayType === "item") {
-		return (
-			<Card className="p-4 pt-5">
-				<AutomationDetailsContent data={data} displayType={displayType} />
-			</Card>
-		);
-	}
-	return <AutomationDetailsContent data={data} displayType={displayType} />;
-};
-
-const AutomationDetailsContent = ({
-	data,
-	displayType,
-}: AutomationDetailsProps) => {
-	const [dialogState, confirmDelete] = useDeleteAutomationConfirmationDialog();
-
-	const handleDelete = () =>
-		confirmDelete(data, { shouldNavigate: displayType === "page" });
-
-	return (
-		<>
-			<div className="flex flex-col gap-4">
-				<AutomationDetailsHeader
-					displayType={displayType}
-					data={data}
-					onDelete={handleDelete}
-				/>
-				<div className="flex flex-col gap-4">
-					<AutomationDescription data={data} />
-					<AutomationTrigger data={data} />
-					<AutomationActions data={data} />
-				</div>
-			</div>
-			<DeleteConfirmationDialog {...dialogState} />
-		</>
-	);
-};
-
-type AutomationDetailsHeaderProps = {
-	data: Automation;
-	displayType: DisplayType;
-	onDelete: () => void;
-};
-
-const AutomationDetailsHeader = ({
-	data,
-	onDelete,
-	displayType,
-}: AutomationDetailsHeaderProps) => {
-	return (
-		<div className="flex items-center justify-between">
-			<NavHeader displayType={displayType} data={data} />
-			<div className="flex items-center gap-2">
-				<AutomationEnableToggle data={data} />
-				<AutomationsActionsMenu id={data.id} onDelete={onDelete} />
-			</div>
-		</div>
-	);
-};
-
-type AutomationDescriptionProps = {
-	data: Automation;
-};
-
-const AutomationDescription = ({ data }: AutomationDescriptionProps) => {
-	return (
-		<div className="flex flex-col gap-1">
-			<Typography className="text-muted-foreground" variant="bodySmall">
-				Description
-			</Typography>
-			<Typography className="text-muted-foreground">
-				{data.description || "None"}
-			</Typography>
-		</div>
-	);
-};
-
-type AutomationTriggerProps = {
-	data: Automation;
-};
-
-const AutomationTrigger = ({ data }: AutomationTriggerProps) => {
-	const { trigger } = data;
-	return (
-		<div className="flex flex-col gap-1">
-			<Typography>Trigger</Typography>
-			<Typography variant="bodySmall">
-				TODO: {JSON.stringify(trigger)}
-			</Typography>
-		</div>
-	);
-};
-
-type AutomationActionsProps = {
-	data: Automation;
-};
-
-const AutomationActions = ({ data }: AutomationActionsProps) => {
-	const { actions } = data;
-	return (
-		<div className="flex flex-col gap-1">
-			<Typography>{`Action${actions.length > 1 ? "s" : ""}`}</Typography>
-			<ul className="flex flex-col gap-2">
-				{actions.map((action, i) => (
-					<li key={i}>
-						<ActionDetails action={action} />
-					</li>
-				))}
-			</ul>
-		</div>
-	);
-};
-
-type NavHeaderProps = {
-	data: Automation;
-	displayType: DisplayType;
-};
-
-const NavHeader = ({ displayType, data }: NavHeaderProps) => {
-	if (displayType === "page") {
-		return (
-			<div className="flex items-center gap-2">
-				<Breadcrumb>
-					<BreadcrumbList>
-						<BreadcrumbItem>
-							<BreadcrumbLink
-								to="/automations"
-								className="text-xl font-semibold"
-							>
-								Automations
-							</BreadcrumbLink>
-						</BreadcrumbItem>
-						<BreadcrumbSeparator />
-						<BreadcrumbItem className="text-xl font-semibold">
-							<BreadcrumbPage>{data.name}</BreadcrumbPage>
-						</BreadcrumbItem>
-					</BreadcrumbList>
-				</Breadcrumb>
-			</div>
-		);
-	}
-
-	return (
-		<Breadcrumb>
-			<BreadcrumbList>
-				<BreadcrumbItem className="text-xl">
-					<BreadcrumbLink
-						to="/automations/automation/$id"
-						params={{ id: data.id }}
-						className="text-lg"
-					>
-						{data.name}
-					</BreadcrumbLink>
-				</BreadcrumbItem>
-			</BreadcrumbList>
-		</Breadcrumb>
-	);
-};
diff --git a/ui-v2/src/components/automations/automation-details/index.ts b/ui-v2/src/components/automations/automation-details/index.ts
deleted file mode 100644
index f60511fd4947..000000000000
--- a/ui-v2/src/components/automations/automation-details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AutomationDetails } from "./automation-details";
diff --git a/ui-v2/src/components/automations/automation-page.tsx b/ui-v2/src/components/automations/automation-page.tsx
new file mode 100644
index 000000000000..026c70773392
--- /dev/null
+++ b/ui-v2/src/components/automations/automation-page.tsx
@@ -0,0 +1,65 @@
+import { type Automation, buildGetAutomationQuery } from "@/api/automations";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { AutomationDetails } from "./automation-details";
+import { AutomationEnableToggle } from "./automation-enable-toggle";
+import { AutomationsActionsMenu } from "./automations-actions-menu";
+
+import { useDeleteAutomationConfirmationDialog } from "./use-delete-automation-confirmation-dialog";
+
+type AutomationsPageProps = {
+	id: string;
+};
+
+export const AutomationPage = ({ id }: AutomationsPageProps) => {
+	const [dialogState, confirmDelete] = useDeleteAutomationConfirmationDialog();
+	const { data } = useSuspenseQuery(buildGetAutomationQuery(id));
+
+	const handleDelete = () => confirmDelete(data, { shouldNavigate: true });
+
+	return (
+		<>
+			<div className="flex flex-col gap-6">
+				<div className="flex items-center justify-between">
+					<PageNavHeader data={data} />
+					<div className="flex items-center gap-2">
+						<AutomationEnableToggle data={data} />
+						<AutomationsActionsMenu id={data.id} onDelete={handleDelete} />
+					</div>
+				</div>
+				<AutomationDetails data={data} />
+			</div>
+			<DeleteConfirmationDialog {...dialogState} />
+		</>
+	);
+};
+
+type NavHeaderProps = {
+	data: Automation;
+};
+
+const PageNavHeader = ({ data }: NavHeaderProps) => {
+	return (
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<BreadcrumbLink to="/automations" className="text-xl font-semibold">
+						Automations
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem className="text-xl font-semibold">
+					<BreadcrumbPage>{data.name}</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+};
diff --git a/ui-v2/src/components/automations/automations-page.tsx b/ui-v2/src/components/automations/automations-page.tsx
index e2d1a7eca3d6..3072735066da 100644
--- a/ui-v2/src/components/automations/automations-page.tsx
+++ b/ui-v2/src/components/automations/automations-page.tsx
@@ -1,29 +1,97 @@
-import { buildListAutomationsQuery } from "@/api/automations";
+import { type Automation, buildListAutomationsQuery } from "@/api/automations";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+} from "@/components/ui/breadcrumb";
+import { Card } from "@/components/ui/card";
+import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
 import { useSuspenseQuery } from "@tanstack/react-query";
+
 import { AutomationDetails } from "./automation-details";
+import { AutomationEnableToggle } from "./automation-enable-toggle";
+import { AutomationsActionsMenu } from "./automations-actions-menu";
 import { AutomationsEmptyState } from "./automations-empty-state";
 import { AutomationsHeader } from "./automations-header";
+import { useDeleteAutomationConfirmationDialog } from "./use-delete-automation-confirmation-dialog";
 
 export const AutomationsPage = () => {
+	const [dialogState, confirmDelete] = useDeleteAutomationConfirmationDialog();
 	const { data } = useSuspenseQuery(buildListAutomationsQuery());
 
+	const handleDelete = (automation: Automation) => confirmDelete(automation);
+
+	return (
+		<>
+			<div className="flex flex-col gap-4">
+				<AutomationsHeader />
+				{data.length === 0 ? (
+					<AutomationsEmptyState />
+				) : (
+					<ul className="flex flex-col gap-2">
+						{data.map((automation) => (
+							<li
+								key={automation.id}
+								aria-label={`automation item ${automation.name}`}
+							>
+								<AutomationCardDetails
+									data={automation}
+									onDelete={handleDelete}
+								/>
+							</li>
+						))}
+					</ul>
+				)}
+			</div>
+			<DeleteConfirmationDialog {...dialogState} />
+		</>
+	);
+};
+
+type AutomationCardDetailsProps = {
+	data: Automation;
+	onDelete: (data: Automation) => void;
+};
+const AutomationCardDetails = ({
+	data,
+	onDelete,
+}: AutomationCardDetailsProps) => {
+	return (
+		<Card className="p-4 pt-5 flex flex-col gap-6">
+			<div className="flex items-center justify-between">
+				<CardNavHeader data={data} />
+				<div className="flex items-center gap-2">
+					<AutomationEnableToggle data={data} />
+					<AutomationsActionsMenu
+						id={data.id}
+						onDelete={() => onDelete(data)}
+					/>
+				</div>
+			</div>
+			<AutomationDetails data={data} />
+		</Card>
+	);
+};
+
+type NavHeaderProps = {
+	data: Automation;
+};
+
+const CardNavHeader = ({ data }: NavHeaderProps) => {
 	return (
-		<div className="flex flex-col gap-4">
-			<AutomationsHeader />
-			{data.length === 0 ? (
-				<AutomationsEmptyState />
-			) : (
-				<ul className="flex flex-col gap-2">
-					{data.map((automation) => (
-						<li
-							key={automation.id}
-							aria-label={`automation item ${automation.name}`}
-						>
-							<AutomationDetails data={automation} displayType="item" />
-						</li>
-					))}
-				</ul>
-			)}
-		</div>
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem className="text-xl">
+					<BreadcrumbLink
+						to="/automations/automation/$id"
+						params={{ id: data.id }}
+						className="text-lg"
+					>
+						{data.name}
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
 	);
 };
diff --git a/ui-v2/src/components/automations/use-delete-automation-confirmation-dialog.ts b/ui-v2/src/components/automations/use-delete-automation-confirmation-dialog.ts
index bdbdf0f0e9c7..eb820ac70812 100644
--- a/ui-v2/src/components/automations/use-delete-automation-confirmation-dialog.ts
+++ b/ui-v2/src/components/automations/use-delete-automation-confirmation-dialog.ts
@@ -19,7 +19,7 @@ export const useDeleteAutomationConfirmationDialog = () => {
 		}: {
 			/** Should navigate back to /automations */
 			shouldNavigate?: boolean;
-		},
+		} = {},
 	) =>
 		confirmDelete({
 			title: "Delete Automation",
diff --git a/ui-v2/src/routes/automations/automation.$id.tsx b/ui-v2/src/routes/automations/automation.$id.tsx
index 4159a4802983..b75eee89c196 100644
--- a/ui-v2/src/routes/automations/automation.$id.tsx
+++ b/ui-v2/src/routes/automations/automation.$id.tsx
@@ -1,8 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 import { buildGetAutomationQuery } from "@/api/automations";
-import { AutomationDetails } from "@/components/automations/automation-details";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { AutomationPage } from "@/components/automations/automation-page";
 
 export const Route = createFileRoute("/automations/automation/$id")({
 	component: RouteComponent,
@@ -13,6 +12,5 @@ export const Route = createFileRoute("/automations/automation/$id")({
 
 function RouteComponent() {
 	const { id } = Route.useParams();
-	const { data } = useSuspenseQuery(buildGetAutomationQuery(id));
-	return <AutomationDetails data={data} displayType="page" />;
+	return <AutomationPage id={id} />;
 }