diff --git a/package.json b/package.json
index 7cd38570..86367d75 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "classnames": "^2.2.5",
     "lodash.orderby": "^4.6.0",
     "numeral": "^2.0.6",
-    "patternfly-react": "^2.10.1",
+    "patternfly-react": "^2.11.1",
     "prop-types": "^15.6.2",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
diff --git a/src/App.js b/src/App.js
index ba715426..237d8305 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,10 +6,7 @@ import {
   VerticalNav,
   VerticalNavItem,
   VerticalNavSecondaryItem,
-  VerticalNavMasthead,
-  VerticalNavBrand,
-  VerticalNavIconBar,
-  Dropdown,
+  Masthead,
   Icon,
   MenuItem
 } from 'patternfly-react';
@@ -19,6 +16,10 @@ import { routes } from './routes';
 import './App.css';
 
 class App extends React.Component {
+  state = {
+    collapse: false
+  };
+
   constructor() {
     super();
 
@@ -63,6 +64,10 @@ class App extends React.Component {
     );
   };
 
+  onCollapse = () => {
+    this.setState({ collapse: !this.state.collapse });
+  };
+
   navigateTo = path => {
     const { history } = this.props;
     history.push(path);
@@ -95,49 +100,43 @@ class App extends React.Component {
       </VerticalNavItem>
     ));
 
-    const dropdownComponentClass = props => (
-      <li className={props.className}>{props.children}</li>
-    );
-
     return (
       <React.Fragment>
-        <VerticalNav persistentSecondary={false}>
-          <VerticalNavMasthead>
-            <VerticalNavBrand titleImg={pfBrand} iconImg={pfLogo} />
-            <VerticalNavIconBar>
-              <Dropdown componentClass={dropdownComponentClass} id="help">
-                <Dropdown.Toggle
-                  className="nav-item-iconic"
-                  bsStyle="link"
-                  noCaret
-                >
-                  <Icon type="pf" name="help" />
-                </Dropdown.Toggle>
-                <Dropdown.Menu>
-                  <MenuItem eventKey="1">Help</MenuItem>
-                  <MenuItem eventKey="2">About</MenuItem>
-                </Dropdown.Menu>
-              </Dropdown>
-              <Dropdown componentClass={dropdownComponentClass} id="user">
-                <Dropdown.Toggle className="nav-item-iconic" bsStyle="link">
-                  <Icon type="pf" name="user" />{' '}
-                  <span className="dropdown-title">Brian Johnson</span>
-                </Dropdown.Toggle>
-                <Dropdown.Menu>
-                  <MenuItem eventKey="1">Preferences</MenuItem>
-                  <MenuItem eventKey="2">Logout</MenuItem>
-                </Dropdown.Menu>
-              </Dropdown>
-            </VerticalNavIconBar>
-          </VerticalNavMasthead>
+        <Masthead
+          iconImg={pfLogo}
+          titleImg={pfBrand}
+          title="PatternFly React Demo App"
+          onNavToggleClick={() => this.onCollapse()}
+        >
+          <Masthead.Collapse>
+            <Masthead.Dropdown
+              id="app-help-dropdown"
+              noCaret
+              title={<span title="Help" className="pficon pficon-help" />}
+            >
+              <MenuItem eventKey="1">Help</MenuItem>
+              <MenuItem eventKey="2">About</MenuItem>
+            </Masthead.Dropdown>
+            <Masthead.Dropdown
+              id="app-user-dropdown"
+              title={[
+                <Icon type="pf" name="user" key="user-icon" />,
+                <span className="dropdown-title" key="dropdown-title">
+                  Brian Johnson
+                </span>
+              ]}
+            >
+              <MenuItem eventKey="1">User Preferences</MenuItem>
+              <MenuItem eventKey="2">Logout</MenuItem>
+            </Masthead.Dropdown>
+          </Masthead.Collapse>
+        </Masthead>
+        <VerticalNav
+          persistentSecondary={false}
+          hideMasthead
+          navCollapsed={this.state.collapse}
+        >
           {vertNavItems}
-          {/* <VerticalNavItem
-            key="abc"
-            title="Ipsum"
-            iconClass="fa fa-dashboard"
-            active
-            onClick={() => this.navigateTo('/')}
-          /> */}
         </VerticalNav>
         {this.renderContent()}
       </React.Fragment>
diff --git a/src/App.scss b/src/App.scss
index f675b70d..97ac87ae 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -30,11 +30,11 @@ $icon-font-path: './fonts/';
   margin-bottom: 10px;
 }
 
-.navbar-pf-vertical {
-  .nav .nav-item-iconic > .pficon-user {
-    padding-right: 7px;
-  }
-}
+// .navbar-pf-vertical {
+//   .nav .nav-item-iconic > .pficon-user {
+//     padding-right: 7px;
+//   }
+// }
 
 a:hover,
 a:focus {
diff --git a/yarn.lock b/yarn.lock
index cff6c496..149eaeb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6151,15 +6151,15 @@ patternfly-bootstrap-treeview@~2.1.0:
     bootstrap "3.3.x"
     jquery ">= 2.1.x"
 
-patternfly-react@^2.10.1:
-  version "2.10.1"
-  resolved "https://registry.yarnpkg.com/patternfly-react/-/patternfly-react-2.10.1.tgz#eb1cfd0e32a4b956d8ac238ec12415db9b63625a"
+patternfly-react@^2.11.1:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/patternfly-react/-/patternfly-react-2.11.1.tgz#5b0c23d5a289de4a6b7e658fc8d04bb252e8d32b"
   dependencies:
     bootstrap-slider-without-jquery "^10.0.0"
     breakjs "^1.0.0"
     classnames "^2.2.5"
     css-element-queries "^1.0.1"
-    patternfly "^3.51.0"
+    patternfly "^3.52.1"
     react-bootstrap "^0.32.1"
     react-bootstrap-switch "^15.5.3"
     react-bootstrap-typeahead "^3.1.3"
@@ -6172,9 +6172,9 @@ patternfly-react@^2.10.1:
     sortabular "^1.5.1"
     table-resolver "^3.2.0"
 
-patternfly@^3.51.0:
-  version "3.51.1"
-  resolved "https://registry.yarnpkg.com/patternfly/-/patternfly-3.51.1.tgz#675727a81c78a40931208d2de94f14a6b0f1af2a"
+patternfly@^3.52.1:
+  version "3.52.1"
+  resolved "https://registry.yarnpkg.com/patternfly/-/patternfly-3.52.1.tgz#0c6f067ec987f4f16b93acb54e8f7de02300eead"
   dependencies:
     bootstrap "~3.3.7"
     font-awesome "^4.7.0"