diff --git a/client/src/pages/CreateEventsPage.tsx b/client/src/pages/CreateEventsPage.tsx
index a1b4c7e..ac34db5 100644
--- a/client/src/pages/CreateEventsPage.tsx
+++ b/client/src/pages/CreateEventsPage.tsx
@@ -36,9 +36,12 @@ const validationSchema = Yup.object({
     .required("Date is required"),
   time: Yup.string().required("Time is required"),
   location: Yup.string().required("Location is required"),
-  category: Yup.string().required("Category is required"),
+  category: Yup.string()
+    .oneOf(["Events", "Workshops", "Educational Talks"], "Invalid category")
+    .required("Category is required"),
   slotsAvailable: Yup.number()
     .integer()
+    .positive("Slots Avaliable must be greater than zero")
     .required("Slots Available is required"),
   evtPicture: Yup.mixed().required("Event picture is required"),
 });
@@ -179,12 +182,16 @@ const CreateEventsPage = () => {
                   />
                 )}
               </div>
-              <NextUIFormikInput
+              <NextUIFormikSelect
                 label="Category"
                 name="category"
-                type="text"
                 placeholder="Enter event category"
                 labelPlacement="inside"
+                options={[
+                  { key: "Events", label: "Events" },
+                  { key: "Workshops", label: "Workshops" },
+                  { key: "Educational Talks", label: "Educational Talks" },
+                ]}
               />
               <NextUIFormikInput
                 label="Slots Available"
diff --git a/client/src/pages/EditEventsPage.tsx b/client/src/pages/EditEventsPage.tsx
index 7090f83..1c1cc98 100644
--- a/client/src/pages/EditEventsPage.tsx
+++ b/client/src/pages/EditEventsPage.tsx
@@ -37,10 +37,9 @@ const validationSchema = Yup.object({
     .required("Date is required"),
   time: Yup.string().required("Time is required"),
   location: Yup.string().required("Location is required"),
-  category: Yup.string().required("Category is required"),
-  slotsAvailable: Yup.number()
-    .integer()
-    .required("Slots Available is required"),
+  category: Yup.string()
+    .oneOf(["Events", "Workshops", "Educational Talks"], "Invalid category")
+    .required("Category is required"),
   evtPicture: Yup.mixed(), // Make this optional if not required
 });
 
@@ -81,7 +80,6 @@ const EditEventsPage = () => {
     time: eventData?.time || "",
     location: eventData?.location || "",
     category: eventData?.category || "",
-    slotsAvailable: eventData?.slotsAvailable || "",
   };
 
   const handleSubmit = async (
@@ -173,19 +171,16 @@ const EditEventsPage = () => {
                   />
                 )}
               </div>
-              <NextUIFormikInput
+              <NextUIFormikSelect
                 label="Category"
                 name="category"
-                type="text"
                 placeholder="Enter event category"
                 labelPlacement="inside"
-              />
-              <NextUIFormikInput
-                label="Slots Available"
-                name="slotsAvailable"
-                type="number"
-                placeholder="Enter slots available"
-                labelPlacement="inside"
+                options={[
+                  { key: 'Events', label: 'Events' },
+                  { key: 'Workshops', label: 'Workshops' },
+                  { key: 'Educational Talks', label: 'Educational Talks' },
+                ]}
               />
               <div className="mb-4 flex flex-col ">
                 <EventsPicture eventId={id as string} editable/>
