diff --git a/osinaweb/billing/__pycache__/models.cpython-312.pyc b/osinaweb/billing/__pycache__/models.cpython-312.pyc
index a52836bd..7f78fd0c 100644
Binary files a/osinaweb/billing/__pycache__/models.cpython-312.pyc and b/osinaweb/billing/__pycache__/models.cpython-312.pyc differ
diff --git a/osinaweb/billing/__pycache__/urls.cpython-312.pyc b/osinaweb/billing/__pycache__/urls.cpython-312.pyc
index 2c4775dd..7688d1d4 100644
Binary files a/osinaweb/billing/__pycache__/urls.cpython-312.pyc and b/osinaweb/billing/__pycache__/urls.cpython-312.pyc differ
diff --git a/osinaweb/billing/migrations/0039_recurringcycle_cycle_price.py b/osinaweb/billing/migrations/0039_recurringcycle_cycle_price.py
new file mode 100644
index 00000000..63e32fc5
--- /dev/null
+++ b/osinaweb/billing/migrations/0039_recurringcycle_cycle_price.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.0.4 on 2024-04-23 11:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('billing', '0038_alter_invoice_pdf'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='recurringcycle',
+            name='cycle_price',
+            field=models.FloatField(null=True),
+        ),
+    ]
diff --git a/osinaweb/billing/migrations/__pycache__/0039_recurringcycle_cycle_price.cpython-312.pyc b/osinaweb/billing/migrations/__pycache__/0039_recurringcycle_cycle_price.cpython-312.pyc
new file mode 100644
index 00000000..ce975d65
Binary files /dev/null and b/osinaweb/billing/migrations/__pycache__/0039_recurringcycle_cycle_price.cpython-312.pyc differ
diff --git a/osinaweb/billing/models.py b/osinaweb/billing/models.py
index 8316979e..49841910 100644
--- a/osinaweb/billing/models.py
+++ b/osinaweb/billing/models.py
@@ -23,6 +23,7 @@ class Item(models.Model):
 class RecurringCycle(models.Model):
     item = models.ForeignKey(Item, on_delete=models.CASCADE, null=True)
     months = models.IntegerField()
+    cycle_price = models.FloatField(null=True)
     def __str__(self):
         return f"{self.months} months"
 
diff --git a/osinaweb/billing/templates/listing_pages/invoices.html b/osinaweb/billing/templates/listing_pages/invoices.html
index 8c2a6720..01a14386 100644
--- a/osinaweb/billing/templates/listing_pages/invoices.html
+++ b/osinaweb/billing/templates/listing_pages/invoices.html
@@ -7,7 +7,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Invoices</h1>
+        <h1 class="text-secondosiblue text-[25px]">Invoices</h1>
 
         <div
             class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
