diff --git a/.DS_Store b/.DS_Store
index 18f18875..2e450c13 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/osinaweb/.DS_Store b/osinaweb/.DS_Store
index 5b4a4802..c78a0b7c 100644
Binary files a/osinaweb/.DS_Store and b/osinaweb/.DS_Store differ
diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index eb594ca2..0e1fecf9 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc b/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc
index 7e8d4dee..749ac85b 100644
Binary files a/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc and b/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/views.cpython-310.pyc b/osinaweb/osinacore/__pycache__/views.cpython-310.pyc
index 96c18632..7e835955 100644
Binary files a/osinaweb/osinacore/__pycache__/views.cpython-310.pyc and b/osinaweb/osinacore/__pycache__/views.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index 5e2873bf..db74d32c 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -1270,9 +1270,42 @@ def edit_business(request, business_id):
 
 
 @login_required
-def edit_staff(request, *args, **kwargs):
+def edit_staff(request, staff_id):
+    staff = get_object_or_404(StaffProfile, staff_id=staff_id)
+    positions = StaffPosition.objects.all().order_by('name')
+    current_position = staff.staff_position
+
+
+    if request.method == 'POST':
+         
+        staff.user.first_name= request.POST.get('first_name')
+        staff.user.last_name = request.POST.get('last_name')
+        staff.user.email = request.POST.get('email')
+        staff.user.save()
+
+        staff.mobile_number = request.POST.get('mobile_number')
+        staff.active = request.POST.get('active')
+        staff.intern = request.POST.get('intern')
+
+        new_position_id = request.POST.get('staff_position')
+        new_position = get_object_or_404(StaffPosition, id=new_position_id)
+        staff.staff_position = new_position
+
+
+        new_image = request.FILES.get('image')
+        if new_image:  
+            staff.image = new_image
+
+
+        staff.save()
+        
+
+        return redirect('userdetails', staff_id=staff.staff_id)    
     
     context = {
+    'staff' : staff,
+    'positions' : positions,
+    'current_position' : current_position,
 
     }
     return render(request, 'edit_pages/edit-staff.html', context)
