diff --git a/app/javascript/src/components/ModalsContainer/modals/LeaveTeamModal.jsx b/app/javascript/src/components/ModalsContainer/modals/LeaveTeamModal.jsx
index 3cc3ef54c..68b5702b1 100644
--- a/app/javascript/src/components/ModalsContainer/modals/LeaveTeamModal.jsx
+++ b/app/javascript/src/components/ModalsContainer/modals/LeaveTeamModal.jsx
@@ -77,12 +77,12 @@ class LeaveTeamModal extends Component {
           </Alert>
         </Modal.Body>
         <Modal.Footer>
+          <Button bsStyle="primary" onClick={this.leaveTeam}>
+            <FormattedMessage id="settings_page.leave_team_modal.leave_team" />
+          </Button>
           <Button onClick={this.onCloseModal}>
             <FormattedMessage id="general.close" />
           </Button>
-          <Button bsStyle="success" onClick={this.leaveTeam}>
-            <FormattedMessage id="settings_page.leave_team_modal.leave_team" />
-          </Button>
         </Modal.Footer>
       </Modal>
     );
diff --git a/app/javascript/src/components/data_table/index.jsx b/app/javascript/src/components/data_table/index.jsx
index f45f802b2..d09141641 100644
--- a/app/javascript/src/components/data_table/index.jsx
+++ b/app/javascript/src/components/data_table/index.jsx
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
 import styled from "styled-components";
