diff --git a/css/style.css b/css/style.css
index f8a89bd..8eec7af 100644
--- a/css/style.css
+++ b/css/style.css
@@ -5,8 +5,17 @@ Grey #EDF0F1
 
 /* Structure
 -----------------------------------------------------*/
+html{
+  background: url("../images/background.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
 body{
-  background-color: #000;
   margin: 0;
   color: #FFF;
   font-family: 'Aref Ruqaa';
@@ -20,7 +29,7 @@ body{
   min-width: 300px;
 }
 .content-box{
-  background-color: #EDF0F1;
+  background-color: rgba(237, 240, 241, 0.8);
   /*min-height: 182px;*/
   color: #000;
   padding: 2em 1em;
@@ -57,6 +66,7 @@ fieldset{
   border: none;
 }
 #progress-container{
+  display: none;
   position: relative;
 }
 progress {
@@ -69,7 +79,7 @@ progress {
   display: block;
 }
 progress::-webkit-progress-bar {
-  background-color: #000;
+  background-color: transparent;
   border-radius: 5px;
 }
 progress::-webkit-progress-value {
@@ -119,7 +129,7 @@ progress::-moz-progress-bar {
 /* Buttons
 -----------------------------------------------------*/
 button{
-  background-color: #1ABC9C;
+  background-color: rgba(80, 190, 155, 0.9);
   color: #FFF;
   font-size: .9em;
   padding: 1.2em;
@@ -138,16 +148,10 @@ button:focus{
   float: none;
   margin-left: 0;
 }
-/*#prev{
-  float: left;
-}*/
-/*#next{
-  float: right;
-}*/
 .btn-pag{
   float: left;
   margin-right: .4em;
-  background-color: #000;
+  background-color: transparent;
   border: 1px solid #1ABC9C;
 }
 .btn-pag-invalid{
@@ -156,13 +160,17 @@ button:focus{
 #btn-instructions{
   float: left;
 }
+#calculate-score:hover{
+  background-color: rgba(80, 190, 155, 0.6);
+}
 
 /* Error / success messages
 -----------------------------------------------------*/
 #signup-error-message{
   color: #FF0000;
 }
-#error-message{
+#error-message,
+#error-message-pb{
   color: #FFFFFF;
   margin-bottom: 30px;
 }
@@ -190,11 +198,11 @@ button:focus{
   display: inherit;
 }
 .red{
-  background-color: #000000;
+  background-color: transparent;
   border: 1px solid #FF0000;
 }
 .teal{
-  background-color: #1ABC9C;
+  background-color: rgba(80, 190, 155, 0.8);
 }
 
 /* Fade in animation
@@ -333,3 +341,22 @@ button:focus{
 .fa {
     margin-right: 10px;
 }
+
+/* Media Queries
+-----------------------------------------------------*/
+@media only screen and (max-width: 768px) {
+  #progress-container,
+  #error-message-pb {
+    display: block;
+  }
+  .progress-circles {
+    display: none;
+  }
+  #calculate-score {
+    float: left;
+    clear: left;
+  }
+  #next{
+    float: right;
+  }
+}
diff --git a/images/background.jpg b/images/background.jpg
new file mode 100644
index 0000000..31b194c
Binary files /dev/null and b/images/background.jpg differ
diff --git a/index.html b/index.html
index 6e8b1c0..7e33c08 100644
--- a/index.html
+++ b/index.html
@@ -39,22 +39,24 @@ <h3>Great work in taking the next step in achieving your CSS3 goals!</h3>
       <div class="fade-in hidden" id="quiz-form">
 
         <!-- Progress and navigation -->
-        <div class="progress" id="pro-link">
-          <a href="#" class="col un-answered circle active pulse" id="pro1">1</a>
-          <a href="#" class="col un-answered circle" id="pro2">2</a>
-          <a href="#" class="col un-answered circle" id="pro3">3</a>
-          <a href="#" class="col un-answered circle" id="pro4">4</a>
-          <a href="#" class="col un-answered circle" id="pro5">5</a>
-          <a href="#" class="col un-answered circle" id="pro6">6</a>
-          <a href="#" class="col un-answered circle" id="pro7">7</a>
-          <a href="#" class="col un-answered circle" id="pro8">8</a>
-          <a href="#" class="col un-answered circle" id="pro9">9</a>
-          <a href="#"" class="col un-answered circle" id="pro10">10</a>
+        <div class="progress-circles">
+          <div class="progress" id="pro-link">
+            <a href="#" class="col un-answered circle active pulse" id="pro1">1</a>
+            <a href="#" class="col un-answered circle" id="pro2">2</a>
+            <a href="#" class="col un-answered circle" id="pro3">3</a>
+            <a href="#" class="col un-answered circle" id="pro4">4</a>
+            <a href="#" class="col un-answered circle" id="pro5">5</a>
+            <a href="#" class="col un-answered circle" id="pro6">6</a>
+            <a href="#" class="col un-answered circle" id="pro7">7</a>
+            <a href="#" class="col un-answered circle" id="pro8">8</a>
+            <a href="#" class="col un-answered circle" id="pro9">9</a>
+            <a href="#"" class="col un-answered circle" id="pro10">10</a>
+          </div>
+          <div class="clear" id="error-message"></div>
         </div>
-        <div class="clear" id="error-message"></div>
 
         <!-- Progress bar -->
-        <div class="hidden" id="progress-container">
+        <div id="progress-container">
           <progress id="progress" value='10' max='100'></progress>
           <span id="progress-value">10%</span>
         </div>
@@ -214,12 +216,12 @@ <h3>Great work in taking the next step in achieving your CSS3 goals!</h3>
           <!-- Pagination buttons and 'Get Score' button -->
           <button type="button" class="btn-pag btn-pag-invalid" id="prev" data-diff="-10">Prev Question</button>
           <button type="button" class="btn-pag" id="next" data-diff="10">Next Question</button>
-          <button class="hidden expandOpen" type="button" id="calculate-score">Get Score!</button>
+          <button class="hidden expandOpen teal" type="button" id="calculate-score">Get Score!</button>
         </form>
       </div>
 
       <!-- div for quiz error messages, restart quiz button-->
-      <!-- <div class="clear" id="error-message"></div> -->
+      <div class="clear hidden" id="error-message-pb"></div>
       <div class="content-box fade-in hidden" id="completed-message-box">
         <span id="completed-message"></span>
         <button type="button" id="restart-quiz">Have Another Go!</button>
diff --git a/js/custom.js b/js/custom.js
index 7007624..7a15c1d 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -16,6 +16,7 @@ var quizInstruct = document.getElementById('quiz-instructions');
 var quizForm = document.getElementById('quiz-form');
 var progessComplete = document.querySelector('.circle.active');
 var errorMessage = document.getElementById('error-message');
+var errorMessagePB = document.getElementById('error-message-pb');
 var completedMessageBox = document.getElementById('completed-message-box');
 var questionAmount = 10;
 
@@ -108,7 +109,7 @@ function showGetScore(input) {
 
 // Quiz validation - Check that each question has an answer checked. Add the radio button value to the total score; false = 0 / true =  1
 function quizValidate() {
-  // var notAnswered = "";
+  var notAnswered = "";
   var scoreTotal = 0;
   var completedMessage = document.getElementById('completed-message');
     for (var questionNumber = 1; questionNumber <= questionAmount; questionNumber++) {
@@ -122,14 +123,25 @@ function quizValidate() {
         }
       }
       if (ansChecked === false) {
-        errorMessage.innerHTML = ("Uh oh.. You haven't answered all the questions! Please <u>click</u> circles marked with red to answer questions");
-        return false;
+        errorMessage.innerHTML = ("Uh oh... You haven't answered all the questions! Please <u>click</u> circles marked with <u>red</u> to answer remaining questions.");
+        // Display unanswered questions for small screens <768px
+        notAnswered += questionNumber + ", ";
+        //return false;
       }
     }
+
+    // Print unanswered error message for small screens <768px
+    if(notAnswered !== "") {
+    // if not all questions are answered
+    errorMessagePB.innerHTML = ("Uh oh... You still need to answer question(s) " + notAnswered);
+    return false;
+  }
+
     // Once all questions are answered and 'Get Score' is clicked, hide the quiz form and show congratulations message
     quizForm.style.display = 'none';
     completedMessageBox.style.display = 'block';
     errorMessage.innerHTML = "";
+    errorMessagePB.innerHTML = "";
     completedMessage.innerHTML = ("<h2>Good work " + name.split(" ")[0] + "! You have completed the CSS quiz.</h2><h3>Your score is " + scoreTotal + " out of " + questionAmount + "!</h3>");
 }
 
@@ -180,11 +192,13 @@ function resetQuiz(){
     quizForm.style.display = 'block';
     activeQuestion.classList.remove('active');
     questionOne.classList.add('active');
-    getScore.className = 'hidden';
+    //getScore.className = 'hidden expandOpen';
+    getScore.classList.add('hidden','expandOpen','teal');
     nextButton.classList.remove('btn-pag-invalid');
     prevButton.classList.add('btn-pag-invalid');
     completedMessageBox.style.display = 'none';
     errorMessage.innerHTML = "";
+    errorMessagePB.innerHTML = "";
     resetProgress()
 }