From 7addd0ef2314fe8bf293fb537a21087a99af4092 Mon Sep 17 00:00:00 2001
From: yudho <yadudevpro@gmail.com>
Date: Mon, 30 Sep 2024 19:06:06 +0530
Subject: [PATCH] feat(app): add user dashboard and login

---
 apps/app/package.json                         |   9 +
 apps/app/src/components/ActiveLink.tsx        |  13 +-
 apps/app/src/components/ApiUsage/Chart.tsx    | 245 ++++++++++
 apps/app/src/components/ApiUsage/Stats.tsx    | 179 +++++++
 .../Campaign/Advertiser/ConfirmModal.tsx      |  90 ++++
 .../Campaign/Advertiser/Listing.tsx           | 279 +++++++++++
 .../components/Campaign/Advertiser/Stats.tsx  | 220 +++++++++
 .../src/components/Campaign/BannerAdForm.tsx  | 351 ++++++++++++++
 apps/app/src/components/Campaign/Plans.tsx    | 216 +++++++++
 .../app/src/components/Campaign/PreviewAd.tsx |  70 +++
 .../Campaign/Publisher/ConfirmModal.tsx       |  74 +++
 .../components/Campaign/Publisher/Listing.tsx | 284 +++++++++++
 .../components/Campaign/Publisher/Stats.tsx   | 186 +++++++
 .../app/src/components/Campaign/StartForm.tsx | 182 +++++++
 .../src/components/Campaign/TextAdForm.tsx    | 379 +++++++++++++++
 .../app/src/components/CampaignPagination.tsx |  96 ++++
 apps/app/src/components/Chart.tsx             | 244 ++++++++++
 apps/app/src/components/Dashboard/Addkeys.tsx | 146 ++++++
 .../components/Dashboard/DeleteAccount.tsx    | 161 +++++++
 .../src/components/Dashboard/DeleteKey.tsx    |  97 ++++
 .../src/components/Dashboard/Pagination.tsx   | 165 +++++++
 .../src/components/Dashboard/SetPassword.tsx  | 127 +++++
 .../src/components/Dashboard/UpdateEmail.tsx  | 208 ++++++++
 .../components/Dashboard/UpdatePassword.tsx   | 205 ++++++++
 apps/app/src/components/Icons/Avatar.tsx      |  32 ++
 apps/app/src/components/Icons/Campaign.tsx    |  25 +
 apps/app/src/components/Icons/CircleTimer.tsx |  22 +
 apps/app/src/components/Icons/Close.tsx       |  23 +
 apps/app/src/components/Icons/Create.tsx      |  22 +
 apps/app/src/components/Icons/Delete.tsx      |  22 +
 apps/app/src/components/Icons/Edit.tsx        |  23 +
 apps/app/src/components/Icons/EmailCircle.tsx |  24 +
 .../src/components/Icons/FaChevronLeft.tsx    |   8 +-
 .../src/components/Icons/FaChevronRight.tsx   |   8 +-
 apps/app/src/components/Icons/FaDownload.tsx  |  21 +
 .../components/Icons/FaFileInvoiceDollar.tsx  |  21 +
 apps/app/src/components/Icons/FaUserAlt .tsx  |  20 +
 apps/app/src/components/Icons/FileSearch.tsx  |  24 +
 apps/app/src/components/Icons/Home.tsx        |  24 +
 apps/app/src/components/Icons/Key.tsx         |  29 ++
 apps/app/src/components/Icons/LockCircle.tsx  |  24 +
 apps/app/src/components/Icons/LoginCircle.tsx |  23 +
 apps/app/src/components/Icons/Logout.tsx      |  21 +
 apps/app/src/components/Icons/Plan.tsx        |  25 +
 apps/app/src/components/Icons/Refresh.tsx     |  31 ++
 .../app/src/components/Icons/UnlockCircle.tsx |  23 +
 apps/app/src/components/Icons/User.tsx        |  21 +-
 apps/app/src/components/Icons/Visibility.tsx  |  19 +
 .../src/components/Icons/VisibilityOff.tsx    |  19 +
 apps/app/src/components/Layouts/Header.tsx    | 149 ++----
 apps/app/src/components/Layouts/Logout.tsx    |  37 ++
 apps/app/src/components/Layouts/Meta.tsx      |  22 +
 .../app/src/components/Layouts/UserLayout.tsx | 316 ++++++++++++
 apps/app/src/components/Layouts/UserMenu.tsx  | 117 +++++
 apps/app/src/components/Plans/Listing.tsx     | 113 +++++
 apps/app/src/components/SubscriptionStats.tsx | 100 ++++
 .../src/components/common/LoadingCircular.tsx |  10 +-
 .../skeleton/common/CircularLoader.tsx        |  20 +
 .../src/components/skeleton/common/Loader.tsx |  42 ++
 apps/app/src/hooks/useAuth.ts                 |  79 +++
 apps/app/src/hooks/useStorage.ts              |  29 ++
 apps/app/src/pages/_app.tsx                   |   9 -
 apps/app/src/pages/address/[id].tsx           |  12 +-
 apps/app/src/pages/apis.tsx                   |  83 +++-
 apps/app/src/pages/campaign/[id].tsx          | 141 ++++++
 apps/app/src/pages/campaign/chart.tsx         | 153 ++++++
 apps/app/src/pages/campaign/index.tsx         | 125 +++++
 apps/app/src/pages/campaign/plans.tsx         |  89 ++++
 apps/app/src/pages/confirmemail.tsx           | 254 ++++++++++
 apps/app/src/pages/login.tsx                  | 455 ++++++++++++++++++
 apps/app/src/pages/lostpassword.tsx           | 205 ++++++++
 apps/app/src/pages/nft-token/[id]/index.tsx   |  11 +
 apps/app/src/pages/plans/index.tsx            |  90 ++++
 .../src/pages/publisher/adsubscriptions.tsx   | 287 +++++++++++
 .../src/pages/publisher/apisubscriptions.tsx  | 348 ++++++++++++++
 apps/app/src/pages/publisher/apiusage.tsx     | 102 ++++
 apps/app/src/pages/publisher/keys.tsx         | 315 ++++++++++++
 apps/app/src/pages/register.tsx               | 404 ++++++++++++++++
 apps/app/src/pages/resend.tsx                 | 175 +++++++
 apps/app/src/pages/reset.tsx                  | 203 ++++++++
 apps/app/src/pages/token/[id].tsx             |  11 +
 apps/app/src/pages/updateemail.tsx            | 208 ++++++++
 apps/app/src/pages/user/apiusage.tsx          | 104 ++++
 apps/app/src/pages/user/invoices.tsx          | 278 +++++++++++
 apps/app/src/pages/user/keys.tsx              | 316 ++++++++++++
 apps/app/src/pages/user/overview.tsx          | 170 +++++++
 apps/app/src/pages/user/plan.tsx              | 284 +++++++++++
 apps/app/src/pages/user/settings.tsx          | 110 +++++
 apps/app/src/stores/withAuth.ts               |  61 +++
 apps/app/src/utils/libs.ts                    |  69 ++-
 apps/app/src/utils/types.ts                   |  48 ++
 apps/app/src/utils/validationSchema.ts        | 218 +++++++++
 yarn.lock                                     |  94 +++-
 93 files changed, 11101 insertions(+), 145 deletions(-)
 create mode 100644 apps/app/src/components/ApiUsage/Chart.tsx
 create mode 100644 apps/app/src/components/ApiUsage/Stats.tsx
 create mode 100644 apps/app/src/components/Campaign/Advertiser/ConfirmModal.tsx
 create mode 100644 apps/app/src/components/Campaign/Advertiser/Listing.tsx
 create mode 100644 apps/app/src/components/Campaign/Advertiser/Stats.tsx
 create mode 100644 apps/app/src/components/Campaign/BannerAdForm.tsx
 create mode 100644 apps/app/src/components/Campaign/Plans.tsx
 create mode 100644 apps/app/src/components/Campaign/PreviewAd.tsx
 create mode 100644 apps/app/src/components/Campaign/Publisher/ConfirmModal.tsx
 create mode 100644 apps/app/src/components/Campaign/Publisher/Listing.tsx
 create mode 100644 apps/app/src/components/Campaign/Publisher/Stats.tsx
 create mode 100644 apps/app/src/components/Campaign/StartForm.tsx
 create mode 100644 apps/app/src/components/Campaign/TextAdForm.tsx
 create mode 100644 apps/app/src/components/CampaignPagination.tsx
 create mode 100644 apps/app/src/components/Chart.tsx
 create mode 100644 apps/app/src/components/Dashboard/Addkeys.tsx
 create mode 100644 apps/app/src/components/Dashboard/DeleteAccount.tsx
 create mode 100644 apps/app/src/components/Dashboard/DeleteKey.tsx
 create mode 100644 apps/app/src/components/Dashboard/Pagination.tsx
 create mode 100644 apps/app/src/components/Dashboard/SetPassword.tsx
 create mode 100644 apps/app/src/components/Dashboard/UpdateEmail.tsx
 create mode 100644 apps/app/src/components/Dashboard/UpdatePassword.tsx
 create mode 100644 apps/app/src/components/Icons/Avatar.tsx
 create mode 100644 apps/app/src/components/Icons/Campaign.tsx
 create mode 100644 apps/app/src/components/Icons/CircleTimer.tsx
 create mode 100644 apps/app/src/components/Icons/Close.tsx
 create mode 100644 apps/app/src/components/Icons/Create.tsx
 create mode 100644 apps/app/src/components/Icons/Delete.tsx
 create mode 100644 apps/app/src/components/Icons/Edit.tsx
 create mode 100644 apps/app/src/components/Icons/EmailCircle.tsx
 create mode 100644 apps/app/src/components/Icons/FaDownload.tsx
 create mode 100644 apps/app/src/components/Icons/FaFileInvoiceDollar.tsx
 create mode 100644 apps/app/src/components/Icons/FaUserAlt .tsx
 create mode 100644 apps/app/src/components/Icons/FileSearch.tsx
 create mode 100644 apps/app/src/components/Icons/Home.tsx
 create mode 100644 apps/app/src/components/Icons/Key.tsx
 create mode 100644 apps/app/src/components/Icons/LockCircle.tsx
 create mode 100644 apps/app/src/components/Icons/LoginCircle.tsx
 create mode 100644 apps/app/src/components/Icons/Logout.tsx
 create mode 100644 apps/app/src/components/Icons/Plan.tsx
 create mode 100644 apps/app/src/components/Icons/Refresh.tsx
 create mode 100644 apps/app/src/components/Icons/UnlockCircle.tsx
 create mode 100644 apps/app/src/components/Icons/Visibility.tsx
 create mode 100644 apps/app/src/components/Icons/VisibilityOff.tsx
 create mode 100644 apps/app/src/components/Layouts/Logout.tsx
 create mode 100644 apps/app/src/components/Layouts/Meta.tsx
 create mode 100644 apps/app/src/components/Layouts/UserLayout.tsx
 create mode 100644 apps/app/src/components/Layouts/UserMenu.tsx
 create mode 100644 apps/app/src/components/Plans/Listing.tsx
 create mode 100644 apps/app/src/components/SubscriptionStats.tsx
 create mode 100644 apps/app/src/components/skeleton/common/CircularLoader.tsx
 create mode 100644 apps/app/src/components/skeleton/common/Loader.tsx
 create mode 100644 apps/app/src/hooks/useAuth.ts
 create mode 100644 apps/app/src/hooks/useStorage.ts
 create mode 100644 apps/app/src/pages/campaign/[id].tsx
 create mode 100644 apps/app/src/pages/campaign/chart.tsx
 create mode 100644 apps/app/src/pages/campaign/index.tsx
 create mode 100644 apps/app/src/pages/campaign/plans.tsx
 create mode 100644 apps/app/src/pages/confirmemail.tsx
 create mode 100644 apps/app/src/pages/login.tsx
 create mode 100644 apps/app/src/pages/lostpassword.tsx
 create mode 100644 apps/app/src/pages/plans/index.tsx
 create mode 100644 apps/app/src/pages/publisher/adsubscriptions.tsx
 create mode 100644 apps/app/src/pages/publisher/apisubscriptions.tsx
 create mode 100644 apps/app/src/pages/publisher/apiusage.tsx
 create mode 100644 apps/app/src/pages/publisher/keys.tsx
 create mode 100644 apps/app/src/pages/register.tsx
 create mode 100644 apps/app/src/pages/resend.tsx
 create mode 100644 apps/app/src/pages/reset.tsx
 create mode 100644 apps/app/src/pages/updateemail.tsx
 create mode 100644 apps/app/src/pages/user/apiusage.tsx
 create mode 100644 apps/app/src/pages/user/invoices.tsx
 create mode 100644 apps/app/src/pages/user/keys.tsx
 create mode 100644 apps/app/src/pages/user/overview.tsx
 create mode 100644 apps/app/src/pages/user/plan.tsx
 create mode 100644 apps/app/src/pages/user/settings.tsx
 create mode 100644 apps/app/src/stores/withAuth.ts
 create mode 100644 apps/app/src/utils/validationSchema.ts

diff --git a/apps/app/package.json b/apps/app/package.json
index beb39742..361b1169 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -55,6 +55,11 @@
     "clipboard": "^2.0.11",
     "dayjs": "1.11.0",
     "ethers": "^5.7.2",
+    "formik": "^2.4.6",
+    "highcharts": "^11.4.8",
+    "highcharts-exporting": "^0.1.7",
+    "highcharts-react-official": "^3.2.1",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "near-api-js": "5.0.0",
     "near-social-vm": "github:NearSocial/VM#2.5.5",
@@ -67,7 +72,9 @@
     "qs": "^6.12.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "7.46.1",
+    "react-loading-skeleton": "^3.4.0",
     "react-perfect-scrollbar": "^1.5.8",
     "react-singleton-hook": "4.0.1",
     "react-syntax-highlighter": "^15.5.0",
@@ -78,11 +85,13 @@
   },
   "devDependencies": {
     "@types/big.js": "~6.2.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash": "~4.17.7",
     "@types/node": "~20.8",
     "@types/qs": "~6.9.15",
     "@types/react": "~18.2",
     "@types/react-dom": "~18.2",
+    "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "~10.4",
     "eslint-config-custom-nextjs": "*",
diff --git a/apps/app/src/components/ActiveLink.tsx b/apps/app/src/components/ActiveLink.tsx
index babd88a0..4ec99143 100644
--- a/apps/app/src/components/ActiveLink.tsx
+++ b/apps/app/src/components/ActiveLink.tsx
@@ -8,6 +8,7 @@ interface ActiveLinkProps extends LinkProps {
   activeClassName?: string;
   inActiveClassName?: string;
   href: string | UrlObject;
+  exact?: boolean | null;
 }
 
 const ActiveLink = ({
@@ -15,6 +16,7 @@ const ActiveLink = ({
   activeClassName,
   inActiveClassName,
   href,
+  exact,
   ...props
 }: ActiveLinkProps) => {
   const { asPath } = useRouter();
@@ -23,10 +25,13 @@ const ActiveLink = ({
   const childClassName = child?.props?.className || ' ';
 
   const hrefString = typeof href === 'string' ? href : href.pathname || '';
-
-  const className = (
-    href === '/' ? asPath === href : asPath.startsWith(hrefString)
-  )
+  let isActive = false;
+  if (exact) {
+    isActive = asPath === href;
+  } else {
+    isActive = href === '/' ? asPath === href : asPath.startsWith(hrefString);
+  }
+  const className = isActive
     ? `${childClassName} ${activeClassName}`
     : `${childClassName} ${inActiveClassName}`;
 
diff --git a/apps/app/src/components/ApiUsage/Chart.tsx b/apps/app/src/components/ApiUsage/Chart.tsx
new file mode 100644
index 00000000..cae04cae
--- /dev/null
+++ b/apps/app/src/components/ApiUsage/Chart.tsx
@@ -0,0 +1,245 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import Highcharts from 'highcharts/highstock';
+import HighchartsReact from 'highcharts-react-official';
+import HighchartsExporting from 'highcharts/modules/exporting';
+import dayjs from '../../utils/dayjs';
+import withAuth from '@/stores/withAuth';
+import useAuth from '@/hooks/useAuth';
+import Plan from '../Icons/Plan';
+import CircularLoader from '../skeleton/common/CircularLoader';
+import { TooltipFormatterContextObject } from 'highcharts';
+
+const ApiUsageChart = ({ keyId }: { keyId?: string | string[] }) => {
+  const [options, setOptions] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const { theme } = useTheme();
+  const { data: chartData, loading: loadingChart } = useAuth(
+    keyId ? `/key-usage/${keyId}` : '',
+  );
+  useEffect(() => {
+    const isDarkTheme = theme === 'dark';
+    if (!chartData) return;
+    const chartOptions: any = {
+      chart: {
+        backgroundColor: isDarkTheme ? '#0d0d0d' : '#fff',
+        height: 500,
+        zoomType: 'x',
+      },
+      title: {
+        text: 'Overview',
+        style: {
+          color: isDarkTheme ? '#FFFFFF' : '#000000',
+        },
+      },
+      xAxis: {
+        type: 'datetime',
+        labels: {
+          style: {
+            color: isDarkTheme ? '#CCCCCC' : '#666666',
+          },
+        },
+        lineColor: isDarkTheme ? '#666666' : '#cccccc',
+        tickColor: isDarkTheme ? '#666666' : '#cccccc',
+        gridLineColor: isDarkTheme ? '#444444' : '#E6E6E6',
+      },
+      yAxis: {
+        title: {
+          text: null,
+          style: {
+            color: isDarkTheme ? '#FFFFFF' : '#000000',
+          },
+        },
+        labels: {
+          style: {
+            color: isDarkTheme ? '#CCCCCC' : '#666666',
+          },
+        },
+        gridLineColor: isDarkTheme ? '#444444' : '#e6e6e6',
+      },
+      legend: {
+        enabled: false,
+        itemStyle: {
+          color: isDarkTheme ? '#CCCCCC' : '#666666',
+        },
+      },
+      plotOptions: {
+        area: {
+          fillColor: {
+            linearGradient: {
+              x1: 0,
+              y1: 0,
+              x2: 0,
+              y2: 1,
+            },
+            stops: [
+              [
+                0,
+                isDarkTheme
+                  ? 'rgba(30, 130, 133, 0.8)'
+                  : 'rgba(3, 63, 64, 0.8)',
+              ],
+              [1, isDarkTheme ? 'rgba(3, 63, 64, 0.20)' : 'rgba(3, 63, 64, 0)'],
+            ],
+          },
+          marker: {
+            enabled: false,
+          },
+          lineWidth: 1,
+          states: {
+            hover: {
+              lineWidth: 1,
+            },
+          },
+          threshold: null,
+          turboThreshold: 3650,
+        },
+      },
+      tooltip: {
+        shared: true,
+        valueSuffix: '',
+        formatter: function (this: TooltipFormatterContextObject) {
+          let s = `<b>${dayjs(this.x).format('MM/DD/YYYY HH:mm')}</b>`;
+          this?.points?.forEach(function (point) {
+            s += `<br/><span style="color:${point.color}">\u25CF</span> ${point.series.name}: ${point.y}`;
+          });
+          return s;
+        },
+      },
+      series: [
+        {
+          name: 'API Key Usage',
+          type: 'area',
+          data: chartData?.length > 0 ? chartData : [],
+          color: isDarkTheme
+            ? 'rgba(30, 130, 133, 0.8)'
+            : 'rgba(3, 63, 64, 0.8)',
+          fillColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+            stops: [
+              [
+                0,
+                isDarkTheme
+                  ? 'rgba(30, 130, 133, 0.8)'
+                  : 'rgba(3, 63, 64, 0.8)',
+              ],
+              [1, isDarkTheme ? 'rgba(3, 63, 64, 0.20)' : 'rgba(3, 63, 64, 0)'],
+            ],
+          },
+        },
+      ],
+      credits: {
+        enabled: false,
+      },
+      rangeSelector: {
+        allButtonsEnabled: true,
+        selected: 0,
+        buttonTheme: {
+          width: 60,
+        },
+      },
+      exporting: {
+        menuItemDefinitions: {
+          embed: {
+            onclick: function () {
+              open;
+            },
+            text: 'Embed chart',
+          },
+        },
+        buttons: {
+          contextButton: {
+            menuItems: [
+              'viewFullscreen',
+              'printChart',
+              'separator',
+              'downloadPNG',
+              'downloadJPEG',
+              'downloadPDF',
+              'downloadSVG',
+              'separator',
+              'embed',
+            ],
+            theme: {
+              fill: isDarkTheme ? '#444444' : '#FFFFFF', // Button background
+              style: {
+                color: isDarkTheme ? '#FFFFFF' : '#000000', // Text color
+              },
+              states: {
+                hover: {
+                  fill: isDarkTheme ? '#555555' : '#E6E6E6', // Hover background
+                  style: {
+                    color: isDarkTheme ? '#FFFFFF' : '#000000', // Hover text color
+                  },
+                },
+                select: {
+                  fill: isDarkTheme ? '#333333' : '#E6E6E6', // Select background
+                  style: {
+                    color: isDarkTheme ? '#FFFFFF' : '#000000', // Select text color
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+    const wrapper = document.getElementById('chart-wrapper');
+    if (wrapper) {
+      chartOptions.chart.height = wrapper.offsetWidth;
+      chartOptions.chart.height = wrapper.offsetHeight;
+    }
+    setOptions(chartOptions);
+    setLoading(false);
+  }, [chartData, theme]);
+
+  if (loading) {
+    return (
+      <div className="h-1/2 flex items-center justify-center py-48">
+        <CircularLoader />
+      </div>
+    );
+  }
+
+  if (typeof Highcharts === 'object') {
+    HighchartsExporting(Highcharts);
+  }
+
+  return (
+    <>
+      {loadingChart ? (
+        <div className="h-1/2 flex items-center justify-center py-48">
+          <CircularLoader />
+        </div>
+      ) : chartData?.length > 0 ? (
+        <div className="pl-2 pr-4 py-6">
+          <div>
+            <HighchartsReact
+              highcharts={Highcharts}
+              options={options}
+              constructorType={'stockChart'}
+              className="highcharts-dark"
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit">
+          <div className="text-center py-28">
+            <div className="mb-4 flex justify-center">
+              <span className="inline-block border border-yellow-600 border-opacity-25 bg-opacity-10 bg-yellow-300 text-yellow-500 rounded-full p-4">
+                <Plan />
+              </span>
+            </div>
+            <h3 className="h-5 font-bold text-lg text-black dark:text-neargray-10">
+              API Key Usage
+            </h3>
+            <p className="mb-0 py-4 font-bold text-sm text-gray-500 dark:text-neargray-50">
+              No API key usage over time
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+export default withAuth(ApiUsageChart);
diff --git a/apps/app/src/components/ApiUsage/Stats.tsx b/apps/app/src/components/ApiUsage/Stats.tsx
new file mode 100644
index 00000000..80d91719
--- /dev/null
+++ b/apps/app/src/components/ApiUsage/Stats.tsx
@@ -0,0 +1,179 @@
+import React, { useMemo } from 'react';
+import useAuth from '@/hooks/useAuth';
+import { localFormat } from '@/utils/libs';
+import Skeleton from '../skeleton/common/Skeleton';
+
+const ApiUsageStats = ({ keyId }: { keyId?: string | string[] }) => {
+  const { data, loading } = useAuth('advertiser/api-usage/stats');
+  const { data: keyData, loading: keyDataLoading } = useAuth(
+    keyId ? `api-usage-per-key/${keyId}/stats` : '',
+  );
+  const rateLimit = useMemo(() => {
+    const limit = data?.monthLimit ? data?.monthLimit : 0;
+    const dayLimit = data?.dayLimit ? data?.dayLimit : 0;
+    const consumed = data?.consumed ? data?.consumed : 0;
+    const minuteLimit = data?.minuteLimit ? data?.minuteLimit : 0;
+    const consumedDaily = data?.consumedDaily ? data?.consumedDaily : 0;
+
+    const adjustedConsumed = Math.min(consumed, limit);
+    const adjustedConsumedDaily = Math.min(consumedDaily, dayLimit);
+
+    const percentage = limit === 0 ? 0 : (adjustedConsumed / limit) * 100;
+    const dailyPercentage =
+      dayLimit === 0 ? 0 : (adjustedConsumedDaily / dayLimit) * 100;
+
+    return {
+      limit,
+      consumed: adjustedConsumed,
+      percentage: Math.min(percentage, 100),
+      dailyPercentage: Math.min(dailyPercentage, 100),
+      dayLimit,
+      consumedDaily: adjustedConsumedDaily,
+      minuteLimit,
+    };
+  }, [data]);
+
+  const isDailyLimitExceeded = rateLimit?.consumedDaily >= rateLimit?.dayLimit;
+  const isMonthlyLimitExceeded = rateLimit?.consumed >= rateLimit?.limit;
+
+  return (
+    <>
+      {
+        <div className="bg-white dark:bg-black-600 dark:text-neargray-10 border soft-shadow rounded-xl p-2">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-2">
+            <div className="flex flex-col md:items-center items-start justify-start ">
+              <div className="m-2 p-2  md:border-r w-full">
+                <h2 className="text-lg text-gray-400 dark:text-neargray-10 font-semibold">
+                  {'Requests Consumed (Monthly)'}
+                </h2>
+                {keyId ? (
+                  !keyDataLoading ? (
+                    <>
+                      <p className="text-3xl text-black font-bold">
+                        {localFormat(keyData?.consumed)}
+                      </p>
+                      <div className="text-gray-400 dark:text-neargray-10 text-sm mt-2">
+                        <p className="flex flex-col md:items-start items-start justify-center">
+                          Current rate limit: {data?.minuteLimit} req/min
+                        </p>
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <Skeleton className="w-1/2 h-6" />
+                      <Skeleton className="mt-3" />
+                    </>
+                  )
+                ) : !loading ? (
+                  <>
+                    <p className="text-3xl text-black dark:text-neargray-10 font-bold">
+                      {localFormat(data?.consumed)}
+                    </p>
+                    <div className="text-gray-400  dark:text-neargray-10 text-sm mt-2">
+                      <p className="flex flex-col md:items-start items-start justify-center">
+                        Current rate limit: {data?.minuteLimit} req/min
+                      </p>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <Skeleton className="w-1/2 h-6" />
+                    <Skeleton className="mt-3" />
+                  </>
+                )}
+              </div>
+            </div>
+            <div className="flex flex-col md:items-center items-start justify-start ">
+              <div className="m-2 p-2 w-full  md:border-r">
+                <h2 className="text-lg text-gray-400 dark:text-neargray-10 font-semibold">
+                  {'Requests Remaining (24H)'}
+                </h2>
+                {!loading ? (
+                  <>
+                    <p className=" text-3xl font-bold text-black">
+                      {localFormat(data?.remainingDaily)}
+                    </p>
+                    <div>
+                      <div className="w-full bg-gray-200 dark:bg-neargray-50 h-2 rounded-full mt-2">
+                        <div
+                          className="bg-green-500 dark:bg-green-250 h-2 rounded-full"
+                          style={{
+                            width: rateLimit?.dailyPercentage + '%',
+                          }}
+                        ></div>
+                      </div>
+                      <div className="flex flex-col sm:flex-row gap-y-2 sm:gap-y-0 justify-between mt-1">
+                        <p className="text-xs">
+                          {localFormat(String(rateLimit?.consumedDaily))} /
+                          {localFormat(rateLimit?.dayLimit)}
+                        </p>
+                        <p className="text-xs text-gray-400 dark:text-neargray-10">
+                          Daily (24H) Quota
+                        </p>
+                      </div>
+                    </div>
+                    {isDailyLimitExceeded && (
+                      <p className="text-red-500 dark:text-red-400 ssssss text-xs mt-2">
+                        You have exceeded your daily API request limit!
+                      </p>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <Skeleton className="w-1/2 h-6" />
+                    <Skeleton className="mt-3" />
+                  </>
+                )}
+              </div>
+            </div>
+            <div className="flex flex-col md:items-center items-start justify-start">
+              <div className="m-2 p-2 w-full">
+                <h2 className="text-lg text-gray-400 dark:text-neargray-10 font-semibold">
+                  {'Requests Remaining (Monthly)'}
+                </h2>
+                {!loading ? (
+                  <>
+                    <p className=" text-3xl font-bold text-black dark:text-neargray-10">
+                      {localFormat(data?.remainingMonthly)}
+                    </p>
+                    <div>
+                      <div className="w-full bg-gray-200 dark:bg-neargray-50 h-2 rounded-full mt-2">
+                        <div
+                          className="bg-green-500 dark:bg-green-250 h-2 rounded-full"
+                          style={{
+                            width: rateLimit?.percentage + '%',
+                          }}
+                        ></div>
+                      </div>
+                      <div className="flex flex-col sm:flex-row gap-y-2 sm:gap-y-0 justify-between mt-1">
+                        <p className="text-xs">
+                          {localFormat(String(rateLimit?.consumed))} /
+                          {localFormat(rateLimit?.limit)}
+                        </p>
+                        <p className="text-xs text-gray-400 dark:text-neargray-10">
+                          Monthly Quota
+                        </p>
+                      </div>
+                    </div>
+                    {isMonthlyLimitExceeded && (
+                      <p className="text-red-500 dark:text-red-400 text-xs mt-2">
+                        You have exceeded your monthly API request limit!
+                      </p>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <Skeleton className="w-1/2 h-6" />
+                    <Skeleton className="mt-3" />
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </>
+  );
+};
+
+export default ApiUsageStats;
diff --git a/apps/app/src/components/Campaign/Advertiser/ConfirmModal.tsx b/apps/app/src/components/Campaign/Advertiser/ConfirmModal.tsx
new file mode 100644
index 00000000..6e7b29df
--- /dev/null
+++ b/apps/app/src/components/Campaign/Advertiser/ConfirmModal.tsx
@@ -0,0 +1,90 @@
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import { toast } from 'react-toastify';
+import { useState } from 'react';
+import Close from '@/components/Icons/Close';
+import { currentCampaign } from '@/utils/types';
+
+type Props = {
+  setConfirmOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  currentCampaign: currentCampaign | null;
+  mutate: () => void;
+  handleCampaignCancellation: () => Promise<void>;
+  buttonLoading: boolean;
+  setButtonLoading: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const ConfirmModal = ({
+  setConfirmOpen,
+  handleCampaignCancellation,
+}: Props) => {
+  const [buttonLoading, setButtonLoading] = useState(false);
+
+  const onSubmit = async () => {
+    try {
+      setButtonLoading(true);
+      await handleCampaignCancellation();
+      if (!toast.isActive('campaign-cancelled')) {
+        toast.success('Campaign cancelled successfully!', {
+          toastId: 'campaign-cancelled',
+        });
+      }
+      setConfirmOpen(false);
+    } catch (error) {
+      if (!toast.isActive('campaign-cancelled-error')) {
+        toast.error('Failed to cancel campaign', {
+          toastId: 'campaign-cancelled-error',
+        });
+      }
+    } finally {
+      setButtonLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <DialogOverlay className="fixed bg-gray-600 bg-opacity-20 inset-0 z-30 flex items-start mt-32 justify-center">
+        <DialogContent className="w-full max-w-lg mx-auto bg-white dark:bg-black-600 dark:text-neargray-10 shadow-lg rounded-lg overflow-hidden px-4 md:px-0">
+          <div className="flex items-center justify-between  px-6 pt-8">
+            <h4 className="flex items-center text-sm break-all">
+              Confirm Campaign Canceling
+            </h4>
+            <button
+              className="text-gray-500 dark:text-neargray-10 fill-current"
+              onClick={() => setConfirmOpen(false)}
+            >
+              <Close />
+            </button>
+          </div>
+          <div className="px-6 pb-5 pt-2">
+            <div className="py-2 pb-10">
+              <p className="text-gray-400 dark:text-neargray-10 text-sm">
+                Are you sure you want to cancel this campaign? Canceling this
+                campaign will also cancel your subscription!{' '}
+              </p>
+            </div>
+            <div className="flex items-center justify-end  py-4">
+              <p
+                onClick={() => setConfirmOpen(false)}
+                className="text-[13px] delay-300 duration-300 mx-1 dark:text-neargray-10 hover:bg-gray-200 dark:hover:bg-black-200 px-4 py-2 rounded cursor-pointer"
+              >
+                Cancel
+              </p>
+              <button
+                onClick={onSubmit}
+                className={`text-sm text-[13px] px-4 focus:outline-none text-white text-center font-semibold py-2 bg-green-500 dark:bg-green-250 rounded transition ease-in-out delay-150 ${
+                  buttonLoading
+                    ? 'opacity-50 cursor-not-allowed'
+                    : 'hover:-translate-y-1 hover:scale-100 hover:shadow-md hover:shadow-primary'
+                }`}
+                disabled={buttonLoading}
+              >
+                {buttonLoading ? 'Loading...' : 'Submit'}
+              </button>
+            </div>
+          </div>
+        </DialogContent>
+      </DialogOverlay>
+    </>
+  );
+};
+export default ConfirmModal;
diff --git a/apps/app/src/components/Campaign/Advertiser/Listing.tsx b/apps/app/src/components/Campaign/Advertiser/Listing.tsx
new file mode 100644
index 00000000..c56f5ba1
--- /dev/null
+++ b/apps/app/src/components/Campaign/Advertiser/Listing.tsx
@@ -0,0 +1,279 @@
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+import ConfirmModal from './ConfirmModal';
+
+import { useRouter } from 'next/router';
+import useAuth, { request } from '@/hooks/useAuth';
+import Edit from '@/components/Icons/Edit';
+import Plan from '@/components/Icons/Plan';
+import { localFormat } from '@/utils/libs';
+import { currentCampaign } from '@/utils/types';
+import CampaignPagination from '@/components/CampaignPagination';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+type Props = {
+  statsMutate: () => void;
+};
+
+const Listing = ({ statsMutate }: Props) => {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [currentCampaign, setCurrentCampaign] =
+    useState<currentCampaign | null>(null);
+  const [buttonLoading, setButtonLoading] = useState(false);
+  const [url, setUrl] = useState(`advertiser/campaigns?page=1`);
+  const router = useRouter();
+
+  const { data, loading, mutate } = useAuth(url);
+
+  const { status } = router.query;
+
+  useEffect(() => {
+    if (status) {
+      mutate();
+    }
+  }, [status, mutate]);
+
+  const formatStartDate = (startDate: string) => {
+    if (!startDate) return 'XX/XX/XXXX';
+
+    const date = new Date(startDate);
+    const timeZone = 'UTC'; // Set your desired time zone here
+    const formattedDate = date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      timeZone,
+    });
+
+    return formattedDate;
+  };
+
+  const onCancel = (item: currentCampaign) => {
+    setConfirmOpen(true);
+    setCurrentCampaign(item);
+  };
+
+  const handleCampaignCancellation = async () => {
+    await request.post(`advertiser/campaign/${currentCampaign?.id}/cancel`);
+    await sleep(1000);
+    mutate();
+    statsMutate();
+  };
+
+  return (
+    <>
+      <div className="block lg:flex lg:space-x-2 rounded-xl">
+        <div className="w-full rounded-xl">
+          <div className="bg-white dark:bg-black-600 dark:text-neargray-10 border dark:border-black-200 soft-shadow rounded-xl">
+            <div className={`flex flex-col lg:flex-row pt-4 justify-between`}>
+              <div className="flex flex-col">
+                <h1 className="leading-7 px-6 text-base text-black dark:text-neargray-10">
+                  My Campaigns
+                </h1>
+                <div className="leading-7 px-6 text-sm mb-4 text-gray-500 dark:text-neargray-10">
+                  <p>
+                    Below are your campaigns. Click on &quot;Edit&quot; to view
+                    and modify the campaign.
+                  </p>
+                </div>
+              </div>
+              <CampaignPagination
+                nextPageUrl={data?.links?.next}
+                prevPageUrl={data?.links?.prev}
+                firstPageUrl={data?.links?.first}
+                currentPage={data?.meta?.current_page}
+                setUrl={setUrl}
+                mutate={mutate}
+              />
+            </div>
+            <div className="overflow-x-auto ">
+              <table className="min-w-full divide-y dark:divide-black-200 border-t dark:border-black-200 text-black">
+                <thead className="bg-gray-100 dark:bg-black-600">
+                  <tr>
+                    <th
+                      scope="col"
+                      className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      placement
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      status
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      impressions
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      clicks
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider whitespace-nowrap"
+                    >
+                      start date
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y dark:bg-black-600 divide-gray-200">
+                  {loading &&
+                    [...Array(4)].map((_, i) => (
+                      <tr key={i} className="hover:bg-blue-900/5 h-[57px]">
+                        <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-5 py-4 whitespace-nowrap text-sm">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <Skeleton className="h-4" />
+                        </td>
+                      </tr>
+                    ))}
+                  {!loading && data?.data?.length === 0 && (
+                    <tr className="h-[57px]">
+                      <td
+                        colSpan={100}
+                        className="text-gray-400 dark:text-neargray-10 text-xs"
+                      >
+                        <div className="w-full bg-white dark:bg-black-600 rounded-xl soft-shadow h-fit">
+                          <div className="text-center py-28">
+                            <div className="mb-4 flex justify-center">
+                              <span className="inline-block border border-yellow-600 border-opacity-25 bg-opacity-10 bg-yellow-300 text-yellow-500 rounded-full p-4">
+                                <Plan />
+                              </span>
+                            </div>
+                            <h3 className="h-5 font-bold text-lg text-black dark:text-neargray-10">
+                              Campaigns Empty
+                            </h3>
+                            <p className="mb-0 py-4 font-bold text-sm text-gray-500 dark:text-neargray-10">
+                              No Campaign Found
+                            </p>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                  {data?.data?.map((item: currentCampaign) => (
+                    <tr
+                      className="h-[57px] dark:text-neargray-10 dark:bg-black-200 hover:bg-blue-900/5"
+                      key={item?.id}
+                    >
+                      <td className="px-5 py-4 whitespace-nowrap text-sm">
+                        <span className="text-xs">
+                          {item?.title.charAt(0).toUpperCase() +
+                            item?.title.slice(1)}
+                        </span>
+                      </td>
+                      <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                        <span className="text-xs uppercase">
+                          {item?.is_active == 1 ? 'active' : 'non-active'}
+                        </span>
+                      </td>
+                      <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                        <span className="text-xs">
+                          {localFormat((item?.impression_count).toString())}
+                        </span>
+                      </td>
+                      <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                        <span className="text-xs">
+                          {localFormat((item?.click_count).toString())}
+                        </span>
+                      </td>
+                      <td className="px-5 py-4 whitespace-nowrap text-sm">
+                        <span className="text-xs">
+                          {formatStartDate(item?.start_date)}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap flex gap-x-2 items-center text-xs text-gray-500 dark:text-neargray-10 align-top">
+                        <div className="flex items-center border border-green-500 dark:border-green-250 rounded-md px-2 py-1 hover:bg-primary-100 dark:hover:bg-black-200">
+                          <Link
+                            passHref
+                            className="flex items-center"
+                            href={{
+                              pathname: '/campaign/[id]',
+                              query: { id: item?.id },
+                            }}
+                          >
+                            <Edit className=" text-green-500 dark:text-neargray-10 " />{' '}
+                            &nbsp;
+                            <p className="ml-1 text-green-500 dark:text-neargray-10 cursor-pointer">
+                              Edit
+                            </p>
+                          </Link>
+                        </div>
+                        <div className="flex items-center border border-green-500 dark:border-green-250 rounded-md px-2 py-1 hover:bg-primary-100 dark:hover:bg-black-200">
+                          <Link
+                            passHref
+                            className="flex items-center"
+                            href={{
+                              pathname: '/campaign/chart',
+                              query: { id: item?.id },
+                            }}
+                          >
+                            <p className="ml-1  text-green-500 dark:text-neargray-10 cursor-pointer">
+                              Stats
+                            </p>
+                          </Link>
+                        </div>
+                        {item?.subscription?.status === 'canceled' ? (
+                          <span className="bg-red-100 text-xs text-red-500 rounded-xl px-2 py-1 max-w-[120px] inline-flex truncate">
+                            Cancelled
+                          </span>
+                        ) : (
+                          <div
+                            onClick={() => onCancel(item)}
+                            className="flex items-center border border-green-500 dark:border-green-250 rounded-md px-2 py-1 hover:bg-primary-100 dark:hover:bg-black-200"
+                          >
+                            <p className="ml-1 text-green-500 dark:text-neargray-10 cursor-pointer">
+                              Cancel Campaign
+                            </p>
+                          </div>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      {confirmOpen && (
+        <ConfirmModal
+          setConfirmOpen={setConfirmOpen}
+          currentCampaign={currentCampaign}
+          mutate={mutate}
+          handleCampaignCancellation={handleCampaignCancellation}
+          buttonLoading={buttonLoading}
+          setButtonLoading={setButtonLoading}
+        />
+      )}
+    </>
+  );
+};
+export default Listing;
diff --git a/apps/app/src/components/Campaign/Advertiser/Stats.tsx b/apps/app/src/components/Campaign/Advertiser/Stats.tsx
new file mode 100644
index 00000000..94f37297
--- /dev/null
+++ b/apps/app/src/components/Campaign/Advertiser/Stats.tsx
@@ -0,0 +1,220 @@
+import React, { useEffect } from 'react';
+
+import useAuth from '@/hooks/useAuth';
+import { localFormat } from '@/utils/libs';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+
+type Props = {
+  campaignId?: string | string[];
+  statsMutate?: () => void;
+  isTextHide?: boolean;
+};
+
+const AdImpressions = ({ campaignId, statsMutate, isTextHide }: Props) => {
+  const { data, loading } = useAuth('advertiser/stats');
+  const { data: campaignStats, loading: campaignDataLoading } = useAuth(
+    campaignId ? `campaign/${campaignId}/stats` : '',
+  );
+
+  const { data: campaignOverAllStats, loading: campaignOverAllDataLoading } =
+    useAuth(campaignId ? `campaign/${campaignId}/overall-stats` : '');
+
+  let totalImpression = +data?.totalImpression ? +data?.totalImpression : '0';
+  let totalClicks = +data?.totalClicks ? +data?.totalClicks : '0';
+  let totalSpent = +data?.totalSpent / 100 ? +data?.totalSpent / 100 : '$0';
+
+  useEffect(() => {
+    if (statsMutate) {
+      statsMutate();
+    }
+  }, [statsMutate, campaignId]);
+
+  return (
+    <>
+      {!isTextHide ? (
+        <div className="flex flex-wrap md:!flex-nowrap">
+          <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 mr-4 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Total Impressions
+              {!isTextHide ? (
+                <p className="text-sm">[current Month]</p>
+              ) : (
+                <p className="text-sm">[Overall]</p>
+              )}
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignDataLoading ? (
+                    localFormat(campaignStats?.totalImpression)
+                  ) : (
+                    <Skeleton className="w-10 h-9 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalImpression.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-9 mt-4 mb-8" />
+            )}
+          </div>
+          <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 mr-4 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Total Clicks{' '}
+              {!isTextHide ? (
+                <p className="text-sm">[current Month]</p>
+              ) : (
+                <p className="text-sm">[Overall]</p>
+              )}
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignDataLoading ? (
+                    localFormat(campaignStats?.totalClicks)
+                  ) : (
+                    <Skeleton className="w-10 h-9 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalClicks.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-9 mt-4 mb-8" />
+            )}
+          </div>
+          <div className="w-full bg-white dark:bg-black-600 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Active Subscription{' '}
+            </h1>
+            {!loading ? (
+              <p
+                className={`${
+                  !isTextHide ? 'mt-8' : 'mt-4'
+                } mb-8 text-3xl text-gray-500 dark:text-neargray-10`}
+              >
+                {campaignId ? (
+                  !campaignDataLoading ? (
+                    campaignStats?.activeSubscription?.toLocaleString('en-US', {
+                      style: 'currency',
+                      currency: 'USD',
+                    })
+                  ) : (
+                    <Skeleton
+                      className={`w-10 h-9 ${
+                        !isTextHide ? 'mt-8' : 'mt-4'
+                      } mb-8`}
+                    />
+                  )
+                ) : (
+                  totalSpent?.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                  })
+                )}
+              </p>
+            ) : (
+              <Skeleton
+                className={`w-10 h-9 ${!isTextHide ? 'mt-8' : 'mt-4'} mb-8`}
+              />
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-wrap md:!flex-nowrap">
+          <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 mr-4 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Total Impressions{' '}
+              {!isTextHide ? (
+                <p className="text-sm">[current Month]</p>
+              ) : (
+                <p className="text-sm">[Overall]</p>
+              )}
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignOverAllDataLoading ? (
+                    localFormat(campaignOverAllStats?.totalImpression)
+                  ) : (
+                    <Skeleton className="w-10 h-9 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalImpression.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-9 mt-4 mb-8" />
+            )}
+          </div>
+          <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 mr-4 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Total Clicks{' '}
+              {!isTextHide ? (
+                <p className="text-sm">[current Month]</p>
+              ) : (
+                <p className="text-sm">[Overall]</p>
+              )}
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignOverAllDataLoading ? (
+                    localFormat(campaignOverAllStats?.totalClicks)
+                  ) : (
+                    <Skeleton className="w-10 h-9 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalClicks.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-9 mt-4 mb-8" />
+            )}
+          </div>
+          <div className="w-full bg-white dark:bg-black-600 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Active Subscription{' '}
+            </h1>
+            {!loading ? (
+              <p
+                className={`${
+                  !isTextHide ? 'mt-8' : 'mt-4'
+                } mb-8 text-3xl text-gray-500 dark:text-neargray-10`}
+              >
+                {campaignId ? (
+                  !campaignOverAllDataLoading ? (
+                    campaignOverAllStats?.activeSubscription?.toLocaleString(
+                      'en-US',
+                      {
+                        style: 'currency',
+                        currency: 'USD',
+                      },
+                    )
+                  ) : (
+                    <Skeleton
+                      className={`w-10 h-9 ${
+                        !isTextHide ? 'mt-8' : 'mt-4'
+                      } mb-8`}
+                    />
+                  )
+                ) : (
+                  totalSpent?.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                  })
+                )}
+              </p>
+            ) : (
+              <Skeleton
+                className={`w-10 h-9 ${!isTextHide ? 'mt-8' : 'mt-4'} mb-8`}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AdImpressions;
diff --git a/apps/app/src/components/Campaign/BannerAdForm.tsx b/apps/app/src/components/Campaign/BannerAdForm.tsx
new file mode 100644
index 00000000..9a9e3e2e
--- /dev/null
+++ b/apps/app/src/components/Campaign/BannerAdForm.tsx
@@ -0,0 +1,351 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useEffect, useState } from 'react';
+import { FormikValues, useFormik } from 'formik';
+import { toast } from 'react-toastify';
+import StartForm from './StartForm';
+import Avatar from '../Icons/Avatar';
+import { request } from '@/hooks/useAuth';
+import LoginCircle from '../Icons/LoginCircle';
+import EmailCircle from '../Icons/EmailCircle';
+import { bannerCampaignValidation } from '@/utils/validationSchema';
+import { CampaignProps } from '@/utils/types';
+import Skeleton from '../skeleton/common/Skeleton';
+
+type BannerPreview = {
+  desktopRight?: string;
+  mobile?: string;
+};
+
+const BannerAdForm = ({
+  campaignId,
+  campaignData,
+  mutate,
+  loading,
+  campaignMutate,
+}: CampaignProps) => {
+  const validationSchema = bannerCampaignValidation(campaignData);
+  const [bannerPreview, setBannerPreview] = useState<BannerPreview>({});
+  const [banner, setBanner] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubscriptionCancelled, setIsSubscriptionCancelled] = useState(false);
+
+  useEffect(() => {
+    if (campaignId && campaignData) {
+      const mobUrl = campaignData?.data?.mobile_image_url;
+      const desktopRightUrl = campaignData?.data?.desktop_image_right_url;
+
+      setBannerPreview({
+        desktopRight: desktopRightUrl,
+        mobile: mobUrl,
+      });
+
+      formik.setFieldValue('desktop_image_right', desktopRightUrl);
+      formik.setFieldValue('mobile_image', mobUrl);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [campaignId, campaignData]);
+
+  useEffect(() => {
+    if (campaignData?.data?.subscription?.status === 'canceled') {
+      setIsSubscriptionCancelled(true);
+    } else {
+      setIsSubscriptionCancelled(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [campaignData?.data?.subscription?.status]);
+
+  const onSubmit = async (values: FormikValues) => {
+    const formData = new FormData();
+    formData.append('is_active', '0');
+    formData.append('url', values?.url);
+    // Only append images if it's a File (indicating it has been changed)
+    if (values?.desktop_image_right instanceof File) {
+      formData.append('desktop_image_right', values?.desktop_image_right);
+    }
+    if (values?.mobile_image instanceof File) {
+      formData.append('mobile_image', values?.mobile_image);
+    }
+    setIsSubmitting(true);
+    try {
+      await request.post(`/campaigns/${campaignId}`, formData);
+      if (!toast.isActive('campaign-update')) {
+        toast.success('Campaign Information updated', {
+          toastId: 'campaign-update',
+        });
+      }
+      setIsSubmitting(false);
+      mutate();
+      campaignMutate();
+    } catch (error: any) {
+      if (error?.response?.data?.message) {
+        if (!toast.isActive('campaign-update-submit-error')) {
+          toast.error(error?.response?.data?.message, {
+            toastId: 'campaign-update-submit-error',
+          });
+        }
+      } else {
+        if (!toast.isActive('campaign-update')) {
+          toast.error('Something went wrong', {
+            toastId: 'campaign-update-error',
+          });
+        }
+      }
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDesktopImageRightChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    formik.setFieldTouched('desktop_image_right', true, false);
+    if (e.target.files && e.target.files[0]) {
+      const url = URL.createObjectURL(e.target.files[0]);
+      setBanner({ ...banner, desktopRight: e.target.files[0] });
+      setBannerPreview({ ...bannerPreview, desktopRight: url });
+      formik.setFieldValue('desktop_image_right', e.target.files[0]);
+    }
+  };
+
+  const handleMobileImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    formik.setFieldTouched('mobile_image', true, false);
+    if (e.target.files && e.target.files[0]) {
+      const url = URL.createObjectURL(e.target.files[0]);
+      setBanner({ ...banner, mobile: e.target.files[0] });
+      setBannerPreview({ ...bannerPreview, mobile: url });
+      formik.setFieldValue('mobile_image', e.target.files[0]);
+    }
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      url: campaignData?.data?.url || '',
+      desktop_image_right: campaignData?.data?.desktop_image_right_url || null,
+      mobile_image: campaignData?.data?.mobile_image_url || null,
+    },
+    validationSchema,
+    onSubmit,
+    validateOnChange: true,
+    validateOnBlur: true,
+    enableReinitialize: true,
+  });
+
+  return (
+    <>
+      <form>
+        <div className="rounded-xl border dark:border-black-200 soft-shadow">
+          <div className="px-5 py-5 border-b dark:border-black-200">
+            <p className="text-base text-black">Campaign Information</p>
+          </div>
+          <p className="text-sm text-gray-400 mt-2 px-6 py-4">
+            Edit the below campaign informations
+          </p>
+          <div>
+            <div className="gap-1 items-center">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4 border-b dark:border-black-200">
+                <p className="text-gray-500 text-sm flex items-center">
+                  <Avatar /> <span className="ml-2">Placement</span>
+                </p>
+                {loading ? (
+                  <div className="w-full md:w-1/5">
+                    <Skeleton className="flex w-36 h-4" />
+                  </div>
+                ) : (
+                  <p className="text-sm text-black font-bold">
+                    {campaignData?.data?.title}
+                  </p>
+                )}
+              </div>
+            </div>
+            {campaignData?.data?.start_date && (
+              <div className="gap-1 items-center">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4 border-b dark:border-black-200">
+                  <p className="text-gray-500 text-sm flex items-center">
+                    <LoginCircle /> <span className="ml-2">Start Date</span>
+                  </p>
+                  {loading ? (
+                    <div className="w-full md:w-1/5">
+                      <Skeleton className="flex w-36 h-4" />
+                    </div>
+                  ) : (
+                    <p className="text-sm text-black font-bold">
+                      {`${campaignData?.data?.start_date.slice(0, 19)} (UTC)`}
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4 border-b dark:border-black-200">
+              <p className="text-gray-500 text-sm flex items-center">
+                <EmailCircle /> <span className="ml-2">URL</span>
+              </p>
+              {loading ? (
+                <div className="col-span-2">
+                  <Skeleton className="flex h-6" />
+                </div>
+              ) : (
+                <div className="flex flex-col items-start col-span-2">
+                  <input
+                    name="url"
+                    autoComplete="off"
+                    value={formik.values.url}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    disabled={isSubscriptionCancelled}
+                    className="w-full border px-3 py-2 text-sm outline-primary rounded-md dark:bg-black-300 dark:border-black-200"
+                  />
+                  {formik?.touched?.url && formik?.errors?.url && (
+                    <small className="text-red-500 text-center my-1">
+                      {formik?.errors?.url}
+                    </small>
+                  )}
+                </div>
+              )}
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4 border-b dark:border-black-200">
+              <div className="text-gray-500 text-sm flex flex-col items-start">
+                <div className="flex items-center">
+                  <Avatar />{' '}
+                  <span className="ml-2">
+                    Desktop version - Right (320px - 100px)
+                  </span>
+                </div>
+                <p className="text-gray-500 text-xs mt-2 italic ml-4">
+                  (* Accept only .png, .jpg, .jpeg, .gif, .webp, .svg
+                  extensions)
+                </p>
+              </div>
+              {loading ? (
+                <div className="col-span-2">
+                  <Skeleton className="flex h-12" />
+                </div>
+              ) : (
+                <div className="flex flex-col items-start col-span-2">
+                  <div className="h-[70px] border dark:border-black-200 w-full relative text-black dark:bg-black-300 px-3 py-2 text-sm outline-primary rounded-md">
+                    <label className="w-full h-full flex items-center justify-center hover:cursor-pointer overflow-hidden">
+                      <input
+                        type="file"
+                        accept=".png, .jpg, .jpeg, .gif, .webp, .svg"
+                        name="desktop_image_right"
+                        hidden
+                        onBlur={formik.handleBlur}
+                        disabled={isSubscriptionCancelled}
+                        onChange={handleDesktopImageRightChange}
+                      />
+                      {bannerPreview?.desktopRight ||
+                      campaignData?.data?.desktop_image_right_url ? (
+                        <img
+                          style={{ height: 'inherit' }}
+                          src={
+                            bannerPreview?.desktopRight
+                              ? bannerPreview?.desktopRight
+                              : '/dummy.jpg'
+                          }
+                          width={320}
+                          height={100}
+                          alt="Desktop ad banner"
+                        />
+                      ) : (
+                        <span className="text-sm text-gray-400">
+                          Select Banner Image
+                        </span>
+                      )}
+                    </label>
+                  </div>
+                  {formik?.touched?.desktop_image_right &&
+                    formik?.errors?.desktop_image_right && (
+                      <small className="text-red-500 text-center my-1">
+                        {formik?.errors?.desktop_image_right}
+                      </small>
+                    )}
+                </div>
+              )}
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4 border-b dark:border-black-200">
+              <div className="text-gray-500 text-sm flex flex-col items-start">
+                <div className="flex items-center">
+                  <Avatar />{' '}
+                  <span className="ml-2">Mobile version (730px - 90px)</span>
+                </div>
+                <p className="text-gray-500 text-xs mt-2 italic ml-4">
+                  (* Accept only .png, .jpg, .jpeg, .gif, .webp, .svg
+                  extensions)
+                </p>
+              </div>
+              {loading ? (
+                <div className="col-span-2">
+                  <Skeleton className="flex h-12" />
+                </div>
+              ) : (
+                <div className="flex flex-col items-start col-span-2">
+                  <div className="h-[70px] border dark:border-black-200 w-full relative text-black dark:bg-black-300 px-3 py-2 text-sm outline-primary rounded-md">
+                    <label className="w-full h-full flex items-center justify-center hover:cursor-pointer overflow-hidden">
+                      <input
+                        type="file"
+                        accept=".png, .jpg, .jpeg, .gif, .webp, .svg"
+                        name="mobile_image"
+                        hidden
+                        onBlur={formik.handleBlur}
+                        disabled={isSubscriptionCancelled}
+                        onChange={handleMobileImageChange}
+                      />
+                      {bannerPreview?.mobile ||
+                      campaignData?.data?.mobile_image_url ? (
+                        <img
+                          style={{ height: 'inherit' }}
+                          src={
+                            bannerPreview?.mobile
+                              ? bannerPreview?.mobile
+                              : '/dummy.jpg'
+                          }
+                          width={730}
+                          height={90}
+                          alt="Mobile ad banner"
+                        />
+                      ) : (
+                        <span className="text-sm text-gray-400">
+                          Select Banner Image
+                        </span>
+                      )}
+                    </label>
+                  </div>
+                  {formik?.touched?.mobile_image &&
+                    formik?.errors?.mobile_image && (
+                      <small className="text-red-500 text-center my-1">
+                        {formik?.errors?.mobile_image}
+                      </small>
+                    )}
+                </div>
+              )}
+            </div>
+            <div className="ml-[51px] py-4 mr-6 flex flex-col items-end">
+              <button
+                disabled={isSubmitting || isSubscriptionCancelled}
+                type="button"
+                onClick={() => formik.handleSubmit()}
+                className={`text-sm text-[13px] px-10 focus:outline-none text-white text-center font-semibold py-2 rounded ${
+                  isSubmitting || isSubscriptionCancelled
+                    ? 'cursor-not-allowed bg-primary-100'
+                    : 'bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary'
+                }`}
+              >
+                Update
+              </button>
+            </div>
+          </div>
+        </div>
+      </form>
+
+      <div className="mt-6">
+        <StartForm
+          campaignId={campaignId}
+          loading={loading}
+          campaignData={campaignData}
+          mutate={mutate}
+          campaignMutate={campaignMutate}
+        />
+      </div>
+    </>
+  );
+};
+export default BannerAdForm;
diff --git a/apps/app/src/components/Campaign/Plans.tsx b/apps/app/src/components/Campaign/Plans.tsx
new file mode 100644
index 00000000..8aacf2b4
--- /dev/null
+++ b/apps/app/src/components/Campaign/Plans.tsx
@@ -0,0 +1,216 @@
+import React, { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/router';
+import { catchErrors, dollarFormat } from '@/utils/libs';
+import { currentCampaign } from '@/utils/types';
+import useAuth, { request } from '@/hooks/useAuth';
+import SwitchButton from '../SwitchButton';
+import LoadingCircular from '../common/LoadingCircular';
+import Skeleton from '../skeleton/common/Skeleton';
+
+interface CampaignDetail {
+  currentPlan?: currentCampaign;
+}
+
+const CampaignPlans = () => {
+  const [_currentPlanId, setCurrentPlanId] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState<{ [key: string]: boolean }>(
+    {},
+  );
+  const [interval, setInterval] = useState(false);
+  const [purchasedPlanId, setPurchasedPlanId] = useState<string | null>();
+  const router = useRouter();
+
+  const { data, mutate } = useAuth('/campaign/plans');
+  const { data: userData, mutate: campaignMutate } = useAuth(
+    '/campaign/subscription-info',
+    {
+      revalidateOnMount: true,
+    },
+  );
+  const currentPlans = userData?.campaignDetails?.map(
+    (detail: CampaignDetail) => detail?.currentPlan?.id,
+  );
+
+  const { status } = router.query;
+
+  const onGetStarted = async (plan: currentCampaign): Promise<void> => {
+    setCurrentPlanId(plan?.id);
+    localStorage.setItem('purchased-plan-id', plan?.id);
+    setIsSubmitting((prev) => ({ ...prev, [plan?.id]: true }));
+
+    try {
+      const res = await request.post(`advertiser/subscribe`, {
+        interval: !interval ? 'month' : 'year',
+        plan_id: plan?.id,
+      });
+      setIsSubmitting((prev) => ({ ...prev, [plan?.id]: false }));
+      if (res?.data) {
+        await router.push(res?.data && res?.data['url ']);
+      }
+      mutate();
+      campaignMutate();
+    } catch (error) {
+      //const statusCode = get(error, "response.status") || null;
+      setCurrentPlanId('');
+      const message = catchErrors(error);
+      if (message === 'You have already subscribed this plan') {
+        if (!toast.isActive('plan-subscrition-exists')) {
+          toast.error('You have already subscribed this plan', {
+            toastId: 'plan-subscrition-exists',
+          });
+        }
+      } else {
+        if (!toast.isActive('plan-subscrition-error')) {
+          toast.error('Something went wrong, please try again later', {
+            toastId: 'plan-subscrition-error',
+          });
+        }
+      }
+      setIsSubmitting((prev) => ({ ...prev, [plan?.id]: false }));
+    }
+  };
+
+  useEffect(() => {
+    const purchasedPlanId = localStorage.getItem('purchased-plan-id');
+    setPurchasedPlanId(purchasedPlanId);
+
+    if (purchasedPlanId) {
+      const timer = setTimeout(() => {
+        localStorage.removeItem('purchased-plan-id');
+      }, 10000);
+
+      return () => clearTimeout(timer);
+    }
+    return;
+  }, []);
+
+  return (
+    <div className="w-full bg-white dark:bg-black-600 rounded-xl soft-shadow h-fit py-6">
+      <h2 className="text-2xl my-2 text-center px-14 dark:text-neargray-10">
+        Choose a plan that&apos;s right for you.
+      </h2>
+      <div className="my-4 flex justify-center items-center font-thin">
+        <p
+          className={`${
+            !interval ? 'text-black dark:text-neargray-10' : 'text-gray-500'
+          } text-sm mx-2`}
+        >
+          Monthly{' '}
+        </p>
+        <span className="mx-2">
+          <SwitchButton
+            selected={interval}
+            onChange={() => setInterval(!interval)}
+          />
+        </span>
+        <p
+          className={`${
+            interval ? 'text-black dark:text-neargray-10' : 'text-gray-500'
+          } text-sm`}
+        >
+          Annually{' '}
+        </p>
+      </div>
+      <div
+        id="plans"
+        className="text-gray-600 dark:text-neargray-10 grid justify-items-center sm:px-10 2xl:px-20  grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 py-6"
+      >
+        {data?.data?.length
+          ? data?.data?.map((plan: currentCampaign, index: number) => (
+              <div
+                key={index}
+                className={`bg-white dark:bg-black-200 rounded-md  text-center w-full md:w-[280px] shadow-xl hover:shadow-2xl`}
+              >
+                <div
+                  className={`border-b border-b-gray-200 dark:border-b-gary-600 ${
+                    (status === 'success' || status === 'cancelled') &&
+                    purchasedPlanId == plan?.id
+                      ? ''
+                      : 'mt-8'
+                  }`}
+                >
+                  <div className="px-4 py-0">
+                    <h3 className="uppercase py-4 text-sm">{plan?.title}</h3>
+                    <h1 className="py-4 text-4xl">
+                      {!interval ? (
+                        <p>
+                          $
+                          {dollarFormat((plan?.price_monthly / 100).toString())}
+                          <span className="text-lg">/mo</span>
+                        </p>
+                      ) : (
+                        <p>
+                          $
+                          {dollarFormat(
+                            (plan?.price_annually / 100).toString(),
+                          )}
+                          <span className="text-lg">/yr</span>
+                        </p>
+                      )}
+                    </h1>
+                  </div>
+                </div>
+                <div className="px-4 py-4">
+                  <h3 className="py-2 text-sm">30 slots available</h3>
+                  <h3 className="py-2 text-sm">Rotate between each slot</h3>
+                  <button
+                    onClick={() => {
+                      onGetStarted(plan);
+                    }}
+                    className={`text-sm hover:bg-primary text-white font-semibold px-7 ${
+                      isSubmitting[plan?.id] ? 'py-5' : 'py-3'
+                    } ${
+                      (status === 'success' || status === 'cancelled') &&
+                      purchasedPlanId == plan?.id
+                        ? 'mt-3'
+                        : 'my-6'
+                    }  bg-green-500 dark:bg-green-250 dark:text-neargray-10 rounded w-full transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary`}
+                  >
+                    {isSubmitting[plan?.id] ? (
+                      <div className="absolute inset-0 flex items-center justify-center ">
+                        <LoadingCircular className="w-4 h-4" />
+                      </div>
+                    ) : currentPlans?.includes(plan?.id) ? (
+                      <span>Active Subscription</span>
+                    ) : (
+                      <span>Get started now</span>
+                    )}
+                  </button>
+                </div>
+              </div>
+            ))
+          : [...Array(2)].map((_, i) => (
+              <div
+                key={i}
+                className={`bg-white dark:bg-black-300 rounded-md px-4 py-4 text-center w-full md:w-[280px] shadow-xl hover:shadow-2xl`}
+              >
+                <div className="border-b border-b-gray-200 dark:border-b-black-200 py-2">
+                  <h3 className="uppercase py-4 text-sm">
+                    <Skeleton className="h-4" />
+                  </h3>
+                  <h1 className="py-4 text-4xl">
+                    <Skeleton className="h-4" />
+                  </h1>
+                </div>
+                <div className="pt-4">
+                  <h3 className="py-2 text-sm">
+                    <Skeleton className="h-4" />
+                  </h3>
+                  <h3 className="py-2 text-sm">
+                    <Skeleton className="h-4" />
+                  </h3>
+                  <div className="text-sm text-white font-semibold px-7 py-3 mt-4 rounded w-full transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md">
+                    <span>
+                      <Skeleton className="h-4" />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+      </div>
+    </div>
+  );
+};
+
+export default CampaignPlans;
diff --git a/apps/app/src/components/Campaign/PreviewAd.tsx b/apps/app/src/components/Campaign/PreviewAd.tsx
new file mode 100644
index 00000000..06c1684e
--- /dev/null
+++ b/apps/app/src/components/Campaign/PreviewAd.tsx
@@ -0,0 +1,70 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react';
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import Close from '../Icons/Close';
+import { CampaignData } from '@/utils/types';
+
+interface Props {
+  onToggleAdd: () => void;
+  isOpen: boolean;
+  campaignData: CampaignData['data'];
+}
+
+const PreviewAd = ({ onToggleAdd, isOpen, campaignData }: Props) => {
+  return (
+    <DialogOverlay
+      isOpen={isOpen}
+      onDismiss={onToggleAdd}
+      className="fixed bg-gray-600 bg-opacity-20 inset-0 z-30 flex items-center justify-center"
+    >
+      <DialogContent
+        aria-label="Preview Ad"
+        className="w-full max-w-lg mx-auto bg-white dark:bg-black-600 dark:text-neargray-10 shadow-lg rounded-lg overflow-hidden"
+      >
+        <div className="flex items-center justify-between  px-6 pt-8">
+          <h4 className="flex items-center text-sm break-all">
+            Text Ad Preview
+          </h4>
+          <button
+            className="text-gray-500 dark:text-neargray-10  fill-current"
+            onClick={onToggleAdd}
+          >
+            <Close />
+          </button>
+        </div>
+        <div className="px-6 pb-10 pt-2">
+          <div className="py-2">
+            <div className="text-white pt-3">
+              <div className="relative">
+                <div className="text-sm">
+                  <p className="text-black dark:text-neargray-10 ">
+                    <b>Sponsored: </b>{' '}
+                    <img
+                      src={campaignData?.icon}
+                      alt="Icon"
+                      className="ad-icon inline"
+                    />{' '}
+                    <b className="text-black dark:text-neargray-10 ">
+                      {campaignData?.site_name}
+                    </b>
+                    :{campaignData?.text}{' '}
+                    <a
+                      href={campaignData?.url}
+                      target="_blank"
+                      rel="nofollow"
+                      className="font-bold text-[#3B82F6]"
+                    >
+                      {campaignData?.link_name}
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </DialogOverlay>
+  );
+};
+
+export default PreviewAd;
diff --git a/apps/app/src/components/Campaign/Publisher/ConfirmModal.tsx b/apps/app/src/components/Campaign/Publisher/ConfirmModal.tsx
new file mode 100644
index 00000000..12fecb8e
--- /dev/null
+++ b/apps/app/src/components/Campaign/Publisher/ConfirmModal.tsx
@@ -0,0 +1,74 @@
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import { toast } from 'react-toastify';
+import Close from '@/components/Icons/Close';
+import { request } from '@/hooks/useAuth';
+import { currentCampaign } from '@/utils/types';
+
+type Props = {
+  setConfirmOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  currentCampaign: currentCampaign | null;
+  mutate: () => void;
+};
+
+const ConfirmModal = ({ setConfirmOpen, currentCampaign, mutate }: Props) => {
+  const onSubmit = async () => {
+    try {
+      await request.post(`publisher/campaign/${currentCampaign?.id}/approve`);
+      if (!toast.isActive('campaign-approved')) {
+        toast.success('The campaign has been approved successfully', {
+          toastId: 'campaign-approved',
+        });
+      }
+      setConfirmOpen(false);
+      mutate();
+    } catch (error: any) {
+      if (!toast.isActive('campaign-approve-error')) {
+        toast.error(error?.response?.data, {
+          toastId: 'campaign-approve-error',
+        });
+      }
+      setConfirmOpen(false);
+    }
+  };
+  return (
+    <>
+      <DialogOverlay className="fixed bg-gray-600 bg-opacity-20 inset-0 z-30 flex items-center justify-center">
+        <DialogContent className="w-full max-w-lg mx-auto bg-white dark:bg-black-600 dark:text-neargray-10 shadow-lg rounded-lg overflow-hidden px-4 md:px-0">
+          <div className="flex items-center justify-between  px-6 pt-8">
+            <h4 className="flex items-center text-sm break-all">
+              Confirm Campaign Approval
+            </h4>
+            <button
+              className="text-gray-500 dark:text-neargray-10 fill-current"
+              onClick={() => setConfirmOpen(false)}
+            >
+              <Close />
+            </button>
+          </div>
+          <div className="px-6 pb-5 pt-2">
+            <div className="py-2 pb-10">
+              <p className="text-gray-400 dark:text-neargray-10 text-sm">
+                Are you sure you want to approve this campaign?{' '}
+              </p>
+            </div>
+            <div className="flex items-center justify-end  py-4">
+              <p
+                onClick={() => setConfirmOpen(false)}
+                className="text-[13px] delay-300 duration-300 mx-1 hover:bg-gray-200 dark:hover:bg-black-200 px-4 py-2 rounded"
+              >
+                Cancel
+              </p>
+              <button
+                onClick={() => onSubmit()}
+                className={`text-sm text-[13px] px-4 focus:outline-none text-white dark:text-neargray-10 text-center font-semibold  py-2 bg-green-500 dark:bg-green-250 rounded transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary `}
+              >
+                Submit
+              </button>
+            </div>
+          </div>
+        </DialogContent>
+      </DialogOverlay>
+    </>
+  );
+};
+export default ConfirmModal;
diff --git a/apps/app/src/components/Campaign/Publisher/Listing.tsx b/apps/app/src/components/Campaign/Publisher/Listing.tsx
new file mode 100644
index 00000000..f1ed6c0f
--- /dev/null
+++ b/apps/app/src/components/Campaign/Publisher/Listing.tsx
@@ -0,0 +1,284 @@
+import { useState } from 'react';
+import Link from 'next/link';
+import ConfirmModal from './ConfirmModal';
+import useAuth from '@/hooks/useAuth';
+import Edit from '@/components/Icons/Edit';
+import Plan from '@/components/Icons/Plan';
+import CampaignPagination from '@/components/CampaignPagination';
+import { localFormat } from '@/utils/libs';
+import { currentCampaign } from '@/utils/types';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+
+const CampaignListing = () => {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [currentCampaign, setCurrentCampaign] =
+    useState<currentCampaign | null>(null);
+  const [url, setUrl] = useState(`publisher/campaigns?page=1`);
+  const { data, loading, mutate } = useAuth(url);
+
+  const formatStartDate = (startDate: string) => {
+    if (!startDate) return 'XX/XX/XXXX';
+
+    const date = new Date(startDate);
+    const timeZone = 'UTC'; // Set your desired time zone here
+    const formattedDate = date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      timeZone,
+    });
+
+    return formattedDate;
+  };
+
+  const onApprove = (item: currentCampaign) => {
+    setConfirmOpen(true);
+    setCurrentCampaign(item);
+  };
+
+  return (
+    <>
+      <div className="bg-white dark:bg-black-600 dark:text-neargray-10 border dark:border-black-200 soft-shadow rounded-lg">
+        <div className={`flex flex-col lg:flex-row pt-4 justify-between`}>
+          <div className="flex flex-col">
+            <h1 className="leading-7 px-6 text-base text-black dark:text-neargray-10">
+              Campaign
+            </h1>
+            <p className="leading-7 px-6 text-sm mb-4 text-gray-500 dark:text-neargray-10">
+              <div>
+                {' '}
+                Below are the campaigns. Click on &quot;Edit&quot; to view and
+                modify the campaign.
+              </div>
+            </p>
+          </div>
+          <CampaignPagination
+            nextPageUrl={data?.links?.next}
+            prevPageUrl={data?.links?.prev}
+            firstPageUrl={data?.links?.first}
+            currentPage={data?.meta?.current_page}
+            setUrl={setUrl}
+            mutate={mutate}
+          />
+        </div>
+        <div className="overflow-x-auto ">
+          <table className="min-w-full divide-y dark:divide-black-200 border-t dark:border-black-200 text-black dark:text-neargray-10">
+            <thead className="bg-gray-100 dark:bg-black-600">
+              <tr>
+                <th
+                  scope="col"
+                  className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                >
+                  placement
+                </th>
+                <th
+                  scope="col"
+                  className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                >
+                  plan
+                </th>
+                <th
+                  scope="col"
+                  className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                >
+                  advertiser
+                </th>
+                <th
+                  scope="col"
+                  className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider whitespace-nowrap"
+                >
+                  impressions
+                </th>
+                <th
+                  scope="col"
+                  className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                >
+                  clicks
+                </th>
+                <th
+                  scope="col"
+                  className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider whitespace-nowrap"
+                >
+                  start date
+                </th>
+                <th
+                  scope="col"
+                  className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                >
+                  status
+                </th>
+                <th
+                  scope="col"
+                  className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                >
+                  action
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-black-600 divide-y divide-gray-200">
+              {loading &&
+                [...Array(4)].map((_, i) => (
+                  <tr key={i} className="hover:bg-blue-900/5 h-[57px]">
+                    <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <Skeleton className="h-4" />
+                    </td>
+                    <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <Skeleton className="h-4" />
+                    </td>
+                    <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <Skeleton className="h-4" />
+                    </td>
+                    <td className="px-5 py-4 whitespace-nowrap text-sm">
+                      <Skeleton className="h-4" />
+                    </td>
+                    <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <Skeleton className="h-4" />
+                    </td>
+                    <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <Skeleton className="h-4" />
+                    </td>
+                    <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <Skeleton className="h-4" />
+                    </td>
+                    <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <Skeleton className="h-4" />
+                    </td>
+                  </tr>
+                ))}
+              {!loading && data?.data?.length === 0 && (
+                <tr className="h-[57px]">
+                  <td
+                    colSpan={100}
+                    className="text-gray-400 dark:text-neargray-10 text-xs"
+                  >
+                    <div className="w-full bg-white dark:bg-black-600 rounded-xl soft-shadow h-fit">
+                      <div className="text-center py-28">
+                        <div className="mb-4 flex justify-center">
+                          <span className="inline-block border border-yellow-600 border-opacity-25 bg-opacity-10 bg-yellow-300 text-yellow-500 rounded-full p-4">
+                            <Plan />
+                          </span>
+                        </div>
+                        <h3 className="h-5 font-bold text-lg text-black dark:text-neargray-10">
+                          Campaigns Empty
+                        </h3>
+                        <p className="mb-0 py-4 font-bold text-sm text-gray-500 dark:text-neargray-10">
+                          No Campaign Found
+                        </p>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              )}
+              {data?.data?.map((item: currentCampaign) => (
+                <tr className="h-[57px] hover:bg-blue-900/5" key={item?.key}>
+                  <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                    <span className="text-xs">
+                      {' '}
+                      {item?.title.charAt(0).toUpperCase() +
+                        item?.title.slice(1)}
+                    </span>
+                  </td>
+                  <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                    <span className="text-xs">
+                      {item?.subscription?.campaign_plan?.title &&
+                        item?.subscription?.campaign_plan?.title
+                          .charAt(0)
+                          .toUpperCase() +
+                          item?.subscription?.campaign_plan?.title.slice(1)}
+                    </span>
+                  </td>
+                  <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                    <span className="text-xs">{item?.user?.username}</span>
+                  </td>
+                  <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                    <span className="text-xs">
+                      {localFormat((item?.impression_count).toString())}
+                    </span>
+                  </td>
+                  <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                    <span className="text-xs">
+                      {localFormat((item?.click_count).toString())}
+                    </span>
+                  </td>
+                  <td className="px-5 py-4 whitespace-nowrap text-sm">
+                    <span className="text-xs">
+                      {formatStartDate(item?.start_date)}
+                    </span>
+                  </td>
+                  <td className="px-5 py-4 whitespace-nowrap text-sm">
+                    <span className="text-xs">
+                      {item?.is_active ? 'ACTIVE' : 'NON-ACTIVE'}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap flex gap-x-2 items-center text-xs text-gray-500 dark:text-neargray-10 align-top">
+                    <div className="flex items-center border border-green-500 dark:border-green-250 rounded-md px-2 py-1 hover:bg-primary-100 dark:hover:bg-black-200">
+                      <Link
+                        passHref
+                        className="flex items-center"
+                        href={{
+                          pathname: '/campaign/[id]',
+                          query: { id: item?.id },
+                        }}
+                      >
+                        <Edit className="text-green-500 dark:text-neargray-10" />{' '}
+                        &nbsp;
+                        <p className="ml-1 text-green-500 cursor-pointer dark:text-neargray-10">
+                          Edit
+                        </p>
+                      </Link>
+                    </div>
+                    <div className="flex items-center border border-green-500 dark:border-green-250 rounded-md px-2 py-1 hover:bg-primary-100 dark:hover:bg-black-200">
+                      <Link
+                        passHref
+                        className="flex items-center"
+                        href={{
+                          pathname: '/campaign/chart',
+                          query: { id: item?.id },
+                        }}
+                      >
+                        <p className="ml-1 text-green-500 cursor-pointer dark:text-neargray-10">
+                          Stats
+                        </p>
+                      </Link>
+                    </div>
+                    {item?.subscription?.status === 'canceled' ? (
+                      <span className="bg-red-100 text-xs text-red-500 rounded-xl px-2 py-1 max-w-[120px] inline-flex truncate">
+                        Cancelled
+                      </span>
+                    ) : (
+                      item?.title != 'Placeholder Ad' &&
+                      item?.title != 'Placeholder Text Ad' &&
+                      (item?.is_approved == 1 ? (
+                        <span className="bg-green-500 dark:bg-green-250 text-xs text-neargray-10 dark:text-neargray-10 rounded-xl px-2 py-1 max-w-[120px] inline-flex truncate">
+                          Approved
+                        </span>
+                      ) : (
+                        <div
+                          onClick={() => onApprove(item)}
+                          className="flex items-center border border-green-500 dark:border-green-250 rounded-md px-2 py-1 hover:bg-primary-100 dark:hover:bg-black-200"
+                        >
+                          <p className="ml-1 text-green-500 dark:text-neargray-10 cursor-pointer">
+                            Approve
+                          </p>
+                        </div>
+                      ))
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {confirmOpen && (
+        <ConfirmModal
+          setConfirmOpen={setConfirmOpen}
+          currentCampaign={currentCampaign}
+          mutate={mutate}
+        />
+      )}
+    </>
+  );
+};
+export default CampaignListing;
diff --git a/apps/app/src/components/Campaign/Publisher/Stats.tsx b/apps/app/src/components/Campaign/Publisher/Stats.tsx
new file mode 100644
index 00000000..b1645e76
--- /dev/null
+++ b/apps/app/src/components/Campaign/Publisher/Stats.tsx
@@ -0,0 +1,186 @@
+import React from 'react';
+import useAuth from '@/hooks/useAuth';
+import { localFormat } from '@/utils/libs';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+
+type Props = {
+  campaignId?: string | string[];
+  isTextHide?: boolean;
+};
+
+const AdImpressions = ({ campaignId, isTextHide }: Props) => {
+  const { data, loading } = useAuth('publisher/stats');
+  const { data: campaignStats, loading: campaignDataLoading } = useAuth(
+    campaignId ? `campaign/${campaignId}/stats` : '',
+  );
+
+  const { data: campaignOverAllStats, loading: campaignOverAllDataLoading } =
+    useAuth(campaignId ? `campaign/${campaignId}/overall-stats` : '');
+
+  let totalImpression = +data?.totalImpression ? +data?.totalImpression : '0';
+  let totalClicks = +data?.totalClicks ? +data?.totalClicks : '0';
+  let totalAds = +data?.totalAds ? +data?.totalAds : '0';
+
+  return (
+    <>
+      {!isTextHide ? (
+        <div className="flex-wrap md:!flex-nowrap flex">
+          <div className="w-full bg-white dark:bg-black-600 mr-4 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              {campaignId ? 'Active Subscription' : 'Total Campaigns'}
+              {!isTextHide ? (
+                <p className="text-sm">[current Month]</p>
+              ) : (
+                <p className="text-sm">[Overall]</p>
+              )}
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignDataLoading ? (
+                    campaignStats?.activeSubscription.toLocaleString('en-US', {
+                      style: 'currency',
+                      currency: 'USD',
+                    })
+                  ) : (
+                    <Skeleton className="w-10 h-8 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalAds.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-8 mt-4 mb-8" />
+            )}
+          </div>
+          <div className="w-full bg-white dark:bg-black-600 mr-4 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Total Impressions
+              {!isTextHide ? (
+                <p className="text-sm">[current Month]</p>
+              ) : (
+                <p className="text-sm">[Overall]</p>
+              )}
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignDataLoading ? (
+                    localFormat(campaignStats?.totalImpression)
+                  ) : (
+                    <Skeleton className="w-10 h-8 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalImpression.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-6 mt-4 mb-8" />
+            )}
+          </div>
+          <div className="w-full bg-white dark:bg-black-600 bordermt-2 md:mt-0 soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Total Clicks
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignDataLoading ? (
+                    localFormat(campaignStats?.totalClicks)
+                  ) : (
+                    <Skeleton className="w-10 h-8 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalClicks.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-6 mt-4 mb-8" />
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="flex-wrap md:!flex-nowrap flex">
+          <div className="w-full bg-white dark:bg-black-600 mr-4 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              {campaignId ? 'Active Subscription' : 'Total Campaigns'}
+              {!isTextHide ? (
+                <p className="text-sm">[current Month]</p>
+              ) : (
+                !campaignId && <p className="text-sm">[Overall]</p>
+              )}
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignOverAllDataLoading ? (
+                    campaignOverAllStats?.activeSubscription.toLocaleString(
+                      'en-US',
+                      {
+                        style: 'currency',
+                        currency: 'USD',
+                      },
+                    )
+                  ) : (
+                    <Skeleton className="w-10 h-8 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalAds.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-8 mt-4 mb-8" />
+            )}
+          </div>
+          <div className="w-full bg-white dark:bg-black-600 mr-4 border soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Total Impressions
+              {!isTextHide ? (
+                <p className="text-sm">[current Month]</p>
+              ) : (
+                <p className="text-sm">[Overall]</p>
+              )}
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignOverAllDataLoading ? (
+                    localFormat(campaignOverAllStats?.totalImpression)
+                  ) : (
+                    <Skeleton className="w-10 h-8 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalImpression.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-6 mt-4 mb-8" />
+            )}
+          </div>
+          <div className="w-full bg-white dark:bg-black-600 bordermt-2 md:mt-0 soft-shadow rounded-xl px-8">
+            <h1 className="text-xl mt-8 text-black dark:text-neargray-10">
+              Total Clicks
+            </h1>
+            {!loading ? (
+              <p className="mt-4 mb-8 text-3xl text-gray-500 dark:text-neargray-10">
+                {campaignId ? (
+                  !campaignOverAllDataLoading ? (
+                    localFormat(campaignOverAllStats?.totalClicks)
+                  ) : (
+                    <Skeleton className="w-10 h-8 mt-4 mb-8" />
+                  )
+                ) : (
+                  localFormat(totalClicks.toString())
+                )}
+              </p>
+            ) : (
+              <Skeleton className="w-10 h-6 mt-4 mb-8" />
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AdImpressions;
diff --git a/apps/app/src/components/Campaign/StartForm.tsx b/apps/app/src/components/Campaign/StartForm.tsx
new file mode 100644
index 00000000..e936be6c
--- /dev/null
+++ b/apps/app/src/components/Campaign/StartForm.tsx
@@ -0,0 +1,182 @@
+import React, { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/router';
+import { request } from '@/hooks/useAuth';
+import Loader from '../skeleton/common/Loader';
+import { CampaignProps } from '@/utils/types';
+
+const StartForm = ({
+  campaignId,
+  campaignData,
+  mutate,
+  loading,
+  campaignMutate,
+}: CampaignProps) => {
+  const router = useRouter();
+  const [checked, setChecked] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubscriptionCancelled, setIsSubscriptionCancelled] = useState(false);
+
+  useEffect(() => {
+    if (campaignData?.data?.subscription?.status === 'canceled') {
+      setIsSubscriptionCancelled(true);
+    } else {
+      setIsSubscriptionCancelled(false);
+    }
+  }, [campaignData?.data?.subscription?.status]);
+
+  const onSubmit = async () => {
+    try {
+      if (!campaignId) {
+        if (!toast.isActive('add-campaign-info-error')) {
+          toast.error('Please add your campaign information first', {
+            toastId: 'add-campaign-info-error',
+          });
+        }
+        setChecked((curr) => !curr);
+      } else {
+        setIsSubmitting((curr) => !curr);
+        await request.post(
+          `/campaign/${campaignId}/${
+            campaignData && campaignData?.data?.is_active == 1
+              ? 'stop'
+              : 'start'
+          }`,
+        );
+        setIsSubmitting((curr) => !curr);
+        if (!toast.isActive('campaign-submit')) {
+          toast.success('Confirmation Submitted', {
+            toastId: 'campaign-submit',
+          });
+        }
+        setChecked((curr) => !curr);
+        mutate();
+        campaignMutate();
+        router.push('/campaign');
+      }
+    } catch (error: any) {
+      if (!toast.isActive('campaign-submit-error')) {
+        toast.error(error?.response?.data, {
+          toastId: 'campaign-submit-error',
+        });
+      }
+      setIsSubmitting((curr) => !curr);
+      setChecked((curr) => !curr);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="my-4 rounded-xl soft-shadow border dark:border-black-200">
+        <div className="border-b dark:border-black-200 px-5 py-5">
+          <>
+            <Loader wrapperClassName="flex h-5 w-32" />
+          </>
+        </div>
+
+        <div className="px-6 pt-4 mt-2">
+          <Loader wrapperClassName="flex h-5 w-72" />
+        </div>
+        <div className="flex items-center justify-between px-6 py-4">
+          <div className="w-full">
+            <div className="w-full flex items-center">
+              <input type="checkbox" disabled />
+              <Loader
+                className="ml-2"
+                wrapperClassName="flex flex-grow h-4 w-64"
+              />
+            </div>
+          </div>
+          <div>
+            <Loader wrapperClassName="flex h-9 w-24" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="w-full bg-white dark:bg-black-600 rounded-xl soft-shadow h-fit my-4">
+        {/* <div className="pl-8 pb-3 border-b dark:border-black-200"> */}
+        <div className="border-b px-5 py-5 dark:border-black-200">
+          <p className="text-black dark:text-neargray-10">
+            {!campaignData || campaignData?.data?.is_active == 0
+              ? 'Start Campaign'
+              : 'Stop Campaign'}
+          </p>
+        </div>
+        <div className="border-b items-center justify-between dark:border-black-200">
+          <p className="text-sm text-black dark:text-neargray-10 mt-2 px-6 pt-4 font-semibold">
+            {!campaignData || campaignData?.data?.is_active == 0
+              ? 'Your campaign will start once approved by an administrator'
+              : 'Are you sure you want to permanently stop this campaign?'}
+          </p>
+
+          {!campaignData || campaignData?.data?.is_active == 0 ? (
+            <div className="flex items-center justify-between px-6 py-4">
+              <div className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+                <input
+                  type="checkbox"
+                  disabled={isSubscriptionCancelled}
+                  onChange={() => setChecked((curr) => !curr)}
+                  checked={checked}
+                />
+                <span className="text-sm text-gray-400 dark:text-neargray-10 ml-2">
+                  Confirm that I want to start this campaign.
+                </span>
+              </div>
+              <div>
+                <button
+                  disabled={!checked || isSubmitting || isSubscriptionCancelled}
+                  type="button"
+                  onClick={onSubmit}
+                  className={`text-sm text-[13px] px-10
+               focus:outline-none text-white dark:text-neargray-10 text-center font-semibold py-2  rounded ${
+                 !checked || isSubmitting || isSubscriptionCancelled
+                   ? 'cursor-not-allowed bg-green-500 dark:bg-green-250'
+                   : ' bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary'
+               } `}
+                >
+                  Start
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between px-6 py-4">
+              <div className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+                <input
+                  type="checkbox"
+                  onChange={() => setChecked((curr) => !curr)}
+                  checked={checked}
+                  disabled={
+                    campaignData?.data?.subscription?.status === 'canceled'
+                  }
+                />
+                <span className="text-sm text-gray-400 dark:text-neargray-10 ml-2">
+                  Confirm that I want to stop this campaign.
+                </span>
+              </div>
+              <div>
+                <button
+                  disabled={!checked || isSubmitting || isSubscriptionCancelled}
+                  type="button"
+                  onClick={onSubmit}
+                  className={`text-sm text-[13px] px-10
+               focus:outline-none text-white text-center font-semibold py-2  rounded ${
+                 !checked || isSubmitting || isSubscriptionCancelled
+                   ? 'cursor-not-allowed bg-green-500 dark:bg-green-250'
+                   : ' bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary'
+               } `}
+                >
+                  Stop
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+export default StartForm;
diff --git a/apps/app/src/components/Campaign/TextAdForm.tsx b/apps/app/src/components/Campaign/TextAdForm.tsx
new file mode 100644
index 00000000..fc9a4e67
--- /dev/null
+++ b/apps/app/src/components/Campaign/TextAdForm.tsx
@@ -0,0 +1,379 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useEffect, useState } from 'react';
+import { FormikValues, useFormik } from 'formik';
+import { toast, ToastContainer } from 'react-toastify';
+import StartForm from './StartForm';
+import PreviewAd from './PreviewAd';
+import Avatar from '../Icons/Avatar';
+import EmailCircle from '../Icons/EmailCircle';
+import { textCampaignValidation } from '@/utils/validationSchema';
+import { catchErrors } from '@/utils/libs';
+import { request } from '@/hooks/useAuth';
+import LoginCircle from '../Icons/LoginCircle';
+import { CampaignProps } from '@/utils/types';
+import Skeleton from '../skeleton/common/Skeleton';
+
+const TextAdForm = ({
+  campaignId,
+  campaignData,
+  mutate,
+  loading,
+  campaignMutate,
+}: CampaignProps) => {
+  const validationSchema = textCampaignValidation(campaignData);
+
+  const [isSubscriptionCancelled, setIsSubscriptionCancelled] = useState(false);
+  const [icon, setIcon] = useState<object>();
+  const [iconPreview, setIconPreview] = useState<{ icon?: string }>();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (campaignData?.data?.subscription?.status === 'canceled') {
+      setIsSubscriptionCancelled(true);
+    } else {
+      setIsSubscriptionCancelled(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [campaignData?.data?.subscription?.status]);
+
+  useEffect(() => {
+    if (campaignId && campaignData) {
+      const iconUrl = campaignData?.data?.icon
+        ? `${campaignData?.data?.icon}`
+        : null;
+      if (iconUrl) {
+        formik.setFieldValue('icon', iconUrl);
+        setIconPreview({
+          icon: iconUrl,
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [campaignId, campaignData]);
+
+  const onSubmit = async (values: FormikValues) => {
+    const formData = new FormData();
+    formData.append('is_active', '0');
+    try {
+      formData.append('text', values?.text);
+      formData.append('site_name', values?.site_name);
+      formData.append('link_name', values?.link_name);
+      formData.append('url', values?.url);
+      // Only append images if it's a File (indicating it has been changed)
+      if (values?.icon instanceof File) {
+        formData.append('icon', values?.icon);
+      }
+      setIsSubmitting(true);
+      await request.post(`/campaign/${campaignId}/text-ad`, formData);
+      // if (!toast.isActive('campaign-updated')) {
+      toast.success('Campaign Information updated', {
+        toastId: 'campaign-updated',
+      });
+      // }
+      mutate();
+      campaignMutate();
+      setIsSubmitting(false);
+    } catch (error) {
+      const message = catchErrors(error);
+      // if (!toast.isActive('campaign-update-error')) {
+      toast.error(message, {
+        toastId: 'campaign-update-error',
+      });
+      // }
+      setIsSubmitting(false);
+    }
+    setIsSubmitting(false);
+  };
+
+  const handleIconChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    formik.setFieldTouched('icon', true, false);
+    if (e.target.files && e.target.files[0]) {
+      const url = URL.createObjectURL(e.target.files[0]);
+      setIcon({ ...icon, icon: e.target.files[0] });
+      setIconPreview({ ...iconPreview, icon: url });
+      formik.setFieldValue('icon', e.target.files[0]);
+    }
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      url: campaignData?.data?.url || '',
+      text: campaignData?.data?.text || '',
+      site_name: campaignData?.data?.site_name || '',
+      link_name: campaignData?.data?.link_name || '',
+      icon: campaignData?.data?.icon || null,
+    },
+    onSubmit,
+    validationSchema,
+    validateOnChange: true,
+    validateOnBlur: true,
+    enableReinitialize: true,
+  });
+
+  const handlePreview = () => {
+    setOpen((open) => !open);
+  };
+
+  return (
+    <>
+      <ToastContainer />
+      <div className="rounded-xl border dark:border-black-200 soft-shadow">
+        <div className="px-5 py-5 border-b dark:border-black-200">
+          <p className="text-base text-black dark:text-neargray-10">
+            Campaign Information
+          </p>
+        </div>
+        <p className="text-sm text-gray-400 dark:text-neargray-10 mt-2 px-6 py-4">
+          Edit the below campaign informations
+        </p>
+        <div>
+          <div className="gap-1 items-center">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+              <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+                <Avatar /> <span className="ml-2">Placement</span>
+              </p>
+              {loading ? (
+                <div className="w-full  md:w-1/5">
+                  <Skeleton className="flex w-36 h-4" />
+                </div>
+              ) : (
+                <p className="text-sm text-black dark:text-neargray-10 font-bold">
+                  {campaignData?.data?.title}
+                </p>
+              )}
+            </div>
+          </div>
+          {campaignData?.data?.start_date && (
+            <div className="gap-1 items-center">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+                <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+                  <LoginCircle /> <span className="ml-2">Start Date</span>
+                </p>
+                {loading ? (
+                  <div className="w-full  md:w-1/5">
+                    <Skeleton className="flex w-36 h-4" />
+                  </div>
+                ) : (
+                  <p className="text-sm text-black dark:text-neargray-10 font-bold">
+                    {`${campaignData?.data?.start_date.slice(0, 19)} (UTC)`}
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+            <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+              <EmailCircle /> <span className="ml-2">URL</span>
+            </p>
+            {loading ? (
+              <div className="col-span-2">
+                <Skeleton className="flex h-6" />
+              </div>
+            ) : (
+              <div className="flex flex-col items-start col-span-2">
+                <input
+                  name="url"
+                  autoComplete="off"
+                  value={formik.values.url}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  disabled={isSubscriptionCancelled}
+                  className="w-full border px-3 py-2 dark:text-neargray-10 text-sm outline-primary rounded-md dark:bg-black-200  dark:border-neargray-100"
+                />
+
+                {formik?.touched?.url && formik?.errors?.url && (
+                  <small className="text-red-500 text-center my-1">
+                    {formik?.errors?.url}
+                  </small>
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+            <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+              <Avatar /> <span className="ml-2">Enter Site Name</span>
+            </p>
+            {loading ? (
+              <div className="col-span-2">
+                <Skeleton className="flex h-6" />
+              </div>
+            ) : (
+              <div className="flex flex-col items-start col-span-2">
+                <input
+                  id="site_name"
+                  name="site_name"
+                  disabled={isSubscriptionCancelled}
+                  type="text"
+                  className="text-black dark:text-neargray-10 border dark:bg-black-200 dark:border-neargray-100 px-3 py-2 text-sm outline-primary rounded-md w-full mt-2"
+                  value={formik?.values?.site_name}
+                  onBlur={formik.handleBlur}
+                  onChange={formik.handleChange}
+                />
+                {formik?.touched?.site_name && formik?.errors?.site_name && (
+                  <small className="text-red-500 text-center  my-1">
+                    {formik?.errors?.site_name}
+                  </small>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+            <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+              <Avatar /> <span className="ml-2">Enter Link Text</span>
+            </p>
+            {loading ? (
+              <div className="col-span-2">
+                <Skeleton className="flex h-6" />
+              </div>
+            ) : (
+              <div className="flex flex-col items-start col-span-2">
+                <input
+                  id="link_name"
+                  name="link_name"
+                  type="text"
+                  disabled={isSubscriptionCancelled}
+                  className="text-black  dark:text-neargray-10 border dark:bg-black-200 dark:border-neargray-100 px-3 py-2 text-sm outline-primary rounded-md w-full mt-2"
+                  value={formik.values?.link_name}
+                  onBlur={formik.handleBlur}
+                  onChange={formik.handleChange}
+                />
+                {formik?.touched?.link_name && formik?.errors?.link_name && (
+                  <small className="text-red-500 text-center  my-1">
+                    {formik?.errors?.link_name}
+                  </small>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+            <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+              <Avatar /> <span className="ml-2">Enter Display Text</span>
+            </p>
+            {loading ? (
+              <div className="col-span-2">
+                <Skeleton className="flex h-12" />
+              </div>
+            ) : (
+              <div className="flex flex-col items-start col-span-2">
+                <textarea
+                  id="text"
+                  name="text"
+                  autoComplete="off"
+                  disabled={isSubscriptionCancelled}
+                  className="text-black dark:text-neargray-10 border dark:bg-black-200 dark:border-neargray-100 px-3 py-2 text-sm outline-primary rounded-md w-full mt-2"
+                  rows={3}
+                  value={formik?.values?.text}
+                  onBlur={formik.handleBlur}
+                  onChange={formik.handleChange}
+                />
+                {formik?.touched?.text && formik?.errors?.text && (
+                  <small className="text-red-500 text-center  my-1">
+                    {formik?.errors?.text}
+                  </small>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+            <div className="text-gray-500 dark:text-neargray-10 text-sm flex flex-col items-start">
+              <div className="flex items-center">
+                <Avatar />{' '}
+                <span className="ml-2">Upload Icon (20px - 20px)</span>
+              </div>
+              <p className="text-gray-500 text-xs mt-2 italic ml-4">
+                (* Accept only .png, .jpg, .jpeg, .gif, .webp, .svg extensions)
+              </p>
+            </div>
+            {loading ? (
+              <div className="col-span-2">
+                <Skeleton className="flex h-12" />
+              </div>
+            ) : (
+              <div className="flex flex-col items-start col-span-2">
+                <div className="h-[70px] border w-full relative text-black dark:text-neargray-10 dark:bg-black-200 dark:border-neargray-100 px-3 py-2 text-sm outline-primary rounded-md">
+                  <label className="w-full h-full flex items-center justify-center  hover:cursor-pointer overflow-hidden">
+                    <input
+                      type="file"
+                      accept=".png, .jpg, .jpeg, .gif, .webp, .svg"
+                      name="icon"
+                      required
+                      disabled={isSubscriptionCancelled}
+                      hidden
+                      onChange={handleIconChange}
+                    />
+                    {iconPreview?.icon || campaignData?.data?.icon ? (
+                      <img
+                        className="border dark:border-black-200"
+                        src={
+                          iconPreview?.icon ? iconPreview?.icon : '/dummy.jpg'
+                        }
+                        width={40}
+                        height={40}
+                        alt="Icon"
+                      />
+                    ) : (
+                      <span className="text-sm text-gray-400 dark:text-neargray-10">
+                        Select Icon
+                      </span>
+                    )}
+                  </label>
+                </div>
+                {formik?.touched?.icon && formik?.errors?.icon && (
+                  <small className="text-red-500 text-center my-1">
+                    {formik?.errors?.icon}
+                  </small>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="ml-[51px] mr-6 py-4 flex flex-row justify-end">
+            {campaignData &&
+              campaignData?.data?.text &&
+              campaignData?.data?.site_name &&
+              campaignData?.data?.link_name &&
+              campaignData?.data?.icon && (
+                <button
+                  type="button"
+                  onClick={handlePreview}
+                  className="mx-2 text-sm bg-green-500 dark:bg-green-250 text-[13px] px-10  focus:outline-none text-white text-center font-semibold py-2 rounded  hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary"
+                >
+                  Preview
+                </button>
+              )}
+
+            <button
+              disabled={isSubmitting || isSubscriptionCancelled}
+              type="button"
+              onClick={() => formik.handleSubmit()}
+              className={`text-sm text-[13px] px-10
+               focus:outline-none text-white text-center font-semibold py-2 rounded ${
+                 isSubmitting || isSubscriptionCancelled
+                   ? 'cursor-not-allowed bg-primary-100'
+                   : ' bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary'
+               } `}
+            >
+              Update
+            </button>
+          </div>
+        </div>
+      </div>
+      <PreviewAd
+        isOpen={isOpen}
+        onToggleAdd={handlePreview}
+        campaignData={campaignData?.data}
+      />
+      <div className="mt-6">
+        <StartForm
+          campaignId={campaignId}
+          loading={loading}
+          campaignData={campaignData}
+          mutate={mutate}
+          campaignMutate={campaignMutate}
+        />
+      </div>
+    </>
+  );
+};
+export default TextAdForm;
diff --git a/apps/app/src/components/CampaignPagination.tsx b/apps/app/src/components/CampaignPagination.tsx
new file mode 100644
index 00000000..75f418c1
--- /dev/null
+++ b/apps/app/src/components/CampaignPagination.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import FaChevronRight from './Icons/FaChevronRight';
+import FaChevronLeft from './Icons/FaChevronLeft';
+
+type Props = {
+  nextPageUrl: string;
+  prevPageUrl: string;
+  firstPageUrl: string;
+  currentPage?: number;
+  setUrl: (url: string) => void;
+  mutate: () => void;
+};
+
+const CampaignPagination = ({
+  nextPageUrl,
+  prevPageUrl,
+  firstPageUrl,
+  currentPage,
+  setUrl,
+  mutate,
+}: Props) => {
+  const handleNextPage = () => {
+    setUrl(nextPageUrl);
+    mutate();
+  };
+  const handlePreviousPage = () => {
+    setUrl(prevPageUrl);
+    mutate();
+  };
+  const onFirst = () => {
+    setUrl(firstPageUrl);
+    mutate();
+  };
+  return (
+    <>
+      <div
+        className={`bg-white dark:bg-black-600 dark:text-neargray-10 flex items-center lg:justify-between justify-end`}
+      >
+        <div className="sm:flex-1 sm:flex sm:items-center sm:justify-between">
+          <div></div>
+          <div
+            className={`flex justify-end ${
+              !'isTopPagination' ? 'mt-2 lg:mt-0' : 'm-2'
+            }`}
+          >
+            <button
+              type="button"
+              disabled={currentPage === 1}
+              onClick={onFirst}
+              className={`relative inline-flex items-center px-2 ml-1 md:px-3 text-xs py-2 font-medium ${
+                currentPage === 1
+                  ? 'text-gray-500'
+                  : 'text-primary hover:text-white hover:bg-primary'
+              } rounded-md  bg-gray-100 dark:bg-black-200`}
+            >
+              First
+            </button>
+            <button
+              type="button"
+              disabled={!prevPageUrl}
+              onClick={handlePreviousPage}
+              className={`relative inline-flex items-center px-2 ml-1 md:px-3 py-2 font-medium ${
+                !prevPageUrl
+                  ? 'text-gray-500 '
+                  : 'text-primary hover:text-white hover:bg-primary'
+              } rounded-md  bg-gray-100 dark:bg-black-200`}
+            >
+              <FaChevronLeft className="inline-flex text-xs" />
+            </button>
+            <button
+              type="button"
+              disabled
+              className="relative inline-flex items-center px-2 ml-1 md:px-3 py-2 text-xs font-medium text-gray-500 dark:text-neargray-10 rounded-md  bg-gray-100 dark:bg-black-200"
+            >
+              Page {currentPage}
+            </button>
+            <button
+              type="button"
+              disabled={!nextPageUrl}
+              onClick={handleNextPage}
+              className={`relative inline-flex items-center ml-1 px-2 md:px-3 py-2 rounded-md font-medium ${
+                nextPageUrl
+                  ? 'text-primary hover:text-white hover:bg-primary'
+                  : 'text-gray-500'
+              }  bg-gray-100 dark:bg-black-200`}
+            >
+              <FaChevronRight className="inline-flex text-xs" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CampaignPagination;
diff --git a/apps/app/src/components/Chart.tsx b/apps/app/src/components/Chart.tsx
new file mode 100644
index 00000000..0c73f0b2
--- /dev/null
+++ b/apps/app/src/components/Chart.tsx
@@ -0,0 +1,244 @@
+import React, { useEffect, useState } from 'react';
+import Highcharts from 'highcharts/highstock';
+import HighchartsReact from 'highcharts-react-official';
+import HighchartsExporting from 'highcharts/modules/exporting';
+import { useTheme } from 'next-themes';
+
+import Plan from './Icons/Plan';
+import useAuth from '@/hooks/useAuth';
+import CircularLoader from './skeleton/common/CircularLoader';
+
+const Chart = ({ campaignId }: { campaignId?: string | string[] }) => {
+  const [options, setOptions] = useState<any | null>(null);
+  const [loading, setLoading] = useState(true);
+  const { theme } = useTheme();
+
+  const { data: chartData, loading: loadingChart } = useAuth(
+    campaignId ? `campaign/${campaignId}/chart` : '',
+  );
+
+  useEffect(() => {
+    const isDarkTheme = theme === 'dark';
+
+    if (!chartData) return;
+
+    const impressionsData = chartData.map((item: any) => [
+      item[0],
+      item.total_impressions,
+    ]);
+
+    const clicksData = chartData.map((item: any) => [
+      item[0],
+      item.total_clicks,
+    ]);
+
+    const chartOptions = {
+      chart: {
+        backgroundColor: isDarkTheme ? '#0D0D0D' : '#fff',
+        height: 500,
+        zoomType: 'x',
+      },
+      title: {
+        text: 'Impressions and Clicks Over Time',
+        style: {
+          color: isDarkTheme ? '#FFFFFF' : '#000000',
+        },
+      },
+      xAxis: {
+        type: 'datetime',
+        labels: {
+          style: {
+            color: isDarkTheme ? '#CCCCCC' : '#666666',
+          },
+        },
+        lineColor: isDarkTheme ? '#666666' : '#CCCCCC',
+        tickColor: isDarkTheme ? '#666666' : '#CCCCCC',
+        gridLineColor: isDarkTheme ? '#444444' : '#E6E6E6',
+      },
+      yAxis: {
+        title: {
+          text: 'Count',
+        },
+        labels: {
+          style: {
+            color: isDarkTheme ? '#CCCCCC' : '#666666',
+          },
+        },
+        gridLineColor: isDarkTheme ? '#444444' : '#E6E6E6',
+      },
+      plotOptions: {
+        area: {
+          marker: {
+            enabled: false,
+          },
+          lineWidth: 1,
+          states: {
+            hover: {
+              lineWidth: 1,
+            },
+          },
+          threshold: null,
+          turboThreshold: 3650,
+        },
+      },
+      series: [
+        {
+          type: 'area',
+          name: 'Total impressions',
+          data: impressionsData,
+          color: isDarkTheme
+            ? 'rgba(30, 130, 133, 0.8)'
+            : 'rgba(3, 63, 64, 0.8)',
+          fillColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+            stops: [
+              [
+                0,
+                isDarkTheme
+                  ? 'rgba(30, 130, 133, 0.8)'
+                  : 'rgba(3, 63, 64, 0.8)',
+              ],
+              [1, isDarkTheme ? 'rgba(3, 63, 64, 0.20)' : 'rgba(3, 63, 64, 0)'],
+            ],
+          },
+        },
+        {
+          type: 'area',
+          name: 'Total clicks',
+          data: clicksData,
+          color: isDarkTheme
+            ? 'rgba(139, 33, 137, 0.8)'
+            : 'rgba(64, 3, 63, 0.8)',
+          fillColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+            stops: [
+              [
+                0,
+                isDarkTheme
+                  ? 'rgba(139, 33, 137, 0.8)'
+                  : 'rgba(64, 3, 63, 0.8)',
+              ],
+              [1, isDarkTheme ? 'rgba(64, 3, 63, 0)' : 'rgba(64, 3, 63, 0)'],
+            ],
+          },
+        },
+      ],
+      credits: {
+        enabled: false,
+      },
+      tooltip: {
+        shared: true,
+      },
+      rangeSelector: {
+        allButtonsEnabled: true,
+        selected: 0,
+        buttonTheme: {
+          width: 60,
+        },
+      },
+      exporting: {
+        menuItemDefinitions: {
+          embed: {
+            onclick: open,
+            text: 'Embed chart',
+          },
+        },
+
+        buttons: {
+          contextButton: {
+            menuItems: [
+              'viewFullscreen',
+              'printChart',
+              'separator',
+              'downloadPNG',
+              'downloadJPEG',
+              'downloadPDF',
+              'downloadSVG',
+              'separator',
+              'embed',
+            ],
+            theme: {
+              fill: isDarkTheme ? '#444444' : '#FFFFFF', // Button background
+              style: {
+                color: isDarkTheme ? '#FFFFFF' : '#000000', // Text color
+              },
+              states: {
+                hover: {
+                  fill: isDarkTheme ? '#555555' : '#E6E6E6', // Hover background
+                  style: {
+                    color: isDarkTheme ? '#FFFFFF' : '#000000', // Hover text color
+                  },
+                },
+                select: {
+                  fill: isDarkTheme ? '#333333' : '#E6E6E6', // Select background
+                  style: {
+                    color: isDarkTheme ? '#FFFFFF' : '#000000', // Select text color
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+    const wrapper = document.getElementById('chart-wrapper');
+
+    if (wrapper) {
+      chartOptions.chart.height = wrapper.offsetWidth;
+      chartOptions.chart.height = wrapper.offsetHeight;
+    }
+    setOptions(chartOptions);
+    setLoading(false);
+  }, [chartData, theme]);
+
+  if (loading) {
+    return (
+      <div className="h-1/2 flex items-center justify-center py-48">
+        <CircularLoader />
+      </div>
+    );
+  }
+
+  if (typeof Highcharts === 'object') {
+    HighchartsExporting(Highcharts);
+  }
+
+  return (
+    <>
+      {loadingChart ? (
+        <div className="h-1/2 flex items-center justify-center py-48">
+          <CircularLoader />
+        </div>
+      ) : chartData?.length > 0 ? (
+        <div className="pl-2 pr-4 py-6 dark:bg-black-200">
+          <div>
+            <HighchartsReact
+              highcharts={Highcharts}
+              options={options}
+              constructorType={'stockChart'}
+              className="highcharts-dark"
+            />
+          </div>
+        </div>
+      ) : (
+        <div className="w-full bg-white dark:bg-black-600 rounded-xl soft-shadow h-fit">
+          <div className="text-center py-28">
+            <div className="mb-4 flex justify-center">
+              <span className="inline-block border border-yellow-600 border-opacity-25 bg-opacity-10 bg-yellow-300 text-yellow-500 rounded-full p-4">
+                <Plan />
+              </span>
+            </div>
+            <h3 className="h-5 font-bold text-lg text-black dark:text-neargray-10">
+              Campaign Performance
+            </h3>
+            <p className="mb-0 py-4 font-bold text-sm text-gray-500 dark:text-neargray-50">
+              No data available for impressions and clicks
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Chart;
diff --git a/apps/app/src/components/Dashboard/Addkeys.tsx b/apps/app/src/components/Dashboard/Addkeys.tsx
new file mode 100644
index 00000000..2798f3cf
--- /dev/null
+++ b/apps/app/src/components/Dashboard/Addkeys.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import * as Yup from 'yup';
+import get from 'lodash/get';
+import { FormikValues, useFormik } from 'formik';
+import { toast } from 'react-toastify';
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+
+import Close from '../Icons/Close';
+import useAuth, { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+
+const validationSchema = Yup.object().shape({
+  name: Yup.string().required('Please enter name'),
+});
+
+interface Props {
+  onToggleAdd: () => void;
+  isOpen: boolean;
+  selected: string | undefined;
+  mutate: () => void;
+}
+
+const AddKeys = ({ onToggleAdd, isOpen, selected, mutate }: Props) => {
+  const { data: keyData } = useAuth(selected ? `/keys/${selected}` : '');
+  const key = get(keyData, 'key') || null;
+  const onSubmit = async (values: FormikValues) => {
+    try {
+      if (selected) {
+        values.id = key?.id;
+        await request.post(`/keys/${selected}`, values);
+        if (!toast.isActive('key-updated')) {
+          toast.success('Key Updated', {
+            toastId: 'key-updated',
+          });
+        }
+      } else {
+        await request.post('/keys', values);
+        if (!toast.isActive('key-added')) {
+          toast.success('Key Added', {
+            toastId: 'key-added',
+          });
+        }
+      }
+      onToggleAdd();
+      mutate();
+      formik.resetForm();
+    } catch (error) {
+      const message = catchErrors(error);
+      if (!toast.isActive('key-added-error')) {
+        toast.error(message, {
+          toastId: 'key-added-error',
+        });
+      }
+    }
+  };
+
+  const initialValues = selected
+    ? { name: key?.name ? String(key.name) : '' }
+    : { name: '' };
+
+  const formik = useFormik({
+    initialValues: initialValues,
+    onSubmit,
+    validationSchema,
+    enableReinitialize: true,
+  });
+
+  return (
+    <DialogOverlay
+      isOpen={isOpen}
+      onDismiss={onToggleAdd}
+      className="fixed bg-gray-600 dark:text-neargray-10 bg-opacity-20 inset-0 z-30 flex items-center justify-center"
+    >
+      <DialogContent
+        aria-label="Qr Code"
+        className="w-full max-w-lg mx-auto bg-white dark:bg-black-600 shadow-lg rounded-lg overflow-hidden"
+      >
+        <div className="flex items-center justify-between  px-6 pt-8">
+          <h4 className="flex items-center text-sm break-all">
+            {selected ? 'Edit API Key' : 'Add API Key'}
+          </h4>
+          <button
+            className="text-gray-500 dark:text-neargray-10 fill-current"
+            onClick={onToggleAdd}
+          >
+            <Close />
+          </button>
+        </div>
+        <div className="px-6 pb-5 pt-2">
+          {selected && (
+            <div className="py-2">
+              <p className="text-sm text-gray-500 dark:text-neargray-10 py-2">
+                Key
+              </p>
+              <input
+                name="key"
+                autoComplete="off"
+                value={key?.token}
+                disabled
+                className="w-full border dark:border-black-200 rounded text-xs outline-primary py-2 px-2"
+              />
+            </div>
+          )}
+          <div className="py-2">
+            <p className="text-sm text-gray-500 dark:text-neargray-10 py-2">
+              App name
+            </p>
+            <input
+              name="name"
+              autoComplete="off"
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              className="w-full border dark:border-black-200 dark:bg-black-300 rounded text-xs outline-primary py-2 px-2"
+            />
+            {formik.touched.name && formik.errors.name ? (
+              <div className="text-red-500 text-xs mt-1">
+                {formik.errors.name}
+              </div>
+            ) : null}
+          </div>
+          <div className="flex items-center justify-end  py-4">
+            <button
+              className="text-[13px] delay-300 duration-300 mx-1 hover:bg-gray-200 dark:hover:bg-black-200 px-3 py-3 rounded"
+              onClick={onToggleAdd}
+            >
+              Cancel
+            </button>
+            <button
+              disabled={formik.isSubmitting}
+              type="button"
+              onClick={() => formik.handleSubmit()}
+              className={`text-sm text-[13px] px-3 focus:outline-none  text-white text-center font-semibold py-3 bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary rounded ${
+                formik.isSubmitting &&
+                'cursor-not-allowed bg-green-500 dark:bg-green-250'
+              } `}
+            >
+              Add key
+            </button>
+          </div>
+        </div>
+      </DialogContent>
+    </DialogOverlay>
+  );
+};
+
+export default AddKeys;
diff --git a/apps/app/src/components/Dashboard/DeleteAccount.tsx b/apps/app/src/components/Dashboard/DeleteAccount.tsx
new file mode 100644
index 00000000..43e23579
--- /dev/null
+++ b/apps/app/src/components/Dashboard/DeleteAccount.tsx
@@ -0,0 +1,161 @@
+import * as Yup from 'yup';
+import { FormikValues, useFormik } from 'formik';
+import { toast } from 'react-toastify';
+import React, { useState } from 'react';
+import { useRouter } from 'next/router';
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import Cookies from 'js-cookie';
+/* import { useDisconnect } from "wagmi"; */
+import { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+import useStorage from '@/hooks/useStorage';
+import Close from '../Icons/Close';
+
+const validationSchema = Yup.object().shape({
+  password: Yup.string()
+    .min(8, 'Password must be an 8 character')
+    .required('Please enter  password'),
+});
+
+const Delete = () => {
+  const router = useRouter();
+  /*   const { disconnect } = useDisconnect(); */
+  const [confirm, setConfirm] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+
+  const [, setToken] = useStorage('token');
+  const [, setRole] = useStorage('role');
+  const [, setUser] = useStorage('user');
+
+  const onDelete = () => {
+    setIsDeleteOpen((open) => !open);
+    formik.resetForm();
+  };
+
+  const onSubmit = async (values: FormikValues) => {
+    try {
+      await request.post(`/profile/delete`, values);
+      setToken('');
+      setRole('');
+      setUser('');
+      /*  disconnect(); */
+      Cookies.set('token', '');
+      router.push('/login');
+    } catch (error) {
+      const message = catchErrors(error);
+      if (!toast.isActive('delete-user-error')) {
+        toast.error(message, {
+          toastId: 'delete-user-error',
+        });
+      }
+    }
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      password: '',
+    },
+    onSubmit,
+    validationSchema,
+  });
+  return (
+    <>
+      <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit my-4">
+        <div className="border-b px-5 py-5 dark:border-black-200">
+          <p className="text-black dark:text-neargray-10 ">Delete Account</p>
+        </div>
+        <div className="border-b items-center justify-between dark:border-black-200">
+          <p className="text-sm text-black dark:text-neargray-10  mt-2 px-6 pt-4 font-semibold">
+            Are you sure you want to permanently delete your user account?
+            Recovery is not possible upon delete confirmation
+          </p>
+          <div className="sm:flex block px-6 py-4  border-b dark:border-black-200 items-center justify-between">
+            <div className="flex items-center m-2">
+              <input type="checkbox" onChange={() => setConfirm((o) => !o)} />
+              <span className="text-sm text-gray-400 dark:text-neargray-10  ml-2">
+                Confirm that I want to delete my account.
+              </span>
+            </div>
+            <button
+              onClick={onDelete}
+              className={`text-[13px] text-white font-semibold px-6 py-2 ml-2 ${
+                confirm
+                  ? 'bg-red-700 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-red-800/40'
+                  : 'bg-red-800/40'
+              } rounded`}
+            >
+              Delete Account
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <DialogOverlay
+        isOpen={isDeleteOpen}
+        onDismiss={onDelete}
+        className="fixed bg-gray-600 dark:text-neargray-10  bg-opacity-20 inset-0  pt-10 z-30 flex items-start justify-center"
+      >
+        <DialogContent
+          aria-label="Delete Confirmation"
+          className="w-full max-w-lg mx-auto bg-white shadow-lg rounded-lg overflow-hidden"
+        >
+          <div className="flex items-center justify-between  px-6 pt-8">
+            <h4 className="flex items-center text-sm break-all">
+              Confirmation required
+            </h4>
+            <button
+              className="text-gray-500 dark:text-neargray-10  fill-current"
+              onClick={onDelete}
+            >
+              <Close />
+            </button>
+          </div>
+          <div className="px-6 pb-5 pt-2">
+            <div className="py-2 pb-10">
+              <div className="grid grid-cols-3 gap-1  px-6 py-4  border-b dark:border-black-200">
+                <p className="text-gray-500 dark:text-neargray-10 text-sm flex mt-2">
+                  Password
+                </p>
+                <div className="flex flex-col items-start">
+                  <input
+                    type="password"
+                    name="password"
+                    value={formik.values.password}
+                    onChange={formik.handleChange}
+                    className="border dark:border-black-200 outline-primary px-3 py-2 rounded text-sm dark:bg-black-300"
+                  />
+                  {formik.touched.password && formik.errors.password && (
+                    <small className="text-red-500 text-center  my-1">
+                      {formik.errors.password}
+                    </small>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end  py-4">
+              <button
+                onClick={onDelete}
+                className="text-[13px] delay-300 duration-300 mx-1 hover:bg-gray-200 dark:hover:bg-black-200 px-3 py-3 rounded"
+              >
+                Cancel
+              </button>
+              <button
+                disabled={formik.isSubmitting}
+                type="button"
+                onClick={() => formik.handleSubmit()}
+                className={`text-sm text-[13px] px-3 focus:outline-none  text-white  text-center font-semibold  py-3 bg-red-700 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-red-800/40 rounded ${
+                  formik.isSubmitting && 'cursor-not-allowed bg-primary-100'
+                } `}
+              >
+                Confirm Delete
+              </button>
+            </div>
+          </div>
+        </DialogContent>
+      </DialogOverlay>
+    </>
+  );
+};
+
+export default Delete;
diff --git a/apps/app/src/components/Dashboard/DeleteKey.tsx b/apps/app/src/components/Dashboard/DeleteKey.tsx
new file mode 100644
index 00000000..37e585da
--- /dev/null
+++ b/apps/app/src/components/Dashboard/DeleteKey.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { toast } from 'react-toastify';
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+import Close from '../Icons/Close';
+
+interface ApiKey {
+  id: string;
+  name: string;
+  token: string;
+  created_at: string;
+  usage: string;
+}
+
+interface Props {
+  mutate: () => void;
+  onToggleDelete: () => void;
+  isDeleteOpen: boolean;
+  selected?: ApiKey | undefined;
+}
+
+const DeleteKey = ({
+  mutate,
+  onToggleDelete,
+  isDeleteOpen,
+  selected,
+}: Props) => {
+  const onDelete = async () => {
+    try {
+      await request.post(`/keys/${selected?.id}/delete`);
+      if (!toast.isActive('delete-key')) {
+        toast.success('Key Deleted', {
+          toastId: 'delete-key',
+        });
+      }
+      onToggleDelete();
+      mutate();
+    } catch (error) {
+      const message = catchErrors(error);
+      if (!toast.isActive('delete-key-error')) {
+        toast.error(message, {
+          toastId: 'delete-key-error',
+        });
+      }
+    }
+  };
+
+  return (
+    <DialogOverlay
+      isOpen={isDeleteOpen}
+      onDismiss={onToggleDelete}
+      className="fixed bg-gray-600 bg-opacity-20 inset-0 z-30 flex items-center justify-center"
+    >
+      <DialogContent
+        aria-label="Qr Code"
+        className="w-full max-w-lg mx-auto bg-white dark:bg-black-600 dark:text-neargray-10 shadow-lg rounded-lg overflow-hidden"
+      >
+        <div className="flex items-center justify-between  px-6 pt-8">
+          <h4 className="flex items-center text-sm break-all">
+            Confirmation required
+          </h4>
+          <button
+            className="text-gray-500 dark:text-neargray-10 fill-current"
+            onClick={onToggleDelete}
+          >
+            <Close />
+          </button>
+        </div>
+        <div className="px-6 pb-5 pt-2">
+          <div className="py-2 pb-10">
+            <p className="text-gray-400  dark:text-neargray-10 text-sm">
+              Are you sure you wish to remove the APIKey {selected?.token} ?
+            </p>
+          </div>
+
+          <div className="flex items-center justify-end  py-4">
+            <p
+              onClick={onToggleDelete}
+              className="text-[13px] delay-300 duration-300 mx-1 hover:bg-gray-200 px-3 py-2 rounded cursor-pointer"
+            >
+              Cancel
+            </p>
+            <button
+              onClick={onDelete}
+              className="text-[13px] text-white font-semibold px-3 py-2 bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary rounded-md"
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      </DialogContent>
+    </DialogOverlay>
+  );
+};
+
+export default DeleteKey;
diff --git a/apps/app/src/components/Dashboard/Pagination.tsx b/apps/app/src/components/Dashboard/Pagination.tsx
new file mode 100644
index 00000000..8eb51035
--- /dev/null
+++ b/apps/app/src/components/Dashboard/Pagination.tsx
@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from 'react';
+import FaChevronLeft from '../Icons/FaChevronLeft';
+import FaChevronRight from '../Icons/FaChevronRight';
+
+interface QueueItem {
+  id: string;
+  value: string;
+}
+
+type PaginationQueue = {
+  enqueue: (item: QueueItem) => void;
+  dequeue: () => QueueItem | undefined;
+  size: () => number;
+};
+
+export function paginationQueue(
+  queue: QueueItem[],
+  setQueue: React.Dispatch<React.SetStateAction<QueueItem[]>>,
+): PaginationQueue {
+  const enqueue = (item: QueueItem) => {
+    setQueue((prevQueue) => [...prevQueue, item]);
+  };
+
+  const dequeue = () => {
+    if (queue.length === 0) {
+      return undefined;
+    }
+    const lastItem = queue[queue.length - 2];
+    setQueue(queue.slice(0, -1));
+    return lastItem;
+  };
+
+  const size = () => queue.length;
+
+  return { enqueue, dequeue, size };
+}
+
+interface PaginationProps {
+  isTopPagination: boolean;
+  apiUrl: string;
+  setUrl: (url: string) => void;
+  enqueue: (params: string | any) => void;
+  dequeue: () => QueueItem | undefined;
+  size?: number;
+  nextPageParams?: {};
+  setPreviousPageParam: (params: QueueItem[]) => void;
+  mutate: () => void;
+}
+
+const Pagination = ({
+  isTopPagination,
+  apiUrl,
+  setUrl,
+  enqueue,
+  dequeue,
+  size,
+  nextPageParams,
+  setPreviousPageParam,
+  mutate,
+}: PaginationProps) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [disabled, setDisabled] = useState(false);
+
+  useEffect(() => {
+    const queueSize = size ?? 0;
+    setCurrentPage(queueSize + 1);
+    setDisabled(queueSize + 1 < 2 ? true : false);
+  }, [size]);
+
+  function constructURL(params: any) {
+    let url = apiUrl;
+    if (params) {
+      const queryParams = Object.fromEntries(
+        Object.entries(params)
+          .filter(([_, value]) => value !== undefined)
+          .map(([key, value]) => [key, String(value)]),
+      );
+
+      const queryString = new URLSearchParams(queryParams).toString();
+      url = `${apiUrl}${queryString}`;
+    }
+
+    return url;
+  }
+
+  const handleNextPage = () => {
+    setUrl(constructURL(nextPageParams));
+    enqueue(nextPageParams);
+  };
+
+  const handlePreviousPage = () => {
+    const previousPage = dequeue();
+    setUrl(constructURL(previousPage));
+    mutate;
+  };
+  const onFirst = () => {
+    setPreviousPageParam([]);
+    setUrl(apiUrl);
+  };
+
+  return (
+    <>
+      <div
+        className={`bg-white dark:bg-black-600 flex items-center lg:justify-between justify-end ${
+          isTopPagination ? '' : 'border-t dark:border-black-200 px-2 py-3'
+        }`}
+      >
+        <div className="sm:flex-1 sm:flex sm:items-center sm:justify-between">
+          <div></div>
+          <div
+            className={`flex justify-end ${
+              isTopPagination ? 'mt-2 lg:mt-0' : 'm-2'
+            }`}
+          >
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={onFirst}
+              className={`relative inline-flex items-center px-2 ml-1 md:px-3 text-xs py-2 font-medium ${
+                disabled
+                  ? 'text-gray-500 dark:text-neargray-50'
+                  : 'text-primary dark:text-neargray-10 hover:text-white hover:bg-primary'
+              } rounded-md  bg-gray-100 dark:bg-black-200`}
+            >
+              First
+            </button>
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={handlePreviousPage}
+              className={`relative inline-flex items-center px-2 ml-1 md:px-3 py-2 font-medium ${
+                disabled
+                  ? 'text-gray-500 dark:text-neargray-50'
+                  : 'text-primary dark:text-neargray-10 hover:text-white hover:bg-primary'
+              } rounded-md  bg-gray-100 dark:bg-black-200`}
+            >
+              <FaChevronLeft className="inline-flex text-xs" />
+            </button>
+            <button
+              type="button"
+              disabled
+              className="relative inline-flex items-center px-2 ml-1 md:px-3 py-2 text-xs font-medium text-gray-500 dark:text-neargray-10 rounded-md bg-gray-100 dark:bg-black-200"
+            >
+              Page {currentPage}
+            </button>
+            <button
+              type="button"
+              disabled={nextPageParams ? false : true}
+              onClick={handleNextPage}
+              className={`relative inline-flex items-center ml-1 px-2 md:px-3 py-2 rounded-md font-medium ${
+                nextPageParams
+                  ? 'text-primary hover:text-white dark:text-neargray-10 hover:bg-primary'
+                  : 'text-gray-500 dark:text-neargray-50'
+              }  bg-gray-100 dark:bg-black-200`}
+            >
+              <FaChevronRight className="inline-flex text-xs" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Pagination;
diff --git a/apps/app/src/components/Dashboard/SetPassword.tsx b/apps/app/src/components/Dashboard/SetPassword.tsx
new file mode 100644
index 00000000..f39e9c75
--- /dev/null
+++ b/apps/app/src/components/Dashboard/SetPassword.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import * as Yup from 'yup';
+import { FormikValues, useFormik } from 'formik';
+import { toast } from 'react-toastify';
+import { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+import LockCircle from '../Icons/LockCircle';
+
+interface Props {
+  mutate: () => void;
+}
+
+const validationSchema = Yup.object().shape({
+  password: Yup.string()
+    .min(8, 'Password must be an 8 character')
+    .required('Please enter  password'),
+  password_confirmation: Yup.string()
+    .oneOf([Yup.ref('password'), null], 'Your passwords do not match')
+    .required('Please enter password confirmation'),
+});
+
+const SetPassword = ({ mutate }: Props) => {
+  const onSubmit = async (values: FormikValues) => {
+    try {
+      await request.post(`/profile/set-password`, values);
+      if (!toast.isActive('password-set')) {
+        toast.success('Password set successfully', {
+          toastId: 'password-set',
+        });
+      }
+      formik.resetForm();
+      mutate();
+    } catch (error) {
+      const message = catchErrors(error);
+      if (!toast.isActive('password-set-error')) {
+        toast.error(message, {
+          toastId: 'password-set-error',
+        });
+      }
+    }
+  };
+
+  const onCancelClick = () => {
+    formik.resetForm();
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      old_password: '',
+      password: '',
+      password_confirmation: '',
+    },
+    onSubmit,
+    validationSchema,
+  });
+
+  return (
+    <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit my-4">
+      <div className="border-b px-5 py-5 dark:border-black-200">
+        <p className="text-black dark:text-neargray-10">Password</p>
+        <p className="text-sm text-gray-400 dark:text-neargray-50 mt-2">
+          Set your account password here
+        </p>
+      </div>
+      <div className="grid grid-cols-3 gap-1  px-6 py-4  border-b dark:border-black-200">
+        <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+          <LockCircle /> <span className="ml-2">Enter password</span>
+        </p>
+        <div className="flex flex-col items-start">
+          <input
+            type="password"
+            name="password"
+            value={formik.values.password}
+            onChange={formik.handleChange}
+            className="border dark:border-black-200 dark:bg-black-300 outline-primary px-3 py-2 rounded text-sm"
+          />
+          {formik.touched.old_password && formik.errors.password && (
+            <small className="text-red-500 text-center my-1">
+              {formik.errors.password}
+            </small>
+          )}
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-1  px-6 py-4  border-b dark:border-black-200">
+        <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center">
+          <LockCircle /> <span className="ml-2">Confirm password</span>
+        </p>
+        <div className="flex flex-col items-start">
+          <input
+            type="password"
+            name="password_confirmation"
+            value={formik.values.password_confirmation}
+            onChange={formik.handleChange}
+            className="border dark:border-black-200 dark:bg-black-300 outline-primary px-3 py-2 rounded text-sm"
+          />
+          {formik.touched.password_confirmation &&
+            formik.errors.password_confirmation && (
+              <small className="text-red-500 text-center  my-1">
+                {formik.errors.password_confirmation}
+              </small>
+            )}
+        </div>
+      </div>
+      <div className="flex items-center justify-end px-6 py-4">
+        <button
+          className="text-[13px] delay-300 duration-300 mx-1 hover:bg-gray-200 dark:hover:bg-black-200 px-7 py-3 rounded"
+          onClick={onCancelClick}
+        >
+          Cancel
+        </button>
+        <button
+          disabled={formik.isSubmitting}
+          type="button"
+          onClick={() => formik.handleSubmit()}
+          className={`text-sm text-[13px] px-7 focus:outline-none text-center font-semibold text-white py-3 bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary rounded ${
+            formik.isSubmitting &&
+            'cursor-not-allowed bg-green-500 dark:bg-green-250'
+          } `}
+        >
+          Set Password
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SetPassword;
diff --git a/apps/app/src/components/Dashboard/UpdateEmail.tsx b/apps/app/src/components/Dashboard/UpdateEmail.tsx
new file mode 100644
index 00000000..1a7d7517
--- /dev/null
+++ b/apps/app/src/components/Dashboard/UpdateEmail.tsx
@@ -0,0 +1,208 @@
+import React from 'react';
+import * as Yup from 'yup';
+import dayjs from '../../utils/dayjs';
+import { FormikHelpers, FormikValues, useFormik } from 'formik';
+import { toast } from 'react-toastify';
+/* import { useAccount, useDisconnect } from "wagmi"; */
+/* import Cookies from "js-cookie"; */
+/* import useStorage from "@/hooks/useStorage"; */
+import { catchErrors } from '@/utils/libs';
+import Avatar from '../Icons/Avatar';
+import { request } from '@/hooks/useAuth';
+import EmailCircle from '../Icons/EmailCircle';
+import LoginCircle from '../Icons/LoginCircle';
+import Clock from '../Icons/Clock';
+import Skeleton from '../skeleton/common/Skeleton';
+
+interface User {
+  username?: string;
+  email?: string;
+  last_login_at?: string;
+}
+
+interface UpdateEmailProps {
+  user: User | null;
+  loading: boolean;
+  mutate: () => void;
+}
+
+const UpdateEmail = ({ user, loading, mutate }: UpdateEmailProps) => {
+  /*  const { disconnect } = useDisconnect();
+  const [, setToken] = useStorage("token");
+  const [, setRole] = useStorage("role");
+  const [, setUser] = useStorage("user");
+  const { isConnected } = useAccount(); */
+
+  const validationSchema = user?.username
+    ? Yup.object().shape({
+        email: Yup.string()
+          .email('Please enter a valid email')
+          .required('Please enter email'),
+      })
+    : Yup.object().shape({
+        email: Yup.string()
+          .email('Please enter a valid email')
+          .required('Please enter email'),
+        username: Yup.string().required('Please enter username'),
+      });
+
+  const onSubmit = async (
+    values: FormikValues,
+    { setSubmitting, resetForm }: FormikHelpers<any>,
+  ): Promise<void> => {
+    try {
+      const resp = await request.post(`/profile/email`, values);
+      if (resp?.status === 200) {
+        mutate();
+        if (!toast.isActive('update-email')) {
+          toast.success(
+            'Email confirmation Link has been sent to email. Please verify and re-login',
+            {
+              toastId: 'update-email',
+            },
+          );
+        }
+        /* if (!isConnected) {
+          setToken("");
+          setRole("");
+          setUser("");
+          disconnect();
+          Cookies.remove("token");
+          setTimeout(() => {
+            router?.push("/login");
+          }, "2000");
+        } */
+      }
+    } catch (error: any) {
+      const errors = error?.response?.data?.error;
+      if (errors) {
+        if (!toast.isActive('update-email-error')) {
+          toast.error(errors, {
+            toastId: 'update-email-error',
+          });
+        }
+      } else {
+        const message = catchErrors(error);
+        if (!toast.isActive('update-email-error')) {
+          toast.error(message, {
+            toastId: 'update-email-error',
+          });
+        }
+      }
+      resetForm();
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onCancelClick = () => {
+    formik.resetForm();
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      email: user?.email ? user?.email : '',
+      username: '',
+    },
+    onSubmit,
+    validationSchema,
+    enableReinitialize: true,
+  });
+
+  return (
+    <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl  soft-shadow h-fit mb-4">
+      <div className="border-b px-5 py-5 dark:border-black-200">
+        <p className="text-black dark:text-neargray-10">User Settings</p>
+      </div>
+      <div className="gap-1 items-center">
+        <p className="text-sm text-gray-400 dark:text-neargray-10 mt-2 px-6 py-4">
+          Edit your account settings here
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+          <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center mb-2">
+            <Avatar /> <span className="ml-2">Username</span>
+          </p>
+          {loading ? (
+            <div className="w-full md:w-1/5">
+              <Skeleton className="flex w-20 h-4" />
+            </div>
+          ) : user?.username ? (
+            <p className="text-sm text-black dark:text-neargray-10 font-bold">
+              {user?.username}
+            </p>
+          ) : (
+            <div className="flex flex-col items-start">
+              <input
+                name="username"
+                autoComplete="off"
+                value={formik.values.username}
+                onChange={formik.handleChange}
+                className="border px-3 py-2 text-sm outline-primary rounded-md dark:bg-black-300 dark:border-black-200"
+              />
+              {formik.touched.username && formik.errors.username && (
+                <small className="text-red-500 text-center my-1">
+                  {formik.errors.username}
+                </small>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+        <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center mb-2">
+          <EmailCircle /> <span className="ml-2">Email Address</span>
+        </p>
+        <div className="flex flex-col items-start col-span-2">
+          <input
+            name="email"
+            autoComplete="off"
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            // className="border px-3 py-2 text-sm outline-primary rounded-md "\
+            className="w-full border px-3 py-2 text-sm outline-primary rounded-md dark:bg-black-300 dark:border-black-200"
+          />
+          {formik.touched.email && formik.errors.email && (
+            <small className="text-red-500 text-center my-1">
+              {formik.errors.email}
+            </small>
+          )}
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+        <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center mb-2">
+          <LoginCircle /> <span className="ml-2">Last Login</span>
+        </p>
+        {loading ? (
+          <div className="w-full md:w-1/5">
+            <Skeleton className="flex w-20 h-4" />
+          </div>
+        ) : (
+          <p className="text-sm text-black dark:text-neargray-10 flex col-span-2">
+            <Clock className="my-auto mr-1" />
+            {dayjs(user?.last_login_at).format('YYYY-MM-DD  HH:mm:ss')}
+          </p>
+        )}
+      </div>
+      <div className="flex items-center justify-end px-6 py-4">
+        <button
+          className="text-[13px] delay-300 duration-300 mx-1 hover:bg-gray-200 dark:hover:bg-black-200 px-6 py-2 rounded"
+          onClick={onCancelClick}
+        >
+          Cancel
+        </button>
+        <button
+          disabled={formik.isSubmitting}
+          type="button"
+          onClick={() => formik.handleSubmit()}
+          className={`text-sm text-[13px] px-6 focus:outline-none text-white dark:text-neargray-10  text-center font-semibold  py-2 bg-green-500 dark:bg-green-250 rounded hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary ${
+            formik.isSubmitting && 'cursor-not-allowed bg-primary-100'
+          } `}
+        >
+          Save Changes
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateEmail;
diff --git a/apps/app/src/components/Dashboard/UpdatePassword.tsx b/apps/app/src/components/Dashboard/UpdatePassword.tsx
new file mode 100644
index 00000000..22844bd5
--- /dev/null
+++ b/apps/app/src/components/Dashboard/UpdatePassword.tsx
@@ -0,0 +1,205 @@
+import React, { useState } from 'react';
+import * as Yup from 'yup';
+import { FormikValues, useFormik } from 'formik';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/router';
+import Cookies from 'js-cookie';
+/* import { useDisconnect } from "wagmi"; */
+import { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+import useStorage from '@/hooks/useStorage';
+import LockCircle from '../Icons/LockCircle';
+import UnlockCircle from '../Icons/UnlockCircle';
+import VisibilityOff from '../Icons/VisibilityOff';
+import Visibility from '../Icons/Visibility';
+
+const validationSchema = Yup.object().shape({
+  old_password: Yup.string()
+    .min(8, 'Old must be an 8 character')
+    .required('Please enter old password'),
+  password: Yup.string()
+    .min(8, 'Password must be an 8 character')
+    .required('Please enter  password'),
+  password_confirmation: Yup.string()
+    .oneOf([Yup.ref('password'), null], 'Your passwords do not match')
+    .required('Please enter password confirmation'),
+});
+
+const UpdatePassword = () => {
+  const router = useRouter();
+  /*   const { disconnect } = useDisconnect(); */
+  const [showPassword, setShowPassword] = useState(false);
+
+  const [, setToken] = useStorage('token');
+  const [, setRole] = useStorage('role');
+  const [, setUser] = useStorage('user');
+
+  const onSubmit = async (values: FormikValues) => {
+    try {
+      await request.post(`/profile/password`, values);
+      if (!toast.isActive('password-changed')) {
+        toast.success('Password Changed successfully', {
+          toastId: 'password-changed',
+        });
+      }
+      setToken('');
+      setRole('');
+      setUser('');
+      /*       disconnect(); */
+      Cookies.set('token', '');
+      router.push('/login');
+    } catch (error) {
+      const message = catchErrors(error);
+      if (!toast.isActive('password-changed-error')) {
+        toast.error(message, {
+          toastId: 'password-changed-error',
+        });
+      }
+    }
+  };
+
+  const onCancelClick = () => {
+    formik.resetForm();
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      old_password: '',
+      password: '',
+      password_confirmation: '',
+    },
+    onSubmit,
+    validationSchema,
+  });
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit my-4">
+      <div className="border-b px-5 py-5 dark:border-black-200">
+        <p className="text-black dark:text-neargray-10">Password</p>
+      </div>
+      <div className="gap-1 ">
+        <p className="text-sm text-gray-400 dark:text-neargray-10 px-6 py-4 ">
+          Update your account password here
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-1  px-6 py-4  border-b dark:border-black-200">
+          <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center mb-2">
+            <UnlockCircle /> <span className="ml-2">Enter old password</span>
+          </p>
+          <div className="flex flex-col items-start col-span-2">
+            <div className="relative w-full">
+              <input
+                type={showPassword ? 'text' : 'password'}
+                name="old_password"
+                value={formik.values.old_password}
+                onChange={formik.handleChange}
+                className="w-full border dark:border-black-200 dark:bg-black-300 outline-primary px-3 py-2 rounded text-sm"
+              />
+              <button
+                className="absolute top-0 right-0 h-full px-3"
+                onClick={togglePasswordVisibility}
+              >
+                {showPassword ? (
+                  <Visibility className="w-4 h-4" />
+                ) : (
+                  <VisibilityOff className="w-4 h-4" />
+                )}
+              </button>
+            </div>
+            {formik.touched.old_password && formik.errors.old_password && (
+              <small className="text-red-500 text-center my-1">
+                {formik.errors.old_password}
+              </small>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-1  px-6 py-4  border-b dark:border-black-200">
+        <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center mb-2">
+          <LockCircle /> <span className="ml-2">Enter new password</span>
+        </p>
+        <div className="flex flex-col items-start col-span-2">
+          <div className="relative w-full">
+            <input
+              type={showPassword ? 'text' : 'password'}
+              name="password"
+              value={formik.values.password}
+              onChange={formik.handleChange}
+              className="w-full border dark:border-black-200 dark:bg-black-300 outline-primary px-3 py-2 rounded text-sm"
+            />
+            <button
+              className="absolute top-0 right-0 h-full px-3"
+              onClick={togglePasswordVisibility}
+            >
+              {showPassword ? (
+                <Visibility className="w-4 h-4" />
+              ) : (
+                <VisibilityOff className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+          {formik.touched.old_password && formik.errors.password && (
+            <small className="text-red-500 text-center my-1">
+              {formik.errors.password}
+            </small>
+          )}
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-1  px-6 py-4  border-b dark:border-black-200">
+        <p className="text-gray-500 dark:text-neargray-10 text-sm flex items-center mb-2">
+          <LockCircle /> <span className="ml-2">Confirm new password</span>
+        </p>
+        <div className="flex flex-col items-start col-span-2">
+          <div className="relative w-full">
+            <input
+              type={showPassword ? 'text' : 'password'}
+              name="password_confirmation"
+              value={formik.values.password_confirmation}
+              onChange={formik.handleChange}
+              className="w-full border dark:border-black-200 dark:bg-black-300 outline-primary px-3 py-2 rounded text-sm"
+            />
+            <button
+              className="absolute top-0 right-0 h-full px-3"
+              onClick={togglePasswordVisibility}
+            >
+              {showPassword ? (
+                <Visibility className="w-4 h-4" />
+              ) : (
+                <VisibilityOff className="w-4 h-4" />
+              )}
+            </button>
+          </div>
+          {formik.touched.password_confirmation &&
+            formik.errors.password_confirmation && (
+              <small className="text-red-500 text-center  my-1">
+                {formik.errors.password_confirmation}
+              </small>
+            )}
+        </div>
+      </div>
+      <div className="flex items-center justify-end px-6 py-4">
+        <button
+          className="text-[13px] delay-300 duration-300 mx-1 hover:bg-gray-200 dark:hover:bg-black-200 px-6 py-2 rounded"
+          onClick={onCancelClick}
+        >
+          Cancel
+        </button>
+        <button
+          disabled={formik.isSubmitting}
+          type="button"
+          onClick={() => formik.handleSubmit()}
+          className={`text-sm text-[13px] px-6 focus:outline-none text-center font-semibold text-white dark:text-neargray-10 py-2 bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary rounded ${
+            formik.isSubmitting && 'cursor-not-allowed bg-primary-100'
+          } `}
+        >
+          Update Password
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default UpdatePassword;
diff --git a/apps/app/src/components/Icons/Avatar.tsx b/apps/app/src/components/Icons/Avatar.tsx
new file mode 100644
index 00000000..9bb7b342
--- /dev/null
+++ b/apps/app/src/components/Icons/Avatar.tsx
@@ -0,0 +1,32 @@
+interface Props {
+  className?: string;
+}
+
+const Avatar = (props: Props) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_849_3747)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9 0C13.9672 0 18 4.03275 18 9C18 13.9672 13.9672 18 9 18C4.03275 18 0 13.9672 0 9C0 4.03275 4.03275 0 9 0ZM15.0953 14.5575C14.8838 14.2568 14.5163 14.067 13.8773 13.92C10.9913 13.2405 10.8045 12.7942 10.6132 12.3757C10.419 11.952 10.4707 11.4532 10.767 10.893C12.0615 8.45025 12.3345 6.375 11.5373 5.0505C11.0318 4.21125 10.131 3.75 9 3.75C7.85925 3.75 6.951 4.2195 6.44325 5.07225C5.64375 6.414 5.9235 8.48025 7.23 10.89C7.5315 11.4465 7.587 11.9445 7.395 12.3705C7.19625 12.81 6.93675 13.263 4.12125 13.92C3.48225 14.067 3.11475 14.2568 2.904 14.556C4.413 16.2113 6.5865 17.25 9 17.25C11.4135 17.25 13.5863 16.2113 15.0953 14.5575ZM15.5828 13.971C16.629 12.588 17.25 10.866 17.25 9C17.25 4.44675 13.5533 0.75 9 0.75C4.44675 0.75 0.75 4.44675 0.75 9C0.75 10.8652 1.37025 12.5872 2.4165 13.9695C2.72325 13.6305 3.20325 13.362 3.95325 13.1887C5.472 12.8422 6.48525 12.5618 6.71175 12.0623C6.80325 11.8582 6.7575 11.5913 6.57075 11.247C5.133 8.59575 4.85925 6.26625 5.79825 4.68825C6.438 3.615 7.60425 3 9 3C10.3837 3 11.5433 3.606 12.18 4.6635C13.1182 6.22275 12.852 8.55975 11.43 11.244C11.2463 11.5912 11.202 11.8598 11.2957 12.0645C11.5245 12.5655 12.5288 12.843 14.046 13.1887C14.796 13.3612 15.276 13.6313 15.5828 13.971Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_849_3747">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Avatar;
diff --git a/apps/app/src/components/Icons/Campaign.tsx b/apps/app/src/components/Icons/Campaign.tsx
new file mode 100644
index 00000000..1c7eb542
--- /dev/null
+++ b/apps/app/src/components/Icons/Campaign.tsx
@@ -0,0 +1,25 @@
+interface Props {
+  className?: string;
+}
+
+const Campaign = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.75 3C15.75 2.6415 15.4657 2.25 15 2.25H3C2.535 2.25 2.25 2.63925 2.25 3V15C2.25 15.4657 2.64 15.75 3 15.75H15C15.3585 15.75 15.75 15.4657 15.75 15V3ZM3.375 3.375H14.625V14.625H3.375V3.375ZM13.5 11.4375C13.5 11.127 13.248 10.875 12.9375 10.875H9.5625C9.252 10.875 9 11.127 9 11.4375C9 11.748 9.252 12 9.5625 12H12.9375C13.248 12 13.5 11.748 13.5 11.4375ZM4.671 11.0347L5.6085 11.8702C5.706 11.9572 5.82825 12 5.94975 12C6.0885 12 6.22725 11.9438 6.32775 11.8335L7.91475 10.0988C8.00475 10.0005 8.049 9.87675 8.049 9.7545C8.049 9.47325 7.82175 9.243 7.536 9.243C7.39725 9.243 7.26 9.2985 7.158 9.40875L5.913 10.77L5.3535 10.2712C5.25525 10.1842 5.13375 10.1415 5.01225 10.1415C4.728 10.1415 4.5 10.3717 4.5 10.653C4.5 10.794 4.55775 10.9335 4.671 11.0347ZM13.5 9.0015C13.5 8.691 13.248 8.439 12.9375 8.439H9.5625C9.252 8.439 9 8.691 9 9.0015C9 9.312 9.252 9.564 9.5625 9.564H12.9375C13.248 9.564 13.5 9.312 13.5 9.0015ZM4.671 7.79175L5.6085 8.62725C5.706 8.71425 5.82825 8.757 5.94975 8.757C6.0885 8.757 6.22725 8.7015 6.32775 8.59125L7.91475 6.8565C8.00475 6.75825 8.049 6.6345 8.049 6.5115C8.049 6.231 7.82175 6 7.536 6C7.39725 6 7.26 6.0555 7.158 6.16575L5.913 7.527L5.3535 7.029C5.25525 6.942 5.13375 6.89925 5.01225 6.89925C4.728 6.89925 4.5 7.12875 4.5 7.41075C4.5 7.551 4.55775 7.69125 4.671 7.7925V7.79175ZM13.5 6.5625C13.5 6.252 13.248 6 12.9375 6H9.5625C9.252 6 9 6.252 9 6.5625C9 6.873 9.252 7.125 9.5625 7.125H12.9375C13.248 7.125 13.5 6.873 13.5 6.5625Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Campaign;
diff --git a/apps/app/src/components/Icons/CircleTimer.tsx b/apps/app/src/components/Icons/CircleTimer.tsx
new file mode 100644
index 00000000..b56d16d0
--- /dev/null
+++ b/apps/app/src/components/Icons/CircleTimer.tsx
@@ -0,0 +1,22 @@
+interface Props {
+  className?: string;
+}
+
+const Timer = (props: Props) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="9" cy="9" r="8.65" stroke="currentColor" strokeWidth="0.7" />
+    <path
+      d="M9.955 9.67L11.273 7.657L11.046 7.454L9.2095 9.0035C8.872 8.9345 8.5085 9.0375 8.2625 9.3125C7.8945 9.724 7.93 10.3565 8.342 10.7245C8.754 11.0925 9.386 11.057 9.754 10.645C10 10.37 10.0615 9.9975 9.955 9.67ZM8 4.347V3H10V4.347C9.2805 4.2255 8.704 4.228 8 4.347ZM12.4255 5.379L13.129 4.6755L13.836 5.3825L13.1755 6.043C12.9445 5.801 12.6935 5.5795 12.4255 5.379ZM3 7.5H7V8.5H3V7.5ZM2 9.5H6V10.5H2V9.5ZM3.5 11.5H7V12.5H3.5V11.5ZM14 10C14 12.7615 11.7615 15 9 15C7.605 15 6.35 14.4225 5.4445 13.5H7.0845C7.6535 13.8155 8.304 14 9 14C11.2055 14 13 12.2055 13 10C13 7.7945 11.2055 6 9 6C8.304 6 7.6535 6.1845 7.0845 6.5H5.4445C6.35 5.5775 7.605 5 9 5C11.7615 5 14 7.2385 14 10Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Timer;
diff --git a/apps/app/src/components/Icons/Close.tsx b/apps/app/src/components/Icons/Close.tsx
new file mode 100644
index 00000000..e118b907
--- /dev/null
+++ b/apps/app/src/components/Icons/Close.tsx
@@ -0,0 +1,23 @@
+interface Props {
+  className?: string;
+}
+
+const Close = (props: Props) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7 5.939L12.719 0.219C12.865 0.0729999 13.058 0 13.25 0C13.654 0 14 0.324 14 0.749C14 0.942 13.927 1.134 13.781 1.281L8.061 7L13.78 12.719C13.927 12.866 14 13.058 14 13.25C14 13.677 13.651 14 13.25 14C13.058 14 12.865 13.927 12.719 13.781L7 8.062L1.281 13.781C1.135 13.927 0.942 14 0.75 14C0.349 14 0 13.677 0 13.25C0 13.058 0.0729998 12.866 0.22 12.719L5.939 7L0.219 1.281C0.0729999 1.134 0 0.942 0 0.749C0 0.324 0.346 0 0.75 0C0.942 0 1.135 0.0729999 1.281 0.219L7 5.939Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Close;
diff --git a/apps/app/src/components/Icons/Create.tsx b/apps/app/src/components/Icons/Create.tsx
new file mode 100644
index 00000000..07d212d7
--- /dev/null
+++ b/apps/app/src/components/Icons/Create.tsx
@@ -0,0 +1,22 @@
+interface Props {
+  className?: string;
+}
+const Create = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={18}
+      height={18}
+      viewBox="0 0 18 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M17.961 0.0315C17.6512 0.0105 17.3482 0 17.0505 0C10.6005 0 6.92773 4.91775 5.59198 8.87475L9.13723 12.42C13.2082 10.962 18 7.425 18 1.044C18 0.714 17.9872 0.3765 17.961 0.0315ZM9.50323 10.665L7.34098 8.50275C8.25673 6.3585 10.8592 1.794 16.4902 1.51275C16.302 5.844 13.4595 8.96175 9.50323 10.665ZM13.6065 11.8185C13.1962 12.0983 12.789 12.351 12.3855 12.5767C12.2452 13.245 11.889 13.9583 11.3722 14.5658C11.3707 14.1337 11.2507 13.6988 11.04 13.2623C10.6687 13.431 10.3155 13.5758 9.97948 13.7032C10.4745 14.985 9.97048 15.9315 9.29323 16.8187C10.2652 16.7452 11.2852 16.2698 12.0892 15.465C12.9555 14.5988 13.5645 13.3478 13.6065 11.8185ZM4.74148 6.96675C4.30723 6.75675 3.87298 6.63825 3.44248 6.636C4.04473 6.12525 4.75048 5.77125 5.41198 5.62725C5.64748 5.21325 5.91223 4.8045 6.19123 4.4025C4.66198 4.44375 3.41023 5.05275 2.54323 5.91975C1.73998 6.723 1.26373 7.7445 1.19023 8.71575C2.07823 8.03775 3.02473 7.53375 4.30648 8.03025C4.43623 7.677 4.58098 7.32225 4.74148 6.96675ZM10.545 7.464C10.2517 7.17075 10.2517 6.69675 10.545 6.4035C10.8382 6.11025 11.3122 6.11025 11.6055 6.4035C11.8987 6.6975 11.8987 7.1715 11.6055 7.46475C11.3122 7.758 10.8375 7.75725 10.545 7.464ZM14.2567 3.75075C13.6717 3.16575 12.7215 3.16575 12.1357 3.75075C11.55 4.3365 11.55 5.2875 12.1357 5.8725C12.7215 6.45825 13.6717 6.45825 14.2575 5.8725C14.8425 5.2875 14.8425 4.33725 14.2567 3.75075ZM12.8257 5.184C12.621 4.97925 12.621 4.6455 12.8257 4.4415C13.029 4.23675 13.3635 4.23675 13.5682 4.4415C13.7722 4.6455 13.7715 4.97925 13.5682 5.184C13.3627 5.388 13.0297 5.388 12.8257 5.184ZM6.65023 11.8117L7.40998 12.5707C6.70348 13.2863 5.97973 14.133 5.69473 15.2985L4.65223 15.0435C5.00248 13.6095 5.85748 12.6135 6.65023 11.8117ZM5.42473 10.587L6.18223 11.3445C5.34298 12.1718 4.37248 12.9967 2.95198 13.344L2.69698 12.3015C3.86173 12.0157 4.71448 11.289 5.42473 10.587ZM7.48423 15.4215C7.63873 16.9433 6.77473 17.8703 5.62423 17.9872C4.94773 18.0562 4.34848 17.8335 3.85723 17.3273C2.67598 17.7443 1.55173 17.292 0.959233 16.4482C0.492733 15.786 0.389233 14.9468 0.672733 14.1427C0.165733 13.6508 -0.0570173 13.0567 0.0127327 12.3757C0.128233 11.235 1.03348 10.3553 2.62573 10.5195L2.78323 11.4255C2.24623 11.4757 1.74898 11.5035 1.42648 11.8253C0.884983 12.3675 1.04848 13.497 2.06473 13.797C1.39048 14.475 1.45498 15.4485 1.96198 15.9825C2.49223 16.5427 3.50473 16.6297 4.20223 15.9352C4.51423 16.9928 5.65873 17.088 6.17398 16.5735C6.49198 16.2555 6.52273 15.7673 6.57223 15.237L7.48423 15.4215Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Create;
diff --git a/apps/app/src/components/Icons/Delete.tsx b/apps/app/src/components/Icons/Delete.tsx
new file mode 100644
index 00000000..253cee7f
--- /dev/null
+++ b/apps/app/src/components/Icons/Delete.tsx
@@ -0,0 +1,22 @@
+interface Props {
+  className?: string;
+}
+const Delete = (props: Props) => (
+  <svg
+    width="12"
+    height="13"
+    viewBox="0 0 12 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.36364 1.625H7.63636V0.677083C7.63636 0.641333 7.62218 0.606667 7.59655 0.581208C7.57091 0.55575 7.536 0.541667 7.5 0.541667H4.5C4.464 0.541667 4.42909 0.55575 4.40345 0.581208C4.37782 0.606667 4.36364 0.641333 4.36364 0.677083V1.625ZM10.3636 2.16667H1.63636V11.9167C1.63636 12.2157 1.88073 12.4583 2.18182 12.4583H9.81818C10.1193 12.4583 10.3636 12.2157 10.3636 11.9167V2.16667ZM4.90909 4.0625C4.90909 3.913 4.78691 3.79167 4.63636 3.79167C4.48582 3.79167 4.36364 3.913 4.36364 4.0625V10.5625C4.36364 10.712 4.48582 10.8333 4.63636 10.8333C4.78691 10.8333 4.90909 10.712 4.90909 10.5625V4.0625ZM7.63636 4.0625C7.63636 3.913 7.51418 3.79167 7.36364 3.79167C7.21309 3.79167 7.09091 3.913 7.09091 4.0625V10.5625C7.09091 10.712 7.21309 10.8333 7.36364 10.8333C7.51418 10.8333 7.63636 10.712 7.63636 10.5625V4.0625ZM12 1.625V2.16667H10.9091V11.9167C10.9091 12.5152 10.4209 13 9.81818 13H2.18182C1.57909 13 1.09091 12.5152 1.09091 11.9167V2.16667H0V1.625H3.81818V0.541667C3.81818 0.242667 4.06255 0 4.36364 0H7.63636C7.93745 0 8.18182 0.242667 8.18182 0.541667V1.625H12Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Delete;
diff --git a/apps/app/src/components/Icons/Edit.tsx b/apps/app/src/components/Icons/Edit.tsx
new file mode 100644
index 00000000..4c25ac7e
--- /dev/null
+++ b/apps/app/src/components/Icons/Edit.tsx
@@ -0,0 +1,23 @@
+interface Props {
+  className?: string;
+}
+
+const Edit = (props: Props) => (
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 10 10"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.21409 9.35727L0 10L0.642727 6.78591L7.42864 0L10 2.57136L3.21409 9.35727ZM2.99 8.93864L1.06136 7.01L0.579545 9.42045L2.99 8.93864ZM7.42864 0.642727L1.38318 6.68864L3.31136 8.61682L9.35727 2.57136L7.42864 0.642727Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Edit;
diff --git a/apps/app/src/components/Icons/EmailCircle.tsx b/apps/app/src/components/Icons/EmailCircle.tsx
new file mode 100644
index 00000000..e803d50e
--- /dev/null
+++ b/apps/app/src/components/Icons/EmailCircle.tsx
@@ -0,0 +1,24 @@
+interface Props {
+  className?: string;
+}
+
+const EmailCircle = (props: Props) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15 14H3V5H15V14ZM3.5 5.7615V13.5H14.5V5.7615L9.0005 10.7615L3.5 5.7615ZM14.0445 5.5H3.9565L9.0005 10.0855L14.0445 5.5Z"
+      fill="currentColor"
+    />
+    <circle cx="9" cy="9" r="8.65" stroke="currentColor" strokeWidth="0.7" />
+  </svg>
+);
+
+export default EmailCircle;
diff --git a/apps/app/src/components/Icons/FaChevronLeft.tsx b/apps/app/src/components/Icons/FaChevronLeft.tsx
index 917e765c..2b59e7f6 100644
--- a/apps/app/src/components/Icons/FaChevronLeft.tsx
+++ b/apps/app/src/components/Icons/FaChevronLeft.tsx
@@ -1,11 +1,15 @@
-const FaChevronLeft = () => {
+interface Props {
+  className?: string;
+}
+
+const FaChevronLeft = (props: Props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
       height="16"
       fill="currentColor"
-      className="bi bi-chevron-left"
+      className={`bi bi-chevron-left ${props.className}`}
       viewBox="0 0 16 16"
     >
       <path
diff --git a/apps/app/src/components/Icons/FaChevronRight.tsx b/apps/app/src/components/Icons/FaChevronRight.tsx
index 134db695..83d03e68 100644
--- a/apps/app/src/components/Icons/FaChevronRight.tsx
+++ b/apps/app/src/components/Icons/FaChevronRight.tsx
@@ -1,11 +1,15 @@
-const FaChevronRight = () => {
+interface Props {
+  className?: string;
+}
+
+const FaChevronRight = (props: Props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"
       height="16"
       fill="currentColor"
-      className="bi bi-chevron-right"
+      className={`bi bi-chevron-right ${props.className}`}
       viewBox="0 0 16 16"
     >
       <path
diff --git a/apps/app/src/components/Icons/FaDownload.tsx b/apps/app/src/components/Icons/FaDownload.tsx
new file mode 100644
index 00000000..b9da1a00
--- /dev/null
+++ b/apps/app/src/components/Icons/FaDownload.tsx
@@ -0,0 +1,21 @@
+interface Props {
+  className?: string;
+}
+const FaDownload = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      width="18"
+      height="24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+      />
+    </svg>
+  );
+};
+
+export default FaDownload;
diff --git a/apps/app/src/components/Icons/FaFileInvoiceDollar.tsx b/apps/app/src/components/Icons/FaFileInvoiceDollar.tsx
new file mode 100644
index 00000000..a204f424
--- /dev/null
+++ b/apps/app/src/components/Icons/FaFileInvoiceDollar.tsx
@@ -0,0 +1,21 @@
+interface Props {
+  className?: string;
+}
+const FaFileInvoiceDollar = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384 512"
+      width="384"
+      height="512"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-153 31V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM64 72c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8V72zm0 80v-16c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8zm144 263.88V440c0 4.42-3.58 8-8 8h-16c-4.42 0-8-3.58-8-8v-24.29c-11.29-.58-22.27-4.52-31.37-11.35-3.9-2.93-4.1-8.77-.57-12.14l11.75-11.21c2.77-2.64 6.89-2.76 10.13-.73 3.87 2.42 8.26 3.72 12.82 3.72h28.11c6.5 0 11.8-5.92 11.8-13.19 0-5.95-3.61-11.19-8.77-12.73l-45-13.5c-18.59-5.58-31.58-23.42-31.58-43.39 0-24.52 19.05-44.44 42.67-45.07V232c0-4.42 3.58-8 8-8h16c4.42 0 8 3.58 8 8v24.29c11.29.58 22.27 4.51 31.37 11.35 3.9 2.93 4.1 8.77.57 12.14l-11.75 11.21c-2.77 2.64-6.89 2.76-10.13.73-3.87-2.43-8.26-3.72-12.82-3.72h-28.11c-6.5 0-11.8 5.92-11.8 13.19 0 5.95 3.61 11.19 8.77 12.73l45 13.5c18.59 5.58 31.58 23.42 31.58 43.39 0 24.53-19.05 44.44-42.67 45.07z"
+      />
+    </svg>
+  );
+};
+
+export default FaFileInvoiceDollar;
diff --git a/apps/app/src/components/Icons/FaUserAlt .tsx b/apps/app/src/components/Icons/FaUserAlt .tsx
new file mode 100644
index 00000000..499dd812
--- /dev/null
+++ b/apps/app/src/components/Icons/FaUserAlt .tsx	
@@ -0,0 +1,20 @@
+import React, { SVGProps } from 'react';
+
+const FaUserAlt = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 512 512"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"></path>
+    </svg>
+  );
+};
+
+export default FaUserAlt;
diff --git a/apps/app/src/components/Icons/FileSearch.tsx b/apps/app/src/components/Icons/FileSearch.tsx
new file mode 100644
index 00000000..8a09c6ec
--- /dev/null
+++ b/apps/app/src/components/Icons/FileSearch.tsx
@@ -0,0 +1,24 @@
+interface Props {
+  className?: string;
+}
+const FileSearch = (props: Props) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.80675 0C11.4495 0 10.308 6 10.308 6C12.5648 5.44125 16.5 5.68575 16.5 8.25V16.8862L12.8993 13.2855C13.2795 12.699 13.5 12 13.5 11.25C13.5 9.18 11.82 7.5 9.75 7.5C7.68 7.5 6 9.18 6 11.25C6 13.32 7.68 15 9.75 15C10.5278 15 11.25 14.763 11.8492 14.3565L15.4928 18H1.5V0H7.80675ZM9.75 9C10.992 9 12 10.008 12 11.25C12 12.492 10.992 13.5 9.75 13.5C8.508 13.5 7.5 12.492 7.5 11.25C7.5 10.008 8.508 9 9.75 9ZM10.926 0.05625C12.5767 0.93675 15.3795 3.71925 16.5 5.21775C15.5355 4.54275 13.467 3.975 11.9318 4.33275C12.0983 3.23175 11.7922 0.93225 10.926 0.05625Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default FileSearch;
diff --git a/apps/app/src/components/Icons/Home.tsx b/apps/app/src/components/Icons/Home.tsx
new file mode 100644
index 00000000..ecc725f8
--- /dev/null
+++ b/apps/app/src/components/Icons/Home.tsx
@@ -0,0 +1,24 @@
+interface Props {
+  className?: string;
+}
+const Home = (props: Props) => {
+  return (
+    <svg
+      width="18"
+      height="16"
+      viewBox="0 0 18 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5 15.5H6.75V14H9V10.25H13.5V14H15V8.6165L11.2282 5.4515L5.4015 10.406L3.603 8.51525L1.5 10.1472V15.5L0 15.4992V9.5L3.74175 6.485L5.511 8.34575L11.2245 3.48725L16.5 7.92125V15.5H12V11.75H10.5V15.5ZM6 14.75V15.5H2.25V14.75H6ZM2.25 13.25H6V14H2.25V13.25ZM2.25 11.75H6V12.5H2.25V11.75ZM11.25 0.5L18 6.24125L16.9965 7.36175L11.2387 2.495L5.562 7.337L4.491 6.23825L11.25 0.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Home;
diff --git a/apps/app/src/components/Icons/Key.tsx b/apps/app/src/components/Icons/Key.tsx
new file mode 100644
index 00000000..fbdad9e7
--- /dev/null
+++ b/apps/app/src/components/Icons/Key.tsx
@@ -0,0 +1,29 @@
+interface Props {
+  className?: string;
+}
+const Key = (props: Props) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_902_1626)">
+        <path
+          d="M12 1.5C14.4818 1.5 16.5 3.51825 16.5 6C16.5 8.48175 14.4818 10.5 12 10.5C9.51825 10.5 7.5 8.48175 7.5 6C7.5 3.51825 9.51825 1.5 12 1.5ZM12 0C8.6865 0 6 2.6865 6 6C6 9.3135 8.6865 12 12 12C15.3135 12 18 9.3135 18 6C18 2.6865 15.3135 0 12 0ZM7.94625 12.3L6.84225 13.5H4.5V15H3V16.5H1.5V14.8657L5.92725 10.3837C5.62425 9.9645 5.36175 9.51525 5.14875 9.0375L0 14.25V18H4.5V16.5H6V15H7.5L9.33825 13.0028C8.847 12.816 8.38125 12.5812 7.94625 12.3ZM13.5 3.75C13.9132 3.75 14.25 4.08675 14.25 4.5C14.25 4.91325 13.9132 5.25 13.5 5.25C13.0868 5.25 12.75 4.91325 12.75 4.5C12.75 4.08675 13.0868 3.75 13.5 3.75ZM13.5 3C12.672 3 12 3.672 12 4.5C12 5.328 12.672 6 13.5 6C14.328 6 15 5.328 15 4.5C15 3.672 14.328 3 13.5 3Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_902_1626">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Key;
diff --git a/apps/app/src/components/Icons/LockCircle.tsx b/apps/app/src/components/Icons/LockCircle.tsx
new file mode 100644
index 00000000..0eaf8f69
--- /dev/null
+++ b/apps/app/src/components/Icons/LockCircle.tsx
@@ -0,0 +1,24 @@
+interface Props {
+  className?: string;
+}
+
+const LockCircle = (props: Props) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.33333 5.75C6.33333 4.23246 7.52844 3 9 3C10.4716 3 11.6667 4.232 11.6667 5.75V7.58333H13V14H5V7.58333H6.33333V5.75ZM12.5556 8.04167H5.44444V13.5417H12.5556V8.04167ZM6.77778 5.75V7.58333H11.2222V5.75C11.2222 4.485 10.2267 3.45833 9 3.45833C7.77333 3.45833 6.77778 4.485 6.77778 5.75Z"
+      fill="currentColor"
+    />
+    <circle cx="9" cy="9" r="8.65" stroke="currentColor" strokeWidth="0.7" />
+  </svg>
+);
+
+export default LockCircle;
diff --git a/apps/app/src/components/Icons/LoginCircle.tsx b/apps/app/src/components/Icons/LoginCircle.tsx
new file mode 100644
index 00000000..f0dbf11d
--- /dev/null
+++ b/apps/app/src/components/Icons/LoginCircle.tsx
@@ -0,0 +1,23 @@
+interface Props {
+  className?: string;
+}
+const LoginCircle = (props: Props) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.45455 3.90909V3L14 4.36364V12.5455L9.45455 13.9091V13H5.36364V9.81818H5.81818V12.5455H9.45455V4.36364H5.81818V7.54545H5.36364V3.90909H9.45455ZM9.90909 13.2982L13.5455 12.2073V4.70182L9.90909 3.61091V13.2982ZM8.115 8.45455L6.61818 6.95773L6.93955 6.63636L8.985 8.68182L6.93955 10.7273L6.61818 10.4059L8.115 8.90909H4V8.45455H8.115Z"
+      fill="currentColor"
+    />
+    <circle cx="9" cy="9" r="8.65" stroke="currentColor" strokeWidth="0.7" />
+  </svg>
+);
+
+export default LoginCircle;
diff --git a/apps/app/src/components/Icons/Logout.tsx b/apps/app/src/components/Icons/Logout.tsx
new file mode 100644
index 00000000..9be0b178
--- /dev/null
+++ b/apps/app/src/components/Icons/Logout.tsx
@@ -0,0 +1,21 @@
+interface Props {
+  className?: string;
+}
+
+const Logout = (props: Props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+    height="24px"
+    viewBox="0 -960 960 960"
+    width="24px"
+    fill="none"
+  >
+    <path
+      d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Logout;
diff --git a/apps/app/src/components/Icons/Plan.tsx b/apps/app/src/components/Icons/Plan.tsx
new file mode 100644
index 00000000..9f35c3b8
--- /dev/null
+++ b/apps/app/src/components/Icons/Plan.tsx
@@ -0,0 +1,25 @@
+interface Props {
+  className?: string;
+}
+
+const Plan = (props: Props) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 17.25H3C1.344 17.25 0 15.906 0 14.25V2.4795C0.23475 1.67625 0.96375 0.75 2.25 0.75C3.64125 0.75 4.32675 1.7565 4.49625 2.484L4.5 3.75H18V17.25ZM16.5 5.25H4.5V13.5C4.5 13.5 4.05375 12.75 3.0585 12.75C2.2305 12.75 1.5 13.422 1.5 14.25C1.5 15.078 2.172 15.75 3 15.75H16.5V5.25ZM15 14.25H6V6.75H15V14.25ZM9 7.5H6.75V13.5H14.25V10.5H12.75V12.75H12V10.5H9.75V12.75H9V7.5ZM3 2.74575C2.82525 2.055 1.64475 2.058 1.5 2.74575V11.7435C1.806 11.4277 2.53725 11.2005 3 11.25V2.74575ZM9.75 7.5V9.75H14.25V7.5H9.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Plan;
diff --git a/apps/app/src/components/Icons/Refresh.tsx b/apps/app/src/components/Icons/Refresh.tsx
new file mode 100644
index 00000000..a0a4ee70
--- /dev/null
+++ b/apps/app/src/components/Icons/Refresh.tsx
@@ -0,0 +1,31 @@
+interface Props {
+  className?: string;
+}
+
+const Refresh = (props: Props) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle cx="9" cy="9" r="8.65" stroke="currentcolor" strokeWidth="0.7" />
+      <g clipPath="url(#clip0_1201_3145)">
+        <path
+          d="M12.2991 9.46797L12.3017 9.44897V9.44964C12.3097 9.3903 12.3164 9.33064 12.3211 9.27064C12.3291 9.16997 12.2581 9.0003 12.0714 9.0003C11.9411 9.0003 11.8331 9.1003 11.8224 9.2303C11.8164 9.30397 11.8077 9.37697 11.7964 9.44897C11.5814 10.7993 10.4104 11.8333 8.99941 11.8333C7.98708 11.8333 7.09808 11.301 6.59741 10.5016L7.26108 10.5C7.39908 10.5 7.51108 10.388 7.51108 10.25C7.51108 10.112 7.39908 9.99997 7.26108 9.99997H5.91675C5.77875 9.99997 5.66675 10.112 5.66675 10.25V11.5996C5.66675 11.7376 5.77875 11.8496 5.91675 11.8496C6.05475 11.8496 6.16675 11.738 6.16675 11.5996L6.16775 10.758C6.75608 11.7033 7.80475 12.3333 8.99941 12.3333C10.6801 12.3333 12.0717 11.0863 12.2991 9.46797ZM5.70775 8.47664L5.70475 8.4953V8.49464C5.69308 8.5723 5.68375 8.65097 5.67741 8.73064C5.66941 8.8313 5.74041 9.00097 5.92708 9.00097C6.05741 9.00097 6.16541 8.90097 6.17608 8.77097C6.18341 8.67764 6.19541 8.58564 6.21175 8.4953C6.45041 7.17264 7.60808 6.16797 8.99908 6.16797C10.0114 6.16797 10.9004 6.7003 11.4011 7.49964L10.7374 7.5013C10.5994 7.5013 10.4874 7.6133 10.4874 7.7513C10.4874 7.8893 10.5994 8.0013 10.7374 8.0013H12.0817C12.2197 8.0013 12.3317 7.8893 12.3317 7.7513V6.40164C12.3317 6.26364 12.2197 6.15164 12.0817 6.15164C11.9437 6.15164 11.8317 6.2633 11.8317 6.40164L11.8307 7.2433C11.2424 6.29797 10.1937 5.66797 8.99908 5.66797C7.33775 5.66797 5.95908 6.88597 5.70775 8.47664Z"
+          fill="currentcolor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1201_3145">
+          <rect width="8" height="8" fill="white" transform="translate(5 5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Refresh;
diff --git a/apps/app/src/components/Icons/UnlockCircle.tsx b/apps/app/src/components/Icons/UnlockCircle.tsx
new file mode 100644
index 00000000..66ce3757
--- /dev/null
+++ b/apps/app/src/components/Icons/UnlockCircle.tsx
@@ -0,0 +1,23 @@
+interface Props {
+  className?: string;
+}
+const UnlockCircle = (props: Props) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="9" cy="9" r="8.65" stroke="currentColor" strokeWidth="0.7" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.58333 8.16667V6.5C8.58333 5.35 7.65 4.41667 6.5 4.41667C5.35 4.41667 4.41667 5.35 4.41667 6.5V7.33333H4V6.5C4 5.12 5.12042 4 6.5 4C7.87958 4 9 5.12042 9 6.5V8.16667H13.1667V14H5.66667V8.16667H8.58333ZM12.75 8.58333H6.08333V13.5833H12.75V8.58333Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default UnlockCircle;
diff --git a/apps/app/src/components/Icons/User.tsx b/apps/app/src/components/Icons/User.tsx
index cb4bfe85..b759ea15 100644
--- a/apps/app/src/components/Icons/User.tsx
+++ b/apps/app/src/components/Icons/User.tsx
@@ -1,18 +1,21 @@
-import React, { SVGProps } from 'react';
+interface Props {
+  className?: string;
+}
 
-const User = (props: SVGProps<SVGSVGElement>) => {
+const User = (props: Props) => {
   return (
     <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 512 512"
-      height="1em"
-      width="1em"
+      width="18"
+      height="16"
+      viewBox="0 0 18 16"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <path d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"></path>
+      <path
+        d="M18.0001 2H12.7501V3.5H18.0001V2ZM18.0001 5H12.7501V6.5H18.0001V5ZM18.0001 8H12.7501V9.5H18.0001V8ZM15.0001 14.8947V15.5H13.5001V14.762C13.5001 13.7652 13.5639 13.4772 12.5941 13.2522C10.7349 12.8232 8.9776 12.4182 8.3086 10.952C8.05885 10.406 7.8916 9.51125 8.5081 8.34725C9.7426 6.0155 10.0644 4.03775 9.39235 2.921C8.90935 2.11925 8.00035 2 7.5001 2C6.9961 2 6.0781 2.12225 5.5906 2.9405C4.9156 4.07375 5.2426 6.0395 6.4861 8.33375C7.11535 9.494 6.9526 10.3917 6.7051 10.9407C6.03985 12.4152 4.2166 12.8352 2.4526 13.2417C1.4416 13.4735 1.5001 13.748 1.5001 14.75V15.5H0.00310185L0.000101854 14.8752C-0.00664815 13.2072 0.0661019 12.254 1.98535 11.8107C4.0891 11.3255 6.1651 10.8905 5.16685 9.04925C2.2096 3.593 4.3246 0.5 7.5001 0.5C10.6156 0.5 12.7816 3.47825 9.83335 9.0485C8.86435 10.8785 10.8646 11.3135 13.0149 11.81C14.9416 12.2555 15.0076 13.2147 15.0001 14.8947Z"
+        fill="currentColor"
+      />
     </svg>
   );
 };
diff --git a/apps/app/src/components/Icons/Visibility.tsx b/apps/app/src/components/Icons/Visibility.tsx
new file mode 100644
index 00000000..2d2437d2
--- /dev/null
+++ b/apps/app/src/components/Icons/Visibility.tsx
@@ -0,0 +1,19 @@
+interface Props {
+  className?: string;
+}
+const Visibility = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="#5f6368"
+      {...props}
+    >
+      <path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z" />
+    </svg>
+  );
+};
+
+export default Visibility;
diff --git a/apps/app/src/components/Icons/VisibilityOff.tsx b/apps/app/src/components/Icons/VisibilityOff.tsx
new file mode 100644
index 00000000..ca7dd67e
--- /dev/null
+++ b/apps/app/src/components/Icons/VisibilityOff.tsx
@@ -0,0 +1,19 @@
+interface Props {
+  className?: string;
+}
+const VisibilityOff = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="#5f6368"
+      {...props}
+    >
+      <path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z" />
+    </svg>
+  );
+};
+
+export default VisibilityOff;
diff --git a/apps/app/src/components/Layouts/Header.tsx b/apps/app/src/components/Layouts/Header.tsx
index 26471c32..2769d3ff 100644
--- a/apps/app/src/components/Layouts/Header.tsx
+++ b/apps/app/src/components/Layouts/Header.tsx
@@ -3,7 +3,7 @@ import Image from 'next/legacy/image';
 import { useRouter } from 'next/router';
 import React, { useMemo, useState } from 'react';
 import useTranslation from 'next-translate/useTranslation';
-import { useAuthStore } from '@/stores/auth';
+/* import { useAuthStore } from '@/stores/auth'; */
 import { useTheme } from 'next-themes';
 import Collapse from '../Collapse';
 import Menu from '../Icons/Menu';
@@ -12,9 +12,11 @@ import ActiveLink from '../ActiveLink';
 import Skeleton from '@/components/skeleton/common/Skeleton';
 import { networkId } from '@/utils/config';
 import { dollarFormat, nanoToMilli } from '@/utils/libs';
-import User from '../Icons/User';
 import { BlocksInfo, Stats } from '@/utils/types';
 import Search from '../common/Search';
+import useStorage from '@/hooks/useStorage';
+import Cookies from 'js-cookie';
+import dynamic from 'next/dynamic';
 
 const menus = [
   {
@@ -136,6 +138,8 @@ const languages = [
   },
 ];
 
+const UserMenu = dynamic(() => import('./UserMenu'), { ssr: false });
+
 interface Props {
   statsDetails?: { stats: Stats[] };
   latestBlocks?: { blocks: BlocksInfo[] };
@@ -146,15 +150,36 @@ const Header = ({ statsDetails, latestBlocks }: Props) => {
 
   const router = useRouter();
   const { t } = useTranslation('common');
+  const [role] = useStorage('role');
+  const profile = [
+    {
+      id: 1,
+      title: 'My Profile',
+      link: '/user/overview',
+    },
+    {
+      id: 2,
+      title: 'Settings',
+      link: '/user/settings',
+    },
+    {
+      id: 3,
+      title: 'API Keys',
+      link: role === 'publisher' ? '/publisher/keys' : '/user/keys',
+    },
+  ];
   const [open, setOpen] = useState(false);
   const { theme, setTheme } = useTheme();
-  const requestSignInWithWallet = useAuthStore(
+  /*     const requestSignInWithWallet = useAuthStore(
     (store) => store.requestSignInWithWallet,
   );
   const signedIn = useAuthStore((store) => store.signedIn);
-  const accountId = useAuthStore((store) => store.accountId);
+    const accountId = useAuthStore((store) => store.accountId);
   const logOut = useAuthStore((store) => store.logOut);
-  const user = signedIn;
+  const walletUser = signedIn; */
+  const [token, setToken] = useStorage('token');
+  const [user, setUser] = useStorage('user');
+  const [, setRole] = useStorage('role');
 
   const stats: Stats | undefined = statsDetails?.stats?.[0];
   const block: BlocksInfo | undefined = latestBlocks?.blocks?.[0];
@@ -174,11 +199,21 @@ const Header = ({ statsDetails, latestBlocks }: Props) => {
   }, [block]);
 
   const showSearch = router.pathname !== '/';
-  const userLoading = false;
+  /*   const userLoading = false; */
 
-  const onSignOut = () => {
+  /*  const onSignOut = () => {
     logOut();
+  }; */
+
+  const onSignOut = () => {
+    setToken('');
+    setUser('');
+    setRole('');
+    Cookies.remove('token');
+    /* disconnect(); */
+    router.push('/login');
   };
+
   const nearPrice = stats?.near_price ?? '';
   return (
     <div className="dark:bg-black-600 soft-shadow">
@@ -428,100 +463,12 @@ const Header = ({ statsDetails, latestBlocks }: Props) => {
                   </>
                 </li>
                 <li>
-                  <>
-                    <Collapse
-                      trigger={({ show, onClick }) => (
-                        <a
-                          className="flex md:!hidden items-center justify-between w-full hover:text-green-500 dark:hover:text-green-250 py-2 px-4"
-                          href="#"
-                          onClick={onClick}
-                        >
-                          <div className="w-full">
-                            {user ? (
-                              <div className="flex justify-between">
-                                <div className="flex items-center">
-                                  <span className="truncate max-w-[110px]">
-                                    {accountId}
-                                  </span>
-                                </div>
-                                <ArrowDown
-                                  className={`fill-current transition-transform w-5 h-5 ${
-                                    show && 'transform rotate-180'
-                                  }`}
-                                />
-                              </div>
-                            ) : (
-                              <div onClick={requestSignInWithWallet}>
-                                <div className="w-full flex items-center">
-                                  <User className="mx-1 mr-2 text-sm bg-gray-500 rounded-full p-0.5 text-white" />
-                                  Sign In
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        </a>
-                      )}
-                    >
-                      {user && (
-                        <ul className="border-l-2 border-green-500 md:hidden ml-2">
-                          <li className="px-4 pb-1">
-                            <button
-                              onClick={onSignOut}
-                              className="bg-green-200/70 w-full rounded-md text-white text-xs text-center py-1 whitespace-nowrap dark:bg-green-250 dark:text-neargray-10"
-                            >
-                              Sign Out
-                            </button>
-                          </li>
-                        </ul>
-                      )}
-                    </Collapse>
-
-                    <span className="group hidden md:flex h-full w-full relative">
-                      <a
-                        className={`hidden md:flex h-full items-center justify-between w-full hover:text-green-500 dark:hover:text-green-250 py-2 px-4 `}
-                        href="#"
-                      >
-                        {user ? (
-                          <>
-                            <User className="mx-1 text-sm bg-gray-500 rounded-full p-0.5 text-white" />
-                            <span className="truncate max-w-[110px]">
-                              {accountId}
-                            </span>
-                            <ArrowDown className="fill-current w-4 h-4 ml-2" />
-                          </>
-                        ) : (
-                          <div onClick={requestSignInWithWallet}>
-                            <div className="flex items-center">
-                              {userLoading ? (
-                                <>
-                                  <User className="mx-1 mr-2 text-sm bg-gray-500 rounded-full p-0.5 text-white" />
-                                  <Skeleton className="flex w-14 h-4" />
-                                </>
-                              ) : (
-                                <>
-                                  <User className="mx-1 mr-2 text-sm bg-gray-500 rounded-full p-0.5 text-white" />
-                                  Sign In
-                                </>
-                              )}
-                            </div>
-                          </div>
-                        )}
-                      </a>
-
-                      {user && (
-                        <ul className="bg-white dark:bg-black-600 soft-shadow hidden  absolute top-full rounded-b-lg !border-t-2 !border-t-green-500 group-hover:!block py-2 px-4 z-[99]">
-                          <li className="px-8 pb-1">
-                            <button
-                              onClick={onSignOut}
-                              className="bg-green-200/70 dark:bg-green-250 dark:text-neargray-10 rounded-md text-white text-xs text-center py-1 px-4 whitespace-nowrap"
-                            >
-                              Sign Out
-                            </button>
-                          </li>
-                        </ul>
-                      )}
-                    </span>
-                  </>
+                  <UserMenu
+                    user={user}
+                    token={token}
+                    profile={profile}
+                    onSignOut={onSignOut}
+                  />
                 </li>
               </ul>
               <ul className="md:flex justify-end text-gray-500 pb-4 md:pb-0">
diff --git a/apps/app/src/components/Layouts/Logout.tsx b/apps/app/src/components/Layouts/Logout.tsx
new file mode 100644
index 00000000..c0fb8f5b
--- /dev/null
+++ b/apps/app/src/components/Layouts/Logout.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+/* import { useDisconnect } from "wagmi"; */
+import Cookies from 'js-cookie';
+
+import useStorage from '@/hooks/useStorage';
+import Logout from '../Icons/Logout';
+
+const UserLogout = () => {
+  const [, setToken] = useStorage('token');
+  const [, setRole] = useStorage('role');
+  const [, setUser] = useStorage('user');
+  /*  const { disconnect } = useDisconnect(); */
+
+  const router = useRouter();
+
+  const onLogout = () => {
+    setToken('');
+    setRole('');
+    setUser('');
+    /*   disconnect(); */
+    Cookies.remove('token');
+    router?.push('/login');
+  };
+
+  return (
+    <div
+      onClick={onLogout}
+      className="flex items-center text-center border-2 text-md pl-4 pr-6 py-1 rounded focus:outline-none font-semibold bg-primary text-white border-primary cursor-pointer"
+    >
+      <Logout className="h-6 w-5" />
+      <span className="text-[13px] font-semibold ml-2">Sign Out</span>
+    </div>
+  );
+};
+
+export default UserLogout;
diff --git a/apps/app/src/components/Layouts/Meta.tsx b/apps/app/src/components/Layouts/Meta.tsx
new file mode 100644
index 00000000..f43214aa
--- /dev/null
+++ b/apps/app/src/components/Layouts/Meta.tsx
@@ -0,0 +1,22 @@
+interface MetaProps {
+  title: string;
+  description: string;
+  thumbnail: string;
+}
+
+const Meta = ({ title, description, thumbnail }: MetaProps) => {
+  return (
+    <>
+      <meta name="title" content={title} />
+      <meta name="description" content={description} />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={thumbnail} />
+      <meta property="twitter:title" content={title} />
+      <meta property="twitter:description" content={description} />
+      <meta property="twitter:image" content={thumbnail} />
+    </>
+  );
+};
+
+export default Meta;
diff --git a/apps/app/src/components/Layouts/UserLayout.tsx b/apps/app/src/components/Layouts/UserLayout.tsx
new file mode 100644
index 00000000..d0649b5b
--- /dev/null
+++ b/apps/app/src/components/Layouts/UserLayout.tsx
@@ -0,0 +1,316 @@
+import React, { FC, ReactNode, useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+/* import { useDisconnect } from "wagmi"; */
+import { env } from 'next-runtime-env';
+import Loader from '../skeleton/common/Loader';
+/* import Logout from "components/Icons/Logout"; */
+import useAuth from '@/hooks/useAuth';
+import useStorage from '@/hooks/useStorage';
+import ActiveLink from '../ActiveLink';
+import Home from '../Icons/Home';
+import User from '../Icons/User';
+import Plan from '../Icons/Plan';
+import Menu from '../Icons/Menu';
+import Close from '../Icons/Close';
+import Campaign from '../Icons/Campaign';
+import Create from '../Icons/Create';
+import FileSearch from '../Icons/FileSearch';
+import Key from '../Icons/Key';
+import Arrow from '../Icons/Arrow';
+import FaFileInvoiceDollar from '../Icons/FaFileInvoiceDollar';
+import UserLogout from './Logout';
+import { docsUrl } from '@/utils/config';
+
+interface MenuItemProps {
+  href: string;
+  icon: React.ElementType;
+  text: string;
+  exact?: boolean | null;
+}
+
+const MenuItem: FC<MenuItemProps> = ({
+  href,
+  icon: Icon,
+  text,
+  exact = null,
+}) => (
+  <div className="hover:text-primary text-gray-600 dark:text-neargray-100 rounded-md cursor-pointer">
+    <ActiveLink
+      href={href}
+      inActiveClassName="py-2 hover:bg-primary-100 dark:hover:bg-black-200 dark:hover:text-green-100 rounded-md my-1"
+      activeClassName="text-primary dark:text-green-100 py-2 bg-primary-100 dark:bg-black-200 rounded-md my-1"
+      exact={exact}
+    >
+      <span className="flex">
+        <Icon className="h-4 w-4 mx-2 hover:text-primary" />
+        <p className="text-sm px-1">{text}</p>
+      </span>
+    </ActiveLink>
+  </div>
+);
+
+interface UserLayoutProps {
+  children: ReactNode;
+  title: string;
+}
+
+const UserLayout = ({ children, title }: UserLayoutProps) => {
+  const [showMenu, setShowMenu] = useState(true);
+  const [, _setToken] = useStorage('token');
+  const [role, _setRole] = useStorage('role');
+  const [, _setUser] = useStorage('user');
+  const { data: userData, loading } = useAuth('/profile');
+  /*   const { disconnect } = useDisconnect(); */
+  const brand = env('NEXT_PUBLIC_BRAND');
+
+  const userDetails = userData?.data || null;
+  const router = useRouter();
+
+  return (
+    <>
+      <section>
+        <div
+          style={{
+            backgroundSize: 'cover',
+            backgroundRepeat: 'no-repeat',
+          }}
+          className="h-60 bg-hero-pattern dark:bg-hero-pattern-dark"
+        >
+          <div className="xl:container mx-auto pt-10">
+            <div className="flex items-center justify-between mr-3">
+              <div className="ml-3">
+                <h1 className="mb-4 pt-8 sm:text-2xl text-xl text-white ">
+                  {title}
+                </h1>
+                {brand !== 'near' && (
+                  <ol
+                    vocab="https://schema.org/"
+                    typeof="BreadcrumbList"
+                    className="flex flex-wrap items-center text-xs text-white mb-4"
+                  >
+                    <li
+                      property="itemListElement"
+                      typeof="ListItem"
+                      className="px-1"
+                    >
+                      <Link href={`/`} passHref>
+                        <span
+                          property="item"
+                          typeof="WebPage"
+                          className="cursor-pointer"
+                        >
+                          <span property="name">Home</span>
+                        </span>
+                      </Link>
+                      <meta property="position" content="1" />
+                    </li>
+                    /
+                    {(router?.route === '/campaign/[id]' ||
+                      router?.route === '/campaign/chart') && (
+                      <>
+                        <li
+                          property="itemListElement"
+                          typeof="ListItem"
+                          className="px-1"
+                        >
+                          <Link legacyBehavior href={`/campaign`}>
+                            <span
+                              property="item"
+                              typeof="WebPage"
+                              className="cursor-pointer"
+                            >
+                              {role == 'advertiser' ? (
+                                <span property="name">My Campaigns</span>
+                              ) : (
+                                <span property="name">Campaigns</span>
+                              )}
+                            </span>
+                          </Link>
+                          <meta property="position" content="1" />
+                        </li>
+                        /
+                      </>
+                    )}
+                    <li
+                      property="itemListElement"
+                      typeof="ListItem"
+                      className="px-1"
+                    >
+                      <span property="name">{title}</span>
+                      <meta property="position" content="3" />
+                    </li>
+                  </ol>
+                )}
+              </div>
+              {/* <div
+                onClick={onLogout}
+                className="flex items-center text-center border-2 text-md pl-4 pr-6 py-1 rounded focus:outline-none font-semibold bg-primary text-white border-primary cursor-pointer"
+              >
+                <Logout className="h-6 w-5" />
+                <span className="text-[13px] font-semibold ml-2">Sign Out</span>
+              </div> */}
+              <UserLogout />
+            </div>
+          </div>
+        </div>
+        <div className="xl:container mx-auto px-3 -mt-[93px]">
+          <div className="lg:flex block pb-20">
+            <div className="xl:w-[28%] lg:w-[35%] w-[100%] bg-white dark:bg-black-600 rounded-xl soft-shadow border h-fit mb-4 mr-8">
+              <div
+                className={`flex justify-between items-center ${
+                  showMenu && 'border-b dark:border-black-200'
+                } px-5 py-5`}
+              >
+                <div>
+                  {loading ? (
+                    <Loader wrapperClassName="flex w-28 h-5" />
+                  ) : (
+                    <p className="text-black dark:text-neargray-100">
+                      {userDetails?.username}
+                    </p>
+                  )}
+                  {loading ? (
+                    <Loader wrapperClassName="flex w-40 h-4 mt-4" />
+                  ) : (
+                    <p className="text-sm text-gray-400 mt-2">
+                      {userDetails?.email}
+                    </p>
+                  )}
+                </div>
+                <div
+                  className="lg:hidden cursor-pointer delay-300"
+                  onClick={() => setShowMenu((o) => !o)}
+                >
+                  {!showMenu ? <Menu /> : <Close className="mr-1" />}
+                </div>
+              </div>
+              <div
+                className={`${
+                  showMenu ? 'lg:slide-down disclosure' : 'hidden'
+                }`}
+              >
+                <div className="px-4 py-2">
+                  <p className="text-nearblue-600 dark:text-neargray-100 uppercase text-xs py-2">
+                    Account
+                  </p>
+
+                  <MenuItem
+                    href={`/user/overview`}
+                    icon={Home}
+                    text="Account Overview"
+                  />
+
+                  <MenuItem
+                    href={`/user/settings`}
+                    icon={User}
+                    text="Account Settings"
+                  />
+                </div>
+
+                {role == 'advertiser' && (
+                  <div className="px-4 py-2">
+                    <p className="text-nearblue-600 dark:text-neargray-100 uppercase text-xs py-2">
+                      API
+                    </p>
+                    <MenuItem
+                      href={`/user/plan`}
+                      icon={Plan}
+                      text="Current Plan"
+                    />
+                    <MenuItem href={`/user/keys`} icon={Key} text="API Keys" />
+                    <MenuItem
+                      href={`/user/invoices`}
+                      icon={FaFileInvoiceDollar}
+                      text="Invoices"
+                    />
+                    <div className="flex py-2 hover:bg-primary-100 dark:hover:bg-black-200 hover:text-primary dark:hover:text-green-100  text-gray-600 dark:text-neargray-100 rounded-md cursor-pointer">
+                      <FileSearch className="h-4 w-4 mx-2" />
+
+                      <a
+                        href={docsUrl}
+                        target="_blank"
+                        rel="noreferrer nofollow noopener"
+                      >
+                        <span className="flex text-sm px-1">
+                          Documentation
+                          <span>
+                            <Arrow className="-rotate-45 -mt-1 h-4 w-4 fill-black dark:fill-white" />
+                          </span>
+                        </span>
+                      </a>
+                    </div>
+                  </div>
+                )}
+                {role == 'publisher' && (
+                  <div className="px-4 py-2">
+                    <p className="text-nearblue-600 dark:text-neargray-100 uppercase text-xs py-2">
+                      API
+                    </p>
+                    <MenuItem
+                      href={`/publisher/keys`}
+                      icon={Key}
+                      text="API Keys"
+                    />
+                    <MenuItem
+                      href={`/user/invoices`}
+                      icon={FaFileInvoiceDollar}
+                      text="Invoices"
+                    />
+                    <MenuItem
+                      href={`/publisher/apisubscriptions`}
+                      icon={Campaign}
+                      text="API Subscriptions"
+                    />
+                  </div>
+                )}
+
+                <div className="px-4 py-2">
+                  <p className="text-nearblue-600 dark:text-neargray-100 uppercase text-xs py-2">
+                    Advertise
+                  </p>
+
+                  <MenuItem
+                    href={`/campaign`}
+                    icon={Campaign}
+                    text={role == 'advertiser' ? `My Campaigns` : `Campaigns`}
+                    exact={true}
+                  />
+
+                  {role == 'advertiser' ? (
+                    <>
+                      <MenuItem
+                        href={`/campaign/plans`}
+                        icon={Create}
+                        text={'Create New Campaign'}
+                      />
+                    </>
+                  ) : (
+                    role == 'publisher' && (
+                      <>
+                        <MenuItem
+                          href={`/plans`}
+                          icon={Plan}
+                          text={'Campaign Plans'}
+                        />
+                        <MenuItem
+                          href={`/publisher/adsubscriptions`}
+                          icon={Campaign}
+                          text="Campaign Subscriptions"
+                        />
+                      </>
+                    )
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className="w-full">{children}</div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+UserLayout.displayName = 'UserLayout';
+
+export default UserLayout;
diff --git a/apps/app/src/components/Layouts/UserMenu.tsx b/apps/app/src/components/Layouts/UserMenu.tsx
new file mode 100644
index 00000000..5422cace
--- /dev/null
+++ b/apps/app/src/components/Layouts/UserMenu.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import Collapse from '../Collapse';
+import ArrowDown from '../Icons/ArrowDown';
+import Link from 'next/link';
+import User from '../Icons/FaUserAlt ';
+import ActiveLink from '../ActiveLink';
+
+interface Props {
+  user: any;
+  token: string;
+  profile: any;
+  onSignOut: () => void;
+}
+
+const UserMenu = ({ user, token, profile, onSignOut }: Props) => {
+  return (
+    <>
+      <Collapse
+        trigger={({ show, onClick }) => (
+          <span
+            className="flex md:!hidden items-center justify-between w-full hover:text-green-500 dark:hover:text-green-250 py-2 px-4"
+            onClick={onClick}
+          >
+            <div className="w-full" suppressHydrationWarning>
+              {user && token ? (
+                <div className="flex justify-between" suppressHydrationWarning>
+                  <div className="flex items-center" suppressHydrationWarning>
+                    <span className="truncate max-w-[110px]">{user}</span>
+                  </div>
+                  <ArrowDown
+                    className={`fill-current transition-transform w-5 h-5 ${
+                      show && 'transform rotate-180'
+                    }`}
+                  />
+                </div>
+              ) : (
+                <div suppressHydrationWarning>
+                  <Link href={`/login`} className="w-full flex items-center">
+                    <User className="mx-1 mr-2 text-sm bg-gray-500 rounded-full p-0.5 text-white" />
+                    Sign In
+                  </Link>
+                </div>
+              )}
+            </div>
+          </span>
+        )}
+      >
+        {user && token && (
+          <ul className="border-l-2 border-green-500 md:hidden ml-4">
+            {profile.map((menu: any) => (
+              <li key={menu.id}>
+                <ActiveLink href={menu.link}>
+                  <a className="block w-full hover:text-primary py-2 px-4">
+                    {menu.title}
+                  </a>
+                </ActiveLink>
+              </li>
+            ))}
+            <li className="border-t my-3"></li>
+            <li className="px-4 pb-1">
+              <button
+                onClick={onSignOut}
+                className="bg-green-200/70 w-full rounded-md text-white text-xs text-center py-1 whitespace-nowrap dark:bg-green-250 dark:text-neargray-10"
+              >
+                Sign Out
+              </button>
+            </li>
+          </ul>
+        )}
+      </Collapse>
+      <span className="group hidden md:flex h-full w-full relative">
+        <div
+          className={`hidden md:flex h-full items-center justify-between w-full hover:text-green-500 dark:hover:text-green-250 py-2 px-4 `}
+        >
+          {user && token ? (
+            <>
+              <User className="mx-1 text-sm bg-gray-500 rounded-full p-0.5 text-white" />
+              <span className="truncate max-w-[110px]">{user}</span>
+              <ArrowDown className="fill-current w-4 h-4 ml-2" />
+            </>
+          ) : (
+            <div>
+              <ActiveLink href={`/login`}>
+                <a className="block w-full hover:text-primary py-2 px-4">
+                  Sign In
+                </a>
+              </ActiveLink>
+            </div>
+          )}
+        </div>
+        {user && token && (
+          <ul className="bg-white dark:bg-black-600 soft-shadow hidden  absolute top-full rounded-b-lg !border-t-2 !border-t-green-500 group-hover:!block py-2 px-4 z-[99]">
+            {profile.map((menu: any) => (
+              <li key={menu.id}>
+                <ActiveLink href={menu.link}>
+                  <a className="block w-full hover:text-primary py-2 px-4">
+                    {menu.title}
+                  </a>
+                </ActiveLink>
+              </li>
+            ))}
+            <li className="border-t my-3"></li>
+            <li className="px-4 pb-1">
+              <button
+                onClick={onSignOut}
+                className="bg-green-200/70 dark:bg-green-250 dark:text-neargray-10 rounded-md text-white text-xs text-center py-1 px-4 whitespace-nowrap"
+              >
+                Sign Out
+              </button>
+            </li>
+          </ul>
+        )}
+      </span>
+    </>
+  );
+};
+export default UserMenu;
diff --git a/apps/app/src/components/Plans/Listing.tsx b/apps/app/src/components/Plans/Listing.tsx
new file mode 100644
index 00000000..91553f76
--- /dev/null
+++ b/apps/app/src/components/Plans/Listing.tsx
@@ -0,0 +1,113 @@
+import useAuth from '@/hooks/useAuth';
+import { dollarFormat } from '@/utils/libs';
+import Skeleton from '../skeleton/common/Skeleton';
+
+type Item = {
+  id: string | number;
+  title: string;
+  price_monthly: number;
+  price_annually: number;
+};
+
+const PlanListing = () => {
+  const { data, loading } = useAuth('/campaign/plans');
+
+  return (
+    <>
+      <div className="block lg:flex lg:space-x-2">
+        <div className="w-full">
+          <div className="bg-white dark:bg-black-600 dark:text-neargray-10 border dark:border-black-200 soft-shadow rounded-lg pb-1">
+            <div className={`flex flex-col lg:flex-row pt-4`}>
+              <div className="flex flex-col">
+                <h1 className="leading-7 px-6 text-base text-black dark:text-neargray-10">
+                  Campaign Plans
+                </h1>
+                <p className="leading-7 px-6 text-sm mb-4 text-gray-500 dark:text-neargray-10">
+                  <div> Below are your campaign plans.</div>
+                </p>
+              </div>
+            </div>
+            <div className="overflow-x-auto ">
+              <table className="min-w-full divide-y dark:divide-black-200 border-t dark:border-black-200 text-black">
+                <thead className="bg-gray-100 dark:bg-black-600 dark:text-neargray-10">
+                  <tr>
+                    <th
+                      scope="col"
+                      className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      title
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider whitespace-nowrap"
+                    >
+                      price(monthly)
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-5 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider whitespace-nowrap"
+                    >
+                      price(annually)
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-black-600 divide-y divide-gray-200">
+                  {loading &&
+                    [...Array(5)].map((_, i) => (
+                      <tr key={i} className="hover:bg-blue-900/5 h-[57px]">
+                        <td className="pl-5 pr-2 py-4 whitespace-nowrap text-sm text-gray-500 ">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-5 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <Skeleton className="h-4" />
+                        </td>
+                      </tr>
+                    ))}
+                  {!loading && !data?.data?.length && (
+                    <tr className="h-[57px]">
+                      <td
+                        colSpan={100}
+                        className="px-6 py-4 text-gray-400 dark:text-neargray-10 text-xs"
+                      >
+                        No Plans
+                      </td>
+                    </tr>
+                  )}
+                  {data?.data?.map((item: Item) => (
+                    <tr
+                      className="h-[57px] dark:text-neargray-10 hover:bg-blue-900/5"
+                      key={item?.id}
+                    >
+                      <td className="px-5 py-4 whitespace-nowrap text-sm">
+                        <span className="text-xs">{item?.title}</span>
+                      </td>
+                      <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                        <span className="text-xs">
+                          $
+                          {dollarFormat((item?.price_monthly / 100).toString())}
+                        </span>
+                      </td>
+                      <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                        <span className="text-xs">
+                          $
+                          {dollarFormat(
+                            (item?.price_annually / 100).toString(),
+                          )}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PlanListing;
diff --git a/apps/app/src/components/SubscriptionStats.tsx b/apps/app/src/components/SubscriptionStats.tsx
new file mode 100644
index 00000000..beb540ab
--- /dev/null
+++ b/apps/app/src/components/SubscriptionStats.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import useAuth from '@/hooks/useAuth';
+import { localFormat } from '@/utils/libs';
+import Skeleton from './skeleton/common/Skeleton';
+
+interface Props {
+  type?: string;
+}
+
+const SubscriptionStats = ({ type }: Props) => {
+  const apiUrl =
+    type === 'api'
+      ? '/publisher/api-subscriptions/stats'
+      : '/publisher/campaign-subscriptions/stats';
+
+  const { data, loading } = useAuth(apiUrl);
+
+  return (
+    <>
+      {
+        <div className="bg-white dark:bg-black-600 dark:text-neargray-10 border soft-shadow rounded-xl p-2">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-2">
+            <div className="flex flex-col md:items-center items-start justify-start ">
+              <div className="m-2 p-2  md:border-r w-full">
+                <h2 className="text-lg text-gray-400 dark:text-neargray-10 font-semibold">
+                  {'Active'}
+                </h2>
+                {data ? (
+                  !loading ? (
+                    <>
+                      <p className="text-3xl text-black font-bold dark:text-neargray-10">
+                        {localFormat(data?.active)}
+                      </p>
+                    </>
+                  ) : (
+                    <>
+                      <Skeleton className="w-1/2 h-6" />
+                      <Skeleton className="mt-3" />
+                    </>
+                  )
+                ) : !loading ? (
+                  <>
+                    <p className="text-3xl text-black dark:text-neargray-10 font-bold">
+                      {localFormat(data?.active)}
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <Skeleton className="w-1/2 h-6" />
+                    <Skeleton className="mt-3" />
+                  </>
+                )}
+              </div>
+            </div>
+            <div className="flex flex-col md:items-center items-start justify-start ">
+              <div className="m-2 p-2 w-full  md:border-r">
+                <h2 className="text-lg text-gray-400 dark:text-neargray-10 font-semibold">
+                  {'Incomplete'}
+                </h2>
+                {!loading ? (
+                  <>
+                    <p className=" text-3xl font-bold text-black dark:text-neargray-10">
+                      {localFormat(data?.incomplete)}
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <Skeleton className="w-1/2 h-6" />
+                    <Skeleton className="mt-3" />
+                  </>
+                )}
+              </div>
+            </div>
+            <div className="flex flex-col md:items-center items-start justify-start">
+              <div className="m-2 p-2 w-full">
+                <h2 className="text-lg text-gray-400 dark:text-neargray-10 font-semibold">
+                  {'Cancelled'}
+                </h2>
+                {!loading ? (
+                  <>
+                    <p className=" text-3xl font-bold text-black dark:text-neargray-10">
+                      {localFormat(data?.cancelled)}
+                    </p>
+                  </>
+                ) : (
+                  <>
+                    <Skeleton className="w-1/2 h-6" />
+                    <Skeleton className="mt-3" />
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </>
+  );
+};
+
+export default SubscriptionStats;
diff --git a/apps/app/src/components/common/LoadingCircular.tsx b/apps/app/src/components/common/LoadingCircular.tsx
index 2be379f2..0a5dfb2c 100644
--- a/apps/app/src/components/common/LoadingCircular.tsx
+++ b/apps/app/src/components/common/LoadingCircular.tsx
@@ -1,11 +1,15 @@
-import React from 'react';
+interface Props {
+  className?: string;
+}
 
-export default function LoadingCircular() {
+export default function LoadingCircular({ className }: Props) {
   return (
     <div className="flex items-center">
       <svg
         aria-hidden="true"
-        className="mr-2 w-5 h-5 text-white animate-spin dark:text-gray-600 fill-blue-500"
+        className={`mr-2 text-white animate-spin dark:text-gray-600 fill-blue-500 ${
+          className ? className : 'w-5 h-5'
+        }`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/app/src/components/skeleton/common/CircularLoader.tsx b/apps/app/src/components/skeleton/common/CircularLoader.tsx
new file mode 100644
index 00000000..0c61d916
--- /dev/null
+++ b/apps/app/src/components/skeleton/common/CircularLoader.tsx
@@ -0,0 +1,20 @@
+export default function CircularLoader() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="mr-2 w-9 h-9 text-white animate-spin dark:text-gray-600 fill-primary dark:fill-white"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+  );
+}
diff --git a/apps/app/src/components/skeleton/common/Loader.tsx b/apps/app/src/components/skeleton/common/Loader.tsx
new file mode 100644
index 00000000..a14f9dfe
--- /dev/null
+++ b/apps/app/src/components/skeleton/common/Loader.tsx
@@ -0,0 +1,42 @@
+import { useTheme } from 'next-themes';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import { ReactNode } from 'react';
+
+interface LoaderProps {
+  count?: number;
+  className?: string;
+  wrapperClassName?: string;
+  children?: ReactNode;
+  [key: string]: any;
+}
+
+const Loader = ({
+  count = 1,
+  className,
+  wrapperClassName,
+  ...props
+}: LoaderProps) => {
+  const { theme } = useTheme();
+  const Wrapper = (props: { children?: ReactNode }) => (
+    <div className={wrapperClassName} {...props} />
+  );
+  const baseColor = theme === 'dark' ? '#1f2228' : '#e5e7eb';
+  const highlightColor = theme === 'dark' ? '#444' : '#f0f0f0';
+
+  if (!theme) {
+    return null;
+  }
+
+  return (
+    <SkeletonTheme baseColor={baseColor} highlightColor={highlightColor}>
+      <Skeleton
+        count={count}
+        className={className}
+        wrapper={Wrapper}
+        {...props}
+      />
+    </SkeletonTheme>
+  );
+};
+
+export default Loader;
diff --git a/apps/app/src/hooks/useAuth.ts b/apps/app/src/hooks/useAuth.ts
new file mode 100644
index 00000000..8f4ef18f
--- /dev/null
+++ b/apps/app/src/hooks/useAuth.ts
@@ -0,0 +1,79 @@
+import useSWR from 'swr';
+import axios from 'axios';
+import { toast } from 'react-toastify';
+import { env } from 'next-runtime-env';
+
+import useStorage from './useStorage';
+import RateLimitDialog from '@/components/RateLimitDialog';
+import React from 'react';
+
+const baseURL = env('NEXT_PUBLIC_USER_API_URL');
+
+export const defaultOptions = {
+  revalidateOnFocus: false,
+  shouldRetryOnError: false,
+  revalidateOnReconnect: false,
+};
+
+export const fetcher = ([url, token]: [string, string | null], options = {}) =>
+  axios
+    .get(url, {
+      baseURL,
+      headers: token ? { Authorization: 'Bearer ' + token } : {},
+      ...options,
+    })
+    .then((res) => res.data);
+
+export const request = axios.create({
+  baseURL,
+});
+
+request.interceptors.request.use(
+  (conf) => {
+    var accessToken = null;
+
+    if (typeof window !== 'undefined') {
+      accessToken = JSON.parse(localStorage.getItem('token') as string);
+    }
+
+    if (accessToken) {
+      conf.headers.Authorization = `Bearer ${accessToken}`;
+    }
+
+    return conf;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+request.interceptors.response.use(undefined, (error) => {
+  if (error?.response?.status === 429) {
+    toast.warn(React.createElement(RateLimitDialog), {
+      toastId: 'rateLimit',
+      autoClose: false,
+    });
+  }
+  if (error?.response?.status === 403) {
+    // Clear the token when a 403 error occurs
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    localStorage.removeItem('role');
+  }
+  return Promise.reject(error);
+});
+
+const useAuth = (url: string, options = {}) => {
+  const [token] = useStorage('token');
+  const config = { ...defaultOptions, ...options };
+  const { data, error, mutate } = useSWR([url, token], fetcher, config);
+
+  return {
+    data,
+    error,
+    loading: !error && !data,
+    mutate,
+  };
+};
+
+export default useAuth;
diff --git a/apps/app/src/hooks/useStorage.ts b/apps/app/src/hooks/useStorage.ts
new file mode 100644
index 00000000..cfece033
--- /dev/null
+++ b/apps/app/src/hooks/useStorage.ts
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+const useStorage = (key: string, initialValue?: any) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    if (typeof window === 'undefined') {
+      return initialValue;
+    }
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+  const setValue = (value: any) => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+};
+export default useStorage;
diff --git a/apps/app/src/pages/_app.tsx b/apps/app/src/pages/_app.tsx
index 5d92e54c..fc128b4f 100644
--- a/apps/app/src/pages/_app.tsx
+++ b/apps/app/src/pages/_app.tsx
@@ -1,24 +1,16 @@
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
-import dynamic from 'next/dynamic';
 import '../../public/common.css';
 
-import { useBosLoaderInitializer } from '@/hooks/useBosLoaderInitializer';
 import type { NextPageWithLayout } from '@/utils/types';
 import Script from 'next/script';
 import { env } from 'next-runtime-env';
 import { ThemeProvider } from 'next-themes';
 
-const VmInitializer = dynamic(() => import('../components/vm/VmInitializer'), {
-  ssr: false,
-});
-
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
-  useBosLoaderInitializer();
-
   const getLayout = Component.getLayout ?? ((page) => page);
 
   return (
@@ -33,7 +25,6 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
       `}
       </Script>
       <ThemeProvider attribute="class" enableSystem={false}>
-        <VmInitializer />
         {getLayout(<Component {...pageProps} />)}
       </ThemeProvider>
     </>
diff --git a/apps/app/src/pages/address/[id].tsx b/apps/app/src/pages/address/[id].tsx
index 15d2e304..49acef2a 100644
--- a/apps/app/src/pages/address/[id].tsx
+++ b/apps/app/src/pages/address/[id].tsx
@@ -38,9 +38,10 @@ import ContractOverview from '@/components/Address/Contract/ContractOverview';
 import ListCheck from '@/components/Icons/ListCheck';
 import FaCheckCircle from '@/components/Icons/FaCheckCircle';
 import { useRpcStore } from '@/stores/rpc';
-import dynamic from 'next/dynamic';
 import { getCookieFromRequest } from '@/utils/libs';
 import { RpcProviders } from '@/utils/rpc';
+import { useBosLoaderInitializer } from '@/hooks/useBosLoaderInitializer';
+import dynamic from 'next/dynamic';
 
 const network = env('NEXT_PUBLIC_NETWORK_ID');
 const ogUrl = env('NEXT_PUBLIC_OG_URL');
@@ -48,6 +49,13 @@ const RpcMenu = dynamic(() => import('../../components/Layouts/RpcMenu'), {
   ssr: false,
 });
 
+const VmInitializer = dynamic(
+  () => import('../../components/vm/VmInitializer'),
+  {
+    ssr: false,
+  },
+);
+
 const tabs = [
   'txns',
   'receipts',
@@ -226,6 +234,7 @@ const Address = ({
   error,
   tab,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  useBosLoaderInitializer();
   const router = useRouter();
   const [tabIndex, setTabIndex] = useState(0);
   const { id } = router.query;
@@ -522,6 +531,7 @@ const Address = ({
           href={`${appUrl}/address/${accountData?.account_id}`}
         />
       </Head>
+      <VmInitializer />
       <div className="relative container mx-auto px-3">
         <div className="flex items-center justify-between flex-wrap pt-4">
           {!id ? (
diff --git a/apps/app/src/pages/apis.tsx b/apps/app/src/pages/apis.tsx
index 59352548..3c02be68 100644
--- a/apps/app/src/pages/apis.tsx
+++ b/apps/app/src/pages/apis.tsx
@@ -17,6 +17,9 @@ import Skeleton from '@/components/skeleton/common/Skeleton';
 import { useTheme } from 'next-themes';
 import { GetServerSideProps } from 'next';
 import fetcher from '@/utils/fetcher';
+import Cookies from 'js-cookie';
+import { request } from '@/hooks/useAuth';
+import useStorage from '@/hooks/useStorage';
 
 const userApiURL = env('NEXT_PUBLIC_USER_API_URL');
 
@@ -65,6 +68,56 @@ const ApiPlan = () => {
   const [subject, _setSubject] = useState('API');
   const [description, setDescription] = useState('');
   const [data, setData] = useState();
+  const [token, _setToken] = useStorage('token');
+
+  Cookies.get('token');
+
+  const resetStripePlan = () => {
+    localStorage.setItem('stripe-plan-id', '');
+    localStorage.setItem('interval', '');
+    localStorage.setItem('subscribe-called', '');
+
+    return;
+  };
+
+  const subscribePlan = async () => {
+    try {
+      const stripePlanId = localStorage.getItem('stripe-plan-id');
+      const interval = localStorage.getItem('interval');
+
+      const res = await request.post(`advertiser/subscribe`, {
+        interval: interval === 'year' ? 'year' : 'month',
+        plan_id: stripePlanId,
+      });
+      localStorage.setItem('subscribe-called', 'true');
+
+      if (res?.data && res?.data['url ']) {
+        await router.push(res?.data['url ']);
+        return;
+      }
+      if (res?.data && res?.data['message'] === 'upgraded') {
+        resetStripePlan();
+        router.push('/user/plan?status=upgraded');
+      }
+      if (res?.data && res?.data['message'] === 'downgraded') {
+        resetStripePlan();
+        router.push('/user/plan?status=downgraded');
+      }
+      resetStripePlan();
+      router.push('/user/plan');
+    } catch (error) {
+      const statusCode = get(error, 'response.status') || null;
+
+      if (statusCode === 422) {
+        resetStripePlan();
+        router.push('/user/plan?status=exists');
+      }
+      if (statusCode === 400) {
+        resetStripePlan();
+        router.push('/user/plan?status=invalid');
+      }
+    }
+  };
 
   function get(obj: any, path: any, defaultValue = null) {
     const keys = Array.isArray(path) ? path : path.split('.');
@@ -140,13 +193,29 @@ const ApiPlan = () => {
 
   const onGetStarted = async (plan: any) => {
     if (plan) {
-      router.push({
-        pathname: `https://dash.nearblocks.io/login`,
-        query: {
-          id: plan?.id,
-          interval: !interval ? 'month' : 'year',
-        },
-      });
+      if (plan?.id) {
+        localStorage.setItem('stripe-plan-id', plan?.id as string);
+        localStorage.setItem(
+          'interval',
+          !interval ? 'month' : ('year' as string),
+        );
+        localStorage.setItem('subscribe-called', '');
+      }
+      if (token) {
+        if (plan?.id) {
+          subscribePlan();
+        } else {
+          router.replace('/user/overview');
+        }
+      } else {
+        router.push({
+          pathname: `/login`,
+          query: {
+            id: plan?.id,
+            interval: !interval ? 'month' : 'year',
+          },
+        });
+      }
     }
   };
 
diff --git a/apps/app/src/pages/campaign/[id].tsx b/apps/app/src/pages/campaign/[id].tsx
new file mode 100644
index 00000000..388e5d82
--- /dev/null
+++ b/apps/app/src/pages/campaign/[id].tsx
@@ -0,0 +1,141 @@
+import { env } from 'next-runtime-env';
+import { useRouter } from 'next/router';
+import Head from 'next/head';
+import withAuth from '@/stores/withAuth';
+import useAuth from '@/hooks/useAuth';
+import Layout from '@/components/Layouts';
+import UserLayout from '@/components/Layouts/UserLayout';
+import useStorage from '@/hooks/useStorage';
+import Meta from '@/components/Layouts/Meta';
+import CircularLoader from '@/components/skeleton/common/CircularLoader';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Stats from '@/components/Campaign/Advertiser/Stats';
+import CampaignStats from '@/components/Campaign/Publisher/Stats';
+import BannerAdForm from '@/components/Campaign/BannerAdForm';
+import TextAdForm from '@/components/Campaign/TextAdForm';
+import { ToastContainer } from 'react-toastify';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const EditCampaign = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' CAMPAIGN | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const router = useRouter();
+  const { id: campaignId } = router.query;
+
+  const { mutate } = useAuth('/campaign/subscription-info');
+
+  const {
+    data: campaignData,
+    mutate: campaignMutate,
+    loading,
+  } = useAuth(`/campaigns/${campaignId}`);
+
+  const [userRole] = useStorage('role');
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/campaign/${campaignId}`} />
+      </Head>
+      <ToastContainer />
+      <UserLayout title="Edit campaign type">
+        <>
+          <div>
+            {userRole === 'advertiser' ? (
+              <Stats campaignId={campaignId} />
+            ) : (
+              <CampaignStats campaignId={campaignId} />
+            )}
+          </div>
+          <div className={` mt-8`}>
+            {loading ? (
+              <div className="h-1/2 flex items-center justify-center py-48">
+                <CircularLoader />
+              </div>
+            ) : campaignData &&
+              (campaignData?.data?.title === 'Text slots' ||
+                campaignData?.data?.title === 'Placeholder Text Ad') ? (
+              <TextAdForm
+                campaignId={campaignId}
+                campaignData={campaignData}
+                campaignMutate={campaignMutate}
+                mutate={mutate}
+                loading={loading}
+              />
+            ) : (
+              <BannerAdForm
+                campaignId={campaignId}
+                campaignData={campaignData}
+                campaignMutate={campaignMutate}
+                mutate={mutate}
+                loading={loading}
+              />
+            )}
+          </div>
+        </>
+      </UserLayout>
+    </Layout>
+  );
+};
+export default withAuth(EditCampaign);
diff --git a/apps/app/src/pages/campaign/chart.tsx b/apps/app/src/pages/campaign/chart.tsx
new file mode 100644
index 00000000..691ad3ba
--- /dev/null
+++ b/apps/app/src/pages/campaign/chart.tsx
@@ -0,0 +1,153 @@
+import { env } from 'next-runtime-env';
+import React from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Layout from '@/components/Layouts';
+import UserLayout from '@/components/Layouts/UserLayout';
+import useAuth from '@/hooks/useAuth';
+import Stats from '@/components/Campaign/Advertiser/Stats';
+import CampaignStats from '@/components/Campaign/Publisher/Stats';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Meta from '@/components/Layouts/Meta';
+import withAuth from '@/stores/withAuth';
+import Chart from '@/components/Chart';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const ChartPage = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const router = useRouter();
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' CAMPAIGN | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const { id: campaignId } = router.query;
+  const { data: userData, loading: userDataLoading } = useAuth('/profile');
+  const user = userData?.data || null;
+
+  const userRole = user?.role[0]?.name;
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/campaign/chart`} />
+      </Head>
+      <UserLayout title="Chart">
+        {userDataLoading ? (
+          <>
+            <div>
+              <div className="flex-wrap md:flex-nowrap flex">
+                <div className="w-full bg-white dark:bg-black-600 mr-4 border soft-shadow rounded-xl px-8">
+                  <h1 className="text-xl mt-8 text-black">
+                    <Skeleton className="h-4" />
+                  </h1>
+                  <p className="mt-4 mb-8 text-3xl text-gray-500">
+                    <Skeleton className="h-4" />
+                  </p>
+                </div>
+                <div className="w-full bg-white dark:bg-black-200 mr-4 mt-2 md:mt-0 border soft-shadow rounded-xl px-8">
+                  <h1 className="text-xl mt-8 text-black">
+                    <Skeleton className="h-4" />
+                  </h1>
+                  <p className="mt-4 mb-8 text-3xl text-gray-500">
+                    <Skeleton className="h-4" />
+                  </p>
+                </div>
+                <div className="w-full bg-white  dark:bg-black-200 bordermt-2 md:mt-0 soft-shadow rounded-xl px-8">
+                  <h1 className="text-xl mt-8 text-black">
+                    <Skeleton className="h-4" />
+                  </h1>
+                  <p className="mt-4 mb-8 text-3xl text-gray-500">
+                    <Skeleton className="h-4" />
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="block lg:flex lg:space-x-2 mt-8">
+              <div className="w-full">
+                <Skeleton className="h-[500px] rounded-xl" />
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            {userRole === 'advertiser' ? (
+              <Stats campaignId={campaignId} isTextHide={true} />
+            ) : (
+              <CampaignStats campaignId={campaignId} isTextHide={true} />
+            )}
+            <div className={`md:flex lg:flex-row flex-col mt-8`}>
+              <div className="container mx-auto">
+                <div className="block bg-white  dark:bg-black-200 border soft-shadow rounded-xl overflow-hidden mb-10">
+                  <Chart campaignId={campaignId} />
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(ChartPage);
diff --git a/apps/app/src/pages/campaign/index.tsx b/apps/app/src/pages/campaign/index.tsx
new file mode 100644
index 00000000..50a6d4b1
--- /dev/null
+++ b/apps/app/src/pages/campaign/index.tsx
@@ -0,0 +1,125 @@
+import { env } from 'next-runtime-env';
+import React from 'react';
+import Head from 'next/head';
+import Stats from '@/components/Campaign/Advertiser/Stats';
+import CampaignStats from '@/components/Campaign/Publisher/Stats';
+import withAuth from '@/stores/withAuth';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Layout from '@/components/Layouts';
+import useStorage from '@/hooks/useStorage';
+import Meta from '@/components/Layouts/Meta';
+import useAuth from '@/hooks/useAuth';
+import Listing from '@/components/Campaign/Advertiser/Listing';
+import CampaignListing from '@/components/Campaign/Publisher/Listing';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const Campaign = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' CAMPAIGN | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const [userRole] = useStorage('role');
+
+  const { mutate: statsMutate } = useAuth('advertiser/stats');
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/campaign`} />
+      </Head>
+      <ToastContainer />
+      {userRole === 'advertiser' ? (
+        <UserLayout title="My Campaigns">
+          <div>
+            <Stats statsMutate={statsMutate} />
+          </div>
+          <div className="my-campaigns">
+            <div className="mt-8">
+              <div>
+                <Listing statsMutate={statsMutate} />
+              </div>
+            </div>
+          </div>
+        </UserLayout>
+      ) : (
+        <UserLayout title="Campaigns">
+          <div>
+            <CampaignStats />
+          </div>
+          <div className="campaigns">
+            <div className="mt-8">
+              <div>
+                <CampaignListing />
+              </div>
+            </div>
+          </div>
+        </UserLayout>
+      )}
+    </Layout>
+  );
+};
+
+export default withAuth(Campaign);
diff --git a/apps/app/src/pages/campaign/plans.tsx b/apps/app/src/pages/campaign/plans.tsx
new file mode 100644
index 00000000..613c7487
--- /dev/null
+++ b/apps/app/src/pages/campaign/plans.tsx
@@ -0,0 +1,89 @@
+import { env } from 'next-runtime-env';
+import React from 'react';
+import Head from 'next/head';
+import Layout from '@/components/Layouts';
+import UserLayout from '@/components/Layouts/UserLayout';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Meta from '@/components/Layouts/Meta';
+import withAuth from '@/stores/withAuth';
+import CampaignPlans from '@/components/Campaign/Plans';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const NewCampaign = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' CAMPAIGN | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/campaign/plans`} />
+      </Head>
+      <UserLayout title="Create new campaign type">
+        <CampaignPlans />
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(NewCampaign);
diff --git a/apps/app/src/pages/confirmemail.tsx b/apps/app/src/pages/confirmemail.tsx
new file mode 100644
index 00000000..dfd3e1c4
--- /dev/null
+++ b/apps/app/src/pages/confirmemail.tsx
@@ -0,0 +1,254 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import get from 'lodash/get';
+import Cookies from 'js-cookie';
+import Layout from '@/components/Layouts';
+import { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+import useStorage from '@/hooks/useStorage';
+import { GetServerSideProps } from 'next';
+import { fetcher } from '@/hooks/useFetch';
+
+const title = `Register | Nearblocks`;
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+  status: number | null;
+  message: string | null;
+  authToken: string | null;
+  authUserRole: string | null;
+  authUsername: string | null;
+}> = async (context) => {
+  let status = null;
+  let message = null;
+  let token = null;
+  let role = null;
+  let username = null;
+
+  const {
+    query: { email, code },
+  } = context;
+
+  try {
+    const res = await request.post(`/verify`, { email, code });
+    if (
+      res?.data?.meta?.token &&
+      res?.data?.data?.role &&
+      res?.data?.data?.username
+    ) {
+      token = res?.data?.meta?.token;
+      role = res?.data?.data?.role[0]?.name || null;
+      username = res?.data?.data?.username;
+    }
+    status = res?.status;
+  } catch (error: any) {
+    message = catchErrors(error);
+    status = error?.response?.status ?? null;
+  }
+
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+        status,
+        message,
+        authToken: token,
+        authUserRole: role,
+        authUsername: username,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts or blocks:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+        status,
+        message,
+        authToken: token,
+        authUserRole: role,
+        authUsername: username,
+      },
+    };
+  }
+};
+
+interface ConfirmEmailProps {
+  status: number;
+  authToken: string;
+  authUserRole: string;
+  authUsername: string;
+}
+
+const ConfirmEmail = ({
+  status,
+  authToken,
+  authUserRole,
+  authUsername,
+}: ConfirmEmailProps) => {
+  const router = useRouter();
+  const [, setToken] = useStorage('token');
+  const [, setRole] = useStorage('role');
+  const [, setUser] = useStorage('user');
+
+  const onLogin = () => router.push('/login');
+  const onResend = () => router.push('/resend');
+
+  const resetStripePlan = () => {
+    localStorage.setItem('stripe-plan-id', '');
+    localStorage.setItem('interval', '');
+    localStorage.setItem('subscribe-called', '');
+
+    return;
+  };
+
+  const subscribePlan = async () => {
+    try {
+      const stripePlanId = localStorage.getItem('stripe-plan-id');
+      const interval = localStorage.getItem('interval');
+
+      const res = await request.post(`advertiser/subscribe`, {
+        interval: interval === 'year' ? 'year' : 'month',
+        plan_id: stripePlanId,
+      });
+      localStorage.setItem('subscribe-called', 'true');
+
+      if (res?.data && res?.data['url ']) {
+        router.push(res?.data['url ']);
+        return;
+      }
+
+      if (res?.data && res?.data['message'] === 'upgraded') {
+        resetStripePlan();
+        router.push('/user/plan?status=upgraded');
+        return;
+      }
+
+      if (res?.data && res?.data['message'] === 'downgraded') {
+        resetStripePlan();
+        router.push('/user/plan?status=downgraded');
+        return;
+      }
+
+      resetStripePlan();
+      router.push('/user/plan');
+      return;
+    } catch (error) {
+      const statusCode = get(error, 'response.status') || null;
+
+      if (statusCode === 422) {
+        resetStripePlan();
+        router.push('/user/plan?status=exists');
+        return;
+      }
+      if (statusCode === 400) {
+        resetStripePlan();
+        router.push('/user/plan?status=invalid');
+        return;
+      }
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    if (authToken && authUserRole && authUsername) {
+      setToken(authToken);
+      setRole(authUserRole);
+      setUser(authUsername);
+      Cookies.set('token', authToken);
+      const stripePlanId = localStorage.getItem('stripe-plan-id');
+      const interval = localStorage.getItem('interval');
+      setTimeout(() => {
+        if (stripePlanId && interval) {
+          subscribePlan();
+        } else {
+          router.replace('/user/overview');
+        }
+      }, 3000);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta property="og:title" content={title} />
+        <meta property="twitter:title" content={title} />
+      </Head>
+      <section>
+        <div className="container mx-auto">
+          <div className="mx-auto px-5 align-middle max-w-[685px]">
+            {[200, 204].includes(status) && (
+              <div className="py-36">
+                <h1 className="text-3xl text-primary py-4 text-center">
+                  Confirm Your Email
+                </h1>
+                <div className="bg-blue-200/30 text-primary rounded-md px-5 py-5">
+                  <span className="font-bold">Congratulations!</span> Your
+                  account is succcessfully verfied. Enjoy your Nearblocks
+                  services
+                </div>
+              </div>
+            )}
+            {[422, 400].includes(status) && (
+              <div className="py-28">
+                <h1 className="text-3xl text-primary dark:text-green-250 py-4 text-center">
+                  Verification Failed
+                </h1>
+                <div className="bg-red-50 text-red-500 dark:bg-red-500/[0.10] text-sm rounded-md px-5 py-5">
+                  <span className="font-bold">Oops!</span> Invalid confirmation
+                  link. Please confirm you entered the correct URL or click on
+                  the button below to resend the confirmation link.
+                </div>
+
+                <div className="w-full text-right my-4 justify-between flex items-center">
+                  <a
+                    onClick={onLogin}
+                    className="underline text-xs text-gray-400 dark:text-neargray-200 cursor-pointer"
+                  >
+                    Back to sign in
+                  </a>
+                  <button
+                    onClick={onResend}
+                    type="button"
+                    className="text-sm text-white  text-center font-semibold w-56 py-3 hover:bg-green-400 bg-green-500 rounded"
+                  >
+                    Resend
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+ConfirmEmail.getLayout = (page: ReactElement) => (
+  <Layout
+    statsDetails={page?.props?.statsDetails}
+    latestBlocks={page?.props?.latestBlocks}
+  >
+    {page}
+  </Layout>
+);
+
+export default ConfirmEmail;
diff --git a/apps/app/src/pages/login.tsx b/apps/app/src/pages/login.tsx
new file mode 100644
index 00000000..5f5edef7
--- /dev/null
+++ b/apps/app/src/pages/login.tsx
@@ -0,0 +1,455 @@
+import * as Yup from 'yup';
+import { env } from 'next-runtime-env';
+import Head from 'next/head';
+import Link from 'next/link';
+import get from 'lodash/get';
+import { FormikValues, useFormik } from 'formik';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import React, { useState, useEffect, ReactElement, useRef } from 'react';
+import { useRouter } from 'next/router';
+/* import { useDisconnect, useAccount } from "wagmi"; */
+/* import { ConnectButton } from "@rainbow-me/rainbowkit"; */
+import Cookies from 'js-cookie';
+import { request } from '@/hooks/useAuth';
+import useStorage from '@/hooks/useStorage';
+import { catchErrors } from '@/utils/libs';
+import VisibilityOff from '@/components/Icons/VisibilityOff';
+import Visibility from '@/components/Icons/Visibility';
+import Layout from '@/components/Layouts';
+import { GetServerSideProps } from 'next';
+import { fetcher } from '@/hooks/useFetch';
+import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
+import { useTheme } from 'next-themes';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async (context) => {
+  const { req, res, query } = context;
+  const { id, interval } = query;
+  let token = req.cookies.token;
+
+  try {
+    // Redirection logic based on token and query parameters
+    if (token && (!id || !interval)) {
+      res.writeHead(302, {
+        Location: `/user/overview`,
+      });
+      res.end();
+      return {
+        props: {
+          statsDetails: null,
+          latestBlocks: null,
+        },
+      };
+    }
+
+    // Fetching data from APIs
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const title = `Login | NearBlocks`;
+
+const validationSchema = Yup.object().shape({
+  usernameOrEmail: Yup.string().required('Please enter username'),
+  password: Yup.string()
+    .required('Please enter  password')
+    .min(8, 'Password must be an 8 character'),
+});
+
+const Login = () => {
+  const router = useRouter();
+  /* const { isConnected } = useAccount(); */
+  /*   const brand = env('NEXT_PUBLIC_BRAND'); */
+  const { theme } = useTheme();
+  const siteKey = env('NEXT_PUBLIC_TURNSTILE_SITE_KEY');
+  const [showPassword, setShowPassword] = useState(false);
+  const [token, setToken] = useStorage('token');
+  const [, setRole] = useStorage('role');
+  const [, setUser] = useStorage('user');
+  const [errorMsg, setErrorMsg] = useState('');
+  const [updatePassMsg, setUpdatePassMsg] = useState('');
+  const [status, setStatus] = useState<any>(null);
+  const [tokens, setTokens] = useState<string>();
+  const turnstileRef = useRef<TurnstileInstance>(null);
+
+  // const { id, interval } = router.query;
+
+  // const resetStripePlan = () => {
+  //   localStorage.setItem('stripe-plan-id', '');
+  //   localStorage.setItem('interval', '');
+  //   localStorage.setItem('subscribe-called', '');
+
+  //   return;
+  // };
+
+  // const subscribePlan = async () => {
+  //   try {
+  //     const stripePlanId = localStorage.getItem('stripe-plan-id');
+  //     const interval = localStorage.getItem('interval');
+
+  //     const res = await request.post(`advertiser/subscribe`, {
+  //       interval: interval === 'year' ? 'year' : 'month',
+  //       plan_id: stripePlanId,
+  //     });
+  //     localStorage.setItem('subscribe-called', 'true');
+
+  //     if (res?.data && res?.data['url ']) {
+  //       await router.push(res?.data['url ']);
+  //       return;
+  //     }
+  //     if (res?.data && res?.data['message'] === 'upgraded') {
+  //       resetStripePlan();
+  //       router.push('/user/plan?status=upgraded');
+  //     }
+  //     if (res?.data && res?.data['message'] === 'downgraded') {
+  //       resetStripePlan();
+  //       router.push('/user/plan?status=downgraded');
+  //     }
+  //     resetStripePlan();
+  //     router.push('/user/plan');
+  //   } catch (error) {
+  //     const statusCode = get(error, 'response.status') || null;
+
+  //     if (statusCode === 422) {
+  //       resetStripePlan();
+  //       router.push('/user/plan?status=exists');
+  //     }
+  //     if (statusCode === 400) {
+  //       resetStripePlan();
+  //       router.push('/user/plan?status=invalid');
+  //     }
+  //   }
+  // };
+
+  /*  useEffect(() => {
+    if (!isConnected) {
+      router.replace("/");
+    }
+  }, [isConnected]); */
+
+  // useEffect(() => {
+  //   const { id, interval } = router.query;
+  //   if (id) {
+  //     localStorage.setItem('stripe-plan-id', id as string);
+  //     localStorage.setItem('interval', interval as string);
+  //     localStorage.setItem('subscribe-called', '');
+  //   }
+  // }, [router.query]);
+
+  useEffect(() => {
+    if (token) {
+      router.replace('/user/overview');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSubmit = async (values: FormikValues) => {
+    if (status != 'solved' || !tokens) {
+      // setStatus('error');
+      // return;
+    }
+    try {
+      const res = await request.post(`login`, {
+        username_or_email: values.usernameOrEmail,
+        password: values.password,
+      });
+
+      if (
+        res?.data?.meta?.token &&
+        res?.data?.data?.role &&
+        res?.data?.data?.username
+      ) {
+        setToken(res?.data?.meta?.token);
+        setRole(res?.data?.data?.role[0].name);
+        setUser(res?.data?.data?.username);
+        Cookies.set('token', res?.data?.meta?.token, { expires: 7 }); // Expires in 7 days
+      }
+      router.replace('/user/overview');
+    } catch (error) {
+      const message = catchErrors(error);
+      const statusCode = get(error, 'response.status') || null;
+      if (statusCode === 400) {
+        return setErrorMsg(message);
+      }
+      if (statusCode === 403) {
+        return setUpdatePassMsg(message);
+      }
+      if (!toast.isActive('login-error')) {
+        toast.error(message, {
+          toastId: 'login-error',
+        });
+      }
+    }
+  };
+
+  Cookies.get('token');
+
+  const formik = useFormik({
+    initialValues: {
+      usernameOrEmail: '',
+      password: '',
+      remember: false,
+    },
+    onSubmit,
+    validationSchema,
+  });
+
+  const togglePasswordVisibility = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta property="og:title" content={title} />
+        <meta property="twitter:title" content={title} />
+      </Head>
+      <ToastContainer />
+      <section>
+        <div className="container mx-auto py-20">
+          <div className="mx-auto px-5 align-middle max-w-[685px]">
+            <form method="post" onSubmit={formik.handleSubmit}>
+              <h1 className="text-3xl text-primary dark:text-green-250 py-2 font-semibold text-center">
+                Welcome back
+              </h1>
+              <span className="text-sm text-gray-400 py-2 font-thin text-center">
+                {/* Login to your account */}
+                <p className="text-gray-500 dark:text-white text-sm my-1 font-thin">
+                  Don&apos;t have an account?{' '}
+                  <span className="text-primary dark:text-green-250">
+                    <Link href="/register">
+                      <span className="font-semibold"> Sign up</span>
+                    </Link>
+                  </span>
+                </p>
+              </span>
+              {errorMsg && (
+                <p className="text-red-500 bg-red-500/20 px-3 py-3 rounded-md text-xs">
+                  {errorMsg}{' '}
+                  <Link href="/resend">
+                    <span className="text-primary dark:text-green-250 cursor-pointer">
+                      [re-sent]
+                    </span>
+                  </Link>
+                </p>
+              )}
+              {updatePassMsg && (
+                <p className="text-red-500 bg-red-500/20 px-3 py-3 rounded-md text-xs">
+                  {updatePassMsg}
+                </p>
+              )}
+              {status === 'error' && (
+                <p className="text-red-500 bg-red-500/20 px-3 py-3 rounded-md text-xs">
+                  Error! Invalid captcha response.
+                </p>
+              )}
+
+              <div className="py-2">
+                <p className="py-2 text-sm text-gray-500 dark:text-neargray-100">
+                  Username or Email
+                </p>
+                <input
+                  autoComplete="off"
+                  name="usernameOrEmail"
+                  value={formik.values.usernameOrEmail}
+                  onChange={formik.handleChange}
+                  required
+                  className="px-3 h-12 w-full bg-white text-black-300 dark:text-white dark:bg-black-600 dark:border-black-200 border border-{#E5E7EB} rounded-md focus:outline-blue dark:focus:outline-none dark:focus:ring-2 dark:focus:ring-gray-800 text-base"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      formik.handleSubmit();
+                    }
+                  }}
+                />
+                {formik.touched.usernameOrEmail &&
+                  formik.errors.usernameOrEmail && (
+                    <small className="text-red-500">
+                      {formik.errors.usernameOrEmail}
+                    </small>
+                  )}
+              </div>
+              <div className="py-2">
+                <div className="flex justify-between">
+                  <p className="py-2 text-sm text-gray-500 dark:text-neargray-100">
+                    Password
+                  </p>
+                  <Link href="/lostpassword">
+                    <span className="py-2 text-xs text-gray-500 dark:text-white font-thin hover:text-primary dark:hover:text-green-100">
+                      Forgot your password?
+                    </span>
+                  </Link>
+                </div>
+                <div className="relative w-full">
+                  <input
+                    autoComplete="off"
+                    type={showPassword ? 'text' : 'password'}
+                    name="password"
+                    value={formik.values.password}
+                    onChange={formik.handleChange}
+                    required
+                    className="px-3 h-12 w-full bg-white text-black-300 dark:text-white dark:bg-black-600 dark:border-black-200 border border-{#E5E7EB} rounded-md focus:outline-blue dark:focus:outline-none dark:focus:ring-2 dark:focus:ring-gray-800 text-base"
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        formik.handleSubmit();
+                      }
+                    }}
+                  />
+                  <button
+                    className="absolute top-0 right-0 h-full px-3"
+                    onClick={(e) => togglePasswordVisibility(e)}
+                  >
+                    {showPassword ? (
+                      <Visibility className="w-4 h-4" />
+                    ) : (
+                      <VisibilityOff className="w-4 h-4" />
+                    )}
+                  </button>
+                </div>
+                {formik.touched.password && formik.errors.password && (
+                  <small className="text-red-500">
+                    {formik.errors.password}
+                  </small>
+                )}
+              </div>
+              <div className="py-2">
+                <p className="text-sm text-gray-500 dark:text-white font-thin">
+                  <span>
+                    <input
+                      type="checkbox"
+                      value={formik.values.remember as any}
+                      onChange={(e) =>
+                        formik.setFieldValue('remember', e.target.checked)
+                      }
+                      className="mr-2"
+                    />
+                  </span>
+                  Remember & Auto Login
+                </p>
+              </div>
+              <div className="flex justify-center pt-4">
+                <Turnstile
+                  ref={turnstileRef}
+                  options={{ theme: theme as any }}
+                  siteKey={siteKey as string}
+                  onError={() => setStatus('error')}
+                  onExpire={() => setStatus('expired')}
+                  onSuccess={(token) => {
+                    setTokens(token);
+                    setStatus('solved');
+                  }}
+                  onWidgetLoad={(widgetId) =>
+                    console.log('Widget loaded', widgetId)
+                  }
+                />
+              </div>
+              <div className="w-full text-left my-5">
+                <button
+                  disabled={formik.isSubmitting}
+                  type="submit"
+                  className={`w-full text-sm focus:outline-none text-white text-center font-semibold py-3 hover:bg-green-400 bg-green-500 rounded ${
+                    status != 'solved' &&
+                    formik.isSubmitting &&
+                    'cursor-not-allowed bg-gray-400 hover:bg-gray-500'
+                  } `}
+                >
+                  Login
+                </button>
+              </div>
+            </form>
+            {/*    {!(brand === "near") && (
+              <div className="my-4">
+                <ConnectButton.Custom>
+                  {({ account, chain, openConnectModal, mounted }) => {
+                    return (
+                      <div
+                        {...(!mounted && {
+                          "aria-hidden": true,
+                          style: {
+                            opacity: 0,
+                            pointerEvents: "none",
+                            userSelect: "none",
+                            alignItems: "center",
+                          },
+                        })}
+                      >
+                        {(() => {
+                          if (!mounted || !account || !chain) {
+                            return (
+                              <>
+                                <div className="text-center relative">
+                                  <span className="inline-block bg-white px-2 relative z-10 text-sm text-gray-500 dark:text-white">
+                                    OR
+                                  </span>
+                                  <span className="absolute top-1/2 left-0 w-1/2 h-px bg-gray-200 dark:bg-black-200 transform -translate-y-1/2"></span>
+                                  <span className="absolute top-1/2 right-0 w-1/2 h-px bg-gray-200 dark:bg-black-200 transform -translate-y-1/2"></span>
+                                </div>
+                                <div className="my-4">
+                                  <div className="py-3 text-gray-700">
+                                    <div
+                                      className="block text-center  border-2 text-sm py-3 rounded w-full focus:outline-none text-primary font-semibold border-primary hover:bg-primary hover:text-white cursor-pointer"
+                                      onClick={openConnectModal}
+                                    >
+                                      &nbsp; {t("wallet.connectWallet")}
+                                    </div>
+                                  </div>
+                                </div>
+                              </>
+                            );
+                          }
+                        })()}
+                      </div>
+                    );
+                  }}
+                </ConnectButton.Custom>
+              </div>
+            )} */}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+Login.getLayout = (page: ReactElement) => (
+  <Layout
+    statsDetails={page?.props?.statsDetails}
+    latestBlocks={page?.props?.latestBlocks}
+  >
+    {page}
+  </Layout>
+);
+
+export default Login;
diff --git a/apps/app/src/pages/lostpassword.tsx b/apps/app/src/pages/lostpassword.tsx
new file mode 100644
index 00000000..feb1d7f5
--- /dev/null
+++ b/apps/app/src/pages/lostpassword.tsx
@@ -0,0 +1,205 @@
+import * as Yup from 'yup';
+import Head from 'next/head';
+import { FormikValues, useFormik } from 'formik';
+import { toast } from 'react-toastify';
+import React, { ReactElement, useState } from 'react';
+import { useRouter } from 'next/router';
+import Layout from '@/components/Layouts';
+import { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+import { GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+
+const title = 'Nearblocks';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const validationSchema = Yup.object().shape({
+  email: Yup.string()
+    .email('Please enter a valid email')
+    .required('Please enter email'),
+});
+
+const ForgotPassword = () => {
+  const router = useRouter();
+
+  const [success, setSuccess] = useState(false);
+
+  const onLogin = () => router.push('/login');
+  const onResend = () => router.push('/resend?type=RESET_PASSWORD');
+
+  const onSubmit = async (values: FormikValues) => {
+    try {
+      await request.post(`/forgot`, values);
+      setSuccess(true);
+    } catch (error: any) {
+      const errors = error?.response?.data?.error;
+      if (errors) {
+        if (!toast.isActive('forgot-pwd-error')) {
+          toast.error(errors, {
+            toastId: 'forgot-pwd-error',
+          });
+        }
+      } else {
+        const message = catchErrors(error);
+        if (!toast.isActive('forgot-pwd-error')) {
+          toast.error(message, {
+            toastId: 'forgot-pwd-error',
+          });
+        }
+      }
+    }
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+    },
+    onSubmit,
+    validationSchema,
+  });
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta property="og:title" content={title} />
+        <meta property="twitter:title" content={title} />
+      </Head>
+      <section>
+        <div className="container mx-auto py-20">
+          <div className="mx-auto px-5 align-middle max-w-[685px]">
+            <form method="post" onSubmit={formik.handleSubmit}>
+              <h1 className="text-3xl text-primary py-2 font-semibold">
+                Forgot your password?
+              </h1>
+              <p className="text-gray-500 text-xs my-2">
+                Enter your email address below and we&apos;ll get you back on
+                track.
+              </p>
+
+              {success && (
+                <div className="bg-primary-100 px-4 py-4 rounded-md mt-4">
+                  <h2 className="text-primary text-lg my-1 font-medium">
+                    You&apos;ve successfully requested a forgot password.
+                  </h2>
+                  <p className="text-sm text-primary my-2">
+                    If the email address belongs to a known account, a recovery
+                    password will be sent to you within the next few minutes.
+                  </p>
+                  <ul className="list-disc ml-4 pl-4">
+                    <li className="text-sm text-primary my-2">
+                      If you have yet to receive the &quot;Password
+                      Recovery&quot; email, please check your spam/junk email
+                      folders
+                    </li>
+                    <li className="text-sm text-primary my-2">
+                      Or please{' '}
+                      <a
+                        onClick={onResend}
+                        className="text-primary  font-semibold cursor-pointer"
+                      >
+                        resend
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              )}
+
+              <div className="py-2">
+                <p className="py-2 text-sm text-gray-500">Email Address</p>
+                <input
+                  name="email"
+                  autoComplete="off"
+                  value={formik.values.email}
+                  placeholder="Email address"
+                  onChange={formik.handleChange}
+                  className="border dark:border-black-200 dark:bg-black-300 px-3 w-full outline-primary rounded-md h-12"
+                />
+                {formik.touched.email && formik.errors.email && (
+                  <small className="text-red-500">{formik.errors.email}</small>
+                )}
+              </div>
+
+              <div className="w-full text-right my-4 justify-between flex items-center">
+                <a
+                  onClick={onLogin}
+                  className="underline text-xs text-gray-400 cursor-pointer"
+                >
+                  Back to sign in
+                </a>
+                <div>
+                  {success && (
+                    <button
+                      className="text-[13px] delay-300 duration-300 mx-1 hover:bg-gray-200 dark:hover:bg-black-200 font-semibold p-3 rounded"
+                      onClick={onResend}
+                    >
+                      Resend
+                    </button>
+                  )}
+                  {!success && (
+                    <button
+                      disabled={formik.isSubmitting}
+                      type="submit"
+                      onClick={() => formik.handleSubmit()}
+                      className={`text-sm  focus:outline-none text-white  text-center font-semibold p-3 bg-primary rounded ${
+                        formik.isSubmitting &&
+                        'cursor-not-allowed bg-primary-100'
+                      } `}
+                    >
+                      Reset Password
+                    </button>
+                  )}
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+ForgotPassword.getLayout = (page: ReactElement) => (
+  <Layout
+    statsDetails={page?.props?.statsDetails}
+    latestBlocks={page?.props?.latestBlocks}
+  >
+    {page}
+  </Layout>
+);
+
+export default ForgotPassword;
diff --git a/apps/app/src/pages/nft-token/[id]/index.tsx b/apps/app/src/pages/nft-token/[id]/index.tsx
index 4a14e92a..14d6981f 100644
--- a/apps/app/src/pages/nft-token/[id]/index.tsx
+++ b/apps/app/src/pages/nft-token/[id]/index.tsx
@@ -17,12 +17,21 @@ import { VmComponent } from '@/components/vm/VmComponent';
 import Comment from '@/components/skeleton/common/Comment';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useAuthStore } from '@/stores/auth';
+import { useBosLoaderInitializer } from '@/hooks/useBosLoaderInitializer';
+import dynamic from 'next/dynamic';
 
 const network = env('NEXT_PUBLIC_NETWORK_ID');
 const ogUrl = env('NEXT_PUBLIC_OG_URL');
 
 const tabs = ['transfers', 'holders', 'inventory', 'comments'];
 
+const VmInitializer = dynamic(
+  () => import('../../../components/vm/VmInitializer'),
+  {
+    ssr: false,
+  },
+);
+
 export const getServerSideProps: GetServerSideProps<{
   tokenDetails: any;
   transfersDetails: any;
@@ -157,6 +166,7 @@ const NFToken = ({
   error,
   tab,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  useBosLoaderInitializer();
   const router = useRouter();
   const { id } = router.query;
   const [tabIndex, setTabIndex] = useState(0);
@@ -235,6 +245,7 @@ const NFToken = ({
         <meta name="twitter:image:src" content={thumbnail} />
         <link rel="canonical" href={`${appUrl}/nft-token/${id}`} />
       </Head>
+      <VmInitializer />
       <div className="relative container mx-auto px-3">
         <Overview
           token={token}
diff --git a/apps/app/src/pages/plans/index.tsx b/apps/app/src/pages/plans/index.tsx
new file mode 100644
index 00000000..888ad7cf
--- /dev/null
+++ b/apps/app/src/pages/plans/index.tsx
@@ -0,0 +1,90 @@
+import { env } from 'next-runtime-env';
+import Head from 'next/head';
+import withAuth from '@/stores/withAuth';
+import Layout from '@/components/Layouts';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import PlanListing from '@/components/Plans/Listing';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const Plans = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' CAMPAIGN | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/plans`} />
+      </Head>
+      <UserLayout title="Campaign Plans">
+        <div className="my-campaigns">
+          <div className="">
+            <PlanListing />
+          </div>
+        </div>
+      </UserLayout>
+    </Layout>
+  );
+};
+export default withAuth(Plans);
diff --git a/apps/app/src/pages/publisher/adsubscriptions.tsx b/apps/app/src/pages/publisher/adsubscriptions.tsx
new file mode 100644
index 00000000..dbfcd0c1
--- /dev/null
+++ b/apps/app/src/pages/publisher/adsubscriptions.tsx
@@ -0,0 +1,287 @@
+import { env } from 'next-runtime-env';
+import dayjs from 'dayjs';
+import Head from 'next/head';
+import get from 'lodash/get';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import React, { useEffect, useState } from 'react';
+import { Tooltip } from '@reach/tooltip';
+import useAuth from '@/hooks/useAuth';
+import withAuth from '@/stores/withAuth';
+import Layout from '@/components/Layouts';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import Plan from '@/components/Icons/Plan';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+import Pagination, { paginationQueue } from '@/components/Dashboard/Pagination';
+import useStorage from '@/hooks/useStorage';
+import SubscriptionStats from '@/components/SubscriptionStats';
+import { dollarFormat } from '@/utils/libs';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+interface QueueItem {
+  id: string;
+  value: string;
+}
+
+const AdSubscriptions = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' API | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const [role] = useStorage('role');
+  const apiUrl =
+    role === 'publisher' ? '/publisher/campaign-subscriptions?' : '';
+  const [url, setUrl] = useState(apiUrl);
+  const [previousPageParam, setPreviousPageParam] = useState<QueueItem[]>([]);
+  const [nextPageParams, setNextPageParams] = useState<{}>();
+
+  const { enqueue, dequeue, size } = paginationQueue(
+    previousPageParam,
+    setPreviousPageParam,
+  );
+
+  const { data, loading, error, mutate } = useAuth(url);
+
+  const subscriptions = get(data, 'data') || null;
+
+  useEffect(() => {
+    if (subscriptions && subscriptions?.length > 0 && data?.has_more) {
+      setNextPageParams({
+        startingAfter: subscriptions[subscriptions?.length - 1]?.id,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [subscriptions]);
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/publisher/adsubscriptions`} />
+      </Head>
+      <ToastContainer />
+      <UserLayout title="Campaign Subscriptions">
+        <SubscriptionStats />
+        <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit mb-4 mt-8">
+          <div className="px-5 py-5">
+            <Pagination
+              isTopPagination={true}
+              apiUrl={apiUrl}
+              setUrl={setUrl}
+              enqueue={enqueue}
+              dequeue={dequeue}
+              size={size()}
+              nextPageParams={nextPageParams}
+              setPreviousPageParam={setPreviousPageParam}
+              mutate={mutate}
+            />
+            <p className="text-black dark:text-neargray-10">
+              Campaign Subscriptions
+            </p>
+            <p className="text-sm text-gray-400 dark:text-neargray-10 mt-2">
+              List all campaign subscriptions
+            </p>
+          </div>
+          <div className="flex border-b dark:border-black-200">
+            <div className="overflow-x-auto w-full">
+              <table className="w-full divide-y border-t dark:border-black-200 dark:divide-black-200">
+                <thead className="bg-gray-100 dark:bg-black-600 dark:text-neargray-10">
+                  <tr>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      USER
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      PLAN
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      PRICE
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      START DATE
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      END DATE
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      STATUS
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-black-600 divide-y divide-gray-200">
+                  {(loading || error) &&
+                    [...Array(5)].map((_, i) => (
+                      <tr key={i} className="hover:bg-blue-900/5 h-[53px]">
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4 " />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4 " />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                      </tr>
+                    ))}
+                  {!loading && subscriptions?.length === 0 && (
+                    <tr className="h-[53px]">
+                      <td colSpan={100} className="text-gray-400 text-xs">
+                        <div className="w-full bg-white dark:bg-black-200 soft-shadow h-fit">
+                          <div className="text-center py-28">
+                            <div className="mb-4 flex justify-center">
+                              <span className="inline-block border border-yellow-600 border-opacity-25 bg-opacity-10 bg-yellow-300 text-yellow-500 rounded-full p-4">
+                                <Plan />
+                              </span>
+                            </div>
+                            <h3 className="h-5 font-bold text-lg text-black dark:text-neargray-10">
+                              Campaign Subscriptions Empty
+                            </h3>
+                            <p className="mb-0 py-4 font-bold text-sm text-gray-500 dark:text-neargray-10">
+                              No Campaign Subscriptions Found
+                            </p>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+
+                  {subscriptions &&
+                    subscriptions?.map((key: any) => (
+                      <tr key={key.id} className="hover:bg-blue-900/5">
+                        <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:text-neargray-10 align-top max-w-52 overflow-hidden text-ellipsis">
+                          <Tooltip
+                            label={key?.user_email}
+                            className="absolute h-auto max-w-xs bg-black dark:bg-black-200 dark:text-neargray-10 bg-opacity-90 z-10 text-white text-xs p-2 break-words"
+                          >
+                            <span>{key?.user_email}</span>
+                          </Tooltip>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-xs text-primary align-top">
+                          <div className="flex">
+                            <p className="mr-2 text-black dark:text-neargray-10">
+                              {key?.campaign_plan_title}
+                            </p>
+                          </div>
+                        </td>
+                        {key?.subscription_type === 'monthly' ? (
+                          <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                            <span className="text-xs">
+                              ${dollarFormat((key?.price).toString())}
+                              /mo
+                            </span>
+                          </td>
+                        ) : (
+                          <td className="px-5 py-4 whitespace-nowrap text-sm ">
+                            <span className="text-xs">
+                              ${dollarFormat((key?.price).toString())}/yr
+                            </span>
+                          </td>
+                        )}
+                        <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:text-neargray-10 align-top">
+                          {dayjs(key.start_date).format('YYYY-MM-DD')}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:text-neargray-10 align-top">
+                          {dayjs(key.end_date).format('YYYY-MM-DD')}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:text-neargray-10 align-top">
+                          {key.status}
+                        </td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(AdSubscriptions);
diff --git a/apps/app/src/pages/publisher/apisubscriptions.tsx b/apps/app/src/pages/publisher/apisubscriptions.tsx
new file mode 100644
index 00000000..5b9344b4
--- /dev/null
+++ b/apps/app/src/pages/publisher/apisubscriptions.tsx
@@ -0,0 +1,348 @@
+import { env } from 'next-runtime-env';
+import dayjs from 'dayjs';
+import Head from 'next/head';
+import get from 'lodash/get';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import React, { useEffect, useState } from 'react';
+import { Tooltip } from '@reach/tooltip';
+import useAuth from '@/hooks/useAuth';
+import withAuth from '@/stores/withAuth';
+import Layout from '@/components/Layouts';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import Plan from '@/components/Icons/Plan';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+import Pagination, { paginationQueue } from '@/components/Dashboard/Pagination';
+import useStorage from '@/hooks/useStorage';
+import { localFormat } from '@/utils/libs';
+import SubscriptionStats from '@/components/SubscriptionStats';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+interface QueueItem {
+  id: string;
+  value: string;
+}
+
+const APISubscriptions = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' API | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const [role] = useStorage('role');
+  const apiUrl = role === 'publisher' ? '/publisher/api-subscriptions?' : '';
+  const [url, setUrl] = useState(apiUrl);
+  const [previousPageParam, setPreviousPageParam] = useState<QueueItem[]>([]);
+  const [nextPageParams, setNextPageParams] = useState<{}>();
+
+  const { enqueue, dequeue, size } = paginationQueue(
+    previousPageParam,
+    setPreviousPageParam,
+  );
+
+  const { data, loading, error, mutate } = useAuth(url);
+
+  const subscriptions = get(data, 'data') || null;
+
+  useEffect(() => {
+    if (subscriptions && subscriptions?.length > 0 && data?.has_more) {
+      setNextPageParams({
+        startingAfter: subscriptions[subscriptions?.length - 1]?.id,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [subscriptions]);
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/publisher/apisubscriptions`} />
+      </Head>
+      <ToastContainer />
+      <UserLayout title="API Subscriptions">
+        <SubscriptionStats type="api" />
+        <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit mb-4 mt-8">
+          <div className="px-5 py-5">
+            <Pagination
+              isTopPagination={true}
+              apiUrl={apiUrl}
+              setUrl={setUrl}
+              enqueue={enqueue}
+              dequeue={dequeue}
+              size={size()}
+              nextPageParams={nextPageParams}
+              setPreviousPageParam={setPreviousPageParam}
+              mutate={mutate}
+            />
+            <p className="text-black dark:text-neargray-10">
+              API Subscriptions
+            </p>
+            <p className="text-sm text-gray-400 dark:text-neargray-10 mt-2">
+              List all api Subscriptions
+            </p>
+          </div>
+          <div className="flex border-b dark:border-black-200">
+            <div className="overflow-x-auto w-full">
+              <table className="w-full divide-y border-t dark:border-black-200 dark:divide-black-200">
+                <thead className="bg-gray-100 dark:bg-black-600 dark:text-neargray-10">
+                  <tr>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      USER
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      PLAN
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      START DATE
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      END DATE
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      STATUS
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-center text-xs w-6 font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Requests Remaining (24H)
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-center text-xs w-6 font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Requests Remaining (Monthly)
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-black-600 divide-y divide-gray-200">
+                  {(loading || error) &&
+                    [...Array(5)].map((_, i) => (
+                      <tr key={i} className="hover:bg-blue-900/5 h-[53px]">
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4 " />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                      </tr>
+                    ))}
+                  {!loading && subscriptions?.length === 0 && (
+                    <tr className="h-[53px]">
+                      <td colSpan={100} className="text-gray-400 text-xs">
+                        <div className="w-full bg-white dark:bg-black-200 soft-shadow h-fit">
+                          <div className="text-center py-28">
+                            <div className="mb-4 flex justify-center">
+                              <span className="inline-block border border-yellow-600 border-opacity-25 bg-opacity-10 bg-yellow-300 text-yellow-500 rounded-full p-4">
+                                <Plan />
+                              </span>
+                            </div>
+                            <h3 className="h-5 font-bold text-lg text-black dark:text-neargray-10">
+                              API Keys Empty
+                            </h3>
+                            <p className="mb-0 py-4 font-bold text-sm text-gray-500 dark:text-neargray-10">
+                              No API Key Found
+                            </p>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+
+                  {subscriptions &&
+                    subscriptions?.map((key: any) => {
+                      const dailyPercentage =
+                        key.dayLimit > 0
+                          ? (key.consumedDaily / key.dayLimit) * 100
+                          : 0;
+                      const monthlyPercentage =
+                        key.monthLimit > 0
+                          ? (key.consumed / key.monthLimit) * 100
+                          : 0;
+                      return (
+                        <tr key={key.id} className="hover:bg-blue-900/5">
+                          <td className="px-6 py-4 whitespace-nowrap text-xs text-black pt-6 dark:text-neargray-10 align-top max-w-52 overflow-hidden text-ellipsis">
+                            <Tooltip
+                              label={key?.user_email}
+                              className="absolute h-auto max-w-xs bg-black dark:bg-black-200 dark:text-neargray-10 bg-opacity-90 z-10 text-white text-xs p-2 break-words"
+                            >
+                              <span>{key?.user_email}</span>
+                            </Tooltip>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-xs pt-6 text-primary align-top">
+                            <div className="flex">
+                              <p className="mr-2 text-black dark:text-neargray-10">
+                                {key?.campaign_plan_title}
+                              </p>
+                            </div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-xs pt-6 text-black dark:text-neargray-10 align-top">
+                            {dayjs(key.start_date).format('YYYY-MM-DD')}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-xs pt-6 text-black dark:text-neargray-10 align-top">
+                            {dayjs(key.end_date).format('YYYY-MM-DD')}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-xs pt-6 text-black dark:text-neargray-10 align-top">
+                            {key.status}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap flex items-center text-xs text-gray-500 dark:text-neargray-10 align-top">
+                            <div className="flex flex-col items-center px-2 hover:bg-primary-100 dark:hover:bg-black-200">
+                              <>
+                                <p className="text-sm font-bold text-black dark:text-neargray-10">
+                                  {localFormat(key?.remainingDaily)}
+                                </p>
+                                <div>
+                                  <div className="w-full bg-gray-200 dark:bg-neargray-50 h-2 rounded-full mt-2">
+                                    <div
+                                      className="bg-green-500 dark:bg-green-250 h-2 rounded-full"
+                                      style={{
+                                        width: `${dailyPercentage}%`,
+                                      }}
+                                    ></div>
+                                  </div>
+                                  <div className="flex flex-col sm:flex-row gap-y-2 sm:gap-y-0 justify-between mt-1">
+                                    <p className="text-xs">
+                                      {localFormat(String(key?.consumedDaily))}{' '}
+                                      / {localFormat(key?.dayLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-400 dark:text-neargray-50">
+                                      Daily (24H) Quota
+                                    </p>
+                                  </div>
+                                </div>
+                              </>
+                            </div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-xs text-gray-500 dark:text-neargray-10 align-top">
+                            <div className="flex flex-col items-center px-2 hover:bg-primary-100 dark:hover:bg-black-200">
+                              <>
+                                <p className="text-sm font-bold text-black dark:text-neargray-10">
+                                  {localFormat(key?.remainingMonthly)}
+                                </p>
+                                <div>
+                                  {/* Progress bar for daily usage */}
+                                  <div className="w-full bg-gray-200 dark:bg-neargray-50 h-2 rounded-full mt-2">
+                                    <div
+                                      className="bg-green-500 dark:bg-green-250 h-2 rounded-full"
+                                      style={{
+                                        width: `${monthlyPercentage}%`,
+                                      }}
+                                    ></div>
+                                  </div>
+                                  <div className="flex flex-col sm:flex-row gap-y-2 sm:gap-y-0 justify-between mt-1">
+                                    <p className="text-xs">
+                                      {localFormat(String(key?.consumed))} /{' '}
+                                      {localFormat(key?.monthLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-400 dark:text-neargray-50">
+                                      Monthly Quota
+                                    </p>
+                                  </div>
+                                </div>
+                              </>
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(APISubscriptions);
diff --git a/apps/app/src/pages/publisher/apiusage.tsx b/apps/app/src/pages/publisher/apiusage.tsx
new file mode 100644
index 00000000..d8a82de5
--- /dev/null
+++ b/apps/app/src/pages/publisher/apiusage.tsx
@@ -0,0 +1,102 @@
+import { env } from 'next-runtime-env';
+import React from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+import Layout from '@/components/Layouts';
+import withAuth from '@/stores/withAuth';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Chart from '@/components/ApiUsage/Chart';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const ApiUsage = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const router = useRouter();
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' API | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const { id: keyId } = router.query;
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/publisher/apiusage`} />
+      </Head>
+      <UserLayout title="Api Key Usage">
+        <>
+          <div className={`md:flex lg:flex-row flex-col mt-28`}>
+            <div className="container mx-auto">
+              <div className="block bg-white dark:bg-black-600 border soft-shadow rounded-xl overflow-hidden mb-10">
+                <Chart keyId={keyId} />
+              </div>
+            </div>
+          </div>
+        </>
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(ApiUsage);
diff --git a/apps/app/src/pages/publisher/keys.tsx b/apps/app/src/pages/publisher/keys.tsx
new file mode 100644
index 00000000..b7316211
--- /dev/null
+++ b/apps/app/src/pages/publisher/keys.tsx
@@ -0,0 +1,315 @@
+import { env } from 'next-runtime-env';
+import dayjs from 'dayjs';
+import Head from 'next/head';
+import get from 'lodash/get';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import React, { useEffect, useState } from 'react';
+import { Tooltip } from '@reach/tooltip';
+import Link from 'next/link';
+import useAuth from '@/hooks/useAuth';
+import withAuth from '@/stores/withAuth';
+import Layout from '@/components/Layouts';
+import CopyIcon from '@/components/Icons/CopyIcon';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import Plan from '@/components/Icons/Plan';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+import Pagination, { paginationQueue } from '@/components/Dashboard/Pagination';
+import useStorage from '@/hooks/useStorage';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+interface ApiKey {
+  id: string;
+  name: string;
+  token: string;
+  created_at: string;
+  usage: string;
+  user: {
+    email: string;
+    username: string;
+  };
+}
+
+interface QueueItem {
+  id: string;
+  value: string;
+}
+
+const APIKeys = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' API | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+  const [role] = useStorage('role');
+
+  const apiUrl = role === 'publisher' ? '/publisher/list-all-keys?' : '';
+  const [url, setUrl] = useState(apiUrl);
+
+  const [previousPageParam, setPreviousPageParam] = useState<QueueItem[]>([]);
+
+  const [nextPageParams, setNextPageParams] = useState<{}>();
+
+  const { enqueue, dequeue, size } = paginationQueue(
+    previousPageParam,
+    setPreviousPageParam,
+  );
+
+  const { data, loading, error, mutate } = useAuth(url);
+
+  const keys = get(data, 'keys') || null;
+
+  useEffect(() => {
+    if (keys && keys?.data.length > 0 && data?.has_more) {
+      setNextPageParams({
+        startingAfter: keys[keys?.data.length - 1]?.id,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keys]);
+
+  const onCopy = async (key: ApiKey) => {
+    await navigator.clipboard.writeText(key?.token);
+    if (!toast.isActive('copy-key')) {
+      toast.success('Copied!', {
+        toastId: 'copy-key',
+      });
+    }
+  };
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/publisher/keys`} />
+      </Head>
+      <ToastContainer />
+      <UserLayout title="API Keys">
+        <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit mb-4">
+          <div className="px-5 py-5">
+            <Pagination
+              isTopPagination={true}
+              apiUrl={apiUrl}
+              setUrl={setUrl}
+              enqueue={enqueue}
+              dequeue={dequeue}
+              size={size()}
+              nextPageParams={nextPageParams}
+              setPreviousPageParam={setPreviousPageParam}
+              mutate={mutate}
+            />
+            <p className="text-black dark:text-neargray-10">API Keys</p>
+            <p className="text-sm text-gray-400 dark:text-neargray-10 mt-2">
+              {role === 'publisher'
+                ? `List all api keys`
+                : `For developers interested in building applications using our API
+              Service, please create an API-Key Token usable for all API
+              requests.`}
+            </p>
+          </div>
+          <div className="flex border-b dark:border-black-200">
+            <div className="overflow-x-auto w-full">
+              <table className="w-full divide-y border-t dark:border-black-200 dark:divide-black-200">
+                <thead className="bg-gray-100 dark:bg-black-600 dark:text-neargray-10">
+                  <tr>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      APP NAME
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      USER
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      API KEY TOKEN
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Usage (Monthly)
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Action
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-black-600 divide-y divide-gray-200">
+                  {(loading || error) &&
+                    [...Array(5)].map((_, i) => (
+                      <tr key={i} className="hover:bg-blue-900/5 h-[53px]">
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4 " />
+                          <Skeleton className="h-4 w-40 mt-2" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                      </tr>
+                    ))}
+                  {!loading && keys?.data.length === 0 && (
+                    <tr className="h-[53px]">
+                      <td colSpan={100} className="text-gray-400 text-xs">
+                        <div className="w-full bg-white dark:bg-black-200 soft-shadow h-fit">
+                          <div className="text-center py-28">
+                            <div className="mb-4 flex justify-center">
+                              <span className="inline-block border border-yellow-600 border-opacity-25 bg-opacity-10 bg-yellow-300 text-yellow-500 rounded-full p-4">
+                                <Plan />
+                              </span>
+                            </div>
+                            <h3 className="h-5 font-bold text-lg text-black dark:text-neargray-10">
+                              API Keys Empty
+                            </h3>
+                            <p className="mb-0 py-4 font-bold text-sm text-gray-500 dark:text-neargray-10">
+                              No API Key Found
+                            </p>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+
+                  {keys?.data.map((key: ApiKey) => (
+                    <tr key={key.id} className="hover:bg-blue-900/5">
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:text-neargray-10 align-top max-w-52 overflow-hidden text-ellipsis">
+                        <Tooltip
+                          label={key?.name}
+                          className="absolute h-auto max-w-xs bg-black dark:bg-black-200 dark:text-neargray-10 bg-opacity-90 z-10 text-white text-xs p-2 break-words"
+                        >
+                          <span>{key?.name}</span>
+                        </Tooltip>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black pt-6 dark:text-neargray-10 align-top max-w-52 overflow-hidden text-ellipsis">
+                        <Tooltip
+                          label={key?.user?.username}
+                          className="absolute h-auto max-w-xs bg-black dark:bg-black-200 dark:text-neargray-10 bg-opacity-90 z-10 text-white text-xs p-2 break-words"
+                        >
+                          <span>{key?.user?.email}</span>
+                        </Tooltip>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-primary align-top">
+                        <div className="flex">
+                          <p className="mr-2 text-black dark:text-neargray-10">
+                            {key?.token}
+                          </p>
+                          <button
+                            type="button"
+                            onClick={() => onCopy(key)}
+                            className="bg-green-500 dark:bg-black-200 bg-opacity-10 hover:bg-opacity-100 group rounded-full  p-1 w-5 h-5"
+                          >
+                            <CopyIcon className="fill-current -z-50 text-green-500 dark:text-green-250 group-hover:text-white h-3 w-3" />
+                          </button>
+                        </div>
+                        <p className="text-[10px] text-gray-400 ">
+                          Added on {dayjs(key.created_at).format('YYYY-MM-DD')}
+                        </p>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:text-neargray-10 align-top">
+                        {key.usage}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap flex  items-center text-xs text-gray-500 dark:text-neargray-10 align-top">
+                        <div className="flex items-center border border-green-500 dark:border-green-250 rounded-md px-2 py-1 hover:bg-primary-100 dark:hover:bg-black-200">
+                          <Link
+                            passHref
+                            className="flex items-center"
+                            href={{
+                              pathname: '/publisher/apiusage',
+                              query: { id: key?.id },
+                            }}
+                          >
+                            <p className="text-green-500 dark:text-neargray-10 cursor-pointer">
+                              Stats
+                            </p>
+                          </Link>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(APIKeys);
diff --git a/apps/app/src/pages/register.tsx b/apps/app/src/pages/register.tsx
new file mode 100644
index 00000000..2a67078d
--- /dev/null
+++ b/apps/app/src/pages/register.tsx
@@ -0,0 +1,404 @@
+import * as Yup from 'yup';
+import Head from 'next/head';
+import Link from 'next/link';
+import { FormikValues, useFormik } from 'formik';
+import { toast, ToastContainer } from 'react-toastify';
+import React, { ReactElement, useState } from 'react';
+import { useRouter } from 'next/router';
+import Layout from '@/components/Layouts';
+import { request } from '@/hooks/useAuth';
+import { catchErrors, removeProtocol } from '@/utils/libs';
+import { GetServerSideProps } from 'next';
+import { fetcher } from '@/hooks/useFetch';
+import Visibility from '@/components/Icons/Visibility';
+import VisibilityOff from '@/components/Icons/VisibilityOff';
+import { appUrl } from '@/utils/config';
+import 'react-toastify/dist/ReactToastify.css';
+
+const title = `Register | Nearblocks`;
+
+const validationSchema = Yup.object().shape({
+  username: Yup.string()
+    .min(5, 'Username must be 5 character')
+    .required('Please enter username'),
+  email: Yup.string()
+    .email('Please enter a valid email')
+    .required('Please enter email'),
+  email_confirmation: Yup.string()
+    .oneOf([Yup.ref('email'), null], 'Your email do not match')
+    .required('Please enter  email confirmation'),
+  password: Yup.string()
+    .min(8, 'Password must be an 8 character')
+    .required('Please enter  password'),
+  password_confirmation: Yup.string()
+    .oneOf([Yup.ref('password'), null], 'Your passwords do not match')
+    .required('Please enter password confirmation'),
+  terms_conditions: Yup.bool().oneOf(
+    [true],
+    'Please accept our Terms and Conditions',
+  ),
+});
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async (context) => {
+  const { req, res, query } = context;
+  const { id, interval } = query;
+  let token = req.cookies.token;
+
+  try {
+    // Redirection logic based on token and query parameters
+    if (token) {
+      if (id && interval) {
+        res.writeHead(302, {
+          Location: `/user/overview?id=${id}&interval=${interval}`,
+        });
+      } else {
+        res.writeHead(302, {
+          Location: `/user/overview`,
+        });
+      }
+      res.end();
+      return {
+        props: {
+          statsDetails: null,
+          latestBlocks: null,
+        },
+      };
+    }
+
+    // Fetching data from APIs
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const Register = () => {
+  const router = useRouter();
+  const [verify, setverify] = useState(false);
+  const [showPasswords, setShowPasswords] = useState<{
+    [key: string]: boolean;
+  }>({
+    password1: false,
+    password2: false,
+  });
+
+  const onSubmit = async (values: FormikValues) => {
+    try {
+      await request.post(`/register`, values);
+      setverify(true);
+    } catch (error: any) {
+      const errors = error?.response?.data?.error;
+      if (errors) {
+        if (!toast.isActive('register-error')) {
+          toast.error(errors, {
+            toastId: 'register-error',
+          });
+        }
+      } else {
+        const message = catchErrors(error);
+        if (!toast.isActive('register-error')) {
+          toast.error(message, {
+            toastId: 'register-error',
+          });
+        }
+      }
+    }
+  };
+
+  const onResend = () => router.push('/resend');
+
+  const togglePasswordVisibility = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    input: string,
+  ) => {
+    e.preventDefault();
+    setShowPasswords((prevState) => ({
+      ...prevState,
+      [input]: !prevState[input],
+    }));
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      username: '',
+      email: '',
+      email_confirmation: '',
+      password: '',
+      password_confirmation: '',
+      terms_conditions: false,
+    },
+    onSubmit,
+    validationSchema,
+  });
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta property="og:title" content={title} />
+        <meta property="twitter:title" content={title} />
+      </Head>
+      <ToastContainer />
+      <section>
+        <div className="container mx-auto py-20">
+          <div className="mx-auto px-5 align-middle max-w-[685px]">
+            {!verify ? (
+              <form method="post" onSubmit={formik.handleSubmit}>
+                <h1 className="text-3xl text-primary dark:text-green-250 py-2 font-semibold">
+                  Register a new account
+                </h1>
+                <p className="text-sm text-gray-500 dark:text-neargray-100 py-2 font-thin">
+                  Fill out the form to get started.
+                </p>
+                <div className="py-2">
+                  <p className="py-2 text-sm text-gray-500 dark:text-neargray-100">
+                    Username
+                  </p>
+                  <input
+                    autoComplete="off"
+                    name="username"
+                    value={formik.values.username}
+                    onChange={formik.handleChange}
+                    className="border text-black-300 dark:text-white dark:border-black-200 dark:bg-black-300 px-3 w-full focus:outline-blue rounded-md h-12 dark:focus:outline-none dark:focus:ring-2 dark:focus:ring-gray-800"
+                  />
+                  {formik.touched.username && formik.errors.username && (
+                    <small className="text-red-500">
+                      {formik.errors.username}
+                    </small>
+                  )}
+                </div>
+                <div className="py-2">
+                  <p className="py-2 text-sm text-gray-500 dark:text-neargray-100">
+                    Email Address
+                  </p>
+                  <input
+                    name="email"
+                    value={formik.values.email}
+                    onChange={formik.handleChange}
+                    className="border text-black-300 dark:text-white dark:border-black-200 dark:bg-black-300 px-3 w-full focus:outline-blue dark:focus:outline-none dark:focus:ring-2 dark:focus:ring-gray-800 rounded-md h-12"
+                  />
+                  {formik.touched.email && formik.errors.email && (
+                    <small className="text-red-500">
+                      {formik.errors.email}
+                    </small>
+                  )}
+                </div>
+                <div className="py-2">
+                  <p className="py-2 text-sm text-gray-500 dark:text-neargray-100">
+                    Confirm Email Address
+                  </p>
+                  <input
+                    autoComplete="off"
+                    onPaste={(e) => {
+                      e.preventDefault();
+                      return false;
+                    }}
+                    name="email_confirmation"
+                    value={formik.values.email_confirmation}
+                    onChange={formik.handleChange}
+                    className="border text-black-300 dark:text-white dark:border-black-200 dark:bg-black-300 px-3 w-full focus:outline-blue dark:focus:outline-none dark:focus:ring-2 dark:focus:ring-gray-800 rounded-md h-12"
+                  />
+                  {formik.touched.email_confirmation &&
+                    formik.errors.email_confirmation && (
+                      <small className="text-red-500">
+                        {formik.errors.email_confirmation}
+                      </small>
+                    )}
+                </div>
+                <div className="py-2 flex">
+                  <div className="w-full mr-1">
+                    <p className="py-2 text-sm text-gray-500 dark:text-neargray-100">
+                      Password
+                    </p>
+                    <div className="relative w-full">
+                      <input
+                        type={showPasswords.password1 ? 'text' : 'password'}
+                        name="password"
+                        value={formik.values.password}
+                        onChange={formik.handleChange}
+                        className="border text-black-300 dark:text-white dark:border-black-200 dark:bg-black-300 px-3 w-full focus:outline-blue dark:focus:outline-none dark:focus:ring-2 dark:focus:ring-gray-800 rounded-md h-12"
+                      />
+                      <button
+                        className="absolute top-0 right-0 h-full px-3"
+                        onClick={(e) =>
+                          togglePasswordVisibility(e, 'password1')
+                        }
+                      >
+                        {showPasswords.password1 ? (
+                          <Visibility className="w-4 h-4" />
+                        ) : (
+                          <VisibilityOff className="w-4 h-4" />
+                        )}
+                      </button>
+                    </div>
+                    {formik.touched.password && formik.errors.password && (
+                      <small className="text-red-500">
+                        {formik.errors.password}
+                      </small>
+                    )}
+                  </div>
+                  <div className="w-full ml-2">
+                    <p className="py-2 text-sm text-gray-500 dark:text-neargray-100">
+                      Confirm Password
+                    </p>
+                    <div className="relative w-full">
+                      <input
+                        type={showPasswords.password2 ? 'text' : 'password'}
+                        onPaste={(e) => {
+                          e.preventDefault();
+                          return false;
+                        }}
+                        name="password_confirmation"
+                        value={formik.values.password_confirmation}
+                        onChange={formik.handleChange}
+                        className="border text-black-300 dark:text-white dark:border-black-200 dark:bg-black-300 px-3 w-full focus:outline-blue dark:focus:outline-none dark:focus:ring-2 dark:focus:ring-gray-800 rounded-md h-12"
+                      />
+                      <button
+                        className="absolute top-0 right-0 h-full px-3"
+                        onClick={(e) =>
+                          togglePasswordVisibility(e, 'password2')
+                        }
+                      >
+                        {showPasswords.password2 ? (
+                          <Visibility className="w-4 h-4" />
+                        ) : (
+                          <VisibilityOff className="w-4 h-4" />
+                        )}
+                      </button>
+                    </div>
+                    {formik.touched.password_confirmation &&
+                      formik.errors.password_confirmation && (
+                        <small className="text-red-500">
+                          {formik.errors.password_confirmation}
+                        </small>
+                      )}
+                  </div>
+                </div>
+                <div className="py-2">
+                  <p className="text-sm text-gray-500 dark:text-neargray-100">
+                    <span>
+                      <input
+                        type="checkbox"
+                        checked={formik.values.terms_conditions}
+                        onChange={(e) =>
+                          formik.setFieldValue(
+                            'terms_conditions',
+                            e.target.checked,
+                          )
+                        }
+                        className="mr-2"
+                      />
+                    </span>
+                    I agree to the{' '}
+                    <span className="underline">
+                      <a href={`/terms-and-conditions`} target="_blank">
+                        <span>Terms and Conditions</span>
+                      </a>
+                    </span>
+                  </p>
+                  {formik.touched.terms_conditions &&
+                    formik.errors.terms_conditions && (
+                      <small className="text-red-500">
+                        {formik.errors.terms_conditions}
+                      </small>
+                    )}
+                </div>
+                <div className="w-full text-left my-2">
+                  <button
+                    disabled={formik.isSubmitting}
+                    type="submit"
+                    onClick={() => formik.handleSubmit()}
+                    className={`text-sm font-semibold focus:outline-none text-white text-center w-56 py-3 hover:bg-green-400 bg-green-500 rounded ${
+                      formik.isSubmitting &&
+                      'cursor-not-allowed bg-gray-400 hover:bg-gray-500'
+                    } `}
+                  >
+                    Create account
+                  </button>
+                </div>
+                <div className="py-2">
+                  <p className="text-gray-500 dark:text-neargray-100 text-sm my-1">
+                    <span className="font-thin">Already have an account?</span>{' '}
+                    <span className="text-primary dark:text-green-250 ">
+                      <Link href="/login">
+                        <span> Click to Sign In</span>
+                      </Link>
+                    </span>
+                  </p>
+                </div>
+              </form>
+            ) : (
+              <div>
+                <h1 className="text-3xl text-primary dark:text-green-250 py-4 font-semibold">
+                  Register a new account
+                </h1>
+                <div className="bg-primary-100 dark:bg-blue-900/[0.05] text-sm text-primary dark:text-green-250 rounded-md px-4 py-3">
+                  Your account registration has been submitted and is pending
+                  email verification
+                </div>
+                <p className="text-sm dark:text-gray-300 my-6">
+                  We have sent an email to {formik.values?.email} with a link to
+                  activate your account. To complete the sign-up process, please
+                  click on the confirmation link in the email.
+                </p>
+                <p className="text-sm dark:text-gray-300 my-6">
+                  If you do not receive a confirmation email, please check your
+                  spam folder and ensure your spam filters allow emails from
+                  contact@ {removeProtocol(appUrl)}.
+                </p>
+                <p className="text-sm dark:text-gray-300 my-6">
+                  If you dont get confirmation link, please{' '}
+                  <a
+                    onClick={onResend}
+                    className="text-primary dark:text-green-250 font-medium cursor-pointer"
+                  >
+                    resend
+                  </a>
+                  .
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+Register.getLayout = (page: ReactElement) => (
+  <Layout
+    statsDetails={page?.props?.statsDetails}
+    latestBlocks={page?.props?.latestBlocks}
+  >
+    {page}
+  </Layout>
+);
+
+export default Register;
diff --git a/apps/app/src/pages/resend.tsx b/apps/app/src/pages/resend.tsx
new file mode 100644
index 00000000..9ca09bdf
--- /dev/null
+++ b/apps/app/src/pages/resend.tsx
@@ -0,0 +1,175 @@
+import React, { ReactElement } from 'react';
+import * as Yup from 'yup';
+import Head from 'next/head';
+import { FormikValues, useFormik } from 'formik';
+import { toast, ToastContainer } from 'react-toastify';
+import { useRouter } from 'next/router';
+import Layout from '@/components/Layouts';
+import { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+import { GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import 'react-toastify/dist/ReactToastify.css';
+
+const title = 'Nearblocks';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const validationSchema = Yup.object().shape({
+  email: Yup.string()
+    .email('Please enter a valid email')
+    .required('Please enter email'),
+});
+
+const ResendEmail = () => {
+  const router = useRouter();
+  const { type } = router.query;
+
+  const onLogin = () => router.push('/login');
+
+  const onSubmit = async (values: FormikValues) => {
+    try {
+      const data = { ...values, type };
+      await request.post(`/resend`, data);
+      if (!toast.isActive('resent-email')) {
+        toast.success('Email resent successfully', {
+          toastId: 'resent-email',
+        });
+      }
+      formik.resetForm();
+    } catch (error: any) {
+      const errors = error?.response?.data?.error;
+      if (errors) {
+        if (!toast.isActive('resent-email-error')) {
+          toast.error(errors, {
+            toastId: 'resent-email-error',
+          });
+        }
+      } else {
+        const message = catchErrors(error);
+        if (!toast.isActive('resent-email-error')) {
+          toast.error(message, {
+            toastId: 'resent-email-error',
+          });
+        }
+      }
+    }
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+    },
+    onSubmit: onSubmit,
+    validationSchema: validationSchema,
+  });
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta property="og:title" content={title} />
+        <meta property="twitter:title" content={title} />
+      </Head>
+      <ToastContainer />
+      <section>
+        <div className="container mx-auto py-20">
+          <div className="mx-auto px-5 align-middle max-w-[685px]">
+            <form method="post" onSubmit={formik.handleSubmit}>
+              {type && type === 'RESET_PASSWORD' ? (
+                <h1 className="text-3xl text-primary dark:text-green-250 py-2 font-semibold">
+                  Resend Password Recovery{' '}
+                  <span className="font-bold">Email</span>
+                </h1>
+              ) : (
+                <h1 className="text-3xl text-primary dark:text-green-250 py-2 font-semibold">
+                  Resend Confirmation <span className="font-bold">Email</span>
+                </h1>
+              )}
+              <div className="py-2">
+                <p className="py-2 text-sm text-gray-500 dark:text-neargray-100">
+                  Email Address
+                </p>
+                <input
+                  name="email"
+                  autoComplete="off"
+                  value={formik.values.email}
+                  placeholder="Enter your email address here"
+                  onChange={formik.handleChange}
+                  className="border text-black-300 dark:text-white dark:border-black-200 px-3 w-full focus:outline-blue dark:focus:outline-none dark:focus:ring-2 dark:focus:ring-gray-800 rounded-md h-12"
+                />
+                {formik.touched.email && formik.errors.email && (
+                  <small className="text-red-500">{formik.errors.email}</small>
+                )}
+              </div>
+
+              <div className="w-full text-right my-4 justify-between flex items-center">
+                <a
+                  onClick={onLogin}
+                  className="underline text-xs text-gray-400 dark:text-neargray-200 cursor-pointer"
+                >
+                  Back to sign in
+                </a>
+                <button
+                  disabled={formik.isSubmitting}
+                  type="submit"
+                  onClick={() => formik.handleSubmit()}
+                  className={`text-sm  focus:outline-none text-white  text-center font-semibold w-56 py-3 hover:bg-green-400 bg-green-500 rounded ${
+                    formik.isSubmitting &&
+                    'cursor-not-allowed bg-gray-400 hover:bg-gray-500'
+                  } `}
+                >
+                  Send Now
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+ResendEmail.getLayout = (page: ReactElement) => (
+  <Layout
+    statsDetails={page?.props?.statsDetails}
+    latestBlocks={page?.props?.latestBlocks}
+  >
+    {page}
+  </Layout>
+);
+
+export default ResendEmail;
diff --git a/apps/app/src/pages/reset.tsx b/apps/app/src/pages/reset.tsx
new file mode 100644
index 00000000..1021e31b
--- /dev/null
+++ b/apps/app/src/pages/reset.tsx
@@ -0,0 +1,203 @@
+import React, { ReactElement } from 'react';
+import * as Yup from 'yup';
+import Head from 'next/head';
+import { FormikValues, useFormik } from 'formik';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/router';
+import Layout from '@/components/Layouts';
+import { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+import { GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+
+const title = `Register | Nearblocks`;
+
+const validationSchema = Yup.object().shape({
+  password: Yup.string()
+    .min(8, 'Password must be an 8 character')
+    .required('Please enter  password'),
+  password_confirmation: Yup.string()
+    .oneOf([Yup.ref('password'), null], 'Your passwords do not match')
+    .required('Please enter password confirmation'),
+});
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+  email: any;
+  code: any;
+}> = async (context) => {
+  const {
+    query: { email, code },
+  } = context;
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+        email: email || null,
+        code: code || null,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+        email: email || null,
+        code: code || null,
+      },
+    };
+  }
+};
+
+interface Props {
+  email: string | null;
+  code: string | null;
+}
+
+const ResetPassword = ({ email, code }: Props) => {
+  const router = useRouter();
+
+  const onSubmit = async (values: FormikValues) => {
+    try {
+      await request.post(`/reset`, values);
+      if (!toast.isActive('password-reset')) {
+        toast.success('Password reset successfully', {
+          toastId: 'password-reset',
+        });
+      }
+      router.push('/login');
+    } catch (error: any) {
+      const errors = error?.response?.data?.error;
+      if (errors) {
+        if (!toast.isActive('password-reset-error')) {
+          toast.error(errors, {
+            toastId: 'password-reset-error',
+          });
+        }
+      } else {
+        const message = catchErrors(error);
+        if (!toast.isActive('password-reset-error')) {
+          toast.error(message, {
+            toastId: 'password-reset-error',
+          });
+        }
+      }
+    }
+  };
+
+  const onLogin = () => router.push('/login');
+
+  const formik = useFormik({
+    initialValues: {
+      email: email,
+      code: code,
+      password: '',
+      password_confirmation: '',
+    },
+    onSubmit,
+    validationSchema,
+  });
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta property="og:title" content={title} />
+        <meta property="twitter:title" content={title} />
+      </Head>
+      <section>
+        <div className="container mx-auto py-20">
+          <div className="mx-auto px-5 align-middle max-w-[685px]">
+            <form method="post" onSubmit={formik.handleSubmit}>
+              <h1 className="text-3xl text-primary py-2 font-semibold">
+                Reset new Password
+              </h1>
+              <p className="text-sm text-gray-400 py-2 font-thin">
+                Fill out the form
+              </p>
+              <div className="py-2 flex">
+                <div className="w-full mr-1">
+                  <p className="py-2 text-sm text-gray-500">Password</p>
+                  <input
+                    type="password"
+                    name="password"
+                    value={formik.values.password}
+                    onChange={formik.handleChange}
+                    className="border dark:border-black-200 dark:bg-black-300 px-3 w-full outline-primary rounded-md h-12"
+                  />
+                  {formik.touched.password && formik.errors.password && (
+                    <small className="text-red-500">
+                      {formik.errors.password}
+                    </small>
+                  )}
+                </div>
+                <div className="w-full ml-2">
+                  <p className="py-2 text-sm text-gray-500">Confirm Password</p>
+                  <input
+                    type="password"
+                    name="password_confirmation"
+                    value={formik.values.password_confirmation}
+                    onChange={formik.handleChange}
+                    className="border dark:border-black-200 dark:bg-black-300 px-3 w-full outline-primary rounded-md h-12"
+                  />
+                  {formik.touched.password_confirmation &&
+                    formik.errors.password_confirmation && (
+                      <small className="text-red-500">
+                        {formik.errors.password_confirmation}
+                      </small>
+                    )}
+                </div>
+              </div>
+
+              <div className="w-full text-right my-4 justify-between flex items-center">
+                <a
+                  onClick={onLogin}
+                  className="underline text-xs text-gray-400 cursor-pointer"
+                >
+                  Back to sign in
+                </a>
+                <button
+                  disabled={formik.isSubmitting}
+                  type="submit"
+                  onClick={() => formik.handleSubmit()}
+                  className={`text-sm  focus:outline-none text-white  text-center font-semibold w-56 py-3 bg-primary rounded ${
+                    formik.isSubmitting && 'cursor-not-allowed bg-primary-100'
+                  } `}
+                >
+                  Reset Password
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+ResetPassword.getLayout = (page: ReactElement) => (
+  <Layout
+    statsDetails={page?.props?.statsDetails}
+    latestBlocks={page?.props?.latestBlocks}
+  >
+    {page}
+  </Layout>
+);
+
+export default ResetPassword;
diff --git a/apps/app/src/pages/token/[id].tsx b/apps/app/src/pages/token/[id].tsx
index b2cf01ce..f819f4e8 100644
--- a/apps/app/src/pages/token/[id].tsx
+++ b/apps/app/src/pages/token/[id].tsx
@@ -21,6 +21,8 @@ import { VmComponent } from '@/components/vm/VmComponent';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import Comment from '@/components/skeleton/common/Comment';
 import { useAuthStore } from '@/stores/auth';
+import dynamic from 'next/dynamic';
+import { useBosLoaderInitializer } from '@/hooks/useBosLoaderInitializer';
 
 const network = env('NEXT_PUBLIC_NETWORK_ID');
 const ogUrl = env('NEXT_PUBLIC_OG_URL');
@@ -29,6 +31,13 @@ const tabs = ['transfers', 'holders', 'info', 'faq', 'comments'];
 
 type TabType = 'transfers' | 'holders' | 'info' | 'faq' | 'comments';
 
+const VmInitializer = dynamic(
+  () => import('../../components/vm/VmInitializer'),
+  {
+    ssr: false,
+  },
+);
+
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const {
     query: { id = '', a = '', tab = 'transfers', ...query },
@@ -163,6 +172,7 @@ const TokenDetails = ({
   error,
   tab,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  useBosLoaderInitializer();
   const router = useRouter();
   const { id, a }: any = router.query;
   const { t } = useTranslation();
@@ -244,6 +254,7 @@ const TokenDetails = ({
         <meta name="twitter:image:src" content={thumbnail} />
         <link rel="canonical" href={`${appUrl}/token/${id}}`} />
       </Head>
+      <VmInitializer />
       <div className="relative container mx-auto px-3">
         <section>
           <Overview
diff --git a/apps/app/src/pages/updateemail.tsx b/apps/app/src/pages/updateemail.tsx
new file mode 100644
index 00000000..74ab1062
--- /dev/null
+++ b/apps/app/src/pages/updateemail.tsx
@@ -0,0 +1,208 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+/* import { useAccount } from "wagmi"; */
+import Cookies from 'js-cookie';
+import Layout from '@/components/Layouts';
+import { request } from '@/hooks/useAuth';
+import { catchErrors } from '@/utils/libs';
+import useStorage from '@/hooks/useStorage';
+import { GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+
+const title = 'Nearblocks';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+  status: number | null;
+  message: string | null;
+  authToken: string | null;
+  authUserRole: string | null;
+  authUsername: string | null;
+}> = async (context) => {
+  let status = null;
+  let message = null;
+  let token = null;
+  let role = null;
+  let username = null;
+
+  const {
+    query: { email, code },
+  } = context;
+
+  try {
+    const resp = await request.post(`/profile/update-email`, {
+      email: email,
+      code: code,
+    });
+    if (
+      resp?.data?.meta?.token &&
+      resp?.data?.data?.role &&
+      resp?.data?.data?.username
+    ) {
+      token = resp?.data?.meta?.token;
+      role = resp?.data?.data?.role[0].name;
+      username = resp?.data?.data?.username;
+    }
+    status = resp?.status;
+  } catch (error: any) {
+    message = catchErrors(error);
+    status = error?.response?.status;
+  }
+
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+        status,
+        message,
+        authToken: token,
+        authUserRole: role,
+        authUsername: username,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts or blocks:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+        status,
+        message,
+        authToken: token,
+        authUserRole: role,
+        authUsername: username,
+      },
+    };
+  }
+};
+
+interface Props {
+  status: number;
+  authToken: string;
+  authUserRole: string;
+  authUsername: string;
+}
+
+const UpdateEmail = ({
+  status,
+  authToken,
+  authUserRole,
+  authUsername,
+}: Props) => {
+  /*  const { isConnected } = useAccount(); */
+  const router = useRouter();
+  const [, setToken] = useStorage('token');
+  const [, setRole] = useStorage('role');
+  const [, setUser] = useStorage('user');
+  /*  const onLogin = () => router.push("/login"); */
+  const onResend = () => router.push('/respend');
+
+  useEffect(() => {
+    if (authToken && authUserRole && authUsername) {
+      setToken(authToken);
+      setRole(authUserRole);
+      setUser(authUsername);
+      Cookies.set('token', authToken);
+
+      setTimeout(() => {
+        router.replace('/user/overview');
+      }, 3000);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta property="og:title" content={title} />
+        <meta property="twitter:title" content={title} />
+      </Head>
+      <section>
+        <div className="container mx-auto py-20">
+          <div className="mx-auto px-5 align-middle max-w-[685px]">
+            {[200, 204].includes(status) && (
+              <div>
+                <h1 className="text-3xl text-primary py-4">
+                  Changed Your Email
+                </h1>
+                <div className="bg-blue-200/30 text-primary rounded-md px-5 py-5">
+                  <span className="font-bold">Congratulations!</span> Your email
+                  is succcessfully verfied. Enjoy your {title} services
+                </div>
+                {/* {!isConnected && (
+                  <div className="w-full text-right my-4">
+                    <button
+                      onClick={onLogin}
+                      type="button"
+                      className="text-sm text-white  text-center font-semibold w-56 py-3 bg-primary rounded"
+                    >
+                      Back to Login
+                    </button>
+                  </div>
+                )} */}
+              </div>
+            )}
+            {[422, 400].includes(status) && (
+              <div>
+                <h1 className="text-3xl text-primary py-4">
+                  Verification Failed
+                </h1>
+                <div className="bg-red-200/30 text-sm text-red-500 rounded-md px-5 py-5">
+                  <span className="font-bold">Oops!</span> Invalid confirmation
+                  link. Please confirm you entered the correct URL or click on
+                  the button below to resend the confirmation link.
+                </div>
+
+                <div className="w-full text-right my-4 justify-between flex items-center">
+                  {/*  {!isConnected && (
+                    <a
+                      onClick={onLogin}
+                      className="underline text-xs text-gray-400 cursor-pointer"
+                    >
+                      Back to Login
+                    </a>
+                  )} */}
+                  <button
+                    onClick={onResend}
+                    type="button"
+                    className="text-sm text-white  text-center font-semibold w-56 py-3 bg-primary rounded"
+                  >
+                    Resend
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+UpdateEmail.getLayout = (page: ReactElement) => (
+  <Layout
+    statsDetails={page?.props?.statsDetails}
+    latestBlocks={page?.props?.latestBlocks}
+  >
+    {page}
+  </Layout>
+);
+
+export default UpdateEmail;
diff --git a/apps/app/src/pages/user/apiusage.tsx b/apps/app/src/pages/user/apiusage.tsx
new file mode 100644
index 00000000..9176e602
--- /dev/null
+++ b/apps/app/src/pages/user/apiusage.tsx
@@ -0,0 +1,104 @@
+import { env } from 'next-runtime-env';
+import React from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+import Layout from '@/components/Layouts';
+import withAuth from '@/stores/withAuth';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Chart from '@/components/ApiUsage/Chart';
+import ApiUsageStats from '@/components/ApiUsage/Stats';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const ApiUsage = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const router = useRouter();
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' API | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const { id: keyId } = router.query;
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/user/apiusage`} />
+      </Head>
+      <UserLayout title="Api Key Usage">
+        <>
+          <ApiUsageStats keyId={keyId} />
+          <div className={`md:flex lg:flex-row flex-col mt-8`}>
+            <div className="container mx-auto">
+              <div className="block bg-white dark:bg-black-600 border soft-shadow rounded-xl overflow-hidden mb-10">
+                <Chart keyId={keyId} />
+              </div>
+            </div>
+          </div>
+        </>
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(ApiUsage);
diff --git a/apps/app/src/pages/user/invoices.tsx b/apps/app/src/pages/user/invoices.tsx
new file mode 100644
index 00000000..8d14b1e0
--- /dev/null
+++ b/apps/app/src/pages/user/invoices.tsx
@@ -0,0 +1,278 @@
+import { env } from 'next-runtime-env';
+import dayjs from 'dayjs';
+import Head from 'next/head';
+import get from 'lodash/get';
+import React, { useState, useEffect } from 'react';
+import { Tooltip } from '@reach/tooltip';
+import useAuth from '@/hooks/useAuth';
+import withAuth from '@/stores/withAuth';
+import Layout from '@/components/Layouts';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import FaDownload from '@/components/Icons/FaDownload';
+import { centsToDollar } from '@/utils/libs';
+import useStorage from '@/hooks/useStorage';
+import Plan from '@/components/Icons/Plan';
+import Pagination, { paginationQueue } from '@/components/Dashboard/Pagination';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+
+interface QueueItem {
+  id: string;
+  value: string;
+}
+
+interface Invoice {
+  id: string;
+  number: string;
+  customer_email: string;
+  amount_due: number;
+  subtotal: number;
+  total: number;
+  period_start: number;
+  period_end: number;
+  invoice_pdf: string;
+  status: string;
+}
+
+const Invoices = () => {
+  const [role] = useStorage('role');
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+  const apiUrl =
+    role === 'publisher' ? 'publisher/invoices?' : 'advertiser/invoices?';
+  const [url, setUrl] = useState(apiUrl);
+  const [previousPageParam, setPreviousPageParam] = useState<QueueItem[]>([]);
+
+  const [nextPageParams, setNextPageParams] = useState<{}>();
+
+  const { enqueue, dequeue, size } = paginationQueue(
+    previousPageParam,
+    setPreviousPageParam,
+  );
+
+  const dynamicTitle = 'Near' + '%20Invoices%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' Invoices | ' + 'Nearblocks';
+
+  const metaDescription = 'Nearblocks' + ' Invoices';
+
+  const { data, loading, mutate } = useAuth(url);
+
+  const invoices = get(data, 'data') || null;
+
+  useEffect(() => {
+    if (invoices && invoices.length > 0 && data?.has_more) {
+      setNextPageParams({
+        startingAfter: invoices[invoices.length - 1]?.id,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [invoices]);
+
+  return (
+    <Layout>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/user/keys`} />
+      </Head>
+      <UserLayout title="Invoices">
+        <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit mb-4">
+          <div className="px-5 py-5 flex justify-between">
+            <div>
+              <p className="text-black dark:text-neargray-10">Invoices</p>
+              <p className="text-sm text-gray-400 dark:text-neargray-10 mt-2">
+                List all invoices
+              </p>
+            </div>
+            <Pagination
+              isTopPagination={true}
+              apiUrl={apiUrl}
+              setUrl={setUrl}
+              enqueue={enqueue}
+              dequeue={dequeue}
+              size={size()}
+              nextPageParams={nextPageParams}
+              setPreviousPageParam={setPreviousPageParam}
+              mutate={mutate}
+            />
+          </div>
+          <div className="flex border-b dark:border-black-200">
+            <div className="overflow-x-auto w-full">
+              <table className="w-full divide-y border-t dark:border-black-200 dark:divide-black-200">
+                <thead className="bg-gray-100 dark:bg-black-600">
+                  <tr>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider whitespace-nowrap"
+                    >
+                      Invoice Number
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Amount
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Subtotal
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Total
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Issue Date
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Due Date
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Status
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Download
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-black-600 divide-y divide-gray-200">
+                  {loading &&
+                    [...Array(5)].map((_, i) => (
+                      <tr key={i} className="hover:bg-blue-900/5 h-[53px]">
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-50 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                      </tr>
+                    ))}
+                  {!loading && (!invoices || invoices?.length < 1) && (
+                    <tr className="h-[53px]">
+                      <td
+                        colSpan={100}
+                        className="text-gray-400 dark:text-neargray-10 text-xs"
+                      >
+                        <div className="w-full bg-white dark:bg-black-600 rounded-xl soft-shadow h-fit">
+                          <div className="text-center py-28">
+                            <div className="mb-4 flex justify-center">
+                              <span className="inline-block border border-yellow-600 border-opacity-25 bg-opacity-10 bg-yellow-300 text-yellow-500 rounded-full p-4">
+                                <Plan />
+                              </span>
+                            </div>
+                            <h3 className="h-5 font-bold text-lg text-black dark:text-neargray-10">
+                              Invoices Empty
+                            </h3>
+                            <p className="mb-0 py-4 font-bold text-sm text-gray-500 dark:text-neargray-10">
+                              No Invoice Found
+                            </p>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+
+                  {invoices?.map((invoice: Invoice) => (
+                    <tr key={invoice.id} className="hover:bg-blue-900/5">
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:bg-black-200 dark:text-neargray-10 align-top">
+                        {invoice.number}
+                        {role === 'publisher' && (
+                          <Tooltip
+                            label={invoice?.customer_email}
+                            className="absolute h-auto max-w-xs bg-black bg-opacity-90 z-10 text-white text-xs p-2 break-words"
+                          >
+                            <div className="w-20">
+                              <p className="truncate text-ellipsis overflow-hidden">
+                                <>{invoice?.customer_email}</>
+                              </p>
+                            </div>
+                          </Tooltip>
+                        )}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs dark:bg-black-200 dark:text-neargray-10  text-primary align-top">
+                        <div className="flex">
+                          <p className="mr-2 text-black dark:bg-black-600 dark:text-neargray-10">
+                            ${centsToDollar(invoice?.amount_due)}
+                          </p>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:bg-black-200 dark:text-neargray-10 align-top">
+                        ${centsToDollar(invoice?.subtotal)}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:bg-black-200 dark:text-neargray-10 align-top">
+                        ${centsToDollar(invoice?.total)}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:bg-black-200 dark:text-neargray-10 align-top">
+                        {dayjs
+                          .unix(invoice?.period_start)
+                          .format('MMMM D, YYYY')}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:bg-black-200 dark:text-neargray-10 align-top">
+                        {dayjs.unix(invoice?.period_end).format('MMMM D, YYYY')}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:bg-black-200 dark:text-neargray-10 align-top ml-3">
+                        {invoice?.status}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:bg-black-200 dark:text-neargray-10 align-top">
+                        <a href={invoice.invoice_pdf}>
+                          <div className="flex items-center border border-green-500  dark:border-green-250 rounded-md px-2 hover:bg-primary-100">
+                            <FaDownload className="text-green-500 dark:text-neargray-10 " />{' '}
+                            <p className="ml-1 text-green-500 dark:text-neargray-10 cursor-pointer">
+                              Download
+                            </p>
+                          </div>
+                        </a>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(Invoices);
diff --git a/apps/app/src/pages/user/keys.tsx b/apps/app/src/pages/user/keys.tsx
new file mode 100644
index 00000000..87e2e218
--- /dev/null
+++ b/apps/app/src/pages/user/keys.tsx
@@ -0,0 +1,316 @@
+import { env } from 'next-runtime-env';
+import dayjs from 'dayjs';
+import Head from 'next/head';
+import get from 'lodash/get';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import React, { useState } from 'react';
+import { Tooltip } from '@reach/tooltip';
+import Link from 'next/link';
+import useAuth from '@/hooks/useAuth';
+import withAuth from '@/stores/withAuth';
+import Layout from '@/components/Layouts';
+import CopyIcon from '@/components/Icons/CopyIcon';
+import Edit from '@/components/Icons/Edit';
+import Delete from '@/components/Icons/Delete';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import Plan from '@/components/Icons/Plan';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import AddKeys from '@/components/Dashboard/Addkeys';
+import DeleteKey from '@/components/Dashboard/DeleteKey';
+import ApiUsageStats from '@/components/ApiUsage/Stats';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+interface ApiKey {
+  id: string;
+  name: string;
+  token: string;
+  created_at: string;
+  usage: string;
+}
+
+const APIKeys = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' API | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const [isOpen, setOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [selected, setSelected] = useState<any>();
+
+  const { data, loading, error, mutate } = useAuth('/keys');
+
+  const keys = get(data, 'keys') || null;
+
+  const onToggleEdit = (id: string) => {
+    setOpen((open) => !open);
+    setSelected(id);
+  };
+
+  const onToggleAdd = () => {
+    setSelected(undefined);
+    setOpen((open) => !open);
+  };
+
+  const onToggleDelete = (key?: ApiKey) => {
+    setSelected(key);
+    setIsDeleteOpen((open) => !open);
+  };
+
+  /* const onToggleView = (id:string) => {
+    setSelected(id);
+  }; */
+
+  const onCopy = async (key: ApiKey) => {
+    await navigator.clipboard.writeText(key?.token);
+    if (!toast.isActive('copy-key')) {
+      toast.success('Copied!', {
+        toastId: 'copy-key',
+      });
+    }
+  };
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/user/keys`} />
+      </Head>
+      <ToastContainer />
+      <UserLayout title="API Keys">
+        <ApiUsageStats />
+        <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit mb-4 mt-8">
+          <div className="px-5 py-5">
+            <p className="text-black dark:text-neargray-10">API Keys</p>
+            <p className="text-sm text-gray-400 dark:text-neargray-10 mt-2">
+              For developers interested in building applications using our API
+              Service, please create an API-Key Token usable for all API
+              requests.
+            </p>
+          </div>
+          <div className="flex border-b dark:border-black-200">
+            <div className="overflow-x-auto w-full">
+              <table className="w-full divide-y border-t dark:border-black-200 dark:divide-black-200">
+                <thead className="bg-gray-100 dark:bg-black-600 dark:text-neargray-10">
+                  <tr>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      APP NAME
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      API KEY TOKEN
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Usage (Monthly)
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider"
+                    >
+                      Action
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white dark:bg-black-600 divide-y divide-gray-200">
+                  {(loading || error) &&
+                    [...Array(5)].map((_, i) => (
+                      <tr key={i} className="hover:bg-blue-900/5 h-[53px]">
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4 " />
+                          <Skeleton className="h-4 w-40 mt-2" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                        <td className="px-6 py-4 text-left text-xs font-semibold text-gray-500 dark:text-neargray-10 uppercase tracking-wider">
+                          <Skeleton className="h-4" />
+                        </td>
+                      </tr>
+                    ))}
+                  {!loading && keys?.length === 0 && (
+                    <tr className="h-[53px]">
+                      <td colSpan={100} className="text-gray-400 text-xs">
+                        <div className="w-full bg-white dark:bg-black-200 soft-shadow h-fit">
+                          <div className="text-center py-28">
+                            <div className="mb-4 flex justify-center">
+                              <span className="inline-block border border-yellow-600 border-opacity-25 bg-opacity-10 bg-yellow-300 text-yellow-500 rounded-full p-4">
+                                <Plan />
+                              </span>
+                            </div>
+                            <h3 className="h-5 font-bold text-lg text-black dark:text-neargray-10">
+                              API Keys Empty
+                            </h3>
+                            <p className="mb-0 py-4 font-bold text-sm text-gray-500 dark:text-neargray-10">
+                              No API Key Found
+                            </p>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+
+                  {keys?.map((key: ApiKey) => (
+                    <tr key={key.id} className="hover:bg-blue-900/5">
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:text-neargray-10 align-top max-w-52 overflow-hidden text-ellipsis">
+                        <Tooltip
+                          label={key?.name}
+                          className="absolute h-auto max-w-xs bg-black dark:bg-black-200 dark:text-neargray-10 bg-opacity-90 z-10 text-white text-xs p-2 break-words"
+                        >
+                          <span>{key?.name}</span>
+                        </Tooltip>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-primary align-top">
+                        <div className="flex">
+                          <p className="mr-2 text-black dark:text-neargray-10">
+                            {key?.token}
+                          </p>
+                          <button
+                            type="button"
+                            onClick={() => onCopy(key)}
+                            className="bg-green-500 dark:bg-black-200 bg-opacity-10 hover:bg-opacity-100 group rounded-full  p-1 w-5 h-5"
+                          >
+                            <CopyIcon className="fill-current -z-50 text-green-500 dark:text-green-250 group-hover:text-white h-3 w-3" />
+                          </button>
+                        </div>
+                        <p className="text-[10px] text-gray-400 ">
+                          Added on {dayjs(key.created_at).format('YYYY-MM-DD')}
+                        </p>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-xs text-black dark:text-neargray-10 align-top">
+                        {key.usage}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap flex  items-center text-xs text-gray-500 dark:text-neargray-10 align-top">
+                        <div
+                          className="flex items-center border border-green-500 dark:border-green-250 rounded-md px-2 py-1 hover:bg-primary-100 dark:hover:bg-black-200"
+                          onClick={() => onToggleEdit(key.id)}
+                        >
+                          <Edit className="text-primary dark:text-neargray-10" />{' '}
+                          <p className="ml-1 text-green-500 dark:text-neargray-10 cursor-pointer">
+                            Edit
+                          </p>
+                        </div>
+                        <div className="flex items-center border border-green-500 dark:border-green-250 rounded-md px-2 py-1 hover:bg-primary-100 dark:hover:bg-black-200 ml-3">
+                          <Link
+                            passHref
+                            className="flex items-center"
+                            href={{
+                              pathname: '/user/apiusage',
+                              query: { id: key?.id },
+                            }}
+                          >
+                            <p className="ml-1 text-green-500 dark:text-neargray-10 cursor-pointer">
+                              Stats
+                            </p>
+                          </Link>
+                        </div>
+                        <div
+                          onClick={() => onToggleDelete(key)}
+                          className="border border-green-500 dark:border-green-250 ml-3 rounded-md  cursor-pointer hover:bg-red-100 dark:hover:bg-black-200 "
+                        >
+                          <Delete className="text-red-600 dark:text-red-400 w-3 h-3 m-1.5" />
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div className="flex items-center justify-end px-6 py-4">
+            <button
+              onClick={onToggleAdd}
+              className="text-[13px] text-white font-semibold px-6 py-2 bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary rounded"
+            >
+              Add key
+            </button>
+          </div>
+        </div>
+      </UserLayout>
+      <AddKeys
+        mutate={mutate}
+        selected={selected}
+        isOpen={isOpen}
+        onToggleAdd={onToggleAdd}
+      />
+      <DeleteKey
+        mutate={mutate}
+        selected={selected}
+        isDeleteOpen={isDeleteOpen}
+        onToggleDelete={onToggleDelete}
+      />
+    </Layout>
+  );
+};
+
+export default withAuth(APIKeys);
diff --git a/apps/app/src/pages/user/overview.tsx b/apps/app/src/pages/user/overview.tsx
new file mode 100644
index 00000000..dc056ef0
--- /dev/null
+++ b/apps/app/src/pages/user/overview.tsx
@@ -0,0 +1,170 @@
+import { env } from 'next-runtime-env';
+import React from 'react';
+import Head from 'next/head';
+import get from 'lodash/get';
+import dayjs from '../../utils/dayjs';
+import useAuth from '@/hooks/useAuth';
+import withAuth from '@/stores/withAuth';
+import Link from 'next/link';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Layout from '@/components/Layouts';
+import Avatar from '@/components/Icons/Avatar';
+import EmailCircle from '@/components/Icons/EmailCircle';
+import LoginCircle from '@/components/Icons/LoginCircle';
+import Clock from '@/components/Icons/Clock';
+import Edit from '@/components/Icons/Edit';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const Overview = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' API | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const { data, loading } = useAuth('/profile');
+  const user = get(data, 'data') || null;
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/user/overview`} />
+      </Head>
+      <ToastContainer />
+      <UserLayout title="Account Overview">
+        <div className="w-full bg-white dark:bg-black-600 rounded-xl soft-shadow h-fit">
+          <div className="border-b px-5 py-5 dark:border-black-200">
+            <p className="text-black dark:text-neargray-100">
+              Personal Information
+            </p>
+          </div>
+          <div>
+            <p className="text-sm text-gray-400 dark:text-neargray-100 mt-2 px-6 py-4">
+              Below are the username, emali address and overview information of
+              your account
+            </p>
+            <div className="grid grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+              <p className="text-gray-500 dark:text-neargray-100 text-sm flex items-center">
+                <Avatar /> <span className="ml-2">Username</span>
+              </p>
+              {loading ? (
+                <div className="w-full md:w-1/5">
+                  <Skeleton className="flex w-20 h-4" />
+                </div>
+              ) : (
+                <p className="text-sm text-black dark:text-neargray-100 font-bold">
+                  {user?.username}
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="grid grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+            <p className="text-gray-500 dark:text-neargray-100 text-sm flex items-center">
+              <EmailCircle /> <span className="ml-2">Email Address</span>
+            </p>
+            {loading ? (
+              <div className="w-full md:w-1/5">
+                <Skeleton className="flex w-26 h-4" />
+              </div>
+            ) : (
+              <>
+                <p className="text-sm text-black dark:text-neargray-100 font-bold">
+                  {user?.email}
+                </p>
+                <div className=" flex justify-end">
+                  <Link legacyBehavior href={`/user/settings`}>
+                    <div className="w-1/3 flex justify-center	items-center text-center border-2 text-md pl-4 pr-6 py-1 rounded focus:outline-none hover:text-primary dark:hover:text-green-100 font-semibold hover:border-primary-100 hover:bg-primary-100 bg-green-500 dark:bg-reen-250 text-white border-primary cursor-pointer">
+                      <Edit className="h-3 w-3 " />
+                      <span className="text-[13px] font-semibold ml-2">
+                        Edit
+                      </span>
+                    </div>
+                  </Link>
+                </div>
+              </>
+            )}
+          </div>
+          <div className="grid grid-cols-3 gap-1 items-center px-6 py-4 border-b dark:border-black-200">
+            <p className="text-gray-500 dark:text-neargray-100 text-sm flex items-center">
+              <LoginCircle /> <span className="ml-2">Last Login</span>
+            </p>
+            {loading ? (
+              <div className="w-full md:w-1/5">
+                <Skeleton className="flex w-20 h-4" />
+              </div>
+            ) : (
+              <p className="text-sm text-black dark:text-neargray-100 flex col-span-2">
+                <Clock className="my-auto mr-1" />
+                {dayjs(user?.last_login_at).format('YYYY-MM-DD  HH:mm:ss')}
+              </p>
+            )}
+          </div>
+        </div>
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(Overview);
diff --git a/apps/app/src/pages/user/plan.tsx b/apps/app/src/pages/user/plan.tsx
new file mode 100644
index 00000000..c1f75cfc
--- /dev/null
+++ b/apps/app/src/pages/user/plan.tsx
@@ -0,0 +1,284 @@
+import { env } from 'next-runtime-env';
+import Head from 'next/head';
+import { useMemo, useState } from 'react';
+import { useRouter } from 'next/router';
+import dayjs from 'dayjs';
+import FaRegTimesCircle from '@/components/Icons/FaRegTimesCircle';
+import FaCheckCircle from '@/components/Icons/FaCheckCircle';
+import useAuth, { request } from '@/hooks/useAuth';
+import withAuth from '@/stores/withAuth';
+import { localFormat } from '@/utils/libs';
+import Layout from '@/components/Layouts';
+import CircleTimer from '@/components/Icons/CircleTimer';
+import Avatar from '@/components/Icons/Avatar';
+import Refresh from '@/components/Icons/Refresh';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import Arrow from '@/components/Icons/Arrow';
+import fetcher from '@/utils/fetcher';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import Skeleton from '@/components/skeleton/common/Skeleton';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const CurrentPlan = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const router = useRouter();
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+  const [loadingBilling, setLoadingBilling] = useState(false);
+
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' API | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  const { data, error, loading } = useAuth('/profile');
+
+  const rateLimit = useMemo(() => {
+    const usage = data?.['rate-limit'];
+    const limit = usage?.limit ? usage?.limit : 0;
+    const consumed = usage?.consumed ? usage?.consumed : 0;
+    const percentage =
+      +limit === 0 || +consumed === 0 ? 0 : (consumed / limit) * 100;
+
+    return { limit, consumed, percentage };
+  }, [data]);
+
+  const { status } = router.query;
+
+  const handleManageBilling = async () => {
+    setLoadingBilling(true);
+
+    try {
+      const res = await request.post(
+        `advertiser/stripe/create-billing-session`,
+      );
+      if (res?.data && res?.data?.url) {
+        window.location.href = res?.data?.url;
+      }
+    } catch (error) {
+      console.error('Error redirecting to Stripe:', error);
+    } finally {
+      setLoadingBilling(false);
+    }
+  };
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/user/plan`} />
+      </Head>
+      <ToastContainer />
+      <UserLayout title="Current Plan">
+        <div className="w-full bg-white dark:bg-black-600 dark:text-neargray-10 rounded-xl soft-shadow h-fit mb-4">
+          {status === 'cancelled' && (
+            <div className="py-4 px-3 flex items-center text-sm text-orange-900/70 bg-orange-300/30 rounded-md dark:bg-black-200 dark:text-orange-900">
+              <FaRegTimesCircle />{' '}
+              <span className="ml-2"> Order has been cancelled!</span>
+            </div>
+          )}
+          {status === 'exists' && (
+            <div className="py-4 flex px-3 items-center text-sm text-orange-900/70 bg-orange-300/30 rounded-md dark:bg-black-200 dark:text-orange-900">
+              <FaRegTimesCircle />{' '}
+              <span className="ml-2">
+                {' '}
+                You have already subscribed this plan!
+              </span>
+            </div>
+          )}
+          {status === 'invalid' && (
+            <div className="py-4 flex px-3 items-center text-sm text-orange-900/70 bg-orange-300/30 rounded-md dark:bg-black-200 dark:text-orange-900">
+              <FaRegTimesCircle /> <span className="ml-2"> Invalid plan!</span>
+            </div>
+          )}
+
+          {status === 'success' && (
+            <div className="py-4 flex px-3 items-center text-sm text-primary  bg-primary-100 rounded-md">
+              <FaCheckCircle />{' '}
+              <span className="ml-2 text-primary dark:text-neargray-10">
+                {' '}
+                Order has been Placed!
+              </span>
+            </div>
+          )}
+
+          {status === 'upgraded' && (
+            <div className="py-4 flex px-3 items-center text-sm text-primary bg-primary-100 rounded-md">
+              <FaCheckCircle />{' '}
+              <span className="ml-2 text-primary dark:text-neargray-10">
+                {' '}
+                Plan Upgraded!
+              </span>
+            </div>
+          )}
+          {status === 'downgraded' && (
+            <div className="py-4 flex px-3 items-center text-sm text-primary bg-primary-100 rounded-md">
+              <FaCheckCircle />{' '}
+              <span className="ml-2 text-primary dark:text-neargray-10">
+                {' '}
+                Plan Downgraded!
+              </span>
+            </div>
+          )}
+          <div className="border-b dark:border-black-200 px-5 py-5">
+            <p className="text-black dark:text-neargray-10">
+              Current API Plans
+            </p>
+          </div>
+          <div className="gap-1 items-center">
+            <p className="text-sm text-gray-400 px-6 py-4 ">
+              All API plan accounts are Free by default. You may upgrade your
+              plan at any time.
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+              <p className="text-gray-500 dark:text-neargray-10 text-xs flex items-center mb-2">
+                <Avatar className="text-gray-500 dark:text-neargray-100" />{' '}
+                <span className="ml-2">My API plan</span>
+              </p>
+              {loading || error ? (
+                <div className="w-full md:w-1/5">
+                  <Skeleton className="flex w-20 h-4" />
+                </div>
+              ) : (
+                <p className="text-sm text-black dark:text-neargray-10 font-medium">
+                  {data?.currentPlan?.title} API Plan
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4  border-b dark:border-black-200">
+            <p className="text-gray-500 dark:text-neargray-10 text-xs flex items-center mb-2">
+              <CircleTimer className="text-gray-500 dark:text-neargray-100" />{' '}
+              <span className="ml-2">API calls per minute</span>
+            </p>
+            {loading || error ? (
+              <div className="w-full  md:w-1/5">
+                <Skeleton className="flex w-20 h-4" />
+              </div>
+            ) : (
+              <p className="text-sm text-black dark:text-neargray-10 font-medium">
+                {localFormat(data?.currentPlan?.limit_per_minute)} Calls
+              </p>
+            )}
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-1 items-center px-6 py-4">
+            <p className="text-gray-500 dark:text-neargray-10 text-xs flex items-center mb-2">
+              <Refresh className="text-gray-500 dark:text-neargray-100" />{' '}
+              <span className="ml-2">Monthly Quota</span>
+            </p>
+            {loading || error ? (
+              <div className="w-full">
+                <Skeleton className="flex w-full h-8" />
+              </div>
+            ) : (
+              <div>
+                <div className="w-full bg-gray-200 dark:bg-neargray-50 h-2 rounded-full">
+                  <div
+                    className="bg-green-500 dark:bg-green-250 h-2 rounded-full"
+                    style={{ width: rateLimit.percentage + '%' }}
+                  ></div>
+                </div>
+
+                <div className="flex flex-col sm:!flex-row gap-y-2 sm:!gap-y-0 justify-between mt-1">
+                  <p className="text-xs">
+                    {localFormat(rateLimit.consumed)} /
+                    {localFormat(rateLimit.limit)}
+                  </p>
+                  {data?.data?.subscription[0]?.end_date && (
+                    <p className="text-xs text-black dark:text-neargray-10">
+                      Renewal on &nbsp;
+                      {dayjs(data?.data?.subscription[0]?.end_date).format(
+                        'DD/MM/YYYY',
+                      )}
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="flex items-center justify-end px-6 py-4">
+            <button
+              disabled={loadingBilling}
+              type="button"
+              onClick={handleManageBilling}
+              className={`text-[13px] text-white font-semibold px-6 py-2 bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary rounded ${
+                loadingBilling && 'cursor-not-allowed bg-primary-100'
+              } `}
+            >
+              <span className="flex px-1">
+                Manage Billing
+                <span>
+                  <Arrow className="-rotate-45 -mt-1 h-4 w-4 fill-white" />
+                </span>
+              </span>
+            </button>
+            <a
+              href={'/apis'}
+              className="ml-4 text-[13px] text-white font-semibold px-6 py-2 bg-green-500 dark:bg-green-250 hover:-translate-y-1 hover:scale-100 duration-300 hover:shadow-md hover:shadow-primary rounded"
+            >
+              Upgrade / Downgrade
+            </a>
+          </div>
+        </div>
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(CurrentPlan);
diff --git a/apps/app/src/pages/user/settings.tsx b/apps/app/src/pages/user/settings.tsx
new file mode 100644
index 00000000..e8ba7e51
--- /dev/null
+++ b/apps/app/src/pages/user/settings.tsx
@@ -0,0 +1,110 @@
+import { env } from 'next-runtime-env';
+import Head from 'next/head';
+import get from 'lodash/get';
+import { InferGetServerSidePropsType, GetServerSideProps } from 'next';
+import fetcher from '@/utils/fetcher';
+import Layout from '@/components/Layouts';
+import withAuth from '@/stores/withAuth';
+import UserLayout from '@/components/Layouts/UserLayout';
+import Meta from '@/components/Layouts/Meta';
+import useAuth from '@/hooks/useAuth';
+import Delete from '@/components/Dashboard/DeleteAccount';
+import UpdateEmail from '@/components/Dashboard/UpdateEmail';
+import UpdatePassword from '@/components/Dashboard/UpdatePassword';
+import SetPassword from '@/components/Dashboard/SetPassword';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export const getServerSideProps: GetServerSideProps<{
+  statsDetails: any;
+  latestBlocks: any;
+}> = async () => {
+  try {
+    const [statsResult, latestBlocksResult] = await Promise.allSettled([
+      fetcher(`stats`),
+      fetcher(`blocks/latest?limit=1`),
+    ]);
+
+    const statsDetails =
+      statsResult.status === 'fulfilled' ? statsResult.value : null;
+    const latestBlocks =
+      latestBlocksResult.status === 'fulfilled'
+        ? latestBlocksResult.value
+        : null;
+
+    return {
+      props: {
+        statsDetails,
+        latestBlocks,
+      },
+    };
+  } catch (error) {
+    console.error('Error fetching charts:', error);
+    return {
+      props: {
+        statsDetails: null,
+        latestBlocks: null,
+      },
+    };
+  }
+};
+
+const Settings = ({
+  statsDetails,
+  latestBlocks,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const ogUrl = env('NEXT_PUBLIC_OG_URL');
+  const siteUrl = env('NEXT_PUBLIC_SITE_URL');
+  const { data, loading, mutate } = useAuth('/profile');
+  const user = get(data, 'data') || null;
+
+  const dynamicTitle =
+    'Near' + '%20Protocol%20API%20&%20Documentation%20|%20' + 'Nearblocks';
+  const thumbnail = `${ogUrl}/thumbnail/basic?brand=near&title=${dynamicTitle}`;
+
+  const metaTitle = 'Near' + ' API | ' + 'Nearblocks';
+
+  const metaDescription =
+    'Nearblocks' +
+    ' APIs derives data from ' +
+    'Nearblocks' +
+    ' ' +
+    'Near' +
+    ' Protocol (' +
+    'Near' +
+    ') Block Explorer to cater for ' +
+    'Near' +
+    ' Protocol applications through API Endpoints.';
+
+  return (
+    <Layout latestBlocks={latestBlocks} statsDetails={statsDetails}>
+      <Head>
+        <title>{metaTitle}</title>
+        <Meta
+          title={metaTitle}
+          description={metaDescription}
+          thumbnail={thumbnail}
+        />
+        <link rel="canonical" href={`${siteUrl}/user/settings`} />
+      </Head>
+      <ToastContainer />
+      <UserLayout title="Account Settings">
+        <div>
+          <UpdateEmail user={user} loading={loading} mutate={mutate} />
+        </div>
+        <div>
+          {user?.has_password ? (
+            <UpdatePassword />
+          ) : (
+            <SetPassword mutate={mutate} />
+          )}
+        </div>
+        <div>
+          <Delete />
+        </div>
+      </UserLayout>
+    </Layout>
+  );
+};
+
+export default withAuth(Settings);
diff --git a/apps/app/src/stores/withAuth.ts b/apps/app/src/stores/withAuth.ts
new file mode 100644
index 00000000..72c801d9
--- /dev/null
+++ b/apps/app/src/stores/withAuth.ts
@@ -0,0 +1,61 @@
+import { useRouter } from 'next/router';
+import React, { useState, useEffect } from 'react';
+import get from 'lodash/get';
+import Cookies from 'js-cookie';
+import useStorage from '@/hooks/useStorage';
+import useAuth from '@/hooks/useAuth';
+
+function withAuth<P>(Component: React.ComponentType<P>): React.FC<P> {
+  const Wrapper: React.FC<P> = (props) => {
+    const router = useRouter();
+    const [loading, setLoading] = useState(true);
+    const [token, setToken] = useStorage('token');
+    const [, setRole] = useStorage('role');
+    const [, setUser] = useStorage('user');
+    const [, setPlan] = useStorage('plan');
+
+    const { error } = useAuth('/profile');
+    const statusCode = get(error, 'response.status') || null;
+
+    useEffect(() => {
+      const init = async () => {
+        if (!token) {
+          setRole('');
+          setUser('');
+          setPlan('');
+          Cookies.set('token', '');
+          await router.replace('/login');
+          return;
+        }
+        if (token && router.asPath === '/login') {
+          await router.replace('/user/overview');
+          return;
+        }
+        if (statusCode === 401) {
+          setToken('');
+          setRole('');
+          setUser('');
+          setPlan('');
+          Cookies.set('token', '');
+          await router.replace('/login');
+          return;
+        }
+        setLoading(false);
+      };
+
+      init();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [token, router, statusCode]);
+
+    if (loading || !token) {
+      return null; // or a loading spinner
+    }
+
+    // Use type assertion to ensure Component is correctly typed
+    return React.createElement(Component as any, props as any);
+  };
+
+  return Wrapper;
+}
+
+export default withAuth;
diff --git a/apps/app/src/utils/libs.ts b/apps/app/src/utils/libs.ts
index 6ea78fed..0ea7c1b1 100644
--- a/apps/app/src/utils/libs.ts
+++ b/apps/app/src/utils/libs.ts
@@ -1,4 +1,5 @@
 import Big from 'big.js';
+import get from 'lodash/get';
 import { FieldType, GuessableTypeString } from './types';
 
 export const stripEmpty = <T extends Record<string, any>>(obj: T): T =>
@@ -146,11 +147,11 @@ export function formatCustomDate(inputDate: string) {
 }
 
 export function localFormat(number: string) {
-  const bigNumber = Big(number);
-  const formattedNumber = bigNumber
-    .toFixed(5)
-    .replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); // Add commas before the decimal point
-  return formattedNumber.replace(/\.?0*$/, ''); // Remove trailing zeros and the dot
+  const bigNumber = number && new Big(number); // Instantiate Big correctly
+  const formattedNumber =
+    bigNumber && bigNumber.toFixed(5).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); // Add commas before the decimal point
+
+  return formattedNumber && formattedNumber.replace(/\.?0*$/, ''); // Remove trailing zeros and the dot
 }
 
 export function priceFormat(number: string) {
@@ -598,6 +599,35 @@ export const getCookieFromRequest = (
   return cookie ? cookie.split('=')[1] : null;
 };
 
+export const catchErrors = (error: any) => {
+  try {
+    const errors = get(error, 'response.data.errors') || {};
+    const common = get(error, 'response.data.message') || null;
+    let message;
+
+    if (errors?.message) {
+      message = errors.message;
+    } else {
+      Object.keys(errors).forEach((key) => {
+        message = get(errors, `${key}.message`) || '';
+      });
+    }
+    return message || common || error.message;
+  } catch (e) {
+    return 'Something went wrong, try again later';
+  }
+};
+
+export const removeProtocol = (url?: string) => {
+  // Remove http:// or https:// from the beginning of the URL
+  return url?.replace(/^https?:\/\//, '');
+};
+
+export const centsToDollar = (val: number) => {
+  const value = (val / 100).toFixed(2);
+  return value;
+};
+
 export const parseGitHubLink = (snapshot: string) => {
   const regex =
     /^(?:git\+https:\/\/github\.com\/([^\/]+\/[^\/]+)(?:\.git)?\?rev=([a-f0-9]+)|https:\/\/github\.com\/([^\/]+\/[^\/]+)(?:\.git)?(?:\/tree\/([a-f0-9]+))?)$/;
@@ -627,3 +657,32 @@ export const parseLink = (link: string) => {
     return null;
   }
 };
+
+export const catchErrors = (error: any) => {
+  try {
+    const errors = get(error, 'response.data.errors') || {};
+    const common = get(error, 'response.data.message') || null;
+    let message;
+
+    if (errors?.message) {
+      message = errors.message;
+    } else {
+      Object.keys(errors).forEach((key) => {
+        message = get(errors, `${key}.message`) || '';
+      });
+    }
+    return message || common || error.message;
+  } catch (e) {
+    return 'Something went wrong, try again later';
+  }
+};
+
+export const removeProtocol = (url?: string) => {
+  // Remove http:// or https:// from the beginning of the URL
+  return url?.replace(/^https?:\/\//, '');
+};
+
+export const centsToDollar = (val: number) => {
+  const value = (val / 100).toFixed(2);
+  return value;
+};
diff --git a/apps/app/src/utils/types.ts b/apps/app/src/utils/types.ts
index 44f95860..6c2c57c0 100644
--- a/apps/app/src/utils/types.ts
+++ b/apps/app/src/utils/types.ts
@@ -1683,3 +1683,51 @@ export type ContractData = {
   onChainCodeHash: string;
   contractMetadata: ContractMetadata | null;
 };
+
+export type CampaignData = {
+  data?: {
+    title?: string;
+    url?: string;
+    is_active?: number;
+    mobile_image_url?: string;
+    desktop_image_right_url?: string;
+    start_date?: string;
+    subscription?: {
+      status?: string;
+    };
+    text?: string;
+    site_name?: string;
+    link_name?: string;
+    icon?: string;
+  };
+};
+
+export type CampaignProps = {
+  campaignId?: string | string[];
+  campaignData: CampaignData;
+  mutate: () => void;
+  loading: boolean;
+  campaignMutate: () => void;
+};
+
+export type currentCampaign = {
+  key: string;
+  id: string;
+  title: string;
+  is_active: number;
+  impression_count: number;
+  click_count: number;
+  start_date: string;
+  is_approved?: number;
+  price_monthly: number;
+  price_annually: number;
+  user?: {
+    username: string;
+  };
+  subscription?: {
+    status: string;
+    campaign_plan?: {
+      title: string;
+    };
+  };
+};
diff --git a/apps/app/src/utils/validationSchema.ts b/apps/app/src/utils/validationSchema.ts
new file mode 100644
index 00000000..72fa6747
--- /dev/null
+++ b/apps/app/src/utils/validationSchema.ts
@@ -0,0 +1,218 @@
+import * as Yup from 'yup';
+import { CampaignData } from './types';
+
+type ImageDimensions = {
+  width: number;
+  height: number;
+};
+
+export const getImageDimensions = (file: File): Promise<ImageDimensions> => {
+  return new Promise((resolve, reject) => {
+    // Check if the file is an image
+    if (
+      ![
+        'image/png',
+        'image/jpeg',
+        'image/jpg',
+        'image/gif',
+        'image/webp',
+        'image/svg+xml',
+      ].includes(file.type)
+    ) {
+      reject(new Error('File is not an image'));
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      resolve({ width: img.width, height: img.height });
+    };
+    img.onerror = reject;
+    img.src = URL.createObjectURL(file);
+  });
+};
+
+export const typeValidation = Yup.object().shape({
+  name: Yup.string()
+    .matches(/^[a-zA-Z\s]*$/, 'Name should only contain letters and spaces')
+    .required('Name is required'),
+  width: Yup.number()
+    .typeError('Width must be a number')
+    .required('width is required'),
+  height: Yup.number()
+    .typeError('Height must be a number')
+    .required('Height is required'),
+});
+
+export const textCampaignValidation = (campaignData: CampaignData) => {
+  return Yup.object().shape({
+    url: Yup.string()
+      .matches(
+        /^(https?:\/\/)?((([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})|localhost)(:\d+)?(\/[-a-zA-Z0-9%_.~+&:]*)*(\?[;&a-zA-Z0-9%_.~+=-]*)?(#[a-zA-Z0-9_-]*)?$/,
+        'Enter a valid URL',
+      )
+      .required('URL is required'),
+    text: Yup.string().required('Display text is required'),
+    site_name: Yup.string().required('Site name is required'),
+    link_name: Yup.string().required('Link text is required'),
+    icon: Yup.mixed()
+      .required('Icon image is required')
+      .test(
+        'fileType',
+        'Unsupported file format. Only .png, .jpg, .jpeg, .gif, .webp, .svg are allowed.',
+        (value) => {
+          if (!value || value === campaignData?.data?.icon) return true; // Skip validation if no file is selected
+          return [
+            'image/png',
+            'image/jpeg',
+            'image/jpg',
+            'image/gif',
+            'image/webp',
+            'image/svg+xml',
+          ].includes(value.type);
+        },
+      )
+      .test(
+        'imageDimensions',
+        'Icon image dimensions should be 20px*20px',
+        async function (value) {
+          if (!value || value === campaignData?.data?.icon) {
+            return true; // Skip validation if the value hasn't changed
+          }
+          if (value instanceof File) {
+            try {
+              const { width, height } = await getImageDimensions(value);
+              return width === 20 && height === 20;
+            } catch (error) {}
+          }
+          return false; // Return false if the value is not a File
+        },
+      ),
+  });
+};
+
+export const textAdCampaignValidation = () => {
+  return Yup.object().shape({
+    url: Yup.string()
+      .matches(
+        /^(https?:\/\/)?((([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})|localhost)(:\d+)?(\/[-a-zA-Z0-9%_.~+&:]*)*(\?[;&a-zA-Z0-9%_.~+=-]*)?(#[a-zA-Z0-9_-]*)?$/,
+        'Enter a valid URL',
+      )
+      .required('URL is required'),
+    text: Yup.string().required('Display text is required'),
+    site_name: Yup.string().required('Site name is required'),
+    link_name: Yup.string().required('Link text is required'),
+    icon: Yup.mixed()
+      .required('Icon image is required')
+      .test(
+        'fileType',
+        'Unsupported file format. Only .png, .jpg, .jpeg, .gif, .webp, .svg are allowed.',
+        (value) => {
+          if (!value) return true; // Skip validation if no file is selected
+          return [
+            'image/png',
+            'image/jpeg',
+            'image/jpg',
+            'image/gif',
+            'image/webp',
+            'image/svg+xml',
+          ].includes(value.type);
+        },
+      )
+      .test(
+        'imageDimensions',
+        'Icon image dimensions should be 20px*20px',
+        async function (value) {
+          if (!value) {
+            return true; // Skip validation if the value hasn't changed
+          }
+          if (value instanceof File) {
+            try {
+              const { width, height } = await getImageDimensions(value);
+              return width === 20 && height === 20;
+            } catch (error) {}
+          }
+          return false; // Return false if the value is not a File
+        },
+      ),
+  });
+};
+
+export const bannerCampaignValidation = (campaignData: CampaignData) => {
+  return Yup.object().shape({
+    url: Yup.string()
+      .matches(
+        /^(https?:\/\/)?((([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})|localhost)(:\d+)?(\/[-a-zA-Z0-9%_.~+&:]*)*(\?[;&a-zA-Z0-9%_.~+=-]*)?(#[a-zA-Z0-9_-]*)?$/,
+        'Enter a valid URL',
+      )
+      .required('URL is required'),
+    desktop_image_right: Yup.mixed()
+      .required('Desktop image is required')
+      .test(
+        'fileType',
+        'Unsupported file format. Only .png, .jpg, .jpeg, .gif, .webp, .svg are allowed.',
+        (value) => {
+          if (!value || value === campaignData?.data?.desktop_image_right_url)
+            return true; // Skip validation if no file is selected
+          return [
+            'image/png',
+            'image/jpeg',
+            'image/jpg',
+            'image/gif',
+            'image/webp',
+            'image/svg+xml',
+          ].includes(value.type);
+        },
+      )
+      .test(
+        'imageDimensions',
+        'Desktop image dimensions should be 320px*100px',
+        async function (value) {
+          if (!value || value === campaignData?.data?.desktop_image_right_url) {
+            return true; // Skip validation if the value hasn't changed
+          }
+          if (value instanceof File) {
+            try {
+              const { width, height } = await getImageDimensions(value);
+              return width === 320 && height === 100;
+            } catch (error) {}
+          }
+          return false; // Return false if the value is not a File
+        },
+      ),
+    mobile_image: Yup.mixed()
+      .required('Mobile image is required')
+      .test(
+        'fileType',
+        'Unsupported file format. Only .png, .jpg, .jpeg, .gif, .webp, .svg are allowed.',
+        (value) => {
+          if (!value || value === campaignData?.data?.mobile_image_url) {
+            return true; // Skip validation if no file is selected
+          }
+          return [
+            'image/png',
+            'image/jpeg',
+            'image/jpg',
+            'image/gif',
+            'image/webp',
+            'image/svg+xml',
+          ].includes(value.type);
+        },
+      )
+      .test(
+        'imageDimensions',
+        'Mobile image dimensions should be 730px*90px',
+        async function (value) {
+          if (!value || value === campaignData?.data?.mobile_image_url) {
+            return true; // Skip validation if the value hasn't changed
+          }
+          if (value instanceof File) {
+            try {
+              const { width, height } = await getImageDimensions(value);
+              return width === 730 && height === 90;
+            } catch (error) {}
+          }
+          return false; // Return false if the value is not a File
+        },
+      ),
+  });
+};
diff --git a/yarn.lock b/yarn.lock
index 7b9f441b..739280ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8682,6 +8682,14 @@
   dependencies:
     "@types/unist" "^2"
 
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/http-assert@*":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/http-assert/-/http-assert-1.5.4.tgz#2ee41bf930d871a76cdbee5c385ccbb3604302e6"
@@ -8719,6 +8727,11 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
+"@types/js-cookie@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.6.tgz#a04ca19e877687bd449f5ad37d33b104b71fdf95"
+  integrity sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==
+
 "@types/json-schema@^7.0.11", "@types/json-schema@^7.0.12":
   version "7.0.14"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.14.tgz#74a97a5573980802f32c8e47b663530ab3b6b7d1"
@@ -8919,6 +8932,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-google-recaptcha@^2.1.9":
+  version "2.1.9"
+  resolved "https://registry.yarnpkg.com/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.9.tgz#cd1ffe571fe738473b66690a86dad6c9d3648427"
+  integrity sha512-nT31LrBDuoSZJN4QuwtQSF3O89FVHC4jLhM+NtKEmVF5R1e8OY0Jo4//x2Yapn2aNHguwgX5doAq8Zo+Ehd0ug==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-syntax-highlighter@^15.5.13":
   version "15.5.13"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz#c5baf62a3219b3bf28d39cfea55d0a49a263d1f2"
@@ -11814,6 +11834,11 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -13282,6 +13307,20 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
 
+formik@^2.4.6:
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.6.tgz#4da75ca80f1a827ab35b08fd98d5a76e928c9686"
+  integrity sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^2.0.0"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -13804,6 +13843,21 @@ hey-listen@^1.0.8:
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
+highcharts-exporting@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/highcharts-exporting/-/highcharts-exporting-0.1.7.tgz#f38024b9ef78ce2ac3a39f853f83b55822ae1630"
+  integrity sha512-f+M2vuJA84LufzmpCD/E2AgIyiOrM/F6nru2lbvjZLj3N0VHjhhVyQkkAcQN0cWHR4xwGqLvcljc1tPX2VEi3w==
+
+highcharts-react-official@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/highcharts-react-official/-/highcharts-react-official-3.2.1.tgz#4b62a7af2969bdebde6b338d36f6b9bf1f1029bc"
+  integrity sha512-hyQTX7ezCxl7JqumaWiGsroGWalzh24GedQIgO3vJbkGOZ6ySRAltIYjfxhrq4HszJOySZegotEF7v+haQ75UA==
+
+highcharts@^11.4.8:
+  version "11.4.8"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-11.4.8.tgz#252e71b81c24ec9f99e756b76dbebd7546e18dda"
+  integrity sha512-5Tke9LuzZszC4osaFisxLIcw7xgNGz4Sy3Jc9pRMV+ydm6sYqsPYdU8ELOgpzGNrbrRNDRBtveoR5xS3SzneEA==
+
 highlight.js@^10.4.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
@@ -13818,7 +13872,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -15007,6 +15061,11 @@ js-cookie@^2.x.x:
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 js-sha256@0.9.0, js-sha256@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.9.0.tgz#0b89ac166583e91ef9123644bd3c5334ce9d0966"
@@ -15426,7 +15485,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@4.17.21, lodash-es@^4.17.15:
+lodash-es@4.17.21, lodash-es@^4.17.15, lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -18675,6 +18734,14 @@ raw-body@2.5.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-async-script@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
+  integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.0"
+
 react-bootstrap-typeahead@^6.0.0:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/react-bootstrap-typeahead/-/react-bootstrap-typeahead-6.3.1.tgz#db740a8a57b4598fddab15f9608d7a45c254f450"
@@ -18738,6 +18805,11 @@ react-error-overlay@6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-fast-compare@^3.0.1, react-fast-compare@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
@@ -18760,6 +18832,14 @@ react-focus-lock@2.5.2:
     use-callback-ref "^1.2.5"
     use-sidecar "^1.0.5"
 
+react-google-recaptcha@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz#44aaab834495d922b9d93d7d7a7fb2326315b4ab"
+  integrity sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==
+  dependencies:
+    prop-types "^15.5.0"
+    react-async-script "^1.2.0"
+
 react-hook-form@7.46.1:
   version "7.46.1"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.46.1.tgz#39347dbff19d980cb41087ac32a57abdc6045bb3"
@@ -18792,6 +18872,11 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-loading-skeleton@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.4.0.tgz#c71a3a17259d08e4064974aa0b07f150a09dfd57"
+  integrity sha512-1oJEBc9+wn7BbkQQk7YodlYEIjgeR+GrRjD+QXkVjwZN7LGIcAFHrx4NhT7UHGBxNY1+zax3c+Fo6XQM4R7CgA==
+
 react-markdown@^7.1.0:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-7.1.2.tgz#c9fa9d1c87e24529f028e1cdf731e81ccdd8e547"
@@ -20248,6 +20333,11 @@ tiny-glob@^0.2.9:
     globalyzer "0.1.0"
     globrex "^0.1.2"
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"