diff --git a/app/views/shared/vue/_setting.html.erb b/app/views/shared/vue/_setting.html.erb
deleted file mode 100644
index 0ce8e9b..0000000
--- a/app/views/shared/vue/_setting.html.erb
+++ /dev/null
@@ -1,25 +0,0 @@
-<%- add_javascript_pack_tag('codemirror') %>
-
-<script type="text/x-template" id="vue-setting-section">
-
-<div class="card card-primary mb-3">
-  <div class="card-header" data-toggle="collapse" v-bind:href="'#'+id" v-bind:title="content">
-    <i class="fa fa-caret-down"></i>
-    {{ type }}
-    <span v-if="!_.isEmpty(arg) && (name == 'match' || name == 'filter')">({{ arg }})</span>
-  </div>
-  <div class="card-body collapse" v-bind:id="id">
-    <pre v-if="mode != 'edit'">{{ content }}</pre>
-    <p v-if="mode == 'edit'">
-      <textarea v-config-editor class="form-control" v-model.lazy="content" v-bind:disabled="processing"></textarea>
-    </p>
-    <p class="float-right">
-      <button v-if="mode != 'edit'" class="btn btn-secondary" v-on:click="onEdit"><%= t('terms.edit') %></button>
-      <button v-if="mode != 'edit'" class="btn btn-danger" v-on:click="onDelete"><%= t('terms.destroy') %></button>
-      <button v-if="mode == 'edit'" class="btn btn-secondary" v-on:click="onCancel"><%= t('terms.cancel') %></button>
-      <button v-if="mode == 'edit'" class="btn btn-primary" v-on:click="onSubmit"><%= t('terms.save') %></button>
-    </p>
-  </div>
-</div>
-
-</script>
diff --git a/app/views/shared/vue/_setting.html.haml b/app/views/shared/vue/_setting.html.haml
new file mode 100644
index 0000000..776a934
--- /dev/null
+++ b/app/views/shared/vue/_setting.html.haml
@@ -0,0 +1,20 @@
+- add_javascript_pack_tag('codemirror')
+
+%script{"type" => "text/x-template", "id" => "vue-setting-section"}
+  %b-card.mb-3(no-body){"variant" => "primary"}
+    %template{"slot" => "header"}
+      %div{"data-toggle" => "collapse", "v-bind:href" => "`#${id}`", "v-bind:title" => "content"}
+        = icon("fa-caret-down")
+        {{ type }}
+        %span{"v-if" => '!_.isEmpty(arg) && (name == "match" || name == "filter")'}
+          ({{ arg }})
+    %b-card-body.collapse{"v-bind:id" => "id"}
+      %pre{"v-if" => 'mode !== "edit"'}
+        {{ content }}
+      %p{"v-if" => 'mode === "edit"'}
+        %textarea.form-control(v-config-editor){"v-model.lazy" => "content", "v-bind:disabled" => "processing"}
+      %p.float-right
+        %b-button{"v-if" => 'mode !== "edit"', "variant" => "secondary", "v-on:click" => "onEdit"}=t("terms.edit")
+        %b-button{"v-if" => 'mode !== "edit"', "variant" => "danger", "v-on:click" => "onDelete"}=t("terms.destroy")
+        %b-button{"v-if" => 'mode === "edit"', "variant" => "secondary", "v-on:click" => "onCancel"}=t("terms.cancel")
+        %b-button{"v-if" => 'mode === "edit"', "variant" => "primary", "v-on:click" => "onSubmit"}=t("terms.save")