diff --git a/src/NexusMods.App.UI/Controls/LoadoutBadge/LoadoutBadge.axaml b/src/NexusMods.App.UI/Controls/LoadoutBadge/LoadoutBadge.axaml
index 4fbead8af3..0223dd2c41 100644
--- a/src/NexusMods.App.UI/Controls/LoadoutBadge/LoadoutBadge.axaml
+++ b/src/NexusMods.App.UI/Controls/LoadoutBadge/LoadoutBadge.axaml
@@ -1,4 +1,4 @@
-<reactiveUi:ReactiveUserControl x:TypeArguments="loadoutBadge:ILoadoutBadgeViewModel" 
+<reactiveUi:ReactiveUserControl x:TypeArguments="loadoutBadge:ILoadoutBadgeViewModel"
                                 xmlns="https://github.com/avaloniaui"
                                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -7,6 +7,7 @@
                                 xmlns:spinner="clr-namespace:NexusMods.App.UI.Controls.Spinner"
                                 xmlns:reactiveUi="http://reactiveui.net"
                                 xmlns:loadoutBadge="clr-namespace:NexusMods.App.UI.Controls.LoadoutBadge"
+                                xmlns:panels="clr-namespace:Avalonia.Labs.Panels;assembly=Avalonia.Labs.Panels"
                                 mc:Ignorable="d" d:DesignWidth="120" d:DesignHeight="120"
                                 x:Class="NexusMods.App.UI.Controls.LoadoutBadge.LoadoutBadge"
                                 HorizontalAlignment="Right"
@@ -14,15 +15,13 @@
     <Design.DataContext>
         <loadoutBadge:LoadoutBadgeDesignViewModel />
     </Design.DataContext>
-    
-    <Border x:Name="OuterBorder">
-        <StackPanel x:Name="ContentsStackPanel" 
-                    Orientation="Horizontal">
+
+    <panels:FlexPanel x:Name="ContentsFlexPanel">
+        <Border>
             <spinner:Spinner x:Name="Spinner" />
-            <icons:UnifiedIcon x:Name="Icon" 
-                               Classes="Check" />
-            <TextBlock x:Name="ShortName"
-                       Classes="BodyLGBold"/>
-        </StackPanel>
-    </Border>
+        </Border>
+        <icons:UnifiedIcon x:Name="Icon"
+                           Classes="Check" />
+        <TextBlock x:Name="ShortName"/>
+    </panels:FlexPanel>
 </reactiveUi:ReactiveUserControl>
diff --git a/src/NexusMods.App.UI/Controls/LoadoutCard/ILoadoutCardViewModel.cs b/src/NexusMods.App.UI/Controls/LoadoutCard/ILoadoutCardViewModel.cs
index 59a1fbed8c..7c938ae144 100644
--- a/src/NexusMods.App.UI/Controls/LoadoutCard/ILoadoutCardViewModel.cs
+++ b/src/NexusMods.App.UI/Controls/LoadoutCard/ILoadoutCardViewModel.cs
@@ -1,6 +1,31 @@
+using System.Reactive;
+using Avalonia.Media;
+using NexusMods.App.UI.Controls.LoadoutBadge;
+using ReactiveUI;
+
 namespace NexusMods.App.UI.Controls.LoadoutCard;
 
 public interface ILoadoutCardViewModel : IViewModelInterface
 {
+    ILoadoutBadgeViewModel LoadoutBadgeViewModel { get; }
+    
+    string LoadoutName { get; }
+    
+    IImage LoadoutImage { get; }
+    
+    bool IsLoadoutApplied { get; }
+    
+    string HumanizedLoadoutLastApplyTime { get; }
+    
+    string HumanizedLoadoutCreationTime { get; }
+    
+    string LoadoutModCount { get; }
+    
+    bool IsDeleting { get; }
+    
+    ReactiveCommand<Unit, Unit> VisitLoadoutCommand { get; }
+    
+    ReactiveCommand<Unit, Unit> CloneLoadoutCommand { get; }
     
+    ReactiveCommand<Unit, Unit> DeleteLoadoutCommand { get; }
 }