diff --git a/osinaweb/billing/templates/listing_pages/items.html b/osinaweb/billing/templates/listing_pages/items.html
index 2b18a490..a83a288e 100644
--- a/osinaweb/billing/templates/listing_pages/items.html
+++ b/osinaweb/billing/templates/listing_pages/items.html
@@ -60,15 +60,15 @@
                     {% for product in products %}
                     <tr>
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{product.title}}</p>
+                            <p class="text-secondosiblue">{{product.title}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{product.item_type}}</p>
+                            <p class="text-secondosiblue">{{product.item_type}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">${{product.amount}}</p>
+                            <p class="text-secondosiblue">${{product.amount}}</p>
                         </td>
 
 
@@ -129,19 +129,19 @@
                     {% for service in services %}
                     <tr>
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{service.title}}</p>
+                            <p class="text-secondosiblue">{{service.title}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{service.customer.user.first_name}} {{service.customer.user.last_name}}</p>
+                            <p class="text-secondosiblue">{{service.customer.user.first_name}} {{service.customer.user.last_name}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{service.item_type}}</p>
+                            <p class="text-secondosiblue">{{service.item_type}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">${{service.amount}}</p>
+                            <p class="text-secondosiblue">${{service.amount}}</p>
                         </td>
                     
 
diff --git a/osinaweb/billing/templates/listing_pages/orders.html b/osinaweb/billing/templates/listing_pages/orders.html
index 5f26d295..dc13d514 100644
--- a/osinaweb/billing/templates/listing_pages/orders.html
+++ b/osinaweb/billing/templates/listing_pages/orders.html
@@ -5,7 +5,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Orders</h1>
+        <h1 class="text-secondosiblue text-[25px]">Orders</h1>
         <div
             class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
             <div class="w-full s:w-fit flex justify-start items-center gap-5">
@@ -60,15 +60,15 @@
                     {% for order in orders %}
                     <tr>
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{order.order_id}}</p>
+                            <p class="text-secondosiblue">{{order.order_id}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{order.customer.user.first_name}} {{order.customer.user.last_name}}</p>
+                            <p class="text-secondosiblue">{{order.customer.user.first_name}} {{order.customer.user.last_name}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">${{order.get_cart_total}}</p>
+                            <p class="text-secondosiblue">${{order.get_cart_total}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300 {% if order.status == 'Completed' %}  bg-green-700  {% elif order.status == 'Pending' %}  bg-yellow-500 {% else %} bg-gray-400 {% endif %}">
diff --git a/osinaweb/customercore/__pycache__/urls.cpython-312.pyc b/osinaweb/customercore/__pycache__/urls.cpython-312.pyc
index ad780d28..03734bb5 100644
Binary files a/osinaweb/customercore/__pycache__/urls.cpython-312.pyc and b/osinaweb/customercore/__pycache__/urls.cpython-312.pyc differ
diff --git a/osinaweb/customercore/__pycache__/views.cpython-312.pyc b/osinaweb/customercore/__pycache__/views.cpython-312.pyc
index 0e8a7865..df8fa745 100644
Binary files a/osinaweb/customercore/__pycache__/views.cpython-312.pyc and b/osinaweb/customercore/__pycache__/views.cpython-312.pyc differ
diff --git a/osinaweb/customercore/templates/listing_pages/customer-invoices.html b/osinaweb/customercore/templates/listing_pages/customer-invoices.html
index 50332692..76e45116 100644
--- a/osinaweb/customercore/templates/listing_pages/customer-invoices.html
+++ b/osinaweb/customercore/templates/listing_pages/customer-invoices.html
@@ -5,7 +5,7 @@
 <div class="w-full px-5 s:px-9 flex flex-col gap-3">
     <!-- INVOICES -->
     <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Invoices</h1>
+        <h1 class="text-secondosiblue text-[25px]">Invoices</h1>
         <div class="overflow-x-auto border border-gray-300 rounded-md mt-4">
             <table class="min-w-full divide-y">
                 <!-- TABLE HEADER -->
diff --git a/osinaweb/customercore/templates/listing_pages/customer-orders.html b/osinaweb/customercore/templates/listing_pages/customer-orders.html
index 5a091f30..891afe32 100644
--- a/osinaweb/customercore/templates/listing_pages/customer-orders.html
+++ b/osinaweb/customercore/templates/listing_pages/customer-orders.html
@@ -5,7 +5,7 @@
 
 <div class="w-full px-5 s:px-9 flex flex-col gap-3">
     <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">My Orders</h1>
+        <h1 class="text-secondosiblue text-[25px]">My Orders</h1>
 
 
         <div class="overflow-x-auto border border-gray-300 rounded-md mt-4">
diff --git a/osinaweb/customercore/templates/listing_pages/products.html b/osinaweb/customercore/templates/listing_pages/products.html
index 00976714..1e37cd5c 100644
--- a/osinaweb/customercore/templates/listing_pages/products.html
+++ b/osinaweb/customercore/templates/listing_pages/products.html
@@ -67,9 +67,11 @@
                 <div class="flex justify-between items-center">
                     <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[180px]">
 
-                    <button
+                    <a href="{% url 'osicardplans' %}">
+                        <button
                         class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
                         Details</button>
+                    </a>
                 </div>
 
 
diff --git a/osinaweb/customercore/templates/payment.html b/osinaweb/customercore/templates/payment.html
index fb3da4fb..c7b23be0 100644
--- a/osinaweb/customercore/templates/payment.html
+++ b/osinaweb/customercore/templates/payment.html
@@ -16,7 +16,36 @@
     <div class="w-full h-fit bg-white rounded-md shadow-md">
         <div class="grid grid-cols-1 xxlg1:grid-cols-2">
             <div
-                class="w-full hidden xxlg1:flex flex-col items-center justify-center rounded-l-md h-full bg-osiblue bg-opacity-70 p-9 gap-8 relative overflow-hidden">
+                class="w-full flex flex-col items-center justify-center rounded-l-md h-full p-9 gap-8 overflow-hidden relative bg-gradient-to-b from-gray-400 via-gray-500 to-blue-950">
+                <div
+                    class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 filter blur-xl opacity-70 animate-blob animation-delay-2000">
+                </div>
+                <div
+                    class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue filter blur-xl opacity-70 animate-blob animation-delay-2000">
+                </div>
+                <div
+                    class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 filter blur-xl opacity-70 animate-blob animation-delay-2000">
+                </div>
+                <div
+                    class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 filter blur-xl opacity-70 animate-blob animation-delay-2000">
+                </div>
+
+
+                <div class="hidden s:flex z-10">
+                    <img src="{% static 'images/ositcom_logos/full-logo-white.png' %}" class="w-[150px]">
+                </div>
+
+                <div class="w-full s:w-fit flex flex-col justify-center items-center gap-5 text-center border border-white border-opacity-10 rounded-md py-10 px-10 s:px-20 shadow-md bg-white z-10">
+                    <p class="text-secondosiblue font-poppinsExtraBold uppercase text-xl s:text-2xl">{{item.title}}</p>
+                    <p class="text-secondosiblue text-xl s:text-2xl">${{item.amount}}</p>
+    
+                    <select class="w-full s:w-[300px] bg-white border border-gray-200 rounded-md px-3 py-3 text-secondosiblue outline-none flex justify-center items-center text-center cursor-pointer" id="cycle">
+                        {% for cycle in cycles %}
+                        <option value="{{cycle.id}}">{{cycle.months}} {% if cycle.months == 1 %}month {% else %}months{% endif %}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+
             </div>
 
 
diff --git a/osinaweb/customercore/templates/products/osicard-plans.html b/osinaweb/customercore/templates/products/osicard-plans.html
index 7ede451d..d840ca9c 100644
--- a/osinaweb/customercore/templates/products/osicard-plans.html
+++ b/osinaweb/customercore/templates/products/osicard-plans.html
@@ -13,7 +13,7 @@
         <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[180px] s:w-[250px]">
 
         <!-- PRICING ON DESKTOP -->
-        <div class="w-full hidden l:grid grid-cols-3 mt-24">
+        <div class="w-full hidden l:grid grid-cols-3 mt-10">
             <div class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center">
                 <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Basic</p>
 
diff --git a/osinaweb/customercore/views.py b/osinaweb/customercore/views.py
index f96a296d..866d6f2f 100644
--- a/osinaweb/customercore/views.py
+++ b/osinaweb/customercore/views.py
@@ -104,13 +104,14 @@ def dedicated_servers_plans(request, *args, **kwargs):
 
 
 
-
 @customer_login_required
 def payment(request, item_id):
     item = get_object_or_404(Item, id=item_id)
+    cycles = RecurringCycle.objects.filter(item = item)
     
     context = {
         'item' : item,
+        'cycles' : cycles,
     }
 
     return render(request, 'payment.html', context)
@@ -122,6 +123,8 @@ def basic_auth_header(username, password):
     return f"Basic {encoded_credentials}"
 
 
+import json
+
 @customer_login_required
 def initiate_checkout(request):
     api_username = 'merchant.TEST06127800'
@@ -131,9 +134,15 @@ def initiate_checkout(request):
 
     customer = request.user.customerprofile
 
-    item_id = request.headers.get('X-Item-ID')
+    data = json.loads(request.body)
+    item_id = data.get('item_id')
+    cycle_id = data.get('cycle_id') 
+
     item = Item.objects.get(id=item_id)
 
+    cycle = RecurringCycle.objects.get(id = cycle_id)
+    price = cycle.cycle_price
+
     order = Order.objects.create(status='None', customer=customer)
     order.save()
     order_id = order.order_id
@@ -150,7 +159,7 @@ def initiate_checkout(request):
         'interaction.operation': 'PURCHASE',  
         'interaction.merchant.name': merchant_name, 
         'order.id': order_id,
-        'order.amount': '100.00',
+        'order.amount': price,
         'order.currency': 'USD',
         'order.description': 'description_of_order',
         'order.notificationUrl' : 'https://newosina.osinode.com/webhooks/',
diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index 4fe64d0a..0f0b4413 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/input.css b/osinaweb/input.css
index 571db178..1fb3b402 100644
--- a/osinaweb/input.css
+++ b/osinaweb/input.css
@@ -124,18 +124,16 @@
 
     0%,
     100% {
-        transform: scale(1);
-        opacity: 0.5;
+        transform: scale(0.9);
     }
 
     50% {
-        transform: scale(1.2);
-        opacity: 1;
+        transform: scale(1);
     }
 }
 
-.usersActivityIcon {
-    animation: zoomInOut 1.5s infinite;
+.zoom {
+    animation: zoomInOut 2s infinite;
 }
 
 
diff --git a/osinaweb/osinacore/templates/add-edit-main.html b/osinaweb/osinacore/templates/add-edit-main.html
index 25d4948a..caff9e30 100644
--- a/osinaweb/osinacore/templates/add-edit-main.html
+++ b/osinaweb/osinacore/templates/add-edit-main.html
@@ -728,7 +728,7 @@
             <div class="w-full bg-osiblue h-fit py-2 mobileFooter">
                 <div class="w-full flex flex-col justify-center items-center gap-1">
                     <div class="flex justify-center items-center gap-2">
-                        <img src="{% static 'images/banner-logo.png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
+                        <img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
                         <p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
                     </div>
                     <p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
diff --git a/osinaweb/osinacore/templates/add_templates/add-status-modal.html b/osinaweb/osinacore/templates/add_templates/add-status-modal.html
index aeb424fd..466f4590 100644
--- a/osinaweb/osinacore/templates/add_templates/add-status-modal.html
+++ b/osinaweb/osinacore/templates/add_templates/add-status-modal.html
@@ -25,7 +25,7 @@
 
         <div class="w-full py-2 flex justify-start gap-3 items-center">
             <input type="checkbox" name="" id="relatedTaskCheckbox">
-            <p class="text-slate-700 text-base">Add Status To Task</p>
+            <p class="text-secondosiblue text-base">Add Status To Task</p>
         </div>
 
         <div class="w-full hidden"
diff --git a/osinaweb/osinacore/templates/customer_index.html b/osinaweb/osinacore/templates/customer_index.html
index e5da559a..be7d56fb 100644
--- a/osinaweb/osinacore/templates/customer_index.html
+++ b/osinaweb/osinacore/templates/customer_index.html
@@ -4,12 +4,12 @@
 
 
 <div class="w-full px-5 s:px-9 flex flex-col gap-5">
-    <!-- INVOICESS -->
+    <!-- SUBSCRIPTION -->
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px]">Subscriptions</h1>
-        <div class="w-full grid grid-cols-4 gap-5 mt-3">
-            <div class="flex flex-col justify-center items-center shadow-md">
-                <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center">
+        <h1 class="text-secondosiblue text-[25px]">Subscriptions</h1>
+        <div class="w-full grid grid-cols-1 md:grid-cols-2 l:grid-cols-3 xxlg1:grid-cols-4 gap-5 mt-3">
+            <div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300">
+                <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md">
                     <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
                 </div>
 
@@ -21,8 +21,8 @@
                 </div>
             </div>
 
-            <div class="flex flex-col justify-center items-center shadow-md">
-                <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center">
+            <div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300">
+                <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md">
                     <img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[80%] h-auto">
                 </div>
 
@@ -33,13 +33,21 @@
                     </div>
                 </div>
             </div>
+
+            <a href="{% url 'products' %}" class="w-full h-full">
+                <div class="w-full h-full bg-gray-50 rounded-md flex justify-center items-center py-10 px-5 shadow-md border border-gray-100 cursor-pointer hover:bg-secondosiblue duration-300 group zoom">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-secondosiblue group-hover:text-white duration-300">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                    </svg>
+                </div>
+            </a>
         </div>
     </div>
 
 
     <!-- TICKETS -->
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px]">Tickets</h1>
+        <h1 class="text-secondosiblue text-[25px]">Tickets</h1>
         <div class="overflow-x-auto border border-gray-300 rounded-md mt-3">
             <table class="min-w-full divide-y">
                 <!-- TABLE HEADER -->
