diff --git a/app/assets/javascripts/tutorial.js b/app/assets/javascripts/tutorial.js
new file mode 100644
index 0000000..1328c4a
--- /dev/null
+++ b/app/assets/javascripts/tutorial.js
@@ -0,0 +1,74 @@
+(function(){
+  "use strict";
+
+  // NOTE: should move to common space if this filter used another place
+  Vue.filter('to_json', function (value) {
+      return JSON.stringify(value);
+  })
+
+  $(function(){
+    if($('#chapter1').length === 0) return;
+
+    new Vue({
+      el: "#chapter1",
+      data: {
+        "logs": [],
+        "payloads": [
+          {
+            "path": "/debug.foo",
+            "data" : {
+              "message": "test message", // NOTE: "'" will break curl command
+            }
+          },
+          {
+            "path": "/debug.bar",
+            "data" : {
+              "my_number": 42,
+              "my_array": [1, 2, 3]
+            }
+          },
+          {
+            "path": "/xxxxx",
+            "data" : {
+              "xx": "will be unmatched"
+            }
+          },
+          {
+            "path": "/slash/convert/to/dot",
+            "data" : {
+              "greeting": "hello"
+            }
+          }
+        ]
+      },
+
+      created: function(){
+        this.fetchLogs();
+      },
+
+      methods: {
+        fetchLogs: function() {
+          var self = this;
+          new Promise(function(resolve, reject) {
+            $.getJSON("/tutorials/log_tail", resolve).fail(reject);
+          }).then(function(logs){
+            self.logs = logs;
+          });
+        },
+        sendRequest: function(payload){
+          new Promise(function(resolve, reject) {
+            $.ajax({
+              url: "/tutorials/request_fluentd",
+              data: JSON.stringify(payload),
+              contentType: "application/json",
+              dataType: "json",
+              type: "POST"
+            }).done(resolve).fail(reject);
+          })["catch"](function(e){
+            console.error(e);
+          });
+        }
+      }
+    });
+  });
+})();
diff --git a/app/controllers/tutorials_controller.rb b/app/controllers/tutorials_controller.rb
index 558b491..3caa40d 100644
--- a/app/controllers/tutorials_controller.rb
+++ b/app/controllers/tutorials_controller.rb
@@ -1,14 +1,32 @@
 class TutorialsController < ApplicationController
   before_action :find_fluentd
+  helper_method :tutorial_ready?
 
   def index
     @log = @fluentd.agent.log_tail.reverse if @fluentd
   end
 
+  def chapter1
+  end
+
+  def log_tail
+    @logs = @fluentd.agent.log_tail.reverse if @fluentd
+    render json: @logs
+  end
+
+  def request_fluentd
+    HTTPClient.post("http://localhost:8888#{params[:path]}", json: params[:data].to_json)
+    render nothing: true, status: 204
+  end
+
   private
 
   def find_fluentd
     # NOTE: use first fluentd for tutorial
     @fluentd = Fluentd.first
   end
+
+  def tutorial_ready?
+    @fluentd && @fluentd.agent.running?
+  end
 end
diff --git a/app/models/fluentd.rb b/app/models/fluentd.rb
index b59d609..e33e358 100644
--- a/app/models/fluentd.rb
+++ b/app/models/fluentd.rb
@@ -99,6 +99,10 @@ class Fluentd < ActiveRecord::Base
           type debug_agent
           port 24230
         </source>
+
+        <match debug.*>
+          type stdout
+        </match>
       XML
     end
   end
