diff --git a/src/api/contactApi.js b/src/api/contactApi.js
index f587416..c64b22e 100644
--- a/src/api/contactApi.js
+++ b/src/api/contactApi.js
@@ -1,17 +1,18 @@
 import { API_BASE_URL } from '../constants/api';
 
 export class CreateContactRequest {
-  first_name = '';
-  last_name = '';
+  firstname = '';
+  lastname = '';
+  nickname = '';
   phone_number = '';
   user_id = '';
 }
 
 export class UpdateContactNamesRequest {
-  first_name = '';
-  last_name = '';
+  firstname = '';
+  lastname = '';
   nickname = '';
-  contact_id = '';
+  id = '';
   user_id = '';
 }
 
diff --git a/src/components/AddContact.jsx b/src/components/AddContact.jsx
index c0784e3..b633a34 100644
--- a/src/components/AddContact.jsx
+++ b/src/components/AddContact.jsx
@@ -11,6 +11,7 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
     phoneNumber: '',
     firstName: '',
     lastName: '',
+    nickName: '',
   });
   const [errors, setErrors] = useState({});
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -66,8 +67,9 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
       const userId = tokenService.getUserId();
       let contact = new CreateContactRequest();
       contact.phone_number = formData.phoneNumber;
-      contact.first_name = formData.firstName;
-      contact.last_name = formData.lastName;
+      contact.firstname = formData.firstName;
+      contact.lastname = formData.lastName;
+      contact.nickname = formData.nickName;
       contact.user_id = userId;
       const result = await contactApi.createContact(
         contact,
@@ -178,6 +180,23 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
               <span className="form-hint">Optional field</span>
             </div>
 
+            <div className="form-group">
+              <label htmlFor="nickName" className="form-label">
+                Nick Name
+              </label>
+              <input
+                id="nickName"
+                name="nickName"
+                type="text"
+                className="form-input"
+                value={formData.nickName}
+                onChange={handleChange}
+                placeholder="Enter nick name (optional)"
+                disabled={isSubmitting}
+              />
+              <span className="form-hint">Optional field</span>
+            </div>
+
             <div className="form-actions">
               <button
                 type="button"
diff --git a/src/components/ViewContactWizard/ConfirmationStep.jsx b/src/components/ViewContactWizard/ConfirmationStep.jsx
index 6dde71d..376adcc 100644
--- a/src/components/ViewContactWizard/ConfirmationStep.jsx
+++ b/src/components/ViewContactWizard/ConfirmationStep.jsx
@@ -33,11 +33,11 @@ function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
           <span className={styles.reviewLabel}>First Name</span>
           <div className={styles.reviewComparison}>
             <span className={styles.oldValue}>
-              {selectedContact.first_name || 'Not set'}
+              {selectedContact.firstname || 'Not set'}
             </span>
             <span className={styles.arrow}>→</span>
             <span className={styles.newValue}>
-              {contactDetails.first_name || 'Not set'}
+              {contactDetails.firstname || 'Not set'}
             </span>
           </div>
         </div>
@@ -46,11 +46,11 @@ function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
           <span className={styles.reviewLabel}>Last Name</span>
           <div className={styles.reviewComparison}>
             <span className={styles.oldValue}>
-              {selectedContact.last_name || 'Not set'}
+              {selectedContact.lastname || 'Not set'}
             </span>
             <span className={styles.arrow}>→</span>
             <span className={styles.newValue}>
-              {contactDetails.last_name || 'Not set'}
+              {contactDetails.lastname || 'Not set'}
             </span>
           </div>
         </div>
diff --git a/src/components/ViewContactWizard/ModifyForm.jsx b/src/components/ViewContactWizard/ModifyForm.jsx
index 81b7dbd..292b9f4 100644
--- a/src/components/ViewContactWizard/ModifyForm.jsx
+++ b/src/components/ViewContactWizard/ModifyForm.jsx
@@ -3,8 +3,8 @@ import styles from './ModifyForm.module.css';
 
 function ModifyForm({ contactDetails, setContactDetails }) {
   const [formData, setFormData] = useState({
-    first_name: '',
-    last_name: '',
+    firstname: '',
+    lastname: '',
     nickname: '',
   });
 
@@ -12,8 +12,8 @@ function ModifyForm({ contactDetails, setContactDetails }) {
   useEffect(() => {
     if (contactDetails) {
       setFormData({
-        first_name: contactDetails.first_name || '',
-        last_name: contactDetails.last_name || '',
+        firstname: contactDetails.firstname || '',
+        lastname: contactDetails.lastname || '',
         nickname: contactDetails.nickname || '',
       });
     }
@@ -37,16 +37,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
       <h3 className={styles.sectionTitle}>Edit Contact Information</h3>
 
       <div className={styles.formGroup}>
-        <label htmlFor="first_name" className={styles.formLabel}>
+        <label htmlFor="firstname" className={styles.formLabel}>
           First Name
           <span className={styles.requiredIndicator}>*</span>
         </label>
         <div className={styles.inputContainer}>
           <input
             type="text"
-            id="first_name"
-            name="first_name"
-            value={formData.first_name}
+            id="firstname"
+            name="firstname"
+            value={formData.firstname}
             onChange={handleChange}
             className={styles.formInput}
             placeholder="Enter contact's first name"
@@ -61,16 +61,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
       </div>
 
       <div className={styles.formGroup}>
-        <label htmlFor="last_name" className={styles.formLabel}>
+        <label htmlFor="lastname" className={styles.formLabel}>
           Last Name
           <span className={styles.requiredIndicator}>*</span>
         </label>
         <div className={styles.inputContainer}>
           <input
             type="text"
-            id="last_name"
-            name="last_name"
-            value={formData.last_name}
+            id="lastname"
+            name="lastname"
+            value={formData.lastname}
             onChange={handleChange}
             className={styles.formInput}
             placeholder="Enter contact's last name"
diff --git a/src/components/ViewContactWizard/ViewContact.jsx b/src/components/ViewContactWizard/ViewContact.jsx
index dc47bb3..00b937f 100644
--- a/src/components/ViewContactWizard/ViewContact.jsx
+++ b/src/components/ViewContactWizard/ViewContact.jsx
@@ -49,15 +49,15 @@ function ViewContact({ selectedContact, onSelectedContact }) {
   const filteredContacts = contacts.filter(
     (contact) =>
       contact.phone_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      contact.first_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      contact.last_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.firstname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.lastname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
       contact.nickname?.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
   const formatContactDisplay = (contact) => {
     const phone = contact.phone_number || 'No phone';
     const name =
-      [contact.first_name, contact.last_name].filter(Boolean).join(' ') ||
+      [contact.firstname, contact.lastname].filter(Boolean).join(' ') ||
       'Unnamed';
     const nickname = contact.nickname ? `"${contact.nickname}"` : '';
 
@@ -117,7 +117,7 @@ function ViewContact({ selectedContact, onSelectedContact }) {
               onClick={() => onSelectedContact(contact)}
             >
               <div className={styles.contactAvatar}>
-                {contact.first_name?.[0]?.toUpperCase() || '?'}
+                {contact.firstname?.[0]?.toUpperCase() || '?'}
               </div>
               <div className={styles.contactInfo}>
                 <div className={styles.contactMainInfo}>
@@ -131,7 +131,7 @@ function ViewContact({ selectedContact, onSelectedContact }) {
                   )}
                 </div>
                 <div className={styles.contactName}>
-                  {[contact.first_name, contact.last_name]
+                  {[contact.firstname, contact.lastname]
                     .filter(Boolean)
                     .join(' ') || 'Unnamed Contact'}
                 </div>
diff --git a/src/components/ViewContactWizard/useViewContactWizard.js b/src/components/ViewContactWizard/useViewContactWizard.js
index f9ed86a..c23848f 100644
--- a/src/components/ViewContactWizard/useViewContactWizard.js
+++ b/src/components/ViewContactWizard/useViewContactWizard.js
@@ -21,13 +21,13 @@ const useViewContactWizard = () => {
       case 'modify':
         if (!state.contactDetails) return false;
         if (
-          !state.contactDetails.first_name ||
-          state.contactDetails.first_name.trim() === ''
+          !state.contactDetails.firstname ||
+          state.contactDetails.firstname.trim() === ''
         ) {
           return false;
         } else if (
-          !state.contactDetails.last_name ||
-          state.contactDetails.last_name.trim() === ''
+          !state.contactDetails.lastname ||
+          state.contactDetails.lastname.trim() === ''
         ) {
           return false;
         } else {
@@ -61,8 +61,8 @@ const useViewContactWizard = () => {
           ? null
           : {
               id: contactId,
-              first_name: contact.first_name,
-              last_name: contact.last_name,
+              firstname: contact.firstname,
+              lastname: contact.lastname,
               phone_number: contact.phone_number,
               user_id: contact.user_id,
               nickname: contact.nickname || '',
@@ -90,8 +90,8 @@ const useViewContactWizard = () => {
           step: nextStepValue,
           submissionError: null,
           contactDetails: {
-            first_name: prev.selectedContact.first_name || '',
-            last_name: prev.selectedContact.last_name || '',
+            firstname: prev.selectedContact.firstname || '',
+            lastname: prev.selectedContact.lastname || '',
             nickname: prev.selectedContact.nickname || '',
             phone_number: prev.selectedContact.phone_number || '',
             id: prev.selectedContact.id,
@@ -139,10 +139,10 @@ const useViewContactWizard = () => {
       console.log('Contact details to update: ', state.contactDetails);
 
       let reqBody = new UpdateContactNamesRequest();
-      reqBody.first_name = state.contactDetails.first_name;
-      reqBody.last_name = state.contactDetails.last_name;
+      reqBody.firstname = state.contactDetails.firstname;
+      reqBody.lastname = state.contactDetails.lastname;
       reqBody.nickname = state.contactDetails.nickname || ''; // Send empty string if no nickname
-      reqBody.contact_id = state.selectedContact.id;
+      reqBody.id = state.selectedContact.id;
       reqBody.user_id = userId;
 
       const response = await contactApi.updateContactNames(