diff --git a/client/src/pages/CreateEventsPage.tsx b/client/src/pages/CreateEventsPage.tsx
index ac34db5..029f292 100644
--- a/client/src/pages/CreateEventsPage.tsx
+++ b/client/src/pages/CreateEventsPage.tsx
@@ -134,7 +134,7 @@ const CreateEventsPage = () => {
           <ArrowUTurnLeftIcon />
         </Button>
       </section>
-      <section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
+      <section className="w-8/12 mx-auto p-5 bg-primary-100 border border-none rounded-2xl">
         <Formik
           initialValues={initialValues}
           validationSchema={validationSchema}
@@ -209,10 +209,10 @@ const CreateEventsPage = () => {
                   }}
                 />
               </div>
-              <div className="flex flex-row-reverse border">
+              <div className="flex flex-row-reverse">
                 <Button
                   type="submit"
-                  className="bg-red-600 text-white text-xl w-1/6"
+                  className="bg-primary-600 text-white text-xl w-1/6"
                   disabled={!isValid || !dirty || isSubmitting || !imageFile}
                 >
                   <p>Create Event</p>
diff --git a/client/src/pages/EditEventsPage.tsx b/client/src/pages/EditEventsPage.tsx
index 1c1cc98..760a3dc 100644
--- a/client/src/pages/EditEventsPage.tsx
+++ b/client/src/pages/EditEventsPage.tsx
@@ -122,7 +122,7 @@ const EditEventsPage = () => {
           <ArrowUTurnLeftIcon />
         </Button>
       </section>
-      <section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
+      <section className="w-8/12 mx-auto p-5 bg-primary-100 border border-none rounded-2xl">
         <Formik
           initialValues={initialValues}
           validationSchema={validationSchema}
@@ -185,10 +185,10 @@ const EditEventsPage = () => {
               <div className="mb-4 flex flex-col ">
                 <EventsPicture eventId={id as string} editable/>
               </div>
-              <div className="flex flex-row-reverse border">
+              <div className="flex flex-row-reverse">
                 <Button
                   type="submit"
-                  className="bg-red-600 text-white text-xl"
+                  className="bg-primary-600 text-white text-xl"
                   disabled={!isValid || !dirty || isSubmitting}
                 >
                   <p>Save</p>
diff --git a/client/src/pages/EventDetailsPage.tsx b/client/src/pages/EventDetailsPage.tsx
index e1a4091..d5813fa 100644
--- a/client/src/pages/EventDetailsPage.tsx
+++ b/client/src/pages/EventDetailsPage.tsx
@@ -13,6 +13,8 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
+  Image,
+  Chip
 } from "@nextui-org/react";
 import { ArrowUTurnLeftIcon } from "../icons"; // Make sure this path is correct
 
@@ -140,22 +142,18 @@ const EventDetailsPage = () => {
         <Card>
           <div className="flex">
             {/* Event Image Section */}
-            {event.evtPicture && (
-              <div className="w-1/3 p-4">
+            <div className="w-1/3 p-4">
                 <img
                   src={`${config.serverAddress}/events/evtPicture/${event.id}`}
                   alt="Event Picture"
-                  className="w-full h-auto rounded-lg"
-                  style={{
-                    objectFit: 'cover',
-                  }}
+                  className="w-full h-auto rounded-lg object-cover"
+                  
                 />
               </div>
-            )}
             {/* Event Details Section */}
             <div className="w-2/3 p-4">
               <CardHeader className="opacity-75">
-                <h4 className="font-bold text-large">{event.title}</h4>
+                <h4 className="font-bold text-3xl">{event.title}</h4>
               </CardHeader>
               <CardBody>
                 <p className="text-white-600 mt-4 opacity-75">{event.description}</p>
@@ -175,7 +173,7 @@ const EventDetailsPage = () => {
                   <strong>Slots Available:</strong> {event.slotsAvailable}
                 </p>
                 <Button
-                  className="mt-4 bg-red-500 text-white hover:bg-red-600"
+                  className="mt-4 bg-primary-500 text-white hover:bg-primary-600"
                   onClick={() => handleRegister()}
                   disabled={isRegistering}
                 >
@@ -198,49 +196,36 @@ const EventDetailsPage = () => {
               similarEvents.map((similarEvent: any) => (
                 <Card
                   key={similarEvent.id}
+                  className="p-4 min-w-80 flex flex-col justify-between gap-4"
                 >
-                  <CardHeader className="opacity-75">
-                    <h4 className="font-bold text-large">{similarEvent.title}</h4>
-                  </CardHeader>
-                  <CardBody>
-                    {similarEvent.evtPicture && (
-                      <div style={{
-                        width: '450px',
-                        height: '300px',
-                        overflow: 'hidden',
-                        borderRadius: '8px',
-                        position: 'relative'
-                      }}>
-                        <img
-                          src={`${config.serverAddress}/events/evtPicture/${similarEvent.id}`}
-                          alt="Event Picture"
-                          style={{
-                            width: '100%',
-                            height: '100%',
-                            objectFit: 'cover',
-                            position: 'absolute',
-                            top: 0,
-                            left: 0
-                          }}
-                          onError={(e) => {
-                            e.currentTarget.src = '/path/to/placeholder-image.png'; // Fallback image if loading fails
-                          }}
-                        />
+                  <div className="flex flex-col gap-4">
+                    <img
+                      alt={similarEvent.title}
+                      src={`${config.serverAddress}/events/evtPicture/${similarEvent.id}`}
+                      className="rounded-xl h-48 object-cover"
+                    />
+                    <div className="flex flex-col gap-2">
+                      <p className="text-xl font-bold text-wrap overflow-hidden overflow-ellipsis whitespace-nowrap">
+                        {similarEvent.title}
+                      </p>
+                      <p className="text-wrap overflow-hidden overflow-ellipsis line-clamp-2">
+                        {similarEvent.description}
+                      </p>
+                      <div className="flex flex-row gap-2">
+                        <Chip>{similarEvent.category}</Chip>
+                        <Chip>{similarEvent.time}</Chip>
                       </div>
-                    )}
-                  </CardBody>
-                  <CardFooter className="flex flex-col items-start p-4">
-                    <Button
-                       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"));
-                        navigate(`/events/view/${similarEvent.id}`);
-                      }}
-                    >
-                      View event details
-                    </Button>
-                  </CardFooter>
+                    </div>
+                  </div>
+                  <Button
+                    color="primary"
+                    variant="flat"
+                    onClick={() => {
+                      navigate(`/events/view/${similarEvent.id}`);
+                    }}
+                  >
+                    Visit
+                  </Button>
                 </Card>
               ))
             )}
