diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 0a0dceb1..2f9d2ca4 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -10,6 +10,7 @@
   --color-accent-background: hsl(237deg 18% 28%);
   --color-text: #ddd;
   --color-text-muted: #999;
+  --color-text-hint: #555;
 
   --color-border: #222;
 
@@ -224,3 +225,13 @@ footer {
 .btn-bar .btn.dangerous[disabled] {
   background-color: #53413e;
 }
+
+.details-no-item-selected {
+  align-items: center;
+  color: var(--color-text-hint);
+  display: flex;
+  user-select: none;
+  height: 100%;
+  justify-content: center;
+  margin: auto;
+}
diff --git a/web/app/src/components/JobDetails.vue b/web/app/src/components/JobDetails.vue
index b5fa2cd3..4654f0be 100644
--- a/web/app/src/components/JobDetails.vue
+++ b/web/app/src/components/JobDetails.vue
@@ -45,8 +45,8 @@
     </dl>
   </template>
 
-  <div v-else class="no-job-selected">
-    <p>No job selected, pick one from the list on the left.</p>
+  <div v-else class="details-no-item-selected">
+    <p>Select a job to see its details.</p>
   </div>
 </template>
 
diff --git a/web/app/src/components/TaskDetails.vue b/web/app/src/components/TaskDetails.vue
index efd23005..05a5a2dc 100644
--- a/web/app/src/components/TaskDetails.vue
+++ b/web/app/src/components/TaskDetails.vue
@@ -34,8 +34,8 @@
     </dl>
   </template>
 
-  <div v-else class="no-task-selected">
-    <p>No task selected, pick one from the list on the left.</p>
+  <div v-else class="details-no-item-selected">
+    <p>Select a task to see its details.</p>
   </div>
 </template>