diff --git a/src/Core/Components/AppBar/FluentAppBar.razor b/src/Core/Components/AppBar/FluentAppBar.razor
index c5e43176d7..515ee959fa 100644
--- a/src/Core/Components/AppBar/FluentAppBar.razor
+++ b/src/Core/Components/AppBar/FluentAppBar.razor
@@ -20,7 +20,7 @@
 		@if (AppsOverflow.Any())
 		{
 			<FluentKeyCode Anchor="@($"appbar-more-{Id}")" OnKeyDown="@HandlePopoverKeyDownAsync" />
-			<div id="@($"appbar-more-{Id}")" class="fluent-appbar-item" style="min-width: var(--appbar-item-size);" tabindex="0" fixed title="@Localizer[Localization.LanguageResource.AppBar_MoreItems]" @onclick="@TogglePopoverAsync">
+			<div id="@($"appbar-more-{Id}")" class="fluent-appbar-more-item" style="min-width: var(--appbar-item-size);" tabindex="0" fixed="fixed" title="@Localizer[Localization.LanguageResource.AppBar_MoreItems]" @onclick="@TogglePopoverAsync">
 				<FluentStack Orientation="Orientation.Vertical"
 							 HorizontalAlignment="HorizontalAlignment.Center"
 							 VerticalAlignment="VerticalAlignment.Center"
@@ -39,7 +39,7 @@
 			<FluentPopover @bind-Opened="_showMoreItems"
 						   AnchorId="@($"appbar-more-{Id}")"
 						   OffsetVertical="-48"
-						   OffsetHorizontal="68">
+						   OffsetHorizontal="320">
 				<ChildContent>
 					<div class="fluent-appbar-popover">
 						@if (PopoverShowSearch)
diff --git a/src/Core/Components/AppBar/FluentAppBar.razor.css b/src/Core/Components/AppBar/FluentAppBar.razor.css
index 4e07e6c834..3bfaae4236 100644
--- a/src/Core/Components/AppBar/FluentAppBar.razor.css
+++ b/src/Core/Components/AppBar/FluentAppBar.razor.css
@@ -11,7 +11,7 @@
     background-color: var(--colorNeutralBackground2);
   }
 
-  .fluent-appbar .fluent-appbar-item {
+  .fluent-appbar .fluent-appbar-item, .fluent-appbar .fluent-appbar-more-item {
     --appbar-active-indicator-width: 2px;
     cursor: pointer;
     width: var(--appbar-item-size);
@@ -19,7 +19,8 @@
   }
 
 
-    .fluent-appbar .fluent-appbar-item:hover {
+    .fluent-appbar .fluent-appbar-item:hover,
+    .fluent-appbar .fluent-appbar-more-item:hover {
       background-color: var(--colorNeutralBackground5Hover);
     }
 
@@ -91,18 +92,23 @@
 .fluent-appbar-item:hover svg[part="icon-rest"],
 .fluent-appbar-item:not(:hover):not(.active) svg[part="icon-active"],
 .fluent-appbar-item:not(:hover) a.active svg[part="icon-rest"],
-.fluent-appbar-item[overflow] {
-    display: none;
+.fluent-appbar-item[overflow],
+.fluent-appbar-more-item:hover svg[part="icon-rest"],
+.fluent-appbar-more-item:not(:hover):not(.active) svg[part="icon-active"],
+.fluent-appbar-more-item[overflow] {
+  display: none;
 }
 
-.fluent-appbar-item:not(:hover) .active svg[part="icon-active"] {
+.fluent-appbar-item:not(:hover) .active svg[part="icon-active"],
+.fluent-appbar-more-item:not(:hover) .active svg[part="icon-active"] {
     display: block;
 }
 
-.fluent-appbar-item[inpopover]:not(:hover) a.active svg[part="icon-active"] {
+.fluent-appbar-item[inpopover]:not(:hover) a.active svg[part="icon-active"]
     display: none;
 }
 
-.fluent-appbar-item[inpopover=true]:not(:hover) a.active svg[part="icon-rest"] {
+.fluent-appbar-item[inpopover=true]:not(:hover) a.active svg[part="icon-rest"]
+{
     display: block;
 }
diff --git a/tests/Core/Components/AppBar/FluentAppBarTests.razor b/tests/Core/Components/AppBar/FluentAppBarTests.razor
index e6d2085062..0e0007fce0 100644
--- a/tests/Core/Components/AppBar/FluentAppBarTests.razor
+++ b/tests/Core/Components/AppBar/FluentAppBarTests.razor
@@ -566,7 +566,7 @@
 		cut.Render();
 
 		// Show popover by clicking the "More" button
-		var moreButton = cut.Find(".fluent-appbar-item[fixed]");
+		var moreButton = cut.Find(".fluent-appbar-more-item[fixed]");
 		await moreButton.ClickAsync();
 		cut.Render();