diff --git a/src/App.jsx b/src/App.jsx
index bebc5fc..aa74504 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -19,10 +19,15 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<WritePostPage />} />
+        <Route path="/" element={<EggDashboardPage />} />
         <Route path="/write" element={<WritePostPage />} />
+        <Route path="/nest" element={<EggDashboardPage />} />
         <Route path="/archive" element={<MemoryArchivePage />} />
         <Route path="/posts/:id" element={<ViewPostPage />} />
+        <Route path="/shop" element={<ShopPage />} />
+        <Route path="/inventory" element={<InventoryPage />} />
+        <Route path="/profile" element={<ProfilePage />} />
+        
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/api/eggApi.js b/src/api/eggApi.js
new file mode 100644
index 0000000..5dcbf86
--- /dev/null
+++ b/src/api/eggApi.js
@@ -0,0 +1,111 @@
+const EGG_STORAGE_KEY = "memory_egg_egg";
+
+const defaultEgg = {
+  egg_id: 1,
+  user_id: 1,
+  stage: 1,
+  glow: 0,
+  warmth: 0,
+  weight: 0,
+  active_background_id: null,
+  active_music_id: null,
+  active_decoration_id: null,
+  updated_at: new Date().toISOString(),
+};
+
+function loadEggFromStorage() {
+  const savedEgg = localStorage.getItem(EGG_STORAGE_KEY);
+
+  if (!savedEgg) {
+    localStorage.setItem(EGG_STORAGE_KEY, JSON.stringify(defaultEgg));
+    return defaultEgg;
+  }
+
+  const parsedEgg = JSON.parse(savedEgg);
+
+  if (!parsedEgg || typeof parsedEgg !== "object") {
+    localStorage.setItem(EGG_STORAGE_KEY, JSON.stringify(defaultEgg));
+    return defaultEgg;
+  }
+
+  return {
+    ...defaultEgg,
+    ...parsedEgg,
+    stage: 1,
+  };
+}
+
+function saveEggToStorage(egg) {
+  localStorage.setItem(EGG_STORAGE_KEY, JSON.stringify(egg));
+}
+
+function getEmptyStats() {
+  return {
+    glow: 0,
+    warmth: 0,
+    weight: 0,
+  };
+}
+
+function getDecorationStats(decorationItem) {
+  const stats = getEmptyStats();
+
+  if (!decorationItem || decorationItem.item_type !== "decoration") {
+    return stats;
+  }
+
+  if (!decorationItem.effect_type || !decorationItem.effect_value) {
+    return stats;
+  }
+
+  if (!Object.hasOwn(stats, decorationItem.effect_type)) {
+    return stats;
+  }
+
+  return {
+    ...stats,
+    [decorationItem.effect_type]: Number(decorationItem.effect_value),
+  };
+}
+
+function findEquippedItemByType(inventoryItems, itemType) {
+  return inventoryItems.find(
+    (item) => item.item_type === itemType && item.is_equipped
+  );
+}
+
+export async function getEgg() {
+  return loadEggFromStorage();
+}
+
+export async function recalculateEggFromInventory(inventoryItems) {
+  const egg = loadEggFromStorage();
+
+  const equippedBackground = findEquippedItemByType(
+    inventoryItems,
+    "background"
+  );
+  const equippedMusic = findEquippedItemByType(inventoryItems, "music");
+  const equippedDecoration = findEquippedItemByType(
+    inventoryItems,
+    "decoration"
+  );
+
+  const decorationStats = getDecorationStats(equippedDecoration);
+
+  const updatedEgg = {
+    ...egg,
+    stage: 1,
+    glow: decorationStats.glow,
+    warmth: decorationStats.warmth,
+    weight: decorationStats.weight,
+    active_background_id: equippedBackground?.item_id ?? null,
+    active_music_id: equippedMusic?.item_id ?? null,
+    active_decoration_id: equippedDecoration?.item_id ?? null,
+    updated_at: new Date().toISOString(),
+  };
+
+  saveEggToStorage(updatedEgg);
+
+  return updatedEgg;
+}
\ No newline at end of file
diff --git a/src/api/inventoryApi.js b/src/api/inventoryApi.js
new file mode 100644
index 0000000..db47ee2
--- /dev/null
+++ b/src/api/inventoryApi.js
@@ -0,0 +1,169 @@
+const USER_ITEMS_STORAGE_KEY = "memory_egg_user_items";
+const USER_ID = 1;
+
+function loadUserItemsFromStorage() {
+  const savedUserItems = localStorage.getItem(USER_ITEMS_STORAGE_KEY);
+
+  if (!savedUserItems) {
+    localStorage.setItem(USER_ITEMS_STORAGE_KEY, JSON.stringify([]));
+    return [];
+  }
+
+  const parsedUserItems = JSON.parse(savedUserItems);
+
+  if (!Array.isArray(parsedUserItems)) {
+    localStorage.setItem(USER_ITEMS_STORAGE_KEY, JSON.stringify([]));
+    return [];
+  }
+
+  return parsedUserItems;
+}
+
+function saveUserItemsToStorage(userItems) {
+  localStorage.setItem(USER_ITEMS_STORAGE_KEY, JSON.stringify(userItems));
+}
+
+function buildInventoryView(userItem, shopItem) {
+  return {
+    user_item_id: userItem.user_item_id,
+    user_id: userItem.user_id,
+    item_id: userItem.item_id,
+    quantity: userItem.quantity,
+    is_equipped: userItem.is_equipped,
+    purchased_at: userItem.purchased_at,
+
+    name: shopItem.name,
+    item_type: shopItem.item_type,
+    description: shopItem.description,
+    price: shopItem.price,
+    effect_type: shopItem.effect_type,
+    effect_value: shopItem.effect_value,
+    asset_url: shopItem.asset_url,
+    is_active: shopItem.is_active,
+  };
+}
+
+/* exported api logics*/
+
+export async function getUserItems() {
+  return loadUserItemsFromStorage();
+}
+
+export async function getInventoryItems(shopItems) {
+  const userItems = loadUserItemsFromStorage();
+
+  return userItems
+    .map((userItem) => {
+      const matchingShopItem = shopItems.find(
+        (shopItem) => Number(shopItem.item_id) === Number(userItem.item_id)
+      );
+
+      if (!matchingShopItem) {
+        return null;
+      }
+
+      return buildInventoryView(userItem, matchingShopItem);
+    })
+    .filter(Boolean);
+}
+
+export async function addUserItem(itemId) {
+  const userItems = loadUserItemsFromStorage();
+
+  const existingUserItem = userItems.find(
+    (userItem) => Number(userItem.item_id) === Number(itemId)
+  );
+
+  if (existingUserItem) {
+    const updatedUserItems = userItems.map((userItem) => {
+      if (Number(userItem.item_id) !== Number(itemId)) {
+        return userItem;
+      }
+
+      return {
+        ...userItem,
+        quantity: userItem.quantity + 1,
+      };
+    });
+
+    saveUserItemsToStorage(updatedUserItems);
+
+    return updatedUserItems;
+  }
+
+  const newUserItem = {
+    user_item_id: Date.now(),
+    user_id: USER_ID,
+    item_id: Number(itemId),
+    quantity: 1,
+    is_equipped: false,
+    purchased_at: new Date().toISOString(),
+  };
+
+  const updatedUserItems = [newUserItem, ...userItems];
+
+  saveUserItemsToStorage(updatedUserItems);
+
+  return updatedUserItems;
+}
+
+export async function equipUserItem(userItemId, shopItems) {
+  const userItems = loadUserItemsFromStorage();
+
+  const selectedUserItem = userItems.find(
+    (userItem) => Number(userItem.user_item_id) === Number(userItemId)
+  );
+
+  if (!selectedUserItem) {
+    throw new Error("Inventory item not found.");
+  }
+
+  const selectedShopItem = shopItems.find(
+    (shopItem) => Number(shopItem.item_id) === Number(selectedUserItem.item_id)
+  );
+
+  if (!selectedShopItem) {
+    throw new Error("Shop item data not found.");
+  }
+
+  const selectedItemType = selectedShopItem.item_type;
+
+  const updatedUserItems = userItems.map((userItem) => {
+    const relatedShopItem = shopItems.find(
+      (shopItem) => Number(shopItem.item_id) === Number(userItem.item_id)
+    );
+
+    if (!relatedShopItem || relatedShopItem.item_type !== selectedItemType) {
+      return userItem;
+    }
+
+    return {
+      ...userItem,
+      is_equipped:
+        Number(userItem.user_item_id) === Number(selectedUserItem.user_item_id),
+    };
+  });
+
+  saveUserItemsToStorage(updatedUserItems);
+
+  return updatedUserItems;
+}
+
+export async function unequipUserItem(userItemId) {
+  const userItems = loadUserItemsFromStorage();
+
+  const updatedUserItems = userItems.map((userItem) => {
+    if (Number(userItem.user_item_id) !== Number(userItemId)) {
+      return userItem;
+    }
+
+    return {
+      ...userItem,
+      is_equipped: false,
+    };
+  });
+
+  saveUserItemsToStorage(updatedUserItems);
+
+  return updatedUserItems;
+}
\ No newline at end of file
diff --git a/src/api/shopApi.js b/src/api/shopApi.js
new file mode 100644
index 0000000..8b0f2aa
--- /dev/null
+++ b/src/api/shopApi.js
@@ -0,0 +1,203 @@
+import {
+  addUserItem,
+  getInventoryItems,
+  getUserItems,
+} from "./inventoryApi";
+import { spendWill } from "./userApi";
+
+const SHOP_ITEMS_STORAGE_KEY = "memory_egg_shop_items";
+
+const defaultShopItems = [
+  {
+    item_id: 1,
+    name: "Starry Night",
+    item_type: "background",
+    description: "A quiet night sky for your egg's resting place.",
+    price: 150,
+    effect_type: null,
+    effect_value: null,
+    asset_url: null,
+    is_active: true,
+  },
+  {
+    item_id: 2,
+    name: "Good Morning",
+    item_type: "background",
+    description: "A warm morning background filled with soft light.",
+    price: 180,
+    effect_type: null,
+    effect_value: null,
+    asset_url: null,
+    is_active: true,
+  },
+  {
+    item_id: 3,
+    name: "Dreamy Cloud",
+    item_type: "background",
+    description: "A gentle cloudy scene for slow reflection.",
+    price: 130,
+    effect_type: null,
+    effect_value: null,
+    asset_url: null,
+    is_active: true,
+  },
+  {
+    item_id: 4,
+    name: "Warm Blanket",
+    item_type: "decoration",
+    description: "A soft blanket that gives the egg warmth.",
+    price: 120,
+    effect_type: "warmth",
+    effect_value: "15",
+    asset_url: null,
+    is_active: true,
+  },
+  {
+    item_id: 5,
+    name: "Tiny Lamp",
+    item_type: "decoration",
+    description: "A small lamp that helps the egg glow softly.",
+    price: 180,
+    effect_type: "glow",
+    effect_value: "15",
+    asset_url: null,
+    is_active: true,
+  },
+  {
+    item_id: 6,
+    name: "Shell Ribbon",
+    item_type: "decoration",
+    description: "A decorative ribbon that gives the egg weight.",
+    price: 220,
+    effect_type: "weight",
+    effect_value: "15",
+    asset_url: null,
+    is_active: true,
+  },
+  {
+    item_id: 7,
+    name: "Rainy Lullaby",
+    item_type: "music",
+    description: "A quiet rainy melody for writing memories.",
+    price: 160,
+    effect_type: null,
+    effect_value: null,
+    asset_url: null,
+    is_active: true,
+  },
+  {
+    item_id: 8,
+    name: "Morning Piano",
+    item_type: "music",
+    description: "A calm piano piece for beginning the day.",
+    price: 190,
+    effect_type: null,
+    effect_value: null,
+    asset_url: null,
+    is_active: true,
+  },
+  {
+    item_id: 9,
+    name: "Soft Static",
+    item_type: "music",
+    description: "A soft ambient track for quiet focus.",
+    price: 100,
+    effect_type: null,
+    effect_value: null,
+    asset_url: null,
+    is_active: true,
+  },
+];
+
+function loadShopItemsFromStorage() {
+  const savedShopItems = localStorage.getItem(SHOP_ITEMS_STORAGE_KEY);
+
+  if (!savedShopItems) {
+    localStorage.setItem(
+      SHOP_ITEMS_STORAGE_KEY,
+      JSON.stringify(defaultShopItems)
+    );
+
+    return defaultShopItems;
+  }
+
+  const parsedShopItems = JSON.parse(savedShopItems);
+
+  if (!Array.isArray(parsedShopItems)) {
+    localStorage.setItem(
+      SHOP_ITEMS_STORAGE_KEY,
+      JSON.stringify(defaultShopItems)
+    );
+
+    return defaultShopItems;
+  }
+
+  return parsedShopItems;
+}
+
+function decorateShopItems(shopItems, userItems) {
+  return shopItems.map((shopItem) => {
+    const ownedUserItem = userItems.find(
+      (userItem) => Number(userItem.item_id) === Number(shopItem.item_id)
+    );
+
+    return {
+      ...shopItem,
+      owned: Boolean(ownedUserItem),
+      equipped: Boolean(ownedUserItem?.is_equipped),
+      user_item_id: ownedUserItem?.user_item_id ?? null,
+    };
+  });
+}
+
+/* exported api logic */
+
+export async function getRawShopItems() {
+  return loadShopItemsFromStorage();
+}
+
+export async function getShopItems() {
+  const shopItems = loadShopItemsFromStorage();
+  const userItems = await getUserItems();
+
+  return decorateShopItems(shopItems, userItems);
+}
+
+export async function purchaseShopItem(itemId) {
+  const shopItems = loadShopItemsFromStorage();
+
+  const selectedItem = shopItems.find(
+    (shopItem) => Number(shopItem.item_id) === Number(itemId)
+  );
+
+  if (!selectedItem) {
+    throw new Error("Shop item not found.");
+  }
+
+  if (!selectedItem.is_active) {
+    throw new Error("This item is not available.");
+  }
+
+  const userItems = await getUserItems();
+
+  const alreadyOwned = userItems.some(
+    (userItem) => Number(userItem.item_id) === Number(itemId)
+  );
+
+  if (alreadyOwned) {
+    throw new Error("You already own this item.");
+  }
+
+  const updatedUser = await spendWill(selectedItem.price);
+  await addUserItem(selectedItem.item_id);
+
+  const updatedShopItems = await getShopItems();
+  const updatedInventoryItems = await getInventoryItems(shopItems);
+
+  return {
+    purchasedItem: selectedItem,
+    user: updatedUser,
+    shopItems: updatedShopItems,
+    inventoryItems: updatedInventoryItems,
+  };
+}
\ No newline at end of file
diff --git a/src/api/userApi.js b/src/api/userApi.js
index 7e5124d..f0e1efd 100644
--- a/src/api/userApi.js
+++ b/src/api/userApi.js
@@ -4,7 +4,7 @@ const defaultUser = {
   user_id: 1,
   email: "demo@nacimiento.app",
   nickname: "Wanderer",
-  will_balance: 0,
+  will_balance: 999,
   created_at: new Date().toISOString(),
 };
 
