From 0f2957da4a87462f5eba48ee1cfc14eff21eac8e Mon Sep 17 00:00:00 2001
From: Justin Brooks <justin@wandb.com>
Date: Sun, 17 Nov 2024 22:38:57 -0500
Subject: [PATCH 1/2] init sidebar refactor

---
 .../src/app/[workspaceSlug]/AppSidebar.tsx    | 134 +++
 ...reateMenu.tsx => AppSidebarCreateMenu.tsx} |  47 +-
 ...spaceDropdown.tsx => AppSidebarHeader.tsx} |  50 +-
 .../app/[workspaceSlug]/AppSidebarPopover.tsx |  23 +
 .../AppSidebarPopoverContext.tsx              |  85 ++
 .../app/[workspaceSlug]/SettingsSidebar.tsx   |  47 ++
 .../app/[workspaceSlug]/SidebarContext.tsx    |  15 -
 .../src/app/[workspaceSlug]/SidebarLink.tsx   |  40 -
 .../src/app/[workspaceSlug]/SidebarMain.tsx   |  67 --
 .../app/[workspaceSlug]/SidebarNavMain.tsx    |  88 ++
 .../src/app/[workspaceSlug]/SidebarPanels.tsx |  89 --
 .../[workspaceSlug]/SidebarPopoverSystem.tsx  |  51 --
 .../[workspaceSlug]/SidebarPopoverTargets.tsx | 125 ---
 .../app/[workspaceSlug]/SidebarSettings.tsx   |  75 --
 .../app/[workspaceSlug]/SidebarSystems.tsx    | 108 ---
 .../app/[workspaceSlug]/SidebarWorkspace.tsx  |  87 --
 .../[workspaceSlug]/_SidebarPopoverSystem.tsx |  51 ++
 .../app/[workspaceSlug]/_SidebarSystems.tsx   | 108 +++
 .../SearchDialog.tsx}                         |   0
 .../src/app/[workspaceSlug]/layout.tsx        |  55 +-
 apps/webservice/src/app/globals.css           |  27 +
 apps/webservice/tailwind.config.ts            |  12 +
 packages/ui/package.json                      |   7 +-
 packages/ui/src/hooks/use-mobile.tsx          |  21 +
 packages/ui/src/sheet.tsx                     | 141 ++++
 packages/ui/src/sidebar.tsx                   | 772 ++++++++++++++++++
 packages/ui/tailwind.config.ts                |  16 +
 packages/ui/unused.css                        |  31 +
 pnpm-lock.yaml                                |  24 +-
 29 files changed, 1688 insertions(+), 708 deletions(-)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/AppSidebar.tsx
 rename apps/webservice/src/app/[workspaceSlug]/{SidebarCreateMenu.tsx => AppSidebarCreateMenu.tsx} (68%)
 rename apps/webservice/src/app/[workspaceSlug]/{SidebarWorkspaceDropdown.tsx => AppSidebarHeader.tsx} (65%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/AppSidebarPopover.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/AppSidebarPopoverContext.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/SettingsSidebar.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarContext.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarLink.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarMain.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarNavMain.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarPanels.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarPopoverSystem.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarPopoverTargets.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarSettings.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarSystems.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SidebarWorkspace.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/_SidebarPopoverSystem.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/_SidebarSystems.tsx
 rename apps/webservice/src/app/[workspaceSlug]/{Search.tsx => _components/SearchDialog.tsx} (100%)
 create mode 100644 packages/ui/src/hooks/use-mobile.tsx
 create mode 100644 packages/ui/src/sheet.tsx
 create mode 100644 packages/ui/src/sidebar.tsx
 create mode 100644 packages/ui/unused.css

diff --git a/apps/webservice/src/app/[workspaceSlug]/AppSidebar.tsx b/apps/webservice/src/app/[workspaceSlug]/AppSidebar.tsx
new file mode 100644
index 000000000..29601eea3
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/AppSidebar.tsx
@@ -0,0 +1,134 @@
+import type { Workspace } from "@ctrlplane/db/schema";
+import React from "react";
+import {
+  IconCategory,
+  IconObjectScan,
+  IconPlant,
+  IconRocket,
+  IconRun,
+  IconShip,
+  IconVariable,
+} from "@tabler/icons-react";
+
+import { SidebarContent, SidebarHeader } from "@ctrlplane/ui/sidebar";
+
+import { api } from "~/trpc/server";
+import { AppSidebarHeader } from "./AppSidebarHeader";
+import { AppSidebarPopover } from "./AppSidebarPopover";
+import { SidebarWithPopover } from "./AppSidebarPopoverContext";
+import { SidebarNavMain } from "./SidebarNavMain";
+
+const navMain = (prefix: string) => [
+  {
+    title: "Systems",
+    url: `${prefix}/systems`,
+    icon: IconCategory,
+    isActive: true,
+    items: [
+      {
+        title: "Dependencies",
+        url: `${prefix}/dependencies`,
+        isActive: true,
+      },
+    ],
+  },
+  {
+    title: "Resources",
+    url: `${prefix}/resources`,
+    popoverId: "resources",
+    icon: IconObjectScan,
+    isActive: true,
+    items: [
+      {
+        title: "List",
+        url: `${prefix}/targets`,
+      },
+      {
+        title: "Providers",
+        url: `${prefix}/target-providers`,
+      },
+      {
+        title: "Groups",
+        url: `${prefix}/target-metadata-groups`,
+      },
+      {
+        title: "Views",
+        url: `${prefix}/target-views`,
+      },
+    ],
+  },
+  {
+    title: "Jobs",
+    url: "#",
+    icon: IconRocket,
+    items: [
+      {
+        title: "Agents",
+        url: "#",
+      },
+      {
+        title: "Runs",
+        url: "#",
+      },
+    ],
+  },
+];
+
+export const AppSidebar: React.FC<{ workspace: Workspace }> = async ({
+  workspace,
+}) => {
+  const [workspaces, viewer, systems] = await Promise.all([
+    api.workspace.list(),
+    api.user.viewer(),
+    api.system.list({ workspaceId: workspace.id }),
+  ]);
+
+  const navSystem = systems.items.map((s) => ({
+    title: s.name,
+    url: "#",
+    isActive: true,
+    items: [
+      {
+        title: "Environments",
+        icon: IconPlant,
+        url: "#",
+      },
+      {
+        title: "Deployements",
+        icon: IconShip,
+        url: "#",
+      },
+      {
+        title: "Runbooks",
+        icon: IconRun,
+        url: "#",
+      },
+      {
+        title: "Variable Sets",
+        icon: IconVariable,
+        url: "#",
+      },
+    ],
+  }));
+
+  return (
+    <SidebarWithPopover>
+      <AppSidebarPopover />
+      <SidebarHeader>
+        <AppSidebarHeader
+          workspace={workspace}
+          workspaces={workspaces}
+          viewer={viewer}
+          systems={systems.items}
+        />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarNavMain
+          title="Workspace"
+          items={navMain(`/${workspace.slug}`)}
+        />
+        <SidebarNavMain title="Systems" items={navSystem} />
+      </SidebarContent>
+    </SidebarWithPopover>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarCreateMenu.tsx b/apps/webservice/src/app/[workspaceSlug]/AppSidebarCreateMenu.tsx
similarity index 68%
rename from apps/webservice/src/app/[workspaceSlug]/SidebarCreateMenu.tsx
rename to apps/webservice/src/app/[workspaceSlug]/AppSidebarCreateMenu.tsx
index 121f5683e..f683fb658 100644
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarCreateMenu.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/AppSidebarCreateMenu.tsx
@@ -1,5 +1,8 @@
+"use client";
+
 import type { Workspace } from "@ctrlplane/db/schema";
 import { useState } from "react";
+import { useParams } from "next/navigation";
 import { IconPlus } from "@tabler/icons-react";
 
 import { Button } from "@ctrlplane/ui/button";
@@ -12,17 +15,35 @@ import {
   DropdownMenuTrigger,
 } from "@ctrlplane/ui/dropdown-menu";
 
+import { api } from "~/trpc/react";
 import { CreateDeploymentDialog } from "./_components/CreateDeployment";
 import { CreateReleaseDialog } from "./_components/CreateRelease";
 import { CreateSystemDialog } from "./_components/CreateSystem";
 import { CreateTargetDialog } from "./_components/CreateTarget";
 import { CreateSessionDialog } from "./_components/terminal/CreateDialogSession";
 
-export const SidebarCreateMenu: React.FC<{
+export const AppSidebarCreateMenu: React.FC<{
   workspace: Workspace;
-  deploymentId?: string;
-  systemId?: string;
-}> = (props) => {
+}> = ({ workspace }) => {
+  const { deploymentSlug, workspaceSlug, systemSlug } = useParams<{
+    workspaceSlug: string;
+    systemSlug?: string;
+    deploymentSlug?: string;
+  }>();
+
+  const system = api.system.bySlug.useQuery(
+    { workspaceSlug, systemSlug: systemSlug ?? "" },
+    { enabled: systemSlug != null },
+  );
+  const deployment = api.deployment.bySlug.useQuery(
+    {
+      workspaceSlug,
+      systemSlug: systemSlug ?? "",
+      deploymentSlug: deploymentSlug ?? "",
+    },
+    { enabled: deploymentSlug != null && systemSlug != null },
+  );
+
   const [open, setOpen] = useState(false);
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
@@ -42,19 +63,26 @@ export const SidebarCreateMenu: React.FC<{
       >
         <DropdownMenuGroup>
           <CreateSystemDialog
-            workspace={props.workspace}
+            workspace={workspace}
             onSuccess={() => setOpen(false)}
           >
             <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
               New System
             </DropdownMenuItem>
           </CreateSystemDialog>
-          <CreateDeploymentDialog {...props} onSuccess={() => setOpen(false)}>
+          <CreateDeploymentDialog
+            systemId={system.data?.id}
+            onSuccess={() => setOpen(false)}
+          >
             <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
               New Deployment
             </DropdownMenuItem>
           </CreateDeploymentDialog>
-          <CreateReleaseDialog {...props} onClose={() => setOpen(false)}>
+          <CreateReleaseDialog
+            systemId={system.data?.id}
+            deploymentId={deployment.data?.id}
+            onClose={() => setOpen(false)}
+          >
             <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
               New Release
             </DropdownMenuItem>
@@ -75,7 +103,10 @@ export const SidebarCreateMenu: React.FC<{
         <DropdownMenuSeparator />
 
         <DropdownMenuGroup>
-          <CreateTargetDialog {...props} onSuccess={() => setOpen(false)}>
+          <CreateTargetDialog
+            workspace={workspace}
+            onSuccess={() => setOpen(false)}
+          >
             <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
               Bootstrap Target
             </DropdownMenuItem>
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarWorkspaceDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/AppSidebarHeader.tsx
similarity index 65%
rename from apps/webservice/src/app/[workspaceSlug]/SidebarWorkspaceDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/AppSidebarHeader.tsx
index 600f09664..7860aedb4 100644
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarWorkspaceDropdown.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/AppSidebarHeader.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import type { Workspace } from "@ctrlplane/db/schema";
+import type { System, Workspace } from "@ctrlplane/db/schema";
 import Link from "next/link";
-import { IconCheck, IconChevronDown } from "@tabler/icons-react";
-import { signOut, useSession } from "next-auth/react";
+import { IconCheck, IconChevronDown, IconSearch } from "@tabler/icons-react";
+import { signOut } from "next-auth/react";
 
 import { Button } from "@ctrlplane/ui/button";
 import {
@@ -19,14 +19,17 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@ctrlplane/ui/dropdown-menu";
+import { SidebarMenu, SidebarMenuItem } from "@ctrlplane/ui/sidebar";
 
 import { api } from "~/trpc/react";
+import { SearchDialog } from "./_components/SearchDialog";
+import { AppSidebarCreateMenu } from "./AppSidebarCreateMenu";
 
-export const SidebarWorkspaceDropdown: React.FC<{ workspace: Workspace }> = ({
-  workspace,
-}) => {
-  const { data } = useSession();
-  const workspaces = api.workspace.list.useQuery();
+const WorkspaceDropdown: React.FC<{
+  workspace: Workspace;
+  workspaces: Workspace[];
+  viewer: { email: string };
+}> = ({ workspace, workspaces, viewer }) => {
   const update = api.profile.update.useMutation();
   return (
     <DropdownMenu>
@@ -53,9 +56,9 @@ export const SidebarWorkspaceDropdown: React.FC<{ workspace: Workspace }> = ({
           <DropdownMenuPortal>
             <DropdownMenuSubContent className="w-[200px] bg-neutral-900">
               <DropdownMenuLabel className="font-normal text-muted-foreground">
-                {data?.user.email}
+                {viewer.email}
               </DropdownMenuLabel>
-              {workspaces.data?.map((ws) => (
+              {workspaces.map((ws) => (
                 <Link
                   key={ws.id}
                   href={`/${ws.slug}`}
@@ -85,3 +88,30 @@ export const SidebarWorkspaceDropdown: React.FC<{ workspace: Workspace }> = ({
     </DropdownMenu>
   );
 };
+
+export const AppSidebarHeader: React.FC<{
+  systems: System[];
+  workspace: Workspace;
+  workspaces: Workspace[];
+  viewer: { email: string };
+}> = ({ workspace, workspaces, viewer }) => {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem className="flex items-center gap-2">
+        <div className="flex-grow overflow-x-auto">
+          <WorkspaceDropdown
+            workspace={workspace}
+            workspaces={workspaces}
+            viewer={viewer}
+          />
+        </div>
+        <SearchDialog>
+          <Button variant="ghost" size="icon" className="h-6 w-6 flex-shrink-0">
+            <IconSearch className="h-4 w-4" />
+          </Button>
+        </SearchDialog>
+        <AppSidebarCreateMenu workspace={workspace} />
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/AppSidebarPopover.tsx b/apps/webservice/src/app/[workspaceSlug]/AppSidebarPopover.tsx
new file mode 100644
index 000000000..81d0e4fef
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/AppSidebarPopover.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+
+import { Popover, PopoverAnchor, PopoverContent } from "@ctrlplane/ui/popover";
+
+import { useSidebarPopover } from "./AppSidebarPopoverContext";
+
+export const AppSidebarPopover: React.FC = () => {
+  const { activeSidebarItem } = useSidebarPopover();
+  return (
+    <Popover open={activeSidebarItem != null}>
+      <PopoverAnchor className="w-full" />
+      <PopoverContent
+        side="right"
+        sideOffset={1}
+        className="h-[100vh] w-[300px] border-y-0 border-l-0 bg-black"
+      >
+        {activeSidebarItem}
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/AppSidebarPopoverContext.tsx b/apps/webservice/src/app/[workspaceSlug]/AppSidebarPopoverContext.tsx
new file mode 100644
index 000000000..e7367ff99
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/AppSidebarPopoverContext.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { createContext, useContext, useState } from "react";
+
+import {
+  Sidebar,
+  SidebarMenuItem,
+  SidebarMenuSubItem,
+} from "@ctrlplane/ui/sidebar";
+
+type AppSidebarPopoverContextType = {
+  activeSidebarItem: string | null;
+  setActiveSidebarItem: (item: string | null) => void;
+};
+
+const AppSidebarPopoverContext = createContext<AppSidebarPopoverContextType>({
+  activeSidebarItem: null,
+  setActiveSidebarItem: () => {},
+});
+
+export const useSidebarPopover = () => useContext(AppSidebarPopoverContext);
+
+export const AppSidebarPopoverProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [activeSidebarItem, setActiveSidebarItem] = useState<string | null>(
+    null,
+  );
+  return (
+    <AppSidebarPopoverContext.Provider
+      value={{ activeSidebarItem, setActiveSidebarItem }}
+    >
+      {children}
+    </AppSidebarPopoverContext.Provider>
+  );
+};
+
+export const SidebarWithPopover: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const { setActiveSidebarItem } = useSidebarPopover();
+  return (
+    <Sidebar onMouseLeave={() => setActiveSidebarItem(null)}>
+      {children}
+    </Sidebar>
+  );
+};
+
+export const SidebarMenuItemWithPopover: React.FC<{
+  children: React.ReactNode;
+  popoverId?: string;
+}> = ({ children, popoverId }) => {
+  const { setActiveSidebarItem } = useSidebarPopover();
+  return (
+    <SidebarMenuItem
+      onMouseEnter={(e) => {
+        if (popoverId != null) {
+          setActiveSidebarItem(popoverId);
+          e.stopPropagation();
+        }
+      }}
+    >
+      {children}
+    </SidebarMenuItem>
+  );
+};
+
+export const SidebarMenuSubItemWithPopover: React.FC<{
+  children: React.ReactNode;
+  popoverId?: string;
+}> = ({ children, popoverId }) => {
+  const { setActiveSidebarItem } = useSidebarPopover();
+  return (
+    <SidebarMenuSubItem
+      onMouseEnter={(e) => {
+        if (popoverId != null) {
+          setActiveSidebarItem(popoverId);
+          e.stopPropagation();
+        }
+      }}
+    >
+      {children}
+    </SidebarMenuSubItem>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SettingsSidebar.tsx b/apps/webservice/src/app/[workspaceSlug]/SettingsSidebar.tsx
new file mode 100644
index 000000000..bf53f7c6c
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/SettingsSidebar.tsx
@@ -0,0 +1,47 @@
+import type { Workspace } from "@ctrlplane/db/schema";
+import Link from "next/link";
+import { IconChevronLeft } from "@tabler/icons-react";
+
+import { Sidebar, SidebarContent, SidebarHeader } from "@ctrlplane/ui/sidebar";
+
+import { SidebarNavMain } from "./SidebarNavMain";
+
+export const SettingsSidebar: React.FC<{ workspace: Workspace }> = ({
+  workspace,
+}) => {
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <div className="mx-3 my-4 space-y-4">
+          <Link
+            href={`/${workspace.slug}`}
+            className="flex w-full items-center gap-2 text-left hover:bg-transparent"
+          >
+            <div className="text-muted-foreground">
+              <IconChevronLeft className="h-3 w-3" />
+            </div>
+            <div className="flex-grow">Settings</div>
+          </Link>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarNavMain
+          title="Workspace"
+          items={[
+            { title: "Overview", url: "#" },
+            { title: "General", url: "#" },
+            { title: "Members", url: "#" },
+            { title: "Integrations", url: "#" },
+          ]}
+        />
+        <SidebarNavMain
+          title="User"
+          items={[
+            { title: "Profile", url: "#" },
+            { title: "API Keys", url: "#" },
+          ]}
+        />
+      </SidebarContent>
+    </Sidebar>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarContext.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarContext.tsx
deleted file mode 100644
index 24e43b52f..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarContext.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-"use client";
-
-import { createContext, useContext } from "react";
-
-type SidebarContextType = {
-  activeSidebarItem: string | null;
-  setActiveSidebarItem: (item: string | null) => void;
-};
-
-export const SidebarContext = createContext<SidebarContextType>({
-  activeSidebarItem: null,
-  setActiveSidebarItem: () => {},
-});
-
-export const useSidebar = () => useContext(SidebarContext);
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarLink.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarLink.tsx
deleted file mode 100644
index c3db604cf..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarLink.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-import { cn } from "@ctrlplane/ui";
-
-import { useSidebar } from "./SidebarContext";
-
-export const SidebarLink: React.FC<{
-  href: string;
-  children: React.ReactNode;
-  exact?: boolean;
-  className?: string;
-  hideActiveEffect?: boolean;
-}> = ({ href, exact, children, className, hideActiveEffect }) => {
-  const { setActiveSidebarItem } = useSidebar();
-  const pathname = usePathname();
-  const active = hideActiveEffect
-    ? false
-    : exact
-      ? pathname === href
-      : pathname.startsWith(href);
-  return (
-    <Link
-      href={href}
-      onClick={() => {
-        console.log("setting null");
-        setActiveSidebarItem(null);
-      }}
-      className={cn(
-        className,
-        active ? "bg-neutral-800/70" : "hover:bg-neutral-800/50",
-        "flex items-center gap-2 rounded-md px-2 py-1",
-      )}
-    >
-      {children}
-    </Link>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarMain.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarMain.tsx
deleted file mode 100644
index d7ecbb2a1..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarMain.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client";
-
-import type { System, Workspace } from "@ctrlplane/db/schema";
-import { useParams } from "next/navigation";
-import { IconSearch } from "@tabler/icons-react";
-
-import { Button } from "@ctrlplane/ui/button";
-
-import { api } from "~/trpc/react";
-import { SearchDialog } from "./Search";
-import { SidebarCreateMenu } from "./SidebarCreateMenu";
-import { SidebarSystems } from "./SidebarSystems";
-import { SidebarWorkspace } from "./SidebarWorkspace";
-import { SidebarWorkspaceDropdown } from "./SidebarWorkspaceDropdown";
-
-export const SidebarMain: React.FC<{
-  workspace: Workspace;
-  systems: System[];
-}> = ({ workspace, systems }) => {
-  const { deploymentSlug, workspaceSlug, systemSlug } = useParams<{
-    workspaceSlug: string;
-    systemSlug?: string;
-    deploymentSlug?: string;
-  }>();
-
-  const system = systems.find((s) => s.slug === systemSlug);
-  const deployment = api.deployment.bySlug.useQuery(
-    {
-      workspaceSlug,
-      systemSlug: systemSlug ?? "",
-      deploymentSlug: deploymentSlug ?? "",
-    },
-    { enabled: deploymentSlug != null && systemSlug != null },
-  );
-
-  return (
-    <div className="space-y-8 text-sm">
-      <div className="m-3 space-y-4">
-        <div className="flex items-center gap-2">
-          <div className="flex-grow overflow-x-auto">
-            <SidebarWorkspaceDropdown workspace={workspace} />
-          </div>
-
-          <SearchDialog>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 flex-shrink-0"
-            >
-              <IconSearch className="h-4 w-4" />
-            </Button>
-          </SearchDialog>
-
-          <SidebarCreateMenu
-            workspace={workspace}
-            systemId={system?.id}
-            deploymentId={deployment.data?.id}
-          />
-        </div>
-      </div>
-
-      <SidebarWorkspace />
-
-      <SidebarSystems workspace={workspace} systems={systems} />
-    </div>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarNavMain.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarNavMain.tsx
new file mode 100644
index 000000000..465bbfa3c
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/SidebarNavMain.tsx
@@ -0,0 +1,88 @@
+import { IconChevronRight } from "@tabler/icons-react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@ctrlplane/ui/collapsible";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+} from "@ctrlplane/ui/sidebar";
+
+import {
+  SidebarMenuItemWithPopover,
+  SidebarMenuSubItemWithPopover,
+} from "./AppSidebarPopoverContext";
+
+export const SidebarNavMain: React.FC<{
+  title: string;
+  items: {
+    popoverId?: string;
+    title: string;
+    url: string;
+    icon?: any;
+    isOpen?: boolean;
+    items?: {
+      popoverId?: string;
+      icon?: any;
+      title: string;
+      url: string;
+      exact?: boolean;
+    }[];
+  }[];
+}> = ({ title, items }) => {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>{title}</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible key={item.title} asChild defaultOpen={item.isOpen}>
+            <SidebarMenuItemWithPopover popoverId={item.popoverId}>
+              <SidebarMenuButton asChild tooltip={item.title}>
+                <a href={item.url}>
+                  {item.icon && <item.icon className="text-neutral-400" />}
+                  <span>{item.title}</span>
+                </a>
+              </SidebarMenuButton>
+              {item.items?.length ? (
+                <>
+                  <CollapsibleTrigger asChild>
+                    <SidebarMenuAction className="data-[state=open]:rotate-90">
+                      <IconChevronRight className="text-muted-foreground" />
+                      <span className="sr-only">Toggle</span>
+                    </SidebarMenuAction>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <SidebarMenuSub>
+                      {item.items.map((subItem) => (
+                        <SidebarMenuSubItemWithPopover
+                          popoverId={subItem.popoverId}
+                          key={subItem.title}
+                        >
+                          <SidebarMenuSubButton asChild>
+                            <a href={subItem.url}>
+                              {subItem.icon && (
+                                <subItem.icon className="text-neutral-400" />
+                              )}
+                              <span>{subItem.title}</span>
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItemWithPopover>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                </>
+              ) : null}
+            </SidebarMenuItemWithPopover>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarPanels.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarPanels.tsx
deleted file mode 100644
index 21c4ed41d..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarPanels.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-"use client";
-
-import type { System, Workspace } from "@ctrlplane/db/schema";
-import React, { useState } from "react";
-import { usePathname } from "next/navigation";
-
-import { Popover, PopoverContent, PopoverTrigger } from "@ctrlplane/ui/popover";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@ctrlplane/ui/resizable";
-
-import { SidebarContext } from "./SidebarContext";
-import { SidebarMain } from "./SidebarMain";
-import { SidebarPopoverSystem } from "./SidebarPopoverSystem";
-import { SidebarPopoverTargets } from "./SidebarPopoverTargets";
-import { SidebarSettings } from "./SidebarSettings";
-
-export const SidebarPanels: React.FC<{
-  children: React.ReactNode;
-  workspace: Workspace;
-  systems: System[];
-}> = ({ children, systems, workspace }) => {
-  const pathname = usePathname();
-  const isSettingsPage = pathname.includes("/settings");
-  const [open, setOpen] = useState(false);
-  const [activeSidebarItem, setActiveSidebarItem] = useState<string | null>(
-    null,
-  );
-
-  return (
-    <SidebarContext.Provider
-      value={{ activeSidebarItem, setActiveSidebarItem }}
-    >
-      <ResizablePanelGroup direction="horizontal" className="relative h-full">
-        <Popover
-          open={open && activeSidebarItem != null}
-          onOpenChange={setOpen}
-        >
-          <PopoverTrigger
-            onClick={(e) => e.preventDefault()}
-            className="focus-visible:outline-none"
-          >
-            <ResizablePanel
-              className="min-w-[220px] max-w-[300px] bg-black"
-              defaultSize={10}
-              onMouseEnter={() => setOpen(true)}
-            >
-              <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 h-[100vh] overflow-auto pb-12">
-                {isSettingsPage ? (
-                  <SidebarSettings workspaceSlug={workspace.slug} />
-                ) : (
-                  <SidebarMain workspace={workspace} systems={systems} />
-                )}
-              </div>
-            </ResizablePanel>
-          </PopoverTrigger>
-          <PopoverContent
-            side="right"
-            sideOffset={1}
-            className="h-[100vh] w-[300px] rounded-none border-y-0 border-l-0 bg-black"
-          >
-            {activeSidebarItem === "targets" && (
-              <SidebarPopoverTargets workspace={workspace} />
-            )}
-            {activeSidebarItem?.startsWith("systems:") && (
-              <SidebarPopoverSystem
-                systemId={activeSidebarItem.replace("systems:", "")}
-                workspace={workspace}
-              />
-            )}
-          </PopoverContent>
-        </Popover>
-
-        <ResizableHandle />
-        <ResizablePanel
-          defaultSize={90}
-          onMouseEnter={() => {
-            setOpen(false);
-            setActiveSidebarItem(null);
-          }}
-        >
-          {children}
-        </ResizablePanel>
-      </ResizablePanelGroup>{" "}
-    </SidebarContext.Provider>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarPopoverSystem.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarPopoverSystem.tsx
deleted file mode 100644
index 804c0aad7..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarPopoverSystem.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import type { Workspace } from "@ctrlplane/db/schema";
-
-import { api } from "~/trpc/react";
-import { SidebarLink } from "./SidebarLink";
-
-export const SidebarPopoverSystem: React.FC<{
-  systemId: string;
-  workspace: Workspace;
-}> = ({ workspace, systemId }) => {
-  const system = api.system.byId.useQuery(systemId);
-  const environments = api.environment.bySystemId.useQuery(systemId);
-  const deployments = api.deployment.bySystemId.useQuery(systemId);
-  return (
-    <div className="space-y-4 text-sm">
-      <div className="text-lg font-semibold">{system.data?.name}</div>
-
-      <div className="space-y-1.5">
-        <div className="text-xs font-semibold uppercase text-muted-foreground">
-          Environments
-        </div>
-        <div>
-          {environments.data?.map(({ name }) => (
-            <SidebarLink
-              href={`/${workspace.slug}/systems/${system.data?.slug}/environments`}
-            >
-              {name}
-            </SidebarLink>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-1.5">
-        <div className="text-xs font-semibold uppercase text-muted-foreground">
-          Deployments
-        </div>
-        <div>
-          {deployments.data?.map(({ id, name, slug }) => (
-            <SidebarLink
-              key={id}
-              href={`/${workspace.slug}/systems/${system.data?.slug}/deployments/${slug}`}
-            >
-              {name}
-            </SidebarLink>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarPopoverTargets.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarPopoverTargets.tsx
deleted file mode 100644
index 119631da4..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarPopoverTargets.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client";
-
-import type { Workspace } from "@ctrlplane/db/schema";
-import { usePathname } from "next/navigation";
-import { IconBookmark } from "@tabler/icons-react";
-import LZString from "lz-string";
-
-import { Badge } from "@ctrlplane/ui/badge";
-import {
-  ComparisonOperator,
-  FilterType,
-} from "@ctrlplane/validators/conditions";
-import { ResourceFilterType } from "@ctrlplane/validators/resources";
-
-import { api } from "~/trpc/react";
-import { TargetIcon } from "./_components/TargetIcon";
-import { SidebarLink } from "./SidebarLink";
-
-export const SidebarPopoverTargets: React.FC<{ workspace: Workspace }> = ({
-  workspace,
-}) => {
-  const pathname = usePathname();
-  const kinds = api.workspace.resourceKinds.useQuery(workspace.id);
-
-  const views = api.resource.view.list.useQuery(workspace.id);
-  const viewsWithHash = views.data?.map((view) => ({
-    ...view,
-    hash: LZString.compressToEncodedURIComponent(JSON.stringify(view.filter)),
-  }));
-
-  const recentlyAdded = api.resource.byWorkspaceId.list.useQuery({
-    workspaceId: workspace.id,
-    orderBy: [{ property: "createdAt", direction: "desc" }],
-    limit: 5,
-  });
-
-  const totalTargets =
-    (recentlyAdded.data?.total ?? 0) - (recentlyAdded.data?.items.length ?? 0);
-
-  return (
-    <div className="space-y-4 text-sm">
-      <div className="text-lg font-semibold">Targets</div>
-
-      <div className="space-y-1.5">
-        <div className="text-xs font-semibold uppercase text-muted-foreground">
-          Saved Views
-        </div>
-        <div>
-          <div className="rounded-md text-xs text-neutral-600">
-            No saved filters found.
-          </div>
-          {viewsWithHash != null && viewsWithHash.length > 0 && (
-            <>
-              {viewsWithHash.map(({ id, name, hash }) => (
-                <SidebarLink
-                  href={`/${workspace.slug}/targets?filter=${hash}`}
-                  key={id}
-                >
-                  <IconBookmark className="h-4 w-4 text-muted-foreground" />
-                  {name}
-                </SidebarLink>
-              ))}
-            </>
-          )}
-        </div>
-      </div>
-
-      <div className="space-y-1.5">
-        <div className="text-xs font-semibold uppercase text-muted-foreground">
-          Kinds
-        </div>
-        <div>
-          {kinds.data?.map(({ version, kind, count }) => (
-            <SidebarLink
-              href={`/${workspace.slug}/targets?filter=${LZString.compressToEncodedURIComponent(
-                JSON.stringify({
-                  type: FilterType.Comparison,
-                  operator: ComparisonOperator.And,
-                  conditions: [
-                    {
-                      type: ResourceFilterType.Kind,
-                      value: kind,
-                      operator: "equals",
-                    },
-                  ],
-                }),
-              )}`}
-              key={`${version}/${kind}`}
-            >
-              <TargetIcon version={version} kind={kind} />
-              <span className="flex-grow">{kind}</span>
-              <Badge
-                variant="secondary"
-                className="rounded-full bg-neutral-500/10 text-xs text-muted-foreground"
-              >
-                {count}
-              </Badge>
-            </SidebarLink>
-          ))}
-        </div>
-      </div>
-
-      <div className="space-y-1.5">
-        <div className="text-xs font-semibold uppercase text-muted-foreground">
-          Recently Added Targets
-        </div>
-        <div>
-          {recentlyAdded.data?.items.map((resource) => (
-            <SidebarLink
-              href={`${pathname}?target_id=${resource.id}`}
-              key={resource.id}
-            >
-              <span className="flex-grow">{resource.name}</span>
-            </SidebarLink>
-          ))}
-          {totalTargets > 0 && (
-            <div className="mt-2 px-1 text-xs text-muted-foreground">
-              +{totalTargets} other targets
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarSettings.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarSettings.tsx
deleted file mode 100644
index 14fa4b3c8..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarSettings.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Link from "next/link";
-import { IconBuilding, IconChevronLeft, IconUser } from "@tabler/icons-react";
-
-import { SidebarLink } from "./SidebarLink";
-
-const WorkspaceSettings: React.FC<{ workspaceSlug: string }> = ({
-  workspaceSlug,
-}) => {
-  return (
-    <div className="m-3 space-y-2">
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <IconBuilding className="w-3" /> Workspace
-      </div>
-
-      <div className="ml-3 space-y-0.5">
-        <SidebarLink href={`/${workspaceSlug}/settings/workspace/overview`}>
-          Overview
-        </SidebarLink>
-        <SidebarLink href={`/${workspaceSlug}/settings/workspace/general`}>
-          General
-        </SidebarLink>
-        <SidebarLink href={`/${workspaceSlug}/settings/workspace/members`}>
-          Members
-        </SidebarLink>
-        <SidebarLink href={`/${workspaceSlug}/settings/workspace/integrations`}>
-          Integrations
-        </SidebarLink>
-      </div>
-    </div>
-  );
-};
-
-const AccountSettings: React.FC<{ workspaceSlug: string }> = ({
-  workspaceSlug,
-}) => {
-  return (
-    <div className="m-3 space-y-2">
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <IconUser className="w-3" /> My account
-      </div>
-
-      <div className="ml-3 space-y-0.5">
-        <SidebarLink href={`/${workspaceSlug}/settings/account/profile`}>
-          Profile
-        </SidebarLink>
-        <SidebarLink href={`/${workspaceSlug}/settings/account/api`}>
-          API
-        </SidebarLink>
-      </div>
-    </div>
-  );
-};
-
-export const SidebarSettings: React.FC<{ workspaceSlug: string }> = ({
-  workspaceSlug,
-}) => {
-  return (
-    <div className="space-y-6 text-sm">
-      <div className="mx-3 my-4 space-y-4">
-        <Link
-          href={`/${workspaceSlug}`}
-          className="flex w-full items-center gap-2 text-left hover:bg-transparent"
-        >
-          <div className="text-muted-foreground">
-            <IconChevronLeft className="h-3 w-3" />
-          </div>
-          <div className="flex-grow">Settings</div>
-        </Link>
-      </div>
-
-      <WorkspaceSettings workspaceSlug={workspaceSlug} />
-      <AccountSettings workspaceSlug={workspaceSlug} />
-    </div>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarSystems.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarSystems.tsx
deleted file mode 100644
index 2e26ef95a..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarSystems.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import type { System, Workspace } from "@ctrlplane/db/schema";
-import { useState } from "react";
-import { useParams } from "next/navigation";
-import {
-  IconChevronRight,
-  IconPlant,
-  IconPlus,
-  IconRun,
-  IconShip,
-  IconVariable,
-} from "@tabler/icons-react";
-import _ from "lodash";
-import { useLocalStorage } from "react-use";
-
-import { cn } from "@ctrlplane/ui";
-import { Button } from "@ctrlplane/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@ctrlplane/ui/collapsible";
-
-import { CreateSystemDialog } from "./_components/CreateSystem";
-import { useSidebar } from "./SidebarContext";
-import { SidebarLink } from "./SidebarLink";
-
-const SystemCollapsible: React.FC<{ system: System }> = ({ system }) => {
-  const { setActiveSidebarItem } = useSidebar();
-  const [open, setOpen] = useLocalStorage(
-    `sidebar-systems-${system.id}`,
-    "false",
-  );
-  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
-  return (
-    <Collapsible
-      open={open === "true"}
-      onOpenChange={() => setOpen(open === "true" ? "false" : "true")}
-      className="space-y-1 text-sm"
-      onMouseEnter={() => setActiveSidebarItem(`systems:${system.id}`)}
-    >
-      <CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md px-2 py-1 hover:bg-neutral-800/50">
-        <span className="truncate">{system.name}</span>
-        <IconChevronRight
-          className={cn(
-            "h-3 w-3 text-muted-foreground transition-all",
-            open === "true" && "rotate-90",
-          )}
-        />
-      </CollapsibleTrigger>
-      <CollapsibleContent className="ml-2">
-        <SidebarLink
-          href={`/${workspaceSlug}/systems/${system.slug}/deployments`}
-        >
-          <IconShip className="h-4 w-4 text-muted-foreground" /> Deployments
-        </SidebarLink>
-        <SidebarLink
-          href={`/${workspaceSlug}/systems/${system.slug}/environments`}
-        >
-          <IconPlant className="h-4 w-4 text-muted-foreground" /> Environments
-        </SidebarLink>
-        <SidebarLink href={`/${workspaceSlug}/systems/${system.slug}/runbooks`}>
-          <IconRun className="h-4 w-4 text-muted-foreground" /> Runbooks
-        </SidebarLink>
-        <SidebarLink
-          href={`/${workspaceSlug}/systems/${system.slug}/variable-sets`}
-        >
-          <IconVariable className="h-4 w-4 text-muted-foreground" /> Variable
-          Sets
-        </SidebarLink>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
-
-export const SidebarSystems: React.FC<{
-  workspace: Workspace;
-  systems: System[];
-}> = ({ workspace, systems }) => {
-  const [open, setOpen] = useState(true);
-  return (
-    <Collapsible open={open} onOpenChange={setOpen} className="m-3 space-y-2">
-      <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground">
-        Your systems
-        <IconChevronRight
-          className={cn("h-3 w-3", open && "rotate-90", "transition-all")}
-        />
-      </CollapsibleTrigger>
-      <CollapsibleContent className="space-y-1">
-        {systems.length === 0 && (
-          <CreateSystemDialog workspace={workspace}>
-            <Button
-              className="flex w-full items-center justify-start gap-1.5 text-left"
-              variant="ghost"
-              size="sm"
-            >
-              <IconPlus className="h-4 w-4" /> New system
-            </Button>
-          </CreateSystemDialog>
-        )}
-        {systems.map((system) => (
-          <SystemCollapsible key={system.id} system={system} />
-        ))}
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarWorkspace.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarWorkspace.tsx
deleted file mode 100644
index a27c148f3..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarWorkspace.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useParams } from "next/navigation";
-import {
-  IconCategory,
-  IconChevronRight,
-  IconRocket,
-  IconTarget,
-} from "@tabler/icons-react";
-
-import { cn } from "@ctrlplane/ui";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@ctrlplane/ui/collapsible";
-
-import { useSidebar } from "./SidebarContext";
-import { SidebarLink } from "./SidebarLink";
-
-export const SidebarWorkspace: React.FC = () => {
-  const [open, setOpen] = useState(true);
-  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
-  const { setActiveSidebarItem } = useSidebar();
-  return (
-    <Collapsible open={open} onOpenChange={setOpen} className="m-3 space-y-2">
-      <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground">
-        Workspace
-        <IconChevronRight
-          className={cn("h-3 w-3", open && "rotate-90", "transition-all")}
-        />
-      </CollapsibleTrigger>
-      <CollapsibleContent className="space-y-0.5 text-sm">
-        {/* <SidebarLink href={`/${workspaceSlug}/dashboard`}>
-          <IconDashboard className="text-muted-foreground" /> Dashboard
-        </SidebarLink> */}
-        <SidebarLink href={`/${workspaceSlug}/systems`} exact>
-          <IconCategory className="h-4 w-4 text-muted-foreground" /> Systems
-        </SidebarLink>
-        <div className="ml-[15px] border-l">
-          <div className="ml-2 space-y-0.5">
-            <SidebarLink href={`/${workspaceSlug}/dependencies`}>
-              Dependencies
-            </SidebarLink>
-          </div>
-        </div>
-
-        <div onMouseEnter={() => setActiveSidebarItem("targets")}>
-          <SidebarLink href={`/${workspaceSlug}/targets`} hideActiveEffect>
-            <IconTarget className="h-4 w-4 text-muted-foreground" /> Targets
-          </SidebarLink>
-          <div className="ml-[15px] border-l">
-            <div className="ml-2 space-y-0.5">
-              <SidebarLink href={`/${workspaceSlug}/targets`}>List</SidebarLink>
-              <SidebarLink href={`/${workspaceSlug}/target-providers`}>
-                Providers
-              </SidebarLink>
-              <SidebarLink href={`/${workspaceSlug}/target-metadata-groups`}>
-                Groups
-              </SidebarLink>
-              <SidebarLink href={`/${workspaceSlug}/target-views`}>
-                Views
-              </SidebarLink>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <SidebarLink href={`/${workspaceSlug}/job-agents`} hideActiveEffect>
-            <IconRocket className="h-4 w-4 text-muted-foreground" /> Jobs
-          </SidebarLink>
-          <div className="ml-[15px] border-l">
-            <div className="ml-2 space-y-0.5">
-              <SidebarLink href={`/${workspaceSlug}/job-agents`}>
-                Agents
-              </SidebarLink>
-              <SidebarLink href={`/${workspaceSlug}/jobs`}>
-                Triggered
-              </SidebarLink>
-            </div>
-          </div>
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/_SidebarPopoverSystem.tsx b/apps/webservice/src/app/[workspaceSlug]/_SidebarPopoverSystem.tsx
new file mode 100644
index 000000000..5416b74e2
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/_SidebarPopoverSystem.tsx
@@ -0,0 +1,51 @@
+// "use client";
+
+// import type { Workspace } from "@ctrlplane/db/schema";
+
+// import { api } from "~/trpc/react";
+// import { SidebarLink } from "./SidebarLink";
+
+// export const SidebarPopoverSystem: React.FC<{
+//   systemId: string;
+//   workspace: Workspace;
+// }> = ({ workspace, systemId }) => {
+//   const system = api.system.byId.useQuery(systemId);
+//   const environments = api.environment.bySystemId.useQuery(systemId);
+//   const deployments = api.deployment.bySystemId.useQuery(systemId);
+//   return (
+//     <div className="space-y-4 text-sm">
+//       <div className="text-lg font-semibold">{system.data?.name}</div>
+
+//       <div className="space-y-1.5">
+//         <div className="text-xs font-semibold uppercase text-muted-foreground">
+//           Environments
+//         </div>
+//         <div>
+//           {environments.data?.map(({ name }) => (
+//             <SidebarLink
+//               href={`/${workspace.slug}/systems/${system.data?.slug}/environments`}
+//             >
+//               {name}
+//             </SidebarLink>
+//           ))}
+//         </div>
+//       </div>
+
+//       <div className="space-y-1.5">
+//         <div className="text-xs font-semibold uppercase text-muted-foreground">
+//           Deployments
+//         </div>
+//         <div>
+//           {deployments.data?.map(({ id, name, slug }) => (
+//             <SidebarLink
+//               key={id}
+//               href={`/${workspace.slug}/systems/${system.data?.slug}/deployments/${slug}`}
+//             >
+//               {name}
+//             </SidebarLink>
+//           ))}
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
diff --git a/apps/webservice/src/app/[workspaceSlug]/_SidebarSystems.tsx b/apps/webservice/src/app/[workspaceSlug]/_SidebarSystems.tsx
new file mode 100644
index 000000000..ef7a0e142
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/_SidebarSystems.tsx
@@ -0,0 +1,108 @@
+// "use client";
+
+// import type { System, Workspace } from "@ctrlplane/db/schema";
+// import { useState } from "react";
+// import { useParams } from "next/navigation";
+// import {
+//   IconChevronRight,
+//   IconPlant,
+//   IconPlus,
+//   IconRun,
+//   IconShip,
+//   IconVariable,
+// } from "@tabler/icons-react";
+// import _ from "lodash";
+// import { useLocalStorage } from "react-use";
+
+// import { cn } from "@ctrlplane/ui";
+// import { Button } from "@ctrlplane/ui/button";
+// import {
+//   Collapsible,
+//   CollapsibleContent,
+//   CollapsibleTrigger,
+// } from "@ctrlplane/ui/collapsible";
+
+// import { CreateSystemDialog } from "./_components/CreateSystem";
+// import { useSidebar } from "./SidebarContext";
+// import { SidebarLink } from "./SidebarLink";
+
+// const SystemCollapsible: React.FC<{ system: System }> = ({ system }) => {
+//   const { setActiveSidebarItem } = useSidebar();
+//   const [open, setOpen] = useLocalStorage(
+//     `sidebar-systems-${system.id}`,
+//     "false",
+//   );
+//   const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
+//   return (
+//     <Collapsible
+//       open={open === "true"}
+//       onOpenChange={() => setOpen(open === "true" ? "false" : "true")}
+//       className="space-y-1 text-sm"
+//       onMouseEnter={() => setActiveSidebarItem(`systems:${system.id}`)}
+//     >
+//       <CollapsibleTrigger className="flex w-full items-center gap-2 rounded-md px-2 py-1 hover:bg-neutral-800/50">
+//         <span className="truncate">{system.name}</span>
+//         <IconChevronRight
+//           className={cn(
+//             "h-3 w-3 text-muted-foreground transition-all",
+//             open === "true" && "rotate-90",
+//           )}
+//         />
+//       </CollapsibleTrigger>
+//       <CollapsibleContent className="ml-2">
+//         <SidebarLink
+//           href={`/${workspaceSlug}/systems/${system.slug}/deployments`}
+//         >
+//           <IconShip className="h-4 w-4 text-muted-foreground" /> Deployments
+//         </SidebarLink>
+//         <SidebarLink
+//           href={`/${workspaceSlug}/systems/${system.slug}/environments`}
+//         >
+//           <IconPlant className="h-4 w-4 text-muted-foreground" /> Environments
+//         </SidebarLink>
+//         <SidebarLink href={`/${workspaceSlug}/systems/${system.slug}/runbooks`}>
+//           <IconRun className="h-4 w-4 text-muted-foreground" /> Runbooks
+//         </SidebarLink>
+//         <SidebarLink
+//           href={`/${workspaceSlug}/systems/${system.slug}/variable-sets`}
+//         >
+//           <IconVariable className="h-4 w-4 text-muted-foreground" /> Variable
+//           Sets
+//         </SidebarLink>
+//       </CollapsibleContent>
+//     </Collapsible>
+//   );
+// };
+
+// export const SidebarSystems: React.FC<{
+//   workspace: Workspace;
+//   systems: System[];
+// }> = ({ workspace, systems }) => {
+//   const [open, setOpen] = useState(true);
+//   return (
+//     <Collapsible open={open} onOpenChange={setOpen} className="m-3 space-y-2">
+//       <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground">
+//         Your systems
+//         <IconChevronRight
+//           className={cn("h-3 w-3", open && "rotate-90", "transition-all")}
+//         />
+//       </CollapsibleTrigger>
+//       <CollapsibleContent className="space-y-1">
+//         {systems.length === 0 && (
+//           <CreateSystemDialog workspace={workspace}>
+//             <Button
+//               className="flex w-full items-center justify-start gap-1.5 text-left"
+//               variant="ghost"
+//               size="sm"
+//             >
+//               <IconPlus className="h-4 w-4" /> New system
+//             </Button>
+//           </CreateSystemDialog>
+//         )}
+//         {systems.map((system) => (
+//           <SystemCollapsible key={system.id} system={system} />
+//         ))}
+//       </CollapsibleContent>
+//     </Collapsible>
+//   );
+// };
diff --git a/apps/webservice/src/app/[workspaceSlug]/Search.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/SearchDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/Search.tsx
rename to apps/webservice/src/app/[workspaceSlug]/_components/SearchDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/layout.tsx
index bd579af9f..2010fc986 100644
--- a/apps/webservice/src/app/[workspaceSlug]/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/layout.tsx
@@ -2,6 +2,7 @@ import dynamic from "next/dynamic";
 import { notFound, redirect } from "next/navigation";
 
 import { auth } from "@ctrlplane/auth";
+import { SidebarInset, SidebarProvider } from "@ctrlplane/ui/sidebar";
 
 import { api } from "~/trpc/server";
 import { EnvironmentDrawer } from "./_components/environment-drawer/EnvironmentDrawer";
@@ -12,45 +13,47 @@ import { ReleaseDrawer } from "./_components/release-drawer/ReleaseDrawer";
 import { TargetDrawer } from "./_components/target-drawer/TargetDrawer";
 import { TerminalSessionsProvider } from "./_components/terminal/TerminalSessionsProvider";
 import { VariableSetDrawer } from "./_components/variable-set-drawer/VariableSetDrawer";
-import { SidebarPanels } from "./SidebarPanels";
+import { AppSidebar } from "./AppSidebar";
+import { AppSidebarPopoverProvider } from "./AppSidebarPopoverContext";
 
 const TerminalDrawer = dynamic(
   () => import("./_components/terminal/TerminalSessionsDrawer"),
   { ssr: false },
 );
 
-export default async function WorkspaceLayout({
-  children,
-  params,
-}: {
+type Props = {
   children: React.ReactNode;
   params: { workspaceSlug: string };
-}) {
+};
+
+export default async function WorkspaceLayout({
+  children,
+  params: { workspaceSlug },
+}: Props) {
   const session = await auth();
   if (session == null) redirect("/login");
 
-  const workspace = await api.workspace
-    .bySlug(params.workspaceSlug)
-    .catch(() => null);
-
+  const workspace = await api.workspace.bySlug(workspaceSlug).catch(() => null);
   if (workspace == null) notFound();
 
-  const systems = await api.system.list({ workspaceId: workspace.id });
   return (
-    <TerminalSessionsProvider>
-      <div className="h-screen">
-        <SidebarPanels workspace={workspace} systems={systems.items}>
-          {children}
-        </SidebarPanels>
-      </div>
-      <TargetDrawer />
-      <ReleaseDrawer />
-      <ReleaseChannelDrawer />
-      <EnvironmentDrawer />
-      <EnvironmentPolicyDrawer />
-      <VariableSetDrawer />
-      <JobDrawer />
-      <TerminalDrawer />
-    </TerminalSessionsProvider>
+    <AppSidebarPopoverProvider>
+      <TerminalSessionsProvider>
+        <SidebarProvider>
+          <AppSidebar workspace={workspace} />
+          <SidebarInset>{children}</SidebarInset>
+
+          <TargetDrawer />
+          <ReleaseDrawer />
+          <ReleaseChannelDrawer />
+          <EnvironmentDrawer />
+          <EnvironmentPolicyDrawer />
+          <VariableSetDrawer />
+          <JobDrawer />
+
+          <TerminalDrawer />
+        </SidebarProvider>
+      </TerminalSessionsProvider>
+    </AppSidebarPopoverProvider>
   );
 }
diff --git a/apps/webservice/src/app/globals.css b/apps/webservice/src/app/globals.css
index 068a498ef..84fce9a92 100644
--- a/apps/webservice/src/app/globals.css
+++ b/apps/webservice/src/app/globals.css
@@ -30,6 +30,15 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
@@ -58,6 +67,15 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+
+    --sidebar-background: 0 0% 0%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 
@@ -72,3 +90,12 @@
     scrollbar-width: none; /* Firefox */
   }
 }
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/apps/webservice/tailwind.config.ts b/apps/webservice/tailwind.config.ts
index 68bd41636..0a2ed5a00 100644
--- a/apps/webservice/tailwind.config.ts
+++ b/apps/webservice/tailwind.config.ts
@@ -14,6 +14,18 @@ export default {
         sans: ["var(--font-geist-sans)", ...fontFamily.sans],
         mono: ["var(--font-geist-mono)", ...fontFamily.mono],
       },
+      colors: {
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
     },
   },
   plugins: [require("@tailwindcss/typography"), require("tailwind-scrollbar")],
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 580a90344..80c9dbebf 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -27,7 +27,7 @@
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
@@ -38,11 +38,11 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@tabler/icons-react": "^3.17.0",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
@@ -55,6 +55,7 @@
     "react-resizable-panels": "^2.0.20",
     "react-stately": "^3.31.1",
     "recharts": "^2.1.12",
+    "sidebar": "^1.0.2",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/packages/ui/src/hooks/use-mobile.tsx b/packages/ui/src/hooks/use-mobile.tsx
new file mode 100644
index 000000000..a93d58393
--- /dev/null
+++ b/packages/ui/src/hooks/use-mobile.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/packages/ui/src/sheet.tsx b/packages/ui/src/sheet.tsx
new file mode 100644
index 000000000..dcac30a67
--- /dev/null
+++ b/packages/ui/src/sheet.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { cva } from "class-variance-authority";
+
+import { cn } from "./index";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/packages/ui/src/sidebar.tsx b/packages/ui/src/sidebar.tsx
new file mode 100644
index 000000000..b9b7c0de3
--- /dev/null
+++ b/packages/ui/src/sidebar.tsx
@@ -0,0 +1,772 @@
+"use client";
+
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { ViewVerticalIcon } from "@radix-ui/react-icons";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+import { Button } from "./button";
+import { useIsMobile } from "./hooks/use-mobile";
+import { cn } from "./index";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import { Sheet, SheetContent } from "./sheet";
+import { Skeleton } from "./skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open],
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed";
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      ],
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
+              className,
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  },
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="text-sidebar-foreground group peer hidden md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+          )}
+        />
+        <div
+          className={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className,
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <ViewVerticalIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "focus-visible:ring-sidebar-ring h-8 w-full bg-background shadow-none focus-visible:ring-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  },
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className,
+    )}
+    {...props}
+  />
+));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 953f6e798..6fe9103af 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -9,4 +9,20 @@ import baseConfig from "@ctrlplane/tailwind-config/web";
 export default {
   content: ["./src/**/*.tsx"],
   presets: [baseConfig],
+  theme: {
+    extend: {
+      colors: {
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+    },
+  },
 } satisfies Config;
diff --git a/packages/ui/unused.css b/packages/ui/unused.css
new file mode 100644
index 000000000..65f895be9
--- /dev/null
+++ b/packages/ui/unused.css
@@ -0,0 +1,31 @@
+
+@layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%
+  }
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 331cdbaf2..9ccd49da1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1470,7 +1470,7 @@ importers:
         specifier: ^1.1.0
         version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dialog':
-        specifier: ^1.0.5
+        specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.6
@@ -1503,7 +1503,7 @@ importers:
         specifier: ^2.0.0
         version: 2.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-separator':
-        specifier: ^1.0.3
+        specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
         specifier: ^1.1.0
@@ -1515,7 +1515,7 @@ importers:
         specifier: ^1.1.0
         version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
-        specifier: ^1.1.1
+        specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tabler/icons-react':
         specifier: ^3.17.0
@@ -1553,6 +1553,9 @@ importers:
       recharts:
         specifier: ^2.1.12
         version: 2.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      sidebar:
+        specifier: ^1.0.2
+        version: 1.0.2
       sonner:
         specifier: ^1.4.41
         version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -6526,6 +6529,10 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
+  bootstrap@3.4.1:
+    resolution: {integrity: sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==}
+    engines: {node: '>=6'}
+
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -11463,6 +11470,9 @@ packages:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
     engines: {node: '>= 0.4'}
 
+  sidebar@1.0.2:
+    resolution: {integrity: sha512-JvzZ6OLsvdVK0jo6jTHSfTApuHVHeAm3++UnAoHRpoVeTcW1nC7Xm8LRbRvtGXVSJsdeM6qfv5pgDZUXemgkDw==}
+
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -18565,6 +18575,8 @@ snapshots:
 
   boolbase@1.0.0: {}
 
+  bootstrap@3.4.1: {}
+
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
@@ -24926,6 +24938,10 @@ snapshots:
       get-intrinsic: 1.2.4
       object-inspect: 1.13.2
 
+  sidebar@1.0.2:
+    dependencies:
+      bootstrap: 3.4.1
+
   siginfo@2.0.0: {}
 
   signal-exit@3.0.7: {}
@@ -26343,7 +26359,7 @@ snapshots:
   vite@5.4.10(@types/node@22.8.1)(terser@5.36.0):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.47
+      postcss: 8.4.49
       rollup: 4.24.0
     optionalDependencies:
       '@types/node': 22.8.1

From db55f03d05b87b973a6cbe947388bc2d8fc67e0c Mon Sep 17 00:00:00 2001
From: Justin Brooks <justin@wandb.com>
Date: Sun, 17 Nov 2024 23:49:39 -0500
Subject: [PATCH 2/2] move layout around

---
 .../job-agents/JobAgentsGettingStarted.tsx    |   0
 .../(job)/job-agents/JobAgentsTable.tsx       |   0
 .../(job)/job-agents/integrations/page.tsx    |   0
 .../{ => (app)}/(job)/job-agents/page.tsx     |   0
 .../{ => (app)}/(job)/jobs/JobTable.tsx       |   0
 .../(job)/jobs/JobsGettingStarted.tsx         |   0
 .../{ => (app)}/(job)/jobs/page.tsx           |   0
 .../{ => (app)}/(job)/layout.tsx              |   0
 .../{ => (app)}/(targets)/layout.tsx          |   0
 .../CreateMetadataGroupDialog.tsx             |   0
 .../DeleteMetadataGroupDialog.tsx             |   0
 .../EditMetadataGroupDialog.tsx               |   0
 .../MetadataFilterInput.tsx                   |   0
 .../TargetGroupTable.tsx                      |   0
 .../TargetMetadataGroupsGettingStarted.tsx    |   0
 .../[groupId]/CombincationsTable.tsx          |   0
 .../target-metadata-groups/[groupId]/page.tsx |   0
 .../(targets)/target-metadata-groups/page.tsx |   0
 .../ProviderActionsDropdown.tsx               |   0
 .../TargetProvidersGettingStarted.tsx         |   0
 .../add/GoogleScanerConfig.tsx                |   0
 .../add/TargetProviderSelectCard.tsx          |   0
 .../(targets)/target-providers/add/page.tsx   |   0
 .../integrations/GoogleActionButton.tsx       |   0
 .../integrations/google/GoogleDialog.tsx      |   0
 .../google/UpdateGoogleProviderDialog.tsx     |   0
 .../target-providers/integrations/page.tsx    |   0
 .../(targets)/target-providers/page.tsx       |   0
 .../target-views/TargetViewsTable.tsx         |   0
 .../(targets)/target-views/page.tsx           |   0
 .../targets/TargetGettingStarted.tsx          |   2 +-
 .../(targets)/targets/TargetPageContent.tsx   |   0
 .../(targets)/targets/TargetsTable.tsx        |   0
 .../targets/[targetId]/ReleaseCell.tsx        |   0
 .../(targets)/targets/[targetId]/layout.tsx   |   0
 .../(targets)/targets/[targetId]/page.tsx     |   0
 .../targets/[targetId]/variables/page.tsx     |   0
 .../targets/[targetId]/visualize/DepEdge.tsx  |   0
 .../ResourceVisualizationDiagram.tsx          |   0
 .../targets/[targetId]/visualize/edges.ts     |   0
 .../visualize/nodes/DeploymentNode.tsx        |   0
 .../visualize/nodes/EnvironmentNode.tsx       |   0
 .../visualize/nodes/ProviderNode.tsx          |   0
 .../visualize/nodes/ResourceNode.tsx          |   0
 .../[targetId]/visualize/nodes/SystemNode.tsx |   0
 .../targets/[targetId]/visualize/page.tsx     |   0
 .../{ => (app)}/(targets)/targets/page.tsx    |   0
 .../app/[workspaceSlug]/(app)/AppSidebar.tsx  |  38 +++++
 .../(app)/AppSidebarContent.tsx               | 111 +++++++++++++
 .../{ => (app)}/AppSidebarCreateMenu.tsx      |  10 +-
 .../{ => (app)}/AppSidebarHeader.tsx          |   2 +-
 .../{ => (app)}/AppSidebarPopover.tsx         |   4 +-
 .../{ => (app)}/AppSidebarPopoverContext.tsx  |   0
 .../{ => (app)}/_SidebarPopoverSystem.tsx     |   0
 .../{ => (app)}/_SidebarSystems.tsx           |   0
 .../dashboard/TargetAnnotationPieChart.tsx    |   0
 .../{ => (app)}/dashboard/page.tsx            |   2 +-
 .../{ => (app)}/dashboards/Dashboard.tsx      |   0
 .../dashboards/DashboardContext.tsx           |   0
 .../{ => (app)}/dashboards/DashboardGrid.tsx  |   0
 .../[dashboardId]/DashboardTitle.tsx          |   0
 .../dashboards/[dashboardId]/WidgetMenu.tsx   |   0
 .../dashboards/[dashboardId]/page.tsx         |   0
 .../{ => (app)}/dashboards/page.tsx           |   0
 .../dashboards/widgets/HelperButton.tsx       |   0
 .../dashboards/widgets/TargetWidgets.tsx      |   0
 .../dashboards/widgets/TextHeading.tsx        |   0
 .../{ => (app)}/dashboards/widgets/index.tsx  |   0
 .../{ => (app)}/dashboards/widgets/spec.ts    |   0
 .../DependenciesGettingStarted.tsx            |   0
 .../dependencies/DependencyDiagram.tsx        |   2 +-
 .../{ => (app)}/dependencies/page.tsx         |   0
 .../src/app/[workspaceSlug]/(app)/layout.tsx  |  54 +++++++
 .../app/[workspaceSlug]/{ => (app)}/page.tsx  |   0
 .../{ => (app)}/systems/JobHistoryChart.tsx   |   0
 .../systems/SystemActionsDropdown.tsx         |   0
 .../(app)/systems/SystemFilter.tsx            |   3 +
 .../systems/SystemGettingStarted.tsx          |   2 +-
 .../{ => (app)}/systems/SystemsBreadcrumb.tsx |   2 +-
 .../{ => (app)}/systems/SystemsList.tsx       |   8 +-
 .../{ => (app)}/systems/SystemsTable.tsx      |   0
 .../{ => (app)}/systems/TopNav.tsx            |   0
 .../_components/DeleteSystemDialog.tsx        |   0
 .../_components/EditAgentConfigDialog.tsx     |   0
 .../_components/EditSystemDialog.tsx          |   0
 .../_components/variables/ConfigFields.tsx    |   0
 .../_components/variables/VariableInputs.tsx  |   0
 .../[systemSlug]/deployments/DeployButton.tsx |   0
 .../deployments/DeploymentBarChart.tsx        |   0
 .../deployments/DeploymentGettingStarted.tsx  |   2 +-
 .../deployments/ReleaseDropdownMenu.tsx       |   0
 .../[systemSlug]/deployments/TableCells.tsx   |   0
 .../deployments/TableDeployments.tsx          |   0
 .../[deploymentSlug]/DeploymentNavBar.tsx     |   0
 .../EditDeploymentSection.tsx                 |   0
 .../[deploymentSlug]/JobAgentSection.tsx      |   0
 .../[deploymentSlug]/NavigationMenuAction.tsx |   0
 .../[deploymentSlug]/NavigationMenuTab.tsx    |   0
 .../[deploymentSlug]/SettingsSidebar.tsx      |   0
 .../job-agent/JobAgentConfigForm.tsx          |   0
 .../configure/job-agent/page.tsx              |   0
 .../hooks/CreateHookDialog.tsx                |   0
 .../hooks/DeleteHookDialog.tsx                |   0
 .../[deploymentSlug]/hooks/EditHookDialog.tsx |   0
 .../hooks/HookActionsDropdown.tsx             |   0
 .../[deploymentSlug]/hooks/HooksTable.tsx     |   0
 .../[deploymentSlug]/hooks/page.tsx           |   0
 .../deployments/[deploymentSlug]/layout.tsx   |   0
 .../deployments/[deploymentSlug]/page.tsx     |   0
 .../CreateReleaseChannelDialog.tsx            |   0
 .../release-channels/ReleaseChannelsTable.tsx |   0
 .../release-channels/page.tsx                 |   0
 .../releases/CreateVariableDialog.tsx         |   2 +-
 .../releases/DeploymentPageContent.tsx        |   0
 .../releases/ReleaseDistributionBarChart.tsx  |   0
 .../releases/ReleaseDistributionPopover.tsx   |   0
 .../releases/[versionId]/FlowDiagram.tsx      |   0
 .../releases/[versionId]/FlowNode.tsx         |   0
 .../releases/[versionId]/FlowPolicyNode.tsx   |   0
 .../releases/[versionId]/JobDropdownMenu.tsx  |   0
 .../releases/[versionId]/JobsTable.tsx        |   0
 .../[versionId]/PolicyApprovalRow.tsx         |   0
 .../[versionId]/ReleaseSequencingNode.tsx     |   0
 .../[versionId]/TargetReleaseTable.tsx        |   0
 .../releases/[versionId]/TriggerNode.tsx      |   0
 .../releases/[versionId]/page.tsx             |   0
 .../releases/[versionId]/useReleaseChannel.ts |   0
 .../[deploymentSlug]/releases/page.tsx        |   0
 .../targets/[targetId]/page.tsx               |   0
 .../[deploymentSlug]/targets/page.tsx         |   0
 .../variables/AddVariableValueDialog.tsx      |   2 +-
 .../variables/EditVariableDialog.tsx          |   0
 .../variables/VariableDropdown.tsx            |   0
 .../variables/VariableTable.tsx               |   0
 .../variables/VariableValueDropdown.tsx       |   2 +-
 .../[deploymentSlug]/variables/page.tsx       |   0
 .../variables/variable-data.ts                |   0
 .../systems/[systemSlug]/deployments/page.tsx |   0
 .../[systemSlug]/deployments/status-color.tsx |   0
 .../environments/DeleteNodeDialog.tsx         |   0
 .../environments/EnvFlowBuilder.tsx           |   2 +-
 .../environments/EnvFlowPanel.tsx             |   0
 .../environments/FlowNodeTypes.tsx            |   0
 .../environments/SidepanelContext.tsx         |   0
 .../TargetFilterUniquenessIndicator.tsx       |   0
 .../[environmentId]/TargetCharts.tsx          |   0
 .../environments/[environmentId]/page.tsx     |   0
 .../[systemSlug]/environments/edges.ts        |   0
 .../[systemSlug]/environments/layout.tsx      |   0
 .../[systemSlug]/environments/page.tsx        |   0
 .../environments/useMatchSorter.ts            |   0
 .../{ => (app)}/systems/[systemSlug]/page.tsx |   0
 .../runbooks/EditRunbookDialog.tsx            |   0
 .../runbooks/RunbookGettingStarted.tsx        |   0
 .../[systemSlug]/runbooks/RunbookRow.tsx      |   0
 .../[systemSlug]/runbooks/TriggerRunbook.tsx  |   2 +-
 .../runbooks/create/CreateRunbookForm.tsx     |   0
 .../runbooks/create/RunbookVariableEditor.tsx |   2 +-
 .../[systemSlug]/runbooks/create/page.tsx     |   0
 .../systems/[systemSlug]/runbooks/page.tsx    |   0
 .../variable-sets/CreateVariableSetDialog.tsx |   0
 .../GettingStartedVariableSets.tsx            |   0
 .../variable-sets/VariableSetsTable.tsx       |   0
 .../variable-sets/[variableSetId]/page.tsx    |   0
 .../[systemSlug]/variable-sets/page.tsx       |   0
 .../{ => (app)}/systems/page.tsx              |   0
 .../{ => (app)}/terminal/Terminal.tsx         |   0
 .../{ => (app)}/terminal/page.tsx             |   0
 .../src/app/[workspaceSlug]/AppSidebar.tsx    | 134 ----------------
 .../app/[workspaceSlug]/SettingsSidebar.tsx   |  47 ------
 .../app/[workspaceSlug]/SidebarNavMain.tsx    | 147 +++++++++++-------
 .../_components/job-drawer/JobDrawer.tsx      |   4 +-
 .../src/app/[workspaceSlug]/layout.tsx        |  60 +------
 .../settings/(settings)/layout.tsx            |   7 -
 .../settings/SettingsSidebar.tsx              |  65 ++++++++
 .../account/api/ApiSection.tsx                |   0
 .../{(settings) => }/account/api/page.tsx     |   0
 .../account/profile/GithubRedirectButton.tsx  |   0
 .../{(settings) => }/account/profile/page.tsx |   0
 .../app/[workspaceSlug]/settings/layout.tsx   |  30 ++++
 .../general/WorkspaceDeleteSection.tsx        |   0
 .../general/WorkspaceUpdateSection.tsx        |   0
 .../workspace/general/page.tsx                |   0
 .../github/DeleteGithubUserButton.tsx         |   0
 .../github/DisconnectDropdownActionButton.tsx |   0
 .../github/GithubAddOrgDialog.tsx             |   0
 .../github/GithubConnectedOrgs.tsx            |   0
 .../github/GithubRemoveOrgDialog.tsx          |   0
 .../github/OrgActionDropdown.tsx              |   0
 .../SelectPreconnectedOrgDialogContent.tsx    |   0
 .../(integration)/github/page.tsx             |   0
 .../google/GoogleIntegration.tsx              |   0
 .../(integration)/google/page.tsx             |   0
 .../integrations/(integration)/layout.tsx     |   0
 .../workspace/integrations/page.tsx           |   0
 .../workspace/members/MembersExport.tsx       |   0
 .../workspace/members/MembersTable.tsx        |   0
 .../members/WorkspaceDomainMatching.tsx       |   0
 .../workspace/members/page.tsx                |   0
 .../workspace/overview/page.tsx               |   0
 .../[workspaceSlug]/systems/SystemFilter.tsx  |   3 -
 .../__test__/job-variables-deployment.test.ts |   1 +
 202 files changed, 430 insertions(+), 322 deletions(-)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(job)/job-agents/JobAgentsGettingStarted.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(job)/job-agents/JobAgentsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(job)/job-agents/integrations/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(job)/job-agents/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(job)/jobs/JobTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(job)/jobs/JobsGettingStarted.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(job)/jobs/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(job)/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-metadata-groups/DeleteMetadataGroupDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-metadata-groups/MetadataFilterInput.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-metadata-groups/TargetGroupTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-metadata-groups/TargetMetadataGroupsGettingStarted.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-metadata-groups/[groupId]/CombincationsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-metadata-groups/[groupId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-metadata-groups/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/ProviderActionsDropdown.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/TargetProvidersGettingStarted.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/add/GoogleScanerConfig.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/add/TargetProviderSelectCard.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/add/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/integrations/GoogleActionButton.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/integrations/google/GoogleDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/integrations/google/UpdateGoogleProviderDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/integrations/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-providers/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-views/TargetViewsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/target-views/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/TargetGettingStarted.tsx (96%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/TargetPageContent.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/TargetsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/ReleaseCell.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/variables/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/visualize/DepEdge.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/visualize/ResourceVisualizationDiagram.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/visualize/edges.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/visualize/nodes/DeploymentNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/visualize/nodes/EnvironmentNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/visualize/nodes/ProviderNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/visualize/nodes/ResourceNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/visualize/nodes/SystemNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/[targetId]/visualize/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/(targets)/targets/page.tsx (100%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebar.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarContent.tsx
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/AppSidebarCreateMenu.tsx (90%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/AppSidebarHeader.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/AppSidebarPopover.tsx (77%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/AppSidebarPopoverContext.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/_SidebarPopoverSystem.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/_SidebarSystems.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboard/TargetAnnotationPieChart.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboard/page.tsx (95%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/Dashboard.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/DashboardContext.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/DashboardGrid.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/[dashboardId]/DashboardTitle.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/[dashboardId]/WidgetMenu.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/[dashboardId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/widgets/HelperButton.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/widgets/TargetWidgets.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/widgets/TextHeading.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/widgets/index.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dashboards/widgets/spec.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dependencies/DependenciesGettingStarted.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dependencies/DependencyDiagram.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/dependencies/page.tsx (100%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/layout.tsx
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/JobHistoryChart.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/SystemActionsDropdown.tsx (100%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemFilter.tsx
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/SystemGettingStarted.tsx (94%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/SystemsBreadcrumb.tsx (97%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/SystemsList.tsx (93%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/SystemsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/TopNav.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/_components/DeleteSystemDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/_components/EditAgentConfigDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/_components/EditSystemDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/_components/variables/ConfigFields.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/_components/variables/VariableInputs.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/DeployButton.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/DeploymentBarChart.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/DeploymentGettingStarted.tsx (93%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/ReleaseDropdownMenu.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/TableCells.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/TableDeployments.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ReleaseSequencingNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/targets/[targetId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/targets/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/deployments/status-color.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/DeleteNodeDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/EnvFlowBuilder.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/EnvFlowPanel.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/FlowNodeTypes.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/SidepanelContext.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/[environmentId]/TargetCharts.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/[environmentId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/edges.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/environments/useMatchSorter.ts (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/runbooks/RunbookGettingStarted.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/runbooks/RunbookRow.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/runbooks/TriggerRunbook.tsx (97%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/runbooks/create/CreateRunbookForm.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx (98%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/runbooks/create/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/runbooks/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/variable-sets/VariableSetsTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/variable-sets/[variableSetId]/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/[systemSlug]/variable-sets/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/systems/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/terminal/Terminal.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/{ => (app)}/terminal/page.tsx (100%)
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/AppSidebar.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/SettingsSidebar.tsx
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/settings/(settings)/layout.tsx
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/settings/SettingsSidebar.tsx
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/account/api/ApiSection.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/account/api/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/account/profile/GithubRedirectButton.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/account/profile/page.tsx (100%)
 create mode 100644 apps/webservice/src/app/[workspaceSlug]/settings/layout.tsx
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/general/WorkspaceDeleteSection.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/general/WorkspaceUpdateSection.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/general/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/github/DeleteGithubUserButton.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/github/DisconnectDropdownActionButton.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/github/GithubAddOrgDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/github/GithubConnectedOrgs.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/github/GithubRemoveOrgDialog.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/github/OrgActionDropdown.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/github/SelectPreconnectedOrgDialogContent.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/github/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/google/GoogleIntegration.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/google/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/(integration)/layout.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/integrations/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/members/MembersExport.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/members/MembersTable.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/members/WorkspaceDomainMatching.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/members/page.tsx (100%)
 rename apps/webservice/src/app/[workspaceSlug]/settings/{(settings) => }/workspace/overview/page.tsx (100%)
 delete mode 100644 apps/webservice/src/app/[workspaceSlug]/systems/SystemFilter.tsx

diff --git a/apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/JobAgentsGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/JobAgentsGettingStarted.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/JobAgentsGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/JobAgentsGettingStarted.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/JobAgentsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/JobAgentsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/JobAgentsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/JobAgentsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/integrations/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/integrations/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/integrations/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/integrations/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(job)/job-agents/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(job)/jobs/JobTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(job)/jobs/JobTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(job)/jobs/JobsGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobsGettingStarted.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(job)/jobs/JobsGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/JobsGettingStarted.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(job)/jobs/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(job)/jobs/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(job)/jobs/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(job)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(job)/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(job)/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(job)/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/DeleteMetadataGroupDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/DeleteMetadataGroupDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/DeleteMetadataGroupDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/DeleteMetadataGroupDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/MetadataFilterInput.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/MetadataFilterInput.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/MetadataFilterInput.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/MetadataFilterInput.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/TargetGroupTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/TargetGroupTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/TargetGroupTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/TargetGroupTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/TargetMetadataGroupsGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/TargetMetadataGroupsGettingStarted.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/TargetMetadataGroupsGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/TargetMetadataGroupsGettingStarted.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/[groupId]/CombincationsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/[groupId]/CombincationsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/[groupId]/CombincationsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/[groupId]/CombincationsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/[groupId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/[groupId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/[groupId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/[groupId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-metadata-groups/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/ProviderActionsDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/ProviderActionsDropdown.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/ProviderActionsDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/ProviderActionsDropdown.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/TargetProvidersGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/TargetProvidersGettingStarted.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/TargetProvidersGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/TargetProvidersGettingStarted.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/add/GoogleScanerConfig.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/add/GoogleScanerConfig.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/add/GoogleScanerConfig.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/add/GoogleScanerConfig.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/add/TargetProviderSelectCard.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/add/TargetProviderSelectCard.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/add/TargetProviderSelectCard.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/add/TargetProviderSelectCard.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/add/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/add/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/add/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/add/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/integrations/GoogleActionButton.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/integrations/GoogleActionButton.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/integrations/GoogleActionButton.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/integrations/GoogleActionButton.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/integrations/google/GoogleDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/integrations/google/GoogleDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/integrations/google/GoogleDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/integrations/google/GoogleDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/integrations/google/UpdateGoogleProviderDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/integrations/google/UpdateGoogleProviderDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/integrations/google/UpdateGoogleProviderDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/integrations/google/UpdateGoogleProviderDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/integrations/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/integrations/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/integrations/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/integrations/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-providers/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-providers/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-views/TargetViewsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-views/TargetViewsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-views/TargetViewsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-views/TargetViewsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/target-views/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-views/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/target-views/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/target-views/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/TargetGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/TargetGettingStarted.tsx
similarity index 96%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/TargetGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/TargetGettingStarted.tsx
index 50f3f516b..f2b1fecbb 100644
--- a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/TargetGettingStarted.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/TargetGettingStarted.tsx
@@ -4,7 +4,7 @@ import { IconTopologyComplex } from "@tabler/icons-react";
 
 import { Button, buttonVariants } from "@ctrlplane/ui/button";
 
-import { CreateTargetDialog } from "../../_components/CreateTarget";
+import { CreateTargetDialog } from "../../../_components/CreateTarget";
 
 export const TargetGettingStarted: React.FC<{ workspace: Workspace }> = ({
   workspace,
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/TargetPageContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/TargetPageContent.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/TargetPageContent.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/TargetPageContent.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/TargetsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/TargetsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/TargetsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/TargetsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/ReleaseCell.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/ReleaseCell.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/ReleaseCell.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/ReleaseCell.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/variables/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/variables/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/variables/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/variables/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/DepEdge.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/DepEdge.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/DepEdge.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/DepEdge.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/ResourceVisualizationDiagram.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/ResourceVisualizationDiagram.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/ResourceVisualizationDiagram.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/ResourceVisualizationDiagram.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/edges.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/edges.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/edges.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/edges.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/DeploymentNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/DeploymentNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/DeploymentNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/DeploymentNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/EnvironmentNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/EnvironmentNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/EnvironmentNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/EnvironmentNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/ProviderNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/ProviderNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/ProviderNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/ProviderNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/ResourceNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/ResourceNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/ResourceNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/ResourceNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/SystemNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/SystemNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/nodes/SystemNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/nodes/SystemNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/[targetId]/visualize/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(targets)/targets/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/(targets)/targets/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/(targets)/targets/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebar.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebar.tsx
new file mode 100644
index 000000000..c07931933
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebar.tsx
@@ -0,0 +1,38 @@
+import type { Workspace } from "@ctrlplane/db/schema";
+import React from "react";
+
+import { SidebarContent, SidebarHeader } from "@ctrlplane/ui/sidebar";
+
+import { api } from "~/trpc/server";
+import { AppSidebarSystem, AppSidebarWorkspace } from "./AppSidebarContent";
+import { AppSidebarHeader } from "./AppSidebarHeader";
+import { AppSidebarPopover } from "./AppSidebarPopover";
+import { SidebarWithPopover } from "./AppSidebarPopoverContext";
+
+export const AppSidebar: React.FC<{ workspace: Workspace }> = async ({
+  workspace,
+}) => {
+  const [workspaces, viewer, systems] = await Promise.all([
+    api.workspace.list(),
+    api.user.viewer(),
+    api.system.list({ workspaceId: workspace.id }),
+  ]);
+
+  return (
+    <SidebarWithPopover>
+      <AppSidebarPopover />
+      <SidebarHeader>
+        <AppSidebarHeader
+          workspace={workspace}
+          workspaces={workspaces}
+          viewer={viewer}
+          systems={systems.items}
+        />
+      </SidebarHeader>
+      <SidebarContent>
+        <AppSidebarWorkspace workspaceSlug={workspace.slug} />
+        <AppSidebarSystem systems={systems.items} />
+      </SidebarContent>
+    </SidebarWithPopover>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarContent.tsx
new file mode 100644
index 000000000..7d802a76e
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarContent.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import type { System } from "@ctrlplane/db/schema";
+import { useMemo } from "react";
+import {
+  IconCategory,
+  IconObjectScan,
+  IconPlant,
+  IconRocket,
+  IconRun,
+  IconShip,
+  IconVariable,
+} from "@tabler/icons-react";
+
+import { SidebarNavMain } from "../SidebarNavMain";
+
+const navMain = (prefix: string) => [
+  {
+    title: "Systems",
+    icon: IconCategory,
+    isActive: true,
+    items: [
+      {
+        title: "Dependencies",
+        url: `${prefix}/dependencies`,
+        isActive: true,
+      },
+    ],
+  },
+  {
+    title: "Resources",
+    popoverId: "targets",
+    icon: IconObjectScan,
+    isActive: true,
+    items: [
+      {
+        title: "List",
+        url: `${prefix}/targets`,
+      },
+      {
+        title: "Providers",
+        url: `${prefix}/target-providers`,
+      },
+      {
+        title: "Groups",
+        url: `${prefix}/target-metadata-groups`,
+      },
+      {
+        title: "Views",
+        url: `${prefix}/target-views`,
+      },
+    ],
+  },
+  {
+    title: "Jobs",
+    icon: IconRocket,
+    items: [
+      {
+        title: "Agents",
+        url: "#",
+      },
+      {
+        title: "Runs",
+        url: "#",
+      },
+    ],
+  },
+];
+
+export const AppSidebarWorkspace: React.FC<{ workspaceSlug: string }> = ({
+  workspaceSlug,
+}) => {
+  const items = useMemo(() => navMain(`/${workspaceSlug}`), [workspaceSlug]);
+  return <SidebarNavMain title="Workspace" items={items} />;
+};
+
+export const AppSidebarSystem: React.FC<{
+  systems: System[];
+}> = ({ systems }) => {
+  const items = useMemo(
+    () =>
+      systems.map((s) => ({
+        title: s.name,
+        isActive: true,
+        items: [
+          {
+            title: "Environments",
+            icon: IconPlant,
+            url: "#",
+          },
+          {
+            title: "Deployements",
+            icon: IconShip,
+            url: "#",
+          },
+          {
+            title: "Runbooks",
+            icon: IconRun,
+            url: "#",
+          },
+          {
+            title: "Variable Sets",
+            icon: IconVariable,
+            url: "#",
+          },
+        ],
+      })),
+    [systems],
+  );
+  return <SidebarNavMain title="Systems" items={items} />;
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/AppSidebarCreateMenu.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarCreateMenu.tsx
similarity index 90%
rename from apps/webservice/src/app/[workspaceSlug]/AppSidebarCreateMenu.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarCreateMenu.tsx
index f683fb658..451d8a300 100644
--- a/apps/webservice/src/app/[workspaceSlug]/AppSidebarCreateMenu.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarCreateMenu.tsx
@@ -16,11 +16,11 @@ import {
 } from "@ctrlplane/ui/dropdown-menu";
 
 import { api } from "~/trpc/react";
-import { CreateDeploymentDialog } from "./_components/CreateDeployment";
-import { CreateReleaseDialog } from "./_components/CreateRelease";
-import { CreateSystemDialog } from "./_components/CreateSystem";
-import { CreateTargetDialog } from "./_components/CreateTarget";
-import { CreateSessionDialog } from "./_components/terminal/CreateDialogSession";
+import { CreateDeploymentDialog } from "../_components/CreateDeployment";
+import { CreateReleaseDialog } from "../_components/CreateRelease";
+import { CreateSystemDialog } from "../_components/CreateSystem";
+import { CreateTargetDialog } from "../_components/CreateTarget";
+import { CreateSessionDialog } from "../_components/terminal/CreateDialogSession";
 
 export const AppSidebarCreateMenu: React.FC<{
   workspace: Workspace;
diff --git a/apps/webservice/src/app/[workspaceSlug]/AppSidebarHeader.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarHeader.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/AppSidebarHeader.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarHeader.tsx
index 7860aedb4..70f9c5843 100644
--- a/apps/webservice/src/app/[workspaceSlug]/AppSidebarHeader.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarHeader.tsx
@@ -22,7 +22,7 @@ import {
 import { SidebarMenu, SidebarMenuItem } from "@ctrlplane/ui/sidebar";
 
 import { api } from "~/trpc/react";
-import { SearchDialog } from "./_components/SearchDialog";
+import { SearchDialog } from "../_components/SearchDialog";
 import { AppSidebarCreateMenu } from "./AppSidebarCreateMenu";
 
 const WorkspaceDropdown: React.FC<{
diff --git a/apps/webservice/src/app/[workspaceSlug]/AppSidebarPopover.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarPopover.tsx
similarity index 77%
rename from apps/webservice/src/app/[workspaceSlug]/AppSidebarPopover.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarPopover.tsx
index 81d0e4fef..adb987a02 100644
--- a/apps/webservice/src/app/[workspaceSlug]/AppSidebarPopover.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarPopover.tsx
@@ -1,13 +1,15 @@
 "use client";
 
 import React from "react";
+import { useKey } from "react-use";
 
 import { Popover, PopoverAnchor, PopoverContent } from "@ctrlplane/ui/popover";
 
 import { useSidebarPopover } from "./AppSidebarPopoverContext";
 
 export const AppSidebarPopover: React.FC = () => {
-  const { activeSidebarItem } = useSidebarPopover();
+  const { activeSidebarItem, setActiveSidebarItem } = useSidebarPopover();
+  useKey("Escape", () => setActiveSidebarItem(null));
   return (
     <Popover open={activeSidebarItem != null}>
       <PopoverAnchor className="w-full" />
diff --git a/apps/webservice/src/app/[workspaceSlug]/AppSidebarPopoverContext.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarPopoverContext.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/AppSidebarPopoverContext.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/AppSidebarPopoverContext.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/_SidebarPopoverSystem.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_SidebarPopoverSystem.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/_SidebarPopoverSystem.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/_SidebarPopoverSystem.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/_SidebarSystems.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/_SidebarSystems.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/_SidebarSystems.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/_SidebarSystems.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboard/TargetAnnotationPieChart.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/TargetAnnotationPieChart.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboard/TargetAnnotationPieChart.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/TargetAnnotationPieChart.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboard/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/page.tsx
similarity index 95%
rename from apps/webservice/src/app/[workspaceSlug]/dashboard/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/page.tsx
index fdf6bf80c..4eb034341 100644
--- a/apps/webservice/src/app/[workspaceSlug]/dashboard/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboard/page.tsx
@@ -3,7 +3,7 @@ import { notFound } from "next/navigation";
 
 import { Card } from "@ctrlplane/ui/card";
 
-import { api } from "../../../trpc/server";
+import { api } from "../../../../trpc/server";
 import { JobHistoryChart } from "../systems/JobHistoryChart";
 import { TargetAnnotationPieChart } from "./TargetAnnotationPieChart";
 
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/Dashboard.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/Dashboard.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/Dashboard.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/Dashboard.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/DashboardContext.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/DashboardContext.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/DashboardContext.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/DashboardContext.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/DashboardGrid.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/DashboardGrid.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/DashboardGrid.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/DashboardGrid.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/[dashboardId]/DashboardTitle.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/[dashboardId]/DashboardTitle.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/[dashboardId]/DashboardTitle.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/[dashboardId]/DashboardTitle.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/[dashboardId]/WidgetMenu.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/[dashboardId]/WidgetMenu.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/[dashboardId]/WidgetMenu.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/[dashboardId]/WidgetMenu.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/[dashboardId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/[dashboardId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/[dashboardId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/[dashboardId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/HelperButton.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/HelperButton.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/HelperButton.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/HelperButton.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/TargetWidgets.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/TargetWidgets.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/TargetWidgets.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/TargetWidgets.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/TextHeading.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/TextHeading.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/TextHeading.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/TextHeading.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/index.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/index.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/index.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/index.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/spec.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/spec.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dashboards/widgets/spec.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dashboards/widgets/spec.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/dependencies/DependenciesGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dependencies/DependenciesGettingStarted.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dependencies/DependenciesGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dependencies/DependenciesGettingStarted.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/dependencies/DependencyDiagram.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dependencies/DependencyDiagram.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/dependencies/DependencyDiagram.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dependencies/DependencyDiagram.tsx
index 9f45d64be..ba84db0a4 100644
--- a/apps/webservice/src/app/[workspaceSlug]/dependencies/DependencyDiagram.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/dependencies/DependencyDiagram.tsx
@@ -31,7 +31,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "@ctrlplane/ui/popover";
 
 import { api } from "~/trpc/react";
-import { getLayoutedElementsDagre } from "../_components/reactflow/layout";
+import { getLayoutedElementsDagre } from "../../_components/reactflow/layout";
 
 const useOnLayout = () => {
   const { getNodes, fitView, setNodes, setEdges, getEdges } = useReactFlow();
diff --git a/apps/webservice/src/app/[workspaceSlug]/dependencies/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/dependencies/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/dependencies/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/dependencies/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/layout.tsx
new file mode 100644
index 000000000..cb4fc3026
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/layout.tsx
@@ -0,0 +1,54 @@
+import dynamic from "next/dynamic";
+import { notFound, redirect } from "next/navigation";
+
+import { auth } from "@ctrlplane/auth";
+import { SidebarInset } from "@ctrlplane/ui/sidebar";
+
+import { api } from "~/trpc/server";
+import { EnvironmentDrawer } from "../_components/environment-drawer/EnvironmentDrawer";
+import { EnvironmentPolicyDrawer } from "../_components/environment-policy-drawer/EnvironmentPolicyDrawer";
+import { JobDrawer } from "../_components/job-drawer/JobDrawer";
+import { ReleaseChannelDrawer } from "../_components/release-channel-drawer/ReleaseChannelDrawer";
+import { ReleaseDrawer } from "../_components/release-drawer/ReleaseDrawer";
+import { TargetDrawer } from "../_components/target-drawer/TargetDrawer";
+import { VariableSetDrawer } from "../_components/variable-set-drawer/VariableSetDrawer";
+import { AppSidebar } from "./AppSidebar";
+import { AppSidebarPopoverProvider } from "./AppSidebarPopoverContext";
+
+const TerminalDrawer = dynamic(
+  () => import("../_components/terminal/TerminalSessionsDrawer"),
+  { ssr: false },
+);
+
+type Props = {
+  children: React.ReactNode;
+  params: { workspaceSlug: string };
+};
+
+export default async function WorkspaceLayout({
+  children,
+  params: { workspaceSlug },
+}: Props) {
+  const session = await auth();
+  if (session == null) redirect("/login");
+
+  const workspace = await api.workspace.bySlug(workspaceSlug).catch(() => null);
+  if (workspace == null) notFound();
+
+  return (
+    <AppSidebarPopoverProvider>
+      <AppSidebar workspace={workspace} />
+      <SidebarInset>{children}</SidebarInset>
+
+      <TargetDrawer />
+      <ReleaseDrawer />
+      <ReleaseChannelDrawer />
+      <EnvironmentDrawer />
+      <EnvironmentPolicyDrawer />
+      <VariableSetDrawer />
+      <JobDrawer />
+
+      <TerminalDrawer />
+    </AppSidebarPopoverProvider>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/JobHistoryChart.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/JobHistoryChart.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/JobHistoryChart.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/JobHistoryChart.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/SystemActionsDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemActionsDropdown.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/SystemActionsDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemActionsDropdown.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemFilter.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemFilter.tsx
new file mode 100644
index 000000000..07fc4f5af
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemFilter.tsx
@@ -0,0 +1,3 @@
+import type { Filter } from "../../_components/filter/Filter";
+
+export type SystemFilter = Filter<"name" | "slug", string>;
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/SystemGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemGettingStarted.tsx
similarity index 94%
rename from apps/webservice/src/app/[workspaceSlug]/systems/SystemGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemGettingStarted.tsx
index f3712804f..a77055fad 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/SystemGettingStarted.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemGettingStarted.tsx
@@ -3,7 +3,7 @@ import { IconTopologyComplex } from "@tabler/icons-react";
 
 import { Button } from "@ctrlplane/ui/button";
 
-import { CreateSystemDialog } from "../_components/CreateSystem";
+import { CreateSystemDialog } from "../../_components/CreateSystem";
 
 export const SystemGettingStarted: React.FC<{
   workspace: Workspace;
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/SystemsBreadcrumb.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsBreadcrumb.tsx
similarity index 97%
rename from apps/webservice/src/app/[workspaceSlug]/systems/SystemsBreadcrumb.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsBreadcrumb.tsx
index cb111d702..74da12297 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/SystemsBreadcrumb.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsBreadcrumb.tsx
@@ -17,7 +17,7 @@ import {
 } from "@ctrlplane/ui/breadcrumb";
 import { Button } from "@ctrlplane/ui/button";
 
-import { SystemActionsDropdown } from "~/app/[workspaceSlug]/systems/SystemActionsDropdown";
+import { SystemActionsDropdown } from "~/app/[workspaceSlug]/(app)/systems/SystemActionsDropdown";
 import { api } from "~/trpc/server";
 
 export const SystemBreadcrumbNavbar = async ({
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/SystemsList.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx
similarity index 93%
rename from apps/webservice/src/app/[workspaceSlug]/systems/SystemsList.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx
index 49b30d73b..4d3949412 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/SystemsList.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsList.tsx
@@ -16,10 +16,10 @@ import { Skeleton } from "@ctrlplane/ui/skeleton";
 
 import type { SystemFilter } from "./SystemFilter";
 import { api } from "~/trpc/react";
-import { useFilters } from "../_components/filter/Filter";
-import { FilterDropdown } from "../_components/filter/FilterDropdown";
-import { ContentDialog } from "../_components/filter/FilterDropdownItems";
-import { NoFilterMatch } from "../_components/filter/NoFilterMatch";
+import { useFilters } from "../../_components/filter/Filter";
+import { FilterDropdown } from "../../_components/filter/FilterDropdown";
+import { ContentDialog } from "../../_components/filter/FilterDropdownItems";
+import { NoFilterMatch } from "../../_components/filter/NoFilterMatch";
 import { SystemsTable } from "./SystemsTable";
 
 export const SystemsList: React.FC<{
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/SystemsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/SystemsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/SystemsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/TopNav.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/TopNav.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/TopNav.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/TopNav.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/DeleteSystemDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/DeleteSystemDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/DeleteSystemDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/DeleteSystemDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/EditAgentConfigDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/EditAgentConfigDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/EditAgentConfigDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/EditAgentConfigDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/EditSystemDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/EditSystemDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/EditSystemDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/EditSystemDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/VariableInputs.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/VariableInputs.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeployButton.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeployButton.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeployButton.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeployButton.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeploymentBarChart.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeploymentBarChart.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeploymentBarChart.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeploymentBarChart.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeploymentGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeploymentGettingStarted.tsx
similarity index 93%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeploymentGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeploymentGettingStarted.tsx
index 9cfa183e9..90386f7a4 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/DeploymentGettingStarted.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/DeploymentGettingStarted.tsx
@@ -2,7 +2,7 @@ import { IconShip } from "@tabler/icons-react";
 
 import { Button } from "@ctrlplane/ui/button";
 
-import { CreateDeploymentDialog } from "../../../_components/CreateDeployment";
+import { CreateDeploymentDialog } from "../../../../_components/CreateDeployment";
 
 export const DeploymentGettingStarted: React.FC<{ systemId: string }> = ({
   systemId,
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/ReleaseDropdownMenu.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/ReleaseDropdownMenu.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/ReleaseDropdownMenu.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/ReleaseDropdownMenu.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/TableCells.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/TableCells.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/TableCells.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/TableCells.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/TableDeployments.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/TableDeployments.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/TableDeployments.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/TableDeployments.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/DeploymentNavBar.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/EditDeploymentSection.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/JobAgentSection.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuAction.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/NavigationMenuTab.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/SettingsSidebar.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/JobAgentConfigForm.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/configure/job-agent/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/CreateHookDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/DeleteHookDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/EditHookDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HookActionsDropdown.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/HooksTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/hooks/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/CreateReleaseChannelDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/ReleaseChannelsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/release-channels/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
index fd6d3d6ac..5e40557b4 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/CreateVariableDialog.tsx
@@ -34,7 +34,7 @@ import {
   ConfigTypeSelector,
   NumberConfigFields,
   StringConfigFields,
-} from "~/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields";
+} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields";
 import { api } from "~/trpc/react";
 
 const schema = z.object({
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionBarChart.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/ReleaseDistributionPopover.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowDiagram.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ReleaseSequencingNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ReleaseSequencingNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ReleaseSequencingNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/ReleaseSequencingNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TargetReleaseTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/TriggerNode.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/targets/[targetId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/targets/[targetId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/targets/[targetId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/targets/[targetId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/targets/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/targets/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/targets/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/targets/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
index 41ad1a441..3c84d5429 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/AddVariableValueDialog.tsx
@@ -36,7 +36,7 @@ import {
   VariableBooleanInput,
   VariableChoiceSelect,
   VariableStringInput,
-} from "~/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/VariableInputs";
+} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs";
 import { api } from "~/trpc/react";
 
 const schema = z.object({
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/EditVariableDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableDropdown.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
index 2e5aa0ef9..19592fc66 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/VariableValueDropdown.tsx
@@ -53,7 +53,7 @@ import {
   VariableBooleanInput,
   VariableChoiceSelect,
   VariableStringInput,
-} from "~/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/VariableInputs";
+} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs";
 import { api } from "~/trpc/react";
 
 const editVariableValueFormSchema = z.object({
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/variables/variable-data.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/status-color.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/status-color.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/status-color.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/status-color.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/DeleteNodeDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/DeleteNodeDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/DeleteNodeDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/DeleteNodeDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/EnvFlowBuilder.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/EnvFlowBuilder.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/EnvFlowBuilder.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/EnvFlowBuilder.tsx
index 2638f063b..d9524b4a1 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/EnvFlowBuilder.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/EnvFlowBuilder.tsx
@@ -31,7 +31,7 @@ import {
 } from "~/app/[workspaceSlug]/_components/reactflow/edges";
 import { getLayoutedElementsDagre } from "~/app/[workspaceSlug]/_components/reactflow/layout";
 import { api } from "~/trpc/react";
-import { useEnvironmentPolicyDrawer } from "../../../_components/environment-policy-drawer/EnvironmentPolicyDrawer";
+import { useEnvironmentPolicyDrawer } from "../../../../_components/environment-policy-drawer/EnvironmentPolicyDrawer";
 import { useDeleteNodeDialog } from "./DeleteNodeDialog";
 import { useHandleEdgeDelete, useOnEdgeClick } from "./edges";
 import { EnvFlowPanel } from "./EnvFlowPanel";
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/EnvFlowPanel.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/EnvFlowPanel.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/EnvFlowPanel.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/EnvFlowPanel.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/FlowNodeTypes.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/FlowNodeTypes.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/FlowNodeTypes.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/FlowNodeTypes.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/SidepanelContext.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/SidepanelContext.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/SidepanelContext.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/SidepanelContext.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/TargetFilterUniquenessIndicator.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/[environmentId]/TargetCharts.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/[environmentId]/TargetCharts.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/[environmentId]/TargetCharts.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/[environmentId]/TargetCharts.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/[environmentId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/[environmentId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/[environmentId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/[environmentId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/edges.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/edges.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/edges.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/edges.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/useMatchSorter.ts b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/useMatchSorter.ts
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/environments/useMatchSorter.ts
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/useMatchSorter.ts
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/EditRunbookDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/RunbookGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/RunbookGettingStarted.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/RunbookGettingStarted.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/RunbookGettingStarted.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/RunbookRow.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/RunbookRow.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/RunbookRow.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/RunbookRow.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/TriggerRunbook.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/TriggerRunbook.tsx
similarity index 97%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/TriggerRunbook.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/TriggerRunbook.tsx
index e1718f7ac..e36770684 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/TriggerRunbook.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/TriggerRunbook.tsx
@@ -24,7 +24,7 @@ import {
   VariableChoiceSelect,
   VariableStringInput,
   VariableTargetInput,
-} from "~/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/VariableInputs";
+} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/VariableInputs";
 import { api } from "~/trpc/react";
 
 export type TriggerRunbookDialogProps = {
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/CreateRunbookForm.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/CreateRunbookForm.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/CreateRunbookForm.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/CreateRunbookForm.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
similarity index 98%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
index 5b2431109..53e95b38b 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/RunbookVariableEditor.tsx
@@ -30,7 +30,7 @@ import {
   RunbookConfigTypeSelector,
   StringConfigFields,
   TargetConfigFields,
-} from "~/app/[workspaceSlug]/systems/[systemSlug]/_components/variables/ConfigFields";
+} from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/_components/variables/ConfigFields";
 
 type RunbookVariableEditorProps = {
   value: InsertRunbookVariable;
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/create/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/create/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/runbooks/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/CreateVariableSetDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/GettingStartedVariableSets.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/VariableSetsTable.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/VariableSetsTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/VariableSetsTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/VariableSetsTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/[variableSetId]/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/[variableSetId]/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/[variableSetId]/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/[variableSetId]/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/variable-sets/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/variable-sets/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/systems/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/systems/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/systems/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/terminal/Terminal.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/terminal/Terminal.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/terminal/Terminal.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/terminal/Terminal.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/terminal/page.tsx b/apps/webservice/src/app/[workspaceSlug]/(app)/terminal/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/terminal/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/(app)/terminal/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/AppSidebar.tsx b/apps/webservice/src/app/[workspaceSlug]/AppSidebar.tsx
deleted file mode 100644
index 29601eea3..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/AppSidebar.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import type { Workspace } from "@ctrlplane/db/schema";
-import React from "react";
-import {
-  IconCategory,
-  IconObjectScan,
-  IconPlant,
-  IconRocket,
-  IconRun,
-  IconShip,
-  IconVariable,
-} from "@tabler/icons-react";
-
-import { SidebarContent, SidebarHeader } from "@ctrlplane/ui/sidebar";
-
-import { api } from "~/trpc/server";
-import { AppSidebarHeader } from "./AppSidebarHeader";
-import { AppSidebarPopover } from "./AppSidebarPopover";
-import { SidebarWithPopover } from "./AppSidebarPopoverContext";
-import { SidebarNavMain } from "./SidebarNavMain";
-
-const navMain = (prefix: string) => [
-  {
-    title: "Systems",
-    url: `${prefix}/systems`,
-    icon: IconCategory,
-    isActive: true,
-    items: [
-      {
-        title: "Dependencies",
-        url: `${prefix}/dependencies`,
-        isActive: true,
-      },
-    ],
-  },
-  {
-    title: "Resources",
-    url: `${prefix}/resources`,
-    popoverId: "resources",
-    icon: IconObjectScan,
-    isActive: true,
-    items: [
-      {
-        title: "List",
-        url: `${prefix}/targets`,
-      },
-      {
-        title: "Providers",
-        url: `${prefix}/target-providers`,
-      },
-      {
-        title: "Groups",
-        url: `${prefix}/target-metadata-groups`,
-      },
-      {
-        title: "Views",
-        url: `${prefix}/target-views`,
-      },
-    ],
-  },
-  {
-    title: "Jobs",
-    url: "#",
-    icon: IconRocket,
-    items: [
-      {
-        title: "Agents",
-        url: "#",
-      },
-      {
-        title: "Runs",
-        url: "#",
-      },
-    ],
-  },
-];
-
-export const AppSidebar: React.FC<{ workspace: Workspace }> = async ({
-  workspace,
-}) => {
-  const [workspaces, viewer, systems] = await Promise.all([
-    api.workspace.list(),
-    api.user.viewer(),
-    api.system.list({ workspaceId: workspace.id }),
-  ]);
-
-  const navSystem = systems.items.map((s) => ({
-    title: s.name,
-    url: "#",
-    isActive: true,
-    items: [
-      {
-        title: "Environments",
-        icon: IconPlant,
-        url: "#",
-      },
-      {
-        title: "Deployements",
-        icon: IconShip,
-        url: "#",
-      },
-      {
-        title: "Runbooks",
-        icon: IconRun,
-        url: "#",
-      },
-      {
-        title: "Variable Sets",
-        icon: IconVariable,
-        url: "#",
-      },
-    ],
-  }));
-
-  return (
-    <SidebarWithPopover>
-      <AppSidebarPopover />
-      <SidebarHeader>
-        <AppSidebarHeader
-          workspace={workspace}
-          workspaces={workspaces}
-          viewer={viewer}
-          systems={systems.items}
-        />
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarNavMain
-          title="Workspace"
-          items={navMain(`/${workspace.slug}`)}
-        />
-        <SidebarNavMain title="Systems" items={navSystem} />
-      </SidebarContent>
-    </SidebarWithPopover>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SettingsSidebar.tsx b/apps/webservice/src/app/[workspaceSlug]/SettingsSidebar.tsx
deleted file mode 100644
index bf53f7c6c..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/SettingsSidebar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { Workspace } from "@ctrlplane/db/schema";
-import Link from "next/link";
-import { IconChevronLeft } from "@tabler/icons-react";
-
-import { Sidebar, SidebarContent, SidebarHeader } from "@ctrlplane/ui/sidebar";
-
-import { SidebarNavMain } from "./SidebarNavMain";
-
-export const SettingsSidebar: React.FC<{ workspace: Workspace }> = ({
-  workspace,
-}) => {
-  return (
-    <Sidebar>
-      <SidebarHeader>
-        <div className="mx-3 my-4 space-y-4">
-          <Link
-            href={`/${workspace.slug}`}
-            className="flex w-full items-center gap-2 text-left hover:bg-transparent"
-          >
-            <div className="text-muted-foreground">
-              <IconChevronLeft className="h-3 w-3" />
-            </div>
-            <div className="flex-grow">Settings</div>
-          </Link>
-        </div>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarNavMain
-          title="Workspace"
-          items={[
-            { title: "Overview", url: "#" },
-            { title: "General", url: "#" },
-            { title: "Members", url: "#" },
-            { title: "Integrations", url: "#" },
-          ]}
-        />
-        <SidebarNavMain
-          title="User"
-          items={[
-            { title: "Profile", url: "#" },
-            { title: "API Keys", url: "#" },
-          ]}
-        />
-      </SidebarContent>
-    </Sidebar>
-  );
-};
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarNavMain.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarNavMain.tsx
index 465bbfa3c..2f09a9fcd 100644
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarNavMain.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/SidebarNavMain.tsx
@@ -1,3 +1,8 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { IconChevronRight } from "@tabler/icons-react";
 
 import {
@@ -18,69 +23,103 @@ import {
 import {
   SidebarMenuItemWithPopover,
   SidebarMenuSubItemWithPopover,
-} from "./AppSidebarPopoverContext";
+  useSidebarPopover,
+} from "./(app)/AppSidebarPopoverContext";
+
+type SubItem = {
+  popoverId?: string;
+  icon?: any;
+  title: string;
+  url: string;
+  exact?: boolean;
+};
+
+type MainItem = {
+  popoverId?: string;
+  title: string;
+  url?: string;
+  icon?: any;
+  isOpen?: boolean;
+  items?: SubItem[];
+};
+
+const SidebarSubItem: React.FC<{ item: SubItem }> = ({ item }) => {
+  const pathname = usePathname();
+  const { setActiveSidebarItem } = useSidebarPopover();
+  return (
+    <SidebarMenuSubItemWithPopover popoverId={item.popoverId}>
+      <SidebarMenuSubButton asChild isActive={pathname.startsWith(item.url)}>
+        <Link
+          href={item.url}
+          onClick={() => {
+            setActiveSidebarItem(null);
+          }}
+        >
+          {item.icon && <item.icon className="text-neutral-400" />}
+          <span>{item.title}</span>
+        </Link>
+      </SidebarMenuSubButton>
+    </SidebarMenuSubItemWithPopover>
+  );
+};
+
+const SidebarItem: React.FC<{ item: MainItem }> = ({ item }) => {
+  const [open, setOpen] = useState(item.isOpen);
+  return (
+    <Collapsible asChild open={open} onOpenChange={setOpen}>
+      <SidebarMenuItemWithPopover popoverId={item.popoverId}>
+        {item.url ? (
+          <SidebarMenuButton asChild tooltip={item.title}>
+            <Link href={item.url}>
+              {item.icon && <item.icon className="text-neutral-400" />}
+              <span>{item.title}</span>
+            </Link>
+          </SidebarMenuButton>
+        ) : (
+          <SidebarMenuButton
+            asChild
+            className="cursor-pointer"
+            tooltip={item.title}
+            onClick={() => setOpen(!open)}
+          >
+            <div>
+              {item.icon && <item.icon className="text-neutral-400" />}
+              <span>{item.title}</span>
+            </div>
+          </SidebarMenuButton>
+        )}
+        {item.items?.length ? (
+          <>
+            <CollapsibleTrigger asChild>
+              <SidebarMenuAction className="data-[state=open]:rotate-90">
+                <IconChevronRight className="text-muted-foreground" />
+                <span className="sr-only">Toggle</span>
+              </SidebarMenuAction>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <SidebarMenuSub>
+                {item.items.map((subItem) => (
+                  <SidebarSubItem key={subItem.title} item={subItem} />
+                ))}
+              </SidebarMenuSub>
+            </CollapsibleContent>
+          </>
+        ) : null}
+      </SidebarMenuItemWithPopover>
+    </Collapsible>
+  );
+};
 
 export const SidebarNavMain: React.FC<{
   title: string;
-  items: {
-    popoverId?: string;
-    title: string;
-    url: string;
-    icon?: any;
-    isOpen?: boolean;
-    items?: {
-      popoverId?: string;
-      icon?: any;
-      title: string;
-      url: string;
-      exact?: boolean;
-    }[];
-  }[];
+  items: MainItem[];
 }> = ({ title, items }) => {
   return (
     <SidebarGroup>
       <SidebarGroupLabel>{title}</SidebarGroupLabel>
       <SidebarMenu>
         {items.map((item) => (
-          <Collapsible key={item.title} asChild defaultOpen={item.isOpen}>
-            <SidebarMenuItemWithPopover popoverId={item.popoverId}>
-              <SidebarMenuButton asChild tooltip={item.title}>
-                <a href={item.url}>
-                  {item.icon && <item.icon className="text-neutral-400" />}
-                  <span>{item.title}</span>
-                </a>
-              </SidebarMenuButton>
-              {item.items?.length ? (
-                <>
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuAction className="data-[state=open]:rotate-90">
-                      <IconChevronRight className="text-muted-foreground" />
-                      <span className="sr-only">Toggle</span>
-                    </SidebarMenuAction>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.items.map((subItem) => (
-                        <SidebarMenuSubItemWithPopover
-                          popoverId={subItem.popoverId}
-                          key={subItem.title}
-                        >
-                          <SidebarMenuSubButton asChild>
-                            <a href={subItem.url}>
-                              {subItem.icon && (
-                                <subItem.icon className="text-neutral-400" />
-                              )}
-                              <span>{subItem.title}</span>
-                            </a>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItemWithPopover>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </>
-              ) : null}
-            </SidebarMenuItemWithPopover>
-          </Collapsible>
+          <SidebarItem key={item.title} item={item} />
         ))}
       </SidebarMenu>
     </SidebarGroup>
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx
index bc694a9c8..5903915fa 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx
@@ -13,8 +13,8 @@ import { Button, buttonVariants } from "@ctrlplane/ui/button";
 import { Drawer, DrawerContent, DrawerTitle } from "@ctrlplane/ui/drawer";
 import { ReservedMetadataKey } from "@ctrlplane/validators/conditions";
 
-import { JobDropdownMenu } from "~/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
-import { useReleaseChannel } from "~/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel";
+import { JobDropdownMenu } from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/JobDropdownMenu";
+import { useReleaseChannel } from "~/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/useReleaseChannel";
 import { api } from "~/trpc/react";
 import { JobAgent } from "./JobAgent";
 import { JobMetadata } from "./JobMetadata";
diff --git a/apps/webservice/src/app/[workspaceSlug]/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/layout.tsx
index 2010fc986..156ee8b96 100644
--- a/apps/webservice/src/app/[workspaceSlug]/layout.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/layout.tsx
@@ -1,59 +1,15 @@
-import dynamic from "next/dynamic";
-import { notFound, redirect } from "next/navigation";
+import { SidebarProvider } from "@ctrlplane/ui/sidebar";
 
-import { auth } from "@ctrlplane/auth";
-import { SidebarInset, SidebarProvider } from "@ctrlplane/ui/sidebar";
-
-import { api } from "~/trpc/server";
-import { EnvironmentDrawer } from "./_components/environment-drawer/EnvironmentDrawer";
-import { EnvironmentPolicyDrawer } from "./_components/environment-policy-drawer/EnvironmentPolicyDrawer";
-import { JobDrawer } from "./_components/job-drawer/JobDrawer";
-import { ReleaseChannelDrawer } from "./_components/release-channel-drawer/ReleaseChannelDrawer";
-import { ReleaseDrawer } from "./_components/release-drawer/ReleaseDrawer";
-import { TargetDrawer } from "./_components/target-drawer/TargetDrawer";
 import { TerminalSessionsProvider } from "./_components/terminal/TerminalSessionsProvider";
-import { VariableSetDrawer } from "./_components/variable-set-drawer/VariableSetDrawer";
-import { AppSidebar } from "./AppSidebar";
-import { AppSidebarPopoverProvider } from "./AppSidebarPopoverContext";
-
-const TerminalDrawer = dynamic(
-  () => import("./_components/terminal/TerminalSessionsDrawer"),
-  { ssr: false },
-);
 
-type Props = {
-  children: React.ReactNode;
-  params: { workspaceSlug: string };
-};
-
-export default async function WorkspaceLayout({
+export default function WorkspaceLayout({
   children,
-  params: { workspaceSlug },
-}: Props) {
-  const session = await auth();
-  if (session == null) redirect("/login");
-
-  const workspace = await api.workspace.bySlug(workspaceSlug).catch(() => null);
-  if (workspace == null) notFound();
-
+}: {
+  children: React.ReactNode;
+}) {
   return (
-    <AppSidebarPopoverProvider>
-      <TerminalSessionsProvider>
-        <SidebarProvider>
-          <AppSidebar workspace={workspace} />
-          <SidebarInset>{children}</SidebarInset>
-
-          <TargetDrawer />
-          <ReleaseDrawer />
-          <ReleaseChannelDrawer />
-          <EnvironmentDrawer />
-          <EnvironmentPolicyDrawer />
-          <VariableSetDrawer />
-          <JobDrawer />
-
-          <TerminalDrawer />
-        </SidebarProvider>
-      </TerminalSessionsProvider>
-    </AppSidebarPopoverProvider>
+    <SidebarProvider>
+      <TerminalSessionsProvider>{children}</TerminalSessionsProvider>
+    </SidebarProvider>
   );
 }
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/layout.tsx
deleted file mode 100644
index dec54d55a..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function AccountSettingsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <div className="mt-10">{children}</div>;
-}
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/SettingsSidebar.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/SettingsSidebar.tsx
new file mode 100644
index 000000000..9d9103304
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/settings/SettingsSidebar.tsx
@@ -0,0 +1,65 @@
+import type { Workspace } from "@ctrlplane/db/schema";
+import Link from "next/link";
+import { IconChevronLeft } from "@tabler/icons-react";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarMenuButton,
+} from "@ctrlplane/ui/sidebar";
+
+import { SidebarNavMain } from "../SidebarNavMain";
+
+export const SettingsSidebar: React.FC<{ workspace: Workspace }> = ({
+  workspace,
+}) => {
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <SidebarMenuButton asChild tooltip="Settings">
+          <Link
+            href={`/${workspace.slug}`}
+            className="flex w-full items-center gap-2 rounded-md text-left"
+          >
+            <IconChevronLeft className="h-3 w-3 text-muted-foreground" />
+            <span>Settings</span>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarNavMain
+          title="Workspace"
+          items={[
+            { title: "Overview", url: `/${workspace.slug}/workspace/settings` },
+            {
+              title: "General",
+              url: `/${workspace.slug}/settings/workspace/general`,
+            },
+            {
+              title: "Members",
+              url: `/${workspace.slug}/settings/workspace/members`,
+            },
+            {
+              title: "Integrations",
+              url: `/${workspace.slug}/settings/workspace/integrations`,
+            },
+          ]}
+        />
+        <SidebarNavMain
+          title="User"
+          items={[
+            {
+              title: "Profile",
+              url: `/${workspace.slug}/settings/account/profile`,
+            },
+            {
+              title: "API Keys",
+              url: `/${workspace.slug}/settings/account/api`,
+            },
+          ]}
+        />
+      </SidebarContent>
+    </Sidebar>
+  );
+};
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/account/api/ApiSection.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/account/api/ApiSection.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/account/api/ApiSection.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/account/api/ApiSection.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/account/api/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/account/api/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/account/api/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/account/api/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/account/profile/GithubRedirectButton.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/account/profile/GithubRedirectButton.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/account/profile/GithubRedirectButton.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/account/profile/GithubRedirectButton.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/account/profile/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/account/profile/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/account/profile/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/account/profile/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/layout.tsx
new file mode 100644
index 000000000..aa81dfd6e
--- /dev/null
+++ b/apps/webservice/src/app/[workspaceSlug]/settings/layout.tsx
@@ -0,0 +1,30 @@
+import { notFound, redirect } from "next/navigation";
+
+import { auth } from "@ctrlplane/auth";
+import { SidebarInset } from "@ctrlplane/ui/sidebar";
+
+import { api } from "~/trpc/server";
+import { SettingsSidebar } from "./SettingsSidebar";
+
+type Props = {
+  children: React.ReactNode;
+  params: { workspaceSlug: string };
+};
+
+export default async function AccountSettingsLayout({
+  children,
+  params: { workspaceSlug },
+}: Props) {
+  const session = await auth();
+  if (session == null) redirect("/login");
+
+  const workspace = await api.workspace.bySlug(workspaceSlug).catch(() => null);
+  if (workspace == null) notFound();
+
+  return (
+    <>
+      <SettingsSidebar workspace={workspace} />
+      <SidebarInset className="mt-10">{children}</SidebarInset>
+    </>
+  );
+}
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/general/WorkspaceDeleteSection.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/general/WorkspaceDeleteSection.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/general/WorkspaceDeleteSection.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/general/WorkspaceDeleteSection.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/general/WorkspaceUpdateSection.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/general/WorkspaceUpdateSection.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/general/WorkspaceUpdateSection.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/general/WorkspaceUpdateSection.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/general/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/general/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/general/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/general/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/DeleteGithubUserButton.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/DeleteGithubUserButton.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/DeleteGithubUserButton.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/DeleteGithubUserButton.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/DisconnectDropdownActionButton.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/DisconnectDropdownActionButton.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/DisconnectDropdownActionButton.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/DisconnectDropdownActionButton.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/GithubAddOrgDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/GithubAddOrgDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/GithubAddOrgDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/GithubAddOrgDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/GithubConnectedOrgs.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/GithubConnectedOrgs.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/GithubConnectedOrgs.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/GithubConnectedOrgs.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/GithubRemoveOrgDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/GithubRemoveOrgDialog.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/GithubRemoveOrgDialog.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/GithubRemoveOrgDialog.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/OrgActionDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/OrgActionDropdown.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/OrgActionDropdown.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/OrgActionDropdown.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/SelectPreconnectedOrgDialogContent.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/SelectPreconnectedOrgDialogContent.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/SelectPreconnectedOrgDialogContent.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/SelectPreconnectedOrgDialogContent.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/github/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/google/GoogleIntegration.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/google/GoogleIntegration.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/google/GoogleIntegration.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/google/GoogleIntegration.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/google/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/google/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/google/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/google/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/layout.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/layout.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/layout.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/(integration)/layout.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/integrations/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/integrations/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/members/MembersExport.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/MembersExport.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/members/MembersExport.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/MembersExport.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/members/MembersTable.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/MembersTable.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/members/MembersTable.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/MembersTable.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/members/WorkspaceDomainMatching.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/WorkspaceDomainMatching.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/members/WorkspaceDomainMatching.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/WorkspaceDomainMatching.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/members/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/members/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/members/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/overview/page.tsx b/apps/webservice/src/app/[workspaceSlug]/settings/workspace/overview/page.tsx
similarity index 100%
rename from apps/webservice/src/app/[workspaceSlug]/settings/(settings)/workspace/overview/page.tsx
rename to apps/webservice/src/app/[workspaceSlug]/settings/workspace/overview/page.tsx
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/SystemFilter.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/SystemFilter.tsx
deleted file mode 100644
index 526d4ca08..000000000
--- a/apps/webservice/src/app/[workspaceSlug]/systems/SystemFilter.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { Filter } from "../_components/filter/Filter";
-
-export type SystemFilter = Filter<"name" | "slug", string>;
diff --git a/packages/job-dispatch/src/__test__/job-variables-deployment.test.ts b/packages/job-dispatch/src/__test__/job-variables-deployment.test.ts
index 166b5f008..7d53cc443 100644
--- a/packages/job-dispatch/src/__test__/job-variables-deployment.test.ts
+++ b/packages/job-dispatch/src/__test__/job-variables-deployment.test.ts
@@ -62,6 +62,7 @@ const target: SCHEMA.Resource = {
   identifier: "test",
   providerId: "0",
   lockedAt: null,
+  createdAt: new Date(),
 };
 
 const release: SCHEMA.Release = {