diff --git a/accessibility-checker-extension/src/ts/devtools/DevToolsPanelApp.tsx b/accessibility-checker-extension/src/ts/devtools/DevToolsPanelApp.tsx
index 588ea5d85..acd66be0b 100644
--- a/accessibility-checker-extension/src/ts/devtools/DevToolsPanelApp.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/DevToolsPanelApp.tsx
@@ -650,7 +650,7 @@ export default class DevToolsPanelApp extends React.Component<IPanelProps, IPane
                             focusedViewText={this.state.focusedViewText}
                             getCurrentSelectedElement={this.getCurrentSelectedElement.bind(this)}
                         />
-                        <div style={{ marginTop: "7rem", height: "calc(100% - 7rem)" }}>
+                        <div style={{ marginTop: "8rem", height: "calc(100% - 8rem)" }}>
                             <div role="region" aria-label="issue list" className="issueList">
                                 {this.state.numScanning > 0 ? <Loading /> : <></>}
                                 {this.state.report && <Report
diff --git a/accessibility-checker-extension/src/ts/devtools/Header.tsx b/accessibility-checker-extension/src/ts/devtools/Header.tsx
index 31804f338..cd86a5b0a 100644
--- a/accessibility-checker-extension/src/ts/devtools/Header.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/Header.tsx
@@ -22,7 +22,7 @@ import {
     Button, Checkbox, ContentSwitcher, Switch, Tooltip
 } from 'carbon-components-react';
 import { settings } from 'carbon-components';
-import { Reset16, ReportData16, Renew16 } from '@carbon/icons-react';
+import { ReportData16, Renew16 } from '@carbon/icons-react';
 import { IArchiveDefinition } from '../background/helper/engineCache';
 import OptionUtil from '../util/optionUtil';
 
@@ -121,7 +121,7 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
             noScan = true;
         }
 
