diff --git a/app/css/master.css b/app/css/master.css
index 11d24c35..0949e4a5 100644
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -160,6 +160,9 @@ blockquote:before, .quote:before {
 #pip-content .material-icons{
   display:none;
 }
+.big-text{
+  font-size:1.2rem;
+}
 
 @media only screen and (min-width: 993px){
 #toast-container {
@@ -197,7 +200,7 @@ blockquote:before, .quote:before {
   justify-content: center;
   align-items: center;
 }
-.blacktheme #imagemodal,.blacktheme  #videomodal,.blacktheme  #tootmodal {
+.blacktheme #imagemodal,.blacktheme  #videomodal,.blacktheme  #tootmodal,.blacktheme #releasenote {
   background-color: black;
 }
 .blacktheme .collapsible-header,.blacktheme .tabs,.blacktheme #pip {
@@ -218,7 +221,7 @@ blockquote:before, .quote:before {
   justify-content: center;
   align-items: center;
 }
-.indigotheme #imagemodal,.indigotheme  #videomodal,.indigotheme  #tootmodal {
+.indigotheme #imagemodal,.indigotheme  #videomodal,.indigotheme  #tootmodal,.indigotheme #releasenote  {
   background-color: #0d1351;
 }
 .indigotheme .collapsible-header,.indigotheme .tabs,.indigotheme #pip {
@@ -239,7 +242,7 @@ blockquote:before, .quote:before {
   justify-content: center;
   align-items: center;
 }
-.browntheme #imagemodal,.browntheme  #videomodal,.browntheme  #tootmodal {
+.browntheme #imagemodal,.browntheme  #videomodal,.browntheme  #tootmodal,.browntheme #releasenote {
   background-color: #261411;
 }
 .browntheme .collapsible-header,.browntheme .tabs,.browntheme #pip {
diff --git a/app/css/tl.css b/app/css/tl.css
index a840ea9e..4ed1c167 100644
--- a/app/css/tl.css
+++ b/app/css/tl.css
@@ -82,9 +82,12 @@ iframe {
 }
 .user{
   cursor:text;
-  font-size:1.2rem;
+  font-size:1.1rem;
 }
 .emojione,.emoji-img{
+  width: 15px;
+}
+.area-toot .emojione,.area-toot .emoji-img{
   width: 20px;
   vertical-align: middle;
   margin: -3px 0 0;
@@ -107,7 +110,7 @@ iframe {
   width: 100%;
   display: grid;
   grid-template-columns: 43px 2fr 1fr;
-  grid-template-areas: 'notice notice notice' 'icon display_name acct' 'icon toot toot' 'vis additional additional' 'actions actions actions';
+  grid-template-areas: 'notice notice notice' 'icon display_name display_name' 'icon toot toot' 'vis additional additional' 'actions actions actions';
 }
 
 .area-notice {
@@ -125,25 +128,31 @@ grid-area: icon;
   user-select: auto;
 height:1.5em;
 margin:2px;
+margin-left:5px;
 overflow:hidden;
 grid-area: display_name;
 white-space: nowrap;
 text-overflow: ellipsis;
+display:flex;
+justify-content:space-between;
+  width:100%;
+  flex-wrap:nowrap
+}
+.flex-name{
+  max-width:calc(100% - 60px);
+  overflow:hidden;
+  text-overflow: ellipsis;
+}
+.flex-time{
+  
 }
 
-.area-acct {
-margin:2px;
-grid-area: acct;
-overflow:hidden;
-text-align:right;
-white-space: nowrap;
-text-overflow: ellipsis;
-}
 
 .area-toot {
   cursor:text;
   user-select: auto;
 margin:2px;
+margin-left:5px;
 grid-area: toot;
 }
 
@@ -207,6 +216,14 @@ font-size:1rem;
   text-overflow: ellipsis;
   height:calc(0.8em + 8px);
 }
