diff --git a/src/NexusMods.App.UI/Assets/DesignTime/header-background.webp b/src/NexusMods.App.UI/Assets/DesignTime/header-background.webp
new file mode 100644
index 0000000000..e389a0d11d
Binary files /dev/null and b/src/NexusMods.App.UI/Assets/DesignTime/header-background.webp differ
diff --git a/src/NexusMods.App.UI/NexusMods.App.UI.csproj b/src/NexusMods.App.UI/NexusMods.App.UI.csproj
index 39b7301511..b036424fb4 100644
--- a/src/NexusMods.App.UI/NexusMods.App.UI.csproj
+++ b/src/NexusMods.App.UI/NexusMods.App.UI.csproj
@@ -641,6 +641,12 @@
ICollectionsViewModel.cs
+
+ ICollectionDownloadViewModel.cs
+
+
+ ICollectionCardViewModel.cs
+
diff --git a/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadDesignViewModel.cs b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadDesignViewModel.cs
new file mode 100644
index 0000000000..a1bcba65ee
--- /dev/null
+++ b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadDesignViewModel.cs
@@ -0,0 +1,31 @@
+using Avalonia.Media.Imaging;
+using Avalonia.Platform;
+using NexusMods.Abstractions.Jobs;
+using NexusMods.Abstractions.NexusWebApi.Types;
+using NexusMods.Paths;
+
+namespace NexusMods.App.UI.Pages.CollectionDownload;
+
+public class CollectionDownloadDesignViewModel : AViewModel, ICollectionDownloadViewModel
+{
+ public string Name => "Vanilla+ [Quality of Life]";
+ public CollectionSlug Slug { get; } = CollectionSlug.From("tckf0m");
+ public RevisionNumber RevisionNumber { get; } = RevisionNumber.From(6);
+ public string AuthorName => "Lowtonotolerance";
+
+ public string Summary =>
+ "Aims to improves vanilla gameplay while adding minimal additional content. Aims to improves vanilla gameplay while adding minimal additional content. Aims to improves vanilla gameplay while adding minimal additional content. Aims to improves vanilla gameplay while adding minimal additional content.";
+
+ public int ModCount => 9;
+ public int RequiredModCount => 7;
+ public int OptionalModCount => 2;
+ public int EndorsementCount => 248;
+ public int DownloadCount => 35_123;
+ public Size TotalSize { get; } = Size.From(76_123_456);
+ public Percent OverallRating { get; } = Percent.CreateClamped(0.82);
+ public Bitmap TileImage { get; } = new(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/DesignTime/collection_tile_image.png")));
+
+ public Bitmap BackgroundImage { get; } = new(AssetLoader.Open(new Uri("avares://NexusMods.App.UI/Assets/DesignTime/header-background.webp")));
+
+ public string CollectionStatusText { get; } = "0 of 9 mods downloaded";
+}
diff --git a/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml
new file mode 100644
index 0000000000..2e5ebca6e0
--- /dev/null
+++ b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml
@@ -0,0 +1,125 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ COLLECTION DOWNLOAD
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Required
+
+
+
+ TODO: Grid of mods will appear here
+
+
+
+
+ Optional
+
+
+
+ TODO: Grid of mods will appear here
+
+
+
+
+
diff --git a/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml.cs b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml.cs
new file mode 100644
index 0000000000..d113bd5f75
--- /dev/null
+++ b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml.cs
@@ -0,0 +1,69 @@
+using System.Reactive.Disposables;
+using Avalonia.Media;
+using Avalonia.ReactiveUI;
+using ReactiveUI;
+
+namespace NexusMods.App.UI.Pages.CollectionDownload;
+
+public partial class CollectionDownloadView : ReactiveUserControl
+{
+ public CollectionDownloadView()
+ {
+ InitializeComponent();
+
+ this.WhenActivated(d =>
+ {
+
+ // Uncomment this to enable the background image
+ /*
+ this.WhenAnyValue(view => view.ViewModel!.BackgroundImage)
+ .WhereNotNull()
+ .SubscribeWithErrorLogging(image => Body.Background = new ImageBrush { Source = image })
+ .DisposeWith(d);
+ */
+
+ this.WhenAnyValue(view => view.ViewModel!.TileImage)
+ .WhereNotNull()
+ .SubscribeWithErrorLogging(image => Image38.Source = image)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.Name, view => view.Title.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.AuthorName, view => view.AuthorName.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.Summary, view => view.Summary.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.ModCount, view => view.ModCount.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.EndorsementCount, view => view.Endorsements.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.DownloadCount, view => view.Downloads.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.TotalSize, view => view.TotalSize.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.OverallRating, view => view.OverallRating.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.RequiredModCount, view => view.RequiredModsCount.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.OptionalModCount, view => view.OptionalModsCount.Text)
+ .DisposeWith(d);
+
+ this.OneWayBind(ViewModel, vm => vm.CollectionStatusText, view => view.CollectionStatusText.Text)
+ .DisposeWith(d);
+
+ }
+ );
+ }
+
+
+}
+
diff --git a/src/NexusMods.App.UI/Pages/CollectionDownload/ICollectionDownloadViewModel.cs b/src/NexusMods.App.UI/Pages/CollectionDownload/ICollectionDownloadViewModel.cs
new file mode 100644
index 0000000000..29782068a1
--- /dev/null
+++ b/src/NexusMods.App.UI/Pages/CollectionDownload/ICollectionDownloadViewModel.cs
@@ -0,0 +1,84 @@
+using Avalonia.Media.Imaging;
+using NexusMods.Abstractions.Jobs;
+using NexusMods.Abstractions.NexusWebApi.Types;
+using NexusMods.Paths;
+
+namespace NexusMods.App.UI.Pages.CollectionDownload;
+
+public interface ICollectionDownloadViewModel : IViewModelInterface
+{
+ ///
+ /// Name of the collection
+ ///
+ public string Name { get; }
+
+ ///
+ /// The collection's slug
+ ///
+ public CollectionSlug Slug { get; }
+
+ ///
+ /// The collection's revision number
+ ///
+ public RevisionNumber RevisionNumber { get; }
+
+ ///
+ /// Name of the author of the collection
+ ///
+ public string AuthorName { get; }
+
+ ///
+ /// The summary (short description) of the collection
+ ///
+ public string Summary { get; }
+
+ ///
+ /// Total number of mods in the collection
+ ///
+ public int ModCount { get; }
+
+ ///
+ /// The number of required mods in the collection
+ ///
+ public int RequiredModCount { get; }
+
+ ///
+ /// The number of optional mods in the collection
+ ///
+ public int OptionalModCount { get; }
+
+ ///
+ /// The number of endorsements the collection has
+ ///
+ public int EndorsementCount { get; }
+
+ ///
+ /// The number of downloads the collection has
+ ///
+ public int DownloadCount { get; }
+
+ ///
+ /// The size of the collection including all downloads and the collection file iteself
+ ///
+ public Size TotalSize { get; }
+
+ ///
+ /// The overall approval rating of the collection
+ ///
+ public Percent OverallRating { get; }
+
+ ///
+ /// The small tileable image of the collection
+ ///
+ public Bitmap TileImage { get; }
+
+ ///
+ /// The background banner image of the collection
+ ///
+ public Bitmap BackgroundImage { get; }
+
+ ///
+ /// A text representation of the collection's status, such as "Downloading", "Installing", "Ready to Play", etc.
+ ///
+ public string CollectionStatusText { get; }
+}
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/StylesIndex.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/StylesIndex.axaml
index 71f6405bc5..6537664d20 100644
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/StylesIndex.axaml
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/StylesIndex.axaml
@@ -31,6 +31,7 @@
+
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPage.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPage.axaml
new file mode 100644
index 0000000000..11ad5d4306
--- /dev/null
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPage.axaml
@@ -0,0 +1,90 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+