diff --git a/frontend/src/components/Navbar/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx
index c99eb91..760a168 100644
--- a/frontend/src/components/Navbar/Navbar.jsx
+++ b/frontend/src/components/Navbar/Navbar.jsx
@@ -29,7 +29,7 @@ export const NAV_ITEM = (admin = false) => [
     text: language?.ui.house,
   },
   {
-    path: 'warehouse',
+    pathName: 'warehouse',
     show: true,
     icon: IconBuildingWarehouse,
     text: language?.ui.warehouse,
diff --git a/frontend/src/pages/WareHouse/Warehouse.jsx b/frontend/src/pages/WareHouse/Warehouse.jsx
index 66149f5..3f4e264 100644
--- a/frontend/src/pages/WareHouse/Warehouse.jsx
+++ b/frontend/src/pages/WareHouse/Warehouse.jsx
@@ -1,40 +1,99 @@
-import { IconPackage } from '@tabler/icons-solidjs'
 import { For } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
 import './warehouse.scss'
 
 const data = [
-
+  {
+    id: 1,
+    name: 'Bếp',
+    listBox: [
+      {
+        id: 1,
+        code: 'bep-01',
+        name: 'Dụng cụ bếp',
+        items: ['dao', 'muỗng', 'đũa'],
+      },
+      {
+        id: 2,
+        code: 'bep-02',
+        name: 'Dụng cụ bếp',
+        items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
+      },
+      {
+        id: 3,
+        code: 'bep-02',
+        name: 'Dụng cụ bếp',
+        items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
+      },
+      {
+        id: 4,
+        code: 'bep-02',
+        name: 'Dụng cụ bếp',
+        items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
+      },
+      {
+        id: 5,
+        code: 'bep-02',
+        name: 'Dụng cụ bếp',
+        items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
+      },
+      {
+        id: 6,
+        code: 'bep-02',
+        name: 'Dụng cụ bếp',
+        items: ['nồi 20"', 'chảo 20"', 'chén nhỏ', 'chén ăn cơm'],
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: 'Bàn làm việc',
+    listBox: [
+      {
+        id: 1,
+        code: 'work-01',
+        name: 'Work 1',
+        items: ['Chuột Logitech MX', 'Tai nghe G503X'],
+      },
+      {
+        id: 2,
+        code: 'work-02',
+        name: 'Work 2',
+        items: ['Ổ cứng SSD 250GB', 'Điện thoại IP6'],
+      },
+    ],
+  },
 ]
 
 function PackageItem(props) {
-  const { item } = { ...props }
-  const isEmpty = item % 2 === 0
+  const { box, index } = { ...props }
+
+  // QRCode.toDataURL(box.code, {width: 200, margin: 1}, function (err, url) {
+  //   if (err) throw err
+  //   const img = document.getElementById(`${box.code}-${index}`)
+  //   console.log(img, url)
+  //   img.src = url
+  // })
+
   return (
     <a
       href="#"
-      class="group/item w-20 h-20 m-[10px] hover:text-white hover:bg-fu-green rounded-[10px] block"
-      classList={{ 'bg-fu-warning/30': isEmpty, 'bg-fu-warning': !isEmpty }}
+      class="group/item w-28 h-28 m-[10px] hover:text-white hover:bg-fu-green rounded-[10px] block"
+      classList={{ 'bg-fu-warning/30': !box.items.length, 'bg-fu-warning': box.items.length }}
     >
+      {/* <div class="text-base font-bold flex align-center justify-center h-[100%]">Nồi 20"</div> */}
+      <div class="qrcode-box">
+        <img id={`${box.code}-${index}`} src="" alt="" />
+      </div>
+      <div class="qrcode-box" />
       <div class="bx-dec invisible group-hover/item:visible">
         <div class="section-dec flex items-center absolute bg-fu-green/90 rounded-[10px] p-[10px] shadow-[0_5px_15px_4px_rgba(0, 135, 90, 0.25)]] mt-[20px] ml-[20px]">
-          <div class="box-img">
-            <Dynamic
-              class="mr-[10px] w-20 h-20 text-fu-warning"
-              component={IconPackage}
-            />
+          {/* <div class="box-img">
+            <Dynamic class="mr-[10px] w-20 h-20 text-fu-warning" component={IconPackage} />
           </div>
           <div class="dec max-w-[200px]">
-            <h4 class="text-white mb-[5px] text-base font-bold">
-              {isEmpty ? 'Rỗng' : 'Dụng cụ bếp'}
-            </h4>
-            <p class="line-clamp-3">
-              {isEmpty
-                ? ''
-                : `Nồi cơm điện, Bếp nấu ăn, Lò vi sóng, Máy xay sinh tố, Máy ép trái cây, Lò nướng, Nồi áp suất, Chảo chống dính, Xửng hấp, Bộ nồi chuyên dụng, Dao bếp, Thớt, Hộp đựng thực phẩm, Hũ
-                    đựng gia vị , Dụng cụ đo lường, Bộ chén bát, Đũa, Muỗng, Thau, rổ, Khăn lau bếp, Thùng đựng gạo, Bộ ly cốc, Dung dịch tẩy rửa, Giá treo, Vòi rửa thông minh, Máy hút mùi, Máy lọc nước`}
-            </p>
-          </div>
+            <h4 class="text-white mb-[5px] text-base font-bold">{!box.items.length ? 'Rỗng' : box.name}</h4>
+            <p class="line-clamp-3">{box.items.join(', ')}</p>
+          </div> */}
         </div>
       </div>
     </a>
@@ -52,13 +111,19 @@ export default function Warehouse() {
               <input class="form-control no-border bg-base-200 px-2 py-1" id="e" type="date" />
             </div>
           </div>
-          <div class="area-in-warehouse grid grid-cols-4">
-            <div class="area-block mb-10">
-              <div class="area-title text-center text-base font-bold mb-3">Khu bếp</div>
-              <div class="area-content flex justify-space-around flex-wrap">
-                <For each={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}>{(item) => <PackageItem item={item} />}</For>
-              </div>
-            </div>
+          <div class="area-in-warehouse grid grid-cols-3 gap-3">
+            <For each={data}>
+              {(warehouse) => (
+                <div class="card w-full bg-base-100 shadow-lg border border-gray-200 p-1">
+                  <div class="area-block mb-10">
+                    <div class="area-title text-center text-base font-bold mb-3 mt-3 font-size">{warehouse.name}</div>
+                    <div class="area-content flex justify-space-around flex-wrap">
+                      <For each={warehouse.listBox}>{(box, index) => <PackageItem box={box} index={index()} />}</For>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </For>
           </div>
         </div>
       </div>