diff --git a/Data/CategoryTreeNode.php b/Data/CategoryTreeNode.php
new file mode 100644
index 0000000..87a903f
--- /dev/null
+++ b/Data/CategoryTreeNode.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Data;
+
+class CategoryTreeNode
+{
+    public function __construct(
+        public readonly int $id,
+        public readonly string $label,
+        public readonly bool $isActive,
+        public readonly int $level,
+        public readonly ?int $parentId = null,
+        public readonly array $parentIds = [],
+        public readonly array $children = [],
+    ) {
+    }
+
+    public function toUiArray(): array
+    {
+        $uiData = array_merge(
+            get_object_vars($this),
+            [
+                'hasChildren' => $this->children !== [],
+                'expanded' => $this->level === 0,
+                'hovered' => false,
+                'parentsPath' => null,
+            ]
+        );
+
+        unset($uiData['children']);
+
+        return $uiData;
+    }
+}
diff --git a/Form/Field/FieldType/CategorySelection.php b/Form/Field/FieldType/CategorySelection.php
new file mode 100644
index 0000000..21d7861
--- /dev/null
+++ b/Form/Field/FieldType/CategorySelection.php
@@ -0,0 +1,76 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Form\Field\FieldType;
+
+use Loki\AdminComponents\Data\CategoryTreeNode;
+use Loki\AdminComponents\Service\CategorySelection\CategoryTreeBuilder;
+use Loki\AdminComponents\Service\CategorySelection\CategoryTreeRenderer;
+use Loki\AdminComponents\Form\Field\Field;
+use Loki\AdminComponents\Form\Field\FieldType\FieldTypeAbstract;
+use Magento\Framework\Serialize\SerializerInterface;
+
+class CategorySelection extends FieldTypeAbstract
+{
+    public function __construct(
+        private readonly CategoryTreeBuilder $categoryTreeBuilder,
+        private readonly CategoryTreeRenderer $categoryTreeRenderer,
+        private readonly SerializerInterface $serializer,
+    ) {
+    }
+
+    public function getTemplate(): string
+    {
+        return 'Loki_AdminComponents::form/field_type/category_selection.phtml';
+    }
+
+    public function getCategoryNodeJson(CategoryTreeNode $treeNode): string
+    {
+        return $this->serializer->serialize($treeNode->toUiArray());
+    }
+
+    /**
+     * @param CategoryTreeNode[] $categoryTreeNodes
+     */
+    public function getMaxCategoryLevel(array $categoryTreeNodes): int
+    {
+        return $this->categoryTreeBuilder->calculateMaxLevel($categoryTreeNodes);
+    }
+
+    public function renderMainScript(Field $field): string
+    {
+        return $this->categoryTreeRenderer->renderMainScript($field);
+    }
+
+    public function renderChildCategoryNode(CategoryTreeNode $categoryTreeNode, Field $field): string
+    {
+        return $this->categoryTreeRenderer->renderChildNode($categoryTreeNode, $field);
+    }
+
+    public function renderCategoriesBreadcrumb(): string
+    {
+        return $this->categoryTreeRenderer->renderBreadcrumb();
+    }
+
+    public function renderSearchInput(): string
+    {
+        return $this->categoryTreeRenderer->renderSearchInput();
+    }
+
+    public function getHoverSequenceJson(): string
+    {
+        $categoryTree = $this->getCategoryTree();
+        $hoverSequence = $this->categoryTreeBuilder->buildHoverSequence($categoryTree);
+
+        return $this->serializer->serialize($hoverSequence);
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    public function getCategoryTree(int $storeId = 0, ?string $filter = null): array
+    {
+        return $this->categoryTreeBuilder->build($storeId, $filter);
+    }
+}
diff --git a/Model/CategorySelection/CategoryTreeCacheKeyGenerator.php b/Model/CategorySelection/CategoryTreeCacheKeyGenerator.php
new file mode 100644
index 0000000..593fa0d
--- /dev/null
+++ b/Model/CategorySelection/CategoryTreeCacheKeyGenerator.php
@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Model\CategorySelection;
+
+use Magento\Backend\Model\Auth\Session;
+
+class CategoryTreeCacheKeyGenerator
+{
+    public const CACHE_TAG_PREFIX = 'loki_admin_components_form_category_tree';
+
+    public function __construct(
+        private readonly Session $authSession,
+    ) {
+    }
+
+    public function generate(int $storeId, ?string $filter): string
+    {
+        $parts = [
+            self::CACHE_TAG_PREFIX,
+            (string) $storeId,
+            $this->getUserRole(),
+            $filter ?? '',
+        ];
+
+        return implode('_', array_filter($parts));
+    }
+
+    private function getUserRole(): string
+    {
+        $user = $this->authSession->getUser();
+
+        return (string)$user?->getAclRole();
+    }
+}
diff --git a/Service/CategorySelection/CategoryFilterService.php b/Service/CategorySelection/CategoryFilterService.php
new file mode 100644
index 0000000..60920ed
--- /dev/null
+++ b/Service/CategorySelection/CategoryFilterService.php
@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Service\CategorySelection;
+
+use Magento\Catalog\Model\Category;
+use Magento\Catalog\Model\ResourceModel\Category\Collection;
+use Magento\Catalog\Model\ResourceModel\Category\CollectionFactory;
+use Magento\Framework\DB\Helper as DbHelper;
+
+class CategoryFilterService
+{
+    public function __construct(
+        private readonly CollectionFactory $categoryCollectionFactory,
+        private readonly DbHelper $dbHelper,
+    ) {
+    }
+
+    /**
+     * @return int[]
+     */
+    public function getVisibleCategoryIds(int $storeId, ?string $filter): array
+    {
+        $collection = $this->createFilteredCollection($storeId, $filter);
+
+        return $this->extractCategoryIdsWithAncestors($collection);
+    }
+
+    private function createFilteredCollection(int $storeId, ?string $filter): Collection
+    {
+        $collection = $this->categoryCollectionFactory->create();
+        $collection->addAttributeToSelect('path')
+            ->addAttributeToFilter('entity_id', ['neq' => Category::TREE_ROOT_ID])
+            ->setStoreId($storeId);
+
+        if (!empty($filter)) {
+            $collection->addAttributeToFilter(
+                'name',
+                ['like' => $this->dbHelper->addLikeEscape($filter, ['position' => 'any'])]
+            );
+        }
+
+        return $collection;
+    }
+
+    /**
+     * @return int[]
+     */
+    private function extractCategoryIdsWithAncestors(Collection $collection): array
+    {
+        $categoryIds = [];
+
+        foreach ($collection as $category) {
+            $path = $category->getPath() ?? '';
+            foreach (explode('/', $path) as $ancestorId) {
+                $categoryIds[(int) $ancestorId] = true;
+            }
+        }
+
+        return array_keys($categoryIds);
+    }
+}
diff --git a/Service/CategorySelection/CategoryTreeBuilder.php b/Service/CategorySelection/CategoryTreeBuilder.php
new file mode 100644
index 0000000..7eb7f94
--- /dev/null
+++ b/Service/CategorySelection/CategoryTreeBuilder.php
@@ -0,0 +1,240 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Service\CategorySelection;
+
+use Loki\AdminComponents\Data\CategoryTreeNode;
+use Loki\AdminComponents\Model\CategorySelection\CategoryTreeCacheKeyGenerator;
+use Magento\Catalog\Model\Category;
+use Magento\Catalog\Model\ResourceModel\Category\Collection;
+use Magento\Catalog\Model\ResourceModel\Category\CollectionFactory;
+use Magento\Framework\App\Cache\Type\Block;
+use Magento\Framework\App\CacheInterface;
+use Magento\Framework\Serialize\SerializerInterface;
+
+class CategoryTreeBuilder
+{
+    public function __construct(
+        private readonly CollectionFactory $categoryCollectionFactory,
+        private readonly CategoryFilterService $categoryFilterService,
+        private readonly CacheInterface $cache,
+        private readonly SerializerInterface $serializer,
+        private readonly CategoryTreeCacheKeyGenerator $cacheKeyGenerator,
+    ) {
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    public function build(int $storeId = 0, ?string $filter = null): array
+    {
+        $cacheKey = $this->cacheKeyGenerator->generate($storeId, $filter);
+        $cachedData = $this->cache->load($cacheKey);
+
+        if ($cachedData !== false) {
+            return $this->deserializeCategoryTree($cachedData);
+        }
+
+        $tree = $this->buildFreshTree($storeId, $filter);
+
+        $this->cacheTree($cacheKey, $tree);
+
+        return $tree;
+    }
+
+    /**
+     * @param CategoryTreeNode[] $treeNodes
+     */
+    public function calculateMaxLevel(array $treeNodes): int
+    {
+        $maxLevel = 0;
+
+        foreach ($treeNodes as $node) {
+            $maxLevel = max($maxLevel, $node->level);
+
+            if ($node->children !== []) {
+                $maxLevel = max($maxLevel, $this->calculateMaxLevel($node->children));
+            }
+        }
+
+        return $maxLevel;
+    }
+
+    /**
+     * @param CategoryTreeNode[] $treeNodes
+     * @return int[]
+     */
+    public function buildHoverSequence(array $treeNodes): array
+    {
+        $sequence = [];
+
+        foreach ($treeNodes as $node) {
+            $sequence[] = $node->id;
+            $sequence = [
+                ...$sequence,
+                ...$this->buildHoverSequence($node->children)
+            ];
+        }
+
+        return $sequence;
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    private function buildFreshTree(int $storeId, ?string $filter): array
+    {
+        $visibleCategoryIds = $this->categoryFilterService->getVisibleCategoryIds($storeId, $filter);
+
+        if ($visibleCategoryIds === []) {
+            return [];
+        }
+
+        $flatCategories = $this->loadFlatCategories($storeId, $visibleCategoryIds);
+
+        return $this->buildTreeStructure($flatCategories);
+    }
+
+    /**
+     * @param int[] $categoryIds
+     * @return array<int, array{id: int, label: string, is_active: bool, parent_id: int}>
+     */
+    private function loadFlatCategories(int $storeId, array $categoryIds): array
+    {
+        $collection = $this->categoryCollectionFactory->create();
+        $collection->addAttributeToSelect(['name', 'is_active', 'parent_id'])
+            ->addAttributeToFilter('entity_id', ['in' => $categoryIds])
+            ->setStoreId($storeId);
+
+        return $this->convertCollectionToFlatArray($collection);
+    }
+
+    /**
+     * @return array<int, array{id: int, label: string, is_active: bool, parent_id: int}>
+     */
+    private function convertCollectionToFlatArray(Collection $collection): array
+    {
+        $flat = [];
+
+        foreach ($collection as $category) {
+            $flat[(int) $category->getId()] = [
+                'id' => (int) $category->getId(),
+                'label' => (string) $category->getName(),
+                'is_active' => (bool) $category->getIsActive(),
+                'parent_id' => (int) $category->getParentId(),
+            ];
+        }
+
+        return $flat;
+    }
+
+    /**
+     * @param array<int, array{id: int, label: string, is_active: bool, parent_id: int}> $flatCategories
+     * @return CategoryTreeNode[]
+     */
+    private function buildTreeStructure(array $flatCategories): array
+    {
+        return $this->buildTreeRecursive(
+            $flatCategories,
+            Category::TREE_ROOT_ID,
+            0,
+            []
+        );
+    }
+
+    /**
+     * @param array<int, array{id: int, label: string, is_active: bool, parent_id: int}> $flatCategories
+     * @param int[] $ancestorIds
+     * @return CategoryTreeNode[]
+     */
+    private function buildTreeRecursive(
+        array $flatCategories,
+        int $parentId,
+        int $level,
+        array $ancestorIds
+    ): array {
+        $nodes = [];
+
+        foreach ($flatCategories as $category) {
+            if ($category['parent_id'] !== $parentId) {
+                continue;
+            }
+
+            $currentAncestorIds = $this->buildAncestorIds($ancestorIds, $parentId);
+
+            $children = $this->buildTreeRecursive(
+                $flatCategories,
+                $category['id'],
+                $level + 1,
+                $currentAncestorIds
+            );
+
+            $nodes[] = new CategoryTreeNode(
+                id: $category['id'],
+                label: $category['label'],
+                isActive: $category['is_active'],
+                level: $level,
+                parentId: $parentId,
+                parentIds: $currentAncestorIds,
+                children: $children
+            );
+        }
+
+        return $nodes;
+    }
+
+    /**
+     * @param int[] $ancestorIds
+     * @return int[]
+     */
+    private function buildAncestorIds(array $ancestorIds, int $parentId): array
+    {
+        if ($parentId === Category::TREE_ROOT_ID) {
+            return $ancestorIds;
+        }
+
+        return [...$ancestorIds, $parentId];
+    }
+
+    /**
+     * @param CategoryTreeNode[] $tree
+     */
+    private function cacheTree(string $cacheKey, array $tree): void
+    {
+        $this->cache->save(
+            $this->serializer->serialize($tree),
+            $cacheKey,
+            [Category::CACHE_TAG, Block::CACHE_TAG]
+        );
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    private function deserializeCategoryTree(string $cachedData): array
+    {
+        $treeData = $this->serializer->unserialize($cachedData);
+
+        return $this->convertArrayToTreeNodes($treeData);
+    }
+
+    /**
+     * @return CategoryTreeNode[]
+     */
+    private function convertArrayToTreeNodes(array $treeData): array
+    {
+        return array_map(fn (array $nodeData) =>
+            new CategoryTreeNode(
+                id: $nodeData['id'],
+                label: $nodeData['label'],
+                isActive: $nodeData['isActive'],
+                level: $nodeData['level'],
+                parentId: $nodeData['parentId'],
+                parentIds: $nodeData['parentIds'],
+                children: $this->convertArrayToTreeNodes($nodeData['children'] ?? [])
+            ),
+            $treeData
+        );
+    }
+}
diff --git a/Service/CategorySelection/CategoryTreeRenderer.php b/Service/CategorySelection/CategoryTreeRenderer.php
new file mode 100644
index 0000000..2eeccfd
--- /dev/null
+++ b/Service/CategorySelection/CategoryTreeRenderer.php
@@ -0,0 +1,88 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Loki\AdminComponents\Service\CategorySelection;
+
+use Loki\AdminComponents\Data\CategoryTreeNode;
+use Loki\AdminComponents\Form\Field\Field;
+use Magento\Framework\View\Element\Template;
+use Magento\Framework\View\LayoutInterface;
+
+class CategoryTreeRenderer
+{
+    private const TEMPLATE_CHILD_ITEM =
+        'Loki_AdminComponents::form/field_type/category_selection/select_inner_item.phtml';
+    private const MAIN_SCRIPT =
+        'Loki_AdminComponents::form/field_type/category_selection/main_js.phtml';
+    private const TEMPLATE_BREADCRUMB = 'Loki_AdminComponents::form/field_type/category_selection/crumbs.phtml';
+    private const TEMPLATE_SEARCH = 'Loki_AdminComponents::form/field_type/category_selection/search_input.phtml';
+
+    public function __construct(
+        private readonly LayoutInterface $layout,
+    ) {
+    }
+
+    public function renderMainScript(Field $field): string
+    {
+        return $this->layout->createBlock(Template::class, 'category_selection_main_script')
+            ->setData('field', $field)
+            ->setTemplate($this->getMainScript())
+            ->toHtml();
+    }
+
+    public function renderChildNode(CategoryTreeNode $categoryTreeNode, Field $field): string
+    {
+        return $this->layout->createBlock(Template::class, 'category_selection_inner_item_' . $categoryTreeNode->id)
+            ->setData('category_tree_node', $categoryTreeNode)
+            ->setData('field', $field)
+            ->setTemplate($this->getChildItemTemplate())
+            ->toHtml();
+    }
+
+    public function renderBreadcrumb(): string
+    {
+        return $this->layout->createBlock(Template::class, 'categories_selection_crumbs')
+            ->setTemplate($this->getBreadcrumbsTemplate())
+            ->toHtml();
+    }
+
+    public function renderSearchInput(): string
+    {
+        return $this->layout->createBlock(Template::class, 'category_selection_search_input')
+            ->setTemplate($this->getSearchInputTemplate())
+            ->toHtml();
+    }
+
+    /**
+     * Make it public to provide facility to overwrite template.
+     */
+    public function getChildItemTemplate(): string
+    {
+        return self::TEMPLATE_CHILD_ITEM;
+    }
+
+    /**
+     * Make it public to provide facility to overwrite template.
+     */
+    public function getBreadcrumbsTemplate(): string
+    {
+        return self::TEMPLATE_BREADCRUMB;
+    }
+
+    /**
+     * Make it public to provide facility to overwrite template.
+     */
+    public function getSearchInputTemplate(): string
+    {
+        return self::TEMPLATE_SEARCH;
+    }
+
+    /**
+     * Make it public to provide facility to overwrite template.
+     */
+    public function getMainScript(): string
+    {
+        return self::MAIN_SCRIPT;
+    }
+}
diff --git a/etc/di.xml b/etc/di.xml
index 32c8ca1..095a9c4 100644
--- a/etc/di.xml
+++ b/etc/di.xml
@@ -44,6 +44,7 @@
                 <item name="product_select" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\ProductSelect</item>
                 <item name="customer_select" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\CustomerSelect</item>
                 <item name="entity_select" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\EntitySelect</item>
+                <item name="category_selection" xsi:type="object">Loki\AdminComponents\Form\Field\FieldType\CategorySelection</item>
             </argument>
         </arguments>
     </type>
diff --git a/view/adminhtml/templates/form/field_type/category_selection.phtml b/view/adminhtml/templates/form/field_type/category_selection.phtml
new file mode 100644
index 0000000..fd3745d
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection.phtml
@@ -0,0 +1,112 @@
+<?php declare(strict_types=1);
+
+use Loki\AdminComponents\Form\Field\FieldType\CategorySelection;
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+use Loki\AdminComponents\Form\Field\Field;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+/** @var Field $field */
+/** @var CategorySelection $fieldType */
+
+$viewModel = $block->getData('view_model');
+$field = $block->getField();
+$fieldType = $field->getFieldType();
+$categoryTreeNodes = $fieldType->getCategoryTree();
+?>
+<div
+    class="admin__field"
+    data-index="container_category_ids"
+    x-data="CategorySelection"
+    :class="classAdminField"
+>
+    <div class="admin__field-control admin__control-grouped">
+        <div class="admin__field" data-index="category_ids">
+            <div class="admin__field-label">
+                <label for="category-selection-box">
+                    <span :data-config-scope="scopeLabel">
+                        <?= $escaper->escapeHtml($field->getLabel()) ?>
+                    </span>
+                </label>
+            </div>
+            <div class="admin__field-control">
+                <div
+                    id="category-selection-box"
+                    class="admin__action-multiselect-wrap action-select-wrap admin__action-multiselect-tree"
+                    tabindex="0"
+                    :class="classMultiselectWrap"
+                    @keydown="keydownSwitcher"
+                    @click.outside="closeSelector"
+                    @keydown.escape.window="closeSelector"
+                >
+                    <div class="action-select admin__action-multiselect"
+                         data-role="advanced-select"
+                         :class="classMultiselect"
+                         @click="toggleListVisible"
+                    >
+                        <?= /** @noEscape */ $fieldType->renderCategoriesBreadcrumb() ?>
+                    </div>
+                    <div class="action-menu"
+                         :class="classActionMenu"
+                    >
+                        <?= /** @noEscape */ $fieldType->renderSearchInput() ?>
+                        <?php foreach ($categoryTreeNodes as $rootCategory): ?>
+                        <ul class="admin__action-multiselect-menu-inner _root"
+                            data-item-data="<?= $escaper->escapeHtmlAttr($fieldType->getCategoryNodeJson($rootCategory)) ?>"
+                            x-data="CategorySelectItem"
+                            x-show="isTreeView"
+                            x-cloak
+                            :data-level="itemLevel"
+                            :data-expanded="dataExpanded"
+                        >
+                            <li class="admin__action-multiselect-menu-inner-item _root"
+                                data-role="option-group"
+                                :class="classInnerItem"
+                            >
+                                <div class="action-menu-item"
+                                     :class="classActionMenuItem"
+                                     @mouseenter="handleMouseEnter"
+                                     @mouseleave="handleMouseLeave"
+                                     @click="toggleSelection"
+                                     @keydown.enter.window="toggleSelection"
+                                >
+                                    <template x-if="showIconToOpenLevels">
+                                        <div class="admin__action-multiselect-dropdown"
+                                             @click="toggleExpansion"
+                                        ></div>
+                                    </template>
+                                    <input
+                                        class="admin__control-checkbox"
+                                        type="checkbox"
+                                        tabindex="-1"
+                                        :checked="isSelected"
+                                    />
+                                    <label class="admin__action-multiselect-label">
+                                        <span><?= $escaper->escapeHtml($rootCategory->label) ?></span>
+                                    </label>
+                                </div>
+                                <?php foreach ($rootCategory->children as $childCategory): ?>
+                                    <?= /** @noEscape */ $fieldType->renderChildCategoryNode($childCategory, $field)?>
+                                <?php endforeach; ?>
+                            </li>
+                        </ul>
+                        <?php endforeach; ?>
+
+                        <div class="admin__action-multiselect-actions-wrap">
+                            <button
+                                class="action-default"
+                                data-action="close-advanced-select"
+                                type="button"
+                                @click="closeSelector"
+                            >
+                                <span><?= $escaper->escapeHtml(__('Done')) ?></span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<?= /** @noEscape */ $fieldType->renderMainScript($field) ?>
diff --git a/view/adminhtml/templates/form/field_type/category_selection/crumbs.phtml b/view/adminhtml/templates/form/field_type/category_selection/crumbs.phtml
new file mode 100644
index 0000000..0b5f7fc
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection/crumbs.phtml
@@ -0,0 +1,57 @@
+<?php declare(strict_types=1);
+
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+?>
+<template x-for="categoryId in selectedCategoryIds" :key="categoryId">
+    <span class="admin__action-multiselect-crumb"
+          x-data="CategorySelectionCrumb"
+          :data-id="categoryId"
+    >
+        <span x-text="crumbLabel"></span>
+        <button
+            class="action-close"
+            type="button"
+            data-action="remove-selected-item"
+            tabindex="-1"
+            @click="removeSelected"
+            data-bind="click: $parent.removeSelected.bind($parent, value)
+        ">
+            <span class="action-close-text">
+                <?= $escaper->escapeHtml(__('Close')) ?>
+            </span>
+        </button>
+    </span>
+</template>
+<script>
+    'use strict';
+
+    function CategorySelectionCrumb() {
+        return {
+            root: null,
+            crumbId: null,
+            init() {
+                this.root = this.$el;
+                this.$nextTick(() => {
+                    this.crumbId = parseFloat(this.root.dataset.id);
+                });
+
+            },
+            crumbLabel() {
+                return this.items[this.crumbId]?.label || '';
+            },
+            removeSelected() {
+                this.$event.stopPropagation();
+                this.unselectCategoryId(this.crumbId);
+                console.log(this.selectedCategoryIds, this.crumbId);
+            },
+        };
+    }
+
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('CategorySelectionCrumb', CategorySelectionCrumb);
+    });
+</script>
diff --git a/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml b/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
new file mode 100644
index 0000000..0715400
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection/main_js.phtml
@@ -0,0 +1,275 @@
+<?php declare(strict_types=1);
+
+use Loki\AdminComponents\Form\Field\Field;
+use Loki\AdminComponents\Form\Field\FieldType\CategorySelection;
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+/** @var Field $field */
+/** @var CategorySelection $fieldType */
+
+$field = $block->getData('field');
+$fieldType = $field->getFieldType();
+$maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
+?>
+<script>
+    'use strict';
+
+    const CategorySelectionSearch = {
+        isSearchView: false,
+        searchResult: [],
+        hasSearchResult() {
+            return !!this.searchResult.length;
+        },
+        canShowNoResultMessage() {
+            return this.isSearchView && !this.hasSearchResult();
+        },
+        canShowSearchResult() {
+            return this.hasSearchResult() && this.isSearchView;
+        },
+    };
+
+    const CategorySelectionHover = {
+        hoverOnFirstItem() {
+            const firstHoverItemId = this.hoverSequence[0];
+            if (firstHoverItemId) {
+                this.items[firstHoverItemId].hovered = true;
+            }
+        },
+        getHoverSequenceByEventKey(key) {
+            const currentHoveredItem = this.getCurrentHoverItem();
+            const sequenceStartIndex = this.hoverSequence.findIndex((seq) => seq === currentHoveredItem.id);
+
+            if (sequenceStartIndex === -1) {
+                return [];
+            }
+
+            if (key === 'ArrowDown') {
+                return this.hoverSequence.slice(sequenceStartIndex + 1);
+            }
+            if (key === 'ArrowUp') {
+                return this.hoverSequence.slice(0, sequenceStartIndex).reverse();
+            }
+
+            return [];
+        },
+        getCurrentHoverItem() {
+            const currentHoveredItemId = Object.keys(this.items).find((itemId) => {
+                return this.items[itemId].hovered;
+            });
+
+            return this.items[currentHoveredItemId];
+        },
+        keydownSwitcher() {
+            this.$event.stopPropagation();
+
+            if (!['ArrowUp', 'ArrowDown'].includes(this.$event.key)) {
+                return;
+            }
+
+            this.$nextTick(() => {
+                this.$el.focus();
+            });
+            const currentHoveredItem = this.getCurrentHoverItem();
+
+            if (!currentHoveredItem) {
+                return this.hoverOnFirstItem();
+            }
+
+            let sequenceItemUsed = false;
+
+            for (const seqId of this.getHoverSequenceByEventKey(this.$event.key)) {
+                const item = this.items[seqId];
+                if (!item) {
+                    continue;
+                }
+
+                if (item.level <= currentHoveredItem.level) {
+                    item.hovered = true;
+                    sequenceItemUsed = true;
+                    break;
+                }
+
+                const parentItem = this.items[item.parentId];
+                if (parentItem.expanded) {
+                    item.hovered = true;
+                    sequenceItemUsed = true;
+                    break;
+                }
+            }
+            currentHoveredItem.hovered = false;
+            if (!sequenceItemUsed) {
+                this.hoverOnFirstItem();
+            }
+        },
+        updateItemHovered(id, hoverValue) {
+            if (!this.items[id]) {
+                return;
+            }
+
+            this.items[id].hovered = hoverValue;
+        },
+        isItemHovered(id) {
+            if (!this.items[id]) {
+                return false;
+            }
+
+            return this.items[id].hovered;
+        },
+    };
+
+    function CategorySelection() {
+        return {
+            ...CategorySelectionSearch,
+            ...CategorySelectionHover,
+            items: {},
+            listVisible: false,
+            isTreeView: true,
+            selectedCategoryIds: [],
+            scopeLabel: '[GLOBAL]',
+            hoverSequence: <?= /** @noEscape */$fieldType->getHoverSequenceJson() ?> || [],
+            lastLevel: <?= /** @noEscape */ (int)$maxTreeLevel ?>,
+            isRequired: !!<?= (int)$field->isRequired() ?>,
+            classAdminField() {
+                return { _required: this.isRequired };
+            },
+            classMultiselectWrap() {
+                return {
+                    _active: this.listVisible,
+                    'admin__action-multiselect-tree': this.isTree(),
+                };
+            },
+            classMultiselect() {
+                return { _active: this.listVisible };
+            },
+            classActionMenu() {
+                return { _active: this.listVisible };
+            },
+            toggleListVisible() {
+                this.listVisible = !this.listVisible;
+            },
+            isTree() {
+                return true;
+            },
+            isItemSelected(id) {
+                return this.selectedCategoryIds.includes(id);
+            },
+            isLastLevel(level) {
+                return this.lastLevel === level;
+            },
+            isItemExpanded(id) {
+                if (!this.items[id]) {
+                    return false;
+                }
+
+                return this.items[id].expanded;
+            },
+            toggleItemExpansion(id) {
+                if (!this.items[id]) {
+                    return;
+                }
+
+                const currentValue = this.items[id].expanded;
+                this.items[id].expanded = !currentValue;
+            },
+            closeSelector() {
+                this.listVisible = false;
+            },
+            unselectCategoryId(id) {
+                this.selectedCategoryIds = this.selectedCategoryIds.filter(
+                    (categoryId) => categoryId !== id
+                );
+            },
+            toggleItemSelection(id) {
+                if (this.isItemSelected(id)) {
+                    return this.unselectCategoryId(id);
+                }
+
+                this.selectedCategoryIds.push(id);
+            },
+        };
+    }
+
+    function CategorySelectItemCommon() {
+        return {
+            data: null,
+            toggleSelection() {
+                if (!this.data) {
+                    return;
+                }
+                this.$event.stopPropagation();
+                this.toggleItemSelection(this.data.id);
+            },
+            isSelected() {
+                if (!this.data) {
+                    return false;
+                }
+                return this.isItemSelected(this.data.id);
+            },
+            classActionMenuItem() {
+                if (!this.data) {
+                    return {};
+                }
+                return {
+                    _selected: this.isItemSelected(this.data.id),
+                    _hover: this.isItemHovered(this.data.id),
+                    _expended: this.isItemExpanded(this.data.id),
+                    // '_unclickable': this.isLabelDecoration($data),
+                    _last: this.isLastLevel(this.data.level),
+                    '_with-checkbox': true,
+                };
+            },
+        }
+    }
+
+    function CategorySelectItem() {
+        return {
+            ...CategorySelectItemCommon(),
+            root: null,
+            init() {
+                this.root = this.$el;
+                const data = this.root.dataset.itemData;
+                if (data) {
+                    this.data = JSON.parse(data);
+                    this.items[this.data.id] = this.data;
+                }
+            },
+            get itemId() {
+                return this.data?.id;
+            },
+            classInnerItem() {
+                return { _parent: this.data.hasChildren };
+            },
+            itemLevel() {
+                return this.data.level;
+            },
+            dataExpanded() {
+                return this.isItemExpanded(this.itemId) ? 'true' : 'false';
+            },
+            <?php  // The visibility of a node item depends upon its parent's "expanded" state ?>
+            canShow() {
+                return this.isItemExpanded(this.data.parentId);
+            },
+            showIconToOpenLevels() {
+                return !this.isLastLevel(this.data.level);
+            },
+            handleMouseEnter() {
+                this.updateItemHovered(this.itemId, true);
+            },
+            handleMouseLeave() {
+                this.updateItemHovered(this.itemId, false);
+            },
+            toggleExpansion() {
+                this.$event.stopPropagation();
+                this.toggleItemExpansion(this.itemId);
+            },
+        };
+    }
+
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('CategorySelection', CategorySelection);
+        Alpine.data('CategorySelectItem', CategorySelectItem);
+    });
+</script>
diff --git a/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml b/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
new file mode 100644
index 0000000..ac20d03
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection/search_input.phtml
@@ -0,0 +1,163 @@
+<?php declare(strict_types=1);
+
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+?>
+<div
+    class="admin__action-multiselect-search-wrap"
+    x-data="CategoriesSelectionSearch"
+>
+    <input
+        id="category-search-input"
+        class="admin__control-text admin__action-multiselect-search"
+        data-role="advanced-select-text"
+        type="text"
+        @input="filterInputValue"
+    />
+    <label class="admin__action-multiselect-search-label"
+           data-action="advanced-select-search"
+           for="category-search-input"
+    ></label>
+    <template x-if="canShowSearchResult">
+        <div
+            class="admin__action-multiselect-search-count"
+            x-text="itemsQuantity"
+        ></div>
+    </template>
+</div>
+<template x-if="canShowSearchResult">
+<ul class="admin__action-multiselect-menu-inner _root">
+    <template x-for="search in searchResult" :key="search.id">
+        <li class="admin__action-multiselect-menu-inner-item _root"
+            :data-search-item-id="search.id"
+            x-data="CategoriesSelectionSearchResultItem"
+            data-bind="css: { _parent: $data.optgroup }"
+            data-role="option-group"
+        >
+            <div
+                class="action-menu-item"
+                :class="classActionMenuItem"
+                @click="toggleSelection"
+            >
+                <input
+                    class="admin__control-checkbox"
+                    type="checkbox"
+                    tabindex="-1"
+                    :checked="isSelected"
+                />
+                <label class="admin__action-multiselect-label">
+                    <span x-text="search.label"></span>
+                    <template x-if="hasParent">
+                        <span
+                            class="admin__action-multiselect-item-path"
+                            x-text="parentsPathText"></span>
+                    </template>
+                </label>
+            </div>
+        </li>
+    </template>
+</ul>
+</template>
+<template x-if="canShowNoResultMessage">
+    <div style="padding: 2rem; text-align: center;">
+        <?= $escaper->escapeHtml(__('No results found.')) ?>
+    </div>
+</template>
+
+<script>
+    'use strict';
+
+    function CategoriesSelectionSearch() {
+        return {
+            itemsQuantity() {
+                return this.searchResult.length === 1 ?
+                    "1 <?= $escaper->escapeJs(__('option')) ?>" :
+                    this.searchResult.length.toString() + " <?= $escaper->escapeJs(__('options')) ?>";
+            },
+            filterInputValue() {
+                const searchValue = this.$event.target.value.trim().toLowerCase();
+
+                if (!searchValue) {
+                    this.searchResult = [];
+                    return this.switchToTreeView();
+                }
+
+                this.searchResult = this.prepareFilteredResult(searchValue);
+
+                this.switchToSearchView();
+            },
+            switchToSearchView() {
+                if (!this.isSearchView) {
+                    this.isTreeView = false;
+                    this.isSearchView = true;
+                }
+            },
+            switchToTreeView() {
+                if (!this.isTreeView) {
+                    this.isTreeView = true;
+                    this.isSearchView = false;
+                }
+            },
+            prepareFilteredResult(value) {
+                const result = [];
+
+                Object.keys(this.items).forEach((itemId) => {
+                    const item = this.items[itemId];
+                    const currentOption = item.label.toLowerCase();
+
+                    if (currentOption.indexOf(value) > -1) {
+                        result.push(item);
+                    }
+                });
+
+                return result;
+            },
+        };
+    }
+
+    function CategoriesSelectionSearchResultItem() {
+        return {
+            ...CategorySelectItemCommon(),
+            get itemId() {
+                return this.data?.id;
+            },
+            init() {
+                this.$nextTick(() => {
+                    const searchItemId = parseFloat(this.$el.dataset.searchItemId);
+                    this.data = this.items[searchItemId];
+                });
+            },
+            hasParent() {
+                return !!this.data?.parentId;
+            },
+            parentsPathText() {
+                if (!this.data) {
+                    return '';
+                }
+
+                const parentsPath = this.items[this.itemId].parentsPath;
+                if (parentsPath !== null) {
+                    return parentsPath;
+                }
+
+                let paths = [];
+
+                this.data.parentIds.forEach((parentId) => {
+                    paths.push(this.items[parentId].label);
+                });
+
+                this.items[this.itemId].parentsPath = paths.join(' / ');
+
+                return this.items[this.itemId].parentsPath;
+            },
+        };
+    }
+
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('CategoriesSelectionSearch', CategoriesSelectionSearch);
+        Alpine.data('CategoriesSelectionSearchResultItem', CategoriesSelectionSearchResultItem);
+    });
+</script>
diff --git a/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml b/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
new file mode 100644
index 0000000..e8dd51c
--- /dev/null
+++ b/view/adminhtml/templates/form/field_type/category_selection/select_inner_item.phtml
@@ -0,0 +1,55 @@
+<?php declare(strict_types=1);
+
+use Loki\AdminComponents\Data\CategoryTreeNode;
+use Loki\AdminComponents\Form\Field\FieldType\CategorySelection;
+use Magento\Framework\Escaper;
+use Magento\Framework\View\Element\Template;
+use Loki\AdminComponents\Form\Field\Field;
+
+/** @var Escaper $escaper */
+/** @var Template $block */
+/** @var Field $field */
+/** @var CategorySelection $fieldType */
+/** @var CategoryTreeNode $categoryTreeNode */
+
+$field = $block->getData('field');
+$categoryTreeNode = $block->getData('category_tree_node');
+$fieldType = $field->getFieldType();
+?>
+<ul class="admin__action-multiselect-menu-inner"
+    data-item-data="<?= $escaper->escapeHtmlAttr($fieldType->getCategoryNodeJson($categoryTreeNode)) ?>"
+    x-data="CategorySelectItem"
+    x-show="canShow"
+    :data-level="itemLevel"
+    :data-expanded="dataExpanded"
+>
+    <li class="admin__action-multiselect-menu-inner-item"
+        :class="classInnerItem"
+    >
+        <div class="action-menu-item"
+             :class="classActionMenuItem"
+             @mouseenter="handleMouseEnter"
+             @mouseleave="handleMouseLeave"
+             @click="toggleSelection"
+             @keydown.enter.window="toggleSelection"
+        >
+            <template x-if="showIconToOpenLevels">
+                <div class="admin__action-multiselect-dropdown"
+                     @click="toggleExpansion"
+                ></div>
+            </template>
+            <input
+                class="admin__control-checkbox"
+                type="checkbox"
+                tabindex="-1"
+                :checked="isSelected"
+            />
+            <label class="admin__action-multiselect-label">
+                <?= $escaper->escapeHtmlAttr($categoryTreeNode->label) ?>
+            </label>
+        </div>
+        <?php foreach ($categoryTreeNode->children as $childCategory): ?>
+            <?= /** @noEscape */ $fieldType->renderChildCategoryNode($childCategory, $field)?>
+        <?php endforeach; ?>
+    </li>
+</ul>