diff --git a/github-bounty-hunter/frontend/src/App.tsx b/github-bounty-hunter/frontend/src/App.tsx
new file mode 100644
index 0000000..253843c
--- /dev/null
+++ b/github-bounty-hunter/frontend/src/App.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import Toast from './components/Toast';
+
+const App: React.FC = () => {
+  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'info' } | null>(null);
+
+  const showToast = (message: string, type: 'success' | 'error' | 'info') => {
+    setToast({ message, type });
+    setTimeout(() => setToast(null), 3000);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-4">
+      <h1 className="text-2xl font-bold mb-4">Toast Notification System</h1>
+      <div className="flex gap-2">
+        <button 
+          onClick={() => showToast('Success message', 'success')}
+          className="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600"
+        >
+          Show Success Toast
+        </button>
+        <button 
+          onClick={() => showToast('Error message', 'error')}
+          className="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+        >
+          Show Error Toast
+        </button>
+        <button 
+          onClick={() => showToast('Info message', 'info')}
+          className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+        >
+          Show Info Toast
+        </button>
+      </div>
+      {toast && <Toast message={toast.message} type={toast.type} />}
+    </div>
+  );
+};
+
+export default App;
\ No newline at end of file
diff --git a/github-bounty-hunter/frontend/src/components/Toast.tsx b/github-bounty-hunter/frontend/src/components/Toast.tsx
new file mode 100644
index 0000000..33dcb96
--- /dev/null
+++ b/github-bounty-hunter/frontend/src/components/Toast.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+
+interface ToastProps {
+  message: string;
+  type?: 'success' | 'error' | 'info';
+  duration?: number;
+}
+
+const Toast: React.FC<ToastProps> = ({ message, type = 'info', duration = 3000 }) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration]);
+
+  if (!isVisible) return null;
+
+  const getTypeClass = () => {
+    switch (type) {
+      case 'success':
+        return 'bg-green-500 text-white';
+      case 'error':
+        return 'bg-red-500 text-white';
+      case 'info':
+      default:
+        return 'bg-blue-500 text-white';
+    }
+  };
+
+  return (
+    <div className={`fixed top-4 right-4 px-4 py-2 rounded-md shadow-lg ${getTypeClass()} transition-opacity duration-300`}>
+      {message}
+    </div>
+  );
+};
+
+export default Toast;
\ No newline at end of file
diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
new file mode 100644
index 0000000..f73cb80
--- /dev/null
+++ b/src/app/history/page.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+
+interface Transaction {
+  id: string;
+  date: string;
+  amount: number;
+  type: 'deposit' | 'withdrawal' | 'transfer';
+  status: 'completed' | 'pending' | 'failed';
+}
+
+const transactions: Transaction[] = [
+  {
+    id: '1',
+    date: '2026-03-20',
+    amount: 1000,
+    type: 'deposit',
+    status: 'completed'
+  },
+  {
+    id: '2',
+    date: '2026-03-19',
+    amount: 500,
+    type: 'withdrawal',
+    status: 'completed'
+  },
+  {
+    id: '3',
+    date: '2026-03-18',
+    amount: 200,
+    type: 'transfer',
+    status: 'pending'
+  }
+];
+
+const HistoryPage: React.FC = () => {
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-4">Transaction History</h1>
+      <div className="overflow-x-auto">
+        <table className="min-w-full bg-white border border-gray-200">
+          <thead className="bg-gray-100">
+            <tr>
+              <th className="py-2 px-4 border-b">ID</th>
+              <th className="py-2 px-4 border-b">Date</th>
+              <th className="py-2 px-4 border-b">Amount</th>
+              <th className="py-2 px-4 border-b">Type</th>
+              <th className="py-2 px-4 border-b">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {transactions.map((transaction) => (
+              <tr key={transaction.id}>
+                <td className="py-2 px-4 border-b">{transaction.id}</td>
+                <td className="py-2 px-4 border-b">{transaction.date}</td>
+                <td className="py-2 px-4 border-b">${transaction.amount.toFixed(2)}</td>
+                <td className="py-2 px-4 border-b">
+                  <span className={`px-2 py-1 rounded ${transaction.type === 'deposit' ? 'bg-green-100 text-green-800' : transaction.type === 'withdrawal' ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'}`}>
+                    {transaction.type}
+                  </span>
+                </td>
+                <td className="py-2 px-4 border-b">
+                  <span className={`px-2 py-1 rounded ${transaction.status === 'completed' ? 'bg-green-100 text-green-800' : transaction.status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'}`}>
+                    {transaction.status}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default HistoryPage;
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2d673aa..9b1e5b3 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -25,6 +25,12 @@ export function Navbar() {
               >
                 Create Group
               </Link>
+              <Link
+                href="/history"
+                className="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium"
+              >
+                History
+              </Link>
             </div>
           </div>
           <ConnectWallet />