+.cbadge-hover {
+  color: #000;
+  background-color: transparent;
+}
+.cbadge-hover:hover {
+  color: #fff;
+  background-color: #777;
+}
 p {
   margin: 0;
   margin-bottom: 0px;
@@ -319,6 +336,7 @@ p:not(:last-child){
 }
 
 /*black theme*/
+.blacktheme .cbadge-hover,.browntheme .cbadge-hover,.indigotheme .cbadge-hover { color: #fff;}
 .blacktheme .notf-box,.blacktheme .modal-footer,.blacktheme #sidebar {
   background-color: #424242;
 }
diff --git a/app/css/userdata.css b/app/css/userdata.css
index 29dcf685..0808da71 100644
--- a/app/css/userdata.css
+++ b/app/css/userdata.css
@@ -33,6 +33,9 @@
 .active-back{
   background-color: #e6ee9c;
 }
+#his-name .emojione,#his-name .emoji-img{
+  width: 20px;
+}
 
 
 /*black theme*/
diff --git a/app/index.html b/app/index.html
index 12e47b5f..1614ccfd 100644
--- a/app/index.html
+++ b/app/index.html
@@ -26,7 +26,7 @@
 <script type="text/javascript" src="./js/ui/jquery-ui.min.js"></script>
 <script>
 	//必ずアプデ時のremove instance消して！
-var ver="Mio (ver.3)";
+var ver="Mio (ver.4)";
 //betaを入れるとバージョンチェックしない
 //var ver="beta";
 var acct_id=0;
@@ -298,7 +298,7 @@ var tlid=0;
 		<span><span id="imgup"></span><span id="imgsel"><i class="waves-effect material-icons gray" onclick="fileselect()" title="ファイルを選択">photo_library</i></span></span>
 		<i class="waves-effect gray material-icons" onclick="adobe()" title="Adobeフォトエディタ">format_shapes</i>
 		<i class="waves-effect gray material-icons" onclick="emoji()" title="絵文字を挿入">tag_faces</i>
-		<a class="pointer waves-effect gray" id="npbtn" title="NowPlaying[クリックでSpotify(アカウント連携が必要です)/右クリックでiTunes(macOSが必要です)]"><i class="material-icons" style="font-size:24px;">music_note</i></a>
+		<a class="pointer waves-effect gray" id="npbtn" title="NowPlaying[クリックでSpotify(アカウント連携が必要です)/control+クリックでiTunes(macOSが必要です)]"><i class="material-icons" style="font-size:24px;">music_note</i></a>
 		<i class="material-icons nex gray waves-effect" title="トゥートボックスのクリア(Ctrl+Shit+C)" data-trans-title="post_box_clear" id="clear">clear</i>
 </div>
 <div class="col s12 mize" style="margin-bottom:5px; padding:0;">
@@ -672,6 +672,38 @@ var tlid=0;
 	<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
 	</div>
 	</div>
+	<!-- Modal Structure Release Note-->
+	<div id="releasenote" class="modal modal-fixed-footer">
+		<div class="modal-content">
+		<h3>TheDesk</h3>
+		<a href="https://thedesk.top" target="_blank">HP</a><br>
+		<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br><br>
+			<div id="release-Mio_ver-4" style="display:none">
+				<h5>Release Note</h5>
+・nodist セキュリティアップデート<br>
+・UI変更<br>
+以下はver.3の新機能<br>
+・macOS版正式リリース<br>
+・Spotifyなうぷれ改修(アートワーク投稿)<br>
+・iTunesなうぷれ機能(macOS必須)<br>
+・メインアカウント機能(起動時や投稿後のアカウントを指定)<br>
+・エアリプソース確認が投稿者のアカウントのLTLに<br>
+・未認証TLのトゥートをメインアカウントで詳細表示できるように<br>
+・Nano機能がウィンドウ位置を記憶するように<br>
+・DMタイムライン<br>
+・(imastodon.net)トレンドタグ表示機能<br>
+			</div>
+			<br><br>
+		TheDeskはオープンソース・ソフトウェアです。<br>
+		皆様のあたたかい支援のもとで製作されています。<br>
+		<a href="https://enty.jp/Cutls" target="_blank">Entyで支援</a><br>
+		<a href="mailto:mstdn@thedesk.top" target="_blank">mstdn@thedesk.top</a>にAmazonギフトカードを送る<br>
+		<a href="https://osushi.love/Cutls_P" target="_blank">Osushi.love</a>で寿司を贈る<br>
+		</div>
+		<div class="modal-footer">
+			<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
+		</div>
+	</div>
 	<!--PiP-->
 	<div id="pip" class="hide pip-bottom pip-left">
 		<i class="material-icons pip-horiz pointer" onclick="pipHoriz()">chevron_right</i>　
