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 d7a208705..67db2ba16 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
@@ -24,5 +24,9 @@ export default async function ReleaseChannelsPage(props: {
   const releaseChannels =
     await api.deployment.releaseChannel.list.byDeploymentId(deployment.id);
 
-  return <ReleaseChannelsTable releaseChannels={releaseChannels} />;
+  return (
+    <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-full overflow-auto">
+      <ReleaseChannelsTable releaseChannels={releaseChannels} />
+    </div>
+  );
 }
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 289f78b86..a76f1a03a 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
@@ -42,7 +42,7 @@ export default async function DeploymentLayout(props: {
   const url = (tab: string) =>
     `/${params.workspaceSlug}/systems/${params.systemSlug}/deployments/${params.deploymentSlug}/${tab}`;
   return (
-    <div className="h-full w-full">
+    <div className="flex h-full w-full flex-col">
       <PageHeader className="justify-between">
         <div className="flex shrink-0 items-center gap-4">
           <Link
@@ -91,7 +91,7 @@ export default async function DeploymentLayout(props: {
             </SidebarGroup>
           </SidebarContent>
         </Sidebar>
-        <SidebarInset className="h-full w-[calc(100%-255px-1px)]">
+        <SidebarInset className="h-[calc(100vh-56px-64px-2px)] w-[calc(100%-255px-1px)]">
           {props.children}
         </SidebarInset>
       </SidebarProvider>
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 ee893e641..4db3125fe 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
@@ -1,143 +1,8 @@
-import type { Deployment } from "@ctrlplane/db/schema";
-import type {
-  ComparisonCondition,
-  ResourceCondition,
-} from "@ctrlplane/validators/resources";
 import React from "react";
 import { notFound } from "next/navigation";
-import LZString from "lz-string";
-import { isPresent } from "ts-is-present";
-
-import { Card } from "@ctrlplane/ui/card";
-import {
-  ResourceFilterType,
-  ResourceOperator,
-} from "@ctrlplane/validators/resources";
 
 import { api } from "~/trpc/server";
-import { VariableTable } from "../variables/VariableTable";
 import { EditDeploymentSection } from "./EditDeploymentSection";
-import { SidebarSection } from "./SettingsSidebar";
-
-const Variables: React.FC<{
-  deployment: Deployment;
-  workspaceId: string;
-}> = async ({ deployment, workspaceId }) => {
-  const variablesByDeployment = await api.deployment.variable.byDeploymentId(
-    deployment.id,
-  );
-
-  const systemResourcesFilter: ComparisonCondition = {
-    type: ResourceFilterType.Comparison,
-    operator: ResourceOperator.Or,
-    conditions: await api.environment
-      .bySystemId(deployment.systemId)
-      .then((envs) => envs.map((e) => e.resourceFilter).filter(isPresent)),
-  };
-
-  const variablesPromises = variablesByDeployment.map(async (variable) => {
-    const defaultValue = variable.values.find(
-      (v) => v.id === variable.deploymentVariable.defaultValueId,
-    );
-    const rest = variable.values.filter((v) => v.id !== defaultValue?.id);
-
-    const valuesPromises = rest.map(async (v) => {
-      if (v.resourceFilter == null)
-        return {
-          ...v,
-          resourceCount: 0,
-          resources: [],
-          filterHash: "",
-        };
-
-      const filterHash = LZString.compressToEncodedURIComponent(
-        JSON.stringify(v.resourceFilter),
-      );
-
-      const filter: ComparisonCondition = {
-        type: ResourceFilterType.Comparison,
-        operator: ResourceOperator.And,
-        conditions: [systemResourcesFilter, v.resourceFilter],
-      };
-
-      const resources = await api.resource.byWorkspaceId.list({
-        workspaceId,
-        filter,
-        limit: 5,
-      });
-
-      return {
-        ...v,
-        resourceCount: resources.total,
-        resources: resources.items,
-        filterHash,
-      };
-    });
-
-    const values = await Promise.all(valuesPromises);
-
-    if (defaultValue != null) {
-      const restFilters = rest.map((v) => v.resourceFilter).filter(isPresent);
-
-      const filter: ResourceCondition =
-        restFilters.length === 0
-          ? systemResourcesFilter
-          : {
-              type: ResourceFilterType.Comparison,
-              operator: ResourceOperator.And,
-              conditions: [
-                systemResourcesFilter,
-                {
-                  type: ResourceFilterType.Comparison,
-                  operator: ResourceOperator.Or,
-                  not: true,
-                  conditions: restFilters,
-                },
-              ],
-            };
-
-      const defaultResources = await api.resource.byWorkspaceId.list({
-        workspaceId,
-        filter,
-        limit: 5,
-      });
-
-      const filterHash = LZString.compressToEncodedURIComponent(
-        JSON.stringify(filter),
-      );
-
-      values.unshift({
-        ...defaultValue,
-        resourceCount: defaultResources.total,
-        resources: defaultResources.items,
-        filterHash,
-      });
-    }
-
-    return {
-      ...variable.deploymentVariable,
-      values,
-    };
-  });
-
-  const variables = await Promise.all(variablesPromises);
-
-  return (
-    <div className="container m-8 mx-auto max-w-3xl space-y-2">
-      <div>
-        <h2 id="variables">Variables</h2>
-        <div className="text-xs text-muted-foreground">
-          Deployment variables allow you to configure resource-specific settings
-          for your application. Learn more about variable precedence here.
-        </div>
-      </div>
-
-      <Card className="pb-2">
-        <VariableTable variables={variables} />
-      </Card>
-    </div>
-  );
-};
 
 export default async function DeploymentPage(props: {
   params: Promise<{
@@ -155,23 +20,12 @@ export default async function DeploymentPage(props: {
   if (deployment == null) return notFound();
 
   return (
-    <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 className="container mx-auto max-w-5xl overflow-y-auto">
+      <EditDeploymentSection
+        deployment={deployment}
+        systems={systems}
+        workspaceId={workspaceId}
+      />
     </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 fefb3f053..1d7dfbe16 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
@@ -38,10 +38,12 @@ export default async function DeploymentPage(props: PageProps) {
       )
     : null;
   return (
-    <DeploymentPageContent
-      deployment={deployment}
-      environments={environments}
-      releaseChannel={releaseChannel}
-    />
+    <div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 h-full overflow-auto">
+      <DeploymentPageContent
+        deployment={deployment}
+        environments={environments}
+        releaseChannel={releaseChannel}
+      />
+    </div>
   );
 }
diff --git a/apps/webservice/src/app/globals.css b/apps/webservice/src/app/globals.css
index cbac91966..deeaa9744 100644
--- a/apps/webservice/src/app/globals.css
+++ b/apps/webservice/src/app/globals.css
@@ -44,7 +44,7 @@
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
+    --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;