frontend/src/components/manage/StoreAvailableItemsManager.jsx

@@ -213,11 +213,8 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
                               {imageSrc ? (
                                 <img src={imageSrc} alt="" className="store-available-items-thumb" />
                               ) : (
-                                <span
-                                  className="store-available-items-thumb store-available-items-thumb-placeholder"
-                                  aria-hidden="true"
-                                >
-                                  {"\uD83D\uDCE6"}
+                                <span className="store-available-items-thumb store-available-items-thumb-placeholder">
+                                  {item.item_name?.slice(0, 1).toUpperCase() || "?"}
                                 </span>
                               )}
                               <div className="store-available-items-copy">

frontend/src/styles/components/manage/StoreAvailableItemsManager.css

@@ -153,11 +153,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: var(--border-width-medium) solid var(--color-border-light);
-  background: var(--color-gray-100);
-  color: var(--color-border-medium);
-  font-size: 1.75rem;
-  line-height: 1;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-semibold);
 }
 
 .store-available-items-copy {

frontend/tests/available-items-catalog.spec.ts

@@ -36,15 +36,15 @@ test("manage stores opens a modal to edit and delete household store items", asy
     },
   ];
 
-  await page.route("**/households/1/stores", async (route) => {
+  await page.route("**/stores", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
-      body: JSON.stringify([{ id: 10, household_store_id: 100, name: "Costco", is_default: true }]),
+      body: JSON.stringify([{ id: 10, name: "Costco" }]),
     });
   });
 
-  await page.route("**/households/1/locations/10/available-items*", async (route) => {
+  await page.route("**/households/1/stores/10/available-items*", async (route) => {
     const request = route.request();
     const url = new URL(request.url());
     const query = (url.searchParams.get("query") || "").toLowerCase();
@@ -62,7 +62,7 @@ test("manage stores opens a modal to edit and delete household store items", asy
     await route.fulfill({ status: 500 });
   });
 
-  await page.route("**/households/1/locations/10/available-items/777", async (route) => {
+  await page.route("**/households/1/stores/10/available-items/777", async (route) => {
     if (route.request().method() === "PATCH") {
       availableItems = availableItems.map((item) =>
         item.item_id === 777
@@ -89,7 +89,7 @@ test("manage stores opens a modal to edit and delete household store items", asy
     await route.fulfill({ status: 500 });
   });
 
-  await page.route("**/households/1/locations/10/available-items/501", async (route) => {
+  await page.route("**/households/1/stores/10/available-items/501", async (route) => {
     if (route.request().method() === "DELETE") {
       availableItems = availableItems.filter((item) => item.item_id !== 501);
       await route.fulfill({
@@ -115,7 +115,6 @@ test("manage stores opens a modal to edit and delete household store items", asy
   await expect(managerModal).toBeVisible();
   await expect(managerModal.getByText("milk", { exact: true })).toBeVisible();
   await expect(managerModal.getByText("apples", { exact: true })).toBeVisible();
-  await expect(managerModal.locator(".store-available-items-thumb-placeholder").first()).toHaveText("\uD83D\uDCE6");
 
   await managerModal.locator(".store-items-table-row").filter({ hasText: "apples" }).getByRole("button", { name: "Edit Settings" }).click();
   const editorModal = page.locator(".available-item-editor-modal");
@@ -157,7 +156,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/locations/10/list/recent", async (route) => {
+  await page.route("**/households/1/stores/10/list/recent", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
@@ -165,7 +164,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/locations/10/list/suggestions**", async (route) => {
+  await page.route("**/households/1/stores/10/list/suggestions**", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",
@@ -173,7 +172,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/locations/10/list/item**", async (route) => {
+  await page.route("**/households/1/stores/10/list/item**", async (route) => {
     await route.fulfill({
       status: 404,
       contentType: "application/json",
@@ -181,7 +180,7 @@ test("grocery page remains unchanged and does not show a store items picker", as
     });
   });
 
-  await page.route("**/households/1/locations/10/list", async (route) => {
+  await page.route("**/households/1/stores/10/list", async (route) => {
     await route.fulfill({
       status: 200,
       contentType: "application/json",