diff --git a/frontend/src/components/BarChartGrouped/index.tsx b/frontend/src/components/BarChartGrouped/index.tsx
index d3828147..95e63d5d 100644
--- a/frontend/src/components/BarChartGrouped/index.tsx
+++ b/frontend/src/components/BarChartGrouped/index.tsx
@@ -14,8 +14,8 @@ const BarChartGrouped = () => {
   const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth);
   const [chartData, setChartData] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [orgUnitCode, setOrgUnitCode] = useState<string>('');
-  const [statusCode, setStatusCode] = useState<string>('');
+  const [orgUnitCode, setOrgUnitCode] = useState<string | null>(null);
+  const [statusCode, setStatusCode] = useState<string | null>(null);
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
 
diff --git a/frontend/src/components/OpeningMetricsTab/index.tsx b/frontend/src/components/OpeningMetricsTab/index.tsx
index f2dadc0c..1cd3c815 100644
--- a/frontend/src/components/OpeningMetricsTab/index.tsx
+++ b/frontend/src/components/OpeningMetricsTab/index.tsx
@@ -1,58 +1,45 @@
-import React, {useState} from "react";
-import { useSelector } from "react-redux";
-import FavouriteCard from "../FavouriteCard";
-import PageTitle from "../PageTitle";
+import React from "react";
 import './styles.scss'
 import BarChartGrouped from "../BarChartGrouped";
 import ChartContainer from "../ChartContainer";
 import DonutChartView from "../DonutChartView";
 import OpeningHistory from "../OpeningHistory";
 import OpeningHistoryItems from "../../mock-data/OpeningHistoryItems";
-import ActionsTable from "../ActionsTable";
 import MyRecentActions from "../MyRecentActions";
 
-
-const OpeningMetricsTab: React.FC = () => {
-  const [showSpatial, setShowSpatial] = useState<boolean>(false);
-
-  const toggleSpatial = () => {
-    setShowSpatial(!showSpatial)
-  }
-
-  return (
-    <>
-      <div className="container-fluid p-3">
-        <div className="row gy-3">
-          <div className="col-xxl-6">
-            <ChartContainer
-              title="Openings per years"
-              description="Check openings and submissions per year"
-            >
-              <BarChartGrouped/>
-            </ChartContainer>
-          </div>
-          <div className="col-xxl-6">
-            <ChartContainer title="Track Openings" description="Follow your favouirite openings">
-              <OpeningHistory 
-                histories={OpeningHistoryItems}
-              />
-            </ChartContainer>
-          </div>
-          <div className="col-xxl-6">
-            <ChartContainer title="Free grow milestone declarations" description="Check opening standards unit for inspections purposes">
-              <DonutChartView/>
-            </ChartContainer>
-          </div>
-          <div className="col-xxl-6">
-            <ChartContainer title="My recent actions" description="Check your recent requests and files">
-              <MyRecentActions/>
-            </ChartContainer>
-          </div>
-          
+const OpeningMetricsTab: React.FC = () => (
+  <>
+    <div className="container-fluid p-3">
+      <div className="row gy-3">
+        <div className="col-xxl-6">
+          <ChartContainer
+            title="Openings per years"
+            description="Check openings and submissions per year"
+          >
+            <BarChartGrouped />
+          </ChartContainer>
+        </div>
+        <div className="col-xxl-6">
+          <ChartContainer title="Track Openings" description="Follow your favouirite openings">
+            <OpeningHistory 
+              histories={OpeningHistoryItems}
+            />
+          </ChartContainer>
+        </div>
+        <div className="col-xxl-6">
+          <ChartContainer title="Free grow milestone declarations" description="Check opening standards unit for inspections purposes">
+            <DonutChartView/>
+          </ChartContainer>
+        </div>
+        <div className="col-xxl-6">
+          <ChartContainer title="My recent actions" description="Check your recent requests and files">
+            <MyRecentActions/>
+          </ChartContainer>
         </div>
+        
       </div>
-    </>
-  );
-};
+    </div>
+  </>
+);
 
 export default OpeningMetricsTab;
