diff --git a/apps/conv-learning-manager/src/app/app.module.ts b/apps/conv-learning-manager/src/app/app.module.ts
index 3e50e0f3c7..4ccc25bc48 100644
--- a/apps/conv-learning-manager/src/app/app.module.ts
+++ b/apps/conv-learning-manager/src/app/app.module.ts
@@ -17,7 +17,6 @@ import { NgFireModule } from '@ngfi/angular';
 import { MultiLangModule } from '@ngfi/multi-lang';
 
 import { GooglePlaceModule } from 'ngx-google-places-autocomplete';
-import { AgmCoreModule } from '@agm/core';
 
 import { AuthorisationModule } from '@app/elements/base/authorisation';
 import { AppConfigurationModule } from '@app/elements/base/configuration';
@@ -44,11 +43,6 @@ import { environment } from '../environments/environment';
   imports: [
     BrowserModule, BrowserAnimationsModule,
     GooglePlaceModule,
-
-    AgmCoreModule.forRoot({
-      apiKey:'ADD-YOUR-API-KEY',
-      libraries: ["places"]
-    }),
     
     AngularFireModule.initializeApp(environment.firebase),
     AngularFireAuthModule, AngularFirestoreModule, AngularFireFunctionsModule, NgFireModule,
diff --git a/apps/conv-learning-manager/src/assets/i18n/en.json b/apps/conv-learning-manager/src/assets/i18n/en.json
index 47ca8a6c72..36068ff56f 100644
--- a/apps/conv-learning-manager/src/assets/i18n/en.json
+++ b/apps/conv-learning-manager/src/assets/i18n/en.json
@@ -66,27 +66,32 @@
     },
     "BLOCK": {
       "TITLES": {
-        "IMAGE": "Image: Output",
-        "LOCATION": "Location Block",
-        "NAME": "Name Block",
-        "EMAIL": "Email Block",
-        "PHONE": "Phone Block",
-        "MESSAGE": "Message Block",
+        "IMAGE": "Image",
+        "LOCATION": "Location",
+        "NAME": "Name",
+        "EMAIL": "Email",
+        "PHONE": "Phone",
+        "MESSAGE": "Message",
         "QUESTION": "Question: Buttons",
-        "AUDIO": "Audio Block",
-        "VIDEO": "Video Block",
-        "STICKER": "Sticker Block",
-        "LIST": "List Block",
-        "DOCUMENT": "Document Block"
+        "AUDIO": "Audio",
+        "VIDEO": "Video",
+        "STICKER": "Sticker",
+        "LIST": "List",
+        "DOCUMENT": "Document"
       },
       "PLACEHOLDER": {
+        "ANCHOR": "Start here",
+        "END-ANCHOR": "End-here",
         "CAPTION": "Caption",
-        "IMAGE-LINK": "Image Link",
+        "IMAGE-LINK": "Image Url",
         "NAME": "Name",
         "EMAIL": "Email",
         "PHONE-NUMBER": "Phone",
         "AUDIO-LINK":"Audio Link",
-        "VIDEO-LINK": "Video Link"
+        "VIDEO-LINK": "Video Link",
+        "FILE-NAME": "File name",
+        "DOCUMENT-LINK": "Document link",
+        "STICKER-LINK": "Sticker link"
       }
     },
     "COMPONENTS": {
diff --git a/apps/conv-learning-manager/src/index.html b/apps/conv-learning-manager/src/index.html
index 92f69eebda..b5c5a4a2c9 100644
--- a/apps/conv-learning-manager/src/index.html
+++ b/apps/conv-learning-manager/src/index.html
@@ -42,6 +42,10 @@
 
     <!-- Font Awesome -->
     <script type="text/javascript" defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
+
+    <!-- maps -->
+    <script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>&libraries=places"></script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/index.ts b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/index.ts
index cf0cea3e72..1a8a2086f5 100644
--- a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/index.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/index.ts
@@ -1,2 +1,3 @@
+export * from './lib/components/anchor-block/anchor-block.component';
+export * from './lib/components/end-anchor/end-anchor.component';
 export * from './lib/convs-mgr-stories-blocks-library-anchor-block.module';
-export * from './lib/components/anchor-block/anchor-block.component'
diff --git a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/anchor-block/anchor-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/anchor-block/anchor-block.component.scss
index dbdfb36c32..6b55c215d3 100644
--- a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/anchor-block/anchor-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/anchor-block/anchor-block.component.scss
@@ -1,26 +1,16 @@
 .anchor {
-    margin: 13px;
-    height: 100px;
-    width: 100px;
-    font-weight: bold;
-    border: 1px solid var(--convs-mgr-color-primary-purple);
-    background-color: var(--convs-mgr-color-primary-purple);
-    text-align: center;
-    border-radius: 50%;
-    padding-left: 3px;
-    padding-right: 7px;
+	margin: 13px;
+	padding: 10px;
+	border: none;
+	border-radius: 5px;
+	height: fit-content;
+	width: 100px;
+	background-color: var(--convs-mgr-color-primary-purple);
+	color: white;
+	text-align: center;
+	box-shadow: 2px 4px 8px slategrey;
 }
 
-// .anchor-wrapper {
-//     height: 130px;
-//     width: 130px;
-//     border: 5px solid var(--convs-mgr-color-primary-yellow);
-//     border-radius: 50%;
-//     background-color: none;
-//     padding-left: 3px;
-//     padding-right: 7px;
-//     animation: pulse 1s ease-in-out infinite;
-// }
 input[disabled]::placeholder {
-    color: var(--convs-mgr-color-text-white);
+	color: white;
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/anchor-block/anchor-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/anchor-block/anchor-block.component.ts
index dfaf2eb675..f191f1f900 100644
--- a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/anchor-block/anchor-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/anchor-block/anchor-block.component.ts
@@ -33,9 +33,9 @@ export class AnchorBlockComponent implements OnInit, AfterViewInit
 
   @Input() id: string;
   @Input() jsPlumb: BrowserJsPlumbInstance;
+  
   anchorInput: string;
 
-
   constructor(private _story$$: ActiveStoryStore) { }
 
   ngOnInit(): void
diff --git a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/end-anchor/end-anchor.component.html b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/end-anchor/end-anchor.component.html
new file mode 100644
index 0000000000..5af159807a
--- /dev/null
+++ b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/end-anchor/end-anchor.component.html
@@ -0,0 +1 @@
+<mat-card [id]="endAnchorId" class="anchor"> {{'PAGE-CONTENT.BLOCK.PLACEHOLDER.END-ANCHOR' | transloco}}</mat-card>
diff --git a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/end-anchor/end-anchor.component.scss b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/end-anchor/end-anchor.component.scss
new file mode 100644
index 0000000000..e98d804adc
--- /dev/null
+++ b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/end-anchor/end-anchor.component.scss
@@ -0,0 +1,17 @@
+.anchor {
+	padding: 10px;
+	border: none;
+	border-radius: 5px;
+	height: fit-content;
+	width: 150px;
+	background-color: var(--convs-mgr-color-primary-purple);
+	color: white;
+	text-align: center;
+	box-shadow: 2px 4px 8px slategrey;
+	cursor: pointer;
+	z-index: 10;
+}
+
+input[disabled]::placeholder {
+	color: white;
+}
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/end-anchor/end-anchor.component.ts b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/end-anchor/end-anchor.component.ts
new file mode 100644
index 0000000000..133f12d537
--- /dev/null
+++ b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/components/end-anchor/end-anchor.component.ts
@@ -0,0 +1,39 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+
+import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+
+import { _JsPlumbTargetComponentDecorator } from '../../providers/jsplumb-target-decorator.function';
+
+@Component({
+  selector: 'app-end-anchor',
+  templateUrl: './end-anchor.component.html',
+  styleUrls: ['./end-anchor.component.scss'],
+})
+export class EndAnchorComponent implements OnInit {
+
+  @Input() id: string;
+  @Input() jsPlumb: BrowserJsPlumbInstance;
+  
+  endAnchorId: string = 'story-end-anchor';
+
+  constructor() { }
+
+  ngOnInit(): void {}
+
+  ngAfterViewInit(): void
+  {
+    this._decorateInput();
+  }
+
+
+  private _decorateInput()
+  {
+    let input = document.getElementById(this.endAnchorId) as Element;
+    if (this.jsPlumb)
+    {
+      input = _JsPlumbTargetComponentDecorator(input, this.jsPlumb);
+    }
+  }
+}
diff --git a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/convs-mgr-stories-blocks-library-anchor-block.module.ts b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/convs-mgr-stories-blocks-library-anchor-block.module.ts
index 11e1846737..7d723535d7 100644
--- a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/convs-mgr-stories-blocks-library-anchor-block.module.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/convs-mgr-stories-blocks-library-anchor-block.module.ts
@@ -4,27 +4,34 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { MaterialDesignModule, MaterialBricksModule } from '@iote/bricks-angular';
+import {
+  MaterialDesignModule,
+  MaterialBricksModule,
+} from '@iote/bricks-angular';
 import { MultiLangModule } from '@ngfi/multi-lang';
 
 import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 import { AnchorBlockComponent } from './components/anchor-block/anchor-block.component';
+import { EndAnchorComponent } from './components/end-anchor/end-anchor.component';
 
 @NgModule({
   imports: [
-    CommonModule, 
-    MaterialDesignModule, 
-    FlexLayoutModule, 
+    CommonModule,
+    MaterialDesignModule,
+    FlexLayoutModule,
     MaterialBricksModule,
     MultiLangModule,
-    
+
     ReactiveFormsModule,
 
-    ConvsMgrBlockOptionsModule
+    ConvsMgrBlockOptionsModule,
   ],
 
-  declarations: [AnchorBlockComponent],
-  exports: [AnchorBlockComponent],
+  declarations: [
+    AnchorBlockComponent,
+    EndAnchorComponent,
+  ],
+  exports: [],
 })
 export class ConvsMgrAnchorBlockModule {}
diff --git a/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/providers/jsplumb-target-decorator.function.ts b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/providers/jsplumb-target-decorator.function.ts
new file mode 100644
index 0000000000..3ec9640981
--- /dev/null
+++ b/libs/features/convs-mgr/stories/blocks/library/anchor-block/src/lib/providers/jsplumb-target-decorator.function.ts
@@ -0,0 +1,23 @@
+import { BrowserJsPlumbInstance } from "@jsplumb/browser-ui";
+import { FlowchartConnector } from "@jsplumb/connector-flowchart";
+
+/**
+ * This function adds jsPlumb endpoints to rendered components. 
+ *  The rendering location will depend on the type and configuration of the source.
+ * 
+ * @param sourceElement    - Angular component rendered in the viewport 
+ * @param jsPlumb - Active jsPlumb instance
+ */
+
+export function _JsPlumbTargetComponentDecorator(sourceElement: Element, jsPlumb: BrowserJsPlumbInstance): Element
+{
+  jsPlumb.addEndpoint(sourceElement, {
+    target: true,
+    // Type of endpoint to render
+    endpoint: 'Dot',
+    // Where to position the anchor
+    anchor: "Right",
+    connector : FlowchartConnector.type
+  });  
+  return sourceElement;
+}
diff --git a/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.html b/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.html
index d66661482a..b18961fe50 100644
--- a/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.html
@@ -11,17 +11,18 @@
                 </div>
                 <div *ngIf="isLoadingAudio" class="audio-icon">
                     <i class="fas fa-circle-notch fa-spin"></i>
-       
                 </div>
                 <div *ngIf="!this.block.fileSrc && !isLoadingAudio" class="audio-icon" (click)="audioInput.click()">
                     <i class="fas fa-file-audio" (click)="audioInput.click()"></i>
                 </div>
                 <div>
-                    <input #audioInput (change)="processAudio($event)" type="file" accept=".mp3,.mp4 " class="fileSrc">
+                    <input #audioInput (change)="processAudio($event)" type="file" accept=".mp3" class="fileSrc">
                 </div>
-
             </div>
-            <input type="text " [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.AUDIO-LINK' | transloco " name="audio-link " id="audio-link ">
+            <input type="text" formControlName="fileSrc" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.AUDIO-LINK' | transloco " name="audio-link " id="audio-link ">
+
+            <app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="audioMessageForm"></app-default-option-field>
+
         </form>
     </mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.scss
index c714ba7c73..a616f28c82 100644
--- a/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.scss
@@ -1,74 +1,74 @@
 mat-card {
-    min-width: fit-content;
-    padding: 10px;
+	min-width: 200px;
+	padding: 10px;
 }
 
 mat-card-title {
-    font-size: 1.2rem!important;
-    color: var(--convs-mgr-color-primary-purple);
+	font-size: 1.2rem !important;
+	color: var(--convs-mgr-color-primary-purple);
+}
+
+audio {
+	max-width: 100%;
+}
+
+input {
+	max-width: 100%;
+	height: fit-content !important;
+	padding: 5px 10px;
+	margin-bottom: 5px;
+	border-radius: 3px;
+	caret-color: var(--convs-mgr-color-text-black);
+	color: var(--convs-mgr-color-text-black);
+	outline: none;
+	border: 1px solid var(--convs-mgr-color-text-black);
 }
 
 .fileSrc {
-    display: none;
+	display: none;
 }
 
 .svg-inline--fa.fa-w-12 {
-    width: 30px;
-    border-color: var( --convs-mgr-color-primary-white) !important;
-    border-radius: 15px;
-    background-color: var(--convs-mgr-color-primary-white) !important;
+	width: 30px;
+	border-color: var(--convs-mgr-color-primary-white) !important;
+	border-radius: 15px;
+	background-color: var(--convs-mgr-color-primary-white) !important;
 }
 
 .audio-icon {
-    text-align: center;
-    color: var(--convs-mgr-color-primary-purple) !important;
-    width: 200px;
-    height: 100px;
-    background-color: var(--convs-mgr-color-primary-white) !important;
-    opacity: 1;
-    .fa-file-audio{
-        color: var(--convs-mgr-color-primary-purple) !important;
-        border: none;
-    }
-    .fa-spin{
-        color: var(--convs-mgr-color-primary-purple) !important;
-        border: none;
-    }
+	text-align: center;
+	color: var(--convs-mgr-color-primary-purple) !important;
+	width: 200px;
+	height: 100px;
+	background-color: var(--convs-mgr-color-primary-white) !important;
+	opacity: 1;
+
+	.fa-file-audio {
+		color: var(--convs-mgr-color-primary-purple) !important;
+		border: none;
+	}
+
+	.fa-spin {
+		color: var(--convs-mgr-color-primary-purple) !important;
+		border: none;
+	}
 }
-.audio_bg{
-    margin: 5px 0;
-    width: 210px;
-    border-radius: 4px;
-    border: 2px solid var(--convs-mgr-color-primary-purple);
+
+.audio_bg {
+	margin: 5px 0;
+	width: 210px;
+	border-radius: 4px;
+	border: 2px solid var(--convs-mgr-color-primary-purple);
 }
 
 .svg-inline--fa {
-    height: 40px;
-    margin-top: 13%;
-    overflow: hidden;
+	height: 40px;
+	margin-top: 13%;
+	overflow: hidden;
 }
 
 .svg-inline--fa.fa-w-16 {
-    width: 40px;
-    height: 40px;
-    color: var(--convs-mgr-color-primary-white) !important;
-}
-
-input{
-    min-width: 91% !important;
-    height: 28px;
-    padding: 5px 5px ;
-    margin: 7px 0;
-    border-radius: 5px;
-    background-color: var(--convs-mgr-color-pop-tint);
-    border: 2px solid var(--convs-mgr-color-primary-black); 
-    &::placeholder {
-      color: var(--convs-mgr-color-primary-black);
-    }
-  }
-  input[type=text] {
-    margin: 5px 0;
-    border-radius: 4px;
-    border: 1px solid var(--convs-mgr-color-primary-black); 
-    opacity: 1;
-  }
\ No newline at end of file
+	width: 40px;
+	height: 40px;
+	color: var(--convs-mgr-color-primary-white) !important;
+}
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.ts
index ac7856a32b..d10fa52d50 100644
--- a/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/components/audio-block/audio-block.component.ts
@@ -1,13 +1,11 @@
-import {  UploadFileService } from '@app/state/file';
+import { UploadFileService } from '@app/state/file';
 import { Component, OnInit, Input } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 
-import { Logger } from '@iote/bricks-angular';
 import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 
 import { VoiceMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
 
-
 @Component({
   selector: 'app-audio-block',
   templateUrl: './audio-block.component.html',
@@ -16,41 +14,38 @@ import { VoiceMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging
 export class AudioBlockComponent implements OnInit {
 
 
-@Input() id: string;
-@Input() block: VoiceMessageBlock;
-@Input()audioMessageForm: FormGroup;
-@Input() jsPlumb: BrowserJsPlumbInstance;
+  @Input() id: string;
+  @Input() block: VoiceMessageBlock;
+  @Input() audioMessageForm: FormGroup;
+  @Input() jsPlumb: BrowserJsPlumbInstance;
 
-file: File;
-audioLink: string = "";
-audioInputId: string;
-defaultImage: string ="assets/images/lib/block-builder/audio-block-placeholder.png"
-isLoadingAudio: boolean;
+  file: File;
+  audioLink: string = "";
+  audioInputId: string;
+  defaultImage: string = ""
+  isLoadingAudio: boolean;
 
 
-constructor(private _fb: FormBuilder,
-            private _logger: Logger,
-            private _audioUploadService: UploadFileService) { }
+  constructor(private _audioUploadService: UploadFileService
+  ) { }
 
-ngOnInit(): void {
-  this.audioInputId = `aud-${this.id}`
-}
+  ngOnInit(): void {
+    this.audioInputId = `aud-${this.id}`
+  }
 
-async processAudio(event: any) 
-{
-  if (event.target.files && event.target.files[0]) {
-    const reader = new FileReader();
-    reader.onload = (e: any) => this.audioLink = e.target.result;
-    reader.readAsDataURL(event.target.files[0]);
-    this.file = event.target.files[0];
+  async processAudio(event: any) {
+    if (event.target.files && event.target.files[0]) {
+      const reader = new FileReader();
+      reader.onload = (e: any) => this.audioLink = e.target.result;
+      reader.readAsDataURL(event.target.files[0]);
+      this.file = event.target.files[0];
+      this.isLoadingAudio = true;
+    } else {
+      this.audioLink = this.defaultImage;
+    }
     this.isLoadingAudio = true;
-  } else {
-    this.audioLink  = this.defaultImage;
+    //Step 1 - Create the file path that will be in firebase storage
+    const audioFilePath = `audios/${this.file.name}_${new Date().getTime()}`;
+    (await this._audioUploadService.uploadFile(this.file, this.block, audioFilePath)).subscribe();
   }
-  this.isLoadingAudio = true;
-  //Step 1 - Create the file path that will be in firebase storage
-  const audioFilePath = `audios/${this.file.name}_${new Date().getTime()}`;
-  (await this._audioUploadService.uploadFile(this.file, this.block, audioFilePath)).subscribe();
-
-}
 }
diff --git a/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/convs-mgr-audio-message-block.module.ts b/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/convs-mgr-audio-message-block.module.ts
index c727676a15..823fa01af6 100644
--- a/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/convs-mgr-audio-message-block.module.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/audio-message-block/src/lib/convs-mgr-audio-message-block.module.ts
@@ -1,19 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import {  HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 
+import { MultiLangModule } from '@ngfi/multi-lang';
+import { FlexLayoutModule, MaterialBricksModule, MaterialDesignModule } from '@iote/bricks-angular';
 
-import {
-  FlexLayoutModule,
-  MaterialBricksModule,
-  MaterialDesignModule,
-} from '@iote/bricks-angular';
-
-import {MultiLangModule}from '@ngfi/multi-lang';
+import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 import { AudioBlockComponent } from './components/audio-block/audio-block.component';
 
+
 @NgModule({
   imports: [
     CommonModule,
@@ -26,9 +23,11 @@ import { AudioBlockComponent } from './components/audio-block/audio-block.compon
     ReactiveFormsModule,
 
     HttpClientModule,
-    ],
+
+    ConvsMgrBlockOptionsModule
+  ],
   declarations: [AudioBlockComponent],
 
   exports: [AudioBlockComponent],
 })
-export class ConvsMgrAudioMessageBlockModule {}
+export class ConvsMgrAudioMessageBlockModule { }
diff --git a/libs/features/convs-mgr/stories/blocks/library/block-options/src/lib/providers/jsplumb-decorator.function.ts b/libs/features/convs-mgr/stories/blocks/library/block-options/src/lib/providers/jsplumb-decorator.function.ts
index 747dcc2595..778922d273 100644
--- a/libs/features/convs-mgr/stories/blocks/library/block-options/src/lib/providers/jsplumb-decorator.function.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/block-options/src/lib/providers/jsplumb-decorator.function.ts
@@ -19,5 +19,6 @@ export function _JsPlumbComponentDecorator(sourceElement: Element, jsPlumb: Brow
     // Where to position the anchor
     anchor: "Right",
     connector : FlowchartConnector.type
-  });  return sourceElement;
+  });  
+  return sourceElement;
 }
diff --git a/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.html b/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.html
index fda2a3035b..65a6ce2ad3 100644
--- a/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.html
@@ -1,23 +1,25 @@
 <mat-card [id]="id" *ngIf="documentMessageForm">
-    <mat-card-content>
-        <form [formGroup]="documentMessageForm" fxLayout="column" fxLayoutALign="start center">
-            <div [id]="docInputId">
+	<mat-card-content>
+		<form [formGroup]="documentMessageForm" fxLayout="column" fxLayoutALign="start center">
+			<div [id]="docInputId" class="audio_bg">
 
-                <div *ngIf="this.block.fileSrc && !isDocLoading" class="doc-icon-uploaded" (click)="docInput.click()">
-                    <i class="fas fa-file-upload"></i>
-                </div>
-                <div *ngIf="isDocLoading" class="doc-icon">
-                    <i class="fas fa-circle-notch fa-spin"></i>
-                </div>
-                <div *ngIf="!this.block.fileSrc && !isDocLoading" class="doc-icon" (click)="docInput.click()">
-                    <i class="far fa-file"></i>
-                </div>
-                <div>
-                    <input (change)="processDocs($event)" id="docFile" accept=".pdf" #docInput type="file" class="fileSrc" />
-                </div>
-            </div>
-            <input type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.FILE-NAME' | transloco" formControlName="message" name="fileName" id="fileName" />
-            <input type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.DOCUMENT-LINK' | transloco " name="document-link" id="document-link" />
-        </form>
-    </mat-card-content>
+				<div *ngIf="this.block.fileSrc && !isDocLoading" class="doc-icon-uploaded" (click)="docInput.click()">
+					<i class="fas fa-file-upload"></i>
+				</div>
+				<div *ngIf="isDocLoading" class="doc-icon">
+					<i class="fas fa-circle-notch fa-spin"></i>
+				</div>
+				<div *ngIf="!this.block.fileSrc && !isDocLoading" class="doc-icon" (click)="docInput.click()">
+					<i class="far fa-file"></i>
+				</div>
+				<div>
+					<input (change)="processDocs($event)" id="docFile" accept=".pdf" #docInput type="file" class="fileSrc" />
+				</div>
+			</div>
+			<input formControlName="message" type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.FILE-NAME' | transloco" />
+			<input formControlName="fileSrc" type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.DOCUMENT-LINK' | transloco "/>
+
+			<app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="documentMessageForm"></app-default-option-field>
+		</form>
+	</mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.scss
index 205c1f95cd..99f517eeca 100644
--- a/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.scss
@@ -1,91 +1,74 @@
-.block {
-    position: relative;
-    cursor: move;
+mat-card {
+	min-width: 200px;
+	padding: 10px;
 }
 
-.avatar-img {
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
+mat-card-title {
+	font-size: 1.2rem !important;
+	color: var(--convs-mgr-color-primary-purple);
 }
 
-.block-title-container {
-    align-items: center;
+doc {
+	max-width: 100%;
 }
 
-.outer:hover {
-    cursor:move;
-}
-
-.fa-file-alt {
-    color: var(--convs-mgr-color-primary-purple)
-}
-
-.block-title {
-    font-weight: 600;
-    font-size: small;
-    margin: 0 0 0 .4em;
-    color: var(--convs-mgr-color-text-black);
-}
-.block-card {
-    border-radius: 10px;
-    padding: 0%;
-}
-
-.icons {
-    cursor: pointer;
-}
-
-.fa-clone {
-    padding-right: 10px;
+input {
+	max-width: 100%;
+	height: fit-content !important;
+	padding: 5px 10px;
+	margin-bottom: 5px;
+	border-radius: 3px;
+	caret-color: var(--convs-mgr-color-text-black);
+	color: var(--convs-mgr-color-text-black);
+	outline: none;
+	border: 1px solid var(--convs-mgr-color-text-black);
 }
 
-.fa-clone, .fa-trash-alt {
-    color: var(--convs-mgr-color-medium-shade);
+.fileSrc {
+	display: none;
 }
 
-.fa-clone:hover, .fa-trash-alt:hover {
-    color: var(--convs-mgr-color-primary-purple);
+.svg-inline--fa.fa-w-12 {
+	width: 30px;
+	border-color: var(--convs-mgr-color-primary-white) !important;
+	border-radius: 15px;
+	background-color: var(--convs-mgr-color-primary-white) !important;
 }
 
-input {
-    margin: 5px 0;
-    width: 180px;
-    height: 30px;
-    border: 1px solid var(--convs-mgr-color-primary-black);
-    border-radius: 10px;
-}
+.doc-icon {
+	text-align: center;
+	color: var(--convs-mgr-color-primary-purple) !important;
+	width: 200px;
+	height: 100px;
+	background-color: var(--convs-mgr-color-primary-white) !important;
+	opacity: 1;
 
-.fileSrc {
-    display: none;
-}
+	.fa-file-doc {
+		color: var(--convs-mgr-color-primary-purple) !important;
+		border: none;
+	}
 
-.file-info {
-    border-radius: 1px solid var(--convs-mgr-color-primary-grey);
+	.fa-spin {
+		color: var(--convs-mgr-color-primary-purple) !important;
+		border: none;
+	}
 }
 
-.image {
-    width: 13em;
-    height: 12em;
-    border-radius: 10px;
+.audio_bg {
+	margin: 5px 0;
+	width: 210px;
+	border-radius: 4px;
+	border: 2px solid var(--convs-mgr-color-primary-purple);
 }
 
-.doc-icon {
-    text-align: center;
-    color: var(--convs-mgr-color-tertiary) !important;
-    width: 180px;
-    height: 90px;
-    background-color: var(--convs-mgr-color-tertiary) !important;
-    border-radius: 5px;
-    opacity: 1;
+.svg-inline--fa {
+	height: 40px;
+	margin-top: 13%;
+	overflow: hidden;
 }
 
-.doc-icon-uploaded {
-    text-align: center;
-    color: var(--convs-mgr-color-primary-white);
-    width: 180px;
-    height: 90px;
-    background-color: var(--convs-mgr-color-tertiary) !important;
-    border-radius: 5px;
-    opacity: 1;
-}
+.svg-inline--fa.fa-w-16 {
+	width: 40px;
+	height: 40px;
+	color: var(--convs-mgr-color-primary-white) !important;
+}
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.ts
index 3022b76e18..2675487bde 100644
--- a/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/document-message-block/src/lib/components/document-block/document-block.component.ts
@@ -1,15 +1,15 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { Logger } from '@iote/bricks-angular';
 import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 
 import { DocumentMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
-import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
-import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
 
 import { UploadFileService } from '@app/state/file';
 
+import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+
 @Component({
   selector: 'app-document-block',
   templateUrl: './document-block.component.html',
@@ -22,45 +22,25 @@ export class DocumentBlockComponent implements OnInit {
   @Input() documentMessageForm: FormGroup;
   @Input() jsPlumb: BrowserJsPlumbInstance;
 
- 
   file: File;
   docInputId: string;
   docName: string = '';
-  defaultLink: string ="assets/images/lib/block-builder/docs-block-placeholder.png";
+  defaultLink: string ="";
   isDocLoading: boolean = false;
   docLink: string =  this.defaultLink;
-
   
   type: StoryBlockTypes;
   documentType = StoryBlockTypes.Document;
 
-  blockFormGroup: FormGroup;
-
- 
-
   constructor(private _docUploadService: UploadFileService)
-              {}
+  { }
 
   ngOnInit(): void 
   {
     this.docInputId = `docs-${this.id}`;
   }
 
-  ngAfterViewInit(): void
-   {
-    if (this.jsPlumb) {
-      this._decorateInput();
-    }
-  }
-
-
-  private _decorateInput()
-   {
-    let input = document.getElementById(this.docInputId) as Element;
-    if (this.jsPlumb) {
-      input = _JsPlumbComponentDecorator(input, this.jsPlumb);
-    }
-  }
+  ngAfterViewInit(): void {}
 
   async processDocs(event: any)
   {   
@@ -77,7 +57,5 @@ export class DocumentBlockComponent implements OnInit {
       //Step 1 - Create the file path that will be in firebase storage
      const docFilePath = `docs/${this.file.name}_${new Date().getTime()}`;
     (await this._docUploadService.uploadFile(this.file, this.block, docFilePath)).subscribe();
-    console.log(this.isDocLoading);
-
   }
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.html b/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.html
index 206108aa59..ebe991540e 100644
--- a/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.html
@@ -1,8 +1,9 @@
 <mat-card [id]="id" *ngIf=" emailMessageForm">
 	<mat-card-content>
 		<form [formGroup]="emailMessageForm" fxLayout="column" fxLayoutALign="start center">
-			<input [id]="emailInputId" matInput name="message" type="text" id="message"
-				placeholder=" {{ 'PAGE-CONTENT.BLOCK.PLACEHOLDER.EMAIL' | transloco }} " />
+			<input [id]="emailInputId" formControlName="message" type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.EMAIL' | transloco" />
+
+			<app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="emailMessageForm"></app-default-option-field>
 		</form>
 	</mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.scss
index e31a2ddfdc..37075c49c1 100644
--- a/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.scss
@@ -1,70 +1,18 @@
 mat-card {
-    min-width: fit-content;
-    padding: 10px;
-}
-
-mat-card-title {
-    font-size: 1.2rem!important;
-    color: var( --convs-mgr-color-primary-purple);
+	min-width: 200px;
+	padding: 10px;
 }
 
 input {
-    margin: 5px 0;
-    width: 210px;
-    height: 32px;
-    border-radius: 10px;
-    border: 1px solid black;
-}
-.block {
-    position: relative;
-    cursor: move;
-}
-
-.avatar-img {
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-}
-
-.block-title-container {
-    align-items: center;
-}
-
-.outer:hover {
-    cursor:move;
-}
-
-.fa-envelope {
-    color: var(--convs-mgr-color-primary-purple)
+	max-width: 100%;
+	margin: 5px 0;
+	border: 1px solid var(--convs-mgr-color-primary-purple);
+	border-radius: 5px;
+	resize: none;
+	padding: 10px;
 }
 
-.block-title {
-    font-weight: 600;
-    font-size: small;
-    margin: 0 0 0 .4em;
-    color: var(--convs-mgr-color-text-black);
-}
-
-.block-card {
-    border-radius: 10px;
-    padding: 0%;
-}
-
-.icons {
-    cursor: pointer;
-}
-
-.fa-clone {
-    padding-right: 10px;
-}
-
-.fa-clone, .fa-trash-alt {
-    color: var(--convs-mgr-color-medium-shade);
-}
-
-.fa-clone:hover, .fa-trash-alt:hover {
-    color: var(--convs-mgr-color-primary-purple);
-}
-.fa-envelope {
-    color: var(--convs-mgr-color-primary-purple);
+input:focus-visible {
+	border: 1px solid var(--convs-mgr-color-primary-purple);
+	outline-color: var(--convs-mgr-color-primary-purple);
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.ts
index 7bfac5c2d4..b70fff8cf3 100644
--- a/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/components/email-block/email-block.component.ts
@@ -1,9 +1,12 @@
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
-import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
+
 import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+
 import { EmailMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
+import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
+
+import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 @Component({
   selector: 'app-email-block',
@@ -24,26 +27,11 @@ export class EmailBlockComponent implements OnInit, AfterViewInit
   type: StoryBlockTypes;
   emailtype = StoryBlockTypes.Email;
 
-
-
   constructor(private _fb: FormBuilder) { }
 
   ngOnInit(): void { 
     this.emailInputId = `email-${this.id}`;
   }
 
-  ngAfterViewInit(): void {
-    if (this.jsPlumb) {
-      this._decorateInput();
-    }
-  }
-  
-
-  private _decorateInput() {
-    let input = document.getElementById(this.emailInputId) as Element;
-    if (this.jsPlumb) {
-      input = _JsPlumbComponentDecorator(input, this.jsPlumb);
-    }
-  }
-
+  ngAfterViewInit(): void {}
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/convs-mgr-email-message-block.module.ts b/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/convs-mgr-email-message-block.module.ts
index 0f9ee53b22..e6ae12ec7b 100644
--- a/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/convs-mgr-email-message-block.module.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/email-message-block/src/lib/convs-mgr-email-message-block.module.ts
@@ -3,14 +3,9 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { MultiLangModule } from '@ngfi/multi-lang';
+import { FlexLayoutModule, MaterialBricksModule, MaterialDesignModule } from '@iote/bricks-angular';
 
-import {
-  FlexLayoutModule,
-  MaterialBricksModule,
-  MaterialDesignModule,
-} from '@iote/bricks-angular';
-
-
+import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 import { EmailBlockComponent } from './components/email-block/email-block.component';
 
@@ -25,6 +20,8 @@ import { EmailBlockComponent } from './components/email-block/email-block.compon
     FormsModule,
     ReactiveFormsModule,
 
+    ConvsMgrBlockOptionsModule
+
   ],
 
   declarations: [EmailBlockComponent],
diff --git a/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.html b/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.html
index 2c13db4595..7b908839ad 100644
--- a/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.html
@@ -3,8 +3,8 @@
         <form [formGroup]="imageMessageForm" fxLayout="column" fxLayoutALign="start center">
             <div [id]="imageInputId">
 
-                <input (change)="processImage($event)" type="file" id="upload" hidden />
-                <label for="upload">
+                <input (change)="processImage($event)" type="file" [id]="imageInputUpload" hidden />
+                <label [for]="imageInputUpload">
                     <div *ngIf="!hasImage; else inputHasImage">
                         <i class="fas fa-image"></i>
                     </div>
@@ -14,10 +14,13 @@
                 </label>
 
             </div>
-            <input type="text" placeholder="{{ 'PAGE-CONTENT.BLOCK.PLACEHOLDER.CAPTION' | transloco}}"
-                formControlName="caption" name="caption" id="caption" />
-            <input type="text" placeholder="{{ 'PAGE-CONTENT.BLOCK.PLACEHOLDER.IMAGE-LINK' | transloco}}"
-                name="image-link" id="image-link" formControlName="imageLink" />
+
+            <app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="imageMessageForm"></app-default-option-field>
+
+            <input type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.CAPTION' | transloco"
+                formControlName="message" id="caption" />
+            <input type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.IMAGE-LINK' | transloco"
+                 id="image-link" formControlName="fileSrc" />
         </form>
     </mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.scss
index 683f039f99..02e8cd9450 100644
--- a/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.scss
@@ -1,6 +1,6 @@
 
 mat-card {
-	min-width: fit-content;
+	min-width: 200px;
 	padding: 10px;
 }
 
@@ -11,8 +11,8 @@ mat-card-title {
 
 label {
 	width: 100%;
-	min-height: 150px;
-	font-size: 3rem;
+	min-height: 100px;
+	font-size: 2rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -22,6 +22,7 @@ label {
 	cursor: pointer;
 	border: solid var(--convs-mgr-color-primary-purple) 1px;
 }
+
 div {
 	margin-bottom: 10px;
 }
@@ -33,23 +34,15 @@ div {
 }
 
 #caption, #image-link {
-	margin: 5px 0;
-	max-width: 100%;
-	height: fit-content;
-	padding: 5px 5px;
-	border: 1px solid var(--convs-mgr-color-primary-black);
-	border-radius: 5px;
-	text-indent: 10px;
-	font-size: 1rem;
-	background-color: rgb(242, 241, 241);
-	font-weight: 400;
-}
-
-.image {
-	width: 13em;
-	height: 12em;
-	border-radius: 10px;
-	border-color: var(--convs-mgr-color-primary-purple)
+  max-width: 100%;
+  height: fit-content!important;
+  padding: 5px 10px;
+	margin-bottom: 5px;
+  border-radius: 3px;
+  caret-color: var(--convs-mgr-color-text-black);
+  color: var(--convs-mgr-color-text-black);
+  outline: none;
+  border: 1px solid var(--convs-mgr-color-text-black);
 }
 
 #imageFile {
diff --git a/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.ts
index cf6c73d623..c9970dfd14 100644
--- a/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/image-message-block/src/lib/components/image-block/image-block.component.ts
@@ -4,13 +4,12 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 
-import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
+import { ImageMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
 
 import { UploadFileService } from '@app/state/file';
-import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
-import { ImageMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
-import { Observable } from 'rxjs';
-import { EventEmitter } from 'stream';
+
+import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 @Component({
   selector: 'app-image-block',
@@ -25,56 +24,43 @@ export class ImageBlockComponent implements OnInit {
   @Input() imageMessageForm: FormGroup;
   @Input() jsPlumb: BrowserJsPlumbInstance;
 
- type: StoryBlockTypes;
+  type: StoryBlockTypes;
   imagetype = StoryBlockTypes.Image;
   blockFormGroup: FormGroup;
 
 
   file: File;
   imageInputId: string;
+  imageInputUpload: string = '';
   imageName: string;
   isLoadingImage: boolean = false;
   imageLink: string;
   hasImage: boolean = false;
-  url:Observable<string>;
 
   constructor(private _imageUploadService: UploadFileService,
-              public domSanitizer: DomSanitizer,
-
-              ) 
-              {
-                this.block = this.block as ImageMessageBlock;
-               }
+              public domSanitizer: DomSanitizer
+  ) 
+  {
+    this.block = this.block as ImageMessageBlock;
+  }
 
   ngOnInit(): void
   {
     this.imageInputId = `img-${this.id}`;
+    this.imageInputUpload = `img-${this.id}-upload`;
 
+    this.checkIfImageExists();
   }
-  @Input() UpdateForm (imageMessageForm:FormGroup){
-    this.block.fileSrc = this.imageMessageForm.value.imageLink;
-    this.block.message = this.imageMessageForm.value.caption;
-    
-  }
-  updateBlockForm(){
-    this.imageMessageForm.patchValue({
-      imageLink: this.block.fileSrc = this.imageMessageForm.value.imageLink,
-      caption: this.block.message = this.imageMessageForm.value.caption,
-      fileSrc: this.getFileNameFromFbUrl(this.block.fileSrc!)
-    });
-    if(this.hasImage){
-    
-      this.imageLink = this.imageMessageForm.value.imageLink
-    }
-    
+  
+  checkIfImageExists(){
+    this.imageLink = this.imageMessageForm.value.fileSrc;
+    this.hasImage = this.imageLink && this.imageLink != '' ? true : false;
   }
+
   getFileNameFromFbUrl(fbUrl: string): string {
     return fbUrl.split('%2F')[1].split("?")[0];
   }
-//  updates() {
-//     this.block.fileSrc = this.imageMessageForm.value.imageLink;
-//     this.block.message = this.imageMessageForm.value.caption;
-//   }
+
   async processImage(event: any) 
   {
     if (event.target.files && event.target.files[0]) {
@@ -89,10 +75,8 @@ export class ImageBlockComponent implements OnInit {
     //Step 1 - Create the file path that will be in firebase storage
     const imgFilePath = `images/${this.file.name}_${new Date().getTime()}`;
     this.isLoadingImage = true;
-    (await this._imageUploadService.uploadFile(this.file, this.block,imgFilePath)).subscribe();
-  
-
 
+    (await this._imageUploadService.uploadFile(this.file, this.block,imgFilePath)).subscribe();
   }
 }
 
diff --git a/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.html b/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.html
index bac20585c4..69a57d42b2 100644
--- a/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.html
@@ -1,23 +1,23 @@
 <mat-card [id]="id" *ngIf="listMessageBlock">
     <mat-card-content>
-        <form [formGroup]="listMessageBlock" fxLayout="column" fxLayoutALign="start center">
-
-            <textarea id="message" name="message" formControlName="message" type="text" rows="3"></textarea>
-
-
-            <div formArrayName="listItems" fxFlexFill>
-                <div *ngFor="let listItem of listItems.controls; let i = index" class="full-width" fxFlexFill>
-                    <span [formGroupName]="i" fxFlex>
-              <app-list-option [jsPlumb]="jsPlumb" [blockFormGroup]="listMessageBlock" [formGroupNameInput]="i"></app-list-option>
+      <form [formGroup]="listMessageBlock" fxLayout="column" fxLayoutALign="start center">
+  
+        <textarea id="message" name="message" formControlName="message" type="text" rows="3"></textarea>
+        
+        <app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="listMessageBlock"></app-default-option-field>
+  
+        <div formArrayName="options" fxFlexFill>
+          <div *ngFor="let listItem of listItems.controls; let i = index" class="full-width" fxFlexFill>
+            <span [formGroupName]="i" fxFlex>
+              <app-option-input-field [jsPlumb]="jsPlumb" [blockFormGroup]="listMessageBlock" [formGroupNameInput]="i"></app-option-input-field>
             </span>
-                </div>
-            </div>
-
-        </form>
-
-        <button (click)="addNewOption()" mat-flat-button class="add-button" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
-        <i class="fas fa-plus"></i>
-        Add New Option
+          </div>
+        </div>
+  
+      </form>
+  
+      <button (click)="addNewOption()" mat-flat-button class="add-button" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
+        Add Option
       </button>
     </mat-card-content>
-</mat-card>
\ No newline at end of file
+  </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.scss
index abe0118908..06837095fa 100644
--- a/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.scss
@@ -1,77 +1,23 @@
 mat-card {
-    min-width: fit-content;
-    padding: 10px;
-}
-
-.mat-card-title {
-    font-size: 1.2rem!important;
-    color: var(--convs-mgr-color-primary-purple);
+	min-width: 200px;
+	padding: 10px;
 }
 
 textarea {
-    margin: 5px 0;
-}
-
-.add-button {
-    width: 98%!important;
-    height: 30px !important;
-    min-width: 98%!important;
-    min-height: fit-content!important;
-    text-align: center;
-    margin: 5px 0;
-    border-radius: 3px;
-    caret-color: white;
-    color: var(--convs-mgr-color-primary-white);
-    outline: none;
-    border: none;
-    background-color: var(--convs-mgr-color-primary-purple);
-}
-.block {
-    position: relative;
-    cursor: move;
-}
-
-.avatar-img {
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-}
-
-.block-title-container {
-    align-items: center;
-}
-
-.outer:hover {
-    cursor:move;
-}
-
-.fa-list-ul {
-    color: var(--convs-mgr-color-primary-purple)
-}
-
-.block-title {
-    font-weight: 600;
-    font-size: small;
-    margin: 0 0 0 .4em;
-    color: var(--convs-mgr-color-text-black);
-}
-.block-card {
-    border-radius: 10px;
-    padding: 0%;
+  margin: 5px 0;
+  border: 1px solid var(--convs-mgr-color-primary-purple);
+  border-radius: 5px;
+  resize: none;
+  padding: 10px;
 }
 
-.icons {
-    cursor: pointer;
+textarea:focus-visible {
+  border: 1px solid var(--convs-mgr-color-primary-purple);
+  outline-color: var(--convs-mgr-color-primary-purple);
 }
 
-.fa-clone {
-    padding-right: 10px;
-}
-
-.fa-clone, .fa-trash-alt {
-    color: var(--convs-mgr-color-medium-shade);
-}
-
-.fa-clone:hover, .fa-trash-alt:hover {
-    color: var(--convs-mgr-color-primary-purple);
+.add-button {
+	width: 100%;
+	background-color: var(--convs-mgr-color-primary-purple);
+	color: white;
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.ts
index 086caade79..acfd31c478 100644
--- a/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/list-message-block/src/lib/components/list-block/list-block.component.ts
@@ -1,9 +1,9 @@
-import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-
+import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 
 import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
+
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
 import { ListMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
 import { ButtonsBlockButton } from '@app/model/convs-mgr/stories/blocks/scenario';
 
@@ -12,7 +12,7 @@ import { ButtonsBlockButton } from '@app/model/convs-mgr/stories/blocks/scenario
   templateUrl: './list-block.component.html',
   styleUrls: ['./list-block.component.scss'],
 })
-export class ListBlockComponent<T> implements OnInit {
+export class ListBlockComponent<T> implements OnInit, AfterViewInit {
 
   @Input() id: string;
   @Input() block: ListMessageBlock;
@@ -22,36 +22,25 @@ export class ListBlockComponent<T> implements OnInit {
   type: StoryBlockTypes;
   listType= StoryBlockTypes.List;
 
-  blockFormGroup: FormGroup;
-
-
   constructor(private _fb: FormBuilder) {}
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
+
+  ngAfterViewInit(): void {
     this.block.options?.forEach((listItem) => {
       this.listItems.push(this.addListOptions(listItem));
     })
-
   }
 
-
-  ngAfterViewInit(): void {}
-
   get listItems () : FormArray {
-    return this.listMessageBlock.controls['listItems'] as FormArray;
+    return this.listMessageBlock.controls['options'] as FormArray;
   }
 
   addListOptions (listItem? : ButtonsBlockButton<T>) {
     return this._fb.group({
       id: [listItem?.id ?? `${this.id}-${this.listItems.length + 1}`],
       message: [listItem?.message ?? ''],
-
-    })
-  }
-
-  initListOptions(){
-    this._fb.group({
-      listOption:["", Validators.required]
+      value: [listItem?.value ?? '']
     })
   }
 
diff --git a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block-map/location-block-map.component.html b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block-map/location-block-map.component.html
index ad1845bb00..e69de29bb2 100644
--- a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block-map/location-block-map.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block-map/location-block-map.component.html
@@ -1,3 +0,0 @@
-<agm-map [latitude]="latitude" [longitude]="longitude">
-    <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
-</agm-map>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block-map/location-block-map.component.ts b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block-map/location-block-map.component.ts
index 3a3ef99d62..e5dc6c3abd 100644
--- a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block-map/location-block-map.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block-map/location-block-map.component.ts
@@ -7,11 +7,15 @@ import { Component, Input, OnInit } from '@angular/core';
   styleUrls: ['./location-block-map.component.scss'],
 })
 export class LocationBlockMapComponent implements OnInit{
-  constructor() {}
 
   @Input() longitude: number;
   @Input() latitude: number;
 
+  markerPositions: google.maps.LatLngLiteral[] = [];
+  markerOptions: google.maps.MarkerOptions = {draggable: false};
+
+  constructor() {}
+
   ngOnInit(): void {
     this.initMap();
   } 
@@ -35,6 +39,8 @@ export class LocationBlockMapComponent implements OnInit{
       });
     }
 
+
+
   
   }
 
diff --git a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.html b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.html
index 06247cb385..7fa5185b32 100644
--- a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.html
@@ -1,19 +1,23 @@
-<script src="https://maps.googleapis.com/maps/api/js?key=<AIzaSyAPKqFv5J-xmzTaoXkDj2VLKD17QhuvtRg>&libraries=places&language=en">
-</script>
-
 <mat-card [id]="id" *ngIf="locationMessageForm">
-    <mat-card-content>
-        <form [formGroup]="locationMessageForm" fxLayout="column" fxLayoutALign="start center">
+	<mat-card-content>
+		<form [formGroup]="locationMessageForm" fxLayout="column" fxLayoutALign="start center">
+
+			<div fxLayout="column" formGroupName="locationInput" >
+				<input formControlName="name" type="text" placeholder="Name"/>
+
+				<input formControlName="latitude" [ngModel]="latitude" type="text" placeholder="Address" hidden/>
+				<input formControlName="longitude" [ngModel]="longitude" type="text" placeholder="Address" hidden/>
+
+				<input (change)="addressChanged($event)" formControlName="address" [ngModel]="currentAddress" #mapsSearchField type="text" />
+			</div>
+
+			<google-map height="200px" width="200px" [zoom]="10" (mapClick)="addMarker($event)">
+				<map-marker [position]="markerPositions" [options]="markerOptions"></map-marker>
+			</google-map>
 
-            <input matInput type="text" placeholder="Name" appearance="outline" id="location" name="locationName">
-            <input matInput type="text" placeholder="Address" appearance="outline" id="location" name="Address">
-            <!-- <input ngx-google-places-autocomplete matInput type="text" placeholder="Search Location" appearance="outline" (onAddressChange)="handleAddressChange($event)"> -->
-            <input type="text" #search/>
-            <!-- <input [id]="locationInputId" matInput type="text" name="location" formControlName="locationInput" id="location" placeholder="Enter your location" appearance="outline" /> -->
-            <app-location-block-map [longitude]="longitude" [latitude]="latitude"></app-location-block-map>
-            <app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="locationMessageForm">
-            </app-default-option-field>
+			<app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="locationMessageForm">
+			</app-default-option-field>
 
-        </form>
-    </mat-card-content>
+		</form>
+	</mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.scss
index 1b94e60030..fb35151b2c 100644
--- a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.scss
@@ -1,66 +1,74 @@
 mat-card {
-    min-width: fit-content;
-    padding: 10px;
+  min-width: 200px;
+  padding: 10px;
 }
 
 mat-card-title {
-    font-size: 1.2rem!important;
-    color: var( --convs-mgr-color-primary-purple);
+  font-size: 1.2rem !important;
+  color: var(--convs-mgr-color-primary-purple);
 }
 
 input {
-    margin: 5px 0;
-    width: 180px;
-    height: 32px;
-    border: 1px solid var(--convs-mgr-color-primary-black);
-    border-radius: 5px;
+  max-width: 100%;
+  height: fit-content !important;
+  padding: 5px 10px;
+  margin-bottom: 5px;
+  border-radius: 3px;
+  caret-color: var(--convs-mgr-color-text-black);
+  color: var(--convs-mgr-color-text-black);
+  outline: none;
+  border: 1px solid var(--convs-mgr-color-text-black);
 }
+
 .block {
-    position: relative;
-    cursor: move;
-  }
-  
-  .avatar-img {
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-  }
-  
-  .block-title-container {
-    align-items: center;
-  }
-  
-  .outer:hover {
-    cursor:move;
-  }
-  
-  .fa-map-marker-alt {
-    color: var(--convs-mgr-color-primary-purple)
-  }
-  
-  .block-title {
-    font-weight: 600;
-    font-size: small;
-    margin: 0 0 0 .4em;
-    color: var(--convs-mgr-color-text-black);
-  }
-  .block-card {
-    border-radius: 10px;
-    padding: 0%;
-  }
-  
-  .icons {
-    cursor: pointer;
-  }
-  
-  .fa-clone {
-    padding-right: 10px;
-  }
-  
-  .fa-clone, .fa-trash-alt {
-    color: var(--convs-mgr-color-medium-shade);
-  }
-  
-  .fa-clone:hover, .fa-trash-alt:hover {
-    color: var(--convs-mgr-color-primary-purple);
-  }
\ No newline at end of file
+  position: relative;
+  cursor: move;
+}
+
+.avatar-img {
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+}
+
+.block-title-container {
+  align-items: center;
+}
+
+.outer:hover {
+  cursor: move;
+}
+
+.fa-map-marker-alt {
+  color: var(--convs-mgr-color-primary-purple)
+}
+
+.block-title {
+  font-weight: 600;
+  font-size: small;
+  margin: 0 0 0 .4em;
+  color: var(--convs-mgr-color-text-black);
+}
+
+.block-card {
+  border-radius: 10px;
+  padding: 0%;
+}
+
+.icons {
+  cursor: pointer;
+}
+
+.fa-clone {
+  padding-right: 10px;
+}
+
+.fa-clone,
+.fa-trash-alt {
+  color: var(--convs-mgr-color-medium-shade);
+}
+
+.fa-clone:hover,
+.fa-trash-alt:hover {
+  color: var(--convs-mgr-color-primary-purple);
+}
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.ts
index 2dc992defa..7fb32e5bb3 100644
--- a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/components/location-block/location-block.component.ts
@@ -1,13 +1,14 @@
-import { FormGroup } from '@angular/forms';
 import { AfterViewInit, Component, ElementRef, Input, NgZone, OnInit, ViewChild } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { GoogleMap } from '@angular/google-maps';
 
 import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { MapsAPILoader } from '@agm/core';
 
-import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
-import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
 import { LocationMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
 
+import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+
 @Component({
   selector: 'app-location-block',
   templateUrl: './location-block.component.html',
@@ -15,7 +16,8 @@ import { LocationMessageBlock } from '@app/model/convs-mgr/stories/blocks/messag
 })
 export class LocationBlockComponent implements OnInit, AfterViewInit {
 
-  @ViewChild('search') searchElementRef: ElementRef;
+  @ViewChild('mapsSearchField') searchElementRef: ElementRef;
+  @ViewChild(GoogleMap) map: GoogleMap;
 
   @Input() id: string;
   @Input() block: LocationMessageBlock;
@@ -25,7 +27,6 @@ export class LocationBlockComponent implements OnInit, AfterViewInit {
 
   locationInputId: string;
 
-
   type: StoryBlockTypes;
   locationtype = StoryBlockTypes.Location;
 
@@ -33,87 +34,86 @@ export class LocationBlockComponent implements OnInit, AfterViewInit {
 
   latitude: number;
   longitude: number;
-  zoom: number;
+  currentAddress: string = '';
+
+  zoom: number = 5;
   address: string;
-  
-  private geoCoder: google.maps.Geocoder;
 
-  constructor(private mapsAPILoader: MapsAPILoader,
-              private ngZone: NgZone
-) {}
 
-  ngOnInit(): void { 
-    this.findAdress();
-  }
-  
+  markerPositions: google.maps.LatLng;
+  markerOptions: google.maps.MarkerOptions = { draggable: false };
+
+  constructor(private ngZone: NgZone) { }
 
-  ngAfterViewInit(): void 
-  {
-    if (this.jsPlumb) {
-      this._decorateInput();
+  ngOnInit(): void {
+    if (this.locationMessageForm) {
+      this.latitude = this.locationMessageForm.value.locationInput.latitude;
+      this.longitude = this.locationMessageForm.value.locationInput.longitude;
+      this.currentAddress = this.locationMessageForm.value.locationInput.address;
     }
   }
 
-  findAdress() {
-    this.mapsAPILoader.load().then(() => {
-      this.setCurrentLocation();
-      this.geoCoder = new google.maps.Geocoder();
-
-      const options = {}
-
-      let autocomplete = new google.maps.places.Autocomplete(
-        this.searchElementRef.nativeElement, options
-      );
-
-      autocomplete.addListener('place_changed', () => {
-        this.ngZone.run(() => {
-          let place: google.maps.places.PlaceResult = autocomplete.getPlace();
-          if (place.geometry === undefined || place.geometry === null) {
-            return;
-          }
-          this.latitude = place.geometry.location.lat();
-          this.longitude = place.geometry.location.lng();
-          this.zoom = 12;
-        });
-      });
-    });
+  ngAfterViewInit(): void {
+    this.findAdress();
+    if (this.locationMessageForm) {
+      this.checkIfAddressExists();
+    }
   }
 
-  private setCurrentLocation() {
-    if ('geolocation' in navigator) {
-      navigator.geolocation.getCurrentPosition((position) => {
-        this.latitude = position.coords.latitude;
-        this.longitude = position.coords.longitude;
-        this.zoom = 8;
-        this.getAddress(this.latitude, this.longitude);
-      });
+  checkIfAddressExists() {
+    let address = this.locationMessageForm.value.locationInput;
+
+    if (address && address.latitude && address.longitude) {
+      this.latitude = address.latitude;
+      this.longitude = address.longitude;
+      this.currentAddress = address.address;
+      this.markerPositions = new google.maps.LatLng(this.latitude, this.longitude);
+      let b = new google.maps.LatLngBounds(this.markerPositions);
+      this.map.fitBounds(b);
     }
   }
 
-  getAddress(latitude: any, longitude: any) {
-
-    this.geoCoder.geocode(
-      { location: { lat: latitude, lng: longitude } },
-      (results, status) => {
-        if (status === 'OK') {
-          if (results[0]) {
-            this.zoom = 12;
-            this.address = results[0].formatted_address;
-          } else {
-            window.alert('No results found');
-          }
+  findAdress() {
+    const options = {}
+
+    let autocomplete = new google.maps.places.Autocomplete(
+      this.searchElementRef.nativeElement, options
+    );
+
+    autocomplete.addListener('place_changed', () => {
+      this.ngZone.run(() => {
+        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
+
+        if (place.geometry === undefined || place.geometry === null) {
+          return;
+        }
+
+        const bounds = new google.maps.LatLngBounds();
+
+        if (place.geometry.viewport) {
+          bounds.union(place.geometry.viewport);
         } else {
-          window.alert('Geocoder failed due to: ' + status);
+          bounds.extend(place.geometry.location!);
         }
-      }
-    );
+
+        this.zoom = 12;
+
+        if (place.geometry.location!.lat() && place.geometry.location!.lng()) {
+          this.latitude = place.geometry.location!.lat();
+          this.longitude = place.geometry.location!.lng();
+  
+          this.map.fitBounds(bounds)
+          this.markerPositions = new google.maps.LatLng(this.latitude, this.longitude)
+        }
+      });
+    });
   }
 
-  private _decorateInput()
-   {
-    let input = document.getElementById(this.locationInputId) as Element;
-    if (this.jsPlumb) {
-      input = _JsPlumbComponentDecorator(input, this.jsPlumb);
-    }
+  addMarker(event: google.maps.MapMouseEvent) {
+    this.markerPositions = event.latLng!;
+  }
+
+  addressChanged(address: any) {
+    this.currentAddress = address.target.value;    
   }
 }
diff --git a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/convs-mgr-location-message-block.module.ts b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/convs-mgr-location-message-block.module.ts
index 255b2fc3bf..d0baefeb67 100644
--- a/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/convs-mgr-location-message-block.module.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/location-message-block/src/lib/convs-mgr-location-message-block.module.ts
@@ -1,9 +1,8 @@
-import { AgmCoreModule } from '@agm/core';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-
+import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { GoogleMapsModule } from '@angular/google-maps';
 
 import {
   FlexLayoutModule,
@@ -14,9 +13,9 @@ import {
 import { MultiLangModule } from '@ngfi/multi-lang';
 
 import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+
 import { LocationBlockComponent } from './components/location-block/location-block.component';
 import { LocationBlockMapComponent } from './components/location-block-map/location-block-map.component';
-import { GooglePlaceModule } from 'ngx-google-places-autocomplete';
 
 @NgModule({
   imports: [
@@ -26,12 +25,13 @@ import { GooglePlaceModule } from 'ngx-google-places-autocomplete';
     FlexLayoutModule,
     MaterialBricksModule,
 
-    AgmCoreModule,
-    GooglePlaceModule,
-
     FormsModule,
     ReactiveFormsModule,
 
+    GoogleMapsModule,
+    HttpClientModule,
+    HttpClientJsonpModule,
+
     ConvsMgrBlockOptionsModule,
   ],
 
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.html b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.html
index 6037f136c4..d02b98897a 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.html
@@ -52,7 +52,7 @@ <h4 class="block-title"> {{ blockTitle | transloco }}</h4>
         <app-audio-block [id]="id" [block]="block" [audioMessageForm]="blockFormGroup" [jsPlumb]="jsPlumb" class="block"></app-audio-block>
     </div>
     <div *ngSwitchCase="videoType">
-        <app-video-block [id]="id" [block]="block" [videoMessageForm]="blockFormGroup"  class="block"></app-video-block>
+        <app-video-block [id]="id" [block]="block" [videoMessageForm]="blockFormGroup" [jsPlumb]="jsPlumb" class="block"></app-video-block>
     </div>
     <div *ngSwitchCase="stickerType">
         <app-sticker-block [id]="id" [block]="block" [stickerMessageForm]="blockFormGroup" [jsPlumb]="jsPlumb" class="block"></app-sticker-block>
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.ts
index 7e5ddd5c94..f866ee0d0c 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.ts
@@ -57,8 +57,8 @@ export class BlockComponent implements OnInit {
   blockTitle = ''
 
   constructor(private _el: ElementRef,
-    private _fb: FormBuilder,
-    private _logger: Logger
+              private _fb: FormBuilder,
+              private _logger: Logger
   ) { }
 
   ngOnInit(): void {
@@ -67,72 +67,74 @@ export class BlockComponent implements OnInit {
     this.iconClass = this.getBlockIconAndTitle(this.type).icon;
     this.blockTitle = this.getBlockIconAndTitle(this.type).title;
 
-    switch (this.type) {
-      case StoryBlockTypes.TextMessage:
-        this.blockFormGroup = _CreateTextMessageBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.Image:
-        this.blockFormGroup = _CreateImageMessageBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.Name:
-        this.blockFormGroup = _CreateNameMessageBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.Email:
-        this.blockFormGroup = _CreateEmailMessageBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.PhoneNumber:
-        this.blockFormGroup = _CreatePhoneMessageBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.QuestionBlock:
-        this.blockFormGroup = _CreateQuestionBlockMessageForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.Location:
-        this.blockFormGroup = _CreateLocationBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.List:
-        this.blockFormGroup = _CreateListBlockMessageForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.Document:
-        this.blockFormGroup = _CreateDocumentMessageBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.Audio:
-        this.blockFormGroup = _CreateAudioBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break
-      case StoryBlockTypes.Video:
-        this.blockFormGroup = _CreateVideoMessageBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break
-      case StoryBlockTypes.Sticker:
-        this.blockFormGroup = _CreateStickerBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      case StoryBlockTypes.Reply:
-        this.blockFormGroup = _CreateReplyBlockForm(this._fb, this.block);
-        this.blocksGroup.push(this.blockFormGroup);
-        break;
-
-      default:
-        break;
+    if (this.blocksGroup) {
+      switch (this.type) {
+        case StoryBlockTypes.TextMessage:
+          this.blockFormGroup = _CreateTextMessageBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.Image:
+          this.blockFormGroup = _CreateImageMessageBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.Name:
+          this.blockFormGroup = _CreateNameMessageBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.Email:
+          this.blockFormGroup = _CreateEmailMessageBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.PhoneNumber:
+          this.blockFormGroup = _CreatePhoneMessageBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.QuestionBlock:
+          this.blockFormGroup = _CreateQuestionBlockMessageForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.Location:
+          this.blockFormGroup = _CreateLocationBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.List:
+          this.blockFormGroup = _CreateListBlockMessageForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.Document:
+          this.blockFormGroup = _CreateDocumentMessageBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.Audio:
+          this.blockFormGroup = _CreateAudioBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break
+        case StoryBlockTypes.Video:
+          this.blockFormGroup = _CreateVideoMessageBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break
+        case StoryBlockTypes.Sticker:
+          this.blockFormGroup = _CreateStickerBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        case StoryBlockTypes.Reply:
+          this.blockFormGroup = _CreateReplyBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
+  
+        default:
+          break;
+      }
     }
 
   }
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/audio-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/audio-block-form.model.ts
index 14a54babc5..f1c96503db 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/audio-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/audio-block-form.model.ts
@@ -12,6 +12,7 @@ import { VoiceMessageBlock } from "@app/model/convs-mgr/stories/blocks/messaging
 export function _CreateAudioBlockForm(_fb: FormBuilder, blockData: VoiceMessageBlock): FormGroup {
   return _fb.group({
     id: [blockData?.id! ?? ''],
+    defaultTarget: [blockData.defaultTarget ?? ''],
     message: [blockData?.message! ?? ''],
     fileSrc:[blockData?.fileSrc! ?? ''],
     type: [blockData.type ?? StoryBlockTypes.Audio],
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/document-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/document-block-form.model.ts
index b68f7c98ad..2b7df74cf8 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/document-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/document-block-form.model.ts
@@ -12,6 +12,7 @@ import { DocumentMessageBlock } from "@app/model/convs-mgr/stories/blocks/messag
  export function _CreateDocumentMessageBlockForm(_fb: FormBuilder, blockData: DocumentMessageBlock): FormGroup {
   return _fb.group({
     id: [blockData?.id! ?? ''],
+    defaultTarget: [blockData.defaultTarget ?? ''],
     message: [blockData?.message! ?? ''],
     fileSrc:[blockData?.fileSrc! ?? ''],
     type: [blockData.type ?? StoryBlockTypes.Document],
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/email-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/email-block-form.model.ts
index bcebebc66a..a7d901b244 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/email-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/email-block-form.model.ts
@@ -12,6 +12,7 @@ import { EmailMessageBlock } from "@app/model/convs-mgr/stories/blocks/messaging
 export function _CreateEmailMessageBlockForm(_fb: FormBuilder, blockData: EmailMessageBlock): FormGroup {
   return _fb.group({
     id: [blockData?.id! ?? ''],
+    defaultTarget: [blockData.defaultTarget ?? ''],
     message: [blockData?.message! ?? ''],
     type: [blockData.type ?? StoryBlockTypes.Email],
     position: [blockData.position ?? { x: 200, y: 50 }]
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/icons-and-titles.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/icons-and-titles.ts
index a8165640e3..021dd85cc0 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/icons-and-titles.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/icons-and-titles.ts
@@ -12,7 +12,7 @@ export const iconsAndTitles: any = {
 		icon: 'fas fa-envelope'
 	},
   4 : {
-		title: 'PAGE-CONTENT.BLOCK.TITLES.MESSAGE.LOCATION',
+		title: 'PAGE-CONTENT.BLOCK.TITLES.LOCATION',
 		icon: 'fas fa-map-marker-alt'
 	},
   5 : {
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/image-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/image-block-form.model.ts
index 4c3e8d2a3d..018b1333c7 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/image-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/image-block-form.model.ts
@@ -12,8 +12,9 @@ import { ImageMessageBlock } from "@app/model/convs-mgr/stories/blocks/messaging
  export function _CreateImageMessageBlockForm(_fb: FormBuilder, blockData: ImageMessageBlock): FormGroup {
   return _fb.group({
     id: [blockData?.id! ?? ''],
-    caption: [blockData?.message! ?? ''],
-    imageLink:[blockData?.fileSrc],
+    defaultTarget: [blockData.defaultTarget ?? ''],
+    message: [blockData?.message! ?? ''],
+    fileSrc:[blockData?.fileSrc],
     type: [blockData.type ?? StoryBlockTypes.Image],
     position: [blockData.position ?? { x: 200, y: 50 }]
   })
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/list-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/list-block-form.model.ts
index a1669453e3..92876a8cde 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/list-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/list-block-form.model.ts
@@ -13,7 +13,7 @@ import { ListMessageBlock } from "@app/model/convs-mgr/stories/blocks/messaging"
   return _fb.group({
     id: [blockData?.id! ?? ''],
     message: [blockData?.message! ?? ''],
-    listItems: _fb.array([]),
+    options: _fb.array([]),
     type: [blockData.type ?? StoryBlockTypes.List],
     position: [blockData.position ?? { x: 200, y: 50 }]
   })
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/location-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/location-block-form.model.ts
index b3af050659..0898d6d782 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/location-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/location-block-form.model.ts
@@ -13,7 +13,12 @@ export function _CreateLocationBlockForm(_fb: FormBuilder, blockData: LocationMe
   return _fb.group({
     id: [blockData?.id! ?? ''],
     message: [blockData?.message! ?? ''],
-    locationInput: [blockData?.locationInput ?? {longitude: '', latitude:''}],
+    locationInput: _fb.group({
+      name: [blockData.locationInput!?.name ?? ''],
+      address: [blockData.locationInput!?.address ?? ''],
+      latitude: [blockData.locationInput!?.latitude ?? ''],
+      longitude: [blockData.locationInput!?.longitude ?? ''],
+    }),
     defaultTarget: [blockData?.defaultTarget ?? ''],
     type: [blockData.type ?? StoryBlockTypes.Input],
     position: [blockData.position ?? { x: 200, y: 50 }]
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/name-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/name-block-form.model.ts
index faaf44e372..64f0d1a0c4 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/name-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/name-block-form.model.ts
@@ -13,6 +13,7 @@ export function _CreateNameMessageBlockForm(_fb: FormBuilder, blockData: NameMes
 {
   return _fb.group({
     id: [blockData?.id! ?? ''],
+    defaultTarget: [blockData.defaultTarget ?? ''],
     message: [blockData?.message! ?? ''],
     type: [blockData.type ?? StoryBlockTypes.Name],
     position: [blockData.position ?? { x: 200, y: 50 }]
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/phonenumber-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/phonenumber-block-form.model.ts
index c6ccf5ff91..1f0f30ebf0 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/phonenumber-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/phonenumber-block-form.model.ts
@@ -12,6 +12,7 @@ import { PhoneMessageBlock } from "@app/model/convs-mgr/stories/blocks/messaging
 export function _CreatePhoneMessageBlockForm(_fb: FormBuilder, blockData: PhoneMessageBlock): FormGroup {
   return _fb.group({
     id: [blockData?.id! ?? ''],
+    defaultTarget: [blockData.defaultTarget ?? ''],
     message: [blockData?.message! ?? ''],
     type: [blockData.type ?? StoryBlockTypes.PhoneNumber],
     position: [blockData.position ?? { x: 200, y: 50 }]
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/sticker-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/sticker-block-form.model.ts
index f704ad7288..902ca92ba5 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/sticker-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/sticker-block-form.model.ts
@@ -12,6 +12,7 @@ import { StickerMessageBlock } from "@app/model/convs-mgr/stories/blocks/messagi
  export function _CreateStickerBlockForm(_fb: FormBuilder, blockData: StickerMessageBlock): FormGroup {
   return _fb.group({
     id: [blockData?.id! ?? ''],
+    defaultTarget: [blockData.defaultTarget ?? ''],
     message: [blockData?.message! ?? ''],
     fileSrc:[blockData?.fileSrc! ?? ''],
     type: [blockData.type ?? StoryBlockTypes.Sticker],
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/video-block-form.model.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/video-block-form.model.ts
index b0cd8ea8ca..a74c866d8b 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/video-block-form.model.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/video-block-form.model.ts
@@ -12,6 +12,7 @@ import {VideoMessageBlock } from "@app/model/convs-mgr/stories/blocks/messaging"
  export function _CreateVideoMessageBlockForm(_fb: FormBuilder, blockData: VideoMessageBlock): FormGroup {
   return _fb.group({
     id: [blockData?.id! ?? ''],
+    defaultTarget: [blockData.defaultTarget ?? ''],
     message: [blockData?.message! ?? ''],
     fileSrc:[blockData?.fileSrc! ?? ''],
     fileName:[blockData?.fileName! ?? ''],
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/audio-block.jsplumb.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/audio-block.jsplumb.ts
index 188afab13e..d564dabb72 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/audio-block.jsplumb.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/audio-block.jsplumb.ts
@@ -21,17 +21,9 @@ export function _AudioBlockDecoratePlumb(block: VoiceMessageBlock, comp: Compone
     // Whether the anchor is target (Other Block -> This Block)
     target: true,
     cssClass:"block_endpoint",
-    endpoint: "Dot",
+    endpoint: "Rectangle",
     anchor: "Left"
   });
 
-  jsPlumb.addEndpoint(comp.location.nativeElement, {
-    // Whether the anchor is target (Other Block -> This Block)
-    source: true,
-    cssClass:"block_endpoint",
-    endpoint: "Dot",
-    anchor: "Right"
-  });
-
   return comp;
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/image-block.jsplumb.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/image-block.jsplumb.ts
index 683582107d..2ce85555a1 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/image-block.jsplumb.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/image-block.jsplumb.ts
@@ -20,16 +20,9 @@ export function _ImageBlockDecoratePlumb(block: ImageMessageBlock, comp: Compone
   jsPlumb.addEndpoint(comp.location.nativeElement, {
     target: true,
     cssClass:"block_endpoint",
-    endpoint: "Dot",
+    endpoint: "Rectangle",
     anchor: "Left"
   });
 
-  jsPlumb.addEndpoint(comp.location.nativeElement, {
-    source: true,
-    cssClass:"block_endpoint",
-    endpoint: "Dot",
-    anchor: "Right"
-  });
-
   return comp;
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/message-block.jsplumb.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/message-block.jsplumb.ts
index 31141d9f19..312bb732c9 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/message-block.jsplumb.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/message-block.jsplumb.ts
@@ -20,16 +20,10 @@ export function _MessageBlockDecoratePlumb(block: TextMessageBlock, comp: Compon
   jsPlumb.addEndpoint(comp.location.nativeElement, {
     // Whether the anchor is target (Other Block -> This Block)
     target: true,
+    cssClass: 'block_endpoint',
     endpoint: 'Rectangle',
     anchor: "Left"
   });
-
-  jsPlumb.addEndpoint(comp.location.nativeElement, {
-    // Whether the anchor is target (Other Block -> This Block)
-    source: true,
-    endpoint: 'Dot',
-    anchor: "Right"
-  });
-
+  
   return comp;
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/sticker-block.jsplumb.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/sticker-block.jsplumb.ts
index 5e6112bd8a..83031fd088 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/sticker-block.jsplumb.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/sticker-block.jsplumb.ts
@@ -21,7 +21,7 @@ export function _StickerBlockDecoratePlumb(block: StickerMessageBlock, comp: Com
     // Whether the anchor is target (Other Block -> This Block)
     target: true,
     cssClass:"block_endpoint",
-    endpoint: "Dot",
+    endpoint: "Rectangle",
     anchor: "Left"
   });
 
diff --git a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/video-block.jsplumb.ts b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/video-block.jsplumb.ts
index dbcabbefa8..3bd5e5a14d 100644
--- a/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/video-block.jsplumb.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/main/src/lib/providers/video-block.jsplumb.ts
@@ -21,15 +21,9 @@ export function _VideoBlockDecoratePlumb(block: VideoMessageBlock, comp: Compone
     // Whether the anchor is target (Other Block -> This Block)
     target: true,
     cssClass:"block_endpoint",
-    endpoint: "Dot",
+    endpoint: "Rectangle",
     anchor: "Left"
   });
-  jsPlumb.addEndpoint(comp.location.nativeElement, {
-    source: true,
-    cssClass:"block_endpoint",
-    endpoint: "Dot",
-    anchor: "Right"
-  });
 
   return comp;
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.html b/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.html
index cdc1bfed07..7f827fd5d9 100644
--- a/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.html
@@ -1,9 +1,10 @@
 <mat-card [id]="id" *ngIf=" nameMessageForm">
 	<mat-card-content>
 		<form [formGroup]="nameMessageForm" fxLayout="column" fxLayoutALign="start center">
-			<!-- <textarea id="location" name="location" formControlName="location" type="text" rows="3"></textarea> -->
-			<input [id]="nameInputId" matInput type="text" id="message"
-				placeholder="{{'PAGE-CONTENT.BLOCK.PLACEHOLDER.NAME' | transloco }}" />
+			<input [id]="nameInputId" formControlName="message" type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.NAME' | transloco" />
+
+			<app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="nameMessageForm"></app-default-option-field>
+
 		</form>
 	</mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.scss
index 10a498376f..37075c49c1 100644
--- a/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.scss
@@ -1,67 +1,18 @@
 mat-card {
-    min-width: fit-content;
-    padding: 10px;
-}
-
-mat-card-title {
-    font-size: 1.2rem!important;
-    color: var(--convs-mgr-color-primary-purple);
+	min-width: 200px;
+	padding: 10px;
 }
 
 input {
-    margin: 5px 0;
-    width: 180px;
-    height: 32px;
-    border-radius: 10px;
-    border: 1px solid black;
-}
-.block {
-    position: relative;
-    cursor: move;
-}
-
-.avatar-img {
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-}
-
-.block-title-container {
-    align-items: center;
-}
-
-.outer:hover {
-    cursor:move;
-}
-
-.fa-user-alt {
-    color: var(--convs-mgr-color-primary-purple)
-}
-
-.block-title {
-    font-weight: 600;
-    font-size: small;
-    margin: 0 0 0 .4em;
-    color: var(--convs-mgr-color-text-black);
-}
-
-.block-card {
-    border-radius: 10px;
-    padding: 0%;
-}
-
-.icons {
-    cursor: pointer;
-}
-
-.fa-clone {
-    padding-right: 10px;
-}
-
-.fa-clone, .fa-trash-alt {
-    color: var(--convs-mgr-color-medium-shade);
+	max-width: 100%;
+	margin: 5px 0;
+	border: 1px solid var(--convs-mgr-color-primary-purple);
+	border-radius: 5px;
+	resize: none;
+	padding: 10px;
 }
 
-.fa-clone:hover, .fa-trash-alt:hover {
-    color: var(--convs-mgr-color-primary-purple);
+input:focus-visible {
+	border: 1px solid var(--convs-mgr-color-primary-purple);
+	outline-color: var(--convs-mgr-color-primary-purple);
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.ts
index 31f5c6cbdf..49c8e2ac18 100644
--- a/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/components/name-block/name-block.component.ts
@@ -1,10 +1,11 @@
+import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
-import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
+
+import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 
 import { NameMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
 
-import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
 import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 @Component({
@@ -12,7 +13,7 @@ import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/bloc
   templateUrl: './name-block.component.html',
   styleUrls: ['./name-block.component.scss'],
 })
-export class NameBlockComponent implements OnInit, AfterViewInit 
+export class NameBlockComponent implements OnInit 
 {
   @Input() id: string;
   @Input() block: NameMessageBlock;
@@ -21,28 +22,14 @@ export class NameBlockComponent implements OnInit, AfterViewInit
 
   nameInputId: string;
 
-  
   type: StoryBlockTypes;
   nametype = StoryBlockTypes.Name;
   blockFormGroup: FormGroup;
 
-
   constructor(private _fb: FormBuilder) { }
 
   ngOnInit(): void {
     this.nameInputId = `name-${this.id}`
   }
 
-  ngAfterViewInit(): void {
-    if (this.jsPlumb) {
-      this._decorateInput();
-    }
-  }
-
-  private _decorateInput() {
-    let input = document.getElementById(this.nameInputId) as Element;
-    if (this.jsPlumb) {
-      input = _JsPlumbComponentDecorator(input, this.jsPlumb);
-    }
-  }
 }
diff --git a/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/convs-mgr-name-message-block.module.ts b/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/convs-mgr-name-message-block.module.ts
index 35389a9cae..24e182bb9d 100644
--- a/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/convs-mgr-name-message-block.module.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/name-message-block/src/lib/convs-mgr-name-message-block.module.ts
@@ -4,11 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { MultiLangModule } from '@ngfi/multi-lang';
 
-import {
-  FlexLayoutModule,
-  MaterialBricksModule,
-  MaterialDesignModule,
-} from '@iote/bricks-angular';
+import { FlexLayoutModule, MaterialBricksModule, MaterialDesignModule } from '@iote/bricks-angular';
 
 import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
diff --git a/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.html b/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.html
index b57c817f60..76fda4579f 100644
--- a/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.html
@@ -1,10 +1,10 @@
 <mat-card [id]="id" *ngIf=" phoneMessageForm">
-    <mat-card-content>
-        <form [formGroup]="phoneMessageForm" fxLayout="column" fxLayoutALign="start center">
+	<mat-card-content>
+		<form [formGroup]="phoneMessageForm" fxLayout="column" fxLayoutALign="start center">
 
-            <input [id]="phoneInputId" matInput type="text" name="phoneNumber" id="phoneNumber" placeholder="{{'PAGE-CONTENT.BLOCK.PLACEHOLDER.PHONE-NUMBER' | transloco }}" />
+			<input [id]="phoneInputId" formControlName="message" type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.PHONE-NUMBER' | transloco" />
 
-
-        </form>
-    </mat-card-content>
+			<app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="phoneMessageForm"></app-default-option-field>
+		</form>
+	</mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.scss
index a4d63eb1b4..37075c49c1 100644
--- a/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.scss
@@ -1,67 +1,18 @@
 mat-card {
-    min-width: fit-content;
-    padding: 10px;
-}
-
-mat-card-title {
-    font-size: 1.2rem !important;
-    color: var(--convs-mgr-color-primary-purple);
+	min-width: 200px;
+	padding: 10px;
 }
 
 input {
-    margin: 5px 0;
-    width: 210px;
-    height: 32px;
-    border-radius: 10px;
-    border: 1px solid black;
-}
-.block {
-    position: relative;
-    cursor: move;
-}
-
-.avatar-img {
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-}
-
-.block-title-container {
-    align-items: center;
-}
-
-.outer:hover {
-    cursor:move;
-}
-
-.fa-phone-alt {
-    color: var(--convs-mgr-color-primary-purple)
-}
-
-.block-title {
-    font-weight: 600;
-    font-size: small;
-    margin: 0 0 0 .4em;
-    color: var(--convs-mgr-color-text-black);
-}
-
-.block-card {
-    border-radius: 10px;
-    padding: 0%;
-}
-
-.icons {
-    cursor: pointer;
-}
-
-.fa-clone {
-    padding-right: 10px;
-}
-
-.fa-clone, .fa-trash-alt {
-    color: var(--convs-mgr-color-medium-shade);
+	max-width: 100%;
+	margin: 5px 0;
+	border: 1px solid var(--convs-mgr-color-primary-purple);
+	border-radius: 5px;
+	resize: none;
+	padding: 10px;
 }
 
-.fa-clone:hover, .fa-trash-alt:hover {
-    color: var(--convs-mgr-color-primary-purple);
+input:focus-visible {
+	border: 1px solid var(--convs-mgr-color-primary-purple);
+	outline-color: var(--convs-mgr-color-primary-purple);
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.ts
index 25c3c0a7ef..f0ab1fadd4 100644
--- a/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/components/phone-block/phone-block.component.ts
@@ -3,8 +3,7 @@ import { Component, OnInit, Input } from '@angular/core';
 
 import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 
-import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
-import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
 import { PhoneMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
 
 @Component({
@@ -20,30 +19,17 @@ export class PhoneBlockComponent implements OnInit {
   @Input() phoneMessageForm: FormGroup;
 
   phoneInputId: string;
-
   
   type: StoryBlockTypes;
   phonetype = StoryBlockTypes.PhoneNumber;
 
-  blockFormGroup: FormGroup;
-
   constructor(private _fb: FormBuilder) { }
 
   ngOnInit(): void {
     this.phoneInputId = `phone-${this.id}`;
   }
 
-  ngAfterViewInit(): void {
-    if (this.jsPlumb) {
-      this._decorateInput();
-    }
-  }
+  ngAfterViewInit(): void {}
 
-  private _decorateInput() {
-    let input = document.getElementById(this.phoneInputId) as Element;
-    if (this.jsPlumb) {
-      input = _JsPlumbComponentDecorator(input, this.jsPlumb);
-    }
-  }
 }
 
diff --git a/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/convs-mgr-phone-message-block.module.ts b/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/convs-mgr-phone-message-block.module.ts
index 07a39157ef..86746d343d 100644
--- a/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/convs-mgr-phone-message-block.module.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/phone-message-block/src/lib/convs-mgr-phone-message-block.module.ts
@@ -4,13 +4,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { MultiLangModule } from '@ngfi/multi-lang';
 
-import {
-  FlexLayoutModule,
-  MaterialBricksModule,
-  MaterialDesignModule,
-} from '@iote/bricks-angular';
-
+import { FlexLayoutModule, MaterialBricksModule, MaterialDesignModule } from '@iote/bricks-angular';
 
+import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 import { PhoneBlockComponent } from './components/phone-block/phone-block.component';
 
@@ -25,6 +21,7 @@ import { PhoneBlockComponent } from './components/phone-block/phone-block.compon
     FormsModule,
     ReactiveFormsModule,
 
+    ConvsMgrBlockOptionsModule
   ],
 
   declarations: [PhoneBlockComponent],
diff --git a/libs/features/convs-mgr/stories/blocks/library/question-message-block/src/lib/components/questions-block/questions-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/question-message-block/src/lib/components/questions-block/questions-block.component.scss
index 59873b352c..7b4f42085e 100644
--- a/libs/features/convs-mgr/stories/blocks/library/question-message-block/src/lib/components/questions-block/questions-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/question-message-block/src/lib/components/questions-block/questions-block.component.scss
@@ -14,7 +14,6 @@ textarea {
   border-radius: 5px;
   resize: none;
   padding: 10px;
-
 }
 
 textarea:focus-visible {
diff --git a/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.html b/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.html
index 86213fdeba..98fa7e6ff5 100644
--- a/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.html
@@ -1,24 +1,27 @@
 <mat-card [id]="id" *ngIf="stickerMessageForm">
-    <mat-card-content>
-        <form [formGroup]="stickerMessageForm" fxLayout="column" fxLayoutALign="start center">
+	<mat-card-content>
+		<form [formGroup]="stickerMessageForm" fxLayout="column" fxLayoutALign="start center">
 
-            <div [id]="stickerInputId">
-                <div (click)="stickerInput.click()" class="sticker-icon" *ngIf="!this.block.fileSrc && !isLoadingSticker">
-                    <i class="fas fa-plus"></i>
-                </div>
-                <div *ngIf="isLoadingSticker" class="sticker-icon">
-                    <i class="fas fa-circle-notch fa-spin"></i>
-                </div>
-                <div *ngIf="this.block.fileSrc && !isLoadingSticker" class="sticker-image" (click)="stickerInput.click()">
-                    <img [src]="this.block.fileSrc" class="image">
-                </div>
-                <div>
-                    <input #stickerInput type="file" class="fileSrc" accept=".WEBP, .png, .PNG, .WEBP" (change)="processSticker($event)">
-                </div>
-            </div>
+			<div [id]="stickerInputId" class="audio_bg">
+				<div (click)="stickerInput.click()" class="sticker-icon" *ngIf="!this.block.fileSrc && !isLoadingSticker">
+					<i class="fas fa-plus"></i>
+				</div>
+				<div *ngIf="isLoadingSticker" class="sticker-icon">
+					<i class="fas fa-circle-notch fa-spin"></i>
+				</div>
+				<div *ngIf="this.block.fileSrc && !isLoadingSticker" class="sticker-image" (click)="stickerInput.click()">
+					<img [src]="this.block.fileSrc" class="image">
+				</div>
+				<div>
+					<input #stickerInput type="file" class="fileSrc" accept=".svg, .gif, .webp"
+						(change)="processSticker($event)">
+				</div>
+			</div>
 
-            <input type="text " [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.CAPTION' | transloco " name="caption " id="caption ">
-            <input type="text " [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.STICKER-LINK' | transloco  " name="sticker-link " id="sticker-link ">
-        </form>
-    </mat-card-content>
+			<input formControlName="message" type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.CAPTION' | transloco "/>
+			<input formControlName="fileSrc" type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.STICKER-LINK' | transloco"/>
+
+			<app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="stickerMessageForm"></app-default-option-field>
+		</form>
+	</mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.scss
index c6ee3e0a3e..c7845a851d 100644
--- a/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.scss
@@ -1,84 +1,74 @@
 mat-card {
-    min-width: fit-content;
-    padding: 10px;
+	min-width: 200px;
+	padding: 10px;
 }
 
 mat-card-title {
-    font-size: 1.2rem!important;
-    color: var(--convs-mgr-color-primary-purple);
+	font-size: 1.2rem !important;
+	color: var(--convs-mgr-color-primary-purple);
 }
 
-input {
-    margin: 5px 0;
-    width: 180px;
-    height: 30px;
-    border: 1px solid var(--convs-mgr-color-primary-black);
-    border-radius: 5px;
-}
-
-.fileSrc {
-    display: none;
+sticker {
+	max-width: 100%;
 }
 
-.image {
-    width: 13em;
-    height: 12em;
-    border-radius: 5px;
-}
-.sticker-icon {
-    text-align: center;
-    width: 180px;
-    height: 90px;
-    background-color: var(--convs-mgr-color-tertiary) !important;
-    border-radius: 5px;
-    opacity: 1;
-}
-.block {
-    position: relative;
-    cursor: move;
-}
-
-.avatar-img {
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
+input {
+	max-width: 100%;
+	height: fit-content !important;
+	padding: 5px 10px;
+	margin-bottom: 5px;
+	border-radius: 3px;
+	caret-color: var(--convs-mgr-color-text-black);
+	color: var(--convs-mgr-color-text-black);
+	outline: none;
+	border: 1px solid var(--convs-mgr-color-text-black);
 }
 
-.block-title-container {
-    align-items: center;
+.fileSrc {
+	display: none;
 }
 
-.outer:hover {
-    cursor:move;
+.svg-inline--fa.fa-w-12 {
+	width: 30px;
+	border-color: var(--convs-mgr-color-primary-white) !important;
+	border-radius: 15px;
+	background-color: var(--convs-mgr-color-primary-white) !important;
 }
 
-.fa-sticky-note {
-    color: var(--convs-mgr-color-primary-purple)
-}
+.sticker-icon {
+	text-align: center;
+	color: var(--convs-mgr-color-primary-purple) !important;
+	width: 200px;
+	height: 100px;
+	background-color: var(--convs-mgr-color-primary-white) !important;
+	opacity: 1;
 
-.block-title {
-    font-weight: 600;
-    font-size: small;
-    margin: 0 0 0 .4em;
-    color: var(--convs-mgr-color-text-black);
-}
-.block-card {
-    border-radius: 10px;
-    padding: 0%;
-}
+	.fa-file-sticker {
+		color: var(--convs-mgr-color-primary-purple) !important;
+		border: none;
+	}
 
-.icons {
-    cursor: pointer;
+	.fa-spin {
+		color: var(--convs-mgr-color-primary-purple) !important;
+		border: none;
+	}
 }
 
-.fa-clone {
-    padding-right: 10px;
+.audio_bg {
+	margin: 5px 0;
+	width: 210px;
+	border-radius: 4px;
+	border: 2px solid var(--convs-mgr-color-primary-purple);
 }
 
-.fa-clone, .fa-trash-alt {
-    color: var(--convs-mgr-color-medium-shade);
+.svg-inline--fa {
+	height: 40px;
+	margin-top: 13%;
+	overflow: hidden;
 }
 
-.fa-clone:hover, .fa-trash-alt:hover {
-    color: var(--convs-mgr-color-primary-purple);
+.svg-inline--fa.fa-w-16 {
+	width: 40px;
+	height: 40px;
+	color: var(--convs-mgr-color-primary-white) !important;
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.ts
index 9d810197e4..27188211e0 100644
--- a/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/components/sticker-block/sticker-block.component.ts
@@ -37,21 +37,15 @@ export class StickerBlockComponent implements OnInit {
   blockFormGroup: FormGroup;
 
 
-  constructor(private _fb: FormBuilder,
-    private _logger: Logger,
-    private _stickerUploadService: UploadFileService) { }
+  constructor(private _stickerUploadService: UploadFileService) 
+  { }
 
   ngOnInit(): void
   {
     this.stickerInputId = `stckr-${this.id}`
   }
 
-  ngAfterViewInit(): void
-  {
-    if (this.jsPlumb) {
-      this._decorateInput();
-    }
-  }
+  ngAfterViewInit(): void {}
 
   async processSticker(event: any) 
   {
@@ -66,14 +60,5 @@ export class StickerBlockComponent implements OnInit {
     this.isLoadingSticker = true;
     const stickerFilePath = `stickers/${this.file.name}_${new Date().getTime()}`;
     (await this._stickerUploadService.uploadFile(this.file, this.block, stickerFilePath)).subscribe();
-
-  }
-
-  private _decorateInput() 
-  {
-    let input = document.getElementById(this.stickerInputId) as Element;
-    if (this.jsPlumb) {
-      input = _JsPlumbComponentDecorator(input, this.jsPlumb);
-    }
   }
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/convs-mgr-sticker-message-block.module.ts b/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/convs-mgr-sticker-message-block.module.ts
index 0159e112ad..8e7ef25218 100644
--- a/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/convs-mgr-sticker-message-block.module.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/sticker-message-block/src/lib/convs-mgr-sticker-message-block.module.ts
@@ -12,6 +12,8 @@ import {
 
 import { MultiLangModule } from '@ngfi/multi-lang';
 
+import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+
 import { StickerBlockComponent } from './components/sticker-block/sticker-block.component';
 
 @NgModule({
@@ -25,8 +27,8 @@ import { StickerBlockComponent } from './components/sticker-block/sticker-block.
     FormsModule,
     ReactiveFormsModule,
 
-    HttpClientModule,
-
+    ConvsMgrBlockOptionsModule,
+    HttpClientModule
   ],
 
   declarations: [StickerBlockComponent],
diff --git a/libs/features/convs-mgr/stories/blocks/library/text-message-block/src/lib/components/message-block/message-block.component.html b/libs/features/convs-mgr/stories/blocks/library/text-message-block/src/lib/components/message-block/message-block.component.html
index 24874b40c0..086b08c08f 100644
--- a/libs/features/convs-mgr/stories/blocks/library/text-message-block/src/lib/components/message-block/message-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/text-message-block/src/lib/components/message-block/message-block.component.html
@@ -1,8 +1,9 @@
-<mat-card class="input" [id]="id" *ngIf="textMessageForm">
+<mat-card [id]="id" *ngIf="textMessageForm">
     <mat-card-content>
         <form [formGroup]="textMessageForm" fxLayout="column" fxLayoutALign="start center">
-
             <textarea id="message" name="message" formControlName="message" type="text" rows="3"></textarea>
+
+            <app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="textMessageForm"></app-default-option-field>
         </form>
     </mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.html b/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.html
index 140d6ea9ca..df8b2c0330 100644
--- a/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.html
+++ b/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.html
@@ -3,23 +3,23 @@
 		<form [formGroup]="videoMessageForm" fxLayout="column" fxLayoutALign="start center">
 
 			<div [id]="videoInputId">
-				<input (change)="processVideo($event)" type="file" accept=".mp3,.mp4,.webm,.ogg " id="upload" hidden class="video" />
-				<label for="upload">
+				<input (change)="processVideo($event)" type="file" accept=".mp4" [id]="videoInputUpload" hidden class="video" />
+				<label [for]="videoInputUpload">
 					<div *ngIf="!hasVideo; else inputHasVideo">
 						<i id="icon" class="fas fa-play-circle"></i>
 					</div>
 					<ng-template #inputHasVideo>
 						<video class="upload-video" alt="" controls autoplay>
-							<source [src]="videoUrl" type="video/*">
+							<source [src]="videoUrl" type="video/mp4">
 						</video>
 					</ng-template>
 				</label>
 			</div>
 
-			<input type="text " [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.CAPTION' | transloco " formControlName="caption" name="caption" 
-				id="caption ">
-			<input type="text " [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.VIDEO-LINK' | transloco " formControlName="videoLink" name="video-link" value = "{{ videoUrl }}"
-				id="video-link ">
+			<app-default-option-field [jsPlumb]="jsPlumb" [blockFormGroup]="videoMessageForm"></app-default-option-field>
+
+			<input type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.CAPTION' | transloco" formControlName="message">
+			<input type="text" [placeholder]="'PAGE-CONTENT.BLOCK.PLACEHOLDER.VIDEO-LINK' | transloco" formControlName="fileSrc">
 		</form>
 	</mat-card-content>
 </mat-card>
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.scss b/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.scss
index 503828b42f..07914cb1c1 100644
--- a/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.scss
+++ b/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.scss
@@ -1,20 +1,25 @@
+mat-card {
+	min-width: 200px;
+	padding: 10px;
+}
+
 input {
-	margin: 5px 0;
-	max-width: 100%;
-	height: fit-content;
-	padding: 5px 5px;
-	border: 1px solid var(--convs-mgr-color-primary-black);
-	border-radius: 5px;
-	text-indent: 10px;
-	font-size: 1rem;
-	background-color: rgb(242, 241, 241);
-	font-weight: 400;
+  max-width: 100%;
+  height: fit-content!important;
+  padding: 5px 10px;
+	margin-bottom: 5px;
+  border-radius: 3px;
+  caret-color: var(--convs-mgr-color-text-black);
+  color: var(--convs-mgr-color-text-black);
+  outline: none;
+  border: 1px solid var(--convs-mgr-color-text-black);
 }
 
 label {
 	background-color: white;
 	width: 100%;
-	min-height: 150px;
+	font-size: 2rem;
+	min-height: 100px;
 	font-size: 3rem;
 	justify-content: center;
 	display: flex;
@@ -26,20 +31,12 @@ label {
 	margin-bottom: 10px;
 }
 
-.video {
-	width: 13em;
-	height: 12em;
-	border-radius: 10px;
-	border-color: var(--convs-mgr-color-primary-purple)
+video {
+	max-width: 220px;
 }
 
 .upload-video {
 	max-width: 100%;
 	max-height: 150px;
 	object-fit: cover;
-}
-
-label {
-	font-size: 3rem;
-
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.ts b/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.ts
index 649248160b..3ec9b42c3b 100644
--- a/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/components/video-block/video-block.component.ts
@@ -1,18 +1,15 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
-
-import { Logger } from '@iote/bricks-angular';
-// import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+import { FormGroup } from '@angular/forms';
+import { AngularFireStorage } from '@angular/fire/compat/storage';
 
-// import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 
 import { VideoMessageBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
-import { StoryBlock, StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
-import { StoryBlocksStore } from '@app/state/convs-mgr/stories/blocks'
-import { UploadFileService } from '@app/state/file';
-import { AngularFireStorage } from '@angular/fire/compat/storage';
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
 
+import { UploadFileService } from '@app/state/file';
 
+import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 @Component({
   selector: 'app-video-block',
@@ -25,7 +22,7 @@ export class VideoBlockComponent implements OnInit {
   @Input() id: string;
   @Input() block: VideoMessageBlock;
   @Input() videoMessageForm: FormGroup;
-  // @Input() jsPlumb: BrowserJsPlumbInstance;
+  @Input() jsPlumb: BrowserJsPlumbInstance;
 
   type: StoryBlockTypes;
   videoType = StoryBlockTypes.Video;
@@ -39,24 +36,25 @@ export class VideoBlockComponent implements OnInit {
   hasVideo: boolean;
   videoUrl: string;
 
+  videoInputUpload: string = '';
 
   constructor(private _videoUploadService: UploadFileService,
-    private _logger: Logger,
-    private _storyBlockService: StoryBlocksStore,
-    private _ngfiStorage:AngularFireStorage) { }
+              private _ngfiStorage:AngularFireStorage
+  ) 
+  {
+    this.block = this.block as VideoMessageBlock;
+  }
 
   ngOnInit(): void {
     this.videoInputId = `vid-${this.id}`;
+    this.videoInputUpload = `vid-${this.id}-upload`;
+    
+    this.checkIfVideoExists();
   }
-  updateForm (){
-     this.videoMessageForm.patchValue({
-      caption: this.block.message = this.videoMessageForm.value.caption,
-      videoLink: this.block.fileSrc = this.videoUrl
-     });
-     if (this.hasVideo){
-      this.videoLink = this.videoMessageForm.value.videoLink
-     }
-     console.log(this.videoLink)
+
+  checkIfVideoExists(){
+    this.videoUrl = this.videoMessageForm.value.fileSrc;
+    this.hasVideo = this.videoUrl && this.videoUrl != '' ? true : false;
   }
 
   async processVideo(event: any) {
@@ -71,23 +69,8 @@ export class VideoBlockComponent implements OnInit {
     const vidFilePath = `videos/${this.file.name}_${new Date().getTime()}`;
     this.isLoadingVideo = true;
     this.videoMessageForm.get('fileName')?.setValue(this.file.name);
-    
 
     this.videoUrl =await (await this._ngfiStorage.upload(vidFilePath, this.file)).ref.getDownloadURL();
     (await this._videoUploadService.uploadFile(this.file, this.block, vidFilePath)).subscribe();
   }
-
-
-
-  // changeVideo() {
-
-  //   const newBlock: VideoMessageBlock = {
-  //     ...this.block as VideoMessageBlock,
-  //     fileSrc: '',
-  //     fileName: ''
-  //   }
-  //   this._storyBlockService.update(newBlock).subscribe();
-  // }
-
-
 }
\ No newline at end of file
diff --git a/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/convs-mgr-video-message-block.module.ts b/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/convs-mgr-video-message-block.module.ts
index 42c52c70d3..72a08246d5 100644
--- a/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/convs-mgr-video-message-block.module.ts
+++ b/libs/features/convs-mgr/stories/blocks/library/video-message-block/src/lib/convs-mgr-video-message-block.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {  HttpClientModule } from '@angular/common/http';
 
+import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 import {
   FlexLayoutModule,
@@ -26,7 +27,7 @@ import { VideoBlockComponent } from './components/video-block/video-block.compon
     ReactiveFormsModule,
 
     HttpClientModule,
-
+    ConvsMgrBlockOptionsModule,
   ],
 
   declarations: [VideoBlockComponent],
diff --git a/libs/features/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts b/libs/features/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts
index a179551f09..55245857c3 100644
--- a/libs/features/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts
+++ b/libs/features/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts
@@ -35,21 +35,21 @@ export class BlocksLibraryComponent implements OnInit {
 
   blockTemplates: StoryBlock[] = [
     { id: 'input-message-block', type: StoryBlockTypes.TextMessage, message: 'Message', blockIcon: this.getBlockIcon(StoryBlockTypes.TextMessage) } as TextMessageBlock,
-    { id: 'io-questions-block', type: StoryBlockTypes.Input, message: 'Input', blockIcon: this.getBlockIcon(StoryBlockTypes.Input) } as QuestionMessageBlock,
-    { id: 'io-block', type: StoryBlockTypes.IO, message: 'IO', blockIcon: this.getBlockIcon(StoryBlockTypes.IO) } as QuestionMessageBlock,
+    // { id: 'io-questions-block', type: StoryBlockTypes.Input, message: 'Input', blockIcon: this.getBlockIcon(StoryBlockTypes.Input) } as QuestionMessageBlock,
+    // { id: 'io-block', type: StoryBlockTypes.IO, message: 'IO', blockIcon: this.getBlockIcon(StoryBlockTypes.IO) } as QuestionMessageBlock,
     { id: 'input-location-block', type: StoryBlockTypes.Location, message: 'Location', blockIcon: this.getBlockIcon(StoryBlockTypes.Location) } as LocationMessageBlock,
     { id: 'input-image-block', type: StoryBlockTypes.Image, message: 'Image', blockIcon: this.getBlockIcon(StoryBlockTypes.Image) } as ImageMessageBlock,
     { id: 'input-question-block', type: StoryBlockTypes.QuestionBlock, message: 'Question', blockIcon: this.getBlockIcon(StoryBlockTypes.QuestionBlock) } as QuestionMessageBlock,
     { id: 'input-docs-block', type: StoryBlockTypes.Document, message: 'Document', blockIcon: this.getBlockIcon(StoryBlockTypes.Document) } as DocumentMessageBlock,
     { id: 'input-audio-block', type: StoryBlockTypes.Audio, message: 'Audio', blockIcon: this.getBlockIcon(StoryBlockTypes.Audio) } as VoiceMessageBlock,
-    { id: 'io-structural-block', type: StoryBlockTypes.Structural, message: 'Structural', blockIcon: this.getBlockIcon(StoryBlockTypes.Structural) } as TextMessageBlock,
+    // { id: 'io-structural-block', type: StoryBlockTypes.Structural, message: 'Structural', blockIcon: this.getBlockIcon(StoryBlockTypes.Structural) } as TextMessageBlock,
     { id: 'io-name-block', type: StoryBlockTypes.Name, message: 'Name', blockIcon: this.getBlockIcon(StoryBlockTypes.Name) } as NameMessageBlock,
     { id: 'io-email-block', type: StoryBlockTypes.Email, message: 'Email', blockIcon: this.getBlockIcon(StoryBlockTypes.Email) } as EmailMessageBlock,
     { id: 'io-phone-block', type: StoryBlockTypes.PhoneNumber, message: 'Phone', blockIcon: this.getBlockIcon(StoryBlockTypes.PhoneNumber) } as PhoneMessageBlock,
     { id: 'input-video-block', type: StoryBlockTypes.Video, message: 'Video', blockIcon: this.getBlockIcon(StoryBlockTypes.Video) } as VideoMessageBlock,
     { id: 'input-sticker-block', type: StoryBlockTypes.Sticker, message: 'Sticker', blockIcon: this.getBlockIcon(StoryBlockTypes.Sticker) } as StickerMessageBlock,
     { id: 'io-list-block', type: StoryBlockTypes.List, message: 'List', blockIcon: this.getBlockIcon(StoryBlockTypes.List) } as ListMessageBlock,
-    { id: 'input-reply-block', type: StoryBlockTypes.Reply, message: 'Reply', blockIcon: this.getBlockIcon(StoryBlockTypes.Reply) } as ReplyMessageBlock
+    // { id: 'input-reply-block', type: StoryBlockTypes.Reply, message: 'Reply', blockIcon: this.getBlockIcon(StoryBlockTypes.Reply) } as ReplyMessageBlock
   ];
   blockTemplate$: Observable<StoryBlock[]> = of(this.blockTemplates);
   constructor(private _logger: Logger) { }
diff --git a/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts b/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts
index e964232dc9..f345f5c61d 100644
--- a/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts
+++ b/libs/features/convs-mgr/stories/editor/src/lib/model/story-editor-frame.model.ts
@@ -12,6 +12,7 @@ import { BlockInjectorService } from '@app/features/convs-mgr/stories/blocks/lib
 import { _JsPlumbComponentDecorator } from '@app/features/convs-mgr/stories/blocks/library/block-options';
 
 import { AnchorBlockComponent } from '@app/features/convs-mgr/stories/blocks/library/anchor-block';
+import { EndAnchorComponent } from '@app/features/convs-mgr/stories/blocks/library/anchor-block';
 
 
 /**
@@ -59,7 +60,10 @@ export class StoryEditorFrame {
     this._jsPlumb.reset();
 
     //create the anchor block when state is initialized
-    (this._viewport.createComponent(AnchorBlockComponent)).instance.jsPlumb = this._jsPlumb;
+    this.createStartAnchor();
+
+    //create the end anchor block when state is initialized
+    this.createEndAnchor();
 
     this.drawBlocks();
 
@@ -90,6 +94,19 @@ export class StoryEditorFrame {
     return this._jsPlumb.getConnections();
   }
 
+  createStartAnchor() {
+    let startAnchor = this._viewport.createComponent(AnchorBlockComponent);
+    startAnchor.instance.jsPlumb = this._jsPlumb;
+  }
+
+  createEndAnchor() {
+    let endAnchor = this._viewport.createComponent(EndAnchorComponent);
+    endAnchor.instance.jsPlumb = this._jsPlumb;
+    endAnchor.location.nativeElement.style = `position: absolute; left: 50px; top: 150px;`;
+    this._viewport.insert(endAnchor.hostView);
+    this._jsPlumb.manage(endAnchor.location.nativeElement, 'story-end-anchor');
+  }
+
   /**
   * Function which draw the blocks.
   * 
@@ -122,7 +139,7 @@ export class StoryEditorFrame {
     // and target elements for connection drawing later
     // sources are mostly inputs
     // targets (blocks) are wrapped inside a mat-card 
-    let domSourceInputs = Array.from(document.querySelectorAll("input, .input"));
+    let domSourceInputs = Array.from(document.querySelectorAll("input"));
     let domBlockCards = Array.from(document.querySelectorAll('mat-card'));
   
 
@@ -132,7 +149,7 @@ export class StoryEditorFrame {
       let sourceElement = domSourceInputs.find((el) => el.id == connection.sourceId);
       // fetching the target (block) that matches the connection target id
       let targetElement = domBlockCards.find((el) => el.id == connection.targetId);
-
+      
       // more infor on connect can be found -> https://docs.jsplumbtoolkit.com/community-2.x/current/articles/connections.html
       this._jsPlumb.connect({
         source: sourceElement as Element,
@@ -191,7 +208,7 @@ export class StoryEditorFrame {
     const block = {
                     id: `${this._cnt}`,
                     type: type,
-                    message: 'Before we start,\nPlease provide a few more details about yourself.',
+                    message: '',
                     // TODO: Positioning in the middle + offset based on _cnt
                     position: { x: 200, y: 50 }
                   } as StoryBlock;
diff --git a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html
index 40003670c2..f337a63388 100644
--- a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html
+++ b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.html
@@ -2,7 +2,7 @@
 
   <!-- Main body page -->
   <div fxLayout="row" fxFlexFill>
-    <div fxFlex="20">
+    <div fxFlex="20" class="nav">
       <convl-blocks-library *ngIf="frame" [frame]="frame">
       </convl-blocks-library>
     </div>
diff --git a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss
index cfc40efd26..5ef5ad481a 100644
--- a/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss
+++ b/libs/features/convs-mgr/stories/editor/src/lib/pages/story-editor/story-editor.page.scss
@@ -28,6 +28,10 @@ app-blocks-library {
   color: black;
 }
 
+.nav {
+  border-right: solid black 1px;
+}
+
 ::ng-deep .mat-mini-fab .mat-button-wrapper {
   bottom: 0px;
 }
\ No newline at end of file
diff --git a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/email-message-block.interface.ts b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/email-message-block.interface.ts
index c9916cec1a..3947f9eaf8 100644
--- a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/email-message-block.interface.ts
+++ b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/email-message-block.interface.ts
@@ -5,5 +5,7 @@ import { StoryBlock } from "@app/model/convs-mgr/stories/blocks/main";
 export interface EmailMessageBlock extends StoryBlock{
   
   /**Email that is expected as input */
-   email?:string;
+   email?: string;
+
+   defaultTarget?: string;
 }
\ No newline at end of file
diff --git a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/file-message-block.interface.ts b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/file-message-block.interface.ts
index 949f67f7ad..f6870e5b48 100644
--- a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/file-message-block.interface.ts
+++ b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/file-message-block.interface.ts
@@ -10,6 +10,9 @@ export interface FileMessageBlock extends StoryBlock
 
   /** File source of the message block */
   fileSrc?: string;
+
+  defaultTarget?: string;
+  
 }
 
 /**
diff --git a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/location-message-block.interface.ts b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/location-message-block.interface.ts
index 28833cd227..b9efcbac06 100644
--- a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/location-message-block.interface.ts
+++ b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/location-message-block.interface.ts
@@ -17,11 +17,11 @@ export interface LocationMessageBlock extends StoryBlock
 
 export interface Location {
     /**Stores the longitude */
-    longitude:number;
+    longitude: number;
     /**Stores the latitude */
-    latitude:number;
+    latitude: number;
     /**Name of the location */
-    name?:string;
+    name: string;
     /**Address of the location e.g. street address */
-    address?:string;
+    address: string;
 }
\ No newline at end of file
diff --git a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/name-message-block.interface.ts b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/name-message-block.interface.ts
index c0efcf2e54..9487e73f36 100644
--- a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/name-message-block.interface.ts
+++ b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/name-message-block.interface.ts
@@ -7,4 +7,6 @@ export interface NameMessageBlock extends StoryBlock{
 
   /**Stores the entered name entered by the userr */
   name?:string;
+
+  defaultTarget?: string;
 }
diff --git a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/phone-message-block.interface.ts b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/phone-message-block.interface.ts
index f1cf473fdb..055aca3db6 100644
--- a/libs/model/convs-mgr/stories/blocks/messaging/src/lib/phone-message-block.interface.ts
+++ b/libs/model/convs-mgr/stories/blocks/messaging/src/lib/phone-message-block.interface.ts
@@ -8,4 +8,6 @@ export interface PhoneMessageBlock extends StoryBlock {
   /**The phone number expected as input */
   phoneNumber?: string;
 
+  defaultTarget?: string;
+
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 1b7f35d081..c38f0a86e6 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "^3.0.0-beta.0",
     "@angular/animations": "~14.0.0",
     "@angular/cdk": "^14.0.4",
     "@angular/common": "~14.0.0",
@@ -20,6 +19,7 @@
     "@angular/fire": "^7.4.1",
     "@angular/flex-layout": "^14.0.0-beta.40",
     "@angular/forms": "~14.0.0",
+    "@angular/google-maps": "^15.0.3",
     "@angular/material": "^14.0.4",
     "@angular/material-moment-adapter": "^14.0.4",
     "@angular/platform-browser": "~14.0.0",
@@ -99,4 +99,4 @@
     "moment",
     "crypto-js"
   ]
-}
\ No newline at end of file
+}