diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index aaf759d5..05ef66dc 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/__pycache__/custom_context.cpython-311.pyc b/osinaweb/osinacore/__pycache__/custom_context.cpython-311.pyc
new file mode 100644
index 00000000..1ad246cb
Binary files /dev/null and b/osinaweb/osinacore/__pycache__/custom_context.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc
index 798637de..a06b3aba 100644
Binary files a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc and b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index 22bbd912..b5143e7d 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -621,11 +621,12 @@ def save_business(request):
     
     return render(request, 'add-business.html') 
 
+
 @login_required
 def save_business_modal(request):
     if request.method == 'POST':
         name = request.POST.get('name')
-        email= request.POST.get('email')
+        email = request.POST.get('email')
         financial_number = request.POST.get('financial_number')
         phone_number = request.POST.get('phone_number')
         vat = request.POST.get('vat')
@@ -635,20 +636,28 @@ def save_business_modal(request):
         logo = request.POST.get('logo')
 
         business = Business(
-        name = name,
-        email = email,
-        financial_number = financial_number,
-        vat = vat,
-        commercial_registration = commercial_registration,
-        website = website,
-        business_type = business_type,
-        logo = logo,
-        phone_number = phone_number,
+            name=name,
+            email=email,
+            financial_number=financial_number,
+            vat=vat,
+            commercial_registration=commercial_registration,
+            website=website,
+            business_type=business_type,
+            logo=logo,
+            phone_number=phone_number,
         )
         business.save()
 
-    return render(request, 'addbusiness-modal.html') 
+        # Fetch the updated options for the <select> element
+        businesses = Business.objects.all()
 
+        updated_options = [{'id': business.id, 'name': business.name} for business in businesses]
+
+        # Return the updated options as JSON response
+        return JsonResponse(updated_options, safe=False)
+
+    
+    return render(request, 'addbusiness-modal.html')
 
 def save_customer(request):
     if request.method == 'POST':
diff --git a/osinaweb/osinaweb/__pycache__/settings.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/settings.cpython-311.pyc
index 922c9b10..1b9529f8 100644
Binary files a/osinaweb/osinaweb/__pycache__/settings.cpython-311.pyc and b/osinaweb/osinaweb/__pycache__/settings.cpython-311.pyc differ
diff --git a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc
index bd506fa8..2eaee623 100644
Binary files a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc and b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc differ
diff --git a/osinaweb/templates/add-customer.html b/osinaweb/templates/add-customer.html
index 48a6124e..fc231a45 100644
--- a/osinaweb/templates/add-customer.html
+++ b/osinaweb/templates/add-customer.html
@@ -58,14 +58,14 @@
 
                     <div class="w-full flex justify-end items-center px-3 py-2">
                         <button type="button"
-                            class="w-fit py-1 px-3 bg-white rounded-md outline-none text-blue-500 border border-blue-500 text-xl cursor-pointer hover:bg-blue-500 hover:text-white addBusinessButton"
-                            data-modal-url="{% url 'addbusinesscustomer' %}">
+                            class="w-fit py-1 px-3 bg-white rounded-md outline-none text-blue-500 border border-blue-500 text-xl cursor-pointer hover:bg-blue-500 hover:text-white"
+                            id="addBusinessButton">
                             Add Business
                         </button>
                     </div>
 
                     <div class="w-full mt-2">
-                        <select name="business"
+                        <select name="business" id="businessSelect"
                             class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
                             <option value="" selected disabled>Business Name</option>
                             {% for business in businesses %}
@@ -76,6 +76,7 @@
                 </div>
 
 
+                <!-- MAKE THE "ADDBUSINESSCONTAINER" VISIBLE WHEN CHOOSING THE CUSTOMER TYPE AS BUSINESS  -->
                 <script>
                     const businessTypeSelect = document.getElementById('businessTypeSelect');
                     const addBusinessContainer = document.getElementById('addBusinessContainer');
@@ -101,9 +102,177 @@
                 </div>
             </div>
         </form>
