diff --git a/README.md b/README.md
index 62d1b705..c86a1590 100644
--- a/README.md
+++ b/README.md
@@ -83,7 +83,7 @@ You can also create a Docker image and run the app in a container:
 
 ## Usage
 
-### Start server
+### Start Server
 
 `npm start`
 
@@ -98,6 +98,31 @@ This command downloads integrates all files previously downloaded from MTGJson.
 `npm run download_booster_rules`
  download and parse booster generation rules from [magic-sealed-data](https://github.com/taw/magic-sealed-data)
 
+## Development Notes
+
+### VSCode
+
+You can debug this application by adding the following configuration to your `launch.json`:
+
+```json
+{
+  "name": "Launch via NPM",
+  "type": "node",
+  "request": "launch",
+  "cwd": "${workspaceFolder}",
+  "runtimeExecutable": "npm",
+  "runtimeArgs": [
+      "run", "start-debug"
+  ],
+  "port": 1338
+}
+```
+
+You should now be able to set breakpoints in `backend/` and hit them when you start the debugger.
+This relies on the `--inspect-brk=1338` flag to open port 1338 for the debugger to attach to.
+
+Breakpoints for the frontend should be set in your browser console.
+
 ### Contributors
 
 THANK YOU!
diff --git a/backend/game.js b/backend/game.js
index f901bee3..2ce9ef7d 100644
--- a/backend/game.js
+++ b/backend/game.js
@@ -25,6 +25,7 @@ module.exports = class Game extends Room {
       round: 0,
       bots: 0,
       sets: sets || [],
+      isDecadent: false,
       secret: uuid.v4(),
       logger: logger.child({ id: gameID })
     });
