diff --git a/package.json b/package.json
index fd93c34e..80385274 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adex-interface",
-  "version": "0.69.49",
+  "version": "0.69.61",
   "private": true,
   "dependencies": {
     "@ambire/login-sdk-core": "^0.0.21",
diff --git a/public/robots.txt b/public/robots.txt
index b21f0887..349360ba 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,3 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow: /
+Allow: /
diff --git a/src/App.tsx b/src/App.tsx
index 7bef28f3..f34dd163 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,11 +29,8 @@ function GlobalStyles() {
     <Global
       styles={(theme: MantineTheme) => ({
         [theme.other.media.print]: {
-          body: {
-            visibility: 'hidden'
-          },
-          'body #printable': {
-            visibility: 'visible'
+          '#root': {
+            display: 'none'
           }
         }
       })}
diff --git a/src/Router.tsx b/src/Router.tsx
index 2fefde81..fa7aea58 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -6,7 +6,7 @@ import Billing from 'components/Billing'
 import GetStarted from 'components/GetStarted'
 import CampaignAnalytics from 'components/CampaignAnalytics'
 import { createBrowserRouter, Navigate, useLocation, useRouteError, Link } from 'react-router-dom'
-import { Button } from '@mantine/core'
+import { Button, Loader, Center } from '@mantine/core'
 
 import useAccount from 'hooks/useAccount'
 import Deposit from 'components/Deposit'
@@ -33,14 +33,27 @@ function ErrorBoundary() {
 }
 
 function RequireAuth({ children, admin }: { children: JSX.Element; admin?: boolean }) {
-  const { authenticated, isAdmin } = useAccount()
+  const {
+    authenticated,
+    isAdmin,
+    adexAccount: { loaded }
+  } = useAccount()
+
   const location = useLocation()
 
+  if (!loaded) {
+    return (
+      <Center>
+        <Loader type="dots" />
+      </Center>
+    )
+  }
+
   if (!authenticated) {
     return <Navigate to="/login" state={{ from: location }} replace />
   }
 
-  if (admin && isAdmin) {
+  if (admin && !isAdmin) {
     return <Navigate to="/404" state={{ from: location }} replace />
   }
 
@@ -107,7 +120,7 @@ export const router = createBrowserRouter(
         {
           path: 'admin/:tabValue',
           element: (
-            <RequireAuth>
+            <RequireAuth admin>
               <CampaignsDataProvider type="admin">
                 <AdminPanel />
               </CampaignsDataProvider>
diff --git a/src/components/AdminPanel/AccountDetails.tsx b/src/components/AdminPanel/AccountDetails.tsx
index 7bbc9a0e..6544f242 100644
--- a/src/components/AdminPanel/AccountDetails.tsx
+++ b/src/components/AdminPanel/AccountDetails.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react'
-import { SimpleGrid, Box, Title, Paper, Loader, Center } from '@mantine/core'
+import { SimpleGrid, Box, Loader, Center, Fieldset } from '@mantine/core'
 import useAdmin from 'hooks/useAdmin'
 import { useParams } from 'react-router-dom'
 import Dashboard from 'components/Dashboard'
@@ -39,34 +39,22 @@ function AccountDetails() {
         //   { maxWidth: 'md', cols: 1, spacing: 'xl' }
         // ]}
       >
-        <Paper p="sm" withBorder>
-          <Title order={5} c="brand">
-            Account info form
-          </Title>
+        <Fieldset legend="Account info form">
           <AccountInfo accountData={accountData} />
-        </Paper>
-        <Paper p="sm" withBorder>
-          <Title order={5} c="brand">
-            Deposit form
-          </Title>
+        </Fieldset>
+        <Fieldset legend="Deposit form">
           <AdminDeposit accountData={accountData} />
-        </Paper>
+        </Fieldset>
       </SimpleGrid>
       <SimpleGrid spacing="xl" mt="xl">
-        <Paper p="sm" withBorder>
-          <Title order={5} c="brand">
-            Activity
-          </Title>
+        <Fieldset legend="Activity">
           <FundsActivity accountData={accountData} />
-        </Paper>
+        </Fieldset>
       </SimpleGrid>
       <SimpleGrid spacing="xl" mt="xl">
-        <Paper p="sm" withBorder>
-          <Title order={5} c="brand">
-            Campaigns
-          </Title>
+        <Fieldset legend="Campaigns">
           <Dashboard isAdminPanel accountId={accountId} />
-        </Paper>
+        </Fieldset>
       </SimpleGrid>
     </Box>
   )
diff --git a/src/components/AdminPanel/AccountDetailsElements.tsx b/src/components/AdminPanel/AccountDetailsElements.tsx
index f9a3af93..af1d0e7f 100644
--- a/src/components/AdminPanel/AccountDetailsElements.tsx
+++ b/src/components/AdminPanel/AccountDetailsElements.tsx
@@ -2,12 +2,12 @@ import { useMemo } from 'react'
 import { Account } from 'types'
 import { Box, Text, MantineColor } from '@mantine/core'
 
-import CustomTable, { TableElement } from 'components/common/CustomTable'
+import CustomTable, { DataElement } from 'components/common/CustomTable'
 import { parseBigNumTokenAmountToDecimal, toOperationEntry } from 'helpers'
 
 export const FundsActivity = ({ accountData }: { accountData: Account }) => {
   const elements = useMemo(() => {
-    const data: TableElement['elements'] = [
+    const data: DataElement[] = [
       ...accountData.fundsDeposited.deposits.map((x) => toOperationEntry('deposit', x)),
       ...accountData.fundsOnCampaigns.perCampaign.map((x) => toOperationEntry('campaignOpen', x)),
       ...accountData.refundsFromCampaigns.perCampaign.map((x) =>
@@ -16,21 +16,32 @@ export const FundsActivity = ({ accountData }: { accountData: Account }) => {
     ]
       .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 
-      .map((x) => {
+      .map((x, i) => {
         const sign = x.type === 'campaignOpen' ? '-' : '+'
         const color: MantineColor = sign === '-' ? 'darkred' : 'darkgreen'
         return {
-          name: <Text c={color} tt="capitalize" fw="bold">{`${sign} ${x.name}`}</Text>,
-          date: x.date?.toLocaleDateString() || '',
-          amount: (
-            <Text c={color} tt="capitalize" fw="bold">{`${sign} ${parseBigNumTokenAmountToDecimal(
-              x.amount,
-              x.token.decimals
-            )}`}</Text>
-          ),
+          id: x.id + i,
+          columns: [
+            {
+              value: x.type,
+              element: <Text c={color} tt="capitalize" fw="bold">{`${sign} ${x.name}`}</Text>
+            },
+            { value: x.date.getTime(), element: x.date?.toLocaleDateString() || '' },
+            {
+              value: Number(x.amount),
+              element: (
+                <Text
+                  c={color}
+                  tt="capitalize"
+                  fw="bold"
+                  style={{ whiteSpace: 'nowrap' }}
+                >{`${sign} ${parseBigNumTokenAmountToDecimal(x.amount, x.token.decimals)}`}</Text>
+              )
+            },
 
-          token: x.token.name,
-          actionId: x.id
+            { value: x.token.name },
+            { value: x.id }
+          ]
         }
       })
 
@@ -43,7 +54,8 @@ export const FundsActivity = ({ accountData }: { accountData: Account }) => {
     <Box>
       <CustomTable
         headings={['Type', 'Date', 'Amount', 'Token', 'Tx/Campaign id']}
-        elements={elements}
+        data={elements}
+        defaultSortIndex={1}
         pageSize={10}
       />
     </Box>
diff --git a/src/components/AdminPanel/Accounts.tsx b/src/components/AdminPanel/Accounts.tsx
index 6a214f45..f48cf231 100644
--- a/src/components/AdminPanel/Accounts.tsx
+++ b/src/components/AdminPanel/Accounts.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useCallback, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Loader, Box, Badge, TextInput, Stack, Group } from '@mantine/core'
+import { Box, Badge, TextInput, Stack, Group, LoadingOverlay } from '@mantine/core'
 
-import CustomTable from 'components/common/CustomTable'
+import CustomTable, { DataElement } from 'components/common/CustomTable'
 import useAdmin from 'hooks/useAdmin'
 import VisibilityIcon from 'resources/icons/Visibility'
 
@@ -49,7 +49,7 @@ const AdminAnalytics = () => {
     ).toLocaleString()
     const totalAccounts = accArr.length
 
-    const elements = accArr
+    const elements: DataElement[] = accArr
       .filter((x) =>
         (
           x.name +
@@ -80,19 +80,33 @@ const AdminAnalytics = () => {
       .map((a) => {
         return {
           id: a.id,
-          accountId: a.name || a.id,
-          verified: a?.billingDetails?.verified ? '✅' : '❌',
-          email: a.info?.email,
-          balance: parseBigNumTokenAmountToDecimal(
-            a.availableBalance,
-            a.balanceToken.decimals
-          ).toFixed(2),
-          campaigns: a.fundsOnCampaigns.perCampaign.length,
-          fudsOnCampaigns: parseBigNumTokenAmountToDecimal(
-            a.fundsOnCampaigns.total - a.refundsFromCampaigns.total,
-            a.balanceToken.decimals
-          ).toFixed(2),
-          created: new Date(a.created).toLocaleDateString()
+          columns: [
+            { value: a.name || a.id },
+            {
+              value: a?.billingDetails?.verified ? 1 : 0,
+              element: a?.billingDetails?.verified ? '✅' : '❌'
+            },
+            { value: a.info?.email || '' },
+            {
+              value: a.availableBalance,
+              element: parseBigNumTokenAmountToDecimal(
+                a.availableBalance,
+                a.balanceToken.decimals
+              ).toFixed(2)
+            },
+            { value: a.fundsOnCampaigns.perCampaign.length },
+            {
+              value: a.fundsOnCampaigns.total - a.refundsFromCampaigns.total,
+              element: parseBigNumTokenAmountToDecimal(
+                a.fundsOnCampaigns.total - a.refundsFromCampaigns.total,
+                a.balanceToken.decimals
+              ).toFixed(2)
+            },
+            {
+              value: new Date(a.created).getTime(),
+              element: new Date(a.created).toLocaleDateString()
+            }
+          ]
         }
       })
 
@@ -125,11 +139,10 @@ const AdminAnalytics = () => {
     ]
   }, [handlePreview])
 
-  return initialDataLoading ? (
-    <Loader size="xl" type="dots" color="violet" />
-  ) : (
+  return (
     <Stack>
-      <Group align="center" justify="left" gap="xs" mb="md" wrap="wrap">
+      <Group align="center" justify="left" gap="sm" mb="md" wrap="wrap" pos="relative">
+        <LoadingOverlay visible={initialDataLoading} loaderProps={{ children: ' ' }} />
         <Box>Totals: </Box>
         <Badge leftSection="Accounts" size="lg">
           ({data.totalAccounts})
@@ -148,7 +161,13 @@ const AdminAnalytics = () => {
           miw={420}
         />
       </Group>
-      <CustomTable headings={headings} elements={data.elements} pageSize={10} actions={actions} />
+      <CustomTable
+        headings={headings}
+        data={data.elements}
+        pageSize={10}
+        actions={actions}
+        loading={initialDataLoading}
+      />
     </Stack>
   )
 }
diff --git a/src/components/AdminPanel/AccoutInfo.tsx b/src/components/AdminPanel/AccoutInfo.tsx
index 9c0bea9b..bbcd3f67 100644
--- a/src/components/AdminPanel/AccoutInfo.tsx
+++ b/src/components/AdminPanel/AccoutInfo.tsx
@@ -1,7 +1,17 @@
 import { useMemo, useCallback, useState } from 'react'
 import { hasLength, matches, useForm, isEmail } from '@mantine/form'
 
-import { Button, Group, TextInput, Box, NumberInput, Text, Textarea, Switch } from '@mantine/core'
+import {
+  Button,
+  Group,
+  TextInput,
+  Box,
+  NumberInput,
+  Text,
+  Textarea,
+  Switch,
+  Stack
+} from '@mantine/core'
 import throttle from 'lodash.throttle'
 
 import { Account } from 'types'
@@ -43,7 +53,7 @@ function AccountInfo({ accountData }: { accountData: Account }) {
           showNotification('info', 'Account data updated!')
         },
         (err) => {
-          showNotification('error', err, 'Error on account Account data updated!')
+          showNotification('error', err.toString(), 'Error on account Account data updated!')
         }
       )
 
@@ -74,76 +84,93 @@ function AccountInfo({ accountData }: { accountData: Account }) {
         disabled
         {...form.getInputProps('availableBalance')}
       />
-      <Text size="sm" fw={500} mt="xl">
-        Billing details
-      </Text>
-      <Text size="xs">* Just for info, users can edit, admins can verify only</Text>
-      <Group mt="md" justify="left" align="baseline">
-        <TextInput
-          label="First name"
-          disabled
-          {...form.getInputProps('billingDetails.firstName')}
-        />
-        <TextInput label="Last name" disabled {...form.getInputProps('billingDetails.lastName')} />
-        <TextInput
-          label="Company number"
-          disabled
-          {...form.getInputProps('billingDetails.companyNumber')}
-        />
-        <TextInput
-          label="VAT number"
-          disabled
-          {...form.getInputProps('billingDetails.companyNumberPrim')}
-        />
-        <TextInput
-          label="Company address"
-          disabled
-          {...form.getInputProps('billingDetails.companyAddress')}
-        />
-        <TextInput
-          label="Company country"
-          disabled
-          {...form.getInputProps('billingDetails.companyCountry')}
-        />
 
+      <Stack gap="xs">
+        <Text size="sm" fw={500} mt="xl">
+          Billing details
+        </Text>
+        <Text size="xs">* Just for info, users can edit, admins can verify only</Text>
         <TextInput
-          label="Company city"
+          label="Company name"
           disabled
-          {...form.getInputProps('billingDetails.companyCity')}
-        />
-        <TextInput
-          label="Company ZIP code"
-          disabled
-          {...form.getInputProps('billingDetails.companyZipCode')}
+          {...form.getInputProps('billingDetails.companyName')}
         />
+        <Group justify="left" align="baseline" grow>
+          <TextInput
+            label="First name"
+            disabled
+            {...form.getInputProps('billingDetails.firstName')}
+          />
+          <TextInput
+            label="Last name"
+            disabled
+            {...form.getInputProps('billingDetails.lastName')}
+          />
+        </Group>
+        <Group justify="left" align="baseline" grow>
+          <TextInput
+            label="Company number"
+            disabled
+            {...form.getInputProps('billingDetails.companyNumber')}
+          />
+          <TextInput
+            label="VAT number"
+            disabled
+            {...form.getInputProps('billingDetails.companyNumberPrim')}
+          />
+        </Group>
+        <Group justify="left" align="baseline" grow>
+          <TextInput
+            label="Company address"
+            disabled
+            {...form.getInputProps('billingDetails.companyAddress')}
+          />
+          <TextInput
+            label="Company country"
+            disabled
+            {...form.getInputProps('billingDetails.companyCountry')}
+          />
+        </Group>
+        <Group justify="left" align="baseline" grow>
+          <TextInput
+            label="Company city"
+            disabled
+            {...form.getInputProps('billingDetails.companyCity')}
+          />
+          <TextInput
+            label="Company ZIP code"
+            disabled
+            {...form.getInputProps('billingDetails.companyZipCode')}
+          />
+        </Group>
         <Switch
           label="Verified by admin"
           {...form.getInputProps('billingDetails.verified', { type: 'checkbox' })}
         />
-      </Group>
-
-      <Text size="sm" fw={500} mt="xl">
-        Additional info
-      </Text>
-      <Text size="xs">* can be seen and edited only by admins</Text>
-
-      <Group mt="md" justify="left" align="baseline">
-        <TextInput label="Contact email" {...form.getInputProps('info.email')} />
-        <TextInput label="Contact phone" {...form.getInputProps('info.phone')} />
+      </Stack>
+      <Stack gap="xs">
+        <Text size="sm" fw={500} mt="xl">
+          Additional info
+        </Text>
+        <Text size="xs">* can be seen and edited only by admins</Text>
         <TextInput label="Contact person" {...form.getInputProps('info.contactPerson')} />
+        <Group justify="left" grow>
+          <TextInput label="Contact email" {...form.getInputProps('info.email')} />
+          <TextInput label="Contact phone" {...form.getInputProps('info.phone')} />
+        </Group>
         <Textarea
           label="Additional notes"
           w="100%"
           rows={7}
           {...form.getInputProps('info.notes')}
         />
-      </Group>
 
-      <Group justify="left" mt="md">
-        <Button type="submit" loading={loading} disabled={loading || !form.isDirty()}>
-          Update account data
-        </Button>
-      </Group>
+        <Group justify="left" mt="md">
+          <Button type="submit" loading={loading} disabled={loading || !form.isDirty()}>
+            Update account data
+          </Button>
+        </Group>
+      </Stack>
     </Box>
   )
 }
diff --git a/src/components/AdminPanel/AdminAnalytics.tsx b/src/components/AdminPanel/AdminAnalytics.tsx
index 9028d4e7..864e7546 100644
--- a/src/components/AdminPanel/AdminAnalytics.tsx
+++ b/src/components/AdminPanel/AdminAnalytics.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo, useCallback } from 'react'
-import { Select, Loader, Flex, Box, Text, Badge, ActionIcon, Stack, Group } from '@mantine/core'
-import { BaseAnalyticsData, AnalyticsPeriod, Timeframe, AnalyticsType, SSPs } from 'types'
+import { Select, Box, Text, Badge, ActionIcon, Stack, Group, LoadingOverlay } from '@mantine/core'
+import { AnalyticsPeriod, Timeframe, AnalyticsType, SSPs } from 'types'
 import useCampaignAnalytics from 'hooks/useCampaignAnalytics'
 import CustomTable from 'components/common/CustomTable'
 import { CountryData } from 'helpers/countries'
@@ -61,6 +61,14 @@ const sspsData: Array<{ value: SSPs; label: string }> = [
   { value: 'Qortex', label: 'Qortex' }
 ]
 
+type Placements = '' | 'app' | 'site'
+
+const placementData: Array<{ value: Placements; label: string }> = [
+  { value: '', label: 'All Placements' },
+  { value: 'app', label: 'App' },
+  { value: 'site', label: 'Site' }
+]
+
 const mapSegmentLabel = (analType: AnalyticsType, segment: string): { segementLabel: string } => {
   let segementLabel = segment
 
@@ -103,6 +111,7 @@ const AdminAnalytics = () => {
   const [timeframe, setTimeframe] = useState<Timeframe>('month')
   const [analType, setAnalType] = useState<AnalyticsType>('ssp')
   const [ssp, setSsp] = useState<SSPs>('')
+  const [placement, setPlacement] = useState<Placements>('')
   const [startDate, setStartDate] = useState<Date | null>(
     dayjs().subtract(1, 'month').startOf('month').toDate()
   )
@@ -124,7 +133,7 @@ const AdminAnalytics = () => {
     [analyticsData, analyticsKey]
   )
 
-  const adminMappedAnalytics: BaseAnalyticsData[] | undefined = useMemo(
+  const adminMappedAnalytics = useMemo(
     () => mappedAnalytics.get(analyticsKey?.key || ''),
     [analyticsKey, mappedAnalytics]
   )
@@ -132,7 +141,8 @@ const AdminAnalytics = () => {
   useEffect(() => {
     console.log({ analytics })
     console.log({ mappedAnalytics })
-  }, [analytics, mappedAnalytics])
+    console.log({ adminMappedAnalytics })
+  }, [analytics, mappedAnalytics, adminMappedAnalytics])
 
   useEffect(() => {
     setAnalyticsKey(undefined)
@@ -150,40 +160,51 @@ const AdminAnalytics = () => {
         timeframe,
         startDate || undefined,
         end || undefined,
-        ssp || undefined
+        ssp || undefined,
+        placement || undefined
       )
       setAnalyticsKey(key)
       console.log('key', key)
     }
 
     checkAnalytics()
-  }, [analType, getAnalyticsKeyAndUpdate, ssp, startDate, timeframe])
+  }, [analType, getAnalyticsKeyAndUpdate, placement, ssp, startDate, timeframe])
 
-  const loading = useMemo(
-    () => !analyticsKey || !adminMappedAnalytics,
-    [analyticsKey, adminMappedAnalytics]
-  )
+  const loading = useMemo(() => adminMappedAnalytics?.status === 'loading', [adminMappedAnalytics])
 
   const data = useMemo(() => {
-    const paid = adminMappedAnalytics?.reduce((sum, i) => sum + i.paid, 0) || 0
-    const imps = adminMappedAnalytics?.reduce((sum, i) => sum + i.impressions, 0) || 0
-    const clicks = adminMappedAnalytics?.reduce((sum, i) => sum + i.clicks, 0) || 0
+    if (!adminMappedAnalytics?.data || adminMappedAnalytics?.status !== 'processed')
+      return {
+        paid: 'N/A',
+        imps: 'N/A',
+        clicks: 'N/A',
+        elements: []
+      }
+
+    const paid = adminMappedAnalytics.data.reduce((sum, i) => sum + i.paid, 0) || 0
+    const imps = adminMappedAnalytics.data.reduce((sum, i) => sum + i.impressions, 0) || 0
+    const clicks = adminMappedAnalytics.data.reduce((sum, i) => sum + i.clicks, 0) || 0
     return {
       paid,
       imps,
       clicks,
       elements:
-        adminMappedAnalytics?.map((item) => ({
+        adminMappedAnalytics.data.map((item) => ({
           id: item.segment.toString(),
-          segment: mapSegmentLabel(analType, item.segment).segementLabel,
-          share: `${((item.paid / (paid || 1)) * 100).toFixed(2)} %`,
-          shareImps: `${((item.impressions / (imps || 1)) * 100).toFixed(2)} %`,
-          impressions: item.impressions,
-          clicks: item.clicks,
-          ctr: `${item.ctr} %`,
-          avgCpm: `${item.avgCpm}`,
-          avgCPC: `${item.avgCpc}`,
-          paid: `${item.paid.toFixed(4)}`
+          columns: [
+            { value: mapSegmentLabel(analType, item.segment).segementLabel },
+            { value: item.paid, element: `${((item.paid / (paid || 1)) * 100).toFixed(2)} %` },
+            {
+              value: item.impressions,
+              element: `${((item.impressions / (imps || 1)) * 100).toFixed(2)} %`
+            },
+            { value: item.impressions, element: item.impressions.toLocaleString() },
+            { value: item.clicks, element: item.clicks.toLocaleString() },
+            { value: item.ctr, element: `${item.ctr?.toLocaleString()} %` },
+            { value: item.avgCpm, element: item.avgCpm?.toLocaleString() },
+            { value: item.avgCpc, element: item.avgCpc?.toLocaleString() },
+            { value: item.paid, element: `${item.paid.toFixed(4)}` }
+          ]
         })) || []
     }
   }, [adminMappedAnalytics, analType])
@@ -206,17 +227,17 @@ const AdminAnalytics = () => {
   }, [handlePreview])
 
   return (
-    <>
-      <Text size="sm">
+    <Stack gap="xs">
+      <Text size="sm" inline>
         * This analytics are for the actual user campaign, representing placed impressions, clicks,
         etc. (NOT the stats form received requests form the SSPs)
       </Text>
-      <Text size="sm" mb="md" c="info">
+      <Text size="sm" mb="md" c="info" inline>
         * Amounts include AdEx validator fees 7% (total amounts paid by the users). For amounts
         payed to ssp divide by 1.07 (for records after 22.06.24)
       </Text>
 
-      <Flex direction="row" align="start" justify="left" gap="xl" mb="md">
+      <Group align="start" justify="left" gap="xs">
         <Select
           label="Type"
           value={analType}
@@ -231,6 +252,14 @@ const AdminAnalytics = () => {
           data={sspsData}
           size="md"
         />
+        <Select
+          label="Placement"
+          value={placement}
+          // @ts-ignore
+          onChange={(val) => setPlacement(val as Placements)}
+          data={placementData}
+          size="md"
+        />
         <Select
           label="Period"
           value={timeframe}
@@ -254,64 +283,69 @@ const AdminAnalytics = () => {
           withSeconds
           size="md"
         />
-      </Flex>
-
-      {loading ? (
-        <Loader size="xl" type="dots" color="violet" />
-      ) : (
-        <Stack>
-          <Group align="center" justify="left" gap="xs">
-            <Box>Totals: </Box>
-            <Badge
-              leftSection={
-                <ActionIcon size="sm" color="brand">
-                  <BillingIcon />
-                </ActionIcon>
-              }
-              size="lg"
-            >
-              {Number(data.paid.toFixed(2)).toLocaleString()}
-            </Badge>
-
-            <Badge
-              size="lg"
-              leftSection={
-                <ActionIcon size="sm" color="brand">
-                  <VisibilityIcon />
-                </ActionIcon>
-              }
-            >
-              {data.imps.toLocaleString()}
-            </Badge>
-
-            <Badge
-              size="lg"
-              leftSection={
-                <ActionIcon size="sm" color="brand">
-                  <CheckMarkFilledIcon />
-                </ActionIcon>
-              }
-            >
-              {data.clicks.toLocaleString()}
-            </Badge>
-
-            <DownloadCSV
-              data={adminMappedAnalytics}
-              mapHeadersToDataProperties={{ [analType]: 'segment', ...csvHeaders }}
-              filename={`${analyticsKey?.key || 'admin-data-export'}.csv`}
-              disabled={loading}
-            />
-          </Group>
-
-          <CustomTable
-            headings={headings}
-            elements={data.elements}
-            pageSize={10}
-            actions={analType === 'campaignId' ? actions : undefined}
+      </Group>
+
+      <Stack>
+        <Group align="center" justify="left" gap="xs" pos="relative">
+          <LoadingOverlay visible={loading} loaderProps={{ children: ' ' }} />
+          <Box>Totals: </Box>
+          <Badge
+            leftSection={
+              <ActionIcon size="sm" color="brand">
+                <BillingIcon />
+              </ActionIcon>
+            }
+            size="lg"
+          >
+            {typeof data.paid === 'number'
+              ? Number(data.paid.toFixed(2)).toLocaleString()
+              : data.paid}
+          </Badge>
+
+          <Badge
+            size="lg"
+            leftSection={
+              <ActionIcon size="sm" color="brand">
+                <VisibilityIcon />
+              </ActionIcon>
+            }
+          >
+            {data.imps.toLocaleString()}
+          </Badge>
+
+          <Badge
+            size="lg"
+            leftSection={
+              <ActionIcon size="sm" color="brand">
+                <CheckMarkFilledIcon />
+              </ActionIcon>
+            }
+          >
+            {data.clicks.toLocaleString()}
+          </Badge>
+
+          <DownloadCSV
+            data={adminMappedAnalytics?.data}
+            mapHeadersToDataProperties={{ [analType]: 'segment', ...csvHeaders }}
+            filename={`${analyticsKey?.key || 'admin-data-export'}.csv`}
+            disabled={loading}
           />
-        </Stack>
-      )}
-    </>
+        </Group>
+        <CustomTable
+          error={
+            adminMappedAnalytics?.status === 'error'
+              ? 'Error occurred while loading analytics'
+              : undefined
+          }
+          defaultSortIndex={3}
+          loading={loading}
+          headings={headings}
+          data={data.elements}
+          pageSize={10}
+          actions={analType === 'campaignId' ? actions : undefined}
+        />
+      </Stack>
+    </Stack>
   )
 }
 
diff --git a/src/components/AdminPanel/AdminDeposit.tsx b/src/components/AdminPanel/AdminDeposit.tsx
index 90c1359e..a3c67e34 100644
--- a/src/components/AdminPanel/AdminDeposit.tsx
+++ b/src/components/AdminPanel/AdminDeposit.tsx
@@ -1,6 +1,6 @@
 import { isInRange, hasLength, matches, useForm } from '@mantine/form'
 import { useCallback, useMemo, useState, FormEvent } from 'react'
-import { Button, Group, TextInput, Box, NumberInput } from '@mantine/core'
+import { Button, Group, TextInput, Box, NumberInput, Stack } from '@mantine/core'
 import { defaultConfirmModalProps } from 'components/common/Modals/CustomConfirmModal'
 import { modals } from '@mantine/modals'
 import useAdmin from 'hooks/useAdmin'
@@ -94,69 +94,74 @@ function AdminDeposit({ accountData }: { accountData: Account }) {
 
   return (
     <Box component="form">
-      <TextInput
-        label="Account address"
-        placeholder="0x000"
-        withAsterisk
-        {...form.getInputProps('accountId')}
-        disabled
-      />
-      <Group mt="sm" justify="left" align="baseline">
-        <NumberInput
-          mt="sm"
-          label="Amount"
-          // type="number"
-          placeholder="Amount"
-          hideControls
-          min={0}
-          {...form.getInputProps('amount')}
-        />
-        <TextInput
-          label="Token name"
-          placeholder="Token name"
-          withAsterisk
-          disabled
-          {...form.getInputProps('token.name')}
-        />
+      <Stack gap="xs">
         <TextInput
-          label="Token addr"
-          placeholder="Token addr"
+          label="Account address"
+          placeholder="0x000"
           withAsterisk
+          {...form.getInputProps('accountId')}
           disabled
-          {...form.getInputProps('token.address')}
-        />
-        <TextInput
-          label="Token chain id"
-          placeholder="Token chain id"
-          withAsterisk
-          disabled
-          {...form.getInputProps('token.chainId')}
-        />
-        <NumberInput
-          label="Token decimals"
-          placeholder="token decimals"
-          withAsterisk
-          disabled
-          {...form.getInputProps('token.decimals')}
-        />
-        <TextInput
-          label="Tx hash"
-          placeholder="0x0000000000000000000000000000000000000000000000000000000000000000"
-          withAsterisk
-          {...form.getInputProps('txHash')}
         />
-      </Group>
+        <Group grow align="baseline">
+          <NumberInput
+            label="Amount"
+            // type="number"
+            placeholder="Amount"
+            hideControls
+            min={0}
+            {...form.getInputProps('amount')}
+          />
+          <TextInput
+            label="Token name"
+            placeholder="Token name"
+            withAsterisk
+            disabled
+            {...form.getInputProps('token.name')}
+          />
+        </Group>
+        <Group grow align="baseline">
+          <TextInput
+            label="Token addr"
+            placeholder="Token addr"
+            withAsterisk
+            disabled
+            {...form.getInputProps('token.address')}
+          />
+          <TextInput
+            label="Token chain id"
+            placeholder="Token chain id"
+            withAsterisk
+            disabled
+            {...form.getInputProps('token.chainId')}
+          />
+        </Group>
+        <Group grow align="baseline">
+          <NumberInput
+            label="Token decimals"
+            placeholder="token decimals"
+            withAsterisk
+            disabled
+            {...form.getInputProps('token.decimals')}
+          />
+          <TextInput
+            label="Tx hash"
+            placeholder="0x0000000000000000000000000000000000000000000000000000000000000000"
+            withAsterisk
+            {...form.getInputProps('txHash')}
+          />
+        </Group>
 
-      <Group justify="left" mt="md">
-        <Button
-          type="submit"
-          loading={loading}
-          disabled={loading || !form.isDirty()}
-          onClick={onSubmit}
-        >
-          Make deposit
-        </Button>
-      </Group>
+        <Group justify="left" mt="md">
+          <Button
+            type="submit"
+            loading={loading}
+            disabled={loading || !form.isDirty()}
+            onClick={onSubmit}
+          >
+            Make deposit
+          </Button>
+        </Group>
+      </Stack>
     </Box>
   )
 }
diff --git a/src/components/AdminPanel/SspStats.tsx b/src/components/AdminPanel/SspStats.tsx
index 386664a5..15586670 100644
--- a/src/components/AdminPanel/SspStats.tsx
+++ b/src/components/AdminPanel/SspStats.tsx
@@ -8,11 +8,17 @@ import { parseRange } from 'helpers/createCampaignHelpers'
 const toTableDta = (stats: SupplyStatsDetails[], title: string, isCpmRange?: boolean) => {
   return {
     headings: [title, 'count'],
-    elements: stats.slice(0, 200).map(({ value, count }) => ({
-      value: isCpmRange
-        ? JSON.stringify(parseRange(value), null, 4).replace(/\{|\}|"/g, '')
-        : value,
-      count: count.toLocaleString()
+    data: stats.slice(0, 200).map(({ value, count }) => ({
+      id: value,
+      columns: [
+        {
+          value,
+          element: isCpmRange
+            ? JSON.stringify(parseRange(value), null, 4).replace(/\{|\}|"/g, '')
+            : value
+        },
+        { value: count, element: count.toLocaleString() }
+      ]
     }))
   }
 }
diff --git a/src/components/Billing/AccountStatements.tsx b/src/components/Billing/AccountStatements.tsx
index 713e0b41..42117523 100644
--- a/src/components/Billing/AccountStatements.tsx
+++ b/src/components/Billing/AccountStatements.tsx
@@ -1,5 +1,4 @@
 import { useMemo, useCallback, useState, SetStateAction } from 'react'
-import { Title } from '@mantine/core'
 import CustomTable from 'components/common/CustomTable'
 import { useDisclosure } from '@mantine/hooks'
 import useAccount from 'hooks/useAccount'
@@ -29,6 +28,7 @@ const getTokenIndex = (token: OperationEntry['token']): string =>
 const Statements = () => {
   const [opened, { open, close }] = useDisclosure(false)
   const {
+    isLoading,
     adexAccount: { address, billingDetails, fundsDeposited, fundsOnCampaigns, refundsFromCampaigns }
   } = useAccount()
 
@@ -111,8 +111,13 @@ const Statements = () => {
     return statements
       .map((st, index) => ({
         id: index.toString(),
-        date: getMonthRangeString(monthPeriodIndexToDate(st.periodIndex)),
-        token: st.operations[0].token.name
+        columns: [
+          {
+            value: st.periodIndex,
+            element: getMonthRangeString(monthPeriodIndexToDate(st.periodIndex))
+          },
+          { value: st.operations[0].token.name }
+        ]
       }))
       .reverse()
   }, [statements])
@@ -135,10 +140,6 @@ const Statements = () => {
     ]
   }, [onPreview])
 
-  if (!statements) {
-    return <Title order={4}>No AccountStatements found.</Title>
-  }
-
   return (
     <>
       <BillingDetailsModal title="Statement" loading={!statement} opened={opened} close={close}>
@@ -150,7 +151,14 @@ const Statements = () => {
           />
         )}
       </BillingDetailsModal>
-      <CustomTable headings={columnTitles} elements={elements} actions={actions} shadow="xs" />
+      <CustomTable
+        headings={columnTitles}
+        defaultSortIndex={0}
+        data={elements}
+        actions={actions}
+        shadow="xs"
+        loading={isLoading}
+      />
     </>
   )
 }
diff --git a/src/components/Billing/BillingDetails.tsx b/src/components/Billing/BillingDetails.tsx
index e3205225..cdcde107 100644
--- a/src/components/Billing/BillingDetails.tsx
+++ b/src/components/Billing/BillingDetails.tsx
@@ -7,8 +7,7 @@ import {
   Space,
   Select,
   Fieldset,
-  ThemeIcon,
-  Box
+  ThemeIcon
 } from '@mantine/core'
 import { useForm } from '@mantine/form'
 import useAccount from 'hooks/useAccount'
@@ -139,47 +138,47 @@ const BillingDetails = () => {
           </Group>
 
           <Space />
-          <Group>
+          <Stack align="baseline" gap="xs">
             {billingDetails.verified ? (
-              <Box>
-                <Button
-                  miw={260}
-                  size="lg"
-                  type="submit"
-                  leftSection={
-                    <ThemeIcon size="xl" variant="transparent" radius="xl" color="success">
-                      <CheckMarkIcon size="36px" />{' '}
-                    </ThemeIcon>
-                  }
-                  color="success"
-                  variant="outline"
-                >
-                  Verified
-                </Button>
-                <Text mt="md">
-                  Your billing details are verified and cannot be changed here. If there is a
-                  mistake and changes need to be made, please contact us at &nbsp;
-                  <CustomAnchor external href="mailto:contactus@adex.network">
-                    contactus@adex.network
-                  </CustomAnchor>
-                  .
-                </Text>
-              </Box>
+              <Button
+                miw={260}
+                size="lg"
+                type="submit"
+                leftSection={
+                  <ThemeIcon size="xl" variant="transparent" radius="xl" color="success">
+                    <CheckMarkIcon size="36px" />{' '}
+                  </ThemeIcon>
+                }
+                color="success"
+                variant="outline"
+              >
+                Verified
+              </Button>
             ) : (
-              <Box>
-                <Button miw={260} size="lg" type="submit" color="secondary" variant="outline">
-                  Confirm details
-                </Button>
-                <Text mt="md">
-                  Fill in your billing details and contact us at &nbsp;
-                  <CustomAnchor external href="mailto:contactus@adex.network">
-                    contactus@adex.network
-                  </CustomAnchor>
-                  &nbsp; to verify the data.
-                </Text>
-              </Box>
+              <Button miw={260} size="lg" type="submit" color="secondary" variant="outline">
+                Confirm details
+              </Button>
             )}
-          </Group>
+
+            {billingDetails.verified ? (
+              <Text mt="md">
+                Your billing details are verified and cannot be changed here. If there is a mistake
+                and changes need to be made, please contact us at &nbsp;
+                <CustomAnchor external href="mailto:contactus@adex.network">
+                  contactus@adex.network
+                </CustomAnchor>
+                .
+              </Text>
+            ) : (
+              <Text mt="md">
+                Fill in your billing details and contact us at &nbsp;
+                <CustomAnchor external href="mailto:contactus@adex.network">
+                  contactus@adex.network
+                </CustomAnchor>
+                &nbsp; to verify the data.
+              </Text>
+            )}
+          </Stack>
         </Stack>
       </form>
     </Fieldset>
diff --git a/src/components/Billing/BillingDetailsModal.tsx b/src/components/Billing/BillingDetailsModal.tsx
index 4084f2d9..332d7e4e 100644
--- a/src/components/Billing/BillingDetailsModal.tsx
+++ b/src/components/Billing/BillingDetailsModal.tsx
@@ -1,5 +1,16 @@
 import { PropsWithChildren } from 'react'
-import { Button, Flex, Group, Loader, MantineTheme, Modal, getPrimaryShade } from '@mantine/core'
+import {
+  Button,
+  Center,
+  Group,
+  Loader,
+  MantineTheme,
+  Modal,
+  getPrimaryShade,
+  ScrollArea,
+  Portal,
+  Box
+} from '@mantine/core'
 import { createStyles } from '@mantine/emotion'
 import { useColorScheme } from '@mantine/hooks'
 
@@ -32,16 +43,16 @@ const useStyles = createStyles((theme: MantineTheme) => {
     close: {
       color: theme.colors.mainText[primaryShade]
     },
+    printableModal: {
+      [theme.other.media.print]: {
+        display: 'none'
+      }
+    },
     printable: {
+      display: 'none',
       [theme.other.media.print]: {
-        // NOTE: it's not fixed/absolute to body but modal.inner
-        overflow: 'visible',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        width: '100%'
-        // padding: theme.spacing.xl
+        // border: '1px solid yellow',
+        display: 'block'
       }
     }
   }
@@ -50,40 +61,49 @@ const useStyles = createStyles((theme: MantineTheme) => {
 export const BillingDetailsModal = ({ children, loading, title, opened, close }: DetailsProps) => {
   const { classes } = useStyles()
   return (
-    <Modal
-      title={title}
-      size="xl"
-      opened={opened}
-      onClose={close}
-      centered
-      radius="sm"
-      classNames={{
-        header: classes.header,
-        title: classes.title,
-        close: classes.close
-      }}
-    >
-      <div>
+    <>
+      <Modal
+        className={classes.printableModal}
+        title={
+          <Group>
+            <Button
+              mt="md"
+              mb="md"
+              onClick={async () => {
+                window.print()
+              }}
+            >
+              Print
+            </Button>
+            {title}
+          </Group>
+        }
+        size="xl"
+        opened={opened}
+        onClose={close}
+        centered
+        radius="sm"
+        padding="md"
+        classNames={{
+          header: classes.header,
+          title: classes.title,
+          close: classes.close
+        }}
+        scrollAreaComponent={ScrollArea.Autosize}
+      >
         {loading ? (
-          <Flex justify="center" align="center" h="60vh">
+          <Center h="100%">
             <Loader size="xl" />
-          </Flex>
+          </Center>
         ) : (
-          <>
-            <Group justify="right">
-              <Button mt="md" mb="md" onClick={() => window.print()}>
-                Print
-              </Button>
-            </Group>
-
-            <div className={classes.wrapper}>
-              <div id="printable" className={classes.printable}>
-                {children}
-              </div>
-            </div>
-          </>
+          <Box p="sm"> {children}</Box>
         )}
-      </div>
-    </Modal>
+      </Modal>
+      <Portal>
+        <Box id="printable" className={classes.printable}>
+          {children}
+        </Box>
+      </Portal>
+    </>
   )
 }
diff --git a/src/components/Billing/BillingPDF.tsx b/src/components/Billing/BillingPDF.tsx
index 1ecfc76a..acd00fb0 100644
--- a/src/components/Billing/BillingPDF.tsx
+++ b/src/components/Billing/BillingPDF.tsx
@@ -1,5 +1,4 @@
-import { Flex, Grid, MantineTheme, Space, Table, Text, Box, getPrimaryShade } from '@mantine/core'
-import { createStyles } from '@mantine/emotion'
+import { Space, Table, Text, Box, Group, Stack, Title, Divider } from '@mantine/core'
 import { Placement } from 'adex-common'
 import {
   formatDate,
@@ -8,13 +7,10 @@ import {
   parseBigNumTokenAmountToDecimal,
   formatCurrency
 } from 'helpers'
-// TODO: delete mock data
-// import { invoiceDetails } from 'components/Billing/mockedData'
 import { PropsWithChildren, ReactNode } from 'react'
 import AdExLogo from 'resources/logos/AdExLogo'
 import { IInvoiceDetails, InvoiceCompanyDetails, OperationEntry, StatementData } from 'types'
 import { networks } from 'lib/Icons'
-import { useColorScheme } from '@mantine/hooks'
 
 type InvoicesPDFProps = { invoiceDetails: IInvoiceDetails; placement: Placement }
 type SidesDetails = {
@@ -36,143 +32,74 @@ const formatTokenAmount = (amount: bigint, token: OperationEntry['token']): stri
   return `${formatCurrency(parseBigNumTokenAmountToDecimal(amount, token.decimals), 2)}`
 }
 
-const useStyles = createStyles((theme: MantineTheme) => {
-  const colorScheme = useColorScheme()
-  const primaryShade = getPrimaryShade(theme, colorScheme)
-  return {
-    wrapper: {
-      color: theme.colors.secondaryText[primaryShade],
-      fontSize: theme.fontSizes.xs,
-      span: {
-        display: 'block',
-        wordBreak: 'break-word'
-      }
-    },
-    title: {
-      fontSize: theme.fontSizes.sm,
-      fontWeight: theme.other.fontWeights.bold
-    },
-    right: {
-      textAlign: 'end'
-    },
-    bold: {
-      fontWeight: theme.other.fontWeights.bold,
-      color: theme.colors.mainText[primaryShade]
-    },
-    italic: {
-      fontStyle: 'italic'
-    },
-    wrap: {
-      wordBreak: 'break-word'
-    },
-    noWrap: {
-      whiteSpace: 'nowrap'
-    },
-    smallFontSize: {
-      fontSize: theme.fontSizes.xs
-    },
-    borderBottom: { borderBottom: '1px solid black', width: '100%', height: '70%' },
-    signature: { display: 'flex', justifyContent: 'center', fontSize: theme.fontSizes.xs },
-    rightAlignedText: {
-      textAlign: 'end'
-    },
-    head: {
-      background: theme.black,
-      padding: theme.spacing.xl,
-      color: 'white',
-      textAlign: 'end'
-    },
-    footer: {
-      borderTop: '1px solid',
-      borderColor: theme.colors.decorativeBorders[primaryShade]
-    },
-    tableHeader: {
-      backgroundColor: theme.colors.alternativeBackground[primaryShade]
-    },
-    tableBody: {
-      backgroundColor: theme.colors.lightBackground[primaryShade]
-    },
-    tableWrapper: {
-      borderRadius: theme.radius.sm,
-      overflow: 'hidden'
-    }
-  }
-})
-
 const BillingBlank = ({ children, header, seller, buyer, title }: DetailsProps) => {
-  const { classes, cx } = useStyles()
-
   return (
-    <Grid grow align="center" className={classes.smallFontSize} p={0} m={0}>
-      <Grid.Col span={12} className={classes.head}>
-        <Flex justify="space-between" align="center">
-          <Box c="white" w={200}>
-            <AdExLogo />
-          </Box>
-          {/* TODO: fix the size to be without px */}
-          <Text size="64px" fw="bold">
-            {title}
-          </Text>
-        </Flex>
-      </Grid.Col>
-      <Grid.Col span={12}>
-        <Grid p="xl">
-          <Grid.Col span={6}>
-            <div className={classes.wrapper}>
+    <Stack fz="sm" p="xs" m={0} gap="lg">
+      <Group justify="space-between" align="center">
+        <Box w={160}>
+          <AdExLogo />
+        </Box>
+        <Title order={2} fw="bold">
+          {title}
+        </Title>
+      </Group>
+
+      <Stack>
+        <Group grow align="top">
+          <Stack>
+            <Stack gap="0">
               <span>{`${title} to:`} </span>
-              <span className={classes.bold}>{buyer.companyName}</span>
-              <Space h="lg" />
+              <span>{buyer.companyName}</span>
+              <Space h="md" />
               <span>{buyer.companyAddress}</span>
               <span>{buyer.companyCity}</span>
               <span>{buyer.companyCountry}</span>
-            </div>
-            <Space h="lg" />
-            <div className={classes.wrapper}>
+            </Stack>
+
+            <Stack gap="0">
               <span>Reg. No.: {buyer.companyNumber}</span>
               <span>VAT Reg. No.: {buyer.companyNumberPrim}</span>
               <span>ETH Address: {buyer.ethAddress}</span>
-            </div>
-          </Grid.Col>
-          <Grid.Col span={6}>{header}</Grid.Col>
-          <Grid.Col span={12}>
-            <Space h="lg" />
-            {children}
-          </Grid.Col>
-          <Grid.Col span={12} className={classes.footer}>
-            <Grid>
-              <Grid.Col span={5}>
-                <div className={classes.wrapper}>
-                  <span className={classes.bold}>{seller.companyName}</span>
-                  <Space h="md" />
-                  <span>{seller.companyAddress}</span>
-                  <span>{seller.companyCity}</span>
-                  <span>{seller.companyCountry}</span>
-                </div>
-              </Grid.Col>
-              <Grid.Col span={7}>
-                <div className={cx(classes.wrapper, classes.right)}>
-                  <Flex justify="space-between" w="100%">
-                    <span>Email: {seller.email}</span>
-                    <span>Website: {seller.website}</span>
-                  </Flex>
-                  <Space h="md" />
-                  <span>Reg. No.: {seller.companyNumber}</span>
-                  <span>VAT Reg. No.: {seller.companyNumberPrim}</span>
-                  <span>ETH Address: {seller.ethAddress}</span>
-                </div>
-              </Grid.Col>
-            </Grid>
-            <Space h="lg" />
-          </Grid.Col>
-        </Grid>
-      </Grid.Col>
-    </Grid>
+            </Stack>
+          </Stack>
+
+          <Box>{header}</Box>
+        </Group>
+
+        <Space h="md" />
+        {children}
+        <Space h="lg" />
+        <Divider />
+        <Stack>
+          <Group grow align="baseline">
+            <Stack gap="0">
+              <Text size="sm" fw="bold">
+                {seller.companyName}
+              </Text>
+              <Space h="md" />
+              <Space h="md" />
+              <span>{seller.companyAddress}</span>
+              <span>{seller.companyCity}</span>
+              <span>{seller.companyCountry}</span>
+            </Stack>
+
+            <Stack ta="right" gap="0">
+              <span>Email: {seller.email}</span>
+              <span>Website: {seller.website}</span>
+
+              <Space h="md" />
+              <span>Reg. No.: {seller.companyNumber}</span>
+              <span>VAT Reg. No.: {seller.companyNumberPrim}</span>
+              <span>ETH Address: {seller.ethAddress}</span>
+            </Stack>
+          </Group>
+        </Stack>
+      </Stack>
+    </Stack>
   )
 }
 
 export const InvoicesPDF = ({ invoiceDetails, placement }: InvoicesPDFProps) => {
-  const { classes, cx } = useStyles()
-
   const calculatedVatValue = invoiceDetails.amount * (invoiceDetails.vatPercentageInUSD / 100)
   const invoiceTotal = invoiceDetails.amount + calculatedVatValue
   return (
@@ -181,168 +108,143 @@ export const InvoicesPDF = ({ invoiceDetails, placement }: InvoicesPDFProps) =>
       seller={invoiceDetails.seller}
       buyer={invoiceDetails.buyer}
       header={
-        <>
-          <Flex
-            justify="space-between"
-            className={cx(classes.tableHeader, classes.tableWrapper, classes.wrap)}
-            p="xs"
-          >
-            <Text c="secondaryText">Invoice No.:</Text>
-            <Text fw="bold">{invoiceDetails.invoiceId}</Text>
-          </Flex>
-          <Flex justify="space-between" pl="xs" pr="xs">
+        <Stack gap="0">
+          <Group justify="space-between" align="baseline" wrap="nowrap">
+            <Text c="secondaryText" ta="left">
+              Invoice:
+            </Text>
+            <Text size="xs" fw="bold" style={{ wordBreak: 'break-word' }}>
+              {invoiceDetails.invoiceId}
+            </Text>
+          </Group>
+          <Space h="md" />
+          <Group justify="space-between">
             <Text c="secondaryText">Invoice Date:</Text>
             <Text c="secondaryText">
               {invoiceDetails.invoiceDate ? formatDate(invoiceDetails.invoiceDate) : 'N/A'}
             </Text>
-          </Flex>
-          <Flex justify="space-between" pl="xs" pr="xs">
+          </Group>
+          <Group justify="space-between">
             <Text c="secondaryText">Payment Date:</Text>
             <Text c="secondaryText">
               {invoiceDetails.paymentDate ? formatDate(invoiceDetails.paymentDate) : 'N/A'}
             </Text>
-          </Flex>
-        </>
+          </Group>
+        </Stack>
       }
     >
-      <>
-        <Table
-          fs="xs"
-          verticalSpacing="xs"
-          w="100%"
-          className={classes.tableWrapper}
-          withColumnBorders
-        >
-          <Table.Thead className={classes.tableHeader}>
+      <Stack align="end">
+        <Table fs="xs" verticalSpacing="xs" w="100%" withColumnBorders withTableBorder>
+          <Table.Thead bg="alternativeBackground" tt="capitalize">
             <Table.Tr>
               <Table.Th>Placement</Table.Th>
-              <Table.Th className={classes.rightAlignedText}>Impressions</Table.Th>
-              <Table.Th className={classes.rightAlignedText}>Clicks</Table.Th>
-              <Table.Th>CTR %</Table.Th>
-              <Table.Th>
+              <Table.Th ta="right">Impressions</Table.Th>
+              <Table.Th ta="right">Clicks</Table.Th>
+              <Table.Th ta="right">CTR %</Table.Th>
+              <Table.Th ta="right">
                 <span>Average CPM</span>
                 <br />
                 <span>({invoiceDetails.currencyName})</span>
               </Table.Th>
-              <Table.Th>
+              <Table.Th ta="right">
                 <span>Spent</span>
                 <br />
                 <span>({invoiceDetails.currencyName})</span>
               </Table.Th>
             </Table.Tr>
           </Table.Thead>
-          <Table.Tbody className={classes.tableBody}>
+          <Table.Tbody bg="lightBackground">
             <Table.Tr>
-              <Table.Td className={classes.wrap}>{placement}</Table.Td>
-              <Table.Td className={classes.rightAlignedText}>
-                {invoiceDetails.impressions.toLocaleString()}
-              </Table.Td>
-              <Table.Td className={classes.rightAlignedText}>
-                {invoiceDetails.clicks.toLocaleString()}
-              </Table.Td>
-              <Table.Td className={classes.rightAlignedText}>{invoiceDetails.ctr}</Table.Td>
-              <Table.Td className={classes.rightAlignedText}>{invoiceDetails.avgCpm}</Table.Td>
-              <Table.Td className={classes.rightAlignedText}>
-                {invoiceDetails.amount.toFixed(4)}
-              </Table.Td>
+              <Table.Td>{placement}</Table.Td>
+              <Table.Td ta="right">{invoiceDetails.impressions.toLocaleString()}</Table.Td>
+              <Table.Td ta="right">{invoiceDetails.clicks.toLocaleString()}</Table.Td>
+              <Table.Td ta="right">{invoiceDetails.ctr}</Table.Td>
+              <Table.Td ta="right">{invoiceDetails.avgCpm}</Table.Td>
+              <Table.Td ta="right">{invoiceDetails.amount.toFixed(4)}</Table.Td>
             </Table.Tr>
           </Table.Tbody>
         </Table>
-        <Grid.Col span={12}>
-          <Grid justify="end">
-            <Grid.Col span={10} className={cx(classes.right)}>
-              Subtotal
-            </Grid.Col>
-            <Grid.Col span={2} className={cx(classes.right)}>
-              {invoiceDetails.amount.toFixed(2)}
-            </Grid.Col>
-            <Grid.Col span={10} className={cx(classes.right)}>
-              {`VAT ${invoiceDetails.vatPercentageInUSD} %`}
-            </Grid.Col>
-            <Grid.Col span={2} className={cx(classes.right, classes.borderBottom)}>
+
+        <Stack w="50%" gap="xs">
+          <Group grow justify="space-between">
+            <Text>Subtotal</Text>
+            <Text ta="end">{invoiceDetails.amount.toFixed(2)} </Text>
+          </Group>
+          <Group grow justify="space-between">
+            <Text> {`VAT ${invoiceDetails.vatPercentageInUSD} %`}</Text>
+            <Text ta="end">
               {`${calculatedVatValue.toFixed(2)}${
                 invoiceDetails.vatPercentageInUSD === 0 ? '*' : ''
               }`}
-            </Grid.Col>
-            <Grid.Col span={10} className={cx(classes.right, classes.bold)}>
-              {`Invoice total (${invoiceDetails.currencyName})`}
-            </Grid.Col>
-            <Grid.Col span={2} className={cx(classes.right, classes.bold)}>
-              {invoiceTotal.toFixed(2)}
-            </Grid.Col>
-            {invoiceDetails.vatPercentageInUSD === 0 && (
-              <Grid.Col span={10} className={cx(classes.right)}>
-                * Services subject to reverse charge-VAT to be accounted for by the recipient as per
-                Art.196 Council Directive 2006/112/EC
-              </Grid.Col>
-            )}
-          </Grid>
-        </Grid.Col>
-      </>
+            </Text>
+          </Group>
+          <Divider />
+          <Group grow justify="space-between">
+            <Text fw="bold">{`Invoice total (${invoiceDetails.currencyName})`}</Text>
+            <Text fw="bold" ta="end">
+              {invoiceTotal.toFixed(2)}{' '}
+            </Text>
+          </Group>
+        </Stack>
+        {invoiceDetails.vatPercentageInUSD === 0 && (
+          <Text size="xs" ta="end">
+            * Services subject to reverse charge-VAT to be accounted for by the recipient as per
+            Art.196 Council Directive 2006/112/EC
+          </Text>
+        )}
+      </Stack>
     </BillingBlank>
   )
 }
 
 export const StatementsPDF = ({ statement, seller, buyer }: StatementsPDFProps) => {
-  const { classes, cx } = useStyles()
-
   return (
     <BillingBlank
       title="Statement"
       seller={seller}
       buyer={buyer}
       header={
-        <>
-          <Flex
-            justify="space-between"
-            className={cx(classes.tableHeader, classes.tableWrapper)}
-            p="xs"
-          >
+        <Stack gap="0">
+          <Group justify="space-between">
             <Text c="secondaryText">Statement Period:</Text>
             <Text fw="bold">
               {getMonthRangeString(monthPeriodIndexToDate(statement.periodIndex))}
             </Text>
-          </Flex>
-          <Flex justify="space-between" pl="xs" pr="xs">
+          </Group>
+          <Group justify="space-between">
             <Text c="secondaryText">Currency / Token:</Text>
             <Text c="secondaryText">
               {statement.token.name} (chain: {networks[statement.token.chainId]})
             </Text>
-          </Flex>
-          <Flex justify="space-between" pl="xs" pr="xs">
+          </Group>
+
+          <Group justify="space-between" mt="lg">
             <Text c="secondaryText">Start balance:</Text>
-            <Text c="secondaryText">
+            <Text c="secondaryText" fw="bold">
               {formatTokenAmount(statement.startBalance, statement.token)}
             </Text>
-          </Flex>
-          <Flex justify="space-between" pl="xs" pr="xs">
+          </Group>
+          <Group justify="space-between">
             <Text c="secondaryText">End balance:</Text>
-            <Text c="secondaryText">
+            <Text c="secondaryText" fw="bold">
               {formatTokenAmount(statement.endBalance, statement.token)}
             </Text>
-          </Flex>
-        </>
+          </Group>
+        </Stack>
       }
     >
       <>
-        {/* <Table fontSize="xs" verticalSpacing="xs" w="100%" className={classes.tableWrapper}> */}
-        <Table
-          fs="xs"
-          verticalSpacing="xs"
-          w="100%"
-          className={classes.tableWrapper}
-          withColumnBorders
-        >
-          <Table.Thead className={classes.tableHeader}>
+        <Table fs="xs" verticalSpacing="xs" w="100%" withColumnBorders withTableBorder>
+          <Table.Thead bg="alternativeBackground" tt="capitalize">
             <Table.Tr>
               <Table.Th>#</Table.Th>
               <Table.Th>Date</Table.Th>
               <Table.Th>Type</Table.Th>
               <Table.Th>Description</Table.Th>
-              <Table.Th>amount ({statement.token.name})</Table.Th>
+              <Table.Th ta="right">Amount ({statement.token.name})</Table.Th>
             </Table.Tr>
           </Table.Thead>
-          <Table.Tbody className={classes.tableBody}>
+          <Table.Tbody bg="lightBackground">
             {statement.operations.map((e, index) => (
               // eslint-disable-next-line
               <Table.Tr key={index}>
@@ -351,8 +253,8 @@ export const StatementsPDF = ({ statement, seller, buyer }: StatementsPDFProps)
                 <Table.Td>
                   <Text tt="capitalize">{e.name}</Text>
                 </Table.Td>
-                <Table.Td className={classes.wrap}>{e.id}</Table.Td>
-                <Table.Td className={cx(classes.rightAlignedText, classes.noWrap)}>
+                <Table.Td style={{ wordBreak: 'break-word' }}>{e.id}</Table.Td>
+                <Table.Td ta="right">
                   {`${e.type === 'campaignOpen' ? '-' : '+'}   ${formatTokenAmount(
                     e.amount,
                     statement.token
@@ -362,15 +264,15 @@ export const StatementsPDF = ({ statement, seller, buyer }: StatementsPDFProps)
             ))}
           </Table.Tbody>
         </Table>
-        <Grid.Col span={12}>
-          <Space h="xl" />
-          <Space h="xl" />
-          <div className={classes.borderBottom} />
-        </Grid.Col>
-        <Grid.Col span={12}>This is not a bill.</Grid.Col>
-        <Grid.Col span={12}>
-          This is a summary of account activity for the time period stated above
-        </Grid.Col>
+        <Divider />
+        <Stack gap="xs">
+          <Text fz="xs" inline>
+            This is not a bill.
+          </Text>
+          <Text fz="xs" inline>
+            This is a summary of account activity for the time period stated above
+          </Text>
+        </Stack>
       </>
     </BillingBlank>
   )
diff --git a/src/components/Billing/Invoices.tsx b/src/components/Billing/Invoices.tsx
index 6aa8e03c..c9a689db 100644
--- a/src/components/Billing/Invoices.tsx
+++ b/src/components/Billing/Invoices.tsx
@@ -1,11 +1,8 @@
-import { Title } from '@mantine/core'
 import CustomTable from 'components/common/CustomTable'
 import { useDisclosure } from '@mantine/hooks'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { CampaignStatus } from 'adex-common'
 import { useCampaignsData } from 'hooks/useCampaignsData'
-// TODO: Delete mock data
-// import { invoiceElements } from './mockedData'
 import useAccount from 'hooks/useAccount'
 import { formatDateShort } from 'helpers'
 import VisibilityIcon from 'resources/icons/Visibility'
@@ -15,7 +12,7 @@ const columnTitles = ['Company Name', 'Campaign', 'Campaign Period']
 
 const Invoices = () => {
   const [opened, { open, close }] = useDisclosure(false)
-  const { campaignsData } = useCampaignsData()
+  const { campaignsData, updateAllCampaignsData, initialDataLoading } = useCampaignsData()
   const campaigns = useMemo(() => Array.from(campaignsData.values()), [campaignsData])
   const {
     adexAccount: {
@@ -28,29 +25,42 @@ const Invoices = () => {
   const invoiceElements = useMemo(
     () =>
       campaigns
-        .filter((c) =>
-          [CampaignStatus.expired, CampaignStatus.closedByUser, CampaignStatus.exhausted].includes(
-            c.campaign.status
-          )
+        .filter(
+          (c) =>
+            [
+              CampaignStatus.expired,
+              CampaignStatus.closedByUser,
+              CampaignStatus.exhausted
+            ].includes(c.campaign.status) && c.paid > 0
         )
         .sort((a, b) => Number(b.campaign.activeFrom) - Number(a.campaign.activeFrom))
         .map((campaign) => {
           return {
             id: campaign.campaignId,
-            companyName,
-            campaign: campaign.campaign.title,
-            campaignPeriod: (
-              <span>
-                <span>{formatDateShort(new Date(Number(campaign.campaign.activeFrom)))} </span>
-                <br />
-                <span>{formatDateShort(new Date(Number(campaign.campaign.activeTo)))} </span>
-              </span>
-            )
+            columns: [
+              { value: companyName },
+              { value: campaign.campaign.title },
+              {
+                value: campaign.campaign.activeFrom,
+                element: (
+                  <span>
+                    <span>{formatDateShort(new Date(Number(campaign.campaign.activeFrom)))} </span>
+                    <br />
+                    <span>{formatDateShort(new Date(Number(campaign.campaign.activeTo)))} </span>
+                  </span>
+                )
+              }
+            ]
           }
         }),
     [campaigns, companyName]
   )
 
+  useEffect(() => {
+    updateAllCampaignsData(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const handlePreview = useCallback(
     (item: { id: string }) => {
       setSelectedCampaignId(item.id)
@@ -69,19 +79,18 @@ const Invoices = () => {
     ]
   }, [handlePreview])
 
-  return invoiceElements && invoiceElements.length ? (
+  return (
     <>
       <CustomTable
         headings={columnTitles}
-        elements={invoiceElements}
+        data={invoiceElements}
         actions={actions}
+        defaultSortIndex={2}
         shadow="xs"
+        loading={initialDataLoading}
       />
       <InvoicesModal campaignId={selectedCampaignId} opened={opened} close={close} />
     </>
-  ) : (
-    // TODO: needs to be style
-    <Title order={4}>No invoices found.</Title>
   )
 }
 
diff --git a/src/components/CampaignAnalytics/Creatives.tsx b/src/components/CampaignAnalytics/Creatives.tsx
index 92ad8632..2a60a7bb 100644
--- a/src/components/CampaignAnalytics/Creatives.tsx
+++ b/src/components/CampaignAnalytics/Creatives.tsx
@@ -22,7 +22,7 @@ const csvHeaders = {
 }
 
 const Creatives = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: string }) => {
-  const { campaignMappedAnalytics, currencyName, campaign, analyticsKey, loading } =
+  const { campaignMappedAnalytics, currencyName, campaign, analyticsKey, loading, error } =
     useCampaignsAnalyticsData({
       campaignId,
       forAdmin,
@@ -38,32 +38,44 @@ const Creatives = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: st
       const media = getMediaUrlWithProvider(unitForId?.banner?.mediaUrl, IPFS_GATEWAY) || ''
 
       return {
-        media: (
-          <Flex align="center">
-            <CustomAnchor external href={media} mr="sm" c="brand">
-              <ThemeIcon variant="transparent" color="brand">
-                <UrlIcon size="25px" />
-              </ThemeIcon>
-            </CustomAnchor>
-            {unitForId && <MediaThumb width={30} height={30} adUnit={unitForId} previewOnClick />}
-          </Flex>
-        ),
-        size: unitForId?.banner
-          ? `${unitForId?.banner?.format.w}x${unitForId?.banner?.format.h}`
-          : '',
-        impressions: formatCurrency(item.impressions, 0),
-        clicks: formatCurrency(item.clicks, 0),
-        ctr: `${item.ctr}`,
-        paid: `${item.paid.toFixed(2)} ${currencyName}`,
-        link: unitForId?.banner?.targetUrl
+        id: item.segment,
+        columns: [
+          {
+            value: media,
+            element: (
+              <Flex align="center">
+                <CustomAnchor external href={media} mr="sm" c="brand">
+                  <ThemeIcon variant="transparent" color="brand">
+                    <UrlIcon size="25px" />
+                  </ThemeIcon>
+                </CustomAnchor>
+                {unitForId && (
+                  <MediaThumb width={30} height={30} adUnit={unitForId} previewOnClick />
+                )}
+              </Flex>
+            )
+          },
+          {
+            value: unitForId?.banner
+              ? `${unitForId?.banner?.format.w}x${unitForId?.banner?.format.h}`
+              : ''
+          },
+          { value: item.impressions, element: formatCurrency(item.impressions, 0) },
+          { value: item.clicks, element: formatCurrency(item.clicks, 0) },
+          { value: item.ctr, element: `${item.ctr}` },
+          { value: item.paid, element: `${item.paid.toFixed(2)} ${currencyName}` },
+          { value: unitForId?.banner?.targetUrl }
+        ]
       }
     })
   }, [campaign, campaignMappedAnalytics, currencyName, loading])
 
   return (
     <CustomTable
+      error={error}
       headings={headings}
-      elements={elements}
+      data={elements}
+      defaultSortIndex={2}
       loading={loading}
       tableActions={
         <DownloadCSV
diff --git a/src/components/CampaignAnalytics/Placements.tsx b/src/components/CampaignAnalytics/Placements.tsx
index c1571a20..fdc8d61c 100644
--- a/src/components/CampaignAnalytics/Placements.tsx
+++ b/src/components/CampaignAnalytics/Placements.tsx
@@ -1,30 +1,30 @@
 import { CampaignStatus } from 'adex-common'
-import CustomTable, { TableElement, TableRowAction } from 'components/common/CustomTable'
+import CustomTable, { DataElement, TableRowAction } from 'components/common/CustomTable'
 import { getHumneSrcName } from 'helpers'
-import { ReactNode, useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useCampaignsData } from 'hooks/useCampaignsData'
 import { useCampaignsAnalyticsData } from 'hooks/useCampaignAnalytics/useCampaignAnalyticsData'
 import { Group, ThemeIcon, Text } from '@mantine/core'
 import DownloadCSV from 'components/common/DownloadCSV'
 import BlockIcon from 'resources/icons/Block'
 
-type PlacementsTableElement = Omit<TableElement, 'actionData'> & {
-  actionData: {
-    srcId: string
-    isBlocked: boolean
-    srcName: string
-  }
-  id: string
-  placementName: string | ReactNode
-  impressions: string
-  clicks: string
-  ctr: string
-  avgCpm: string
-  paid: string
-}
+// type PlacementsTableElement = Omit<TableElement, 'actionData'> & {
+//   actionData: {
+//     srcId: string
+//     isBlocked: boolean
+//     srcName: string
+//   }
+//   id: string
+//   placementName: string | ReactNode
+//   impressions: string
+//   clicks: string
+//   ctr: string
+//   avgCpm: string
+//   paid: string
+// }
 
 const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: string }) => {
-  const { campaignMappedAnalytics, campaign, currencyName, loading, analyticsKey } =
+  const { campaignMappedAnalytics, campaign, currencyName, loading, analyticsKey, error } =
     useCampaignsAnalyticsData({
       campaignId,
       forAdmin,
@@ -61,14 +61,14 @@ const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: s
     [placement]
   )
 
-  const elements: PlacementsTableElement[] = useMemo(
+  const elements: DataElement[] = useMemo(
     () =>
       !campaign?.id || !campaignMappedAnalytics
         ? []
         : campaignMappedAnalytics.map((item) => {
             const isBlocked = !!campaign.targetingInput.inputs.publishers.nin.includes(item.segment)
             const srcName = getHumneSrcName(item.segment, placement)
-            const data: PlacementsTableElement = {
+            const data: DataElement = {
               rowColor: isBlocked ? 'warning' : 'inherit',
               actionData: {
                 srcName,
@@ -76,23 +76,28 @@ const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: s
                 srcId: item.segment
               },
               id: item.segment,
-              placementName: isBlocked ? (
-                <Group align="center">
-                  <ThemeIcon size="xs" variant="transparent" c="inherit">
-                    <BlockIcon size="100%" />
-                  </ThemeIcon>{' '}
-                  <Text size="sm" c="inherit">
-                    {srcName}
-                  </Text>
-                </Group>
-              ) : (
-                srcName
-              ),
-              impressions: item.impressions.toLocaleString(),
-              clicks: item.clicks.toLocaleString(),
-              ctr: `${item.ctr} %`,
-              avgCpm: `${item.avgCpm} ${currencyName}`,
-              paid: `${item.paid.toFixed(4)} ${currencyName}`
+              columns: [
+                {
+                  value: srcName,
+                  element: isBlocked ? (
+                    <Group align="center">
+                      <ThemeIcon size="xs" variant="transparent" c="inherit">
+                        <BlockIcon size="100%" />
+                      </ThemeIcon>{' '}
+                      <Text size="sm" c="inherit">
+                        {srcName}
+                      </Text>
+                    </Group>
+                  ) : (
+                    srcName
+                  )
+                },
+                { value: item.impressions, element: item.impressions.toLocaleString() },
+                { value: item.clicks, element: item.clicks.toLocaleString() },
+                { value: item.ctr, element: `${item.ctr} %` },
+                { value: item.avgCpm, element: `${item.avgCpm} ${currencyName}` },
+                { value: item.paid, element: `${item.paid.toFixed(4)} ${currencyName}` }
+              ]
             }
 
             return data
@@ -128,7 +133,7 @@ const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: s
     ].includes(campaign.status)
       ? [
           {
-            action: (props: PlacementsTableElement['actionData'][]) =>
+            action: (props: DataElement['actionData'][]) =>
               filterSrc({
                 action: 'exclude',
                 sources: props.map(({ srcId, srcName }) => ({
@@ -145,7 +150,7 @@ const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: s
             color: 'warning'
           },
           {
-            action: (props: PlacementsTableElement['actionData'][]) =>
+            action: (props: DataElement['actionData'][]) =>
               filterSrc({
                 action: 'include',
                 sources: props.map(({ srcId, srcName }) => ({
@@ -165,8 +170,10 @@ const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: s
 
   return (
     <CustomTable
+      error={error}
       headings={headings}
-      elements={elements}
+      data={elements}
+      defaultSortIndex={1}
       loading={loading}
       selectedActions={selectedActions}
       tableActions={
diff --git a/src/components/CampaignAnalytics/Regions.tsx b/src/components/CampaignAnalytics/Regions.tsx
index b0bb2e02..5e4b9721 100644
--- a/src/components/CampaignAnalytics/Regions.tsx
+++ b/src/components/CampaignAnalytics/Regions.tsx
@@ -22,7 +22,7 @@ const csvHeaders = {
 
 const Regions = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: string }) => {
   const [isMapVisible, setIsMapVisible] = useState<boolean>(false)
-  const { campaignMappedAnalytics, currencyName, analyticsKey, loading } =
+  const { campaignMappedAnalytics, currencyName, analyticsKey, loading, error } =
     useCampaignsAnalyticsData({
       campaignId,
       forAdmin,
@@ -38,13 +38,19 @@ const Regions = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: stri
 
     return (
       campaignMappedAnalytics?.map((item) => ({
-        segment: CountryData.get(item.segment)?.name,
-        share: `${((item.paid / paid) * 100).toFixed(2)} %`,
-        impressions: item.impressions,
-        clicks: item.clicks,
-        ctr: `${item.ctr} %`,
-        avgCpm: `${item.avgCpm} ${currencyName}`,
-        paid: `${item.paid.toFixed(4)} ${currencyName}`
+        id: item.segment,
+        columns: [
+          { value: CountryData.get(item.segment)?.name },
+          {
+            value: item.paid / paid,
+            element: `${((item.paid / paid) * 100).toFixed(2)} %`
+          },
+          { value: item.impressions },
+          { value: item.clicks },
+          { value: item.ctr, element: `${item.ctr} %` },
+          { value: item.avgCpm, element: `${item.avgCpm} ${currencyName}` },
+          { value: item.paid, element: `${item.paid.toFixed(4)} ${currencyName}` }
+        ]
       })) || []
     )
   }, [campaignMappedAnalytics, currencyName])
@@ -52,9 +58,11 @@ const Regions = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: stri
   return (
     <Box>
       <CustomTable
+        error={error}
         headings={headings}
-        elements={elements}
+        data={elements}
         loading={loading}
+        defaultSortIndex={1}
         tableActions={
           <Group align="center" justify="end" gap="xs">
             <Button
diff --git a/src/components/CampaignAnalytics/SSPs.tsx b/src/components/CampaignAnalytics/SSPs.tsx
index fce6cbcd..e9672a9c 100644
--- a/src/components/CampaignAnalytics/SSPs.tsx
+++ b/src/components/CampaignAnalytics/SSPs.tsx
@@ -5,7 +5,7 @@ import { useCampaignsAnalyticsData } from 'hooks/useCampaignAnalytics/useCampaig
 const headings = ['SSP', 'Impressions', 'Clicks', 'CTR', 'Average CPM', 'Spent']
 
 const SSPs = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: string }) => {
-  const { campaignMappedAnalytics, currencyName } = useCampaignsAnalyticsData({
+  const { campaignMappedAnalytics, currencyName, error, loading } = useCampaignsAnalyticsData({
     campaignId,
     forAdmin,
     analyticsType: 'ssp'
@@ -15,12 +15,14 @@ const SSPs = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: string
     () =>
       campaignMappedAnalytics?.map((item) => ({
         id: item.segment,
-        segment: item.segment,
-        impressions: item.impressions.toLocaleString(),
-        clicks: item.clicks.toLocaleString(),
-        ctr: `${item.ctr} %`,
-        avgCpm: `${item.avgCpm} ${currencyName}`,
-        paid: `${item.paid.toFixed(4)} ${currencyName}`
+        columns: [
+          { value: item.segment },
+          { value: item.impressions, element: item.impressions.toLocaleString() },
+          { value: item.clicks, element: item.clicks.toLocaleString() },
+          { value: item.ctr, element: `${item.ctr} %` },
+          { value: item.avgCpm, element: `${item.avgCpm} ${currencyName}` },
+          { value: item.paid, element: `${item.paid.toFixed(4)} ${currencyName}` }
+        ]
       })) || [],
     [campaignMappedAnalytics, currencyName]
   )
@@ -28,7 +30,7 @@ const SSPs = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: string
   if (!campaignMappedAnalytics?.length) {
     return <div>No placement found</div>
   }
-  return <CustomTable headings={headings} elements={elements} />
+  return <CustomTable headings={headings} data={elements} error={error} loading={loading} />
 }
 
 export default SSPs
diff --git a/src/components/CampaignAnalytics/TimeFrame.tsx b/src/components/CampaignAnalytics/TimeFrame.tsx
index ee5fa616..2024fa67 100644
--- a/src/components/CampaignAnalytics/TimeFrame.tsx
+++ b/src/components/CampaignAnalytics/TimeFrame.tsx
@@ -1,42 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import {
-  Grid,
-  Title,
-  Flex,
-  Text,
-  lighten,
-  MantineTheme,
-  getPrimaryShade,
-  Box,
-  LoadingOverlay
-} from '@mantine/core'
-import { createStyles } from '@mantine/emotion'
+import { Title, Flex, Text, Box, LoadingOverlay, Alert, Stack, Group, Paper } from '@mantine/core'
 import TimeFrameChart from 'components/common/Chart/TimeFrameChart'
 import { BaseAnalyticsData, FilteredAnalytics, MetricsToShow } from 'types'
 import { formatCurrency } from 'helpers'
-import { useViewportSize, useColorScheme } from '@mantine/hooks'
+import { useViewportSize } from '@mantine/hooks'
 import { useCampaignsAnalyticsData } from 'hooks/useCampaignAnalytics/useCampaignAnalyticsData'
 import ChartControlBtn from './ChartControlBtn'
 
-const useStyles = createStyles((theme: MantineTheme) => {
-  const colorScheme = useColorScheme()
-  const primaryShade = getPrimaryShade(theme, colorScheme)
-
-  return {
-    wrapper: {
-      background: theme.colors.mainBackground[primaryShade],
-      borderRadius: theme.radius.md,
-      padding: theme.spacing.lg,
-      marginBottom: theme.spacing.md,
-      boxShadow: theme.shadows.sm
-    },
-    lighterGray: {
-      color: lighten(theme.colors.mainText[primaryShade], theme.other.shades.lighten.lighter),
-      fontSize: theme.fontSizes.sm
-    }
-  }
-})
-
 function sumArrayProperties(analytics: BaseAnalyticsData[]) {
   const sums = analytics.reduce(
     (sum, x) => {
@@ -58,9 +28,7 @@ function sumArrayProperties(analytics: BaseAnalyticsData[]) {
 }
 
 export const TimeFrame = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: string }) => {
-  const { classes } = useStyles()
-
-  const { campaignMappedAnalytics, analyticsKey, currencyName, loading } =
+  const { campaignMappedAnalytics, analyticsKey, currencyName, loading, error } =
     useCampaignsAnalyticsData({
       campaignId,
       forAdmin,
@@ -119,51 +87,60 @@ export const TimeFrame = ({ forAdmin, campaignId }: { forAdmin: boolean; campaig
   return (
     <Box pos="relative">
       <LoadingOverlay visible={loading} />
-      <Grid p="xs">
-        <Grid.Col className={classes.wrapper}>
-          <Grid>
-            <Grid.Col span="content">
-              <ChartControlBtn
-                value={formatCurrency(totalSum.impressions, 0)}
-                text="Total impressions"
-                bgColor="chartColorOne"
-                onClick={(v: boolean) => handleMetricClick(v, 'impressions')}
-                whiteFontColor
-              />
-            </Grid.Col>
-            <Grid.Col span="content">
-              <ChartControlBtn
-                value={`${formatCurrency(totalSum.clicks, 0)} (${formatCurrency(
-                  totalSum.ctr,
-                  2
-                )} % CTR)`}
-                text="Total clicks & CTR"
-                bgColor="chartColorTwo"
-                onClick={(v: boolean) => handleMetricClick(v, 'clicks')}
-                whiteFontColor
-              />
-            </Grid.Col>
-            <Grid.Col span="content">
-              <ChartControlBtn
-                value={`~ ${formatCurrency(totalSum.avgCpm, 3)} ${currencyName} / CPM`}
-                text="Average CPM"
-                bgColor="chartColorThree"
-                onClick={(v: boolean) => handleMetricClick(v, 'avgCpm')}
-                whiteFontColor
-              />
-            </Grid.Col>
-            <Grid.Col span="content">
-              <ChartControlBtn
-                value={`~ ${formatCurrency(totalSum.paid, 2)} ${currencyName}`}
-                text="Total spent"
-                bgColor="chartColorFour"
-                onClick={(v: boolean) => handleMetricClick(v, 'paid')}
-              />
-            </Grid.Col>
-          </Grid>
-        </Grid.Col>
-        <Grid.Col className={classes.wrapper}>
+
+      <Stack>
+        {error && (
+          <Alert
+            variant="outline"
+            color="error"
+            title={typeof error === 'string' ? error : 'Error loading data'}
+          />
+        )}
+        {!error && !loading && !filteredData.length && (
+          <Alert variant="outline" color="info" title="No data found" />
+        )}
+
+        <Paper p="sm">
+          <Group>
+            <ChartControlBtn
+              value={formatCurrency(totalSum.impressions, 0)}
+              text="Total impressions"
+              bgColor="chartColorOne"
+              onClick={(v: boolean) => handleMetricClick(v, 'impressions')}
+              whiteFontColor
+            />
+
+            <ChartControlBtn
+              value={`${formatCurrency(totalSum.clicks, 0)} (${formatCurrency(
+                totalSum.ctr,
+                2
+              )} % CTR)`}
+              text="Total clicks & CTR"
+              bgColor="chartColorTwo"
+              onClick={(v: boolean) => handleMetricClick(v, 'clicks')}
+              whiteFontColor
+            />
+
+            <ChartControlBtn
+              value={`~ ${formatCurrency(totalSum.avgCpm, 3)} ${currencyName} / CPM`}
+              text="Average CPM"
+              bgColor="chartColorThree"
+              onClick={(v: boolean) => handleMetricClick(v, 'avgCpm')}
+              whiteFontColor
+            />
+
+            <ChartControlBtn
+              value={`~ ${formatCurrency(totalSum.paid, 2)} ${currencyName}`}
+              text="Total spent"
+              bgColor="chartColorFour"
+              onClick={(v: boolean) => handleMetricClick(v, 'paid')}
+            />
+          </Group>
+        </Paper>
+
+        <Paper p="sm">
           <Title order={5}>Chart</Title>
+
           <TimeFrameChart
             width={windowWidth >= 768 ? windowWidth - 315 : windowWidth - 100}
             height={420}
@@ -172,16 +149,12 @@ export const TimeFrame = ({ forAdmin, campaignId }: { forAdmin: boolean; campaig
           />
           {analyticsKey?.period && (
             <Flex align="center" justify="space-between" ml="xl" mr="xl">
-              <Text className={classes.lighterGray}>
-                Starts: {analyticsKey?.period.start?.toString()}
-              </Text>
-              <Text className={classes.lighterGray}>
-                Ends: {analyticsKey?.period.end?.toString()}
-              </Text>
+              <Text c="dimmed">Starts: {analyticsKey?.period.start?.toString()}</Text>
+              <Text c="dimmed">Ends: {analyticsKey?.period.end?.toString()}</Text>
             </Flex>
           )}
-        </Grid.Col>
-      </Grid>
+        </Paper>
+      </Stack>
     </Box>
   )
 }
diff --git a/src/components/CampaignDetails/CampaignDetails.tsx b/src/components/CampaignDetails/CampaignDetails.tsx
index 6afe89a1..6935745c 100644
--- a/src/components/CampaignDetails/CampaignDetails.tsx
+++ b/src/components/CampaignDetails/CampaignDetails.tsx
@@ -119,7 +119,8 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
     if (id) {
       updateCampaignDataById(id)
     }
-  }, [id, updateCampaignDataById])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id])
 
   const canArchive = useMemo(() => {
     return (
@@ -265,9 +266,9 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
         <EditCampaign campaign={campaign} isAdmin={isAdminPanel} />
       ) : (
         <Paper p="lg" shadow="xs">
-          <Grid gutter="lg">
+          <Grid gutter="lg" align="baseline">
             <Grid.Col span={{ md: 12, xl: 6 }}>
-              <Stack gap="xl">
+              <Stack gap="md">
                 <Text fw="bold" size="sm" c="dimmed">
                   Overview
                 </Text>
@@ -397,8 +398,8 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
               </Stack>
             </Grid.Col>
             <Grid.Col span={{ md: 12, xl: 6 }}>
-              <Stack gap="lg">
-                <Stack>
+              <Stack gap="xl">
+                <Stack gap="md">
                   <Text fw="bold" size="sm" c="dimmed">
                     Targeting
                   </Text>
@@ -419,33 +420,31 @@ const CampaignDetails = ({ isAdminPanel }: { isAdminPanel?: boolean }) => {
                   </Paper>
                 </Stack>
                 {!!campaign.adUnits.length && (
-                  <Stack>
-                    <Stack>
-                      <Text fw="bold" size="sm" c="dimmed">
-                        Creatives
-                      </Text>
-                      <Paper bg="lightBackground" p="sm" withBorder>
-                        {campaign.adUnits.map((item: AdUnit, index: number) => {
-                          const isLast = index === campaign.adUnits.length - 1
-                          return (
-                            <CampaignDetailsRow
-                              key={item.id}
-                              textSize="sm"
-                              title={`${item.banner?.format.w}x${item.banner?.format.h}`}
-                              value={
-                                <MediaThumb
-                                  adUnit={item}
-                                  previewOnClick
-                                  title={`Target URL: ${item.banner?.targetUrl}`}
-                                />
-                              }
-                              align="center"
-                              noBorder={isLast}
-                            />
-                          )
-                        })}
-                      </Paper>
-                    </Stack>
+                  <Stack gap="md">
+                    <Text fw="bold" size="sm" c="dimmed">
+                      Creatives
+                    </Text>
+                    <Paper bg="lightBackground" p="sm" withBorder>
+                      {campaign.adUnits.map((item: AdUnit, index: number) => {
+                        const isLast = index === campaign.adUnits.length - 1
+                        return (
+                          <CampaignDetailsRow
+                            key={item.id}
+                            textSize="sm"
+                            title={`${item.banner?.format.w}x${item.banner?.format.h}`}
+                            value={
+                              <MediaThumb
+                                adUnit={item}
+                                previewOnClick
+                                title={`Target URL: ${item.banner?.targetUrl}`}
+                              />
+                            }
+                            align="center"
+                            noBorder={isLast}
+                          />
+                        )
+                      })}
+                    </Paper>
                   </Stack>
                 )}
               </Stack>
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index 2393d3d6..c8087ff1 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -1,12 +1,16 @@
 import {
-  Campaign,
+  // Campaign,
   CampaignStatus,
   // CampaignType,
   EventType
 } from 'adex-common'
-import { Container, Flex, Text, Loader, UnstyledButton, Anchor, Stack, Group } from '@mantine/core'
+import { Container, Flex, Text, UnstyledButton, Anchor, Stack, Group } from '@mantine/core'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import CustomTable, { TableElement, TableRowAction } from 'components/common/CustomTable'
+import CustomTable, {
+  DataElement,
+  TableRowAction
+  // TableElement
+} from 'components/common/CustomTable'
 import { Link, useNavigate } from 'react-router-dom'
 import { useCampaignsData } from 'hooks/useCampaignsData'
 import { parseBigNumTokenAmountToDecimal, maskAddress, periodNumberToDate, MINUTE } from 'helpers'
@@ -51,22 +55,22 @@ const getStatusOrder = (status: CampaignStatus) => {
   }
 }
 
-type DashboardTableElement = Omit<TableElement, 'actionData'> & {
-  actionData: { campaign: Campaign; isDraft: boolean; canArchive: boolean }
-  title: string | JSX.Element
-  placement: string
-  status: {
-    value: CampaignStatus
-    element: JSX.Element
-  }
-  served: string
-  budget: string
-  impressions: number
-  clicks: number
-  ctr: string
-  period: JSX.Element
-  cpm: JSX.Element
-}
+// type DashboardTableElement = Omit<TableElement, 'actionData'> & {
+//   actionData: { campaign: Campaign; isDraft: boolean; canArchive: boolean }
+//   title: string | JSX.Element
+//   placement: string
+//   status: {
+//     value: CampaignStatus
+//     element: JSX.Element
+//   }
+//   served: string
+//   budget: string
+//   impressions: number
+//   clicks: number
+//   ctr: string
+//   period: JSX.Element
+//   cpm: JSX.Element
+// }
 
 const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accountId?: string }) => {
   const navigate = useNavigate()
@@ -108,7 +112,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
     }
   }, [campaignsData, isAdminPanel, accountId, showArchived])
 
-  const elements: DashboardTableElement[] = useMemo(
+  const elements: DataElement[] = useMemo(
     () =>
       filteredCampaignData.campaignData.length
         ? filteredCampaignData.campaignData.map((cmpData) => {
@@ -121,6 +125,8 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
 
             const archived = cmpData.campaign.archived
 
+            const served = cmpData.paid && budget ? Math.round((cmpData.paid / budget) * 100) : 0
+
             return {
               actionData: {
                 campaign,
@@ -134,80 +140,98 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
               },
               rowColor: archived ? 'warning' : undefined,
               id: cmpData.campaignId,
-              title: (
-                <Stack gap="xs">
-                  <Group wrap="nowrap">
-                    {archived && (
-                      <BadgeStatusCampaign type={cmpData.campaign.status} isArchived={archived} />
-                    )}
-                    <Text size="sm" truncate maw={200}>
-                      {cmpData.campaign.title}
-                    </Text>
-                  </Group>
-
-                  {isAdminPanel && (
-                    <Anchor
-                      component={Link}
-                      inline
-                      underline="never"
-                      size="xs"
-                      to={`/dashboard/admin/user-account/${campaign.owner}`}
-                      c="secondaryText"
-                    >
-                      {maskAddress(campaign.owner)}
-                    </Anchor>
-                  )}
-                </Stack>
-              ),
-              // type: CampaignType[cmpData.campaign.type],
-              placement:
-                cmpData.campaign.targetingInput.inputs.placements.in[0] === 'app'
-                  ? 'App'
-                  : 'Website',
-              status: {
-                value: cmpData.campaign.status,
-                element: <BadgeStatusCampaign type={cmpData.campaign.status} />
-              },
-              served:
-                cmpData.paid && budget ? `${Math.round((cmpData.paid / budget) * 100)} %` : '0 %',
-              // TODO: get token name
-              budget: `${budget} USDC`,
-              impressions: cmpData.impressions,
-              clicks: cmpData.clicks,
-              ctr: `${cmpData.ctr || 0} %`,
-              period: (
-                <Stack gap="xs">
-                  <Text size="sm" inline>
-                    {cmpData.campaign.activeFrom
-                      ? periodNumberToDate(cmpData.campaign.activeFrom)
-                      : 'N/A'}
-                  </Text>
-
-                  <Text size="sm" inline>
-                    {cmpData.campaign.activeTo
-                      ? periodNumberToDate(cmpData.campaign.activeTo)
-                      : 'N/A'}
-                  </Text>
-                </Stack>
-              ),
-              cpm: (
-                <Stack gap="xs">
-                  <Text size="sm" inline styles={{ root: { whiteSpace: 'nowrap' } }}>
-                    {`${(
-                      parseBigNumTokenAmountToDecimal(
-                        cmpData.campaign.pricingBounds[EventType.IMPRESSION]?.min || 0n,
-                        decimals
-                      ) * 1000
-                    ).toFixed(2)} - ${(
-                      parseBigNumTokenAmountToDecimal(
-                        cmpData.campaign.pricingBounds[EventType.IMPRESSION]?.max || 0n,
-                        decimals
-                      ) * 1000
-                    ).toFixed(2)}`}
-                  </Text>
-                  <Text size="sm" inline>{`(avg: ${cmpData.avgCpm?.toFixed(2) || 0})`}</Text>
-                </Stack>
-              )
+              columns: [
+                {
+                  value: cmpData.campaign.title,
+                  element: (
+                    <Stack gap="xs">
+                      <Group wrap="nowrap">
+                        {archived && (
+                          <BadgeStatusCampaign
+                            type={cmpData.campaign.status}
+                            isArchived={archived}
+                          />
+                        )}
+                        <Text size="sm" truncate maw={200}>
+                          {cmpData.campaign.title}
+                        </Text>
+                      </Group>
+
+                      {isAdminPanel && (
+                        <Anchor
+                          component={Link}
+                          inline
+                          underline="never"
+                          size="xs"
+                          to={`/dashboard/admin/user-account/${campaign.owner}`}
+                          c="secondaryText"
+                        >
+                          {maskAddress(campaign.owner)}
+                        </Anchor>
+                      )}
+                    </Stack>
+                  )
+                },
+                // type: CampaignType[cmpData.campaign.type],
+                {
+                  value:
+                    cmpData.campaign.targetingInput.inputs.placements.in[0] === 'app'
+                      ? 'App'
+                      : 'Website'
+                },
+                {
+                  value: getStatusOrder(cmpData.campaign.status),
+                  element: <BadgeStatusCampaign type={cmpData.campaign.status} />
+                },
+                {
+                  value: served,
+                  element: `${served} %`
+                },
+                // TODO: get token name
+                { value: budget, element: `${budget} USDC` },
+                { value: cmpData.impressions },
+                { value: cmpData.clicks },
+                { value: Number(cmpData.ctr), element: `${cmpData.ctr || 0} %` },
+                {
+                  value: cmpData.campaign.created,
+                  element: (
+                    <Stack gap="xs">
+                      <Text size="sm" inline>
+                        {cmpData.campaign.activeFrom
+                          ? periodNumberToDate(cmpData.campaign.activeFrom)
+                          : 'N/A'}
+                      </Text>
+
+                      <Text size="sm" inline>
+                        {cmpData.campaign.activeTo
+                          ? periodNumberToDate(cmpData.campaign.activeTo)
+                          : 'N/A'}
+                      </Text>
+                    </Stack>
+                  )
+                },
+                {
+                  value: cmpData.campaign.pricingBounds[EventType.IMPRESSION]?.min,
+                  element: (
+                    <Stack gap="xs">
+                      <Text size="sm" inline styles={{ root: { whiteSpace: 'nowrap' } }}>
+                        {`${(
+                          parseBigNumTokenAmountToDecimal(
+                            cmpData.campaign.pricingBounds[EventType.IMPRESSION]?.min || 0n,
+                            decimals
+                          ) * 1000
+                        ).toFixed(2)} - ${(
+                          parseBigNumTokenAmountToDecimal(
+                            cmpData.campaign.pricingBounds[EventType.IMPRESSION]?.max || 0n,
+                            decimals
+                          ) * 1000
+                        ).toFixed(2)}`}
+                      </Text>
+                      <Text size="sm" inline>{`(avg: ${cmpData.avgCpm?.toFixed(2) || 0})`}</Text>
+                    </Stack>
+                  )
+                }
+              ]
             }
           })
         : [],
@@ -215,21 +239,21 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
   )
 
   const handlePreview = useCallback(
-    (data: DashboardTableElement['actionData']) => {
+    (data: DataElement['actionData']) => {
       navigate(`/dashboard/campaign-details/${isAdminPanel ? 'admin/' : ''}${data.campaign.id}`, {})
     },
     [isAdminPanel, navigate]
   )
 
   const handleAnalytics = useCallback(
-    (data: DashboardTableElement['actionData']) => {
+    (data: DataElement['actionData']) => {
       navigate(`/dashboard/campaign-analytics/${isAdminPanel ? 'admin/' : ''}${data.campaign.id}`)
     },
     [isAdminPanel, navigate]
   )
 
   const handleEditDraft = useCallback(
-    (data: DashboardTableElement['actionData'], isDuplicate?: boolean) => {
+    (data: DataElement['actionData'], isDuplicate?: boolean) => {
       if (isAdminPanel) {
         return
       }
@@ -255,20 +279,20 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
   )
 
   const handleEdit = useCallback(
-    (data: DashboardTableElement['actionData']) =>
+    (data: DataElement['actionData']) =>
       navigate(`/dashboard/campaign-details/${data.campaign.id}/budget?edit=true`, {}),
     [navigate]
   )
 
   const handleDuplicate = useCallback(
-    (campaign: DashboardTableElement['actionDta']) => {
+    (campaign: DataElement['actionData']) => {
       return handleEditDraft(campaign, true)
     },
     [handleEditDraft]
   )
 
   const handleDelete = useCallback(
-    (data: DashboardTableElement['actionData']) =>
+    (data: DataElement['actionData']) =>
       modals.openConfirmModal(
         defaultConfirmModalProps({
           text: `Are you sure want to delete draft "${data.campaign.title}"`,
@@ -281,7 +305,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
   )
 
   const handleArchive = useCallback(
-    (data: DashboardTableElement['actionData']) => {
+    (data: DataElement['actionData']) => {
       const cmp = data.campaign
       const confirm = cmp?.archived ? 'Unarchive' : 'Archive'
 
@@ -310,7 +334,8 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
 
   useEffect(() => {
     updateAllCampaignsData(true)
-  }, [updateAllCampaignsData])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   const actions = useMemo(() => {
     const dashboardActions: TableRowAction[] = [
@@ -323,7 +348,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
         action: handleAnalytics,
         label: 'Show Analytics',
         icon: <AnalyticsIcon />,
-        disabled: (ada: DashboardTableElement['actionData']) =>
+        disabled: (ada: DataElement['actionData']) =>
           ada.isDraft ||
           [
             CampaignStatus.rejected,
@@ -341,15 +366,15 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
             action: handleEditDraft,
             label: 'Continue Edit',
             icon: <EditIcon />,
-            hide: (ada: DashboardTableElement['actionData']) => !ada.isDraft
+            hide: (ada: DataElement['actionData']) => !ada.isDraft
           },
           {
             action: handleEdit,
-            disabled: (ada: DashboardTableElement['actionData']) =>
+            disabled: (ada: DataElement['actionData']) =>
               ![CampaignStatus.active, CampaignStatus.paused].includes(ada.campaign.status),
             label: 'Edit',
             icon: <EditIcon />,
-            hide: (ada: DashboardTableElement['actionData']) => ada.isDraft
+            hide: (ada: DataElement['actionData']) => ada.isDraft
           },
           {
             action: handleDuplicate,
@@ -358,17 +383,17 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
           },
           {
             action: handleArchive,
-            label: (ada: DashboardTableElement['actionData']) =>
+            label: (ada: DataElement['actionData']) =>
               `${ada.campaign.archived ? 'Unarchive' : 'Archive'}  Campaign`,
             icon: <DeleteIcon />,
-            hide: (ada: DashboardTableElement['actionData']) => !ada.canArchive
+            hide: (ada: DataElement['actionData']) => !ada.canArchive
           },
           {
             action: handleDelete,
             label: 'Delete Draft',
             icon: <DeleteIcon />,
             color: 'red',
-            hide: (ada: DashboardTableElement['actionData']) => !ada.isDraft
+            hide: (ada: DataElement['actionData']) => !ada.isDraft
           }
         ]
       )
@@ -390,7 +415,7 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
     <Container fluid>
       <Flex direction="column" justify="start">
         <Flex justify="space-between" align="center">
-          <Text size="sm" color="secondaryText" fw="bold" mb="md">
+          <Text size="sm" c="secondaryText" fw="bold" mb="md">
             {isAdminPanel ? '* admin' : 'All campaigns'}
           </Text>
 
@@ -403,18 +428,15 @@ const Dashboard = ({ isAdminPanel, accountId }: { isAdminPanel?: boolean; accoun
             </UnstyledButton>
           )}
         </Flex>
-        {!initialDataLoading ? (
-          <CustomTable
-            shadow={!isAdminPanel ? 'xs' : undefined}
-            headings={campaignHeaders}
-            elements={elements}
-            actions={actions}
-          />
-        ) : (
-          <Flex justify="center" align="center" h="60vh">
-            <Loader size="xl" />
-          </Flex>
-        )}
+        <CustomTable
+          shadow={!isAdminPanel ? 'xs' : undefined}
+          defaultSortIndex={2}
+          defaultSortDirection={1}
+          headings={campaignHeaders}
+          data={elements}
+          actions={actions}
+          loading={initialDataLoading}
+        />
       </Flex>
     </Container>
   )
diff --git a/src/components/EditCampaign/EditCampaign.tsx b/src/components/EditCampaign/EditCampaign.tsx
index 06237c51..60000d0a 100644
--- a/src/components/EditCampaign/EditCampaign.tsx
+++ b/src/components/EditCampaign/EditCampaign.tsx
@@ -229,7 +229,8 @@ const EditCampaign = ({ campaign, isAdmin }: { campaign: Campaign; isAdmin?: boo
       }
       const inputs: Partial<Campaign['targetingInput']['inputs']> = {
         categories: values.targetingInput.inputs.categories,
-        location: values.targetingInput.inputs.location
+        location: values.targetingInput.inputs.location,
+        advanced: values.targetingInput.inputs.advanced
       }
 
       const { success } = await editCampaign(campaign.id, pricingBounds, inputs)
diff --git a/src/components/LogIn/LogIn.tsx b/src/components/LogIn/LogIn.tsx
index 9397a2d1..c69872ad 100644
--- a/src/components/LogIn/LogIn.tsx
+++ b/src/components/LogIn/LogIn.tsx
@@ -15,7 +15,7 @@ import LogInBackground from 'resources/backgrounds/pattern.svg'
 import LowerShape from 'resources/backgrounds/lowerShape.svg'
 import UpperShape from 'resources/backgrounds/upperShape.svg'
 import AdExLogo from 'resources/logos/AdExLogo'
-import { useCallback, useEffect, useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import HelpIcon from 'resources/icons/Help'
 import CustomAnchor from 'components/common/customAnchor/CustomAnchor'
 import { useNavigate } from 'react-router-dom'
@@ -49,7 +49,6 @@ function LogIn() {
     if (authenticated) navigate('/dashboard', { replace: true })
   }, [authenticated, navigate])
 
-  const handleGetStartedBtnClicked = useCallback(() => connectWallet(), [connectWallet])
   return (
     <Container fluid h="100vh" className={classes.container}>
       <LoadingOverlay
@@ -58,7 +57,7 @@ function LogIn() {
         overlayProps={{ blur: 2 }}
       />
       <Flex h="100%" pt="xl" pb="xl" direction="column" justify="space-around" align="center">
-        <Box c="white" w={191}>
+        <Box c="brandDarker" w={191}>
           <AdExLogo />
         </Box>
         <div>
@@ -69,7 +68,7 @@ function LogIn() {
             Reach Beyond Web3
           </Title>
         </div>
-        <Button variant="filled" size="xl" onClick={handleGetStartedBtnClicked}>
+        <Button variant="filled" size="xl" onClick={connectWallet}>
           Get Started
         </Button>
         <Flex direction="column" align="center">
diff --git a/src/components/SideNav/NavLink.tsx b/src/components/SideNav/NavLink.tsx
index 623c00f6..bdf6c038 100644
--- a/src/components/SideNav/NavLink.tsx
+++ b/src/components/SideNav/NavLink.tsx
@@ -7,9 +7,10 @@ type NavLinkProps = LinkProps & {
   label: string
   action?: () => void
   active?: boolean
+  external?: boolean
 }
 
-function NavLink({ to = '', icon, label, action, active }: NavLinkProps) {
+function NavLink({ to = '', icon, label, action, active, external }: NavLinkProps) {
   return (
     <Group wrap="nowrap" align="stretch" justify="stretch" gap="0">
       <Divider orientation="vertical" size={4} color="brand" opacity={active ? '1' : '0'} mr={4} />
@@ -17,6 +18,7 @@ function NavLink({ to = '', icon, label, action, active }: NavLinkProps) {
         radius="sm"
         to={to}
         component={Link}
+        target={external ? '_blank' : undefined}
         title={label}
         onClick={action}
         variant="subtle"
diff --git a/src/components/SideNav/SideNav.tsx b/src/components/SideNav/SideNav.tsx
index 24baea1f..095e48be 100644
--- a/src/components/SideNav/SideNav.tsx
+++ b/src/components/SideNav/SideNav.tsx
@@ -18,6 +18,7 @@ import AdExLogo from 'resources/logos/AdExLogo'
 import { useMemo } from 'react'
 import { appVersion } from 'helpers'
 import { IS_MANUAL_DEPOSITING } from 'constants/balances'
+import CustomAnchor from 'components/common/customAnchor'
 import NavLink from './NavLink'
 import Balance from './Balance'
 import CreateCampaignBtn from './CreateCampaignBtn'
@@ -78,7 +79,7 @@ function SideNav() {
 
           <NavLink
             to="https://help.adex.network/hc/en-us"
-            target="_blank"
+            external
             icon={<HelpIcon />}
             label="Help Center"
           />
@@ -93,15 +94,17 @@ function SideNav() {
         </Stack>
       </AppShell.Section>
       <AppShell.Section mx="xs" mt="xl">
-        <Text c="secondaryText" size="sm">
-          ©{year} AdEx.
-        </Text>
-        <Text c="secondaryText" size="sm">
-          All Rights Reserved.
-        </Text>
-        <Text c="secondaryText" size="sm">
-          V.{appVersion}-beta
-        </Text>
+        <Stack gap="xs" c="secondaryText">
+          <CustomAnchor c="secondaryText" inline size="sm" external href="https://adex.network">
+            ©{year} AdEx
+          </CustomAnchor>
+          <Text inline size="sm">
+            All Rights Reserved
+          </Text>
+          <Text inline size="sm">
+            V.{appVersion}-beta
+          </Text>
+        </Stack>
       </AppShell.Section>
     </>
   )
diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
index 58ee0115..032ab9f6 100644
--- a/src/components/TopBar/TopBar.tsx
+++ b/src/components/TopBar/TopBar.tsx
@@ -15,17 +15,15 @@ import {
 import { createStyles } from '@mantine/emotion'
 import { formatDate, maskAddress } from 'helpers/formatters'
 import useAccount from 'hooks/useAccount'
-import { useCallback, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import DownArrowIcon from 'resources/icons/DownArrow'
 import LogoutIcon from 'resources/icons/Logout'
 // import BellIcon from 'resources/icons/Bell'
 import Blockies from 'components/common/Blockies'
 // import ValidatorsIcon from 'resources/icons/Validators'
 // import WithdrawIcon from 'resources/icons/Withdraw'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useLocation, useParams } from 'react-router-dom'
 import StakingIcon from 'resources/icons/Staking'
-import { useAdExApi } from 'hooks/useAdexServices'
-import useCustomNotifications from 'hooks/useCustomNotifications'
 import CopyIcon from 'resources/icons/Copy'
 import { useColorScheme } from '@mantine/hooks'
 
@@ -64,8 +62,7 @@ const formatTitle = (str: string) => {
 
 function TopBar() {
   const { classes, cx } = useStyles()
-  const { adexAccount, disconnectWallet, resetAdexAccount } = useAccount()
-  const { showNotification } = useCustomNotifications()
+  const { adexAccount, logOut } = useAccount()
   const location = useLocation()
   const { id } = useParams()
   const splitPath = useMemo(() => location.pathname.split('/'), [location.pathname])
@@ -81,45 +78,6 @@ function TopBar() {
 
   const [opened, setOpened] = useState<boolean>(false)
 
-  const { adexServicesRequest } = useAdExApi()
-  const navigate = useNavigate()
-
-  const handleLogutBtnClicked = useCallback(() => {
-    if (!adexAccount.accessToken && !adexAccount.refreshToken) return
-
-    adexServicesRequest('backend', {
-      route: '/dsp/logout',
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: {
-        refreshToken: adexAccount.refreshToken
-      }
-    })
-      .then((res) => {
-        if (!res) throw new Error('Logout failed')
-        if (Object.keys(res).length === 0 && res.constructor === Object) {
-          disconnectWallet()
-          resetAdexAccount()
-          showNotification('info', 'Successfully logged out', 'Logging out')
-          navigate('/login', { replace: true })
-        }
-      })
-      .catch((e) => {
-        console.error('Logging out failed', e)
-        showNotification('error', e.message, 'Logging out failed')
-      })
-  }, [
-    disconnectWallet,
-    adexAccount.accessToken,
-    adexAccount.refreshToken,
-    adexServicesRequest,
-    resetAdexAccount,
-    showNotification,
-    navigate
-  ])
-
   return (
     <Flex
       direction="row"
@@ -195,10 +153,7 @@ function TopBar() {
             {/* <Menu.Item rightSection={<ValidatorsIcon className={classes.icon} />}>
               Validators
             </Menu.Item> */}
-            <Menu.Item
-              onClick={handleLogutBtnClicked}
-              rightSection={<LogoutIcon className={classes.icon} />}
-            >
+            <Menu.Item onClick={logOut} rightSection={<LogoutIcon className={classes.icon} />}>
               Log out
             </Menu.Item>
           </Menu.Dropdown>
diff --git a/src/components/common/CustomTable/CustomTable.tsx b/src/components/common/CustomTable/CustomTable.tsx
index a93820ed..319ef7e1 100644
--- a/src/components/common/CustomTable/CustomTable.tsx
+++ b/src/components/common/CustomTable/CustomTable.tsx
@@ -2,7 +2,6 @@ import {
   Group,
   Pagination,
   Table,
-  Divider,
   Text,
   Stack,
   Menu,
@@ -17,42 +16,53 @@ import {
   LoadingOverlay,
   Checkbox,
   // CheckIcon,
-  Button
+  Button,
+  Alert
 } from '@mantine/core'
-import { useSet, useMediaQuery } from '@mantine/hooks'
+import { useSet } from '@mantine/hooks'
 import usePagination from 'hooks/usePagination'
-import { useMemo, PropsWithChildren, ReactNode, useCallback } from 'react'
+import { useMemo, PropsWithChildren, ReactNode, useCallback, useState } from 'react'
+import DownArrowIcon from 'resources/icons/DownArrow'
 import Dots from 'resources/icons/TreeDotsMenu'
 
-export type TableElement = {
-  id?: string
+export type ColumnElement = {
+  value?: string | number | bigint | undefined
+  element?: string | ReactNode
+  label?: string
+}
+
+export type DataElement = {
+  id: string
   rowColor?: MantineColor
   actionData?: any
-  [index: string]: any
+  columns: ColumnElement[]
 }
 
 export type TableRowAction = {
-  action: (e: TableElement['actionData']) => any
-  label: ((e: TableElement['actionData']) => string) | string
+  action: (e: DataElement['actionData']) => any
+  label: ((e: DataElement['actionData']) => string) | string
   color?: MantineColor
-  icon?: ((e: TableElement['actionData']) => ReactNode) | ReactNode
-  disabled?: (e?: TableElement['actionData']) => boolean
-  hide?: (e?: TableElement['actionData']) => boolean
+  icon?: ((e: DataElement['actionData']) => ReactNode) | ReactNode
+  disabled?: (e?: DataElement['actionData']) => boolean
+  hide?: (e?: DataElement['actionData']) => boolean
 }
 
 export type CustomTableProps = PropsWithChildren &
   TableProps & {
     headings: string[]
-    elements: Array<TableElement>
+    data: DataElement[]
     pageSize?: number
     actions?: TableRowAction[]
     shadow?: MantineShadow
     loading?: boolean
     selectedActions?: TableRowAction[]
     tableActions?: ReactNode
+    error?: string | boolean
+    defaultSortIndex?: number
+    defaultSortDirection?: 1 | -1
   }
 
-const getLabel = (label: TableRowAction['label'], actionData?: TableElement['actionData']) => {
+const getLabel = (label: TableRowAction['label'], actionData?: DataElement['actionData']) => {
   if (typeof label === 'function') {
     return label(actionData)
   }
@@ -60,7 +70,7 @@ const getLabel = (label: TableRowAction['label'], actionData?: TableElement['act
   return label
 }
 
-const getIcon = (icon: TableRowAction['icon'], actionData?: TableElement['actionData']) => {
+const getIcon = (icon: TableRowAction['icon'], actionData?: DataElement['actionData']) => {
   if (typeof icon === 'function') {
     return icon(actionData)
   }
@@ -70,38 +80,79 @@ const getIcon = (icon: TableRowAction['icon'], actionData?: TableElement['action
 
 export const CustomTable = ({
   headings,
-  elements,
+  data,
   pageSize,
   actions,
   shadow = 'none',
   loading,
   selectedActions,
   tableActions,
+  error,
+  defaultSortIndex,
+  defaultSortDirection,
   ...tableProps
 }: CustomTableProps) => {
-  const isMobile = useMediaQuery('(max-width: 75rem)')
   const selectedElements = useSet<string>()
   const hasSelectActions = useMemo(() => !!selectedActions?.length, [selectedActions?.length])
+  const headingIndexOffset = useMemo(() => (hasSelectActions ? -1 : 0), [hasSelectActions])
 
-  const columns: string[] = useMemo(
-    () =>
-      typeof elements[0] === 'object'
-        ? Object.keys(elements[0]).filter(
-            (e: string) => e !== 'id' && e !== 'rowColor' && e !== 'actionData'
-          )
-        : [],
-    [elements]
-  )
+  const maxItemsPerPage = pageSize || 10
 
-  const maxItemsPerPage = pageSize || (isMobile ? elements.length : 10)
-  const { maxPages, defaultPage, startIndex, endIndex, onNextPage, onPreviousPage, onChange } =
-    usePagination({
-      elementsLength: elements.length,
-      maxItemsPerPage
-    })
-  const list = useMemo(() => {
-    return elements.slice(startIndex, endIndex)
-  }, [elements, startIndex, endIndex])
+  const {
+    maxPages,
+    page,
+    startIndex,
+    endIndex,
+    onNextPage,
+    onPreviousPage,
+    onChange: setPage
+  } = usePagination({
+    elementsLength: data.length,
+    maxItemsPerPage
+  })
+
+  const [sorting, setSorting] = useState<{ sortIndex: number; sortDirection: -1 | 1 }>({
+    sortIndex: defaultSortIndex !== undefined ? defaultSortIndex : -1,
+    sortDirection: defaultSortDirection !== undefined ? defaultSortDirection : -1
+  })
+
+  const filteredData = useMemo(() => {
+    const { sortIndex, sortDirection } = sorting
+
+    console.log({ sortIndex })
+
+    const next = [...data]
+      .sort((a, b) => {
+        if (sortIndex < 0) {
+          return 0
+        }
+
+        const aVal = a.columns[sortIndex]?.value || 0
+        const bVal = b.columns[sortIndex]?.value || 0
+
+        if (typeof aVal === 'string' && typeof bVal === 'string') {
+          return aVal.localeCompare(bVal) * sortDirection
+        }
+
+        if (typeof aVal === 'number' && typeof bVal === 'number') {
+          return (aVal - bVal) * sortDirection
+        }
+        if (typeof aVal === 'bigint' && typeof bVal === 'bigint') {
+          return Number(aVal - bVal) * sortDirection
+        }
+
+        if (aVal > bVal) {
+          return 1 * sortDirection
+        }
+        if (aVal < bVal) {
+          return -1 * sortDirection
+        }
+        return 0
+      })
+      .slice(startIndex, endIndex)
+
+    return next
+  }, [sorting, data, startIndex, endIndex])
 
   const handleCheckbox = useCallback(
     (checked: boolean, id: string) => {
@@ -111,17 +162,17 @@ export const CustomTable = ({
   )
 
   const currentPageElementsAllSelected: boolean = useMemo(
-    () => !!selectedElements.size && list.every((x) => selectedElements.has(x.id || '')),
+    () => !!selectedElements.size && filteredData.every((x) => selectedElements.has(x.id || '')),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [list, selectedElements, selectedElements.size]
+    [filteredData, selectedElements, selectedElements.size]
   )
 
   const handleCheckboxMaster = useCallback(
     (all?: boolean) =>
-      [...(all ? elements : list)].forEach((x) =>
+      [...(all ? data : filteredData)].forEach((x) =>
         selectedElements[currentPageElementsAllSelected ? 'delete' : 'add'](x.id || '')
       ),
-    [currentPageElementsAllSelected, elements, list, selectedElements]
+    [currentPageElementsAllSelected, data, filteredData, selectedElements]
   )
 
   const masterActionMenu = useMemo(() => {
@@ -139,7 +190,7 @@ export const CustomTable = ({
                 onClick={() => {
                   a.action(
                     Array.from(selectedElements.values()).map(
-                      (id) => elements.find((x) => x.id === id)?.actionData
+                      (id) => data.find((x) => x.id === id)?.actionData
                     )
                   )
                   selectedElements.clear()
@@ -168,35 +219,30 @@ export const CustomTable = ({
     [currentPageElementsAllSelected, handleCheckboxMaster, hasSelectActions]
   )
 
-  const colHeadings: string[] = useMemo(
-    () => [...(hasSelectActions ? ['select'] : []), ...headings, ...(actions ? ['actions'] : [])],
-    [actions, headings, hasSelectActions]
-  )
-
-  const rows = useMemo(() => {
-    return list.map((e, i) => {
-      const activeActions = [...(actions || [])].filter((a) => !a.hide?.(e.actionData))
-      const maxActions = isMobile ? activeActions.length : 3
+  const { rows, actionHeadings } = useMemo(() => {
+    const tableRows = filteredData.map((rowData, index) => {
+      const activeActions = [...(actions || [])].filter((a) => !a.hide?.(rowData.actionData))
+      const maxActions = 3
 
-      const actionsMenu = activeActions?.length && (
-        <Group justify={isMobile ? 'auto' : 'right'} gap="sm" wrap="nowrap">
+      const actionsMenu = activeActions?.length ? (
+        <Group justify="right" gap="sm" wrap="nowrap">
           {activeActions.slice(0, maxActions).map((a) => {
-            const label = getLabel(a.label, e.actionData)
+            const label = getLabel(a.label, rowData.actionData)
             return (
               <Tooltip key={label} label={label}>
                 <ActionIcon
                   size="sm"
                   variant="transparent"
                   color={a.color || 'mainText'}
-                  onClick={() => a.action(e.actionData || e)}
-                  disabled={a.disabled?.(e.actionData || e)}
+                  onClick={() => a.action(rowData.actionData || rowData)}
+                  disabled={a.disabled?.(rowData.actionData || rowData)}
                 >
-                  {getIcon(a.icon, e.actionData)}
+                  {getIcon(a.icon, rowData.actionData)}
                 </ActionIcon>
               </Tooltip>
             )
           })}
-          {!isMobile && activeActions.length > maxActions && (
+          {activeActions.length > maxActions && (
             <Menu shadow="lg" withArrow>
               <Menu.Target>
                 <ActionIcon size="23px" variant="transparent" color="mainText" component="div">
@@ -206,18 +252,18 @@ export const CustomTable = ({
 
               <Menu.Dropdown>
                 {activeActions.slice(maxActions).map((a) => {
-                  const label = getLabel(a.label, e.actionData)
-                  const disabled = a.disabled?.(e.actionData || e)
+                  const label = getLabel(a.label, rowData.actionData)
+                  const disabled = a.disabled?.(rowData.actionData || rowData)
                   return (
                     <Menu.Item
                       color={a.color || 'mainText'}
                       key={label}
                       leftSection={
                         <ThemeIcon size="sm" variant="transparent" color={a.color || 'mainText'}>
-                          {getIcon(a.icon, e.actionData)}
+                          {getIcon(a.icon, rowData.actionData)}
                         </ThemeIcon>
                       }
-                      onClick={() => a.action(e.actionData || e)}
+                      onClick={() => a.action(rowData.actionData || rowData)}
                       disabled={disabled}
                     >
                       {label}
@@ -228,126 +274,181 @@ export const CustomTable = ({
             </Menu>
           )}
         </Group>
-      )
+      ) : null
 
-      const color = e.rowColor
-      const rowKey = e.id?.toString() || i
-
-      const colsToMap = [
-        ...(hasSelectActions ? ['select'] : []),
-        ...columns,
-        ...(activeActions.length ? ['actions'] : [])
-      ]
-
-      const cols = colsToMap.map((column, cidx) => {
-        const colElement =
-          e[column]?.element ||
-          e[column] ||
-          (column === 'select' && (
-            <Checkbox
-              size="sm"
-              aria-label="Select row"
-              checked={selectedElements.has(e.id || '')}
-              onChange={(el) => handleCheckbox(el.currentTarget.checked, e.id || '')}
-            />
-          )) ||
-          (column === 'actions' && actionsMenu)
-
-        const el =
-          typeof colElement !== 'object' ? (
-            <Text ta="left" size="sm" truncate maw={200}>
-              {colElement}
-            </Text>
-          ) : (
-            colElement
-          )
+      const color = rowData.rowColor
+      const rowKey = rowData.id?.toString() || index
 
-        return isMobile ? (
-          <Stack gap="xs">
-            <Group key={rowKey + column} grow align="center" px="sm">
-              <Text ta="left" tt="capitalize" fw="bold" size="sm">
-                {colsToMap[cidx]}:
-              </Text>
-              {el}
-            </Group>
-            <Divider hidden={cidx === colsToMap.length - 1} />
-          </Stack>
+      const cols = rowData.columns.map((column) => {
+        const colElement = column?.element || column?.value?.toString()
+
+        return typeof colElement !== 'object' ? (
+          <Text size="sm" truncate maw={200}>
+            {colElement}
+          </Text>
         ) : (
-          <Table.Td key={column} c={color} miw="fit-content">
-            {el}
-          </Table.Td>
+          colElement
         )
       })
 
-      if (isMobile) {
-        return (
-          <Paper py="sm" shadow="xs">
-            <Stack key={rowKey} gap="xs" align="stretch" justify="center">
-              {/* <Divider color="lightBackground" size={14} /> */}
-              {cols}
-            </Stack>
-          </Paper>
+      if (hasSelectActions) {
+        cols.unshift(
+          <Checkbox
+            size="sm"
+            aria-label="Select row"
+            checked={selectedElements.has(rowData.id || '')}
+            onChange={(el) => handleCheckbox(el.currentTarget.checked, rowData.id || '')}
+          />
         )
       }
-      return <Table.Tr key={rowKey}>{cols}</Table.Tr>
+
+      if (activeActions && actionsMenu) {
+        cols.push(actionsMenu)
+      }
+
+      return (
+        <Table.Tr key={rowKey}>
+          {cols.map((c, cidx) => (
+            <Table.Td
+              ta={
+                ['number', 'bigint'].includes(
+                  typeof rowData?.columns?.[cidx + headingIndexOffset]?.value
+                )
+                  ? 'right'
+                  : 'left'
+              }
+              key={rowKey + cidx.toString()}
+              c={color}
+            >
+              {c}
+            </Table.Td>
+          ))}
+        </Table.Tr>
+      )
     })
+
+    const colHeadings: string[] = [...headings]
+    if (hasSelectActions) {
+      colHeadings.unshift('select')
+    }
+
+    if (actions?.length) {
+      colHeadings.push('actions')
+    }
+
+    return {
+      rows: tableRows,
+      actionHeadings: colHeadings.map((heading, index) => (
+        <Table.Th tt="capitalize" key={heading} w="auto">
+          {heading === 'select' ? (
+            masterSelectAction
+          ) : (
+            <Group
+              wrap="nowrap"
+              gap="xs"
+              align="center"
+              justify={
+                ['number', 'bigint'].includes(
+                  typeof filteredData[0]?.columns[index + headingIndexOffset]?.value
+                )
+                  ? 'right'
+                  : undefined
+              }
+            >
+              {filteredData[0]?.columns[index + headingIndexOffset]?.value !== undefined ? (
+                <Button
+                  px="0"
+                  tt="capitalize"
+                  variant="transparent"
+                  size="xs"
+                  c="mainText"
+                  onClick={() => {
+                    setSorting((prev) => ({
+                      sortIndex: index + headingIndexOffset,
+                      sortDirection: prev.sortDirection < 0 ? 1 : -1
+                    }))
+                    setPage(1)
+                  }}
+                  rightSection={
+                    sorting.sortIndex === index + headingIndexOffset && (
+                      <ThemeIcon variant="transparent" c="mainText" size={14}>
+                        <DownArrowIcon
+                          style={{
+                            transform: sorting.sortDirection > 0 ? 'rotate(180deg)' : undefined
+                          }}
+                        />
+                      </ThemeIcon>
+                    )
+                  }
+                >
+                  {heading}
+                </Button>
+              ) : (
+                heading
+              )}
+            </Group>
+          )}
+        </Table.Th>
+      ))
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [list, actions, isMobile, columns, selectedElements, selectedElements.size, headings])
+  }, [filteredData, actions, selectedElements, selectedElements.size, headings])
 
   return (
-    <Stack align="stretch" w="100%" pos="relative">
+    <Stack align="stretch" w="100%" pos="relative" gap="sm">
       <LoadingOverlay visible={loading} />
-      <Group align="center" justify={selectedElements.size ? 'space-between' : 'right'}>
-        {selectedElements.size && masterActionMenu}
-        {tableActions}
-      </Group>
+      {error && (
+        <Alert
+          variant="outline"
+          color="error"
+          title={typeof error === 'string' ? error : 'Error loading data'}
+        />
+      )}
 
-      {isMobile ? (
-        <Stack gap="xl">
-          {hasSelectActions && (
-            <Group align="center" justify="left" pt="xs">
-              Select all: {masterSelectAction}
-            </Group>
-          )}
-          {rows}
-        </Stack>
-      ) : (
-        <Paper pb="md" w="100%" shadow={shadow}>
-          <Stack justify="space-between" mih={420} gap="xl">
-            <ScrollArea scrollbars="x" type="auto" offsetScrollbars>
-              <Table {...tableProps} w="100%" highlightOnHover verticalSpacing="xs">
-                <Table.Thead bg="alternativeBackground">
-                  <Table.Tr>
-                    {colHeadings.map((h) => (
-                      <Table.Th tt="capitalize" key={h} w={h === 'select' ? 20 : 'auto'}>
-                        {h === 'select' ? masterSelectAction : h}
-                      </Table.Th>
-                    ))}
-                  </Table.Tr>
-                </Table.Thead>
-                <Table.Tbody>{rows}</Table.Tbody>
-              </Table>
-            </ScrollArea>
-            <Group w="100%" justify="right" pr="md">
-              <Pagination
-                color="brand"
-                total={maxPages}
-                boundaries={1}
-                defaultValue={defaultPage}
-                onNextPage={onNextPage}
-                onPreviousPage={onPreviousPage}
-                onChange={onChange}
-                size="sm"
-                styles={{
-                  control: {
-                    border: 0
-                  }
-                }}
-              />
-            </Group>
-          </Stack>
-        </Paper>
+      {!error && !loading && !rows.length && (
+        <Alert variant="outline" color="info" title="No data found" />
+      )}
+
+      {((!!selectedElements.size && !!masterActionMenu) || tableActions) && (
+        <Group align="center" justify={selectedElements.size ? 'space-between' : 'right'}>
+          {selectedElements.size && masterActionMenu}
+
+          {tableActions}
+        </Group>
       )}
+
+      <Paper pb="md" w="100%" shadow={shadow}>
+        <Stack justify="space-between" mih={420} gap="xl">
+          <ScrollArea scrollbars="x" type="auto" offsetScrollbars>
+            <Table {...tableProps} w="100%" highlightOnHover verticalSpacing="xs">
+              <Table.Thead bg="alternativeBackground">
+                <Table.Tr>{actionHeadings}</Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>{rows}</Table.Tbody>
+            </Table>
+          </ScrollArea>
+        </Stack>
+      </Paper>
+
+      <Group w="100%" justify="right" pr="md">
+        <Pagination
+          color="brand"
+          total={maxPages}
+          boundaries={1}
+          value={page}
+          // defaultValue={defaultPage}
+          onNextPage={onNextPage}
+          onPreviousPage={onPreviousPage}
+          onChange={setPage}
+          size="sm"
+          styles={{
+            control: {
+              border: 0
+            }
+          }}
+        />
+      </Group>
     </Stack>
   )
 }
diff --git a/src/contexts/AccountContext/AccountContext.tsx b/src/contexts/AccountContext/AccountContext.tsx
index af7ad4db..a5e45690 100644
--- a/src/contexts/AccountContext/AccountContext.tsx
+++ b/src/contexts/AccountContext/AccountContext.tsx
@@ -9,18 +9,12 @@ import {
   useState
 } from 'react'
 import { Account, BillingDetails, IAdExAccount } from 'types'
-import {
-  getMessageToSign,
-  isAdminToken,
-  isTokenExpired,
-  refreshAccessToken,
-  verifyLogin
-} from 'lib/backend'
+import { isAdminToken, isTokenExpired, getJWTExpireTime } from 'lib/backend'
 import { AmbireLoginSDK } from '@ambire/login-sdk-core'
 import { DAPP_ICON_PATH, DAPP_NAME, DEFAULT_CHAIN_ID } from 'constants/login'
 import useCustomNotifications from 'hooks/useCustomNotifications'
 import { fetchService, getReqErr, RequestOptions } from 'services'
-import SuperJSON from 'superjson'
+// import SuperJSON from 'superjson'
 
 const ambireLoginSDK = new AmbireLoginSDK({
   dappName: DAPP_NAME,
@@ -29,7 +23,8 @@ const ambireLoginSDK = new AmbireLoginSDK({
 
 export const BACKEND_BASE_URL = process.env.REACT_APP_BACKEND_BASE_URL
 export const VALIDATOR_BASE_URL = process.env.REACT_APP_VALIDATOR_BASE_URL
-const UNAUTHORIZED_ERR_STR = 'Unauthorized!'
+const UNAUTHORIZED_ERR_STR = 'Unauthorized'
+const TOKEN_CHECK_SECONDS_BEFORE_EXPIRE = process.env.NODE_ENV === 'production' ? 69 : 10
 
 console.log({ BACKEND_BASE_URL })
 const processResponse = <R extends any>(res: Response): Promise<R> => {
@@ -48,24 +43,49 @@ const processResponse = <R extends any>(res: Response): Promise<R> => {
   })
 }
 
+type AuthMsgResp = {
+  authMsg: {
+    domain: {
+      name: string
+      chainId: any
+    }
+    types: {
+      LoginInfo: {
+        name: string
+        type: string
+      }[]
+    }
+    primaryType: string
+    message: {
+      wallet: string
+      purpose: string
+      requestedAt: Date
+    }
+  }
+}
+
+type AccessTokensResp = {
+  accessToken: string
+  refreshToken: string
+}
+
 type AdExService = 'backend' | 'validator'
 
 type ApiRequestOptions = Omit<RequestOptions, 'url' | 'body'> & {
   route: string
-  body?: BodyInit | object | string | null
+  body?: BodyInit | object | string | FormData
   noAuth?: boolean
   onErrMsg?: string
 }
 
 interface IAccountContext {
-  adexAccount: IAdExAccount & Account & { loaded: boolean; initialLoad: boolean }
+  adexAccount: IAdExAccount & Account & { loaded: boolean }
   authenticated: boolean
   ambireSDK: AmbireLoginSDK
   isAdmin: boolean
   connectWallet: () => void
   disconnectWallet: () => void
-  updateAccessToken: () => Promise<any>
-  resetAdexAccount: () => void
+  logOut: () => void
   adexServicesRequest: <R extends any>(
     service: AdExService,
     reqOptions: ApiRequestOptions
@@ -82,11 +102,7 @@ const defaultValue: IAccountContext['adexAccount'] = {
   chainId: 0,
   accessToken: null,
   refreshToken: null,
-  authenticated: false,
-  authMsgResp: null,
   loaded: false,
-  // This ensures there is some obj in the ls
-  initialLoad: false,
   id: '',
   name: '',
   active: false,
@@ -147,7 +163,8 @@ const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
   const { showNotification } = useCustomNotifications()
   const ambireSDK = useMemo(() => ambireLoginSDK, [])
   const [isLoading, setIsLoading] = useState(false)
-  const [sdkMsgSignature, setSdkMsgSignature] = useState<string>('')
+  const [sdkMsgSignature, setSdkMsgSignature] = useState<string | null>(null)
+  const [authMsg, setAuthMsg] = useState<AuthMsgResp | null>(null)
   const [adexAccount, setAdexAccount] = useLocalStorage<IAccountContext['adexAccount']>({
     key: 'adexAccount',
     defaultValue: { ...defaultValue },
@@ -156,38 +173,43 @@ const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
       const res = !str
         ? { ...defaultValue, updated: true }
         : { ...defaultValue, ...deserializeJSON(str), loaded: true }
-
-      // console.log({ res })
-
       return res
     },
     serialize: (acc) => {
       const seri = serializeJSON({ ...acc, loaded: true })
-      // console.log({ ser })
+      // console.log({ seri })
 
       return seri
     }
   })
+  const authenticated = useMemo(
+    () => !!adexAccount.accessToken && !!adexAccount.refreshToken,
+    [adexAccount.accessToken, adexAccount.refreshToken]
+  )
 
   // NOTE: hax to ensure there is storage value as there is no way to differentiate the default value from storage value using useLocalStorage
   useEffect(() => {
-    const lsAcc = deserializeJSON(localStorage.getItem('adexAccount') || '')
-    // console.log({ lsAcc })
+    const lsAcc: IAccountContext['adexAccount'] = deserializeJSON(
+      localStorage.getItem('adexAccount') || ''
+    )
 
     if (!lsAcc) {
-      setAdexAccount({ ...defaultValue, initialLoad: true })
+      setAdexAccount({ ...defaultValue, loaded: true })
     }
   }, [setAdexAccount])
 
   const resetAdexAccount = useCallback(
-    () => setAdexAccount({ ...defaultValue, initialLoad: true }),
+    (reason?: string) => {
+      console.log('reset account: ', reason)
+      setAdexAccount({ ...defaultValue, loaded: true })
+    },
     [setAdexAccount]
   )
 
   const connectWallet = useCallback(() => {
-    console.log({ ambireSDK })
+    resetAdexAccount('connecting new wallet')
     ambireSDK.openLogin({ chainId: DEFAULT_CHAIN_ID })
-  }, [ambireSDK])
+  }, [ambireSDK, resetAdexAccount])
 
   const disconnectWallet = useCallback(() => ambireSDK.openLogout(), [ambireSDK])
 
@@ -196,214 +218,311 @@ const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
     [ambireSDK]
   )
 
-  const updateAccessToken = useCallback(async () => {
-    if (!adexAccount.accessToken || !adexAccount.refreshToken) return
+  const checkAndUpdateNewAccessTokens = useCallback(async (): Promise<{ accessToken: string }> => {
+    if (!adexAccount.accessToken || !adexAccount.refreshToken) {
+      throw new Error(`${UNAUTHORIZED_ERR_STR}: missing access tokens`)
+    }
+
+    const isAccessTokenExpired = isTokenExpired(
+      adexAccount.accessToken,
+      TOKEN_CHECK_SECONDS_BEFORE_EXPIRE * 1.5
+    )
 
-    if (isTokenExpired(adexAccount.refreshToken)) {
-      resetAdexAccount()
-      showNotification('error', 'Refresh token has been expired', 'Refresh token')
-      return
+    if (!isAccessTokenExpired) {
+      return { accessToken: adexAccount.accessToken }
     }
 
-    if (isTokenExpired(adexAccount.accessToken)) {
+    if (isAccessTokenExpired && !isTokenExpired(adexAccount.refreshToken)) {
       try {
-        const response = await refreshAccessToken(adexAccount.refreshToken)
-        if (response) {
-          setAdexAccount((prev) => {
-            const next = {
-              ...prev,
-              accessToken: response.accessToken,
-              refreshToken: response.refreshToken
-            }
-
-            return next
+        const req: RequestOptions = {
+          url: `${BACKEND_BASE_URL}/dsp/refresh-token`,
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            refreshToken: adexAccount.refreshToken
           })
-          return response
         }
-        return null
+
+        const res = await fetchService(req)
+        const { accessToken, refreshToken } = await processResponse<AccessTokensResp>(res)
+        setAdexAccount((prev) => {
+          return {
+            ...prev,
+            accessToken,
+            refreshToken
+          }
+        })
+
+        return { accessToken }
       } catch (error: any) {
         console.error('Updating access token failed:', error)
-        showNotification('error', error?.message, 'Updating access token failed')
-        throw error
+        throw new Error(`Updating access token failed: ${error?.message || error.toString()}`)
       }
+    } else {
+      resetAdexAccount('refresh token expired')
+      throw new Error(`${UNAUTHORIZED_ERR_STR}: Session expired!`)
     }
-  }, [
-    adexAccount.accessToken,
-    adexAccount.refreshToken,
-    resetAdexAccount,
-    showNotification,
-    setAdexAccount
-  ])
+  }, [adexAccount.accessToken, adexAccount.refreshToken, resetAdexAccount, setAdexAccount])
 
-  const adexServicesRequest = useCallback(
-    // Note
-    async <R extends any>(service: AdExService, reqOptions: ApiRequestOptions): Promise<R> => {
-      // temp hax for using the same token fot validator auth
-      const authHeaderProp = service === 'backend' ? 'X-DSP-AUTH' : 'authorization'
-
-      // url check
-      // TODO: route instead url in props
-      const baseUrl = (service === 'backend' ? BACKEND_BASE_URL : VALIDATOR_BASE_URL) || ''
-      const urlCheck = reqOptions.route.replace(baseUrl, '').replace(/^\//, '')
-
-      const req: RequestOptions = {
-        url: `${baseUrl}/${urlCheck}`,
-        method: reqOptions.method,
-        body:
-          reqOptions.body instanceof FormData
-            ? reqOptions.body
-            : reqOptions.body && JSON.stringify(SuperJSON.serialize(reqOptions.body).json),
-        queryParams: reqOptions.queryParams,
-        headers: reqOptions.headers
-      }
+  // NOTE: updating access tokens some second before the access token expire instead of checking on each request where can have "racing" condition with multiple request at the same time
+  // TODO: add retry functionality
+  useEffect(() => {
+    let updateTokensTimeout: ReturnType<typeof setTimeout>
+    try {
+      if (adexAccount.accessToken) {
+        const now = Date.now()
+        const accessTokenExpireTime = getJWTExpireTime(
+          adexAccount.accessToken,
+          TOKEN_CHECK_SECONDS_BEFORE_EXPIRE * 1
+        )
 
-      // console.log('adexAccount', adexAccount)
-      if (!adexAccount.accessToken) throw new Error('Access token is missing')
+        updateTokensTimeout = setTimeout(
+          async () => {
+            await checkAndUpdateNewAccessTokens()
+          },
+          now >= accessTokenExpireTime ? 0 : accessTokenExpireTime - now
+        )
+      }
+    } catch (err: any) {
+      showNotification('info', err?.message || err.toString(), 'Updating session error')
+    }
 
-      const authHeader = {
-        [authHeaderProp]: `Bearer ${adexAccount.accessToken}`
+    return () => {
+      if (updateTokensTimeout !== undefined) {
+        clearTimeout(updateTokensTimeout)
       }
+    }
+  }, [adexAccount.accessToken, checkAndUpdateNewAccessTokens, showNotification])
 
-      // TODO: log-out if no access token
-      // TODO: fix updateAccessToken logic - it returns if there are no access token,
-      // it should throw ot log-out
-      // TODO: if using updateAccessToken triggers some circular updates - account context should be fixed
-      const response = await updateAccessToken()
+  const adexServicesRequest = useCallback(
+    // Note
+    async <R extends any>(service: AdExService, reqOptions: ApiRequestOptions): Promise<R> => {
+      try {
+        // temp hax for using the same token fot validator auth
+        const authHeaderProp = service === 'backend' ? 'X-DSP-AUTH' : 'authorization'
+
+        // url check
+        // TODO: route instead url in props
+        const baseUrl = (service === 'backend' ? BACKEND_BASE_URL : VALIDATOR_BASE_URL) || ''
+        const urlCheck = reqOptions.route.replace(baseUrl, '').replace(/^\//, '')
+
+        // NOTE: needed because the page can "sleep" and the refresh timeout might not work
+        const { accessToken } = await checkAndUpdateNewAccessTokens()
+
+        const req: RequestOptions = {
+          url: `${baseUrl}/${urlCheck}`,
+          method: reqOptions.method,
+          body:
+            !(reqOptions.body instanceof FormData) && typeof reqOptions.body === 'object'
+              ? serializeJSON(reqOptions.body)
+              : reqOptions.body,
+          queryParams: reqOptions.queryParams,
+          headers: {
+            ...reqOptions.headers,
+            [authHeaderProp]: `Bearer ${accessToken}`
+          }
+        }
 
-      if (response) {
-        const updatedAccessToken = response.accessToken
-        authHeader[authHeaderProp] = `Bearer ${updatedAccessToken}`
+        const res = await fetchService(req)
+        return await processResponse<R>(res)
+      } catch (err: any) {
+        if (
+          service === 'backend' &&
+          err &&
+          (err?.message || err.toString()).includes(UNAUTHORIZED_ERR_STR)
+        ) {
+          await checkAndUpdateNewAccessTokens()
+        }
+        return Promise.reject<R>(err)
       }
+    },
+    [checkAndUpdateNewAccessTokens]
+  )
 
-      req.headers = {
-        ...authHeader,
-        ...req.headers
+  const logOut = useCallback(async () => {
+    try {
+      const resp = await adexServicesRequest<{}>('backend', {
+        route: '/dsp/logout',
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: {
+          refreshToken: adexAccount.refreshToken
+        }
+      })
+      if (resp) {
+        disconnectWallet()
+        resetAdexAccount('Log out btn (backend)')
+        showNotification('info', 'Logged out', 'Success')
       }
+    } catch (err: any) {
+      console.error('logOut: ', err)
+      showNotification('error', err?.message || err.toString(), 'Logging out failed')
+    }
+  }, [
+    adexAccount.refreshToken,
+    adexServicesRequest,
+    disconnectWallet,
+    resetAdexAccount,
+    showNotification
+  ])
 
-      console.log('req', req)
-
+  const getAuthMsg = useCallback(
+    async ({ wallet, chainId }: { wallet: string; chainId: string }): Promise<AuthMsgResp> => {
       try {
+        const req: RequestOptions = {
+          url: `${BACKEND_BASE_URL}/dsp/login-msg`,
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            wallet,
+            chainId
+          })
+        }
+
         const res = await fetchService(req)
-        return await processResponse<R>(res)
+        return await processResponse<AuthMsgResp>(res)
       } catch (err: any) {
         console.log(err)
-        if (err && err.message && err.message.includes(UNAUTHORIZED_ERR_STR)) {
-          resetAdexAccount()
+        throw new Error(err)
+      }
+    },
+    []
+  )
+
+  const verifyLoginMsg = useCallback(
+    async (veryData: AuthMsgResp & { signature: string }): Promise<AccessTokensResp> => {
+      try {
+        const req: RequestOptions = {
+          url: `${BACKEND_BASE_URL}/dsp/login-verify`,
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(veryData)
         }
-        showNotification('error', err.message, reqOptions.onErrMsg || 'Data error')
-        return Promise.reject<R>()
+
+        const res = await fetchService(req)
+        return await processResponse<AccessTokensResp>(res)
+      } catch (err: any) {
+        console.log(err)
+        throw new Error(err)
       }
     },
-    [adexAccount.accessToken, resetAdexAccount, showNotification, updateAccessToken]
+    []
   )
 
-  const handleRegistrationOrLoginSuccess = useCallback(
-    async ({ address, chainId }: any) => {
+  const handleSDKAuthSuccess = useCallback(
+    async ({ address, chainId }: any, type: string) => {
+      console.log('sdk auth success: ', type)
       if (!address || !chainId) {
-        showNotification('warning', 'Ambire sdk no address or chain')
+        showNotification('warning', 'Ambire sdk no address or chain selected')
         return
       }
 
-      // TODO: this need to be fixed because it can be called more than once
-      // because it's triggered on more than oe event
-      // This check works atm but it's not ok
-      // if (prev.address !== '' && prev.chainId !== 0 && prev.authMsgResp !== null) {
-      //   return prev
-      // }
-
       try {
-        console.log('getMessageToSign', { address, chainId })
-        const authMsgRsp = await getMessageToSign({ address, chainId })
-
-        setAdexAccount((prev) => {
-          if (prev.address !== '' && prev.chainId !== 0 && prev.authMsgResp !== null) {
-            return prev
-          }
-
-          const next = { ...prev, address, chainId, authMsgResp: authMsgRsp.authMsg }
-          return next
-        })
-      } catch (error) {
+        const authMsgResp = await getAuthMsg({ wallet: address, chainId })
+        setAuthMsg(authMsgResp)
+        signMessage('eth_signTypedData', JSON.stringify(authMsgResp.authMsg))
+        setAdexAccount({ ...defaultValue, address, chainId, loaded: true })
+      } catch (error: any) {
         console.error('Get message to sign failed', error)
-        showNotification('error', 'Get message to sign failed')
+        showNotification('error', error?.message || error.toString(), 'Message sign failed')
       }
     },
-    [setAdexAccount, showNotification]
+    [getAuthMsg, setAdexAccount, showNotification, signMessage]
   )
 
   useEffect(() => {
-    if (!sdkMsgSignature || !adexAccount.authMsgResp || adexAccount.authenticated) return
-
     async function verify() {
+      if (!sdkMsgSignature || !authMsg) return
       try {
-        // console.log('verifyLogin')
-        const authResp = await verifyLogin({
-          authMsg: { ...adexAccount.authMsgResp },
+        const authResp = await verifyLoginMsg({
+          ...authMsg,
           signature: sdkMsgSignature
         })
 
-        if (!authResp) {
-          setIsLoading(false)
-          throw new Error('Verify login failed')
+        if (!authResp.accessToken || !authResp.refreshToken) {
+          throw new Error('Verify login failed, invalid tokens response')
         }
 
-        setAdexAccount((prev) => {
-          const { accessToken, refreshToken } = authResp
-          const next = {
+        setAdexAccount((prev: IAccountContext['adexAccount']) => {
+          const next: IAccountContext['adexAccount'] = {
             ...prev,
-            accessToken,
-            refreshToken,
-            authenticated: !!authResp.accessToken && !!authResp.refreshToken
+            ...authResp
           }
-
           return next
         })
-        setIsLoading(false)
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error verify login:', error)
-        showNotification('error', 'Verify login failed')
+        showNotification('error', error?.message || error.toString(), 'Verify login failed')
+        setAdexAccount({
+          ...defaultValue,
+          loaded: true
+        })
+      } finally {
         setIsLoading(false)
+        setSdkMsgSignature(null)
+        setAuthMsg(null)
       }
     }
 
     verify()
-  }, [
-    sdkMsgSignature,
-    adexAccount.authMsgResp,
-    adexAccount.authenticated,
-    showNotification,
-    setAdexAccount
-  ])
-
-  const handleMsgRejected = useCallback(() => {
-    disconnectWallet()
-  }, [disconnectWallet])
+  }, [sdkMsgSignature, showNotification, setAdexAccount, verifyLoginMsg, authMsg])
 
   const handleLogoutSuccess = useCallback(() => {
-    resetAdexAccount()
+    resetAdexAccount('Log out SDK')
   }, [resetAdexAccount])
 
-  const handleActionRejected = useCallback(() => {
-    disconnectWallet()
-  }, [disconnectWallet])
+  const handleMsgRejected = useCallback(
+    (data: any) => {
+      console.log('message rejected', data)
+      showNotification('info', 'Message rejected')
+    },
+    [showNotification]
+  )
+
+  const handleActionRejected = useCallback(
+    (data: any) => {
+      console.log('action rejected', data)
+      showNotification('info', 'Action rejected')
+    },
+    [showNotification]
+  )
 
+  const handleTxnRejected = useCallback(
+    (data: any) => {
+      console.log('action rejected', data)
+      showNotification('info', 'Transaction rejected')
+    },
+    [showNotification]
+  )
+
+  // TODO: types for success data
   useEffect(() => {
-    ambireSDK.onRegistrationSuccess(handleRegistrationOrLoginSuccess)
-  }, [ambireSDK, handleRegistrationOrLoginSuccess])
+    ambireSDK.onRegistrationSuccess((data: any) =>
+      handleSDKAuthSuccess(data, 'handleSDKAuthSuccess')
+    )
+  }, [ambireSDK, handleSDKAuthSuccess])
 
   useEffect(() => {
-    ambireSDK.onLoginSuccess(handleRegistrationOrLoginSuccess)
-  }, [ambireSDK, handleRegistrationOrLoginSuccess])
+    ambireSDK.onLoginSuccess((data: any) => handleSDKAuthSuccess(data, 'onLoginSuccess'))
+  }, [ambireSDK, handleSDKAuthSuccess])
+
   useEffect(() => {
-    ambireSDK.onAlreadyLoggedIn(handleRegistrationOrLoginSuccess)
-  }, [ambireSDK, handleRegistrationOrLoginSuccess])
+    ambireSDK.onAlreadyLoggedIn((data: any) => handleSDKAuthSuccess(data, 'onAlreadyLoggedIn'))
+  }, [ambireSDK, handleSDKAuthSuccess])
+
   useEffect(() => {
-    ambireSDK.onMsgSigned(({ signature }: any) =>
-      setSdkMsgSignature(() => {
-        setIsLoading(true)
-        return signature
-      })
-    )
+    ambireSDK.onMsgSigned((data: { signature: string; type: string }) => {
+      setIsLoading(true)
+      setSdkMsgSignature(data.signature)
+    })
   }, [ambireSDK])
 
   useEffect(() => {
@@ -419,15 +538,8 @@ const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
   }, [ambireSDK, handleActionRejected])
 
   useEffect(() => {
-    if (adexAccount.authMsgResp && !adexAccount.authenticated) {
-      signMessage('eth_signTypedData', JSON.stringify(adexAccount.authMsgResp))
-    }
-  }, [adexAccount.authMsgResp, adexAccount.authenticated, signMessage])
-
-  const authenticated = useMemo(
-    () => Boolean(adexAccount.authenticated),
-    [adexAccount.authenticated]
-  )
+    ambireSDK.onTxnRejected(handleTxnRejected)
+  }, [ambireSDK, handleTxnRejected])
 
   const isAdmin = useMemo(
     () => Boolean(isAdminToken(adexAccount.accessToken)),
@@ -441,23 +553,17 @@ const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
         method: 'GET'
       })
 
-      console.log({ accountData })
-
       if (accountData) {
         setAdexAccount((prev) => {
           const next = { ...prev, ...accountData }
           return next
         })
       } else {
-        showNotification(
-          'error',
-          'Updating account balance failed',
-          'Updating account balance failed'
-        )
+        throw new Error('Invalid response')
       }
     } catch (err: any) {
       console.error('Updating account balance failed:', err)
-      showNotification('error', err, 'Updating account balance failed')
+      showNotification('error', err?.message || err.toString(), 'Updating account balance')
     }
   }, [adexServicesRequest, setAdexAccount, showNotification])
 
@@ -476,29 +582,25 @@ const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
             const next = { ...prev, billingDetails }
             return next
           })
-          showNotification('info', 'Billing details updated', 'Successfully')
+          showNotification('info', 'Updating billing details', 'Success')
         } else {
-          showNotification(
-            'error',
-            'Updating billing details failed',
-            'Updating billing details failed'
-          )
+          throw new Error('Invalid response')
         }
       } catch (err: any) {
         console.error('Updating billing details failed:', err)
-        showNotification('error', 'Updating billing details failed')
+        showNotification('error', err?.err || err?.toString(), 'Updating billing details')
       }
     },
     [adexServicesRequest, setAdexAccount, showNotification]
   )
 
   useEffect(() => {
-    if (adexAccount.authenticated) {
+    if (authenticated) {
       console.log('adexAccount.authenticated')
       updateBalance()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [adexAccount.authenticated])
+  }, [authenticated])
 
   const contextValue = useMemo(
     () => ({
@@ -509,12 +611,11 @@ const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
       disconnectWallet,
       signMessage,
       ambireSDK,
-      updateAccessToken,
-      resetAdexAccount,
       adexServicesRequest,
       updateBalance,
       updateBillingDetails,
-      isLoading
+      isLoading,
+      logOut
     }),
     [
       adexAccount,
@@ -524,12 +625,11 @@ const AccountProvider: FC<PropsWithChildren> = ({ children }) => {
       disconnectWallet,
       signMessage,
       ambireSDK,
-      updateAccessToken,
-      resetAdexAccount,
       adexServicesRequest,
       updateBalance,
       updateBillingDetails,
-      isLoading
+      isLoading,
+      logOut
     ]
   )
 
diff --git a/src/contexts/CampaignsContext/CampaignsAnalyticsContext.tsx b/src/contexts/CampaignsContext/CampaignsAnalyticsContext.tsx
index 42059cef..e13908a5 100644
--- a/src/contexts/CampaignsContext/CampaignsAnalyticsContext.tsx
+++ b/src/contexts/CampaignsContext/CampaignsAnalyticsContext.tsx
@@ -1,4 +1,4 @@
-import { Campaign } from 'adex-common'
+import { Campaign, Placement } from 'adex-common'
 import {
   createContext,
   FC,
@@ -33,14 +33,7 @@ import {
 
 import { dashboardTableElements } from 'components/Dashboard/mockData'
 
-const keySeparator = '👩🏼'
-
-type DataStatus = 'loading' | 'updating' | 'processed'
-
-type QueryStatusAndType = {
-  dataStatus: DataStatus
-  analyticsType: AnalyticsType
-}
+type DataStatus = 'loading' | 'updating' | 'processed' | 'error'
 
 const defaultRefreshQuery = 1 * MINUTE
 
@@ -143,8 +136,15 @@ const analyticsDataToMappedAnalytics = (
   return resMap
 }
 
+type MappedAnalyticsRecord = {
+  status: DataStatus
+  analyticsType: AnalyticsType
+  aggrKeys: string[]
+  data: BaseAnalyticsData[]
+}
+
 interface ICampaignsAnalyticsContext {
-  analyticsData: Map<string, AnalyticsData[]>
+  analyticsData: Map<string, { status: DataStatus; data: AnalyticsData[] }>
   // TODO: all campaigns event aggregations by account
   getAnalyticsKeyAndUpdate: (
     analyticsType: AnalyticsType,
@@ -153,10 +153,11 @@ interface ICampaignsAnalyticsContext {
     timeframe?: Timeframe,
     startFrom?: Date,
     endTo?: Date,
-    ssp?: SSPs
+    ssp?: SSPs,
+    placement?: Placement
   ) => Promise<{ key: string; period: AnalyticsPeriod } | undefined>
   initialAnalyticsLoading: boolean
-  mappedAnalytics: Map<string, BaseAnalyticsData[]>
+  mappedAnalytics: Map<string, MappedAnalyticsRecord>
 }
 
 const CampaignsAnalyticsContext = createContext<ICampaignsAnalyticsContext | null>(null)
@@ -169,16 +170,13 @@ const CampaignsAnalyticsProvider: FC<PropsWithChildren> = ({ children }) => {
   const [initialAnalyticsLoading, setInitialAnalyticsLoading] = useState(true)
   const [mappedAnalytics, setMappedAnalytics] = useState<
     ICampaignsAnalyticsContext['mappedAnalytics']
-  >(new Map<string, BaseAnalyticsData[]>())
-  const [dataToMapStatus, setDataToMapStatus] = useState<Map<string, QueryStatusAndType>>(
-    new Map<string, QueryStatusAndType>()
-  )
+  >(new Map<string, MappedAnalyticsRecord>())
 
   const [analyticsData, setAnalyticsData] = useState<ICampaignsAnalyticsContext['analyticsData']>(
-    new Map<string, AnalyticsData[]>()
+    new Map<string, { status: DataStatus; data: AnalyticsData[] }>()
   )
 
-  const updateAnalytics = useCallback(
+  const updateCampaignAnalyticsByQuery = useCallback(
     async (params: AnalyticsDataQuery, dataKey: string, forAdmin?: boolean) => {
       try {
         const analyticsDataRes = await adexServicesRequest<AnalyticsDataRes>('validator', {
@@ -198,20 +196,34 @@ const CampaignsAnalyticsProvider: FC<PropsWithChildren> = ({ children }) => {
 
         console.log({ analyticsDataRes })
 
-        // if (!analyticsDataRes?.aggr) {
-        //   throw new Error('invalid analytics data response')
-        // }
+        if (!analyticsDataRes?.aggr) {
+          throw new Error('invalid analytics data response')
+        }
 
         setAnalyticsData((prev) => {
           const next = new Map(prev)
-          const nextAggr = analyticsDataRes?.aggr || prev.get(dataKey) || []
+          const nextAggr: { status: DataStatus; data: AnalyticsData[] } =
+            { status: 'processed', data: analyticsDataRes?.aggr } || prev.get(dataKey)
           next.set(dataKey, nextAggr)
           return next
         })
-      } catch (err) {
+      } catch (err: any) {
         console.log(err)
         // TODO: see how to use campaignId out of segment
-        showNotification('error', `getting analytics ${params.timeframe}`, 'Data error')
+        setAnalyticsData((prev) => {
+          const next = new Map(prev)
+          const nextAggr: { status: DataStatus; data: AnalyticsData[] } = {
+            status: 'error',
+            data: prev.get(dataKey)?.data || []
+          }
+          next.set(dataKey, nextAggr)
+          return next
+        })
+        showNotification(
+          'error',
+          err?.message || err.toString(),
+          `Fetching analytics${forAdmin ? ' (admin)' : ''}`
+        )
       }
 
       return dataKey
@@ -219,13 +231,6 @@ const CampaignsAnalyticsProvider: FC<PropsWithChildren> = ({ children }) => {
     [adexServicesRequest, showNotification]
   )
 
-  const updateCampaignAnalyticsByQuery = useCallback(
-    (query: AnalyticsDataQuery, dataKey: string, forAdmin?: boolean): void => {
-      updateAnalytics(query, dataKey, forAdmin)
-    },
-    [updateAnalytics]
-  )
-
   const getAnalyticsKeyAndUpdate = useCallback(
     async (
       analyticsType: AnalyticsType,
@@ -234,7 +239,8 @@ const CampaignsAnalyticsProvider: FC<PropsWithChildren> = ({ children }) => {
       selectedTimeframe?: Timeframe,
       startFrom?: Date,
       endTo?: Date,
-      ssp?: SSPs
+      ssp?: SSPs,
+      placement?: Placement
     ): Promise<{ key: string; period: AnalyticsPeriod } | undefined> => {
       if (!analyticsType || (!forAdmin && !campaign?.id)) {
         return
@@ -282,6 +288,7 @@ const CampaignsAnalyticsProvider: FC<PropsWithChildren> = ({ children }) => {
         timezone: 'UTC',
         timeframe,
         ...{ ssp },
+        ...{ placement },
         segmentBy: analyticsType === 'timeframe' ? undefined : analyticsType
       }
 
@@ -294,30 +301,36 @@ const CampaignsAnalyticsProvider: FC<PropsWithChildren> = ({ children }) => {
         // { ...baseQuery, eventType: 'CLICK', metric: 'paid' }
       ]
 
-      const keys: string[] = queries.map((q) => getAnalyticsKeyFromQuery(q))
-      const dataStatusKey = keys.join(keySeparator)
+      const aggrKeys: string[] = queries.map((q) => getAnalyticsKeyFromQuery(q))
+      const mappedDataKey = getAnalyticsKeyFromQuery(baseQuery)
 
-      if (!dataToMapStatus.get(dataStatusKey)) {
+      if (!mappedAnalytics.get(mappedDataKey)) {
+        setMappedAnalytics((prev) => {
+          const next = new Map(prev)
+          const nextMapped: MappedAnalyticsRecord = {
+            status: 'loading',
+            analyticsType,
+            aggrKeys,
+            data: []
+          }
+          next.set(mappedDataKey, nextMapped)
+          console.log({ next })
+          return next
+        })
         // NOTE: use in case to call the queries in some intervals
         // eslint-disable-next-line no-restricted-syntax
         for (const [i, q] of queries.entries()) {
-          updateCampaignAnalyticsByQuery(q, keys[i], forAdmin)
+          const update = updateCampaignAnalyticsByQuery(q, aggrKeys[i], forAdmin)
           if (i < queries.length) {
             // eslint-disable-next-line no-await-in-loop
-            await timeout(69)
+            await Promise.race([update, timeout(69)])
           }
         }
-
-        setDataToMapStatus((prev) => {
-          const next = new Map(prev)
-          next.set(dataStatusKey, { dataStatus: 'loading', analyticsType })
-          return next
-        })
       }
 
-      return { key: dataStatusKey, period }
+      return { key: mappedDataKey, period }
     },
-    [dataToMapStatus, updateCampaignAnalyticsByQuery]
+    [mappedAnalytics, updateCampaignAnalyticsByQuery]
   )
 
   useEffect(() => {
@@ -328,60 +341,39 @@ const CampaignsAnalyticsProvider: FC<PropsWithChildren> = ({ children }) => {
 
       updateCampaigns()
     } else {
-      setAnalyticsData(new Map<string, AnalyticsData[]>())
+      setAnalyticsData(new Map<string, { status: DataStatus; data: AnalyticsData[] }>())
       setInitialAnalyticsLoading(false)
     }
   }, [authenticated])
 
   useEffect(() => {
-    setDataToMapStatus((prev) => {
-      let update = false
-      const nextMappedData = new Map<string, BaseAnalyticsData[]>()
-      const nextMapStatuses = new Map(prev)
-
-      prev.forEach((status, statusKey) => {
-        const analyticsKeys = statusKey.split(keySeparator)
-
-        if (status.dataStatus === 'loading') {
-          const isLoaded = analyticsKeys.every((aKey) => !!analyticsData.get(aKey))
-          if (isLoaded) {
-            const analyticsDataAggregates = analyticsKeys.map(
-              (key) => analyticsData.get(key) as unknown as AnalyticsData[]
-            )
-
-            const mapped = analyticsDataToMappedAnalytics(
-              analyticsDataAggregates,
-              status.analyticsType
-            )
-
-            if (mapped) {
-              // TODO: map data
-              nextMappedData.set(statusKey, mapped)
-
-              nextMapStatuses.set(statusKey, { ...status, dataStatus: 'processed' })
-              update = true
-            }
+    setMappedAnalytics((prev) => {
+      const nextMappedData = new Map(prev)
+
+      prev.forEach(({ aggrKeys, analyticsType, data }, mappedDataKey) => {
+        if (aggrKeys.every((aKey) => analyticsData.get(aKey)?.status === 'processed')) {
+          const analyticsDataAggregates = aggrKeys.map((key) => analyticsData.get(key)!.data)
+
+          const mapped = analyticsDataToMappedAnalytics(analyticsDataAggregates, analyticsType)
+
+          if (mapped) {
+            nextMappedData.set(mappedDataKey, {
+              aggrKeys,
+              analyticsType,
+              status: 'processed',
+              data: mapped
+            })
+          } else {
+            nextMappedData.set(mappedDataKey, { data, aggrKeys, analyticsType, status: 'error' })
           }
+        } else if (aggrKeys.some((aKey) => analyticsData.get(aKey)?.status === 'error')) {
+          nextMappedData.set(mappedDataKey, { data, aggrKeys, analyticsType, status: 'error' })
         }
       })
 
-      if (update) {
-        // TODO: process data - map to dev friendly format
-        setMappedAnalytics((prevMapped) => {
-          const nextMapped = new Map(prevMapped)
-          nextMappedData.forEach((value, key) => {
-            nextMapped.set(key, value)
-          })
-
-          return nextMapped
-        })
-
-        return new Map(nextMapStatuses)
-      }
-
-      return prev
+      return nextMappedData
     })
-  }, [analyticsData, dataToMapStatus])
+  }, [analyticsData])
 
   const contextValue = useMemo(
     () => ({
diff --git a/src/contexts/CampaignsContext/CampaignsDataContext.tsx b/src/contexts/CampaignsContext/CampaignsDataContext.tsx
index 2b4000eb..65503a1f 100644
--- a/src/contexts/CampaignsContext/CampaignsDataContext.tsx
+++ b/src/contexts/CampaignsContext/CampaignsDataContext.tsx
@@ -1,15 +1,6 @@
 import { Campaign, CampaignStatus } from 'adex-common'
-import {
-  createContext,
-  FC,
-  PropsWithChildren,
-  useMemo,
-  useState,
-  useCallback,
-  useEffect
-} from 'react'
+import { createContext, FC, PropsWithChildren, useMemo, useState, useCallback } from 'react'
 import { useAdExApi } from 'hooks/useAdexServices'
-import useAccount from 'hooks/useAccount'
 import useCustomNotifications from 'hooks/useCustomNotifications'
 import { BaseData, CampaignData, EvAggrData, SupplyStats } from 'types'
 import { CREATE_CAMPAIGN_DEFAULT_VALUE } from 'constants/createCampaign'
@@ -146,7 +137,7 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
   const { showNotification } = useCustomNotifications()
   const { adexServicesRequest } = useAdExApi()
 
-  const { authenticated } = useAccount()
+  // const { authenticated } = useAccount()
   const [initialDataLoading, setInitialDataLoading] = useState(true)
   const [supplyStats, setSupplyStats] = useState<SupplyStats>(defaultSupplyStats)
 
@@ -184,8 +175,7 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
         })
 
         if (!campaignStatusRes.success) {
-          showNotification('error', `changing campaign status with id ${campaignId}`, 'Data error')
-          return
+          throw new Error(`changing campaign status with id ${campaignId}`)
         }
 
         setCampaignData((prev) => {
@@ -203,9 +193,9 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
 
           return next
         })
-      } catch (err) {
+      } catch (err: any) {
         console.log(err)
-        showNotification('error', `changing campaign status with id ${campaignId}`, 'Data error')
+        showNotification('error', err?.message || err.toString(), 'Campaign status update error')
       }
     },
     [adexServicesRequest, showNotification]
@@ -221,9 +211,7 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
         })
 
         if (campaignId !== campaignDetailsRes?.id) {
-          // NOTE: skip state update
-          showNotification('error', `getting campaign with id ${campaignId}`, 'Data error')
-          return
+          throw new Error(`Getting campaign with id ${campaignId}`)
         }
 
         // const advData = await getCampaignAdvancedData(campaignId)
@@ -239,9 +227,9 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
           next.set(campaignId, updatedCmp)
           return next
         })
-      } catch (err) {
+      } catch (err: any) {
         console.log(err)
-        showNotification('error', `getting campaign with id ${campaignId}`, 'Data error')
+        showNotification('error', err?.message || err.toString(), 'Data error')
       }
     },
     [adexServicesRequest, showNotification]
@@ -257,8 +245,6 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
           queryParams: { all: 'true' }
         })
 
-        console.log({ dataRes })
-
         let advData: EvAggrData[]
 
         // if (updateAdvanced) {
@@ -270,10 +256,8 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
 
         if (updateAdvanced) {
           advData = [...dataRes].map((cmpDataRes) => campaignDataResToAdvData(cmpDataRes))
-          console.log({ advData })
         }
 
-        console.log({ dataRes })
         if (Array.isArray(dataRes)) {
           setCampaignData((prev) => {
             const next = new Map()
@@ -285,24 +269,21 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
               next.set(cmp.id, currentCMP)
             })
 
-            prev.forEach((value, key) => {
+            prev.forEach((_value, key) => {
               if (!dataResIds.has(key)) {
                 next.delete(key)
               }
             })
-            // TODO: check it again when dev has been merged
-            setInitialDataLoading(false)
             return next
           })
         } else {
-          showNotification('warning', 'invalid campaigns data response', 'Data error')
-          console.log({ dataRes })
-          setInitialDataLoading(false)
+          throw new Error('Invalid campaigns data response')
         }
-      } catch (err) {
+      } catch (err: any) {
         console.log(err)
-        showNotification('error', 'getting campaigns data', 'Data error')
-        // setInitialDataLoading(false)
+        showNotification('error', err?.message || err.toString(), 'Campaigns data error')
+      } finally {
+        setInitialDataLoading(false)
       }
     },
     [adexServicesRequest, showNotification, type]
@@ -318,7 +299,7 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
       })
 
       if (!result) {
-        throw new Error('Getting banner sizes failed.')
+        throw new Error('No supply stats')
       }
 
       const hasEmptyValueResponse = Object.values(result).every(
@@ -326,36 +307,16 @@ const CampaignsDataProvider: FC<PropsWithChildren & { type: 'user' | 'admin' }>
       )
 
       if (hasEmptyValueResponse) {
-        throw new Error('Supply stats not available')
+        throw new Error('Invalid supply stats response')
       }
 
       setSupplyStats(result as SupplyStats)
-    } catch (e) {
+    } catch (e: any) {
       console.error(e)
-      showNotification('error', 'Getting banner sizes failed', 'Getting banner sizes failed')
+      showNotification('error', e?.message || e.toString(), 'Supply stats error')
     }
   }, [adexServicesRequest, showNotification])
 
-  useEffect(() => {
-    console.log('updateSupplyStats')
-    updateSupplyStats()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  useEffect(() => {
-    if (authenticated) {
-      const updateCampaigns = async () => {
-        await updateAllCampaignsData(true)
-        // setInitialDataLoading(false)
-      }
-
-      updateCampaigns()
-    } else {
-      setCampaignData(new Map<string, CampaignData>())
-      // setInitialDataLoading(false)
-    }
-  }, [updateAllCampaignsData, authenticated])
-
   // TODO: move to separate context delete and archive
   const deleteDraftCampaign = useCallback(
     async (id: string) => {
diff --git a/src/helpers/dateTime.ts b/src/helpers/dateTime.ts
index ae920c54..93a10af3 100644
--- a/src/helpers/dateTime.ts
+++ b/src/helpers/dateTime.ts
@@ -1,6 +1,7 @@
 import { Timeframe } from 'types'
 
-export const MINUTE = 60 * 1000
+export const SECOND = 1000
+export const MINUTE = 60 * SECOND
 export const HOUR = 60 * MINUTE
 export const DAY = 24 * HOUR
 export const WEEK = 7 * DAY
diff --git a/src/hooks/useCampaignAnalytics/useCampaignAnalyticsData.ts b/src/hooks/useCampaignAnalytics/useCampaignAnalyticsData.ts
index fbff83cf..3eafedbf 100644
--- a/src/hooks/useCampaignAnalytics/useCampaignAnalyticsData.ts
+++ b/src/hooks/useCampaignAnalytics/useCampaignAnalyticsData.ts
@@ -14,7 +14,8 @@ export function useCampaignsAnalyticsData({
   analyticsType: AnalyticsType
   forAdmin?: boolean
 }) {
-  const { getAnalyticsKeyAndUpdate, mappedAnalytics } = useCampaignAnalytics()
+  const { getAnalyticsKeyAndUpdate, mappedAnalytics, initialAnalyticsLoading } =
+    useCampaignAnalytics()
   const { campaignsData, updateCampaignDataById } = useCampaignsData()
   const [analyticsKey, setAnalyticsKey] = useState<
     | {
@@ -49,19 +50,23 @@ export function useCampaignsAnalyticsData({
   )
 
   const campaignMappedAnalytics: BaseAnalyticsData[] | undefined = useMemo(
-    () => mappedAnalytics.get(analyticsKey?.key || ''),
+    () => mappedAnalytics.get(analyticsKey?.key || '')?.data,
     [analyticsKey, mappedAnalytics]
   )
 
   useEffect(() => {
-    if (campaignId) {
+    console.log('useCampaignsAnalyticsData', { campaignId, analyticsType, forAdmin })
+  }, [analyticsType, campaignId, forAdmin])
+
+  useEffect(() => {
+    if (campaignId && !campaign?.id) {
       console.log({ campaignId })
       updateCampaignDataById(campaignId)
     }
-  }, [campaignId, updateCampaignDataById])
+  }, [campaign?.id, campaignId, updateCampaignDataById])
 
   useEffect(() => {
-    if (!campaign) return
+    if (!campaign?.id) return
     setAnalyticsKey(undefined)
 
     const checkAnalytics = async () => {
@@ -74,9 +79,26 @@ export function useCampaignsAnalyticsData({
   }, [analyticsType, campaign, getAnalyticsKeyAndUpdate, forAdmin])
 
   const loading = useMemo(
-    () => !analyticsKey || !campaignMappedAnalytics,
-    [analyticsKey, campaignMappedAnalytics]
+    () =>
+      initialAnalyticsLoading ||
+      !analyticsKey ||
+      !campaignMappedAnalytics ||
+      mappedAnalytics.get(analyticsKey?.key)?.status === 'loading',
+    [analyticsKey, campaignMappedAnalytics, initialAnalyticsLoading, mappedAnalytics]
+  )
+
+  const error = useMemo(
+    () => mappedAnalytics.get(analyticsKey?.key || '')?.status === 'error',
+    [analyticsKey?.key, mappedAnalytics]
   )
 
-  return { campaignMappedAnalytics, totalPaid, campaign, loading, currencyName, analyticsKey }
+  return {
+    campaignMappedAnalytics,
+    totalPaid,
+    campaign,
+    loading,
+    currencyName,
+    analyticsKey,
+    error
+  }
 }
diff --git a/src/hooks/useCustomNotifications/useCustomNotifications.ts b/src/hooks/useCustomNotifications/useCustomNotifications.ts
index 949e7e9b..37c7879e 100644
--- a/src/hooks/useCustomNotifications/useCustomNotifications.ts
+++ b/src/hooks/useCustomNotifications/useCustomNotifications.ts
@@ -6,8 +6,6 @@ type NotificationSeverity = 'error' | 'warning' | 'info'
 const useCustomNotifications = () => {
   const showNotification = useCallback(
     (severity: NotificationSeverity, message: string, title?: string) => {
-      console.log({ message })
-
       let color = ''
       let notificationTitle = ''
       // eslint-disable-next-line default-case
@@ -27,8 +25,9 @@ const useCustomNotifications = () => {
       }
       console.log({ notificationTitle })
       notifications.show({
-        title: notificationTitle,
-        message,
+        // NOTE: just in case if somewhere is passed error objet
+        title: notificationTitle.toString(),
+        message: message.toString(),
         color
       })
     },
diff --git a/src/hooks/usePagination/usePagination.ts b/src/hooks/usePagination/usePagination.ts
index 0ff5f41d..926fdacc 100644
--- a/src/hooks/usePagination/usePagination.ts
+++ b/src/hooks/usePagination/usePagination.ts
@@ -25,7 +25,8 @@ function usePagination({ elementsLength, maxItemsPerPage }: IUsePaginationProps)
     endIndex,
     onNextPage,
     onPreviousPage,
-    onChange
+    onChange,
+    page
   }
 }
 export default usePagination
diff --git a/src/lib/backend/login.ts b/src/lib/backend/login.ts
index 490c19ef..66cd3f16 100644
--- a/src/lib/backend/login.ts
+++ b/src/lib/backend/login.ts
@@ -1,24 +1,32 @@
-import { BACKEND_BASE_URL } from 'constants/login'
-import { fetchService, RequestOptions, getReqErr } from 'services'
-import { IAdExAccount, AppError, ErrorLevel } from 'types'
-
-// TODO: fix this to use useAdExApi (adexServicesRequest)
+export interface LibJwtPayload {
+  [key: string]: any
+  iss?: string | undefined
+  sub?: string | undefined
+  aud?: string | string[] | undefined
+  exp?: number | undefined
+  nbf?: number | undefined
+  iat?: number | undefined
+  jti?: string | undefined
+}
 
-const processResponse = (res: any) => {
-  if (res.status >= 200 && res.status < 400) {
-    return res.json()
-  }
-  // TODO: fix that
-  return res.text().then((text: any) => {
-    if (res.status === 401 || res.status === 403) {
-      console.error('unauthorized', text)
-    }
+export enum JwtType {
+  ACCESS = 'access',
+  REFRESH = 'refresh'
+}
+interface PayloadData {
+  user_id: string
+  active_account_id: string
+  is_admin: boolean
+  is_dsp?: boolean
+}
 
-    getReqErr(res, text)
-  })
+interface JwtPayload extends LibJwtPayload {
+  data: PayloadData
+  type: JwtType
+  exp: number
 }
 
-const parseJwt = (token: string) => {
+const parseJwt = (token: string): JwtPayload => {
   const base64Url = token.split('.')[1]
   const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
 
@@ -26,8 +34,7 @@ const parseJwt = (token: string) => {
     window
       .atob(base64)
       .split('')
-      // eslint-disable-next-line prefer-template
-      .map((c) => `%${('00' + c.charCodeAt(0).toString(16)).slice(-2)}`)
+      .map((c) => `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`)
       .join('')
   )
 
@@ -44,100 +51,19 @@ export const isAdminToken = (accessToken: string | null) => {
   return decodeAccessToken.data.is_admin
 }
 
-export const isTokenExpired = (token: string) => {
+export const isTokenExpired = (token: string, extraSecondsBeforeExpiry: number = 0) => {
   if (!token) {
     return true
   }
 
-  const timeNowInSeconds = Math.floor(new Date().getTime() / 1000)
-  const decodeToken = parseJwt(token)
-  return decodeToken.exp < timeNowInSeconds
-}
-
-export const getMessageToSign = async (user: any) => {
-  const url = `${BACKEND_BASE_URL}/dsp/login-msg`
-  const body = {
-    wallet: user.address,
-    chainId: user.chainId
-  }
-
-  const req: RequestOptions = {
-    url,
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(body)
-  }
-
-  return fetchService(req).then(processResponse)
+  const timeNowInSeconds = new Date().getTime() / 1000
+  const { exp } = parseJwt(token)
+  const isAboutToExpire = exp - extraSecondsBeforeExpiry < timeNowInSeconds
+  return isAboutToExpire
 }
 
-type VerifyLoginProps = {
-  authMsg: any
-  signature: string
-}
-
-export const verifyLogin = async (body: VerifyLoginProps) => {
-  const url = `${BACKEND_BASE_URL}/dsp/login-verify`
-
-  const req: RequestOptions = {
-    url,
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(body)
-  }
-
-  return fetchService(req).then(processResponse)
-}
-
-export const refreshAccessToken = async (refreshToken: string) => {
-  const req: RequestOptions = {
-    url: `${BACKEND_BASE_URL}/dsp/refresh-token`,
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      refreshToken
-    })
-  }
-
-  return fetchService(req).then(processResponse)
-}
-
-export async function registerUser(
-  adexUser: IAdExAccount
-): Promise<{ adexUser: IAdExAccount | null; error?: AppError }> {
-  // TODO: post to backend and return the result as IAdExAccount
-
-  const registered = adexUser?.address && adexUser.chainId ? { ...adexUser } : null
-  const error: AppError | undefined = !registered
-    ? {
-        severity: ErrorLevel.ERROR,
-        error: new Error('User data not provided'),
-        message: 'User data not provided'
-      }
-    : undefined
-  return { adexUser: registered, error }
-}
-
-export async function getAdexAccountByAddress(
-  address: string
-): Promise<{ identityAccount: IAdExAccount | null; error?: AppError }> {
-  // TODO:
-
-  const current: Array<IAdExAccount> = [
-    {
-      chainId: 1,
-      address: '69x70fC54B13FA83571006c289B9A6bbAE69dfD4eA4',
-      accessToken: '',
-      refreshToken: '',
-      authenticated: false
-    }
-  ]
-
-  return { identityAccount: [...current].find((x) => x.address === address) || null }
+export const getJWTExpireTime = (token: string, extraSecondsBeforeExpiry: number = 0): number => {
+  const { exp } = parseJwt(token)
+  const expireTime = (exp - extraSecondsBeforeExpiry) * 1000
+  return expireTime
 }
diff --git a/src/services/fetch.ts b/src/services/fetch.ts
index 1f0fa6eb..fe64c28e 100644
--- a/src/services/fetch.ts
+++ b/src/services/fetch.ts
@@ -1,9 +1,9 @@
-export interface RequestOptions {
+export type RequestOptions = {
   url: string
   method?: 'GET' | 'POST' | 'OPTIONS' | 'PUT' | 'DELETE'
   headers?: Record<string, string>
   queryParams?: Record<string, string>
-  body?: BodyInit | null
+  body?: BodyInit
 }
 
 export async function fetchService(options: RequestOptions): Promise<Response> {
diff --git a/src/themes/base.tsx b/src/themes/base.tsx
index 38688b97..9ef0f21e 100644
--- a/src/themes/base.tsx
+++ b/src/themes/base.tsx
@@ -17,7 +17,9 @@ import {
   Paper,
   defaultVariantColorsResolver,
   VariantColorsResolver,
-  parseThemeColor
+  parseThemeColor,
+  LoadingOverlay,
+  Text
 } from '@mantine/core'
 import { Dropzone } from '@mantine/dropzone'
 import DownArrowIcon from 'resources/icons/DownArrow'
@@ -228,26 +230,9 @@ const themeOverride: MantineThemeOverride = createTheme({
       }
     }),
     Modal: Modal.extend({
-      styles: (theme) => ({
+      styles: () => ({
         root: {
-          padding: 0,
-          [theme.other.media.print]: {
-            overflow: 'visible'
-          }
-        },
-        inner: {
-          [theme.other.media.print]: {
-            overflow: 'visible',
-            // Fixes double print, no idea why with fixed it prints twice
-            position: 'absolute',
-            // Fix if used with "centered" modal prop
-            alignItems: 'flex-start'
-          }
-        },
-        content: {
-          [theme.other.media.print]: {
-            overflow: 'visible'
-          }
+          padding: 0
         }
       })
     }),
@@ -279,6 +264,19 @@ const themeOverride: MantineThemeOverride = createTheme({
       defaultProps: {
         shadow: 'none'
       }
+    }),
+    LoadingOverlay: LoadingOverlay.extend({
+      defaultProps: {
+        overlayProps: {
+          backgroundOpacity: 0,
+          blur: 2
+        }
+      }
+    }),
+    Text: Text.extend({
+      defaultProps: {
+        span: true
+      }
     })
   },
   primaryShade: { light: 3, dark: 4 },
diff --git a/src/types/account.ts b/src/types/account.ts
index 643359ac..bf3987e9 100644
--- a/src/types/account.ts
+++ b/src/types/account.ts
@@ -78,6 +78,4 @@ export interface IAdExAccount {
   address: string
   accessToken: string | null
   refreshToken: string | null
-  authenticated: boolean
-  authMsgResp?: any
 }
diff --git a/src/types/usePagination.ts b/src/types/usePagination.ts
index 6537a96d..f35df5d5 100644
--- a/src/types/usePagination.ts
+++ b/src/types/usePagination.ts
@@ -3,6 +3,7 @@ export interface IUsePagination {
   defaultPage: number
   startIndex: number
   endIndex: number
+  page: number
   onNextPage: () => void
   onPreviousPage: () => void
   onChange: (value: number) => void