diff --git a/public/index.php b/public/index.php
new file mode 100644
index 0000000..135347b
--- /dev/null
+++ b/public/index.php
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>homo.casa</title>
+<?php
+	$hinamizawa_total = disk_total_space(/data/);
+	$hinamizawa_free = disk_free_space(/data/);
+	$hinamizawa_percent_used = $hinamizawa_total ?
+		(($hinamizawa_total - $hinamizawa_free) / $hinamizawa_total)
+	: false;
+	$maebara_total = disk_total_space(/data/maebara/);
+	$maebara_free = disk_free_space(/data/maebara/);
+	$maebara_percent_used = $maebara_total ?
+		(($maebara_total - $maebara_free) / $maebara_total)
+	: false;
+	$houjou_total = disk_total_space(/data/houjou/);
+	$houjou_free = disk_free_space(/data/houjou/);
+	$houjou_percent_used = $houjou_total ?
+		(($houjou_total - $houjou_free) / $houjou_total)
+	: false;
+	$ryuuguu_total = disk_total_space(/data/ryuuguu/);
+	$ryuuguu_free = disk_free_space(/data/ryuuguu/);
+	$ryuuguu_percent_used = $ryuuguu_total ?
+		(($ryuuguu_total - $ryuuguu_free) / $ryuuguu_total)
+	: false;
+	$sonozaki_total = disk_total_space(/data/sonozaki/);
+	$sonozaki_free = disk_free_space(/data/sonozaki/);
+	$sonozaki_percent_used = $sonozaki_total
+		(($sonozaki_total - $sonozaki_free) / $sonozaki_total)
+	: false;
+?>
+	<style type="text/css">
+		.pie {
+			background: #bbb;
+			border-radius: 100%;
+			height: calc(var(--size, 200) * 1px);
+			width: calc(var(--size, 200) * 1px);
+			position: relative;
+		}
+		.slice {
+			height: 100%;
+			width: 100%;
+			position: absolute;
+			transform: translate(0, -50%) rotate(90deg);
+			transform-origin: 50% 100%;
+		}
+		.slice:after,
+		.slice:before {
+			background: var(--bg, #fff);
+			content: '';
+			height: 100%;
+			width: 100%;
+			position: absolute;
+		}
+		.slice:before {
+			--degrees: calc((var(--value, 45) / 100) * 360);
+			transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
+			transform-origin: 50% 0;
+		}
+		.slice:after {
+			opacity: var(--over50, 0);
+		}
+		.hinamizawa {
+			--bg: #637bc0;
+			background: var(--bg, #637bc0);
+		}
+		.maebara {
+			--bg: #835e4c;
+			background: var(--bg, #835e4c);
+		}
+		.houjou {
+			--bg: #ebd076;
+			background: var(--bg, #ebd076);
+		}
+		.ryuuguu {
+			--bg: #faaa66;
+			background: var(--bg, #faaa66);
+		}
+		.sonozaki {
+			--bg: #86c9a8;
+			background: var(--bg, #86c9a8);
+		}
+		#hinamizawa-used {
+			--value: <?php echo $hinamizawa_percent_used ?>;
+		}
+		#maebara-used {
+			--value: <?php echo $maebara_percent_used ?>;
+		}
+		#houjou-used {
+			--value: <?php echo $houjou_percent_used ?>;
+		}
+		#ryuuguu-used {
+			--value: <?php echo $ryuuguu_percent_used ?>;
+		}
+		#sonozaki-used {
+			--value: <?php echo $sonozaki_percent_used ?>;
+		}
+	</style>
+</head>
+<body>
+	<h1>homo.casa</h1>
+	<h2>hinamizawa</h2>
+	<div class="pie">
+		<div class="slice hinamizawa" id="hinamizawa-used"></div>
+	</div>
+	<h3>
+
+	<h2>maebara</h2>
+	<div class="pie">
+		<div class="slice maebara" id="maebara-used"></div>
+	</div>
+
+	<h2>houjou</h2>
+	<div class="pie">
+		<div class="slice houjou" id="houjou-used"></div>
+	</div>
+
+	<h2>ryuuguu</h2>
+	<div class="pie">
+		<div class="slice ryuuguu" id="ryuuguu-used"></div>
+	</div>
+
+	<h2>sonozaki</h2>
+	<div class="pie">
+		<div class="slice sonozaki" id="sonozaki-used"></div>
+	</div>
+
+	<footer>
+		<p>Child of Man. What do you seek from this world?</p>
+	</footer>
+</body>
+</html>
\ No newline at end of file
