diff --git a/client/package.json b/client/package.json
index 75898d4e..d9c23905 100644
--- a/client/package.json
+++ b/client/package.json
@@ -18,7 +18,9 @@
     "react-signature-canvas": "^1.1.0-alpha.2",
     "react-toastify": "^11.0.5",
     "sweetalert2": "^11.17.2",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "date-fns": "^4.1.0",
+    "react-datepicker": "^8.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/client/src/pages/A1InternshipRequestForm.js b/client/src/pages/A1InternshipRequestForm.js
index 81191c88..009a0979 100644
--- a/client/src/pages/A1InternshipRequestForm.js
+++ b/client/src/pages/A1InternshipRequestForm.js
@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "../styles/A1InternshipRequestForm.css";
 
+
 const outcomeLabels = [
   "Problem Solving",
   "Solution Development",
   "Communication",
-  "Decision-Making",
+  "Decision Making",
   "Collaboration",
   "Application",
 ];
@@ -19,7 +20,75 @@ const outcomeDescriptions = [
   "Apply computer science algorithms to create practical solutions",
 ];
 
-const A1InternshipRequestForm = () => {
+// Signature font options
+const signatureFonts = [
+  { name: "Dancing Script", class: "font-dancing-script" },
+  { name: "Great Vibes", class: "font-great-vibes" },
+  { name: "Pacifico", class: "font-pacifico" },
+  { name: "Satisfy", class: "font-satisfy" },
+  { name: "Caveat", class: "font-caveat" }
+];
+
+// Signature Font Picker Component
+const SignatureInput = ({ id, value, onChange, disabled, placeholder }) => {
+  const [showFonts, setShowFonts] = useState(false);
+  const [selectedFont, setSelectedFont] = useState(signatureFonts[0].class);
+  const [nameInput, setNameInput] = useState(value);
+
+  useEffect(() => {
+    setNameInput(value);
+  }, [value]);
+
+  const handleNameChange = (e) => {
+    setNameInput(e.target.value);
+    onChange({ target: { id, value: e.target.value } });
+  };
+
+  const selectFont = (fontClass) => {
+    setSelectedFont(fontClass);
+    setShowFonts(false);
+  };
+
+  return (
+    <div className="signature-input-container">
+      <input
+        type="text"
+        value={nameInput}
+        onChange={handleNameChange}
+        placeholder={placeholder}
+        disabled={disabled}
+        className="signature-name-input"
+        onFocus={() => !disabled && setShowFonts(true)}
+      />
+      {showFonts && nameInput && (
+        <div className="signature-font-options">
+          <div className="signature-font-preview-header">Select a signature style:</div>
+          {signatureFonts.map((font) => (
+            <div 
+              key={font.class}
+              className={`signature-font-preview ${font.class}`}
+              onClick={() => selectFont(font.class)}
+            >
+              {nameInput}
+            </div>
+          ))}
+        </div>
+      )}
+      {nameInput && (
+        <div className={`signature-preview ${selectedFont}`}>
+          {nameInput}
+          <input 
+            type="hidden" 
+            id={id} 
+            value={nameInput} 
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const A1InternshipRequestForm = ({ userRole = "student" }) => {
   const initialState = {
     interneeName: "",
     soonerId: "",
@@ -36,7 +105,9 @@ const A1InternshipRequestForm = () => {
     advisorSignature: "",
     coordinatorApproval: "",
     creditHours: "",
-    tasks: Array(5).fill({ description: "" }),
+    tasks: Array(5).fill({ description: "", outcomes: [] }), // Updated for outcomes
+    supervisorComments: "",
+    coordinatorComments: "",
   };
 
   const [formData, setFormData] = useState(initialState);
@@ -44,10 +115,22 @@ const A1InternshipRequestForm = () => {
   const [errors, setErrors] = useState({});
   const [dateError, setDateError] = useState("");
 
+  const isFieldEditable = (fieldType) => {
+    switch (userRole) {
+      case "student":
+        return !["advisorSignature", "coordinatorApproval", "supervisorComments", "coordinatorComments"].includes(fieldType);
+      case "supervisor":
+        return ["advisor", "supervisorComments"].includes(fieldType);
+      case "coordinator":
+        return ["coordinator", "coordinatorComments", "advisor"].includes(fieldType);
+      default:
+        return true;
+    }
+  };
+
   const handleInputChange = (e) => {
     const { id, value } = e.target;
     setFormData((prev) => ({ ...prev, [id]: value }));
-
     if (id === "startDate" || id === "endDate") {
       setDateError("");
       if (formData.startDate && formData.endDate) {
@@ -57,20 +140,24 @@ const A1InternshipRequestForm = () => {
         );
       }
     }
+    if (errors[id]) {
+      setErrors(prev => {
+        const newErrors = { ...prev };
+        delete newErrors[id];
+        return newErrors;
+      });
+    }
   };
 
   const validateDates = (start, end) => {
     const startDate = new Date(start);
     const endDate = new Date(end);
-    if (endDate <= startDate) {
-      setDateError("End date must be after start date");
-    } else {
-      setDateError("");
-    }
+    if (endDate <= startDate) setDateError("End date must be after start date");
+    else setDateError("");
   };
 
-  const handleCreditHourChange = (value) => {
-    setFormData((prev) => ({ ...prev, creditHours: value }));
+  const handleCreditHourChange = (e) => {
+    setFormData((prev) => ({ ...prev, creditHours: e.target.value }));
   };
 
   const handleTaskChange = (index, value) => {
@@ -79,56 +166,83 @@ const A1InternshipRequestForm = () => {
     setFormData((prev) => ({ ...prev, tasks: updatedTasks }));
   };
 
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const descriptions = formData.tasks.map((task) => task.description.trim()).filter(Boolean);
+      if (descriptions.length > 0) {
+        fetch(`${process.env.REACT_APP_API_URL}/api/align-outcomes`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ tasks: descriptions }),
+        })
+          .then((res) => res.json())
+          .then((data) => {
+            const updatedTasks = formData.tasks.map((task) => {
+              const match = data.results.find((r) => r.task === task.description);
+              return match ? { ...task, outcomes: match.matched_outcomes } : { ...task, outcomes: [] };
+            });
+            setFormData((prev) => ({ ...prev, tasks: updatedTasks }));
+          })
+          .catch((err) => console.error("Outcome alignment error:", err));
+      }
+    }, 500);
+    return () => clearTimeout(timeout);
+  }, [formData.tasks]);
+
+  const renderOutcomeCell = (task, outcome, key) => {
+    const normalizedOutcome = outcome.charAt(0).toLowerCase() + outcome.replace(/\s+/g, "").slice(1);
+    const isMatched = task.outcomes.includes(normalizedOutcome);
+    return (
+      <td key={key} style={{ backgroundColor: isMatched ? "#c6f6d5" : "", padding: "4px" }}>
+        <input
+          type="text"
+          value={isMatched ? "✔" : ""}
+          readOnly
+          style={{
+            width: "100%",
+            boxSizing: "border-box",
+            border: "none",
+            textAlign: "center",
+            backgroundColor: "transparent",
+          }}
+        />
+      </td>
+    );
+  };
+
   const validateForm = () => {
     const namePattern = /^[A-Za-z\s]+$/;
     const numberPattern = /^[0-9]+$/;
     const phonePattern = /^[0-9]{10}$/;
     const emailPattern = /^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/;
-
     const newErrors = {};
 
     if (!formData.interneeName) newErrors.interneeName = "Internee name is required";
     else if (!namePattern.test(formData.interneeName)) newErrors.interneeName = "Name should contain only letters and spaces";
-
     if (!formData.soonerId) newErrors.soonerId = "Sooner ID is required";
     else if (!numberPattern.test(formData.soonerId)) newErrors.soonerId = "Sooner ID should be numeric";
-
     if (!formData.interneeEmail) newErrors.interneeEmail = "Email is required";
     else if (!emailPattern.test(formData.interneeEmail)) newErrors.interneeEmail = "Invalid email format";
-
     if (!formData.workplaceName) newErrors.workplaceName = "Workplace name is required";
     else if (!namePattern.test(formData.workplaceName)) newErrors.workplaceName = "Workplace name should contain only letters and spaces";
-
+    if (formData.website && !formData.website.includes('.')) newErrors.website = "Please enter a valid website address";
     if (!formData.phone) newErrors.phone = "Phone is required";
     else if (!phonePattern.test(formData.phone)) newErrors.phone = "Phone must be 10 digits";
-
     if (!formData.startDate) newErrors.startDate = "Start date is required";
     if (!formData.endDate) newErrors.endDate = "End date is required";
-    else if (formData.startDate && formData.endDate) {
-      const start = new Date(formData.startDate);
-      const end = new Date(formData.endDate);
-      if (end <= start) newErrors.endDate = "End date must be after start date";
-    }
-
-    if (!formData.advisorName) newErrors.advisorName = "Advisor name is required";
-    else if (!namePattern.test(formData.advisorName)) newErrors.advisorName = "Advisor name should contain only letters and spaces";
-
-    if (!formData.advisorEmail) newErrors.advisorEmail = "Advisor email is required";
-    else if (!emailPattern.test(formData.advisorEmail)) newErrors.advisorEmail = "Invalid advisor email format";
-
+    if (!formData.advisorName) newErrors.advisorName = "Supervisor name is required";
+    else if (!namePattern.test(formData.advisorName)) newErrors.advisorName = "Supervisor name should contain only letters and spaces";
+    if (!formData.advisorEmail) newErrors.advisorEmail = "Supervisor email is required";
+    else if (!emailPattern.test(formData.advisorEmail)) newErrors.advisorEmail = "Invalid supervisor email format";
     if (!formData.interneeSignature) newErrors.interneeSignature = "Internee signature is required";
     else if (!namePattern.test(formData.interneeSignature)) newErrors.interneeSignature = "Signature should contain only letters and spaces";
-
     if (formData.advisorSignature && !namePattern.test(formData.advisorSignature)) {
       newErrors.advisorSignature = "Signature should contain only letters and spaces";
     }
-
     if (formData.coordinatorApproval && !namePattern.test(formData.coordinatorApproval)) {
       newErrors.coordinatorApproval = "Approval should contain only letters and spaces";
     }
-
     if (!formData.creditHours) newErrors.creditHours = "Please select credit hours";
-
     const tasksFilled = formData.tasks.filter((task) => task.description.trim() !== "").length >= 3;
     if (!tasksFilled) newErrors.tasks = "At least 3 tasks are required";
 
@@ -140,16 +254,11 @@ const A1InternshipRequestForm = () => {
     try {
       const response = await fetch(`${process.env.REACT_APP_API_URL}/api/form/submit`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify(formData),
       });
-      if (!response.ok) {
-        throw new Error("Failed to submit form", {cause: response});
-      }
+      if (!response.ok) throw new Error("Failed to submit form");
       const data = await response.json();
-      console.log("Form submitted successfully:", data);
       return data;
     } catch (error) {
       console.error("Error submitting form:", error);
@@ -157,86 +266,67 @@ const A1InternshipRequestForm = () => {
     }
   };
 
-  // const handleSubmit = (e) => {
-  //   e.preventDefault();
-  //   if (validateForm()) {
-  //     // sending descriptions to backend to check if they align with CS outcomes
-  //     const taskDescriptions = formData.tasks
-  //     .map(task => task.description.trim())
-  //     .filter(Boolean);
-  //     sendTaskDescriptions(taskDescriptions);
-  //     //ending here
-  //     submitFormData().then(data => {
-  //       const recipient = data.manual ? "coordinator for manual review!" : "advisor!";
-  //       setSuccessMsg("Form submitted successfully and sent to " + recipient);
-  //       setTimeout(() => setSuccessMsg(""), 15000);
-  //     }).catch(err => setErrors("Form submission failed! " + err))
-  //       .finally(() => setFormData(initialState));
-  //   }
-  // };
-
+  const sendTaskDescriptions = async (descriptions) => {
+    try {
+      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/align-outcomes`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ tasks: descriptions }),
+      });
+      if (!response.ok) throw new Error("Failed to send task descriptions");
+      const data = await response.json();
+      return data.results.map(({ task, matched_outcomes }) => ({
+        description: task,
+        outcomes: matched_outcomes,
+      }));
+    } catch (error) {
+      console.error("Error:", error);
+      return null;
+    }
+  };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-  
     if (!validateForm()) return;
-  
-    const taskDescriptions = formData.tasks
-      .map(task => task.description.trim())
-      .filter(Boolean);
-  
+    const taskDescriptions = formData.tasks.map((task) => task.description.trim()).filter(Boolean);
     try {
       const aligned = await sendTaskDescriptions(taskDescriptions);
-  
       if (aligned && aligned.length > 0) {
-        setFormData(prev => ({
-          ...prev,
-          tasks: aligned
-        }));
-  
+        setFormData((prev) => ({ ...prev, tasks: aligned }));
         const submissionResponse = await submitFormData();
-  
         const recipient = submissionResponse.manual ? "coordinator for manual review!" : "supervisor!";
-        setSuccessMsg("Form submitted successfully and sent to " + recipient);
+        setSuccessMsg(`Form submitted successfully and sent to ${recipient}`);
         setTimeout(() => setSuccessMsg(""), 15000);
         setFormData(initialState);
       } else {
         setErrors({ tasks: "Outcome alignment failed or returned no tasks." });
       }
     } catch (err) {
-      console.error("Error during submission:", err);
-      setErrors({ submit: "Form submission failed! " + err.message });
+      setErrors({ submit: `Form submission failed! ${err.message}` });
     }
   };
-  
-  //function to send description to backend
-  const sendTaskDescriptions = async (descriptions) => {
-    try {
-      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/align-outcomes`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({ tasks: descriptions }) 
-      });
-  
-      if (!response.ok) {
-        throw new Error("Failed to send task descriptions");
-      }
-  
-      const data = await response.json();
-      console.log("Alignment result:", data);
-      formData.tasks = data.results.map(({ task, matched_outcomes }) => ({
-        description: task,
-        outcomes: matched_outcomes
-      }));
 
-      return formData.tasks;
+  useEffect(() => {
+    const fonts = [
+      'https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap',
+      'https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap',
+      'https://fonts.googleapis.com/css2?family=Pacifico&display=swap',
+      'https://fonts.googleapis.com/css2?family=Satisfy&display=swap',
+      'https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap'
+    ];
+    const links = [];
+    fonts.forEach(font => {
+      const link = document.createElement('link');
+      link.href = font;
+      link.rel = 'stylesheet';
+      document.head.appendChild(link);
+      links.push(link);
+    });
+    return () => {
+      links.forEach(link => document.head.removeChild(link));
+    };
+  }, []);
 
-    } catch (error) {
-      console.error("Error:", error);
-    }
-  };
   return (
     <div className="form-container">
       <h2>A.1 - Internship Request Form</h2>
@@ -247,84 +337,164 @@ const A1InternshipRequestForm = () => {
             <tr>
               <th colSpan="3">Internee Details</th>
               <th colSpan="3">Workplace Details</th>
-              <th colSpan="2">Internship Advisor Details</th>
+              <th colSpan="2">Internship Supervisor Details</th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td colSpan="3">
                 Name<span className="required-asterisk">*</span>:<br />
-                <input type="text" id="interneeName" value={formData.interneeName} onChange={handleInputChange} />
+                <input 
+                  type="text" 
+                  id="interneeName" 
+                  value={formData.interneeName} 
+                  onChange={handleInputChange} 
+                  disabled={!isFieldEditable("interneeName")} 
+                />
+                {errors.interneeName && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.interneeName}</div>}
               </td>
               <td colSpan="3">
                 Name<span className="required-asterisk">*</span>:<br />
-                <input type="text" id="workplaceName" value={formData.workplaceName} onChange={handleInputChange} />
+                <input 
+                  type="text" 
+                  id="workplaceName" 
+                  value={formData.workplaceName} 
+                  onChange={handleInputChange} 
+                  disabled={!isFieldEditable("workplaceName")} 
+                />
+                {errors.workplaceName && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.workplaceName}</div>}
               </td>
               <td colSpan="2">
                 Name<span className="required-asterisk">*</span>:<br />
-                <input type="text" id="advisorName" value={formData.advisorName} onChange={handleInputChange} />
+                <input 
+                  type="text" 
+                  id="advisorName" 
+                  value={formData.advisorName} 
+                  onChange={handleInputChange} 
+                  disabled={!isFieldEditable("advisorName")} 
+                />
+                {errors.advisorName && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.advisorName}</div>}
               </td>
             </tr>
             <tr>
               <td colSpan="3">
                 Sooner ID<span className="required-asterisk">*</span>:<br />
-                <input type="text" id="soonerId" value={formData.soonerId} onChange={handleInputChange} />
+                <input 
+                  type="text" 
+                  id="soonerId" 
+                  value={formData.soonerId} 
+                  onChange={handleInputChange} 
+                  disabled={!isFieldEditable("soonerId")} 
+                />
+                {errors.soonerId && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.soonerId}</div>}
               </td>
               <td colSpan="3">
                 Website:<br />
