diff --git a/apps/app/app/(routes)/audit/analytic-dailog.tsx b/apps/app/app/(routes)/audit/analytic-dailog.tsx
index 92f2ec3..b789e52 100644
--- a/apps/app/app/(routes)/audit/analytic-dailog.tsx
+++ b/apps/app/app/(routes)/audit/analytic-dailog.tsx
@@ -1,40 +1,37 @@
 import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
-  } from "@/components/ui/alert-dialog"
-  import { Button } from "@/components/ui/button"
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
 import { AnalyticsData } from "./page";
-  
-  export function AnalyicDialog({data}: {data: AnalyticsData}) {
-    return (
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button variant="default" className="h-7 font-medium">View details</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle className="text-xl">Detailed audit logs</AlertDialogTitle>
-            <AlertDialogDescription>
-                Action: {data.action}
-            </AlertDialogDescription>
-            <AlertDialogDescription>
-                Target: {data.target}
-            </AlertDialogDescription>
-            <AlertDialogDescription>
-                Date: {data.date} 
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogAction>Close</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    )
-  }
-  
\ No newline at end of file
+
+export function AnalyicDialog({ data }: { data: AnalyticsData }) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="default" className="h-7 font-medium">
+          View details
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="text-xl">
+            Detailed audit logs
+          </AlertDialogTitle>
+          <AlertDialogDescription>Action: {data.action}</AlertDialogDescription>
+          <AlertDialogDescription>Target: {data.target}</AlertDialogDescription>
+          <AlertDialogDescription>Date: {data.date}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction>Close</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/app/app/(routes)/audit/analytics-table.tsx b/apps/app/app/(routes)/audit/analytics-table.tsx
index 4cdebaf..e0ee8b5 100644
--- a/apps/app/app/(routes)/audit/analytics-table.tsx
+++ b/apps/app/app/(routes)/audit/analytics-table.tsx
@@ -18,7 +18,7 @@ interface AnalyticsData {
   date: string;
 }
 
