diff --git a/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc b/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc
index f735b665..0bff3b41 100644
Binary files a/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc and b/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc differ
diff --git a/osinaweb/billing/add/__pycache__/views.cpython-312.pyc b/osinaweb/billing/add/__pycache__/views.cpython-312.pyc
index c2528438..47dffaf3 100644
Binary files a/osinaweb/billing/add/__pycache__/views.cpython-312.pyc and b/osinaweb/billing/add/__pycache__/views.cpython-312.pyc differ
diff --git a/osinaweb/billing/templates/add_templates/add-payment-method-modal.html b/osinaweb/billing/templates/add_templates/add-payment-method-modal.html
index fb2a3144..2ee4bc0f 100644
--- a/osinaweb/billing/templates/add_templates/add-payment-method-modal.html
+++ b/osinaweb/billing/templates/add_templates/add-payment-method-modal.html
@@ -53,7 +53,7 @@
     </form>
 
     <!-------------- JS SCRIPTS --------------->
-    <script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>
+    <script type="text/javascript" src='{% static "js/inputs/upload-input-tag.js" %}'></script>
 
 </body>
 
diff --git a/osinaweb/billing/templates/edit_templates/edit-payment-method.html b/osinaweb/billing/templates/edit_templates/edit-payment-method.html
index 450e9499..42520df2 100644
--- a/osinaweb/billing/templates/edit_templates/edit-payment-method.html
+++ b/osinaweb/billing/templates/edit_templates/edit-payment-method.html
@@ -68,6 +68,6 @@
 <script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
 
 <!-------------- JS SCRIPTS --------------->
-<script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/upload-input-tag.js" %}'></script>
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/customercore/templates/add_templates/customer-add-ticket.html b/osinaweb/customercore/templates/add_templates/customer-add-ticket.html
index 851fe552..0123d05a 100644
--- a/osinaweb/customercore/templates/add_templates/customer-add-ticket.html
+++ b/osinaweb/customercore/templates/add_templates/customer-add-ticket.html
@@ -93,10 +93,10 @@
 
 <!-------------- JS SCRIPTS --------------->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-<script type="text/javascript" src='{% static "js/file-uploader.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/file-uploader.js" %}'></script>
 
 <!-- TO DISPLAY THE CHOSEN REGARDING OPTION SELECT TAG -->
-<script type="text/javascript" src='{% static "js/customer_dashboard/regarding-ticket.js" %}'></script>
+<script type="text/javascript" src='{% static "js/tickets/regarding-ticket.js" %}'></script>
 
 
 {% endblock %}
\ No newline at end of file
diff --git a/osinaweb/customercore/templates/details_templates/inner-customer-project.html b/osinaweb/customercore/templates/details_templates/inner-customer-project.html
index c9e5107a..d51e30dd 100644
--- a/osinaweb/customercore/templates/details_templates/inner-customer-project.html
+++ b/osinaweb/customercore/templates/details_templates/inner-customer-project.html
@@ -274,5 +274,5 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" src='{% static "js/calculate-project-time.js" %}'></script>
+<script type="text/javascript" src='{% static "js/projects/calculate-project-time.js" %}'></script>
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/customercore/templates/details_templates/inner-customer-ticket.html b/osinaweb/customercore/templates/details_templates/inner-customer-ticket.html
index 53c38ea7..1fc596fe 100644
--- a/osinaweb/customercore/templates/details_templates/inner-customer-ticket.html
+++ b/osinaweb/customercore/templates/details_templates/inner-customer-ticket.html
@@ -335,10 +335,10 @@
 
 
 <!---------------------- JS SCRIPTS -------------------->
-<script type="text/javascript" src="{% static 'js/customer_dashboard/ticket-details.js' %}"></script>
+<script type="text/javascript" src="{% static 'js/tickets/ticket-details.js' %}"></script>
 
-<script type="text/javascript" src="{% static 'js/text-editor.js' %}"></script>
+<script type="text/javascript" src="{% static 'js/inputs/text-editor.js' %}"></script>
 
-<script type="text/javascript" src='{% static "js/file-uploader.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/file-uploader.js" %}'></script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/osinaweb/customercore/templates/listing_pages/customer-projects.html b/osinaweb/customercore/templates/listing_pages/customer-projects.html
index bf9d3fc8..a08b985a 100644
--- a/osinaweb/customercore/templates/listing_pages/customer-projects.html
+++ b/osinaweb/customercore/templates/listing_pages/customer-projects.html
@@ -53,6 +53,6 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" src='{% static "js/calculate-all-projects-time.js" %}'></script>
+<script type="text/javascript" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/customercore/templates/listing_pages/customer-tickets.html b/osinaweb/customercore/templates/listing_pages/customer-tickets.html
index 9634f3a1..f50f23ba 100644
--- a/osinaweb/customercore/templates/listing_pages/customer-tickets.html
+++ b/osinaweb/customercore/templates/listing_pages/customer-tickets.html
@@ -183,6 +183,6 @@
 
 <!---------------------- JS SCRIPTS -------------------->
 
-<script type="text/javascript" src='{% static "js/customer_dashboard/tickets-filtering.js" %}'></script>
+<script type="text/javascript" src='{% static "js/tickets/tickets-filtering.js" %}'></script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index 8f26ae9a..c33e43b3 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/__pycache__/views.cpython-312.pyc b/osinaweb/osinacore/__pycache__/views.cpython-312.pyc
index bd8bf270..a85a46c1 100644
Binary files a/osinaweb/osinacore/__pycache__/views.cpython-312.pyc and b/osinaweb/osinacore/__pycache__/views.cpython-312.pyc differ
diff --git a/osinaweb/osinacore/templates/add-edit-main.html b/osinaweb/osinacore/templates/add-edit-main.html
index 3fbc6cfd..b0a23613 100644
--- a/osinaweb/osinacore/templates/add-edit-main.html
+++ b/osinaweb/osinacore/templates/add-edit-main.html
@@ -804,10 +804,10 @@
     <script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
 
     <!-- TO SWITCH BETWEEN STATUSES FROM ONLINE TO OFFLINE -->
-    <script type="text/javascript" src='{% static "js/switch-status.js" %}'></script>
+    <script type="text/javascript" src='{% static "js/api_calls/switch-status.js" %}'></script>
 
     <!-- TO RELOAD THE STATUS CONTAINER -->
-    <script type="text/javascript" src='{% static "js/get-updated-last-status.js" %}'></script>
+    <script type="text/javascript" src='{% static "js/api_calls/get-updated-last-status.js" %}'></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/add_templates/add-business.html b/osinaweb/osinacore/templates/add_templates/add-business.html
index 633a7e5a..4c9878fa 100644
--- a/osinaweb/osinacore/templates/add_templates/add-business.html
+++ b/osinaweb/osinacore/templates/add_templates/add-business.html
@@ -104,7 +104,7 @@
 </div>
 
 <!-------------- JS SCRIPTS --------------->
-<script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/upload-input-tag.js" %}'></script>
 
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/add_templates/add-customer.html b/osinaweb/osinacore/templates/add_templates/add-customer.html
index b917c967..ab5c7f95 100644
--- a/osinaweb/osinacore/templates/add_templates/add-customer.html
+++ b/osinaweb/osinacore/templates/add_templates/add-customer.html
@@ -79,7 +79,7 @@
 </div>
 
 <!-------------- JS SCRIPTS --------------->
-<script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/upload-input-tag.js" %}'></script>
 
 
 
diff --git a/osinaweb/osinacore/templates/add_templates/add-project.html b/osinaweb/osinacore/templates/add_templates/add-project.html
index 9d321897..311e7c76 100644
--- a/osinaweb/osinacore/templates/add_templates/add-project.html
+++ b/osinaweb/osinacore/templates/add_templates/add-project.html
@@ -119,6 +119,6 @@
 </div>
 
 <!-------------- JS SCRIPTS --------------->
