diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index edb4c6b..012d231 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -74,6 +74,21 @@
   border-bottom: 1px solid black;;
 }
 
+.error-message {
+  color: #FF0000; /* Red color for error */
+  font-size: 0.9em;
+  margin-top: 5px;
+  display: none;
+}
+
+.error-input, .error-input:focus {
+  border-color: #FF0000 !important; /* Red border for error */
+}
+
+.error-message-display {
+  display: block;
+}
+
 /* Responsive Design */
 @media (min-width: 601px) {
   .body-search {
diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index 36de290..3369aff 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -1,6 +1,29 @@
 document.addEventListener("DOMContentLoaded", function (e) {
   const searchForm = document.getElementById("searchForm");
 
+  const inputValidator = (event) => {
+    const queryInput = document.getElementById('query');
+    const errorMessage = document.getElementById('error-message');
+
+    // Validate input value
+    const hasInput = queryInput?.value.trim();
+
+    if (!hasInput) {
+      event.preventDefault(); // Prevent form submission
+      errorMessage.textContent = "Please enter a search term.";
+      errorMessage.classList.add('error-message-display');
+      queryInput?.classList.add('error-input');
+    } else {
+      errorMessage.classList.remove('error-message-display');
+      queryInput?.classList.remove('error-input');
+    }
+  };
+
+  // Event listeners
+  document.querySelector('.search-button')?.addEventListener('click', inputValidator);
+  document.querySelector('#query')?.addEventListener('input', inputValidator);
+
+
   searchForm.addEventListener("submit", (e) => {
     e.preventDefault();
 
@@ -31,10 +54,6 @@ document.addEventListener("DOMContentLoaded", function (e) {
 
   // construct the URL
   function buildURL(form) {
-    if (form.query === "") {
-      alert("Please enter a search value");
-      return;
-    }
     if (form.searchEngineURL === undefined) {
       alert("Please select a search engine");
       return;
diff --git a/src/index.html b/src/index.html
index 12c1726..4610972 100644
--- a/src/index.html
+++ b/src/index.html
@@ -150,14 +150,10 @@ <h2>Our Work Relies On You!</h2>
         <div class="body-first-sect">
           <div class="body-search">
             <h3>Find content you can share, use, and remix.</h3>
-            <input
-              type="text"
-              id="query"
-              name="query"
-              value=""
-              placeholder="Enter your search query" />
+            <input type="text" id="query" name="query" value="" placeholder="Enter your search query" required />
             <button class="search-button">Search</button>
           </div>
+          <div id="error-message" class="error-message error-message-display"></div>
           <div class="body-search-description" role="contentinfo">
             <p>
               The Search Portal helps you search CC licensed works across multiple platforms.