diff --git a/packages/ui/src/components/Section.tsx b/packages/ui/src/components/Section.tsx
index a5dc482..1ccb5eb 100644
--- a/packages/ui/src/components/Section.tsx
+++ b/packages/ui/src/components/Section.tsx
@@ -1,58 +1,68 @@
-import { ReactNode } from "react";
+import { createContext, ReactNode, useContext, useState } from "react";
 import {
   Badge,
-  Button,
   Card,
   CardBody,
   CardHeader,
   CardTitle,
   Split,
   SplitItem,
+  Switch,
 } from "@patternfly/react-core";
-import { PencilAltIcon } from "@patternfly/react-icons";
+
+const SectionContext = createContext<{
+  view: "viewer" | "designer";
+  toggleView: () => void;
+}>({
+  view: "viewer",
+  toggleView: () => {},
+});
+
+export function useSection() {
+  return useContext(SectionContext).view;
+}
 
 export function Section({
   title,
   count,
   id,
   children,
-  onEdit,
 }: {
   title: ReactNode;
   count?: number;
   id: string;
   children: ReactNode;
-  onEdit?: () => void;
 }) {
+  const [view, setView] = useState<"viewer" | "designer">("viewer");
+  const toggleView = () =>
+    setView((v) => (v === "viewer" ? "designer" : "viewer"));
   return (
-    <Card isPlain={true} isLarge={true} id={id}>
-      <CardHeader
-        actions={{
-          actions: (
-            <>
-              {onEdit && (
-                <Button
-                  variant={"control"}
-                  icon={<PencilAltIcon />}
-                  onClick={onEdit}
-                />
+    <SectionContext.Provider value={{ view, toggleView }}>
+      <Card isPlain={true} isLarge={true} id={id}>
+        <CardHeader
+          actions={{
+            actions: (
+              <Switch
+                isChecked={view === "designer"}
+                onChange={toggleView}
+                label={"Design"}
+              />
+            ),
+          }}
+        >
+          <CardTitle>
+            <Split hasGutter={true}>
+              <SplitItem>{title}</SplitItem>
+              {count !== undefined && (
+                <SplitItem>
+                  <Badge>{count}</Badge>
+                </SplitItem>
               )}
-            </>
-          ),
-        }}
-      >
-        <CardTitle>
-          <Split hasGutter={true}>
-            <SplitItem>{title}</SplitItem>
-            {count !== undefined && (
-              <SplitItem>
-                <Badge>{count}</Badge>
-              </SplitItem>
-            )}
-          </Split>
-        </CardTitle>
-      </CardHeader>
-      <CardBody>{children}</CardBody>
-    </Card>
+            </Split>
+          </CardTitle>
+        </CardHeader>
+        <CardBody>{children}</CardBody>
+      </Card>
+    </SectionContext.Provider>
   );
 }
diff --git a/packages/ui/src/documentDesigner/Designer.tsx b/packages/ui/src/documentDesigner/Designer.tsx
index 41a984b..0d8e861 100644
--- a/packages/ui/src/documentDesigner/Designer.tsx
+++ b/packages/ui/src/documentDesigner/Designer.tsx
@@ -7,9 +7,8 @@ import { SecurityScheme } from "./SecurityScheme.tsx";
 import { SecurityRequirements } from "./SecurityRequirements.tsx";
 import { useMachineSelector } from "./DocumentDesignerMachineContext.ts";
 import { DesignerLayout } from "./DesignerLayout.tsx";
-import { PathsExplorer } from "./PathsExplorer.tsx";
-import { PathsTree } from "./PathsTree.tsx";
 import { OpenApiEditorMachineContext } from "../OpenApiEditor.tsx";
+import { Paths } from "./Paths.tsx";
 
 export function Designer() {
   const {
@@ -38,7 +37,7 @@ export function Designer() {
   return (
     <DesignerLayout
       info={<Info />}
-      paths={editable ? <PathsTree /> : <PathsExplorer />}
+      paths={<Paths />}
       pathsCount={pathsCount}
       contact={<Contact />}
       license={<License />}
diff --git a/packages/ui/src/documentDesigner/Info.tsx b/packages/ui/src/documentDesigner/Info.tsx
index 7ef9de4..26c4c86 100644
--- a/packages/ui/src/documentDesigner/Info.tsx
+++ b/packages/ui/src/documentDesigner/Info.tsx
@@ -10,6 +10,7 @@ import {
   useMachineActorRef,
   useMachineSelector,
 } from "./DocumentDesignerMachineContext.ts";
+import { useSection } from "../components/Section.tsx";
 
 export function Info() {
   const { title, version, description, editable } = useMachineSelector(
@@ -20,8 +21,10 @@ export function Info() {
         description: context.description,
         editable: context.editable,
       };
-    }
+    },
   );
+  const view = useSection();
+  const isEditable = view === "designer" || editable;
   const actorRef = useMachineActorRef();
   return (
     <DescriptionList isHorizontal={true}>
@@ -33,7 +36,7 @@ export function Info() {
               actorRef.send({ type: "CHANGE_TITLE", title });
             }}
             value={title}
-            editing={editable}
+            editing={isEditable}
             autoFocus={true}
           />
         </DescriptionListDescription>
@@ -46,14 +49,14 @@ export function Info() {
               actorRef.send({ type: "CHANGE_VERSION", version });
             }}
             value={version}
-            editing={editable}
+            editing={isEditable}
           />
         </DescriptionListDescription>
       </DescriptionListGroup>
       <DescriptionListGroup>
         <DescriptionListTerm>Description</DescriptionListTerm>
         <DescriptionListDescription>
-          <Markdown editing={editable}>{description}</Markdown>
+          <Markdown editing={isEditable}>{description}</Markdown>
         </DescriptionListDescription>
       </DescriptionListGroup>
     </DescriptionList>
diff --git a/packages/ui/src/documentDesigner/Paths.tsx b/packages/ui/src/documentDesigner/Paths.tsx
new file mode 100644
index 0000000..11eb655
--- /dev/null
+++ b/packages/ui/src/documentDesigner/Paths.tsx
@@ -0,0 +1,13 @@
+import { useSection } from "../components/Section.tsx";
+import { useMachineSelector } from "./DocumentDesignerMachineContext.ts";
+import { PathsTree } from "./PathsTree.tsx";
+import { PathsExplorer } from "./PathsExplorer.tsx";
+
+export function Paths() {
+  const { editable } = useMachineSelector(({ context }) => ({
+    editable: context.editable,
+  }));
+  const view = useSection();
+  const isEditable = view === "designer" || editable;
+  return isEditable ? <PathsTree /> : <PathsExplorer />;
+}
diff --git a/packages/ui/src/documentDesigner/PathsExplorer.tsx b/packages/ui/src/documentDesigner/PathsExplorer.tsx
index a0deb6d..e94a725 100644
--- a/packages/ui/src/documentDesigner/PathsExplorer.tsx
+++ b/packages/ui/src/documentDesigner/PathsExplorer.tsx
@@ -39,7 +39,7 @@ import { Markdown } from "../components/Markdown.tsx";
 import { Path } from "../components/Path.tsx";
 import { TagLabel } from "../components/TagLabel.tsx";
 import { assign, setup } from "xstate";
-import { useMachine } from "@xstate/react";
+import { useActor } from "@xstate/react";
 import { SectionSkeleton } from "../components/SectionSkeleton.tsx";
 import { useState } from "react";
 import { OperationLabel } from "./OperationLabel.tsx";
@@ -123,7 +123,7 @@ export function PathsExplorer() {
       allPaths: context.paths,
     };
   });
-  const [state, send] = useMachine(machine, {
+  const [state, send] = useActor(machine, {
     input: {
       paths: allPaths,
     },
@@ -289,95 +289,99 @@ function OperationRow({
         id={`path-${pathId}-operation-${name}-expand`}
         isHidden={!isExpanded}
       >
-        <Stack hasGutter={true}>
-          {operation.description && (
-            <Markdown searchTerm={searchTerm}>{operation.description}</Markdown>
-          )}
-          {operation.pathParameters.length +
-            operation.headerParameters.length +
-            operation.queryParameters.length +
-            operation.headerParameters.length >
-            0 && (
-            <>
-              <Title headingLevel={"h4"}>Request</Title>
-              <Accordion>
-                {operation.pathParameters.length > 0 && (
-                  <AccordionSection
-                    title={"Path parameters"}
-                    id={"path-params"}
-                    startExpanded={false}
-                    count={operation.pathParameters.length}
-                  >
-                    <Parameters
-                      parameters={operation.pathParameters}
-                      searchTerm={searchTerm}
-                    />
-                  </AccordionSection>
-                )}
-                {operation.queryParameters.length > 0 && (
-                  <AccordionSection
-                    title={"Query parameters"}
-                    id={"query-params"}
-                    startExpanded={false}
-                    count={operation.queryParameters.length}
-                  >
-                    <Parameters
-                      parameters={operation.queryParameters}
-                      searchTerm={searchTerm}
-                    />
-                  </AccordionSection>
-                )}
-                {operation.headerParameters.length > 0 && (
-                  <AccordionSection
-                    title={"Header parameters"}
-                    id={"header-params"}
-                    startExpanded={false}
-                    count={operation.headerParameters.length}
-                  >
-                    <Parameters
-                      parameters={operation.headerParameters}
-                      searchTerm={searchTerm}
-                    />
-                  </AccordionSection>
-                )}
-                {operation.cookieParameters.length > 0 && (
-                  <AccordionSection
-                    title={"Cookie parameters"}
-                    id={"cookie-params"}
-                    startExpanded={false}
-                    count={operation.cookieParameters.length}
-                  >
-                    <Parameters
-                      parameters={operation.cookieParameters}
-                      searchTerm={searchTerm}
-                    />
-                  </AccordionSection>
-                )}
-              </Accordion>
-            </>
-          )}
-          <Title headingLevel={"h4"}>Responses</Title>
-          <Accordion>
-            {operation.responses.map((t) => (
-              <AccordionSection
-                title={
-                  <Split hasGutter={true}>
-                    <StatusCodeLabel code={t.statusCode} />
-                    {t.description && (
-                      <Markdown searchTerm={searchTerm}>
-                        {t.description}
-                      </Markdown>
-                    )}
-                  </Split>
-                }
-                id={`response-${t.statusCode}`}
-                startExpanded={false}
-              >
-                TODO
-              </AccordionSection>
-            ))}
-          </Accordion>
-        </Stack>
+        {isExpanded && (
+          <Stack hasGutter={true}>
+            {operation.description && (
+              <Markdown searchTerm={searchTerm}>
+                {operation.description}
+              </Markdown>
+            )}
+            {operation.pathParameters.length +
+              operation.headerParameters.length +
+              operation.queryParameters.length +
+              operation.headerParameters.length >
+              0 && (
+              <>
+                <Title headingLevel={"h4"}>Request</Title>
+                <Accordion>
+                  {operation.pathParameters.length > 0 && (
+                    <AccordionSection
+                      title={"Path parameters"}
+                      id={"path-params"}
+                      startExpanded={false}
+                      count={operation.pathParameters.length}
+                    >
+                      <Parameters
+                        parameters={operation.pathParameters}
+                        searchTerm={searchTerm}
+                      />
+                    </AccordionSection>
+                  )}
+                  {operation.queryParameters.length > 0 && (
+                    <AccordionSection
+                      title={"Query parameters"}
+                      id={"query-params"}
+                      startExpanded={false}
+                      count={operation.queryParameters.length}
+                    >
+                      <Parameters
+                        parameters={operation.queryParameters}
+                        searchTerm={searchTerm}
+                      />
+                    </AccordionSection>
+                  )}
+                  {operation.headerParameters.length > 0 && (
+                    <AccordionSection
+                      title={"Header parameters"}
+                      id={"header-params"}
+                      startExpanded={false}
+                      count={operation.headerParameters.length}
+                    >
+                      <Parameters
+                        parameters={operation.headerParameters}
+                        searchTerm={searchTerm}
+                      />
+                    </AccordionSection>
+                  )}
+                  {operation.cookieParameters.length > 0 && (
+                    <AccordionSection
+                      title={"Cookie parameters"}
+                      id={"cookie-params"}
+                      startExpanded={false}
+                      count={operation.cookieParameters.length}
+                    >
+                      <Parameters
+                        parameters={operation.cookieParameters}
+                        searchTerm={searchTerm}
+                      />
+                    </AccordionSection>
+                  )}
+                </Accordion>
+              </>
+            )}
+            <Title headingLevel={"h4"}>Responses</Title>
+            <Accordion>
+              {operation.responses.map((t) => (
+                <AccordionSection
+                  title={
+                    <Split hasGutter={true}>
+                      <StatusCodeLabel code={t.statusCode} />
+                      {t.description && (
+                        <Markdown searchTerm={searchTerm}>
+                          {t.description}
+                        </Markdown>
+                      )}
+                    </Split>
+                  }
+                  id={`response-${t.statusCode}`}
+                  startExpanded={false}
+                >
+                  TODO
+                </AccordionSection>
+              ))}
+            </Accordion>
+          </Stack>
+        )}
       </DataListContent>
     </DataListItem>
   );