diff --git a/AlbertMineSweeper.script.js b/AlbertMineSweeper.script.js
index 3877826..7803b47 100644
--- a/AlbertMineSweeper.script.js
+++ b/AlbertMineSweeper.script.js
@@ -37,10 +37,16 @@ function Grid(numRow, numCol, numMines) {
 	this.cells = [];
 	for(var i = 0; i < this.numRow; i++) {
 		this.cells[i] = [];
+		$(".base").append("<div class=\"row\" id=\"row" + i.toString() + "\"><div>");
 		for(var j = 0; j < this.numCol; j++) {
 			this.cells[i][j] = new Cell();
+			$("#row"+i.toString()).append("<div class=\"cell\" data-row=\"" + i.toString() + "\" data-col=\"" + j.toString() + "\"></div>");
 		}
-	} 
+	}
+	// Adjust Dimensions of Base
+	var edgeThickness = 2 * (parseInt($(".cell").css("border-left-width")) + parseInt($(".cell").css("margin")) + parseInt($(".cell").css("padding")));
+	$(".base").height(numRow * ($(".cell").height() + edgeThickness) + 10);
+	$(".base").width(numCol * ($(".cell").width() + edgeThickness) + 10);
 
 	// Seed mines randomly in grid, adds them to minedCells[] and calculate each cell's risk
 	for(var c = 0; c < numMines; c++) {
diff --git a/ams_board.css b/ams_board.css
index 1eaa956..a1dfc88 100644
--- a/ams_board.css
+++ b/ams_board.css
@@ -4,9 +4,6 @@ div {
 
 .base {
 	background-color: gray;
-	height: 410px;
-	width: 410px;
-	/*for a 15*15 grid.*/
 }
 
 .cell {
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..22e6353
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "AlbertMineSweeper",
+  "version": "0.0.0",
+  "homepage": "https://github.com/albertliangcode/AlbertMineSweeper",
+  "authors": [
+    "albertliangcode <albertliangcode@gmail.com>"
+  ],
+  "moduleType": [
+    "amd",
+    "es6",
+    "globals",
+    "node",
+    "yui"
+  ],
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "~2.1.3"
+  }
+}
diff --git a/index.html b/index.html
index 10628ed..6acaca4 100644
--- a/index.html
+++ b/index.html
@@ -11,14 +11,15 @@
 		<h1>Albert Mine Sweeper</h1>
 		<h4>Project Status:</h4>
 		<ul>
-			<li>Current: End Conditions</li>
-			<li>Next: Adjustable Game</li>
+			<li>Current: Adjustable GameBoard</li>
 			<li>Next: User Interface for:
 				<ol>
 					<li>Resetting Game</li>
 					<li>Adjusting Game Settings</li>
 				</ol>
 			</li>
+			<li>Next: No First-Click Deaths</li>
+			<li>Next: End Conditions (UI Freeze)</li>
 			<li>Next: Clock</li>
 			<li>Next: Scoreboard?</li>
 			<li>Next: Match Graphics to MS Minesweeper?</li>
@@ -32,45 +33,15 @@ <h4>Project Status:</h4>
 				</ul>
 			</li>
 		</ul>
+
+
+		<form id="gridSetup">
+			Rows: <input type="text" name="rows"><br>
+			Columns: <input type="text" name="cols"><br>
+			Mines: <input type="text" name="mines"><br><br>
+			<input type="submit" value="Refresh Game"><br><br><br>
+		</form>
 		<div class="base" oncontextmenu="return false;">
-			<div class="row"> 
-				<!--The "." was needed, or else the margins in some of the cells became 
-				unbalanced when some cells were visted and others not yet visited.-->
-				<div class="cell" data-row="0" data-col="0"></div>
-				<div class="cell" data-row="0" data-col="1"></div>
-				<div class="cell" data-row="0" data-col="2"></div>
-				<div class="cell" data-row="0" data-col="3"></div>
-				<div class="cell" data-row="0" data-col="4"></div>
-			</div>
-			<div class="row">
-				<div class="cell" data-row="1" data-col="0"></div>
-				<div class="cell" data-row="1" data-col="1"></div>
-				<div class="cell" data-row="1" data-col="2"></div>
-				<div class="cell" data-row="1" data-col="3"></div>
-				<div class="cell" data-row="1" data-col="4"></div>
-			</div>
-			<div class="row">
-				<div class="cell" data-row="2" data-col="0"></div>
-				<div class="cell" data-row="2" data-col="1"></div>
-				<div class="cell" data-row="2" data-col="2"></div>
-				<div class="cell" data-row="2" data-col="3"></div>
-				<div class="cell" data-row="2" data-col="4"></div>
-			</div>
-			<div class="row">
-				<div class="cell" data-row="3" data-col="0"></div>
-				<div class="cell" data-row="3" data-col="1"></div>
-				<div class="cell" data-row="3" data-col="2"></div>
-				<div class="cell" data-row="3" data-col="3"></div>
-				<div class="cell" data-row="3" data-col="4"></div>
-			</div>
-			<div class="row">
-				<div class="cell" data-row="4" data-col="0"></div>
-				<div class="cell" data-row="4" data-col="1"></div>
-				<div class="cell" data-row="4" data-col="2"></div>
-				<div class="cell" data-row="4" data-col="3"></div>
-				<div class="cell" data-row="4" data-col="4"></div>
-			</div>
-		</div>
 		<script type="text/javascript" src="AlbertMineSweeper.script.js"></script>
 	</body>
 </html>
diff --git a/ui.js b/ui.js
index 27cd7d4..ed6dc12 100644
--- a/ui.js
+++ b/ui.js
@@ -25,11 +25,15 @@ var stopGame = function () {
 
 
 $(document).ready(function() {
-	//Must bind contextmenu event handler to each cell
-	//document.oncontextmenu = function() {return false;};
-	var grid = new Grid(5,5,2);
-	var report = grid.print();
-	
+	var grid;
+	var report;
+	$('#gridSetup').submit(function(){
+		var $values = $('#gridSetup').serializeArray();
+		grid = new Grid(parseInt($values[0].value),parseInt($values[1].value),parseInt($values[2].value));
+		// var grid = new Grid(7,7,5);
+		report = grid.print();
+	}); // <<<The program kicks me out here.>>>
+
 	$('.cell').mousedown(function(event) {
 		var row = $(this).data('row');
 		var col = $(this).data('col');