diff --git a/newsletter-sign-up-with-success-message-main/index.html b/newsletter-sign-up-with-success-message-main/index.html
index 8e7329b..a0576be 100644
--- a/newsletter-sign-up-with-success-message-main/index.html
+++ b/newsletter-sign-up-with-success-message-main/index.html
@@ -4,8 +4,11 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
+  <link rel="stylesheet" href="./style.css">
   <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
-  
+
+  <script src="./script.js" defer></script> 
+
   <title>Frontend Mentor | Newsletter sign-up form with success message</title>
 
   <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
@@ -18,35 +21,50 @@
 
   <!-- Sign-up form start -->
 
-  Stay updated!
+  <div class="card" id="first-card">
+    <div class="content">
+      <h1 class="title">Stay updated!</h1>
+  
+
+      <p>Join 60,000+ product managers receiving monthly updates on:</p>
 
-  Join 60,000+ product managers receiving monthly updates on:
+      <p><img class="icon" src="./assets/images/icon-list.svg"/> Product discovery and building what matters</p>
+      <p><img class="icon" src="./assets/images/icon-list.svg"/> Measuring to ensure updates are a success</p>
+      <p><img class="icon" src="./assets/images/icon-list.svg"/> And much more!</p>
 
-  Product discovery and building what matters
-  Measuring to ensure updates are a success
-  And much more!
+      <div class="spacer"></div>
+      <span><p class="bold">Email address</p> <p id="errormsg">valid email required</p></span>
+      
+      <textarea class="mail">email@company.com</textarea>
 
-  Email address
-  email@company.com
+      <button id="subscribe" class="submit">Subscribe to monthly newsletter</button>
+    </div>
+    <div class="image"></div>
+  </div>
 
-  Subscribe to monthly newsletter
+  <div id="success-card" class="card">
+      <!-- Sign-up form end -->
 
-  <!-- Sign-up form end -->
+      <!-- Success message start -->
 
-  <!-- Success message start -->
+      <img class="v-icon" src="./assets/images/icon-success.svg"/>
+      <h1 class="title">Thanks for subscribing!</h1>
 
-  Thanks for subscribing!
+      <p>A confirmation email has been sent to <span id="customer-mail" class="bold">ash@loremcompany.com</span>.
+      Please open it and click the button inside to confirm your subscription.</p>
 
-  A confirmation email has been sent to ash@loremcompany.com. 
-  Please open it and click the button inside to confirm your subscription.
+      <div class="spacer"></div>
+      <div class="spacer"></div>
 
-  Dismiss message
+      <button id="dismiss" class="submit">Dismiss message</button>
+  </div>
+  
 
   <!-- Success message end -->
   
   <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>.
