diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/README.md b/README.md
deleted file mode 100644
index 5977a02..0000000
--- a/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# [JSL01] Submission: Syntax-Engine Interaction Challenge
-
-You will: 
-1. Use the Starter Code Repo, 
-2. Code your solution,
-3. Commit changes to your repo
-3. Submit GitHub Repo Link to LMS [JSL01] Submission Project Tab
-
-Imagine you are building a virtual pet adoption website, and you need to create a JavaScript function that checks if the user has entered valid pet adoption details. Write a function that takes a string as input and validates if it follows a specific syntax, such as starting with "pet_" followed by a combination of letters and numbers. If the input follows the syntax, return "Valid Syntax," otherwise, return "Invalid Syntax."
-
-![alt text](jsl_01_final_result.gif)
-
-## Challenge Instructions
-1. In the script.js file, complete the validateSyntax function to check if the input string starts with "pet_" and is followed by a combination of letters and numbers.
-2. If the input follows the correct syntax, set result to "Valid Syntax." Otherwise, set it to "Invalid Syntax."
-3. Test your function by entering different strings in the input box and clicking the validate button.
-
-## How to Test 
-- Run the index.html challenge in a browser.
-- Enter different pet adoption details in the input box and click the validate button to see the results.
-- Make sure your solution works for a variety of inputs.
-- Open the console and debug your code until there are no errors.
-
-## Instructions for Running the Code
-1. Save the HTML, CSS, and JavaScript files in a folder.
-2. Open the folder in VSCode.
-3. Right-click on index.html and open with a browser (use Live Server if available).
-4. Modify the script.js file to correct the syntax errors and save the file.
-5. Refresh your browser to view the changes.
-
-This challenge helps students practice basic string manipulation and validation in JavaScript, along with simple DOM manipulation to create an interactive and user-friendly interface.
-
-Check out the practice challenges on Scrimba here: https://scrimba.com/playlist/pqPae6ZH7
\ No newline at end of file
diff --git a/README1.md b/README1.md
new file mode 100644
index 0000000..9c7f9c7
--- /dev/null
+++ b/README1.md
@@ -0,0 +1,17 @@
+# JSL01: Syntax-Engine Interaction
+# Introduction
+The task was to build a virtual pet adoption website, but use a JavaScript function to take a string as input and validate if it follows a specific syntax.
+
+# Elements Included
+Function declaration, local variables, validation logic, result element, and HTML output.
+
+# Reflections
+# Areas of Mastery
+**Code Readability and Organization:** I believe I was able to present well-structured code with clear variable names (petInput, regex, isValid, resultElement) and the comments enhanced readability.
+**DOM Manipulation:** Using document.getElementById() to access and manipulate HTML elements shows proficiency in DOM (Document Object Model) manipulation, which is essential for interactive web development.
+
+# Challenges Faced
+Using regular expressions (regex) to define a pattern for syntax validation was something I found particularly challenging, even with the cheatsheet, it took awhile for me to grasp.
+
+# Overall Learning Experience
+This project was a great introduction into learning how to interact with the Document Object Model (DOM) in JavaScript. As well as providing practical exposure to accessing and manipulating HTML elements dynamically using JavaScript.
\ No newline at end of file
diff --git a/index.css b/index.css
index 7028001..f32c4c8 100644
--- a/index.css
+++ b/index.css
@@ -37,11 +37,21 @@ button:hover {
 }
 
 .valid {
-    color: #008000;
+    background-color: #008000;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-left: 5px;
+    display: inline-block;
 }
 
 .invalid {
-    color: #ff4500;
+    background-color: #ff4500;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-left: 5px;
+    display: inline-block;
 }
 
 .emoji {
diff --git a/script.js b/script.js
index ce4cd50..258393a 100644
--- a/script.js
+++ b/script.js
@@ -1,12 +1,13 @@
 function validateSyntax() {
-    let input = document.getElementById('petInput').value;
+    let petInput = document.getElementById('petInput').value.trim();
+    let regex = /^pet_\d*[a-zA-Z]+$/;
+    let isValid = regex.test(petInput);
     // Validation logic goes here
-    let result = ''; // Placeholder for validation result
+    let resultElement = document.getElementById("result"); // Placeholder for validation result
 
-    // TODO: Write your validation logic here
-        // Check if input starts with 'pet_' and followed by alphanumeric characters
-
-            document.getElementById('result').innerText = result;
+    if (isValid) {
+        resultElement.innerHTML = "Valid Syntax. <span class='valid'></span>";
+    } else {
+        resultElement.innerHTML = "Invalid Syntax. <span class='invalid'></span>";
+    }
 }
-
-