diff --git a/src/components/admin/AddEmployee.jsx b/src/components/admin/AddEmployee.jsx
index 9c7af44..36c330a 100644
--- a/src/components/admin/AddEmployee.jsx
+++ b/src/components/admin/AddEmployee.jsx
@@ -1,11 +1,32 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import Sidebar from '../sidebar/Sidebar';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import Sidebar from '../sidebar/Sidebar';
 import axiosInstance from '../../api/axiosConfig';
-import { styles } from '../../styles/classNames';  
-import '../../styles/AddEmployee.css'; 
+
+const CLASSES = {
+  container: 'flex flex-row',
+  mainContent: 'w-full flex flex-col min-h-screen text-black',
+  innerContent: 'min-h-screen text-gray-800 p-6',
+  header: 'flex justify-between items-center',
+  headerTitle: 'flex items-center',
+  backButton: 'text-[#0e355b] text-xl',
+  title: 'text-2xl font-semibold text-[#0e355b]',
+  formGrid: 'grid grid-cols-1 md:grid-cols-3 gap-6',
+  imageSection: 'space-y-6',
+  imageWrapper: 'text-center',
+  imageContainer: 'inline-block relative',
+  imagePreview: 'bg-gray-300 w-24 h-24 rounded-full mx-auto overflow-hidden',
+  noImage: 'w-full h-full flex items-center justify-center text-gray-500',
+  hiddenInput: 'hidden',
+  uploadButton: 'absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-700 text-white text-xs px-2 py-1 rounded-full',
+  formSection: 'md:col-span-2 space-y-4',
+  formGroup: 'text-gray-800 font-medium',
+  formInput: 'p-2 border-b border-gray-400 focus:border-gray-700',
+  formSelect: 'p-2 border-b border-gray-400 focus:border-gray-700',
+  submitButton: 'bg-[#0e355b] text-white py-2 px-4 rounded-md',
+};
 
 const AddEmployee = () => {
   const navigate = useNavigate();
@@ -15,6 +36,7 @@ const AddEmployee = () => {
     age: '',
     gender: '',
     email: '',
+    mobile: '',
     address: {
       address_line_1: '',
       address_line_2: '',
@@ -22,36 +44,34 @@ const AddEmployee = () => {
       pincode: '',
       city_id: '',
     },
-    mobile: '',
     image: null,
   });
   const [cities, setCities] = useState([]);
   const [imagePreview, setImagePreview] = useState(null);
 
-  // Uncomment to fetch cities data from backend
-  // useEffect(() => {
-  //   const fetchCities = async () => {
-  //     try {
-  //       const response = await axiosInstance.get('/cities');
-  //       if (Array.isArray(response.data)) {
-  //         setCities(response.data);
-  //       } else {
-  //         console.error('Error: Data is not an array', response.data);
-  //       }
-  //     } catch (error) {
-  //       console.error('Error fetching cities:', error.response || error.message);
-  //     }
-  //   };
+  useEffect(() => {
+    const fetchCities = async () => {
+      try {
+        const response = await axiosInstance.get('/cities');
+        if (Array.isArray(response.data)) {
+          setCities(response.data);
+        } else {
+          console.error('Error: Data is not an array', response.data);
+        }
+      } catch (error) {
+        console.error('Error fetching cities:', error.response ? error.response.data : error.message);
+      }
+    };
 
-  //   fetchCities();
-  // }, []);
+    fetchCities();
+  }, []);
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
-    setEmployeeData({
-      ...employeeData,
+    setEmployeeData((prevData) => ({
+      ...prevData,
       [name]: value,
-    });
+    }));
   };
 
   const handleImageChange = (e) => {
@@ -73,7 +93,7 @@ const AddEmployee = () => {
     });
 
     try {
-      await axiosInstance.post('http://localhost:5000/employees', formData, {
+      await axiosInstance.post('/employees', formData, {
         headers: {
           'Content-Type': 'multipart/form-data',
         },
@@ -85,209 +105,165 @@ const AddEmployee = () => {
   };
 
   return (
-    <div className={styles.container}>
+    <div className={CLASSES.container}>
       <Sidebar />
-      <div className={styles.content}>
-        <div className={styles.header}>
-          <div className="flex items-center ">
-            <Link to="/employees" className={styles.backButton}>
-              <FontAwesomeIcon icon={faChevronLeft} />
-            </Link>
-            <h1 className={styles.title}>
-              create employee account
-            </h1>
+      <div className={CLASSES.mainContent}>
+        <div className={CLASSES.innerContent}>
+          <div className={CLASSES.header}>
+            <div className={CLASSES.headerTitle}>
+              <Link to="/employees" className={CLASSES.backButton}>
+                <FontAwesomeIcon icon={faChevronLeft} />
+              </Link>
+              <h1 className={CLASSES.title}>create employee account</h1>
+            </div>
           </div>
-          <div className="flex justify-center">
-            <div className={`${styles.centerText} space-y-6 w-full max-w-4xl`}>
-              <div className={styles.centerText}>
-                <div className="inline-block relative">
-                  <div className={styles.imageWrapper}>
+          <div className={CLASSES.formGrid}>
+            <div className={CLASSES.imageSection}>
+              <div className={CLASSES.imageWrapper}>
+                <div className={CLASSES.imageContainer}>
+                  <div className={CLASSES.imagePreview}>
                     {imagePreview ? (
                       <img
                         src={imagePreview}
                         alt="Employee"
-                        className={styles.imagePreview}
+                        className="w-full h-full object-cover"
                       />
                     ) : (
-                      <div className={styles.noImageText}>
-                        No image
-                      </div>
+                      <div className={CLASSES.noImage}>no image</div>
                     )}
                   </div>
                   <input
                     type="file"
                     accept="image/*"
-                    className="hidden"
+                    className={CLASSES.hiddenInput}
                     id="imageUpload"
                     onChange={handleImageChange}
                   />
                   <button
                     type="button"
                     onClick={() => document.getElementById('imageUpload').click()}
-                    className={styles.imageUploadButton}
+                    className={CLASSES.uploadButton}
                   >
-                    Upload
+                    upload
                   </button>
                 </div>
               </div>
-              <form onSubmit={handleAddEmployeeSubmit} className={styles.form}>
-                <div className={styles.formGroup}>
-                  <div>
-                    <label className="block text-secondary font-medium">
-                      employee firstname:
-                    </label>
-                    <input
-                      type="text"
-                      name="firstname"
-                      value={employeeData.firstname}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-secondary font-medium">
-                      employee lastname:
-                    </label>
-                    <input
-                      type="text"
-                      name="lastname"
-                      value={employeeData.lastname}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-secondary font-medium">
-                      age:
-                    </label>
-                    <input
-                      type="number"
-                      name="age"
-                      value={employeeData.age}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-secondary font-medium">
-                      gender:
-                    </label>
-                    <select
-                      name="gender"
-                      value={employeeData.gender}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    >
-                      <option value="" disabled>
-                        select gender
-                      </option>
-                      <option value="male">male</option>
-                      <option value="female">female</option>
-                      <option value="other">other</option>
-                    </select>
-                  </div>
-                  <div>
-                    <label className="block text-secondary font-medium">
-                      mobile:
-                    </label>
-                    <input
-                      type="text"
-                      name="mobile"
-                      value={employeeData.mobile}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    />
-                  </div>
-                  <div className="md:col-span-2 lg:col-span-3">
-                    <label className="block text-secondary font-medium">
-                      address line 1:
-                    </label>
-                    <input
-                      type="text"
-                      name="address_line_1"
-                      value={employeeData.address_line_1}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    />
-                  </div>
-                  <div className="md:col-span-2 lg:col-span-3">
-                    <label className="block text-secondary font-medium">
-                      address line 2:
-                    </label>
-                    <input
-                      type="text"
-                      name="address_line_2"
-                      value={employeeData.address_line_2}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    />
-                  </div>
-                  <div className="md:col-span-2 lg:col-span-3">
-                    <label className="block text-secondary font-medium">
-                      nearby landmark:
-                    </label>
-                    <input
-                      type="text"
-                      name="nearby_landmark"
-                      value={employeeData.nearby_landmark}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    />
-                  </div>
-                  <div className="md:col-span-2 lg:col-span-3">
-                    <label className="block text-secondary font-medium">
-                      pincode:
-                    </label>
-                    <input
-                      type="text"
-                      name="pincode"
-                      value={employeeData.pincode}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    />
-                  </div>
-                  <div className="md:col-span-2 lg:col-span-3">
-                    <label className="block text-secondary font-medium">
-                      city:
-                    </label>
-                    <select
-                      name="city_id"
-                      value={employeeData.city_id}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    >
-                      <option value="" disabled>
-                        select city
-                      </option>
-                      {Array.isArray(cities) &&
-                        cities.map((city) => (
-                          <option key={city.id} value={city.id}>
-                            {city.name}
-                          </option>
-                        ))}
-                    </select>
-                  </div>
-                  <div className="md:col-span-2 lg:col-span-3">
-                    <label className="block text-secondary font-medium">
-                      email:
-                    </label>
-                    <input
-                      type="email"
-                      name="email"
-                      value={employeeData.email}
-                      onChange={handleInputChange}
-                      className={styles.input}
-                    />
-                  </div>
+            </div>
+            <div className={CLASSES.formSection}>
+              <form onSubmit={handleAddEmployeeSubmit}>
+                <div>
+                  <label className={CLASSES.formGroup}>first name:</label>
+                  <input
+                    type="text"
+                    name="firstname"
+                    value={employeeData.firstname}
+                    onChange={handleInputChange}
+                    className={CLASSES.formInput}
+                  />
                 </div>
-                <div className={`${styles.centerText} mt-6`}>
-                  <button
-                    type="submit"
-                    className={styles.button}
+                <div>
+                  <label className={CLASSES.formGroup}>last name:</label>
+                  <input
+                    type="text"
+                    name="lastname"
+                    value={employeeData.lastname}
+                    onChange={handleInputChange}
+                    className={CLASSES.formInput}
+                  />
+                </div>
+                <div>
+                  <label className={CLASSES.formGroup}>age:</label>
+                  <input
+                    type="number"
+                    name="age"
+                    value={employeeData.age}
+                    onChange={handleInputChange}
+                    className={CLASSES.formInput}
+                  />
+                </div>
+                <div>
+                  <label className={CLASSES.formGroup}>gender:</label>
+                  <select
+                    name="gender"
+                    value={employeeData.gender}
+                    onChange={handleInputChange}
+                    className={CLASSES.formSelect}
                   >
-                    create account
-                  </button>
+                    <option value="" disabled>select gender</option>
+                    <option value="male">male</option>
+                    <option value="female">female</option>
+                    <option value="other">other</option>
+                  </select>
                 </div>
+                <div>
+                  <label className={CLASSES.formGroup}>mobile:</label>
+                  <input
+                    type="text"
+                    name="mobile"
+                    value={employeeData.mobile}
+                    onChange={handleInputChange}
+                    className={CLASSES.formInput}
+                  />
+                </div>
+                <div>
+                  <label className={CLASSES.formGroup}>address line 1:</label>
+                  <input
+                    type="text"
+                    name="address_line_1"
+                    value={employeeData.address.address_line_1}
+                    onChange={handleInputChange}
+                    className={CLASSES.formInput}
+                  />
+                </div>
+                <div>
+                  <label className={CLASSES.formGroup}>address line 2:</label>
+                  <input
+                    type="text"
+                    name="address_line_2"
+                    value={employeeData.address.address_line_2}
+                    onChange={handleInputChange}
+                    className={CLASSES.formInput}
+                  />
+                </div>
+                <div>
+                  <label className={CLASSES.formGroup}>nearby landmark:</label>
+                  <input
+                    type="text"
+                    name="nearby_landmark"
+                    value={employeeData.address.nearby_landmark}
+                    onChange={handleInputChange}
+                    className={CLASSES.formInput}
+                  />
+                </div>
+                <div>
+                  <label className={CLASSES.formGroup}>pincode:</label>
+                  <input
+                    type="text"
+                    name="pincode"
+                    value={employeeData.address.pincode}
+                    onChange={handleInputChange}
+                    className={CLASSES.formInput}
+                  />
+                </div>
+                <div>
+                  <label className={CLASSES.formGroup}>city:</label>
+                  <select
+                    name="city_id"
+                    value={employeeData.address.city_id}
+                    onChange={handleInputChange}
+                    className={CLASSES.formSelect}
+                  >
+                    <option value="" disabled>select city</option>
+                    {cities.map((city) => (
+                      <option key={city.id} value={city.id}>
+                        {city.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <button type="submit" className={CLASSES.submitButton}>
+                  add employee
+                </button>
               </form>
             </div>
           </div>
@@ -296,4 +272,5 @@ const AddEmployee = () => {
     </div>
   );
 };
+
 export default AddEmployee;
diff --git a/src/components/customer/AddCustomer.jsx b/src/components/customer/AddCustomer.jsx
index ed333ff..36b1ddc 100644
--- a/src/components/customer/AddCustomer.jsx
+++ b/src/components/customer/AddCustomer.jsx
@@ -122,10 +122,10 @@ const AddCustomer = () => {
               <Link to="/customers" className={CLASSES.backButton}>
                 <FontAwesomeIcon icon={faChevronLeft} />
               </Link>
-              <h1 className={CLASSES.title}>Add Customer</h1>
+              <h1 className={CLASSES.title}>add customer</h1>
             </div>
             <Link to="/CategoryList" className={CLASSES.skipLink}>
-              Skip for now
+              skip for now
             </Link>
           </div>
           <div className={CLASSES.formGrid}>
@@ -140,7 +140,7 @@ const AddCustomer = () => {
                         className="w-full h-full object-cover"
                       />
                     ) : (
-                      <div className={CLASSES.noImage}>No Image</div>
+                      <div className={CLASSES.noImage}>no image</div>
                     )}
                   </div>
                   <input
@@ -163,17 +163,17 @@ const AddCustomer = () => {
               </div>
               <div>
                 <Link to="/add-customer">
-                  <h2 className={CLASSES.linkTitle}>Customer Information</h2>
+                  <h2 className={CLASSES.linkTitle}>customer information</h2>
                 </Link>
                 <Link to="/measurements">
-                  <h2 className={CLASSES.linkTitle}>Measurements</h2>
+                  <h2 className={CLASSES.linkTitle}>measurements</h2>
                 </Link>
               </div>
             </div>
             <div className={CLASSES.formSection}>
               <form onSubmit={handleAddCustomerSubmit}>
                 <div>
-                  <label className={CLASSES.formGroup}>First Name:</label>
+                  <label className={CLASSES.formGroup}>first name:</label>
                   <input
                     type="text"
                     name="firstname"
@@ -183,7 +183,7 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>Last Name:</label>
+                  <label className={CLASSES.formGroup}>last name:</label>
                   <input
                     type="text"
                     name="lastname"
@@ -193,7 +193,7 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>Age:</label>
+                  <label className={CLASSES.formGroup}>age:</label>
                   <input
                     type="number"
                     name="age"
@@ -203,21 +203,21 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>Gender:</label>
+                  <label className={CLASSES.formGroup}>gender:</label>
                   <select
                     name="gender"
                     value={customerData.gender}
                     onChange={handleInputChange}
                     className={CLASSES.formSelect}
                   >
-                    <option value="" disabled>Select Gender</option>
-                    <option value="male">Male</option>
-                    <option value="female">Female</option>
-                    <option value="other">Other</option>
+                    <option value="" disabled>select gender</option>
+                    <option value="male">male</option>
+                    <option value="female">female</option>
+                    <option value="other">other</option>
                   </select>
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>Email:</label>
+                  <label className={CLASSES.formGroup}>email:</label>
                   <input
                     type="email"
                     name="email"
@@ -227,7 +227,7 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>Address Line 1:</label>
+                  <label className={CLASSES.formGroup}>address line 1:</label>
                   <input
                     type="text"
                     name="address_line_1"
@@ -237,7 +237,7 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>Address Line 2:</label>
+                  <label className={CLASSES.formGroup}>address line 2:</label>
                   <input
                     type="text"
                     name="address_line_2"
@@ -247,7 +247,7 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>Nearby Landmark:</label>
+                  <label className={CLASSES.formGroup}>nearby landmark:</label>
                   <input
                     type="text"
                     name="nearby_landmark"
@@ -257,7 +257,7 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>Pincode:</label>
+                  <label className={CLASSES.formGroup}>pincode:</label>
                   <input
                     type="text"
                     name="pincode"
@@ -267,14 +267,14 @@ const AddCustomer = () => {
                   />
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>City:</label>
+                  <label className={CLASSES.formGroup}>city:</label>
                   <select
                     name="city_id"
                     value={customerData.city_id}
                     onChange={handleInputChange}
                     className={CLASSES.formSelect}
                   >
-                    <option value="" disabled>Select City</option>
+                    <option value="" disabled>select city</option>
                     {cities.map((city) => (
                       <option key={city.id} value={city.id}>
                         {city.name}
@@ -283,7 +283,7 @@ const AddCustomer = () => {
                   </select>
                 </div>
                 <div>
-                  <label className={CLASSES.formGroup}>Mobile:</label>
+                  <label className={CLASSES.formGroup}>mobile:</label>
                   <input
                     type="text"
                     name="mobile"
@@ -293,7 +293,7 @@ const AddCustomer = () => {
                   />
                 </div>
                 <button type="submit" className={CLASSES.submitButton}>
-                  Add Customer
+                  add customer
                 </button>
               </form>
             </div>