@@ -123,7 +131,7 @@
 
     <!-- INVOICESS -->
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px]">Invoices</h1>
+        <h1 class="text-secondosiblue text-[25px]">Invoices</h1>
         <div class="overflow-x-auto border border-gray-300 rounded-md mt-3">
             <table class="min-w-full divide-y">
                 <!-- TABLE HEADER -->
diff --git a/osinaweb/osinacore/templates/customer_main.html b/osinaweb/osinacore/templates/customer_main.html
index 370de6cf..bd445bd5 100644
--- a/osinaweb/osinacore/templates/customer_main.html
+++ b/osinaweb/osinacore/templates/customer_main.html
@@ -450,11 +450,14 @@
             </div>
             {% endblock modules_section %}
 
-      
 
-            {% block content %}
-            replace me
-            {% endblock content %}
+            <!-- BODY -->
+            <div class="w-full mb-5">
+                {% block content %}
+                replace me
+                {% endblock content %}
+            </div>
+
 
             <!-- MOBILE FOOTER -->
             <div class="bg-osiblue h-fit py-2 mobileFooter">
diff --git a/osinaweb/osinacore/templates/details_templates/business-details.html b/osinaweb/osinacore/templates/details_templates/business-details.html
index 51718b37..6511ae69 100644
--- a/osinaweb/osinacore/templates/details_templates/business-details.html
+++ b/osinaweb/osinacore/templates/details_templates/business-details.html
@@ -81,7 +81,7 @@
 
 
 <!-- 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-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" 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">
diff --git a/osinaweb/osinacore/templates/details_templates/customer-details.html b/osinaweb/osinacore/templates/details_templates/customer-details.html
index e78b44a2..e9c234d1 100644
--- a/osinaweb/osinacore/templates/details_templates/customer-details.html
+++ b/osinaweb/osinacore/templates/details_templates/customer-details.html
@@ -175,7 +175,7 @@
 
 
 <!-- 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-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" 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">
diff --git a/osinaweb/osinacore/templates/details_templates/showpoints-modal.html b/osinaweb/osinacore/templates/details_templates/showpoints-modal.html
index 7ebb4fdb..51a4c1fd 100644
--- a/osinaweb/osinacore/templates/details_templates/showpoints-modal.html
+++ b/osinaweb/osinacore/templates/details_templates/showpoints-modal.html
@@ -101,7 +101,7 @@
                         </p>
                     </div>
 
-                    <div class="w-fit py-1 px-2 bg-white text-slate-700 text-xs rounded-md shadow-md">
+                    <div class="w-fit py-1 px-2 bg-white text-secondosiblue text-xs rounded-md shadow-md">
                         {% if point.status == 'Completed' %}
                         <p class="text-green-700 opacity-50">Completed</p>
                         {% elif point.status == 'Working On' %}
@@ -109,7 +109,7 @@
                         {% elif point.status == 'Paused' %}
                         <p class="text-red-500 opacity-50">Paused</p>
                         {% else %}
-                        <p class="text-slate-700 opacity-50">Created</p>
+                        <p class="text-secondosiblue opacity-50">Created</p>
                         {% endif %}
                     </div>
                 </div>
diff --git a/osinaweb/osinacore/templates/details_templates/staff-details.html b/osinaweb/osinacore/templates/details_templates/staff-details.html
index ba7605dd..1256b900 100644
--- a/osinaweb/osinacore/templates/details_templates/staff-details.html
+++ b/osinaweb/osinacore/templates/details_templates/staff-details.html
@@ -68,7 +68,7 @@
 
 
 <!-- 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-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" 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">
diff --git a/osinaweb/osinacore/templates/details_templates/task-details.html b/osinaweb/osinacore/templates/details_templates/task-details.html
index 8703e4a5..a6e4b464 100644
--- a/osinaweb/osinacore/templates/details_templates/task-details.html
+++ b/osinaweb/osinacore/templates/details_templates/task-details.html
@@ -218,7 +218,7 @@
                             </p>
                         </div>
 
-                        <div class="w-fit py-1 px-2 bg-white text-slate-700 text-xs rounded-md shadow-md">
+                        <div class="w-fit py-1 px-2 bg-white text-secondosiblue text-xs rounded-md shadow-md">
                             {% if point.status == 'Completed' %}
                             <p class="text-green-700 opacity-50">Completed</p>
                             {% elif point.status == 'Working On' %}
@@ -226,7 +226,7 @@
                             {% elif point.status == 'Paused' %}
                             <p class="text-red-500 opacity-50">Paused</p>
                             {% else %}
-                            <p class="text-slate-700 opacity-50">Created</p>
+                            <p class="text-secondosiblue opacity-50">Created</p>
                             {% endif %}
                         </div>
                     </div>
diff --git a/osinaweb/osinacore/templates/edit_templates/edit-task.html b/osinaweb/osinacore/templates/edit_templates/edit-task.html
index 7285396f..6bcf3514 100644
--- a/osinaweb/osinacore/templates/edit_templates/edit-task.html
+++ b/osinaweb/osinacore/templates/edit_templates/edit-task.html
@@ -120,7 +120,7 @@
 
 
 <!-- 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-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" 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">
diff --git a/osinaweb/osinacore/templates/index.html b/osinaweb/osinacore/templates/index.html
index 659f715b..3c074faa 100644
--- a/osinaweb/osinacore/templates/index.html
+++ b/osinaweb/osinacore/templates/index.html
@@ -15,7 +15,7 @@
             stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
         </svg>
