diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 2922265f29..ee87d808fd 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <div class="experimental-styles-within">
+    <!-- COLLECTION DELETION -->
     <ConfirmModal
       v-if="canEdit"
       ref="deleteModal"
@@ -9,283 +10,212 @@
       :proceed-label="formatMessage(commonMessages.deleteLabel)"
       @proceed="deleteCollection()"
     />
-    <div class="normal-page">
-      <div class="normal-page__sidebar">
-        <div class="card">
-          <div class="card__overlay input-group">
-            <template v-if="canEdit && isEditing === false">
-              <Button @click="isEditing = true">
-                <EditIcon aria-hidden="true" />
-                {{ formatMessage(commonMessages.editButton) }}
-              </Button>
-              <Button id="delete-collection" @click="() => $refs.deleteModal.show()">
-                <TrashIcon aria-hidden="true" />
-                {{ formatMessage(commonMessages.deleteLabel) }}
-              </Button>
-            </template>
-            <template v-else-if="canEdit && isEditing === true">
-              <PopoutMenu class="btn">
-                <EditIcon aria-hidden="true" /> {{ formatMessage(messages.editIconButton) }}
-                <template #menu>
-                  <span class="icon-edit-menu">
-                    <FileInput
-                      id="project-icon"
-                      :max-size="262144"
-                      :show-icon="true"
-                      accept="image/png,image/jpeg,image/gif,image/webp"
-                      class="btn btn-transparent upload"
-                      style="white-space: nowrap"
-                      aria-label="Upload icon"
-                      @change="showPreviewImage"
-                    >
-                      <UploadIcon aria-hidden="true" />
-                      {{ formatMessage(messages.uploadIconButton) }}
-                    </FileInput>
-                    <Button
-                      v-if="!deletedIcon && (previewImage || collection.icon_url)"
-                      style="white-space: nowrap"
-                      transparent
-                      @click="
-                        () => {
-                          deletedIcon = true;
-                          previewImage = null;
-                        }
-                      "
-                    >
-                      <TrashIcon aria-hidden="true" />
-                      {{ formatMessage(messages.deleteIconButton) }}
-                    </Button>
-                  </span>
-                </template>
-              </PopoutMenu>
-            </template>
-          </div>
-          <!-- Editing -->
-          <template v-if="isEditing">
-            <div class="inputs universal-labels">
-              <div class="avatar-section">
-                <Avatar
-                  size="md"
-                  :src="deletedIcon ? null : previewImage ? previewImage : collection.icon_url"
-                />
-              </div>
-              <label for="collection-title">
-                <span class="label__title"> {{ formatMessage(commonMessages.titleLabel) }} </span>
-              </label>
-              <input id="collection-title" v-model="name" maxlength="255" type="text" />
-              <label for="collection-description">
-                <span class="label__title">
-                  {{ formatMessage(commonMessages.descriptionLabel) }}
-                </span>
-              </label>
-              <div class="textarea-wrapper">
-                <textarea id="collection-description" v-model="summary" maxlength="255" />
-              </div>
-              <label for="visibility">
-                <span class="label__title">
-                  {{ formatMessage(commonMessages.visibilityLabel) }}
-                </span>
-              </label>
-              <DropdownSelect
-                id="visibility"
-                v-model="visibility"
-                :options="['listed', 'unlisted', 'private']"
-                :disabled="visibility === 'rejected'"
-                :multiple="false"
-                :display-name="
-                  (s) => {
-                    if (s === 'listed') return formatMessage(commonMessages.publicLabel);
-                    return formatMessage(commonMessages[`${s}Label`]);
-                  }
-                "
-                :searchable="false"
-              />
-            </div>
-            <div class="push-right input-group">
-              <Button @click="isEditing = false">
-                <XIcon aria-hidden="true" />
-                {{ formatMessage(commonMessages.cancelButton) }}
-              </Button>
-              <Button color="primary" @click="saveChanges()">
-                <SaveIcon aria-hidden="true" />
-                {{ formatMessage(commonMessages.saveButton) }}
-              </Button>
+    <!-- COLLECTION EDITING -->
+    <CollectionEditModal
+      v-if="canEdit"
+      ref="editModal"
+      :on-show="() => (isEditing = true)"
+      :on-hide="() => (isEditing = false)"
+      :existing-data="{
+        id: collection.id,
+        name: collection.name,
+        description: collection.description,
+        icon_url: collection.icon_url,
+        icon_data: null,
+        icon_removed: false,
+        visibility: collection.status,
+      }"
+      @save="makeEdits"
+    />
+    <ShareModal
+      ref="shareModal"
+      :share-title="`${collection.name} on Modrinth`"
+      :share-text="
+        canEdit
+          ? `Check out my collection ${collection.name} on Modrinth!\n\nhttps://modrinth.com/collection/${collection.id}`
+          : `Check out the collection ${collection.name} on Modrinth!\n\nhttps://modrinth.com/collection/${collection.id}`
+      "
+      header="Sharing a collection"
+    />
+    <div class="new-page sidebar" :class="{ 'alt-layout': cosmetics.leftContentLayout }">
+      <div class="normal-page__header py-4">
+        <ContentPageHeader class="collectionInput">
+          <template #icon>
+            <Avatar :src="collection.icon_url" :alt="collection.name" size="96px" />
+          </template>
+          <template #title>
+            {{ collection.name }}
+          </template>
+          <template #title-suffix>
+            <div class="ml-1 flex items-center gap-2 font-semibold">
+              <CollectionIcon /> Collection
             </div>
           </template>
