diff --git a/src/components/forms/YamlConfirmation.tsx b/src/components/forms/YamlConfirmation.tsx
new file mode 100644
index 0000000000..9d346c6227
--- /dev/null
+++ b/src/components/forms/YamlConfirmation.tsx
@@ -0,0 +1,27 @@
+import { FC } from "react";
+import { ConfirmationModal } from "@canonical/react-components";
+
+interface Props {
+  onConfirm: () => void;
+  close: () => void;
+}
+
+const YamlConfirmation: FC<Props> = ({ onConfirm, close }) => {
+  return (
+    <ConfirmationModal
+      confirmButtonLabel="Discard changes"
+      onConfirm={onConfirm}
+      close={close}
+      title="Confirm"
+    >
+      <p>
+        Switching back to guided forms will discard all changes in the YAML
+        editor.
+        <br />
+        Are you sure you want to proceed?
+      </p>
+    </ConfirmationModal>
+  );
+};
+
+export default YamlConfirmation;
diff --git a/src/components/forms/YamlForm.tsx b/src/components/forms/YamlForm.tsx
index 02a8733ef0..82912c63a7 100644
--- a/src/components/forms/YamlForm.tsx
+++ b/src/components/forms/YamlForm.tsx
@@ -4,6 +4,7 @@ import { updateMaxHeight } from "util/updateMaxHeight";
 import useEventListener from "@use-it/event-listener";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