@@ -36,6 +37,13 @@ module.exports = class Game extends Room {
       this.packsInfo = this.sets.join(" / ");
       this.rounds = this.sets.length;
       break;
+    case "decadent draft":
+      // Sets should all be the same and there can be a large number of them.
+      // Compress this info into e.g. "36x IKO" instead of "IKO / IKO / ...".
+      this.packsInfo = `${this.sets.length}x ${this.sets[0]}`;
+      this.rounds = this.sets.length;
+      this.isDecadent = true;
+      break;
     case "cube draft":
       this.packsInfo = `${cube.packs} packs with ${cube.cards} cards from a pool of ${cube.list.length} cards`;
       this.rounds = this.cube.packs;
@@ -185,7 +193,63 @@ module.exports = class Game extends Room {
     super.join(sock);
     this.logger.debug(`${sock.name} joined the game`);
 
-    const h = new Human(sock);
+    function regularDraftPickDelegate(index) {
+      const pack = this.packs.shift();
+      const card = pack.splice(index, 1)[0];
+  
+      this.draftLog.pack.push( [`--> ${card.name}`].concat(pack.map(x => `    ${x.name}`)) );
+      this.updateDraftStats(this.draftLog.pack[ this.draftLog.pack.length-1 ], this.pool);
+  
+      let pickcard = card.name;
+      if (card.foil === true)
+        pickcard = "*" + pickcard + "*";
+  
+      this.pool.push(card);
+      this.picks.push(pickcard);
+      this.send("add", card);
+  
+      let [next] = this.packs;
+      if (!next)
+        this.time = 0;
+      else
+        this.sendPack(next);
+  
+      this.autopick_index = -1;
+      this.emit("pass", pack);
+    }
+
+    function decadentDraftPickDelegate(index) {
+      const pack = this.packs.shift();
+      const card = pack.splice(index, 1)[0];
+  
+      this.draftLog.pack.push( [`--> ${card.name}`].concat(pack.map(x => `    ${x.name}`)) );
+      this.updateDraftStats(this.draftLog.pack[ this.draftLog.pack.length-1 ], this.pool);
+  
+      let pickcard = card.name;
+      if (card.foil === true)
+        pickcard = "*" + pickcard + "*";
+  
+      this.pool.push(card);
+      this.picks.push(pickcard);
+      this.send("add", card);
+  
+      let [next] = this.packs;
+      if (!next)
+        this.time = 0;
+      else
+        this.sendPack(next);
+      
+      // Discard the rest of the cards in the pack
+      // after one is chosen.
+      pack.length = 0;
+  
+      this.autopick_index = -1;
+      this.emit("pass", pack);
+    }
+    
+    const draftPickDelegate = this.isDecadent ? decadentDraftPickDelegate : regularDraftPickDelegate;
+
+    const h = new Human(sock, draftPickDelegate);
     if (h.id === this.hostID) {
       h.isHost = true;
       sock.once("start", this.start.bind(this));
@@ -450,7 +514,8 @@ module.exports = class Game extends Room {
       });
       break;
     }
-    case "draft": {
+    case "draft": 
+    case "decadent draft": {
       this.pool = Pool.DraftNormal({
         playersLength: this.players.length,
         sets: this.sets
@@ -509,12 +574,16 @@ module.exports = class Game extends Room {
     this.startRound();
   }
 
+  shouldAddBots() {
+    return this.addBots && !this.isDecadent;
+  }
+
   start({ addBots, useTimer, timerLength, shufflePlayers }) {
     try {
       Object.assign(this, { addBots, useTimer, timerLength, shufflePlayers });
       this.renew();
 
-      if (addBots) {
+      if (this.shouldAddBots()) {
         while (this.players.length < this.seats) {
           this.players.push(new Bot());
           this.bots++;
@@ -536,7 +605,7 @@ module.exports = class Game extends Room {
       this.logger.info(`Game ${this.id} started.\n${this.toString()}`);
       Game.broadcastGameInfo();
     } catch(err) {
-      this.logger.error(`Game ${this.id}  encountered an error while starting: ${err.stack} GameState: ${this.toString()}`);
+      this.logger.error(`Game ${this.id} encountered an error while starting: ${err.stack} GameState: ${this.toString()}`);
       this.players.forEach(player => {
         if (!player.isBot) {
           player.exit();
diff --git a/backend/human.js b/backend/human.js
index 784359aa..f1b90cb1 100644
--- a/backend/human.js
+++ b/backend/human.js
@@ -5,13 +5,14 @@ const {random} = require("lodash");
 const logger = require("./logger");
 
 module.exports = class extends Player {
-  constructor(sock) {
+  constructor(sock, pickDelegate) {
     super({
       isBot: false,
       isConnected: true,
       name: sock.name,
       id: sock.id
     });
+    this.pickDelegate = pickDelegate.bind(this);
     this.attach(sock);
   }
 
@@ -111,28 +112,7 @@ module.exports = class extends Player {
     this.draftStats.push( { picked, notPicked, pool: namePool } );
   }
   pick(index) {
-    const pack = this.packs.shift();
-    const card = pack.splice(index, 1)[0];
-
-    this.draftLog.pack.push( [`--> ${card.name}`].concat(pack.map(x => `    ${x.name}`)) );
-    this.updateDraftStats(this.draftLog.pack[ this.draftLog.pack.length-1 ], this.pool);
-
-    let pickcard = card.name;
-    if (card.foil === true)
-      pickcard = "*" + pickcard + "*";
-
-    this.pool.push(card);
-    this.picks.push(pickcard);
-    this.send("add", card);
-
-    let [next] = this.packs;
-    if (!next)
-      this.time = 0;
-    else
-      this.sendPack(next);
-
-    this.autopick_index = -1;
-    this.emit("pass", pack);
+    this.pickDelegate(index);
   }
   pickOnTimeout() {
     let index = this.autopick_index;
diff --git a/backend/player.js b/backend/player.js
index d5494124..2c7a1979 100644
--- a/backend/player.js
+++ b/backend/player.js
@@ -35,7 +35,7 @@ class Player extends EventEmitter {
       packSize: 15,
       self: 0,
       useTimer: false,
-      timeLength: "Slow",
+      timeLength: "Slow"
     });
   }
 
diff --git a/backend/util.js b/backend/util.js
index 3b3087e9..cfdaee7e 100644
--- a/backend/util.js
+++ b/backend/util.js
@@ -66,8 +66,17 @@ module.exports = {
     return true;
   },
   game({ seats, type, sets, cube, isPrivate, modernOnly = true, chaosPacksNumber, totalChaos = true }) {
-    assert(["draft", "sealed", "cube draft", "cube sealed", "chaos draft", "chaos sealed"].includes(type),
-      "type can be draft, sealed, chaos draft, chaos sealed, cube draft or cube sealed");
+    const acceptableGameTypes = [
+      "draft",
+      "sealed",
+      "cube draft",
+      "cube sealed",
+      "chaos draft",
+      "chaos sealed",
+      "decadent draft"
+    ];
+    assert(acceptableGameTypes.includes(type),
+      `type can be one of: ${acceptableGameTypes.join(", ")}`);
     assert(typeof isPrivate === "boolean", "isPrivate must be a boolean");
     assert(typeof seats === "number", "seats must be a number");
     assert(seats >= 1 && seats <= 100, "seats' number must be between 1 and 100");
diff --git a/frontend/src/app.js b/frontend/src/app.js
index c2e7795d..5b255a6a 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -35,6 +35,7 @@ let App = {
     sets: [],
     setsDraft: [],
     setsSealed: [],
+    setsDecadentDraft: [],
     availableSets: {},
     list: "",
     cards: 15,
@@ -82,6 +83,9 @@ let App = {
     get isGameFinished() {
       return App.state.round === -1;
     },
+    get isDecadentDraft() {
+      return /decadent draft/.test(App.state.game.type);
+    },
 
     get notificationBlocked() {
       return ["denied", "notsupported"].includes(App.state.notificationResult);
@@ -167,12 +171,13 @@ let App = {
   },
   set(state) {
     Object.assign(App.state, state);
-    // Set default sets
-    if ( App.state.setsSealed.length === 0 && App.state.latestSet) {
-      App.state.setsSealed = times(6, constant(App.state.latestSet.code));
-    }
-    if ( App.state.setsDraft.length === 0 && App.state.latestSet) {
-      App.state.setsDraft = times(3, constant(App.state.latestSet.code));
+    if (App.state.latestSet) {
+      // Default sets to the latest set.
+      const defaultSetCode = App.state.latestSet.code;
+      const replicateDefaultSet = (desiredLength) => times(desiredLength, constant(defaultSetCode));
+      App.state.setsSealed = replicateDefaultSet(6);
+      App.state.setsDraft = replicateDefaultSet(3);
+      App.state.setsDecadentDraft = replicateDefaultSet(36);
     }
     App.update();
   },
diff --git a/frontend/src/components/Checkbox.jsx b/frontend/src/components/Checkbox.jsx
new file mode 100644
index 00000000..25dfa104
--- /dev/null
+++ b/frontend/src/components/Checkbox.jsx
@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import App from "../app";
+
+const Checkbox = ({link, text, side, onChange, ...rest}) => (
+  <div>
+    {side === "right" ? text : ""}
+    <input
+      {...rest}
+      type="checkbox"
+      onChange={onChange || function (e) {
+        App.save(link, e.currentTarget.checked);
+      }}
+      checked={App.state[link]}/>
+    {side === "left" ? text : ""}
+  </div>
+);
+
+Checkbox.propTypes = {
+  link: PropTypes.string,
+  text: PropTypes.string,
+  side: PropTypes.string,
+  onChange: PropTypes.func
+};
+
+export default Checkbox;
diff --git a/frontend/src/components/README.md b/frontend/src/components/README.md
new file mode 100644
index 00000000..ca327996
--- /dev/null
+++ b/frontend/src/components/README.md
@@ -0,0 +1,5 @@
+# Components
+
+A set of general UI components.
+
+Many are "connected" tools which use a "link" prop to connect to the app state.
diff --git a/frontend/src/components/Select.jsx b/frontend/src/components/Select.jsx
new file mode 100644
index 00000000..a98482ec
--- /dev/null
+++ b/frontend/src/components/Select.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import App from "../app";
+
+const Select = ({
+  link,
+  opts,
+  onChange = (e) => { App.save(link, e.currentTarget.value); },
+  value = App.state[link],
+  ...rest}) => (
+  <select
+    onChange={onChange}
+    value={value}
+    {...rest}>
+    {opts.map((opt, index) =>
+      <option key={index}>{opt}</option>
+    )}
+  </select>
+);
+
+Select.propTypes = {
+  link: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.any,
+  opts: PropTypes.array
+};
+
+export default Select;
diff --git a/frontend/src/components/Spaced.jsx b/frontend/src/components/Spaced.jsx
new file mode 100644
index 00000000..e729ae4e
--- /dev/null
+++ b/frontend/src/components/Spaced.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const Spaced = ({elements}) => (
+  elements
+    .map((x, index) => <span key={index}>{x}</span>)
+    .reduce((prev, curr) => [
+      prev,
+      <span key = {prev+curr} className = 'spacer-dot' />,
+      curr
+    ])
+);
+
+export default Spaced;
diff --git a/frontend/src/components/TextArea.jsx b/frontend/src/components/TextArea.jsx
new file mode 100644
index 00000000..ed9a2444
--- /dev/null
+++ b/frontend/src/components/TextArea.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import App from "../app";
+
+const TextArea = ({link, ...rest}) => (
+  <textarea
+    onChange={(e) => { App.save(link, e.currentTarget.value); }}
+    value={App.state[link]}
+    {...rest}
+  />
+);
+
+TextArea.propTypes = {
+  link: PropTypes.string
+};
+
+export default TextArea;
diff --git a/frontend/src/events.js b/frontend/src/events.js
index 592f9635..766255d5 100644
--- a/frontend/src/events.js
+++ b/frontend/src/events.js
@@ -115,6 +115,9 @@ const events = {
       options.sets = gametype === "sealed" ? setsSealed : setsDraft;
       break;
     }
+    case "decadent":
+      options.sets = App.state.setsDecadentDraft;
+      break;
     case "cube":
       options.cube = parseCubeOptions();
       break;
diff --git a/frontend/src/game/Cols.jsx b/frontend/src/game/Cols.jsx
index d05ac470..15196b21 100644
--- a/frontend/src/game/Cols.jsx
+++ b/frontend/src/game/Cols.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 import App from "../app";
 import {getZoneDisplayName} from "../zones";
-import {Spaced} from "../utils.jsx";
+import Spaced from "../components/Spaced";
 import {getCardSrc, getFallbackSrc} from "../cardimage";
 
 class Cols extends Component {
diff --git a/frontend/src/game/DeckSettings.jsx b/frontend/src/game/DeckSettings.jsx
index 191cfe96..d788b550 100644
--- a/frontend/src/game/DeckSettings.jsx
+++ b/frontend/src/game/DeckSettings.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import App from "../app";
 import {getZoneDisplayName, ZONE_MAIN, ZONE_SIDEBOARD} from "../zones";
 import {COLORS_TO_LANDS_NAME} from "../gamestate";
-import {Select} from "../utils";
+import Select from "../components/Select";
 
 const DeckSettings = () => (
   (App.state.isGameFinished || App.state.didGameStart)
diff --git a/frontend/src/game/GameSettings.jsx b/frontend/src/game/GameSettings.jsx
index 007fc6de..610a4716 100644
--- a/frontend/src/game/GameSettings.jsx
+++ b/frontend/src/game/GameSettings.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import App from "../app";
-import {Checkbox} from "../utils";
+import Checkbox from "../components/Checkbox";
 
 const GameSettings = () => (
   <div className='game-settings'>
diff --git a/frontend/src/game/Grid.jsx b/frontend/src/game/Grid.jsx
index cac13620..d55c097c 100644
--- a/frontend/src/game/Grid.jsx
+++ b/frontend/src/game/Grid.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import _ from "utils/utils";
 import App from "../app";
 import {getCardSrc, getFallbackSrc} from "../cardimage";
-import {Spaced} from "../utils";
+import Spaced from "../components/Spaced";
 import {ZONE_PACK, getZoneDisplayName} from "../zones";
 
 const Grid = ({zones}) => (
@@ -17,6 +17,23 @@ Grid.propTypes = {
   zones: PropTypes.array.isRequired
 };
 
+const getZoneDetails = (appState, zoneName, cards) => {
+  if (!appState.didGameStart) {
+    return 0;
+  }
+
+  if (zoneName === ZONE_PACK) {
+    if (appState.isDecadentDraft) {
+      // Only 1 pick in decadent draft.
+      return `Pick 1 / 1`;
+    } else {
+      return `Pick ${appState.pickNumber} / ${appState.packSize}`
+    }
+  } else {
+    return cards.length;
+  }
+}
+
 const zone = (zoneName, index) => {
   const zone = App.getSortedZone(zoneName);
   const zoneDisplayName = getZoneDisplayName(zoneName);
@@ -24,16 +41,12 @@ const zone = (zoneName, index) => {
   const cards = _.flat(values);
 
   const zoneTitle = zoneDisplayName + (zoneName === ZONE_PACK ? " " + App.state.round : "");
-  const zoneHelper = App.state.didGameStart
-    ? zoneName === ZONE_PACK
-      ? `Pick ${App.state.pickNumber} / ${App.state.packSize}`
-      : cards.length
-    : 0;
+  const zoneDetails = getZoneDetails(App.state, zoneName, cards);
 
   return (
     <div className='zone' key={index}>
       <h1>
-        <Spaced elements={[zoneTitle, zoneHelper]}/>
+        <Spaced elements={[zoneTitle, zoneDetails]}/>
       </h1>
       {cards.map((card, i) =>
         <Card key={i+zoneName+card.name+card.foil} card={card} zoneName={zoneName} />
diff --git a/frontend/src/game/StartPanel.jsx b/frontend/src/game/StartPanel.jsx
index f048f1c7..a66d020e 100644
--- a/frontend/src/game/StartPanel.jsx
+++ b/frontend/src/game/StartPanel.jsx
@@ -1,8 +1,9 @@
 import React from "react";
 
 import App from "../app";
-import { Select, Checkbox, toTitleCase } from "../utils";
-
+import Checkbox from "../components/Checkbox";
+import Select from "../components/Select";
+import { toTitleCase } from "../utils";
 
 const StartPanel = () => {
   const gameType = toTitleCase(App.state.game.type);
@@ -42,8 +43,14 @@ const Options = () => {
   const timers = ["Fast", "Moderate", "Slow", "Leisurely"];
   return (
     <span>
-      <Checkbox side="left" link="addBots" text="Fill empty seats with Bots"/>
-      <Checkbox side="left" link="shufflePlayers" text="Random seating"/>
+      {showAddBotsCheckbox()
+        ? <Checkbox side="left" link="addBots" text="Fill empty seats with Bots"/>
+        : null
+      }
+      {showShufflePlayersCheckbox()
+        ? <Checkbox side="left" link="shufflePlayers" text="Random seating"/>
+        : null
+      }
       <div>
         <Checkbox side="left" link="useTimer" text="Timer: "/>
         <Select link="timerLength" opts={timers} disabled={!useTimer}/>
@@ -52,4 +59,14 @@ const Options = () => {
   );
 };
 
+const showAddBotsCheckbox = () => {
+  // No need for bots in decadent draft since there's no passing.
+  return !App.state.isDecadentDraft;
+}
+
+const showShufflePlayersCheckbox = () => {
+  // No need to shuffle players in decadent draft because there's no passing.
+  return !App.state.isDecadentDraft;
+}
+
 export default StartPanel;
diff --git a/frontend/src/lobby/CreatePanel.jsx b/frontend/src/lobby/CreatePanel.jsx
index a16da1d6..c83bcc63 100644
--- a/frontend/src/lobby/CreatePanel.jsx
+++ b/frontend/src/lobby/CreatePanel.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import _ from "utils/utils";
 import App from "../app";
-import {Checkbox} from "../utils";
+import Checkbox from "../components/Checkbox";
 
 import GameTypes from "./GameTypes";
 import GameOptions from "./GameOptions";
diff --git a/frontend/src/lobby/CubeList.jsx b/frontend/src/lobby/CubeList.jsx
index ed4e9e32..af1a0d57 100644
--- a/frontend/src/lobby/CubeList.jsx
+++ b/frontend/src/lobby/CubeList.jsx
@@ -1,7 +1,7 @@
 import React, { useState, Fragment } from "react";
 import axios from "axios";
 
-import { Textarea } from "../utils";
+import TextArea from "../components/TextArea";
 import App from "../app";
 
 const CubeList = () => {
@@ -13,7 +13,7 @@ const CubeList = () => {
   return (<div id='cube-list'>
     <div className='column'>
       <div>{`One card per line! (${cubeListLength} cards)`}</div>
-      <Textarea
+      <TextArea className="cube-list"
         placeholder='cube list'
         link='list'
       />
diff --git a/frontend/src/lobby/GameOptions.jsx b/frontend/src/lobby/GameOptions.jsx
index 8e8ed17b..9fd3f6ac 100644
--- a/frontend/src/lobby/GameOptions.jsx
+++ b/frontend/src/lobby/GameOptions.jsx
@@ -3,34 +3,70 @@ import PropTypes from "prop-types";
 
 import _ from "utils/utils";
 import App from "../app";
-import { Checkbox, Select } from "../utils";
+import Checkbox from "../components/Checkbox";
+import Select from "../components/Select";
 
 import Set from "./Set";
+import SetReplicated from "./SetReplicated";
 import CubeList from "./CubeList";
 
 const GameOptions = () => {
-  const { setsDraft, setsSealed, gametype, gamesubtype } = App.state;
+  const { setsDraft, setsSealed, setsDecadentDraft, gametype, gamesubtype } = App.state;
 
   switch (`${gamesubtype} ${gametype}`) {
   case "regular draft":
-    return <Regular sets={setsDraft} type={"setsDraft"} />;
+    return <RegularDraft sets={setsDraft} type={"setsDraft"} />;
   case "regular sealed":
-    return <Regular sets={setsSealed} type={"setsSealed"} />;
+    return <RegularSealed sets={setsSealed} type={"setsSealed"} />;
+  case "decadent draft":
+    return <Decadent sets={setsDecadentDraft} type={"setsDecadentDraft"} />;
   case "cube draft":
-    return <CubeDraft />;
+    return <CubeDraft/>;
   case "cube sealed":
-    return <CubeSealed />;
+    return <CubeSealed/>;
   case "chaos draft":
-    return <Chaos packsNumber={"chaosDraftPacksNumber"} />;
+    return <ChaosDraft/>
   case "chaos sealed":
-    return <Chaos packsNumber={"chaosSealedPacksNumber"}/>;
+    return <ChaosSealed/>;
   default:
-    return <Regular sets={setsDraft} type={"setsDraft"} />;
+    return null;
   }
 };
 
+const RegularDraft = ({sets, type}) => (
+  <Fragment>
+    <blockquote className="game-mode-description">
+      <p>Each player starts with {sets.length} booster packs.</p>
+      <p>To begin, each player opens one pack, chooses (drafts) one card, and passes the rest to the next player.</p>
+      <p>That player drafts one card from what's left, passes it, and so on until no cards are left.</p>
+      <p>Then everyone opens their next pack, starting a new round. Packs are passed in alternating directions each round.</p>
+      <p>Once all cards have been drafted, each player builds a deck out of the cards they drafted.</p>
+    </blockquote>
+    <Regular sets={sets} type={type} />
+  </Fragment>
+);
+
+RegularDraft.propTypes = {
+  sets: PropTypes.array,
+  type: PropTypes.string
+}
+
+const RegularSealed = ({sets, type}) => (
+  <Fragment>
+    <blockquote className="game-mode-description">
+      <p>Each player opens {sets.length} booster packs and builds a deck using any of those cards.</p>
+    </blockquote>
+    <Regular sets={sets} type={type} />
+  </Fragment>
+);
+
+RegularSealed.propTypes = {
+  sets: PropTypes.array,
+  type: PropTypes.string
+}
+
 const Regular = ({ sets, type }) => (
-  <Fragment >
+  <Fragment>
     <div>
       Number of packs:{" "}
       <Select
@@ -54,18 +90,52 @@ const Sets = ({ sets, type }) => (
     .map((set, i) => <Set type={type} selectedSet={set} index={i} key={i} />)
 );
 
+const Decadent = ({ sets, type }) => (
+  <Fragment>
+    <blockquote className="game-mode-description">
+      <p>Also known as "Rich Man's Draft" or "Decadent Sealed".</p>
+      <p>Like a regular draft except each player chooses one card from the pack, discards the rest, then opens a new pack.</p>
+    </blockquote>
+    <div>
+      Number of packs:{" "}
+      <Select
+        value={sets.length}
+        onChange={App._emit("changeSetsNumber", type)}
+        opts={_.seq(60, 36)} />
+    </div>
+    <div className="wrapper">
+      <SetReplicated type={type} selectedSet={sets[0]} />
+    </div>
+  </Fragment>
+);
+
+Decadent.propTypes = {
+  sets: PropTypes.array,
+  type: PropTypes.string
+};
+
 const CubeDraft = () => (
-  <div>
-    <CubeList />
-    <CubeOptions />
-  </div>
+  <Fragment>
+    <blockquote className="game-mode-description">
+      <p>A draft where each pack is a random set of cards from a large pool of cards called the "cube".</p>
+    </blockquote>
+    <div>
+      <CubeList />
+      <CubeOptions />
+    </div>
+  </Fragment>
 );
 
 const CubeSealed = () => (
-  <div>
-    <CubeList />
-    <CubeSealedOptions />
-  </div>
+  <Fragment>
+    <blockquote className="game-mode-description">
+      <p>Like sealed except each pack is a random set of cards from a large pool of cards called the "cube".</p>
+    </blockquote>
+    <div>
+      <CubeList />
+      <CubeSealedOptions />
+    </div>
+  </Fragment>
 );
 
 const CubeSealedOptions = () => (
@@ -84,6 +154,26 @@ const CubeOptions = () => (
   </div>
 );
 
+const ChaosDraft = () => (
+  <Fragment>
+    <blockquote className="game-mode-description">
+      <p>A draft where each booster pack is from a random set.</p>
+      <p>Take it up a notch with total chaos to build booster packs where each card in the pack is from a random set!</p>
+    </blockquote>
+    <Chaos packsNumber={"chaosDraftPacksNumber"} />
+  </Fragment>
+);
+
+const ChaosSealed = () => (
+  <Fragment>
+    <blockquote className="game-mode-description">
+      <p>Like sealed except each booster pack is from a random set.</p>
+      <p>Take it up a notch with total chaos to build booster packs where each card in the pack is from a random set!</p>
+    </blockquote>
+    <Chaos packsNumber={"chaosSealedPacksNumber"}/>
+  </Fragment>
+);
+
 const Chaos = ({ packsNumber }) => (
   <div>
     <div>
@@ -103,7 +193,7 @@ const Chaos = ({ packsNumber }) => (
 );
 
 Chaos.propTypes = {
-  packsNumber: PropTypes.number
+  packsNumber: PropTypes.string
 };
 
 export default GameOptions;
diff --git a/frontend/src/lobby/GameTypes.jsx b/frontend/src/lobby/GameTypes.jsx
index 6d7c3a73..6cc789a9 100644
--- a/frontend/src/lobby/GameTypes.jsx
+++ b/frontend/src/lobby/GameTypes.jsx
@@ -3,30 +3,47 @@ import PropTypes from "prop-types";
 
 import App from "../app";
 
+import { toTitleCase } from "../utils";
+
 const GameTypes = () => {
-  const types = ["draft", "sealed"];
-  const subtypes = ["regular", "cube", "chaos"];
+  const gameOptions = {
+    draft: ["regular", "cube", "chaos", "decadent"],
+    sealed: ["regular", "cube", "chaos"]
+  }
+
+  const getAvailableTypes = () => Object.keys(gameOptions);
+  const getAvailableSubTypes = (gameType) => gameOptions[gameType];
   return (
     <div>
       <p>Game type:{" "}
         <span className='connected-container'>
-          {types.map((type, key) =>
+          {getAvailableTypes().map((gameType, key) =>
             <GameType name={"type"}
-              type={type}
+              type={gameType}
               key={key}
-              isChecked={App.state.gametype === type}
-              onChange={() => App.save("gametype", type)}/>
+              isChecked={App.state.gametype === gameType}
+              onChange={() => {
+                App.save("gametype", gameType)
+                const availableSubtypes = getAvailableSubTypes(gameType)
+                if (!availableSubtypes.includes(App.state.gamesubtype)) {
+                  // Reset to first available subtype if the currently-selected
+                  // subtype is not available for the newly-selected type.
+                  App.save("gamesubtype", availableSubtypes[0])
+                }
+              }}
+            />
           )}
         </span>
       </p>
       <p>Game mode:{" "}
         <span className='connected-container'>
-          {subtypes.map((type, key) =>
+          {getAvailableSubTypes(App.state.gametype).map((type, key) =>
             <GameType name={"subtype"}
               type={type}
               key={key}
               isChecked={App.state.gamesubtype === type}
-              onChange={() => App.save("gamesubtype", type)}/>
+              onChange={() => App.save("gamesubtype", type)}
+            />
           )}
         </span>
       </p>
@@ -42,7 +59,7 @@ const GameType = ({ name, type, isChecked, onChange}) => (
       type='radio'
       value={type}
       onChange={onChange}
-      checked={isChecked}/> {type.toLowerCase().split(" ").map((s) => s.charAt(0).toUpperCase() + s.substring(1)).join(" ")}
+      checked={isChecked}/> {toTitleCase(type)}
   </label>
 );
 
diff --git a/frontend/src/lobby/Header.jsx b/frontend/src/lobby/Header.jsx
index 47fd8166..c621fd95 100644
--- a/frontend/src/lobby/Header.jsx
+++ b/frontend/src/lobby/Header.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { STRINGS } from "../config";
-import { Spaced } from "../utils";
+import Spaced from "../components/Spaced";
 import App from "../app";
 
 const Header = () => (
diff --git a/frontend/src/lobby/Set.jsx b/frontend/src/lobby/Set.jsx
index e42d4bb7..4e893be5 100644
--- a/frontend/src/lobby/Set.jsx
+++ b/frontend/src/lobby/Set.jsx
@@ -2,29 +2,18 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import App from "../app";
-import { toTitleCase } from "../utils";
+import SetChoices from "./SetChoices";
 
 const Set = ({ index, selectedSet, type }) => {
   const onSetChange = (e) => {
-    App.state[type][index] = e.currentTarget.value;
+    const chosenSet = e.currentTarget.value;
+    let sets = App.state[type];
+    sets[index] = chosenSet;
     App.save(type, App.state[type]);
   };
-  let groups = [];
-  for (let setType in App.state.availableSets) {
-    const allSets = App.state.availableSets[setType];
-    let options = [];
-    allSets.forEach(({ code, name }) => {
-      options.push(
-        <option value={code} key={code}>{name}</option>
-      );
-    });
-    groups.push(
-      <optgroup label={toTitleCase(setType, "_")} key={setType}>{options}</optgroup>
-    );
-  }
   return (
     <select value={selectedSet} onChange={onSetChange} key={index}>
-      {groups}
+      <SetChoices/>
     </select>
   );
 };
diff --git a/frontend/src/lobby/SetChoices.jsx b/frontend/src/lobby/SetChoices.jsx
new file mode 100644
index 00000000..90bbc942
--- /dev/null
+++ b/frontend/src/lobby/SetChoices.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import App from "../app";
+import { toTitleCase } from "../utils";
+
+
+const SetChoices = () => {
+  let groups = [];
+  for (let setType in App.state.availableSets) {
+    const allSets = App.state.availableSets[setType];
+    let options = [];
+    allSets.forEach(({ code, name }) => {
+      options.push(
+        <option value={code} key={code}>{name}</option>
+      );
+    });
+    groups.push(
+      <optgroup label={toTitleCase(setType, "_")} key={setType}>{options}</optgroup>
+    );
+  }
+  return groups;
+}
+
+export default SetChoices;
diff --git a/frontend/src/lobby/SetReplicated.jsx b/frontend/src/lobby/SetReplicated.jsx
new file mode 100644
index 00000000..8a2c88b9
--- /dev/null
+++ b/frontend/src/lobby/SetReplicated.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import App from "../app";
+import SetChoices from "./SetChoices";
+
+const SetReplicated = ({ selectedSet, type }) => {
+  // A single dropdown which is used to fill an entire array
+  // of sets with the same selection.
+  const onSetChange = (e) => {
+    const chosenSet = e.currentTarget.value;
+    let sets = App.state[type];
+    for (let i = 0; i < sets.length; i++) {
+      sets[i] = chosenSet;
+    }
+    App.save(type, App.state[type]);
+  };
+  return (
+    <select value={selectedSet} onChange={onSetChange} key={0}>
+      <SetChoices/>
+    </select>
+  );
+};
+
+SetReplicated.propTypes = {
+  selectedSet: PropTypes.string,
+  type: PropTypes.string
+};
+
+export default SetReplicated;
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
new file mode 100644
index 00000000..47146434
--- /dev/null
+++ b/frontend/src/utils.js
@@ -0,0 +1,15 @@
+const capitalize = require("lodash/capitalize");
+
+const toTitleCase = (sentence, separator=" ") => {
+  if (!sentence || typeof sentence !== "string") {
+    return "";
+  }
+
+  const words = sentence.split(separator);
+  const capitalized = words.map(capitalize);
+  return capitalized.join(separator);
+};
+
+module.exports = {
+  toTitleCase
+};
diff --git a/frontend/src/utils.jsx b/frontend/src/utils.jsx
deleted file mode 100644
index 6f6d0881..00000000
--- a/frontend/src/utils.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-import App from "./app";
-
-/**
- * Utils offers a list of "connected" tools
- * through a "link" prop to connect to the app state
- */
-
-export const Checkbox = ({link, text, side, onChange, ...rest}) => (
-  <div>
-    {side === "right" ? text : ""}
-    <input
-      {...rest}
-      type="checkbox"
-      onChange={onChange || function (e) {
-        App.save(link, e.currentTarget.checked);
-      }}
-      checked={App.state[link]}/>
-    {side === "left" ? text : ""}
-  </div>
-);
-
-Checkbox.propTypes = {
-  link: PropTypes.string,
-  text: PropTypes.string,
-  side: PropTypes.string,
-  onChange: PropTypes.func
-};
-
-export const Spaced = ({elements}) => (
-  elements
-    .map((x, index) => <span key={index}>{x}</span>)
-    .reduce((prev, curr) => [
-      prev,
-      <span key = {prev+curr} className = 'spacer-dot' />,
-      curr
-    ])
-);
-
-export const Select = ({
-  link,
-  opts,
-  onChange = (e) => { App.save(link, e.currentTarget.value); },
-  value = App.state[link],
-  ...rest}) => (
-  <select
-    onChange={onChange}
-    value={value}
-    {...rest}>
-    {opts.map((opt, index) =>
-      <option key={index}>{opt}</option>
-    )}
-  </select>
-);
-
-Select.propTypes = {
-  link: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.any,
-  opts: PropTypes.array
-};
-
-export const Textarea = ({link, ...rest}) => (
-  <textarea
-    style={ {"overflowY": "scroll", "height": "150px"}}
-    onChange=
-      { (e) => { App.save("list", e.currentTarget.value); } }
-    value={App.state[link]}
-    {...rest} />
-);
-
-Textarea.propTypes = {
-  link: PropTypes.string
-};
-
-//TODO: check if lodash can do it
-export const toTitleCase = (string="", separator=" ") =>
-  string.split(separator)
-    .reduce((result, word) => `${result} ${word.charAt(0).toUpperCase()+word.slice(1).toLowerCase()}`, "");
diff --git a/frontend/style.css b/frontend/style.css
index d8a89305..af1d25b1 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -622,3 +622,16 @@ input[type="checkbox"], input[type="radio"] {
   display: flex;
   flex-direction: column;
 }
+
+.game-mode-description {
+  background: #ddd;
+  border-left: 5px solid #bbb;
+  margin-left: 0px;
+  padding: 1px 1px 1px 10px;
+  font-style: italic;
+}
+
+.cube-list {
+  overflow-y: "scroll";
+  height: 150px;
+}
\ No newline at end of file
diff --git a/frontend/test/utils.spec.js b/frontend/test/utils.spec.js
new file mode 100644
index 00000000..a6dca021
--- /dev/null
+++ b/frontend/test/utils.spec.js
@@ -0,0 +1,31 @@
+const {describe, it} = require("mocha");
+const assert = require("assert");
+const {toTitleCase} = require("./../src/utils");
+
+describe("Acceptance tests for frontend utils", () => {
+  it("toTitleCase() should capitalize each word", () => {
+    assert(toTitleCase("") === "");
+    assert(toTitleCase(0) === "");
+    assert(toTitleCase({}) === "");
+
+    assert(toTitleCase("draft") === "Draft");
+    assert(toTitleCase("Draft") === "Draft");
+    assert(toTitleCase("DRAFT") === "Draft");
+    assert(toTitleCase("draft") === "Draft");
+
+    assert(toTitleCase("cube draft") === "Cube Draft");
+    assert(toTitleCase("CUBE DRAFT") === "Cube Draft");
+
+    assert(toTitleCase("cube_draft") === "Cube_draft");
+    assert(toTitleCase("CUBE_DRAFT") === "Cube_draft");
+    assert(toTitleCase("cube_draft", "_") === "Cube_Draft");
+    assert(toTitleCase("CUBE_DRAFT", "_") === "Cube_Draft");
+
+    assert(toTitleCase("longer sentence of wordiness") === "Longer Sentence Of Wordiness");
+    assert(toTitleCase("LONGER SENTENCE OF WORDINESS") === "Longer Sentence Of Wordiness");
+    assert(toTitleCase("longer_sentence_of_wordiness") === "Longer_sentence_of_wordiness");
+    assert(toTitleCase("LONGER_SENTENCE_OF_WORDINESS") === "Longer_sentence_of_wordiness");
+    assert(toTitleCase("longer_sentence_of_wordiness", "_") === "Longer_Sentence_Of_Wordiness");
+    assert(toTitleCase("LONGER_SENTENCE_OF_WORDINESS", "_") === "Longer_Sentence_Of_Wordiness");
+  });
+});
diff --git a/package.json b/package.json
index c63e521f..1142b4b7 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,11 @@
   "scripts": {
     "start": "node scripts/run",
     "start-dev": "npm run watch & npm run nodemon",
+    "start-debug": "npm run watch & npm run nodemon:debug",
     "build": "webpack --config webpack.prod.js",
     "watch": "webpack --config webpack.dev.js --watch -d --display-error-details",
     "nodemon": "nodemon ./app.js -e html,js --ignore built --ignore frontend",
+    "nodemon:debug": "nodemon --inspect-brk=1338 ./app.js -e html,js --ignore built --ignore frontend",
     "lint": "eslint --ignore-path .gitignore .",
     "pretest": "npm run lint",
     "test": "mocha --reporter spec --exit \"./{,!(node_modules)/**/}*.spec.js\"",
diff --git a/webpack.common.js b/webpack.common.js
index a734b67a..ed00ba7b 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -22,7 +22,7 @@ module.exports = {
       cache: false
     }),
     new CopyWebpackPlugin([
-      { from: "frontend", ignore: ["*.tpl", "src/**/*"] }
+      { from: "frontend", ignore: ["*.tpl", "src/**/*", "test/**/*"] }
     ], {
       copyUnmodified: true
     }),
@@ -43,7 +43,10 @@ module.exports = {
     rules: [
       {
         test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
+        exclude: [
+          /node_modules/,
+          /\.spec\.js$/
+        ],
         use: {
           loader: "babel-loader",
           options: {