diff --git a/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardDesignViewModel.cs b/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardDesignViewModel.cs
new file mode 100644
index 0000000000..512d6d5fe1
--- /dev/null
+++ b/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardDesignViewModel.cs
@@ -0,0 +1,42 @@
+using System.Reactive;
+using System.Reactive.Disposables;
+using System.Reactive.Linq;
+using Avalonia.Media;
+using Avalonia.Media.Imaging;
+using Avalonia.Platform;
+using NexusMods.App.UI.Controls.LoadoutBadge;
+using ReactiveUI;
+using ReactiveUI.Fody.Helpers;
+
+namespace NexusMods.App.UI.Controls.LoadoutCard;
+
+public class LoadoutCardDesignViewModel : AViewModel<ILoadoutCardViewModel>, ILoadoutCardViewModel
+{
+    public LoadoutCardDesignViewModel()
+    {
+        this.WhenActivated(d =>
+            {
+                // Cycle thorough all the states for preview purposes
+                Observable.Interval(TimeSpan.FromSeconds(2.5))
+                    .Subscribe(_ =>
+                    {
+                        IsDeleting = !IsDeleting;
+                    })
+                    .DisposeWith(d);
+            }
+        );
+    }
+    
+    public ILoadoutBadgeViewModel LoadoutBadgeViewModel { get; } = new LoadoutBadgeDesignViewModel();
+    public string LoadoutName { get; } = "Loadout B";
+    public IImage LoadoutImage { get; } = new Bitmap(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/DesignTime/cyberpunk_game.png")));
+
+    public bool IsLoadoutApplied { get; } = true;
+    public string HumanizedLoadoutLastApplyTime { get; } = "Last applied 2 months ago";
+    public string HumanizedLoadoutCreationTime { get; } = "Created 10 months ago";
+    public string LoadoutModCount { get; } = "Mods 276";
+    [Reactive] public bool IsDeleting { get; private set; } = true;
+    public ReactiveCommand<Unit, Unit> VisitLoadoutCommand { get; } = ReactiveCommand.Create(() => { });
+    public ReactiveCommand<Unit, Unit> CloneLoadoutCommand { get; } = ReactiveCommand.Create(() => { });
+    public ReactiveCommand<Unit, Unit> DeleteLoadoutCommand { get; } = ReactiveCommand.Create(() => { });
+}
diff --git a/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml b/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml
index 4b9a2833b3..1ca83d52df 100644
--- a/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml
+++ b/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml
@@ -7,79 +7,96 @@
                                 xmlns:panels="clr-namespace:Avalonia.Labs.Panels;assembly=Avalonia.Labs.Panels"
                                 xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons"
                                 xmlns:loadoutBadge="clr-namespace:NexusMods.App.UI.Controls.LoadoutBadge"
+                                xmlns:spinner="clr-namespace:NexusMods.App.UI.Controls.Spinner"
                                 mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="400"
                                 x:Class="NexusMods.App.UI.Controls.LoadoutCard.LoadoutCardView">
-    <Button x:Name="CardOuterButton">
+    <Design.DataContext>
+        <loadoutCard:LoadoutCardDesignViewModel />
+    </Design.DataContext>
+    
+    <Border x:Name="ContainerBorder">
+        <Grid>
+            <Button x:Name="CardOuterButton">
 
-        <panels:FlexPanel x:Name="CardOuterFlexPanel">
+                <panels:FlexPanel x:Name="CardOuterFlexPanel">
 
-            <Border x:Name="ImageSectionBorder">
-                <Grid>
-                    <Image x:Name="GameImage"
-                           Source="avares://NexusMods.App.UI/Assets/DesignTime/cyberpunk_game.png" />
-                    <Rectangle x:Name="GradientLayerRectangle" />
-                    <loadoutBadge:LoadoutBadge x:Name="LoadoutBadge" />
-                </Grid>
-            </Border>
+                    <Border x:Name="ImageSectionBorder">
+                        <Grid>
+                            <Image x:Name="GameImage" />
+                            <Rectangle x:Name="GradientLayerRectangle" />
+                            <loadoutBadge:LoadoutBadge x:Name="LoadoutBadge" Classes="CardSize" />
+                        </Grid>
+                    </Border>
 
-            <Border x:Name="DetailsSectionBorder">
+                    <Border x:Name="DetailsSectionBorder">
 
-                <panels:FlexPanel x:Name="DetailsSectionFlexPanel">
+                        <panels:FlexPanel x:Name="DetailsSectionFlexPanel">
 
-                    <TextBlock x:Name="LoadoutNameTextBlock"
-                               Classes="BodyLGBold"
-                               Text="Loadout A" />
+                            <TextBlock x:Name="LoadoutNameTextBlock"
+                                       Classes="BodyLGBold" />
 
-                    <panels:FlexPanel x:Name="BodyAndActionsGroupFlexPanel">
+                            <panels:FlexPanel x:Name="BodyAndActionsGroupFlexPanel">
 
-                        <panels:FlexPanel x:Name="DetailsBodyFlexPanel">
+                                <panels:FlexPanel x:Name="DetailsBodyFlexPanel">
 
-                            <panels:FlexPanel x:Name="CurrentlyAppliedFlexPanel">
+                                    <panels:FlexPanel x:Name="CurrentlyAppliedFlexPanel">
 
-                                <TextBlock x:Name="CurrentlyAppliedTextBlock"
-                                           Classes="BodySMBold"
-                                           Text="Currently Applied" />
-                                <icons:UnifiedIcon x:Name="AppliedCheckBoxIcon"
-                                                   Classes="CheckBox" />
+                                        <TextBlock x:Name="CurrentlyAppliedTextBlock"
+                                                   Classes="BodySMBold"
+                                                   Text="Currently Applied" />
+                                        <icons:UnifiedIcon x:Name="AppliedCheckBoxIcon"
+                                                           Classes="CheckBox" />
 
-                            </panels:FlexPanel>
+                                    </panels:FlexPanel>
 
-                            <TextBlock x:Name="LastAppliedTimeTextBlock"
-                                       Classes="BodySMNormal ForegroundSubdued"
-                                       Text="Last applied 2 months ago"
-                                       IsVisible="False" />
+                                    <TextBlock x:Name="LastAppliedTimeTextBlock"
+                                               Classes="BodySMNormal ForegroundSubdued"
+                                               IsVisible="False" />
 
-                            <TextBlock x:Name="CreatedTimeTextBlock"
-                                       Classes="BodySMNormal ForegroundSubdued"
-                                       Text="Created 10 months ago" />
+                                    <TextBlock x:Name="CreatedTimeTextBlock"
+                                               Classes="BodySMNormal ForegroundSubdued"/>
 
-                            <TextBlock x:Name="NumberOfModsTextBlock"
-                                       Classes="BodySMNormal ForegroundSubdued"
-                                       Text="Mods 276" />
+                                    <TextBlock x:Name="NumberOfModsTextBlock"
+                                               Classes="BodySMNormal ForegroundSubdued"/>
 
-                        </panels:FlexPanel>
+                                </panels:FlexPanel>
 
-                        <panels:FlexPanel x:Name="ActionsFlexPanel">
+                                <panels:FlexPanel x:Name="ActionsFlexPanel">
 
-                            <Button x:Name="CreateCopyButton"
-                                    Classes="Rounded Primary">
-                                <StackPanel HorizontalAlignment="Center">
-                                    <TextBlock Classes="BodySMBold" Text="Create Copy" />
-                                </StackPanel>
-                            </Button>
+                                    <Button x:Name="CreateCopyButton"
+                                            Classes="Rounded Primary">
+                                        <StackPanel HorizontalAlignment="Center">
+                                            <TextBlock Classes="BodySMBold" Text="Create Copy" />
+                                        </StackPanel>
+                                    </Button>
 
 
-                            <Button x:Name="DeleteButton"
-                                    Classes="Rounded Primary">
-                                <icons:UnifiedIcon Classes="TrashCanOutline" />
-                            </Button>
-                        </panels:FlexPanel>
+                                    <Button x:Name="DeleteButton"
+                                            Classes="Rounded Primary">
+                                        <icons:UnifiedIcon Classes="TrashCanOutline" />
+                                    </Button>
+                                </panels:FlexPanel>
+
+                            </panels:FlexPanel>
 
-                    </panels:FlexPanel>
+                        </panels:FlexPanel>
+                    </Border>
 
                 </panels:FlexPanel>
-            </Border>
+            </Button>
+
+            <!-- Needs to be on top of the card button to avoid the disabled opacity -->
+            <panels:FlexPanel x:Name="OverlayFlexPanel" IsVisible="False">
+                <panels:FlexPanel x:Name="DeletingSpinnerFlexPanel">
+                    <spinner:Spinner x:Name="DeletingSpinner" />
+                    <TextBlock x:Name="DeletingTextBlock"
+                               Classes="BodyXLNormal ForegroundSubdued"
+                               Text="Deleting..." />
+                </panels:FlexPanel>
+                <Border />
+            </panels:FlexPanel>
+        </Grid>
+    </Border>
+
 
-        </panels:FlexPanel>
-    </Button>
 </reactiveUi:ReactiveUserControl>
diff --git a/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml.cs b/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml.cs
index e35f7bee06..2d83d3defe 100644
--- a/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml.cs
+++ b/src/NexusMods.App.UI/Controls/LoadoutCard/LoadoutCardView.axaml.cs
@@ -1,4 +1,7 @@
+using System.Reactive.Disposables;
+using System.Reactive.Linq;
 using Avalonia.ReactiveUI;
+using ReactiveUI;
 
 namespace NexusMods.App.UI.Controls.LoadoutCard;
 
@@ -7,6 +10,89 @@ public partial class LoadoutCardView : ReactiveUserControl<ILoadoutCardViewModel
     public LoadoutCardView()
     {
         InitializeComponent();
+
+        this.WhenActivated(d =>
+            {
+                // LoadoutBadge
+                this.OneWayBind(ViewModel,
+                        vm => vm.LoadoutBadgeViewModel,
+                        view => view.LoadoutBadge.ViewModel)
+                    .DisposeWith(d);
+                
+                // Game Image
+                this.OneWayBind(ViewModel,
+                        vm => vm.LoadoutImage,
+                        view => view.GameImage.Source)
+                    .DisposeWith(d);
+                
+                // Loadout Name
+                this.OneWayBind(ViewModel,
+                        vm => vm.LoadoutName,
+                        view => view.LoadoutNameTextBlock.Text)
+                    .DisposeWith(d);
+                
+                // Currently applied visibility
+                this.OneWayBind(ViewModel,
+                        vm => vm.IsLoadoutApplied,
+                        view => view.CurrentlyAppliedFlexPanel.IsVisible)
+                    .DisposeWith(d);
+                
+                // Last applied visibility
+                this.WhenAnyValue(view => view.ViewModel!.IsLoadoutApplied)
+                    .Select(isApplied => !isApplied)
+                    .OnUI()
+                    .BindToView(this, view => view.LastAppliedTimeTextBlock.IsVisible)
+                    .DisposeWith(d);
+
+                // Last applied time
+                this.OneWayBind(ViewModel,
+                        vm => vm.HumanizedLoadoutLastApplyTime,
+                        view => view.LastAppliedTimeTextBlock.Text)
+                    .DisposeWith(d);
+                
+                // Created time
+                this.OneWayBind(ViewModel,
+                        vm => vm.HumanizedLoadoutCreationTime,
+                        view => view.CreatedTimeTextBlock.Text)
+                    .DisposeWith(d);
+                
+                // Mod count
+                this.OneWayBind(ViewModel,
+                        vm => vm.LoadoutModCount,
+                        view => view.NumberOfModsTextBlock.Text)
+                    .DisposeWith(d);
+                
+                // Deleting state
+                this.WhenAnyValue(view => view.ViewModel!.IsDeleting)
+                    .OnUI()
+                    .Subscribe(isDeleting =>
+                    {
+                        IsEnabled = !isDeleting;
+                        OverlayFlexPanel.IsVisible = isDeleting;
+                        CreateCopyButton.IsVisible = !isDeleting;
+                        DeleteButton.IsVisible = !isDeleting;
+                    })
+                    .DisposeWith(d);
+
+                // Clone loadout command
+                this.BindCommand(ViewModel,
+                        vm => vm.CloneLoadoutCommand,
+                        view => view.CreateCopyButton)
+                    .DisposeWith(d);
+                
+                // Delete loadout command
+                this.BindCommand(ViewModel,
+                        vm => vm.DeleteLoadoutCommand,
+                        view => view.DeleteButton)
+                    .DisposeWith(d);
+                
+                // Visit loadout command
+                this.BindCommand(ViewModel,
+                        vm => vm.DeleteLoadoutCommand,
+                        view => view.DeleteButton)
+                    .DisposeWith(d);
+            }
+        );
     }
 }
 
