diff --git a/resources/views/components/articles/actions.blade.php b/resources/views/components/articles/actions.blade.php
index a0b9778c0..6aba08d3e 100644
--- a/resources/views/components/articles/actions.blade.php
+++ b/resources/views/components/articles/actions.blade.php
@@ -12,7 +12,7 @@ class="w-full"
             >
                 <span class="flex items-center gap-x-2">
                     <x-heroicon-o-pencil class="w-5 h-5" title="Edit" />
-                    <span x-show="hovered === 'edit'" class="leading-5">Edit article</span>
+                    <span x-cloak x-show="hovered === 'edit'" class="leading-5">Edit article</span>
                 </span>
             </x-buttons.primary-menu-button>
         @endif
@@ -21,14 +21,14 @@ class="w-full"
             @can(App\Policies\ArticlePolicy::APPROVE, $article)
                 <x-buttons.secondary-button
                     tag="button"
-                    @click.prevent="activeModal = 'approveArticle'"
+                    @click.prevent="$dispatch('open-modal', 'approveArticle')"
                     @mouseover="hovered = 'publish'"
                     @mouseleave="hovered = false"
                     class="w-full"
                 >
                     <span class="flex items-center gap-x-2">
                         <x-heroicon-s-check class="w-5 h-5" title="Publish"/>
-                        <span x-show="hovered === 'publish'" class="leading-5">Publish article</span>
+                        <span x-cloak x-show="hovered === 'publish'" class="leading-5">Publish article</span>
                     </span>
                 </x-buttons.secondary-button>
             @endcan
@@ -36,14 +36,14 @@ class="w-full"
             @can(App\Policies\ArticlePolicy::DECLINE, $article)
                 <x-buttons.secondary-button
                     tag="button"
-                    @click.prevent="activeModal = 'declineArticle'"
+                    @click.prevent="$dispatch('open-modal', 'declineArticle')"
                     @mouseover="hovered = 'decline'"
                     @mouseleave="hovered = false"
                     class="w-full"
                 >
                     <span class="flex items-center gap-x-2">
                         <x-heroicon-s-x class="w-5 h-5" title="Decline"/>
-                        <span x-show="hovered === 'decline'" class="leading-5">Decline article</span>
+                        <span x-cloak x-show="hovered === 'decline'" class="leading-5">Decline article</span>
                     </span>
                 </x-buttons.secondary-button>
             @endcan
@@ -51,14 +51,14 @@ class="w-full"
             @can(App\Policies\ArticlePolicy::DISAPPROVE, $article)
                 <x-buttons.secondary-button
                     tag="button"
-                    @click.prevent="activeModal = 'disapproveArticle'"
+                    @click.prevent="$dispatch('open-modal', 'disapproveArticle')"
                     @mouseover="hovered = 'unpublish'"
                     @mouseleave="hovered = false"
                     class="w-full"
                 >
                     <span class="flex items-center gap-x-2">
                         <x-heroicon-o-eye-off class="w-5 h-5" title="Unpublish"/>
-                        <span x-show="hovered === 'unpublish'" class="leading-5">Unpublish article</span>
+                        <span x-cloak x-show="hovered === 'unpublish'" class="leading-5">Unpublish article</span>
                     </span>
                 </x-buttons.secondary-button>
             @endcan
@@ -67,7 +67,7 @@ class="w-full"
         @can(App\Policies\ArticlePolicy::PINNED, $article)
             <x-buttons.secondary-button
                 tag="button"
-                @click.prevent="activeModal = 'togglePinnedStatus'"
+                @click.prevent="$dispatch('open-modal', 'togglePinnedStatus')"
                 @mouseover="hovered = 'pin'"
                 @mouseleave="hovered = false"
                 :selected="$article->isPinned()"
@@ -75,7 +75,7 @@ class="w-full"
             >
                 <span class="flex items-center gap-x-2">
                     <x-icon-pin class="w-5 h-5" title="{{ $article->isPinned() ? 'Unpin' : 'Pin' }}"/>
-                    <span x-show="hovered === 'pin'" class="leading-5">{{ $article->isPinned() ? 'Unpin article' : 'Pin article' }}</span>
+                    <span x-cloak x-show="hovered === 'pin'" class="leading-5">{{ $article->isPinned() ? 'Unpin article' : 'Pin article' }}</span>
                 </span>
             </x-buttons.secondary-button>
         @endcan
@@ -84,14 +84,14 @@ class="w-full"
     @can(App\Policies\ArticlePolicy::DELETE, $article)
         <x-buttons.danger-button
             tag="button"
-            @click.prevent="activeModal = 'deleteArticle'"
+            @click.prevent="$dispatch('open-modal', 'deleteArticle')"
             @mouseover="hovered = 'delete'"
             @mouseleave="hovered = false"
             class="w-full"
         >
             <span class="flex items-center gap-x-2">
                 <x-heroicon-o-trash class="w-5 h-5" title="Delete"/>
-                <span x-show="hovered === 'delete'" class="leading-5">Delete article</span>
+                <span x-cloak x-show="hovered === 'delete'" class="leading-5">Delete article</span>
             </span>
         </x-buttons.danger-button>
     @endcan
diff --git a/resources/views/components/articles/filter.blade.php b/resources/views/components/articles/filter.blade.php
index 0a1eec045..30ffe24d7 100644
--- a/resources/views/components/articles/filter.blade.php
+++ b/resources/views/components/articles/filter.blade.php
@@ -5,7 +5,7 @@
         class="w-full flex justify-center font-medium rounded-l px-5 py-2 border {{ $selectedSortBy === 'recent' ? 'bg-gray-900 text-white  border-gray-900 hover:bg-gray-800' : 'bg-white text-gray-800 border-gray-200 hover:bg-gray-100' }}"
     >
         Recent
-    </a>
+    </button>
 
     <button 
         wire:click="sortBy('popular')" type="button"
@@ -13,7 +13,7 @@ class="w-full flex justify-center font-medium rounded-l px-5 py-2 border {{ $sel
         class="w-full flex justify-center font-medium px-5 py-2 border-t border-b {{ $selectedSortBy === 'popular' ? 'bg-gray-900 text-white  border-gray-900 hover:bg-gray-800' : 'bg-white text-gray-800 border-gray-200 hover:bg-gray-100' }}"
     >
         Popular
-    </a>
+    </button>
 
     <button 
         wire:click="sortBy('trending')" type="button"
@@ -22,5 +22,5 @@ class="w-full flex items-center gap-x-2 justify-center font-medium rounded-r px-
     >
         Trending
         <x-heroicon-o-fire class="w-5 h-5" />
-    </a>
+    </button>
 </div>
\ No newline at end of file