ThingEngineering · madcowfred · May 17, 2026 · May 17, 2026
diff --git a/apps/frontend/components/home/HomeTable.svelte b/apps/frontend/components/home/HomeTable.svelte
@@ -28,6 +28,7 @@
     import RowProfessions from './table/row/HomeTableRowProfessions.svelte';
     import RowProfessionConcentration from './table/row/HomeTableRowProfessionConcentration.svelte';
     import RowProfessionCooldowns from './table/row/HomeTableRowProfessionCooldowns.svelte';
+    import RowProfessionEquipment from './table/row/HomeTableRowProfessionEquipment.svelte';
     import RowProfessionMoxie from './table/row/HomeTableRowProfessionMoxie.svelte';
     import RowProfessionsV2 from './table/row/HomeTableRowProfessionsV2.svelte';
     import RowProfessionWorkOrders from './table/row/HomeTableRowProfessionWorkOrders.svelte';
@@ -124,6 +125,8 @@
                     <RowProfessionConcentration {character} expansion={9} />
                 {:else if field === 'professionCooldowns'}
                     <RowProfessionCooldowns {character} />
+                {:else if field === 'professionEquipment'}
+                    <RowProfessionEquipment {character} />
                 {:else if field === 'professionMoxie'}
                     <RowProfessionMoxie {character} />
                 {:else if field === 'professionWorkOrders'}

diff --git a/apps/frontend/components/home/table/HomeTableGroupHead.svelte b/apps/frontend/components/home/table/HomeTableGroupHead.svelte
@@ -218,6 +218,8 @@
                 data-tooltip="Profession Cooldowns"
                 onclick={() => setSortState()}>CDs</td
             >
+        {:else if field === 'professionEquipment'}
+            <td>Equip</td>
         {:else if field === 'professionMoxie'}
             <td>Moxie</td>
         {:else if field === 'professionWorkOrders'}