-          <!-- Content -->
-          <template v-if="!isEditing">
-            <div class="page-header__icon">
-              <Avatar size="md" :src="collection.icon_url" />
+          <template #summary>
+            {{ collection.description }}
+          </template>
+          <template #stats>
+            <div
+              v-if="canEdit"
+              class="flex cursor-help items-center border-0 border-r border-solid border-divider pr-4"
+            >
+              <SimpleBadge
+                v-if="collection.status === 'listed'"
+                v-tooltip="'This collection is visible to all users.'"
+                :icon="WorldIcon"
+                :formatted-name="formatMessage(commonMessages.publicLabel)"
+              />
+              <SimpleBadge
+                v-else-if="collection.status === 'unlisted'"
+                v-tooltip="'This collection is only visible to users with the link.'"
+                :icon="LinkIcon"
+                :formatted-name="formatMessage(commonMessages.unlistedLabel)"
+              />
+              <SimpleBadge
+                v-else-if="collection.status === 'private'"
+                v-tooltip="'This collection is only visible to you.'"
+                :icon="LockIcon"
+                :formatted-name="formatMessage(commonMessages.privateLabel)"
+              />
+              <SimpleBadge
+                v-else-if="collection.status === 'rejected'"
+                v-tooltip="'This collection has been rejected.'"
+                :icon="XIcon"
+                :formatted-name="formatMessage(commonMessages.rejectedLabel)"
+              />
             </div>
-            <div class="page-header__text">
-              <h1 class="title">{{ collection.name }}</h1>
-
-              <div>
-                <span class="collection-label">
-                  <BoxIcon aria-hidden="true" /> {{ formatMessage(messages.collectionLabel) }}
-                </span>
-              </div>
-
-              <div class="collection-info">
-                <div class="metadata-item markdown-body collection-description">
-                  <p>{{ collection.description }}</p>
-                </div>
-
-                <hr class="card-divider" />
-
-                <div v-if="canEdit" class="primary-stat">
-                  <template v-if="collection.status === 'listed'">
-                    <WorldIcon class="primary-stat__icon" aria-hidden="true" />
-                    <div class="primary-stat__text">
-                      <strong> {{ formatMessage(commonMessages.publicLabel) }} </strong>
-                    </div>
-                  </template>
-                  <template v-else-if="collection.status === 'unlisted'">
-                    <LinkIcon class="primary-stat__icon" aria-hidden="true" />
-                    <div class="primary-stat__text">
-                      <strong> {{ formatMessage(commonMessages.unlistedLabel) }} </strong>
-                    </div>
-                  </template>
-                  <template v-else-if="collection.status === 'private'">
-                    <LockIcon class="primary-stat__icon" aria-hidden="true" />
-                    <div class="primary-stat__text">
-                      <strong> {{ formatMessage(commonMessages.privateLabel) }} </strong>
-                    </div>
-                  </template>
-                  <template v-else-if="collection.status === 'rejected'">
-                    <XIcon class="primary-stat__icon" aria-hidden="true" />
-                    <div class="primary-stat__text">
-                      <strong> {{ formatMessage(commonMessages.rejectedLabel) }} </strong>
-                    </div>
-                  </template>
-                </div>
-              </div>
-
-              <div class="primary-stat">
-                <LibraryIcon class="primary-stat__icon" aria-hidden="true" />
-                <div v-if="projects" class="primary-stat__text">
-                  <IntlFormatted
-                    :message-id="messages.projectsCountLabel"
-                    :values="{ count: formatCompactNumber(projects.length || 0) }"
-                  >
-                    <template #stat="{ children }">
-                      <span class="primary-stat__counter">
-                        <component :is="() => normalizeChildren(children)" />
-                      </span>
-                    </template>
-                  </IntlFormatted>
-                </div>
-              </div>
-
-              <div class="metadata-item">
-                <div
-                  v-tooltip="
-                    formatMessage(commonMessages.dateAtTimeTooltip, {
-                      date: new Date(collection.created),
-                      time: new Date(collection.created),
-                    })
-                  "
-                  class="date"
-                >
-                  <CalendarIcon aria-hidden="true" />
-                  <label>
-                    {{
-                      formatMessage(messages.createdAtLabel, {
-                        ago: formatRelativeTime(collection.created),
-                      })
-                    }}
-                  </label>
-                </div>
-              </div>
-
-              <div v-if="collection.id !== 'following'" class="metadata-item">
-                <div
-                  v-tooltip="
-                    formatMessage(commonMessages.dateAtTimeTooltip, {
-                      date: new Date(collection.updated),
-                      time: new Date(collection.updated),
-                    })
-                  "
-                  class="date"
-                >
-                  <UpdatedIcon aria-hidden="true" />
-                  <label>
-                    {{
-                      formatMessage(messages.updatedAtLabel, {
-                        ago: formatRelativeTime(collection.updated),
-                      })
-                    }}
-                  </label>
-                </div>
-              </div>
+            <div
+              v-tooltip="
+                `${$formatNumber(projects.length || 0, false)} project${(projects.length || 0) !== 1 ? 's' : ''}`
+              "
+              class="flex cursor-help items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
+            >
+              <BoxIcon class="h-6 w-6 text-secondary" />
+              {{ formatCompactNumber(projects.length || 0) }}
             </div>
