diff --git a/README.md b/README.md
index 9d81347..339f1ba 100644
--- a/README.md
+++ b/README.md
@@ -17,3 +17,6 @@ For more information of how html in-apps work see our [advanced usage doc](./adv
 
 ###### [Promo Wheel](./promo_wheel)
 <img alt="Promo Wheel" src="./promo_wheel/readme_assets/promo_wheel_iam.gif" width="200px">
+
+###### [Check List Survey](./check_list_survey)
+<img alt="Check List Survey" src="./check_list_survey/readme_assets/checklist_survey_iam.gif" width="200px">
diff --git a/check-list-survey/README.md b/check-list-survey/README.md
deleted file mode 100644
index e69de29..0000000
diff --git a/check_list_survey/README.md b/check_list_survey/README.md
new file mode 100644
index 0000000..3fd8ced
--- /dev/null
+++ b/check_list_survey/README.md
@@ -0,0 +1,6 @@
+# Check List Survey
+
+The check-list survey template demonstrates a long form with custom checkbox styling that requires scrolling to view the overflowed content. It disables the default in-app message behavior of vertical dragging to dismiss so that it won't get mistken for scrolling down the in-app message
+
+###### Carousel on Android
+![Screenshot](readme_assets/checklist_survey_iam.gif)
diff --git a/check-list-survey/index.html b/check_list_survey/index.html
similarity index 96%
rename from check-list-survey/index.html
rename to check_list_survey/index.html
index c222f23..8aa7d70 100644
--- a/check-list-survey/index.html
+++ b/check_list_survey/index.html
@@ -33,7 +33,6 @@
         position: relative;
         background: #fae8cd;
         margin: 18px;
-        padding: 24px 24px 0;
         border-radius: 8px;
 
         display: flex;
@@ -63,6 +62,10 @@
         border-radius: 50%;
       }
 
+      .center-modal .headings {
+        padding: 24px 24px 0 24px;
+      }
+
       .center-modal h1 {
         margin: 32px 0 0 0;
         color: #222;
@@ -99,12 +102,13 @@
         background: #ffffff;
         border-radius: 8px;
         border: none;
-        margin: 12px 0;
+        margin: 12px 24px;
       }
 
       form input[type="checkbox"] {
         /* Add if not using autoprefixer */
         -webkit-appearance: none;
+        outline: none !important;
         appearance: none;
         /* For iOS < 15 to remove gradient background */
         background-color: #fff;
@@ -185,8 +189,10 @@
           />
         </svg>
       </div>
-      <h1>Any allergies?</h1>
-      <h2>Get better recommendations and other customized experience</h2>
+      <div class="headings">
+        <h1>Any allergies?</h1>
+        <h2>Get better recommendations and other customized experience</h2>
+      </div>
       <form>
         <div>
           <input type="checkbox" name="dairy" />
diff --git a/check_list_survey/readme_assets/checklist_survey_iam.gif b/check_list_survey/readme_assets/checklist_survey_iam.gif
new file mode 100644
index 0000000..ae97704
Binary files /dev/null and b/check_list_survey/readme_assets/checklist_survey_iam.gif differ