diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index 703801d6..eb594ca2 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/__pycache__/admin.cpython-310.pyc b/osinaweb/osinacore/__pycache__/admin.cpython-310.pyc
index dc91d65b..d8020d23 100644
Binary files a/osinaweb/osinacore/__pycache__/admin.cpython-310.pyc and b/osinaweb/osinacore/__pycache__/admin.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc b/osinaweb/osinacore/__pycache__/custom_context.cpython-310.pyc
index dfcbe0e1..7e8d4dee 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__/models.cpython-310.pyc b/osinaweb/osinacore/__pycache__/models.cpython-310.pyc
index 7147d30d..c5d9e448 100644
Binary files a/osinaweb/osinacore/__pycache__/models.cpython-310.pyc and b/osinaweb/osinacore/__pycache__/models.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/views.cpython-310.pyc b/osinaweb/osinacore/__pycache__/views.cpython-310.pyc
index fd876d2d..96c18632 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/admin.py b/osinaweb/osinacore/admin.py
index b8d6537d..2e7f59fd 100644
--- a/osinaweb/osinacore/admin.py
+++ b/osinaweb/osinacore/admin.py
@@ -34,4 +34,5 @@ admin.site.register(Status)
 admin.site.register(Tag)
 admin.site.register(Point)
 admin.site.register(DailyReport)
+admin.site.register(BusinessType)
 
diff --git a/osinaweb/osinacore/custom_context.py b/osinaweb/osinacore/custom_context.py
index 1b578d5c..26a0498c 100644
--- a/osinaweb/osinacore/custom_context.py
+++ b/osinaweb/osinacore/custom_context.py
@@ -1,4 +1,4 @@
-from .models import Task, Status 
+from .models import *
 from django.contrib.auth.models import AnonymousUser
 from datetime import datetime, timedelta
 
@@ -20,11 +20,13 @@ def calculate_time_ago(status):
 
 
 def utilities(request):
+    notes = Note.objects.filter(user=request.user).order_by('-date')[:6]
+    recent_note = Note.objects.filter(user=request.user).last()
+
     if request.user.is_authenticated and request.user.is_superuser:
         open_task_count = Task.objects.filter(status='Open').count()
         working_on_task_count = Task.objects.filter(status='Working On').count()
     
-    
     elif request.user.is_authenticated:
         open_task_count = Task.objects.filter(assigned_to=request.user.staffprofile, status='Open').count()
         working_on_task_count = Task.objects.filter(assigned_to=request.user.staffprofile, status='Working On').count()
@@ -35,8 +37,6 @@ def utilities(request):
         open_task_count = 0
         working_on_task_count = 0
        
-
-    
     
     total_tasks = open_task_count + working_on_task_count
     latest_statuses = Status.objects.all().order_by('-id')[:12]
@@ -48,7 +48,7 @@ def utilities(request):
     
  
     
-    return {'total_tasks': total_tasks, 'latest_statuses' : latest_statuses, 'latest_statuses_time_ago': latest_statuses_time_ago, }
+    return {'total_tasks': total_tasks, 'latest_statuses' : latest_statuses, 'latest_statuses_time_ago': latest_statuses_time_ago,  'notes' : notes, 'recent_note' : recent_note,}
 
 
 
diff --git a/osinaweb/osinacore/migrations/0043_businesstype.py b/osinaweb/osinacore/migrations/0043_businesstype.py
new file mode 100644
index 00000000..88819ec7
--- /dev/null
+++ b/osinaweb/osinacore/migrations/0043_businesstype.py
@@ -0,0 +1,20 @@
+# Generated by Django 4.2.5 on 2024-01-05 18:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osinacore', '0042_remove_customerprofile_email_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='BusinessType',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=50)),
+            ],
+        ),
+    ]
diff --git a/osinaweb/osinacore/migrations/0044_remove_business_business_type.py b/osinaweb/osinacore/migrations/0044_remove_business_business_type.py
new file mode 100644
index 00000000..1bb4cb68
--- /dev/null
+++ b/osinaweb/osinacore/migrations/0044_remove_business_business_type.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.2.5 on 2024-01-05 18:48
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osinacore', '0043_businesstype'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='business',
+            name='business_type',
+        ),
+    ]
diff --git a/osinaweb/osinacore/migrations/0045_business_type.py b/osinaweb/osinacore/migrations/0045_business_type.py
new file mode 100644
index 00000000..c2d6dd67
--- /dev/null
+++ b/osinaweb/osinacore/migrations/0045_business_type.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.5 on 2024-01-05 18:49
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('osinacore', '0044_remove_business_business_type'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='business',
+            name='type',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='osinacore.businesstype'),
+        ),
+    ]
diff --git a/osinaweb/osinacore/migrations/__pycache__/0043_businesstype.cpython-310.pyc b/osinaweb/osinacore/migrations/__pycache__/0043_businesstype.cpython-310.pyc
new file mode 100644
index 00000000..fa110375
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0043_businesstype.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0044_remove_business_business_type.cpython-310.pyc b/osinaweb/osinacore/migrations/__pycache__/0044_remove_business_business_type.cpython-310.pyc
new file mode 100644
index 00000000..80230af1
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0044_remove_business_business_type.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0045_business_type.cpython-310.pyc b/osinaweb/osinacore/migrations/__pycache__/0045_business_type.cpython-310.pyc
new file mode 100644
index 00000000..2be11614
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0045_business_type.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/models.py b/osinaweb/osinacore/models.py
index 79e8cf59..317f73c1 100644
--- a/osinaweb/osinacore/models.py
+++ b/osinaweb/osinacore/models.py
@@ -21,6 +21,12 @@ class Reference(models.Model):
 class Tag(models.Model):
     name = models.CharField(max_length=50)
 
