diff --git a/public/index.php b/public/index.php
index 2da4f07..0cfa427 100644
--- a/public/index.php
+++ b/public/index.php
@@ -9,6 +9,7 @@
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ee0000">
   <meta name="msapplication-TileColor" content="#00aba9">
   <meta name="theme-color" content="#ffffff">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <?php
   function getByteString($bytes) {
     $symbols = array('B', 'KB', 'MB', 'GB', 'TB');
@@ -55,6 +56,19 @@
     getPercentageUsed($sonozaki_total, $sonozaki_used);
 ?>
   <style type="text/css">
+    /* layout */
+    header, #homes, #services, footer {
+      width: 30%;
+      float: left;  
+    }
+    header {
+      word-spacing: 100vw;
+    }
+
+    /* homes */
+    .home {
+      width: 50%;
+    }
     .pie {
       background: #bbb;
       border-radius: 100%;
@@ -130,13 +144,27 @@
       --value: <?php echo ($sonozaki_percent ? $sonozaki_percent : 0); ?>;
       --over50: <?php echo ($sonozaki_percent > 50 ? '1' : '0'); ?>
     }
+
+    /* services */
+    .service {
+      width: 50%;
+    }
+
+    /* 700px breakpoint */
+    @media screen and (max-width: 700px) {
+      footer, #homes, #services, footer {
+        width: 100%;
+      }
+    }
   </style>
 </head>
 <body>
+
 <header>
   <h1>homo.casa</h1>
   <p>Gods and dice are both best when silent.</p>
 </header>
+
 <div id="homes">
   <h2>homes</h2>
     <div class="home">
@@ -205,6 +233,7 @@
       ?></em></h4>
     </div>
   </div>
+
   <div id="services">
     <h2>services</h2>
     <p>note: authentication required for access.</p>
@@ -222,5 +251,6 @@
   <footer>
     <p>Child of Man. What is it you seek from this World?</p>
   </footer>
+
 </body>
-</html>
\ No newline at end of file
+</html>
