diff --git a/package.json b/package.json
index 03af3ff4..4009b791 100644
--- a/package.json
+++ b/package.json
@@ -123,6 +123,7 @@
     "@types/masonry-layout": "^4.2.5",
     "@types/react-helmet": "^6.1.5",
     "@types/react-linkify": "^1.0.1",
+    "@types/react-syntax-highlighter": "^15.5.5",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
diff --git a/src/routes/setting/Widget.tsx b/src/routes/setting/Widget.tsx
index e493bfdc..54daecf5 100644
--- a/src/routes/setting/Widget.tsx
+++ b/src/routes/setting/Widget.tsx
@@ -21,31 +21,24 @@ export default function Widget() {
   return (
     <div className="flex flex-col justify-start items-start">
       <div className="text-gray-600 ">
-        Extending VoceChat by embedding vocechat widget SDK!
+        Extending VoceChat by embedding the vocechat widget SDK!
       </div>
       <label htmlFor="code" className="text-gray-500 text-sm mt-5">
         Code Example:
       </label>
-      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus}>
+      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
         {`<!-- put this code snippet into your html file -->\n<script \n  data-host-id="4" \n  data-origin="${location.origin}" \n  data-close-width="52" \n  data-close-height="52" \n  data-open-width="600" \n  data-open-height="800" \n  src="${location.origin}/widget.js" \n  async \n/>`}
       </SyntaxHighlighter>
       <div className="text-gray-500 text-sm mt-5 mb-2">
         Configuration Description:
       </div>
-      <div className="w-[700px] border border-solid border-gray-300">
-
-        <table className="min-w-full border table-auto">
+      <div className="w-[700px] border border-solid border-gray-300 rounded overflow-hidden">
+        <table className="min-w-full table-auto">
           <thead className="border-b bg-gray-50">
             <tr>
-              <th scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
-                Configuration Key
-              </th>
-              <th scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
-                Default Value
-              </th>
-              <th scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
-                Remarks
-              </th>
+              {["Parameter Key", "Default Value", "Remarks"].map(title => <th key={title} scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
+                {title}
+              </th>)}
             </tr>
           </thead>
           <tbody>
@@ -76,10 +69,12 @@ export default function Widget() {
             }
             ].map(row => <Row key={row.paramKey} {...row} />)}
           </tbody>
-          <tfoot className="border-t border-solid border-gray-200">
-            <div className="text-gray-400 px-5 py-3 text-sm">
-              * <code className="bg-gray-700 text-white px-1">data-</code> prefixed
-            </div>
+          <tfoot className="border-t border-solid border-gray-200" >
+            <tr>
+              <td colSpan={3} className="text-gray-400 px-5 py-3 text-sm">
+                * All the parameters are optional, and prefixed by <i className="bg-gray-700 text-white px-1">data-</i>
+              </td>
+            </tr>
           </tfoot>
         </table>
       </div>
diff --git a/yarn.lock b/yarn.lock
index 18a8d429..b282a19b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3249,6 +3249,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-syntax-highlighter@^15.5.5":
+  version "15.5.5"
+  resolved "https://mirrors.cloud.tencent.com/npm/@types%2freact-syntax-highlighter/-/react-syntax-highlighter-15.5.5.tgz#4d3b51f8956195f1f63360ff03f8822c5d74c516"
+  integrity sha512-QH3JZQXa2usAvJvSsdSUJ4Yu4j8ReuZpgRrEW+XP+Rmosbn425YshW9iGEb/pAARm8496axHhHUPRH3UmTiB6A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "18.0.20"
   resolved "https://mirrors.cloud.tencent.com/npm/@types%2freact/-/react-18.0.20.tgz#e4c36be3a55eb5b456ecf501bd4a00fd4fd0c9ab"