diff --git a/github-token-guide.pdf b/github-token-guide.pdf
new file mode 100644
index 00000000..e4f41b3e
Binary files /dev/null and b/github-token-guide.pdf differ
diff --git a/index.html b/index.html
index 1f6f9d4a..fbeac2b5 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 	<head>
 	<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
@@ -135,21 +135,27 @@
     line-height: 1.25;
     color: #464a4c;
     vertical-align: middle;
-    background: #fff url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…'0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E) no-repeat right .75rem center;
+    background-color: #fff;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right .75rem center;
     -webkit-background-size: 8px 10px;
     background-size: 8px 10px;
     border: 1px solid rgba(0,0,0,.15);
     border-radius: .25rem;
+	appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
+	
 }
 
 .QuestionsSuggestions  {
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	font-size: 0.8rem;
+margin-top: 1rem;
+margin-bottom: 1rem;
+font-size: 0.8rem;
 }
 
+
 .text-muted {
 color: #636c72;
 margin-bottom: 0px;
@@ -172,11 +178,24 @@
 cursor: url(hand.cur), pointer;
 }
 
+#tokenInput {
+  width: 420px;;
+  margin: 0 auto;
+  align-items: center;
+  display: inline;
+  padding-left: 98px;
+  margin-left: 175px;
+}
+
+.paddedLeftMargin
+{
+	display: inline;
+}
 
 </style>
 
 <body>
-     	<p class="TopLabel"><label class="IssueLabel GoodFirstIssue">Good First Issue</label>.com</p>
+    <p class="TopLabel"><label class="IssueLabel GoodFirstIssue">Good First Issue</label>.com</p>
 	<div class="container-fluid hidden-sm-down">
 	<div class="row">
 	<div class="col-md-12 text-center QuestionsSuggestions">
@@ -185,15 +204,39 @@
 	</div>
 	</div>
 
+	
 	<span class="octicon octicon-clippy"></span>
 	<div class="container welcome">
 		<div class="row d-block">
 		<h1>Find Great Open Source Opportunities.</h1>
 		<p class="lead">Made for new contributors to find great Open Source projects.</p>
-		<p>Discover Issues and Repositories with <label class="IssueLabel HelpWanted">Help Wanted</label> <label class="IssueLabel StarterTask">Starter Task</label> and <Label class="IssueLabel GoodFirstIssue">Good First Issue</label> labels. </p>
+		<p>Discover Issues and Repositories with <label class="IssueLabel HelpWanted">Help Wanted</label> <label class="IssueLabel StarterTask">Starter Task</label> and <label class="IssueLabel GoodFirstIssue">Good First Issue</label> labels. </p>
 		</div>
 	</div>
 
+
+	<div class="form-group paddedLeftMargin">
+    <input
+    type="password"
+    id="tokenInput"
+    class="form-control"
+    placeholder="Enter GitHub token (not stored)"
+
+    />
+    </div>
+
+    <div class="paddedLeftMargin" style="margin-top: 8px;" >
+    <small class="text-muted">
+    Don’t know how to generate a GitHub token?
+    <a href="github-token-guide.pdf" target="_blank">
+      <i class="fa fa-lock"></i> View step-by-step guide
+    </a>
+    </small>
+    </div>
+
+	<br>
+	<br>
+
 	<div class="container search-body">
   		<div class="row">
 				<div class = 'form-header'>
@@ -253,6 +296,7 @@ <h1>Find Great Open Source Opportunities.</h1>
 		</div>
 	</div>
 
+	
 
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
@@ -261,6 +305,7 @@ <h1>Find Great Open Source Opportunities.</h1>
 </html>
 
 <script>
+	var token;
 
 
 var searchIssuesQuery  = `
@@ -568,6 +613,7 @@ <h1>Find Great Open Source Opportunities.</h1>
 
 function onSubmitButton() {
 
+	readTokenFromInput();
 	var parameters = getHTMLParameters();
 	if (parameters.language == "") {
 		return;
@@ -654,30 +700,43 @@ <h1>Find Great Open Source Opportunities.</h1>
 	makeQuery();
 }
 
+function readTokenFromInput() {
+    var input = document.getElementById("tokenInput");
+    if (input && input.value.trim() !== "") {
+        token = input.value.trim();
+    }
+}
 
-function fetchQuery(query, variables, callback)  {
-	//https://graphql.org/graphql-js/graphql-clients/
-
-	var body = JSON.stringify({
-                query,
-                variables: variables,
-	});
-
+function fetchQuery(query, variables, callback) {
 
-	fetch('https://api.github.com/graphql',
-	{
-        	method: 'POST',
-        	headers: {
-                	'Content-Type': 'application/json',
-                	'Accept': 'application/json',
-                	'Authorization': 'Bearer' + ' ' + token,
-        	},
-        	body: body
+    if (typeof token === "undefined") {
+        stopLoadingSpinner($('.spinner'));
+        alert("GitHub token is not configured. Please add a token to fetch issues.");
+        return;
+    }
 
-	}).then(r => r.json()).then(data => {
-    		callback(data);
-	});
+    var body = JSON.stringify({
+        query,
+        variables: variables,
+    });
+
+    fetch('https://api.github.com/graphql', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+            'Authorization': 'Bearer ' + token,
+        },
+        body: body
+    })
+    .then(r => r.json())
+    .then(data => callback(data))
+    .catch(err => {
+        stopLoadingSpinner($('.spinner'));
+        console.error(err);
+    });
 }
 
 
+
 </script>