+
+class BusinessType(models.Model):
+    name = models.CharField(max_length=50)
+
+
+
 class Business(models.Model):
     name = models.CharField(max_length=50)
     email = models.EmailField(unique=True)
@@ -29,19 +35,7 @@ class Business(models.Model):
     commercial_registration = models.CharField(max_length=50)
     phone_number = models.CharField(max_length=50)
     website =  models.URLField(null=True)
-    BUSINESS_TYPE = (
-        ('ASSOCIATIONS', 'ASSOCIATIONS'),
-        ('HEALTHCARE', 'HEALTHCARE'),
-        ('LUXURY', 'LUXURY'),
-        ('MANUFACTURING', 'MANUFACTURING'),
-        ('NON-PROFIT', 'NON-PROFIT'),
-        ('EDUCATION', 'EDUCATION'),
-        ('ENTERTAINMENT', 'ENTERTAINMENT'),
-        ('LOGISTICS', 'LOGISTICS'),
-        ('RETAIL', 'RETAIL'),
-        ('AUTOMOTIVE', 'AUTOMOTIVE'),
-    )
-    business_type = models.CharField(max_length=200, choices=BUSINESS_TYPE)
+    type = models.ForeignKey(BusinessType, on_delete=models.CASCADE, null=True, blank=True)
     logo = models.ImageField()
     business_id = models.CharField(max_length=20, null=True, blank=True)  # Allow null and blank for initial creation
     class Meta:
@@ -60,6 +54,8 @@ class Business(models.Model):
 
 
 
+
+
 class CustomerProfile(models.Model):
     user = models.OneToOneField(User, on_delete=models.CASCADE, blank=True)
     mobile_number = models.CharField(max_length=50, blank=True)
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index b33b4b1b..5e2873bf 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -130,6 +130,15 @@ def project_types(request):
     return render(request, 'listing_pages/project-types.html', context)
 
 
+@login_required
+def business_types(request):
+    businesstypes = BusinessType.objects.all().order_by('-id')
+
+    context = {
+    'businesstypes' : businesstypes,
+    }
+    return render(request, 'listing_pages/business-types.html', context)
+
 
 @login_required
 def references(request):
@@ -476,6 +485,13 @@ def add_projecttype_modal(request, *args, **kwargs):
     }
     return render(request, 'popup_modals/addprojecttype-modal.html', context)
 
