diff --git a/controllers/headerController.js b/controllers/headerController.js
index a237ffb..4d74f5c 100644
--- a/controllers/headerController.js
+++ b/controllers/headerController.js
@@ -42,6 +42,7 @@ exports.index = async (req, res) => {
             socialLinks: header.top?.socialLinks || [],
           },
           logo: header.logo?.light || "",
+          header: header,
         }
       : {
           topbar: {
@@ -53,6 +54,7 @@ exports.index = async (req, res) => {
             socialLinks: [],
           },
           logo: "",
+          header: null,
         };
 
     const activeTab = req.query.tab || "topbar";
@@ -172,40 +174,28 @@ exports.update = async (req, res) => {
           location: parsedData.contactInfo?.location || "",
           socialLinks: parsedData.socialLinks || [],
         };
+      } catch (parseErr) {
+        console.error("✗ Error parsing topbarJson:", parseErr);
+      }
+    }
 
-        if (logo) {
-          updateData.logo = logoData;
-        }
-
-        console.log(
-          "Preparing to update header with data:",
-          JSON.stringify(updateData, null, 2),
-        );
-
-        const updatedHeader = await Header.findByIdAndUpdate(
-          headerId,
-          updateData,
-          { new: true, runValidators: true },
-        );
-
-        if (!updatedHeader) {
-          console.error("✗ Header not found with ID:", headerId);
-          return res.status(404).json({
-            success: false,
-            message: "Header not found",
-          });
-        }
-        res.json({
-          success: true,
-          message: "Header updated successfully",
-          data: updatedHeader,
-        });
-      } catch (error) {
-        console.error("✗ Error updating header:", error);
-        res.status(400).json({
-          success: false,
-          message: error.message,
-        });
+    // Nếu có offcanvasJson, parse nó
+    const { offcanvasJson } = req.body;
+    if (offcanvasJson && typeof offcanvasJson === "string") {
+      try {
+        const parsedOffcanvas = JSON.parse(offcanvasJson);
+        console.log("✓ Parsed offcanvasJson successfully:", parsedOffcanvas);
+        offcanvas = {
+          description: parsedOffcanvas.description || "",
+          contactInfo: {
+            address: parsedOffcanvas.contactInfo?.address || "",
+            email: parsedOffcanvas.contactInfo?.email || "",
+            workingHours: parsedOffcanvas.contactInfo?.workingHours || "",
+            phone: parsedOffcanvas.contactInfo?.phone || "",
+          },
+        };
+      } catch (parseErr) {
+        console.error("✗ Error parsing offcanvasJson:", parseErr);
       }
     }
 
diff --git a/views/admin/header/index.ejs b/views/admin/header/index.ejs
index 3e868d3..66ec410 100644
--- a/views/admin/header/index.ejs
+++ b/views/admin/header/index.ejs
@@ -13,6 +13,7 @@
       <div class="content-with-fixed-buttons">
         <!-- Hidden inputs for JSON data -->
         <input type="hidden" name="topbarJson" id="topbarJson" />
+        <input type="hidden" name="offcanvasJson" id="offcanvasJson" />
         <input type="hidden" name="logo" id="logoInput" />
         <input type="hidden" name="activeTab" id="activeTabInput" value="topbar" />
         <input type="hidden" name="menuUpdates" id="menuUpdates" />
@@ -99,6 +100,25 @@
                               placeholder="69 Street, 5th Avenue LA, United States"
                             />
                           </div>
+                          <div class="col-md-6">
+                            <label class="form-label fw-medium">Working Hours <small class="text-muted fw-normal">(Drawer Menu)</small></label>
+                            <input
+                              type="text"
+                              class="form-control"
+                              id="offcanvasWorkingHours"
+                              value="<%= (data.header && data.header.offcanvas && data.header.offcanvas.contactInfo && data.header.offcanvas.contactInfo.workingHours) ? data.header.offcanvas.contactInfo.workingHours : '' %>"
+                              placeholder="Mon-Friday, 09am - 05pm"
+                            />
+                          </div>
+                          <div class="col-md-12">
+                            <label class="form-label fw-medium">Offcanvas Description <small class="text-muted fw-normal">(Drawer Menu)</small></label>
+                            <textarea
+                              class="form-control"
+                              id="offcanvasDescription"
+                              rows="3"
+                              placeholder="Short description displayed in the offcanvas sidebar..."
+                            ><%= (data.header && data.header.offcanvas && data.header.offcanvas.description) ? data.header.offcanvas.description : '' %></textarea>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -179,6 +199,7 @@
                 </div>
               </div>
 
+
               <!-- Menu Structure Tab -->
               <div class="tab-pane fade <%= activeTab === 'menu' ? 'show active' : '' %>" id="menu" role="tabpanel">
                 <%- include('menu') %>
@@ -349,6 +370,7 @@
                 // 1. Collect and Save Topbar & Logo
                 const headerData = {
                     topbarJson: document.getElementById('topbarJson').value,
+                    offcanvasJson: document.getElementById('offcanvasJson').value,
                     logo: document.getElementById('logoInput').value,
                     activeTab: document.getElementById('activeTabInput').value
                 };
@@ -421,6 +443,18 @@
       document.getElementById('topbarJson').value = JSON.stringify(topbarData);
       document.getElementById('logoInput').value = document.getElementById('logoImage').value || '';
 
+      // Collect offcanvas data — phone/email/address shared from topbar
+      const offcanvasData = {
+        description: document.getElementById('offcanvasDescription').value || '',
+        contactInfo: {
+          phone: document.getElementById('contactPhone').value || '',
+          email: document.getElementById('contactEmail').value || '',
+          address: document.getElementById('contactLocation').value || '',
+          workingHours: document.getElementById('offcanvasWorkingHours').value || ''
+        }
+      };
+      document.getElementById('offcanvasJson').value = JSON.stringify(offcanvasData);
+
       try {
         const menuUpdates = collectMenuUpdates();
         document.getElementById('menuUpdates').value = JSON.stringify(menuUpdates);