diff --git a/.prettierrc b/.prettierrc
index c62afff6..5a1003a6 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,17 +1,17 @@
 {
-	"arrowParens": "always",
-	"tabWidth": 2,
-	"semi": false,
-	"singleQuote": true,
-	"htmlWhitespaceSensitivity": "css",
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
-	"trailingComma": "all",
-	"bracketSameLine": false,
-	"svelteAllowShorthand": true,
-	"svelteBracketNewLine": true,
-	"svelteIndentScriptAndStyle": true,
-	"svelteSortOrder": "scripts-options-markup-styles",
-	"svelteStrictMode": false,
-	"useTabs": false
+  "arrowParens": "always",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "htmlWhitespaceSensitivity": "ignore",
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
+  "trailingComma": "all",
+  "bracketSameLine": false,
+  "svelteAllowShorthand": true,
+  "svelteBracketNewLine": true,
+  "svelteIndentScriptAndStyle": true,
+  "svelteSortOrder": "scripts-options-markup-styles",
+  "svelteStrictMode": false,
+  "useTabs": false
 }
diff --git a/src/lib/components/lemmy/post/Post.svelte b/src/lib/components/lemmy/post/Post.svelte
index ab0cb6d8..a359812f 100644
--- a/src/lib/components/lemmy/post/Post.svelte
+++ b/src/lib/components/lemmy/post/Post.svelte
@@ -61,6 +61,7 @@
           content: i.flair_title,
           color: i.background_color,
           icon: null,
+          type: 'flair' as 'flair' | 'custom',
         })) ?? []),
       ],
     }
diff --git a/src/lib/components/lemmy/post/PostItem.svelte b/src/lib/components/lemmy/post/PostItem.svelte
index 24c1f8f4..1c723446 100644
--- a/src/lib/components/lemmy/post/PostItem.svelte
+++ b/src/lib/components/lemmy/post/PostItem.svelte
@@ -9,4 +9,4 @@
   let { post }: Props = $props()
 </script>
 
-<Post {post} class="py-0!" />
+<Post {post} />
diff --git a/src/lib/components/lemmy/post/PostMeta.svelte b/src/lib/components/lemmy/post/PostMeta.svelte
index d649104b..c10853e7 100644
--- a/src/lib/components/lemmy/post/PostMeta.svelte
+++ b/src/lib/components/lemmy/post/PostMeta.svelte
@@ -12,12 +12,14 @@
     content: string
     color?: string
     icon?: IconSource | null
+    textColor?: string
+    type: 'flair' | 'custom'
   }
 
   export const textToTag: Map<string, Tag> = new Map<string, Tag>([
-    ['OC', { content: 'OC', color: '#03A8F240' }],
-    ['NSFL', { content: 'NSFL', color: '#ff000040' }],
-    ['CW', { content: 'CW', color: '#ff000040' }],
+    ['OC', { content: 'OC', color: '#03A8F240', type: 'custom' }],
+    ['NSFL', { content: 'NSFL', color: '#ff000040', type: 'custom' }],
+    ['CW', { content: 'CW', color: '#ff000040', type: 'custom' }],
   ])
 
   export const parseTags = (
@@ -38,6 +40,7 @@
             extracted.push(
               textToTag.get(content) ?? {
                 content: content,
+                type: 'custom',
               },
             )
           })
@@ -308,28 +311,34 @@
     {/if}
   </div>
   <div
