diff --git a/superset/assets/javascripts/components/EditableTitle.jsx b/superset/assets/javascripts/components/EditableTitle.jsx
index 31c4c53c96e03..b773340846622 100644
--- a/superset/assets/javascripts/components/EditableTitle.jsx
+++ b/superset/assets/javascripts/components/EditableTitle.jsx
@@ -8,10 +8,12 @@ const propTypes = {
   canEdit: PropTypes.bool,
   onSaveTitle: PropTypes.func,
   noPermitTooltip: PropTypes.string,
+  showTooltip: PropTypes.bool,
 };
 const defaultProps = {
   title: t('Title'),
   canEdit: false,
+  showTooltip: true,
 };
 
 class EditableTitle extends React.PureComponent {
@@ -85,24 +87,30 @@ class EditableTitle extends React.PureComponent {
     }
   }
   render() {
-    return (
-      <span className="editable-title">
+    let input = (
+      <input
+        required
+        type={this.state.isEditing ? 'text' : 'button'}
+        value={this.state.title}
+        onChange={this.handleChange}
+        onBlur={this.handleBlur}
+        onClick={this.handleClick}
+        onKeyPress={this.handleKeyPress}
+      />
+    );
+    if (this.props.showTooltip) {
+      input = (
         <TooltipWrapper
           label="title"
           tooltip={this.props.canEdit ? t('click to edit title') :
               this.props.noPermitTooltip || t('You don\'t have the rights to alter this title.')}
         >
-          <input
-            required
-            type={this.state.isEditing ? 'text' : 'button'}
-            value={this.state.title}
-            onChange={this.handleChange}
-            onBlur={this.handleBlur}
-            onClick={this.handleClick}
-            onKeyPress={this.handleKeyPress}
-          />
+          {input}
         </TooltipWrapper>
-      </span>
+      );
+    }
+    return (
+      <span className="editable-title">{input}</span>
     );
   }
 }
diff --git a/superset/assets/javascripts/components/ModalTrigger.jsx b/superset/assets/javascripts/components/ModalTrigger.jsx
index 315a75354d97e..67a83e6c21627 100644
--- a/superset/assets/javascripts/components/ModalTrigger.jsx
+++ b/superset/assets/javascripts/components/ModalTrigger.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'react-bootstrap';
+import { Modal, MenuItem } from 'react-bootstrap';
 import cx from 'classnames';
