diff --git a/src/creator.coffee b/src/creator.coffee
index af36b39..93834d7 100755
--- a/src/creator.coffee
+++ b/src/creator.coffee
@@ -194,7 +194,7 @@ Hangman.controller 'HangmanCreatorCtrl', ['$timeout', '$scope', '$sanitize', 'Re
 		$scope.hideCover()
 
 	$scope.hideCover = ->
-		$scope.showTitleDialog = $scope.showIntroDialog = false
+		$scope.showTitleDialog = $scope.showIntroDialog = $scope.questionBankDialog = false
 
 	$scope.initNewWidget = (widget, baseUrl) ->
 		$scope.$apply ->
diff --git a/src/creator.html b/src/creator.html
index 82049fc..1b96ccf 100644
--- a/src/creator.html
+++ b/src/creator.html
@@ -27,7 +27,12 @@
 			<div class="logo"></div>
 			<h1 id="title" ng-bind="title" ng-click="showTitleDialog = true"></h1>
 			<div ng-click="showTitleDialog = true" class="link">Edit...</div>
-			<button class= "questionBankButton" ng-click="questionBankDialog = !questionBankDialog">Question Bank</button>
+			<button
+				ng-class= "{'questionBankButton': true, 'gray-out': !enableQuestionBank}"
+				ng-click="questionBankDialog = !questionBankDialog"
+				ng-disabled="items.length === 0">
+				Question Bank: {{enableQuestionBank === true ? "ON" : "OFF"}}
+			</button>
 			<span class="attempts">
 				<p>Incorrect guesses per phrase</p>
 				<div class="slide-btn">
@@ -170,34 +175,10 @@ <h3>Phrase</h3>
 			<span>{{currentPage+1}}/{{numberOfPages()}}</span>
 			<button ng-disabled="currentPage >= numberOfPages() - 1" ng-click="currentPage=currentPage+1">Next</button>
 		</div>
-		<div ng-show= "questionBankDialog" class="overlay"></div>
-		<div class="questionBankDialog-wrapper" ng-show= "questionBankDialog">
-				<div class="questionBankDialog">
-					<div class="enable-qb-question">
-						<strong>Enable question bank? </strong>
-						<div>
-							<span>
-								<input type="radio" ng-model="enableQuestionBank" ng-value=false> No</input>
-								<input type="radio" ng-model="enableQuestionBank" ng-value=true> Yes</input>
-							</span>
-						</div>
-					</div>
-					<div>
-						<span ng-show="enableQuestionBank" >
-							<strong>How many questions to ask? </strong>
-							<div>
-								<input class="numInput" type="number" ng-model="questionBankVal" ng-attr-min="{{items.length < 1 ? items.length : 1}}" ng-attr-max="{{items.length}}" step="1">
-								<span> out of {{items.length}} </span>
-							</div>
-						</span>
-					</div>
-				</div>
-				<button class="dialogCloseButton" ng-click="(questionBankVal <= items.length && questionBankVal > 0) && (questionBankDialog = !questionBankDialog)">Okay</button>
-		</div>
 		<div ng-show="!items.length &amp;&amp; step" class="arrow-box">
 			<span>Click here to add your first question</span>
 		</div>
-		<div id="backgroundcover" ng-click="hideCover()" ng-class="{ show: showTitleDialog || showIntroDialog }"></div>
+		<div id="backgroundcover" ng-click="hideCover()" ng-class="{ show: showTitleDialog || showIntroDialog || questionBankDialog }"></div>
 		<div ng-class="{ show: showIntroDialog }" class="box intro">
 			<img src="assets/creator_example.png">
 			<h1>Guess the Phrase</h1>
@@ -213,5 +194,29 @@ <h1>Guess the Phrase</h1>
 			<input type="text" placeholder="My Guess the Phrase widget" ng-model="title" focus-me="showTitleDialog" ng-enter="hideCover()">
 			<input type="button" value="Done" ng-click="hideCover()">
 		</div>
+		<div ng-class="{ show: questionBankDialog }" ng-click= 'hideCover()' class="box questionBankDialog">
+			<div class="enable-qb-question">
+				<strong>Enable question bank? </strong>
+				<div class="enable-qb-options" ng-click="$event.stopPropagation()">
+					<span>
+						<input type="radio" ng-model="enableQuestionBank" ng-value=false> No</input>
+						<input type="radio" ng-model="enableQuestionBank" ng-value=true> Yes</input>
+					</span>
+				</div>
+			</div>
+			<div>
+				<span ng-show="enableQuestionBank" >
+					<strong>How many questions to ask? </strong>
+					<div class="num-input-wrapper" ng-click="$event.stopPropagation()">
+						<input class="numInput" type="number" ng-model="questionBankVal" ng-attr-min="{{items.length < 1 ? items.length : 1}}" ng-attr-max="{{items.length}}" step="1">
+						<span> out of {{items.length}} </span>
+					</div>
+				</span>
+			</div>
+			<button class="dialogCloseButton"
+			ng-click="(questionBankVal <= items.length && questionBankVal > 0) && (questionBankDialog = !questionBankDialog)"
+			ng-disabled="questionBankVal < 0 || questionBankVal > items.length">Confirm</button>
+		</div>
+
 	</body>
 </html>
diff --git a/src/creator.scss b/src/creator.scss
index 83c913d..0b9173e 100644
--- a/src/creator.scss
+++ b/src/creator.scss
@@ -483,6 +483,81 @@ button.add-question {
 	}
 }
 