diff --git a/osinaweb/osinaweb/__pycache__/urls.cpython-310.pyc b/osinaweb/osinaweb/__pycache__/urls.cpython-310.pyc
index c31b9d5a..6131bdd8 100644
Binary files a/osinaweb/osinaweb/__pycache__/urls.cpython-310.pyc and b/osinaweb/osinaweb/__pycache__/urls.cpython-310.pyc differ
diff --git a/osinaweb/osinaweb/urls.py b/osinaweb/osinaweb/urls.py
index a37c6515..c3f76524 100644
--- a/osinaweb/osinaweb/urls.py
+++ b/osinaweb/osinaweb/urls.py
@@ -109,7 +109,7 @@ urlpatterns = [
     path('edit-task/', views.edit_task, name='edittask'),
     path('edit-customer/<str:customer_id>/', views.edit_customer, name='editcustomer'),
     path('edit-business/<str:business_id>/', views.edit_business, name='editbusiness'),
-    path('edit-staff/', views.edit_staff, name='editstaff'),
+    path('edit-staff/<str:staff_id>/', views.edit_staff, name='editstaff'),
     path('edit-projecttype/<int:projecttype_id>', views.edit_project_type, name='editprojecttype'),
     path('edit-businesstype/<int:businesstype_id>', views.edit_business_type, name='editbusinesstype'),
     path('edit-reference/<int:reference_id>', views.edit_reference, name='editreference'),
diff --git a/osinaweb/static/images/IMG_1044.JPG b/osinaweb/static/images/IMG_1044.JPG
new file mode 100644
index 00000000..7e7c268d
Binary files /dev/null and b/osinaweb/static/images/IMG_1044.JPG differ
diff --git a/osinaweb/static/images/WhatsApp_Image_2024-01-02_at_1.31.29_PM_bpjQhHj.jpeg b/osinaweb/static/images/WhatsApp_Image_2024-01-02_at_1.31.29_PM_bpjQhHj.jpeg
new file mode 100644
index 00000000..d37729c9
Binary files /dev/null and b/osinaweb/static/images/WhatsApp_Image_2024-01-02_at_1.31.29_PM_bpjQhHj.jpeg differ
diff --git a/osinaweb/static/images/footer-logo_2.png b/osinaweb/static/images/footer-logo_2.png
new file mode 100644
index 00000000..863af724
Binary files /dev/null and b/osinaweb/static/images/footer-logo_2.png differ
diff --git a/osinaweb/static/images/ositcom_ny_post_2024-06_p7SbgQt.jpg b/osinaweb/static/images/ositcom_ny_post_2024-06_p7SbgQt.jpg
new file mode 100644
index 00000000..d00aabb5
Binary files /dev/null and b/osinaweb/static/images/ositcom_ny_post_2024-06_p7SbgQt.jpg differ
diff --git a/osinaweb/templates/details_pages/staff-details.html b/osinaweb/templates/details_pages/staff-details.html
index f9263c15..3247cee8 100644
--- a/osinaweb/templates/details_pages/staff-details.html
+++ b/osinaweb/templates/details_pages/staff-details.html
@@ -69,7 +69,7 @@
                 <button
                     class="w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
                     User</button>
-                <a href="{% url 'editstaff' %}">
+                <a href="{% url 'editstaff' staff.staff_id %}">
                     <button
                         class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
                         User</button>
@@ -84,17 +84,17 @@
             </div>
             <div>
                 <p class="text-gray-500 text-xl">First Name: <span
-                        class="text-slate-800 text-xl font-semibold">Nataly</span></p>
+                        class="text-slate-800 text-xl font-semibold">{{staff.user.first_name}}</span></p>
             </div>
 
             <div>
                 <p class="text-gray-500 text-xl">Last Name: <span
-                        class="text-slate-800 text-xl font-semibold">Nataly</span></p>
+                        class="text-slate-800 text-xl font-semibold">{{staff.user.last_name}}</span></p>
             </div>
 
             <div>
                 <p class="text-gray-500 text-xl">Email: <span
-                        class="text-slate-800 text-xl font-semibold">{{staff.email}}</span></p>
+                        class="text-slate-800 text-xl font-semibold">{{staff.user.email}}</span></p>
             </div>
             <div>
                 <p class="text-gray-500 text-xl">Mobile Number: <span
diff --git a/osinaweb/templates/edit_pages/edit-business.html b/osinaweb/templates/edit_pages/edit-business.html
index f77c5fad..fde41d7a 100644
--- a/osinaweb/templates/edit_pages/edit-business.html
+++ b/osinaweb/templates/edit_pages/edit-business.html
@@ -10,6 +10,30 @@
 
         <form method="POST" action="{% url 'editbusiness' business.business_id %}" enctype="multipart/form-data">
             {% csrf_token %}
+
+        
+        <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+            <div class="w-[100px] h-[100px] rounded-full border border-gray-200 mt-2" id="image-container">
+                {% if business.logo %}
+                    <img src="{{business.logo.url}}" alt="" srcset="" id="" class="rounded-full w-full h-full">
+                    {% else %}
+                    <img src="{% static 'images/default-user.png' %}" alt="" srcset="" id="" class="rounded-full w-full h-full">
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md mt-2">
+            <div class="flex items-center justify-between">
+                <input name="logo" type="file" id="actual-btn" accept="image/*" hidden />
+                <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                    New Logo</span>
+                <label for="actual-btn"
+                    class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
+                        class="fa fa-upload" style="font-size: 20px;"></i></label>
+            </div>
+        </div>
+        
+        
         <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
             <div class="w-full mt-4">
                 <label class="text-gray-500 text-xl">Name:</label>
@@ -19,39 +43,43 @@
                 required>
             </div>
 
-            <div class="w-full mt-4">
-                <label class="text-gray-500 text-xl">Current Image: 
-                    <a  href="{{banner.image.url}}" class="text-gray-400 cursor-pointer hover:text-slate-800" style="word-wrap: break-word;">{{business.logo.url}}</a>
-                </label>
-            </div>
-            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
-                <div class="flex items-center justify-between">
-                    <input name="logo" type="file" id="actual-btn" accept="image/*" hidden/>
-                    <span id="file-name"
-                        class="text-gray-500 text-base focus:outline-none outline-none">Upload New Business
-                        Logo</span>
-                    <label for="actual-btn"
-                        class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
-                            class="fa fa-upload"></i></label>
-
-                </div>
-            </div>
 
-            <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
-            <script>
-                const fileInput = document.getElementById('actual-btn');
-                const fileNameSpan = document.getElementById('file-name');
-
-                fileInput.addEventListener('change', (event) => {
-                    const selectedFiles = event.target.files;
-                    if (selectedFiles.length > 0) {
-                        const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
-                        fileNameSpan.textContent = fileNames;
-                    } else {
-                        fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
-                    }
-                });
-            </script>
+                <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN AND THE UPLOADED IMAGE WILL APPEAR IN THE USER PROFILE IMAGE CONTAINER -->
+                <script>
+                    const fileInput = document.getElementById('actual-btn');
+                    const fileNameSpan = document.getElementById('file-name');
+                    const imageContainer = document.getElementById('image-container');
+
+                    fileInput.addEventListener('change', (event) => {
+                        const selectedFiles = event.target.files;
+                        if (selectedFiles.length > 0) {
+                            const file = selectedFiles[0];
+                            const fileReader = new FileReader();
+
+                            fileReader.onload = function () {
+                                const imgElement = document.createElement('img');
+                                imgElement.src = fileReader.result;
+                                imgElement.alt = 'Uploaded Image';
+                                imgElement.classList.add('w-full', 'h-full', 'rounded-full', 'object-cover');
+
+                                // Clear any previous images and append the new one
+                                imageContainer.innerHTML = '';
+                                imageContainer.appendChild(imgElement);
+
+                                // Update the text in the file input
+                                fileNameSpan.textContent = file.name;
+                            };
+
+                            // Read the selected file as a data URL
+                            fileReader.readAsDataURL(file);
+                        } else {
+                            fileNameSpan.textContent = 'Upload Profile Picture';
+                            imageContainer.innerHTML = ''; // Clear the container if no file is selected
+                        }
+                    });
+
+
+                </script>
 
             <div class="w-full mt-4">
                 <label class="text-gray-500 text-xl">Email:</label>
diff --git a/osinaweb/templates/edit_pages/edit-staff.html b/osinaweb/templates/edit_pages/edit-staff.html
index e011fd9e..e7c32907 100644
--- a/osinaweb/templates/edit_pages/edit-staff.html
+++ b/osinaweb/templates/edit_pages/edit-staff.html
@@ -8,18 +8,22 @@
             Edit Staff
         </h1>
 
-        <form method="POST" action="{% url 'save_staff' %}" enctype="multipart/form-data">
+        <form method="POST" action="{% url 'editstaff' staff.staff_id %}" enctype="multipart/form-data">
             {% csrf_token %}
             <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
-                <div class="w-[100px] h-[100px] rounded-full border border-gray-200" id="image-container">
+                <div class="w-[100px] h-[100px] rounded-full border border-gray-200 mt-2" id="image-container">
+                    {% if staff.image %}
+                    <img src="{{staff.image.url}}" alt="" srcset="" id="" class="rounded-full w-full h-full">
+                    {% else %}
                     <img src="{% static 'images/default-user.png' %}" alt="" srcset="" id="" class="rounded-full w-full h-full">
+                    {% endif %}
                 </div>
 
                 <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
                     <div class="flex items-center justify-between">
                         <input name="image" type="file" id="actual-btn" accept="image/*" hidden />
                         <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
-                            Profile Picture</span>
+                            New Profile Picture</span>
                         <label for="actual-btn"
                             class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
                                 class="fa fa-upload" style="font-size: 20px;"></i></label>
@@ -65,52 +69,60 @@
 
                 </script>
 
-                <input name="first_name" type="text" placeholder="First Name"
-                    value="Nataly"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">First Name:</label>
+                    <input name="first_name" type="text" placeholder="First Name"
+                        value="{{staff.user.first_name}}"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
+                </div>
 
-                <input name="last_name" type="text" placeholder="Last Name"
-                    value="Ab"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Last Name:</label>
+                    <input name="last_name" type="text" placeholder="Last Name"
+                        value="{{staff.user.last_name}}"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
+                </div>
 
-                <input name="email" type="email" placeholder="Email"
-                    value="nataly.aw@ositcom.com"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Email:</label>
+                    <input name="email" type="email" placeholder="Email"
+                        value="{{staff.user.email}}"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
+                </div>
 
-                <input name="mobile_number" type="number" placeholder="Mobile Number"
-                    value="71196733"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Mobile Number:</label>
+                    <input name="mobile_number" type="number" placeholder="Mobile Number"
+                        value="{{staff.mobile_number}}"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
+                </div>
 
-                <input name="position" type="text" placeholder="Position"
-                    value="Developer"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Position:</label>
+                    <select name="staff_position" id=""
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2">
+                    {% for position in positions %}
+                    <option  {% if current_position and current_position.id == position.id %}selected{% endif %}  value="{{position.id}}"> {{position.name}}</option>
+                    {% endfor %}
+                    </select>
+                </div>
 
-                    <div class="w-full flex justify-start items-center gap-2">
-                        <input name="active" type="checkbox" id="activeCheckbox" onchange="updateCheckbox('activeCheckbox')">
-                        <p class="text-gray-500">Active</p>
-                    </div>
-                    
-                    <div class="w-full flex justify-start items-center gap-2">
-                        <input name="intern" type="checkbox" id="internCheckbox" onchange="updateCheckbox('internCheckbox')">
-                        <p class="text-gray-500">Intern</p>
-                    </div>
-                    
-                    <script>
-                        function updateCheckbox(checkboxId) {
-                            const checkbox = document.getElementById(checkboxId);
-                            const inputName = checkbox.getAttribute('name');
-                            const inputValue = checkbox.checked ? 'True' : 'False';
-                    
-                            // Set the input field value based on checkbox state
-                            const inputField = document.querySelector(`input[name="${inputName}"]`);
-                            inputField.value = inputValue;
-                        }
-                    </script>
+                <div class="w-full flex justify-start items-center gap-2 mt-2">
+                    <input {% if staff.active %} checked {% endif %}  type="checkbox">
+                    <p class="text-gray-500 text-xl">Active</p>
+                    <input type="hidden" name="active" value="False">
+                </div>
+                
+                <div class="w-full flex justify-start items-center gap-2 mt-2">
+                    <input {% if staff.intern %} checked {% endif %}  type="checkbox">
+                    <p class="text-gray-500 text-xl">Intern</p>
+                    <input type="hidden" name="intern" value="False">
+                </div>
+                
+                
+                
                     
                 
-                <input name="password" type="password" placeholder="Password"
-                value="12345677"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
 
                 <div class="w-full flex justify-center items-center mt-3">
                     <button type="submit"
diff --git a/osinaweb/templates/listing_pages/staffs.html b/osinaweb/templates/listing_pages/staffs.html
index a02417ca..7d14ed49 100644
--- a/osinaweb/templates/listing_pages/staffs.html
+++ b/osinaweb/templates/listing_pages/staffs.html
@@ -116,7 +116,7 @@
                                             <i class="fa fa-eye"></i>
                                         </div>
                                     </a>
-                                    <a href="{% url 'editstaff' %}">
+                                    <a href="{% url 'editstaff' staff.staff_id %}">
                                         <div class="text-[15px] text-blue-500 cursor-pointer">
                                             <i class="fa fa-edit"></i>
                                         </div>