diff --git a/doc/qtdesignstudio/images/studio-flow-item.png b/doc/qtdesignstudio/images/studio-flow-item.png
deleted file mode 100644
index 905174d6002..00000000000
Binary files a/doc/qtdesignstudio/images/studio-flow-item.png and /dev/null differ
diff --git a/doc/qtdesignstudio/images/studio-flow-item.webp b/doc/qtdesignstudio/images/studio-flow-item.webp
new file mode 100644
index 00000000000..1b3c54d8184
Binary files /dev/null and b/doc/qtdesignstudio/images/studio-flow-item.webp differ
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
index f335e1b2521..2c7564fe860 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
@@ -142,29 +142,26 @@
 
     \title Adding Flow Items
 
-    After you create a \l{Adding Flow Views}{Flow View} component, you can
-    use a project wizard template to add a \uicontrol {Flow Item} component
-    for each screen in the UI.
+    After you create a \l{Adding Flow Views}{Flow View} component, use a project wizard
+    template to add a \uicontrol {Flow Item} component for each screen in the UI.
 
     If you \l{Importing 2D Assets}{imported} your screen designs from a
     design tool as individual \l{glossary-component}{components}
-    (\e {.ui.qml} files), you can use them as content for flow items.
+    (\e {.ui.qml} files), you can use them as content for flow items like any other components.
     The imported components are listed in \uicontrol Components
     > \uicontrol {My Components}.
 
-    If you are building your UI from scratch in \QDS, you must first add
-    components to the flow items to create the screens as you would any
-    components. For more information, see \l {Using Components}. The
-    flow items that you attach the components to are listed under
+    If you are building your UI from scratch in \QDS, add components to the flow items
+    first to create the screens as you would any components. For more information, see
+    \l {Using Components}. The flow items that you attach the components to are listed under
     \uicontrol {My Components}.
 
-    \image studio-flow-item.png "Custom Flow Item in Components"
+    \image studio-flow-item.webp "Custom Flow Item in Components"
 
     \note You must use the wizard to create the flow items. After you create
     a flow view, the \uicontrol {Flow View} module is added to
-    \uicontrol Components. It contains a \uicontrol {Flow Item} component that
-    you can use to \l{Applying States in Flows}{apply states to flow items}, and
-    that you should use solely for that purpose.
+    \uicontrol Components. It contains the \uicontrol {Flow Item} component for
+    \l{Applying States in Flows}{applying states to flow items}, and solely for that purpose.
 
     To add flow items:
 
@@ -175,7 +172,7 @@
             to create flow items for each screen in the UI.
         \li Add content to the flow item in one of the following ways:
             \list
-                \li Drag-and-drop components from \uicontrol Components to a
+                \li Drag components from \uicontrol Components to a
                     flow item in the \l {2D} view or \l Navigator.
                 \li Drag a screen from \uicontrol Components
                     > \uicontrol {My Components} to a flow item in
@@ -184,10 +181,9 @@
         \li In \l Properties, edit the properties of each flow item.
     \endlist
 
-    You can now drag the flow items from \uicontrol Components
-    > \uicontrol {My Components} to the flow view in the \uicontrol {2D}
-    or \uicontrol Navigator view. When you have all the flow items in place, you can
-    \l{Adding Action Areas and Transitions}{add action areas} to them to create
+    Now, drag the flow items from \uicontrol Components > \uicontrol {My Components} to the
+    flow view in the \uicontrol {2D} or \uicontrol Navigator view. When you have all the flow
+    items in place, \l{Adding Action Areas and Transitions}{add action areas} to them to create
     transitions between them.
 
     \section1 Flow Item Properties
@@ -203,23 +199,20 @@
     properties are used to \l{Applying States in Flows}{apply states}
     in flows.
 
-    To include another flow view into a flow view, select the UI file (.ui.qml)
+    To include another flow view as a flow item into a flow view, select the UI file (.ui.qml)
     that specifies the flow view in the \uicontrol {Loader source} field.
 
     Usually, a flow item is inactive and invisible when it is not currently
     selected in the flow. Especially, all events from the flow item are ignored.
     To make a flow item always active, so that another flow item within it
     can respond to events and trigger the opening of a dialog, for example,
-    select the \uicontrol {Force active} check box.
+    select the \uicontrol {Force active} checkbox.
 
-    By default, transitions are drawn from action areas to the target flow item.
+    In the flow view, transitions are drawn from action areas to the target flow item by default.
     To draw the transitions from the edges of flow items instead, select the
-    \uicontrol {Join lines} check box in the \uicontrol {Transition Lines}
+    \uicontrol {Join lines} checkbox in the \uicontrol {Transition Lines}
     section.
 
-    In the \uicontrol Layout tab, you can use \l{Setting Anchors and Margins}
-    {anchors} to position the component.
-
     In the \uicontrol Advanced section, you can manage the more
     \l{Specifying Developer Properties}{advanced properties} of components.
 */