diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
index 7bccc0b00af495..7cf8bb2b0c6927 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
@@ -1,67 +1,64 @@
 @import '../../common/common';
 
-:global {
-  .ms-Facepile {
-    position: relative;
-    width: auto;
-  }
-
-  .ms-Facepile-clear {
-    clear: both;
-  }
+.root {
+  position: relative;
+  width: auto;
+}
 
-  .ms-Facepile-itemButton {
-    @include focus-outline();
-    position: relative;
-    text-align: center;
-    @include float(left);
-    padding: 0;
-    @include margin-right(4px);
-    margin-bottom: 4px;
-    border-radius: 50%;
-    vertical-align: top;
+.clear {
+  clear: both;
+}
 
-    .ms-Persona-details {
-      flex: 1 0 auto;
-    }
-  }
+.itemButton {
+  @include focus-outline();
+  position: relative;
+  text-align: center;
+  @include float(left);
+  padding: 0;
+  @include margin-right(4px);
+  margin-bottom: 4px;
+  border-radius: 50%;
+  vertical-align: top;
 
-  button.ms-Facepile-itemButton {
-    display: inline;
-    background: none;
-    padding: 0;
-    cursor: pointer;
-    border: none;
+  :global(.ms-Persona-details) {
+    flex: 1 0 auto;
   }
+}
 
-  button.ms-Facepile-addButton {
-    font-size: $ms-font-size-m;
-    color: $ms-color-white;
-    background-color: $ms-color-themePrimary;
-
-    &:hover, &:focus {
-      background-color: $ms-color-themeDark;
-    }
+button.itemButton {
+  display: inline;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  border: none;
+}
 
-    &:active {
-      background-color: $ms-color-themeDarker;
-    }
+button.addButton {
+  font-size: $ms-font-size-m;
+  color: $ms-color-white;
+  background-color: $ms-color-themePrimary;
 
-    &:disabled,
-    &.is-disabled {
-      background-color: $ms-color-neutralTertiaryAlt;
-    }
+  &:hover, &:focus {
+    background-color: $ms-color-themeDark;
   }
 
-  button.ms-Facepile-overflowButton {
-    font-size: $ms-font-size-m;
-    color: $ms-color-neutralSecondary;
-    background-color: $ms-color-neutralLight;
+  &:active {
+    background-color: $ms-color-themeDarker;
   }
 
-  button.ms-Facepile-descriptiveOverflowButton {
-    font-size: $ms-font-size-s;
-    color: $ms-color-neutralSecondary;
-    background-color: $ms-color-neutralLight;
+  &:disabled {
+    background-color: $ms-color-neutralTertiaryAlt;
   }
 }
+
+button.overflowButton {
+  font-size: $ms-font-size-m;
+  color: $ms-color-neutralSecondary;
+  background-color: $ms-color-neutralLight;
+}
+
+button.descriptiveOverflowButton {
+  font-size: $ms-font-size-s;
+  color: $ms-color-neutralSecondary;
+  background-color: $ms-color-neutralLight;
+}
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
index 12d29f7afe6ecf..2c0422a9bd7bc8 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
@@ -1,6 +1,7 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as ReactTestUtils from 'react-addons-test-utils';
 /* tslint:enable:no-unused-variable */
 import { mount, shallow } from 'enzyme';
 import { setRTL } from '../../Utilities';
@@ -37,53 +38,58 @@ describe('Facepile', () => {
     });
 
     it('renders with only add button if no personas found and addButtonProps are not null', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile
           personas={ [] }
           addButtonProps={ {} }
           showAddButton={ true }
-          />);
-      let addButton = wrapper.find('.ms-Icon--AddFriend');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+
+      let addButton = facepile.querySelectorAll('.ms-Icon--AddFriend');
       expect(addButton).to.have.length(1, 'Add button should render');
-      let buttons = wrapper.find('.ms-Facepile-itemButton');
+      let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(1, 'Only one button should be rendered');
     });
 
     it('renders chevron overflow button if overflowButtonProps are not null and OverflowButtonType equals downArrow', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile
           personas={ [] }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.downArrow }
-          />);
-      let overflowButton = wrapper.find('.ms-Icon--ChevronDown');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+      let overflowButton = facepile.querySelectorAll('.ms-Icon--ChevronDown');
       expect(overflowButton).to.have.length(1, 'Overflow button should render');
-      let buttons = wrapper.find('.ms-Facepile-itemButton');
+      let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(1, 'Only one button should be rendered');
     });
 
     it('renders more overflow button if overflowButtonProps are not null as OverflowButtonType equals more', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile
           personas={ [] }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.more }
-          />);
-      let overflowButton = wrapper.find('.ms-Icon--More');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+      let overflowButton = facepile.querySelectorAll('.ms-Icon--More');
       expect(overflowButton).to.have.length(1, 'Overflow button should render');
