diff --git a/src/components/Complaints-register-new/index.js b/src/components/Complaints-register-new/index.js
index ef05b9e..58755db 100644
--- a/src/components/Complaints-register-new/index.js
+++ b/src/components/Complaints-register-new/index.js
@@ -3,11 +3,9 @@ import { connect } from "react-redux";
 import moment from "moment";
 
 import { tailwindWrapper } from "../../../../../formula_one/src/utils/tailwindWrapper";
-import { Loading } from "formula_one";
 
 import { getComplaints } from "../../actions/complaints";
 import { complaintsUrl } from "../../urls";
-import { entries } from "../constants";
 
 class ComplaintsRegisterNew extends React.Component {
   constructor(props) {
@@ -43,11 +41,7 @@ class ComplaintsRegisterNew extends React.Component {
 
   render() {
     const { complaints } = this.props;
-    const links = [complaints.links];
-
     const { complaintsLoading } = this.state;
-    console.log(complaints, links);
-
     return (
       <div className={tailwindWrapper("w-full")}>
         {this.state.error && (
@@ -83,14 +77,14 @@ class ComplaintsRegisterNew extends React.Component {
           My Complaints
         </h3>
 
-        {!complaintsLoading &&
-        complaints.results &&
-        complaints.results.length > 0 ? (
+        {!complaintsLoading && complaints && complaints.length > 0 ? (
           <div className={tailwindWrapper("overflow-x-auto my-8")}>
             <table
               className={tailwindWrapper("min-w-full divide-y divide-gray-200")}
             >
-              <thead className={tailwindWrapper("bg-[#6381EB]")}>
+              <thead
+                className={tailwindWrapper("bg-[#6381EB] sticky top-0 z-50")}
+              >
                 <tr className={tailwindWrapper("")}>
                   <th
                     scope="col"
@@ -137,7 +131,7 @@ class ComplaintsRegisterNew extends React.Component {
               <tbody
                 className={tailwindWrapper("bg-white divide-y divide-gray-200")}
               >
-                {complaints.results.map((complaint, index) => (
+                {complaints.map((complaint, index) => (
                   <tr
                     key={index}
                     className={tailwindWrapper(
@@ -202,4 +196,4 @@ const mapDispatchToProps = (dispatch) => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(ComplaintsRegisterNew);
+)(ComplaintsRegisterNew);
\ No newline at end of file
diff --git a/src/components/complaints-new/index.js b/src/components/complaints-new/index.js
index d0f7261..2910532 100644
--- a/src/components/complaints-new/index.js
+++ b/src/components/complaints-new/index.js
@@ -39,17 +39,31 @@ class ComplaintForm extends Component {
 
   handleSubmit = (e) => {
     e.preventDefault();
-    let data = {
-      complaintType: this.state.category,
-      description: this.state.description.trim(),
-      startTime: this.state.startTime,
-      endTime: this.state.endTime,
-    };
+    const formData = new FormData();
+
+    formData.append("complaintType", this.state.category);
+    formData.append("description", this.state.description.trim());
+
+
+    // TODO map it to timing in backend 
+    // const timing = {
+    //   startTime: this.state.startTime,
+    //   endTime: this.state.endTime,
+    // };
+    // formData.append("timing", JSON.stringify(timing));
+
+
+    // TODO map it to items in backend 
+    // if (this.state.selectedFile) {
+    //   formData.append("items", this.state.selectedFile);
+    // }
+
     this.setState({
       loading: true,
     });
+
     this.props.addComplaint(
-      data,
+      formData,
       this.props.activeHostel,
       this.successCallBack,
       this.errCallBack
@@ -75,10 +89,7 @@ class ComplaintForm extends Component {
   render() {
     return (
       <div className={tailwindWrapper("w-2/3 ml-16")}>
-        <form
-          onSubmit={this.handleSubmit}
-          className={tailwindWrapper("  mb-8")}
-        >
+        <form onSubmit={this.handleSubmit} className={tailwindWrapper("mb-8")}>
           <div className={tailwindWrapper("mb-4")}>
             <Link
               to="/bhawan_app/complaints"
@@ -224,4 +235,4 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ComplaintForm);
+export default connect(mapStateToProps, mapDispatchToProps)(ComplaintForm);
\ No newline at end of file
diff --git a/src/components/events-card-new/index.js b/src/components/events-card-new/index.js
index 1b2b122..2387d4e 100644
--- a/src/components/events-card-new/index.js
+++ b/src/components/events-card-new/index.js
@@ -4,8 +4,16 @@ import { tailwindWrapper } from "../../../../../formula_one/src/utils/tailwindWr
 
 class EventCard extends Component {
   render() {
-    const { eventName, eventLocation, onRegister, index } = this.props;
-    const backgroundColorClass = index % 2 === 0 ? "bg-[#E5E9FF]" : "bg-white";
+    const {
+      eventName,
+      eventTime,
+      eventLocation,
+      eventDate,
+      onRegister,
+      eventDeadline,
+      id,
+    } = this.props;
+    const backgroundColorClass = id % 2 === 0 ? "bg-white" : "bg-[#E5E9FF]";
 
     return (
       <div
@@ -22,9 +30,11 @@ class EventCard extends Component {
           <p className={tailwindWrapper("text-[#133BC5] mb-1 font-bold")}>
             {eventLocation}
           </p>
-          <p className={tailwindWrapper("mb-1 font-bold")}>Date : 10/12/24</p>
+          <p className={tailwindWrapper("mb-1 font-bold")}>
+            Date : {eventDate}
+          </p>
           <p className={tailwindWrapper("mb-1 text-[#133BC5] font-bold")}>
-            Time : 8:00PM
+            Time :{eventTime}
           </p>
         </div>
         <div className={tailwindWrapper("flex flex-col gap-2")}>
@@ -37,7 +47,7 @@ class EventCard extends Component {
             Register
           </button>
           <p className={tailwindWrapper("text-gray-700 mb-2")}>
-            registration upto 10/12/24 8:00pm
+            registration upto {eventDeadline}
           </p>
         </div>
       </div>
diff --git a/src/components/events-new/index.js b/src/components/events-new/index.js
index eaf1bff..e825238 100644
--- a/src/components/events-new/index.js
+++ b/src/components/events-new/index.js
@@ -1,6 +1,7 @@
 import React, { Component, lazy } from "react";
 import { eventsUrl } from "../../urls";
 import { getEvents } from "../../actions/events";
+import { connect } from "react-redux";
 
 import { tailwindWrapper } from "../../../../../formula_one/src/utils/tailwindWrapper";
 
@@ -10,56 +11,22 @@ class NewEvents extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      events: [],
       loading: true,
-      hasEventThisMonth: false,
     };
   }
 
   componentDidMount() {
-    this.fetchEvents();
+    this.props.getEvents(eventsUrl(this.props.activeHostel));
+    this.state.loading = false;
   }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.activeHostel !== this.props.activeHostel) {
-      this.fetchEvents();
-    }
-  }
-
-  fetchEvents = async () => {
-    try {
-      const response = await getEvents(eventsUrl(this.props.activeHostel));
-      this.setState({
-        events: response.data,
-        loading: false,
-      });
-      this.checkIfEventThisMonth();
-    } catch (error) {
-      console.error("Error fetching events:", error);
-    }
-  };
-
-  checkIfEventThisMonth = () => {
-    const today = new Date();
-    const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-    const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
-
-    const eventsThisMonth = this.state.events.some((event) => {
-      const eventDate = new Date(event.date);
-      return eventDate >= startOfMonth && eventDate <= endOfMonth;
-    });
-
-    this.setState({
-      hasEventThisMonth: eventsThisMonth,
-    });
-  };
-
   handleRegister = (eventName) => {
     alert(`You have registered for ${eventName}`);
   };
 
   render() {
-    const { loading, hasEventThisMonth } = this.state;
+    const { events } = this.props;
+    const { loading } = this.state;
     return (
       <div className={tailwindWrapper("container mx-auto mb-4")}>
         <h2
@@ -79,19 +46,20 @@ class NewEvents extends Component {
           <div>Loading...</div>
         ) : (
           <div>
-            {hasEventThisMonth ? (
-              hasEventThisMonth.map((event, index) => (
+            {events.length > 0 ? (
+              events.map((event, index) => (
                 <EventCard
                   key={index}
                   eventName={event.name}
                   eventLocation={event.location}
                   eventDate={event.date}
                   eventTime={event.timings[0].start}
+                  eventDeadline={event.deadlineDate}
                   onRegister={() => this.handleRegister(event.name)}
                 />
               ))
             ) : (
-              <p>There's no event today.</p>
+              <p>There are no events.</p>
             )}
           </div>
         )}
@@ -100,4 +68,20 @@ class NewEvents extends Component {
   }
 }
 
-export default NewEvents;
+function mapStateToProps(state) {
+  return {
+    events: state.events,
+    loading: state.loading,
+    activeHostel: state.activeHostel,
+  };
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    getEvents: (url) => {
+      dispatch(getEvents(url));
+    },
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(NewEvents);