diff --git a/projects/f-examples/_flow-common.scss b/projects/f-examples/_flow-common.scss
index 50c3e786..8f30cd49 100644
--- a/projects/f-examples/_flow-common.scss
+++ b/projects/f-examples/_flow-common.scss
@@ -114,7 +114,6 @@
 }
 
 @mixin node {
-  width: 100px;
   padding: 4px;
   color: var(--node-color);
   text-align: center;
diff --git a/projects/f-examples/custom-nodes/_mdc-controls.scss b/projects/f-examples/_mdc-controls.scss
similarity index 100%
rename from projects/f-examples/custom-nodes/_mdc-controls.scss
rename to projects/f-examples/_mdc-controls.scss
diff --git a/projects/f-examples/custom-nodes/custom-nodes.component.ts b/projects/f-examples/custom-nodes/custom-nodes.component.ts
index 5beb01b9..5c4e1712 100644
--- a/projects/f-examples/custom-nodes/custom-nodes.component.ts
+++ b/projects/f-examples/custom-nodes/custom-nodes.component.ts
@@ -13,7 +13,7 @@ import { BrowserService } from '@foblex/platform';
 
 @Component({
   selector: 'custom-nodes',
-  styleUrls: [ './custom-nodes.component.scss', './_mdc-controls.scss' ],
+  styleUrls: [ './custom-nodes.component.scss', '../_mdc-controls.scss' ],
   templateUrl: './custom-nodes.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/projects/f-examples/drag-handle/drag-handle.component.html b/projects/f-examples/drag-handle/drag-handle.component.html
new file mode 100644
index 00000000..07dbc881
--- /dev/null
+++ b/projects/f-examples/drag-handle/drag-handle.component.html
@@ -0,0 +1,30 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas fZoom>
+    <div fNode fDragHandle
+         [fNodePosition]="{ x: 24, y: 24 }">
+      Node is the drag handle
+    </div>
+
+    <div fNode
+         [fNodePosition]="{ x: 164, y: 84 }" class="drag-handle-inside">
+      <span fDragHandle class="f-icon f-drag-handle-icon"></span>
+      Only the icon is the drag handle
+    </div>
+
+    <div fNode
+         [fNodePosition]="{ x: 304, y: 24 }" class="drag-handle-outside">
+      <div fDragHandle>
+        <span class="f-icon f-drag-handle-icon"></span>
+      </div>
+      Only the icon is the drag handle
+    </div>
+
+    <div fNode
+         [fNodePosition]="{ x: 150, y: 170 }">
+      Only the image is the drag handle
+      <div fDragHandle>
+        <img src="https://material.angular.io/assets/img/examples/shiba2.jpg">
+      </div>
+    </div>
+  </f-canvas>
+</f-flow>
diff --git a/projects/f-examples/drag-handle/drag-handle.component.scss b/projects/f-examples/drag-handle/drag-handle.component.scss
new file mode 100644
index 00000000..25d5c43b
--- /dev/null
+++ b/projects/f-examples/drag-handle/drag-handle.component.scss
@@ -0,0 +1,51 @@
+@use "../flow-common";
+
+::ng-deep drag-handle {
+  @include flow-common.connection;
+}
+
+.f-node {
+  @include flow-common.node;
+  cursor: default;
+
+  img {
+    display: block;
+    pointer-events: none;
+    width: 150px;
+  }
+}
+
+.f-drag-handle {
+  width: fit-content;
+  cursor: move;
+}
+
+.drag-handle-inside {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 6px;
+}
+
+.f-icon {
+  display: block;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  mask-repeat: no-repeat;
+}
+
+.drag-handle-outside {
+  .f-drag-handle {
+    background-color: var(--node-background-color);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: -50px;
+    padding: 4px;
+    border: 0.5px solid var(--node-border-color);
+    border-radius: var(--node-border-radius);
+  }
+}
+
+
diff --git a/projects/f-examples/drag-handle/drag-handle.component.ts b/projects/f-examples/drag-handle/drag-handle.component.ts
new file mode 100644
index 00000000..5b800bed
--- /dev/null
+++ b/projects/f-examples/drag-handle/drag-handle.component.ts
@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import {
+  FCanvasComponent,
+  FFlowModule
+} from '@foblex/flow';
+import { PointExtensions } from '@foblex/2d';
+
+@Component({
+  selector: 'drag-handle',
+  styleUrls: [ './drag-handle.component.scss' ],
+  templateUrl: './drag-handle.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule,
+  ]
+})
+export class DragHandleComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public onLoaded(): void {
+    this.fCanvas.fitToScreen(PointExtensions.initialize(100, 100), false);
+  }
+}
diff --git a/public/docs/en/examples/drag-handle.md b/public/docs/en/examples/drag-handle.md
new file mode 100644
index 00000000..6044957b
--- /dev/null
+++ b/public/docs/en/examples/drag-handle.md
@@ -0,0 +1,16 @@
+# Drag Handle
+
+## Description
+
+This example showcases how to add a [DragHandle](./docs/f-drag-handle-directive) for nodes, allowing users to move them easily within Angular and Foblex Flow.
+
+## Example
+
+::: ng-component <drag-handle></drag-handle> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-handle/drag-handle.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-handle/drag-handle.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-handle/drag-handle.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
diff --git a/public/docs/en/examples/environment.ts b/public/docs/en/examples/environment.ts
index d05fa47c..10376a5b 100644
--- a/public/docs/en/examples/environment.ts
+++ b/public/docs/en/examples/environment.ts
@@ -36,6 +36,7 @@ function createEnvironment(): IDocsEnvironment {
     },
     components: [
       { tag: 'custom-nodes', component: import('../../../../projects/f-examples/custom-nodes/custom-nodes.component') },
+      { tag: 'drag-handle', component: import('../../../../projects/f-examples/drag-handle/drag-handle.component') },
       { tag: 'draggable-flow', component: import('../../../../projects/f-guides-examples/draggable-flow/draggable-flow.component') },
       { tag: 'vp-flow', component: import('../../../../projects/f-pro-examples/visual-programming/components/flow/vp-flow.component') },
       { tag: 'db-management-flow', component: import('../../../../projects/f-pro-examples/db-management-example/components/flow/db-management-flow.component') },
@@ -76,8 +77,8 @@ function introductionGroup(): INavigationGroup {
       {
         link: 'drag-handle',
         text: 'Drag Handle',
-        image: './previews/examples/custom-nodes.light.png',
-        image_dark: './previews/examples/custom-nodes.dark.png',
+        image: './previews/examples/drag-handle.light.png',
+        image_dark: './previews/examples/drag-handle.dark.png',
         description: 'This example showcases how to create a draggable handle for nodes, allowing users to move them easily within Angular and Foblex Flow.',
       },
       {
diff --git a/public/previews/examples/drag-handle.dark.png b/public/previews/examples/drag-handle.dark.png
new file mode 100644
index 00000000..de34d5b2
Binary files /dev/null and b/public/previews/examples/drag-handle.dark.png differ
diff --git a/public/previews/examples/drag-handle.light.png b/public/previews/examples/drag-handle.light.png
new file mode 100644
index 00000000..42adec7e
Binary files /dev/null and b/public/previews/examples/drag-handle.light.png differ