diff --git a/index.html b/index.html
index f4c279f..47c6657 100644
--- a/index.html
+++ b/index.html
@@ -22,16 +22,22 @@
             display: none;
         }
 
+        .success-message {
+            color: green;
+        }
+
         .error-message {
             color: red;
         }
 
         input[data-entered=true]:valid {
-            background-color: green;
+            border-color: green;
+            color: green;
         }
 
         input[data-entered=true]:invalid {
-            background-color: red;
+            border-color: red;
+            color: red;
         }
     </style>
 </head>
@@ -54,17 +60,23 @@
     <!-- Input -->
     <section class="container">
         <form>
-            <label for="century-input" id="century-title-label">Century</label>
-            <input type="text" id="century-input" autocomplete="off" autofocus />
-            <span class="error-message invisible" id="century-error-label"></span>
+            <p>
+                <label for="century-input" id="century-title-label">Century</label>
+                <input type="text" id="century-input" autocomplete="off" autofocus />
+                <span class="error-message invisible" id="century-error-label"></span>
+            </p>
 
-            <label for="year-input" id="year-title-label">Year</label>
-            <input type="text" id="year-input" autocomplete="off" />
-            <span class="error-message invisible" id="year-error-label"></span>
+            <p>
+                <label for="year-input" id="year-title-label">Year</label>
+                <input type="text" id="year-input" autocomplete="off" />
+                <span class="error-message invisible" id="year-error-label"></span>
+            </p>
 
-            <label for="day-input" id="day-title-label">Day</label>
-            <input type="text" id="day-input" autocomplete="off" />
-            <span class="error-message invisible" id="day-error-label"></span>
+            <p>
+                <label for="day-input" id="day-title-label">Day</label>
+                <input type="text" id="day-input" autocomplete="off" />
+                <span class="error-message invisible" id="day-error-label"></span>
+            </p>
         </form>
     </section>
 
@@ -106,7 +118,7 @@
             case expected:
                 return null;
             case undefined:
-                return "Unrecognized day of week";
+                return "Unrecognized day of week.";
             default:
                 return "";
         }
@@ -139,7 +151,7 @@
 
                 const errorMessage = this.validate(this.input.value);
                 if (errorMessage === null) {
-                    this.hideError();
+                    this.showSuccess();
                     this.onValidInput();
                 } else {
                     this.showError(errorMessage);
@@ -187,7 +199,9 @@
             this.input.value = "";
             this.input.dataset["entered"] = "false";
 
-            this.hideError();
+            this.showSuccess();
+            this.titleLabel.classList.remove("success-message");
+
             this.updateTitle();
         }
 
@@ -199,6 +213,8 @@
         showError(message) {
             this.input.setCustomValidity(message || "Invalid");
 
+            this.titleLabel.classList.remove("success-message");
+            this.titleLabel.classList.add("error-message");
             this.errorLabel.classList.remove("invisible");
             this.errorLabel.innerText = message;
         }
@@ -206,9 +222,11 @@
         /**
          * Marks the input as valid and hides the error label.
          */
-        hideError() {
+        showSuccess() {
             this.input.setCustomValidity("");
 
+            this.titleLabel.classList.remove("error-message");
+            this.titleLabel.classList.add("success-message");
             this.errorLabel.classList.add("invisible");
             this.errorLabel.innerText = "";
         }