diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index ff815cec..b0d350e6 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/edit/__pycache__/urls.cpython-310.pyc b/osinaweb/osinacore/edit/__pycache__/urls.cpython-310.pyc
index 4f212282..3d5378ad 100644
Binary files a/osinaweb/osinacore/edit/__pycache__/urls.cpython-310.pyc and b/osinaweb/osinacore/edit/__pycache__/urls.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/edit/__pycache__/views.cpython-310.pyc b/osinaweb/osinacore/edit/__pycache__/views.cpython-310.pyc
index bc039f7e..c6dce4e3 100644
Binary files a/osinaweb/osinacore/edit/__pycache__/views.cpython-310.pyc and b/osinaweb/osinacore/edit/__pycache__/views.cpython-310.pyc differ
diff --git a/osinaweb/osinacore/edit/urls.py b/osinaweb/osinacore/edit/urls.py
index f2390bf2..b2b65e8c 100644
--- a/osinaweb/osinacore/edit/urls.py
+++ b/osinaweb/osinacore/edit/urls.py
@@ -24,5 +24,5 @@ urlpatterns = [
     path('mark_point_completed/<int:point_id>/<str:task_id>/', views.mark_point_completed, name='mark_point_completed'),
     path('mark_point_completed_task_page/<int:point_id>/<str:task_id>/', views.mark_point_completed_task_page, name='mark_point_completed_task_page'),
     path('mark_point_paused/<int:point_id>/<str:task_id>/', views.mark_point_paused, name='mark_point_paused'),
-   
+    path('mark_point_paused_task_page/<int:point_id>/<str:task_id>/', views.mark_point_paused, name='mark_point_paused_task_page'),
 ]
\ No newline at end of file
diff --git a/osinaweb/osinacore/edit/views.py b/osinaweb/osinacore/edit/views.py
index f898fc53..c50bf020 100644
--- a/osinaweb/osinacore/edit/views.py
+++ b/osinaweb/osinacore/edit/views.py
@@ -457,6 +457,32 @@ def mark_point_paused(request, point_id, task_id):
 
 
 
+@login_required
+def mark_point_paused_task_page(request, point_id, task_id):
+    task = get_object_or_404(Task, id=task_id)
+    point = get_object_or_404(Point, id=point_id)
+    point.status = 'Paused'
+    current_datetime = datetime.now()
+
+    point.save()
+
+    last_activity = PointActivity.objects.filter(point=point).last()
+    if last_activity:
+        last_activity.end_time = timezone.make_aware(current_datetime, timezone.get_current_timezone())
+        last_activity.save()
+    
+    status_text = f'{point.text} - Paused'
+    status = Status(text=status_text, date=current_datetime.date(), time=current_datetime.strftime("%I:%M %p"), staff=request.user.staffprofile)
+    status.save()
+
+
+    task_id_str = task.task_id
+
+    showpoints_url = reverse('showpoints', args=[task_id_str])
+    return HttpResponseRedirect(showpoints_url)
+
+
+
 @login_required
 def mark_point_completed(request, point_id, task_id):
     task = get_object_or_404(Task, id=task_id)
@@ -491,9 +517,7 @@ def mark_point_completed(request, point_id, task_id):
     status = Status(text=status_text, date=current_datetime.date(), time=current_datetime.strftime("%I:%M %p"), staff=request.user.staffprofile)
     status.save()
 
-    task_id_str = task.task_id
-    showpoints_url = reverse('showpoints', args=[task_id_str])
-    return HttpResponseRedirect(showpoints_url)
+    return redirect('detailed-task', task_id=task.task_id)
 
 
 
@@ -502,18 +526,32 @@ def mark_point_completed_task_page(request, point_id, task_id):
     task = get_object_or_404(Task, id=task_id)
     point = get_object_or_404(Point, id=point_id)
     point.status = 'Completed'
-    current_datetime = datetime.now()
 
+    current_datetime = datetime.now()
 
     point.save()
 
-   
+    # Update the end time of the last activity to the current time
     last_activity = PointActivity.objects.filter(point=point).last()
-    last_activity.end_time =  datetime.now()
-    last_activity.save()
+    if last_activity:
+        last_activity.end_time = timezone.make_aware(current_datetime, timezone.get_current_timezone())
+        last_activity.save()
+
 
