diff --git a/app/js/login/login.js b/app/js/login/login.js
index dbbb9b7d..5ae36bc6 100644
--- a/app/js/login/login.js
+++ b/app/js/login/login.js
@@ -489,6 +489,7 @@ function multiSelector(parseC) {
 		});
 		$("#src-acct-sel").append('<option value="tootsearch">Tootsearch</option>');
 		$("#add-acct-sel").append('<option value="noauth">' + lang.lang_login_noauth + '</option><option value="webview">Twitter</option>');
+		$("#dir-acct-sel").append('<option value="noauth">' + lang.lang_login_noauth + '</option>');
 	}
 	$('select').formSelect();
 	if(!parseC){
diff --git a/app/js/tl/directory.js b/app/js/tl/directory.js
new file mode 100644
index 00000000..c5fee767
--- /dev/null
+++ b/app/js/tl/directory.js
@@ -0,0 +1,69 @@
+//ディレクトリ
+//ディレクトリトグル
+function dirMenu() {
+    $("#dir-contents").html("");
+    directory();
+    $("#left-menu div").removeClass("active");
+    $("#dirMenu").addClass("active");
+    $(".menu-content").addClass("hide");
+    $("#dir-box").removeClass("hide");
+}
+function dirselCk() {
+    var acct = $("#dir-acct-sel").val();
+    if (acct == "noauth") {
+        $("#dirNoAuth").removeClass("hide");
+    } else {
+        $("#dirNoAuth").addClass("hide");
+        directory();
+    }
+}
+function directory(isMore) {
+    var order = $("[name=sort]:checked").val()
+    if (!order) {
+        order = "active"
+    }
+    var local_only = $("#local_only:checked").val()
+    if (local_only) {
+        local_only = "true"
+    } else {
+        local_only = "false"
+    }
+    var acct_id = $("#dir-acct-sel").val();
+    if (acct_id == "noauth") {
+        var domain = $("#dirNoAuth-url").val();
+        var at = "";
+    } else {
+        var domain = localStorage.getItem("domain_" + acct_id);
+        var at = localStorage.getItem("acct_" + acct_id + "_at");
+    }
+    if (isMore) {
+        var addOffset = $("#dir-contents .cvo").length
+    } else {
+        var addOffset = 0
+        $("#dir-contents").html("");
+    }
+    var start = "https://" + domain + "/api/v1/directory?order=" + order + "&local=" + local_only + "&offset=" + addOffset
+    console.log(start)
+    fetch(start, {
+        method: 'GET',
+        headers: {
+            'content-type': 'application/json',
+            'Authorization': 'Bearer ' + at
+        },
+    }).then(function (response) {
+        return response.json();
+    }).catch(function (error) {
+        //todo(error);
+        console.error(error);
+    }).then(function (json) {
+        if (json) {
+            $("#moreDir").removeClass("disabled")
+            var html = userparse(json, null, acct_id, "dir", null)
+            $("#dir-contents").append(html)
+            jQuery("time.timeago").timeago();
+        } else {
+            $("#moreDir").addClass("disabled")
+        }
+
+    });
+}
\ No newline at end of file
diff --git a/app/js/tl/parse.js b/app/js/tl/parse.js
index 96fad252..203be604 100644
--- a/app/js/tl/parse.js
+++ b/app/js/tl/parse.js
@@ -1014,12 +1014,21 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 			} else {
 				var avatar = "../../img/missing.svg";
 			}
-
+			if(tlid == "dir" && acct_id == "noauth"){
+				var udg ='<a onclick="udgEx(\'' + toot.url + '\',\'main\');" user="' + toot.acct + '" class="udg">'
+			}else{
+				var udg ='<a onclick="udg(\'' + toot.id + '\',' +
+				acct_id + ');" user="' + toot.acct + '" class="udg">'
+			}
+			if(tlid == "dir"){
+				var latest = date(toot.last_status_at, "relative");
+				var authhtml = '<div class="cbadge" style="width:100px;">Last: ' + latest +
+				'</div>';
+			}
 			templete = templete +
 				'<div class="cvo" style="padding-top:5px;" user-id="' + toot.id + '"><div class="area-notice">' +
 				notftext +
