--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -191,8 +191,87 @@ button {
   flex-direction: column;
   width: 100%;
   height: 100%;
 }
 
 .error-page .error-page-details {
   color: gray;
 }
+
+.AddonTarget {
+  background: #fff;
+  box-shadow: 0 0 1px rgba(0,0,0,0.12);
+  list-style-type: none;
+  margin: 0 0 8px;
+  padding: 4px 16px;
+  transition: box-shadow 150ms;
+}
+
+.AddonTarget:hover {
+  box-shadow: 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.AddonTarget-header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  display: flex;
+  padding: 16px 0;
+}
+
+.AddonTarget-icon {
+  height: 24px;
+  margin-inline-end: 16px;
+}
+
+.AddonTarget-icon:not([src]) {
+  display: none;
+}
+
+.inverted-icons .AddonTarget-icon {
+  filter: invert(30%);
+}
+
+.AddonTarget-name {
+  align-self: center;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.AddonTarget-button {
+  background: none;
+  border: none;
+  color: #0087ff;
+  font-size: 14px;
+  margin: 12px;
+  min-width: auto;
+  padding: 4px;
+  transition: color 150ms;
+}
+
+.AddonTarget-button:active,
+.AddonTarget-button:hover,
+.AddonTarget-button:enabled:hover:active {
+  background: none;
+}
+
+.AddonTarget-button:disabled {
+  color: #6e6e6e;
+  opacity: 1;
+}
+
+.AddonTarget-button:enabled:focus,
+.AddonTarget-button:enabled:hover {
+  background: none;
+  color: #0052cc;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.AddonTarget-button:enabled:hover:active {
+  color: #003399;
+  text-decoration: none;
+}
+
+.AddonTarget-button:first-of-type {
+  /* Subtract the start padding so the button is still a bigger click target but
+   * lines up with the icon. */
+  margin-inline-start: -4px;
+}

--- a/devtools/client/aboutdebugging/components/addons/target.js
+++ b/devtools/client/aboutdebugging/components/addons/target.js
@@ -54,32 +54,32 @@ module.exports = createClass({
   },
 
   render() {
     let { target, debugDisabled } = this.props;
     // Only temporarily installed add-ons can be reloaded.
     const canBeReloaded = target.temporarilyInstalled;
 
     return dom.li(
-      { className: "target-container", "data-addon-id": target.addonID },
-      dom.img({
-        className: "target-icon",
-        role: "presentation",
-        src: target.icon
-      }),
-      dom.div({ className: "target" },
-        dom.div({ className: "target-name", title: target.name }, target.name)
+      { className: "AddonTarget", "data-addon-id": target.addonID },
+      dom.div({ className: "AddonTarget-header" },
+        dom.img({
+          className: "AddonTarget-icon",
+          role: "presentation",
+          src: target.icon
+        }),
+        dom.span({ className: "AddonTarget-name", title: target.name }, target.name)
       ),
       dom.button({
-        className: "debug-button",
+        className: "AddonTarget-debug-button AddonTarget-button",
         onClick: this.debug,
         disabled: debugDisabled,
       }, Strings.GetStringFromName("debug")),
       dom.button({
-        className: "reload-button",
+        className: "AddonTarget-reload-button AddonTarget-button",
         onClick: this.reload,
         disabled: !canBeReloaded,
         title: !canBeReloaded ?
           Strings.GetStringFromName("reloadDisabledTooltip") : ""
       }, Strings.GetStringFromName("reload"))
     );
   }
 });