diff --git a/frontend/app/index/activities/edit/template.hbs b/frontend/app/index/activities/edit/template.hbs
index 971b2be8..1ed17769 100644
--- a/frontend/app/index/activities/edit/template.hbs
+++ b/frontend/app/index/activities/edit/template.hbs
@@ -1,14 +1,12 @@
 <label hidden for="activity-edit-form">Edit activity</label>
 <form
   id="activity-edit-form"
+  class="pl-2"
   data-test-activity-edit-form
   {{on "submit" this.save}}
 >
-  <div class="card">
-    <div class="card-header hidden-lg">
-      <LinkTo @route="index.activities"><FaIcon @icon="chevron-left" /></LinkTo>
-    </div>
-    <div class="card-block">
+  <div class="card grid border">
+    <div class="card-block gap-2 grid p-2 border-b striped">
       <TaskSelection
         @initial={{hash task=this.changeset.task}}
         @task={{this.changeset.task}}
@@ -24,7 +22,7 @@
         >{{t.task}}</div>
       </TaskSelection>
     </div>
-    <div class="card-footer text-right">
+    <div class="card-footer text-right p-2 striped">
       <div class="form-group">
         <label hidden for="comment">Comment</label>
         <input
@@ -44,14 +42,14 @@
           <CustomerVisibleIcon class="customer-visible-icon" />
         {{/if}}
       </div>
-      <div class="form-group checkboxes">
-        <SyCheckbox
+      <div class="form-group checkboxes p-2 flex justify-between [&>*]:w-full [&>*]:grid [&>*]:grid-cols-[auto,minmax(0,1fr)] [&>*]:items-center [&>*]:justify-items-start [&>*]:gap-x-2">
+        <Checkbox
           data-test-activity-review
           @checked={{this.changeset.review}}
           @label="Needs review"
           @onChange={{toggle "review" this.changeset}}
         />
-        <SyCheckbox
+        <Checkbox
           data-test-activity-not-billable
           @checked={{this.changeset.notBillable}}
           @label="Not billable"
@@ -85,7 +83,7 @@
         </tbody>
       </table>
     </div>
-    <div class="card-footer text-right">
+    <div class="card-footer text-right p-2 border-t flex justify-between striped">
       <button
         class="btn btn-danger"
         type="button"
diff --git a/frontend/app/index/activities/template.hbs b/frontend/app/index/activities/template.hbs
index 068cbe8f..b8991abd 100644
--- a/frontend/app/index/activities/template.hbs
+++ b/frontend/app/index/activities/template.hbs
@@ -1,96 +1,121 @@
-<div class="btn-toolbar btn-toolbar--right form-group">
-  <button
-    type="button"
-    class="btn btn-success"
-    title="Generate timesheet for all the activities listed above"
-    {{on "click" this.generateReportsCheck}}
-    data-test-activity-generate-timesheet
-  >
-    Generate timesheet
-  </button>
-</div>
+<NavTabs::Button
+  @onClick={{this.generateReportsCheck}}
+  title="Generate timesheet for all the activities listed above"
+  data-test-activity-generate-timesheet
+>Generate timesheet</NavTabs::Button>
 
-<div class="activities">
-  <div class="activities-edit">{{outlet}}</div>
+<div class="activities flex flex-row-reverse">
+  <div
+    class="activities-edit peer max-lg:[&:not(:empty)]:flex-grow lg:[&:not(:empty)]:basis-1/3"
+  >{{outlet}}</div>
 
