diff --git a/css/style.css b/css/style.css
index 1c4a39f..30cbe4c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -5,3 +5,11 @@
 .top-buffer{
     margin-top: 30px;
 }
+.answer{
+    padding: 15px 20px;
+    border-radius: 10px;
+    border: 1px solid #bbb;
+}
+.answer:hover{
+    cursor: pointer;
+}
diff --git a/index.html b/index.html
index 21ed3e3..7c79476 100644
--- a/index.html
+++ b/index.html
@@ -90,7 +90,57 @@
 
           <!-- quizCtrl -->
           <div ng-controller = "quizCtrl as quiz" ng-show ="quiz.quizMetrics.quizActive">
-              <p>Work hard bro u will get it </p>
+
+              <div class="row">
+                <div class="col-xs-8">
+                  <h2><progress:</h2>
+                  <div class="btn-toolbar">
+                       <button class="btn"
+                               ng-repeat = "question in quiz.dataServices.quizQuestions"
+                               ng-class = "{'btn-info': question.selected !== null, 'btn-danger': question.selected == null}">
+                               <span class="glyphicon"
+                                     ng-class ="{'glyphicon-pencil': question.selected !== null, 'glyphicon-question-sign': question.selected == null}"></span>
+                       </button>
+                  </div>
+                </div>
+                <div class="col-xs-4">
+                  <div class="row">
+                       <h4>Legend:</h4>
+                       <div class="col-sm-4">
+                         <button class="btn btn-info">
+                                 <span class="glyphicon glyphicon-pencil"></span>
+                         </button>
+                         <p>Answered</p>
+                       </div>
+                       <div class="col-sm-4">
+                         <button class="btn btn-danger">
+                                 <span class="glyphicon glyphicon-question-sign"></span>
+                         </button>
+                         <p>Unanswered</p>
+                       </div>
+                  </div>
+                </div>
+              </div> <!-- progress section -->
+
+              <div class="row">
+                <h3>Question:</h3>
+                <div class="well well-sm">
+                     <div class="row">
+                       <div class="col-xs-12">
+                         <h4>{{quiz.activeQuestion+1 + ". " + quiz.dataServices.quizQuestions[quiz.activeQuestion].text}}</h4>
+                       </div>
+                     </div>
+                     <div class="row">
+                       <div class="col-sm-6" ng-repeat = "answer in quiz.dataServices.quizQuestions[quiz.activeQuestion].possibilities">
+                         <h4 class ="answer">
+                           {{answer.answer}}
+                         </h4>
+                       </div>
+                     </div>
+                     <button class = "btn btn-warning" ng-click = "quiz.questionAnswered()">Continue</button>
+                </div>
+              </div>
+
           </div>
   </div>
 <!-- third party scripts -->
diff --git a/js/controllers/quiz.js b/js/controllers/quiz.js
index 866e19a..03a6c9a 100644
--- a/js/controllers/quiz.js
+++ b/js/controllers/quiz.js
@@ -11,7 +11,13 @@
           var vm = this;
 
           vm.quizMetrics = quizMetrics;
-          vm.dataServices = dataServices;
+          vm.dataServices = DataServices;
+          vm.questionAnswered = questionAnswered;
+          vm.activeQuestion = 0;
+
+          function questionAnswered () {
+            
+          }
       }
 
 }) ();