-<script type="text/javascript" src='{% static "js/add-project.js" %}'></script>
+<script type="text/javascript" src='{% static "js/projects/add-project.js" %}'></script>
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/add_templates/add-staff.html b/osinaweb/osinacore/templates/add_templates/add-staff.html
index 6fbf1860..f615e3e6 100644
--- a/osinaweb/osinacore/templates/add_templates/add-staff.html
+++ b/osinaweb/osinacore/templates/add_templates/add-staff.html
@@ -104,7 +104,7 @@
 </div>
 
 <!-------------- JS SCRIPTS --------------->
-<script type="text/javascript" src='{% static "js/upload-image-tag.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/upload-image-tag.js" %}'></script>
 
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/add_templates/add-task.html b/osinaweb/osinacore/templates/add_templates/add-task.html
index 57e6d4b6..2332e887 100644
--- a/osinaweb/osinacore/templates/add_templates/add-task.html
+++ b/osinaweb/osinacore/templates/add_templates/add-task.html
@@ -138,7 +138,7 @@
 
 
 <!-------------- JS SCRIPTS --------------->
-<script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/upload-input-tag.js" %}'></script>
 
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/add_templates/add-ticket.html b/osinaweb/osinacore/templates/add_templates/add-ticket.html
index 817a46e3..652567c1 100644
--- a/osinaweb/osinacore/templates/add_templates/add-ticket.html
+++ b/osinaweb/osinacore/templates/add_templates/add-ticket.html
@@ -105,10 +105,10 @@
 
 
 <!-------------- JS SCRIPTS --------------->
-<script type="text/javascript" src='{% static "js/add-ticket.js" %}'></script>
+<script type="text/javascript" src='{% static "js/tickets/add-ticket.js" %}'></script>
 
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-<script type="text/javascript" src='{% static "js/file-uploader.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/file-uploader.js" %}'></script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/details_templates/project-details.html b/osinaweb/osinacore/templates/details_templates/project-details.html
index 3118228f..b58f8022 100644
--- a/osinaweb/osinacore/templates/details_templates/project-details.html
+++ b/osinaweb/osinacore/templates/details_templates/project-details.html
@@ -7,13 +7,44 @@
 
 <div class="w-full xxlg1:w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
 