+
+def add_businesstype_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'popup_modals/addbusinesstype-modal.html', context)
+
 def add_reference_modal(request, *args, **kwargs):
     context = {
 
@@ -900,6 +916,23 @@ def save_projecttype(request):
     return redirect('projecttypes') 
 
 
+@login_required
+def save_businesstype(request):
+    if request.method == 'POST':
+        name = request.POST.get('name')
+
+
+        businesstype = BusinessType(
+        name = name,
+        )
+        businesstype.save()
+
+
+        # Reload the parent page
+        return HttpResponse('<script>window.top.location.reload();</script>')
+    
+    return redirect('businesstypes') 
+
 
 @login_required
 def save_reference(request):
@@ -1143,18 +1176,94 @@ def edit_task(request, *args, **kwargs):
 
 
 @login_required
-def edit_customer(request, *args, **kwargs):
+def edit_customer(request, customer_id):
+    customer = get_object_or_404(CustomerProfile, customer_id=customer_id)
+
+    #Utilities 
+    references = Reference.objects.all()
+    businesses = Business.objects.all
+    customer_status = customer.status
+    customer_reference = customer.reference
+    customer_business = customer.business
+
+
+    if request.method == 'POST':
+         
+        customer.user.first_name = request.POST.get('first_name')
+        customer.user.last_name = request.POST.get('last_name')
+        customer.user.email = request.POST.get('email')
+        customer.user.save()
+        customer.mobile_number = request.POST.get('mobile_number')
+        customer.personal_website = request.POST.get('personal_website')
+        customer.status = request.POST.get('status')
+
+        customer_reference = request.POST.get('reference')
+        reference = get_object_or_404(Reference, id=customer_reference)
+        customer.reference = reference
+
+        if customer.business:
+            customer_business = request.POST.get('business')
+            business = get_object_or_404(Business, id=customer_business)
+            customer.business = business
+
+
+        
+        customer.save()
+        
+
+        return redirect('customerdetails', customer_id=customer.customer_id)    
+
     
     context = {
 
+    'customer' : customer,
+    'references' : references,
+    'businesses' : businesses,
+    'customer_status' : customer_status,
+    'customer_reference' : customer_reference,
+    'customer_business' : customer_business,
+
     }
     return render(request, 'edit_pages/edit-customer.html', context)
 
 
 @login_required
-def edit_business(request, *args, **kwargs):
+def edit_business(request, business_id):
+    business = get_object_or_404(Business, business_id=business_id)
+    business_types = BusinessType.objects.all().order_by('name')
+    current_business_type = None
+    if business.type:
+        current_business_type = business.type
+
+
+    if request.method == 'POST':
+         
+        business.name= request.POST.get('name')
+        business.financial_number = request.POST.get('financial_number')
+        business.commercial_registration = request.POST.get('commercial_registration')
+        business.vat = request.POST.get('vat')
+        business.phone_number = request.POST.get('phone_number')
+        business.website = request.POST.get('website')
+
+
+        business_type = request.POST.get('business_type')
+        type = get_object_or_404(BusinessType, id=business_type)
+        business.type = type
+
+        new_logo = request.FILES.get('logo')
+        if new_logo:  
+            business.logo = new_logo
+
+
+        business.save()
+        
+
+        return redirect('businessdetails', business_id=business.business_id)      
     
     context = {
+    'business' : business,
+    'business_types' : business_types,
+    'current_business_type' : current_business_type,
 
     }
     return render(request, 'edit_pages/edit-business.html', context)
@@ -1193,6 +1302,19 @@ def edit_project_type(request, projecttype_id):
  return render(request, 'edit_pages/edit-project-type.html', {'projecttype': projecttype})
 
 
+@login_required
+def edit_business_type(request, businesstype_id):
+
+ businesstype = get_object_or_404(BusinessType, id=businesstype_id)
+    
+ if request.method == 'POST':
+     businesstype.name = request.POST.get('name')
+     businesstype.save()
+
+     return redirect('businesstypes')
+
+ return render(request, 'edit_pages/edit-business-type.html', {'businesstype': businesstype})
+
 
 @login_required
 def edit_reference(request, reference_id):
@@ -1227,6 +1349,7 @@ def edit_tag(request, tag_id):
 
 
 
+
 # TO UPDATE THE STATUS CONTAINER
 def get_updated_last_status(request):
     if request.user.is_authenticated:
diff --git a/osinaweb/osinaweb/__pycache__/urls.cpython-310.pyc b/osinaweb/osinaweb/__pycache__/urls.cpython-310.pyc
index af4458bc..c31b9d5a 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 a85cd8b2..a37c6515 100644
--- a/osinaweb/osinaweb/urls.py
+++ b/osinaweb/osinaweb/urls.py
@@ -30,12 +30,10 @@ urlpatterns = [
     path('my-tasks/', login_required(views.my_tasks), name='my-tasks'),
     path('customers/', views.customers, name='customers'),
     path('addcustomer/', views.add_customer, name='addcustomer'),
-    path('customerdetails/<str:customer_id>/', views.customerdetails, name='customerdetails'),
-    path('addbusiness/', views.addbusiness, name='addbusiness'),
-    path('businessdetails/<str:business_id>/', views.businessdetails, name='businessdetails'),
+    path('add-business/', views.addbusiness, name='addbusiness'),
+    path('businesses/<str:business_id>/', views.businessdetails, name='businessdetails'),
     path('businesses/', views.businesses, name='businesses'),
     path('addstaff/', views.addstaff, name='adduser'),
-    path('staffdetails/<str:staff_id>/', views.staffdetails, name='userdetails'),
     path('staffs/', views.staffs, name='users'),
     path('staffpositions/', views.staff_positions, name='staffpositions'),
     path('projectdetails/<str:project_id>/', views.detailed_project, name='detailed-project'),
@@ -44,37 +42,49 @@ urlpatterns = [
     path('createtask/', views.create_task, name='createtask'),
     path('createtask/<str:project_id>/', views.createtask_project, name='createtaskproject'),
     path('createtaskepic/', views.createtask_epic, name='createtaskepic'),
-    path('taskdetails/<str:task_id>/', views.detailed_task, name='detailed-task'),
     path('projecttypes/', views.project_types, name='projecttypes'),
+    path('businesstypes/', views.business_types, name='businesstypes'),
     path('references/', views.references, name='references'),
     path('tags/', views.tags, name='tags'),
     path('dailyreports/', views.daily_reports, name='dailyreports'),
-    path('adddailyreport/', views.add_daily_report, name='adddailyreport'),
+    path('add-dailyreport/', views.add_daily_report, name='adddailyreport'),
+
+
+
+    #Detail pages urls
+    path('businesses/<str:business_id>/', views.businessdetails, name='businessdetails'),
+    path('customers/<str:customer_id>/', views.customerdetails, name='customerdetails'),
+    path('staffs/<str:staff_id>/', views.staffdetails, name='userdetails'),
+    path('tasks/<str:task_id>/', views.detailed_task, name='detailed-task'),
+
+
+
 
 
     #Fetch urls
     path("fetch_related_tasks/", views.fetch_related_tasks, name="fetch_related_tasks"),
 
 
-    # Modals urls
-    path('addstatus/', views.add_status_modal, name='addstatus'),
-    path('addnote/', views.add_note_modal, name='addnote'),
-    path('addfile/', views.add_file_modal, name='addfile'),
-    path('addcredentials/', views.add_credentials_modal, name='addcredentials'),
-    path('updatestatus/<str:task_id>/', views.update_status_modal, name='updatestatus'),
-    path('addpoint/<str:task_id>/', views.add_point_modal, name='addpoint'),
-    path('showpoints/<str:task_id>/', views.show_points_modal, name='showpoints'),
-    path('addtime/', views.add_time_modal, name='addtime'),
+    #Modals urls
+    path('add-status/', views.add_status_modal, name='addstatus'),
+    path('add-note/', views.add_note_modal, name='addnote'),
+    path('add-file/', views.add_file_modal, name='addfile'),
+    path('add-credentials/', views.add_credentials_modal, name='addcredentials'),
+    path('update-status/<str:task_id>/', views.update_status_modal, name='updatestatus'),
+    path('add-point/<str:task_id>/', views.add_point_modal, name='addpoint'),
+    path('show-points/<str:task_id>/', views.show_points_modal, name='showpoints'),
+    path('add-time/', views.add_time_modal, name='addtime'),
     path('timeline/', views.timeline_modal, name='timeline'),
-    path('deletetask/', views.delete_task_modal, name='deletetask'),
-    path('addprojecttype/', views.add_projecttype_modal, name='addprojecttype'),
-    path('addreference/', views.add_reference_modal, name='addreference'),
-    path('addtag/', views.add_tag_modal, name='addtag'),
-    path('addbusinesscustomer/', views.add_business_modal, name='addbusinesscustomer'),
-    path('addstaffposition/', views.staff_position_modal, name='addstaffposition'),
+    path('delete-task/', views.delete_task_modal, name='deletetask'),
+    path('add-projecttype/', views.add_projecttype_modal, name='addprojecttype'),
+    path('add-businesstype/', views.add_businesstype_modal, name='addbusinesstype'),
+    path('add-reference/', views.add_reference_modal, name='addreference'),
+    path('add-tag/', views.add_tag_modal, name='addtag'),
+    path('add-businesscustomer/', views.add_business_modal, name='addbusinesscustomer'),
+    path('add-staffposition/', views.staff_position_modal, name='addstaffposition'),
 
 
-    # Save Urls
+    #Save Urls
     path('save_note/', views.save_note, name='save_note'),
     path('save_project/', views.save_project, name='save_project'),
     path('save_epic/', views.save_epic, name='save_epic'),
@@ -85,6 +95,7 @@ urlpatterns = [
     path('save_staff/', views.save_staff, name='save_staff'),
     path('save_status/', views.save_status, name='save_status'),
     path('save_projecttype/', views.save_projecttype, name='save_projecttype'),
+    path('save_businesstype/', views.save_businesstype, name='save_businesstype'),
     path('save_reference/', views.save_reference, name='save_reference'),
     path('save_tag/', views.save_tag, name='save_tag'),
     path('save_point/', views.save_point, name='save_point'),
@@ -92,19 +103,18 @@ urlpatterns = [
     path('save_dailyreport/', views.save_dailyreport, name='save_dailyreport'),
 
 
-
-
-    # Edit Urls
-    path('editproject/', views.edit_project, name='editproject'),
-    path('editepic/', views.edit_epic, name='editepic'),
-    path('edittask/', views.edit_task, name='edittask'),
-    path('editcustomer/', views.edit_customer, name='editcustomer'),
-    path('editbusiness/', views.edit_business, name='editbusiness'),
-    path('editstaff/', views.edit_staff, name='editstaff'),
-    path('editprojecttype/<int:projecttype_id>', views.edit_project_type, name='editprojecttype'),
-    path('editreference/<int:reference_id>', views.edit_reference, name='editreference'),
-    path('edittag/<int:tag_id>', views.edit_tag, name='edittag'),
-    path('editstaffposition/', views.edit_staff_position, name='editstaffposition'),
+    #Edit Pages
+    path('edit-project/', views.edit_project, name='editproject'),
+    path('edit-epic/', views.edit_epic, name='editepic'),
+    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-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'),
+    path('edit-tag/<int:tag_id>', views.edit_tag, name='edittag'),
+    path('edits-taffposition/', views.edit_staff_position, name='editstaffposition'),
     path('mark_point_working_on/<int:point_id>/<str:task_id>/', views.mark_point_working_on, name='mark_point_working_on'),
     path('mark_point_working_on_task_page/<int:point_id>/<str:task_id>/', views.mark_point_working_on_task_page, name='mark_point_working_on_task_page'),
     path('mark_point_completed/<int:point_id>/<str:task_id>/', views.mark_point_completed, name='mark_point_completed'),
@@ -112,7 +122,7 @@ urlpatterns = [
    
 
 
-
+   #Fetch Urls
    path('getupdatedlaststatus/', views.get_updated_last_status, name='getupdatedlaststatus'),
    path('getupdatedactivities/', views.get_latest_activities, name='getupdatedactivities'),
 ]
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 4345e49e..493aa298 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -977,10 +977,6 @@ video {
   width: 380px;
 }
 
-.w-\[40\%\] {
-  width: 40%;
-}
-
 .w-\[40px\] {
   width: 40px;
 }
@@ -1013,10 +1009,6 @@ video {
   width: 55%;
 }
 
-.w-\[60\%\] {
-  width: 60%;
-}
-
 .w-\[60px\] {
   width: 60px;
 }
@@ -1955,14 +1947,14 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.hover\:text-gray-500:hover {
+.hover\:text-red-500:hover {
   --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+  color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
-.hover\:text-red-500:hover {
+.hover\:text-slate-700:hover {
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(51 65 85 / var(--tw-text-opacity));
 }
 
 .hover\:text-slate-800:hover {
diff --git a/osinaweb/static/js/pop-modals.js b/osinaweb/static/js/pop-modals.js
index 59e188e2..e1cd5cd8 100644
--- a/osinaweb/static/js/pop-modals.js
+++ b/osinaweb/static/js/pop-modals.js
@@ -54,6 +54,7 @@ document.addEventListener("DOMContentLoaded", function () {
     addButtonClickListener("addFileButton", "500px", "320px");
     addButtonClickListener("addCredentialsButton", "500px", "300px");
     addButtonClickListener("addProjectTypeButton", "fit-content", "160px");
+    addButtonClickListener("addBusinessTypeButton", "fit-content", "160px");
     addButtonClickListener("addReferenceButton", "fit-content", "230px");
     addButtonClickListener("addTagButton", "fit-content", "160px");
     addButtonClickListener("addBusinessButton", "550px", "500px");
diff --git a/osinaweb/templates/details_pages/business-details.html b/osinaweb/templates/details_pages/business-details.html
index e9071b99..5a16f490 100644
--- a/osinaweb/templates/details_pages/business-details.html
+++ b/osinaweb/templates/details_pages/business-details.html
@@ -68,7 +68,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
                     Business</button>
-                <a href="{% url 'editbusiness' %}">
+                <a href="{% url 'editbusiness' business.business_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
                         Business</button>
@@ -108,13 +108,13 @@
 
             <div>
                 <p class="text-gray-500 text-xl">Business Type: <span
-                        class="text-slate-800 text-xl font-semibold">{{business.business_type}}</span></p>
+                        class="text-slate-800 text-xl font-semibold">{{business.type.name}}</span></p>
             </div>
 
             <div>
                 <p class="text-gray-500 text-xl">Related Customer: 
                         {% for customer_profile in business.customerprofile_set.all %}   
-                        <a class="cursor-pointer" href="{% url 'customerdetails' customer_profile.customer_id %}">  <span class="text-slate-800 text-xl font-semibold hover:text-gray-500">{{ customer_profile.user.first_name }} {{customer_profile.user.last_name}} <i class="fa fa-angle-double-right"></i>
+                        <a class="cursor-pointer" href="{% url 'customerdetails' customer_profile.customer_id %}">  <span class="text-blue-500 text-xl font-semibold hover:text-slate-700 underline">{{ customer_profile.user.first_name }} {{customer_profile.user.last_name}} <i class="fa fa-angle-double-right"></i>
                         {% if not forloop.last %}, {% endif %}
                         </span> </a>
                         {%endfor%}
diff --git a/osinaweb/templates/details_pages/customer-details.html b/osinaweb/templates/details_pages/customer-details.html
index f02dddc3..9f199622 100644
--- a/osinaweb/templates/details_pages/customer-details.html
+++ b/osinaweb/templates/details_pages/customer-details.html
@@ -80,7 +80,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
                     Customer</button>
-                <a href="{% url 'editcustomer' %}">
+                <a href="{% url 'editcustomer' customer.customer_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
                         Customer</button>
@@ -90,17 +90,17 @@
         <div class="w-full flex flex-col gap-4 mt-5">
             <div>
                 <p class="text-gray-500 text-xl">First Name: <span
-                        class="text-slate-800 text-xl font-semibold">{{customer.first_name}}</span></p>
+                        class="text-slate-800 text-xl font-semibold">{{customer.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">{{customer.last_name}}</span></p>
+                        class="text-slate-800 text-xl font-semibold">{{customer.user.last_name}}</span></p>
             </div>
 
             <div>
                 <p class="text-gray-500 text-xl">Email: <span
-                        class="text-slate-800 text-xl font-semibold">{{customer.email}}</span></p>
+                        class="text-slate-800 text-xl font-semibold">{{customer.user.email}}</span></p>
             </div>
            {% if customer.personal_website %}
             <div>
diff --git a/osinaweb/templates/edit_pages/edit-business-type.html b/osinaweb/templates/edit_pages/edit-business-type.html
new file mode 100644
index 00000000..f8f89a74
--- /dev/null
+++ b/osinaweb/templates/edit_pages/edit-business-type.html
@@ -0,0 +1,44 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Business Type
+        </h1>
+
+        <form id="hiddenContent"  method="POST" action="{% url 'editbusinesstype' businesstype.id %}">
+            {% csrf_token %}
+    
+            <div class="w-full flex justify-center items-center">
+                <input name="name" type="text" placeholder="Business Type Name"
+                value="{{businesstype.name}}"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
+                required>
+            </div>
+        
+            <div class="w-full flex justify-center items-center mt-4">
+                <button type="submit"
+                    class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Save</button>
+            </div>
+        </form>
+
+    </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">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/templates/edit_pages/edit-business.html b/osinaweb/templates/edit_pages/edit-business.html
index 945570e0..f77c5fad 100644
--- a/osinaweb/templates/edit_pages/edit-business.html
+++ b/osinaweb/templates/edit_pages/edit-business.html
@@ -8,18 +8,27 @@
             Edit Business
         </h1>
 
-        <form method="POST" action="{% url 'save_business' %}" enctype="multipart/form-data">
+        <form method="POST" action="{% url 'editbusiness' business.business_id %}" enctype="multipart/form-data">
             {% 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"
-            value="Business1"
-            required>
+        <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>
+                <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-2"
+                value="{{business.name}}"
+                required>
+            </div>
 
-            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md mt-4">
+            <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" required type="file" id="actual-btn" accept="image/*" hidden/>
+                    <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 Business
+                        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
@@ -44,64 +53,86 @@
                 });
             </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"
-                value="nataly.aw@ositcom.net"
-                required>
+            <div class="w-full mt-4">
+                <label class="text-gray-500 text-xl">Email:</label>
+                <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-2"
+                    value="{{business.email}}"
+                    required>
+            </div>
+
+            <div class="w-full mt-4">
+                <label class="text-gray-500 text-xl">Financial Number:</label>
+                <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-2"
+                    value="{{business.financial_number}}"
+                    required>
+            </div>
+
+
+
+            <div class="w-full mt-4">
+                <label class="text-gray-500 text-xl">Commercial Registration:</label>
+                <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-2"
+                    value="{{business.commercial_registration}}"
+                    required>
+            </div>
+
+            <div class="w-full mt-4">
+                <label class="text-gray-500 text-xl">Phone Number:</label>
+                <input name="phone_number" type="number" placeholder="Phone Number"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2"
+                    value="{{business.phone_number}}"
+                    required>
+            </div>
+
+            <div class="w-full mt-4">
+                <label class="text-gray-500 text-xl">Website:</label>
+                <input name="website" type="text" placeholder="Website"
+                    value="{{business.website}}"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2">
+            </div>
+
+            <div class="w-full mt-4">
+                <label class="text-gray-500 text-xl">Type</label>
+                <select name="business_type" id="business_type_select"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2">
+                    {% if not business.type %}
+                    <option value="" selected>Select Business Type</option>
+                    {% endif %}
+
+                    {% for type in business_types %}
+                        <option value="{{ type.id }}"
+                            {% if current_business_type and current_business_type.id == type.id %}selected{% endif %}>
+                            {{ type.name }}
+                        </option>
+                    {% endfor %}
+                </select>
+            </div>
 
-            <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"
-                value="111"
-                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>
+                <input {% if business.vat %} checked {% endif %} type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)">
+                <label class="text-gray-500 text-xl" for="vatCheckbox">VAT</label>
+                <input type="hidden" name="vat" value="False">
             </div>
-          
- 
             
             <script>
-            function updateVatValue(checked) {
-              const vatInput = document.querySelector('input[name="vat"]');
-              vatInput.value = checked ? 'True' : 'False';
-            }
+                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"
-                value="111"
-                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"
-                value="111"
-                required>
-
-            <input name="website" type="text" placeholder="Website"
-                value="wwww.google.com"
-                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="" disabled>Business Type</option>
-                <option value="ASSOCIATIONS" selected>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">Save</button>
             </div>
+        </div>
+
         </form>
 
     </div>
diff --git a/osinaweb/templates/edit_pages/edit-customer.html b/osinaweb/templates/edit_pages/edit-customer.html
index 6e163d3f..2dfb4e8a 100644
--- a/osinaweb/templates/edit_pages/edit-customer.html
+++ b/osinaweb/templates/edit_pages/edit-customer.html
@@ -8,55 +8,100 @@
             Edit Customer
         </h1>
 
-        <form method="POST" action="{% url 'save_customer' %}">
+        <form method="POST" action="{% url 'editcustomer' customer.customer_id %}">
             {% csrf_token %}
             <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
 
-                <input name="first_name" type="text" placeholder="First Name"
-                value="Salim"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
-
-                <input name="last_name" type="text" placeholder="Last Name"
-                value="Elliye"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
-
-                <input name="email" type="email" placeholder="Email"
-                value="salim@ositcom.net"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
-
-                <input name="mobile_number" type="number" placeholder="Mobile Number"
-                value="71197823"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
-
-                <input name="personal_website" type="url" placeholder="Personal Website"
-                value="www.google.com"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
-                
-                <select name="status"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
-                    required>
-                    <option value="" disabled>Status</option>
-                    <option value="Active" selected>Active</option>
-                    <option value="Suspended">Suspended</option>
-                    <option value="Terminated">Terminated</option>
-                </select>
-
-                <select name="reference"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
-                    required>
-                    <option value="" disabled>Reference</option>
-                    <option value="" selected>Reference 1</option>
-                    {% for reference in references %}
-                    <option value="{{reference.id}}">{{reference.name}}</option>
-                    {% endfor %}
-                </select>
-
-                <select id="businessTypeSelect"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
-                    <option value="" disabled>Type</option>
-                    <option value="business" selected>Business</option>
-                    <option value="personal">Personal</option>
-                </select>
+                <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="{{customer.user.first_name}}"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
+               </div>
+
+               <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="{{customer.user.last_name}}"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
+                </div>
+
+
+               <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Email:</label>
+                    <input name="email" type="email" placeholder="Email"
+                    value="{{customer.user.email}}"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
+                </div>
+
+                <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="{{customer.mobile_number}}"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2" required>
+                </div>
+
+
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Personal Website:</label>
+                    <input name="personal_website" type="url" placeholder="Personal Website"
+                    value="{{customer.personal_website}}"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2">
+                </div>
+
+
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Status:</label>
+                    <select name="status"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2"
+                        required>
+                        <option value="" disabled>Status</option>
+                        <option value="Active"{% if customer_status == 'Active' %} selected {% endif %}>Active</option>
+                        <option value="Suspended"{% if customer_status == 'Suspended' %} selected {% endif %}>Suspended</option>
+                        <option value="Terminated"{% if customer_status == 'Terminated' %} selected {% endif %}>Terminated</option>
+                    </select>
+                </div>
+
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Reference:</label>
+                    <select name="reference"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2"
+                        required>
+                        {% for reference in references %}
+                            <option value="{{ reference.id }}" {% if reference.id == customer_reference.id %} selected {% endif %}>
+                                {{ reference.name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
+
+                {% if not customer_business %}
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Type:</label>
+                    <select id="businessTypeSelect"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2">
+                        <option value="" disabled>Type</option>
+                        <option value="business" {% if customer.business %} selected {% endif %} >Business</option>
+                        <option value="personal" {% if not customer.business %} selected {% endif %}>Personal</option>
+                    </select>
+                </div>
+                {% endif %}
+
+
+                {% if customer_business %}
+                <div class="w-full mt-4">
+                    <label class="text-gray-500 text-xl">Business:</label>
+                    <select name="business"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2"
+                        required>
+                        {% for business in businesses %}
+                            <option value="{{ business.id }}" {% if business.id == customer_business.id %} selected {% endif %}>
+                                {{ business.name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                {% endif %}
 
                 <div class="w-[80%] mx-auto border border-gray-300 rounded-md py-5 px-3 bg-white hidden"
                     id="addBusinessContainer">
@@ -93,10 +138,6 @@
 
                 </script>
 
-                <input name="password" type="password" placeholder="Password"
-                value="1234567"
-                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"
                         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">Save</button>
diff --git a/osinaweb/templates/listing_pages/business-types.html b/osinaweb/templates/listing_pages/business-types.html
new file mode 100644
index 00000000..1cce869f
--- /dev/null
+++ b/osinaweb/templates/listing_pages/business-types.html
@@ -0,0 +1,147 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+<!-- NOTES SECTION -->
+<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
+    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex justify-between items-center">
+            <div>
+                <p class="text-base text-gray-500">Recent Note:</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
+            </div>
+            <div class="flex justify-end items-center gap-4">
+                <button
+                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
+                    id="showNotesButton">Show
+                    Notes</button>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
+            </div>
+            {% endfor %}
+
+        </div>
+    </div>
+</div>
+
+<!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / BUSINESS TYPES SECTION -->
+    <div class="w-[74.5%]">
+        <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
+            <h1 class="text-slate-800 text-[30px] font-semibold">Businness Types</h1>
+
+            <!-- FILTERING -->
+            <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
+                <div class="flex justify-start items-center gap-5">
+                    <div class="relative h-fit w-fit flex items-center">
+                        <input type="text" placeholder="Enter Business Type"
+                            class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
+                        <button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <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 addBusinessTypeButton" data-modal-url="{% url 'addbusinesstype' %}">Add
+                    Business Type</button>
+                </div>
+            </div>
+
+            <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
+                <table class="min-w-full divide-y">
+                    <!-- TABLE HEADER -->
+                    <thead class="bg-gray-50">
+                        <tr>
+                            <th scope="col"
+                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                Business Type
+                            </th>
+                            <th scope="col"
+                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                                Actions
+                            </th>
+                        </tr>
+                    </thead>
+
+                    <!-- TABLE BODY -->
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <!-- 1st row -->
+                        {% for type in businesstypes %}
+                        <tr>
+                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                <p class="text-slate-800">{{type.name}}</p>
+                            </td>
+
+                            <td class="px-6 py-4 text-center text-sm">
+                                <div class="flex justify-center items-center gap-3">
+                                    <a href="{% url 'editbusinesstype' type.id %}">
+                                        <div class="text-[15px] text-blue-500 cursor-pointer">
+                                            <i class="fa fa-edit"></i>
+                                        </div>
+                                    </a>
+                                    <div class="text-[15px] text-red-500 cursor-pointer">
+                                        <i class="fa fa-trash"></i>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
+        <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
+        <div class="w-full h-fit mt-2" id="activitiesContainer">
+
+                {% include 'recent-activities.html' %}
+
+        </div>
+    </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">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+<!---------------------- JS SCRIPTS -------------------->
+
+<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
+<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/templates/listing_pages/businesses.html b/osinaweb/templates/listing_pages/businesses.html
index 31ef27a6..9f424105 100644
--- a/osinaweb/templates/listing_pages/businesses.html
+++ b/osinaweb/templates/listing_pages/businesses.html
@@ -8,7 +8,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -16,8 +22,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -26,29 +32,13 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
@@ -92,12 +82,12 @@
                                 Name
                             </th>
                             <th scope="col"
-                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
-                                Business Type
+                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                            Customer
                             </th>
                             <th scope="col"
                                 class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
-                                Financial Number
+                                Business Type
                             </th>
                             <th scope="col"
                                 class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
@@ -116,13 +106,17 @@
                             </td>
 
                             <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                <p class="text-slate-800">{{business.business_type}}</p>
+                                {% for customer in business.customerprofile_set.all %}
+                                <p class="text-slate-800">{{customer.user.first_name}} {{customer.user.last_name}}</p>
+                                {% endfor %}
                             </td>
 
                             <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                <p class="text-slate-800">{{business.financial_number}}</p>
+                                <p class="text-slate-800">{{business.type.name}}</p>
                             </td>
 
+
+
                             <td class="px-6 py-4 text-center text-sm">
                                 <div class="flex justify-center items-center gap-3">
                                     <a href="{% url 'businessdetails' business.business_id %}">
@@ -130,7 +124,7 @@
                                             <i class="fa fa-eye"></i>
                                         </div>
                                     </a>
-                                    <a href="{% url 'editbusiness' %}">
+                                    <a href="{% url 'editbusiness' business.business_id %}">
                                         <div class="text-[15px] text-blue-500 cursor-pointer">
                                             <i class="fa fa-edit"></i>
                                         </div>
diff --git a/osinaweb/templates/listing_pages/customers.html b/osinaweb/templates/listing_pages/customers.html
index 741dbe39..5d0e979e 100644
--- a/osinaweb/templates/listing_pages/customers.html
+++ b/osinaweb/templates/listing_pages/customers.html
@@ -8,7 +8,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -16,8 +22,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -26,29 +32,13 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
@@ -153,7 +143,7 @@
                                         </div>
                                     </a>
 
-                                    <a href="{% url 'editcustomer' %}">
+                                    <a href="{% url 'editcustomer' customer.customer_id %}">
                                         <div class="text-[15px] text-blue-500 cursor-pointer">
                                             <i class="fa fa-edit"></i>
                                         </div>
diff --git a/osinaweb/templates/listing_pages/daily-reports.html b/osinaweb/templates/listing_pages/daily-reports.html
index 714b9bab..03e8f1fe 100644
--- a/osinaweb/templates/listing_pages/daily-reports.html
+++ b/osinaweb/templates/listing_pages/daily-reports.html
@@ -7,7 +7,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -15,8 +21,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -25,33 +31,18 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
 
+
 <!-- DAILY REPORTS USERS ACTIVITY SECTION -->
 <div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
     <!-- LEFT SIDE / USERS SECTION -->
diff --git a/osinaweb/templates/listing_pages/project-types.html b/osinaweb/templates/listing_pages/project-types.html
index bb3ec194..5e2e8533 100644
--- a/osinaweb/templates/listing_pages/project-types.html
+++ b/osinaweb/templates/listing_pages/project-types.html
@@ -7,7 +7,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -15,8 +21,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -25,29 +31,13 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
diff --git a/osinaweb/templates/listing_pages/projects.html b/osinaweb/templates/listing_pages/projects.html
index d4a63fa4..ea9fb7c1 100644
--- a/osinaweb/templates/listing_pages/projects.html
+++ b/osinaweb/templates/listing_pages/projects.html
@@ -8,7 +8,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -16,8 +22,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -26,29 +32,13 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
diff --git a/osinaweb/templates/listing_pages/references.html b/osinaweb/templates/listing_pages/references.html
index 70aae6ee..578d88d8 100644
--- a/osinaweb/templates/listing_pages/references.html
+++ b/osinaweb/templates/listing_pages/references.html
@@ -7,7 +7,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -15,8 +21,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -25,29 +31,13 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
diff --git a/osinaweb/templates/listing_pages/staff-positions.html b/osinaweb/templates/listing_pages/staff-positions.html
index 2c46dbb7..4e00287f 100644
--- a/osinaweb/templates/listing_pages/staff-positions.html
+++ b/osinaweb/templates/listing_pages/staff-positions.html
@@ -8,7 +8,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -16,8 +22,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -26,29 +32,13 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
diff --git a/osinaweb/templates/listing_pages/staffs.html b/osinaweb/templates/listing_pages/staffs.html
index 5faf28f4..a02417ca 100644
--- a/osinaweb/templates/listing_pages/staffs.html
+++ b/osinaweb/templates/listing_pages/staffs.html
@@ -8,7 +8,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -16,8 +22,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -26,29 +32,13 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
diff --git a/osinaweb/templates/listing_pages/tags.html b/osinaweb/templates/listing_pages/tags.html
index 7fd8828a..9ae515b8 100644
--- a/osinaweb/templates/listing_pages/tags.html
+++ b/osinaweb/templates/listing_pages/tags.html
@@ -7,7 +7,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -15,8 +21,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -25,29 +31,13 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
diff --git a/osinaweb/templates/listing_pages/tasks.html b/osinaweb/templates/listing_pages/tasks.html
index 996e9757..db92b3df 100644
--- a/osinaweb/templates/listing_pages/tasks.html
+++ b/osinaweb/templates/listing_pages/tasks.html
@@ -7,7 +7,13 @@
         <div class="w-full flex justify-between items-center">
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
-                <p class="text-slate-700">Send an Email to Salim.</p>
+                <div class="flex justify-start items-center gap-2">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
+
+                    </div>
+                    <p class="text-slate-700">{{recent_note.text}}</p>
+                </div>
             </div>
             <div class="flex justify-end items-center gap-4">
                 <button
@@ -15,8 +21,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                    id="addNoteButton">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -25,29 +31,13 @@
         <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
         <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
             id="notesContainer">
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                <p class="text-base text-slate-800">Send an Email to Salim.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Contact the client.</p>
-            </div>
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            {% for note in notes %}
+            <div class="w-[16.33%] h-[150px] shadow-sm p-5" style="background-color: {{note.color}}">
+                <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
+            {% endfor %}
 
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
-
-            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-            </div>
         </div>
     </div>
 </div>
diff --git a/osinaweb/templates/main.html b/osinaweb/templates/main.html
index 0137da2b..05e1c8f2 100644
--- a/osinaweb/templates/main.html
+++ b/osinaweb/templates/main.html
@@ -167,24 +167,32 @@
                             </div>
                         </a>
 
-                        <a href="{% url 'references' %}">
+
+                        <a href="{% url 'staffpositions' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                <p class="text-white">References</p>
+                                <p class="text-white">Staff Positions</p>
                             </div>
                         </a>
 
-                        <a href="{% url 'tags' %}">
+                        <a href="{% url 'businesstypes' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                <p class="text-white">Tags</p>
+                                <p class="text-white">Business Types</p>
                             </div>
                         </a>
 
-                        <a href="{% url 'staffpositions' %}">
+                        <a href="{% url 'references' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                <p class="text-white">Staff Positions</p>
+                                <p class="text-white">References</p>
+                            </div>
+                        </a>
+
+                        <a href="{% url 'tags' %}">
+                            <div
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
+                                <p class="text-white">Tags</p>
                             </div>
                         </a>
 
diff --git a/osinaweb/templates/popup_modals/addbusinesstype-modal.html b/osinaweb/templates/popup_modals/addbusinesstype-modal.html
new file mode 100644
index 00000000..1fb10722
--- /dev/null
+++ b/osinaweb/templates/popup_modals/addbusinesstype-modal.html
@@ -0,0 +1,32 @@
+{% 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>
+    <form id="hiddenContent"  method="POST" action="{% url 'save_businesstype' %}">
+        {% csrf_token %}
+        <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Business Type</h1>
+    
+        <div class="w-full flex justify-center items-center">
+            <input name="name" type="text" placeholder="Business Type Name"
+            class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
+            required>
+        </div>
+    
+        <div class="w-full flex justify-center items-center mt-4">
+            <button type="submit"
+                class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Add</button>
+        </div>
+    </form>
+</body>
+</html>
\ No newline at end of file