diff --git a/packages/hoppscotch-app/components/smart/AccentModePicker.vue b/packages/hoppscotch-app/components/smart/AccentModePicker.vue
index 5295efca..1b8a73d4 100644
--- a/packages/hoppscotch-app/components/smart/AccentModePicker.vue
+++ b/packages/hoppscotch-app/components/smart/AccentModePicker.vue
@@ -23,8 +23,7 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
 import {
   HoppAccentColors,
   HoppAccentColor,
@@ -32,18 +31,11 @@ import {
   useSetting,
 } from "~/newstore/settings"
 
-export default defineComponent({
-  setup() {
-    return {
-      accentColors: HoppAccentColors,
-      active: useSetting("THEME_COLOR"),
-    }
-  },
-  methods: {
-    setActiveColor(color: HoppAccentColor) {
-      document.documentElement.setAttribute("data-accent", color)
-      applySetting("THEME_COLOR", color)
-    },
-  },
-})
+const accentColors = HoppAccentColors
+const active = useSetting("THEME_COLOR")
+
+const setActiveColor = (color: HoppAccentColor) => {
+  document.documentElement.setAttribute("data-accent", color)
+  applySetting("THEME_COLOR", color)
+}
 </script>
diff --git a/packages/hoppscotch-app/components/smart/ColorModePicker.vue b/packages/hoppscotch-app/components/smart/ColorModePicker.vue
index bc5208ac..d6373ce6 100644
--- a/packages/hoppscotch-app/components/smart/ColorModePicker.vue
+++ b/packages/hoppscotch-app/components/smart/ColorModePicker.vue
@@ -15,8 +15,7 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
 import {
   applySetting,
   HoppBgColor,
@@ -24,45 +23,40 @@ import {
   useSetting,
 } from "~/newstore/settings"
 
-export default defineComponent({
-  setup() {
-    return {
-      colors: HoppBgColors,
-      active: useSetting("BG_COLOR"),
-    }
-  },
-  methods: {
-    setBGMode(color: HoppBgColor) {
-      applySetting("BG_COLOR", color)
-    },
-    getIcon(color: HoppBgColor) {
-      switch (color) {
-        case "system":
-          return "monitor"
-        case "light":
-          return "sun"
-        case "dark":
-          return "cloud"
-        case "black":
-          return "moon"
-        default:
-          return "monitor"
-      }
-    },
-    getColorModeName(colorMode: string) {
-      switch (colorMode) {
-        case "system":
-          return "settings.system_mode"
-        case "light":
-          return "settings.light_mode"
-        case "dark":
-          return "settings.dark_mode"
-        case "black":
-          return "settings.black_mode"
-        default:
-          return "settings.system_mode"
-      }
-    },
-  },
-})
+const colors = HoppBgColors
+const active = useSetting("BG_COLOR")
+
+const setBGMode = (color: HoppBgColor) => {
+  applySetting("BG_COLOR", color)
+}
+
+const getIcon = (color: HoppBgColor) => {
+  switch (color) {
+    case "system":
+      return "monitor"
+    case "light":
+      return "sun"
+    case "dark":
+      return "cloud"
+    case "black":
+      return "moon"
+    default:
+      return "monitor"
+  }
+}
+
+const getColorModeName = (colorMode: string) => {
+  switch (colorMode) {
+    case "system":
+      return "settings.system_mode"
+    case "light":
+      return "settings.light_mode"
+    case "dark":
+      return "settings.dark_mode"
+    case "black":
+      return "settings.black_mode"
+    default:
+      return "settings.system_mode"
+  }
+}
 </script>
diff --git a/packages/hoppscotch-app/components/smart/FontSizePicker.vue b/packages/hoppscotch-app/components/smart/FontSizePicker.vue
index 042f5a57..03b371ef 100644
--- a/packages/hoppscotch-app/components/smart/FontSizePicker.vue
+++ b/packages/hoppscotch-app/components/smart/FontSizePicker.vue
@@ -32,8 +32,8 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { useContext } from "@nuxtjs/composition-api"
 import {
   HoppFontSizes,
   HoppFontSize,
@@ -41,21 +41,20 @@ import {
   useSetting,
 } from "~/newstore/settings"
 
-export default defineComponent({
-  setup() {
-    return {
-      fontSizes: HoppFontSizes,
-      active: useSetting("FONT_SIZE"),
-    }
-  },
-  methods: {
-    getFontSizeName(size: HoppFontSize) {
-      return this.$t(`settings.font_size_${size}`)
-    },
-    setActiveFont(size: HoppFontSize) {
-      document.documentElement.setAttribute("data-font-size", size)
-      applySetting("FONT_SIZE", size)
-    },
-  },
-})
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const fontSizes = HoppFontSizes
+const active = useSetting("FONT_SIZE")
+
+const getFontSizeName = (size: HoppFontSize) => {
+  return t(`settings.font_size_${size}`)
+}
+
+const setActiveFont = (size: HoppFontSize) => {
+  document.documentElement.setAttribute("data-font-size", size)
+  applySetting("FONT_SIZE", size)
+}
 </script>
diff --git a/packages/hoppscotch-app/components/smart/Icon.vue b/packages/hoppscotch-app/components/smart/Icon.vue
index 26335df8..7c13e200 100644
--- a/packages/hoppscotch-app/components/smart/Icon.vue
+++ b/packages/hoppscotch-app/components/smart/Icon.vue
@@ -2,20 +2,14 @@
   <component :is="src" />
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { computed } from "@nuxtjs/composition-api"
 
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    src() {
-      return require(`~/assets/icons/${this.name}.svg?inline`)
-    },
-  },
+const props = defineProps<{
+  name: String
+}>()
+
+const src = computed(() => {
+  return require(`~/assets/icons/${props.name}.svg?inline`)
 })
 </script>