diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index ab8975c..0000000
--- a/.eslintignore
+++ /dev/null
@@ -1,5 +0,0 @@
-# Third party
-**/node_modules
-
-# Build products
-coverage/
diff --git a/docs/ru/tests/01-components.md b/docs/ru/tests/01-components.md
new file mode 100644
index 0000000..48dbcc6
--- /dev/null
+++ b/docs/ru/tests/01-components.md
@@ -0,0 +1,19 @@
+# Тесты страницы "Components" 
+
+## 1. Выбор компонента на странице
+
+### Кейс 1.1
+
+1. Открыть приложение V4Fire
+2. Открыть devtools 
+3. Открыть вкладку `v4fire` в devtools
+4. Кликнуть на иконку прицела и выбрать компонент на странице -> Данные компонента отобразились в панели
+
+### Кейс 1.2
+
+1. Открыть приложение V4Fire
+2. Открыть devtools 
+3. Открыть вкладку `v4fire` в devtools
+4. Сменить вкладку в браузере
+5. Вернуться на вкладку с приложением V4Fire
+6. Кликнуть на иконку прицела и выбрать компонент на странице -> Данные компонента отобразились в панели
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.js
index 42a91d2..7d75ef0 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -24,7 +24,24 @@ const copyrightTemplate = [
 	' '
 ];
 