-        <span class="ml-4 text-sm text-slate-700 font-semibold">Current Page</span>
+        <span class="ml-4 text-sm text-secondosiblue font-semibold">Current Page</span>
     </div>
 
 </div> -->
@@ -63,32 +63,32 @@
                         <div class="w-full flex flex-col gap-2">
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Project:</p>
-                                <p class="text-slate-700 text-base">{{task.project.name}}</p>
+                                <p class="text-secondosiblue text-base">{{task.project.name}}</p>
                             </div>
 
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Epic:</p>
-                                <p class="text-slate-700 text-base">{{task.epic.title}}</p>
+                                <p class="text-secondosiblue text-base">{{task.epic.title}}</p>
                             </div>
 
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Assigned To:</p>
-                                <p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
+                                <p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
                                     {{task.assigned_to.user.last_name}}</p>
                             </div>
 
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Files:</p>
-                                <p class="text-slate-700 text-base"></p>
+                                <p class="text-secondosiblue text-base"></p>
                             </div>
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Tags:</p>
-                                <p class="text-slate-700 text-base"></p>
+                                <p class="text-secondosiblue text-base"></p>
                             </div>
 
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Extra:</p>
-                                <p class="text-slate-700 text-base">{{task.extra}}</p>
+                                <p class="text-secondosiblue text-base">{{task.extra}}</p>
                             </div>
                         </div>
                     </div>
@@ -174,29 +174,29 @@
                 <div class="w-full flex flex-col gap-2 p-3">
                     <div class="flex justify-start items-center gap-2">
                         <p class="text-gray-400  text-base">Project:</p>
-                        <p class="text-slate-700 text-base">{{task.project.name}}</p>
+                        <p class="text-secondosiblue text-base">{{task.project.name}}</p>
                     </div>
 
                     <div class="flex justify-start items-center gap-2">
                         <p class="text-gray-400  text-base">Epic:</p>
-                        <p class="text-slate-700 text-base">{{task.epic.title}}</p>
+                        <p class="text-secondosiblue text-base">{{task.epic.title}}</p>
                     </div>
 
                     <div class="flex justify-start items-center gap-2">
                         <p class="text-gray-400  text-base">Assigned To:</p>
-                        <p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
+                        <p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
                             {{task.assigned_to.user.last_name}}</p>
                     </div>
 
                     <div class="flex justify-start items-center gap-2">
                         <p class="text-gray-400  text-base">Extra:</p>
-                        <p class="text-slate-700 text-base">{{task.extra}}</p>
+                        <p class="text-secondosiblue text-base">{{task.extra}}</p>
                     </div>
                 </div>
 
 
                 <div
-                    class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-slate-700 actionsButton">
+                    class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-secondosiblue actionsButton">
                     <p>Actions</p>
                     <i class="fa fa-angle-down" style="font-size: 20px;"></i>
                     <i class="fa fa-angle-up" style="font-size: 20px; display: none;"></i>
diff --git a/osinaweb/osinacore/templates/listing_pages/business-types.html b/osinaweb/osinacore/templates/listing_pages/business-types.html
index dd84ae6a..bf6a5d2e 100644
--- a/osinaweb/osinacore/templates/listing_pages/business-types.html
+++ b/osinaweb/osinacore/templates/listing_pages/business-types.html
@@ -5,7 +5,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Businness Types</h1>
+        <h1 class="text-secondosiblue text-[25px]">Businness Types</h1>
 
         <!-- FILTERING -->
         <div
@@ -49,7 +49,7 @@
                     {% 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>
+                            <p class="text-secondosiblue">{{type.name}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm">
diff --git a/osinaweb/osinacore/templates/listing_pages/businesses.html b/osinaweb/osinacore/templates/listing_pages/businesses.html
index 4ed77f8e..9c1d5fcc 100644
--- a/osinaweb/osinacore/templates/listing_pages/businesses.html
+++ b/osinaweb/osinacore/templates/listing_pages/businesses.html
@@ -6,7 +6,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Businesses</h1>
+        <h1 class="text-secondosiblue text-[25px]">Businesses</h1>
 
         <!-- FILTERING -->
         <div
@@ -65,16 +65,16 @@
                                     <img src='{{business.logo.url}}' alt="Business Logo"
                                         class="w-full h-full object-cover rounded-full">
                                 </div>
-                                <p class="text-slate-800">{{business.name}}</p>
+                                <p class="text-secondosiblue">{{business.name}}</p>
                             </div>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{business.customer.user.first_name}} {{business.customer.user.last_name}}</p>
+                            <p class="text-secondosiblue">{{business.customer.user.first_name}} {{business.customer.user.last_name}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{business.type.name}}</p>
+                            <p class="text-secondosiblue">{{business.type.name}}</p>
                         </td>
 
 
diff --git a/osinaweb/osinacore/templates/listing_pages/customers.html b/osinaweb/osinacore/templates/listing_pages/customers.html
index d115ec10..d3f3a388 100644
--- a/osinaweb/osinacore/templates/listing_pages/customers.html
+++ b/osinaweb/osinacore/templates/listing_pages/customers.html
@@ -5,7 +5,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Customers</h1>
+        <h1 class="text-secondosiblue text-[25px]">Customers</h1>
 
         <!-- FILTERING -->
         <div
@@ -58,44 +58,28 @@
 
                 <!-- TABLE BODY -->
                 <tbody class="bg-white divide-y divide-gray-200">
-                    <!-- 1st row -->
                     {% for customer in customers %}
                     <tr>
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{customer.user.first_name}}
+                            <p class="text-secondosiblue">{{customer.user.first_name}}
                                 {{customer.user.last_name}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{customer.user.username}}</p>
+                            <p class="text-secondosiblue">{{customer.user.username}}</p>
                         </td>
-
-                        {% if customer.status == 'Active' %}
-                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-green-700">
-                            <p class="text-white">{{customer.status}}</p>
-                        </td>
-                        {% endif %}
-
-                        {% if customer.status == 'Terminated' %}
-                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-gray-500">
+                        
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 {% if customer.status == 'Active' %}bg-green-700{% endif %}   {% if customer.status == 'Terminated' %}bg-gray-500{% endif %}  {% if customer.status == 'Suspended' %}bg-red-500{% endif %}">
                             <p class="text-white">{{customer.status}}</p>
                         </td>
-                        {% endif %}
-
-                        {% if customer.status == 'Suspended' %}
-                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-red-500">
-                            <p class="text-white">{{customer.status}}</p>
-                        </td>
-                        {% endif %}
-
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                             {% if customer.business_set.all %}
                                 {% for business in customer.business_set.all %}
-                                <p class="text-slate-800">{{business.name}}</p>
+                                <p class="text-secondosiblue">{{business.name}}</p>
                                 {% endfor %}
                             {% else %}
-                            <p class="text-slate-800">None</p>
+                            <p class="text-secondosiblue">None</p>
                             {% endif %}
                         </td>
 
diff --git a/osinaweb/osinacore/templates/listing_pages/daily-reports.html b/osinaweb/osinacore/templates/listing_pages/daily-reports.html
index d42c4cf5..f85c2ac4 100644
--- a/osinaweb/osinacore/templates/listing_pages/daily-reports.html
+++ b/osinaweb/osinacore/templates/listing_pages/daily-reports.html
@@ -4,7 +4,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">{% if request.user.is_superuser %}Daily Reports{% else %} My Daily Reports{% endif%}</h1>
+        <h1 class="text-secondosiblue text-[25px]">{% if request.user.is_superuser %}Daily Reports{% else %} My Daily Reports{% endif%}</h1>
 
         <!-- FILTERING -->
         <div
