diff --git a/app/api_routes.py b/app/api_routes.py
index 1372c59..e375463 100644
--- a/app/api_routes.py
+++ b/app/api_routes.py
@@ -267,9 +267,7 @@ def api_delete_chatbot(chatbot_id: int) -> Union[Response, tuple[Response, int]]
     db.session.commit()
 
     return (
-        jsonify(
-            {"message": f"Chatbot '{chatbot.id}' has been deleted successfully."}
-        ),
+        jsonify({"message": f"Chatbot '{chatbot.id}' has been deleted successfully."}),
         200,
     )
 
@@ -560,6 +558,7 @@ def api_get_data():
             "user_bots",
             "trend_today",
             "leaderboard",
+            "user_images",
         }
         queues = [q for q in queues if q in valid_queues]
         response = {"success": True}
@@ -593,6 +592,9 @@ def api_get_data():
                 Chatbot.user_id == o_uid
             ).all()
             response["user_bots"] = [bot.to_dict() for bot in o_chatbots]
+        if "user_images" in queues:
+            o_images: List[Image] = Image.query.filter(Image.user_id == o_uid).all()
+            response["user_images"] = [image.to_dict() for image in o_images]
 
         if "trend_today" in queues:
             chatbot_of_the_day: Chatbot = (
diff --git a/client/bun.lockb b/client/bun.lockb
index ca1da32..a846132 100755
Binary files a/client/bun.lockb and b/client/bun.lockb differ
diff --git a/client/package.json b/client/package.json
index c76c390..bdddee9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@tanstack/react-query": "^5.59.15",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
diff --git a/client/src/components/ChatbotCard.tsx b/client/src/components/ChatbotCard.tsx
index 3d77f00..f56c1de 100644
--- a/client/src/components/ChatbotCard.tsx
+++ b/client/src/components/ChatbotCard.tsx
@@ -1,12 +1,11 @@
 import { Flag, Heart, MessageSquare, Share2, Trash2 } from "lucide-react"; // Import the Trash icon
-import { useShareModal } from "@/stores/modal-store";
+import { useDeleteChatbotModal, useShareModal } from "@/stores/modal-store";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { likeAndReport, deleteChatbot } from "@/lib/queries"; // Ensure you have a deleteChatbot function
+import { likeAndReport } from "@/lib/queries"; // Ensure you have a deleteChatbot function
 import { Card, CardContent, CardFooter, CardHeader } from "./ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Button } from "./ui/button";
 import { Link, useNavigate } from "react-router-dom";
-import { toast } from "react-hot-toast"; // Optional for notifications
 
 export function ChatbotCard({
   chatbot,
@@ -18,31 +17,14 @@ export function ChatbotCard({
   const shareModel = useShareModal();
   const rq = useQueryClient();
   const navigate = useNavigate();
-
+  const deleteModal = useDeleteChatbotModal();
   const likeMutation = useMutation({
     mutationFn: likeAndReport,
     onSuccess: () => rq.invalidateQueries({ queryKey: queryKeys }),
   });
 
-  const deleteMutation = useMutation({
-    mutationFn: deleteChatbot, // Your API function to delete a chatbot
-    onSuccess: () => {
-      rq.invalidateQueries({ queryKey: queryKeys });
-      toast.success("Chatbot deleted successfully!"); // Notify the user
-    },
-    onError: () => {
-      toast.error("Failed to delete the chatbot."); // Error handling
-    },
-  });
-
-  const handleDelete = () => {
-    if (window.confirm("Are you sure you want to delete this chatbot?")) {
-        deleteMutation.mutate(String(chatbot.id)); // Convert to string
-    }
-  };
-
   return (
-    <Card className="w-full max-w-sm mx-auto h-full">
+    <Card className="w-full max-w-sm mx-auto h-fit">
       <Link to={`/hub/${chatbot.id}`}>
         <CardHeader className="flex flex-row items-center gap-4">
           <Avatar className="w-16 h-16">
@@ -55,7 +37,9 @@ export function ChatbotCard({
             </AvatarFallback>
           </Avatar>
           <div className="flex flex-col">
-            <h2 className="text-2xl font-bold">{chatbot.latest_version.name}</h2>
+            <h2 className="text-2xl font-bold">
+              {chatbot.latest_version.name}
+            </h2>
             <p className="text-sm text-muted-foreground">
               Created by @{chatbot.latest_version.modified_by}
             </p>
@@ -134,7 +118,11 @@ export function ChatbotCard({
           <Button
             variant="destructive" // Use a destructive variant for delete
             size="icon"
-            onClick={handleDelete}
+            onClick={() =>
+              deleteModal.onOpen({
+                id: chatbot.id,
+              })
+            }
           >
             <Trash2 className="h-2 w-2" />
             <span className="sr-only">Delete</span>
diff --git a/client/src/components/ImageCard.tsx b/client/src/components/ImageCard.tsx
index 63f1975..3aa3e3a 100644
--- a/client/src/components/ImageCard.tsx
+++ b/client/src/components/ImageCard.tsx
@@ -13,7 +13,7 @@ export function ImageCard({ image }: { image: ImageGen }) {
   });
 
   return (
-    <Card className="w-full max-w-sm mx-auto overflow-hidden h-full">
+    <Card className="w-full max-w-sm mx-auto overflow-hidden h-fit">
       <CardHeader className="p-0">
         <div className="relative aspect-square">
           <img
diff --git a/client/src/components/ui/tabs.tsx b/client/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..f57fffd
--- /dev/null
+++ b/client/src/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/client/src/lib/queries.ts b/client/src/lib/queries.ts
index f93b9f0..2c001ae 100644
--- a/client/src/lib/queries.ts
+++ b/client/src/lib/queries.ts
@@ -100,7 +100,7 @@ export const deleteChatbot = async (id: string): Promise<void> => {
     }
   );
   return data;
-}
+};
 
 export const deleteAllChats = async (id: string): Promise<void> => {
   const token = localStorage.getItem("token");
@@ -146,6 +146,7 @@ interface DataResponse {
   system_bots?: Chatbot[]; // Optional property
   my_bots?: Chatbot[]; // Optional property
   my_images?: ImageGen[]; // Optional property
+  user_images?: ImageGen[]; // Optional property
   public_bots?: Chatbot[]; // Optional property
   user_bots?: Chatbot[]; // Optional property
   public_images?: ImageGen[]; // Optional property
@@ -165,6 +166,7 @@ const validQueues = [
   "user_bots",
   "trend_today",
   "leaderboard",
+  "user_images",
 ] as const;
 
 type ValidQueue = (typeof validQueues)[number];
diff --git a/client/src/pages/Hub.tsx b/client/src/pages/Hub.tsx
index a4efb1c..003f105 100644
--- a/client/src/pages/Hub.tsx
+++ b/client/src/pages/Hub.tsx
@@ -14,14 +14,8 @@ import { fetchData } from "@/lib/queries";
 import { chatbotCategories } from "@/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
-// Function to shuffle an array
-const shuffleArray = (array: any[]) => {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]]; // Swap elements
-  }
-  return array;
-};
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export default function HubPage() {
   const [searchTerm, setSearchTerm] = useState("");
@@ -45,29 +39,13 @@ export default function HubPage() {
   });
 
   // Combine and shuffle bots and images
-  const combinedData = [];
-  if (botsData?.public_bots) {
-    combinedData.push(
-      ...botsData.public_bots.map((bot) => ({ type: "bot", data: bot }))
-    );
-  }
-  if (imagesData?.public_images) {
-    combinedData.push(
-      ...imagesData.public_images.map((image) => ({
-        type: "image",
-        data: image,
-      }))
-    );
-  }
-
-  const shuffledData = shuffleArray(combinedData);
-  const filteredData = shuffledData.filter((item) => {
-    const matchesSearchTerm = item.data.latest_version.prompt
+  const filteredBotsData = botsData?.public_bots?.filter((item) => {
+    const matchesSearchTerm = item.latest_version.prompt
       .toLowerCase()
       .includes(searchTerm.toLowerCase());
     const matchesCategory =
       selectedCategory === "All" ||
-      item.data.category?.toLowerCase() === selectedCategory.toLowerCase();
+      item.category?.toLowerCase() === selectedCategory.toLowerCase();
 
     return matchesSearchTerm && matchesCategory;
   });
@@ -79,31 +57,81 @@ export default function HubPage() {
         <h2 className="text-2xl font-semibold mb-6 p-3">
           Chatbots and AI Images Hub
         </h2>
-        {/* Search Bar and Category Filter */}
-        <div className="flex gap-4 mb-6 w-full max-w-2xl">
-          <Input
-            type="text"
-            placeholder="Search..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          <Select
-            value={selectedCategory}
-            onValueChange={(v) => setSelectedCategory(v)}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="Category" />
-            </SelectTrigger>
-            <SelectContent>
-              {["All", ...chatbotCategories].map((category) => (
-                <SelectItem key={category} value={category}>
-                  {category}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 auto-rows-[minmax(300px, auto)]">
+
+        <Tabs defaultValue="chatbots">
+          <div className="flex space-x-2">
+            <div className="flex gap-4 mb-6 w-full max-w-2xl">
+              <Input
+                type="text"
+                placeholder="Search..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+              <Select
+                value={selectedCategory}
+                onValueChange={(v) => setSelectedCategory(v)}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Category" />
+                </SelectTrigger>
+                <SelectContent>
+                  {["All", ...chatbotCategories].map((category) => (
+                    <SelectItem key={category} value={category}>
+                      {category}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <TabsList>
+              <TabsTrigger value="chatbots">Chatbots</TabsTrigger>
+              <TabsTrigger value="images">Images</TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent value="chatbots">
+            <div className="grid grid-flow-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full min-h-screen">
+              {botsLoading ? (
+                <BotsLoading />
+              ) : botsError ? (
+                <div className="col-span-1 text-red-500 text-center">
+                  {botsError?.message}
+                </div>
+              ) : botsData && botsData.public_bots!.length > 0 ? (
+                filteredBotsData?.map((item) => (
+                  <ChatbotCard
+                    chatbot={item}
+                    queryKeys={["user_bots"]}
+                    key={item.latest_version.name}
+                  />
+                ))
+              ) : (
+                <div className="col-span-1 text-center">No bots available.</div>
+              )}
+            </div>
+          </TabsContent>
+          <TabsContent value="images">
+            <div className="grid grid-flow-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full min-h-screen">
+              {imagesLoading ? (
+                <BotsLoading />
+              ) : imagesError ? (
+                <div className="col-span-1 text-red-500 text-center">
+                  {imagesError?.message}
+                </div>
+              ) : imagesData && imagesData.public_images!.length > 0 ? (
+                imagesData.public_images!.map((item) => (
+                  <ImageCard image={item} key={item.prompt} />
+                ))
+              ) : (
+                <div className="col-span-1 text-center">
+                  No Images available.
+                </div>
+              )}
+            </div>
+          </TabsContent>
+        </Tabs>
+
+        {/* <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 auto-rows-[minmax(300px, auto)]">
           {botsLoading || imagesLoading ? (
             <BotsLoading />
           ) : botsError || imagesError ? (
@@ -129,7 +157,7 @@ export default function HubPage() {
               No bots or images available.
             </div>
           )}
-        </div>
+        </div> */}
       </div>
     </>
   );
diff --git a/client/src/pages/Profile.tsx b/client/src/pages/Profile.tsx
index b876c8c..4f98377 100644
--- a/client/src/pages/Profile.tsx
+++ b/client/src/pages/Profile.tsx
@@ -14,6 +14,8 @@ import {
   LogOut,
   Settings,
 } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import { Navigate, useParams } from "react-router-dom";
 import { useSettingsModal, useUpdateProfileModal } from "@/stores/modal-store";
 import { ChatbotCard } from "@/components/ChatbotCard";
@@ -21,6 +23,7 @@ import moment from "moment";
 import { Badge } from "@/components/ui/badge";
 import { useEffect, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { ImageCard } from "@/components/ImageCard";
 
 export default function ProfilePage() {
   const { username } = useParams();
@@ -59,6 +62,16 @@ export default function ProfilePage() {
     enabled: !!userId,
   });
 
+  const {
+    data: imagesData,
+    isLoading: imagesLoading,
+    error: imagesError,
+  } = useQuery({
+    queryKey: ["user_images"],
+    queryFn: () => fetchData({ queues: ["user_images"], uid: userId }),
+    enabled: !!userId,
+  });
+
   if (isError && (error as AxiosError).response?.status === 404) {
     return <Navigate to="/404" />; // Redirect to the 404 page
   }
@@ -168,25 +181,52 @@ export default function ProfilePage() {
             </div>
           </CardContent>
         </Card>
-        <div className="grid grid-flow-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-3 w-full">
-          {botsLoading ? (
-            <ChatbotLoading />
-          ) : botsError ? (
-            <div className="col-span-1 text-red-500 text-center">
-              {botsError?.message}
+        <Tabs defaultValue="chatbots">
+          <TabsList>
+            <TabsTrigger value="chatbots">Chatbots</TabsTrigger>
+            <TabsTrigger value="images">Images</TabsTrigger>
+          </TabsList>
+          <TabsContent value="chatbots">
+            <div className="grid grid-flow-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-3 w-full">
+              {botsLoading ? (
+                <ChatbotLoading />
+              ) : botsError ? (
+                <div className="col-span-1 text-red-500 text-center">
+                  {botsError?.message}
+                </div>
+              ) : botsData && botsData.user_bots!.length > 0 ? (
+                botsData.user_bots!.map((item) => (
+                  <ChatbotCard
+                    chatbot={item}
+                    queryKeys={["user_bots"]}
+                    key={item.latest_version.name}
+                  />
+                ))
+              ) : (
+                <div className="col-span-1 text-center">No bots available.</div>
+              )}
             </div>
-          ) : botsData && botsData.user_bots!.length > 0 ? (
-            botsData.user_bots!.map((item) => (
-              <ChatbotCard
-                chatbot={item}
-                queryKeys={["user_bots"]}
-                key={item.latest_version.name}
-              />
-            ))
-          ) : (
-            <div className="col-span-1 text-center">No bots available.</div>
-          )}
-        </div>
+          </TabsContent>
+          <TabsContent value="images">
+            <div className="grid grid-flow-dense grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-3 w-full">
+              {imagesLoading ? (
+                <ChatbotLoading />
+              ) : imagesError ? (
+                <div className="col-span-1 text-red-500 text-center">
+                  {imagesError?.message}
+                </div>
+              ) : imagesData && imagesData.user_images!.length > 0 ? (
+                imagesData.user_images!.map((item) => (
+                  <ImageCard image={item} key={item.prompt} />
+                ))
+              ) : (
+                <div className="col-span-1 text-center">
+                  No Images available.
+                </div>
+              )}
+            </div>
+          </TabsContent>
+        </Tabs>
       </div>
     </>
   );