-    <div class="w-full rounded-md flex flex-col justify-center items-center py-2 bg-gray-400
+    <div class="w-full rounded-md flex flex-col justify-center items-center py-2 bg-gray-400 relative
     {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
     {% if project.projectstatus_set.all.last.status == 'Cancelled' %}bg-red-500{% endif %}
     {% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
-    {% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %}">
+    {% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %} bg-opacity-70">
         <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{project.name}}</h1>
-        <p class="text-white text-center text-base">{{project.project_id}}</p>
+        {% for type in project.project_type.all %}
+        <p class="text-white text-sm">
+            {{type.name}} {% if not forloop.last %} | {% endif %}
+        </p>
+        {% endfor %}
+
+        <div class="absolute top-3 right-3 cursor-pointer" id="pinProject">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 s:w-7 h-6 s:h-7 text-white" color="#000000"
+                fill="none">
+                <path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                    stroke-linejoin="round" />
+                <path
+                    d="M13.2585 18.8714C9.51516 18.0215 5.97844 14.4848 5.12853 10.7415C4.99399 10.1489 4.92672 9.85266 5.12161 9.37197C5.3165 8.89129 5.55457 8.74255 6.03071 8.44509C7.10705 7.77265 8.27254 7.55888 9.48209 7.66586C11.1793 7.81598 12.0279 7.89104 12.4512 7.67048C12.8746 7.44991 13.1622 6.93417 13.7376 5.90269L14.4664 4.59604C14.9465 3.73528 15.1866 3.3049 15.7513 3.10202C16.316 2.89913 16.6558 3.02199 17.3355 3.26771C18.9249 3.84236 20.1576 5.07505 20.7323 6.66449C20.978 7.34417 21.1009 7.68401 20.898 8.2487C20.6951 8.8134 20.2647 9.05346 19.4039 9.53358L18.0672 10.2792C17.0376 10.8534 16.5229 11.1406 16.3024 11.568C16.0819 11.9955 16.162 12.8256 16.3221 14.4859C16.4399 15.7068 16.2369 16.88 15.5555 17.9697C15.2577 18.4458 15.1088 18.6839 14.6283 18.8786C14.1477 19.0733 13.8513 19.006 13.2585 18.8714Z"
+                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+        </div>
+
+        <div class="absolute top-3 right-3 cursor-pointer hidden" id="unpinProject">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 s:w-7 h-6 s:h-7 text-white" color="#000000"
+                fill="none">
+                <path
+                    d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
+                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                <path
+                    d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
+                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                    stroke-linejoin="round" />
+                <path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                    stroke-linejoin="round" />
+            </svg>
+        </div>
     </div>
 
 
@@ -52,11 +83,11 @@
                 class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Create
                 Story</button>
 
-                <a href="" class="w-full md:w-fit">
-                    <button
-                        class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Add
-                        Ticket</button>
-                </a>
+            <a href="" class="w-full md:w-fit">
+                <button
+                    class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Add
+                    Ticket</button>
+            </a>
 
             <a href="{% url 'editproject' project.project_id %}" class="w-full md:w-fit">
                 <button
@@ -67,94 +98,81 @@
     </div>
 
     <div class="w-full flex flex-col gap-5 mt-5">
-        <!-- CLIENT -->
-        <div>
-            <p class="text-gray-500 text-xl">Client: <span
-                    class="text-secondosiblue text-xl font-semibold">{{project.customer.user.first_name}}
-                    {{project.customer.user.last_name}}</span></p>
-        </div>
-
-        <!-- PROJECT MANAGER -->
-        <div>
-            <p class="text-gray-500 text-xl">Project Manager:</p>
-            <div class="w-fit flex justify-start items-center gap-1 px-5 py-3 bg-gray-100 rounded-md shadow-md mt-2">
-                <div class="w-[40px] h-[40px] rounded-full bg-white">
-                    {% if project.manager.image %}
-                    <img src="{{project.manager.image.url}}" class="w-full h-full rounded-full object-cover">
-                    {% else %}
-                    <img src="{% static 'images/default-user.png' %}" class="w-full h-full rounded-full object-cover">
-                    {% endif %}
+        <div class="w-full grid grid-cols-1 xl:grid-cols-2 gap-3">
+            <div class="w-full p-5 bg-white border border-gray-100 shadow-md flex flex-col rounded-md">
+                <div class="w-full border-b border-gray-200 pb-3 flex justify-between items-center gap-2">
+                    <p class="text-secondosiblue font-poppinsBold uppercase">Project Details</p>
+
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                        class="w-7 h-7 text-secondosiblue cursor-pointer hover:scale-105 duration-500" color="#000000"
+                        fill="none">
+                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
+                        <path
+                            d="M10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9C14 9.39815 13.8837 9.76913 13.6831 10.0808C13.0854 11.0097 12 11.8954 12 13V13.5"
+                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                        <path d="M11.992 17H12.001" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round" />
+                    </svg>
                 </div>
 
-                <p class="text-secondosiblue font-light">{{project.manager.user.first_name}}
-                    {{project.manager.user.last_name}}</p>
-            </div>
-        </div>
-
-        <!-- TYPE -->
-        <div class="w-full">
-            <p class="text-gray-500 text-xl">Type:
-                {% for type in project.project_type.all %}
-                <span class="text-secondosiblue text-xl font-semibold">
-                    {{type.name}} {% if not forloop.last %}, {% endif %}
-                    {% endfor %}</span>
-            </p>
-        </div>
-
-
-        <!-- STATUS -->
-        <p class="text-gray-500 text-xl">Status:
-            {% if project.projectstatus_set.exists %}
-                {% with latest_status=project.projectstatus_set.last.status %}
-                    {% if latest_status == 'Cancelled' %}
-                        <span class="text-red-500 text-xl font-semibold">{{ latest_status }}</span>
-                    {% elif latest_status == 'Completed' %}
-                        <span class="text-green-700 text-xl font-semibold">{{ latest_status }}</span>
-                    {% elif latest_status == 'In Progress' %}
-                        <span class="text-orange-500 text-xl font-semibold">{{ latest_status }}</span>
-                    {% elif latest_status == 'Pending' %}
-                        <span class="text-yellow-400 text-xl font-semibold">{{ latest_status }}</span>
-                    {% else %}
-                        <span class="text-gray-700 text-xl font-semibold">Unknown</span>
-                    {% endif %}
-                {% endwith %}
-            {% else %}
-                <span class="text-gray-700 text-xl font-semibold">No status available</span>
-            {% endif %}
-        </p>
+                <!-- PROJECT DETAILS -->
+                <div class="w-full flex flex-col gap-3 mt-3">
+                    <p class="text-gray-500">Project ID: <span class="text-secondosiblue">{{project.project_id}}</span>
+                    </p>
 
+                    <div>
+                        <p class="text-gray-500">Project Description:</p>
+                        <p class="text-secondosiblue">
+                            {{project.details}}
+                        </p>
+                    </div>
 
-        <!-- PROJECT DETAILS -->
-        <div>
-            <div>
-                <p class="text-gray-500 text-xl">Project Details:</p>
-                <div class="w-full pr-8">
-                    <p class="text-secondosiblue font-semibold">
-                        {{project.details}}
-                    </p>
+                    <!-- CLIENT -->
+                    <div>
+                        <p class="text-gray-500">Client:</p>
+                        <a class="">
+                            <div
+                                class="w-full flex justify-between items-center gap-1 px-3 py-3 bg-gray-100 rounded-md shadow-md cursor-pointer hover:scale-105 duration-500">
+                                <p class="text-secondosiblue">
+                                    {{project.customer.user.first_name}} {{project.customer.user.last_name}}
+                                </p>
+
+
+                                <div
+                                    class="w-[30px] h-[30px] rounded-md shadow-md text-white bg-secondosiblue border border-osiblue flex justify-center items-center cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                                    </svg>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
                 </div>
             </div>
-        </div>
 
 
-        <!-- TAGS -->
-        <div>
-            <p class="text-gray-500 text-xl">Tags:</p>
-            <div class="w-full h-fit px-4 mt-3 flex flex-wrap justify-start items-center gap-3">
-                <button
-                    class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none">Media
-                    Streaming</button>
+            <!-- STATUSES -->
+            <div class="w-full p-5 bg-white border border-gray-100 shadow-md flex flex-col rounded-md">
+                <div class="w-full border-b border-gray-200 pb-3">
+                    <p class="text-secondosiblue font-poppinsBold uppercase">Statuses</p>
+                </div>
 
-                <button
-                    class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none">Live
-                    Streaming</button>
 
-                <button
-                    class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none">Audio
-                    On Demand</button>
+                <div class="w-full flex flex-col">
+                    {% for status in statuses %}
+                    <div
+                        class="border-b border-gray-100 py-4 flex justify-between items-center px-3 {% if forloop.first %} bg-gray-100 {% endif %}">
+                        <p class="text-secondosiblue text-sm s:text-base">{{status.status}}</p>
+                        <p class="text-gray-500 text-sm">{{status.date}}</p>
+                    </div>
+                    {% endfor %}
+                </div>
             </div>
         </div>
 
+
         <!-- MEMBERS -->
         <div class="w-full mt-5">
             <div
@@ -164,39 +182,101 @@
                 </div>
 
                 <button
-                    class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addProjectMemberModal" data-modal-url="{% url 'addprojectmembermodal' %}">
+                    class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addProjectMemberModal"
+                    data-modal-url="{% url 'addprojectmembermodal' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
 
-            <div class="w-full flex justify-start items-center gap-3 flex-wrap mt-3">
-                {% for member in members %}
-                <div
-                    class="w-fit flex flex-col gap-2 px-5 py-3 bg-gray-100 rounded-md shadow-md">
-                    <div class="flex justify-start items-center gap-1">
-                        <div class="w-[40px] h-[40px] rounded-full bg-white">
-                            {% if member.image %}
-                            <img src="{{member.image.url}}" class="w-full h-full rounded-full object-cover">
-                            {% else %}
-                            <img src="{% static 'images/default-user.png' %}"
-                                class="w-full h-full rounded-full object-cover">
-                            {% endif %}
+            <div class="w-full grid grid-cols-1 l:grid-cols-2 xl:grid-cols-3 gap-3 mt-3">
+                <!-- PROJECT MANAGER -->
+                <a class="h-full">
+                    <div
+                        class="w-full h-full flex flex-col gap-1 px-3 py-3 bg-gray-100 rounded-md shadow-md cursor-pointer hover:scale-105 duration-500">
+                        <div class="w-full flex justify-between items-center gap-1">
+                            <div class="flex justify-start items-center gap-2">
+                                <div class="w-[45px] h-[45px] rounded-full bg-white">
+                                    {% if project.manager.image %}
+                                    <img src="{{project.manager.image.url}}"
+                                        class="w-full h-full rounded-full object-cover">
+                                    {% else %}
+                                    <img src="{% static 'images/default-user.png' %}"
+                                        class="w-full h-full rounded-full object-cover">
+                                    {% endif %}
+                                </div>
+
+
+                                <div>
+                                    <p class="text-secondosiblue font-light">{{project.manager.user.first_name}}
+                                        {{project.manager.user.last_name}}</p>
+                                    <div class="text-xs bg-secondosiblue text-white shadow-md py-1 px-2 rounded-md">
+                                        <p>Project Manager</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div
+                                class="w-[30px] h-[30px] rounded-md shadow-md text-white bg-secondosiblue border border-osiblue flex justify-center items-center cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                                </svg>
+                            </div>
                         </div>
 
-                        <p class="text-secondosiblue font-light">{{member.user.first_name}} {{member.user.last_name}}
-                        </p>
+                        {% if request.user.is_superuser %}
+                        <p class="text-secondosiblue text-sm">Working Hours:
+                            {{member.total_time_worked_hours}}hr {{member.total_time_worked_minutes}}min
+                            {{member.total_time_worked_seconds}}sec</p>
+                        {% endif %}
                     </div>
+                </a>
 
-                    {% if request.user.is_superuser %}
-                    <p class="text-secondosiblue text-sm">Working Hours:
-                        {{member.total_time_worked_hours}}hr {{member.total_time_worked_minutes}}min
-                        {{member.total_time_worked_seconds}}sec</p>
-                    {% endif %}
-                </div>
+
+
+                {% for member in members %}
+                <a>
+                    <div
+                        class="w-full flex flex-col gap-2 px-3 py-3 bg-gray-100 rounded-md shadow-md cursor-pointer hover:scale-105 duration-500">
+                        <div class="w-full flex justify-between items-center gap-1">
+                            <div class="flex justify-start items-center gap-1">
+                                <div class="w-[45px] h-[45px] rounded-full bg-white">
+                                    {% if member.image %}
+                                    <img src="{{member.image.url}}" class="w-full h-full rounded-full object-cover">
+                                    {% else %}
+                                    <img src="{% static 'images/default-user.png' %}"
+                                        class="w-full h-full rounded-full object-cover">
+                                    {% endif %}
+                                </div>
+
+                                <p class="text-secondosiblue font-light">{{member.user.first_name}}
+                                    {{member.user.last_name}}</p>
+                            </div>
+
+                            <div
+                                class="w-[30px] h-[30px] rounded-md shadow-md text-white bg-secondosiblue border border-osiblue flex justify-center items-center cursor-pointer hover:bg-transparent hover:text-secondosiblue duration-300">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                                </svg>
+                            </div>
+                        </div>
+
+
+                        {% if request.user.is_superuser %}
+                        <p class="text-secondosiblue text-sm">Working Hours:
+                            {{member.total_time_worked_hours}}hr {{member.total_time_worked_minutes}}min
+                            {{member.total_time_worked_seconds}}sec</p>
+                        {% endif %}
+                    </div>
+                </a>
                 {% endfor %}
             </div>
         </div>
 
+
         <!-- TICKETS -->
         <div class="w-full mt-5">
             <div class="overflow-x-auto border border-gray-300 rounded-md">
@@ -260,33 +340,45 @@
                             <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                 <p class="text-secondosiblue">hhh</p>
                             </td>
-                            
+
                             <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                 <p class="text-secondosiblue">hhh</p>
                             </td>
 
                             <td class="px-6 py-4 text-center text-sm">
                                 <div class="w-full flex justify-center items-center gap-3">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[16px] cursor-pointer text-fifthosiblue hover:scale-110 duration-500 transition-transform">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor"
+                                        class="w-[16px] cursor-pointer text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
                                     </svg>
 
                                     <a href="">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                                        </svg>                                          
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                                        </svg>
                                     </a>
                                     <a href="">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                         </svg>
                                     </a>
-                                    <div class="cursor-pointer deleteTicketButton"
-                                    data-modal-url="">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-                                        </svg>                                          
+                                    <div class="cursor-pointer deleteTicketButton" data-modal-url="">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                                        </svg>
                                     </div>
                                 </div>
                             </td>
@@ -368,15 +460,20 @@
                                             Task</button>
                                     </a>
                                     <a href="">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                         </svg>
                                     </a>
-                                    <div class="cursor-pointer deleteTicketButton"
-                                    data-modal-url="">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-                                        </svg>                                          
+                                    <div class="cursor-pointer deleteTicketButton" data-modal-url="">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                                        </svg>
                                     </div>
                                 </div>
                             </td>
@@ -544,6 +641,7 @@
                 </button>
             </div>
 
+            {% if project_notes %}
             <div class="w-full h-fit mt-3 grid grid-cols-3 gap-5">
                 {% for note in project_notes %}
                 <div>
@@ -565,9 +663,53 @@
                         </p>
                     </div>
                 </div>
-
                 {% endfor %}
             </div>
+            {% else %}
+            <div class="w-full flex justify-center items-center px-3 py-3 text-secondosiblue text-center">
+                <p>No Available Notes</p>
+            </div>
+            {% endif %}
+        </div>
+
+
+        <!-- TAGS -->
+        <div class="w-full mt-5">
+            <div
+                class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
+                <div class="px-3">
+                    <p class="text-secondosiblue uppercase font-bold">Tags</p>
+                </div>
+
+                <button
+                    class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addTagButton"
+                    data-modal-url="{% url 'addtagmodal' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+
+            <div class="w-full h-fit mt-3 grid grid-cols-1 s:grid-cols-2 md:grid-cols-3 xlg1:grid-cols-5 gap-3">
+                <a>
+                    <div
+                        class="bg-gray-50 border border-gray-100 text-sm text-secondosiblue px-3 py-3 rounded-md cursor-pointer hover:scale-105 duration-500">
+                        <p>Media </p>
+                    </div>
+                </a>
+
+                <a>
+                    <div
+                        class="bg-gray-50 border border-gray-100 text-sm text-secondosiblue px-3 py-3 rounded-md cursor-pointer hover:scale-105 duration-500">
+                        <p>Media </p>
+                    </div>
+                </a>
+
+                <a>
+                    <div
+                        class="bg-gray-50 border border-gray-100 text-sm text-secondosiblue px-3 py-3 rounded-md cursor-pointer hover:scale-105 duration-500">
+                        <p>Media </p>
+                    </div>
+                </a>
+            </div>
         </div>
 
 
@@ -592,6 +734,7 @@
             </div>
         </div>
 
+
         <!-- LOADER -->
         <div class="w-full flex justify-center items-center p-5 hidden" id="epicLoader">
             <div role="status">
@@ -606,8 +749,8 @@
                 </svg>
             </div>
         </div>
-        
-        
+
+
         <!-- TO DISPLAY THE FETCHED TASKS -->
         <div class="w-full flex flex-col gap-3" id="epicRelatedTasksContainer">
 
@@ -625,10 +768,10 @@
 <!---------------------- JS SCRIPTS -------------------->
 
 <!-- TO FETCH THE RELATED TASKS -->
-<script type="text/javascript" src='{% static "js/fetch-epic-tasks.js" %}'></script>
+<script type="text/javascript" src='{% static "js/api_calls/fetch-epic-tasks.js" %}'></script>
 
 <!-- TO DISPLAY THE PROJECT PROGRESS BAR BASED ON ITS REMAINING TIME -->
-<script type="text/javascript" src='{% static "js/calculate-project-time.js" %}'></script>
+<script type="text/javascript" src='{% static "js/projects/calculate-project-time.js" %}'></script>
 
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/details_templates/task-details.html b/osinaweb/osinacore/templates/details_templates/task-details.html
index 53762fc6..3bd1e5e4 100644
--- a/osinaweb/osinacore/templates/details_templates/task-details.html
+++ b/osinaweb/osinacore/templates/details_templates/task-details.html
@@ -6,7 +6,7 @@
 <div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
 
     <div
-        class="w-full rounded-t-md flex flex-col justify-center items-center py-3  {% if task.status == 'Open' %} bg-osiblue {% endif %}  {% if task.status == 'Working On' %} bg-yellow-500 {% endif %}  {% if task.status == 'Closed' %} bg-green-700 {% endif %}">
+        class="w-full rounded-md flex flex-col justify-center items-center py-3  {% if task.status == 'Open' %} bg-osiblue {% endif %}  {% if task.status == 'Working On' %} bg-yellow-500 {% endif %}  {% if task.status == 'Closed' %} bg-green-700 {% endif %} bg-opacity-70">
         <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{task.name}}</h1>
     </div>
 
