diff --git a/app/portainer/components/form-components/FormSection/FormSection.tsx b/app/portainer/components/form-components/FormSection/FormSection.tsx
index c833bcf39..e4d1ff12b 100644
--- a/app/portainer/components/form-components/FormSection/FormSection.tsx
+++ b/app/portainer/components/form-components/FormSection/FormSection.tsx
@@ -16,9 +16,10 @@ export function FormSection({
 
   return (
     <>
-      <FormSectionTitle>
+      <FormSectionTitle htmlFor={isFoldable ? `foldingButton${title}` : ''}>
         {isFoldable && (
           <button
+            id={`foldingButton${title}`}
             type="button"
             onClick={() => setIsExpanded(!isExpanded)}
             className="border-0 mx-2 bg-transparent inline-flex justify-center items-center w-2"
diff --git a/app/portainer/components/form-components/FormSectionTitle/FormSectionTitle.tsx b/app/portainer/components/form-components/FormSectionTitle/FormSectionTitle.tsx
index 74de313b8..930d3d6e5 100644
--- a/app/portainer/components/form-components/FormSectionTitle/FormSectionTitle.tsx
+++ b/app/portainer/components/form-components/FormSectionTitle/FormSectionTitle.tsx
@@ -1,5 +1,22 @@
 import { PropsWithChildren } from 'react';
 
-export function FormSectionTitle({ children }: PropsWithChildren<unknown>) {
+interface Props {
+  htmlFor?: string;
+}
+
+export function FormSectionTitle({
+  children,
+  htmlFor,
+}: PropsWithChildren<Props>) {
+  if (htmlFor) {
+    return (
+      <label
+        htmlFor={htmlFor}
+        className="col-sm-12 form-section-title cursor-pointer"
+      >
+        {children}
+      </label>
+    );
+  }
   return <div className="col-sm-12 form-section-title">{children}</div>;
 }