diff --git a/css/styles.css b/css/styles.css
index 70096c4..2933324 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -56,4 +56,10 @@ body{
     top: 0;
     left: 0;
     min-height: 300px;
+}
+#carouselButton {
+    right:0px;
+    position: absolute;
+    bottom: 0px;
+    z-index: 1;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 9966daa..e5f3a9a 100644
--- a/index.html
+++ b/index.html
@@ -159,13 +159,26 @@
               <div class="form-group row">
                 <div class="col-12 col-sm-2 col-form-label">Selection</div>
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                    <label class="btn btn-success active">
-                      <input type="radio" name="options" id="option1" autocomplete="off" checked> Non-Smoking
-                    </label>
-                    <label class="btn btn-danger">
-                      <input type="radio" name="options" id="option2" autocomplete="off"> Smoking
-                    </label>
-                  </div>
+                  <label class="btn btn-success active">
+                    <input
+                      type="radio"
+                      name="options"
+                      id="option1"
+                      autocomplete="off"
+                      checked
+                    />
+                    Non-Smoking
+                  </label>
+                  <label class="btn btn-danger">
+                    <input
+                      type="radio"
+                      name="options"
+                      id="option2"
+                      autocomplete="off"
+                    />
+                    Smoking
+                  </label>
+                </div>
               </div>
               <div class="form-group row">
                 <label class="col-12 col-sm-2 col-from-label"
@@ -317,6 +330,9 @@
             >
               <span class="carousel-control-next-icon"></span>
             </a>
+            <button class="btn btn-danger btn-sm" id="carouselButton">
+              <span id="carousel-button-icon" class="fa fa-pause"></span>
+            </button>
           </div>
         </div>
       </div>
@@ -465,5 +481,18 @@
     <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
-   </body>
+    <script>
+      $("#carouselButton").click(function () {
+        if ($("#carouselButton").children("span").hasClass("fa-pause")) {
+          $("#mycarousel").carousel("pause");
+          $("#carouselButton").children("span").removeClass("fa-pause");
+          $("#carouselButton").children("span").addClass("fa-play");
+        } else if ($("#carouselButton").children("span").hasClass("fa-play")) {
+          $("#mycarousel").carousel("cycle");
+          $("#carouselButton").children("span").removeClass("fa-play");
+          $("#carouselButton").children("span").addClass("fa-pause");
+        }
+      });
+    </script>
+  </body>
 </html>