+            <div
+              v-tooltip="
+                formatMessage(commonMessages.dateAtTimeTooltip, {
+                  date: new Date(collection.created),
+                  time: new Date(collection.created),
+                })
+              "
+              class="flex cursor-help items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
+            >
+              <CalendarIcon class="h-6 w-6 text-secondary" />
 
-            <hr class="card-divider" />
-
-            <div class="collection-info">
-              <h2 class="card-header">{{ formatMessage(messages.curatedByLabel) }}</h2>
-              <div class="metadata-item">
-                <nuxt-link
-                  class="team-member columns button-transparent"
-                  :to="'/user/' + creator.username"
-                >
-                  <Avatar :src="creator.avatar_url" :alt="creator.username" size="sm" circle />
-
-                  <div class="member-info">
-                    <p class="name">{{ creator.username }}</p>
-                    <p class="role">{{ formatMessage(messages.ownerLabel) }}</p>
-                  </div>
-                </nuxt-link>
-              </div>
-              <!-- <hr class="card-divider" />
-            <div class="input-group">
-              <Button @click="() => $refs.shareModal.show()">
-                <ShareIcon />
-                Share
-              </Button>
-            </div> -->
+              {{
+                formatMessage(messages.createdAtLabel, {
+                  ago: formatRelativeTime(collection.created),
+                })
+              }}
+            </div>
+            <div
+              v-tooltip="
+                formatMessage(commonMessages.dateAtTimeTooltip, {
+                  date: new Date(collection.updated),
+                  time: new Date(collection.updated),
+                })
+              "
+              class="flex cursor-help items-center gap-2 font-semibold"
+            >
+              <UpdatedIcon class="h-6 w-6 text-secondary" />
+
+              {{
+                formatMessage(messages.updatedAtLabel, {
+                  ago: formatRelativeTime(collection.updated),
+                })
+              }}
             </div>
           </template>
+          <template #actions>
+            <ButtonStyled v-if="canEdit" size="large">
+              <button @click="$refs.editModal.show()">
+                <EditIcon aria-hidden="true" />
+                {{ formatMessage(commonMessages.editButton) }}
+              </button>
+            </ButtonStyled>
+            <ButtonStyled circular size="large">
+              <button @click="$refs.shareModal.show()">
+                <ShareIcon />
+              </button>
+            </ButtonStyled>
+            <ButtonStyled size="large" circular>
+              <OverflowMenu
+                :options="[
+                  {
+                    id: 'delete-collection',
+                    action: () => $refs.deleteModal.show(),
+                    color: 'red',
+                    hoverOnly: true,
+                    shown: canEdit && isEditing === false,
+                  },
+                  { id: 'copy-id', action: () => copyId() },
+                ]"
+              >
+                <MoreVerticalIcon aria-hidden="true" />
+                <template #delete-collection>
+                  <TrashIcon aria-hidden="true" />
+                  {{ formatMessage(commonMessages.deleteLabel) }}
+                </template>
+                <template #copy-id>
+                  <ClipboardCopyIcon aria-hidden="true" />
+                  {{ formatMessage(commonMessages.copyIdButton) }}
+                </template>
+              </OverflowMenu>
+            </ButtonStyled>
+          </template>
+        </ContentPageHeader>
+      </div>
+      <div class="normal-page__sidebar">
+        <div class="card flex-card">
+          <h2>{{ formatMessage(messages.curatedByLabel) }}</h2>
+
+          <nuxt-link
+            class="details-list__item details-list__item--type-large"
+            :to="`/user/${creator.username}`"
+          >
+            <Avatar :src="creator.avatar_url" circle />
+            <div class="rows">
+              <span class="flex items-center gap-1 font-bold text-primary">
+                {{ creator.username }}
+              </span>
+              <span class="text-sm font-medium text-secondary">
+                {{ formatMessage(messages.ownerLabel) }}
+              </span>
+            </div>
+          </nuxt-link>
         </div>
         <AdPlaceholder
           v-if="!auth.user || !isPermission(auth.user.badges, 1 << 0) || flags.showAdsWithPlus"
         />
       </div>
       <div class="normal-page__content">