diff --git a/src/NexusMods.App.UI/NexusMods.App.UI.csproj b/src/NexusMods.App.UI/NexusMods.App.UI.csproj
index 5f73e613f6..1f8807b939 100644
--- a/src/NexusMods.App.UI/NexusMods.App.UI.csproj
+++ b/src/NexusMods.App.UI/NexusMods.App.UI.csproj
@@ -561,6 +561,12 @@
         <Compile Update="Controls\Settings\Section\SettingSectionViewModel.cs">
           <DependentUpon>ISettingSectionViewModel.cs</DependentUpon>
         </Compile>
+        <Compile Update="Controls\LoadoutBadge\LoadoutBadgeDesignViewModel.cs">
+          <DependentUpon>ILoadoutBadgeViewModel.cs</DependentUpon>
+        </Compile>
+        <Compile Update="Controls\LoadoutCard\LoadoutCardDesignViewModel.cs">
+          <DependentUpon>ILoadoutCardViewModel.cs</DependentUpon>
+        </Compile>
     </ItemGroup>
 
     <ItemGroup>
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LoadoutBadge/LoadoutBadgeStyles.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LoadoutBadge/LoadoutBadgeStyles.axaml
index ada0406120..16001c3dbf 100644
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LoadoutBadge/LoadoutBadgeStyles.axaml
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LoadoutBadge/LoadoutBadgeStyles.axaml
@@ -2,12 +2,18 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:loadoutBadge="clr-namespace:NexusMods.App.UI.Controls.LoadoutBadge;assembly=NexusMods.App.UI"
         xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons"