-                <input type="text" id="website" value={formData.website} onChange={handleInputChange} />
+                <input 
+                  type="text" 
+                  id="website" 
+                  value={formData.website} 
+                  onChange={handleInputChange} 
+                  disabled={!isFieldEditable("website")} 
+                />
+                {errors.website && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.website}</div>}
               </td>
               <td colSpan="2">
                 Job Title:<br />
-                <input type="text" id="advisorJobTitle" value={formData.advisorJobTitle} onChange={handleInputChange} />
+                <input 
+                  type="text" 
+                  id="advisorJobTitle" 
+                  value={formData.advisorJobTitle} 
+                  onChange={handleInputChange} 
+                  disabled={!isFieldEditable("advisorJobTitle")} 
+                />
               </td>
             </tr>
             <tr>
               <td colSpan="3">
                 Email<span className="required-asterisk">*</span>:<br />
-                <input type="email" id="interneeEmail" value={formData.interneeEmail} onChange={handleInputChange} />
+                <input 
+                  type="email" 
+                  id="interneeEmail" 
+                  value={formData.interneeEmail} 
+                  onChange={handleInputChange} 
+                  disabled={!isFieldEditable("interneeEmail")} 
+                />
+                {errors.interneeEmail && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.interneeEmail}</div>}
               </td>
               <td colSpan="3">
                 Phone<span className="required-asterisk">*</span>:<br />
