diff --git a/app/javascript/mastodon/features/about/index.js b/app/javascript/mastodon/features/about/index.js
index 8328362725823f512dc521b7e52f564c92fa4ce5..15d017642cd8f031e1ed5c3af39d1d25f5c3531e 100644
--- a/app/javascript/mastodon/features/about/index.js
+++ b/app/javascript/mastodon/features/about/index.js
@@ -183,25 +183,18 @@ class About extends React.PureComponent {
               <>
                 <p><FormattedMessage id='about.domain_blocks.preamble' defaultMessage='Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.' /></p>
 
-                <table className='about__domain-blocks'>
-                  <thead>
-                    <tr>
-                      <th><FormattedMessage id='about.domain_blocks.domain' defaultMessage='Domain' /></th>
-                      <th><FormattedMessage id='about.domain_blocks.severity' defaultMessage='Severity' /></th>
-                      <th><FormattedMessage id='about.domain_blocks.comment' defaultMessage='Reason' /></th>
-                    </tr>
-                  </thead>
-
-                  <tbody>
-                    {domainBlocks.get('items').map(block => (
-                      <tr key={block.get('domain')}>
-                        <td><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></td>
-                        <td><span title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span></td>
-                        <td>{block.get('comment')}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+                <div className='about__domain-blocks'>
+                  {domainBlocks.get('items').map(block => (
+                    <div className='about__domain-blocks__domain' key={block.get('domain')}>
+                      <div className='about__domain-blocks__domain__header'>
+                        <h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6>
+                        <span className='about__domain-blocks__domain__type' title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span>
+                      </div>
+
+                      <p>{block.get('comment').length > 0 ? block.get('comment') : <FormattedMessage id='about.domain_blocks.no_reason_available' defaultMessage='Reason not available' />}</p>
+                    </div>
+                  ))}
+                </div>
               </>
             ) : (
               <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index ecbf6afc0b58aedd08e0f70532abc8b9a43886dd..8b43604c8f66eddcb93fa475c792d0a4092d397b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -8557,28 +8557,45 @@ noscript {
 
   &__domain-blocks {
     margin-top: 30px;
-    width: 100%;
-    border-collapse: collapse;
-    break-inside: auto;
+    background: darken($ui-base-color, 4%);
+    border: 1px solid lighten($ui-base-color, 4%);
+    border-radius: 4px;
 
-    th {
-      text-align: left;
-      font-weight: 500;
+    &__domain {
+      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      padding: 10px;
+      font-size: 15px;
       color: $darker-text-color;
-    }
 
-    thead tr,
-    tbody tr {
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
-    }
+      &:nth-child(2n) {
+        background: darken($ui-base-color, 2%);
+      }
 
-    tbody tr:last-child {
-      border-bottom: 0;
-    }
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      &__header {
+        display: flex;
+        gap: 10px;
+        justify-content: space-between;
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
 
-    th,
-    td {
-      padding: 8px;
+      h6 {
+        color: $secondary-text-color;
+        font-size: inherit;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      p {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }