diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2f3dfdd..59f2ceb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.265](https://github.com/getpingback/ui/compare/v0.0.264...v0.0.265) (2024-11-27)
+
+
+### Bug Fixes
+
+* **variable-input:** initial content ([9a44ec0](https://github.com/getpingback/ui/commits/9a44ec0db6bc2e8e47056ec24e8939eb21c5b897))
+
+### [0.0.263](https://github.com/getpingback/ui/compare/v0.0.262...v0.0.263) (2024-11-27)
+
+
+### Bug Fixes
+
+* **variable-input:** reset search on close ([ff0075e](https://github.com/getpingback/ui/commits/ff0075e17bd53aac5ceca5a8f7ea73cb5f85684f))
+
+### [0.0.261](https://github.com/getpingback/ui/compare/v0.0.260...v0.0.261) (2024-11-27)
+
+
+### Features
+
+* **variable-input:** add custom fields and combobox ([3e89a07](https://github.com/getpingback/ui/commits/3e89a07602d029ad5a8ee5490631503a52706c9a))
+
+
+### Bug Fixes
+
+* change selection scope ([ec3c5b3](https://github.com/getpingback/ui/commits/ec3c5b31c39522303b26f2ca136d96c819806c8b))
+* **variable-input:** remove unused components ([844a5db](https://github.com/getpingback/ui/commits/844a5db2bd55b9fbdebd73dfcc14c1786cc3ae1a))
+
 ### [0.0.260](https://github.com/getpingback/ui/compare/v0.0.257...v0.0.260) (2024-11-27)
 
 
diff --git a/package.json b/package.json
index e855ddb..61ad529 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@getpingback/ui",
   "author": "Pingback Team",
-  "version": "0.0.260",
+  "version": "0.0.266",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
diff --git a/src/components/variable-input/variable-input.stories.tsx b/src/components/variable-input/variable-input.stories.tsx
index deaa32b..9ad6421 100644
--- a/src/components/variable-input/variable-input.stories.tsx
+++ b/src/components/variable-input/variable-input.stories.tsx
@@ -1,44 +1,55 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { VariableInput } from "./variable-input";
+import { VariableInput } from './variable-input';
 
 const meta = {
-  title: "Components/VariableInput",
+  title: 'Components/VariableInput',
   component: VariableInput,
   parameters: {},
 
-  tags: ["autodocs"],
+  tags: ['autodocs'],
 
-  argTypes: {},
+  argTypes: {}
 } satisfies Meta<typeof VariableInput>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 const options = [
-  { label: "Email", value: "email" },
-  { label: "Name", value: "name" },
-  { label: "Phone", value: "phone" },
+  {
+    heading: 'Common Variables',
+    items: [
+      { label: 'Email', value: 'email' },
+      { label: 'Name', value: 'name' },
+      { label: 'Phone', value: 'phone' }
+    ]
+  },
+  {
+    heading: 'Custom Variables',
+    items: [{ label: 'Custom Variable', value: 'customVariable' }]
+  }
 ];
 
 export const Default: Story = {
   args: {
-    options,
-  },
+    options
+  }
 };
 
 export const WithInputProps: Story = {
   args: {
-    label: "URL",
-    placeholder: "https://www.example.com",
-    helperText: "Enter the URL of the page you want to redirect to",
-    options,
-  },
+    label: 'URL',
+    placeholder: 'https://www.example.com',
+    helperText: 'Enter the URL of the page you want to redirect to',
+    options
+  }
 };
 
 export const WithInitialContent: Story = {
   args: {
-    initialContent: "Hello {{name}}! How are you?",
-    options,
-  },
+    label: 'Expression',
+    placeholder: 'Enter the expression',
+    initialContent: 'Hello {{name}}! How are you?',
+    options
+  }
 };
diff --git a/src/components/variable-input/variable-input.test.tsx b/src/components/variable-input/variable-input.test.tsx
index cd52891..c62edf8 100644
--- a/src/components/variable-input/variable-input.test.tsx
+++ b/src/components/variable-input/variable-input.test.tsx
@@ -1,64 +1,114 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import { VariableInput } from "./variable-input";
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { VariableInput } from './variable-input';
 
-describe("VariableInput Component", () => {
+describe('VariableInput Component', () => {
   const options = [
-    { label: "Variable 1", value: "var1" },
-    { label: "Variable 2", value: "var2" },
+    {
+      heading: 'Common Variables',
+      items: [
+        { label: 'Email', value: 'email' },
+        { label: 'Name', value: 'name' },
+        { label: 'Phone', value: 'phone' }
+      ]
+    },
+    {
+      heading: 'Custom Variables',
+      items: [{ label: 'Custom Variable', value: 'customVariable' }]
+    }
   ];
 
-  it("should render with default props and open dropdown on trigger click", () => {
+  it('should render with default props and open dropdown on trigger click', () => {
     const { getByTestId, getByText } = render(<VariableInput options={options} />);
 
-    const triggerButton = getByTestId("variable-input-trigger");
+    const triggerButton = getByTestId('variable-input-trigger');
     fireEvent.click(triggerButton);
 
-    expect(getByText("Variable 1")).toBeInTheDocument();
-    expect(getByText("Variable 2")).toBeInTheDocument();
+    expect(getByText('Email')).toBeInTheDocument();
+    expect(getByText('Name')).toBeInTheDocument();
+    expect(getByText('Phone')).toBeInTheDocument();
+    expect(getByText('Custom Variable')).toBeInTheDocument();
   });
 
-  it("should call onChangeContent when text is input", () => {
+  it('should call onChangeContent when text is input', () => {
     const handleChangeContent = jest.fn();
     const { container } = render(<VariableInput options={options} onChangeContent={handleChangeContent} />);
 
     const editor = container.querySelector("[contenteditable='true']");
     if (editor) {
-      fireEvent.input(editor, { target: { textContent: "Hello" } });
-      expect(handleChangeContent).toHaveBeenCalledWith("Hello");
+      fireEvent.input(editor, { target: { textContent: 'Hello' } });
+      expect(handleChangeContent).toHaveBeenCalledWith('Hello');
     }
   });
 
-  it("should call onSelect when a variable is selected", () => {
+  it('should call onSelect when a variable is selected', () => {
     const handleSelect = jest.fn();
-    const { getByText, getByTestId } = render(<VariableInput options={options} onSelect={handleSelect} />);
+    const { getByText, getByTestId } = render(<VariableInput options={options} onSelectVariable={handleSelect} />);
 
-    const triggerButton = getByTestId("variable-input-trigger");
+    const triggerButton = getByTestId('variable-input-trigger');
     fireEvent.click(triggerButton);
 
-    fireEvent.click(getByText("Variable 1"));
-    expect(handleSelect).toHaveBeenCalledWith("var1");
+    fireEvent.click(getByText('Email'));
+    expect(handleSelect).toHaveBeenCalledWith('email');
   });
 
-  it("should display placeholder when not focused and empty", () => {
-    const { container } = render(<VariableInput options={options} placeholder='Enter text' />);
+  it('should display placeholder when not focused and empty', () => {
+    const { container } = render(<VariableInput options={options} placeholder="Enter text" />);
 
     const editor = container.querySelector("[contenteditable='true']");
     if (editor) {
-      expect(editor.innerHTML).toContain("Enter text");
+      expect(editor.innerHTML).toContain('Enter text');
     }
   });
 
-  it("should prevent editing of variable spans", () => {
+  it('should prevent editing of variable spans', () => {
     const { container } = render(<VariableInput options={options} />);
     const editor = container.querySelector("[contenteditable='true']");
 
     if (editor) {
       fireEvent.input(editor, { target: { innerHTML: '<span data-variable="var1">Variable 1</span>' } });
 
-      fireEvent.keyDown(editor, { key: "Backspace" });
+      fireEvent.keyDown(editor, { key: 'Backspace' });
+
+      expect(editor.innerHTML).toContain('Variable 1');
+    }
+  });
+
+  it('should filter variables when text is typed in the search input', () => {
+    const { getByTestId, queryByText } = render(<VariableInput options={options} />);
+
+    const triggerButton = getByTestId('variable-input-trigger');
+    fireEvent.click(triggerButton);
+
+    const searchInput = getByTestId('variable-input-search-input');
+    fireEvent.change(searchInput, { target: { value: 'email' } });
+
+    expect(queryByText('Email')).toBeInTheDocument();
+    expect(queryByText('Name')).not.toBeInTheDocument();
+    expect(queryByText('Phone')).not.toBeInTheDocument();
+    expect(queryByText('Custom Variable')).not.toBeInTheDocument();
+  });
+
+  it('should show message when no variables are found in the search', () => {
+    const { getByTestId, getByText } = render(<VariableInput options={options} />);
+
+    const triggerButton = getByTestId('variable-input-trigger');
+    fireEvent.click(triggerButton);
+
+    const searchInput = getByTestId('variable-input-search-input');
+    fireEvent.change(searchInput, { target: { value: 'xyz' } });
 
-      expect(editor.innerHTML).toContain("Variable 1");
+    expect(getByText('No results found')).toBeInTheDocument();
+  });
+
+  it('should prioritize initialContent over placeholder', () => {
+    const initialContent = 'Initial content';
+    const { container } = render(<VariableInput options={options} initialContent={initialContent} placeholder="Placeholder" />);
+
+    const editor = container.querySelector("[contenteditable='true']");
+    if (editor) {
+      expect(editor.innerHTML).toBe(initialContent);
+      expect(editor.innerHTML).not.toBe('Placeholder');
     }
   });
 });
diff --git a/src/components/variable-input/variable-input.tsx b/src/components/variable-input/variable-input.tsx
index 1a60624..0c334de 100644
--- a/src/components/variable-input/variable-input.tsx
+++ b/src/components/variable-input/variable-input.tsx
@@ -1,55 +1,68 @@
-import * as React from "react";
-import { Button } from "../button";
-import { Dropdown, DropdownItem } from "../dropdown";
-import { VariableIcon } from "@stash-ui/editor-icons";
-import { CaretDownIcon } from "@stash-ui/light-icons";
-import { cn } from "@/lib/utils";
+import * as React from 'react';
+import { VariableIcon } from '@stash-ui/editor-icons';
+import { CaretDownIcon, CaretUpIcon } from '@stash-ui/light-icons';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/popover';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '@/components/command';
+
+interface Item {
+  value: string;
+  label: string;
+}
+
+interface Option {
+  heading?: string;
+  items: Item[];
+}
 
 interface Props {
+  isLoadingVariables?: boolean;
   label?: string;
   helperText?: string;
   placeholder?: string;
   initialContent?: string;
+  options: Option[];
+  variablesSearchValue?: string;
+  variablesShouldFilter?: boolean;
+  variablesSearchPlaceholder?: string;
+  variablesEmptySearchPlaceholder?: string;
   onChangeContent?: (content: string) => void;
-  onSelect?: (selectedVariable: string) => void;
-  options: {
-    label: string;
-    value: string;
-  }[];
+  onSelectVariable?: (selectedVariable: string) => void;
+  onChangeVariablesSearchValue?: (variablesSearchValue: string) => void;
+  onVariablesEndReached?: () => void;
 }
 
 export type VariableInputProps = Props & React.HTMLAttributes<HTMLDivElement>;
 
 export function VariableInput({
+  isLoadingVariables,
   label,
   placeholder,
   helperText,
   initialContent,
-  onChangeContent,
-  onSelect,
   options,
   className,
+  variablesSearchValue,
+  variablesShouldFilter = true,
+  variablesSearchPlaceholder = 'Search...',
+  variablesEmptySearchPlaceholder = 'No results found',
+  onChangeContent,
+  onSelectVariable,
+  onChangeVariablesSearchValue,
+  onVariablesEndReached,
   ...props
 }: VariableInputProps) {
-  const [text, setText] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const [text, setText] = React.useState('');
   const [isFocused, setIsFocused] = React.useState(false);
+  const [lastRange, setLastRange] = React.useState<Range | null>(null);
 
   const editorRef = React.useRef<HTMLDivElement>(null);
+  const lastItemRef = React.useRef<HTMLDivElement>(null);
 
-  const placeholderTag = `<span data-pb-placeholder="" class="opacity-50">${placeholder || ""}</span>`;
-
-  const transformContentToPlainText = (html: string) => {
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = html;
-
-    const spans = tempDiv.querySelectorAll("span[data-variable]");
-    spans.forEach((span) => {
-      const variable = span.getAttribute("data-variable");
-      span.replaceWith(`{{${variable}}}`);
-    });
-
-    return tempDiv.textContent ?? "";
-  };
+  const placeholderTag = `<span data-pb-placeholder="" class="opacity-50">${placeholder || ''}</span>`;
 
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     const target = e.target as HTMLDivElement;
@@ -67,17 +80,21 @@ export function VariableInput({
     }
   };
 
+  const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChangeVariablesSearchValue?.(e.target.value);
+  };
+
   const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
     e.preventDefault();
-    const text = e.clipboardData.getData("text/plain");
-    document.execCommand("insertText", false, text);
+    const text = e.clipboardData.getData('text/plain');
+    document.execCommand('insertText', false, text);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
       const range = selection.getRangeAt(0);
-      const closestSpan = range.startContainer.parentElement?.closest("span[data-variable]");
+      const closestSpan = range.startContainer.parentElement?.closest('span[data-variable]');
       if (closestSpan && !e.metaKey && !e.ctrlKey) {
         e.preventDefault();
       }
@@ -87,58 +104,96 @@ export function VariableInput({
   const handleVariableSelect = (selectedVariable: string) => {
     const editor = editorRef.current;
 
-    if (!isFocused) editor?.focus();
+    if (!editor) return;
 
-    if (editor) {
-      if (editor.innerHTML === placeholderTag) editor.innerHTML = "";
+    editor.focus();
 
-      const selection = window.getSelection();
-      if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        const span = document.createElement("span");
-        span.className =
-          "inline-flex items-center bg-transparent text-[#52525B] rounded-md border border-[#D4D4D8] px-1 py-0 text-sm font-medium mx-0.5";
-        span.contentEditable = "false";
-        span.dataset.variable = selectedVariable;
-        span.textContent = options.find((option) => option.value === selectedVariable)?.label || selectedVariable;
-        range.insertNode(span);
-        range.setStartAfter(span);
-        selection.removeAllRanges();
-        selection.addRange(range);
-      }
+    if (editor.innerHTML === placeholderTag) editor.innerHTML = '';
+
+    const selection = window.getSelection();
+    if (!lastRange || !editor.contains(lastRange.commonAncestorContainer)) {
+      const range = document.createRange();
+      range.selectNodeContents(editor);
+      range.collapse(false);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    } else {
+      selection?.removeAllRanges();
+      selection?.addRange(lastRange);
+    }
 
-      onSelect?.(selectedVariable);
-      const plainText = transformContentToPlainText(editor.innerHTML);
-      onChangeContent?.(plainText);
-      setText(plainText);
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const span = document.createElement('span');
+      span.className =
+        'inline-flex items-center bg-transparent text-[#52525B] rounded-md border border-[#D4D4D8] px-1 py-0 text-sm font-medium mx-0.5';
+      span.contentEditable = 'false';
+      span.dataset.variable = selectedVariable;
+      span.textContent =
+        options
+          .find((option) => option.items.find((item) => item.value === selectedVariable))
+          ?.items.find((item) => item.value === selectedVariable)?.label || selectedVariable;
+      range.insertNode(span);
+      range.setStartAfter(span);
+      selection.removeAllRanges();
+      selection.addRange(range);
     }
+
+    onSelectVariable?.(selectedVariable);
+    const plainText = transformContentToPlainText(editor.innerHTML);
+    onChangeContent?.(plainText);
+    setText(plainText);
   };
 
   const handleFocus = () => {
     setIsFocused(true);
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      setLastRange(selection.getRangeAt(0).cloneRange());
+    }
   };
 
   const handleBlur = () => {
     setIsFocused(false);
   };
 
+  const handleDropdownTrigger = () => {
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      setLastRange(selection.getRangeAt(0).cloneRange());
+    }
+  };
+
+  const transformContentToPlainText = (html: string) => {
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = html;
+
+    const spans = tempDiv.querySelectorAll('span[data-variable]');
+    spans.forEach((span) => {
+      const variable = span.getAttribute('data-variable');
+      span.replaceWith(`{{${variable}}}`);
+    });
+
+    return tempDiv.textContent ?? '';
+  };
+
   const transformVariablesToSpans = (content: string) => {
     const regex = /{{([^}]+)}}/g;
-    const tempDiv = document.createElement("div");
+    const tempDiv = document.createElement('div');
     tempDiv.textContent = content;
 
     let match;
     while ((match = regex.exec(content)) !== null) {
       const variable = match[1];
-      const option = options.find((opt) => opt.value === variable);
+      const option = options.find((opt) => opt.items.find((item) => item.value === variable));
 
       if (option) {
-        const span = document.createElement("span");
+        const span = document.createElement('span');
         span.className =
-          "inline-flex items-center bg-transparent text-[#52525B] rounded-md border border-[#D4D4D8] px-1 py-0 text-sm font-medium mx-0.5";
-        span.contentEditable = "false";
+          'inline-flex items-center bg-transparent text-[#52525B] rounded-md border border-[#D4D4D8] px-1 py-0 text-sm font-medium mx-0.5';
+        span.contentEditable = 'false';
         span.dataset.variable = variable;
-        span.textContent = option.label;
+        span.textContent = option.items.find((item) => item.value === variable)?.label || variable;
 
         tempDiv.innerHTML = tempDiv.innerHTML.replace(match[0], span.outerHTML);
       }
@@ -147,71 +202,157 @@ export function VariableInput({
     return tempDiv.innerHTML;
   };
 
+  React.useEffect(() => {
+    const editor = editorRef.current;
+
+    if (editor && initialContent) {
+      const contentWithSpans = transformVariablesToSpans(initialContent);
+      editor.innerHTML = contentWithSpans;
+      setText(initialContent);
+    }
+  }, [initialContent]);
+
   React.useEffect(() => {
     const editor = editorRef.current;
 
     if (editor) {
-      if (!isFocused && !text && placeholder) {
+      if (!isFocused && !text && !initialContent && placeholder) {
         editor.innerHTML = placeholderTag;
       } else if (isFocused && editor.innerHTML === placeholderTag) {
-        editor.innerHTML = "";
+        editor.innerHTML = '';
       }
     }
-  }, [isFocused, text, placeholder]);
+  }, [isFocused, text, placeholder, initialContent]);
 
   React.useEffect(() => {
-    const editor = editorRef.current;
-
-    if (editor && initialContent) {
-      const contentWithSpans = transformVariablesToSpans(initialContent);
-      editor.innerHTML = contentWithSpans;
-      setText(initialContent);
+    if (!open) {
+      onVariablesEndReached?.();
+      return;
     }
-  }, []);
+
+    let observer: IntersectionObserver;
+    setTimeout(() => {
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting) {
+            onVariablesEndReached?.();
+          }
+        },
+        { threshold: 1 }
+      );
+
+      if (lastItemRef.current) {
+        observer?.observe(lastItemRef.current);
+      }
+    }, 0);
+
+    return () => {
+      observer?.disconnect();
+    };
+  }, [lastItemRef.current, options, open]);
 
   return (
-    <div className='flex flex-col items-start gap-1'>
-      {label ? (
-        <label className='text-xs font-semibold text-tertiary-foreground' htmlFor='counter-input'>
-          {label}
-        </label>
-      ) : null}
-
-      <div className='relative w-full flex items-start gap-3'>
-        <div
-          ref={editorRef}
-          className={cn(
-            "min-h-[40px] w-full border-divider border rounded-lg bg-transparent py-2 px-3 text-sm outline-none text-tertiary-foreground placeholder:opacity-85 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[#A1A1AA] focus:border-[#9061F9] focus:[box-shadow:0px_0px_0px_3px_rgba(144,_97,_249,_0.12)] transition-all duration-200 ease-in-out",
-            className
-          )}
-          contentEditable
-          onInput={handleInput}
-          onPaste={handlePaste}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          {...props}
-        />
-
-        <Dropdown
-          trigger={
-            <Button variant='outline' className='h-10 outline-none' data-testid='variable-input-trigger'>
-              <VariableIcon color='#71717A' height={20} width={20} />
-              <CaretDownIcon width={16} height={16} color='#71717A' />
+    <Popover open={open} onOpenChange={setOpen}>
+      <div className="flex flex-col items-start gap-1">
+        {label ? (
+          <label className="text-xs font-semibold text-tertiary-foreground" htmlFor="counter-input">
+            {label}
+          </label>
+        ) : null}
+
+        <div className="relative w-full flex items-start gap-3">
+          <div
+            ref={editorRef}
+            className={cn(
+              'min-h-[40px] w-full border-divider border rounded-lg bg-transparent py-2 px-3 text-sm outline-none text-tertiary-foreground placeholder:opacity-85 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[#A1A1AA] focus:border-[#9061F9] focus:[box-shadow:0px_0px_0px_3px_rgba(144,_97,_249,_0.12)] transition-all duration-200 ease-in-out',
+              className
+            )}
+            contentEditable
+            onInput={handleInput}
+            onPaste={handlePaste}
+            onKeyDown={handleKeyDown}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...props}
+          />
+
+          <PopoverTrigger asChild onClick={handleDropdownTrigger}>
+            <Button variant="outline" className="h-10 outline-none" data-testid="variable-input-trigger">
+              <VariableIcon color="#71717A" height={20} width={20} />
+              {open ? <CaretUpIcon width={16} height={16} color="#71717A" /> : <CaretDownIcon width={16} height={16} color="#71717A" />}
             </Button>
-          }
-        >
-          {options.map((option) => (
-            <DropdownItem key={option.value} onClick={() => handleVariableSelect(option.value)}>
-              {option.label}
-            </DropdownItem>
-          ))}
-        </Dropdown>
+          </PopoverTrigger>
+        </div>
+
+        {helperText ? <span className="text-xs font-normal text-tertiary-foreground opacity-65">{helperText}</span> : null}
       </div>
 
-      {helperText ? (
-        <span className='text-xs font-normal text-tertiary-foreground opacity-65'>{helperText}</span>
-      ) : null}
-    </div>
+      <PopoverContent className="w-full p-0 bg-background-accent" data-testid="comboxbox-popover-content">
+        <Command shouldFilter={variablesShouldFilter} className={className}>
+          <div className="w-full p-4 flex items-center justify-center border-b border-divider">
+            <CommandInput
+              placeholder={variablesSearchPlaceholder}
+              className="h-9 w-full"
+              defaultValue={variablesSearchValue}
+              onInput={handleSearchInput}
+              data-testid="variable-input-search-input"
+            />
+          </div>
+
+          <CommandEmpty>{variablesEmptySearchPlaceholder}</CommandEmpty>
+
+          <div className="max-h-[272px] overflow-y-auto scrollbar-style">
+            {options.map((option, index) => (
+              <>
+                <CommandGroup key={index} className="py-2" heading={option.heading}>
+                  {option.items.map((item) => (
+                    <CommandItem
+                      key={item.value}
+                      value={item.value}
+                      onSelect={() => {
+                        handleVariableSelect(item.value);
+                        setOpen(false);
+                      }}
+                    >
+                      <div className="flex items-center h-full w-full">
+                        <span className="line-clamp-1">{item.label}</span>
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+
+                {index < options.length - 1 && <div className="border-b border-divider" />}
+              </>
+            ))}
+
+            <div
+              ref={lastItemRef}
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 4, width: '100%' }}
+            />
+          </div>
+
+          {isLoadingVariables ? (
+            <div className="flex items-center justify-center mb-4 h-10">
+              <svg
+                aria-hidden="true"
+                className="w-8 h-8 text-gray-200 animate-spin fill-purple-500"
+                viewBox="0 0 100 101"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                  fill="currentFill"
+                />
+              </svg>
+            </div>
+          ) : null}
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 }