+    total_time_hours, total_time_minutes, total_time_seconds = point.total_activity_time()
+    
+    formatted_time = ""
+    if total_time_hours > 0:
+        formatted_time += f"{total_time_hours}{'hr' if total_time_hours == 1 else 'hrs'}"
+    if total_time_minutes > 0:
+        formatted_time += f" {total_time_minutes}{'min' if total_time_minutes == 1 else 'mins'}"
+    if total_time_seconds > 0:
+        formatted_time += f" {total_time_seconds}{'sec' if total_time_seconds == 1 else 'secs'}"
 
     status_text = f'{point.text} - Completed'
+    if formatted_time:
+        status_text += f' in {formatted_time}'
+
     status = Status(text=status_text, date=current_datetime.date(), time=current_datetime.strftime("%I:%M %p"), staff=request.user.staffprofile)
     status.save()
 
diff --git a/osinaweb/osinacore/templates/add-edit-main.html b/osinaweb/osinacore/templates/add-edit-main.html
index 6c117e33..f21b2bcd 100644
--- a/osinaweb/osinacore/templates/add-edit-main.html
+++ b/osinaweb/osinacore/templates/add-edit-main.html
@@ -585,7 +585,7 @@
                 <div class="bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-secondosiblue font-bold uppercase">Tasks</p>
+                            <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tasks</p>
                             <img src="{% static 'images/icons/tasks.png' %}" class="w-[50px]">
                         </div>
                         <div
@@ -598,7 +598,7 @@
                 <div class="bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-secondosiblue font-bold uppercase">Projects</p>
+                            <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Projects</p>
                             <img src="{% static 'images/icons/projects.png' %}" class="w-[50px]">
                         </div>
                         <div
@@ -611,7 +611,7 @@
                 <div class="bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-secondosiblue font-bold uppercase">Tickets</p>
+                            <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tickets</p>
                             <img src="{% static 'images/icons/tickets.png' %}" class="w-[50px]">
                         </div>
                         <div
diff --git a/osinaweb/osinacore/templates/details_templates/task-details.html b/osinaweb/osinacore/templates/details_templates/task-details.html
index b0df5f38..e4699614 100644
--- a/osinaweb/osinacore/templates/details_templates/task-details.html
+++ b/osinaweb/osinacore/templates/details_templates/task-details.html
@@ -4,22 +4,18 @@
 
 
 <div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
-    {% if task.status == 'Open' %}
-    <div class="w-full bg-blue-500 rounded-t-md flex flex-col justify-center items-center py-3">
-        <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{task.name}}</h1>
-    </div>
-    {% endif %}
-    {% if task.status == 'Working On' %}
-    <div class="w-full bg-yellow-500 rounded-t-md flex flex-col justify-center items-center py-3">
-        <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{task.name}}</h1>
-    </div>
-    {% endif %}
-    {% if task.status == 'Closed' %}
-    <div class="w-full  bg-green-700 rounded-t-md flex flex-col justify-center items-center py-3">
+
+    <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 %}">
         <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{task.name}}</h1>
     </div>
-    {% endif %}
-    <div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
+
+    <div class="w-full h-fit flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
+        <div class="flex justify-start items-center gap-2">
+            <img src="{% static 'images/back-in-time.png' %}" class="w-[35px]">
+            <p class="text-secondosiblue">Total Time: <span class="font-poppinsBold">{{ task.total_task_time.0 }}{% if task.total_task_time.0 == 1 %}hr{% else %}hrs{% endif %} {{ task.total_task_time.1 }}{% if task.total_task_time.1 == 1 %}min{% else %}mins{% endif %} {{ task.total_task_time.2 }}{% if task.total_task_time.2 == 1 %}sec{% else %}secs{% endif %}</span></p>
+
+        </div>
+
         <div class="w-full s:w-fit flex flex-col s:flex-row justify-end items-center gap-3">
             <button
                 class="w-full s:w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500 duration-300 deleteTaskButton"
@@ -35,11 +31,23 @@
 
 
     <div class="w-full flex flex-col gap-4 mt-5">
+
+        <div>
+            <p class="text-gray-500 text-xl">Description: <span
+                    class="text-slate-800 text-xl font-semibold">{{task.description}}</span></p>
+        </div>
+
+
         <div>
             <p class="text-gray-500 text-xl">Project: <span
                     class="text-slate-800 text-xl font-semibold">{{task.project.name}}</span></p>
         </div>
 
+        <div>
+            <p class="text-gray-500 text-xl">Epic: <span
+                    class="text-slate-800 text-xl font-semibold">{{task.epic.title}}</span></p>
+        </div>
+
         <div>
             <p class="text-gray-500 text-xl">Start Date: <span
                     class="text-slate-800 text-xl font-semibold">{{task.start_date}}</span></p>
