diff --git a/apps/app/app/(routes)/agents/page.tsx b/apps/app/app/(routes)/agents/page.tsx
new file mode 100644
index 0000000..152e191
--- /dev/null
+++ b/apps/app/app/(routes)/agents/page.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import AgentsCreateDialog from "@/components/custom/agents/AgentsCreateDialog";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { ImagePlus } from "lucide-react";
+type Agent = {
+  id: string;
+  img: JSX.Element;
+  state: string;
+  name: string;
+  description: string;
+};
+
+const agents: Agent[] = [
+  {
+    id: "1",
+    name: "AI Assistant",
+    description:
+      "A conversational AI for answering customer queries. A conversational AI for answering customer queries. A conversational AI for answering customer queries.",
+    img: <ImagePlus className="size-6 text-gray-900 " />,
+    state: "Active",
+  },
+  {
+    id: "2",
+    name: "NLP",
+    description: "An AI agent that provides product recommendations.",
+    img: <ImagePlus className="size-6 text-gray-900 " />,
+    state: "Inactive",
+  },
+  {
+    id: "3",
+    name: "Vision AI",
+    description: "An AI agent for image recognition tasks.",
+    img: <ImagePlus className="size-6 text-gray-900 " />,
+    state: "Active",
+  },
+  {
+    id: "4",
+    name: "Sentiment Analyzer",
+    description: "Analyzes customer feedback and determines sentiment.",
+    img: <ImagePlus className="size-6 text-gray-900 " />,
+    state: "Active",
+  },
+];
+export default function page() {
+  return (
+    <div className="flex flex-col h-full w-full items-start overflow-hidden px-5 md:px-2">
+      <AgentsCreateDialog />
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 w-full">
+        {agents.map((ag) => {
+          return (
+            <Card
+              key={ag.id}
+              className=" cursor-pointer p-2 sm:p-3 h-auto justify-between space-y-1.5 flex flex-col"
+            >
+              <div className="flex items-center gap-2">
+                <div className="rounded-lg w-fit bg-slate-100 p-1">
+                  {ag.img}
+                </div>
+                <h3 className="text-sm font-semibold ">{ag.name}</h3>
+              </div>
+              <p className="text-xs line-clamp-3">{ag.description}</p>
+              <div className="flex gap-2">
+                <Badge
+                  variant={`${ag.state === "Active" ? "secondary" : "destructive"}`}
+                >
+                  {ag.state}
+                </Badge>
+              </div>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/app/app/(routes)/dashboard/page.tsx b/apps/app/app/(routes)/dashboard/page.tsx
index daa3375..450bd50 100644
--- a/apps/app/app/(routes)/dashboard/page.tsx
+++ b/apps/app/app/(routes)/dashboard/page.tsx
@@ -146,14 +146,16 @@ const chats = [
 
 export default function Home() {
   return (
-    <div className="flex flex-col h-full w-full items-start overflow-hidden px-5 md:px-2">
+    <div className="flex flex-col h-full w-full items-start overflow-hidden px-3 md:px-1">
       <InfoBreadCrumb />
-      <Tabs defaultValue="overview" className="space-y-5">
+      <Tabs
+        defaultValue="overview"
+        className="w-full space-y-5">
         <TabsList>
           <TabsTrigger value="overview">Overview</TabsTrigger>
           <TabsTrigger value="analytics">Analytics</TabsTrigger>
         </TabsList>
-        <TabsContent value="overview" className="space-y-4">
+        <TabsContent value="overview" className="space-y-3">
           <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-5">
             <Card>
               <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
@@ -180,8 +182,7 @@ export default function Home() {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"
-                  className="h-4 w-4 text-muted-foreground"
-                >
+                  className="h-4 w-4 text-muted-foreground">
                   <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                   <circle cx="9" cy="7" r="4" />
                   <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
@@ -205,8 +206,7 @@ export default function Home() {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"
-                  className="h-4 w-4 text-muted-foreground"
-                >
+                  className="h-4 w-4 text-muted-foreground">
                   <rect width="20" height="14" x="2" y="5" rx="2" />
                   <path d="M2 10h20" />
                 </svg>
@@ -231,8 +231,7 @@ export default function Home() {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth="2"
-                  className="h-4 w-4 text-muted-foreground"
-                >
+                  className="h-4 w-4 text-muted-foreground">
                   <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
                 </svg>
               </CardHeader>
diff --git a/apps/app/components/custom/agents/AgentsCreateDialog.tsx b/apps/app/components/custom/agents/AgentsCreateDialog.tsx
new file mode 100644
index 0000000..9f2b9cb
--- /dev/null
+++ b/apps/app/components/custom/agents/AgentsCreateDialog.tsx
@@ -0,0 +1,116 @@
+"use client";
+import InfoBreadCrumb from "@/components/custom/infobar/bread-crumb";
+import { useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Plus } from "lucide-react";
+export default function AgentsCreateDialog() {
+  return (
+    <>
+      <AlertDialog>
+        <div className="flex w-full items-center justify-between">
+          <InfoBreadCrumb />
+          <AlertDialogTrigger asChild>
+            <Button className="flex items-center gap-2">
+              Create
+              <Plus/>
+            </Button>
+          </AlertDialogTrigger>
+        </div>
+
+        <AlertDialogContent>
+          <AlertDialogTitle>Create Agent</AlertDialogTitle>
+          <AlertDialogDescription>
+            Fill in the details to create a new agent.
+          </AlertDialogDescription>
+          <div className="space-y-2">
+            <div>
+              <Label htmlFor="agent-name">Agent Name</Label>
+              <Input id="agent-name" placeholder="Enter agent name" />
+            </div>
+            <div>
+              <Label htmlFor="system-prompt">System Prompt</Label>
+              <Textarea
+                id="system-prompt"
+                placeholder="Enter system prompt"
+                className="border"
+              />
+            </div>
+            <div>
+              <Label>Model</Label>
+              <ModelDropDownMenu />
+            </div>
+            <div>
+              <Label htmlFor="api-key">API Key</Label>
+              <Input id="api-key" placeholder="Enter API key" />
+            </div>
+            <div>
+              <Label htmlFor="image">Image</Label>
+              <Input id="image" type="file" />
+            </div>
+          </div>
+          <AlertDialogFooter className="flex gap-4">
+            <AlertDialogCancel className="w-full">Cancel</AlertDialogCancel>
+            <AlertDialogAction className="w-full">Create</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+function ModelDropDownMenu() {
+  const [model, setModel] = useState<string>("Claude");
+  const models = [
+    "Claude",
+    "Bert",
+    "Perplexity AI",
+    "Bard",
+    "Google Gemini",
+    "OpenAI",
+  ];
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className="w-full flex items-center justify-between"
+        >
+          {model}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuRadioGroup
+          value={model}
+          onValueChange={(val) => setModel(val)}
+        >
+          {models.map((m) => (
+            <DropdownMenuRadioItem key={m} value={m}>
+              {m}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/app/components/custom/dashboard/chat-table.tsx b/apps/app/components/custom/dashboard/chat-table.tsx
index f474bed..efefb98 100644
--- a/apps/app/components/custom/dashboard/chat-table.tsx
+++ b/apps/app/components/custom/dashboard/chat-table.tsx
@@ -18,11 +18,11 @@ export const Chats: React.FC<ChatsProps> = ({ chats }) => {
 
   return (
     <>
-      <div className="container border rounded-xl bg-card py-2">
+      <div className="border rounded-xl bg-card py-2 shadow-sm">
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead className="px-1 md:px-4">Ticket</TableHead>
+              <TableHead className="px-2 md:px-4">Ticket</TableHead>
               <TableHead className="hidden md:table-cell">Status</TableHead>
               <TableHead>Date</TableHead>
             </TableRow>
@@ -31,7 +31,7 @@ export const Chats: React.FC<ChatsProps> = ({ chats }) => {
             {(isDropdownOpen ? chats : chats.slice(0, 5)).map(
               (chat: any, i: number) => (
                 <TableRow key={i}>
-                  <TableCell className="px-1 md:px-4">
+                  <TableCell className="px-2 md:px-4">
                     <div className="flex items-center">
                       <div className="rounded-full flex items-center justify-center">
                         <UserRound />
@@ -39,14 +39,13 @@ export const Chats: React.FC<ChatsProps> = ({ chats }) => {
                       <div className="ml-2">
                         <p className="text ">{chat.ticketId}</p>
                         <Badge
-                          variant={`${chat.status === "open" ? "secondary" : "destructive"}`}
-                        >
+                          variant={`${chat.status === "open" ? "secondary" : "destructive"}`}>
                           {chat.status}
                         </Badge>
                       </div>
                     </div>
                   </TableCell>
-                  <TableCell className="hidden md:table-cell">
+                  <TableCell className="hidden text-slate-200 md:table-cell">
                     {chat.status2}
                   </TableCell>
                   <TableCell>
@@ -66,16 +65,15 @@ export const Chats: React.FC<ChatsProps> = ({ chats }) => {
                     </div>
                   </TableCell>
                 </TableRow>
-              ),
+              )
             )}
           </TableBody>
         </Table>
       </div>
       <div className="text-center">
         <button
-          className="p-2 border rounded-lg w-full bg-card"
-          onClick={() => setIsDropdownOpen((prev) => !prev)}
-        >
+          className="p-2 border rounded-lg text-slate-200 text-sm w-full bg-card"
+          onClick={() => setIsDropdownOpen((prev) => !prev)}>
           {isDropdownOpen ? "View Less" : "View More"}
         </button>
       </div>
diff --git a/apps/app/components/custom/dashboard/mail-table.tsx b/apps/app/components/custom/dashboard/mail-table.tsx
index 8dbdbbe..6799a07 100644
--- a/apps/app/components/custom/dashboard/mail-table.tsx
+++ b/apps/app/components/custom/dashboard/mail-table.tsx
@@ -16,11 +16,11 @@ export const MailTable = ({ mails }: MailTableProps) => {
 
   return (
     <>
-      <div className="container rounded-xl border bg-card">
+      <div className="rounded-xl border bg-card shadow-sm ">
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead className="px-1 md:px-4">Email</TableHead>
+              <TableHead className="px-2 md:px-4">Email</TableHead>
               <TableHead className="hidden md:table-cell">Source</TableHead>
               <TableHead>Date</TableHead>
             </TableRow>
@@ -28,8 +28,8 @@ export const MailTable = ({ mails }: MailTableProps) => {
           <TableBody>
             {(isDropdownOpen ? mails : mails.slice(0, 5)).map((mail) => (
               <TableRow key={mail.id}>
-                <TableCell className="px-1 md:px-4">{mail.Email}</TableCell>
-                <TableCell className="hidden md:table-cell">
+                <TableCell className="px-2 md:px-4">{mail.Email}</TableCell>
+                <TableCell className="hidden text-slate-200 md:table-cell">
                   {mail.Source}
                 </TableCell>
                 <TableCell>{mail.date}</TableCell>
@@ -40,7 +40,7 @@ export const MailTable = ({ mails }: MailTableProps) => {
       </div>
       <div className="text-center">
         <button
-          className="py-2 border w-full rounded-xl bg-card"
+          className="py-2 border w-full text-slate-200 text-sm rounded-xl bg-card"
           onClick={() => setIsDropdownOpen((prev) => !prev)}
         >
           {isDropdownOpen ? "View Less" : "View More"}
diff --git a/apps/app/components/custom/infobar/bread-crumb.tsx b/apps/app/components/custom/infobar/bread-crumb.tsx
index cb2c011..2c54e31 100644
--- a/apps/app/components/custom/infobar/bread-crumb.tsx
+++ b/apps/app/components/custom/infobar/bread-crumb.tsx
@@ -35,7 +35,9 @@ export default function InfoBreadCrumb() {
                 ? "View and edit all your integrations"
                 : page.includes("workflows")
                   ? "View and edit all your integrations"
-                  : "Modify domain settings, change chatbot options, enter sales questions and train your bot to do what you want it to."}
+                  : page.includes("agents")
+                    ? "Manage your agents and their settings"
+                    : "Modify domain settings, change chatbot options, enter sales questions and train your bot to do what you want it to."}
       </p>
     </div>
   );
diff --git a/apps/app/components/custom/sidebar/quick-action-btn.tsx b/apps/app/components/custom/sidebar/quick-action-btn.tsx
index 762cb4f..3d1fcc6 100644
--- a/apps/app/components/custom/sidebar/quick-action-btn.tsx
+++ b/apps/app/components/custom/sidebar/quick-action-btn.tsx
@@ -11,8 +11,12 @@ import {
   CommandList,
 } from "@/components/ui/command";
 
-const QuickActionButton = () => {
-  const [isOpen, setIsOpen] = useState(false);
+type QuickActionButtonProps = {
+  collapse: String;
+};
+
+const QuickActionButton: React.FC<QuickActionButtonProps> = ({ collapse }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const toggleOverlay = () => setIsOpen(!isOpen);
 
@@ -31,15 +35,16 @@ const QuickActionButton = () => {
 
   return (
     <div className="flex items-center justify-center">
-      <Button variant="default" onClick={toggleOverlay}>
-        Quick Actions
-        <Badge
-          className="rounded-md text-xs gap-1 font-semibold hover:bg-secondary"
-          variant={"secondary"}
-        >
-          <span className="text-xs">⌘</span>K
-        </Badge>
-      </Button>
+      {collapse === "expanded" && (
+        <Button variant="default" onClick={toggleOverlay}>
+          Quick Actions
+          <Badge
+            className="rounded-md text-xs gap-1 font-semibold hover:bg-secondary"
+            variant={"secondary"}>
+            <span className="text-xs">⌘</span>K
+          </Badge>
+        </Button>
+      )}
 
       <CommandDialog open={isOpen} onOpenChange={setIsOpen}>
         <CommandInput placeholder="Type a command or search..." />
diff --git a/apps/app/components/custom/sidebar/sidebar.tsx b/apps/app/components/custom/sidebar/sidebar.tsx
index e34f3d5..dc82405 100644
--- a/apps/app/components/custom/sidebar/sidebar.tsx
+++ b/apps/app/components/custom/sidebar/sidebar.tsx
@@ -25,6 +25,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from "@/components/ui/sidebar";
 import {
   DropdownMenu,
@@ -100,7 +101,7 @@ const IntelItems = [
 
 export function AppSidebar() {
   const path = usePathname();
-
+  const {state} = useSidebar();
   return (
     <Sidebar collapsible="icon" variant="floating">
       <SidebarHeader>
@@ -137,8 +138,7 @@ export function AppSidebar() {
                   <SidebarMenuButton
                     asChild
                     tooltip={item.title}
-                    isActive={path.includes(item.url)}
-                  >
+                    isActive={path.includes(item.url)}>
                     <a href={item.url}>
                       <item.icon />
                       <span>{item.title}</span>
@@ -168,7 +168,7 @@ export function AppSidebar() {
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter>
-        <QuickActionButton />
+        <QuickActionButton collapse={state} />
       </SidebarFooter>
     </Sidebar>
   );