diff --git a/osinaweb/osinacore/templates/details_templates/ticket-details.html b/osinaweb/osinacore/templates/details_templates/ticket-details.html
index e8ba939c..4da65c5d 100644
--- a/osinaweb/osinacore/templates/details_templates/ticket-details.html
+++ b/osinaweb/osinacore/templates/details_templates/ticket-details.html
@@ -422,9 +422,9 @@
 
 <!---------------------- JS SCRIPTS -------------------->
 
-<script type="text/javascript" src="{% static 'js/customer_dashboard/ticket-details.js' %}"></script>
-<script type="text/javascript" src="{% static 'js/text-editor.js' %}"></script>
+<script type="text/javascript" src="{% static 'js/tickets/ticket-details.js' %}"></script>
+<script type="text/javascript" src="{% static 'js/inputs/text-editor.js' %}"></script>
 
-<script type="text/javascript" src='{% static "js/file-uploader.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/file-uploader.js" %}'></script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/edit_templates/edit-business.html b/osinaweb/osinacore/templates/edit_templates/edit-business.html
index e4d8f761..0f3c0499 100644
--- a/osinaweb/osinacore/templates/edit_templates/edit-business.html
+++ b/osinaweb/osinacore/templates/edit_templates/edit-business.html
@@ -133,6 +133,6 @@
 </div>
 
 <!-------------- JS SCRIPTS --------------->
