diff --git a/RestroHub-FrontEnd/src/components/admin/menu/Menus.jsx b/RestroHub-FrontEnd/src/components/admin/menu/Menus.jsx
index 0da84c4e..3983c4cd 100644
--- a/RestroHub-FrontEnd/src/components/admin/menu/Menus.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/menu/Menus.jsx
@@ -17,6 +17,7 @@ const Menus = () => {
   const [allCategories, setAllCategories] = useState([]);
   const menuGridRef = useRef(null);
   const menusGridRef = useRef(null);
+  const categorySidebarRef = useRef(null);
 
   // FOOD ITEM MODAL STATE
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -24,6 +25,7 @@ const Menus = () => {
 
   // CATEGORY MODAL STATE
   const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false);
+  const [editingCategory, setEditingCategory] = useState(null);
 
   // MENU CREATION MODAL STATE
   const [isMenuModalOpen, setIsMenuModalOpen] = useState(false);
@@ -47,6 +49,11 @@ const Menus = () => {
     }
   };
 
+  const refreshFoodItemsAndCategoryCounts = () => {
+    menuGridRef.current?.refreshFoods();
+    categorySidebarRef.current?.refreshCategoryCounts();
+  };
+
   // FOOD ITEM MODAL HANDLERS
   const openAddModal = () => {
     setEditingItem(null);
@@ -67,16 +74,37 @@ const Menus = () => {
   const closeModal = () => {
     setIsModalOpen(false);
     setEditingItem(null);
-    menuGridRef.current?.refreshFoods();
+  };
+
+  const handleFoodItemSaved = () => {
+    closeModal();
+    refreshFoodItemsAndCategoryCounts();
   };
 
   // CATEGORY MODAL HANDLERS
   const openCategoryModal = () => {
+    setEditingCategory(null);
+    setIsCategoryModalOpen(true);
+  };
+
+  const openEditCategoryModal = (category) => {
+    setEditingCategory(category);
     setIsCategoryModalOpen(true);
   };
 
   const closeCategoryModal = () => {
     setIsCategoryModalOpen(false);
+    setEditingCategory(null);
+  };
+
+  const handleCategorySaved = () => {
+    closeCategoryModal();
+    categorySidebarRef.current?.refreshCategories();
+    menuGridRef.current?.refreshFoods();
+  };
+
+  const handleCategoryDeleted = () => {
+    menuGridRef.current?.refreshFoods();
   };
 
   // MENU CREATION MODAL HANDLERS
@@ -148,15 +176,19 @@ const Menus = () => {
           <BulkActions />
           <div className="flex flex-col lg:flex-row gap-6 mt-6">
             <CategorySidebar
+              ref={categorySidebarRef}
               selectedCategory={selectedCategory}
               onCategoryChange={setSelectedCategory}
               onAddCategory={openCategoryModal}
+              onEditCategory={openEditCategoryModal}
               setAllCategories={setAllCategories}
+              onCategoryDeleted={handleCategoryDeleted}
             />
             <MenuItemsGrid
               ref={menuGridRef}
               selectedCategory={selectedCategory}
               onEditItem={openEditModal}
+              onFoodItemsChanged={refreshFoodItemsAndCategoryCounts}
             />
           </div>
         </div>
@@ -177,6 +209,7 @@ const Menus = () => {
       <MenuFormModal
         isOpen={isModalOpen}
         onClose={closeModal}
+        onSaved={handleFoodItemSaved}
         editingItem={editingItem}
         allCategories={allCategories}
       />
@@ -185,6 +218,8 @@ const Menus = () => {
       <CategoryFormModal
         isOpen={isCategoryModalOpen}
         onClose={closeCategoryModal}
+        editingCategory={editingCategory}
+        onSaved={handleCategorySaved}
       />
 
       {/* Menu Creation Modal */}
diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx
index e1effa26..1c9b3c44 100644
--- a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategoryFormModal.jsx
@@ -1,148 +1,239 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Dialog } from "@headlessui/react";
-import { X, Loader2, Tag, Type, FileText  } from "lucide-react";
+import { AlertCircle, FileText, Loader2, Tag, Type, X } from "lucide-react";
+import toast from "react-hot-toast";
 import api from "@services/common/api";
 
-const CategoryFormModal = ({ isOpen, onClose }) => {
-  const [formData, setFormData] = useState({
-    name: "",
-    description: ""
-  });
+const getErrorMessage = (err, fallback) =>
+  err.response?.data?.message || err.response?.data?.error || err.message || fallback;
 
+const isValidCategoryId = (categoryId) => {
+  const normalizedId = String(categoryId ?? '').trim();
+  const isNumericId = /^\d+$/.test(normalizedId);
+  const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(normalizedId);
+
+  return isNumericId || isUuid;
+};
+
+const getSafeCategoryId = (categoryId) => {
+  const normalizedId = String(categoryId ?? '').trim();
+
+  if (!isValidCategoryId(normalizedId)) {
+    throw new Error('Invalid category selected');
+  }
+
+  return encodeURIComponent(normalizedId);
+};
+
+const initialFormData = {
+  name: "",
+  description: ""
+};
+
+const CategoryFormModal = ({ isOpen, onClose, editingCategory, onSaved }) => {
+  const [formData, setFormData] = useState(initialFormData);
+  const [errors, setErrors] = useState({});
+  const [submitError, setSubmitError] = useState("");
   const [submitting, setSubmitting] = useState(false);
 
+  const isEditing = Boolean(editingCategory?.categoryId);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setFormData({
+      name: editingCategory?.name || "",
+      description: editingCategory?.description || ""
+    });
+    setErrors({});
+    setSubmitError("");
+  }, [editingCategory, isOpen]);
+
   const updateField = (field, value) => {
     setFormData(prev => ({
       ...prev,
       [field]: value
     }));
+    setErrors(prev => ({ ...prev, [field]: undefined }));
+  };
+
+  const validateForm = () => {
+    const nextErrors = {};
+    const name = formData.name.trim();
+    const description = formData.description.trim();
+
+    if (!name) nextErrors.name = "Category name is required.";
+    if (name && name.length < 2) nextErrors.name = "Category name must be at least 2 characters.";
+    if (name.length > 50) nextErrors.name = "Category name must be 50 characters or less.";
+    if (description.length > 255) nextErrors.description = "Description must be 255 characters or less.";
+
+    setErrors(nextErrors);
+    return Object.keys(nextErrors).length === 0;
+  };
+
+  const handleClose = () => {
+    if (submitting) return;
+    onClose();
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    setSubmitError("");
+
+    if (!validateForm()) return;
+
     try {
       setSubmitting(true);
 
       const payload = {
-        name: formData.name,
-        description: formData.description,
+        name: formData.name.trim(),
+        description: formData.description.trim(),
         isDelete: false
       };
 
-      await api.post("/secure/api/v1/categories/addCategory", payload);
-
-      onClose();
-      setFormData({ name: "", description: "" });
-
+      if (isEditing) {
+        const safeCategoryId = getSafeCategoryId(editingCategory.categoryId);
+        await api.put(`/secure/api/v1/categories/update/${safeCategoryId}`, payload);
+        toast.success("Category updated successfully");
+      } else {
+        await api.post("/secure/api/v1/categories/addCategory", payload);
+        toast.success("Category created successfully");
+      }
+
+      setFormData(initialFormData);
+      onSaved();
     } catch (err) {
-      console.error("Category create failed:", err.response?.data || err);
+      console.error("Category save failed:", err.response?.data || err);
+      const message = getErrorMessage(err, "Failed to save category");
+      setSubmitError(message);
+      toast.error(message);
     } finally {
       setSubmitting(false);
     }
   };
 
   return (
-  <Dialog open={isOpen} onClose={onClose} className="relative z-50">
-    {/* Backdrop */}
-    <div className="fixed inset-0 bg-gradient-to-br from-black/40 to-black/60 backdrop-blur-sm"
-         aria-hidden="true" />
-
-    <div className="fixed inset-0 flex items-center justify-center p-4">
-      <Dialog.Panel className="w-full max-w-lg bg-white rounded-3xl shadow-2xl border
-                               border-gray-100 overflow-hidden">
-
-        {/* ========== GRADIENT HEADER ========== */}
-        <div className="bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700 px-6 py-5
-                        flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
-              <Tag className="w-5 h-5 text-white" />
+    <Dialog open={isOpen} onClose={handleClose} className="relative z-50">
+      <div className="fixed inset-0 bg-gradient-to-br from-black/40 to-black/60 backdrop-blur-sm"
+           aria-hidden="true" />
+
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="w-full max-w-lg bg-white rounded-3xl shadow-2xl border
+                                 border-gray-100 overflow-hidden">
+
+          <div className="bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700 px-6 py-5
+                          flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+                <Tag className="w-5 h-5 text-white" />
+              </div>
+              <div>
+                <Dialog.Title className="text-xl font-bold text-white">
+                  {isEditing ? "Edit Category" : "Add Category"}
+                </Dialog.Title>
+                <p className="text-blue-200 text-sm mt-0.5">
+                  {isEditing ? "Update category details" : "Create a category for food items"}
+                </p>
+              </div>
             </div>
-            <Dialog.Title className="text-xl font-bold text-white">
-              Add Category
-            </Dialog.Title>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-2 hover:bg-white/20 rounded-xl transition-colors"
-          >
-            <X className="w-5 h-5 text-white" />
-          </button>
-        </div>
-
-        {/* ========== FORM BODY ========== */}
-        <form onSubmit={handleSubmit} className="px-6 py-6 space-y-5">
-
-          {/* Category Name */}
-          <div className="space-y-1.5">
-            <label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
-              <Type className="w-4 h-4 text-blue-500" />
-              Category Name
-            </label>
-            <input
-              type="text"
-              value={formData.name}
-              onChange={(e) => updateField("name", e.target.value)}
-              className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
-                         focus:ring-2 focus:ring-blue-500 focus:border-transparent
-                         focus:bg-white outline-none transition-all text-gray-800
-                         placeholder:text-gray-400"
-              placeholder="e.g. Starters"
-              required
-              minLength={2}
-              maxLength={50}
-            />
-          </div>
-
-          {/* Description */}
-          <div className="space-y-1.5">
-            <label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
-              <FileText className="w-4 h-4 text-purple-500" />
-              Description
-            </label>
-            <textarea
-              value={formData.description}
-              onChange={(e) => updateField("description", e.target.value)}
-              className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
-                         focus:ring-2 focus:ring-blue-500 focus:border-transparent
-                         focus:bg-white outline-none transition-all text-gray-800
-                         placeholder:text-gray-400 resize-none"
-              rows={3}
-              maxLength={255}
-              placeholder="Describe this category..."
-            />
-          </div>
-
-          {/* ========== FOOTER BUTTONS ========== */}
-          <div className="flex gap-3 pt-4">
             <button
               type="button"
-              onClick={onClose}
-              className="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl
-                         hover:bg-gray-50 transition-colors font-medium text-gray-600"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
+              onClick={handleClose}
               disabled={submitting}
-              className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5
-                         bg-gradient-to-r from-blue-600 to-indigo-600 text-white
-                         rounded-xl hover:from-blue-700 hover:to-indigo-700
-                         transition-all font-semibold disabled:opacity-50
-                         shadow-lg shadow-blue-600/25 hover:shadow-xl
-                         hover:shadow-blue-600/30"
+              className="p-2 hover:bg-white/20 rounded-xl transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+              aria-label="Close category form"
             >
-              {submitting && <Loader2 className="w-4 h-4 animate-spin" />}
-              Add Category
+              <X className="w-5 h-5 text-white" />
             </button>
           </div>
 
-        </form>
-      </Dialog.Panel>
-    </div>
-  </Dialog>
-);
+          <form onSubmit={handleSubmit} className="px-6 py-6 space-y-5">
+            <div className="space-y-1.5">
+              <label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
+                <Type className="w-4 h-4 text-blue-500" />
+                Category Name
+              </label>
+              <input
+                type="text"
+                value={formData.name}
+                onChange={(e) => updateField("name", e.target.value)}
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
+                           focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                           focus:bg-white outline-none transition-all text-gray-800
+                           placeholder:text-gray-400"
+                placeholder="e.g. Starters"
+                required
+                minLength={2}
+                maxLength={50}
+                aria-invalid={Boolean(errors.name)}
+              />
+              {errors.name && <p className="text-xs text-red-500">{errors.name}</p>}
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
+                <FileText className="w-4 h-4 text-purple-500" />
+                Description
+              </label>
+              <textarea
+                value={formData.description}
+                onChange={(e) => updateField("description", e.target.value)}
+                className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl
+                           focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                           focus:bg-white outline-none transition-all text-gray-800
+                           placeholder:text-gray-400 resize-none"
+                rows={3}
+                maxLength={255}
+                placeholder="Describe this category..."
+                aria-invalid={Boolean(errors.description)}
+              />
+              <div className="flex justify-between gap-3">
+                {errors.description ? (
+                  <p className="text-xs text-red-500">{errors.description}</p>
+                ) : (
+                  <span />
+                )}
+                <p className="text-xs text-gray-400">{formData.description.length}/255</p>
+              </div>
+            </div>
+
+            {submitError && (
+              <div className="flex items-start gap-2 rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
+                <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
+                <p>{submitError}</p>
+              </div>
+            )}
+
+            <div className="flex gap-3 pt-4">
+              <button
+                type="button"
+                onClick={handleClose}
+                disabled={submitting}
+                className="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl
+                           hover:bg-gray-50 transition-colors font-medium text-gray-600
+                           disabled:opacity-50"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={submitting}
+                className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5
+                           bg-gradient-to-r from-blue-600 to-indigo-600 text-white
+                           rounded-xl hover:from-blue-700 hover:to-indigo-700
+                           transition-all font-semibold disabled:opacity-50
+                           shadow-lg shadow-blue-600/25 hover:shadow-xl
+                           hover:shadow-blue-600/30"
+              >
+                {submitting && <Loader2 className="w-4 h-4 animate-spin" />}
+                {isEditing ? "Update Category" : "Add Category"}
+              </button>
+            </div>
+          </form>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
 };
 
-export default CategoryFormModal;
\ No newline at end of file
+export default CategoryFormModal;
diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx
index 31bb9b91..677f7738 100644
--- a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/CategorySidebar.jsx
@@ -1,121 +1,247 @@
-import { useState, useEffect } from 'react';
-import { ChevronRight, RefreshCw, FolderPlus } from 'lucide-react';
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { ChevronRight, Edit2, FolderPlus, RefreshCw, Trash2 } from 'lucide-react';
+import toast from 'react-hot-toast';
 import api from "@services/common/api";
 import AdminSkeleton from '../../AdminSkeleton';
 import { useAdminTheme } from '@context/AdminThemeContext';
 
-// ============================================
-// SKELETON (Private)
-// ============================================
-const CategorySkeleton = () => {
-  const { isDark } = useAdminTheme();
-  return (
-    <div className="space-y-2">
-      {[1, 2, 3, 4].map(i => (
-        <div key={i} className={`h-12 rounded-xl animate-pulse ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`} />
-      ))}
-    </div>
-  );
+const getCategoryList = (responseData) => {
+  if (Array.isArray(responseData)) return responseData;
+  return responseData?.data?.content || responseData?.content || [];
+};
+
+const getRelationCount = (category) => {
+  const foodCount = Array.isArray(category.foodIds)
+    ? category.foodIds.length
+    : category.foodIds?.size || 0;
+  const menuCount = Array.isArray(category.menuIds)
+    ? category.menuIds.length
+    : category.menuIds?.size || 0;
+
+  return foodCount + menuCount;
+};
+
+const getErrorMessage = (err, fallback) =>
+  err.response?.data?.message || err.response?.data?.error || err.message || fallback;
+
+const isValidCategoryId = (categoryId) => {
+  const normalizedId = String(categoryId ?? '').trim();
+  const isNumericId = /^\d+$/.test(normalizedId);
+  const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(normalizedId);
+
+  return isNumericId || isUuid;
 };
 
-// ============================================
-// MAIN COMPONENT
-// ============================================
-const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, setAllCategories }) => {
+const getSafeCategoryId = (categoryId) => {
+  const normalizedId = String(categoryId ?? '').trim();
+
+  if (!isValidCategoryId(normalizedId)) {
+    throw new Error('Invalid category selected');
+  }
+
+  return encodeURIComponent(normalizedId);
+};
+
+const CategorySidebar = forwardRef(({
+  selectedCategory,
+  onCategoryChange,
+  onAddCategory,
+  onEditCategory,
+  setAllCategories,
+  onCategoryDeleted
+}, ref) => {
   const [categories, setCategories] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [deletingId, setDeletingId] = useState(null);
   const { isDark } = useAdminTheme();
 
-  // ------------------------------------
-  // FALLBACK DATA
-  // ------------------------------------
-  const fallbackCategories = [
-    { categoryId: 'all', name: 'All Items', count: 24, emoji: '🍽️', foodIds:[] },
-    { categoryId: 'main-course', name: 'Main Course', count: 12, emoji: '🥘', foodIds:[]  },
-    { categoryId: 'starters', name: 'Starters', count: 8, emoji: '🍛', foodIds:[]  },
-    { categoryId: 'drinks', name: 'Drinks', count: 4, emoji: '🥛', foodIds:[]  },
-    { categoryId: 'desserts', name: 'Desserts', count: 0, emoji: '🍰', foodIds:[]  },
-  ];
-
-  // ------------------------------------
-  // FETCH
-  // ------------------------------------
   useEffect(() => {
     fetchCategories();
   }, []);
 
+  useImperativeHandle(ref, () => ({
+    refreshCategories() {
+      fetchCategories();
+    },
+    refreshCategoryCounts() {
+      fetchCategories();
+    }
+  }));
+
   const fetchCategories = async () => {
     try {
       setLoading(true);
-      var response = null;
-      response = await api.get(`/secure/api/v1/categories/getallcategories?page=0&size=10&sortBy=name&sortDirection=asc`);
-      const data = [
-        { categoryId: 'all', name: 'All Items', foodIds: [] },
-        ...response.data.data.content
-      ];
-
-      setCategories(data);
-      setAllCategories(response.data.data.content);
+      setError('');
+
+      const response = await api.get('/secure/api/v1/categories/activecategories', {
+        params: { page: 0, size: 100, sort: 'name' }
+      });
+
+      const categoryList = getCategoryList(response.data);
+      const visibleCategories = categoryList.filter((category) => !category.isDelete);
+      setCategories(visibleCategories);
+      setAllCategories(visibleCategories);
     } catch (err) {
-      console.error('Failed to fetch categories:', err);
-      setCategories(fallbackCategories);
-      setAllCategories(fallbackCategories);
+      console.error('Failed to fetch categories:', err.response?.data || err);
+      const message = getErrorMessage(err, 'Failed to load categories');
+      setError(message);
+      setCategories([]);
+      setAllCategories([]);
     } finally {
       setLoading(false);
     }
   };
 
-  // ------------------------------------
-  // RENDER
-  // ------------------------------------
+  const handleDelete = async (category) => {
+    let safeCategoryId;
+
+    try {
+      safeCategoryId = getSafeCategoryId(category.categoryId);
+    } catch (err) {
+      console.error('Invalid category id:', category.categoryId);
+      toast.error('Invalid category selected');
+      return;
+    }
+
+    const relationCount = getRelationCount(category);
+    const relationText = relationCount > 0
+      ? ` It is linked to ${relationCount} item${relationCount === 1 ? '' : 's'}.`
+      : '';
+
+    if (!window.confirm(`Delete "${category.name}"?${relationText}`)) return;
+
+    try {
+      setDeletingId(category.categoryId);
+      await api.delete(`/secure/api/v1/categories/delete/${safeCategoryId}`);
+      toast.success('Category deleted successfully');
+
+      setCategories((prev) => prev.filter((item) => item.categoryId !== category.categoryId));
+      setAllCategories((prev) => prev.filter((item) => item.categoryId !== category.categoryId));
+
+      if (selectedCategory === category.categoryId) {
+        onCategoryChange('all');
+      }
+
+      onCategoryDeleted();
+    } catch (err) {
+      console.error('Failed to delete category:', err.response?.data || err);
+      toast.error(getErrorMessage(err, 'Failed to delete category'));
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  const sidebarItems = [
+    {
+      categoryId: 'all',
+      name: 'All Items',
+      foodIds: categories.flatMap((category) => category.foodIds || []),
+      menuIds: [],
+      isSystem: true,
+    },
+    ...categories,
+  ];
+
   return (
-    <div className="lg:w-64 flex-shrink-0">
+    <div className="lg:w-72 flex-shrink-0">
       <div className={`rounded-2xl p-4 shadow-sm border ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
-        {/* Header */}
         <div className="flex items-center justify-between mb-4">
-          <h2 className={`font-semibold ${isDark ? 'text-gray-100' : 'text-gray-800'}`}>Categories</h2>
+          <div>
+            <h2 className={`font-semibold ${isDark ? 'text-gray-100' : 'text-gray-800'}`}>Categories</h2>
+            {!loading && (
+              <p className={`text-xs mt-0.5 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
+                {categories.length} active
+              </p>
+            )}
+          </div>
           <button
+            type="button"
             onClick={fetchCategories}
             className={`transition-colors ${isDark ? 'text-gray-500 hover:text-blue-400' : 'text-gray-400 hover:text-blue-600'}`}
+            aria-label="Refresh categories"
           >
             <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
           </button>
         </div>
 
-        {/* Categories List */}
         {loading ? (
           <AdminSkeleton variant="category" />
+        ) : error ? (
+          <div className={`rounded-xl border p-4 text-sm ${isDark ? 'border-red-900/40 bg-red-950/20 text-red-300' : 'border-red-100 bg-red-50 text-red-600'}`}>
+            <p className="font-medium">{error}</p>
+            <button
+              type="button"
+              onClick={fetchCategories}
+              className="mt-3 text-xs font-semibold text-blue-600 hover:text-blue-700"
+            >
+              Try again
+            </button>
+          </div>
         ) : (
           <div className="space-y-2">
-            {categories.map((cat) => (
-              <button
-                key={cat.categoryId}
-                onClick={() => onCategoryChange(cat.categoryId)}
-                className={`w-full flex items-center justify-between p-3 rounded-xl transition-all ${selectedCategory === cat.categoryId
-                  ? 'bg-blue-600 text-white shadow-md shadow-blue-200'
-                  : isDark ? 'hover:bg-gray-700 text-gray-400' : 'hover:bg-blue-50 text-gray-600'
-                  }`}
-              >
-                <div className="flex items-center gap-3">
-                  <span className="text-xl">{cat.emoji}</span>
-                  <span className="font-medium">{cat.name}</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <span
-                    className={`text-sm ${selectedCategory === cat.categoryId ? 'text-white/80' : 'text-gray-400'
-                      }`}
+            {sidebarItems.map((cat) => {
+              const isSelected = selectedCategory === cat.categoryId;
+              const count = Array.isArray(cat.foodIds) ? cat.foodIds.length : 0;
+
+              return (
+                <div
+                  key={cat.categoryId}
+                  className={`group rounded-xl transition-all ${isSelected
+                    ? 'bg-blue-600 text-white shadow-md shadow-blue-200'
+                    : isDark ? 'hover:bg-gray-700 text-gray-400' : 'hover:bg-blue-50 text-gray-600'
+                    }`}
+                >
+                  <button
+                    type="button"
+                    onClick={() => onCategoryChange(cat.categoryId)}
+                    className="w-full flex items-center justify-between gap-3 p-3 text-left"
                   >
-                    {cat.foodIds.length}
-                  </span>
-                  <ChevronRight className={`w-4 h-4 ${selectedCategory === cat.categoryId ? 'text-white/70' : isDark ? 'text-gray-600' : 'text-gray-400'}`} />
+                    <div className="min-w-0">
+                      <span className="block font-medium truncate">{cat.name}</span>
+                      {cat.description && (
+                        <span className={`block text-xs truncate ${isSelected ? 'text-white/70' : 'text-gray-400'}`}>
+                          {cat.description}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2 flex-shrink-0">
+                      <span className={`text-sm ${isSelected ? 'text-white/80' : 'text-gray-400'}`}>
+                        {count}
+                      </span>
+                      <ChevronRight className={`w-4 h-4 ${isSelected ? 'text-white/70' : isDark ? 'text-gray-600' : 'text-gray-400'}`} />
+                    </div>
+                  </button>
+
+                  {!cat.isSystem && (
+                    <div className={`flex items-center justify-end gap-1 px-3 pb-3 ${isSelected ? 'text-white/80' : ''}`}>
+                      <button
+                        type="button"
+                        onClick={() => onEditCategory(cat)}
+                        className={`p-1.5 rounded-lg transition-colors ${isSelected ? 'hover:bg-white/15' : 'hover:bg-blue-100 text-blue-600'}`}
+                        aria-label={`Edit ${cat.name}`}
+                      >
+                        <Edit2 className="w-3.5 h-3.5" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleDelete(cat)}
+                        disabled={deletingId === cat.categoryId}
+                        className={`p-1.5 rounded-lg transition-colors disabled:opacity-50 ${isSelected ? 'hover:bg-white/15' : 'hover:bg-red-100 text-red-600'}`}
+                        aria-label={`Delete ${cat.name}`}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  )}
                 </div>
-              </button>
-            ))}
+              );
+            })}
           </div>
         )}
 
-        {/* Add Category */}
         <button
+          type="button"
           onClick={onAddCategory}
           className={`w-full mt-4 flex items-center justify-center gap-2 p-3 border-2 border-dashed rounded-xl transition-all text-sm ${isDark ? 'border-gray-600 text-gray-500 hover:border-blue-500 hover:text-blue-400' : 'border-gray-200 text-gray-400 hover:border-blue-300 hover:text-blue-500'}`}
         >
@@ -125,6 +251,6 @@ const CategorySidebar = ({ selectedCategory, onCategoryChange, onAddCategory, se
       </div>
     </div>
   );
-};
+});
 
-export default CategorySidebar;
\ No newline at end of file
+export default CategorySidebar;
diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx
index ec410b39..ae314822 100644
--- a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemFormModal.jsx
@@ -10,7 +10,7 @@ const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/gi
 const getErrorMessage = (err, fallback) =>
   err.response?.data?.message || err.response?.data?.error || fallback;
 
-const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => {
+const MenuFormModal = ({ isOpen, onClose, onSaved, editingItem, allCategories }) => {
   const [categories, setCategories] = useState([]);
   const [formData, setFormData] = useState({
     name: '',
@@ -157,7 +157,11 @@ const MenuFormModal = ({ isOpen, onClose, editingItem, allCategories }) => {
         toast.success('Food item created successfully');
       }
 
-      onClose();
+      if (onSaved) {
+        onSaved();
+      } else {
+        onClose();
+      }
     } catch (err) {
       console.error("Failed to save item:", err.response?.data || err);
       const message = getErrorMessage(err, 'Failed to save food item');
diff --git a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemsGrid.jsx b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemsGrid.jsx
index 43b307ab..26f653f7 100644
--- a/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemsGrid.jsx
+++ b/RestroHub-FrontEnd/src/components/admin/menu/menuCard/FoodItemsGrid.jsx
@@ -11,7 +11,7 @@ const getPageContent = (data) => {
   return data?.content || data?.data?.content || [];
 };
 
-const MenuItemsGrid = forwardRef(({ selectedCategory, onEditItem }, ref) => {
+const MenuItemsGrid = forwardRef(({ selectedCategory, onEditItem, onFoodItemsChanged }, ref) => {
   const [menuItems, setMenuItems] = useState([]);
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
@@ -108,6 +108,7 @@ const MenuItemsGrid = forwardRef(({ selectedCategory, onEditItem }, ref) => {
       ...prev,
       totalElements: Math.max(prev.totalElements - 1, 0),
     }));
+    onFoodItemsChanged?.();
   };
 
   const goToPreviousPage = () => {
diff --git a/RestroHub-FrontEnd/src/services/public/ApiService.js b/RestroHub-FrontEnd/src/services/public/ApiService.js
index 9d3c4623..2ec5bd96 100644
--- a/RestroHub-FrontEnd/src/services/public/ApiService.js
+++ b/RestroHub-FrontEnd/src/services/public/ApiService.js
@@ -60,6 +60,7 @@ try {
     console.error("Failed to parse response:", err);
     throw new Error("Invalid server response");
 }
+};
 
 const ApiService = {
     // ============================================