diff --git a/oldhomepage.txt b/oldhomepage.txt
new file mode 100644
index 0000000..c4b731d
--- /dev/null
+++ b/oldhomepage.txt
@@ -0,0 +1,477 @@
+import React, { useState, useEffect } from 'react';
+import { Pie } from 'react-chartjs-2';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+import { doc, getDoc, setDoc, updateDoc, deleteDoc } from 'firebase/firestore';
+import { getAuth, onAuthStateChanged, signOut, deleteUser, reauthenticateWithCredential, EmailAuthProvider } from 'firebase/auth';
+import { db } from './firebase-config';
+import './homepage.css';
+import Modal from './Modal.js';
+import { set } from 'lodash';
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+const Homepage = () => {
+  const [catData, setCatData] = useState([]);
+  const [catLabels, setCatLabels] = useState([]);
+  const [showModal, setShowModal] = useState({ log: false, update: false, new: false, income: false, deleteAccount: false });
+  const [formData, setFormData] = useState({ amount: '', category: '', memo: '', oldCategory: '', newCategory: { name: '', amount: 0 }, income: '' });
+  const [userId, setUserId] = useState(null);
+  const [user, setUser] = useState(null);
+  const [tutorial, setTutorial] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [income, setIncome] = useState(0);
+  const [password, setPassword] = useState('');
+  const [transactionHistory, setTransactionHistory] = useState([]);
+
+  const tutorialSteps = [
+    {
+      title: 'Step 1: Set Up Income',
+      content: 'To set up your income, go to the income section and enter your monthly income.',
+    },
+    {
+      title: 'Step 2: Create a Category',
+      content: 'To create a new category, click on the "New Category" button and fill in the details.',
+    },
+    {
+      title: 'Step 3: Log a Transaction',
+      content: 'To log a transaction, click on the "Log Transaction" button and enter the transaction details.',
+    },
+  ];
+
+  useEffect(() => {
+    const auth = getAuth();
+
+    const unsubscribe = onAuthStateChanged(auth, async (user) => {
+      if (user) {
+        setUser(user);
+        setUserId(user.uid);
+        const userId = user.uid;
+        const userDocRef = doc(db, 'users', userId);
+
+        try {
+          const userDoc = await getDoc(userDocRef);
+          if (!userDoc.exists()) {
+            await setDoc(
+              userDocRef,
+              {
+                email: user.email,
+                name: user.displayName,
+                createdAt: new Date(),
+                budgetData: [],
+                tutorial: false,
+              },
+              { merge: true }
+            );
+            console.log('User document created with initial data');
+          } else {
+            console.log('User document already exists. Data fetched successfully.');
+          }
+
+          const userData = userDoc.data();
+          const budgetData = userData.budgetData || [];
+          const incomeEntry = budgetData.find(entry => entry.category === 'Income');
+          const incomeAmount = incomeEntry ? incomeEntry.amount : 0;
+          setIncome(incomeAmount);
+
+          const categories = budgetData.filter(entry => entry.type === 'category').map((entry) => entry.category);
+          const amounts = budgetData.filter(entry => entry.type === 'category').map((entry) => entry.amount);
+
+          setCatData(amounts);
+          setCatLabels(categories);
+          setTutorial(userData.tutorial || false);
+
+          const transactions = budgetData
+            .filter(entry => entry.type === 'category')
+            .flatMap(entry => entry.transactions || [])
+            .map(transaction => ({
+              category: transaction.category,
+              memo: transaction.memo,
+              amount: transaction.amount,
+              date: transaction.date,
+              time: transaction.time
+            }))
+            .sort((a, b) => new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time));
+          setTransactionHistory(transactions);
+        } catch (error) {
+          console.error('Error checking or creating user document:', error);
+        }
+      } else {
+        console.log('No user is currently logged in');
+      }
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const handleOpenModal = (type) => {
+    setShowModal({ ...showModal, [type]: true });
+  };
+
+  const handleCloseModal = () => {
+    setShowModal({ log: false, update: false, new: false, income: false, deleteAccount: false });
+    setFormData({ amount: '', category: '', memo: '', oldCategory: '', newCategory: { name: '', amount: 0 }, income: '' });
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    const keys = name.split('.');
+    setFormData((prevState) => {
+      let newState = { ...prevState };
+      let current = newState;
+      for (let i = 0; i < keys.length - 1; i++) {
+        current = current[keys[i]];
+      }
+      current[keys[keys.length - 1]] = value;
+      return newState;
+    });
+  };
+
+  const handleFormSubmit = async (event, type) => {
+    event.preventDefault();
+
+    if (user && userId) {
+      const userDocRef = doc(db, 'users', userId);
+
+      try {
+        const userDoc = await getDoc(userDocRef);
+        let updatedData;
+
+        if (userDoc.exists()) {
+          const currentData = userDoc.data().budgetData || [];
+
+          if (type === 'log') {
+            const newTransaction = { 
+              amount: parseInt(formData.amount), 
+              memo: formData.memo, 
+              type: 'transaction',
+              date: new Date().toLocaleDateString(),
+              time: new Date().toLocaleTimeString(), 
+              category: formData.category
+            };
+            updatedData = currentData.map((entry) => {
+              if (entry.category === formData.category && entry.type === 'category') {
+                return { ...entry, transactions: [newTransaction, ...(entry.transactions || [])] };
+              }
+              return entry;
+            });
+
+            await setDoc(userDocRef, { budgetData: updatedData }, { merge: true });
+            setFormData({...formData, amount: '', memo: ''});
+
+            setTransactionHistory(prevHistory => [{ ...newTransaction }, ...prevHistory]);
+          } else if (type === 'update') {
+            updatedData = currentData.map((entry) =>
+              entry.category === formData.oldCategory ? { ...entry, category: formData.newCategory.name, amount: parseInt(formData.newCategory.amount), type: 'category' } : entry
+            );
+            updatedData = updatedData.filter((entry, index, self) =>
+              index === self.findIndex((e) => e.category === entry.category)
+            );
+            await updateDoc(userDocRef, { budgetData: updatedData });
+          } else if (type === 'new') {
+            const newEntry = { category: formData.newCategory.name, amount: parseInt(formData.newCategory.amount), type: 'category', transactions: [] };
+            updatedData = [...currentData, newEntry];
+            await updateDoc(userDocRef, { budgetData: updatedData });
+          } else if (type === 'income') {
+            const incomeEntry = { category: 'Income', amount: parseInt(formData.income), type: 'income' };
+            updatedData = currentData.filter(entry => entry.category !== 'Income');
+            updatedData.push(incomeEntry);
+            await updateDoc(userDocRef, { budgetData: updatedData });
+            setIncome(incomeEntry.amount);
+          }
+
+          setCatData(updatedData.filter(entry => entry.type === 'category').map((entry) => entry.amount));
+          setCatLabels(updatedData.filter(entry => entry.type === 'category').map((entry) => entry.category));
+          console.log('Data updated successfully');
+        } else {
+          const newEntry = {
+            category: formData.category,
+            memo: formData.memo,
+            amount: parseInt(formData.amount),
+            type: 'transaction',
+            date: new Date().toLocaleDateString(),
+            time: new Date().toLocaleTimeString()
+          };
+          updatedData = [newEntry];
+
+          await setDoc(
+            userDocRef,
+            {
+              email: user.email,
+              name: user.displayName,
+              createdAt: new Date(),
+              budgetData: updatedData,
+            },
+            { merge: true }
+          );
+          setCatData(updatedData.filter(entry => entry.type === 'category').map((entry) => entry.amount));
+          setCatLabels(updatedData.filter(entry => entry.type === 'category').map((entry) => entry.category));
+        }
+
+        handleCloseModal();
+      } catch (error) {
+        console.error('Error updating Firestore:', error);
+      }
+    } else {
+      console.error('No user is currently authenticated');
+    }
+  };
+
+  const handleNextStep = () => {
+    if (currentStep < tutorialSteps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handlePrevStep = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleTutorialClick = async () => {
+    if (user && userId) {
+      const userDocRef = doc(db, 'users', userId);
+      try {
+        await updateDoc(userDocRef, { tutorial: true });
+        setTutorial(true);
+        console.log('Tutorial status updated successfully');
+      } catch (error) {
+        console.error('Error updating tutorial status:', error);
+      }
+    } else {
+      console.error('No user is currently authenticated');
+    }
+  };
+
+  const handleExitTutorial = async () => {
+    if (user && userId) {
+      const userDocRef = doc(db, 'users', userId);
+      try {
+        await updateDoc(userDocRef, { tutorial: false });
+        setTutorial(false);
+        console.log('Tutorial status updated successfully');
+      } catch (error) {
+        console.error('Error updating tutorial status:', error);
+      }
+    } else {
+      console.error('No user is currently authenticated');
+    }
+  };
+
+  const handleClearData = async () => {
+    if (user && userId) {
+      const userDocRef = doc(db, 'users', userId);
+      try {
+        await updateDoc(userDocRef, { budgetData: [] });
+        setCatData([]);
+        setCatLabels([]);
+        setTransactionHistory([]);
+        console.log('Data cleared successfully');
+      } catch (error) {
+        console.error('Error clearing data:', error);
+      }
+    } else {
+      console.error('No user is currently authenticated');
+    }
+  };
+
+  const handleLogout = async () => {
+    const auth = getAuth();
+    try {
+      await signOut(auth);
+      console.log('User logged out successfully');
+      window.location.href = '/';
+    } catch (error) {
+      console.error('Logout error:', error.message);
+      alert('Logout failed');
+    }
+  };
+
+  const handleDeleteAccount = async () => {
+    if (user && userId) {
+      const userDocRef = doc(db, 'users', userId);
+      try {
+        await deleteDoc(userDocRef);
+        await deleteUser(user);
+        console.log('Account and data deleted successfully');
+        window.location.href = '/';
+      } catch (error) {
+        console.error('Account deletion error:', error.message);
+        alert('Account deletion failed');
+      }
+    } else {
+      console.error('No user is currently authenticated');
+    }
+  };
+
+  const totalCategoryAmount = catData.reduce((a, b) => a + b, 0);
+  const remainingAmount = Math.max(0, income - totalCategoryAmount);
+
+  const pieData = {
+    labels: [...catLabels, 'Remaining'],
+    datasets: [
+      {
+        label: 'Dollars Spent',
+        data: [...catData, remainingAmount],
+        backgroundColor: [...catLabels.map(() => '#66AA11'), '#CCCCCC'],
+        hoverBackgroundColor: [...catLabels.map(() => '#66AA11'), '#CCCCCC'],
+      },
+    ],
+  };
+
+  const options = {
+    plugins: {
+      legend: {
+        labels: {
+          color: 'white',
+        },
+      },
+    },
+  };
+
+  const tutorialBoxStyle = {
+    position: 'fixed',
+    top: '20%',
+    left: '50%',
+    transform: 'translate(-50%, -20%)',
+    width: '80%',
+    maxWidth: '600px',
+    padding: '20px',
+    backgroundColor: 'white',
+    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+    zIndex: 1000,
+  };
+
+  return (
+    <div className="homepage-container">
+      <div className="header">Money Gremlin</div>
+      <div className="content">
+        <div className="dashboard">
+          <h2>Budget Dashboard</h2>
+          <div className="pie-chart-container">
+            {catData.length > 0 ? (
+              <Pie data={pieData} options={options} />
+            ) : (
+              <p>No data available to display</p>
+            )}
+          </div>
+        </div>
+        <div className="actions">
+          <div className="action-button" title="Log a new transaction" onClick={() => handleOpenModal('log')}>
+            Log Transaction
+          </div>
+          <div className="action-button" title="Update an existing category" onClick={() => handleOpenModal('update')}>
+            Update Category
+          </div>
+          <div className="action-button" title="Create a new category" onClick={() => handleOpenModal('new')}>
+            New Category
+          </div>
+          <div className="action-button" title="Change Income" onClick={() => handleOpenModal('income')}>
+            Change Income
+          </div>
+          <div className="action-button" title="View Transaction History" onClick={() => handleOpenModal('history')}>
+            Transaction History
+          </div>
+        </div>
+      </div>
+
+      <Modal show={showModal.log} onClose={handleCloseModal}>
+        <h2>Log Transaction</h2>
+        <form onSubmit={(e) => handleFormSubmit(e, 'log')}>
+          <label>Category:</label>
+          <select name="category" value={formData.category} onChange={handleInputChange} required>
+            <option value="">Select category</option>
+            {catLabels.map((label) => (
+              <option key={label} value={label}>{label}</option>
+            ))}
+          </select>
+          <label>Memo:</label>
+          <input type="text" name="memo" value={formData.memo} onChange={handleInputChange} placeholder="Enter memo" required />
+          <label>Amount:</label>
+          <input type="number" name="amount" value={formData.amount} onChange={handleInputChange} placeholder="Enter amount" required />
+          <button type="submit">Submit</button>
+        </form>
+      </Modal>
+
+      <Modal show={showModal.update} onClose={handleCloseModal}>
+        <h2>Update Category</h2>
+        <form onSubmit={(e) => handleFormSubmit(e, 'update')}>
+          <label>Old Category Name:</label>
+          <select name="oldCategory" value={formData.oldCategory} onChange={handleInputChange} required>
+            <option value="">Select category</option>
+            {catLabels.map((label) => (
+              <option key={label} value={label}>{label}</option>
+            ))}
+          </select>
+          <label>New Category Name:</label>
+          <input type="text" name="newCategory.name" value={formData.newCategory.name} onChange={handleInputChange} placeholder="Enter new category name" required />
+          <label>New Category Amount:</label>
+          <input type="number" name="newCategory.amount" value={formData.newCategory.amount} onChange={handleInputChange} placeholder="Enter new category amount" required />
+          <button type="submit">Update</button>
+        </form>
+      </Modal>
+
+      <Modal show={showModal.new} onClose={handleCloseModal}>
+        <h2>New Category</h2>
+        <form onSubmit={(e) => handleFormSubmit(e, 'new')}>
+          <label>Category Name:</label>
+          <input type="text" name="newCategory.name" value={formData.newCategory.name} onChange={handleInputChange} placeholder="Enter category name" required />
+          <label>Category Amount:</label>
+          <input type="number" name="newCategory.amount" value={formData.newCategory.amount} onChange={handleInputChange} placeholder="Enter category amount" required />
+          <button type="submit">Create</button>
+        </form>
+      </Modal>
+
+      <Modal show={showModal.income} onClose={handleCloseModal}>
+        <h2>Change Income</h2>
+        <form onSubmit={(e) => handleFormSubmit(e, 'income')}>
+          <label>Income Amount:</label>
+          <input type="number" name="income" value={formData.income} onChange={handleInputChange} placeholder="Enter income amount" required />
+          <button type="submit">Submit</button>
+        </form>
+      </Modal>
+
+      <Modal show={showModal.history} onClose={handleCloseModal}>
+        <h2>Transaction History</h2>
+        <table>
+          <thead>
+            <tr>              
+              <th>Date</th>
+              <th>Time</th> 
+              <th>Category</th>
+              <th>Memo</th>
+              <th>Amount</th>
+            </tr>
+          </thead>
+          <tbody>
+            {transactionHistory.map((transaction, index) => (
+              <tr key={index}>                
+                <td>{transaction.date}</td>
+                <td>{transaction.time}</td>
+                <td>{transaction.category}</td>
+                <td>{transaction.memo}</td>
+                <td>{transaction.amount}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Modal>
+
+      <Modal show={showModal.deleteAccount} onClose={handleCloseModal}>
+        <h2>Delete Account</h2>
+        <p>Are you sure you want to delete your account? This will erase all data associated with the account and is irreversible.</p>
+        <button onClick={handleDeleteAccount}>Yes, I'm sure</button>
+        <button onClick={handleCloseModal}>Go back</button>
+      </Modal>
+
+      <div className="footer">
+        <p>
+          <a href="#">Account Info</a> | <button onClick={handleTutorialClick}>Tutorial</button> | <a href="#">Privacy Policy</a> | <a href="#">Contact</a> | 
+          <a href="#">Disclaimer</a> | <a href="#">Downtime Information</a> | <button onClick={handleClearData}>Clear Data</button> | <button onClick={handleLogout}>Logout</button> | <button onClick={() => handleOpenModal('deleteAccount')}>Delete Account</button>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Homepage;
\ No newline at end of file
diff --git a/src/components/ActionButtons/ActionButtons.js b/src/components/ActionButtons/ActionButtons.js
index 933ae74..2c5a407 100644
--- a/src/components/ActionButtons/ActionButtons.js
+++ b/src/components/ActionButtons/ActionButtons.js
@@ -16,6 +16,9 @@ const ActionButtons = ({ onActionClick }) => {
       <div className="action-button" onClick={() => onActionClick('income')}>
         Change Income
       </div>
+      <div className="action-button" onClick={() => onActionClick('transactionHistory')}>
+        Transaction History
+      </div>
     </div>
   );
 };
diff --git a/src/components/BudgetDashboard/BudgetDashboard.css b/src/components/BudgetDashboard/BudgetDashboard.css
index db02190..8ddf177 100644
--- a/src/components/BudgetDashboard/BudgetDashboard.css
+++ b/src/components/BudgetDashboard/BudgetDashboard.css
@@ -58,25 +58,29 @@
     padding: 2rem;
   }
 
-  .back-button {
-    position: absolute;
-    top: -40px;
-    right: 0;
-    background-color: #66AA11;
-    color: white;
-    border: none;
-    padding: 8px 16px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: background-color 0.2s;
-  }
-  
-  .back-button:hover {
-    background-color: #558800;
-  }
-  
-  .pie-chart-container {
-    position: relative;
-    /* ... existing styles ... */
-  }  
\ No newline at end of file
+.dashboard-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.back-button {
+  background-color: #66AA11;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  font-size: 18px;
+  cursor: pointer;
+  margin-right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+  transform: translateY(-10px);
+}
+
+.back-button:hover {
+  background-color: #558800;
+}
diff --git a/src/components/BudgetDashboard/BudgetDashboard.js b/src/components/BudgetDashboard/BudgetDashboard.js
index f5cdde2..1cac78b 100644
--- a/src/components/BudgetDashboard/BudgetDashboard.js
+++ b/src/components/BudgetDashboard/BudgetDashboard.js
@@ -6,7 +6,6 @@ import {
   Tooltip,
   Legend
 } from 'chart.js';
-
 import './BudgetDashboard.css';
 
 ChartJS.register(
@@ -21,6 +20,31 @@ const BudgetDashboard = ({ catData, catLabels, income, transactions }) => {
   const totalCategoryAmount = catData.reduce((a, b) => a + b, 0);
   const remainingAmount = Math.max(0, income - totalCategoryAmount);
 
+  // Helper function to get transactions from last 30 days
+  const getRecentTransactions = (category) => {
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+    
+    return transactions.filter(t => {
+      const transactionDate = new Date(t.date);
+      return t.category === category && transactionDate >= thirtyDaysAgo;
+    });
+  };
+
+  // Calculate category-specific data
+  const getCategoryData = (category) => {
+    const categoryBudget = catData[catLabels.indexOf(category)];
+    const recentTransactions = getRecentTransactions(category);
+    const spentAmount = recentTransactions.reduce((sum, t) => sum + t.amount, 0);
+    const remainingAmount = Math.max(0, categoryBudget - spentAmount);
+
+    return {
+      budget: categoryBudget,
+      spent: spentAmount,
+      remaining: remainingAmount,
+      transactionCount: recentTransactions.length
+    };
+  };
 
   // Define bright colors for categories
   const categoryColors = [
@@ -36,50 +60,40 @@ const BudgetDashboard = ({ catData, catLabels, income, transactions }) => {
     '#45B7D1', // Sky blue
   ];
 
-  const getMainPieData = () => ({
+
+  const pieData = selectedCategory ? {
+    labels: ['Spent', 'Remaining'],
+    datasets: [{
+      data: [
+        getCategoryData(selectedCategory).spent,
+        getCategoryData(selectedCategory).remaining
+      ],
+      backgroundColor: [categoryColors[catLabels.indexOf(selectedCategory)], '#E0E0E0'],
+      hoverBackgroundColor: [
+        categoryColors[catLabels.indexOf(selectedCategory)].replace('FF', 'DD'),
+        '#CCCCCC'
+      ]
+    }]
+  } : {
     labels: [...catLabels, 'Remaining'],
     datasets: [{
       data: [...catData, remainingAmount],
       backgroundColor: [
         ...catLabels.map((_, index) => categoryColors[index % categoryColors.length]),
-        '#E0E0E0'  // Light gray for remaining amount
+
+        '#E0E0E0'
+
       ],
       hoverBackgroundColor: [
         ...catLabels.map((_, index) => {
           const color = categoryColors[index % categoryColors.length];
           return color.replace('FF', 'DD');
         }),
-        '#CCCCCC'  // Slightly darker gray for remaining amount hover
+        
+        '#CCCCCC'
       ],
-    }],
-  });
-
-  const getTransactionPieData = () => {
-    const categoryTransactions = transactions.filter(t => t.category === selectedCategory);
-    const categoryIndex = catLabels.indexOf(selectedCategory);
-    const categoryBudget = catData[categoryIndex];
-    const totalSpent = categoryTransactions.reduce((sum, t) => sum + t.amount, 0);
-    const remainingInCategory = Math.max(0, categoryBudget - totalSpent);
-
-    return {
-      labels: [...categoryTransactions.map(t => t.memo || 'No memo'), 'Remaining'],
-      datasets: [{
-        data: [...categoryTransactions.map(t => t.amount), remainingInCategory],
-        backgroundColor: [
-          ...categoryTransactions.map((_, index) => 
-            categoryColors[index % categoryColors.length]
-          ),
-          '#E0E0E0'  // Same light gray for remaining amount
-        ],
-        hoverBackgroundColor: [
-          ...categoryTransactions.map((_, index) => {
-            const color = categoryColors[index % categoryColors.length];
-            return color.replace('FF', 'DD');
-          }),
-          '#CCCCCC'  // Same hover gray as main chart
-        ],
-      }],
-    };
+    }]
+    
   };
 
   const mainOptions = {
@@ -89,9 +103,7 @@ const BudgetDashboard = ({ catData, catLabels, income, transactions }) => {
         labels: {
           color: 'white',
           padding: 20,
-          font: {
-            size: 14
-          }
+          font: { size: 14 }
         }
       },
       tooltip: {
@@ -104,61 +116,71 @@ const BudgetDashboard = ({ catData, catLabels, income, transactions }) => {
         }
       }
     },
-    maintainAspectRatio: true,
-    responsive: true,
     onClick: (event, elements) => {
-      if (elements.length > 0) {
+      if (elements.length > 0 && !selectedCategory) {
         const index = elements[0].index;
         if (index < catLabels.length) { // Don't select "Remaining" slice
           setSelectedCategory(catLabels[index]);
         }
       }
-    }
-  };
+    },
+    maintainAspectRatio: true,
+    responsive: true,
 
-  const transactionOptions = {
-    ...mainOptions,
-    onClick: undefined, // Remove click handler for transaction view
-    plugins: {
-      ...mainOptions.plugins,
-      tooltip: {
-        callbacks: {
-          label: function(context) {
-            const label = context.label || '';
-            const value = context.raw || 0;
-            if (label === 'Remaining') {
-              return `Remaining: $${value.toFixed(2)}`;
-            }
-            const date = transactions.find(t => t.memo === label)?.date;
-            return [
-              `${label}`,
-              `Amount: $${value.toFixed(2)}`,
-              date ? `Date: ${new Date(date).toLocaleDateString()}` : '',
-            ].filter(Boolean);
-          }
-        }
-      }
-    }
-  };
+    elements: {
+      arc: {
+        cursor: (ctx) => {
+          const index = ctx.dataIndex;
+          return (!selectedCategory && index < catLabels.length) ? 'pointer' : 'default';
 
   return (
     <div className="dashboard">
-      <h2>Budget Overview</h2>
+      <div className="dashboard-header">
+        {selectedCategory && (
+          <button 
+            className="back-button" 
+            onClick={() => setSelectedCategory(null)}
+          >
+            ←
+          </button>
+        )}
+        <h2>{selectedCategory ? `${selectedCategory} Overview` : 'Budget Overview'}</h2>
+      </div>
+
       <div className="budget-summary">
         <div className="summary-item">
           <label>Total Income:</label>
           <span>${income.toFixed(2)}</span>
         </div>
-        <div className="summary-item">
-          <label>Total Budgeted:</label>
-          <span>${totalCategoryAmount.toFixed(2)}</span>
-        </div>
-        <div className="summary-item">
-          <label>Remaining:</label>
-          <span>${remainingAmount.toFixed(2)}</span>
-        </div>
+        {selectedCategory ? (
+          <>
+            <div className="summary-item">
+              <label>Budget for {selectedCategory}:</label>
+              <span>${getCategoryData(selectedCategory).budget.toFixed(2)}</span>
+            </div>
+            <div className="summary-item">
+              <label>Remaining for {selectedCategory}:</label>
+              <span>${getCategoryData(selectedCategory).remaining.toFixed(2)}</span>
+            </div>
+            <div className="summary-item">
+              <label>Transactions (30 days):</label>
+              <span>{getCategoryData(selectedCategory).transactionCount}</span>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="summary-item">
+              <label>Total Budgeted:</label>
+              <span>${totalCategoryAmount.toFixed(2)}</span>
+            </div>
+            <div className="summary-item">
+              <label>Remaining:</label>
+              <span>${remainingAmount.toFixed(2)}</span>
+            </div>
+          </>
+        )}
       </div>
-      
+
       <div className="pie-chart-container">
         {selectedCategory && (
           <button 
diff --git a/src/components/Modals/LogTransactionModal.js b/src/components/Modals/LogTransactionModal.js
index 4b05d7f..1027281 100644
--- a/src/components/Modals/LogTransactionModal.js
+++ b/src/components/Modals/LogTransactionModal.js
@@ -2,15 +2,20 @@ import React from 'react';
 import Modal from './Modal';
 
 export const LogTransactionModal = ({ show, onClose, onSubmit, categories }) => {
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     const formData = new FormData(e.target);
-    onSubmit({
-      category: formData.get('category'),
-      memo: formData.get('memo'),
-      amount: parseFloat(formData.get('amount'))
-    }, 'log');
-    onClose();
+    try {
+      await onSubmit({
+        category: formData.get('category'),
+        memo: formData.get('memo'),
+        amount: parseFloat(formData.get('amount'))
+      }, 'log');
+      onClose();
+    } catch (error) {
+      console.error('Failed to log transaction:', error);
+      alert('Failed to update budget data');
+    }
   };
 
   return (
diff --git a/src/components/Modals/Modal.css b/src/components/Modals/Modal.css
index bca0f5b..eef1827 100644
--- a/src/components/Modals/Modal.css
+++ b/src/components/Modals/Modal.css
@@ -66,4 +66,46 @@
     
     .modal-form button:hover {
       background-color: #558800;
-    }
\ No newline at end of file
+    }
+
+/* Transaction History Table Styles */
+.transaction-table-container {
+  max-height: 400px;
+  overflow-y: auto;
+  margin-top: 1rem;
+}
+
+.transaction-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: #1a1d23;
+  color: white;
+}
+
+.transaction-table th,
+.transaction-table td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #444;
+}
+
+.transaction-table th {
+  background-color: #66AA11;
+  color: white;
+  position: sticky;
+  top: 0;
+}
+
+.transaction-table tr:nth-child(even) {
+  background-color: #282c34;
+}
+
+.transaction-table tr:hover {
+  background-color: #333842;
+}
+
+.no-transactions {
+  text-align: center;
+  padding: 20px;
+  color: #888;
+}
\ No newline at end of file
diff --git a/src/components/Modals/TransactionHistoryModal.js b/src/components/Modals/TransactionHistoryModal.js
new file mode 100644
index 0000000..1c5b632
--- /dev/null
+++ b/src/components/Modals/TransactionHistoryModal.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import Modal from './Modal';
+import './Modal.css';
+
+export const TransactionHistoryModal = ({ show, onClose, transactions }) => {
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h2>Transaction History</h2>
+      <div className="transaction-table-container">
+        {transactions && transactions.length > 0 ? (
+          <table className="transaction-table">
+            <thead>
+              <tr>
+                <th>Date</th>
+                <th>Time</th>
+                <th>Category</th>
+                <th>Memo</th>
+                <th>Amount</th>
+              </tr>
+            </thead>
+            <tbody>
+              {transactions.map((transaction, index) => (
+                <tr key={index}>
+                  <td>{transaction.date}</td>
+                  <td>{transaction.time}</td>
+                  <td>{transaction.category}</td>
+                  <td>{transaction.memo}</td>
+                  <td>${transaction.amount.toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <div className="no-transactions">No transactions to display</div>
+        )}
+      </div>
+    </Modal>
+  );
+};
\ No newline at end of file
diff --git a/src/components/Modals/index.js b/src/components/Modals/index.js
index d4b829a..5cbe298 100644
--- a/src/components/Modals/index.js
+++ b/src/components/Modals/index.js
@@ -3,11 +3,13 @@ import { NewCategoryModal } from './NewCategoryModal';
 import { IncomeModal } from './IncomeModal';
 import { DeleteAccountModal } from './DeleteAccountModal';
 import { UpdateCategoryModal } from './UpdateCategoryModal';
+import { TransactionHistoryModal } from './TransactionHistoryModal';
 
 export {
   LogTransactionModal,
   NewCategoryModal,
   IncomeModal,
   DeleteAccountModal,
-  UpdateCategoryModal
+  UpdateCategoryModal,
+  TransactionHistoryModal
 };
\ No newline at end of file
diff --git a/src/hooks/useBudgetData.js b/src/hooks/useBudgetData.js
index 645ebce..8db46fa 100644
--- a/src/hooks/useBudgetData.js
+++ b/src/hooks/useBudgetData.js
@@ -10,24 +10,39 @@ export const useBudgetData = (userId) => {
 
   const fetchData = async () => {
     if (userId) {
-      const userDocRef = doc(db, 'users', userId);
-      const userDoc = await getDoc(userDocRef);
-      if (userDoc.exists()) {
-        const userData = userDoc.data();
-        const budgetData = userData.budgetData || [];
-        const transactions = userData.transactions || [];
-        
-        // Set income
-        const incomeEntry = budgetData.find(entry => entry.category === 'Income');
-        setIncome(incomeEntry ? incomeEntry.amount : 0);
-
-        // Set categories and amounts
-        const categories = budgetData.filter(entry => entry.type === 'category');
-        setCatData(categories.map(entry => entry.amount));
-        setCatLabels(categories.map(entry => entry.category));
-
-        // Set transactions
-        setTransactions(transactions);
+      try {
+        const userDocRef = doc(db, 'users', userId);
+        const userDoc = await getDoc(userDocRef);
+
+        if (userDoc.exists()) {
+          const userData = userDoc.data();
+          const budgetData = userData.budgetData || [];
+
+          // Set income
+          const incomeEntry = budgetData.find(entry => entry.category === 'Income');
+          setIncome(incomeEntry ? incomeEntry.amount : 0);
+
+          // Set categories and amounts
+          const categories = budgetData
+            .filter(entry => entry.type === 'category')
+            .map(entry => entry.category);
+          const amounts = budgetData
+            .filter(entry => entry.type === 'category')
+            .map(entry => entry.amount);
+
+          setCatData(amounts);
+          setCatLabels(categories);
+
+          // Set transactions
+          const allTransactions = budgetData
+            .filter(entry => entry.type === 'category')
+            .flatMap(entry => entry.transactions || [])
+            .sort((a, b) => new Date(b.date + ' ' + b.time) - new Date(a.date + ' ' + a.time));
+          
+          setTransactions(allTransactions);
+        }
+      } catch (error) {
+        console.error('Error fetching budget data:', error);
       }
     }
   };
@@ -39,82 +54,78 @@ export const useBudgetData = (userId) => {
   const handleFormSubmit = async (formData, type) => {
     if (!userId) return;
 
-    const userDocRef = doc(db, 'users', userId);
-    const userDoc = await getDoc(userDocRef);
-    let budgetData = userDoc.exists() ? userDoc.data().budgetData || [] : [];
-    let transactions = userDoc.exists() ? userDoc.data().transactions || [] : [];
-
     try {
+      const userDocRef = doc(db, 'users', userId);
+      const userDoc = await getDoc(userDocRef);
+      const currentData = userDoc.exists() ? userDoc.data().budgetData || [] : [];
+      let updatedData;
+
       switch (type) {
-        case 'new':
-          // Add new category
-          budgetData.push({
+        case 'log':
+          const newTransaction = {
             category: formData.category,
-            amount: formData.amount,
-            type: 'category'
+            memo: formData.memo,
+            amount: parseFloat(formData.amount),
+            date: new Date().toLocaleDateString(),
+            time: new Date().toLocaleTimeString(),
+            type: 'transaction'
+          };
+
+          updatedData = currentData.map(entry => {
+            if (entry.category === formData.category && entry.type === 'category') {
+              return {
+                ...entry,
+                transactions: [newTransaction, ...(entry.transactions || [])]
+              };
+            }
+            return entry;
           });
+
+          await updateDoc(userDocRef, { budgetData: updatedData });
+          setTransactions(prevTransactions => [newTransaction, ...prevTransactions]);
           break;
 
-        case 'update':
-          // Update existing category
-          const categoryIndex = budgetData.findIndex(
-            item => item.category === formData.oldCategory
-          );
-          if (categoryIndex !== -1) {
-            budgetData[categoryIndex] = {
-              category: formData.newCategory || formData.oldCategory,
-              amount: formData.amount,
-              type: 'category'
-            };
-            // Update category name in transactions if it changed
-            if (formData.newCategory && formData.newCategory !== formData.oldCategory) {
-              transactions = transactions.map(t => ({
-                ...t,
-                category: t.category === formData.oldCategory ? formData.newCategory : t.category
-              }));
-            }
-          }
+        case 'new':
+          const newCategory = {
+            category: formData.name,
+            amount: formData.amount,
+            type: 'category',
+            transactions: []
+          };
+          updatedData = [...currentData, newCategory];
+          await updateDoc(userDocRef, { budgetData: updatedData });
+          await fetchData();
           break;
 
-        case 'income':
-          // Update income
-          const incomeIndex = budgetData.findIndex(
-            item => item.category === 'Income'
+        case 'update':
+          updatedData = currentData.map(entry =>
+            entry.category === formData.oldCategory
+              ? { ...entry, category: formData.name, amount: formData.amount }
+              : entry
           );
-          if (incomeIndex !== -1) {
-            budgetData[incomeIndex].amount = formData.amount;
-          } else {
-            budgetData.push({
-              category: 'Income',
-              amount: formData.amount,
-              type: 'income'
-            });
-          }
+          await updateDoc(userDocRef, { budgetData: updatedData });
+          await fetchData();
           break;
 
-        case 'log':
-          // Log a transaction without changing category amount
-          transactions.push({
-            category: formData.category,
+        case 'income':
+          const incomeEntry = {
+            category: 'Income',
             amount: formData.amount,
-            memo: formData.memo,
-            date: new Date().toISOString()
-          });
+            type: 'income'
+          };
+          updatedData = currentData.filter(entry => entry.category !== 'Income');
+          updatedData.push(incomeEntry);
+          await updateDoc(userDocRef, { budgetData: updatedData });
+          setIncome(formData.amount);
           break;
-      }
-
-      // Update Firestore
-      await updateDoc(userDocRef, { 
-        budgetData,
-        transactions 
-      });
 
-      // Refresh the local state
-      await fetchData();
+        default:
+          return;
+      }
 
     } catch (error) {
       console.error('Error updating budget data:', error);
-      alert('Failed to update budget data');
+      throw error;
     }
   };
 
@@ -123,10 +134,8 @@ export const useBudgetData = (userId) => {
       try {
         const userDocRef = doc(db, 'users', userId);
         await updateDoc(userDocRef, {
-          budgetData: [{ category: 'Income', amount: 0, type: 'income' }],
-          transactions: []
+          budgetData: [{ category: 'Income', amount: 0, type: 'income' }]
         });
-        // Reset local state
         setCatData([]);
         setCatLabels([]);
         setIncome(0);
diff --git a/src/pages/Homepage/Homepage.js b/src/pages/Homepage/Homepage.js
index d68f91a..5a188b5 100644
--- a/src/pages/Homepage/Homepage.js
+++ b/src/pages/Homepage/Homepage.js
@@ -1,4 +1,4 @@
-import React, { useState} from 'react';
+import React, { useState } from 'react';
 import Header from '../../components/Header';
 import BudgetDashboard from '../../components/BudgetDashboard';
 import ActionButtons from '../../components/ActionButtons';
@@ -9,8 +9,9 @@ import {
   UpdateCategoryModal, 
   NewCategoryModal, 
   IncomeModal, 
-  DeleteAccountModal 
- } from '../../components/Modals';
+  DeleteAccountModal,
+  TransactionHistoryModal
+} from '../../components/Modals';
 import { useAuth } from '../../hooks/useAuth';
 import { useBudgetData } from '../../hooks/useBudgetData';
 import { useTutorial } from '../../hooks/useTutorial';
@@ -19,19 +20,27 @@ import './Homepage.css';
 const Homepage = () => {
   const [activeModal, setActiveModal] = useState(null);
   const { user, handleLogout, handleDeleteAccount } = useAuth();
-  const { catData, catLabels, income, transactions, handleFormSubmit, handleClearData } = useBudgetData(user?.uid);
-  const {tutorial, currentStep, handleTutorialActions } = useTutorial(user?.uid);
+
+  const { 
+    catData, 
+    catLabels, 
+    income, 
+    transactions,
+    handleFormSubmit, 
+    handleClearData 
+  } = useBudgetData(user?.uid);
+  const { tutorial, currentStep, handleTutorialActions } = useTutorial(user?.uid);
 
   return (
     <div className="homepage-container">
-      {<Header />}
+      <Header />
 
       {tutorial && (
         <TutorialOverlay 
           currentStep={currentStep}
           onAction={handleTutorialActions}
         />
-      )} 
+      )}
       
       <div className="content">
         <BudgetDashboard 
@@ -43,41 +52,50 @@ const Homepage = () => {
         <ActionButtons onActionClick={setActiveModal} />
       </div>
 
-      {/* Modal components */}
       <LogTransactionModal 
         show={activeModal === 'log'}
         onClose={() => setActiveModal(null)}
         onSubmit={handleFormSubmit}
         categories={catLabels}
       />
+
       <UpdateCategoryModal 
         show={activeModal === 'update'}
         onClose={() => setActiveModal(null)}
         onSubmit={handleFormSubmit}
         categories={catLabels}
       />
+
       <NewCategoryModal 
         show={activeModal === 'new'}
         onClose={() => setActiveModal(null)}
         onSubmit={handleFormSubmit}
       />
+
       <IncomeModal 
         show={activeModal === 'income'}
         onClose={() => setActiveModal(null)}
         onSubmit={handleFormSubmit}
       />
+
       <DeleteAccountModal 
         show={activeModal === 'deleteAccount'}
         onClose={() => setActiveModal(null)}
         onConfirm={handleDeleteAccount}
       />
 
-      { <Footer 
+      <TransactionHistoryModal
+        show={activeModal === 'transactionHistory'}
+        onClose={() => setActiveModal(null)}
+        transactions={transactions}
+      />
+
+      <Footer 
         onTutorialClick={handleTutorialActions.start}
         onLogoutClick={handleLogout}
         onDeleteAccountClick={() => setActiveModal('deleteAccount')}
         onClearData={handleClearData}
-      /> }
+      />
     </div>
   );
 };