diff --git a/components/calendar/avcalendar.tsx b/components/calendar/avcalendar.tsx
index b77c138..258463c 100644
--- a/components/calendar/avcalendar.tsx
+++ b/components/calendar/avcalendar.tsx
@@ -211,7 +211,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
 
         if (!start || !end) return;
         //readonly for past dates (ToDo: if not admin)
-        //if (startdate < new Date() || end < new Date() || startdate > end) return;
+        if (startdate < new Date() || end < new Date() || startdate > end) return;
 
         // Check if start and end are on the same day
         if (startdate.toDateString() !== enddate.toDateString()) {
@@ -275,6 +275,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
     };
 
 
+    // REDRAW (PAGING) STYLES FOR THE EVENT DEFINED HERE
     const eventStyleGetter = (event, start, end, isSelected) => {
 
         //console.log("eventStyleGetter: " + event);
@@ -296,10 +297,13 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
             //gray
             backgroundColor = '#a0aec0';
         }
+
+
         if (event.isActive) {
             switch (event.type) {
                 case 'assignment':
-                    backgroundColor = event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS
+                    // backgroundColor = '#48bb78' // always green-500 as we don't pass isConfirmed correctly  
+                    //backgroundColor =  event.isConfirmed ? '#48bb78' : '#f6e05e'; // green-500 and yellow-300 from Tailwind CSS
                     break;
                 case 'recurring':
                     backgroundColor = '#63b3ed'; // blue-300 from Tailwind CSS
@@ -315,7 +319,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
         return {
             style: {
                 backgroundColor,
-                opacity: 0.8,
+                opacity: event.startTime < new Date() ? 0.5 : 1,
                 color: 'white',
                 border: '0px',
                 display: 'block',
@@ -323,7 +327,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
         };
     }
 
-    // Custom Components
+    // INITIAL STYLE FOR THE EVENT DEFINED HERE
     const EventWrapper = ({ event, style }) => {
         const [isHovered, setIsHovered] = useState(false);
         let eventStyle = {
@@ -342,7 +346,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
             //     bgColor = "bg-orange-500";
             // }
             if (event.type === "assignment") {
-                bgColor = event.isBySystem ? "bg-red-500" : (event.isConfirmed ? "bg-green-500" : "bg-yellow-500");
+                bgColor = event.isBySystem ? "bg-red-500" : (event.isConfirmed || true ? "bg-green-500" : "bg-yellow-500");
 
                 //event.title = event.publisher.name; //ToDo: add other publishers names
                 //event.title = common.getTimeFomatted(event.startTime) + " - " + common.getTimeFomatted(event.endTime);
@@ -365,6 +369,7 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
                 }
             }
 
+
             eventStyle = {
                 ...style,
                 // backgroundColor: bgColorClass,
@@ -376,7 +381,9 @@ const AvCalendar = ({ publisherId, events, selectedDate }) => {
                 overflow: 'hidden',  // Hide overflowed content
                 textOverflow: 'ellipsis' // Add ellipsis to text that's too long to fit
             };
-
+            if (event.date < new Date()) {
+                eventStyle.opacity = 0.5;
+            }
 
         }
         const onDelete = (event) => {