diff --git a/app.js b/app.js
new file mode 100644
index 0000000..7ea42f7
--- /dev/null
+++ b/app.js
@@ -0,0 +1,55 @@
+const app = new Vue({
+	el: `#app`,
+	data: {
+		options: [],
+		chosen: null,
+	},
+	computed: {
+		totalWeight() {
+			return this.options
+				.filter(c => {
+					try { parseInt(c.weight) }
+					catch (e) { return false };
+					return true;
+				})
+				.reduce(
+					(p, c) => p + parseInt(c.weight),
+					0
+				);
+		},
+	},
+	methods: {
+		addOption() {
+			this.options.push({
+				name: ``,
+				weight: ``,
+				chance: ``,
+			});
+		},
+		removeOption(i) {
+			this.options.splice(i, 1);
+			this.updateChanceValues();
+		},
+		pickAnOption() {
+			let choice = Math.floor(Math.random() * this.totalWeight);
+
+			let min = 0;
+			for (const opt of this.options) {
+				let max = min + parseInt(opt.weight);
+				if (choice < max) {
+					this.chosen = opt;
+					return;
+				};
+				min = max;
+			};
+		},
+		updateChanceValues() {
+			for (const opt of this.options) {
+				if (!opt.weight) {
+					continue
+				}
+				opt.chance = Math.round(opt.weight / this.totalWeight * 100 );
+			};
+		},
+	},
+})
\ No newline at end of file
diff --git a/index.html b/index.html
index b108200..dc36005 100644
--- a/index.html
+++ b/index.html
@@ -1,43 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta http-equiv="X-UA-Compatible" content="ie=edge">
-		<title>Weighted Choice Maker</title>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Weighted Choice Maker</title>
 
-		<!-- CSS -->
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css">
-		<link rel="stylesheet" href="style.css">
+	<!-- CSS -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css">
+	<link rel="stylesheet" href="style.css">
 
-		<!-- JAVASCRIPT -->
-		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
-	</head>
-	<body>
-		<template id="choice-template">
-			<div class="choice">
-				<input type="text" class="left" placeholder="Choice Name">
-				<input class="right" type="text" placeholder="Choice Weighting">
-				<button class="delete" onclick="delete_choice(this)">X</button>
-				<div class="line"></div>
-			</div>
-		</template>
-		<h1>Weighted Choice Maker</h1>
-		<div class="container">
-			<h2>Choices:</h2>
-			<button onclick="add_choice()">Add New Choice</button>
-			<br>
+	<!-- JAVASCRIPT -->
+	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+	<script src="./app.js" defer></script>
+</head>
+<body>
+	<template id="choice-template">
+		<div class="choice">
+			<input type="text" class="left" placeholder="Choice Name">
+			<input class="right" type="text" placeholder="Choice Weighting">
+			<button class="delete" onclick="delete_choice(this)">X</button>
 			<div class="line"></div>
-			<div id="choices">
-				<div class="choice">
-					<input class="left" type="text" id="text-in-0" placeholder="Choice Name">
-					<input class="right" type="text" id="weight-in-0" placeholder="Choice Weighting">
-					<button class="delete" onclick="delete_choice(this)">X</button>
-					<div class="line"></div>
-				</div>
-			</div>
-			<button onclick="choose_option()">Choose</button>
-			<h2>Chosen Entry: <span id="result"></span></h2>
 		</div>
-	</body>
+	</template>
+	<h1>Weighted Choice Maker</h1>
+	<div id="app" v-cloak class="container">
+		<h2>Choices:</h2>
+		<button @click.stop="addOption">Add New Choice</button>
+		<br>
+		<hr>
+		<ul>
+			<li
+				v-for="option, i in options"
+				:key="i"
+			>
+				<input type="text" class="left" placeholder="Choice Name" v-model="option.name">
+				<input
+					type="number"
+					class="right"
+					placeholder="Choice Weighting"
+					v-model="option.weight"
+					min="1"
+					@change="updateChanceValues"
+				>
+				<span v-if="option.chance">
+					({{option.chance}}%)
+				</span>
+				<button class="delete" @click.stop="removeOption(i)">X</button>
+			</li>
+		</ul>
+		<hr v-if="options.length > 0">
+		<button @click.stop="pickAnOption">Choose</button>
+		<h2 v-if="chosen">Chosen Entry: <span id="result">{{chosen.name}}</span></h2>
+	</div>
+</body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 9bb9060..9fe7979 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,8 @@
 h1, h2, h3 { text-align: center; }
 
+[v-cloak] {
+	display: none !important;
+}
 
 div.container {
 	text-align: center;
@@ -24,14 +27,22 @@ div.line {
 }
 
 
+ul {
+	list-style: none;
+	padding-inline-start: 0;
+}
 
-input[type="text"] {
-	display: inline-block !important;
-	margin-bottom: 0px;
-	margin-right: 0px;
-	margin-left: 0px;
-	margin-top: 0px;
-	width: 40%;
+ul > li {
+	margin-bottom: 10px;
+	display: flex;
+	align-items: center;
+}
+
+
+input[type="text"],
+input[type="number"] {
+	margin: 5px;
+	flex-grow: 1;
 }
 
 /* Move boxes further apart */
