diff --git a/package-lock.json b/package-lock.json
index 1af4c44..a1b8f49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,10 +20,12 @@
         "clsx": "^2.1.1",
         "file-saver": "^2.0.5",
         "lucide-react": "^0.414.0",
+        "next-themes": "^0.3.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-dropzone": "^14.2.3",
         "save-as": "^0.1.8",
+        "sonner": "^1.5.0",
         "sql.js": "^1.10.3",
         "tailwind-merge": "^2.4.0",
         "tailwindcss-animate": "^1.0.7",
@@ -6499,6 +6501,15 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/next-themes": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
+      "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -7611,6 +7622,15 @@
       "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
       "dev": true
     },
+    "node_modules/sonner": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.5.0.tgz",
+      "integrity": "sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
diff --git a/package.json b/package.json
index fba48c0..87c5ad2 100644
--- a/package.json
+++ b/package.json
@@ -38,10 +38,12 @@
     "clsx": "^2.1.1",
     "file-saver": "^2.0.5",
     "lucide-react": "^0.414.0",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "save-as": "^0.1.8",
+    "sonner": "^1.5.0",
     "sql.js": "^1.10.3",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/components/dropzone-helpers.tsx b/src/components/dropzone-helpers.tsx
index 6a418ac..5cc5e85 100644
--- a/src/components/dropzone-helpers.tsx
+++ b/src/components/dropzone-helpers.tsx
@@ -1,7 +1,7 @@
 import type { FileError } from "react-dropzone";
 import { bytesToValue } from "@/lib/file";
 
-import { FileWarning, FileCheck } from "lucide-react";
+import { toast } from "sonner";
 
 export function FileData({ file }: { file: File }) {
   return (
@@ -16,22 +16,12 @@ export function FileData({ file }: { file: File }) {
 }
 
 export function FileStats({ errors }: { errors?: FileError[] }) {
-  return errors ? (
+  errors && (
     <>
-      {errors.map((error) => (
-        <div
-          className="flex items-center justify-center text-sm text-red-600 gap-2 rounded border border-red-600 p-4 mb-2"
-          key={error.code}
-        >
-          <FileWarning />
-          {error.message}
-        </div>
-      ))}
+      {errors.map((error) =>
+        toast(error.message, { position: "bottom-right" }),
+      )}
     </>
-  ) : (
-    <li className="flex w-full items-center justify-center text-sm text-green-600">
-      <FileCheck className="mr-2" />
-      Uploaded successfully
-    </li>
   );
+  return <></>;
 }
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..82149ae
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-primary group-[.toaster]:text-background group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/src/main.tsx b/src/main.tsx
index 301744e..55194f2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 
 import App from "./App.tsx";
+import { Toaster } from "@/components/ui/sonner";
 
 import "./index.css";
 
@@ -10,5 +11,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <main className="container mx-auto p-4 h-screen flex flex-col gap-3">
       <App />
     </main>
+    <Toaster />
   </React.StrictMode>,
 );