diff --git a/apps/frontend/components/items/guild-banks/Tab.svelte b/apps/frontend/components/items/BankTab.svelte
similarity index 68%
rename from apps/frontend/components/items/guild-banks/Tab.svelte
rename to apps/frontend/components/items/BankTab.svelte
index dfeb68ef0..5fb2422a2 100644
--- a/apps/frontend/components/items/guild-banks/Tab.svelte
+++ b/apps/frontend/components/items/BankTab.svelte
@@ -1,27 +1,19 @@
 <script lang="ts">
-    import keyBy from 'lodash/keyBy';
-
     import { Constants } from '@/data/constants';
-    import type { Guild, GuildItem } from '@/types';
+    import type { groupBankItems } from '@/utils/items/group-bank-items';
 
     import Empty from '@/components/items/ItemsEmpty.svelte';
     import Item from '@/components/items/ItemsItem.svelte';
 
-    export let guild: Guild;
-    export let tab: number;
+    type Props = {
+        groupedItems: ReturnType<typeof groupBankItems>;
+        tab: number;
+        tabIndexOffByOne?: boolean;
+    };
 
-    let items: GuildItem[];
-    $: {
-        const itemBySlot = keyBy(
-            guild.items.filter((item) => item.tabId === tab),
-            (item) => item.slot
-        );
+    let { groupedItems, tab, tabIndexOffByOne }: Props = $props();
 
-        items = [];
-        for (let i = 0; i < Constants.guildBankTabItems; i++) {
-            items.push(itemBySlot[i + 1]);
-        }
-    }
+    let items = $derived(groupedItems[tabIndexOffByOne ? tab - 1 : tab] || []);
 </script>
 
 <style lang="scss">
@@ -42,7 +34,7 @@
         <h4>
             Tab {tab}
             <span class="slot-count">
-                ( {items.filter((i) => !!i).length} / {Constants.guildBankTabItems} )
+                ( {items.filter((i) => !!i).length} / {Constants.bankTabItems} )
             </span>
         </h4>
         <div class="collection-objects">
diff --git a/apps/frontend/components/items/Items.svelte b/apps/frontend/components/items/Items.svelte
index 73d6fefd9..49e3477d8 100644
--- a/apps/frontend/components/items/Items.svelte
+++ b/apps/frontend/components/items/Items.svelte
@@ -19,6 +19,7 @@
     import Search from './ItemsSearch.svelte';
     import SearchV2 from './search/Search.svelte';
     import Tokens from './tokens/Tokens.svelte';
+    import Warbank from './warbank/Warbank.svelte';
 
     let { params }: ParamsSlugsProps = $props();
 