-				'</div><div class="area-icon"><a onclick="udg(\'' + toot.id + '\',' +
-				acct_id + ');" user="' + toot.acct + '" class="udg">' +
+				'</div><div class="area-icon">' + udg +
 				'<img draggable="false" src="' + avatar + '" width="40" class="prof-img" user="' + toot
 					.acct + '" onerror="this.src=\'../../img/loading.svg\'"></a></div>' +
 				'<div class="area-display_name"><div class="flex-name"><span class="user">' +
@@ -1033,7 +1042,6 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 				'</div><div class="cbadge" style="width:100px;">Followers:' + toot.followers_count +
 				'</div>' + authhtml +
 				'</div>' +
-				'</div>' +
 				'</div>';
 		}
 
diff --git a/app/view/make/index.sample.html b/app/view/make/index.sample.html
index a91e82a1..85e202bb 100644
--- a/app/view/make/index.sample.html
+++ b/app/view/make/index.sample.html
@@ -6,6 +6,7 @@
 	<script type="text/javascript" src="../../js/ui/theme.js"></script>
 	<meta content="width=device-width,initial-scale=1.0" name="viewport">
 	<link href="../../node_modules/materialize-css/dist/css/materialize.css" type="text/css" rel="stylesheet">
+	<link href="../../node_modules/jquery-ui-dist/jquery-ui.min.css" type="text/css" rel="stylesheet">
 	<link href="../../css/tl.css" rel="stylesheet" type="text/css">
 	<link href="../../css/userdata.css" rel="stylesheet" type="text/css">
 	<link href="../../css/post.css" rel="stylesheet" type="text/css">
@@ -464,7 +465,8 @@
 					</div>
 					<div class="his-float" id="his-float-timeline">
 						<div id="my-data-nav">
-							<a go="#his-tl" title="@@timeline@@" class="btn active-back column-first anc-link waves-effect"><i
+							<a go="#his-tl" title="@@timeline@@"
+								class="btn active-back column-first anc-link waves-effect"><i
 									class="material-icons">timeline</i>@@timeline@@</a>
 							<a go="#his-follow-list" title="@@follow@@" class="btn anc-link waves-effect"><i
 									class="material-icons">people</i>→@@follow@@</a>
@@ -472,7 +474,8 @@
 									class="material-icons">people</i>←@@follower@@</a>
 							<a go="#his-list" title="@@list@@" class="btn only-his-data anc-link waves-effect"><i
 									class="material-icons">list</i>@@list@@</a>
-							<a go="#his-fav-list" title="@@favRegist@@" class="btn only-my-data anc-link waves-effect"><i
+							<a go="#his-fav-list" title="@@favRegist@@"
+								class="btn only-my-data anc-link waves-effect"><i
 									class="material-icons">star</i>@@favRegist@@</a>
 							<a class="dropdown-trigger btn waves-effect" href="#" data-target="hisdropdown"><i
 									class="material-icons">more_vert</i>@@more@@</a>
@@ -505,8 +508,8 @@
 											class="material-icons">account_box</i>@@operateOtherAcct@@</a>
 								</li>
 								<li class="anc-link" go="#his-matching-list">
-									<a href="#" title="@@likeUserDes@@"><i
-											class="material-icons">group_work</i>User Matching</a>
+									<a href="#" title="@@likeUserDes@@"><i class="material-icons">group_work</i>User
+										Matching</a>
 								</li>
 							</ul>
 						</div>
@@ -606,7 +609,8 @@
 							Powered by <a href="https://distsn.org/" target="_blank">Mastodon User
 								Matching</a><br>
 							<div id="his-matching-list-contents" class="cont-series"></div>
-							<button class="btn waves-effect " onclick="showMat()" style="width:100%; padding:0;">@@get@@</button>
+							<button class="btn waves-effect " onclick="showMat()"
+								style="width:100%; padding:0;">@@get@@</button>
 						</div>
 						<div id="his-float-blocked">
 							<div>@@blocked@@</div>
@@ -747,6 +751,8 @@
 						class="material-icons">search</i><span>@@search@@</span></div>
 				<div class="waves-effect" onclick="listMenu()" id="listMenu"><i
 						class="material-icons">view_headline</i><span>@@list@@</span></div>
+				<div class="waves-effect" onclick="dirMenu()" id="dirMenu"><i
+						class="material-icons">recent_actors</i><span>@@directory@@</span></div>
 				<div class="waves-effect" onclick="filterMenu()" id="filterMenu"><i
 						class="material-icons">filter_list</i><span>@@filter@@</span></div>
 				<div class="waves-effect" onclick="help()"><i
