diff --git a/src/components/guild/home/AudioPreviewComponent.vue b/src/components/guild/home/AudioPreviewComponent.vue
index 0e736cc..2786d30 100644
--- a/src/components/guild/home/AudioPreviewComponent.vue
+++ b/src/components/guild/home/AudioPreviewComponent.vue
@@ -164,7 +164,6 @@
                   variant="outlined"
                   label="Url"
                   hide-details="auto"
-                  @change="add"
                   color="primary"
                   autofocus
                   :loading="urlLoading"
@@ -462,6 +461,19 @@ function stop() {
 function add() {
   if (url.value) {
     urlLoading.value = true;
+    audioService
+      .add(properties.guild.id, url.value)
+      .then((value) => {
+        if (value) {
+          status.value = value.data;
+        }
+        urlLoading.value = false;
+        urlPopup.value = false;
+        url.value = "";
+      })
+      .catch(() => {
+        urlLoading.value = false;
+      });
   }
 }
 
diff --git a/src/services/audioService.ts b/src/services/audioService.ts
index 33e3968..f837272 100644
--- a/src/services/audioService.ts
+++ b/src/services/audioService.ts
@@ -169,4 +169,30 @@ function stop(guildId: string) {
     });
 }
 
-export { getAudioStatus, connect, disconnect, resume, pause, skip, stop };
+function add(guildId: string, url: string) {
+  const userStore = useUserStore();
+  return axios
+    .post<Status>(
+      `/audio/${guildId}/add`,
+      {
+        url: url,
+      },
+      {
+        headers: {
+          authorization: `Bearer ${userStore.token}`,
+        },
+      }
+    )
+    .catch((reason) => {
+      console.error(`Fail to add track to playlist !`);
+      console.log(reason);
+      const eventQueuStore = useEventQueuStore();
+      eventQueuStore.push({
+        uuid: undefined,
+        type: "error",
+        text: "Fail to add track to playlist !",
+      });
+    });
+}
+
+export { getAudioStatus, connect, disconnect, resume, pause, skip, stop, add };