diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl
index 7d1720becd..5311ad8f79 100644
--- a/templates/admin/notice.tmpl
+++ b/templates/admin/notice.tmpl
@@ -7,7 +7,7 @@
 			{{.i18n.Tr "admin.notices.system_notice_list"}} ({{.i18n.Tr "admin.total" .Total}})
 		</h4>
 		<div class="ui attached table segment">
-			<table class="ui very basic select selectable table">
+			<table id="notice-table" class="ui very basic select selectable table">
 				<thead>
 					<tr>
 						<th></th>
@@ -28,9 +28,9 @@
 							</td>
 							<td>{{.ID}}</td>
 							<td>{{$.i18n.Tr .TrStr}}</td>
-							<td>{{SubStr .Description 0 120}}...</td>
-							<td><span class="poping up" data-content="{{.CreatedUnix.AsTime}}" data-variation="inverted tiny">{{.CreatedUnix.FormatShort}}</span></td>
-							<td><a href="#"><i class="browser icon view-detail" data-content="{{.Description}}"></i></a></td>
+							<td class="view-detail"><span class="notice-description text truncate">{{.Description}}</span></td>
+							<td><span class="notice-created-time poping up" data-content="{{.CreatedUnix.AsTime}}" data-variation="inverted tiny">{{.CreatedUnix.FormatShort}}</span></td>
+							<td><a href="#"><i class="browser icon view-detail"></i></a></td>
 						</tr>
 					{{end}}
 				</tbody>
@@ -73,10 +73,11 @@
 	</div>
 </div>
 
-<div class="ui modal" id="detail-modal">
+<div class="ui modal admin" id="detail-modal">
 	<i class="close icon"></i>
 	<div class="header">{{$.i18n.Tr "admin.notices.view_detail_header"}}</div>
 	<div class="content">
+		<div class="sub header"></div>
 		<pre></pre>
 	</div>
 </div>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 46534bc458..7cffdc79b3 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1864,7 +1864,8 @@ function initAdmin() {
 
     // Attach view detail modals
     $('.view-detail').on('click', function () {
-      $detailModal.find('.content pre').text($(this).data('content'));
+      $detailModal.find('.content pre').text($(this).parents('tr').find('.notice-description').text());
+      $detailModal.find('.sub.header').text($(this).parents('tr').find('.notice-created-time').text());
       $detailModal.modal('show');
       return false;
     });
diff --git a/web_src/less/_admin.less b/web_src/less/_admin.less
index 5fb0712368..9184ed76ef 100644
--- a/web_src/less/_admin.less
+++ b/web_src/less/_admin.less
@@ -75,4 +75,21 @@
         white-space: pre-wrap;
         word-wrap: break-word;
     }
+
+    #notice-table {
+        .notice-description {
+            @media only screen and (max-width: 767px) {
+                max-width: 80vw;
+            }
+            @media only screen and (max-width: 991px) and (min-width: 768px) {
+                max-width: 360px;
+            }
+            @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
+                max-width: 510px;
+            }
+            @media only screen and (min-width: 1200px) {
+                max-width: 640px;
+            }
+        }
+    }
 }