diff --git a/app/index.css b/app/index.css
index 00a28d1..38db23c 100644
--- a/app/index.css
+++ b/app/index.css
@@ -18,9 +18,15 @@ body {
 .container .container-fluid {
   display: flex;
 }
+body.phone .logo {
+  display: none;
+}
 .container .container-fluid .logo img {
   max-height: 220px;
   margin-right: 40px;
 }
 .container .container-fluid .banner {
 }
+body.phone .calBanner .col:first-child {
+  display: none;
+}
diff --git a/app/index.js b/app/index.js
index 88153a0..fa2f16e 100755
--- a/app/index.js
+++ b/app/index.js
@@ -19,4 +19,8 @@ $(document).ready(function () {
       window.open( url, target );
     }
   });
+  var isPhone = /Mobi|Android|iPhone|iPod/i.test(navigator.userAgent) || window.innerWidth <= 768;
+  if (isPhone) {
+    $("body").addClass("phone");
+  }
 });
diff --git a/app/index.php b/app/index.php
index 9f23108..210331f 100755
--- a/app/index.php
+++ b/app/index.php
@@ -75,8 +75,8 @@ use Michelf\Markdown;
           </div>
         </div>
       </div>
-      <hr id="calendar" />
-      <div class="row mt-4">
+      <hr />
+      <div class="row mt-4 calBanner">
         <div class="col" style="max-width: 250px;">
           <img src="image/icon/calendar.png" style="max-height: 200px; padding-left: 20px;" />
         </div>
@@ -90,7 +90,7 @@ use Michelf\Markdown;
           </p>
         </div>
       </div>
-      <div class="row mt-2">
+      <div class="row mt-2 calDetails">
         <div class="col">
           <?php
           $events = getEvents();