diff --git a/media/css/seahub.css b/media/css/seahub.css
index fb2f0408c9..3468fb43eb 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -3608,3 +3608,18 @@ img.thumbnail {
     padding: 2px 3px;
     border-radius: 2px;
 }
+
+/* terms & conditions */
+#tc-content {
+    padding-top:0;
+    padding-left:0;
+}
+.tc-accept-form {
+    padding-bottom:30px;
+}
+#tc-preview {
+    box-sizing:border-box;
+    padding:40px;
+    width:800px;
+    overflow:auto;
+}
diff --git a/seahub/templates/sysadmin/sys_terms_admin.html b/seahub/templates/sysadmin/sys_terms_admin.html
index aca830c82d..9bc08b97fa 100644
--- a/seahub/templates/sysadmin/sys_terms_admin.html
+++ b/seahub/templates/sysadmin/sys_terms_admin.html
@@ -26,7 +26,7 @@
     <tr>
         <td>{{ tc.name }}</td>
         <td>{{ tc.version_number }}</td>
-        <td><a href="#" class="js-text" data-msg="{{ tc.text|linebreaksbr }}">{{ tc.text|truncatechars:50 }}</a></td>
+        <td><a href="#" class="js-text" data-msg="{{ tc.text }}">{{ tc.text|truncatechars:50 }}</a></td>
         <td>{{ tc.date_created|translate_seahub_time }}</td>
         <td>
             {% if tc.date_active %}
@@ -71,11 +71,12 @@
     <button type="submit" class="submit">{% trans "Submit" %}</button>
 </form>
 
-<div id="popup-msg" class="hide"></div>
+<div id="tc-preview" class="article hide"></div>
 
 {% endblock %}
 
 {% block extra_script %}
+<script type="text/javascript" src="{{MEDIA_URL}}js/editormd/lib/marked.min.js"></script>
 <script type="text/javascript">
 $('#add-btn').click(function() {
     $('#tc-form').modal();
@@ -143,11 +144,23 @@ addConfirmTo($('.remove-btn'), {
     'post': true // post request
 });
 
+var renderer = new marked.Renderer();
+// remove 'id' attribute for headings
+renderer.heading = function (text, level) {
+    return '<h' + level + '>' + text + '</h' + level + '>';
+};
+marked.setOptions({
+    renderer: renderer,
+    breaks: true, // keep linebreak
+    smartLists: true,
+    sanitize: true // Ignore any HTML that has been input
+});
+
 $('.js-text').click(function() {
-    $('#popup-msg').html($(this).attr('data-msg')).modal({
-        minWidth: 150
-    });
-    $('#simplemodal-container').css({'height':'auto'});
+    $('#tc-preview')
+    .html(marked($(this).attr('data-msg')))
+    .css({'max-height': $(window).height() - 120}) // 120: the vertical paddings of #tc-preview & the popup
+    .modal();
 
     return false;
 });
diff --git a/seahub/templates/termsandconditions/tc_accept_terms.html b/seahub/templates/termsandconditions/tc_accept_terms.html
index 9da3a86664..077c5a4020 100644
--- a/seahub/templates/termsandconditions/tc_accept_terms.html
+++ b/seahub/templates/termsandconditions/tc_accept_terms.html
@@ -3,14 +3,30 @@
 
 {% block wide_page_content %}
 <h1>{{ form.initial.terms.name|safe }}</h1>
-{{ form.errors }}
-<div id="tc-terms-html">
-    {{ form.initial.terms.text|safe|linebreaksbr }}
-</div>
-<form action="{% url 'tc_accept_page' %}" method="post">{% csrf_token %}
+<div id="tc-content" class="article"></div>
+<form action="{% url 'tc_accept_page' %}" method="post" class="tc-accept-form">{% csrf_token %}
     {{ form.terms }}
     {{ form.returnTo }}
     <button type="submit" class="submit">{% trans "Accept" %}</button>
     <a href="{% url 'auth_logout' %}" class="sf-btn-link">{% trans "Cancel" %}</a>
 </form>
 {% endblock %}
+
+{% block extra_script %}
+<script type="text/javascript" src="{{MEDIA_URL}}js/editormd/lib/marked.min.js"></script>
+<script type="text/javascript">
+var renderer = new marked.Renderer();
+// remove 'id' attribute for headings
+renderer.heading = function (text, level) {
+    return '<h' + level + '>' + text + '</h' + level + '>';
+};
+marked.setOptions({
+    renderer: renderer,
+    breaks: true, // keep linebreak
+    smartLists: true,
+    sanitize: true // Ignore any HTML that has been input
+});
+
+$('#tc-content').html(marked("{{ form.initial.terms.text|escapejs }}"));
+</script>
+{% endblock %}