-        xmlns:spinner="clr-namespace:NexusMods.App.UI.Controls.Spinner;assembly=NexusMods.App.UI">
-    
+        xmlns:spinner="clr-namespace:NexusMods.App.UI.Controls.Spinner;assembly=NexusMods.App.UI"
+        xmlns:panels="clr-namespace:Avalonia.Labs.Panels;assembly=Avalonia.Labs.Panels">
+
     <Design.PreviewWith>
-        <Border Padding="20" Height="120" Width="120">
-            <loadoutBadge:LoadoutBadge />
-        </Border>
+        <WrapPanel Margin="20" Height="120" Width="120">
+            <WrapPanel.Resources >
+                <loadoutBadge:LoadoutBadgeDesignViewModel x:Key="LoadoutBadgeDesignViewModel"/>
+            </WrapPanel.Resources>
+            <loadoutBadge:LoadoutBadge DataContext="{StaticResource LoadoutBadgeDesignViewModel}"/>
+            <loadoutBadge:LoadoutBadge DataContext="{StaticResource LoadoutBadgeDesignViewModel}"
+                                       Classes="CardSize" />
+        </WrapPanel>
     </Design.PreviewWith>
 
     <!-- Add Styles Here -->
@@ -15,34 +21,33 @@
         <Setter Property="Background" Value="{StaticResource NeutralStrong}" />
         <Setter Property="Foreground" Value="{StaticResource NeutralInvertedBrush}" />
         <Setter Property="CornerRadius" Value="0,8,0,4" />
