diff --git a/module/metric/css/details.ui.css b/module/metric/css/details.ui.css
index c268c0e27f..18a03c13a3 100644
--- a/module/metric/css/details.ui.css
+++ b/module/metric/css/details.ui.css
@@ -1,6 +1,3 @@
-.border-bottom {border-bottom: solid 1px var(--color-gray-300);}
-.border-bottom span {padding: 4px 12px; background-color: var(--color-gray-100);}
-.tab-margin {margin-top: 8px; margin-bottom: 8px;}
 .verify-content {height: 300px; border: solid 1px var(--color-gray-300);}
 
 .clear-shadow {border: none; box-shadow: none;}
diff --git a/module/metric/ui/details.html.php b/module/metric/ui/details.html.php
index 6b76aa1a0a..09cbf1ffb4 100644
--- a/module/metric/ui/details.html.php
+++ b/module/metric/ui/details.html.php
@@ -50,14 +50,14 @@ panel
     set::bodyClass('relative'),
     div
     (
-        h1
+        div
         (
-            setClass('border-bottom tab-margin'),
+            setClass('border-b border-gray-100 my-2 py-2'),
             span
             (
 
                 $lang->metric->legendBasicInfo,
-                setClass('gray-pale text-md font-bold')
+                setClass('bg-gray-100 text-md font-bold px-2 py-3')
             )
         ),
         div
@@ -67,13 +67,13 @@ panel
                 $buildItems($legendBasic)
             )
         ),
-        h1
+        div
         (
-            setClass('border-bottom tab-margin'),
+            setClass('border-b border-gray-100 my-2 py-2'),
             span
             (
                 $lang->metric->legendCreateInfo,
-                setClass('gray-pale text-md font-bold')
+                setClass('bg-gray-100 text-md font-bold px-2 py-3')
             )
         ),
         div