diff --git a/ir/ui/form.rng b/ir/ui/form.rng
index aca91af..8e0c3da 100755
--- a/ir/ui/form.rng
+++ b/ir/ui/form.rng
@@ -233,6 +233,7 @@
           <value>email</value>
           <value>float</value>
           <value>html</value>
+          <value>html_viewer</value>
           <value>image</value>
           <value>integer</value>
           <value>many2many</value>
diff --git a/modules/purchase_trade/process_documentation.py b/modules/purchase_trade/process_documentation.py
index 77c9814..87b39cf 100644
--- a/modules/purchase_trade/process_documentation.py
+++ b/modules/purchase_trade/process_documentation.py
@@ -31,9 +31,12 @@ class ProcessDocumentation(ModelSingleton, ModelSQL, ModelView):
 
 
 def _html_content():
-        return HTML_TEMPLATE % {
-            'content': _documentation_content(),
-            }
+    document = HTML_TEMPLATE % {
+        'content': _documentation_content(),
+        }
+    return IFRAME_TEMPLATE % {
+        'document': html.escape(document, quote=True),
+        }
 
 
 def _documentation_content():
@@ -191,8 +194,54 @@ def _render_table(lines, current_file):
     return ''.join(output)
 
 
-HTML_TEMPLATE = '''<div style="color: #1f2933; font-family: Arial, sans-serif;
-line-height: 1.5; padding: 24px;">
-    %(content)s
-</div>
+IFRAME_TEMPLATE = '''<iframe srcdoc="%(document)s"
+    style="border: 0; height: calc(100vh - 160px); min-height: 760px; width: 100%%;"
+    title="Tradon Processes"></iframe>
+'''
+
+
+HTML_TEMPLATE = '''<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <style>
+        body {
+            color: #1f2933;
+            font-family: Arial, sans-serif;
+            line-height: 1.5;
+            margin: 0;
+            padding: 24px;
+        }
+        a {
+            color: #0b63ce;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        table {
+            border-collapse: collapse;
+            margin: 16px 0;
+            width: 100%%;
+        }
+        th,
+        td {
+            border: 1px solid #d7dde5;
+            padding: 8px 10px;
+            text-align: left;
+            vertical-align: top;
+        }
+        th {
+            background: #f3f6f9;
+        }
+        img {
+            height: auto;
+            max-width: 100%%;
+        }
+    </style>
+</head>
+<body>
+    <main>%(content)s</main>
+</body>
+</html>
 '''
diff --git a/modules/purchase_trade/view/process_documentation_form.xml b/modules/purchase_trade/view/process_documentation_form.xml
index 30d1980..d29dc2e 100644
--- a/modules/purchase_trade/view/process_documentation_form.xml
+++ b/modules/purchase_trade/view/process_documentation_form.xml
@@ -1,5 +1,5 @@
 <form col="4">
     <group id="documentation" colspan="4" col="4">
-        <field name="content" widget="html" height="900" colspan="4"/>
+        <field name="content" widget="html_viewer" height="900" colspan="4"/>
     </group>
 </form>