+import { FormattedMessage } from "react-intl";
 import {
   WHITE_COLOR,
   COLOR_GRAY,
@@ -56,6 +57,21 @@ const StyledBootstrapTable = styled(BootstrapTable)`
 `;
 
 class DataTable extends Component {
+  static renderShowsTotal(start, to, total) {
+    return (
+      <span>
+        <FormattedMessage
+          id="settings_page.shows_total_entries"
+          values={{
+            start,
+            to,
+            total
+          }}
+        />
+      </span>
+    );
+  }
+
   static cleanColumnAttributes(col) {
     // Remove additional attributes from the columns
     const {
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/team/components/RemoveUserModal.jsx b/app/javascript/src/scenes/SettingsPage/scenes/team/components/RemoveUserModal.jsx
index c35f667be..1c06c9d2e 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/team/components/RemoveUserModal.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/team/components/RemoveUserModal.jsx
@@ -72,12 +72,12 @@ class RemoveUserModal extends Component {
           </Alert>
         </Modal.Body>
         <Modal.Footer>
+          <Button bsStyle="primary" onClick={this.removeUser}>
+            <FormattedMessage id="settings_page.remove_user_modal.remove_user" />
+          </Button>
           <Button onClick={this.onCloseModal}>
             <FormattedMessage id="general.close" />
           </Button>
-          <Button bsStyle="success" onClick={this.removeUser}>
-            <FormattedMessage id="settings_page.remove_user_modal.remove_user" />
-          </Button>
         </Modal.Footer>
       </Modal>
     );
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/team/components/TeamsMembers.jsx b/app/javascript/src/scenes/SettingsPage/scenes/team/components/TeamsMembers.jsx
index 8f703018b..839970664 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/team/components/TeamsMembers.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/team/components/TeamsMembers.jsx
@@ -1,12 +1,14 @@
 import React, { Component } from "react";
 import PropTypes, { number, func, string, bool } from "prop-types";
 import {
+  Row,
   Panel,
   Button,
   Glyphicon,
   DropdownButton,
   MenuItem
 } from "react-bootstrap";
+import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 import axios from "../../../../../config/axios";
 
@@ -15,6 +17,11 @@ import RemoveUserModal from "./RemoveUserModal";
 import DataTable from "../../../../../components/data_table";
 import { UPDATE_USER_TEAM_ROLE_PATH } from "../../../../../config/api_endpoints";
 
+const StyledButton = styled(Button)`
+  margin-bottom: 10px;
+  margin-right: 15px;
+`;
+
 const initalUserToRemove = {
   userName: "",
   team_user_id: 0,
@@ -132,6 +139,14 @@ class TeamsMembers extends Component {
   }
 
   render() {
+    const options = {
+      sizePerPageList: [10, 25, 50, 100],
+      prePage: "Prev", // Previous page button text
+      nextPage: "Next", // Next page button textu
+      paginationShowsTotal: DataTable.renderShowsTotal,
+      alwaysShowAllBtns: true
+    };
+
     const columns = [
       {
         id: 1,
@@ -139,7 +154,8 @@ class TeamsMembers extends Component {
         isKey: false,
         textId: "name",
         position: 0,
-        dataSort: true
+        dataSort: true,
+        width: "25%"
       },
       {
         id: 2,
@@ -147,7 +163,8 @@ class TeamsMembers extends Component {
         isKey: true,
         textId: "email",
         position: 1,
-        dataSort: true
+        dataSort: true,
+        width: "30%"
       },
       {
         id: 3,
@@ -162,14 +179,16 @@ class TeamsMembers extends Component {
         name: "Joined on",
         isKey: false,
         textId: "created_at",
-        position: 3
+        position: 3,
+        dataSort: true
       },
       {
         id: 5,
         name: "Status",
         isKey: false,
         textId: "status",
-        position: 3
+        position: 3,
+        dataSort: true
       },
       {
         id: 6,
@@ -178,7 +197,8 @@ class TeamsMembers extends Component {
         textId: "actions",
         columnClassName: "react-bootstrap-table-dropdown-fix",
         dataFormat: this.memberAction,
-        position: 3
+        position: 3,
+        width: "80px"
       }
     ];
 
@@ -188,12 +208,23 @@ class TeamsMembers extends Component {
           <FormattedMessage id="settings_page.single_team.members_panel_title" />
         }
       >
-        <Button bsStyle="primary" onClick={this.showInviteUsersModalCallback}>
-          <Glyphicon glyph="plus" />
-          <FormattedMessage id="settings_page.single_team.add_members" />
-        </Button>
+        <Row>
+          <StyledButton
+            bsStyle="primary"
+            className="pull-right"
+            onClick={this.showInviteUsersModalCallback}
+          >
+            <Glyphicon glyph="plus" />
+            <FormattedMessage id="settings_page.single_team.add_members" />
+          </StyledButton>
+        </Row>
 
-        <DataTable data={this.props.members} columns={columns} />
+        <DataTable
+          data={this.props.members}
+          columns={columns}
+          pagination
+          options={options}
+        />
         <RemoveUserModal
           showModal={this.state.showModal}
           hideModal={this.hideModal}
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx b/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx
index 7e5bb0273..ab0e08d54 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamDescriptionModal.jsx
@@ -17,9 +17,7 @@ import { TEXT_MAX_LENGTH } from "../../../../../config/constants/numeric";
 import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
 import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
 
-const StyledHelpBlock = styled(HelpBlock)`
-  color: ${COLOR_APPLE_BLOSSOM}
-`;
+const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
 
 class UpdateTeamDescriptionModal extends Component {
   constructor(props) {
@@ -95,22 +93,20 @@ class UpdateTeamDescriptionModal extends Component {
               onChange={this.handleDescription}
             />
             <FormControl.Feedback />
-            <StyledHelpBlock>
-              {this.state.errorMessage}
-            </StyledHelpBlock>
+            <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
           </FormGroup>
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={this.onCloseModal}>
-            <FormattedMessage id="general.close" />
-          </Button>
           <Button
-            bsStyle="success"
+            bsStyle="primary"
             onClick={this.updateDescription}
             disabled={!_.isEmpty(this.state.errorMessage)}
           >
             <FormattedMessage id="general.update" />
           </Button>
+          <Button onClick={this.onCloseModal}>
+            <FormattedMessage id="general.close" />
+          </Button>
         </Modal.Footer>
       </Modal>
     );
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx b/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx
index 7f1c181f8..eff100622 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/team/components/UpdateTeamNameModal.jsx
@@ -17,9 +17,7 @@ import { NAME_MAX_LENGTH } from "../../../../../config/constants/numeric";
 import { TEAM_UPDATE_PATH } from "../../../../../config/api_endpoints";
 import { COLOR_APPLE_BLOSSOM } from "../../../../../config/constants/colors";
 
-const StyledHelpBlock = styled(HelpBlock)`
-  color: ${COLOR_APPLE_BLOSSOM}
-`;
+const StyledHelpBlock = styled(HelpBlock)`color: ${COLOR_APPLE_BLOSSOM};`;
 
 class UpdateTeamNameModal extends Component {
   constructor(props) {
@@ -95,22 +93,20 @@ class UpdateTeamNameModal extends Component {
               value={this.state.name}
             />
             <FormControl.Feedback />
-            <StyledHelpBlock>
-              {this.state.errorMessage}
-            </StyledHelpBlock>
+            <StyledHelpBlock>{this.state.errorMessage}</StyledHelpBlock>
           </FormGroup>
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={this.onCloseModal}>
-            <FormattedMessage id="general.close" />
-          </Button>
           <Button
-            bsStyle="success"
+            bsStyle="primary"
             onClick={this.updateName}
             disabled={!_.isEmpty(this.state.errorMessage)}
           >
             <FormattedMessage id="general.update" />
           </Button>
+          <Button onClick={this.onCloseModal}>
+            <FormattedMessage id="general.close" />
+          </Button>
         </Modal.Footer>
       </Modal>
     );
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx b/app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx
index eceefe8bc..163c25e0b 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx
@@ -9,21 +9,6 @@ import DataTable from "../../../../../components/data_table";
 import { SETTINGS_TEAMS_ROUTE } from "../../../../../config/routes";
 
 class TeamsDataTable extends Component {
-  static renderShowsTotal(start, to, total) {
-    return (
-      <span>
-        <FormattedMessage
-          id="settings_page.shows_total_entries"
-          values={{
-            start,
-            to,
-            total
-          }}
-        />
-      </span>
-    );
-  }
-
   constructor(props) {
     super(props);
 
@@ -62,7 +47,7 @@ class TeamsDataTable extends Component {
       sizePerPageList: [10, 25, 50, 100],
       prePage: "Prev", // Previous page button text
       nextPage: "Next", // Next page button textu
-      paginationShowsTotal: TeamsDataTable.renderShowsTotal,
+      paginationShowsTotal: DataTable.renderShowsTotal,
       alwaysShowAllBtns: true
     };
     const columns = [
@@ -108,7 +93,7 @@ class TeamsDataTable extends Component {
       <DataTable
         data={this.props.teams}
         columns={columns}
-        pagination={true}
+        pagination
         options={options}
       />
     );
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
index c7478385f..2ea1ea55b 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/teams/new/index.jsx
@@ -1,5 +1,13 @@
 import React, { Component } from "react";
-import { Breadcrumb, FormGroup, FormControl, ControlLabel, HelpBlock, Button } from "react-bootstrap";
+import {
+  Breadcrumb,
+  FormGroup,
+  FormControl,
+  ControlLabel,
+  HelpBlock,
+  Button,
+  ButtonToolbar
+} from "react-bootstrap";
 import { Redirect } from "react-router";
 import { LinkContainer } from "react-router-bootstrap";
 import { FormattedMessage } from "react-intl";
@@ -31,9 +39,7 @@ const Wrapper = styled.div`
   padding: 16px 15px 50px 15px;
 `;
 
-const MyFormGroupDiv = styled.div`
-  margin-bottom: 15px;
-`;
+const MyFormGroupDiv = styled.div`margin-bottom: 15px;`;
 
 class SettingsNewTeam extends Component {
   constructor(props) {
@@ -41,7 +47,7 @@ class SettingsNewTeam extends Component {
     this.state = {
       team: {
         name: "",
-        description: "",
+        description: ""
       },
       formErrors: {
         name: "",
@@ -54,7 +60,9 @@ class SettingsNewTeam extends Component {
     this.validateField = this.validateField.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.renderTeamNameFormGroup = this.renderTeamNameFormGroup.bind(this);
-    this.renderTeamDescriptionFormGroup = this.renderTeamDescriptionFormGroup.bind(this);
+    this.renderTeamDescriptionFormGroup = this.renderTeamDescriptionFormGroup.bind(
+      this
+    );
   }
 
   onSubmit(e) {
@@ -69,24 +77,23 @@ class SettingsNewTeam extends Component {
       .then(sr => {
         // Redirect to the new team page
         this.newState = { ...this.state };
-        this.newState = update(
-          this.newState,
-          { redirectTo: {
-              $set: SETTINGS_TEAM_ROUTE.replace(':id', sr.data.details.id)
-            }
+        this.newState = update(this.newState, {
+          redirectTo: {
+            $set: SETTINGS_TEAM_ROUTE.replace(":id", sr.data.details.id)
           }
-        );
+        });
         this.setState(this.newState);
       })
       .catch(er => {
         // Display errors
         this.newState = { ...this.state };
-        ['name', 'description'].forEach((el) => {
+        ["name", "description"].forEach(el => {
           if (er.response.data.details[el]) {
-            this.newState = update(
-              this.newState,
-              { formErrors: { name: { $set: <span>{er.response.data.details[el]}</span> } } }
-            );
+            this.newState = update(this.newState, {
+              formErrors: {
+                name: { $set: <span>{er.response.data.details[el]}</span> }
+              }
+            });
           }
         });
         this.setState(this.newState);
@@ -99,26 +106,39 @@ class SettingsNewTeam extends Component {
       errorMessage = "";
 
       if (value.length < NAME_MIN_LENGTH) {
-        errorMessage = <FormattedMessage id="error_messages.text_too_short" values={{ min_length: NAME_MIN_LENGTH }} />;
+        errorMessage = (
+          <FormattedMessage
+            id="error_messages.text_too_short"
+            values={{ min_length: NAME_MIN_LENGTH }}
+          />
+        );
       } else if (value.length > NAME_MAX_LENGTH) {
-        errorMessage = <FormattedMessage id="error_messages.text_too_long" values={{ max_length: NAME_MAX_LENGTH }} />;
+        errorMessage = (
+          <FormattedMessage
+            id="error_messages.text_too_long"
+            values={{ max_length: NAME_MAX_LENGTH }}
+          />
+        );
       }
 
-      this.newState = update(
-        this.newState,
-        { formErrors: { name: { $set: errorMessage } } }
-      );
+      this.newState = update(this.newState, {
+        formErrors: { name: { $set: errorMessage } }
+      });
     } else if (key === "description") {
       errorMessage = "";
 
       if (value.length > TEXT_MAX_LENGTH) {
-        errorMessage = <FormattedMessage id="error_messages.text_too_long" values={{ max_length: TEXT_MAX_LENGTH }} />;
+        errorMessage = (
+          <FormattedMessage
+            id="error_messages.text_too_long"
+            values={{ max_length: TEXT_MAX_LENGTH }}
+          />
+        );
       }
 
-      this.newState = update(
-        this.newState,
-        { formErrors: { description: { $set: errorMessage } } }
-      );
+      this.newState = update(this.newState, {
+        formErrors: { description: { $set: errorMessage } }
+      });
     }
   }
 
@@ -129,10 +149,7 @@ class SettingsNewTeam extends Component {
     this.newState = { ...this.state };
 
     // Update value in the state
-    this.newState = update(
-      this.newState,
-      { team: { [key]: { $set: value } } }
-    );
+    this.newState = update(this.newState, { team: { [key]: { $set: value } } });
 
     // Validate the input
     this.validateField(key, value);
@@ -142,7 +159,9 @@ class SettingsNewTeam extends Component {
   }
 
   renderTeamNameFormGroup() {
-    const formGroupClass = this.state.formErrors.name ? "form-group has-error" : "form-group";
+    const formGroupClass = this.state.formErrors.name
+      ? "form-group has-error"
+      : "form-group";
     const validationState = this.state.formErrors.name ? "error" : null;
     return (
       <FormGroup
@@ -165,7 +184,9 @@ class SettingsNewTeam extends Component {
   }
 
   renderTeamDescriptionFormGroup() {
-    const formGroupClass = this.state.formErrors.description ? "form-group has-error" : "form-group";
+    const formGroupClass = this.state.formErrors.description
+      ? "form-group has-error"
+      : "form-group";
     const validationState = this.state.formErrors.description ? "error" : null;
     return (
       <FormGroup
@@ -194,8 +215,9 @@ class SettingsNewTeam extends Component {
       return <Redirect to={this.state.redirectTo} />;
     }
 
-    const btnDisabled = !_.isEmpty(this.state.formErrors.name) ||
-                        !_.isEmpty(this.state.formErrors.description);
+    const btnDisabled =
+      !_.isEmpty(this.state.formErrors.name) ||
+      !_.isEmpty(this.state.formErrors.description);
 
     return (
       <Wrapper>
@@ -211,7 +233,6 @@ class SettingsNewTeam extends Component {
         </Breadcrumb>
 
         <form onSubmit={this.onSubmit} style={{ maxWidth: "500px" }}>
-
           <MyFormGroupDiv>
             {this.renderTeamNameFormGroup()}
             <small>
@@ -225,20 +246,24 @@ class SettingsNewTeam extends Component {
               <FormattedMessage id="settings_page.new_team.description_sublabel" />
             </small>
           </MyFormGroupDiv>
-
-          <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
-            <Button>
-              <FormattedMessage id="general.cancel" />
+          <ButtonToolbar>
+            <Button
+              type="submit"
+              className="btn-primary"
+              disabled={btnDisabled}
+            >
+              <FormattedMessage id="settings_page.new_team.create" />
             </Button>
-          </LinkContainer>
-          <Button type="submit" className="btn-primary" disabled={btnDisabled}>
-            <FormattedMessage id="settings_page.new_team.create" />
-          </Button>
-
+            <LinkContainer to={SETTINGS_TEAMS_ROUTE}>
+              <Button>
+                <FormattedMessage id="general.cancel" />
+              </Button>
+            </LinkContainer>
+          </ButtonToolbar>
         </form>
       </Wrapper>
     );
   }
 }
 
-export default SettingsNewTeam;
\ No newline at end of file
+export default SettingsNewTeam;
diff --git a/app/javascript/src/styles/main.scss b/app/javascript/src/styles/main.scss
index 45e74ee32..86bcdf9f8 100644
--- a/app/javascript/src/styles/main.scss
+++ b/app/javascript/src/styles/main.scss
@@ -18,19 +18,43 @@ body {
 
 .btn-primary {
   background-color: $color-theme-secondary;
-  border-color: $primary-hover-color;
-  margin-right: 7px;
+  border-color: darken($color-theme-secondary, 5%);
+
+  &.active,
+  &.focus,
+  &.active.focus {
+    background-color: darken($color-theme-secondary, 20%);
+    border-color: darken($color-theme-secondary, 25%);
+
+    &:hover {
+      background-color: darken($color-theme-secondary, 25%);
+      border-color: darken($color-theme-secondary, 30%);
+    }
+  }
+
+  &:active,
+  &:focus,
+  &:active:focus,
+  &:active:hover,
+  &:focus:hover,
+  &:active:focus:hover {
+    background-color: darken($color-theme-secondary, 20%);
+    border-color: darken($color-theme-secondary, 25%);
+  }
+
   &:hover {
-    background-color: $primary-hover-color;
+    background-color: darken($color-theme-secondary, 5%);
+    border-color: darken($color-theme-secondary, 10%);
   }
 }
 
 // // fixes issue with dropdown in datatable
 .react-bootstrap-table-dropdown-fix {
   overflow: inherit !important;
-  & .open > .dropdown-menu {
-    position: relative !important;
-  }
+}
+
+.react-bs-container-body {
+  overflow: inherit !important;
 }
 
 // tags input