diff --git a/frontend/my-app/src/pages/Admin/EventsPage.jsx b/frontend/my-app/src/pages/Admin/EventsPage.jsx
index e474af9..1b72db6 100644
--- a/frontend/my-app/src/pages/Admin/EventsPage.jsx
+++ b/frontend/my-app/src/pages/Admin/EventsPage.jsx
@@ -7,6 +7,7 @@ import EventCard from "../../components/EventsOffice/EventCard";
 import axios from 'axios';
 import AuthContext from '../../context/AuthContext';
 import Loader from '../../components/Shared/Loader';
+import EmptyState from '../../components/Shared/EmptyState';
 
 
 
@@ -234,13 +235,27 @@ export default function ViewEvents() {
             </div>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            {loading ? (
-              <Loader size="large" className="h-64" />
-            ) : error ? (
-              <p>Error: {error}</p>
-            ) : (
-              filteredEvents.map((evt) => (
+          {loading ? (
+            <Loader size="large" className="h-64" />
+          ) : error ? (
+            <div className="text-center py-12">
+              <div className="text-red-400 text-6xl mb-4">⚠️</div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-2">Error Loading Events</h3>
+              <p className="text-gray-600 mb-4">{error}</p>
+            </div>
+          ) : filteredEvents.length === 0 ? (
+            <EmptyState 
+              title="No Events Found"
+              message={
+                query.trim() 
+                  ? `No events found matching "${query}". Try adjusting your search terms.`
+                  : "There are no upcoming events at the moment. Events will appear here once they are created."
+              }
+              icon={<span className="text-4xl">📅</span>}
+            />
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {filteredEvents.map((evt) => (
                 <EventCard
                   key={evt._id}
                   event={evt}
@@ -249,9 +264,9 @@ export default function ViewEvents() {
                   showActions={true}
                   showFullWorkshopActions={evt.type !== 'workshop'}
                 />
-              ))
-            )}
-          </div>
+              ))}
+            </div>
+          )}
         </div>
       </main>
 
diff --git a/frontend/my-app/src/pages/Admin/ManagePage.jsx b/frontend/my-app/src/pages/Admin/ManagePage.jsx
index 7d48855..0b91ecd 100644
--- a/frontend/my-app/src/pages/Admin/ManagePage.jsx
+++ b/frontend/my-app/src/pages/Admin/ManagePage.jsx
@@ -15,6 +15,7 @@ import MainHeader from "../../components/Shared/MainHeader";
 import Swal from 'sweetalert2';
 import axios from 'axios';
 import AuthContext from "../../context/AuthContext";
+import EmptyState from '../../components/Shared/EmptyState';
 
 export default function ManagePage() {
   const [mobileOpen, setMobileOpen] = useState(false);
@@ -287,11 +288,20 @@ export default function ManagePage() {
                 {/* Accounts List */}
                 <div className="space-y-4">
                   {currentAccounts.length === 0 ? (
-                    <div className="text-center py-12">
-                      <User className="h-16 w-16 text-gray-300 mx-auto mb-4" />
-                      <h3 className="text-lg font-medium text-gray-500 mb-2">No {activeTab} accounts found</h3>
-                      <p className="text-gray-400">Create your first {activeTab.toLowerCase()} account to get started</p>
-                    </div>
+                    <EmptyState 
+                      title={`No ${activeTab} Accounts Found`}
+                      message={`There are no ${activeTab.toLowerCase()} accounts yet. Create your first account to get started!`}
+                      icon={<User className="h-16 w-16 text-gray-400" />}
+                      actionButton={
+                        <button
+                          onClick={() => setShowCreateModal(true)}
+                          className="inline-flex items-center gap-2 rounded-md bg-[#001F3F] px-4 py-2 text-sm font-medium text-white hover:bg-[#0b2d5c]"
+                        >
+                          <Plus className="h-4 w-4" />
+                          <span>Create {activeTab} Account</span>
+                        </button>
+                      }
+                    />
                   ) : (
                     currentAccounts.map((account) => (
                       <div
diff --git a/frontend/my-app/src/pages/Admin/VendorRequestsPage.jsx b/frontend/my-app/src/pages/Admin/VendorRequestsPage.jsx
index 5cf0dc3..34bc87d 100644
--- a/frontend/my-app/src/pages/Admin/VendorRequestsPage.jsx
+++ b/frontend/my-app/src/pages/Admin/VendorRequestsPage.jsx
@@ -7,6 +7,7 @@ import Footer from '../../components/Shared/Footer';
 import AdminSideBar from "../../components/Admin/AdminSideBar";
 import Swal from 'sweetalert2';
 import Loader from '../../components/Shared/Loader';
+import EmptyState from '../../components/Shared/EmptyState';
 
 // Attendees Modal Component
 function AttendeesModal({ attendees, onClose }) {
@@ -511,10 +512,15 @@ export default function VendorRequests() {
                   ))}
                 </div>
               ) : (
-                <div className="text-center py-12 text-gray-500">
-                  No bazaar requests found
-                  {filterStatus !== 'all' && ` with status: ${filterStatus}`}
-                </div>
+                <EmptyState 
+                  title="No Bazaar Requests Found"
+                  message={
+                    filterStatus !== 'all' 
+                      ? `No bazaar requests found with status: ${filterStatus}` 
+                      : "There are no bazaar requests at the moment. Check back later for new vendor applications!"
+                  }
+                  icon={<span className="text-4xl">🏪</span>}
+                />
               )
             ) : (
               filteredBoothRequests.length > 0 ? (
@@ -529,10 +535,15 @@ export default function VendorRequests() {
                   ))}
                 </div>
               ) : (
-                <div className="text-center py-12 text-gray-500">
-                  No booth requests found
-                  {filterStatus !== 'all' && ` with status: ${filterStatus}`}
-                </div>
+                <EmptyState 
+                  title="No Booth Requests Found"
+                  message={
+                    filterStatus !== 'all' 
+                      ? `No booth requests found with status: ${filterStatus}` 
+                      : "There are no booth requests at the moment. Check back later for new vendor applications!"
+                  }
+                  icon={<span className="text-4xl">🏢</span>}
+                />
               )
             )}
           </div>
diff --git a/frontend/my-app/src/pages/EventsOffice/Bazars.jsx b/frontend/my-app/src/pages/EventsOffice/Bazars.jsx
index 0d44b70..783ee37 100644
--- a/frontend/my-app/src/pages/EventsOffice/Bazars.jsx
+++ b/frontend/my-app/src/pages/EventsOffice/Bazars.jsx
@@ -7,6 +7,7 @@ import { Plus } from "lucide-react";
 import Swal from "sweetalert2";
 import axios from 'axios';
 import AuthContext from '../../context/AuthContext';
+import EmptyState from '../../components/Shared/EmptyState';
 
 const initialBazaars = [
   {
@@ -242,17 +243,38 @@ export default function Bazars() {
             </div>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            {filtered.map((b) => (
-              <EventCard 
-                key={b.id} 
-                event={b} 
-                onEdit={openEdit} 
-                eventType="bazaar"
-                showActions={true}
-              />
-            ))}
-          </div>
+          {filtered.length === 0 ? (
+            <EmptyState 
+              title="No Bazaars Found"
+              message={
+                query.trim() 
+                  ? `No bazaars found matching "${query}". Try adjusting your search terms.`
+                  : "There are no bazaars created yet. Click 'New Bazaar' to create your first bazaar!"
+              }
+              icon={<span className="text-4xl">🏪</span>}
+              actionButton={
+                <button
+                  onClick={openCreate}
+                  className="inline-flex items-center gap-2 rounded-md bg-[#001F3F] px-4 py-2 text-sm font-medium text-white hover:bg-[#0b2d5c]"
+                >
+                  <Plus className="h-4 w-4" />
+                  <span>Create New Bazaar</span>
+                </button>
+              }
+            />
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {filtered.map((b) => (
+                <EventCard 
+                  key={b.id} 
+                  event={b} 
+                  onEdit={openEdit} 
+                  eventType="bazaar"
+                  showActions={true}
+                />
+              ))}
+            </div>
+          )}
         </div>
       </main>
 
diff --git a/frontend/my-app/src/pages/EventsOffice/ViewEvents.jsx b/frontend/my-app/src/pages/EventsOffice/ViewEvents.jsx
index bd9d389..862b073 100644
--- a/frontend/my-app/src/pages/EventsOffice/ViewEvents.jsx
+++ b/frontend/my-app/src/pages/EventsOffice/ViewEvents.jsx
@@ -7,6 +7,7 @@ import EventCard from "../../components/EventsOffice/EventCard";
 import axios from 'axios';
 import AuthContext from '../../context/AuthContext';
 import Loader from '../../components/Shared/Loader';
+import EmptyState from '../../components/Shared/EmptyState';
 
 
 
@@ -233,13 +234,27 @@ export default function ViewEvents() {
             </div>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            {loading ? (
-              <Loader size="large" className="h-64" />
-            ) : error ? (
-              <p>Error: {error}</p>
-            ) : (
-              filteredEvents.map((evt) => (
+          {loading ? (
+            <Loader size="large" className="h-64" />
+          ) : error ? (
+            <div className="text-center py-12">
+              <div className="text-red-400 text-6xl mb-4">⚠️</div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-2">Error Loading Events</h3>
+              <p className="text-gray-600 mb-4">{error}</p>
+            </div>
+          ) : filteredEvents.length === 0 ? (
+            <EmptyState 
+              title="No Events Found"
+              message={
+                query.trim() 
+                  ? `No events found matching "${query}". Try adjusting your search terms.`
+                  : "There are no upcoming events at the moment. Events will appear here once they are created."
+              }
+              icon={<span className="text-4xl">📅</span>}
+            />
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {filteredEvents.map((evt) => (
                 <EventCard
                   key={evt._id}
                   event={evt}
@@ -248,9 +263,9 @@ export default function ViewEvents() {
                   showActions={true}
                   showFullWorkshopActions={evt.type !== 'workshop'}
                 />
-              ))
-            )}
-          </div>
+              ))}
+            </div>
+          )}
         </div>
       </main>
 
diff --git a/frontend/my-app/src/pages/EventsOffice/Workshops.jsx b/frontend/my-app/src/pages/EventsOffice/Workshops.jsx
index 7faa480..711507b 100644
--- a/frontend/my-app/src/pages/EventsOffice/Workshops.jsx
+++ b/frontend/my-app/src/pages/EventsOffice/Workshops.jsx
@@ -7,6 +7,7 @@ import Swal from "sweetalert2";
 import { StatusPill } from "../../components/Shared/StatusPill";
 import axios from 'axios';
 import AuthContext from '../../context/AuthContext';
+import EmptyState from '../../components/Shared/EmptyState';
 
 // In-memory sample workshops created by professors
 const initialWorkshops = [
@@ -269,18 +270,30 @@ export default function Workshops() {
             </div>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            {filtered.map((evt) => (
-             <EventCard
-             key={evt._id}
-             event={evt}
-             onDelete={handleDelete}
-             eventType= {evt.type}
-             showActions={true}
-             showFullWorkshopActions={evt.type !== 'workshop'}
-         />
-            ))}
-          </div>
+          {filtered.length === 0 ? (
+            <EmptyState 
+              title="No Workshops Found"
+              message={
+                query.trim() 
+                  ? `No workshops found matching "${query}". Try adjusting your search terms.`
+                  : "There are no workshop proposals at the moment. Workshop proposals will appear here once professors submit them."
+              }
+              icon={<span className="text-4xl">📚</span>}
+            />
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {filtered.map((evt) => (
+               <EventCard
+               key={evt._id}
+               event={evt}
+               onDelete={handleDelete}
+               eventType= {evt.type}
+               showActions={true}
+               showFullWorkshopActions={evt.type !== 'workshop'}
+           />
+              ))}
+            </div>
+          )}
         </div>
       </main>
 
diff --git a/frontend/my-app/src/pages/Vendors/VendorBazaars.jsx b/frontend/my-app/src/pages/Vendors/VendorBazaars.jsx
index fc43f30..4920093 100644
--- a/frontend/my-app/src/pages/Vendors/VendorBazaars.jsx
+++ b/frontend/my-app/src/pages/Vendors/VendorBazaars.jsx
@@ -9,6 +9,7 @@ import Swal from 'sweetalert2';
 import axios from "axios";
 import  AuthContext  from "../../context/AuthContext";
 import Loader from '../../components/Shared/Loader';
+import EmptyState from '../../components/Shared/EmptyState';
 
  const validateEmail = (email) => {
   // Regex from the HTML5 specification
@@ -436,6 +437,12 @@ const fetchBazaars = async () => {
 
           {loading ? (
             <Loader size="large" className="h-64" />
+          ) : bazaars.length === 0 ? (
+            <EmptyState 
+              title="No Bazaars Available"
+              message="There are no upcoming bazaars at the moment. Check back later for new opportunities to showcase your products!"
+              icon={<span className="text-4xl">🏪</span>}
+            />
           ) : (
             <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
               {bazaars.map((bazaar) => (
diff --git a/frontend/my-app/src/pages/Vendors/VendorMyEvents.jsx b/frontend/my-app/src/pages/Vendors/VendorMyEvents.jsx
index f447791..e1180b4 100644
--- a/frontend/my-app/src/pages/Vendors/VendorMyEvents.jsx
+++ b/frontend/my-app/src/pages/Vendors/VendorMyEvents.jsx
@@ -8,6 +8,7 @@ import { MyEventCard } from "../../components/Shared/MyEventCard";
 import axios from "axios";
 import  AuthContext  from "../../context/AuthContext";
 import Loader from '../../components/Shared/Loader';
+import EmptyState from '../../components/Shared/EmptyState';
 
 export default function VendorMyEvents() {
   const [events, setEvents] = useState({upcomingBazaars: [], upcomingBooths: []});
@@ -96,17 +97,18 @@ export default function VendorMyEvents() {
 
           {loading ? (
             <Loader size="large" className="h-64" />
+          ) : view === "accepted" ? (
+            <EventGrid 
+              title="✅ Accepted Events" 
+              events={[...events.upcomingBazaars, ...events.upcomingBooths]}
+              viewType="accepted"
+            />
           ) : (
-            <>
-              {view === "accepted" ? (
-                <EventGrid 
-                  title="✅ Accepted Events" 
-                  events={[...events.upcomingBazaars, ...events.upcomingBooths]} 
-                />
-              ) : (
-                <EventGrid title="🕓 Pending / Rejected Requests" events={requests} />
-              )}
-            </>
+            <EventGrid 
+              title="🕓 Pending / Rejected Requests" 
+              events={requests}
+              viewType="requests"
+            />
           )}
         </div>
 
@@ -124,7 +126,7 @@ export default function VendorMyEvents() {
   );
 }
 
-function EventGrid({ title, events }) {
+function EventGrid({ title, events, viewType }) {
   // Check if this is the requests view
   const isRequestsView = events && typeof events === 'object' && ('bazaarRequests' in events || 'boothRequests' in events);
   
@@ -137,7 +139,11 @@ function EventGrid({ title, events }) {
       <section>
         <h2 className="text-2xl font-semibold mb-6 text-[#001F3F]">{title}</h2>
         {!hasBazaarRequests && !hasBoothRequests ? (
-          <p className="text-gray-600">No requests found.</p>
+          <EmptyState 
+            title="No Requests Found"
+            message="You don't have any pending or rejected requests at the moment. Apply for bazaars or booths to see your applications here."
+            icon={<span className="text-4xl">📋</span>}
+          />
         ) : (
           <div className="space-y-8">
             {hasBazaarRequests && (
@@ -178,7 +184,14 @@ function EventGrid({ title, events }) {
     <section>
       <h2 className="text-2xl font-semibold mb-6 text-[#001F3F]">{title}</h2>
       {eventArray.length === 0 ? (
-        <p className="text-gray-600">No events found.</p>
+        <EmptyState 
+          title={viewType === "accepted" ? "No Accepted Events" : "No Events Found"}
+          message={viewType === "accepted" 
+            ? "You don't have any accepted events yet. Once your applications are approved, they will appear here."
+            : "No events found for this category."
+          }
+          icon={<span className="text-4xl">✅</span>}
+        />
       ) : (
         <div className="grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-8">
           {eventArray.map((event) => (
diff --git a/frontend/my-app/src/pages/users/Courts.jsx b/frontend/my-app/src/pages/users/Courts.jsx
index c15acc7..e004639 100644
--- a/frontend/my-app/src/pages/users/Courts.jsx
+++ b/frontend/my-app/src/pages/users/Courts.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import UserDashboard from '../../components/users/userDashboard';
 import { Calendar, Clock, Users, MapPin } from 'lucide-react';
 import Loader from '../../components/Shared/Loader';
+import EmptyState from '../../components/Shared/EmptyState';
 
 const Courts = () => {
   const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
@@ -184,25 +185,34 @@ const Courts = () => {
 
                       {/* Time Slots Column */}
                       <td className="px-6 py-4">
-                        <div className="flex flex-wrap gap-2 max-w-4xl">
-                          {availability.map((slot) => (
-                            <button
-                              key={slot.id}
-                              onClick={() => handleTimeSlotClick(courtType, slot)}
-                              disabled={!slot.available}
-                              className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
-                        slot.available 
-                                  ? 'bg-green-100 text-green-800 border border-green-200 hover:bg-green-200 hover:scale-105 cursor-pointer'
-                                  : 'bg-red-100 text-red-800 border border-red-200 cursor-not-allowed opacity-60'
-                              }`}
-                            >
-                              <div className="flex items-center">
-                                <Clock className="w-3 h-3 mr-1" />
-                                {slot.display}
-                      </div>
-                            </button>
-                          ))}
+                        {availability.every(slot => !slot.available) ? (
+                          <div className="text-center py-4">
+                            <div className="text-gray-400 text-sm">
+                              <Clock className="w-4 h-4 mx-auto mb-1" />
+                              Fully booked for this date
+                            </div>
+                          </div>
+                        ) : (
+                          <div className="flex flex-wrap gap-2 max-w-4xl">
+                            {availability.map((slot) => (
+                              <button
+                                key={slot.id}
+                                onClick={() => handleTimeSlotClick(courtType, slot)}
+                                disabled={!slot.available}
+                                className={`px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+                          slot.available 
+                                    ? 'bg-green-100 text-green-800 border border-green-200 hover:bg-green-200 hover:scale-105 cursor-pointer'
+                                    : 'bg-red-100 text-red-800 border border-red-200 cursor-not-allowed opacity-60'
+                                }`}
+                              >
+                                <div className="flex items-center">
+                                  <Clock className="w-3 h-3 mr-1" />
+                                  {slot.display}
                         </div>
+                              </button>
+                            ))}
+                          </div>
+                        )}
                       </td>
                     </tr>
                   );
diff --git a/frontend/my-app/src/pages/users/MyWorkshops.jsx b/frontend/my-app/src/pages/users/MyWorkshops.jsx
index b146318..8301393 100644
--- a/frontend/my-app/src/pages/users/MyWorkshops.jsx
+++ b/frontend/my-app/src/pages/users/MyWorkshops.jsx
@@ -6,6 +6,7 @@ import EventCard from '../../components/EventsOffice/EventCard';
 import Swal from 'sweetalert2';
 import { Plus, Edit3, Trash2, Eye, Users, Calendar, MapPin, Clock } from 'lucide-react';
 import Loader from '../../components/Shared/Loader';
+import EmptyState from '../../components/Shared/EmptyState';
 
 const MyWorkshops = () => {
   const { token, user } = useContext(AuthContext);
@@ -371,31 +372,26 @@ const MyWorkshops = () => {
         </div>
 
         {filteredWorkshops.length === 0 && (
-          <div className="text-center py-16">
-            <div className="mb-6">
-              <div className="bg-blue-50 rounded-full w-20 h-20 mx-auto flex items-center justify-center">
-                <svg className="w-10 h-10 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
-                </svg>
-              </div>
-            </div>
-            <h3 className="text-2xl font-bold text-gray-900 mb-3">No Workshops Yet</h3>
-            <p className="text-gray-600 mb-6 max-w-md mx-auto">
-              {searchTerm || statusFilter !== 'all' 
+          <EmptyState 
+            title="No Workshops Yet"
+            message={
+              searchTerm || statusFilter !== 'all' 
                 ? "No workshops match your current search criteria. Try adjusting your filters or search terms." 
                 : "Share your knowledge by creating your first workshop. It's a great way to engage with students and colleagues."
-              }
-            </p>
-            {!searchTerm && statusFilter === 'all' && (
-              <button
-                onClick={handleCreateWorkshop}
-                className="inline-flex items-center gap-2 bg-[#001F3F] text-white px-6 py-3 rounded-lg hover:bg-[#003366] transition-all duration-300 font-medium shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
-              >
-                <Plus className="h-5 w-5" />
-                Create Your First Workshop
-              </button>
-            )}
-          </div>
+            }
+            icon={<span className="text-4xl">📚</span>}
+            actionButton={
+              !searchTerm && statusFilter === 'all' ? (
+                <button
+                  onClick={handleCreateWorkshop}
+                  className="inline-flex items-center gap-2 bg-[#001F3F] text-white px-6 py-3 rounded-lg hover:bg-[#003366] transition-all duration-300 font-medium shadow-md hover:shadow-lg transform hover:-translate-y-0.5"
+                >
+                  <Plus className="h-5 w-5" />
+                  Create Your First Workshop
+                </button>
+              ) : null
+            }
+          />
         )}
         </div>