diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/DeleteSystemDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/system/DeleteSystemDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/DeleteSystemDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(appv2)/_components/system/DeleteSystemDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/settings/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/settings/page.tsx
index f3322fc75..1e14715af 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/settings/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/(sidebar)/settings/page.tsx
@@ -12,7 +12,7 @@ import { Separator } from "@ctrlplane/ui/separator";
 import { SidebarTrigger } from "@ctrlplane/ui/sidebar";
 
 import { PageHeader } from "~/app/[workspaceSlug]/(appv2)/_components/PageHeader";
-import { DeleteSystemDialog } from "~/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/DeleteSystemDialog";
+import { DeleteSystemDialog } from "~/app/[workspaceSlug]/(appv2)/_components/system/DeleteSystemDialog";
 import { Sidebars } from "~/app/[workspaceSlug]/sidebars";
 import { api } from "~/trpc/server";
 import { GeneralSettings } from "./GeneralSettings";
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/deployments/environment-cell/DeploymentEnvironmentCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/deployments/environment-cell/DeploymentEnvironmentCell.tsx
index c8fbf6070..1b68493d7 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/deployments/environment-cell/DeploymentEnvironmentCell.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/deployments/environment-cell/DeploymentEnvironmentCell.tsx
@@ -11,6 +11,7 @@ import {
 import { useInView } from "react-intersection-observer";
 
 import { Button } from "@ctrlplane/ui/button";
+import { Skeleton } from "@ctrlplane/ui/skeleton";
 
 import { api } from "~/trpc/react";
 import { ApprovalDialog } from "../../release/ApprovalDialog";
@@ -49,7 +50,15 @@ const DeploymentEnvironmentCell: React.FC<DeploymentEnvironmentCellProps> = ({
   const isLoading = isStatusesLoading || isReleaseLoading;
 
   if (isLoading)
-    return <p className="text-xs text-muted-foreground/70">Loading...</p>;
+    return (
+      <div className="flex h-full w-full items-center gap-2">
+        <Skeleton className="h-6 w-6 rounded-full" />
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[16px] w-20 rounded-full" />
+          <Skeleton className="h-3 w-20 rounded-full" />
+        </div>
+      </div>
+    );
 
   if (release == null)
     return (
@@ -185,7 +194,15 @@ export const LazyDeploymentEnvironmentCell: React.FC<
 
   return (
     <div className="flex w-full items-center justify-center" ref={ref}>
-      {!inView && <p className="text-xs text-muted-foreground">Loading...</p>}
+      {!inView && (
+        <div className="flex h-full w-full items-center gap-2">
+          <Skeleton className="h-6 w-6 rounded-full" />
+          <div className="flex flex-col gap-2">
+            <Skeleton className="h-[16px] w-20 rounded-full" />
+            <Skeleton className="h-3 w-20 rounded-full" />
+          </div>
+        </div>
+      )}
       {inView && <DeploymentEnvironmentCell {...props} />}
     </div>
   );
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/page.tsx
index fc4754f87..0753ef4f5 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/page.tsx
@@ -5,7 +5,7 @@ import { Button } from "@ctrlplane/ui/button";
 import { api } from "~/trpc/server";
 import { CreateDeploymentDialog } from "../_components/deployments/CreateDeployment";
 import { CreateSystemDialog } from "../../(app)/_components/CreateSystem";
-import { SystemDeploymentTable } from "./[systemSlug]/_components/SystemDeploymentTable";
+import { SystemDeploymentTable } from "./system-deployment-table/SystemDeploymentTable";
 
 export default async function SystemsPage(props: {
   params: Promise<{ workspaceSlug: string }>;
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/system-deployment-table/SystemDeploymentSkeleton.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/system-deployment-table/SystemDeploymentSkeleton.tsx
new file mode 100644
index 000000000..fc79ee8b4
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/system-deployment-table/SystemDeploymentSkeleton.tsx
@@ -0,0 +1,48 @@
+import { Skeleton } from "@ctrlplane/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ctrlplane/ui/table";
+
+export const SystemDeploymentSkeleton: React.FC = () => (
+  <Table className="w-full min-w-max bg-background">
+    <TableHeader className="[&_tr]:border-0">
+      <TableRow className="hover:bg-transparent">
+        <TableHead className="w-[350px] rounded-tl-md py-4 pl-6">
+          <Skeleton className="h-4 w-40 rounded-full" />
+        </TableHead>
+        {[...Array(3)].map((_, i) => (
+          <TableHead key={i} className="w-[220px]">
+            <Skeleton className="h-4 w-20 rounded-full" />
+          </TableHead>
+        ))}
+        <TableCell className="flex-grow" />
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {[...Array(2)].map((_, i) => (
+        <TableRow key={i} className="border-0 hover:bg-transparent">
+          <TableCell className="h-[70px] w-[350px] max-w-[300px] pl-6">
+            <Skeleton className="h-4 w-40 rounded-full" />
+          </TableCell>
+          {[...Array(3)].map((_, j) => (
+            <TableCell key={j} className="h-[70px] w-[220px]">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-6 w-6 rounded-full" />
+                <div className="flex flex-col gap-2">
+                  <Skeleton className="h-3 w-20 rounded-full" />
+                  <Skeleton className="h-3 w-20 rounded-full" />
+                </div>
+              </div>
+            </TableCell>
+          ))}
+          <TableCell className="flex-grow" />
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+);
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/SystemDeploymentTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/system-deployment-table/SystemDeploymentTable.tsx
similarity index 77%
rename from apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/SystemDeploymentTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/system-deployment-table/SystemDeploymentTable.tsx
index 77d595f36..b0f13db8f 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/SystemDeploymentTable.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/system-deployment-table/SystemDeploymentTable.tsx
@@ -14,8 +14,9 @@ import {
 } from "@ctrlplane/ui/dropdown-menu";
 
 import { CreateDeploymentDialog } from "~/app/[workspaceSlug]/(appv2)/_components/deployments/CreateDeployment";
+import { DeleteSystemDialog } from "~/app/[workspaceSlug]/(appv2)/_components/system/DeleteSystemDialog";
 import { api } from "~/trpc/react";
-import { DeleteSystemDialog } from "./DeleteSystemDialog";
+import { SystemDeploymentSkeleton } from "./SystemDeploymentSkeleton";
 import DeploymentTable from "./TableDeployments";
 
 export const SystemDeploymentTable: React.FC<{
@@ -30,6 +31,8 @@ export const SystemDeploymentTable: React.FC<{
     enabled: inView,
   });
 
+  const isLoading = environments.isLoading || deployments.isLoading;
+
   return (
     <div key={system.id} className="space-y-4">
       <div className="flex w-full items-center justify-between">
@@ -70,14 +73,21 @@ export const SystemDeploymentTable: React.FC<{
         </DropdownMenu>
       </div>
 
-      <div ref={ref} className="overflow-hidden rounded-md border">
-        <DeploymentTable
-          workspace={workspace}
-          systemSlug={system.slug}
-          environments={environments.data ?? []}
-          deployments={deployments.data ?? []}
-        />
-      </div>
+      {isLoading && (
+        <div className="rounded-md border">
+          <SystemDeploymentSkeleton />
+        </div>
+      )}
+      {!isLoading && (
+        <div ref={ref} className="overflow-hidden rounded-md border">
+          <DeploymentTable
+            workspace={workspace}
+            systemSlug={system.slug}
+            environments={environments.data ?? []}
+            deployments={deployments.data ?? []}
+          />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/TableDeployments.tsx b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/system-deployment-table/TableDeployments.tsx
similarity index 95%
rename from apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/TableDeployments.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/system-deployment-table/TableDeployments.tsx
index 28e2fbc7e..e5bfc5bf9 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/[systemSlug]/_components/TableDeployments.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(appv2)/systems/system-deployment-table/TableDeployments.tsx
@@ -43,7 +43,7 @@ const EnvHeader: React.FC<{
 
   const envUrl = `/${workspaceSlug}/systems?environment_id=${env.id}`;
   return (
-    <TableHead className="w-fit p-2" key={env.id}>
+    <TableHead className="w-[220px] p-2" key={env.id}>
       <Link
         href={envUrl}
         className="flex w-fit items-center gap-2 rounded-md px-2 py-1 text-white hover:bg-secondary/50"
@@ -72,7 +72,7 @@ const DeploymentTable: React.FC<{
       <Table className="w-full min-w-max bg-background">
         <TableHeader className="[&_tr]:border-0">
           <TableRow className="hover:bg-transparent">
-            <TableHead className="sticky left-0 z-10 rounded-tl-md py-4 pl-6 backdrop-blur-lg">
+            <TableHead className="sticky left-0 z-10 w-[350px] rounded-tl-md py-4 pl-6 backdrop-blur-lg">
               Deployments
             </TableHead>
             {environments.map((env) => (
@@ -82,6 +82,7 @@ const DeploymentTable: React.FC<{
                 workspaceSlug={workspace.slug}
               />
             ))}
+            <TableCell className="flex-grow" />
           </TableRow>
         </TableHeader>
         <TableBody>