+    Coded by <a href="#">Shahar Akiva</a>.
   </div>
 </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..c4fe914
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/script.js
@@ -0,0 +1,41 @@
+//check validity of input
+const checkEmailValidity = () => {
+let txt = document.querySelector(".mail");
+
+// txt.addEventListener("input", () => {
+    //ok
+    if (txt.value.includes("@")) {
+        document.getElementById("errormsg").style.display = "none";
+        txt.classList.remove("error");
+        return true;
+    } 
+    //error
+    else {
+        document.getElementById("errormsg").style.display = "inline-block";
+        txt.classList.add("error");
+        return false;
+    }
+// });
+}
+
+//handles the subscription button
+document.getElementById("subscribe").addEventListener("click", () => {
+
+    if (checkEmailValidity()){
+        let email = document.querySelector(".mail").value;
+        document.getElementById("success-card").style.display = "block";
+        document.getElementById("first-card").style.display = "none";
+
+        document.getElementById("customer-mail").textContent = email;
+    }
+});
+
+//handles the dismiss button
+
+document.getElementById("dismiss").addEventListener("click", () => {
+
+    document.getElementById("first-card").style.display = "block";
+    document.getElementById("success-card").style.display = "none";
+
+    document.querySelector(".mail").value = "email@company.com";
+});
\ No newline at end of file
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..de2ebdf
--- /dev/null
+++ b/newsletter-sign-up-with-success-message-main/style.css
@@ -0,0 +1,228 @@
+html {
+    background-color: rgb(49, 50, 62);
+    font-family: "assignmentfont";
+}
+
+
+
+.card {
+    display: flex;
+    position: absolute;
+    background-color: white;
+    border-radius: 15px;
+    width: 45vw;
+    height: 50vh;
+    left: 25vw;
+    top: 20vh;
+    padding-left: 3%;
+    padding-right: 3%;
+    padding-top: 2.5vh;
+    padding-bottom: 2.5vh;
+    font-size: 12px;
+}
+
+.title {
+    font-size: 40px;
+}
+
+.content {
+    width: 50%;
+}
+
+.image {
+    background-image: url("./assets/images/illustration-sign-up-desktop.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 90%;
+    width: 50%;
+    top: 5%;
+    margin-left: 50%;
+    margin-top: 0;
+    position: absolute;
+}
+
+.mail {
+    position: relative;
+    display: inline-block;
+    border: 1px solid gray;
+    width: 92%;
+    padding: 6% 2% 2% 6%;
+    resize: none;
+    font-size: 12px;
+    color: gray;
+    border-radius: 8px;
+    line-height: 100%;
+    vertical-align: middle;
+    text-wrap-mode: nowrap;
+}
+
+
+.icon {
+    vertical-align: bottom;
+    width: 6%;
+    margin-right: 10px;
+}
+
+p {
+    margin-right: 5%;
+}
+
+.spacer {
+    width: 100%;
+    height: 10px;
+}
+
+.submit {
+    position: relative;
+    display: block;
+    width: 100%;
+    font-weight: bold;
+    background-color: rgb(35, 38, 61);
+    color: white;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    padding: 5% 2% 5% 2%;
+    margin-top: 2%;
+    font-size: 12px;
+    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+}
+
+.submit:hover {
+    background: #fd1d6b;
+    background: linear-gradient(90deg, rgba(253, 29, 107, 1) 0%, rgba(252, 176, 69, 1) 100%);
+}
+
+.submit:active {
+    transform: scale(0.95);
+    transform: translateY(2px);
+    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
+}
+
+.bold {
+    font-weight: bold;
+}
+
+#success-card {
+    display: none;
+    left: 32vw;
+    width: 25vw;
+    height: 40vh;
+    padding: 5%;
+}
+
+.v-icon {
+    width: 50px;
+}
+
+.error {
+    background-color: rgb(255, 239, 239);
+    border-color: red;
+    color: red;
+}
+
+span p {
+    display: inline-block;
+}
+
+#errormsg {
+    display: none;
+    position: absolute;
+    color: red;
+    text-align: right;
+    right: 45%;
+}
+
+
+@font-face {
+    font-family: "assignmentfont";
+    src: url("./assets/fonts/Roboto-Regular.ttf");
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: "assignmentfont";
+    src: url("./assets/fonts/Roboto-Bold.ttf");
+    font-weight: bold; /* Or font-weight: bold; */
+}
+
+
+/* Responsive design */
+
+@media screen and (max-width: 440px) {
+
+    html {
+        background-color: white;
+    }
+
+    .card {
+        border-radius: 0;
+        width: 100vw;
+        height: 100vh;
+        left: 0;
+        top: 0;
+        padding: 0;
+    }
+
+    .image {
+        background-image: url("./assets/images/illustration-sign-up-mobile.svg");
+        width: 100%;
+        top: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    .content {
+        width: 80%;
+        position: absolute;
+        top: 32%;
+        padding: 10%;
+        z-index: 2;
+        font-size: 18px;
+    }
+
+    .spacer {
+        height: 5px;
+    }
+
+    .title {
+        font-size: 45px;
+        margin: 5% 0 2% 0;
+    }
+
+    .mail {
+        font-size: 18px;
+        padding: 8% 2% 2% 6%;
+    }
+
+    .submit {
+        font-size: 16px;
+        margin-top: 10px;
+    }   
+
+    #success-card {
+        left: 0;
+        width: 80%;
+        height: 100vh;
+        padding: 10%;
+    }  
+    
+    #success-card p {
+        font-size: 20px;
+    }   
+
+    .v-icon {
+        margin-top: 30%;
+        width: 70px;
+    }
+
+    #dismiss {
+        position: relative;
+        margin-top: 80%;
+    }
+
+    #errormsg {
+        right: 20px;
+    }
+}
\ No newline at end of file