diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLine.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLine.vue
index 9fdc7164a..ccb1c2826 100644
--- a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLine.vue
+++ b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLine.vue
@@ -4,22 +4,22 @@
     class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full"
     :style="{ paddingTop: top + 'px', left: left + 'px' }"
   >
-    <div v-show="debug">{{centerOf(entity.name)}}</div>
+    <div v-show="debug">{{ centerOf(entity.name) }}</div>
     <participant v-if="renderParticipants" :entity="entity" :offsetTop="top" />
-    <div v-else class="line w0 mx-auto flex-grow w-px"></div>
+    <div v-else class="line absolute inset-0 w0 mx-auto flex-grow w-px"></div>
   </div>
 </template>
 
 <script>
-import parentLogger from '../../../../logger/logger';
-import EventBus from '../../../../EventBus';
-import { mapGetters, mapState } from 'vuex';
-import Participant from './Participant.vue';
-const logger = parentLogger.child({ name: 'LifeLine' });
+import parentLogger from "../../../../logger/logger";
+import EventBus from "../../../../EventBus";
+import { mapGetters, mapState } from "vuex";
+import Participant from "./Participant.vue";
+const logger = parentLogger.child({ name: "LifeLine" });
 export default {
-  name: 'life-line',
+  name: "life-line",
   components: { Participant },
-  props: ['entity', 'context', 'groupLeft', 'inGroup', 'renderParticipants'],
+  props: ["entity", "context", "groupLeft", "inGroup", "renderParticipants"],
   data: () => {
     return {
       translateX: 0,
@@ -27,8 +27,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['centerOf']),
-    ...mapState(['scale']),
+    ...mapGetters(["centerOf"]),
+    ...mapState(["scale"]),
     debug() {
       return !!localStorage.zenumlDebug;
     },
@@ -43,7 +43,10 @@ export default {
       logger.debug(`nextTick after updated for ${this.entity.name}`);
     });
 
-    EventBus.$on('participant_set_top', () => this.$nextTick(() => this.setTop()));
+    EventBus.$on(
+      "participant_set_top",
+      this.$nextTick(() => this.setTop()),
+    );
 
     // setTimeout( () => {
     //   this.setTop()
@@ -65,15 +68,23 @@ export default {
   },
   methods: {
     onSelect() {
-      this.$store.commit('onSelect', this.entity.name);
+      this.$store.commit("onSelect", this.entity.name);
     },
     setTop() {
       // escape entity name to avoid 'not a valid selector' error.
-      const escapedName = this.entity.name.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
+      /* eslint-disable no-useless-escape */
+      const escapedName = this.entity.name.replace(
+        /([ #;&,.+*~\':"!^$[\]()=>|\/@])/g,
+        "\\$1",
+      );
       const $el = this.$store.getters.diagramElement;
       const firstMessage = $el?.querySelector(`[data-to="${escapedName}"]`);
       const isVisible = firstMessage?.offsetParent != null;
-      if (firstMessage && firstMessage.attributes['data-type'].value === 'creation' && isVisible) {
+      if (
+        firstMessage &&
+        firstMessage.attributes["data-type"].value === "creation" &&
+        isVisible
+      ) {
         logger.debug(`First message to ${this.entity.name} is creation`);
         const rootY = this.$el.getBoundingClientRect().y;
         const messageY = firstMessage.getBoundingClientRect().y;
@@ -89,7 +100,11 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .lifeline .line {
-  background: linear-gradient(to bottom, transparent 50%, var(--color-border-base) 50%);
+  background: linear-gradient(
+    to bottom,
+    transparent 50%,
+    var(--color-border-base) 50%
+  );
   background-size: 1px 10px;
 }
 </style>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Block.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Block.vue
index 50ac09b53..d316dd50b 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Block.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Block.vue
@@ -6,7 +6,7 @@
       :key="index"
     >
       <Statement
-        :inheritFromOccurrence="inheritFromOccurrence"
+        :fromOccurrence="fromOccurrence"
         :context="stat"
         :collapsed="collapsed"
         :selfCallIndent="selfCallIndent"
@@ -27,7 +27,7 @@ const props = defineProps<{
   number?: string;
   incremental?: boolean;
   collapsed?: boolean;
-  inheritFromOccurrence?: boolean;
+  fromOccurrence?: boolean;
 }>();
 const statements = computed(() => props.context?.stat() || []);
 const getNumber = (index: number) => {
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.vue
index aa316460e..ee6a6cc41 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.vue
@@ -3,12 +3,15 @@
     class="interaction sync inline-block"
     v-on:click.stop="onClick"
     :data-to="to"
+    :data-from="origin"
     data-type="interaction"
     :data-signature="signature"
     :class="{
       highlight: isCurrent,
       self: isSelf,
-      'inited-from-occurrence': inheritFromOccurrence,
+      'from-occurrence': fromOccurrence,
+      'from-no-occurrence': providedFrom && providedFrom !== origin,
+      'inited-from-occurrence': isInitedFromOccurrence,
       'right-to-left': rightToLeft,
     }"
     :style="{
@@ -74,7 +77,7 @@ export default {
     "selfCallIndent",
     "commentObj",
     "number",
-    "inheritFromOccurrence",
+    "fromOccurrence",
   ],
   computed: {
     // add tracker to the mapGetters
@@ -164,7 +167,7 @@ export default {
       return this.isSelf ? "SelfInvocation" : "Message";
     },
     isInitedFromOccurrence: function () {
-      return this.message?.isInitedFromOccurrence(this.from);
+      return this.message?.isInitedFromOccurrence(this.context);
     },
   },
   methods: {
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Occurrence/Occurrence.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Occurrence/Occurrence.vue
index 319ecb1e5..0f75da76a 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Occurrence/Occurrence.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Occurrence/Occurrence.vue
@@ -12,13 +12,14 @@
       :collapsed="collapsed"
       @click="this.toggle"
     />
+    <!-- TODO: use util function instead of the `fromOccurrence` prop  -->
     <block
       v-if="this.context.braceBlock()"
       :context="context.braceBlock().block()"
       :selfCallIndent="selfCallIndent"
       :number="number"
       :collapsed="collapsed"
-      :inheritFromOccurrence="true"
+      :fromOccurrence="true"
     ></block>
   </div>
 </template>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.vue
index 17bf22f64..bc2e4e001 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.vue
@@ -4,8 +4,10 @@
     v-on:click.stop="onClick"
     :data-signature="signature"
     :class="{
+      'to-occurrence': isToOccurrence,
       'right-to-left': rightToLeft,
       highlight: isCurrent,
+      'from-occurrence': fromOccurrence,
       'self-invocation': isSelf,
     }"
     :style="{
@@ -40,7 +42,14 @@ function isNullOrUndefined(value) {
 
 export default {
   name: "interaction-async",
-  props: ["context", "comment", "commentObj", "selfCallIndent", "number"],
+  props: [
+    "context",
+    "comment",
+    "commentObj",
+    "selfCallIndent",
+    "number",
+    "fromOccurrence",
+  ],
   computed: {
     ...mapGetters(["distance", "cursor", "onElementClick"]),
     from: function () {
@@ -101,6 +110,9 @@ export default {
     messageClassNames() {
       return this.commentObj?.classNames;
     },
+    isToOccurrence() {
+      return this.asyncMessage.isToOccurrence(this.asyncMessage);
+    },
   },
   methods: {
     onClick() {
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue
index 1a307dea1..47c61544d 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue
@@ -1,7 +1,11 @@
 <template>
   <div
     class="message border-skin-message-arrow border-b-2 flex items-end"
+    :data-from="providedFrom"
+    :data-origin="origin"
+    :data-to="to"
     :class="{
+      hasParent: hasParent,
       'flex-row-reverse': rtl,
       return: type === 'return',
       'right-to-left': rtl,
@@ -19,17 +23,26 @@
         <div :style="textStyle" :class="classNames">
           {{ content }}
         </div>
-        <div class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500" v-if="numbering">{{ number }}</div>
+        <div
+          class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500"
+          v-if="numbering"
+        >
+          {{ number }}
+        </div>
       </div>
     </div>
-    <point class="flex-shrink-0 transform translate-y-1/2 -my-px" :fill="fill" :rtl="rtl" />
+    <point
+      class="flex-shrink-0 transform translate-y-1/2 -my-px"
+      :fill="fill"
+      :rtl="rtl"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useStore } from 'vuex';
-import Point from './Point/Point.vue';
-import { computed, toRefs, ref } from 'vue';
+import { useStore } from "vuex";
+import Point from "./Point/Point.vue";
+import { computed, toRefs, ref } from "vue";
 const props = defineProps<{
   context?: any;
   content: string;
@@ -38,35 +51,40 @@ const props = defineProps<{
   textStyle?: Record<string, string | number>;
   classNames?: any;
   number?: string;
-}>()
-const { context, content, rtl, type, textStyle, classNames, number } = toRefs(props)
-const store = useStore()
-const messageRef = ref()
-const numbering = computed(() => store.state.numbering)
-const isAsync = computed(() => type?.value === 'async')
+}>();
+const { context, content, rtl, type, textStyle, classNames, number } =
+  toRefs(props);
+const store = useStore();
+const messageRef = ref();
+const numbering = computed(() => store.state.numbering);
+const isAsync = computed(() => type?.value === "async");
+const origin = computed(() => props.context?.Origin());
+const providedFrom = computed(() => props.context?.From());
+const to = computed(() => props.context?.Owner());
+
 const borderStyle = computed(() => {
   switch (type?.value) {
-    case 'sync':
-    case 'async':
-      return 'solid'
-    case 'creation':
-    case 'return':
-      return 'dashed'
+    case "sync":
+    case "async":
+      return "solid";
+    case "creation":
+    case "return":
+      return "dashed";
   }
-  return ''
-})
+  return "";
+});
 const fill = computed(() => {
   switch (type?.value) {
-    case 'sync':
-    case 'async':
-      return true
-    case 'creation':
-    case 'return':
-      return false
+    case "sync":
+    case "async":
+      return true;
+    case "creation":
+    case "return":
+      return false;
   }
-  return false
-})
+  return false;
+});
 const onClick = () => {
-  store.getters.onMessageClick(context, messageRef.value)
-}
-</script>
\ No newline at end of file
+  store.getters.onMessageClick(context, messageRef.value);
+};
+</script>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Statement.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Statement.vue
index 71a36065a..78f9f5ae0 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Statement.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Statement.vue
@@ -10,7 +10,7 @@
     :commentObj="commentObj"
     :selfCallIndent="selfCallIndent"
     :number="number"
-    :inheritFromOccurrence="inheritFromOccurrence"
+    :fromOccurrence="fromOccurrence"
   ></component>
 </template>
 
@@ -29,13 +29,7 @@ import Comment from "../../../../../Comment/Comment";
 
 export default {
   name: "statement",
-  props: [
-    "context",
-    "selfCallIndent",
-    "number",
-    "collapsed",
-    "inheritFromOccurrence",
-  ],
+  props: ["context", "selfCallIndent", "number", "collapsed", "fromOccurrence"],
   computed: {
     comment: function () {
       return this.context.getComment() ? this.context.getComment() : "";
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue
index 728c427a1..eaea76ab5 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue
@@ -66,14 +66,6 @@ onUpdated(() => {
     border-right-width: 7px;
   }
 
-  .alt,
-  .fragment {
-    .interaction.sync {
-      border-left-width: 7px;
-      //border-right-width: 0;
-    }
-  }
-
   .occurrence {
     .occurrence {
       .interaction.sync,
@@ -86,17 +78,26 @@ onUpdated(() => {
   .occurrence {
     .interaction.sync,
     .interaction.async {
-      border-left-width: 7px;
+      border-left-width: 8px;
+    }
+
+    .interaction.sync.from-no-occurrence {
+      border-left-width: 0;
     }
     .interaction.sync.right-to-left {
       border-right-width: 7px;
     }
     .interaction.async.right-to-left {
       border-right-width: 7px;
+      border-left-width: 7px;
+    }
+    .interaction.async.right-to-left.from-occurrence {
       border-left-width: 0;
     }
+    .interaction.async.right-to-left.to-occurrence {
+      border-left-width: 7px;
+    }
   }
-
   .interaction.sync.right-to-left {
     /* This border width configuration make sure the content width is
        the same as from the source occurrence's right border to target
diff --git a/src/parser/Owner.js b/src/parser/Owner.js
index 277c6b573..fac729eae 100644
--- a/src/parser/Owner.js
+++ b/src/parser/Owner.js
@@ -1,4 +1,4 @@
-import { default as sequenceParser } from '../generated-parser/sequenceParser';
+import { default as sequenceParser } from "../generated-parser/sequenceParser";
 
 const seqParser = sequenceParser;
 const CreationContext = seqParser.CreationContext;
@@ -19,7 +19,7 @@ CreationContext.prototype.Constructor = function () {
 // Owner of              m1    m2    m3
 CreationContext.prototype.Owner = function () {
   if (!this.Constructor()) {
-    return 'Missing Constructor';
+    return "Missing Constructor";
   }
   const assignee = this.Assignee();
   const type = this.Constructor();
@@ -51,3 +51,16 @@ AsyncMessageContext.prototype.To = function () {
 AsyncMessageContext.prototype.Owner = function () {
   return this.To() || getOwnerFromAncestor(this.parentCtx);
 };
+
+AsyncMessageContext.prototype.isToOccurrence = function (current) {
+  const target = current.Owner();
+  while (current != null) {
+    if (current?.message) {
+      if (current?.message()?.From() === target) {
+        return true;
+      }
+    }
+    current = current.parentCtx;
+  }
+  return false;
+};