diff --git a/Directory.Packages.props b/Directory.Packages.props
index ca553fbb6..115e4daac 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -6,6 +6,7 @@
     <PackageVersion Include="Microsoft.Extensions.Options" Version="7.0.1" />
     <PackageVersion Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="7.0.0" />
     <PackageVersion Include="Microsoft.Fast.Components.FluentUI" Version="3.2.0" />
+    <PackageVersion Include="Microsoft.Fast.Components.FluentUI.Icons" Version="3.1.1" />
     <PackageVersion Include="Newtonsoft.Json" Version="13.0.3" />
     <PackageVersion Include="NuGet.Versioning" Version="6.7.0" />
     <PackageVersion Include="PublishSPAforGitHubPages.Build" Version="2.1.0" />
diff --git a/src/Phalanx.App/Pages/Management/GalleryItem.razor b/src/Phalanx.App/Pages/Management/GalleryItem.razor
index b2685c98f..6e17f3b93 100644
--- a/src/Phalanx.App/Pages/Management/GalleryItem.razor
+++ b/src/Phalanx.App/Pages/Management/GalleryItem.razor
@@ -29,15 +29,15 @@
                     span.local-version only shows if the repo is loaded into memory
                 *@
                 <FluentButton class="mx-1 mb-1" @onclick="HydrateCat" Disabled="HasFiles">
-                    <FluentIcon Name="@FluentIcons.Save" Slot="start" Filled="true" Size="@IconSize.Size16" />
+                    <FluentIcon Icon="@(Icons.Filled.Size16.Save)" Slot="start" />
                     Pull
                 </FluentButton>
                 <FluentButton class="mx-1 mb-1" Disabled="true">
-                    <FluentIcon Name="@FluentIcons.ArrowUp" Slot="start" Size="IconSize.Size16" Filled=true />
+                    <FluentIcon Icon="@(Icons.Filled.Size16.ArrowUp)" Slot="start" />
                     Update
                 </FluentButton>
                 <FluentButton class="mx-1 mb-1" Disabled="!HasFiles">
-                    <FluentIcon Name="@FluentIcons.Delete" Slot="start" Filled="true" Size="@IconSize.Size16" />
+                    <FluentIcon Icon="@(Icons.Filled.Size16.Delete)" Slot="start" />
                     Remove
                 </FluentButton>
             </div>
diff --git a/src/Phalanx.App/Pages/RosterEdit.razor b/src/Phalanx.App/Pages/RosterEdit.razor
index 9cfaf8b5b..322daed1b 100644
--- a/src/Phalanx.App/Pages/RosterEdit.razor
+++ b/src/Phalanx.App/Pages/RosterEdit.razor
@@ -14,20 +14,17 @@
     <TitlePart>@roster.Name</TitlePart>
     <CascadingValue Value="@Editor">
         <FluentTabs>
-            <FluentTab>Edit</FluentTab>
-            <FluentTabPanel>
+            <FluentTab Label="Edit">
                 <RootRosterEdit />
-            </FluentTabPanel>
-            <FluentTab>Options</FluentTab>
-            <FluentTabPanel>
+            </FluentTab>
+            <FluentTab Label="Options">
                 <RosterOptions />
-            </FluentTabPanel>
-            <FluentTab>Preview</FluentTab>
-            <FluentTabPanel>
+            </FluentTab>
+            <FluentTab Label="Preview">
                 <FluentSelect Items=formatter.Formats @bind-SelectedOption=@Format OptionText="@(x => x.Name)" />
 
                 <Phalanx.App.Pages.Printing.RosterPreviewer RosterNode=roster Format=Format />
-            </FluentTabPanel>
+            </FluentTab>
         </FluentTabs>
     </CascadingValue>
 }
diff --git a/src/Phalanx.App/Pages/RosterPrinter.razor b/src/Phalanx.App/Pages/RosterPrinter.razor
index 507178503..8512acb92 100644
--- a/src/Phalanx.App/Pages/RosterPrinter.razor
+++ b/src/Phalanx.App/Pages/RosterPrinter.razor
@@ -57,14 +57,12 @@
         {
             var formattedOutput = RosterFormatter.Format(RosterNode, selectedFormat);
             <FluentTabs class="output-tabs">
-                <FluentTab>Preview</FluentTab>
-                <FluentTabPanel slot="tabpanel">
+                <FluentTab Label="Preview">
                     <RosterPreviewer RosterNode="RosterNode" Format="selectedFormat" />
-                </FluentTabPanel>
-                <FluentTab>Raw text</FluentTab>
-                <FluentTabPanel slot="tabpanel">
+                </FluentTab>
+                <FluentTab Label="Raw text">
                     <pre>@formattedOutput</pre>
-                </FluentTabPanel>
+                </FluentTab>
             </FluentTabs>
         }
     </FluentCard>
diff --git a/src/Phalanx.App/Phalanx.App.csproj b/src/Phalanx.App/Phalanx.App.csproj
index cbf936492..8889a76b7 100644
--- a/src/Phalanx.App/Phalanx.App.csproj
+++ b/src/Phalanx.App/Phalanx.App.csproj
@@ -11,6 +11,7 @@
     <PackageReference Include="Microsoft.Extensions.Options" />
     <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" />
     <PackageReference Include="Microsoft.Fast.Components.FluentUI" />
+    <PackageReference Include="Microsoft.Fast.Components.FluentUI.Icons" />
     <PackageReference Include="Newtonsoft.Json" />
     <PackageReference Include="NuGet.Versioning" />
     <PackageReference Include="PublishSPAforGitHubPages.Build" />
diff --git a/src/Phalanx.App/Program.cs b/src/Phalanx.App/Program.cs
index b7f9f6f22..dbf46ca9c 100644
--- a/src/Phalanx.App/Program.cs
+++ b/src/Phalanx.App/Program.cs
@@ -17,6 +17,6 @@
 builder.Services.AddSingleton<GalleryBrowserState>();
 
 builder.Services.AddScoped<GalleryHttpClient>();
-builder.Services.AddFluentUIComponents();
+builder.Services.AddFluentUIComponents(options => options.HostingModel = BlazorHostingModel.WebAssembly);
 
 await builder.Build().RunAsync();