diff --git a/app/controllers/DraftBoard.controller.js b/app/controllers/DraftBoard.controller.js
new file mode 100644
index 0000000..773365f
--- /dev/null
+++ b/app/controllers/DraftBoard.controller.js
@@ -0,0 +1,47 @@
+const { Controller } = require('libflitter')
+
+class DraftBoard extends Controller {
+    static get services() {
+        return [...super.services, 'models']
+    }
+
+    async get_available_players(req, res, next) {
+        const Player = this.models.get('Player')
+        const players = await Player.get_unobligated_players()
+        const api_data = []
+
+        for ( const player of players ) {
+            api_data.push(await player.to_api())
+        }
+
+        return res.api(api_data)
+    }
+
+    async draft_player_to_team(req, res, next) {
+        if ( !req.body.player_id ) {
+            return res.status(400)
+                .message('Missing required field: player_id')
+                .api()
+        }
+
+        const Player = this.models.get('Player')
+        const player = await Player.findById(req.body.player_id)
+        if ( !player ) {
+            return res.status(400)
+                .message('A player with that ID cannot be found.')
+                .api()
+        }
+
+        if ( await player.is_obligated() ) {
+            return res.status(400)
+                .message('This player has already been drafted.')
+                .api()
+        }
+
+        req.user_team.player_ids.push(player.id)
+        await req.user_team.save()
+        return res.api()
+    }
+}
+
+module.exports = exports = DraftBoard
diff --git a/app/models/Player.model.js b/app/models/Player.model.js
index d6c6fdf..5b7ebbc 100644
--- a/app/models/Player.model.js
+++ b/app/models/Player.model.js
@@ -65,6 +65,32 @@ class Player extends Model {
         return new this(model_data)
     }
 
+    static async get_unobligated_players() {
+        const Team = this.prototype.models.get('Team')
+        let obligated_player_ids = []
+
+        const teams = await Team.find()
+        for ( const team of teams ) {
+            obligated_player_ids = obligated_player_ids.concat(team.player_ids)
+        }
+
+        return this.find({
+            _id: {
+                $nin: obligated_player_ids.map(x => this.to_object_id(x))
+            }
+        })
+    }
+
+    async is_obligated() {
+        const Team = this.models.get('Team')
+        const teams = await Team.find()
+        for ( const team of teams ) {
+            if ( team.player_ids.includes(this.id) ) return true
+        }
+
+        return false
+    }
+
     async to_api() {
         return {
             id: this.id,
diff --git a/app/models/auth/User.model.js b/app/models/auth/User.model.js
index 1c92291..3cb5c22 100644
--- a/app/models/auth/User.model.js
+++ b/app/models/auth/User.model.js
@@ -6,6 +6,10 @@ const AuthUser = require('flitter-auth/model/User')
  * properties here as you need.
  */
 class User extends AuthUser {
+    static get services() {
+        return [...super.services, 'models']
+    }
+
     static get schema() {
         return {...super.schema, ...{
             // other schema fields here
@@ -13,6 +17,10 @@ class User extends AuthUser {
     }
 
     // Other members and methods here
+    async team() {
+        const Team = this.models.get('Team')
+        return Team.getForUser(this)
+    }
 }
 
 module.exports = exports = User
diff --git a/app/routing/routers/api.routes.js b/app/routing/routers/api.routes.js
index eeb0a15..9e8069f 100644
--- a/app/routing/routers/api.routes.js
+++ b/app/routing/routers/api.routes.js
@@ -50,6 +50,8 @@ const index = {
         '/my-team': ['controller::Teams.get_my_team'],
         '/my-team/players': ['controller::Teams.get_my_team_players'],
         '/my-team/lineup': ['controller::Teams.get_my_team_current_lineup'],
+
+        '/draft-board/available': ['controller::DraftBoard.get_available_players'],
     },
 
     /*
@@ -62,6 +64,8 @@ const index = {
     post: {
         '/my-team': ['controller::Teams.save_my_team'],
         '/my-team/lineup': ['controller::Teams.save_my_team_lineup'],
+
+        '/draft-board/draft-player': ['controller::DraftBoard.draft_player_to_team'],
     },
 
     // You can include other HTTP verbs here.
diff --git a/frontend/src/components/pages/DraftBoard.component.js b/frontend/src/components/pages/DraftBoard.component.js
index fbf9e21..5fd5985 100644
--- a/frontend/src/components/pages/DraftBoard.component.js
+++ b/frontend/src/components/pages/DraftBoard.component.js
@@ -1,6 +1,7 @@
 import {Component} from '../../../lib/vues6.js'
 import {fake_players} from '../../module/fake_data.js'
 import {GridCellRenderType} from '../Grid.component.js'
+import {api} from '../../module/api.js'
 import {clone} from '../../module/util.js'
 
 const template = `
@@ -45,7 +46,7 @@ class DraftBoardComponent extends Component {
             renderer: (_, data) => `
                 <div class="center">
                     <img src="${data.image}" alt="${data.name}" height="50" style="border-radius: 50%">
-                    <span>${data.name}</span>
+                    <span>${data.name} (#${data.number})</span>
                 </div>
             `,
         }
@@ -61,7 +62,7 @@ class DraftBoardComponent extends Component {
             renderer: (_, data) => `
                 <div class="center">
                     <img src="${data.image}" alt="${data.name}" height="50" style="border-radius: 50%">
-                    <span>${data.name}</span>
+                    <span>${data.name} (#${data.number})</span>
                 </div>
             `,
         },
@@ -111,14 +112,18 @@ class DraftBoardComponent extends Component {
             button_hidden: (row, col) => this.top_picks.includes(row),
             on_click: (row, col) => {
                 this.top_picks.push(row);
+                api.draft_player(row.id).then(() => {
+
+                });
             },
         },
     ]
 
-    data = clone(fake_players)
+    data = []
 
     async vue_on_create() {
-
+        this.top_picks = await api.get_my_team_players()
+        this.data = await api.get_available_draft_players()
     }
 }
 
diff --git a/frontend/src/module/api.js b/frontend/src/module/api.js
index d443761..744f80e 100644
--- a/frontend/src/module/api.js
+++ b/frontend/src/module/api.js
@@ -3,6 +3,14 @@ class API {
         this.base_url = APP_BASE_PATH.replace('/app/', '/api/v1/')
     }
 
+    async get_available_draft_players() {
+        return this.get_request('draft-board/available')
+    }
+
+    async draft_player(player_id) {
+        return this.post_request('draft-board/draft-player', { player_id })
+    }
+
     async save_my_team(team_data) {
         return this.post_request('my-team', team_data)
     }