diff --git a/apps/frontend/auctions/Main.svelte b/apps/frontend/auctions/Main.svelte
index f924377ea..1670893fe 100644
--- a/apps/frontend/auctions/Main.svelte
+++ b/apps/frontend/auctions/Main.svelte
@@ -10,6 +10,8 @@
     import Routes from './Routes.svelte';
     import Sidebar from './Sidebar.svelte';
 
+    let { baseUrlPrefix }: { baseUrlPrefix?: string } = $props();
+
     let ready = $state(false);
 
     onMount(async () => {
@@ -34,6 +36,6 @@
 {#if !ready}
     <p>L O A D I N G</p>
 {:else}
-    <Sidebar />
-    <Routes />
+    <Sidebar {baseUrlPrefix} />
+    <Routes {baseUrlPrefix} />
 {/if}
diff --git a/apps/frontend/auctions/Routes.svelte b/apps/frontend/auctions/Routes.svelte
index c72f35f27..473191ca5 100644
--- a/apps/frontend/auctions/Routes.svelte
+++ b/apps/frontend/auctions/Routes.svelte
@@ -1,13 +1,37 @@
 <script lang="ts">
-    import Router from 'svelte-spa-router'
+    import Router from 'svelte-spa-router';
+    import { wrap } from 'svelte-spa-router/wrap';
 
-    import Browse from './components/browse/Browse.svelte'
-    import Search from './components/search/Search.svelte'
+    import Browse from './components/browse/Browse.svelte';
+    import Search from './components/search/Search.svelte';
 
-    const routes = {
-        '/browse/:slug1?/:slug2?/:slug3?/:slug4?/:slug5?': Browse,
-        '/search/:slug1?/:slug2?/:slug3?': Search,
-    }
+    let { baseUrlPrefix }: { baseUrlPrefix?: string } = $props();
+
+    let routes = $derived.by(() => {
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const ret = new Map();
+
+        ret.set(
+            `${baseUrlPrefix || ''}/browse/:slug1?/:slug2?/:slug3?/:slug4?/:slug5?`,
+            wrap({
+                component: Browse,
+                props: {
+                    baseUrlPrefix,
+                },
+            })
+        );
+        ret.set(
+            `${baseUrlPrefix || ''}/search/:slug1?/:slug2?/:slug3?`,
+            wrap({
+                component: Search,
+                props: {
+                    baseUrlPrefix,
+                },
+            })
+        );
+
+        return ret;
+    });
 </script>
 
 <Router {routes} />
diff --git a/apps/frontend/auctions/Sidebar.svelte b/apps/frontend/auctions/Sidebar.svelte
index e4689f757..ca99a6f40 100644
--- a/apps/frontend/auctions/Sidebar.svelte
+++ b/apps/frontend/auctions/Sidebar.svelte
@@ -10,12 +10,18 @@
     import Sidebar from '@/shared/components/sub-sidebar/SubSidebar.svelte';
     import TextInput from '@/shared/components/forms/TextInput.svelte';
 
+    let { baseUrlPrefix }: { baseUrlPrefix: string } = $props();
+
     let searchValue: string;
 
+    let baseUrl = $derived(
+        `${baseUrlPrefix || ''}/browse/${Region[$auctionsAppState.region].toLowerCase()}`
+    );
+
     const onSubmit = async function () {
         if (searchValue?.trim()?.length > 0) {
             replace(
-                `/search/${Region[$auctionsAppState.region].toLowerCase()}/${encodeURIComponent(searchValue)}`
+                `${baseUrlPrefix || ''}/search/${Region[$auctionsAppState.region].toLowerCase()}/${encodeURIComponent(searchValue)}`
             );
         }
     };
@@ -67,16 +73,10 @@
 </style>
 
 {#key $auctionsAppState.region}
-    <Sidebar
-        baseUrl={`/browse/${Region[$auctionsAppState.region].toLowerCase()}`}
-        items={$auctionStore.categories}
-        scrollable={true}
-        width="16rem"
-        {dataFunc}
-    >
+    <Sidebar {baseUrl} items={$auctionStore.categories} scrollable={true} width="16rem" {dataFunc}>
         <div slot="before" class="before">
             <div class="regions">
-                {#each ['us', 'eu', 'kr', 'tw'] as region}
+                {#each ['us', 'eu', 'kr', 'tw'] as region (region)}
                     <button
                         class="border"
                         class:active={Region[$auctionsAppState.region].toLowerCase() === region}
diff --git a/apps/frontend/auctions/components/browse/Browse.svelte b/apps/frontend/auctions/components/browse/Browse.svelte
index 90085de0b..c088319f3 100644
--- a/apps/frontend/auctions/components/browse/Browse.svelte
+++ b/apps/frontend/auctions/components/browse/Browse.svelte
@@ -10,14 +10,18 @@
     import type { AuctionCategory } from '@/types/data/auction';
 
     import Results from '@/auctions/components/results/Results.svelte';
-    import UnderConstruction from '@/shared/components/under-construction/UnderConstruction.svelte';
 
-    export let params: MultiSlugParams;
+    type Props = {
+        baseUrlPrefix?: string;
+        params: MultiSlugParams;
+    };
+    let { baseUrlPrefix, params }: Props = $props();
+
+    let [categories, category, selected] = $derived.by(() => {
+        let retCategories: AuctionCategory[];
+        let retCategory: AuctionCategory;
+        let retSelected: string;
 
-    let categories: AuctionCategory[];
-    let category: AuctionCategory;
-    let selected: string;
-    $: {
         const usefulParams = [params.slug2, params.slug3, params.slug4, params.slug5].filter(
             (slug) => !!slug
         );
@@ -44,18 +48,25 @@
         }
 
         if (
-            !categories ||
-            categories.map((c) => c.slug).join('|') !== newCategories.map((c) => c.slug).join('|')
+            !retCategories ||
+            retCategories.map((c) => c.slug).join('|') !==
+                newCategories.map((c) => c.slug).join('|')
         ) {
-            categories = newCategories;
+            retCategories = newCategories;
         }
-        if (newCategory?.id !== category?.id) {
-            category = newCategory;
+        if (newCategory?.id !== retCategory?.id) {
+            retCategory = newCategory;
         }
-        if (newSelected !== selected) {
-            selected = newSelected;
+        if (newSelected !== retSelected) {
+            retSelected = newSelected;
         }
-    }
+
+        return [retCategories, retCategory, retSelected];
+    });
+
+    let loadFunc = $derived(
+        async () => await browseStore.fetch($auctionsAppState, $auctionStore, category.id)
+    );
 
     onMount(() => {
         if (params.slug1) {
@@ -63,12 +74,14 @@
             const newRegion = Region[params.slug1.toUpperCase() as keyof typeof Region];
             if (oldRegion !== newRegion) {
                 $auctionsAppState.region = newRegion;
-                replace(
-                    router.location.replace(
-                        `/${Region[oldRegion].toLowerCase()}/`,
-                        `/${Region[newRegion].toLowerCase()}/`
-                    )
-                );
+                if (oldRegion) {
+                    replace(
+                        router.location.replace(
+                            `/${Region[oldRegion].toLowerCase()}/`,
+                            `/${Region[newRegion].toLowerCase()}/`
+                        )
+                    );
+                }
             }
         }
     });
@@ -86,15 +99,13 @@
 </style>
 
 <div class="wrapper-column">
-    <UnderConstruction />
-
     {#if category?.browseable}
         <div class="header">
             <span>
                 <code>[{Region[$auctionsAppState.region]}]</code>
-                Search
+                Browse
             </span>
-            {#each categories as category, categoryIndex}
+            {#each categories as category, categoryIndex (category.id)}
                 <span>&gt;</span>
                 <a
                     href="#/browse/{params.slug1}/{categories
@@ -108,9 +119,8 @@
         </div>
 
         <Results
-            loadFunc={async () =>
-                await browseStore.fetch($auctionsAppState, $auctionStore, category.id)}
-            url={`#/browse/${params.slug1}/${categories.map((c) => c.slug).join('/')}`}
+            url={`#${baseUrlPrefix || ''}/browse/${params.slug1}/${categories.map((c) => c.slug).join('/')}`}
+            {loadFunc}
             {selected}
         />
     {/if}
diff --git a/apps/frontend/auctions/components/browse/store.ts b/apps/frontend/auctions/components/browse/store.ts
index e998a60f6..c1ecaad74 100644
--- a/apps/frontend/auctions/components/browse/store.ts
+++ b/apps/frontend/auctions/components/browse/store.ts
@@ -9,7 +9,7 @@ class BrowseStore {
     async fetch(
         auctionAppState: AuctionsAppState,
         auctionData: AuctionData,
-        categoryId: number,
+        categoryId: number
     ): Promise<AuctionEntry[]> {
         let things: AuctionEntry[] = [];
 
diff --git a/apps/frontend/auctions/components/search/Search.svelte b/apps/frontend/auctions/components/search/Search.svelte
index abf021c3b..3d11bca9e 100644
--- a/apps/frontend/auctions/components/search/Search.svelte
+++ b/apps/frontend/auctions/components/search/Search.svelte
@@ -7,7 +7,10 @@
     import Results from '@/auctions/components/results/Results.svelte';
     import UnderConstruction from '@/shared/components/under-construction/UnderConstruction.svelte';
 
-    let { params }: ParamsSlugsProps = $props();
+    type Props = ParamsSlugsProps & {
+        baseUrlPrefix?: string;
+    };
+    let { baseUrlPrefix, params }: Props = $props();
 
     let searchString = $derived(params.slug2);
 </script>
@@ -39,7 +42,7 @@
         <Results
             loadFunc={async () => await searchStore.search($auctionsAppState, searchString)}
             selected={params.slug3}
-            url={`#/search/${params.slug1}/${searchString}`}
+            url={`#${baseUrlPrefix || ''}/search/${params.slug1}/${searchString}`}
         />
     {/if}
 </div>
diff --git a/apps/frontend/components/auctions/AuctionsSidebar.svelte b/apps/frontend/components/auctions/AuctionsSidebar.svelte
index 121a8a1a2..da024a918 100644
--- a/apps/frontend/components/auctions/AuctionsSidebar.svelte
+++ b/apps/frontend/components/auctions/AuctionsSidebar.svelte
@@ -4,9 +4,13 @@
 
     import Sidebar from '@/shared/components/sub-sidebar/SubSidebar.svelte';
 
-    let categories: SidebarItem[];
-    $: {
-        categories = [
+    let categories = $derived.by(() => {
+        const ret: SidebarItem[] = [
+            {
+                name: 'Browse',
+                slug: 'browse',
+            },
+            null,
             {
                 name: 'Buy Missing',
                 slug: 'missing',
@@ -70,20 +74,22 @@
         ];
 
         if (settingsState.value.auctions.customCategories?.length > 0) {
-            categories.push(null);
+            ret.push(null);
             for (
                 let catIndex = 0;
                 catIndex < settingsState.value.auctions.customCategories.length;
                 catIndex++
             ) {
-                categories.push({
+                ret.push({
                     name: settingsState.value.auctions.customCategories[catIndex].name,
                     slug: `custom-${catIndex + 1}`,
                     forceWildcard: true,
                 });
             }
         }
-    }
+
+        return ret;
+    });
 </script>
 
 <Sidebar baseUrl="/auctions" items={categories} width="14rem" />
diff --git a/apps/frontend/components/auctions/AuctionsView.svelte b/apps/frontend/components/auctions/AuctionsView.svelte
index fb281e2ec..89975c47b 100644
--- a/apps/frontend/components/auctions/AuctionsView.svelte
+++ b/apps/frontend/components/auctions/AuctionsView.svelte
@@ -13,6 +13,7 @@
     import { userState } from '@/user-home/state/user';
     import type { MultiSlugParams } from '@/types';
 
+    import AuctionsMain from '@/auctions/Main.svelte';
     import Checkbox from '@/shared/components/forms/CheckboxInput.svelte';
     import Commodities from './commodities/Commodities.svelte';
     import Custom from './AuctionsCustom.svelte';
@@ -150,104 +151,108 @@
 </style>
 
 <div class="auctions" bind:this={auctionsContainer}>
-    <div class="options-container border">
-        <div class="options-group">
-            Sort:
-            <RadioGroup
-                bind:value={$auctionState.sortBy[`${params.slug1}-${params.slug2}`]}
-                name="sort_by"
-                options={[
-                    ['name_up', 'Name :arrow-up:'],
-                    ['name_down', 'Name :arrow-down:'],
-                    ['price_up', 'Price :arrow-up:'],
-                    ['price_down', 'Price :arrow-down:'],
-                ]}
-            />
-        </div>
-
-        <div class="options-group">
-            Region:
-            <RadioGroup bind:value={$auctionState.region} name="region" options={regions} />
-
-            {#if $auctionState.region === '3'}
-                <Checkbox name="include_russia" bind:value={$auctionState.includeRussia}
-                    >Include RU</Checkbox
-                >
-            {/if}
-        </div>
+    {#if params.slug1 !== 'browse' && params.slug1 !== 'search'}
+        <div class="options-container border">
+            <div class="options-group">
+                Sort:
+                <RadioGroup
+                    bind:value={$auctionState.sortBy[`${params.slug1}-${params.slug2}`]}
+                    name="sort_by"
+                    options={[
+                        ['name_up', 'Name :arrow-up:'],
+                        ['name_down', 'Name :arrow-down:'],
+                        ['price_up', 'Price :arrow-up:'],
+                        ['price_down', 'Price :arrow-down:'],
+                    ]}
+                />
+            </div>
 
-        {#if params.slug1 === 'missing'}
             <div class="options-group">
-                <Checkbox name="all_realms" bind:value={$auctionState.allRealms}
-                    >All realms</Checkbox
-                >
+                Region:
+                <RadioGroup bind:value={$auctionState.region} name="region" options={regions} />
+
+                {#if $auctionState.region === '3'}
+                    <Checkbox name="include_russia" bind:value={$auctionState.includeRussia}
+                        >Include RU</Checkbox
+                    >
+                {/if}
             </div>
 
-            {#if params.slug2 && !params.slug2.startsWith('appearance-') && params.slug2 !== 'recipes'}
+            {#if params.slug1 === 'missing'}
                 <div class="options-group">
-                    <Checkbox name="hide_ignored" bind:value={$auctionState.hideIgnored}
-                        >Hide ignored</Checkbox
+                    <Checkbox name="all_realms" bind:value={$auctionState.allRealms}
+                        >All realms</Checkbox
                     >
                 </div>
+
+                {#if params.slug2 && !params.slug2.startsWith('appearance-') && params.slug2 !== 'recipes'}
+                    <div class="options-group">
+                        <Checkbox name="hide_ignored" bind:value={$auctionState.hideIgnored}
+                            >Hide ignored</Checkbox
+                        >
+                    </div>
+                {/if}
             {/if}
-        {/if}
 
-        {#if actualSlug.startsWith('missing-appearance-') || actualSlug === 'missing-recipes'}
-            <div class="options-group">
-                <Checkbox
-                    name="limit_to_cheapest_realm"
-                    bind:value={$auctionState.limitToCheapestRealm}>Only cheapest</Checkbox
-                >
-            </div>
-            <div class="options-group">
-                <Checkbox name="show_dont_have" bind:value={$auctionState.showDontHave}
-                    >Don't have</Checkbox
-                >
+            {#if actualSlug.startsWith('missing-appearance-') || actualSlug === 'missing-recipes'}
+                <div class="options-group">
+                    <Checkbox
+                        name="limit_to_cheapest_realm"
+                        bind:value={$auctionState.limitToCheapestRealm}>Only cheapest</Checkbox
+                    >
+                </div>
+                <div class="options-group">
+                    <Checkbox name="show_dont_have" bind:value={$auctionState.showDontHave}
+                        >Don't have</Checkbox
+                    >
 
-                <Checkbox name="show_have" bind:value={$auctionState.showHave}>Have</Checkbox>
-            </div>
-        {:else if actualSlug === 'sell-commodities'}
-            <div class="options-group">
-                <Checkbox
-                    name="current_expansion"
-                    bind:value={browserState.current.auctions.commoditiesCurrentExpansion}
-                    >Current expansion only</Checkbox
-                >
-            </div>
-        {:else}
-            <div class="options-group">
-                <Checkbox name="include_bids" bind:value={$auctionState.includeBids}
-                    >Include bids</Checkbox
-                >
+                    <Checkbox name="show_have" bind:value={$auctionState.showHave}>Have</Checkbox>
+                </div>
+            {:else if actualSlug === 'sell-commodities'}
+                <div class="options-group">
+                    <Checkbox
+                        name="current_expansion"
+                        bind:value={browserState.current.auctions.commoditiesCurrentExpansion}
+                        >Current expansion only</Checkbox
+                    >
+                </div>
+            {:else}
+                <div class="options-group">
+                    <Checkbox name="include_bids" bind:value={$auctionState.includeBids}
+                        >Include bids</Checkbox
+                    >
 
-                <Checkbox name="limit_to_best_realms" bind:value={$auctionState.limitToBestRealms}
-                    >Only top 5</Checkbox
-                >
-            </div>
-        {/if}
+                    <Checkbox
+                        name="limit_to_best_realms"
+                        bind:value={$auctionState.limitToBestRealms}>Only top 5</Checkbox
+                    >
+                </div>
+            {/if}
 
-        {#if actualSlug === 'sell-extra-pets'}
-            <div class="options-group">
-                Extra pets:
-                <Checkbox
-                    name="extra_pets_ignore_journal"
-                    bind:value={$auctionState.extraPetsIgnoreJournal}>Ignore journal</Checkbox
-                >
-            </div>
-        {:else if actualSlug === 'missing-pets'}
-            <div class="options-group">
-                <Checkbox name="pets_max_level" bind:value={$auctionState.missingPetsMaxLevel}
-                    >Only level 25</Checkbox
-                >
+            {#if actualSlug === 'sell-extra-pets'}
+                <div class="options-group">
+                    Extra pets:
+                    <Checkbox
+                        name="extra_pets_ignore_journal"
+                        bind:value={$auctionState.extraPetsIgnoreJournal}>Ignore journal</Checkbox
+                    >
+                </div>
+            {:else if actualSlug === 'missing-pets'}
+                <div class="options-group">
+                    <Checkbox name="pets_max_level" bind:value={$auctionState.missingPetsMaxLevel}
+                        >Only level 25</Checkbox
+                    >
 
-                <Checkbox
-                    name="pets_need_max_level"
-                    disabled={!$auctionState.missingPetsMaxLevel}
-                    bind:value={$auctionState.missingPetsNeedMaxLevel}>If missing level 25</Checkbox
-                >
-            </div>
-        {/if}
-    </div>
+                    <Checkbox
+                        name="pets_need_max_level"
+                        disabled={!$auctionState.missingPetsMaxLevel}
+                        bind:value={$auctionState.missingPetsNeedMaxLevel}
+                        >If missing level 25</Checkbox
+                    >
+                </div>
+            {/if}
+        </div>
+    {/if}
 
     {#if actualSlug.startsWith('missing-appearance-')}
         <div class="options-wrapper">
@@ -474,11 +479,17 @@
         </div>
     {/if}
 
-    <svelte:component
-        this={componentMap[actualSlug]}
-        slug1={actualSlug}
-        slug2={params.slug3}
-        {auctionsContainer}
-        {page}
-    />
+    {#if params.slug1 === 'browse' || params.slug1 === 'search'}
+        <div class="view">
+            <AuctionsMain baseUrlPrefix="/auctions" />
+        </div>
+    {:else}
+        <svelte:component
+            this={componentMap[actualSlug]}
+            slug1={actualSlug}
+            slug2={params.slug3}
+            {auctionsContainer}
+            {page}
+        />
+    {/if}
 </div>
diff --git a/apps/frontend/components/professions/recipes/AbilityRow.svelte b/apps/frontend/components/professions/recipes/AbilityRow.svelte
new file mode 100644
index 000000000..32f2acad9
--- /dev/null
+++ b/apps/frontend/components/professions/recipes/AbilityRow.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+    import { hiddenSkillLineAbilitySpellIds } from '@/data/professions/hidden';
+    import { BindType } from '@/enums/bind-type';
+    import { Faction } from '@/enums/faction';
+    import { iconLibrary } from '@/shared/icons';
+    import { wowthingData } from '@/shared/stores/data';
+    import type {
+        StaticDataProfession,
+        StaticDataProfessionAbility,
+        StaticDataSubProfession,
+    } from '@/shared/stores/static/types';
+    import type { Character } from '@/types/character';
+
+    import FactionIcon from '@/shared/components/images/FactionIcon.svelte';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
+    import ProfessionIcon from '@/shared/components/images/ProfessionIcon.svelte';
+    import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
+    import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
+    import YesNoIcon from '@/shared/components/icons/YesNoIcon.svelte';
+
+    type Props = {
+        ability: StaticDataProfessionAbility;
+        characters: Character[];
+        profession: StaticDataProfession;
+        subProfession: StaticDataSubProfession;
+    };
+    let { ability, characters, profession, subProfession }: Props = $props();
+
+    let recipes = $derived(wowthingData.static.skillLineAbilityItems[ability.id] || []);
+    let recipeItem = $derived(wowthingData.items.items[recipes[0]]);
+    let isHidden = $derived(hiddenSkillLineAbilitySpellIds.has(ability.spellId));
+    let isIgnored = $derived(
+        wowthingData.manual.ignoredSkillLineAbilitySpellIds.has(ability.spellId)
+    );
+    let anyCharacterHas = $derived(characters.some((char) => char?.knownRecipes?.has(ability.id)));
+</script>
+
+<style lang="scss">
+    .status {
+        border-left: 1px solid var(--border-color);
+        text-align: center;
+    }
+</style>
+
+{#if !isHidden && (!isIgnored || anyCharacterHas)}
+    <tr data-id={ability.id}>
+        <td class="source">
+            {#if recipeItem}
+                <span class="quality{recipeItem.quality ?? 1}">
+                    <WowheadLink type="item" id={recipeItem.id}>
+                        <WowthingImage name="item/{recipeItem.id}" size={20} border={1} />
+
+                        {#if recipeItem.allianceOnly}
+                            <FactionIcon faction={Faction.Alliance} />
+                        {:else if recipeItem.hordeOnly}
+                            <FactionIcon faction={Faction.Horde} />
+                        {/if}
+                    </WowheadLink>
+                </span>
+            {:else if ability.spellId}
+                <WowheadLink type="spell" id={ability.spellId}>
+                    <WowthingImage name="spell/{ability.spellId}" size={20} border={1} />
+                </WowheadLink>
+            {:else}
+                <ProfessionIcon id={profession.id} border={1} />
+            {/if}
+        </td>
+        <td
+            class="name text-overflow {ability.itemIds[0]
+                ? `quality${wowthingData.items.items[ability.itemIds[0]].quality}`
+                : undefined}"
+        >
+            <WowheadLink type="spell" id={ability.spellId}>
+                {#if ability.name}
+                    {ability.name}
+                {:else}
+                    {wowthingData.items.items[ability.itemIds[0] || 0]?.name}
+                {/if}
+            </WowheadLink>
+        </td>
+        <td class="auctions">
+            {#if recipes && recipes.some((id) => wowthingData.items.items[id]?.bindType !== BindType.OnAcquire)}
+                <a
+                    href="#/auctions/specific-item/{recipes[0]}"
+                    target="_blank"
+                    data-tooltip="Find auctions"
+                >
+                    <IconifyWrapper icon={iconLibrary.mdiBank} />
+                </a>
+            {/if}
+        </td>
+
+        {#each characters as character}
+            {#if character === null}
+                <td class="spacer"></td>
+            {:else if (recipeItem?.allianceOnly && character.faction !== Faction.Alliance) || (recipeItem?.hordeOnly && character.faction !== Faction.Horde)}
+                <td class="status faded">---</td>
+            {:else}
+                {@const charProf =
+                    character.professions[profession.id]?.subProfessions?.[subProfession.id]}
+                {@const charHas = charProf?.knownRecipes?.has?.(ability.id)}
+                <td class="status" class:status-success={charHas} class:status-fail={!charHas}>
+                    <YesNoIcon state={charHas} />
+                </td>
+            {/if}
+        {/each}
+    </tr>
+{/if}
diff --git a/apps/frontend/components/professions/recipes/View.svelte b/apps/frontend/components/professions/recipes/View.svelte
index 93d7e1dae..b91dbfcd4 100644
--- a/apps/frontend/components/professions/recipes/View.svelte
+++ b/apps/frontend/components/professions/recipes/View.svelte
@@ -1,79 +1,78 @@
 <script lang="ts">
     import sortBy from 'lodash/sortBy';
 
-    import { BindType } from '@/enums/bind-type';
-    import { Faction } from '@/enums/faction';
     import { SkillSourceType } from '@/enums/skill-source-type';
-    import { iconLibrary } from '@/shared/icons';
+    import { browserState } from '@/shared/state/browser.svelte';
     import { settingsState } from '@/shared/state/settings.svelte';
     import { wowthingData } from '@/shared/stores/data';
-    import { newNavState, professionsRecipesState } from '@/stores/local-storage';
+    import { newNavState } from '@/stores/local-storage';
     import { userState } from '@/user-home/state/user';
     import { useCharacterFilter } from '@/utils/characters';
     import type { Character, ExpansionData } from '@/types';
     import type {
         StaticDataProfession,
         StaticDataProfessionCategory,
-        StaticDataSubProfession,
     } from '@/shared/stores/static/types';
 
+    import AbilityRow from './AbilityRow.svelte';
     import Checkbox from '@/shared/components/forms/CheckboxInput.svelte';
     import ClassIcon from '@/shared/components/images/ClassIcon.svelte';
-    import FactionIcon from '@/shared/components/images/FactionIcon.svelte';
-    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
-    import ProfessionIcon from '@/shared/components/images/ProfessionIcon.svelte';
-    import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
-    import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
-    import YesNoIcon from '@/shared/components/icons/YesNoIcon.svelte';
 
-    export let expansion: ExpansionData;
-    export let profession: StaticDataProfession;
+    type Props = {
+        expansion: ExpansionData;
+        profession: StaticDataProfession;
+    };
+
+    let { expansion, profession }: Props = $props();
 
-    let categoryChildren: StaticDataProfessionCategory[];
-    let characters: Character[];
-    let colspan: number;
-    let subProfession: StaticDataSubProfession;
-    $: {
-        categoryChildren = profession.expansionCategory[expansion.id].children[0].children.filter(
+    let categoryChildren = $derived(
+        profession.expansionCategory[expansion.id].children[0].children.filter(
             (cat) => cat.abilities.length > 0
-        );
-        subProfession = profession.expansionSubProfession[expansion.id];
+        )
+    );
+    let subProfession = $derived(profession.expansionSubProfession[expansion.id]);
+
+    let characters = $derived.by(() => {
+        const ret: Character[] = [];
 
-        characters = [];
         const collectorIds =
             settingsState.value.professions.collectingCharactersV2?.[profession.id] || [];
         const validCollectors = collectorIds
             .map((collectorId) => userState.general.characterById[collectorId])
             .filter((char) => !!char);
         if (validCollectors.length > 0) {
-            characters.push(null);
-            characters.push(...validCollectors);
+            ret.push(null);
+            ret.push(...validCollectors);
         }
 
-        const professionCharacters = userState.general.visibleCharacters.filter((char) =>
-            useCharacterFilter(
-                settingsState.value,
-                (c) =>
-                    !collectorIds.includes(c.id) &&
-                    !!c.professions?.[profession.id]?.subProfessions?.[subProfession.id],
-                char,
-                $newNavState.characterFilter
-            )
-        );
-        if (professionCharacters.length > 0) {
-            characters.push(null);
-
-            professionCharacters.sort((a, b) => {
-                if (a.level !== b.level) {
-                    return b.level - a.level;
-                }
-                return a.name.localeCompare(b.name);
-            });
-            characters.push(...professionCharacters);
+        if (!browserState.current.professions.recipesOnlyCollectors) {
+            const professionCharacters = userState.general.visibleCharacters.filter((char) =>
+                useCharacterFilter(
+                    settingsState.value,
+                    (c) =>
+                        !collectorIds.includes(c.id) &&
+                        !!c.professions?.[profession.id]?.subProfessions?.[subProfession.id],
+                    char,
+                    $newNavState.characterFilter
+                )
+            );
+            if (professionCharacters.length > 0) {
+                ret.push(null);
+
+                professionCharacters.sort((a, b) => {
+                    if (a.level !== b.level) {
+                        return b.level - a.level;
+                    }
+                    return a.name.localeCompare(b.name);
+                });
+                ret.push(...professionCharacters);
+            }
         }
 
-        colspan = 3 + characters.length;
-    }
+        return ret;
+    });
+
+    let colspan = $derived(characters.length + 3);
 
     const getAbilities = (
         category: StaticDataProfessionCategory,
@@ -155,10 +154,6 @@
 
         max-width: 22rem;
     }
-    .status {
-        border-left: 1px solid var(--border-color);
-        text-align: center;
-    }
 </style>
 
 <table class="table table-striped character-table">
@@ -167,9 +162,14 @@
             <th colspan="3">
                 <Checkbox
                     name="include_trainer_recipes"
-                    bind:value={$professionsRecipesState.includeTrainerRecipes}
+                    bind:value={browserState.current.professions.recipesIncludeTrainer}
                     >Include discovered/trainer recipes</Checkbox
                 >
+                <Checkbox
+                    name="only_collectors"
+                    bind:value={browserState.current.professions.recipesOnlyCollectors}
+                    >Only collectors</Checkbox
+                >
             </th>
             {#each characters as character}
                 {#if character}
@@ -191,10 +191,10 @@
         </tr>
     </thead>
     <tbody>
-        {#each categoryChildren as category}
+        {#each categoryChildren as category (category.id)}
             {@const abilities = getAbilities(
                 category,
-                $professionsRecipesState.includeTrainerRecipes
+                browserState.current.professions.recipesIncludeTrainer
             )}
             {#if abilities.length > 0}
                 <tr class="spacer">
@@ -207,85 +207,8 @@
                     </td>
                 </tr>
 
-                {#each abilities as ability}
-                    {@const recipes = wowthingData.static.skillLineAbilityItems[ability.id] || []}
-                    {@const recipeItem = wowthingData.items.items[recipes[0]]}
-                    <tr data-id={ability.id}>
-                        <td class="source">
-                            {#if recipeItem}
-                                <span class="quality{recipeItem.quality ?? 1}">
-                                    <WowheadLink type="item" id={recipeItem.id}>
-                                        <WowthingImage
-                                            name="item/{recipeItem.id}"
-                                            size={20}
-                                            border={1}
-                                        />
-
-                                        {#if recipeItem.allianceOnly}
-                                            <FactionIcon faction={Faction.Alliance} />
-                                        {:else if recipeItem.hordeOnly}
-                                            <FactionIcon faction={Faction.Horde} />
-                                        {/if}
-                                    </WowheadLink>
-                                </span>
-                            {:else if ability.spellId}
-                                <WowheadLink type="spell" id={ability.spellId}>
-                                    <WowthingImage
-                                        name="spell/{ability.spellId}"
-                                        size={20}
-                                        border={1}
-                                    />
-                                </WowheadLink>
-                            {:else}
-                                <ProfessionIcon id={profession.id} border={1} />
-                            {/if}
-                        </td>
-                        <td
-                            class="name text-overflow {ability.itemIds[0]
-                                ? `quality${wowthingData.items.items[ability.itemIds[0]].quality}`
-                                : undefined}"
-                        >
-                            <WowheadLink type="spell" id={ability.spellId}>
-                                {#if ability.name}
-                                    {ability.name}
-                                {:else}
-                                    {wowthingData.items.items[ability.itemIds[0] || 0]?.name}
-                                {/if}
-                            </WowheadLink>
-                        </td>
-                        <td class="auctions">
-                            {#if recipes && recipes.some((id) => wowthingData.items.items[id]?.bindType !== BindType.OnAcquire)}
-                                <a
-                                    href="#/auctions/specific-item/{recipes[0]}"
-                                    target="_blank"
-                                    data-tooltip="Find auctions"
-                                >
-                                    <IconifyWrapper icon={iconLibrary.mdiBank} />
-                                </a>
-                            {/if}
-                        </td>
-
-                        {#each characters as character}
-                            {#if character === null}
-                                <td class="spacer"></td>
-                            {:else if (recipeItem?.allianceOnly && character.faction !== Faction.Alliance) || (recipeItem?.hordeOnly && character.faction !== Faction.Horde)}
-                                <td class="status faded">---</td>
-                            {:else}
-                                {@const charProf =
-                                    character.professions[profession.id]?.subProfessions?.[
-                                        subProfession.id
-                                    ]}
-                                {@const charHas = charProf?.knownRecipes?.has?.(ability.id)}
-                                <td
-                                    class="status"
-                                    class:status-success={charHas}
-                                    class:status-fail={!charHas}
-                                >
-                                    <YesNoIcon state={charHas} />
-                                </td>
-                            {/if}
-                        {/each}
-                    </tr>
+                {#each abilities as ability (ability.id)}
+                    <AbilityRow {ability} {characters} {profession} {subProfession} />
                 {/each}
             {/if}
         {/each}
diff --git a/apps/frontend/shared/state/browser.svelte.ts b/apps/frontend/shared/state/browser.svelte.ts
index e246790c4..2d21660d9 100644
--- a/apps/frontend/shared/state/browser.svelte.ts
+++ b/apps/frontend/shared/state/browser.svelte.ts
@@ -118,6 +118,8 @@ interface BrowserStateIdk {
     };
     professions: {
         patronOrdersUnknown: boolean;
+        recipesIncludeTrainer: boolean;
+        recipesOnlyCollectors: boolean;
     };
     reputations: {
         sortOrder: Record<string, number[]>;
@@ -284,6 +286,8 @@ const initialState: BrowserStateIdk = {
     },
     professions: {
         patronOrdersUnknown: true,
+        recipesIncludeTrainer: true,
+        recipesOnlyCollectors: false,
     },
     reputations: {
         sortOrder: {},
diff --git a/apps/frontend/stores/local-storage/index.ts b/apps/frontend/stores/local-storage/index.ts
index eba4eef93..f52378439 100644
--- a/apps/frontend/stores/local-storage/index.ts
+++ b/apps/frontend/stores/local-storage/index.ts
@@ -6,7 +6,6 @@ export * from './collecting-settings';
 export * from './currency';
 export * from './history';
 export * from './new-nav';
-export * from './professions-recipes';
 export * from './progress';
 export * from './sub-sidebar';
 export * from './transmog-sets';
diff --git a/apps/frontend/stores/local-storage/professions-recipes.ts b/apps/frontend/stores/local-storage/professions-recipes.ts
deleted file mode 100644
index 8bd2ecca6..000000000
--- a/apps/frontend/stores/local-storage/professions-recipes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { writable } from 'svelte/store';
-
-class ProfessionsRecipesState {
-    public includeTrainerRecipes = true;
-}
-
-const key = 'state-professions-recipes';
-const initialState = new ProfessionsRecipesState();
-Object.assign(initialState, JSON.parse(localStorage.getItem(key) ?? '{}'));
-
-export const professionsRecipesState = writable<ProfessionsRecipesState>(initialState);
-
-professionsRecipesState.subscribe((state) => {
-    localStorage.setItem(key, JSON.stringify(state));
-});
diff --git a/apps/frontend/stores/user-auctions/missing-transmog.ts b/apps/frontend/stores/user-auctions/missing-transmog.ts
index e785f7ecc..ac4db8b9e 100644
--- a/apps/frontend/stores/user-auctions/missing-transmog.ts
+++ b/apps/frontend/stores/user-auctions/missing-transmog.ts
@@ -10,12 +10,11 @@ import {
     type UserAuctionDataMissingTransmogAuctionArray,
     UserAuctionDataMissingTransmogAuction,
 } from '@/types/data';
-import type { UserData } from '@/types';
 import type { Settings } from '@/shared/stores/settings/types';
+import type { DataUserGeneral } from '@/user-home/state/user/general.svelte';
 
 import type { AuctionState } from '../local-storage';
 import type { UserAuctionEntry } from '../user-auctions';
-import type { DataUserGeneral } from '@/user-home/state/user/general.svelte';
 
 export class UserAuctionMissingTransmogDataStore {
     private static url = '/api/auctions/missing-appearance-';
diff --git a/apps/frontend/user-home/Routes.svelte b/apps/frontend/user-home/Routes.svelte
index 4deef6e99..d0d41a885 100644
--- a/apps/frontend/user-home/Routes.svelte
+++ b/apps/frontend/user-home/Routes.svelte
@@ -30,7 +30,7 @@
         '/table': HomeTable,
 
         // Larger/less used components are dynamically loaded for code-splitting
-        '/auctions/:slug1?/:slug2?/:slug3?': wrap({
+        '/auctions/:slug1?/:slug2?/:slug3?/:slug4?/:slug5?/:slug6?/:slug7?': wrap({
             asyncComponent: () => import('@/components/auctions/Auctions.svelte'),
         }),
         '/characters/:slug1?/:slug2?/:slug3?/:slug4?/:slug5?/:slug6?': wrap({
diff --git a/apps/frontend/user-home/components/collections/recipes/View.svelte b/apps/frontend/user-home/components/collections/recipes/View.svelte
index 422ea7113..83b5a6d60 100644
--- a/apps/frontend/user-home/components/collections/recipes/View.svelte
+++ b/apps/frontend/user-home/components/collections/recipes/View.svelte
@@ -26,12 +26,11 @@
         const retCategory = profession.expansionCategory[expansionId].children[0];
         const retSubCategories: [StaticDataProfessionCategory, UserCount][] = [];
         for (const subCategory of retCategory.children) {
-            if (subCategory.abilities.length === 0) {
-                continue;
-            }
-
             const subStats =
                 userState.recipes.stats[`${professionSlug}--${expansionSlug}--${subCategory.id}`];
+            if (!subStats || subStats.total === 0) {
+                continue;
+            }
 
             let anyShown = false;
             for (const ability of subCategory.abilities) {
diff --git a/apps/frontend/utils/formatting/to-nice-duration.ts b/apps/frontend/utils/formatting/to-nice-duration.ts
index 5185b2ac1..77867c6d1 100644
--- a/apps/frontend/utils/formatting/to-nice-duration.ts
+++ b/apps/frontend/utils/formatting/to-nice-duration.ts
@@ -23,11 +23,13 @@ export function toNiceDuration(milliseconds: number, options?: Options): string
         parts.push(`${duration.days}d`);
     }
     if (duration.days < maxDays) {
-        if (duration.hours > 0 || (includeZero && parts.length >= 1)) {
-            parts.push(`${duration.hours < 10 ? space : ''}${duration.hours}h`);
+        const hours = Math.max(0, duration.hours);
+        const minutes = Math.max(0, duration.minutes);
+        if (hours > 0 || (includeZero && parts.length >= 1)) {
+            parts.push(`${hours < 10 ? space : ''}${hours}h`);
         }
-        if (duration.minutes > 0 || includeZero) {
-            parts.push(`${duration.minutes < 10 ? space : ''}${duration.minutes}m`);
+        if (minutes > 0 || (includeZero && parts.length >= 1)) {
+            parts.push(`${minutes < 10 ? space : ''}${minutes}m`);
         }
     }
 
diff --git a/apps/frontend/utils/professions/is-recipe-known.ts b/apps/frontend/utils/professions/is-recipe-known.ts
index bfc233ec9..72a37c217 100644
--- a/apps/frontend/utils/professions/is-recipe-known.ts
+++ b/apps/frontend/utils/professions/is-recipe-known.ts
@@ -71,7 +71,18 @@ export function isRecipeKnown(
             });
         }
 
-        // TODO: different specialization
+        // TODO: fix this TBC hack to handle Aldor/Scryer split properly
+        for (const itemId of abilityInfo.itemIds) {
+            const item = wowthingData.items.items[itemId];
+            if (item?.expansion === 1) {
+                return collectorIds.slice(1).some((collectorId) => {
+                    const collectorData = isKnownRecipeData[collectorId];
+                    return collectorData?.[1].has(abilityInfo.abilityId);
+                });
+            }
+        }
+
+        // TODO: handle different specialization
     } else {
         return !!characterIdsByAbilityId[abilityInfo.abilityId];
     }
diff --git a/apps/web/ViewModels/UserViewModel.cs b/apps/web/ViewModels/UserViewModel.cs
index 020d60fb3..98981b8bc 100644
--- a/apps/web/ViewModels/UserViewModel.cs
+++ b/apps/web/ViewModels/UserViewModel.cs
@@ -11,6 +11,7 @@ public class UserViewModel
     public readonly string SettingsJson;
     public readonly string AchievementHash;
     public readonly string AppearanceHash;
+    public readonly string AuctionHash;
     public readonly string DbHash;
     public readonly string ItemHash;
     public readonly string JournalHash;
@@ -35,6 +36,7 @@ bool isPrivate
 
         AchievementHash = hashes["Achievement"];
         AppearanceHash = hashes["Appearance"];
+        AuctionHash = hashes["Auction"];
         DbHash = hashes["Db"];
         ItemHash = hashes["Item"];
         JournalHash = hashes["Journal"];
diff --git a/apps/web/Views/User/Index.cshtml b/apps/web/Views/User/Index.cshtml
index 855c02945..0e85763cb 100644
--- a/apps/web/Views/User/Index.cshtml
+++ b/apps/web/Views/User/Index.cshtml
@@ -53,6 +53,7 @@
      data-settings="@Model.SettingsJson"
      data-achievements="@Url.Action("CachedJson", "CachedData", new { type = "achievement", languageCode = "zzZZ", hash = Model.AchievementHash })"
      data-appearance="@Url.Action("CachedJson", "CachedData", new { type = "appearance", languageCode = "zzZZ", hash = Model.AppearanceHash })"
+     data-auction="@Url.Action("CachedJson", "CachedData", new { type = "auction", languageCode = "zzZZ", hash = Model.AuctionHash })"
      data-db="@Url.Action("CachedJson", "CachedData", new { type = "db", languageCode = "zzZZ", hash = Model.DbHash })"
      data-item="@Url.Action("CachedJson", "CachedData", new { type = "item", languageCode = "zzZZ", hash = Model.ItemHash })"
      data-journal="@Url.Action("CachedJson", "CachedData", new { type = "journal", languageCode = "zzZZ", hash = Model.JournalHash })"