diff --git a/.pnp.cjs b/.pnp.cjs
index 0d3b9251..479122f4 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -63,6 +63,7 @@ const RAW_RUNTIME_STATE =
           ["prettier", "npm:3.2.5"],\
           ["react", "npm:18.2.0"],\
           ["react-dom", "virtual:ae5aba791464d630ca9a0aea17b5f989316a30f061971dd4a341acf3391d54193e93acbbdbf841ea867d9fd77d6c54188d5cf4aabe94f970365b1efb3feb6d36#npm:18.2.0"],\
+          ["react-toastify", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:10.0.5"],\
           ["return-fetch", "npm:0.4.5"],\
           ["socket.io-client", "npm:2.5.0"],\
           ["storybook", "npm:8.0.0"],\
@@ -8432,6 +8433,15 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["clsx", [\
+      ["npm:2.1.1", {\
+        "packageLocation": "./.yarn/cache/clsx-npm-2.1.1-96125b98be-c4c8eb865f.zip/node_modules/clsx/",\
+        "packageDependencies": [\
+          ["clsx", "npm:2.1.1"]\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["color", [\
       ["npm:4.2.3", {\
         "packageLocation": "./.yarn/cache/color-npm-4.2.3-4a23227581-7fbe7cfb81.zip/node_modules/color/",\
@@ -11051,6 +11061,7 @@ const RAW_RUNTIME_STATE =
           ["prettier", "npm:3.2.5"],\
           ["react", "npm:18.2.0"],\
           ["react-dom", "virtual:ae5aba791464d630ca9a0aea17b5f989316a30f061971dd4a341acf3391d54193e93acbbdbf841ea867d9fd77d6c54188d5cf4aabe94f970365b1efb3feb6d36#npm:18.2.0"],\
+          ["react-toastify", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:10.0.5"],\
           ["return-fetch", "npm:0.4.5"],\
           ["socket.io-client", "npm:2.5.0"],\
           ["storybook", "npm:8.0.0"],\
@@ -15653,6 +15664,33 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["react-toastify", [\
+      ["npm:10.0.5", {\
+        "packageLocation": "./.yarn/cache/react-toastify-npm-10.0.5-86b63c99fc-66c68ec3d6.zip/node_modules/react-toastify/",\
+        "packageDependencies": [\
+          ["react-toastify", "npm:10.0.5"]\
+        ],\
+        "linkType": "SOFT"\
+      }],\
+      ["virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:10.0.5", {\
+        "packageLocation": "./.yarn/__virtual__/react-toastify-virtual-fab3ea1a3d/0/cache/react-toastify-npm-10.0.5-86b63c99fc-66c68ec3d6.zip/node_modules/react-toastify/",\
+        "packageDependencies": [\
+          ["react-toastify", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:10.0.5"],\
+          ["@types/react", "npm:18.2.65"],\
+          ["@types/react-dom", "npm:18.2.22"],\
+          ["clsx", "npm:2.1.1"],\
+          ["react", "npm:18.2.0"],\
+          ["react-dom", "virtual:ae5aba791464d630ca9a0aea17b5f989316a30f061971dd4a341acf3391d54193e93acbbdbf841ea867d9fd77d6c54188d5cf4aabe94f970365b1efb3feb6d36#npm:18.2.0"]\
+        ],\
+        "packagePeers": [\
+          "@types/react-dom",\
+          "@types/react",\
+          "react-dom",\
+          "react"\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["read-pkg", [\
       ["npm:5.2.0", {\
         "packageLocation": "./.yarn/cache/read-pkg-npm-5.2.0-50426bd8dc-b51a17d4b5.zip/node_modules/read-pkg/",\
diff --git a/package.json b/package.json
index 533351b1..7f0bb47f 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "next": "^14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-toastify": "^10.0.5",
     "return-fetch": "^0.4.5",
     "socket.io-client": "^2",
     "swiper": "^11.0.5",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 66315825..82a32c2e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,6 @@
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 import { Footer } from '#/components/templates/Footer';
 import { Header } from '#/components/templates/Header';
 import { LoginPopup } from '#/components/templates/LoginPopup';
@@ -23,6 +26,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Header />
         {children}
         <Footer />
+        <ToastContainer />
       </body>
     </html>
   );
diff --git a/src/utilities/fetch.ts b/src/utilities/fetch.ts
index 9deb253c..9c661158 100644
--- a/src/utilities/fetch.ts
+++ b/src/utilities/fetch.ts
@@ -1,3 +1,4 @@
+import { toast } from 'react-toastify';
 import returnFetch from 'return-fetch';
 
 import { getTokens } from '#/utilities/session';
@@ -24,6 +25,9 @@ export const fitFetcher = async <T>(...args: Parameters<typeof fitFetch>) => {
   const res = await fitFetch(...args);
   try {
     const json = await res.json();
+    if (!res.ok && json?.message) {
+      toast.error(json.message);
+    }
     return res.ok ? (json as T) : Promise.reject(json as Error);
   } catch (error) {
     return res.ok ? (null as T) : Promise.reject(error as Error);
diff --git a/yarn.lock b/yarn.lock
index 6cbf70cb..776e913e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5841,6 +5841,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.0":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -8106,6 +8113,7 @@ __metadata:
     prettier: "npm:^3.1.1"
     react: "npm:^18"
     react-dom: "npm:^18"
+    react-toastify: "npm:^10.0.5"
     return-fetch: "npm:^0.4.5"
     socket.io-client: "npm:^2"
     storybook: "npm:^8.0.0-alpha.8"
@@ -11987,6 +11995,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-toastify@npm:^10.0.5":
+  version: 10.0.5
+  resolution: "react-toastify@npm:10.0.5"
+  dependencies:
+    clsx: "npm:^2.1.0"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 10c0/66c68ec3d6c017d9f32652d73bb925224921c6a80b629b9d481430d5b4fd504abb7a99995a64b9aef0fc31326c74f3cbe088b3287b978dd0c355079c4bbf4158
+  languageName: node
+  linkType: hard
+
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18":
   version: 18.2.0
   resolution: "react@npm:18.2.0"