diff --git a/src/generator/background.js b/src/generator/background.js
index 36a6bea..f92589d 100644
--- a/src/generator/background.js
+++ b/src/generator/background.js
@@ -1,32 +1,35 @@
-const random = require('./random');
-const backgrounds = require('./data/backgrounds.json');
+const Random = require('./random');
+const Sources = require('./sources');
+const Backgrounds = require('./data/backgrounds.json');
 
 module.exports = {
+  names: function (sources = 'ALL') {
+    return Sources.flatData(Backgrounds, sources).map(b => b.name);
+  },
   byName: function (name) {
-    return [].concat.apply([], Object.keys(backgrounds).map(r => backgrounds[r])).filter(r => r.name === name)[0];
+    return [].concat.apply([], Object.keys(Backgrounds).map(r => Backgrounds[r])).filter(r => r.name === name)[0];
   },
   reason: function (background) {
-    return random.element(background.reasons);
+    return Random.element(background.reasons);
   },
   trait: function (background) {
-    return random.element(background.traits || []);
+    return Random.element(background.traits || []);
   },
   ideal: function (background, alignment) {
     const ideals = background.ideals.filter(i => i.alignments.length === 0 || i.alignments.includes(alignment.abbreviation));
-    console.log(ideals);
-    return random.element(ideals);
+    return Random.element(ideals);
   },
   bond: function (background) {
-    return random.element(background.bonds || []);
+    return Random.element(background.bonds || []);
   },
   flaw: function (background) {
-    return random.element(background.flaws || []);
+    return Random.element(background.flaws || []);
   },
   other: function (background) {
     if (!background.other) return [];
-    return Object.keys(background.other).map(o => ({ name: o, value: random.element(background.other[o]) }));
+    return Object.keys(background.other).map(o => ({ name: o, value: Random.element(background.other[o]) }));
   },
   random: function (sources = 'ALL') {
-    return random.sourcedElement(backgrounds, sources);
+    return Random.sourcedElement(Backgrounds, sources);
   }
 }
\ No newline at end of file
diff --git a/src/generator/class.js b/src/generator/class.js
index 2a487eb..fd24643 100644
--- a/src/generator/class.js
+++ b/src/generator/class.js
@@ -1,18 +1,22 @@
-const random = require('./random');
-const classes = require('./data/classes.json');
+const Random = require('./random');
+const Sources = require('./sources');
+const Classes = require('./data/classes.json');
 
 module.exports = {
+  names: function (sources = 'ALL') {
+    return Sources.flatData(Classes, sources).map(c => c.name);
+  },
   byName: function (name) {
-    return [].concat.apply([], Object.keys(classes).map(r => classes[r])).filter(r => r.name === name)[0];
+    return [].concat.apply([], Object.keys(Classes).map(r => Classes[r])).filter(r => r.name === name)[0];
   },
   random: function (sources = 'ALL') {
-    return random.sourcedElement(classes, sources);
+    return Random.sourcedElement(Classes, sources);
   },
   reason: function (cClass) {
-    return random.element(cClass.reasons);
+    return Random.element(cClass.reasons);
   },
   other: function (cClass) {
     if (!cClass.other) return [];
-    return Object.keys(cClass.other).map(o => ({ name: o, value: random.element(cClass.other[o]) }));
+    return Object.keys(cClass.other).map(o => ({ name: o, value: Random.element(cClass.other[o]) }));
   },
 }
