diff --git a/.github/workflows/azure-dev-build-only.yml b/.github/workflows/azure-dev-build-only.yml
index 74445c59..b0048536 100644
--- a/.github/workflows/azure-dev-build-only.yml
+++ b/.github/workflows/azure-dev-build-only.yml
@@ -59,10 +59,18 @@ jobs:
         dotnet test ./test/AzureOpenAIProxy.AppHost.Tests --logger "trx" --collect:"XPlat Code Coverage"
         dotnet test ./test/AzureOpenAIProxy.ApiApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
 
-    # - name: Run integration tests
-    #   shell: bash
-    #   run: |
-    #     dotnet test ./test/AzureOpenAIProxy.PlaygroundApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
+    - name: Run integration tests
+      shell: bash
+      run: |
+        dotnet run --project ./src/AzureOpenAIProxy.AppHost &
+
+        DOTNET_PID=$!
+
+        sleep 30
+
+        dotnet test ./test/AzureOpenAIProxy.PlaygroundApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
+
+        kill $DOTNET_PID
 
     - name: Publish test results
       if: ${{ !cancelled() }}
diff --git a/.github/workflows/azure-dev.yml b/.github/workflows/azure-dev.yml
index 9f93296b..2217c6aa 100644
--- a/.github/workflows/azure-dev.yml
+++ b/.github/workflows/azure-dev.yml
@@ -67,10 +67,24 @@ jobs:
       run: |
         dotnet build
 
-    - name: Test solution
+    - name: Run unit tests
       shell: bash
       run: |
-        dotnet test --logger "trx" --collect:"XPlat Code Coverage"
+        dotnet test ./test/AzureOpenAIProxy.AppHost.Tests --logger "trx" --collect:"XPlat Code Coverage"
+        dotnet test ./test/AzureOpenAIProxy.ApiApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
+
+    - name: Run integration tests
+      shell: bash
+      run: |
+        dotnet run --project ./src/AzureOpenAIProxy.AppHost &
+
+        DOTNET_PID=$!
+
+        sleep 30
+
+        dotnet test ./test/AzureOpenAIProxy.PlaygroundApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
+
+        kill $DOTNET_PID
 
     - name: Publish test results
       uses: bibipkins/dotnet-test-reporter@main
diff --git a/Directory.Build.props b/Directory.Build.props
index 7236a166..a3531f4c 100644
--- a/Directory.Build.props
+++ b/Directory.Build.props
@@ -15,6 +15,7 @@
     <OpenTelemetryExtensionsVersion>1.*</OpenTelemetryExtensionsVersion>
     <OpenTelemetryInstrumentationVersion>1.*</OpenTelemetryInstrumentationVersion>
     <SwashbuckleVersion>6.*</SwashbuckleVersion>
+    <FluentUIVersion>4.*</FluentUIVersion>
 
     <CoverletVersion>6.*</CoverletVersion>
     <FluentAssertionsVersion>6.*</FluentAssertionsVersion>
diff --git a/src/AzureOpenAIProxy.ApiApp/AzureOpenAIProxy.ApiApp.csproj b/src/AzureOpenAIProxy.ApiApp/AzureOpenAIProxy.ApiApp.csproj
index 7e65d79c..92c1aae3 100644
--- a/src/AzureOpenAIProxy.ApiApp/AzureOpenAIProxy.ApiApp.csproj
+++ b/src/AzureOpenAIProxy.ApiApp/AzureOpenAIProxy.ApiApp.csproj
@@ -1,10 +1,6 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-
     <AssemblyName>AzureOpenAIProxy.ApiApp</AssemblyName>
     <RootNamespace>AzureOpenAIProxy.ApiApp</RootNamespace>
   </PropertyGroup>
diff --git a/src/AzureOpenAIProxy.AppHost/AzureOpenAIProxy.AppHost.csproj b/src/AzureOpenAIProxy.AppHost/AzureOpenAIProxy.AppHost.csproj
index 42926f2d..e75fe621 100644
--- a/src/AzureOpenAIProxy.AppHost/AzureOpenAIProxy.AppHost.csproj
+++ b/src/AzureOpenAIProxy.AppHost/AzureOpenAIProxy.AppHost.csproj
@@ -2,11 +2,12 @@
 
   <PropertyGroup>
     <OutputType>Exe</OutputType>
-    <TargetFramework>net8.0</TargetFramework>
-    <ImplicitUsings>enable</ImplicitUsings>
-    <Nullable>enable</Nullable>
     <IsAspireHost>true</IsAspireHost>
+
     <UserSecretsId>f6c81741-4dbe-4a07-86e3-83a42810f5ec</UserSecretsId>
+
+    <AssemblyName>AzureOpenAIProxy.AppHost</AssemblyName>
+    <RootNamespace>AzureOpenAIProxy.AppHost</RootNamespace>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/AzureOpenAIProxy.PlaygroundApp.csproj b/src/AzureOpenAIProxy.PlaygroundApp/AzureOpenAIProxy.PlaygroundApp.csproj
index eca1c41f..c9ffe317 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/AzureOpenAIProxy.PlaygroundApp.csproj
+++ b/src/AzureOpenAIProxy.PlaygroundApp/AzureOpenAIProxy.PlaygroundApp.csproj
@@ -1,17 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-
-
     <AssemblyName>AzureOpenAIProxy.PlaygroundApp</AssemblyName>
     <RootNamespace>AzureOpenAIProxy.PlaygroundApp</RootNamespace>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="Azure.AI.OpenAI" Version="$(AzureOpenAIVersion)" />
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="$(FluentUIVersion)" />
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="$(FluentUIVersion)" />
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="$(FluentUIVersion)" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/App.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/App.razor
index 975b820e..6b73ab6b 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/App.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/App.razor
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="AzureOpenAIProxy.PlaygroundApp.styles.css" />
+    <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet />
 </head>
