diff --git a/docker/web/app.py b/docker/web/app.py
index 32fc9420..9637ea11 100644
--- a/docker/web/app.py
+++ b/docker/web/app.py
@@ -3,51 +3,46 @@ from flask import Flask, render_template
 app = Flask(__name__)
 
 
-@app.route('/')
-def welcome():
-    """Top welcome page."""
-    template = 'welcome.html'
-
-    values = {
-        "aa": "bjc"
-    }
-
-    return render_template(template, **values)
-
-
-@app.route('/builder', methods=['POST', 'GET'])
+@app.route('/', methods=['POST', 'GET'])
 def builder():
-    """Builder page with python input."""
+    """One page app."""
     import os
     import subprocess
     from flask import request
 
-    template = 'builder.html'
+    template = 'app.html'
     values = {}
     diag_folder = "static/diagrams/"
 
-    code = request.form.get('code')
-    if code:
+    diagrams_data = request.form.get('diagrams_data')
+    if diagrams_data:
         # clean the directory
         _, _, filenames = next(os.walk(diag_folder))
         for one_file in filenames:
           os.remove('%s%s' % (diag_folder, one_file))
-        # write the code in a file and execute
+        # write the diagrams_data in a file and execute
         with open("%stemp_code.py" % diag_folder, "w") as f:
-            f.write(code)
+            f.write(diagrams_data)
         result = subprocess.run(["python3", "temp_code.py"], cwd=diag_folder, capture_output=True)
-        # TODO get the result if there's error to display on the template
-        print('stdout: ', result.stdout)
-        print('stderr: ', result.stderr)
         # delete the temp file
         os.remove("%stemp_code.py" % diag_folder)
-        # get the pic to display
-        _, _, filenames = next(os.walk(diag_folder))
-        pic_name = filenames[0]
-        values.update({
-            "code": code,
-            "pic_name": pic_name,
-        })
+        # if there's error display them on the template
+        if result.stderr:
+          error_msg = result.stderr.decode("utf-8")
+          # clean up the error message
+          error_msg = error_msg.replace('File "temp_code.py", ', '')
+          values.update({
+              "diagrams_data": diagrams_data,
+              "error": error_msg
+          })
+        else:
+          # get the pic to display
+          _, _, filenames = next(os.walk(diag_folder))
+          pic_name = filenames[0]
+          values.update({
+              "diagrams_data": diagrams_data,
+              "pic_name": pic_name,
+          })
 
     return render_template(template, **values)
 
