diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png
deleted file mode 100644
index 6ebf2f0e470..00000000000
Binary files a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.png and /dev/null differ
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui3-connections.webp b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.webp
new file mode 100644
index 00000000000..bc7199ec52a
Binary files /dev/null and b/doc/qtdesignstudio/examples/doc/images/loginui3-connections.webp differ
diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
index 59501c199dd..c66d2b7e484 100644
--- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
@@ -135,17 +135,22 @@
             \uicontrol {Connections} to open the \uicontrol Connections view.
         \li Select \e createAccount in \uicontrol Navigator.
         \li In the \uicontrol Connections tab, select the \inlineimage icons/plus.png
-            button to add the action that the \c onClicked signal handler of
-            \e createAccount should apply.
-        \li Double-click the value \uicontrol Action column and select
-            \uicontrol {Change state to createAccount} in the drop-down menu.
-        \note Or, you can right-click the \e createAccount button in \l Navigator.
-              Then select \uicontrol {Connections} > \uicontrol {Add signal handler} >
-              \uicontrol {clicked} > \uicontrol {Change State to createAccount}.
-        \image loginui3-connections.png "Connections tab"
+            button to open the connection setup options.
+        \li Set \uicontrol Signal to \c clicked, \uicontrol Action to
+            \c {Change State}, \uicontrol {State Group} to \c rectangle and
+            \uicontrol State to \c createAccount in the respective
+            drop-down menus.
+        \li Select the \inlineimage icons/close.png
+            button to close the connection setup options.
+
+        \image loginui3-connections.webp "Connections tab"
+
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
 
+        \note Or, you can right-click the \e createAccount button in \l Navigator.
+              Then select \uicontrol {Connections} > \uicontrol {Add signal handler} >
+              \uicontrol {clicked} > \uicontrol {Change State to createAccount}.
     \endlist
 
     In the live preview, you can now click the \uicontrol {Create Account}