diff --git a/src/Core/Components/AppBar/FluentAppBar.razor b/src/Core/Components/AppBar/FluentAppBar.razor
index 3c4902688f..014fcbf160 100644
--- a/src/Core/Components/AppBar/FluentAppBar.razor
+++ b/src/Core/Components/AppBar/FluentAppBar.razor
@@ -39,7 +39,7 @@
 						   OffsetVertical="-48"
 						   OffsetHorizontal="68">
 				<ChildContent>
-					<div style="width: 320px; height: 200px; padding: 1rem;">
+					<div class="fluent-appbar-popover">
 						@if (PopoverShowSearch)
 						{
 							<FluentTextInput @bind-Value="@_searchTerm"
@@ -55,7 +55,7 @@
 								</StartTemplate>
 							</FluentTextInput>
 						}
-						<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3" Style="margin-top: 2px">
+						<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3" Style="margin-top: 2px; background-color: inherit;">
 							@foreach (var item in _searchResults)
 							{
 								<FluentGridItem xs="4" Style="width: 100px; height: 85px; display: flex; height: 85px; align-content: center; flex-wrap: wrap; justify-content: center;">
diff --git a/src/Core/Components/AppBar/FluentAppBar.razor.css b/src/Core/Components/AppBar/FluentAppBar.razor.css
index 317c1b3373..2a89a5e981 100644
--- a/src/Core/Components/AppBar/FluentAppBar.razor.css
+++ b/src/Core/Components/AppBar/FluentAppBar.razor.css
@@ -2,7 +2,11 @@
   --appbar-item-size: 68;
   background-color: var(--colorNeutralBackground2);
 }
-  .fluent-appbar fluent-popover-b > div {
+  .fluent-appbar fluent-popover-b .fluent-appbar-popover {
+    width: 320px;
+    height: 200px;
+    padding: 1rem;
+    overflow: auto;
     background-color: var(--colorNeutralBackground2);
   }