diff --git a/apps/frontend/components/home/table/row/HomeTableRowProfessionEquipment.svelte b/apps/frontend/components/home/table/row/HomeTableRowProfessionEquipment.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+    import sortBy from 'lodash/sortBy';
+
+    import { Constants } from '@/data/constants';
+    import { imageStrings } from '@/data/icons';
+    import { isCraftingProfession, professionIdToSlug } from '@/data/professions';
+    import { wowthingData } from '@/shared/stores/data';
+    import { componentTooltip } from '@/shared/utils/tooltips';
+    import { getNumberKeys } from '@/utils/get-number-keyed-entries';
+    import { getProfessionEquipment, getProfessionSortKey } from '@/utils/professions';
+    import type { CharacterProps } from '@/types/props';
+
+    import Tooltip from '@/components/tooltips/professions/TooltipProfessions.svelte';
+    import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
+    import YesNoIcon from '@/shared/components/icons/YesNoIcon.svelte';
+
+    let { character }: CharacterProps = $props();
+
+    let primaryProfessions = $derived(
+        sortBy(
+            getNumberKeys(character.professions).filter(
+                (professionId) => isCraftingProfession[professionId]
+            ),
+            (professionId) =>
+                getProfessionSortKey(wowthingData.static.professionById.get(professionId))
+        )
+    );
+</script>
+
+<style lang="scss">
+    td {
+        border-left: 1px solid var(--border-color);
+        padding-left: var(--padding-size);
+        padding-right: var(--padding-size);
+    }
+    .flex-wrapper {
+        // --image-margin-top: -4px !important;
+    }
+    .profession {
+        align-items: center;
+        display: flex;
+        gap: 0.1rem;
+
+        &:not(:first-child) {
+            border-left: 1px solid var(--border-color);
+            margin-left: var(--padding-size);
+            padding-left: var(--padding-size);
+        }
+        > * {
+            width: 1.2rem;
+        }
+    }
+    .slot {
+        border: 2px solid var(--image-border-color);
+        border-radius: var(--border-radius);
+        line-height: 1;
+        padding: 2px 0;
+        text-align: center;
+
+        &:nth-child(2) {
+            margin-left: 0.1rem;
+        }
+    }
+</style>
+
+<td>
+    <div class="flex-wrapper">
+        {#each primaryProfessions as professionId (professionId)}
+            {@const equippedItems = getProfessionEquipment(character, professionId)}
+            <div
+                class="profession"
+                use:componentTooltip={{
+                    component: Tooltip,
+                    propsFunc: () => ({
+                        character,
+                        profession: wowthingData.static.professionById.get(professionId),
+                        showLevels: false,
+                    }),
+                }}
+            >
+                <WowthingImage
+                    name={imageStrings[professionIdToSlug[professionId]]}
+                    size={20}
+                    border={1}
+                />
+                {#each { length: 3 }, index}
+                    {@const equippedItem = equippedItems[index]}
+                    {#if equippedItem}
+                        {@const item = wowthingData.items.items[equippedItem.itemId]}
+                        <div
+                            class="slot {item?.expansion !== Constants.expansion
+                                ? 'border-fail'
+                                : `quality${equippedItem.quality}-border`}"
+                        >
+                            {equippedItem.craftedQuality}
+                        </div>
+                    {:else}
+                        <YesNoIcon state={false} useStatusColors={true} />
+                    {/if}
+                {/each}
+            </div>
+        {/each}
+    </div>
+</td>
diff --git a/apps/frontend/components/professions/Equipment.svelte b/apps/frontend/components/professions/Equipment.svelte
@@ -7,8 +7,8 @@
     import CraftedQualityIcon from '@/shared/components/images/CraftedQualityIcon.svelte';
     import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
 
-    type Props = CharacterProps & { profession: StaticDataProfession };
-    let { character, profession }: Props = $props();
+    type Props = CharacterProps & { profession: StaticDataProfession; size?: number };
+    let { character, profession, size = 48 }: Props = $props();
 
     let equippedItems = $derived(getProfessionEquipment(character, profession.id));
     let length = $derived(
@@ -26,9 +26,9 @@
         justify-content: center;
     }
     .item {
-        height: 52px;
+        height: calc(var(--size) + 4px);
         position: relative;
-        width: 52px;
+        width: calc(var(--size) + 4px);
     }
     .item-level {
         bottom: 2px;
@@ -43,18 +43,18 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        height: 52px;
-        width: 52px;
+        height: calc(var(--size) + 4px);
+        width: calc(var(--size) + 4px);
     }
 </style>
 
-<div class="item-container">
+<div class="item-container" style:--size={`${size}px`}>
     {#each { length }, index}
         {@const equippedItem = equippedItems[index]}
         {#if equippedItem}
             <div class="item quality{equippedItem.quality}">
                 <a href={getItemUrl(equippedItem)}>
-                    <WowthingImage name="item/{equippedItem.itemId}" size={48} border={2} />
+                    <WowthingImage name="item/{equippedItem.itemId}" {size} border={2} />
 
                     <span class="item-level pill abs-center">{equippedItem.itemLevel}</span>
 

diff --git a/apps/frontend/components/professions/equipment/TableRow.svelte b/apps/frontend/components/professions/equipment/TableRow.svelte
@@ -5,6 +5,7 @@
     import { imageStrings } from '@/data/icons';
     import { uiIcons } from '@/shared/icons';
     import { professionIdToSlug } from '@/data/professions';
+    import { settingsState } from '@/shared/state/settings.svelte';
     import { wowthingData } from '@/shared/stores/data';
     import { getNameForFaction } from '@/utils/get-name-for-faction';
     import { getProfessionEquipment, getProfessionSortKey } from '@/utils/professions';
@@ -16,9 +17,8 @@
 
     import Empty from '../../items/ItemsEmpty.svelte';
     import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
-    import Item from '../../items/ItemsItem.svelte';
+    import Item from '@/components/items/ItemsItem.svelte';
     import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
-    import { settingsState } from '@/shared/state/settings.svelte';
 
     let { character, professionId, slug }: CharacterProps & { professionId: number; slug: string } =
         $props();

diff --git a/apps/frontend/components/tooltips/professions/TooltipProfessions.svelte b/apps/frontend/components/tooltips/professions/TooltipProfessions.svelte
@@ -11,6 +11,7 @@
 
     export let character: Character;
     export let profession: StaticDataProfession;
+    export let showLevels = true;
 
     let name: string;
     let subProfessions: [string, number, number][];
@@ -55,7 +56,8 @@
         text-align: center;
     }
     .equipment {
-        margin: 0.5rem 0;
+        margin: 0.25rem 0;
+        padding: 0 0.25rem;
     }
 </style>
 
@@ -70,22 +72,26 @@
         {name}
     </h5>
 
-    <table class="table-striped">
-        <tbody>
-            {#each subProfessions as [name, current, max]}
-                <tr>
-                    <td class="name">{name}</td>
-                    {#if max > 0}
-                        <td class="number {getPercentClass((current / max) * 100)}">{current}</td>
-                        <td class="separator">/</td>
-                        <td class="number {getPercentClass((current / max) * 100)}">{max}</td>
-                    {:else}
-                        <td class="status-fail" colspan="3">--------</td>
-                    {/if}
-                </tr>
-            {/each}
-        </tbody>
-    </table>
+    {#if showLevels}
+        <table class="table-striped">
+            <tbody>
+                {#each subProfessions as [name, current, max]}
+                    <tr>
+                        <td class="name">{name}</td>
+                        {#if max > 0}
+                            <td class="number {getPercentClass((current / max) * 100)}"
+                                >{current}</td
+                            >
+                            <td class="separator">/</td>
+                            <td class="number {getPercentClass((current / max) * 100)}">{max}</td>
+                        {:else}
+                            <td class="status-fail" colspan="3">--------</td>
+                        {/if}
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    {/if}
 
     <div class="equipment">
         <Equipment {character} {profession} />

diff --git a/apps/frontend/user-home/components/settings/data.ts b/apps/frontend/user-home/components/settings/data.ts
@@ -38,6 +38,7 @@ export const homeChoices: SettingsChoice[] = [
     { id: 'professionConcentrationTWW', name: 'Profession Concentration [TWW]' },
     { id: 'professionConcentrationDF', name: 'Profession Concentration [DF]' },
     { id: 'professionCooldowns', name: 'Profession Cooldowns' },
+    { id: 'professionEquipment', name: 'Profession Equipment ' },
     { id: 'professionMoxie', name: 'Profession Moxie' },
     { id: 'professionWorkOrders', name: 'Profession Work Orders' },
     { id: 'progress', name: 'Progress' },

diff --git a/packages/csharp-lib/Models/ApplicationUserSettings.cs b/packages/csharp-lib/Models/ApplicationUserSettings.cs
@@ -108,6 +108,7 @@ public class ApplicationUserSettings
         "professionConcentrationTWW",
         "professionConcentrationDF",
         "professionCooldowns",
+        "professionEquipment",
         "professionMoxie",
         "professionWorkOrders",
         "professions",