diff --git a/src/client/components/CardList/index.jsx b/src/client/components/CardList/index.jsx
index 06e5b00a3..67229a1a3 100644
--- a/src/client/components/CardList/index.jsx
+++ b/src/client/components/CardList/index.jsx
@@ -23,11 +23,12 @@ class CardList extends React.Component {
   }
 
   render () {
-    const { header, children } = this.props
+    const { header, headerRightComponent, children, extraClass } = this.props
     return (
-      <div className={'md-card-list-wrapper'}>
+      <div className={'md-card-list-wrapper' + (extraClass ? ' ' + extraClass : '')}>
         <div className={'md-card-list'}>
           {header && <div className={'md-card-list-header heading_list'}>{header}</div>}
+          {headerRightComponent && <div className={'md-card-list-header-right'}>{headerRightComponent}</div>}
           <ul className={'hierarchical_slide'} data-delay='100ms'>
             {children}
           </ul>
@@ -39,7 +40,9 @@ class CardList extends React.Component {
 
 CardList.propTypes = {
   header: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  headerRightComponent: PropTypes.element,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  extraClass: PropTypes.string
 }
 
 export default CardList
diff --git a/src/client/components/Nav/Sidebar/index.jsx b/src/client/components/Nav/Sidebar/index.jsx
index 6f6438c23..6c9cfbec0 100644
--- a/src/client/components/Nav/Sidebar/index.jsx
+++ b/src/client/components/Nav/Sidebar/index.jsx
@@ -169,13 +169,15 @@ class Sidebar extends React.Component {
         {sessionUser && Helpers.canUser('teams:view') && (
           <SidebarItem text='Teams' icon='wc' href='/teams' class='navTeams' active={activeItem === 'teams'} />
         )}
-        <SidebarItem
-          text='Departments'
-          icon='domain'
-          href='/departments'
-          class='navTeams'
-          active={activeItem === 'departments'}
-        />
+        {sessionUser && Helpers.canUser('departments:view') && (
+          <SidebarItem
+            text='Departments'
+            icon='domain'
+            href='/departments'
+            class='navTeams'
+            active={activeItem === 'departments'}
+          />
+        )}
         {sessionUser && Helpers.canUser('reports:view') && (
           <SidebarItem
             text='Reports'
diff --git a/src/client/containers/Settings/Permissions/permissionBody.jsx b/src/client/containers/Settings/Permissions/permissionBody.jsx
index 0956b7ac4..aff524779 100644
--- a/src/client/containers/Settings/Permissions/permissionBody.jsx
+++ b/src/client/containers/Settings/Permissions/permissionBody.jsx
@@ -49,8 +49,9 @@ class PermissionBody extends React.Component {
   @observable ticketGrants = defaultGrants()
   @observable commentGrants = defaultGrants()
   @observable accountGrants = defaultGrants()
-  @observable teamGrants = defaultGrants()
   @observable groupGrants = defaultGrants()
+  @observable teamGrants = defaultGrants()
+  @observable departmentGrants = defaultGrants()
   @observable reportGrants = defaultGrants()
   @observable noticeGrants = defaultGrants()
 
@@ -85,9 +86,10 @@ class PermissionBody extends React.Component {
     if (parsedGrants.accounts && !isEqual(parsedGrants.accounts, this.accountGrants))
       this.accountGrants = parsedGrants.accounts
 
-    if (parsedGrants.teams && !isEqual(parsedGrants.teams, this.teamGrants)) this.teamGrants = parsedGrants.teams
-
     if (parsedGrants.groups && !isEqual(parsedGrants.groups, this.groupGrants)) this.groupGrants = parsedGrants.groups
+    if (parsedGrants.teams && !isEqual(parsedGrants.teams, this.teamGrants)) this.teamGrants = parsedGrants.teams
+    if (parsedGrants.departments && !isEqual(parsedGrants.departments, this.departmentGrants))
+      this.departmentGrants = parsedGrants.departments
 
     if (parsedGrants.reports && !isEqual(parsedGrants.reports, this.reportGrants))
       this.reportGrants = parsedGrants.reports
@@ -126,8 +128,9 @@ class PermissionBody extends React.Component {
     obj.tickets = PermissionBody.buildPermArray(this.ticketPermGroup)
     obj.comments = PermissionBody.buildPermArray(this.commentPermGroup)
     obj.accounts = PermissionBody.buildPermArray(this.accountPermGroup)
-    obj.teams = PermissionBody.buildPermArray(this.teamPermGroup)
     obj.groups = PermissionBody.buildPermArray(this.groupPermGroup)
+    obj.teams = PermissionBody.buildPermArray(this.teamPermGroup)
+    obj.departments = PermissionBody.buildPermArray(this.departmentPermGroup)
     obj.reports = PermissionBody.buildPermArray(this.reportPermGroup)
     obj.notices = PermissionBody.buildPermArray(this.noticePermGroup)
 
@@ -218,6 +221,13 @@ class PermissionBody extends React.Component {
             grants={this.accountGrants}
             subtitle={'Account Permissions'}
           />
+          <PermissionGroupPartial
+            ref={i => (this.groupPermGroup = i)}
+            title={'Groups'}
+            role={this.props.role}
+            grants={this.groupGrants}
+            subtitle={'Group Permissions'}
+          />
           <PermissionGroupPartial
             ref={i => (this.teamPermGroup = i)}
             title={'Teams'}
@@ -226,11 +236,11 @@ class PermissionBody extends React.Component {
             subtitle={'Team Permissions'}
           />
           <PermissionGroupPartial
-            ref={i => (this.groupPermGroup = i)}
-            title={'Groups'}
+            ref={i => (this.departmentPermGroup = i)}
+            title={'Departments'}
             role={this.props.role}
-            grants={this.groupGrants}
-            subtitle={'Group Permissions'}
+            grants={this.departmentGrants}
+            subtitle={'Department Permissions'}
           />
           <PermissionGroupPartial
             ref={i => (this.reportPermGroup = i)}
diff --git a/src/client/containers/Settings/Tickets/index.jsx b/src/client/containers/Settings/Tickets/index.jsx
index 7d087d19b..873d4befc 100644
--- a/src/client/containers/Settings/Tickets/index.jsx
+++ b/src/client/containers/Settings/Tickets/index.jsx
@@ -359,83 +359,93 @@ class TicketsSettings extends React.Component {
           }
           footer={<ul id={'tagPagination'} className={'uk-pagination'} />}
         >
-          <Grid extraClass={'zone uk-margin-medium-bottom'}>
+          <Grid extraClass={'uk-margin-medium-bottom'}>
             {this.props.tagsSettings.tags.size < 1 && (
               <div style={{ width: '100%', padding: '55px', textAlign: 'center' }}>
                 <h3 style={{ fontSize: '24px', fontWeight: '300' }}>No Tags Found</h3>
               </div>
             )}
             <SpinLoader active={this.props.tagsSettings.loading} extraClass={'panel-bg'} />
-            {this.props.tagsSettings.tags.map(i => {
-              return (
-                <GridItem width={'1-2'} key={i.get('_id')} extraClass={'tag-wrapper br bb'}>
-                  <Grid extraClass={'view-tag'}>
-                    <GridItem width={'1-1'}>
-                      <ZoneBox>
-                        <Grid>
-                          <GridItem width={'1-2'}>
-                            <h5
-                              style={{ fontSize: '16px', lineHeight: '31px', margin: 0, padding: 0, fontWeight: 300 }}
-                            >
-                              {i.get('name')}
-                            </h5>
-                          </GridItem>
-                          <GridItem width={'1-2'} extraClass={'uk-text-right'}>
-                            <ButtonGroup classNames={'mt-5'}>
-                              <Button
-                                text={'edit'}
-                                flat={true}
-                                waves={true}
-                                small={true}
-                                onClick={e => TicketsSettings.toggleEditTag(e)}
-                              />
-                              <Button
-                                text={'remove'}
-                                flat={true}
-                                waves={true}
-                                style={'danger'}
-                                small={true}
-                                onClick={e => this.onRemoveTagClicked(e, i)}
-                              />
-                            </ButtonGroup>
-                          </GridItem>
-                        </Grid>
-                      </ZoneBox>
-                    </GridItem>
-                  </Grid>
-                  <Grid extraClass={'edit-tag z-box uk-clearfix nbt hide'} style={{ paddingTop: '5px' }}>
-                    <GridItem width={'1-1'}>
-                      <form onSubmit={e => this.onSubmitUpdateTag(e, i.get('_id'))}>
-                        <Grid>
-                          <GridItem width={'2-3'}>
-                            <input type='text' className={'md-input'} name={'name'} defaultValue={i.get('name')} />
-                          </GridItem>
-                          <GridItem width={'1-3'} style={{ paddingTop: '10px' }}>
-                            <ButtonGroup classNames={'uk-float-right uk-text-right'}>
-                              <Button
-                                text={'cancel'}
-                                flat={true}
-                                waves={true}
-                                small={true}
-                                onClick={e => TicketsSettings.toggleEditTag(e)}
-                              />
-                              <Button
-                                type={'submit'}
-                                text={'save'}
-                                flat={true}
-                                waves={true}
-                                small={true}
-                                style={'success'}
-                              />
-                            </ButtonGroup>
-                          </GridItem>
-                        </Grid>
-                      </form>
+            <GridItem width={'1-1'}>
+              <Grid extraClass={'zone ml-0'}>
+                {this.props.tagsSettings.tags.map(i => {
+                  return (
+                    <GridItem width={'1-2'} key={i.get('_id')} extraClass={'tag-wrapper br bb'}>
+                      <Grid extraClass={'view-tag'}>
+                        <GridItem width={'1-1'}>
+                          <ZoneBox>
+                            <Grid>
+                              <GridItem width={'1-2'}>
+                                <h5
+                                  style={{
+                                    fontSize: '16px',
+                                    lineHeight: '31px',
+                                    margin: 0,
+                                    padding: 0,
+                                    fontWeight: 300
+                                  }}
+                                >
+                                  {i.get('name')}
+                                </h5>
+                              </GridItem>
+                              <GridItem width={'1-2'} extraClass={'uk-text-right'}>
+                                <ButtonGroup classNames={'mt-5'}>
+                                  <Button
+                                    text={'edit'}
+                                    flat={true}
+                                    waves={true}
+                                    small={true}
+                                    onClick={e => TicketsSettings.toggleEditTag(e)}
+                                  />
+                                  <Button
+                                    text={'remove'}
+                                    flat={true}
+                                    waves={true}
+                                    style={'danger'}
+                                    small={true}
+                                    onClick={e => this.onRemoveTagClicked(e, i)}
+                                  />
+                                </ButtonGroup>
+                              </GridItem>
+                            </Grid>
+                          </ZoneBox>
+                        </GridItem>
+                      </Grid>
+                      <Grid extraClass={'edit-tag z-box uk-clearfix nbt hide'} style={{ paddingTop: '5px' }}>
+                        <GridItem width={'1-1'}>
+                          <form onSubmit={e => this.onSubmitUpdateTag(e, i.get('_id'))}>
+                            <Grid>
+                              <GridItem width={'2-3'}>
+                                <input type='text' className={'md-input'} name={'name'} defaultValue={i.get('name')} />
+                              </GridItem>
+                              <GridItem width={'1-3'} style={{ paddingTop: '10px' }}>
+                                <ButtonGroup classNames={'uk-float-right uk-text-right'}>
+                                  <Button
+                                    text={'cancel'}
+                                    flat={true}
+                                    waves={true}
+                                    small={true}
+                                    onClick={e => TicketsSettings.toggleEditTag(e)}
+                                  />
+                                  <Button
+                                    type={'submit'}
+                                    text={'save'}
+                                    flat={true}
+                                    waves={true}
+                                    small={true}
+                                    style={'success'}
+                                  />
+                                </ButtonGroup>
+                              </GridItem>
+                            </Grid>
+                          </form>
+                        </GridItem>
+                      </Grid>
                     </GridItem>
-                  </Grid>
-                </GridItem>
-              )
-            })}
+                  )
+                })}
+              </Grid>
+            </GridItem>
           </Grid>
         </SettingItem>
       </div>
diff --git a/src/client/containers/Teams/index.jsx b/src/client/containers/Teams/index.jsx
index 16fbce7f3..46667cc62 100644
--- a/src/client/containers/Teams/index.jsx
+++ b/src/client/containers/Teams/index.jsx
@@ -62,50 +62,58 @@ class TeamsContainer extends React.Component {
     })
   }
 
+  onEditTeamClick (e, id) {
+    e.preventDefault()
+    console.log(id)
+  }
+
   render () {
     const items = this.props.teamsState.teams.map(team => {
       let actionMenu = [<DropdownItem key={0} text={'Edit'} />]
       if (helpers.canUser('teams:delete', true))
         actionMenu.push(<DropdownItem key={1} text={'Delete'} extraClass={'uk-text-danger'} />)
       return (
-        <GridItem key={team.get('_id')} width={'8-10'} extraClass={'uk-container-center'}>
-          <TruCard
-            loaderActive={team.get('loading')}
-            extraContentClass={'p-10'}
-            menu={actionMenu}
-            header={
-              <div className={'pt-15 pb-15'}>
-                <h3>{team.get('name')}</h3>
-              </div>
-            }
-            content={
-              <div className={'uk-clearfix'}>
-                <h6 style={{ margin: '0 0 8px 0', lineHeight: 1, fontSize: 13 }}>Members</h6>
-                {team.get('members').map(member => {
-                  const memberImage = member.get('image') ? member.get('image') : 'defaultProfile.jpg'
-                  return (
-                    <div key={member.get('_id')}>
-                      <div
-                        className={'uk-display-inline-block uk-float-left'}
-                        style={{ marginRight: 3 }}
-                        data-uk-tooltip='{pos: `bottom`}'
-                        title={member.get('fullname')}
-                      >
-                        <img
-                          src={`/uploads/users/${memberImage}`}
-                          height={25}
-                          width={25}
-                          className={'round'}
-                          alt={member.get('fullname')}
-                        />
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            }
-          />
-        </GridItem>
+        <CardList
+          key={team.get('_id')}
+          header={team.get('name')}
+          headerRightComponent={<a onClick={e => this.onEditTeamClick(e, team.get('_id'))}>Edit Team</a>}
+          extraClass={'mb-50'}
+        >
+          {team.get('members').map(member => {
+            const inputId = `${team.get('_id')}_${member.get('_id')}`
+            const profilePic = member.get('image') || 'defaultProfile.jpg'
+            return (
+              <CardListItem key={member.get('_id')}>
+                <div className={'uk-float-left'} style={{ padding: '6px 8px 0 0' }}>
+                  <input type='checkbox' id={inputId} style={{ display: 'none' }} className='svgcheckinput' />
+                  <label htmlFor={inputId} className='svgcheck'>
+                    <svg width='16px' height='16px' viewBox='0 0 18 18'>
+                      <path d='M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z' />
+                      <polyline points='1 9 7 14 15 4' />
+                    </svg>
+                  </label>
+                </div>
+                <div className={'avatar-wrapper uk-float-left'}>
+                  <img src={`/uploads/users/${profilePic}`} alt={member.get('username')} className={'round'} />
+                </div>
+                <div className={'uk-float-left'} style={{ padding: '0 8px', width: 220, lineHeight: '34px' }}>
+                  <span
+                    style={{
+                      textOverflow: 'ellipsis',
+                      display: 'inline-block',
+                      verticalAlign: 'top',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      width: '100%'
+                    }}
+                  >
+                    {member.get('fullname')}
+                  </span>
+                </div>
+              </CardListItem>
+            )
+          })}
+        </CardList>
       )
     })
     return (
@@ -128,39 +136,7 @@ class TeamsContainer extends React.Component {
           >
             <Grid gutterSize={'medium'}>
               <GridItem width={'8-10'} extraClass={'uk-container-center'}>
-                <CardList header={'Header'}>
-                  <CardListItem>
-                    <div>Test</div>
-                  </CardListItem>
-                  <CardListItem>
-                    <div className={'uk-float-left'} style={{ padding: '6px 8px 0 0' }}>
-                      <input type='checkbox' id='c_{{_id}}' style={{ display: 'none' }} className='svgcheckinput' />
-                      <label htmlFor='c_{{_id}}' className='svgcheck'>
-                        <svg width='16px' height='16px' viewBox='0 0 18 18'>
-                          <path d='M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z' />
-                          <polyline points='1 9 7 14 15 4' />
-                        </svg>
-                      </label>
-                    </div>
-                    <div className={'avatar-wrapper uk-float-left'}>
-                      <img src='/uploads/users/defaultProfile.jpg' alt='ProfilePicture' className={'round'} />
-                    </div>
-                    <div className={'uk-float-left'} style={{ padding: '0 8px', width: 220, lineHeight: '34px' }}>
-                      <span
-                        style={{
-                          textOverflow: 'ellipsis',
-                          display: 'inline-block',
-                          verticalAlign: 'top',
-                          whiteSpace: 'nowrap',
-                          overflow: 'hidden',
-                          width: '100%'
-                        }}
-                      >
-                        Chris Brame
-                      </span>
-                    </div>
-                  </CardListItem>
-                </CardList>
+                {items}
               </GridItem>
             </Grid>
           </InfiniteScroll>
diff --git a/src/public/js/pages/tickets.js b/src/public/js/pages/tickets.js
index a9e59d4d6..81cfebacb 100644
--- a/src/public/js/pages/tickets.js
+++ b/src/public/js/pages/tickets.js
@@ -38,7 +38,7 @@ define('pages/tickets', [
           { width: '50px', targets: 0 },
           { width: '50px', targets: 1 },
           { width: '65px', targets: 2 },
-          { width: '20%', targets: 3 },
+          { width: '23%', targets: 3 },
           { width: '110px', targets: 4 }
         ],
         order: [[2, 'desc']],
diff --git a/src/sass/partials/cardlist.sass b/src/sass/partials/cardlist.sass
index e8ea5877f..dcec17d77 100644
--- a/src/sass/partials/cardlist.sass
+++ b/src/sass/partials/cardlist.sass
@@ -22,6 +22,10 @@
     position: absolute
     top: -24px
     left: 0
+  .md-card-list-header-right
+    @extend .md-card-list-header
+    left: auto
+    right: 0
   .md-card-list
     margin: 48px 0 0 0
     position: relative