-                <input type="text" id="phone" value={formData.phone} onChange={handleInputChange} />
+                <input 
+                  type="text" 
+                  id="phone" 
+                  value={formData.phone} 
+                  onChange={handleInputChange} 
+                  disabled={!isFieldEditable("phone")} 
+                />
+                {errors.phone && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.phone}</div>}
               </td>
               <td colSpan="2">
                 Email<span className="required-asterisk">*</span>:<br />
-                <input type="email" id="advisorEmail" value={formData.advisorEmail} onChange={handleInputChange} />
+                <input 
+                  type="email" 
+                  id="advisorEmail" 
+                  value={formData.advisorEmail} 
+                  onChange={handleInputChange} 
+                  disabled={!isFieldEditable("advisorEmail")} 
+                />
+                {errors.advisorEmail && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.advisorEmail}</div>}
               </td>
             </tr>
             <tr>
-              <td colSpan="3" className="signature-cell">
-                <strong>Select the Number of Credit Hours<span className="required-asterisk">*</span></strong>
-              </td>
               <td colSpan="3">
-                Start Date<span className="required-asterisk">*</span>:<br />
-                <input type="date" id="startDate" value={formData.startDate} onChange={handleInputChange} />
+                Credit Hours<span className="required-asterisk">*</span>:<br />
+                <select 
+                  id="creditHours" 
+                  value={formData.creditHours} 
+                  onChange={handleCreditHourChange}
+                  disabled={!isFieldEditable("creditHours")}
+                >
+                  <option value="">Select Credit Hours</option>
+                  <option value="1">1 Credit</option>
+                  <option value="2">2 Credits</option>
+                  <option value="3">3 Credits</option>
+                </select>
+                {errors.creditHours && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.creditHours}</div>}
               </td>
