diff --git a/src/components/blocks/APIPagination.js b/src/components/blocks/APIPagination.js
index 786e17ca..6ecce771 100644
--- a/src/components/blocks/APIPagination.js
+++ b/src/components/blocks/APIPagination.js
@@ -62,7 +62,7 @@ export const PagesContainer = styled(ControlsContainer)`
                     color: ${props.theme.colors.default.secondaryDark};`;
     } else {
       return `border: 1px solid ${props.theme.colors.default.shade5};
-                    color: ${props.theme.colors.default.secondary};`;
+                    color: #586065;`;
     }
   }};
 
@@ -72,8 +72,8 @@ export const PagesContainer = styled(ControlsContainer)`
         return `border: 1px solid ${props.theme.colors.default.secondaryDark};
                     color: ${props.theme.colors.default.secondaryDark};`;
       } else {
-        return `border: 1px solid ${props.theme.colors.default.secondaryDark};
-                    color: ${props.theme.colors.default.secondaryDark};`;
+        return `border: 1px solid ${props.theme.colors.default.shade5};
+                    color: ${props.theme.colors.default.shade5};`;
       }
     }};
   }
@@ -139,7 +139,7 @@ const APIPagination = withTheme(({ showLast = false, actions }) => {
           !backButtonIsDisabled && changeCurrentPageTo(currentPageNumber - 1)
         }
       >
-        <ArrowDownIcon height={12} width={12} />
+        <ArrowDownIcon height={12} width={12} color="#586065" />
       </ControlsContainer>
       {displayedPages &&
         displayedPages.map(element => (
@@ -153,14 +153,16 @@ const APIPagination = withTheme(({ showLast = false, actions }) => {
             {element}
           </PagesContainer>
         ))}
-      {showLast && currentPageNumber + 3 < numberOfPages && numberOfPages > 5 && (
-        <>
-          <ThreeDotsIcon width={10} height={10} />
-          <PagesContainer onClick={() => changeCurrentPageTo(numberOfPages)}>
-            {numberOfPages}
-          </PagesContainer>
-        </>
-      )}
+      {showLast &&
+        currentPageNumber + 3 < numberOfPages &&
+        numberOfPages > 5 && (
+          <>
+            <ThreeDotsIcon width={10} height={10} />
+            <PagesContainer onClick={() => changeCurrentPageTo(numberOfPages)}>
+              {numberOfPages}
+            </PagesContainer>
+          </>
+        )}
       <ControlsContainer
         isDisabled={nextButtonIsDisabled}
         isNextButton
@@ -168,7 +170,7 @@ const APIPagination = withTheme(({ showLast = false, actions }) => {
           !nextButtonIsDisabled && changeCurrentPageTo(currentPageNumber + 1)
         }
       >
-        <ArrowDownIcon height={12} width={12} />
+        <ArrowDownIcon height={12} width={12} color="#586065" />
       </ControlsContainer>
     </PaginationContainer>
   );
diff --git a/src/components/blocks/Pagination.js b/src/components/blocks/Pagination.js
index 04f93ac9..92c37095 100644
--- a/src/components/blocks/Pagination.js
+++ b/src/components/blocks/Pagination.js
@@ -59,7 +59,7 @@ const PagesContainer = styled(ControlsContainer)`
                     color: ${props.theme.colors.default.secondaryDark};`;
     } else {
       return `border: 1px solid ${props.theme.colors.default.shade5};
-                    color: ${props.theme.colors.default.secondary};`;
+                    color: #586065;`;
     }
   }};
 
