diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 127024c7d..2e6c33946 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -32,7 +32,7 @@ import { AddEditOtherUses } from './views/OtherUses/AddEditOtherUses'
 import { AddEditFinalSupplyEquipments } from './views/FinalSupplyEquipments/AddEditFinalSupplyEquipments'
 import { AddEditFuelSupplies } from './views/FuelSupplies/AddEditFuelSupplies'
 import { AddEditFuelExports } from './views/FuelExports/AddEditFuelExports'
-import { AddEditAllocationAgreements } from './views/AllocationAgreements/AddAllocationAgreements'
+import { AddEditAllocationAgreements } from './views/AllocationAgreements/AddEditAllocationAgreements'
 import { logout } from '@/utils/keycloak.js'
 import { CompareReports } from '@/views/CompareReports/CompareReports'
 
diff --git a/frontend/src/views/AllocationAgreements/AddAllocationAgreements.jsx b/frontend/src/views/AllocationAgreements/AddEditAllocationAgreements.jsx
similarity index 94%
rename from frontend/src/views/AllocationAgreements/AddAllocationAgreements.jsx
rename to frontend/src/views/AllocationAgreements/AddEditAllocationAgreements.jsx
index dd37955ad..66cf71927 100644
--- a/frontend/src/views/AllocationAgreements/AddAllocationAgreements.jsx
+++ b/frontend/src/views/AllocationAgreements/AddEditAllocationAgreements.jsx
@@ -71,7 +71,21 @@ export const AddEditAllocationAgreements = () => {
   const onGridReady = useCallback(
     async (params) => {
       setGridApi(params.api)
-      setRowData([...(data.allocationAgreements || { id: uuid() })])
+
+      if (
+        Array.isArray(data.allocationAgreements) &&
+        data.allocationAgreements.length > 0
+      ) {
+        const updatedRowData = data.allocationAgreements.map((item) => ({
+          ...item,
+          id: item.id || uuid() // Ensure every item has a unique ID
+        }))
+        setRowData(updatedRowData)
+      } else {
+        // If allocationAgreements is not available or empty, initialize with a single row
+        setRowData([{ id: uuid() }])
+      }
+
       params.api.sizeColumnsToFit()
     },
     [data]
diff --git a/frontend/src/views/AllocationAgreements/__tests__/AddEditAllocationAgreements.test.jsx b/frontend/src/views/AllocationAgreements/__tests__/AddEditAllocationAgreements.test.jsx
new file mode 100644
index 000000000..ce7d72113
--- /dev/null
+++ b/frontend/src/views/AllocationAgreements/__tests__/AddEditAllocationAgreements.test.jsx
@@ -0,0 +1,133 @@
+// src/views/AllocationAgreements/__tests__/AddEditAllocationAgreements.test.jsx
+
+import React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { AddEditAllocationAgreements } from '../AddEditAllocationAgreements'
+import * as useAllocationAgreementHook from '@/hooks/useAllocationAgreement'
+import { wrapper } from '@/tests/utils/wrapper'
+
+// Mock react-router-dom hooks
+const mockUseLocation = vi.fn()
+const mockUseNavigate = vi.fn()
+const mockUseParams = vi.fn()
+
+vi.mock('react-router-dom', () => ({
+  ...vi.importActual('react-router-dom'),
+  useLocation: () => mockUseLocation(),
+  useNavigate: () => mockUseNavigate(),
+  useParams: () => mockUseParams()
+}))
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key) => key
+  })
+}))
+
+// Mock hooks related to allocation agreements
+vi.mock('@/hooks/useAllocationAgreement')
+
+// Mock BCGridEditor component
+vi.mock('@/components/BCDataGrid/BCGridEditor', () => ({
+  BCGridEditor: ({
+    gridRef,
+    alertRef,
+    onGridReady,
+    rowData,
+    onCellValueChanged,
+    onCellEditingStopped
+  }) => (
+    <div data-test="bc-grid-editor">
+      <div data-test="row-data">
+        {rowData.map((row, index) => (
+          <div key={index} data-test="grid-row">
+            {row.id}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}))
+
+describe('AddEditAllocationAgreements', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+
+    // Mock react-router-dom hooks with complete location object
+    mockUseLocation.mockReturnValue({
+      pathname: '/test-path', // Include pathname to prevent undefined errors
+      state: {}
+    })
+    mockUseNavigate.mockReturnValue(vi.fn())
+    mockUseParams.mockReturnValue({
+      complianceReportId: 'testReportId',
+      compliancePeriod: '2024'
+    })
+
+    // Mock useGetAllocationAgreements hook to return empty data initially
+    vi.mocked(
+      useAllocationAgreementHook.useGetAllocationAgreements
+    ).mockReturnValue({
+      data: { allocationAgreements: [] },
+      isLoading: false
+    })
+
+    // Mock useAllocationAgreementOptions hook
+    vi.mocked(
+      useAllocationAgreementHook.useAllocationAgreementOptions
+    ).mockReturnValue({
+      data: { fuelTypes: [] },
+      isLoading: false,
+      isFetched: true
+    })
+
+    // Mock useSaveAllocationAgreement hook
+    vi.mocked(
+      useAllocationAgreementHook.useSaveAllocationAgreement
+    ).mockReturnValue({
+      mutateAsync: vi.fn()
+    })
+  })
+
+  it('renders the component', () => {
+    render(<AddEditAllocationAgreements />, { wrapper })
+    expect(
+      screen.getByText('allocationAgreement:addAllocationAgreementRowsTitle')
+    ).toBeInTheDocument()
+  })
+
+  it('initializes with at least one row in the empty state', () => {
+    render(<AddEditAllocationAgreements />, { wrapper })
+    const rows = screen.getAllByTestId('grid-row')
+    expect(rows.length).toBe(1) // Ensure at least one row exists
+  })
+
+  it('loads data when allocationAgreements are available', async () => {
+    // Update the mock to return allocation agreements
+    vi.mocked(
+      useAllocationAgreementHook.useGetAllocationAgreements
+    ).mockReturnValue({
+      data: {
+        allocationAgreements: [
+          { allocationAgreementId: 'testId1' },
+          { allocationAgreementId: 'testId2' }
+        ]
+      },
+      isLoading: false
+    })
+
+    render(<AddEditAllocationAgreements />, { wrapper })
+
+    // Use findAllByTestId for asynchronous elements
+    const rows = await screen.findAllByTestId('grid-row')
+    expect(rows.length).toBe(2)
+    // Check that each row's textContent matches UUID format
+    const uuidRegex =
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
+    rows.forEach((row) => {
+      expect(uuidRegex.test(row.textContent)).toBe(true)
+    })
+  })
+})