diff --git a/client/.env b/client/.env
index e69de29..394093c 100644
--- a/client/.env
+++ b/client/.env
@@ -0,0 +1 @@
+VITE_API_URL=https://subly-backend-iuej.onrender.com
\ No newline at end of file
diff --git a/client/package-lock.json b/client/package-lock.json
index 35e9714..4c6fa0c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -13,6 +13,7 @@
         "@tailwindcss/vite": "^4.3.0",
         "@tanstack/react-query": "^5.100.14",
         "@tanstack/react-query-devtools": "^5.101.0",
+        "@vercel/analytics": "^2.0.1",
         "axios": "^1.16.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -3734,6 +3735,48 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@vercel/analytics": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-2.0.1.tgz",
+      "integrity": "sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@remix-run/react": "^2",
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "nuxt": ">= 3",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/react": {
+          "optional": true
+        },
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "nuxt": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.2.tgz",
diff --git a/client/package.json b/client/package.json
index 36828ad..b6014f8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,7 @@
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/react-query": "^5.100.14",
     "@tanstack/react-query-devtools": "^5.101.0",
+    "@vercel/analytics": "^2.0.1",
     "axios": "^1.16.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/client/src/components/Breadcrumb.jsx b/client/src/components/Breadcrumb.jsx
index afb3411..6d7a3e9 100644
--- a/client/src/components/Breadcrumb.jsx
+++ b/client/src/components/Breadcrumb.jsx
@@ -1,29 +1,33 @@
-import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbLink, BreadcrumbPage } from "./ui/breadcrumb";
+import { Fragment } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  BreadcrumbLink,
+  BreadcrumbPage,
+} from "./ui/breadcrumb";
 import { Link } from "react-router";
 