@@ -69,8 +69,8 @@ const PagesContainer = styled(ControlsContainer)`
         return `border: 1px solid ${props.theme.colors.default.secondaryDark};
                     color: ${props.theme.colors.default.secondaryDark};`;
       } else {
-        return `border: 1px solid ${props.theme.colors.default.secondaryDark};
-                    color: ${props.theme.colors.default.secondaryDark};`;
+        return `border: 1px solid ${props.theme.colors.default.shade5};
+                    color: ${props.theme.colors.default.shade5};`;
       }
     }};
   }
@@ -112,7 +112,7 @@ const Pagination = withTheme(
             !backButtonIsDisabled && changeCurrentPageTo(currentPageNumber - 1)
           }
         >
-          <ArrowDownIcon height={12} width={12} />
+          <ArrowDownIcon height={12} width={12} color="#586065" />
         </ControlsContainer>
         {displayedPages &&
           displayedPages.map(element => (
@@ -130,7 +130,7 @@ const Pagination = withTheme(
           currentPageNumber + 2 + 1 < numberOfPages &&
           numberOfPages > 5 && (
             <>
-              <ThreeDotsIcon width={10} height={10} />
+              <ThreeDotsIcon width={10} height={10} color="#586065" />
               <PagesContainer
                 onClick={() => changeCurrentPageTo(numberOfPages)}
               >
@@ -145,7 +145,7 @@ const Pagination = withTheme(
             !nextButtonIsDisabled && changeCurrentPageTo(currentPageNumber + 1)
           }
         >
-          <ArrowDownIcon height={12} width={12} />
+          <ArrowDownIcon height={12} width={12} color="#586065" />
         </ControlsContainer>
       </PaginationContainer>
     );
diff --git a/src/components/icons/ArrowDownIcon.js b/src/components/icons/ArrowDownIcon.js
index ed46ec92..fad66368 100644
--- a/src/components/icons/ArrowDownIcon.js
+++ b/src/components/icons/ArrowDownIcon.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import { withTheme } from 'styled-components';
 
-const ArrowDownIcon = withTheme(({ width, height }) => {
+const ArrowDownIcon = withTheme(({ width, height, color = 'black' }) => {
   return (
     <svg
       width={`${width}px`}
       height={`${height}px`}
       viewBox="0 0 18 12"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M17.7188 0.00012207H15.961C15.8415 0.00012207 15.729 0.058716 15.6586 0.15481L9.00005 9.33294L2.34146 0.15481C2.27115 0.058716 2.15865 0.00012207 2.03912 0.00012207H0.281303C0.128959 0.00012207 0.0398965 0.17356 0.128959 0.297779L8.39302 11.6907C8.69302 12.1032 9.30708 12.1032 9.60474 11.6907L17.8688 0.297779C17.9602 0.17356 17.8711 0.00012207 17.7188 0.00012207Z"
-        fill="currentColor"
+        fill={color}
       />
     </svg>
   );
diff --git a/src/components/icons/ThreeDotsIcon.js b/src/components/icons/ThreeDotsIcon.js
index 3fe6e2bc..9d19dbc0 100644
--- a/src/components/icons/ThreeDotsIcon.js
+++ b/src/components/icons/ThreeDotsIcon.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import { withTheme } from 'styled-components';
 
-const ThreeDotsIcon = withTheme(({ width, height }) => {
+const ThreeDotsIcon = withTheme(({ width, height, color = 'black' }) => {
   return (
     <svg
       width={`${width}px`}
       height={`${height}px`}
       viewBox="0 0 16 4"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M0.125 1.97656C0.125 2.14892 0.158949 2.3196 0.224908 2.47884C0.290867 2.63807 0.387546 2.78276 0.509422 2.90464C0.631299 3.02652 0.775988 3.12319 0.935228 3.18915C1.09447 3.25511 1.26514 3.28906 1.4375 3.28906C1.60986 3.28906 1.78053 3.25511 1.93977 3.18915C2.09901 3.12319 2.2437 3.02652 2.36558 2.90464C2.48745 2.78276 2.58413 2.63807 2.65009 2.47884C2.71605 2.3196 2.75 2.14892 2.75 1.97656C2.75 1.8042 2.71605 1.63353 2.65009 1.47429C2.58413 1.31505 2.48745 1.17036 2.36558 1.04848C2.2437 0.926608 2.09901 0.82993 1.93977 0.763971C1.78053 0.698012 1.60986 0.664063 1.4375 0.664063C1.26514 0.664063 1.09447 0.698012 0.935228 0.763971C0.775988 0.82993 0.631299 0.926608 0.509422 1.04848C0.387546 1.17036 0.290867 1.31505 0.224908 1.47429C0.158949 1.63353 0.125 1.8042 0.125 1.97656ZM6.6875 1.97656C6.6875 2.32466 6.82578 2.6585 7.07192 2.90464C7.31806 3.15078 7.6519 3.28906 8 3.28906C8.3481 3.28906 8.68194 3.15078 8.92808 2.90464C9.17422 2.6585 9.3125 2.32466 9.3125 1.97656C9.3125 1.62847 9.17422 1.29463 8.92808 1.04848C8.68194 0.802343 8.3481 0.664062 8 0.664063C7.6519 0.664062 7.31806 0.802343 7.07192 1.04848C6.82578 1.29463 6.6875 1.62847 6.6875 1.97656ZM13.25 1.97656C13.25 2.32466 13.3883 2.6585 13.6344 2.90464C13.8806 3.15078 14.2144 3.28906 14.5625 3.28906C14.9106 3.28906 15.2444 3.15078 15.4906 2.90464C15.7367 2.6585 15.875 2.32466 15.875 1.97656C15.875 1.62847 15.7367 1.29463 15.4906 1.04848C15.2444 0.802343 14.9106 0.664062 14.5625 0.664063C14.2144 0.664062 13.8806 0.802343 13.6344 1.04848C13.3883 1.29463 13.25 1.62847 13.25 1.97656Z"
-        fill="currentColor"
+        fill={color}
       />
     </svg>
   );
diff --git a/src/pages/Audit/index.js b/src/pages/Audit/index.js
index 14c89aa9..52b14f46 100644
--- a/src/pages/Audit/index.js
+++ b/src/pages/Audit/index.js
@@ -118,6 +118,7 @@ const Audit = () => {
         limit: constants.MAX_AUDIT_TABLE_SIZE,
         useMockedResponse: false,
         order: newSortOrder,
+        storeFullResponse: true,
       }),
     );
   }, [auditSortOrder, setAuditSortOrder, selectedOrgUid]);
@@ -133,6 +134,7 @@ const Audit = () => {
           limit: constants.MAX_AUDIT_TABLE_SIZE,
           useMockedResponse: false,
           order: auditSortOrder,
+          storeFullResponse: true,
         }),
       );
     },
@@ -195,6 +197,7 @@ const Audit = () => {
                       limit: constants.MAX_AUDIT_TABLE_SIZE,
                       useMockedResponse: false,
                       order: auditSortOrder,
+                      storeFullResponse: true,
                     }),
                   )
                 }
diff --git a/src/store/actions/climateWarehouseActions.js b/src/store/actions/climateWarehouseActions.js
index ea8e60d6..2e7311fd 100644
--- a/src/store/actions/climateWarehouseActions.js
+++ b/src/store/actions/climateWarehouseActions.js
@@ -65,11 +65,15 @@ export const actions = keyMirror(
   'GET_TRANSFER_OFFER',
 );
 
+/*
+ * the option storeFullResponse means that we are storing the entire response instead of just the data object
+ * this is needed because there is currently an inconsistency in how the responses are managed that needs to be fixed.
+ */
 const getClimateWarehouseTable = (
   url,
   action,
   mockAction,
-  { useMockedResponse = false, useApiMock = false },
+  { useMockedResponse = false, useApiMock = false, storeFullResponse = false },
 ) => {
   return async dispatch => {
     dispatch(activateProgressIndicator);
@@ -91,7 +95,8 @@ const getClimateWarehouseTable = (
           if (
             typeof results === 'object' &&
             results !== null &&
-            'data' in results
+            'data' in results &&
+            storeFullResponse === false
           ) {
             dispatch({
               type: action,
@@ -2379,6 +2384,7 @@ export const getRatings = options => {
 
 export const getAudit = options => {
   return dispatch => {
+    console.log({ options });
     if (options?.orgUid && options?.limit && options?.page) {
       dispatch(
         getClimateWarehouseTable(