diff --git a/osinaweb/customercore/__pycache__/urls.cpython-310.pyc b/osinaweb/customercore/__pycache__/urls.cpython-310.pyc
index 71f075c1..f2ddcdf3 100644
Binary files a/osinaweb/customercore/__pycache__/urls.cpython-310.pyc and b/osinaweb/customercore/__pycache__/urls.cpython-310.pyc differ
diff --git a/osinaweb/customercore/__pycache__/views.cpython-310.pyc b/osinaweb/customercore/__pycache__/views.cpython-310.pyc
index 7f324cff..6d2d5fce 100644
Binary files a/osinaweb/customercore/__pycache__/views.cpython-310.pyc and b/osinaweb/customercore/__pycache__/views.cpython-310.pyc differ
diff --git a/osinaweb/customercore/templates/details_templates/inner-customer-project.html b/osinaweb/customercore/templates/details_templates/inner-customer-project.html
index fe6fa6e5..c9e5107a 100644
--- a/osinaweb/customercore/templates/details_templates/inner-customer-project.html
+++ b/osinaweb/customercore/templates/details_templates/inner-customer-project.html
@@ -5,27 +5,26 @@
 
 <div class="w-full px-5 s:px-9 flex flex-col gap-3">
     <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
-        <div class="w-full bg-orange-500 rounded-md flex flex-col justify-center items-center py-2 gap-2 mt-[50px]">
+        <div class="w-full rounded-md flex flex-col justify-center items-center py-2 gap-2 mt-[50px] {% if project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %}">
             <div
                 class="w-[70px] s:w-[90px] h-[70px] s:h-[90px] rounded-full mt-[-50px] s:mt-[-63px] border border-gray-300 bg-white">
-                <img src="{% static 'images/ositcom_logos/full-logo.png' %}" alt="" class="w-full h-full object-cover rounded-full">
+                <img src="{{project.logo.url}}" alt="" class="w-full h-full object-cover rounded-full">
             </div>
             <div class="text-center">
-                <p class="text-xl text-white font-semibold">Winabig</p>
-                <p class="text-sm text-white font-light">P20302</p>
+                <p class="text-xl text-white font-semibold">{{project.name}}</p>
+                <p class="text-sm text-white font-light">{{project.project_id}}</p>
             </div>
         </div>
 
-
+        <p id="projectId" class="hidden">{{project.id}}</p>
         <div class="w-full flex flex-col gap-2 mt-3">
-            <div class="w-full rounded-md bg-white shadow-md h-[8px]">
-                <div class="w-[80%] h-full bg-green-700 rounded-md">
-
+            <div class="w-full h-[10px] bg-gray-100 shadow-md mainBar rounded-md">
+                <div class="h-full rounded-md progressBar">
                 </div>
             </div>
             <div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-sm">
-                <p>20-2-2023</p>
-                <p>20-2-2024</p>
+                <p class="startDate">{{project.start_date}}</p>
+                <p class="endDate">{{project.end_date}}</p>
             </div>
         </div>
 
@@ -59,10 +58,15 @@
             <div
                 class="w-[240px] px-5 py-2 bg-white shadow-md mt-3 rounded-md flex justify-start items-center gap-2 cursor-pointer">
                 <div class="w-[50px] h-[50px] rounded-full">
+                    {% if not project.manager.image %}
                     <img src="{% static 'images/default-user.png' %}"
                         class="w-full h-full object-cover shadow-md rounded-full">
+                    {% else %}
+                    <img src="{{project.manager.image.url}}"
+                        class="w-full h-full object-cover shadow-md rounded-full">
+                    {% endif %}
                 </div>
-                <p class="text-gray-500 text-[16px]">Emile Elliye</p>
+                <p class="text-gray-500 text-[16px]">{{project.manager.user.first_name}} {{project.manager.user.last_name}}</p>
             </div>
 
         </div>
@@ -270,5 +274,5 @@
         </div>
     </div>
 </div>