@@ -50,10 +58,6 @@
                     class="text-slate-800 text-xl font-semibold">{{task.end_date}}</span></p>
         </div>
 
-        <div>
-            <p class="text-gray-500 text-xl">Epic: <span
-                    class="text-slate-800 text-xl font-semibold">{{task.epic.title}}</span></p>
-        </div>
 
         <div>
             <p class="text-gray-500 text-xl">Assigned To: <span
@@ -69,13 +73,13 @@
         <div>
             <p class="text-gray-500 text-xl">Status:
                 {% if task.status == 'Closed' %}
-                <span class="text-red-500 text-xl font-semibold">{{task.status}}</span>
+                <span class="text-green-700 text-xl font-semibold">{{task.status}}</span>
                 {% endif %}
                 {% if task.status == 'Open' %}
-                <span class="text-green-700 text-xl font-semibold">{{task.status}}</span>
+                <span class="text-osiblue text-xl font-semibold">{{task.status}}</span>
                 {% endif %}
-                {% if project.status == 'Working on' %}
-                <span class="text-yellow-400 text-xl font-semibold">{{task.status}}</span>
+                {% if task.status == 'Working On' %}
+                <span class="text-yellow-500 text-xl font-semibold">{{task.status}}</span>
                 {% endif %}
             </p>
         </div>
@@ -102,90 +106,103 @@
                 </button>
             </div>
 
-            <div class="overflow-x-auto border border-gray-300 rounded-b-md">
-                <table class="min-w-full divide-y">
-                    <!-- TABLE HEADER -->
-                    <thead class="bg-gray-50">
-                        <tr>
-                            <th scope="col"
-                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
-                                Point
-                            </th>
-                            <th scope="col"
-                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
-                                Status
-                            </th>
-                        </tr>
-                    </thead>
-
-                    <!-- TABLE BODY -->
-                    <tbody class="bg-white divide-y divide-gray-200">
-                        <!-- 1st row -->
+            <div class="overflow-x-auto">
                         {% if points %}
                         {% for point in points %}
-                        <tr>
-                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                <p class="text-slate-800">{{point.text}}</p>
-                            </td>
-
-                            {% if point.status == 'Not Completed' %}
-                            <td class="px-6 py-4 text-center text-sm">
-                                <div class="w-full flex justify-center items-center gap-2">
-                                    <form method="post"
-                                        action="{% url 'mark_point_working_on_task_page' point.id task.id %}">
-                                        {% csrf_token %}
-                                        <button type="submit"
-                                            class="w-[120px] px-2 py-2 bg-transparent border border-yellow-500 rounded-md text-yellow-500 hover:bg-yellow-500 hover:text-white">Working
-                                            On</button>
-                                    </form>
-                                    <form method="post"
-                                        action="{% url 'mark_point_completed_task_page' point.id task.id %}">
-                                        {% csrf_token %}
-                                        <button type="submit"
-                                            class="w-[120px] px-2 py-2 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
-                                    </form>
-                                    <form method="post" action="{% url 'deletetaskpointmodal' point.id task.id %}">
-                                        {% csrf_token %}
-                                        <button type="submit"
-                                            class="w-fit px-3 py-2 bg-white border border-red-500 rounded-md text-red-500 hover:bg-red-500 hover:text-white cursor-pointer">
-                                            <i class="fa fa-trash"></i>
-                                        </button>
-                                    </form>
+                        <p class="pointId" data-point-id="{{ point.id }}" style="display: none;">{{ point.id }}</p>
+                        <div class="w-full flex flex-col gap-1 
+                        {% if point.status == 'Completed' %}
+                            bg-green-700
+                        {% elif point.status == 'Working On' %}
+                                bg-orange-500
+                        {% elif point.status == 'Paused' %}
+                                bg-red-500
+                        {% else %}
+                                bg-slate-700
+                        {% endif %}
+                         bg-opacity-50 rounded-md shadow-md p-3 mt-4">
+                            <div class="w-full flex justify-between items-end pb-2 border-b border-gray-200">
+                                <div class="w-[380px]">
+                                    {% if point.status == 'Completed' %}
+                                    <p class="text-white line-through">{{point.text}}</p>
+                                    {% else %}
+                                    <p class="text-white">{{point.text}}</p>
+                                    {% endif %}
                                 </div>
