diff --git a/app/components/avo/fields/common/boolean_check_component.html.erb b/app/components/avo/fields/common/boolean_check_component.html.erb
index 3bef51608..6db564030 100644
--- a/app/components/avo/fields/common/boolean_check_component.html.erb
+++ b/app/components/avo/fields/common/boolean_check_component.html.erb
@@ -1 +1 @@
-<%= helpers.svg "#{@icon}.svg", class: @classes %>
+<%= helpers.svg "#{@icon}.svg", class: classes %>
diff --git a/app/components/avo/fields/common/boolean_check_component.rb b/app/components/avo/fields/common/boolean_check_component.rb
index 6bc34bd59..deda7e329 100644
--- a/app/components/avo/fields/common/boolean_check_component.rb
+++ b/app/components/avo/fields/common/boolean_check_component.rb
@@ -2,10 +2,18 @@
 
 class Avo::Fields::Common::BooleanCheckComponent < Avo::BaseComponent
   prop :checked, _Boolean, default: false
+  prop :size, Symbol, default: :md
   prop :icon, _Nilable(String) do |value|
     @checked ? "heroicons/outline/check-circle" : "heroicons/outline/x-circle"
   end
-  prop :classes, _Nilable(String) do |value|
-    "h-6 #{@checked ? "text-green-600" : "text-red-500"}"
+  prop :classes, _Nilable(String)
+
+  def classes
+    helpers.class_names({
+      "h-5": @size == :sm,
+      "h-6": @size == :md,
+      "text-green-600": @checked,
+      "text-red-600": !@checked,
+    })
   end
 end
diff --git a/app/components/avo/fields/common/boolean_group_component.html.erb b/app/components/avo/fields/common/boolean_group_component.html.erb
index 79e2d1302..5bbb3e968 100644
--- a/app/components/avo/fields/common/boolean_group_component.html.erb
+++ b/app/components/avo/fields/common/boolean_group_component.html.erb
@@ -1,11 +1,11 @@
 <div data-controller="tippy">
   <%= link_to t("avo.view").humanize, "javascript:void(0);", data: {"tippy-target": :source} %>
   <div class="hidden" data-tippy-target="content">
-    <div class="p-2 space-y-2">
+    <div class="p-1 space-y-1">
       <% @options.each do |id, label| %>
-        <div class="flex flex-nowrap">
-          <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @value.present? && @value&.with_indifferent_access[id].present? %>
-          <div class="ml-px text-left py-px"><%= label %></div>
+        <div class="flex items-center flex-nowrap space-x-1">
+          <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: checked(id), size: :sm %>
+          <div class="flex itdems-center text-left text-sm py-px"><%= label %></div>
         </div>
       <% end %>
     </div>
diff --git a/app/components/avo/fields/common/boolean_group_component.rb b/app/components/avo/fields/common/boolean_group_component.rb
index 44a2ff7e4..cc0c69a93 100644
--- a/app/components/avo/fields/common/boolean_group_component.rb
+++ b/app/components/avo/fields/common/boolean_group_component.rb
@@ -3,4 +3,8 @@
 class Avo::Fields::Common::BooleanGroupComponent < Avo::BaseComponent
   prop :options, Hash, default: {}.freeze
   prop :value, _Nilable(Hash)
+
+  def checked(id)
+    @value.present? && @value.with_indifferent_access[id].present?
+  end
 end