@@ -56,12 +57,15 @@
             <a href="#/items/tokens" use:active={{ path: /^\/items\/tokens/ }}>Tokens</a>
 
             {#if !sharedState.public}
-                <a
-                    class="b-l m-l"
-                    href="#/items/guild-banks"
-                    use:active={{ path: /^\/items\/guild-banks/ }}>Guild Banks</a
+                <a class="b-l m-l" href="#/items/warbank" use:active={{ path: /^\/items\/warbank/ }}
+                    >Warbank</a
+                >
+                <a href="#/items/guild-banks" use:active={{ path: /^\/items\/guild-banks/ }}
+                    >Guild Banks</a
+                >
+                <a class="b-l m-l" href="#/items/search" use:active={{ path: /^\/items\/search/ }}
+                    >Search</a
                 >
-                <a href="#/items/search" use:active={{ path: /^\/items\/search/ }}>Search</a>
             {/if}
         </nav>
 
@@ -86,6 +90,8 @@
         <SearchV2 />
     {:else if params.slug1 === 'tokens'}
         <Tokens />
+    {:else if params.slug1 === 'warbank'}
+        <Warbank slug1={params.slug2} />
     {:else}
         <CharacterTable skipIgnored={params.slug1 !== 'bags'}>
             <div class="items-pre" slot="preTable">
diff --git a/apps/frontend/components/items/guild-banks/GuildBank.svelte b/apps/frontend/components/items/guild-banks/GuildBank.svelte
index ceb057cd3..7b949b877 100644
--- a/apps/frontend/components/items/guild-banks/GuildBank.svelte
+++ b/apps/frontend/components/items/guild-banks/GuildBank.svelte
@@ -1,28 +1,26 @@
 <script lang="ts">
-    import { afterUpdate } from 'svelte';
     import active from 'svelte-spa-router/active';
 
     import { userState } from '@/user-home/state/user';
     import getSavedRoute from '@/utils/get-saved-route';
-    import type { Guild } from '@/types';
+    import { groupBankItems } from '@/utils/items/group-bank-items';
+    import type { MultiSlugParams } from '@/types';
 
-    import Tab from './Tab.svelte';
+    import BankTab from '../BankTab.svelte';
 
-    export let slug1: string;
-    export let slug2: string;
+    let { slug1, slug2 }: MultiSlugParams = $props();
 
-    let guild: Guild;
-    let maxTab: number;
-    $: {
+    let guild = $derived.by(() => {
         const [realmSlug, guildSlug] = slug1.split('--', 2);
-        guild = Object.values(userState.general.guildById).find(
+        return Object.values(userState.general.guildById).find(
             (guild) => guild.realm.slug === realmSlug && guild.slug === guildSlug
         );
+    });
+    let guildItems = $derived(guild?.items || []);
+    let maxTab = $derived(Math.max(0, ...guildItems.map((item) => item.tabId)));
+    let groupedItems = $derived(groupBankItems(guildItems));
 
-        maxTab = Math.max(0, ...(guild?.items || []).map((item) => item.tabId));
-    }
-
-    afterUpdate(() => {
+    $effect(() => {
         getSavedRoute(`items/guild-banks/${slug1}`, slug2, null, null, 'guild-banks-subnav');
     });
 </script>
@@ -55,10 +53,10 @@
                     <div class="flex-wrapper">
                         {#if slug2 === 'all'}
                             {#each { length: maxTab }, tabIndex}
-                                <Tab {guild} tab={tabIndex + 1} />
+                                <BankTab {groupedItems} tab={tabIndex + 1} />
                             {/each}
                         {:else if slug2.startsWith('tab-')}
-                            <Tab {guild} tab={parseInt(slug2.split('-')[1])} />
+                            <BankTab {groupedItems} tab={parseInt(slug2.split('-')[1])} />
                         {/if}
                     </div>
                 {/if}
diff --git a/apps/frontend/components/items/warbank/Warbank.svelte b/apps/frontend/components/items/warbank/Warbank.svelte
new file mode 100644
index 000000000..1e7a01fb6
--- /dev/null
+++ b/apps/frontend/components/items/warbank/Warbank.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import active from 'svelte-spa-router/active';
+
+    import { userState } from '@/user-home/state/user';
+    import getSavedRoute from '@/utils/get-saved-route';
+    import { groupBankItems } from '@/utils/items/group-bank-items';
+    import type { MultiSlugParams } from '@/types';
+
+    import BankTab from '../BankTab.svelte';
+
+    let { slug1 }: MultiSlugParams = $props();
+
+    let groupedItems = $derived(groupBankItems(userState.general.warbankItems));
+
+    $effect(() => {
+        getSavedRoute(`items/warbank`, slug1, null, null, 'warbank-subnav');
+    });
+</script>
+
+<style lang="scss">
+    .thing-container {
+        padding: 0.75rem;
+    }
+    .flex-wrapper {
+        flex-wrap: wrap;
+        justify-content: start;
+        margin-left: -0.75rem;
+    }
+</style>
+
+<div class="column">
+    <nav class="subnav" id="warbank-subnav">
+        <a href="#/items/warbank/all" use:active>All</a>
+        {#each { length: 5 }, tabIndex}
+            <a href="#/items/warbank/tab-{tabIndex + 1}" use:active>Tab {tabIndex + 1}</a>
+        {/each}
+    </nav>
+
+    {#if slug1}
+        <div class="flex-wrapper">
+            {#if slug1 === 'all'}
+                {#each { length: 5 }, tabIndex}
+                    <BankTab {groupedItems} tab={tabIndex + 1} tabIndexOffByOne={true} />
+                {/each}
+            {:else if slug1.startsWith('tab-')}
+                <BankTab
+                    {groupedItems}
+                    tab={parseInt(slug1.split('-')[1])}
+                    tabIndexOffByOne={true}
+                />
+            {/if}
+        </div>
+    {/if}
+</div>
diff --git a/apps/frontend/components/professions/recipes/AbilityRow.svelte b/apps/frontend/components/professions/recipes/AbilityRow.svelte
index 25dedee1b..7ac388c41 100644
--- a/apps/frontend/components/professions/recipes/AbilityRow.svelte
+++ b/apps/frontend/components/professions/recipes/AbilityRow.svelte
@@ -89,7 +89,7 @@
                 {/if}
 
                 {#if ability.extraRanks.length > 0}
-                    <IconifyWrapper cls="quality1" icon={rankIcons[rank]} scale="1.1" />
+                    <IconifyWrapper cls="quality1" icon={rankIcons[rank]} scale="1.2" />
                 {/if}
             </WowheadLink>
         </td>
diff --git a/apps/frontend/components/tooltips/auction-already-have/TooltipAuctionAlreadyHave.svelte b/apps/frontend/components/tooltips/auction-already-have/TooltipAuctionAlreadyHave.svelte
index a70e72057..1911c1163 100644
--- a/apps/frontend/components/tooltips/auction-already-have/TooltipAuctionAlreadyHave.svelte
+++ b/apps/frontend/components/tooltips/auction-already-have/TooltipAuctionAlreadyHave.svelte
@@ -91,8 +91,9 @@
                 {#each hasItems as [owner, items]}
                     {#each items as item}
                         <tr>
-                            <td class="location drop-shadow">
+                            <td class="location">
                                 <IconifyWrapper
+                                    cls="drop-shadow"
                                     icon={itemLocationIcons[item.location]}
                                     scale="0.9"
                                 />
diff --git a/apps/frontend/components/tooltips/vault-world/TooltipVaultWorld.svelte b/apps/frontend/components/tooltips/vault-world/TooltipVaultWorld.svelte
index df01736a8..ff72ed235 100644
--- a/apps/frontend/components/tooltips/vault-world/TooltipVaultWorld.svelte
+++ b/apps/frontend/components/tooltips/vault-world/TooltipVaultWorld.svelte
@@ -81,6 +81,7 @@
         250: 'Normal Prey', // probably
         251: 'Hard Prey',
         252: 'Nightmare Prey',
+        257: 'Ritual Site',
         258: 'Purging the Vaults',
         259: 'Labyrinth',
         263: 'Labyrinth Boss',
diff --git a/apps/frontend/data/constants.ts b/apps/frontend/data/constants.ts
index bd6e74176..f472f92a1 100644
--- a/apps/frontend/data/constants.ts
+++ b/apps/frontend/data/constants.ts
@@ -5,10 +5,10 @@ export const MAX_TASKS = 100;
 export const MAX_VIEWS = 100;
 
 export abstract class Constants {
+    static readonly bankTabItems = 98;
     static readonly characterMaxLevel: number = 90;
     static readonly charactersPerAccount: number = 70;
     static readonly expansion: number = 11;
-    static readonly guildBankTabItems = 98;
     static readonly lockoutDifficultyMultiplier = 1_000_000;
     static readonly maxRenown: number = 80;
     static readonly restedDuration: number = 10 * 24 * 60 * 60; // 10 days
diff --git a/apps/frontend/types/guild/item.ts b/apps/frontend/types/guild/item.ts
index 1a574a335..6fd1f8e9b 100644
--- a/apps/frontend/types/guild/item.ts
+++ b/apps/frontend/types/guild/item.ts
@@ -1,6 +1,6 @@
 import { ItemLocation } from '@/enums/item-location';
 import type { ItemQuality } from '@/enums/item-quality';
-import type { UserItem } from '../shared';
+import type { UserItem } from '../shared/user-item';
 
 export class GuildItem implements UserItem {
     public bonusIds: number[];
@@ -23,7 +23,7 @@ export class GuildItem implements UserItem {
         public quality: ItemQuality,
         public suffix: number,
         bonusIds?: number[],
-        gemIds?: number[],
+        gemIds?: number[]
     ) {
         this.enchantmentIds = enchantId ? [enchantId] : [];
         this.bonusIds = bonusIds || [];
diff --git a/apps/frontend/user-home/components/reputations/AccountWide.svelte b/apps/frontend/user-home/components/reputations/AccountWide.svelte
index 1c60a1357..bd8801049 100644
--- a/apps/frontend/user-home/components/reputations/AccountWide.svelte
+++ b/apps/frontend/user-home/components/reputations/AccountWide.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
-    import { getRenownData } from './get-renown-data';
-    import { Faction } from '@/enums/faction';
-    import { componentTooltip } from '@/shared/utils/tooltips';
     import type { ManualDataReputationSet } from '@/types/data/manual';
 
-    import FactionIcon from '@/shared/components/images/FactionIcon.svelte';
-    import ProgressBar from '@/components/common/ProgressBar.svelte';
-    import TooltipReputation from '@/components/tooltips/reputation/TooltipReputation.svelte';
-    import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
-    import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
+    import AccountWideReputation from './AccountWideReputation.svelte';
 
     type Props = {
         accountSets: [ManualDataReputationSet[], number][];
@@ -28,144 +21,18 @@
     .account-set + .account-set {
         margin-top: 1rem;
     }
-    .account-rep {
-        align-items: stretch;
-        min-width: 20rem;
-        width: 20rem;
-
-        & + .account-rep {
-            margin-top: 0.5rem;
-        }
-    }
-    .icon {
-        flex-shrink: 0;
-        height: 50px;
-        position: relative;
-        width: 50px;
-
-        .faction {
-            top: -2px;
-            position: absolute;
-            left: 0;
-        }
-    }
-    .data {
-        --bar-height: 1.25rem;
-
-        align-content: center;
-        background: var(--color-thing-background);
-        border: 1px solid var(--image-border-color);
-        border-radius: var(--border-radius);
-        flex-grow: 1;
-        margin-left: var(--padding-size);
-        overflow: hidden;
-
-        :global(> button) {
-            border-bottom: 0;
-            border-left: 0;
-            border-right: 0;
-            padding-bottom: 1px;
-        }
-    }
-    .name {
-        padding-left: 0.6rem;
-    }
-    .level {
-        font-size: 90%;
-        padding-right: 0.6rem;
-        white-space: nowrap;
-        word-spacing: -0.2ch;
-    }
 </style>
 
 <div class="account-container" style:--columns={hasCharacterSets ? '1' : '4'}>
     {#each accountSets as [reputationSets, reputationsIndex] (reputationSets)}
         <div class="account-set no-break">
             {#each reputationSets as reputationSet, reputationSetsIndex (reputationSet)}
-                {@const {
-                    characterParagon,
-                    characterRep,
-                    cls,
-                    dataRep,
-                    renownCurrent,
-                    renownMax,
-                    repTier,
-                } = getRenownData({
-                    reputation: reputationSet,
-                    reputationsIndex,
-                    reputationSetsIndex,
-                    slug,
-                })}
-                {@const hasAlliance = !!reputationSet.alliance}
-                {@const hasHorde = !!reputationSet.horde}
-                {@const repId =
-                    reputationSet.both?.id || reputationSet.alliance?.id || reputationSet.horde?.id}
-                {@const repIcon =
-                    reputationSet.both?.icon ||
-                    reputationSet.alliance?.icon ||
-                    reputationSet.horde?.icon}
-                <div
-                    class="account-rep {cls} flex-wrapper"
-                    data-id={repId}
-                    use:componentTooltip={{
-                        component: TooltipReputation,
-                        propsFunc: () => ({
-                            characterRep: characterRep.value,
-                            dataRep,
-                            renownCurrent,
-                            renownMax,
-                        }),
-                    }}
-                >
-                    <div class="icon">
-                        <WowheadLink type="faction" id={repId}>
-                            <WowthingImage name={repIcon} size={48} border={2} />
-                        </WowheadLink>
-
-                        {#if hasAlliance && !hasHorde}
-                            <div class="faction drop-shadow">
-                                <FactionIcon faction={Faction.Alliance} border={2} />
-                            </div>
-                        {:else if !hasAlliance && hasHorde}
-                            <div class="faction drop-shadow">
-                                <FactionIcon faction={Faction.Horde} border={2} />
-                            </div>
-                        {/if}
-                    </div>
-                    <div class="data">
-                        <div class="flex-wrapper {cls}">
-                            <div class="name text-overflow">{dataRep.name}</div>
-                            <div class="level">
-                                {#if renownMax}
-                                    {Math.floor(renownCurrent)} / {renownMax}
-                                {:else if repTier && repTier.maxValue === 0}
-                                    {repTier.name}
-                                {/if}
-                            </div>
-                        </div>
-
-                        {#if characterParagon && ((renownMax && renownCurrent === renownMax) || repTier?.tier === 1)}
-                            <ProgressBar
-                                title="Paragon"
-                                have={characterParagon.current}
-                                total={characterParagon.max}
-                            />
-                        {:else if repTier && repTier.maxValue > 0}
-                            <ProgressBar
-                                title={repTier.name}
-                                have={repTier.value}
-                                total={repTier.maxValue}
-                            />
-                        {:else if dataRep && renownCurrent < renownMax}
-                            {@const perRenown = dataRep.maxValues[0]}
-                            <ProgressBar
-                                title="Renown"
-                                have={Math.floor((renownCurrent % 1) * perRenown)}
-                                total={perRenown}
-                            />
-                        {/if}
-                    </div>
-                </div>
+                <AccountWideReputation
+                    {reputationsIndex}
+                    {reputationSet}
+                    {reputationSetsIndex}
+                    {slug}
+                />
             {/each}
         </div>
     {/each}
diff --git a/apps/frontend/user-home/components/reputations/AccountWideReputation.svelte b/apps/frontend/user-home/components/reputations/AccountWideReputation.svelte
new file mode 100644
index 000000000..5f4a5db9f
--- /dev/null
+++ b/apps/frontend/user-home/components/reputations/AccountWideReputation.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+    import { getRenownData } from './get-renown-data';
+    import { Faction } from '@/enums/faction';
+    import { componentTooltip } from '@/shared/utils/tooltips';
+    import type { ManualDataReputationSet } from '@/types/data/manual';
+
+    import FactionIcon from '@/shared/components/images/FactionIcon.svelte';
+    import ProgressBar from '@/components/common/ProgressBar.svelte';
+    import TooltipReputation from '@/components/tooltips/reputation/TooltipReputation.svelte';
+    import WowheadLink from '@/shared/components/links/WowheadLink.svelte';
+    import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
+
+    type Props = {
+        reputationsIndex: number;
+        reputationSet: ManualDataReputationSet;
+        reputationSetsIndex: number;
+        slug: string;
+    };
+    let { reputationsIndex, reputationSet, reputationSetsIndex, slug }: Props = $props();
+
+    let { characterParagon, characterRep, cls, dataRep, renownCurrent, renownMax, repTier } =
+        $derived(
+            getRenownData({
+                reputation: reputationSet,
+                reputationsIndex,
+                reputationSetsIndex,
+                slug,
+            })
+        );
+
+    let hasAlliance = $derived(!!reputationSet.alliance);
+    let hasHorde = $derived(!!reputationSet.horde);
+    let repId = $derived(
+        reputationSet.both?.id || reputationSet.alliance?.id || reputationSet.horde?.id
+    );
+    let repIcon = $derived(
+        reputationSet.both?.icon || reputationSet.alliance?.icon || reputationSet.horde?.icon
+    );
+</script>
+
+<style lang="scss">
+    .account-rep {
+        align-items: stretch;
+        min-width: 20rem;
+        width: 20rem;
+
+        &:global(+ .account-rep) {
+            margin-top: 0.5rem;
+        }
+    }
+    .icon {
+        flex-shrink: 0;
+        height: 50px;
+        position: relative;
+        width: 50px;
+
+        .faction {
+            top: -2px;
+            position: absolute;
+            left: 0;
+        }
+    }
+    .data {
+        --bar-height: 1.25rem;
+
+        align-content: center;
+        background: var(--color-thing-background);
+        border: 1px solid var(--image-border-color);
+        border-radius: var(--border-radius);
+        flex-grow: 1;
+        margin-left: var(--padding-size);
+        overflow: hidden;
+
+        :global(> button) {
+            border-bottom: 0;
+            border-left: 0;
+            border-right: 0;
+            padding-bottom: 1px;
+        }
+    }
+    .name {
+        padding-left: 0.6rem;
+    }
+    .level {
+        font-size: 90%;
+        padding-right: 0.6rem;
+        white-space: nowrap;
+        word-spacing: -0.2ch;
+    }
+</style>
+
+<div
+    class="account-rep {cls} flex-wrapper"
+    data-id={repId}
+    use:componentTooltip={{
+        component: TooltipReputation,
+        propsFunc: () => ({
+            characterRep: characterRep.value,
+            dataRep,
+            renownCurrent,
+            renownMax,
+        }),
+    }}
+>
+    <div class="icon">
+        <WowheadLink type="faction" id={repId}>
+            <WowthingImage name={repIcon} size={48} border={2} />
+        </WowheadLink>
+
+        {#if hasAlliance && !hasHorde}
+            <div class="faction drop-shadow">
+                <FactionIcon faction={Faction.Alliance} border={2} />
+            </div>
+        {:else if !hasAlliance && hasHorde}
+            <div class="faction drop-shadow">
+                <FactionIcon faction={Faction.Horde} border={2} />
+            </div>
+        {/if}
+    </div>
+    <div class="data">
+        <div class="flex-wrapper {cls}">
+            <div class="name text-overflow">{dataRep.name}</div>
+            <div class="level">
+                {#if renownMax}
+                    {Math.floor(renownCurrent)} / {renownMax}
+                {:else if repTier && repTier.maxValue === 0}
+                    {repTier.name}
+                {/if}
+            </div>
+        </div>
+
+        {#if characterParagon && ((renownMax && renownCurrent === renownMax) || repTier?.tier === 1)}
+            <ProgressBar
+                title="Paragon"
+                have={characterParagon.current}
+                total={characterParagon.max}
+            />
+        {:else if repTier && repTier.maxValue > 0}
+            <ProgressBar title={repTier.name} have={repTier.value} total={repTier.maxValue} />
+        {:else if dataRep && renownCurrent < renownMax}
+            {@const perRenown = dataRep.maxValues[0]}
+            <ProgressBar
+                title="Renown"
+                have={Math.floor((renownCurrent % 1) * perRenown)}
+                total={perRenown}
+            />
+        {/if}
+    </div>
+</div>
diff --git a/apps/frontend/utils/items/group-bank-items.ts b/apps/frontend/utils/items/group-bank-items.ts
new file mode 100644
index 000000000..a874ed741
--- /dev/null
+++ b/apps/frontend/utils/items/group-bank-items.ts
@@ -0,0 +1,22 @@
+import groupBy from 'lodash/groupBy';
+import keyBy from 'lodash/keyBy';
+
+import { Constants } from '@/data/constants';
+import { getNumberKeyedEntries } from '@/utils/get-number-keyed-entries';
+import type { UserItem } from '@/types/shared';
+
+export function groupBankItems(items: UserItem[]) {
+    const ret: Record<number, UserItem[]> = {};
+
+    const itemsByTab = groupBy(items || [], (item) => item.containerId);
+    for (const [tabId, tabItems] of getNumberKeyedEntries(itemsByTab)) {
+        ret[tabId] = [];
+
+        const itemBySlot = keyBy(tabItems, (item) => item.slot);
+        for (let slot = 1; slot <= Constants.bankTabItems; slot++) {
+            ret[tabId].push(itemBySlot[slot]);
+        }
+    }
+
+    return ret;
+}