-                            </td>
-                            {% endif %}
-
-                            {% if point.status == 'Completed' %}
-                            <td class="px-6 py-4 text-center text-sm">
-                                <button
-                                    class="w-fit px-3 py-2 bg-blue-500 border border-blue-500 rounded-md text-white opacity-40"
-                                    value="Completed" disabled>Completed</button>
-                            </td>
-                            {% endif %}
-
-                            {% if point.status == 'Working On' %}
-                            <td class="px-6 py-4 text-center text-sm">
-                                <div class="w-full flex justify-center items-center gap-2">
+                                <div class="flex justify-end items-center gap-2">
+                                    {% if point.status == 'Not Completed' or point.status == 'Paused' and not point.status == 'Completed' %}
+                                    <a href="{% url 'mark_point_working_on_task_page' point.id task.id %}">
+                                        <button
+                                            class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white flex justify-center items-center hover:scale-105 transition-transform duration-300"
+                                            id="startPointButton">
+                                            <i class="fa fa-play"></i>
+                                        </button>
+                                    </a> 
+                                    {% endif %}
+            
+                                    {% if point.status == 'Working On' and not point.status == 'Completed'  %}
+                                    <a href="{% url 'mark_point_paused_task_page' point.id task.id %}">
+                                        <button
+                                            class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white justify-center items-center hover:scale-105 transition-transform duration-300"
+                                            id="pausePointButton">
+                                            <i class="fa fa-pause"></i>
+                                        </button>
+                                    </a>
+                                    {% endif %}
+            
+                                    {% if not point.status == 'Completed' and not point.status == 'Paused' %}
+                                    <a href="{% url 'mark_point_completed_task_page' point.id task.id %}">
+                                        <button
+                                            class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white flex justify-center items-center hover:scale-105 transition-transform duration-300">
+                                            <i class="fa fa-check"></i>
+                                        </button>
+                                    </a>
+                                    {% endif %}
+            
+            
+                                    {% if point.status == 'Completed' %}
                                     <button
-                                        class="w-[120px] px-2 py-2 border border-yellow-500 rounded-md bg-yellow-500 text-white opacity-40"
-                                        disabled>Working On</button>
-                                    <form method="post"
-                                        action="{% url 'mark_point_completed_task_page' point.id task.id %}">
+                                        class="w-[40px] h-[40px] rounded-full bg-transparent shadow-md text-white border border-white flex justify-center items-center opacity-30 cursor-default">
+                                        <i class="fa fa-check"></i>
+                                    </button>
+                                    {% endif %} 
+            
+                                    {% if not point.status == 'Completed' %}
+                                    <form method="post" action="{% url 'deletepointmodal' point.id task.id %}">
                                         {% csrf_token %}
                                         <button type="submit"
-                                            class="w-[120px] px-2 py-2 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
-                                    </form>
-                                    <form method="post" action="{% url 'deletetaskpointmodal' point.id task.id %}">
-                                        {% csrf_token %}
-                                        <button type="submit"
-                                            class="w-fit px-3 py-2 bg-white border border-red-500 rounded-md text-red-500 hover:bg-red-500 hover:text-white cursor-pointer">
+                                            class="w-[40px] h-[40px] bg-transparent border border-white rounded-full text-white flex justify-center items-center shadow-md hover:scale-105 transition-transform duration-300">
                                             <i class="fa fa-trash"></i>
                                         </button>
                                     </form>
+                                    {% endif %}
                                 </div>
-                            </td>
-                            {% endif %}
-                        </tr>
+                            </div>
+            
+                            <div class="flex justify-between items-center gap-3 pt-2">
+                                <div class="text-white text-sm">
+                                    <p>Total Time:
+                                        <span class="font-semibold pointTotalTime">
+                                            <span class="hours">{{ point.total_activity_time.0 }}</span> hours,
+                                            <span class="minutes">{{ point.total_activity_time.1 }}</span> minutes,
+                                            <span class="seconds">{{ point.total_activity_time.2 }}</span> seconds
+                                        </span>
+                                    </p>
+                                </div>
+            
+                                <div class="w-fit py-1 px-2 bg-white text-slate-700 text-xs rounded-md shadow-md">
+                                    {% if point.status == 'Completed' %}
+                                    <p class="text-green-700 opacity-50">Completed</p>
+                                    {% elif point.status == 'Working On' %}
+                                    <p class="text-orange-500 opacity-50">Working On</p>
+                                    {% elif point.status == 'Paused' %}
+                                    <p class="text-red-500 opacity-50">Paused</p>
+                                    {% else %}
+                                    <p class="text-slate-700 opacity-50">Created</p>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>            
                         {% endfor %}
                         {% else %}
                         <tr>