@@ -836,6 +842,36 @@
 						</div>
 					</div>
 				</div>
+				<!--ディレクトリ-->
+				<div id="dir-box" class="hide menu-content">
+					<div class="input-field">
+						<select id="dir-acct-sel" class="acct-sel" onchange="dirselCk()"></select>
+					</div>
+					<div id="dirNoAuth" class="hide">
+						<input id="dirNoAuth-url" type="text" class="validate" style="width:calc( 70% - 40px);"
+							placeholder="e.g:mastodon.social">
+						<button class="btn waves-effect indigo" style="width: 120px;padding: 0;padding-left: 15px;"
+							onclick="directory()">
+							<i class="material-icons left" style="margin:0">search</i>@@show@@
+						</button>
+					</div>
+					<label>
+						<input class="with-gap" onchange="directory()" name="sort" type="radio" value="active" checked>
+						<span>@@active@@</span>
+					</label>
+					<label>
+						<input class="with-gap" onchange="directory()" name="sort" type="radio" value="new">
+						<span>@@newcomer@@</span>
+					</label><br>
+					<label>
+						<input type="checkbox" class="filled-in" id="local_only" value="true" onchange="directory()" />
+						<span>@@local_only@@</span>
+					</label>
+					<div id="dir-contents"></div>
+					<button class="btn waves-effect teal disabled" style="width: 100%" id="moreDir"
+						onclick="directory('more')">@@more@@
+					</button>
+				</div>
 				<!--並べ替え-->
 				<div id="sort-box" class="hide menu-content">
 					<ul id="sort"></ul>
@@ -1071,7 +1107,7 @@
 	<script type="text/javascript" src="../../js/common/version.js"></script>
 	<script type="text/javascript" src="../../js/common/keyshortcut.js"></script>
 	<script type="text/javascript" src="../../js/common/modal.js"></script>
-	<script type="text/javascript" src="../../js/ui/jquery-ui.min.js"></script>
+	<script type="text/javascript" src="../../node_modules/jquery-ui-dist/jquery-ui.min.js"></script>
 	<script type="text/javascript" src="../../node_modules/sweetalert2/dist/sweetalert2.all.min.js"></script>
 	<script type="text/javascript" src="../../js/platform/punycode.js"></script>
 
@@ -1091,6 +1127,7 @@
 	<script type="text/javascript" src="../../js/tl/datails.js"></script>
 	<script type="text/javascript" src="../../js/tl/mix.js"></script>
 	<script type="text/javascript" src="../../js/tl/src.js"></script>
+	<script type="text/javascript" src="../../js/tl/directory.js"></script>
 	<script type="text/javascript" src="../../js/tl/filter.js"></script>
 	<script type="text/javascript" src="../../js/tl/tag.js"></script>
 	<script type="text/javascript" src="../../js/tl/list.js"></script>
diff --git a/app/view/make/language/en/index.json b/app/view/make/language/en/index.json
index 84ecded4..1678e68b 100644
--- a/app/view/make/language/en/index.json
+++ b/app/view/make/language/en/index.json
@@ -164,5 +164,10 @@
     "changeTips":"Change Tips",
     "help":"Help",
     "about":"About TheDesk",
-    "hereAddColumns":"<- Add TL"
+    "hereAddColumns":"<- Add TL",
+    "show": "Show",
+    "directory": "Directory",
+    "active": "Recently active",
+    "newcomer": "New arrivals",
+    "local_only": "Local only"
 }
\ No newline at end of file
diff --git a/app/view/make/language/ja/index.json b/app/view/make/language/ja/index.json
index c7afa65b..bc64b09a 100644
--- a/app/view/make/language/ja/index.json
+++ b/app/view/make/language/ja/index.json
@@ -163,5 +163,10 @@
     "changeTips":"Tips変更",
     "help":"ヘルプ",
     "about":"このソフトについて",
-    "hereAddColumns":"←ここからTL追加"
+    "hereAddColumns":"←ここからTL追加",
+    "show": "表示",
+    "directory": "ディレクトリ",
+    "active": "最新活動順",
+    "newcomer": "新規順",
+    "local_only": "ローカルのみ"
 }
\ No newline at end of file