diff --git a/backend/controllers/reactionsController.js b/backend/controllers/reactionsController.js
new file mode 100644
index 00000000..3a964ceb
--- /dev/null
+++ b/backend/controllers/reactionsController.js
@@ -0,0 +1,57 @@
+import Reactions from '../models/reactions.js';
+import asyncHandler from 'express-async-handler';
+
+export const getReaction = asyncHandler(async (req, res) => {
+    const { userEmail, eventId } = req.params;
+
+    if (!userEmail || !eventId) {
+        res.status(400);
+    }
+
+    const reaction = await Reactions.findOne({ userEmail, eventId });
+
+    if (reaction) {
+        res.status(200).json(reaction); // Return the found reaction
+    } else {
+        res.status(404).json({ message: 'Reaction not found' }); // No reaction found
+    }
+
+})
+
+export const createReaction = asyncHandler(async (req, res) => {
+    const { userEmail, eventId, reactionType } = req.body;
+
+    // Validate input
+    if (!userEmail || !eventId || ![1, -1].includes(reactionType)) {
+        res.status(400);
+    }
+
+    // Check if a reaction already exists
+    const existingReaction = await Reactions.findOne({ userEmail, eventId });
+
+    if (existingReaction) {
+        // Update the existing reaction
+        existingReaction.reactionType = reactionType;
+        await existingReaction.save();
+        res.status(200).json({
+            message: 'Reaction updated successfully',
+            reaction: existingReaction
+        });
+    } else {
+        // Create a new reaction
+        const newReaction = await Reactions.create({
+            userEmail,
+            eventId,
+            reactionType
+        });
+        res.status(201).json({
+            message: 'Reaction created successfully',
+            reaction: newReaction
+        });
+    }
+});
+
+export default {
+    getReaction,
+    createReaction
+};
diff --git a/backend/index.js b/backend/index.js
index 8ca7619c..b861118e 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -11,6 +11,7 @@ import connectMailchimp from './mailchimp/connect-mailchimp.js';
 import eventRoutes from './routes/event.js';
 import subscriptionRoutes from './routes/emailSubscription.js';
 import userRoutes from './routes/user.js';
+import reactionsRoutes from './routes/reactions.js'
 
 // initialize the application
 const app = express();
