diff --git a/apps/web/src/components/agents/list.tsx b/apps/web/src/components/agents/list.tsx
index 1e8b1b5988..6d00df2251 100644
--- a/apps/web/src/components/agents/list.tsx
+++ b/apps/web/src/components/agents/list.tsx
@@ -404,44 +404,47 @@ export default function List() {
           </div>
         </>
       }
-    >
-      {!agents
-        ? (
-          <div className="flex h-48 items-center justify-center">
-            <Spinner size="lg" />
-          </div>
-        )
-        : agents.length > 0
-        ? (
-          <>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-6 peer">
-              {filteredAgents?.map((agent) => (
-                <AgentCard key={agent.id} agent={agent} />
-              ))}
-            </div>
-            <div className="flex-col items-center justify-center h-48 peer-empty:flex hidden">
-              <Icon
-                name="search_off"
-                className="mb-2 text-4xl text-muted-foreground"
+      main={
+        <>
+          {!agents
+            ? (
+              <div className="flex h-48 items-center justify-center">
+                <Spinner size="lg" />
+              </div>
+            )
+            : agents.length > 0
+            ? (
+              <>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5 gap-6 peer">
+                  {filteredAgents?.map((agent) => (
+                    <AgentCard key={agent.id} agent={agent} />
+                  ))}
+                </div>
+                <div className="flex-col items-center justify-center h-48 peer-empty:flex hidden">
+                  <Icon
+                    name="search_off"
+                    className="mb-2 text-4xl text-muted-foreground"
+                  />
+                  <p className="text-muted-foreground">
+                    No agents match your filter. Try adjusting your search.
+                  </p>
+                </div>
+              </>
+            )
+            : (
+              <EmptyState
+                icon="groups"
+                title="No agents yet"
+                description="Create an agent to automate tasks and improve your workflow."
+                buttonProps={{
+                  disabled: creating,
+                  children: creating ? "Creating..." : "Create Agent",
+                  onClick: handleCreate,
+                }}
               />
-              <p className="text-muted-foreground">
-                No agents match your filter. Try adjusting your search.
-              </p>
-            </div>
-          </>
-        )
-        : (
-          <EmptyState
-            icon="groups"
-            title="No agents yet"
-            description="Create an agent to automate tasks and improve your workflow."
-            buttonProps={{
-              disabled: creating,
-              children: creating ? "Creating..." : "Create Agent",
-              onClick: handleCreate,
-            }}
-          />
-        )}
-    </PageLayout>
+            )}
+        </>
+      }
+    />
   );
 }
diff --git a/apps/web/src/components/chat/Chat.tsx b/apps/web/src/components/chat/Chat.tsx
index bdd6f37b55..3ddceb0f9f 100644
--- a/apps/web/src/components/chat/Chat.tsx
+++ b/apps/web/src/components/chat/Chat.tsx
@@ -326,20 +326,25 @@ export function Chat({
     return (
       <PageLayout
         header={null}
-      >
-        <div className="w-full max-w-[800px] mx-auto">
-          <div ref={containerRef}>
-            {messages.length === 0 ? <Welcome agent={agent} /> : (
-              <ChatMessages
-                messages={messages}
-                status={status as "streaming" | "submitted" | "ready" | "idle"}
-                handlePickerSelect={handlePickerSelect}
-                error={error}
-              />
-            )}
+        main={
+          <div className="w-full max-w-[800px] mx-auto">
+            <div ref={containerRef}>
+              {messages.length === 0 ? <Welcome agent={agent} /> : (
+                <ChatMessages
+                  messages={messages}
+                  status={status as
+                    | "streaming"
+                    | "submitted"
+                    | "ready"
+                    | "idle"}
+                  handlePickerSelect={handlePickerSelect}
+                  error={error}
+                />
+              )}
+            </div>
           </div>
-        </div>
-      </PageLayout>
+        }
+      />
     );
   }
 
@@ -370,21 +375,22 @@ export function Chat({
           />
         </div>
       }
-    >
-      <div className="w-full max-w-[800px] mx-auto">
-        <div ref={containerRef}>
-          {messages.length === 0 ? <Welcome agent={agent} /> : (
-            <ChatMessages
-              messages={messages}
-              status={status as "streaming" | "submitted" | "ready" | "idle"}
-              handlePickerSelect={handlePickerSelect}
-              error={error}
-              onRetry={handleRetry}
-            />
-          )}
+      main={
+        <div className="w-full max-w-[800px] mx-auto">
+          <div ref={containerRef}>
+            {messages.length === 0 ? <Welcome agent={agent} /> : (
+              <ChatMessages
+                messages={messages}
+                status={status as "streaming" | "submitted" | "ready" | "idle"}
+                handlePickerSelect={handlePickerSelect}
+                error={error}
+                onRetry={handleRetry}
+              />
+            )}
+          </div>
+          <div className="h-4" />
         </div>
-        <div className="h-4" />
-      </div>
-    </PageLayout>
+      }
+    />
   );
 }
