diff --git a/pages/index.vue b/pages/index.vue
index ee50051..f79bed6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -102,11 +102,11 @@ const setCalcData = (id: number) => {
             <div class="container">
                 <div class="flex col-span-full gap-2 justify-center">
                     <template v-for="item in calculators">
-                        <div class="rounded p-2 cursor-pointer hover:bg-ioprim-300 border border-ioprim-300" :class="[{
-                            'bg-ioprim-200': openTab !== item.id,
-                            'bg-ioprim-400': openTab == item.id,
-                        }]" @click="setCalcData(item.id)">
-                            {{ item.title }}
+                        <div class="flex items-center gap-2">
+                            <label class="rounded p-2 cursor-pointe peer-checked:bg-ioprim-100">
+                                <input type="radio" :value="item.id" v-model="openTab">
+                                {{ item.title }}
+                            </label>
                         </div>
                     </template>
                 </div>