diff --git a/client/.env b/client/.env
index 38cdb7e..e69de29 100644
--- a/client/.env
+++ b/client/.env
@@ -1 +0,0 @@
-VITE_API_URL='https://subly-backend-iuej.onrender.com'
\ No newline at end of file
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index 1dc3aa2..1e2ddc4 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -1,4 +1,4 @@
-import { NavLink } from "react-router"
+import { NavLink, useRouteLoaderData } from "react-router"
 import { navLinks } from "../lib/var"
 
 function BottomNavLink({ item }) {
@@ -36,10 +36,15 @@ function BottomNavLink({ item }) {
 }
 
 export function Navbar() {
+    const data = useRouteLoaderData("dashboard");
+    const visibleLinks = navLinks.filter(
+      (item) => !item.adminOnly || data?.user?.role === "ADMIN",
+    );
+
     return (
       <nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-subly-border bg-subly-card/95 px-2 py-2 shadow-[0_-8px_30px_rgba(8,17,31,0.08)] backdrop-blur lg:hidden">
         <div className="mx-auto flex max-w-md items-center gap-1">
-          {navLinks.map((item) => (
+          {visibleLinks.map((item) => (
             <BottomNavLink key={item.path} item={item} />
           ))}
         </div>
diff --git a/client/src/components/Sidebar.jsx b/client/src/components/Sidebar.jsx
index 5a9388e..d722d20 100644
--- a/client/src/components/Sidebar.jsx
+++ b/client/src/components/Sidebar.jsx
@@ -1,4 +1,4 @@
-import { NavLink} from "react-router";
+import { NavLink, useRouteLoaderData } from "react-router";
 import { navLinks } from "../lib/var";
 import SublyLogo from "./SublyLogo";
 
@@ -40,6 +40,11 @@ function SidebarLink({ item }) {
   );
 }
 export function Sidebar() {
+  const data = useRouteLoaderData("dashboard");
+  const visibleLinks = navLinks.filter(
+    (item) => !item.adminOnly || data?.user?.role === "ADMIN",
+  );
+
   return (
     <aside className="fixed left-0 top-0 hidden h-screen w-72 border-r border-subly-border bg-subly-card px-5 py-6 lg:block">
       <div className="mb-10">
@@ -47,7 +52,7 @@ export function Sidebar() {
       </div>
 
       <nav className="space-y-2">
-        {navLinks.map((item) => (
+        {visibleLinks.map((item) => (
           <SidebarLink key={item.path} item={item} />
         ))}
       </nav>
@@ -64,4 +69,3 @@ export function Sidebar() {
     </aside>
   );
 }
-
diff --git a/client/src/components/dashboard/Chart.jsx b/client/src/components/dashboard/Chart.jsx
index dd20952..739dfd2 100644
--- a/client/src/components/dashboard/Chart.jsx
+++ b/client/src/components/dashboard/Chart.jsx
@@ -190,6 +190,11 @@ export function SpendingOverviewChart({ chartData, baseCurrency }) {
 }
 
 export function SpendingByCategoryChart({ pieChart, baseCurrency }) {
+  const categoryTotal = Array.isArray(pieChart?.categoryTotal)
+    ? pieChart.categoryTotal
+    : [];
+  const grandTotal = pieChart?.grandTotal ?? 0;
+
   return (
     <Card className="rounded-3xl border-subly-border bg-subly-card shadow-sm">
       <CardHeader>
@@ -220,7 +225,7 @@ export function SpendingByCategoryChart({ pieChart, baseCurrency }) {
               />
 
               <Pie
-                data={pieChart.categoryTotal}
+                data={categoryTotal}
                 dataKey="amount"
                 nameKey="category"
                 innerRadius={65}
@@ -228,7 +233,7 @@ export function SpendingByCategoryChart({ pieChart, baseCurrency }) {
                 paddingAngle={4}
                 strokeWidth={0}
               >
-                {pieChart?.categoryTotal.map((item) => (
+                {categoryTotal.map((item) => (
                   <Cell
                     key={item.category}
                     fill={chartConfig[item.id]?.color || "#888888"}
@@ -243,14 +248,14 @@ export function SpendingByCategoryChart({ pieChart, baseCurrency }) {
               Total
             </p>
             <p className="text-lg font-bold text-subly-text-primary">
-              {formatMoney(pieChart?.grandTotal, baseCurrency)}
+              {formatMoney(grandTotal, baseCurrency)}
             </p>
           </div>
         </div>
 
         <div className="mt-5 space-y-3">
-          {pieChart &&
-            pieChart?.categoryTotal.map((item) => {
+          {categoryTotal.length > 0 ? (
+            categoryTotal.map((item) => {
               return (
                 <div
                   key={item.category}
@@ -277,7 +282,12 @@ export function SpendingByCategoryChart({ pieChart, baseCurrency }) {
                   </div>
                 </div>
               );
-            })}
+            })
+          ) : (
+            <p className="rounded-xl border border-dashed border-subly-border px-4 py-6 text-center text-sm text-subly-text-secondary">
+              No category spending yet.
+            </p>
+          )}
         </div>
       </CardContent>
     </Card>
diff --git a/client/src/components/ui/alert-dialog.jsx b/client/src/components/ui/alert-dialog.jsx
index 05b38f8..3e0dee5 100644
--- a/client/src/components/ui/alert-dialog.jsx
+++ b/client/src/components/ui/alert-dialog.jsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
diff --git a/client/src/components/ui/badge.jsx b/client/src/components/ui/badge.jsx
index 6a07934..a68dce4 100644
--- a/client/src/components/ui/badge.jsx
+++ b/client/src/components/ui/badge.jsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+/* eslint-disable react-refresh/only-export-components */
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui"
 
diff --git a/client/src/components/ui/breadcrumb.jsx b/client/src/components/ui/breadcrumb.jsx
index cb11cfd..74da665 100644
--- a/client/src/components/ui/breadcrumb.jsx
+++ b/client/src/components/ui/breadcrumb.jsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { Slot } from "radix-ui"
 
 import { cn } from "@/lib/utils"
diff --git a/client/src/components/ui/button.jsx b/client/src/components/ui/button.jsx
index 32af78d..01b0758 100644
--- a/client/src/components/ui/button.jsx
+++ b/client/src/components/ui/button.jsx
@@ -1,4 +1,4 @@
-import * as React from "react"
+/* eslint-disable react-refresh/only-export-components */
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui"
 
diff --git a/client/src/components/ui/card.jsx b/client/src/components/ui/card.jsx
index 9020464..dba986f 100644
--- a/client/src/components/ui/card.jsx
+++ b/client/src/components/ui/card.jsx
@@ -1,5 +1,3 @@
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
 
 function Card({
diff --git a/client/src/components/ui/input.jsx b/client/src/components/ui/input.jsx
index ae5b90a..3733583 100644
--- a/client/src/components/ui/input.jsx
+++ b/client/src/components/ui/input.jsx
@@ -1,5 +1,3 @@
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
 
 function Input({
diff --git a/client/src/components/ui/label.jsx b/client/src/components/ui/label.jsx
index 056846f..ff0c494 100644
--- a/client/src/components/ui/label.jsx
+++ b/client/src/components/ui/label.jsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { Label as LabelPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
diff --git a/client/src/components/ui/pagination.jsx b/client/src/components/ui/pagination.jsx
index 6af4873..f4356cb 100644
--- a/client/src/components/ui/pagination.jsx
+++ b/client/src/components/ui/pagination.jsx
@@ -1,5 +1,3 @@
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
diff --git a/client/src/components/ui/select.jsx b/client/src/components/ui/select.jsx
index 0aca42c..99c9bb6 100644
--- a/client/src/components/ui/select.jsx
+++ b/client/src/components/ui/select.jsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { Select as SelectPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
diff --git a/client/src/components/ui/separator.jsx b/client/src/components/ui/separator.jsx
index 56911ac..1ec5815 100644
--- a/client/src/components/ui/separator.jsx
+++ b/client/src/components/ui/separator.jsx
@@ -1,6 +1,5 @@
 "use client"
 
-import * as React from "react"
 import { Separator as SeparatorPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
diff --git a/client/src/components/ui/table.jsx b/client/src/components/ui/table.jsx
index 5128be4..0fa4e6b 100644
--- a/client/src/components/ui/table.jsx
+++ b/client/src/components/ui/table.jsx
@@ -1,5 +1,3 @@
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
 
 function Table({
diff --git a/client/src/lib/action.js b/client/src/lib/action.js
index 470f642..18fa75b 100644
--- a/client/src/lib/action.js
+++ b/client/src/lib/action.js
@@ -1,17 +1,16 @@
 import { redirect } from "react-router";
 import { RegisterSchemas, LoginSchemas } from "./zodType";
+import { getApiBaseUrl } from "./utils";
 
 
 export const register = async ({ request }) => {
-  const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
+  const API_BASE_URL = getApiBaseUrl();
   try {
     const formData = await request.formData();
 
     const result = Object.fromEntries(formData);
     const confirmPassword = result.confirmPassword;
 
-    console.log(result);
-
     const parsedData = RegisterSchemas.safeParse(result);
 
     if (!parsedData.success) {
@@ -31,8 +30,6 @@ export const register = async ({ request }) => {
         message: "Invalid form input",
       };
     }
-    console.log(confirmPassword);
-
     const response = await fetch(`${API_BASE_URL}/api/auth/register`, {
       method: "POST",
       headers: {
@@ -53,9 +50,7 @@ export const register = async ({ request }) => {
       };
     }
 
-    console.log(data);
-
-    return redirect("/auth/login");
+    return redirect("/dashboard");
   } catch (err) {
     console.error(err);
 
@@ -66,7 +61,7 @@ export const register = async ({ request }) => {
 };
 
 export const login = async ({ request }) => {
-  const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
+  const API_BASE_URL = getApiBaseUrl();
   try {
     const formData = await request.formData();
 
@@ -95,7 +90,6 @@ export const login = async ({ request }) => {
         message: data.message || "Login failed",
       };
     }
-    console.log(data);
     return redirect("/dashboard");
   } catch (err) {
     console.error(err);
@@ -104,4 +98,4 @@ export const login = async ({ request }) => {
       message: "Something went wrong",
     };
   }
-};
\ No newline at end of file
+};
diff --git a/client/src/lib/loader.js b/client/src/lib/loader.js
index 9ebf486..d58d4c1 100644
--- a/client/src/lib/loader.js
+++ b/client/src/lib/loader.js
@@ -9,10 +9,24 @@ export async function dashboardLoader() {
         return await response.json();
     } catch (err) {
         console.error("Error fetching user data:", err);
-        redirect("/auth/login"); // Redirect to login page if unauthorized or on error
+        return redirect("/auth/login");
    }
 }
 
+export async function adminLoader() {
+  const data = await dashboardLoader();
+
+  if (data instanceof Response) {
+    return data;
+  }
+
+  if (data?.user?.role !== "ADMIN") {
+    return redirect("/dashboard");
+  }
+
+  return data;
+}
+
 export async function authLoader() {
   try {
     const response = await fetchWithAuth("/api/me");
@@ -24,4 +38,3 @@ export async function authLoader() {
     return null;
   }
 }
-
diff --git a/client/src/lib/utils.js b/client/src/lib/utils.js
index a44df8e..27e270f 100644
--- a/client/src/lib/utils.js
+++ b/client/src/lib/utils.js
@@ -6,6 +6,10 @@ export function cn(...inputs) {
   return twMerge(clsx(...inputs));
 }
 
+export function getApiBaseUrl() {
+  return import.meta.env.VITE_API_URL || "http://localhost:3000";
+}
+
 export function formatMoney(amountInMinorUnit, currency) {
   return new Intl.NumberFormat("en-NG", {
     style: "currency",
@@ -141,7 +145,7 @@ async function extractErrorMessage(response) {
 let refreshPromise = null;
 
 export async function fetchWithAuth(url, options = {}) {
-  const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
+  const API_BASE_URL = getApiBaseUrl();
   try {
     let response = await fetch(`${API_BASE_URL}${url}`, {
       ...options,
diff --git a/client/src/lib/var.js b/client/src/lib/var.js
index 72038bb..34a6a00 100644
--- a/client/src/lib/var.js
+++ b/client/src/lib/var.js
@@ -4,6 +4,7 @@ import {
   History,
   Bell,
   Settings,
+  ShieldCheck,
 
 } from "lucide-react";
 
@@ -39,6 +40,12 @@ export const navLinks = [
     path: "/dashboard/settings",
     icon: Settings,
   },
+  {
+    label: "Admin",
+    path: "/dashboard/admin",
+    icon: ShieldCheck,
+    adminOnly: true,
+  },
 ];
 
 export const toneStyles = {
@@ -61,4 +68,3 @@ export const toneStyles = {
 };
 
 
-
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 4dc7273..125d757 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -10,13 +10,15 @@ import Overview from "./pages/dashboard/Overview.jsx";
 import Settings from "./pages/dashboard/Settings.jsx";
 import Notification from "./pages/dashboard/Notification.jsx";
 import History from "./pages/dashboard/History.jsx";
+import Admin from "./pages/dashboard/Admin.jsx";
 import Subscriptions from "./pages/dashboard/Subscriptions.jsx";
 import Dashboard from "./layout/Dashboard.jsx";
 import Add from "./pages/dashboard/subscription/Add";
 import Edit from "./pages/dashboard/subscription/Edit";
 import Error from "./pages/Error";
+import NotFound from "./pages/NotFound";
 
-import { authLoader, dashboardLoader } from "./lib/loader.js";
+import { adminLoader, authLoader, dashboardLoader } from "./lib/loader.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
@@ -71,9 +73,15 @@ const router = createBrowserRouter([
       { path: "subscriptions/:id/edit", element: <Edit /> },
       { path: "notifications", element: <Notification /> },
       { path: "history", element: <History /> },
+      { path: "admin", element: <Admin />, loader: adminLoader },
       { path: "settings", element: <Settings /> },
+      { path: "*", element: <NotFound /> },
     ],
   },
+  {
+    path: "*",
+    element: <NotFound />,
+  },
 ]);
 
 createRoot(document.getElementById("root")).render(
diff --git a/client/src/pages/NotFound.jsx b/client/src/pages/NotFound.jsx
new file mode 100644
index 0000000..9fec29d
--- /dev/null
+++ b/client/src/pages/NotFound.jsx
@@ -0,0 +1,23 @@
+import { Link } from "react-router";
+import { SearchX } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-subly-background px-4">
+      <div className="w-full max-w-md rounded-xl border border-subly-border bg-subly-card p-8 text-center shadow-sm">
+        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-subly-soft-blue text-subly-brand-blue">
+          <SearchX size={26} />
+        </div>
+        <h1 className="mt-5 text-3xl font-bold text-subly-text-primary">404</h1>
+        <p className="mt-2 text-sm text-subly-text-secondary">
+          The page you are looking for does not exist.
+        </p>
+        <Button asChild className="mt-6">
+          <Link to="/dashboard">Go to dashboard</Link>
+        </Button>
+      </div>
+    </main>
+  );
+}
diff --git a/client/src/pages/dashboard/Admin.jsx b/client/src/pages/dashboard/Admin.jsx
new file mode 100644
index 0000000..2e0c64d
--- /dev/null
+++ b/client/src/pages/dashboard/Admin.jsx
@@ -0,0 +1,241 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ShieldCheck, Users, CreditCard, History, RefreshCw } from "lucide-react";
+import { toast } from "sonner";
+
+import Breadcrumbs from "@/components/Breadcrumb";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { fetchWithAuth, formatDate } from "@/lib/utils";
+
+const metricCards = [
+  {
+    key: "users",
+    label: "Total users",
+    icon: Users,
+    getValue: (stats) => stats?.users?.total ?? 0,
+  },
+  {
+    key: "subscriptions",
+    label: "Subscriptions",
+    icon: CreditCard,
+    getValue: (stats) => stats?.subscriptions?.total ?? 0,
+  },
+  {
+    key: "history",
+    label: "History records",
+    icon: History,
+    getValue: (stats) => stats?.history?.total ?? 0,
+  },
+  {
+    key: "currency",
+    label: "Rates updated",
+    icon: RefreshCw,
+    getValue: (stats) =>
+      stats?.currency?.lastUpdated ? formatDate(stats.currency.lastUpdated) : "N/A",
+  },
+];
+
+function AdminMetricCard({ item, stats }) {
+  const Icon = item.icon;
+
+  return (
+    <Card className="rounded-xl border-subly-border bg-subly-card shadow-sm">
+      <CardContent className="flex 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">
+            {item.getValue(stats)}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function Admin() {
+  const queryClient = useQueryClient();
+  const breadCrumb = [
+    { name: "Dashboard", href: "/dashboard" },
+    { name: "Admin", href: "/dashboard/admin" },
+  ];
+
+  const {
+    data: statsData,
+    isLoading: statsLoading,
+    isError: statsError,
+  } = useQuery({
+    queryKey: ["admin", "stats"],
+    queryFn: () => fetchWithAuth("/api/admin/stats").then((res) => res.json()),
+  });
+
+  const {
+    data: usersData,
+    isLoading: usersLoading,
+    isError: usersError,
+  } = useQuery({
+    queryKey: ["admin", "users"],
+    queryFn: () => fetchWithAuth("/api/admin/users").then((res) => res.json()),
+  });
+
+  const roleMutation = useMutation({
+    mutationFn: async ({ userId, action }) => {
+      const response = await fetchWithAuth(`/api/admin/${action}/${userId}`, {
+        method: "PATCH",
+      });
+      return response.json();
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ["admin"] });
+      toast.success(data?.message || "User role updated");
+    },
+    onError: (error) => {
+      toast.error(error.message || "Unable to update user role");
+    },
+  });
+
+  const stats = statsData?.stats;
+  const users = usersData?.users ?? [];
+
+  return (
+    <section>
+      <header className="mb-6">
+        <div className="mt-1 text-subly-text-primary">
+          <Breadcrumbs crumbs={breadCrumb} />
+        </div>
+
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <div className="flex items-center gap-2">
+              <ShieldCheck className="text-subly-brand-blue" size={26} />
+              <h1 className="text-3xl font-bold tracking-tight text-subly-text-primary">
+                Admin
+              </h1>
+            </div>
+            <p className="mt-2 text-sm text-subly-text-secondary">
+              Monitor platform activity and manage user roles.
+            </p>
+          </div>
+          <Badge className="bg-subly-soft-blue text-subly-brand-blue">
+            Admin only
+          </Badge>
+        </div>
+      </header>
+
+      {statsError ? (
+        <p className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-subly-danger">
+          Unable to load admin stats.
+        </p>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+          {statsLoading
+            ? metricCards.map((item) => (
+                <Card
+                  key={item.key}
+                  className="h-24 animate-pulse rounded-xl border-subly-border bg-subly-card"
+                />
+              ))
+            : metricCards.map((item) => (
+                <AdminMetricCard key={item.key} item={item} stats={stats} />
+              ))}
+        </div>
+      )}
+
+      <Card className="mt-6 rounded-xl border-subly-border bg-subly-card shadow-sm">
+        <CardHeader>
+          <CardTitle className="text-lg font-bold text-subly-text-primary">
+            Users
+          </CardTitle>
+          <CardDescription>
+            Promote users to admin or demote admins back to standard access.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {usersError ? (
+            <p className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-subly-danger">
+              Unable to load users.
+            </p>
+          ) : usersLoading ? (
+            <div className="flex min-h-40 items-center justify-center">
+              <Spinner className="size-8" />
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Username</TableHead>
+                  <TableHead>Email</TableHead>
+                  <TableHead className="text-right">Role actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {users.map((user) => {
+                  const pendingUser = roleMutation.variables?.userId === user.id;
+
+                  return (
+                    <TableRow key={user.id}>
+                      <TableCell className="font-medium text-subly-text-primary">
+                        {user.name}
+                      </TableCell>
+                      <TableCell>{user.username}</TableCell>
+                      <TableCell>{user.email}</TableCell>
+                      <TableCell>
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            disabled={roleMutation.isPending && pendingUser}
+                            onClick={() =>
+                              roleMutation.mutate({
+                                userId: user.id,
+                                action: "promote",
+                              })
+                            }
+                          >
+                            Promote
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            disabled={roleMutation.isPending && pendingUser}
+                            onClick={() =>
+                              roleMutation.mutate({
+                                userId: user.id,
+                                action: "demote",
+                              })
+                            }
+                          >
+                            Demote
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </section>
+  );
+}
diff --git a/client/src/pages/dashboard/History.jsx b/client/src/pages/dashboard/History.jsx
index 3c6e2e1..284f40d 100644
--- a/client/src/pages/dashboard/History.jsx
+++ b/client/src/pages/dashboard/History.jsx
@@ -1,9 +1,247 @@
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
+import { CirclePlus, Pencil, RefreshCcw } from "lucide-react";
+import { useSearchParams } from "react-router";
+import { useDebounce } from "use-debounce";
+import { useEffect, useState } from "react";
 
+import Breadcrumbs from "@/components/Breadcrumb";
+import PaginationList from "@/components/dashboard/Pagination";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { fetchWithAuth, formatCategory, formatDate, formatMoney } from "@/lib/utils";
+
+const historyTypeConfig = {
+  CREATED: {
+    label: "Created",
+    icon: CirclePlus,
+    className: "border-green-100 bg-green-50 text-subly-success",
+  },
+  EDITED: {
+    label: "Edited",
+    icon: Pencil,
+    className: "border-blue-100 bg-blue-50 text-subly-brand-blue",
+  },
+  RENEWED: {
+    label: "Renewed",
+    icon: RefreshCcw,
+    className: "border-amber-100 bg-amber-50 text-subly-warning",
+  },
+};
+
+function HistoryTypeBadge({ type }) {
+  const config = historyTypeConfig[type] || historyTypeConfig.CREATED;
+  const Icon = config.icon;
 
-const History = () => {
   return (
-    <div>History</div>
-  )
+    <Badge variant="outline" className={config.className}>
+      <Icon size={12} />
+      {config.label}
+    </Badge>
+  );
 }
 
-export default History
\ No newline at end of file
+export default function History() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchQuery = searchParams.get("search") || "";
+  const type = searchParams.get("type") || "ALL";
+  const range = searchParams.get("range") || "ALL";
+  const page = Number(searchParams.get("page") || 1);
+  const [inputValue, setInputValue] = useState(searchQuery);
+  const [debouncedValue] = useDebounce(inputValue, 500);
+
+  useEffect(() => {
+    setSearchParams(
+      (prevParams) => {
+        if (debouncedValue) {
+          prevParams.set("search", debouncedValue);
+        } else {
+          prevParams.delete("search");
+        }
+        prevParams.set("page", 1);
+        return prevParams;
+      },
+      { replace: true },
+    );
+  }, [debouncedValue, setSearchParams]);
+
+  const updateFilter = (key, value) => {
+    setSearchParams((prevParams) => {
+      if (value === "ALL") {
+        prevParams.delete(key);
+      } else {
+        prevParams.set(key, value);
+      }
+      prevParams.set("page", 1);
+      return prevParams;
+    });
+  };
+
+  const handlePageChange = (newPage) => {
+    setSearchParams((prevParams) => {
+      prevParams.set("page", newPage);
+      return prevParams;
+    });
+  };
+
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ["history", { search: searchQuery, type, range, page }],
+    queryFn: () => {
+      const params = new URLSearchParams();
+
+      if (searchQuery) params.set("search", searchQuery);
+      if (type !== "ALL") params.set("type", type);
+      if (range !== "ALL") params.set("range", range);
+      params.set("page", page);
+
+      return fetchWithAuth(`/api/history?${params.toString()}`).then((res) =>
+        res.json(),
+      );
+    },
+    placeholderData: keepPreviousData,
+  });
+
+  const breadCrumb = [
+    { name: "Dashboard", href: "/dashboard" },
+    { name: "History", href: "/dashboard/history" },
+  ];
+
+  return (
+    <section>
+      <header className="mb-6">
+        <div className="mt-1 text-subly-text-primary">
+          <Breadcrumbs crumbs={breadCrumb} />
+        </div>
+
+        <h1 className="mt-4 text-3xl font-bold tracking-tight text-subly-text-primary">
+          History
+        </h1>
+        <p className="mt-2 text-sm text-subly-text-secondary">
+          Review subscription creations, edits, and renewals.
+        </p>
+      </header>
+
+      <div className="grid gap-3 md:grid-cols-[1fr_180px_180px]">
+        <Input
+          className="py-5 placeholder:text-subly-text-secondary"
+          type="search"
+          value={inputValue}
+          placeholder="Search subscription history"
+          onChange={(event) => setInputValue(event.target.value)}
+        />
+
+        <Select value={type} onValueChange={(value) => updateFilter("type", value)}>
+          <SelectTrigger className="h-10 w-full">
+            <SelectValue placeholder="Type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="ALL">All types</SelectItem>
+              <SelectItem value="CREATED">Created</SelectItem>
+              <SelectItem value="EDITED">Edited</SelectItem>
+              <SelectItem value="RENEWED">Renewed</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
+        <Select
+          value={range}
+          onValueChange={(value) => updateFilter("range", value)}
+        >
+          <SelectTrigger className="h-10 w-full">
+            <SelectValue placeholder="Date range" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="ALL">All time</SelectItem>
+              <SelectItem value="7d">Last 7 days</SelectItem>
+              <SelectItem value="30d">Last 30 days</SelectItem>
+              <SelectItem value="12m">Last 12 months</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Card className="mt-6 rounded-xl border-subly-border bg-subly-card shadow-sm">
+        <CardContent>
+          {isLoading ? (
+            <div className="flex min-h-60 items-center justify-center">
+              <Spinner className="size-8" />
+            </div>
+          ) : isError ? (
+            <p className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-subly-danger">
+              {error.message || "Unable to load history."}
+            </p>
+          ) : data?.history?.length ? (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Subscription</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead>Category</TableHead>
+                  <TableHead>Paid</TableHead>
+                  <TableHead>Settled</TableHead>
+                  <TableHead>Date</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.history.map((item) => (
+                  <TableRow key={item.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <img
+                          src={item.subscriptionLogoUrl}
+                          alt=""
+                          className="h-9 w-9 rounded-xl border border-subly-border object-cover"
+                        />
+                        <span className="font-medium capitalize text-subly-text-primary">
+                          {item.subscriptionName}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <HistoryTypeBadge type={item.type} />
+                    </TableCell>
+                    <TableCell>{formatCategory(item.category)}</TableCell>
+                    <TableCell>{formatMoney(item.paidAmount, item.paidCurrency)}</TableCell>
+                    <TableCell>
+                      {formatMoney(item.settledAmount, item.baseCurrency)}
+                    </TableCell>
+                    <TableCell>{formatDate(item.paidAt)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : (
+            <div className="flex min-h-60 items-center justify-center rounded-xl border border-dashed border-subly-border text-sm text-subly-text-secondary">
+              No history found.
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <PaginationList
+        currentPage={data?.meta?.currentPage || page}
+        totalPages={data?.meta?.totalPages || 1}
+        onPageChange={handlePageChange}
+      />
+    </section>
+  );
+}
diff --git a/client/src/pages/dashboard/Settings.jsx b/client/src/pages/dashboard/Settings.jsx
index 2962383..78ae80e 100644
--- a/client/src/pages/dashboard/Settings.jsx
+++ b/client/src/pages/dashboard/Settings.jsx
@@ -1,9 +1,178 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Bell, LogOut, ShieldCheck, UserRound } from "lucide-react";
+import { useNavigate, useRouteLoaderData } from "react-router";
+import { toast } from "sonner";
 
+import Breadcrumbs from "@/components/Breadcrumb";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Spinner } from "@/components/ui/spinner";
+import { getApiBaseUrl } from "@/lib/utils";
+
+const settingsItems = [
+  {
+    label: "Account information",
+    description: "Review your username, role, and base currency.",
+    icon: UserRound,
+  },
+  {
+    label: "Notifications",
+    description: "Reminder preferences will be managed here.",
+    icon: Bell,
+  },
+  {
+    label: "Security",
+    description: "Password and session settings will be managed here.",
+    icon: ShieldCheck,
+  },
+];
+
+export default function Settings() {
+  const data = useRouteLoaderData("dashboard");
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
+  const logoutMutation = useMutation({
+    mutationFn: async () => {
+      const response = await fetch(`${getApiBaseUrl()}/api/auth/logout`, {
+        method: "POST",
+        credentials: "include",
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        throw new Error(result.message || "Logout failed");
+      }
+
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.clear();
+      toast.success("Logged out successfully");
+      navigate("/auth/login", { replace: true });
+    },
+    onError: (error) => {
+      toast.error(error.message || "Unable to logout");
+    },
+  });
+
+  const breadCrumb = [
+    { name: "Dashboard", href: "/dashboard" },
+    { name: "Settings", href: "/dashboard/settings" },
+  ];
 
-const Settings = () => {
   return (
-    <div>Settings</div>
-  )
-}
+    <section>
+      <header className="mb-6">
+        <div className="mt-1 text-subly-text-primary">
+          <Breadcrumbs crumbs={breadCrumb} />
+        </div>
+
+        <h1 className="mt-4 text-3xl font-bold tracking-tight text-subly-text-primary">
+          Settings
+        </h1>
+        <p className="mt-2 text-sm text-subly-text-secondary">
+          Manage your account and session preferences.
+        </p>
+      </header>
 
-export default Settings
\ No newline at end of file
+      <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
+        <Card className="rounded-xl border-subly-border bg-subly-card shadow-sm">
+          <CardHeader>
+            <CardTitle className="text-lg font-bold text-subly-text-primary">
+              Account
+            </CardTitle>
+            <CardDescription>Your current Subly account details.</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-4 sm:grid-cols-3">
+            <div>
+              <p className="text-xs font-medium uppercase text-subly-text-secondary">
+                Username
+              </p>
+              <p className="mt-1 font-semibold text-subly-text-primary">
+                {data?.user?.username}
+              </p>
+            </div>
+            <div>
+              <p className="text-xs font-medium uppercase text-subly-text-secondary">
+                Role
+              </p>
+              <Badge className="mt-1 bg-subly-soft-blue text-subly-brand-blue">
+                {data?.user?.role}
+              </Badge>
+            </div>
+            <div>
+              <p className="text-xs font-medium uppercase text-subly-text-secondary">
+                Base currency
+              </p>
+              <p className="mt-1 font-semibold text-subly-text-primary">
+                {data?.user?.baseCurrency}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="rounded-xl border-subly-border bg-subly-card shadow-sm">
+          <CardHeader>
+            <CardTitle className="text-lg font-bold text-subly-text-primary">
+              Session
+            </CardTitle>
+            <CardDescription>End your current authenticated session.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button
+              variant="destructive"
+              className="w-full"
+              disabled={logoutMutation.isPending}
+              onClick={() => logoutMutation.mutate()}
+            >
+              {logoutMutation.isPending ? (
+                <>
+                  <Spinner className="mr-2" /> Logging out...
+                </>
+              ) : (
+                <>
+                  <LogOut size={16} /> Logout
+                </>
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="mt-6 grid gap-4">
+        {settingsItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <Card
+              key={item.label}
+              className="rounded-xl border-subly-border bg-subly-card shadow-sm"
+            >
+              <CardContent className="flex items-center gap-4">
+                <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-subly-soft-blue text-subly-brand-blue">
+                  <Icon size={18} />
+                </span>
+                <div>
+                  <p className="font-semibold text-subly-text-primary">
+                    {item.label}
+                  </p>
+                  <p className="mt-1 text-sm text-subly-text-secondary">
+                    {item.description}
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/client/src/pages/dashboard/Subscriptions.jsx b/client/src/pages/dashboard/Subscriptions.jsx
index 5bcc8cf..7f86af5 100644
--- a/client/src/pages/dashboard/Subscriptions.jsx
+++ b/client/src/pages/dashboard/Subscriptions.jsx
@@ -14,27 +14,22 @@ const Subscriptions = () => {
   const page = searchParams.get("page") || 1;
   const userData = useRouteLoaderData("dashboard");
   const handlePageChange = (newPage) => {
-    // Update the "page" parameter inside our search params object
+    
     searchParams.set("page", newPage);
 
-    // Push the updated parameters back into the browser's address bar
+    
     setSearchParams(searchParams);
   };
   console.log("User data in Subscriptions:", userData);
 
-  const { data, isLoading } = useQuery({
-    // 1. The query key automatically tracks changes to search or page
+  const { data, isLoading, isError, error } = useQuery({
     queryKey: ["subscriptions", { search: searchQuery, page }],
 
-    // 2. The query function is properly wrapped in an arrow function
-    // (Also added encodeURIComponent to safely handle spaces/special characters in search)
     queryFn: () =>
       fetchWithAuth(
         `/api/subscription/paginated?search=${encodeURIComponent(searchQuery)}&page=${page}`,
       ).then((res) => res.json()),
 
-    // 3. Pro-Tip: This stops the table from flashing "Loading..."
-    // every time they click 'Next Page' or type a letter.
     placeholderData: keepPreviousData,
   });
 
@@ -61,7 +56,11 @@ const Subscriptions = () => {
       </header>
       <Search />
       {isLoading ? (
-        <SubscriptionTableSkeleton/>
+        <SubscriptionTableSkeleton />
+      ) : isError ? (
+        <p className="rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-subly-danger mt-7">
+          {error.message || "Unable to load history."}
+        </p>
       ) : (
         <SubscriptionResponsiveTable
           data={data}
@@ -69,7 +68,11 @@ const Subscriptions = () => {
         />
       )}
       <div className="mt-2">
-        <PaginationList currentPage={data?.pagination?.currentPage} totalPages={data?.pagination?.totalPages} onPageChange={handlePageChange}/>
+        <PaginationList
+          currentPage={data?.pagination?.currentPage}
+          totalPages={data?.pagination?.totalPages}
+          onPageChange={handlePageChange}
+        />
       </div>
     </section>
   );
diff --git a/server/server.js b/server/server.js
index 6f2f18a..b8d3bca 100644
--- a/server/server.js
+++ b/server/server.js
@@ -23,10 +23,21 @@ const app = express()
 
 
 
-const allowedOrigins = [
-  "http://localhost:5173", // Your local Vite development server
-  "https://subly-chi.vercel.app", // ⚠️ REPLACE WITH YOUR ACTUAL VERCEL URL
-];
+const normalizeOrigin = (origin) => origin?.trim().replace(/\/$/, "");
+
+const configuredOrigins = [
+  env.CLIENT_URL,
+  ...(env.CORS_ORIGINS ? env.CORS_ORIGINS.split(",") : []),
+]
+  .map(normalizeOrigin)
+  .filter(Boolean);
+
+const allowedOrigins = new Set([
+  "http://localhost:5173",
+  "http://127.0.0.1:5173",
+
+  ...configuredOrigins,
+]);
 
 app.use(
   cors({
@@ -34,12 +45,14 @@ app.use(
       // Allow requests with no origin (like mobile apps or curl requests)
       if (!origin) return callback(null, true);
 
-      if (allowedOrigins.indexOf(origin) === -1) {
-        const msg =
-          "The CORS policy for this site does not allow access from the specified Origin.";
+      const normalizedOrigin = normalizeOrigin(origin);
+
+      if (!allowedOrigins.has(normalizedOrigin)) {
+        const msg = `CORS blocked origin: ${origin}. Add it to CLIENT_URL or CORS_ORIGINS.`;
         return callback(new Error(msg), false);
       }
-      return callback(null, true);
+
+      return callback(null, normalizedOrigin);
     },
     credentials: true, // Crucial if you are passing JWT cookies back and forth!
   }),
@@ -73,4 +86,4 @@ app.listen(env.PORT, (error) => {
     return;
   }
   console.log(`Server is running on port ${env.PORT}`);
-});
\ No newline at end of file
+});
diff --git a/server/src/config/env.js b/server/src/config/env.js
index 6a7a60e..abe2b0c 100644
--- a/server/src/config/env.js
+++ b/server/src/config/env.js
@@ -7,5 +7,7 @@ export const env = {
     ACCESS_TOKEN_SECRET: process.env.ACCESS_TOKEN_SECRET,
     REFRESH_TOKEN_SECRET: process.env.REFRESH_TOKEN_SECRET,
     NODE_ENV: process.env.NODE_ENV,
-    DATABASE_URL: process.env.DATABASE_URL
-}
\ No newline at end of file
+    DATABASE_URL: process.env.DATABASE_URL,
+    CLIENT_URL: process.env.CLIENT_URL,
+    CORS_ORIGINS: process.env.CORS_ORIGINS,
+}
diff --git a/server/src/controllers/history.controller.js b/server/src/controllers/history.controller.js
index c5b95d2..efaaf44 100644
--- a/server/src/controllers/history.controller.js
+++ b/server/src/controllers/history.controller.js
@@ -1,77 +1,112 @@
 import { prisma } from "../libs/prisma.js";
+
+const HISTORY_TYPES = new Set(["CREATED", "EDITED", "RENEWED"]);
+const HISTORY_CATEGORIES = new Set([
+  "ENTERTAINMENT",
+  "PRODUCTIVITY",
+  "SOFTWARE",
+  "STORAGE",
+  "EDUCATION",
+  "AI_TOOLS",
+  "OTHER",
+]);
+
 export async function getFilteredHistory(req, res, next) {
+  try {
+    const { category, type, range } = req.query;
+    const search = req.query.search || req.query.query;
+    const page = Math.max(parseInt(req.query.page) || 1, 1);
+    const limit = Math.min(Math.max(parseInt(req.query.limit) || 10, 1), 100);
+    const userId = req.user.id;
+
+    const whereClause = {
+      subscription: {
+        userId,
+      },
+    };
+
+    const normalizedType = type ? String(type).toUpperCase() : null;
+    const normalizedCategory = category ? String(category).toUpperCase() : null;
+
+    if (normalizedType && normalizedType !== "ALL") {
+
+      if (!HISTORY_TYPES.has(normalizedType)) {
+        return res.status(400).json({ message: "Invalid history type" });
+      }
+
+      whereClause.type = normalizedType;
+    }
+
+    if (normalizedCategory && normalizedCategory !== "ALL") {
+      if (!HISTORY_CATEGORIES.has(normalizedCategory)) {
+        return res.status(400).json({ message: "Invalid history category" });
+      }
+
+      whereClause.category = normalizedCategory;
+    }
+
+    if (range && range !== "ALL") {
+      const normalizedRange = String(range).toLowerCase().replace(/[\s_-]/g, "");
+      const dateThreshold = new Date();
+
+      if (["7d", "last7d", "7days", "last7days"].includes(normalizedRange)) {
+        dateThreshold.setDate(dateThreshold.getDate() - 7);
+        whereClause.paidAt = { gte: dateThreshold };
+      }
+
+      if (
+        ["30d", "last30d", "30days", "last30days"].includes(normalizedRange)
+      ) {
+        dateThreshold.setDate(dateThreshold.getDate() - 30);
+        whereClause.paidAt = { gte: dateThreshold };
+      }
+
+      if (
+        ["12m", "last12m", "12months", "last12months"].includes(
+          normalizedRange,
+        )
+      ) {
+        dateThreshold.setMonth(dateThreshold.getMonth() - 12);
+        whereClause.paidAt = { gte: dateThreshold };
+      }
+    }
 
-    
-    try {
-        const { query, category, type, range } = req.query
-        const page = parseInt(req.query.page) || 1
-        const userId = req.user.id;
-
-        const ITEMS_PER_PAGE = 10
-
-        const whereClause = { userId }
-        
-        if (type && type !== "ALL") {
-            whereClause.type = type
-        }
-
-        if (category && category !== "ALL") {
-            whereClause.category = category
-        }
-        if (range) {
-          const dateThreshold = new Date();
-
-          if (range === "7days") {
-            dateThreshold.setDate(dateThreshold.getDate() - 7);
-          } else if (range === "30days") {
-            dateThreshold.setDate(dateThreshold.getDate() - 30);
-          } else if (range === "12months") {
-            dateThreshold.setMonth(dateThreshold.getMonth() - 12);
-          }
-
-          // Add the date boundary condition to our where clause
-          whereClause.createdAt = { gte: dateThreshold };
-        }
-
-        if (query && query.trim() !== '') {
-            whereClause.OR = [
-                {
-                    subscriptionName: {
-                        contains: query,
-                        mode: "insensitive",
-                    },
-                }
-            ]
-        }
-
-        const [historyLogs, totalRecords] = await prisma.$transaction([
-            
-            prisma.history.findMany({
-              where: whereClause,
-              orderBy: { createdAt: "desc" }, 
-              skip: (page - 1) * ITEMS_PER_PAGE,
-              take: ITEMS_PER_PAGE,
-            }),
-            
-            prisma.history.count({
-              where: whereClause,
-            }),
-          ]);
-      
-    
-          const totalPages = Math.ceil(totalRecords / ITEMS_PER_PAGE);
-      
-
-        return res.status(200).json({
-            history: historyLogs,
-            meta: {
-                currentPage: page,
-                totalPages: totalPages || 1, 
-                totalRecords,
-            },
-        })
-
-    } catch (err) {
-        next(err)
+    if (search && search.trim() !== "") {
+      whereClause.OR = [
+        {
+          subscriptionName: {
+            contains: search.trim(),
+            mode: "insensitive",
+          },
+        },
+      ];
     }
-}
\ No newline at end of file
+
+    const [historyLogs, totalRecords] = await prisma.$transaction([
+      prisma.history.findMany({
+        where: whereClause,
+        orderBy: { paidAt: "desc" },
+        skip: (page - 1) * limit,
+        take: limit,
+      }),
+
+      prisma.history.count({
+        where: whereClause,
+      }),
+    ]);
+
+    const totalPages = Math.ceil(totalRecords / limit);
+
+    return res.status(200).json({
+      history: historyLogs,
+      meta: {
+        currentPage: page,
+        totalPages: totalPages || 1,
+        totalRecords,
+        limit,
+      },
+    });
+  } catch (err) {
+    next(err);
+  }
+}
diff --git a/server/src/controllers/subs.controller.js b/server/src/controllers/subs.controller.js
index ec5a77f..2582c3e 100644
--- a/server/src/controllers/subs.controller.js
+++ b/server/src/controllers/subs.controller.js
@@ -380,6 +380,7 @@ export async function editSubscriptionById(req, res, next) {
   try {
     const user = req.user;
     const id = req.params.id;
+    const baseCurrency = user.baseCurrency.toUpperCase();
 
     const parsedId = SubscriptionIdParamSchema.safeParse({ id });
 
@@ -464,8 +465,6 @@ export async function editSubscriptionById(req, res, next) {
       const finalAmount =
         amount !== undefined ? amount : existingSubscription.amount / 100;
 
-      const baseCurrency = user.baseCurrency.toUpperCase();
-
       if (!rates[baseCurrency] || !rates[finalCurrency]) {
         return res.status(400).json({
           message: "Unsupported currency",
@@ -496,11 +495,29 @@ export async function editSubscriptionById(req, res, next) {
       updateData.category = category;
     }
 
-    const updatedSubscription = await prisma.subscription.update({
-      where: {
-        id: existingSubscription.id,
-      },
-      data: updateData,
+    
+
+    const updatedSubscription = await prisma.$transaction(async (tx) => {
+      const subscription = await tx.subscription.update({
+        where: {
+          id: existingSubscription.id,
+        },
+        data: updateData,
+      });
+      await tx.history.create({
+        data: {
+          subscriptionId: subscription.id,
+          subscriptionName: subscription.name,
+          subscriptionLogoUrl: subscription.logoUrl,
+          paidAmount: subscription.amount,
+          paidCurrency: subscription.currency,
+          baseCurrency,
+          exchangeRate: subscription.exchangeRate,
+          type: "EDITED",
+          category: subscription.category,
+          settledAmount: subscription.settledAmount,
+        },
+      });
     });
 
     return res.status(200).json({
@@ -586,6 +603,7 @@ export async function renewSubscription(req, res, next) {
           paidCurrency: currency,
           baseCurrency,
           exchangeRate,
+          type: "RENEWED",
           category: subscription.category,
           settledAmount: settledAmt,
         },