-        <nav class="navigation-card">
-          <NavRow
-            :links="[
-              {
-                label: formatMessage(commonMessages.allProjectType),
-                href: `/collection/${collection.id}`,
-              },
-              ...projectTypes.map((x) => {
-                return {
-                  label: formatMessage(getProjectTypeMessage(x, true)),
-                  href: `/collection/${collection.id}/${x}s`,
-                };
-              }),
-            ]"
-          />
-          <button
-            v-tooltip="
-              formatMessage(
-                commonMessages[`${cosmetics.searchDisplayMode.collection || 'list'}InputView`],
-              )
-            "
-            :aria-label="
-              formatMessage(
-                commonMessages[`${cosmetics.searchDisplayMode.collection || 'list'}InputView`],
-              )
-            "
-            class="square-button"
-            @click="cycleSearchDisplayMode()"
-          >
-            <GridIcon v-if="cosmetics.searchDisplayMode.collection === 'grid'" />
-            <ImageIcon v-else-if="cosmetics.searchDisplayMode.collection === 'gallery'" />
-            <ListIcon v-else />
-          </button>
-        </nav>
+        <div v-if="navLinks.length >= 2" class="mb-4 flex flex-row items-center gap-2">
+          <div class="max-w-full overflow-x-auto">
+            <NavTabs :links="navLinks" />
+          </div>
+          <ButtonStyled circular>
+            <button
+              v-tooltip="
+                formatMessage(
+                  commonMessages[`${cosmetics.searchDisplayMode.collection || 'list'}InputView`],
+                )
+              "
+              :aria-label="
+                formatMessage(
+                  commonMessages[`${cosmetics.searchDisplayMode.collection || 'list'}InputView`],
+                )
+              "
+              class="square-button"
+              @click="cycleSearchDisplayMode()"
+            >
+              <GridIcon v-if="cosmetics.searchDisplayMode.collection === 'grid'" />
+              <ImageIcon v-else-if="cosmetics.searchDisplayMode.collection === 'gallery'" />
+              <ListIcon v-else />
+            </button>
+          </ButtonStyled>
+        </div>
 
         <div
           v-if="projects && projects?.length > 0"