\ No newline at end of file
diff --git a/src/generator/race.js b/src/generator/race.js
index b6c4c99..521eee3 100644
--- a/src/generator/race.js
+++ b/src/generator/race.js
@@ -1,24 +1,27 @@
-const random = require('./random');
-
-const races = require('./data/races.json');
+const Random = require('./random');
+const Sources = require('./sources');
+const Races = require('./data/races.json');
 
 module.exports = {
+  names: function (sources = 'ALL') {
+    return Sources.flatData(Races, sources).map(r => r.name);
+  },
   byName: function (name) {
-    return [].concat.apply([], Object.keys(races).map(r => races[r])).filter(r => r.name === name)[0];
+    return [].concat.apply([], Object.keys(Races).map(r => Races[r])).filter(r => r.name === name)[0];
   },
   random: function (sources = 'ALL') {
-    return random.sourcedElement(races, sources);
+    return Random.sourcedElement(Races, sources);
   },
   randomSubrace: function (race) {
-    return random.element(race.subraces);
+    return Random.element(race.subraces);
   },
   other: function (race, subrace) {
     const r = [];
     if (race.other) {
-      r.push(...Object.keys(race.other).map(o => ({ name: o, value: random.element(race.other[o]) })));
+      r.push(...Object.keys(race.other).map(o => ({ name: o, value: Random.element(race.other[o]) })));
     }
     if (subrace && subrace.other) {
-      r.push(...Object.keys(subrace.other).map(o => ({ name: o, value: random.element(subrace.other[o]) })));
+      r.push(...Object.keys(subrace.other).map(o => ({ name: o, value: Random.element(subrace.other[o]) })));
     }
     return r;
   },
diff --git a/src/index.html b/src/index.html
index 36e5514..6e8cc13 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,10 +21,39 @@ <h1>This Is Your Life!</h1>
         <p>
           This is a simple generator that automates the process of rolling on all the character generation tables that can be found
           in the Dungeons &amp; Dragons 5th Edition Player Handbook, Volo's Guide to Monsters, and Xanathar's Guide to Everything.
-          Click the button below to create a character!</p>
+          Click the button below to create a character!
+        </p>
+        <div class="row">
+          <div class="col-md-3 col-sm-4">
+            <div class="form-group">
+              <label for="race">Race</label>
+              <select class="form-control" id="race">
+                <option value="" selected>Any</option>
+              </select>
+            </div>
+          </div>
+          <div class="col-md-3 col-sm-4">
+            <div class="form-group">
+              <label for="class">Class</label>
+              <select class="form-control" id="class">
+                <option value="" selected>Any</option>
+              </select>
+            </div>
+          </div>
+          <div class="col-md-3 col-sm-4">
+            <div class="form-group">
+              <label for="background">Background</label>
+              <select class="form-control" id="background">
+                <option value="" selected>Any</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="row">
           <a id="generate" href="#" class="btn btn-primary" role="button">Roll again!
             <i class="fa fa-chevron-right"></i>
           </a>
+        </div>
       </div>
     </div>
     <div class="container">
diff --git a/src/index.js b/src/index.js
index 74ca551..3f8bead 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,42 @@
 const Generator = require('./generator');
 const Formatter = require('./formatter');
 
+const Race = require('./generator/race');
+const Background = require('./generator/background');
+const Class = require('./generator/class');
+
 function generateCharacter(e) {
-  const character = Generator();
+  const config = {
+    race: selectedValue('race'),
+    class: selectedValue('class'),
+    background: selectedValue('background'),
+  }
+  const character = Generator(config);
   document.getElementById('character').innerHTML = Formatter(character);
   if (e) { e.preventDefault(); }
   return false;
 }
 
+function fillDropdown(id, source) {
+  const select = document.getElementById(id);
+  source.forEach(c => {
+    const o = document.createElement('option');
+    o.text = o.value = c;
+    select.add(o);
+  });
+}
+
+function selectedValue(id) {
+  const select = document.getElementById(id);
+  return select.options[select.selectedIndex].value;
+}
+
+function populateDropdowns() {
+  fillDropdown('race', Race.names());
+  fillDropdown('class', Class.names());
+  fillDropdown('background', Background.names());
+}
+
 document.getElementById('generate').addEventListener('click', generateCharacter);
-generateCharacter();
\ No newline at end of file
+generateCharacter();
+populateDropdowns();
\ No newline at end of file