diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentCTA.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentCTA.tsx
index 2d83e5b7..35fcb78a 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentCTA.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/DeploymentCTA.tsx
@@ -2,7 +2,6 @@
 
 import React from "react";
 import { usePathname } from "next/navigation";
-import { IconPlus, IconRocket } from "@tabler/icons-react";
 
 import { Button } from "@ctrlplane/ui/button";
 
@@ -20,8 +19,7 @@ export const DeploymentCTA: React.FC<{
   if (tab === "variables")
     return (
       <CreateVariableDialog deploymentId={deploymentId}>
-        <Button variant="outline" className="flex items-center gap-2">
-          <IconPlus className="h-4 w-4" />
+        <Button variant="outline" className="flex items-center gap-2" size="sm">
           Add Variable
         </Button>
       </CreateVariableDialog>
@@ -30,8 +28,7 @@ export const DeploymentCTA: React.FC<{
   if (tab === "releases")
     return (
       <CreateReleaseDialog deploymentId={deploymentId} systemId={systemId}>
-        <Button variant="outline" className="flex items-center gap-2">
-          <IconRocket className="h-4 w-4" />
+        <Button variant="outline" className="flex items-center gap-2" size="sm">
           New Release
         </Button>
       </CreateReleaseDialog>
@@ -40,8 +37,7 @@ export const DeploymentCTA: React.FC<{
   if (tab === "channels")
     return (
       <CreateReleaseChannelDialog deploymentId={deploymentId}>
-        <Button variant="outline" className="flex items-center gap-2">
-          <IconPlus className="h-4 w-4" />
+        <Button variant="outline" className="flex items-center gap-2" size="sm">
           New Channel
         </Button>
       </CreateReleaseChannelDialog>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/channels/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/channels/page.tsx
index f0173eaf..d7a20870 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/channels/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/channels/page.tsx
@@ -1,19 +1,6 @@
-import Link from "next/link";
 import { notFound } from "next/navigation";
-import { IconArrowLeft } from "@tabler/icons-react";
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@ctrlplane/ui/breadcrumb";
-import { Button } from "@ctrlplane/ui/button";
-import { Separator } from "@ctrlplane/ui/separator";
-
-import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
 import { api } from "~/trpc/server";
-import { CreateReleaseChannelDialog } from "./CreateReleaseChannelDialog";
 import { ReleaseChannelsTable } from "./ReleaseChannelsTable";
 
 export default async function ReleaseChannelsPage(props: {
@@ -37,32 +24,5 @@ export default async function ReleaseChannelsPage(props: {
   const releaseChannels =
     await api.deployment.releaseChannel.list.byDeploymentId(deployment.id);
 
-  return (
-    <div>
-      <PageHeader className="justify-between">
-        <div className="flex shrink-0 items-center gap-4">
-          <Link
-            href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
-          >
-            <IconArrowLeft className="size-5" />
-          </Link>
-          <Separator orientation="vertical" className="h-4" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>Channels</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-
-        <CreateReleaseChannelDialog deploymentId={deployment.id}>
-          <Button variant="outline" size="sm">
-            Create Channel
-          </Button>
-        </CreateReleaseChannelDialog>
-      </PageHeader>
-      <ReleaseChannelsTable releaseChannels={releaseChannels} />
-    </div>
-  );
+  return <ReleaseChannelsTable releaseChannels={releaseChannels} />;
 }
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/layout.tsx
index d05bf1c4..10e607cd 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/layout.tsx
@@ -1,5 +1,15 @@
+import Link from "next/link";
 import { notFound } from "next/navigation";
+import { IconArrowLeft } from "@tabler/icons-react";
 
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@ctrlplane/ui/breadcrumb";
+import { Separator } from "@ctrlplane/ui/separator";
 import {
   Sidebar,
   SidebarContent,
@@ -12,6 +22,8 @@ import {
 import { SidebarLink } from "~/app/[workspaceSlug]/(appv2)/resources/(sidebar)/SidebarLink";
 import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
 import { api } from "~/trpc/server";
+import { PageHeader } from "../../../../../../_components/PageHeader";
+import { DeploymentCTA } from "./DeploymentCTA";
 
 export default async function DeploymentLayout(props: {
   children: React.ReactNode;
@@ -29,29 +41,52 @@ export default async function DeploymentLayout(props: {
   const url = (tab: string) =>
     `/${params.workspaceSlug}/systems/${params.systemSlug}/deployments/${params.deploymentSlug}/${tab}`;
   return (
-    <SidebarProvider
-      className="relative h-full"
-      sidebarNames={[Sidebars.Deployment]}
-    >
-      <Sidebar
-        className="absolute left-0 top-0 h-full"
-        name={Sidebars.Deployment}
+    <div className="h-full w-full">
+      <PageHeader className="justify-between">
+        <div className="flex shrink-0 items-center gap-4">
+          <Link
+            href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
+          >
+            <IconArrowLeft className="size-5" />
+          </Link>
+          <Separator orientation="vertical" className="h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>Deployments</BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbPage>{deployment.name}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+
+        <DeploymentCTA deploymentId={deployment.id} systemId={system.id} />
+      </PageHeader>
+      <SidebarProvider
+        className="relative h-full"
+        sidebarNames={[Sidebars.Deployment]}
       >
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarMenu>
-              <SidebarLink href={url("properties")}>Properties</SidebarLink>
-              <SidebarLink href={url("workflow")}>Workflow</SidebarLink>
-              <SidebarLink href={url("releases")}>Releases</SidebarLink>
-              <SidebarLink href={url("channels")}>Channels</SidebarLink>
-              <SidebarLink href={url("variables")}>Variables</SidebarLink>
-            </SidebarMenu>
-          </SidebarGroup>
-        </SidebarContent>
-      </Sidebar>
-      <SidebarInset className="h-full w-[calc(100%-255px-1px)]">
-        {props.children}
-      </SidebarInset>
-    </SidebarProvider>
+        <Sidebar
+          className="absolute left-0 top-0 h-full"
+          name={Sidebars.Deployment}
+        >
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarMenu>
+                <SidebarLink href={url("properties")}>Properties</SidebarLink>
+                <SidebarLink href={url("workflow")}>Workflow</SidebarLink>
+                <SidebarLink href={url("releases")}>Releases</SidebarLink>
+                <SidebarLink href={url("channels")}>Channels</SidebarLink>
+                <SidebarLink href={url("variables")}>Variables</SidebarLink>
+              </SidebarMenu>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+        <SidebarInset className="h-full w-[calc(100%-255px-1px)]">
+          {props.children}
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
   );
 }
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/properties/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/properties/page.tsx
index 0a4b3e67..ee893e64 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/properties/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/properties/page.tsx
@@ -4,26 +4,16 @@ import type {
   ResourceCondition,
 } from "@ctrlplane/validators/resources";
 import React from "react";
-import Link from "next/link";
 import { notFound } from "next/navigation";
-import { IconArrowLeft } from "@tabler/icons-react";
 import LZString from "lz-string";
 import { isPresent } from "ts-is-present";
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@ctrlplane/ui/breadcrumb";
 import { Card } from "@ctrlplane/ui/card";
-import { Separator } from "@ctrlplane/ui/separator";
 import {
   ResourceFilterType,
   ResourceOperator,
 } from "@ctrlplane/validators/resources";
 
-import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
 import { api } from "~/trpc/server";
 import { VariableTable } from "../variables/VariableTable";
 import { EditDeploymentSection } from "./EditDeploymentSection";
@@ -165,42 +155,23 @@ export default async function DeploymentPage(props: {
   if (deployment == null) return notFound();
 
   return (
-    <div>
-      <PageHeader className="justify-between">
-        <div className="flex shrink-0 items-center gap-4">
-          <Link
-            href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
-          >
-            <IconArrowLeft className="size-5" />
-          </Link>
-          <Separator orientation="vertical" className="h-4" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>Properties</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-      </PageHeader>
-      <div className="container mx-auto flex max-w-5xl gap-12">
-        <div className="sticky top-8 my-8 h-full w-[150px] flex-shrink-0">
-          <div>
-            <SidebarSection id="properties">Properties</SidebarSection>
-            <SidebarSection id="job-agent">Job Agent</SidebarSection>
-            <SidebarSection id="variables">Variables</SidebarSection>
-          </div>
-        </div>
-        <div className="mb-16 flex-grow space-y-10">
-          <EditDeploymentSection
-            deployment={deployment}
-            systems={systems}
-            workspaceId={workspaceId}
-          />
-
-          <Variables workspaceId={workspaceId} deployment={deployment} />
+    <div className="container mx-auto flex max-w-5xl gap-12">
+      <div className="sticky top-8 my-8 h-full w-[150px] flex-shrink-0">
+        <div>
+          <SidebarSection id="properties">Properties</SidebarSection>
+          <SidebarSection id="job-agent">Job Agent</SidebarSection>
+          <SidebarSection id="variables">Variables</SidebarSection>
         </div>
       </div>
+      <div className="mb-16 flex-grow space-y-10">
+        <EditDeploymentSection
+          deployment={deployment}
+          systems={systems}
+          workspaceId={workspaceId}
+        />
+
+        <Variables workspaceId={workspaceId} deployment={deployment} />
+      </div>
     </div>
   );
 }
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/releases/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/releases/page.tsx
index 339e2a8e..fefb3f05 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/releases/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/releases/page.tsx
@@ -1,22 +1,9 @@
 "use server";
 
 import type { Metadata } from "next";
-import Link from "next/link";
 import { notFound } from "next/navigation";
-import { IconArrowLeft } from "@tabler/icons-react";
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@ctrlplane/ui/breadcrumb";
-import { Button } from "@ctrlplane/ui/button";
-import { Separator } from "@ctrlplane/ui/separator";
-
-import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
 import { api } from "~/trpc/server";
-import { CreateReleaseDialog } from "./CreateRelease";
 import { DeploymentPageContent } from "./DeploymentPageContent";
 
 type PageProps = {
@@ -51,35 +38,10 @@ export default async function DeploymentPage(props: PageProps) {
       )
     : null;
   return (
-    <div>
-      <PageHeader className="justify-between">
-        <div className="flex shrink-0 items-center gap-4">
-          <Link
-            href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
-          >
-            <IconArrowLeft className="size-5" />
-          </Link>
-          <Separator orientation="vertical" className="h-4" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>Releases</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-
-        <CreateReleaseDialog deploymentId={deployment.id} systemId={system.id}>
-          <Button variant="outline" size="sm">
-            Create Release
-          </Button>
-        </CreateReleaseDialog>
-      </PageHeader>
-      <DeploymentPageContent
-        deployment={deployment}
-        environments={environments}
-        releaseChannel={releaseChannel}
-      />
-    </div>
+    <DeploymentPageContent
+      deployment={deployment}
+      environments={environments}
+      releaseChannel={releaseChannel}
+    />
   );
 }
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/variables/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/variables/page.tsx
index f09f6f05..71b8b0f4 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/variables/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(raw)/deployments/[deploymentSlug]/(sidebar)/variables/page.tsx
@@ -2,28 +2,16 @@ import type {
   ComparisonCondition,
   ResourceCondition,
 } from "@ctrlplane/validators/resources";
-import Link from "next/link";
 import { notFound } from "next/navigation";
-import { IconArrowLeft } from "@tabler/icons-react";
 import LZString from "lz-string";
 import { isPresent } from "ts-is-present";
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@ctrlplane/ui/breadcrumb";
-import { Button } from "@ctrlplane/ui/button";
-import { Separator } from "@ctrlplane/ui/separator";
 import {
   ResourceFilterType,
   ResourceOperator,
 } from "@ctrlplane/validators/resources";
 
-import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
 import { api } from "~/trpc/server";
-import { CreateVariableDialog } from "./CreateVariableDialog";
 import { VariableTable } from "./VariableTable";
 
 export default async function VariablesPage(props: {
@@ -134,34 +122,9 @@ export default async function VariablesPage(props: {
   const variables = await Promise.all(variablesPromises);
 
   return (
-    <div>
-      <PageHeader className="justify-between">
-        <div className="flex shrink-0 items-center gap-4">
-          <Link
-            href={`/${params.workspaceSlug}/systems/${params.systemSlug}/deployments`}
-          >
-            <IconArrowLeft className="size-5" />
-          </Link>
-          <Separator orientation="vertical" className="h-4" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>Variables</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-
-        <CreateVariableDialog deploymentId={deployment.id}>
-          <Button variant="outline" size="sm">
-            Create Variable
-          </Button>
-        </CreateVariableDialog>
-      </PageHeader>
-      <div className="h-full overflow-y-auto pb-[100px]">
-        <div className="min-h-full">
-          <VariableTable variables={variables} />
-        </div>
+    <div className="h-full overflow-y-auto pb-[100px]">
+      <div className="min-h-full">
+        <VariableTable variables={variables} />
       </div>
     </div>
   );