@@ -368,8 +298,6 @@ import {
   CalendarIcon,
   EditIcon,
   XIcon,
-  SaveIcon,
-  UploadIcon,
   TrashIcon,
   LinkIcon,
   LockIcon,
@@ -377,31 +305,32 @@ import {
   ImageIcon,
   ListIcon,
   UpdatedIcon,
-  LibraryIcon,
   BoxIcon,
+  CollectionIcon,
+  MoreVerticalIcon,
+  ClipboardCopyIcon,
+  ShareIcon,
 } from "@modrinth/assets";
-import {
-  PopoutMenu,
-  FileInput,
-  DropdownSelect,
-  Avatar,
-  Button,
-  commonMessages,
-  ConfirmModal,
-} from "@modrinth/ui";
+import { Avatar, commonMessages, ConfirmModal, ShareModal } from "@modrinth/ui";
 
 import { isAdmin } from "@modrinth/utils";
-import WorldIcon from "assets/images/utils/world.svg";
+import ContentPageHeader from "@modrinth/ui/src/components/base/ContentPageHeader.vue";
+import SimpleBadge from "@modrinth/ui/src/components/base/SimpleBadge.vue";
+import ButtonStyled from "@modrinth/ui/src/components/base/ButtonStyled.vue";
+import OverflowMenu from "@modrinth/ui/src/components/base/OverflowMenu.vue";
+import CollectionEditModal from "@modrinth/ui/src/components/modal/CollectionEditModal.vue";
 import UpToDate from "assets/images/illustrations/up_to_date.svg";
+import WorldIcon from "assets/images/utils/world.svg";
 import { addNotification } from "~/composables/notifs.js";
-import NavRow from "~/components/ui/NavRow.vue";
 import ProjectCard from "~/components/ui/ProjectCard.vue";
 import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
+import NavTabs from "~/components/ui/NavTabs.vue";
 
 const vintl = useVIntl();
 const { formatMessage } = vintl;
 const formatRelativeTime = useRelativeTime();
 const formatCompactNumber = useCompactNumber();
+// const editCollectionModal = ref();
 
 const messages = defineMessages({
   collectionDescription: {
@@ -609,9 +538,24 @@ const projectTypes = computed(() => {
   return Array.from(projectSet);
 });
 
+const navLinks = computed(() => [
+  {
+    label: formatMessage(commonMessages.allProjectType),
+    href: `/collection/${collection.value.id}`,
+  },
+  ...projectTypes.value
+    .map((x) => {
+      return {
+        label: formatMessage(getProjectTypeMessage(x, true)),
+        href: `/collection/${collection.value.id}/${x}s`,
+      };
+    })
+    .slice()
+    .sort((a, b) => a.label.localeCompare(b.label)),
+]);
+
 const icon = ref(null);
 const deletedIcon = ref(false);
-const previewImage = ref(null);
 
 const name = ref(collection.value.name);
 const summary = ref(collection.value.description);
@@ -623,6 +567,26 @@ async function unfollowProject(project) {
   projects.value = projects.value.filter((x) => x.id !== project.id);
 }
 
+function makeEdits(event) {
+  try {
+    icon.value = event.icon_data;
+    deletedIcon.value = event.icon_removed;
+
+    name.value = event.name;
+    summary.value = event.description;
+    visibility.value = event.visibility;
+
+    saveChanges();
+  } catch (error) {
+    addNotification({
+      group: "main",
+      title: formatMessage(commonMessages.errorNotificationTitle),
+      text: error,
+      type: "error",
+    });
+  }
+}
+
 async function saveChanges() {
   startLoading();
   try {
@@ -703,14 +667,8 @@ async function deleteCollection() {
   stopLoading();
 }
 
-function showPreviewImage(files) {
-  const reader = new FileReader();
-  icon.value = files[0];
-  deletedIcon.value = false;
-  reader.readAsDataURL(icon.value);
-  reader.onload = (event) => {
-    previewImage.value = event.target.result;
-  };
+async function copyId() {
+  await navigator.clipboard.writeText(collection.value.id);
 }
 </script>
 
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index 14c1af8885..01a3f2cbd5 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -223,7 +223,9 @@
         </div>
         <div v-if="['collections'].includes(route.params.projectType)" class="collections-grid">
           <nuxt-link
-            v-for="collection in collections"
+            v-for="collection in collections.sort(
+              (a, b) => new Date(b.created) - new Date(a.created),
+            )"
             :key="collection.id"
             :to="`/collection/${collection.id}`"
             class="card collection-item"
@@ -242,7 +244,12 @@
               {{ collection.description }}
             </div>
             <div class="stat-bar">
-              <div class="stats"><BoxIcon /> {{ collection.projects?.length || 0 }} projects</div>
+              <div class="stats">
+                <BoxIcon />
+                {{
+                  `${$formatNumber(collection.projects?.length || 0, false)} project${(collection.projects?.length || 0) !== 1 ? "s" : ""}`
+                }}
+              </div>
               <div class="stats">
                 <template v-if="collection.status === 'listed'">
                   <WorldIcon />
@@ -638,12 +645,13 @@ export default defineNuxtComponent({
     grid-template-columns: repeat(1, 1fr);
   }
 
-  gap: var(--gap-lg);
+  gap: var(--gap-md);
 
   .collection-item {
     display: flex;
     flex-direction: column;
     gap: var(--gap-md);
+    margin-bottom: 0px;
   }
 
   .description {
@@ -692,7 +700,7 @@ export default defineNuxtComponent({
 
       .title {
         color: var(--color-contrast);
-        font-weight: 600;
+        font-weight: 700;
         font-size: var(--font-size-lg);
         margin: 0;
       }
diff --git a/packages/assets/external/bluesky.svg b/packages/assets/external/bluesky.svg
new file mode 100644
index 0000000000..e23e698938
--- /dev/null
+++ b/packages/assets/external/bluesky.svg
@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/>
+</svg>
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index 9589bc0d7a..8318e019e1 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -13,6 +13,7 @@ import _SSOGoogleIcon from './external/sso/google.svg?component'
 import _SSOMicrosoftIcon from './external/sso/microsoft.svg?component'
 import _SSOSteamIcon from './external/sso/steam.svg?component'
 import _AppleIcon from './external/apple.svg?component'
+import _BlueskyIcon from './external/bluesky.svg?component'
 import _BuyMeACoffeeIcon from './external/bmac.svg?component'
 import _DiscordIcon from './external/discord.svg?component'
 import _KoFiIcon from './external/kofi.svg?component'
@@ -209,6 +210,7 @@ export const SSOGoogleIcon = _SSOGoogleIcon
 export const SSOMicrosoftIcon = _SSOMicrosoftIcon
 export const SSOSteamIcon = _SSOSteamIcon
 export const AppleIcon = _AppleIcon
+export const BlueskyIcon = _BlueskyIcon
 export const BuyMeACoffeeIcon = _BuyMeACoffeeIcon
 export const DiscordIcon = _DiscordIcon
 export const KoFiIcon = _KoFiIcon
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index ee552fe639..97bafbb7fe 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -51,6 +51,7 @@ export { default as CompactChart } from './chart/CompactChart.vue'
 export { default as ContentListPanel } from './content/ContentListPanel.vue'
 
 // Modals
+export { default as EditCollectionModal } from './modal/CollectionEditModal.vue'
 export { default as NewModal } from './modal/NewModal.vue'
 export { default as Modal } from './modal/Modal.vue'
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
diff --git a/packages/ui/src/components/modal/CollectionEditModal.vue b/packages/ui/src/components/modal/CollectionEditModal.vue
new file mode 100644
index 0000000000..1dc4b87004
--- /dev/null
+++ b/packages/ui/src/components/modal/CollectionEditModal.vue
@@ -0,0 +1,206 @@
+<template>
+  <NewModal
+    ref="collectionEditModal"
+    :on-hide="() => onHide"
+    :on-show="() => onShow"
+    :header="props.header"
+  >
+    <div class="flex flex-col gap-3">
+      <span class="text-lg font-semibold text-contrast"> Preview </span>
+      <div
+        class="flex flex-row items-center gap-3 overflow-x-hidden rounded-3xl bg-bg p-3 sm:overflow-x-auto"
+      >
+        <Avatar
+          size="md"
+          :src="editState.icon_removed ? null : previewImage ? previewImage : editState.icon_url"
+        />
+        <div class="short flex flex-col justify-between gap-2">
+          <div class="flex w-48 flex-col gap-0 sm:w-96 sm:max-w-96">
+            <span
+              class="line-clamp-2 overflow-ellipsis text-wrap text-xl font-extrabold text-contrast sm:line-clamp-1"
+              >{{ editState.name != '' ? editState.name : 'Collection Name' }}</span
+            >
+            <span class="line-clamp-2 w-full overflow-ellipsis sm:line-clamp-1">{{
+              editState.description != '' ? editState.description : 'Collection summary'
+            }}</span>
+          </div>
+          <PopoutMenu class="btn w-fit">
+            <EditIcon aria-hidden="true" />
+            Edit Icon
+            <template #menu>
+              <span class="icon-edit-menu h-fit">
+                <FileInput
+                  id="project-icon"
+                  :max-size="262144"
+                  :show-icon="true"
+                  accept="image/png,image/jpeg,image/gif,image/webp"
+                  class="btn btn-transparent upload"
+                  style="white-space: nowrap"
+                  aria-label="Upload icon"
+                  @change="showPreviewImage"
+                >
+                  <UploadIcon aria-hidden="true" />
+                </FileInput>
+                <Button
+                  v-if="!editState.icon_removed && (previewImage || editState.icon_url)"
+                  style="white-space: nowrap"
+                  transparent
+                  @click="
+                    () => {
+                      editState.icon_removed = true
+                      previewImage = null
+                    }
+                  "
+                >
+                  <TrashIcon aria-hidden="true" />
+                  Delete Icon
+                </Button>
+              </span>
+            </template>
+          </PopoutMenu>
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <label for="name">
+          <span class="text-lg font-semibold text-contrast"> Name </span>
+        </label>
+        <input
+          id="name"
+          v-model="editState.name"
+          type="text"
+          maxlength="64"
+          :placeholder="`Enter collection name...`"
+          autocomplete="off"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <span class="text-lg font-semibold text-contrast"> Visibility </span>
+        <DropdownSelect
+          id="visibility"
+          name="Collection Visibility"
+          v-model="editState.visibility"
+          :options="['listed', 'unlisted', 'private']"
+          :disabled="editState.visibility === 'rejected'"
+          :multiple="false"
+          :display-name="
+            (s: string) => {
+              if (s === 'listed') return 'Public'
+              return capitalizeString(s)
+            }
+          "
+          :searchable="false"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <label for="summary" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-contrast"> Summary </span>
+          <span>A sentence or two that describes your collection.</span>
+        </label>
+        <div class="textarea-wrapper">
+          <textarea id="summary" v-model="editState.description" maxlength="256" />
+        </div>
+      </div>
+      <div class="flex gap-2">
+        <ButtonStyled color="brand">
+          <button @click="save(), collectionEditModal.hide()">
+            <SaveIcon aria-hidden="true" />
+            Save
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="collectionEditModal.hide()">
+            <XIcon aria-hidden="true" />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+    </div>
+  </NewModal>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType } from 'vue'
+import NewModal from './NewModal.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import { EditIcon, SaveIcon, TrashIcon, UploadIcon, XIcon } from '@modrinth/assets'
+import { capitalizeString, type CollectionEditData } from '@modrinth/utils'
+import DropdownSelect from '../base/DropdownSelect.vue'
+import Button from '../base/Button.vue'
+import FileInput from '../base/FileInput.vue'
+import PopoutMenu from '../base/PopoutMenu.vue'
+import Avatar from '../base/Avatar.vue'
+
+const props = defineProps({
+  header: {
+    type: String,
+    default: 'Editing a collection',
+  },
+  existingData: {
+    type: Object as PropType<CollectionEditData>,
+    default: null,
+    required: true,
+  },
+  onHide: {
+    type: Function,
+    default() {
+      return () => {}
+    },
+  },
+  onShow: {
+    type: Function,
+    default() {
+      return () => {}
+    },
+  },
+})
+
+const collectionEditModal = ref()
+const editState = ref<CollectionEditData>(props.existingData)
+const previewImage = ref<any>(null)
+
+// EDITING
+
+function save() {
+  emit('save', editState.value)
+}
+
+function showPreviewImage(files: any) {
+  const reader = new FileReader()
+  editState.value.icon_data = files[0]
+  editState.value.icon_removed = false
+  reader.readAsDataURL(editState.value.icon_data)
+  reader.onload = (event: any) => {
+    if (event.target) {
+      previewImage.value = event.target.result
+    }
+  }
+}
+
+// MODAL BOILERPLATE
+
+function show() {
+  props.onShow()
+  collectionEditModal.value.show()
+}
+
+function hide() {
+  props.onHide()
+  collectionEditModal.value.hide()
+}
+
+const emit = defineEmits(['save'])
+
+defineExpose({
+  show,
+  hide,
+})
+</script>
+
+<style scoped lang="scss">
+.short > * {
+  height: fit-content;
+}
+.short > .v-popper {
+  width: fit-content;
+}
+</style>
diff --git a/packages/ui/src/components/modal/ShareModal.vue b/packages/ui/src/components/modal/ShareModal.vue
index 06e6ec98b2..9e24200c03 100644
--- a/packages/ui/src/components/modal/ShareModal.vue
+++ b/packages/ui/src/components/modal/ShareModal.vue
@@ -5,13 +5,14 @@ import {
   ShareIcon,
   MailIcon,
   GlobeIcon,
-  TwitterIcon,
   MastodonIcon,
   RedditIcon,
+  BlueskyIcon,
 } from '@modrinth/assets'
 import { computed, ref, nextTick } from 'vue'
 import QrcodeVue from 'qrcode.vue'
-import { Button, Modal } from '../index'
+import { Button } from '../index'
+import NewModal from './NewModal.vue'
 
 const props = defineProps({
   header: {
@@ -24,7 +25,7 @@ const props = defineProps({
   },
   shareText: {
     type: String,
-    default: null,
+    default: '',
   },
   link: {
     type: Boolean,
@@ -50,7 +51,7 @@ const shareModal = ref(null)
 
 const qrCode = ref(null)
 const qrImage = ref(null)
-const content = ref(null)
+const content = ref('')
 const url = ref(null)
 const canShare = ref(false)
 const share = () => {
@@ -69,16 +70,20 @@ const share = () => {
 }
 
 const show = async (passedContent) => {
-  content.value = props.shareText ? `${props.shareText}\n\n${passedContent}` : passedContent
+  if (passedContent) {
+    content.value = props.shareText ? `${props.shareText}\n\n${passedContent}` : passedContent
+  } else {
+    content.value = props.shareText ? props.shareText : ''
+  }
   shareModal.value.show()
   if (props.link) {
     url.value = passedContent
     nextTick(() => {
-      console.log(qrCode.value)
+      //console.log(qrCode.value)
       fetch(qrCode.value.getElementsByTagName('canvas')[0].toDataURL('image/png'))
         .then((res) => res.blob())
         .then((blob) => {
-          console.log(blob)
+          //console.log(blob)
           qrImage.value = blob
         })
     })
@@ -106,9 +111,8 @@ const sendEmail = computed(
 
 const targetParameter = computed(() => (props.openInNewTab ? '_blank' : '_self'))
 
-const sendTweet = computed(
-  () => `https://twitter.com/intent/tweet?text=${encodeURIComponent(content.value)}`,
-)
+// eslint-disable-next-line no-unused-vars
+const sendTweet = computed(() => `https://www.youtube.com/watch?v=dQw4w9WgXcQ`)
 
 const sendToot = computed(() => `https://tootpick.org/#text=${encodeURIComponent(content.value)}`)
 
@@ -119,14 +123,22 @@ const postOnReddit = computed(
     )}`,
 )
 
+const postOnBluesky = computed(
+  () => `https://bsky.app/intent/compose?text=${encodeURIComponent(content.value)}`,
+)
+
 defineExpose({
   show,
 })
 </script>
 
 <template>
-  <Modal ref="shareModal" :header="header" :noblur="noblur" :on-hide="onHide">
-    <div class="share-body">
+  <NewModal ref="shareModal" :header="header" :on-hide="onHide">
+    <div class="flex items-center flex-wrap gap-2 p-lg">
+      <div class="flex flex-col">
+        <span v-if="!link" class="text-lg font-semibold text-contrast"> Content </span>
+        <span class="text-xs"> Markdown is not supported. </span>
+      </div>
       <div v-if="link" class="qr-wrapper">
         <div ref="qrCode">
           <QrcodeVue :value="url" class="qr-code" margin="3" />
@@ -141,6 +153,7 @@ defineExpose({
           <ClipboardCopyIcon aria-hidden="true" />
         </Button>
       </div>
+
       <div v-else class="resizable-textarea-wrapper">
         <textarea v-model="content" />
         <Button
@@ -153,7 +166,7 @@ defineExpose({
           <ClipboardCopyIcon aria-hidden="true" />
         </Button>
       </div>
-      <div class="all-buttons">
+      <div class="flex flex-col gap-2 grow justify-center">
         <div v-if="link" class="iconified-input">
           <LinkIcon />
           <input type="text" :value="url" readonly />
@@ -161,7 +174,7 @@ defineExpose({
             <ClipboardCopyIcon aria-hidden="true" />
           </Button>
         </div>
-        <div class="button-row">
+        <div class="flex gap-2 items-center flex-wrap">
           <Button v-if="canShare" v-tooltip="'Share'" aria-label="Share" icon-only @click="share">
             <ShareIcon aria-hidden="true" />
           </Button>
@@ -174,6 +187,7 @@ defineExpose({
           >
             <MailIcon aria-hidden="true" />
           </a>
+
           <a
             v-if="link"
             v-tooltip="'Open link in browser'"
@@ -184,6 +198,15 @@ defineExpose({
           >
             <GlobeIcon aria-hidden="true" />
           </a>
+          <a
+            v-tooltip="'Post about it on Bluesky'"
+            class="btn bsky icon-only"
+            :target="targetParameter"
+            :href="postOnBluesky"
+            aria-label="Post about it on Bluesky"
+          >
+            <BlueskyIcon aria-hidden="true" />
+          </a>
           <a
             v-tooltip="'Toot about it'"
             class="btn mastodon icon-only"
@@ -193,15 +216,6 @@ defineExpose({
           >
             <MastodonIcon aria-hidden="true" />
           </a>
-          <a
-            v-tooltip="'Tweet about it'"
-            class="btn twitter icon-only"
-            :target="targetParameter"
-            :href="sendTweet"
-            aria-label="Tweet about it"
-          >
-            <TwitterIcon aria-hidden="true" />
-          </a>
           <a
             v-tooltip="'Share on Reddit'"
             class="btn reddit icon-only"
@@ -214,27 +228,10 @@ defineExpose({
         </div>
       </div>
     </div>
-  </Modal>
+  </NewModal>
 </template>
 
 <style scoped lang="scss">
-.share-body {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--gap-sm);
-  padding: var(--gap-lg);
-}
-
-.all-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-sm);
-  flex-grow: 1;
-  justify-content: center;
-}
-
 .iconified-input {
   width: 100%;
 
@@ -243,26 +240,20 @@ defineExpose({
   }
 }
 
-.button-row {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap-sm);
+.btn {
+  fill: var(--color-contrast);
+  color: var(--color-contrast);
 
-  .btn {
-    fill: var(--color-contrast);
-    color: var(--color-contrast);
-
-    &.reddit {
-      background-color: #ff4500;
-    }
+  &.reddit {
+    background-color: #ff4500;
+  }
 
-    &.mastodon {
-      background-color: #563acc;
-    }
+  &.mastodon {
+    background-color: #563acc;
+  }
 
-    &.twitter {
-      background-color: #1da1f2;
-    }
+  &.bsky {
+    background-color: #0085ff;
   }
 }
 
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index 7f7892d265..f0e07f4239 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -252,3 +252,13 @@ export type Report = {
   created: string
   body: string
 }
+
+export type CollectionEditData = {
+  id: ModrinthId
+  name: string
+  description: string
+  icon_url: string
+  icon_data: Blob
+  icon_removed: boolean
+  visibility: ProjectStatus
+}