diff --git a/osinaweb/osinacore/templates/listing_pages/notes.html b/osinaweb/osinacore/templates/listing_pages/notes.html
index 4de12253..ada10650 100644
--- a/osinaweb/osinacore/templates/listing_pages/notes.html
+++ b/osinaweb/osinacore/templates/listing_pages/notes.html
@@ -4,7 +4,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Notes</h1>
+        <h1 class="text-secondosiblue text-[25px]">Notes</h1>
 
         <!-- FILTERING -->
         <div class="w-full py-3 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-end items-center">
diff --git a/osinaweb/osinacore/templates/listing_pages/project-types.html b/osinaweb/osinacore/templates/listing_pages/project-types.html
index 8c2e6e87..4080dff0 100644
--- a/osinaweb/osinacore/templates/listing_pages/project-types.html
+++ b/osinaweb/osinacore/templates/listing_pages/project-types.html
@@ -5,7 +5,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Project Types</h1>
+        <h1 class="text-secondosiblue text-[25px]">Project Types</h1>
 
         <!-- FILTERING -->
         <div
@@ -49,7 +49,7 @@
                     {% for type in projecttypes %}
                     <tr>
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{type.name}}</p>
+                            <p class="text-secondosiblue">{{type.name}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm">
@@ -74,7 +74,7 @@
 
 
 <!-- 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-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" 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">
diff --git a/osinaweb/osinacore/templates/listing_pages/projects.html b/osinaweb/osinacore/templates/listing_pages/projects.html
index aa704136..c5f7ca6b 100644
--- a/osinaweb/osinacore/templates/listing_pages/projects.html
+++ b/osinaweb/osinacore/templates/listing_pages/projects.html
@@ -6,7 +6,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">My Projects</h1>
+        <h1 class="text-secondosiblue text-[25px]">My Projects</h1>
 
         <!-- PROJECT FILTERING -->
         <div
diff --git a/osinaweb/osinacore/templates/listing_pages/references.html b/osinaweb/osinacore/templates/listing_pages/references.html
index 2a3e16d7..b629524e 100644
--- a/osinaweb/osinacore/templates/listing_pages/references.html
+++ b/osinaweb/osinacore/templates/listing_pages/references.html
@@ -5,7 +5,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">References</h1>
+        <h1 class="text-secondosiblue text-[25px]">References</h1>
 
         <!-- FILTERING -->
         <div
@@ -53,11 +53,11 @@
                     {% for reference in references %}
                     <tr>
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{reference.name}}</p>
+                            <p class="text-secondosiblue">{{reference.name}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{reference.formatted_date}}</p>
+                            <p class="text-secondosiblue">{{reference.formatted_date}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm">
@@ -82,7 +82,7 @@
 
 
 <!-- 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-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" 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">
diff --git a/osinaweb/osinacore/templates/listing_pages/staff-positions.html b/osinaweb/osinacore/templates/listing_pages/staff-positions.html
index 27053c77..10d8dfd9 100644
--- a/osinaweb/osinacore/templates/listing_pages/staff-positions.html
+++ b/osinaweb/osinacore/templates/listing_pages/staff-positions.html
@@ -6,7 +6,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Staff Positions</h1>
+        <h1 class="text-secondosiblue text-[25px]">Staff Positions</h1>
 
         <!-- FILTERING -->
         <div
@@ -50,7 +50,7 @@
                     {% for position in staffpositions %}
                     <tr>
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{position.name}}</p>
+                            <p class="text-secondosiblue">{{position.name}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm">
@@ -75,7 +75,7 @@
 
 
 <!-- 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-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" 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">
diff --git a/osinaweb/osinacore/templates/listing_pages/staffs.html b/osinaweb/osinacore/templates/listing_pages/staffs.html
index bf257c07..ef8ffa7a 100644
--- a/osinaweb/osinacore/templates/listing_pages/staffs.html
+++ b/osinaweb/osinacore/templates/listing_pages/staffs.html
@@ -5,7 +5,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Staffs</h1>
+        <h1 class="text-secondosiblue text-[25px]">Staffs</h1>
 
         <!-- FILTERING -->
         <div
@@ -60,12 +60,12 @@
                                     <img src='{{staff.image.url}}' alt="user-image"
                                         class="w-full h-full object-cover rounded-full">
                                 </div>
-                                <p class="text-slate-800">{{staff.user.first_name}} {{staff.user.last_name}}</p>
+                                <p class="text-secondosiblue">{{staff.user.first_name}} {{staff.user.last_name}}</p>
                             </div>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{staff.user.email}}</p>
+                            <p class="text-secondosiblue">{{staff.user.email}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm">
@@ -95,12 +95,12 @@
                                     <img src='{{staff.image.url}}' alt="user-image"
                                         class="w-full h-full object-cover rounded-full">
                                 </div>
-                                <p class="text-slate-800">{{staff.user.first_name}} {{staff.user.last_name}}</p>
+                                <p class="text-secondosiblue">{{staff.user.first_name}} {{staff.user.last_name}}</p>
                             </div>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{staff.user.email}}</p>
