MUnique · eduardosmaniotto · Jun 15, 2026 · Jun 16, 2026 · Jun 16, 2026 · Jun 16, 2026
diff --git a/src/Dapr/GameServer.Host/Layout/NavMenu.razor b/src/Dapr/GameServer.Host/Layout/NavMenu.razor
@@ -1,25 +1,25 @@
 @using MUnique.OpenMU.DataModel.Configuration
 @using MUnique.OpenMU.Persistence;
 
-<nav>
-    <div>
-        <a href="">OpenMU</a>
-        <button @onclick="ToggleNavMenu">
-            <span></span>
+<nav class="rounded-bottom shadow-lg">
+    <div class="top-row ps-4 navbar navbar-dark">
+        <a class="navbar-brand" href="">OpenMU</a>
+        <button class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
         </button>
     </div>
 
     <!-- Hiding it programmatically is not a good idea here, because we want to hide it based on the width of the device/window. -->
     <div class="@NavMenuCssClass">
-        <ul>
+        <ul class="nav flex-column">
 
-            <li>
-                <NavLink href="" Match="NavLinkMatch.All">
+            <li class="nav-item px-3">
+                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                     <span class="oi oi-home" aria-hidden="true"></span> Home
                 </NavLink>
             </li>
-            <li>
-                <NavLink href="maps">
+            <li class="nav-item px-3">
+                <NavLink class="nav-link" href="maps">
                     <span class="oi oi-project" aria-hidden="true"></span> Maps
                 </NavLink>
             </li>

diff --git a/src/Dapr/GameServer.Host/Layout/ReconnectModal.razor.css b/src/Dapr/GameServer.Host/Layout/ReconnectModal.razor.css
@@ -21,7 +21,7 @@
 
 
 #components-reconnect-modal {
-    background-color: white;
+    background-color: var(--omu-bg);
     width: 20rem;
     margin: 20vh auto;
     padding: 2rem;
@@ -90,18 +90,18 @@
 
 #components-reconnect-modal button {
     border: 0;
-    background-color: #6b9ed2;
+    background-color: var(--omu-link-primary);
     color: white;
     padding: 4px 24px;
     border-radius: 4px;
 }
 
     #components-reconnect-modal button:hover {
-        background-color: #3b6ea2;
+        background-color: var(--omu-link-primary-border);
     }
 
     #components-reconnect-modal button:active {
-        background-color: #6b9ed2;
+        background-color: var(--omu-link-primary);
     }
 
 .components-rejoining-animation {

diff --git a/src/Web/AdminPanel/Components/App.razor b/src/Web/AdminPanel/Components/App.razor
@@ -10,7 +10,7 @@
 }
 
 <!DOCTYPE html>
-<html lang="en" data-theme="@this.CurrentTheme">
+<html lang="en" data-bs-theme="@this.CurrentTheme">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/src/Web/AdminPanel/Components/ConnectServer/ConnectServerConfiguration.razor b/src/Web/AdminPanel/Components/ConnectServer/ConnectServerConfiguration.razor
@@ -53,7 +53,7 @@ else
         <div id="maxConnectionsPerAddressInput">
             <div>
                 <span id="connections-addon">
-                    <InputCheckbox id="checkMaxConnectionsPerAddressInput" @bind-Value=@this.Configuration.CheckMaxConnectionsPerAddress/>
+                    <InputCheckbox class="form-check-input" id="checkMaxConnectionsPerAddressInput" @bind-Value=@this.Configuration.CheckMaxConnectionsPerAddress/>
                 </span>
             </div>
             <InputNumber min="1" @bind-Value=@this.Configuration.MaxConnectionsPerAddress aria-describedby="connections-addon"/>
@@ -69,7 +69,7 @@ else
 
     <ValidationSummary/>
     <div>