-    class="flex flex-row min-sm:justify-end items-center self-center
-    flex-wrap gap-2 *:shrink-0 badges min-sm:ml-2"
+    class="flex flex-row min-sm:justify-end items-center self-center flex-wrap gap-2 *:shrink-0 badges min-sm:ml-2"
     style="grid-area: badges;"
   >
     {#if tags}
       {#each tags as tag}
-        <a
+        {@const href =
+          tag.type == 'flair'
+            ? null
+            : `/search?community=${community?.id}&q=[${tag.content}]&type=Posts`}
+        <svelte:element
+          this={href ? 'a' : 'div'}
+          {href}
           class="hover:brightness-110"
-          href="/search?community={community?.id}&q=[{tag.content}]&type=Posts"
-          style={tag.color ? `--tag-color: ${tag.color};` : ''}
+          style="{tag.color ? `--tag-color: ${tag.color};` : ''} {tag.textColor
+            ? `--tag-text-color: ${tag.textColor}`
+            : ''}"
         >
           <Badge class={tag.color ? 'badge-tag-color' : ''}>
             {#snippet icon()}
               {#if tag.icon}
                 <Icon src={tag.icon} micro size="14" />
-              {:else if tag !== null}
+              {:else if tag === undefined}
                 <Icon src={Tag} micro size="14" />
               {/if}
             {/snippet}
             {tag.content}
           </Badge>
-        </a>
+        </svelte:element>
       {/each}
     {/if}
     {#each Object.keys(badges)
@@ -339,8 +348,8 @@
       .map((i) => badgeToData.get(i as BadgeType))
       // remove null
       .filter((i) => i != undefined) as badge}
-      <Badge label={badge.label} color={badge.color} allowIconOnly
-        >{#snippet icon()}
+      <Badge label={badge.label} color={badge.color} allowIconOnly>
+        {#snippet icon()}
           <Icon src={badge.icon} micro size="14" />{/snippet}{badge.label}
       </Badge>
     {/each}
@@ -420,5 +429,6 @@
 
   :global(.badge-tag-color) {
     background-color: var(--tag-color) !important;
+    color: var(--tag-text-color, #000) !important;
   }
 </style>
diff --git a/src/lib/components/lemmy/user/UserLink.svelte b/src/lib/components/lemmy/user/UserLink.svelte
index d78410cc..b1b19e1c 100644
--- a/src/lib/components/lemmy/user/UserLink.svelte
+++ b/src/lib/components/lemmy/user/UserLink.svelte
@@ -142,7 +142,9 @@
       {/if}
     {/if}
     {#if user.flair}
-      <Badge color="blue-subtle" class="px-1.5! py-0.5!">{user.flair}</Badge>
+      <Badge color="blue-subtle" class="px-1.5! py-0.5! whitespace-nowrap">
+        {user.flair}
+      </Badge>
     {/if}
     {@render extraBadges?.()}
   {/if}
diff --git a/src/lib/mono/badge/Badge.svelte b/src/lib/mono/badge/Badge.svelte
index 7e3813f3..3b22383b 100644
--- a/src/lib/mono/badge/Badge.svelte
+++ b/src/lib/mono/badge/Badge.svelte
@@ -54,13 +54,13 @@
 
 <span
   {...rest}
-  class="{allowIconOnly
-    ? 'max-md:px-1.5 max-md:py-1.5'
-    : ''} px-2 py-1 {badgeRoundness[
-    rounding
-  ]} text-xs font-medium flex items-center gap-1 ring-1 ring-inset {badgeColor[
-    color
-  ]} {clazz}"
+  class={[
+    allowIconOnly && 'max-md:px-1.5 max-md:py-1.5',
+    'text-xs font-medium flex items-center gap-1 ring-1 ring-inset px-2 py-1',
+    badgeRoundness[rounding],
+    badgeColor[color],
+    clazz,
+  ]}
   title={label}
 >
   {@render icon?.()}
diff --git a/src/routes/accounts/+page.svelte b/src/routes/accounts/+page.svelte
index 0647c4ef..1367c853 100644
--- a/src/routes/accounts/+page.svelte
+++ b/src/routes/accounts/+page.svelte
@@ -131,7 +131,7 @@
     animate={false}
   >
     {#snippet item(p, index)}
-      <label class="relative">
+      <label class="relative block">
         <input
           type="radio"
           id={p.id.toString()}
diff --git a/src/routes/post/[instance]/[id=integer]/+page.svelte b/src/routes/post/[instance]/[id=integer]/+page.svelte
index c620513f..6bdb8b35 100644
--- a/src/routes/post/[instance]/[id=integer]/+page.svelte
+++ b/src/routes/post/[instance]/[id=integer]/+page.svelte
@@ -10,6 +10,7 @@
     postLink,
     PostMedia,
     PostMeta,
+    type Tag,
   } from '$lib/components/lemmy/post'
   import Markdown from '$lib/components/markdown/Markdown.svelte'
   import EndPlaceholder from '$lib/components/ui/EndPlaceholder.svelte'
@@ -71,6 +72,23 @@
     loading = false
     data.thread.singleThread = false
   }
+
+  let tags = $derived.by<{ title?: string; tags: Tag[] }>(() => {
+    const parsed = parseTags(data.post.post.name)
+
+    return {
+      title: parsed.title,
+      tags: [
+        ...parsed.tags,
+        ...(data.post.flair_list?.map((i) => ({
+          content: i.flair_title,
+          color: i.background_color,
+          icon: null,
+          textColor: i.text_color,
+        })) ?? []),
+      ],
+    }
+  })
 </script>
 
 <svelte:head>
@@ -129,14 +147,11 @@
         edited={data.post.post.updated}
         title={data.post.post.name}
         style="width: max-content;"
-        tags={parseTags(data.post.post.name).tags}
+        tags={tags.tags}
       />
     </div>
     <h1 class="font-medium text-xl leading-5">
-      <Markdown
-        source={parseTags(data.post.post.name).title ?? data.post.post.name}
-        inline
-      />
+      <Markdown source={tags.title ?? data.post.post.name} inline />
     </h1>
   </header>
   <PostMedia
diff --git a/src/routes/topic/[id]/+page.svelte b/src/routes/topic/[id]/+page.svelte
index 895e433c..bc5318e8 100644
--- a/src/routes/topic/[id]/+page.svelte
+++ b/src/routes/topic/[id]/+page.svelte
@@ -11,7 +11,7 @@
   let { data = $bindable() } = $props()
 
   let title = $state('Loading...')
-  data.topic.then((i) => (title = i?.title ?? ''))
+  data.topic.then((i) => (title = i?.name ?? ''))
 </script>
 
 <svelte:head>