+                            <p class="text-secondosiblue">{{staff.user.email}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm">
diff --git a/osinaweb/osinacore/templates/listing_pages/tags.html b/osinaweb/osinacore/templates/listing_pages/tags.html
index 4daa3566..a355ac2c 100644
--- a/osinaweb/osinacore/templates/listing_pages/tags.html
+++ b/osinaweb/osinacore/templates/listing_pages/tags.html
@@ -5,7 +5,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Tags</h1>
+        <h1 class="text-secondosiblue text-[25px]">Tags</h1>
 
         <!-- FILTERING -->
         <div
@@ -49,7 +49,7 @@
                     {% for tag in tags %}
                     <tr>
                         <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                            <p class="text-slate-800">{{tag.name}}</p>
+                            <p class="text-secondosiblue">{{tag.name}}</p>
                         </td>
 
                         <td class="px-6 py-4 text-center text-sm">
@@ -74,7 +74,7 @@
 
 
 <!-- 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-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" 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">
diff --git a/osinaweb/osinacore/templates/listing_pages/tasks.html b/osinaweb/osinacore/templates/listing_pages/tasks.html
index 7f2f81dd..6962fc07 100644
--- a/osinaweb/osinacore/templates/listing_pages/tasks.html
+++ b/osinaweb/osinacore/templates/listing_pages/tasks.html
@@ -5,7 +5,7 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">My Tasks</h1>
+        <h1 class="text-secondosiblue text-[25px]">My Tasks</h1>
 
         <!-- TASK FILTERING -->
         <div
@@ -85,32 +85,32 @@
                             <div class="w-full flex flex-col gap-2">
                                 <div class="flex justify-start items-center gap-2">
                                     <p class="text-gray-400  text-base">Project:</p>
-                                    <p class="text-slate-700 text-base">{{task.project.name}}</p>
+                                    <p class="text-secondosiblue text-base">{{task.project.name}}</p>
                                 </div>
 
                                 <div class="flex justify-start items-center gap-2">
                                     <p class="text-gray-400  text-base">Epic:</p>
-                                    <p class="text-slate-700 text-base">{{task.epic.title}}</p>
+                                    <p class="text-secondosiblue text-base">{{task.epic.title}}</p>
                                 </div>
 
                                 <div class="flex justify-start items-center gap-2">
                                     <p class="text-gray-400  text-base">Assigned To:</p>
-                                    <p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
+                                    <p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
                                         {{task.assigned_to.user.last_name}}</p>
                                 </div>
 
                                 <div class="flex justify-start items-center gap-2">
                                     <p class="text-gray-400  text-base">Files:</p>
-                                    <p class="text-slate-700 text-base"></p>
+                                    <p class="text-secondosiblue text-base"></p>
                                 </div>
                                 <div class="flex justify-start items-center gap-2">
                                     <p class="text-gray-400  text-base">Tags:</p>
-                                    <p class="text-slate-700 text-base"></p>
+                                    <p class="text-secondosiblue text-base"></p>
                                 </div>
 
                                 <div class="flex justify-start items-center gap-2">
                                     <p class="text-gray-400  text-base">Extra:</p>
-                                    <p class="text-slate-700 text-base">{{task.extra}}</p>
+                                    <p class="text-secondosiblue text-base">{{task.extra}}</p>
                                 </div>
                             </div>
                         </div>
@@ -196,29 +196,29 @@
                     <div class="w-full flex flex-col gap-2 p-3">
                         <div class="flex justify-start items-center gap-2">
                             <p class="text-gray-400  text-base">Project:</p>
-                            <p class="text-slate-700 text-base">{{task.project.name}}</p>
+                            <p class="text-secondosiblue text-base">{{task.project.name}}</p>
                         </div>
 
                         <div class="flex justify-start items-center gap-2">
                             <p class="text-gray-400  text-base">Epic:</p>
-                            <p class="text-slate-700 text-base">{{task.epic.title}}</p>
+                            <p class="text-secondosiblue text-base">{{task.epic.title}}</p>
                         </div>
 
                         <div class="flex justify-start items-center gap-2">
                             <p class="text-gray-400  text-base">Assigned To:</p>
-                            <p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
+                            <p class="text-secondosiblue text-base">{{task.assigned_to.user.first_name}}
                                 {{task.assigned_to.user.last_name}}</p>
                         </div>
 
                         <div class="flex justify-start items-center gap-2">
                             <p class="text-gray-400  text-base">Extra:</p>
-                            <p class="text-slate-700 text-base">{{task.extra}}</p>
+                            <p class="text-secondosiblue text-base">{{task.extra}}</p>
                         </div>
                     </div>
 
 
                     <div
-                        class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-slate-700 actionsButton">
+                        class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-secondosiblue actionsButton">
                         <p>Actions</p>
                         <i class="fa fa-angle-down" style="font-size: 20px;"></i>
                         <i class="fa fa-angle-up" style="font-size: 20px; display: none;"></i>
diff --git a/osinaweb/osinacore/templates/login.html b/osinaweb/osinacore/templates/login.html
index 1cdcd1e3..fd2a88fe 100644
--- a/osinaweb/osinacore/templates/login.html
+++ b/osinaweb/osinacore/templates/login.html
@@ -95,12 +95,12 @@
                             <div
                                 class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
                                 <button
-                                    class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
+                                    class="w-[50%] h-full bg-white rounded-md p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
                                     style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);"
                                     type="button">
                                     Login
                                 </button>
-                                <button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
+                                <button class="w-[50%] h-full p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
                                     id="loginToRegisterButton" type="button">
                                     Register
                                 </button>
@@ -161,12 +161,12 @@
                         <div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
                             <div
                                 class="w-full h-[60px] rounded-md bg-gray-200 flex justify-center items-center shadow-sm">
-                                <button class="w-[50%] h-full p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
+                                <button class="w-[50%] h-full p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
                                     id="registerToLoginButton" type="button">
                                     Login
                                 </button>
                                 <button
-                                    class="w-[50%] h-full bg-white rounded-md p-3 text-slate-700 text-sm s:text-[20px] cursor-pointer"
+                                    class="w-[50%] h-full bg-white rounded-md p-3 text-secondosiblue text-sm s:text-[20px] cursor-pointer"
                                     type="button"
                                     style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">
                                     Register
diff --git a/osinaweb/osinacore/templates/main.html b/osinaweb/osinacore/templates/main.html
index 4ed61c46..48ea1443 100644
--- a/osinaweb/osinacore/templates/main.html
+++ b/osinaweb/osinacore/templates/main.html
@@ -35,7 +35,7 @@
 
     <!-- USERS ACTIVITIES BUTTON ON MOBILE -->
     <a href="{% url 'recentactivitiespage' %}">
-        <div class="w-[55px] h-[55px] bg-osiblue rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer z-20 usersActivityIcon">
+        <div class="w-[55px] h-[55px] bg-osiblue rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer z-20 zoom">
             <img src="{% static 'images/icons/useractivity.png' %}" alt="Users">
         </div>
     </a>
@@ -765,7 +765,7 @@
                                     <div class="w-[13px] h-[13px] rounded-full"
                                         style="background-color: {{ recent_note.color }};">
                                     </div>
-                                    <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
+                                    <p class="text-secondosiblue truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                                 </div>
                             </div>
 
diff --git a/osinaweb/osinacore/templates/recent-activities-page.html b/osinaweb/osinacore/templates/recent-activities-page.html
index e9d93c72..2cdc4d62 100644
--- a/osinaweb/osinacore/templates/recent-activities-page.html
+++ b/osinaweb/osinacore/templates/recent-activities-page.html
@@ -253,7 +253,7 @@
                 class="w-full xlg1:w-[300px] h-fit bg-secondosiblue flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0 mt-[100px]">
                 <div class="w-full flex flex-col justify-center gap-1 items-center">
                     <div class="flex justify-center items-center gap-1">
-                        <img src="{% static 'images/banner-logo.png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
+                        <img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
                         <p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
                     </div>
                     <p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
@@ -577,7 +577,7 @@
             <div class="bg-osiblue h-fit py-2 mobileFooter">
                 <div class="w-full flex flex-col justify-center items-center gap-1">
                     <div class="flex justify-center items-center gap-2">
-                        <img src="{% static 'images/banner-logo.png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
+                        <img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
                         <p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
                     </div>
                     <p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
diff --git a/osinaweb/osinacore/templates/recent-activities.html b/osinaweb/osinacore/templates/recent-activities.html
index 276f2cd3..f601c0fd 100644
--- a/osinaweb/osinacore/templates/recent-activities.html
+++ b/osinaweb/osinacore/templates/recent-activities.html
@@ -150,7 +150,7 @@
                 </div>
 
                 <div class="flex flex-col">
-                    <h1 class="text-sm text-slate-700 font-semibold">{{latest.status.staff.user.first_name}}
+                    <h1 class="text-sm text-secondosiblue font-semibold">{{latest.status.staff.user.first_name}}
                         {{latest.status.staff.user.last_name}}</h1>
                     {% if latest.time_ago == '0min ago' %}
                     <p class="text-sm text-gray-500">Just Now</p>
diff --git a/osinaweb/osinacore/templates/recent-status.html b/osinaweb/osinacore/templates/recent-status.html
index 67bfed07..1eba2a1f 100644
--- a/osinaweb/osinacore/templates/recent-status.html
+++ b/osinaweb/osinacore/templates/recent-status.html
@@ -2,7 +2,7 @@
 
 <div>
         <p class="text-sm text-gray-500 truncate max-w-xl">Recent Status:
