diff --git a/projects/f-examples/connections/connection-center/connection-center.component.html b/projects/f-examples/connections/connection-center/connection-center.component.html
new file mode 100644
index 00000000..acf6d054
--- /dev/null
+++ b/projects/f-examples/connections/connection-center/connection-center.component.html
@@ -0,0 +1,24 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas>
+    <f-connection [fReassignDisabled]="true"
+                  fOutputId="1" fInputId="2" fBehavior="fixed" fType="segment">
+      <div fConnectionCenter>
+        Connection Center
+        <mat-form-field appearance="fill" class="f-form-field">
+          <mat-label>Select</mat-label>
+          <mat-select panelClass="f-select-panel" [(value)]="value">
+            @for (option of options; track option) {
+              <mat-option [value]="option">{{ option }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1" fOutputConnectableSide="bottom">
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 400, y: 100 }" fNodeInput fInputId="2" fInputConnectableSide="top">
+      I'm a node
+    </div>
+  </f-canvas>
+</f-flow>
diff --git a/projects/f-examples/connections/connection-center/connection-center.component.scss b/projects/f-examples/connections/connection-center/connection-center.component.scss
new file mode 100644
index 00000000..d341adfd
--- /dev/null
+++ b/projects/f-examples/connections/connection-center/connection-center.component.scss
@@ -0,0 +1,20 @@
+@use "../../flow-common";
+
+::ng-deep connection-center {
+  @include flow-common.connection;
+
+  .f-connection-center {
+    padding: 12px;
+    background: var(--node-background-color);
+    border-radius: var(--node-border-radius);
+    border: 0.2px solid var(--node-border-color);
+  }
+}
+
+.f-node {
+  @include flow-common.node;
+}
+
+.toolbar {
+  @include flow-common.toolbar;
+}
diff --git a/projects/f-examples/connections/connection-center/connection-center.component.ts b/projects/f-examples/connections/connection-center/connection-center.component.ts
new file mode 100644
index 00000000..2f47dfb5
--- /dev/null
+++ b/projects/f-examples/connections/connection-center/connection-center.component.ts
@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FFlowModule } from '@foblex/flow';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatOption } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
+
+@Component({
+  selector: 'connection-center',
+  styleUrls: [
+    '../../_mdc-controls.scss',
+    './connection-center.component.scss'
+  ],
+  templateUrl: './connection-center.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule,
+    MatFormField,
+    MatLabel,
+    MatOption,
+    MatSelect
+  ]
+})
+export class ConnectionCenterComponent {
+
+  protected options: string[] = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5' ];
+
+  protected value: string = 'Option 3';
+
+  @ViewChild(FCanvasComponent, { static: true })
+  protected fCanvas!: FCanvasComponent;
+
+  protected onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}
diff --git a/public/markdown/examples/connection-center.md b/public/markdown/examples/connection-center.md
new file mode 100644
index 00000000..50710693
--- /dev/null
+++ b/public/markdown/examples/connection-center.md
@@ -0,0 +1,21 @@
+# Connection Center
+
+## Description
+
+This page explains the `fConnectionCenter` directive in Foblex Flow for Angular. The `fConnectionCenter` directive allows you to insert any custom content inside a block, which will be positioned relative to the center of the connection line. This is useful for adding labels, icons, or other elements that need to be dynamically displayed at the center of a connection.
+The directive provides flexible styling and positioning, allowing you to fully customize the appearance and behavior of the centered content.
+
+
+## Example
+
+::: ng-component <connection-center></connection-center> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-center/connection-center.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-center/connection-center.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-center/connection-center.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+
+
+
diff --git a/public/markdown/examples/environment.ts b/public/markdown/examples/environment.ts
index 0c3205b9..1649e436 100644
--- a/public/markdown/examples/environment.ts
+++ b/public/markdown/examples/environment.ts
@@ -137,6 +137,10 @@ function createEnvironment(): IDocsEnvironment {
         tag: 'connection-text',
         component: import('../../../projects/f-examples/connections/connection-text/connection-text.component')
       },
+      {
+        tag: 'connection-center',
+        component: import('../../../projects/f-examples/connections/connection-center/connection-center.component')
+      },
       {
         tag: 'custom-connections',
         component: import('../../../projects/f-examples/connections/custom-connections/custom-connections.component')
@@ -528,6 +532,20 @@ function connectionGroup(): INavigationGroup {
           type: 'info'
         }
       },
+      {
+        link: 'connection-center',
+        text: 'Connection Center',
+        description: 'Add centered content to connections with Foblex Flow for Angular',
+        image: './previews/examples/connection-center.light.png',
+        image_dark: './previews/examples/connection-center.dark.png',
+        image_width: 781,
+        image_height: 600,
+        image_type: 'image/png',
+        badge: {
+          text: 'New',
+          type: 'info'
+        }
+      },
       {
         link: 'custom-connections',
         text: 'Custom Connections',
diff --git a/public/previews/examples/connection-center.dark.png b/public/previews/examples/connection-center.dark.png
new file mode 100644
index 00000000..044d1c66
Binary files /dev/null and b/public/previews/examples/connection-center.dark.png differ
diff --git a/public/previews/examples/connection-center.light.png b/public/previews/examples/connection-center.light.png
new file mode 100644
index 00000000..c30c9460
Binary files /dev/null and b/public/previews/examples/connection-center.light.png differ
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 05af20b3..f190b4fa 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,7 @@
 <router-outlet></router-outlet>
-<button class="take-screenshot" (click)="takeScreenshot()">
-  Take Screenshot
-</button>
+<!--<button class="take-screenshot" (click)="takeScreenshot()">-->
+<!--  Take Screenshot-->
+<!--</button>-->
 @defer (when isBrowser) {
   <f-cookie-popup/>
 }