diff --git a/docker/web/static/diagrams.css b/docker/web/static/diagrams.css
new file mode 100644
index 00000000..84fa4421
--- /dev/null
+++ b/docker/web/static/diagrams.css
@@ -0,0 +1,6 @@
+img {
+  margin-bottom: 0px;
+}
+.icon {
+    width: 100px;
+}
diff --git a/docker/web/static/diagrams.js b/docker/web/static/diagrams.js
new file mode 100644
index 00000000..eaeb3637
--- /dev/null
+++ b/docker/web/static/diagrams.js
@@ -0,0 +1,30 @@
+jQuery(document).ready(function () {
+
+    var example_1_btn = jQuery('#example_1_btn');
+    var example_2_btn = jQuery('#example_2_btn');
+    var example_3_btn = jQuery('#example_3_btn');
+    var more_example_btn = jQuery('#more_example_btn');
+
+    var diagrams_form = jQuery('#diagrams_form');
+
+    var diagrams_data_textarea = jQuery('#diagrams_data');
+
+    function InsertDiagramsText(text) {
+        diagrams_data_textarea.val(text);
+        diagrams_form.submit();
+    }
+
+    example_1_btn.click(function(){
+      InsertDiagramsText(jQuery("#example_1_text").html().trim());
+    });
+    example_2_btn.click(function(){
+      InsertDiagramsText(jQuery("#example_2_text").html().trim());
+    });
+    example_3_btn.click(function(){
+      InsertDiagramsText(jQuery("#example_3_text").html().trim());
+    });
+    more_example_btn.click(function(){
+      window.open("https://diagrams.mingrammer.com/docs/getting-started/examples", "_blank");
+    });
+
+});
diff --git a/docker/web/static/diagrams/grouped_workersぽぽ.png b/docker/web/static/diagrams/grouped_workersぽぽ.png
deleted file mode 100644
index 86492dbf..00000000
Binary files a/docker/web/static/diagrams/grouped_workersぽぽ.png and /dev/null differ
diff --git a/docker/web/templates/app.html b/docker/web/templates/app.html
new file mode 100644
index 00000000..4a9dfde8
--- /dev/null
+++ b/docker/web/templates/app.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Diagrams On Web</title>
+    <meta name="description" content="Build Diagram from code in your browser." />
+    <meta name="keywords" content="Diagrams web" />
+  <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
+  <link rel="stylesheet" type="text/css" href="static/diagrams.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  </head>
+  <body id="{% block body_id %}normal_body{% endblock %}">
+
+    <a href="https://diagrams.mingrammer.com/"><img src="static/diagrams.png" alt="Diagrams" class="icon" /></a>
+    <input type="button" value="Example 1" id="example_1_btn" />
+    <input type="button" value="Example 2" id="example_2_btn" />
+    <input type="button" value="Example 3" id="example_3_btn" />
+    <input type="button" value="More example" id="more_example_btn" />
+    <form action="" method="POST" id="diagrams_form">
+      <textarea name="diagrams_data" rows="8" cols="80" id="diagrams_data">{{diagrams_data}}</textarea>
+      <input type="submit" value="Build">
+    </form>
+    {% if error %}
+      <h4>ERROR</h4>
+      <pre><code>{{error}}</code></pre>
+    {% else %}
+      <img src="/static/diagrams/{{pic_name}}" alt="">
+    {% endif %}
+    <script id="example_1_text" type="bogus">
+      from diagrams import Diagram
+from diagrams.aws.compute import EC2
+from diagrams.aws.database import RDS
+from diagrams.aws.network import ELB
+
+with Diagram("Grouped Workers", show=False, direction="TB"):
+    ELB("lb") >> [EC2("worker1"),
+                  EC2("worker2"),
+                  EC2("worker3"),
+                  EC2("worker4"),
+                  EC2("worker5")] >> RDS("events")
+    </script>
+    <script id="example_2_text" type="bogus">
+      from diagrams import Cluster, Diagram
+from diagrams.gcp.analytics import BigQuery, Dataflow, PubSub
+from diagrams.gcp.compute import AppEngine, Functions
+from diagrams.gcp.database import BigTable
+from diagrams.gcp.iot import IotCore
+from diagrams.gcp.storage import GCS
+
+with Diagram("Message Collecting", show=False):
+    pubsub = PubSub("pubsub")
+
+    with Cluster("Source of Data"):
+        [IotCore("core1"),
+         IotCore("core2"),
+         IotCore("core3")] >> pubsub
+
+    with Cluster("Targets"):
+        with Cluster("Data Flow"):
+            flow = Dataflow("data flow")
+
+        with Cluster("Data Lake"):
+            flow >> [BigQuery("bq"),
+                     GCS("storage")]
+
+        with Cluster("Event Driven"):
+            with Cluster("Processing"):
+                flow >> AppEngine("engine") >> BigTable("bigtable")
+
+            with Cluster("Serverless"):
+                flow >> Functions("func") >> AppEngine("appengine")
+
+    pubsub >> flow
+    </script>
+    <script id="example_3_text" type="bogus">
+      from diagrams import Cluster, Diagram
+from diagrams.onprem.analytics import Spark
+from diagrams.onprem.compute import Server
+from diagrams.onprem.database import PostgreSQL
+from diagrams.onprem.inmemory import Redis
+from diagrams.onprem.logging import Fluentd
+from diagrams.onprem.monitoring import Grafana, Prometheus
+from diagrams.onprem.network import Nginx
+from diagrams.onprem.queue import Kafka
+
+with Diagram("Advanced Web Service with On-Premise", show=False):
+    ingress = Nginx("ingress")
+
+    metrics = Prometheus("metric")
+    metrics << Grafana("monitoring")
+
+    with Cluster("Service Cluster"):
+        grpcsvc = [
+            Server("grpc1"),
+            Server("grpc2"),
+            Server("grpc3")]
+
+    with Cluster("Sessions HA"):
+        master = Redis("session")
+        master - Redis("replica") << metrics
+        grpcsvc >> master
+
+    with Cluster("Database HA"):
+        master = PostgreSQL("users")
+        master - PostgreSQL("slave") << metrics
+        grpcsvc >> master
+
+    aggregator = Fluentd("logging")
+    aggregator >> Kafka("stream") >> Spark("analytics")
+
+    ingress >> grpcsvc >> aggregator
+    </script>
+    <p style="text-align:center">Made with ♥ and <a href="https://oxal.org/projects/sakura/" target="_blank"><g-emoji class="g-emoji" alias="cherry_blossom" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f338.png"><img class="emoji" alt="cherry_blossom" src="https://github.githubassets.com/images/icons/emoji/unicode/1f338.png" width="20" height="20"></g-emoji> Sakura CSS</a></p>
+  </body>
+  <script type="text/javascript" src="static/diagrams.js"></script>
+</html>
diff --git a/docker/web/templates/builder.html b/docker/web/templates/builder.html
deleted file mode 100644
index 2afd5e20..00000000
--- a/docker/web/templates/builder.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<form action="" method="POST">
-  <textarea name="code" rows="8" cols="80">{{code}}</textarea>
-  <input type="submit" value="Build">
-</form>
-
-<img src="/static/diagrams/{{pic_name}}" alt="">
diff --git a/docker/web/templates/welcome.html b/docker/web/templates/welcome.html
deleted file mode 100644
index 65ea2f43..00000000
--- a/docker/web/templates/welcome.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<img src="static/diagrams.png" alt="Diagrams">
-
-You can use the builder <a href="/builder">Here</a>