diff --git a/package-lock.json b/package-lock.json
index ac0eef6..ad2657c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,9 +24,11 @@
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.6.0",
         "lucide-react": "^0.525.0",
+        "next-themes": "^0.4.6",
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.59.0",
+        "sonner": "^2.0.6",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7",
         "use-sync-external-store": "^1.5.0",
@@ -8324,6 +8326,15 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -9760,6 +9771,15 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.6.tgz",
+      "integrity": "sha512-yHFhk8T/DK3YxjFQXIrcHT1rGEeTLliVzWbO0xN8GberVun2RiBnxAjXAYpZrqwEVHBG9asI/Li8TAAhN9m59Q==",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
diff --git a/package.json b/package.json
index 0855757..3a69253 100644
--- a/package.json
+++ b/package.json
@@ -29,9 +29,11 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.525.0",
+    "next-themes": "^0.4.6",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.59.0",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "use-sync-external-store": "^1.5.0",
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..b52d2fe
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+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-background group-[.toaster]:text-foreground 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/pages/_app.tsx b/src/pages/_app.tsx
index 87f1614..0ca1000 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -6,6 +6,7 @@ import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/r
 import clsx from 'clsx';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { Toaster } from 'sonner';
 
 import ErrorBoundary from '@/components/common/ErrorBoundary';
 import Gnb from '@/components/common/Gnb';
@@ -39,6 +40,16 @@ export default function App({ Component, pageProps }: AppProps) {
         <meta name='viewport' content='width=device-width, initial-scale=1' />
       </Head>
       <QueryClientProvider client={queryClient}>
+        <Toaster
+          position='bottom-center'
+          richColors
+          duration={2000}
+          toastOptions={{
+            classNames: {
+              description: 'custom-text-md-bold font-sans',
+            },
+          }}
+        />
         <LoadingOverlay />
         <HydrationBoundary state={pageProps.dehydratedState}>
           {!hideHeader && <Gnb />}