diff --git a/templates/dashboard.html b/templates/dashboard.html
index d0e6868..b64161f 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -2,7 +2,7 @@
 {% block content %}
 <div class="h-[80vh] flex flex-col m-4">
 <h1 class="text-xl font-semibold mb-4">Projects for {{ case_email }}</h1>
-<div class="m-4  w-full flex-grow overflow-scroll rounded-2xl overflow-hidden">
+<div class=" w-full flex-grow overflow-scroll rounded-2xl overflow-hidden">
   <table class="w-full whitespace-nowrap  shadow-md border border-slate-200">
     <thead class="bg-gradient-to-r from-blue-600 to-blue-700 text-left text-sm sticky top-0 z-10 border-b border-blue-800 text-white font-medium">
       <tr>
@@ -21,8 +21,8 @@
         <th class="px-4 py-3">Secondary Paralegal</th>
         <th class="px-4 py-3">Documents</th>
         <th class="px-4 py-3">Matter Stage</th>
-        <th class="px-4 py-3">Completed Tasks</th>
-        <th class="px-4 py-3">Pending Tasks</th>
+        <th class="px-4 py-3 w-[400px] ">Completed Tasks</th>
+        <th class="px-4 py-3 w-[400px]">Pending Tasks</th>
         <th class="px-4 py-3">Notice Service Date</th>
         <th class="px-4 py-3">Notice Expir. Date</th>
         <th class="px-4 py-3">Date Case Filed</th>
@@ -84,14 +84,25 @@
           <a href="{{ r.documents_url }}">Documents</a>
         {% endif %}</td>
         <td class="px-4 py-3 text-sm text-slate-800"> {{ r.phase_name }}</td>
-        <td class="px-4 py-3 text-sm align-top" x-data="{ showCompletedModal: false}">
+        <td class="px-4 py-3 text-sm align-top w-[400px] whitespace-normal" x-data="{ showCompletedModal: false}">
           {% if r.completed_tasks %}
           <div>
-            <ul class="list-disc list-inside align-top">
-              {% for x in r.completed_tasks[:2] %}
-              <li>{{ x.description }} - {{ x.completed }}</li>
-              {% endfor %}
-            </ul>
+            <table class="w-full text-xs">
+              <thead>
+                <tr>
+                  <th class="text-left pb-1">Task</th>
+                  <th class="text-right pb-1">Completed</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for x in r.completed_tasks[:2] %}
+                <tr>
+                  <td class="py-1 pr-2 break-words">{{ x.description }}</td>
+                  <td class="py-1 text-right whitespace-nowrap">{{ x.completed }}</td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
             {% if r.completed_tasks|length > 2 %}
             <button @click="showCompletedModal = true" class="text-blue-500 hover:text-blue-700 text-sm mt-1">Show more...</button>
             {% endif %}
@@ -110,23 +121,43 @@
                   </svg>
                 </button>
               </div>
-              <ul class="list-disc list-inside">
-                {% for x in r.completed_tasks %}
-                <li>{{ x.description }} - {{ x.completed }}</li>
-                {% endfor %}
-              </ul>
+              <table class="w-full">
+                <thead>
+                  <tr class="border-b">
+                    <th class="text-left pb-2">Task Description</th>
+                    <th class="text-right pb-2">Completed Date</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for x in r.completed_tasks %}
+                  <tr class="border-b border-slate-200">
+                    <td class="py-2 break-words">{{ x.description }}</td>
+                    <td class="py-2 text-right whitespace-nowrap">{{ x.completed }}</td>
+                  </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
             </div>
           </div>
           {% endif %}
         </td>
-        <td class="px-4 py-3 text-sm min-w-[500px] align-top" x-data="{ showPendingModal: false }">
+        <td class="px-4 py-3 text-sm align-top whitespace-normal w-[400px] min-w-[400px]" x-data="{ showPendingModal: false }">
           {% if r.pending_tasks %}
           <div>
-            <ul class="list-disc list-inside align-top">
-              {% for x in r.pending_tasks[:2] %}
-              <li>{{ x.description }}</li>
-              {% endfor %}
-            </ul>
+            <table class="w-full text-xs">
+              <thead>
+                <tr>
+                  <th class="text-left pb-1">Task</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for x in r.pending_tasks[:2] %}
+                <tr>
+                  <td class="py-1 break-words">{{ x.description }}</td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
             {% if r.pending_tasks|length > 2 %}
             <button @click="showPendingModal = true" class="text-blue-500 hover:text-blue-700 text-sm mt-1">Show more...</button>
             {% endif %}
@@ -145,11 +176,20 @@
                   </svg>
                 </button>
               </div>
-              <ul class="list-disc list-inside">
-                {% for x in r.pending_tasks %}
-                <li>{{ x.description }}</li>
-                {% endfor %}
-              </ul>
+              <table class="w-full">
+                <thead>
+                  <tr class="border-b">
+                    <th class="text-left pb-2">Task Description</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for x in r.pending_tasks %}
+                  <tr class="border-b border-slate-200">
+                    <td class="py-2 break-words">{{ x.description }}</td>
+                  </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
             </div>
           </div>
           {% endif %}