+
         <Setter Property="Height" Value="24" />
         <Setter Property="MinWidth" Value="24" />
+        <Setter Property="Padding" Value="1,2,4,2" />
 
-        <Style Selector="^ Border#OuterBorder">
-            <Setter Property="Padding" Value="6.5,0,6.5,0" />
-        </Style>
-
-        <Style Selector="^:in-progress StackPanel#ContentsStackPanel">
-            <Setter Property="Margin" Value="0" />
-            <Setter Property="Spacing" Value="0" />
+        <Style Selector="^ panels|FlexPanel#ContentsFlexPanel">
+            <Setter Property="JustifyContent" Value="Center" />
+            <Setter Property="AlignItems" Value="Stretch" />
         </Style>
 
         <Style Selector="^ spinner|Spinner#Spinner">
             <Setter Property="Foreground" Value="{StaticResource NeutralInvertedBrush}" />
+            <Setter Property="IsVisible" Value="False" />
+
             <Setter Property="Height" Value="12" />
             <Setter Property="Width" Value="12" />
             <Setter Property="Margin" Value="2" />
-            <Setter Property="IsVisible" Value="False" />
         </Style>
 
         <Style Selector="^ icons|UnifiedIcon#Icon">
-            <Setter Property="Size" Value="16" />
             <Setter Property="IsVisible" Value="False" />
