diff --git a/packages/cp-frontend/src/components/navigation/header.js b/packages/cp-frontend/src/components/navigation/header.js
index bde6d65d..8d6df549 100644
--- a/packages/cp-frontend/src/components/navigation/header.js
+++ b/packages/cp-frontend/src/components/navigation/header.js
@@ -8,45 +8,28 @@ import unitcalc from 'unitcalc';
 
 import Logo from '@assets/triton_logo.png';
 import { Col, Row } from 'react-styled-flexboxgrid';
-import { P } from 'joyent-ui-toolkit';
-
-const StyledHeader = styled.div`
-  background-color: ${props => props.theme.primaryDarkBrand};
-  padding: ${unitcalc(2.5)} ${unitcalc(3)} ${unitcalc(2)} ${unitcalc(3)};
-`;
+import { P, Header, HeaderBrand, HeaderItem } from 'joyent-ui-toolkit';
 
 const StyledLogo = Img.extend`
   width: ${remcalc(87)};
   height: ${remcalc(25)};
 `;
 
-const StyledP = styled(P)`
-  color: ${props => props.theme.white};
-  font-weight: 600;
-  margin: ${unitcalc(0.5)} 0 0 0;
-`;
-
-const Header = ({ datacenter, username }) => (
-  <StyledHeader>
-    <Row>
-      <Col xs={6} sm={8} md={10}>
-        <Link to="/">
-          <StyledLogo src={Logo} />
-        </Link>
-      </Col>
-      <Col xs={3} sm={2} md={1}>
-        <StyledP>{datacenter}</StyledP>
-      </Col>
-      <Col xs={3} sm={2} md={1}>
-        <StyledP>{username}</StyledP>
-      </Col>
-    </Row>
-  </StyledHeader>
+const NavHeader = ({ datacenter, username }) => (
+  <Header>
+    <HeaderBrand>
+      <Link to="/">
+        <StyledLogo src={Logo} />
+      </Link>
+    </HeaderBrand>
+    <HeaderItem>{datacenter}</HeaderItem>
+    <HeaderItem>{username}</HeaderItem>
+  </Header>
 );
 
-Header.propTypes = {
+NavHeader.propTypes = {
   datacenter: PropTypes.string,
   username: PropTypes.string
 };
 
-export default Header;
+export default NavHeader;