diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss
index b11d0e4a8..1fa038cd0 100644
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -625,17 +625,17 @@ tr.button-transparent {
 
 .danger-button {
   --background-color: var(--color-red);
-  --text-color: var(--color-brand-inverted);
+  --text-color: var(--color-accent-contrast);
 }
 
 .moderation-button {
   --background-color: var(--color-orange);
-  --text-color: var(--color-brand-inverted);
+  --text-color: var(--color-accent-contrast);
 }
 
 .brand-button {
   --background-color: var(--color-brand);
-  --text-color: var(--color-brand-inverted);
+  --text-color: var(--color-accent-contrast);
 }
 
 .alt-brand-button {
@@ -715,7 +715,7 @@ tr.button-transparent {
 
     &:after {
       transform: translatex(20px);
-      background: var(--color-brand-inverted);
+      background: var(--color-accent-contrast);
     }
   }
 
diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index 80a4dbad7..c317036a4 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -51,9 +51,6 @@ html {
   --color-text-inverted: initial !important;
   --color-bg-inverted: initial !important;
 
-  --color-brand: var(--color-green) !important;
-  --color-brand-inverted: initial !important;
-
   --tab-underline-hovered: initial !important;
 
   --color-button-text: initial !important;
@@ -184,6 +181,8 @@ html {
   --color-green-bg: rgba(0, 175, 92, 0.1);
   --color-blue-bg: rgba(31, 104, 192, 0.1);
   --color-purple-bg: rgba(142, 50, 243, 0.1);
+  --color-purple-highlight: rgba(142, 50, 243, 0.25);
+  --color-purple-shadow: rgba(142, 50, 243, 0.7);
 
   --color-warning-bg: hsl(355, 70%, 88%);
   --color-warning-text: hsl(342, 70%, 35%);
@@ -280,6 +279,8 @@ html {
   --color-green-bg: rgba(27, 217, 106, 0.2);
   --color-blue-bg: rgba(79, 156, 255, 0.2);
   --color-purple-bg: rgba(199, 138, 255, 0.2);
+  --color-purple-highlight: rgba(177, 101, 255, 0.25);
+  --color-purple-shadow: rgba(191, 114, 255, 0.7);
 
   --color-brand: var(--color-green);
   --color-brand-highlight: rgba(27, 217, 106, 0.25);
@@ -391,6 +392,11 @@ html {
 }
 
 .oled-mode {
+  .experimental-styles-within,
+  &.experimental-styles-within {
+    --color-button-bg: #222329;
+  }
+
   --color-bg: #000000;
   --color-raised-bg: #101013;
 
@@ -405,6 +411,11 @@ html {
 }
 
 .retro-mode {
+  .experimental-styles-within,
+  &.experimental-styles-within {
+    --color-button-bg: #3a3b38;
+  }
+
   --color-bg: #191917;
   --color-raised-bg: #1d1e1b;
   --color-button-bg: #3a3b38;
@@ -426,12 +437,25 @@ html {
   --color-purple: rgb(139, 129, 230);
   --color-gray: #718096;
 
-  --color-red-highlight: rgba(232, 32, 13, 0.25);
-  --color-orange-highlight: rgba(232, 141, 13, 0.25);
-  --color-green-highlight: rgba(60, 219, 54, 0.25);
-  --color-blue-highlight: rgba(9, 159, 239, 0.25);
+  --color-red-bg: rgba(232, 32, 13, 0.1);
+  --color-orange-bg: rgba(232, 141, 13, 0.1);
+  --color-green-bg: rgba(60, 219, 54, 0.1);
+  --color-blue-bg: rgba(9, 159, 239, 0.1);
+  --color-purple-bg: rgba(139, 129, 230, 0.1);
   --color-purple-highlight: rgba(139, 129, 230, 0.25);
-  --color-gray-highlight: rgba(113, 128, 150, 0.25);
+  --color-purple-shadow: rgba(139, 129, 230, 0.7);
+}
+
+.green-mode {
+  --color-brand: var(--color-green);
+  --color-brand-highlight: var(--color-green-highlight);
+  --color-brand-shadow: var(--color-green-shadow);
+}
+
+.purple-mode {
+  --color-brand: var(--color-purple);
+  --color-brand-highlight: var(--color-purple-highlight);
+  --color-brand-shadow: var(--color-purple-shadow);
 }
 
 body {
diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss
index 92b0bf4a8..00eba13d6 100644
--- a/apps/frontend/src/assets/styles/layout.scss
+++ b/apps/frontend/src/assets/styles/layout.scss
@@ -74,20 +74,20 @@
   .normal-page {
     margin: 0 auto;
     max-width: 80rem;
-    column-gap: 0.75rem;
+    column-gap: 1rem;
 
     grid-template:
       "sidebar content" auto
       "info content" auto
       "dummy content" 1fr
-      / 18.75rem 1fr;
+      / 300px 1fr;
 
     &.alt-layout {
       grid-template:
         "content sidebar" auto
         "content info" auto
         "content dummy" 1fr
-        / 1fr 18.75rem;
+        / 1fr 300px;
     }
 
     &.no-sidebar {
@@ -106,12 +106,12 @@
   }
 
   .normal-page__sidebar {
-    min-width: 18.75rem;
-    width: 18.75rem;
+    min-width: 300px;
+    width: 300px;
   }
 
   .normal-page__content {
-    max-width: calc(80rem - 18.75rem - 0.75rem);
+    max-width: calc(80rem - 300px - 1rem);
     //overflow-x: hidden;
   }
 }
@@ -120,8 +120,8 @@
   display: grid;
   margin: 0 auto;
   max-width: 80rem;
-  column-gap: 0.75rem;
-  padding: 0 0.75rem;
+  column-gap: 1rem;
+  padding: 0 1rem;
 
   grid-template:
     "header"
@@ -135,14 +135,14 @@
         "header header" auto
         "content sidebar" auto
         "content dummy" 1fr
-        / 1fr 18.75rem;
+        / 1fr 300px;
 
       &.alt-layout {
         grid-template:
           "header header" auto
           "sidebar content" auto
           "dummy content" 1fr
-          / 18.75rem 1fr;
+          / 300px 1fr;
       }
     }
 
@@ -158,7 +158,7 @@
 
   .normal-page__content {
     grid-area: content;
-    max-width: calc(80rem - 18.75rem - 0.75rem);
+    max-width: calc(80rem - 300px - 1rem);
     //overflow-x: hidden;
   }
 }
diff --git a/apps/frontend/src/components/ui/Checkbox.vue b/apps/frontend/src/components/ui/Checkbox.vue
index fc9390f9f..3250dde31 100644
--- a/apps/frontend/src/components/ui/Checkbox.vue
+++ b/apps/frontend/src/components/ui/Checkbox.vue
@@ -119,7 +119,7 @@ export default {
   }
 
   svg {
-    color: var(--color-brand-inverted);
+    color: var(--color-accent-contrast);
     stroke-width: 0.2rem;
     height: 0.8rem;
     width: 0.8rem;
diff --git a/apps/frontend/src/components/ui/NavStackItem.vue b/apps/frontend/src/components/ui/NavStackItem.vue
index e9adf443b..8bfa1383f 100644
--- a/apps/frontend/src/components/ui/NavStackItem.vue
+++ b/apps/frontend/src/components/ui/NavStackItem.vue
@@ -99,8 +99,8 @@ export default {
     border-radius: 0.25rem;
 
     .nav-content {
-      color: var(--color-button-text-active);
-      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+      background-color: var(--color-brand-highlight);
       box-shadow: none;
     }
   }
diff --git a/apps/frontend/src/components/ui/Notifications.vue b/apps/frontend/src/components/ui/Notifications.vue
index fc2ed6ec3..c66f59916 100644
--- a/apps/frontend/src/components/ui/Notifications.vue
+++ b/apps/frontend/src/components/ui/Notifications.vue
@@ -28,7 +28,7 @@ function stopTimer(notif) {
 .vue-notification {
   background: var(--color-blue) !important;
   border-left: 5px solid var(--color-blue) !important;
-  color: var(--color-brand-inverted) !important;
+  color: var(--color-accent-contrast) !important;
 
   box-sizing: border-box;
   text-align: left;
diff --git a/apps/frontend/src/components/ui/Pagination.vue b/apps/frontend/src/components/ui/Pagination.vue
index b04408887..cdf21d868 100644
--- a/apps/frontend/src/components/ui/Pagination.vue
+++ b/apps/frontend/src/components/ui/Pagination.vue
@@ -135,7 +135,7 @@ a {
 
   &.page-number.current {
     background: var(--color-brand);
-    color: var(--color-brand-inverted);
+    color: var(--color-accent-contrast);
     cursor: default;
     outline: 2px solid transparent;
   }
diff --git a/apps/frontend/src/components/ui/ProjectMemberHeader.vue b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
index 087ddb73d..3b1a7ab8e 100644
--- a/apps/frontend/src/components/ui/ProjectMemberHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectMemberHeader.vue
@@ -496,7 +496,7 @@ const submitForReview = async () => {
 
       &.done {
         --background-color: var(--color-green);
-        --content-color: var(--color-brand-inverted);
+        --content-color: var(--color-accent-contrast);
       }
     }
   }
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 26befc746..17b5cee9c 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -1,5 +1,13 @@
 <template>
-  <div ref="main_page" class="layout" :class="{ 'expanded-mobile-nav': isBrowseMenuOpen }">
+  <div
+    ref="main_page"
+    class="layout"
+    :class="{
+      'expanded-mobile-nav': isBrowseMenuOpen,
+      'purple-mode':
+        cosmetics.accentColor === 'purple' && auth.user && isPermission(auth.user.badges, 1 << 0),
+    }"
+  >
     <div
       v-if="auth.user && !auth.user.email_verified && route.path !== '/auth/verify-email'"
       class="email-nag"
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index ebd06c9ce..513881ef9 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -646,7 +646,7 @@ export default defineNuxtComponent({
 
 .label-button[data-active="true"] {
   --background-color: var(--color-red);
-  --text-color: var(--color-brand-inverted);
+  --text-color: var(--color-accent-contrast);
 }
 
 .links-modal {
diff --git a/apps/frontend/src/pages/organization/[id]/settings/projects.vue b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
index d63e3f67b..92eb4ed70 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
@@ -654,7 +654,7 @@ const onBulkEditLinks = useClientTry(async () => {
 
 .label-button[data-active="true"] {
   --background-color: var(--color-red);
-  --text-color: var(--color-brand-inverted);
+  --text-color: var(--color-accent-contrast);
 }
 
 .links-modal {
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 68281791f..68d49d140 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="experimental-styles-within flex flex-col gap-6">
     <MessageBanner v-if="flags.developerMode" message-type="warning" class="developer-message">
       <CodeIcon class="inline-flex" />
       <IntlFormatted :message-id="developerModeBanner.description">
@@ -13,14 +13,18 @@
         {{ formatMessage(developerModeBanner.deactivate) }}
       </Button>
     </MessageBanner>
-    <section class="universal-card">
-      <h2 class="text-2xl">{{ formatMessage(colorTheme.title) }}</h2>
-      <p>{{ formatMessage(colorTheme.description) }}</p>
-      <div class="theme-options mt-4">
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1">
+        <h2 class="m-0 text-2xl font-extrabold text-contrast">
+          {{ formatMessage(colorTheme.title) }}
+        </h2>
+        <p class="m-0">{{ formatMessage(colorTheme.description) }}</p>
+      </div>
+      <section class="theme-options">
         <button
           v-for="option in themeOptions"
           :key="option"
-          class="preview-radio button-base"
+          class="preview-radio transition-transform hover:brightness-110 active:scale-[0.99] active:brightness-125"
           :class="{ selected: theme.preferred === option }"
           @click="() => updateColorTheme(option)"
         >
@@ -47,187 +51,153 @@
             />
           </div>
         </button>
+      </section>
+    </div>
+    <div v-if="auth.user && isPermission(auth.user.badges, 1 << 0)" class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1">
+        <h2 class="m-0 flex items-center gap-2 text-2xl font-extrabold text-contrast">
+          {{ formatMessage(accentColor.title) }}
+          <span
+            class="flex items-center justify-center gap-1 rounded-full bg-bg-purple px-2 py-0.5 text-sm font-bold text-purple"
+          >
+            <ModrinthIcon class="h-4 w-auto" />
+            Modrinth+
+          </span>
+        </h2>
+        <p class="m-0">{{ formatMessage(accentColor.description) }}</p>
       </div>
-    </section>
-    <section class="universal-card">
-      <h2 class="text-2xl">{{ formatMessage(projectListLayouts.title) }}</h2>
-      <p class="mb-4">{{ formatMessage(projectListLayouts.description) }}</p>
-      <div class="project-lists">
-        <div v-for="projectType in listTypes" :key="projectType.id + '-project-list-layouts'">
+      <section class="theme-options">
+        <button
+          v-for="option in accentOptions"
+          :key="option"
+          class="preview-radio transition-transform hover:brightness-110 active:scale-[0.99] active:brightness-125"
+          :class="{
+            selected:
+              cosmetics.accentColor === option || (!cosmetics.accentColor && option === 'green'),
+          }"
+          @click="() => (cosmetics.accentColor = option)"
+        >
+          <div class="preview" :class="`${option}-mode`">
+            <TextLogo class="h-8 w-auto text-contrast" />
+          </div>
           <div class="label">
-            <div class="label__title">
-              {{
-                projectListLayouts[projectType.id]
-                  ? formatMessage(projectListLayouts[projectType.id])
-                  : projectType.id
-              }}
-            </div>
+            <RadioButtonChecked
+              v-if="
+                cosmetics.accentColor === option || (!cosmetics.accentColor && option === 'green')
+              "
+              class="radio"
+            />
+            <RadioButtonIcon v-else class="radio" />
+            {{ accentColor[option] ? formatMessage(accentColor[option]) : option }}
           </div>
-          <div class="project-list-layouts">
-            <button
-              class="preview-radio button-base"
-              :class="{ selected: cosmetics.searchDisplayMode[projectType.id] === 'list' }"
-              @click="() => (cosmetics.searchDisplayMode[projectType.id] = 'list')"
-            >
-              <div class="preview">
-                <div class="layout-list-mode">
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                </div>
-              </div>
-              <div class="label">
-                <RadioButtonChecked
-                  v-if="cosmetics.searchDisplayMode[projectType.id] === 'list'"
-                  class="radio"
-                />
-                <RadioButtonIcon v-else class="radio" />
-                Rows
-              </div>
-            </button>
-            <button
-              class="preview-radio button-base"
-              :class="{ selected: cosmetics.searchDisplayMode[projectType.id] === 'grid' }"
-              @click="() => (cosmetics.searchDisplayMode[projectType.id] = 'grid')"
-            >
-              <div class="preview">
-                <div class="layout-grid-mode">
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                </div>
-              </div>
-              <div class="label">
-                <RadioButtonChecked
-                  v-if="cosmetics.searchDisplayMode[projectType.id] === 'grid'"
-                  class="radio"
-                />
-                <RadioButtonIcon v-else class="radio" />
-                Grid
-              </div>
-            </button>
-            <button
-              class="preview-radio button-base"
-              :class="{ selected: cosmetics.searchDisplayMode[projectType.id] === 'gallery' }"
-              @click="() => (cosmetics.searchDisplayMode[projectType.id] = 'gallery')"
-            >
-              <div class="preview">
-                <div class="layout-gallery-mode">
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                  <div class="example-card card"></div>
-                </div>
-              </div>
-              <div class="label">
-                <RadioButtonChecked
-                  v-if="cosmetics.searchDisplayMode[projectType.id] === 'gallery'"
-                  class="radio"
-                />
-                <RadioButtonIcon v-else class="radio" />
-                Gallery
-              </div>
-            </button>
-          </div>
-        </div>
+        </button>
+      </section>
+    </div>
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-1">
+        <h2 class="m-0 text-2xl font-extrabold text-contrast">
+          {{ formatMessage(toggleFeatures.title) }}
+        </h2>
+        <p class="m-0">{{ formatMessage(toggleFeatures.description) }}</p>
       </div>
-    </section>
-    <section class="universal-card">
-      <h2 class="text-2xl">{{ formatMessage(toggleFeatures.title) }}</h2>
-      <p class="mb-4">{{ formatMessage(toggleFeatures.description) }}</p>
-      <div class="adjacent-input small">
-        <label for="advanced-rendering">
-          <span class="label__title">
-            {{ formatMessage(toggleFeatures.advancedRenderingTitle) }}
-          </span>
-          <span class="label__description">
-            {{ formatMessage(toggleFeatures.advancedRenderingDescription) }}
-          </span>
-        </label>
+      <label
+        class="!m-0 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-1 rounded-2xl border-2 border-solid border-bg-raised px-6 py-4 transition-transform hover:brightness-110 active:scale-[0.99] active:brightness-125"
+        :class="{ 'bg-bg-raised': cosmetics.advancedRendering }"
+      >
+        <span class="col-start-1 font-extrabold text-contrast">
+          {{ formatMessage(toggleFeatures.advancedRenderingTitle) }}
+        </span>
+        <span class="col-start-1">{{
+          formatMessage(toggleFeatures.advancedRenderingDescription)
+        }}</span>
         <input
           id="advanced-rendering"
           v-model="cosmetics.advancedRendering"
-          class="switch stylized-toggle"
+          class="switch stylized-toggle col-start-2 row-span-2 row-start-1"
           type="checkbox"
         />
-      </div>
-      <div class="adjacent-input small">
-        <label for="external-links-new-tab">
-          <span class="label__title">
-            {{ formatMessage(toggleFeatures.externalLinksNewTabTitle) }}
-          </span>
-          <span class="label__description">
-            {{ formatMessage(toggleFeatures.externalLinksNewTabDescription) }}
-          </span>
-        </label>
+      </label>
+      <label
+        class="!m-0 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-1 rounded-2xl border-2 border-solid border-bg-raised px-6 py-4 transition-transform hover:brightness-110 active:scale-[0.99] active:brightness-125"
+        :class="{ 'bg-bg-raised': cosmetics.externalLinksNewTab }"
+      >
+        <span class="col-start-1 font-extrabold text-contrast">
+          {{ formatMessage(toggleFeatures.externalLinksNewTabTitle) }}
+        </span>
+        <span class="col-start-1">{{
+          formatMessage(toggleFeatures.externalLinksNewTabDescription)
+        }}</span>
         <input
-          id="external-links-new-tab"
           v-model="cosmetics.externalLinksNewTab"
-          class="switch stylized-toggle"
+          class="switch stylized-toggle col-start-2 row-span-2 row-start-1"
           type="checkbox"
         />
-      </div>
-      <div v-if="false" class="adjacent-input small">
-        <label for="modrinth-app-promos">
-          <span class="label__title">
-            {{ formatMessage(toggleFeatures.hideModrinthAppPromosTitle) }}
-          </span>
-          <span class="label__description">
-            {{ formatMessage(toggleFeatures.hideModrinthAppPromosDescription) }}
-          </span>
-        </label>
+      </label>
+      <label
+        v-if="false"
+        class="!m-0 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-1 rounded-2xl border-2 border-solid border-bg-raised px-6 py-4 transition-transform hover:brightness-110 active:scale-[0.99] active:brightness-125"
+        :class="{ 'bg-bg-raised': cosmetics.hideModrinthAppPromos }"
+      >
+        <span class="col-start-1 font-extrabold text-contrast">
+          {{ formatMessage(toggleFeatures.hideModrinthAppPromosTitle) }}
+        </span>
+        <span class="col-start-1">{{
+          formatMessage(toggleFeatures.hideModrinthAppPromosDescription)
+        }}</span>
         <input
-          id="modrinth-app-promos"
           v-model="cosmetics.hideModrinthAppPromos"
-          class="switch stylized-toggle"
+          class="switch stylized-toggle col-start-2 row-span-2 row-start-1"
           type="checkbox"
         />
-      </div>
-      <div class="adjacent-input small">
-        <label for="search-layout-toggle">
-          <span class="label__title">
-            {{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarTitle) }}
-          </span>
-          <span class="label__description">
-            {{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarDescription) }}
-          </span>
-        </label>
+      </label>
+      <label
+        class="!m-0 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-1 rounded-2xl border-2 border-solid border-bg-raised px-6 py-4 transition-transform hover:brightness-110 active:scale-[0.99] active:brightness-125"
+        :class="{ 'bg-bg-raised': cosmetics.rightSearchLayout }"
+      >
+        <span class="col-start-1 font-extrabold text-contrast">
+          {{ formatMessage(toggleFeatures.rightAlignedFiltersSidebarTitle) }}
+        </span>
+        <span class="col-start-1">{{
+          formatMessage(toggleFeatures.rightAlignedFiltersSidebarDescription)
+        }}</span>
         <input
-          id="search-layout-toggle"
           v-model="cosmetics.rightSearchLayout"
-          class="switch stylized-toggle"
+          class="switch stylized-toggle col-start-2 row-span-2 row-start-1"
           type="checkbox"
         />
-      </div>
-      <div class="adjacent-input small">
-        <label for="project-layout-toggle">
-          <span class="label__title">
-            {{ formatMessage(toggleFeatures.leftAlignedContentSidebarTitle) }}
-          </span>
-          <span class="label__description">
-            {{ formatMessage(toggleFeatures.leftAlignedContentSidebarDescription) }}
-          </span>
-        </label>
+      </label>
+      <label
+        class="!m-0 grid cursor-pointer grid-cols-[1fr_auto] items-center gap-1 rounded-2xl border-2 border-solid border-bg-raised px-6 py-4 transition-transform hover:brightness-110 active:scale-[0.99] active:brightness-125"
+        :class="{ 'bg-bg-raised': cosmetics.leftContentLayout }"
+      >
+        <span class="col-start-1 font-extrabold text-contrast">
+          {{ formatMessage(toggleFeatures.leftAlignedContentSidebarTitle) }}
+        </span>
+        <span class="col-start-1">{{
+          formatMessage(toggleFeatures.leftAlignedContentSidebarDescription)
+        }}</span>
         <input
-          id="project-layout-toggle"
           v-model="cosmetics.leftContentLayout"
-          class="switch stylized-toggle"
+          class="switch stylized-toggle col-start-2 row-span-2 row-start-1"
           type="checkbox"
         />
-      </div>
-    </section>
+      </label>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { CodeIcon, MoonIcon, RadioButtonChecked, RadioButtonIcon, SunIcon } from "@modrinth/assets";
-import { Button } from "@modrinth/ui";
+import {
+  ModrinthIcon,
+  CodeIcon,
+  MoonIcon,
+  RadioButtonChecked,
+  RadioButtonIcon,
+  SunIcon,
+} from "@modrinth/assets";
+import { TextLogo, Button } from "@modrinth/ui";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
-import type { DisplayLocation } from "~/plugins/cosmetics";
+import type { AccentColor, DisplayLocation } from "~/plugins/cosmetics";
 import { formatProjectType } from "~/plugins/shorthands.js";
 import { isDarkTheme, type Theme } from "~/plugins/theme/index.ts";
 
@@ -236,6 +206,7 @@ useHead({
 });
 
 const { formatMessage } = useVIntl();
+const auth = await useAuth();
 
 const developerModeBanner = defineMessages({
   description: {
@@ -288,6 +259,26 @@ const colorTheme = defineMessages({
   },
 });
 
+const accentColor = defineMessages({
+  title: {
+    id: "settings.display.accent.title",
+    defaultMessage: "Accent color",
+  },
+  description: {
+    id: "settings.display.accent.description",
+    defaultMessage:
+      "Thank you for supporting Modrinth! You can choose to make the Modrinth accent color purple if you'd like.",
+  },
+  green: {
+    id: "settings.display.accent.green",
+    defaultMessage: "Modrinth Green",
+  },
+  purple: {
+    id: "settings.display.accent.purple",
+    defaultMessage: "Plus Purple",
+  },
+});
+
 const projectListLayouts = defineMessages({
   title: {
     id: "settings.display.project-list-layouts.title",
@@ -415,6 +406,10 @@ const themeOptions = computed(() => {
   return options;
 });
 
+const accentOptions = computed(() => {
+  return ["green", "purple"] as AccentColor[];
+});
+
 function updateColorTheme(value: Theme | "system") {
   if (value !== "system") {
     if (isDarkTheme(value)) {
@@ -462,7 +457,7 @@ const listTypes = computed(() => {
   border-radius: var(--radius-md);
   padding: 0;
   overflow: hidden;
-  border: 1px solid var(--color-divider);
+  border: 1px solid var(--color-button-bg);
   background-color: var(--color-button-bg);
   color: var(--color-base);
   display: flex;
@@ -471,6 +466,8 @@ const listTypes = computed(() => {
 
   &.selected {
     color: var(--color-contrast);
+    background-color: var(--color-brand-highlight);
+    border-color: var(--color-brand-highlight);
 
     .label {
       .radio {
diff --git a/apps/frontend/src/plugins/cosmetics.ts b/apps/frontend/src/plugins/cosmetics.ts
index 2c1b6eebe..4ab23ae6a 100644
--- a/apps/frontend/src/plugins/cosmetics.ts
+++ b/apps/frontend/src/plugins/cosmetics.ts
@@ -1,6 +1,7 @@
 import type { DarkTheme } from "./theme/index.ts";
 
 export type DisplayMode = "list" | "gallery" | "grid";
+export type AccentColor = "green" | "purple";
 
 export type DisplayLocation =
   | "mod"
@@ -22,6 +23,7 @@ export interface Cosmetics {
   preferredDarkTheme: DarkTheme;
   searchDisplayMode: Record<DisplayLocation, DisplayMode>;
   hideStagingBanner: boolean;
+  accentColor: AccentColor;
 }
 
 export default defineNuxtPlugin({
@@ -40,6 +42,7 @@ export default defineNuxtPlugin({
         externalLinksNewTab: true,
         notUsingBlockers: false,
         hideModrinthAppPromos: false,
+        accentColor: "green",
         preferredDarkTheme: "dark",
         searchDisplayMode: {
           mod: "list",
diff --git a/packages/assets/branding/logo.svg b/packages/assets/branding/logo.svg
index 3d73b0f8b..a6b2e3807 100644
--- a/packages/assets/branding/logo.svg
+++ b/packages/assets/branding/logo.svg
@@ -1,4 +1,4 @@
 <svg width="512" height="514" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="var(--color-brand)"/>
-  <path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="var(--color-brand)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="currentColor"/>
+  <path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="currentColor"/>
 </svg>