diff --git a/classes/Game.js b/classes/Game.js
index afe8171..11a8b3b 100644
--- a/classes/Game.js
+++ b/classes/Game.js
@@ -1,15 +1,22 @@
+const dayjs = require('dayjs');
 const crypto = require('crypto');
 
 const Team = require('./Team');
 
 module.exports = class Game {
+	onStateChange = null;
+
 	id = crypto.randomUUID();
-	name = null;
+	champions = null;
 	teams = null;
+	expiration = dayjs().add(24, 'hour');
+
+	roundExpiration = null;
 
 	bans = [[], []];
 	picks = [[], []];
 
+	hover = [null, null];
 	ready = [false, false];
 
 	order = [
@@ -37,12 +44,18 @@ module.exports = class Game {
 	];
 	current = 0;
 
-	constructor(name, teamNames) {
-		this.name = name;
+	constructor(teamNames, champions, onStateChange) {
+		this.champions = champions;
 		this.teams = [
 			new Team(teamNames[0]),
 			new Team(teamNames[1]),
 		];
+
+		this.onStateChange = onStateChange;
+	}
+
+	getExpiration() {
+		return this.expiration;
 	}
 
 	getId() {
@@ -52,12 +65,14 @@ module.exports = class Game {
 	getState() {
 		return {
 			id: this.id,
-			name: this.name,
 
 			ready: this.ready,
+			hover: this.hover,
 			bans: this.bans,
 			picks: this.picks,
 
+			roundExpiration: Number(this.roundExpiration),
+
 			order: this.order,
 			current: this.current,
 
@@ -85,7 +100,25 @@ module.exports = class Game {
 		return index === null ? null : this.teams[index];
 	}
 
-	canAct(id, action) {
+	endRound() {
+		this.roundExpiration = null;
+		clearTimeout(this.roundTimeout);
+	}
+
+	startRound() {
+		this.endRound();
+
+		const ROUND_LENGTH_SECONDS = 33;
+
+		this.roundExpiration = dayjs().add(ROUND_LENGTH_SECONDS, 'second');
+		this.roundTimeout = setTimeout(() => this.autoAct(this.order[this.current][1]), ROUND_LENGTH_SECONDS * 1000);
+	}
+
+	canAct(id, action, value) {
+		if(value === null) {
+			return false;
+		}
+
 		const teamIndex = this.getTeamIndexById(id);
 
 		if(teamIndex === null) {
@@ -98,28 +131,59 @@ module.exports = class Game {
 
 		const currentRound = this.order[this.current];
 
-		return currentRound[0] === teamIndex && currentRound[1] === action;
+		if([this.picks, this.bans].flat(Infinity).includes(value)) {
+			return false;
+		}
+
+		return currentRound[0] === teamIndex && ['hover', currentRound[1]].includes(action);
 	}
 
-	act(id, action, championId) {
-		if(!this.canAct(id, action)) {
-			return false;
+	act(id, action, value, bypass = false) {
+		if(!bypass && !this.canAct(id, action, value)) {
+			return;
 		}
 
 		const teamIndex = this.getTeamIndexById(id);
 
-		if(action === 'ban') {
-			this.bans[teamIndex].push(championId);
+		switch(action) {
+			case 'ban':
+			case 'pick':
+				this[action + 's'][teamIndex].push(value);
+				this.hover[teamIndex] = null;
+				++this.current;
 
-			++this.current;
-		} else if(action === 'pick') {
-			this.picks[teamIndex].push(championId);
+				if(this.order[this.current][1] === 'done') {
+					this.endRound();
+				} else {
+					this.startRound();
+				}
+
+				break;
+
+			case 'hover':
+			case 'ready':
+				this[action][teamIndex] = value;
 
-			++this.current;
-		} else if(action === 'ready') {
-			this.ready[teamIndex] = true;
+				if(action === 'ready' && !this.ready.includes(false)) {
+					this.startRound();
+				}
+
+				break;
+		}
+
+		this.onStateChange(this);
+	}
+
+	autoAct(action) {
+		const teamIndex = this.order[this.current][0];
+
+		let value = null;
+		if(this.hover[teamIndex] !== null) {
+			value = this.hover[teamIndex];
+		} else if(action === 'pick') {
+			value = this.champions.filter(champion => ![this.picks, this.bans].flat().includes(champion.id)).sort(() => Math.random() < 0.5 ? 1 : -1)[0].id;
 		}
 
-		return true;
+		this.act(this.teams[teamIndex].getId(), action, value, true);
 	}
 };
diff --git a/classes/GameList.js b/classes/GameList.js
new file mode 100644
index 0000000..2ba216c
--- /dev/null
+++ b/classes/GameList.js
@@ -0,0 +1,28 @@
+const dayjs = require('dayjs');
+
+module.exports = class GameList {
+	static games = {};
+
+	static add(id, game) {
+		this.games[id] = game;
+	}
+
+	static get(id) {
+		return this.games[id];
+	}
+
+	static flushExpired() {
+		const now = dayjs();
+		const expiredIds = [];
+
+		for(let id in this.games) {
+			if(this.games.hasOwnProperty(id) && now.isAfter(this.games[id].getExpiration())) {
+				delete this.games[id];
+
+				expiredIds.push(id);
+			}
+		}
+
+		return expiredIds;
+	}
+};
diff --git a/create-server.js b/create-server.js
index e153aca..fa70d89 100644
--- a/create-server.js
+++ b/create-server.js
@@ -1,24 +1,28 @@
 module.exports = function createServer(createGame, onJoinGame, onGameAction) {
 	const express = require('express');
 	const app = express();
+	const compression = require('compression');
 	const bodyParser = require('body-parser');
 	const http = require('http').Server(app);
 	const io = require('socket.io')(http);
 	const HTTP_PORT = 80;
 	const SOCKET_PORT = 3000;
 
+	app.use(compression());
 	app.use(express.static('public'));
 	app.use(bodyParser.json());
 
 	app.post('/game', createGame);
 	io.on('connection', function (socket) {
-		onJoinGame(io, socket);
+		onJoinGame(socket);
 
 		socket.on('game-action', function (data) {
-			onGameAction(io, socket, data);
+			onGameAction(socket, data);
 		});
 	});
 
 	http.listen(HTTP_PORT);
 	io.listen(SOCKET_PORT);
+
+	return io;
 };
diff --git a/index.js b/index.js
index e46a857..58f0668 100644
--- a/index.js
+++ b/index.js
@@ -1,17 +1,9 @@
 const ChampionList = require('./classes/ChampionList');
+const GameList = require('./classes/GameList');
 const Game = require('./classes/Game');
 const createServer = require('./create-server');
 
-global.games = {};
-
-setInterval(ChampionList.update, 3600); // Hourly
-ChampionList.update();
-
 function validateGameCreation(input) {
-	if(typeof input.name !== 'string') {
-		return false;
-	}
-
 	if(!Array.isArray(input.teams) || input.teams.length !== 2 || typeof input.teams[0] !== 'string' || typeof input.teams[1] !== 'string') {
 		return false;
 	}
@@ -19,7 +11,6 @@ function validateGameCreation(input) {
 	const cleanse = string => string.trim().substr(0, 30);
 
 	return {
-		name: cleanse(input.name),
 		teams: [
 			cleanse(input.teams[0]),
 			cleanse(input.teams[1]),
@@ -34,10 +25,10 @@ function createGame(req, res) {
 		res.end();
 	}
 
-	const game = new Game(input.name, input.teams);
+	const game = new Game(input.teams, ChampionList.get(), game => io.to(`game.${game.getId()}`).emit('game-state', game.getState()));
 	const teams = game.getTeams();
 
-	global.games[game.getId()] = game;
+	GameList.add(game.getId(), game);
 
 	res.send({
 		game: game.getId(),
@@ -45,33 +36,44 @@ function createGame(req, res) {
 	});
 }
 
-function onJoinGame(io, socket) {
-	const game = global.games[socket.handshake.query.game];
+function onJoinGame(socket) {
+	const game = GameList.get(socket.handshake.query.game);
 
 	if(game === undefined) {
+		socket.emit('game-expired');
 		socket.disconnect(true);
 
 		return;
 	}
 
-	socket.emit('game-state', game.getState());
 	socket.emit('champions', ChampionList.get());
+	socket.emit('assign-team', game.getTeamIndexById(socket.handshake.query.team));
+	socket.emit('game-state', game.getState());
 	socket.join(`game.${game.getId()}`);
 }
 
-function onGameAction(io, socket, data) {
-	const game = global.games[socket.handshake.query.game];
+function onGameAction(socket, data) {
+	const game = GameList.get(socket.handshake.query.game);
 
 	if(game === undefined) {
+		socket.emit('game-expired');
 		socket.disconnect(true);
 
 		return;
 	}
 
-	const success = game.act(socket.handshake.query.team, data.action, data.champion);
-	const recipient = success ? io.to(`game.${game.getId()}`) : socket;
-
-	recipient.emit('game-state', game.getState());
+	game.act(socket.handshake.query.team, data.action, data.value);
 }
 
-createServer(createGame, onJoinGame, onGameAction);
+const io = createServer(createGame, onJoinGame, onGameAction);
+
+setInterval(() => ChampionList.update(), 3600000); // 1 hour
+ChampionList.update();
+
+setInterval(() => {
+	const expired = GameList.flushExpired();
+
+	for(let id of expired) {
+		io.to(`game.${id}`).emit('game-expired');
+	}
+}, 3600000); // 1 hour
diff --git a/package-lock.json b/package-lock.json
index 12e1210..ca820e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "version": "0.0.1",
       "license": "proprietary",
       "dependencies": {
+        "compression": "^1.7.4",
+        "dayjs": "^1.10.4",
         "express": "^4.17.1",
         "node-fetch": "^2.6.1",
         "socket.io": "^3.1.1"
@@ -3804,7 +3806,6 @@
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
       "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dev": true,
       "dependencies": {
         "mime-db": ">= 1.43.0 < 2"
       },
@@ -3816,7 +3817,6 @@
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
       "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-      "dev": true,
       "dependencies": {
         "accepts": "~1.3.5",
         "bytes": "3.0.0",
@@ -3834,7 +3834,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -4870,6 +4869,11 @@
         "type": "^1.0.1"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz",
+      "integrity": "sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -8510,7 +8514,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
       "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -18786,7 +18789,6 @@
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
       "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dev": true,
       "requires": {
         "mime-db": ">= 1.43.0 < 2"
       }
@@ -18795,7 +18797,6 @@
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
       "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-      "dev": true,
       "requires": {
         "accepts": "~1.3.5",
         "bytes": "3.0.0",
@@ -18809,8 +18810,7 @@
         "bytes": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
-          "dev": true
+          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
         }
       }
     },
@@ -19644,6 +19644,11 @@
         "type": "^1.0.1"
       }
     },
+    "dayjs": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz",
+      "integrity": "sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -22470,8 +22475,7 @@
     "on-headers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-      "dev": true
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
     },
     "once": {
       "version": "1.4.0",
diff --git a/package.json b/package.json
index 3f1ade5..5db7382 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,15 @@
 {
   "name": "prodraft",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "A remake of http://prodraft.leagueoflegends.com",
   "main": "index.js",
   "dependencies": {
+    "compression": "^1.7.4",
+    "dayjs": "^1.10.4",
     "express": "^4.17.1",
     "node-fetch": "^2.6.1",
     "socket.io": "^3.1.1"
   },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "keywords": [],
   "author": "CSV IT Consulting",
   "license": "proprietary",
diff --git a/src/components/ChampionBanList.vue b/src/components/ChampionBanList.vue
index ece9ceb..b1b2d9e 100644
--- a/src/components/ChampionBanList.vue
+++ b/src/components/ChampionBanList.vue
@@ -3,8 +3,10 @@
 		<div class="card bg-transparent border-0 py-3 px-2">
 			<div class="row" :class="team === 0 ? 'flex-row-reverse' : 'flex-row'">
 				<template v-for="index in 5">
-					<champion-icon v-if="index <= bans.length" class="card-img rounded-0 bg-white mx-2" :champion="bans[index - 1]" :size="48"></champion-icon>
-					<div v-else class="bg-secondary mx-2" style="width: 48px; height: 48px;"></div>
+					<div class="bg-secondary mx-2" v-if="index <= bannedChampions.length && bannedChampions[index - 1].data !== null">
+						<champion-icon class="d-flex justify-content-center card-img rounded-0" :class="bannedChampions[index - 1].hovered ? 'champion-hovered' : 'champion-banned'" :champion="bannedChampions[index - 1].data" :size="48"></champion-icon>
+					</div>
+					<div v-else class="bg-secondary mx-2" :class="{ 'champion-banned': bannedChampions[index - 1] !== undefined && bannedChampions[index - 1].data === null }" style="width: 48px; height: 48px;"></div>
 					<span v-if="index === 3" style="border-left: 5px solid #444444" class="mx-2"></span>
 				</template>
 			</div>
@@ -17,12 +19,40 @@ import ChampionIcon from './ChampionIcon';
 export default {
 	components: { ChampionIcon },
 
+	computed: {
+		bannedChampions() {
+			const champions = this.bans.map(id => ({
+				data: id === null ? null : this.champions.find(champion => champion.id === id),
+				hovered: false,
+			}));
+
+			if(this.hovered !== null) {
+				champions.push({
+					data: this.champions.find(champion => champion.id === this.hovered),
+					hovered: true,
+				});
+			}
+
+			return champions;
+		},
+	},
+
 	props: {
 		bans: {
 			type: Array,
 			required: true,
 		},
 
+		champions: {
+			type: Array,
+			required: true,
+		},
+
+		hovered: {
+			type: String,
+			default: null,
+		},
+
 		team: {
 			type: Number,
 			required: true,
@@ -30,3 +60,32 @@ export default {
 	},
 };
 </script>
+<style scoped>
+.champion-banned {
+	filter: grayscale(1);
+}
+
+.champion-banned::after {
+	content: "🚫";
+	font-size: 16px;
+	opacity: 50%;
+
+	position: absolute;
+	right: 0;
+	bottom: 0;
+}
+
+@keyframes champion-hovered {
+	0%, 100% {
+		opacity: 100%;
+	}
+
+	50% {
+		opacity: 50%;
+	}
+}
+
+.champion-hovered {
+	animation: champion-hovered 2s infinite ease-in-out;
+}
+</style>
diff --git a/src/components/ChampionIcon.vue b/src/components/ChampionIcon.vue
index 86c523c..0fc74fe 100644
--- a/src/components/ChampionIcon.vue
+++ b/src/components/ChampionIcon.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="image" :style="style" v-if="type === 'sprite'"></div>
-	<img class="image" :src="url" :style="style" v-else>
+	<div class="image" :style="style" v-if="type === 'sprite'" :title="champion.name"></div>
+	<img class="image" :src="url" :style="style" :title="champion.name" v-else>
 </template>
 <script>
 export default {
diff --git a/src/components/ChampionPickList.vue b/src/components/ChampionPickList.vue
index cafed57..4a1a50e 100644
--- a/src/components/ChampionPickList.vue
+++ b/src/components/ChampionPickList.vue
@@ -1,16 +1,12 @@
 <template>
 	<div class="d-flex justify-content-center text-center">
-		<div class="card bg-transparent border-0">
+		<div class="card bg-transparent border-0 align-items-center">
 			<template v-for="index in 5">
-				<template v-if="index <= picks.length">
-					<champion-icon class="card-img rounded-0 bg-white" :champion="picks[index - 1]" :size="100"></champion-icon>
-					<p class="card-text">{{ picks[index - 1].name }}</p>
-				</template>
-				<template v-else>
-					<div class="bg-secondary" style="width: 100px; height: 100px;"></div>
-					<p class="card-text">&nbsp;</p>
-				</template>
-				<span v-if="index === 3" style="border-bottom: 5px solid #444444" class="mb-3"></span>
+				<div v-if="index <= pickedChampions.length" class="bg-secondary mb-3">
+					<champion-icon class="card-img rounded-0 bg-white" :class="{ 'champion-hovered': pickedChampions[index - 1].hovered }" :champion="pickedChampions[index - 1].data" :size="100"></champion-icon>
+				</div>
+				<div v-else class="bg-secondary mb-3" style="width: 100px; height: 100px;"></div>
+				<span v-if="index === 3" style="border-bottom: 5px solid #444444" class="mb-3 w-100"></span>
 			</template>
 		</div>
 	</div>
@@ -21,7 +17,35 @@ import ChampionIcon from './ChampionIcon';
 export default {
 	components: { ChampionIcon },
 
+	computed: {
+		pickedChampions() {
+			const champions = this.picks.map(id => ({
+				data: this.champions.find(champion => champion.id === id),
+				hovered: false,
+			}));
+
+			if(this.hovered !== null) {
+				champions.push({
+					data: this.champions.find(champion => champion.id === this.hovered),
+					hovered: true,
+				});
+			}
+
+			return champions;
+		},
+	},
+
 	props: {
+		champions: {
+			type: Array,
+			required: true,
+		},
+
+		hovered: {
+			type: String,
+			default: null,
+		},
+
 		picks: {
 			type: Array,
 			required: true,
@@ -29,3 +53,18 @@ export default {
 	},
 };
 </script>
+<style scoped>
+@keyframes champion-hovered {
+	0%, 100% {
+		opacity: 100%;
+	}
+
+	50% {
+		opacity: 50%;
+	}
+}
+
+.champion-hovered {
+	animation: champion-hovered 2s infinite ease-in-out;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ChampionPicker.vue b/src/components/ChampionPicker.vue
index 74715be..0fc92b3 100644
--- a/src/components/ChampionPicker.vue
+++ b/src/components/ChampionPicker.vue
@@ -1,20 +1,20 @@
 <template>
 	<div class="h-100 pt-3">
-		<div class="row px-3" style="height: 37px;">
+		<div class="row px-3" style="height: 38px;">
 			<div class="col-12">
-				<div class="input-group">
+				<div class="input-group h-100">
 					<div class="input-group-prepend">
 						<button type="button" class="btn btn-secondary" :class="{ active: input.tag === null }" @click="filterTag(null)">All</button>
 						<button type="button" class="btn btn-secondary" v-for="tag in allTags" :class="{ active: input.tag === tag }" @click="filterTag(tag)">{{ tag }}</button>
 					</div>
-					<input type="text" class="form-control" v-model="input.search">
+					<input type="text" class="form-control h-100" v-model="input.search">
 				</div>
 			</div>
 		</div>
-		<div class="row mt-3" style="height: calc(100% - 1rem - 37px);">
+		<div class="row mt-3" style="height: calc(100% - 1rem - 38px);">
 			<div class="col-12 d-flex flex-wrap justify-content-start align-content-start h-100 overflow-auto px-3 pb-3">
 				<div v-for="champion in filteredChampions" class="m-2 d-flex">
-					<champion-icon :champion="champion" :size="48" class="d-flex justify-content-center" :class="{ 'champion-picked': pickedIds.includes(champion.id), 'champion-banned': bannedIds.includes(champion.id) }"></champion-icon>
+					<champion-icon :champion="champion" :size="48" class="d-flex justify-content-center champion-icon" :class="{ 'champion-picked': pickedIds.includes(champion.id), 'champion-banned': bannedIds.includes(champion.id), 'champion-selected': valueProxy !== null && champion.id === valueProxy.id }" @click.native="select(champion)"></champion-icon>
 				</div>
 			</div>
 		</div>
@@ -62,14 +62,27 @@ export default {
 				tag: null,
 			},
 
-			value: null,
+			valueProxy: this.value || null,
 		};
 	},
 
 	methods: {
+		clearInvalidValue() {
+			if(this.valueProxy === null || this.disabled || this.bannedIds.includes(this.valueProxy.id) || this.pickedIds.includes(this.valueProxy.id)) {
+				this.select(null);
+			}
+		},
+
 		filterTag(tag) {
 			this.input.tag = tag;
 		},
+
+		select(champion) {
+			if(champion === null || (!this.disabled && !this.bannedIds.includes(champion.id) && !this.pickedIds.includes(champion.id))) {
+				this.valueProxy = champion;
+				this.$emit('input', champion);
+			}
+		},
 	},
 
 	props: {
@@ -83,29 +96,51 @@ export default {
 			required: true,
 		},
 
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+
 		pickedIds: {
 			type: Array,
 			required: true,
 		},
+
+		value: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	watch: {
-		value(value) {
-			this.$emit('input', value);
-		},
+		disabled: 'clearInvalidValue',
+		bannedIds: 'clearInvalidValue',
+		pickedIds: 'clearInvalidValue',
+		value: 'clearInvalidValue',
+		valueProxy: 'clearInvalidValue',
 	},
 };
 </script>
-<style>
+<style scoped>
+.champion-icon {
+	cursor: pointer;
+}
+
 .champion-picked, .champion-banned {
 	filter: grayscale(1);
 }
 
 .champion-banned::after {
 	content: "🚫";
-	position: absolute;
-	font-size: 24px;
-	line-height: 48px;
+	font-size: 16px;
 	opacity: 50%;
+
+	position: absolute;
+	right: 0;
+	bottom: 0;
+}
+
+.champion-selected {
+	outline: 5px solid #f39c12;
 }
 </style>
diff --git a/src/components/Game.vue b/src/components/Game.vue
index fc35db4..64edcff 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -5,8 +5,8 @@
 				<h1 class="d-inline-block">{{ state.teams[0].name }}</h1>
 				<h5 class="d-inline-block">{{ getTeamAction(0) }}</h5>
 			</div>
-			<div class="col-2 d-flex justify-content-center" :class="currentTeam === 0 ? 'bg-info' : 'bg-danger'">
-				<h1>{{ timer }}</h1>
+			<div class="col-2 d-flex justify-content-center" :class="['ready', 'done'].includes(currentAct) ? '' : (currentTeam === 0 ? 'blue-act-gradient' : 'red-act-gradient')">
+				<h1>{{ currentAct === 'done' ? 'Done' : timer }}</h1>
 			</div>
 			<div class="col-5 bg-danger d-flex justify-content-between align-items-baseline">
 				<h5 class="d-inline-block">{{ getTeamAction(1) }}</h5>
@@ -14,23 +14,23 @@
 			</div>
 		</div>
 		<div class="row" style="height: calc(100% - 65px - 80px);">
-			<champion-pick-list class="col-xl-2 col-sm-3 bg-info p-3" :picks="state.picks[0]"></champion-pick-list>
+			<champion-pick-list class="col-xl-2 col-sm-3 bg-info p-3" :champions="champions" :picks="state.picks[0]" :hovered="getHovered(0, 'pick')"></champion-pick-list>
 			<div class="col-xl-8 col-sm-6 overflow-hidden h-100">
-				<champion-picker :champions="champions" :banned-ids="bannedChampionIds" :picked-ids="pickedChampionIds" v-model="input.champion"></champion-picker>
+				<champion-picker :champions="champions" :banned-ids="bannedChampionIds" :picked-ids="pickedChampionIds" :disabled="team === null || ['ready', 'done'].includes(currentAct)" v-model="input.champion"></champion-picker>
 			</div>
-			<champion-pick-list class="col-xl-2 col-sm-3 bg-danger p-3" :picks="state.picks[1]"></champion-pick-list>
+			<champion-pick-list class="col-xl-2 col-sm-3 bg-danger p-3" :champions="champions" :picks="state.picks[1]" :hovered="getHovered(1, 'pick')"></champion-pick-list>
 		</div>
 		<div class="row" style="height: 80px;">
 			<div class="col-5 bg-info d-flex justify-content-end">
-				<champion-ban-list :bans="state.bans[0]" :team="0"></champion-ban-list>
+				<champion-ban-list :champions="champions" :bans="state.bans[0]" :team="0" :hovered="getHovered(0, 'ban')"></champion-ban-list>
 			</div>
 			<div class="col-2">
 				<div class="py-3 h-100">
-					<button type="button" class="rounded-0 btn w-100 h-100" :class="currentTeam === 0 ? 'btn-info' : 'btn-danger'" @click="lock">Lock</button>
+					<button type="button" class="rounded-0 btn w-100 h-100" :class="['ready', 'done'].includes(currentAct) ? 'btn-secondary' : (currentTeam === 0 ? 'btn-info' : 'btn-danger')" :disabled="!canAct" @click="lock">{{ actButtonText }}</button>
 				</div>
 			</div>
 			<div class="col-5 bg-danger d-flex justify-content-start">
-				<champion-ban-list :bans="state.bans[1]" :team="1"></champion-ban-list>
+				<champion-ban-list :champions="champions" :bans="state.bans[1]" :team="1" :hovered="getHovered(1, 'ban')"></champion-ban-list>
 			</div>
 		</div>
 	</div>
@@ -38,6 +38,7 @@
 <script>
 import io from 'socket.io-client';
 import qs from 'qs';
+import dayjs from 'dayjs';
 import ChampionBanList from './ChampionBanList';
 import ChampionPickList from './ChampionPickList';
 import ChampionPicker from './ChampionPicker';
@@ -46,25 +47,28 @@ export default {
 	components: { ChampionBanList, ChampionPickList, ChampionPicker },
 
 	computed: {
-		currentTeam() {
-			return this.state.order[this.state.current][0];
+		actButtonText() {
+			return this.currentAct[0].toUpperCase() + this.currentAct.slice(1);
 		},
 
-		currentAct() {
-			return this.state.current === 0 ? 'ready' : this.state.order[this.state.current][1];
+		bannedChampionIds() {
+			return this.state.bans.flat();
 		},
 
-		bannedChampionIds() {
-			return this.state.bans.flat().map(champion => champion.id);
+		canAct() {
+			return (this.state.current === 0 && this.state.ready[this.team] === false) || (!this.state.ready.includes(false) && this.currentTeam === this.team && this.currentTeam !== null && this.input.champion !== null);
 		},
 
-		pickedChampionIds() {
-			return this.state.picks.flat().map(champion => champion.id);
+		currentAct() {
+			return this.state.current === 0 && (!this.state.ready[0] || !this.state.ready[1]) ? 'ready' : this.state.order[this.state.current][1];
 		},
 
-		timer() {
-			// TODO: actually time (serverside too!)
-			return 33;
+		currentTeam() {
+			return this.state.order[this.state.current][0];
+		},
+
+		pickedChampionIds() {
+			return this.state.picks.flat();
 		},
 	},
 
@@ -72,6 +76,7 @@ export default {
 		return {
 			champions: null,
 			state: null,
+			team: null,
 
 			socket: null,
 
@@ -81,6 +86,9 @@ export default {
 			input: {
 				champion: null,
 			},
+
+			timer: null,
+			timerFrame: null,
 		};
 	},
 
@@ -92,8 +100,38 @@ export default {
 			this.teamId = query.team || null;
 			this.socket = io({ transports: ['websocket', 'polling'], query: { game: this.gameId, team: this.teamId } });
 
-			this.socket.on('game-state', state => this.state = state);
+			this.socket.on('game-state', state => {
+				this.state = state;
+
+				if(this.state.hover[this.team] !== null) {
+					this.input.champion = this.champions.find(champion => champion.id === this.state.hover[this.team]);
+				}
+
+				if(this.state.order[this.state.current][0] === this.team && this.input.champion) {
+					this.hover(this.input.champion);
+				}
+
+				if(this.state.roundExpiration) {
+					this.startTimer();
+				} else {
+					this.endTimer();
+				}
+			});
 			this.socket.on('champions', champions => this.champions = champions);
+			this.socket.on('assign-team', team => this.team = team);
+			this.socket.on('game-expired', () => {
+				alert('This draft has expired. Please create a new draft.');
+
+				window.location.href = '/';
+			});
+		},
+
+		getHovered(team, act) {
+			if(this.currentTeam !== team || this.currentAct !== act) {
+				return null;
+			}
+
+			return this.state.hover[this.currentTeam];
 		},
 
 		getTeamAction(team) {
@@ -112,15 +150,41 @@ export default {
 			return this.currentAct === 'ban' ? 'Banning' : 'Picking';
 		},
 
+		endTimer() {
+			cancelAnimationFrame(this.timerFrame);
+		},
+
+		hover(champion) {
+			this.socket.emit('game-action', { action: 'hover', value: champion?.id });
+		},
+
 		lock() {
-			this.socket.emit('game-action', { action: this.currentAct, champion: this.input.champion });
+			this.socket.emit('game-action', { action: this.currentAct, value: this.currentAct === 'ready' ? true : this.input.champion?.id });
+		},
+
+		startTimer() {
+			const updateTimer = () => {
+				let displaySeconds = Math.floor((this.state.roundExpiration - Number(dayjs())) / 1000) - 3;
+
+				if(displaySeconds < 0) {
+					displaySeconds = '0' + '!'.repeat(Math.min(3, -displaySeconds));
+				}
+
+				this.timer = displaySeconds;
+
+				this.timerFrame = requestAnimationFrame(updateTimer);
+			};
+
+			this.timerFrame = requestAnimationFrame(updateTimer);
 		},
 	},
 
 	mounted() {
 		this.connect();
 	},
+
+	watch: {
+		'input.champion': 'hover',
+	},
 };
 </script>
-<style>
-</style>
diff --git a/src/components/Main.vue b/src/components/Main.vue
index aea8a7c..fde3956 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -11,10 +11,6 @@
 					<div class="modal-title">Create a Draft</div>
 				</div>
 				<div class="modal-body">
-					<div class="form-group">
-						<label for="name">Match Name</label>
-						<input type="text" class="form-control bg-secondary text-white" id="name" v-model="input.name">
-					</div>
 					<div class="form-group">
 						<label for="blue-name">Blue Team Name</label>
 						<input type="text" class="form-control bg-info text-white" id="blue-name" v-model="input.teams[0]">
@@ -43,7 +39,7 @@
 						</div>
 					</div>
 					<div class="form-group">
-						<label for="blue-link">Blue Captain Link</label>
+						<label for="blue-link">{{ input.teams[0] }} Captain Link</label>
 						<div class="input-group">
 							<input class="form-control bg-info border-0 text-white" :value="links.teams[0]" readonly id="blue-link">
 							<div class="input-group-append">
@@ -53,7 +49,7 @@
 						</div>
 					</div>
 					<div class="form-group">
-						<label for="red-link">Red Captain Link</label>
+						<label for="red-link">{{ input.teams[1] }} Captain Link</label>
 						<div class="input-group">
 							<input class="form-control bg-danger border-0 text-white" :value="links.teams[1]" readonly id="red-link">
 							<div class="input-group-append">
@@ -62,6 +58,7 @@
 							</div>
 						</div>
 					</div>
+					<p>These links will expire in 24 hours.</p>
 				</div>
 			</div>
 		</div>
@@ -78,7 +75,7 @@ export default {
 
 	computed: {
 		canCreate() {
-			return this.input.name && this.input.teams[0] && this.input.teams[1];
+			return this.input.teams[0] && this.input.teams[1];
 		},
 	},
 
@@ -106,7 +103,6 @@ export default {
 			},
 
 			input: {
-				name: '',
 				teams: ['', ''],
 			},
 		};
diff --git a/src/style.scss b/src/style.scss
index 18305f7..e60d771 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,2 +1,14 @@
 @import "variables";
 @import "~bootstrap/scss/bootstrap";
+
+button:disabled {
+	cursor: not-allowed;
+}
+
+.blue-act-gradient {
+	background: linear-gradient(90deg, $info 65%, $danger 90%);
+}
+
+.red-act-gradient {
+	background: linear-gradient(90deg, $info 10%, $danger 35%);
+}