diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js
index 0d791a02..6d91b4b2 100644
--- a/frontend/src/components/people-list/index.js
+++ b/frontend/src/components/people-list/index.js
@@ -6,6 +6,7 @@ const Column = require('@ui/components/column');
 const Button = require('@ui/components/button');
 
 const PeopleTable = require('./table');
+const Invite = require('./invite');
 
 const buttonStyle = {
   float: 'right'
@@ -16,7 +17,7 @@ const People = (props) => {
   const {
     people = [],
     orgUI = {},
-    handleToggle
+    handleToggle,
   } = props;
 
   return (
@@ -33,6 +34,8 @@ const People = (props) => {
         </Column>
       </Row>
 
+      {orgUI.invite_toggled ? <Invite {...props} /> : null}
+
       <Row>
         <Column xs={12}>
           <PeopleTable
@@ -47,7 +50,7 @@ const People = (props) => {
 People.propTypes = {
   handleToggle: React.PropTypes.func,
   orgUI: React.PropTypes.obj,
-  people: React.PropTypes.arrayOf(PropTypes.person),
+  people: React.PropTypes.arrayOf(PropTypes.person)
 };
 
 module.exports = People;
\ No newline at end of file
diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js
new file mode 100644
index 00000000..4e2a1de0
--- /dev/null
+++ b/frontend/src/components/people-list/invite.js
@@ -0,0 +1,106 @@
+const React = require('react');
+
+// const PropTypes = require('@root/prop-types');
+const Row = require('@ui/components/row');
+const Column = require('@ui/components/column');
+const Button = require('@ui/components/button');
+const SelectCustom = require('@ui/components/select-custom');
+
+const Invite = (props) => {
+
+  const {
+    // people = [],
+    handleToggle,
+    // platformMembers
+  } = props;
+
+  const InputStyle = {
+    float: 'left',
+    width: '75%'
+  };
+
+  const AddButtonStyle = {
+    float: 'right',
+    width: '20%'
+  };
+
+  const styleInline = {
+    display: 'inline-block'
+  };
+
+  const selectData = [
+    {
+      value: 'one',
+      label: 'One'
+    },
+    {
+      value: 'two',
+      label: 'Two'
+    },
+    {
+      value: 'three',
+      label: 'Three'
+    },
+    {
+      value: 'four',
+      label: 'Four'
+    },
+    {
+      value: 'five',
+      label: 'Five'
+    },
+    {
+      value: 'six',
+      label: 'Six'
+    }
+  ];
+
+  return (
+    <Row>
+      <Column xs={6}>
+        <p>Search for a person by name or email or enter an email address
+          to invite someone new.</p>
+
+        <Row>
+          <Column xs={12}>
+            <SelectCustom
+              multi
+              onChange={function noop() {}}
+              options={selectData}
+              placeholder="Enter an email address or password"
+              style={InputStyle}
+            />
+            <Button
+              secondary
+              style={AddButtonStyle}
+            >
+              Add
+            </Button>
+          </Column>
+        </Row>
+
+        <Button
+          onClick={handleToggle}
+          secondary
+          style={styleInline}
+        >
+          Cancel
+        </Button>
+
+        <Button
+          style={styleInline}
+        >
+          Send Invitation(s)
+        </Button>
+      </Column>
+    </Row>
+  );
+};
+
+Invite.propTypes = {
+  handleToggle: React.PropTypes.func,
+  // orgUI: React.PropTypes.obj,
+  // people: React.PropTypes.arrayOf(PropTypes.person)
+};
+
+module.exports = Invite;
\ No newline at end of file
diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js
index a9ca21b7..99e487a0 100644
--- a/frontend/src/containers/org/people.js
+++ b/frontend/src/containers/org/people.js
@@ -11,7 +11,8 @@ const {
 
 const {
   peopleByOrgIdSelector,
-  orgUISelector
+  orgUISelector,
+  membersSelector
 } = selectors;
 
 const {
@@ -31,7 +32,8 @@ const mapStateToProps = (state, {
   params = {}
 }) => ({
   people: peopleByOrgIdSelector(params.org)(state),
-  orgUI: orgUISelector(state)
+  orgUI: orgUISelector(state),
+  platformMembers: membersSelector(state)
 });
 
 const mapDispatchToProps = (dispatch) => ({
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index b2609be4..c942b5f0 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -198,7 +198,7 @@
   },
   "orgs": {
     "ui": {
-      "invite_toggled": false,
+      "invite_toggled": true,
       "sections": [
         "projects",
         "people",
diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js
index 7fec06fb..e0243100 100644
--- a/frontend/src/state/reducers/orgs.js
+++ b/frontend/src/state/reducers/orgs.js
@@ -1,9 +1,23 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  handleInviteToggle
+} = actions;
+
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [handleInviteToggle.toString()]: (state, action) => {
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        invite_toggled: !state.ui.invite_toggled
+      }
+    };
+  }
 }, {});
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index 894ccc42..69fba90f 100644
--- a/frontend/src/state/selectors.js
+++ b/frontend/src/state/selectors.js
@@ -143,5 +143,6 @@ module.exports = {
   metricsByServiceIdSelector: metricsByServiceId,
   instancesByProjectIdSelector: instancesByProjectId,
   metricTypeByUuidSelector: metricTypeByUuid,
-  peopleByOrgIdSelector: peopleByOrgId
+  peopleByOrgIdSelector: peopleByOrgId,
+  membersSelector: members,
 };
diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js
index 89c61179..7bf6ee93 100644
--- a/frontend/webpack/base.js
+++ b/frontend/webpack/base.js
@@ -86,12 +86,15 @@ module.exports = {
     },
     {
       test: /\.css$/,
-      exclude: /node_modules/,
-      loaders: [ 'style-loader', 'css-loader' ],
-      include: [
-        FRONTEND,
-        UI
-      ]
+      loader: 'style-loader!css-loader'
+      // XXXX : Commenting out breaks node_modules that use css
+      //        i.e react-select.
+
+      // exclude: /node_modules/,
+      // include: [
+      //   FRONTEND,
+      //   UI
+      // ]
     }]
   }
 };
diff --git a/ui/src/components/select-custom/index.js b/ui/src/components/select-custom/index.js
index d4a7a81b..f2bd9bca 100644
--- a/ui/src/components/select-custom/index.js
+++ b/ui/src/components/select-custom/index.js
@@ -38,11 +38,12 @@ const SelectCustom = ({
 	onChange,
 	options,
   required = false,
+  style,
   value = ''
 }) => {
 
   return (
-    <div>
+    <div style={style}>
       <StyledLabel>
         {label}
       </StyledLabel>
@@ -76,6 +77,7 @@ SelectCustom.propTypes = {
   onChange: React.PropTypes.func,
   options: React.PropTypes.array,
   required: React.PropTypes.bool,
+  style: React.PropTypes.object,
   value: React.PropTypes.string
 };