diff --git a/resources/views/components/layouts/modules/show/toggle.blade.php b/resources/views/components/layouts/modules/show/toggle.blade.php
index 702037983..029f7abe4 100644
--- a/resources/views/components/layouts/modules/show/toggle.blade.php
+++ b/resources/views/components/layouts/modules/show/toggle.blade.php
@@ -1,23 +1,23 @@
+
+
 <x-form>
-    <div class="lg:absolute lg:ltr:right-0 lg:rtl:left-0 top-4">
-        <label for="priceToggle" class="flex items-center cursor-pointer" x-on:click="price_type = ! price_type">
-            <div class="relative">
-                <input type="checkbox" id="priceToggle" class="sr-only" x-model="price_type">
+    <div class="lg:absolute lg:ltr:right-0 lg:rtl:left-0 top-4" x-on:click="price_type = ! price_type">
+        <div class="relative" x-model="price_type">
+            <div class="w-36 flex items-center bg-gray-200 p-1 ltr:mr-2 rtl:ml-2 rounded-lg">
+                <button type="button"
+                    class="w-18 flex justify-center px-2"
+                    x-bind:class="price_type == true ? 'btn-outline-primary' : 'bg-white rounded-lg'"
+                >
+                    {{ trans('general.monthly') }}
+                </button>
 
-                <div class="bg-purple-300 w-24 h-7 rounded-full">
-                    <span id="apps-toggle-monthly" class="monthly-badge text-xs text-white float-left ml-3 mt-1.5" x-show="price_type == true">
-                        {{ trans('general.monthly') }}
-                    </span>
-
-                    <span id="apps-toggle-yearly" class="yearly-badge text-xs text-white float-right mr-3 mt-1.5" x-show="price_type == false">
-                        {{ trans('general.yearly') }}
-                    </span>
-                </div>
-
-                <div class="dot absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition"
-                    x-bind:style="price_type == true ? 'transform: translateX(333%)' : '  transform: translateX(0) '"
-                ></div>
+                <button type="button"
+                    class="w-18 flex justify-center px-2"
+                    x-bind:class="price_type == false ? 'btn-outline-primary' : 'bg-white rounded-lg'"
+                >
+                    {{ trans('general.yearly') }}
+                </button>
             </div>
-        </label>
+        </div>
     </div>
-</x-form>
+</x-form>
\ No newline at end of file