diff --git a/CaddyManager/Components/Layout/MainLayout.razor b/CaddyManager/Components/Layout/MainLayout.razor
index 20c3b35..197a72c 100644
--- a/CaddyManager/Components/Layout/MainLayout.razor
+++ b/CaddyManager/Components/Layout/MainLayout.razor
@@ -10,22 +10,22 @@
 @* Needed for snackbars *@
 <MudSnackbarProvider />
 
-<MudLayout>
-    <MudAppBar Elevation="1" Dense="true">
-        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@_drawer.ToggleDrawer" />
-        <MudText Typo="Typo.h6">Caddy Manager</MudText>
-        <MudSpacer />
-        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://pikachu-gitea.duydao.org/ebolo/CaddyManager" Target="_blank" />
-    </MudAppBar>
-    <NavigationDrawer @ref="_drawer"/>
-    <MudMainContent Class="pt-16 px-16">
-        <MudContainer Class="mt-6">
-            @Body
-        </MudContainer>
-    </MudMainContent>
-</MudLayout>
+<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>
 
-@code
+@if (!_isInitialing)
 {
-    private NavigationDrawer _drawer = null!;
-}
+    <MudLayout>
+        <MudAppBar Elevation="1" Dense="true">
+            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@_drawer.ToggleDrawer" />
+            <MudText Typo="Typo.h6">Caddy Manager</MudText>
+            <MudSpacer />
+            <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://pikachu-gitea.duydao.org/ebolo/CaddyManager" Target="_blank" />
+        </MudAppBar>
+        <NavigationDrawer @ref="_drawer"/>
+        <MudMainContent Class="pt-16 px-16">
+            <MudContainer Class="mt-6">
+                @Body
+            </MudContainer>
+        </MudMainContent>
+    </MudLayout>
+}
\ No newline at end of file
diff --git a/CaddyManager/Components/Layout/MainLayout.razor.cs b/CaddyManager/Components/Layout/MainLayout.razor.cs
new file mode 100644
index 0000000..e87bac4
--- /dev/null
+++ b/CaddyManager/Components/Layout/MainLayout.razor.cs
@@ -0,0 +1,37 @@
+using MudBlazor;
+
+namespace CaddyManager.Components.Layout;
+
+public partial class MainLayout
+{
+    // To allow the menu button to control the drawer
+    private NavigationDrawer _drawer = null!;
+    
+    private bool _isDarkMode;
+    private bool _isInitialing = true;
+    private MudThemeProvider _mudThemeProvider = null!;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Get the system preference for dark mode
+            _isDarkMode = await _mudThemeProvider.GetSystemPreference();
+            await _mudThemeProvider.WatchSystemPreference(OnSystemPreferenceChanged);
+            _isInitialing = false;
+            StateHasChanged();
+        }
+    }
+    
+    /// <summary>
+    /// Method to handle the system preference change for dark mode
+    /// </summary>
+    /// <param name="newValue"></param>
+    /// <returns></returns>
+    private Task OnSystemPreferenceChanged(bool newValue)
+    {
+        _isDarkMode = newValue;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+}
\ No newline at end of file