diff --git a/package-lock.json b/package-lock.json
index 1198633..3f45bf3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "prettier-plugin-svelte": "^2.7.1",
         "svelte": "^3.44.0",
         "svelte-check": "^2.8.0",
+        "svelte-french-toast": "^1.0.3",
         "svelte-preprocess": "^4.10.7",
         "tailwindcss": "^3.1.8",
         "tslib": "^2.4.0",
@@ -1922,6 +1923,15 @@
         "svelte": "^3.24.0"
       }
     },
+    "node_modules/svelte-french-toast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/svelte-french-toast/-/svelte-french-toast-1.0.3.tgz",
+      "integrity": "sha512-HBdutlqUx5FroucvcmMJstmTJDedXayiOSXubBYW6iL5x1PdHp+bOflGx5NxsOa6+EQckJnnVv1vJYgGsg7ngQ==",
+      "dev": true,
+      "dependencies": {
+        "svelte-writable-derived": "^2.1.3"
+      }
+    },
     "node_modules/svelte-hmr": {
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.0.tgz",
@@ -2009,6 +2019,18 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/svelte-writable-derived": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/svelte-writable-derived/-/svelte-writable-derived-2.1.5.tgz",
+      "integrity": "sha512-g26/W1iWj7FlLwaggNwXxHwMSf70/bHAYcpBT/EijijjakCSU9/PXmn31fL/kw2P1SzVEU6ayyCFuNYqTY3RUw==",
+      "dev": true,
+      "funding": {
+        "url": "https://sponsus.org/u/pixievoltno1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.2.1"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
@@ -3575,6 +3597,15 @@
         "typescript": "*"
       }
     },
+    "svelte-french-toast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/svelte-french-toast/-/svelte-french-toast-1.0.3.tgz",
+      "integrity": "sha512-HBdutlqUx5FroucvcmMJstmTJDedXayiOSXubBYW6iL5x1PdHp+bOflGx5NxsOa6+EQckJnnVv1vJYgGsg7ngQ==",
+      "dev": true,
+      "requires": {
+        "svelte-writable-derived": "^2.1.3"
+      }
+    },
     "svelte-hmr": {
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.0.tgz",
@@ -3607,6 +3638,13 @@
         }
       }
     },
+    "svelte-writable-derived": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/svelte-writable-derived/-/svelte-writable-derived-2.1.5.tgz",
+      "integrity": "sha512-g26/W1iWj7FlLwaggNwXxHwMSf70/bHAYcpBT/EijijjakCSU9/PXmn31fL/kw2P1SzVEU6ayyCFuNYqTY3RUw==",
+      "dev": true,
+      "requires": {}
+    },
     "tailwindcss": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
diff --git a/package.json b/package.json
index 21cd9c4..5f24c2a 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "prettier-plugin-svelte": "^2.7.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.8.0",
+    "svelte-french-toast": "^1.0.3",
     "svelte-preprocess": "^4.10.7",
     "tailwindcss": "^3.1.8",
     "tslib": "^2.4.0",
diff --git a/src/components/Links.svelte b/src/components/Links.svelte
index 7792dc0..aa27c3d 100644
--- a/src/components/Links.svelte
+++ b/src/components/Links.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import toast, { Toaster } from "svelte-french-toast";
+
   import Delete from "./icons/Delete.svelte";
   import LockSolid from "./icons/LockSolid.svelte";
   import { orgHero } from "../stores/context";
@@ -6,23 +8,17 @@
   import Loader from "./Loader.svelte";
   let links = [];
 
-  let successMessage: string = null,
-    errorMessage: string = null,
-    isLoading: boolean = false;
+  let isLoading: boolean = false;
+  let deletingLink = [];
 
   chrome.runtime.onMessage.addListener((msg) => {
     if (msg.type === "delete_link_response") {
+      deletingLink = deletingLink.filter((id) => id !== msg.id);
+      deletingLink = [...deletingLink];
       if (msg.status === "success") {
-        successMessage = "Deleted!";
-        setTimeout(() => {
-          successMessage = "";
-        }, 2000);
         getLinks();
       } else {
-        errorMessage = `Error: ${msg.message}`;
-        setTimeout(() => {
-          errorMessage = "";
-        }, 2000);
+        toast.error(msg.message);
       }
     } else if (msg.type === "run_sync_response") {
       links = msg.data;
@@ -44,12 +40,7 @@
   });
 </script>
 
-{#if successMessage}<div class="p-2 text-center text-green-500 font-bold">
-    {successMessage}
-  </div>{/if}
-{#if errorMessage}<div class="p-2 text-center text-red-500 font-bold">
-    {errorMessage}
-  </div>{/if}
+<Toaster />
 <div class="overflow-x-auto p-3">
   {#if isLoading}
     <Loader />
@@ -81,15 +72,19 @@
             </td>
             <td class="p-2">
               <div class="flex justify-center">
-                <button
-                  on:click={(e) => {
-                    successMessage = null;
-                    errorMessage = null;
-                    deleteLink(link.id);
-                  }}
-                >
-                  <Delete />
-                </button>
+                {#if deletingLink.includes(link.id)}
+                  <Loader />
+                {:else}
+                  <button
+                    on:click={(e) => {
+                      deletingLink.push(link.id);
+                      deletingLink = [...deletingLink];
+                      deleteLink(link.id);
+                    }}
+                  >
+                    <Delete />
+                  </button>
+                {/if}
               </div>
             </td>
           </tr>
diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts
index 24ac953..e6131e0 100644
--- a/src/pages/background/index.ts
+++ b/src/pages/background/index.ts
@@ -151,6 +151,7 @@ const deleteLink = async (id: string, refreshed: boolean = false) => {
       chrome.runtime.sendMessage({
         type: "delete_link_response",
         status: "success",
+        id,
       });
     })
     .catch((e: AxiosError) => {
@@ -159,6 +160,7 @@ const deleteLink = async (id: string, refreshed: boolean = false) => {
           type: "delete_link_response",
           status: "error",
           message: e.response.data["error"] as string,
+          id,
         });
         console.log("Could not delete link");
       } else if (!refreshed && e.response.status == 401) {