diff --git a/apps/Frontend/src/components/staffs/staff-form.tsx b/apps/Frontend/src/components/staffs/staff-form.tsx
index afe8dbb..4bea0f9 100644
--- a/apps/Frontend/src/components/staffs/staff-form.tsx
+++ b/apps/Frontend/src/components/staffs/staff-form.tsx
@@ -11,18 +11,28 @@ interface StaffFormProps {
   isLoading?: boolean;
 }
 
-export function StaffForm({ initialData, onSubmit, onCancel, isLoading }: StaffFormProps) {
-  const [name, setName] = useState(initialData?.name || "");
-  const [email, setEmail] = useState(initialData?.email || "");
-  const [role, setRole] = useState(initialData?.role || "Staff");
-  const [phone, setPhone] = useState(initialData?.phone || "");
+export function StaffForm({
+  initialData,
+  onSubmit,
+  onCancel,
+  isLoading,
+}: StaffFormProps) {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState("Staff");
+  const [phone, setPhone] = useState("");
 
+  const [hasTypedRole, setHasTypedRole] = useState(false);
+
+  // Set initial values once on mount
   useEffect(() => {
-    setName(initialData?.name || "");
-    setEmail(initialData?.email || "");
-    setRole(initialData?.role || "Staff");
-    setPhone(initialData?.phone || "");
-  }, [initialData]);
+    if (initialData) {
+      if (initialData.name) setName(initialData.name);
+      if (initialData.email) setEmail(initialData.email);
+      if (initialData.role) setRole(initialData.role);
+      if (initialData.phone) setPhone(initialData.phone);
+    }
+  }, []); // run once only
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -30,13 +40,21 @@ export function StaffForm({ initialData, onSubmit, onCancel, isLoading }: StaffF
       alert("Name is required");
       return;
     }
-    onSubmit({ name, email: email || undefined, role, phone: phone || undefined });
+
+    onSubmit({
+      name: name.trim(),
+      email: email.trim() || undefined,
+      role: role.trim(),
+      phone: phone.trim() || undefined,
+    });
   };
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       <div>
-        <label className="block text-sm font-medium text-gray-700">Name *</label>
+        <label className="block text-sm font-medium text-gray-700">
+          Name *
+        </label>
         <input
           type="text"
           className="mt-1 block w-full border rounded p-2"