-      let buttons = wrapper.find('.ms-Facepile-itemButton');
+      let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(1, 'Only one button should be rendered');
     });
 
     it('renders without descriptive overflow button if overflowButtonProps are not null and maximum personas are not exceeded', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile personas={ [] }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.descriptive }
-          />);
-      let overflowButton = wrapper.find('.ms-Facepile-descriptiveOverflowButton');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+      let overflowButton = facepile.querySelectorAll('.ms-Facepile-descriptiveOverflowButton');
       expect(overflowButton).to.have.length(0, 'Overflow button should not render');
-      let buttons = wrapper.find('.ms-Facepile-itemButton');
+      let buttons = facepile.querySelectorAll('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(0, 'No buttons should be rendered');
     });
 
@@ -95,7 +101,7 @@ describe('Facepile', () => {
           maxDisplayablePersonas={ 5 }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.descriptive }
-          />);
+        />);
       let overflowButton = wrapper.find('.ms-Facepile-descriptiveOverflowButton');
       expect(overflowButton).to.have.length(1, 'Overflow button should render');
       let buttons = wrapper.find('.ms-Facepile-itemButton');
@@ -107,7 +113,7 @@ describe('Facepile', () => {
         <Facepile
           personas={ facepilePersonas.concat(facepilePersonas, facepilePersonas, facepilePersonas) }
           maxDisplayablePersonas={ 2 }
-          />);
+        />);
       let buttons = wrapper.find('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(2, 'Only two buttons should be rendered');
     });
