diff --git a/app/views/shared/vue/_aws_credential.html.haml b/app/views/shared/vue/_aws_credential.html.haml
index 87687f9..f1b83a0 100644
--- a/app/views/shared/vue/_aws_credential.html.haml
+++ b/app/views/shared/vue/_aws_credential.html.haml
@@ -1,10 +1,8 @@
 = render "shared/vue/config_field"
 
 %script{type: "text/x-template", id: "vue-aws-credential"}
-  .form-group.card.bg-light.mb-3
-    .card-body
-      %label{"for" => "aws-credential"}
-        AWS credential
+  .form-group.mb-3
+    %b-card{"header" => "AWS credential", "bg-variant" => "light"}
       %select{"id" => "aws-credential",
               "class" => "form-control mb-3",
               "v-model" => "credentialType",
diff --git a/app/views/shared/vue/_grep_container.html.haml b/app/views/shared/vue/_grep_container.html.haml
index 773fdad..5a59520 100644
--- a/app/views/shared/vue/_grep_container.html.haml
+++ b/app/views/shared/vue/_grep_container.html.haml
@@ -1,10 +1,10 @@
 = render "shared/vue/grep_pattern"
 %script{type: "text/x-template", id: "vue-grep-container"}
-  .form-group.card
-    .card-header
-      %a.btn.btn-xs{"v-on:click" => "add", "v-if" => "index == 0"}
+  %b-card.form-group
+    %template{"slot" => "header"}
+      %b-button{"v-on:click" => "add", "size" => "sm", "variant" => "light", "v-if" => "index === 0"}
         = icon("fa-plus")
-      %a.btn.btn-xs{"v-on:click" => "remove", "v-if" => "index != 0"}
+      %b-button{"v-on:click" => "remove", "size" => "sm", "variant" => "light", "v-if" => "index !== 0"}
         = icon("fa-minus")
       %label
         {{ containerType | humanize }}
@@ -20,13 +20,12 @@
                "v-bind:name" => "inputName(index)",
                "v-model" => "grepType"}
         Exclude
-    .card-body
-      .row
-        %template{"v-for" => "(enabled, i) in patterns"}
-          %grep-pattern.col-xl-3{"v-if" => "enabled",
-                                 "v-bind:container-type" => "containerType",
-                                 "v-bind:grep-type" => "grepType",
-                                 "v-bind:index" => "index",
-                                 "v-bind:subIndex" => "i",
-                                 "v-on:add-grep-pattern" => "addGrepPattern",
-                                 "v-on:remove-grep-pattern" => "removeGrepPattern"}
+    .row
+      %template{"v-for" => "(enabled, i) in patterns"}
+        %grep-pattern.col-xl-3{"v-if" => "enabled",
+                               "v-bind:container-type" => "containerType",
+                               "v-bind:grep-type" => "grepType",
+                               "v-bind:index" => "index",
+                               "v-bind:subIndex" => "i",
+                               "v-on:add-grep-pattern" => "addGrepPattern",
+                               "v-on:remove-grep-pattern" => "removeGrepPattern"}
diff --git a/app/views/shared/vue/_grep_pattern.html.haml b/app/views/shared/vue/_grep_pattern.html.haml
index 46abc08..4ed4907 100644
--- a/app/views/shared/vue/_grep_pattern.html.haml
+++ b/app/views/shared/vue/_grep_pattern.html.haml
@@ -1,8 +1,8 @@
 %script{type: "text/x-template", id: "vue-grep-pattern"}
   %div
-    %a.btn.btn-xs{"v-on:click" => "add", "v-if" => "subIndex == 0"}
+    %b-button{"v-on:click" => "add", "size" => "sm", "variant" => "light", "v-if" => "subIndex === 0"}
       = icon("fa-plus")
-    %a.btn.btn-xs{"v-on:click" => "remove", "v-if" => "subIndex != 0"}
+    %b-button{"v-on:click" => "remove", "size" => "sm", "variant" => "light", "v-if" => "subIndex !== 0"}
       = icon("fa-minus")
     %label
       {{ grepType | humanize }}