diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 8e7329b..cb66722 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -5,9 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
-  
+  <link rel="stylesheet" href="./style.css">
   <title>Frontend Mentor | Newsletter sign-up form with success message</title>
 
+  
   <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
   <style>
     .attribution { font-size: 11px; text-align: center; }
@@ -17,36 +18,58 @@
 <body>
 
   <!-- Sign-up form start -->
+  <div class="main-card" id="signup-card">  
+    <div class="text-section">
+      <h1 id="headline">Stay updated!</h1>
 
-  Stay updated!
-
-  Join 60,000+ product managers receiving monthly updates on:
+      <p class="description">Join 60,000+ product managers receiving 
+        monthly updates on:</p>
+    
+      <ul class="info-list">
+        <li class="list-item"><img src="./assets/images/icon-list.svg" alt="checkmark icon" class="list-icon"> Product discovery and building what matters</li>
+        <li class="list-item"><img src="./assets/images/icon-list.svg" alt="checkmark icon" class="list-icon"> Measuring to ensure updates are a success</li>
+        <li class="list-item"><img src="./assets/images/icon-list.svg" alt="checkmark icon" class="list-icon"> And much more!</li>
+      </ul>
 
-  Product discovery and building what matters
-  Measuring to ensure updates are a success
-  And much more!
+      <div class="email-block">
+        <div class="email-label-block">
+          <p id="email-label">Email address</p>
+          <p class="error-message hidden" id="error-message">Valid email required</p>
+        </div>
+        <input  type="email" id="email-input" placeholder="email@company.com">
+      </div>
 
-  Email address
-  email@company.com
+      <button class="subscribe-button" id="submit-button">Subscribe to monthly newsletter</button>
 
-  Subscribe to monthly newsletter
-
-  <!-- Sign-up form end -->
+    </div>
+    <div class="image-section">
+      <img src="./assets/images/illustration-sign-up-desktop.svg" alt="information illustration">
+    </div>
+  </div>  
 
   <!-- Success message start -->
+  <div class="main-card hidden" id="success-card">
+    <div class="success-section">
+      <img src="./assets/images/icon-success.svg" alt="success icon" class="success-icon">
+      <h1 class="success-title">Thanks for subscribing!</h1>
+      
+      <p class="success-message">A confirmation email has been sent to <strong id="user-email">ash@loremcompany.com</strong>. 
+      Please open it and click the button inside to confirm your subscription.</p>
 
-  Thanks for subscribing!
-
-  A confirmation email has been sent to ash@loremcompany.com. 
-  Please open it and click the button inside to confirm your subscription.
+      <button class="dismiss-button" id="dismiss-button">Dismiss message</button>
+    </div>
+  </div>
+  <!-- Success message end -->  
 
-  Dismiss message
+    <!-- Sign-up form end -->
 
-  <!-- Success message end -->
   
-  <div class="attribution">
+  <!-- <div class="attribution">
     Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
     Coded by <a href="#">Your Name Here</a>.