-
-export default function Breadcrumbs({crumbs}) {
-    return (
-      <Breadcrumb>
-        <BreadcrumbList>
-          {crumbs.map((item, index) => (
-            <BreadcrumbItem
-              key={item.href}
-          
-            >
+export default function Breadcrumbs({ crumbs }) {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {crumbs.map((item, index) => (
+          <Fragment key={item.href}>
+            <BreadcrumbItem key={item.href}>
               {index === crumbs.length - 1 ? (
-                <BreadcrumbPage>
-                  {item.name}
-                </BreadcrumbPage>
+                <BreadcrumbPage>{item.name}</BreadcrumbPage>
               ) : (
                 <BreadcrumbLink asChild={true}>
                   <Link to={item.href}>{item.name}</Link>
                 </BreadcrumbLink>
               )}
-              {index < crumbs.length - 1 && <BreadcrumbSeparator />}
             </BreadcrumbItem>
-          ))}
-        </BreadcrumbList>
-      </Breadcrumb>
-    );
-};
\ No newline at end of file
+            {index < crumbs.length - 1 && <BreadcrumbSeparator />}
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
diff --git a/client/src/components/dashboard/AddForm.jsx b/client/src/components/dashboard/AddForm.jsx
index 7bf4c35..38647c8 100644
--- a/client/src/components/dashboard/AddForm.jsx
+++ b/client/src/components/dashboard/AddForm.jsx
@@ -49,7 +49,7 @@ const AddForm = ({ rates, isError, mutation }) => {
       name: "",
       amount: undefined,
       currency: "",
-      duration: "",
+      billingCycle: "",
       category: "",
     },
   });
@@ -65,7 +65,9 @@ const AddForm = ({ rates, isError, mutation }) => {
     // We swap React Router's <Form> action logic for RHF's handleSubmit
     <form onSubmit={handleSubmit(onSubmit)}>
       {mutation.isError && (
-        <p className="mb-4 text-sm text-red-500 bg-red-200 p-2 rounded-md">{mutation.error.message}</p>
+        <p className="mb-4 text-sm text-red-500 bg-red-200 p-2 rounded-md">
+          {mutation.error.message}
+        </p>
       )}
       <FieldSet>
         <FieldGroup>
diff --git a/client/src/components/dashboard/Overview.jsx b/client/src/components/dashboard/Overview.jsx
index c3d8f9c..63fb76b 100644
--- a/client/src/components/dashboard/Overview.jsx
+++ b/client/src/components/dashboard/Overview.jsx
@@ -232,7 +232,7 @@ export function OverviewTable({ subscriptions, baseCurrency }) {
   // ensure we always have an array to pass down to Desktop/Mobile
 
 
-  console.log(subscriptions);
+
   return (
     <Card className="rounded-3xl border-subly-border bg-subly-card shadow-sm mt-6">
      
diff --git a/client/src/components/dashboard/Stats.jsx b/client/src/components/dashboard/Stats.jsx
index fdf3ba2..bf5501f 100644
--- a/client/src/components/dashboard/Stats.jsx
+++ b/client/src/components/dashboard/Stats.jsx
@@ -23,7 +23,7 @@ const toneStyles = {
 
 export function StatCard({ stat , baseCurrency }) {
   
-  console.log("StatCard received stat:", stat);
+
 
   return (
     <>
diff --git a/client/src/lib/utils.js b/client/src/lib/utils.js
index 27e270f..b2e7b10 100644
--- a/client/src/lib/utils.js
+++ b/client/src/lib/utils.js
@@ -7,7 +7,7 @@ export function cn(...inputs) {
 }
 
 export function getApiBaseUrl() {
-  return import.meta.env.VITE_API_URL || "http://localhost:3000";
+  return import.meta.env.VITE_API_URL;
 }
 
 export function formatMoney(amountInMinorUnit, currency) {
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 125d757..ac0e9ff 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -21,7 +21,7 @@ import NotFound from "./pages/NotFound";
 import { adminLoader, authLoader, dashboardLoader } from "./lib/loader.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-
+import { Analytics } from "@vercel/analytics/react";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -90,6 +90,7 @@ createRoot(document.getElementById("root")).render(
       <RouterProvider router={router} />
 
       <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
+      <Analytics />
     </QueryClientProvider>
   </StrictMode>,
 );
diff --git a/client/src/pages/dashboard/Admin.jsx b/client/src/pages/dashboard/Admin.jsx
index 2e0c64d..01bd320 100644
--- a/client/src/pages/dashboard/Admin.jsx
+++ b/client/src/pages/dashboard/Admin.jsx
@@ -1,5 +1,12 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ShieldCheck, Users, CreditCard, History, RefreshCw } from "lucide-react";
+import {
+  ShieldCheck,
+  Users,
+  CreditCard,
+  History,
+  RefreshCw,
+  Shield,
+} from "lucide-react";
 import { toast } from "sonner";
 
 import Breadcrumbs from "@/components/Breadcrumb";
@@ -22,6 +29,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { fetchWithAuth, formatDate } from "@/lib/utils";
+import { toneStyles } from "@/lib/var";
 
 const metricCards = [
   {
@@ -29,25 +37,49 @@ const metricCards = [
     label: "Total users",
     icon: Users,
     getValue: (stats) => stats?.users?.total ?? 0,
+
+    color: "blue",
+  },
+  {
+    key: "admin",
+    label: "Total user with admin role",
+    icon: Shield,
+    getValue: (stats) => stats?.totalUserByRoles?.ADMIN ?? 0,
+
+    color: "success",
+  },
+  {
+    key: "user",
+    label: "Total user with user role",
+    icon: Users,
+    getValue: (stats) => stats?.totalUserByRoles?.USER ?? 0,
+
+    color: "danger",
   },
   {
     key: "subscriptions",
-    label: "Subscriptions",
+    label: "Total Subscriptions",
     icon: CreditCard,
     getValue: (stats) => stats?.subscriptions?.total ?? 0,
+
+    color: "purple",
   },
   {
     key: "history",
     label: "History records",
     icon: History,
     getValue: (stats) => stats?.history?.total ?? 0,
+    color: "purple",
   },
   {
     key: "currency",
     label: "Rates updated",
     icon: RefreshCw,
     getValue: (stats) =>
-      stats?.currency?.lastUpdated ? formatDate(stats.currency.lastUpdated) : "N/A",
+      stats?.currency?.lastUpdated
+        ? formatDate(stats.currency.lastUpdated)
+        : "N/A",
+    color: "danger",
   },
 ];
 
@@ -56,15 +88,23 @@ function AdminMetricCard({ item, stats }) {
 
   return (
     <Card className="rounded-xl border-subly-border bg-subly-card shadow-sm">
-      <CardContent className="flex items-center gap-4 pt-2">
+      <CardContent className="flex flex-row-reverse justify-between items-center gap-4 pt-2">
         <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-subly-soft-blue text-subly-brand-blue">
           <Icon size={20} />
         </span>
         <div>
-          <p className="text-sm text-subly-text-secondary">{item.label}</p>
-          <p className="mt-1 text-xl font-bold text-subly-text-primary">
+          <p className="text-sm text-subly-text-secondary font-medium capitalize">
+            {item.key}
+          </p>
+          <p className="mt-3 text-3xl font-bold tracking-tight text-subly-text-primary">
             {item.getValue(stats)}
           </p>
+          <p className="mt-2 flex items-center gap-2 text-xs font-medium text-subly-text-secondary">
+            <span
+              className={`h-2 w-2 rounded-full ${toneStyles[item.color].dot}`}
+            />
+            {item.label}
+          </p>
         </div>
       </CardContent>
     </Card>
@@ -184,12 +224,14 @@ export default function Admin() {
                   <TableHead>Name</TableHead>
                   <TableHead>Username</TableHead>
                   <TableHead>Email</TableHead>
+                  <TableHead>Roles</TableHead>
                   <TableHead className="text-right">Role actions</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {users.map((user) => {
-                  const pendingUser = roleMutation.variables?.userId === user.id;
+                  const pendingUser =
+                    roleMutation.variables?.userId === user.id;
 
                   return (
                     <TableRow key={user.id}>
@@ -198,6 +240,11 @@ export default function Admin() {
                       </TableCell>
                       <TableCell>{user.username}</TableCell>
                       <TableCell>{user.email}</TableCell>
+                      <TableCell
+                        className={`rounded-md  ${user.role === "ADMIN" ? "text-green-400" : "text-red-400"} `}
+                      >
+                        {user.role}
+                      </TableCell>
                       <TableCell>
                         <div className="flex justify-end gap-2">
                           <Button
diff --git a/client/src/pages/dashboard/Overview.jsx b/client/src/pages/dashboard/Overview.jsx
index e668caa..fd636e5 100644
--- a/client/src/pages/dashboard/Overview.jsx
+++ b/client/src/pages/dashboard/Overview.jsx
@@ -16,19 +16,18 @@ import { useQuery } from "@tanstack/react-query";
 import { fetchWithAuth } from "@/lib/utils";
 import { SubscriptionTableSkeleton } from "@/components/dashboard/Skeleton";
 const Overview = () => {
-  const data = useRouteLoaderData("dashboard")
-  
+  const data = useRouteLoaderData("dashboard");
 
   const { data: stats, isLoading } = useQuery({
     queryKey: ["subscriptions", "info"],
-    queryFn: () => fetchWithAuth("/api/subscription/info").then(res => res.json()),
-    
+    queryFn: () =>
+      fetchWithAuth("/api/subscription/info").then((res) => res.json()),
   });
 
-  const { data: rawData, isLoading:subsLoading  } = useQuery({
-    queryKey: ['subscription'],
-    queryFn: ()=> fetchWithAuth('/api/subscription').then(res => res.json())
-  })
+  const { data: rawData, isLoading: subsLoading } = useQuery({
+    queryKey: ["subscription"],
+    queryFn: () => fetchWithAuth("/api/subscription").then((res) => res.json()),
+  });
 
   const { data: chartData, isLoading: chartDataLoading } = useQuery({
     queryKey: ["chart", "line chart"],
@@ -41,11 +40,6 @@ const Overview = () => {
     queryFn: () =>
       fetchWithAuth("/api/subscription/categories").then((res) => res.json()),
   });
-  console.log(pieChart);
-
-
-
-  console.log(rawData)
 
   return (
     <section>
diff --git a/client/src/pages/dashboard/Subscriptions.jsx b/client/src/pages/dashboard/Subscriptions.jsx
index 7f86af5..b09fa8e 100644
--- a/client/src/pages/dashboard/Subscriptions.jsx
+++ b/client/src/pages/dashboard/Subscriptions.jsx
@@ -14,14 +14,11 @@ const Subscriptions = () => {
   const page = searchParams.get("page") || 1;
   const userData = useRouteLoaderData("dashboard");
   const handlePageChange = (newPage) => {
-    
     searchParams.set("page", newPage);
 
-    
     setSearchParams(searchParams);
   };
-  console.log("User data in Subscriptions:", userData);
-
+  
   const { data, isLoading, isError, error } = useQuery({
     queryKey: ["subscriptions", { search: searchQuery, page }],
 
diff --git a/client/vercel.json b/client/vercel.json
new file mode 100644
index 0000000..1323cda
--- /dev/null
+++ b/client/vercel.json
@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}
diff --git a/server/src/controllers/admin.controller.js b/server/src/controllers/admin.controller.js
index 748f5e1..352a72f 100644
--- a/server/src/controllers/admin.controller.js
+++ b/server/src/controllers/admin.controller.js
@@ -4,6 +4,7 @@ export async function getAdminStats(req, res, next) {
   try {
     const [
       totalUsers,
+      totalRoleUser,
       totalSubscriptions,
       subscriptionsByStatus,
       subscriptionsByCategory,
@@ -12,6 +13,13 @@ export async function getAdminStats(req, res, next) {
     ] = await prisma.$transaction([
       prisma.user.count(),
 
+      prisma.user.groupBy({
+        by: ["role"],
+        _count: {
+          id: true,
+        },
+      }),
+
       prisma.subscription.count(),
 
       prisma.subscription.groupBy({
@@ -48,10 +56,19 @@ export async function getAdminStats(req, res, next) {
       CANCELLED: 0,
     };
 
+    const roleCounts = {
+      ADMIN: 0,
+      USER: 0,
+    };
+
     subscriptionsByStatus.forEach((item) => {
       statusCounts[item.status] = item._count.id;
     });
 
+    totalRoleUser.forEach((item) => {
+      roleCounts[item.role] = item._count.id;
+    });
+
     const categoryCounts = subscriptionsByCategory.map((item) => ({
       category: item.category,
       count: item._count.id,
@@ -62,6 +79,7 @@ export async function getAdminStats(req, res, next) {
       stats: {
         users: {
           total: totalUsers,
+          totalUserByRoles: roleCounts,
         },
 
         subscriptions: {
@@ -88,17 +106,17 @@ export async function getAdminStats(req, res, next) {
 export async function getAllUsers(req, res, next) {
     try {
         const users = await prisma.user.findMany({
-            orderBy: {
-                createdAt: "desc"
-            },
-            select: {
-                id: true,
-                email: true,
-                name: true,
-                username: true,
-                
-            }
-        })
+          orderBy: {
+            createdAt: "desc",
+          },
+          select: {
+            id: true,
+            email: true,
+            name: true,
+            username: true,
+            role: true,
+          },
+        });
 
         if (!users) {
             return res.status(404).json({message: 'No user found'})
@@ -200,7 +218,7 @@ export async function demoteUser(req, res, next) {
         },
       });
 
-      return res.json({ message: "User is successfully promoted" });
+      return res.json({ message: "User is successfully demoted" });
     } catch (error) {
         console.error(error)
       next(error);