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 be024fd406..1d1c4e7306 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
@@ -5,7 +5,7 @@
         @foreach (var reaction in Model.Reactions)
         {
             <span class="mr-2">
-                <img src="@reaction.Icon" width="16" height="16" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-highlighted" : "")"/>
+                <img src="@reaction.Icon" width="16" height="16" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")"/>
             </span>
         }
     </div>
@@ -14,7 +14,7 @@
         @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
         {
             <span class="mr-2">
-                <img src="@reaction.Icon" width="20" height="20" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-highlighted" : "")"/>
+                <img src="@reaction.Icon" width="20" height="20" data-name="@reaction.Name" class="cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")"/>
                 <span> @reaction.Count</span>
             </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
index 06c53b1899..f6eb2ebe25 100644
--- 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
@@ -5,9 +5,6 @@ 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)
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionStyleBundleContributor.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionStyleBundleContributor.cs
new file mode 100644
index 0000000000..e58f210455
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/ReactionSelectionStyleBundleContributor.cs
@@ -0,0 +1,13 @@
+using System.Collections.Generic;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+
+namespace Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection
+{
+    public class ReactionSelectionStyleBundleContributor : BundleContributor
+    {
+        public override void ConfigureBundle(BundleConfigurationContext context)
+        {
+            context.Files.AddIfNotContains("/Pages/CmsKit/Shared/Components/ReactionSelection/default.css");
+        }
+    }
+}
\ No newline at end of file
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 d4cfebe801..45ae31c3b1 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
@@ -9,7 +9,8 @@ using Volo.CmsKit.Reactions;
 namespace Volo.CmsKit.Web.Pages.CmsKit.Shared.Components.ReactionSelection
 {
     [Widget(
-        ScriptTypes = new[] {typeof(ReactionSelectionScriptBundleContributor)}
+        ScriptTypes = new[] {typeof(ReactionSelectionScriptBundleContributor)},
+        StyleTypes = new[] {typeof(ReactionSelectionStyleBundleContributor)}
     )]
     public class ReactionSelectionViewComponent : AbpViewComponent
     {
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css
new file mode 100644
index 0000000000..844fefaafa
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css
@@ -0,0 +1,8 @@
+.cms-reaction-icon
+{
+    cursor: pointer;
+}
+.cms-reaction-icon-selected
+{
+    border: 1px solid gray;
+}
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
index 17dbf6c438..50daa6f162 100644
--- 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
@@ -1,23 +1,25 @@
 (function () {
     $(document).ready(function () {
 
-        function initReactionSelection(){
-            var $this = $(this);
-            var $availableReactions = $this.find('.cms-reaction-selection-available-reactions');
+        function initReactionSelection() {
+            var $wrapper = $(this);
+            var $availableReactions = $wrapper.find('.cms-reaction-selection-available-reactions');
 
-            $availableReactions.find('.cms-reaction-icon').each(function(){
+            $wrapper.find('.cms-reaction-icon').each(function () {
                 var $icon = $(this);
-                $icon.click(function(){
-                    volo.cmsKit.reactions.reactionPublic.create({
-                        entityType: $this.attr('data-entity-type'),
-                        entityId: $this.attr('data-entity-id'),
+                $icon.click(function () {
+                    var methodName = $icon.hasClass('cms-reaction-icon-selected') ? 'delete' : 'create';
+                    volo.cmsKit.reactions.reactionPublic[methodName]({
+                        entityType: $wrapper.attr('data-entity-type'),
+                        entityId: $wrapper.attr('data-entity-id'),
                         reactionName: $icon.attr('data-name')
+                    }).then(function () {
+                        location.reload(); //TODO: JUST TESTING !!!!!!!!
                     });
                 });
             });
         }
 
         $('.cms-reaction-selection').each(initReactionSelection);
-
     });
 })();