diff --git a/src/components/bottom-bar-item/__tests__/__snapshots__/bottom-bar-item.test.tsx.snap b/src/components/bottom-bar-item/__tests__/__snapshots__/bottom-bar-item.test.tsx.snap
index f93357a2..73ae101b 100644
--- a/src/components/bottom-bar-item/__tests__/__snapshots__/bottom-bar-item.test.tsx.snap
+++ b/src/components/bottom-bar-item/__tests__/__snapshots__/bottom-bar-item.test.tsx.snap
@@ -4,16 +4,20 @@ exports[`BottomBarItem > should render the component as HTMLAnchorElement with a
 <DocumentFragment>
   <a
     aria-current="page"
-    class="mocked-styled-3 el-anchor-bottom-bar-item-container"
+    class="mocked-styled-4 el-anchor-bottom-bar-item-container"
     href="#"
   >
     <div
-      class="mocked-styled-0 el-bottom-bar-item-icon"
-      role="presentation"
+      class="mocked-styled-2 el-bottom-bar-item-content"
     >
-      <span>
-        icon
-      </span>
+      <div
+        class="mocked-styled-0 el-bottom-bar-item-icon"
+        role="presentation"
+      >
+        <span>
+          icon
+        </span>
+      </div>
     </div>
     <span
       class="mocked-styled-1 el-bottom-bar-item-label"
@@ -27,16 +31,20 @@ exports[`BottomBarItem > should render the component as HTMLAnchorElement with a
 exports[`BottomBarItem > should render the component as HTMLAnchorElement with default state 1`] = `
 <DocumentFragment>
   <a
-    class="mocked-styled-3 el-anchor-bottom-bar-item-container"
+    class="mocked-styled-4 el-anchor-bottom-bar-item-container"
     href="#"
   >
     <div
-      class="mocked-styled-0 el-bottom-bar-item-icon"
-      role="presentation"
+      class="mocked-styled-2 el-bottom-bar-item-content"
     >
-      <span>
-        icon
-      </span>
+      <div
+        class="mocked-styled-0 el-bottom-bar-item-icon"
+        role="presentation"
+      >
+        <span>
+          icon
+        </span>
+      </div>
     </div>
     <span
       class="mocked-styled-1 el-bottom-bar-item-label"
@@ -51,15 +59,19 @@ exports[`BottomBarItem > should render the component as HTMLButtonElement with a
 <DocumentFragment>
   <button
     aria-current="true"
-    class="mocked-styled-4 el-button-bottom-bar-item-container"
+    class="mocked-styled-5 el-button-bottom-bar-item-container"
   >
     <div
-      class="mocked-styled-0 el-bottom-bar-item-icon"
-      role="presentation"
+      class="mocked-styled-2 el-bottom-bar-item-content"
     >
-      <span>
-        icon
-      </span>
+      <div
+        class="mocked-styled-0 el-bottom-bar-item-icon"
+        role="presentation"
+      >
+        <span>
+          icon
+        </span>
+      </div>
     </div>
     <span
       class="mocked-styled-1 el-bottom-bar-item-label"
@@ -74,24 +86,28 @@ exports[`BottomBarItem > should render the component as HTMLButtonElement with b
 <DocumentFragment>
   <button
     aria-current="true"
-    class="mocked-styled-4 el-button-bottom-bar-item-container"
+    class="mocked-styled-5 el-button-bottom-bar-item-container"
   >
     <div
-      class="mocked-styled-0 el-bottom-bar-item-icon"
-      role="presentation"
+      class="mocked-styled-2 el-bottom-bar-item-content"
     >
-      <span>
-        icon
-      </span>
+      <div
+        class="mocked-styled-0 el-bottom-bar-item-icon"
+        role="presentation"
+      >
+        <span>
+          icon
+        </span>
+      </div>
+      <span
+        class="mocked-styled-3 el-bottom-bar-item-badge"
+      />
     </div>
     <span
       class="mocked-styled-1 el-bottom-bar-item-label"
     >
       Label
     </span>
-    <span
-      class="mocked-styled-2 el-bottom-bar-item-badge"
-    />
   </button>
 </DocumentFragment>
 `;
@@ -100,15 +116,19 @@ exports[`BottomBarItem > should render the component as HTMLButtonElement with d
 <DocumentFragment>
   <button
     aria-current="true"
-    class="mocked-styled-4 el-button-bottom-bar-item-container"
+    class="mocked-styled-5 el-button-bottom-bar-item-container"
   >
     <div
-      class="mocked-styled-0 el-bottom-bar-item-icon"
-      role="presentation"
+      class="mocked-styled-2 el-bottom-bar-item-content"
     >
-      <span>
-        icon
-      </span>
+      <div
+        class="mocked-styled-0 el-bottom-bar-item-icon"
+        role="presentation"
+      >
+        <span>
+          icon
+        </span>
+      </div>
     </div>
     <span
       class="mocked-styled-1 el-bottom-bar-item-label"
diff --git a/src/components/bottom-bar-item/bottom-bar-item.stories.tsx b/src/components/bottom-bar-item/bottom-bar-item.stories.tsx
index 4c0c3173..a69a78e5 100644
--- a/src/components/bottom-bar-item/bottom-bar-item.stories.tsx
+++ b/src/components/bottom-bar-item/bottom-bar-item.stories.tsx
@@ -7,6 +7,7 @@ import { Icon } from '../icon'
 import {
   ElAnchorBottomBarItemContainer,
   ElBottomBarItemBadge,
+  ElBottomBarItemContent,
   ElBottomBarItemIcon,
   ElBottomBarItemLabel,
   ElButtonBottomBarItemContainer,
@@ -96,9 +97,11 @@ export const StyleAnchorUsage: Story = {
         </ElAnchorBottomBarItemContainer>
 
         <ElAnchorBottomBarItemContainer href={args.href} aria-current={undefined} className="el-mx5">
-          <ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
+          <ElBottomBarItemContent>
+            <ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
+            <ElBottomBarItemBadge />
+          </ElBottomBarItemContent>
           <ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>
-          <ElBottomBarItemBadge role="status" />
         </ElAnchorBottomBarItemContainer>
       </FlexContainer>
     )
@@ -124,9 +127,11 @@ export const StyleButtonUsage: Story = {
         </ElButtonBottomBarItemContainer>
 
         <ElButtonBottomBarItemContainer onClick={action('handleClick')} aria-current={undefined} className="el-mx5">
-          <ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
-          <ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>
-          <ElBottomBarItemBadge role="status" />
+          <ElBottomBarItemContent>
+            <ElBottomBarItemIcon>{args?.icon}</ElBottomBarItemIcon>
+            <ElBottomBarItemBadge />
+          </ElBottomBarItemContent>
+          <ElBottomBarItemLabel>{args?.children}</ElBottomBarItemLabel>{' '}
         </ElButtonBottomBarItemContainer>
       </FlexContainer>
     )
diff --git a/src/components/bottom-bar-item/bottom-bar-item.tsx b/src/components/bottom-bar-item/bottom-bar-item.tsx
index b263ce8c..db240ea1 100644
--- a/src/components/bottom-bar-item/bottom-bar-item.tsx
+++ b/src/components/bottom-bar-item/bottom-bar-item.tsx
@@ -2,6 +2,7 @@ import type { AnchorHTMLAttributes, ButtonHTMLAttributes, FC, MouseEventHandler,
 import {
   ElAnchorBottomBarItemContainer,
   ElBottomBarItemBadge,
+  ElBottomBarItemContent,
   ElBottomBarItemIcon,
   ElBottomBarItemLabel,
   ElButtonBottomBarItemContainer,
@@ -68,9 +69,11 @@ export const BottomBarItem: FC<BottomBarItemProps> = (props) => {
 
     return (
       <ElButtonBottomBarItemContainer {...rest} aria-current={isActive ? 'true' : undefined}>
-        <ElBottomBarItemIcon role="presentation">{icon}</ElBottomBarItemIcon>
+        <ElBottomBarItemContent>
+          <ElBottomBarItemIcon role="presentation">{icon}</ElBottomBarItemIcon>
+          {hasBadge && <ElBottomBarItemBadge />}
+        </ElBottomBarItemContent>
         <ElBottomBarItemLabel>{children}</ElBottomBarItemLabel>
-        {hasBadge && <ElBottomBarItemBadge />}
       </ElButtonBottomBarItemContainer>
     )
   } else {
@@ -78,9 +81,11 @@ export const BottomBarItem: FC<BottomBarItemProps> = (props) => {
 
     return (
       <ElAnchorBottomBarItemContainer {...rest} aria-current={isActive ? 'page' : undefined}>
-        <ElBottomBarItemIcon role="presentation">{icon}</ElBottomBarItemIcon>
+        <ElBottomBarItemContent>
+          <ElBottomBarItemIcon role="presentation">{icon}</ElBottomBarItemIcon>
+          {hasBadge && <ElBottomBarItemBadge />}
+        </ElBottomBarItemContent>
         <ElBottomBarItemLabel>{children}</ElBottomBarItemLabel>
-        {hasBadge && <ElBottomBarItemBadge />}
       </ElAnchorBottomBarItemContainer>
     )
   }
diff --git a/src/components/bottom-bar-item/styles.ts b/src/components/bottom-bar-item/styles.ts
index 2dab65a1..d52dc753 100644
--- a/src/components/bottom-bar-item/styles.ts
+++ b/src/components/bottom-bar-item/styles.ts
@@ -22,15 +22,16 @@ export const ElBottomBarItemLabel = styled.span`
 const baseStyles = `
   background-color: var(--fill-white, white);
   outline: none;
-  width: 44px; 
+  width: 44px;
   border: var(--border-none, 0);
   display: flex;
   cursor: pointer;
-  padding: var(--space-half, 2px) var(--space-none, 0px); 
+  padding: var(--space-half, 2px) var(--space-none, 0px);
   flex-direction: column;
   align-items: center;
   gap: var(--space-half, 2px);
   position: relative;
+  flex: 1 0 0;
 
   color: var(--icon-secondary, #607890);
 
@@ -39,10 +40,14 @@ const baseStyles = `
   }
 `
 
+export const ElBottomBarItemContent = styled.div`
+  position: relative;
+`
+
 export const ElBottomBarItemBadge = styled.span`
   position: absolute;
-  top: 1px;
-  right: 6px;
+  top: -3px;
+  right: -3px;
   width: var(--size-2, 8px);
   height: var(--size-2, 8px);
   background-color: var(--icon-error, #f01830);