diff --git a/app/js/common/version.js b/app/js/common/version.js
index 9833289a..600e90d0 100644
--- a/app/js/common/version.js
+++ b/app/js/common/version.js
@@ -1,6 +1,20 @@
 //バージョンチェッカー
 function verck(ver) {
-	localStorage.setItem("ver", ver);
+	if(localStorage.getItem("ver")!=ver){
+		localStorage.setItem("ver", ver);
+		console.log("Thank you for your update");
+		$(document).ready(function(){
+			$('#releasenote').modal('open');
+			verp=ver.replace( '(', '');
+			verp=verp.replace( '.', '-');
+			verp=verp.replace( '[', '-');
+			verp=verp.replace( ']', '');
+			verp=verp.replace( ')', '');
+			verp=verp.replace( ' ', '_');
+			$("#release-"+verp).show();
+		  });
+	}
+	
 	var l = 5;
 
 	// 生成する文字列に含める文字セット
diff --git a/app/js/tl/date.js b/app/js/tl/date.js
index a4e5bf68..7eed1337 100644
--- a/app/js/tl/date.js
+++ b/app/js/tl/date.js
@@ -21,7 +21,7 @@ function date(str, datetype) {
 			var sec = date.getSeconds();
 		}
 		if (datetype == "full") {
-			var ret = date.getFullYear() + "年" + month + "月" + date.getDate() + "日 " +
+			var ret = date.getFullYear() + "/" + month + "/" + date.getDate() + "/ " +
 				date.getHours() + ":" + min + ":" + sec;
 		}
 		if (date.getFullYear() == now.getFullYear()) {
@@ -34,15 +34,15 @@ function date(str, datetype) {
 					}
 
 				} else {
-					var ret = month + "月" + date.getDate() + "日 " + date.getHours() + ":" +
+					var ret = month + "/" + date.getDate() + " " + date.getHours() + ":" +
 						min + ":" + sec;
 				}
 			} else {
-				var ret = month + "月" + date.getDate() + "日 " + date.getHours() + ":" + min +
+				var ret = month + "/" + date.getDate() + " " + date.getHours() + ":" + min +
 					":" + sec;
 			}
 		} else {
-			var ret = date.getFullYear() + "年" + month + "月" + date.getDate() + "日 " +
+			var ret = date.getFullYear() + "/" + month + "/" + date.getDate() + " " +
 				date.getHours() + ":" + min + ":" + sec;
 		}
 		if (datetype == "double") {
diff --git a/app/js/tl/parse.js b/app/js/tl/parse.js
index aa5257e7..07563a70 100644
--- a/app/js/tl/parse.js
+++ b/app/js/tl/parse.js
@@ -144,8 +144,10 @@ function parse(obj, mix, acct_id, tlid, popup) {
 		if (mix == "notf") {
 			if (toot.type == "mention") {
 				var what = "が返信しました";
+				var icon = "fa-share teal-text";
 			} else if (toot.type == "reblog") {
 				var what = "がブーストしました";
+				var icon = "fa-retweet light-blue-text";
 				if(localStorage.getItem("domain_" + acct_id)=="imastodon.net" && !locale){
 					what = ":「わかるわ」";
 				}else if(localStorage.getItem("domain_" + acct_id)=="mstdn.osaka" && !locale){
@@ -153,19 +155,20 @@ function parse(obj, mix, acct_id, tlid, popup) {
 				}
 			} else if (toot.type == "favourite") {
 				var what = "がお気に入り登録しました";
+				var icon = "fa-star  yellow-text";
 				if(localStorage.getItem("domain_" + acct_id)=="imastodon.net" && !locale){
 					what = "の頭にティンときたようです";
 				}else if(localStorage.getItem("domain_" + acct_id)=="mstdn.osaka" && !locale){
 					what = "がええやんと言いました";
 				}
 			}
-			var noticetext = '<span class="cbadge"title="' + date(toot.created_at,
+			var noticetext = '<span class="cbadge cbadge-hover"title="' + date(toot.created_at,
 				'absolute') + '(通知された時間)"><i class="fa fa-clock-o"></i>' + date(toot.created_at,
 				datetype) +
-			'</span><a onclick="udg(\'' + toot.account.id +
-				'\',\'' + acct_id + '\')" class="pointer">' + dis_name +
+			'</span><i class="big-text fa '+icon+'"></i><a onclick="udg(\'' + toot.account.id +
+				'\',\'' + acct_id + '\')" class="pointer grey-text">' + dis_name +
 				"(" + toot.account.acct +
-				")</a>" + what;
+				")</a>";
 			var notice = noticetext;
 			var memory = localStorage.getItem("notice-mem");
 			if (popup >= 0 && obj.length < 5 && noticetext != memory) {
@@ -205,13 +208,14 @@ function parse(obj, mix, acct_id, tlid, popup) {
 			var if_notf="";
 			if (toot.reblog) {
 				var rebtxt = "がブースト";
+				var rticon = "fa-retweet light-blue-text";
 				if(localStorage.getItem("domain_" + acct_id)=="imastodon.net" && !locale){
 					rebtxt = ":「わかるわ」";
 				}else if(localStorage.getItem("domain_" + acct_id)=="mstdn.osaka" && !locale){
 					rebtxt = "がしばいた";
 				}
-				var notice = dis_name + "(" + toot.account.acct +
-					")"+rebtxt+"<br>";
+				var notice = '<i class="big-text fa '+rticon+'"></i>'+ dis_name + "(" + toot.account.acct +
+					")<br>";
 					var boostback = "shared";
 				var toot = toot.reblog;
 				var dis_name=escapeHTML(toot.account.display_name);
@@ -496,15 +500,15 @@ function parse(obj, mix, acct_id, tlid, popup) {
 			'<img src="' + avatar +
 			'" width="40" class="prof-img" user="' + toot.account.acct +
 			'"></a></div>' +
-			'<div class="area-display_name"><span class="user">' +
+			'<div class="area-display_name"><div class="flex-name"><span class="user">' +
 			dis_name +
 			'</span><span class="sml gray" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis; cursor:text;"> @' +
 			toot.account.acct + locked + '</span></div>' +
-			'<div class="area-acct"><div><span class="cbadge pointer waves-effect" onclick="tootUriCopy(\'' +
+			'<div class="flex-time"><span class="cbadge cbadge-hover pointer waves-effect" onclick="tootUriCopy(\'' +
 			toot.url + '\');" title="' + date(toot.created_at, 'absolute') +
 			'(クリックでトゥートURLをコピー)"><i class="fa fa-clock-o"></i>' +
-			date(toot.created_at, datetype) + '</span><span style="padding:0;">' +
-			vis + '</span></div></div>' +
+			date(toot.created_at, datetype) + '</span>' +
+			'</div></div>' +
 			'<div class="area-toot"><span class="toot ' + spoiler + '">' + content +
 			'</span><span class="' +
 			api_spoil + ' cw_text_' + toot.id + '">' + spoil + spoiler_show +
@@ -515,6 +519,7 @@ function parse(obj, mix, acct_id, tlid, popup) {
 			'' + mentions + tags + '</div>' +
 			'<div class="area-vis"></div>'+
 			'<div class="area-actions '+mouseover+'" style="padding:0; margin:0; top:-20px; display:flex; justify-content:space-around; max-width:100%; ">' +
+			'<div class="action">'+vis+'</div>'+
 			'<div class="action '+antinoauth+'"><a onclick="detEx(\''+toot.url+'\',\'main\')" class="waves-effect waves-dark details" style="padding:0">詳細(メインアカウント経由)</a></div>' +
 			'<div class="action '+disp["re"]+' '+noauth+'"><a onclick="re(\'' + toot.id +
 			'\',\'' + toot.account.acct + '\',' +
diff --git a/app/main.js b/app/main.js
index 5d659b6d..097c95ca 100644
--- a/app/main.js
+++ b/app/main.js
@@ -21,6 +21,7 @@ const app = electron.app;
     	customPath: void 0 // Relative path if you want to use your fork of toast.exe 
 	});
 	}
+
 // ウィンドウを作成するモジュール
 const BrowserWindow = electron.BrowserWindow;
 const {
diff --git a/app/package.json b/app/package.json
index 62f7f789..0267265a 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "TheDesk",
-  "version": "15.3.0",
+  "version": "15.4.0",
   "description": "TheDesk on Mastodonはシンプルと多機能を両立したデスクトップ向けクライアントです",
   "main": "main.js",
   "scripts": {
diff --git a/app/setting.html b/app/setting.html
index f6cc3bd9..e7d24b54 100644
--- a/app/setting.html
+++ b/app/setting.html
@@ -116,7 +116,8 @@
 		<input class="with-gap" onchange="settings()" name="mov" type="radio" id="mov_no" value="no" />
 		<label for="mov_no">いいえ</label>
 		<br>
-		<h5>指定行数以上を折りたたむ</h5>5文字以下のトゥートは折りたたみません。また、折りたたみ時は改行が描画されません。
+		<h5>指定行数以上を折りたたむ</h5>
+		5文字以下のトゥートは折りたたみません。また、折りたたみ時は改行が描画されません。改行のみを行数とカウントします。
 		<br>
 		<input type="text" style="width:50px" id="sentence">行以上または 
 		<input type="text" style="width:50px" id="letters">文字以上 
@@ -224,8 +225,9 @@
 			<h5>テンプレートの編集</h5>
 			以下を編集してテンプレートを変更できます。<br>
 			<textarea id="np-temp" class="materialize-textarea" data-length="500">#NowPlaying {song} / {album} / {artist}
-{url} #SpotifyWithTheDesk</textarea><br>
+{url}</textarea><br>
 				テンプレート:{song}:曲名/{album}:アルバム名/{artist}:アーティスト名/{url}:各曲のSpotifyのURL<br>
+				iTunes NowPlayingでも{url}以外のテンプレートに従ってトゥートされます。<br>
 			<button onclick="spotifySave()" class="btn waves-effect" style="width:100px;">設定</button>
 		</div>
 	</li>
diff --git a/ver.json b/ver.json
index aed93357..d31930bf 100644
--- a/ver.json
+++ b/ver.json
@@ -1 +1 @@
-{"warn":"これはGCPにアップして下さい！！","warn2":"これはGCPにアップして下さい！！","warn3":"これはGCPにアップして下さい！！","desk":"Mio (ver.3)","date":"2018-05-20","detail":"内部V:15.3.0|機能追加たくさんあります。"}
\ No newline at end of file
+{"warn":"これはGCPにアップして下さい！！","warn2":"これはGCPにアップして下さい！！","warn3":"これはGCPにアップして下さい！！","desk":"Mio (ver.3)","date":"2018-05-26","detail":"内部V:15.4.0|UI改修ほか"}
\ No newline at end of file