diff --git a/apps/frontend/next.config.ts b/apps/frontend/next.config.ts
index e9ffa30..45d300b 100644
--- a/apps/frontend/next.config.ts
+++ b/apps/frontend/next.config.ts
@@ -1,7 +1,30 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  async rewrites() {
+    return [
+      {
+        source: '/auth/:path*',
+        destination: 'http://localhost:3006/auth/:path*',
+      },
+      {
+        source: '/expenditures/:path*',
+        destination: 'http://localhost:3004/expenditures/:path*',
+      },
+      {
+        source: '/expenditures',
+        destination: 'http://localhost:3004/expenditures',
+      },
+      {
+        source: '/projects/:path*',
+        destination: 'http://localhost:3002/projects/:path*',
+      },
+      {
+        source: '/projects',
+        destination: 'http://localhost:3002/projects',
+      },
+    ];
+  },
 };
 
 export default nextConfig;
diff --git a/apps/frontend/src/app/components/AddExpenseModal.tsx b/apps/frontend/src/app/components/AddExpenseModal.tsx
new file mode 100644
index 0000000..efb9fb9
--- /dev/null
+++ b/apps/frontend/src/app/components/AddExpenseModal.tsx
@@ -0,0 +1,297 @@
+'use client';
+
+import { useState } from 'react';
+import { Button, Dialog, Portal, CloseButton, Stack } from '@chakra-ui/react';
+import DropdownSelector from './DropdownSelector';
+import { apiFetch } from '@/lib/api';
+
+interface Project {
+  project_id: number;
+  name: string;
+}
+
+interface AddExpenseModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  token: string;
+  categories: string[];
+  projects: Project[];
+}
+
+export default function AddExpenseModal({
+  open,
+  onClose,
+  onSuccess,
+  token,
+  categories,
+  projects,
+}: AddExpenseModalProps) {
+  const [newDate, setNewDate] = useState('');
+  const [newType, setNewType] = useState('');
+  const [newDescription, setNewDescription] = useState('');
+  const [newAmount, setNewAmount] = useState('');
+  const [newProject, setNewProject] = useState('');
+
+  const [dateError, setDateError] = useState(false);
+  const [typeError, setTypeError] = useState(false);
+  const [descError, setDescError] = useState(false);
+  const [amountError, setAmountError] = useState(false);
+  const [projectError, setProjectError] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  function resetForm() {
+    setNewDate('');
+    setNewType('');
+    setNewDescription('');
+    setNewAmount('');
+    setNewProject('');
+    setDateError(false);
+    setTypeError(false);
+    setDescError(false);
+    setAmountError(false);
+    setProjectError(false);
+    setSubmitError(null);
+  }
+
+  function handleClose() {
+    resetForm();
+    onClose();
+  }
+
+  async function handleSubmit() {
+    const hasDateError = !newDate.trim();
+    const hasTypeError = !newType.trim();
+    const hasDescError = !newDescription.trim();
+    const hasAmountError = !newAmount.trim() || isNaN(Number(newAmount)) || Number(newAmount) < 0;
+    const hasProjectError = !newProject.trim();
+
+    setDateError(hasDateError);
+    setTypeError(hasTypeError);
+    setDescError(hasDescError);
+    setAmountError(hasAmountError);
+    setProjectError(hasProjectError);
+
+    if (hasDateError || hasTypeError || hasDescError || hasAmountError || hasProjectError) return;
+
+    const selectedProject = projects.find((p) => p.name === newProject);
+    if (!selectedProject) {
+      setProjectError(true);
+      return;
+    }
+
+    try {
+      await apiFetch('/expenditures', {
+        method: 'POST',
+        token,
+        body: JSON.stringify({
+          projectID: selectedProject.project_id,
+          amount: Number(newAmount),
+          category: newType,
+          description: newDescription,
+          spentOn: newDate,
+        }),
+      });
+
+      resetForm();
+      onSuccess();
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : 'Failed to create expense');
+    }
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={(e) => { if (!e.open) handleClose(); }}>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header display="flex" justifyContent="space-between" alignItems="center">
+              <Dialog.Title
+                fontFamily="var(--font-heading)"
+                fontSize="var(--font-size-heading-3)"
+                fontWeight={600}
+              >
+                Add New Expense
+              </Dialog.Title>
+              <CloseButton onClick={handleClose} />
+            </Dialog.Header>
+            <Dialog.Body>
+              <Stack gap={4}>
+                {/* Date */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                  <label style={{ fontSize: '14px', fontWeight: 500 }}>Date*</label>
+                  <input
+                    type="date"
+                    value={newDate}
+                    onChange={(e) => {
+                      setNewDate(e.target.value);
+                      setDateError(false);
+                    }}
+                    style={{
+                      border: `1px solid ${dateError ? 'var(--color-error-red)' : '#CBD5E0'}`,
+                      borderRadius: '6px',
+                      padding: '8px 12px',
+                      fontSize: '14px',
+                      outline: 'none',
+                      width: '100%',
+                      fontFamily: 'inherit',
+                      color: newDate ? 'inherit' : '#A0AEC0',
+                    }}
+                  />
+                  {dateError && (
+                    <span style={{ color: 'var(--color-error-red)', fontSize: '12px' }}>
+                      Select a date
+                    </span>
+                  )}
+                </div>
+
+                {/* Type of Expense */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                  <label style={{ fontSize: '14px', fontWeight: 500 }}>Type of Expense*</label>
+                  <DropdownSelector
+                    options={categories}
+                    placeholder="Select a type of expense"
+                    multiSelect={false}
+                    value={newType}
+                    onChange={(val) => {
+                      setNewType(val as string);
+                      setTypeError(false);
+                    }}
+                  />
+                  {typeError && (
+                    <span style={{ color: 'var(--color-error-red)', fontSize: '12px' }}>
+                      Select a type of expense
+                    </span>
+                  )}
+                </div>
+
+                {/* Description */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                  <label style={{ fontSize: '14px', fontWeight: 500 }}>Description*</label>
+                  <textarea
+                    value={newDescription}
+                    onChange={(e) => {
+                      setNewDescription(e.target.value);
+                      setDescError(false);
+                    }}
+                    placeholder="Placeholder"
+                    rows={4}
+                    style={{
+                      border: `1px solid ${descError ? 'var(--color-error-red)' : '#CBD5E0'}`,
+                      borderRadius: '6px',
+                      padding: '8px 12px',
+                      fontSize: '14px',
+                      outline: 'none',
+                      width: '100%',
+                      fontFamily: 'inherit',
+                      resize: 'vertical',
+                    }}
+                  />
+                  {descError && (
+                    <span style={{ color: 'var(--color-error-red)', fontSize: '12px' }}>
+                      Enter a description
+                    </span>
+                  )}
+                </div>
+
+                {/* Amount */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                  <label style={{ fontSize: '14px', fontWeight: 500 }}>Amount*</label>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      border: `1px solid ${amountError ? 'var(--color-error-red)' : '#CBD5E0'}`,
+                      borderRadius: '6px',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    <span
+                      style={{
+                        padding: '8px 12px',
+                        backgroundColor: '#f7fafc',
+                        borderRight: '1px solid #CBD5E0',
+                        fontSize: '14px',
+                        color: '#718096',
+                      }}
+                    >
+                      $
+                    </span>
+                    <input
+                      type="number"
+                      min="0"
+                      step="0.01"
+                      value={newAmount}
+                      onChange={(e) => {
+                        setNewAmount(e.target.value);
+                        setAmountError(false);
+                      }}
+                      placeholder="Enter the Amount"
+                      style={{
+                        border: 'none',
+                        padding: '8px 12px',
+                        fontSize: '14px',
+                        outline: 'none',
+                        width: '100%',
+                        fontFamily: 'inherit',
+                      }}
+                    />
+                  </div>
+                  {amountError && (
+                    <span style={{ color: 'var(--color-error-red)', fontSize: '12px' }}>
+                      Enter a valid amount
+                    </span>
+                  )}
+                </div>
+
+                {/* Project */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                  <label style={{ fontSize: '14px', fontWeight: 500 }}>Project*</label>
+                  <DropdownSelector
+                    options={projects.map((p) => p.name)}
+                    placeholder="Select a project"
+                    multiSelect={false}
+                    value={newProject}
+                    onChange={(val) => {
+                      setNewProject(val as string);
+                      setProjectError(false);
+                    }}
+                  />
+                  {projectError && (
+                    <span style={{ color: 'var(--color-error-red)', fontSize: '12px' }}>
+                      Select a project
+                    </span>
+                  )}
+                </div>
+
+                {/* Submit error */}
+                {submitError && (
+                  <p style={{ color: 'var(--color-error-red)', fontSize: '14px' }}>
+                    {submitError}
+                  </p>
+                )}
+              </Stack>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Button
+                variant="outline"
+                borderColor="var(--color-core-green)"
+                onClick={handleClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                backgroundColor="var(--color-core-green)"
+                color="var(--color-core-white)"
+                onClick={handleSubmit}
+              >
+                Add Expense
+              </Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/apps/frontend/src/app/components/DropdownSelector.tsx b/apps/frontend/src/app/components/DropdownSelector.tsx
index 5963739..fb3142a 100644
--- a/apps/frontend/src/app/components/DropdownSelector.tsx
+++ b/apps/frontend/src/app/components/DropdownSelector.tsx
@@ -9,6 +9,7 @@ interface DropdownSelectorProps {
   multiSelect?: boolean;
   value?: string | string[];
   onChange?: (value: string | string[]) => void;
+  hideTrigger?: boolean;
 }
 
 export default function DropdownSelector({
@@ -17,6 +18,7 @@ export default function DropdownSelector({
   multiSelect = false,
   value,
   onChange,
+  hideTrigger = false,
 }: DropdownSelectorProps) {
   const collection = useMemo(
     () => createListCollection({ items: options.map((o) => ({ label: o, value: o })) }),
@@ -32,28 +34,55 @@ export default function DropdownSelector({
   }
 
   return (
-    <div className="w-[235px] font-body text-body">
+    <div className="min-w-[235px] font-body text-body">
       <Select.Root
         collection={collection}
         multiple={multiSelect}
         value={controlledValue}
         onValueChange={handleValueChange}
+        open={hideTrigger ? true : undefined}
+        closeOnSelect={!multiSelect && !hideTrigger}
       >
-        <Select.Trigger className="flex !w-full items-center justify-between !rounded !border !border-black-200 !bg-core-white !px-3 !py-2 !h-10 cursor-pointer !shadow-none !text-black-700 !font-body !text-body">
-          <Select.ValueText placeholder={placeholder} className="truncate" />
-          <Select.Indicator className="ml-2 shrink-0 transition-transform data-[state=open]:rotate-180">
-            <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-              <path
-                fillRule="evenodd"
-                d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </Select.Indicator>
+        <Select.Trigger
+          style={
+            hideTrigger
+              ? {
+                  height: 0,
+                  minHeight: 0,
+                  width: 0,
+                  padding: 0,
+                  margin: 0,
+                  border: 0,
+                  overflow: 'hidden',
+                  visibility: 'hidden',
+                  position: 'absolute',
+                }
+              : undefined
+          }
+          className={
+            hideTrigger
+              ? ''
+              : 'flex !w-full items-center justify-between !rounded !border !border-black-200 !bg-core-white !px-3 !py-2 !h-10 cursor-pointer !shadow-none !text-black-700 !font-body !text-body'
+          }
+        >
+          {!hideTrigger && (
+            <>
+              <Select.ValueText placeholder={placeholder} className="truncate" />
+              <Select.Indicator className="ml-2 shrink-0 transition-transform data-[state=open]:rotate-180">
+                <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                  <path
+                    fillRule="evenodd"
+                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </Select.Indicator>
+            </>
+          )}
         </Select.Trigger>
 
         <Portal>
-          <Select.Positioner style={{ width: '235px' }}>
+          <Select.Positioner style={{ width: '235px', left:"3px" }}>
             <Select.Content className="!rounded !border !border-black-200 !bg-core-white !shadow-none !p-0 !mt-0.5 !font-body !text-body">
               {collection.items.map((item) =>
                 multiSelect ? (
diff --git a/apps/frontend/src/app/components/Pagination.tsx b/apps/frontend/src/app/components/Pagination.tsx
new file mode 100644
index 0000000..7b5b8a3
--- /dev/null
+++ b/apps/frontend/src/app/components/Pagination.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { HStack, Button } from '@chakra-ui/react';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+function getPageNumbers(currentPage: number, totalPages: number) {
+  if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1);
+  if (currentPage <= 3) return [1, 2, 3, '...', totalPages];
+  if (currentPage >= totalPages - 2)
+    return [1, '...', totalPages - 2, totalPages - 1, totalPages];
+  return [1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages];
+}
+
+export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  return (
+    <div style={{ marginTop: 'auto' }}>
+      <HStack width="100%" justify="center" paddingTop="3%" paddingBottom="3%" gap="6">
+        <FaAngleLeft
+          onClick={() => onPageChange(Math.max(currentPage - 1, 1))}
+          style={{
+            cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+            opacity: currentPage === 1 ? 0.3 : 1,
+            color: 'var(--color-core-green)',
+          }}
+        />
+        {getPageNumbers(currentPage, totalPages).map((page, index) =>
+          page === '...' ? (
+            <Button
+              key={`ellipsis-${index}`}
+              backgroundColor="var(--color-core-white)"
+              color="var(--color-core-green)"
+              border="1px solid"
+              borderColor="var(--color-core-green)"
+              cursor="default"
+            >
+              ...
+            </Button>
+          ) : (
+            <Button
+              key={page}
+              onClick={() => onPageChange(page as number)}
+              backgroundColor={
+                currentPage === page ? 'var(--color-core-green)' : 'var(--color-core-white)'
+              }
+              color={
+                currentPage === page ? 'var(--color-core-white)' : 'var(--color-core-green)'
+              }
+              border="1px solid"
+              borderColor="var(--color-core-green)"
+            >
+              {page}
+            </Button>
+          ),
+        )}
+        <FaAngleRight
+          onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}
+          style={{
+            cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+            opacity: currentPage === totalPages ? 0.3 : 1,
+            color: 'var(--color-core-green)',
+          }}
+        />
+      </HStack>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/expenses/page.tsx b/apps/frontend/src/app/expenses/page.tsx
new file mode 100644
index 0000000..97b6dff
--- /dev/null
+++ b/apps/frontend/src/app/expenses/page.tsx
@@ -0,0 +1,396 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import NavBar from '../components/Navbar';
+import Header from '../components/Header';
+import Pagination from '../components/Pagination';
+import AddExpenseModal from '../components/AddExpenseModal';
+import {
+  HStack,
+  Input,
+  Button,
+  Table,
+} from '@chakra-ui/react';
+import DropdownSelector from '../components/DropdownSelector';
+import { apiFetch } from '@/lib/api';
+import { CiFilter } from 'react-icons/ci';
+import { LuArrowDownUp } from 'react-icons/lu';
+import { FaPlus } from 'react-icons/fa';
+
+type Expenditure = {
+  expenditure_id: number;
+  project_id: number;
+  entered_by: number | null;
+  amount: string;
+  category: string | null;
+  description: string | null;
+  spent_on: string;
+  created_at: string | null;
+};
+
+type Project = {
+  project_id: number;
+  name: string;
+};
+
+const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+
+const SORT_OPTIONS = ['Amount', 'Date'];
+const ROWS_PER_PAGE = 10;
+
+export default function ExpensePage() {
+  // Data
+  const [expenditures, setExpenditures] = useState<Expenditure[]>([]);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Search & Filters
+  const [query, setQuery] = useState('');
+  const [selectedMonths, setSelectedMonths] = useState<string[]>([]);
+  const [selectedTypes, setSelectedTypes] = useState<string[]>([]);
+  const [selectedProjects, setSelectedProjects] = useState<string[]>([]);
+  const [sortOption, setSortOption] = useState<string>('');
+
+  // Dropdown visibility
+  const [showMonthFilter, setShowMonthFilter] = useState(false);
+  const [showTypeFilter, setShowTypeFilter] = useState(false);
+  const [showProjectFilter, setShowProjectFilter] = useState(false);
+  const [showSortBy, setShowSortBy] = useState(false);
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Modal
+  const [showNewExpense, setShowNewExpense] = useState(false);
+
+  const token = typeof window !== 'undefined' ? localStorage.getItem('branch_access_token') ?? '' : '';
+
+  // Fetch expenditures
+  async function fetchExpenditures() {
+    try {
+      const json = await apiFetch<{ data: Expenditure[] }>('/expenditures', { token });
+      setExpenditures(json.data ?? []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load expenditures');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Fetch projects
+  async function fetchProjects() {
+    try {
+      const json = await apiFetch<Project[]>('/projects', { token });
+      setProjects(Array.isArray(json) ? json : []);
+    } catch {
+      // Projects fetch failure is non-critical
+    }
+  }
+
+  useEffect(() => {
+    fetchExpenditures();
+    fetchProjects();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Derived: unique categories
+  const uniqueCategories = [
+    ...new Set(expenditures.map((e) => e.category).filter(Boolean)),
+  ] as string[];
+
+  // Filtered + sorted data
+  const filteredData = expenditures
+    .filter((e) => {
+      if (query) {
+        const q = query.toLowerCase();
+        const matchesId = e.expenditure_id.toString().includes(q);
+        const matchesDesc = (e.description ?? '').toLowerCase().includes(q);
+        const matchesCat = (e.category ?? '').toLowerCase().includes(q);
+        if (!matchesId && !matchesDesc && !matchesCat) return false;
+      }
+      if (selectedMonths.length > 0) {
+        const month = new Date(e.spent_on).getMonth();
+        if (!selectedMonths.includes(MONTHS[month])) return false;
+      }
+      if (selectedTypes.length > 0) {
+        if (!e.category || !selectedTypes.includes(e.category)) return false;
+      }
+      if (selectedProjects.length > 0) {
+        const projectName = projects.find((p) => p.project_id === e.project_id)?.name;
+        if (!projectName || !selectedProjects.includes(projectName)) return false;
+      }
+      return true;
+    })
+    .sort((a, b) => {
+      if (sortOption === 'Amount') {
+        return parseFloat(b.amount) - parseFloat(a.amount);
+      }
+      if (sortOption === 'Date') {
+        return new Date(b.spent_on).getTime() - new Date(a.spent_on).getTime();
+      }
+      // Default: newest first
+      return new Date(b.spent_on).getTime() - new Date(a.spent_on).getTime();
+    });
+
+  // Pagination
+  const totalPages = Math.max(1, Math.ceil(filteredData.length / ROWS_PER_PAGE));
+  const paginatedData = filteredData.slice(
+    (currentPage - 1) * ROWS_PER_PAGE,
+    currentPage * ROWS_PER_PAGE,
+  );
+
+  // Reset page when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [query, selectedMonths, selectedTypes, selectedProjects, sortOption]);
+
+  // Modal success handler
+  async function handleExpenseAdded() {
+    setShowNewExpense(false);
+    setLoading(true);
+    setError(null);
+    await fetchExpenditures();
+  }
+
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh' }}>
+      <NavBar role="admin" />
+      <main style={{ flex: 1, backgroundColor: '#f9fafb' }}>
+        <Header />
+        <div style={{ margin: '2%', display: 'flex', flexDirection: 'column', minHeight: '85vh' }}>
+          <h1
+            style={{
+              fontWeight: 600,
+              fontFamily: 'var(--font-heading)',
+              fontSize: 'var(--font-size-heading-1)',
+            }}
+          >
+            Expenses
+          </h1>
+
+          {/* Toolbar */}
+          <HStack width="100%" justify="space-between" paddingTop="32px" paddingBottom="32px">
+            <HStack width="30%">
+              <Input
+                placeholder="Search ..."
+                variant="outline"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+              />
+            </HStack>
+            <HStack>
+              {/* Project Filter */}
+              <div style={{ position: 'relative' }}>
+                <Button
+                  backgroundColor="var(--color-core-white)"
+                  color="var(--color-core-black)"
+                  border="1px solid"
+                  borderColor="var(--color-black-500)"
+                  onClick={() => {
+                    setShowProjectFilter((prev) => !prev);
+                    setShowMonthFilter(false);
+                    setShowTypeFilter(false);
+                    setShowSortBy(false);
+                  }}
+                >
+                  <CiFilter />
+                  Project
+                </Button>
+                {showProjectFilter && (
+                  <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10 }}>
+                    <DropdownSelector
+                      options={projects.map((p) => p.name)}
+                      multiSelect={true}
+                      hideTrigger={true}
+                      value={selectedProjects}
+                      onChange={(val) => setSelectedProjects(Array.isArray(val) ? val : [val])}
+                    />
+                  </div>
+                )}
+              </div>
+
+              {/* Month Filter */}
+              <div style={{ position: 'relative' }}>
+                <Button
+                  backgroundColor="var(--color-core-white)"
+                  color="var(--color-core-black)"
+                  border="1px solid"
+                  borderColor="var(--color-black-500)"
+                  onClick={() => {
+                    setShowMonthFilter((prev) => !prev);
+                    setShowProjectFilter(false);
+                    setShowTypeFilter(false);
+                    setShowSortBy(false);
+                  }}
+                >
+                  <CiFilter />
+                  Month
+                </Button>
+                {showMonthFilter && (
+                  <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10 }}>
+                    <DropdownSelector
+                      options={MONTHS}
+                      multiSelect={true}
+                      hideTrigger={true}
+                      value={selectedMonths}
+                      onChange={(val) => setSelectedMonths(Array.isArray(val) ? val : [val])}
+                    />
+                  </div>
+                )}
+              </div>
+
+              {/* Type Filter */}
+              <div style={{ position: 'relative' }}>
+                <Button
+                  backgroundColor="var(--color-core-white)"
+                  color="var(--color-core-black)"
+                  border="1px solid"
+                  borderColor="var(--color-black-500)"
+                  onClick={() => {
+                    setShowTypeFilter((prev) => !prev);
+                    setShowProjectFilter(false);
+                    setShowMonthFilter(false);
+                    setShowSortBy(false);
+                  }}
+                >
+                  <CiFilter />
+                  Type
+                </Button>
+                {showTypeFilter && (
+                  <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10 }}>
+                    <DropdownSelector
+                      options={uniqueCategories}
+                      multiSelect={true}
+                      hideTrigger={true}
+                      value={selectedTypes}
+                      onChange={(val) => setSelectedTypes(Array.isArray(val) ? val : [val])}
+                    />
+                  </div>
+                )}
+              </div>
+
+              {/* Sort By */}
+              <div style={{ position: 'relative' }}>
+                <Button
+                  backgroundColor="var(--color-core-white)"
+                  color="var(--color-core-black)"
+                  border="1px solid"
+                  borderColor="var(--color-black-500)"
+                  onClick={() => {
+                    setShowSortBy((prev) => !prev);
+                    setShowProjectFilter(false);
+                    setShowMonthFilter(false);
+                    setShowTypeFilter(false);
+                  }}
+                >
+                  <LuArrowDownUp />
+                  Sort By
+                </Button>
+                {showSortBy && (
+                  <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10 }}>
+                    <DropdownSelector
+                      options={SORT_OPTIONS}
+                      multiSelect={false}
+                      hideTrigger={true}
+                      value={sortOption}
+                      onChange={(val) => setSortOption(val as string)}
+                    />
+                  </div>
+                )}
+              </div>
+
+              {/* + New Expense */}
+              <Button
+                backgroundColor="var(--color-core-green)"
+                color="var(--color-core-white)"
+                onClick={() => setShowNewExpense(true)}
+              >
+                <FaPlus />
+                New Expense
+              </Button>
+            </HStack>
+          </HStack>
+
+          {/* Loading / Error */}
+          {loading && <p>Loading expenditures...</p>}
+          {error && <p style={{ color: 'var(--color-error-red)' }}>{error}</p>}
+
+          {/* Table */}
+          {!loading && !error && (
+            <Table.Root>
+              <Table.ColumnGroup>
+                <Table.Column width="12%" />
+                <Table.Column width="15%" />
+                <Table.Column width="40%" />
+                <Table.Column width="17%" />
+                <Table.Column width="16%" />
+              </Table.ColumnGroup>
+              <Table.Header>
+                <Table.Row backgroundColor="var(--color-primary-800)">
+                  <Table.ColumnHeader color="var(--color-core-white)"><h5>Expense ID</h5></Table.ColumnHeader>
+                  <Table.ColumnHeader color="var(--color-core-white)"><h5>Date</h5></Table.ColumnHeader>
+                  <Table.ColumnHeader color="var(--color-core-white)"><h5>Description</h5></Table.ColumnHeader>
+                  <Table.ColumnHeader color="var(--color-core-white)"><h5>Type of Expense</h5></Table.ColumnHeader>
+                  <Table.ColumnHeader color="var(--color-core-white)"><h5>Amount</h5></Table.ColumnHeader>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {paginatedData.length === 0 ? (
+                  <Table.Row>
+                    <Table.Cell colSpan={5} style={{ textAlign: 'center', padding: '2rem' }}>
+                      No expenditures found.
+                    </Table.Cell>
+                  </Table.Row>
+                ) : (
+                  paginatedData.map((e) => (
+                    <Table.Row key={e.expenditure_id}>
+                      <Table.Cell>#{String(e.expenditure_id).padStart(6, '0')}</Table.Cell>
+                      <Table.Cell>
+                        {new Date(e.spent_on).toLocaleDateString('en-US', {
+                          month: '2-digit',
+                          day: '2-digit',
+                          year: 'numeric',
+                        })}
+                      </Table.Cell>
+                      <Table.Cell>{e.description ?? '—'}</Table.Cell>
+                      <Table.Cell>{e.category ?? '—'}</Table.Cell>
+                      <Table.Cell>
+                        ${parseFloat(e.amount).toLocaleString('en-US', {
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2,
+                        })}
+                      </Table.Cell>
+                    </Table.Row>
+                  ))
+                )}
+              </Table.Body>
+            </Table.Root>
+          )}
+
+          {/* Pagination */}
+          {!loading && !error && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+            />
+          )}
+        </div>
+
+
+        {/* Add New Expense Modal */}
+        <AddExpenseModal
+          open={showNewExpense}
+          onClose={() => setShowNewExpense(false)}
+          onSuccess={handleExpenseAdded}
+          token={token}
+          categories={uniqueCategories}
+          projects={projects}
+        />
+      </main>
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/globals.css b/apps/frontend/src/app/globals.css
index 3487c60..9b3116a 100644
--- a/apps/frontend/src/app/globals.css
+++ b/apps/frontend/src/app/globals.css
@@ -49,7 +49,6 @@
     --font-size-callout: 14px;
 }
 
-@layer base {
   h1 {
     font-family: var(--font-heading);
     font-size: var(--font-size-heading-1);
@@ -92,5 +91,4 @@
     font-family: var(--font-body);
     font-size: var(--font-size-callout);
     font-weight: 400;
-  }
-}
\ No newline at end of file
+  }
\ No newline at end of file