+            <Setter Property="Size" Value="16" />
         </Style>
 
         <Style Selector="^ TextBlock#ShortName">
-            <Setter Property="Width" Value="11" />
-            <Setter Property="TextAlignment" Value="Center" />
+            <Setter Property="Theme" Value="{StaticResource BodyLGBoldTheme}" />
+            <Setter Property="VerticalAlignment" Value="Center" />
         </Style>
 
         <!-- Selected state -->
@@ -52,10 +57,6 @@
 
         <!-- Applied state -->
         <Style Selector="^:applied:not(:in-progress)">
-            <Style Selector="^ Border#OuterBorder">
-                <Setter Property="Padding" Value="1,0,4,0" />
-            </Style>
-
             <Style Selector="^ icons|UnifiedIcon#Icon">
                 <Setter Property="IsVisible" Value="True" />
             </Style>
@@ -63,10 +64,6 @@
 
         <!-- In progress state -->
         <Style Selector="^:in-progress">
-            <Style Selector="^ Border#OuterBorder">
-                <Setter Property="Padding" Value="1,0,4,0" />
-            </Style>
-
             <Style Selector="^ spinner|Spinner#Spinner">
                 <Setter Property="IsVisible" Value="True" />
             </Style>
@@ -77,4 +74,29 @@
         </Style>
 
     </Style>
+
+
+    <!-- Large version (for LoadoutCards) -->
+    <Style Selector="loadoutBadge|LoadoutBadge.CardSize">
+        <Setter Property="Height" Value="NaN" />
+        <Setter Property="Padding" Value="12,4" />
+
+        <Style Selector="^ panels|FlexPanel#ContentsFlexPanel">
+            <Setter Property="ColumnSpacing" Value="4" />
+        </Style>
+
+        <Style Selector="^ spinner|Spinner#Spinner">
+            <Setter Property="Height" Value="16" />
+            <Setter Property="Width" Value="16" />
+            <Setter Property="Margin" Value="4" />
+        </Style>
+
+        <Style Selector="^ icons|UnifiedIcon#Icon">
+            <Setter Property="Size" Value="20" />
+        </Style>
+
+        <Style Selector="^ TextBlock#ShortName">
+            <Setter Property="Theme" Value="{StaticResource BodyXLBoldTheme}" />
+        </Style>
+    </Style>
 </Styles>
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LoadoutCards/LoadoutCardStyles.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LoadoutCards/LoadoutCardStyles.axaml
index 81aa29fa4b..0bda499d5e 100644
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LoadoutCards/LoadoutCardStyles.axaml
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/LoadoutCards/LoadoutCardStyles.axaml
@@ -2,25 +2,39 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:loadoutCard="clr-namespace:NexusMods.App.UI.Controls.LoadoutCard;assembly=NexusMods.App.UI"
         xmlns:panels="clr-namespace:Avalonia.Labs.Panels;assembly=Avalonia.Labs.Panels"
-        xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons">
+        xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons"
+        xmlns:element="clr-namespace:NexusMods.App.UI.Controls.Spinner;assembly=NexusMods.App.UI">
+
     <Design.PreviewWith>
