diff --git a/app/components/ui/flash-massage.tsx b/app/components/ui/flash-massage.tsx
new file mode 100644
index 0000000..beb2d3c
--- /dev/null
+++ b/app/components/ui/flash-massage.tsx
@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react'
+
+type FlashMessageProperties = {
+  message: string
+  type: 'success' | 'error' | 'info'
+}
+
+export default function FlashMessage({
+  message,
+  type,
+}: FlashMessageProperties) {
+  const [visible, setVisible] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (message) {
+      setVisible(true)
+      const timer = setTimeout(() => setVisible(false), 3000)
+      return () => clearTimeout(timer)
+    }
+  }, [message])
+
+  if (!visible) return
+
+  const messageStyles = {
+    success: 'bg-green-100 text-green-800 border-green-300',
+    error: 'bg-red-100 text-red-800 border-red-300',
+    info: 'bg-blue-100 text-blue-800 border-blue-300',
+  }
+
+  return (
+    <div
+      className={`fixed top-4 right-4 rounded-lg border p-4 shadow-lg ${messageStyles[type]}`}
+    >
+      {message}
+    </div>
+  )
+}