{{ collection.name }}
@@ -188,15 +188,6 @@ const orderedCollections = computed(() => {
gap: var(--gap-md);
margin-bottom: 0;
- .icon {
- width: 100% !important;
- height: 6rem !important;
- max-width: unset !important;
- max-height: unset !important;
- aspect-ratio: 1 / 1;
- object-fit: cover;
- }
-
.details {
display: flex;
flex-direction: column;
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 698c3a68b..c39719de5 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -205,12 +205,11 @@
-
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
new file mode 100644
index 000000000..cfaf81845
--- /dev/null
+++ b/packages/ui/src/components/base/index.ts
@@ -0,0 +1,56 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as Admonition } from './Admonition.vue'
+export { default as AppearingProgressBar } from './AppearingProgressBar.vue'
+export { default as AutoBrandIcon } from './AutoBrandIcon.vue'
+export { default as AutoLink } from './AutoLink.vue'
+export { default as Avatar } from './Avatar.vue'
+export { default as Badge } from './Badge.vue'
+export { default as BulletDivider } from './BulletDivider.vue'
+export { default as Button } from './Button.vue'
+export { default as ButtonStyled } from './ButtonStyled.vue'
+export { default as Card } from './Card.vue'
+export { default as Checkbox } from './Checkbox.vue'
+export { default as Chips } from './Chips.vue'
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleRegion } from './CollapsibleRegion.vue'
+export { default as Combobox } from './Combobox.vue'
+export { default as ContentPageHeader } from './ContentPageHeader.vue'
+export { default as CopyCode } from './CopyCode.vue'
+export { default as DoubleIcon } from './DoubleIcon.vue'
+export { default as DropArea } from './DropArea.vue'
+export { default as DropdownSelect } from './DropdownSelect.vue'
+export { default as EnvironmentIndicator } from './EnvironmentIndicator.vue'
+export { default as ErrorInformationCard } from './ErrorInformationCard.vue'
+export { default as FileInput } from './FileInput.vue'
+export type { FilterBarOption } from './FilterBar.vue'
+export { default as FilterBar } from './FilterBar.vue'
+export { default as HeadingLink } from './HeadingLink.vue'
+export { default as HorizontalRule } from './HorizontalRule.vue'
+export { default as IconSelect } from './IconSelect.vue'
+export type { JoinedButtonAction } from './JoinedButtons.vue'
+export { default as JoinedButtons } from './JoinedButtons.vue'
+export { default as LoadingIndicator } from './LoadingIndicator.vue'
+export { default as ManySelect } from './ManySelect.vue'
+export { default as MarkdownEditor } from './MarkdownEditor.vue'
+export { default as OptionGroup } from './OptionGroup.vue'
+export type { Option as OverflowMenuOption } from './OverflowMenu.vue'
+export { default as OverflowMenu } from './OverflowMenu.vue'
+export { default as Page } from './Page.vue'
+export { default as Pagination } from './Pagination.vue'
+export { default as PopoutMenu } from './PopoutMenu.vue'
+export { default as PreviewSelectButton } from './PreviewSelectButton.vue'
+export { default as ProgressBar } from './ProgressBar.vue'
+export { default as ProgressSpinner } from './ProgressSpinner.vue'
+export { default as ProjectCard } from './ProjectCard.vue'
+export { default as RadialHeader } from './RadialHeader.vue'
+export { default as RadioButtons } from './RadioButtons.vue'
+export { default as ScrollablePanel } from './ScrollablePanel.vue'
+export { default as ServerNotice } from './ServerNotice.vue'
+export { default as SettingsLabel } from './SettingsLabel.vue'
+export { default as SimpleBadge } from './SimpleBadge.vue'
+export { default as Slider } from './Slider.vue'
+export { default as SmartClickable } from './SmartClickable.vue'
+export { default as TagItem } from './TagItem.vue'
+export { default as Timeline } from './Timeline.vue'
+export { default as Toggle } from './Toggle.vue'
+export { default as UnsavedChangesPopup } from './UnsavedChangesPopup.vue'
diff --git a/packages/ui/src/components/billing/index.ts b/packages/ui/src/components/billing/index.ts
new file mode 100644
index 000000000..f2ef22353
--- /dev/null
+++ b/packages/ui/src/components/billing/index.ts
@@ -0,0 +1,5 @@
+export { default as AddPaymentMethodModal } from './AddPaymentMethodModal.vue'
+export { default as ModrinthServersPurchaseModal } from './ModrinthServersPurchaseModal.vue'
+export { default as PurchaseModal } from './PurchaseModal.vue'
+export { default as ServersSpecs } from './ServersSpecs.vue'
+export { default as ServersUpgradeModalWrapper } from './ServersUpgradeModalWrapper.vue'
diff --git a/packages/ui/src/components/brand/index.ts b/packages/ui/src/components/brand/index.ts
new file mode 100644
index 000000000..c3dc1ec40
--- /dev/null
+++ b/packages/ui/src/components/brand/index.ts
@@ -0,0 +1,2 @@
+export { default as AnimatedLogo } from './AnimatedLogo.vue'
+export { default as TextLogo } from './TextLogo.vue'
diff --git a/packages/ui/src/components/changelog/index.ts b/packages/ui/src/components/changelog/index.ts
new file mode 100644
index 000000000..eb6ab0a19
--- /dev/null
+++ b/packages/ui/src/components/changelog/index.ts
@@ -0,0 +1 @@
+export { default as ChangelogEntry } from './ChangelogEntry.vue'
diff --git a/packages/ui/src/components/chart/index.ts b/packages/ui/src/components/chart/index.ts
new file mode 100644
index 000000000..7d215c98d
--- /dev/null
+++ b/packages/ui/src/components/chart/index.ts
@@ -0,0 +1,2 @@
+export { default as Chart } from './Chart.vue'
+export { default as CompactChart } from './CompactChart.vue'
diff --git a/packages/ui/src/components/content/index.ts b/packages/ui/src/components/content/index.ts
new file mode 100644
index 000000000..11714d04b
--- /dev/null
+++ b/packages/ui/src/components/content/index.ts
@@ -0,0 +1,3 @@
+export { default as ContentListPanel } from './ContentListPanel.vue'
+export type { Article as NewsArticle } from './NewsArticleCard.vue'
+export { default as NewsArticleCard } from './NewsArticleCard.vue'
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 12ee057da..1f00fa63a 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,143 +1,16 @@
-// Base content
-export { default as Accordion } from './base/Accordion.vue'
-export { default as Admonition } from './base/Admonition.vue'
-export { default as AppearingProgressBar } from './base/AppearingProgressBar.vue'
-export { default as AutoBrandIcon } from './base/AutoBrandIcon.vue'
-export { default as AutoLink } from './base/AutoLink.vue'
-export { default as Avatar } from './base/Avatar.vue'
-export { default as Badge } from './base/Badge.vue'
-export { default as BulletDivider } from './base/BulletDivider.vue'
-export { default as Button } from './base/Button.vue'
-export { default as ButtonStyled } from './base/ButtonStyled.vue'
-export { default as Card } from './base/Card.vue'
-export { default as Checkbox } from './base/Checkbox.vue'
-export { default as Chips } from './base/Chips.vue'
-export { default as Collapsible } from './base/Collapsible.vue'
-export { default as CollapsibleRegion } from './base/CollapsibleRegion.vue'
-export { default as Combobox } from './base/Combobox.vue'
-export { default as ContentPageHeader } from './base/ContentPageHeader.vue'
-export { default as CopyCode } from './base/CopyCode.vue'
-export { default as DoubleIcon } from './base/DoubleIcon.vue'
-export { default as DropArea } from './base/DropArea.vue'
-export { default as DropdownSelect } from './base/DropdownSelect.vue'
-export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue'
-export { default as ErrorInformationCard } from './base/ErrorInformationCard.vue'
-export { default as FileInput } from './base/FileInput.vue'
-export type { FilterBarOption } from './base/FilterBar.vue'
-export { default as FilterBar } from './base/FilterBar.vue'
-export { default as HeadingLink } from './base/HeadingLink.vue'
-export { default as IconSelect } from './base/IconSelect.vue'
-export type { JoinedButtonAction } from './base/JoinedButtons.vue'
-export { default as JoinedButtons } from './base/JoinedButtons.vue'
-export { default as LoadingIndicator } from './base/LoadingIndicator.vue'
-export { default as ManySelect } from './base/ManySelect.vue'
-export { default as MarkdownEditor } from './base/MarkdownEditor.vue'
-export { default as OptionGroup } from './base/OptionGroup.vue'
-export type { Option as OverflowMenuOption } from './base/OverflowMenu.vue'
-export { default as OverflowMenu } from './base/OverflowMenu.vue'
-export { default as Page } from './base/Page.vue'
-export { default as Pagination } from './base/Pagination.vue'
-export { default as PopoutMenu } from './base/PopoutMenu.vue'
-export { default as PreviewSelectButton } from './base/PreviewSelectButton.vue'
-export { default as ProgressBar } from './base/ProgressBar.vue'
-export { default as ProgressSpinner } from './base/ProgressSpinner.vue'
-export { default as ProjectCard } from './base/ProjectCard.vue'
-export { default as RadialHeader } from './base/RadialHeader.vue'
-export { default as RadioButtons } from './base/RadioButtons.vue'
-export { default as ScrollablePanel } from './base/ScrollablePanel.vue'
-export { default as ServerNotice } from './base/ServerNotice.vue'
-export { default as SettingsLabel } from './base/SettingsLabel.vue'
-export { default as SimpleBadge } from './base/SimpleBadge.vue'
-export { default as Slider } from './base/Slider.vue'
-export { default as SmartClickable } from './base/SmartClickable.vue'
-export { default as StatItem } from './base/StatItem.vue'
-export { default as TagItem } from './base/TagItem.vue'
-export { default as Timeline } from './base/Timeline.vue'
-export { default as Toggle } from './base/Toggle.vue'
-export { default as UnsavedChangesPopup } from './base/UnsavedChangesPopup.vue'
-
-// Branding
-export { default as AnimatedLogo } from './brand/AnimatedLogo.vue'
-export { default as TextLogo } from './brand/TextLogo.vue'
-
-// Changelog
-export { default as ChangelogEntry } from './changelog/ChangelogEntry.vue'
-
-// Charts
-export { default as Chart } from './chart/Chart.vue'
-export { default as CompactChart } from './chart/CompactChart.vue'
-
-// Content
-export { default as ContentListPanel } from './content/ContentListPanel.vue'
-export type { Article as NewsArticle } from './content/NewsArticleCard.vue'
-export { default as NewsArticleCard } from './content/NewsArticleCard.vue'
-
-// Modals
-export { default as ConfirmModal } from './modal/ConfirmModal.vue'
-export { default as Modal } from './modal/Modal.vue'
-export { default as NewModal } from './modal/NewModal.vue'
-export { default as ShareModal } from './modal/ShareModal.vue'
-export type { Tab as TabbedModalTab } from './modal/TabbedModal.vue'
-export { default as TabbedModal } from './modal/TabbedModal.vue'
-
-// Navigation
-export { default as Breadcrumbs } from './nav/Breadcrumbs.vue'
-export { default as NavItem } from './nav/NavItem.vue'
-export { default as NavRow } from './nav/NavRow.vue'
-export { default as NavStack } from './nav/NavStack.vue'
-export { default as NotificationPanel } from './nav/NotificationPanel.vue'
-export { default as PagewideBanner } from './nav/PagewideBanner.vue'
-
-// Project
+export * from './affiliate'
+export * from './base'
+export * from './billing'
+export * from './brand'
+export * from './changelog'
+export * from './chart'
+export * from './content'
+export * from './modal'
+export * from './nav'
+export * from './page'
export * from './project'
-
-// Search
-export { default as BrowseFiltersPanel } from './search/BrowseFiltersPanel.vue'
-export { default as Categories } from './search/Categories.vue'
-export { default as SearchDropdown } from './search/SearchDropdown.vue'
-export { default as SearchFilter } from './search/SearchFilter.vue'
-export { default as SearchFilterControl } from './search/SearchFilterControl.vue'
-export { default as SearchFilterOption } from './search/SearchFilterOption.vue'
-export { default as SearchSidebarFilter } from './search/SearchSidebarFilter.vue'
-
-// Affiliate
-export { default as AffiliateLinkCard } from './affiliate/AffiliateLinkCard.vue'
-export { default as AffiliateLinkCreateModal } from './affiliate/AffiliateLinkCreateModal.vue'
-
-// Billing
-export { default as AddPaymentMethodModal } from './billing/AddPaymentMethodModal.vue'
-export { default as ModrinthServersPurchaseModal } from './billing/ModrinthServersPurchaseModal.vue'
-export { default as PurchaseModal } from './billing/PurchaseModal.vue'
-export { default as ServersUpgradeModalWrapper } from './billing/ServersUpgradeModalWrapper.vue'
-
-// Skins
-export { default as CapeButton } from './skin/CapeButton.vue'
-export { default as CapeLikeTextButton } from './skin/CapeLikeTextButton.vue'
-export { default as SkinButton } from './skin/SkinButton.vue'
-export { default as SkinLikeTextButton } from './skin/SkinLikeTextButton.vue'
-export { default as SkinPreviewRenderer } from './skin/SkinPreviewRenderer.vue'
-
-// Version
-export { default as VersionChannelIndicator } from './version/VersionChannelIndicator.vue'
-export { default as VersionFilterControl } from './version/VersionFilterControl.vue'
-export { default as VersionSummary } from './version/VersionSummary.vue'
-
-// Settings
-export { default as ThemeSelector } from './settings/ThemeSelector.vue'
-
-// Servers
-export { default as ServersSpecs } from './billing/ServersSpecs.vue'
-export { default as BackupCreateModal } from './servers/backups/BackupCreateModal.vue'
-export { default as BackupDeleteModal } from './servers/backups/BackupDeleteModal.vue'
-export { default as BackupItem } from './servers/backups/BackupItem.vue'
-export { default as BackupRenameModal } from './servers/backups/BackupRenameModal.vue'
-export { default as BackupRestoreModal } from './servers/backups/BackupRestoreModal.vue'
-export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
-export { default as LoaderIcon } from './servers/icons/LoaderIcon.vue'
-export { default as ServerIcon } from './servers/icons/ServerIcon.vue'
-export { default as ServerInfoLabels } from './servers/labels/ServerInfoLabels.vue'
-export { default as MedalBackgroundImage } from './servers/marketing/MedalBackgroundImage.vue'
-export { default as MedalServerListing } from './servers/marketing/MedalServerListing.vue'
-export type { PendingChange } from './servers/ServerListing.vue'
-export { default as ServerListing } from './servers/ServerListing.vue'
-export { default as ServersPromo } from './servers/ServersPromo.vue'
+export * from './search'
+export * from './servers'
+export * from './settings'
+export * from './skin'
+export * from './version'
diff --git a/packages/ui/src/components/modal/index.ts b/packages/ui/src/components/modal/index.ts
new file mode 100644
index 000000000..89c4cf026
--- /dev/null
+++ b/packages/ui/src/components/modal/index.ts
@@ -0,0 +1,6 @@
+export { default as ConfirmModal } from './ConfirmModal.vue'
+export { default as Modal } from './Modal.vue'
+export { default as NewModal } from './NewModal.vue'
+export { default as ShareModal } from './ShareModal.vue'
+export type { Tab as TabbedModalTab } from './TabbedModal.vue'
+export { default as TabbedModal } from './TabbedModal.vue'
diff --git a/packages/ui/src/components/nav/NavItem.vue b/packages/ui/src/components/nav/NavItem.vue
deleted file mode 100644
index 191767793..000000000
--- a/packages/ui/src/components/nav/NavItem.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-
-
-
-
-
-
-
diff --git a/packages/ui/src/components/nav/NavRow.vue b/packages/ui/src/components/nav/NavRow.vue
deleted file mode 100644
index 45d64594d..000000000
--- a/packages/ui/src/components/nav/NavRow.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-
-
-
-
-
-
-
diff --git a/packages/ui/src/components/nav/NavStack.vue b/packages/ui/src/components/nav/NavStack.vue
deleted file mode 100644
index 73cb4fdff..000000000
--- a/packages/ui/src/components/nav/NavStack.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
diff --git a/packages/ui/src/components/nav/index.ts b/packages/ui/src/components/nav/index.ts
new file mode 100644
index 000000000..19463e584
--- /dev/null
+++ b/packages/ui/src/components/nav/index.ts
@@ -0,0 +1,3 @@
+export { default as Breadcrumbs } from './Breadcrumbs.vue'
+export { default as NotificationPanel } from './NotificationPanel.vue'
+export { default as PagewideBanner } from './PagewideBanner.vue'
diff --git a/packages/ui/src/components/page/NormalPage.vue b/packages/ui/src/components/page/NormalPage.vue
new file mode 100644
index 000000000..ef3f89f84
--- /dev/null
+++ b/packages/ui/src/components/page/NormalPage.vue
@@ -0,0 +1,78 @@
+
+
+