diff --git a/src/recommenderapp/static/script.js b/src/recommenderapp/static/script.js
index abc129e14..e7a4da273 100644
--- a/src/recommenderapp/static/script.js
+++ b/src/recommenderapp/static/script.js
@@ -12,8 +12,6 @@ $(document).ready(function () {
             q: request.term,
           },
           success: function (data) {
-            //alert(data);
-            // console.log(data);
             response(data);
           },
           error: function (jqXHR, textStatus, errorThrown) {
@@ -71,34 +69,45 @@ $(document).ready(function () {
       success: function (response) {
         var ulList = $("#predictedMovies");
         var i = 0;
-        response["recommendations"].forEach((element) => {
+        var recommendations = response["recommendations"];
+        var imdbIds = response["imdb_id"]
+        for (var i = 0; i < recommendations.length; i++) {
+          var element = recommendations[i];
+          var imdbID = imdbIds[i]
           var diventry = $("<div/>");
           var fieldset = $("<fieldset/>", { id: i }).css("border", "0");
+          var link = $("<a/>").text("IMDb🔗").css({"text-decoration": "none"}).attr("href", "https://www.imdb.com/title/" + imdbID);
           var li = $("<li/>").text(element);
           var radios = $(`
-                    <table class='table'>
-                        <tr>
+                    <table class='table predictTable'>
+                      <tr>
                         <td class='radio-inline'>
-                            <label><input type='radio' name="${i}" value='1'>Dislike</label>
+                          <section id="pattern1">
+                            <label style="--icon:'😍"><input type="radio" name="${i}" value='1' data-toggle="tooltip" data-placement="top" title="LIKE"></label><br />
+                          </section>
                         </td>
                         <td class='radio-inline'>
-                            <label><input type='radio' name="${i}" value='2'>Yet to watch</label>
+                          <section id="pattern1">
+                            <label style="--icon:'😐'"><input type="radio" name="${i}" value='2' data-toggle="tooltip" data-placement="top" title="YET TO WATCH"></label><br />
+                          </section>
                         </td>
                         <td class='radio-inline'>
-                            <label><input type='radio' name="${i}" value='3'>Like</label>
+                          <section id="pattern1">
+                            <label style="--icon:'😤'"><input type="radio" name="${i}" value='3' data-toggle="tooltip" data-placement="top" title="DISLIKE"></label><br />
+                          </section>
                         </td>
-                        </tr>
+                      </tr>
                     </table>
-                    `);
+                  `);
 
           diventry.append(li);
+          diventry.append(link);
           diventry.append(radios);
           fieldset.append(diventry);
           ulList.append(fieldset);
-          i += 1;
-        });
+        }
+
         $("#loader").attr("class", "d-none");
-        console.log("->", response["recommendations"]);
       },
       error: function (error) {
         console.log("ERROR ->" + error);
@@ -175,10 +184,8 @@ $(document).ready(function () {
       return; // Exit the function without making the AJAX call
     }
 
-    console.log(data);
     FeedbackData = data;
     localStorage.setItem("fbData", JSON.stringify(data));
-    console.log(localStorage.getItem("fbData"));
     $.ajax({
       type: "POST",
       url: "/feedback",
@@ -189,7 +196,6 @@ $(document).ready(function () {
       data: JSON.stringify(data),
       success: function (response) {
         window.location.href = "/success";
-        console.log("Success");
       },
       error: function (error) {
         console.log("ERROR ->" + error);
@@ -199,7 +205,7 @@ $(document).ready(function () {
 
   $("#notifyButton").click(function () {
     var data = JSON.parse(localStorage.getItem("fbData"));
-  
+    $("#loaderSuccess").attr("class", "d-flex justify-content-center");
     if (!data) {
       alert("No feedback data found. Please provide feedback.");
       return;
@@ -220,16 +226,14 @@ $(document).ready(function () {
       cache: false,
       data: JSON.stringify(data),
       success: function (response) {
-        // localStorage.removeItem("fbData");
+        $("#loaderSuccess").attr("class", "d-none");
         $("#emailSentSuccess").show();
-        // Hide the success message after 5 seconds (5000 milliseconds)
         setTimeout(function () {
           $("#emailSentSuccess").fadeOut("slow");
         }, 2000);
-        console.log("Email sent successfully!")
-        console.log(response);
       },
       error: function (error) {
+        $("#loaderSuccess").attr("class", "d-none");
         console.log("ERROR ->" + error);
         localStorage.removeItem("fbData");
       },
diff --git a/src/recommenderapp/static/stylesheet.css b/src/recommenderapp/static/stylesheet.css
index 0bace0fdb..8db0bc06c 100644
--- a/src/recommenderapp/static/stylesheet.css
+++ b/src/recommenderapp/static/stylesheet.css
@@ -1,4 +1,3 @@
-
 .landing-page {
   background-image: url("image.jpg");
   background-size: cover;
@@ -16,16 +15,106 @@
   height: 4.5rem;
   margin: auto;
   display: flex;
-  align-items: center; 
+  align-items: center;
   flex-direction: column;
 }
 
 body {
-  background-image: url("image.jpg");
+  background-image: url("image.jpg") !important;
   background-size: cover;
   color: azure !important;
 }
 
+
+:root {
+  --borderSize: 0.5vw;
+  --baseSize: 5rem;
+  --icon: "🙂";
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+main {
+  margin: 25px 0;
+}
+section {
+  position: relative;
+  display: inline-block;
+  text-align: left;
+  vertical-align: top;
+}
+input,
+input::before,
+#pattern1 label {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 2vw;
+  font-size: 1.5vw;
+  line-height: var(--baseSize);
+  cursor: pointer;
+}
+#pattern1 input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  width: var(--baseSize);
+  height: var(--baseSize);
+  font-size: var(--baseSize);
+  line-height: var(--baseSize);
+  vertical-align: top;
+  margin-right: 2vw;
+  background-color: #fff;
+  color: coral;
+  border: var(--borderSize) solid gray;
+  border-radius: 50%;
+  transition: border-color 0.3s;
+}
+
+.predictTable > tbody,
+td,
+tfoot,
+th,
+thead,
+tr {
+  border-style: none !important;
+}
+
+#predictedMovies {
+  font-size: 18px;
+}
+
+#pattern1 input::before {
+  font-family: "Noto Emoji", sans-serif;
+  display: inline-block;
+  text-align: center;
+  position: absolute;
+  top: calc(-0.7 * var(--borderSize));
+  left: calc(-0.9 * var(--baseSize) * 0.2 - var(--borderSize));
+  width: var(--baseSize);
+  height: var(--baseSize);
+  font-size: var(--baseSize);
+  line-height: var(--baseSize);
+  content: var(--icon);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+#pattern1 input:checked {
+  border-color: transparent;
+}
+
+#pattern1 input:checked::before {
+  opacity: 1;
+}
+
+#pattern1 label:has(input:checked)::before {
+  opacity: 1;
+  font-size: min(80vh, 80vw);
+}
+
 .topNavBar {
   width: 100%;
   position: fixed;
@@ -106,13 +195,13 @@ body {
 .c-formContainer,
 .c-form,
 .c-form__toggle {
-  width: 10rem;
-  height: 3rem;
+  width: 30rem;
+  height: 4rem;
 }
 
 .c-formContainer {
   position: relative;
-  font-weight: 700;
+  font-weight: 900;
 }
 
 .c-form,
@@ -144,7 +233,7 @@ body {
   justify-content: center;
 
   &::before {
-    font-size: 1rem;
+    font-size: 1.5rem;
     content: attr(data-title);
   }
 }
@@ -168,6 +257,7 @@ body {
 }
 
 .c-form__input {
+  cursor: auto;
   color: your-pink;
   height: 100%;
   width: 100%;
@@ -211,3 +301,30 @@ body {
   width: 5em;
   background-color: #d00c18;
 }
+
+.feedbackDiv {
+  margin-bottom: 3rem;
+}
+
+#dataCollected {
+  .hLast {
+    font-size: 4rem;
+    text-align-last: center
+  }
+  .attemptBtn {
+    display: block;
+    margin: auto;
+    font-size: large;
+    padding: 13px;
+    background-color: white;
+    color: #d00c18;
+    font-weight: 600;
+    border: none;
+    border-radius: 25px;
+  }
+}
+
+.notifyDivs {
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/recommenderapp/templates/search_page.html b/src/recommenderapp/templates/search_page.html
index 75c1ff296..1a2fa3f30 100644
--- a/src/recommenderapp/templates/search_page.html
+++ b/src/recommenderapp/templates/search_page.html
@@ -58,7 +58,7 @@ <h2>Recommended Movies:</h2>
               </form>
             </div>
           </div>
-          <div class="row">
+          <div class="row feedbackDiv">
             <div class="col-md-12">
               <!-- Feedback button (modal) -->
               <input type="button" class="btn btn-primary" name="feedback" data-toggle="modal" id="feedback" value="Give Feedback" data-target="#exampleModalCenter">
diff --git a/src/recommenderapp/templates/success.html b/src/recommenderapp/templates/success.html
index 9993a69d6..df2244280 100644
--- a/src/recommenderapp/templates/success.html
+++ b/src/recommenderapp/templates/success.html
@@ -29,41 +29,53 @@
   </head>
 
   <body>
+    <div id="dataCollected">
+      <div class="d-none" id="loaderSuccess">
+        <div class="spinner-border" role="status">
+          <span class="sr-only"></span>
+        </div>
+      </div>
+      <h1 class="hLast">Have your watchlist sent to your email!</h1>
+      <br/>
+      <div class="notifyDivs">
+        <input class="c-checkbox" type="checkbox" id="checkbox" />
+        <div class="c-formContainer" id="formContainer">
+          <form class="c-form" action="">
+            <input
+              class="c-form__input"
+              placeholder="E-mail"
+              type="text"
+              id="emailField"
+              required
+            />
+            <label class="c-form__buttonLabel" for="checkbox">
+              <button class="c-form__button" type="button" id="notifyButton">
+                Send
+              </button>
+            </label>
+            <label
+              class="c-form__toggle"
+              for="checkbox"
+              data-title="Notify me"
+            ></label>
+          </form>
+        </div>
+    </div>
+    <br /><br />
+    <div class="d-flex justify-content-center">
+      <h1>
+        Or
+      </h1>
+    </div>
     <br /><br />
-    <div id="dataCollected" style="width: 600px; margin: auto">
-      <h1>Thanks!! Your response was stored.</h1>
-      <input
+    <input
         type="button"
         id="refreshPage"
-        class="btn btn-danger"
+        class="btn btn-danger attemptBtn"
         name="refreshPage"
         value="Take another attempt"
       />
-    </div>
-    <br /><br />
-    <div>
-      <input class="c-checkbox" type="checkbox" id="checkbox" />
-      <div class="c-formContainer" id="formContainer">
-        <form class="c-form" action="">
-          <input
-            class="c-form__input"
-            placeholder="E-mail"
-            type="text"
-            id="emailField"
-            required
-          />
-          <label class="c-form__buttonLabel" for="checkbox">
-            <button class="c-form__button" type="button" id="notifyButton">
-              Send
-            </button>
-          </label>
-          <label
-            class="c-form__toggle"
-            for="checkbox"
-            data-title="Notify me"
-          ></label>
-        </form>
-      </div>
+    
     </div>
 
     <!-- Add the "Email sent successfully!" message here -->