diff --git a/edit.html b/edit.html
index 7b986ee7..376c110c 100644
--- a/edit.html
+++ b/edit.html
@@ -89,7 +89,6 @@
 			}
 			#url {
 				margin-left: 0.25rem;
-				color: inherit;
 			}
 			#url:not([href^="http"]) {
 				display: none;
@@ -97,10 +96,9 @@
 			.svg-icon {
 				cursor: pointer;
 				vertical-align: middle;
-				transition: opacity .5s;
+				transition: fill .5s;
 				width: 16px;
 				height: 16px;
-				fill: currentColor;
 			}
 			.svg-icon:not(.applies-to-help):not(.dismiss) {
 				margin-left: 0.2rem;
@@ -108,13 +106,17 @@
 			h2 .svg-icon, label .svg-icon {
 				margin-top: -2px;
 			}
+			.svg-icon.info {
+				width: 14px;
+				height: 16px;
+			}
 			.svg-icon:hover,
 			.svg-icon.info {
-				opacity: .6;
+				fill: #666;
 			}
 			.svg-icon,
 			.svg-icon.info:hover {
-				opacity: 1;
+				fill: #000;
 			}
 			#enabled {
 				margin-left: 0;
@@ -638,6 +640,9 @@
 		<template data-id="jumpToLine">
 			<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
 		</template>
+		<template data-id="regexpTestPartial">
+			<a target="_blank" href="https://github.com/stylish-userstyles/stylish/wiki/Applying-styles-to-specific-sites#advanced-matching-with-regular-expressions"><svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></a>
+		</template>
 
 		<script src="storage.js"></script>
 		<script src="messaging.js"></script>
diff --git a/edit.js b/edit.js
index f5bc8970..14557a53 100644
--- a/edit.js
+++ b/edit.js
@@ -1689,11 +1689,7 @@ function showRegExpTester(event, section = getSectionForChild(this)) {
 				rxData.urls = urlsNow;
 			}
 		}