-<script type="text/javascript" src='{% static "js/upload-image-tag.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/upload-image-tag.js" %}'></script>
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/edit_templates/edit-staff.html b/osinaweb/osinacore/templates/edit_templates/edit-staff.html
index 0c5912a8..1316e513 100644
--- a/osinaweb/osinacore/templates/edit_templates/edit-staff.html
+++ b/osinaweb/osinacore/templates/edit_templates/edit-staff.html
@@ -103,7 +103,7 @@
 
 
 <!-------------- JS SCRIPTS --------------->
-<script type="text/javascript" src='{% static "js/upload-image-tag.js" %}'></script>
+<script type="text/javascript" src='{% static "js/inputs/upload-image-tag.js" %}'></script>
 
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/edit_templates/edit-task.html b/osinaweb/osinacore/templates/edit_templates/edit-task.html
index fcc2251d..760336eb 100644
--- a/osinaweb/osinacore/templates/edit_templates/edit-task.html
+++ b/osinaweb/osinacore/templates/edit_templates/edit-task.html
@@ -122,6 +122,6 @@
 <!---------------------- JS SCRIPTS -------------------->
 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
 
-<script type="text/javascript" src='{% static "js/fetch-epics-in-edit-task.js" %}'></script>
+<script type="text/javascript" src='{% static "js/api_calls/fetch-epics-in-edit-task.js" %}'></script>
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/listing_pages/projects.html b/osinaweb/osinacore/templates/listing_pages/projects.html
index d15b28d2..39276a7b 100644
--- a/osinaweb/osinacore/templates/listing_pages/projects.html
+++ b/osinaweb/osinacore/templates/listing_pages/projects.html
@@ -54,114 +54,6 @@
         </div>
     </div>
 
-    <!-- ALL PROJECTS -->
-    <div class="w-full flex flex-col gap-5 mt-3 hidden" id="allProjectsContainer">
-        {% for project in projects %}
-        <div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
-            <p id="projectId" class="hidden">{{project.id}}</p>
-
-            <p class="hidden startDate">{{project.start_date}}</p>
-            <p class="hidden endDate">{{project.end_date}}</p>
-
-
-            <div class="w-full bg-white h-fit rounded-md border border-gray-200">
-                <div class="w-full px-5 py-5 bg-gray-400 {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
-                {% if project.projectstatus_set.all.last.status == 'Cancelled' %}bg-red-500{% endif %}
-                {% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
-                {% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %}
-                flex justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px]">
-                    <p>{{project.name}}</p>
-                </div>
-
-                <!-- Progress Bar -->
-                <div class="w-full h-[8px] bg-gray-100 mainBar">
-                    <div class="h-full progressBar">
-                    </div>
-                </div>
-
-
-
-                <div class="w-full grid grid-cols-1 l:grid-cols-2">
-                    <!-- Left Section -->
-                    <div class="flex flex-col justify-between">
-                        <!-- Details -->
-                        <div class="w-full flex flex-col gap-3 p-5">
-                            <div class="w-full flex justify-start items-center gap-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
-                                </svg>
-
-                                <p class="text-secondosiblue"><span
-                                        class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open {% if project.open_user_tasks_count == 1 %} Task {% else %} Tasks {% endif %}</p>
-                            </div>
-
-
-                            <div class="w-full flex justify-start items-center gap-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                                </svg>
-
-                                <p class="text-secondosiblue">Total Time: <span
-                                        class="font-poppinsBold">{{project.total_time_worked_hours}}hr
-                                        {{project.total_time_worked_minutes}}min
-                                        {{project.total_time_worked_seconds}}sec</span>
-                                </p>
-                            </div>
-
-                        </div>
-
-                        <!-- Action Buttons -->
-                        <div
-                            class="w-full border-t border-b l:border-b-0 border-gray-200 grid grid-cols-1 s:grid-cols-3">
-                            <a href="{% url 'detailed-project' project.project_id %}"
-                                class="p-3 border-b s:border-b-0 border-r-0 s:border-r border-gray-200 text-base bg-gray-50 text-secondosiblue flex justify-center items-center">View</a>
-
-                            <a href="{% url 'editproject' project.project_id %}"
-                                class="p-3 text-base bg-gray-50 border-b s:border-b-0 border-r-0 s:border-r border-gray-200 text-secondosiblue flex justify-center items-center">Edit</a>
-
-                            <button class="p-3 text-base bg-gray-50 text-secondosiblue editProjectStatusButton"
-                                data-modal-url="{% url 'editprojectstatusmodal' project.id %}">Update Status</button>
-                        </div>
-                    </div>
-
-                    <!-- Right Section - Recent Notes -->
-                    <div class="w-full border-l-none l:border-l border-gray-200">
-                        {% if project.note_set.exists %}
-                        {% with last_note=project.note_set.last %}
-                        <div class="w-full h-full flex flex-col gap-3 justify-center items-center p-3">
-                            <p class="text-secondosiblue break-all whitespace-pre-wrap">{{ last_note.text }}</p>
-                            <div class="w-[30px] h-[30px] rounded-full shadow-md p-1 flex justify-center items-center bg-gray-100 cursor-pointer hover:scale-105 duration-300 addProjectNoteButton"
-                                data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
-                                    stroke="currentColor" class="w-6 h-6 text-secondosiblue">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                                </svg>
-                            </div>
-                        </div>
-                        {% endwith %}
-                        {% else %}
-                        <div class="w-full h-full flex flex-col justify-center items-center gap-3 p-3">
-                            <p class="text-secondosiblue">No Recent Note</p>
-                            <div class="w-[30px] h-[30px] rounded-full shadow-md p-1 flex justify-center items-center bg-gray-100 cursor-pointer hover:scale-105 duration-300 addProjectNoteButton"
-                                data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
-                                    stroke="currentColor" class="w-6 h-6 text-secondosiblue">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                                </svg>
-                            </div>
-                        </div>
-
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-        </div>
-        {% endfor %}
-    </div>   
 
     <!-- IN PROGRESS PROJECTS -->
     <div class="w-full flex flex-col gap-5 mt-3" id="inProgressProjectsContainer">
@@ -175,9 +67,12 @@
 
 
             <div class="w-full bg-white h-fit rounded-md border border-gray-200">
-                <div class="w-full px-5 py-5 bg-orange-500 flex justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px]">
-                    <p>{{project.name}}</p>
-                </div>
+                <a href="{% url 'detailed-project' project.project_id %}">
+                    <div class="w-full px-5 py-5 bg-orange-500 flex justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300">
+                        <p>{{project.name}}</p>
+                    </div>
+                </a>
+
 
                 <!-- Progress Bar -->
                 <div class="w-full h-[8px] bg-gray-100 mainBar">
@@ -260,7 +155,6 @@
                                 </svg>
                             </div>
                         </div>
-
                         {% endif %}
                     </div>
                 </div>
@@ -282,9 +176,9 @@
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 <!-- TO DISPLAY THE PROJECT PROGRESS BAR BASED ON ITS REMAINING TIME -->
-<script type="module" src='{% static "js/calculate-all-projects-time.js" %}'></script>
+<script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
 
-<script  type="module" src='{% static "js/projects-filtering.js" %}'></script>
+<script type="module" src='{% static "js/projects/projects-filtering.js" %}'></script>
 
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/listing_pages/tickets.html b/osinaweb/osinacore/templates/listing_pages/tickets.html
index 6cbd1be3..9d5636fe 100644
--- a/osinaweb/osinacore/templates/listing_pages/tickets.html
+++ b/osinaweb/osinacore/templates/listing_pages/tickets.html
@@ -2,11 +2,10 @@
 {%load static%}
 {% block content %}
 
+<div class="w-full xxlg1:w-[75%] relative">
 
-<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-[25px]">Tickets</h1>
-
         <!-- FILTERING -->
         <div
             class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row gap-3 justify-between items-center">