diff --git a/apps/web/src/components/dock/index.tsx b/apps/web/src/components/dock/index.tsx
new file mode 100644
index 0000000000..50f4d7bc13
--- /dev/null
+++ b/apps/web/src/components/dock/index.tsx
@@ -0,0 +1,246 @@
+import { Button } from "@deco/ui/components/button.tsx";
+import { Icon } from "@deco/ui/components/icon.tsx";
+import { ScrollArea } from "@deco/ui/components/scroll-area.tsx";
+import { Spinner } from "@deco/ui/components/spinner.tsx";
+import {
+  AddPanelOptions,
+  type DockviewApi,
+  DockviewReact,
+  type DockviewReadyEvent,
+  IDockviewPanelHeaderProps,
+  type IDockviewPanelProps,
+} from "dockview-react";
+import {
+  ComponentProps,
+  ComponentType,
+  createContext,
+  Suspense,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+const Context = createContext<
+  {
+    mainViewName: string;
+    openPanels: Set<string>;
+    availablePanels: Set<string>;
+  } | null
+>(null);
+
+export const useDock = () => {
+  const ctx = use(Context);
+
+  if (!ctx) {
+    throw new Error("Dock context not found");
+  }
+
+  return ctx;
+};
+
+const adapter =
+  <T extends object>(Component: ComponentType<T>) =>
+  (props: IDockviewPanelProps<T>) => {
+    const { mainViewName } = useDock();
+
+    return (
+      <Suspense
+        fallback={
+          <div className="flex items-center justify-center h-full">
+            <Spinner />
+          </div>
+        }
+      >
+        {props.api.component === mainViewName
+          ? <Component {...props.params} />
+          : (
+            <ScrollArea className="h-full w-full px-4 py-2 bg-gradient-to-b from-white to-slate-50 p-6 text-slate-700 ">
+              <Component {...props.params} />
+            </ScrollArea>
+          )}
+      </Suspense>
+    );
+  };
+
+const TAB_COMPONENTS = {
+  default: (props: IDockviewPanelHeaderProps) => {
+    const { mainViewName } = useDock();
+
+    if (props.api.component === mainViewName) {
+      return null;
+    }
+
+    return (
+      <div className="flex items-center justify-between gap-2 px-4 py-4">
+        <p className="text-sm">{props.api.title}</p>
+        <Button
+          className="p-1 h-6 w-6"
+          variant="ghost"
+          size="icon"
+          onClick={() => props.api.close()}
+        >
+          <Icon name="close" size={12} />
+        </Button>
+      </div>
+    );
+  },
+};
+
+const channel = new EventTarget();
+
+export const togglePanel = <T extends object>(detail: AddPanelOptions<T>) => {
+  channel.dispatchEvent(
+    new CustomEvent("message", { detail }),
+  );
+};
+
+type Props =
+  & Partial<Omit<ComponentProps<typeof DockviewReact>, "components">>
+  & {
+    mainView: ComponentType;
+    components: Record<string, {
+      Component: ComponentType;
+      initialOpen?: boolean;
+    }>;
+  };
+
+const NO_DROP_TARGET = "no-drop-target";
+
+const addPanel = (options: AddPanelOptions, api: DockviewApi) => {
+  const group = api.groups.find((group) => group.locked !== NO_DROP_TARGET);
+
+  const panel = api.addPanel({
+    ...options,
+    position: {
+      direction: group?.id ? "within" : "right",
+      referenceGroup: group?.id,
+    },
+    minimumWidth: 300,
+    initialWidth: group?.width || 400,
+    floating: false,
+  });
+
+  return panel;
+};
+
+const equals = (a: Set<string>, b: Set<string>) => {
+  if (a.size !== b.size) {
+    return false;
+  }
+
+  return a.isSubsetOf(b) && b.isSubsetOf(a);
+};
+
+function Docked(
+  { onReady, components, mainView, ...props }: Props,
+) {
+  const [api, setApi] = useState<DockviewApi | null>(null);
+  const [openPanels, setOpenPanels] = useState(new Set<string>());
+  const mainViewName = mainView.displayName || "Main View";
+
+  const wrappedComponents = useMemo(
+    () => {
+      const record = Object.fromEntries(
+        Object.entries(components).map(([key, value]) => [
+          key,
+          adapter(value.Component),
+        ]),
+      );
+
+      record[mainViewName] = adapter(mainView);
+
+      return record;
+    },
+    [components, mainView, mainViewName],
+  );
+
+  const availablePanels = useMemo(() => {
+    return new Set(Object.keys(components));
+  }, [components]);
+
+  const handleReady = useCallback((event: DockviewReadyEvent) => {
+    setApi(event.api);
+
+    const mainPanel = event.api.addPanel({
+      id: mainViewName,
+      component: mainViewName,
+      title: mainViewName,
+    });
+
+    mainPanel.group.locked = NO_DROP_TARGET;
+
+    const initialPanels = new Set<string>();
+    Object.entries(components).forEach(([key, value]) => {
+      if (value.initialOpen) {
+        initialPanels.add(key);
+
+        addPanel({
+          id: key,
+          component: key,
+          title: value.Component.displayName || key,
+        }, event.api);
+      }
+    });
+
+    setOpenPanels(initialPanels);
+
+    event.api.onDidLayoutChange(() => {
+      const currentPanels = new Set(event.api.panels.map((panel) => panel.id));
+
+      setOpenPanels((prev) =>
+        equals(prev, currentPanels) ? prev : currentPanels
+      );
+    });
+
+    onReady?.(event);
+  }, [onReady, mainViewName, components]);
+
+  useEffect(() => {
+    const handleMessage = (
+      event: CustomEvent<AddPanelOptions<object>>,
+    ) => {
+      const { detail } = event;
+
+      if (!api) {
+        return;
+      }
+
+      const panel = api.getPanel(detail.id);
+
+      if (panel) {
+        panel.api.close();
+      } else {
+        addPanel(detail, api);
+      }
+    };
+
+    // @ts-expect-error - I don't really know how to properly type this
+    channel.addEventListener("message", handleMessage);
+
+    return () => {
+      // @ts-expect-error - I don't really know how to properly type this
+      channel.removeEventListener("message", handleMessage);
+    };
+  }, [api, channel]);
+
+  return (
+    <Context.Provider value={{ mainViewName, openPanels, availablePanels }}>
+      <DockviewReact
+        components={wrappedComponents}
+        tabComponents={TAB_COMPONENTS}
+        defaultTabComponent={TAB_COMPONENTS.default}
+        onReady={handleReady}
+        className="h-full w-full dockview-theme-abyss deco-dockview-container"
+        singleTabMode="fullwidth"
+        disableTabsOverflowList
+        disableFloatingGroups
+        hideBorders
+        {...props}
+      />
+    </Context.Provider>
+  );
+}
+
+export default Docked;
diff --git a/apps/web/src/components/integrations/detail/context.ts b/apps/web/src/components/integrations/detail/context.ts
new file mode 100644
index 0000000000..181766fe13
--- /dev/null
+++ b/apps/web/src/components/integrations/detail/context.ts
@@ -0,0 +1,16 @@
+import { type Integration } from "@deco/sdk";
+import { createContext, useContext as useContextReact } from "react";
+import { UseFormReturn } from "react-hook-form";
+
+export interface IContext {
+  form: UseFormReturn<Integration>;
+  integration: Integration;
+}
+
+export const Context = createContext<IContext | null>(null);
+
+export const useFormContext = () => {
+  const context = useContextReact(Context);
+
+  return context!;
+};
diff --git a/apps/web/src/components/integrations/detail/edit.tsx b/apps/web/src/components/integrations/detail/edit.tsx
index fc32620fc8..0ace98b6ca 100644
--- a/apps/web/src/components/integrations/detail/edit.tsx
+++ b/apps/web/src/components/integrations/detail/edit.tsx
@@ -1,29 +1,74 @@
-import { useIntegration } from "@deco/sdk";
-import { Spinner } from "@deco/ui/components/spinner.tsx";
-import { useParams } from "react-router";
+import { type Integration, IntegrationSchema, useIntegration } from "@deco/sdk";
+import { Button } from "@deco/ui/components/button.tsx";
+import { Icon } from "@deco/ui/components/icon.tsx";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { Link, useParams } from "react-router";
+import { DockedPageLayout, DockedToggleButton } from "../../pageLayout.tsx";
+import { Context } from "./context.ts";
 import { DetailForm } from "./form.tsx";
+import { Inspector } from "./inspector.tsx";
 
-function EditIntegration({ id }: { id: string }) {
-  const { isLoading, data: integration } = useIntegration(id);
+const MAIN = {
+  header: Header,
+  main: DetailForm,
+};
 
-  if (isLoading) {
-    return (
-      <div className="flex justify-center items-center h-full">
-        <Spinner />
+const TABS = {
+  inspector: {
+    Component: Inspector,
+    initialOpen: true,
+  },
+};
+
+function Header() {
+  return (
+    <>
+      <div>
+        <Button asChild variant="ghost" onClick={() => {}}>
+          <Link to="/integrations">
+            <Icon name="arrow_back" />
+            Back
+          </Link>
+        </Button>
       </div>
-    );
-  }
 
-  return <DetailForm integration={integration ?? undefined} />;
+      <div className="flex items-center gap-2">
+        <DockedToggleButton
+          id="inspector"
+          title="Inspector"
+          variant="outline"
+          size="icon"
+        >
+          <Icon name="frame_inspect" />
+        </DockedToggleButton>
+      </div>
+    </>
+  );
 }
 
 export default function Edit() {
   const { id } = useParams();
+  const { data: integration } = useIntegration(id!);
 
-  // TODO: add nice error handling
-  if (!id) {
-    return <div>No id</div>;
-  }
+  const form = useForm<Integration>({
+    resolver: zodResolver(IntegrationSchema),
+    defaultValues: {
+      id: integration.id || crypto.randomUUID(),
+      name: integration.name || "",
+      description: integration.description || "",
+      icon: integration.icon || "",
+      connection: integration.connection || {
+        type: "HTTP" as const,
+        url: "https://example.com/sse",
+        token: "",
+      },
+    },
+  });
 
-  return <EditIntegration id={id} />;
+  return (
+    <Context.Provider value={{ form, integration }}>
+      <DockedPageLayout main={MAIN} tabs={TABS} />
+    </Context.Provider>
+  );
 }
diff --git a/apps/web/src/components/integrations/detail/form.tsx b/apps/web/src/components/integrations/detail/form.tsx
index a91056b8c3..d01f87f52a 100644
--- a/apps/web/src/components/integrations/detail/form.tsx
+++ b/apps/web/src/components/integrations/detail/form.tsx
@@ -1,8 +1,6 @@
 import {
   type Integration,
-  IntegrationSchema,
   type MCPConnection,
-  useCreateIntegration,
   useUpdateIntegration,
 } from "@deco/sdk";
 import { Button } from "@deco/ui/components/button.tsx";
@@ -25,50 +23,28 @@ import {
 } from "@deco/ui/components/select.tsx";
 import { Spinner } from "@deco/ui/components/spinner.tsx";
 import { Textarea } from "@deco/ui/components/textarea.tsx";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { useRef } from "react";
-import { useForm } from "react-hook-form";
-import { Link, useNavigate } from "react-router";
-import { useBasePath } from "../../../hooks/useBasePath.ts";
-import { PageLayout } from "../../pageLayout.tsx";
-import Inspector from "./inspector.tsx";
+import { useNavigate } from "react-router";
 import { trackEvent } from "../../../hooks/analytics.ts";
+import { useBasePath } from "../../../hooks/useBasePath.ts";
+import { useFormContext } from "./context.ts";
 
-interface DetailProps {
-  integration?: Integration;
-}
-
-export function DetailForm({ integration: editIntegration }: DetailProps) {
+export function DetailForm() {
+  const { integration: editIntegration, form } = useFormContext();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const withBasePath = useBasePath();
 
-  const integrationId = editIntegration?.id;
-
-  const createIntegration = useCreateIntegration();
   const updateIntegration = useUpdateIntegration();
 
-  const form = useForm<Integration>({
-    resolver: zodResolver(IntegrationSchema),
-    defaultValues: {
-      id: integrationId ?? crypto.randomUUID(),
-      name: editIntegration?.name ?? "",
-      description: editIntegration?.description ?? "",
-      icon: editIntegration?.icon ?? "",
-      connection: editIntegration?.connection ?? {
-        type: "HTTP" as const,
-        url: "https://example.com/sse",
-        token: "",
-      },
-    },
-  });
+  const isMutating = updateIntegration.isPending;
 
   const iconValue = form.watch("icon");
   const connection = form.watch("connection");
 
   // Handle connection type change
   const handleConnectionTypeChange = (value: MCPConnection["type"]) => {
-    const ec = editIntegration?.connection;
+    const ec = editIntegration.connection;
 
     form.setValue(
       "connection",
@@ -118,27 +94,16 @@ export function DetailForm({ integration: editIntegration }: DetailProps) {
 
   const onSubmit = async (data: Integration) => {
     try {
-      if (editIntegration) {
-        // Update the existing integration
-        await updateIntegration.mutateAsync(data);
-
-        trackEvent("integration_update", {
-          success: true,
-          data,
-        });
-      } else {
-        // Create a new integration
-        await createIntegration.mutateAsync(data);
-        navigate(withBasePath("/integrations"));
+      // Update the existing integration
+      await updateIntegration.mutateAsync(data);
 
-        trackEvent("integration_create", {
-          success: true,
-          data,
-        });
-      }
+      trackEvent("integration_update", {
+        success: true,
+        data,
+      });
     } catch (error) {
       console.error(
-        `Error ${editIntegration ? "updating" : "creating"} integration:`,
+        `Error updating integration:`,
         error,
       );
 
@@ -150,279 +115,255 @@ export function DetailForm({ integration: editIntegration }: DetailProps) {
     }
   };
 
-  const isMutating = createIntegration.isPending || updateIntegration.isPending;
-
   return (
-    <PageLayout
-      header={
-        <Button asChild className="gap-2" variant="ghost">
-          <Link to={withBasePath("/integrations")}>
-            <Icon name="arrow_back" size={16} />
-            <span>Back</span>
-          </Link>
-        </Button>
-      }
-    >
-      <div className="text-2xl font-bold">
-        {editIntegration ? editIntegration.name : "Create New Integration"}
-      </div>
-
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-          <div className="grid grid-cols-[20%_1fr] gap-2">
-            <div className="space-y-2">
-              <FormLabel>Icon</FormLabel>
-              <FormField
-                control={form.control}
-                name="icon"
-                render={({ field }) => (
-                  <FormItem>
-                    <div>
-                      <input
-                        type="file"
-                        ref={fileInputRef}
-                        accept="image/*"
-                        className="hidden"
-                        onChange={handleFileChange}
-                      />
-                      <FormControl>
-                        <div
-                          className="group aspect-square rounded-md border-2 border-dashed border-muted-foreground/25 flex flex-col items-center justify-center gap-1 bg-muted/10 cursor-pointer hover:bg-muted/20 transition-colors relative overflow-hidden"
-                          onClick={triggerFileInput}
-                        >
-                          {iconValue && /^(data:)|(http?s:)/.test(iconValue)
-                            ? (
-                              <>
-                                <img
-                                  src={iconValue}
-                                  alt="Icon preview"
-                                  className="w-full h-full object-contain"
-                                />
-                                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
-                                  <Icon
-                                    name="upload"
-                                    className="text-white text-xl"
-                                  />
-                                </div>
-                              </>
-                            )
-                            : (
-                              <>
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <div className="grid grid-cols-[20%_1fr] gap-2">
+          <div className="space-y-2">
+            <FormLabel>Icon</FormLabel>
+            <FormField
+              control={form.control}
+              name="icon"
+              render={({ field }) => (
+                <FormItem>
+                  <div>
+                    <input
+                      type="file"
+                      ref={fileInputRef}
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleFileChange}
+                    />
+                    <FormControl>
+                      <div
+                        className="group aspect-square rounded-md border-2 border-dashed border-muted-foreground/25 flex flex-col items-center justify-center gap-1 bg-muted/10 cursor-pointer hover:bg-muted/20 transition-colors relative overflow-hidden"
+                        onClick={triggerFileInput}
+                      >
+                        {iconValue && /^(data:)|(http?s:)/.test(iconValue)
+                          ? (
+                            <>
+                              <img
+                                src={iconValue}
+                                alt="Icon preview"
+                                className="w-full h-full object-contain"
+                              />
+                              <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
                                 <Icon
                                   name="upload"
-                                  className="text-muted-foreground/70 text-xl"
+                                  className="text-white text-xl"
                                 />
-                                <span className="text-xs text-muted-foreground/70 text-center px-1">
-                                  Upload Icon
-                                </span>
-                              </>
-                            )}
-                          <Input
-                            type="hidden"
-                            {...field}
-                          />
-                        </div>
-                      </FormControl>
-                    </div>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-            <div className="flex flex-col gap-2">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="e.g. Shopify"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="description"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Description</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Brief description of the integration"
-                        className="min-h-[100px]"
-                        {...field}
-                      />
+                              </div>
+                            </>
+                          )
+                          : (
+                            <>
+                              <Icon
+                                name="upload"
+                                className="text-muted-foreground/70 text-xl"
+                              />
+                              <span className="text-xs text-muted-foreground/70 text-center px-1">
+                                Upload Icon
+                              </span>
+                            </>
+                          )}
+                        <Input
+                          type="hidden"
+                          {...field}
+                        />
+                      </div>
                     </FormControl>
-                    <FormMessage />
-                  </FormItem>
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="e.g. Shopify"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Brief description of the integration"
+                      className="min-h-[100px]"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <FormLabel>Connection</FormLabel>
+              </div>
+              <div className="space-y-4 p-4 border rounded-md">
+                <FormField
+                  control={form.control}
+                  name="connection.type"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Connection Type</FormLabel>
+                      <Select
+                        onValueChange={(value: MCPConnection["type"]) => {
+                          field.onChange(value);
+                          handleConnectionTypeChange(value);
+                        }}
+                        defaultValue={field.value}
+                        value={field.value}
+                      >
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select a connection type" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="SSE">
+                            Server-Sent Events (SSE)
+                          </SelectItem>
+                          <SelectItem value="Websocket">WebSocket</SelectItem>
+                          <SelectItem value="Deco">Deco</SelectItem>
+                          <SelectItem value="HTTP">HTTP</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {["SSE", "HTTP"].includes(connection.type) && (
+                  <>
+                    <FormField
+                      control={form.control}
+                      name="connection.url"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{connection.type} URL</FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder="https://example.com/sse"
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="connection.token"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Token</FormLabel>
+                          <span className="text-[10px] text-muted-foreground ml-1">
+                            optional
+                          </span>
+                          <FormControl>
+                            <Input placeholder="token" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </>
                 )}
-              />
-              <div className="space-y-2">
-                <div className="flex items-center gap-2">
-                  <FormLabel>Connection</FormLabel>
-                </div>
-                <div className="space-y-4 p-4 border rounded-md">
+
+                {connection.type === "Websocket" && (
                   <FormField
                     control={form.control}
-                    name="connection.type"
+                    name="connection.url"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>Connection Type</FormLabel>
-                        <Select
-                          onValueChange={(value: MCPConnection["type"]) => {
-                            field.onChange(value);
-                            handleConnectionTypeChange(value);
-                          }}
-                          defaultValue={field.value}
-                          value={field.value}
-                        >
-                          <FormControl>
-                            <SelectTrigger>
-                              <SelectValue placeholder="Select a connection type" />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            <SelectItem value="SSE">
-                              Server-Sent Events (SSE)
-                            </SelectItem>
-                            <SelectItem value="Websocket">WebSocket</SelectItem>
-                            <SelectItem value="Deco">Deco</SelectItem>
-                            <SelectItem value="HTTP">HTTP</SelectItem>
-                          </SelectContent>
-                        </Select>
+                        <FormLabel>WebSocket URL</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder="wss://example.com/ws"
+                            {...field}
+                          />
+                        </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
+                )}
 
-                  {["SSE", "HTTP"].includes(connection.type) && (
-                    <>
-                      <FormField
-                        control={form.control}
-                        name="connection.url"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>{connection.type} URL</FormLabel>
-                            <FormControl>
-                              <Input
-                                placeholder="https://example.com/sse"
-                                {...field}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="connection.token"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>Token</FormLabel>
-                            <span className="text-[10px] text-muted-foreground ml-1">
-                              optional
-                            </span>
-                            <FormControl>
-                              <Input placeholder="token" {...field} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </>
-                  )}
-
-                  {connection.type === "Websocket" && (
+                {connection.type === "Deco" && (
+                  <>
                     <FormField
                       control={form.control}
-                      name="connection.url"
+                      name="connection.tenant"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>WebSocket URL</FormLabel>
+                          <FormLabel>Tenant ID</FormLabel>
                           <FormControl>
-                            <Input
-                              placeholder="wss://example.com/ws"
-                              {...field}
-                            />
+                            <Input placeholder="tenant-id" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="connection.token"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Token</FormLabel>
+                          <span className="text-[10px] text-muted-foreground ml-1">
+                            optional
+                          </span>
+                          <FormControl>
+                            <Input placeholder="token" {...field} />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
                       )}
                     />
-                  )}
-
-                  {connection.type === "Deco" && (
-                    <>
-                      <FormField
-                        control={form.control}
-                        name="connection.tenant"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>Tenant ID</FormLabel>
-                            <FormControl>
-                              <Input placeholder="tenant-id" {...field} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={form.control}
-                        name="connection.token"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>Token</FormLabel>
-                            <span className="text-[10px] text-muted-foreground ml-1">
-                              optional
-                            </span>
-                            <FormControl>
-                              <Input placeholder="token" {...field} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex gap-2 justify-end">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() =>
-                navigate(withBasePath("/integrations/marketplace"))}
-            >
-              Cancel
-            </Button>
-            <Button type="submit" disabled={isMutating} className="gap-2">
-              {isMutating
-                ? (
-                  <>
-                    <Spinner size="xs" />
-                    {editIntegration ? "Updating..." : "Creating..."}
                   </>
-                )
-                : (
-                  editIntegration ? "Save" : "Create"
                 )}
-            </Button>
+              </div>
+            </div>
           </div>
-        </form>
-      </Form>
-
-      <hr className="my-4" />
+        </div>
 
-      <Inspector connection={connection} />
-    </PageLayout>
+        <div className="flex gap-2 justify-end">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => navigate(withBasePath("/integrations/marketplace"))}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isMutating} className="gap-2">
+            {isMutating
+              ? (
+                <>
+                  <Spinner size="xs" />
+                  Updating...
+                </>
+              )
+              : "Save"}
+          </Button>
+        </div>
+      </form>
+    </Form>
   );
 }
diff --git a/apps/web/src/components/integrations/detail/inspector.tsx b/apps/web/src/components/integrations/detail/inspector.tsx
index b8c6a2f9a3..c5f9d92417 100644
--- a/apps/web/src/components/integrations/detail/inspector.tsx
+++ b/apps/web/src/components/integrations/detail/inspector.tsx
@@ -7,8 +7,11 @@ import { Input } from "@deco/ui/components/input.tsx";
 import { Separator } from "@deco/ui/components/separator.tsx";
 import { Spinner } from "@deco/ui/components/spinner.tsx";
 import { cn } from "@deco/ui/lib/utils.ts";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
+import { ErrorBoundary, useError } from "../../../ErrorBoundary.tsx";
+import { EmptyState } from "../../common/EmptyState.tsx";
 import { ConnStatus } from "./connStatus.tsx";
+import { useFormContext } from "./context.ts";
 import { ToolCallForm } from "./toolCallForm.tsx";
 import { ToolCallResult } from "./toolCallResult.tsx";
 import type { MCPToolCallResult } from "./types.ts";
@@ -17,7 +20,45 @@ interface InspectorProps {
   connection: MCPConnection;
 }
 
-function Inspector({ connection }: InspectorProps) {
+export function Inspector() {
+  const { form } = useFormContext();
+
+  const connection = form.watch("connection");
+
+  return (
+    <ErrorBoundary fallback={<Inspector.ErrorFallback />}>
+      <Suspense fallback={<Inspector.Skeleton />}>
+        <Inspector.UI connection={connection} />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+Inspector.ErrorFallback = () => {
+  const error = useError();
+
+  return (
+    <EmptyState
+      icon="error"
+      title="Error loading tools"
+      description={error.state.error?.message ?? "An unknown error occurred"}
+      buttonProps={{
+        onClick: () => error.reset(),
+        children: "Try Again",
+      }}
+    />
+  );
+};
+
+Inspector.Skeleton = () => {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <Spinner />
+    </div>
+  );
+};
+
+Inspector.UI = ({ connection }: InspectorProps) => {
   const tools = useTools(connection);
   const toolCall = useToolCall(connection);
   const [selectedTool, setSelectedTool] = useState<string | null>(null);
@@ -141,7 +182,7 @@ function Inspector({ connection }: InspectorProps) {
       <Card className="p-4">
         <div className="flex flex-col gap-4">
           {/* Tool and Server Stats */}
-          <div className="flex items-center gap-4">
+          <div className="flex items-center flex-wrap gap-4">
             <div>
               <div className="text-sm text-muted-foreground">Total Tools</div>
               <div className="text-2xl font-bold">
@@ -281,7 +322,7 @@ function Inspector({ connection }: InspectorProps) {
           /* Main content with search and tool call */
           <div
             className={cn(
-              "grid grid-cols-1 md:grid-cols-2 gap-4",
+              "grid grid-cols-1 gap-4",
               tools.isLoading && "invisible",
             )}
           >
@@ -404,6 +445,4 @@ function Inspector({ connection }: InspectorProps) {
         )}
     </div>
   );
-}
-
-export default Inspector;
+};
diff --git a/apps/web/src/components/integrations/detail/new.tsx b/apps/web/src/components/integrations/detail/new.tsx
deleted file mode 100644
index 4d4a70840c..0000000000
--- a/apps/web/src/components/integrations/detail/new.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { DetailForm } from "./form.tsx";
-
-export default function NewIntegration() {
-  return <DetailForm />;
-}
diff --git a/apps/web/src/components/integrations/list/breadcrumb.tsx b/apps/web/src/components/integrations/list/breadcrumb.tsx
index 7fe75bdce7..8f33d2ea63 100644
--- a/apps/web/src/components/integrations/list/breadcrumb.tsx
+++ b/apps/web/src/components/integrations/list/breadcrumb.tsx
@@ -1,8 +1,22 @@
-import { useIntegrations, useMarketplaceIntegrations } from "@deco/sdk";
+import {
+  useCreateIntegration,
+  useIntegrations,
+  useMarketplaceIntegrations,
+} from "@deco/sdk";
 import { Button } from "@deco/ui/components/button.tsx";
 import { Icon } from "@deco/ui/components/icon.tsx";
-import { ReactNode } from "react";
-import { Link, useMatch } from "react-router";
+import { Spinner } from "@deco/ui/components/spinner.tsx";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@deco/ui/components/alert-dialog.tsx";
+import { ReactNode, useState } from "react";
+import { Link, useMatch, useNavigate } from "react-router";
 import { useBasePath } from "../../../hooks/useBasePath.ts";
 import { PageLayout } from "../../pageLayout.tsx";
 
@@ -30,45 +44,88 @@ function BreadcrumbItem({
 }
 
 export function IntegrationPage({ children }: { children: ReactNode }) {
+  const navigate = useNavigate();
   const withBasePath = useBasePath();
   const connected = useMatch({ path: "/integrations" });
+  const [error, setError] = useState<string | null>(null);
 
+  const create = useCreateIntegration();
   const { data: installedIntegrations } = useIntegrations();
   const { data: marketplaceIntegrations } = useMarketplaceIntegrations();
 
+  const handleCreate = async () => {
+    try {
+      const result = await create.mutateAsync({});
+      navigate(withBasePath(`/integration/${result.id}`));
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to create integration",
+      );
+    }
+  };
+
   return (
-    <PageLayout
-      header={
-        <>
-          <div className="justify-self-start">
-            <div className="flex gap-2">
-              <BreadcrumbItem
-                active={!!connected}
-                label="Connected"
-                count={installedIntegrations?.length ?? 0}
-                to={withBasePath("/integrations")}
-              />
+    <>
+      <PageLayout
+        main={children}
+        header={
+          <>
+            <div className="justify-self-start">
+              <div className="flex gap-2">
+                <BreadcrumbItem
+                  active={!!connected}
+                  label="Connected"
+                  count={installedIntegrations?.length ?? 0}
+                  to={withBasePath("/integrations")}
+                />
 
-              <BreadcrumbItem
-                active={!connected}
-                label="All"
-                count={marketplaceIntegrations?.integrations.length ?? 0}
-                to={withBasePath("/integrations/marketplace")}
-              />
+                <BreadcrumbItem
+                  active={!connected}
+                  label="All"
+                  count={marketplaceIntegrations?.integrations.length ?? 0}
+                  to={withBasePath("/integrations/marketplace")}
+                />
+              </div>
+            </div>
+            <div>
+              <Button
+                onClick={handleCreate}
+                disabled={create.isPending}
+                className="gap-2"
+              >
+                {create.isPending
+                  ? (
+                    <>
+                      <Spinner size="xs" />
+                      Creating...
+                    </>
+                  )
+                  : (
+                    <>
+                      <Icon name="add" />
+                      Create Integration
+                    </>
+                  )}
+              </Button>
             </div>
-          </div>
-          <div>
-            <Button asChild>
-              <Link to={withBasePath("/integration/new")}>
-                <Icon name="add" />
-                Create Integration
-              </Link>
-            </Button>
-          </div>
-        </>
-      }
-    >
-      {children}
-    </PageLayout>
+          </>
+        }
+      />
+      <AlertDialog open={!!error} onOpenChange={() => setError(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Error</AlertDialogTitle>
+            <AlertDialogDescription>
+              {error}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={() => setError(null)}>
+              OK
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }
diff --git a/apps/web/src/components/pageLayout.tsx b/apps/web/src/components/pageLayout.tsx
index 4ec7ad0fbf..b6ec949f56 100644
--- a/apps/web/src/components/pageLayout.tsx
+++ b/apps/web/src/components/pageLayout.tsx
@@ -2,12 +2,20 @@ import { Button } from "@deco/ui/components/button.tsx";
 import { Icon } from "@deco/ui/components/icon.tsx";
 import { ScrollArea } from "@deco/ui/components/scroll-area.tsx";
 import { useSidebar } from "@deco/ui/components/sidebar.tsx";
-import { ReactNode } from "react";
+import { cn } from "@deco/ui/lib/utils.ts";
+import {
+  ComponentProps,
+  ComponentType,
+  createContext,
+  ReactNode,
+  use,
+} from "react";
+import Docked, { togglePanel, useDock } from "./dock/index.tsx";
 import { TeamSelector } from "./sidebar/TeamSelector.tsx";
 
 export interface PageProps {
-  header: ReactNode;
-  children: ReactNode;
+  header?: ReactNode;
+  main: ReactNode;
   footer?: ReactNode;
 }
 
@@ -37,20 +45,22 @@ export function MobileTopbar() {
  * and an optional footer. The header and footer take only the space they need, while the content
  * area takes up the remaining space and becomes scrollable when content overflows.
  */
-export function PageLayout({ header, children, footer }: PageProps) {
+export function PageLayout({ header, main, footer }: PageProps) {
   return (
     <div className="h-full flex flex-col">
-      <header className="w-full flex flex-col">
-        <MobileTopbar />
-        <div className="w-full flex items-center justify-between gap-4 px-4 py-2">
-          {header}
-        </div>
-      </header>
+      {header && (
+        <header className="w-full flex flex-col">
+          <MobileTopbar />
+          <div className="w-full flex items-center justify-between gap-4 px-4 py-2">
+            {header}
+          </div>
+        </header>
+      )}
 
       <div className="flex-1 min-h-0">
         <ScrollArea className="h-full">
           <div className="px-4 py-2">
-            {children}
+            {main}
           </div>
         </ScrollArea>
       </div>
@@ -63,3 +73,66 @@ export function PageLayout({ header, children, footer }: PageProps) {
     </div>
   );
 }
+
+interface MainViewProps {
+  header?: ComponentType<unknown>;
+  main: ComponentType<unknown>;
+  footer?: ComponentType<unknown>;
+}
+
+export interface DockedPageProps {
+  main: MainViewProps;
+  tabs: Record<string, {
+    Component: ComponentType<unknown>;
+    initialOpen?: boolean;
+  }>;
+}
+
+const Context = createContext<MainViewProps | null>(null);
+
+function MainView() {
+  const mainView = use(Context);
+
+  if (!mainView) {
+    return null;
+  }
+
+  const { header: Header, main: Main, footer: Footer } = mainView;
+
+  return (
+    <PageLayout
+      header={Header && <Header />}
+      main={<Main />}
+      footer={Footer && <Footer />}
+    />
+  );
+}
+
+export function DockedPageLayout({ main, tabs }: DockedPageProps) {
+  return (
+    <Context.Provider value={main}>
+      <Docked mainView={MainView} components={tabs} />
+    </Context.Provider>
+  );
+}
+
+export function DockedToggleButton(
+  { id, title, children, className, ...btnProps }: {
+    id: string;
+    title: string;
+    children: ReactNode;
+  } & ComponentProps<typeof Button>,
+) {
+  const { openPanels, availablePanels } = useDock();
+
+  return (
+    <Button
+      {...btnProps}
+      disabled={!availablePanels.has(id)}
+      onClick={() => togglePanel({ id, component: id, title })}
+      className={cn(className, openPanels.has(id) ? "bg-accent" : "")}
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 4f3cdbe617..595c56066e 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -20,10 +20,6 @@ import { ErrorBoundary, useError } from "./ErrorBoundary.tsx";
 import { trackException } from "./hooks/analytics.ts";
 import { About } from "./components/about/index.tsx";
 
-const IntegrationNew = lazy(() =>
-  import("./components/integrations/detail/new.tsx")
-);
-
 const IntegrationEdit = lazy(() =>
   import("./components/integrations/detail/edit.tsx")
 );
@@ -161,10 +157,6 @@ function Router() {
           path="integrations"
           element={<Wrapper slot={<MyIntegrations />} />}
         />
-        <Route
-          path="integration/new"
-          element={<Wrapper slot={<IntegrationNew />} />}
-        />
         <Route
           path="integration/:id"
           element={<Wrapper slot={<IntegrationEdit />} />}
diff --git a/packages/sdk/src/hooks/mcp.ts b/packages/sdk/src/hooks/mcp.ts
index 54378c4cbb..fe71fbb825 100644
--- a/packages/sdk/src/hooks/mcp.ts
+++ b/packages/sdk/src/hooks/mcp.ts
@@ -25,7 +25,7 @@ export const useCreateIntegration = () => {
   const { context: root } = useSDK();
 
   const create = useMutation({
-    mutationFn: (mcp: Integration) => createIntegration(root, mcp),
+    mutationFn: (mcp: Partial<Integration>) => createIntegration(root, mcp),
     onSuccess: (result) => {
       const key = getKeyFor(root, result.id);