-        <button type="submit" class="primary-button">@Resources.Save</button>
+        <button type="submit" class="btn btn-primary">@Resources.Save</button>
         @if (this.OnCancel != null)
         {
             <button type="button" onClick=@this.OnCancel>@Resources.Cancel</button>

diff --git a/src/Web/AdminPanel/Components/Layout/ConfigNavMenu.razor b/src/Web/AdminPanel/Components/Layout/ConfigNavMenu.razor
@@ -2,38 +2,35 @@
 @using MUnique.OpenMU.DataModel.Configuration.Items
 @using MUnique.OpenMU.Web.AdminPanel.Properties
 
-<li class="dropdown">
-    <a href="" role="button" aria-haspopup="true" aria-expanded="false" @onclick="ToggleGameConfig">
+<li class="nav-item px-3 dropdown@(this._expandGameConfig ? " expanded" : "")">
+    <a class="nav-link dropdown-toggle" href="" role="button" aria-haspopup="true" aria-expanded="@(this._expandGameConfig)" @onclick="ToggleGameConfig" @onclick:preventDefault="true">
         <span class="oi oi-cog" aria-hidden="true"></span> @Resources.GameConfiguration
     </a>
-    @if (this._expandGameConfig)
-    {
-        <div>
-            <NavLink href="@($"edit-config/{typeof(SystemConfiguration).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.System</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(GameClientDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.GameClients</NavLink>
-            <hr/>
-            <NavLink href="@($"edit-config/{typeof(GameConfiguration).FullName}/{this.GameConfigurationId}/hide-collections")" @onclick="() => NavigationHistory.Clear()">@Resources.General</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(MonsterDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.Monsters</NavLink>
-            <NavLink href="@($"merchants/")" @onclick="() => NavigationHistory.Clear()">@Resources.MerchantStores</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(CharacterClass).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.CharacterClasses</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(Skill).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.Skills</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(ItemDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.Items</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(DropItemGroup).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.DropItemGroups</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(GameMapDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.GameMaps</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(MiniGameDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.MiniGames</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(WarpInfo).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.WarpList</NavLink>
-            <NavLink href="@($"edit-config-grid/{typeof(JewelMix).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.JewelMixes</NavLink>
-            <hr/>
-            <NavLink href="plugins" @onclick="() => NavigationHistory.Clear()">
-                <span class="oi oi-puzzle-piece" aria-hidden="true"></span> @Resources.Plugins
-            </NavLink>
-            <NavLink href="map-editor" @onclick="() => NavigationHistory.Clear()">
-                <span class="oi oi-globe" aria-hidden="true"></span> @Resources.MapEditor
-            </NavLink>
-            <hr/>
-            <NavLink href="@($"edit-config/{typeof(GameConfiguration).FullName}/")" Match="NavLinkMatch.All" @onclick="() => NavigationHistory.Clear()">
-                <span class="oi oi-cog" aria-hidden="true"></span> @Resources.FullConfiguration
-            </NavLink>
-        </div>
-    }
+    <div class="dropdown-menu@(this._expandGameConfig ? " show" : "")">
+        <NavLink class="dropdown-item" href="@($"edit-config/{typeof(SystemConfiguration).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.System</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(GameClientDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.GameClients</NavLink>
+        <hr class="dropdown-divider"/>
+        <NavLink class="dropdown-item" href="@($"edit-config/{typeof(GameConfiguration).FullName}/{this.GameConfigurationId}/hide-collections")" @onclick="() => NavigationHistory.Clear()">@Resources.General</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(MonsterDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.Monsters</NavLink>
+        <NavLink class="dropdown-item" href="@($"merchants/")" @onclick="() => NavigationHistory.Clear()">@Resources.MerchantStores</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(CharacterClass).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.CharacterClasses</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(Skill).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.Skills</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(ItemDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.Items</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(DropItemGroup).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.DropItemGroups</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(GameMapDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.GameMaps</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(MiniGameDefinition).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.MiniGames</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(WarpInfo).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.WarpList</NavLink>
+        <NavLink class="dropdown-item" href="@($"edit-config-grid/{typeof(JewelMix).FullName}/")" @onclick="() => NavigationHistory.Clear()">@Resources.JewelMixes</NavLink>
+        <hr class="dropdown-divider"/>
+        <NavLink class="dropdown-item" href="plugins" @onclick="() => NavigationHistory.Clear()">
+            <span class="oi oi-puzzle-piece" aria-hidden="true"></span> @Resources.Plugins
+        </NavLink>
+        <NavLink class="dropdown-item" href="map-editor" @onclick="() => NavigationHistory.Clear()">
+            <span class="oi oi-globe" aria-hidden="true"></span> @Resources.MapEditor
+        </NavLink>
+        <hr class="dropdown-divider"/>
+        <NavLink class="dropdown-item" href="@($"edit-config/{typeof(GameConfiguration).FullName}/")" Match="NavLinkMatch.All" @onclick="() => NavigationHistory.Clear()">
+            <span class="oi oi-cog" aria-hidden="true"></span> @Resources.FullConfiguration
+        </NavLink>
+    </div>
 </li>
diff --git a/src/Web/AdminPanel/Components/Layout/ConfigurationSearch.razor b/src/Web/AdminPanel/Components/Layout/ConfigurationSearch.razor
@@ -2,11 +2,9 @@
 
 <div class="configuration-search">
     <div class="input-group configuration-search-container">
-        <div class="input-group-prepend">
-            <span class="input-group-text">
-                <span class="oi oi-magnifying-glass" aria-hidden="true"></span>
-            </span>
-        </div>
+        <span class="input-group-text">
+            <span class="oi oi-magnifying-glass" aria-hidden="true"></span>
+        </span>
         <input type="search"
                class="form-control configuration-search__input"
                placeholder="@($"{Resources.Search}...")"
@@ -20,11 +18,9 @@
                autocomplete="off" />
         @if (this._isLoading)
         {
-            <div class="input-group-append">
-                <span class="input-group-text">
-                    <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
-                </span>
-            </div>
+            <span class="input-group-text">
+                <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
+            </span>
         }
     </div>
     @if (this._searchResults.Count > 0 && !string.IsNullOrWhiteSpace(this._searchText))

diff --git a/src/Web/AdminPanel/Components/Layout/ConfigurationSearch.razor.css b/src/Web/AdminPanel/Components/Layout/ConfigurationSearch.razor.css
@@ -48,7 +48,7 @@
     color: var(--omu-text);
 }
 
-@media (max-width: 640.98px) {
+@media (max-width: 767.98px) {
     .configuration-search {
         width: 100%;
         min-width: 0;

diff --git a/src/Web/AdminPanel/Components/Layout/CreationPanel.razor.css b/src/Web/AdminPanel/Components/Layout/CreationPanel.razor.css
@@ -8,7 +8,7 @@
     flex-direction: row;
     background-color: var(--omu-surface-2);
     color: var(--omu-text);
-    border-left: 1px solid var(--omu-border);
+    border-left: var(--bs-border-width) solid var(--omu-border);
     box-shadow: -2px 0 5px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     z-index: 2;
@@ -23,7 +23,7 @@
     width: 1.75rem;
     padding: 0;
     border: none;
-    border-right: 1px solid var(--omu-border);
+    border-right: var(--bs-border-width) solid var(--omu-border);
     background-color: var(--omu-surface-muted);
     cursor: pointer;
     color: var(--omu-text);
@@ -58,22 +58,20 @@
 .creation-panel-body ::deep .form-actions {
     position: sticky;
     bottom: 0;
-    background-color: #fff;
-    margin-top: auto;
-    border-top: 1px solid #dee2e6;
+    background-color: var(--omu-surface-2);
+    margin: 1rem -1.5rem -1rem -1.5rem;
+    padding: 1rem 1.25rem;
+    border-top: var(--bs-border-width) solid var(--omu-border);
     display: flex;
     gap: 0.5rem;
     justify-content: flex-start;
-    padding: 1rem 0;
-    width: 100%;
     box-sizing: border-box;
 }
 
 /* Let the form controls fill the wider panel so the space is actually used. */
 .creation-panel-body ::deep input:not([type="checkbox"]):not([type="radio"]),
 .creation-panel-body ::deep select,
-.creation-panel-body ::deep textarea,
-.creation-panel-body ::deep {
+.creation-panel-body ::deep textarea {
     width: 100%;
     box-sizing: border-box;
 }
diff --git a/src/Web/AdminPanel/Components/Layout/MainLayout.razor b/src/Web/AdminPanel/Components/Layout/MainLayout.razor
@@ -19,15 +19,15 @@
     </div>
 
     <main>
-        <header class="main-header navbar navbar-expand navbar-light bg-light border-bottom">
+        <header class="main-header navbar navbar-expand navbar-dark border-bottom bg-body-tertiary">
             <div class="container-fluid px-4">
                 <div class="header-content d-flex align-items-center w-100">
                     <div class="header-search flex-grow-1">
                         <ConfigurationSearch />
                     </div>
-                    <div class="header-actions ml-3 d-flex align-items-center">
+                    <div class="header-actions ms-3 d-flex align-items-center">
                         <ThemeSelector IsDark="@this.IsDarkTheme" />
-                        <a href="https://munique.net" target="_blank" class="text-secondary small ml-3">@Resources.About</a>
+                        <a href="https://munique.net" target="_blank" class="text-secondary small ms-3">@Resources.About</a>
                     </div>
                 </div>
             </div>

diff --git a/src/Web/AdminPanel/Components/Layout/MainLayout.razor.css b/src/Web/AdminPanel/Components/Layout/MainLayout.razor.css
@@ -44,7 +44,7 @@ main {
     margin-right: 1rem;
 }
 
-@media (max-width: 640.98px) {
+@media (max-width: 767.98px) {
     .header-content {
         flex-direction: column;
         align-items: stretch !important;