diff --git a/packages/pkg.module.board/Board.tsx b/packages/pkg.module.board/Board.tsx
index ad60c508..bf769724 100644
--- a/packages/pkg.module.board/Board.tsx
+++ b/packages/pkg.module.board/Board.tsx
@@ -1,68 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// components/Whiteboard.tsx
-import React, { useState, useRef, useEffect } from 'react';
-import { Stage } from 'react-konva';
-import Konva from 'konva';
-import CanvasLayer from './CanvasLayer';
-import { ToolType } from './types';
-import { useBoardStore, useUIStore } from './store';
-import { useZoom } from './hooks';
-import { BackgroundLayer } from './components';
-import { ZoomMenu } from './components/ZoomMenu';
-
-export const Board: React.FC = () => {
-  // Выбранный инструмент
-  const [selectedTool, setSelectedTool] = useState<ToolType>('pen');
-
-  const stageRef = useRef<Konva.Stage>(null);
-
-  const { boardElements } = useBoardStore();
-  const { setStagePosition } = useUIStore();
-
-  const boardWidth = window.innerWidth;
-  const boardHeight = window.innerHeight;
-
-  // Пример хоткеев: Escape – переключиться в режим выделения,
-  // Delete – удалить выделенные элементы (реализовать логику выбора)
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        setSelectedTool('select');
-      }
-      if (e.key === 'Delete') {
-        // TODO: удалить выбранные элементы (логика выделения реализуется дополнительно)
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
-  const { handleWheel, handleZoomIn, handleZoomOut, handleResetZoom } = useZoom(stageRef);
-
-  const handleOnWheel = (e: Konva.KonvaEventObject<WheelEvent>) => {
-    setStagePosition(e.currentTarget.position());
-    handleWheel(e);
-  };
-
-  return (
-    <div className="flex h-full w-full flex-col">
-      <div className="relative flex-1 overflow-hidden">
-        <ZoomMenu zoomIn={handleZoomIn} zoomOut={handleZoomOut} resetZoom={handleResetZoom} />
-        <Stage
-          width={boardWidth}
-          height={boardHeight}
-          ref={stageRef}
-          className="bg-gray-0"
-          onWheel={handleOnWheel}
-          onDragEnd={(e) => {
-            setStagePosition(e.currentTarget.position());
-          }}
-          draggable
-        >
-          <BackgroundLayer />
-          <CanvasLayer boardElements={boardElements} selectedTool={selectedTool} />
-        </Stage>
-      </div>
-    </div>
-  );
-};
+import { Canvas } from './Canvas';
+import { StageProvider } from './providers';
+
+export const Board = () => (
+  <StageProvider>
+    <Canvas />
+  </StageProvider>
+);
diff --git a/packages/pkg.module.board/Canvas.tsx b/packages/pkg.module.board/Canvas.tsx
new file mode 100644
index 00000000..a602063e
--- /dev/null
+++ b/packages/pkg.module.board/Canvas.tsx
@@ -0,0 +1,52 @@
+// components/Whiteboard.tsx
+import { Stage } from 'react-konva';
+import { useKeyPress } from 'pkg.utils.client';
+import { useBoardStore } from './store';
+import { useCanvasHandlers, useZoom } from './hooks';
+import { useStage } from './providers';
+import { BackgroundLayer, SelectedElementToolbar, Navbar, ZoomMenu } from './components';
+import { CanvasLayer } from './CanvasLayer';
+
+export const Canvas = () => {
+  const { stageRef } = useStage();
+  const { selectedTool, removeElement, selectedElementId, selectElement } = useBoardStore();
+  const { handleOnWheel, handleMouseUp, handleMouseDown, handleMouseMove, handleDragEnd } =
+    useCanvasHandlers();
+
+  const { handleResetZoom, handleZoomIn, handleZoomOut } = useZoom(stageRef);
+
+  const boardWidth = window.innerWidth;
+  const boardHeight = window.innerHeight;
+
+  useKeyPress('Backspace', () => {
+    if (selectedElementId) {
+      removeElement(selectedElementId);
+      selectElement(null);
+    }
+  });
+
+  return (
+    <div className="flex h-full w-full flex-col">
+      <div className="relative flex-1 overflow-hidden">
+        <ZoomMenu zoomIn={handleZoomIn} zoomOut={handleZoomOut} resetZoom={handleResetZoom} />
+        <Navbar />
+        <SelectedElementToolbar />
+        <Stage
+          width={boardWidth}
+          height={boardHeight}
+          ref={stageRef}
+          className="bg-gray-0"
+          onWheel={handleOnWheel}
+          onDragEnd={handleDragEnd}
+          draggable={selectedTool === 'hand'}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+        >
+          <BackgroundLayer />
+          <CanvasLayer />
+        </Stage>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/pkg.module.board/CanvasLayer.tsx b/packages/pkg.module.board/CanvasLayer.tsx
index 267c9468..0e8b5d80 100644
--- a/packages/pkg.module.board/CanvasLayer.tsx
+++ b/packages/pkg.module.board/CanvasLayer.tsx
@@ -1,185 +1,64 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// components/CanvasLayer.tsx
-import React, { useState } from 'react';
-import { Layer, Line, Rect, Text, Image, Circle } from 'react-konva';
-import useImage from 'use-image';
-import { BoardElement, ToolType } from './types';
+import { memo, useEffect } from 'react';
+import { Layer, Transformer } from 'react-konva';
 import { useBoardStore } from './store';
+import { LineShape } from './components/Shapes';
+import { useStage } from './providers';
+import { useElementHandlers, useIsStageScaling } from './hooks';
 
-interface CanvasLayerProps {
-  boardElements: BoardElement[];
-  selectedTool: ToolType;
-}
+export const CanvasLayer = memo(() => {
+  const { boardElements, selectedElementId, selectedTool, setSelectToolbarPosition } =
+    useBoardStore();
 
-const CanvasLayer: React.FC<CanvasLayerProps> = ({ boardElements, selectedTool }) => {
-  // Для инструмента "ручка" будем сохранять текущую линию до завершения рисования
-  const [newLine, setNewLine] = useState<number[]>([]);
-  const [isDrawing, setIsDrawing] = useState(false);
-  const { addElement, updateElement } = useBoardStore();
+  const { layerRef, transformerRef } = useStage();
+  const { onChangeTransformerPosition } = useElementHandlers();
+  const { isScaling } = useIsStageScaling();
 
-  const handleMouseDown = (e: any) => {
-    if (selectedTool === 'pen') {
-      setIsDrawing(true);
-      const pos = e.target.getStage().getPointerPosition();
-      setNewLine([pos.x, pos.y]);
+  useEffect(() => {
+    if (transformerRef.current && selectedElementId) {
+      const selectedNode = layerRef.current?.findOne(`#${selectedElementId}`);
+      if (selectedNode) {
+        transformerRef.current.nodes([selectedNode]);
+        transformerRef.current.getLayer()?.batchDraw();
+        const box = transformerRef.current.getClientRect();
+        setSelectToolbarPosition({
+          x: box.x,
+          y: box.y,
+        });
+      } else {
+        transformerRef.current.nodes([]);
+      }
+    } else {
+      transformerRef.current?.nodes([]);
     }
-    // TODO: обработка других инструментов (например, создание стикера, текста и пр.)
-  };
+  }, [layerRef, selectedElementId, setSelectToolbarPosition, transformerRef]);
 
-  const handleMouseMove = (e: any) => {
-    if (!isDrawing || selectedTool !== 'pen') return;
-    const pos = e.target.getStage().getPointerPosition();
-    setNewLine((prev) => [...prev, pos.x, pos.y]);
-  };
-
-  const handleMouseUp = () => {
-    if (selectedTool === 'pen' && isDrawing) {
-      // Добавляем новый элемент линии
-      const id = new Date().getTime().toString();
-      addElement({
-        id,
-        type: 'line',
-        points: newLine,
-        stroke: '#000000', // можно добавить выбор цвета
-        strokeWidth: 2,
-        opacity: 1,
-      });
-      setNewLine([]);
-      setIsDrawing(false);
+  useEffect(() => {
+    if (!isScaling && selectedElementId) {
+      onChangeTransformerPosition();
     }
-  };
+  }, [isScaling, selectedElementId, onChangeTransformerPosition]);
 
   return (
-    <Layer onMouseDown={handleMouseDown} onMousemove={handleMouseMove} onMouseup={handleMouseUp}>
-      {/* Отрисовка сохранённых элементов доски */}
-      {boardElements.map((el) => {
-        switch (el.type) {
-          case 'line':
-            return (
-              <Line
-                key={el.id}
-                points={el.points!}
-                stroke={el.stroke}
-                strokeWidth={el.strokeWidth}
-                opacity={el.opacity}
-                lineCap="round"
-                lineJoin="round"
-                draggable
-                onDragEnd={() => {
-                  // Можно обновлять положение линии, если требуется
-                  // updateElement(el.id, { ... });
-                }}
-              />
-            );
-          case 'rectangle':
-            return (
-              <Rect
-                key={el.id}
-                x={el.x}
-                y={el.y}
-                width={el.width}
-                height={el.height}
-                stroke={el.stroke}
-                fill={el.fill}
-                draggable
-                onDragEnd={(e) => {
-                  updateElement(el.id, { x: e.target.x(), y: e.target.y() });
-                }}
-              />
-            );
-          case 'circle':
-            return (
-              <Circle
-                key={el.id}
-                x={el.x}
-                y={el.y}
-                radius={el.radius}
-                stroke={el.stroke}
-                fill={el.fill}
-                draggable
-                onDragEnd={(e) => {
-                  updateElement(el.id, { x: e.target.x(), y: e.target.y() });
-                }}
-              />
-            );
-          case 'text':
-            return (
-              <Text
-                key={el.id}
-                x={el.x}
-                y={el.y}
-                text={el.text}
-                fontSize={el.fontSize}
-                fontFamily={el.fontFamily}
-                fill={el.fill}
-                draggable
-                onDragEnd={(e) => {
-                  updateElement(el.id, { x: e.target.x(), y: e.target.y() });
-                }}
-              />
-            );
-          case 'sticker':
-            return (
-              <React.Fragment key={el.id}>
-                <Rect
-                  x={el.x}
-                  y={el.y}
-                  width={el.width}
-                  height={el.height}
-                  fill={el.backgroundColor}
-                  stroke="black"
-                  draggable
-                  onDragEnd={(e) => {
-                    updateElement(el.id, { x: e.target.x(), y: e.target.y() });
-                  }}
-                />
-                <Text
-                  x={el.x! + 10}
-                  y={el.y! + 10}
-                  text={el.text}
-                  fontSize={el.fontSize}
-                  fontFamily={el.fontFamily}
-                  fill={el.textColor}
-                  draggable
-                />
-              </React.Fragment>
-            );
-          case 'image':
-            return <BoardImage key={el.id} el={el} updateElement={updateElement} />;
-          default:
-            return null;
-        }
-      })}
-
-      {/* Отрисовка временной линии при рисовании */}
-      {isDrawing && selectedTool === 'pen' && (
-        <Line points={newLine} stroke="#000000" strokeWidth={2} lineCap="round" lineJoin="round" />
+    <Layer ref={layerRef}>
+      {boardElements.map((element) =>
+        element.type === 'line' ? <LineShape key={element.id} element={element} /> : null,
+      )}
+      {selectedElementId && selectedTool === 'select' && (
+        <Transformer
+          ref={transformerRef}
+          rotateEnabled={false}
+          anchorCornerRadius={8}
+          anchorStroke="#070707"
+          borderStroke="#070707"
+          borderDash={[5, 5]}
+          padding={8}
+          enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
+          onTransform={onChangeTransformerPosition}
+          onDragMove={onChangeTransformerPosition}
+        />
       )}
     </Layer>
   );
-};
-
-export default CanvasLayer;
+});
 
-// Вспомогательный компонент для отрисовки изображений
-interface BoardImageProps {
-  el: BoardElement;
-  updateElement: (id: string, updates: Partial<BoardElement>) => void;
-}
-
-const BoardImage: React.FC<BoardImageProps> = ({ el, updateElement }) => {
-  const [image] = useImage(el.src!);
-  return (
-    <Image
-      image={image}
-      x={el.x}
-      y={el.y}
-      width={el.width}
-      height={el.height}
-      draggable
-      onDragEnd={(e) => {
-        updateElement(el.id, { x: e.target.x(), y: e.target.y() });
-      }}
-    />
-  );
-};
+CanvasLayer.displayName = 'CanvasLayer';
diff --git a/packages/pkg.module.board/components/BackgroundLayer.tsx b/packages/pkg.module.board/components/BackgroundLayer.tsx
index c6c2bcd5..9d115974 100644
--- a/packages/pkg.module.board/components/BackgroundLayer.tsx
+++ b/packages/pkg.module.board/components/BackgroundLayer.tsx
@@ -3,9 +3,9 @@
 import React, { useEffect, useMemo } from 'react';
 import { Layer, Shape } from 'react-konva';
 import { useUIStore } from '../store';
-import { baseDotSize, baseGridStep, minDotSize } from '../const';
+import { gridConfig } from '../utils';
 
-export const BackgroundLayer = () => {
+const BackgroundLayerComponent = () => {
   const { viewport, setViewport, stagePosition, scale } = useUIStore();
 
   useEffect(() => {
@@ -19,6 +19,10 @@ export const BackgroundLayer = () => {
   }, [setViewport]);
 
   const dots = useMemo(() => {
+    if (!viewport) return null;
+
+    const { baseGridStep, baseDotSize, minDotSize } = gridConfig;
+
     const visibleWidth = viewport.width / scale;
     const visibleHeight = viewport.height / scale;
 
@@ -45,7 +49,7 @@ export const BackgroundLayer = () => {
     return (
       <Shape
         sceneFunc={(context) => {
-          context.fillStyle = '#e8e8e8';
+          context.fillStyle = gridConfig.dotFill;
           for (let x = startX; x <= endX; x += gridStep) {
             for (let y = startY; y <= endY; y += gridStep) {
               context.beginPath();
@@ -56,7 +60,9 @@ export const BackgroundLayer = () => {
         }}
       />
     );
-  }, [viewport.width, viewport.height, scale, stagePosition]);
+  }, [viewport, scale, stagePosition.x, stagePosition.y]);
 
   return <Layer listening={false}>{dots}</Layer>;
 };
+
+export const BackgroundLayer = React.memo(BackgroundLayerComponent);
diff --git a/packages/pkg.module.board/components/Navbar.tsx b/packages/pkg.module.board/components/Navbar.tsx
index d383f0f3..8ae2c021 100644
--- a/packages/pkg.module.board/components/Navbar.tsx
+++ b/packages/pkg.module.board/components/Navbar.tsx
@@ -3,18 +3,23 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@xipkg
 import { NavbarAction } from './NavbarAction';
 // import { StickerPopupContent } from './StickerPopupContent';
 import { navBarElements, NavbarElementT } from '../utils/navBarElements';
+import { useBoardStore } from '../store';
+import { ToolType } from '../types';
 // import { StylePopupContent } from './StylePopupContent';
 
 export const Navbar = () => {
   const [isTooltipOpen] = React.useState(false);
+  const { setSelectedTool, selectedTool } = useBoardStore();
 
-  const resetStyles = () => {};
+  // const resetStyles = () => {};
 
-  // const hanleTool = () => {};
+  const handleSelectTool = (toolName: ToolType) => {
+    setSelectedTool(toolName);
+  };
 
   return (
     <div className="pointer-events-none absolute inset-0">
-      <div className="absolute bottom-3 left-0 right-0 z-30 flex w-full items-center justify-center">
+      <div className="absolute bottom-4 left-0 right-0 z-30 flex w-full items-center justify-center">
         <div className="relative z-30 flex gap-7">
           <div className="border-gray-10 bg-gray-0 absolute -left-[115px] z-30 flex rounded-xl border p-1">
             <NavbarAction />
@@ -22,8 +27,7 @@ export const Navbar = () => {
           <div className="border-gray-10 bg-gray-0 mx-auto flex gap-10 rounded-xl border">
             <div className="flex gap-2 p-1">
               {navBarElements.map((item: NavbarElementT) => {
-                // const isActive = editor.getCurrentToolId() === item.action;
-                const isActive = true;
+                const isActive = item.action === selectedTool;
                 return (
                   <TooltipProvider key={item.action}>
                     <Tooltip open={item?.hasAToolTip && isTooltipOpen}>
@@ -34,7 +38,7 @@ export const Navbar = () => {
                             className={`pointer-events-auto flex h-6 w-6 items-center justify-center rounded-lg lg:h-8 lg:w-8 ${isActive ? 'bg-brand-0' : 'bg-gray-0'}`}
                             data-isactive={isActive}
                             onClick={() => {
-                              resetStyles();
+                              handleSelectTool(item.action as ToolType);
                             }}
                           >
                             {item.icon ? item.icon : item.title}
@@ -43,11 +47,11 @@ export const Navbar = () => {
                         <TooltipContent className="border-gray-10 bg-gray-0 mb-1 flex gap-10 rounded-xl border p-1 shadow-none">
                           {/* {editor.getCurrentToolId() === 'sticker' && (
                             <StickerPopupContent menuPopupContent={item?.menuPopupContent || []} />
-                          )}
-                          {editor.getCurrentToolId() === 'draw' && (
+                          )} */}
+                          {/* {selectedTool === 'pen' && (
                             <StylePopupContent menuPopupContent={item?.menuPopupContent || []} />
                           )} */}
-                          1
+                          {item.title}
                         </TooltipContent>
                       </div>
                     </Tooltip>
diff --git a/packages/pkg.module.board/components/NavbarAction.tsx b/packages/pkg.module.board/components/NavbarAction.tsx
index c078845a..1e88b098 100644
--- a/packages/pkg.module.board/components/NavbarAction.tsx
+++ b/packages/pkg.module.board/components/NavbarAction.tsx
@@ -1,8 +1,6 @@
 import { Undo, Redo } from '@xipkg/icons';
 
 export const NavbarAction = () => {
-  console.log('NavbarAction');
-
   const canUndo = false;
   const canRedo = false;
   return (
diff --git a/packages/pkg.module.board/components/SelectedElementToolbar.tsx b/packages/pkg.module.board/components/SelectedElementToolbar.tsx
new file mode 100644
index 00000000..4c4c3300
--- /dev/null
+++ b/packages/pkg.module.board/components/SelectedElementToolbar.tsx
@@ -0,0 +1,46 @@
+import { Button } from '@xipkg/button';
+import { Trash, Copy, MoreVert } from '@xipkg/icons';
+import { useBoardStore } from '../store';
+import { useIsStageScaling } from '../hooks';
+
+export const SelectedElementToolbar = () => {
+  const { selectToolbarPosition, selectedTool, selectedElementId, removeElement, selectElement } =
+    useBoardStore();
+
+  const { isScaling } = useIsStageScaling();
+
+  if (!selectedElementId || selectedTool !== 'select') {
+    return null;
+  }
+
+  return (
+    <div
+      className="border-gray-10 bg-gray-0 z-400 absolute z-50 flex gap-2 rounded-xl border p-1"
+      style={{
+        left: selectToolbarPosition.x,
+        top: selectToolbarPosition.y,
+        transform: 'translate(0, -100%)',
+        opacity: isScaling ? 0 : 1,
+        visibility: isScaling ? 'hidden' : 'visible',
+      }}
+    >
+      <Button
+        variant="ghost"
+        size="s"
+        className="p-1"
+        onClick={() => {
+          removeElement(selectedElementId!);
+          selectElement(null);
+        }}
+      >
+        <Trash />
+      </Button>
+      <Button variant="ghost" size="s" className="p-1">
+        <Copy />
+      </Button>
+      <Button variant="ghost" size="s" className="p-1">
+        <MoreVert />
+      </Button>
+    </div>
+  );
+};
diff --git a/packages/pkg.module.board/components/Shapes/LineShape.tsx b/packages/pkg.module.board/components/Shapes/LineShape.tsx
new file mode 100644
index 00000000..9fd2fa80
--- /dev/null
+++ b/packages/pkg.module.board/components/Shapes/LineShape.tsx
@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { Line } from 'react-konva';
+import { useBoardStore, useUIStore } from '../../store';
+import { BoardElement } from '../../types';
+import { useElementHandlers } from '../../hooks';
+
+export const LineShape = memo(({ element }: { element: BoardElement }) => {
+  const { selectedElementId } = useBoardStore();
+  const { handleSelect, handleDragEnd } = useElementHandlers();
+  const { scale } = useUIStore();
+
+  const hitStrokeWidth = Math.max(20, Math.min(40, 20 / scale));
+
+  return (
+    <Line
+      hitStrokeWidth={hitStrokeWidth}
+      id={element.id}
+      tension={0.5}
+      points={element.points}
+      stroke={element.stroke}
+      strokeWidth={element.strokeWidth}
+      lineJoin="round"
+      lineCap="round"
+      onClick={(e) => handleSelect(e, element.id)}
+      draggable={selectedElementId === element.id}
+      onDragEnd={(e) => handleDragEnd(e, element)}
+    />
+  );
+});
+
+LineShape.displayName = 'LineShape';
diff --git a/packages/pkg.module.board/components/Shapes/index.ts b/packages/pkg.module.board/components/Shapes/index.ts
new file mode 100644
index 00000000..3d2a6b12
--- /dev/null
+++ b/packages/pkg.module.board/components/Shapes/index.ts
@@ -0,0 +1 @@
+export { LineShape } from './LineShape';
diff --git a/packages/pkg.module.board/components/ZoomMenu.tsx b/packages/pkg.module.board/components/ZoomMenu.tsx
index bae665c5..228071aa 100644
--- a/packages/pkg.module.board/components/ZoomMenu.tsx
+++ b/packages/pkg.module.board/components/ZoomMenu.tsx
@@ -13,24 +13,23 @@ export const ZoomMenu = ({ zoomIn, zoomOut, resetZoom }: ZoomMenuPropsT) => {
 
   return (
     <div className="absolute bottom-4 right-4 z-30">
-      <div className="bg-gray-0 border-gray-10 flex items-center justify-center gap-2 rounded-2xl border p-1">
+      <div className="bg-gray-0 border-gray-10 flex items-center justify-center gap-2 rounded-xl border p-1 lg:rounded-2xl">
         <Button
-          className="hover:bg-brand-0 pointer-events-auto flex h-8 w-8 items-center justify-center rounded-xl p-0 focus:bg-transparent"
+          className="hover:bg-brand-0 pointer-events-auto flex h-6 w-6 items-center justify-center rounded-lg p-0 focus:bg-transparent lg:h-8 lg:w-8 lg:rounded-xl"
           variant="ghost"
           onClick={() => zoomOut()}
         >
           <Minus className="h-4 w-4 fill-gray-100 lg:h-6 lg:w-6" />
         </Button>
         <Button
-          className="min-w-[60px] items-center justify-center px-2 py-1 hover:bg-transparent focus:bg-transparent active:bg-transparent"
+          className="h-6 w-6 min-w-[60px] items-center justify-center px-2 py-1 hover:bg-transparent focus:bg-transparent active:bg-transparent lg:h-8 lg:w-8"
           variant="ghost"
-          size="s"
           onClick={() => resetZoom()}
         >
           {scale < 0.01 ? '< 1%' : `${(scale * 100).toFixed(0)}%`}
         </Button>
         <Button
-          className="hover:bg-brand-0 pointer-events-auto flex h-8 w-8 items-center justify-center rounded-xl p-0 focus:bg-transparent"
+          className="hover:bg-brand-0 pointer-events-auto flex h-6 w-6 items-center justify-center rounded-lg p-0 focus:bg-transparent lg:h-8 lg:w-8 lg:rounded-xl"
           variant="ghost"
           onClick={() => zoomIn()}
         >
diff --git a/packages/pkg.module.board/components/index.ts b/packages/pkg.module.board/components/index.ts
index c143625e..f4c0e720 100644
--- a/packages/pkg.module.board/components/index.ts
+++ b/packages/pkg.module.board/components/index.ts
@@ -1 +1,4 @@
 export { BackgroundLayer } from './BackgroundLayer';
+export { SelectedElementToolbar } from './SelectedElementToolbar';
+export { Navbar } from './Navbar';
+export { ZoomMenu } from './ZoomMenu';
diff --git a/packages/pkg.module.board/const.ts b/packages/pkg.module.board/const.ts
deleted file mode 100644
index b8654b80..00000000
--- a/packages/pkg.module.board/const.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const baseGridStep = 40;
-export const baseDotSize = 2;
-export const minDotSize = 1;
diff --git a/packages/pkg.module.board/hooks/index.ts b/packages/pkg.module.board/hooks/index.ts
index f97987a0..57b8e81b 100644
--- a/packages/pkg.module.board/hooks/index.ts
+++ b/packages/pkg.module.board/hooks/index.ts
@@ -1 +1,4 @@
 export { useZoom } from './useWheelZoom';
+export { useElementHandlers } from './useElementHandlers';
+export { useIsStageScaling } from './useIsStageScaling';
+export { useCanvasHandlers } from './useCanvasHandlers';
diff --git a/packages/pkg.module.board/hooks/useCanvasHandlers.ts b/packages/pkg.module.board/hooks/useCanvasHandlers.ts
new file mode 100644
index 00000000..8cc75df8
--- /dev/null
+++ b/packages/pkg.module.board/hooks/useCanvasHandlers.ts
@@ -0,0 +1,85 @@
+import { useRef } from 'react';
+import Konva from 'konva';
+import { useDebouncedFunction } from '@xipkg/utils';
+import { useBoardStore, useUIStore } from '../store';
+import { useStage } from '../providers';
+import { useZoom } from './useWheelZoom';
+import { BoardElement } from '../types';
+
+export const useCanvasHandlers = () => {
+  const { stageRef, layerRef, getRelativePointerPosition } = useStage();
+  const { addElement, selectedTool, selectElement, updateElement } = useBoardStore();
+  const { setStagePosition } = useUIStore();
+
+  const currentLineId = useRef<string>('');
+  const currentElementRef = useRef<BoardElement | null>(null);
+  const isDrawing = useRef(false);
+
+  const { handleWheel } = useZoom(stageRef);
+
+  const debouncedElementUpdate = useDebouncedFunction(updateElement, 300);
+
+  const handleOnWheel = (e: Konva.KonvaEventObject<WheelEvent>) => {
+    setStagePosition(e.currentTarget.position());
+    handleWheel(e);
+  };
+
+  const handleMouseDown = (e: Konva.KonvaEventObject<MouseEvent>) => {
+    if (selectedTool === 'pen') {
+      isDrawing.current = true;
+      const pos = getRelativePointerPosition();
+      if (!pos) return;
+
+      const newLineId = `line-${Date.now()}`;
+      currentLineId.current = newLineId;
+
+      const newLine = {
+        type: 'line',
+        id: newLineId,
+        points: [pos.x, pos.y],
+        stroke: 'black',
+      } as BoardElement;
+
+      addElement(newLine);
+      currentElementRef.current = newLine;
+      return;
+    }
+
+    const clickedOnEmpty = e.target === e.target.getStage();
+    if (clickedOnEmpty || selectedTool !== 'select') {
+      selectElement(null);
+    }
+  };
+
+  const handleMouseMove = (e: Konva.KonvaEventObject<MouseEvent>) => {
+    if (!isDrawing.current || selectedTool !== 'pen') return;
+
+    const stage = e.target.getStage();
+    const pos = stage?.getRelativePointerPosition();
+    if (!pos) return;
+
+    const layer = layerRef.current;
+
+    if (!layer) return;
+
+    const line = layer.findOne(`#${currentLineId.current}`) as Konva.Line | null;
+
+    if (!line) return;
+
+    const newPoints = [...line.points(), pos.x, pos.y];
+    line.points(newPoints);
+    layer.batchDraw();
+
+    debouncedElementUpdate(currentLineId.current, { points: newPoints });
+  };
+
+  const handleMouseUp = () => {
+    isDrawing.current = false;
+  };
+
+  const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>) => {
+    setStagePosition(e.currentTarget.position());
+  };
+
+  return { handleOnWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleDragEnd };
+};
diff --git a/packages/pkg.module.board/hooks/useElementHandlers.ts b/packages/pkg.module.board/hooks/useElementHandlers.ts
new file mode 100644
index 00000000..134b7fc2
--- /dev/null
+++ b/packages/pkg.module.board/hooks/useElementHandlers.ts
@@ -0,0 +1,47 @@
+import { useCallback, useRef } from 'react';
+import Konva from 'konva';
+import { useBoardStore } from '../store/useBoardStore';
+import { BoardElement } from '../types';
+import { useStage } from '../providers';
+
+export const useElementHandlers = () => {
+  const {
+    selectElement,
+    selectedTool,
+    updateElement,
+    setSelectToolbarPosition,
+    selectedElementId,
+  } = useBoardStore();
+  const { transformerRef } = useStage();
+
+  const throttleUpdate = useRef<number | null>(null);
+
+  const handleSelect = (e: Konva.KonvaEventObject<MouseEvent>, id: string) => {
+    e.cancelBubble = true;
+    if (selectedTool === 'select') {
+      selectElement(id);
+    }
+  };
+
+  const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>, element: BoardElement) => {
+    updateElement(element.id, { x: e.target.x(), y: e.target.y() });
+  };
+
+  const onChangeTransformerPosition = useCallback(() => {
+    if (throttleUpdate.current) {
+      cancelAnimationFrame(throttleUpdate.current);
+    }
+    throttleUpdate.current = requestAnimationFrame(() => {
+      if (transformerRef.current && selectedElementId) {
+        const box = transformerRef.current.getClientRect();
+        setSelectToolbarPosition({ x: box.x, y: box.y });
+      }
+    });
+  }, [selectedElementId, setSelectToolbarPosition, transformerRef]);
+
+  return {
+    handleSelect,
+    handleDragEnd,
+    onChangeTransformerPosition,
+  };
+};
diff --git a/packages/pkg.module.board/hooks/useIsStageScaling.tsx b/packages/pkg.module.board/hooks/useIsStageScaling.tsx
new file mode 100644
index 00000000..a41e2a3e
--- /dev/null
+++ b/packages/pkg.module.board/hooks/useIsStageScaling.tsx
@@ -0,0 +1,21 @@
+import { useEffect, useRef, useState } from 'react';
+import { useUIStore } from '../store';
+
+export const useIsStageScaling = () => {
+  const [isScaling, setIsScaling] = useState(false);
+  const { scale } = useUIStore();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+    setIsScaling(true);
+    timeoutRef.current = setTimeout(() => setIsScaling(false), 280);
+
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [scale]);
+
+  return { isScaling };
+};
diff --git a/packages/pkg.module.board/hooks/useWheelZoom.ts b/packages/pkg.module.board/hooks/useWheelZoom.ts
index 2e8a2017..10a00537 100644
--- a/packages/pkg.module.board/hooks/useWheelZoom.ts
+++ b/packages/pkg.module.board/hooks/useWheelZoom.ts
@@ -1,21 +1,24 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 // hooks/useWheelZoom.ts
 import Konva from 'konva';
 import { useCallback } from 'react';
 import { calculateZoom, defaultZoomConfig } from '../utils';
 import { useUIStore } from '../store';
 import { roundScale, zoomLevels } from '../utils/zoomConfig';
+import { useElementHandlers } from './useElementHandlers';
 
 /**
  * Хук для обработки масштабирования (зума) при помощи колесика мыши/тачпада.
  */
 export const useZoom = (stageRef: React.RefObject<Konva.Stage | null>) => {
   const { setScale, setStagePosition } = useUIStore();
+  const { onChangeTransformerPosition } = useElementHandlers();
 
   const handleWheel = useCallback(
     (e: Konva.KonvaEventObject<WheelEvent>) => {
       e.evt.preventDefault();
 
+      const { baseScaleStep, minScale, maxScale } = defaultZoomConfig;
+
       const stage = stageRef.current;
       if (!stage) return;
 
@@ -30,18 +33,13 @@ export const useZoom = (stageRef: React.RefObject<Konva.Stage | null>) => {
 
       const delta = e.evt.deltaY;
 
-      const baseScaleStep = 0.01;
-
       const adjustedFactor = Math.max(0.1, oldScale * 2);
 
       const scaleStep = baseScaleStep * adjustedFactor;
 
       let newScale = delta > 0 ? oldScale - scaleStep : oldScale + scaleStep;
 
-      newScale = Math.max(
-        defaultZoomConfig.minScale,
-        Math.min(newScale, defaultZoomConfig.maxScale),
-      );
+      newScale = Math.max(minScale, Math.min(newScale, maxScale));
 
       newScale = roundScale(newScale);
       setScale(newScale);
@@ -52,6 +50,7 @@ export const useZoom = (stageRef: React.RefObject<Konva.Stage | null>) => {
         x: pointer.x - mousePointTo.x * newScale,
         y: pointer.y - mousePointTo.y * newScale,
       };
+
       stage.position(newPos);
       stage.batchDraw();
     },
@@ -63,6 +62,8 @@ export const useZoom = (stageRef: React.RefObject<Konva.Stage | null>) => {
       const stage = stageRef.current;
       if (!stage) return;
 
+      const { animationDuration, minScale, maxScale } = defaultZoomConfig;
+
       const oldScale = stage.scaleX();
 
       const uniqueZoomLevels = [...new Set([...zoomLevels, oldScale])].sort((a, b) => a - b);
@@ -81,10 +82,7 @@ export const useZoom = (stageRef: React.RefObject<Konva.Stage | null>) => {
       if (newScale === oldScale) return;
 
       // Ограничиваем масштаб в рамках minScale и maxScale
-      newScale = Math.max(
-        defaultZoomConfig.minScale,
-        Math.min(newScale, defaultZoomConfig.maxScale),
-      );
+      newScale = Math.max(minScale, Math.min(newScale, maxScale));
 
       const result = calculateZoom(stageRef, newScale, null, defaultZoomConfig);
       if (!result) return;
@@ -96,17 +94,22 @@ export const useZoom = (stageRef: React.RefObject<Konva.Stage | null>) => {
         scaleY: finalScale,
         x: newPos.x,
         y: newPos.y,
-        duration: defaultZoomConfig.animationDuration / 1000,
+        duration: animationDuration / 1000,
         easing: Konva.Easings.Linear,
         onUpdate: () => {
           setScale(finalScale);
         },
+        onFinish: () => {
+          setTimeout(() => {
+            onChangeTransformerPosition();
+          }, 50);
+        },
       });
 
       setStagePosition({ x: newPos.x, y: newPos.y });
       stage.batchDraw();
     },
-    [setScale, setStagePosition, stageRef],
+    [stageRef, setStagePosition, setScale, onChangeTransformerPosition],
   );
 
   const handleZoomIn = useCallback(() => handleZoom('in'), [handleZoom]);
@@ -116,6 +119,8 @@ export const useZoom = (stageRef: React.RefObject<Konva.Stage | null>) => {
     const stage = stageRef.current;
     if (!stage) return;
 
+    const { animationDuration } = defaultZoomConfig;
+
     setScale(1);
     setStagePosition({ x: stage.x(), y: stage.y() });
 
@@ -124,12 +129,17 @@ export const useZoom = (stageRef: React.RefObject<Konva.Stage | null>) => {
       scaleY: 1,
       x: stage.x(),
       y: stage.y(),
-      duration: defaultZoomConfig.animationDuration / 1000,
+      duration: animationDuration / 1000,
       easing: Konva.Easings.Linear,
+      onFinish: () => {
+        setTimeout(() => {
+          onChangeTransformerPosition();
+        }, 50);
+      },
     });
 
     stage.batchDraw();
-  }, [stageRef, setScale, setStagePosition]);
+  }, [stageRef, setScale, setStagePosition, onChangeTransformerPosition]);
 
   return { handleWheel, handleZoomIn, handleZoomOut, handleResetZoom };
 };
diff --git a/packages/pkg.module.board/providers/StageProvider.tsx b/packages/pkg.module.board/providers/StageProvider.tsx
new file mode 100644
index 00000000..ab7469d8
--- /dev/null
+++ b/packages/pkg.module.board/providers/StageProvider.tsx
@@ -0,0 +1,52 @@
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  useCallback,
+  type RefObject,
+  useMemo,
+} from 'react';
+import type Konva from 'konva';
+
+type StageContextTypeT = {
+  stageRef: RefObject<Konva.Stage | null>;
+  transformerRef: RefObject<Konva.Transformer | null>;
+  tooltipTransformerRef: RefObject<Konva.Transformer | null>;
+  layerRef: RefObject<Konva.Layer | null>;
+  getRelativePointerPosition: () => { x: number; y: number } | null;
+};
+
+const StageContext = createContext<StageContextTypeT | null>(null);
+
+export const StageProvider = ({ children }: { children: React.ReactNode }) => {
+  const stageRef = useRef<Konva.Stage>(null);
+  const transformerRef = useRef<Konva.Transformer>(null);
+  const tooltipTransformerRef = useRef<Konva.Transformer>(null);
+  const layerRef = useRef<Konva.Layer>(null);
+
+  const getRelativePointerPosition = useCallback(() => {
+    if (!stageRef.current) return null;
+    return stageRef.current.getRelativePointerPosition();
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      stageRef,
+      transformerRef,
+      tooltipTransformerRef,
+      layerRef,
+      getRelativePointerPosition,
+    }),
+    [getRelativePointerPosition],
+  );
+
+  return <StageContext.Provider value={value}>{children}</StageContext.Provider>;
+};
+
+export const useStage = () => {
+  const context = useContext(StageContext);
+  if (!context) {
+    throw new Error('useStage must be used within a StageProvider');
+  }
+  return context;
+};
diff --git a/packages/pkg.module.board/providers/index.ts b/packages/pkg.module.board/providers/index.ts
new file mode 100644
index 00000000..2518d7b2
--- /dev/null
+++ b/packages/pkg.module.board/providers/index.ts
@@ -0,0 +1 @@
+export { useStage, StageProvider } from './StageProvider';
diff --git a/packages/pkg.module.board/store/useBoardStore.ts b/packages/pkg.module.board/store/useBoardStore.ts
index b0f5bffe..dd52609f 100644
--- a/packages/pkg.module.board/store/useBoardStore.ts
+++ b/packages/pkg.module.board/store/useBoardStore.ts
@@ -1,7 +1,7 @@
 // store/useBoardStore.ts
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { BoardElement } from '../types';
+import { BoardElement, ToolType } from '../types';
 
 interface BoardState {
   boardElements: BoardElement[];
@@ -9,6 +9,12 @@ interface BoardState {
   updateElement: (id: string, updates: Partial<BoardElement>) => void;
   removeElement: (id: string) => void;
   clearBoard: () => void;
+  selectedTool: ToolType;
+  setSelectedTool: (tool: ToolType) => void;
+  selectedElementId: string | null;
+  selectElement: (id: string | null) => void;
+  selectToolbarPosition: { x: number; y: number };
+  setSelectToolbarPosition: (position: { x: number; y: number }) => void;
 }
 
 export const useBoardStore = create<BoardState>()(
@@ -28,6 +34,13 @@ export const useBoardStore = create<BoardState>()(
           boardElements: state.boardElements.filter((el) => el.id !== id),
         })),
       clearBoard: () => set(() => ({ boardElements: [] })),
+      selectedTool: 'select',
+      setSelectedTool: (tool: ToolType) => set(() => ({ selectedTool: tool })),
+      selectedElementId: null,
+      selectElement: (id: string | null) => set(() => ({ selectedElementId: id })),
+      selectToolbarPosition: { x: 0, y: 0 },
+      setSelectToolbarPosition: (position: { x: number; y: number }) =>
+        set(() => ({ selectToolbarPosition: position })),
     }),
     { name: 'board-storage' },
   ),
diff --git a/packages/pkg.module.board/types.ts b/packages/pkg.module.board/types.ts
index 61b9c17a..c6e37027 100644
--- a/packages/pkg.module.board/types.ts
+++ b/packages/pkg.module.board/types.ts
@@ -1,5 +1,13 @@
 // types/index.ts
-export type ToolType = 'pen' | 'sticker' | 'text' | 'eraser' | 'shape' | 'image' | 'select';
+export type ToolType =
+  | 'pen'
+  | 'sticker'
+  | 'text'
+  | 'eraser'
+  | 'shape'
+  | 'image'
+  | 'select'
+  | 'hand';
 
 export type ElementType = 'line' | 'rectangle' | 'circle' | 'text' | 'sticker' | 'image';
 
@@ -38,4 +46,5 @@ export interface ZoomConfig {
   maxScale: number;
   scaleBy: number;
   animationDuration: number;
+  baseScaleStep: number;
 }
diff --git a/packages/pkg.module.board/utils/gridConfig.ts b/packages/pkg.module.board/utils/gridConfig.ts
new file mode 100644
index 00000000..f8ff4670
--- /dev/null
+++ b/packages/pkg.module.board/utils/gridConfig.ts
@@ -0,0 +1,6 @@
+export const gridConfig = {
+  baseGridStep: 40,
+  baseDotSize: 2,
+  minDotSize: 1,
+  dotFill: '#e8e8e8',
+};
diff --git a/packages/pkg.module.board/utils/index.ts b/packages/pkg.module.board/utils/index.ts
index 30524cc9..8b6f8368 100644
--- a/packages/pkg.module.board/utils/index.ts
+++ b/packages/pkg.module.board/utils/index.ts
@@ -1,2 +1,3 @@
 export { defaultZoomConfig } from './zoomConfig';
 export { calculateZoom } from './calculateBoardZoom';
+export { gridConfig } from './gridConfig';
diff --git a/packages/pkg.module.board/utils/navBarElements.tsx b/packages/pkg.module.board/utils/navBarElements.tsx
index 03290dbb..d61d29bf 100644
--- a/packages/pkg.module.board/utils/navBarElements.tsx
+++ b/packages/pkg.module.board/utils/navBarElements.tsx
@@ -19,8 +19,8 @@ export const navBarElements: NavbarElementT[] = [
   { action: 'select', title: 'Select', icon: <Cursor size="l" /> },
   { action: 'hand', title: 'Hand', icon: <Hand size="m" /> },
   {
-    action: 'draw',
-    title: 'Draw',
+    action: 'pen',
+    title: 'Pen',
     icon: <Pen size="l" />,
     hasAToolTip: true,
     menuPopupContent: [
diff --git a/packages/pkg.module.board/utils/zoomConfig.ts b/packages/pkg.module.board/utils/zoomConfig.ts
index 98a81b9f..c128fdd0 100644
--- a/packages/pkg.module.board/utils/zoomConfig.ts
+++ b/packages/pkg.module.board/utils/zoomConfig.ts
@@ -5,6 +5,7 @@ export const defaultZoomConfig: ZoomConfig = {
   maxScale: 3,
   scaleBy: 0.05,
   animationDuration: 250,
+  baseScaleStep: 0.01,
 };
 
 export const roundScale = (scale: number) => Math.round(scale * 1000) / 1000;