diff --git a/index.html b/index.html
index 9880632..bb4f7a2 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,20 @@
   </span>
 
   </div>
-
+  <div id="myModal" class="modal fade">
+      <div class="modal-dialog">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title">This website is better viewed on desktop</h5>
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+              </div>
+              <div class="modal-body">
+                  <p>Sorry for that.</p>
+
+              </div>
+          </div>
+      </div>
+  </div>
   </div>
 <div class="row">
   <!-- background audio -->
@@ -191,7 +204,7 @@ $(".draggable i.remove-elem").off('click').on("click", function(){
 
 <script>
 // function popup_bg(start,end) {
-  
+
 //   var myIcon = document.querySelector(".audioBG");
 //   var box = document.getElementById("audioBG");
 //     if (box.paused) {
@@ -204,7 +217,7 @@ $(".draggable i.remove-elem").off('click').on("click", function(){
 // }
 //     // box.currentTime = start;
 //     // console.log(start);
-  
+
 // }
 
 
@@ -353,7 +366,13 @@ $("#about").click(function(){
 
 
 </script>
-
+<script>
+    $(document).ready(function(){
+      if (screen.width < 768) {
+        $("#myModal").modal('show');
+      }
+    });
+</script>
 
 
 </div>