diff --git a/app/(dashboard)/dashboard/user/[userId]/page.tsx b/app/(dashboard)/dashboard/integration/[appId]/page.tsx
similarity index 83%
rename from app/(dashboard)/dashboard/user/[userId]/page.tsx
rename to app/(dashboard)/dashboard/integration/[appId]/page.tsx
index 2c305e9..5e96f5a 100644
--- a/app/(dashboard)/dashboard/user/[userId]/page.tsx
+++ b/app/(dashboard)/dashboard/integration/[appId]/page.tsx
@@ -5,8 +5,8 @@ import React from "react";
 
 export default function Page() {
   const breadcrumbItems = [
-    { title: "User", link: "/dashboard/user" },
-    { title: "Create", link: "/dashboard/user/create" },
+    { title: "Integration", link: "/dashboard/integration" },
+    { title: "Create", link: "/dashboard/integration/create" },
   ];
   return (
     <ScrollArea className="h-full">
diff --git a/app/(dashboard)/dashboard/integration/page.tsx b/app/(dashboard)/dashboard/integration/page.tsx
new file mode 100644
index 0000000..837e624
--- /dev/null
+++ b/app/(dashboard)/dashboard/integration/page.tsx
@@ -0,0 +1,15 @@
+import BreadCrumb from "@/components/breadcrumb";
+import { IntegrationClient } from "@/components/tables/user-tables/client";
+import { integrations } from "@/constants/data";
+
+const breadcrumbItems = [{ title: "Integrations", link: "/dashboard/user" }];
+export default function page() {
+  return (
+    <>
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+        <BreadCrumb items={breadcrumbItems} />
+        <IntegrationClient data={integrations} />
+      </div>
+    </>
+  );
+}
diff --git a/app/(dashboard)/dashboard/user/page.tsx b/app/(dashboard)/dashboard/user/page.tsx
deleted file mode 100644
index 19818a2..0000000
--- a/app/(dashboard)/dashboard/user/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import BreadCrumb from "@/components/breadcrumb";
-import { UserClient } from "@/components/tables/user-tables/client";
-import { users } from "@/constants/data";
-
-const breadcrumbItems = [{ title: "User", link: "/dashboard/user" }];
-export default function page() {
-  return (
-    <>
-      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
-        <BreadCrumb items={breadcrumbItems} />
-        <UserClient data={users} />
-      </div>
-    </>
-  );
-}
diff --git a/components/tables/user-tables/cell-action.tsx b/components/tables/user-tables/cell-action.tsx
index 1063a0b..087f7c9 100644
--- a/components/tables/user-tables/cell-action.tsx
+++ b/components/tables/user-tables/cell-action.tsx
@@ -8,13 +8,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { User } from "@/constants/data";
+import { Integration } from "@/constants/data";
 import { Edit, MoreHorizontal, Trash } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 interface CellActionProps {
-  data: User;
+  data: Integration;
 }
 
 export const CellAction: React.FC<CellActionProps> = ({ data }) => {
diff --git a/components/tables/user-tables/client.tsx b/components/tables/user-tables/client.tsx
index 136d964..bd2637e 100644
--- a/components/tables/user-tables/client.tsx
+++ b/components/tables/user-tables/client.tsx
@@ -3,34 +3,51 @@ import { Button } from "@/components/ui/button";
 import { DataTable } from "@/components/ui/data-table";
 import { Heading } from "@/components/ui/heading";
 import { Separator } from "@/components/ui/separator";
-import { User } from "@/constants/data";
+import { Integration } from "@/constants/data";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { columns } from "./columns";
+import { integrationColumns } from "./columns";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { ProductForm } from "@/components/forms/product-form";
 
-interface ProductsClientProps {
-  data: User[];
+interface IntegrationsList {
+  data: Integration[];
 }
 
-export const UserClient: React.FC<ProductsClientProps> = ({ data }) => {
+export const IntegrationClient: React.FC<IntegrationsList> = ({ data }) => {
   const router = useRouter();
 
   return (
     <>
       <div className="flex items-start justify-between">
-        <Heading
-          title={`Users (${data.length})`}
-          description="Manage users (Client side table functionalities.)"
-        />
-        <Button
+        <Heading title={`Integrations (${data.length})`} description="Manage Apps and integrations" />
+        {/* <Button
           className="text-xs md:text-sm"
           onClick={() => router.push(`/dashboard/user/new`)}
         >
-          <Plus className="mr-2 h-4 w-4" /> Add New
-        </Button>
+        </Button> */}
+        <Dialog>
+          <DialogTrigger>
+            <Plus className="mr-2 h-4 w-4" /> Add New
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Add new Integration</DialogTitle>
+              <DialogDescription>
+                <ProductForm
+                  categories={[
+                    { _id: "shirts", name: "shirts" },
+                    { _id: "pants", name: "pants" },
+                  ]}
+                  initialData={null}
+                />
+              </DialogDescription>
+            </DialogHeader>
+          </DialogContent>
+        </Dialog>
       </div>
       <Separator />
-      <DataTable searchKey="name" columns={columns} data={data} />
+      <DataTable searchKey="name" columns={integrationColumns} data={data} />
     </>
   );
 };
diff --git a/components/tables/user-tables/columns.tsx b/components/tables/user-tables/columns.tsx
index 907214c..5f34433 100644
--- a/components/tables/user-tables/columns.tsx
+++ b/components/tables/user-tables/columns.tsx
@@ -1,47 +1,62 @@
 "use client";
 import { ColumnDef } from "@tanstack/react-table";
 import { CellAction } from "./cell-action";
-import { User } from "@/constants/data";
+import { Integration } from "@/constants/data";
 import { Checkbox } from "@/components/ui/checkbox";
 
-export const columns: ColumnDef<User>[] = [
+export const integrationColumns: ColumnDef<Integration>[] = [
   {
     id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected()}
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
+    header: "Select",
+    cell: ({ row }) => <Checkbox checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(!!value)} aria-label="Select row" />,
     enableSorting: false,
     enableHiding: false,
   },
   {
     accessorKey: "name",
-    header: "NAME",
+    header: "Name",
   },
   {
     accessorKey: "company",
-    header: "COMPANY",
+    header: "Company",
   },
   {
-    accessorKey: "role",
-    header: "ROLE",
+    accessorKey: "verified",
+    header: "Verified",
+    cell: ({ row }) => <Checkbox checked={row.original.verified} aria-label="Verified status" />,
   },
   {
     accessorKey: "status",
-    header: "STATUS",
+    header: "Status",
+  },
+  {
+    accessorKey: "callbackUrl",
+    header: "Callback URL",
+  },
+  {
+    accessorKey: "scope",
+    header: "Scope",
+    cell: ({ row }) => row.original.scope.join(", "),
+  },
+  {
+    accessorKey: "lastSync",
+    header: "Last Sync",
+    cell: ({ row }) => row.original.lastSync,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Created At",
+    cell: ({ row }) => row.original.createdAt,
+  },
+  {
+    accessorKey: "updatedAt",
+    header: "Updated At",
+    cell: ({ row }) => row.original.updatedAt,
   },
   {
     id: "actions",
+    header: "Actions",
     cell: ({ row }) => <CellAction data={row.original} />,
   },
 ];
+
diff --git a/constants/data.ts b/constants/data.ts
index 910e697..f96c926 100644
--- a/constants/data.ts
+++ b/constants/data.ts
@@ -1,96 +1,170 @@
 import { Icons } from "@/components/icons";
 import { NavItem, SidebarNavItem } from "@/types";
-
-export type User = {
+export type Integration = {
   id: number;
   name: string;
   company: string;
-  role: string;
   verified: boolean;
-  status: string;
+  status: 'Active' | 'Inactive' | 'Pending Setup';
+  callbackUrl: string;
+  scope: string[];
+  reads: { name: string; description: string }[];
+  writes: { name: string; description: string }[];
+  lastSync: string; // Use ISO 8601 format for date and time (e.g., "2024-03-31T08:00:00Z")
+  createdAt: string;
+  updatedAt: string;
+  actions: { name: string; url: string }[];
+  performanceMetrics: {
+    dataTransferRate: string;
+    errorRate: string;
+    syncDuration: string;
+  };
+  healthStatus: { status: string; details: string };
+  permissionsManagement: { url: string };
+  notifications: { settingsUrl: string };
+  documentation: { url: string };
+  support: { url: string };
 };
-export const users: User[] = [
-  {
-    id: 1,
-    name: "Candice Schiner",
-    company: "Dell",
-    role: "Frontend Developer",
-    verified: false,
-    status: "Active",
-  },
-  {
-    id: 2,
-    name: "John Doe",
-    company: "TechCorp",
-    role: "Backend Developer",
-    verified: true,
-    status: "Active",
-  },
-  {
-    id: 3,
-    name: "Alice Johnson",
-    company: "WebTech",
-    role: "UI Designer",
-    verified: true,
-    status: "Active",
-  },
-  {
-    id: 4,
-    name: "David Smith",
-    company: "Innovate Inc.",
-    role: "Fullstack Developer",
-    verified: false,
-    status: "Inactive",
-  },
-  {
-    id: 5,
-    name: "Emma Wilson",
-    company: "TechGuru",
-    role: "Product Manager",
-    verified: true,
-    status: "Active",
-  },
-  {
-    id: 6,
-    name: "James Brown",
-    company: "CodeGenius",
-    role: "QA Engineer",
-    verified: false,
-    status: "Active",
-  },
-  {
-    id: 7,
-    name: "Laura White",
-    company: "SoftWorks",
-    role: "UX Designer",
-    verified: true,
-    status: "Active",
-  },
-  {
-    id: 8,
-    name: "Michael Lee",
-    company: "DevCraft",
-    role: "DevOps Engineer",
-    verified: false,
-    status: "Active",
-  },
-  {
-    id: 9,
-    name: "Olivia Green",
-    company: "WebSolutions",
-    role: "Frontend Developer",
-    verified: true,
-    status: "Active",
-  },
-  {
-    id: 10,
-    name: "Robert Taylor",
-    company: "DataTech",
-    role: "Data Analyst",
-    verified: false,
-    status: "Active",
-  },
-];
+
+
+ export const integrations: Integration[] = [
+   {
+     id: 1,
+     name: "GitHub Integration",
+     company: "GitHub",
+     verified: true,
+     status: "Active",
+     callbackUrl: "/github",
+     scope: ["read:user", "repo"],
+     reads: [
+       { name: "Read User Data", description: "Allows access to basic user information." },
+       { name: "Read Repository Data", description: "Allows access to repository details." },
+     ],
+     writes: [
+       { name: "Write Repository Data", description: "Allows creating and modifying repositories." },
+       { name: "Write User Data", description: "Allows modifying user information." },
+     ],
+     lastSync: "2024-03-31T08:00:00Z",
+     createdAt: "2023-01-15T12:00:00Z",
+     updatedAt: "2024-03-30T15:30:00Z",
+     actions: [
+       { name: "Edit Integration", url: "https://example.com/integrations/edit/github" },
+       { name: "Disconnect Integration", url: "https://example.com/integrations/disconnect/github" },
+       { name: "Refresh Sync", url: "https://example.com/integrations/refresh/github" },
+       { name: "View Logs", url: "https://example.com/integrations/logs/github" },
+     ],
+     performanceMetrics: {
+       dataTransferRate: "1 GB/day",
+       errorRate: "0.5%",
+       syncDuration: "5 seconds",
+     },
+     healthStatus: { status: "Healthy", details: "No issues reported" },
+     permissionsManagement: { url: "https://example.com/integrations/permissions/github" },
+     notifications: { settingsUrl: "https://example.com/integrations/notifications/github" },
+     documentation: { url: "https://developer.github.com" },
+     support: { url: "https://support.example.com" },
+   },
+   {
+     id: 2,
+     name: "Slack Integration",
+     company: "Slack",
+     verified: true,
+     status: "Active",
+     callbackUrl: "/slack",
+     scope: ["channels:read", "chat:write"],
+     reads: [
+       { name: "Read Channel Data", description: "Allows access to channel information." },
+       { name: "Read Chat Data", description: "Allows access to chat messages." },
+     ],
+     writes: [{ name: "Write Chat Messages", description: "Allows sending chat messages." }],
+     lastSync: "2024-03-31T10:00:00Z",
+     createdAt: "2023-02-20T09:30:00Z",
+     updatedAt: "2024-03-30T16:45:00Z",
+     actions: [
+       { name: "Edit Integration", url: "https://example.com/integrations/edit/slack" },
+       { name: "Disconnect Integration", url: "https://example.com/integrations/disconnect/slack" },
+       { name: "Refresh Sync", url: "https://example.com/integrations/refresh/slack" },
+       { name: "View Logs", url: "https://example.com/integrations/logs/slack" },
+     ],
+     performanceMetrics: {
+       dataTransferRate: "500 MB/day",
+       errorRate: "1%",
+       syncDuration: "10 seconds",
+     },
+     healthStatus: { status: "Healthy", details: "No issues reported" },
+     permissionsManagement: { url: "https://example.com/integrations/permissions/slack" },
+     notifications: { settingsUrl: "https://example.com/integrations/notifications/slack" },
+     documentation: { url: "https://api.slack.com" },
+     support: { url: "https://help.slack.com" },
+   },
+   {
+     id: 3,
+     name: "Snowflake Integration",
+     company: "Snowflake",
+     verified: true,
+     status: "Active",
+     callbackUrl: "/slack",
+     scope: ["channels:read", "chat:write"],
+     reads: [
+       { name: "Read Channel Data", description: "Allows access to channel information." },
+       { name: "Read Chat Data", description: "Allows access to chat messages." },
+     ],
+     writes: [{ name: "Write Chat Messages", description: "Allows sending chat messages." }],
+     lastSync: "2024-03-31T10:00:00Z",
+     createdAt: "2023-02-20T09:30:00Z",
+     updatedAt: "2024-03-30T16:45:00Z",
+     actions: [
+       { name: "Edit Integration", url: "https://example.com/integrations/edit/slack" },
+       { name: "Disconnect Integration", url: "https://example.com/integrations/disconnect/slack" },
+       { name: "Refresh Sync", url: "https://example.com/integrations/refresh/slack" },
+       { name: "View Logs", url: "https://example.com/integrations/logs/slack" },
+     ],
+     performanceMetrics: {
+       dataTransferRate: "500 MB/day",
+       errorRate: "1%",
+       syncDuration: "10 seconds",
+     },
+     healthStatus: { status: "Healthy", details: "No issues reported" },
+     permissionsManagement: { url: "https://example.com/integrations/permissions/slack" },
+     notifications: { settingsUrl: "https://example.com/integrations/notifications/slack" },
+     documentation: { url: "https://api.slack.com" },
+     support: { url: "https://help.slack.com" },
+   },
+   {
+     id: 4,
+     name: "Clickhouse Integration",
+     company: "Clickhouse",
+     verified: true,
+     status: "Active",
+     callbackUrl: "/slack",
+     scope: ["channels:read", "chat:write"],
+     reads: [
+       { name: "Read Channel Data", description: "Allows access to channel information." },
+       { name: "Read Chat Data", description: "Allows access to chat messages." },
+     ],
+     writes: [{ name: "Write Chat Messages", description: "Allows sending chat messages." }],
+     lastSync: "2024-03-31T10:00:00Z",
+     createdAt: "2023-02-20T09:30:00Z",
+     updatedAt: "2024-03-30T16:45:00Z",
+     actions: [
+       { name: "Edit Integration", url: "https://example.com/integrations/edit/slack" },
+       { name: "Disconnect Integration", url: "https://example.com/integrations/disconnect/slack" },
+       { name: "Refresh Sync", url: "https://example.com/integrations/refresh/slack" },
+       { name: "View Logs", url: "https://example.com/integrations/logs/slack" },
+     ],
+     performanceMetrics: {
+       dataTransferRate: "500 MB/day",
+       errorRate: "1%",
+       syncDuration: "10 seconds",
+     },
+     healthStatus: { status: "Healthy", details: "No issues reported" },
+     permissionsManagement: { url: "https://example.com/integrations/permissions/slack" },
+     notifications: { settingsUrl: "https://example.com/integrations/notifications/slack" },
+     documentation: { url: "https://api.slack.com" },
+     support: { url: "https://help.slack.com" },
+   },
+ ];
+
 
 export type Employee = {
   id: number;
@@ -119,10 +193,10 @@ export const navItems: NavItem[] = [
     label: "Dashboard",
   },
   {
-    title: "User",
-    href: "/dashboard/user",
+    title: "Integrations",
+    href: "/dashboard/integration",
     icon: "user",
-    label: "user",
+    label: "integration",
   },
   {
     title: "Employee",