diff --git a/src/components/Collaboration/JobFormbuilder.jsx b/src/components/Collaboration/JobFormbuilder.jsx
index f7180d8bd4..089dc6fc99 100644
--- a/src/components/Collaboration/JobFormbuilder.jsx
+++ b/src/components/Collaboration/JobFormbuilder.jsx
@@ -1,10 +1,7 @@
-/* eslint-disable no-alert */
-/* eslint-disable no-console */
-// eslint-disable-next-line no-alert
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useSelector } from 'react-redux';
-import { v4 as uuidv4 } from 'uuid';
+import { Prompt } from 'react-router-dom';
 import styles from './JobFormBuilder.module.css';
 import { ENDPOINTS } from '~/utils/URL';
 import OneCommunityImage from './One-Community-Horizontal-Homepage-Header-980x140px-2.png';
@@ -12,241 +9,213 @@ import QuestionSetManager from './QuestionSetManager';
 import QuestionFieldActions from './QuestionFieldActions';
 import QuestionEditModal from './QuestionEditModal';
 
+const safeAlert = msg => globalThis.alert(msg);
+const safeConfirm = msg => globalThis.confirm(msg);
+
 function JobFormBuilder() {
   const { role } = useSelector(state => state.auth.user);
-  const [formFields, setFormFields] = useState([]);
   const darkMode = useSelector(state => state.theme.darkMode);
+
+  const [formFields, setFormFields] = useState([]);
+  const [initialFormFields, setInitialFormFields] = useState([]);
+
+  const [templateName, setTemplateName] = useState('');
+  const [selectedTemplate, setSelectedTemplate] = useState('');
+
+  const [currentFormId, setCurrentFormId] = useState(null);
+
   const [newField, setNewField] = useState({
     questionText: '',
     questionType: 'textbox',
-    options: [], // For checkbox, radio, and dropdown input types
+    options: [],
     visible: true,
   });
 
-  // Dynamic Form ID Management
-  const [currentFormId, setCurrentFormId] = useState(null);
-
-  const [jobTitle, setJobTitle] = useState('Please Choose an option');
-  const jobPositions = [
-    'APPLIED THROUGH SITE - SEEKING SOFTWARE POSITION',
-    'APPLIED THROUGH SITE - GENERAL',
-    'APPLIED THROUGH SITE - ADMINISTRATIVE ASSISTANT',
-    'APPLIED THROUGH SITE - GRAPHIC DESIGNER',
-    'SEEKING SOFTWARE POSITION',
-    'SEEKING ADMINISTRATIVE ASSISTANT',
-    'EARTHBAG 4-DOME CLUSTER PLUMBING DESIGNS',
-    'PLUMBING ENGINEER/MEP FOR EARTHBAG VILLAGE',
-    'CIVIL ENGINEER FOR COST ANALYSIS OF FOOD PRODUCTION STRUCTURES',
-    'CIVIL ENGINEER TO FINALIZE TEST MATERIALS AND EQUIPMENT FOR FOOD PRODUCTION STRUCTURES',
-    'MECHANICAL ENGINEER FOR HVAC FOR FOOD PRODUCTION STRUCTURES',
-    'CITY CENTER PLUMBING DESIGNS',
-    'ELECTRICAL DESIGNER FOR EARTHBAG VILLAGE',
-    'ELECTRICAL DESIGNER FOR STRAW BALE CLASSROOM',
-    'ELECTRICAL ENGINEER/DESIGNER FOR DUPLICABLE CITY CENTER',
-    'CITY CENTER GEODESIC DOME AUTODESK INVENTOR SIMULATIONS',
-    '4-DOME CLUSTER ELECTRICAL DESIGN',
-    'PHOTOSHOP/GRAPHIC DESIGNER',
-    'PASSIVE GREENHOUSE DESIGN',
-    'LANDSCAPE ARCHITECT FOR AQUAPINI/WALIPINI STRUCTURES',
-    'SEEKING VIRTUAL ASSISTANT',
-    'FUNDRAISING HELP',
-    'STRAW BALE CLASSROOM STRUCTURAL',
-    'PERMACULTURALIST FOR SOIL AMENDMENT',
-    'NUTRITIONIST FOR NUTRITION CALCULATIONS AND MENU PLANNING',
-    'CHEF OR CULINARY PROFESSIONAL FOR MENU IMPLEMENTATION TUTORIALS',
-    'CHEF OR CULINARY PROFESSIONAL TO HELP WITH REMOTE/DISASTER KITCHEN SUPPLY AND STORAGE PLAN',
-    'LUMION 2024.1.1 OR HIGHER FOR CITY CENTER',
-    'GENERAL',
-    'VERMICULTURE',
-    'MASTER CARPENTER',
-    'FINAL CUT PRO VIDEO EDITOR',
-    'INDUSTRIAL DESIGNER FOR DORMER',
-    'LANDSCAPE ARCHITECT FOR SKETCHUP AND LUMION RENDER HELP',
-    'T.A.S.T. - NEED RESUME & WORK SAMPLES',
-    'T.A.S.T. - ENGINEER/ARCHITECT OFFERING POSITION',
-    'T.A.S.T. - HGN',
-    'ADMIN OF PR REVIEW TEAM AND FRONTEND TESTER',
-    'ADMIN OF PR REVIEW TEAM AND FRONTEND TESTER - APPLIED THROUGH SITE',
-    'DATA ANALYST APPLICATION',
-  ];
+  const initialNewField = {
+    questionText: '',
+    questionType: 'textbox',
+    options: [],
+    visible: true,
+  };
 
   const [newOption, setNewOption] = useState('');
+
   const [editModalOpen, setEditModalOpen] = useState(false);
   const [editingQuestion, setEditingQuestion] = useState(null);
   const [editingIndex, setEditingIndex] = useState(null);
 
-  // Auto-load existing form on component mount
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const jobPositions = ['Software Developer', 'Project Manager', 'Analyst'];
+
+  // Prevent refresh while unsaved changes exist
   useEffect(() => {
-    const loadFirstAvailableForm = async () => {
+    const handler = event => {
+      if (hasUnsavedChanges) {
+        event.preventDefault();
+        event.returnValue = '';
+      }
+    };
+
+    globalThis.addEventListener('beforeunload', handler);
+    return () => globalThis.removeEventListener('beforeunload', handler);
+  }, [hasUnsavedChanges]);
+
+  // Load form initially
+  useEffect(() => {
+    const loadForm = async () => {
       try {
         const response = await axios.get(ENDPOINTS.GET_ALL_JOB_FORMS);
 
-        if (response.data && response.data.length > 0) {
-          const firstForm = response.data[0];
-          const formId = firstForm._id || firstForm.id;
+        if (response.data?.length > 0) {
+          const form = response.data[0];
+          const id = form._id || form.id;
 
-          setCurrentFormId(formId);
-          setFormFields(firstForm.questions || []);
-          setJobTitle(firstForm.title || 'Please Choose an option');
+          setCurrentFormId(id);
+          setFormFields(form.questions || []);
+          setInitialFormFields(form.questions || []);
 
-          console.log('Auto-loaded form:', formId);
+          setNewField(initialNewField);
+          setHasUnsavedChanges(false);
         }
       } catch (error) {
-        console.error('Error auto-loading form:', error);
+        // still allowed logging
+        console.error(error);
       }
     };
 
-    loadFirstAvailableForm();
+    loadForm();
   }, []);
 
-  // const ensureFormExists = async () => {
-  //   if (!currentFormId) {
-  //     console.warn('No form ID available for this operation');
-  //     return false;
-  //   }
-  //   return true;
-  // };
+  // Detect unsaved changes
+  useEffect(() => {
+    const changed =
+      JSON.stringify(formFields) !== JSON.stringify(initialFormFields) ||
+      JSON.stringify(newField) !== JSON.stringify(initialNewField) ||
+      templateName !== '' ||
+      selectedTemplate !== '';
 
-  // CRUD Functions with Dynamic Form ID
+    setHasUnsavedChanges(changed);
+  }, [formFields, newField, templateName, selectedTemplate, initialFormFields]);
+
+  // Clone field
   const cloneField = async (field, index) => {
-    const clonedField = JSON.parse(JSON.stringify(field));
+    const clone = structuredClone(field);
 
-    // Update local state immediately
-    const newFields = [
-      ...formFields.slice(0, index + 1),
-      clonedField,
-      ...formFields.slice(index + 1),
-    ];
-    setFormFields(newFields);
+    const updated = [...formFields.slice(0, index + 1), clone, ...formFields.slice(index + 1)];
+    setFormFields(updated);
 
-    // Sync with backend if form exists
     if (currentFormId) {
       try {
         await axios.post(ENDPOINTS.ADD_QUESTION(currentFormId), {
-          question: clonedField,
+          question: clone,
           position: index + 1,
         });
       } catch (error) {
-        console.error('Error cloning question on server:', error);
+        console.error(error);
       }
     }
   };
 
+  // Move field
   const moveField = async (index, direction) => {
     const newIndex = direction === 'up' ? index - 1 : index + 1;
+    if (newIndex < 0 || newIndex >= formFields.length) return;
 
-    if (
-      (direction === 'up' && index > 0) ||
-      (direction === 'down' && index < formFields.length - 1)
-    ) {
-      // Update local state immediately
-      const newFields = [...formFields];
-      [newFields[index], newFields[newIndex]] = [newFields[newIndex], newFields[index]];
-      setFormFields(newFields);
-
-      // Sync with backend if form exists
-      if (currentFormId) {
-        try {
-          await axios.put(ENDPOINTS.REORDER_QUESTIONS(currentFormId), {
-            fromIndex: index,
-            toIndex: newIndex,
-          });
-        } catch (error) {
-          console.error('Error reordering questions on server:', error);
-        }
+    const updated = [...formFields];
+    [updated[index], updated[newIndex]] = [updated[newIndex], updated[index]];
+    setFormFields(updated);
+
+    if (currentFormId) {
+      try {
+        await axios.put(ENDPOINTS.REORDER_QUESTIONS(currentFormId), {
+          fromIndex: index,
+          toIndex: newIndex,
+        });
+      } catch (error) {
+        console.error(error);
       }
     }
   };
 
+  // Delete field
   const deleteField = async index => {
-    // Update local state immediately
-    const newFields = [...formFields];
-    newFields.splice(index, 1);
-    setFormFields(newFields);
+    const updated = [...formFields];
+    updated.splice(index, 1);
+    setFormFields(updated);
 
-    // Sync with backend if form exists
     if (currentFormId) {
       try {
         await axios.delete(ENDPOINTS.DELETE_QUESTION(currentFormId, index));
-        console.log('Question deleted successfully');
       } catch (error) {
-        console.error('Error deleting question on server:', error);
+        console.error(error);
       }
     }
   };
 
+  // Edit field
   const editField = (field, index) => {
-    // Transform the field structure to match what QuestionEditModal expects
-    const questionForEdit = {
+    setEditingQuestion({
       label: field.questionText,
       type: field.questionType,
       options: field.options,
       required: field.required || false,
       placeholder: field.placeholder || '',
-    };
+    });
 
-    setEditingQuestion(questionForEdit);
     setEditingIndex(index);
     setEditModalOpen(true);
   };
 
-  const handleSaveEditedQuestion = async editedQuestion => {
-    const updatedField = {
-      ...formFields[editingIndex],
-      questionText: editedQuestion.label,
-      questionType: editedQuestion.type,
-      options: editedQuestion.options || [],
-      required: editedQuestion.required,
-      placeholder: editedQuestion.placeholder,
+  const handleSaveEditedQuestion = async edited => {
+    const updated = [...formFields];
+
+    updated[editingIndex] = {
+      ...updated[editingIndex],
+      questionText: edited.label,
+      questionType: edited.type,
+      options: edited.options || [],
+      required: edited.required,
+      placeholder: edited.placeholder,
     };
 
-    // Update local state immediately
-    const updatedFields = [...formFields];
-    updatedFields[editingIndex] = updatedField;
-    setFormFields(updatedFields);
+    setFormFields(updated);
 
-    // Sync with backend if form exists
     if (currentFormId) {
       try {
-        await axios.put(ENDPOINTS.UPDATE_QUESTION(currentFormId, editingIndex), updatedField);
-        console.log('Question updated successfully');
+        await axios.put(
+          ENDPOINTS.UPDATE_QUESTION(currentFormId, editingIndex),
+          updated[editingIndex],
+        );
       } catch (error) {
-        console.error('Error updating question on server:', error);
+        console.error(error);
       }
     }
 
-    // Close the modal
-    setEditModalOpen(false);
-    setEditingQuestion(null);
-    setEditingIndex(null);
-  };
-
-  const handleCancelEdit = () => {
     setEditModalOpen(false);
     setEditingQuestion(null);
     setEditingIndex(null);
   };
 
-  // Import questions from template
-  const importQuestions = questions => {
-    setFormFields(questions);
-  };
-
+  // Add option
   const handleAddOption = () => {
-    if (newOption.trim() === '') {
-      alert('Option cannot be empty!');
+    if (!newOption.trim()) {
+      safeAlert('Option cannot be empty');
       return;
     }
+
     setNewField(prev => ({
       ...prev,
       options: [...prev.options, newOption],
     }));
+
     setNewOption('');
   };
 
+  // Add field
   const handleAddField = async () => {
-    if (newField.questionText.trim() === '') {
-      alert('Field label is required!');
+    if (!newField.questionText.trim()) {
+      safeAlert('Field label is required');
       return;
     }
 
@@ -254,15 +223,13 @@ function JobFormBuilder() {
       ['checkbox', 'radio', 'dropdown'].includes(newField.questionType) &&
       newField.options.length === 0
     ) {
-      alert('You must add at least one option for this field!');
+      safeAlert('Please add at least one option');
       return;
     }
 
-    // Update local state immediately
-    const updatedFields = [...formFields, newField];
-    setFormFields(updatedFields);
+    const updated = [...formFields, newField];
+    setFormFields(updated);
 
-    // Sync with backend if form exists
     if (currentFormId) {
       try {
         await axios.post(ENDPOINTS.ADD_QUESTION(currentFormId), {
@@ -270,53 +237,37 @@ function JobFormBuilder() {
           position: formFields.length,
         });
       } catch (error) {
-        console.error('Error adding question to server:', error);
+        console.error(error);
       }
     }
 
-    setNewField({ questionText: '', questionType: 'textbox', options: [], visible: true });
+    setNewField(initialNewField);
   };
 
-  const changeVisiblity = (event, field) => {
-    const updatedFields = formFields.map(
-      item =>
-        item.questionText === field.questionText && item.questionType === field.questionType
-          ? { ...item, visible: event.target.checked } // Return the updated item
-          : item, // Return the unchanged item
+  const changeVisibility = (event, field) => {
+    const updated = formFields.map(item =>
+      item.questionText === field.questionText && item.questionType === field.questionType
+        ? { ...item, visible: event.target.checked }
+        : item,
     );
-    setFormFields(updatedFields);
-  };
 
-  const handleSubmit = async e => {
-    e.preventDefault();
-
-    const formIdToUse = currentFormId || '6753982566fcf3275f129eb4';
-
-    try {
-      await axios.put(ENDPOINTS.UPDATE_JOB_FORM, {
-        formId: formIdToUse,
-        title: jobTitle,
-        questions: formFields,
-        description: '',
-      });
-
-      console.log('Form updated successfully');
-      alert('Form saved successfully!');
-    } catch (error) {
-      console.error('Error updating form:', error);
-      alert('Failed to save form. Please try again.');
-    }
+    setFormFields(updated);
   };
 
   return (
     <div className={`${styles.pageWrapper} ${darkMode ? styles.darkMode : ''}`}>
+      <Prompt
+        when={hasUnsavedChanges}
+        message="You have unsaved changes. Are you sure you want to leave this page?"
+      />
+
       <div className={styles.formBuilderContainer}>
         <img
           src={OneCommunityImage}
           alt="One Community Logo"
-          id="onecommunity-image"
           className={styles.oneCommunityGlobalImg}
         />
+
         <div className={styles.jobformNavbar}>
           <div>
             <input placeholder="Enter Job Title" className={styles.jobformInput} />
@@ -324,89 +275,89 @@ function JobFormBuilder() {
               Go
             </button>
           </div>
+
           <div>
-            <select
-              value={jobTitle}
-              onChange={q => setJobTitle(q.target.value)}
-              className={styles.jobformSelect}
-            >
-              <option value="Please Choose an option">Please Choose an Option</option>
-              {jobPositions.map(e => (
-                <option key={uuidv4()} value={e}>
-                  {e}
+            <select className={styles.jobformSelect}>
+              <option value="Please Choose an option">Please Choose an option</option>
+              {jobPositions.map((pos, index) => (
+                <option key={`pos-${index}`} value={pos}>
+                  {pos}
                 </option>
               ))}
             </select>
           </div>
         </div>
-        {console.log(role)}
+
         <h1 className={styles.jobformTitle}>FORM CREATION</h1>
-        {role === 'Owner' || role === 'Administrator' ? (
+
+        {(role === 'Owner' || role === 'Administrator') && (
           <div className={styles.customForm}>
             <p className={styles.jobformDesc}>
               Fill the form with questions about a specific position you want to create an ad for.
-              The default questions will automatically appear and are alredy selected. You can pick
+              The default questions will automatically appear and are already selected. You can pick
               and choose them with the checkbox.
             </p>
+
             <QuestionSetManager
               formFields={formFields}
               setFormFields={setFormFields}
-              onImportQuestions={importQuestions}
-              darkMode={darkMode} // Pass dark mode prop
+              onImportQuestions={setFormFields}
+              darkMode={darkMode}
+              templateName={templateName}
+              setTemplateName={setTemplateName}
+              selectedTemplate={selectedTemplate}
+              setSelectedTemplate={setSelectedTemplate}
             />
+
             <form>
               {formFields.map((field, index) => (
-                <div className={styles.formDiv} key={uuidv4()}>
+                <div className={styles.formDiv} key={field._id || `${field.questionText}-${index}`}>
                   <QuestionFieldActions
                     field={field}
                     index={index}
-                    className={styles.formDivCheckbox}
                     totalFields={formFields.length}
                     onClone={cloneField}
                     onMove={moveField}
                     onDelete={deleteField}
                     onEdit={editField}
                     visible={field.visible}
-                    onVisibilityChange={event => changeVisiblity(event, field)}
+                    onVisibilityChange={e => changeVisibility(e, field)}
                   />
-                  <div key={uuidv4()} className={styles.formField}>
+
+                  <div className={styles.formField}>
                     <label className={`${styles.fieldLabel} ${styles.jbformLabel}`}>
                       {field.questionText}
                     </label>
+
                     <div className={styles.fieldOptions}>
                       {field.questionType === 'textbox' && (
-                        <input
-                          type="text"
-                          placeholder="Enter Text here"
-                          className={styles.jobformInput}
-                        />
+                        <input type="text" className={styles.jobformInput} />
                       )}
+
                       {field.questionType === 'date' && (
-                        <input
-                          type="date"
-                          placeholder="Enter date"
-                          className={styles.jobformInput}
-                        />
+                        <input type="date" className={styles.jobformInput} />
                       )}
+
                       {field.questionType === 'textarea' && (
                         <textarea className={styles.jobformTextarea} />
                       )}
+
                       {['checkbox', 'radio'].includes(field.questionType) &&
-                        field.options.map(option => (
-                          <div key={uuidv4()} className={styles.optionItem}>
-                            <input
-                              type={field.questionType}
-                              name={`field-${index}`}
-                              className={styles.jobformInput}
-                            />
-                            <label className={styles.jbformLabel}>{option}</label>
+                        field.options.map((opt, i) => (
+                          <div
+                            key={`${field._id || field.questionText}-opt-${i}`}
+                            className={styles.optionItem}
+                          >
+                            <input type={field.questionType} name={`field-${index}`} />
+                            <label className={styles.jbformLabel}>{opt}</label>
                           </div>
                         ))}
+
                       {field.questionType === 'dropdown' && (
                         <select className={styles.jobformSelect}>
-                          {field.options.map(option => (
-                            <option key={uuidv4()} value={option}>
-                              {option}
+                          {field.options.map((opt, i) => (
+                            <option key={`${field._id || field.questionText}-drop-${i}`}>
+                              {opt}
                             </option>
                           ))}
                         </select>
@@ -416,6 +367,7 @@ function JobFormBuilder() {
                 </div>
               ))}
             </form>
+
             <div className={styles.newFieldSection}>
               <div>
                 <label className={styles.jbformLabel}>
@@ -423,29 +375,31 @@ function JobFormBuilder() {
                   <input
                     type="text"
                     value={newField.questionText}
-                    onChange={e => {
-                      e.persist();
-                      setNewField(prev => ({ ...prev, questionText: e.target.value }));
-                    }}
+                    onChange={e =>
+                      setNewField(prev => ({
+                        ...prev,
+                        questionText: e.target.value,
+                      }))
+                    }
                     placeholder="Enter Field Label"
                     className={styles.jobformInput}
                   />
                 </label>
               </div>
+
               <div>
                 <label className={styles.jbformLabel}>
                   Input Type:
                   <select
                     value={newField.questionType}
-                    className={styles.jobformSelect}
-                    onChange={e => {
-                      e.persist();
+                    onChange={e =>
                       setNewField(prev => ({
                         ...prev,
                         questionType: e.target.value,
                         options: [],
-                      }));
-                    }}
+                      }))
+                    }
+                    className={styles.jobformSelect}
                   >
                     <option value="textbox">TextBox</option>
                     <option value="textarea">Textarea</option>
@@ -457,7 +411,6 @@ function JobFormBuilder() {
                 </label>
               </div>
 
-              {/* Options Section */}
               {['checkbox', 'radio', 'dropdown'].includes(newField.questionType) && (
                 <div className={styles.optionsSection}>
                   <label className={styles.jbformLabel}>
@@ -470,6 +423,7 @@ function JobFormBuilder() {
                       placeholder="Enter an option"
                     />
                   </label>
+
                   <button
                     type="button"
                     onClick={handleAddOption}
@@ -477,11 +431,12 @@ function JobFormBuilder() {
                   >
                     Add Option
                   </button>
+
                   <div className={styles.optionsList}>
                     <h4>Options:</h4>
-                    {newField.options.map(option => (
-                      <div key={uuidv4()} className={styles.optionItem}>
-                        {option}
+                    {newField.options.map((opt, i) => (
+                      <div key={`new-opt-${i}`} className={styles.optionItem}>
+                        {opt}
                       </div>
                     ))}
                   </div>
@@ -492,15 +447,20 @@ function JobFormBuilder() {
                 Add Field
               </button>
             </div>
+
             {editModalOpen && editingQuestion && (
               <QuestionEditModal
                 question={editingQuestion}
                 onSave={handleSaveEditedQuestion}
-                onCancel={handleCancelEdit}
+                onCancel={() => {
+                  setEditModalOpen(false);
+                  setEditingQuestion(null);
+                  setEditingIndex(null);
+                }}
               />
             )}
           </div>
-        ) : null}
+        )}
       </div>
     </div>
   );
diff --git a/src/components/Collaboration/QuestionSetManager.jsx b/src/components/Collaboration/QuestionSetManager.jsx
index a5dd95d4ec..3fecb83a28 100644
--- a/src/components/Collaboration/QuestionSetManager.jsx
+++ b/src/components/Collaboration/QuestionSetManager.jsx
@@ -1,5 +1,3 @@
-/* eslint-disable no-alert */
-/* eslint-disable no-console */
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
@@ -7,49 +5,51 @@ import { ENDPOINTS } from '../../utils/URL';
 import styles from './QuestionSetManager.module.css';
 import QuestionEditModal from './QuestionEditModal';
 
-function QuestionSetManager({ formFields, setFormFields, onImportQuestions, darkMode }) {
+const safeAlert = msg => globalThis.alert(msg);
+const safeConfirm = msg => globalThis.confirm(msg);
+
+function QuestionSetManager({
+  formFields,
+  setFormFields,
+  onImportQuestions,
+  darkMode,
+  templateName,
+  setTemplateName,
+  selectedTemplate,
+  setSelectedTemplate,
+}) {
   const [templates, setTemplates] = useState([]);
-  const [templateName, setTemplateName] = useState('');
-  const [selectedTemplate, setSelectedTemplate] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+
   const [editModalOpen, setEditModalOpen] = useState(false);
   const [editingQuestion, setEditingQuestion] = useState(null);
   const [editingIndex, setEditingIndex] = useState(null);
 
   const api = {
-    // Get all templates
     getTemplates: async () => {
       const response = await axios.get(ENDPOINTS.GET_ALL_TEMPLATES);
-      return response.data.templates;
+      return response.data?.templates || [];
     },
-
-    // Create a new template
     createTemplate: async data => {
       const response = await axios.post(ENDPOINTS.CREATE_TEMPLATE, data);
-      return response.data.template;
+      return response.data?.template;
     },
-
-    // Update an existing template
     updateTemplate: async (id, data) => {
       const response = await axios.put(ENDPOINTS.UPDATE_TEMPLATE(id), data);
-      return response.data.template;
+      return response.data?.template;
     },
-
-    // Delete a template
     deleteTemplate: async id => {
       const response = await axios.delete(ENDPOINTS.DELETE_TEMPLATE(id));
       return response.data;
     },
-
-    // Get template by ID
     getTemplateById: async id => {
       const response = await axios.get(ENDPOINTS.GET_TEMPLATE_BY_ID(id));
-      return response.data.template;
+      return response.data?.template;
     },
   };
 
-  // Load templates from API on component mount
+  // Load templates
   useEffect(() => {
     const fetchTemplates = async () => {
       setIsLoading(true);
@@ -61,15 +61,13 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
       } catch (err) {
         console.error('Failed to fetch templates:', err);
 
-        // Fallback to localStorage if API fails
-        try {
-          const savedTemplates = localStorage.getItem('jobFormTemplates');
-          if (savedTemplates) {
-            setTemplates(JSON.parse(savedTemplates));
-            // setError('Using locally saved templates.');
+        const saved = localStorage.getItem('jobFormTemplates');
+        if (saved) {
+          try {
+            setTemplates(JSON.parse(saved));
+          } catch (localErr) {
+            console.error('Failed to parse local templates:', localErr);
           }
-        } catch (localError) {
-          console.error('Failed to load local templates:', localError);
         }
       } finally {
         setIsLoading(false);
@@ -79,14 +77,15 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
     fetchTemplates();
   }, []);
 
+  // Save template
   const saveTemplate = async () => {
-    if (templateName.trim() === '') {
-      alert('Please enter a template name');
+    if (!templateName.trim()) {
+      safeAlert('Please enter a template name');
       return;
     }
 
     if (formFields.length === 0) {
-      alert('Your form is empty. Please add questions before saving as a template.');
+      safeAlert('Your form is empty. Add questions first.');
       return;
     }
 
@@ -94,68 +93,61 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
     setError(null);
 
     try {
-      const templateExists = templates.some(t => t.name === templateName);
+      const exists = templates.some(t => t?.name === templateName);
 
-      if (templateExists) {
-        const confirmOverwrite = window.confirm(
-          `Template "${templateName}" already exists. Do you want to overwrite it?`,
-        );
-        if (!confirmOverwrite) {
+      if (exists) {
+        const proceed = safeConfirm(`Template "${templateName}" exists. Overwrite?`);
+        if (!proceed) {
           setIsLoading(false);
           return;
         }
 
-        // Find the existing template to get its ID
-        const existingTemplate = templates.find(t => t.name === templateName);
+        const existing = templates.find(t => t.name === templateName);
 
-        // Update the template
-        const updatedTemplate = await api.updateTemplate(existingTemplate._id, {
+        const updatedTemplate = await api.updateTemplate(existing._id, {
           name: templateName,
           fields: formFields.map(field => ({
             questionText: field.questionText,
             questionType: field.questionType,
-            visible: field.visible !== undefined ? field.visible : true,
+            visible: field.visible ?? true,
             isRequired: field.required || false,
             options: field.options || [],
             placeholder: field.placeholder || '',
           })),
         });
 
-        // Update local state
-        setTemplates(templates.map(t => (t._id === updatedTemplate._id ? updatedTemplate : t)));
+        setTemplates(prev => prev.map(t => (t._id === updatedTemplate._id ? updatedTemplate : t)));
 
-        alert(`Template "${templateName}" updated successfully!`);
+        safeAlert(`Template "${templateName}" updated.`);
       } else {
         const newTemplate = await api.createTemplate({
           name: templateName,
           fields: formFields.map(field => ({
             questionText: field.questionText || field.label,
             questionType: field.questionType || field.type,
-            visible: field.visible !== undefined ? field.visible : true,
+            visible: field.visible ?? true,
             isRequired: field.required || field.isRequired || false,
             options: field.options || [],
             placeholder: field.placeholder || '',
           })),
         });
 
-        // Update local state
-        const updatedTemplates = [...templates, newTemplate];
-        setTemplates(updatedTemplates);
+        const updated = [...templates, newTemplate];
+        setTemplates(updated);
 
-        // Also saved to localStorage as backup
-        localStorage.setItem('jobFormTemplates', JSON.stringify(updatedTemplates));
-
-        alert(`Template "${templateName}" created successfully!`);
+        localStorage.setItem('jobFormTemplates', JSON.stringify(updated));
+        safeAlert(`Template "${templateName}" created.`);
       }
 
       setTemplateName('');
     } catch (err) {
       console.error('Failed to save template:', err);
+      safeAlert('Failed to save. Check console.');
 
-      // Save to localStorage as fallback
       try {
-        const templateExists = templates.some(t => t.name === templateName);
-        if (templateExists) {
+        const exists = templates.some(t => t?.name === templateName);
+
+        if (exists) {
           const newTemplates = templates.map(t =>
             t.name === templateName ? { ...t, fields: formFields } : t,
           );
@@ -164,20 +156,13 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
         } else {
           const newTemplates = [
             ...templates,
-            {
-              id: Date.now(), // Add a temporary ID for local templates
-              name: templateName,
-              fields: formFields,
-            },
+            { id: Date.now(), name: templateName, fields: formFields },
           ];
-
           setTemplates(newTemplates);
           localStorage.setItem('jobFormTemplates', JSON.stringify(newTemplates));
         }
-        alert(`Template "${templateName}" saved locally.`);
-      } catch (localError) {
-        console.error('Failed to save local template:', localError);
-        alert('Failed to save template. Please try again.');
+      } catch (fallbackErr) {
+        console.error('Local save failed:', fallbackErr);
       }
     } finally {
       setIsLoading(false);
@@ -186,8 +171,8 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
 
   // Load template
   const loadTemplate = async () => {
-    if (selectedTemplate === '') {
-      alert('Please select a template to load');
+    if (!selectedTemplate) {
+      safeAlert('Please select a template.');
       return;
     }
 
@@ -198,40 +183,35 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
       const template = templates.find(t => t.name === selectedTemplate);
 
       if (template) {
-        // Confirm if user wants to replace current form fields
-        if (formFields.length > 0) {
-          const confirmLoad = window.confirm('This will replace your current form. Continue?');
-          if (!confirmLoad) {
-            setIsLoading(false);
-            return;
-          }
+        const proceed =
+          formFields.length === 0 || safeConfirm('This replaces your current form. Continue?');
+
+        if (!proceed) {
+          setIsLoading(false);
+          return;
         }
 
-        // Check if template has _id (server template) or not (local template)
         if (template._id) {
-          // Get the full template data from the server
           const fullTemplate = await api.getTemplateById(template._id);
-          onImportQuestions(fullTemplate.fields);
+          onImportQuestions(fullTemplate?.fields || []);
         } else {
-          // Use the local template directly
-          onImportQuestions(template.fields);
+          onImportQuestions(template.fields || []);
         }
 
-        alert(`Template "${selectedTemplate}" loaded successfully!`);
+        safeAlert(`Template "${selectedTemplate}" loaded.`);
       }
     } catch (err) {
       console.error('Failed to load template:', err);
-      setError('Failed to load template. Please try again later.');
-      alert('Failed to load template. Please try again.');
+      safeAlert('Failed to load template.');
     } finally {
       setIsLoading(false);
     }
   };
 
-  // Add template to existing fields
+  // Append template
   const appendTemplate = async () => {
-    if (selectedTemplate === '') {
-      alert('Please select a template to append');
+    if (!selectedTemplate) {
+      safeAlert('Select a template to append');
       return;
     }
 
@@ -242,38 +222,33 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
       const template = templates.find(t => t.name === selectedTemplate);
 
       if (template) {
-        // Check if template has _id (server template) or not (local template)
+        let templateFields = template.fields;
+
         if (template._id) {
-          // Get template fields for appending from the server
-          const templateData = await api.getTemplateById(template._id);
-          onImportQuestions([...formFields, ...templateData.fields]);
-        } else {
-          // Use the local template directly
-          onImportQuestions([...formFields, ...template.fields]);
+          const fullTemplate = await api.getTemplateById(template._id);
+          templateFields = fullTemplate?.fields || [];
         }
 
-        alert(`Template "${selectedTemplate}" appended successfully!`);
+        onImportQuestions([...formFields, ...templateFields]);
+        safeAlert(`Template "${selectedTemplate}" appended.`);
       }
     } catch (err) {
       console.error('Failed to append template:', err);
-      setError('Failed to append template. Please try again later.');
-      alert('Failed to append template. Please try again.');
+      safeAlert('Append failed.');
     } finally {
       setIsLoading(false);
     }
   };
 
-  // Delete a template
+  // Delete template
   const deleteTemplate = async () => {
-    if (selectedTemplate === '') {
-      alert('Please select a template to delete');
+    if (!selectedTemplate) {
+      safeAlert('Select a template to delete');
       return;
     }
 
-    const confirmDelete = window.confirm(
-      `Are you sure you want to delete template "${selectedTemplate}"?`,
-    );
-    if (!confirmDelete) return;
+    const proceed = safeConfirm(`Delete template "${selectedTemplate}"?`);
+    if (!proceed) return;
 
     setIsLoading(true);
     setError(null);
@@ -282,49 +257,49 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
       const template = templates.find(t => t.name === selectedTemplate);
 
       if (template) {
-        // Check if template has _id (server template) or not (local template)
         if (template._id) {
-          // Delete from server
           await api.deleteTemplate(template._id);
         }
 
-        // Always remove from local state
-        const filteredTemplates = templates.filter(t => t.name !== selectedTemplate);
-        setTemplates(filteredTemplates);
-        localStorage.setItem('jobFormTemplates', JSON.stringify(filteredTemplates));
-
-        setSelectedTemplate('');
-        alert(`Template "${selectedTemplate}" deleted successfully!`);
+        const filtered = templates.filter(t => t.name !== selectedTemplate);
+        setTemplates(filtered);
+        localStorage.setItem('jobFormTemplates', JSON.stringify(filtered));
       }
+
+      setSelectedTemplate('');
+      safeAlert(`Template "${selectedTemplate}" deleted.`);
     } catch (err) {
       console.error('Failed to delete template:', err);
-      setError('Failed to delete template. Please try again later.');
 
-      // Still delete from local state
-      const filteredTemplates = templates.filter(t => t.name !== selectedTemplate);
-      setTemplates(filteredTemplates);
-      localStorage.setItem('jobFormTemplates', JSON.stringify(filteredTemplates));
+      try {
+        const filtered = templates.filter(t => t.name !== selectedTemplate);
+        setTemplates(filtered);
+        localStorage.setItem('jobFormTemplates', JSON.stringify(filtered));
+      } catch (localErr) {
+        console.error('Local delete failed:', localErr);
+      }
+
       setSelectedTemplate('');
-      alert(`Template deleted from local storage only.`);
+      safeAlert('Deleted locally only.');
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleSaveEditedQuestion = editedQuestion => {
+  // Save edited question
+  const handleSaveEditedQuestion = edited => {
     if (editingIndex !== null) {
-      const updatedQuestion = {
-        ...formFields[editingIndex],
-        questionText: editedQuestion.label,
-        questionType: editedQuestion.type,
-        options: editedQuestion.options || [],
-        required: editedQuestion.required,
-        placeholder: editedQuestion.placeholder,
+      const updated = [...formFields];
+      updated[editingIndex] = {
+        ...updated[editingIndex],
+        questionText: edited.label,
+        questionType: edited.type,
+        options: edited.options || [],
+        required: edited.required,
+        placeholder: edited.placeholder,
       };
 
-      const updatedFields = [...formFields];
-      updatedFields[editingIndex] = updatedQuestion;
-      setFormFields(updatedFields);
+      setFormFields(updated);
     }
 
     setEditModalOpen(false);
@@ -332,16 +307,11 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
     setEditingIndex(null);
   };
 
-  const handleCancelEdit = () => {
-    setEditModalOpen(false);
-    setEditingQuestion(null);
-    setEditingIndex(null);
-  };
-
   return (
     <div className={`${styles.questionSetManager} ${darkMode ? styles.darkMode : ''}`}>
       <h3>Question Set Templates</h3>
       {error && <div className={styles.errorMessage}>{error}</div>}
+
       <div className={styles.templateActions}>
         <div className={styles.saveTemplate}>
           <input
@@ -351,6 +321,7 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
             onChange={e => setTemplateName(e.target.value)}
             disabled={isLoading}
           />
+
           <button
             type="button"
             onClick={saveTemplate}
@@ -360,6 +331,7 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
             {isLoading ? 'Saving...' : 'Save Current set'}
           </button>
         </div>
+
         <div className={styles.loadTemplate}>
           <select
             value={selectedTemplate}
@@ -367,12 +339,13 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
             disabled={isLoading || templates.length === 0}
           >
             <option value="">Select a template</option>
-            {templates.map((template, i) => (
-              <option key={template._id || i} value={template.name}>
-                {template.name}
+            {templates.map(t => (
+              <option key={t?._id || t?.name} value={t?.name}>
+                {t?.name}
               </option>
             ))}
           </select>
+
           <button
             type="button"
             onClick={loadTemplate}
@@ -381,6 +354,7 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
           >
             {isLoading ? 'Loading...' : 'Clone with Template'}
           </button>
+
           <button
             type="button"
             onClick={appendTemplate}
@@ -389,6 +363,7 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
           >
             {isLoading ? 'Appending...' : 'Append Template'}
           </button>
+
           <button
             type="button"
             onClick={deleteTemplate}
@@ -399,11 +374,16 @@ function QuestionSetManager({ formFields, setFormFields, onImportQuestions, dark
           </button>
         </div>
       </div>
+
       {editModalOpen && editingQuestion && (
         <QuestionEditModal
           question={editingQuestion}
           onSave={handleSaveEditedQuestion}
-          onCancel={handleCancelEdit}
+          onCancel={() => {
+            setEditModalOpen(false);
+            setEditingQuestion(null);
+            setEditingIndex(null);
+          }}
         />
       )}
     </div>
@@ -426,6 +406,11 @@ QuestionSetManager.propTypes = {
   ).isRequired,
   setFormFields: PropTypes.func.isRequired,
   onImportQuestions: PropTypes.func.isRequired,
+  darkMode: PropTypes.bool.isRequired,
+  templateName: PropTypes.string.isRequired,
+  setTemplateName: PropTypes.func.isRequired,
+  selectedTemplate: PropTypes.string.isRequired,
+  setSelectedTemplate: PropTypes.func.isRequired,
 };
 
 export default QuestionSetManager;