@@ -23,7 +22,7 @@
         </div>
 
 
-        <div class="w-full flex flex-col gap-3 mt-5">
+        <div class="w-full flex flex-col justify-center items-center gap-3 mt-5">
             <div class="w-full bg-gray-200 rounded-md shadow-md h-fit p-3 flex items-center justify-between gap-5">
                 <div class="flex items-center gap-5 text-[17px]">
                     <p class="text-secondosiblue font-semibold cursor-pointer" id="openTicketsLink">Open Tickets</p>
@@ -31,11 +30,14 @@
                 </div>
             </div>
 
-
+            <!-- RESPONSE MESSGAE FOR SHARING A TICKET -->
+            <div id="successMessage"
+                class="fixed mx-auto top-10 opacity-0 w-[85%] s:w-fit px-9 s:px-14 py-3 rounded-md bg-osiblue bg-opacity-80 text-white text-center rounded-t-md shadow-md z-10 pointer-events-none">
+            </div>
 
 
             <!-- OPEN TICKETS -->
-            <div class="overflow-x-auto border border-gray-300 rounded-md" id="openTickets">
+            <div class="w-full overflow-x-auto border border-gray-300 rounded-md" id="openTickets">
                 <table class="min-w-full divide-y">
                     <!-- TABLE HEADER -->
                     <thead class="bg-gray-50">
@@ -90,52 +92,51 @@
                             </td>
 
                             <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                <p class="text-secondosiblue">{{ticket.ticketupdate_set.all.last.added_by.first_name}}</p>
+                                <p class="text-secondosiblue">{{ticket.ticketupdate_set.all.last.added_by.first_name}}
+                                </p>
                             </td>
 
                             <td class="px-6 py-4 text-center text-sm">
                                 <div class="flex justify-center items-center gap-3">
 
