diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index b37b26a2b..e2f589098 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -1,54 +1,66 @@
 <template>
 
-  <KListWithOverflow
-    overflowDirection="start"
-    :items="preparedCrumbs"
-  >
-    <!-- Render individual breadcrumb items -->
-    <template #item="{ item }">
-      <li>
-        <KRouterLink
-          v-if="item.link"
-          :text="item.text"
-          :to="item.link"
-        >
+  <div class="breadcrumbs">
+    <KListWithOverflow
+      overflowDirection="start"
+      :items="preparedCrumbs"
+    >
+      <!-- Render individual breadcrumb items -->
+      <template #item="{ item }">
+        <li>
+          <KRouterLink
+            v-if="item.link"
+            :text="item.text"
+            :to="item.link"
+          >
+
+            <template #text="{ text }">
+              <span class="breadcrumbs-crumb-text">{{ text }}</span>
+            </template>
+          </KRouterLink>
+          <span v-else>{{ item.text }}</span>
+        </li>
+      </template>
+
 
-          <template #text="{ text }">
-            <span class="breadcrumbs-crumb-text">{{ text }}</span>
+      <template #divider>
+        <span class="breadcrumbs-divider">›</span>
+      </template>
+
+
+      <template #more="{ overflowItems }">
+        <KIconButton
+          size="small"
+          icon="chevronDown"
+          appearance="raised-button"
+        >
+          <template #menu>
+            <KDropdownMenu
+              :options="overflowItems
+                .filter(item => item.type !== 'divider') 
+                .map(item => ({
+                  label: item.text, 
+                  link: item.link ? item.link : null 
+                }))"
+            >
+              <template #option="{ option }">
+                <template v-if="option.link">
+                  <a :href="option.link" class="dropdown-link" target="_blank" rel="noopener noreferrer">
+                    {{ option.label }}
+                  </a>
+                </template>
+                <template v-else>
+                  <span class="dropdown-text">{{ option.label }}</span>
+                </template>
+              </template>
+            </KDropdownMenu>
           </template>
-        </KRouterLink>
-        <span v-else>{{ item.text }}</span>
-      </li>
-    </template>
-
-    <!-- Render the separator between items -->
-    <!-- issue :: but right now it is not placing separators between items of list -->
-    <template #divider>
-      <span class="breadcrumbs-divider">›</span>
-    </template>
-
-    <!-- Render the "more" overflow dropdown and its separator -->
-    <template #more="{ overflowItems }">
-      <KIconButton
-        size="small"
-        icon="chevronDown"
-        appearance="raised-button"
-      >
-        <template #menu>
-          <!-- issue :: dropdown menu shows only text of the overflowItems but not the link , I don't know whether i am doing the right way to reference link or not -->
-          <KDropdownMenu
-            :options="overflowItems
-              .filter(item => item.type !== 'separator') // Filter out separators
-              .map(item => ({
-                label: item.text, // Display 'text' in the menu
-                link: item.link ? item.link : null 
-              }))"
-          />
-        </template>
-      </KIconButton>
-      <span class="breadcrumbs-divider">›</span>
-    </template>
-  </KListWithOverflow>
+        </KIconButton>
+
+      </template>
+    </KListWithOverflow>
+
+  </div>
 
 </template>
 
@@ -71,29 +83,76 @@
         if (!this.showSingleItem && crumbs.length <= 1) {
           return [];
         }
-        // Add separators between items
-        return crumbs.flatMap((item, index) =>
-          index > 0 ? [{ type: 'separator' }, item] : [item]
-        );
+        // Add dividers between items
+        return crumbs.flatMap((item, index) => (index > 0 ? [{ type: 'divider' }, item] : [item]));
       },
     },
+    mounted() {
+      console.log('Prepared Crumbs on Mount:', this.preparedCrumbs);
+    },
   };
 
 </script>
 