-              <td colSpan="2">
-                End Date<span className="required-asterisk">*</span>:<br />
-                <input
-                  type="date"
-                  id="endDate"
-                  value={formData.endDate}
-                  min={formData.startDate}
-                  onChange={handleInputChange}
-                />
-                {dateError && <div className="date-error" style={{ color: "red", fontSize: "0.8rem" }}>{dateError}</div>}
-              </td>
-            </tr>
-            <tr>
-              {[1, 2, 3].map((val) => (
-                <td key={val} style={{ textAlign: "center" }}>
-                  {val}<br />
-                  <input
-                    type="checkbox"
-                    checked={formData.creditHours === val.toString()}
-                    onChange={() => handleCreditHourChange(val.toString())}
-                  />
-                </td>
-              ))}
-              <td colSpan="5"></td>
+              <td colSpan="3">
+  <label htmlFor="startDate">
+    Start Date<span className="required-asterisk">*</span>:
+  </label><br />
+  <div className="date-input-wrapper">
+    <input 
+      type="date"
+      id="startDate"
+      value={formData.startDate}
+      onChange={handleInputChange}
+      disabled={!isFieldEditable("startDate")}
+    />
+  </div>
+  {errors.startDate && <div className="error-text">{errors.startDate}</div>}
+</td>
+
+<td colSpan="2">
+  <label htmlFor="endDate">
+    End Date<span className="required-asterisk">*</span>:
+  </label><br />
+  <div className="date-input-wrapper">
+    <input
+      type="date"
+      id="endDate"
+      value={formData.endDate}
+      min={formData.startDate}
+      onChange={handleInputChange}
+      disabled={!isFieldEditable("endDate")}
+    />
+  </div>
+  {dateError && <div className="error-text">{dateError}</div>}
+  {errors.endDate && <div className="error-text">{errors.endDate}</div>}
+</td>
+
             </tr>
           </tbody>
         </table>
@@ -334,7 +504,7 @@ const A1InternshipRequestForm = () => {
           <div className="job-description-box">
             <strong>Job Description Details:</strong>
             <ol>
-              <li>Tasks need to be filled by the Internship Advisor.</li>
+              <li>Tasks need to be filled by the Internship Supervisor.</li>
               <li>Only task description fields are editable.</li>
               <li>All tasks should cover a minimum of three outcomes.</li>
             </ol>
@@ -343,11 +513,10 @@ const A1InternshipRequestForm = () => {
             <thead>
               <tr>
                 <th style={{ width: "20%" }}>Task</th>
-                {outcomeLabels.map((label, i) => (
-                  <th key={label} style={{ width: "13.33%" }}>
-                    {label}
-                    <br />
-                    <small>({outcomeDescriptions[i]})</small>
+                {outcomeLabels.map((label, j) => (
+                  <th key={`label-${j}`} style={{ width: "13.33%" }}>
+                    {label}<br />
+                    <small>({outcomeDescriptions[j]})</small>
                   </th>
                 ))}
               </tr>
@@ -362,17 +531,15 @@ const A1InternshipRequestForm = () => {
                       value={task.description}
                       onChange={(e) => handleTaskChange(i, e.target.value)}
                       style={{ width: "100%", padding: "4px", boxSizing: "border-box" }}
+                      disabled={!isFieldEditable("task")}
                     />
                   </td>
-                  {outcomeLabels.map((_, j) => (
-                    <td key={j}>
-                      <input type="text" value="" readOnly style={{ width: "100%", padding: "4px", boxSizing: "border-box" }} />
-                    </td>
-                  ))}
+                  {outcomeLabels.map((label, j) => renderOutcomeCell(task, label, `${i}-${j}`))}
                 </tr>
               ))}
             </tbody>
           </table>
+          {errors.tasks && <div style={{ color: "red", fontSize: "0.8rem", marginTop: "5px" }}>{errors.tasks}</div>}
         </div>
 
         <h3 className="section-title">Signatures:</h3>
@@ -381,49 +548,90 @@ const A1InternshipRequestForm = () => {
             <tr>
               <td className="signature-cell" colSpan="3">
                 Internee Signature<span className="required-asterisk">*</span>:<br />
-                <input
-                  type="text"
-                  id="interneeSignature"
-                  value={formData.interneeSignature}
-                  onChange={handleInputChange}
-                  placeholder="Enter your full name"
-                  style={{ width: "100%", padding: "4px", boxSizing: "border-box" }}
-                />
+                <div className="signature-field">
+                  <SignatureInput 
+                    id="interneeSignature"
+                    value={formData.interneeSignature}
+                    onChange={handleInputChange}
+                    disabled={!isFieldEditable("interneeSignature")}
+                    placeholder="Enter your full name"
+                  />
+                </div>
+                {errors.interneeSignature && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.interneeSignature}</div>}
               </td>
               <td className="signature-cell" colSpan="3">
-                Internship Advisor Signature:<br />
-                <input
-                  type="text"
-                  id="advisorSignature"
-                  value={formData.advisorSignature}
-                  onChange={handleInputChange}
-                  placeholder="Enter your full name"
-                  style={{ width: "100%", padding: "4px", boxSizing: "border-box" }}
-                />
+                Internship Supervisor Signature:<br />
+                <div className="signature-field">
+                  <SignatureInput 
+                    id="advisorSignature"
+                    value={formData.advisorSignature}
+                    onChange={handleInputChange}
+                    disabled={!isFieldEditable("advisorSignature")}
+                    placeholder="Enter your full name"
+                  />
+                </div>
+                {errors.advisorSignature && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.advisorSignature}</div>}
               </td>
               <td className="signature-cell" colSpan="2">
                 Internship Coordinator Approval:<br />
-                <input
-                  type="text"
-                  id="coordinatorApproval"
-                  value={formData.coordinatorApproval}
+                <div className="signature-field">
+                  <SignatureInput 
+                    id="coordinatorApproval"
+                    value={formData.coordinatorApproval}
+                    onChange={handleInputChange}
+                    disabled={!isFieldEditable("coordinatorApproval")}
+                    placeholder="Enter your full name"
+                  />
+                </div>
+                {errors.coordinatorApproval && <div style={{ color: "red", fontSize: "0.8rem" }}>{errors.coordinatorApproval}</div>}
+              </td>
+            </tr>
+            {/* <tr>
+              <td colSpan="3">
+                <label htmlFor="supervisorComments" style={{ fontWeight: "bold" }}>Supervisor Comments:</label><br />
+                <textarea
+                  id="supervisorComments"
+                  value={formData.supervisorComments}
                   onChange={handleInputChange}
-                  placeholder="Enter your full name"
-                  style={{ width: "100%", padding: "4px", boxSizing: "border-box" }}
+                  placeholder="Enter any comments or feedback for this internship request"
+                  style={{ 
+                    width: "100%", 
+                    padding: "8px", 
+                    boxSizing: "border-box",
+                    minHeight: "80px",
+                    resize: "vertical",
+                    marginTop: "5px",
+                    border: "1px solid #ccc",
+                    borderRadius: "3px"
+                  }}
+                  disabled={!isFieldEditable("supervisorComments")}
                 />
               </td>
-            </tr>
+              <td colSpan="5">
+                <label htmlFor="coordinatorComments" style={{ fontWeight: "bold" }}>Coordinator Comments:</label><br />
+                <textarea
+                  id="coordinatorComments"
+                  value={formData.coordinatorComments}
+                  onChange={handleInputChange}
+                  placeholder="Enter any comments or feedback regarding this internship request"
+                  style={{ 
+                    width: "100%",
+                    padding: "8px", 
+                    boxSizing: "border-box",
+                    minHeight: "80px",
+                    resize: "vertical",
+                    marginTop: "5px",
+                    border: "1px solid #ccc",
+                    borderRadius: "3px"
+                  }}
+                  disabled={!isFieldEditable("coordinatorComments")}
+                />
+              </td>
+            </tr> */}
           </tbody>
         </table>
 
-        {Object.keys(errors).length > 0 && (
-          <div>
-            <div className="error-summary">Please correct the following errors:</div>
-            {Object.values(errors).map((err, i) => (
-              <div key={i} className="error-msg">{err}</div>
-            ))}
-          </div>
-        )}
+        {errors.submit && <div className="error-msg">{errors.submit}</div>}
 
         <div className="submit-section">
           <button type="submit">Submit Form</button>
diff --git a/client/src/pages/SupervisorDashboard.js b/client/src/pages/SupervisorDashboard.js
index 18cc054d..077cdeef 100644
--- a/client/src/pages/SupervisorDashboard.js
+++ b/client/src/pages/SupervisorDashboard.js
@@ -1,3 +1,4 @@
+
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import "../styles/SupervisorDashboard.css";
@@ -12,16 +13,31 @@ const SupervisorDashboard = () => {
   useEffect(() => {
     const fetchRequests = async () => {
       try {
-        const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/submissions/pending`);
+        const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/form/internshiprequests`);
+        console.log("Fetched internship requests:", res.data); // debug log
+
+        const formatted = res.data
+          .map(item => ({
+            _id: item._id,
+            name: item.student?.userName || item.student?.name || "N/A",
+            student_id: item.student?._id || item._id,
 
-        setRequests(res.data);
+            form_type: "A1",
+            createdAt: item.createdAt,
+            supervisor_status: item.supervisor_status || "pending",
+            fullForm: item
+          }))
+          .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt)); // oldest first
+
+        setRequests(formatted);
         setLoading(false);
       } catch (err) {
-        console.error("Error fetching requests:", err);
-        setMessage("Error fetching requests.");
+        console.error("Error fetching Internship A1 forms:", err);
+        setMessage("Error fetching Internship A1 forms.");
         setLoading(false);
       }
     };
+
     fetchRequests();
   }, []);
 