-
+<script type="text/javascript" src='{% static "js/calculate-project-time.js" %}'></script>
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/customercore/templates/listing_pages/customer-invoices.html b/osinaweb/customercore/templates/listing_pages/customer-invoices.html
index 0bf4d3c1..b7702622 100644
--- a/osinaweb/customercore/templates/listing_pages/customer-invoices.html
+++ b/osinaweb/customercore/templates/listing_pages/customer-invoices.html
@@ -87,7 +87,7 @@
                                 </a>
 
                                 {% if invoice.status == 'Not Completed' %}
-                                <a href="{% url 'customerorderdetails' invoice.order.id %}">
+                                <a href="{% url 'customerorderdetails' invoice.order.order_id %}">
                                     <button
                                         class="flex justify-center items-center gap-2 px-3 py-1 rounded-md bg-osiblue text-white border border-osiblue cursor-pointer hover:bg-white hover:text-osiblue duration-300">
                                         Pay Now
diff --git a/osinaweb/customercore/templates/listing_pages/customer-orders.html b/osinaweb/customercore/templates/listing_pages/customer-orders.html
index 92cd9a62..b6419a13 100644
--- a/osinaweb/customercore/templates/listing_pages/customer-orders.html
+++ b/osinaweb/customercore/templates/listing_pages/customer-orders.html
@@ -67,7 +67,7 @@
 
                         <td class="px-6 py-4 text-center text-sm"> 
                             <div class="w-full flex justify-center items-center gap-3">
-                                <a href="{% url 'customerorderdetails' order.id %}">
+                                <a href="{% url 'customerorderdetails' order.order_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-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" />
diff --git a/osinaweb/customercore/templates/listing_pages/customer-projects.html b/osinaweb/customercore/templates/listing_pages/customer-projects.html
index de7c5e41..bf9d3fc8 100644
--- a/osinaweb/customercore/templates/listing_pages/customer-projects.html
+++ b/osinaweb/customercore/templates/listing_pages/customer-projects.html
@@ -10,9 +10,9 @@
         <div class="w-full grid grid-cols-1 l:grid-cols-2 gap-5 mt-4">
 
             {% for project in projects %}
-            <a href="{% url 'customerprojectdetails' %}">
+            <a href="{% url 'customerprojectdetails' project.project_id %}">
                 <div
-                    class="w-full rounded-md flex flex-col justify-between items-center gap-3 px-5 py-9 h-[250px] bg-gray-50 shadow-md relative hover:bg-gray-100 duration-300">
+                    class="w-full rounded-md flex flex-col justify-between items-center gap-3 px-5 py-9 h-[250px] bg-gray-50 shadow-md relative hover:bg-gray-100 duration-300 projectContainer">
                     <div class="flex flex-col justify-center items-center gap-5">
                         <div
                             class="w-[70px] h-[70px] rounded-full shadow-md">
@@ -26,20 +26,23 @@
                     </div>
 
                     <div
-                        class="bg-orange-500 px-3 py-2 rounded-r-md text-xs text-white font-light uppercase absolute top-5 left-0">
+                        class="{% if project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %} px-3 py-2 rounded-r-md text-xs text-white font-light uppercase absolute top-5 left-0">
                         <p>{{project.projectstatus_set.all.last.status}}</p>
                     </div>
 
 
                     <div class="w-full mt-5 flex flex-col gap-2">
                         <div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-xs">
-                            <p>20-2-2023</p>
-                            <p>20-2-2024</p>
+                            <p>{{project.start_date}}</p>
+                            <p>{{project.end_date}}</p>
                         </div>
-                        <div class="w-full rounded-md bg-white shadow-md h-[8px]">
-                            <div class="w-[80%] h-full bg-green-700 rounded-md">
-    
-                            </div>
+
+                        <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 rounded-md bg-white shadow-md h-[8px] mainBar">
+                            <div class=" rounded-md h-full rounded-md progressBar"></div>
                         </div>
                     </div>
 
@@ -50,6 +53,6 @@
         </div>
     </div>
 </div>