-        let isLatestArchive = this.isLatestArchive(this.props.selectedArchive, this.props.archives);
+        // let isLatestArchive = this.isLatestArchive(this.props.selectedArchive, this.props.archives);
 
         if (!counts) {
             counts = {
@@ -157,45 +157,25 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
             {/* Content for Checker Tab */}
             {this.props.layout === "sub" ?
                 <div className="bx--row" style={{ marginTop: '10px' }}>
-                    <div className="bx--col-md-2" style={{ display: 'flex', alignContent: 'center' }}>
+                    <div className="bx--col-md-2 bx--col-sm-2" style={{ display: 'flex', alignContent: 'center' }}>
                         <Button disabled={this.props.scanning} renderIcon={Renew16} onClick={this.props.startScan.bind(this)} size="small" className="scan-button">Scan</Button>
-                        {isLatestArchive ? "" : (
-                            <Tooltip>
-                                <p id="tooltip-body">
-                                    You are using a rule set from {OptionUtil.getRuleSetDate(this.props.selectedArchive, this.props.archives)}. The latest rule set is {OptionUtil.getRuleSetDate('latest', this.props.archives)}
-                                </p>
-                                <div className={`${prefix}--tooltip__footer`}>
-                                    <a
-                                        href={chrome.runtime.getURL("options.html")}
-                                        target="_blank"
-                                        className={`${prefix}--link`}
-                                    >
-                                        Change rule set
-                                    </a>
-                                </div>
-                            </Tooltip>
-                        )}
-                    </div>
-                    <div className="bx--col-md-2" style={{ height: "28px" }}>
-
-                    </div>
-
-                    <div className="bx--col-md-1" style={{paddingRight:0}}>
-                        <div className="headerTools" style={{ display: "flex", justifyContent: "flex-end" }}>
-                            <Button
-                                disabled={!this.props.counts}
-                                onClick={this.props.collapseAll}
-                                className="settingsButtons" 
-                                size="small" 
-                                hasIconOnly 
-                                kind="ghost" 
-                                tooltipAlignment="center" 
-                                tooltipPosition="top"
-                                iconDescription="Reset" 
-                                type="button"
-                            >
-                                <Reset16/>
-                            </Button>
+                            {/* {isLatestArchive ? "" : ( */}
+                                    <Tooltip>
+                                        <p id="tooltip-body">
+                                            You are using a rule set from {OptionUtil.getRuleSetDate(this.props.selectedArchive, this.props.archives)}. The latest rule set is {OptionUtil.getRuleSetDate('latest', this.props.archives)}
+                                        </p>
+                                        <div className={`${prefix}--tooltip__footer`}>
+                                            <a
+                                                href={chrome.runtime.getURL("options.html")}
+                                                target="_blank"
+                                                className={`${prefix}--link`}
+                                            >
+                                                Change rule set
+                                            </a>
+                                        </div>
+                                    </Tooltip>
+                            {/* )} */}
+                            <span className="reportButton">
                             <Button
                                 disabled={!this.props.counts}
                                 onClick={this.props.reportHandler}
@@ -210,10 +190,11 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
                             >
                                 <ReportData16/>
                             </Button>
-                        </div>
+                            </span>
                     </div>
+                    <div className="bx--col-md-3 bx--col-sm-0"> </div>
 
-                    <div className="bx--col-md-3">
+                    <div className="bx--col-md-3 bx--col-sm-2">
                         <ContentSwitcher data-tip data-for="focusViewTip"
                             // title="Focus View"
                             style={{height: "30px"}}
@@ -251,9 +232,9 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
                 // Content for the Assessment Tab
                 :
                 <div className="bx--row" style={{ marginTop: '10px' }}>
-                    <div className="bx--col-sm-2" style={{ display: 'flex', alignContent: 'center' }}>
+                    <div className="bx--col-sm-3" style={{ display: 'flex', alignContent: 'center' }}>
                         <Button disabled={this.props.scanning} renderIcon={Renew16} onClick={this.props.startScan.bind(this)} size="small" className="scan-button">Scan</Button>
-                        {isLatestArchive ? "" : (
+                        {/* {isLatestArchive ? "" : ( */}
                             <Tooltip>
                                 <p id="tooltip-body">
                                     You are using a rule set from {OptionUtil.getRuleSetDate(this.props.selectedArchive, this.props.archives)}. The latest rule set is {OptionUtil.getRuleSetDate('latest', this.props.archives)}
@@ -268,26 +249,12 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
                                     </a>
                                 </div>
                             </Tooltip>
-                        )}
+                        {/* )} */}
                     </div>
-                    <div className="bx--col-sm-2" style={{ position: "relative" }}>
+                    <div className="bx--col-sm-1" style={{ position: "relative" }}>
                         <div className="headerTools" style={{ display: "flex", justifyContent: "flex-end" }}>
                             <div style={{ width: 210, paddingRight: "16px" }}>
                             </div>
-                            <Button
-                                disabled={!this.props.counts}
-                                onClick={this.props.collapseAll}
-                                className="settingsButtons" 
-                                size="small" 
-                                hasIconOnly 
-                                kind="ghost"
-                                tooltipAlignment="center" 
-                                tooltipPosition="top"
-                                iconDescription="Reset" 
-                                type="button"
-                            >
-                                <Reset16/>
-                            </Button>
                             <Button
                                 disabled={!this.props.counts}
                                 onClick={this.props.reportHandler}
diff --git a/accessibility-checker-extension/src/ts/devtools/Report.tsx b/accessibility-checker-extension/src/ts/devtools/Report.tsx
index 613370bd9..a96cd8d91 100644
--- a/accessibility-checker-extension/src/ts/devtools/Report.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/Report.tsx
@@ -169,7 +169,7 @@ export default class Report extends React.Component<IReportProps, IReportState>
         }
 
         return <React.Fragment>
-            <div className="bx--grid" style={{paddingLeft:"1rem", marginTop:"6px"}}>
+            <div className="bx--grid" style={{paddingLeft:"1rem"}}>
                 <div className="bx--row">
                     <div className="bx--col-sm-4">
                         <Tabs
diff --git a/accessibility-checker-extension/src/ts/options/OptionsApp.tsx b/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
index 82bf49b13..e59d09484 100644
--- a/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
+++ b/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
@@ -289,7 +289,7 @@ class OptionsApp extends React.Component<{}, OptionsAppState> {
                       kind="success"
                       lowContrast={true}
                       title="Success"
-                      subtitle=" Your changes have been saved"
+                      subtitle=" Your change has been saved and will take effect after you close and reopen the developer tools."
                       className=""
                       iconDescription="close notification"
                       onCloseButtonClick={() => {
diff --git a/accessibility-checker-extension/src/ts/styles/panel.scss b/accessibility-checker-extension/src/ts/styles/panel.scss
index 934184989..2bbac196f 100644
--- a/accessibility-checker-extension/src/ts/styles/panel.scss
+++ b/accessibility-checker-extension/src/ts/styles/panel.scss
@@ -68,6 +68,26 @@ $feature-flags: (
         }
     }
 
+    .reportButton {
+        button.bx--btn {
+            color: black;
+            background-color: white;
+        }
+
+        button.bx--btn.bx--btn--disabled {
+            color: #c6c6c6;
+            border-width: 0px;
+            background-color: white;
+        }
+
+        button.bx--btn.bx--btn--disabled:hover {
+            color: #c6c6c6;
+            svg {
+                fill: #c6c6c6;
+            }
+        }
+    }
+
     .filterButtons {
         button .bx--assistive-text {
             top: -1.5rem;
diff --git a/accessibility-checker-extension/src/ts/usingAC/UsingACApp.tsx b/accessibility-checker-extension/src/ts/usingAC/UsingACApp.tsx
index abbb52032..ec19f2865 100644
--- a/accessibility-checker-extension/src/ts/usingAC/UsingACApp.tsx
+++ b/accessibility-checker-extension/src/ts/usingAC/UsingACApp.tsx
@@ -331,6 +331,9 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
               and each update has a date of deployment. If you need to replicate
               an earlier test, choose the deployment date of the original test.
             </p>
+            <p>
+              After changing options, close and reopen the developer tools for the change to take effect.
+            </p>
             <p>
               Follow the steps below to open the Accessibility Checker options
               page:
@@ -402,7 +405,8 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
             </ul>
             <p>
               Select the <strong>'Save'</strong> button to keep the changes or
-              the <strong>'Reset'</strong> button to discard changes.
+              the <strong>'Reset'</strong> button to discard changes. 
+              Close and reopen the developer tools for the change to take effect.
             </p>
 
             <h3 id="ruleset">5.2 Rule set</h3>
@@ -443,6 +447,10 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                 </p>
               </li>
             </ul>
+            <p>
+              After making a change, select the <strong>'Save'</strong> button, then
+              close and reopen the developer tools for the change to take effect.
+            </p>
 
             <h2 id="usage">6. Usage</h2>
             <p>