-<style scoped>
-  .breadcrumbs-divider {
-    margin: 0 10px;
-    color: black; /* Adjust color for the ">" separator */
+<style scoped lang="scss">
+
+  $crumb-max-width: 300px;
+  .breadcrumbs {
+    height: 32px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    overflow: visible;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 32px;
+    white-space: nowrap;
   }
 
   .breadcrumbs-crumb-text {
-    color: #007aff; /* Link color */
+    display: inline-block;
+    width: 100%;
+    max-width: $crumb-max-width;
+    overflow: hidden;
+    font-weight: bold;
     text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
+  .breadcrumbs-divider {
+    margin-right: 8px;
+    margin-left: 8px;
+    color: #000000;
+  }
+
+  .breadcrumbs-crumb-text {
     font-weight: bold;
+    color: #007aff;
+    text-decoration: none;
   }
 
   li {
+    position: static;
     display: inline;
   }
+  .dropdown-link {
+    display: inline-block;
+    padding: 16px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #4368f5;
+    text-decoration: underline;
+    cursor: pointer;
+    background-color: transparent;
+  }
+
+  /* Dropdown text styles (non-clickable items) */
+  .dropdown-text {
+    display: inline-block;
+    padding: 16px;
+    font-size: 16px;
+    color: #000000;
+    background-color: transparent;
+  }
+
 </style>
diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
index 625b40b37..acc3f921d 100644
--- a/lib/KDropdownMenu.vue
+++ b/lib/KDropdownMenu.vue
@@ -17,12 +17,11 @@
     >
       <!-- Slot to set a header to the dropdown menu -->
       <slot name="header"></slot>
-      <UiMenu 
-        ref="menu" 
-        :options="options" 
-        :hasIcons="hasIcons" 
-        @select="handleSelection" 
-      />
+      <UiMenu ref="menu" :options="options" :hasIcons="hasIcons" @select="handleSelection">
+        <template #option="{ option }">
+          <slot name="option" :option="option"></slot>
+        </template> 
+      </UiMenu>
     </UiPopover>
   </div>
 
diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
index 19d6b5312..a9ca628e0 100644
--- a/lib/KListWithOverflow.vue
+++ b/lib/KListWithOverflow.vue
@@ -5,19 +5,31 @@
     class="list-wrapper"
     :style="appearanceOverrides"
   >
+    <!-- Render More Button Before List for 'start' Direction -->
+    <div
+      v-if="overflowDirection === 'start'"
+      ref="moreButtonWrapper"
+      class="more-button-wrapper"
+    >
+      <slot
+        v-if="isMoreButtonVisible"
+        name="more"
+        :overflowItems="overflowItems"
+      ></slot>
+    </div>
+
     <div
       ref="list"
       class="list"
     >
       <template v-for="(item) in items">
-        <!-- @slot Slot for rendering divider items -->
+        <!-- Divider Slot -->
         <slot
           v-if="isDivider(item)"
           name="divider"
           :divider="item"
-        >
-        </slot>
-        <!-- @slot Slot responsible of rendering each item in the visible list -->
+        ></slot>
+        <!-- Item Slot -->
         <slot
           v-else
           name="item"
@@ -25,12 +37,13 @@
         ></slot>
       </template>
     </div>
+
+    <!-- Render More Button After List for 'end' Direction -->
     <div
+      v-if="overflowDirection === 'end'"
       ref="moreButtonWrapper"
       class="more-button-wrapper"
-      :class="{ 'start-button': overflowDirection === 'start' }"
     >
-      <!-- @slot Slot responsible of rendering the "see more" button. This slot receives as prop a list `overflowItems` with items that dont fit into the visible list.-->
       <slot
         v-if="isMoreButtonVisible"
         name="more"
@@ -42,6 +55,7 @@
 </template>
 
 
+
 <script>
 
   import throttle from 'lodash/throttle';
@@ -73,7 +87,7 @@
       },
       overflowDirection: {
         type: String,
-        default: 'end',
+        default: 'start',
         validator(value) {
           return ['start', 'end'].includes(value);
         },
@@ -156,7 +170,6 @@
 
         const itemsSizes = [];
 
-        // Collect the sizes of all items
         for (let i = 0; i < list.children.length; i++) {
           const item = list.children[i];
           const itemSize = this.getSize(item);
@@ -266,7 +279,7 @@
 <style scoped>
   .list-wrapper {
     display: flex;
-    justify-content: space-between; 
+     justify-content:flex-start;
     width: 100%;
   }
 
@@ -274,7 +287,7 @@
     overflow: visible;
     display: flex;
     flex-wrap: wrap;
-    
+    justify-content:flex-start;
     align-items: center;
   }
 
@@ -285,12 +298,11 @@
 
   .more-button-wrapper {
     visibility: visible;
-    order: 0; /* Ensure it remains in its original position for keyboard navigation */
   }
 
   /* When the 'start-button' class is added, position visually at the start */
   .more-button-wrapper.start-button {
-    order: -1; /* Moves visually to the start */
+  order:-1;
     z-index: 1; /* Ensure it's in front if needed */
   }