-  </div>
+  </div> -->
+
+
+  <script src ="./script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/newsletter-sign-up-with-success-message-main/script.js b/newsletter-sign-up-with-success-message-main/script.js
new file mode 100644
index 0000000..4a945cb
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/script.js
@@ -0,0 +1,91 @@
+// Getting elements
+const emailInput = document.getElementById('email-input');
+const submitButton = document.getElementById('submit-button');
+const dismissButton = document.getElementById('dismiss-button');
+const signupCard = document.getElementById('signup-card');
+const successCard = document.getElementById('success-card');
+const errorMessage = document.getElementById('error-message');
+const userEmailSpan = document.getElementById('user-email');
+
+
+// Show error state
+function showError() {
+    errorMessage.classList.remove('hidden');
+    emailInput.classList.add('error-input');
+}
+
+// Hide error state
+function hideError() {
+    errorMessage.classList.add('hidden');
+    emailInput.classList.remove('error-input');
+}
+
+// Switch to success stage
+const showSuccessMessage = (email) => {
+    signupCard.classList.add('hidden');
+    successCard.classList.remove('hidden');
+    userEmailSpan.textContent = email;
+};
+
+// Switch  to signup stage
+function showSignupStage() {
+    successCard.classList.add('hidden');
+    signupCard.classList.remove('hidden');
+    emailInput.value = '';
+    hideError();
+}
+
+// Email validation function
+const validateEmail = (email) => {
+    const domain = email.split('@')[1];
+    const emailDomain = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'collman.com'];
+    
+    if (email === '' || !email.includes('@')) {
+        showError();
+        return false;
+    }
+    if (!emailDomain.includes(domain)) {
+        showError();
+        return false;
+    } else {
+        hideError();
+    }
+    
+    return true;
+};
+// "Enable/disable" submit button based on email validity
+emailInput.addEventListener('input', updateButtonState);
+
+function updateButtonState() {
+    const email = emailInput.value.trim();
+    if (validateEmail(email)) {
+        submitButton.classList.add('enabled-button');
+    } else {
+        submitButton.classList.remove('enabled-button');
+    }
+}
+
+// Handle form submission
+submitButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    
+    const email = emailInput.value.trim();
+    
+    // Validate email
+    if (validateEmail(email)) {
+        showSuccessMessage(email);
+    }
+});
+
+// Handle dismiss button
+
+dismissButton.addEventListener('click', function() {
+    showSignupStage();
+});
+
+// Hide error when user starts typing
+emailInput.addEventListener('input', function() {
+    if (!errorMessage.classList.contains('hidden')) {
+        hideError();
+    }
+});
diff --git a/newsletter-sign-up-with-success-message-main/style.css b/newsletter-sign-up-with-success-message-main/style.css
new file mode 100644
index 0000000..82c241b
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -0,0 +1,161 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('./assets/fonts/Roboto-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+body{
+    font-family: 'Roboto', Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: hsl(234, 29%, 20%);
+    height: 100vh;
+    font-size: 16px;
+}
+.main-card{
+    display: flex;
+    flex-direction: row;
+    background-color: hsl(0, 0%, 100%);
+    border: 1px solid hsl(234, 29%, 20%);
+    border-radius: 30px;
+    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+}
+.text-section{
+    padding: 50px;
+}
+#headline{
+    font-size: 55px;
+    display: flex;
+    justify-content: start;
+    color: hsl(234, 29%, 20%);
+    font-weight: bold;
+}
+.description{
+    font-size: 16px;
+    margin-bottom: 30px;    
+    
+}
+.info-list {
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: 30px;
+}
+.list-icon {
+    margin-right: 10px;
+}
+.list-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.email-label-block {
+   display: flex;
+   flex-direction: row;
+}
+.email-block{
+    width: 100%;
+    gap: 10px;
+    margin-top: 20px;
+}
+#email-label{
+    font-size: 12px;
+    margin-bottom: 10px;
+} 
+#email-input{
+    width: 100%;
+    padding: 12px 15px;
+    margin-bottom:20px;
+    border-radius: 5px;
+    border: 1px solid hsl(0, 0%,58%);
+    box-sizing: border-box;
+}
+.subscribe-button{
+    width: 100%;
+    background-color: hsl(234, 29%, 20%);
+    color: hsl(0, 0%, 100%);
+    border: none;
+    padding: 15px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.enabled-button{
+    transition: background 0.3s ease;
+    /*adding gradient to button*/
+    background: linear-gradient(90deg, hsl(4, 100%, 67%), hsl(22, 90%, 66%));
+}
+
+.hidden {
+    display: none;
+}
+
+/* Error States */
+.error-message {
+    
+    color: hsl(4, 100%, 67%);
+    font-size: 12px;
+    margin-bottom: 8px;
+    font-weight: bold;
+   margin-left: auto;
+}
+
+.error-input {
+    border-color: hsl(4, 100%, 67%);
+    background-color: hsl(4, 100%, 95%);
+    color: hsl(4, 100%, 67%);
+}
+
+/* Success Page Styles */
+.success-section {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 50px;
+    max-width: 400px;
+}
+
+.success-icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 30px;
+}
+
+.success-title {
+    font-size: 55px;
+    color: hsl(234, 29%, 20%);
+    font-weight: bold;
+    margin-bottom: 30px;
+    line-height: 1;
+}
+
+.success-message {
+    font-size: 16px;
+    line-height: 1.5;
+    margin-bottom: 40px;
+    color: hsl(234, 29%, 20%);
+}
+
+.dismiss-button {
+    width: 100%;
+    background-color: hsl(234, 29%, 20%);
+    color: hsl(0, 0%, 100%);
+    border: none;
+    padding: 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    &:hover {
+        background: linear-gradient(90deg, hsl(4, 100%, 67%), hsl(22, 90%, 66%));
+    }
+}
\ No newline at end of file
