diff --git a/web/public/css/general.css b/web/public/css/general.css
index c167241..5084389 100644
--- a/web/public/css/general.css
+++ b/web/public/css/general.css
@@ -29,6 +29,7 @@ header {
 
 h1 {
 	margin: 0;
+	margin-top: 36px;
 	padding: 0;
 	color: white;
 	font-family: Epilogue, sans-serif;
@@ -39,10 +40,10 @@ h1 {
 }
 
 main {
-	margin-top: 50px;
+	margin-top: 36px;
 	background-color: #fff8;
 	box-shadow: 0 0 0.5vw black;
-	border-radius: 1.5vw;
+	border-radius: 16px;
 	width: 80vw;
 	max-width: 700px;
 	transition: 0.3s;
diff --git a/web/public/css/tfm.css b/web/public/css/tfm.css
index 5dfd06e..3bd3f5e 100644
--- a/web/public/css/tfm.css
+++ b/web/public/css/tfm.css
@@ -1,7 +1,17 @@
+html,
+body {
+	padding-bottom: 0;
+	padding-left: 0;
+	padding-right: 0;
+}
+
 main {
 	position: relative;
-	height: 70vh;
-	max-width: 100%;
+	width: 100%;
+	height: 100%;
+	max-width: 100vw;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
 }
 
 .contents-wrapper {
@@ -17,7 +27,7 @@ main {
 	overflow-x: hidden;
 }
 
-.item {
+.sasa {
 	position: relative;
 	margin: 16px;
 	padding: 0;
@@ -28,9 +38,10 @@ main {
 	background-size: cover;
 	background-position: center;
 	overflow: hidden;
+	cursor: pointer;
 }
 
-.item .overlay {
+.sasa .overlay {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -39,11 +50,11 @@ main {
 	background-color: #0000;
 }
 
-.item:hover .overlay {
+.sasa:hover .overlay {
 	background-color: #0002;
 }
 
-.item.selected .overlay {
+.sasa.selected .overlay {
 	background-color: #0004;
 }
 
@@ -76,17 +87,36 @@ main {
 	overflow: hidden;
 }
 
-form#sasa-menu {
-	margin: 0;
+#sasa-form {
 	padding: 2vw 2vw;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
 }
 
 #tanzaku-list {
-	height: 40vh;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	padding: 8px 0;
+	height: 39vh;
+	box-shadow: inset -5px 5px 5px #1111, inset -5px -5px 5px #1111;
 	overflow-y: scroll;
 	overflow-x: hidden;
 }
+
+.tanzaku {
+	margin: 5px;
+	padding: 7px;
+	border: 1px solid #555;
+	border-radius: 7px;
+	cursor: default;
+}
+
+.tanzaku:hover,
+.tanzaku.selected:hover {
+	background-color: #0004;
+}
+
+.tanzaku.selected {
+	background-color: #0002;
+}
diff --git a/web/public/js/tfm.js b/web/public/js/tfm.js
index 0e098e4..9a01bd9 100644
--- a/web/public/js/tfm.js
+++ b/web/public/js/tfm.js
@@ -13,7 +13,7 @@ function sasa_load(id) {
 	if (id < 0) {
 		sasahyou = resp.data;
 		sasahyou.forEach((sasa) => {
-			$(".contents-wrapper").append(`<div class="item" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}" style="background-image: url(${"/thumbs/" + sasa.path})"><div class="overlay"></div></div>`);
+			$(".contents-wrapper").append(`<div class="sasa" id="s${sasa.id}" title="${sasa.path.split('/').slice(-1)}" style="background-image: url(${"/thumbs/" + sasa.path})"><div class="overlay"></div></div>`);
 		});
 	}
 }
@@ -31,7 +31,7 @@ function tanzaku_load(id) {
 	if (id < 0) {
 		sappyou = resp.data;
 		sappyou.forEach((tanzaku) => {
-			$("#tanzaku-list").append(`<div class="form-check"><input class="form-check-input" type="checkbox" id="ct${tanzaku.id}"><label class="form-check-label" for="ct${tanzaku.id}">${tanzaku.name}</label></div>`);
+			$("#tanzaku-list").append(`<div class="tanzaku" id="t${tanzaku.id}">${tanzaku.name}</div>`);
 		});
 	}
 }
@@ -53,7 +53,7 @@ $(window).on("load", function () {
 	sasa_load(-1);
 	tanzaku_load(-1);
 	kazari_load();
-})
+});
 
 $(document).keyup(function (e) {
 	if (e.key === "Escape") {
@@ -61,7 +61,7 @@ $(document).keyup(function (e) {
 	}
 });
 
-$(document).on("click", ".item", function (e) {
+$(document).on("click", ".sasa", function (e) {
 	let wasSelected = $(this).hasClass("selected");
 	if (!e.ctrlKey) {
 		$(".selected").removeClass("selected");
@@ -74,7 +74,7 @@ $(document).on("click", ".item", function (e) {
 	}
 });
 
-$(document).on("dblclick", ".item", function (e) {
+$(document).on("dblclick", ".sasa", function (e) {
 	let id = parseInt($(this).attr("id").slice(1));
 	let sasa;
 	sasahyou.every(current_sasa => {
@@ -86,16 +86,29 @@ $(document).on("dblclick", ".item", function (e) {
 	});
 	$(".menu-wrapper").css("display", "flex");
 	$("#sasa-name").val(decodeURI(sasa.path));
+	$("#btn-full").attr("href", "/files/" + sasa.path);
 	let resp = tdb_query("$TFM", 24, '' + id);
 	if (!resp.status) {
 		alert("Something went wrong!");
 		return;
 	}
 	resp.data.forEach(tanzaku => {
-		$(`#ct${tanzaku.id}`).prop("checked", true);
+		$(`#t${tanzaku.id}`).addClass("selected");
 	});
 });
 
-$(document).on("click", ".menu-wrapper", function (e) {
-	$(".menu-wrapper").css("display", "none");
+$(document).on("click", "#btn-close", function (e) {
+	e.preventDefault();
+	$("#sasa-menu").css("display", "none");
+	sappyou.forEach(tanzaku => {
+		$(`#t${tanzaku.id}`).removeClass("selected");
+	});
+});
+
+$(document).on("click", ".tanzaku", function (e) {
+	if ($(this).hasClass("selected")) {
+		$(this).removeClass("selected");
+	} else {
+		$(this).addClass("selected");
+	}
 });
diff --git a/web/public/tfm.html b/web/public/tfm.html
index d0747f6..ae8821d 100644
--- a/web/public/tfm.html
+++ b/web/public/tfm.html
@@ -33,17 +33,27 @@
 	<div class="contents-wrapper">
 	</div>
 </main>
-<div class="menu-wrapper">
+<div class="menu-wrapper" id="sasa-menu">
 	<div class="menu">
 		<h2>Sasa menu</h2>
-		<form id="sasa-menu">
-			<div class="form-group">
-				<label for="sasa-name">File name</label>
-				<input type="text" name="name" class="form-control" id="sasa-name">
+		<form id="sasa-form">
+			<div class="form-group row">
+				<label class="col-sm-2 col-form-label" for="sasa-name">File name</label>
+				<div class="col-sm-10">
+					<input type="text" name="sasa-name" class="form-control" id="sasa-name">
+				</div>
+			</div>
+			<div class="form-group row">
+				<label class="col-sm-3 col-form-label" for="tanzaku-filter">Tanzaku filter</label>
+				<div class="col-sm-9">
+					<input type="text" name="tanzaku-filter" class="form-control" id="tanzaku-filter">
+				</div>
 			</div>
 			<div class="form-group" id="tanzaku-list"></div>
-			<div class="form-group">
+			<div class="form-group button-flex">
 				<button class="btn btn-primary" id="btn-update">Confirm</button>
+				<a href="" target="_blank" class="btn btn-outline-info" id="btn-full">View full</a>
+				<button class="btn btn-outline-danger" id="btn-close">Close</button>
 			</div>
 		</form>
 	</div>