diff --git a/apps/web/app/(auth)/signup/(components)/SignupFullForm.tsx b/apps/web/app/(auth)/signup/(components)/SignupFullForm.tsx
index 9db76a1b..b84259d4 100644
--- a/apps/web/app/(auth)/signup/(components)/SignupFullForm.tsx
+++ b/apps/web/app/(auth)/signup/(components)/SignupFullForm.tsx
@@ -2,7 +2,7 @@
 
 import { InputElement, SelectElement } from '@/components/forms';
 import { Button } from '@/components/globalComponents';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { 
   greaterThan8, validateEmail, validateLowercase, validateName, 
   validateNumber, validatePhoneNumber, validateSymbol, validateUppercase 
@@ -39,7 +39,7 @@ const SignupFullForm = () => {
   const [companyTypes, setCompanyTypes] = useState<any>(null);
 
 
-  const fetchSettings = async () => {
+  const fetchSettings = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getAgreements(),
@@ -48,9 +48,9 @@ const SignupFullForm = () => {
       noToast: true
     })
     setAgreements(result?.data);
-  }
+  }, []);
 
-  const fetchTypes = async () => {
+  const fetchTypes = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCompanyTypes(),
@@ -59,9 +59,9 @@ const SignupFullForm = () => {
       noToast: true
     })
     setCompanyTypes(result?.data);
-  }
+  }, []);
 
-  const fetchRequiredFields = async () => {
+  const fetchRequiredFields = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCompanyRequiredFields({
@@ -72,16 +72,16 @@ const SignupFullForm = () => {
       noToast: true
     })
     setRequiredFields(result?.data);
-  }
+  }, [userType]);
 
   useEffect(() => {
     fetchTypes();
-  }, []);
+  }, [fetchTypes]);
 
   useEffect(() => {
     fetchSettings();
     userType && fetchRequiredFields();
-  }, [userType]);
+  }, [fetchRequiredFields, fetchSettings, userType]);
 
   const upperAndLowerCase = validateUppercase(password) && validateLowercase(password);
   const number = validateNumber(password);
diff --git a/apps/web/app/(webapp)/(components)/AppLeftSideBar.tsx b/apps/web/app/(webapp)/(components)/AppLeftSideBar.tsx
index 4bb374cd..abea2ba4 100644
--- a/apps/web/app/(webapp)/(components)/AppLeftSideBar.tsx
+++ b/apps/web/app/(webapp)/(components)/AppLeftSideBar.tsx
@@ -3,62 +3,27 @@
 import { LEFT_SIDE_BAR_BOTTOM_DATA, LEFT_SIDE_BAR_TOP_DATA } from '@/data/leftSideBarData'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { motion } from 'framer-motion'
-import clientAxiosRequest from '@/hooks/clientAxiosRequest'
-import * as API from '@/config/endpoints';
 import { findPermissionSlug } from '@/utils/findPermissionSlug'
 import { truncateString } from '@/utils/truncateString'
+import { useUserStore } from '@/stores'
 
 const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
   const pathname = usePathname();
-  const [profile, setProfile] = useState<any>();
-  const [businessDetails, setBusinessDetails] = useState<any>(null);
-  let userPermissions = profile?.user?.role?.permissions
-
-  async function fetchProfile() {
-    const result: any = await clientAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getProfile(),
-      method: 'GET',
-      data: null,
-      noToast: true
-    });
-
-    setProfile(result?.data);
-    // setJsCookies('aperta-user-profile', JSON.stringify({
-    //   name: `${result?.data?.firstName} ${result?.data?.lastName}`,
-    //   companyRole: result?.data?.companyRole?.toLowerCase()?.replace(/_/g, ' '),
-    //   userType: result?.data?.user?.role?.parent?.slug
-    // }))
-  }
-
-  const fetchDetails = async () => {
-    const result : any = await clientAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getCompanyDetails(),
-      method: 'GET',
-      data: null,
-      noToast: true
-    });
-
-    setBusinessDetails(result?.data);
-  }
-
-  useEffect(() => {
-    fetchProfile();
-    fetchDetails();
-  }, []);
+  
+  // Get data from Zustand store instead of fetching
+  const profile = useUserStore((state) => state.profile);
+  const companyDetails = useUserStore((state) => state.companyDetails);
+  const getAvatarAlt = useUserStore((state) => state.getAvatarAlt);
+  
+  const userPermissions = profile?.user?.role?.permissions;
+  const firstName = profile?.firstName;
+  const avatarAlt = getAvatarAlt();
 
   const isActive = (path: string): boolean => {
     return pathname?.includes(path);
-  }
-
-  let firstName = profile?.firstName;
-  let lastName = profile?.lastName;
-  let avatarAlt = (firstName || lastName) ? 
-    `${firstName ? firstName[0] : ''}${lastName ? lastName[0] : ''}` :
-    businessDetails?.name ? businessDetails?.name[0] : '';
+  };
 
   return (
     <aside className={`fixed w-[280px] z-[100] left-0 bottom-0 ${bannerExist ? 'h-[calc(100vh-56px)]' : 'h-screen'} border-r border-o-border bg-white flex flex-col gap-[24px] py-[24px]`}>
@@ -74,8 +39,8 @@ const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
               {
                 firstName ? 
                   truncateString(`${firstName}`, 22) : 
-                  businessDetails?.name ? 
-                    truncateString(businessDetails?.name, 22) :
+                  companyDetails?.name ? 
+                    truncateString(companyDetails?.name, 22) :
                     ''
               }
             </h3>
@@ -108,7 +73,7 @@ const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
         <div className='w-full h-fit flex flex-col gap-[20px]'>
           {
             LEFT_SIDE_BAR_TOP_DATA?.map((data: any) => (
-              findPermissionSlug(userPermissions, data?.permit) &&
+              findPermissionSlug(userPermissions || [], data?.permit) &&
               (
                 data?.access == profile?.user?.role?.parent?.slug ||
                 data?.access == 'all'
@@ -124,7 +89,7 @@ const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
                 <div className='w-full flex flex-col gap-[4px]'>
                   {
                     data?.links?.map((link: any) => (
-                      findPermissionSlug(userPermissions, link?.permit) &&
+                      findPermissionSlug(userPermissions || [], link?.permit) &&
                       (
                         link?.access == profile?.user?.role?.parent?.slug ||
                         link?.access == 'all'
@@ -164,7 +129,7 @@ const AppLeftSideBar = ({ bannerExist }: { bannerExist: boolean }) => {
           <div className='w-full flex flex-col pt-[24px] border-t border-o-border'>
             {
               LEFT_SIDE_BAR_BOTTOM_DATA?.map((link) => (
-                findPermissionSlug(userPermissions, link?.permit) &&
+                findPermissionSlug(userPermissions || [], link?.permit) &&
                 <div
                   key={link?.id}
                   className='w-full relative h-fit'
diff --git a/apps/web/app/(webapp)/(components)/AppNavBar.tsx b/apps/web/app/(webapp)/(components)/AppNavBar.tsx
index a275ba4f..74e312eb 100644
--- a/apps/web/app/(webapp)/(components)/AppNavBar.tsx
+++ b/apps/web/app/(webapp)/(components)/AppNavBar.tsx
@@ -9,8 +9,7 @@ import { Button } from '../../../components/globalComponents';
 import { AppCenterModal, AvatarMenu } from '.';
 import { toast } from 'react-toastify';
 import { getJsCookies, removeJsCookies, setJsCookies } from '@/config/jsCookie';
-import clientAxiosRequest from '@/hooks/clientAxiosRequest';
-import * as API from '@/config/endpoints';
+import { useUserStore } from '@/stores';
 
 const AppNavBar = ({ 
   bannerExist,
@@ -19,6 +18,10 @@ const AppNavBar = ({
   bannerExist: boolean;
   canToggleMode: boolean;
 }) => {
+  // Get data from Zustand store instead of fetching
+  const profile = useUserStore((state) => state.profile);
+  const companyDetails = useUserStore((state) => state.companyDetails);
+  const getAvatarAlt = useUserStore((state) => state.getAvatarAlt);
 
   const [openModal, setOpenModal] = useState(false);
   const [isLive, setToggleMode] = useState(false);
@@ -29,10 +32,6 @@ const AppNavBar = ({
   const router = useRouter();
   const { get } = useSearchParams();
   const slug = get('slug');
-  const [businessDetails, setBusinessDetails] = useState<any>(null);
-  const [profile, setProfile] = useState<any>(null);
-  // const getUserProfile = getJsCookies('aperta-user-profile');
-  // const userProfile = getUserProfile ? JSON.parse(getUserProfile) : null;
 
   useEffect(() => {
     const enviromentMode = canToggleMode ? getJsCookies('environment') : 'development';
@@ -40,40 +39,10 @@ const AppNavBar = ({
     setToggleMode(enviromentMode == 'production' ? true : false);
   }, [canToggleMode]);
 
-  const fetchProfile = async() => {
-    const result: any = await clientAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getProfile(),
-      method: 'GET',
-      data: null,
-      noToast: true
-    });
-
-    setProfile(result?.data);
-  }
-
-  const fetchDetails = async () => {
-    const result : any = await clientAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getCompanyDetails(),
-      method: 'GET',
-      data: null,
-      noToast: true
-    });
-
-    setBusinessDetails(result?.data);
-  }
-
-  useEffect(() => {
-    fetchProfile();
-    fetchDetails();
-  }, []);
-
-  let firstName = profile?.firstName;
-  let lastName = profile?.lastName;
-  let avatarAlt = (firstName || lastName) ? 
-    `${firstName ? firstName[0] : ''}${lastName ? lastName[0] : ''}` :
-    businessDetails?.name ? businessDetails?.name[0] : '';
+  // Get computed values from store
+  const firstName = profile?.firstName;
+  const lastName = profile?.lastName;
+  const avatarAlt = getAvatarAlt();
 
   // const unReadNotifications = NOTIFICATIONS_DATA;
   // const notifications = NOTIFICATIONS_DATA?.slice(0, 5);
diff --git a/apps/web/app/(webapp)/(components)/DatePicker.tsx b/apps/web/app/(webapp)/(components)/DatePicker.tsx
index 384918db..3e806644 100644
--- a/apps/web/app/(webapp)/(components)/DatePicker.tsx
+++ b/apps/web/app/(webapp)/(components)/DatePicker.tsx
@@ -3,7 +3,7 @@
 import { updateSearchParams } from '@/utils/searchParams';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react'
-import moment from 'moment';
+import { formatDateLabel, formatDateRangeLabel } from '@/utils/dateUtils'
 import Datepicker, { DateType, DateValueType } from 'react-tailwindcss-datepicker';
 import { DatePickerProps } from '@/types/webappTypes/componentsTypes';
 
@@ -96,11 +96,11 @@ const DatePicker = ({
               (changeValue && start_date) ?
                 `${start_date}` :
                   (start_date && end_date) ?
-                    `${moment(start_date).format('ll')} - ${moment(end_date).format('ll')}` :
+                    formatDateRangeLabel(start_date, end_date) :
                     start_date ? 
-                      moment(start_date).format('ll') :
+                      formatDateLabel(start_date) :
                       end_date ? 
-                        moment(end_date).format('ll') :
+                        formatDateLabel(end_date) :
                         placeholder ?
                           <div className='text-f14 text-o-text-muted'>
                             {placeholder}
diff --git a/apps/web/app/(webapp)/(components)/ReportingSection.tsx b/apps/web/app/(webapp)/(components)/ReportingSection.tsx
index 70d3b03a..39bbec23 100644
--- a/apps/web/app/(webapp)/(components)/ReportingSection.tsx
+++ b/apps/web/app/(webapp)/(components)/ReportingSection.tsx
@@ -4,16 +4,18 @@ import { DatePicker } from '@/app/(webapp)/(components)';
 import { SelectElement } from '@/components/forms';
 import { Button } from '@/components/globalComponents';
 import clientAxiosRequest from '@/hooks/clientAxiosRequest';
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import * as API from '@/config/endpoints';
-import { searchParamsProps } from '@/types/webappTypes/appTypes';
 import { REPORTING_DATA } from '@/data/dashboardData';
 import { DashboardMetricCard } from '../app/home/dashboard/(components)';
-import moment from 'moment';
+import { endOfDayIso, startOfDayIso } from '@/utils/dateUtils'
 import { getJsCookies } from '@/config/jsCookie';
 import { findPermissionSlug } from '@/utils/findPermissionSlug';
+import { useCompanyDetailsQuery, useProfileQuery } from '@/hooks';
 
-const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
+const ReportingSection = () => {
+  const { data: profileData } = useProfileQuery();
+  const { data: companyDetails } = useCompanyDetailsQuery();
   const [from, setFrom] = useState<string | undefined>('');
   const [to, setTo] = useState<string | undefined>('');
   const [consumers, setConsumers] = useState<string>('');
@@ -26,13 +28,16 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
   const [consumersList, setConsumerList] = useState<any[]>([]);
   const [logStats, setLogStats] = useState<any>(null);
   const environment = getJsCookies('environment');
-  let userPermissions = profile_data?.user?.role?.permissions;
-  let viewReport = findPermissionSlug(userPermissions, 'view-report')
-  const apiConsumer = profile_data?.user?.role?.parent?.slug == 'api-consumer';
+  const userPermissions = useMemo(
+    () => profileData?.user?.role?.permissions,
+    [profileData?.user?.role?.permissions]
+  );
+  const viewReport = findPermissionSlug(userPermissions || [], 'view-report');
+  const apiConsumer = profileData?.user?.role?.parent?.slug === 'api-consumer';
 
   // console.log('Company details >>>>>>', alt_data);
 
-  const fetchConsumers = async () => {
+  const fetchConsumers = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCompanies({
@@ -44,9 +49,9 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
       noToast: true
     })
     setConsumerList(result?.data);
-  }
+  }, []);
 
-  const fetchCollections = async () => {
+  const fetchCollections = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCollections(),
@@ -55,9 +60,9 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
       noToast: true
     })
     setCollections(result?.data);
-  }
+  }, []);
 
-  const fetchAPIs = async () => {
+  const fetchAPIs = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getAPIsForCompany({
@@ -68,9 +73,9 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
       noToast: true
     })
     setApis(result?.data);
-  }
+  }, [environment]);
 
-  const fetchCollectionAPIs = async () => {
+  const fetchCollectionAPIs = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getAPIs({
@@ -84,37 +89,59 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
       noToast: true
     })
     setApis(result?.data);
-  }
+  }, [collection, environment]);
 
-  const fetchReports = async () => {
+  const fetchReports = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getAPILogStats({
         page: '1',
         limit: '10000',
-        environment: environment || 'development', 
-        companyId: apiConsumer ? alt_data?.id : consumers,
+        environment: environment || 'development',
+        companyId: apiConsumer ? companyDetails?.id : consumers,
         apiId: api,
-        createdAt_gt: from ? moment(from).startOf('day').format()?.split('+')[0] + '.000Z' : '',
-        createdAt_l: to ? moment(to).endOf('day').format()?.split('+')[0] + '.000Z' : '',
+        createdAt_gt: from ? startOfDayIso(from) : '',
+        createdAt_l: to ? endOfDayIso(to) : '',
       }),
       method: 'GET',
       data: null,
-      noToast: true
-    })
+      noToast: true,
+    });
     setLogStats(result?.data);
-  }
+  }, [api, apiConsumer, companyDetails?.id, consumers, environment, from, to]);
 
   useEffect(() => {
+    if (!profileData || !companyDetails) {
+      return;
+    }
+
     if (apiConsumer) {
       fetchAPIs();
       fetchReports();
     } else {
       fetchConsumers();
       fetchCollections();
-      collection && fetchCollectionAPIs();
+      if (collection) {
+        fetchCollectionAPIs();
+      } else {
+        setApis([]);
+      }
     }
-  }, [collection]);
+  }, [
+    apiConsumer,
+    collection,
+    companyDetails,
+    fetchAPIs,
+    fetchCollectionAPIs,
+    fetchCollections,
+    fetchConsumers,
+    fetchReports,
+    profileData,
+  ]);
+
+  if (!profileData || !companyDetails) {
+    return null;
+  }
 
   const allObject = [{ label: 'All', value: ''}]
 
@@ -166,10 +193,10 @@ const ReportingSection = ({ alt_data, profile_data }: searchParamsProps) => {
             page: '1',
             limit: '10000',
             environment: environment || 'development', 
-            companyId: apiConsumer ? alt_data?.id : consumers,
+        companyId: apiConsumer ? companyDetails?.id : consumers,
             apiId: api,
-            createdAt_gt: from ? moment(from).startOf('day').format()?.split('+')[0] + '.000Z' : '',
-            createdAt_l: to ? moment(to).endOf('day').format()?.split('+')[0] + '.000Z' : '',
+            createdAt_gt: from ? startOfDayIso(from) : '',
+            createdAt_l: to ? endOfDayIso(to) : '',
           }),
           method: 'GET',
           data: {}
