diff --git a/components/next_steps_view/next_steps_view.tsx b/components/next_steps_view/next_steps_view.tsx
index a10554a28a1d..5d8df023dd35 100644
--- a/components/next_steps_view/next_steps_view.tsx
+++ b/components/next_steps_view/next_steps_view.tsx
@@ -89,6 +89,10 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
         };
     }
 
+    showFinalScreenNoAnimation = () => {
+        this.setState({showFinalScreen: true});
+    }
+
     showFinalScreen = () => {
         this.setState({showFinalScreen: true, animating: true});
     }
@@ -208,6 +212,11 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
     renderMainBody = () => {
         const renderedSteps = this.props.steps.map(this.renderStep);
 
+        // If all steps are complete, don't render this and skip to the tips screen
+        if (this.getIncompleteStep() === null) {
+            this.showFinalScreenNoAnimation();
+            return null;
+        }
         return (
             <div
                 className={classNames('NextStepsView__viewWrapper NextStepsView__mainView', {
diff --git a/components/sidebar/sidebar_next_steps/sidebar_next_steps.scss b/components/sidebar/sidebar_next_steps/sidebar_next_steps.scss
index 8da96addc155..f359d1c9f795 100644
--- a/components/sidebar/sidebar_next_steps/sidebar_next_steps.scss
+++ b/components/sidebar/sidebar_next_steps/sidebar_next_steps.scss
@@ -5,6 +5,11 @@
     align-self: flex-end;
     position: relative;
     background-color: var(--sidebar-bg);
+    cursor: pointer;
+
+    &:hover:not(.active) {
+        background-color: rgba(var(--button-color-rgb), 0.08);
+    }
 
     &.active {
         background-color: var(--sidebar-text-hover-bg);
diff --git a/components/sidebar/sidebar_next_steps/sidebar_next_steps.tsx b/components/sidebar/sidebar_next_steps/sidebar_next_steps.tsx
index 1e46a3efc31b..ae27dd72acb1 100644
--- a/components/sidebar/sidebar_next_steps/sidebar_next_steps.tsx
+++ b/components/sidebar/sidebar_next_steps/sidebar_next_steps.tsx
@@ -47,7 +47,8 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
         };
     }
 
-    closeNextSteps = () => {
+    closeNextSteps = (event: React.SyntheticEvent) => {
+        event.stopPropagation();
         const screenTitle = this.props.showNextSteps ?
             localizeMessage('sidebar_next_steps.gettingStarted', 'Getting Started') :
             localizeMessage('sidebar_next_steps.tipsAndNextSteps', 'Tips & Next Steps');
@@ -63,6 +64,10 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
         });
     }
 
+    showNextSteps = () => {
+        this.props.actions.setShowNextStepsView(true);
+    }
+
     onCloseModal = () => {
         this.props.actions.closeModal(ModalIdentifiers.REMOVE_NEXT_STEPS_MODAL);
     }
@@ -85,10 +90,6 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
             return null;
         }
 
-        if (!this.props.active && !this.props.showNextSteps) {
-            return null;
-        }
-
         const total = this.props.steps.length;
         const complete = this.props.preferences.filter((pref) => pref.name !== RecommendedNextSteps.HIDE && pref.value === 'true').length;
 
@@ -125,17 +126,15 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
                 />
             );
         }
-
         return (
             <div
                 className={classNames('SidebarNextSteps', {
                     active: this.props.active,
                 })}
+                onClick={this.showNextSteps}
             >
                 <div className='SidebarNextSteps__top'>
-                    <span>
-                        {header}
-                    </span>
+                    <span>{header}</span>
                     <button
                         className='SidebarNextSteps__close'
                         onClick={this.closeNextSteps}
@@ -144,18 +143,17 @@ export default class SidebarNextSteps extends React.PureComponent<Props, State>
                     </button>
                 </div>
                 <div className='SidebarNextSteps__middle'>
-                    <span>
-                        {middleSection}
-                    </span>
+                    <span>{middleSection}</span>
                 </div>
-                {this.props.showNextSteps &&
-                <div className='SidebarNextSteps__progressBar'>
-                    <ProgressBar
-                        current={complete}
-                        total={total}
-                        basePercentage={4}
-                    />
-                </div>}
+                {this.props.showNextSteps && (
+                    <div className='SidebarNextSteps__progressBar'>
+                        <ProgressBar
+                            current={complete}
+                            total={total}
+                            basePercentage={4}
+                        />
+                    </div>
+                )}
             </div>
         );
     }
diff --git a/package-lock.json b/package-lock.json
index 5fca1c417218..b885b22292ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13296,7 +13296,7 @@
       "integrity": "sha512-VMtK//85QJomhk3cXOCksNwOYaw1KWnYTS37GYGgyf7A3ajdBoPGhaJuJWAH2S2kq8GZeXkdKn+3Mfmgy11cVw==",
       "dev": true,
       "requires": {
-        "icu4c-data": "0.67.2"
+        "icu4c-data": "0.64.2"
       }
     },
     "function-bind": {