diff --git a/index.html b/index.html
index 9e6e859..9966daa 100644
--- a/index.html
+++ b/index.html
@@ -130,6 +130,81 @@
         </div>
       </div>
     </div>
+
+    <div id="reservationModal" class="modal fade" role="dialog">
+      <div class="modal-dialog modal-lg" role="content">
+        <!-- Modal content-->
+        <div class="modal-content">
+          <div class="modal-header">
+            <h4 class="modal-title">Reserve Table</h4>
+            <button type="button" class="close" data-dismiss="modal">
+              &times;
+            </button>
+          </div>
+          <div class="modal-body">
+            <form>
+              <div class="form-group row">
+                <label class="col-12 col-sm-2 col-form-label"
+                  >Number of Guests</label
+                >
+                <div class="col-12 col-sm">
+                  <input type="radio" name="radio" />1
+                  <input type="radio" name="radio" />2
+                  <input type="radio" name="radio" />3
+                  <input type="radio" name="radio" />4
+                  <input type="radio" name="radio" />5
+                  <input type="radio" name="radio" />6
+                </div>
+              </div>
+              <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>
+              </div>
+              <div class="form-group row">
+                <label class="col-12 col-sm-2 col-from-label"
+                  >Date and Time</label
+                >
+                <div class="col-12 col-sm-4">
+                  <input
+                    type="tex12 col-sm-form-control"
+                    id="date"
+                    name="date"
+                    placeholder="Date"
+                  />
+                </div>
+                <div class="col-12 col-sm-4 mr-2">
+                  <input
+                    type="tex12 col-sm-form-control"
+                    id="time"
+                    name="time"
+                    placeholder="Time"
+                  />
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="offset-md-2 col-md-10">
+                  <button
+                    type="button"
+                    class="btn btn-secondary"
+                    data-dismiss="modal"
+                  >
+                    Cancel
+                  </button>
+                  <button type="submit" class="btn btn-primary">Reserve</button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
     <header class="jumbotron">
       <div class="container">
         <div class="row row-header">
@@ -147,12 +222,9 @@
           <div class="col-8 col-sm-3 align-self-center">
             <a
               role="button"
-              class="btn btn-block nav-link btn-warning"
-              data-toggle="tooltip"
-              data-html="true"
-              title="Or Call us at<br><strong>+852 12345678</strong>"
-              data-placement="bottom"
-              href="#reserveform"
+              class="btn btn-block btn-warning"
+              data-toggle="modal"
+              data-target="#reservationModal"
               >Reserve Table</a
             >
           </div>
@@ -220,16 +292,30 @@
                 </div>
               </div>
               <ol class="carousel-indicators">
-                <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
+                <li
+                  data-target="#mycarousel"
+                  data-slide-to="0"
+                  class="active"
+                ></li>
                 <li data-target="#mycarousel" data-slide-to="1"></li>
                 <li data-target="#mycarousel" data-slide-to="2"></li>
-            </ol>
+              </ol>
             </div>
-            <a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
-                <span class="carousel-control-prev-icon"></span>
+            <a
+              class="carousel-control-prev"
+              href="#mycarousel"
+              role="button"
+              data-slide="prev"
+            >
+              <span class="carousel-control-prev-icon"></span>
             </a>
-            <a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
-                <span class="carousel-control-next-icon"></span>
+            <a
+              class="carousel-control-next"
+              href="#mycarousel"
+              role="button"
+              data-slide="next"
+            >
+              <span class="carousel-control-next-icon"></span>
             </a>
           </div>
         </div>
@@ -309,52 +395,6 @@
           <h3>Meet our culinary specialist</h3>
         </div>
       </div>
-
-      <div
-        class="card col-12 col-sm-8 align-self-center offset-md-2"
-        id="reserveform"
-      >
-        <h3 class="card-title">Reserve a Table</h3>
-        <form>
-          <div class="form-group row">
-            <label class="col-12 col-sm-2 col-form-label"
-              >Number of Guests</label
-            >
-            <div class="col-12 col-sm">
-              <input type="radio" name="radio" />1
-              <input type="radio" name="radio" />2
-              <input type="radio" name="radio" />3
-              <input type="radio" name="radio" />4
-              <input type="radio" name="radio" />5
-              <input type="radio" name="radio" />6
-            </div>
-          </div>
-          <div class="form-group row">
-            <label class="col-12 col-sm-2 col-from-label">Date and Time</label>
-            <div class="col-12 col-sm-4">
-              <input
-                type="tex12 col-sm-form-control"
-                id="date"
-                name="date"
-                placeholder="Date"
-              />
-            </div>
-            <div class="col-12 col-sm-4 mr-2">
-              <input
-                type="tex12 col-sm-form-control"
-                id="time"
-                name="time"
-                placeholder="Time"
-              />
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="offset-md-2 col-md-10">
-              <button type="submit" class="btn btn-primary">Reserve</button>
-            </div>
-          </div>
-        </form>
-      </div>
     </div>
 
     <footer class="footer">
@@ -425,10 +465,5 @@
     <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>
-    <script>
-      $(document).ready(function () {
-        $('[data-toggle="tooltip"]').tooltip();
-      });
-    </script>
-  </body>
+   </body>
 </html>