diff --git a/app/views/tutorials/chapter1.html.erb b/app/views/tutorials/chapter1.html.erb
new file mode 100644
index 0000000..0d3b040
--- /dev/null
+++ b/app/views/tutorials/chapter1.html.erb
@@ -0,0 +1,24 @@
+<% # NOTE: Using .erb is for styling <pre> %>
+
+<% page_title t(".page_title") %>
+
+<p>
+<%= t ".description" %>
+</p>
+
+<div id="chapter1">
+  <form>
+    <p v-repeat="payloads">
+      <input type="button" class="btn btn-default" v-on="click: sendRequest($data)" value="<%= t ".send" %>" />
+      <code>
+        $ curl -X POST http://localhost:8888{{ path }} -F 'json={{ data | to_json }}'
+      </code>
+    </p>
+  </form>
+
+  <pre>
+<button class="btn btn-primary" v-on="click:fetchLogs"><%= t ".reload_log" %></button>
+
+<span v-repeat="logs">{{ $value }}
+</span></pre>
+</div>
diff --git a/app/views/tutorials/index.html.erb b/app/views/tutorials/index.html.erb
deleted file mode 100644
index e5265f9..0000000
--- a/app/views/tutorials/index.html.erb
+++ /dev/null
@@ -1,45 +0,0 @@
-<% # NOTE: Using .erb is workaround for stripping \n and white space by Haml. %>
-<% page_title t(".page_title") %>
-
-<h2> Hello, world!  </h2>
-
-<ol>
-  <li>
-    <% if @fluentd %>
-      <%= icon('fa-check text text-success') %>
-      <%= t('.step1') %>
-    <% else %>
-      <%= icon('fa-warning text text-danger') %>
-      <%= link_to t('.step1'), fluentd_index_path %>
-    <% end %>
-  </li>
-  <li>
-    <% if @fluentd && @fluentd.agent.running? %>
-      <%= icon('fa-check text text-success') %>
-      <%= t('.step2') %>
-    <% else %>
-      <%= icon('fa-warning text text-danger') %>
-      <% if @fluentd %>
-        <%= link_to t('.step2'), fluentd_agent_path(@fluentd) %>
-      <% else %>
-        <%= t('.step2') %>
-      <% end %>
-    <% end %>
-  </li>
-</ol>
-
-<% if @fluentd && @fluentd.agent.running? %>
-  TODO: To Be Continued..
-<% end %>
-
-
-<h2>TODO: log(最新30件）</h2>
-
-<% if @log %>
-<pre>
-<% @log.each do |l| %>
-<%= l %>
-<% end %>
-</pre>
-<% end %>
-
diff --git a/app/views/tutorials/index.html.haml b/app/views/tutorials/index.html.haml
new file mode 100644
index 0000000..5e9840e
--- /dev/null
+++ b/app/views/tutorials/index.html.haml
@@ -0,0 +1,26 @@
+- page_title t(".page_title")
+
+%h2 
+  Hello, world!
+
+%ol
+  %li
+    - if @fluentd
+      = icon('fa-check text text-success')
+      = t('.step1')
+    - else
+      = icon('fa-warning text text-danger')
+      = link_to t('.step1'), fluentd_index_path
+  %li
+    - if @fluentd && @fluentd.agent.running?
+      = icon('fa-check text text-success')
+      = t('.step2')
+    - else
+      = icon('fa-warning text text-danger')
+      - if @fluentd
+        = link_to t('.step2'), fluentd_agent_path(@fluentd)
+      - else
+        = t('.step2')
+
+- if tutorial_ready?
+  = link_to t('.start_tutorial'), tutorials_chapter1_path
diff --git a/config/locales/translation_en.yml b/config/locales/translation_en.yml
index 95a9d29..bd41ae8 100644
--- a/config/locales/translation_en.yml
+++ b/config/locales/translation_en.yml
@@ -108,11 +108,18 @@ en:
   tutorials:
     common: &tutorials_common
       <<: *terms
-      step1: "Setup fluentd"
-      step2: "Start fluentd"
     index:
       <<: *tutorials_common
+      step1: "Setup fluentd"
+      step2: "Start fluentd"
       page_title: Tutorial
+      start_tutorial: Start tutorial
+    chapter1:
+      <<: *tutorials_common
+      page_title: "Tutorial | Receive data via in_http"
+      reload_log: Reload fluend log
+      description: You can send an arbitrary JSON data via HTTP. URL path will be tag name.
+      send: Send
 
   messages:
     need_restart: need to restart fluentd-ui
diff --git a/config/locales/translation_ja.yml b/config/locales/translation_ja.yml
index d46cc10..e89229a 100644
--- a/config/locales/translation_ja.yml
+++ b/config/locales/translation_ja.yml
@@ -108,11 +108,18 @@ ja:
   tutorials:
     common: &tutorials_common
       <<: *terms
-      step1: "fluentdをセットアップ"
-      step2: "fluentdを起動"
     index:
       <<: *tutorials_common
       page_title: チュートリアル
+      step1: "fluentdをセットアップ"
+      step2: "fluentdを起動"
+      start_tutorial: "チュートリアルを始める"
+    chapter1:
+      <<: *tutorials_common
+      page_title: "チュートリアル | in_httpでデータを受け取る"
+      reload_log: fluentdのログを更新
+      description: fluentdに任意のデータをJSONで送ることができます。URLのパスがタグの名前になります。
+      send: 送信
 
   messages:
     need_restart: fluentd-uiの再起動が必要です
diff --git a/config/routes.rb b/config/routes.rb
index 95c42e4..cdb8d33 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -36,6 +36,8 @@ Rails.application.routes.draw do
 
   namespace :tutorials do
     get "/" => :index
-    get "step1"
+    get "chapter1"
+    get "log_tail"
+    post "request_fluentd"
   end
 end