@@ -124,7 +130,7 @@ describe('Facepile', () => {
       const wrapper = mount(
         <Facepile
           personas={ personas }
-          />);
+        />);
       let buttons = wrapper.find('.ms-Facepile-itemButton');
       expect(buttons).to.have.length(1, 'Clickable Persona should render');
       buttons.simulate('click');
@@ -132,22 +138,23 @@ describe('Facepile', () => {
     });
 
     it('personas and buttons render default size if not specified', () => {
-      const wrapper = shallow(
+      const wrapper = ReactTestUtils.renderIntoDocument(
         <Facepile
           personas={ facepilePersonas }
           addButtonProps={ {} }
           showAddButton={ true }
           overflowButtonProps={ {} }
           overflowButtonType={ OverflowButtonType.downArrow }
-          />);
-      let addButton = wrapper.find('.ms-Persona.ms-Persona--xs.ms-Facepile-addButton.ms-Facepile-itemButton');
+        />);
+      let facepile = ReactDOM.findDOMNode(wrapper as React.ReactInstance);
+      let addButton = facepile.querySelectorAll('.ms-Facepile-addButton .ms-Persona.ms-Persona--xs');
       expect(addButton).to.have.length(1, 'Add button should render');
-      let faces = wrapper.find(Persona);
+      let faces = facepile.querySelectorAll('.ms-Facepile-person');
       expect(faces).to.have.length(facepilePersonas.length, 'personas should render');
-      wrapper.find(Persona).forEach((node) => {
-        expect(node.html()).to.contain('ms-Persona--xs');
-      });
-      let overflowButton = wrapper.find('.ms-Persona.ms-Persona--xs.ms-Facepile-overflowButton.ms-Facepile-itemButton');
+      for (let i = 0; i < faces.length; ++i) {
+        expect(faces[i].innerHTML).to.have.string('ms-Persona--xs');
+      }
+      let overflowButton = facepile.querySelectorAll('.ms-Facepile-overflowButton .ms-Persona--xs');
       expect(overflowButton).to.have.length(1, 'Overflow button should render');
     });
 
@@ -157,7 +164,7 @@ describe('Facepile', () => {
         <Facepile
           personas={ facepilePersonas }
           personaSize={ PersonaSize.extraExtraSmall }
-          />);
+        />);
       let faces = wrapper.find(Persona);
       expect(faces).to.have.length(facepilePersonas.length, 'XXSmall personas should render');
       wrapper.find(Persona).forEach((node) => {
@@ -169,7 +176,7 @@ describe('Facepile', () => {
         <Facepile
           personas={ facepilePersonas }
           personaSize={ PersonaSize.small }
-          />);
+        />);
       faces = wrapper.find(Persona);
       expect(faces).to.have.length(facepilePersonas.length, 'Small personas should render');
       wrapper.find(Persona).forEach((node) => {
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
index 5cf13439d76554..dce815c07f25e6 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
@@ -21,7 +21,7 @@ import {
 import {
   PERSONA_SIZE
 } from '../Persona/PersonaConsts';
-import './Facepile.scss';
+import styles from './Facepile.scss';
 
 export class Facepile extends React.Component<IFacepileProps, {}> {
   public static defaultProps: IFacepileProps = {
@@ -41,8 +41,8 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
     }
 
     return (
-      <div className='ms-Facepile'>
-        <div className='ms-Facepile-members'>
+      <div className={ css('ms-Facepile', styles.root) }>
+        <div className={ css('ms-Facepile-members') }>
           { showAddButton ? this._getAddNewElement() : null }
           <FocusZone direction={ FocusZoneDirection.horizontal }>
             {
@@ -56,7 +56,7 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
             { overflowButtonProps ? this._getOverflowElement(numPersonasToShow) : null }
           </FocusZone>
         </div>
-        <div className='ms-Facepile-clear'></div>
+        <div className={ css('ms-Facepile-clear', styles.clear) }></div>
       </div>
     );
   }
@@ -77,7 +77,7 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
   private _getElementWithOnClickEvent(personaControl: JSX.Element, persona: IFacepilePersona, index: number): JSX.Element {
     return <button
       { ...getNativeProps(persona, buttonProperties) }
-      className='ms-Facepile-itemButton'
+      className={ css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton) }
       title={ persona.personaName }
       key={ (!!persona.imageUrl ? 'i' : '') + index }
       onClick={ this._onPersonaClick.bind(this, persona) }
@@ -91,7 +91,7 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
   private _getElementWithoutOnClickEvent(personaControl: JSX.Element, persona: IFacepilePersona, index: number): JSX.Element {
     return <div
       { ...getNativeProps(persona, divProperties) }
-      className='ms-Facepile-itemButton'
+      className={ css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton) }
       title={ persona.personaName }
       key={ (!!persona.imageUrl ? 'i' : '') + index }
       onMouseMove={ this._onPersonaMouseMove.bind(this, persona) }
@@ -122,28 +122,66 @@ export class Facepile extends React.Component<IFacepileProps, {}> {
 
     let personaNames: string = this.props.personas.slice(numPersonasToShow).map((p: IFacepilePersona) => p.personaName).join(', ');
 
-    return <button { ...getNativeProps(this.props.overflowButtonProps, buttonProperties) }
-      className={ css('ms-Persona', PERSONA_SIZE[personaSize], 'ms-Facepile-descriptiveOverflowButton', 'ms-Facepile-itemButton') }
-      title={ personaNames }
+    return <button
+      { ...getNativeProps(this.props.overflowButtonProps, buttonProperties) }
+      className={ css('ms-Facepile-descriptiveOverflowButton', 'ms-Facepile-itemButton', styles.descriptiveOverflowButton, styles.itemButton) }
     >
-      { '+' + numPersonasNotPictured }
+      <Persona
+        title={ personaNames }
+        size={ personaSize }
+        hidePersonaDetails={ true }
+        onRenderInitials={ () => {
+          return (
+            <span>{ '+' + numPersonasNotPictured }</span>
+          )
+        } }
+      >
+
+      </Persona>
+
     </button>;
   }
 
   private _getIconElement(icon: string): JSX.Element {
     let { personaSize } = this.props;
-    return <button { ...getNativeProps(this.props.overflowButtonProps, buttonProperties) }
-      className={ css('ms-Persona', PERSONA_SIZE[personaSize], 'ms-Facepile-overflowButton', 'ms-Facepile-itemButton') }
+
+    return <button
+      { ...getNativeProps(this.props.overflowButtonProps, buttonProperties) }
+      className={ css('ms-Facepile-overflowButton', 'ms-Facepile-itemButton', styles.overflowButton, styles.itemButton) }
     >
-      <i className={ css('ms-Icon', 'msIcon', `ms-Icon ms-Icon--${icon}`) } aria-hidden='true'></i>
+      <Persona
+        size={ personaSize }
+        hidePersonaDetails={ true }
+        onRenderInitials={ () => {
+          return (
+            <i className={ css('ms-Icon', 'msIcon', `ms-Icon ms-Icon--${icon}`) } aria-hidden='true'></i>
+          )
+        } }
+      >
+
+      </Persona>
+
     </button>;
   }
 
   private _getAddNewElement(): JSX.Element {
     let { personaSize } = this.props;
-    return <button { ...getNativeProps(this.props.addButtonProps, buttonProperties) }
-      className={ css('ms-Persona', PERSONA_SIZE[personaSize], 'ms-Facepile-addButton', 'ms-Facepile-itemButton') }>
-      <i className='ms-Icon msIcon ms-Icon--AddFriend' aria-hidden='true'></i>
+    return <button
+      { ...getNativeProps(this.props.addButtonProps, buttonProperties) }
+      className={ css('ms-Facepile-addButton', 'ms-Facepile-itemButton', styles.itemButton, styles.addButton) }
+    >
+      <Persona
+        size={ personaSize }
+        hidePersonaDetails={ true }
+        onRenderInitials={ () => {
+          return (
+            <i className='ms-Icon msIcon ms-Icon--AddFriend' aria-hidden='true'></i>
+          )
+        } }
+      >
+
+      </Persona>
+
     </button>;
   }