+.questionBankDialog {
+
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	margin: 0;
+	transform: translate(-50%, -50%);
+	background-color: white;
+	padding: 0;
+	height: 200px;
+	width: 300px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+
+	input {
+		margin-top: 0;
+		padding: 0;
+		width: unset;
+		background: white;
+		font-size: 17px;
+		text-align: center;
+		border: none;
+		vertical-align: unset;
+		font-family: 'Lato';
+	}
+	.num-input-wrapper {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		align-items: center;
+		margin-bottom: 15px;
+
+		.numInput {
+			color: black;
+			outline: 1px solid black;
+			width: 35px;
+			margin: 2px 5px 0 0;
+		}
+	}
+
+	.enable-qb-question {
+		margin-top: 15px;
+		margin-bottom: 15px;
+
+		.enable-qb-options {
+			display: flex;
+			justify-content: center;
+		}
+	}
+
+	.dialogCloseButton {
+		position: relative;
+		margin-top: 5px;
+		margin-bottom: 5px;
+		font-size: 15px;
+		width: 100px;
+		background-color: #70bd34;
+		color: black;
+
+		&:hover {
+			background-color: #88df45;
+			border: 1px solid #88df45;
+			color: black;
+			cursor: pointer;
+		}
+
+		&:disabled {
+			background-color: #cccccc;
+			color: white;
+		}
+	}
+}
+
 .arrow-box {
 	position: absolute;
 	background: #fbf767;
@@ -622,9 +697,37 @@ button.add-question {
 
 	.questionBankButton {
 		position: absolute;
-		background-color: #5a5a5a;
+		background-color: $green;
+		color: #fff;
+		width: unset;
 		right: 550px;
 		top: 35px;
+
+		&:hover {
+			background-color: #7AD038;
+			cursor: pointer;
+		}
+
+		&:disabled {
+			background-color: #ccc;
+			border: 1px solid #ccc;
+			color: #fff;
+			cursor: not-allowed;
+		}
+
+		&.gray-out:not(:disabled) {
+			background-color: #5a5a5a;
+			border: 1px solid #5a5a5a;
+			color: #fff;
+
+			&:hover {
+				background-color: #938f8f;
+				border: 1px solid #938f8f;
+				cursor: pointer;
+			}
+
+		}
+
 	}
 
 	.attempts {
@@ -780,57 +883,6 @@ button.add-question {
 	}
 }
 
-.questionBankDialog-wrapper {
-	position: fixed;
-  	top: 50%;
-  	left: 50%;
-  	transform: translate(-50%, -50%);
-	border: 5px solid greenyellow;
-	border-radius: 5px;
-	background-color: white;
-	color: black;
-	height: 300px;
-	width: 250px;
-	z-index: 10000;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	.questionBankDialog {
-		margin: 15px;
-
-		.numInput {
-			width: 30px;
-			margin-top: 10px;
-		}
-
-		.enable-qb-question {
-			margin-top: 15px;
-			margin-bottom: 15px;
-		}
-
-	}
-
-	.dialogCloseButton {
-		position: absolute;
-		bottom: 10px;
-		background-color: rgb(26, 244, 171);
-		color: black;
-	}
-
-}
-
-// To blur the background while the dialog is open
-.overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 9000;
-	backdrop-filter: blur(5px);
-  }
-
 .question-tip {
 	position: absolute;
 	right: 28px;