diff --git a/web/html/src/components/buttons.stories.tsx b/web/html/src/components/buttons.stories.tsx
index fcc5d0014cf..8f54df065e9 100644
--- a/web/html/src/components/buttons.stories.tsx
+++ b/web/html/src/components/buttons.stories.tsx
@@ -1,7 +1,7 @@
-import { StoryRow, StripedStorySection, StorySection } from "manager/storybook/layout";
+import { StoryRow, StorySection, StripedStorySection } from "manager/storybook/layout";
 
 import { Button } from "components/buttons";
-import { Form } from "./input/form/Form";
+
 import { Text } from "./input/text/Text";
 import { BootstrapPanel } from "./panels/BootstrapPanel";
 
@@ -9,40 +9,22 @@ export default () => {
   const listButtons = [
     <div className="form-group btn-group">
       <div className="col-lg-offset-3 offset-lg-3 col-lg-6">
-        <Button
-          className="btn-primary bt-sm"
-          text="Submit"
-        />
-        <Button
-          className="btn-default bt-sm"
-          text="Clear"
-        />
+        <Button className="btn-primary bt-sm" text="Submit" />
+        <Button className="btn-default bt-sm" text="Clear" />
       </div>
-    </div>
+    </div>,
   ];
   const modalButtonsConfirm = [
     <div className="d-flex justify-content-end">
-      <Button
-        className="btn-default me-2"
-        text="Cancel"
-      />
-      <Button
-        className="btn-primary"
-        text="Finish"
-      />
-    </div >
+      <Button className="btn-default me-2" text="Cancel" />
+      <Button className="btn-primary" text="Finish" />
+    </div>,
   ];
   const modalButtonsDelete = [
     <div className="d-flex justify-content-end">
-      <Button
-        className="btn-default me-2"
-        text="Cancel"
-      />
-      <Button
-        className="btn-danger"
-        text="Delete"
-      />
-    </div >
+      <Button className="btn-default me-2" text="Cancel" />
+      <Button className="btn-danger" text="Delete" />
+    </div>,
   ];
   return (
     <div>
@@ -58,13 +40,20 @@ export default () => {
       </StripedStorySection>
       <StorySection>
         &lt;Button className="btn-primary" text="Primary" /&gt; <br />
-        &lt;Button className="btn-default" text="Default" /&gt;<br />
-        &lt;Button className="btn-danger" text="Danger" /&gt;<br />
+        &lt;Button className="btn-default" text="Default" /&gt;
+        <br />
+        &lt;Button className="btn-danger" text="Danger" /&gt;
+        <br />
         &lt;Button className="btn-tertiary" text="Tertiary" /&gt;
       </StorySection>
 
       <h2>Variants</h2>
-      <p><strong>Note: </strong>Icon-only buttons should always include a descriptive <code>title</code> attribute or <br />an accessible label (via <code>aria-labe</code>l or <code>aria-labelledby</code>) to ensure clarity and accessibility for all users.</p>
+      <p>
+        <strong>Note: </strong>Icon-only buttons should always include a descriptive <code>title</code> attribute or{" "}
+        <br />
+        an accessible label (via <code>aria-labe</code>l or <code>aria-labelledby</code>) to ensure clarity and
+        accessibility for all users.
+      </p>
       <StripedStorySection>
         <StoryRow>
           <Button className="btn-primary" title="Add" icon="fa-plus" />
@@ -77,15 +66,21 @@ export default () => {
       </StripedStorySection>
       <StorySection>
         &lt;Button className="btn-primary" title="Add" icon="fa-plus" /&gt; <br />
-        &lt;Button className="btn-default" title="Delete" icon="fa-trash" /&gt;<br />
-        &lt;Button className="btn-primary" icon="fa-plus" text="Primary" /&gt;<br />
-        &lt;Button className="btn-default" icon="fa-plus" text="Default" /&gt;<br />
-        &lt;Button className="btn-tertiary" icon="fa-plus" text="Tertiary" /&gt;<br />
+        &lt;Button className="btn-default" title="Delete" icon="fa-trash" /&gt;
+        <br />
+        &lt;Button className="btn-primary" icon="fa-plus" text="Primary" /&gt;
+        <br />
+        &lt;Button className="btn-default" icon="fa-plus" text="Default" /&gt;
+        <br />
+        &lt;Button className="btn-tertiary" icon="fa-plus" text="Tertiary" /&gt;
+        <br />
         &lt;Button className="btn-tertiary" title="Delete" icon="fa-trash" /&gt;
       </StorySection>
 
       <h2>Sizes</h2>
-      <p>We support two button sizes: default and small. Use <code>btn-sm</code> for the small button size.</p>
+      <p>
+        We support two button sizes: default and small. Use <code>btn-sm</code> for the small button size.
+      </p>
       <StripedStorySection>
         <StoryRow>
           <Button className="btn-primary btn-sm" text="Small button" />
@@ -98,15 +93,22 @@ export default () => {
       </StripedStorySection>
       <StorySection>
         &lt;Button className="btn-primary btn-sm" text="Small button" /&gt; <br />
-        &lt;Button className="btn-default btn-sm" text="Small button" /&gt;<br />
-        &lt;Button className="btn-danger btn-sm" text="Small button" /&gt;<br />
-        &lt;Button className="btn-default btn-sm" title="Delete" icon="fa-trash" /&gt;<br />
-        &lt;Button className="btn-primary btn-sm" title="Add" icon="fa-plus" /&gt;<br />
-        &lt;Button className="btn-tertiary btn-sm" title="Delete" icon="fa-trash" /&gt;<br />
+        &lt;Button className="btn-default btn-sm" text="Small button" /&gt;
+        <br />
+        &lt;Button className="btn-danger btn-sm" text="Small button" /&gt;
+        <br />
+        &lt;Button className="btn-default btn-sm" title="Delete" icon="fa-trash" /&gt;
+        <br />
+        &lt;Button className="btn-primary btn-sm" title="Add" icon="fa-plus" /&gt;
+        <br />
+        &lt;Button className="btn-tertiary btn-sm" title="Delete" icon="fa-trash" /&gt;
+        <br />
       </StorySection>
 
       <h2>Disabled</h2>
-      <p>Make buttons look inactive by adding the disabled boolean attribute to any <code>Button</code> element.</p>
+      <p>
+        Make buttons look inactive by adding the disabled boolean attribute to any <code>Button</code> element.
+      </p>
       <StripedStorySection>
         <StoryRow>
           <Button className="btn-primary" text="Primary" disabled />
@@ -117,12 +119,18 @@ export default () => {
       </StripedStorySection>
       <StorySection>
         &lt;Button className="btn-primary" text="Primary" disabled /&gt; <br />
-        &lt;Button className="btn-default" text="Default" disabled /&gt;<br />
-        &lt;Button className="btn-danger" text="Danger" disabled /&gt;<br />
-        &lt;Button className="btn-tertiary" text="Tertiary" disabled /&gt;<br />
+        &lt;Button className="btn-default" text="Default" disabled /&gt;
+        <br />
+        &lt;Button className="btn-danger" text="Danger" disabled /&gt;
+        <br />
+        &lt;Button className="btn-tertiary" text="Tertiary" disabled /&gt;
+        <br />
       </StorySection>
       <h2>Choosing a button</h2>
-      <p>Every button type has a specific role. Select the appropriate button type based on the screen's context to ensure a clear and seamless user experience.</p>
+      <p>
+        Every button type has a specific role. Select the appropriate button type based on the screen's context to
+        ensure a clear and seamless user experience.
+      </p>
       <table className="table table-striped mt-3">
         <thead>
           <tr>
@@ -132,37 +140,67 @@ export default () => {
         </thead>
         <tbody>
           <tr>
-            <td><strong>Primary</strong></td>
-            <td>Calls to action (CTAs), key actions, form submissions.
-              <p><strong> Example:</strong> “Add”, “Create” or "Submit"</p>
+            <td>
+              <strong>Primary</strong>
+            </td>
+            <td>
+              Calls to action (CTAs), key actions, form submissions.
+              <p>
+                <strong> Example:</strong> “Add”, “Create” or "Submit"
+              </p>
             </td>
           </tr>
           <tr>
-            <td><strong>Default</strong>  </td>
-            <td>Less important actions, alternative options, supporting information and the most commonly used option.
-              <p><strong> Example:</strong>"Edit", "Download" or "Cancel"</p>
+            <td>
+              <strong>Default</strong>{" "}
+            </td>
+            <td>
+              Less important actions, alternative options, supporting information and the most commonly used option.
+              <p>
+                <strong> Example:</strong>"Edit", "Download" or "Cancel"
+              </p>
             </td>
           </tr>
           <tr>
-            <td><strong>Danger</strong>  </td>
-            <td>Potentially irreversible actions, deletions, cancellations.
-              <p><strong> Example:</strong> Deleting any system or data.</p>
+            <td>
+              <strong>Danger</strong>{" "}
+            </td>
+            <td>
+              Potentially irreversible actions, deletions, cancellations.
+              <p>
+                <strong> Example:</strong> Deleting any system or data.
+              </p>
             </td>
           </tr>
           <tr>
-            <td><strong>Only Icon Button</strong>  </td>
-            <td>Only icon buttons are ideal for presenting actions in compact layouts.
-              <p><strong>Example:</strong> Table, Cards.</p>
+            <td>
+              <strong>Only Icon Button</strong>{" "}
+            </td>
+            <td>
+              Only icon buttons are ideal for presenting actions in compact layouts.
+              <p>
+                <strong>Example:</strong> Table, Cards.
+              </p>
               <p>They can be used individually or grouped together.</p>
-              <p>To enhance clarity, always pair icon buttons with title attribute to give users a brief explanation of their function.</p>
+              <p>
+                To enhance clarity, always pair icon buttons with title attribute to give users a brief explanation of
+                their function.
+              </p>
             </td>
           </tr>
           <tr>
-            <td><strong>Tertiary</strong>  </td>
             <td>
-              <p>Tertiary buttons are designed for less prominent actions and should not compete visually with Primary or Default buttons. </p>
+              <strong>Tertiary</strong>{" "}
+            </td>
+            <td>
+              <p>
+                Tertiary buttons are designed for less prominent actions and should not compete visually with Primary or
+                Default buttons.{" "}
+              </p>
               <p>Use icon-only tertiary buttons in cards, forms, inline action or components where space is limited.</p>
-              <p><strong>Example:</strong> Inline action buttons for editing an email address in a form.</p>
+              <p>
+                <strong>Example:</strong> Inline action buttons for editing an email address in a form.
+              </p>
             </td>
           </tr>
         </tbody>
@@ -171,21 +209,16 @@ export default () => {
       <h2 className="mt-5">Placement</h2>
       <div className="row">
         <div className="col-md-6">
-          <p>When grouping buttons aligned to the left, place the primary button at the far left, followed by the button for the next most important action.</p>
-          <p><strong>Example:</strong> Form</p>
+          <p>
+            When grouping buttons aligned to the left, place the primary button at the far left, followed by the button
+            for the next most important action.
+          </p>
+          <p>
+            <strong>Example:</strong> Form
+          </p>
           <BootstrapPanel title="Forms" footer={listButtons}>
-            <Text
-              name="firstname"
-              label={t("First Name")}
-              labelClass="col-md-3 text-right"
-              divClass="col-md-6"
-            />
-            <Text
-              name="lastname"
-              label={t("Last Name")}
-              labelClass="col-md-3 text-right"
-              divClass="col-md-6"
-            />
+            <Text name="firstname" label={t("First Name")} labelClass="col-md-3 text-right" divClass="col-md-6" />
+            <Text name="lastname" label={t("Last Name")} labelClass="col-md-3 text-right" divClass="col-md-6" />
             <div className="form-group">
               <label className="control-label col-md-3 text-right">Email ID:</label>
               <div className="col-md-6">
@@ -197,10 +230,18 @@ export default () => {
       </div>
       <div className="row mt-5">
         <div className="col-md-6">
-          <p>When buttons in a group are aligned to the right, position the Primary button at the end, with the Default action button placed next to it.</p>
-          <p><strong>Example:</strong> Modals, Action Bars, Multi-step interfaces</p>
+          <p>
+            When buttons in a group are aligned to the right, position the Primary button at the end, with the Default
+            action button placed next to it.
+          </p>
+          <p>
+            <strong>Example:</strong> Modals, Action Bars, Multi-step interfaces
+          </p>
           <BootstrapPanel title="Confirmation Modal" footer={modalButtonsConfirm}>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo massa et tellus tempor, at faucibus tortor volutpat.</p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo massa et tellus tempor, at
+              faucibus tortor volutpat.
+            </p>
           </BootstrapPanel>
         </div>
       </div>
@@ -214,43 +255,37 @@ export default () => {
       <div className="row mt-5">
         <div className="col-md-6">
           <h5>Tertiary buttons Examples:</h5>
-          <BootstrapPanel title="Forms" footer={
-            <div className="form-group btn-group">
-              <div className="col-lg-offset-3 offset-lg-3 col-lg-6">
-                <Button
-                  className="btn-primary bt-sm"
-                  text="Submit"
-                />
+          <BootstrapPanel
+            title="Forms"
+            footer={
+              <div className="form-group btn-group">
+                <div className="col-lg-offset-3 offset-lg-3 col-lg-6">
+                  <Button className="btn-primary bt-sm" text="Submit" />
+                </div>
               </div>
-            </div>}>
-            <Text
-              name="firstname"
-              label={t("Name")}
-              labelClass="col-md-3 text-right"
-              divClass="col-md-6"
-            />
+            }
+          >
+            <Text name="firstname" label={t("Name")} labelClass="col-md-3 text-right" divClass="col-md-6" />
             <div className="form-group ">
               <label className="control-label col-md-3 text-right">Name:</label>
               <div className="col-md-6">
-                <input
-                  className="form-control"
-                  name="firstname"
-                />
+                <input className="form-control" name="firstname" />
               </div>
               <div className="col-md-3 ps-0">
                 <Button className="btn-tertiary" title="Delete" icon="fa-trash"></Button>
               </div>
-
             </div>
             <div className="form-group ">
               <label className="control-label col-md-3"></label>
               <div className="col-md-6">
-                <Button className="btn-tertiary" icon="fa-plus">Add Name</Button>
+                <Button className="btn-tertiary" icon="fa-plus">
+                  Add Name
+                </Button>
               </div>
             </div>
           </BootstrapPanel>
         </div>
       </div>
-    </div >
+    </div>
   );
 };