diff --git a/frontend/src/components/OpeningScreenDataTable/index.tsx b/frontend/src/components/OpeningScreenDataTable/index.tsx
index 7db4555f..283117f0 100644
--- a/frontend/src/components/OpeningScreenDataTable/index.tsx
+++ b/frontend/src/components/OpeningScreenDataTable/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import {
   DataTable,
   TableBatchAction,
@@ -46,9 +46,6 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
     setInitialItemsPerPage
   } = useContext(PaginationContext);
 
-  setPageData(filteredRows);
-  setInitialItemsPerPage(5);
-
   const handleSearchChange = (searchTerm: string) => {
     const filtered = rows.filter((item) =>
       Object.values(item)
@@ -65,7 +62,6 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
 
   const selectRowEvent = useCallback((openingId: string, selected: boolean) => {
     if (!selected) {
-      console.log(`Selected row id=${openingId} selected=${JSON.stringify(!selected)}`);
       setOpeningId(openingId);
     }
   }, []);
@@ -75,8 +71,13 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
     // Add your logic to handle batch actions here
   };
 
+  useEffect(() => {
+    setPageData(filteredRows);
+    setInitialItemsPerPage(5);
+  }, [filteredRows]);
+
   return (
-    <div>
+    <>
       <DataTable rows={getCurrentData()} headers={headers}>
       {({
         rows,
@@ -167,15 +168,15 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
                 <TableRow>
                   <th id='blank'></th>
                   {headers.map((header, i) => (
-                    <TableHeader key={i} {...getHeaderProps({ header })}>
-                      {header.header}
+                    <TableHeader key={header.key}>
+                      { header.header }
                     </TableHeader>
                   ))}
                 </TableRow>
               </TableHead>
               <TableBody>
                 {rows.map((row, i) => (
-                  <TableRow key={i} {...getRowProps({ row })}>
+                  <TableRow key={row.id}>
                     <TableSelectRow {
                       ...getSelectionProps({
                         row,
@@ -223,32 +224,32 @@ const OpeningScreenDataTable: React.FC<IOpeningScreenDataTable> = ({ rows, heade
 
     {/* Check if there are no elements in the table, if not then print the Empty */}
     {filteredRows.length <= 0 ? (
-        <EmptySection
-          pictogram="Magnify"
-          title={'There are no openings to show yet'}
-          description={
-            'Your recent openings will appear here once you generate one'
-          }
-          fill="#0073E6"
-        />
-      ) : null}
+      <EmptySection
+        pictogram="Magnify"
+        title={'There are no openings to show yet'}
+        description={
+          'Your recent openings will appear here once you generate one'
+        }
+        fill="#0073E6"
+      />
+    ) : null}
 
-      {/* Check if there are no elements in the table, if not then print the Empty */}
-      {filteredRows.length > 0 ? (
-          <Pagination
-          totalItems={filteredRows.length}
-          backwardText="Previous page"
-          forwardText="Next page"
-          pageSize={itemsPerPage}
-          pageSizes={[5, 20, 50]}
-          itemsPerPageText="Items per page"
-          onChange={({ page, pageSize }:{ page: number, pageSize: number}) => {
-            handlePageChange( page );
-            handleItemsPerPageChange(page, pageSize);
-          }}
-        />
-        ) : null}
-    </div>
+    {/* Check if there are no elements in the table, if not then print the Empty */}
+    {filteredRows.length > 0 ? (
+      <Pagination
+        totalItems={filteredRows.length}
+        backwardText="Previous page"
+        forwardText="Next page"
+        pageSize={itemsPerPage}
+        pageSizes={[5, 20, 50]}
+        itemsPerPageText="Items per page"
+        onChange={({ page, pageSize }:{ page: number, pageSize: number}) => {
+          handlePageChange( page );
+          handleItemsPerPageChange(page, pageSize);
+        }}
+      />
+      ) : null}
+    </>
   );
 }
 
diff --git a/frontend/src/components/OpeningsTab/index.tsx b/frontend/src/components/OpeningsTab/index.tsx
index 1928940e..613f7500 100644
--- a/frontend/src/components/OpeningsTab/index.tsx
+++ b/frontend/src/components/OpeningsTab/index.tsx
@@ -44,59 +44,54 @@ const OpeningsTab: React.FC<Props> = ({showSpatial, setShowSpatial}) => {
   }, [loadId, openingPolygonNotFound]);
 
   const toggleSpatial = () => {
-    setShowSpatial((prevShowSpatial :boolean) => {
-      console.log(`prevShowSpatial=${prevShowSpatial}`);
-      return !prevShowSpatial
-    });
+    setShowSpatial((prevShowSpatial :boolean) => !prevShowSpatial);
   }
 
   return (
     <>
-      <div>
-        <div className="container-fluid">
-          <div className="row px-0 py-4 p-sm-4">
-            <SectionTitle title="Recent openings" subtitle="Track the history of openings you have looked at and check spatial information by selecting the openings in the table below" />
-            <Button
-              className="h-100 my-auto d-none d-sm-block"
-              renderIcon={ViewFilled}
-              type="button"
-              onClick={() => toggleSpatial()}
-            >
-              {showSpatial ? 'Hide Spatial' : 'Show Spatial'}
-            </Button>
-          </div>
-          {showSpatial ? (
-            <div className="row px-2">
-              <div className="leaflet-container">
-                <OpeningsMap
-                  openingId={loadId}
-                  setOpeningPolygonNotFound={setOpeningPolygonNotFound}
-                />
-              </div>
-            </div>
-          ) : null}
+      <div className="container-fluid">
+        <div className="row px-0 py-4 p-sm-4">
+          <SectionTitle title="Recent openings" subtitle="Track the history of openings you have looked at and check spatial information by selecting the openings in the table below" />
+          <Button
+            className="h-100 my-auto d-none d-sm-block"
+            renderIcon={ViewFilled}
+            type="button"
+            onClick={() => toggleSpatial()}
+          >
+            {showSpatial ? 'Hide Spatial' : 'Show Spatial'}
+          </Button>
         </div>
+        {showSpatial ? (
+          <div className="row px-2">
+            <div className="leaflet-container">
+              <OpeningsMap
+                openingId={loadId}
+                setOpeningPolygonNotFound={setOpeningPolygonNotFound}
+              />
+            </div>
+          </div>
+        ) : null}
+      </div>
 
-        <div className="container-fluid p-0 pb-5">
-          {openingPolygonNotFound? (
-            <InlineNotification
-              title="Opening ID not found!"
-              subtitle="Unable to find selected Opening Polygon!"
-              kind="error"
-              lowContrast
-              className = "inline-notification"
-            />
-          ) : null }
-          {loading ? (
-            <TableSkeleton headers={headers} />
-          ) : (
-            <OpeningScreenDataTable
-              headers={headers}
-              rows={openingRows}
-              setOpeningId={setLoadId}
-            />
-          )}
-        </div>
+      <div className="container-fluid p-0 pb-5">
+        {openingPolygonNotFound? (
+          <InlineNotification
+            title="Opening ID not found!"
+            subtitle="Unable to find selected Opening Polygon!"
+            kind="error"
+            lowContrast
+            className = "inline-notification"
+          />
+        ) : null }
+        {loading ? (
+          <TableSkeleton headers={headers} />
+        ) : (
+          <OpeningScreenDataTable
+            headers={headers}
+            rows={openingRows}
+            setOpeningId={setLoadId}
+          />
+        )}
       </div>
     </>
   );
diff --git a/frontend/src/services/OpeningService.ts b/frontend/src/services/OpeningService.ts
index 4e1a3352..51d44f1e 100644
--- a/frontend/src/services/OpeningService.ts
+++ b/frontend/src/services/OpeningService.ts
@@ -58,8 +58,8 @@ export async function fetchRecentOpenings() {
 }
 
 interface IOpeningPerYear {
-  orgUnitCode: string;
-  statusCode: string;
+  orgUnitCode: string | null;
+  statusCode: string | null;
   entryDateStart: string | null;
   entryDateEnd: string | null;
 }