-
+<script type="text/javascript" src='{% static "js/calculate-all-projects-time.js" %}'></script>
 
 {% endblock content %}
\ No newline at end of file
diff --git a/osinaweb/customercore/urls.py b/osinaweb/customercore/urls.py
index 224aa168..80c27439 100644
--- a/osinaweb/customercore/urls.py
+++ b/osinaweb/customercore/urls.py
@@ -24,8 +24,8 @@ urlpatterns = [
     # DETAILS
     path('my-tickets/<int:ticket_number>/', views.customer_ticket_details, name='customerticketdetails'),
     path('addticketupdatereaction/<str:reaction_type>/<int:ticketupdate_id>/', views.customer_add_ticket_update_reaction, name='customeraddticketupdatereaction'),
-    path('my-orders/<int:order_id>/', views.customer_order_details, name='customerorderdetails'),
-    path('my-projects-details/', views.customer_project_details, name='customerprojectdetails'),
+    path('my-orders/<str:order_id>/', views.customer_order_details, name='customerorderdetails'),
+    path('my-projects/<str:project_id>/', views.customer_project_details, name='customerprojectdetails'),
 
 
     # PRODUCTS URL
diff --git a/osinaweb/customercore/views.py b/osinaweb/customercore/views.py
index 6a485385..b6642a91 100644
--- a/osinaweb/customercore/views.py
+++ b/osinaweb/customercore/views.py
@@ -183,7 +183,7 @@ def customer_orders(request, *args, **kwargs):
 
 
 def customer_order_details(request, order_id):
-    order = get_object_or_404(Order, id=order_id)
+    order = get_object_or_404(Order, order_id=order_id)
 
     order_items = OrderItem.objects.filter(order=order).order_by('-id')
     order_item_ids = order_items.values_list('item_id', flat=True)
@@ -203,6 +203,32 @@ def customer_order_details(request, order_id):
 
 
 
+@customer_login_required
+def customer_projects(request, *args, **kwargs):
+    projects = Project.objects.filter(customer=request.user.customerprofile)
+
+    context = {
+        'projects': projects,
+        
+    }
+
+    return render(request, 'listing_pages/customer-projects.html', context)
+
+
+@customer_login_required
+def customer_project_details(request, project_id):
+    project = get_object_or_404(Project, project_id=project_id)
+
+    context = {
+        'project': project,
+        
+    }
+
+    return render(request, 'details_templates/inner-customer-project.html', context)
+
+
+
+
 @customer_login_required
 def customer_tickets(request, *args, **kwargs):
     open_tickets = Ticket.objects.filter(Q(status__in=['Open', 'Working On']) & Q(customer=request.user.customerprofile))
@@ -387,26 +413,5 @@ def dedicated_servers_plans(request, *args, **kwargs):
     return render(request, 'products/dedicated-servers-plans.html', context)
 
 
-@customer_login_required
-def customer_projects(request, *args, **kwargs):
-    projects = Project.objects.filter(customer=request.user.customerprofile)
-
-    context = {
-        'projects': projects,
-        
-    }
-
-    return render(request, 'listing_pages/customer-projects.html', context)
-
-
-@customer_login_required
-def customer_project_details(request, *args, **kwargs):
-
-    context = {
-        
-    }
-
-    return render(request, 'details_templates/inner-customer-project.html', context)
-
 
 
diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index ed107c5f..09d72e8d 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/templates/edit_templates/edit-project.html b/osinaweb/osinacore/templates/edit_templates/edit-project.html
index 18786bca..5cb12fa7 100644
--- a/osinaweb/osinacore/templates/edit_templates/edit-project.html
+++ b/osinaweb/osinacore/templates/edit_templates/edit-project.html
@@ -82,7 +82,7 @@
             <div class="w-full">
                 <label class="text-gray-500">Description:</label>
                 <textarea required name="details" type="text" rows="5" cols="5"
-                    class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none mt-1">{{project.description}}
+                    class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none mt-1">{{project.details}}
                 </textarea>
             </div>