diff --git a/llama_stack/ui/app/logs/vector-stores/layout.tsx b/llama_stack/ui/app/logs/vector-stores/layout.tsx
index 9245f5486..921d505be 100644
--- a/llama_stack/ui/app/logs/vector-stores/layout.tsx
+++ b/llama_stack/ui/app/logs/vector-stores/layout.tsx
@@ -1,16 +1,31 @@
 "use client";
 
-import React from "react";
-import LogsLayout from "@/components/layout/logs-layout";
+import { useParams, usePathname } from "next/navigation";
+import {
+  PageBreadcrumb,
+  BreadcrumbSegment,
+} from "@/components/layout/page-breadcrumb";
 
-export default function VectorStoresLayout({
+export default function VectorStoreDetailLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const params = useParams();
+  const pathname = usePathname();
+  const vectorStoreId = params.id as string;
+
+  const breadcrumbSegments: BreadcrumbSegment[] = [
+    { label: "Vector Stores", href: "/logs/vector-stores" },
+    { label: `Details (${vectorStoreId})` },
+  ];
+
+  const isBaseDetailPage = pathname === `/logs/vector-stores/${vectorStoreId}`;
+
   return (
-    <LogsLayout sectionLabel="Vector Stores" basePath="/logs/vector-stores">
+    <div className="space-y-4">
+      {isBaseDetailPage && <PageBreadcrumb segments={breadcrumbSegments} />}
       {children}
-    </LogsLayout>
+    </div>
   );
 }
diff --git a/llama_stack/ui/app/logs/vector-stores/page.tsx b/llama_stack/ui/app/logs/vector-stores/page.tsx
index 29e1fabd6..664513caa 100644
--- a/llama_stack/ui/app/logs/vector-stores/page.tsx
+++ b/llama_stack/ui/app/logs/vector-stores/page.tsx
@@ -8,6 +8,7 @@ import type {
 } from "llama-stack-client/resources/vector-stores/vector-stores";
 import { useRouter } from "next/navigation";
 import { usePagination } from "@/hooks/use-pagination";
+import { Button } from "@/components/ui/button";
 import {
   Table,
   TableBody,
@@ -49,73 +50,92 @@ export default function VectorStoresPage() {
     }
   }, [status, hasMore, loadMore]);
 
-  if (status === "loading") {
+  const renderContent = () => {
+    if (status === "loading") {
+      return (
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-full"/>
+            <Skeleton className="h-4 w-full"/>
+            <Skeleton className="h-4 w-full"/>
+          </div>
+      );
+    }
+
+    if (status === "error") {
+      return <div className="text-destructive">Error: {error?.message}</div>;
+    }
+
+    if (!stores || stores.length === 0) {
+      return <p>No vector stores found.</p>;
+    }
+
     return (
-      <div className="space-y-2">
-        <Skeleton className="h-8 w-full" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-full" />
-      </div>
+        <div className="overflow-auto flex-1 min-h-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>ID</TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead>Completed</TableHead>
+                <TableHead>Cancelled</TableHead>
+                <TableHead>Failed</TableHead>
+                <TableHead>In Progress</TableHead>
+                <TableHead>Total</TableHead>
+                <TableHead>Usage Bytes</TableHead>
+                <TableHead>Provider ID</TableHead>
+                <TableHead>Provider Vector DB ID</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {stores.map((store) => {
+                const fileCounts = store.file_counts;
+                const metadata = store.metadata || {};
+                const providerId = metadata.provider_id ?? "";
+                const providerDbId = metadata.provider_vector_db_id ?? "";
+
+                return (
+                    <TableRow
+                        key={store.id}
+                        onClick={() => router.push(`/logs/vector-stores/${store.id}`)}
+                        className="cursor-pointer hover:bg-muted/50"
+                    >
+                    <TableCell>
+                      <Button
+                        variant="link"
+                        className="p-0 h-auto font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                        onClick={() =>
+                          router.push(`/logs/vector-stores/${store.id}`)
+                        }
+                      >
+                        {store.id}
+                      </Button>
+                    </TableCell>
+                      <TableCell>{store.name}</TableCell>
+                      <TableCell>
+                        {new Date(store.created_at * 1000).toLocaleString()}
+                      </TableCell>
+                      <TableCell>{fileCounts.completed}</TableCell>
+                      <TableCell>{fileCounts.cancelled}</TableCell>
+                      <TableCell>{fileCounts.failed}</TableCell>
+                      <TableCell>{fileCounts.in_progress}</TableCell>
+                      <TableCell>{fileCounts.total}</TableCell>
+                      <TableCell>{store.usage_bytes}</TableCell>
+                      <TableCell>{providerId}</TableCell>
+                      <TableCell>{providerDbId}</TableCell>
+                    </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
     );
-  }
-
-  if (status === "error") {
-    return <div className="text-destructive">Error: {error?.message}</div>;
-  }
-
-  if (!stores || stores.length === 0) {
-    return <p>No vector stores found.</p>;
-  }
+  };
 
   return (
-    <div className="overflow-auto flex-1 min-h-0">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>ID</TableHead>
-            <TableHead>Name</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead>Completed</TableHead>
-            <TableHead>Cancelled</TableHead>
-            <TableHead>Failed</TableHead>
-            <TableHead>In Progress</TableHead>
-            <TableHead>Total</TableHead>
-            <TableHead>Usage Bytes</TableHead>
-            <TableHead>Provider ID</TableHead>
-            <TableHead>Provider Vector DB ID</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {stores.map((store) => {
-            const fileCounts = store.file_counts;
-            const metadata = store.metadata || {};
-            const providerId = metadata.provider_id ?? "";
-            const providerDbId = metadata.provider_vector_db_id ?? "";
-
-            return (
-              <TableRow
-                key={store.id}
-                onClick={() => router.push(`/logs/vector-stores/${store.id}`)}
-                className="cursor-pointer hover:bg-muted/50"
-              >
-                <TableCell>{store.id}</TableCell>
-                <TableCell>{store.name}</TableCell>
-                <TableCell>
-                  {new Date(store.created_at * 1000).toLocaleString()}
-                </TableCell>
-                <TableCell>{fileCounts.completed}</TableCell>
-                <TableCell>{fileCounts.cancelled}</TableCell>
-                <TableCell>{fileCounts.failed}</TableCell>
-                <TableCell>{fileCounts.in_progress}</TableCell>
-                <TableCell>{fileCounts.total}</TableCell>
-                <TableCell>{store.usage_bytes}</TableCell>
-                <TableCell>{providerId}</TableCell>
-                <TableCell>{providerDbId}</TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </div>
+      <div className="space-y-4">
+        <h1 className="text-2xl font-semibold">Vector Stores</h1>
+        {renderContent()}
+      </div>
   );
 }