+
+
+        <!-- THE "ADD BUSINESS" FORM THAT APPEARS WHEN CLICKING ON THE ADD BUSINESS BUTTON -->
+        <div class="w-full p-3 rounded-md border border-gray-300 mt-5 hidden" id="addBusinessFormContainer">
+            <h1 class="text-3xl text-slate-800 text-center font-semibold">Add Business</h1>
+            <form method="POST" action="{% url 'save_business_modal' %}" id="addBusinessFormModal">
+                {% csrf_token %}
+                <input name="name" type="text" placeholder="Name"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
+
+                <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md mt-4">
+                    <div class="flex items-center justify-between">
+                        <input name="logo" required name="cv" type="file" id="actual-btn" accept="image/*" hidden
+                            multiple />
+                        <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                            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>
+
+                <input name="email" type="email" placeholder="Email"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
+
+                <input name="financial_number" type="number" placeholder="Financial Number"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
+
+                <div class="w-full flex justify-start items-center gap-2 mt-4">
+                    <input name="vat" type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)" required>
+                    <label class="text-slate-800">Vat</label>
+                </div>
+
+                <script>
+                    function updateVatValue(checked) {
+                        const vatInput = document.querySelector('input[name="vat"]');
+                        vatInput.value = checked ? 'True' : 'False';
+                    }
+                </script>
+
+                <input name="commercial_registration" type="commercial_registration"
+                    placeholder="Commercial registration"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
+
+                <input name="phone_number" type="number" placeholder="Mobile Number"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
+
+                <input name="website" type="text" placeholder="Website"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4">
+
+
+                <select name="business_type" id=""
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-4">
+                    <option value="" selected disabled>Business Type</option>
+                    <option value="ASSOCIATIONS">Associations</option>
+                    <option value="HEALTHCARE">Healthcare</option>
+                    <option value="LUXURY">Luxury</option>
+                    <option value="MANUFACTURING">Manufacturing</option>
+                    <option value="NON-PROFIT">Non-Profit</option>
+                    <option value="Education">Education</option>
+                    <option value="ENTERTAINMENT">Entertainment</option>
+                    <option value="LOGISTICS">Logistics</option>
+                    <option value="RETAIL">Retail</option>
+                    <option value="AUTOMOTIVE">Automotive</option>
+                </select>
+
+                <div class="w-full flex justify-center items-center mt-3">
+                    <button type="submit"
+                        class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500"
+                        id="addBusinessFormButton">Add
+                        Business</button>
+                </div>
+            </form>
+        </div>
+
+        <!-- TO MAKE THE "ADDBUSINESSFORMCONTAINER" VISIBLE WHEN CLICKING ON THE ADD BUSINESS BUTTON -->
+        <script>
+            document.addEventListener('DOMContentLoaded', function () {
+                const addButton = document.getElementById('addBusinessButton');
+                const formContainer = document.getElementById('addBusinessFormContainer');
+                const formButton = document.getElementById('addBusinessFormButton');
+
+                addButton.addEventListener('click', function () {
+                    formContainer.classList.toggle('hidden');
+
+                    if (!formContainer.classList.contains('hidden')) {
+                        formContainer.scrollIntoView({ behavior: 'smooth' });
+                    }
+                });
+
+                formButton.addEventListener('click', function () {
+                    formContainer.classList.add('hidden');
+                });
+            });
+
+        </script>
+
+
+        <!-- TO FETCH AND DISPLAY THE NEW ADDED BUSINESS IN THE BUSINESS SELECT TAG -->
+        <script>
+            document.getElementById('addBusinessFormModal').addEventListener('submit', function (event) {
+                event.preventDefault(); // Prevent the form from actually submitting
+
+                const form = this;
+                const formData = new FormData(this);
+
+                fetch("{% url 'save_business_modal' %}", {
+                    method: "POST",
+                    body: formData,
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        // console.log('Received JSON data:', data); // Check if data is received
+
+                        form.reset();
+                        const fileNameSpan = document.getElementById('file-name');
+                        fileNameSpan.textContent = 'Upload Business Logo';
+
+
+                        refreshSelectOptions(data);
+                    })
+                    .catch(error => {
+                        console.error('Error fetching updated options:', error);
+                    });
+            });
+
+            function refreshSelectOptions(updatedOptions) {
+                const selectElement = document.getElementById('businessSelect');
+
+
+                selectElement.innerHTML = '';
+
+                // Add a default option
+                const defaultOption = document.createElement('option');
+                defaultOption.value = '';
+                defaultOption.textContent = 'Business Name';
+                defaultOption.disabled = true;
+                selectElement.appendChild(defaultOption);
+
+                // Add the new options in reverse order
+                for (let i = updatedOptions.length - 1; i >= 0; i--) {
+                    const business = updatedOptions[i];
+                    const option = document.createElement('option');
+                    option.value = business.id;
+                    option.textContent = business.name;
+                    selectElement.appendChild(option);
+                }
+            }
+        </script>
     </div>
 </div>
 </div>
