diff --git a/httprunner/__about__.py b/httprunner/__about__.py
index e44d2253..580a87d6 100644
--- a/httprunner/__about__.py
+++ b/httprunner/__about__.py
@@ -1,7 +1,7 @@
 __title__ = 'HttpRunner'
 __description__ = 'One-stop solution for HTTP(S) testing.'
 __url__ = 'https://github.com/HttpRunner/HttpRunner'
-__version__ = '1.3.9'
+__version__ = '1.3.10'
 __author__ = 'debugtalk'
 __author_email__ = 'mail@debugtalk.com'
 __license__ = 'MIT'
diff --git a/httprunner/report.py b/httprunner/report.py
index e853324e..7fe978ff 100644
--- a/httprunner/report.py
+++ b/httprunner/report.py
@@ -90,7 +90,9 @@ def render_html_report(summary, html_report_name=None, html_report_template=None
         os.makedirs(report_dir_path)
 
     for record in summary.get("records"):
-        record["meta_data"] = make_json_serializable(record["meta_data"])
+        meta_data = record['meta_data']
+        stringify_body(meta_data, 'request')
+        stringify_body(meta_data, 'response')
 
     with io.open(html_report_template, "r", encoding='utf-8') as fp_r:
         template_content = fp_r.read()
@@ -103,26 +105,24 @@ def render_html_report(summary, html_report_name=None, html_report_template=None
 
     return report_path
 
-def make_json_serializable(raw_json):
-    serializable_json = {}
-    for key, value in raw_json.items():
-        if isinstance(value, bytes):
-            value = value.decode("utf-8")
-        elif isinstance(value, CaseInsensitiveDict):
-            value = dict(value)
-        elif not isinstance(value, (basestring, numeric_types, Iterable)):
-            # class instance, e.g. MultipartEncoder()
-            value = repr(value)
+def stringify_body(meta_data, request_or_response):
+    headers = meta_data['{}_headers'.format(request_or_response)]
+    body = meta_data.get('{}_body'.format(request_or_response))
 
-        serializable_json[key] = escape(value)
+    if isinstance(body, CaseInsensitiveDict):
+        body = json.dumps(dict(body), ensure_ascii=False)
 
-    keyorder = ["url", "method", "request_headers", "request_body", "request_time",
-        "status_code", "response_headers", "response_body",
-        "content_size", "response_time(ms)", "elapsed(ms)"]
-    serializable_ordered_json = OrderedDict(
-        sorted(serializable_json.items(), key=lambda x:keyorder.index(x[0])))
+    elif isinstance(body, (dict, list)):
+        body = json.dumps(body, ensure_ascii=False)
 
-    return json.dumps(serializable_ordered_json, indent=2, ensure_ascii=False)
+    elif isinstance(body, bytes):
+        body = body.decode("utf-8")
+
+    elif not isinstance(body, (basestring, numeric_types, Iterable)):
+        # class instance, e.g. MultipartEncoder()
+        body = repr(body)
+
+    meta_data['{}_body'.format(request_or_response)] = body
 
 
 class HtmlTestResult(unittest.TextTestResult):
@@ -138,7 +138,6 @@ class HtmlTestResult(unittest.TextTestResult):
         self.records.append({
             'name': test.shortDescription(),
             'status': status,
-            'response_time_ms': test.meta_data.get("response_time(ms)", 0),
             'attachment': attachment,
             "meta_data": test.meta_data
         })
diff --git a/httprunner/templates/default_report_template.html b/httprunner/templates/default_report_template.html
index 96ec3f8c..31ae6429 100644
--- a/httprunner/templates/default_report_template.html
+++ b/httprunner/templates/default_report_template.html
@@ -86,10 +86,10 @@
       margin: 70px auto;
       padding: 20px;
       background: #fff;
-      border-radius: 5px;
-      width: 30%;
+      border-radius: 10px;
+      width: 50%;
       position: relative;
-      transition: all 5s ease-in-out;
+      transition: all 3s ease-in-out;
     }
 
     .popup h2 {
@@ -111,7 +111,7 @@
       color: #06d85f;
     }
     .popup .content {
-      max-height: 30%;
+      max-height: 80%;
       overflow: auto;
       text-align: left;
     }
@@ -180,28 +180,108 @@
       <tr id="record_{{loop.index}}">
         <th class="{{record.status}}" style="width:5em;">{{record.status}}</td>
         <td>{{record.name}}</td>
-        <td style="text-align:center;width:6em;">{{ '%0.1f'| format(record.response_time_ms|float) }} ms</td>
+        <td style="text-align:center;width:6em;">{{ record.meta_data["response_time(ms)"] }} ms</td>
         <td class="detail">
 
-            <a class="button" href="#popup_log_{{loop.index}}">log</a>
-            <div id="popup_log_{{loop.index}}" class="overlay">
-              <div class="popup">
-                <h2>Request and Response data</h2>
-                <a class="close" href="#record_{{loop.index}}">&times;</a>
-                <div class="content"><pre>{{ record.meta_data | safe }}</pre></div>
+          <a class="button" href="#popup_log_{{loop.index}}">log</a>
+          <div id="popup_log_{{loop.index}}" class="overlay">
+            <div class="popup">
+              <h2>Request and Response data</h2>
+              <a class="close" href="#record_{{loop.index}}">&times;</a>
+
+              <!-- <div class="content"><pre>{{ record.meta_data | safe }}</pre></div> -->
+
+              <div class="content">
+                <h3>Request:</h3>
+                <div style="overflow: auto">
+                  <table>
+                    <tr>
+                      <th>url</th>
+                      <td>{{ record.meta_data.url }}</td>
+                    </tr>
+                    <tr>
+                      <th>method</th>
+                      <td>{{ record.meta_data.method }}</td>
+                    </tr>
+                    <tr>
+                      <th>headers</th>
+                      <td>
+                        {% for key, value in record.meta_data.request_headers.items() %}
+                        <div>
+                          <strong>{{ key }}</strong>: {{ value | safe }}
+                        </div>
+                        {% endfor %}
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>body</th>
+                      <td>
+                         <pre>{{ record.meta_data.request_body | safe }}</pre>
+                      </td>
+                    </tr>
+                  </table>
+                </div>
+
+                <h3>Response:</h3>
+                <div style="overflow: auto">
+                  <table>
+                    <tr>
+                      <th>status_code</th>
+                      <td>
+                        {{ record.meta_data.status_code }}
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>headers</th>
+                      <td>
+                          {% for key, value in record.meta_data.response_headers.items() %}
+                          <div>
+                            <strong>{{ key }}</strong>: {{ value | safe }}
+                          </div>
+                          {% endfor %}
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>body</th>
+                      <td>
+                        <pre>{{ record.meta_data.response_body | safe }}</pre>
+                      </td>
+                    </tr>
+                  </table>
+                </div>
+
+                <h3>Statistics:</h3>
+                <div style="overflow: auto">
+                  <table>
+                    <tr>
+                        <th>content_size(bytes)</th>
+                        <td>{{ record.meta_data["content_size"] }}</td>
+                      </tr>
+                    <tr>
+                      <th>response_time(ms)</th>
+                      <td>{{ record.meta_data["response_time(ms)"] }}</td>
+                    </tr>
+                    <tr>
+                      <th>elapsed(ms)</th>
+                      <td>{{ record.meta_data["elapsed(ms)"] }}</td>
+                    </tr>
+                  </table>
+                </div>
+
               </div>
             </div>
+          </div>
 
-            {% if record.attachment %}
-              <a class="button" href="#popup_attachment_{{loop.index}}">traceback</a>
-              <div id="popup_attachment_{{loop.index}}" class="overlay">
-                <div class="popup">
-                  <h2>Traceback Message</h2>
-                  <a class="close" href="#record_{{loop.index}}">&times;</a>
-                  <div class="content"><pre>{{ record.attachment }}</pre></div>
-                </div>
+          {% if record.attachment %}
+            <a class="button" href="#popup_attachment_{{loop.index}}">traceback</a>
+            <div id="popup_attachment_{{loop.index}}" class="overlay">
+              <div class="popup">
+                <h2>Traceback Message</h2>
+                <a class="close" href="#record_{{loop.index}}">&times;</a>
+                <div class="content"><pre>{{ record.attachment }}</pre></div>
               </div>
-            {% endif %}
+            </div>
+          {% endif %}
 
         </td>
       </tr>