diff --git a/dashboard/src/components/MailDomainStatus.vue b/dashboard/src/components/MailDomainStatus.vue
index 128559844..c32b4912d 100644
--- a/dashboard/src/components/MailDomainStatus.vue
+++ b/dashboard/src/components/MailDomainStatus.vue
@@ -84,9 +84,10 @@ onMounted(async () => {
     <div v-html="$t('email.dnsStatus.description', { emailDnsDocsLink:'https://docs.cloudron.io/email/#dns-records'})"></div>
     <br/>
 
+    <!-- DNS records including PTR4/PTR6 -->
     <div v-if="domainStatus.mx">
-      <div v-for="(item, key) in dnsRecordLabels" :key="key" class="record-item" @click="item.isOpen = !item.isOpen">
-        <div>
+      <div v-for="(item, key) in dnsRecordLabels" :key="key" class="record-item">
+        <div class="record-header" @click="item.isOpen = !item.isOpen">
           <i v-if="!busy" class="fa-solid" :class="{
             'fa-check-circle text-success': domainStatus[key].status === 'passed',
             'fa-exclamation-triangle text-danger': domainStatus[key].status === 'failed',
@@ -95,6 +96,7 @@ onMounted(async () => {
           <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
           &nbsp;
           <b>{{ item.label }} record</b>
+          <i class="fa-solid" :class="item.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'" style="float: right"></i>
         </div>
 
         <div class="record-details" v-if="item.isOpen" @click.stop>
@@ -131,8 +133,9 @@ onMounted(async () => {
       </div>
     </div>
 
-    <div v-if="domainStatus.relay" class="record-item" @click="domainStatus.relay.isOpen = !domainStatus.relay.isOpen">
-      <div>
+    <!-- outbound SMTP / Relay status -->
+    <div v-if="domainStatus.relay" class="record-item">
+      <div class="record-header" @click="domainStatus.relay.isOpen = !domainStatus.relay.isOpen">
         <i v-if="!busy" class="fa" :class="{
           'fa-check-circle text-success': domainStatus.relay.status === 'passed',
           'fa-exclamation-triangle text-danger': domainStatus.relay.status === 'failed',
@@ -141,15 +144,17 @@ onMounted(async () => {
         <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
         &nbsp;
         <b>{{ $t('email.smtpStatus.outboundSmtp') }}</b>
+        <i class="fa-solid" :class="domainStatus.relay.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'" style="float: right"></i>
       </div>
-      <div class="record-details" v-if="domainStatus.relay.isOpen">
+      <div class="record-details" v-if="domainStatus.relay.isOpen" @click.stop>
         {{ domainStatus.relay.message }}
       </div>
     </div>
 
-    <div v-for="(item, key) in rblTypes" :key="key" class="record-item" @click="item.isOpen = !item.isOpen">
+    <!-- Blacklist -->
+    <div v-for="(item, key) in rblTypes" :key="key" class="record-item">
       <div v-if="domainStatus[key]">
-        <div>
+        <div class="record-header" @click="item.isOpen = !item.isOpen">
           <i v-if="!busy" class="fa" :class="{
             'fa-check-circle text-success': domainStatus[key].status === 'passed',
             'fa-exclamation-triangle text-danger': domainStatus[key].status === 'failed',
@@ -158,8 +163,9 @@ onMounted(async () => {
           <i v-else class="fa-solid fa-circle-notch fa-spin"></i>
           &nbsp;
           <b>{{ key === 'rbl4' ? 'IPv4' : 'IPv6' }} {{ $t('email.smtpStatus.rblCheck') }}</b>
+          <i class="fa-solid" :class="item.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'" style="float: right"></i>
         </div>
-        <div class="record-details" v-if="item.isOpen">
+        <div class="record-details" v-if="item.isOpen" @click.stop>
           <div v-if="domainStatus[key].status === 'passed'">IP: {{ domainStatus[key].ip }}</div>
           <div v-else-if="domainStatus[key].status === 'skipped'">{{ domainStatus[key].message }}</div>
           <div v-else>
@@ -169,9 +175,9 @@ onMounted(async () => {
             <!-- servers is only the blocked servers -->
             <br/>
             <div v-for="server in domainStatus[key].servers" :key="server.name">
-              <a :href="server.removal" target="_blank">{{ server.name }}</a>
+              <a :href="server.removal" target="_blank">{{ server.name }} removal link</a>
               &nbsp;
-              <span v-if="server.txtRecords.length">{{ server.txtRecords.join('. ') }}</span>
+              <span v-if="server.txtRecords.length">TXT record: {{ server.txtRecords.join('. ') }}</span>
               <span v-else>No TXT Records</span>
             </div>
           </div>
@@ -183,20 +189,19 @@ onMounted(async () => {
 
 <style scoped>
 
-.record-item {
+.record-header {
   border-radius: var(--pankow-border-radius);
   padding: 10px;
-  gap: 10px;
   color: var(--pankow-text-color);
   cursor: pointer;
 }
 
-.record-item:hover {
+.record-header:hover {
   background-color: var(--pankow-color-background-hover);
 }
 
 .record-details {
-  padding: 10px 30px;
+  padding: 10px 40px;
   overflow: hidden;
 }