diff --git a/src/app/(main)/(admin)/indexes/[id]/[part]/page.tsx b/src/app/(main)/(admin)/indexes/[id]/[part]/page.tsx
index ca82334e..bdf90570 100644
--- a/src/app/(main)/(admin)/indexes/[id]/[part]/page.tsx
+++ b/src/app/(main)/(admin)/indexes/[id]/[part]/page.tsx
@@ -12,7 +12,7 @@ import dynamic from 'next/dynamic';
 import { type ReactElement, Suspense } from 'react';
 
 const GraphEditor = dynamic(() => import('@/components/graph/GraphEditor').then(m => m.GraphEditor), { ssr: false });
-const GraphEntitiesTable = dynamic(() => import('@/components/graph/GraphEntitiesTable').then(m => m.GraphEntitiesTable), { ssr: false });
+const GraphCreateEntity = dynamic(() => import('@/components/graph/GraphCreateEntity').then(m => m.GraphCreateEntity), { ssr: false });
 
 export default function Page ({ params }: PageProps<{ part: string }>) {
   const index = useIndex();
@@ -52,7 +52,7 @@ export default function Page ({ params }: PageProps<{ part: string }>) {
       case 'graph-entities':
         el = (
           <Suspense fallback={<Skeleton className="block w-4 h-20 rounded" />}>
-            <GraphEntitiesTable index={index} />
+            <GraphCreateEntity index={index} />
           </Suspense>
         );
         break;
diff --git a/src/components/graph/GraphCreateEntity.tsx b/src/components/graph/GraphCreateEntity.tsx
new file mode 100644
index 00000000..48965129
--- /dev/null
+++ b/src/components/graph/GraphCreateEntity.tsx
@@ -0,0 +1,169 @@
+import { createSynopsisEntity, type Entity } from '@/components/graph/api';
+import { JsonEditor } from '@/components/graph/components/JsonEditor';
+import { SearchEntity } from '@/components/graph/components/SearchEntity';
+import { SearchEntityById } from '@/components/graph/components/SearchEntityById';
+import { useEntities } from '@/components/graph/selectEntities';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import type { Index } from '@/core/repositories/index_';
+import { cn } from '@/lib/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2Icon, Maximize2Icon } from 'lucide-react';
+import type monaco from 'monaco-editor';
+import { useRouter } from 'next/navigation';
+import { type ReactNode, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import z from 'zod';
+
+export function GraphCreateEntity ({ index, className }: { index: Index, className?: string }) {
+  const useEntitiesReturns = useEntities();
+  const { clearSelection, ...useEntitiesRequired } = useEntitiesReturns;
+  const { selectedEntities } = useEntitiesRequired;
+  const router = useRouter();
+
+  return (
+    <div className="space-y-4">
+      <div className="lg:max-w-[50vw]">
+        <CreateEntityForm
+          entities={selectedEntities}
+          onSubmit={async (data) => {
+            const createdEntity = await createSynopsisEntity(data);
+            router.push(`/indexes/${index.id}/graph-editor?query=entity:${createdEntity.id}`);
+          }}
+          onClearSelection={clearSelection}
+          afterEntities={(
+            <>
+              <SearchEntity {...useEntitiesRequired} />
+              <SearchEntityById {...useEntitiesRequired} />
+            </>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+function CreateEntityForm ({ className, entities, onSubmit, onClearSelection, afterEntities }: { className?: string, entities: Entity[], onSubmit: (data: z.infer<typeof createEntitySchema> & { meta: any, entities: number[] }) => Promise<void>, onClearSelection: (id?: number) => void, afterEntities?: ReactNode }) {
+  const form = useForm<z.infer<typeof createEntitySchema>>({
+    resolver: zodResolver(createEntitySchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      topic: '',
+    },
+  });
+  const metaRef = useRef<monaco.editor.IStandaloneCodeEditor | undefined | null>(null);
+
+  const handleSubmit = form.handleSubmit(async values => onSubmit({
+    ...values,
+    meta: JSON.parse(metaRef.current!.getValue()),
+    entities: entities.map(entity => Number(entity.id)),
+  }));
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleClickFullscreen = () => {
+    containerRef.current?.requestFullscreen();
+  };
+
+  return (
+    <Form {...form}>
+      <form className={cn('space-y-4', className)} onSubmit={handleSubmit}>
+        <h2 className="font-bold text-xl">Create synopsis entity</h2>
+        <FormField
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="topic"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Topic</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormItem>
+          <div className="flex items-center justify-between">
+            <Label>
+              Meta
+            </Label>
+            <button className="text-foreground/50 hover:text-foreground transition-colors" onMouseDown={handleClickFullscreen}>
+              <Maximize2Icon className="w-3 h-3" />
+            </button>
+          </div>
+          <FormControl>
+            <div className="w-full h-32 border" ref={containerRef}>
+              <JsonEditor defaultValue="{}" ref={metaRef} />
+            </div>
+          </FormControl>
+        </FormItem>
+        <FormItem>
+          <Label>Entities</Label>
+          <TooltipProvider>
+            <div className="flex gap-2 flex-wrap">
+              {entities.map(entity => (
+                <Tooltip key={entity.id}>
+                  <TooltipTrigger type="button">
+                    <Badge key={entity.id} variant="secondary">{entity.name} #{entity.id}</Badge>
+                  </TooltipTrigger>
+                  <TooltipContent className="space-y-2 w-[360px]">
+                    <h3 className="font-bold">{entity.name} #{entity.id}</h3>
+                    <p className="text-xs text-accent-foreground">{entity.description}</p>
+                    <Button variant="secondary" className="w-full mt-4" size="sm" onClick={() => onClearSelection(Number(entity.id))}>Remove from entities</Button>
+                  </TooltipContent>
+                </Tooltip>
+              ))}
+            </div>
+          </TooltipProvider>
+          <div className="grid grid-cols-3 gap-2">
+            {afterEntities}
+            <Button variant="ghost" onClick={() => onClearSelection()}>
+              Clear Selection
+            </Button>
+          </div>
+        </FormItem>
+        <div className="!mt-8">
+          <Button type="submit" disabled={form.formState.disabled}>
+            {form.formState.isSubmitting && <Loader2Icon className='w-4 h-4 mr-2 animate-spin repeat-infinite' />}
+            Create Entity
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+const createEntitySchema = z.object({
+  name: z.string().min(1).regex(/\S/),
+  description: z.string().min(1).regex(/\S/),
+  topic: z.string().min(1).regex(/\S/),
+});
diff --git a/src/components/graph/GraphEntitiesTable.tsx b/src/components/graph/GraphEntitiesTable.tsx
deleted file mode 100644
index 36680d72..00000000
--- a/src/components/graph/GraphEntitiesTable.tsx
+++ /dev/null
@@ -1,414 +0,0 @@
-import { metadataCell } from '@/components/cells/metadata';
-import { createSynopsisEntity, type Entity, handleServerEntity, type ServerEntity } from '@/components/graph/api';
-import { JsonEditor } from '@/components/graph/components/JsonEditor';
-import { Loader } from '@/components/loader';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import type { Index } from '@/core/repositories/index_';
-import { fetcher } from '@/lib/fetch';
-import { cn } from '@/lib/utils';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { TooltipArrow } from '@radix-ui/react-tooltip';
-import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
-import type { RowSelectionState } from '@tanstack/table-core';
-import { createColumnHelper } from '@tanstack/table-core';
-import isHotkey from 'is-hotkey';
-import { Maximize2Icon, PlusIcon } from 'lucide-react';
-import type monaco from 'monaco-editor';
-import { useRouter } from 'next/navigation';
-import { type ReactNode, useMemo, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import useSWR from 'swr';
-import z from 'zod';
-
-export function GraphEntitiesTable ({ index, className }: { index: Index, className?: string }) {
-  const { filter, setFilter, table, selectedEntities, isLoading, clearSelection, error } = useGraphEntitiesTable();
-  const router = useRouter();
-
-  return (
-    <div className="space-y-4">
-      <div className="lg:max-w-[50vw]">
-        <CreateEntityForm
-          entities={selectedEntities}
-          onSubmit={async (data) => {
-            const createdEntity = await createSynopsisEntity(data);
-            router.push(`/indexes/${index.id}/graph-editor?query=entity:${createdEntity.id}`);
-          }}
-          onClearSelection={clearSelection}
-          afterEntities={(
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="secondary">
-                  <PlusIcon className="w-4 h-4 mr-2" />
-                  Select entities
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="overflow-x-hidden max-w-screen-md space-y-2">
-                <DialogHeader>
-                  <DialogTitle>
-                    Add entities
-                  </DialogTitle>
-                </DialogHeader>
-                <TableFilterForm filter={filter} onFilterChange={setFilter} disabled={isLoading} />
-                <TooltipProvider>
-                  <div className={cn('rounded-md border max-w-full max-h-[360px] overflow-x-hidden relative', className)}>
-                    <Loader loading={isLoading}>
-                      Searching entities...
-                    </Loader>
-                    <Table className="table-auto text-xs whitespace-nowrap">
-                      <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                          <TableRow key={headerGroup.id} className="sticky top-0">
-                            {headerGroup.headers.map((header) => {
-                              return (
-                                <TableHead key={header.id}>
-                                  {header.isPlaceholder
-                                    ? null
-                                    : flexRender(
-                                      header.column.columnDef.header,
-                                      header.getContext(),
-                                    )}
-                                </TableHead>
-                              );
-                            })}
-                          </TableRow>
-                        ))}
-                      </TableHeader>
-                      <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                          table.getRowModel().rows.map((row) => (
-                            <TableRow
-                              key={row.id}
-                              data-state={row.getIsSelected() && 'selected'}
-                            >
-                              {row.getVisibleCells().map((cell) => (
-                                <TableCell key={cell.id}>
-                                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                </TableCell>
-                              ))}
-                            </TableRow>
-                          ))
-                        ) : (
-                          <TableRow>
-                            <TableCell colSpan={columns.length} className="h-24 text-center">
-                              No results.
-                            </TableCell>
-                          </TableRow>
-                        )}
-                      </TableBody>
-                    </Table>
-                  </div>
-                </TooltipProvider>
-                <DialogClose asChild>
-                  <Button>Confirm</Button>
-                </DialogClose>
-              </DialogContent>
-            </Dialog>
-          )}
-        />
-      </div>
-    </div>
-  );
-}
-
-function TableFilterForm ({ className, filter, onFilterChange, disabled }: { className?: string, filter: TableFilter, onFilterChange: (filter: TableFilter) => void, disabled?: boolean }) {
-  const form = useForm<TableFilter>({
-    values: filter,
-    resolver: zodResolver(tableFilterSchema),
-    disabled,
-    defaultValues: {
-      query: '',
-      top_k: undefined,
-    },
-  });
-
-  return (
-    <Form {...form}>
-      <form className={cn('flex gap-2 items-center', className)} onSubmit={event => {
-        event.stopPropagation();
-        event.preventDefault();
-        return false;
-      }}>
-        <FormField
-          name="query"
-          render={({ field }) => (
-            <FormControl>
-              <Input
-                {...field}
-                placeholder="Input your query..."
-                onKeyDown={ev => {
-                  if (isHotkey('Entry', ev)) {
-                    onFilterChange(form.getValues());
-                  }
-                }}
-              />
-            </FormControl>
-          )}
-        />
-        <Button className="w-max" variant="secondary" type="button" onClick={() => { onFilterChange(form.getValues()); }} disabled={disabled}>Search</Button>
-      </form>
-    </Form>
-  );
-}
-
-function CreateEntityForm ({ className, entities, onSubmit, onClearSelection, afterEntities }: { className?: string, entities: Entity[], onSubmit: (data: z.infer<typeof createEntitySchema> & { meta: any, entities: number[] }) => Promise<void>, onClearSelection: (id?: number) => void, afterEntities?: ReactNode }) {
-  const form = useForm<z.infer<typeof createEntitySchema>>({
-    resolver: zodResolver(createEntitySchema),
-    defaultValues: {
-      name: '',
-      description: '',
-      topic: '',
-    },
-  });
-  const metaRef = useRef<monaco.editor.IStandaloneCodeEditor | undefined | null>(null);
-
-  const handleSubmit = form.handleSubmit(async values => onSubmit({
-    ...values,
-    meta: JSON.parse(metaRef.current!.getValue()),
-    entities: entities.map(entity => Number(entity.id)),
-  }));
-
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const handleClickFullscreen = () => {
-    containerRef.current?.requestFullscreen();
-  };
-
-  return (
-    <Form {...form}>
-      <form className={cn('space-y-4', className)} onSubmit={handleSubmit}>
-        <h2 className="font-bold text-xl">Create synopsis entity</h2>
-        <FormField
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name</FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          name="description"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Description</FormLabel>
-              <FormControl>
-                <Textarea {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          name="topic"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Topic</FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormItem>
-          <div className="flex items-center justify-between">
-            <Label>
-              Meta
-            </Label>
-            <button className="text-foreground/50 hover:text-foreground transition-colors" onMouseDown={handleClickFullscreen}>
-              <Maximize2Icon className="w-3 h-3" />
-            </button>
-          </div>
-          <FormControl>
-            <div className="w-full h-32 border" ref={containerRef}>
-              <JsonEditor defaultValue="{}" ref={metaRef} />
-            </div>
-          </FormControl>
-        </FormItem>
-        <FormItem>
-          <Label>Entities</Label>
-          <TooltipProvider>
-            <div className="flex gap-2 flex-wrap">
-              {entities.map(entity => (
-                <Tooltip key={entity.id}>
-                  <TooltipTrigger type="button">
-                    <Badge key={entity.id} variant="secondary">{entity.name} #{entity.id}</Badge>
-                  </TooltipTrigger>
-                  <TooltipContent className="space-y-2 w-[360px]">
-                    <h3 className="font-bold">{entity.name} #{entity.id}</h3>
-                    <p className="text-xs text-accent-foreground">{entity.description}</p>
-                    <Button variant="secondary" className="w-full mt-4" size="sm" onClick={() => onClearSelection(Number(entity.id))}>Remove from entities</Button>
-                  </TooltipContent>
-                </Tooltip>
-              ))}
-            </div>
-          </TooltipProvider>
-          <div className="grid grid-cols-2 gap-2">
-            {afterEntities}
-            <Button variant="ghost" onClick={() => onClearSelection()}>
-              Clear Selection
-            </Button>
-          </div>
-        </FormItem>
-        <div className="!mt-8">
-          <Button type="submit">Create Entity</Button>
-        </div>
-      </form>
-    </Form>
-  );
-}
-
-type TableFilter = {
-  query: string;
-  top_k?: number
-}
-
-const tableFilterSchema = z.object({
-  query: z.string(),
-  top_k: z.coerce.number().optional(),
-});
-
-const createEntitySchema = z.object({
-  name: z.string().min(1).regex(/\S/),
-  description: z.string().min(1).regex(/\S/),
-  topic: z.string().min(1).regex(/\S/),
-});
-
-function shouldFetch (filter: TableFilter) {
-  return !!filter.query.trim();
-}
-
-function useGraphEntitiesTable () {
-  const [filter, setFilter] = useState<TableFilter>(() => ({ query: '', top_k: undefined }));
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const entityMap = useRef<Map<string, Entity>>(undefined as never);
-  if (!entityMap.current) {
-    entityMap.current = new Map<string, Entity>();
-  }
-
-  const { data, isLoading, error } = useSWR(shouldFetch(filter) && ['get', '/api/v1/indexes/graph/entities/search', filter], fetcher<ServerEntity[]>, {
-    revalidateOnFocus: false,
-  });
-
-  const entities = useMemo(() => {
-    if (data) {
-      return data.map(serverEntity => {
-        const entity = handleServerEntity(serverEntity);
-        entityMap.current.set(String(entity.id), entity);
-        return entity;
-      });
-    } else {
-      return [];
-    }
-  }, [data]);
-
-  const table = useReactTable<Entity>({
-    data: entities,
-    getRowId: row => String(row.id),
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    enableRowSelection: true,
-    enableMultiRowSelection: true,
-    state: {
-      rowSelection,
-    },
-    onRowSelectionChange: setRowSelection,
-  });
-
-  const selectedEntities = useMemo(() => {
-    return Object.keys(rowSelection).map(id => entityMap.current.get(id)).filter(Boolean) as Entity[];
-  }, [rowSelection]);
-
-  const clearSelection = (id?: number) => {
-    if (id == null) {
-      setRowSelection({});
-    } else {
-      setRowSelection(selection => {
-        const idStr = String(id);
-        if (idStr in selection) {
-          selection = { ...selection };
-          delete selection[idStr];
-        }
-
-        return selection;
-      });
-    }
-  };
-
-  return {
-    table,
-    filter,
-    setFilter,
-    isLoading,
-    error,
-    selectedEntities,
-    clearSelection,
-  };
-}
-
-const helper = createColumnHelper<Entity>();
-
-const columns: ColumnDef<Entity, any>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && 'indeterminate')
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  helper.accessor('id', {}),
-  helper.accessor('name', {}),
-  helper.accessor('description', {
-    cell: row => {
-      const maxLength = 80;
-      const description = row.getValue();
-      if (description.length > maxLength) {
-        return (
-          <Tooltip>
-            <TooltipTrigger>
-              {description.slice(0, maxLength - 3) + '...'}
-            </TooltipTrigger>
-            <TooltipContent className="max-w-sm break-words text-wrap" align="start">
-              <TooltipArrow className="fill-background" />
-              <p className="text-xs">
-                {description}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        );
-      } else {
-        return description;
-      }
-    },
-  }),
-  helper.accessor('meta', { cell: metadataCell }),
-];
-
diff --git a/src/components/graph/components/EntitiesTable.tsx b/src/components/graph/components/EntitiesTable.tsx
new file mode 100644
index 00000000..48603c6d
--- /dev/null
+++ b/src/components/graph/components/EntitiesTable.tsx
@@ -0,0 +1,148 @@
+import { metadataCell } from '@/components/cells/metadata';
+import type { Entity } from '@/components/graph/api';
+import { Loader } from '@/components/loader';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { TooltipArrow } from '@radix-ui/react-tooltip';
+import { type ColumnDef, flexRender, Table as ReactTable } from '@tanstack/react-table';
+import { createColumnHelper } from '@tanstack/table-core';
+import { AlertTriangleIcon } from 'lucide-react';
+
+export interface RemoteEntity extends Partial<Omit<Entity, 'id'>> {
+  id: number | string;
+  isLoading?: boolean;
+  error?: unknown;
+}
+
+export function EntitiesTable ({ className, isLoading, table }: { className?: string, isLoading: boolean, table: ReactTable<RemoteEntity> }) {
+  return (
+    <TooltipProvider>
+      <div className={cn('rounded-md border max-w-full max-h-[360px] overflow-x-hidden relative', className)}>
+        <Loader loading={isLoading}>
+          Searching entities...
+        </Loader>
+        <Table className="table-auto text-xs whitespace-nowrap">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="sticky top-0">
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={entityColumns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </TooltipProvider>
+  );
+}
+
+const helper = createColumnHelper<RemoteEntity>();
+
+export const entityColumns: ColumnDef<RemoteEntity, any>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  helper.accessor('id', {}),
+  helper.accessor('name', {
+    cell: ({ getValue, row }) => {
+      if (row.original.isLoading) {
+        return <Skeleton className="w-12 h-4" />;
+      }
+
+      if (!!row.original.error) {
+        return (
+          <span className="text-destructive flex items-center gap-2 text-xs">
+            <AlertTriangleIcon className="w-3 h-3" />
+            <span>
+              Failed to find entity #{row.id}
+            </span>
+          </span>
+        );
+      }
+
+      return getValue();
+    },
+  }),
+  helper.accessor('description', {
+    cell: ({ getValue, row }) => {
+      if (row.original.isLoading) {
+        return <Skeleton className="w-12 h-4" />;
+      }
+      const maxLength = 80;
+      const description = getValue() ?? '';
+      if (description.length > maxLength) {
+        return (
+          <Tooltip>
+            <TooltipTrigger>
+              {description.slice(0, maxLength - 3) + '...'}
+            </TooltipTrigger>
+            <TooltipContent className="max-w-sm break-words text-wrap" align="start">
+              <TooltipArrow className="fill-background" />
+              <p className="text-xs">
+                {description}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        );
+      } else {
+        return description;
+      }
+    },
+  }),
+  helper.accessor('meta', { cell: metadataCell }),
+];
+
diff --git a/src/components/graph/components/SearchEntity.tsx b/src/components/graph/components/SearchEntity.tsx
new file mode 100644
index 00000000..ba6c4e63
--- /dev/null
+++ b/src/components/graph/components/SearchEntity.tsx
@@ -0,0 +1,90 @@
+import { EntitiesTable, entityColumns } from '@/components/graph/components/EntitiesTable';
+import { type SearchEntityFilter, type UseEntitiesRequired, useGraphEntitiesTable } from '@/components/graph/selectEntities';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogPortal, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Form, FormControl, FormField } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import isHotkey from 'is-hotkey';
+import { SearchIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import z from 'zod';
+
+export interface SearchEntityProps extends UseEntitiesRequired {
+}
+
+export function SearchEntity ({ ...props }: SearchEntityProps) {
+  const { table, filter, setFilter, isLoading, error } = useGraphEntitiesTable({
+    columns: entityColumns,
+    ...props,
+  });
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant='secondary'>
+          <SearchIcon className="mr-2 w-3.5 h-3.5" />
+          Search entities
+        </Button>
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogContent className="overflow-x-hidden max-w-screen-md space-y-2">
+          <DialogHeader>
+            <DialogTitle>
+              Search entities
+            </DialogTitle>
+          </DialogHeader>
+          <TableFilterForm filter={filter} onFilterChange={setFilter} />
+          <EntitiesTable table={table} isLoading={isLoading} />
+        </DialogContent>
+      </DialogPortal>
+    </Dialog>
+  );
+}
+
+function TableFilterForm ({ className, filter, onFilterChange, disabled }: { className?: string, filter: SearchEntityFilter, onFilterChange: (filter: SearchEntityFilter) => void, disabled?: boolean }) {
+  const form = useForm<SearchEntityFilter>({
+    values: filter,
+    resolver: zodResolver(tableFilterSchema),
+    disabled,
+    defaultValues: {
+      query: '',
+      top_k: undefined,
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form className={cn('flex gap-2 items-center', className)} onSubmit={event => {
+        event.stopPropagation();
+        event.preventDefault();
+        return false;
+      }}>
+        <FormField
+          name="query"
+          render={({ field }) => (
+            <FormControl>
+              <Input
+                {...field}
+                placeholder="Input your query..."
+                onKeyDown={ev => {
+                  if (isHotkey('Enter', ev)) {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    onFilterChange(form.getValues());
+                  }
+                }}
+              />
+            </FormControl>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
+
+const tableFilterSchema = z.object({
+  query: z.string(),
+  top_k: z.coerce.number().optional(),
+});
\ No newline at end of file
diff --git a/src/components/graph/components/SearchEntityById.tsx b/src/components/graph/components/SearchEntityById.tsx
new file mode 100644
index 00000000..5d1f5ad3
--- /dev/null
+++ b/src/components/graph/components/SearchEntityById.tsx
@@ -0,0 +1,97 @@
+import { EntitiesTable, entityColumns } from '@/components/graph/components/EntitiesTable';
+import { type UseEntitiesRequired, useGraphEntitiesByIdsTable } from '@/components/graph/selectEntities';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogPortal, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Form, FormControl, FormField } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import isHotkey from 'is-hotkey';
+import { PlusIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import z from 'zod';
+
+export interface SearchEntityProps extends UseEntitiesRequired {
+}
+
+export function SearchEntityById ({ ...props }: SearchEntityProps) {
+  const { table, ids, setIds } = useGraphEntitiesByIdsTable({
+    columns: entityColumns,
+    ...props,
+  });
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant='secondary'>
+          <PlusIcon className="mr-2 w-3.5 h-3.5" />
+          Entities by IDs
+        </Button>
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogContent className="overflow-x-hidden max-w-screen-md space-y-2">
+          <DialogHeader>
+            <DialogTitle>
+              Search entities by IDs
+            </DialogTitle>
+          </DialogHeader>
+          <TableFilterForm filter={ids} onFilterChange={setIds} />
+          <EntitiesTable table={table} isLoading={false} />
+        </DialogContent>
+      </DialogPortal>
+    </Dialog>
+  );
+}
+
+function TableFilterForm ({ className, filter, onFilterChange, disabled }: { className?: string, filter: number[], onFilterChange: (filter: number[]) => void, disabled?: boolean }) {
+  const form = useForm<{ ids: string }>({
+    values: { ids: filter.map(i => String(i)).join(', ') },
+    resolver: zodResolver(tableFilterSchema),
+    disabled,
+    defaultValues: {
+      ids: '',
+    },
+  });
+
+  const populate = () => {
+    const ids = form.getValues().ids.split(',')
+      .map(s => s.trim())
+      .filter(Boolean)
+      .map(s => parseInt(s))
+      .filter(n => isFinite(n));
+    onFilterChange(ids);
+  };
+
+  return (
+    <Form {...form}>
+      <form className={cn('flex gap-2 items-center', className)} onSubmit={event => {
+        event.stopPropagation();
+        event.preventDefault();
+        return false;
+      }}>
+        <FormField
+          name="ids"
+          render={({ field }) => (
+            <FormControl>
+              <Input
+                {...field}
+                placeholder="Input entities ids separated by ','"
+                onKeyDown={ev => {
+                  if (isHotkey('Enter', ev)) {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    populate();
+                  }
+                }}
+              />
+            </FormControl>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
+
+const tableFilterSchema = z.object({
+  ids: z.string(),
+});
\ No newline at end of file
diff --git a/src/components/graph/selectEntities.ts b/src/components/graph/selectEntities.ts
new file mode 100644
index 00000000..1122c934
--- /dev/null
+++ b/src/components/graph/selectEntities.ts
@@ -0,0 +1,175 @@
+import { type Entity, handleServerEntity, type ServerEntity } from '@/components/graph/api';
+import type { RemoteEntity } from '@/components/graph/components/EntitiesTable';
+import { fetcher, handleErrors } from '@/lib/fetch';
+import { type ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { type RowSelectionState } from '@tanstack/table-core';
+import { type Dispatch, type MutableRefObject, type SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
+import useSWR from 'swr';
+
+export type SearchEntityFilter = {
+  query: string;
+  top_k?: number
+}
+
+function shouldFetch (filter: SearchEntityFilter) {
+  return !!filter.query.trim();
+}
+
+export type UseEntitiesRequired = Pick<ReturnType<typeof useEntities>, 'selectedEntities' | 'rowSelection' | 'setRowSelection' | 'entityMap'>
+
+export function useEntities () {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const entityMap = useRef<Map<string, Entity>>(undefined as never);
+  if (!entityMap.current) {
+    entityMap.current = new Map<string, Entity>();
+  }
+
+  const selectedEntities = useMemo(() => {
+    return Object.keys(rowSelection).map(id => entityMap.current.get(id)).filter(Boolean) as Entity[];
+  }, [rowSelection]);
+
+  const clearSelection = (id?: number) => {
+    if (id == null) {
+      setRowSelection({});
+    } else {
+      setRowSelection(selection => {
+        const idStr = String(id);
+        if (idStr in selection) {
+          selection = { ...selection };
+          delete selection[idStr];
+        }
+
+        return selection;
+      });
+    }
+  };
+
+  return {
+    selectedEntities,
+    rowSelection,
+    setRowSelection,
+    clearSelection,
+    entityMap,
+  };
+}
+
+export function useGraphEntitiesTable ({ rowSelection, setRowSelection, entityMap, columns }: { rowSelection: RowSelectionState, setRowSelection: Dispatch<SetStateAction<RowSelectionState>>, entityMap: MutableRefObject<Map<string, RemoteEntity>>, columns: ColumnDef<RemoteEntity, any>[] }) {
+  const [filter, setFilter] = useState<SearchEntityFilter>(() => ({ query: '', top_k: undefined }));
+
+  const { data, isLoading, error } = useSWR(shouldFetch(filter) && ['get', '/api/v1/indexes/graph/entities/search', filter], fetcher<ServerEntity[]>, {
+    revalidateOnFocus: false,
+  });
+
+  const entities = useMemo(() => {
+    if (data) {
+      return data.map(serverEntity => {
+        const entity = handleServerEntity(serverEntity);
+        entityMap.current.set(String(entity.id), entity);
+        return entity;
+      });
+    } else {
+      return [];
+    }
+  }, [data]);
+
+  const table = useReactTable<RemoteEntity>({
+    data: entities,
+    getRowId: row => String(row.id),
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    state: {
+      rowSelection,
+    },
+    onRowSelectionChange: setRowSelection,
+  });
+
+  return {
+    table,
+    filter,
+    setFilter,
+    isLoading,
+    error,
+  };
+}
+
+export function useGraphEntitiesByIdsTable ({ rowSelection, setRowSelection, entityMap, columns }: { rowSelection: RowSelectionState, setRowSelection: Dispatch<SetStateAction<RowSelectionState>>, entityMap: MutableRefObject<Map<string, RemoteEntity>>, columns: ColumnDef<RemoteEntity, any>[] }) {
+  const [ids, setIds] = useState<number[]>([]);
+  const [data, setData] = useState<RemoteEntity[]>([]);
+  const promisesRef = useRef<Record<string, Promise<void>>>({});
+  const [failed, setFailed] = useState<Record<string, unknown>>({});
+  const idsRef = useRef(ids);
+
+  useEffect(() => {
+    idsRef.current = ids;
+  });
+
+  useEffect(() => {
+    for (const id of ids) {
+      let entity = entityMap.current.get(String(id));
+      if (!entity) {
+        if (!promisesRef.current[String(id)]) {
+          promisesRef.current[String(id)] = fetch(`/api/v1/indexes/graph/entities/${id}`)
+            .then(handleErrors)
+            .then(res => res.json())
+            .then(handleServerEntity)
+            .then(
+              entity => {
+                entityMap.current.set(String(entity.id), entity);
+                updateData();
+              },
+              error => {
+                entityMap.current.set(String(id), {
+                  id: id,
+                  isLoading: false,
+                  error,
+                });
+                setFailed(failed => ({
+                  ...failed,
+                  [String(id)]: error,
+                }));
+                updateData();
+              },
+            );
+        }
+      }
+    }
+    updateData();
+  }, [ids]);
+
+  const updateData = () => {
+    setData(idsRef.current.map(id => {
+      const entity = entityMap.current.get(String(id));
+      if (!entity) {
+        return { id, isLoading: true };
+      } else {
+        return entity;
+      }
+    }));
+  };
+
+  const table = useReactTable<RemoteEntity>({
+    data,
+    getRowId: row => String(row.id),
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    state: {
+      rowSelection,
+    },
+    onRowSelectionChange: setRowSelection,
+  });
+
+  return {
+    table,
+    ids,
+    setIds,
+    failed,
+  };
+}
+
+
+
+
diff --git a/src/lib/knowledge-graph/client.ts b/src/lib/knowledge-graph/client.ts
index c30cbed8..46b63463 100644
--- a/src/lib/knowledge-graph/client.ts
+++ b/src/lib/knowledge-graph/client.ts
@@ -163,8 +163,8 @@ export class KnowledgeGraphClient {
       headers: {
         ...this.authenticationHeaders(),
         'Content-Type': 'application/json',
-        body: JSON.stringify(data),
       },
+      body: JSON.stringify(data),
     }).then(handleErrors).then(res => res.json());
 
     return res as Entity;