@@ -30,7 +46,10 @@ const SupervisorDashboard = () => {
     if (!confirmed) return;
 
     try {
-      const res =  await axios.post(`${process.env.REACT_APP_API_URL}/api/submissions/${id}/${action}`, { comment });
+      const res = await axios.post(
+        `${process.env.REACT_APP_API_URL}/api/form/internshiprequests/${id}/${action}`,
+        { comment }
+      );
 
       setMessage(res.data.message || `${action} successful`);
       setRequests(prev => prev.filter(req => req._id !== id));
@@ -43,63 +62,52 @@ const SupervisorDashboard = () => {
 
   const openFormView = (form) => setSelectedForm(form);
   const closeFormView = () => setSelectedForm(null);
-
-  const formatDate = (dateStr) => new Date(dateStr).toLocaleDateString();
-
-  const sortedRequests = [...requests].sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
-
-  let content;
-
-  if (loading) {
-    content = <p>Loading...</p>;
-  }
-  else if (sortedRequests.length === 0) {
-    content = (
-      <div className="empty-message-container">
-        <div className="empty-message">No pending approvals.</div>
-      </div>
-    );
-  }
-  else {
-    content = (
-      <table className="dashboard-table">
-        <thead>
-          <tr>
-            <th>Student Name</th>
-            <th>Student ID</th>
-            <th>Form Type</th>
-            <th>Date Submitted</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {sortedRequests.map((req) => (
-            <tr key={req._id}>
-              <td>{req.name}</td>
-              <td>
-                <button className="link-button" onClick={() => openFormView(req)}>
-                  {req.student_id}
-                </button>
-              </td>
-              <td>{req.form_type}</td>
-              <td>{formatDate(req.createdAt)}</td>
-              <td>
-                <span className={`status-badge ${req.supervisor_status}`}>
-                  {req.supervisor_status}
-                </span>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  }
+  const formatDate = (date) => new Date(date).toLocaleDateString();
 
   return (
     <div className="dashboard-container">
       <h2>Supervisor Dashboard</h2>
       {message && <p className="status-msg">{message}</p>}
-      {content}
+
+      {loading ? (
+        <p>Loading...</p>
+      ) : requests.length === 0 ? (
+        <div className="empty-message-container">
+          <div className="empty-message">No pending approvals.</div>
+        </div>
+      ) : (
+        <table className="dashboard-table">
+          <thead>
+            <tr>
+              <th>Student Name</th>
+              <th>Student ID</th>
+              <th>Form Type</th>
+              <th>Date Submitted</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {requests.map((req) => (
+              <tr key={req._id}>
+                <td>{req.name}</td>
+                <td>
+                  <button className="link-button" onClick={() => openFormView(req.fullForm)}>
+                    {req.student_id}
+                  </button>
+                </td>
+                <td>{req.form_type}</td>
+                <td>{formatDate(req.createdAt)}</td>
+                <td>
+                  <span className={`status-badge ${req.supervisor_status}`}>
+                    {req.supervisor_status}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+
       {selectedForm && (
         <ViewFormModal
           formData={selectedForm}
@@ -111,4 +119,4 @@ const SupervisorDashboard = () => {
   );
 };
 
-export default SupervisorDashboard;
\ No newline at end of file
+export default SupervisorDashboard;
diff --git a/client/src/pages/ViewFormModal.js b/client/src/pages/ViewFormModal.js
index e913db19..55cc551e 100644
--- a/client/src/pages/ViewFormModal.js
+++ b/client/src/pages/ViewFormModal.js
@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import "../styles/SupervisorDashboard.css";
 
 const ViewFormModal = ({ formData, onClose, onAction }) => {
-  const form = typeof formData.details === "string" ? JSON.parse(formData.details) : formData.details;
   const [comment, setComment] = useState("");
+  const [signature, setSignature] = useState("");
   const [error, setError] = useState("");
 
   const handleDecision = (action) => {
@@ -11,34 +11,75 @@ const ViewFormModal = ({ formData, onClose, onAction }) => {
       setError("Comment is required before taking action.");
       return;
     }
-    setError("");  // clear error
-    onAction(formData._id, action, comment);
+    if (!signature.trim()) {
+      setError("Signature is required before approval/rejection.");
+      return;
+    }
+
+    const payloadComment = `${comment.trim()} | Supervisor Signature: ${signature.trim()}`;
+    setError("");
+    onAction(formData._id, action, payloadComment);
   };
 
   return (
     <div className="modal-overlay">
       <div className="modal-box">
-        <h2>Form: {formData.form_type}</h2>
-        <p><strong>Student:</strong> {formData.name}</p>
+        <h2>A.1 Internship Request Form</h2>
 
-        {form.tasks && (
-          <div>
-            <strong>Tasks:</strong>
-            <ul>{form.tasks.map((task, i) => <li key={i}>{task}</li>)}</ul>
-          </div>
-        )}
+        <table className="modal-details-table">
+          <tbody>
+            <tr>
+              <td><strong>Student Name:</strong> {formData.interneeName}</td>
+              <td><strong>Sooner ID:</strong> {formData.soonerId}</td>
+            </tr>
+            <tr>
+              <td><strong>Email:</strong> {formData.interneeEmail}</td>
+              <td><strong>Phone:</strong> {formData.phone}</td>
+            </tr>
+            <tr>
+              <td><strong>Workplace Name:</strong> {formData.workplaceName}</td>
+              <td><strong>Website:</strong> {formData.website}</td>
+            </tr>
+            <tr>
+              <td><strong>Advisor Name:</strong> {formData.advisorName}</td>
+              <td><strong>Advisor Email:</strong> {formData.advisorEmail}</td>
+            </tr>
+            <tr>
+              <td><strong>Credit Hours:</strong> {formData.creditHours}</td>
+              <td>
+                <strong>Start Date:</strong> {new Date(formData.startDate).toLocaleDateString()}
+                <br />
+                <strong>End Date:</strong> {new Date(formData.endDate).toLocaleDateString()}
+              </td>
+            </tr>
+          </tbody>
+        </table>
 
-        {form.outcomes && (
-          <div>
-            <strong>Outcomes:</strong>
-            <ul>{form.outcomes.map((o, i) => <li key={i}>{o}</li>)}</ul>
-          </div>
-        )}
-
-        {form.week && <p><strong>Week:</strong> {form.week}</p>}
-        {form.lessonsLearned && <p><strong>Lessons Learned:</strong> {form.lessonsLearned}</p>}
+        <div style={{ marginTop: "15px" }}>
+          <strong>Task Descriptions & Outcomes:</strong>
+          <ul>
+            {formData.tasks?.map((task, index) => (
+              <li key={index} style={{ marginBottom: "10px" }}>
+                <strong>Task {index + 1}:</strong> {task.description}
+                <br />
+                <strong>Outcomes:</strong> {task.outcomes?.join(", ") || "N/A"}
+              </li>
+            ))}
+          </ul>
+        </div>
 
         <div>
+          <label><strong>Supervisor Signature:</strong></label>
+          <input
+            type="text"
+            value={signature}
+            onChange={(e) => setSignature(e.target.value)}
+            placeholder="Enter your full name"
+            style={{ width: "100%", padding: "6px", marginTop: "5px", borderRadius: "4px" }}
+          />
+        </div>
+
+        <div style={{ marginTop: "10px" }}>
           <label><strong>Comment:</strong></label>
           <textarea
             value={comment}
@@ -47,10 +88,11 @@ const ViewFormModal = ({ formData, onClose, onAction }) => {
             rows={4}
             style={{ width: "100%", marginTop: "5px", borderRadius: "4px", padding: "8px" }}
           />
-          {error && <p style={{ color: "red", marginTop: "5px" }}>{error}</p>}
         </div>
 
-        <div style={{ marginTop: "15px", display: "flex", gap: "10px", justifyContent: "center" }}>
+        {error && <p style={{ color: "red", marginTop: "5px" }}>{error}</p>}
+
+        <div style={{ display: "flex", justifyContent: "center", gap: "10px", marginTop: "15px" }}>
           <button className="approve" onClick={() => handleDecision("approve")}>Approve</button>
           <button className="reject" onClick={() => handleDecision("reject")}>Reject</button>
         </div>
@@ -63,4 +105,4 @@ const ViewFormModal = ({ formData, onClose, onAction }) => {
   );
 };
 
-export default ViewFormModal;
+export default ViewFormModal;
\ No newline at end of file
diff --git a/client/src/styles/A1InternshipRequestForm.css b/client/src/styles/A1InternshipRequestForm.css
index c35ea522..b53a78b9 100644
--- a/client/src/styles/A1InternshipRequestForm.css
+++ b/client/src/styles/A1InternshipRequestForm.css
@@ -1,116 +1,193 @@
+/* Layout Container */
 .form-container {
-    font-family: 'Roboto', sans-serif;
-    margin: 30px;
-    background-color: #f5f5f5;
-    padding: 20px;
-}
-
-h2 {
+    max-width: 1100px;
+    margin: 30px auto;
+    padding: 30px;
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
+    font-family: 'Segoe UI', sans-serif;
+  }
+  
+  /* Headings */
+  .form-container h2 {
     text-align: center;
-    color: #841617;
-}
-
-.section-title {
-    font-size: 16px;
-    color: #841617;
+    color: #333;
+    margin-bottom: 25px;
+  }
+  
+  .section-title {
     margin-top: 30px;
     margin-bottom: 10px;
+    font-size: 1.2rem;
     font-weight: bold;
-}
-
-table {
+    color: #444;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 6px;
+  }
+  
+  /* Table Styling */
+  table {
     width: 100%;
     border-collapse: collapse;
-    margin-bottom: 20px;
-    background-color: #fff;
-}
-
-th, td {
-    padding: 8px; /* Adjusted padding */
-    border: 1px solid #999;
+    margin-bottom: 25px;
+  }
+  
+  table th, table td {
+    padding: 10px;
     vertical-align: top;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="date"] {
-    width: 95%;
-    padding: 6px;
-    font-size: 13px;
-    border: 1px solid #999;
-    border-radius: 3px;
-}
-
-input[type="checkbox"] {
+  }
+  
+  table th {
+    background-color: #f8f9fa;
+    text-align: left;
+    font-weight: 600;
+  }
+  
+  /* Inputs */
+  input[type="text"],
+  input[type="email"],
+  input[type="date"],
+  select,
+  textarea {
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    box-sizing: border-box;
+    font-size: 0.95rem;
+    transition: border-color 0.3s;
+  }
+  
+  input:focus,
+  select:focus,
+  textarea:focus {
+    border-color: #4a90e2;
+    outline: none;
+  }
+  
+  /* Dropdowns */
+  select {
     appearance: none;
-    width: 16px;
-    height: 16px;
-    border: 2px solid #333;
-    background-color: white;
+    background-color: #fff;
+    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+    background-repeat: no-repeat;
+    background-position-x: 95%;
+    background-position-y: center;
+  }
+  
+  /* Error Messages */
+  .error-text,
+  .error-msg {
+    color: #d93025;
+    font-size: 0.85rem;
+    margin-top: 5px;
+  }
+  
+  /* Success Message */
+  .success-msg {
+    color: #0f9d58;
+    font-size: 1rem;
+    margin-top: 20px;
+    text-align: center;
+  }
+  
+  /* Signature Section */
+  .signature-input-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .signature-font-options {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    z-index: 10;
+    max-height: 180px;
+    overflow-y: auto;
+    width: 100%;
+    top: 100%;
+    left: 0;
+    border-radius: 4px;
+    margin-top: 2px;
+  }
+  
+  .signature-font-preview-header {
+    font-size: 0.85rem;
+    padding: 5px 10px;
+    background-color: #f0f0f0;
+    font-weight: bold;
+  }
+  
+  .signature-font-preview {
+    padding: 6px 10px;
     cursor: pointer;
-}
-
-input[type="checkbox"]:checked {
-    background-color: #841617;
-}
-
-.signature-cell {
+    transition: background 0.2s ease;
+  }
+  
+  .signature-font-preview:hover {
+    background-color: #e6f2ff;
+  }
+  
+  .signature-preview {
+    margin-top: 5px;
+    font-size: 1.1rem;
+    padding: 6px 10px;
+    border: 1px dashed #aaa;
+    border-radius: 4px;
+    background-color: #fafafa;
+  }
+  
+  /* Date Picker Customization */
+  .custom-date-picker {
+    width: 100%;
+    padding: 8px 10px;
+    font-size: 0.95rem;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    box-sizing: border-box;
+  }
+  
+  /* Buttons */
+  .submit-section {
     text-align: center;
-    background-color: #841617;
-    color: #fff;
-}
-
-.signature-cell input {
-    margin-top: 6px;
-    padding: 6px;
-    width: 90%;
-}
-
-span.description {
-    font-size: 11.5px;
+    margin-top: 30px;
+  }
+  
+  button[type="submit"] {
+    background-color: #007bff;
     color: #fff;
-    display: block;
-    margin-top: 4px;
-}
-
-ol {
-    padding-left: 18px;
-    font-size: 13px;
-}
-
-.submit-section {
-    text-align: center;
-    margin-top: 20px;
-}
-
-button {
-    padding: 10px 25px;
-    background-color: #841617;
-    color: white;
+    padding: 10px 22px;
+    font-size: 1rem;
     border: none;
-    font-size: 14px;
-    border-radius: 5px;
+    border-radius: 6px;
     cursor: pointer;
-}
-
-button:hover {
-    background-color: #6e1212;
-}
-
-.success-msg {
-    color: green;
-    font-weight: bold;
-    text-align: center;
-    margin-top: 10px;
-}
-
-.error-msg {
+    transition: background 0.3s ease;
+  }
+  
+  button[type="submit"]:hover {
+    background-color: #0056b3;
+  }
+  .font-dancing-script {
+    font-family: 'Dancing Script', cursive;
+  }
+  .font-great-vibes {
+    font-family: 'Great Vibes', cursive;
+  }
+  .font-pacifico {
+    font-family: 'Pacifico', cursive;
+  }
+  .font-satisfy {
+    font-family: 'Satisfy', cursive;
+  }
+  .font-caveat {
+    font-family: 'Caveat', cursive;
+  }
+  
+  /* Asterisk */
+  .required-asterisk {
     color: red;
-    font-weight: bold;
-    text-align: center;
-    margin-top: 10px;
-}
-
-.required-asterisk {
-    color: #ff6666; /* Light red */
-}
+    margin-left: 2px;
+  }
+  
\ No newline at end of file
diff --git a/server/controllers/approvalController.js b/server/controllers/approvalController.js
index 32582466..77149b68 100644
--- a/server/controllers/approvalController.js
+++ b/server/controllers/approvalController.js
@@ -55,7 +55,7 @@ exports.rejectSubmission = async (req, res) => {
 exports.getCoordinatorRequests = async (req, res) => {
   try {
     const requests = await InternshipRequest.find({
-      status: "submitted",
+      coordinator_status: "pending",
     }).populate("student", "userName email");
     res.status(200).json(requests);
   } catch (err) {
@@ -80,7 +80,7 @@ exports.coordinatorApproveRequest = async (req, res) => {
   try {
     const request = await InternshipRequest.findByIdAndUpdate(
       req.params.id,
-      { status: "approved" },
+      { coordinator_status: "approved" },
       { new: true }
     );
 
@@ -105,7 +105,7 @@ exports.coordinatorRejectRequest = async (req, res) => {
   try {
     const request = await InternshipRequest.findByIdAndUpdate(
       req.params.id,
-      { status: "rejected" },
+      { coordinator_status: "rejected" },
       { new: true }
     );
 
diff --git a/server/models/InternshipRequest.js b/server/models/InternshipRequest.js
index 3732f04d..14b7bdc4 100644
--- a/server/models/InternshipRequest.js
+++ b/server/models/InternshipRequest.js
@@ -13,10 +13,10 @@ const Task = new mongoose.Schema({
     }
 });
 const formA1 = new mongoose.Schema({
-    student: { // get student's name, email, id from User
+    student: { 
         type: ObjectId,
         required: true,
-        ref: 'User'
+        ref: 'UserTokenRequest'
     },
     workplace: {
         name: {
@@ -51,11 +51,11 @@ const formA1 = new mongoose.Schema({
         type: [Task],
         required: true
     },
-    status: {
-        type: String,
-        required: true,
-        enum: ['draft', 'submitted','pending manual review' ,'approved']
-    },
+    // status: {
+    //     type: String,
+    //     required: true,
+    //     enum: ['draft', 'submitted','pending manual review' ,'approved']
+    // },
     approvals: {
         type: [String],
         enum: ['advisor', 'coordinator']
@@ -63,7 +63,16 @@ const formA1 = new mongoose.Schema({
     reminders: [Date],
     // requiredHours is an easily derived attribute
     // TODO needs to be a virtual getter that checks this student's WeeklyReports
-    completedHours: Number
+    completedHours: Number,
+
+    supervisor_status: {
+        type: String,
+        default: "pending"
+      },
+      coordinator_status: {
+        type: String,
+        default: "pending"
+      }
 }, { timestamps: true });
 formA1.virtual("requiredHours").get(function() {
     return this.creditHours * 60;
diff --git a/server/routes/formRoutes.js b/server/routes/formRoutes.js
index c80f3ebe..1da5ffca 100644
--- a/server/routes/formRoutes.js
+++ b/server/routes/formRoutes.js
@@ -1,12 +1,36 @@
-const express = require('express');
+const express = require("express");
 const router = express.Router();
-const { insertFormData } = require('../services/insertData');
+const InternshipRequest = require("../models/InternshipRequest");
+const { insertFormData } = require("../services/insertData");
+const {
+  getPendingSubmissions,
+  approveSubmission,
+  rejectSubmission
+} = require("../controllers/approvalController");
 
-let status = '';
+router.post("/internshiprequests/:id/approve", approveSubmission);
+router.post("/internshiprequests/:id/reject", rejectSubmission);
+
+// UPDATED: GET route to fetch internship requests pending supervisor action
+router.get("/internshiprequests", async (req, res) => {
+  try {
+    const requests = await InternshipRequest.find({
+      supervisor_status: "pending",
+      // approvals: "advisor", // advisor has approved
+      supervisor_status: { $in: [null, "pending"] } // not yet reviewed by supervisor
+    }).sort({ createdAt: 1 })  .populate("student", "userName")  // oldest first
+
+    res.status(200).json(requests);
+  } catch (err) {
+    console.error("Error fetching internship requests:", err);
+    res.status(500).json({ message: "Server error while fetching internship requests" });
+  }
+});
 
 // Validate required fields
 function validateFormData(formData) {
   const requiredFields = [
+    'soonerId',
     'workplaceName',
     'website',
     'phone',
@@ -25,6 +49,9 @@ function validateFormData(formData) {
     }
   }
 
+  if (!/^[0-9]{9}$/.test(formData.soonerId))
+    return `Sooner ID must be a 9-digit number, not ${formData.soonerId}`;
+
   if (!Array.isArray(formData.tasks) || formData.tasks.length === 0) {
     return 'Tasks must be a non-empty array';
   }
@@ -41,7 +68,7 @@ function validateFormData(formData) {
 
   const tasks = formData.tasks;
   console.log(tasks);
-  if (tasks.filter((task) => task.description).length < 3)
+  if (tasks.filter((task) => task.description && task.description.trim() !== '').length < 3)
     return 'At least 3 tasks must be provided';
   const uniqueOutcomes = new Set();
   tasks.forEach((task) => {
@@ -53,6 +80,7 @@ function validateFormData(formData) {
   return null;
 }
 
+
 router.post('/submit', async (req, res) => {
   const formData = req.body;
   const validationError = validateFormData(formData);
@@ -62,11 +90,11 @@ router.post('/submit', async (req, res) => {
 
   try {
     await insertFormData(formData);
-    res.status(200).json({ message: 'Form received and handled!', status, manual: formData.status !== 'submitted'});
+    res.status(200).json({ message: 'Form received and handled!', manual: formData.status !== 'submitted'});
   } catch (error) {
     console.error('Error handling form data:', error);
     res.status(500).json({ message: 'Something went wrong' });
   }
 });
 
-module.exports = router;
+module.exports = router;
\ No newline at end of file
diff --git a/server/services/insertData.js b/server/services/insertData.js
index 7668f7c6..27eded26 100644
--- a/server/services/insertData.js
+++ b/server/services/insertData.js
@@ -7,6 +7,17 @@ async function insertFormData(formData) {
     console.log("Received Form Data:\n", JSON.stringify(formData, null, 2));
 
     // Assumes global mongoose connection is already established elsewhere in app
+    if (formData.status === "submitted") {
+      // if tasks are aligned , form will be sent to the supervisor. 
+      formData.supervisor_status="pending" 
+      formData.coordinator_status="not submitted"  //TBD
+      console.log("Submission sent to Supervisor Dashboard.");
+    } else if (formData.status === "pending manual review") {
+      //if tasks are not aligned, form will be sent to coordinator. coordinator approves -> coordinator should forward to supervisor for further approval
+      formData.coordinator_status="pending"
+      formData.supervisor_status="not submitted"
+      console.log("Task not aligned with CS Outcomes. Sent to coordinator for manual review.");
+    }
 
     const formattedData = {
       student: new mongoose.Types.ObjectId(), // TODO: Replace with actual signed-in student ID
@@ -28,8 +39,11 @@ async function insertFormData(formData) {
         description: task.description,
         outcomes: task.outcomes,
       })).filter(task => task.description.trim() !== ''), // remove empty tasks
-      status: "submitted", // Default status — adjust as needed
-      status: formData.status, // Default status — adjust as needed
+      // status: "submitted", // Default status — adjust as needed
+      // status: formData.status, // Default status — adjust as needed
+
+      supervisor_status: formData.supervisor_status ,//function based on if tasks are aligned/not aligned with outcomes
+      coordinator_status: formData.coordinator_status,
       approvals: ["advisor", "coordinator"], // TODO: Might be dynamic later
       reminders: [], // Placeholder for future reminder logic
       completedHours: parseInt(formData.creditHours) * 60, // Assuming 1 credit = 60 hours
@@ -37,24 +51,7 @@ async function insertFormData(formData) {
 
     const savedForm = await InternshipRequest.create(formattedData);
     console.log("Form saved successfully with ID:", savedForm._id);
-
-    if (formData.status === "submitted") {
-      // const submission = {
-      //   name:`Internship at ${formData.workplaceName}`,
-      //   student_name: formData.interneeName,
-      //   details: formData.website,  
-      //   supervisor_status: "pending",
-      //   coordinator_status: "pending",
-      // };
-      // await Submission.create(submission);
-      console.log("Submission sent to Supervisor Dashboard.");
-    } else if (formData.status === "pending manual review") {
-      // const instance={
-      //   // group a schema attributes
-      // };
-      // await groupaschema.create(instance) // group A schema
-      console.log("Task not aligned with CS Outcomes. Sent to coordinator for manual review.");
-    }
+    console.log("saved form",savedForm)
     return savedForm;
 
   } catch (error) {
@@ -65,4 +62,4 @@ async function insertFormData(formData) {
 
 module.exports = {
   insertFormData,
-};
+};
\ No newline at end of file