diff --git a/add-on/_locales/en/messages.json b/add-on/_locales/en/messages.json
index fb734f60d..2bd3248f5 100644
--- a/add-on/_locales/en/messages.json
+++ b/add-on/_locales/en/messages.json
@@ -207,6 +207,10 @@
     "message": "Failed to stop IPFS node",
     "description": "System notification title displayed when stopping an IPFS node fails (notify_stopIpfsNodeErrorTitle)"
   },
+  "option_page_header" : {
+    "message": "Companion Preferences",
+    "description": "Main header on the Preferences screen (option_page_header)"
+  },
   "option_legend_readMore" : {
     "message": "Read more",
     "description": "A generic link in option description on the Preferences screen (option_legend_readMore)"
diff --git a/add-on/src/options/forms/api-form.js b/add-on/src/options/forms/api-form.js
index 54fa1febf..c8e32e7fc 100644
--- a/add-on/src/options/forms/api-form.js
+++ b/add-on/src/options/forms/api-form.js
@@ -13,9 +13,9 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
 
   return html`
     <form>
-      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
-        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_api')}</h2>
-        <div>
+      <fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_api')}</h2>
+        <div class="flex-row-ns pb0-ns">
           <label for="ipfsApiUrl">
             <dl>
               <dt>${browser.i18n.getMessage('option_ipfsApiUrl_title')}</dt>
@@ -23,7 +23,7 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
             </dl>
           </label>
           <input
-            class="bg-white navy"
+            class="bg-white navy self-center-ns"
             id="ipfsApiUrl"
             type="url"
             inputmode="url"
@@ -34,7 +34,7 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
             onchange=${onIpfsApiUrlChange}
             value=${ipfsApiUrl} />
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="ipfsApiPollMs">
             <dl>
               <dt>${browser.i18n.getMessage('option_ipfsApiPollMs_title')}</dt>
@@ -42,7 +42,7 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
             </dl>
           </label>
           <input
-            class="bg-white navy"
+            class="bg-white navy self-center-ns"
             id="ipfsApiPollMs"
             type="number"
             inputmode="numeric"
@@ -53,14 +53,14 @@ function apiForm ({ ipfsApiUrl, ipfsApiPollMs, automaticMode, onOptionChange })
             onchange=${onIpfsApiPollMsChange}
             value=${ipfsApiPollMs} />
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="automaticMode">
             <dl>
               <dt>${browser.i18n.getMessage('option_automaticMode_title')}</dt>
               <dd>${browser.i18n.getMessage('option_automaticMode_description')}</dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'automaticMode', checked: automaticMode, onchange: onAutomaticModeChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'automaticMode', checked: automaticMode, onchange: onAutomaticModeChange })}</div>
         </div>
       </fieldset>
     </form>
diff --git a/add-on/src/options/forms/dnslink-form.js b/add-on/src/options/forms/dnslink-form.js
index fdb060f58..e5bf4c8e6 100644
--- a/add-on/src/options/forms/dnslink-form.js
+++ b/add-on/src/options/forms/dnslink-form.js
@@ -17,9 +17,9 @@ function dnslinkForm ({
 
   return html`
     <form>
-      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
-        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_dnslink')}</h2>
-        <div>
+      <fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_dnslink')}</h2>
+        <div class="flex-row-ns pb0-ns">
           <label for="dnslinkPolicy">
             <dl>
               <dt>${browser.i18n.getMessage('option_dnslinkPolicy_title')}</dt>
@@ -31,7 +31,7 @@ function dnslinkForm ({
               </dd>
             </dl>
           </label>
-          <select id="dnslinkPolicy" name='dnslinkPolicy' onchange=${onDnslinkPolicyChange}>
+          <select id="dnslinkPolicy" name='dnslinkPolicy' class="self-center-ns bg-white" onchange=${onDnslinkPolicyChange}>
             <option
               value='false'
               selected=${String(dnslinkPolicy) === 'false'}>
@@ -49,16 +49,16 @@ function dnslinkForm ({
             </option>
           </select>
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="dnslinkDataPreload">
             <dl>
               <dt>${browser.i18n.getMessage('option_dnslinkDataPreload_title')}</dt>
               <dd>${browser.i18n.getMessage('option_dnslinkDataPreload_description')}</dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'dnslinkDataPreload', checked: dnslinkDataPreload, disabled: dnslinkRedirect, onchange: onDnslinkDataPreloadChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'dnslinkDataPreload', checked: dnslinkDataPreload, disabled: dnslinkRedirect, onchange: onDnslinkDataPreloadChange })}</div>
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="dnslinkRedirect">
             <dl>
               <dt>${browser.i18n.getMessage('option_dnslinkRedirect_title')}</dt>
@@ -71,7 +71,7 @@ function dnslinkForm ({
               </dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'dnslinkRedirect', checked: dnslinkRedirect, onchange: onDnslinkRedirectChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'dnslinkRedirect', checked: dnslinkRedirect, onchange: onDnslinkRedirectChange })}</div>
         </div>
       </fieldset>
     </form>
diff --git a/add-on/src/options/forms/experiments-form.js b/add-on/src/options/forms/experiments-form.js
index 2fb8e03f6..fd4e64cdb 100644
--- a/add-on/src/options/forms/experiments-form.js
+++ b/add-on/src/options/forms/experiments-form.js
@@ -25,46 +25,46 @@ function experimentsForm ({
 
   return html`
     <form>
-      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
-        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_experiments')}</h2>
+      <fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_experiments')}</h2>
         <div class="mb2">${browser.i18n.getMessage('option_experiments_warning')}</div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="displayNotifications">
             <dl>
               <dt>${browser.i18n.getMessage('option_displayNotifications_title')}</dt>
               <dd>${browser.i18n.getMessage('option_displayNotifications_description')}</dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'displayNotifications', checked: displayNotifications, onchange: onDisplayNotificationsChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'displayNotifications', checked: displayNotifications, onchange: onDisplayNotificationsChange })}</div>
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="catchUnhandledProtocols">
             <dl>
               <dt>${browser.i18n.getMessage('option_catchUnhandledProtocols_title')}</dt>
               <dd>${browser.i18n.getMessage('option_catchUnhandledProtocols_description')}</dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'catchUnhandledProtocols', checked: catchUnhandledProtocols, onchange: onCatchUnhandledProtocolsChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'catchUnhandledProtocols', checked: catchUnhandledProtocols, onchange: onCatchUnhandledProtocolsChange })}</div>
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="recoverFailedHttpRequests">
             <dl>
               <dt>${browser.i18n.getMessage('option_recoverFailedHttpRequests_title')}</dt>
               <dd>${browser.i18n.getMessage('option_recoverFailedHttpRequests_description')}</dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'recoverFailedHttpRequests', checked: recoverFailedHttpRequests, onchange: onrecoverFailedHttpRequestsChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'recoverFailedHttpRequests', checked: recoverFailedHttpRequests, onchange: onrecoverFailedHttpRequestsChange })}</div>
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="linkify">
             <dl>
               <dt>${browser.i18n.getMessage('option_linkify_title')}</dt>
               <dd>${browser.i18n.getMessage('option_linkify_description')}</dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'linkify', checked: linkify, onchange: onLinkifyChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'linkify', checked: linkify, onchange: onLinkifyChange })}</div>
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="detectIpfsPathHeader">
             <dl>
               <dt>${browser.i18n.getMessage('option_detectIpfsPathHeader_title')}</dt>
@@ -75,9 +75,9 @@ function experimentsForm ({
               </dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'detectIpfsPathHeader', checked: detectIpfsPathHeader, onchange: onDetectIpfsPathHeaderChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'detectIpfsPathHeader', checked: detectIpfsPathHeader, onchange: onDetectIpfsPathHeaderChange })}</div>
         </div>
-        <div class="o-50">
+        <div class="flex-row-ns pb0-ns o-50">
           <label for="ipfsProxy">
             <dl>
               <dt>${browser.i18n.getMessage('option_ipfsProxy_title')}</dt>
@@ -97,9 +97,9 @@ function experimentsForm ({
               </dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'ipfsProxy', checked: ipfsProxy, disabled: true, onchange: onIpfsProxyChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'ipfsProxy', checked: ipfsProxy, disabled: true, onchange: onIpfsProxyChange })}</div>
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="logNamespaces">
             <dl>
               <dt>${browser.i18n.getMessage('option_logNamespaces_title')}</dt>
@@ -107,21 +107,21 @@ function experimentsForm ({
             </dl>
           </label>
           <input
-            class="bg-white navy"
+            class="bg-white navy self-center-ns"
             id="logNamespaces"
             type="text"
             required
             onchange=${onOptionChange('logNamespaces')}
             value=${logNamespaces} />
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="resetAllOptions">
             <dl>
               <dt>${browser.i18n.getMessage('option_resetAllOptions_title')}</dt>
               <dd>${browser.i18n.getMessage('option_resetAllOptions_description')}</dd>
             </dl>
           </label>
-          <div><button id="resetAllOptions" class="Button transition-all sans-serif v-mid fw5 nowrap lh-copy bn br1 pa2 pointer focus-outline white bg-red white" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
+          <div class="self-center-ns"><button id="resetAllOptions" class="Button transition-all sans-serif v-mid fw5 nowrap lh-copy bn br1 pa2 pointer focus-outline white bg-red white" onclick=${onOptionsReset}>${browser.i18n.getMessage('option_resetAllOptions_title')}</button></div>
         </div>
       </fieldset>
     </form>
diff --git a/add-on/src/options/forms/file-import-form.js b/add-on/src/options/forms/file-import-form.js
index c7a92f0cc..e406c9106 100644
--- a/add-on/src/options/forms/file-import-form.js
+++ b/add-on/src/options/forms/file-import-form.js
@@ -11,9 +11,9 @@ function fileImportForm ({ importDir, openViaWebUI, preloadAtPublicGateway, onOp
   const onPreloadAtPublicGatewayChange = onOptionChange('preloadAtPublicGateway')
   return html`
     <form>
-      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
-        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_fileImport')}</h2>
-        <div>
+      <fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_fileImport')}</h2>
+        <div class="flex-row-ns pb0-ns">
           <label for="importDir">
             <dl>
               <dt>${browser.i18n.getMessage('option_importDir_title')}</dt>
@@ -26,7 +26,7 @@ function fileImportForm ({ importDir, openViaWebUI, preloadAtPublicGateway, onOp
             </dl>
           </label>
           <input
-            class="bg-white navy"
+            class="bg-white navy self-center-ns"
             id="importDir"
             type="text"
             pattern="^\/(.*)"
@@ -34,23 +34,23 @@ function fileImportForm ({ importDir, openViaWebUI, preloadAtPublicGateway, onOp
             onchange=${onImportDirChange}
             value=${importDir} />
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="openViaWebUI">
             <dl>
               <dt>${browser.i18n.getMessage('option_openViaWebUI_title')}</dt>
               <dd>${browser.i18n.getMessage('option_openViaWebUI_description')}</dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'openViaWebUI', checked: openViaWebUI, onchange: onOpenViaWebUIChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'openViaWebUI', checked: openViaWebUI, onchange: onOpenViaWebUIChange })}</div>
         </div>
-        <div>
+        <div class="flex-row-ns pb0-ns">
           <label for="preloadAtPublicGateway">
             <dl>
               <dt>${browser.i18n.getMessage('option_preloadAtPublicGateway_title')}</dt>
               <dd>${browser.i18n.getMessage('option_preloadAtPublicGateway_description')}</dd>
             </dl>
           </label>
-          <div>${switchToggle({ id: 'preloadAtPublicGateway', checked: preloadAtPublicGateway, onchange: onPreloadAtPublicGatewayChange })}</div>
+          <div class="self-center-ns">${switchToggle({ id: 'preloadAtPublicGateway', checked: preloadAtPublicGateway, onchange: onPreloadAtPublicGatewayChange })}</div>
         </div>
       </fieldset>
     </form>
diff --git a/add-on/src/options/forms/gateways-form.js b/add-on/src/options/forms/gateways-form.js
index feddfc61a..e48c2afb8 100644
--- a/add-on/src/options/forms/gateways-form.js
+++ b/add-on/src/options/forms/gateways-form.js
@@ -33,9 +33,9 @@ function gatewaysForm ({
 
   return html`
     <form>
-      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
-        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_gateways')}</h2>
-          <div>
+      <fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_gateways')}</h2>
+          <div class="flex-row-ns pb0-ns">
             <label for="publicGatewayUrl">
               <dl>
                 <dt>${browser.i18n.getMessage('option_publicGatewayUrl_title')}</dt>
@@ -43,7 +43,7 @@ function gatewaysForm ({
               </dl>
             </label>
             <input
-              class="bg-white navy"
+              class="bg-white navy self-center-ns"
               id="publicGatewayUrl"
               type="url"
               inputmode="url"
@@ -54,7 +54,7 @@ function gatewaysForm ({
               onchange=${onPublicGatewayUrlChange}
               value=${publicGatewayUrl} />
           </div>
-          <div>
+          <div class="flex-row-ns pb0-ns">
             <label for="publicSubdomainGatewayUrl">
               <dl>
                 <dt>${browser.i18n.getMessage('option_publicSubdomainGatewayUrl_title')}</dt>
@@ -67,7 +67,7 @@ function gatewaysForm ({
               </dl>
             </label>
             <input
-              class="bg-white navy"
+              class="bg-white navy self-center-ns"
               id="publicSubdomainGatewayUrl"
               type="url"
               inputmode="url"
@@ -79,7 +79,7 @@ function gatewaysForm ({
               value=${publicSubdomainGatewayUrl} />
           </div>
           ${supportRedirectToCustomGateway && allowChangeOfCustomGateway ? html`
-            <div>
+            <div class="flex-row-ns pb0-ns">
               <label for="customGatewayUrl">
                 <dl>
                   <dt>${browser.i18n.getMessage('option_customGatewayUrl_title')}</dt>
@@ -89,7 +89,7 @@ function gatewaysForm ({
                 </dl>
               </label>
               <input
-                class="bg-white navy"
+                class="bg-white navy self-center-ns"
                 id="customGatewayUrl"
                 type="url"
                 inputmode="url"
@@ -104,18 +104,18 @@ function gatewaysForm ({
             </div>
           ` : null}
           ${supportRedirectToCustomGateway ? html`
-            <div>
+            <div class="flex-row-ns pb0-ns">
               <label for="useCustomGateway">
                 <dl>
                   <dt>${browser.i18n.getMessage('option_useCustomGateway_title')}</dt>
                   <dd>${browser.i18n.getMessage('option_useCustomGateway_description')}</dd>
                 </dl>
               </label>
-              <div>${switchToggle({ id: 'useCustomGateway', checked: useCustomGateway, onchange: onUseCustomGatewayChange })}</div>
+              <div class="self-center-ns">${switchToggle({ id: 'useCustomGateway', checked: useCustomGateway, onchange: onUseCustomGatewayChange })}</div>
             </div>
           ` : null}
           ${supportRedirectToCustomGateway ? html`
-            <div>
+            <div class="flex-row-ns pb0-ns">
               <label for="useSubdomains">
                 <dl>
                   <dt>${browser.i18n.getMessage('option_useSubdomains_title')}</dt>
@@ -127,11 +127,11 @@ function gatewaysForm ({
                   </dd>
                 </dl>
               </label>
-              <div>${switchToggle({ id: 'useSubdomains', checked: useSubdomains, onchange: onUseSubdomainProxyChange })}</div>
+              <div class="self-center-ns">${switchToggle({ id: 'useSubdomains', checked: useSubdomains, onchange: onUseSubdomainProxyChange })}</div>
             </div>
           ` : null}
           ${supportRedirectToCustomGateway ? html`
-            <div>
+            <div class="flex-row-ns pb0-ns">
               <label for="noIntegrationsHostnames">
                 <dl>
                   <dt>${browser.i18n.getMessage('option_noIntegrationsHostnames_title')}</dt>
@@ -139,11 +139,11 @@ function gatewaysForm ({
                 </dl>
               </label>
               <textarea
-                class="bg-white navy"
+                class="bg-white navy self-center-ns"
                 id="noIntegrationsHostnames"
                 spellcheck="false"
                 onchange=${onNoIntegrationsHostnamesChange}
-                rows="4"
+                rows="1"
                 >${hostArrayToText(noIntegrationsHostnames)}</textarea>
             </div>
           ` : null}
diff --git a/add-on/src/options/forms/global-toggle-form.js b/add-on/src/options/forms/global-toggle-form.js
index 45c58b32a..2acd466da 100644
--- a/add-on/src/options/forms/global-toggle-form.js
+++ b/add-on/src/options/forms/global-toggle-form.js
@@ -8,7 +8,7 @@ const switchToggle = require('../../pages/components/switch-toggle')
 function globalToggleForm ({ active, onOptionChange }) {
   const toggle = onOptionChange('active')
   return html`
-    <form class="db mb3 bg-aqua-muted charcoal">
+    <form class="db b mb3 bg-aqua-muted charcoal">
       <label for="active" class="dib pa3 flex items-center pointer ${!active ? 'charcoal bg-gray-muted br2' : ''}">
         ${switchToggle({ id: 'active', checked: active, onchange: toggle, style: 'mr3' })}
         ${browser.i18n.getMessage('panel_headerActiveToggleTitle')}
diff --git a/add-on/src/options/forms/ipfs-node-form.js b/add-on/src/options/forms/ipfs-node-form.js
index b29a82823..38cd00586 100644
--- a/add-on/src/options/forms/ipfs-node-form.js
+++ b/add-on/src/options/forms/ipfs-node-form.js
@@ -11,9 +11,9 @@ function ipfsNodeForm ({ ipfsNodeType, ipfsNodeConfig, onOptionChange }) {
   const withChromeSockets = hasChromeSocketsForTcp()
   return html`
     <form>
-      <fieldset class="mb3 pa4 bg-snow-muted charcoal">
-        <h2 class="ttu tracked f6 fw4 teal mt0 mb3">${browser.i18n.getMessage('option_header_nodeType')}</h2>
-        <div>
+      <fieldset class="mb3 pa1 pa4-ns pa3 bg-snow-muted charcoal">
+        <h2 class="ttu tracked f6 fw4 teal mt0-ns mb3-ns mb1 mt2 ">${browser.i18n.getMessage('option_header_nodeType')}</h2>
+        <div class="flex-row-ns pb0-ns">
           <label for="ipfsNodeType">
             <dl>
               <dt>${browser.i18n.getMessage('option_ipfsNodeType_title')}</dt>
@@ -26,7 +26,7 @@ function ipfsNodeForm ({ ipfsNodeType, ipfsNodeConfig, onOptionChange }) {
               </dd>
             </dl>
           </label>
-          <select id="ipfsNodeType" name='ipfsNodeType' onchange=${onIpfsNodeTypeChange}>
+          <select id="ipfsNodeType" name='ipfsNodeType' class="self-center-ns bg-white" onchange=${onIpfsNodeTypeChange}>
             <option
               value='external'
               selected=${ipfsNodeType === 'external'}>
@@ -48,7 +48,7 @@ function ipfsNodeForm ({ ipfsNodeType, ipfsNodeConfig, onOptionChange }) {
           </select>
         </div>
         ${ipfsNodeType.startsWith('embedded') ? html`
-          <div>
+          <div class="flex-row-ns pb0-ns">
             <label for="ipfsNodeConfig">
               <dl>
                 <dt>${browser.i18n.getMessage('option_ipfsNodeConfig_title')}</dt>
diff --git a/add-on/src/options/options.css b/add-on/src/options/options.css
index 7b6e189cc..ec2b7d2af 100644
--- a/add-on/src/options/options.css
+++ b/add-on/src/options/options.css
@@ -6,16 +6,9 @@ header {
   border-color: #69c4cd;
   text-transform: uppercase;
 }
-.ipfs-logo {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 553 235.3'%3E%3Cdefs%3E%3C/defs%3E%3Cpath fill='%23ffffff' d='M239 63h17.8v105H239V63zm35.6 0h36.3c7.9 0 14.5.9 19.6 2.6s9.2 4.1 12.1 7.1a24.45 24.45 0 0 1 6.2 10.2 40.75 40.75 0 0 1 1.8 12.1 45.69 45.69 0 0 1-1.8 12.9 26.58 26.58 0 0 1-6.2 10.8 30.59 30.59 0 0 1-12.1 7.3c-5.1 1.8-11.5 2.7-19.3 2.7h-19.1V168h-17.5V63zm36.2 51a38.37 38.37 0 0 0 11.1-1.3 16.3 16.3 0 0 0 6.8-3.7 13.34 13.34 0 0 0 3.5-5.8 29.75 29.75 0 0 0 1-7.6 25.68 25.68 0 0 0-1-7.7 12 12 0 0 0-3.6-5.5 17.15 17.15 0 0 0-6.9-3.4 41.58 41.58 0 0 0-10.9-1.2h-18.5V114h18.5zm119.9-51v15.3h-49.2V108h46.3v15.4h-46.3V168h-17.8V63h67zm26.2 72.9c.8 6.9 3.3 11.9 7.4 15s10.4 4.7 18.6 4.7a32.61 32.61 0 0 0 10.1-1.3 20.52 20.52 0 0 0 6.6-3.5 12 12 0 0 0 3.5-5.2 19.08 19.08 0 0 0 1-6.4 16.14 16.14 0 0 0-.7-4.9 12.87 12.87 0 0 0-2.6-4.5 16.59 16.59 0 0 0-5.1-3.6 35 35 0 0 0-8.2-2.4l-13.4-2.5a89.76 89.76 0 0 1-14.1-3.7 33.51 33.51 0 0 1-10.4-5.8 22.28 22.28 0 0 1-6.3-8.8 34.1 34.1 0 0 1-2.1-12.7 26 26 0 0 1 11.3-22.4 36.35 36.35 0 0 1 12.6-5.6 65.89 65.89 0 0 1 15.8-1.8c7.2 0 13.3.8 18.2 2.5a34.46 34.46 0 0 1 11.9 6.5 28.21 28.21 0 0 1 6.9 9.3 42.1 42.1 0 0 1 3.2 11l-16.8 2.6c-1.4-5.9-3.7-10.2-7.1-13.1s-8.7-4.3-16.1-4.3a43.9 43.9 0 0 0-10.5 1.1 19.47 19.47 0 0 0-6.8 3.1 11.63 11.63 0 0 0-3.7 4.6 14.08 14.08 0 0 0-1.1 5.4c0 4.6 1.2 8 3.7 10.3s6.9 4 13.2 5.3l14.5 2.8c11.1 2.1 19.2 5.6 24.4 10.5s7.8 12.1 7.8 21.4a31.37 31.37 0 0 1-2.4 12.3 25.27 25.27 0 0 1-7.4 9.8 36.58 36.58 0 0 1-12.4 6.6 56 56 0 0 1-17.3 2.4c-13.4 0-24-2.8-31.6-8.5s-11.9-14.4-12.6-26.2h18z'/%3E%3Cpath fill='%23469ea2' d='M30.3 164l84 48.5 84-48.5V67l-84-48.5-84 48.5v97z'/%3E%3Cpath fill='%236acad1' d='M105.7 30.1l-61 35.2a18.19 18.19 0 0 1 0 3.3l60.9 35.2a14.55 14.55 0 0 1 17.3 0l60.9-35.2a18.19 18.19 0 0 1 0-3.3L123 30.1a14.55 14.55 0 0 1-17.3 0zm84 48.2l-61 35.6a14.73 14.73 0 0 1-8.6 15l.1 70a15.57 15.57 0 0 1 2.8 1.6l60.9-35.2a14.73 14.73 0 0 1 8.6-15V79.9a20 20 0 0 1-2.8-1.6zm-150.8.4a15.57 15.57 0 0 1-2.8 1.6v70.4a14.38 14.38 0 0 1 8.6 15l60.9 35.2a15.57 15.57 0 0 1 2.8-1.6v-70.4a14.38 14.38 0 0 1-8.6-15L38.9 78.7z'/%3E%3Cpath fill='%23469ea2' d='M114.3 29l75.1 43.4v86.7l-75.1 43.4-75.1-43.4V72.3L114.3 29m0-10.3l-84 48.5v97l84 48.5 84-48.5v-97l-84-48.5z'/%3E%3Cpath fill='%23469ea2' d='M114.9 132h-1.2A15.66 15.66 0 0 1 98 116.3v-1.2a15.66 15.66 0 0 1 15.7-15.7h1.2a15.66 15.66 0 0 1 15.7 15.7v1.2a15.66 15.66 0 0 1-15.7 15.7zm0 64.5h-1.2a15.65 15.65 0 0 0-13.7 8l14.3 8.2 14.3-8.2a15.65 15.65 0 0 0-13.7-8zm83.5-48.5h-.6a15.66 15.66 0 0 0-15.7 15.7v1.2a15.13 15.13 0 0 0 2 7.6l14.3-8.3V148zm-14.3-89a15.4 15.4 0 0 0-2 7.6v1.2a15.66 15.66 0 0 0 15.7 15.7h.6V67.2L184.1 59zm-69.8-40.3L100 26.9a15.73 15.73 0 0 0 13.7 8.1h1.2a15.65 15.65 0 0 0 13.7-8l-14.3-8.3zM44.6 58.9l-14.3 8.3v16.3h.6a15.66 15.66 0 0 0 15.7-15.7v-1.2a16.63 16.63 0 0 0-2-7.7zM30.9 148h-.6v16.2l14.3 8.3a15.4 15.4 0 0 0 2-7.6v-1.2A15.66 15.66 0 0 0 30.9 148z'/%3E%3Cpath fill='%23083b54' fill-opacity='0.15' d='M114.3 213.2v-97.1l-84-48.5v97.1z'/%3E%3Cpath fill='%23083b54' fill-opacity='0.05' d='M198.4 163.8v-97l-84 48.5v97.1z'/%3E%3C/svg%3E%0A");
-	background-repeat: no-repeat;
-	background-size: contain
-}
-#page-header-logo {
-	height: 3.2em;
-	margin-right: 2em;
-  margin-top: 0.25em;
-	width: 7.15em
+#header-logo {
+  height: 50px;
+  width: 117.5px;
 }
 form * {
   font-family: Inter,system-ui,sans-serif;
@@ -28,15 +21,13 @@ fieldset {
 }
 fieldset > div {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
+  padding-bottom: 1.5em;
 }
 fieldset > div + div {
   border-top: 1px solid #ccc;
 }
-fieldset > div > * {
-  align-self: center;
-}
 label {
   flex: 1;
 }
diff --git a/add-on/src/options/options.html b/add-on/src/options/options.html
index f49fb4cc0..2f87728f1 100644
--- a/add-on/src/options/options.html
+++ b/add-on/src/options/options.html
@@ -7,11 +7,11 @@
     <link rel="stylesheet" href="options.css">
   </head>
   <body>
-    <header class="bg-navy bb bw3 flex justify-between items-center ma0 pa3">
-      <div id="page-header-logo" class="ipfs-logo">&nbsp;</div>
-      <h1 class="montserrat fw2 aqua ma0 pa0">
-        Companion Preferences
-      </h1>
+    <header class="flex-l items-center pa3 bg-navy bb bw3 border-aqua tc tl-l justify-between">
+      <div class="flex-none v-mid">
+        <svg alt="IPFS" id="header-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 553 235.3"><path d="M239 63h17.8v105H239V63zm35.6 0h36.3c7.9 0 14.5.9 19.6 2.6s9.2 4.1 12.1 7.1a24.45 24.45 0 016.2 10.2 40.75 40.75 0 011.8 12.1 45.69 45.69 0 01-1.8 12.9 26.58 26.58 0 01-6.2 10.8 30.59 30.59 0 01-12.1 7.3c-5.1 1.8-11.5 2.7-19.3 2.7h-19.1V168h-17.5V63zm36.2 51a38.37 38.37 0 0011.1-1.3 16.3 16.3 0 006.8-3.7 13.34 13.34 0 003.5-5.8 29.75 29.75 0 001-7.6 25.68 25.68 0 00-1-7.7 12 12 0 00-3.6-5.5 17.15 17.15 0 00-6.9-3.4 41.58 41.58 0 00-10.9-1.2h-18.5V114h18.5zm119.9-51v15.3h-49.2V108h46.3v15.4h-46.3V168h-17.8V63h67zm26.2 72.9c.8 6.9 3.3 11.9 7.4 15s10.4 4.7 18.6 4.7a32.61 32.61 0 0010.1-1.3 20.52 20.52 0 006.6-3.5 12 12 0 003.5-5.2 19.08 19.08 0 001-6.4 16.14 16.14 0 00-.7-4.9 12.87 12.87 0 00-2.6-4.5 16.59 16.59 0 00-5.1-3.6 35 35 0 00-8.2-2.4l-13.4-2.5a89.76 89.76 0 01-14.1-3.7 33.51 33.51 0 01-10.4-5.8 22.28 22.28 0 01-6.3-8.8 34.1 34.1 0 01-2.1-12.7 26 26 0 0111.3-22.4 36.35 36.35 0 0112.6-5.6 65.89 65.89 0 0115.8-1.8c7.2 0 13.3.8 18.2 2.5a34.46 34.46 0 0111.9 6.5 28.21 28.21 0 016.9 9.3 42.1 42.1 0 013.2 11l-16.8 2.6c-1.4-5.9-3.7-10.2-7.1-13.1s-8.7-4.3-16.1-4.3a43.9 43.9 0 00-10.5 1.1 19.47 19.47 0 00-6.8 3.1 11.63 11.63 0 00-3.7 4.6 14.08 14.08 0 00-1.1 5.4c0 4.6 1.2 8 3.7 10.3s6.9 4 13.2 5.3l14.5 2.8c11.1 2.1 19.2 5.6 24.4 10.5s7.8 12.1 7.8 21.4a31.37 31.37 0 01-2.4 12.3 25.27 25.27 0 01-7.4 9.8 36.58 36.58 0 01-12.4 6.6 56 56 0 01-17.3 2.4c-13.4 0-24-2.8-31.6-8.5s-11.9-14.4-12.6-26.2h18z" fill="#fff"/><path fill="#469ea2" d="M30.3 164l84 48.5 84-48.5V67l-84-48.5-84 48.5v97z"/><path d="M105.7 30.1l-61 35.2a18.19 18.19 0 010 3.3l60.9 35.2a14.55 14.55 0 0117.3 0l60.9-35.2a18.19 18.19 0 010-3.3L123 30.1a14.55 14.55 0 01-17.3 0zm84 48.2l-61 35.6a14.73 14.73 0 01-8.6 15l.1 70a15.57 15.57 0 012.8 1.6l60.9-35.2a14.73 14.73 0 018.6-15V79.9a20 20 0 01-2.8-1.6zm-150.8.4a15.57 15.57 0 01-2.8 1.6v70.4a14.38 14.38 0 018.6 15l60.9 35.2a15.57 15.57 0 012.8-1.6v-70.4a14.38 14.38 0 01-8.6-15L38.9 78.7z" fill="#6acad1"/><path fill="#469ea2" d="M114.3 29l75.1 43.4v86.7l-75.1 43.4-75.1-43.4V72.3L114.3 29m0-10.3l-84 48.5v97l84 48.5 84-48.5v-97l-84-48.5z"/><path fill="#469ea2" d="M114.9 132h-1.2A15.66 15.66 0 0198 116.3v-1.2a15.66 15.66 0 0115.7-15.7h1.2a15.66 15.66 0 0115.7 15.7v1.2a15.66 15.66 0 01-15.7 15.7zm0 64.5h-1.2a15.65 15.65 0 00-13.7 8l14.3 8.2 14.3-8.2a15.65 15.65 0 00-13.7-8zm83.5-48.5h-.6a15.66 15.66 0 00-15.7 15.7v1.2a15.13 15.13 0 002 7.6l14.3-8.3V148zm-14.3-89a15.4 15.4 0 00-2 7.6v1.2a15.66 15.66 0 0015.7 15.7h.6V67.2L184.1 59zm-69.8-40.3L100 26.9a15.73 15.73 0 0013.7 8.1h1.2a15.65 15.65 0 0013.7-8l-14.3-8.3zM44.6 58.9l-14.3 8.3v16.3h.6a15.66 15.66 0 0015.7-15.7v-1.2a16.63 16.63 0 00-2-7.7zM30.9 148h-.6v16.2l14.3 8.3a15.4 15.4 0 002-7.6v-1.2A15.66 15.66 0 0030.9 148z"/><path d="M114.3 213.2v-97.1l-84-48.5v97.1z" fill-opacity=".15" fill="#083b54"/><path d="M198.4 163.8v-97l-84 48.5v97.1z" fill-opacity=".05" fill="#083b54"/></svg>
+      </div>
+      <h1 id="header-text" class="pt2 pt0-l ma0 f3 fw2 montserrat aqua ttu flex-none no-select"></h1>
     </header>
     <main class="bg-white pv3 pa3 pa4-l">
         <div data-id="SettingsPage" class="mw9 center">
diff --git a/add-on/src/options/options.js b/add-on/src/options/options.js
index a717082e6..842ad7380 100644
--- a/add-on/src/options/options.js
+++ b/add-on/src/options/options.js
@@ -1,6 +1,7 @@
 'use strict'
 /* eslint-env browser, webextensions */
 
+const { i18n } = require('webextension-polyfill')
 const choo = require('choo')
 const optionsPage = require('./page')
 const optionsStore = require('./store')
@@ -15,3 +16,8 @@ app.route('*', optionsPage)
 
 // Start the application and render it to the given querySelector
 app.mount('#root')
+
+// Set header translation
+const headerText = i18n.getMessage('option_page_header')
+document.getElementById('header-text').innerText = headerText
+document.title = headerText