-        <Border Padding="20" Background="White">
-            <loadoutCard:LoadoutCardView />
-        </Border>
+        <panels:FlexPanel Background="{StaticResource SurfaceLow}"
+                          Width="500"
+                          Height="500"
+                          ColumnSpacing="10"
+                          JustifyContent="SpaceAround">
+            <panels:FlexPanel.Resources>
+                <loadoutCard:LoadoutCardDesignViewModel x:Key="LoadoutCardDesignViewModel" />
+            </panels:FlexPanel.Resources>
+            
+            <loadoutCard:LoadoutCardView DataContext="{StaticResource LoadoutCardDesignViewModel}" />
+        </panels:FlexPanel>
     </Design.PreviewWith>
 
     <!-- Add Styles Here -->
     <Style Selector="loadoutCard|LoadoutCardView">
         <Setter Property="ClipToBounds" Value="False" />
-        
+
+        <Style Selector="^ Border#ContainerBorder">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+
         <Style Selector="^ Button#CardOuterButton">
             <Setter Property="Background" Value="{StaticResource SurfaceMidBrush}" />
             <Setter Property="CornerRadius" Value="{StaticResource Rounded-lg}" />
-            <Setter Property="HorizontalAlignment" Value="Center" />
-            <Setter Property="VerticalAlignment" Value="Center" />
+
             <Setter Property="Padding" Value="4,4,4,0" />
             <Setter Property="ClipToBounds" Value="False" />
-            
+
             <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BoxShadow" Value="{StaticResource DropShadowSM}" />
             </Style>
@@ -29,6 +43,21 @@
                 <Setter Property="Background" Value="{StaticResource SurfaceHighBrush}" />
                 <Setter Property="BoxShadow" Value="{StaticResource DropShadowMD}" />
             </Style>
+
+            <Style Selector="^:pointerover Rectangle#GradientLayerRectangle">
+                <Setter Property="Fill">
+                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
+                        <GradientStop Color="{StaticResource SurfaceTranslucentHigh}" Offset="0" />
+                        <GradientStop Color="{StaticResource SurfaceTranslucentHigh}" Offset="1" />
+                    </LinearGradientBrush>
+                </Setter>
+            </Style>
+
+            <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{StaticResource SurfaceMidBrush}" />
+                <Setter Property="Foreground" Value="{StaticResource NeutralStrongBrush}" />
+                <Setter Property="Opacity" Value="{StaticResource OpacityDisabledElement}" />
+            </Style>
         </Style>
 
         <Style Selector="^ panels|FlexPanel#CardOuterFlexPanel">
@@ -43,15 +72,6 @@
             <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
         </Style>
 
-        <Style Selector="^:pointerover Rectangle#GradientLayerRectangle">
-            <Setter Property="Fill">
-                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
-                    <GradientStop Color="{StaticResource SurfaceTranslucentHigh}" Offset="0" />
-                    <GradientStop Color="{StaticResource SurfaceTranslucentHigh}" Offset="1" />
-                </LinearGradientBrush>
-            </Setter>
-        </Style>
-
         <Style Selector="^ Border#DetailsSectionBorder">
             <Setter Property="Padding" Value="8,12" />
             <Setter Property="Width" Value="184" />
@@ -96,5 +116,22 @@
             <Setter Property="panels:Flex.Grow" Value="1" />
         </Style>
 
+        <Style Selector="^ panels|FlexPanel#OverlayFlexPanel">
+            <Setter Property="Direction" Value="Column" />
+            <Setter Property="JustifyContent" Value="SpaceAround" />
+        </Style>
+
+        <Style Selector="^ panels|FlexPanel#DeletingSpinnerFlexPanel">
+            <Setter Property="Direction" Value="Column" />
+            <Setter Property="JustifyContent" Value="Center" />
+            <Setter Property="AlignItems" Value="Center" />
+            <Setter Property="RowSpacing" Value="{StaticResource Spacing-2}" />
+        </Style>
+
+        <Style Selector="^ element|Spinner#DeletingSpinner">
+            <Setter Property="Foreground" Value="{StaticResource NeutralSubduedBrush}" />
+            <Setter Property="Height" Value="60" />
+            <Setter Property="Width" Value="60" />
+        </Style>
     </Style>
 </Styles>