diff --git a/static/css/qr_destination.css b/static/css/qr_destination.css
index bd52a93..56132e8 100644
--- a/static/css/qr_destination.css
+++ b/static/css/qr_destination.css
@@ -348,15 +348,15 @@ body {
 }
 
 .success-icon {
-    display: inline-flex;
+    display: none; /* Change back to 'inline-flex' to display icon */
     align-items: center;
     justify-content: center;
-    width: 100px;
-    height: 100px;
+    width: 50px;
+    height: 50px;
     background: var(--success-color) !important;
     color: var(--white) !important;
     border-radius: 50%;
-    font-size: 3rem;
+    font-size: 1.5rem;
     margin-bottom: 1.5rem;
     animation: successPulse 1s ease-out;
 }
diff --git a/static/js/qr_destination.js b/static/js/qr_destination.js
index c7d99a8..98ffe81 100644
--- a/static/js/qr_destination.js
+++ b/static/js/qr_destination.js
@@ -378,7 +378,15 @@ function handleCheckinSuccess(data) {
     showLocalizedStatusMessage("success", "success");
   }
 
-  // Hide form (PRESERVED FROM ORIGINAL)
+  // Hide the entire checkin-card (includes instruction header and form)
+  const checkinCard = document.querySelector(".checkin-card");
+  if (checkinCard) {
+    checkinCard.style.display = "none";
+    checkinCard.classList.remove("active");
+    checkinCard.classList.add("hidden-after-success");
+  }
+
+  // Also hide form separately for backward compatibility (PRESERVED FROM ORIGINAL)
   const form = document.getElementById("checkinForm");
   if (form) {
     form.style.display = "none";
@@ -465,7 +473,15 @@ function handleCheckinSuccess(data) {
 
 // NEW: Reset form for new check-in
 function resetForNewCheckin() {
-  // Show form again
+  // Show checkin-card again (includes instruction header and form)
+  const checkinCard = document.querySelector(".checkin-card");
+  if (checkinCard) {
+    checkinCard.style.display = "block";
+    checkinCard.classList.add("active");
+    checkinCard.classList.remove("hidden-after-success");
+  }
+
+  // Show form again (PRESERVED FROM ORIGINAL)
   const form = document.getElementById("checkinForm");
   if (form) {
     form.style.display = "block";
diff --git a/templates/qr_destination.html b/templates/qr_destination.html
index 2624a3b..07284b7 100644
--- a/templates/qr_destination.html
+++ b/templates/qr_destination.html
@@ -552,14 +552,14 @@
       }
 
       .success-icon {
-        width: 100px;
-        height: 100px;
+        width: 50px;
+        height: 50px;
         border-radius: 50%;
-        display: flex;
+        display: none; /* Change back to 'flex' to display icon */
         align-items: center;
         justify-content: center;
         margin: 0 auto 1.5rem;
-        font-size: 3rem;
+        font-size: 1.5rem;
         color: white;
       }