From 4c2565826f76d410dc83c3053f42b520e64ef33a Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Tue, 9 Apr 2024 11:18:56 -0700
Subject: [PATCH] Settings refactor and redesign (#1669)

* new settings work

* Polishing work on settings refactor

* Run intl:extract

* List view -> Rows view

* Remove current preferred system theme indicator to make the themes fit on one line

* Remove extra margin on top of navstack
---
 assets/images/utils/monitor-smartphone.svg |   1 +
 assets/styles/components.scss              |  39 +-
 assets/styles/global.scss                  |  41 ++
 components/ui/Checkbox.vue                 |   8 +-
 components/ui/MessageBanner.vue            |   1 +
 components/ui/Modal.vue                    |   1 +
 components/ui/NavRow.vue                   |   8 +
 components/ui/NavStack.vue                 |   4 +
 components/ui/NavStackItem.vue             |   4 +
 components/ui/Pagination.vue               |   1 +
 composables/cosmetics.js                   |   1 +
 composables/theme.js                       |   5 +-
 layouts/default.vue                        |  18 +-
 locales/en-US/index.json                   | 151 ++++-
 pages/dashboard/projects.vue               |   1 +
 pages/settings.vue                         | 137 +++--
 pages/settings/account.vue                 |   8 -
 pages/settings/index.vue                   | 658 ++++++++++++++++++---
 pages/settings/pats.vue                    |   8 +-
 pages/settings/profile.vue                 | 246 ++++++++
 pages/user/[id].vue                        | 269 +++------
 utils/common-messages.ts                   |  10 +-
 22 files changed, 1242 insertions(+), 378 deletions(-)
 create mode 100644 assets/images/utils/monitor-smartphone.svg
 create mode 100644 pages/settings/profile.vue

diff --git a/assets/images/utils/monitor-smartphone.svg b/assets/images/utils/monitor-smartphone.svg
new file mode 100644
index 000000000..0494f32d6
--- /dev/null
+++ b/assets/images/utils/monitor-smartphone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor-smartphone"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"/><path d="M10 19v-3.96 3.15"/><path d="M7 19h5"/><rect width="6" height="10" x="16" y="12" rx="2"/></svg>
\ No newline at end of file
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index 12020304f..156bf2bef 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -25,6 +25,7 @@
     border-radius: var(--size-rounded-card);
     padding: var(--spacing-card-lg);
     gap: var(--spacing-card-md);
+    outline: 1px solid transparent;
 
     .label {
       color: var(--color-heading);
@@ -65,6 +66,7 @@
 
   margin-bottom: var(--spacing-card-md);
   outline: 2px solid transparent;
+  outline-offset: -2px;
 
   box-shadow: var(--shadow-card);
 
@@ -687,7 +689,7 @@ tr.button-transparent {
   }
 
   color: var(--color-text) !important;
-  outline: 2px solid transparent;
+  outline: none !important;
 
   input {
     background: transparent;
@@ -706,6 +708,7 @@ tr.button-transparent {
     cursor: pointer;
     padding-left: 7px;
     padding-top: 10px;
+    outline: 2px solid transparent;
 
     transition: background-color 0.1s ease-in-out;
 
@@ -753,8 +756,13 @@ tr.button-transparent {
     border-bottom-left-radius: var(--size-rounded-sm);
     border-bottom-right-radius: var(--size-rounded-sm);
     box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+    outline: 2px solid transparent;
 
     .multiselect__element {
+      .multiselect__option {
+        outline: 1px solid transparent;
+      }
+
       .multiselect__option--highlight {
         background: var(--color-button-bg-active);
         color: var(--color-text-dark);
@@ -894,31 +902,6 @@ tr.button-transparent {
   }
 }
 
-.card {
-  position: relative;
-  min-height: var(--font-size-2xl);
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-
-  background: var(--color-raised-bg);
-  border-radius: var(--size-rounded-card);
-  outline: 2px solid transparent;
-
-  margin-bottom: var(--spacing-card-md);
-
-  box-shadow: var(--shadow-card);
-
-  .card__overlay {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    grid-gap: 0.5rem;
-    z-index: 2;
-  }
-}
-
 .card-divider {
   background-color: var(--color-divider);
   border: none;
@@ -1082,6 +1065,7 @@ button {
   transition: box-shadow 0.1s ease-in-out;
   overflow: hidden;
   max-width: 100%;
+  outline: 2px solid transparent;
 
   .text-input-wrapper__before {
     display: flex;
@@ -1102,9 +1086,10 @@ button {
   textarea {
     border-radius: 0;
     background-color: transparent;
-    box-shadow: unset;
+    box-shadow: unset !important;
     padding-left: 0;
     flex-grow: 1;
+    outline: none !important;
   }
 
   &:focus,
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index fde901333..ee584048b 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -288,6 +288,29 @@ html {
   --color-ad: #0d1828;
 }
 
+.retro-mode {
+  --color-bg: #191917;
+  --color-raised-bg: #1d1e1b;
+  --color-button-bg: #3a3b38;
+  --color-base: #c3c4b3;
+  --color-secondary: #777a74;
+  --color-contrast: #e6e2d1;
+
+  --color-brand: #4d9227;
+  --color-brand-highlight: #25421e;
+  --color-ad: var(--color-brand-highlight);
+  --color-ad-raised: var(--color-brand);
+  --color-ad-contrast: black;
+  --color-ad-highlight: var(--color-brand);
+
+  --color-red: rgb(232, 32, 13);
+  --color-orange: rgb(232, 141, 13);
+  --color-green: rgb(60, 219, 54);
+  --color-blue: rgb(9, 159, 239);
+  --color-purple: rgb(139, 129, 230);
+  --color-gray: #718096;
+}
+
 body {
   // Defaults
   background-color: var(--color-bg);
@@ -457,3 +480,21 @@ a:focus-visible,
   outline: 0.25rem solid #ea80ff;
   border-radius: 0.25rem;
 }
+
+// OMORPHIA FIXES
+.card {
+  outline-offset: -2px;
+}
+
+input {
+  outline: 2px solid transparent !important;
+}
+
+.button-animation {
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
+    outline-width 0.2s ease-in-out;
+}
+
+.button-transparent {
+  box-shadow: none;
+}
diff --git a/components/ui/Checkbox.vue b/components/ui/Checkbox.vue
index 75816d2ab..ccf14a72a 100644
--- a/components/ui/Checkbox.vue
+++ b/components/ui/Checkbox.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="checkbox-outer button-within"
-    :class="{ disabled }"
+    :class="{ disabled, checked: modelValue }"
     role="presentation"
     @click="toggle"
   >
@@ -82,6 +82,12 @@ export default {
   &.disabled {
     cursor: not-allowed;
   }
+
+  &.checked {
+    outline: 2px solid transparent;
+    outline-offset: 4px;
+    border-radius: 0.25rem;
+  }
 }
 
 .checkbox {
diff --git a/components/ui/MessageBanner.vue b/components/ui/MessageBanner.vue
index e3ac35edb..6432220b3 100644
--- a/components/ui/MessageBanner.vue
+++ b/components/ui/MessageBanner.vue
@@ -24,6 +24,7 @@ const ariaLabelByType = computed(() => `Banner with ${props.messageType} message
   border-radius: var(--size-rounded-card);
   overflow: hidden;
   outline: 2px solid transparent;
+  outline-offset: -2px;
 
   margin-bottom: var(--spacing-card-md);
 
diff --git a/components/ui/Modal.vue b/components/ui/Modal.vue
index e7e323906..95b0aab5b 100644
--- a/components/ui/Modal.vue
+++ b/components/ui/Modal.vue
@@ -119,6 +119,7 @@ export default {
     overflow-y: auto;
     width: 600px;
     pointer-events: auto;
+    outline: 3px solid transparent;
 
     .header {
       display: flex;
diff --git a/components/ui/NavRow.vue b/components/ui/NavRow.vue
index a926a64c9..f417104f6 100644
--- a/components/ui/NavRow.vue
+++ b/components/ui/NavRow.vue
@@ -134,6 +134,12 @@ export default {
     &.router-link-exact-active {
       color: var(--color-text);
 
+      &:not(:focus-visible) {
+        outline: 2px solid transparent;
+        outline-offset: 6px;
+        border-radius: 0.25rem;
+      }
+
       &::after {
         opacity: 1;
       }
@@ -157,6 +163,8 @@ export default {
     transition: all ease-in-out 0.2s;
     border-radius: var(--size-rounded-max);
     background-color: var(--color-brand);
+    outline: 2px solid transparent;
+    outline-offset: -2px;
 
     @media (prefers-reduced-motion) {
       transition: none !important;
diff --git a/components/ui/NavStack.vue b/components/ui/NavStack.vue
index 88fb10400..bbd9ec21e 100644
--- a/components/ui/NavStack.vue
+++ b/components/ui/NavStack.vue
@@ -19,6 +19,10 @@ ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
+
+  > :first-child {
+    margin-top: 0;
+  }
 }
 
 li {
diff --git a/components/ui/NavStackItem.vue b/components/ui/NavStackItem.vue
index 24aae857d..3feb83679 100644
--- a/components/ui/NavStackItem.vue
+++ b/components/ui/NavStackItem.vue
@@ -70,6 +70,7 @@ export default {
   box-shadow: none;
   padding: 0;
   width: 100%;
+  outline: none;
 
   :where(.nav-link) {
     --text-color: var(--color-text);
@@ -94,6 +95,9 @@ export default {
   }
 
   &.router-link-exact-active {
+    outline: 2px solid transparent;
+    border-radius: 0.25rem;
+
     .nav-content {
       color: var(--color-button-text-active);
       background-color: var(--color-button-bg);
diff --git a/components/ui/Pagination.vue b/components/ui/Pagination.vue
index 37b4307c4..f775cf3ea 100644
--- a/components/ui/Pagination.vue
+++ b/components/ui/Pagination.vue
@@ -133,6 +133,7 @@ a {
     background: var(--color-brand);
     color: var(--color-brand-inverted);
     cursor: default;
+    outline: 2px solid transparent;
   }
 
   &.paginate.disabled {
diff --git a/composables/cosmetics.js b/composables/cosmetics.js
index 619197cf7..87637c7c2 100644
--- a/composables/cosmetics.js
+++ b/composables/cosmetics.js
@@ -17,6 +17,7 @@ export const useCosmetics = () =>
         developerMode: false,
         notUsingBlockers: false,
         hideModrinthAppPromos: false,
+        preferredDarkTheme: 'dark',
         searchDisplayMode: {
           mod: 'list',
           plugin: 'list',
diff --git a/composables/theme.js b/composables/theme.js
index dfc6acc0e..eac074cb7 100644
--- a/composables/theme.js
+++ b/composables/theme.js
@@ -24,6 +24,7 @@ export const useTheme = () =>
 
 export const updateTheme = (value, updatePreference = false) => {
   const theme = useTheme()
+  const cosmetics = useCosmetics()
 
   const themeCookie = useCookie('color-mode', {
     maxAge: 60 * 60 * 24 * 365 * 10,
@@ -40,7 +41,7 @@ export const updateTheme = (value, updatePreference = false) => {
     if (colorSchemeQueryList.matches) {
       theme.value.value = 'light'
     } else {
-      theme.value.value = 'dark'
+      theme.value.value = cosmetics.value.preferredDarkTheme
     }
   } else {
     theme.value.value = value
@@ -53,3 +54,5 @@ export const updateTheme = (value, updatePreference = false) => {
 
   themeCookie.value = theme.value
 }
+
+export const DARK_THEMES = ['dark', 'oled', 'retro']
diff --git a/layouts/default.vue b/layouts/default.vue
index 4f0df3a8a..21774cc54 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -433,6 +433,7 @@ import ModalCreation from '~/components/ui/ModalCreation.vue'
 import Avatar from '~/components/ui/Avatar.vue'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 import { commonMessages } from '~/utils/common-messages.ts'
+import { DARK_THEMES } from '~/composables/theme.js'
 
 const { formatMessage } = useVIntl()
 
@@ -724,7 +725,10 @@ function toggleBrowseMenu() {
   }
 }
 function changeTheme() {
-  updateTheme(app.$colorMode.value === 'dark' ? 'light' : 'dark', true)
+  updateTheme(
+    DARK_THEMES.includes(app.$colorMode.value) ? 'light' : cosmetics.value.preferredDarkTheme,
+    true
+  )
 }
 
 function hideStagingBanner() {
@@ -781,6 +785,15 @@ function hideStagingBanner() {
         a {
           align-items: center;
           display: flex;
+
+          &:not(:focus-visible) {
+            outline: none;
+
+            &.router-link-exact-active {
+              outline: 2px solid transparent;
+              border-radius: 0.25rem;
+            }
+          }
         }
 
         .small-logo {
@@ -909,6 +922,7 @@ function hideStagingBanner() {
               display: flex;
               justify-content: center;
               padding: 0;
+              outline: none;
 
               .user-icon {
                 height: 2rem;
@@ -959,6 +973,7 @@ function hideStagingBanner() {
                 display: flex;
                 padding: 0.5rem 0.75rem;
                 width: 100%;
+                outline: none;
 
                 .icon {
                   margin-right: 0.5rem;
@@ -969,6 +984,7 @@ function hideStagingBanner() {
                 &.router-link-exact-active {
                   color: var(--color-button-text-active);
                   background-color: var(--color-button-bg);
+                  outline: 2px solid transparent;
 
                   &.primary-color {
                     color: var(--color-button-text-active);
diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 245907524..0f2a8fba9 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -191,6 +191,9 @@
   "button.sign-out": {
     "message": "Sign out"
   },
+  "button.upload-image": {
+    "message": "Upload image"
+  },
   "collection.button.delete-icon": {
     "message": "Delete icon"
   },
@@ -285,7 +288,10 @@
     "message": "Grid view"
   },
   "input.view.list": {
-    "message": "List view"
+    "message": "Rows view"
+  },
+  "label.changes-saved": {
+    "message": "Changes saved"
   },
   "label.collections": {
     "message": "Collections"
@@ -779,6 +785,114 @@
   "scopes.versionWrite.label": {
     "message": "Write versions"
   },
+  "settings.account.title": {
+    "message": "Account and security"
+  },
+  "settings.appearance.title": {
+    "message": "Appearance"
+  },
+  "settings.applications.title": {
+    "message": "Your applications"
+  },
+  "settings.authorized-apps.title": {
+    "message": "Authorized apps"
+  },
+  "settings.display.banner.developer-mode.button": {
+    "message": "Deactivate developer mode"
+  },
+  "settings.display.banner.developer-mode.description": {
+    "message": "<strong>Developer mode</strong> is active. This will allow you to view the internal IDs of various things throughout Modrinth that may be helpful if you're a developer using the Modrinth API. Click on the Modrinth logo at the bottom of the page 5 times to toggle developer mode."
+  },
+  "settings.display.flags.description": {
+    "message": "Enable or disable certain features on this device."
+  },
+  "settings.display.flags.title": {
+    "message": "Feature flags"
+  },
+  "settings.display.project-list-layouts.datapack": {
+    "message": "Data Packs page"
+  },
+  "settings.display.project-list-layouts.description": {
+    "message": "Select your preferred layout for each page that displays project lists on this device."
+  },
+  "settings.display.project-list-layouts.mod": {
+    "message": "Mods page"
+  },
+  "settings.display.project-list-layouts.modpack": {
+    "message": "Modpacks page"
+  },
+  "settings.display.project-list-layouts.plugin": {
+    "message": "Plugins page"
+  },
+  "settings.display.project-list-layouts.resourcepack": {
+    "message": "Resource Packs page"
+  },
+  "settings.display.project-list-layouts.shader": {
+    "message": "Shaders page"
+  },
+  "settings.display.project-list-layouts.title": {
+    "message": "Project list layouts"
+  },
+  "settings.display.project-list-layouts.user": {
+    "message": "User profile pages"
+  },
+  "settings.display.sidebar.advanced-rendering.description": {
+    "message": "Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering."
+  },
+  "settings.display.sidebar.advanced-rendering.title": {
+    "message": "Advanced rendering"
+  },
+  "settings.display.sidebar.external-links-new-tab.description": {
+    "message": "Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab."
+  },
+  "settings.display.sidebar.external-links-new-tab.title": {
+    "message": "Open external links in new tab"
+  },
+  "settings.display.sidebar.hide-app-promos.description": {
+    "message": "Hides the \"Get Modrinth App\" buttons from primary navigation. The Modrinth App page can still be found on the landing page or in the footer."
+  },
+  "settings.display.sidebar.hide-app-promos.title": {
+    "message": "Hide Modrinth App promotions"
+  },
+  "settings.display.sidebar.right-aligned-project-sidebar.description": {
+    "message": "Aligns the project details sidebar to the right of the page's content."
+  },
+  "settings.display.sidebar.right-aligned-project-sidebar.title": {
+    "message": "Right-aligned project sidebar"
+  },
+  "settings.display.sidebar.right-aligned-search-sidebar.description": {
+    "message": "Aligns the search filters sidebar to the right of the search results."
+  },
+  "settings.display.sidebar.right-aligned-search-sidebar.title": {
+    "message": "Right-aligned search sidebar"
+  },
+  "settings.display.theme.dark": {
+    "message": "Dark"
+  },
+  "settings.display.theme.description": {
+    "message": "Select your preferred color theme for Modrinth on this device."
+  },
+  "settings.display.theme.light": {
+    "message": "Light"
+  },
+  "settings.display.theme.oled": {
+    "message": "OLED"
+  },
+  "settings.display.theme.preferred-dark-theme": {
+    "message": "Preferred dark theme"
+  },
+  "settings.display.theme.preferred-light-theme": {
+    "message": "Preferred light theme"
+  },
+  "settings.display.theme.retro": {
+    "message": "Retro"
+  },
+  "settings.display.theme.system": {
+    "message": "Sync with system"
+  },
+  "settings.display.theme.title": {
+    "message": "Color theme"
+  },
   "settings.language.categories.auto": {
     "message": "Automatic"
   },
@@ -858,10 +972,7 @@
     "message": "Edit personal access token"
   },
   "settings.pats.title": {
-    "message": "PATs"
-  },
-  "settings.pats.title.long": {
-    "message": "Personal Access Tokens"
+    "message": "Personal access tokens"
   },
   "settings.pats.token.action.edit": {
     "message": "Edit token"
@@ -881,6 +992,36 @@
   "settings.pats.token.never-used": {
     "message": "Never used"
   },
+  "settings.profile.bio.description": {
+    "message": "A short description to tell everyone a little bit about you."
+  },
+  "settings.profile.bio.title": {
+    "message": "Bio"
+  },
+  "settings.profile.description": {
+    "message": "Your profile information is publicly viewable on Modrinth and through the <docs-link>Modrinth API</docs-link>."
+  },
+  "settings.profile.profile-info": {
+    "message": "Profile information"
+  },
+  "settings.profile.profile-picture.reset": {
+    "message": "Reset"
+  },
+  "settings.profile.profile-picture.title": {
+    "message": "Profile picture"
+  },
+  "settings.profile.title": {
+    "message": "Public profile"
+  },
+  "settings.profile.username.description": {
+    "message": "A unique case-insensitive name to identify your profile."
+  },
+  "settings.profile.username.title": {
+    "message": "Username"
+  },
+  "settings.profile.visit-profile": {
+    "message": "Visit your profile"
+  },
   "settings.sessions.action.revoke-session": {
     "message": "Revoke session"
   },
diff --git a/pages/dashboard/projects.vue b/pages/dashboard/projects.vue
index 477f28855..9af125970 100644
--- a/pages/dashboard/projects.vue
+++ b/pages/dashboard/projects.vue
@@ -502,6 +502,7 @@ export default defineNuxtComponent({
   border-radius: var(--size-rounded-sm);
   overflow: hidden;
   margin-top: var(--spacing-card-md);
+  outline: 1px solid transparent;
 
   .grid-table__row {
     display: contents;
diff --git a/pages/settings.vue b/pages/settings.vue
index 5024b141a..f7e671b65 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,65 +1,116 @@
 <template>
-  <div class="normal-page">
-    <div class="normal-page__sidebar">
-      <aside class="universal-card">
-        <h1>Settings</h1>
-        <NavStack>
-          <NavStackItem link="/settings" label="Appearance">
-            <PaintbrushIcon />
-          </NavStackItem>
-          <NavStackItem v-if="isStaging" link="/settings/language" label="Language">
-            <LanguagesIcon />
-          </NavStackItem>
-          <template v-if="auth.user">
-            <h3>User settings</h3>
-            <NavStackItem link="/settings/account" label="Account">
-              <UserIcon />
-            </NavStackItem>
-            <NavStackItem link="/settings/authorizations" label="Authorizations">
-              <UsersIcon />
-            </NavStackItem>
-            <NavStackItem link="/settings/sessions" :label="formatMessage(messages.sessionsTitle)">
-              <ShieldIcon />
-            </NavStackItem>
-          </template>
-          <template v-if="auth.user">
-            <h3>Developer Settings</h3>
-            <NavStackItem link="/settings/pats" :label="formatMessage(messages.patsTitle)">
-              <KeyIcon />
-            </NavStackItem>
-            <NavStackItem link="/settings/applications" label="Applications">
-              <ServerIcon />
-            </NavStackItem>
-          </template>
-        </NavStack>
-      </aside>
+  <div>
+    <div class="normal-page no-sidebar">
+      <h1>{{ formatMessage(commonMessages.settingsLabel) }}</h1>
     </div>
-    <div class="normal-page__content">
-      <NuxtPage :route="route" />
+    <div class="normal-page">
+      <div class="normal-page__sidebar">
+        <aside class="universal-card">
+          <NavStack>
+            <h3>Display</h3>
+            <NavStackItem link="/settings" :label="formatMessage(messages.appearanceTitle)">
+              <PaintBrushIcon />
+            </NavStackItem>
+            <NavStackItem
+              v-if="isStaging"
+              link="/settings/language"
+              :label="formatMessage(messages.languageTitle)"
+            >
+              <LanguagesIcon />
+            </NavStackItem>
+            <template v-if="auth.user">
+              <h3>Account</h3>
+              <NavStackItem link="/settings/profile" :label="formatMessage(messages.profileTitle)">
+                <UserIcon />
+              </NavStackItem>
+              <NavStackItem link="/settings/account" :label="formatMessage(messages.accountTitle)">
+                <ShieldIcon />
+              </NavStackItem>
+              <NavStackItem
+                link="/settings/authorizations"
+                :label="formatMessage(messages.authorizedAppsTitle)"
+              >
+                <GridIcon />
+              </NavStackItem>
+              <NavStackItem
+                link="/settings/sessions"
+                :label="formatMessage(messages.sessionsTitle)"
+              >
+                <MonitorSmartphoneIcon />
+              </NavStackItem>
+            </template>
+            <template v-if="auth.user">
+              <h3>Developer</h3>
+              <NavStackItem link="/settings/pats" :label="formatMessage(messages.patsTitle)">
+                <KeyIcon />
+              </NavStackItem>
+              <NavStackItem
+                link="/settings/applications"
+                :label="formatMessage(messages.applicationsTitle)"
+              >
+                <ServerIcon />
+              </NavStackItem>
+            </template>
+          </NavStack>
+        </aside>
+      </div>
+      <div class="normal-page__content">
+        <NuxtPage :route="route" />
+      </div>
     </div>
   </div>
 </template>
 <script setup>
-import { UsersIcon, ServerIcon } from 'omorphia'
+import {
+  UsersIcon,
+  ServerIcon,
+  GridIcon,
+  PaintBrushIcon,
+  UserIcon,
+  ShieldIcon,
+  KeyIcon,
+  LanguagesIcon,
+} from 'omorphia'
 import NavStack from '~/components/ui/NavStack.vue'
 import NavStackItem from '~/components/ui/NavStackItem.vue'
+import MonitorSmartphoneIcon from '~/assets/images/utils/monitor-smartphone.svg'
 
-import PaintbrushIcon from '~/assets/images/utils/paintbrush.svg'
-import UserIcon from '~/assets/images/utils/user.svg'
-import ShieldIcon from '~/assets/images/utils/shield.svg'
-import KeyIcon from '~/assets/images/utils/key.svg'
-import LanguagesIcon from '~/assets/images/utils/languages.svg'
+import { commonMessages } from '~/utils/common-messages.ts'
 
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
+  appearanceTitle: {
+    id: 'settings.appearance.title',
+    defaultMessage: 'Appearance',
+  },
+  languageTitle: {
+    id: 'settings.language.title',
+    defaultMessage: 'Language',
+  },
+  profileTitle: {
+    id: 'settings.profile.title',
+    defaultMessage: 'Public profile',
+  },
+  accountTitle: {
+    id: 'settings.account.title',
+    defaultMessage: 'Account and security',
+  },
+  authorizedAppsTitle: {
+    id: 'settings.authorized-apps.title',
+    defaultMessage: 'Authorized apps',
+  },
   sessionsTitle: {
     id: 'settings.sessions.title',
     defaultMessage: 'Sessions',
   },
   patsTitle: {
     id: 'settings.pats.title',
-    defaultMessage: 'PATs',
+    defaultMessage: 'Personal access tokens',
+  },
+  applicationsTitle: {
+    id: 'settings.applications.title',
+    defaultMessage: 'Your applications',
   },
 })
 
diff --git a/pages/settings/account.vue b/pages/settings/account.vue
index c947c8ece..d16418eb4 100644
--- a/pages/settings/account.vue
+++ b/pages/settings/account.vue
@@ -290,14 +290,6 @@
         </div>
       </div>
     </Modal>
-    <section class="universal-card">
-      <h2>User profile</h2>
-      <p>Visit your user profile to edit your profile information.</p>
-      <NuxtLink class="iconified-button" :to="`/user/${auth.user.username}`">
-        <UserIcon /> Visit your profile
-      </NuxtLink>
-    </section>
-
     <section class="universal-card">
       <h2>Account security</h2>
 
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 77d31f448..dd72a109e 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -1,96 +1,152 @@
 <template>
   <div>
+    <MessageBanner v-if="cosmetics.developerMode" message-type="warning" class="developer-message">
+      <CodeIcon />
+      <IntlFormatted :message-id="developerModeBanner.description">
+        <template #strong="{ children }">
+          <strong>
+            <component :is="() => normalizeChildren(children)" />
+          </strong>
+        </template>
+      </IntlFormatted>
+      <Button :action="() => disableDeveloperMode()">
+        {{ formatMessage(developerModeBanner.deactivate) }}
+      </Button>
+    </MessageBanner>
     <section class="universal-card">
-      <h2>Themes</h2>
-      <div class="adjacent-input">
-        <label for="theme-selector">
-          <span class="label__title">Color theme</span>
-          <span class="label__description">Change the global site color theme.</span>
-        </label>
-        <div>
-          <Multiselect
-            id="theme-selector"
-            v-model="$colorMode.preference"
-            :options="['system', 'light', 'dark', 'oled']"
-            :custom-label="
-              (value) =>
-                value === 'oled' ? 'OLED' : value.charAt(0).toUpperCase() + value.slice(1)
-            "
-            :searchable="false"
-            :close-on-select="true"
-            :show-labels="false"
-            :allow-empty="false"
-            @update:model-value="(value) => updateTheme(value, true)"
-          />
+      <h2>{{ formatMessage(colorTheme.title) }}</h2>
+      <p>{{ formatMessage(colorTheme.description) }}</p>
+      <div class="theme-options">
+        <button
+          v-for="option in themeOptions"
+          :key="option"
+          class="preview-radio button-base"
+          :class="{ selected: theme.preference === option }"
+          @click="() => updateColorTheme(option)"
+        >
+          <div class="preview" :class="`${option === 'system' ? systemTheme : option}-mode`">
+            <div class="example-card card card">
+              <div class="example-icon"></div>
+              <div class="example-text-1"></div>
+              <div class="example-text-2"></div>
+            </div>
+          </div>
+          <div class="label">
+            <RadioButtonChecked v-if="theme.preference === option" class="radio" />
+            <RadioButtonIcon v-else class="radio" />
+            {{ colorTheme[option] ? formatMessage(colorTheme[option]) : option }}
+            <SunIcon
+              v-if="'light' === option"
+              v-tooltip="formatMessage(colorTheme.preferredLight)"
+              class="theme-icon"
+            />
+            <MoonIcon
+              v-else-if="cosmetics.preferredDarkTheme === option"
+              v-tooltip="formatMessage(colorTheme.preferredDark)"
+              class="theme-icon"
+            />
+          </div>
+        </button>
+      </div>
+    </section>
+    <section class="universal-card">
+      <h2>{{ formatMessage(projectListLayouts.title) }}</h2>
+      <p>{{ formatMessage(projectListLayouts.description) }}</p>
+      <div class="project-lists">
+        <div v-for="projectType in listTypes" :key="projectType.id + '-project-list-layouts'">
+          <div class="label">
+            <div class="label__title">
+              {{
+                projectListLayouts[projectType.id]
+                  ? formatMessage(projectListLayouts[projectType.id])
+                  : projectType.id
+              }}
+            </div>
+          </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>
       </div>
-
-      <div class="adjacent-input small">
-        <label for="search-layout-toggle">
-          <span class="label__title">Search sidebar on the right</span>
-          <span class="label__description"
-            >Enabling this will put the search page's filters sidebar on the right side.</span
-          >
-        </label>
-        <input
-          id="search-layout-toggle"
-          v-model="cosmetics.searchLayout"
-          class="switch stylized-toggle"
-          type="checkbox"
-          @change="saveCosmetics"
-        />
-      </div>
-      <div class="adjacent-input small">
-        <label for="project-layout-toggle">
-          <span class="label__title">Project sidebar on the right</span>
-          <span class="label__description"
-            >Enabling this will put the project pages' info sidebars on the right side.</span
-          >
-        </label>
-        <input
-          id="project-layout-toggle"
-          v-model="cosmetics.projectLayout"
-          class="switch stylized-toggle"
-          type="checkbox"
-          @change="saveCosmetics"
-        />
-      </div>
     </section>
     <section class="universal-card">
-      <h2>Project list display mode</h2>
-      <div
-        v-for="projectType in listTypes"
-        :key="projectType.id + '-display-mode-selector'"
-        class="adjacent-input"
-      >
-        <label :for="projectType.id + '-search-display-mode'">
-          <span class="label__title">{{ projectType.name }} display mode</span>
-          <span class="label__description"
-            >Change the display view for {{ projectType.display }}.</span
-          >
-        </label>
-        <Multiselect
-          :id="projectType + '-search-display-mode'"
-          v-model="cosmetics.searchDisplayMode[projectType.id]"
-          :options="tags.projectViewModes"
-          :custom-label="$capitalizeString"
-          :searchable="false"
-          :close-on-select="true"
-          :show-labels="false"
-          :allow-empty="false"
-          @update:model-value="saveCosmetics"
-        />
-      </div>
-    </section>
-    <section class="universal-card">
-      <h2>Feature flags</h2>
+      <h2>{{ formatMessage(featureFlags.title) }}</h2>
+      <p>{{ formatMessage(featureFlags.description) }}</p>
       <div class="adjacent-input small">
         <label for="advanced-rendering">
-          <span class="label__title">Advanced rendering</span>
-          <span class="label__description"
-            >Enables advanced rendering such as blur effects that may cause performance issues
-            without hardware-accelerated rendering.</span
-          >
+          <span class="label__title">
+            {{ formatMessage(featureFlags.advancedRenderingTitle) }}
+          </span>
+          <span class="label__description">
+            {{ formatMessage(featureFlags.advancedRenderingDescription) }}
+          </span>
         </label>
         <input
           id="advanced-rendering"
@@ -102,11 +158,11 @@
       </div>
       <div class="adjacent-input small">
         <label for="external-links-new-tab">
-          <span class="label__title">Open external links in new tab</span>
+          <span class="label__title">
+            {{ formatMessage(featureFlags.externalLinksNewTabTitle) }}
+          </span>
           <span class="label__description">
-            Make links which go outside of Modrinth open in a new tab. No matter this setting, links
-            on the same domain and in Markdown descriptions will open in the same tab, and links on
-            ads and edit pages will open in a new tab.
+            {{ formatMessage(featureFlags.externalLinksNewTabDescription) }}
           </span>
         </label>
         <input
@@ -119,10 +175,11 @@
       </div>
       <div class="adjacent-input small">
         <label for="modrinth-app-promos">
-          <span class="label__title">Hide Modrinth App promotions</span>
+          <span class="label__title">
+            {{ formatMessage(featureFlags.hideModrinthAppPromosTitle) }}
+          </span>
           <span class="label__description">
-            Hides the "Get Modrinth App" buttons from primary navigation. The Modrinth App page can
-            still be found on the landing page or in the footer.
+            {{ formatMessage(featureFlags.hideModrinthAppPromosDescription) }}
           </span>
         </label>
         <input
@@ -133,34 +190,447 @@
           @change="saveCosmetics"
         />
       </div>
+      <div class="adjacent-input small">
+        <label for="search-layout-toggle">
+          <span class="label__title">
+            {{ formatMessage(featureFlags.rightAlignedSearchSidebarTitle) }}
+          </span>
+          <span class="label__description">
+            {{ formatMessage(featureFlags.rightAlignedSearchSidebarDescription) }}
+          </span>
+        </label>
+        <input
+          id="search-layout-toggle"
+          v-model="cosmetics.searchLayout"
+          class="switch stylized-toggle"
+          type="checkbox"
+          @change="saveCosmetics"
+        />
+      </div>
+      <div class="adjacent-input small">
+        <label for="project-layout-toggle">
+          <span class="label__title">
+            {{ formatMessage(featureFlags.rightAlignedProjectSidebarTitle) }}
+          </span>
+          <span class="label__description">
+            {{ formatMessage(featureFlags.rightAlignedProjectSidebarDescription) }}
+          </span>
+        </label>
+        <input
+          id="project-layout-toggle"
+          v-model="cosmetics.projectLayout"
+          class="switch stylized-toggle"
+          type="checkbox"
+          @change="saveCosmetics"
+        />
+      </div>
     </section>
   </div>
 </template>
 
 <script setup>
-import { Multiselect } from 'vue-multiselect'
+import { CodeIcon, Button, RadioButtonIcon, RadioButtonChecked, SunIcon, MoonIcon } from 'omorphia'
 import { formatProjectType } from '~/plugins/shorthands.js'
+import MessageBanner from '~/components/ui/MessageBanner.vue'
+import { DARK_THEMES } from '~/composables/theme.js'
 
 useHead({
   title: 'Display settings - Modrinth',
 })
 
+const { formatMessage } = useVIntl()
+
+const developerModeBanner = defineMessages({
+  description: {
+    id: 'settings.display.banner.developer-mode.description',
+    defaultMessage:
+      "<strong>Developer mode</strong> is active. This will allow you to view the internal IDs of various things throughout Modrinth that may be helpful if you're a developer using the Modrinth API. Click on the Modrinth logo at the bottom of the page 5 times to toggle developer mode.",
+  },
+  deactivate: {
+    id: 'settings.display.banner.developer-mode.button',
+    defaultMessage: 'Deactivate developer mode',
+  },
+})
+
+const colorTheme = defineMessages({
+  title: {
+    id: 'settings.display.theme.title',
+    defaultMessage: 'Color theme',
+  },
+  description: {
+    id: 'settings.display.theme.description',
+    defaultMessage: 'Select your preferred color theme for Modrinth on this device.',
+  },
+  system: {
+    id: 'settings.display.theme.system',
+    defaultMessage: 'Sync with system',
+  },
+  light: {
+    id: 'settings.display.theme.light',
+    defaultMessage: 'Light',
+  },
+  dark: {
+    id: 'settings.display.theme.dark',
+    defaultMessage: 'Dark',
+  },
+  oled: {
+    id: 'settings.display.theme.oled',
+    defaultMessage: 'OLED',
+  },
+  retro: {
+    id: 'settings.display.theme.retro',
+    defaultMessage: 'Retro',
+  },
+  preferredLight: {
+    id: 'settings.display.theme.preferred-light-theme',
+    defaultMessage: 'Preferred light theme',
+  },
+  preferredDark: {
+    id: 'settings.display.theme.preferred-dark-theme',
+    defaultMessage: 'Preferred dark theme',
+  },
+})
+
+const projectListLayouts = defineMessages({
+  title: {
+    id: 'settings.display.project-list-layouts.title',
+    defaultMessage: 'Project list layouts',
+  },
+  description: {
+    id: 'settings.display.project-list-layouts.description',
+    defaultMessage:
+      'Select your preferred layout for each page that displays project lists on this device.',
+  },
+  mod: {
+    id: 'settings.display.project-list-layouts.mod',
+    defaultMessage: 'Mods page',
+  },
+  plugin: {
+    id: 'settings.display.project-list-layouts.plugin',
+    defaultMessage: 'Plugins page',
+  },
+  datapack: {
+    id: 'settings.display.project-list-layouts.datapack',
+    defaultMessage: 'Data Packs page',
+  },
+  shader: {
+    id: 'settings.display.project-list-layouts.shader',
+    defaultMessage: 'Shaders page',
+  },
+  resourcepack: {
+    id: 'settings.display.project-list-layouts.resourcepack',
+    defaultMessage: 'Resource Packs page',
+  },
+  modpack: {
+    id: 'settings.display.project-list-layouts.modpack',
+    defaultMessage: 'Modpacks page',
+  },
+  user: {
+    id: 'settings.display.project-list-layouts.user',
+    defaultMessage: 'User profile pages',
+  },
+})
+
+const featureFlags = defineMessages({
+  title: {
+    id: 'settings.display.flags.title',
+    defaultMessage: 'Feature flags',
+  },
+  description: {
+    id: 'settings.display.flags.description',
+    defaultMessage: 'Enable or disable certain features on this device.',
+  },
+  advancedRenderingTitle: {
+    id: 'settings.display.sidebar.advanced-rendering.title',
+    defaultMessage: 'Advanced rendering',
+  },
+  advancedRenderingDescription: {
+    id: 'settings.display.sidebar.advanced-rendering.description',
+    defaultMessage:
+      'Enables advanced rendering such as blur effects that may cause performance issues without hardware-accelerated rendering.',
+  },
+  externalLinksNewTabTitle: {
+    id: 'settings.display.sidebar.external-links-new-tab.title',
+    defaultMessage: 'Open external links in new tab',
+  },
+  externalLinksNewTabDescription: {
+    id: 'settings.display.sidebar.external-links-new-tab.description',
+    defaultMessage:
+      'Make links which go outside of Modrinth open in a new tab. No matter this setting, links on the same domain and in Markdown descriptions will open in the same tab, and links on ads and edit pages will open in a new tab.',
+  },
+  hideModrinthAppPromosTitle: {
+    id: 'settings.display.sidebar.hide-app-promos.title',
+    defaultMessage: 'Hide Modrinth App promotions',
+  },
+  hideModrinthAppPromosDescription: {
+    id: 'settings.display.sidebar.hide-app-promos.description',
+    defaultMessage:
+      'Hides the "Get Modrinth App" buttons from primary navigation. The Modrinth App page can still be found on the landing page or in the footer.',
+  },
+  rightAlignedSearchSidebarTitle: {
+    id: 'settings.display.sidebar.right-aligned-search-sidebar.title',
+    defaultMessage: 'Right-aligned search sidebar',
+  },
+  rightAlignedSearchSidebarDescription: {
+    id: 'settings.display.sidebar.right-aligned-search-sidebar.description',
+    defaultMessage: 'Aligns the search filters sidebar to the right of the search results.',
+  },
+  rightAlignedProjectSidebarTitle: {
+    id: 'settings.display.sidebar.right-aligned-project-sidebar.title',
+    defaultMessage: 'Right-aligned project sidebar',
+  },
+  rightAlignedProjectSidebarDescription: {
+    id: 'settings.display.sidebar.right-aligned-project-sidebar.description',
+    defaultMessage: "Aligns the project details sidebar to the right of the page's content.",
+  },
+})
+
 const cosmetics = useCosmetics()
 const tags = useTags()
 
+const systemTheme = ref('light')
+
+const theme = useTheme()
+
+const themeOptions = computed(() => {
+  const options = ['system', 'light', 'dark', 'oled']
+  if (cosmetics.value.developerMode || theme.value.preference === 'retro') {
+    options.push('retro')
+  }
+  return options
+})
+
+onMounted(() => {
+  updateSystemTheme()
+})
+
+function updateSystemTheme() {
+  const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
+  if (colorSchemeQueryList.matches) {
+    systemTheme.value = 'light'
+  } else {
+    systemTheme.value = cosmetics.value.preferredDarkTheme
+  }
+}
+
+function updateColorTheme(value) {
+  if (DARK_THEMES.includes(value)) {
+    cosmetics.value.preferredDarkTheme = value
+    saveCosmetics()
+    updateSystemTheme()
+  }
+  updateTheme(value, true)
+}
+
+function disableDeveloperMode() {
+  cosmetics.value.developerMode = !cosmetics.value.developerMode
+  saveCosmetics()
+  addNotification({
+    group: 'main',
+    title: 'Developer mode deactivated',
+    text: 'Developer mode has been disabled',
+    type: 'success',
+  })
+}
+
 const listTypes = computed(() => {
   const types = tags.value.projectTypes.map((type) => {
     return {
       id: type.id,
-      name: formatProjectType(type.id) + ' search',
+      name: formatProjectType(type.id) + 's',
       display: 'the ' + formatProjectType(type.id).toLowerCase() + 's search page',
     }
   })
   types.push({
     id: 'user',
-    name: 'User page',
+    name: 'User profiles',
     display: 'user pages',
   })
   return types
 })
 </script>
+<style scoped lang="scss">
+.preview-radio {
+  width: 100%;
+  border-radius: var(--radius-md);
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-divider);
+  background-color: var(--color-button-bg);
+  color: var(--color-base);
+  display: flex;
+  flex-direction: column;
+  outline: 2px solid transparent;
+
+  &.selected {
+    color: var(--color-contrast);
+
+    .label {
+      .radio {
+        color: var(--color-brand);
+      }
+
+      .theme-icon {
+        color: var(--color-text);
+      }
+    }
+  }
+
+  .preview {
+    background-color: var(--color-bg);
+    padding: 1.5rem;
+    outline: 2px solid transparent;
+
+    .example-card {
+      margin: 0;
+      padding: 1rem;
+      outline: 2px solid transparent;
+      min-height: 0;
+    }
+  }
+
+  .label {
+    display: flex;
+    align-items: center;
+    text-align: left;
+    flex-grow: 1;
+    padding: var(--gap-md) var(--gap-lg);
+
+    .radio {
+      margin-right: 0.5rem;
+    }
+
+    .theme-icon {
+      color: var(--color-secondary);
+      margin-left: 0.25rem;
+    }
+  }
+}
+.theme-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
+  gap: var(--gap-lg);
+
+  .preview .example-card {
+    margin: 0;
+    padding: 1rem;
+    display: grid;
+    grid-template: 'icon text1' 'icon text2';
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+    outline: 2px solid transparent;
+
+    .example-icon {
+      grid-area: icon;
+      width: 2rem;
+      height: 2rem;
+      background-color: var(--color-button-bg);
+      border-radius: var(--radius-sm);
+      outline: 2px solid transparent;
+    }
+
+    .example-text-1,
+    .example-text-2 {
+      height: 0.5rem;
+      border-radius: var(--radius-sm);
+      outline: 2px solid transparent;
+    }
+
+    .example-text-1 {
+      grid-area: text1;
+      width: 100%;
+      background-color: var(--color-base);
+    }
+
+    .example-text-2 {
+      grid-area: text2;
+      width: 60%;
+      background-color: var(--color-secondary);
+    }
+  }
+}
+
+.project-lists {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+
+  > :first-child .label__title {
+    margin-top: 0;
+  }
+
+  .preview {
+    --_layout-width: 7rem;
+    --_layout-height: 4.5rem;
+    --_layout-gap: 0.25rem;
+
+    .example-card {
+      border-radius: 0.5rem;
+      width: var(--_layout-width);
+      height: calc((var(--_layout-height) - 3 * var(--_layout-gap)) / 4);
+      padding: 0;
+    }
+
+    .layout-list-mode {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--_layout-gap);
+    }
+
+    .layout-grid-mode {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: var(--_layout-gap);
+
+      .example-card {
+        width: calc((var(--_layout-width) - 2 * var(--_layout-gap)) / 3);
+        height: calc((var(--_layout-height) - var(--_layout-gap)) / 2);
+      }
+    }
+
+    .layout-gallery-mode {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--_layout-gap);
+
+      .example-card {
+        width: calc((var(--_layout-width) - var(--_layout-gap)) / 2);
+        height: calc((var(--_layout-height) - var(--_layout-gap)) / 2);
+      }
+    }
+  }
+}
+
+.project-list-layouts {
+  display: flex;
+  gap: var(--gap-lg);
+  width: fit-content;
+
+  .preview-radio .example-card {
+    border: 2px solid transparent;
+  }
+
+  .preview-radio.selected .example-card {
+    border-color: var(--color-brand);
+    background-color: var(--color-brand-highlight);
+  }
+
+  .preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.developer-message {
+  svg {
+    vertical-align: middle;
+    margin-bottom: 2px;
+    margin-right: 0.5rem;
+  }
+
+  .btn {
+    margin-top: var(--gap-sm);
+  }
+}
+</style>
diff --git a/pages/settings/pats.vue b/pages/settings/pats.vue
index b24f52a32..6413470ff 100644
--- a/pages/settings/pats.vue
+++ b/pages/settings/pats.vue
@@ -74,7 +74,7 @@
 
     <div class="header__row">
       <div class="header__title">
-        <h2>{{ formatMessage(messages.longTitle) }}</h2>
+        <h2>{{ formatMessage(messages.title) }}</h2>
       </div>
       <button
         class="btn btn-primary"
@@ -264,11 +264,7 @@ const deleteModalMessages = defineMessages({
 const messages = defineMessages({
   title: {
     id: 'settings.pats.title',
-    defaultMessage: 'PATs',
-  },
-  longTitle: {
-    id: 'settings.pats.title.long',
-    defaultMessage: 'Personal Access Tokens',
+    defaultMessage: 'Personal access tokens',
   },
   description: {
     id: 'settings.pats.description',
diff --git a/pages/settings/profile.vue b/pages/settings/profile.vue
new file mode 100644
index 000000000..296e5b069
--- /dev/null
+++ b/pages/settings/profile.vue
@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <section class="card">
+      <h2>{{ formatMessage(messages.title) }}</h2>
+      <p>
+        <IntlFormatted :message-id="messages.description">
+          <template #docs-link="{ children }">
+            <a href="https://docs.modrinth.com/" target="_blank" class="text-link">
+              <component :is="() => children" />
+            </a>
+          </template>
+        </IntlFormatted>
+      </p>
+      <label>
+        <span class="label__title">{{ formatMessage(messages.profilePicture) }}</span>
+      </label>
+      <div class="avatar-changer">
+        <Avatar
+          :src="previewImage ? previewImage : avatarUrl"
+          size="md"
+          circle
+          :alt="auth.user.username"
+        />
+        <div class="input-stack">
+          <FileInput
+            :max-size="262144"
+            :show-icon="true"
+            class="btn"
+            :prompt="formatMessage(commonMessages.uploadImageButton)"
+            accept="image/png,image/jpeg,image/gif,image/webp"
+            @change="showPreviewImage"
+          >
+            <UploadIcon />
+          </FileInput>
+          <Button
+            v-if="previewImage"
+            :action="
+              () => {
+                icon = null
+                previewImage = null
+              }
+            "
+          >
+            <UndoIcon />
+            {{ formatMessage(messages.profilePictureReset) }}
+          </Button>
+        </div>
+      </div>
+      <label for="username-field">
+        <span class="label__title">{{ formatMessage(messages.usernameTitle) }}</span>
+        <span class="label__description">
+          {{ formatMessage(messages.usernameDescription) }}
+        </span>
+      </label>
+      <input id="username-field" v-model="username" type="text" />
+      <label for="bio-field">
+        <span class="label__title">{{ formatMessage(messages.bioTitle) }}</span>
+        <span class="label__description">
+          {{ formatMessage(messages.bioDescription) }}
+        </span>
+      </label>
+      <textarea id="bio-field" v-model="bio" type="text" />
+      <div v-if="hasUnsavedChanges" class="input-group">
+        <Button color="primary" :action="() => saveChanges()">
+          <SaveIcon /> {{ formatMessage(commonMessages.saveChangesButton) }}
+        </Button>
+        <Button :action="() => cancel()">
+          <XIcon /> {{ formatMessage(commonMessages.cancelButton) }}
+        </Button>
+      </div>
+      <div v-else class="input-group">
+        <Button disabled color="primary" :action="() => saveChanges()">
+          <SaveIcon />
+          {{
+            saved
+              ? formatMessage(commonMessages.changesSavedLabel)
+              : formatMessage(commonMessages.saveChangesButton)
+          }}
+        </Button>
+        <Button :link="`/user/${auth.user.username}`">
+          <UserIcon /> {{ formatMessage(messages.visitProfile) }}
+        </Button>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import {
+  Button,
+  UserIcon,
+  SaveIcon,
+  Avatar,
+  FileInput,
+  UploadIcon,
+  UndoIcon,
+  XIcon,
+} from 'omorphia'
+import { commonMessages } from '~/utils/common-messages'
+
+useHead({
+  title: 'Account settings - Modrinth',
+})
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  title: {
+    id: 'settings.profile.profile-info',
+    defaultMessage: 'Profile information',
+  },
+  description: {
+    id: 'settings.profile.description',
+    defaultMessage:
+      'Your profile information is publicly viewable on Modrinth and through the <docs-link>Modrinth API</docs-link>.',
+  },
+  profilePicture: {
+    id: 'settings.profile.profile-picture.title',
+    defaultMessage: 'Profile picture',
+  },
+  profilePictureReset: {
+    id: 'settings.profile.profile-picture.reset',
+    defaultMessage: 'Reset',
+  },
+  usernameTitle: {
+    id: 'settings.profile.username.title',
+    defaultMessage: 'Username',
+  },
+  usernameDescription: {
+    id: 'settings.profile.username.description',
+    defaultMessage: 'A unique case-insensitive name to identify your profile.',
+  },
+  bioTitle: {
+    id: 'settings.profile.bio.title',
+    defaultMessage: 'Bio',
+  },
+  bioDescription: {
+    id: 'settings.profile.bio.description',
+    defaultMessage: 'A short description to tell everyone a little bit about you.',
+  },
+  visitProfile: {
+    id: 'settings.profile.visit-profile',
+    defaultMessage: 'Visit your profile',
+  },
+})
+
+const auth = await useAuth()
+
+const username = ref(auth.value.user.username)
+const bio = ref(auth.value.user.bio)
+const avatarUrl = ref(auth.value.user.avatar_url)
+const icon = shallowRef(null)
+const previewImage = shallowRef(null)
+const saved = ref(false)
+
+const hasUnsavedChanges = computed(
+  () =>
+    username.value !== auth.value.user.username ||
+    bio.value !== auth.value.user.bio ||
+    previewImage.value
+)
+
+function showPreviewImage(files) {
+  const reader = new FileReader()
+  icon.value = files[0]
+  reader.readAsDataURL(icon.value)
+  reader.onload = (event) => {
+    previewImage.value = event.target.result
+  }
+}
+
+function cancel() {
+  icon.value = null
+  previewImage.value = null
+  username.value = auth.value.user.username
+  bio.value = auth.value.user.bio
+}
+
+async function saveChanges() {
+  startLoading()
+  try {
+    if (icon.value) {
+      await useBaseFetch(
+        `user/${auth.value.user.id}/icon?ext=${
+          icon.value.type.split('/')[icon.value.type.split('/').length - 1]
+        }`,
+        {
+          method: 'PATCH',
+          body: icon.value,
+        }
+      )
+      icon.value = null
+      previewImage.value = null
+    }
+
+    const body = {}
+
+    if (auth.value.user.username !== username.value) {
+      body.username = username.value
+    }
+
+    if (auth.value.user.bio !== bio.value) {
+      body.bio = bio.value
+    }
+
+    await useBaseFetch(`user/${auth.value.user.id}`, {
+      method: 'PATCH',
+      body,
+    })
+    await useAuth(auth.value.token)
+    avatarUrl.value = auth.value.user.avatar_url
+    saved.value = true
+  } catch (err) {
+    addNotification({
+      group: 'main',
+      title: 'An error occurred',
+      text: err
+        ? err.data
+          ? err.data.description
+            ? err.data.description
+            : err.data
+          : err
+        : 'aaaaahhh',
+      type: 'error',
+    })
+  }
+  stopLoading()
+}
+</script>
+<style lang="scss" scoped>
+.avatar-changer {
+  display: flex;
+  gap: var(--gap-lg);
+  margin-top: var(--gap-md);
+}
+
+textarea {
+  height: 6rem;
+  width: 40rem;
+  margin-bottom: var(--gap-lg);
+}
+</style>
diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index 29645e7c4..4f5437c67 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -4,12 +4,7 @@
     <CollectionCreateModal ref="modal_collection_creation" />
     <div class="user-header-wrapper">
       <div class="user-header">
-        <Avatar
-          :src="previewImage ? previewImage : user.avatar_url"
-          size="md"
-          circle
-          :alt="user.username"
-        />
+        <Avatar :src="user.avatar_url" size="md" circle :alt="user.username" />
         <h1 class="username">
           {{ user.username }}
         </h1>
@@ -22,25 +17,14 @@
             {{ user.username }}
           </h1>
           <div class="card__overlay">
-            <FileInput
-              v-if="isEditing"
-              :max-size="262144"
-              :show-icon="true"
-              :prompt="formatMessage(messages.profileUploadAvatarInput)"
-              accept="image/png,image/jpeg,image/gif,image/webp"
-              class="choose-image iconified-button"
-              @change="showPreviewImage"
-            >
-              <UploadIcon />
-            </FileInput>
-            <button
-              v-else-if="auth.user && auth.user.id === user.id"
+            <NuxtLink
+              v-if="auth.user && auth.user.id === user.id"
+              to="/settings/profile"
               class="iconified-button"
-              @click="isEditing = true"
             >
               <EditIcon />
               {{ formatMessage(commonMessages.editButton) }}
-            </button>
+            </NuxtLink>
             <button
               v-else-if="auth.user"
               class="iconified-button"
@@ -54,123 +38,85 @@
               {{ formatMessage(messages.profileReportButton) }}
             </nuxt-link>
           </div>
-          <template v-if="isEditing">
-            <div class="inputs universal-labels">
-              <label for="user-username">
-                <span class="label__title">
-                  {{ formatMessage(messages.profileEditUsernameLabel) }}
-                </span>
-              </label>
-              <input id="user-username" v-model="user.username" maxlength="39" type="text" />
-              <label for="user-bio">
-                <span class="label__title">
-                  {{ formatMessage(messages.profileEditBioLabel) }}
-                </span>
-              </label>
-              <div class="textarea-wrapper">
-                <textarea id="user-bio" v-model="user.bio" maxlength="160" />
-              </div>
-            </div>
-            <div class="button-group">
-              <button
-                class="iconified-button"
-                @click="
-                  () => {
-                    isEditing = false
-                    user = JSON.parse(JSON.stringify(auth.user))
-                    previewImage = null
-                    icon = null
-                  }
-                "
+          <div class="sidebar__item">
+            <Badge v-if="tags.staffRoles.includes(user.role)" :type="user.role" />
+            <Badge v-else-if="projects.length > 0" type="creator" />
+          </div>
+          <span v-if="user.bio" class="sidebar__item bio">{{ user.bio }}</span>
+          <hr class="card-divider" />
+          <div class="primary-stat">
+            <DownloadIcon class="primary-stat__icon" aria-hidden="true" />
+            <div class="primary-stat__text">
+              <IntlFormatted
+                :message-id="messages.profileDownloadsStats"
+                :values="{ count: formatCompactNumber(sumDownloads) }"
               >
-                <CrossIcon /> {{ formatMessage(commonMessages.cancelButton) }}
-              </button>
-              <button class="iconified-button brand-button" @click="saveChanges">
-                <SaveIcon /> {{ formatMessage(commonMessages.saveButton) }}
-              </button>
+                <template #stat="{ children }">
+                  <span class="primary-stat__counter">
+                    <component :is="() => normalizeChildren(children)" />
+                  </span>
+                </template>
+              </IntlFormatted>
             </div>
-          </template>
-          <template v-else>
-            <div class="sidebar__item">
-              <Badge v-if="tags.staffRoles.includes(user.role)" :type="user.role" />
-              <Badge v-else-if="projects.length > 0" type="creator" />
-            </div>
-            <span v-if="user.bio" class="sidebar__item bio">{{ user.bio }}</span>
-            <hr class="card-divider" />
-            <div class="primary-stat">
-              <DownloadIcon class="primary-stat__icon" aria-hidden="true" />
-              <div class="primary-stat__text">
-                <IntlFormatted
-                  :message-id="messages.profileDownloadsStats"
-                  :values="{ count: formatCompactNumber(sumDownloads) }"
-                >
-                  <template #stat="{ children }">
-                    <span class="primary-stat__counter">
-                      <component :is="() => normalizeChildren(children)" />
-                    </span>
-                  </template>
-                </IntlFormatted>
-              </div>
-            </div>
-            <div class="primary-stat">
-              <HeartIcon class="primary-stat__icon" aria-hidden="true" />
-              <div class="primary-stat__text">
-                <IntlFormatted
-                  :message-id="messages.profileProjectsFollowersStats"
-                  :values="{ count: formatCompactNumber(sumFollows) }"
-                >
-                  <template #stat="{ children }">
-                    <span class="primary-stat__counter">
-                      <component :is="() => normalizeChildren(children)" />
-                    </span>
-                  </template>
-                </IntlFormatted>
-              </div>
-            </div>
-            <div class="stats-block__item secondary-stat">
-              <SunriseIcon class="secondary-stat__icon" aria-hidden="true" />
-              <span
-                v-tooltip="
-                  formatMessage(commonMessages.dateAtTimeTooltip, {
-                    date: new Date(user.created),
-                    time: new Date(user.created),
-                  })
-                "
-                class="secondary-stat__text date"
+          </div>
+          <div class="primary-stat">
+            <HeartIcon class="primary-stat__icon" aria-hidden="true" />
+            <div class="primary-stat__text">
+              <IntlFormatted
+                :message-id="messages.profileProjectsFollowersStats"
+                :values="{ count: formatCompactNumber(sumFollows) }"
               >
-                {{
-                  formatMessage(messages.profileJoinedAt, { ago: formatRelativeTime(user.created) })
-                }}
-              </span>
+                <template #stat="{ children }">
+                  <span class="primary-stat__counter">
+                    <component :is="() => normalizeChildren(children)" />
+                  </span>
+                </template>
+              </IntlFormatted>
             </div>
+          </div>
+          <div class="stats-block__item secondary-stat">
+            <SunriseIcon class="secondary-stat__icon" aria-hidden="true" />
+            <span
+              v-tooltip="
+                formatMessage(commonMessages.dateAtTimeTooltip, {
+                  date: new Date(user.created),
+                  time: new Date(user.created),
+                })
+              "
+              class="secondary-stat__text date"
+            >
+              {{
+                formatMessage(messages.profileJoinedAt, { ago: formatRelativeTime(user.created) })
+              }}
+            </span>
+          </div>
+          <hr class="card-divider" />
+          <div class="stats-block__item secondary-stat">
+            <UserIcon class="secondary-stat__icon" aria-hidden="true" />
+            <span class="secondary-stat__text">
+              <IntlFormatted :message-id="messages.profileUserId">
+                <template #~id>
+                  <CopyCode :text="user.id" />
+                </template>
+              </IntlFormatted>
+            </span>
+          </div>
+          <template v-if="organizations.length > 0">
             <hr class="card-divider" />
-            <div class="stats-block__item secondary-stat">
-              <UserIcon class="secondary-stat__icon" aria-hidden="true" />
-              <span class="secondary-stat__text">
-                <IntlFormatted :message-id="messages.profileUserId">
-                  <template #~id>
-                    <CopyCode :text="user.id" />
-                  </template>
-                </IntlFormatted>
-              </span>
-            </div>
-            <template v-if="organizations.length > 0">
-              <hr class="card-divider" />
-              <div class="stats-block__item">
-                <IntlFormatted :message-id="messages.profileOrganizations" />
-                <div class="organizations-grid">
-                  <nuxt-link
-                    v-for="org in organizations"
-                    :key="org.id"
-                    v-tooltip="org.name"
-                    class="organization"
-                    :to="`/organization/${org.slug}`"
-                  >
-                    <Avatar :src="org.icon_url" :alt="'Icon for ' + org.name" size="xs" />
-                  </nuxt-link>
-                </div>
+            <div class="stats-block__item">
+              <IntlFormatted :message-id="messages.profileOrganizations" />
+              <div class="organizations-grid">
+                <nuxt-link
+                  v-for="org in organizations"
+                  :key="org.id"
+                  v-tooltip="org.name"
+                  class="organization"
+                  :to="`/organization/${org.slug}`"
+                >
+                  <Avatar :src="org.icon_url" :alt="'Icon for ' + org.name" size="xs" />
+                </nuxt-link>
               </div>
-            </template>
+            </div>
           </template>
         </div>
       </div>
@@ -347,14 +293,10 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg'
 import UserIcon from '~/assets/images/utils/user.svg'
 import EditIcon from '~/assets/images/utils/edit.svg'
 import HeartIcon from '~/assets/images/utils/heart.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import SaveIcon from '~/assets/images/utils/save.svg'
 import GridIcon from '~/assets/images/utils/grid.svg'
 import ListIcon from '~/assets/images/utils/list.svg'
 import ImageIcon from '~/assets/images/utils/image.svg'
-import UploadIcon from '~/assets/images/utils/upload.svg'
 import WorldIcon from '~/assets/images/utils/world.svg'
-import FileInput from '~/components/ui/FileInput.vue'
 import ModalCreation from '~/components/ui/ModalCreation.vue'
 import NavRow from '~/components/ui/NavRow.vue'
 import CopyCode from '~/components/ui/CopyCode.vue'
@@ -553,61 +495,6 @@ const sumFollows = computed(() => {
   return sum
 })
 
-const isEditing = ref(false)
-const icon = shallowRef(null)
-const previewImage = shallowRef(null)
-
-function showPreviewImage(files) {
-  const reader = new FileReader()
-  icon.value = files[0]
-  reader.readAsDataURL(icon.value)
-  reader.onload = (event) => {
-    previewImage.value = event.target.result
-  }
-}
-
-async function saveChanges() {
-  startLoading()
-  try {
-    if (icon.value) {
-      await useBaseFetch(
-        `user/${auth.value.user.id}/icon?ext=${
-          icon.value.type.split('/')[icon.value.type.split('/').length - 1]
-        }`,
-        {
-          method: 'PATCH',
-          body: icon.value,
-        }
-      )
-    }
-
-    const reqData = {
-      email: user.value.email,
-      bio: user.value.bio,
-    }
-    if (user.value.username !== auth.value.user.username) {
-      reqData.username = user.value.username
-    }
-
-    await useBaseFetch(`user/${auth.value.user.id}`, {
-      method: 'PATCH',
-      body: reqData,
-    })
-    await useAuth(auth.value.token)
-
-    isEditing.value = false
-  } catch (err) {
-    console.error(err)
-    data.$notify({
-      group: 'main',
-      title: formatMessage(commonMessages.errorNotificationTitle),
-      text: err.data.description,
-      type: 'error',
-    })
-  }
-  stopLoading()
-}
-
 function cycleSearchDisplayMode() {
   cosmetics.value.searchDisplayMode.user = data.$cycleValue(
     cosmetics.value.searchDisplayMode.user,
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index 6065032c4..e791d1f54 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -15,6 +15,10 @@ export const commonMessages = defineMessages({
     id: 'button.continue',
     defaultMessage: 'Continue',
   },
+  changesSavedLabel: {
+    id: 'label.changes-saved',
+    defaultMessage: 'Changes saved',
+  },
   createAProjectButton: {
     id: 'button.create-a-project',
     defaultMessage: 'Create a project',
@@ -65,7 +69,7 @@ export const commonMessages = defineMessages({
   },
   listInputView: {
     id: 'input.view.list',
-    defaultMessage: 'List view',
+    defaultMessage: 'Rows view',
   },
   moderationLabel: {
     id: 'label.moderation',
@@ -123,6 +127,10 @@ export const commonMessages = defineMessages({
     id: 'label.unlisted',
     defaultMessage: 'Unlisted',
   },
+  uploadImageButton: {
+    id: 'button.upload-image',
+    defaultMessage: 'Upload image',
+  },
   visibilityLabel: {
     id: 'label.visibility',
     defaultMessage: 'Visibility',