diff --git a/forms-flow-web/src/components/Form/components/FormSettings.js b/forms-flow-web/src/components/Form/components/FormSettings.js
index 370bc9377..a05b92cf7 100644
--- a/forms-flow-web/src/components/Form/components/FormSettings.js
+++ b/forms-flow-web/src/components/Form/components/FormSettings.js
@@ -9,10 +9,10 @@ import { Form, FormControl, InputGroup } from "react-bootstrap";
 import {
   CopyIcon,
   CustomInfo,
-  CustomRadioButton,
   FormInput,
   FormTextArea,
-  MultipleSelect
+  CustomTabs,
+  DropdownMultiSelect
 } from "@formsflow/components";
 
 import { MULTITENANCY_ENABLED } from "../../../constants/constants";
@@ -231,11 +231,13 @@ const FormSettings = forwardRef((props, ref) => {
   const handleRoleSelectForApplication = (roles) =>
     handleRoleStateChange(APPLICATION, "selectedRoles", roles);
 
-  return (
-    <>
-      {/* Section 1: Basic */}
-      <div className="section">
-        <h5 className="fw-bold">{t("Basic")}</h5>
+  const  [key,setKey] = useState("Basic");
+  const tabs = [
+    {
+      eventKey: "Basic",
+      title: "Basic",
+      content: (
+        <div className="settings-sections">
         <FormInput
           required
           value={formDetails.title}
@@ -251,6 +253,7 @@ const FormSettings = forwardRef((props, ref) => {
           maxLength={200} 
           />
         <FormTextArea
+          dataTestId="form-description"
           label={t("Description")}
           name="description"
           value={formDetails.description}
@@ -273,18 +276,21 @@ const FormSettings = forwardRef((props, ref) => {
           onChange={handleFormDetailsChange}
           className="field-label"
         />
-      </div>
-
-      <div className="modal-hr" />
-
-      <div className="section">
-        <h5 className="fw-bold">{t("Permissions")}</h5>
-
-        <Form.Label className="field-label">
-          {t("Who Can View/Edit This Form")}
-        </Form.Label>
-        <CustomRadioButton
-          items={[
+        </div>
+      ),
+    },
+    {
+      eventKey: "Permissions",
+      title: "Permissions",
+      content: (
+        <div className="settings-sections">
+        <DropdownMultiSelect
+          dropdownLabel="Who Can View/Edit This Form"
+          enableMultiSelect= { 
+            rolesState?.DESIGN?.selectedOption !== "onlyYou"
+          }
+          inputDropDownSelectedValue={rolesState?.DESIGN?.selectedOption}
+          inputDropDownOptions={[
             {
               label: t("Only You"),
               value:"onlyYou",
@@ -294,48 +300,25 @@ const FormSettings = forwardRef((props, ref) => {
               value: "specifiedRoles",
             },
           ]}
-          onChange={
-            (value) => {
-              handleRoleStateChange(DESIGN, "selectedOption", value);
-            }
-          }
-          dataTestId="who-can-edit-this-form"
-          id="who-can-edit-this-form"
-          ariaLabel={t("Edit Submission Role")}
-          selectedValue={rolesState.DESIGN.selectedOption}
-        />
-
-        {rolesState.DESIGN.selectedOption === "onlyYou" && (
-          <FormInput disabled={true} />
-        )}
-        {rolesState.DESIGN.selectedOption === "specifiedRoles" && (
-          <MultipleSelect
-          options={userRoles}
-          selectedValues={rolesState.DESIGN.selectedRoles}
-          onSelect={handleRoleSelectForDesign}
-          onRemove={handleRoleSelectForDesign}
-          displayValue={multiSelectOptionKey}
-          avoidHighlightFirstOption={true}
-          />
-
-        )}
-
-        <Form.Label className="field-label mt-3">
-          {t("Who Can Create Submissions")}
-        </Form.Label>
-        <Form.Check
-          type="checkbox"
-          id="anonymouseCheckbox"
-          label={t("Anonymous users")}
-          checked={isAnonymous}
-          onChange={() => {
-            setIsAnonymous(!isAnonymous);
+          multiSelectedValues={rolesState?.DESIGN?.selectedRoles }
+          multiSelectOptions={userRoles || []}
+          onDropdownChange={(value) => {
+            handleRoleStateChange(DESIGN, "selectedOption", value);
           }}
-          className="field-label"
+         onMultiSelectionChange={handleRoleSelectForDesign}
+         displayValue={multiSelectOptionKey}
+         ariaLabel="design-permission"
+         dataTestId="design-permission"
+         
         />
 
-        <CustomRadioButton
-          items={[
+        <DropdownMultiSelect
+          dropdownLabel="Who Can Create Submissions"
+          enableMultiSelect={ 
+            rolesState?.FORM?.selectedOption !== "registeredUsers" 
+          }
+          inputDropDownSelectedValue={rolesState.FORM.selectedOption}
+          inputDropDownOptions={[
             {
               label: t("Registered users"),
               value:"registeredUsers",
@@ -345,36 +328,38 @@ const FormSettings = forwardRef((props, ref) => {
               value:"specifiedRoles"
             },
           ]}
-          id="who-can-create-submission"
-          dataTestId="create-submission-role"
-          ariaLabel={t("Create Submission Role")}
-          onChange={
+          multiSelectedValues={rolesState.FORM.selectedRoles }
+          multiSelectOptions={userRoles}
+          onDropdownChange={
             (value) => {
               handleRoleStateChange(FORM, "selectedOption", value);
             }
           }
-          selectedValue={rolesState.FORM.selectedOption}
+         onMultiSelectionChange={handleRoleSelectForForm}
+          displayValue={multiSelectOptionKey}
+          ariaLabel="form-permission"
+          dataTestId="form-permission"
+
+        />
+        <Form.Check
+          type="checkbox"
+          id="anonymouseCheckbox"
+          label={t("Also allow anonymous users to create submissions")}
+          checked={isAnonymous}
+          onChange={() => {
+            setIsAnonymous(!isAnonymous);
+          }}
+          className="field-label"
         />
-        {rolesState.FORM.selectedOption === "registeredUsers" && (
-          <FormInput disabled={true} />
-        )}
-        {rolesState.FORM.selectedOption === "specifiedRoles" && (
-            <MultipleSelect
-            options={userRoles} // Options to display in the dropdown
-            selectedValues={rolesState.FORM.selectedRoles} // Preselected value to persist in dropdown
-            onSelect={handleRoleSelectForForm} // Function will trigger on select event
-            onRemove={handleRoleSelectForForm} // Function will trigger on remove event
-            displayValue={multiSelectOptionKey} // Property name to display in the dropdown options
-            avoidHighlightFirstOption={true}
-            />
-
-        )}
-
-        <Form.Label className="field-label mt-3">
-          {t("Who Can View Submissions")}
-        </Form.Label>
-        <CustomRadioButton
-          items={[
+
+
+        <DropdownMultiSelect
+          dropdownLabel="Who Can View Submissions"
+          enableMultiSelect={ 
+            rolesState?.APPLICATION?.selectedOption !== "submitter"
+          }
+          inputDropDownSelectedValue={rolesState.APPLICATION.selectedOption}
+          inputDropDownOptions={[
             {
               label: t("Submitter"),
               value:"submitter"
@@ -384,37 +369,26 @@ const FormSettings = forwardRef((props, ref) => {
               value:"specifiedRoles"
             },
           ]}
-          id="who-can-view-submission"
-          dataTestId="view-submission-role"
-          ariaLabel={t("View Submission Role")}
-          onChange={
+          multiSelectedValues={rolesState.APPLICATION.selectedRoles }
+          multiSelectOptions={userRoles}
+          onDropdownChange={
             (value) => {
               handleRoleStateChange(APPLICATION, "selectedOption", value);
             }
           }
-          selectedValue={rolesState.APPLICATION.selectedOption}
+         onMultiSelectionChange={handleRoleSelectForApplication}
+          displayValue={multiSelectOptionKey}
+          dataTestId="application-permission"
         />
 
-        {rolesState.APPLICATION.selectedOption === "submitter" && (
-          <FormInput disabled={true} />
-        )}
-
-        {rolesState.APPLICATION.selectedOption === "specifiedRoles" && (
-          <MultipleSelect
-            options={userRoles} // Options to display in the dropdown
-            selectedValues={rolesState.APPLICATION.selectedRoles} // Preselected value to persist in dropdown
-            onSelect={handleRoleSelectForApplication} // Function will trigger on select event
-            onRemove={handleRoleSelectForApplication} // Function will trigger on remove event
-            displayValue={multiSelectOptionKey} // Property name to display in the dropdown options
-            avoidHighlightFirstOption={true}
-          />
-
-        )}
-      </div>
-
-      <div className="modal-hr" />
-      <div className="section">
-        <h5 className="fw-bold">{t("Link for this form")}</h5>
+        </div>
+      ),
+    },
+    {
+      eventKey :"Link",
+      title : "Link",
+      content : (
+        <div className="settings-sections">
         <CustomInfo heading={t("Note")}
         content={t("Making changes to your form URL will make your form inaccessible from your current URL.")} />
         <Form.Group className="settings-input w-100" controlId="url-input">
@@ -426,6 +400,7 @@ const FormSettings = forwardRef((props, ref) => {
 
             <FormControl
               type="text"
+              data-test-id="url-edit-input"
               value={formDetails.path}
               className="url-edit"
               name="path"
@@ -438,8 +413,21 @@ const FormSettings = forwardRef((props, ref) => {
           {errors.path && <div className="validation-text mt-2">{errors.path}</div>}
 
         </Form.Group>
-      </div>
-    </>
+        </div>
+      )
+    }
+  ];
+  return (
+    <div className="settings-tab-container">
+      <CustomTabs
+       defaultActiveKey={key}
+       onSelect={setKey}
+       tabs={tabs}
+       dataTestId="template-form-flow-tabs"
+       ariaLabel="Template forms flow  tabs"
+       className="custom-tab"
+       /> 
+    </div>     
   );
 });
 
diff --git a/forms-flow-web/src/components/Modals/SettingsModal.js b/forms-flow-web/src/components/Modals/SettingsModal.js
index ecbd4b157..ca7bc195b 100644
--- a/forms-flow-web/src/components/Modals/SettingsModal.js
+++ b/forms-flow-web/src/components/Modals/SettingsModal.js
@@ -39,6 +39,7 @@ const SettingsModal = ({ show, handleClose, handleConfirm, isSaving = false }) =
       onHide={handleClose}
       size="sm"
       backdrop="static"
+      centered
     >
       <Modal.Header>
         <Modal.Title>{t("Settings")}</Modal.Title>