diff --git a/Server/Roleypoly.js b/Server/Roleypoly.js
index 8df8f66..9be93fe 100644
--- a/Server/Roleypoly.js
+++ b/Server/Roleypoly.js
@@ -40,6 +40,7 @@ class Roleypoly {
     //   enableReadyCheck: true,
     //   enableOfflineQueue: true
     // })
+    this.ctx.server = new (require('./services/server'))(this.ctx)
     this.ctx.discord = new (require('./services/discord'))(this.ctx)
     this.ctx.sessions = new (require('./services/sessions'))(this.ctx)
     this.ctx.P = new (require('./services/presentation'))(this.ctx)
diff --git a/Server/api/servers.js b/Server/api/servers.js
index 5af758d..ad651c1 100644
--- a/Server/api/servers.js
+++ b/Server/api/servers.js
@@ -2,7 +2,7 @@ module.exports = (R, $) => {
   R.get('/api/servers', async (ctx) => {
     const { userId } = ctx.session
     const srv = $.discord.getRelevantServers(userId)
-    const presentable = $.P.oldPresentableServers(srv, userId)
+    const presentable = await $.P.oldPresentableServers(srv, userId)
 
     ctx.body = presentable
   })
diff --git a/Server/services/discord.js b/Server/services/discord.js
index da2954e..d1ca09f 100644
--- a/Server/services/discord.js
+++ b/Server/services/discord.js
@@ -20,6 +20,10 @@ class DiscordService extends Service {
 
   async startBot () {
     await this.client.login(this.botToken)
+
+    for (let server of this.client.guilds.array()) {
+      await this.ctx.server.ensure(server)
+    }
   }
 
   getRelevantServers (userId) {
diff --git a/Server/services/presentation.js b/Server/services/presentation.js
index e5b5643..9627ed0 100644
--- a/Server/services/presentation.js
+++ b/Server/services/presentation.js
@@ -10,11 +10,15 @@ class PresentationService extends Service {
     this.cache = LRU({ max: 500, maxAge: 100 * 60 * 5 })
   }
 
-  oldPresentableServers (collection, userId) {
-    return collection.map((server) => {
+  async oldPresentableServers (collection, userId) {
+    let servers = []
+
+    for (let server of collection.array()) {
+      const sd = await this.ctx.server.get(server.id)
+      console.log(sd.categories)
       const gm = server.members.get(userId)
 
-      return {
+      servers.push({
         id: server.id,
         gm: {
           nickname: gm.nickname,
@@ -26,24 +30,26 @@ class PresentationService extends Service {
           ownerID: server.ownerID,
           icon: server.icon
         },
-        roles: server.roles.filter(r => r.id !== server.id).map(r => ({
-          id: r.id,
-          color: r.color,
-          name: r.name,
-          selected: gm.roles.has(r.id),
-          position: r.position
-        })),
-        message: 'moe moe kyuuuuuuuuun~',
+        roles: (await this.rolesByServer(server, sd)).map(r => ({ ...r, selected: gm.roles.has(r.id) })),
+        message: sd.message,
+        categories: sd.categories,
         perms: this.discord.getPermissions(gm)
-      }
-    })
+      })
+    }
+
+    return servers
   }
 
-  rolesByServer (serverId, userId) {
-    // get from discord, merge with server categories
+  async rolesByServer (server) {
+    return server.roles
+    .filter(r => r.id !== server.id) // get rid of @everyone
+    .map(r => ({
+      id: r.id,
+      color: r.color,
+      name: r.name,
+      position: r.position
+    }))
   }
-
-
 }
 
 module.exports = PresentationService
diff --git a/Server/services/server.js b/Server/services/server.js
index e61dfe4..f79db37 100644
--- a/Server/services/server.js
+++ b/Server/services/server.js
@@ -30,12 +30,12 @@ class ServerService extends Service {
     return srv.update(newData)
   }
 
-  get (id) {
-    return this.Server.findOne({
+  async get (id) {
+    return (await this.Server.findOne({
       where: {
         id
       }
-    })
+    })).get({ plain: true })
   }
 }
 
diff --git a/UI/src/components/role-picker/RolePicker.sass b/UI/src/components/role-picker/RolePicker.sass
index 2f7af8e..b737c68 100644
--- a/UI/src/components/role-picker/RolePicker.sass
+++ b/UI/src/components/role-picker/RolePicker.sass
@@ -4,3 +4,18 @@
   
   &.hidden 
     opacity: 0
+
+  &__categories
+    display: flex
+    align-items: flex-start
+    flex-wrap: wrap
+    flex-direction: row
+
+
+  &__category
+    // flex: 1 3 33%
+    box-sizing: border-box
+    background-color: var(--c-1)
+    padding: 15px
+    margin: 10px
+    width: 220px - 30px
\ No newline at end of file
diff --git a/UI/src/components/role-picker/actions.js b/UI/src/components/role-picker/actions.js
index 282cf43..fd3c413 100644
--- a/UI/src/components/role-picker/actions.js
+++ b/UI/src/components/role-picker/actions.js
@@ -1,4 +1,4 @@
-import { Map, Set } from 'immutable'
+import { Map, Set, fromJS } from 'immutable'
 import superagent from 'superagent'
 
 export const roleUpdate = (id, oldState) => (dispatch, getState) => {
@@ -22,7 +22,6 @@ export const setup = id => async dispatch => {
   //     roles: data
   //   }
   // })
-
   dispatch(constructView(id))
 }
 
@@ -30,16 +29,33 @@ export const constructView = id => (dispatch, getState) => {
   const server = getState().servers.get(id)
   const roles = server.get('roles')
 
-  const categories = roles.groupBy(x => x.get('category'))
+  const categories = server.get('categories')
+
+  const allRoles = server.get('roles').map(r => r.get('id')).toSet()
+  const accountedRoles = categories.map(c => c.get('roles')).toSet().flatten()
+  const unaccountedRoles = allRoles.subtract(accountedRoles)
+
+  // console.log('roles', allRoles.toJS(), accountedRoles.toJS(), unaccountedRoles.toJS())
+
+  const vm = categories.set('Uncategorized', fromJS({
+    roles: unaccountedRoles,
+    hidden: false,
+    type: 'multi'
+  })).map(c => {
+    const roles = c.get('roles').map(r => server.get('roles').find(sr => sr.get('id') === r))
+    return c.set('roles_map', roles)
+  })
+
   const selected = roles.reduce((acc, r) => acc.set(r.get('id'), r.get('selected')), Map())
 
   console.log(categories, selected)
   dispatch({
     type: Symbol.for('setup role picker'),
     data: {
-      viewMap: categories,
+      viewMap: vm,
       rolesSelected: selected,
-      originalRolesSelected: selected
+      originalRolesSelected: selected,
+      hidden: false
     }
   })
 }
diff --git a/UI/src/components/role-picker/index.js b/UI/src/components/role-picker/index.js
index 293e7a7..f8f64ff 100644
--- a/UI/src/components/role-picker/index.js
+++ b/UI/src/components/role-picker/index.js
@@ -20,31 +20,53 @@ class RolePicker extends Component {
     dispatch(Actions.setup(server))
   }
 
+  componentWillReceiveProps (nextProps) {
+    if (this.props.match.params.server !== nextProps.match.params.server) {
+      const { dispatch } = this.props
+      dispatch(Actions.setup(nextProps.match.params.server))
+    }
+  }
+
   isSelected (id) {
     return this.props.data.getIn([ 'rolesSelected', id ])
   }
 
   render () {
-    console.log(this.constructor.name, this.props)
-    if (this.props.server === undefined) {
+    const { data, server } = this.props
+    const vm = data.get('viewMap') 
+
+    if (server === undefined) {
       return null
     }
 
-    return <div className={`role-picker ${(this.props.data.hidden) ? 'hidden' : ''}`}>
-      { (this.props.server.get('message') !== '')
+    return <div className={`role-picker ${(data.get('hidden')) ? 'hidden' : ''}`}>
+      { (server.get('message') !== '')
         ? <section>
             <h3>Server Message</h3>
-            <p>{this.props.server.get('message')}</p>
+            <p>{server.get('message')}</p>
           </section>
         : null
       }
       <section>
         <h3>Roles</h3>
+        <div className="role-picker__categories">
           {
-            this.props.server.get('roles').map((r, k) => {
-              return <Role key={k} role={r} selected={this.isSelected(r.get('id'))} onToggle={() => this.props.dispatch(Actions.roleUpdate(r.get('id'), this.isSelected(r.get('id'))))} />
-            })
+            vm.map((c, name) => {
+              if (c.get('hidden')) {
+                return null
+              }
+
+              return <div key={name} className="role-picker__category">
+                <h4>{ name }</h4>
+                {
+                  c.get('roles_map').map((r, k) => {
+                    return <Role key={k} role={r} selected={this.isSelected(r.get('id'))} onToggle={() => this.props.dispatch(Actions.roleUpdate(r.get('id'), this.isSelected(r.get('id'))))} />
+                  }).toArray()
+                }
+              </div>
+            }).toArray()
           }
+        </div>
       </section>
     </div>
   }
diff --git a/UI/src/components/servers/index.sass b/UI/src/components/servers/index.sass
index a5f8de0..12fe4c8 100644
--- a/UI/src/components/servers/index.sass
+++ b/UI/src/components/servers/index.sass
@@ -1,6 +1,6 @@
 .servers
 
-  $fullH: calc(100vh - 75px)
+  $fullH: calc(100vh - 180px)
 
   display: grid
   grid-template-rows: 100px $fullH
@@ -19,3 +19,4 @@
     background-color: var(--c-3)
     padding: 15px
     overflow-y: scroll
+    box-sizing: border-box
diff --git a/UI/src/reducers/role-picker.js b/UI/src/reducers/role-picker.js
index c17254f..4f4de60 100644
--- a/UI/src/reducers/role-picker.js
+++ b/UI/src/reducers/role-picker.js
@@ -2,17 +2,17 @@ import { Map, OrderedMap } from 'immutable'
 
 const initialState = Map({
   hidden: true, // should the view be hidden?
-  emptyRoles: true, // helps derender roles so there's no visible element state change
+  // emptyRoles: true, // helps derender roles so there's no visible element state change
   viewMap: OrderedMap({}), // roles in categories
-  originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected 
+  originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected
   rolesSelected: Map({}) // Map<role id, bool> -- new roles for diffing
 })
 
 export default (state = initialState, { type, data }) => {
   switch (type) {
     case Symbol.for('setup role picker'):
-      return state.mergeDeep(data)
- 
+      return Map(data)
+
     case Symbol.for('hide role picker ui'):
       return {
         ...state,
@@ -27,9 +27,9 @@ export default (state = initialState, { type, data }) => {
 
     case Symbol.for('update selected roles'):
       return state.setIn(['rolesSelected', data.id], data.state)
-      
-    case Symbol.for('zero role picker'):
-      return initialState
+
+    // case Symbol.for('zero role picker'):
+      // return initialState
 
     default:
       return state
diff --git a/UI/src/reducers/servers.js b/UI/src/reducers/servers.js
index 84de745..75e82e2 100644
--- a/UI/src/reducers/servers.js
+++ b/UI/src/reducers/servers.js
@@ -14,6 +14,7 @@ const blankServer = Map({
     icon: '4fa0c1063649a739f3fe1a0589aa2c03'
   },
   roles: Set([]),
+  categories: OrderedMap(),
   perms: {
     isAdmin: true,
     canManageRoles: true