-                <span class="text-slate-700 font-semibold">{{last_status.text}}</span>
+                <span class="text-secondosiblue font-semibold">{{last_status.text}}</span>
         </p>
         <p class="text-sm text-gray-500">Last update:
                 {% if last_status.date == current_date %}
diff --git a/osinaweb/osinacore/templates/user-recent-activities.html b/osinaweb/osinacore/templates/user-recent-activities.html
index 02c27d86..02fc9815 100644
--- a/osinaweb/osinacore/templates/user-recent-activities.html
+++ b/osinaweb/osinacore/templates/user-recent-activities.html
@@ -14,7 +14,7 @@
                         class="w-full h-full object-cover rounded-full">
                 </div>
                 <div class="flex flex-col">
-                    <h1 class="text-sm text-slate-700 font-semibold">{{latest.status.staff.user.first_name}}
+                    <h1 class="text-sm text-secondosiblue font-semibold">{{latest.status.staff.user.first_name}}
                         {{latest.status.staff.user.last_name}}</h1>
                     {% if latest.time_ago == '0min ago' %}
                     <p class="text-sm text-gray-500">Just Now</p>
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 666f230e..35f92c80 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -1020,6 +1020,10 @@ video {
   height: 0.25rem;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
 .h-14 {
   height: 3.5rem;
 }
@@ -1174,6 +1178,10 @@ video {
   width: 0.25rem;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -1214,6 +1222,10 @@ video {
   width: 140px;
 }
 
+.w-\[150px\] {
+  width: 150px;
+}
+
 .w-\[180px\] {
   width: 180px;
 }
@@ -1539,6 +1551,10 @@ video {
   gap: 0.5rem;
 }
 
+.gap-20 {
+  gap: 5rem;
+}
+
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1651,6 +1667,11 @@ video {
   border-bottom-left-radius: 0.375rem;
 }
 
+.rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
 .rounded-r-md {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
@@ -1661,6 +1682,11 @@ video {
   border-top-right-radius: 0.375rem;
 }
 
+.rounded-t-none {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
 .rounded-bl-lg {
   border-bottom-left-radius: 0.5rem;
 }
@@ -1979,6 +2005,11 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
 .bg-green-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
@@ -2178,6 +2209,18 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-gray-200 {
+  --tw-gradient-from: #e5e7eb var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(229 231 235 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-gray-400 {
+  --tw-gradient-from: #9ca3af var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-green-400 {
   --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
@@ -2208,6 +2251,16 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.via-gray-300 {
+  --tw-gradient-to: rgb(209 213 219 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #d1d5db var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-gray-500 {
+  --tw-gradient-to: rgb(107 114 128 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #6b7280 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 .via-green-500 {
   --tw-gradient-to: rgb(34 197 94 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #22c55e var(--tw-gradient-via-position), var(--tw-gradient-to);
@@ -2261,10 +2314,18 @@ video {
   padding: 0.25rem;
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-20 {
+  padding: 5rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -2306,6 +2367,11 @@ video {
   padding-right: 0.5rem;
 }
 
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -2341,6 +2407,11 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -2479,6 +2550,10 @@ video {
   font-size: 22px;
 }
 
+.text-\[25px\] {
+  font-size: 25px;
+}
+
 .text-\[30px\] {
   font-size: 30px;
 }
@@ -2910,18 +2985,16 @@ video {
 @keyframes zoomInOut {
   0%,
     100% {
-    transform: scale(1);
-    opacity: 0.5;
+    transform: scale(0.9);
   }
 
   50% {
-    transform: scale(1.2);
-    opacity: 1;
+    transform: scale(1);
   }
 }
 
-.usersActivityIcon {
-  animation: zoomInOut 1.5s infinite;
+.zoom {
+  animation: zoomInOut 2s infinite;
 }
 
 /* DRAGGABLE SLIDER */
@@ -3128,6 +3201,11 @@ video {
   outline-offset: 2px;
 }
 
+.group:hover .group-hover\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 @media (min-width: 650px) {
   .s\:mt-5 {
     margin-top: 1.25rem;
@@ -3137,6 +3215,10 @@ video {
     margin-top: -63px;
   }
 
+  .s\:flex {
+    display: flex;
+  }
+
   .s\:hidden {
     display: none;
   }
@@ -3240,6 +3322,11 @@ video {
     padding-right: 3.5rem;
   }
 
+  .s\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
   .s\:px-5 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
@@ -3314,6 +3401,10 @@ video {
     width: fit-content;
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -3509,6 +3600,10 @@ video {
   .xxlg1\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .xxlg1\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }
 
 @media (min-width: 1390px) {
diff --git a/osinaweb/static/images/ositcom_logos/full-logo-white.png b/osinaweb/static/images/ositcom_logos/full-logo-white.png
new file mode 100644
index 00000000..2ece4f34
Binary files /dev/null and b/osinaweb/static/images/ositcom_logos/full-logo-white.png differ
diff --git a/osinaweb/static/js/customer_dashboard/cloud-hosting-pricing-plans.js b/osinaweb/static/js/customer_dashboard/cloud-hosting-pricing-plans.js
new file mode 100644
index 00000000..825b1841
--- /dev/null
+++ b/osinaweb/static/js/customer_dashboard/cloud-hosting-pricing-plans.js
@@ -0,0 +1,93 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Osicloud 1 Subscription
+    const firstOsicloudPrices = {
+        1: 89,
+        3: 200,
+        6: 350,
+        12: 650,
+        24: 1200,
+        36: 1800,
+        60: 3000
+    };
+
+    const firstOsicloudSubscriptionOptions = document.querySelectorAll('.firstOsicloudSubscriptionOptions');
+
+    firstOsicloudSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.firstOsicloudPrice');
+            const price = firstOsicloudPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+
+    // Osicloud 2 Subscription
+    const secondOsicloudPrices = {
+        1: 169,
+        3: 400,
+        6: 700,
+        12: 1300,
+        24: 2400,
+        36: 3600,
+        60: 6000
+    };
+
+    const secondOsicloudSubscriptionOptions = document.querySelectorAll('.secondOsicloudSubscriptionOptions');
+
+    secondOsicloudSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.secondOsicloudPrice');
+            const price = secondOsicloudPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+
+    // Osicloud 3 Subscription
+    const thirdOsicloudPrices = {
+        1: 89,
+        3: 200,
+        6: 350,
+        12: 650,
+        24: 1200,
+        36: 1800,
+        60: 3000
+    };
+
+    const thirdOsicloudSubscriptionOptions = document.querySelectorAll('.thirdOsicloudSubscriptionOptions');
+
+    thirdOsicloudSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.thirdOsicloudPrice');
+            const price = thirdOsicloudPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+
+    // Osicloud 4 Subscription
+    const fourthOsicloudPrices = {
+        1: 89,
+        3: 200,
+        6: 350,
+        12: 650,
+        24: 1200,
+        36: 1800,
+        60: 3000
+    };
+
+    const fourthOsicloudSubscriptionOptions = document.querySelectorAll('.fourthOsicloudSubscriptionOptions');
+
+    fourthOsicloudSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.fourthOsicloudPrice');
+            const price = fourthOsicloudPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+});
diff --git a/osinaweb/static/js/customer_dashboard/dedicated-servers-pricing-plans.js b/osinaweb/static/js/customer_dashboard/dedicated-servers-pricing-plans.js
new file mode 100644
index 00000000..24bb8934
--- /dev/null
+++ b/osinaweb/static/js/customer_dashboard/dedicated-servers-pricing-plans.js
@@ -0,0 +1,93 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Dedicated 1 Subscription
+    const firstDedicatedPrices = {
+        1: 89,
+        3: 200,
+        6: 350,
+        12: 650,
+        24: 1200,
+        36: 1800,
+        60: 3000
+    };
+
+    const firstDedicatedSubscriptionOptions = document.querySelectorAll('.firstDedicatedSubscriptionOptions');
+
+    firstDedicatedSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.firstDedicatedPrice');
+            const price = firstDedicatedPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+
+    // Dedicated 2 Subscription
+    const secondDedicatedPrices = {
+        1: 169,
+        3: 400,
+        6: 700,
+        12: 1300,
+        24: 2400,
+        36: 3600,
+        60: 6000
+    };
+
+    const secondDedicatedSubscriptionOptions = document.querySelectorAll('.secondDedicatedSubscriptionOptions');
+
+    secondDedicatedSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.secondDedicatedPrice');
+            const price = secondDedicatedPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+
+    // Dedicated 3 Subscription
+    const thirdDedicatedPrices = {
+        1: 89,
+        3: 200,
+        6: 350,
+        12: 650,
+        24: 1200,
+        36: 1800,
+        60: 3000
+    };
+
+    const thirdDedicatedSubscriptionOptions = document.querySelectorAll('.thirdDedicatedSubscriptionOptions');
+
+    thirdDedicatedSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.thirdDedicatedPrice');
+            const price = thirdDedicatedPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+
+    // Dedicated 4 Subscription
+    const fourthDedicatedPrices = {
+        1: 89,
+        3: 200,
+        6: 350,
+        12: 650,
+        24: 1200,
+        36: 1800,
+        60: 3000
+    };
+
+    const fourthDedicatedSubscriptionOptions = document.querySelectorAll('.fourthDedicatedSubscriptionOptions');
+
+    fourthDedicatedSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.fourthDedicatedPrice');
+            const price = fourthDedicatedPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+});
diff --git a/osinaweb/static/js/customer_dashboard/osimenu-pricing-plans.js b/osinaweb/static/js/customer_dashboard/osimenu-pricing-plans.js
new file mode 100644
index 00000000..f84740e2
--- /dev/null
+++ b/osinaweb/static/js/customer_dashboard/osimenu-pricing-plans.js
@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Standard Subscription
+    const standardPrices = {
+        1: 89,
+        3: 200,
+        6: 350,
+        12: 650,
+        24: 1200,
+        36: 1800,
+        60: 3000
+    };
+
+    const standardSubscriptionOptions = document.querySelectorAll('.standardSubscriptionOptions');
+
+    standardSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.standardPrice');
+            const price = standardPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+    // Premium Subscription
+    const premiumPrices = {
+        1: 169,
+        3: 400,
+        6: 700,
+        12: 1300,
+        24: 2400,
+        36: 3600,
+        60: 6000
+    };
+
+    const premiumSubscriptionOptions = document.querySelectorAll('.premiumSubscriptionOptions');
+
+    premiumSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.premiumPrice');
+            const price = premiumPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+});
diff --git a/osinaweb/static/js/customer_dashboard/payment.js b/osinaweb/static/js/customer_dashboard/payment.js
index 8f71c79c..6b5e47b4 100644
--- a/osinaweb/static/js/customer_dashboard/payment.js
+++ b/osinaweb/static/js/customer_dashboard/payment.js
@@ -1,10 +1,10 @@
 const paymentContent = document.getElementById('paymentContent');
-
 const item_id = document.getElementById('itemId').textContent;
 
-function initiateCheckout(item_id) {
+function initiateCheckout(item_id, selectedCycleId) {
     const csrftoken = getCookie('csrftoken');
     console.log(item_id);
+    console.log('Selected Cycle ID:', selectedCycleId);
 
     console.log('CSRF Token:', csrftoken);
 
@@ -13,10 +13,8 @@ function initiateCheckout(item_id) {
         headers: {
             'Content-Type': 'application/json',
             'X-CSRFToken': csrftoken,
-            'X-Item-ID': item_id,
         },
-
-        body: JSON.stringify({ item_id: item_id }),
+        body: JSON.stringify({ item_id: item_id, cycle_id: selectedCycleId }), // Include selected cycle ID in the request body
     })
         .then(response => {
             if (!response.ok) {
@@ -42,6 +40,17 @@ function initiateCheckout(item_id) {
         });
 }
 
+// Add an event listener to the select element
+const cycleSelect = document.getElementById('cycle');
+cycleSelect.addEventListener('change', function() {
+    // Get the selected cycle ID when the user changes the selection
+    const selectedCycleId = cycleSelect.value;
+    console.log('Selected Cycle ID:', selectedCycleId);
+    
+    // Call initiateCheckout with the updated cycle ID
+    initiateCheckout(item_id, selectedCycleId);
+});
+
 function getCookie(name) {
     let cookieValue = null;
     if (document.cookie && document.cookie !== '') {
@@ -57,5 +66,6 @@ function getCookie(name) {
     return cookieValue;
 }
 
-
-initiateCheckout(item_id);
+// Call initiateCheckout initially with the default selected cycle ID
+const selectedCycleId = cycleSelect.value;
+initiateCheckout(item_id, selectedCycleId);
diff --git a/osinaweb/static/js/customer_dashboard/shared-hosting-pricing-plans.js b/osinaweb/static/js/customer_dashboard/shared-hosting-pricing-plans.js
new file mode 100644
index 00000000..7a954afa
--- /dev/null
+++ b/osinaweb/static/js/customer_dashboard/shared-hosting-pricing-plans.js
@@ -0,0 +1,70 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Shared Basic Subscription
+    const sharedBasicPrices = {
+        1: 89,
+        3: 200,
+        6: 350,
+        12: 650,
+        24: 1200,
+        36: 1800,
+        60: 3000
+    };
+
+    const sharedBasicSubscriptionOptions = document.querySelectorAll('.sharedBasicSubscriptionOptions');
+
+    sharedBasicSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.sharedBasicPrice');
+            const price = sharedBasicPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+
+    // Shared Plus Subscription
+    const sharedPlusPrices = {
+        1: 169,
+        3: 400,
+        6: 700,
+        12: 1300,
+        24: 2400,
+        36: 3600,
+        60: 6000
+    };
+
+    const sharedPlusSubscriptionOptions = document.querySelectorAll('.sharedPlusSubscriptionOptions');
+
+    sharedPlusSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.sharedPlusPrice');
+            const price = sharedPlusPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+
+    // Shared Basic Subscription
+    const sharedPowerPrices = {
+        1: 89,
+        3: 200,
+        6: 350,
+        12: 650,
+        24: 1200,
+        36: 1800,
+        60: 3000
+    };
+
+    const sharedPowerSubscriptionOptions = document.querySelectorAll('.sharedPowerSubscriptionOptions');
+
+    sharedPowerSubscriptionOptions.forEach(function (options) {
+        options.addEventListener('change', function () {
+            const selectedValue = parseInt(this.value);
+            const priceElement = this.closest('.feature').querySelector('.sharedPowerPrice');
+            const price = sharedPowerPrices[selectedValue];
+            priceElement.textContent = `$${price}`;
+        });
+    });
+
+});