diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
index 123e6c2..908d09d 100644
--- a/app/views/projects/show.html.erb
+++ b/app/views/projects/show.html.erb
@@ -1,26 +1,20 @@
 <h1><%= @project.project_name %></h1>
 <p><%= @project.description %></p>
 
-<turbo-frame id="tasks">
+<%= turbo_frame_tag "tasks" do %>
   <ul id="tasks_list">
-    <% @project.tasks.each do |task| %>
-      <turbo-frame id="<%= dom_id(task) %>">
-        <li>
-          <%= task.title %> (<%= task.status %>)
+    <% # First: pending or in-progress tasks %>
+    <%= render @project.tasks.reject { |t| t.status == "done" } %>
 
-          <%= link_to "Destroy", project_task_path(@project, task), data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %>
-
-          <% unless task.status == "done" %>
-            <%= button_to "Complete", complete_project_task_path(@project, task), method: :patch, form: { data: { turbo_frame: dom_id(task) } } %>
-          <% end %>
-        </li>
-      </turbo-frame>
+    <% done_tasks = @project.tasks.select { |t| t.status == "done" } %>
+    <% if done_tasks.any? %>
+      <%= render done_tasks %>
     <% end %>
   </ul>
-</turbo-frame>
+<% end %>
 
-<turbo-frame id="new_task">
+<%= turbo_frame_tag "new_task" do %>
   <br>
   <h2>Add New Task</h2>
-  <%= render partial: "tasks/form", locals: { project: @project, task: Task.new } %>
-</turbo-frame>
\ No newline at end of file
+  <%= render "tasks/form", project: @project, task: Task.new %>
+<% end %>
diff --git a/app/views/tasks/_task.html.erb b/app/views/tasks/_task.html.erb
index 750ef9e..7edd2e7 100644
--- a/app/views/tasks/_task.html.erb
+++ b/app/views/tasks/_task.html.erb
@@ -1,15 +1,20 @@
 <turbo-frame id="<%= dom_id(task) %>">
-  <li>
-    <%= task.title %> (<%= task.status %>)
-
-    <%= link_to "Destroy", project_task_path(task.project, task),
-          data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %>
-
+  <li id="<%= dom_id(task) %>" class="task-item <%= 'done-task' if task.status == 'done' %>">
+  <div class="task-title"><%= task.title %></div>
+  <div class="task-status"><%= task.status.titleize %></div>
+  <div class="task-actions flex gap-2">
     <% unless task.status == "done" %>
       <%= button_to "Complete",
             complete_project_task_path(task.project, task),
             method: :patch,
-            form: { data: { turbo_frame: dom_id(task) } } %>
+            data: { turbo_frame: dom_id(task) },
+            class: "task-btn complete-btn" %>
     <% end %>
-  </li>
+
+    <%= link_to "Destroy",
+          project_task_path(task.project, task),
+          data: { turbo_method: :delete, turbo_confirm: "Are you sure?" },
+          class: "task-btn destroy-btn" %>
+  </div>
+</li>
 </turbo-frame>
\ No newline at end of file
diff --git a/app/views/tasks/complete.turbo_stream.erb b/app/views/tasks/complete.turbo_stream.erb
index 058bf2a..34efcab 100644
--- a/app/views/tasks/complete.turbo_stream.erb
+++ b/app/views/tasks/complete.turbo_stream.erb
@@ -1,10 +1,3 @@
 <%= turbo_stream.replace dom_id(@task) do %>
-  <li>
-    <%= @task.title %> (<%= @task.status %>)
-
-    <%= link_to "Destroy", project_task_path(@project, @task), data: {
-                    turbo_method: :delete,
-                    turbo_confirm: "Are you sure?"
-                } %>
-  </li>
+  <%= render @task %>
 <% end %>
diff --git a/app/views/tasks/create.turbo_stream.erb b/app/views/tasks/create.turbo_stream.erb
index f63494f..9ec72d4 100644
--- a/app/views/tasks/create.turbo_stream.erb
+++ b/app/views/tasks/create.turbo_stream.erb
@@ -1,7 +1,7 @@
-<%= turbo_stream.append "tasks_list" do %>
-  <%= render partial: "tasks/task", locals: { task: @task } %>
+<%= turbo_stream.append "tasks" do %>
+  <%= render @task %>   <!-- renders _task.html.erb -->
 <% end %>
 
 <%= turbo_stream.replace "new_task" do %>
-  <%= render partial: "tasks/form", locals: { project: @project, task: Task.new } %>
+  <%= render "tasks/form", project: @project, task: Task.new %>
 <% end %>