diff --git a/packages/hoppscotch-app/components/http/TestResult.vue b/packages/hoppscotch-app/components/http/TestResult.vue
index e03535d2..a8aa8e46 100644
--- a/packages/hoppscotch-app/components/http/TestResult.vue
+++ b/packages/hoppscotch-app/components/http/TestResult.vue
@@ -36,14 +36,14 @@
             <div class="divide-y divide-dividerLight">
               <div
                 v-if="noEnvSelected && !globalHasAdditions"
-                class="flex bg-error p-4 text-secondaryDark"
+                class="flex p-4 bg-error text-secondaryDark"
               >
                 <i class="mr-4 material-icons"> warning </i>
                 <div class="flex flex-col">
                   <p>
                     {{ t("environment.no_environment_description") }}
                   </p>
-                  <p class="space-x-2 flex mt-3">
+                  <p class="flex mt-3 space-x-2">
                     <ButtonSecondary
                       :label="t('environment.add_to_global')"
                       class="text-tiny !bg-primary"
diff --git a/packages/hoppscotch-app/components/http/TestResultEnv.vue b/packages/hoppscotch-app/components/http/TestResultEnv.vue
index 85920e9d..fba1a822 100644
--- a/packages/hoppscotch-app/components/http/TestResultEnv.vue
+++ b/packages/hoppscotch-app/components/http/TestResultEnv.vue
@@ -21,7 +21,7 @@
     </div>
     <span
       v-if="global"
-      class="bg-accentLight px-1 rounded text-accentContrast text-tiny"
+      class="px-1 rounded bg-accentLight text-accentContrast text-tiny"
     >
       Global
     </span>
diff --git a/packages/hoppscotch-app/components/smart/Radio.vue b/packages/hoppscotch-app/components/smart/Radio.vue
index fdefa19d..7a65ad62 100644
--- a/packages/hoppscotch-app/components/smart/Radio.vue
+++ b/packages/hoppscotch-app/components/smart/Radio.vue
@@ -1,16 +1,12 @@
 <template>
-  <div
-    class="flex items-center flex-1 cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
-    @click="$emit('change', value)"
-  >
-    <span class="inline-flex mr-4">
-      <i v-if="value === selected" class="text-accent material-icons">
-        radio_button_checked
-      </i>
-      <i v-else class="material-icons">radio_button_unchecked</i>
-    </span>
-    <span class="inline-flex font-semibold">{{ label }}</span>
-  </div>
+  <SmartItem
+    :label="label"
+    :icon="
+      value === selected ? 'radio_button_checked' : 'radio_button_unchecked'
+    "
+    :active="value === selected"
+    @click.native="$emit('change', value)"
+  />
 </template>
 
 <script>
diff --git a/packages/hoppscotch-app/components/smart/RadioGroup.vue b/packages/hoppscotch-app/components/smart/RadioGroup.vue
index 31bc818b..f0363078 100644
--- a/packages/hoppscotch-app/components/smart/RadioGroup.vue
+++ b/packages/hoppscotch-app/components/smart/RadioGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col space-y-4">
+  <div class="flex flex-col">
     <SmartRadio
       v-for="(radio, index) in radios"
       :key="`radio-${index}`"