-		const moreInfoLink = '<a target="_blank" ' +
-			'href="https://github.com/stylish-userstyles/' +
-			'stylish/wiki/Applying-styles-to-specific-sites' +
-			'#advanced-matching-with-regular-expressions">' +
-			'<img src="/images/help.png"></a>';
+		const moreInfoLink = template.regexpTestPartial.outerHTML;
 		const stats = {
 			full: {data: [], label: t('styleRegexpTestFull')},
 			partial: {data: [], label: t('styleRegexpTestPartial') + moreInfoLink},
diff --git a/manage.css b/manage.css
index 0467d1df..dea951c3 100644
--- a/manage.css
+++ b/manage.css
@@ -3,20 +3,14 @@ body {
   font: 12px arial, sans-serif;
 }
 
-a,
-a:visited {
-  color: inherit;
-  opacity: .75;
-  -webkit-transition: opacity 0.5s;
+a {
+  color: #000;
+  transition: color .5s;
+  text-decoration-skip: ink;
 }
 
-a:hover,
-a.homepage:hover {
-  opacity: .6;
-}
-
-a.homepage {
-  opacity: 1;
+a:hover {
+  color: #666;
 }
 
 #header {
@@ -53,13 +47,20 @@ a.homepage {
 .svg-icon {
   cursor: pointer;
   vertical-align: middle;
-  margin-left: 0.3rem;
-  margin-right: 0.3rem;
   margin-top: -4px;
-  transition: opacity .5s;
+  transition: fill .5s;
   width: 16px;
   height: 16px;
-  fill: currentColor;
+  fill: #000;
+}
+
+.svg-icon:hover {
+  fill: #666;
+}
+
+.homepage {
+  margin-left: 0.1em;
+  margin-right: 0.1em;
 }
 
 .style-name {
@@ -69,12 +70,11 @@ a.homepage {
 
 .style-name a, .style-edit-link {
   text-decoration: none;
-  color: inherit;
 }
 
 .style-name-link:hover {
   text-decoration: underline;
-  color: black;
+  color: #000;
 }
 
 .applies-to {
@@ -181,11 +181,6 @@ summary {
   animation: highlight 10s cubic-bezier(0,.82,.47,.98);
 }
 
-#find-editor-styles {
-  display: block;
-  margin-top: .5em;
-}
-
 @keyframes highlight {
   from {
     background-color: rgba(128, 128, 128, .5);
diff --git a/manage.html b/manage.html
index 36de7dbf..5172331b 100644
--- a/manage.html
+++ b/manage.html
@@ -25,9 +25,7 @@
   </template>
 
   <template data-id="styleHomepage">
-    <a target="_blank" class="homepage">
-      <svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg>
-    </a>
+    <a target="_blank" class="homepage"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
   </template>
 
   <template data-id="appliesToTarget">
@@ -87,10 +85,14 @@
   </p>
   <div id="options">
     <h2 id="options-heading" i18n-text="optionsHeading"></h2>
-    <button id="manage-options-button" i18n-text="openOptionsManage"></button>
-    <button id="manage-shortcuts-button" i18n-text="openOptionsShortcuts"></button>
-    <a id="find-editor-styles" i18n-text="editorStylesButton"
+    <p>
+      <button id="manage-options-button" i18n-text="openOptionsManage"></button>
+      <button id="manage-shortcuts-button" i18n-text="openOptionsShortcuts"></button>
+    </p>
+    <p>
+      <a id="find-editor-styles" i18n-text="editorStylesButton"
        href="https://userstyles.org/styles/browse/chrome-extension" target="_blank"></a>
+    <p>
   </div>
   <div id="backup">
     <h2 id="backup-title" i18n-text="backupButtons"></h2>
diff --git a/popup.css b/popup.css
index a92052de..88c880a0 100644
--- a/popup.css
+++ b/popup.css
@@ -36,12 +36,16 @@ input[type=checkbox] {
   display: block;
 }
 
-a,
-a:visited {
-  color: black;
+a {
+  color: #000;
+  transition: color .5s;
   text-decoration-skip: ink;
 }
 
+a:hover {
+  color: #666;
+}
+
 .left-gutter {
   display: table-cell;
   width: 16px;
@@ -195,9 +199,13 @@ body.blocked > DIV {
 .svg-icon {
   pointer-events: none;
   transition: fill .5s;
+  width: 14px;
+  height: 16px;
+  fill: #666;
 }
+
 a:hover .svg-icon {
-  fill: #000000;
+  fill: #000;
 }
 
 body > .actions {
@@ -245,6 +253,12 @@ body.blocked #unavailable {
 
 /* 'New style' links */
 
+#write-style {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 #write-style-for {
   margin-right: .6ex
 }
@@ -264,7 +278,9 @@ body.blocked #unavailable {
 
 #match {
   overflow-wrap: break-word;
-  display: inline-block;
+  display: block;
+  flex-grow: 9;
+  min-width: 200px;
 }
 
 /* "breadcrumbs" 'new style' links */
diff --git a/popup.html b/popup.html
index 0a36c1ad..38cc92f5 100644
--- a/popup.html
+++ b/popup.html
@@ -1,108 +1,114 @@
 <html id="stylus">
 
 <head>
-    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
-    <link rel="stylesheet" href="popup.css">
+  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+  <link rel="stylesheet" href="popup.css">
 
-    <template data-id="style">
-        <div class="entry">
-            <div class="left-gutter">
-                <input class="checker" type="checkbox">
-            </div>
-            <div class="main-controls">
-                <label class="style-name"></label>
-                <div class="actions">
-                    <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
-                    <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
-                    <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel"> <!--`i18n-title` automatically creates `title` attribute -->
-                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon edit" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">
-                            <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
-                        </svg>
-                    </a>
-                    <a href="#" class="delete" i18n-title="deleteStyleLabel">
-                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icon remove" fill="hsl(0, 0%, 40%)" height="16" width="14" viewBox="0 0 14 16">
-                            <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
-                        </svg>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </template>
-
-    <template data-id="writeStyle">
-        <a class="write-style-link"></a>
-    </template>
-
-    <template data-id="noStyles">
-        <div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
-    </template>
-
-    <template data-id="regexpProblemIndicator">
-      <div class="regexp-problem-indicator" i18n-title="styleRegexpProblemTooltip"></div>
-    </template>
-
-    <template data-id="regexpProblemExplanation">
-      <div id="regexp-explanation">
-        <div id="regexp-partial" i18n-html="styleRegexpPartialExplanation"></div>
-        <div id="regexp-invalid" i18n-text="styleRegexpInvalidExplanation"></div>
-        <button i18n-text="confirmOK"></button>
+  <template data-id="style">
+    <div class="entry">
+      <div class="left-gutter">
+        <input class="checker" type="checkbox">
       </div>
-    </template>
+      <div class="main-controls">
+        <label class="style-name"></label>
+        <div class="actions">
+          <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
+          <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
+          <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
+            <!--`i18n-title` automatically creates `title` attribute -->
+            <svg class="svg-icon edit"><use xlink:href="#svg-icon-edit"/></svg>
+          </a>
+          <a href="#" class="delete" i18n-title="deleteStyleLabel">
+            <svg class="svg-icon remove"><use xlink:href="#svg-icon-remove"/></svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <template data-id="writeStyle">
+    <a class="write-style-link"></a>
+  </template>
+
+  <template data-id="noStyles">
+    <div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
+  </template>
+
+  <template data-id="regexpProblemIndicator">
+    <div class="regexp-problem-indicator" i18n-title="styleRegexpProblemTooltip"></div>
+  </template>
+
+  <template data-id="regexpProblemExplanation">
+    <div id="regexp-explanation">
+      <div id="regexp-partial" i18n-html="styleRegexpPartialExplanation"></div>
+      <div id="regexp-invalid" i18n-text="styleRegexpInvalidExplanation"></div>
+      <button i18n-text="confirmOK"></button>
+    </div>
+  </template>
 
   <script src="localization.js"></script>
-    <script src="health.js"></script>
-    <script src="storage.js"></script>
-    <script src="messaging.js"></script>
-    <script src="apply.js"></script>
-    <script src="dom.js"></script>
-
-    <script src="popup.js"></script>
+  <script src="health.js"></script>
+  <script src="storage.js"></script>
+  <script src="messaging.js"></script>
+  <script src="apply.js"></script>
+  <script src="dom.js"></script>
+  <script src="popup.js"></script>
 </head>
 
 <body id="stylus-popup">
-    <!-- confirm -->
-    <div id="confirm">
-        <div>
-            <b>Style's Name</b>
-            <span i18n-text="deleteStyleConfirm"></span>
-            <div>
-                <button i18n-text="confirmDelete" data-cmd="ok"></button>
-                <button i18n-text="confirmCancel" data-cmd="cancel"></button>
-            </div>
-        </div>
-    </div>
 
-    <div id="unavailable">
-        <div class="main-controls">
-            <span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
-        </div>
+  <div id="confirm">
+    <div>
+      <b>Style's Name</b>
+      <span i18n-text="deleteStyleConfirm"></span>
+      <div>
+        <button i18n-text="confirmDelete" data-cmd="ok"></button>
+        <button i18n-text="confirmCancel" data-cmd="cancel"></button>
+      </div>
+    </div>
+  </div>
+
+  <div id="unavailable">
+    <div class="main-controls">
+      <span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span>
+    </div>
+  </div>
+
+  <div id="installed"></div>
+
+  <div class="actions">
+    <div id="disable-all-wrapper">
+      <div class="left-gutter">
+        <input id="disableAll" type="checkbox">
+      </div>
+      <div class="main-controls">
+        <label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
+      </div>
+    </div>
+    <div class="left-gutter"></div>
+    <div class="main-controls">
+      <div id="find-styles">
+        <a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>
+      </div>
+      <div id="write-style">
+        <span id="write-style-for" i18n-text="writeStyleFor"></span>
+      </div>
     </div>
-    <div id="installed"></div>
-    <div class="actions">
-        <div id="disable-all-wrapper">
-            <div class="left-gutter">
-                <input id="disableAll" type="checkbox">
-            </div>
-            <div class="main-controls">
-                <label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
-            </div>
-        </div>
-        <div class="left-gutter"></div>
-        <div class="main-controls">
-            <div id="find-styles">
-                <a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>
-            </div>
-            <div id="write-style">
-                <span id="write-style-for" i18n-text="writeStyleFor"></span>
-            </div>
-        </div>
     <!-- Actions -->
     <div id="popup-options">
-        <button id="popup-manage-button" i18n-text="openManage"></button>
-        <button id="popup-options-button" i18n-text="openOptionsPopup"></button>
-        <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
+      <button id="popup-manage-button" i18n-text="openManage"></button>
+      <button id="popup-options-button" i18n-text="openOptionsPopup"></button>
+      <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
     </div>
-    </div>
-</body>
+  </div>
 
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+    <symbol id="svg-icon-edit" width="14" height="16" viewBox="0 0 14 16">
+      <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
+    </symbol>
+    <symbol id="svg-icon-remove" width="14" height="16" viewBox="0 0 14 16">
+      <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
+    </symbol>
+  </svg>
+</body>
 </html>
diff --git a/popup.js b/popup.js
index ffbb4d5c..37bc9988 100644
--- a/popup.js
+++ b/popup.js
@@ -78,7 +78,9 @@ function initPopup(url) {
   // Write new style links
   const writeStyle = $('#write-style');
   const matchTargets = document.createElement('span');
-  matchTargets.id = 'match';
+  const matchWrapper = document.createElement('span');
+  matchWrapper.id = 'match';
+  matchWrapper.appendChild(matchTargets);
 
   // For this URL
   const urlLink = template.writeStyle.cloneNode(true);
@@ -120,7 +122,7 @@ function initPopup(url) {
     matchTargets.classList.add('breadcrumbs');
     matchTargets.appendChild(matchTargets.removeChild(matchTargets.firstElementChild));
   }
-  writeStyle.appendChild(matchTargets);
+  writeStyle.appendChild(matchWrapper);
 }