+const ignore = [
+	'**/src/**/@(i-|b-|p-|g-|v-)*/index.js',
+	'**/src/**/test/**/*.js',
+
+	'**/assets/**',
+	'**/src/assets/**',
+
+	'**/tmp/**',
+	'**/src/entries/tmp/**',
+
+	'**/docs/**',
+	'**/dist/**',
+	'**/node_modules/**'
+];
+
 base.forEach((item) => {
+	item.ignores = ignore;
+
 	if (item.plugins) {
 		item.plugins['header'] = headerPlugin;
 	}
diff --git a/packages/devtools-backend/src/index.ts b/packages/devtools-backend/src/index.ts
index e758937..18d0247 100644
--- a/packages/devtools-backend/src/index.ts
+++ b/packages/devtools-backend/src/index.ts
@@ -7,3 +7,5 @@
  */
 
 export * from './serialize';
+export * from './search';
+export * from './ui';
diff --git a/packages/devtools-backend/src/search/README.md b/packages/devtools-backend/src/search/README.md
new file mode 100644
index 0000000..e8a13d6
--- /dev/null
+++ b/packages/devtools-backend/src/search/README.md
@@ -0,0 +1,5 @@
+# Search
+
+These modules provide search API:
+
+- find component node
diff --git a/packages/devtools-backend/src/search/find-component-node.ts b/packages/devtools-backend/src/search/find-component-node.ts
new file mode 100644
index 0000000..a9b2fc4
--- /dev/null
+++ b/packages/devtools-backend/src/search/find-component-node.ts
@@ -0,0 +1,28 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+/**
+ * Find component DOM node
+ *
+ * @param id - component id
+ * @param name - component name
+ */
+export default function findComponentNode<T extends Element>(id: string, name?: string): T | null {
+	let node = Array.prototype.find.call(
+		document.querySelectorAll(`.i-block-helper.${id}`),
+		(node) => node.component?.componentId === id
+	);
+
+	if (node == null && name != null) {
+		// Maybe it's a functional component
+		const nodes = document.querySelectorAll(`.i-block-helper.${name}`);
+		node = Array.prototype.find.call(nodes, (node) => node.component?.componentId === id);
+	}
+
+	return node;
+}
diff --git a/packages/devtools-backend/src/search/index.ts b/packages/devtools-backend/src/search/index.ts
new file mode 100644
index 0000000..fa1d3e5
--- /dev/null
+++ b/packages/devtools-backend/src/search/index.ts
@@ -0,0 +1,8 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+export { default as findComponentNode } from './find-component-node';
diff --git a/packages/devtools-backend/src/serialize/index.ts b/packages/devtools-backend/src/serialize/index.ts
index d89b2dc..76f7653 100644
--- a/packages/devtools-backend/src/serialize/index.ts
+++ b/packages/devtools-backend/src/serialize/index.ts
@@ -37,7 +37,7 @@ export function getType<T = unknown>(value: T): string {
  */
 export function serialize<T = unknown>(
 	value: T,
-	isRestrictedKey?: (key: string) => boolean
+	isRestrictedKey?: (key: string, value?: unknown) => boolean
 ): string {
 	let refCounter = 1;
 
@@ -49,7 +49,7 @@ export function serialize<T = unknown>(
 	return JSON.stringify(value, expandedStringify);
 
 	function expandedStringify(this: any, key: string, value: unknown): unknown {
-		if (isRestrictedKey?.(key)) {
+		if (isRestrictedKey?.(key, value)) {
 			return '[Restricted]';
 		}
 
diff --git a/packages/devtools-backend/src/ui/README.md b/packages/devtools-backend/src/ui/README.md
new file mode 100644
index 0000000..fc127cc
--- /dev/null
+++ b/packages/devtools-backend/src/ui/README.md
@@ -0,0 +1,5 @@
+# UI
+
+These modules provide API to modify the UI of inspected window:
+
+- componentHighlight - displays an overlay over the component
diff --git a/packages/devtools-backend/src/ui/component-highlight.ts b/packages/devtools-backend/src/ui/component-highlight.ts
new file mode 100644
index 0000000..039ac7e
--- /dev/null
+++ b/packages/devtools-backend/src/ui/component-highlight.ts
@@ -0,0 +1,118 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import findComponentNode from '../search/find-component-node';
+
+interface HideOptions {
+	animate?: boolean;
+	delay?: number;
+}
+
+const
+	highlightNodeId = 'v4fire-devtools-highlight',
+	highlightAnimationDuration = 300;
+
+class ComponentHighlight {
+	/**
+	 * Highlight animation timeout
+	 */
+	#animationTimeout: any;
+
+	/**
+	 * Show highlight for the component
+	 *
+	 * @param componentId
+	 * @param componentName
+	 */
+	show(componentId: string, componentName: string): void {
+		const node = findComponentNode<HTMLElement>(componentId, componentName);
+
+		if (node == null) {
+			return;
+		}
+
+		clearTimeout(this.#animationTimeout);
+
+		const highlightNode = getOrCreateHighlightNode();
+
+		const {width, height, top, left} = node.getBoundingClientRect();
+		highlightNode.style.width = `${width}px`;
+		highlightNode.style.height = `${height}px`;
+		highlightNode.style.top = `${(globalThis.scrollY + top)}px`;
+		highlightNode.style.left = `${left}px`;
+		highlightNode.style.opacity = '1';
+		highlightNode.style.display = 'block';
+	}
+
+	/**
+	 * Hide component's highlight
+	 * @param animateOrOptions
+	 */
+	hide(animateOrOptions?: boolean | HideOptions): void {
+		let animate = false;
+		let delay: number | null = null;
+
+		if (typeof animateOrOptions === 'boolean') {
+			animate = animateOrOptions;
+
+		} else if (typeof animateOrOptions === 'object') {
+			({animate = false, delay = null} = animateOrOptions);
+		}
+
+		const node = document.getElementById(highlightNodeId);
+
+		if (node == null) {
+			return;
+		}
+
+		if (animate) {
+			clearTimeout(this.#animationTimeout);
+
+			const end = () => {
+				this.#animationTimeout = setTimeout(() => {
+					node.style.display = 'none';
+				}, highlightAnimationDuration);
+			};
+
+			const start = () => {
+				node.style.opacity = '0';
+
+				end();
+			};
+
+			if (delay != null) {
+				this.#animationTimeout = setTimeout(start, delay);
+			} else {
+				start();
+			}
+
+		} else {
+			node.style.display = 'none';
+		}
+	}
+}
+
+export const componentHighlight = new ComponentHighlight();
+
+function getOrCreateHighlightNode(): HTMLElement {
+	let highlightNode = document.getElementById(highlightNodeId);
+
+	if (highlightNode == null) {
+		highlightNode = document.createElement('div');
+		highlightNode.id = highlightNodeId;
+		highlightNode.style.position = 'absolute';
+		highlightNode.style.display = 'none';
+		highlightNode.style.backgroundColor = 'rgba(250, 0, 250, 0.3)';
+		highlightNode.style.zIndex = '9999';
+		highlightNode.style.transition = `opacity ${highlightAnimationDuration}ms ease`;
+		highlightNode.style.pointerEvents = 'none';
+		document.body.appendChild(highlightNode);
+	}
+
+	return highlightNode;
+}
diff --git a/packages/devtools-backend/src/ui/component-locate.ts b/packages/devtools-backend/src/ui/component-locate.ts
new file mode 100644
index 0000000..21d4ed2
--- /dev/null
+++ b/packages/devtools-backend/src/ui/component-locate.ts
@@ -0,0 +1,99 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import { componentHighlight } from './component-highlight';
+
+interface ComponentInterface {
+	componentId: string;
+	componentName: string;
+}
+
+class ComponentLocate {
+	#mouseoverListener: ((e: MouseEvent) => void) | null = null;
+
+	#clickListener: ((e: MouseEvent) => void) | null = null;
+
+	enable() {
+		this.disable();
+
+		let component: ComponentInterface | null = null;
+
+		this.#mouseoverListener = (e: MouseEvent) => {
+			component = e.target instanceof Element ? findComponent(e.target) : null;
+
+			if (component != null) {
+				const {componentId, componentName} = component;
+				componentHighlight.show(componentId, componentName);
+
+			} else {
+				componentHighlight.hide();
+			}
+		};
+
+		this.#clickListener = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			this.disable();
+
+			if (component != null) {
+				componentHighlight.hide({animate: true});
+
+				const {componentId, componentName} = component;
+
+				// TODO: create bridge
+				globalThis.postMessage({
+					source: 'v4fire-devtools-bridge',
+					payload: {
+						event: 'select-component',
+						payload: {componentId, componentName}
+					}
+				}, '*');
+			}
+		};
+
+		document.addEventListener('mouseover', this.#mouseoverListener);
+		document.addEventListener('click', this.#clickListener, {capture: true});
+	}
+
+	disable() {
+		if (this.#mouseoverListener != null) {
+			document.removeEventListener('mouseover', this.#mouseoverListener);
+			this.#mouseoverListener = null;
+		}
+
+		if (this.#clickListener != null) {
+			document.removeEventListener('click', this.#clickListener, {capture: true});
+			this.#clickListener = null;
+		}
+	}
+}
+
+export const componentLocate = new ComponentLocate();
+
+function findComponent(target: Element | null): ComponentInterface | null {
+	let component: ComponentInterface | null = null;
+
+	while (component == null && target != null) {
+		const node: Element & {component?: ComponentInterface} | null = target.closest('.i-block-helper');
+
+		if (node == null) {
+			break;
+		}
+
+		if (node.component != null) {
+			({component} = node);
+
+		} else {
+			// If `component` property is missing - search higher in hierarchy
+			target = <Element>node.parentNode;
+		}
+	}
+
+	return component;
+}
diff --git a/packages/devtools-backend/src/ui/index.ts b/packages/devtools-backend/src/ui/index.ts
new file mode 100644
index 0000000..f0f697e
--- /dev/null
+++ b/packages/devtools-backend/src/ui/index.ts
@@ -0,0 +1,9 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+export { componentHighlight } from './component-highlight';
+export { componentLocate } from './component-locate';
diff --git a/packages/devtools-core/src/assets/svg/circle-dashed.svg b/packages/devtools-core/src/assets/svg/circle-dashed.svg
new file mode 100644
index 0000000..0a07b66
--- /dev/null
+++ b/packages/devtools-core/src/assets/svg/circle-dashed.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.5475 4.75621C11.4981 4.56538 11.4867 4.36668 11.5141 4.17146C11.5415 3.97624 11.6071 3.78833 11.7072 3.61849C11.8073 3.44865 11.9399 3.3002 12.0973 3.18162C12.2548 3.06305 12.4341 2.97668 12.625 2.92746C14.8387 2.35589 17.1613 2.35589 19.375 2.92746C19.57 2.97261 19.754 3.05633 19.9162 3.1737C20.0784 3.29107 20.2154 3.4397 20.3192 3.61085C20.423 3.78199 20.4915 3.97218 20.5207 4.17021C20.5499 4.36825 20.5391 4.57012 20.489 4.76393C20.439 4.95773 20.3506 5.13956 20.2292 5.2987C20.1078 5.45784 19.9557 5.59106 19.782 5.69053C19.6083 5.78999 19.4165 5.85368 19.2178 5.87784C19.0191 5.902 18.8175 5.88615 18.625 5.83121C16.9032 5.38725 15.0969 5.38725 13.375 5.83121C12.9901 5.93079 12.5815 5.87349 12.2388 5.67192C11.8961 5.47035 11.6475 5.14099 11.5475 4.75621ZM6.36753 6.54246C4.76622 8.17394 3.605 10.185 2.99253 12.3875C2.93993 12.5774 2.92527 12.7758 2.94938 12.9714C2.9735 13.167 3.03593 13.3559 3.13309 13.5274C3.23025 13.6988 3.36025 13.8495 3.51565 13.9707C3.67106 14.0919 3.84882 14.1812 4.03878 14.2337C4.16915 14.2693 4.30366 14.2873 4.43878 14.2875C4.76678 14.2873 5.08569 14.1797 5.34667 13.981C5.60765 13.7823 5.79632 13.5036 5.88378 13.1875C6.36011 11.4751 7.26332 9.91171 8.50878 8.64371C8.64675 8.50311 8.75568 8.33672 8.82934 8.15403C8.90301 7.97133 8.93997 7.77592 8.93811 7.57894C8.93625 7.38197 8.89561 7.18729 8.81852 7.00601C8.74142 6.82474 8.62938 6.66043 8.48878 6.52246C8.34819 6.38449 8.18179 6.27556 7.9991 6.2019C7.81641 6.12824 7.62099 6.09128 7.42402 6.09314C7.22704 6.09499 7.03236 6.13563 6.85109 6.21272C6.66981 6.28982 6.5055 6.40186 6.36753 6.54246ZM5.88253 18.81C5.7697 18.4341 5.51406 18.1174 5.17046 17.9279C4.82686 17.7383 4.42266 17.691 4.04454 17.796C3.66643 17.901 3.34452 18.1499 3.14785 18.4895C2.95118 18.8291 2.89542 19.2322 2.99253 19.6125C3.6041 21.816 4.76542 23.8281 6.36753 25.46C6.65146 25.718 7.02349 25.8575 7.4071 25.8496C7.79071 25.8418 8.15672 25.6872 8.42986 25.4178C8.70301 25.1483 8.86251 24.7844 8.87556 24.401C8.88861 24.0175 8.75422 23.6436 8.50003 23.3562C7.25693 22.0867 6.35632 20.5224 5.88253 18.81ZM18.625 26.1687C16.9033 26.6133 15.0968 26.6133 13.375 26.1687C13.1825 26.1138 12.981 26.0979 12.7823 26.1221C12.5836 26.1462 12.3917 26.2099 12.218 26.3094C12.0443 26.4089 11.8923 26.5421 11.7709 26.7012C11.6494 26.8604 11.5611 27.0422 11.511 27.236C11.461 27.4298 11.4502 27.6317 11.4794 27.8297C11.5086 28.0277 11.5771 28.2179 11.6809 28.3891C11.7847 28.5602 11.9217 28.7089 12.0839 28.8262C12.246 28.9436 12.43 29.0273 12.625 29.0725C14.8387 29.644 17.1613 29.644 19.375 29.0725C19.57 29.0273 19.754 28.9436 19.9162 28.8262C20.0784 28.7089 20.2154 28.5602 20.3192 28.3891C20.423 28.2179 20.4915 28.0277 20.5207 27.8297C20.5499 27.6317 20.5391 27.4298 20.489 27.236C20.439 27.0422 20.3506 26.8604 20.2292 26.7012C20.1078 26.5421 19.9557 26.4089 19.782 26.3094C19.6083 26.2099 19.4165 26.1462 19.2178 26.1221C19.0191 26.0979 18.8175 26.1138 18.625 26.1687ZM27.965 17.7662C27.5823 17.6619 27.1739 17.7134 26.829 17.9094C26.4842 18.1055 26.2311 18.4302 26.125 18.8125C25.6487 20.5248 24.7455 22.0882 23.5 23.3562C23.2212 23.64 23.0666 24.0229 23.0701 24.4207C23.0736 24.8185 23.235 25.1987 23.5188 25.4775C23.8026 25.7563 24.1855 25.9109 24.5833 25.9074C24.9811 25.9039 25.3612 25.7425 25.64 25.4587C27.2411 23.8266 28.4023 21.8152 29.015 19.6125C29.0675 19.4222 29.082 19.2235 29.0576 19.0276C29.0331 18.8318 28.9703 18.6427 28.8726 18.4711C28.7749 18.2996 28.6444 18.1491 28.4884 18.0281C28.3325 17.9071 28.1542 17.8181 27.9638 17.7662H27.965ZM26.1188 13.19C26.2316 13.5658 26.4873 13.8825 26.8309 14.072C27.1745 14.2616 27.5787 14.309 27.9568 14.204C28.3349 14.099 28.6568 13.85 28.8535 13.5104C29.0501 13.1708 29.1059 12.7677 29.0088 12.3875C28.3972 10.1839 27.2359 8.17181 25.6338 6.53996C25.4984 6.38854 25.3336 6.26619 25.1495 6.18035C24.9654 6.0945 24.7658 6.04694 24.5628 6.04056C24.3597 6.03417 24.1575 6.06909 23.9684 6.1432C23.7793 6.2173 23.6071 6.32906 23.4625 6.47167C23.3178 6.61429 23.2037 6.7848 23.1269 6.97287C23.0501 7.16093 23.0123 7.36263 23.0158 7.56574C23.0194 7.76884 23.0641 7.96911 23.1473 8.15441C23.2305 8.33971 23.3505 8.50618 23.5 8.64371C24.7431 9.91325 25.6437 11.4775 26.1175 13.19H26.1188Z"
+    fill="currentColor" />
+</svg>
diff --git a/packages/devtools-core/src/assets/svg/circle.svg b/packages/devtools-core/src/assets/svg/circle.svg
new file mode 100644
index 0000000..64a57b4
--- /dev/null
+++ b/packages/devtools-core/src/assets/svg/circle.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M16 2.5C13.33 2.5 10.7199 3.29176 8.49981 4.77516C6.27974 6.25856 4.54942 8.36697 3.52763 10.8338C2.50585 13.3006 2.2385 16.015 2.7594 18.6337C3.28031 21.2525 4.56606 23.6579 6.45406 25.5459C8.34207 27.434 10.7475 28.7197 13.3663 29.2406C15.985 29.7615 18.6994 29.4942 21.1662 28.4724C23.633 27.4506 25.7414 25.7203 27.2248 23.5002C28.7082 21.2801 29.5 18.67 29.5 16C29.496 12.4208 28.0724 8.98932 25.5416 6.45844C23.0107 3.92756 19.5792 2.50397 16 2.5ZM16 26.5C13.9233 26.5 11.8932 25.8842 10.1665 24.7304C8.4398 23.5767 7.09399 21.9368 6.29927 20.0182C5.50455 18.0996 5.29662 15.9884 5.70176 13.9516C6.10691 11.9148 7.10693 10.0438 8.57538 8.57538C10.0438 7.10693 11.9148 6.1069 13.9516 5.70175C15.9884 5.29661 18.0996 5.50454 20.0182 6.29926C21.9368 7.09399 23.5767 8.4398 24.7304 10.1665C25.8842 11.8932 26.5 13.9233 26.5 16C26.497 18.7839 25.3898 21.4528 23.4213 23.4213C21.4529 25.3898 18.7839 26.497 16 26.5Z"
+    fill="currentColor" />
+</svg>
diff --git a/packages/devtools-core/src/assets/svg/crosshair.svg b/packages/devtools-core/src/assets/svg/crosshair.svg
new file mode 100644
index 0000000..011c425
--- /dev/null
+++ b/packages/devtools-core/src/assets/svg/crosshair.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M29 14.5H28.41C28.07 11.7247 26.8112 9.14298 24.8341 7.16589C22.857 5.18879 20.2753 3.93002 17.5 3.59V3C17.5 2.60218 17.342 2.22064 17.0607 1.93934C16.7794 1.65804 16.3978 1.5 16 1.5C15.6022 1.5 15.2206 1.65804 14.9393 1.93934C14.658 2.22064 14.5 2.60218 14.5 3V3.59C11.7247 3.93002 9.14298 5.18879 7.16589 7.16589C5.18879 9.14298 3.93002 11.7247 3.59 14.5H3C2.60218 14.5 2.22064 14.658 1.93934 14.9393C1.65804 15.2206 1.5 15.6022 1.5 16C1.5 16.3978 1.65804 16.7794 1.93934 17.0607C2.22064 17.342 2.60218 17.5 3 17.5H3.59C3.93002 20.2753 5.18879 22.857 7.16589 24.8341C9.14298 26.8112 11.7247 28.07 14.5 28.41V29C14.5 29.3978 14.658 29.7794 14.9393 30.0607C15.2206 30.342 15.6022 30.5 16 30.5C16.3978 30.5 16.7794 30.342 17.0607 30.0607C17.342 29.7794 17.5 29.3978 17.5 29V28.41C20.2753 28.07 22.857 26.8112 24.8341 24.8341C26.8112 22.857 28.07 20.2753 28.41 17.5H29C29.3978 17.5 29.7794 17.342 30.0607 17.0607C30.342 16.7794 30.5 16.3978 30.5 16C30.5 15.6022 30.342 15.2206 30.0607 14.9393C29.7794 14.658 29.3978 14.5 29 14.5ZM17.5 25.375V25C17.5 24.6022 17.342 24.2206 17.0607 23.9393C16.7794 23.658 16.3978 23.5 16 23.5C15.6022 23.5 15.2206 23.658 14.9393 23.9393C14.658 24.2206 14.5 24.6022 14.5 25V25.375C12.5267 25.0555 10.7041 24.1229 9.29061 22.7094C7.87712 21.2959 6.9445 19.4733 6.625 17.5H7C7.39782 17.5 7.77936 17.342 8.06066 17.0607C8.34196 16.7794 8.5 16.3978 8.5 16C8.5 15.6022 8.34196 15.2206 8.06066 14.9393C7.77936 14.658 7.39782 14.5 7 14.5H6.625C6.9445 12.5267 7.87712 10.7041 9.29061 9.29061C10.7041 7.87712 12.5267 6.9445 14.5 6.625V7C14.5 7.39782 14.658 7.77936 14.9393 8.06066C15.2206 8.34196 15.6022 8.5 16 8.5C16.3978 8.5 16.7794 8.34196 17.0607 8.06066C17.342 7.77936 17.5 7.39782 17.5 7V6.625C19.4733 6.9445 21.2959 7.87712 22.7094 9.29061C24.1229 10.7041 25.0555 12.5267 25.375 14.5H25C24.6022 14.5 24.2206 14.658 23.9393 14.9393C23.658 15.2206 23.5 15.6022 23.5 16C23.5 16.3978 23.658 16.7794 23.9393 17.0607C24.2206 17.342 24.6022 17.5 25 17.5H25.375C25.0555 19.4733 24.1229 21.2959 22.7094 22.7094C21.2959 24.1229 19.4733 25.0555 17.5 25.375ZM16 10.5C14.9122 10.5 13.8488 10.8226 12.9444 11.4269C12.0399 12.0313 11.3349 12.8902 10.9187 13.8952C10.5024 14.9002 10.3935 16.0061 10.6057 17.073C10.8179 18.1399 11.3417 19.1199 12.1109 19.8891C12.8801 20.6583 13.8601 21.1821 14.927 21.3943C15.9939 21.6065 17.0998 21.4976 18.1048 21.0813C19.1098 20.6651 19.9687 19.9601 20.5731 19.0556C21.1774 18.1512 21.5 17.0878 21.5 16C21.4983 14.5418 20.9184 13.1438 19.8873 12.1127C18.8562 11.0816 17.4582 10.5017 16 10.5ZM16 18.5C15.5055 18.5 15.0222 18.3534 14.6111 18.0787C14.2 17.804 13.8795 17.4135 13.6903 16.9567C13.5011 16.4999 13.4516 15.9972 13.548 15.5123C13.6445 15.0273 13.8826 14.5819 14.2322 14.2322C14.5819 13.8826 15.0273 13.6445 15.5123 13.548C15.9972 13.4516 16.4999 13.5011 16.9567 13.6903C17.4135 13.8795 17.804 14.2 18.0787 14.6111C18.3534 15.0222 18.5 15.5055 18.5 16C18.5 16.663 18.2366 17.2989 17.7678 17.7678C17.2989 18.2366 16.663 18.5 16 18.5Z"
+    fill="currentColor" />
+</svg>
diff --git a/packages/devtools-core/src/assets/svg/inspect.svg b/packages/devtools-core/src/assets/svg/inspect.svg
new file mode 100644
index 0000000..dded026
--- /dev/null
+++ b/packages/devtools-core/src/assets/svg/inspect.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.43874 13.0612L2.43874 9.0612C2.2989 8.92184 2.18795 8.75625 2.11224 8.57392C2.03653 8.3916 1.99756 8.19612 1.99756 7.9987C1.99756 7.80127 2.03653 7.6058 2.11224 7.42347C2.18795 7.24114 2.2989 7.07555 2.43874 6.9362L6.43874 2.9362C6.57827 2.79667 6.74392 2.68599 6.92622 2.61047C7.10852 2.53496 7.30392 2.49609 7.50124 2.49609C7.69857 2.49609 7.89396 2.53496 8.07626 2.61047C8.25857 2.68599 8.42421 2.79667 8.56374 2.9362C8.70327 3.07573 8.81395 3.24137 8.88946 3.42367C8.96498 3.60598 9.00384 3.80137 9.00384 3.9987C9.00384 4.19602 8.96498 4.39141 8.88946 4.57372C8.81395 4.75602 8.70327 4.92167 8.56374 5.0612L5.62499 7.99995L8.56124 10.9387C8.84303 11.2205 9.00134 11.6027 9.00134 12.0012C9.00134 12.3997 8.84303 12.7819 8.56124 13.0637C8.27945 13.3455 7.89726 13.5038 7.49874 13.5038C7.10023 13.5038 6.71803 13.3455 6.43624 13.0637L6.43874 13.0612ZM12.4387 13.0612C12.5781 13.201 12.7437 13.312 12.926 13.3877C13.1083 13.4634 13.3038 13.5024 13.5012 13.5024C13.6987 13.5024 13.8941 13.4634 14.0765 13.3877C14.2588 13.312 14.4244 13.201 14.5637 13.0612L18.5637 9.0612C18.7036 8.92184 18.8145 8.75625 18.8902 8.57392C18.966 8.3916 19.0049 8.19612 19.0049 7.9987C19.0049 7.80127 18.966 7.6058 18.8902 7.42347C18.8145 7.24114 18.7036 7.07555 18.5637 6.9362L14.5637 2.9362C14.2819 2.6544 13.8998 2.49609 13.5012 2.49609C13.1027 2.49609 12.7205 2.6544 12.4387 2.9362C12.1569 3.21799 11.9986 3.60018 11.9986 3.9987C11.9986 4.39721 12.1569 4.7794 12.4387 5.0612L15.375 7.99995L12.4387 10.9387C12.2993 11.078 12.1886 11.2434 12.1132 11.4255C12.0377 11.6076 11.9988 11.8028 11.9988 11.9999C11.9988 12.1971 12.0377 12.3923 12.1132 12.5744C12.1886 12.7565 12.2993 12.9219 12.4387 13.0612ZM25 4.49995H22.5C22.1022 4.49995 21.7206 4.65798 21.4393 4.93929C21.158 5.22059 21 5.60212 21 5.99995C21 6.39777 21.158 6.7793 21.4393 7.06061C21.7206 7.34191 22.1022 7.49995 22.5 7.49995H24.5V24.4999H7.49999V17.4999C7.49999 17.1021 7.34196 16.7206 7.06065 16.4393C6.77935 16.158 6.39782 15.9999 5.99999 15.9999C5.60217 15.9999 5.22064 16.158 4.93933 16.4393C4.65803 16.7206 4.49999 17.1021 4.49999 17.4999V24.9999C4.49999 25.663 4.76338 26.2989 5.23222 26.7677C5.70107 27.2366 6.33695 27.4999 6.99999 27.4999H25C25.663 27.4999 26.2989 27.2366 26.7678 26.7677C27.2366 26.2989 27.5 25.663 27.5 24.9999V6.99995C27.5 6.3369 27.2366 5.70102 26.7678 5.23218C26.2989 4.76334 25.663 4.49995 25 4.49995Z"
+    fill="currentColor" />
+</svg>
diff --git a/packages/devtools-core/src/assets/svg/reload.svg b/packages/devtools-core/src/assets/svg/reload.svg
new file mode 100644
index 0000000..04c3a9e
--- /dev/null
+++ b/packages/devtools-core/src/assets/svg/reload.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M30.5 7.00001V13C30.5 13.3978 30.342 13.7794 30.0607 14.0607C29.7793 14.342 29.3978 14.5 29 14.5H23C22.6022 14.5 22.2206 14.342 21.9393 14.0607C21.658 13.7794 21.5 13.3978 21.5 13C21.5 12.6022 21.658 12.2207 21.9393 11.9394C22.2206 11.658 22.6022 11.5 23 11.5H25.1375L22.7625 9.32751C22.7462 9.31251 22.73 9.29751 22.715 9.28126C21.6138 8.18071 20.2589 7.36767 18.7697 6.91368C17.2805 6.4597 15.7025 6.37868 14.1746 6.67776C12.6467 6.97684 11.2157 7.64685 10.0076 8.62883C8.79941 9.61082 7.85112 10.8747 7.24613 12.3092C6.64114 13.7438 6.39798 15.305 6.53806 16.8556C6.67814 18.4062 7.19716 19.8985 8.04946 21.2014C8.90175 22.5043 10.0612 23.5778 11.4258 24.3273C12.7903 25.0769 14.3182 25.4796 15.875 25.5H16C18.4249 25.5059 20.7591 24.5784 22.5187 22.91C22.808 22.6367 23.194 22.4894 23.5918 22.5007C23.9896 22.5119 24.3667 22.6808 24.64 22.97C24.9133 23.2593 25.0606 23.6452 25.0493 24.0431C25.0381 24.4409 24.8692 24.8179 24.58 25.0913C22.2636 27.2868 19.1915 28.5073 16 28.5H15.8287C13.7826 28.4712 11.7747 27.9404 9.98159 26.9543C8.18845 25.9682 6.66483 24.557 5.54451 22.8445C4.4242 21.132 3.74145 19.1707 3.55623 17.1327C3.371 15.0947 3.68896 13.0424 4.48219 11.156C5.27542 9.26956 6.51965 7.60676 8.10564 6.31356C9.69163 5.02035 11.5709 4.13631 13.5783 3.73905C15.5858 3.34179 17.6601 3.44346 19.6191 4.03514C21.5781 4.62682 23.3618 5.6904 24.8137 7.13251L27.5 9.59001V7.00001C27.5 6.60219 27.658 6.22065 27.9393 5.93935C28.2206 5.65805 28.6022 5.50001 29 5.50001C29.3978 5.50001 29.7793 5.65805 30.0607 5.93935C30.342 6.22065 30.5 6.60219 30.5 7.00001Z"
+    fill="currentColor" />
+</svg>
diff --git a/packages/devtools-core/src/components/base/b-tree/b-tree_theme_pretty.styl b/packages/devtools-core/src/components/base/b-tree/b-tree_theme_pretty.styl
new file mode 100644
index 0000000..4ee0194
--- /dev/null
+++ b/packages/devtools-core/src/components/base/b-tree/b-tree_theme_pretty.styl
@@ -0,0 +1,26 @@
+b-tree_theme_pretty extends b-tree
+	/theme &__item-wrapper
+		display flex
+
+	/theme &__marker
+		width 16px
+
+	/theme &__fold
+		text-align center
+
+	/theme &__fold:before
+		content ""
+		display inline-block
+
+		border-top 4px solid transparent
+		border-bottom 4px solid transparent
+		border-left 6px solid rgba(100, 100, 100, 0.5)
+
+		transition transform 0.1s ease
+		transform rotate(90deg)
+
+	/theme &__node_folded_true &__fold:before
+		transform rotate(0)
+
+	/theme &__node_folded_true &__children
+		display none
diff --git a/packages/devtools-core/src/components/widgets/b-header/b-header.ss b/packages/devtools-core/src/components/widgets/b-header/b-header.ss
index 1931396..a252793 100644
--- a/packages/devtools-core/src/components/widgets/b-header/b-header.ss
+++ b/packages/devtools-core/src/components/widgets/b-header/b-header.ss
@@ -4,6 +4,16 @@
 
 - template index() extends ['i-block'].index
 	- block body
+		< .&__actions
+			< b-icon-button &
+				:icon = 'reload' |
+				@click = onReload |
+				:hint = 'Reload&nbsp;tree' |
+				:hintPos = 'bottom-right'
+			.
+
+			< b-components-actions v-if = r.activePage === 'components'
+
 		< .&__tabs
 			< b-button.&__tab @click = r.router.push('components')
 				Components
diff --git a/packages/devtools-core/src/components/widgets/b-header/b-header.styl b/packages/devtools-core/src/components/widgets/b-header/b-header.styl
index cf7dfd6..c15d2f1 100644
--- a/packages/devtools-core/src/components/widgets/b-header/b-header.styl
+++ b/packages/devtools-core/src/components/widgets/b-header/b-header.styl
@@ -1,8 +1,15 @@
 @import "components/super/i-block/i-block.styl"
 
 b-header extends i-block
+	flex-row flex-start center
+	line-height 1
 	border-bottom 1px solid black
 
+	&__actions
+		flex-row flex-start center
+		gap 8px
+		padding 8px
+
 	&__tabs
 		flex-row flex-start
 
diff --git a/packages/devtools-core/src/components/widgets/b-header/b-header.ts b/packages/devtools-core/src/components/widgets/b-header/b-header.ts
index ba6d648..ae6c9d9 100644
--- a/packages/devtools-core/src/components/widgets/b-header/b-header.ts
+++ b/packages/devtools-core/src/components/widgets/b-header/b-header.ts
@@ -16,4 +16,10 @@ export * from 'components/super/i-block/i-block';
 @component()
 export default class bHeader extends iBlock {
 
+	/**
+	 * Reloads the window
+	 */
+	onReload(): void {
+		globalThis.location.reload();
+	}
 }
diff --git a/packages/devtools-core/src/components/widgets/b-header/index.js b/packages/devtools-core/src/components/widgets/b-header/index.js
index 011fe59..a7ed14e 100644
--- a/packages/devtools-core/src/components/widgets/b-header/index.js
+++ b/packages/devtools-core/src/components/widgets/b-header/index.js
@@ -11,5 +11,7 @@
 package('b-header')
 	.extends('i-block')
 	.dependencies(
-		'b-button'
+		'b-button',
+		'b-icon-button',
+		'b-components-actions'
 	)
diff --git a/packages/devtools-core/src/features/components/b-components-actions/b-components-actions.ss b/packages/devtools-core/src/features/components/b-components-actions/b-components-actions.ss
new file mode 100644
index 0000000..c60d5ac
--- /dev/null
+++ b/packages/devtools-core/src/features/components/b-components-actions/b-components-actions.ss
@@ -0,0 +1,23 @@
+- namespace [%fileName%]
+
+- include 'components/super/i-block'|b as placeholder
+
+- template index() extends ['i-block'].index
+	- block body
+		< b-icon-button &
+			:icon = 'crosshair' |
+			@click = enableLocateComponent |
+			:hint = 'Select&nbsp;component&nbsp;in&nbsp;the&nbsp;page' |
+			:hintPos = 'bottom-right'
+		.
+
+		< b-window &
+			ref = modal |
+			@close = disableLocateComponent
+		.
+			< template #body
+				< b.&__modal-body
+					Click on a component on the page to select it
+			< template #controls
+				< b-button @click = disableLocateComponent
+					Cancel
diff --git a/packages/devtools-core/src/features/components/b-components-actions/b-components-actions.styl b/packages/devtools-core/src/features/components/b-components-actions/b-components-actions.styl
new file mode 100644
index 0000000..3d6fc20
--- /dev/null
+++ b/packages/devtools-core/src/features/components/b-components-actions/b-components-actions.styl
@@ -0,0 +1,9 @@
+@import "components/super/i-block/i-block.styl"
+
+b-components-actions extends i-block
+	display flex
+	line-height 1
+
+	&__modal-body
+		display block
+		padding 16px
diff --git a/packages/devtools-core/src/features/components/b-components-actions/b-components-actions.ts b/packages/devtools-core/src/features/components/b-components-actions/b-components-actions.ts
new file mode 100644
index 0000000..f14299f
--- /dev/null
+++ b/packages/devtools-core/src/features/components/b-components-actions/b-components-actions.ts
@@ -0,0 +1,36 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import iBlock, { component, watch } from 'components/super/i-block/i-block';
+import type bWindow from 'components/base/b-window/b-window';
+
+@component()
+export default class bComponentsActions extends iBlock {
+	override readonly $refs!: iBlock['$refs'] & {
+		modal?: bWindow;
+	};
+
+	/**
+	 * Enables component search via DOM
+	 */
+	enableLocateComponent(): void {
+		this.$refs.modal?.open().catch(stderr);
+	}
+
+	/**
+	 * Disables component search via DOM
+	 */
+	disableLocateComponent(): void {
+		this.$refs.modal?.close().catch(stderr);
+	}
+
+	@watch('rootEmitter:bridge.select-component')
+	protected closeModal(): void {
+		this.$refs.modal?.close().catch(stderr);
+	}
+}
diff --git a/packages/devtools-core/src/features/components/b-components-actions/index.js b/packages/devtools-core/src/features/components/b-components-actions/index.js
new file mode 100644
index 0000000..c450c52
--- /dev/null
+++ b/packages/devtools-core/src/features/components/b-components-actions/index.js
@@ -0,0 +1,17 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+'use strict';
+
+package('b-components-actions')
+	.extends('i-block')
+	.dependencies(
+		'b-icon-button',
+		'b-button',
+		'b-window'
+	);
diff --git a/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ss b/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ss
index 47868f9..07e017e 100644
--- a/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ss
+++ b/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ss
@@ -8,17 +8,28 @@
 			< b
 				{{ componentData.componentName.camelize(false) }}
 
-			< b-checkbox &
-				:label = (showEmpty ? "hide" : "show") + " empty" |
-				:checked = showEmpty |
-				@change = showEmptyChange
-			.
+			< .&__header-actions
+				< b-icon-button &
+					:hint = "Inspect&nbsp;DOM" |
+					:hintPos = 'bottom-left' |
+					:icon = 'inspect' |
+					@click = onInspect
+				.
+
+				< b-icon-button &
+					:hint = (showEmpty ? "Hide" : "Show") + "&nbsp;empty" |
+					:hintPos = 'bottom-left' |
+					:icon = (showEmpty ? 'circle' : 'circle-dashed') |
+					@click = onShowEmptyChange
+				.
 
 		< .&__body
 			< b-tree &
+				ref = tree |
 				:items = items |
 				:item = 'b-components-panel-item' |
-				:theme = 'demo' |
+				:theme = 'pretty' |
 				:cancelable = true |
-				:lazyRender = true
+				:lazyRender = true |
+				:renderFilter = createTreeRenderFilter()
 			.
diff --git a/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.styl b/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.styl
index 661ac7b..5ccd219 100644
--- a/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.styl
+++ b/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.styl
@@ -4,11 +4,19 @@ b-components-panel extends i-block
 	&__header
 		display flex
 		justify-content space-between
+		align-items center
 		padding 8px
 		border-bottom solid 1px black
 
+		&-actions
+			display flex
+			gap 4px
+			line-height 1
+
 	&__body
-		height 88vh
 		overflow auto
-		padding 8px
+		padding 4px 0
 		word-break break-word
+
+		.b-tree__node_level_0
+			padding 4px 8px 8px 4px
diff --git a/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ts b/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ts
index 190529a..b7194b7 100644
--- a/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ts
+++ b/packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ts
@@ -6,16 +6,24 @@
  * https://github.com/V4Fire/DevTools/blob/main/LICENSE
  */
 
+import symbolGenerator from 'core/symbol';
 import iBlock, { component, prop, field, computed } from 'components/super/i-block/i-block';
 
+import type bTree from 'components/base/b-tree/b-tree';
+import type { RenderFilter } from 'components/base/b-tree/b-tree';
 import type { Item, ComponentData } from 'features/components/b-components-panel/interface';
 
 import { createItems } from 'features/components/b-components-panel/modules/helpers';
 
 export * from 'features/components/b-components-panel/interface';
 
+const $$ = symbolGenerator();
+
 @component()
 export default class bComponentsPanel extends iBlock {
+	override readonly $refs!: iBlock['$refs'] & {
+		tree?: bTree;
+	};
 
 	/**
 	 * Component's data
@@ -61,13 +69,59 @@ export default class bComponentsPanel extends iBlock {
 		}
 	}
 
+	/**
+	 * Returns render filter for `bTree`, which delays rendering of children
+	 * for folded items
+	 */
+	createTreeRenderFilter(): RenderFilter {
+		const unfolded = new Set();
+		const resolvers = new Map<unknown, (value: boolean) => void>();
+
+		this.waitRef<bTree>('tree')
+			.then((tree) => this.async.on(
+				tree.unsafe.top.selfEmitter,
+				'fold',
+				(_ctx: unknown, _el: Element, item: Item, folded: boolean) => {
+					if (folded) {
+						unfolded.delete(item.value);
+
+					} else {
+						unfolded.add(item.value);
+
+						resolvers.get(item.value)?.(true);
+						resolvers.delete(item.value);
+					}
+				},
+				{label: $$.foldChange}
+			))
+			.catch(stderr);
+
+		return (ctx, el, i) => {
+			if (ctx.level === 0 && i < ctx.renderChunks) {
+				return true;
+			}
+
+			if (!ctx.folded || unfolded.has(el.parentValue)) {
+				return true;
+			}
+
+			return new Promise<boolean>((resolve) => {
+				resolvers.set(el.parentValue, resolve);
+			});
+		};
+	}
+
 	/**
 	 * Update show empty
-	 *
-	 * @param _
-	 * @param checked
 	 */
-	protected showEmptyChange(_: unknown, checked?: boolean): void {
-		this.showEmpty = Boolean(checked);
+	protected onShowEmptyChange(): void {
+		this.showEmpty = !this.showEmpty;
+	}
+
+	/**
+	 * Inspect component's node
+	 */
+	protected onInspect(): void {
+		// TODO: use inspected app
 	}
 }
diff --git a/packages/devtools-core/src/features/components/b-components-panel/interface.ts b/packages/devtools-core/src/features/components/b-components-panel/interface.ts
index 57f5069..b85939f 100644
--- a/packages/devtools-core/src/features/components/b-components-panel/interface.ts
+++ b/packages/devtools-core/src/features/components/b-components-panel/interface.ts
@@ -17,6 +17,11 @@ export interface Item extends Super {
 }
 
 export type ComponentData = {
+	/**
+	 * Component's id
+	 */
+	componentId: string;
+
 	/**
 	 * Component's values for props, fields, etc.
 	 */
diff --git a/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.ss b/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.ss
index 320e09c..132f14a 100644
--- a/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.ss
+++ b/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.ss
@@ -22,7 +22,7 @@
 				:item = 'b-components-tree-item' |
 				:itemProps = itemProps |
 				:folded = false |
-				:theme = 'demo' |
+				:theme = 'pretty' |
 				:cancelable = false
 			.
 
diff --git a/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.styl b/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.styl
index 0a142eb..4682e8b 100644
--- a/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.styl
+++ b/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.styl
@@ -3,10 +3,12 @@
 b-components-tree extends i-block
 	&__wrapper
 		position relative
-		// FIXME fill remaining height
-		height 88vh
 		overflow auto
 
+		.b-tree__node_active_true
+			> .b-tree__item-wrapper
+				background-color rgba(100, 100, 100, 0.1)
+
 	&__input
 		width 100%
 		padding 8px 16px
diff --git a/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.ts b/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.ts
index a0c2c81..7529764 100644
--- a/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.ts
+++ b/packages/devtools-core/src/features/components/b-components-tree/b-components-tree.ts
@@ -78,14 +78,7 @@ class bComponentsTree extends iBlock implements iSearch<Item> {
 			tree.setActive(value);
 		}
 
-		// It's ugly but we need to scroll to this element
-		const el = tree.unsafe.findItemElement(value);
-
-		if (el != null) {
-			const {clientHeight = 0} = el.querySelector(`.${tree.unsafe.block!.getFullElementName('item-wrapper')}`) ?? {};
-
-			this.search.scrollContainerToElement(wrapper, el, clientHeight);
-		}
+		this.scrollToItem(value);
 	}
 
 	/**
@@ -98,6 +91,9 @@ class bComponentsTree extends iBlock implements iSearch<Item> {
 			['children', 'folded', 'componentName', 'parentValue']
 		);
 
+		props['@mouseenter'] = this.onItemMouseEnter.bind(this, item);
+		props['@mouseleave'] = this.onItemMouseLeave.bind(this, item);
+
 		return props;
 	}
 
@@ -142,6 +138,23 @@ class bComponentsTree extends iBlock implements iSearch<Item> {
 		}
 	}
 
+	/**
+	 * Find item by it's value and scroll to it
+	 * @param value
+	 */
+	protected scrollToItem(value: string): void {
+		const {tree, wrapper} = this.$refs;
+
+		// It's ugly but we need to scroll to this element
+		const el = tree!.unsafe.findItemElement(value);
+
+		if (el != null) {
+			const {clientHeight = 0} = el.querySelector(`.${tree!.unsafe.block!.getFullElementName('item-wrapper')}`) ?? {};
+
+			this.search.scrollContainerToElement(wrapper!, el, clientHeight);
+		}
+	}
+
 	/**
 	 *
 	 * @param _
@@ -151,6 +164,41 @@ class bComponentsTree extends iBlock implements iSearch<Item> {
 	protected onTreeChange(_: unknown, componentId: string): void {
 		this.emit('change', componentId);
 	}
+
+	/**
+	 * Watch for `select-component` event from root
+	 *
+	 * @param _
+	 * @param payload
+	 */
+	// FIXME: watch r.bridge:select-component
+	@watch('rootEmitter:bridge.select-component')
+	protected onSelectComponent(_: unknown, payload: any): void {
+		const {componentId} = payload;
+		if (this.$refs.tree?.setActive(componentId)) {
+			this.scrollToItem(componentId);
+		}
+	}
+
+	/**
+	 * Handle item mouseenter event
+	 *
+	 * @param item
+	 * @param event
+	 */
+	protected onItemMouseEnter(item: Item, event: MouseEvent): void {
+		// TODO: use engine to highlight the component node
+	}
+
+	/**
+	 * Handle item mouseleave event
+	 *
+	 * @param item
+	 * @param event
+	 */
+	protected onItemMouseLeave(item: Item, event: MouseEvent): void {
+		// TODO: use engine to remove highlight from the component node
+	}
 }
 
 export default bComponentsTree;
diff --git a/packages/devtools-core/src/pages/p-components/p-components.styl b/packages/devtools-core/src/pages/p-components/p-components.styl
index 5f58f8b..f23ac0b 100644
--- a/packages/devtools-core/src/pages/p-components/p-components.styl
+++ b/packages/devtools-core/src/pages/p-components/p-components.styl
@@ -5,6 +5,11 @@ p-components extends i-dynamic-page
 	&__content
 		display flex
 
+		> *
+			display flex
+			flex-direction column
+			height calc(100vh - var(--header-height, 0))
+
 		> :first-child
 			flex 0 0 60%
 			border-right solid 1px black
diff --git a/packages/devtools-core/src/pages/p-components/p-components.ts b/packages/devtools-core/src/pages/p-components/p-components.ts
index 94d3f66..dfa6b97 100644
--- a/packages/devtools-core/src/pages/p-components/p-components.ts
+++ b/packages/devtools-core/src/pages/p-components/p-components.ts
@@ -54,14 +54,14 @@ export default class pComponents extends iDynamicPage {
 		this.selectedComponentId = componentId;
 		this.selectedComponentData = null;
 
-		const load = this.async.debounce(async () => {
+		const load = this.async.throttle(async () => {
 			try {
 				await this.loadSelectedComponentData();
 			} catch (error) {
 				// TODO: show alert
 				stderr(error);
 			}
-		}, 300, {label: $$.loadSelectedComponentMeta});
+		}, 1000, {label: $$.loadSelectedComponentMeta});
 
 		load();
 	}
diff --git a/packages/devtools-core/src/pages/p-root/p-root.ss b/packages/devtools-core/src/pages/p-root/p-root.ss
index 012b9a0..9f3d3cb 100644
--- a/packages/devtools-core/src/pages/p-root/p-root.ss
+++ b/packages/devtools-core/src/pages/p-root/p-root.ss
@@ -17,8 +17,6 @@
 			{{ placeholder }}
 		< template v-else
 			- block header
-				< b-header
+				< b-header ref = header
 			- block page
-					< b-dynamic-page.&__page &
-						ref = page
-					.
+					< b-dynamic-page.&__page ref = page
diff --git a/packages/devtools-core/src/pages/p-root/p-root.ts b/packages/devtools-core/src/pages/p-root/p-root.ts
index 8f6a3b8..f65f0d4 100644
--- a/packages/devtools-core/src/pages/p-root/p-root.ts
+++ b/packages/devtools-core/src/pages/p-root/p-root.ts
@@ -5,10 +5,11 @@
  * Released under the MIT license
  * https://github.com/V4Fire/DevTools/blob/main/LICENSE
  */
-import iStaticPage, { component, system, field } from 'components/super/i-static-page/i-static-page';
+import iStaticPage, { component, system, field, hook } from 'components/super/i-static-page/i-static-page';
 
 import createRouter from 'core/router/engines/in-memory';
 
+import type bHeader from 'components/widgets/b-header/b-header';
 import type bDynamicPage from 'components/base/b-dynamic-page/b-dynamic-page';
 
 export * from 'components/super/i-static-page/i-static-page';
@@ -16,6 +17,7 @@ export * from 'components/super/i-static-page/i-static-page';
 @component({root: true})
 export default class pRoot extends iStaticPage {
 	override readonly $refs!: iStaticPage['$refs'] & {
+		header?: bHeader;
 		page?: bDynamicPage;
 	};
 
@@ -30,4 +32,14 @@ export default class pRoot extends iStaticPage {
 	 */
 	@system()
 	routerEngine: typeof createRouter = createRouter;
+
+	/**
+	 * Sets `--header-height` css variable
+	 */
+	@hook('mounted')
+	async init(): Promise<void> {
+		const header = await this.waitRef<bHeader>('header');
+
+		(<HTMLElement>this.$el).style.setProperty('--header-height', `${header.$el?.clientHeight ?? 0}px`);
+	}
 }
diff --git a/packages/devtools-extension/components-lock.json b/packages/devtools-extension/components-lock.json
index dd2ce0f..749b10e 100644
--- a/packages/devtools-extension/components-lock.json
+++ b/packages/devtools-extension/components-lock.json
@@ -1,5 +1,5 @@
 {
-  "hash": "9a9ab7af9b3e01398691a5504d10670718f30c05120c98a22533eaf56fe2daeb",
+  "hash": "7c0fc3586bfa5c89c9ec9aa033da0ec91fc13c9afba1c020b37f858c5d51936f",
   "data": {
     "%data": "%data:Map",
     "%data:Map": [
@@ -111,6 +111,46 @@
           "etpl": null
         }
       ],
+      [
+        "b-components-actions",
+        {
+          "index": "node_modules/@v4fire/devtools-core/src/features/components/b-components-actions/index.js",
+          "declaration": {
+            "name": "b-components-actions",
+            "parent": "i-block",
+            "dependencies": [
+              "b-icon-button",
+              "b-button",
+              "b-window"
+            ],
+            "libs": []
+          },
+          "name": "b-components-actions",
+          "parent": "i-block",
+          "dependencies": [
+            "b-icon-button",
+            "b-button",
+            "b-window"
+          ],
+          "libs": [],
+          "resolvedLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "resolvedOwnLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "type": "block",
+          "mixin": false,
+          "logic": "src/features/components/b-components-actions/b-components-actions.ts",
+          "styles": [
+            "node_modules/@v4fire/devtools-core/src/features/components/b-components-actions/b-components-actions.styl"
+          ],
+          "tpl": "node_modules/@v4fire/devtools-core/src/features/components/b-components-actions/b-components-actions.ss",
+          "etpl": null
+        }
+      ],
       [
         "b-components-panel",
         {
@@ -143,7 +183,7 @@
           },
           "type": "block",
           "mixin": false,
-          "logic": "node_modules/@v4fire/devtools-core/src/features/components/b-components-panel/b-components-panel.ts",
+          "logic": "src/features/components/b-components-panel/b-components-panel.ts",
           "styles": [
             "node_modules/@v4fire/devtools-core/src/features/components/b-components-panel/b-components-panel.styl"
           ],
@@ -213,7 +253,7 @@
           },
           "type": "block",
           "mixin": false,
-          "logic": "node_modules/@v4fire/devtools-core/src/features/components/b-components-tree/b-components-tree.ts",
+          "logic": "src/features/components/b-components-tree/b-components-tree.ts",
           "styles": [
             "node_modules/@v4fire/devtools-core/src/features/components/b-components-tree/b-components-tree.styl"
           ],
@@ -749,14 +789,18 @@
             "name": "b-header",
             "parent": "i-block",
             "dependencies": [
-              "b-button"
+              "b-button",
+              "b-icon-button",
+              "b-components-actions"
             ],
             "libs": []
           },
           "name": "b-header",
           "parent": "i-block",
           "dependencies": [
-            "b-button"
+            "b-button",
+            "b-icon-button",
+            "b-components-actions"
           ],
           "libs": [],
           "resolvedLibs": {
@@ -2652,7 +2696,8 @@
               "components/traits/i-control-list/i-control-list",
               "core/browser",
               "core/cookies",
-              "core/html"
+              "core/html",
+              "models/modules/session"
             ]
           },
           "name": "p-v4-components-demo",
@@ -2693,7 +2738,8 @@
             "components/traits/i-control-list/i-control-list",
             "core/browser",
             "core/cookies",
-            "core/html"
+            "core/html",
+            "models/modules/session"
           ],
           "resolvedLibs": {
             "%data": "%data:Set",
@@ -2707,7 +2753,8 @@
               "core/cookies",
               "core/html",
               "core/router/engines/browser-history",
-              "core/router/engines/in-memory"
+              "core/router/engines/in-memory",
+              "models/modules/session"
             ]
           },
           "resolvedOwnLibs": {
@@ -2722,7 +2769,8 @@
               "core/cookies",
               "core/html",
               "core/router/engines/browser-history",
-              "core/router/engines/in-memory"
+              "core/router/engines/in-memory",
+              "models/modules/session"
             ]
           },
           "type": "page",
diff --git a/packages/devtools-extension/src/features/components/b-components-actions/b-components-actions.ts b/packages/devtools-extension/src/features/components/b-components-actions/b-components-actions.ts
new file mode 100644
index 0000000..0f5da54
--- /dev/null
+++ b/packages/devtools-extension/src/features/components/b-components-actions/b-components-actions.ts
@@ -0,0 +1,34 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import { component } from 'components/super/i-block/i-block';
+import Super from '@super/features/components/b-components-actions/b-components-actions';
+
+import { devtoolsEval } from 'core/browser-api';
+
+@component()
+export default class bComponentsActions extends Super {
+	override enableLocateComponent(): void {
+		super.enableLocateComponent();
+
+		// TODO: use InspectedApp interface
+		devtoolsEval(() => globalThis.__V4FIRE_DEVTOOLS_BACKEND__.componentLocate.enable())
+			.catch(stderr);
+	}
+
+	override disableLocateComponent(): void {
+		super.disableLocateComponent();
+
+		// TODO: use InspectedApp interface
+		devtoolsEval(() => {
+			globalThis.__V4FIRE_DEVTOOLS_BACKEND__.componentHighlight.hide();
+			globalThis.__V4FIRE_DEVTOOLS_BACKEND__.componentLocate.disable();
+		})
+			.catch(stderr);
+	}
+}
diff --git a/packages/devtools-extension/src/features/components/b-components-panel/b-components-panel.ts b/packages/devtools-extension/src/features/components/b-components-panel/b-components-panel.ts
new file mode 100644
index 0000000..f3b0421
--- /dev/null
+++ b/packages/devtools-extension/src/features/components/b-components-panel/b-components-panel.ts
@@ -0,0 +1,43 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+import { devtoolsEval } from 'core/browser-api';
+
+import { component } from 'components/super/i-block/i-block';
+
+import Super from '@super/features/components/b-components-panel/b-components-panel';
+
+@component()
+export default class bComponentsPanel extends Super {
+	protected override onInspect(): void {
+		const {componentId, componentName} = this.componentData;
+
+		devtoolsEval(evalInspect, [componentId, componentName])
+			.catch(stderr);
+	}
+}
+
+function evalInspect(componentId: string, componentName: string): void {
+	// eslint-disable-next-line @typescript-eslint/method-signature-style
+	const {inspect} = <{inspect?: (el: Element) => void} & Global>globalThis;
+
+	if (typeof inspect !== 'function') {
+		// eslint-disable-next-line no-alert
+		alert('Browser doesn\'t provide inspect util');
+		return;
+	}
+
+	const node = globalThis.__V4FIRE_DEVTOOLS_BACKEND__.findComponentNode(componentId, componentName);
+
+	if (node != null) {
+		inspect(node);
+
+	} else {
+		// eslint-disable-next-line no-alert
+		alert('Component\'s node not found');
+	}
+}
diff --git a/packages/devtools-extension/src/features/components/b-components-tree/b-components-tree.ts b/packages/devtools-extension/src/features/components/b-components-tree/b-components-tree.ts
new file mode 100644
index 0000000..e2cf257
--- /dev/null
+++ b/packages/devtools-extension/src/features/components/b-components-tree/b-components-tree.ts
@@ -0,0 +1,78 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import { devtoolsEval } from 'core/browser-api';
+
+import { component, hook, system } from 'components/super/i-block/i-block';
+
+import Super, { Item } from '@super/features/components/b-components-tree/b-components-tree';
+
+export * from '@super/features/components/b-components-tree/b-components-tree';
+
+@component()
+export default class bComponentsTree extends Super {
+
+	/**
+	 * Id of highlighted component
+	 */
+	@system()
+	highlightedComponentId: string | null = null;
+
+	@hook('mounted')
+	init(): void {
+		this.async.on(this.selfEmitter, 'change', (_: unknown, componentId: string) => {
+			const item = <CanUndef<Item>>this.$refs.tree?.getItemByValue(componentId);
+
+			if (item != null) {
+				devtoolsEval(
+					evalHighlightActive,
+					[this.highlightedComponentId !== componentId, componentId, item.componentName]
+				)
+					.catch(stderr);
+			}
+		});
+	}
+
+	/**
+	 * Show highlight for the component on mouseenter
+	 *
+	 * @param item
+	 */
+	protected override onItemMouseEnter(item: Item): void {
+		this.highlightedComponentId = item.value;
+		devtoolsEval(evalShowComponentHighlight, [item.value, item.componentName]).catch(stderr);
+	}
+
+	/**
+	 * Hide highlight for the component
+	 */
+	protected override onItemMouseLeave(): void {
+		devtoolsEval(evalHideComponentHighlight).catch(stderr);
+	}
+}
+
+function evalHighlightActive(autoHide: boolean, ...args: [string, string]): void {
+	const backend = globalThis.__V4FIRE_DEVTOOLS_BACKEND__;
+	const node = backend.findComponentNode(...args);
+	// @ts-expect-error Non-standard API
+	node?.scrollIntoViewIfNeeded(false);
+
+	backend.componentHighlight.show(...args);
+
+	if (autoHide) {
+		backend.componentHighlight.hide({delay: 1500, animate: true});
+	}
+}
+
+function evalShowComponentHighlight(...args: [string, string]): void {
+	globalThis.__V4FIRE_DEVTOOLS_BACKEND__.componentHighlight.show(...args);
+}
+
+function evalHideComponentHighlight(): void {
+	globalThis.__V4FIRE_DEVTOOLS_BACKEND__.componentHighlight.hide();
+}
diff --git a/packages/devtools-extension/src/pages/p-components/p-components.ts b/packages/devtools-extension/src/pages/p-components/p-components.ts
index b94029f..ec50f7a 100644
--- a/packages/devtools-extension/src/pages/p-components/p-components.ts
+++ b/packages/devtools-extension/src/pages/p-components/p-components.ts
@@ -109,7 +109,14 @@ function evalComponentsTree(): Item[] {
 		if (parentId != null) {
 			if (!map.has(parentId)) {
 				buffer.push(() => {
-					map.get(parentId).children.push(descriptor);
+					const item = map.get(parentId);
+
+					if (item != null) {
+						item.children.push(descriptor);
+
+					} else {
+						stderr(`Missing parent, component: ${component.componentName}, parent id: ${parentId}`);
+					}
 				});
 
 			} else {
@@ -131,20 +138,11 @@ function evalComponentMeta(value: string, name?: string): Nullable<string> {
 		'r',
 		'self',
 		'unsafe',
-		'window',
-		'document',
-		'console',
 		'router',
 		'LANG_PACKS'
 	]);
 
-	let node = document.querySelector(`.i-block-helper.${value}`);
-
-	if (node == null && name != null) {
-		// Maybe it's a functional component
-		const nodes = document.querySelectorAll(`.i-block-helper.${name}`);
-		node = Array.prototype.find.call(nodes, (node) => node.component?.componentId === value);
-	}
+	const node = globalThis.__V4FIRE_DEVTOOLS_BACKEND__.findComponentNode(value, name);
 
 	if (node == null) {
 		return null;
@@ -176,7 +174,10 @@ function evalComponentMeta(value: string, name?: string): Nullable<string> {
 		parent = parent.parentMeta;
 	}
 
-	const result = {componentName, props, fields, computedFields, systemFields, hierarchy, values};
+	const result = {componentId: value, componentName, props, fields, computedFields, systemFields, hierarchy, values};
 
-	return globalThis.__V4FIRE_DEVTOOLS_BACKEND__.serialize(result, (key) => key.startsWith('$') || restricted.has(key));
+	return globalThis.__V4FIRE_DEVTOOLS_BACKEND__.serialize(
+		result,
+		(key, value) => key.startsWith('$') || restricted.has(key) || value === globalThis || value === document || value === console
+	);
 }
diff --git a/packages/devtools-extension/src/pages/p-devtools/init.ts b/packages/devtools-extension/src/pages/p-devtools/init.ts
index b1253ee..439fdcf 100644
--- a/packages/devtools-extension/src/pages/p-devtools/init.ts
+++ b/packages/devtools-extension/src/pages/p-devtools/init.ts
@@ -7,11 +7,13 @@
  */
 
 import Async from '@v4fire/core/core/async';
-import { browserAPI } from 'core/browser-api';
+import { browserAPI, devtoolsEval } from 'core/browser-api';
 
 import type pRoot from 'pages/p-root/p-root';
 import { CouldNotFindV4FireOnThePageError, detectV4Fire } from 'pages/p-devtools/modules/detect-v4fire';
 
+// TODO: refactor
+
 const $a = new Async();
 
 /**
@@ -69,11 +71,18 @@ function mountDevToolsWhenV4FireHasLoaded() {
 		);
 
 		// Inject backend only when the v4fire is mounted
-		injectBackend(browserAPI.devtools.inspectedWindow.tabId);
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		if (browserAPI.devtools.inspectedWindow.tabId != null) {
+			injectBackend(browserAPI.devtools.inspectedWindow.tabId);
+		}
 
 		if (shouldUpdateRoot) {
-			setRootPlaceholder(null);
-			shouldUpdateRoot = false;
+			devtoolsEval(() => new Promise((resolve) => globalThis.requestIdleCallback(resolve)))
+				.then(() => {
+					setRootPlaceholder(null);
+					shouldUpdateRoot = false;
+				})
+				.catch(stderr);
 		}
 	};
 
@@ -128,6 +137,9 @@ function connectDevToolsPort() {
 		name: String(tabId)
 	});
 
+	// TODO: create bridge
+	port.onMessage.addListener(listenDevtoolsMessage);
+
 	// This port may be disconnected by Chrome at some point, this callback
 	// will be executed only if this port was disconnected from the other end
 	// so, when we call `port.disconnect()` from this script,
@@ -147,6 +159,7 @@ function performFullCleanup() {
 	root = null;
 
 	try {
+		port?.onMessage.removeListener(listenDevtoolsMessage);
 		port?.disconnect();
 	} catch (error) {
 		// eslint-disable-next-line no-console
@@ -167,3 +180,19 @@ function injectBackend(tabId: number): void {
 		.catch(stderr);
 }
 
+function listenDevtoolsMessage(message: {event: string; payload: any}): void {
+	if (root == null) {
+		return;
+	}
+
+	const {component} = (<{component: pRoot} & Element>root);
+
+	switch (message.event) {
+		case 'select-component':
+			component.selfEmitter.emit(`bridge.${message.event}`, message.payload);
+			break;
+
+		default:
+			// Do nothing
+	}
+}
diff --git a/packages/devtools-extension/src/pages/p-devtools/modules/detect-v4fire/error.ts b/packages/devtools-extension/src/pages/p-devtools/modules/detect-v4fire/error.ts
index 28b58b7..2a0a441 100644
--- a/packages/devtools-extension/src/pages/p-devtools/modules/detect-v4fire/error.ts
+++ b/packages/devtools-extension/src/pages/p-devtools/modules/detect-v4fire/error.ts
@@ -14,6 +14,6 @@ export default class CouldNotFindV4FireOnThePageError extends Error {
 			Error.captureStackTrace(this, CouldNotFindV4FireOnThePageError);
 		}
 
-		this.name = 'CouldNotFindReactOnThePageError';
+		this.name = 'CouldNotFindV4FireOnThePageError';
 	}
 }
diff --git a/packages/devtools-extension/src/scripts/proxy.ts b/packages/devtools-extension/src/scripts/proxy.ts
index f7df6e6..eed22b9 100644
--- a/packages/devtools-extension/src/scripts/proxy.ts
+++ b/packages/devtools-extension/src/scripts/proxy.ts
@@ -10,8 +10,14 @@
 // @see: https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/bindings/core/v8/V8BindingDesign.md#world
 // It can forward messages from content scripts running in MAIN world to the extension's service worker.
 
+let port: chrome.runtime.Port | null = null;
+
 globalThis.addEventListener('pageshow', () => {
 	globalThis.addEventListener('message', handleMessageFromPage);
+
+	if (port == null) {
+		connectPort();
+	}
 });
 
 globalThis.addEventListener('pagehide', () => {
@@ -25,6 +31,12 @@ function handleMessageFromPage(event: MessageEvent) {
 	}
 
 	switch (event.data.source) {
+		// This is a message from a bridge (initialized by a devtools backend)
+		case 'v4fire-devtools-bridge':
+			port?.postMessage(event.data.payload);
+			break;
+
+		// This is a message from a detect script
 		case 'v4fire-devtools-detect': {
 			const {source, payload} = event.data;
 			void chrome.runtime.sendMessage({source, payload});
@@ -36,3 +48,31 @@ function handleMessageFromPage(event: MessageEvent) {
 			// Do nothing
 	}
 }
+
+function handleMessageFromDevtools(message: any) {
+	globalThis.postMessage(
+		{
+			source: 'v4fire-devtools-content-script',
+			payload: message
+		},
+		'*'
+	);
+}
+
+function handleDisconnect() {
+	port = null;
+
+	// Try to reconnect
+	connectPort();
+}
+
+// Creates port from application page to the V4Fire DevTools' service worker
+// Which then connects it with devtools port
+function connectPort() {
+	port = chrome.runtime.connect({
+		name: 'proxy'
+	});
+
+	port.onMessage.addListener(handleMessageFromDevtools);
+	port.onDisconnect.addListener(handleDisconnect);
+}
diff --git a/packages/devtools-extension/src/sw/browser/browser-tab-manager.ts b/packages/devtools-extension/src/sw/browser/browser-tab-manager.ts
deleted file mode 100644
index 2d1910b..0000000
--- a/packages/devtools-extension/src/sw/browser/browser-tab-manager.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/*!
- * V4Fire DevTools
- * https://github.com/V4Fire/DevTools
- *
- * Released under the MIT license
- * https://github.com/V4Fire/DevTools/blob/main/LICENSE
- */
-
-import { browserAPI } from 'core/browser-api';
-
-interface Tab {
-	/**
-	 * Port of the devtools page (V4Fire tab in the browser devtools)
-	 */
-	devtoolsPort: chrome.runtime.Port | null;
-}
-
-/**
- * This class manages communication between the browser tabs and the devtools page
- * by forwarding messages from and to their ports
- */
-export default class BrowserTabManager {
-	/**
-	 * All managed tabs by the extension service worker
-	 */
-	tabs: Map<number, Tab> = new Map();
-
-	/**
-	 * Register a new tab
-	 * @param tabId
-	 */
-	register(tabId: number): Tab {
-		if (!this.tabs.has(tabId)) {
-			this.tabs.set(tabId, {devtoolsPort: null});
-		}
-
-		return this.tabs.get(tabId)!;
-	}
-
-	/**
-	 * Unregister a tab
-	 * @param tabId
-	 */
-	unregister(tabId: number): void {
-		const tab = this.tabs.get(tabId);
-
-		if (tab != null) {
-			this.cleanup(tab);
-		}
-	}
-
-	/**
-	 * Cleanup tab connections
-	 * @param tab
-	 */
-	cleanup(tab: Tab): void {
-		// Perform cleanups: drop all connections, etc.
-		tab.devtoolsPort?.disconnect();
-	}
-
-	/**
-	 * Listen for incoming connections from devtools or the active tab
-	 */
-	listen(): void {
-		browserAPI.runtime.onConnect.addListener((port) => {
-			// Connection from devtools page
-			if (/^\d+$/.test(port.name)) {
-				// DevTools page port doesn't have tab id specified because its sender is the extension
-				// so the tab id is encoded as the name of the port
-				const
-					tabId = Number(port.name),
-					tab = this.register(tabId);
-
-				// eslint-disable-next-line no-console
-				console.log('New connection from devtools, tabId:', tabId);
-
-				tab.devtoolsPort = port;
-			}
-
-			// TODO: Handle connection from content scripts
-		});
-	}
-}
diff --git a/packages/devtools-extension/src/sw/browser/tab-manager/helpers/connect-tab-ports.ts b/packages/devtools-extension/src/sw/browser/tab-manager/helpers/connect-tab-ports.ts
new file mode 100644
index 0000000..58778b0
--- /dev/null
+++ b/packages/devtools-extension/src/sw/browser/tab-manager/helpers/connect-tab-ports.ts
@@ -0,0 +1,63 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import type { Tab } from 'sw/browser/tab-manager/interface';
+
+/**
+ * Enables message proxy between devtools and proxy port
+ *
+ * @param tab
+ * @throws {Error} - in case ports are already connected
+ */
+export default function connectTabPorts(tab: Tab): void {
+	const devtoolsPort = tab.ports.devtools;
+	const proxyPort = tab.ports.proxy;
+
+	if (devtoolsPort == null || proxyPort == null) {
+		return;
+	}
+
+	if (tab.disconnect != null) {
+		throw new Error(
+			`Attempted to connect already connected ports for tab with id ${tab.id}`
+		);
+	}
+
+	const
+		devtoolsPortMessageListener = createPortMessageListener(proxyPort),
+		proxyPortMessageListener = createPortMessageListener(devtoolsPort);
+
+	const disconnectListener = () => {
+		devtoolsPort.onMessage.removeListener(devtoolsPortMessageListener);
+		proxyPort.onMessage.removeListener(proxyPortMessageListener);
+
+		// We handle disconnect() calls manually, based on each specific case
+		// No need to disconnect other port here
+		tab.disconnect = null;
+	};
+
+	function createPortMessageListener(portOut: chrome.runtime.Port) {
+		return (message: unknown) => {
+			try {
+				portOut.postMessage(message);
+			} catch (e) {
+				stderr(new Error(`Broken pipe ${tab.id}`, {cause: e}));
+
+				disconnectListener();
+			}
+		};
+	}
+
+	tab.disconnect = disconnectListener;
+
+	devtoolsPort.onMessage.addListener(devtoolsPortMessageListener);
+	proxyPort.onMessage.addListener(proxyPortMessageListener);
+
+	devtoolsPort.onDisconnect.addListener(disconnectListener);
+	proxyPort.onDisconnect.addListener(disconnectListener);
+}
diff --git a/packages/devtools-extension/src/sw/browser/tab-manager/helpers/handle-port-disconnect.ts b/packages/devtools-extension/src/sw/browser/tab-manager/helpers/handle-port-disconnect.ts
new file mode 100644
index 0000000..15cc5e9
--- /dev/null
+++ b/packages/devtools-extension/src/sw/browser/tab-manager/helpers/handle-port-disconnect.ts
@@ -0,0 +1,31 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import type { Tab } from 'sw/browser/tab-manager/interface';
+
+/**
+ * Adds listener for port's disconnect event
+ *
+ * @param tab
+ * @param portKey
+ */
+export default function handlePortDisconnect(
+	tab: Tab,
+	portKey: keyof Tab['ports']
+): void {
+	const port = tab.ports[portKey];
+
+	// In case proxy port was disconnected from the other end, from content script
+	// This can happen if content script was detached, when user does in-tab navigation
+	// This listener should never be called when we call port.disconnect() from this service worker
+	port?.onDisconnect.addListener(() => {
+		tab.disconnect?.();
+
+		tab.ports[portKey] = null;
+	});
+}
diff --git a/packages/devtools-extension/src/sw/browser/tab-manager/helpers/index.ts b/packages/devtools-extension/src/sw/browser/tab-manager/helpers/index.ts
new file mode 100644
index 0000000..0440a35
--- /dev/null
+++ b/packages/devtools-extension/src/sw/browser/tab-manager/helpers/index.ts
@@ -0,0 +1,11 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+export { default as handlePortDisconnect } from 'sw/browser/tab-manager/helpers/handle-port-disconnect';
+export { default as connectTabPorts } from 'sw/browser/tab-manager/helpers/connect-tab-ports';
+
diff --git a/packages/devtools-extension/src/sw/browser/tab-manager/index.ts b/packages/devtools-extension/src/sw/browser/tab-manager/index.ts
new file mode 100644
index 0000000..eaeb43a
--- /dev/null
+++ b/packages/devtools-extension/src/sw/browser/tab-manager/index.ts
@@ -0,0 +1,119 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import { browserAPI } from 'core/browser-api';
+
+import type { Tab } from 'sw/browser/tab-manager/interface';
+
+import {
+
+	handlePortDisconnect,
+	connectTabPorts
+
+} from 'sw/browser/tab-manager/helpers';
+
+/**
+ * This class manages communication between the browser tabs and the devtools page
+ * by forwarding messages from and to their ports
+ */
+export default class BrowserTabManager {
+	/**
+	 * All managed tabs by the extension service worker
+	 */
+	tabs: Map<number, Tab> = new Map();
+
+	/**
+	 * Register a new tab
+	 * @param tabId
+	 */
+	register(tabId: number): Tab {
+		if (!this.tabs.has(tabId)) {
+			this.tabs.set(tabId, {
+				id: tabId,
+				ports: {
+					devtools: null,
+					proxy: null
+				},
+				disconnect: null
+			});
+		}
+
+		return this.tabs.get(tabId)!;
+	}
+
+	/**
+	 * Unregister a tab
+	 * @param tabId
+	 */
+	unregister(tabId: number): void {
+		const tab = this.tabs.get(tabId);
+
+		if (tab != null) {
+			this.cleanup(tab);
+		}
+	}
+
+	/**
+	 * Cleanup tab connections
+	 * @param tab
+	 */
+	cleanup(tab: Tab): void {
+		// Perform cleanups: drop all connections, etc.
+		tab.ports.devtools?.disconnect();
+		tab.ports.proxy?.disconnect();
+	}
+
+	/**
+	 * Listen for incoming connections from devtools or the active tab
+	 */
+	listen(): void {
+		browserAPI.runtime.onConnect.addListener((port) => {
+			let tab: Tab | null = null;
+
+			// Connection from devtools page
+			if (/^\d+$/.test(port.name)) {
+				// DevTools page port doesn't have tab id specified
+				// because it's sender is the extension so the tab id is encoded as the name of the port
+				const tabId = Number(port.name);
+
+				tab = this.register(tabId);
+
+				// eslint-disable-next-line no-console
+				console.log('New connection from devtools, tabId:', tabId);
+
+				tab.ports.devtools = port;
+				handlePortDisconnect(tab, 'devtools');
+
+			// Connection from inspected window.
+			// Tab might not be present for restricted pages in Firefox.
+			} else if (port.name === 'proxy' && port.sender?.tab?.id != null) {
+				const tabId = port.sender.tab.id;
+
+				tab = this.register(tabId);
+
+				// eslint-disable-next-line no-console
+				console.log('New connection from inspected window, tabId:', tabId);
+
+				if (tab.ports.proxy != null) {
+
+					// eslint-disable-next-line no-console
+					console.log('Reset previous proxy connection');
+					tab.disconnect?.();
+					tab.ports.proxy.disconnect();
+				}
+
+				tab.ports.proxy = port;
+				handlePortDisconnect(tab, 'proxy');
+			}
+
+			if (tab != null) {
+				connectTabPorts(tab);
+			}
+		});
+	}
+}
diff --git a/packages/devtools-extension/src/sw/browser/tab-manager/interface.ts b/packages/devtools-extension/src/sw/browser/tab-manager/interface.ts
new file mode 100644
index 0000000..192c5a4
--- /dev/null
+++ b/packages/devtools-extension/src/sw/browser/tab-manager/interface.ts
@@ -0,0 +1,31 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+export interface Tab {
+	/**
+	 * Id of the tab
+	 */
+	id: number;
+
+	ports: {
+		/**
+		 * Port of the devtools page (V4Fire tab in the browser devtools)
+		 */
+		devtools: chrome.runtime.Port | null;
+
+		/**
+		 * Port of the proxy which is injected into the inspected window
+		 */
+		proxy: chrome.runtime.Port | null;
+	};
+
+	/**
+	 * Disconnect callback
+	 */
+	disconnect: (() => void) | null;
+}
diff --git a/packages/devtools-extension/src/sw/index.ts b/packages/devtools-extension/src/sw/index.ts
index 333de0c..cb692fb 100644
--- a/packages/devtools-extension/src/sw/index.ts
+++ b/packages/devtools-extension/src/sw/index.ts
@@ -8,7 +8,7 @@
 
 import 'sw/init/inject-content-scripts';
 
-import BrowserTabManager from 'sw/browser/browser-tab-manager';
+import BrowserTabManager from 'sw/browser/tab-manager';
 import RuntimeMessageHandler from 'sw/browser/runtime-message-handler';
 
 const
diff --git a/yarn.lock b/yarn.lock
index 40c9d96..1a3d15b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2710,8 +2710,8 @@ __metadata:
   linkType: hard
 
 "@v4fire/client@git+https://github.com/V4Fire/Client.git#v4":
-  version: 4.0.0-beta.37
-  resolution: "@v4fire/client@https://github.com/V4Fire/Client.git#commit=1b46a272dfe5592fcdc5696622330fdb3912caf5"
+  version: 4.0.0-beta.45
+  resolution: "@v4fire/client@https://github.com/V4Fire/Client.git#commit=3e73bf79b4e8b9a3c3e183fc44fc38679f295582"
   dependencies:
     "@babel/core": 7.17.5
     "@babel/helpers": 7.17.7
@@ -2778,6 +2778,7 @@ __metadata:
     path-to-regexp: 3.2.0
     portfinder: 1.0.28
     postcss: 8.4.6
+    postcss-discard-comments: 6.0.0
     postcss-loader: 6.2.1
     raw-loader: 4.0.2
     requestidlecallback: 0.3.0
@@ -2795,6 +2796,7 @@ __metadata:
     svgo-loader: 3.0.0
     svgo-sync: 0.5.1
     terser-webpack-plugin: 5.3.1
+    to-string-loader: ^1.2.0
     ts-loader: 9.2.6
     tslib: 2.4.1
     typescript: 4.6.2
@@ -2907,6 +2909,8 @@ __metadata:
       optional: true
     postcss:
       optional: true
+    postcss-discard-comments:
+      optional: true
     postcss-loader:
       optional: true
     raw-loader:
@@ -2935,6 +2939,8 @@ __metadata:
       optional: true
     terser-webpack-plugin:
       optional: true
+    to-string-loader:
+      optional: true
     ts-loader:
       optional: true
     typescript:
@@ -2949,7 +2955,7 @@ __metadata:
       optional: true
     webpack-cli:
       optional: true
-  checksum: ba699367d38b9f7bcd6661eb982a9452fa14f565e323f3b884d191f72d490844b2a1ad755974fdc3cacf4b0974b56a5a22ddfd394ef336d3e0c64d7b943aaf5a
+  checksum: 5801744827a0c3d60c11e75d4bbc18312feff82a07d44d5087e3141b04b7903efa553c464c4e5f957b1b200873b2d9284f57296b4f5b5ea37486dcd8547e3a96
   languageName: node
   linkType: hard
 
@@ -12123,7 +12129,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^1.0.3, loader-utils@npm:^1.1.0":
+"loader-utils@npm:^1.0.0, loader-utils@npm:^1.0.3, loader-utils@npm:^1.1.0":
   version: 1.4.2
   resolution: "loader-utils@npm:1.4.2"
   dependencies:
@@ -14549,6 +14555,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-discard-comments@npm:6.0.0":
+  version: 6.0.0
+  resolution: "postcss-discard-comments@npm:6.0.0"
+  peerDependencies:
+    postcss: ^8.2.15
+  checksum: 9be073707b5ef781c616ddd32ffd98faf14bf8b40027f341d5a4fb7989fa7b017087ad54146a370fe38295b1f2568b9f5522f4e4c1a1d09fe0e01abd9f5ae00d
+  languageName: node
+  linkType: hard
+
 "postcss-discard-comments@npm:^5.1.2":
   version: 5.1.2
   resolution: "postcss-discard-comments@npm:5.1.2"
@@ -17776,6 +17791,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"to-string-loader@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "to-string-loader@npm:1.2.0"
+  dependencies:
+    loader-utils: ^1.0.0
+  checksum: 738d51379aab962c843b0764335b0a1f89f42402b18c1a75d1e2653ef938702a7a6f132cfe7fb888cd14ca2e9a76ed779f9be34ea0a257c500d3f8edde8a1140
+  languageName: node
+  linkType: hard
+
 "to-through@npm:^2.0.0":
   version: 2.0.0
   resolution: "to-through@npm:2.0.0"