diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/EnvironmentDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/EnvironmentDropdown.tsx
index 2a208b36a..5531c6845 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/EnvironmentDropdown.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/EnvironmentDropdown.tsx
@@ -1,14 +1,28 @@
 import type * as SCHEMA from "@ctrlplane/db/schema";
 import { useState } from "react";
-import { IconTrash } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import {
+  IconChartBar,
+  IconClipboardCopy,
+  IconExternalLink,
+  IconLock,
+  IconRefresh,
+  IconSettings,
+  IconTrash,
+  IconVariable,
+} from "@tabler/icons-react";
 
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@ctrlplane/ui/dropdown-menu";
+import { toast } from "@ctrlplane/ui/toast";
 
+import { urls } from "~/app/urls";
 import { DeleteEnvironmentDialog } from "./DeleteEnvironmentDialog";
 
 type EnvironmentDropdownProps = {
@@ -21,10 +35,94 @@ export const EnvironmentDropdown: React.FC<EnvironmentDropdownProps> = ({
   children,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const router = useRouter();
+  const { workspaceSlug, systemSlug } = useParams<{
+    workspaceSlug: string;
+    systemSlug: string;
+  }>();
+
+  // Use URL builder for constructing environment URLs
+  const environmentUrls = urls
+    .workspace(workspaceSlug)
+    .system(systemSlug)
+    .environment(environment.id);
+
+  const copyEnvironmentId = () => {
+    navigator.clipboard.writeText(environment.id);
+    toast.success("Environment ID copied", {
+      description: environment.id,
+      duration: 2000,
+    });
+  };
+
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent onClick={(e) => e.stopPropagation()}>
+      <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            className="flex cursor-pointer items-center gap-2"
+            onClick={() => router.push(environmentUrls.baseUrl())}
+          >
+            <IconExternalLink className="h-4 w-4" />
+            View Details
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            className="flex cursor-pointer items-center gap-2"
+            onClick={() => router.push(environmentUrls.deployments())}
+          >
+            <IconChartBar className="h-4 w-4" />
+            View Deployments
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            className="flex cursor-pointer items-center gap-2"
+            onClick={() => router.push(environmentUrls.resources())}
+          >
+            <IconRefresh className="h-4 w-4" />
+            View Resources
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            className="flex cursor-pointer items-center gap-2"
+            onClick={() => router.push(environmentUrls.settings())}
+          >
+            <IconSettings className="h-4 w-4" />
+            Settings
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            className="flex cursor-pointer items-center gap-2"
+            onClick={() => router.push(environmentUrls.policies())}
+          >
+            <IconLock className="h-4 w-4" />
+            Policies
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            className="flex cursor-pointer items-center gap-2"
+            onClick={() => router.push(environmentUrls.variables())}
+          >
+            <IconVariable className="h-4 w-4" />
+            Variables
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            className="flex cursor-pointer items-center gap-2"
+            onClick={copyEnvironmentId}
+          >
+            <IconClipboardCopy className="h-4 w-4" />
+            Copy ID
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
         <DeleteEnvironmentDialog environment={environment}>
           <DropdownMenuItem
             onSelect={(e) => e.preventDefault()}
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/EnvironmentRow.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/EnvironmentRow.tsx
index 0237e5833..e29e841b2 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/EnvironmentRow.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/EnvironmentRow.tsx
@@ -1,15 +1,18 @@
 "use client";
 
 import type { RouterOutputs } from "@ctrlplane/api";
-import React from "react";
+import React, { useCallback } from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { IconDots } from "@tabler/icons-react";
+import { IconCheck, IconCopy, IconDots } from "@tabler/icons-react";
+import { subWeeks } from "date-fns";
 import { useInView } from "react-intersection-observer";
 
 import { cn } from "@ctrlplane/ui";
 import { Button } from "@ctrlplane/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@ctrlplane/ui/card";
 import { Skeleton } from "@ctrlplane/ui/skeleton";
+import { toast } from "@ctrlplane/ui/toast";
 
 import { urls } from "~/app/urls";
 import { api } from "~/trpc/react";
@@ -72,6 +75,171 @@ const LazyEnvironmentHealth: React.FC<EnvironmentHealthProps> = (props) => {
   );
 };
 
+export const EnvironmentCard: React.FC<{
+  environment: Environment;
+}> = ({ environment }) => {
+  const { workspaceSlug, systemSlug } = useParams<{
+    workspaceSlug: string;
+    systemSlug: string;
+  }>();
+
+  const allResourcesQ = api.resource.byWorkspaceId.list.useQuery(
+    {
+      workspaceId: environment.system.workspaceId,
+      filter: environment.resourceFilter ?? undefined,
+      limit: 0,
+    },
+    { enabled: environment.resourceFilter != null },
+  );
+
+  const unhealthyResourcesQ = api.environment.stats.unhealthyResources.useQuery(
+    environment.id,
+  );
+
+  const endDate = new Date();
+  const startDate = subWeeks(endDate, 1);
+  const failureRateQ = api.environment.stats.failureRate.useQuery({
+    environmentId: environment.id,
+    startDate,
+    endDate,
+  });
+
+  const unhealthyCount = unhealthyResourcesQ.data?.length ?? 0;
+  const totalCount = allResourcesQ.data?.total ?? 0;
+  const healthyCount = totalCount - unhealthyCount;
+  const status =
+    totalCount > 0
+      ? unhealthyCount === 0
+        ? "Healthy"
+        : "Issues Detected"
+      : "No Resources";
+  const statusColor =
+    totalCount > 0 ? (unhealthyCount === 0 ? "green" : "red") : "neutral";
+
+  const environmentUrl = urls
+    .workspace(workspaceSlug)
+    .system(systemSlug)
+    .environment(environment.id)
+    .baseUrl();
+
+  return (
+    <Link href={environmentUrl} className="block">
+      <Card className="transition-shadow duration-300 hover:shadow-md">
+        <CardHeader className="flex flex-row items-center justify-between pb-2">
+          <div className="flex items-center space-x-2">
+            <div
+              className={cn(
+                "h-3 w-3 animate-pulse rounded-full",
+                statusColor === "green"
+                  ? "bg-green-400"
+                  : statusColor === "red"
+                    ? "bg-red-400"
+                    : "bg-neutral-400",
+              )}
+            />
+            <CardTitle className="text-sm font-medium">
+              {environment.name}
+            </CardTitle>
+          </div>
+          <div className="flex items-center">
+            <span
+              className={cn(
+                "rounded-full px-2.5 py-1 text-xs font-semibold",
+                statusColor === "green"
+                  ? "bg-green-500/20 text-green-400"
+                  : statusColor === "red"
+                    ? "bg-red-500/20 text-red-400"
+                    : "bg-neutral-500/20 text-neutral-400",
+              )}
+            >
+              {status}
+            </span>
+            <div className="ml-2">
+              <EnvironmentDropdown environment={environment}>
+                <Button variant="ghost" size="icon" className="h-6 w-6">
+                  <IconDots className="h-4 w-4" />
+                </Button>
+              </EnvironmentDropdown>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="mt-4 space-y-3">
+          <div className="flex justify-between">
+            <span className="text-sm text-muted-foreground">Resources</span>
+            <span className="text-sm font-medium">
+              {totalCount > 0 ? `${totalCount} total` : "None"}
+            </span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-sm text-muted-foreground">Health</span>
+            <span
+              className={cn(
+                "text-sm font-medium",
+                statusColor === "green"
+                  ? "text-green-400"
+                  : statusColor === "red"
+                    ? "text-red-400"
+                    : "text-neutral-400",
+              )}
+            >
+              {totalCount > 0
+                ? `${healthyCount}/${totalCount} Healthy`
+                : "No resources"}
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">
+              Environment ID
+            </span>
+            <div className="flex items-center gap-1">
+              <span className="text-sm font-medium">
+                {environment.id.substring(0, 8)}...
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5 rounded-full hover:bg-neutral-800/50"
+                onClick={useCallback(
+                  (e: React.MouseEvent<HTMLButtonElement>) => {
+                    e.preventDefault();
+                    navigator.clipboard.writeText(environment.id);
+                    toast.success("Environment ID copied to clipboard", {
+                      description: environment.id,
+                      duration: 2000,
+                      icon: <IconCheck className="h-4 w-4" />,
+                    });
+                  },
+                  [environment.id],
+                )}
+                title="Copy environment ID"
+              >
+                <IconCopy className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-sm text-muted-foreground">Failure Rate</span>
+            {!failureRateQ.isLoading && failureRateQ.data != null && (
+              <span
+                className={cn(
+                  "text-sm font-medium",
+                  failureRateQ.data > 5 ? "text-red-400" : "text-green-400",
+                )}
+              >
+                {Number(failureRateQ.data).toFixed(0)}% failure rate
+              </span>
+            )}
+            {(failureRateQ.isLoading || failureRateQ.data == null) && (
+              <span className="text-sm font-medium">-</span>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+};
+
 export const EnvironmentRow: React.FC<{
   environment: Environment;
 }> = ({ environment }) => {
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/page.tsx
index 478239892..7abd63f55 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(sidebar)/environments/page.tsx
@@ -7,7 +7,7 @@ import { PageHeader } from "~/app/[workspaceSlug]/(app)/_components/PageHeader";
 import { api } from "~/trpc/server";
 import { SystemBreadcrumb } from "../_components/SystemBreadcrumb";
 import { CreateEnvironmentDialog } from "./CreateEnvironmentDialog";
-import { EnvironmentRow } from "./EnvironmentRow";
+import { EnvironmentCard } from "./EnvironmentRow";
 
 export const generateMetadata = async (props: {
   params: { workspaceSlug: string; systemSlug: string };
@@ -46,9 +46,19 @@ export default async function EnvironmentsPage(props: {
         </CreateEnvironmentDialog>
       </PageHeader>
 
-      {environments.map((environment) => (
-        <EnvironmentRow key={environment.id} environment={environment} />
-      ))}
+      <div className="m-2 grid grid-cols-1 gap-6 p-4 md:grid-cols-2 lg:grid-cols-3">
+        {environments.map((environment) => (
+          <EnvironmentCard key={environment.id} environment={environment} />
+        ))}
+
+        {environments.length === 0 && (
+          <div className="col-span-full flex h-32 items-center justify-center rounded-lg border border-dashed border-neutral-800">
+            <p className="text-sm text-neutral-400">
+              No environments found. Create your first environment.
+            </p>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/DeploymentPerformance.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/DeploymentPerformance.tsx
new file mode 100644
index 000000000..25f46e4e0
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/DeploymentPerformance.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { format } from "date-fns";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@ctrlplane/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ctrlplane/ui/table";
+
+type DeploymentPerformanceProps = {
+  deployments: any[];
+  startDate: Date;
+  endDate: Date;
+};
+
+export const DeploymentPerformance: React.FC<DeploymentPerformanceProps> = ({
+  deployments,
+  startDate,
+  endDate,
+}) => {
+  const router = useRouter();
+
+  const formatDuration = (seconds: number | null | undefined) => {
+    if (!seconds) return "N/A";
+
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+
+    if (minutes > 0) {
+      return `${minutes}m ${remainingSeconds}s`;
+    }
+    return `${remainingSeconds}s`;
+  };
+
+  const handleRowClick = (systemSlug: string, deploymentSlug: string) => {
+    // Navigate to the deployment details
+    router.push(`/${systemSlug}/deployments/${deploymentSlug}`);
+  };
+
+  return (
+    <Card className="shadow-sm">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Deployment Performance</CardTitle>
+          <span className="text-xs text-muted-foreground">
+            {format(startDate, "MMM d")} - {format(endDate, "MMM d, yyyy")}
+          </span>
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Deployment</TableHead>
+                <TableHead>System</TableHead>
+                <TableHead className="text-right">Jobs</TableHead>
+                <TableHead>Success</TableHead>
+                <TableHead>Avg</TableHead>
+                <TableHead>p90</TableHead>
+                <TableHead>Last Run</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {deployments.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={7} className="py-4 text-center">
+                    <span className="text-sm text-muted-foreground">
+                      No deployments found
+                    </span>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                deployments.map((deployment) => (
+                  <TableRow
+                    key={deployment.id}
+                    className="cursor-pointer hover:bg-muted/10"
+                    onClick={() =>
+                      handleRowClick(deployment.systemSlug, deployment.slug)
+                    }
+                  >
+                    <TableCell className="font-medium">
+                      {deployment.name}
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      {deployment.systemName}
+                    </TableCell>
+                    <TableCell className="text-right text-sm">
+                      {typeof deployment.totalJobs === "number"
+                        ? String(deployment.totalJobs).replace(
+                            /\B(?=(\d{3})+(?!\d))/g,
+                            ",",
+                          )
+                        : 0}
+                    </TableCell>
+                    <TableCell>
+                      {deployment.successRate ? (
+                        <div
+                          className={`text-sm ${
+                            deployment.successRate >= 90
+                              ? "text-green-600"
+                              : deployment.successRate >= 70
+                                ? "text-yellow-600"
+                                : "text-red-600"
+                          }`}
+                        >
+                          {(deployment.successRate as number).toFixed(1)}%
+                        </div>
+                      ) : (
+                        <span className="text-sm text-muted-foreground">-</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="font-mono text-sm">
+                      {formatDuration(deployment.p50) !== "N/A"
+                        ? formatDuration(deployment.p50)
+                        : "-"}
+                    </TableCell>
+                    <TableCell className="font-mono text-sm">
+                      {formatDuration(deployment.p90) !== "N/A"
+                        ? formatDuration(deployment.p90)
+                        : "-"}
+                    </TableCell>
+                    <TableCell>
+                      {deployment.lastRunAt ? (
+                        <div className="text-sm">
+                          {format(
+                            new Date(deployment.lastRunAt),
+                            "MMM d, HH:mm",
+                          )}
+                        </div>
+                      ) : (
+                        <span className="text-sm text-muted-foreground">-</span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/InsightsFilters.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/InsightsFilters.tsx
new file mode 100644
index 000000000..850bc27e6
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/InsightsFilters.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { useCallback } from "react";
+import { useRouter } from "next/navigation";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ctrlplane/ui/select";
+
+type System = {
+  id: string;
+  name: string;
+  slug: string;
+};
+
+type InsightsFiltersProps = {
+  workspaceSlug: string;
+  systems: System[];
+  currentSystemId?: string;
+  currentTimeRange?: string;
+};
+
+export const InsightsFilters: React.FC<InsightsFiltersProps> = ({
+  workspaceSlug,
+  systems,
+  currentSystemId,
+  currentTimeRange = "30",
+}) => {
+  const router = useRouter();
+
+  const handleSystemChange = useCallback(
+    (value: string) => {
+      const params = new URLSearchParams();
+      if (value !== "all") {
+        params.set("systemId", value);
+      }
+      if (currentTimeRange !== "30") {
+        params.set("timeRange", currentTimeRange);
+      }
+      router.push(`/${workspaceSlug}/insights?${params.toString()}`);
+    },
+    [router, workspaceSlug, currentTimeRange],
+  );
+
+  const handleTimeRangeChange = useCallback(
+    (value: string) => {
+      const params = new URLSearchParams();
+      if (currentSystemId) {
+        params.set("systemId", currentSystemId);
+      }
+      if (value !== "30") {
+        params.set("timeRange", value);
+      }
+      router.push(`/${workspaceSlug}/insights?${params.toString()}`);
+    },
+    [router, workspaceSlug, currentSystemId],
+  );
+
+  return (
+    <div className="flex items-center gap-3">
+      <Select
+        defaultValue={currentTimeRange}
+        onValueChange={handleTimeRangeChange}
+      >
+        <SelectTrigger className="h-9 w-[140px]">
+          <SelectValue placeholder="Time Range" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="7">Last 7 days</SelectItem>
+          <SelectItem value="14">Last 14 days</SelectItem>
+          <SelectItem value="30">Last 30 days</SelectItem>
+          <SelectItem value="60">Last 60 days</SelectItem>
+          <SelectItem value="90">Last 90 days</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Select
+        defaultValue={currentSystemId ?? "all"}
+        onValueChange={handleSystemChange}
+      >
+        <SelectTrigger className="h-9 w-[180px]">
+          <SelectValue placeholder="All Systems" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Systems</SelectItem>
+          {systems.map((system) => (
+            <SelectItem key={system.id} value={system.id}>
+              {system.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/ResourceTypeBreakdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/ResourceTypeBreakdown.tsx
new file mode 100644
index 000000000..382a398ff
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/ResourceTypeBreakdown.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Cell,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+} from "recharts";
+import colors from "tailwindcss/colors";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@ctrlplane/ui/card";
+import { Skeleton } from "@ctrlplane/ui/skeleton";
+import { Tabs, TabsList, TabsTrigger } from "@ctrlplane/ui/tabs";
+
+import { api } from "~/trpc/react";
+
+type ResourceTypeBreakdownProps = {
+  workspaceId: string;
+  systemId?: string;
+};
+
+const COLORS = [
+  colors.blue[500],
+  colors.purple[500],
+  colors.green[500],
+  colors.yellow[500],
+  colors.red[500],
+  colors.indigo[500],
+  colors.pink[500],
+  colors.cyan[500],
+  colors.amber[500],
+  colors.emerald[500],
+];
+
+export const ResourceTypeBreakdown: React.FC<ResourceTypeBreakdownProps> = ({
+  workspaceId,
+  systemId,
+}) => {
+  const [groupBy, setGroupBy] = useState<string>("kind");
+
+  const { data: resources, isLoading } =
+    api.resource.byWorkspaceId.list.useQuery({
+      workspaceId,
+      limit: 500,
+    });
+
+  const [chartData, setChartData] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (!resources) return;
+
+    // Filter by system if systemId is provided
+    const filteredResources = resources.items;
+
+    // Group resources by the selected attribute
+    const groupedResources = filteredResources.reduce(
+      (acc, resource) => {
+        let key;
+        if (groupBy === "kind") {
+          key = resource.kind || "Unknown";
+        } else if (groupBy === "provider") {
+          key = resource.provider ?? "Unknown";
+        } else if (groupBy === "apiVersion") {
+          key = resource.version || "Unknown";
+        }
+
+        if (!acc[key as string]) {
+          acc[key as string] = (acc[key as string] ?? 0) + 1;
+        }
+        return acc;
+      },
+      {} as Record<string, number>,
+    );
+
+    // Convert to chart data
+    const data = Object.entries(groupedResources)
+      .map(([name, value]) => ({ name, value }))
+      .sort((a, b) => b.value - a.value);
+
+    setChartData(data);
+  }, [resources, groupBy, systemId]);
+
+  if (isLoading) {
+    return (
+      <Card className="rounded-md">
+        <CardHeader>
+          <CardTitle>Resource Breakdown</CardTitle>
+        </CardHeader>
+        <CardContent className="h-[400px]">
+          <Skeleton className="h-full w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="shadow-sm">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Resource Breakdown</CardTitle>
+          <Tabs
+            defaultValue="kind"
+            onValueChange={setGroupBy}
+            className="w-auto"
+          >
+            <TabsList className="h-8">
+              <TabsTrigger value="kind" className="h-7 px-3 text-xs">
+                Kind
+              </TabsTrigger>
+              <TabsTrigger value="provider" className="h-7 px-3 text-xs">
+                Provider
+              </TabsTrigger>
+              <TabsTrigger value="apiVersion" className="h-7 px-3 text-xs">
+                Version
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      </CardHeader>
+      <CardContent className="h-[350px]">
+        {chartData.length === 0 ? (
+          <div className="flex h-full items-center justify-center">
+            <p className="text-sm text-muted-foreground">
+              No resource data available
+            </p>
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={chartData}
+                cx="50%"
+                cy="45%"
+                labelLine={false}
+                outerRadius={130}
+                innerRadius={60}
+                fill="#8884d8"
+                dataKey="value"
+                paddingAngle={1}
+                label={({
+                  name,
+                  percent,
+                }: {
+                  name: string;
+                  percent: number;
+                }) =>
+                  percent > 0.05
+                    ? `${name.length > 12 ? `${name.substring(0, 12)}...` : name}`
+                    : ""
+                }
+              >
+                {chartData.map((entry, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={COLORS[index % COLORS.length]}
+                    strokeWidth={0.5}
+                  />
+                ))}
+              </Pie>
+              <Tooltip
+                formatter={(value: number) => [`${value} resources`, "Count"]}
+                labelFormatter={(label) => `${label}`}
+                contentStyle={{
+                  borderRadius: "4px",
+                  boxShadow: "0 1px 4px rgba(0,0,0,0.1)",
+                }}
+              />
+              <Legend
+                layout="horizontal"
+                verticalAlign="bottom"
+                align="center"
+                wrapperStyle={{ paddingTop: "10px", fontSize: "12px" }}
+                formatter={(value: string) =>
+                  value.length > 20 ? `${value.substring(0, 20)}...` : value
+                }
+              />
+            </PieChart>
+          </ResponsiveContainer>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/SystemHealthOverview.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/SystemHealthOverview.tsx
new file mode 100644
index 000000000..650caaa8f
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/SystemHealthOverview.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import colors from "tailwindcss/colors";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@ctrlplane/ui/card";
+import { Skeleton } from "@ctrlplane/ui/skeleton";
+
+// import { JobStatus } from "@ctrlplane/validators/jobs";
+
+import { api } from "~/trpc/react";
+
+type SystemHealthOverviewProps = {
+  systemId: string;
+  workspaceId: string;
+};
+
+export const SystemHealthOverview: React.FC<SystemHealthOverviewProps> = ({
+  systemId,
+  // workspaceId,
+}) => {
+  const { data: system, isLoading: isLoadingSystem } =
+    api.system.byId.useQuery(systemId);
+  const { data: resources, isLoading: isLoadingResources } =
+    api.system.resources.useQuery({
+      systemId,
+      limit: 100,
+    });
+
+  const { data: environments, isLoading: isLoadingEnvironments } =
+    api.environment.bySystemId.useQuery(systemId);
+
+  const [healthData, setHealthData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Wait for all data to load
+    if (isLoadingSystem || isLoadingResources || isLoadingEnvironments) {
+      setIsLoading(true);
+      return;
+    }
+
+    setIsLoading(false);
+
+    // Format data for the environments health chart
+    if (environments && resources) {
+      const envHealthData = environments.map((env) => {
+        const envResources = resources.items.filter((_resource) => {
+          // This is a simplified check - you'd need to implement logic to properly
+          // check if a resource belongs to an environment based on filter criteria
+          return true as boolean;
+        });
+
+        const total = envResources.length;
+        const healthy = 0;
+        const unhealthy = total - healthy;
+
+        return {
+          name: env.name,
+          healthy,
+          unhealthy,
+          total,
+        };
+      });
+
+      setHealthData(envHealthData);
+    }
+  }, [
+    system,
+    resources,
+    environments,
+    isLoadingSystem,
+    isLoadingResources,
+    isLoadingEnvironments,
+  ]);
+
+  if (isLoading === true) {
+    return (
+      <Card className="shadow-sm">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base">System Health Overview</CardTitle>
+        </CardHeader>
+        <CardContent className="h-[350px]">
+          <div className="flex h-full w-full items-center justify-center">
+            <Skeleton className="h-4/5 w-4/5" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const systemName = system?.name ?? "Selected System";
+
+  return (
+    <Card className="shadow-sm">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">System Health Overview</CardTitle>
+          <span className="text-xs text-muted-foreground">{systemName}</span>
+        </div>
+      </CardHeader>
+      <CardContent className="h-[350px]">
+        {healthData.length === 0 ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="text-center">
+              <p className="text-sm text-muted-foreground">
+                No health data available
+              </p>
+            </div>
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={healthData}
+              margin={{
+                top: 10,
+                right: 10,
+                left: 10,
+                bottom: 20,
+              }}
+              barSize={40}
+            >
+              <CartesianGrid
+                strokeDasharray="3 3"
+                vertical={false}
+                opacity={0.2}
+              />
+              <XAxis
+                dataKey="name"
+                axisLine={false}
+                tickLine={false}
+                fontSize={12}
+              />
+              <YAxis axisLine={false} tickLine={false} fontSize={11} />
+              <Tooltip
+                formatter={(value, name) => [
+                  value,
+                  name === "healthy" ? "Healthy" : "Unhealthy",
+                ]}
+                contentStyle={{ borderRadius: "4px", fontSize: "12px" }}
+              />
+              <Legend
+                wrapperStyle={{ fontSize: "12px" }}
+                iconSize={10}
+                formatter={(value) => {
+                  return value === "healthy" ? "Healthy" : "Unhealthy";
+                }}
+              />
+              <Bar
+                dataKey="healthy"
+                stackId="a"
+                fill={colors.green[500]}
+                name="healthy"
+              />
+              <Bar
+                dataKey="unhealthy"
+                stackId="a"
+                fill={colors.red[500]}
+                name="unhealthy"
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/SuccessRate.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/SuccessRate.tsx
index 9be38e382..e27996838 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/SuccessRate.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/SuccessRate.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@ctrlplane/ui/card";
+import { Card, CardContent } from "@ctrlplane/ui/card";
 import { Skeleton } from "@ctrlplane/ui/skeleton";
 
 import { api } from "~/trpc/react";
@@ -25,14 +25,21 @@ export const SuccessRate: React.FC<SuccessRateProps> = ({
   const prettySuccessRate = (data?.successRate ?? 0).toFixed(2);
 
   return (
-    <Card className="w-full rounded-md bg-inherit">
-      <CardHeader>
-        <CardTitle>Success Rate</CardTitle>
-      </CardHeader>
-      <CardContent>
-        {isLoading && <Skeleton className="h-7 w-16" />}
-        {!isLoading && (
-          <p className="text-xl font-semibold">{prettySuccessRate}%</p>
+    <Card className="shadow-sm">
+      <CardContent className="px-6 pt-6">
+        {isLoading ? (
+          <Skeleton className="h-8 w-20" />
+        ) : (
+          <div className="flex flex-col">
+            <p className="mb-1 text-sm font-medium text-muted-foreground">
+              Success Rate
+            </p>
+            <p
+              className={`text-3xl font-semibold ${Number(prettySuccessRate) >= 90 ? "text-green-600" : Number(prettySuccessRate) >= 70 ? "text-yellow-600" : "text-red-600"}`}
+            >
+              {prettySuccessRate}%
+            </p>
+          </div>
         )}
       </CardContent>
     </Card>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/TotalJobs.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/TotalJobs.tsx
index de0fa5341..e771bd5e0 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/TotalJobs.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/TotalJobs.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@ctrlplane/ui/card";
+import { Card, CardContent } from "@ctrlplane/ui/card";
 import { Skeleton } from "@ctrlplane/ui/skeleton";
 
 import { api } from "~/trpc/react";
@@ -23,14 +23,19 @@ export const TotalJobs: React.FC<TotalJobsProps> = ({
   });
 
   return (
-    <Card className="w-full rounded-md bg-inherit">
-      <CardHeader>
-        <CardTitle>Total Jobs</CardTitle>
-      </CardHeader>
-      <CardContent>
-        {isLoading && <Skeleton className="h-7 w-16" />}
-        {!isLoading && (
-          <p className="text-xl font-semibold">{data?.totalJobs ?? 0}</p>
+    <Card className="shadow-sm">
+      <CardContent className="px-6 pt-6">
+        {isLoading ? (
+          <Skeleton className="h-8 w-20" />
+        ) : (
+          <div className="flex flex-col">
+            <p className="mb-1 text-sm font-medium text-muted-foreground">
+              Total Jobs
+            </p>
+            <p className="text-3xl font-semibold">
+              {(data?.totalJobs ?? 0).toLocaleString()}
+            </p>
+          </div>
         )}
       </CardContent>
     </Card>
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/WorkspaceResources.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/WorkspaceResources.tsx
index 18abfa06e..34ff604ce 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/WorkspaceResources.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/overview-cards/WorkspaceResources.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@ctrlplane/ui/card";
+import { Card, CardContent } from "@ctrlplane/ui/card";
 import { Skeleton } from "@ctrlplane/ui/skeleton";
 
 import { api } from "~/trpc/react";
@@ -20,13 +20,20 @@ export const WorkspaceResources: React.FC<WorkspaceResourcesProps> = ({
   const numResources = data?.total ?? 0;
 
   return (
-    <Card className="w-full rounded-md bg-inherit">
-      <CardHeader>
-        <CardTitle>Total Resources</CardTitle>
-      </CardHeader>
-      <CardContent>
-        {isLoading && <Skeleton className="h-7 w-16" />}
-        {!isLoading && <p className="text-xl font-semibold">{numResources}</p>}
+    <Card className="shadow-sm">
+      <CardContent className="px-6 pt-6">
+        {isLoading ? (
+          <Skeleton className="h-8 w-20" />
+        ) : (
+          <div className="flex flex-col">
+            <p className="mb-1 text-sm font-medium text-muted-foreground">
+              Total Resources
+            </p>
+            <p className="text-3xl font-semibold">
+              {numResources.toLocaleString()}
+            </p>
+          </div>
+        )}
       </CardContent>
     </Card>
   );
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/page.tsx
index f66eadc9b..a9f78923c 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/insights/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/insights/page.tsx
@@ -1,3 +1,7 @@
+import type {
+  StatsColumn,
+  StatsOrder,
+} from "@ctrlplane/validators/deployments";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { endOfDay, startOfDay, subDays, subWeeks } from "date-fns";
@@ -7,9 +11,13 @@ import { Card, CardContent, CardHeader, CardTitle } from "@ctrlplane/ui/card";
 import { api } from "~/trpc/server";
 import { DailyJobsChart } from "./DailyJobsChart";
 import { DailyResourceCountGraph } from "./DailyResourcesCountGraph";
+import { DeploymentPerformance } from "./DeploymentPerformance";
+import { InsightsFilters } from "./InsightsFilters";
 import { SuccessRate } from "./overview-cards/SuccessRate";
 import { TotalJobs } from "./overview-cards/TotalJobs";
 import { WorkspaceResources } from "./overview-cards/WorkspaceResources";
+import { ResourceTypeBreakdown } from "./ResourceTypeBreakdown";
+import { SystemHealthOverview } from "./SystemHealthOverview";
 
 export const generateMetadata = async (props: {
   params: { workspaceSlug: string };
@@ -31,16 +39,33 @@ export const generateMetadata = async (props: {
 
 type Props = {
   params: Promise<{ workspaceSlug: string }>;
+  searchParams?: {
+    systemId?: string;
+    resourceKind?: string;
+    timeRange?: string;
+  };
 };
 
 export default async function InsightsPage(props: Props) {
   const { workspaceSlug } = await props.params;
+  const { systemId, timeRange = "30" } = props.searchParams ?? {};
+
   const workspace = await api.workspace.bySlug(workspaceSlug);
   if (workspace == null) notFound();
 
+  // Calculate date range based on timeRange param (default to 30 days)
+  const days = parseInt(timeRange, 10) || 30;
   const endDate = endOfDay(new Date());
-  const startDate = startOfDay(subDays(endDate, 30));
+  const startDate = startOfDay(subDays(endDate, days));
+
+  // Get systems for the filter dropdown
+  const systems = await api.system.list({
+    workspaceId: workspace.id,
+    limit: 100,
+    offset: 0,
+  });
 
+  // Get resources stats with optional filtering
   const resources = await api.resource.stats.dailyCount.byWorkspaceId({
     workspaceId: workspace.id,
     startDate,
@@ -49,19 +74,47 @@ export default async function InsightsPage(props: Props) {
 
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
-  const jobs = await api.job.config.byWorkspaceId.dailyCount({
+  // Get jobs stats with optional filtering by system
+  const jobsParams = {
     workspaceId: workspace.id,
     startDate: subWeeks(endDate, 6),
     endDate,
     timezone,
+  };
+
+  const jobs = await api.job.config.byWorkspaceId.dailyCount(jobsParams);
+
+  // Get deployment stats with filtering
+  const deploymentStatsParams = {
+    startDate,
+    endDate,
+    timezone,
+    orderBy: "last-run-at",
+    order: "desc",
+    ...(systemId ? { systemId } : { workspaceId: workspace.id }),
+  };
+  const deploymentStats = await api.deployment.stats.byWorkspaceId({
+    ...deploymentStatsParams,
+    orderBy: "last-run-at" as StatsColumn,
+    order: "desc" as StatsOrder,
   });
 
   return (
-    <div className="container m-8 mx-auto space-y-4">
-      <div className="flex w-full items-center justify-between">
-        <h2 className="text-2xl font-bold">Insights</h2>
+    <div className="container mx-auto px-4 py-6">
+      {/* Header with filters on right */}
+      <div className="mb-6 flex w-full items-center justify-between">
+        <h2 className="text-2xl font-semibold">Insights</h2>
+
+        <InsightsFilters
+          workspaceSlug={workspaceSlug}
+          systems={systems.items}
+          currentSystemId={systemId}
+          currentTimeRange={timeRange}
+        />
       </div>
-      <div className="flex w-full items-center justify-between gap-4">
+
+      {/* Overview metrics */}
+      <div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
         <WorkspaceResources workspaceId={workspace.id} />
         <TotalJobs
           workspaceId={workspace.id}
@@ -75,23 +128,81 @@ export default async function InsightsPage(props: Props) {
         />
       </div>
 
-      <Card className="rounded-md">
-        <CardHeader>
-          <CardTitle>Jobs per day</CardTitle>
-        </CardHeader>
-        <CardContent className="h-[300px] w-full">
-          <DailyJobsChart dailyCounts={jobs} />
-        </CardContent>
-      </Card>
-
-      <Card className="rounded-md">
-        <CardHeader>
-          <CardTitle>Resources over 30 days</CardTitle>
-        </CardHeader>
-        <CardContent className="h-[300px] w-full pl-0 pr-6">
-          <DailyResourceCountGraph chartData={resources} />
-        </CardContent>
-      </Card>
+      {/* Activity trends section */}
+      <div className="mb-6">
+        <h3 className="mb-3 text-sm font-medium uppercase tracking-wider text-muted-foreground">
+          Activity Trends
+        </h3>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <Card className="shadow-sm">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">Jobs per day</CardTitle>
+            </CardHeader>
+            <CardContent className="h-[280px] w-full">
+              <DailyJobsChart dailyCounts={jobs} />
+            </CardContent>
+          </Card>
+
+          <Card className="shadow-sm">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-base">
+                Resources over {days} days
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="h-[280px] w-full">
+              <DailyResourceCountGraph chartData={resources} />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Distribution & Health section */}
+      <div className="mb-6">
+        <h3 className="mb-3 text-sm font-medium uppercase tracking-wider text-muted-foreground">
+          Distribution & Health
+        </h3>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <ResourceTypeBreakdown
+            workspaceId={workspace.id}
+            systemId={systemId}
+          />
+
+          {systemId ? (
+            <SystemHealthOverview
+              systemId={systemId}
+              workspaceId={workspace.id}
+            />
+          ) : (
+            <Card className="h-[350px] shadow-sm">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-base">
+                  System Health Overview
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="flex h-full items-center justify-center">
+                <div className="max-w-md p-4 text-center">
+                  <p className="text-sm text-muted-foreground">
+                    Select a system from the dropdown above to view health
+                    information about environments and resources.
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+
+      {/* Performance section */}
+      <div>
+        <h3 className="mb-3 text-sm font-medium uppercase tracking-wider text-muted-foreground">
+          Performance Metrics
+        </h3>
+        <DeploymentPerformance
+          deployments={deploymentStats}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      </div>
     </div>
   );
 }
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/layout.tsx
index 1210adc5e..a578dfcc6 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(app)/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { IconChartBar, IconCube, IconSettings } from "@tabler/icons-react";
+import { IconCube, IconSettings } from "@tabler/icons-react";
 
 import { EnvironmentDrawer } from "~/app/[workspaceSlug]/(app)/_components/environment/drawer/EnvironmentDrawer";
 import { EnvironmentPolicyDrawer } from "~/app/[workspaceSlug]/(app)/_components/policy/drawer/EnvironmentPolicyDrawer";
@@ -34,11 +34,11 @@ export default async function Layout(props: {
               label="Resources"
               href={workspaceUrls.resources().baseUrl()}
             />
-            <TopSidebarIcon
+            {/* <TopSidebarIcon
               icon={<IconChartBar />}
               label="Insights"
               href={workspaceUrls.insights()}
-            />
+            /> */}
             <div className="flex-grow" />
             {/* <TopSidebarIcon
             icon={<IconPlug />}
diff --git a/apps/webservice/src/app/urls.ts b/apps/webservice/src/app/urls.ts
index 03a096d27..f08440dee 100644
--- a/apps/webservice/src/app/urls.ts
+++ b/apps/webservice/src/app/urls.ts
@@ -138,6 +138,7 @@ const environment = (params: EnvironmentParams) => {
     policies: () => buildUrl(...base, "policies"),
     resources: () => buildUrl(...base, "resources"),
     variables: () => buildUrl(...base, "variables"),
+    settings: () => buildUrl(...base, "settings"),
   };
 };
 type DeploymentParams = SystemParams & {
diff --git a/packages/api/src/router/environment-stats.ts b/packages/api/src/router/environment-stats.ts
index 6ae69538a..3b7a45977 100644
--- a/packages/api/src/router/environment-stats.ts
+++ b/packages/api/src/router/environment-stats.ts
@@ -4,15 +4,18 @@ import {
   and,
   eq,
   exists,
+  gt,
+  inArray,
   isNotNull,
   isNull,
+  lte,
   ne,
   sql,
   takeFirstOrNull,
 } from "@ctrlplane/db";
 import * as SCHEMA from "@ctrlplane/db/schema";
 import { Permission } from "@ctrlplane/validators/auth";
-import { JobStatus } from "@ctrlplane/validators/jobs";
+import { analyticsStatuses, JobStatus } from "@ctrlplane/validators/jobs";
 
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 
@@ -90,4 +93,50 @@ export const environmentStatsRouter = createTRPCRouter({
           ),
         );
     }),
+
+  failureRate: protectedProcedure
+    .input(
+      z.object({
+        environmentId: z.string().uuid(),
+        startDate: z.date(),
+        endDate: z.date(),
+      }),
+    )
+    .meta({
+      authorizationCheck: ({ canUser, input }) =>
+        canUser
+          .perform(Permission.EnvironmentGet)
+          .on({ type: "environment", id: input.environmentId }),
+    })
+    .query(({ ctx, input }) =>
+      ctx.db
+        .select({
+          failureRate: sql<number | null>`
+            CAST(
+              SUM(
+                CASE 
+                  WHEN ${SCHEMA.job.status} = ${JobStatus.Successful} THEN 0 ELSE 1 
+                END
+              ) AS FLOAT
+            ) / 
+            NULLIF(COUNT(*), 0) * 100
+          `.as("failureRate"),
+        })
+        .from(SCHEMA.job)
+        .innerJoin(
+          SCHEMA.releaseJobTrigger,
+          eq(SCHEMA.releaseJobTrigger.jobId, SCHEMA.job.id),
+        )
+        .where(
+          and(
+            eq(SCHEMA.releaseJobTrigger.environmentId, input.environmentId),
+            gt(SCHEMA.job.createdAt, input.startDate),
+            lte(SCHEMA.job.createdAt, input.endDate),
+            inArray(SCHEMA.job.status, analyticsStatuses),
+          ),
+        )
+        .limit(1)
+        .then(takeFirstOrNull)
+        .then((r) => r?.failureRate ?? null),
+    ),
 });