diff --git a/Frontend/project-CL/src/features/academic/academic.tsx b/Frontend/project-CL/src/features/academic/academic.tsx
index 8af1cbf..3e6ab06 100644
--- a/Frontend/project-CL/src/features/academic/academic.tsx
+++ b/Frontend/project-CL/src/features/academic/academic.tsx
@@ -123,13 +123,12 @@ export default function Academic() {
                             <ViewButton id="calendar" label="Calendar" icon={Calendar} />
                             <ViewButton id="timeline" label="Timeline" icon={Clock} />
                         </div>
-
                         <button
                             onClick={() => {
                                 if (view === 'grid') setAddingSubject(true);
                                 else setCreatingTask(true);
                             }}
-                            className="px-6 py-2.5 bg-slate-900 text-white rounded-xl hover:bg-black font-bold transition-all shadow-lg flex items-center gap-2"
+                            className={`${view === 'home' ? 'hidden' : ''} px-6 py-2.5 bg-slate-900 text-white rounded-xl hover:bg-black font-bold transition-all shadow-lg flex items-center gap-2`}
                         >
                             <span>+ {view === 'grid' ? 'Subject' : 'Task'}</span>
                         </button>
diff --git a/Frontend/project-CL/src/features/financial/components/AddCategoryModal.tsx b/Frontend/project-CL/src/features/financial/components/AddCategoryModal.tsx
new file mode 100644
index 0000000..dabf039
--- /dev/null
+++ b/Frontend/project-CL/src/features/financial/components/AddCategoryModal.tsx
@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import type { Category } from '../services/financialService';
+
+interface AddCategoryModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (name: string, type: 'income' | 'expense', bucket: string) => Promise<void>;
+    category?: Category | null; // Optional category for editing
+}
+
+export default function AddCategoryModal({ isOpen, onClose, onSave, category }: AddCategoryModalProps) {
+    const [name, setName] = useState('');
+    const [type, setType] = useState<'income' | 'expense'>('expense');
+    const [bucket, setBucket] = useState('needs');
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (isOpen && category) {
+            setName(category.name);
+            setType(category.type as 'income' | 'expense');
+            setBucket(category.bucket);
+        } else if (isOpen && !category) {
+            // Reset for add mode
+            setName('');
+            setType('expense');
+            setBucket('needs');
+        }
+    }, [isOpen, category]);
+
+    if (!isOpen) return null;
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+        // If income, bucket might be irrelevant, but keeping it simple or setting to 'income'
+        const finalBucket = type === 'income' ? 'income' : bucket;
+        await onSave(name, type, finalBucket);
+        setLoading(false);
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+            <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden transform transition-all">
+                <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+                    <h2 className="text-xl font-bold text-gray-800">{category ? 'Edit Category' : 'Add New Category'}</h2>
+                    <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
+                        <X size={24} />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="p-6 space-y-4">
+                    {/* Name Input */}
+                    <div>
+                        <label className="block text-sm font-semibold text-gray-700 mb-1">Category Name</label>
+                        <input
+                            type="text"
+                            required
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder="e.g., Groceries, Salary, Netflix"
+                            className="w-full px-4 py-2 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all"
+                        />
+                    </div>
+
+                    {/* Type Selection */}
+                    <div>
+                        <label className="block text-sm font-semibold text-gray-700 mb-1">Type</label>
+                        <div className="grid grid-cols-2 gap-3">
+                            <button
+                                type="button"
+                                onClick={() => setType('income')}
+                                className={`py-2 rounded-xl font-medium transition-all border ${type === 'income'
+                                    ? 'bg-emerald-50 border-emerald-200 text-emerald-600 ring-2 ring-emerald-100'
+                                    : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'
+                                    }`}
+                            >
+                                Income
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => setType('expense')}
+                                className={`py-2 rounded-xl font-medium transition-all border ${type === 'expense'
+                                    ? 'bg-rose-50 border-rose-200 text-rose-600 ring-2 ring-rose-100'
+                                    : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'
+                                    }`}
+                            >
+                                Expense
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Bucket Selection (Only for Expense) */}
+                    {type === 'expense' && (
+                        <div className="animate-in fade-in slide-in-from-top-2 duration-200">
+                            <label className="block text-sm font-semibold text-gray-700 mb-1">Bucket</label>
+                            <select
+                                value={bucket}
+                                onChange={(e) => setBucket(e.target.value)}
+                                className="w-full px-4 py-2 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all appearance-none bg-white"
+                            >
+                                <option value="needs">Needs (Essentials)</option>
+                                <option value="wants">Wants (Lifestyle)</option>
+                                <option value="saving">Saving (Future)</option>
+                                <option value="invest">Invest (Growth)</option>
+                            </select>
+                        </div>
+                    )}
+
+                    <div className="pt-4 flex gap-3">
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="flex-1 px-4 py-2 rounded-xl border border-gray-200 text-gray-600 font-semibold hover:bg-gray-50 transition-all"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="flex-1 px-4 py-2 rounded-xl bg-slate-900 text-white font-bold hover:bg-black transition-all shadow-lg shadow-slate-200 disabled:opacity-70 disabled:cursor-not-allowed"
+                        >
+                            {loading ? 'Saving...' : (category ? 'Save Changes' : 'Create Category')}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/Frontend/project-CL/src/features/financial/components/AddTransactionModal.tsx b/Frontend/project-CL/src/features/financial/components/AddTransactionModal.tsx
new file mode 100644
index 0000000..7e4ef98
--- /dev/null
+++ b/Frontend/project-CL/src/features/financial/components/AddTransactionModal.tsx
@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { X, Calendar, Tag } from 'lucide-react';
+import type { Category, Transaction } from '../services/financialService';
+
+interface AddTransactionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (data: { category_id: number; amount: number; date: string; description: string }) => Promise<void>;
+    categories: Category[];
+    transaction?: Transaction | null; // Optional for edit mode
+}
+
+export default function AddTransactionModal({ isOpen, onClose, onSave, categories, transaction }: AddTransactionModalProps) {
+    const [amount, setAmount] = useState('');
+    const [categoryId, setCategoryId] = useState<number | ''>('');
+    const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
+    const [description, setDescription] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (isOpen && transaction) {
+            setAmount(transaction.amount.toString());
+            setCategoryId(transaction.category_id);
+            // Ensure date is in YYYY-MM-DD format for input
+            setDate(new Date(transaction.date).toISOString().split('T')[0]);
+            setDescription(transaction.description);
+        } else if (isOpen) {
+            // Reset
+            setAmount('');
+            setCategoryId('');
+            setDate(new Date().toISOString().split('T')[0]);
+            setDescription('');
+        }
+    }, [isOpen, transaction]);
+
+    if (!isOpen) return null;
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!categoryId || !amount) return;
+
+        setLoading(true);
+        await onSave({
+            category_id: Number(categoryId),
+            amount: Number(amount),
+            date: new Date(date).toISOString(),
+            description
+        });
+        setLoading(false);
+
+        // Reset form
+        setAmount('');
+        setCategoryId('');
+        setDate(new Date().toISOString().split('T')[0]);
+        setDescription('');
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+            <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden transform transition-all">
+                <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
+                    <h2 className="text-xl font-bold text-gray-800">{transaction ? 'Edit Transaction' : 'Add Transaction'}</h2>
+                    <button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
+                        <X size={24} />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="p-6 space-y-4">
+
+                    {/* Amount Input */}
+                    <div>
+                        <label className="block text-sm font-semibold text-gray-700 mb-1">Amount</label>
+                        <div className="relative">
+                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                                <span className="font-bold text-sm">Rp</span>
+                            </div>
+                            <input
+                                type="number"
+                                required
+                                min="0"
+                                value={amount}
+                                onChange={(e) => setAmount(e.target.value)}
+                                placeholder="0"
+                                className="w-full pl-10 pr-4 py-2 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all font-mono font-medium"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Category Selection */}
+                    <div>
+                        <label className="block text-sm font-semibold text-gray-700 mb-1">Category</label>
+                        <div className="relative">
+                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                                <Tag size={16} />
+                            </div>
+                            <select
+                                required
+                                value={categoryId}
+                                onChange={(e) => setCategoryId(Number(e.target.value))}
+                                className="w-full pl-10 pr-4 py-2 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all appearance-none bg-white"
+                            >
+                                <option value="" disabled>Select Category</option>
+                                {categories.map(cat => (
+                                    <option key={cat.id} value={cat.id}>
+                                        {cat.name} ({cat.type})
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                    </div>
+
+                    {/* Date Input */}
+                    <div>
+                        <label className="block text-sm font-semibold text-gray-700 mb-1">Date</label>
+                        <div className="relative">
+                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
+                                <Calendar size={16} />
+                            </div>
+                            <input
+                                type="date"
+                                required
+                                value={date}
+                                onChange={(e) => setDate(e.target.value)}
+                                className="w-full pl-10 pr-4 py-2 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Description Input */}
+                    <div>
+                        <label className="block text-sm font-semibold text-gray-700 mb-1">Description (Optional)</label>
+                        <textarea
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            placeholder="What was this for?"
+                            rows={3}
+                            className="w-full px-4 py-2 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition-all resize-none"
+                        />
+                    </div>
+
+                    <div className="pt-4 flex gap-3">
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="flex-1 px-4 py-2 rounded-xl border border-gray-200 text-gray-600 font-semibold hover:bg-gray-50 transition-all"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="flex-1 px-4 py-2 rounded-xl bg-slate-900 text-white font-bold hover:bg-black transition-all shadow-lg shadow-slate-200 disabled:opacity-70 disabled:cursor-not-allowed"
+                        >
+                            {loading ? 'Saving...' : (transaction ? 'Save Changes' : 'Add Transaction')}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/Frontend/project-CL/src/features/financial/components/DashboardCards.tsx b/Frontend/project-CL/src/features/financial/components/DashboardCards.tsx
index 64657ca..c27f00b 100644
--- a/Frontend/project-CL/src/features/financial/components/DashboardCards.tsx
+++ b/Frontend/project-CL/src/features/financial/components/DashboardCards.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import type { DashboardMetrics } from '../hooks/useFinancialDashboard';
-import { Wallet, PiggyBank, ShieldAlert, AlertTriangle, CheckCircle, TrendingUp, Layers, Target } from 'lucide-react';
+import { Wallet, PiggyBank, ShieldAlert, AlertTriangle, CheckCircle, TrendingUp, Layers, Target, Tags, ArrowRightLeft, PieChart } from 'lucide-react';
 
 interface DashboardCardsProps {
     metrics: DashboardMetrics;
+    onViewChange: (view: 'home' | 'category' | 'transaction' | 'budgeting' | 'goals') => void;
 }
 
-export const DashboardCards: React.FC<DashboardCardsProps> = ({ metrics }) => {
+export const DashboardCards: React.FC<DashboardCardsProps> = ({ metrics, onViewChange }) => {
     const formatCurrency = (amount: number) => {
         return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' }).format(amount);
     };
@@ -25,11 +26,11 @@ export const DashboardCards: React.FC<DashboardCardsProps> = ({ metrics }) => {
         <div className="h-full w-full p-4 overflow-y-auto bg-slate-50 rounded-3xl">
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 h-full">
 
-                {/* LEFT COLUMN: PRIMARY STATS (Balance, Safe to Spend, Budget Status) */}
+                {/* LEFT COLUMN: PRIMARY STATS (Balance, Safe to Spend, Budget Status) + NAVIGATION */}
                 <div className="flex flex-col gap-6">
 
-                    {/* Main Balance Card (Like IPK Card) */}
-                    <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 relative overflow-hidden">
+                    {/* Main Balance Card */}
+                    <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-200 relative overflow-hidden flex-none">
                         <div className="absolute top-0 right-0 p-4 opacity-10">
                             <Wallet size={120} />
                         </div>
@@ -43,7 +44,7 @@ export const DashboardCards: React.FC<DashboardCardsProps> = ({ metrics }) => {
                     </div>
 
                     {/* Safe to Spend & Budget Status Row */}
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 flex-none">
                         {/* Daily Safe to Spend */}
                         <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between">
                             <div className="flex items-center gap-3 mb-4">
@@ -68,7 +69,7 @@ export const DashboardCards: React.FC<DashboardCardsProps> = ({ metrics }) => {
                             </div>
                             <div>
                                 <div className={`text-2xl font-bold ${statusStyle.text}`}>
-                                    {metrics.budgetStatus.toFixed(1)}% <span className="text-sm font-normal text-black">Used</span>
+                                    {metrics.budgetStatus.toFixed(1)}% <span className="text-sm font-normal text-slate-400">Used</span>
                                 </div>
                                 <div className="w-full bg-slate-100 h-2 rounded-full mt-3 overflow-hidden">
                                     <div
@@ -79,9 +80,41 @@ export const DashboardCards: React.FC<DashboardCardsProps> = ({ metrics }) => {
                             </div>
                         </div>
                     </div>
+
+                    {/* Navigation Grid (Quick Actions) */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 flex-1 content-start">
+                        <NavCard
+                            title="Categories"
+                            desc="Manage buckets"
+                            icon={<Tags size={24} />}
+                            color="bg-pink-50 text-pink-600 hover:bg-pink-100"
+                            onClick={() => onViewChange('category')}
+                        />
+                        <NavCard
+                            title="Transactions"
+                            desc="View history"
+                            icon={<ArrowRightLeft size={24} />}
+                            color="bg-indigo-50 text-indigo-600 hover:bg-indigo-100"
+                            onClick={() => onViewChange('transaction')}
+                        />
+                        <NavCard
+                            title="Budgeting"
+                            desc="Plan spending"
+                            icon={<PieChart size={24} />}
+                            color="bg-cyan-50 text-cyan-600 hover:bg-cyan-100"
+                            onClick={() => onViewChange('budgeting')}
+                        />
+                        <NavCard
+                            title="Goals"
+                            desc="Track savings"
+                            icon={<Target size={24} />}
+                            color="bg-teal-50 text-teal-600 hover:bg-teal-100"
+                            onClick={() => onViewChange('goals')}
+                        />
+                    </div>
                 </div>
 
-                {/* RIGHT COLUMN: BREAKDOWNS & SAVINGS (Like Nav Buttons) */}
+                {/* RIGHT COLUMN: BREAKDOWNS & SAVINGS */}
                 <div className="flex flex-col gap-4">
                     {/* Total Savings - Featured Top Right */}
                     <StatRow
@@ -99,12 +132,12 @@ export const DashboardCards: React.FC<DashboardCardsProps> = ({ metrics }) => {
                         </h3>
                     </div>
 
-                    <div className="grid grid-cols-2 gap-4">
+                    <div className="grid grid-cols-1 gap-4">
                         <StatRow
                             title="Needs"
                             value={formatCurrency(metrics.breakdown.needs)}
                             desc="Essential expenses"
-                            icon={<Target size={32} />} // Using Target for Needs/Essentials
+                            icon={<Target size={32} />}
                             color="bg-rose-50 text-rose-600"
                         />
                         <StatRow
@@ -121,13 +154,6 @@ export const DashboardCards: React.FC<DashboardCardsProps> = ({ metrics }) => {
                             icon={<TrendingUp size={32} />}
                             color="bg-blue-50 text-blue-600"
                         />
-                        <StatRow
-                            title="Others"
-                            value={formatCurrency(metrics.breakdown.others)}
-                            desc="Miscellaneous"
-                            icon={<Layers size={32} />}
-                            color="bg-slate-100 text-slate-600"
-                        />
                     </div>
                 </div>
             </div>
@@ -135,7 +161,7 @@ export const DashboardCards: React.FC<DashboardCardsProps> = ({ metrics }) => {
     );
 };
 
-// Helper Component similar to Academic's NavButton but for Stats
+// Helper Component for Stats
 interface StatRowProps {
     title: string;
     value: string;
@@ -150,7 +176,7 @@ const StatRow: React.FC<StatRowProps> = ({ title, value, desc, icon, color }) =>
             <div className="p-3 lg:p-4 bg-white rounded-xl shadow-sm shrink-0">
                 {icon}
             </div>
-            <div className="flex-1 min-w-0"> {/* min-w-0 for truncate to work */}
+            <div className="flex-1 min-w-0">
                 <p className="opacity-80 text-xs lg:text-sm font-bold uppercase tracking-wider mb-1">{title}</p>
                 <h3 className="text-lg lg:text-2xl font-bold truncate">{value}</h3>
                 <p className="opacity-70 text-xs font-medium truncate">{desc}</p>
@@ -158,3 +184,29 @@ const StatRow: React.FC<StatRowProps> = ({ title, value, desc, icon, color }) =>
         </div>
     );
 }
+
+// Helper Component for Navigation
+interface NavCardProps {
+    title: string;
+    desc: string;
+    icon: React.ReactNode;
+    color: string;
+    onClick: () => void;
+}
+
+const NavCard: React.FC<NavCardProps> = ({ title, desc, icon, color, onClick }) => {
+    return (
+        <button
+            onClick={onClick}
+            className={`w-full p-5 rounded-2xl border border-transparent flex items-center gap-4 shadow-sm transition-all hover:scale-[1.02] active:scale-95 text-left ${color}`}
+        >
+            <div className="p-3 bg-white/60 rounded-xl shadow-sm shrink-0">
+                {icon}
+            </div>
+            <div>
+                <h3 className="font-bold text-lg leading-tight">{title}</h3>
+                <p className="opacity-70 text-sm">{desc}</p>
+            </div>
+        </button>
+    )
+}
diff --git a/Frontend/project-CL/src/features/financial/components/DeleteCategoryModal.tsx b/Frontend/project-CL/src/features/financial/components/DeleteCategoryModal.tsx
new file mode 100644
index 0000000..cb33ee5
--- /dev/null
+++ b/Frontend/project-CL/src/features/financial/components/DeleteCategoryModal.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface DeleteCategoryModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    categoryName: string;
+}
+
+export default function DeleteCategoryModal({ isOpen, onClose, onConfirm, categoryName }: DeleteCategoryModalProps) {
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+            <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm overflow-hidden transform transition-all p-6">
+                <h3 className="text-xl font-bold text-gray-800 mb-2">Delete Category</h3>
+                <p className="text-gray-600 mb-6">
+                    Are you sure you want to delete <span className="font-bold text-gray-900">"{categoryName}"</span>? This action cannot be undone.
+                </p>
+
+                <div className="flex gap-3">
+                    <button
+                        onClick={onClose}
+                        className="flex-1 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-xl font-semibold transition-colors border border-gray-200"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={onConfirm}
+                        className="flex-1 px-4 py-2 bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700 rounded-xl font-bold transition-colors border border-red-100"
+                    >
+                        Delete
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/Frontend/project-CL/src/features/financial/components/DeleteTransactionModal.tsx b/Frontend/project-CL/src/features/financial/components/DeleteTransactionModal.tsx
new file mode 100644
index 0000000..aea7109
--- /dev/null
+++ b/Frontend/project-CL/src/features/financial/components/DeleteTransactionModal.tsx
@@ -0,0 +1,35 @@
+interface DeleteTransactionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+
+export default function DeleteTransactionModal({ isOpen, onClose, onConfirm }: DeleteTransactionModalProps) {
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+            <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm overflow-hidden transform transition-all p-6">
+                <h3 className="text-xl font-bold text-gray-800 mb-2">Delete Transaction</h3>
+                <p className="text-gray-600 mb-6">
+                    Are you sure you want to delete this transaction? This action cannot be undone and will affect your balance.
+                </p>
+
+                <div className="flex gap-3">
+                    <button
+                        onClick={onClose}
+                        className="flex-1 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-xl font-semibold transition-colors border border-gray-200"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={onConfirm}
+                        className="flex-1 px-4 py-2 bg-red-50 text-red-600 hover:bg-red-100 hover:text-red-700 rounded-xl font-bold transition-colors border border-red-100"
+                    >
+                        Delete
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/Frontend/project-CL/src/features/financial/components/views/BudgetingView.tsx b/Frontend/project-CL/src/features/financial/components/views/BudgetingView.tsx
new file mode 100644
index 0000000..20bf989
--- /dev/null
+++ b/Frontend/project-CL/src/features/financial/components/views/BudgetingView.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const BudgetingView: React.FC = () => {
+    return (
+        <div className="flex items-center justify-center h-full text-slate-400">
+            <div className="text-center">
+                <h2 className="text-xl font-semibold">Budgeting Tools</h2>
+                <p>Features coming soon...</p>
+            </div>
+        </div>
+    );
+};
+
+export default BudgetingView;
diff --git a/Frontend/project-CL/src/features/financial/components/views/CategoryView.tsx b/Frontend/project-CL/src/features/financial/components/views/CategoryView.tsx
new file mode 100644
index 0000000..b60e78c
--- /dev/null
+++ b/Frontend/project-CL/src/features/financial/components/views/CategoryView.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Target, Wallet, TrendingUp, PiggyBank, Pencil, Trash2 } from 'lucide-react';
+import type { Category } from '../../services/financialService';
+
+interface CategoryViewProps {
+    categories: Category[];
+    onEdit?: (category: Category) => void;
+    onDelete?: (id: number) => void;
+}
+
+const CategoryView: React.FC<CategoryViewProps> = ({ categories, onEdit, onDelete }) => {
+
+    // Group categories by bucket
+    const buckets = {
+        needs: categories.filter(c => c.type === 'expense' && c.bucket.toLowerCase() === 'needs'),
+        wants: categories.filter(c => c.type === 'expense' && c.bucket.toLowerCase() === 'wants'),
+        saving: categories.filter(c => c.type === 'expense' && (c.bucket.toLowerCase() === 'saving' || c.bucket.toLowerCase() === 'savings')),
+        invest: categories.filter(c => c.type === 'expense' && c.bucket.toLowerCase() === 'invest'),
+        income: categories.filter(c => c.type === 'income')
+    };
+
+    const BucketColumn = ({ title, items, color, icon: Icon }: any) => (
+        <div className="flex flex-col h-full min-w-[280px] w-full bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+            {/* Header */}
+            <div className={`p-4 border-b border-slate-100 flex items-center gap-3 ${color.bg}`}>
+                <div className={`p-2 rounded-lg bg-white/60 ${color.text}`}>
+                    <Icon size={20} />
+                </div>
+                <div>
+                    <h3 className={`font-bold ${color.text} `}>{title}</h3>
+                    <p className="text-xs opacity-70 font-medium">{items.length} Categories</p>
+                </div>
+            </div>
+
+            {/* List */}
+            <div className="flex-1 p-3 overflow-y-auto space-y-2">
+                {items.length === 0 ? (
+                    <div className="text-center py-10 text-slate-400 text-sm">
+                        No categories yet
+                    </div>
+                ) : (
+                    items.map((cat: Category) => (
+                        <div key={cat.id} className="p-3 bg-slate-50 border border-slate-100 rounded-xl hover:bg-slate-100 transition-colors group relative flex justify-between items-center">
+                            <span className="font-semibold text-slate-700">{cat.name}</span>
+
+                            {/* Hover Actions */}
+                            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <button
+                                    onClick={() => onEdit?.(cat)}
+                                    className="p-1.5 hover:bg-blue-100 text-slate-400 hover:text-blue-600 rounded-lg transition-colors"
+                                    title="Edit"
+                                >
+                                    <Pencil size={14} />
+                                </button>
+                                <button
+                                    onClick={() => onDelete?.(cat.id)}
+                                    className="p-1.5 hover:bg-red-100 text-slate-400 hover:text-red-600 rounded-lg transition-colors"
+                                    title="Delete"
+                                >
+                                    <Trash2 size={14} />
+                                </button>
+                            </div>
+                        </div>
+                    ))
+                )}
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="h-full w-full p-6 overflow-x-auto">
+            <div className="flex gap-6 h-full min-w-max">
+                {/* Income Column (Optional but good to have) */}
+                <BucketColumn
+                    title="Income Sources"
+                    items={buckets.income}
+                    color={{ bg: 'bg-emerald-50', text: 'text-emerald-700' }}
+                    icon={Wallet}
+                />
+
+                {/* Expense Buckets */}
+                <BucketColumn
+                    title="Needs (Essentials)"
+                    items={buckets.needs}
+                    color={{ bg: 'bg-rose-50', text: 'text-rose-700' }}
+                    icon={Target}
+                />
+                <BucketColumn
+                    title="Wants (Lifestyle)"
+                    items={buckets.wants}
+                    color={{ bg: 'bg-orange-50', text: 'text-orange-700' }}
+                    icon={Wallet}
+                />
+                <BucketColumn
+                    title="Saving (Future)"
+                    items={buckets.saving}
+                    color={{ bg: 'bg-cyan-50', text: 'text-cyan-700' }}
+                    icon={PiggyBank}
+                />
+                <BucketColumn
+                    title="Investments"
+                    items={buckets.invest}
+                    color={{ bg: 'bg-indigo-50', text: 'text-indigo-700' }}
+                    icon={TrendingUp}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default CategoryView;
diff --git a/Frontend/project-CL/src/features/financial/components/views/GoalsView.tsx b/Frontend/project-CL/src/features/financial/components/views/GoalsView.tsx
new file mode 100644
index 0000000..c856e43
--- /dev/null
+++ b/Frontend/project-CL/src/features/financial/components/views/GoalsView.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const GoalsView: React.FC = () => {
+    return (
+        <div className="flex items-center justify-center h-full text-slate-400">
+            <div className="text-center">
+                <h2 className="text-xl font-semibold">Savings Goals</h2>
+                <p>Features coming soon...</p>
+            </div>
+        </div>
+    );
+};
+
+export default GoalsView;
diff --git a/Frontend/project-CL/src/features/financial/components/views/TransactionView.tsx b/Frontend/project-CL/src/features/financial/components/views/TransactionView.tsx
new file mode 100644
index 0000000..f6d791c
--- /dev/null
+++ b/Frontend/project-CL/src/features/financial/components/views/TransactionView.tsx
@@ -0,0 +1,263 @@
+import React, { useState, useMemo } from 'react';
+import { Calendar, Archive, Pencil, Trash2, Filter, ArrowUpDown, X } from 'lucide-react';
+import type { Transaction, Category } from '../../services/financialService';
+
+interface TransactionViewProps {
+    transactions: Transaction[];
+    categories: Category[];
+    onEdit?: (transaction: Transaction) => void;
+    onDelete?: (id: number) => void;
+}
+
+const TransactionView: React.FC<TransactionViewProps> = ({ transactions, categories, onEdit, onDelete }) => {
+
+    // Helper to get category details
+    const getCategory = (id: number) => categories.find(c => c.id === id);
+
+    // Date formatter
+    const formatDate = (dateString: string) => {
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+        });
+    };
+
+    // Currency formatter
+    const formatCurrency = (amount: number) => {
+        return new Intl.NumberFormat('id-ID', {
+            style: 'currency',
+            currency: 'IDR',
+            minimumFractionDigits: 0
+        }).format(amount);
+    };
+
+    // Filter & Sort State
+    const [filterType, setFilterType] = useState<'all' | 'income' | 'expense'>('all');
+    const [filterCategory, setFilterCategory] = useState<number | 'all'>('all');
+    const [filterDate, setFilterDate] = useState<string>('');
+    const [sortOrder, setSortOrder] = useState<'newest' | 'oldest'>('newest');
+
+    // Filter and Sort Logic
+    const filteredAndSortedTransactions = useMemo(() => {
+        let result = [...transactions];
+
+        // 1. Filter by Type
+        if (filterType !== 'all') {
+            result = result.filter(t => {
+                const cat = getCategory(t.category_id);
+                return cat?.type === filterType;
+            });
+        }
+
+        // 2. Filter by Category
+        if (filterCategory !== 'all') {
+            result = result.filter(t => t.category_id === Number(filterCategory));
+        }
+
+        // 3. Filter by Date
+        if (filterDate) {
+            result = result.filter(t => t.date.startsWith(filterDate));
+        }
+
+        // 4. Sort
+        result.sort((a, b) => {
+            const dateA = new Date(a.date).getTime();
+            const dateB = new Date(b.date).getTime();
+            return sortOrder === 'newest' ? dateB - dateA : dateA - dateB;
+        });
+
+        return result;
+    }, [transactions, filterType, filterCategory, filterDate, sortOrder, categories]);
+
+    // Reset Filters
+    const clearFilters = () => {
+        setFilterType('all');
+        setFilterCategory('all');
+        setFilterDate('');
+        setSortOrder('newest');
+    };
+
+    const hasActiveFilters = filterType !== 'all' || filterCategory !== 'all' || filterDate !== '';
+
+    return (
+        <div className="h-full w-full p-6 overflow-hidden flex flex-col">
+            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm flex-1 overflow-hidden flex flex-col">
+
+                {/* Header with Controls */}
+                <div className="p-5 border-b border-slate-100 flex flex-col gap-4">
+                    <div className="flex justify-between items-center">
+                        <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
+                            Transaction History
+                            <span className="px-2 py-0.5 rounded-full bg-slate-100 text-xs font-medium text-slate-500">
+                                {filteredAndSortedTransactions.length}
+                            </span>
+                        </h2>
+
+                        {/* Sort Toggle */}
+                        <button
+                            onClick={() => setSortOrder(prev => prev === 'newest' ? 'oldest' : 'newest')}
+                            className="flex items-center gap-2 text-sm text-slate-500 hover:text-blue-600 transition-colors bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-lg border border-transparent hover:border-slate-200"
+                        >
+                            <ArrowUpDown size={14} />
+                            <span>{sortOrder === 'newest' ? 'Newest First' : 'Oldest First'}</span>
+                        </button>
+                    </div>
+
+                    {/* Filters Bar */}
+                    <div className="flex flex-wrap items-center gap-3">
+                        <div className="flex items-center gap-2 bg-slate-50 p-1 rounded-lg border border-slate-100">
+                            <Filter size={14} className="text-slate-400 ml-2" />
+
+                            {/* Type Filter */}
+                            <select
+                                value={filterType}
+                                onChange={(e) => setFilterType(e.target.value as any)}
+                                className="bg-transparent text-sm border-none focus:ring-0 text-slate-600 font-medium py-1 pl-1 pr-6 cursor-pointer hover:bg-white rounded-md transition-colors"
+                            >
+                                <option value="all">All Types</option>
+                                <option value="income">Income</option>
+                                <option value="expense">Expense</option>
+                            </select>
+
+                            <div className="w-px h-4 bg-slate-200"></div>
+
+                            {/* Category Filter */}
+                            <select
+                                value={filterCategory}
+                                onChange={(e) => setFilterCategory(e.target.value === 'all' ? 'all' : Number(e.target.value))}
+                                className="bg-transparent text-sm border-none focus:ring-0 text-slate-600 font-medium py-1 pl-1 pr-6 cursor-pointer hover:bg-white rounded-md transition-colors max-w-[150px]"
+                            >
+                                <option value="all">All Categories</option>
+                                {categories.map(c => (
+                                    <option key={c.id} value={c.id}>{c.name}</option>
+                                ))}
+                            </select>
+                        </div>
+
+                        {/* Date Filter */}
+                        <div className="relative">
+                            <input
+                                type="date"
+                                value={filterDate}
+                                onChange={(e) => setFilterDate(e.target.value)}
+                                className="bg-slate-50 border border-slate-100 text-slate-600 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block px-3 py-1.5 hover:bg-slate-100 transition-colors outline-none"
+                            />
+                        </div>
+
+                        {/* Reset Button */}
+                        {hasActiveFilters && (
+                            <button
+                                onClick={clearFilters}
+                                className="flex items-center gap-1 text-xs text-rose-500 hover:text-rose-600 hover:bg-rose-50 px-2 py-1.5 rounded-lg transition-colors ml-auto md:ml-0"
+                            >
+                                <X size={12} />
+                                Clear
+                            </button>
+                        )}
+                    </div>
+                </div>
+
+                {/* Content Area with Sticky Header */}
+                <div className="flex-1 overflow-y-auto relative">
+                    {/* Sticky Table Header */}
+                    <div className="sticky top-0 z-40 bg-slate-50 border-b border-slate-100 flex-none">
+                        <div className="grid grid-cols-12 gap-4 px-6 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            <div className="col-span-1 text-left">No</div>
+                            <div className="col-span-2 text-left">Date</div>
+                            <div className="col-span-4 text-left">Title (Category)</div>
+                            <div className="col-span-2 text-right">Amount</div>
+                            <div className="col-span-2 text-center">Bucket</div>
+                            <div className="col-span-1 text-center">Action</div>
+                        </div>
+                    </div>
+
+                    <div className="p-2 space-y-1 pb-20"> {/* pb-20 for bottom space */}
+                        {filteredAndSortedTransactions.length === 0 ? (
+                            <div className="flex flex-col items-center justify-center h-64 text-slate-400">
+                                <Archive size={48} className="mb-4 opacity-20" />
+                                <p>{hasActiveFilters ? 'No matches found' : 'No transactions found'}</p>
+                                {hasActiveFilters && (
+                                    <button onClick={clearFilters} className="text-blue-500 text-sm hover:underline mt-2">
+                                        Clear filters
+                                    </button>
+                                )}
+                            </div>
+                        ) : (
+                            filteredAndSortedTransactions.map((t, index) => {
+                                const cat = getCategory(t.category_id);
+                                return (
+                                    <div
+                                        key={t.id}
+                                        className="group grid grid-cols-12 gap-4 px-4 py-3 rounded-xl hover:bg-blue-50/50 transition-all border border-transparent hover:border-blue-100 relative cursor-default items-center"
+                                    >
+                                        {/* Description Tooltip - Now inside same context, high z-index should work better if needed, 
+                                            but let's put it at the bottom left of title to avoid header entirely if possible */}
+                                        {t.description && (
+                                            <div className="absolute left-16 top-full mt-2 w-64 bg-slate-800 text-white text-xs p-3 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none shadow-xl z-50 text-left">
+                                                <div className="font-semibold mb-1 text-slate-300 uppercase tracking-wider text-[10px]">Description</div>
+                                                {t.description}
+                                                {/* Arrow pointing up */}
+                                                <div className="absolute -top-1 left-4 w-2 h-2 bg-slate-800 rotate-45"></div>
+                                            </div>
+                                        )}
+
+                                        <div className="col-span-1 text-slate-400 font-medium text-sm flex items-center">
+                                            {index + 1}
+                                        </div>
+
+                                        <div className="col-span-2 text-slate-600/90 text-sm flex items-center gap-2">
+                                            <Calendar size={14} className="text-slate-300" />
+                                            {formatDate(t.date)}
+                                        </div>
+
+                                        <div className="col-span-4 font-semibold text-slate-700 flex items-center gap-2 truncate relative">
+                                            <div className={`w-2 h-2 rounded-full flex-none ${cat?.type === 'income' ? 'bg-emerald-400' : 'bg-rose-400'}`}></div>
+                                            <span className="truncate" title={cat?.name}>{cat?.name || 'Unknown'}</span>
+                                        </div>
+
+                                        <div className={`col-span-2 text-right font-bold text-sm flex items-center justify-end ${cat?.type === 'income' ? 'text-emerald-600' : 'text-slate-700'}`}>
+                                            {cat?.type === 'income' ? '+' : '-'} {formatCurrency(t.amount)}
+                                        </div>
+
+                                        <div className="col-span-2 flex items-center justify-center">
+                                            <span className={`px-2.5 py-1 rounded-lg text-xs font-semibold capitalize border truncate max-w-full text-center ${cat?.bucket === 'needs' ? 'bg-rose-50 text-rose-600 border-rose-100' :
+                                                cat?.bucket === 'wants' ? 'bg-orange-50 text-orange-600 border-orange-100' :
+                                                    cat?.bucket === 'saving' || cat?.bucket === 'savings' ? 'bg-cyan-50 text-cyan-600 border-cyan-100' :
+                                                        cat?.bucket === 'invest' ? 'bg-indigo-50 text-indigo-600 border-indigo-100' :
+                                                            cat?.type === 'income' ? 'bg-emerald-50 text-emerald-600 border-emerald-100' :
+                                                                'bg-slate-100 text-slate-500 border-slate-200'
+                                                }`}>
+                                                {cat?.type === 'income' ? 'Income' : cat?.bucket || 'Unset'}
+                                            </span>
+                                        </div>
+
+                                        <div className="col-span-1 flex items-center justify-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <button
+                                                onClick={(e) => { e.stopPropagation(); onEdit?.(t); }}
+                                                className="p-1.5 hover:bg-blue-100 text-slate-400 hover:text-blue-600 rounded-lg transition-colors"
+                                                title="Edit"
+                                            >
+                                                <Pencil size={14} />
+                                            </button>
+                                            <button
+                                                onClick={(e) => { e.stopPropagation(); onDelete?.(t.id); }}
+                                                className="p-1.5 hover:bg-red-100 text-slate-400 hover:text-red-600 rounded-lg transition-colors"
+                                                title="Delete"
+                                            >
+                                                <Trash2 size={14} />
+                                            </button>
+                                        </div>
+                                    </div>
+                                );
+                            })
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TransactionView;
diff --git a/Frontend/project-CL/src/features/financial/financial.tsx b/Frontend/project-CL/src/features/financial/financial.tsx
index b0d7cf3..f871b88 100644
--- a/Frontend/project-CL/src/features/financial/financial.tsx
+++ b/Frontend/project-CL/src/features/financial/financial.tsx
@@ -1,10 +1,138 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useFinancialDashboard } from './hooks/useFinancialDashboard';
 import { DashboardCards } from './components/DashboardCards';
 import Header from "../../components/Header";
+import { Layout, Tags, ArrowRightLeft, PieChart, Target } from 'lucide-react';
+import { financialService } from './services/financialService';
+
+// Views
+import CategoryView from './components/views/CategoryView';
+import TransactionView from './components/views/TransactionView';
+import BudgetingView from './components/views/BudgetingView';
+import GoalsView from './components/views/GoalsView';
+
+// Modals
+import AddCategoryModal from './components/AddCategoryModal';
+import DeleteCategoryModal from './components/DeleteCategoryModal';
+import AddTransactionModal from './components/AddTransactionModal';
+import DeleteTransactionModal from './components/DeleteTransactionModal';
 
 const Financial: React.FC = () => {
-    const { metrics, loading, error } = useFinancialDashboard();
+    const [view, setView] = useState<'home' | 'category' | 'transaction' | 'budgeting' | 'goals'>('home');
+    const { metrics, loading, error, categories, transactions, refreshData } = useFinancialDashboard();
+
+    // Modal States
+    const [isAddingCategory, setIsAddingCategory] = useState(false);
+    const [isAddingTransaction, setIsAddingTransaction] = useState(false);
+    const [isDeletingCategory, setIsDeletingCategory] = useState(false);
+    const [selectedCategory, setSelectedCategory] = useState<any | null>(null);
+    const [categoryToDelete, setCategoryToDelete] = useState<any | null>(null);
+
+    // Transaction States
+    const [selectedTransaction, setSelectedTransaction] = useState<any | null>(null);
+    const [transactionToDelete, setTransactionToDelete] = useState<any | null>(null);
+    const [isDeletingTransaction, setIsDeletingTransaction] = useState(false);
+
+    // Handlers
+    const handleSaveTransaction = async (data: { category_id: number; amount: number; date: string; description: string }) => {
+        try {
+            if (selectedTransaction) {
+                await financialService.updateTransaction(selectedTransaction.id, {
+                    ...data,
+                    id: selectedTransaction.id,
+                    user_id: 1 // TODO: Auth
+                });
+            } else {
+                await financialService.createTransaction({
+                    ...data,
+                    user_id: 1 // TODO: Get from auth context
+                });
+            }
+            await refreshData();
+            setIsAddingTransaction(false);
+            setSelectedTransaction(null);
+        } catch (error) {
+            console.error("Failed to save transaction", error);
+        }
+    };
+
+    const handleSaveCategory = async (name: string, type: 'income' | 'expense', bucket: string) => {
+        try {
+            if (selectedCategory) {
+                // Update
+                await financialService.updateCategory(selectedCategory.id, {
+                    name,
+                    type,
+                    bucket: type === 'income' ? 'income' : bucket
+                });
+            } else {
+                // Create
+                await financialService.createCategory({
+                    name,
+                    type,
+                    bucket: type === 'income' ? 'income' : bucket,
+                    user_id: 1 // TODO: Get from auth context
+                });
+            }
+            await refreshData();
+            setIsAddingCategory(false);
+            setSelectedCategory(null);
+        } catch (error) {
+            console.error("Failed to save category", error);
+            // Optional: Show toast error
+        }
+    };
+
+    const handleEditCategory = (category: any) => {
+        setSelectedCategory(category);
+        setIsAddingCategory(true);
+    };
+
+    const handleDeleteCategory = (id: number) => {
+        const category = categories.find(c => c.id === id);
+        if (category) {
+            setCategoryToDelete(category);
+            setIsDeletingCategory(true);
+        }
+    };
+
+    const confirmDeleteCategory = async () => {
+        if (!categoryToDelete) return;
+        try {
+            await financialService.deleteCategory(categoryToDelete.id);
+            await refreshData();
+            setIsDeletingCategory(false);
+            setCategoryToDelete(null);
+        } catch (error) {
+            console.error("Failed to delete category", error);
+        }
+    };
+
+    // Transaction Actions
+    const handleEditTransaction = (tx: any) => {
+        setSelectedTransaction(tx);
+        setIsAddingTransaction(true);
+    };
+
+    const handleDeleteTransaction = (id: number) => {
+        const tx = transactions.find(t => t.id === id);
+        if (tx) {
+            setTransactionToDelete(tx);
+            setIsDeletingTransaction(true);
+        }
+    };
+
+    const confirmDeleteTransaction = async () => {
+        if (!transactionToDelete) return;
+        try {
+            await financialService.deleteTransaction(transactionToDelete.id);
+            await refreshData();
+            setIsDeletingTransaction(false);
+            setTransactionToDelete(null);
+        } catch (error) {
+            console.error("Failed to delete transaction", error);
+        }
+    };
 
     if (loading) {
         return (
@@ -14,24 +142,119 @@ const Financial: React.FC = () => {
         );
     }
 
+    const ViewButton = ({ id, label, icon: Icon }: any) => (
+        <button
+            onClick={() => setView(id)}
+            className={`px-4 py-2 rounded-lg transition-all flex items-center gap-2 font-medium ${view === id
+                ? 'bg-blue-600 text-white shadow-md'
+                : 'bg-white text-slate-600 hover:bg-slate-50 border border-slate-200'
+                }`}
+        >
+            <Icon size={18} />
+            <span>{label}</span>
+        </button>
+    );
+
     return (
         <div className="min-h-screen h-full w-full flex flex-col bg-white overflow-hidden">
             <div className="px-6 pt-6 pb-4 border-b border-slate-100 flex-none w-full">
                 <Header title="Financial" subtitle="Track your income, expenses, and savings goals" />
 
-                {/* Future: Toolbar / Filters similar to Academic could go here */}
+                <div className="flex flex-col w-full gap-5 mt-4">
+                    {/* Controls Row */}
+                    <div className="flex justify-between items-center w-full gap-4">
+
+                        {/* View Switcher - Main Nav */}
+                        <div className="flex flex-wrap gap-2">
+                            <ViewButton id="home" label="Home" icon={Layout} />
+                            <ViewButton id="category" label="Category" icon={Tags} />
+                            <ViewButton id="transaction" label="Transaction" icon={ArrowRightLeft} />
+                            <ViewButton id="budgeting" label="Budgeting" icon={PieChart} />
+                            <ViewButton id="goals" label="Goals" icon={Target} />
+                        </div>
+
+                        {/* Context Action Button */}
+                        <button
+                            onClick={() => {
+                                if (view === 'category') setIsAddingCategory(true);
+                                if (view === 'transaction') setIsAddingTransaction(true);
+                                // Add logic for other views
+                            }}
+                            className={`px-6 py-2.5 bg-slate-900 text-white rounded-xl hover:bg-black font-bold transition-all shadow-lg flex items-center gap-2 ${view === 'home' ? 'hidden' : ''}`}
+                        >
+                            <span>+ {view === 'category' ? 'Category' : view === 'transaction' ? 'Transaction' : 'Add New'}</span>
+                        </button>
+                    </div>
+                </div>
             </div>
 
             {/* View Area */}
             <div className="flex-1 w-full overflow-hidden bg-slate-50 relative">
-                {!error ? (
+                {error ? (
                     <div className="flex items-center justify-center h-full text-red-500">
                         {error}
                     </div>
                 ) : (
-                    <DashboardCards metrics={metrics} />
+                    <>
+                        {view === 'home' && <DashboardCards metrics={metrics} onViewChange={setView} />}
+                        {view === 'category' && (
+                            <CategoryView
+                                categories={categories}
+                                onEdit={handleEditCategory}
+                                onDelete={handleDeleteCategory}
+                            />
+                        )}
+                        {view === 'transaction' && (
+                            <TransactionView
+                                transactions={transactions}
+                                categories={categories}
+                                onEdit={handleEditTransaction}
+                                onDelete={handleDeleteTransaction}
+                            />
+                        )}
+                        {view === 'budgeting' && <BudgetingView />}
+                        {view === 'goals' && <GoalsView />}
+                    </>
                 )}
             </div>
+
+            {/* Modals */}
+            <AddCategoryModal
+                isOpen={isAddingCategory}
+                onClose={() => {
+                    setIsAddingCategory(false);
+                    setSelectedCategory(null);
+                }}
+                onSave={handleSaveCategory}
+                category={selectedCategory}
+            />
+
+            <DeleteCategoryModal
+                isOpen={isDeletingCategory}
+                onClose={() => {
+                    setIsDeletingCategory(false);
+                    setCategoryToDelete(null);
+                }}
+                onConfirm={confirmDeleteCategory}
+                categoryName={categoryToDelete?.name || ''}
+            />
+
+            <AddTransactionModal
+                isOpen={isAddingTransaction}
+                onClose={() => {
+                    setIsAddingTransaction(false);
+                    setSelectedTransaction(null);
+                }}
+                onSave={handleSaveTransaction}
+                categories={categories}
+                transaction={selectedTransaction}
+            />
+
+            <DeleteTransactionModal
+                isOpen={isDeletingTransaction}
+                onClose={() => setIsDeletingTransaction(false)}
+                onConfirm={confirmDeleteTransaction}
+            />
         </div>
     );
 };
diff --git a/Frontend/project-CL/src/features/financial/hooks/useFinancialDashboard.ts b/Frontend/project-CL/src/features/financial/hooks/useFinancialDashboard.ts
index 4e7e9a8..64bc190 100644
--- a/Frontend/project-CL/src/features/financial/hooks/useFinancialDashboard.ts
+++ b/Frontend/project-CL/src/features/financial/hooks/useFinancialDashboard.ts
@@ -34,29 +34,30 @@ export const useFinancialDashboard = () => {
         goalsTotalSaved: 0
     });
 
-    useEffect(() => {
-        const fetchData = async () => {
-            try {
-                const [txData, catData, goalData] = await Promise.all([
-                    financialService.getTransactions(),
-                    financialService.getCategories(),
-                    financialService.getGoals()
-                ]);
-
-                setTransactions(txData);
-                setCategories(catData);
-                setGoals(goalData);
-
-                calculateMetrics(txData, catData, goalData);
-            } catch (err) {
-                console.error("Failed to fetch financial data", err);
-                setError("Failed to load dashboard data");
-            } finally {
-                setLoading(false);
-            }
-        };
+    const refreshData = async () => {
+        setLoading(true);
+        try {
+            const [txData, catData, goalData] = await Promise.all([
+                financialService.getTransactions(),
+                financialService.getCategories(),
+                financialService.getGoals()
+            ]);
+
+            setTransactions(txData);
+            setCategories(catData);
+            setGoals(goalData);
+
+            calculateMetrics(txData, catData, goalData);
+        } catch (err) {
+            console.error("Failed to fetch financial data", err);
+            setError("Failed to load dashboard data");
+        } finally {
+            setLoading(false);
+        }
+    };
 
-        fetchData();
+    useEffect(() => {
+        refreshData();
     }, []);
 
     const calculateMetrics = (txs: Transaction[], cats: Category[], goals: Goal[]) => {
@@ -115,5 +116,5 @@ export const useFinancialDashboard = () => {
         });
     };
 
-    return { metrics, loading, error, transactions, categories, goals };
+    return { metrics, loading, error, transactions, categories, goals, refreshData };
 };