@@ -41,6 +42,7 @@ app.get('/', function (_, res) {
 app.use(`${baseApi}`, eventRoutes);
 app.use(`${baseApi}/subscribers`, subscriptionRoutes);
 app.use(`${baseApi}/users`, userRoutes);
+app.use(`${baseApi}/reactions`, reactionsRoutes);
 
 var server = app.listen(PORT, function () {
   var port = server.address().port;
diff --git a/backend/models/reactions.js b/backend/models/reactions.js
new file mode 100644
index 00000000..429ea3e2
--- /dev/null
+++ b/backend/models/reactions.js
@@ -0,0 +1,22 @@
+import mongoose from 'mongoose';
+import { Schema, model } from 'mongoose';
+
+const reactionsSchema = new Schema({
+    userEmail: {
+        type: String,
+        required: true
+    },
+    eventId: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'Event',
+        required: true
+    },
+    reactionType: {
+        type: Number,
+        enum: [1, -1], // 1 = like, -1 = dislike
+        required: true
+    }
+});
+
+// Export model
+export default model('Reactions', reactionsSchema);
\ No newline at end of file
diff --git a/backend/routes/reactions.js b/backend/routes/reactions.js
new file mode 100644
index 00000000..0ca72338
--- /dev/null
+++ b/backend/routes/reactions.js
@@ -0,0 +1,14 @@
+import express from 'express';
+import reactionsController from '../controllers/reactionsController.js';
+
+const router = express.Router();
+
+//POST request for new reaction
+router.post('/create', reactionsController.createReaction);
+
+//GET request for user reaction
+router.get('/:userEmail/:eventId', reactionsController.getReaction);
+
+// Export router.
+export default router;
+
diff --git a/frontend/src/components/Button/ThumbButtons.tsx b/frontend/src/components/Button/ThumbButtons.tsx
new file mode 100644
index 00000000..e5d5b176
--- /dev/null
+++ b/frontend/src/components/Button/ThumbButtons.tsx
@@ -0,0 +1,84 @@
+import React, { useState, useEffect} from "react";
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import axios from "axios";
+
+interface ThumbButtonProps {
+  userEmail: string;
+  eventId: string;
+}
+
+const ThumbButtons = ({ userEmail, eventId } : ThumbButtonProps) => {
+  const [selected, setSelected] = useState<1 | -1 | null>(null);
+  const API = axios.create({ baseURL: `${process.env.REACT_APP_BACKEND_URL}/api/v1` });
+
+  useEffect(() => {
+    const fetchReaction = async () => {
+      try {
+        const response = await API.get(`/reactions/${userEmail}/${eventId}`);
+        if (response.data && response.data.reactionType) {
+          setSelected(response.data.reactionType);
+        }
+      } catch (error) {
+        console.error("Error fetching reaction:", error);
+      }
+    };
+
+    fetchReaction();
+  }, [userEmail, eventId]);
+
+  const updateReaction = async (reaction: 1 | -1 | null) => {
+    try {
+      await API.post("/reactions/create", {
+        userEmail,
+        eventId,
+        reactionType: reaction,
+      });
+    } catch (error) {
+      console.error("Error updating reaction:", error);
+    }
+  };
+  
+  const handleThumbUp = () => {
+    const newReaction = selected === 1 ? null : 1;
+    setSelected(newReaction);
+    updateReaction(newReaction);
+  };
+
+  const handleThumbDown = () => {
+    const newReaction = selected === -1 ? null : -1;
+    setSelected(newReaction);
+    updateReaction(newReaction);
+  };
+
+  return (
+    <Stack direction="row" spacing={2}>
+      {/* Thumbs Up Button */}
+      <Button
+        variant="contained"
+        startIcon={<ThumbUpIcon />}
+        onClick={handleThumbUp}
+        style={{
+          backgroundColor: selected === 1 ? "#1976d2" : "#e0e0e0",
+          color: selected === 1 ? "#fff" : "#000",
+          textTransform: "none",
+        }}
+      />
+      {/* Thumbs Down Button */}
+      <Button
+        variant="contained"
+        startIcon={<ThumbDownIcon />}
+        onClick={handleThumbDown}
+        style={{
+          backgroundColor: selected === -1 ? "#d32f2f" : "#e0e0e0",
+          color: selected === -1 ? "#fff" : "#000",
+          textTransform: "none",
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default ThumbButtons;
diff --git a/frontend/src/components/Event/EventRating.tsx b/frontend/src/components/Event/EventRating.tsx
new file mode 100644
index 00000000..bb93f347
--- /dev/null
+++ b/frontend/src/components/Event/EventRating.tsx
@@ -0,0 +1,395 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { event_style } from './styles';
+import { Box } from '@mui/material';
+import calendarIcon from '../../images/calendarIcon.svg';
+import instagramIcon from '../../images/instaLogo.svg';
+import ThumbButtons from '../Button/ThumbButtons'
+import { AuthContext } from '../../context/AuthContext';
+
+interface EventBoxProps {
+  title: string;
+  targetDate: Date;
+  location: string;
+  style?: EventBoxStyles;
+  calendar_link: string;
+  description: string;
+  end_time: string;
+  instagram_link?: string;
+  start_time: string;
+  _id: string;
+  pastEvent?: boolean;
+}
+interface EventBoxStyles {
+  outerBox?: React.CSSProperties;
+  innerBox?: React.CSSProperties;
+  // Add more style properties if needed
+}
+
+/**
+ *
+ * @param title of the event
+ * @param targetDate date of the event
+ * @param location of the event
+ * @returns the an eventBox
+ */
+
+// title, targetDate, location
+const EventRating = ({
+  targetDate,
+  calendar_link,
+  description,
+  end_time,
+  instagram_link,
+  location,
+  start_time,
+  title,
+  _id,
+  pastEvent,
+}: EventBoxProps) => {
+  const styles = event_style();
+  const { user } = useContext(AuthContext)
+  const eventId = String(_id)
+
+  /**
+   * Calculates the time in days, hours, mins, and secs by subtracting the target date, minus the curent date.
+   * @param targetDate Date given
+   * @returns Time left
+   */
+  const calculateTimeLeft = (targetDate: Date): TimeFuns => {
+    const difference = new Date(targetDate).getTime() - new Date().getTime();
+    let timeLeft: TimeFuns = {
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+    };
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / (1000 * 60)) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    }
+
+    return timeLeft;
+  };
+
+  /**
+   * Returns the clean date
+   * @returns Returns the clean date
+   */
+  const cleanDate = () => {
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+
+    const date = new Date(targetDate);
+    const dayOfWeek = date.toLocaleDateString('en-US', { weekday: 'long' });
+    const day = date.getDate();
+    const month = months[date.getMonth()];
+    const year = date.getFullYear();
+
+    return `${dayOfWeek}, ${day} ${month}, ${year}`;
+  };
+
+  /**
+   * This function takes a not clean string representing the time and returns the clean time.
+   * @returns Returns the clean time
+   */
+  const cleanTime = () => {
+    const startDate = new Date(start_time);
+    const endDate = new Date(end_time);
+
+    const startTime = startDate.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+
+    const endTime = endDate.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+
+    return `${startTime} - ${endTime}`;
+  };
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(targetDate));
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTimeLeft(calculateTimeLeft(targetDate)); // Pass targetDate as an argument
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  });
+
+  interface TimeFuns {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+  }
+
+  const { days, hours, minutes, seconds }: TimeFuns = timeLeft;
+
+  /**
+   * If the current the current function is just one character add a 0 beofore it.
+   * @param time includes, days, hours, min, sec.
+   * @returns Returns the modified number
+   */
+  const formatTime = (time: number): string => {
+    return time < 10 ? `0${time}` : `${time}`;
+  };
+  const countdownCharacters = `${formatTime(days)}:${formatTime(hours)}:${formatTime(
+    minutes,
+  )}:${formatTime(seconds)}`.split('');
+
+  return (
+    <Box style={{ display: 'flex' }}>
+      <Box className="outerBox" sx={styles?.outerBox}>
+        <div className="innerBox" style={styles?.innerBox}>
+          <p
+            style={{
+              color: 'white',
+              fontSize: 'clamp(25px, 1vw, 35px)',
+              fontFamily: 'Chakra Petch',
+              fontWeight: '600',
+              marginTop: '0',
+              height: '110px',
+              marginBottom: '15px',
+            }}
+          >
+            {title}
+          </p>
+          {pastEvent && (
+            <>
+              <div 
+                className="rating" 
+                style={{                       
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'center',
+                paddingBottom: "50px"
+                }}
+              >
+                <ThumbButtons 
+                  userEmail={user.email}
+                  eventId={eventId}
+                />
+              </div>
+            </>
+          )}
+          {!pastEvent && (
+            <>
+              <div
+                className="countDown"
+                style={{
+                  marginTop: '2px',
+                  display: 'flex',
+                }}
+              >
+                {countdownCharacters.map((character, index) => (
+                  <div
+                    key={index}
+                    style={{
+                      width: '30px', // Adjust the width as needed
+                      height: '60px', // Adjust the height as needed
+                      alignItems: 'center',
+                      display: 'flex',
+                      justifyContent: 'center',
+                      backgroundColor: character === ':' ? 'transparent' : 'white',
+                      marginLeft: character === ':' ? '0px' : '4px',
+                      fontSize: '20px',
+                      fontFamily: 'Chakra Petch',
+                      fontWeight: '500',
+                      color: character === ':' ? 'white' : 'black',
+                      borderRadius: '4px',
+                    }}
+                  >
+                    {character}
+                  </div>
+                ))}
+              </div>
+              <div
+                style={{
+                  marginTop: '0',
+                  display: 'flex',
+                  flexDirection: 'row',
+                }}
+              >
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '16px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '600',
+                  }}
+                >
+                  &nbsp;days
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '20px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '500',
+                  }}
+                >
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '16px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '600',
+                  }}
+                >
+                  hours
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '20px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '500',
+                  }}
+                >
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '16px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '600',
+                  }}
+                >
+                  minutes
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '20px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '500',
+                  }}
+                >
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '16px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '600',
+                  }}
+                >
+                  seconds
+                </p>
+              </div>
+            </>
+          )}
+
+          <div
+            style={{
+              marginTop: '25px',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <p
+              style={{
+                color: 'white',
+                fontSize: '18px',
+                fontFamily: 'Chakra Petch',
+                fontWeight: '500',
+                marginTop: '5px',
+                lineHeight: '0px',
+              }}
+            >
+              {cleanDate()}
+            </p>
+            <p
+              style={{
+                color: 'white',
+                fontSize: '18px',
+                fontFamily: 'Chakra Petch',
+                fontWeight: '500',
+                marginTop: '5px',
+                lineHeight: '0px',
+              }}
+            >
+              {cleanTime()}
+            </p>
+
+            <p
+              style={{
+                color: 'white',
+                fontSize: '18px',
+                fontFamily: 'Chakra Petch',
+                fontWeight: '500',
+                marginTop: '5px',
+                lineHeight: '0px',
+              }}
+            >
+              {location}
+            </p>
+
+            <div style={{ display: 'flex', marginLeft: '250px', marginTop: '-35px', marginBottom: '30px' }}>
+              {instagram_link !== '' && (
+                <a href={instagram_link}>
+                  <img
+                    src={instagramIcon}
+                    alt="Instagram Icon"
+                    style={{
+                      width: '30px',
+                      height: '30px',
+                      filter: 'grayscale(100%)',
+                      transition: 'filter 0.3s',
+                    }}
+                    onMouseEnter={(e) => (e.currentTarget.style.filter = 'grayscale(0%)')}
+                    onMouseLeave={(e) => (e.currentTarget.style.filter = 'grayscale(100%)')}
+                  />
+                </a>
+              )}
+              
+              {calendar_link !== '' && (
+                <a 
+                  href={calendar_link}
+                  style={{ marginLeft: instagram_link === '' ? '0px' : '10px' }}>
+                  <img
+                    src={calendarIcon}
+                    alt="Calendar Icon"
+                    style={{
+                      width: '30px',
+                      height: '30px',
+                      filter: 'grayscale(100%)',
+                      transition: 'filter 0.3s',
+                    }}
+                    onMouseEnter={(e) => (e.currentTarget.style.filter = 'grayscale(0%)')}
+                    onMouseLeave={(e) => (e.currentTarget.style.filter = 'grayscale(100%)')}
+                  />
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+      </Box>
+    </Box>
+  );
+};
+
+export default EventRating;
\ No newline at end of file
diff --git a/frontend/src/components/Membership/EventsAttended.tsx b/frontend/src/components/Membership/EventsAttended.tsx
index 938940bc..c250cd62 100644
--- a/frontend/src/components/Membership/EventsAttended.tsx
+++ b/frontend/src/components/Membership/EventsAttended.tsx
@@ -1,6 +1,6 @@
 import useMediaQuery from '../../hooks/useMediaQuery';
 import { Link, Container, Typography } from '@mui/material';
-import EventBox from '../Event/Event';
+import EventRating from '../Event/EventRating';
 import { membershipStyles } from './styles';
 import alertLogo from '../../images/events-attended-alert.svg';
 import MobileEventBox from '../Event/MobileEvent';
@@ -54,7 +54,7 @@ const EventsAttended = ({ eventsAttended }: EventsAttendedProps) => {
       {!isMobile && (
         <div style={{ display: 'flex', flexDirection: 'row', gap: '40px', overflow: 'scroll' }}>
           {eventsAttended.map((event) => (
-            <EventBox
+            <EventRating
               title={event.title}
               targetDate={new Date(event.start_time)}
               location={event.location}