diff --git a/mkdocs/acelements.md b/mkdocs/acelements.md
index 6038ad1..e7b037b 100644
--- a/mkdocs/acelements.md
+++ b/mkdocs/acelements.md
@@ -345,7 +345,7 @@ ACSubmit ( *name* <small>\[</small> , *value* <small>\]</small> <small>\[</small
 
 ACText ( *name* <small>\[</small> , *value* <small>\]</small> <small>\[</small> , *style* <small>\]</small> )
 
-!!! hint "Declaration macro usage"
+!!! memo "Declaration macro usage"
     For example, *AutoConnectText* can be declared using macros.
     ```cpp
     AutoConnectText caption("caption", "hello, world", "color:blue;")
diff --git a/mkdocs/acjson.md b/mkdocs/acjson.md
index 9c44d10..cd4cae2 100644
--- a/mkdocs/acjson.md
+++ b/mkdocs/acjson.md
@@ -1,100 +1,22 @@
 ## Describe custom Web pages with JSON
 
-You can embed custom Web pages written in JSON into AutoConnect without declaring AutoConnectAux &amp; AutoConnectElements in sketches. Custom Web page declaration in JSON can be included in the sketch in advance as the fixed string, or it can be stored in the external file such as SPIFFS for stream loading. You can also load and save AutoConnectElements objects individually.[^1]
-
-<div class="codehilite" style="overflow:auto;width:400px;height:400px;"><pre>
-{
-  "title": "MQTT Setting",
-  "uri": "/mqtt_setting",
-  "menu": true,
-  "element": [
-    {
-      "name": "header",
-      "type": "ACText",
-      "value": "<h2>MQTT broker settings</h2>",
-      "style": "text-align:center;color:#2f4f4f;"
-    },
-    {
-      "name": "caption",
-      "type": "ACText",
-      "value": "Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak",
-      "style": "font-family:serif;color:#4682b4;"
-    },
-    {
-      "name": "mqttserver",
-      "type": "ACInput",
-      "value": "",
-      "placeholder": "MQTT broker server",
-      "label": "Server"
-    },
-    {
-      "name": "channelid",
-      "type": "ACInput",
-      "value": "",
-      "label": "Channel ID"
-    },
-    {
-      "name": "userkey",
-      "type": "ACInput",
-      "value": "NRTFYGJ6TJFGX4RC",
-      "label": "User Key"
-    },
-    {
-      "name": "apikey",
-      "type": "ACInput",
-      "value": "",
-      "label": "API Key"
-    },
-    {
-      "name": "period",
-      "type": "ACRadio",
-      "label": "Update period",
-      "value": [
-        "30 sec.",
-        "60 sec.",
-        "180 sec."
-      ],
-      "arrange": "vertical",
-      "checked": 1
-    },
-    {
-      "name": "newline",
-      "type": "ACElement",
-      "value": "<hr>"
-    },
-    {
-      "name": "uniqueid",
-      "type": "ACCheckbox",
-      "value": "unique",
-      "label": "Use APID unique",
-      "checked": false
-    },
-    {
-      "name": "hostname",
-      "type": "ACInput",
-      "label": "ESP host name",
-      "value": ""
-    },
-    {
-      "name": "save",
-      "type": "ACSubmit",
-      "value": "Save&Start",
-      "uri": "/mqtt_save"
-    },
-    {
-      "name": "discard",
-      "type": "ACSubmit",
-      "value": "Discard",
-      "uri": "/"
-    }
-  ]
-}
-```
-</pre></div>
+You can embed custom Web pages written in [**JSON**](https://www.json.org/index.html) into AutoConnect without declaring AutoConnectAux &amp; AutoConnectElements in sketches. Custom Web page declaration in JSON can be included in the sketch in advance as the fixed string, or it can be stored in the external file such as SPIFFS for stream loading. You can also load and save AutoConnectElements objects individually.[^1]
 
 [^1]:Loading and saving AutoConnect parameters adopt this method.
 
+By providing the following JSON document to AutoConnect, you can include the custom Web page as the bellow:
+
+<div style="float:left;width:50%;height:470px;overflow:auto"><img src="./images/ac_json.png"></div>
+<img style="margin-left:30px;width:40%;height:470px;" src="./images/ac_mqtt_setting.png">
+
+!!! note "Order of elements on a custom Web page"
+    The order in which AutoConnectElements are arranged on the custom Web page is the order described in JSON.
+
 !!! caution "Need ArduinoJson v5"
     To process the AutoConnectAux &amp; AutoConnectElements written in the JSON is you need to install the [ArduinoJson version 5](https://arduinojson.org/v5/doc/installation/) library.
 
-The order in which AutoConnectElements are arranged on the custom Web page is the order described in JSON.
\ No newline at end of file
+## JSON objects &amp; elements for the custom Web page
+
+### JSON document structure for AutoConnectAux
+
+
diff --git a/mkdocs/css/paragraph.css b/mkdocs/css/paragraph.css
index bea77fc..2d42d1b 100644
--- a/mkdocs/css/paragraph.css
+++ b/mkdocs/css/paragraph.css
@@ -19,15 +19,22 @@
 }
 
 .md-typeset .codehilitetable .linenodiv {
-  background-color: #364549 !important;
+  background-color: #222 !important;
 }
 
 .md-typeset .codehilitetable .linenodiv pre {
-  background-color: #364549 !important;
+  background-color: #222 !important;
   color: #aaa;
   margin: 0;
 }
 
+.md-typeset .codehilitetable .md-clipboard:before {
+  color: rgba(240,240,240,.8);
+}
+.md-typeset .codehilitetable .md-clipboard:hover:before {
+  color: rgba(102,217,224,1);
+}
+
 .apidef {
   display: inline-block;
   width: 100px;
diff --git a/mkdocs/images/ac_json.png b/mkdocs/images/ac_json.png
new file mode 100644
index 0000000..96c5660
Binary files /dev/null and b/mkdocs/images/ac_json.png differ
diff --git a/mkdocs/images/ac_mqtt_setting.png b/mkdocs/images/ac_mqtt_setting.png
new file mode 100644
index 0000000..632d673
Binary files /dev/null and b/mkdocs/images/ac_mqtt_setting.png differ