diff --git a/app/javascript/packs/transport_section.js b/app/javascript/packs/transport_section.js
new file mode 100644
index 0000000..a57b4c5
--- /dev/null
+++ b/app/javascript/packs/transport_section.js
@@ -0,0 +1,71 @@
+'use strict'
+import 'lodash/lodash'
+
+import ConfigField from './config_field'
+
+$(document).ready(() => {
+  new Vue({
+    el: '#transport-section',
+    components: {
+      "config-field": ConfigField
+    },
+    props: [
+      "transportType",
+    ],
+    propsData: {
+      "transportType": "tcp"
+    },
+    data: function() {
+      return {
+        pluginType: null,
+        pluginName: null,
+        options: ["tcp", "tls"],
+        commonOptions: [],
+        advancedOptions: []
+
+      }
+    },
+    computed: {
+      token: function() {
+        return Rails.csrfToken()
+      }
+    },
+    filters: {
+      toUpper: function(value) {
+        return _.toUpper(value)
+      }
+    },
+    beforeMount: function() {
+      this.pluginType = this.$el.attributes.pluginType.nodeValue
+      this.pluginName = this.$el.attributes.pluginName.nodeValue
+    },
+    mounted: function() {
+    },
+    methods: {
+      onChange: function() {
+        console.log(this.pluginType, this.pluginName, this.transportType)
+        this.updateSection()
+      },
+
+      updateSection: function() {
+        if (this.transportType === "tcp") {
+          return
+        }
+        $.ajax({
+          method: "GET",
+          url: "/api/config_definitions",
+          headers: {
+            'X-CSRF-Token': this.token
+          },
+          data: {
+            type: this.pluginType,
+            name: this.pluginName
+          }
+        }).then((data) => {
+          this.commonOptions = data.transport.commonOptions
+          this.advancedOptions = data.transport.advancedOptions
+        })
+      }
+    }
+  })
+})
diff --git a/app/views/fluentd/settings/in_forward/_form.html.haml b/app/views/fluentd/settings/in_forward/_form.html.haml
index 6ea3741..e1f00a8 100644
--- a/app/views/fluentd/settings/in_forward/_form.html.haml
+++ b/app/views/fluentd/settings/in_forward/_form.html.haml
@@ -5,6 +5,8 @@
   - @setting.common_options.each do |key|
     = f.field(key)
 
+  = render "shared/vue/transport_section", setting: @setting, form: f
+
   .card.card-body.bg-light
     %h4{"data-toggle" => "collapse", "href" => "#advanced-setting"}
       = icon('fa-caret-down')
diff --git a/app/views/shared/vue/_transport_section.html.haml b/app/views/shared/vue/_transport_section.html.haml
new file mode 100644
index 0000000..c61877e
--- /dev/null
+++ b/app/views/shared/vue/_transport_section.html.haml
@@ -0,0 +1,30 @@
+- add_javascript_pack_tag("transport_section")
+
+= render "shared/vue/config_field"
+
+#transport-section.form-group.card.card-body.bg-light{"pluginType" => setting.plugin_type,
+                                                      "pluginName" => setting.plugin_name}
+  %label
+    Transport
+  .form-group
+    %select{"class" => "form-control",
+            "v-model" => "transportType",
+            "v-on:change" => "onChange"}
+      %option{"v-for" => "option in options",
+              "v-bind:value" => "option",
+              "v-bind:selected" => "transportType === option"}
+        {{ option | toUpper }}
+    %p{"v-if" => 'transportType === "tcp"'}
+      Nothing to configure
+    %template(v-else)
+      %template{"v-for" => "option in commonOptions"}
+        %config-field{"v-bind:plugin-type" => "pluginType",
+                      "v-bind:option" => "option"}
+      .card.card-body.bg-light
+        %h4{"data-toggle" => "collapse", "href" => "#transport-advanced-setting"}
+          = icon('fa-caret-down')
+          = t('terms.advanced_setting') + '(TLS)'
+        #transport-advanced-setting.collapse
+          %template{"v-for" => "option in advancedOptions"}
+            %config-field{"v-bind:plugin-type" => "pluginType",
+                          "v-bind:option" => "option"}