diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
index 41c1b56..cd29687 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -152,7 +152,7 @@
   padding-right: 1rem;
 }
 @media only screen and (min-width: 57.5rem) {
-  .Site-margin  {
+  .Site-margin {
     max-width: 98rem;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
diff --git a/content/static/css/unit_header.css b/content/static/css/unit_header.css
index 105ff5f..b3ea76e 100644
--- a/content/static/css/unit_header.css
+++ b/content/static/css/unit_header.css
@@ -115,11 +115,14 @@
 .UnitHeader--full .UnitHeader-details {
   display: flex;
 }
-@media only screen and (min-width: 64rem) {
+@media only screen and (min-width: 52rem) {
   .UnitHeader-details {
     align-items: center;
     flex-direction: row;
   }
+  .UnitHeader--full .UnitHeader-details {
+    flex-wrap: wrap;
+  }
 }
 @media only screen and (min-width: 70rem) {
   .UnitHeader-details {
@@ -133,7 +136,7 @@
   line-height: 1.75rem;
 }
 
-@media only screen and (min-width: 64rem) {
+@media only screen and (min-width: 52rem) {
   .UnitHeader-detailItem:not(:last-of-type)::after {
     content: '|';
     padding: 1rem;
diff --git a/content/static/css/unit_meta.css b/content/static/css/unit_meta.css
index 0f1bb91..46dea43 100644
--- a/content/static/css/unit_meta.css
+++ b/content/static/css/unit_meta.css
@@ -5,55 +5,115 @@
  */
 
 .UnitMeta {
-  display: block;
+  align-items: baseline;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.5rem;
 }
-.UnitMeta a {
-  display: block;
-  margin-bottom: 1rem;
+@media screen and (max-width: 51.9375rem), (min-width: 64rem) {
+  .UnitMeta > div {
+    padding-bottom: 0.75rem;
+  }
+  .UnitMeta > h2 {
+    padding-bottom: 0.5rem;
+  }
+}
+@media only screen and (min-width: 52rem) and (max-width: 63.9375rem) {
+  .UnitMeta {
+    align-items: baseline;
+    display: grid;
+    gap: 0.5rem 2.5rem;
+    grid-auto-columns: auto 1fr auto;
+    grid-template-areas:
+      'a b c'
+      'd e .'
+      'f g .';
+    justify-content: space-between;
+    word-break: break-word;
+  }
+  .UnitMeta-detailsTitle {
+    grid-area: a;
+  }
+  .UnitMeta-details {
+    grid-area: b;
+  }
+  .UnitMeta-learn {
+    grid-area: c;
+    position: initial;
+    text-align: right;
+  }
+  .UnitMeta-repoTitle {
+    grid-area: d;
+  }
+  .UnitMeta-repo {
+    grid-area: e;
+  }
+  .UnitMeta-linksTitle {
+    grid-area: f;
+  }
+  .UnitMeta-links {
+    grid-area: g;
+  }
+}
+.UnitMeta-learn {
+  font-size: 0.875rem;
+  position: absolute;
+  right: 1rem;
+}
+@media only screen and (min-width: 52rem) and (max-width: 63.9375rem) {
+  .UnitMeta-learn {
+    padding-top: 0.25rem;
+  }
+}
+.UnitMeta-repo a {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+.UnitMeta-detailsTitle,
+.UnitMeta-linksTitle,
+.UnitMeta-repoTitle {
+  font-size: 1rem;
+  margin: 0;
+  white-space: nowrap;
+}
+.UnitMeta-links,
+.UnitMeta-repo {
   width: 100%;
 }
-.UnitMeta-header {
-  font-weight: bold;
-  margin: 1.125rem 0;
-}
+.UnitMeta-details ul,
+.UnitMeta-links ul,
 .UnitMeta-repo {
-  font-size: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-.UnitMetaDetails-header {
+  color: var(--gray-4);
   display: flex;
-  font-size: 1rem;
-  font-weight: bold;
-  justify-content: space-between;
-  line-height: 1rem;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.5rem;
+  flex-direction: column;
+  font-size: 0.875rem;
+  line-height: 1.75rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+  width: 100%;
 }
-@media only screen and (min-width: 64rem) {
-  .UnitMetaDetails-header {
-    border-bottom: 0.0625rem solid var(--gray-8);
-    margin-top: 0.625rem;
+@media only screen and (min-width: 52rem) and (max-width: 63.9375rem) {
+  .UnitMeta-details ul,
+  .UnitMeta-links ul,
+  .UnitMeta-repo {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.125rem 1rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
   }
 }
-.UnitMetaDetails a {
-  font-size: 1rem;
-  font-weight: normal;
-  text-transform: none;
-}
-.UnitMetaDetails .UnitMetaDetails-header > a {
-  font-size: 0.875rem;
-}
-.UnitMetaDetails ul {
-  list-style: none;
-  padding-inline-start: 0;
-}
-.UnitMetaDetails li {
-  font-size: 1rem;
-  margin-bottom: 0.75rem;
+.UnitMeta-details li,
+.UnitMeta-links li {
+  overflow: hidden;
+  padding-right: 1rem;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 .UnitMetaDetails-icon {
diff --git a/content/static/html/helpers/_unit_meta.tmpl b/content/static/html/helpers/_unit_meta.tmpl
index a702e90..4b3b41d 100644
--- a/content/static/html/helpers/_unit_meta.tmpl
+++ b/content/static/html/helpers/_unit_meta.tmpl
@@ -5,30 +5,42 @@
 -->
 
 {{define "unit_meta"}}
-  {{template "unit_meta_details" .}}
   <div class="UnitMeta">
-    <div class="UnitMeta-header">Repository</div>
-    {{if .Details.RepositoryURL}}
-      <a href="{{.Details.RepositoryURL}}" title="{{.Details.RepositoryURL}}" target="_blank" rel="noopener">
-        {{.Details.RepositoryURL}}
-      </a>
-    {{else}}
-      Repository URL not available.
-    {{end}}
+    <h2 class="UnitMeta-detailsTitle">Details</h2>
+    <div class="UnitMeta-details">
+      {{template "unit_meta_details" .}}
+    </div>
+    <div class="UnitMeta-learn">
+      <a href="/about#best-practices-h2">Learn more</a>
+    </div>
+    <h2 class="UnitMeta-repoTitle">Repository</h2>
+    <div class="UnitMeta-repo">
+      {{if .Details.RepositoryURL}}
+        <a href="{{.Details.RepositoryURL}}" title="{{.Details.RepositoryURL}}" target="_blank" rel="noopener">
+          {{.Details.RepositoryURL}}
+        </a>
+      {{else}}
+        Repository URL not available.
+      {{end}}
+    </div>
     {{if or .Details.ReadmeLinks .Details.DocLinks .Details.ModuleReadmeLinks}}
-      <div class="UnitMeta-header">Links</div>
+      <h2 class="UnitMeta-linksTitle">Links</h2>
     {{end}}
-    {{template "unit_meta_links" .Details.ReadmeLinks}}
-    {{template "unit_meta_links" .Details.DocLinks}}
-    {{template "unit_meta_links" .Details.ModuleReadmeLinks}}
+    <div class="UnitMeta-links">
+      <ul>
+        {{template "unit_meta_links" .Details.ReadmeLinks}}
+        {{template "unit_meta_links" .Details.DocLinks}}
+        {{template "unit_meta_links" .Details.ModuleReadmeLinks}}
+      </ul>
+    </div>
   </div>
 {{end}}
 
 {{define "unit_meta_links"}}
   {{range .}}
-    <div class="UnitMeta-repo">
+    <li>
       <a href="{{.Href}}" title="{{.Href}}" target="_blank" rel="noopener">{{.Body}}</a>
-    </div>
+    </li>
   {{end}}
 {{end}}
 
@@ -52,29 +64,26 @@
 {{end}}
 
 {{define "unit_meta_details"}}
-  <div class="UnitMetaDetails">
-    <div class="UnitMetaDetails-header">Details<a href="/about#best-practices-h2">Learn more</a></div>
-    <ul>
-      <li>
-        {{template "unit_meta_details_check" .Unit.HasGoMod}}
-        Valid <a href="{{.Details.ModFileURL}}" target="_blank">go.mod</a> file
-        {{template "unit_meta_details_toggletip" "The Go module system was introduced in Go 1.11 and is the official dependency management solution for Go."}}
-      </li>
-      <li>
-        {{template "unit_meta_details_check" .Unit.IsRedistributable}}
-        Redistributable license
-        {{template "unit_meta_details_toggletip" "Redistributable licenses place minimal restrictions on how software can be used, modified, and redistributed."}}
-      </li>
-      <li>
-        {{template "unit_meta_details_check" .Details.IsTaggedVersion}}
-        Tagged version
-        {{template "unit_meta_details_toggletip" "Modules with tagged versions give importers more predictable builds."}}
-      </li>
-      <li>
-        {{template "unit_meta_details_check"  .Details.IsStableVersion}}
-        Stable version
-        {{template "unit_meta_details_toggletip" "When a project reaches major version v1 it is considered stable."}}
-      </li>
-    </ul>
-  </div>
+  <ul>
+    <li>
+      {{template "unit_meta_details_check" .Unit.HasGoMod}}
+      Valid <a href="{{.Details.ModFileURL}}" target="_blank">go.mod</a> file
+      {{template "unit_meta_details_toggletip" "The Go module system was introduced in Go 1.11 and is the official dependency management solution for Go."}}
+    </li>
+    <li>
+      {{template "unit_meta_details_check" .Unit.IsRedistributable}}
+      Redistributable license
+      {{template "unit_meta_details_toggletip" "Redistributable licenses place minimal restrictions on how software can be used, modified, and redistributed."}}
+    </li>
+    <li>
+      {{template "unit_meta_details_check" .Details.IsTaggedVersion}}
+      Tagged version
+      {{template "unit_meta_details_toggletip" "Modules with tagged versions give importers more predictable builds."}}
+    </li>
+    <li>
+      {{template "unit_meta_details_check"  .Details.IsStableVersion}}
+      Stable version
+      {{template "unit_meta_details_toggletip" "When a project reaches major version v1 it is considered stable."}}
+    </li>
+  </ul>
 {{end}}
diff --git a/content/static/img/pkg-icon-help_24x24.svg b/content/static/img/pkg-icon-help_24x24.svg
index ac7a460..2508a31 100644
--- a/content/static/img/pkg-icon-help_24x24.svg
+++ b/content/static/img/pkg-icon-help_24x24.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#6e7072" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
\ No newline at end of file