diff --git a/.gitignore b/.gitignore
index dca9244..27dc769 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 /bin
 /dist
 /.tmp
+/extensions/dnslookup/dnslookup-*
 
 #Vue builds
 /xradio-vue/dist
@@ -17,4 +18,5 @@ tmpState.txt
 command.txt
 /extensions/dnslookup/node_modules
 /extensions/dnslookup/package-lock.json
-TODO.md
\ No newline at end of file
+TODO.md
+node_modules
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3b66410..b157a38 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-    "git.ignoreLimitWarning": true
+    "git.ignoreLimitWarning": true,
+    "editor.tabSize": 2
 }
\ No newline at end of file
diff --git a/neutralino.config.json b/neutralino.config.json
index 7e73592..de8715a 100644
--- a/neutralino.config.json
+++ b/neutralino.config.json
@@ -1,6 +1,6 @@
 {
   "applicationId": "js.neutralino.xradio",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "defaultMode": "window",
   "documentRoot": "/xradio-vue/dist/",
   "port": 6498,
diff --git a/xradio-vue/package.json b/xradio-vue/package.json
index df53776..b362bbc 100644
--- a/xradio-vue/package.json
+++ b/xradio-vue/package.json
@@ -1,13 +1,12 @@
 {
   "name": "xradio",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "axios": "^0.27.2",
     "howler": "^2.2.3",
     "vue": "^3.2.13",
     "vue-marquee-text-component": "^2.0.1",
diff --git a/xradio-vue/src/App.vue b/xradio-vue/src/App.vue
index 40a9a39..cdfbc4c 100644
--- a/xradio-vue/src/App.vue
+++ b/xradio-vue/src/App.vue
@@ -11,7 +11,7 @@
       <span class="sr-only">Switch theme</span>
       <svg class="fill-current" viewBox="0 0 24 24">
         <path
-          v-if="$store.state.theme == 'dark'"
+          v-if="store.state.theme == 'dark'"
           d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z"
         />
         <path
@@ -63,309 +63,305 @@
   </main>
 </template>
 
-<script>
-import axios from "axios";
+<script setup>
 //import Navbar from "./components/NavBar.vue";
 import { Howl, Howler } from "howler/dist/howler.core.min";
 import Player from "./components/Player.vue";
 import SnackBar from "./components/SnackBar.vue";
 import NavBar2 from "./components/NavBar2.vue";
 import UpdateBanner from "./components/UpdateBanner.vue";
-export default {
-  components: {
-    //Navbar,
-    Player,
-    SnackBar,
-    NavBar2,
-    UpdateBanner,
+import { ref } from "vue";
+import { useStore } from "vuex";
+
+let baseUrl = ref("");
+//let baseUrl = ref("https://de1.api.radio-browser.info");
+let sound = ref(undefined);
+let loading = ref(false);
+let isPlaying = ref(false);
+let error = ref(false);
+let currentStation = ref({});
+let favorites = ref({});
+let snackMsg = ref("");
+let bannerMsg = ref("");
+let showSnack = ref(false);
+let showBanner = ref(false);
+let config = ref({});
+const store = useStore();
+
+//prevent zooming
+window.addEventListener(
+  "keydown",
+  function (e) {
+    if (
+      (e.ctrlKey || e.metaKey) &&
+      (e.which === 61 ||
+        e.which === 107 ||
+        e.which === 173 ||
+        e.which === 109 ||
+        e.which === 187 ||
+        e.which === 189)
+    ) {
+      e.preventDefault();
+    }
   },
-  data() {
-    return {
-      //baseUrl: "https://de1.api.radio-browser.info",
-      baseUrl: "",
-      sound: undefined,
-      loading: false,
-      isPlaying: false,
-      error: false,
-      currentStation: {},
-      favorites: {},
-      snackMsg: "",
-      bannerMsg: "",
-      showSnack: false,
-      showBanner: false,
-      config: {},
+  false
+);
+
+const handleWheel = function (e) {
+  if (e.ctrlKey || e.metaKey) e.preventDefault();
+};
+window.addEventListener("wheel", handleWheel, { passive: false });
+
+//checkNode();
+let theme = localStorage.getItem("theme");
+if ((theme && theme == "dark") || !theme) {
+  document.querySelector("html").classList.add("dark");
+} else {
+  store.dispatch("setTheme", "light");
+}
+if (localStorage.getItem("favorites")) {
+  favorites.value = JSON.parse(localStorage.getItem("favorites"));
+}
+if (localStorage.getItem("currentStation")) {
+  currentStation.value = JSON.parse(localStorage.getItem("currentStation"));
+}
+if (localStorage.getItem("volume")) {
+  store.dispatch("volume", parseInt(localStorage.getItem("volume")));
+}
+if (localStorage.getItem("selectedCountries")) {
+  store.dispatch(
+    "setSelectedCountries",
+    JSON.parse(localStorage.getItem("selectedCountries"))
+  );
+}
+
+async function importFavorites() {
+  let entries = await Neutralino.os.showOpenDialog("Select favorites file", {
+    defaultPath: "./",
+    filters: [
+      { name: "JSON file", extensions: ["json"] },
+      { name: "All files", extensions: ["*"] },
+    ],
+  });
+  if (entries.length > 0) {
+    let data = {
+      filePath: entries,
     };
-  },
-  created() {
-    //prevent zooming
-    window.addEventListener(
-      "keydown",
-      function (e) {
-        if (
-          (e.ctrlKey || e.metaKey) &&
-          (e.which === 61 ||
-            e.which === 107 ||
-            e.which === 173 ||
-            e.which === 109 ||
-            e.which === 187 ||
-            e.which === 189)
-        ) {
-          e.preventDefault();
-        }
-      },
-      false
+    await Neutralino.extensions.dispatch(
+      "js.neutralino.dnslookup",
+      "readJson",
+      data
     );
-    const handleWheel = function (e) {
-      if (e.ctrlKey || e.metaKey) e.preventDefault();
+  }
+}
+
+async function exportFavorites() {
+  let entry = await Neutralino.os.showSaveDialog("Save favorites to", {
+    defaultPath: "favorites.json",
+    filters: [
+      { name: "JSON file", extensions: ["json"] },
+      { name: "All files", extensions: ["*"] },
+    ],
+  });
+  if (entry != "") {
+    let data = {
+      filePath: entry,
+      content: JSON.stringify(favorites.value),
     };
-    window.addEventListener("wheel", handleWheel, { passive: false });
+    await Neutralino.extensions.dispatch(
+      "js.neutralino.dnslookup",
+      "writeJson",
+      data
+    );
+  }
+}
 
-    //this.checkNode();
-    let theme = localStorage.getItem("theme");
-    if ((theme && theme == "dark") || !theme) {
-      document.querySelector("html").classList.add("dark");
-    } else {
-      this.$store.dispatch("setTheme", "light");
-    }
-    if (localStorage.getItem("favorites")) {
-      this.favorites = JSON.parse(localStorage.getItem("favorites"));
-    }
-    if (localStorage.getItem("currentStation")) {
-      this.currentStation = JSON.parse(localStorage.getItem("currentStation"));
-    }
-    if (localStorage.getItem("volume")) {
-      this.$store.dispatch("volume", parseInt(localStorage.getItem("volume")));
-    }
-    if (localStorage.getItem("selectedCountries")) {
-      this.$store.dispatch(
-        "setSelectedCountries",
-        JSON.parse(localStorage.getItem("selectedCountries"))
-      );
-    }
-    this.dns();
-    Neutralino.events.on("baseHost", (event) => {
-      this.baseUrl = event.detail;
-      this.$store.dispatch("setBase", this.baseUrl);
-      this.initRequests();
-      this.checkUpdate();
-    });
-    Neutralino.events.on("savedJson", (event) => {
-      if (event.detail == "Error") {
-        this.toggleSnack("Error saving favorites");
-      } else {
-        this.toggleSnack("Favorites saved");
-      }
-      console.log(event)
-    });
-    Neutralino.events.on("loadedJson", (event) => {
-      if (event.detail == "Error") {
-        this.toggleSnack("Error loading favorites");
-      } else {
-        this.favorites = JSON.parse(event.detail);
-        localStorage.setItem("favorites", event.detail);
-        this.toggleSnack("Favorites loaded");
+/* async function checkNode() {
+  let info = await Neutralino.os.execCommand("node -v");
+  console.log(`Node version: ${info.stdOut}`);
+} */
+
+async function link(url) {
+  await Neutralino.os.open(url);
+}
+
+async function checkUpdate() {
+  await fetch(
+    "https://api.github.com/repos/bocchilorenzo/xradio/releases/latest"
+  )
+    .then((res) => {
+      return res.json();
+    })
+    .then((res) => {
+      if (res.name != config.value.version) {
+        toggleBanner("Update available. Click to download");
       }
+    })
+    .catch((err) => {
+      toggleSnack("Update check failed");
+      console.error(err);
     });
-  },
-  methods: {
-    async importFavorites() {
-      let entries = await Neutralino.os.showOpenDialog(
-        "Select favorites file",
-        {
-          defaultPath: "./",
-          filters: [
-            { name: "JSON file", extensions: ["json"] },
-            { name: "All files", extensions: ["*"] },
-          ],
-        },
+}
 
-      );
-      if (entries.length > 0) {
-        let data = {
-          filePath: entries,
-        };
-        await Neutralino.extensions.dispatch(
-          "js.neutralino.dnslookup",
-          "readJson",
-          data
-        );
-      }
-    },
-    async exportFavorites() {
-      let entry = await Neutralino.os.showSaveDialog(
-        "Save favorites to",
-        {
-          defaultPath: "favorites.json",
-          filters: [
-            { name: "JSON file", extensions: ["json"] },
-            { name: "All files", extensions: ["*"] },
-          ],
-        }
-      );
-      if (entry != "") {
-        let data = {
-          filePath: entry,
-          content: JSON.stringify(this.favorites),
-        };
-        await Neutralino.extensions.dispatch(
-          "js.neutralino.dnslookup",
-          "writeJson",
-          data
-        );
-      }
-    },
-    async checkNode() {
-      let info = await Neutralino.os.execCommand("node -v");
-      console.log(`Node version: ${info.stdOut}`);
-    },
-    async link(url) {
-      await Neutralino.os.open(url);
-    },
-    async checkUpdate() {
-      axios
-        .get(
-          "https://api.github.com/repos/bocchilorenzo/xradio/releases/latest"
-        )
-        .then((res) => {
-          if (res.data.name != this.config.version) {
-            this.toggleBanner("Update available. Click to download");
-          }
-        })
-        .catch((err) => {
-          this.toggleSnack("Update check failed");
-          console.error(err);
-        });
-    },
-    toggleSnack(msg) {
-      this.snackMsg = msg;
-      this.showSnack = true;
-      setTimeout(() => {
-        this.showSnack = false;
-      }, 4000);
-    },
-    toggleBanner(msg) {
-      this.bannerMsg = msg;
-      this.showBanner = true;
-    },
-    volume() {
-      Howler.volume(this.$store.state.volume / 100);
-    },
-    manageFavorites(stationuuid) {
-      if (stationuuid in this.favorites) {
-        delete this.favorites[stationuuid];
-      } else {
-        this.favorites[stationuuid] = this.currentStation;
-      }
-      localStorage.setItem("favorites", JSON.stringify(this.favorites));
-      this.favorites = JSON.parse(localStorage.getItem("favorites"));
-    },
-    switchTheme() {
-      if (this.$store.state.theme == "dark") {
-        document.querySelector("html").classList.remove("dark");
-        this.$store.dispatch("setTheme", "light");
-        localStorage.setItem("theme", "light");
-      } else {
-        document.querySelector("html").classList.add("dark");
-        this.$store.dispatch("setTheme", "dark");
-        localStorage.setItem("theme", "dark");
-      }
-    },
-    play(station) {
-      this.loading = true;
-      this.isPlaying = true;
-      this.error = false;
-      this.currentStation = station;
-      axios({
-        mode: "get",
-        url: this.baseUrl + this.$store.state.urls.click + station.stationuuid,
-        headers: { "User-Agent": "XRadio/" + this.config.version },
-      })
-        /* .then((res) => {
-          console.log(res.data);
+function toggleSnack(msg) {
+  snackMsg.value = msg;
+  showSnack.value = true;
+  setTimeout(() => {
+    showSnack.value = false;
+  }, 4000);
+}
+
+function toggleBanner(msg) {
+  bannerMsg.value = msg;
+  showBanner.value = true;
+}
+
+function volume() {
+  Howler.volume(store.state.volume / 100);
+}
+
+function manageFavorites(stationuuid) {
+  if (stationuuid in favorites.value) {
+    delete favorites.value[stationuuid];
+  } else {
+    favorites.value[stationuuid] = currentStation.value;
+  }
+  localStorage.setItem("favorites", JSON.stringify(favorites.value));
+  favorites.value = JSON.parse(localStorage.getItem("favorites"));
+}
+
+function switchTheme() {
+  if (store.state.theme == "dark") {
+    document.querySelector("html").classList.remove("dark");
+    store.dispatch("setTheme", "light");
+    localStorage.setItem("theme", "light");
+  } else {
+    document.querySelector("html").classList.add("dark");
+    store.dispatch("setTheme", "dark");
+    localStorage.setItem("theme", "dark");
+  }
+}
+
+function play(station) {
+  loading.value = true;
+  isPlaying.value = true;
+  error.value = false;
+  currentStation.value = station;
+  fetch(baseUrl.value + store.state.urls.click + station.stationuuid, {
+    method: "get",
+    headers: { "User-Agent": "XRadio/" + config.value.version },
+  })
+    /* .then((res) => {
+          console.log(res);
         }) */
-        .catch((err) => {
-          console.error(err);
-        });
-      if (this.sound != undefined) {
-        this.sound.stop();
-      }
-      this.sound = new Howl({
-        src: [station.url_resolved],
-        html5: true,
-        volume: this.$store.state.volume / 100,
-      });
-      document.title = station.name;
-      this.sound.play();
-      this.sound.once("load", () => {
-        this.loading = false;
-      });
-      this.sound.once("loaderror", () => {
-        this.toggleSnack("Error: can't play station");
-        this.loading = false;
-        this.error = true;
-      });
-      localStorage.setItem(
-        "currentStation",
-        JSON.stringify(this.currentStation)
-      );
-    },
-    stop() {
-      this.sound.stop();
-      this.sound.unload();
-      document.title = "xradio";
-      this.isPlaying = false;
-      this.loading = false;
-      this.error = false;
-    },
-    closePlayer() {
-      if (this.sound != undefined) {
-        this.sound.stop();
-        this.sound.unload();
-      }
-      this.isPlaying = false;
-      this.loading = false;
-      this.error = false;
-      this.currentStation = {};
-      localStorage.setItem(
-        "currentStation",
-        JSON.stringify(this.currentStation)
-      );
-    },
-    async initRequests() {
-      this.config = await Neutralino.app.getConfig();
-      await axios({
-        mode: "get",
-        url: this.baseUrl + this.$store.state.urls.countries,
-        headers: { "User-Agent": "XRadio/" + this.config.version },
-      })
-        .then((res) => {
-          this.$store.dispatch("add", ["countries", res.data]);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-      await axios({
-        mode: "get",
-        url: this.baseUrl + this.$store.state.urls.countryCodes,
-        headers: { "User-Agent": "XRadio/" + this.config.version },
-      })
-        .then((res) => {
-          this.$store.dispatch("add", ["countryCodes", res.data]);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    },
-    async dns() {
-      let extension = "js.neutralino.dnslookup";
-      let event = "dnsLookup";
-      let data = {
-        getUrls: true,
-      };
-      await Neutralino.extensions.dispatch(extension, event, data);
-    },
-  },
-};
+    .catch((err) => {
+      console.error(err);
+    });
+  if (sound.value != undefined) {
+    sound.value.stop();
+  }
+  sound.value = new Howl({
+    src: [station.url_resolved],
+    html5: true,
+    volume: store.state.volume / 100,
+  });
+  document.title = station.name;
+  sound.value.play();
+  sound.value.once("load", () => {
+    loading.value = false;
+  });
+  sound.value.once("loaderror", () => {
+    toggleSnack("Error: can't play station");
+    loading.value = false;
+    error.value = true;
+  });
+  localStorage.setItem("currentStation", JSON.stringify(currentStation.value));
+}
+
+function stop() {
+  sound.value.stop();
+  sound.value.unload();
+  document.title = "xradio";
+  isPlaying.value = false;
+  loading.value = false;
+  error.value = false;
+}
+
+function closePlayer() {
+  if (sound.value != undefined) {
+    sound.value.stop();
+    sound.value.unload();
+  }
+  isPlaying.value = false;
+  loading.value = false;
+  error.value = false;
+  currentStation.value = {};
+  localStorage.setItem("currentStation", JSON.stringify(currentStation.value));
+}
+
+async function initRequests() {
+  config.value = await Neutralino.app.getConfig();
+  await fetch(baseUrl.value + store.state.urls.countries, {
+    method: "get",
+    headers: { "User-Agent": "XRadio/" + config.value.version },
+  })
+    .then((res) => {
+      return res.json();
+    })
+    .then((res) => {
+      store.dispatch("add", ["countries", res]);
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+  await fetch(baseUrl.value + store.state.urls.countryCodes, {
+    method: "get",
+    headers: { "User-Agent": "XRadio/" + config.value.version },
+  })
+    .then((res) => {
+      return res.json();
+    })
+    .then((res) => {
+      store.dispatch("add", ["countryCodes", res]);
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}
+
+async function dns() {
+  let extension = "js.neutralino.dnslookup";
+  let event = "dnsLookup";
+  let data = {
+    getUrls: true,
+  };
+  await Neutralino.extensions.dispatch(extension, event, data);
+}
+
+dns();
+
+Neutralino.events.on("baseHost", (event) => {
+  baseUrl.value = event.detail;
+  store.dispatch("setBase", baseUrl.value);
+  initRequests();
+  checkUpdate();
+});
+Neutralino.events.on("savedJson", (event) => {
+  if (event.detail == "Error") {
+    toggleSnack("Error saving favorites");
+  } else {
+    toggleSnack("Favorites saved");
+  }
+});
+Neutralino.events.on("loadedJson", (event) => {
+  if (event.detail == "Error") {
+    toggleSnack("Error loading favorites");
+  } else {
+    favorites.value = JSON.parse(event.detail);
+    localStorage.setItem("favorites", event.detail);
+    toggleSnack("Favorites loaded");
+  }
+});
 </script>
 
 <style>
diff --git a/xradio-vue/src/components/FilterModal.vue b/xradio-vue/src/components/FilterModal.vue
index fe55a6d..af9bfc0 100644
--- a/xradio-vue/src/components/FilterModal.vue
+++ b/xradio-vue/src/components/FilterModal.vue
@@ -1,35 +1,35 @@
 <template>
-	<div
-		class="flex items-center justify-center fixed left-0 bottom-0 w-full h-full bg-gray-800 bg-opacity-50 z-20"
-		@click="toggleModal"
-	>
-		<div
-			tabindex="-1"
-			id="modal"
-			class="bg-white dark:bg-nord-gray4 rounded-lg w-5/6 max-w-3xl overflow-y-auto overscroll-none"
-			@click.stop
-		>
-			<div class="flex flex-col p-4">
-				<div class="flex w-full">
-					<div class="font-bold text-lg">Filter results</div>
-					<button
-						class="ml-auto rounded p-1 hover:bg-nord-white1 dark:hover:bg-nord-gray2 transition-colors duration-100 ease-out"
-						@click="toggleModal"
-					>
-						<svg
-							class="m-auto fill-current w-6 h-6"
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 18 18"
-						>
-							<path
-								d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
-							/>
-						</svg>
-						<span class="sr-only">Close</span>
-					</button>
-				</div>
-				<div class="py-2">
-					<!-- <button
+  <div
+    class="flex items-center justify-center fixed left-0 bottom-0 w-full h-full bg-gray-800 bg-opacity-50 z-20"
+    @click="toggleModal"
+  >
+    <div
+      tabindex="-1"
+      id="modal"
+      class="bg-white dark:bg-nord-gray4 rounded-lg w-5/6 max-w-3xl overflow-y-auto overscroll-none"
+      @click.stop
+    >
+      <div class="flex flex-col p-4">
+        <div class="flex w-full">
+          <div class="font-bold text-lg">Filter results</div>
+          <button
+            class="ml-auto rounded p-1 hover:bg-nord-white1 dark:hover:bg-nord-gray2 transition-colors duration-100 ease-out"
+            @click="toggleModal"
+          >
+            <svg
+              class="m-auto fill-current w-6 h-6"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 18 18"
+            >
+              <path
+                d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
+              />
+            </svg>
+            <span class="sr-only">Close</span>
+          </button>
+        </div>
+        <div class="py-2">
+          <!-- <button
 						id="dropCountry"
 						class="rounded-md flex content-center items-center justify-between w-full p-1 hover:bg-nord-white2 dark:hover:bg-nord-gray2 transition-colors duration-100 ease-out"
 						@click="showCountries = !showCountries"
@@ -51,128 +51,127 @@
 							></path>
 						</svg>
 					</button> -->
-                    <p class="pb-2">
-                        Choose countries
-                    </p>
-					<div
-						:class="showCountries ? '' : 'hidden'"
-						class="z-20 w-full max-h-72 overflow-y-scroll mx-3"
-					>
-						<button
-							class="rounded-md py-1 px-2 hover:bg-nord-white1 dark:hover:bg-nord-gray2 transition-colors duration-100 ease-out"
-                            @click="toggleCountries"
-						>
-							Toggle all
-						</button>
-						<ul
-							class="text-sm"
-							v-for="country in $store.state.countries"
-							:key="country"
-						>
-							<li>
-								<div
-									class="flex items-center p-2 rounded hover:bg-nord-white1 dark:hover:bg-nord-gray2"
-								>
-									<input
-										:id="country.iso_3166_1"
-										type="checkbox"
-										:value="country.iso_3166_1"
-                                        :checked="selectedCountries.has(country.iso_3166_1)"
-										class="w-4 h-4 text-blue-600 bg-nord-frost1 rounded border-nord-frost1 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2"
-                                        @change="changeCountrySelection"
-									/>
-									<label
-										:for="country.iso_3166_1"
-										class="ml-2 w-full text-sm font-medium text-gray-900 rounded dark:text-gray-300"
-									>
-										<img
-											class="w-6 inline mr-1"
-											:src="
-												'https://flagcdn.com/w20/' +
-												country.iso_3166_1.toLowerCase() +
-												'.png'
-											"
-											:srcset="
-												'https://flagcdn.com/w40/' +
-												country.iso_3166_1.toLowerCase() +
-												'.png 2x'
-											"
-											:alt="country.iso_3166_1"
-										/>{{ country.name }}
-									</label>
-								</div>
-							</li>
-						</ul>
-					</div>
-				</div>
+          <p class="pb-2">Choose countries</p>
+          <div
+            :class="showCountries ? '' : 'hidden'"
+            class="z-20 w-full max-h-72 overflow-y-scroll mx-3"
+          >
+            <button
+              class="rounded-md py-1 px-2 hover:bg-nord-white1 dark:hover:bg-nord-gray2 transition-colors duration-100 ease-out"
+              @click="toggleCountries"
+            >
+              Toggle all
+            </button>
+            <ul
+              class="text-sm"
+              v-for="country in store.state.countries"
+              :key="country"
+            >
+              <li>
+                <div
+                  class="flex items-center p-2 rounded hover:bg-nord-white1 dark:hover:bg-nord-gray2"
+                >
+                  <input
+                    :id="country.iso_3166_1"
+                    type="checkbox"
+                    :value="country.iso_3166_1"
+                    :checked="selectedCountries.has(country.iso_3166_1)"
+                    class="w-4 h-4 text-blue-600 bg-nord-frost1 rounded border-nord-frost1 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2"
+                    @change="changeCountrySelection"
+                  />
+                  <label
+                    :for="country.iso_3166_1"
+                    class="ml-2 w-full text-sm font-medium text-gray-900 rounded dark:text-gray-300"
+                  >
+                    <img
+                      class="w-6 inline mr-1"
+                      :src="
+                        'https://flagcdn.com/w20/' +
+                        country.iso_3166_1.toLowerCase() +
+                        '.png'
+                      "
+                      :srcset="
+                        'https://flagcdn.com/w40/' +
+                        country.iso_3166_1.toLowerCase() +
+                        '.png 2x'
+                      "
+                      :alt="country.iso_3166_1"
+                    />{{ country.name }}
+                  </label>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
 
-				<div class="ml-auto flex flex-col xs2:flex-row">
-					<button
-						class="ripple transition-colors duration-100 ease-out hover:bg-nord-white1 dark:hover:bg-nord-gray2 mt-2 xs2:mt-0 xs2:ml-2 py-2 px-4 rounded"
-						@click="toggleModal"
-					>
-						Close
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
+        <div class="ml-auto flex flex-col xs2:flex-row">
+          <button
+            class="ripple transition-colors duration-100 ease-out hover:bg-nord-white1 dark:hover:bg-nord-gray2 mt-2 xs2:mt-0 xs2:ml-2 py-2 px-4 rounded"
+            @click="toggleModal"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
-	data() {
-		return {
-			loading: false,
-			changed: false,
-			showCountries: true,
-			showQualities: false,
-			selectedCountries: new Set(),
-		}
-	},
-	created() {
-		this.selectedCountries = this.$store.state.selectedCountries
-	},
-	mounted() {
-		window.addEventListener("keydown", this.keyboardEvent)
-	},
-	methods: {
-		keyboardEvent(event) {
-			if (event.code == "Escape") {
-				this.toggleModal()
-			}
-		},
-		toggleModal() {
-            if(this.changed){
-                this.$store.dispatch("setSelectedCountries", this.selectedCountries);
-            }
-			this.$emit("close", this.changed)
-		},
-        toggleCountries(){
-            this.changed = true
-            if(this.selectedCountries.size != this.$store.state.countries.length){
-                for(let i = 0; i < this.$store.state.countries.length; i++){
-                    this.selectedCountries.add(this.$store.state.countries[i].iso_3166_1)
-                }
-            }
-            else{
-                this.selectedCountries.clear()
-            }
-        },
-        changeCountrySelection(element){
-            this.changed = true
-            if (element.target.checked){
-                this.selectedCountries.add(element.target.value)
-            }
-            else{
-                if(selectedCountries.has(element.target.value)){
-                    this.selectedCountries.delete(element.target.value)
-                }
-            }
-        }
-	},
-	beforeUnmount() {
-		window.removeEventListener("keydown", this.keyboardEvent)
-	},
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useStore } from "vuex";
+
+const store = useStore();
+const emit = defineEmits(["close"]);
+
+let loading = ref(false);
+let changed = ref(false);
+let showCountries = ref(true);
+let showQualities = ref(false);
+let selectedCountries = ref(new Set());
+
+selectedCountries.value = store.state.selectedCountries;
+
+onMounted(() => {
+  window.addEventListener("keydown", keyboardEvent);
+});
+
+function keyboardEvent(event) {
+  if (event.code == "Escape") {
+    toggleModal();
+  }
+}
+
+function toggleModal() {
+  if (changed.value) {
+    store.dispatch("setSelectedCountries", selectedCountries.value);
+  }
+  emit("close", changed.value);
 }
+
+function toggleCountries() {
+  changed.value = true;
+  if (selectedCountries.value.size != store.state.countries.length) {
+    for (let i = 0; i < store.state.countries.length; i++) {
+      selectedCountries.value.add(store.state.countries[i].iso_3166_1);
+    }
+  } else {
+    selectedCountries.value.clear();
+  }
+}
+
+function changeCountrySelection(element) {
+  changed.value = true;
+  if (element.target.checked) {
+    selectedCountries.value.add(element.target.value);
+  } else {
+    if (selectedCountries.value.has(element.target.value)) {
+      selectedCountries.value.delete(element.target.value);
+    }
+  }
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", keyboardEvent);
+});
 </script>
diff --git a/xradio-vue/src/components/navbar.vue b/xradio-vue/src/components/navbar.vue
index 465a0af..a466ccd 100644
--- a/xradio-vue/src/components/navbar.vue
+++ b/xradio-vue/src/components/navbar.vue
@@ -1,15 +1,6 @@
 <template>
   <nav
-    class="
-      fixed
-      w-12
-      p-2
-      z-20
-      h-full
-      bg-nord-white1
-      text-black
-      dark:text-nord-white3 dark:bg-nord-gray3
-    "
+    class="fixed w-12 p-2 z-20 h-full bg-nord-white1 text-black dark:text-nord-white3 dark:bg-nord-gray3"
   >
     <div>
       <button aria-label="Open Menu" @click="drawer">
@@ -56,21 +47,7 @@
       </div>
     </transition>
     <aside
-      class="
-        transform
-        top-0
-        left-0
-        w-64
-        bg-nord-white1
-        fixed
-        h-full
-        overflow-auto
-        ease-in-out
-        transition-transform
-        duration-300
-        z-30
-        dark:bg-nord-gray3
-      "
+      class="transform top-0 left-0 w-64 bg-nord-white1 fixed h-full overflow-auto ease-in-out transition-transform duration-300 z-30 dark:bg-nord-gray3"
       :class="isOpen ? 'translate-x-0' : '-translate-x-full'"
     >
       <!--
@@ -147,36 +124,31 @@
   </nav>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      isOpen: false,
-    };
-  },
-  methods: {
-    drawer() {
-      this.isOpen = !this.isOpen;
-    },
-    handle(path) {
-      if (this.$route.name != path) {
-        this.$router.push({ name: path });
-      }
-      this.drawer();
-    },
-  },
-  watch: {
-    isOpen: {
-      immediate: true,
-      handler(isOpen) {
-        if (process.client) {
-          if (isOpen) document.body.style.setProperty("overflow", "hidden");
-          else document.body.style.removeProperty("overflow");
-        }
-      },
-    },
-  },
-};
+<script setup>
+import { ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+let isOpen = ref(false);
+const route = useRoute();
+const router = useRouter();
+
+function drawer() {
+  isOpen.value = !isOpen.value;
+}
+
+function handle(path) {
+  if (route.name != path) {
+    router.push({ name: path });
+  }
+  drawer();
+}
+
+watch(isOpen, (isOpen) => {
+  if (process.client) {
+    if (isOpen) document.body.style.setProperty("overflow", "hidden");
+    else document.body.style.removeProperty("overflow");
+  }
+});
 </script>
 
 <style scoped>
diff --git a/xradio-vue/src/components/navbar2.vue b/xradio-vue/src/components/navbar2.vue
index 2ce9d97..5488964 100644
--- a/xradio-vue/src/components/navbar2.vue
+++ b/xradio-vue/src/components/navbar2.vue
@@ -1,30 +1,9 @@
 <template>
-  <nav
-    class="
-      fixed
-      w-12
-      py-2
-      h-full
-      bg-nord-white2
-      dark:bg-nord-gray3
-      z-20
-    "
-  >
+  <nav class="fixed w-12 py-2 h-full bg-nord-white2 dark:bg-nord-gray3 z-20">
     <div class="z-20 absolute w-full">
       <button
         @click="handle('home')"
-        class="
-          w-full
-          h-8
-          py-1
-          px-3
-          mt-2
-          hover:bg-white
-          dark:hover:bg-nord-gray1
-          transition-colors
-          duration-100
-          ease-out
-        "
+        class="w-full h-8 py-1 px-3 mt-2 hover:bg-white dark:hover:bg-nord-gray1 transition-colors duration-100 ease-out"
       >
         <span class="sr-only">Home</span>
         <svg class="fill-current" viewBox="0 0 24 24">
@@ -35,18 +14,7 @@
       </button>
       <button
         @click="handle('favorites')"
-        class="
-          w-full
-          h-8
-          py-1
-          px-3
-          mt-2
-          hover:bg-white
-          dark:hover:bg-nord-gray1
-          transition-colors
-          duration-100
-          ease-out
-        "
+        class="w-full h-8 py-1 px-3 mt-2 hover:bg-white dark:hover:bg-nord-gray1 transition-colors duration-100 ease-out"
       >
         <span class="sr-only">Favorites</span>
         <svg class="fill-current" viewBox="0 0 24 24">
@@ -57,18 +25,7 @@
       </button>
       <button
         @click="handle('searchHub')"
-        class="
-          w-full
-          h-8
-          py-1
-          px-3
-          mt-2
-          hover:bg-white
-          dark:hover:bg-nord-gray1
-          transition-colors
-          duration-100
-          ease-out
-        "
+        class="w-full h-8 py-1 px-3 mt-2 hover:bg-white dark:hover:bg-nord-gray1 transition-colors duration-100 ease-out"
       >
         <span class="sr-only">Search</span>
         <svg class="fill-current" viewBox="0 0 24 24">
@@ -79,18 +36,7 @@
       </button>
       <button
         @click="handle('about')"
-        class="
-          w-full
-          h-8
-          py-1
-          px-3
-          mt-2
-          hover:bg-white
-          dark:hover:bg-nord-gray1
-          transition-colors
-          duration-100
-          ease-out
-        "
+        class="w-full h-8 py-1 px-3 mt-2 hover:bg-white dark:hover:bg-nord-gray1 transition-colors duration-100 ease-out"
       >
         <span class="sr-only">About</span>
         <svg class="fill-current" viewBox="0 0 24 24">
@@ -103,14 +49,15 @@
   </nav>
 </template>
 
-<script>
-export default {
-  methods: {
-    handle(path) {
-      if (this.$route.name != path) {
-        this.$router.push({ name: path });
-      }
-    },
-  },
-};
-</script>
\ No newline at end of file
+<script setup>
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+
+function handle(path) {
+  if (route.name != path) {
+    router.push({ name: path });
+  }
+}
+</script>
diff --git a/xradio-vue/src/components/player.vue b/xradio-vue/src/components/player.vue
index 444ce86..b2be252 100644
--- a/xradio-vue/src/components/player.vue
+++ b/xradio-vue/src/components/player.vue
@@ -6,7 +6,7 @@
     <div
       class="w-3/4 mx-auto flex flex-row justify-center content-center items-center gap-x-2"
     >
-      <div v-if="loading" class="p-1 w-8 h-8 -mt-1">
+      <div v-if="props.loading" class="p-1 w-8 h-8 -mt-1">
         <svg
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
@@ -76,8 +76,8 @@
         </svg>
       </div>
       <button
-        v-else-if="!isPlaying || error"
-        @click="error ? '' : $emit('play', currentStation)"
+        v-else-if="!props.isPlaying || props.error"
+        @click="props.error ? '' : generalEmit('play')"
         class="player-button h-8 w-8"
       >
         <svg
@@ -91,7 +91,7 @@
           />
         </svg>
       </button>
-      <button v-else @click="$emit('stop')" class="player-button h-8 w-8">
+      <button v-else @click="generalEmit('stop')" class="player-button h-8 w-8">
         <svg
           class="fill-current"
           viewBox="0 0 24 24"
@@ -104,13 +104,13 @@
         </svg>
       </button>
       <img
-        v-if="currentStation.favicon != ''"
+        v-if="props.currentStation.favicon != ''"
         class="h-10 w-10 rounded object-contain"
-        :src="currentStation.favicon"
+        :src="props.currentStation.favicon"
         alt="Logo"
       />
       <img
-        v-else="currentStation.favicon != ''"
+        v-else="props.currentStation.favicon != ''"
         class="h-10 w-10 rounded object-contain"
         src="../assets/music.svg"
         alt="Logo"
@@ -118,26 +118,30 @@
       <small
         class="flex flex-col content-center items-center justify-center text-center"
       >
-        <i> {{ currentStation.codec }}</i>
-        <i v-if="currentStation.bitrate != ''">
-          {{ currentStation.bitrate }}k
+        <i> {{ props.currentStation.codec }}</i>
+        <i v-if="props.currentStation.bitrate != ''">
+          {{ props.currentStation.bitrate }}k
         </i>
       </small>
       <div class="flex flex-col w-full text-center content-center items-center">
-        <div class="flex items-center content-center justify-center w-full max-w-272 md:max-w-none">
+        <div
+          class="flex items-center content-center justify-center w-full max-w-272 md:max-w-none"
+        >
           <p class="w-full marquee font-bold">
             <span>
-              {{ currentStation.name }}
+              {{ props.currentStation.name }}
             </span>
           </p>
         </div>
-        <p class="truncate text-sm" id="tags">{{ currentStation.tags }}</p>
+        <p class="truncate text-sm" id="tags" :title="props.currentStation.tags">
+          {{ props.currentStation.tags }}
+        </p>
       </div>
       <span
-        v-if="currentStation.homepage != ''"
+        v-if="props.currentStation.homepage != ''"
         class="text-center ml-auto player-button"
         title="Homepage"
-        @click.stop="openLink(currentStation.homepage)"
+        @click.stop="openLink(props.currentStation.homepage)"
       >
         <svg class="fill-current h-6 w-6" viewBox="0 0 24 24">
           <path
@@ -213,7 +217,7 @@
         </transition>
       </div>
       <button
-        @click="$emit('close')"
+        @click="generalEmit('close')"
         class="absolute right-0 top-0 player-button"
       >
         <svg class="h-6" viewBox="0 0 24 24">
@@ -227,55 +231,72 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    isPlaying: Boolean,
-    loading: Boolean,
-    currentStation: Object,
-    error: Boolean,
-    favorites: Object,
-  },
-  data() {
-    return {
-      isFav: false,
-      showVol: false,
-      volume: 100,
-    };
-  },
-  beforeMount() {
-    this.volume = this.$store.state.volume;
-  },
-  mounted() {
-    this.checkFav();
-  },
-  updated() {
-    this.checkFav();
-  },
-  methods: {
-    manageFavorites() {
-      this.isFav = !this.isFav;
-      this.$emit("manageFavorites", this.currentStation.stationuuid);
-    },
-    checkFav() {
-      if (this.currentStation.stationuuid in this.favorites) {
-        this.isFav = true;
-      } else {
-        this.isFav = false;
-      }
-    },
-    async openLink(link) {
-      await window.Neutralino.os.open(link);
-    },
-  },
-  watch: {
-    volume(volume) {
-      this.$store.dispatch("volume", volume);
-      localStorage.setItem("volume", volume);
-      this.$emit("volume");
-    },
-  },
-};
+<script setup>
+import { ref, onBeforeMount, onMounted, onUpdated, watch } from "vue";
+import { useStore } from "vuex";
+
+const store = useStore();
+const emit = defineEmits([
+  "play",
+  "stop",
+  "close",
+  "manageFavorites",
+  "volume",
+]);
+
+const props = defineProps({
+  isPlaying: Boolean,
+  loading: Boolean,
+  currentStation: Object,
+  error: Boolean,
+  favorites: Object,
+});
+let isFav = ref(false);
+let showVol = ref(false);
+let volume = ref(100);
+
+onBeforeMount(() => {
+  volume.value = store.state.volume;
+});
+
+onUpdated(() => {
+  checkFav();
+});
+
+onMounted(() => {
+  checkFav();
+});
+
+function generalEmit(emitType) {
+  if (emitType == "play") {
+    emit("play", props.currentStation);
+  } else {
+    emit(emitType);
+  }
+}
+
+function manageFavorites() {
+  isFav.value = !isFav.value;
+  emit("manageFavorites", props.currentStation.stationuuid);
+}
+
+function checkFav() {
+  if (props.currentStation.stationuuid in props.favorites) {
+    isFav.value = true;
+  } else {
+    isFav.value = false;
+  }
+}
+
+async function openLink(link) {
+  await window.Neutralino.os.open(link);
+}
+
+watch(volume, (volume) => {
+  store.dispatch("volume", volume);
+  localStorage.setItem("volume", volume);
+  emit("volume");
+});
 </script>
 
 <style scoped>
diff --git a/xradio-vue/src/components/snackbar.vue b/xradio-vue/src/components/snackbar.vue
index b684ed1..29f5afd 100644
--- a/xradio-vue/src/components/snackbar.vue
+++ b/xradio-vue/src/components/snackbar.vue
@@ -1,33 +1,13 @@
 <template>
   <div
-    class="
-      rounded
-      flex
-      content-center
-      items-center
-      shadow-md
-      w-fit
-      sticky
-      top-2
-      float-right
-      mt-2
-      p-2
-      gap-x-2
-      text-black
-      bg-nord-aurora1
-      z-10
-      text-large
-      font-bold
-    "
+    class="rounded flex content-center items-center shadow-md w-fit sticky top-2 float-right mt-2 p-2 gap-x-2 text-black bg-nord-aurora1 z-10 text-large font-bold"
   >
-    <span>{{ msg }}</span>
+    <span>{{ props.msg }}</span>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    msg: String,
-  },
-};
-</script>
\ No newline at end of file
+<script setup>
+const props = defineProps({
+  msg: String,
+});
+</script>
diff --git a/xradio-vue/src/components/stationCard.vue b/xradio-vue/src/components/stationCard.vue
index eb2f0cc..152b53c 100644
--- a/xradio-vue/src/components/stationCard.vue
+++ b/xradio-vue/src/components/stationCard.vue
@@ -17,53 +17,53 @@
     "
   >
     <img
-      v-if="station.favicon != ''"
+      v-if="props.station.favicon != ''"
       class="h-16 rounded object-contain
       dark:bg-white"
-      :src="station.favicon"
-      alt="Logo"
+      :src="props.station.favicon"
+      :alt="'Station logo for ' + props.station.name"
     />
     <svg
       v-else
       class="fill-current h-16 rounded dark:text-nord-white3"
       viewBox="0 0 24 24"
-      alt="Logo"
+      alt="Default station logo"
     >
       <path
         d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z"
       />
     </svg>
-    <h2 class="truncate w-full text-center font-bold" :title="station.name">
-      {{ station.name }}
+    <h2 class="truncate w-full text-center font-bold" :title="props.station.name">
+      {{ props.station.name }}
     </h2>
     <div>
-      <span v-if="station.countrycode != ''">
+      <span v-if="props.station.countrycode != ''">
         <img
           class="w-6 inline mr-1"
           :src="
             'https://flagcdn.com/w20/' +
-            station.countrycode.toLowerCase() +
+            props.station.countrycode.toLowerCase() +
             '.png'
           "
           :srcset="
             'https://flagcdn.com/w40/' +
-            station.countrycode.toLowerCase() +
+            props.station.countrycode.toLowerCase() +
             '.png 2x'
           "
-          :alt="station.countrycode"
+          :alt="props.station.countrycode"
           :title="
-            station.state != ''
-              ? station.country + ' - ' + station.state
-              : station.country
+            props.station.state != ''
+              ? props.station.country + ' - ' + props.station.state
+              : props.station.country
           "
         />
       </span>
       <span class="text-nord-frost4 dark:text-nord-white1">
-        {{ station.bitrate ? station.bitrate + "K" : "" }}
+        {{ props.station.bitrate ? props.station.bitrate + "K" : "" }}
       </span>
     </div>
     <span
-      v-if="station.homepage != ''"
+      v-if="props.station.homepage != ''"
       class="
         text-center
         rounded-md
@@ -76,7 +76,7 @@
         cursor-pointer
       "
       title="Homepage"
-      @click.stop="openLink(station.homepage)"
+      @click.stop="openLink(props.station.homepage)"
     >
       <svg class="fill-current h-6 w-6" viewBox="0 0 24 24">
         <path
@@ -87,17 +87,14 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    station: Object,
-  },
-  methods: {
-    async openLink(link) {
-      await window.Neutralino.os.open(link);
-    },
-  },
-};
+<script setup>
+const props = defineProps({
+  station: Object,
+});
+
+async function openLink(link) {
+  await window.Neutralino.os.open(link);
+}
 </script>
 
 <style scoped>
diff --git a/xradio-vue/src/components/stationList.vue b/xradio-vue/src/components/stationList.vue
index 53bc0cc..ae02883 100644
--- a/xradio-vue/src/components/stationList.vue
+++ b/xradio-vue/src/components/stationList.vue
@@ -1,35 +1,16 @@
 <template>
   <div
-    class="
-      px-2
-      py-2
-      rounded-md
-      grid grid-cols-7
-      sm:grid-cols-10
-      content-center
-      items-center
-      cursor-pointer
-      w-full
-      gap-x-2
-      mb-4
-      dark:bg-nord-gray2
-      hover:bg-nord-white2
-      dark:hover:bg-nord-gray3
-      transition-colors
-      duration-100
-      ease-out
-      shadow-md
-    "
+    class="px-2 py-2 rounded-md grid grid-cols-7 sm:grid-cols-10 content-center items-center cursor-pointer w-full gap-x-2 mb-4 dark:bg-nord-gray2 hover:bg-nord-white2 dark:hover:bg-nord-gray3 transition-colors duration-100 ease-out shadow-md"
   >
     <img
-      v-if="station.favicon != ''"
+      v-if="props.station.favicon != ''"
       class="h-10 w-10 rounded object-contain dark:bg-white"
-      :src="station.favicon"
-      alt="Logo"
+      :src="props.station.favicon"
+      :alt="'Station logo for ' + props.station.name"
     />
     <svg
       v-else
-      alt="Logo"
+      alt="Default station logo"
       class="fill-current h-10 rounded dark:text-nord-white3"
       viewBox="0 0 24 24"
     >
@@ -38,65 +19,47 @@
       />
     </svg>
     <div
-      class="
-        dark:text-nord-white3
-        w-full
-        font-bold
-        truncate
-        col-span-4
-        sm:col-span-7
-      "
+      class="dark:text-nord-white3 w-full font-bold truncate col-span-4 sm:col-span-7"
     >
-      <h2 class="truncate" :title="station.name">
-        {{ station.name }}
+      <h2 class="truncate" :title="props.station.name">
+        {{ props.station.name }}
       </h2>
       <img
-        v-if="station.countrycode != ''"
+        v-if="props.station.countrycode != ''"
         class="w-6 inline mr-1"
-        :class="station.homepage != '' ? '' : 'col-span-2'"
+        :class="props.station.homepage != '' ? '' : 'col-span-2'"
         :src="
           'https://flagcdn.com/w20/' +
-          station.countrycode.toLowerCase() +
+          props.station.countrycode.toLowerCase() +
           '.png'
         "
         :srcset="
           'https://flagcdn.com/w40/' +
-          station.countrycode.toLowerCase() +
+          props.station.countrycode.toLowerCase() +
           '.png 2x'
         "
-        :alt="station.countrycode"
+        :alt="props.station.countrycode"
         :title="
-          station.state != ''
-            ? station.country + ' - ' + station.state
-            : station.country
+          props.station.state != ''
+            ? props.station.country + ' - ' + props.station.state
+            : props.station.country
         "
       />
       <span
         class="text-nord-frost4 dark:text-nord-frost3"
-        :title="station.tags"
+        :title="props.station.tags"
       >
-        {{ station.tags }}
+        {{ props.station.tags }}
       </span>
     </div>
     <span class="ml-auto">
-      {{ station.bitrate ? station.bitrate + "K" : "" }}
+      {{ props.station.bitrate ? props.station.bitrate + "K" : "" }}
     </span>
     <span
-      v-if="station.homepage != ''"
-      class="
-        text-center
-        ml-auto
-        rounded-md
-        p-1
-        hover:bg-nord-frost2
-        dark:hover:bg-nord-gray1
-        transition-colors
-        duration-100
-        ease-out
-        cursor-pointer
-      "
+      v-if="props.station.homepage != ''"
+      class="text-center ml-auto rounded-md p-1 hover:bg-nord-frost2 dark:hover:bg-nord-gray1 transition-colors duration-100 ease-out cursor-pointer"
       title="Homepage"
-      @click.stop="openLink(station.homepage)"
+      @click.stop="openLink(props.station.homepage)"
     >
       <svg class="fill-current h-6 w-6" viewBox="0 0 24 24">
         <path
@@ -107,17 +70,14 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    station: Object,
-  },
-  methods: {
-    async openLink(link) {
-      await window.Neutralino.os.open(link);
-    },
-  },
-};
+<script setup>
+const props = defineProps({
+  station: Object,
+});
+
+async function openLink(link) {
+  await window.Neutralino.os.open(link);
+}
 </script>
 
 <style scoped>
@@ -129,4 +89,4 @@ export default {
   background-color: #32005a;
 }
 */
-</style>
\ No newline at end of file
+</style>
diff --git a/xradio-vue/src/components/updateBanner.vue b/xradio-vue/src/components/updateBanner.vue
index ba813f2..fbcdb0e 100644
--- a/xradio-vue/src/components/updateBanner.vue
+++ b/xradio-vue/src/components/updateBanner.vue
@@ -1,20 +1,6 @@
 <template>
   <div
-    class="
-      sticky
-      top-2
-      w-max
-      text-black
-      pl-14
-      p-2
-      bg-nord-aurora4
-      flex
-      content-center
-      items-center
-      gap-x-2
-      z-10
-      -mb-10
-    "
+    class="sticky top-2 w-max text-black pl-14 p-2 bg-nord-aurora4 flex content-center items-center gap-x-2 z-10 -mb-10"
   >
     <h1 class="text-large cursor-pointer inline" @click="$emit('update')">
       Update available. Click to download
@@ -30,9 +16,4 @@
   </div>
 </template>
 
-<script>
-export default {};
-</script>
-
-<style>
-</style>
\ No newline at end of file
+<script setup></script>
diff --git a/xradio-vue/src/views/about.vue b/xradio-vue/src/views/about.vue
index 9112595..eac258c 100644
--- a/xradio-vue/src/views/about.vue
+++ b/xradio-vue/src/views/about.vue
@@ -1,107 +1,96 @@
 <template>
-	<div>
-		<p>App version: {{ config.version }}</p>
-		<p>Current instance: {{ $store.state.baseUrl }}</p>
-		<br />
-		<h1 class="text-xl dark:text-nord-white3 font-bold">About</h1>
-		<img
-			src="https://www.gnu.org/graphics/agplv3-with-text-162x68.png"
-			alt="AGPLv3"
-			class="dark:bg-nord-white1 rounded p-2 my-1"
-		/>
-		<p>
-			XRadio is a desktop app to listen to internet radio stations from
-			all over the world. The source code can be found on
-			<span
-				class="text-nord-frost2 font-bold cursor-pointer"
-				@click="
-					$emit('link', 'https://github.com/bocchilorenzo/xradio')
-				"
-				>Github</span
-			>.
-		</p>
-		<br />
-		<p>Technologies used:</p>
-		<ul class="list-disc">
-			<li>
-				<span
-					class="text-nord-frost2 font-bold cursor-pointer"
-					@click="$emit('link', 'https://vuejs.org/')"
-				>
-					Vue.js
-				</span>
-				for the graphical interface
-			</li>
-			<li>
-				<span
-					class="text-nord-frost2 font-bold cursor-pointer"
-					@click="$emit('link', 'https://tailwindcss.com/')"
-				>
-					Tailwind CSS
-				</span>
-				for the styling
-			</li>
-			<li>
-				<span
-					class="text-nord-frost2 font-bold cursor-pointer"
-					@click="$emit('link', 'https://neutralino.js.org/')"
-				>
-					Neutralinojs
-				</span>
-				for the application wrapper
-			</li>
-			<li>
-				<span
-					class="text-nord-frost2 font-bold cursor-pointer"
-					@click="$emit('link', 'https://api.radio-browser.info/')"
-				>
-					Radio-browser API
-				</span>
-				for the radio stations
-			</li>
-			<li>
-				<span
-					class="text-nord-frost2 font-bold cursor-pointer"
-					@click="$emit('link', 'https://flagpedia.net')"
-				>
-					Flagpedia API
-				</span>
-				for the country flags
-			</li>
-		</ul>
-		<p>
-			App icon found at
-			<span
-				@click="
-					$emit(
-						'link',
-						'https://www.vecteezy.com/free-vector/radio-icon'
-					)
-				"
-				class="text-nord-frost2 font-bold cursor-pointer"
-			>
-				Radio Icon Vectors by Vecteezy
-			</span>
-		</p>
-	</div>
+  <div>
+    <p>App version: {{ props.config.version }}</p>
+    <p>Current instance: {{ store.state.baseUrl }}</p>
+    <br />
+    <h1 class="text-xl dark:text-nord-white3 font-bold">About</h1>
+    <img
+      src="https://www.gnu.org/graphics/agplv3-with-text-162x68.png"
+      alt="AGPLv3 logo"
+      class="dark:bg-nord-white1 rounded p-2 my-1"
+    />
+    <p>
+      XRadio is a desktop app to listen to internet radio stations from all over
+      the world. The source code can be found on
+      <span
+        class="text-nord-frost2 font-bold cursor-pointer"
+        @click="$emit('link', 'https://github.com/bocchilorenzo/xradio')"
+        >Github</span
+      >.
+    </p>
+    <br />
+    <p>Technologies used:</p>
+    <ul class="list-disc">
+      <li>
+        <span
+          class="text-nord-frost2 font-bold cursor-pointer"
+          @click="$emit('link', 'https://vuejs.org/')"
+        >
+          Vue.js
+        </span>
+        for the graphical interface
+      </li>
+      <li>
+        <span
+          class="text-nord-frost2 font-bold cursor-pointer"
+          @click="$emit('link', 'https://tailwindcss.com/')"
+        >
+          Tailwind CSS
+        </span>
+        for the styling
+      </li>
+      <li>
+        <span
+          class="text-nord-frost2 font-bold cursor-pointer"
+          @click="$emit('link', 'https://neutralino.js.org/')"
+        >
+          Neutralinojs
+        </span>
+        for the application wrapper
+      </li>
+      <li>
+        <span
+          class="text-nord-frost2 font-bold cursor-pointer"
+          @click="$emit('link', 'https://api.radio-browser.info/')"
+        >
+          Radio-browser API
+        </span>
+        for the radio stations
+      </li>
+      <li>
+        <span
+          class="text-nord-frost2 font-bold cursor-pointer"
+          @click="$emit('link', 'https://flagpedia.net')"
+        >
+          Flagpedia API
+        </span>
+        for the country flags
+      </li>
+    </ul>
+    <p>
+      App icon found at
+      <span
+        @click="
+          $emit('link', 'https://www.vecteezy.com/free-vector/radio-icon')
+        "
+        class="text-nord-frost2 font-bold cursor-pointer"
+      >
+        Radio Icon Vectors by Vecteezy
+      </span>
+    </p>
+  </div>
 </template>
 
-<script>
-export default {
-	name: "about",
-	props:{
-		config: Object
-	},
-	methods: {
-		async link(url) {
-			await window.Neutralino.os.open(url)
-		},
-	},
-}
+<script setup>
+import { useStore } from "vuex";
+const props = defineProps({
+  config: Object,
+});
+const store = useStore();
 </script>
 
 <style scoped>
 li {
-	@apply my-1;
+  @apply my-1;
 }
 </style>
diff --git a/xradio-vue/src/views/favorites.vue b/xradio-vue/src/views/favorites.vue
index 3ba65ea..b867be3 100644
--- a/xradio-vue/src/views/favorites.vue
+++ b/xradio-vue/src/views/favorites.vue
@@ -21,7 +21,7 @@
         </button> -->
         <div>
           <button
-            @click="$emit('exportFavorites')"
+            @click="emit('exportFavorites')"
             class="h-full p-2 mb-4 rounded hover:bg-nord-white2 dark:hover:bg-nord-gray3 transition-colors duration-100 ease-out"
             title="Export"
           >
@@ -37,7 +37,7 @@
             </svg>
           </button>
           <button
-            @click="$emit('importFavorites')"
+            @click="emit('importFavorites')"
             class="h-full p-2 mb-4 rounded hover:bg-nord-white2 dark:hover:bg-nord-gray3 transition-colors duration-100 ease-out"
             title="Import"
           >
@@ -54,15 +54,15 @@
           </button>
         </div>
       </header>
-      <div v-if="Object.keys(favorites).length != 0">
+      <div v-if="Object.keys(props.favorites).length != 0">
         <div
           class="flex content-center items-center gap-x-2"
-          v-for="station in favorites"
+          v-for="station in props.favorites"
           :key="station.stationuuid"
         >
           <station-list @click="play(station)" :station="station" />
           <button
-            @click="$emit('removeFav', station.stationuuid)"
+            @click="emit('removeFav', station.stationuuid)"
             class="h-full p-2 mb-4 rounded hover:bg-nord-white2 dark:hover:bg-nord-gray3 transition-colors duration-100 ease-out"
           >
             <svg class="h-6" viewBox="0 0 24 24">
@@ -83,22 +83,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import StationList from "../components/StationList.vue";
-export default {
-  components: { StationList },
-  name: "favorites",
-  props: {
-    baseUrl: String,
-    favorites: Object,
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    play(station) {
-      this.$emit("play", station);
-    },
-  },
+
+const props = defineProps({
+  baseUrl: String,
+  favorites: Object,
+});
+
+const emit = defineEmits(["removeFav", "emptyFav", "exportFavorites", "importFavorites", "play"]);
+
+const play = (station) => {
+  emit("play", station);
 };
 </script>
diff --git a/xradio-vue/src/views/home.vue b/xradio-vue/src/views/home.vue
index b2c841e..fe831b9 100644
--- a/xradio-vue/src/views/home.vue
+++ b/xradio-vue/src/views/home.vue
@@ -7,7 +7,7 @@
       <div class="overflow-x-auto">
         <div class="grid grid-cols-10 gap-x-2 w-max pb-2">
           <station-card
-            v-for="station in $store.state.recentStations"
+            v-for="station in store.state.recentStations"
             :key="station.stationuuid"
             @click="play(station)"
             :station="station"
@@ -16,22 +16,18 @@
       </div>
     </div>
     <div class="mb-10">
-      <h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">
-        Popular
-      </h1>
+      <h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">Popular</h1>
       <station-list
-        v-for="station in $store.state.mostPopular"
+        v-for="station in store.state.mostPopular"
         :key="station.stationuuid"
         @click="play(station)"
         :station="station"
       />
     </div>
     <div class="mb-10">
-      <h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">
-        Most rated
-      </h1>
+      <h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">Most rated</h1>
       <station-list
-        v-for="station in $store.state.mostRated"
+        v-for="station in store.state.mostRated"
         :key="station.stationuuid"
         @click="play(station)"
         :station="station"
@@ -40,64 +36,69 @@
   </div>
 </template>
 
-<script>
-import axios from "axios";
-import stationCard from "../components/StationCard.vue";
+<script setup>
+import StationCard from "../components/StationCard.vue";
 import StationList from "../components/StationList.vue";
-export default {
-  components: { stationCard, StationList },
-  name: "home",
-  props: {
-    baseUrl: String,
-    config: Object,
-  },
-  created() {
-    if (!this.$store.state.initialLoad) {
-      this.initHome();
-      this.$store.dispatch("loaded");
-    }
-  },
-  methods: {
-    play(station) {
-      this.$emit("play", station);
-    },
-    async initHome() {
-      await axios({
-        mode: "get",
-        url: this.baseUrl + this.$store.state.urls.recentStations,
-        headers: { "User-Agent": "XRadio/" + this.config.version },
-      })
-        .then((res) => {
-          this.$store.dispatch("add", ["recentStations", res.data]);
-        })
-        .catch((err) => {
-          console.err(err);
-        });
+import { useStore } from "vuex";
+
+const props = defineProps({
+  baseUrl: String,
+  config: Object,
+});
+
+const emit = defineEmits(["play"]);
+const store = useStore();
+
+function play(station) {
+  emit("play", station);
+}
+
+async function initHome() {
+  await fetch(props.baseUrl + store.state.urls.recentStations, {
+    method: "GET",
+    headers: { "User-Agent": "XRadio/" + props.config.version },
+  })
+    .then((res) => {
+      return res.json();
+    })
+    .then((res) => {
+      store.dispatch("add", ["recentStations", res]);
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+
+  await fetch(props.baseUrl + store.state.urls.mostPopular, {
+    method: "GET",
+    headers: { "User-Agent": "XRadio/" + props.config.version },
+  })
+    .then((res) => {
+      return res.json();
+    })
+    .then((res) => {
+      store.dispatch("add", ["mostPopular", res]);
+    })
+    .catch((err) => {
+      console.error(err);
+    });
 
-      await axios({
-        mode: "get",
-        url: this.baseUrl + this.$store.state.urls.mostPopular,
-        headers: { "User-Agent": "XRadio/" + this.config.version },
-      })
-        .then((res) => {
-          this.$store.dispatch("add", ["mostPopular", res.data]);
-        })
-        .catch((err) => {
-          console.err(err);
-        });
+  await fetch(props.baseUrl + store.state.urls.mostRated, {
+    method: "GET",
+    headers: { "User-Agent": "XRadio/" + props.config.version },
+  })
+    .then((res) => {
+      return res.json();
+    })
+    .then((res) => {
+      store.dispatch("add", ["mostRated", res]);
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}
 
-      await axios({
-        mode: "get",
-        url: this.baseUrl + this.$store.state.urls.mostRated,
-        headers: { "User-Agent": "XRadio/" + this.config.version },
-      })
-        .then((res) => {
-          this.$store.dispatch("add", ["mostRated", res.data]);
-        })
-        .catch((err) => {
-          console.err(err);
-        });
-    },
-  },
-};
-</script>
\ No newline at end of file
+if (!store.state.initialLoad) {
+  initHome();
+  store.dispatch("loaded");
+}
+</script>
diff --git a/xradio-vue/src/views/search.vue b/xradio-vue/src/views/search.vue
index 9844988..03eb05a 100644
--- a/xradio-vue/src/views/search.vue
+++ b/xradio-vue/src/views/search.vue
@@ -1,301 +1,289 @@
 <template>
-	<div>
-		<transition name="fade" mode="out-in">
-			<filter-modal v-if="filterDialog" @close="filterResults" />
-		</transition>
-		<div class="relative w-full group">
-			<svg
-				class="ml-1 w-6 h-10 fill-current absolute text-nord-gray4 dark:text-nord-white1"
-				viewBox="0 0 24 24"
-			>
-				<path
-					d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-				/>
-			</svg>
-			<button
-				v-if="!loading"
-				class="absolute right-0"
-				:class="searchText.length > 0 ? '' : 'opacity-30'"
-				@click="
-					searchText.length > 0
-						? ((searchText = ''),
-						  (results = {}),
-						  (noResult = false),
-						  initBottomValues())
-						: null
-				"
-			>
-				<svg
-					class="mr-1 w-6 h-10 fill-current text-nord-gray4 dark:text-nord-white1"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="currentColor"
-						d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
-					/>
-				</svg>
-			</button>
-			<svg
-				v-else
-				class="w-6 h-10 absolute right-0 mr-1 fill-current"
-				viewBox="0 0 40 40"
-			>
-				<path
-					opacity="0.2"
-					d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+  <div>
+    <transition name="fade" mode="out-in">
+      <filter-modal v-if="filterDialog" @close="filterResults" />
+    </transition>
+    <div class="relative w-full group">
+      <svg
+        class="ml-1 w-6 h-10 fill-current absolute text-nord-gray4 dark:text-nord-white1"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+        />
+      </svg>
+      <button
+        v-if="!loading"
+        class="absolute right-0"
+        :class="searchText.length > 0 ? '' : 'opacity-30'"
+        @click="
+          searchText.length > 0
+            ? ((searchText = ''),
+              (results = {}),
+              (noResult = false),
+              initBottomValues())
+            : null
+        "
+      >
+        <svg
+          class="mr-1 w-6 h-10 fill-current text-nord-gray4 dark:text-nord-white1"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
+          />
+        </svg>
+      </button>
+      <svg
+        v-else
+        class="w-6 h-10 absolute right-0 mr-1 fill-current"
+        viewBox="0 0 40 40"
+      >
+        <path
+          opacity="0.2"
+          d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
     s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
     c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"
-				/>
-				<path
-					d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+        />
+        <path
+          d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
     C22.32,8.481,24.301,9.057,26.013,10.047z"
-				>
-					<animateTransform
-						attributeType="xml"
-						attributeName="transform"
-						type="rotate"
-						from="0 20 20"
-						to="360 20 20"
-						dur="0.5s"
-						repeatCount="indefinite"
-					/>
-				</path>
-			</svg>
-			<input
-				type="text"
-				id="searchBox"
-				placeholder="Search station"
-				class="pl-8 py-2 w-full rounded bg-nord-white2 dark:bg-nord-gray4 text-nord-gray4 dark:text-nord-white1 transition-shadow duration-200 ease-out"
-				v-model="searchText"
-				@keydown.enter="search"
-				maxlength="64"
-			/>
-		</div>
-		<div
-			v-if="!loading"
-			class="my-4 py-2 bg-white dark:bg-nord-gray1 transition-colors duration-100 ease-out dark:text-nord-white3 flex items-center content-center justify-between gap-x-2 sticky top-0"
-		>
-			<button
-				class="rounded hover:bg-nord-white1 dark:hover:bg-nord-gray4 p-1 transition-colors duration-100 ease-out"
-				@click="$router.go(-1)"
-				name="Go back"
-			>
-				<svg class="fill-current h-6" viewBox="0 0 24 24">
-					<path
-						d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-					/>
-				</svg>
-				<span class="sr-only">Go back</span>
-			</button>
-			<h1 class="text-xl font-bold">Search results</h1>
-			<button
-				class="rounded hover:bg-nord-white1 dark:hover:bg-nord-gray4 p-1 transition-colors duration-100 ease-out"
-				@click="filterDialog = !filterDialog"
-				name="Filter results"
-			>
-				<svg
-					v-if="$store.state.selectedCountries.size == 0"
-					class="fill-current h-6"
-					viewBox="0 0 24 24"
-				>
-					<path
-						d="M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z"
-					/>
-				</svg>
-				<svg
-					v-else
-					class="fill-current h-6"
-					viewBox="0 0 24 24"
-				>
-					<path
-						fill="currentColor"
-						d="M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3H17C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04M17.75 21L15 18L16.16 16.84L17.75 18.43L21.34 14.84L22.5 16.25L17.75 21"
-					/>
-				</svg>
-				<span class="sr-only">Filter results</span>
-			</button>
-		</div>
-		<div class="mb-10" v-if="Object.keys(resultsShow).length != 0">
-			<station-list
-				v-for="station in resultsShow"
-				:key="station.stationuuid"
-				@click="play(station)"
-				:station="station"
-			/>
-		</div>
-		<div class="mb-10" v-else-if="noResult">
-			<h2 class="text-lg dark:text-nord-white3 text-center">
-				No station found
-			</h2>
-		</div>
-	</div>
+        >
+          <animateTransform
+            attributeType="xml"
+            attributeName="transform"
+            type="rotate"
+            from="0 20 20"
+            to="360 20 20"
+            dur="0.5s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      <input
+        type="text"
+        id="searchBox"
+        placeholder="Search station"
+        class="pl-8 py-2 w-full rounded bg-nord-white2 dark:bg-nord-gray4 text-nord-gray4 dark:text-nord-white1 transition-shadow duration-200 ease-out"
+        v-model="searchText"
+        @keydown.enter="search"
+        maxlength="64"
+      />
+    </div>
+    <div
+      v-if="!loading"
+      class="my-4 py-2 bg-white dark:bg-nord-gray1 transition-colors duration-100 ease-out dark:text-nord-white3 flex items-center content-center justify-between gap-x-2 sticky top-0"
+    >
+      <button
+        class="rounded hover:bg-nord-white1 dark:hover:bg-nord-gray4 p-1 transition-colors duration-100 ease-out"
+        @click="router.go(-1)"
+        name="Go back"
+      >
+        <svg class="fill-current h-6" viewBox="0 0 24 24">
+          <path
+            d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+          />
+        </svg>
+        <span class="sr-only">Go back</span>
+      </button>
+      <h1 class="text-xl font-bold">Search results</h1>
+      <button
+        class="rounded hover:bg-nord-white1 dark:hover:bg-nord-gray4 p-1 transition-colors duration-100 ease-out"
+        @click="filterDialog = !filterDialog"
+        name="Filter results"
+      >
+        <svg
+          v-if="store.state.selectedCountries.size == 0"
+          class="fill-current h-6"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z"
+          />
+        </svg>
+        <svg v-else class="fill-current h-6" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3H17C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04M17.75 21L15 18L16.16 16.84L17.75 18.43L21.34 14.84L22.5 16.25L17.75 21"
+          />
+        </svg>
+        <span class="sr-only">Filter results</span>
+      </button>
+    </div>
+    <div class="mb-10" v-if="Object.keys(resultsShow).length != 0">
+      <station-list
+        v-for="station in resultsShow"
+        :key="station.stationuuid"
+        @click="play(station)"
+        :station="station"
+      />
+    </div>
+    <div class="mb-10" v-else-if="noResult">
+      <h2 class="text-lg dark:text-nord-white3 text-center">
+        No station found
+      </h2>
+    </div>
+  </div>
 </template>
 
-<script>
-import axios from "axios"
-import StationList from "../components/StationList.vue"
-import FilterModal from "../components/FilterModal.vue"
-export default {
-	components: { StationList, FilterModal },
-	name: "search",
-	props: {
-		baseUrl: String,
-		config: Object,
-	},
-	created() {
-		if (this.$route.params.mode == "text") {
-			this.searchText = this.$route.params.q
-		}
-		this.search()
-	},
-	mounted() {
-		document.getElementById("searchBox").focus()
-	},
-	data() {
-		return {
-			searchText: "",
-			results: [],
-			resultsShow: [],
-			startIndex: 0,
-			nextIndex: 15,
-			bottom: false,
-			stop: false,
-			last: false,
-			loading: true,
-			noResult: false,
-			filterDialog: false,
-		}
-	},
-	methods: {
-		async filterResults(changed) {
-			this.filterDialog = !this.filterDialog
-			if (changed) {
-				this.initValues()
-				await this.search()
-			}
-		},
-		initValues() {
-			this.startIndex = 0
-			this.nextIndex = 15
-			this.results = []
-			this.resultsShow = []
-			this.loading = true
-			this.noResult = false
-			this.bottom = false
-			this.stop = false
-			this.last = false
-		},
-		async search() {
-			this.loading = true
-			let url = ""
-			this.initValues()
-			if (this.$route.params.mode == "country") {
-				url =
-					this.baseUrl +
-					this.$store.state.urls.search.countrycode +
-					this.$route.params.q
-			} else {
-				url =
-					this.baseUrl +
-					this.$store.state.urls.search.name +
-					this.searchText
-			}
-			await axios({
-				mode: "get",
-				url: url,
-				headers: { "User-Agent": "XRadio/" + this.config.version },
-			})
-				.then((res) => {
-					if (res.data.length == 0) {
-						this.noResult = true
-					} else {
-						if (this.$store.state.selectedCountries.size > 0) {
-							for (let i = 0; i < res.data.length; i++) {
-								if (
-									this.$store.state.selectedCountries.has(
-										res.data[i].countrycode
-									)
-								) {
-									if (this.resultsShow.length < 15) {
-										this.resultsShow.push(res.data[i])
-									}
-									this.results.push(res.data[i])
-								}
-							}
-						} else {
-							this.results = res.data
-							this.resultsShow.push(
-								...this.results.slice(
-									this.startIndex,
-									this.nextIndex
-								)
-							)
-						}
-						this.startIndex = this.nextIndex
-						this.nextIndex += 15
-					}
-					this.loading = false
-					window.addEventListener("scroll", () => {
-						this.bottom = this.bottomVisible()
-					})
-				})
-				.catch((err) => {
-					console.error(err)
-				})
-		},
-		play(station) {
-			this.$emit("play", station)
-		},
-		bottomVisible() {
-			const scrollY = window.scrollY
-			const visible = document.documentElement.clientHeight
-			const pageHeight = document.documentElement.scrollHeight - 200
-			const bottomOfPage = visible + scrollY >= pageHeight
-			return bottomOfPage || pageHeight < visible
-		},
-		addResults() {
-			this.resultsShow.push(
-				...this.results.slice(this.startIndex, this.nextIndex)
-			)
-			if (this.last) {
-				this.stop = true
-			} else {
-				this.startIndex = this.nextIndex
-				if (this.nextIndex + 15 >= this.results.length) {
-					this.nextIndex = this.results.length
-					this.last = true
-				} else {
-					this.nextIndex += 15
-				}
-			}
-		},
-	},
-	beforeUnmount() {
-		window.removeEventListener("scroll", () => {
-			this.bottom = this.bottomVisible()
-		})
-	},
-	watch: {
-		bottom(bottom) {
-			if (this.results.length > 0) {
-				if (bottom && !this.stop) {
-					this.addResults()
-				}
-			}
-		},
-	},
+<script setup>
+import StationList from "../components/StationList.vue";
+import FilterModal from "../components/FilterModal.vue";
+import { ref, onMounted, onBeforeUnmount, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useStore } from "vuex";
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const emit = defineEmits(["play"]);
+
+const props = defineProps({
+  baseUrl: String,
+  config: Object,
+});
+
+let searchText = ref("");
+let results = ref([]);
+let resultsShow = ref([]);
+let startIndex = ref(0);
+let nextIndex = ref(15);
+let bottom = ref(false);
+let stop = ref(false);
+let last = ref(false);
+let loading = ref(true);
+let noResult = ref(false);
+let filterDialog = ref(false);
+
+onMounted(() => {
+  document.getElementById("searchBox").focus();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", () => {
+    bottom.value = bottomVisible();
+  });
+});
+
+function initValues() {
+  startIndex.value = 0;
+  nextIndex.value = 15;
+  results.value = [];
+  resultsShow.value = [];
+  loading.value = true;
+  noResult.value = false;
+  bottom.value = false;
+  stop.value = false;
+  last.value = false;
+}
+
+async function search() {
+  loading.value = true;
+  let url = "";
+  initValues();
+  if (route.params.mode == "country") {
+    url = props.baseUrl + store.state.urls.search.countrycode + route.params.q;
+  } else {
+    url = props.baseUrl + store.state.urls.search.name + searchText.value;
+  }
+  await fetch(url, {
+    method: "get",
+    headers: { "User-Agent": "XRadio/" + props.config.version },
+  })
+    .then((res) => res.json())
+    .then((res) => {
+      if (res.length == 0) {
+        noResult.value = true;
+      } else {
+        if (store.state.selectedCountries.size > 0) {
+          for (let i = 0; i < res.length; i++) {
+            if (store.state.selectedCountries.has(res[i].countrycode)) {
+              if (resultsShow.value.length < 15) {
+                resultsShow.value.push(res[i]);
+              }
+              results.value.push(res[i]);
+            }
+          }
+        } else {
+          results.value = res;
+          resultsShow.value.push(
+            ...results.value.slice(startIndex.value, nextIndex.value)
+          );
+        }
+        startIndex.value = nextIndex.value;
+        nextIndex.value += 15;
+      }
+      loading.value = false;
+      window.addEventListener("scroll", () => {
+        bottom.value = bottomVisible();
+      });
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}
+
+function play(station) {
+  emit("play", station);
+}
+
+function bottomVisible() {
+  const scrollY = window.scrollY;
+  const visible = document.documentElement.clientHeight;
+  const pageHeight = document.documentElement.scrollHeight - 200;
+  const bottomOfPage = visible + scrollY >= pageHeight;
+  return bottomOfPage || pageHeight < visible;
+}
+
+function addResults() {
+  resultsShow.value.push(
+    ...results.value.slice(startIndex.value, nextIndex.value)
+  );
+  if (last.value) {
+    stop.value = true;
+  } else {
+    startIndex.value = nextIndex.value;
+    if (nextIndex.value + 15 >= results.value.length) {
+      nextIndex.value = results.value.length;
+      last.value = true;
+    } else {
+      nextIndex.value += 15;
+    }
+  }
+}
+
+async function filterResults(changed) {
+  filterDialog.value = !filterDialog.value;
+  if (changed) {
+    initValues();
+    await search();
+  }
+}
+
+watch(bottom, (bottom) => {
+  if (results.value.length > 0) {
+    if (bottom && !stop.value) {
+      addResults();
+    }
+  }
+});
+
+if (route.params.mode == "text") {
+  searchText.value = route.params.q;
 }
+search();
 </script>
 
 <style scoped>
 .fade-enter-active {
-	transition: opacity 0.15s ease-out !important;
+  transition: opacity 0.15s ease-out !important;
 }
 .fade-leave-active {
-	transition: opacity 0.1s ease-out !important;
+  transition: opacity 0.1s ease-out !important;
 }
 .fade-enter-from,
 .fade-leave-to {
-	opacity: 0;
+  opacity: 0;
 }
 </style>
diff --git a/xradio-vue/src/views/searchHub.vue b/xradio-vue/src/views/searchHub.vue
index 1c1cd83..4cfb981 100644
--- a/xradio-vue/src/views/searchHub.vue
+++ b/xradio-vue/src/views/searchHub.vue
@@ -2,15 +2,7 @@
   <div>
     <div class="relative w-full group">
       <svg
-        class="
-          ml-1
-          w-6
-          h-10
-          fill-current
-          absolute
-          text-nord-gray4
-          dark:text-nord-white1
-        "
+        class="ml-1 w-6 h-10 fill-current absolute text-nord-gray4 dark:text-nord-white1"
         viewBox="0 0 24 24"
       >
         <path
@@ -23,14 +15,7 @@
         @click="searchText.length > 0 ? (searchText = '') : null"
       >
         <svg
-          class="
-            mr-1
-            w-6
-            h-10
-            fill-current
-            text-nord-gray4
-            dark:text-nord-white1
-          "
+          class="mr-1 w-6 h-10 fill-current text-nord-gray4 dark:text-nord-white1"
           viewBox="0 0 24 24"
         >
           <path
@@ -44,30 +29,18 @@
         placeholder="Search station"
         id="searchBox"
         class="pl-8 py-2 w-full rounded bg-nord-white2 dark:bg-nord-gray4 text-nord-gray4 dark:text-nord-white1 transition-shadow duration-200 ease-out"
-        autofocus
         tabindex="0"
         v-model="searchText"
         @keydown.enter="search('text')"
-        maxlength="64"
+        maxlength="255"
+        autocomplete="off"
       />
     </div>
     <div class="grid grid-cols-3 md:grid-cols-4 gap-6 mt-6 mx-auto">
       <div
         v-for="country in countriesShow"
         :key="country.id"
-        class="
-          w-full
-          text-center
-          rounded-md
-          hover:shadow-md hover:bg-nord-white1
-          dark:hover:bg-nord-gray4
-          p-2
-          cursor-pointer
-          transition-[background-color,
-          box-shadow]
-          duration-100
-          ease-out
-        "
+        class="w-full text-center rounded-md hover:shadow-md hover:bg-nord-white1 dark:hover:bg-nord-gray4 p-2 cursor-pointer transition-[background-color, box-shadow] duration-100 ease-out"
         @click="search('country', country.code2l.toLowerCase())"
       >
         <img
@@ -80,8 +53,7 @@
             country.code2l.toLowerCase() +
             '.png 2x'
           "
-          :alt="country.name"
-          loading="lazy"
+          :alt="country.name + ' flag'"
         />
         <p class="truncate" :title="country.name">{{ country.name }}</p>
       </div>
@@ -89,93 +61,86 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import countriesArr from "../assets/countries.json";
-export default {
-  name: "searchHub",
-  props: {
-    baseUrl: String,
-  },
-  data() {
-    return {
-      searchText: "",
-      countries: countriesArr,
-      countriesShow: [],
-      startIndex: 0,
-      nextIndex: 32,
-      bottom: false,
-      stop: false,
-      last: false,
-    };
-  },
-  created() {
-    this.countriesShow = this.countries.slice(this.startIndex, this.nextIndex);
-    this.startIndex = this.nextIndex;
-    this.nextIndex += 32;
-  },
-  mounted() {
-    window.addEventListener("scroll", () => {
-      this.bottom = this.bottomVisible();
+import { ref, reactive, onMounted, onBeforeUnmount, watch } from "vue";
+import { useRouter } from 'vue-router';
+
+let searchText = ref("");
+let countries = reactive(countriesArr);
+let countriesShow = ref([]);
+let startIndex = ref(0);
+let nextIndex = ref(32);
+let bottom = ref(false);
+let stop = ref(false);
+let last = ref(false);
+const router = useRouter();
+
+countriesShow.value = countries.slice(startIndex.value, nextIndex.value);
+startIndex.value = nextIndex.value;
+nextIndex.value += 32;
+
+onMounted(() => {
+  window.addEventListener("scroll", () => {
+    bottom.value = bottomVisible();
+  });
+  document.getElementById("searchBox").focus();
+});
+
+function search(mode, q) {
+  if (mode == "text") {
+    router.push({
+      name: "search",
+      params: {
+        mode: mode,
+        q: searchText.value.replace(/[^a-z0-9áéíóúñü .,_-]/gim, "").trim(),
+      },
     });
-    document.getElementById("searchBox").focus();
-  },
-  methods: {
-    search(mode, q) {
-      if (mode == "text") {
-        this.$router.push({
-          name: "search",
-          params: {
-            mode: mode,
-            q: this.searchText
-              .replace(/[^a-z0-9áéíóúñü .,_-]/gim, "")
-              .trim(),
-          },
-        });
-      } else {
-        this.$router.push({
-          name: "search",
-          params: {
-            mode: mode,
-            q: q.replace(/[^a-z0-9áéíóúñü .,_-]/gim, "").trim(),
-          },
-        });
-      }
-    },
-    bottomVisible() {
-      const scrollY = window.scrollY;
-      const visible = document.documentElement.clientHeight;
-      const pageHeight = document.documentElement.scrollHeight - 200;
-      const bottomOfPage = visible + scrollY >= pageHeight;
-      return bottomOfPage || pageHeight < visible;
-    },
-    addCountries() {
-      this.countriesShow.push(
-        ...this.countries.slice(this.startIndex, this.nextIndex)
-      );
-      if (this.last) {
-        this.stop = true;
-      } else {
-        this.startIndex = this.nextIndex;
-        if (this.nextIndex + 32 >= this.countries.length) {
-          this.nextIndex = this.countries.length;
-          this.last = true;
-        } else {
-          this.nextIndex += 32;
-        }
-      }
-    },
-  },
-  beforeUnmount() {
-    window.removeEventListener("scroll", () => {
-      this.bottom = this.bottomVisible();
+  } else {
+    router.push({
+      name: "search",
+      params: {
+        mode: mode,
+        q: q.replace(/[^a-z0-9áéíóúñü .,_-]/gim, "").trim(),
+      },
     });
-  },
-  watch: {
-    bottom(bottom) {
-      if (bottom && !this.stop) {
-        this.addCountries();
-      }
-    },
-  },
-};
-</script>
\ No newline at end of file
+  }
+}
+
+function bottomVisible() {
+  const scrollY = window.scrollY;
+  const visible = document.documentElement.clientHeight;
+  const pageHeight = document.documentElement.scrollHeight - 200;
+  const bottomOfPage = visible + scrollY >= pageHeight;
+  return bottomOfPage || pageHeight < visible;
+}
+
+function addCountries() {
+  countriesShow.value.push(
+    ...countries.slice(startIndex.value, nextIndex.value)
+  );
+  if (last.value) {
+    stop.value = true;
+  } else {
+    startIndex.value = nextIndex.value;
+    if (nextIndex.value + 32 >= countries.length) {
+      nextIndex.value = countries.length;
+      last.value = true;
+    } else {
+      nextIndex.value += 32;
+    }
+  }
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", () => {
+    bottom.value = bottomVisible();
+  });
+});
+
+watch(bottom, (bottom) => {
+  if (bottom && !stop.value) {
+    addCountries();
+  }
+});
+</script>