-  <div class="activities-list">
+  <div class="activities-list flex-grow max-lg:peer-[:not(:empty)]:hidden">
     {{#if this.activities}}
-      <table class="table table--striped table--activities">
-        <tbody>
+      <table class="table table--striped table--activities w-full">
+        <tbody class="striped">
           {{#each this.sortedActivities as |activity|}}
-            {{!template-lint-disable no-invalid-interactive}}
-            <tr
-              title={{unless activity.transferred "Click to edit"}}
-              data-test-activity-row
-              data-test-activity-row-id={{activity.id}}
-              class="{{if activity.transferred 'transferred' 'pointer'}}
-                {{if activity.active 'primary'}}
-                {{if (eq activity.id this.editId) 'selected'}}"
-              {{on "click" (fn this.editActivity activity)}}
-            >
-              <td>
-                {{moment-format activity.from "HH:mm"}}
-                -
-                {{#unless activity.active}}
-                  {{moment-format activity.to "HH:mm"}}
-                {{/unless}}
-              </td>
-              <td
-                title="{{activity.task.project.customer.name}} > {{activity.task.project.name}} > {{activity.task.name}}"
+            {{#let (eq activity.id this.editId) as |selected|}}
+              {{!template-lint-disable no-invalid-interactive}}
+              <tr
+                title={{unless activity.transferred "Click to edit"}}
+                data-test-activity-row
+                data-test-activity-row-id={{activity.id}}
+                class="{{if
+                    activity.transferred
+                    'transferred text-foreground-muted'
+                    'cursor-pointer'
+                  }}
+                  {{if
+                    (and activity.active (not selected))
+                    'primary bg-primary/20'
+                  }}
+                  {{if selected 'selected bg-primary text-foreground-primary'}}
+                  {{if
+                    (not
+                      (or
+                        (or activity.transferred activity.active)
+                        (eq activity.id this.editId)
+                      )
+                    )
+                    'striped'
+                  }}
+                  [&>*]:py-1 [&>*]:px-2 shadow-sm"
+                {{on "click" (fn this.editActivity activity)}}
               >
-                {{#if activity.task}}
-                  <div>
-                    {{activity.task.project.customer.name}}
-                    <strong>&gt;</strong>
-                    {{activity.task.project.name}}
-                    <strong>&gt;</strong>
-                    {{activity.task.name}}
+                <td>
+                  {{moment-format activity.from "HH:mm"}}
+                  -
+                  {{#unless activity.active}}
+                    {{moment-format activity.to "HH:mm"}}
+                  {{/unless}}
+                </td>
+                <td
+                  title="{{activity.task.project.customer.name}} > {{activity.task.project.name}} > {{activity.task.name}}"
+                >
+                  {{#if activity.task}}
+                    <div>
+                      {{activity.task.project.customer.name}}
+                      <strong>&gt;</strong>
+                      {{activity.task.project.name}}
+                      <strong>&gt;</strong>
+                      {{activity.task.name}}
+                    </div>
+                  {{else}}
+                    <strong>Unknown task</strong>
+                  {{/if}}
+                </td>
+                <td title={{activity.comment}}>
+                  <div class="comment-field">{{activity.comment}}</div>
+                  {{#if activity.task.project.customerVisible}}
+                    <CustomerVisibleIcon
+                      class="activity-customer-visible-icon"
+                    />
+                  {{/if}}
+                </td>
+                <td>
+                  <div><SyCheckmark
+                      @checked={{activity.review}}
+                      @highlight={{true}}
+                    />
+                    Needs review</div>
+                  <div><SyCheckmark
+                      @checked={{activity.notBillable}}
+                      @highlight={{true}}
+                    />
+                    Not billable</div>
+                </td>
+                <td>
+                  {{#if activity.active}}
+                    <DurationSince @from={{activity.from}} />
+                  {{else}}
+                    {{format-duration activity.duration}}
+                  {{/if}}
+                </td>
+                <td class="px-4">
+                  <div class="w-full h-full grid place-items-end">
+                    {{#if activity.active}}
+                      <button
+                        type="button"
+                        data-test-stop-activity
+                        class="btn btn-danger"
+                        {{on "click" (fn this.stopActivity activity)}}
+                      >
+                        <FaIcon @icon="stop" @prefix="fas" />
+                      </button>
+                    {{else}}
+                      <button
+                        type="button"
+                        data-test-start-activity
+                        class="btn btn-success"
+                        {{on "click" (fn this.startActivity activity)}}
+                      >
+                        <FaIcon @icon="play" @prefix="fas" />
+                      </button>
+                    {{/if}}
                   </div>
-                {{else}}
-                  <strong>Unknown task</strong>
-                {{/if}}
-              </td>
-              <td title={{activity.comment}}>
-                <div class="comment-field">{{activity.comment}}</div>
-                {{#if activity.task.project.customerVisible}}
-                  <CustomerVisibleIcon class="activity-customer-visible-icon" />
-                {{/if}}
-              </td>
-              <td>
-                <div><SyCheckmark @checked={{activity.review}} @highlight={{true}} />
-                  Needs review</div>
-                <div><SyCheckmark @checked={{activity.notBillable}} @highlight={{true}} />
-                  Not billable</div>
-              </td>
-              <td>
-                {{#if activity.active}}
-                  <DurationSince @from={{activity.from}} />
-                {{else}}
-                  {{format-duration activity.duration}}
-                {{/if}}
-              </td>
-              <td>
-                {{#if activity.active}}
-                  <button
-                    type="button"
-                    data-test-stop-activity
-                    class="btn btn-danger"
-                    {{on "click" (fn this.stopActivity activity)}}
-                  >
-                    <FaIcon @icon="stop" @prefix="fas" />
-                  </button>
-                {{else}}
-                  <button
-                    type="button"
-                    data-test-start-activity
-                    class="btn btn-success"
-                    {{on "click" (fn this.startActivity activity)}}
-                  >
-                    <FaIcon @icon="play" @prefix="fas" />
-                  </button>
-                {{/if}}
-              </td>
-            </tr>
+                </td>
+              </tr>
+            {{/let}}
           {{/each}}
         </tbody>
       </table>
@@ -166,4 +191,4 @@
       }}
     >Cancel</button>
   </modal.footer>
-</SyModal>
+</SyModal>
\ No newline at end of file