diff --git a/app/event-attendance/EventAttendance.tsx b/app/event-attendance/EventAttendance.tsx
new file mode 100644
index 0000000..a23972a
--- /dev/null
+++ b/app/event-attendance/EventAttendance.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import './EventAttendance.css';
+
+//should be removed after Volunteer component is created
+interface Volunteer {
+  id: number;
+  name: string;
+  attended: boolean;
+}
+
+//should be removed after event component is created
+interface EventProps {
+  name: string;
+  start: string;
+  end: string;
+  volunteers: Volunteer[];
+  description: string;
+}
+
+interface EventAttendanceProps {
+  event: EventProps;
+  updateAttendance: (volunteerId: number, attended: boolean) => void;
+}
+
+//should be updated after volunteer/event components are created
+const Content: React.FC<EventAttendanceProps> = ({ event, updateAttendance }) => {
+  return (
+    <div className="event-attendance-container">
+      <div className="event-details">
+        <h2>{event.name}</h2>
+        <p>{event.description}</p>
+      </div>
+      <div className="volunteer-list">
+        {event.volunteers.map(volunteer => (
+          <div className="volunteer-item" key={volunteer.id}>
+            <span>{volunteer.name}</span>
+            <input
+              type="checkbox"
+              checked={volunteer.attended}
+              onChange={(e) => updateAttendance(volunteer.id, e.target.checked)}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Content;
diff --git a/app/event-attendance/page.tsx b/app/event-attendance/page.tsx
new file mode 100644
index 0000000..60093b2
--- /dev/null
+++ b/app/event-attendance/page.tsx
@@ -0,0 +1,34 @@
+'use client';
+import React, { useState} from 'react';
+import EventAttendance from './EventAttendance';
+
+const EventAttendancePage = () => {
+    const [event, setEvent] = useState({
+        name: 'Sample Event',
+        start: '2024-02-01 09:00 PST',
+        end: '2024-02-01 11:00 PST',
+        volunteers: [
+            { id: 1, name: 'Volunteer 1', attended: false },
+            { id: 2, name: 'Volunteer 2', attended: false },
+            { id: 3, name: 'Volunteer 3', attended: false }
+        ],
+        description: 'This is a sample event description.'
+    });
+
+    const updateAttendance = (volunteerId: number, attended: boolean) => {
+        setEvent(prevEvent => ({
+            ...prevEvent,
+            volunteers: prevEvent.volunteers.map(volunteer => 
+                volunteer.id === volunteerId ? { ...volunteer, attended: attended } : volunteer
+            )
+        }));
+    };
+
+    return (
+        <div>
+            <EventAttendance event={event} updateAttendance={updateAttendance} />
+        </div>
+    );
+}
+
+export default EventAttendancePage;
diff --git a/package-lock.json b/package-lock.json
index 9de1f25..01c6e8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "ubc-blood-for-life-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@types/bootstrap": "^5.2.10",
         "next": "14.0.3",
         "react": "^18",
         "react-dom": "^18"
@@ -378,6 +379,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.0.tgz",
@@ -392,6 +402,14 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -4569,6 +4587,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
     "@rushstack/eslint-patch": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.0.tgz",
@@ -4583,6 +4606,14 @@
         "tslib": "^2.4.0"
       }
     },
+    "@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "requires": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
diff --git a/package.json b/package.json
index 0eb632b..0ad7ccc 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@types/bootstrap": "^5.2.10",
+    "next": "14.0.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.3",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.3"
+    "typescript": "^5"
   }
 }