diff --git a/client/src/pages/ManageEventsPage.tsx b/client/src/pages/ManageEventsPage.tsx
index 432f6c4..34f1392 100644
--- a/client/src/pages/ManageEventsPage.tsx
+++ b/client/src/pages/ManageEventsPage.tsx
@@ -14,7 +14,7 @@ import {
   ModalFooter,
 } from "@nextui-org/react";
 import { useNavigate } from "react-router-dom";
-import { PencilSquareIcon, TrashIcon } from "../icons";
+import { PencilSquareIcon, TrashDeleteIcon } from "../icons";
 import axios from "axios";
 import config from "../config";
 
@@ -62,7 +62,7 @@ const ManageEventsPage = () => {
   return (
     <div className="w-full h-full">
       <div className="mb-6">
-        <h2 className="text-3xl font-semibold text-red-600">Manage Events</h2>
+        <h2 className="text-3xl font-semibold text-primary-600">Manage Events</h2>
       </div>
       <Table aria-label="Manage Events Table">
         <TableHeader>
@@ -116,20 +116,20 @@ const ManageEventsPage = () => {
               <TableCell>
                 <div className="flex space-x-2">
                   <Button
-                    size="sm"
-                    variant="flat"
-                    color="primary"
+                    isIconOnly
+                    variant="light"
+                    color="success"
                     onPress={() => handleEdit(event.id)}
                   >
                     <PencilSquareIcon />
                   </Button>
                   <Button
-                    size="sm"
-                    variant="flat"
+                    isIconOnly
+                    variant="light"
                     color="danger"
                     onPress={() => handleDeleteClick(event.id)}
                   >
-                    <TrashIcon />
+                    <TrashDeleteIcon />
                   </Button>
                 </div>
               </TableCell>
@@ -138,7 +138,7 @@ const ManageEventsPage = () => {
         </TableBody>
       </Table>
       <Button
-        className="mt-6 bg-red-600 text-white"
+        className="mt-6 bg-primary-600 text-white"
         onPress={() => navigate("createEvent")}
       >
         Add events