+
 import Button from './Button';
 
 const propTypes = {
@@ -13,6 +14,7 @@ const propTypes = {
   beforeOpen: PropTypes.func,
   onExit: PropTypes.func,
   isButton: PropTypes.bool,
+  isMenuItem: PropTypes.bool,
   bsSize: PropTypes.string,
   className: PropTypes.string,
   tooltip: PropTypes.string,
@@ -23,6 +25,7 @@ const defaultProps = {
   beforeOpen: () => {},
   onExit: () => {},
   isButton: false,
+  isMenuItem: false,
   bsSize: null,
   className: '',
 };
@@ -86,6 +89,13 @@ export default class ModalTrigger extends React.Component {
           {this.renderModal()}
         </Button>
       );
+    } else if (this.props.isMenuItem) {
+      return (
+        <MenuItem onClick={this.open}>
+          {this.props.triggerNode}
+          {this.renderModal()}
+        </MenuItem>
+      );
     }
     /* eslint-disable jsx-a11y/interactive-supports-focus */
     return (
diff --git a/superset/assets/javascripts/dashboard/actions.js b/superset/assets/javascripts/dashboard/actions.js
index 6e88ca64041a2..25fa117c47dfc 100644
--- a/superset/assets/javascripts/dashboard/actions.js
+++ b/superset/assets/javascripts/dashboard/actions.js
@@ -110,3 +110,8 @@ export const TOGGLE_EXPAND_SLICE = 'TOGGLE_EXPAND_SLICE';
 export function toggleExpandSlice(slice, isExpanded) {
   return { type: TOGGLE_EXPAND_SLICE, slice, isExpanded };
 }
+
+export const SET_EDIT_MODE = 'SET_EDIT_MODE';
+export function setEditMode(editMode) {
+  return { type: SET_EDIT_MODE, editMode };
+}
diff --git a/superset/assets/javascripts/dashboard/components/Controls.jsx b/superset/assets/javascripts/dashboard/components/Controls.jsx
index ecbc907ef0e5d..ead2c9af6d1e5 100644
--- a/superset/assets/javascripts/dashboard/components/Controls.jsx
+++ b/superset/assets/javascripts/dashboard/components/Controls.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup } from 'react-bootstrap';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
 
-import Button from '../../components/Button';
 import CssEditor from './CssEditor';
 import RefreshIntervalModal from './RefreshIntervalModal';
 import SaveModal from './SaveModal';
-import CodeModal from './CodeModal';
 import SliceAdder from './SliceAdder';
 import { t } from '../../locales';
+import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
 
 const $ = window.$ = require('jquery');
 
@@ -23,6 +22,38 @@ const propTypes = {
   renderSlices: PropTypes.func,
   serialize: PropTypes.func,
   startPeriodicRender: PropTypes.func,
+  editMode: PropTypes.bool,
+};
+
+function MenuItemContent({ faIcon, text, tooltip, children }) {
+  return (
+    <span>
+      <i className={`fa fa-${faIcon}`} /> {text} {''}
+      <InfoTooltipWithTrigger
+        tooltip={tooltip}
+        label={`dash-${faIcon}`}
+        placement="top"
+      />
+      {children}
+    </span>
+  );
+}
+MenuItemContent.propTypes = {
+  faIcon: PropTypes.string.isRequired,
+  text: PropTypes.string,
+  tooltip: PropTypes.string,
+  children: PropTypes.node,
+};
+
+function ActionMenuItem(props) {
+  return (
+    <MenuItem onClick={props.onClick}>
+      <MenuItemContent {...props} />
+    </MenuItem>
+  );
+}
+ActionMenuItem.propTypes = {
+  onClick: PropTypes.func,
 };
 
 class Controls extends React.PureComponent {
@@ -32,6 +63,8 @@ class Controls extends React.PureComponent {
       css: props.dashboard.css || '',
       cssTemplates: [],
     };
+    this.refresh = this.refresh.bind(this);
+    this.toggleModal = this.toggleModal.bind(this);
   }
   componentWillMount() {
     $.get('/csstemplateasyncmodelview/api/read', (data) => {
@@ -47,6 +80,13 @@ class Controls extends React.PureComponent {
     // Force refresh all slices
     this.props.renderSlices(true);
   }
+  toggleModal(modal) {
+    let currentModal;
+    if (modal !== this.state.currentModal) {
+      currentModal = modal;
+    }
+    this.setState({ currentModal });
+  }
   changeCss(css) {
     this.setState({ css });
     this.props.onChange();
@@ -54,72 +94,94 @@ class Controls extends React.PureComponent {
   render() {
     const { dashboard, userId,
       addSlicesToDashboard, startPeriodicRender, readFilters,
-      serialize, onSave } = this.props;
+      serialize, onSave, editMode } = this.props;
     const emailBody = t('Checkout this dashboard: %s', window.location.href);
     const emailLink = 'mailto:?Subject=Superset%20Dashboard%20'
       + `${dashboard.dashboard_title}&Body=${emailBody}`;
+    let saveText = t('Save as');
+    if (editMode) {
+      saveText = t('Save');
+    }
     return (
-      <ButtonGroup>
-        <Button
-          tooltip={t('Force refresh the whole dashboard')}
-          onClick={this.refresh.bind(this)}
-        >
-          <i className="fa fa-refresh" />
-        </Button>
-        <SliceAdder
-          dashboard={dashboard}
-          addSlicesToDashboard={addSlicesToDashboard}
-          userId={userId}
-          triggerNode={
-            <i className="fa fa-plus" />
+      <span>
+        <DropdownButton title="Actions" bsSize="small" id="bg-nested-dropdown" pullRight>
+          <ActionMenuItem
+            text={t('Force Refresh')}
+            tooltip={t('Force refresh the whole dashboard')}
+            faIcon="refresh"
+            onClick={this.refresh}
+          />
+          <RefreshIntervalModal
+            onChange={refreshInterval => startPeriodicRender(refreshInterval * 1000)}
+            triggerNode={
+              <MenuItemContent
+                text={t('Set autorefresh')}
+                tooltip={t('Set the auto-refresh interval for this session')}
+                faIcon="clock-o"
+              />
+            }
+          />
+          <SaveModal
+            dashboard={dashboard}
+            readFilters={readFilters}
+            serialize={serialize}
+            onSave={onSave}
+            css={this.state.css}
+            triggerNode={
+              <MenuItemContent
+                text={saveText}
+                tooltip={t('Save the dashboard')}
+                faIcon="save"
+              />
+            }
+          />
+          {editMode &&
+            <ActionMenuItem
+              text={t('Edit properties')}
+              tooltip={t("Edit the dashboards's properties")}
+              faIcon="edit"
+              onClick={() => { window.location = `/dashboardmodelview/edit/${dashboard.id}`; }}
+            />
           }
-        />
-        <RefreshIntervalModal
-          onChange={refreshInterval => startPeriodicRender(refreshInterval * 1000)}
-          triggerNode={
-            <i className="fa fa-clock-o" />
+          {editMode &&
+            <ActionMenuItem
+              text={t('Email')}
+              tooltip={t('Email a link to this dashbaord')}
+              onClick={() => { window.location = emailLink; }}
+              faIcon="envelope"
+            />
           }
-        />
-        <CodeModal
-          codeCallback={readFilters}
-          triggerNode={<i className="fa fa-filter" />}
-        />
-        <CssEditor
-          dashboard={dashboard}
-          triggerNode={
-            <i className="fa fa-css3" />
+          {editMode &&
+            <SliceAdder
+              dashboard={dashboard}
+              addSlicesToDashboard={addSlicesToDashboard}
+              userId={userId}
+              triggerNode={
+                <MenuItemContent
+                  text={t('Add Slices')}
+                  tooltip={t('Add some slices to this dashbaord')}
+                  faIcon="plus"
+                />
+              }
+            />
           }
-          initialCss={dashboard.css}
-          templates={this.state.cssTemplates}
-          onChange={this.changeCss.bind(this)}
-        />
-        <Button
-          onClick={() => { window.location = emailLink; }}
-        >
-          <i className="fa fa-envelope" />
-        </Button>
-        <Button
-          disabled={!dashboard.dash_edit_perm}
-          onClick={() => {
-            window.location = `/dashboardmodelview/edit/${dashboard.id}`;
-          }}
-          tooltip={t('Edit this dashboard\'s properties')}
-        >
-          <i className="fa fa-edit" />
-        </Button>
-        <SaveModal
-          dashboard={dashboard}
-          readFilters={readFilters}
-          serialize={serialize}
-          onSave={onSave}
-          css={this.state.css}
-          triggerNode={
-            <Button disabled={!dashboard.dash_save_perm}>
-              <i className="fa fa-save" />
-            </Button>
+          {editMode &&
+            <CssEditor
+              dashboard={dashboard}
+              triggerNode={
+                <MenuItemContent
+                  text={t('Edit CSS')}
+                  tooltip={t('Change the style of the dashboard using CSS code')}
+                  faIcon="css3"
+                />
+              }
+              initialCss={dashboard.css}
+              templates={this.state.cssTemplates}
+              onChange={this.changeCss.bind(this)}
+            />
           }
-        />
-      </ButtonGroup>
+        </DropdownButton>
+      </span>
     );
   }
 }
diff --git a/superset/assets/javascripts/dashboard/components/CssEditor.jsx b/superset/assets/javascripts/dashboard/components/CssEditor.jsx
index bbcc19f078604..a9434a8e10a7f 100644
--- a/superset/assets/javascripts/dashboard/components/CssEditor.jsx
+++ b/superset/assets/javascripts/dashboard/components/CssEditor.jsx
@@ -78,7 +78,7 @@ class CssEditor extends React.PureComponent {
       <ModalTrigger
         triggerNode={this.props.triggerNode}
         modalTitle={t('CSS')}
-        isButton
+        isMenuItem
         modalBody={
           <div>
             {this.renderTemplateSelector()}
diff --git a/superset/assets/javascripts/dashboard/components/Dashboard.jsx b/superset/assets/javascripts/dashboard/components/Dashboard.jsx
index 553daf6e8d891..064ed5fe804a9 100644
--- a/superset/assets/javascripts/dashboard/components/Dashboard.jsx
+++ b/superset/assets/javascripts/dashboard/components/Dashboard.jsx
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import AlertsWrapper from '../../components/AlertsWrapper';
 import GridLayout from './GridLayout';
 import Header from './Header';
-import DashboardAlert from './DashboardAlert';
 import { getExploreUrl } from '../../explore/exploreUtils';
 import { areObjectsEqual } from '../../reduxUtils';
 import { t } from '../../locales';
@@ -22,6 +21,7 @@ const propTypes = {
   timeout: PropTypes.number,
   userId: PropTypes.string,
   isStarred: PropTypes.bool,
+  editMode: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -33,6 +33,7 @@ const defaultProps = {
   timeout: 60,
   userId: '',
   isStarred: false,
+  editMode: false,
 };
 
 class Dashboard extends React.PureComponent {
@@ -42,10 +43,7 @@ class Dashboard extends React.PureComponent {
     this.firstLoad = true;
 
     // alert for unsaved changes
-    this.state = {
-      alert: null,
-      trigger: false,
-    };
+    this.state = { unsavedChanges: false };
 
     this.rerenderCharts = this.rerenderCharts.bind(this);
     this.updateDashboardTitle = this.updateDashboardTitle.bind(this);
@@ -76,13 +74,6 @@ class Dashboard extends React.PureComponent {
     window.addEventListener('resize', this.rerenderCharts);
   }
 
-  componentWillReceiveProps(nextProps) {
-    // check filters is changed
-    if (!areObjectsEqual(nextProps.filters, this.props.filters)) {
-      this.renderUnsavedChangeAlert();
-    }
-  }
-
   componentDidUpdate(prevProps) {
     if (!areObjectsEqual(prevProps.filters, this.props.filters) && this.props.refresh) {
       Object.keys(this.props.filters).forEach(sliceId => (this.refreshExcept(sliceId)));
@@ -103,14 +94,12 @@ class Dashboard extends React.PureComponent {
 
   onChange() {
     this.onBeforeUnload(true);
-    this.renderUnsavedChangeAlert();
+    this.setState({ unsavedChanges: true });
   }
 
   onSave() {
     this.onBeforeUnload(false);
-    this.setState({
-      alert: '',
-    });
+    this.setState({ unsavedChanges: false });
   }
 
   // return charts in array
@@ -283,26 +272,14 @@ class Dashboard extends React.PureComponent {
     });
   }
 
-  renderUnsavedChangeAlert() {
-    this.setState({
-      alert: (
-        <span>
-          <strong>{t('You have unsaved changes.')}</strong> {t('Click the')} &nbsp;
-          <i className="fa fa-save" />&nbsp;
-          {t('button on the top right to save your changes.')}
-        </span>
-      ),
-    });
-  }
-
   render() {
     return (
       <div id="dashboard-container">
-        {this.state.alert && <DashboardAlert alertContent={this.state.alert} />}
         <div id="dashboard-header">
           <AlertsWrapper initMessages={this.props.initMessages} />
           <Header
             dashboard={this.props.dashboard}
+            unsavedChanges={this.state.unsavedChanges}
             userId={this.props.userId}
             isStarred={this.props.isStarred}
             updateDashboardTitle={this.updateDashboardTitle}
@@ -315,6 +292,8 @@ class Dashboard extends React.PureComponent {
             renderSlices={this.fetchAllSlices}
             startPeriodicRender={this.startPeriodicRender}
             addSlicesToDashboard={this.addSlicesToDashboard}
+            editMode={this.props.editMode}
+            setEditMode={this.props.actions.setEditMode}
           />
         </div>
         <div id="grid-container" className="slice-grid gridster">
@@ -336,6 +315,7 @@ class Dashboard extends React.PureComponent {
             getFilters={this.getFilters}
             clearFilter={this.props.actions.clearFilter}
             removeFilter={this.props.actions.removeFilter}
+            editMode={this.props.editMode}
           />
         </div>
       </div>
diff --git a/superset/assets/javascripts/dashboard/components/DashboardAlert.jsx b/superset/assets/javascripts/dashboard/components/DashboardAlert.jsx
deleted file mode 100644
index 4579ce880dacb..0000000000000
--- a/superset/assets/javascripts/dashboard/components/DashboardAlert.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Alert } from 'react-bootstrap';
-
-const propTypes = {
-  alertContent: PropTypes.node.isRequired,
-};
-
-const DashboardAlert = ({ alertContent }) => (
-  <div id="alert-container">
-    <div className="container-fluid">
-      <Alert bsStyle="warning">
-        {alertContent}
-      </Alert>
-    </div>
-  </div>
-);
-
-DashboardAlert.propTypes = propTypes;
-
-export default DashboardAlert;
diff --git a/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx b/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx
index 24127aaa672d9..f575ab71240ac 100644
--- a/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx
+++ b/superset/assets/javascripts/dashboard/components/DashboardContainer.jsx
@@ -16,6 +16,7 @@ function mapStateToProps({ charts, dashboard }) {
     refresh: dashboard.refresh,
     userId: dashboard.userId,
     isStarred: !!dashboard.isStarred,
+    editMode: dashboard.editMode,
   };
 }
 
diff --git a/superset/assets/javascripts/dashboard/components/GridCell.jsx b/superset/assets/javascripts/dashboard/components/GridCell.jsx
index b0c86ad0c4990..854aea01fe74a 100644
--- a/superset/assets/javascripts/dashboard/components/GridCell.jsx
+++ b/superset/assets/javascripts/dashboard/components/GridCell.jsx
@@ -30,6 +30,7 @@ const propTypes = {
   getFilters: PropTypes.func,
   clearFilter: PropTypes.func,
   removeFilter: PropTypes.func,
+  editMode: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -41,6 +42,7 @@ const defaultProps = {
   getFilters: () => ({}),
   clearFilter: () => ({}),
   removeFilter: () => ({}),
+  editMode: false,
 };
 
 class GridCell extends React.PureComponent {
@@ -101,6 +103,7 @@ class GridCell extends React.PureComponent {
             updateSliceName={updateSliceName}
             toggleExpandSlice={toggleExpandSlice}
             forceRefresh={forceRefresh}
+            editMode={this.props.editMode}
           />
         </div>
         <div
diff --git a/superset/assets/javascripts/dashboard/components/GridLayout.jsx b/superset/assets/javascripts/dashboard/components/GridLayout.jsx
index 210c295e7bce1..dad66e1adb4b1 100644
--- a/superset/assets/javascripts/dashboard/components/GridLayout.jsx
+++ b/superset/assets/javascripts/dashboard/components/GridLayout.jsx
@@ -28,6 +28,7 @@ const propTypes = {
   getFilters: PropTypes.func,
   clearFilter: PropTypes.func,
   removeFilter: PropTypes.func,
+  editMode: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
@@ -162,6 +163,7 @@ class GridLayout extends React.Component {
             getFilters={this.props.getFilters}
             clearFilter={this.props.clearFilter}
             removeFilter={this.props.removeFilter}
+            editMode={this.props.editMode}
           />
         </div>);
     });
diff --git a/superset/assets/javascripts/dashboard/components/Header.jsx b/superset/assets/javascripts/dashboard/components/Header.jsx
index dfba7e86f16f4..b7eece0b1de05 100644
--- a/superset/assets/javascripts/dashboard/components/Header.jsx
+++ b/superset/assets/javascripts/dashboard/components/Header.jsx
@@ -3,7 +3,10 @@ import PropTypes from 'prop-types';
 
 import Controls from './Controls';
 import EditableTitle from '../../components/EditableTitle';
+import Button from '../../components/Button';
 import FaveStar from '../../components/FaveStar';
+import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
+import { t } from '../../locales';
 
 const propTypes = {
   dashboard: PropTypes.object.isRequired,
@@ -19,30 +22,65 @@ const propTypes = {
   serialize: PropTypes.func,
   startPeriodicRender: PropTypes.func,
   updateDashboardTitle: PropTypes.func,
+  editMode: PropTypes.bool.isRequired,
+  setEditMode: PropTypes.func.isRequired,
+  unsavedChanges: PropTypes.bool.isRequired,
 };
 
 class Header extends React.PureComponent {
   constructor(props) {
     super(props);
-
     this.handleSaveTitle = this.handleSaveTitle.bind(this);
+    this.toggleEditMode = this.toggleEditMode.bind(this);
   }
   handleSaveTitle(title) {
     this.props.updateDashboardTitle(title);
   }
+  toggleEditMode() {
+    this.props.setEditMode(!this.props.editMode);
+  }
+  renderUnsaved() {
+    if (!this.props.unsavedChanges) {
+      return null;
+    }
+    return (
+      <InfoTooltipWithTrigger
+        label="unsaved"
+        tooltip={t('Unsaved changes')}
+        icon="exclamation-triangle"
+        className="text-danger m-r-5"
+        placement="top"
+      />
+    );
+  }
+  renderEditButton() {
+    if (!this.props.dashboard.dash_save_perm) {
+      return null;
+    }
+    const btnText = this.props.editMode ? 'Switch to View Mode' : 'Edit Dashboard';
+    return (
+      <Button
+        bsStyle="default"
+        className="m-r-5"
+        style={{ width: '150px' }}
+        onClick={this.toggleEditMode}
+      >
+        {btnText}
+      </Button>);
+  }
   render() {
     const dashboard = this.props.dashboard;
     return (
       <div className="title">
         <div className="pull-left">
-          <h1 className="outer-container">
+          <h1 className="outer-container pull-left">
             <EditableTitle
               title={dashboard.dashboard_title}
-              canEdit={dashboard.dash_save_perm}
+              canEdit={dashboard.dash_save_perm && this.props.editMode}
               onSaveTitle={this.handleSaveTitle}
-              noPermitTooltip={'You don\'t have the rights to alter this dashboard.'}
+              showTooltip={this.props.editMode}
             />
-            <span className="favstar">
+            <span className="favstar m-r-5">
               <FaveStar
                 itemId={dashboard.id}
                 fetchFaveStar={this.props.fetchFaveStar}
@@ -50,10 +88,11 @@ class Header extends React.PureComponent {
                 isStarred={this.props.isStarred}
               />
             </span>
+            {this.renderUnsaved()}
           </h1>
         </div>
         <div className="pull-right" style={{ marginTop: '35px' }}>
-          {!this.props.dashboard.standalone_mode &&
+          {this.renderEditButton()}
           <Controls
             dashboard={dashboard}
             userId={this.props.userId}
@@ -64,8 +103,8 @@ class Header extends React.PureComponent {
             renderSlices={this.props.renderSlices}
             serialize={this.props.serialize}
             startPeriodicRender={this.props.startPeriodicRender}
+            editMode={this.props.editMode}
           />
-        }
         </div>
         <div className="clearfix" />
       </div>
diff --git a/superset/assets/javascripts/dashboard/components/RefreshIntervalModal.jsx b/superset/assets/javascripts/dashboard/components/RefreshIntervalModal.jsx
index e927e63755697..4cba010d9540f 100644
--- a/superset/assets/javascripts/dashboard/components/RefreshIntervalModal.jsx
+++ b/superset/assets/javascripts/dashboard/components/RefreshIntervalModal.jsx
@@ -34,7 +34,7 @@ class RefreshIntervalModal extends React.PureComponent {
     return (
       <ModalTrigger
         triggerNode={this.props.triggerNode}
-        isButton
+        isMenuItem
         modalTitle={t('Refresh Interval')}
         modalBody={
           <div>
diff --git a/superset/assets/javascripts/dashboard/components/SaveModal.jsx b/superset/assets/javascripts/dashboard/components/SaveModal.jsx
index cc91daee4cb19..a55fbb2180067 100644
--- a/superset/assets/javascripts/dashboard/components/SaveModal.jsx
+++ b/superset/assets/javascripts/dashboard/components/SaveModal.jsx
@@ -106,6 +106,7 @@ class SaveModal extends React.PureComponent {
     return (
       <ModalTrigger
         ref={(modal) => { this.modal = modal; }}
+        isMenuItem
         triggerNode={this.props.triggerNode}
         modalTitle={t('Save Dashboard')}
         modalBody={
diff --git a/superset/assets/javascripts/dashboard/components/SliceAdder.jsx b/superset/assets/javascripts/dashboard/components/SliceAdder.jsx
index 6c2ea0e4b73df..d5be8caff6cfa 100644
--- a/superset/assets/javascripts/dashboard/components/SliceAdder.jsx
+++ b/superset/assets/javascripts/dashboard/components/SliceAdder.jsx
@@ -41,7 +41,9 @@ class SliceAdder extends React.Component {
   }
 
   componentWillUnmount() {
-    this.slicesRequest.abort();
+    if (this.slicesRequest) {
+      this.slicesRequest.abort();
+    }
   }
 
   onEnterModal() {
@@ -202,9 +204,10 @@ class SliceAdder extends React.Component {
         triggerNode={this.props.triggerNode}
         tooltip={t('Add a new slice to the dashboard')}
         beforeOpen={this.onEnterModal.bind(this)}
-        isButton
+        isMenuItem
         modalBody={modalContent}
         bsSize="large"
+        setModalAsTriggerChildren
         modalTitle={t('Add Slices to Dashboard')}
       />
     );
diff --git a/superset/assets/javascripts/dashboard/components/SliceHeader.jsx b/superset/assets/javascripts/dashboard/components/SliceHeader.jsx
index 4e8a33537c9a2..36107fedf1e0d 100644
--- a/superset/assets/javascripts/dashboard/components/SliceHeader.jsx
+++ b/superset/assets/javascripts/dashboard/components/SliceHeader.jsx
@@ -18,6 +18,7 @@ const propTypes = {
   updateSliceName: PropTypes.func,
   toggleExpandSlice: PropTypes.func,
   forceRefresh: PropTypes.func,
+  editMode: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -25,6 +26,7 @@ const defaultProps = {
   removeSlice: () => ({}),
   updateSliceName: () => ({}),
   toggleExpandSlice: () => ({}),
+  editMode: false,
 };
 
 class SliceHeader extends React.PureComponent {
@@ -55,22 +57,24 @@ class SliceHeader extends React.PureComponent {
           <div className="header">
             <EditableTitle
               title={slice.slice_name}
-              canEdit={!!this.props.updateSliceName}
+              canEdit={!!this.props.updateSliceName && this.props.editMode}
               onSaveTitle={this.onSaveTitle}
               noPermitTooltip={'You don\'t have the rights to alter this dashboard.'}
             />
           </div>
           <div className="chart-controls">
             <div id={'controls_' + slice.slice_id} className="pull-right">
-              <a>
-                <TooltipWrapper
-                  placement="top"
-                  label="move"
-                  tooltip={t('Move chart')}
-                >
-                  <i className="fa fa-arrows drag" />
-                </TooltipWrapper>
-              </a>
+              {this.props.editMode &&
+                <a>
+                  <TooltipWrapper
+                    placement="top"
+                    label="move"
+                    tooltip={t('Move chart')}
+                  >
+                    <i className="fa fa-arrows drag" />
+                  </TooltipWrapper>
+                </a>
+              }
               <a
                 className={`refresh ${isCached ? 'danger' : ''}`}
                 onClick={() => (this.props.forceRefresh(slice.slice_id))}
@@ -121,15 +125,17 @@ class SliceHeader extends React.PureComponent {
                   <i className="fa fa-share" />
                 </TooltipWrapper>
               </a>
-              <a className="remove-chart" onClick={() => (this.props.removeSlice(slice))}>
-                <TooltipWrapper
-                  placement="top"
-                  label="close"
-                  tooltip={t('Remove chart from dashboard')}
-                >
-                  <i className="fa fa-close" />
-                </TooltipWrapper>
-              </a>
+              {this.props.editMode &&
+                <a className="remove-chart" onClick={() => (this.props.removeSlice(slice))}>
+                  <TooltipWrapper
+                    placement="top"
+                    label="close"
+                    tooltip={t('Remove chart from dashboard')}
+                  >
+                    <i className="fa fa-close" />
+                  </TooltipWrapper>
+                </a>
+              }
             </div>
           </div>
         </div>
diff --git a/superset/assets/javascripts/dashboard/reducers.js b/superset/assets/javascripts/dashboard/reducers.js
index 487f56feafb05..4919dc43f35dc 100644
--- a/superset/assets/javascripts/dashboard/reducers.js
+++ b/superset/assets/javascripts/dashboard/reducers.js
@@ -83,7 +83,7 @@ export function getInitialState(bootstrapData) {
 
   return {
     charts: initCharts,
-    dashboard: { filters, dashboard, userId: user_id, datasources, common },
+    dashboard: { filters, dashboard, userId: user_id, datasources, common, editMode: false },
   };
 }
 
@@ -107,6 +107,9 @@ const dashboard = function (state = {}, action) {
     [actions.TOGGLE_FAVE_STAR]() {
       return { ...state, isStarred: action.isStarred };
     },
+    [actions.SET_EDIT_MODE]() {
+      return { ...state, editMode: action.editMode };
+    },
     [actions.TOGGLE_EXPAND_SLICE]() {
       const updatedExpandedSlices = { ...state.dashboard.metadata.expanded_slices };
       const sliceId = action.slice.slice_id;
diff --git a/superset/assets/package.json b/superset/assets/package.json
index 16a2757d2879c..c3c217437a589 100644
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@@ -79,7 +79,7 @@
     "react-datetime": "2.9.0",
     "react-dom": "^15.6.2",
     "react-gravatar": "^2.6.1",
-    "react-grid-layout": "^0.14.4",
+    "react-grid-layout": "^0.16.0",
     "react-map-gl": "^3.0.4",
     "react-redux": "^5.0.2",
     "react-resizable": "^1.3.3",
@@ -98,8 +98,8 @@
     "sprintf-js": "^1.1.1",
     "srcdoc-polyfill": "^1.0.0",
     "supercluster": "https://github.com/georgeke/supercluster/tarball/ac3492737e7ce98e07af679623aad452373bbc40",
-    "urijs": "^1.18.10",
     "underscore": "^1.8.3",
+    "urijs": "^1.18.10",
     "viewport-mercator-project": "^2.1.0"
   },
   "devDependencies": {