@@ -42,7 +42,7 @@ export async function addWill(amount) {
 
   const updatedUser = {
     ...user,
-    will_balance: user.will_balance + amount,
+    will_balance: user.will_balance + Number(amount),
   };
 
   saveUserToStorage(updatedUser);
@@ -52,14 +52,15 @@ export async function addWill(amount) {
 
 export async function spendWill(amount) {
   const user = loadUserFromStorage();
+  const numericAmount = Number(amount);
 
-  if (user.will_balance < amount) {
+  if (user.will_balance < numericAmount) {
     throw new Error("Not enough Will.");
   }
 
   const updatedUser = {
     ...user,
-    will_balance: user.will_balance - amount,
+    will_balance: user.will_balance - numericAmount,
   };
 
   saveUserToStorage(updatedUser);
diff --git a/src/hooks/useEgg.js b/src/hooks/useEgg.js
new file mode 100644
index 0000000..676d285
--- /dev/null
+++ b/src/hooks/useEgg.js
@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useState } from "react";
+import { getEgg, recalculateEggFromInventory } from "../api/eggApi";
+
+export function useEgg() {
+  const [egg, setEgg] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const reloadEgg = useCallback(async () => {
+    setLoading(true);
+
+    const data = await getEgg();
+
+    setEgg(data);
+    setLoading(false);
+
+    return data;
+  }, []);
+
+  const recalculateFromInventory = useCallback(async (inventoryItems) => {
+    const updatedEgg = await recalculateEggFromInventory(inventoryItems);
+
+    setEgg(updatedEgg);
+
+    return updatedEgg;
+  }, []);
+
+  useEffect(() => {
+    let ignore = false;
+
+    async function loadInitialEgg() {
+      const data = await getEgg();
+
+      if (!ignore) {
+        setEgg(data);
+        setLoading(false);
+      }
+    }
+
+    loadInitialEgg();
+
+    return () => {
+      ignore = true;
+    };
+  }, []);
+
+  return {
+    egg,
+    loading,
+    reloadEgg,
+    recalculateFromInventory,
+  };
+}
\ No newline at end of file
diff --git a/src/hooks/useInventory.js b/src/hooks/useInventory.js
new file mode 100644
index 0000000..865f01f
--- /dev/null
+++ b/src/hooks/useInventory.js
@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useState } from "react";
+import { getRawShopItems } from "../api/shopApi";
+import {
+  equipUserItem,
+  getInventoryItems,
+  unequipUserItem,
+} from "../api/inventoryApi";
+
+export function useInventory() {
+  const [inventoryItems, setInventoryItems] = useState([]);
+  const [shopItems, setShopItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const reloadInventory = useCallback(async () => {
+    setLoading(true);
+
+    const rawShopItems = await getRawShopItems();
+    const items = await getInventoryItems(rawShopItems);
+
+    setShopItems(Array.isArray(rawShopItems) ? rawShopItems : []);
+    setInventoryItems(Array.isArray(items) ? items : []);
+    setLoading(false);
+
+    return {
+      shopItems: Array.isArray(rawShopItems) ? rawShopItems : [],
+      inventoryItems: Array.isArray(items) ? items : [],
+    };
+  }, []);
+
+  const equipItem = useCallback(async (userItemId) => {
+    setErrorMessage("");
+
+    try {
+      const rawShopItems = await getRawShopItems();
+
+      await equipUserItem(userItemId, rawShopItems);
+
+      const updatedInventoryItems = await getInventoryItems(rawShopItems);
+
+      setShopItems(Array.isArray(rawShopItems) ? rawShopItems : []);
+      setInventoryItems(
+        Array.isArray(updatedInventoryItems) ? updatedInventoryItems : []
+      );
+
+      return updatedInventoryItems;
+    } catch (error) {
+      setErrorMessage(error.message);
+      throw error;
+    }
+  }, []);
+
+  const unequipItem = useCallback(async (userItemId) => {
+    setErrorMessage("");
+
+    try {
+      await unequipUserItem(userItemId);
+
+      const rawShopItems = await getRawShopItems();
+      const updatedInventoryItems = await getInventoryItems(rawShopItems);
+
+      setShopItems(Array.isArray(rawShopItems) ? rawShopItems : []);
+      setInventoryItems(
+        Array.isArray(updatedInventoryItems) ? updatedInventoryItems : []
+      );
+
+      return updatedInventoryItems;
+    } catch (error) {
+      setErrorMessage(error.message);
+      throw error;
+    }
+  }, []);
+
+  useEffect(() => {
+    let ignore = false;
+
+    async function loadInitialInventory() {
+      setLoading(true);
+
+      const rawShopItems = await getRawShopItems();
+      const items = await getInventoryItems(rawShopItems);
+
+      if (!ignore) {
+        setShopItems(Array.isArray(rawShopItems) ? rawShopItems : []);
+        setInventoryItems(Array.isArray(items) ? items : []);
+        setLoading(false);
+      }
+    }
+
+    loadInitialInventory();
+
+    return () => {
+      ignore = true;
+    };
+  }, []);
+
+  return {
+    inventoryItems,
+    shopItems,
+    loading,
+    errorMessage,
+    equipItem,
+    unequipItem,
+    reloadInventory,
+  };
+}
\ No newline at end of file
diff --git a/src/hooks/usePosts.js b/src/hooks/usePosts.js
index d1f9a1d..38e65d7 100644
--- a/src/hooks/usePosts.js
+++ b/src/hooks/usePosts.js
@@ -18,10 +18,15 @@ export function usePosts() {
 
   const addPost = useCallback(async (postData) => {
     const newPost = await createPost(postData);
+    const updatedPosts = await getAllPosts();
 
-    setPosts((prevPosts) => [newPost, ...prevPosts]);
+    /*setPosts((prevPosts) => [newPost, ...prevPosts]);*/
+    setPosts(Array.isArray(updatedPosts) ? updatedPosts : []);
 
-    return newPost;
+    return {
+      newPost,
+      updatedPosts: Array.isArray(updatedPosts) ? updatedPosts : [],
+    };
   }, []);
 
   const removePost = useCallback(async (postId) => {
diff --git a/src/hooks/useShop.js b/src/hooks/useShop.js
new file mode 100644
index 0000000..f23c3da
--- /dev/null
+++ b/src/hooks/useShop.js
@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useState } from "react";
+import { getShopItems, purchaseShopItem } from "../api/shopApi";
+import { getCurrentUser } from "../api/userApi";
+
+export function useShop() {
+  const [shopItems, setShopItems] = useState([]);
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const reloadShop = useCallback(async () => {
+    setLoading(true);
+
+    const [items, currentUser] = await Promise.all([
+      getShopItems(),
+      getCurrentUser(),
+    ]);
+
+    setShopItems(Array.isArray(items) ? items : []);
+    setUser(currentUser);
+    setLoading(false);
+
+    return {
+      shopItems: Array.isArray(items) ? items : [],
+      user: currentUser,
+    };
+  }, []);
+
+  const purchaseItem = useCallback(async (itemId) => {
+    setErrorMessage("");
+
+    try {
+      const result = await purchaseShopItem(itemId);
+
+      setShopItems(Array.isArray(result.shopItems) ? result.shopItems : []);
+      setUser(result.user);
+
+      return result;
+    } catch (error) {
+      setErrorMessage(error.message);
+      throw error;
+    }
+  }, []);
+
+  useEffect(() => {
+    let ignore = false;
+
+    async function loadInitialShop() {
+      setLoading(true);
+
+      const [items, currentUser] = await Promise.all([
+        getShopItems(),
+        getCurrentUser(),
+      ]);
+
+      if (!ignore) {
+        setShopItems(Array.isArray(items) ? items : []);
+        setUser(currentUser);
+        setLoading(false);
+      }
+    }
+
+    loadInitialShop();
+
+    return () => {
+      ignore = true;
+    };
+  }, []);
+
+  return {
+    shopItems,
+    user,
+    loading,
+    errorMessage,
+    purchaseItem,
+    reloadShop,
+  };
+}
\ No newline at end of file
diff --git a/src/pages/EggDashboardPage.css b/src/pages/EggDashboardPage.css
index 12a810c..1e7934e 100644
--- a/src/pages/EggDashboardPage.css
+++ b/src/pages/EggDashboardPage.css
@@ -264,6 +264,103 @@
   transform: rotate(12deg);
   transform-origin: bottom center;
 }
+
+/* Egg stats */
+
+.dashboard-side-panel {
+  width: 430px;
+  justify-self: end;
+  align-self: start;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.egg-stats-card {
+  width: 100%;
+  padding: 1rem 1.1rem;
+  border: 1px solid #d9cfc1;
+  border-radius: 14px;
+  background: #fffdf8;
+  color: #2f241f;
+  box-shadow: 0 12px 28px rgba(72, 52, 38, 0.08);
+}
+
+.egg-stats-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.85rem;
+}
+
+.egg-stats-header span {
+  color: #6c5147;
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.egg-stats-header strong {
+  font-family: var(--font-serif);
+  color: #4d342c;
+  font-size: 0.95rem;
+}
+
+.egg-stats-loading {
+  margin: 0;
+  color: #786a61;
+  font-size: 0.78rem;
+  font-style: italic;
+}
+
+.egg-stat-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.egg-stat-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.egg-stat-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.egg-stat-label span {
+  color: #5f5249;
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.egg-stat-label strong {
+  color: #2f241f;
+  font-size: 0.78rem;
+}
+
+.egg-stat-bar {
+  height: 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #eee8df;
+}
+
+.egg-stat-bar span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: #7a5f54;
+  transition: width 180ms ease;
+}
+
 /* Notebook */
 
 /*
@@ -310,10 +407,8 @@
 
 .dashboard-notebook {
   position: relative;
-  width: 430px;
+  width: 100%;
   min-height: 560px;
-  justify-self: end;
-  align-self: end;
   color: #fff8ef;
 }
 
@@ -513,8 +608,12 @@
     aspect-ratio: 1.9 / 1;
   }
 
-  .dashboard-notebook {
+  .dashboard-side-panel {
     width: 440px;
+  }
+
+  .dashboard-notebook {
+    width: 100%;
     min-height: 580px;
   }
 }
@@ -578,13 +677,15 @@
     max-width: 900px;
     aspect-ratio: 1.35 / 1;
   }
-
-  .dashboard-notebook {
+  .dashboard-side-panel {
     width: min(100%, 430px);
-    min-height: auto;
     justify-self: center;
     align-self: start;
-    /*border-radius: 24px;*/
+  }
+
+  .dashboard-notebook {
+    width: 100%;
+    min-height: auto;
   }
 
   .bookmark {
@@ -616,10 +717,13 @@
     aspect-ratio: 1.32 / 1;
   }
 
-  .dashboard-notebook {
+  .dashboard-side-panel {
     width: 410px;
+  }
+
+  .dashboard-notebook {
+    width: 100%;
     min-height: 500px;
-    align-self: end;
   }
 
   .quest-paper {
@@ -633,6 +737,43 @@
   }
 }
 
+@media (min-width: 681px) and (max-width: 1050px) {
+  .dashboard-side-panel {
+    width: min(100%, 900px);
+    display: grid;
+    grid-template-columns: 220px minmax(0, 430px);
+    align-items: start;
+    justify-content: center;
+    gap: 1.2rem;
+  }
+
+  .egg-stats-card {
+    min-height: 420px;
+    padding: 1.1rem;
+  }
+
+  .egg-stats-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+  }
+
+  .egg-stat-list {
+    gap: 1.15rem;
+  }
+
+  .egg-stat-row {
+    gap: 0.45rem;
+  }
+
+  .egg-stat-bar {
+    height: 10px;
+  }
+
+  .dashboard-notebook {
+    width: 100%;
+  }
+}
 
 @media (max-width: 680px) {
   .dashboard-header {
@@ -666,11 +807,13 @@
     --scene-drop: 72px;
   }
 
-  .dashboard-notebook {
+  .dashboard-side-panel {
     width: min(100%, 390px);
+  }
+
+  .dashboard-notebook {
+    width: 100%;
     min-height: auto;
-    justify-self: center;
-    align-self: start;
   }
 
   .notebook-title {
diff --git a/src/pages/EggDashboardPage.jsx b/src/pages/EggDashboardPage.jsx
index fc44595..57743ee 100644
--- a/src/pages/EggDashboardPage.jsx
+++ b/src/pages/EggDashboardPage.jsx
@@ -6,7 +6,10 @@ import notebookImage from "../assets/notebook.PNG";
 import windowFrameImage from "../assets/windowframe.PNG";
 import windowBackgroundImage from "../assets/background.png";
 
+import { useEgg } from "../hooks/useEgg";
+
 function EggDashboardPage() {
+  const { egg, loading } = useEgg();
   return (
     <main className="app-page egg-dashboard-page">
       <header className="dashboard-header">
@@ -48,39 +51,84 @@ function EggDashboardPage() {
           </div>
         </section>
 
-        <aside className="dashboard-notebook">
-          <div
-            className="notebook-shell"
-            style={{ "--notebook-image": `url(${notebookImage})` }}
-          >
-            <h2 className="notebook-title">My Notebook</h2>
-
-            <section className="notebook-paper-content" aria-label="Today’s quests">
-              <h3>Today’s Quests</h3>
-
-              <ul>
-                <li>
-                  <input type="checkbox" readOnly />
-                  <span>Write 500+ words in total today</span>
-                </li>
-                <li>
-                  <input type="checkbox" readOnly />
-                  <span>Write about what you studied</span>
-                </li>
-                <li>
-                  <input type="checkbox" readOnly />
-                  <span>Upload one photo memory</span>
-                </li>
-              </ul>
-            </section>
-
-            <nav className="dashboard-actions" aria-label="Dashboard actions">
-              <a href="/write">Write Post</a>
-              <a href="/shop">Shop</a>
-              <a href="/archive">Archive</a>
-              <a href="/inventory">Inventory</a>
-            </nav>
-          </div>
+        <aside className="dashboard-side-panel">
+          <section className="egg-stats-card" aria-label="Egg statistics">
+            <div className="egg-stats-header">
+              <span>Egg Status</span>
+              <strong>{loading || !egg ? "Loading..." : `Stage ${egg.stage}`}</strong>
+            </div>
+
+            {loading || !egg ? (
+              <p className="egg-stats-loading">Loading egg stats...</p>
+            ) : (
+              <div className="egg-stat-list">
+                <div className="egg-stat-row">
+                  <div className="egg-stat-label">
+                    <span>Glow</span>
+                    <strong>{egg.glow}</strong>
+                  </div>
+                  <div className="egg-stat-bar" aria-label={`Glow ${egg.glow}`}>
+                    <span style={{ width: `${egg.glow}%` }} />
+                  </div>
+                </div>
+
+                <div className="egg-stat-row">
+                  <div className="egg-stat-label">
+                    <span>Warmth</span>
+                    <strong>{egg.warmth}</strong>
+                  </div>
+                  <div className="egg-stat-bar" aria-label={`Warmth ${egg.warmth}`}>
+                    <span style={{ width: `${egg.warmth}%` }} />
+                  </div>
+                </div>
+
+                <div className="egg-stat-row">
+                  <div className="egg-stat-label">
+                    <span>Weight</span>
+                    <strong>{egg.weight}</strong>
+                  </div>
+                  <div className="egg-stat-bar" aria-label={`Weight ${egg.weight}`}>
+                    <span style={{ width: `${egg.weight}%` }} />
+                  </div>
+                </div>
+              </div>
+            )}
+          </section>
+
+          <section className="dashboard-notebook">
+            <div
+              className="notebook-shell"
+              style={{ "--notebook-image": `url(${notebookImage})` }}
+            >
+              <h2 className="notebook-title">My Notebook</h2>
+
+              <section className="notebook-paper-content" aria-label="Today’s quests">
+                <h3>Today’s Quests</h3>
+
+                <ul>
+                  <li>
+                    <input type="checkbox" readOnly />
+                    <span>Write 500+ words in total today</span>
+                  </li>
+                  <li>
+                    <input type="checkbox" readOnly />
+                    <span>Write about what you studied</span>
+                  </li>
+                  <li>
+                    <input type="checkbox" readOnly />
+                    <span>Upload one photo memory</span>
+                  </li>
+                </ul>
+              </section>
+
+              <nav className="dashboard-actions" aria-label="Dashboard actions">
+                <a href="/write">Write Post</a>
+                <a href="/shop">Shop</a>
+                <a href="/archive">Archive</a>
+                <a href="/inventory">Inventory</a>
+              </nav>
+            </div>
+          </section>
         </aside>
       </section>
     </main>
diff --git a/src/pages/InventoryPage.css b/src/pages/InventoryPage.css
index 11423ef..cff1278 100644
--- a/src/pages/InventoryPage.css
+++ b/src/pages/InventoryPage.css
@@ -120,9 +120,10 @@
 }
 
 .inventory-window-header {
+  height: 72px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   padding: 0 2rem;
   border-bottom: 1px solid #ddd3c7;
 }
@@ -132,6 +133,7 @@
   font-family: var(--font-serif);
   font-size: 1.9rem;
   color: #6a5148;
+  line-height: 1;
 }
 
 .inventory-info-button {
@@ -304,7 +306,7 @@
 }
 
 .inventory-item-info strong {
-  display: inline-block;
+  display: block;
   color: #2f241f;
   font-size: 0.9rem;
 }
@@ -318,7 +320,7 @@
 }
 
 .inventory-item-description {
-  max-width: 170px;
+  max-width: 160px;
   margin: 0.25rem 0 0;
   color: #7c7167;
   font-size: 0.68rem;
@@ -378,6 +380,52 @@
   background: #5a2b1e;
 }
 
+.inventory-empty-message,
+.inventory-error-message {
+  margin: 0;
+  padding: 0.8rem;
+  color: #7c7167;
+  font-size: 0.82rem;
+  font-style: italic;
+}
+
+.inventory-error-message {
+  color: #b34135;
+  font-weight: 800;
+}
+
+.equip-item-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.effect-label {
+  min-height: 22px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.65rem;
+  border-radius: 999px;
+  background: #eadbd2;
+  color: #6a4c42;
+  font-size: 0.7rem;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.inventory-empty-message,
+.inventory-error-message {
+  margin: 0;
+  padding: 1rem;
+  color: #7c7167;
+  font-size: 0.85rem;
+  font-style: italic;
+}
+
+.inventory-error-message {
+  color: #b34135;
+  font-weight: 800;
+}
+
 /* Responsive */
 
 @media (max-width: 900px) {
@@ -497,8 +545,9 @@
 
   .inventory-item-info {
     min-height: auto;
-    display: block;
-    margin-top: 1rem;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: end;
   }
 
   .inventory-item-info strong {
@@ -514,9 +563,6 @@
 
   .inventory-item-description {
     max-width: none;
-    margin: 0.3rem 0 0;
-    font-size: 0.72rem;
-    line-height: 1.35;
   }
 
   .inventory-footer {
@@ -529,4 +575,8 @@
     min-height: 40px;
     font-size: 0.76rem;
   }
+
+  .effect-label {
+    justify-self: end;
+  }
 }
\ No newline at end of file
diff --git a/src/pages/InventoryPage.jsx b/src/pages/InventoryPage.jsx
index d9e31ce..b3cde83 100644
--- a/src/pages/InventoryPage.jsx
+++ b/src/pages/InventoryPage.jsx
@@ -1,14 +1,16 @@
 import { useMemo, useState } from "react";
+import { useInventory } from "../hooks/useInventory";
+import { useEgg } from "../hooks/useEgg";
 import "./InventoryPage.css";
 
 const inventoryCategories = [
   {
-    id: "backgrounds",
+    id: "background",
     label: "Backgrounds",
     icon: "▱",
   },
   {
-    id: "decorations",
+    id: "decoration",
     label: "Decorations",
     icon: "⚭",
   },
@@ -19,225 +21,18 @@ const inventoryCategories = [
   },
 ];
 
-const initialInventoryItems = [
-  {
-    user_item_id: 1,
-    user_id: 1,
-    item_id: 1,
-    quantity: 1,
-    is_equipped: true,
-    purchased_at: "2026-05-01",
-
-    name: "Starry Night",
-    item_type: "backgrounds",
-    description: "A quiet night sky for your egg's resting place.",
-    price: 0,
-    effect_type: "glow",
-    effect_value: 1,
-    asset_url: null,
-    is_active: true,
-  },
-  {
-    user_item_id: 2,
-    user_id: 1,
-    item_id: 2,
-    quantity: 1,
-    is_equipped: false,
-    purchased_at: "2026-05-02",
-
-    name: "Good Morning",
-    item_type: "backgrounds",
-    description: "A warm morning background filled with soft light.",
-    price: 450,
-    effect_type: "warmth",
-    effect_value: 1,
-    asset_url: null,
-    is_active: true,
-  },
-  {
-    user_item_id: 3,
-    user_id: 1,
-    item_id: 3,
-    quantity: 1,
-    is_equipped: false,
-    purchased_at: "2026-05-03",
-
-    name: "Dreamy Cloud",
-    item_type: "backgrounds",
-    description: "A gentle cloudy scene for slow reflection.",
-    price: 300,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-  },
-
-  // Extra background test items
-  ...Array.from({ length: 9 }, (_, index) => ({
-    user_item_id: 100 + index,
-    user_id: 1,
-    item_id: 100 + index,
-    quantity: 1,
-    is_equipped: false,
-    purchased_at: "2026-05-04",
-
-    name: "Test Backgrounds",
-    item_type: "backgrounds",
-    description: "Test background item for scrolling.",
-    price: 100,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-  })),
-
-  {
-    user_item_id: 4,
-    user_id: 1,
-    item_id: 4,
-    quantity: 1,
-    is_equipped: true,
-    purchased_at: "2026-05-05",
-
-    name: "Warm Blanket",
-    item_type: "decorations",
-    description: "A soft blanket that makes the egg feel warmer.",
-    price: 120,
-    effect_type: "warmth",
-    effect_value: 1,
-    asset_url: null,
-    is_active: true,
-  },
-  {
-    user_item_id: 5,
-    user_id: 1,
-    item_id: 5,
-    quantity: 1,
-    is_equipped: false,
-    purchased_at: "2026-05-05",
-
-    name: "Tiny Lamp",
-    item_type: "decorations",
-    description: "A small lamp that helps the egg glow softly.",
-    price: 180,
-    effect_type: "glow",
-    effect_value: 1,
-    asset_url: null,
-    is_active: true,
-  },
-  {
-    user_item_id: 6,
-    user_id: 1,
-    item_id: 6,
-    quantity: 1,
-    is_equipped: false,
-    purchased_at: "2026-05-06",
-
-    name: "Shell Ribbon",
-    item_type: "decorations",
-    description: "A decorative ribbon for the egg shell.",
-    price: 220,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-  },
-
-  // Extra decoration test items
-  ...Array.from({ length: 9 }, (_, index) => ({
-    user_item_id: 200 + index,
-    user_id: 1,
-    item_id: 200 + index,
-    quantity: 1,
-    is_equipped: false,
-    purchased_at: "2026-05-07",
-
-    name: "Test Deco",
-    item_type: "decorations",
-    description: "Test decoration item for scrolling.",
-    price: 80,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-  })),
-
-  {
-    user_item_id: 7,
-    user_id: 1,
-    item_id: 7,
-    quantity: 1,
-    is_equipped: true,
-    purchased_at: "2026-05-08",
-
-    name: "Rainy Lullaby",
-    item_type: "music",
-    description: "A quiet rainy melody for writing memories.",
-    price: 250,
-    effect_type: "weight",
-    effect_value: 1,
-    asset_url: null,
-    is_active: true,
-  },
-  {
-    user_item_id: 8,
-    user_id: 1,
-    item_id: 8,
-    quantity: 1,
-    is_equipped: false,
-    purchased_at: "2026-05-08",
-
-    name: "Morning Piano",
-    item_type: "music",
-    description: "A calm piano piece for beginning the day.",
-    price: 320,
-    effect_type: "glow",
-    effect_value: 1,
-    asset_url: null,
-    is_active: true,
-  },
-  {
-    user_item_id: 9,
-    user_id: 1,
-    item_id: 9,
-    quantity: 1,
-    is_equipped: false,
-    purchased_at: "2026-05-09",
-
-    name: "Soft Static",
-    item_type: "music",
-    description: "A soft ambient track for quiet focus.",
-    price: 150,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-  },
-
-  // Extra music test items
-  ...Array.from({ length: 9 }, (_, index) => ({
-    user_item_id: 300 + index,
-    user_id: 1,
-    item_id: 300 + index,
-    quantity: 1,
-    is_equipped: false,
-    purchased_at: "2026-05-10",
-
-    name: "Test Music",
-    item_type: "music",
-    description: "Test music item for scrolling.",
-    price: 90,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-  })),
-];
-
 function InventoryPage() {
-  const [activeCategory, setActiveCategory] = useState("backgrounds");
-  const [inventoryItems, setInventoryItems] = useState(initialInventoryItems);
-  const [selectedUserItemId, setSelectedUserItemId] = useState(1);
+  const [activeCategory, setActiveCategory] = useState("background");
+  const [selectedUserItemId, setSelectedUserItemId] = useState(null);
+  const { recalculateFromInventory } = useEgg();
+
+  const {
+    inventoryItems,
+    loading,
+    errorMessage,
+    equipItem,
+    unequipItem,
+  } = useInventory();
 
   const visibleItems = useMemo(() => {
     return inventoryItems.filter(
@@ -247,7 +42,7 @@ function InventoryPage() {
 
   const selectedItem = useMemo(() => {
     const selected = inventoryItems.find(
-      (item) => item.user_item_id === selectedUserItemId
+      (item) => Number(item.user_item_id) === Number(selectedUserItemId)
     );
 
     if (selected && selected.item_type === activeCategory && selected.is_active) {
@@ -263,47 +58,29 @@ function InventoryPage() {
     );
 
     setActiveCategory(categoryId);
-
-    if (firstItem) {
-      setSelectedUserItemId(firstItem.user_item_id);
-    }
+    setSelectedUserItemId(firstItem?.user_item_id ?? null);
   }
 
-  function handleToggleEquip() {
+  async function handleToggleEquip() {
     if (!selectedItem) {
       return;
     }
 
-    setInventoryItems((currentItems) =>
-      currentItems.map((item) => {
-        if (item.item_type !== selectedItem.item_type) {
-          return item;
-        }
-
-        if (item.user_item_id === selectedItem.user_item_id) {
-          return {
-            ...item,
-            is_equipped: !item.is_equipped,
-          };
-        }
+    try {
+      const updatedInventoryItems = selectedItem.is_equipped
+        ? await unequipItem(selectedItem.user_item_id)
+        : await equipItem(selectedItem.user_item_id);
 
-        /*
-          Placeholder behavior:
-          For now, only one item per category can be equipped at once.
+      await recalculateFromInventory(updatedInventoryItems);
 
-          Later, if decorations can have multiple equipped items,
-          this logic can become category-specific.
-        */
-        if (!selectedItem.is_equipped) {
-          return {
-            ...item,
-            is_equipped: false,
-          };
-        }
+      const stillSelectedItem = updatedInventoryItems.find(
+        (item) => Number(item.user_item_id) === Number(selectedItem.user_item_id)
+      );
 
-        return item;
-      })
-    );
+      setSelectedUserItemId(stillSelectedItem?.user_item_id ?? null);
+    } catch {
+      // errorMessage is handled inside useInventory / useEgg
+    }
   }
 
   return (
@@ -328,9 +105,6 @@ function InventoryPage() {
       <section className="inventory-window" aria-label="Inventory">
         <header className="inventory-window-header">
           <h1>▰ Inventory</h1>
-          <a className="inventory-info-button" href="/nest" aria-label="Return to egg">
-            ⊙
-          </a>
         </header>
 
         <div className="inventory-content">
@@ -352,48 +126,49 @@ function InventoryPage() {
 
           <section className="inventory-item-panel" aria-label="Inventory items">
             <div className="inventory-item-grid">
-              {visibleItems.map((item) => (
-                <button
-                  key={item.user_item_id}
-                  className={`inventory-item-card ${
-                    selectedItem?.user_item_id === item.user_item_id
-                      ? "selected"
-                      : ""
-                  }`}
-                  type="button"
-                  onClick={() => setSelectedUserItemId(item.user_item_id)}
-                >
-                  {item.is_equipped && (
-                    <span className="equipped-badge">Equipped</span>
-                  )}
+              {loading ? (
+                <p className="inventory-empty-message">Loading inventory...</p>
+              ) : visibleItems.length === 0 ? (
+                <p className="inventory-empty-message">
+                  No items owned in this category yet.
+                </p>
+              ) : (
+                visibleItems.map((item) => (
+                  <button
+                    className={`inventory-item-card ${
+                      Number(selectedItem?.user_item_id) === Number(item.user_item_id)
+                        ? "selected"
+                        : ""
+                    }`}
+                    key={item.user_item_id}
+                    type="button"
+                    onClick={() => setSelectedUserItemId(item.user_item_id)}
+                  >
+                    <div className="inventory-item-image">
+                      {item.asset_url ? (
+                        <img src={item.asset_url} alt={item.name} />
+                      ) : (
+                        <span>▧</span>
+                      )}
+                    </div>
 
-                  <div className="inventory-item-image">
-                    {item.asset_url ? (
-                      <img src={item.asset_url} alt="" />
-                    ) : (
-                      <span className="inventory-image-placeholder" />
-                    )}
-                  </div>
+                    {item.is_equipped && <span className="equipped-badge">Equipped</span>}
 
-                  <div className="inventory-item-info">
-                    <div>
-                      <strong>{item.name}</strong>
+                    <div className="inventory-item-info">
+                      <div>
+                        <strong>{item.name}</strong>
+                        <p className="inventory-item-description">{item.description}</p>
+                      </div>
 
-                      {item.quantity > 1 && (
-                        <span className="inventory-quantity">
-                          x{item.quantity}
+                      {item.effect_type && item.effect_value && (
+                        <span className="effect-label">
+                          +{item.effect_value} {item.effect_type}
                         </span>
                       )}
-
-                      {item.description && (
-                        <p className="inventory-item-description">
-                          {item.description}
-                        </p>
-                      )}
                     </div>
-                  </div>
-                </button>
-              ))}
+                  </button>
+                ))
+              )}
             </div>
           </section>
         </div>
@@ -403,17 +178,21 @@ function InventoryPage() {
             Close
           </a>
 
-          {selectedItem && (
+          {selectedItem ? (
             <button
-              className={`equip-item-button ${
-                selectedItem.is_equipped ? "unequip" : ""
-              }`}
+              className="equip-item-button"
               type="button"
               onClick={handleToggleEquip}
             >
               {selectedItem.is_equipped ? "Unequip" : "Equip"}
             </button>
+          ) : (
+            <button className="equip-item-button" type="button" disabled>
+              No Item Selected
+            </button>
           )}
+
+          {errorMessage && <p className="inventory-error-message">{errorMessage}</p>}
         </footer>
       </section>
     </main>
diff --git a/src/pages/ShopPage.css b/src/pages/ShopPage.css
index 79af2bb..63bb3ba 100644
--- a/src/pages/ShopPage.css
+++ b/src/pages/ShopPage.css
@@ -9,11 +9,12 @@
 /* Header */
 
 .shop-header {
-  height: 42px;
+  height: 72px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 1.8rem;
+  gap: 1rem;
+  padding: 0 2rem;
   background: var(--color-bg-soft);
   border-bottom: 1px solid var(--color-border);
 }
@@ -90,11 +91,33 @@
   transform: translateX(-50%);
 }
 
+.shop-return-link {
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+  border: 1px solid #cdbeb4;
+  border-radius: 999px;
+  background: #fffdf8;
+  color: #5d463c;
+  font-size: 0.78rem;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.shop-return-link:hover {
+  background: #f3ede5;
+  color: #4a342b;
+}
+
 /* Shop window */
 
 .shop-window {
   width: min(100% - 3rem, 1120px);
-  height: calc(100dvh - 42px - 5rem);
+  height: calc(100dvh - 72px - 5rem);
   min-height: 560px;
   margin: 2.5rem auto;
   display: grid;
@@ -369,12 +392,32 @@
   background: #60483f;
 }
 
+.shop-error-message {
+  margin: 0;
+  color: #b34135;
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+
+.buy-item-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.shop-footer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin-left: auto;
+}
+
 /* Responsive */
 
 @media (max-width: 900px) {
   .shop-window {
     width: min(100% - 2rem, 720px);
-    height: calc(100dvh - 42px - 2rem);
+    height: calc(100dvh - 72px - 2rem);
     min-height: 0;
     margin: 1rem auto;
     grid-template-rows: 64px minmax(0, 1fr) 86px;
@@ -421,8 +464,16 @@
 
 @media (max-width: 560px) {
   .shop-header {
-    height: 54px;
-    padding: 0 1rem;
+    height: auto;
+    min-height: 60px;
+    padding: 0.7rem 1rem;
+    gap: 0.75rem;
+  }
+
+  .shop-return-link {
+    min-height: 30px;
+    padding: 0 0.75rem;
+    font-size: 0.7rem;
   }
 
   .will-balance {
@@ -433,7 +484,7 @@
 
   .shop-window {
     width: min(100% - 1rem, 440px);
-    height: calc(100dvh - 54px - 1rem);
+    height: calc(100dvh - 60px - 1rem);
     margin: 0.5rem auto;
     border-radius: 18px;
     grid-template-rows: 58px minmax(0, 1fr) 76px;
@@ -519,4 +570,10 @@
     min-height: 40px;
     font-size: 0.76rem;
   }
+
+  .shop-footer-actions {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.35rem;
+  }
 }
\ No newline at end of file
diff --git a/src/pages/ShopPage.jsx b/src/pages/ShopPage.jsx
index 1628931..46244d3 100644
--- a/src/pages/ShopPage.jsx
+++ b/src/pages/ShopPage.jsx
@@ -1,14 +1,15 @@
 import { useMemo, useState } from "react";
+import { useShop } from "../hooks/useShop";
 import "./ShopPage.css";
 
 const shopCategories = [
   {
-    id: "backgrounds",
+    id: "background",
     label: "Backgrounds",
     icon: "▱",
   },
   {
-    id: "decorations",
+    id: "decoration",
     label: "Decorations",
     icon: "⚭",
   },
@@ -19,295 +20,35 @@ const shopCategories = [
   },
 ];
 
-const shopItems = [
-  {
-    item_id: 1,
-    name: "Starry Night",
-    item_type: "backgrounds",
-    description: "A quiet night sky for your egg's resting place.",
-    price: 0,
-    effect_type: "glow",
-    effect_value: 1,
-    asset_url: null,
-    is_active: true,
-
-    // Temporary frontend-only mock fields.
-    owned: true,
-    equipped: true,
-  },
-  {
-    item_id: 2,
-    name: "Good Morning",
-    item_type: "backgrounds",
-    description: "A warm morning background filled with soft light.",
-    price: 450,
-    effect_type: "warmth",
-    effect_value: 1,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 3,
-    name: "Dreamy Cloud",
-    item_type: "backgrounds",
-    description: "A gentle cloudy scene for slow reflection.",
-    price: 300,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 4,
-    name: "Test Item",
-    item_type: "backgrounds",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 5,
-    name: "Test Item",
-    item_type: "backgrounds",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 6,
-    name: "Test Item",
-    item_type: "backgrounds",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 7,
-    name: "Test Item",
-    item_type: "backgrounds",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 8,
-    name: "Test Item",
-    item_type: "backgrounds",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 9,
-    name: "Test Item",
-    item_type: "backgrounds",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 10,
-    name: "Test Item",
-    item_type: "backgrounds",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 11,
-    name: "Test Deco",
-    item_type: "decorations",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: true,
-    equipped: false,
-  },
-  {
-    item_id: 12,
-    name: "Test Deco",
-    item_type: "decorations",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 13,
-    name: "Test Deco",
-    item_type: "decorations",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 14,
-    name: "Test Deco",
-    item_type: "decorations",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 15,
-    name: "Test Deco",
-    item_type: "decorations",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 16,
-    name: "Test Deco",
-    item_type: "decorations",
-    description: "Wow! a shop!",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 17,
-    name: "Test Music",
-    item_type: "music",
-    description: "Music is life",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: true,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 18,
-    name: "Invisible music",
-    item_type: "music",
-    description: "You shouldn't be able to see me.",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: false,
-
-    owned: false,
-    equipped: false,
-  },
-  {
-    item_id: 17,
-    name: "Invisible deco",
-    item_type: "decorations",
-    description: "You shouldn't be able to see me.",
-    price: 999,
-    effect_type: null,
-    effect_value: null,
-    asset_url: null,
-    is_active: false,
-
-    owned: false,
-    equipped: false,
-  },
-];
-
 function ShopPage() {
-  const [activeCategory, setActiveCategory] = useState("backgrounds");
-  const [selectedItemId, setSelectedItemId] = useState(1);
+  const [activeCategory, setActiveCategory] = useState("background");
+  const [selectedItemId, setSelectedItemId] = useState(null);
+
+  const {
+    shopItems,
+    user,
+    loading,
+    errorMessage,
+    purchaseItem,
+  } = useShop();
 
   const visibleItems = useMemo(() => {
     return shopItems.filter(
       (item) => item.item_type === activeCategory && item.is_active
     );
-  }, [activeCategory]);
+  }, [activeCategory, shopItems]);
 
   const selectedItem = useMemo(() => {
-    const selected = shopItems.find((item) => item.item_id === selectedItemId);
+    const selected = shopItems.find(
+      (item) => Number(item.item_id) === Number(selectedItemId)
+    );
 
     if (selected && selected.item_type === activeCategory && selected.is_active) {
       return selected;
     }
 
     return visibleItems[0] ?? null;
-  }, [activeCategory, selectedItemId, visibleItems]);
+  }, [activeCategory, selectedItemId, shopItems, visibleItems]);
 
   function handleCategoryChange(categoryId) {
     const firstItem = shopItems.find(
@@ -315,16 +56,26 @@ function ShopPage() {
     );
 
     setActiveCategory(categoryId);
+    setSelectedItemId(firstItem?.item_id ?? null);
+  }
 
-    if (firstItem) {
-      setSelectedItemId(firstItem.item_id);
+  async function handlePurchaseSelectedItem() {
+    if (!selectedItem) {
+      return;
+    }
+
+    try {
+      await purchaseItem(selectedItem.item_id);
+      setSelectedItemId(selectedItem.item_id);
+    } catch {
+      // errorMessage is handled inside useShop
     }
   }
 
   return (
     <main className="app-page shop-page">
       <header className="shop-header">
-        <div className="will-balance">✧ 1,250 Will</div>
+        <div className="will-balance">✧ {user ? user.will_balance : 0} Will</div>
 
         <div className="shop-user">
           <div className="shop-user-text">
@@ -338,8 +89,8 @@ function ShopPage() {
       <section className="shop-window" aria-label="Egg shop">
         <header className="shop-window-header">
           <h1>▦ Egg Shop</h1>
-          <a className="shop-info-button" href="/nest" aria-label="Return to egg">
-            ⊙
+          <a className="shop-return-link" href="/nest" aria-label="Return to egg">
+            Return To Egg
           </a>
         </header>
 
@@ -362,41 +113,45 @@ function ShopPage() {
 
           <section className="shop-item-panel" aria-label="Shop items">
             <div className="shop-item-grid">
-              {visibleItems.map((item) => (
-                <button
-                  key={item.item_id}
-                  className={`shop-item-card ${
-                    selectedItem?.item_id === item.item_id ? "selected" : ""
-                  }`}
-                  type="button"
-                  onClick={() => setSelectedItemId(item.item_id)}
-                >
-                  {item.equipped && <span className="equipped-badge">Equipped</span>}
+              {loading ? (
+                <p className="shop-error-message">Loading shop...</p>
+              ) : visibleItems.length === 0 ? (
+                <p className="shop-error-message">No items available.</p>
+              ) : (
+                visibleItems.map((item) => (
+                  <button
+                    className={`shop-item-card ${
+                      Number(selectedItem?.item_id) === Number(item.item_id) ? "selected" : ""
+                    }`}
+                    key={item.item_id}
+                    type="button"
+                    onClick={() => setSelectedItemId(item.item_id)}
+                  >
+                    <div className="shop-item-image">
+                      {item.asset_url ? (
+                        <img src={item.asset_url} alt={item.name} />
+                      ) : (
+                        <span>▧</span>
+                      )}
+                    </div>
 
-                  <div className="shop-item-image">
-                    {item.asset_url ? (
-                      <img src={item.asset_url} alt="" />
-                    ) : (
-                      <span className="shop-image-placeholder" />
-                    )}
-                  </div>
+                    {item.equipped && <span className="equipped-badge">Equipped</span>}
 
-                  <div className="shop-item-info">
-                    <div>
-                      <strong>{item.name}</strong>
-                      {item.description && (
+                    <div className="shop-item-info">
+                      <div>
+                        <strong>{item.name}</strong>
                         <p className="shop-item-description">{item.description}</p>
+                      </div>
+
+                      {item.owned ? (
+                        <span className="owned-label">Owned</span>
+                      ) : (
+                        <span className="price-label">{item.price} Will</span>
                       )}
                     </div>
-
-                    {item.owned ? (
-                      <span className="owned-label">Owned</span>
-                    ) : (
-                      <span className="price-label">{item.price} ✦</span>
-                    )}
-                  </div>
-                </button>
-              ))}
+                  </button>
+                ))
+              )}
             </div>
           </section>
         </div>
@@ -406,11 +161,31 @@ function ShopPage() {
             Close
           </a>
 
-          {selectedItem && !selectedItem.owned && (
-            <button className="buy-item-button" type="button">
-              Buy Item
-            </button>
-          )}
+          <div className="shop-footer-actions">
+            {(errorMessage ||
+              (selectedItem && user && user.will_balance < selectedItem.price)) && (
+              <p className="shop-error-message">
+                {errorMessage || "Not enough Will."}
+              </p>
+            )}
+
+            {selectedItem && !selectedItem.owned && (
+              <button
+                className="buy-item-button"
+                type="button"
+                onClick={handlePurchaseSelectedItem}
+                disabled={!user || user.will_balance < selectedItem.price}
+              >
+                Buy Item
+              </button>
+            )}
+
+            {selectedItem?.owned && (
+              <button className="buy-item-button" type="button" disabled>
+                Owned
+              </button>
+            )}
+          </div>
         </footer>
       </section>
     </main>
diff --git a/src/pages/WritePostPage.jsx b/src/pages/WritePostPage.jsx
index e022170..c1f4fa3 100644
--- a/src/pages/WritePostPage.jsx
+++ b/src/pages/WritePostPage.jsx
@@ -32,7 +32,7 @@ function WritePostPage() {
       return;
     }
 
-    const newPost = await addPost({
+    const { newPost, updatedPosts } = await addPost({
       title,
       content,
       tag,
@@ -40,7 +40,7 @@ function WritePostPage() {
       visibility,
     });
 
-    await checkPostForQuestCompletion(newPost);
+    /*await checkPostForQuestCompletion(newPost);*/
 
     alert("Post created! Redirecting you to Archive Page");
     navigate("/archive");