diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts
index b625d917ca8..bf0bbfaec4b 100644
--- a/public/app/core/components/scroll/scroll.ts
+++ b/public/app/core/components/scroll/scroll.ts
@@ -1,5 +1,6 @@
 import PerfectScrollbar from 'perfect-scrollbar';
 import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
 
 export function geminiScrollbar() {
   return {
@@ -7,6 +8,19 @@ export function geminiScrollbar() {
     link: function(scope, elem, attrs) {
       let scrollbar = new PerfectScrollbar(elem[0]);
 
+      appEvents.on(
+        'smooth-scroll-top',
+        () => {
+          elem.animate(
+            {
+              scrollTop: 0,
+            },
+            500
+          );
+        },
+        scope
+      );
+
       scope.$on('$routeChangeSuccess', () => {
         elem[0].scrollTop = 0;
       });
diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
index 1f143f3d7f7..01d16436a45 100644
--- a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
@@ -21,6 +21,8 @@ export interface AddPanelPanelState {
 export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelPanelState> {
   constructor(props) {
     super(props);
+    this.handleCloseAddPanel = this.handleCloseAddPanel.bind(this);
+    this.renderPanelItem = this.renderPanelItem.bind(this);
 
     this.state = {
       panelPlugins: this.getPanelPlugins(),
@@ -83,6 +85,13 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     dashboard.removePanel(this.props.panel);
   };
 
+  handleCloseAddPanel(evt) {
+    evt.preventDefault();
+    const panelContainer = this.props.getPanelContainer();
+    const dashboard = panelContainer.getDashboard();
+    dashboard.removePanel(dashboard.panels[0]);
+  }
+
   renderPanelItem(panel, index) {
     console.log('render panel', index);
     return (
@@ -101,10 +110,11 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
             <i className="gicon gicon-add-panel" />
             <span className="add-panel__title">New Panel</span>
             <span className="add-panel__sub-title">Select a visualization</span>
+            <button className="add-panel__close" onClick={this.handleCloseAddPanel}>
+              <i className="fa fa-close" />
+            </button>
           </div>
-          <ScrollBar className="add-panel__items">
-            {this.state.panelPlugins.map(this.renderPanelItem.bind(this))}
-          </ScrollBar>
+          <ScrollBar className="add-panel__items">{this.state.panelPlugins.map(this.renderPanelItem)}</ScrollBar>
         </div>
       </div>
     );
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index 3c1ea397a52..2f1a2936419 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -73,9 +73,9 @@ export class DashNavCtrl {
   }
 
   addPanel() {
+    appEvents.emit('smooth-scroll-top');
     if (this.dashboard.panels.length > 0 && this.dashboard.panels[0].type === 'add-panel') {
-      this.dashboard.removePanel(this.dashboard.panels[0]);
-      return;
+      return; // Return if the "Add panel" exists already
     }
 
     this.dashboard.addPanel({
diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss
index 548d677ef47..51754a54d92 100644
--- a/public/sass/components/_panel_add_panel.scss
+++ b/public/sass/components/_panel_add_panel.scss
@@ -7,12 +7,20 @@
   display: flex;
   align-items: center;
 
-  i {
+  .gicon {
     font-size: 30px;
     margin-right: $spacer;
   }
 }
 
+.add-panel__close {
+  margin-left: auto;
+  background-color: transparent;
+  border: 0;
+  font-size: 16px;
+  margin-right: -10px;
+}
+
 .add-panel__title {
   font-size: $font-size-md;
   margin-right: $spacer/2;