diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
index 2d16728122..4714e3e63b 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
@@ -1,5 +1,12 @@
 @model Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection.ReactionSelectionViewModel
-@foreach (var reaction in Model.Reactions)
-{
-    <cms-icon name="@reaction.Icon" />
-}
+<span class="cms-reaction-selection">
+    <a class="cms-reaction-selection-button">
+        <i class="far fa-smile"></i>
+    </a>
+    <div class="cms-reaction-selection-area" style="display: none">
+        @foreach (var reaction in Model.Reactions)
+        {
+            <cms-icon name="@reaction.Icon"/>
+        }
+    </div>
+</span>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionScriptBundleContributor.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionScriptBundleContributor.cs
new file mode 100644
index 0000000000..06c53b1899
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionScriptBundleContributor.cs
@@ -0,0 +1,18 @@
+using System.Collections.Generic;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.Bootstrap;
+using Volo.Abp.Modularity;
+
+namespace Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection
+{
+    [DependsOn(
+        typeof(BootstrapScriptContributor)
+        )]
+    public class ReactionSelectionScriptBundleContributor : BundleContributor
+    {
+        public override void ConfigureBundle(BundleConfigurationContext context)
+        {
+            context.Files.AddIfNotContains("/Pages/CmsKit/Shared/Components/ReactionSelection/default.js");
+        }
+    }
+}
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionViewComponent.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionViewComponent.cs
index 103fbb46ef..1f81ff35da 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionViewComponent.cs
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionViewComponent.cs
@@ -3,10 +3,14 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
 using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 using Volo.CmsKit.Reactions;
 
 namespace Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection
 {
+    [Widget(
+        ScriptTypes = new[] {typeof(ReactionSelectionScriptBundleContributor)}
+    )]
     public class ReactionSelectionViewComponent : AbpViewComponent
     {
         protected IReactionPublicAppService ReactionPublicAppService { get; }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.js b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.js
new file mode 100644
index 0000000000..eacc34bc44
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.js
@@ -0,0 +1,16 @@
+(function () {
+    $(document).ready(function () {
+
+        $('.cms-reaction-selection').each(function () {
+            var $this = $(this);
+            var $selectionButton = $this.find('.cms-reaction-selection-button');
+            var $selectionArea = $this.find('.cms-reaction-selection-area');
+
+            $selectionButton.popover({
+                html: true,
+                placement: 'right',
+                content: $selectionArea.html()
+            });
+        })
+    });
+})();
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj
index 1d2d5ebbe6..c3a45b7838 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj
@@ -15,9 +15,6 @@
   <ItemGroup>
     <ProjectReference Include="..\Volo.CmsKit.Common.Web\Volo.CmsKit.Common.Web.csproj" />
     <ProjectReference Include="..\Volo.CmsKit.Public.HttpApi\Volo.CmsKit.Public.HttpApi.csproj" />
-  </ItemGroup>
-
-  <ItemGroup>
     <PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="3.1.5" />
   </ItemGroup>
 
@@ -26,10 +23,6 @@
     <EmbeddedResource Include="Pages\**\*.js" />
     <Content Remove="Pages\**\*.css" />
     <Content Remove="Pages\**\*.js" />
-    <Content Update="Pages\CmsKit\Shared\Components\ReactionSelection\Default.cshtml">
-      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
-      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-    </Content>
   </ItemGroup>
 
 </Project>