-export default function AnalyticsTable({data}: {data: AnalyticsData[]}) {
+export default function AnalyticsTable({ data }: { data: AnalyticsData[] }) {
   return (
     <Card className="w-full rounded-lg border text-white mt-6 mb-3">
       <Table className="">
@@ -27,15 +27,23 @@ export default function AnalyticsTable({data}: {data: AnalyticsData[]}) {
             <TableHead className="text-primary">Action</TableHead>
             <TableHead className="text-primary">Target</TableHead>
             <TableHead className="text-primary">Date</TableHead>
-            <TableHead className="text-primary text-right px-9">Actions</TableHead>
+            <TableHead className="text-primary text-right px-9">
+              Actions
+            </TableHead>
           </TableRow>
         </TableHeader>
         <TableBody className="rounded-b-lg">
           {data.map((row, index) => (
             <TableRow key={index} className="rounded-md">
-              <TableCell className="text-muted-foreground">{row.action}</TableCell>
-              <TableCell className="text-muted-foreground">{row.target}</TableCell>
-              <TableCell className="text-muted-foreground">{row.date}</TableCell>
+              <TableCell className="text-muted-foreground">
+                {row.action}
+              </TableCell>
+              <TableCell className="text-muted-foreground">
+                {row.target}
+              </TableCell>
+              <TableCell className="text-muted-foreground">
+                {row.date}
+              </TableCell>
               <TableCell className="text-right">
                 <AnalyicDialog key={index} data={row} />
               </TableCell>
@@ -45,4 +53,4 @@ export default function AnalyticsTable({data}: {data: AnalyticsData[]}) {
       </Table>
     </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/app/app/(routes)/audit/page.tsx b/apps/app/app/(routes)/audit/page.tsx
index dfbde4d..f42cc04 100644
--- a/apps/app/app/(routes)/audit/page.tsx
+++ b/apps/app/app/(routes)/audit/page.tsx
@@ -1,134 +1,231 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 "use client";
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react";
 import { addDays, format } from "date-fns";
 import { CalendarIcon, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
-import { Calendar } from '@/components/ui/calendar';
-import { DateRange } from 'react-day-picker';
-import AnalyticsTable from './analytics-table';
+import { Calendar } from "@/components/ui/calendar";
+import { DateRange } from "react-day-picker";
+import AnalyticsTable from "./analytics-table";
 
 export interface AnalyticsData {
-    action: string;
-    target: string;
-    date: string;
+  action: string;
+  target: string;
+  date: string;
 }
 
 export default function page() {
-    const [loading, setLoading] = useState(false);
-    const [fliteredAnalyticsData, setFliteredAnalyticsData] = useState<AnalyticsData[]>([]);
-    const [dateRange, setDateRange] = useState<DateRange>({
-        from: addDays(new Date(), -6),
-        to: new Date(),
-    });
-
-    const handleDateSelect = (range: DateRange | undefined) => {
-        if (range) {
-            setDateRange(range as { from: Date; to: Date });
-            if (range.from) {
-                format(new Date(range.from), "yyyy-MM-dd");
-            }
-            if (range.to) {
-                format(new Date(range.to), "yyyy-MM-dd");
-            }
-        }
-    };
-
-    const analyticsData = [
-        { action: "Send analytics group identify event", target: "-", date: "05 Feb 2025, 12:50:34" },
-        { action: "Send analytics group identify event", target: "-", date: "05 Feb 2025, 12:50:23" },
-        { action: "Send analytics group reset event", target: "-", date: "05 Feb 2025, 12:50:21" },
-        { action: "Send analytics group identify event", target: "-", date: "05 Feb 2025, 12:50:20" },
-        { action: "Send analytics group reset event", target: "-", date: "05 Feb 2025, 12:49:46" },
-        { action: "Send analytics group identify event", target: "-", date: "05 Feb 2025, 12:49:43" },
-        { action: "Send analytics group identify event", target: "-", date: "05 Feb 2025, 12:49:19" },
-        { action: "Send analytics group identify event", target: "-", date: "05 Feb 2025, 12:49:16" },
-        { action: "Send analytics group identify event", target: "-", date: "05 Feb 2025, 12:49:04" },
-        { action: "Send analytics group identify event", target: "-", date: "04 Feb 2025, 23:03:32" },
-        { action: "Send analytics group reset event", target: "-", date: "04 Feb 2025, 23:03:31" },
-        { action: "Send analytics group identify event", target: "-", date: "30 Jan 2025, 18:15:10" },
-        { action: "Send analytics group identify event", target: "-", date: "28 Jan 2025, 15:42:55" },
-        { action: "Send analytics group reset event", target: "-", date: "25 Jan 2025, 09:23:12" },
-        { action: "Send analytics group identify event", target: "-", date: "22 Jan 2025, 14:35:48" },
-        { action: "Send analytics group reset event", target: "-", date: "20 Jan 2025, 20:17:30" },
-    ];
+  const [loading, setLoading] = useState(false);
+  const [fliteredAnalyticsData, setFliteredAnalyticsData] = useState<
+    AnalyticsData[]
+  >([]);
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: addDays(new Date(), -6),
+    to: new Date(),
+  });
 
-    function filterAnalyticsDataByDate({ data, dateRange }: { data: AnalyticsData[], dateRange: { from: string, to: string } }): AnalyticsData[] {
-        const fromDate = new Date(dateRange.from);
-        const toDate = new Date(dateRange.to);
-        return data.filter(item => {
-            const itemDate = new Date(item.date);
-            return itemDate >= fromDate && itemDate <= toDate;
-        });
+  const handleDateSelect = (range: DateRange | undefined) => {
+    if (range) {
+      setDateRange(range as { from: Date; to: Date });
+      if (range.from) {
+        format(new Date(range.from), "yyyy-MM-dd");
+      }
+      if (range.to) {
+        format(new Date(range.to), "yyyy-MM-dd");
+      }
     }
+  };
 
-    const handleRefresh = () => {
-        setLoading(true);
-        const formattedDateRange = {
-            from: dateRange.from ? format(dateRange.from, 'dd MMM yyyy, HH:mm:ss') : '',
-            to: dateRange.to ? format(addDays(dateRange.to, 1), 'dd MMM yyyy, HH:mm:ss') : ''
-        };
+  const analyticsData = [
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "05 Feb 2025, 12:50:34",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "05 Feb 2025, 12:50:23",
+    },
+    {
+      action: "Send analytics group reset event",
+      target: "-",
+      date: "05 Feb 2025, 12:50:21",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "05 Feb 2025, 12:50:20",
+    },
+    {
+      action: "Send analytics group reset event",
+      target: "-",
+      date: "05 Feb 2025, 12:49:46",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "05 Feb 2025, 12:49:43",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "05 Feb 2025, 12:49:19",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "05 Feb 2025, 12:49:16",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "05 Feb 2025, 12:49:04",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "04 Feb 2025, 23:03:32",
+    },
+    {
+      action: "Send analytics group reset event",
+      target: "-",
+      date: "04 Feb 2025, 23:03:31",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "30 Jan 2025, 18:15:10",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "28 Jan 2025, 15:42:55",
+    },
+    {
+      action: "Send analytics group reset event",
+      target: "-",
+      date: "25 Jan 2025, 09:23:12",
+    },
+    {
+      action: "Send analytics group identify event",
+      target: "-",
+      date: "22 Jan 2025, 14:35:48",
+    },
+    {
+      action: "Send analytics group reset event",
+      target: "-",
+      date: "20 Jan 2025, 20:17:30",
+    },
+  ];
 
-        const fliteredAnalyticsDataRes = filterAnalyticsDataByDate({ data: analyticsData, dateRange: formattedDateRange });
-        setTimeout(() => {
-            setFliteredAnalyticsData(fliteredAnalyticsDataRes);
-            setLoading(false);
-        }, 1200);
+  function filterAnalyticsDataByDate({
+    data,
+    dateRange,
+  }: {
+    data: AnalyticsData[];
+    dateRange: { from: string; to: string };
+  }): AnalyticsData[] {
+    const fromDate = new Date(dateRange.from);
+    const toDate = new Date(dateRange.to);
+    return data.filter((item) => {
+      const itemDate = new Date(item.date);
+      return itemDate >= fromDate && itemDate <= toDate;
+    });
+  }
+
+  const handleRefresh = () => {
+    setLoading(true);
+    const formattedDateRange = {
+      from: dateRange.from
+        ? format(dateRange.from, "dd MMM yyyy, HH:mm:ss")
+        : "",
+      to: dateRange.to
+        ? format(addDays(dateRange.to, 1), "dd MMM yyyy, HH:mm:ss")
+        : "",
     };
 
-    useEffect(() => {
-        handleRefresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    },[]);
+    const fliteredAnalyticsDataRes = filterAnalyticsDataByDate({
+      data: analyticsData,
+      dateRange: formattedDateRange,
+    });
+    setTimeout(() => {
+      setFliteredAnalyticsData(fliteredAnalyticsDataRes);
+      setLoading(false);
+    }, 1200);
+  };
 
-    return (
-        <div className="container  px-5 md:px-2 text-primary rounded-lg">
-            <h2 className="text-3xl font-semibold">Account audit logs</h2>
-            <p className="text-sm text-muted-foreground mt-1">
-                View the audit log trail of actions made from your account
-            </p>
+  useEffect(() => {
+    handleRefresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-            <div className="block md:flex items-center justify-between mt-4">
-                <div className="block md:flex items-center space-x-0 md:space-x-3">
-                    <div className='flex items-center my-6 md:my-0 space-x-3 md:mb-0'>
-                        <p className='text-muted-foreground text-sm'>Filter by</p>
-                        <Popover>
-                            <PopoverTrigger asChild>
-                                <Button variant="outline" className="flex items-center space-x-2 bg-secondary border-dashed text-primary">
-                                    <CalendarIcon className="w-4 h-4" />
-                                    <span>
-                                        {dateRange.from && dateRange.to
-                                            ? `${format(dateRange.from, "dd MMM")} - ${format(dateRange.to, "dd MMM")}`
-                                            : "Select Date Range"}
-                                    </span>
-                                </Button>
-                            </PopoverTrigger>
-                            <PopoverContent className="border bg-[#222] text-white p-2">
-                                <Calendar mode="range" selected={dateRange} onSelect={handleDateSelect} />
-                            </PopoverContent>
-                        </Popover>
-                    </div>
-                    <span className="text-muted-foreground text-sm">Viewing {fliteredAnalyticsData?.length} logs in total</span>
-                </div>
+  return (
+    <div className="container  px-5 md:px-2 text-primary rounded-lg">
+      <h2 className="text-3xl font-semibold">Account audit logs</h2>
+      <p className="text-sm text-muted-foreground mt-1">
+        View the audit log trail of actions made from your account
+      </p>
 
-                <Button variant="default" className={`text-secondary border flex items-center space-x-2 my-6 md:my-0 ${loading ? "opacity-[0.30]" : ""}`} onClick={handleRefresh}>
-                    <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
-                    <span>Refresh</span>
+      <div className="block md:flex items-center justify-between mt-4">
+        <div className="block md:flex items-center space-x-0 md:space-x-3">
+          <div className="flex items-center my-6 md:my-0 space-x-3 md:mb-0">
+            <p className="text-muted-foreground text-sm">Filter by</p>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="flex items-center space-x-2 bg-secondary border-dashed text-primary"
+                >
+                  <CalendarIcon className="w-4 h-4" />
+                  <span>
+                    {dateRange.from && dateRange.to
+                      ? `${format(dateRange.from, "dd MMM")} - ${format(dateRange.to, "dd MMM")}`
+                      : "Select Date Range"}
+                  </span>
                 </Button>
-            </div>
-            {fliteredAnalyticsData?.length > 0 ? (
-                <AnalyticsTable data={fliteredAnalyticsData}/>
-            ) : (
-                <div>
-                    <Card className={cn("mt-6 border py-3 pl-5 text-start")}>
-                        <p className="text-muted-foreground text-sm">You do not have any audit logs available yet</p>
-                    </Card>
-                </div>
-            )
-            }
+              </PopoverTrigger>
+              <PopoverContent className="border bg-[#222] text-white p-2">
+                <Calendar
+                  mode="range"
+                  selected={dateRange}
+                  onSelect={handleDateSelect}
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+          <span className="text-muted-foreground text-sm">
+            Viewing {fliteredAnalyticsData?.length} logs in total
+          </span>
+        </div>
+
+        <Button
+          variant="default"
+          className={`text-secondary border flex items-center space-x-2 my-6 md:my-0 ${loading ? "opacity-[0.30]" : ""}`}
+          onClick={handleRefresh}
+        >
+          <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
+          <span>Refresh</span>
+        </Button>
+      </div>
+      {fliteredAnalyticsData?.length > 0 ? (
+        <AnalyticsTable data={fliteredAnalyticsData} />
+      ) : (
+        <div>
+          <Card className={cn("mt-6 border py-3 pl-5 text-start")}>
+            <p className="text-muted-foreground text-sm">
+              You do not have any audit logs available yet
+            </p>
+          </Card>
         </div>
-    );
+      )}
+    </div>
+  );
 }
diff --git a/apps/app/components/ui/calendar.tsx b/apps/app/components/ui/calendar.tsx
index c150c32..a71cc49 100644
--- a/apps/app/components/ui/calendar.tsx
+++ b/apps/app/components/ui/calendar.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
   className,
@@ -27,7 +27,7 @@ function Calendar({
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
@@ -40,11 +40,11 @@ function Calendar({
           "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
           props.mode === "range"
             ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
+            : "[&:has([aria-selected])]:rounded-md",
         ),
         day: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100",
         ),
         day_range_start: "day-range-start bg-muted-foreground",
         day_range_end: "day-range-end bg-muted-foreground",
@@ -69,8 +69,8 @@ function Calendar({
       }}
       {...props}
     />
-  )
+  );
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";
 
-export { Calendar }
+export { Calendar };