+
 <!-- POPUP MODAL -->
 <div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
     <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
diff --git a/osinaweb/templates/addbusiness-modal.html b/osinaweb/templates/addbusiness-modal.html
deleted file mode 100644
index a276bf9f..00000000
--- a/osinaweb/templates/addbusiness-modal.html
+++ /dev/null
@@ -1,111 +0,0 @@
-{% load static %}
-
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Osina</title>
-
-    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-</head>
-
-
-<body>
-    <div id="hiddenContent">
-        <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Business</h1>
-
-        <form method="POST" action="{% url 'save_business_modal' %}" id="addBusinessFormModal">
-            {% csrf_token %}
-            <input name="name" type="text" placeholder="Name"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
-
-            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md mt-4">
-                <div class="flex items-center justify-between">
-                    <input name="logo" required name="cv" type="file" id="actual-btn" accept="image/*" hidden
-                        multiple />
-                    <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload 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>
-
-            <input name="email" type="email" placeholder="Email"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
-
-            <input name="financial_number" type="number" placeholder="Financial Number"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
-
-            <div class="w-full flex justify-start items-center gap-2 mt-4">
-                <input name="vat" type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)" required>
-                <label class="text-slate-800">Vat</label>
-            </div>
-
-
-
-            <script>
-                function updateVatValue(checked) {
-                    const vatInput = document.querySelector('input[name="vat"]');
-                    vatInput.value = checked ? 'True' : 'False';
-                }
-            </script>
-
-            <input name="commercial_registration" type="commercial_registration" placeholder="Commercial registration"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
-
-            <input name="phone_number" type="number" placeholder="Mobile Number"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
-
-            <input name="website" type="text" placeholder="Website"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4">
-
-
-            <select name="business_type" id=""
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-4">
-                <option value="" selected disabled>Business Type</option>
-                <option value="ASSOCIATIONS">Associations</option>
-                <option value="HEALTHCARE">Healthcare</option>
-                <option value="LUXURY">Luxury</option>
-                <option value="MANUFACTURING">Manufacturing</option>
-                <option value="NON-PROFIT">Non-Profit</option>
-                <option value="Education">Education</option>
-                <option value="ENTERTAINMENT">Entertainment</option>
-                <option value="LOGISTICS">Logistics</option>
-                <option value="RETAIL">Retail</option>
-                <option value="AUTOMOTIVE">Automotive</option>
-            </select>
-
-            <div class="w-full flex justify-center items-center mt-3">
-                <button type="submit"
-                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
-                    Business</button>
-            </div>
-        </form>
-
-    </div>
-
-</body> 
-
-</html>
\ No newline at end of file
diff --git a/osinaweb/templates/customer-details.html b/osinaweb/templates/customer-details.html
index f13e1afe..fa595382 100644
--- a/osinaweb/templates/customer-details.html
+++ b/osinaweb/templates/customer-details.html
@@ -188,7 +188,11 @@
                                 </div>
                             </div>
                         </div>
-                
+                    </div>
+                    <div class="w-full">
+                        <a href="{% url 'addbusiness' %}">
+                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100">ADD BUSINESS</button>
+                        </a>
                     </div>
                 </div>
             </div>