+import classnames from "classnames";
 
 export interface YamlFormValues {
   yaml?: string;
@@ -46,7 +47,10 @@ const YamlForm: FC<Props> = ({
   return (
     <>
       {children}
-      <div ref={containerRef} className="code-editor-wrapper">
+      <div
+        ref={containerRef}
+        className={classnames("code-editor-wrapper", { "read-only": readOnly })}
+      >
         <Editor
           defaultValue={yaml}
           language="yaml"
diff --git a/src/pages/instances/CreateInstance.tsx b/src/pages/instances/CreateInstance.tsx
index ebce9c5ad3..731dbe77b7 100644
--- a/src/pages/instances/CreateInstance.tsx
+++ b/src/pages/instances/CreateInstance.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode, useEffect, useState } from "react";
+import React, { FC, ReactNode, useEffect, useState } from "react";
 import {
   ActionButton,
   Button,
@@ -74,6 +74,7 @@ import {
 } from "util/instanceValidation";
 import FormFooterLayout from "components/forms/FormFooterLayout";
 import { useToastNotification } from "context/toastNotificationProvider";
+import { useDocs } from "context/useDocs";
 
 export type CreateInstanceFormValues = InstanceDetailsFormValues &
   FormDeviceValues &
@@ -91,6 +92,7 @@ interface PresetFormState {
 }
 
 const CreateInstance: FC = () => {
+  const docBaseLink = useDocs();
   const eventQueue = useEventQueue();
   const location = useLocation() as Location<PresetFormState | null>;
   const navigate = useNavigate();
@@ -381,6 +383,7 @@ const CreateInstance: FC = () => {
       <Form onSubmit={formik.handleSubmit} className="form">
         <InstanceFormMenu
           active={section}
+          formik={formik}
           setActive={updateSection}
           isConfigDisabled={!formik.values.image}
           isConfigOpen={!!formik.values.image && isConfigOpen}
@@ -421,16 +424,20 @@ const CreateInstance: FC = () => {
 
             {section === YAML_CONFIGURATION && (
               <YamlForm
+                key={`yaml-form-${formik.values.readOnly}`}
                 yaml={getYaml()}
                 setYaml={(yaml) => void formik.setFieldValue("yaml", yaml)}
               >
-                <Notification
-                  severity="caution"
-                  title="Before you edit the YAML"
-                  titleElement="h2"
-                >
-                  Changes will be discarded, when switching back to the guided
-                  forms.
+                <Notification severity="information" title="YAML Configuration">
+                  This is the YAML representation of the instance.
+                  <br />
+                  <a
+                    href={`${docBaseLink}/instances`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Learn more about instances
+                  </a>
                 </Notification>
               </YamlForm>
             )}
diff --git a/src/pages/instances/EditInstance.tsx b/src/pages/instances/EditInstance.tsx
index 581f80e922..e835e00dd5 100644
--- a/src/pages/instances/EditInstance.tsx
+++ b/src/pages/instances/EditInstance.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import {
   ActionButton,
   Button,
@@ -55,6 +55,7 @@ import { hasDiskError, hasNetworkError } from "util/instanceValidation";
 import FormFooterLayout from "components/forms/FormFooterLayout";
 import { useToastNotification } from "context/toastNotificationProvider";
 import InstanceLink from "pages/instances/InstanceLink";
+import { useDocs } from "context/useDocs";
 
 export interface InstanceEditDetailsFormValues {
   name: string;
@@ -79,6 +80,7 @@ interface Props {
 }
 
 const EditInstance: FC<Props> = ({ instance }) => {
+  const docBaseLink = useDocs();
   const eventQueue = useEventQueue();
   const toastNotify = useToastNotification();
   const { project, section } = useParams<{
@@ -185,6 +187,7 @@ const EditInstance: FC<Props> = ({ instance }) => {
           toggleConfigOpen={toggleMenu}
           hasDiskError={hasDiskError(formik)}
           hasNetworkError={hasNetworkError(formik)}
+          formik={formik}
         />
         <Row className="form-contents" key={section}>
           <Col size={12}>
@@ -218,19 +221,22 @@ const EditInstance: FC<Props> = ({ instance }) => {
 
             {section === slugify(YAML_CONFIGURATION) && (
               <YamlForm
+                key={`yaml-form-${formik.values.readOnly}`}
                 yaml={getYaml()}
                 setYaml={(yaml) => void formik.setFieldValue("yaml", yaml)}
                 readOnly={readOnly}
               >
-                {!readOnly && (
-                  <Notification
-                    severity="caution"
-                    title="Before you edit the YAML"
+                <Notification severity="information" title="YAML Configuration">
+                  This is the YAML representation of the instance.
+                  <br />
+                  <a
+                    href={`${docBaseLink}/instances`}
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    Changes will be discarded, when switching back to the guided
-                    forms.
-                  </Notification>
-                )}
+                    Learn more about instances
+                  </a>
+                </Notification>
               </YamlForm>
             )}
           </Col>
diff --git a/src/pages/instances/forms/InstanceFormMenu.tsx b/src/pages/instances/forms/InstanceFormMenu.tsx
index d95df01edb..aa95b03699 100644
--- a/src/pages/instances/forms/InstanceFormMenu.tsx
+++ b/src/pages/instances/forms/InstanceFormMenu.tsx
@@ -1,8 +1,10 @@
-import { FC, useEffect } from "react";
+import React, { FC, ReactNode, useEffect, useState } from "react";
 import MenuItem from "components/forms/FormMenuItem";
 import { Button, useNotify } from "@canonical/react-components";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import useEventListener from "@use-it/event-listener";
+import YamlConfirmation from "components/forms/YamlConfirmation";
+import { InstanceAndProfileFormikProps } from "components/forms/instanceAndProfileFormValues";
 
 export const MAIN_CONFIGURATION = "Main configuration";
 export const DISK_DEVICES = "Disk devices";
@@ -21,6 +23,7 @@ interface Props {
   setActive: (val: string) => void;
   hasDiskError: boolean;
   hasNetworkError: boolean;
+  formik: InstanceAndProfileFormikProps;
 }
 
 const InstanceFormMenu: FC<Props> = ({
@@ -31,11 +34,30 @@ const InstanceFormMenu: FC<Props> = ({
   setActive,
   hasDiskError,
   hasNetworkError,
+  formik,
 }) => {
   const notify = useNotify();
+  const [confirmModal, setConfirmModal] = useState<ReactNode | null>(null);
   const menuItemProps = {
     active,
-    setActive,
+    setActive: (val: string) => {
+      if (Boolean(formik.values.yaml) && val !== YAML_CONFIGURATION) {
+        const handleConfirm = () => {
+          void formik.setFieldValue("yaml", undefined);
+          setConfirmModal(null);
+          setActive(val);
+        };
+
+        setConfirmModal(
+          <YamlConfirmation
+            onConfirm={handleConfirm}
+            close={() => setConfirmModal(null)}
+          />,
+        );
+      } else {
+        setActive(val);
+      }
+    },
   };
 
   const resize = () => {
@@ -46,6 +68,7 @@ const InstanceFormMenu: FC<Props> = ({
 
   return (
     <div className="p-side-navigation--accordion form-navigation">
+      {confirmModal}
       <nav aria-label="Instance form navigation">
         <ul className="p-side-navigation__list">
           <MenuItem label={MAIN_CONFIGURATION} {...menuItemProps} />
diff --git a/src/pages/networks/CreateNetwork.tsx b/src/pages/networks/CreateNetwork.tsx
index 91f9cbadfd..8fb75a3529 100644
--- a/src/pages/networks/CreateNetwork.tsx
+++ b/src/pages/networks/CreateNetwork.tsx
@@ -21,7 +21,6 @@ import { fetchClusterMembers } from "api/cluster";
 import BaseLayout from "components/BaseLayout";
 import { MAIN_CONFIGURATION } from "pages/networks/forms/NetworkFormMenu";
 import { slugify } from "util/slugify";
-import { YAML_CONFIGURATION } from "pages/profiles/forms/ProfileFormMenu";
 import FormFooterLayout from "components/forms/FormFooterLayout";
 import { useToastNotification } from "context/toastNotificationProvider";
 
@@ -105,6 +104,10 @@ const CreateNetwork: FC = () => {
     return dumpYaml(payload);
   };
 
+  const updateSection = (newSection: string) => {
+    setSection(slugify(newSection));
+  };
+
   return (
     <BaseLayout title="Create a network" contentClassName="create-network">
       <NotificationRow />
@@ -113,12 +116,7 @@ const CreateNetwork: FC = () => {
         getYaml={getYaml}
         project={project}
         section={section}
-        setSection={(section) => {
-          if (Boolean(formik.values.yaml) && section !== YAML_CONFIGURATION) {
-            void formik.setFieldValue("yaml", undefined);
-          }
-          setSection(slugify(section));
-        }}
+        setSection={updateSection}
       />
       <FormFooterLayout>
         <Button
diff --git a/src/pages/networks/EditNetwork.tsx b/src/pages/networks/EditNetwork.tsx
index 7669a129c1..182cf52e0f 100644
--- a/src/pages/networks/EditNetwork.tsx
+++ b/src/pages/networks/EditNetwork.tsx
@@ -13,11 +13,10 @@ import NetworkForm, {
 import { LxdNetwork } from "types/network";
 import { yamlToObject } from "util/yaml";
 import { dump as dumpYaml } from "js-yaml";
-import { getNetworkEditValues, handleConfigKeys } from "util/networkEdit";
+import { toNetworkFormValues } from "util/networkForm";
 import { slugify } from "util/slugify";
 import { useNavigate, useParams } from "react-router-dom";
 import { MAIN_CONFIGURATION } from "pages/networks/forms/NetworkFormMenu";
-import { YAML_CONFIGURATION } from "pages/profiles/forms/ProfileFormMenu";
 import FormFooterLayout from "components/forms/FormFooterLayout";
 import { useToastNotification } from "context/toastNotificationProvider";
 
@@ -55,14 +54,14 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
   });
 
   const formik = useFormik<NetworkFormValues>({
-    initialValues: getNetworkEditValues(network),
+    initialValues: toNetworkFormValues(network),
     validationSchema: NetworkSchema,
     onSubmit: (values) => {
       const yaml = values.yaml ? values.yaml : getYaml();
       const saveNetwork = yamlToObject(yaml) as LxdNetwork;
       updateNetwork({ ...saveNetwork, etag: network.etag }, project)
         .then(() => {
-          void formik.setValues(getNetworkEditValues(saveNetwork));
+          void formik.setValues(toNetworkFormValues(saveNetwork));
           void queryClient.invalidateQueries({
             queryKey: [
               queryKeys.projects,
@@ -80,50 +79,11 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
     },
   });
 
-  const getPayload = (values: NetworkFormValues) => {
-    const formNetwork = toNetwork(values);
-
-    const excludeMainKeys = new Set([
-      "used_by",
-      "etag",
-      "status",
-      "locations",
-      "managed",
-      "name",
-      "description",
-      "config",
-      "type",
-    ]);
-    const missingMainFields = Object.fromEntries(
-      Object.entries(network).filter((e) => !excludeMainKeys.has(e[0])),
-    );
-
-    const excludeConfigKeys = new Set(handleConfigKeys);
-    const missingConfigFields = Object.fromEntries(
-      Object.entries(network.config).filter(
-        (e) => !excludeConfigKeys.has(e[0]) && !e[0].startsWith("volatile"),
-      ),
-    );
-
-    return {
-      ...missingMainFields,
-      ...formNetwork,
-      config: {
-        ...formNetwork.config,
-        ...missingConfigFields,
-      },
-    };
-  };
-
   const getYaml = () => {
-    return dumpYaml(getPayload(formik.values));
+    return dumpYaml(toNetwork(formik.values));
   };
 
   const setSection = (newSection: string) => {
-    if (Boolean(formik.values.yaml) && section !== YAML_CONFIGURATION) {
-      void formik.setFieldValue("yaml", undefined);
-    }
-
     const baseUrl = `/ui/project/${project}/network/${network.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
@@ -153,7 +113,7 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
           <>
             <Button
               appearance="base"
-              onClick={() => formik.setValues(getNetworkEditValues(network))}
+              onClick={() => formik.setValues(toNetworkFormValues(network))}
             >
               Cancel
             </Button>
diff --git a/src/pages/networks/forms/NetworkForm.tsx b/src/pages/networks/forms/NetworkForm.tsx
index 5c08da1457..3c0e4c0166 100644
--- a/src/pages/networks/forms/NetworkForm.tsx
+++ b/src/pages/networks/forms/NetworkForm.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect } from "react";
+import React, { FC, ReactNode, useEffect, useState } from "react";
 import {
   Col,
   Form,
@@ -31,6 +31,9 @@ import NetworkFormDns from "pages/networks/forms/NetworkFormDns";
 import NetworkFormIpv4 from "pages/networks/forms/NetworkFormIpv4";
 import NetworkFormIpv6 from "pages/networks/forms/NetworkFormIpv6";
 import { slugify } from "util/slugify";
+import { handleConfigKeys } from "util/networkForm";
+import { useDocs } from "context/useDocs";
+import YamlConfirmation from "components/forms/YamlConfirmation";
 
 export interface NetworkFormValues {
   readOnly: boolean;
@@ -64,14 +67,41 @@ export interface NetworkFormValues {
   network?: string;
   yaml?: string;
   entityType: "network";
+  bareNetwork?: LxdNetwork;
 }
 
 export const toNetwork = (values: NetworkFormValues): Partial<LxdNetwork> => {
+  const excludeMainKeys = new Set([
+    "used_by",
+    "etag",
+    "status",
+    "locations",
+    "managed",
+    "name",
+    "description",
+    "config",
+    "type",
+  ]);
+  const missingMainFields = Object.fromEntries(
+    Object.entries(values.bareNetwork ?? {}).filter(
+      (e) => !excludeMainKeys.has(e[0]),
+    ),
+  );
+
+  const excludeConfigKeys = new Set(handleConfigKeys);
+  const missingConfigFields = Object.fromEntries(
+    Object.entries(values.bareNetwork?.config ?? {}).filter(
+      (e) => !excludeConfigKeys.has(e[0]) && !e[0].startsWith("volatile"),
+    ),
+  );
+
   return {
+    ...missingMainFields,
     name: values.name,
     description: values.description,
     type: values.networkType,
     config: {
+      ...missingConfigFields,
       ["bridge.driver"]: values.bridge_driver,
       ["bridge.hwaddr"]: values.bridge_hwaddr,
       ["bridge.mtu"]: values.bridge_mtu,
@@ -115,6 +145,8 @@ const NetworkForm: FC<Props> = ({
   section,
   setSection,
 }) => {
+  const [confirmModal, setConfirmModal] = useState<ReactNode | null>(null);
+  const docBaseLink = useDocs();
   const notify = useNotify();
 
   const updateFormHeight = () => {
@@ -123,13 +155,33 @@ const NetworkForm: FC<Props> = ({
   useEffect(updateFormHeight, [notify.notification?.message, section]);
   useEventListener("resize", updateFormHeight);
 
+  const handleSetActive = (val: string) => {
+    if (Boolean(formik.values.yaml) && val !== YAML_CONFIGURATION) {
+      const handleConfirm = () => {
+        void formik.setFieldValue("yaml", undefined);
+        setConfirmModal(null);
+        setSection(val);
+      };
+
+      setConfirmModal(
+        <YamlConfirmation
+          onConfirm={handleConfirm}
+          close={() => setConfirmModal(null)}
+        />,
+      );
+    } else {
+      setSection(val);
+    }
+  };
+
   return (
     <Form className="form network-form" onSubmit={formik.handleSubmit}>
+      {confirmModal}
       {/* hidden submit to enable enter key in inputs */}
       <Input type="submit" hidden value="Hidden input" />
       <NetworkFormMenu
         active={section}
-        setActive={setSection}
+        setActive={handleSetActive}
         formik={formik}
       />
       <Row className="form-contents" key={section}>
@@ -143,17 +195,21 @@ const NetworkForm: FC<Props> = ({
           {section === slugify(IPV6) && <NetworkFormIpv6 formik={formik} />}
           {section === slugify(YAML_CONFIGURATION) && (
             <YamlForm
+              key={`yaml-form-${formik.values.readOnly}`}
               yaml={getYaml()}
               setYaml={(yaml) => void formik.setFieldValue("yaml", yaml)}
               readOnly={formik.values.readOnly}
             >
-              <Notification
-                severity="caution"
-                title="Before you edit the YAML"
-                titleElement="h2"
-              >
-                Changes will be discarded, when switching back to the guided
-                forms.
+              <Notification severity="information" title="YAML Configuration">
+                This is the YAML representation of the network.
+                <br />
+                <a
+                  href={`${docBaseLink}/explanation/networks/#managed-networks`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Learn more about networks
+                </a>
               </Notification>
             </YamlForm>
           )}
diff --git a/src/pages/profiles/CreateProfile.tsx b/src/pages/profiles/CreateProfile.tsx
index e41329af2c..ce04dbbf07 100644
--- a/src/pages/profiles/CreateProfile.tsx
+++ b/src/pages/profiles/CreateProfile.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import {
   ActionButton,
   Button,
@@ -58,6 +58,7 @@ import BaseLayout from "components/BaseLayout";
 import { hasDiskError, hasNetworkError } from "util/instanceValidation";
 import FormFooterLayout from "components/forms/FormFooterLayout";
 import { useToastNotification } from "context/toastNotificationProvider";
+import { useDocs } from "context/useDocs";
 
 export type CreateProfileFormValues = ProfileDetailsFormValues &
   FormDeviceValues &
@@ -68,6 +69,7 @@ export type CreateProfileFormValues = ProfileDetailsFormValues &
   YamlFormValues;
 
 const CreateProfile: FC = () => {
+  const docBaseLink = useDocs();
   const navigate = useNavigate();
   const notify = useNotify();
   const toastNotify = useToastNotification();
@@ -197,16 +199,20 @@ const CreateProfile: FC = () => {
 
             {section === YAML_CONFIGURATION && (
               <YamlForm
+                key={`yaml-form-${formik.values.readOnly}`}
                 yaml={getYaml()}
                 setYaml={(yaml) => void formik.setFieldValue("yaml", yaml)}
               >
-                <Notification
-                  severity="caution"
-                  title="Before you edit the YAML"
-                  titleElement="h2"
-                >
-                  Changes will be discarded, when switching back to the guided
-                  forms.
+                <Notification severity="information" title="YAML Configuration">
+                  This is the YAML representation of the profile.
+                  <br />
+                  <a
+                    href={`${docBaseLink}/profiles`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Learn more about profiles
+                  </a>
                 </Notification>
               </YamlForm>
             )}
diff --git a/src/pages/profiles/EditProfile.tsx b/src/pages/profiles/EditProfile.tsx
index a41c574c2d..8fdd3c71b0 100644
--- a/src/pages/profiles/EditProfile.tsx
+++ b/src/pages/profiles/EditProfile.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import {
   ActionButton,
   Button,
@@ -60,6 +60,7 @@ import { slugify } from "util/slugify";
 import { hasDiskError, hasNetworkError } from "util/instanceValidation";
 import FormFooterLayout from "components/forms/FormFooterLayout";
 import { useToastNotification } from "context/toastNotificationProvider";
+import { useDocs } from "context/useDocs";
 
 export type EditProfileFormValues = ProfileDetailsFormValues &
   FormDeviceValues &
@@ -75,6 +76,7 @@ interface Props {
 }
 
 const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
+  const docBaseLink = useDocs();
   const notify = useNotify();
   const toastNotify = useToastNotification();
   const { project, section } = useParams<{
@@ -146,10 +148,6 @@ const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
   };
 
   const updateSection = (newSection: string) => {
-    if (Boolean(formik.values.yaml) && newSection !== YAML_CONFIGURATION) {
-      void formik.setFieldValue("yaml", undefined);
-    }
-
     const baseUrl = `/ui/project/${project}/profile/${profile.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
@@ -162,6 +160,7 @@ const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
 
   const getYaml = () => {
     const exclude = new Set(["used_by", "etag"]);
+    const profile = getPayload(formik.values);
     const bareProfile = Object.fromEntries(
       Object.entries(profile).filter((e) => !exclude.has(e[0])),
     );
@@ -224,20 +223,22 @@ const EditProfile: FC<Props> = ({ profile, featuresProfiles }) => {
 
             {section === slugify(YAML_CONFIGURATION) && (
               <YamlForm
+                key={`yaml-form-${formik.values.readOnly}`}
                 yaml={getYaml()}
                 setYaml={(yaml) => void formik.setFieldValue("yaml", yaml)}
                 readOnly={readOnly}
               >
-                {!readOnly && (
-                  <Notification
-                    severity="caution"
-                    title="Before you edit the YAML"
-                    titleElement="h2"
+                <Notification severity="information" title="YAML Configuration">
+                  This is the YAML representation of the profile.
+                  <br />
+                  <a
+                    href={`${docBaseLink}/profiles`}
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    Changes will be discarded, when switching back to the guided
-                    forms.
-                  </Notification>
-                )}
+                    Learn more about profiles
+                  </a>
+                </Notification>
               </YamlForm>
             )}
           </Col>
diff --git a/src/pages/profiles/forms/ProfileFormMenu.tsx b/src/pages/profiles/forms/ProfileFormMenu.tsx
index 25eba1a5f3..769013426a 100644
--- a/src/pages/profiles/forms/ProfileFormMenu.tsx
+++ b/src/pages/profiles/forms/ProfileFormMenu.tsx
@@ -1,10 +1,11 @@
-import { FC, useEffect } from "react";
+import React, { FC, ReactNode, useEffect, useState } from "react";
 import MenuItem from "components/forms/FormMenuItem";
 import { Button, useNotify } from "@canonical/react-components";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import useEventListener from "@use-it/event-listener";
 import { hasDiskError, hasNetworkError } from "util/instanceValidation";
 import { InstanceAndProfileFormikProps } from "components/forms/instanceAndProfileFormValues";
+import YamlConfirmation from "components/forms/YamlConfirmation";
 
 export const MAIN_CONFIGURATION = "Main configuration";
 export const DISK_DEVICES = "Disk devices";
@@ -33,9 +34,28 @@ const ProfileFormMenu: FC<Props> = ({
   formik,
 }) => {
   const notify = useNotify();
+  const [confirmModal, setConfirmModal] = useState<ReactNode | null>(null);
+
   const menuItemProps = {
     active,
-    setActive,
+    setActive: (val: string) => {
+      if (Boolean(formik.values.yaml) && val !== YAML_CONFIGURATION) {
+        const handleConfirm = () => {
+          void formik.setFieldValue("yaml", undefined);
+          setConfirmModal(null);
+          setActive(val);
+        };
+
+        setConfirmModal(
+          <YamlConfirmation
+            onConfirm={handleConfirm}
+            close={() => setConfirmModal(null)}
+          />,
+        );
+      } else {
+        setActive(val);
+      }
+    },
   };
 
   const disableReason = hasName
@@ -50,6 +70,7 @@ const ProfileFormMenu: FC<Props> = ({
 
   return (
     <div className="p-side-navigation--accordion form-navigation">
+      {confirmModal}
       <nav aria-label="Profile form navigation">
         <ul className="p-side-navigation__list">
           <MenuItem label={MAIN_CONFIGURATION} {...menuItemProps} />
diff --git a/src/pages/storage/CreateStoragePool.tsx b/src/pages/storage/CreateStoragePool.tsx
index ba64f89460..adf6b1563a 100644
--- a/src/pages/storage/CreateStoragePool.tsx
+++ b/src/pages/storage/CreateStoragePool.tsx
@@ -15,13 +15,15 @@ import {
 } from "util/storagePool";
 import StoragePoolForm, {
   StoragePoolFormValues,
-  storagePoolFormToPayload,
+  toStoragePool,
 } from "./forms/StoragePoolForm";
 import { useClusterMembers } from "context/useClusterMembers";
 import FormFooterLayout from "components/forms/FormFooterLayout";
 import { slugify } from "util/slugify";
 import { MAIN_CONFIGURATION } from "./forms/StoragePoolFormMenu";
 import { useToastNotification } from "context/toastNotificationProvider";
+import { yamlToObject } from "util/yaml";
+import { LxdStoragePool } from "types/storage";
 
 const CreateStoragePool: FC = () => {
   const navigate = useNavigate();
@@ -56,7 +58,10 @@ const CreateStoragePool: FC = () => {
     },
     validationSchema: CreateStoragePoolSchema,
     onSubmit: (values) => {
-      const storagePool = storagePoolFormToPayload(values);
+      const storagePool = values.yaml
+        ? (yamlToObject(values.yaml) as LxdStoragePool)
+        : toStoragePool(values);
+
       const mutation =
         clusterMembers.length > 0
           ? () => createClusteredPool(storagePool, project, clusterMembers)
@@ -77,6 +82,10 @@ const CreateStoragePool: FC = () => {
     },
   });
 
+  const updateSection = (newSection: string) => {
+    setSection(slugify(newSection));
+  };
+
   return (
     <BaseLayout
       title="Create a storage pool"
@@ -86,7 +95,7 @@ const CreateStoragePool: FC = () => {
       <StoragePoolForm
         formik={formik}
         section={section}
-        setSection={(newSection) => setSection(slugify(newSection))}
+        setSection={updateSection}
       />
       <FormFooterLayout>
         <Button
diff --git a/src/pages/storage/EditStoragePool.tsx b/src/pages/storage/EditStoragePool.tsx
index 0f399c0080..1bcdfdb105 100644
--- a/src/pages/storage/EditStoragePool.tsx
+++ b/src/pages/storage/EditStoragePool.tsx
@@ -12,16 +12,17 @@ import { useNavigate, useParams } from "react-router-dom";
 import { LxdStoragePool } from "types/storage";
 import { queryKeys } from "util/queryKeys";
 import StoragePoolForm, {
-  storagePoolFormToPayload,
+  toStoragePool,
   StoragePoolFormValues,
 } from "./forms/StoragePoolForm";
 import { checkDuplicateName } from "util/helpers";
 import { useClusterMembers } from "context/useClusterMembers";
 import FormFooterLayout from "components/forms/FormFooterLayout";
-import { getStoragePoolEditValues } from "util/storagePoolEdit";
+import { toStoragePoolFormValues } from "util/storagePoolForm";
 import { MAIN_CONFIGURATION } from "./forms/StoragePoolFormMenu";
 import { slugify } from "util/slugify";
 import { useToastNotification } from "context/toastNotificationProvider";
+import { yamlToObject } from "util/yaml";
 
 interface Props {
   pool: LxdStoragePool;
@@ -56,10 +57,12 @@ const EditStoragePool: FC<Props> = ({ pool }) => {
   });
 
   const formik = useFormik<StoragePoolFormValues>({
-    initialValues: getStoragePoolEditValues(pool),
+    initialValues: toStoragePoolFormValues(pool),
     validationSchema: StoragePoolSchema,
     onSubmit: (values) => {
-      const savedPool = storagePoolFormToPayload(values);
+      const savedPool = values.yaml
+        ? (yamlToObject(values.yaml) as LxdStoragePool)
+        : toStoragePool(values);
 
       const mutation =
         clusterMembers.length > 0
@@ -75,7 +78,7 @@ const EditStoragePool: FC<Props> = ({ pool }) => {
             project,
             member,
           );
-          void formik.setValues(getStoragePoolEditValues(updatedPool));
+          void formik.setValues(toStoragePoolFormValues(updatedPool));
         })
         .catch((e) => {
           notify.failure("Storage pool update failed", e);
@@ -89,7 +92,7 @@ const EditStoragePool: FC<Props> = ({ pool }) => {
     },
   });
 
-  const setSection = (newSection: string) => {
+  const updateSection = (newSection: string) => {
     const baseUrl = `/ui/project/${project}/storage/pool/${pool.name}/configuration`;
     newSection === MAIN_CONFIGURATION
       ? navigate(baseUrl)
@@ -101,7 +104,7 @@ const EditStoragePool: FC<Props> = ({ pool }) => {
       <StoragePoolForm
         formik={formik}
         section={section ?? slugify(MAIN_CONFIGURATION)}
-        setSection={setSection}
+        setSection={updateSection}
       />
       <FormFooterLayout>
         {formik.values.readOnly ? (
@@ -115,7 +118,7 @@ const EditStoragePool: FC<Props> = ({ pool }) => {
           <>
             <Button
               appearance="base"
-              onClick={() => formik.setValues(getStoragePoolEditValues(pool))}
+              onClick={() => formik.setValues(toStoragePoolFormValues(pool))}
             >
               Cancel
             </Button>
diff --git a/src/pages/storage/forms/StoragePoolForm.tsx b/src/pages/storage/forms/StoragePoolForm.tsx
index b2598497a2..1de9ed8f6d 100644
--- a/src/pages/storage/forms/StoragePoolForm.tsx
+++ b/src/pages/storage/forms/StoragePoolForm.tsx
@@ -1,11 +1,19 @@
-import React, { FC, useEffect } from "react";
-import { Form, Input, Row, Col, useNotify } from "@canonical/react-components";
+import React, { FC, ReactNode, useEffect, useState } from "react";
+import {
+  Form,
+  Input,
+  Row,
+  Col,
+  useNotify,
+  Notification,
+} from "@canonical/react-components";
 import { FormikProps } from "formik";
 import StoragePoolFormMain from "./StoragePoolFormMain";
 import StoragePoolFormMenu, {
   CEPH_CONFIGURATION,
   MAIN_CONFIGURATION,
   POWERFLEX,
+  YAML_CONFIGURATION,
   ZFS_CONFIGURATION,
 } from "./StoragePoolFormMenu";
 import useEventListener from "@use-it/event-listener";
@@ -19,6 +27,11 @@ import {
 } from "util/storageOptions";
 import { getPoolKey } from "util/storagePool";
 import { slugify } from "util/slugify";
+import YamlForm from "components/forms/YamlForm";
+import { dump as dumpYaml } from "js-yaml";
+import { handleConfigKeys } from "util/storagePoolForm";
+import YamlConfirmation from "components/forms/YamlConfirmation";
+import { useDocs } from "context/useDocs";
 import StoragePoolFormCeph from "./StoragePoolFormCeph";
 import StoragePoolFormPowerflex from "./StoragePoolFormPowerflex";
 import StoragePoolFormZFS from "./StoragePoolFormZFS";
@@ -49,6 +62,8 @@ export interface StoragePoolFormValues {
   zfs_clone_copy?: string;
   zfs_export?: string;
   zfs_pool_name?: string;
+  yaml?: string;
+  barePool?: LxdStoragePool;
 }
 
 interface Props {
@@ -57,7 +72,7 @@ interface Props {
   setSection: (section: string) => void;
 }
 
-export const storagePoolFormToPayload = (
+export const toStoragePool = (
   values: StoragePoolFormValues,
 ): LxdStoragePool => {
   const isCephDriver = values.driver === cephDriver;
@@ -103,16 +118,46 @@ export const storagePoolFormToPayload = (
     };
   };
 
+  const excludeMainKeys = new Set([
+    "used_by",
+    "etag",
+    "status",
+    "locations",
+    "config",
+    "name",
+    "description",
+    "driver",
+    "source",
+  ]);
+  const missingMainFields = Object.fromEntries(
+    Object.entries(values.barePool ?? {}).filter(
+      (e) => !excludeMainKeys.has(e[0]),
+    ),
+  );
+
+  const excludeConfigKeys = new Set(handleConfigKeys);
+  const missingConfigFields = Object.fromEntries(
+    Object.entries(values.barePool?.config ?? {}).filter(
+      (e) => !excludeConfigKeys.has(e[0]),
+    ),
+  );
+
   return {
+    ...missingMainFields,
     name: values.name,
     description: values.description,
     driver: values.driver,
-    source: values.driver !== btrfsDriver ? values.source : undefined,
-    config: getConfig(),
+    config: {
+      ...missingConfigFields,
+      ...getConfig(),
+      source: values.driver !== btrfsDriver ? values.source : undefined,
+    },
   };
 };
 
 const StoragePoolForm: FC<Props> = ({ formik, section, setSection }) => {
+  const [confirmModal, setConfirmModal] = useState<ReactNode | null>(null);
+  const docBaseLink = useDocs();
   const notify = useNotify();
 
   const updateFormHeight = () => {
@@ -121,13 +166,35 @@ const StoragePoolForm: FC<Props> = ({ formik, section, setSection }) => {
   useEffect(updateFormHeight, [notify.notification?.message, section]);
   useEventListener("resize", updateFormHeight);
 
+  const getYaml = () => dumpYaml(toStoragePool(formik.values));
+
+  const handleSetActive = (val: string) => {
+    if (Boolean(formik.values.yaml) && val !== YAML_CONFIGURATION) {
+      const handleConfirm = () => {
+        void formik.setFieldValue("yaml", undefined);
+        setConfirmModal(null);
+        setSection(val);
+      };
+
+      setConfirmModal(
+        <YamlConfirmation
+          onConfirm={handleConfirm}
+          close={() => setConfirmModal(null)}
+        />,
+      );
+    } else {
+      setSection(val);
+    }
+  };
+
   return (
     <Form className="form storage-pool-form" onSubmit={formik.handleSubmit}>
+      {confirmModal}
       {/* hidden submit to enable enter key in inputs */}
       <Input type="submit" hidden value="Hidden input" />
       <StoragePoolFormMenu
         active={section}
-        setActive={setSection}
+        setActive={handleSetActive}
         formik={formik}
       />
       <Row className="form-contents" key={section}>
@@ -144,6 +211,26 @@ const StoragePoolForm: FC<Props> = ({ formik, section, setSection }) => {
           {section === slugify(ZFS_CONFIGURATION) && (
             <StoragePoolFormZFS formik={formik} />
           )}
+          {section === slugify(YAML_CONFIGURATION) && (
+            <YamlForm
+              key={`yaml-form-${formik.values.readOnly}`}
+              yaml={getYaml()}
+              setYaml={(yaml) => void formik.setFieldValue("yaml", yaml)}
+              readOnly={formik.values.readOnly}
+            >
+              <Notification severity="information" title="YAML Configuration">
+                This is the YAML representation of the storage pool.
+                <br />
+                <a
+                  href={`${docBaseLink}/explanation/storage/#storage-pools`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Learn more about storage pools
+                </a>
+              </Notification>
+            </YamlForm>
+          )}
         </Col>
       </Row>
     </Form>
diff --git a/src/pages/storage/forms/StoragePoolFormMenu.tsx b/src/pages/storage/forms/StoragePoolFormMenu.tsx
index f624ef36ae..00d7b0856d 100644
--- a/src/pages/storage/forms/StoragePoolFormMenu.tsx
+++ b/src/pages/storage/forms/StoragePoolFormMenu.tsx
@@ -12,6 +12,7 @@ export const MAIN_CONFIGURATION = "Main configuration";
 export const CEPH_CONFIGURATION = "Ceph";
 export const POWERFLEX = "Powerflex";
 export const ZFS_CONFIGURATION = "ZFS";
+export const YAML_CONFIGURATION = "YAML configuration";
 
 interface Props {
   active: string;
@@ -67,6 +68,11 @@ const StoragePoolFormMenu: FC<Props> = ({ formik, active, setActive }) => {
               disableReason={disableReason}
             />
           )}
+          <MenuItem
+            label={YAML_CONFIGURATION}
+            {...menuItemProps}
+            disableReason={disableReason}
+          />
         </ul>
       </nav>
     </div>
diff --git a/src/sass/_forms.scss b/src/sass/_forms.scss
index b66b53ab60..1f178ce19c 100644
--- a/src/sass/_forms.scss
+++ b/src/sass/_forms.scss
@@ -126,6 +126,10 @@
     max-width: 54rem;
   }
 
+  .read-only .monaco-editor .cursors-layer > .cursor {
+    display: none !important;
+  }
+
   .cpu-limit-label,
   .ip-address-selector,
   .memory-limit-label {
diff --git a/src/util/networkEdit.tsx b/src/util/networkForm.tsx
similarity index 95%
rename from src/util/networkEdit.tsx
rename to src/util/networkForm.tsx
index b234b4e332..2549b75e6b 100644
--- a/src/util/networkEdit.tsx
+++ b/src/util/networkForm.tsx
@@ -1,9 +1,7 @@
 import { LxdNetwork } from "types/network";
 import { NetworkFormValues } from "pages/networks/forms/NetworkForm";
 
-export const getNetworkEditValues = (
-  network: LxdNetwork,
-): NetworkFormValues => {
+export const toNetworkFormValues = (network: LxdNetwork): NetworkFormValues => {
   return {
     readOnly: true,
     isCreating: false,
@@ -35,6 +33,7 @@ export const getNetworkEditValues = (
     ipv6_ovn_ranges: network.config["ipv6.ovn.ranges"],
     network: network.config.network,
     entityType: "network",
+    bareNetwork: network,
   };
 };
 
diff --git a/src/util/storagePoolEdit.tsx b/src/util/storagePoolForm.tsx
similarity index 82%
rename from src/util/storagePoolEdit.tsx
rename to src/util/storagePoolForm.tsx
index 0110166e8d..2cfac0e852 100644
--- a/src/util/storagePoolEdit.tsx
+++ b/src/util/storagePoolForm.tsx
@@ -1,7 +1,7 @@
 import { LxdStoragePool } from "types/storage";
 import { StoragePoolFormValues } from "pages/storage/forms/StoragePoolForm";
 
-export const getStoragePoolEditValues = (
+export const toStoragePoolFormValues = (
   pool: LxdStoragePool,
 ): StoragePoolFormValues => {
   return {
@@ -30,5 +30,19 @@ export const getStoragePoolEditValues = (
     zfs_clone_copy: pool.config["zfs.clone_copy"],
     zfs_export: pool.config["zfs.export"],
     zfs_pool_name: pool.config["zfs.pool_name"],
+    barePool: pool,
   };
 };
+
+export const handleConfigKeys = [
+  "size",
+  "source",
+  "ceph.cluster_name",
+  "ceph.osd.pg_num",
+  "ceph.rbd.clone_copy",
+  "ceph.user.name",
+  "ceph.rbd.features",
+  "zfs.clone_copy",
+  "zfs.export",
+  "zfs.pool_name",
+];