@@ -200,96 +217,10 @@
         </div>
 
 
-
-        <!-- TIMLINE -->
-        <div>
-            <div class="mt-5 relative">
-                <div
-                    class=" bg-osiblue rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
-                    <div class="px-3">
-                        <p class="text-white uppercase font-bold">Timline</p>
-                    </div>
-
-                    <button
-                        class="h-full rounded-tr-md px-4 bg-gray-300 text-osiblue text-[18px] outline-none border-none cursor-pointer flex justify-center items-center">
-                        <i class="fa fa-plus"></i>
-                    </button>
-                </div>
-
-                <div class="overflow-x-auto border border-gray-300 rounded-b-md">
-                    <table class="min-w-full divide-y">
-                        <!-- TABLE HEADER -->
-                        <thead class="bg-gray-50">
-                            <tr>
-                                <th scope="col"
-                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
-                                    Task Time: 300 min
-                                </th>
-                                <th scope="col"
-                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
-                                    User
-                                </th>
-                                <th scope="col"
-                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
-                                    Date
-                                </th>
-                                <th scope="col"
-                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
-                                    Total Time
-                                </th>
-                            </tr>
-                        </thead>
-
-                        <!-- TABLE BODY -->
-                        <tbody class="bg-white divide-y divide-gray-200">
-                            <!-- 1st row -->
-                            <tr>
-                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                    <button
-                                        class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
-                                </td>
-
-                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                    <a class="text-slate-800">Nataly</a>
-                                </td>
-
-                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
-                                    <a class="text-slate-800">6-9-2023</a>
-                                </td>
-
-                                <td class="px-6 py-4 text-center text-sm">
-                                    <a class="text-slate-800">50min</a>
-                                </td>
-                            </tr>
-                            <!-- <tr>
-                                    <td colspan="3" class="px-6 py-4 text-center text-sm text-slate-800">
-                                        No Available Credentials
-                                    </td>
-                                </tr> -->
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-
-
-
-        <!-- DESCRIPTION -->
-        <div class="mt-5">
-            <p class="text-gray-500 text-xl">Description:</p>
-            <div class="w-full h-fit px-4 mt-1">
-                <p class="text-slate-700">
-                    {{task.description}}
-                </p>
-            </div>
-        </div>
-
-
-
         <!-- TAGS -->
-        <div>
+        <div class="mt-5">
             <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">
+            <div class="w-full h-fit 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 cursor-pointer">Media
                     Streaming</button>
@@ -308,7 +239,7 @@
 
 
 <!-- POPUP MODAL -->
-<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
     <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
         <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
             id="closeModalButton">
diff --git a/osinaweb/osinacore/templates/main.html b/osinaweb/osinacore/templates/main.html
index 7d1851c5..0efe46a9 100644
--- a/osinaweb/osinacore/templates/main.html
+++ b/osinaweb/osinacore/templates/main.html
@@ -614,7 +614,7 @@
                 <div class="bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-secondosiblue font-bold uppercase">Tasks</p>
+                            <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tasks</p>
                             <img src="{% static 'images/icons/tasks.png' %}" class="w-[50px]">
                         </div>
                         <div
@@ -627,7 +627,7 @@
                 <div class="bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-secondosiblue font-bold uppercase">Projects</p>
+                            <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Projects</p>
                             <img src="{% static 'images/icons/projects.png' %}" class="w-[50px]">
                         </div>
                         <div
@@ -640,7 +640,7 @@
                 <div class="bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-secondosiblue font-bold uppercase">Tickets</p>
+                            <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tickets</p>
                             <img src="{% static 'images/icons/tickets.png' %}" class="w-[50px]">
                         </div>
                         <div
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 2e25cada..16d5665c 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -2840,11 +2840,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:bg-blue-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2855,11 +2850,6 @@ video {
   background-color: rgb(32 51 107 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-red-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-secondosiblue:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 74 122 / var(--tw-bg-opacity));
@@ -2874,11 +2864,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-yellow-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-opacity-60:hover {
   --tw-bg-opacity: 0.6;
 }
diff --git a/osinaweb/static/images/back-in-time.png b/osinaweb/static/images/back-in-time.png
new file mode 100644
index 00000000..69ae7e73
Binary files /dev/null and b/osinaweb/static/images/back-in-time.png differ