-                                    <button onclick="myFunction()">
-                                        <input type="text" class="hidden" value="https://osina.ositcom.com/my-tickets/{{ticket.ticket_number}}/" id="myInput">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[16px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
+                                    <button class="copyButton">
+                                        <input type="text" class="hidden copyInput"
+                                            value="https://osina.ositcom.com/my-tickets/{{ticket.ticket_number}}/">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[16px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
                                         </svg>
-                                          
                                     </button>
 
-                                    <script>
-                                        function myFunction() {
-                                        // Get the text field
-                                        var copyText = document.getElementById("myInput");
-
-                                        // Select the text field
-                                        copyText.select();
-                                        copyText.setSelectionRange(0, 99999); // For mobile devices
-
-                                        // Copy the text inside the text field
-                                        navigator.clipboard.writeText(copyText.value);
-                                        
-                                        // Alert the copied text
-                                        alert("Copied Link: " + copyText.value);
-                                        }
-                                    </script>
+
                                     <a href="{% url 'ticketdetails' ticket.ticket_number %}">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                                        </svg>                                          
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                                        </svg>
                                     </a>
                                     <a href="">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                         </svg>
                                     </a>
                                     <div class="cursor-pointer deleteTicketButton"
-                                    data-modal-url="{% url 'deleteticketmodal' ticket.id %}">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-                                        </svg>                                          
+                                        data-modal-url="{% url 'deleteticketmodal' ticket.id %}">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                                        </svg>
                                     </div>
                                 </div>
                             </td>
@@ -145,10 +146,10 @@
                 </table>
             </div>
 
-    
+
 
             <!-- CLOSED TICKETS -->
-            <div class="overflow-x-auto border border-gray-300 rounded-md hidden" id="closedTickets">
+            <div class="w-full overflow-x-auto border border-gray-300 rounded-md hidden" id="closedTickets">
                 <table class="min-w-full divide-y">
                     <!-- TABLE HEADER -->
                     <thead class="bg-gray-50">
@@ -202,27 +203,49 @@
                             </td>
 
                             <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                <p class="text-secondosiblue">{{ticket.ticketupdate_set.all.last.added_by.first_name}}</p>
+                                <p class="text-secondosiblue">{{ticket.ticketupdate_set.all.last.added_by.first_name}}
+                                </p>
                             </td>
 
                             <td class="px-6 py-4 text-center text-sm">
                                 <div class="flex justify-center items-center gap-3">
+                                    <button class="copyButton">
+                                        <input type="text" class="hidden copyInput"
+                                            value="https://osina.ositcom.com/my-tickets/{{ticket.ticket_number}}/">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[16px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
+                                        </svg>
+                                    </button>
+
                                     <a href="{% url 'ticketdetails' ticket.ticket_number %}">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                                        </svg>                                          
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                                        </svg>
                                     </a>
                                     <a href="">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                         </svg>
                                     </a>
                                     <div class="cursor-pointer deleteTicketButton"
-                                    data-modal-url="{% url 'deleteticketmodal' ticket.id %}">
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-                                        </svg>                                          
+                                        data-modal-url="{% url 'deleteticketmodal' ticket.id %}">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                            stroke-width="1.5" stroke="currentColor"
+                                            class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                                        </svg>
                                     </div>
                                 </div>
                             </td>
@@ -239,8 +262,8 @@
     </div>
 </div>
 
-<script type="text/javascript" src='{% static "js/tickets-filtering.js" %}'></script>
-
+<script type="text/javascript" src='{% static "js/tickets/tickets-filtering.js" %}'></script>
 
+<script type="text/javascript" src='{% static "js/tickets/share-ticket.js" %}'></script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/login.html b/osinaweb/osinacore/templates/login.html
index 37744bb7..5b01b77c 100644
--- a/osinaweb/osinacore/templates/login.html
+++ b/osinaweb/osinacore/templates/login.html
@@ -250,11 +250,11 @@
 
     <!-- Include the intl-tel-input JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
-    <script src='{% static "js/international-mobile-input-tag.js" %}'></script>
+    <script src='{% static "js/login_register/international-mobile-input-tag.js" %}'></script>
 
-    <script src='{% static "js/login-register.js" %}'></script>
+    <script src='{% static "js/login_register/login-register.js" %}'></script>
 
-    <script src='{% static "js/registration.js" %}'></script>
+    <script src='{% static "js/login_register/registration.js" %}'></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/osinaweb/osinacore/templates/main.html b/osinaweb/osinacore/templates/main.html
index dbd0aaa4..8a73103b 100644
--- a/osinaweb/osinacore/templates/main.html
+++ b/osinaweb/osinacore/templates/main.html
@@ -1116,25 +1116,25 @@
     <script type="text/javascript" src='{% static "js/draggable-slider.js" %}'></script>
 
     <!-- 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>
+    <script type="text/javascript" src='{% static "js/notes/show-notes.js" %}'></script>
 
     <!-- IT OPENS A POPUP FOR THE WHOLE NOTE CONTENT -->
-    <script type="text/javascript" src='{% static "js/notes-pop-modal.js" %}'></script>
+    <script type="text/javascript" src='{% static "js/notes/notes-pop-modal.js" %}'></script>
 
     <!-- TO OPEN TASKS ACTIONS BUTTONS CONTAINER ON MOBILE -->
     <script type="text/javascript" src='{% static "js/tasks.js" %}'></script>
 
     <!-- TO SWITCH BETWEEN STATUSES FROM ONLINE TO OFFLINE -->
-    <script type="text/javascript" src='{% static "js/switch-status.js" %}'></script>
+    <script type="text/javascript" src='{% static "js/api_calls/switch-status.js" %}'></script>
 
     <!-- TO OPEN EMOJI PICKER TO ADD REACTIONS -->
     <script type="text/javascript" src='{% static "js/emoji-picker.js" %}'></script>
 
     <!-- TO RELOAD THE STATUS CONTAINER -->
-    <script type="text/javascript" src='{% static "js/get-updated-last-status.js" %}'></script>
+    <script type="text/javascript" src='{% static "js/api_calls/get-updated-last-status.js" %}'></script>
 
     <!-- TO RELOAD THE USERS ACTIVITY CONTAINER -->
-    <script type="text/javascript" src='{% static "js/get-updated-user-activity.js" %}'></script>
+    <script type="text/javascript" src='{% static "js/api_calls/get-updated-user-activity.js" %}'></script>
 
     <!-- NOTIFICATIONS SIDE BAR -->
     <script type="text/javascript" src='{% static "js/notifications-side-bar.js" %}'></script>
diff --git a/osinaweb/osinacore/templates/projects-by-status.html b/osinaweb/osinacore/templates/projects-by-status.html
index 2b967cba..16476831 100644
--- a/osinaweb/osinacore/templates/projects-by-status.html
+++ b/osinaweb/osinacore/templates/projects-by-status.html
@@ -8,13 +8,16 @@
     <p class="hidden endDate">{{project.end_date}}</p>
 
     <div class="w-full bg-white h-fit rounded-md border border-gray-200">
-        <div class="w-full px-5 py-5 {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
-            {% if project.projectstatus_set.all.last.status == 'Cancelled' %}bg-red-500{% endif %}
-            {% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
-            {% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %}
-            flex justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px]">
-            <p>{{project.name}}</p>
-        </div>
+        <a href="{% url 'detailed-project' project.project_id %}">
+            <div class="w-full px-5 py-5 {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
+                {% if project.projectstatus_set.all.last.status == 'Cancelled' %}bg-red-500{% endif %}
+                {% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
+                {% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %}
+                flex justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300">
+                <p>{{project.name}}</p>
+            </div>
+        </a>
+
 
          <!-- Progress Bar -->
          <div class="w-full h-[8px] bg-gray-100 mainBar">
diff --git a/osinaweb/osinacore/templates/recent-activities-page.html b/osinaweb/osinacore/templates/recent-activities-page.html
index ae2146b5..8f3f475a 100644
--- a/osinaweb/osinacore/templates/recent-activities-page.html
+++ b/osinaweb/osinacore/templates/recent-activities-page.html
@@ -747,16 +747,16 @@
     <script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
 
     <!-- TO SWITCH BETWEEN STATUSES FROM ONLINE TO OFFLINE -->
-    <script type="text/javascript" src='{% static "js/switch-status.js" %}'></script>
+    <script type="text/javascript" src='{% static "js/api_calls/switch-status.js" %}'></script>
 
     <!-- TO OPEN EMOJI PICKER TO ADD REACTIONS -->
     <script type="text/javascript" src='{% static "js/emoji-picker.js" %}'></script>
 
     <!-- TO RELOAD THE USERS ACTIVITY CONTAINER -->
-    <script type="text/javascript" src='{% static "js/get-updated-user-activity.js" %}'></script>   
+    <script type="text/javascript" src='{% static "js/api_calls/get-updated-user-activity.js" %}'></script>   
 
     <!-- TO RELOAD THE STATUS CONTAINER -->
-    <script type="text/javascript" src='{% static "js/get-updated-last-status.js" %}'></script>
+    <script type="text/javascript" src='{% static "js/api_calls/get-updated-last-status.js" %}'></script>
 
 </body>
 
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index 7b6b521d..6c96c3eb 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -628,6 +628,7 @@ def projectdetails(request, project_id):
     epics = Epic.objects.filter(project=project).order_by('-id')
 
     project_notes = Note.objects.filter(project=project).order_by('-id')
+    statuses = ProjectStatus.objects.filter(project=project).order_by('-id')
 
 
 
@@ -653,6 +654,7 @@ def projectdetails(request, project_id):
         'epics': epics,
         'project_notes' : project_notes,
         'members': members,
+        'statuses' : statuses,
     }
 
     return render(request, 'details_templates/project-details.html', context)
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 614869e2..1ab2db77 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -866,6 +866,10 @@ video {
   top: 14px;
 }
 
+.right-1\/2 {
+  right: 50%;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -1052,6 +1056,18 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.mr-0 {
+  margin-right: 0px;
+}
+
+.-mr-3 {
+  margin-right: -0.75rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -1667,6 +1683,10 @@ video {
   grid-template-columns: repeat(8, minmax(0, 1fr));
 }
 
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -2747,6 +2767,10 @@ video {
   padding-top: 2.25rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -3627,6 +3651,10 @@ video {
     height: 90px;
   }
 
+  .s\:h-7 {
+    height: 1.75rem;
+  }
+
   .s\:w-\[100px\] {
     width: 100px;
   }
@@ -3680,6 +3708,10 @@ video {
     width: fit-content;
   }
 
+  .s\:w-7 {
+    width: 1.75rem;
+  }
+
   .s\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3780,6 +3812,10 @@ video {
     display: flex;
   }
 
+  .md\:grid {
+    display: grid;
+  }
+
   .md\:hidden {
     display: none;
   }
@@ -3837,6 +3873,10 @@ video {
     width: fit-content;
   }
 
+  .l\:w-\[400px\] {
+    width: 400px;
+  }
+
   .l\:max-w-xl {
     max-width: 36rem;
   }
@@ -3892,6 +3932,10 @@ video {
     width: 480px;
   }
 
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
   .lg\:text-\[48px\] {
     font-size: 48px;
   }
@@ -3930,6 +3974,10 @@ video {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .xlg1\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
   .xlg1\:overflow-visible {
     overflow: visible;
   }
@@ -4030,6 +4078,14 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .xl\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .xl\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .xl\:text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem;
diff --git a/osinaweb/static/js/fetch-epic-tasks.js b/osinaweb/static/js/api_calls/fetch-epic-tasks.js
similarity index 100%
rename from osinaweb/static/js/fetch-epic-tasks.js
rename to osinaweb/static/js/api_calls/fetch-epic-tasks.js
diff --git a/osinaweb/static/js/fetch-epics-in-edit-task.js b/osinaweb/static/js/api_calls/fetch-epics-in-edit-task.js
similarity index 100%
rename from osinaweb/static/js/fetch-epics-in-edit-task.js
rename to osinaweb/static/js/api_calls/fetch-epics-in-edit-task.js
diff --git a/osinaweb/static/js/get-updated-last-status.js b/osinaweb/static/js/api_calls/get-updated-last-status.js
similarity index 100%
rename from osinaweb/static/js/get-updated-last-status.js
rename to osinaweb/static/js/api_calls/get-updated-last-status.js
diff --git a/osinaweb/static/js/get-updated-user-activity.js b/osinaweb/static/js/api_calls/get-updated-user-activity.js
similarity index 100%
rename from osinaweb/static/js/get-updated-user-activity.js
rename to osinaweb/static/js/api_calls/get-updated-user-activity.js
diff --git a/osinaweb/static/js/switch-status.js b/osinaweb/static/js/api_calls/switch-status.js
similarity index 100%
rename from osinaweb/static/js/switch-status.js
rename to osinaweb/static/js/api_calls/switch-status.js
diff --git a/osinaweb/static/js/file-uploader.js b/osinaweb/static/js/inputs/file-uploader.js
similarity index 100%
rename from osinaweb/static/js/file-uploader.js
rename to osinaweb/static/js/inputs/file-uploader.js
diff --git a/osinaweb/static/js/text-editor.js b/osinaweb/static/js/inputs/text-editor.js
similarity index 100%
rename from osinaweb/static/js/text-editor.js
rename to osinaweb/static/js/inputs/text-editor.js
diff --git a/osinaweb/static/js/upload-image-tag.js b/osinaweb/static/js/inputs/upload-image-tag.js
similarity index 100%
rename from osinaweb/static/js/upload-image-tag.js
rename to osinaweb/static/js/inputs/upload-image-tag.js
diff --git a/osinaweb/static/js/upload-input-tag.js b/osinaweb/static/js/inputs/upload-input-tag.js
similarity index 100%
rename from osinaweb/static/js/upload-input-tag.js
rename to osinaweb/static/js/inputs/upload-input-tag.js
diff --git a/osinaweb/static/js/international-mobile-input-tag.js b/osinaweb/static/js/login_register/international-mobile-input-tag.js
similarity index 100%
rename from osinaweb/static/js/international-mobile-input-tag.js
rename to osinaweb/static/js/login_register/international-mobile-input-tag.js
diff --git a/osinaweb/static/js/login-register.js b/osinaweb/static/js/login_register/login-register.js
similarity index 100%
rename from osinaweb/static/js/login-register.js
rename to osinaweb/static/js/login_register/login-register.js
diff --git a/osinaweb/static/js/registration.js b/osinaweb/static/js/login_register/registration.js
similarity index 100%
rename from osinaweb/static/js/registration.js
rename to osinaweb/static/js/login_register/registration.js
diff --git a/osinaweb/static/js/notes-pop-modal.js b/osinaweb/static/js/notes/notes-pop-modal.js
similarity index 100%
rename from osinaweb/static/js/notes-pop-modal.js
rename to osinaweb/static/js/notes/notes-pop-modal.js
diff --git a/osinaweb/static/js/show-notes.js b/osinaweb/static/js/notes/show-notes.js
similarity index 100%
rename from osinaweb/static/js/show-notes.js
rename to osinaweb/static/js/notes/show-notes.js
diff --git a/osinaweb/static/js/add-project.js b/osinaweb/static/js/projects/add-project.js
similarity index 100%
rename from osinaweb/static/js/add-project.js
rename to osinaweb/static/js/projects/add-project.js
diff --git a/osinaweb/static/js/calculate-all-projects-time.js b/osinaweb/static/js/projects/calculate-all-projects-time.js
similarity index 100%
rename from osinaweb/static/js/calculate-all-projects-time.js
rename to osinaweb/static/js/projects/calculate-all-projects-time.js
diff --git a/osinaweb/static/js/calculate-project-time.js b/osinaweb/static/js/projects/calculate-project-time.js
similarity index 100%
rename from osinaweb/static/js/calculate-project-time.js
rename to osinaweb/static/js/projects/calculate-project-time.js
diff --git a/osinaweb/static/js/projects-filtering.js b/osinaweb/static/js/projects/projects-filtering.js
similarity index 86%
rename from osinaweb/static/js/projects-filtering.js
rename to osinaweb/static/js/projects/projects-filtering.js
index 0b8246df..3c023cf5 100644
--- a/osinaweb/static/js/projects-filtering.js
+++ b/osinaweb/static/js/projects/projects-filtering.js
@@ -1,10 +1,9 @@
-import { initializeModalButtons } from '../js/pop-modals.js';
-import { updateAllProjectProgress } from '../js/calculate-all-projects-time.js';
+import { initializeModalButtons } from '../pop-modals.js';
+import { updateAllProjectProgress } from '../../js/projects/calculate-all-projects-time.js';
 
 document.addEventListener('DOMContentLoaded', function () {
     const inProgressProjectsContainer = document.getElementById('inProgressProjectsContainer');
     const projectsByStatusContainer = document.getElementById('projectsByStatusContainer');
-    const allProjectsContainer = document.getElementById('allProjectsContainer');
     const projectLoader = document.getElementById('projectLoader');
     const statusesSelectTag = document.getElementById('statusesSelectTag');
 
@@ -14,7 +13,6 @@ document.addEventListener('DOMContentLoaded', function () {
         projectLoader.classList.remove('hidden');
         inProgressProjectsContainer.classList.add('hidden');
         projectsByStatusContainer.classList.add('hidden');
-        allProjectsContainer.classList.add('hidden');
 
         if (selectedStatus === 'All') {
             fetch('/all-projects/')
diff --git a/osinaweb/static/js/tickets-filtering.js b/osinaweb/static/js/tickets-filtering.js
deleted file mode 100644
index 56537dd5..00000000
--- a/osinaweb/static/js/tickets-filtering.js
+++ /dev/null
@@ -1,28 +0,0 @@
-function showOpenTickets() {
-    openTicketsContainer.classList.remove('hidden');
-    closedTicketsContainer.classList.add('hidden');
-    openTicketsLink.classList.add('text-secondosiblue', 'font-semibold');
-    closedTicketsLink.classList.remove('text-secondosiblue', 'font-semibold');
-    closedTicketsLink.classList.add('text-gray-500');
-}
-
-
-function showClosedTickets() {
-    openTicketsContainer.classList.add('hidden');
-    closedTicketsContainer.classList.remove('hidden');
-    closedTicketsLink.classList.add('text-secondosiblue', 'font-semibold');
-    openTicketsLink.classList.remove('text-secondosiblue', 'font-semibold');
-    openTicketsLink.classList.add('text-gray-500');
-}
-
-const openTicketsLink = document.getElementById('openTicketsLink');
-const closedTicketsLink = document.getElementById('closedTicketsLink');
-const openTicketsContainer = document.getElementById('openTickets');
-const closedTicketsContainer = document.getElementById('closedTickets');
-
-
-openTicketsLink.addEventListener('click', showOpenTickets);
-closedTicketsLink.addEventListener('click', showClosedTickets);
-
-
-showOpenTickets();
\ No newline at end of file
diff --git a/osinaweb/static/js/add-ticket.js b/osinaweb/static/js/tickets/add-ticket.js
similarity index 100%
rename from osinaweb/static/js/add-ticket.js
rename to osinaweb/static/js/tickets/add-ticket.js
diff --git a/osinaweb/static/js/customer_dashboard/regarding-ticket.js b/osinaweb/static/js/tickets/regarding-ticket.js
similarity index 100%
rename from osinaweb/static/js/customer_dashboard/regarding-ticket.js
rename to osinaweb/static/js/tickets/regarding-ticket.js
diff --git a/osinaweb/static/js/tickets/share-ticket.js b/osinaweb/static/js/tickets/share-ticket.js
new file mode 100644
index 00000000..46ad61f9
--- /dev/null
+++ b/osinaweb/static/js/tickets/share-ticket.js
@@ -0,0 +1,26 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const copyButtons = document.querySelectorAll('.copyButton');
+    const successMessage = document.getElementById('successMessage');
+
+    copyButtons.forEach(button => {
+        button.addEventListener('click', function () {
+            const copyInput = button.querySelector('.copyInput');
+
+            copyInput.select();
+            copyInput.setSelectionRange(0, 99999); // For mobile devices
+
+            navigator.clipboard.writeText(copyInput.value).then(function () {
+                successMessage.textContent = "Copied Link: " + copyInput.value;
+                successMessage.classList.add('show-message');
+                successMessage.classList.remove('hide-message');
+
+                setTimeout(function () {
+                    successMessage.classList.remove('show-message');
+                    successMessage.classList.add('hide-message');
+                }, 10000);
+            }, function (err) {
+                console.error('Async: Could not copy text: ', err);
+            });
+        });
+    });
+});
diff --git a/osinaweb/static/js/customer_dashboard/ticket-details.js b/osinaweb/static/js/tickets/ticket-details.js
similarity index 100%
rename from osinaweb/static/js/customer_dashboard/ticket-details.js
rename to osinaweb/static/js/tickets/ticket-details.js
diff --git a/osinaweb/static/js/customer_dashboard/tickets-filtering.js b/osinaweb/static/js/tickets/tickets-filtering.js
similarity index 100%
rename from osinaweb/static/js/customer_dashboard/tickets-filtering.js
rename to osinaweb/static/js/tickets/tickets-filtering.js