diff --git a/apps/web/app/(webapp)/(components)/TableElement.tsx b/apps/web/app/(webapp)/(components)/TableElement.tsx
index 6e95fa15..e41e6f4f 100644
--- a/apps/web/app/(webapp)/(components)/TableElement.tsx
+++ b/apps/web/app/(webapp)/(components)/TableElement.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useMemo } from 'react'
+import React, { useMemo, memo } from 'react'
 import { 
   createColumnHelper,
   flexRender,
@@ -8,15 +8,16 @@ import {
   useReactTable, 
 } from '@tanstack/react-table'
 import { TabelElmentProps } from '@/types/webappTypes/componentsTypes'
-import { ConfigurationBox, RequestMethodText, StatusBox, TablePagination, TierBox } from '.'
+import { ConfigurationBox, RequestMethodText, StatusBox, TierBox } from '.'
+import { Pagination } from '@/components/globalComponents'
 import { timestampFormatter } from '@/utils/timestampFormatter'
 import BooleanBox from './BooleanBox'
 import { useRouter } from 'next/navigation'
-import moment from 'moment'
+import { formatDateForTable } from '@/utils/dateUtils'
 import { addEllipsis } from '@/utils/addEllipsisToStrings'
 import StatusCodeBox from './StatusCodeBox'
 
-const TableElement = ({
+const TableElement = memo(({
   tableHeaders,
   rawData,
   filters,
@@ -33,31 +34,29 @@ const TableElement = ({
   tdStyle
 }: TabelElmentProps) => {
   const router = useRouter();
-  const columnHelper = createColumnHelper<any>()
+  const columnHelper = useMemo(() => createColumnHelper<any>(), [])
   
-  const rawColumns = tableHeaders?.map(item => {
-    return (
+  const rawColumns = useMemo(() => {
+    return tableHeaders?.map((item) =>
       columnHelper.accessor(item?.accessor, {
         header: () => item?.header,
         cell: ({ column, cell, renderValue }) => {
-          if(column.id === 'status' || column.id === 'user_type' || column.id === 'kyb_status') {
-            return <StatusBox status={cell.getValue()} />
+          if (column.id === 'status' || column.id === 'user_type' || column.id === 'kyb_status') {
+            return <StatusBox status={cell.getValue()} />;
           } else if (column.id == 'status_code') {
-            return <StatusCodeBox status={cell.getValue()} />
+            return <StatusCodeBox status={cell.getValue()} />;
           } else {
             return renderValue();
           }
-        }
+        },
       })
-    );
-  });
+    ) ?? [];
+  }, [columnHelper, tableHeaders]);
 
   const columns = useMemo(
-    () => actionColumn ? [
-      ...rawColumns,
-      actionColumn
-    ] : [ ...rawColumns ],
-    [...filters, rawColumns]
+    () =>
+      actionColumn ? [...rawColumns, actionColumn] : [...rawColumns],
+    [actionColumn, rawColumns]
   );
 
   const data = useMemo(
@@ -81,16 +80,14 @@ const TableElement = ({
       <div className="relative border overflow-y-visible overflow-x-auto border-o-border rounded-[8px] w-full min-h-[150px]">
         <table className='min-w-fit w-full'>
           <thead>
-            {getHeaderGroups().map((headerGroup, index) => (
+            {getHeaderGroups().map((headerGroup) => (
               <tr 
-                key={index}
-                // key={headerGroup.id}
+                key={headerGroup.id}
                 className='h-[40px] w-full bg-o-bg2 py-[10px]'
               >
-                {headerGroup.headers.map((header, index) => (
+                {headerGroup.headers.map((header) => (
                   <th 
-                    key={index}
-                    // key={header.id}
+                    key={header.id}
                     className={`whitespace-nowrap min-w-[220px] w-fit max-w-[500px] text-left 
                     first-of-type:rounded-tl-[8px] last-of-type:rounded-tr-[8px] 
                     text-o-text-medium px-[16px] text-f12 font-[500] 
@@ -122,10 +119,9 @@ const TableElement = ({
             ))}
           </thead>
           <tbody>
-            {getRowModel().rows.map((row, index) => (
+            {getRowModel().rows.map((row) => (
               <tr 
-                // key={row.id}
-                key={index}
+                key={row.id}
                 onClick={() => redirect && router.push(redirect(
                   module == 'collections' ? 
                     row.original.id :
@@ -133,16 +129,15 @@ const TableElement = ({
                 ))}
                 className={`bg-white group`}
               >
-                {row.getVisibleCells().map((cell, index) => (
+                {row.getVisibleCells().map((cell) => (
                   <td 
-                    // key={cell.id}
-                    key={index}
+                    key={cell.id}
                     className={`bg-white border-b border-o-border vertical-align-start px-[12px] py-[18px] 
                     text-o-text-medium3 text-f14 ${redirect && 'cursor-pointer group-hover:bg-[#FCFDFD]'} ${tdStyle}`}
                   >
                     {
                       (cell.id?.includes('date_created') || cell.id?.includes('date_invited')) ? 
-                        moment(cell.getValue() || '').format('LLL') 
+                        formatDateForTable(cell.getValue()) 
                         :
                         cell.id?.includes('timestamp') ? 
                           timestampFormatter(cell.getValue()) 
@@ -192,16 +187,28 @@ const TableElement = ({
 
       {
         !removePagination &&
-        <TablePagination 
-          rows={rows}
-          page={page}
-          totalElements={totalElements}
-          totalElementsInPage={totalElementsInPage}
+        <Pagination 
+          currentPage={page}
           totalPages={totalPages}
+          totalItems={totalElements || 0}
+          itemsPerPage={rows}
+          itemsInCurrentPage={totalElementsInPage || 0}
         />
       }
     </div>
   )
-}
+}, (prevProps, nextProps) => {
+  return (
+    prevProps.rawData === nextProps.rawData &&
+    prevProps.page === nextProps.page &&
+    prevProps.rows === nextProps.rows &&
+    prevProps.totalElements === nextProps.totalElements &&
+    prevProps.totalPages === nextProps.totalPages &&
+    Boolean(prevProps.actionColumn) === Boolean(nextProps.actionColumn) &&
+    Boolean(prevProps.redirect) === Boolean(nextProps.redirect)
+  );
+});
+
+TableElement.displayName = 'TableElement';
 
 export default TableElement
\ No newline at end of file
diff --git a/apps/web/app/(webapp)/(components)/TablePagination.tsx b/apps/web/app/(webapp)/(components)/TablePagination.tsx
deleted file mode 100644
index 23c2222e..00000000
--- a/apps/web/app/(webapp)/(components)/TablePagination.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-'use client'
-
-import { SelectElement } from '@/components/forms'
-import { Button } from '@/components/globalComponents';
-import { TablePaginationProps } from '@/types/webappTypes/componentsTypes';
-import { updateSearchParams } from '@/utils/searchParams';
-import { useRouter } from 'next/navigation';
-import React from 'react'
-
-const TablePagination = ({
-  rows, 
-  page, 
-  totalElements,
-  totalElementsInPage,
-  totalPages
-}: TablePaginationProps) => {
-  const router = useRouter();
-
-  const row_list = [
-    { label: '10', value: '10' },
-    { label: '20', value: '20' },
-    { label: '50', value: '50' },
-    { label: '100', value: '100' },
-  ];
-  
-  const handleNext = () => {
-    if (page !== totalPages) {
-      const url = updateSearchParams('page', `${page + 1}`);
-      router.push(url);
-    }
-  };
-
-  const handlePrevious = () => {
-    if (page != 1) {
-      const url = updateSearchParams('page', `${page - 1}`);
-      router.push(url);
-    }
-  };
-
-  return (
-    <div className='w-full flex-wrap flex items-center justify-between gap-5'>
-        <div className='text-o-text-darkest text-f14'>
-          Showing {totalElementsInPage} of {totalElements} entries
-        </div>
-
-        <div className='w-fi gap-[10px] flex items-center'>
-          <div className='gap-[8px] flex items-center text-o-text-darkest text-f14'>
-            Rows per page
-
-            <SelectElement
-              name='rows'
-              options={row_list}
-              value={rows?.toString()}
-              containerStyle='!w-fit cursor-pointer'
-              small
-              removeSearch
-              optionStyle='!bottom-[40px]'
-              forFilter
-            />
-          </div>
-
-          <div className='w-fit flex items-center'>
-            <Button 
-              outlined
-              effect={handlePrevious}
-              small
-              title='Previous'
-              titleStyle='group-hover:text-[#274079]'
-              containerStyle='!w-fit !rounded-tl-[4px] !rounded-bl-[4px] !rounded-[0]'
-            />
-            <Button 
-              outlined
-              effect={handleNext}
-              small
-              title='Next'
-              titleStyle='group-hover:text-[#274079]'
-              containerStyle='!w-fit !rounded-tr-[4px] !rounded-br-[4px] !rounded-[0]'
-            />
-          </div>
-        </div>
-      </div>
-  )
-}
-
-export default TablePagination
\ No newline at end of file
diff --git a/apps/web/app/(webapp)/(components)/index.ts b/apps/web/app/(webapp)/(components)/index.ts
index dbf52558..78cc744a 100644
--- a/apps/web/app/(webapp)/(components)/index.ts
+++ b/apps/web/app/(webapp)/(components)/index.ts
@@ -10,7 +10,6 @@ import NotificationCard from "./NotificationCard";
 import TopPanel from "./TopPanel";
 import TableElement from "./TableElement";
 import StatusBox from "./StatusBox";
-import TablePagination from "./TablePagination";
 import TwoFactorAuthModal from "./TwoFactorAuthModal";
 import TwoFactorAuthForm from "./TwoFactorAuthForm";
 import MultipleSelectOptions from "./MultipleSelectOptions";
@@ -48,7 +47,6 @@ export {
   TableElement,
   KybBanner,
   StatusBox,
-  TablePagination,
   TwoFactorAuthModal,
   TwoFactorAuthForm,
   MultipleSelectOptions,
diff --git a/apps/web/app/(webapp)/app/AppLayoutClient.tsx b/apps/web/app/(webapp)/app/AppLayoutClient.tsx
new file mode 100644
index 00000000..d564d54e
--- /dev/null
+++ b/apps/web/app/(webapp)/app/AppLayoutClient.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { useEffect } from 'react';
+import { HydrationBoundary, type DehydratedState } from '@tanstack/react-query';
+import { useUserStore, useAuthStore } from '@/stores';
+import { AppLeftSideBar, AppNavBar, KybBanner } from '../(components)';
+import LogoutTimer from '@/components/globalComponents/LogoutTimer';
+
+interface AppLayoutClientProps {
+  profile: any;
+  companyDetails: any;
+  settings: any;
+  showBanner: boolean;
+  canToggleMode: boolean;
+  dehydratedState?: DehydratedState;
+  children: React.ReactNode;
+}
+
+export default function AppLayoutClient({
+  profile,
+  companyDetails,
+  settings,
+  showBanner,
+  canToggleMode,
+  dehydratedState,
+  children,
+}: AppLayoutClientProps) {
+  const setProfile = useUserStore((state) => state.setProfile);
+  const setCompanyDetails = useUserStore((state) => state.setCompanyDetails);
+  const setSettings = useUserStore((state) => state.setSettings);
+  const hydrateAuth = useAuthStore((state) => state.hydrateFromCookies);
+
+  useEffect(() => {
+    if (profile) setProfile(profile);
+    if (companyDetails) setCompanyDetails(companyDetails);
+    if (settings) setSettings(settings);
+  }, [profile, companyDetails, settings, setProfile, setCompanyDetails, setSettings]);
+
+  useEffect(() => {
+    hydrateAuth();
+  }, [hydrateAuth]);
+
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <section className='max-w-full min-h-screen relative bg-[#FCFDFD]'>
+        {
+          profile?.user?.role?.parent?.slug === 'api-consumer' &&
+          showBanner &&
+          <KybBanner rawData={companyDetails} />
+        }
+
+        <AppNavBar
+          bannerExist={showBanner}
+          canToggleMode={canToggleMode}
+        />
+
+        <AppLeftSideBar bannerExist={showBanner} />
+
+        {/* INACTIVITY LOGOUT TIMER */}
+        {
+          settings?.inactivityTimeout?.value &&
+          <LogoutTimer
+            timeout={1000 * 60 * Number(settings?.inactivityTimeout?.value)}
+          />
+        }
+
+        <main className={`w-full min-h-screen flex flex-col ${showBanner ? 'pt-[168px]' : 'pt-[112px]'} pb-[25px] wide:pl-[360px] pl-[330px] wide:pr-[80px] pr-[25px] overflow-auto`}>
+          <section className='w-full h-full flex flex-col'>
+            {children}
+          </section>
+        </main>
+      </section>
+    </HydrationBoundary>
+  );
+}
diff --git a/apps/web/app/(webapp)/app/api-management/activity/page.tsx b/apps/web/app/(webapp)/app/api-management/activity/page.tsx
index 9da22266..0e5d881e 100644
--- a/apps/web/app/(webapp)/app/api-management/activity/page.tsx
+++ b/apps/web/app/(webapp)/app/api-management/activity/page.tsx
@@ -8,7 +8,7 @@ import { DatePicker, ExportButton, ToastMessage } from '@/app/(webapp)/(componen
 import { applyAxiosRequest } from '@/hooks'
 import * as API from '@/config/endpoints';
 import Logout from '@/components/globalComponents/Logout'
-import moment from 'moment'
+import { endOfDayIso, startOfDayIso } from '@/utils/dateUtils'
 import { getCookies } from '@/config/cookies'
 import { RefreshStoredToken } from '@/components/globalComponents'
 
@@ -32,8 +32,8 @@ const ActivityPage = async({ searchParams }: UrlParamsProps) => {
       referenceId: search_query,
       status: status,
       apiId: search_apis,
-      createdAt_gt: dateFilter?.start_date ? moment(dateFilter?.start_date).startOf('day').format()?.split('+')[0] + '.000Z' : '',
-      createdAt_l: dateFilter?.end_date ? moment(dateFilter?.end_date).endOf('day').format()?.split('+')[0] + '.000Z' : '',
+  createdAt_gt: dateFilter?.start_date ? startOfDayIso(dateFilter?.start_date) : '',
+  createdAt_l: dateFilter?.end_date ? endOfDayIso(dateFilter?.end_date) : '',
       environment: environment || 'development'
     }),
     method: 'GET',
diff --git a/apps/web/app/(webapp)/app/api-management/consumers/(components)/AddPermissionButton.tsx b/apps/web/app/(webapp)/app/api-management/consumers/(components)/AddPermissionButton.tsx
index 49602788..bc865a00 100644
--- a/apps/web/app/(webapp)/app/api-management/consumers/(components)/AddPermissionButton.tsx
+++ b/apps/web/app/(webapp)/app/api-management/consumers/(components)/AddPermissionButton.tsx
@@ -3,7 +3,7 @@
 import { Button } from '@/components/globalComponents'
 import clientAxiosRequest from '@/hooks/clientAxiosRequest';
 import { useRouter } from 'next/navigation';
-import React, { FormEvent, useEffect, useState } from 'react';
+import React, { FormEvent, useCallback, useEffect, useState } from 'react';
 import * as API from '@/config/endpoints';
 import { AppCenterModal, AppRightModal, TwoFactorAuthModal } from '@/app/(webapp)/(components)';
 import { AddAPIPermissions } from '.';
@@ -26,7 +26,7 @@ const AddPermissionButton = ({
   const environment = getJsCookies('environment');
   const [refresh, setRefresh] = useState(false);
 
-  const fetchConsumerAPIs = async () => {
+  const fetchConsumerAPIs = useCallback(async () => {
     const result: any = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCompanyAPIs({
@@ -43,9 +43,9 @@ const AddPermissionButton = ({
         return api?.id;
       }) : [];
     setApiIds([...sanitizedAPIs]);
-  }
+  }, [companyId, environment]);
 
-  const fetchAPICollections = async () => {
+  const fetchAPICollections = useCallback(async () => {
     const result: any = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCollections(),
@@ -54,9 +54,9 @@ const AddPermissionButton = ({
       noToast: true
     });
     setCollections(result?.data);
-  }
+  }, []);
 
-  const fetchProfile = async () => {
+  const fetchProfile = useCallback(async () => {
     const result: any = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getProfile(),
@@ -65,16 +65,16 @@ const AddPermissionButton = ({
       noToast: true
     });
     setProfile(result?.data);
-  }
+  }, []);
 
   useEffect(() => {
     fetchProfile();
     fetchAPICollections();
-  }, []);
+  }, [fetchAPICollections, fetchProfile]);
 
   useEffect(() => {
     fetchConsumerAPIs();
-  }, [refresh])
+  }, [fetchConsumerAPIs, refresh])
 
   // const close2FAModal = () => {
   //   setOpen2FA(false);
diff --git a/apps/web/app/(webapp)/app/api-management/consumers/(components)/EditPermissionButton.tsx b/apps/web/app/(webapp)/app/api-management/consumers/(components)/EditPermissionButton.tsx
index 90146b45..a0eee4d0 100644
--- a/apps/web/app/(webapp)/app/api-management/consumers/(components)/EditPermissionButton.tsx
+++ b/apps/web/app/(webapp)/app/api-management/consumers/(components)/EditPermissionButton.tsx
@@ -2,7 +2,7 @@
 
 import { Button } from '@/components/globalComponents'
 import clientAxiosRequest from '@/hooks/clientAxiosRequest';
-import React, { FormEvent, useEffect, useState } from 'react'
+import React, { FormEvent, useCallback, useEffect, useState } from 'react'
 import * as API from '@/config/endpoints';
 import { AppCenterModal, AppRightModal, TwoFactorAuthModal } from '@/app/(webapp)/(components)';
 import { useRouter } from 'next/navigation';
@@ -24,7 +24,7 @@ const EditPermissionButton = ({
   const environment = getJsCookies('environment');
   const [refresh, setRefresh] = useState(false);
 
-  const fetchConsumerAPIs = async () => {
+  const fetchConsumerAPIs = useCallback(async () => {
     const result: any = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCompanyAPIs({
@@ -41,9 +41,9 @@ const EditPermissionButton = ({
       return api?.id;
     }) : [];
     setApiIds([...sanitizedAPIs]);
-  }
+  }, [environment, rawData?.id]);
 
-  const fetchAPICollections = async () => {
+  const fetchAPICollections = useCallback(async () => {
     const result: any = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getCollections(),
@@ -52,9 +52,9 @@ const EditPermissionButton = ({
       noToast: true
     });
     setCollections(result?.data);
-  }
+  }, []);
 
-  const fetchProfile = async () => {
+  const fetchProfile = useCallback(async () => {
     const result: any = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getProfile(),
@@ -63,7 +63,7 @@ const EditPermissionButton = ({
       noToast: true
     });
     setProfile(result?.data);
-  }
+  }, []);
 
   useEffect(() => {
     fetchProfile();
diff --git a/apps/web/app/(webapp)/app/audit-trail/page.tsx b/apps/web/app/(webapp)/app/audit-trail/page.tsx
index 2a42878f..64a76ca5 100644
--- a/apps/web/app/(webapp)/app/audit-trail/page.tsx
+++ b/apps/web/app/(webapp)/app/audit-trail/page.tsx
@@ -7,7 +7,7 @@ import { DatePicker, ToastMessage } from '@/app/(webapp)/(components)'
 import { applyAxiosRequest } from '@/hooks'
 import * as API from '@/config/endpoints';
 import Logout from '@/components/globalComponents/Logout'
-import moment from 'moment'
+import { endOfDayIso, startOfDayIso } from '@/utils/dateUtils'
 import { RefreshStoredToken } from '@/components/globalComponents'
 import { getCookies } from '@/config/cookies'
 
@@ -28,8 +28,8 @@ const AuditTrailPage = async ({ searchParams }: UrlParamsProps) => {
       limit: `${rows}`,
       name: search_query,
       event: type,
-      createdAt_gt: moment(dateFilter?.start_date).startOf('day').format()?.split('+')[0] + '.000Z',
-      createdAt_l: moment(dateFilter?.end_date).endOf('day').format()?.split('+')[0] + '.000Z'
+  createdAt_gt: startOfDayIso(dateFilter?.start_date),
+  createdAt_l: endOfDayIso(dateFilter?.end_date)
     }),
     method: 'GET',
     data: null
diff --git a/apps/web/app/(webapp)/app/home/dashboard/(components)/APIConsumerDashboardPage.tsx b/apps/web/app/(webapp)/app/home/dashboard/(components)/APIConsumerDashboardPage.tsx
index 37b7682c..56bd035b 100644
--- a/apps/web/app/(webapp)/app/home/dashboard/(components)/APIConsumerDashboardPage.tsx
+++ b/apps/web/app/(webapp)/app/home/dashboard/(components)/APIConsumerDashboardPage.tsx
@@ -207,10 +207,7 @@ const APIConsumerDashboardPage = async ({ alt_data, profile_data }: searchParams
             Reporting
           </h3>
 
-          <ReportingSection 
-            profile_data={profile_data}
-            alt_data={alt_data}
-          />
+          <ReportingSection />
         </section>
       }
     </section>
diff --git a/apps/web/app/(webapp)/app/home/dashboard/(components)/APIProviderDashboardPage.tsx b/apps/web/app/(webapp)/app/home/dashboard/(components)/APIProviderDashboardPage.tsx
index 94100baf..16798ba0 100644
--- a/apps/web/app/(webapp)/app/home/dashboard/(components)/APIProviderDashboardPage.tsx
+++ b/apps/web/app/(webapp)/app/home/dashboard/(components)/APIProviderDashboardPage.tsx
@@ -9,7 +9,7 @@ import Logout from '@/components/globalComponents/Logout'
 import { applyAxiosRequest } from '@/hooks'
 import { StatDataProps } from '@/types/dataTypes'
 import { getCookies } from '@/config/cookies'
-import moment from 'moment'
+import { endOfDayIso, startOfDayIso } from '@/utils/dateUtils'
 import { RefreshStoredToken } from '@/components/globalComponents'
 
 const APIProviderDashboardPage = async ({ date_filter, alt_data, details_data }: searchParamsProps) => {
@@ -19,8 +19,8 @@ const APIProviderDashboardPage = async ({ date_filter, alt_data, details_data }:
   const fetchedConsumerStat : any = await applyAxiosRequest({
     headers: {},
     apiEndpoint: API.getCompanyStats({
-      createdAt_gt: dateFilter?.start_date ? moment(dateFilter?.start_date).startOf('day').format()?.split('+')[0] + '.000Z' : '',
-      createdAt_l: dateFilter?.end_date ? moment(dateFilter?.end_date).endOf('day').format()?.split('+')[0] + '.000Z' : '',
+  createdAt_gt: dateFilter?.start_date ? startOfDayIso(dateFilter?.start_date) : '',
+  createdAt_l: dateFilter?.end_date ? endOfDayIso(dateFilter?.end_date) : '',
     }),
     method: 'GET',
     data: null
@@ -29,8 +29,8 @@ const APIProviderDashboardPage = async ({ date_filter, alt_data, details_data }:
   const fetchedKybStats: any = await applyAxiosRequest({
     headers: {},
     apiEndpoint: API.getCompanyKybStats({
-      createdAt_gt: dateFilter?.start_date ? moment(dateFilter?.start_date).startOf('day').format()?.split('+')[0] + '.000Z' : '',
-      createdAt_l: dateFilter?.end_date ? moment(dateFilter?.end_date).endOf('day').format()?.split('+')[0] + '.000Z' : '',
+  createdAt_gt: dateFilter?.start_date ? startOfDayIso(dateFilter?.start_date) : '',
+  createdAt_l: dateFilter?.end_date ? endOfDayIso(dateFilter?.end_date) : '',
     }),
     method: 'GET',
     data: null
@@ -42,8 +42,8 @@ const APIProviderDashboardPage = async ({ date_filter, alt_data, details_data }:
       page: '1',
       limit: '1000',
       environment: environment || 'development',
-      createdAt_gt: dateFilter?.start_date ? moment(dateFilter?.start_date).startOf('day').format()?.split('+')[0] + '.000Z' : '',
-      createdAt_l: dateFilter?.end_date ? moment(dateFilter?.end_date).endOf('day').format()?.split('+')[0] + '.000Z' : '',
+  createdAt_gt: dateFilter?.start_date ? startOfDayIso(dateFilter?.start_date) : '',
+  createdAt_l: dateFilter?.end_date ? endOfDayIso(dateFilter?.end_date) : '',
     }),
     method: 'GET',
     data: null
diff --git a/apps/web/app/(webapp)/app/home/dashboard/(components)/DashboardMetricCard.tsx b/apps/web/app/(webapp)/app/home/dashboard/(components)/DashboardMetricCard.tsx
index 537b17d0..28ae4b43 100644
--- a/apps/web/app/(webapp)/app/home/dashboard/(components)/DashboardMetricCard.tsx
+++ b/apps/web/app/(webapp)/app/home/dashboard/(components)/DashboardMetricCard.tsx
@@ -1,7 +1,6 @@
 import { DashboardMetricCardProps } from '@/types/webappTypes/appTypes'
 import { addCommasToAmount } from '@/utils/addCommasToAmount'
 import React from 'react'
-import moment from 'moment'
 import { BarChart } from '.'
 
 const DashboardMetricCard = ({
@@ -45,12 +44,10 @@ const DashboardMetricCard = ({
           <div className='mt-[4px] w-full text-o-text-muted2 text-[10px] flex items-center justify-between gap-5'>
             <span>
               {labels ? labels[0] : ''}
-              {/* {moment(labels[0]).format('lll')} */}
             </span>
 
             <span>
               {labels ? labels[labels.length - 1] : ''}
-              {/* {moment(labels[labels.length - 1]).format('lll')} */}
             </span>
           </div>
         </>
diff --git a/apps/web/app/(webapp)/app/home/dashboard/page.tsx b/apps/web/app/(webapp)/app/home/dashboard/page.tsx
index 33a4e547..f5a4c57b 100644
--- a/apps/web/app/(webapp)/app/home/dashboard/page.tsx
+++ b/apps/web/app/(webapp)/app/home/dashboard/page.tsx
@@ -1,69 +1,22 @@
 import React from 'react'
 import { UrlParamsProps } from '@/types/webappTypes/appTypes'
 import { APIConsumerDashboardPage, APIProviderDashboardPage } from './(components)'
-import { getCookies } from '@/config/cookies';
-import { applyAxiosRequest } from '@/hooks';
-import * as API from '@/config/endpoints';
-import Logout from '@/components/globalComponents/Logout';
-import { RefreshStoredToken } from '@/components/globalComponents';
+import { getUserBootstrapData } from '@/server/getUserBootstrapData'
 
 const DashboardPage = async ({ searchParams }: UrlParamsProps) => {
   const date_filter = searchParams?.date_filter || '';
-  // const search_query = searchParams?.search_query || '';
-  // const request_method = searchParams?.request_method || '';
-  // const tier = searchParams?.tier || '';
-  // const rows = Number(searchParams?.rows) || 10
-  // const page = Number(searchParams?.page) || 1
 
-  const fetchedProfile: any = await applyAxiosRequest({
-    headers: {},
-    apiEndpoint: API.getProfile(),
-    method: 'GET',
-    data: null
-  });
+  const bootstrap = await getUserBootstrapData();
 
-  const fetchedDetails: any = await applyAxiosRequest({
-    headers: {},
-    apiEndpoint: API.getCompanyDetails(),
-    method: 'GET',
-    data: null
-  });
-
-  /** REFRESH TOKEN CHECK */
-  let refreshTokenRes = null; 
-  
-  if (fetchedProfile?.status == 401) {
-    refreshTokenRes = await applyAxiosRequest({
-      headers: { },
-      apiEndpoint: API?.refreshToken(),
-      method: 'POST',
-      data: {
-        refreshToken: `${await getCookies('aperta-user-refreshToken')}`
-      }
-    });
-
-    if (!(refreshTokenRes?.status == 200 || refreshTokenRes?.status == 201)) {
-      return <Logout />
-    }
+  if (bootstrap.shouldLogout) {
+    return null;
   }
 
-  let profile = fetchedProfile?.data;
-  let companyDetails = fetchedDetails?.data;
-
-  // const getUserProfile = await getCookies('aperta-user-profile');
-  // const userProfile = getUserProfile ? JSON.parse(getUserProfile) : null;
-  // const userType = userProfile?.userType;
+  const profile = bootstrap.profile;
+  const companyDetails = bootstrap.companyDetails;
   
   return (
     <>
-    {/* REFRESH TOKEN SECTION */}
-    {
-          refreshTokenRes?.data &&
-          <RefreshStoredToken 
-            data={refreshTokenRes?.data} 
-          />
-        }
-    
     {
       // userType == 'api-provider' ?
       (profile?.user?.role?.parent?.slug == 'api-provider') ?
diff --git a/apps/web/app/(webapp)/app/layout.tsx b/apps/web/app/(webapp)/app/layout.tsx
index b007db8c..dcf9cb45 100644
--- a/apps/web/app/(webapp)/app/layout.tsx
+++ b/apps/web/app/(webapp)/app/layout.tsx
@@ -1,12 +1,16 @@
 import type { Metadata } from 'next'
-import { AppLeftSideBar, AppNavBar, KybBanner } from '../(components)'
 import { redirect } from 'next/navigation'
 import { getCookies } from '@/config/cookies'
-import { applyAxiosRequest } from '@/hooks'
-import * as API from '@/config/endpoints';
 import Logout from '@/components/globalComponents/Logout'
 import { RefreshStoredToken } from '@/components/globalComponents'
-import LogoutTimer from '@/components/globalComponents/LogoutTimer'
+import AppLayoutClient from './AppLayoutClient'
+import { getUserBootstrapData } from '@/server/getUserBootstrapData'
+import { QueryClient, dehydrate } from '@tanstack/react-query'
+import {
+  primeCompanyDetailsQuery,
+  primeProfileQuery,
+  primeSettingsQuery,
+} from '@/hooks/queries/userQueryKeys'
 
 export const metadata: Metadata = {
   title: 'Aperta - App',
@@ -20,50 +24,22 @@ export default async function RootLayout({
   if (!await getCookies('aperta-user-accessToken')) {
     redirect('/signin')
   } else {
-    const fetchedDetails : any = await applyAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getCompanyDetails(),
-      method: 'GET',
-      data: null
-    });
+    const bootstrap = await getUserBootstrapData();
 
-    const fetchedProfile: any = await applyAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getProfile(),
-      method: 'GET',
-      data: null
-    });
+    if (bootstrap.shouldLogout) {
+      return <Logout />
+    }
 
-    const fetchSettings : any = await applyAxiosRequest({
-      headers: {},
-      apiEndpoint: API.getSettings({
-        type: 'general'
-      }),
-      method: 'GET',
-      data: null
-    });
+    const queryClient = new QueryClient();
+    primeCompanyDetailsQuery(queryClient, bootstrap.companyDetails);
+    primeProfileQuery(queryClient, bootstrap.profile);
+    primeSettingsQuery(queryClient, bootstrap.settings);
 
-    /** REFRESH TOKEN CHECK */
-    let refreshTokenRes = null; 
-  
-    if (fetchedDetails?.status == 401) {
-      refreshTokenRes = await applyAxiosRequest({
-        headers: { },
-        apiEndpoint: API?.refreshToken(),
-        method: 'POST',
-        data: {
-          refreshToken: `${await getCookies('aperta-user-refreshToken')}`
-        }
-      });
+    const dehydratedState = dehydrate(queryClient);
 
-      if (!(refreshTokenRes?.status == 200 || refreshTokenRes?.status == 201)) {
-        return <Logout />
-      }
-    }
-  
-    let details = fetchedDetails?.data;
-    let profile = fetchedProfile?.data;
-    let settings = fetchSettings?.data;
+    const details = bootstrap.companyDetails;
+    const profile = bootstrap.profile;
+    const settings = bootstrap.settings;
     let showBanner = Boolean(
       profile?.user?.role?.parent?.slug == 'api-consumer' && 
       !details?.isVerified
@@ -76,40 +52,26 @@ export default async function RootLayout({
       || profile?.user?.role?.parent?.slug === 'api-provider');
 
     return (
-      <section className='max-w-full min-h-screen relative bg-[#FCFDFD]'>
+      <>
         {/* REFRESH TOKEN SECTION */}
         {
-          refreshTokenRes?.data &&
+          bootstrap.refreshTokenData &&
           <RefreshStoredToken 
-            data={refreshTokenRes?.data} 
+            data={bootstrap.refreshTokenData} 
           />
         }
 
-        { 
-          profile?.user?.role?.parent?.slug == 'api-consumer' && 
-          showBanner && 
-          <KybBanner rawData={details} /> 
-        }
-        <AppNavBar 
-          bannerExist={showBanner} 
+        <AppLayoutClient
+          profile={profile}
+          companyDetails={details}
+          settings={settings}
+          showBanner={showBanner}
           canToggleMode={canToggleMode}
-        />
-        <AppLeftSideBar bannerExist={showBanner} />
-
-        {/* INACTIVITY LOGOUT TIMER */}
-        {
-          settings?.inactivityTimeout?.value && 
-          <LogoutTimer 
-            timeout={1000 * 60 * Number(settings?.inactivityTimeout?.value)} 
-          />
-        }
-
-        <main className={`w-full min-h-screen flex flex-col ${showBanner ? 'pt-[168px]' : 'pt-[112px]'} pb-[25px] wide:pl-[360px] pl-[330px] wide:pr-[80px] pr-[25px] overflow-auto`}>
-          <section className='w-full h-full flex flex-col'>
-            {children}
-          </section>
-        </main>
-      </section>
+          dehydratedState={dehydratedState}
+        >
+          {children}
+        </AppLayoutClient>
+      </>
     )
   }
 }
diff --git a/apps/web/app/(webapp)/app/reporting/consents/(components)/ConsentsDetails.tsx b/apps/web/app/(webapp)/app/reporting/consents/(components)/ConsentsDetails.tsx
index 48b0036a..ad3fe863 100644
--- a/apps/web/app/(webapp)/app/reporting/consents/(components)/ConsentsDetails.tsx
+++ b/apps/web/app/(webapp)/app/reporting/consents/(components)/ConsentsDetails.tsx
@@ -4,7 +4,7 @@ import { ActionsSelector, AppCenterModal, StatusBox, ViewData } from '@/app/(web
 import { CONSENT_ACTIONS_DATA } from '@/data/consentData';
 import { updateSearchParams } from '@/utils/searchParams'
 import { timestampFormatter } from '@/utils/timestampFormatter';
-import moment from 'moment';
+import { formatDateLabel } from '@/utils/dateUtils';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -154,11 +154,11 @@ const ConsentsDetails = ( ) => {
 
             <ViewData 
               label='Valid From'
-              value={`${moment('2023-09-25').format('ll')}`}
+              value={`${formatDateLabel('2023-09-25')}`}
             />
             <ViewData 
               label='Valid Until'
-              value={`${moment('2023-09-25').format('ll')}`}
+              value={`${formatDateLabel('2023-09-25')}`}
             />
           </div>
         </div>
diff --git a/apps/web/app/(webapp)/app/reporting/reports/page.tsx b/apps/web/app/(webapp)/app/reporting/reports/page.tsx
index a11fb9dd..f37e7fe3 100644
--- a/apps/web/app/(webapp)/app/reporting/reports/page.tsx
+++ b/apps/web/app/(webapp)/app/reporting/reports/page.tsx
@@ -1,70 +1,15 @@
 import React from 'react'
-import { Report, ReportForms } from './(components)'
 import { ReportingSection } from '@/app/(webapp)/(components)'
-import Logout from '@/components/globalComponents/Logout';
-import { applyAxiosRequest } from '@/hooks';
-import * as API from '@/config/endpoints';
-import { getCookies } from '@/config/cookies';
-import { RefreshStoredToken } from '@/components/globalComponents';
-
-const ReportsPage = async () => {
-  const fetchedProfile: any = await applyAxiosRequest({
-    headers: {},
-    apiEndpoint: API.getProfile(),
-    method: 'GET',
-    data: null
-  });
-
-  const fetchedDetails: any = await applyAxiosRequest({
-    headers: {},
-    apiEndpoint: API.getCompanyDetails(),
-    method: 'GET',
-    data: null
-  });
-
-  /** REFRESH TOKEN CHECK */
-  let refreshTokenRes = null; 
-  
-  if (fetchedProfile?.status == 401) {
-    refreshTokenRes = await applyAxiosRequest({
-      headers: { },
-      apiEndpoint: API?.refreshToken(),
-      method: 'POST',
-      data: {
-        refreshToken: `${await getCookies('aperta-user-refreshToken')}`
-      }
-    });
-
-    if (!(refreshTokenRes?.status == 200 || refreshTokenRes?.status == 201)) {
-      return <Logout />
-    }
-  }
-
-  let profile = fetchedProfile?.data;
-  let companyDetails = fetchedDetails?.data;
 
+const ReportsPage = () => {
   return (
     <div className='w-full flex flex-col gap-[20px]'>
-      {/* REFRESH TOKEN SECTION */}
-      {
-          refreshTokenRes?.data &&
-          <RefreshStoredToken 
-            data={refreshTokenRes?.data} 
-          />
-        }
-
       <h3 className='text-o-text-dark text-f18 font-[500]'>
         Reports
       </h3>
 
       <div className='w-full flex flex-col items-start gap-[20px]'>
-        {/* <ReportForms />
-        <Report /> */}
-
-        <ReportingSection 
-          profile_data={profile}
-          alt_data={companyDetails}
-        />
+        <ReportingSection />
       </div>
     </div>
   )
diff --git a/apps/web/app/(webapp)/app/system-settings/(components)/ClientIdPage.tsx b/apps/web/app/(webapp)/app/system-settings/(components)/ClientIdPage.tsx
index 4117d562..43714d75 100644
--- a/apps/web/app/(webapp)/app/system-settings/(components)/ClientIdPage.tsx
+++ b/apps/web/app/(webapp)/app/system-settings/(components)/ClientIdPage.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react'
+import React, { ChangeEvent, FormEvent, useCallback, useEffect, useState } from 'react'
 import { InputElement } from '@/components/forms'
 import { Button } from '@/components/globalComponents'
 import { CLIENT_ID_DATA } from '@/data/systemSettingsData'
@@ -17,7 +17,7 @@ const ClientIdPage = ({ profileData }: APIConfigurationProps) => {
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
-  async function fetchClientId() {
+  const fetchClientId = useCallback(async () => {
     const result: any = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getClientId({
@@ -29,11 +29,11 @@ const ClientIdPage = ({ profileData }: APIConfigurationProps) => {
     });
 
     setClient(result?.data);
-  }
+  }, [environment]);
 
   useEffect(() => {
     fetchClientId();
-  }, []);
+  }, [fetchClientId]);
 
   const incorrect = (
     !clientId
diff --git a/apps/web/app/(webapp)/app/system-settings/page.tsx b/apps/web/app/(webapp)/app/system-settings/page.tsx
index 8ae72dc9..7ece9ac8 100644
--- a/apps/web/app/(webapp)/app/system-settings/page.tsx
+++ b/apps/web/app/(webapp)/app/system-settings/page.tsx
@@ -9,54 +9,33 @@ import Logout from '@/components/globalComponents/Logout';
 import { RefreshStoredToken } from '@/components/globalComponents';
 import { getCookies } from '@/config/cookies';
 import { findPermissionSlug } from '@/utils/findPermissionSlug';
+import { getUserBootstrapData } from '@/server/getUserBootstrapData';
 
 const SystemSettingsPage = async ({ searchParams }: UrlParamsProps) => {
   const getMode = await getCookies('environment');
   const path = searchParams?.path || '';
 
-  const fetchedDetails : any = await applyAxiosRequest({
-    headers: {},
-    apiEndpoint: API.getCompanyDetails(),
-    method: 'GET',
-    data: null
-  });
-
-  let details = fetchedDetails?.data;
-
-  const fetchedProfile: any = await applyAxiosRequest({
-    headers: {},
-    apiEndpoint: API.getProfile(),
-    method: 'GET',
-    data: null
-  });
-
   const environment = getMode || '';
+  const bootstrap = await getUserBootstrapData();
 
-  /** REFRESH TOKEN CHECK */
-  let refreshTokenRes = null; 
-  
-  if (fetchedProfile?.status == 401) {
-    refreshTokenRes = await applyAxiosRequest({
-      headers: { },
-      apiEndpoint: API?.refreshToken(),
-      method: 'POST',
-      data: {
-        refreshToken: `${await getCookies('aperta-user-refreshToken')}`
-      }
-    });
-
-    if (!(refreshTokenRes?.status == 200 || refreshTokenRes?.status == 201)) {
-      return <Logout />
-    }
+  if (bootstrap.shouldLogout) {
+    return <Logout />
   }
 
-  let profile = fetchedProfile?.data;
+  const details = bootstrap.companyDetails;
+  const profile = bootstrap.profile;
+  const defaultSettings = bootstrap.settings;
+  const refreshTokenRes = bootstrap.refreshTokenData
+    ? { data: bootstrap.refreshTokenData }
+    : null;
 
   const apiProvider = profile?.user?.role?.parent?.slug == 'api-provider'
   let userPermissions = profile?.user?.role?.permissions;
   let viewRestriction = findPermissionSlug(userPermissions, 'view-api-restrictions')
 
-  const fetchedSettings : any = apiProvider ? await applyAxiosRequest({
+  const isGeneralPath = !path || path === 'general';
+
+  const fetchedSettings : any = apiProvider && !isGeneralPath ? await applyAxiosRequest({
     headers: {},
     apiEndpoint: API.getSettings({
       type: path || 'general'
@@ -102,7 +81,9 @@ const SystemSettingsPage = async ({ searchParams }: UrlParamsProps) => {
   let companyTypes = fetchedTypes?.data?.companySubtypes;
   let ips = fetchedIps?.data;
   let apiKey = fetchedAPI?.data;
-  let settings = fetchedSettings?.data;
+  const settings = apiProvider
+    ? (isGeneralPath ? defaultSettings : fetchedSettings?.data)
+    : null;
   let clientId = fetchedClientId?.data
 
   const rawPanel = SYSTEM_SETTINGS_PATHS?.filter((path: any) => 
diff --git a/apps/web/app/(webapp)/app/team/members/(components)/InviteMemberPage.tsx b/apps/web/app/(webapp)/app/team/members/(components)/InviteMemberPage.tsx
index 9c7ecd58..688d6a82 100644
--- a/apps/web/app/(webapp)/app/team/members/(components)/InviteMemberPage.tsx
+++ b/apps/web/app/(webapp)/app/team/members/(components)/InviteMemberPage.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/globalComponents'
 import clientAxiosRequest from '@/hooks/clientAxiosRequest'
 import { InviteMembersProps } from '@/types/webappTypes/appTypes'
 import { dataToPermissions } from '@/utils/dataToPermissions'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import * as API from '@/config/endpoints';
 import { validateEmail } from '@/utils/globalValidations'
 
@@ -22,7 +22,7 @@ const InviteMemberPage = ({
   const [permissions, setPermissions] = useState<any[]>([]);
   const [show_role, setShowRole] = useState(false);
 
-  async function FetchData(id: string) {
+  const fetchRolePermissions = useCallback(async (id: string) => {
     const result: any = id && await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getRolePermission({ id: id }),
@@ -33,12 +33,16 @@ const InviteMemberPage = ({
 
     let permits = dataToPermissions(result?.data?.map((data: any) => data), 'string');
     setPermissions(permits);
-  }
+  }, []);
 
   useEffect(() => {
     let role_details = roles?.find(data => data?.id == role);
-    FetchData(role_details?.id);
-  }, [role, FetchData, roles])
+    if (role_details?.id) {
+      fetchRolePermissions(role_details.id);
+    } else {
+      setPermissions([]);
+    }
+  }, [fetchRolePermissions, role, roles])
 
   const incorrect = (
     !role ||
diff --git a/apps/web/app/(webapp)/app/team/members/(components)/MemberDetails.tsx b/apps/web/app/(webapp)/app/team/members/(components)/MemberDetails.tsx
index e8cc8e0a..7ef00217 100644
--- a/apps/web/app/(webapp)/app/team/members/(components)/MemberDetails.tsx
+++ b/apps/web/app/(webapp)/app/team/members/(components)/MemberDetails.tsx
@@ -4,7 +4,7 @@ import { ActionsSelector, AppCenterModal, AppRightModal, StatusBox, TwoFactorAut
 import { MEMBERS_ACTIONS_DATA, MEMBERS_ROLES } from '@/data/membersData'
 import { updateSearchParams } from '@/utils/searchParams'
 import { useRouter } from 'next/navigation'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 import * as API from '@/config/endpoints';
 import { ActivateDeactivateMember } from '.'
@@ -46,7 +46,7 @@ const MemberDetails = ({
   useEffect(() => {
     const slug = updateSearchParams('slug', memberName);
     router.push(slug);
-  }, [router]);
+  }, [memberName, router]);
 
   const closeModal = () => {
     setOpenModal('');
@@ -57,7 +57,7 @@ const MemberDetails = ({
     setOpenModal('');
   }
 
-  const handleActivateDeactivateMember = async () => {
+  const handleActivateDeactivateMember = useCallback(async () => {
     setLoading(true);
     const result: any = await clientAxiosRequest({
       headers: {},
@@ -76,9 +76,10 @@ const MemberDetails = ({
       setOpenModal('');
       // setOpen2FA(true);
     }
-  }
+      setLoading(false);
+    }, [member?.email, member?.id, member?.profile?.firstName, member?.profile?.lastName, openModal]);
 
-  const handle2FA = () => {
+  const handle2FA = useCallback(() => {
     close2FAModal();
     toast.success(
       openModal == 'deactivate' ?
@@ -87,13 +88,9 @@ const MemberDetails = ({
           '[memberName] has been activated and access restored.' :
           null
     )
-  };
-
-  useEffect(() => {
-    (role != member?.role?.id) && changeRole(role);
-  }, [role]);
+  }, [openModal]);
 
-  const changeRole = async (value: string) => {
+  const changeRole = useCallback(async (value: string) => {
     setLoadingRole(true);
     const result: any = await clientAxiosRequest({
       headers: {},
@@ -103,19 +100,25 @@ const MemberDetails = ({
         email: member?.email,
         firstName: member?.profile?.firstName,
         lastName: member?.profile?.lastName,
-        roleId: role,
+        roleId: value,
         status: member?.status
       }
     });
 
     if (result?.message) {
       setOpenModal('');
-      setLoadingRole(false);
       toast.success(`You have successfully change ${memberName} role`);
       // router.refresh();
       // setOpen2FA(true);
     }
-  }
+    setLoadingRole(false);
+  }, [member?.email, member?.id, member?.profile?.firstName, member?.profile?.lastName, member?.status, memberName]);
+
+  useEffect(() => {
+    if (role !== member?.role?.id) {
+      changeRole(role);
+    }
+  }, [changeRole, member?.role?.id, role]);
 
   return (
     <>
diff --git a/apps/web/app/(webapp)/app/team/members/[id]/page.tsx b/apps/web/app/(webapp)/app/team/members/[id]/page.tsx
index 361ddaab..68d5cb7e 100644
--- a/apps/web/app/(webapp)/app/team/members/[id]/page.tsx
+++ b/apps/web/app/(webapp)/app/team/members/[id]/page.tsx
@@ -5,7 +5,7 @@ import { MEMBER_RECENT_ACTIVITIES, MEMBER_RECENT_ACTIVITIES_HEADER } from '@/dat
 import { applyAxiosRequest } from '@/hooks';
 import * as API from '@/config/endpoints';
 import Logout from '@/components/globalComponents/Logout';
-import moment from 'moment';
+import { endOfDayIso, startOfDayIso } from '@/utils/dateUtils';
 import { ToastMessage } from '@/app/(webapp)/(components)';
 import { RefreshStoredToken } from '@/components/globalComponents';
 import { getCookies } from '@/config/cookies';
@@ -68,8 +68,8 @@ const MemberPage = async ({ params, searchParams }: UrlParamsProps) => {
       limit: `${rows}`,
       name: member?.profile?.firstName,
       event: search_query,
-      createdAt_gt: moment(dateFilter?.start_date).startOf('day').format()?.split('+')[0] + '.000Z',
-      createdAt_l: moment(dateFilter?.end_date).endOf('day').format()?.split('+')[0] + '.000Z'
+  createdAt_gt: startOfDayIso(dateFilter?.start_date),
+  createdAt_l: endOfDayIso(dateFilter?.end_date)
     }),
     method: 'GET',
     data: null
diff --git a/apps/web/app/(webapp)/app/team/members/page.tsx b/apps/web/app/(webapp)/app/team/members/page.tsx
index 23c48f5a..41d92660 100644
--- a/apps/web/app/(webapp)/app/team/members/page.tsx
+++ b/apps/web/app/(webapp)/app/team/members/page.tsx
@@ -10,6 +10,7 @@ import * as API from '@/config/endpoints';
 import { findPermissionSlug } from '@/utils/findPermissionSlug'
 import { getCookies } from '@/config/cookies'
 import { RefreshStoredToken } from '@/components/globalComponents'
+import { getUserBootstrapData } from '@/server/getUserBootstrapData'
 
 const MembersPage = async ({ searchParams }: UrlParamsProps) => {
   const status = searchParams?.status || ''
@@ -20,15 +21,15 @@ const MembersPage = async ({ searchParams }: UrlParamsProps) => {
 
   const filters = [search_query, status, role];
 
-  const fetchedProfile: any = await applyAxiosRequest({
-    headers: {},
-    apiEndpoint: API.getProfile(),
-    method: 'GET',
-    data: null
-  });
+  const bootstrap = await getUserBootstrapData();
 
-  let profile = fetchedProfile?.data;
-  let userPermissions = profile?.user?.role?.permissions
+  if (bootstrap.shouldLogout) {
+    return <Logout />
+  }
+
+  const profile = bootstrap.profile;
+  const userPermissions = profile?.user?.role?.permissions;
+  let refreshTokenPayload = bootstrap.refreshTokenData ?? null;
 
   const fetchedMembers: any = await applyAxiosRequest({
     headers: {},
@@ -63,10 +64,12 @@ const MembersPage = async ({ searchParams }: UrlParamsProps) => {
   });
 
   /** REFRESH TOKEN CHECK */
-  let refreshTokenRes = null; 
-  
-  if (fetchedMembers?.status == 401 || fetchedRoles?.status == 401) {
-    refreshTokenRes = await applyAxiosRequest({
+  if (
+    fetchedMembers?.status == 401 ||
+    fetchedRoles?.status == 401 ||
+    fetchedStats?.status == 401
+  ) {
+    const refreshResponse = await applyAxiosRequest({
       headers: { },
       apiEndpoint: API?.refreshToken(),
       method: 'POST',
@@ -75,9 +78,11 @@ const MembersPage = async ({ searchParams }: UrlParamsProps) => {
       }
     });
 
-    if (!(refreshTokenRes?.status == 200 || refreshTokenRes?.status == 201)) {
+    if (!(refreshResponse?.status == 200 || refreshResponse?.status == 201)) {
       return <Logout />
     }
+
+    refreshTokenPayload = refreshResponse?.data ?? refreshTokenPayload;
   }
 
   let roles = fetchedRoles?.data;
@@ -150,11 +155,11 @@ const MembersPage = async ({ searchParams }: UrlParamsProps) => {
     <section className='flex flex-col h-full  w-full pt-[56px]'>
       {/* REFRESH TOKEN SECTION */}
       {
-          refreshTokenRes?.data &&
-          <RefreshStoredToken 
-            data={refreshTokenRes?.data} 
-          />
-        }
+        refreshTokenPayload &&
+        <RefreshStoredToken 
+          data={refreshTokenPayload} 
+        />
+      }
 
       {
         /* SSR TOAST ERROR */
diff --git a/apps/web/app/(webapp)/app/team/roles/(components)/RolesTable.tsx b/apps/web/app/(webapp)/app/team/roles/(components)/RolesTable.tsx
index ebb1546e..91870904 100644
--- a/apps/web/app/(webapp)/app/team/roles/(components)/RolesTable.tsx
+++ b/apps/web/app/(webapp)/app/team/roles/(components)/RolesTable.tsx
@@ -5,7 +5,7 @@ import { ROLES_ACTIONS_DATA } from '@/data/rolesData'
 import { TableProps } from '@/types/webappTypes/appTypes'
 import { createColumnHelper } from '@tanstack/react-table'
 import { useRouter } from 'next/navigation'
-import React, { FormEvent, useEffect, useState } from 'react'
+import React, { FormEvent, useCallback, useEffect, useState } from 'react'
 import * as API from '@/config/endpoints';
 import { ActivateDeactivateRole, EditRolePage, ViewRolePage } from '.'
 import clientAxiosRequest from '@/hooks/clientAxiosRequest'
@@ -50,7 +50,7 @@ const RolesTable = ({
     setPermissions([]);
   };
 
-  const fetchProfile = async () => {
+  const fetchProfile = useCallback(async () => {
     const result: any = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getProfile(),
@@ -59,13 +59,13 @@ const RolesTable = ({
       noToast: true
     });
     setProfile(result?.data);
-  }
+  }, []);
 
   useEffect(() => {
     fetchProfile();
-  }, []);
+  }, [fetchProfile]);
 
-  async function FetchData() {
+  const fetchRolePermissions = useCallback(async () => {
     const result = await clientAxiosRequest({
       headers: {},
       apiEndpoint: API.getRolePermission({ id: role?.id }),
@@ -76,11 +76,15 @@ const RolesTable = ({
 
     let permits = dataToPermissions(result?.data?.map((data: any) => data), 'answer');
     setPermissions(permits);
-  }
+  }, [role?.id]);
 
   useEffect(() => {
-    role?.id && FetchData();
-  }, [role, refresh]);
+    if (role?.id) {
+      fetchRolePermissions();
+    } else {
+      setPermissions([]);
+    }
+  }, [fetchRolePermissions, refresh, role?.id]);
 
   const getAction = (status: string) => {
     return actions.filter(action => {
diff --git a/apps/web/app/(webapp)/app/team/roles/page.tsx b/apps/web/app/(webapp)/app/team/roles/page.tsx
index 17a5d10d..8a16f1d2 100644
--- a/apps/web/app/(webapp)/app/team/roles/page.tsx
+++ b/apps/web/app/(webapp)/app/team/roles/page.tsx
@@ -10,6 +10,7 @@ import { ToastMessage } from '@/app/(webapp)/(components)';
 import { findPermissionSlug } from '@/utils/findPermissionSlug';
 import { RefreshStoredToken } from '@/components/globalComponents';
 import { getCookies } from '@/config/cookies';
+import { getUserBootstrapData } from '@/server/getUserBootstrapData';
 
 const RolesPage = async ({ searchParams }: UrlParamsProps) => {
   const status = searchParams?.status || ''
@@ -19,12 +20,15 @@ const RolesPage = async ({ searchParams }: UrlParamsProps) => {
   const page = Number(searchParams?.page) || 1
   const role = searchParams?.role || ''
 
-  const fetchedProfile: any = await applyAxiosRequest({
-    headers: {},
-    apiEndpoint: API.getProfile(),
-    method: 'GET',
-    data: null
-  });
+  const bootstrap = await getUserBootstrapData();
+
+  if (bootstrap.shouldLogout) {
+    return <Logout />
+  }
+
+  const profile = bootstrap.profile;
+  const userPermissions = profile?.user?.role?.permissions;
+  let refreshTokenPayload = bootstrap.refreshTokenData ?? null;
 
   const roles: any = await applyAxiosRequest({
     headers: {},
@@ -46,10 +50,8 @@ const RolesPage = async ({ searchParams }: UrlParamsProps) => {
   });
 
   /** REFRESH TOKEN CHECK */
-  let refreshTokenRes = null; 
-  
   if (permissions?.status == 401 || roles?.status == 401) {
-    refreshTokenRes = await applyAxiosRequest({
+    const refreshResponse = await applyAxiosRequest({
       headers: { },
       apiEndpoint: API?.refreshToken(),
       method: 'POST',
@@ -58,13 +60,13 @@ const RolesPage = async ({ searchParams }: UrlParamsProps) => {
       }
     });
 
-    if (!(refreshTokenRes?.status == 200 || refreshTokenRes?.status == 201)) {
+    if (!(refreshResponse?.status == 200 || refreshResponse?.status == 201)) {
       return <Logout />
     }
+
+    refreshTokenPayload = refreshResponse?.data ?? refreshTokenPayload;
   }
 
-  let profile = fetchedProfile?.data;
-  let userPermissions = profile?.user?.role?.permissions;
   let createRolePermit = findPermissionSlug(userPermissions, 'create-role')
   let permission_list = permissions?.data;
   let meta_data = roles?.meta_data;
@@ -103,11 +105,11 @@ const RolesPage = async ({ searchParams }: UrlParamsProps) => {
     <section className='flex flex-col h-full w-full'>
       {/* REFRESH TOKEN SECTION */}
       {
-          refreshTokenRes?.data &&
-          <RefreshStoredToken 
-            data={refreshTokenRes?.data} 
-          />
-        }
+        refreshTokenPayload &&
+        <RefreshStoredToken 
+          data={refreshTokenPayload} 
+        />
+      }
       {
         /* SSR TOAST ERROR */
         (roles?.status != 200 && roles?.status != 201) && 
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index e69663dd..0ebdf4b0 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -2,6 +2,7 @@ import './globals.css'
 import type { Metadata } from 'next'
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { ReactQueryProvider } from '@/components/providers/ReactQueryProvider';
 
 export const metadata: Metadata = {
   title: 'Aperta',
@@ -16,8 +17,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <ToastContainer autoClose={5000} position='top-right' closeOnClick />
-        {children}
+        <ReactQueryProvider>
+          <ToastContainer autoClose={5000} position='top-right' closeOnClick />
+          {children}
+        </ReactQueryProvider>
       </body>
     </html>
   )
diff --git a/apps/web/components/forms/SearchBar.tsx b/apps/web/components/forms/SearchBar.tsx
index d50d6d41..30ed5bfb 100644
--- a/apps/web/components/forms/SearchBar.tsx
+++ b/apps/web/components/forms/SearchBar.tsx
@@ -4,7 +4,8 @@ import { InputElement } from '@/components/forms'
 import { SearchBarProps } from '@/types/componentsTypes/forms';
 import { deleteSearchParams, updateSearchParams } from '@/utils/searchParams';
 import { useRouter } from 'next/navigation';
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
+import { useDebounce } from '@/hooks';
 
 const SearchBar = ({
   placeholder,
@@ -16,17 +17,24 @@ const SearchBar = ({
 
   const router = useRouter();
   const [search, setSearch] = useState(searchQuery);
+  const debouncedSearch = useDebounce(search, 500);
 
-  const handleChange = (value: string) => {
-    if (value) {
-      setSearch(value);
-      const url = updateSearchParams((name || 'search_query'), value);
-      router.push(url);
-    } else {
-      setSearch(value);
-      const url = deleteSearchParams((name || 'search_query'));
-      router.push(url)
+  // Effect to handle URL updates when debounced value changes
+  useEffect(() => {
+    // Only update if the debounced value is different from the initial searchQuery
+    if (debouncedSearch !== searchQuery) {
+      if (debouncedSearch) {
+        const url = updateSearchParams((name || 'search_query'), debouncedSearch);
+        router.push(url);
+      } else {
+        const url = deleteSearchParams((name || 'search_query'));
+        router.push(url);
+      }
     }
+  }, [debouncedSearch, name, router, searchQuery]);
+
+  const handleChange = (value: string) => {
+    setSearch(value);
   };
 
   return (
diff --git a/apps/web/components/globalComponents/Pagination.tsx b/apps/web/components/globalComponents/Pagination.tsx
new file mode 100644
index 00000000..814c13c4
--- /dev/null
+++ b/apps/web/components/globalComponents/Pagination.tsx
@@ -0,0 +1,175 @@
+'use client';
+
+import { Button } from '@/components/globalComponents';
+import { SelectElement } from '@/components/forms';
+import { updateSearchParams } from '@/utils/searchParams';
+import { useRouter } from 'next/navigation';
+import React, { useMemo, useCallback, useEffect } from 'react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  totalItems: number;
+  itemsPerPage: number;
+  itemsInCurrentPage: number;
+  showPageNumbers?: boolean;
+  maxPageButtons?: number;
+  enableKeyboardNav?: boolean;
+}
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  totalItems,
+  itemsPerPage,
+  itemsInCurrentPage,
+  showPageNumbers = true,
+  maxPageButtons = 5,
+  enableKeyboardNav = true,
+}: PaginationProps) => {
+  const router = useRouter();
+
+  const pageNumbers = useMemo(() => {
+    const pages: (number | string)[] = [];
+    const halfButtons = Math.floor(maxPageButtons / 2);
+    
+    let startPage = Math.max(1, currentPage - halfButtons);
+    let endPage = Math.min(totalPages, currentPage + halfButtons);
+    
+    if (currentPage - halfButtons < 1) {
+      endPage = Math.min(totalPages, endPage + (halfButtons - currentPage + 1));
+    }
+    
+    if (currentPage + halfButtons > totalPages) {
+      startPage = Math.max(1, startPage - (currentPage + halfButtons - totalPages));
+    }
+    
+    if (startPage > 1) {
+      pages.push(1);
+      if (startPage > 2) pages.push('...');
+    }
+    
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) pages.push('...');
+      pages.push(totalPages);
+    }
+    
+    return pages;
+  }, [currentPage, totalPages, maxPageButtons]);
+
+  const handlePageChange = useCallback((page: number) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      const url = updateSearchParams('page', `${page}`);
+      router.push(url);
+    }
+  }, [currentPage, totalPages, router]);
+
+  const handleRowsChange = useCallback((rows: string) => {
+    const url = updateSearchParams('rows', rows);
+    router.push(url);
+  }, [router]);
+
+  useEffect(() => {
+    if (!enableKeyboardNav) return;
+
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+
+      if (e.key === 'ArrowLeft' && currentPage > 1) {
+        handlePageChange(currentPage - 1);
+      } else if (e.key === 'ArrowRight' && currentPage < totalPages) {
+        handlePageChange(currentPage + 1);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, [currentPage, totalPages, handlePageChange, enableKeyboardNav]);
+
+  const rowOptions = useMemo(() => [
+    { label: '10', value: '10' },
+    { label: '20', value: '20' },
+    { label: '50', value: '50' },
+    { label: '100', value: '100' },
+  ], []);
+
+  if (totalPages === 0) return null;
+
+  return (
+    <div className='w-full flex-wrap flex items-center justify-between gap-5'>
+      <div className='text-o-text-darkest text-f14'>
+        Showing {itemsInCurrentPage} of {totalItems} entries
+      </div>
+
+      <div className='w-fit gap-[10px] flex items-center'>
+        <div className='gap-[8px] flex items-center text-o-text-darkest text-f14'>
+          Rows per page
+          <SelectElement
+            name='rows'
+            options={rowOptions}
+            value={itemsPerPage.toString()}
+            containerStyle='!w-fit cursor-pointer'
+            small
+            removeSearch
+            optionStyle='!bottom-[40px]'
+            forFilter
+            changeValue={handleRowsChange}
+          />
+        </div>
+
+        <div className='w-fit flex items-center gap-1'>
+          <Button 
+            outlined
+            effect={() => handlePageChange(currentPage - 1)}
+            small
+            title='Previous'
+            disabled={currentPage === 1}
+            titleStyle='group-hover:text-[#274079]'
+            containerStyle='!w-fit !rounded-[4px] transition-all'
+          />
+
+          {showPageNumbers && pageNumbers.map((page, index) => (
+            page === '...' ? (
+              <span 
+                key={`ellipsis-${index}`} 
+                className='px-2 text-o-text-darkest text-f14'
+              >
+                ...
+              </span>
+            ) : (
+              <Button
+                key={page}
+                outlined={currentPage !== page}
+                effect={() => handlePageChange(page as number)}
+                small
+                title={page.toString()}
+                titleStyle={currentPage === page ? 'text-white' : 'group-hover:text-[#274079]'}
+                containerStyle={`!w-[36px] !rounded-[4px] transition-all ${
+                  currentPage === page ? '!bg-[#274079] !border-[#274079]' : ''
+                }`}
+              />
+            )
+          ))}
+
+          <Button 
+            outlined
+            effect={() => handlePageChange(currentPage + 1)}
+            small
+            title='Next'
+            disabled={currentPage === totalPages}
+            titleStyle='group-hover:text-[#274079]'
+            containerStyle='!w-fit !rounded-[4px] transition-all'
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;
diff --git a/apps/web/components/globalComponents/RefreshStoredToken.tsx b/apps/web/components/globalComponents/RefreshStoredToken.tsx
index a20ec005..d65b5d66 100644
--- a/apps/web/components/globalComponents/RefreshStoredToken.tsx
+++ b/apps/web/components/globalComponents/RefreshStoredToken.tsx
@@ -1,11 +1,30 @@
 'use client'
 
-import { setJsCookies } from '@/config/jsCookie';
+import { useEffect } from 'react';
+import { useAuthStore } from '@/stores';
 
-const RefreshStoredToken = ({ data }: { data: any }) => {
-  setJsCookies('aperta-user-accessToken', data?.accessToken);
-  setJsCookies('aperta-user-refreshToken', data?.refreshToken);
-  return null
+interface RefreshStoredTokenProps {
+  data: {
+    accessToken?: string | null;
+    refreshToken?: string | null;
+  } | null;
+}
+
+const RefreshStoredToken = ({ data }: RefreshStoredTokenProps) => {
+  const setTokens = useAuthStore((state) => state.setTokens);
+
+  useEffect(() => {
+    if (!data?.accessToken && !data?.refreshToken) {
+      return;
+    }
+
+    setTokens({
+      accessToken: data?.accessToken ?? null,
+      refreshToken: data?.refreshToken ?? null,
+    });
+  }, [data, setTokens]);
+
+  return null;
 }
 
 export default RefreshStoredToken
\ No newline at end of file
diff --git a/apps/web/components/globalComponents/index.ts b/apps/web/components/globalComponents/index.ts
index c6aacb39..73f597a8 100644
--- a/apps/web/components/globalComponents/index.ts
+++ b/apps/web/components/globalComponents/index.ts
@@ -2,12 +2,14 @@ import Button from "./Button";
 import Loader from "./Loader";
 import LinkButton from "./LinkButton";
 import OutsideClicker from "./OutsideClicker";
-import RefreshStoredToken from './RefreshStoredToken'
+import RefreshStoredToken from './RefreshStoredToken';
+import Pagination from './Pagination';
 
 export {
   Button,
   Loader,
   LinkButton,
   OutsideClicker,
-  RefreshStoredToken
+  RefreshStoredToken,
+  Pagination
 }
\ No newline at end of file
diff --git a/apps/web/components/providers/ReactQueryProvider.tsx b/apps/web/components/providers/ReactQueryProvider.tsx
new file mode 100644
index 00000000..c45007e0
--- /dev/null
+++ b/apps/web/components/providers/ReactQueryProvider.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState, type ReactNode } from 'react';
+
+export function ReactQueryProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5 * 60 * 1000, // 5 minutes
+            gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)
+            refetchOnWindowFocus: false,
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {process.env.NODE_ENV === 'development' && (
+        <ReactQueryDevtools initialIsOpen={false} />
+      )}
+    </QueryClientProvider>
+  );
+}
diff --git a/apps/web/config/axios.ts b/apps/web/config/axios.ts
index c5da69e8..42dd507e 100644
--- a/apps/web/config/axios.ts
+++ b/apps/web/config/axios.ts
@@ -10,6 +10,11 @@ axios.interceptors.request.use(
     if (!request.headers.Authorization) {
       request.headers.Authorization = `Bearer ${token}`;
     }
+    
+    if (request.method?.toLowerCase() === 'get') {
+      request.headers['Cache-Control'] = 'max-age=180, stale-while-revalidate=300'; // 3 min fresh, 5 min stale
+    }
+    
     return request;
   },
   (error) => {
diff --git a/apps/web/hooks/clientAxiosRequest.ts b/apps/web/hooks/clientAxiosRequest.ts
index 54f8cf9a..2221170a 100644
--- a/apps/web/hooks/clientAxiosRequest.ts
+++ b/apps/web/hooks/clientAxiosRequest.ts
@@ -1,10 +1,11 @@
 'use client'
 
-import { getJsCookies, setJsCookies, removeJsCookies } from "@/config/jsCookie";
+import { getJsCookies } from "@/config/jsCookie";
 import { applyAxiosRequest } from ".";
 import { HttpRequestProps } from "@/types/configTypes";
 import { toast } from "react-toastify";
 import * as API from '@/config/endpoints';
+import { useAuthStore } from '@/stores';
 
 const clientAxiosRequest = async ({
   headers,
@@ -13,8 +14,9 @@ const clientAxiosRequest = async ({
   data,
   noToast,
 }: HttpRequestProps) => {
-  let token = getJsCookies('aperta-user-accessToken');
-  const refreshToken = getJsCookies('aperta-user-refreshToken');
+  const authState = useAuthStore.getState();
+  let token = authState.accessToken || getJsCookies('aperta-user-accessToken');
+  let refreshToken = authState.refreshToken || getJsCookies('aperta-user-refreshToken');
 
   try {
     let res: any = await applyAxiosRequest({
@@ -43,8 +45,12 @@ const clientAxiosRequest = async ({
 
         if (refreshTokenRes?.status == 200 || refreshTokenRes?.status == 201) {
           token = refreshTokenRes?.data?.accessToken;
-          setJsCookies('aperta-user-accessToken', token);
-          setJsCookies('aperta-user-refreshToken', refreshTokenRes?.data?.refreshToken);
+          refreshToken = refreshTokenRes?.data?.refreshToken;
+
+          useAuthStore.getState().setTokens({
+            accessToken: token,
+            refreshToken,
+          });
 
           res = await applyAxiosRequest({
             headers: {
@@ -64,7 +70,7 @@ const clientAxiosRequest = async ({
             typeof refreshTokenRes?.message == 'string' ?
             refreshTokenRes?.message : JSON.stringify(refreshTokenRes?.message)
           );
-          removeJsCookies('aperta-user-accessToken');
+          useAuthStore.getState().clearTokens();
           window.location.href = '/';
         }
     } else {
@@ -80,6 +86,7 @@ const clientAxiosRequest = async ({
       typeof err?.message == 'string' ?
       err?.message : JSON.stringify(err?.message)
     );
+    useAuthStore.getState().clearTokens(false);
     return ({
       message: err?.message || err,
       status: null,
diff --git a/apps/web/hooks/index.ts b/apps/web/hooks/index.ts
index c89e81f2..0fb0fdf4 100644
--- a/apps/web/hooks/index.ts
+++ b/apps/web/hooks/index.ts
@@ -1,9 +1,19 @@
 import useExportExcel from "./useExportExcel";
 import useServerAction from "./useServerAction";
 import applyAxiosRequest from "./applyAxiosRequest";
+import { useDebounce } from "./useDebounce";
+import {
+  useProfileQuery,
+  useCompanyDetailsQuery,
+  useSettingsQuery,
+} from "./queries/userQueries";
 
 export {
   useExportExcel,
   useServerAction,
-  applyAxiosRequest
+  applyAxiosRequest,
+  useDebounce,
+  useProfileQuery,
+  useCompanyDetailsQuery,
+  useSettingsQuery,
 }
\ No newline at end of file
diff --git a/apps/web/hooks/queries/userQueries.ts b/apps/web/hooks/queries/userQueries.ts
new file mode 100644
index 00000000..e23ac457
--- /dev/null
+++ b/apps/web/hooks/queries/userQueries.ts
@@ -0,0 +1,110 @@
+"use client";
+
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import clientAxiosRequest from '@/hooks/clientAxiosRequest';
+import * as API from '@/config/endpoints';
+import { useUserStore } from '@/stores';
+import {
+  profileQueryKey,
+  companyDetailsQueryKey,
+  settingsQueryKey,
+} from './userQueryKeys';
+
+async function fetchProfile(): Promise<any> {
+  const response = await clientAxiosRequest({
+    headers: {},
+    apiEndpoint: API.getProfile(),
+    method: 'GET',
+    data: null,
+    noToast: true,
+  });
+
+  return response?.data ?? null;
+}
+
+async function fetchCompanyDetails(): Promise<any> {
+  const response = await clientAxiosRequest({
+    headers: {},
+    apiEndpoint: API.getCompanyDetails(),
+    method: 'GET',
+    data: null,
+    noToast: true,
+  });
+
+  return response?.data ?? null;
+}
+
+async function fetchSettings(type: string = 'general'): Promise<any> {
+  const response = await clientAxiosRequest({
+    headers: {},
+    apiEndpoint: API.getSettings({ type }),
+    method: 'GET',
+    data: null,
+    noToast: true,
+  });
+
+  return response?.data ?? null;
+}
+
+export function useProfileQuery() {
+  const initialProfile = useUserStore((state) => state.profile);
+  const setProfile = useUserStore((state) => state.setProfile);
+
+  const query = useQuery({
+    queryKey: profileQueryKey,
+    queryFn: fetchProfile,
+    initialData: initialProfile ?? undefined,
+    initialDataUpdatedAt: initialProfile ? Date.now() : undefined,
+  });
+
+  useEffect(() => {
+    if (query.data !== undefined) {
+      setProfile(query.data ?? null);
+    }
+  }, [query.data, setProfile]);
+
+  return query;
+}
+
+export function useCompanyDetailsQuery() {
+  const initialCompanyDetails = useUserStore((state) => state.companyDetails);
+  const setCompanyDetails = useUserStore((state) => state.setCompanyDetails);
+
+  const query = useQuery({
+    queryKey: companyDetailsQueryKey,
+    queryFn: fetchCompanyDetails,
+    initialData: initialCompanyDetails ?? undefined,
+    initialDataUpdatedAt: initialCompanyDetails ? Date.now() : undefined,
+  });
+
+  useEffect(() => {
+    if (query.data !== undefined) {
+      setCompanyDetails(query.data ?? null);
+    }
+  }, [query.data, setCompanyDetails]);
+
+  return query;
+}
+
+export function useSettingsQuery(type: string = 'general') {
+  const initialSettings = useUserStore((state) =>
+    type === 'general' ? state.settings : undefined
+  );
+  const setSettings = useUserStore((state) => state.setSettings);
+
+  const query = useQuery({
+    queryKey: settingsQueryKey(type),
+    queryFn: () => fetchSettings(type),
+    initialData: initialSettings ?? undefined,
+    initialDataUpdatedAt: initialSettings ? Date.now() : undefined,
+  });
+
+  useEffect(() => {
+    if (type === 'general' && query.data !== undefined) {
+      setSettings(query.data ?? null);
+    }
+  }, [query.data, setSettings, type]);
+
+  return query;
+}
diff --git a/apps/web/hooks/queries/userQueryKeys.ts b/apps/web/hooks/queries/userQueryKeys.ts
new file mode 100644
index 00000000..27f06b17
--- /dev/null
+++ b/apps/web/hooks/queries/userQueryKeys.ts
@@ -0,0 +1,25 @@
+import { type QueryClient } from '@tanstack/react-query';
+
+export const profileQueryKey = ['user', 'profile'] as const;
+export const companyDetailsQueryKey = ['user', 'company-details'] as const;
+export const settingsQueryKey = (type: string = 'general') =>
+  ['user', 'settings', type] as const;
+
+export function primeProfileQuery(queryClient: QueryClient, data: any) {
+  queryClient.setQueryData(profileQueryKey, data ?? null);
+}
+
+export function primeCompanyDetailsQuery(
+  queryClient: QueryClient,
+  data: any
+) {
+  queryClient.setQueryData(companyDetailsQueryKey, data ?? null);
+}
+
+export function primeSettingsQuery(
+  queryClient: QueryClient,
+  data: any,
+  type: string = 'general'
+) {
+  queryClient.setQueryData(settingsQueryKey(type), data ?? null);
+}
diff --git a/apps/web/hooks/useDebounce.ts b/apps/web/hooks/useDebounce.ts
new file mode 100644
index 00000000..6ebc5703
--- /dev/null
+++ b/apps/web/hooks/useDebounce.ts
@@ -0,0 +1,27 @@
+'use client'
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook that debounces a value
+ * @param value - The value to debounce
+ * @param delay - The delay in milliseconds (default: 500ms)
+ * @returns The debounced value
+ */
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    // Set up the timeout
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    // Clean up the timeout if value changes before delay
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 86503537..e94c7a18 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -4,6 +4,58 @@ const nextConfig = {
     serverActions: true,
   },
   output: "standalone",
+  
+  // Image optimization
+  images: {
+    formats: ['image/webp', 'image/avif'],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+    minimumCacheTTL: 60 * 60 * 24 * 365, // 1 year
+  },
+  
+  // Compiler optimizations
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production' ? {
+      exclude: ['error', 'warn'],
+    } : false,
+  },
+  
+  swcMinify: true,
+  
+  // Headers for caching static assets
+  async headers() {
+    return [
+      {
+        source: '/icons/:path*',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=31536000, immutable',
+          },
+        ],
+      },
+      {
+        source: '/images/:path*',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=31536000, immutable',
+          },
+        ],
+      },
+    ];
+  },
+  
+  // Redirects for better performance
+  async redirects() {
+    return [
+      {
+        source: '/app',
+        destination: '/app/home/dashboard',
+        permanent: true,
+      },
+    ];
+  },
 }
 
 module.exports = nextConfig
diff --git a/apps/web/package.json b/apps/web/package.json
index 82bcc6f9..99cbb397 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,6 +11,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.90.5",
     "@tanstack/react-table": "^8.10.7",
     "@types/file-saver": "^2.0.6",
     "@types/google-libphonenumber": "^7.4.30",
@@ -18,11 +19,11 @@
     "ace-builds": "^1.32.3",
     "axios": "^1.6.1",
     "chart.js": "^4.4.0",
+    "date-fns": "^4.1.0",
     "file-saver": "^2.0.5",
     "framer-motion": "^10.16.4",
     "google-libphonenumber": "^3.2.34",
     "js-cookie": "^3.0.5",
-    "moment": "^2.29.4",
     "next": "13.5.6",
     "qrcode.react": "^3.1.0",
     "react": "^18",
@@ -33,9 +34,11 @@
     "react-tailwindcss-datepicker": "1.6.6",
     "react-toastify": "^9.1.3",
     "xlsx": "^0.18.5",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.90.2",
     "@types/node": "^24",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/apps/web/server/getUserBootstrapData.ts b/apps/web/server/getUserBootstrapData.ts
new file mode 100644
index 00000000..8bfe1227
--- /dev/null
+++ b/apps/web/server/getUserBootstrapData.ts
@@ -0,0 +1,68 @@
+import { cache } from 'react';
+import * as API from '@/config/endpoints';
+import { applyAxiosRequest } from '@/hooks';
+import { getCookies } from '@/config/cookies';
+
+interface UserBootstrapData {
+  profile: any;
+  companyDetails: any;
+  settings: any;
+  refreshTokenData: any;
+  shouldLogout: boolean;
+}
+
+export const getUserBootstrapData = cache(async (): Promise<UserBootstrapData> => {
+  const [fetchedDetails, fetchedProfile, fetchedSettings] = await Promise.all([
+    applyAxiosRequest({
+      headers: {},
+      apiEndpoint: API.getCompanyDetails(),
+      method: 'GET',
+      data: null,
+    }),
+    applyAxiosRequest({
+      headers: {},
+      apiEndpoint: API.getProfile(),
+      method: 'GET',
+      data: null,
+    }),
+    applyAxiosRequest({
+      headers: {},
+      apiEndpoint: API.getSettings({
+        type: 'general',
+      }),
+      method: 'GET',
+      data: null,
+    }),
+  ]);
+
+  let refreshTokenRes: any = null;
+
+  if (fetchedDetails?.status === 401 || fetchedProfile?.status === 401) {
+    refreshTokenRes = await applyAxiosRequest({
+      headers: {},
+      apiEndpoint: API.refreshToken(),
+      method: 'POST',
+      data: {
+        refreshToken: `${await getCookies('aperta-user-refreshToken')}`,
+      },
+    });
+
+    if (!(refreshTokenRes?.status === 200 || refreshTokenRes?.status === 201)) {
+      return {
+        profile: null,
+        companyDetails: null,
+        settings: null,
+        refreshTokenData: null,
+        shouldLogout: true,
+      };
+    }
+  }
+
+  return {
+    profile: fetchedProfile?.data ?? null,
+    companyDetails: fetchedDetails?.data ?? null,
+    settings: fetchedSettings?.data ?? null,
+    refreshTokenData: refreshTokenRes?.data ?? null,
+    shouldLogout: false,
+  };
+});
diff --git a/apps/web/stores/index.ts b/apps/web/stores/index.ts
new file mode 100644
index 00000000..61e1e4f7
--- /dev/null
+++ b/apps/web/stores/index.ts
@@ -0,0 +1,3 @@
+export { useUserStore } from './useUserStore';
+export { useUIStore } from './useUIStore';
+export { useAuthStore } from './useAuthStore';
diff --git a/apps/web/stores/useAuthStore.ts b/apps/web/stores/useAuthStore.ts
new file mode 100644
index 00000000..efface90
--- /dev/null
+++ b/apps/web/stores/useAuthStore.ts
@@ -0,0 +1,100 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage, StateStorage } from 'zustand/middleware';
+import { getJsCookies, setJsCookies, removeJsCookies } from '@/config/jsCookie';
+
+interface TokenPayload {
+  accessToken?: string | null;
+  refreshToken?: string | null;
+  persistCookies?: boolean;
+}
+
+interface AuthState {
+  accessToken: string | null;
+  refreshToken: string | null;
+  isAuthenticated: boolean;
+  lastSyncedAt: number | null;
+  setTokens: (payload: TokenPayload) => void;
+  clearTokens: (persistCookies?: boolean) => void;
+  hydrateFromCookies: () => void;
+}
+
+const cookieStorage: StateStorage = {
+  getItem: (name: string): string | null => {
+    return getJsCookies(name) || null;
+  },
+  setItem: (name: string, value: string): void => {
+    setJsCookies(name, value);
+  },
+  removeItem: (name: string): void => {
+    removeJsCookies(name);
+  },
+};
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set, get) => ({
+      accessToken: null,
+      refreshToken: null,
+      isAuthenticated: false,
+      lastSyncedAt: null,
+      setTokens: ({ accessToken, refreshToken, persistCookies = true }) => {
+        const nextAccess = accessToken ?? null;
+        const nextRefresh = refreshToken ?? null;
+
+        set({
+          accessToken: nextAccess,
+          refreshToken: nextRefresh,
+          isAuthenticated: Boolean(nextAccess),
+          lastSyncedAt: Date.now(),
+        });
+
+        if (persistCookies) {
+          if (nextAccess) {
+            setJsCookies('aperta-user-accessToken', nextAccess);
+          } else {
+            removeJsCookies('aperta-user-accessToken');
+          }
+
+          if (nextRefresh) {
+            setJsCookies('aperta-user-refreshToken', nextRefresh);
+          } else {
+            removeJsCookies('aperta-user-refreshToken');
+          }
+        }
+      },
+      clearTokens: (persistCookies = true) => {
+        set({
+          accessToken: null,
+          refreshToken: null,
+          isAuthenticated: false,
+          lastSyncedAt: Date.now(),
+        });
+
+        if (persistCookies) {
+          removeJsCookies('aperta-user-accessToken');
+          removeJsCookies('aperta-user-refreshToken');
+        }
+      },
+      hydrateFromCookies: () => {
+        const accessToken = getJsCookies('aperta-user-accessToken') || null;
+        const refreshToken = getJsCookies('aperta-user-refreshToken') || null;
+
+        set({
+          accessToken,
+          refreshToken,
+          isAuthenticated: Boolean(accessToken),
+          lastSyncedAt: Date.now(),
+        });
+      },
+    }),
+    {
+      name: 'aperta-auth-store',
+      storage: createJSONStorage(() => cookieStorage),
+      partialize: (state) => ({
+        accessToken: state.accessToken,
+        refreshToken: state.refreshToken,
+        lastSyncedAt: state.lastSyncedAt,
+      }),
+    }
+  )
+);
diff --git a/apps/web/stores/useUIPreferencesStore.ts b/apps/web/stores/useUIPreferencesStore.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/web/stores/useUIStore.ts b/apps/web/stores/useUIStore.ts
new file mode 100644
index 00000000..d492ab82
--- /dev/null
+++ b/apps/web/stores/useUIStore.ts
@@ -0,0 +1,45 @@
+import { create } from 'zustand';
+
+interface UIState {
+  isNotificationOpen: boolean;
+  isModalOpen: boolean;
+  modalType: string;
+  isSidebarCollapsed: boolean;
+  
+  // Actions
+  toggleNotification: () => void;
+  openModal: (type: string) => void;
+  closeModal: () => void;
+  toggleSidebar: () => void;
+  setNotificationOpen: (isOpen: boolean) => void;
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  isNotificationOpen: false,
+  isModalOpen: false,
+  modalType: '',
+  isSidebarCollapsed: false,
+
+  // Actions
+  toggleNotification: () => set((state) => ({ 
+    isNotificationOpen: !state.isNotificationOpen 
+  })),
+  
+  openModal: (type) => set({ 
+    isModalOpen: true, 
+    modalType: type 
+  }),
+  
+  closeModal: () => set({ 
+    isModalOpen: false, 
+    modalType: '' 
+  }),
+  
+  toggleSidebar: () => set((state) => ({ 
+    isSidebarCollapsed: !state.isSidebarCollapsed 
+  })),
+  
+  setNotificationOpen: (isOpen) => set({ 
+    isNotificationOpen: isOpen 
+  }),
+}));
diff --git a/apps/web/stores/useUserStore.ts b/apps/web/stores/useUserStore.ts
new file mode 100644
index 00000000..5d8e5bce
--- /dev/null
+++ b/apps/web/stores/useUserStore.ts
@@ -0,0 +1,136 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage, StateStorage } from 'zustand/middleware';
+import { getJsCookies, setJsCookies, removeJsCookies } from '@/config/jsCookie';
+
+interface UserProfile {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  companyRole?: string;
+  user?: {
+    role?: {
+      parent?: {
+        slug?: string;
+      };
+      permissions?: any[];
+    };
+  };
+}
+
+interface CompanyDetails {
+  id?: string;
+  name?: string;
+  type?: string;
+  isVerified?: boolean;
+  kybStatus?: string;
+  status?: string;
+  primaryUser?: any;
+}
+
+interface Settings {
+  [key: string]: any;
+}
+
+interface UserState {
+  profile: UserProfile | null;
+  companyDetails: CompanyDetails | null;
+  settings: Settings | null;
+  isLoading: boolean;
+  error: string | null;
+  
+  setProfile: (profile: UserProfile | null) => void;
+  setCompanyDetails: (details: CompanyDetails | null) => void;
+  setSettings: (settings: Settings | null) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  clearUser: () => void;
+  
+  getUserType: () => string | undefined;
+  getFullName: () => string;
+  getAvatarAlt: () => string;
+  isApiConsumer: () => boolean;
+  isApiProvider: () => boolean;
+}
+
+const cookieStorage: StateStorage = {
+  getItem: (name: string): string | null => {
+    return getJsCookies(name) || null;
+  },
+  setItem: (name: string, value: string): void => {
+    setJsCookies(name, value);
+  },
+  removeItem: (name: string): void => {
+    removeJsCookies(name);
+  },
+};
+
+export const useUserStore = create<UserState>()(
+  persist(
+    (set, get) => ({
+      profile: null,
+      companyDetails: null,
+      settings: null,
+      isLoading: false,
+      error: null,
+
+      setProfile: (profile) => set({ profile, error: null }),
+      setCompanyDetails: (details) => set({ companyDetails: details, error: null }),
+      setSettings: (settings) => set({ settings, error: null }),
+      setLoading: (loading) => set({ isLoading: loading }),
+      setError: (error) => set({ error }),
+      clearUser: () => set({ 
+        profile: null, 
+        companyDetails: null, 
+        settings: null,
+        error: null,
+        isLoading: false 
+      }),
+
+      getUserType: () => {
+        const state = get();
+        return state.profile?.user?.role?.parent?.slug;
+      },
+
+      getFullName: () => {
+        const state = get();
+        const firstName = state.profile?.firstName;
+        const lastName = state.profile?.lastName;
+        if (firstName && lastName) {
+          return `${firstName} ${lastName}`;
+        }
+        return state.companyDetails?.name || '';
+      },
+
+      getAvatarAlt: () => {
+        const state = get();
+        const firstName = state.profile?.firstName;
+        const lastName = state.profile?.lastName;
+        
+        if (firstName || lastName) {
+          return `${firstName ? firstName[0] : ''}${lastName ? lastName[0] : ''}`;
+        }
+        
+        return state.companyDetails?.name ? state.companyDetails.name[0] : '';
+      },
+
+      isApiConsumer: () => {
+        const state = get();
+        return state.profile?.user?.role?.parent?.slug === 'api-consumer';
+      },
+
+      isApiProvider: () => {
+        const state = get();
+        return state.profile?.user?.role?.parent?.slug === 'api-provider';
+      },
+    }),
+    {
+      name: 'aperta-user-store',
+      storage: createJSONStorage(() => cookieStorage),
+      partialize: (state) => ({
+        profile: state.profile,
+        companyDetails: state.companyDetails,
+        settings: state.settings,
+      }),
+    }
+  )
+);
diff --git a/apps/web/utils/dateUtils.ts b/apps/web/utils/dateUtils.ts
new file mode 100644
index 00000000..747f4d38
--- /dev/null
+++ b/apps/web/utils/dateUtils.ts
@@ -0,0 +1,83 @@
+import { endOfDay, format, isDate, isValid, parseISO, startOfDay } from 'date-fns';
+
+const ISO_WITH_MILLISECONDS = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'";
+
+const toDate = (value: unknown): Date | null => {
+  if (!value && value !== 0) {
+    return null;
+  }
+
+  if (isDate(value)) {
+    return isValid(value) ? value : null;
+  }
+
+  if (typeof value === 'string' && value.trim()) {
+    const parsed = parseISO(value);
+    if (isValid(parsed)) {
+      return parsed;
+    }
+
+    const fallback = new Date(value);
+    return isValid(fallback) ? fallback : null;
+  }
+
+  if (typeof value === 'number') {
+    const numericDate = new Date(value);
+    return isValid(numericDate) ? numericDate : null;
+  }
+
+  return null;
+};
+
+export const formatDateDisplay = (value: unknown, pattern: string): string => {
+  const date = toDate(value);
+
+  if (!date) {
+    return '';
+  }
+
+  return format(date, pattern);
+};
+
+export const formatDateForTable = (value: unknown): string => {
+  return formatDateDisplay(value, 'PPpp');
+};
+
+export const formatDateLabel = (value: unknown): string => {
+  return formatDateDisplay(value, 'PP');
+};
+
+export const formatTimeLabel = (value: unknown): string => {
+  return formatDateDisplay(value, 'hh:mm:ss a');
+};
+
+export const startOfDayIso = (value: unknown): string => {
+  const date = toDate(value);
+
+  if (!date) {
+    return '';
+  }
+
+  return format(startOfDay(date), ISO_WITH_MILLISECONDS);
+};
+
+export const endOfDayIso = (value: unknown): string => {
+  const date = toDate(value);
+
+  if (!date) {
+    return '';
+  }
+
+  return format(endOfDay(date), ISO_WITH_MILLISECONDS);
+};
+
+export const formatDateRangeLabel = (start: unknown, end: unknown): string => {
+  const startLabel = formatDateLabel(start);
+  const endLabel = formatDateLabel(end);
+
+  if (startLabel && endLabel) {
+    return `${startLabel} - ${endLabel}`;
+  }
+
+  return startLabel || endLabel || '';
+};
diff --git a/apps/web/utils/timestampFormatter.ts b/apps/web/utils/timestampFormatter.ts
index 0d9ddfab..3c7a6f66 100644
--- a/apps/web/utils/timestampFormatter.ts
+++ b/apps/web/utils/timestampFormatter.ts
@@ -1,8 +1,16 @@
-import moment from "moment";
+import { formatDateLabel, formatTimeLabel } from "./dateUtils";
 
-export const timestampFormatter = (dt: any) => {
-  const date = moment(dt).format('ll');
-  const time = moment(dt).format('LTS')
+export const timestampFormatter = (dt: unknown) => {
+  const date = formatDateLabel(dt);
+  const time = formatTimeLabel(dt);
 
-  return `${date} @ ${time}`;
+  if (date && time) {
+    return `${date} @ ${time}`;
+  }
+
+  if (date || time) {
+    return date || time || '';
+  }
+
+  return '-';
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8250d3b6..9b75cd4c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -267,6 +267,9 @@ importers:
 
   apps/web:
     dependencies:
+      '@tanstack/react-query':
+        specifier: ^5.90.5
+        version: 5.90.5(react@18.2.0)
       '@tanstack/react-table':
         specifier: ^8.10.7
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -288,6 +291,9 @@ importers:
       chart.js:
         specifier: ^4.4.0
         version: 4.5.0
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -300,9 +306,6 @@ importers:
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
-      moment:
-        specifier: ^2.29.4
-        version: 2.30.1
       next:
         specifier: 13.5.6
         version: 13.5.6(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -336,7 +339,13 @@ importers:
       zod:
         specifier: ^3.22.4
         version: 3.25.76
+      zustand:
+        specifier: ^5.0.8
+        version: 5.0.8(@types/react@18.3.23)(react@18.2.0)
     devDependencies:
+      '@tanstack/react-query-devtools':
+        specifier: ^5.90.2
+        version: 5.90.2(@tanstack/react-query@5.90.5(react@18.2.0))(react@18.2.0)
       '@types/node':
         specifier: ^24
         version: 24.3.0
@@ -1096,6 +1105,23 @@ packages:
   '@swc/helpers@0.5.2':
     resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
 
+  '@tanstack/query-core@5.90.5':
+    resolution: {integrity: sha512-wLamYp7FaDq6ZnNehypKI5fNvxHPfTYylE0m/ZpuuzJfJqhR5Pxg9gvGBHZx4n7J+V5Rg5mZxHHTlv25Zt5u+w==}
+
+  '@tanstack/query-devtools@5.90.1':
+    resolution: {integrity: sha512-GtINOPjPUH0OegJExZ70UahT9ykmAhmtNVcmtdnOZbxLwT7R5OmRztR5Ahe3/Cu7LArEmR6/588tAycuaWb1xQ==}
+
+  '@tanstack/react-query-devtools@5.90.2':
+    resolution: {integrity: sha512-vAXJzZuBXtCQtrY3F/yUNJCV4obT/A/n81kb3+YqLbro5Z2+phdAbceO+deU3ywPw8B42oyJlp4FhO0SoivDFQ==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.90.2
+      react: ^18 || ^19
+
+  '@tanstack/react-query@5.90.5':
+    resolution: {integrity: sha512-pN+8UWpxZkEJ/Rnnj2v2Sxpx1WFlaa9L6a4UO89p6tTQbeo+m0MS8oYDjbggrR8QcTyjKoYWKS3xJQGr3ExT8Q==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@tanstack/react-table@8.21.3':
     resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
@@ -2262,6 +2288,9 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   dateformat@3.0.2:
     resolution: {integrity: sha512-EelsCzH0gMC2YmXuMeaZ3c6md1sUJQxyb1XXc4xaisi/K6qKukqZhKPrEQyRkdNIncgYyLoDTReq0nNyuKerTg==}
 
@@ -3923,6 +3952,7 @@ packages:
   multer@1.4.4-lts.1:
     resolution: {integrity: sha512-WeSGziVj6+Z2/MwQo3GvqzgR+9Uc+qt8SwHKh3gvNPiISKfsMfG4SvCOFYlxxgkXt7yIV2i1yczehm0EOKIxIg==}
     engines: {node: '>= 6.0.0'}
+    deprecated: Multer 1.x is impacted by a number of vulnerabilities, which have been patched in 2.x. You should upgrade to the latest 2.x version.
 
   mute-stream@0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
@@ -4904,11 +4934,12 @@ packages:
   superagent@8.1.2:
     resolution: {integrity: sha512-6WTxW1EB6yCxV5VFOIPQruWGHqc3yI7hEmZK6h+pyk69Lk/Ut7rLUY6W/ONF2MjBuGjvmMiIpsrVJ2vjrHlslA==}
     engines: {node: '>=6.4.0 <13 || >=14'}
-    deprecated: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.net
+    deprecated: Please upgrade to superagent v10.2.2+, see release notes at https://github.com/forwardemail/superagent/releases/tag/v10.2.2 - maintenance is supported by Forward Email @ https://forwardemail.net
 
   supertest@6.3.4:
     resolution: {integrity: sha512-erY3HFDG0dPnhw4U+udPfrzXa4xhSG+n4rxfRuZWCUvjFWwKl+OxWf/7zk50s84/fAAs7vf5QAb9uRa0cCykxw==}
     engines: {node: '>=6.4.0'}
+    deprecated: Please upgrade to supertest v7.1.3+, see release notes at https://github.com/forwardemail/supertest/releases/tag/v7.1.3 - maintenance is supported by Forward Email @ https://forwardemail.net
 
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
@@ -5544,6 +5575,24 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zustand@5.0.8:
+    resolution: {integrity: sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -6582,6 +6631,21 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tanstack/query-core@5.90.5': {}
+
+  '@tanstack/query-devtools@5.90.1': {}
+
+  '@tanstack/react-query-devtools@5.90.2(@tanstack/react-query@5.90.5(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@tanstack/query-devtools': 5.90.1
+      '@tanstack/react-query': 5.90.5(react@18.2.0)
+      react: 18.2.0
+
+  '@tanstack/react-query@5.90.5(react@18.2.0)':
+    dependencies:
+      '@tanstack/query-core': 5.90.5
+      react: 18.2.0
+
   '@tanstack/react-table@8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@tanstack/table-core': 8.21.3
@@ -7924,6 +7988,8 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  date-fns@4.1.0: {}
+
   dateformat@3.0.2: {}
 
   dateformat@4.6.3: {}
@@ -11810,3 +11876,8 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   zod@3.25.76: {}
+
+  zustand@5.0.8(@types/react@18.3.23)(react@18.2.0):
+    optionalDependencies:
+      '@types/react': 18.3.23
+      react: 18.2.0