@@ -46,6 +64,7 @@ export function StaffForm({ initialData, onSubmit, onCancel, isLoading }: StaffF
           disabled={isLoading}
         />
       </div>
+
       <div>
         <label className="block text-sm font-medium text-gray-700">Email</label>
         <input
@@ -56,17 +75,29 @@ export function StaffForm({ initialData, onSubmit, onCancel, isLoading }: StaffF
           disabled={isLoading}
         />
       </div>
+
       <div>
-        <label className="block text-sm font-medium text-gray-700">Role *</label>
+        <label className="block text-sm font-medium text-gray-700">
+          Role *
+        </label>
         <input
           type="text"
           className="mt-1 block w-full border rounded p-2"
           value={role}
-          onChange={(e) => setRole(e.target.value)}
+          onChange={(e) => {
+            setHasTypedRole(true);
+            setRole(e.target.value);
+          }}
+          onFocus={() => {
+            if (!hasTypedRole && role === "Staff") {
+              setRole("");
+            }
+          }}
           required
           disabled={isLoading}
         />
       </div>
+
       <div>
         <label className="block text-sm font-medium text-gray-700">Phone</label>
         <input
@@ -77,6 +108,7 @@ export function StaffForm({ initialData, onSubmit, onCancel, isLoading }: StaffF
           disabled={isLoading}
         />
       </div>
+
       <div className="flex justify-end space-x-2">
         <button
           type="button"
diff --git a/apps/Frontend/src/pages/settings-page.tsx b/apps/Frontend/src/pages/settings-page.tsx
index 191d385..601ffe1 100644
--- a/apps/Frontend/src/pages/settings-page.tsx
+++ b/apps/Frontend/src/pages/settings-page.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { TopAppBar } from "@/components/layout/top-app-bar";
 import { Sidebar } from "@/components/layout/sidebar";
@@ -8,13 +8,19 @@ import { Card, CardContent } from "@/components/ui/card";
 import { StaffUncheckedCreateInputObjectSchema } from "@repo/db/shared/schemas";
 import { z } from "zod";
 import { apiRequest, queryClient } from "@/lib/queryClient";
+import { StaffForm } from "@/components/staffs/staff-form";
 
+// Correctly infer Staff type from zod schema
 type Staff = z.infer<typeof StaffUncheckedCreateInputObjectSchema>;
 
 export default function SettingsPage() {
   const { toast } = useToast();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
+  // Modal and editing staff state
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingStaff, setEditingStaff] = useState<Staff | null>(null);
+
   const toggleMobileMenu = () => setIsMobileMenuOpen((prev) => !prev);
 
   // Fetch staff data
@@ -35,8 +41,12 @@ export default function SettingsPage() {
     staleTime: 1000 * 60 * 5, // 5 minutes cache
   });
 
-  // Add Staff Mutation
-  const addStaffMutation = useMutation({
+  // Add Staff mutation
+  const addStaffMutate = useMutation<
+    Staff, // Return type
+    Error, // Error type
+    Omit<Staff, "id" | "createdAt"> // Variables
+  >({
     mutationFn: async (newStaff: Omit<Staff, "id" | "createdAt">) => {
       const res = await apiRequest("POST", "/api/staffs/", newStaff);
       if (!res.ok) {
@@ -62,8 +72,12 @@ export default function SettingsPage() {
     },
   });
 
-  // Update Staff Mutation
-  const updateStaffMutation = useMutation({
+  // Update Staff mutation
+  const updateStaffMutate = useMutation<
+    Staff,
+    Error,
+    { id: number; updatedFields: Partial<Staff> }
+  >({
     mutationFn: async ({
       id,
       updatedFields,
@@ -95,8 +109,8 @@ export default function SettingsPage() {
     },
   });
 
-  // Delete Staff Mutation
-  const deleteStaffMutation = useMutation({
+  // Delete Staff mutation
+  const deleteStaffMutation = useMutation<number, Error, number>({
     mutationFn: async (id: number) => {
       const res = await apiRequest("DELETE", `/api/staffs/${id}`);
       if (!res.ok) {
@@ -122,69 +136,117 @@ export default function SettingsPage() {
     },
   });
 
-  // Handlers for prompts and mutations
+  // Extract mutation states for modal control and loading
+
+  const isAdding = addStaffMutate.status === "pending";
+  const isAddSuccess = addStaffMutate.status === "success";
+
+  const isUpdating = updateStaffMutate.status === "pending";
+  const isUpdateSuccess = updateStaffMutate.status === "success";
+
+  // Open Add modal
   const openAddStaffModal = () => {
-    const name = prompt("Enter staff name:");
-    if (!name) return;
-    const email = prompt("Enter staff email (optional):") || undefined;
-    const role = prompt("Enter staff role:") || "Staff";
-    const phone = prompt("Enter staff phone (optional):") || undefined;
-    addStaffMutation.mutate({ name, email, role, phone });
+    setEditingStaff(null);
+    setModalOpen(true);
   };
 
+  // Open Edit modal
   const openEditStaffModal = (staff: Staff) => {
-    if (typeof staff.id !== "number") {
-      toast({
-        title: "Error",
-        description: "Staff ID is missing",
-        variant: "destructive",
-      });
-      return;
-    }
-    const name = prompt("Edit staff name:", staff.name);
-    if (!name) return;
-    const email = prompt("Edit staff email:", staff.email || "") || undefined;
-    const role = prompt("Edit staff role:", staff.role || "Staff") || "Staff";
-    const phone = prompt("Edit staff phone:", staff.phone || "") || undefined;
-    updateStaffMutation.mutate({
-      id: staff.id,
-      updatedFields: { name, email, role, phone },
-    });
+    setEditingStaff(staff);
+    setModalOpen(true);
   };
 
+  // Handle form submit for Add or Edit
+  const handleFormSubmit = (formData: Omit<Staff, "id" | "createdAt">) => {
+    if (editingStaff) {
+      // Editing existing staff
+      if (editingStaff.id === undefined) {
+        toast({
+          title: "Error",
+          description: "Staff ID is missing",
+          variant: "destructive",
+        });
+        return;
+      }
+      updateStaffMutate.mutate({
+        id: editingStaff.id,
+        updatedFields: formData,
+      });
+    } else {
+      addStaffMutate.mutate(formData);
+    }
+  };
+
+  const handleModalCancel = () => {
+    setModalOpen(false);
+  };
+
+  // Close modal on successful add/update
+  useEffect(() => {
+    if (isAddSuccess || isUpdateSuccess) {
+      setModalOpen(false);
+    }
+  }, [isAddSuccess, isUpdateSuccess]);
+
+  // Delete staff
   const handleDeleteStaff = (id: number) => {
     if (confirm("Are you sure you want to delete this staff member?")) {
       deleteStaffMutation.mutate(id);
     }
   };
 
+  // View staff handler (just an alert for now)
   const handleViewStaff = (staff: Staff) =>
-    alert(`Viewing staff member:\n${staff.name} (${staff.email || "No email"})`);
+    alert(
+      `Viewing staff member:\n${staff.name} (${staff.email || "No email"})`
+    );
 
   return (
     <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar isMobileOpen={isMobileMenuOpen} setIsMobileOpen={setIsMobileMenuOpen} />
+      <Sidebar
+        isMobileOpen={isMobileMenuOpen}
+        setIsMobileOpen={setIsMobileMenuOpen}
+      />
       <div className="flex-1 flex flex-col overflow-hidden">
         <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-        <main className="flex-1 overflow-y-auto p-4">
+        <main className="flex-1 overflow-y-auto p-2">
           <Card>
             <CardContent>
-              <StaffTable
-                staff={staff}
-                isLoading={isLoading}
-                isError={isError}
-                onAdd={openAddStaffModal}
-                onEdit={openEditStaffModal}
-                onDelete={handleDeleteStaff}
-                onView={handleViewStaff}
-              />
-              {isError && (
-                <p className="mt-4 text-red-600">
-                  {(error as Error)?.message || "Failed to load staff data."}
-                </p>
-              )}
+              <div className="mt-8">
+                <StaffTable
+                  staff={staff}
+                  isLoading={isLoading}
+                  isError={isError}
+                  onAdd={openAddStaffModal}
+                  onEdit={openEditStaffModal}
+                  onDelete={handleDeleteStaff}
+                  onView={handleViewStaff}
+                />
+                {isError && (
+                  <p className="mt-4 text-red-600">
+                    {(error as Error)?.message || "Failed to load staff data."}
+                  </p>
+                )}
+              </div>
             </CardContent>
           </Card>
+
+          {/* Modal Overlay */}
+          {modalOpen && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
+              <div className="bg-white rounded-lg p-6 w-full max-w-md shadow-lg">
+                <h2 className="text-lg font-bold mb-4">
+                  {editingStaff ? "Edit Staff" : "Add Staff"}
+                </h2>
+                <StaffForm
+                  initialData={editingStaff || undefined}
+                  onSubmit={handleFormSubmit}
+                  onCancel={handleModalCancel}
+                  isLoading={isAdding || isUpdating}
+                />
+              </div>
+            </div>
+          )}
         </main>
       </div>
     </div>