@@ -15,6 +16,7 @@
 <body>
     <Routes />
     <script src="_framework/blazor.web.js"></script>
+    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
 </body>
 
 </html>
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor
index 5a24bb13..4836891f 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor
@@ -21,3 +21,8 @@
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
+
+<FluentToastProvider />
+<FluentDialogProvider />
+<FluentTooltipProvider />
+<FluentMessageBarProvider />
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Components/_Imports.razor b/src/AzureOpenAIProxy.PlaygroundApp/Components/_Imports.razor
index f2637f09..e8aaa070 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Components/_Imports.razor
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Components/_Imports.razor
@@ -1,10 +1,16 @@
 @using System.Net.Http
 @using System.Net.Http.Json
+
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Web
-@using static Microsoft.AspNetCore.Components.Web.RenderMode
 @using Microsoft.AspNetCore.Components.Web.Virtualization
+
+@using Microsoft.FluentUI.AspNetCore.Components
+
 @using Microsoft.JSInterop
+
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+
 @using AzureOpenAIProxy.PlaygroundApp
 @using AzureOpenAIProxy.PlaygroundApp.Components
diff --git a/src/AzureOpenAIProxy.PlaygroundApp/Program.cs b/src/AzureOpenAIProxy.PlaygroundApp/Program.cs
index 0481d2e2..a61639f7 100644
--- a/src/AzureOpenAIProxy.PlaygroundApp/Program.cs
+++ b/src/AzureOpenAIProxy.PlaygroundApp/Program.cs
@@ -1,5 +1,7 @@
 using AzureOpenAIProxy.PlaygroundApp.Clients;
 
+using Microsoft.FluentUI.AspNetCore.Components;
+
 using App = AzureOpenAIProxy.PlaygroundApp.Components.App;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -10,6 +12,8 @@
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents();
 
+builder.Services.AddFluentUIComponents();
+
 builder.Services.AddScoped<IOpenAIApiClient, OpenAIApiClient>();
 
 var app = builder.Build();
diff --git a/src/AzureOpenAIProxy.ServiceDefaults/AzureOpenAIProxy.ServiceDefaults.csproj b/src/AzureOpenAIProxy.ServiceDefaults/AzureOpenAIProxy.ServiceDefaults.csproj
index 0a26159f..433b7cda 100644
--- a/src/AzureOpenAIProxy.ServiceDefaults/AzureOpenAIProxy.ServiceDefaults.csproj
+++ b/src/AzureOpenAIProxy.ServiceDefaults/AzureOpenAIProxy.ServiceDefaults.csproj
@@ -1,10 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
-    <ImplicitUsings>enable</ImplicitUsings>
-    <Nullable>enable</Nullable>
     <IsAspireSharedProject>true</IsAspireSharedProject>
+
+    <AssemblyName>AzureOpenAIProxy.ServiceDefaults</AssemblyName>
+    <RootNamespace>AzureOpenAIProxy.ServiceDefaults</RootNamespace>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/test/AzureOpenAIProxy.AppHost.Tests/PlaygroundApp/Pages/HomePageTests.cs b/test/AzureOpenAIProxy.AppHost.Tests/PlaygroundApp/Pages/HomePageTests.cs
new file mode 100644
index 00000000..63bfcff1
--- /dev/null
+++ b/test/AzureOpenAIProxy.AppHost.Tests/PlaygroundApp/Pages/HomePageTests.cs
@@ -0,0 +1,65 @@
+using System.Net;
+
+using AzureOpenAIProxy.AppHost.Tests.Fixtures;
+
+using FluentAssertions;
+
+namespace AzureOpenAIProxy.AppHost.Tests.PlaygroundApp.Pages;
+
+public class HomePageTests(AspireAppHostFixture host) : IClassFixture<AspireAppHostFixture>
+{
+    [Fact]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_OK()
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+
+        // Act
+        var response = await httpClient.GetAsync("/");
+
+        // Assert
+        response.StatusCode.Should().Be(HttpStatusCode.OK);
+    }
+
+    [Theory]
+    [InlineData("_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css")]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_CSS_Elements(string expected)
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+
+        // Act
+        var html = await httpClient.GetStringAsync("/");
+
+        // Assert
+        html.Should().Contain(expected);
+    }
+
+    [Theory]
+    [InlineData("_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js")]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_JavaScript_Elements(string expected)
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+
+        // Act
+        var html = await httpClient.GetStringAsync("/");
+
+        // Assert
+        html.Should().Contain(expected);
+    }
+
+    [Theory]
+    [InlineData("<div class=\"fluent-tooltip-provider\"></div>")]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_HTML_Elements(string expected)
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+
+        // Act
+        var html = await httpClient.GetStringAsync("/");
+
+        // Assert
+        html.Should().Contain(expected);
+    }
+}