diff --git a/client/src/pages/EventDetailsPage.tsx b/client/src/pages/EventDetailsPage.tsx
index d13b60e..e1a4091 100644
--- a/client/src/pages/EventDetailsPage.tsx
+++ b/client/src/pages/EventDetailsPage.tsx
@@ -131,13 +131,13 @@ const EventDetailsPage = () => {
     <>
       {event && <div className="w-full h-full p-8">
         <Button
-          className="mb-4 bg-gray-200 text-black rounded px-4 py-2 hover:bg-gray-300"
+          className="mb-4 bg-gray-200 text-black hover:bg-gray-300"
           onClick={() => navigate("/events")} // Navigate directly to the events page
         >
           <ArrowUTurnLeftIcon />
           Back to Events
         </Button>
-        <Card className="bg-white rounded-lg overflow-hidden border">
+        <Card>
           <div className="flex">
             {/* Event Image Section */}
             {event.evtPicture && (
@@ -154,28 +154,28 @@ const EventDetailsPage = () => {
             )}
             {/* Event Details Section */}
             <div className="w-2/3 p-4">
-              <CardHeader className="pb-0 pt-2">
+              <CardHeader className="opacity-75">
                 <h4 className="font-bold text-large">{event.title}</h4>
               </CardHeader>
-              <CardBody className="pb-0 pt-2">
-                <p className="text-gray-600 mt-4">{event.description}</p>
-                <p className="text-gray-600 mt-2">
+              <CardBody>
+                <p className="text-white-600 mt-4 opacity-75">{event.description}</p>
+                <p className="text-white-600 mt-2 opacity-75">
                   <strong>Date:</strong> {new Date(event.date).toLocaleDateString()}
                 </p>
-                <p className="text-gray-600 mt-2">
+                <p className="text-white-600 mt-2 opacity-75">
                   <strong>Time:</strong> {event.time}
                 </p>
-                <p className="text-gray-600 mt-2">
+                <p className="text-white-600 mt-2 opacity-75">
                   <strong>Location:</strong> {event.location}
                 </p>
-                <p className="text-gray-600 mt-2">
+                <p className="text-white-600 mt-2 opacity-75">
                   <strong>Category:</strong> {event.category}
                 </p>
-                <p className="text-gray-600 mt-2">
+                <p className="text-white-600 mt-2 opacity-75">
                   <strong>Slots Available:</strong> {event.slotsAvailable}
                 </p>
                 <Button
-                  className="mt-4 bg-red-500 text-white rounded px-4 py-2 hover:bg-red-600"
+                  className="mt-4 bg-red-500 text-white hover:bg-red-600"
                   onClick={() => handleRegister()}
                   disabled={isRegistering}
                 >
@@ -193,17 +193,16 @@ const EventDetailsPage = () => {
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {similarEvents.length === 0 ? (
-              <p className="text-gray-600">No similar events available.</p>
+              <p className="text-white-600 opacity-75">No similar events available.</p>
             ) : (
               similarEvents.map((similarEvent: any) => (
                 <Card
                   key={similarEvent.id}
-                  className="bg-white rounded-lg overflow-hidden border"
                 >
-                  <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
+                  <CardHeader className="opacity-75">
                     <h4 className="font-bold text-large">{similarEvent.title}</h4>
                   </CardHeader>
-                  <CardBody className="pb-0 pt-2 px-4 flex-col items-start">
+                  <CardBody>
                     {similarEvent.evtPicture && (
                       <div style={{
                         width: '450px',
@@ -232,7 +231,7 @@ const EventDetailsPage = () => {
                   </CardBody>
                   <CardFooter className="flex flex-col items-start p-4">
                     <Button
-                      className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
+                       className="bg-primary-600 text-white py-2 hover:bg-primar"
                       onClick={() => {
                         console.log(`Navigating to event details for ID: ${similarEvent.id}`);
                         console.log("Access Token:", localStorage.getItem("accessToken"));
diff --git a/client/src/pages/EventsPage.tsx b/client/src/pages/EventsPage.tsx
index a253a14..dd1e97c 100644
--- a/client/src/pages/EventsPage.tsx
+++ b/client/src/pages/EventsPage.tsx
@@ -25,7 +25,11 @@ interface Event {
 const EventsPage: React.FC = () => {
   const [events, setEvents] = useState<Event[]>([]);
   const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
-  const [categories, setCategories] = useState<string[]>([]);
+  const [categories, setCategories] = useState<string[]>([
+    "Events",
+    "Workshops",
+    "Educational Talks"
+  ]);
   const [townCouncils, setTownCouncils] = useState<string[]>([]);
   const [selectedCategory, setSelectedCategory] = useState<string>("");
   const [selectedTownCouncil, setSelectedTownCouncil] = useState<string>("");
@@ -48,11 +52,6 @@ const EventsPage: React.FC = () => {
         setEvents(futureEvents);
         setFilteredEvents(futureEvents);
 
-        // Extract unique categories and locations from events
-        const uniqueCategories = Array.from(
-          new Set(res.data.map((event) => event.category).filter(Boolean))
-        );
-        setCategories(uniqueCategories);
       } catch (error) {
         console.error("Failed to fetch events:", error);
       }
@@ -124,7 +123,6 @@ const EventsPage: React.FC = () => {
               </option>
             ))}
           </select>
-
           {townCouncils.length > 0 && (
             <select
               value={selectedTownCouncil}
@@ -166,10 +164,10 @@ const EventsPage: React.FC = () => {
                   justifyContent: "space-between",
                 }}
               >
-                <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
+                <CardHeader>
                   <h4 className="font-bold text-large">{event.title}</h4>
                 </CardHeader>
-                <CardBody className="pb-0 pt-2 px-4 flex-col items-start">
+                <CardBody>
                   <div
                     className="relative w-full"
                     style={{
@@ -194,7 +192,7 @@ const EventsPage: React.FC = () => {
                   className="flex flex-col items-start p-4"
                   style={{ paddingTop: "0px" }}
                 >
-                  <p className="text-gray-600 mb-4">{event.description}</p>
+                  <p className="text-white-600 mb-4 opacity-70">{event.description}</p>
                   <Button
                     className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
                     onClick={() => navigate(`/events/view/${event.id}`)}