diff --git a/devU-client/src/components/authenticatedRouter.tsx b/devU-client/src/components/authenticatedRouter.tsx
index 1a3de3fe..94a01982 100644
--- a/devU-client/src/components/authenticatedRouter.tsx
+++ b/devU-client/src/components/authenticatedRouter.tsx
@@ -22,7 +22,8 @@ import InstructorSubmissionspage from "./pages/submissions/InstructorSubmissions
 import SubmissionFileView from './pages/submissions/submissionFileView'
 import UserCoursesListPage from "./pages/listPages/courses/coursesListPage";
 import JoinCoursePage from "./pages/listPages/joinwithcodepage";
-
+import InstructorAttendancePage from './pages/Attendence/InstructorAttendancePage';
+import matchingTable from './pages/Multiplechoice/matchingTable';
 import WebhookURLForm from './pages/webhookURLForm'
 
 const AuthenticatedRouter = () => (
@@ -47,6 +48,10 @@ const AuthenticatedRouter = () => (
         <Route exact path='/course/:courseId/assignment/:assignmentId/createCAG' component={ContainerAutoGraderForm} />
         <Route exact path='/course/:courseId/assignment/:assignmentId/createProblem' component={AssignmentProblemFormPage} />
         <Route exact path='/course/:courseId/webhooks' component={WebhookURLForm} />
+        <Route exact path="/course/:courseId/attendance/instructor" component={InstructorAttendancePage} />
+
+        <Route path="/matchingTable" component={matchingTable} />
+
 
         <Route exact path='/course/:courseId/assignment/:assignmentId/submission/:submissionId'
             component={SubmissionDetailPage} />
diff --git a/devU-client/src/components/pages/Attendence/InstructorAttendanceModal.tsx b/devU-client/src/components/pages/Attendence/InstructorAttendanceModal.tsx
new file mode 100644
index 00000000..08a1effd
--- /dev/null
+++ b/devU-client/src/components/pages/Attendence/InstructorAttendanceModal.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import Modal from 'components/shared/layouts/modal';
+import './attendancePage.scss';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+const InstructorAttendanceModal: React.FC<Props> = ({ open, onClose }) => {
+  const [course, setCourse] = useState('');
+  const [date, setDate] = useState('');
+  const [code, setCode] = useState('');
+  const [duration, setDuration] = useState('15');
+  const [description, setDescription] = useState('');
+
+  const handleGenerateCode = () => {
+    const randomCode = Math.random().toString(36).substring(2, 7).toUpperCase();
+    setCode(randomCode);
+  };
+
+  const handleSubmit = () => {
+    const attendanceData = { course, date, code, duration, description };
+    console.log('Submitting attendance:', attendanceData);
+    onClose();
+  };
+
+  return (
+    <Modal
+      title="Create Attendance"
+      open={open}
+      onClose={onClose}
+      buttonAction={handleSubmit}
+    >
+      <div className="assignment-form">
+        <div className="formRow">
+          <label>Course:</label>
+          <select value={course} onChange={(e) => setCourse(e.target.value)} required>
+            <option value="" disabled>Select course</option>
+            <option value="CSE 312">CSE 312: Web Applications</option>
+            <option value="CSE 443">CSE 443: Software Engineering</option>
+            <option value="CSE 331">CSE 331: Algorithms and Complexity</option>
+          </select>
+        </div>
+
+        <div className="formRow">
+          <label>Session Date:</label>
+          <input
+            type="date"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="formRow">
+          <label>Attendance Code:</label>
+          <div className="code-input-row">
+            <input
+              type="text"
+              value={code}
+              onChange={(e) => setCode(e.target.value.toUpperCase())}
+              placeholder="Enter or generate a code"
+              required
+            />
+            <button type="button" className="btnPrimary" onClick={handleGenerateCode}>
+              Generate
+            </button>
+          </div>
+        </div>
+
+        <div className="formRow">
+          <label>Duration (minutes):</label>
+          <input
+            type="number"
+            min="1"
+            value={duration}
+            onChange={(e) => setDuration(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="formRow">
+          <label>Description (optional):</label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Details for this session"
+            rows={3}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default InstructorAttendanceModal;
diff --git a/devU-client/src/components/pages/Attendence/InstructorAttendancePage.tsx b/devU-client/src/components/pages/Attendence/InstructorAttendancePage.tsx
new file mode 100644
index 00000000..728d825d
--- /dev/null
+++ b/devU-client/src/components/pages/Attendence/InstructorAttendancePage.tsx
@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import PageWrapper from 'components/shared/layouts/pageWrapper';
+import InstructorAttendanceModal from './InstructorAttendanceModal';
+
+const InstructorAttendancePage = () => {
+  const [modalOpen, setModalOpen] = useState(true);
+
+  return (
+    <PageWrapper>
+      <div style={{ padding: '2rem' }}>
+        <h2 style={{ marginBottom: '1rem' }}>Instructor Attendance</h2>
+        <InstructorAttendanceModal open={modalOpen} onClose={() => setModalOpen(false)} />
+      </div>
+    </PageWrapper>
+  );
+};
+
+export default InstructorAttendancePage;
diff --git a/devU-client/src/components/pages/Attendence/attendancePage.scss b/devU-client/src/components/pages/Attendence/attendancePage.scss
new file mode 100644
index 00000000..6551a99d
--- /dev/null
+++ b/devU-client/src/components/pages/Attendence/attendancePage.scss
@@ -0,0 +1,138 @@
+@import 'variables';
+
+
+
+
+h2 {
+  text-align: center;
+}
+
+p {
+  text-align: center;
+  margin-left: 0;
+}
+
+.pageWrapper {
+  padding: 0 100px;
+}
+
+
+.form {
+  background-color: $list-item-background;
+  border-radius: 20px;
+  padding: 30px;
+  width: 50%;
+  height: fit-content;
+}
+
+.form>h2 {
+  margin-top: 0;
+}
+
+.datepickerContainer {
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.header {
+  color: $text-color;
+  display: flex;
+  align-items: center;
+}
+
+
+.fileName {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fileRemovalButton {
+  background: none;
+  border: none;
+  color: $text-color;
+  cursor: pointer;
+  font-size: 0.9em;
+
+
+  &:hover {
+    text-decoration: dashed;
+    color: red;
+  }
+}
+
+.formRow {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 15px;
+
+  label {
+    font-weight: 600;
+    font-size: 0.9rem;
+  }
+
+  input, select, textarea {
+    padding: 10px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    font-family: inherit;
+    font-size: 0.95rem;
+  }
+}
+
+.code-input-row {
+  display: flex;
+  gap: 10px;
+
+  input {
+    flex: 1;
+  }
+
+  .btnPrimary {
+    white-space: nowrap;
+    padding: 8px 15px;
+    font-weight: 600;
+  }
+}
+
+
+@media (max-width: 1115px) {
+  .pageWrapper {
+    padding: 0 50px;
+  }
+}
+
+@media (max-width: 1015px) {
+  .pageWrapper {
+    padding: 0 100px;
+  }
+
+  .flex {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .form {
+    width: 100%;
+  }
+}
+
+@media (max-width: 670px) {
+  .pageWrapper {
+    padding: 0 50px;
+  }
+}
+
+@media (max-width: 560px) {
+  .datepickerContainer {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
\ No newline at end of file
diff --git a/devU-client/src/components/pages/Multiplechoice/matchingTable.scss b/devU-client/src/components/pages/Multiplechoice/matchingTable.scss
new file mode 100644
index 00000000..ad89511a
--- /dev/null
+++ b/devU-client/src/components/pages/Multiplechoice/matchingTable.scss
@@ -0,0 +1,217 @@
+@import 'variables';
+
+.matching-table-container {
+  width: 100%;
+  margin: 1.5rem 0;
+  overflow-x: auto;
+  border-radius: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  background: var(--background);
+}
+
+.matching-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
+  color: var(--text-color);
+
+  thead {
+    background-color: var(--purple);
+    
+    th {
+      padding: 12px 16px;
+      text-align: left;
+      font-weight: 600;
+      color: white;
+      font-size: 1rem;
+
+      &:first-child {
+        border-top-left-radius: 10px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 10px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      border-bottom: 1px solid var(--grey-lightest);
+      transition: background-color 0.2s ease;
+
+      &:nth-child(even) {
+        background-color: var(--table-row-even);
+      }
+
+      &:nth-child(odd) {
+        background-color: var(--table-row-odd);
+      }
+
+      &:hover {
+        background-color: var(--list-item-background-hover);
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &.correct {
+        background-color: rgba(48, 96, 37, 0.1);
+      }
+
+      &.incorrect {
+        background-color: rgba(138, 38, 38, 0.1);
+      }
+    }
+
+    td {
+      padding: 12px 16px;
+      vertical-align: middle;
+    }
+  }
+
+  .prompt-column {
+    width: 45%;
+  }
+
+  .response-column {
+    width: 35%;
+  }
+
+  .status-column {
+    width: 20%;
+  }
+
+  .prompt-cell {
+    font-weight: 500;
+  }
+
+  .response-cell {
+    .answer-select {
+      width: 100%;
+      padding: 8px 12px;
+      border-radius: 5px;
+      border: 1px solid var(--input-field-label);
+      background-color: var(--input-field-background);
+      color: var(--text-color);
+      font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
+      font-size: 0.95rem;
+      cursor: pointer;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      background-size: 16px;
+      padding-right: 30px;
+
+      &:focus {
+        outline: none;
+        border-color: var(--purple);
+        box-shadow: 0 0 0 2px rgba(82, 70, 138, 0.1);
+      }
+    }
+
+    .selected-answer {
+      padding: 6px 10px;
+      background-color: var(--grey-lightest);
+      border-radius: 5px;
+      font-size: 0.95rem;
+      display: inline-block;
+      max-width: 100%;
+      word-break: break-word;
+    }
+  }
+
+  .status-cell {
+    .status-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      margin-right: 8px;
+      font-weight: bold;
+
+      &.correct {
+        background-color: rgba(48, 96, 37, 0.2);
+        color: var(--green);
+      }
+
+      &.incorrect {
+        background-color: rgba(138, 38, 38, 0.2);
+        color: var(--red);
+      }
+    }
+
+    .correct-answer {
+      display: block;
+      font-size: 0.85rem;
+      color: var(--text-color-secondary);
+      margin-top: 4px;
+      margin-left: 32px;
+    }
+
+    .status-unanswered {
+      color: var(--text-color-secondary);
+      font-style: italic;
+      font-size: 0.9rem;
+    }
+  }
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 768px) {
+  .matching-table {
+    thead th, tbody td {
+      padding: 10px 12px;
+      font-size: 0.9rem;
+    }
+
+    .status-column, .status-cell {
+      display: none;
+    }
+
+    .prompt-column {
+      width: 50%;
+    }
+
+    .response-column {
+      width: 50%;
+    }
+  }
+}
+
+/* Dark mode adjustments */
+body.dark-mode {
+  .matching-table {
+    .answer-select {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c5c5c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    }
+
+    tbody tr {
+      &.correct {
+        background-color: rgba(176, 238, 162, 0.1);
+      }
+
+      &.incorrect {
+        background-color: rgba(255, 163, 163, 0.1);
+      }
+    }
+
+    .status-cell {
+      .status-icon {
+        &.correct {
+          background-color: rgba(176, 238, 162, 0.2);
+          color: var(--green-lighter);
+        }
+
+        &.incorrect {
+          background-color: rgba(255, 163, 163, 0.2);
+          color: var(--red-lighter);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/devU-client/src/components/pages/Multiplechoice/matchingTable.tsx b/devU-client/src/components/pages/Multiplechoice/matchingTable.tsx
new file mode 100644
index 00000000..5f9fdd1d
--- /dev/null
+++ b/devU-client/src/components/pages/Multiplechoice/matchingTable.tsx
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import './matchingTable.scss';
+
+interface MatchItem {
+  id: string;
+  prompt: string;
+  options: string[];
+  correctAnswer: string;
+  studentAnswer: string;
+}
+
+interface MatchingTableProps {
+  items: MatchItem[];
+  isInstructorView?: boolean;
+  onAnswerChange?: (id: string, answer: string) => void;
+  readOnly?: boolean;
+}
+
+const MatchingTable: React.FC<MatchingTableProps> = ({
+  items = [],
+  isInstructorView = false,
+  onAnswerChange,
+  readOnly = false
+}) => {
+  const [matchItems, setMatchItems] = useState<MatchItem[]>(items);
+  const allOptions = [...new Set(items.flatMap(item => item.options))];
+
+  useEffect(() => {
+    setMatchItems(items);
+  }, [items]);
+
+  const handleSelectionChange = (id: string, selectedValue: string) => {
+    const updatedItems = matchItems.map(item => 
+      item.id === id ? { ...item, studentAnswer: selectedValue } : item
+    );
+    
+    setMatchItems(updatedItems);
+    
+    if (onAnswerChange) {
+      onAnswerChange(id, selectedValue);
+    }
+  };
+
+  const isCorrect = (item: MatchItem): boolean => {
+    return item.studentAnswer === item.correctAnswer;
+  };
+
+  const getStatusClass = (item: MatchItem): string => {
+    if (!isInstructorView || !item.studentAnswer) return '';
+    return isCorrect(item) ? 'correct' : 'incorrect';
+  };
+
+  return (
+    <div className="matching-table-container">
+      <table className="matching-table">
+        <thead>
+          <tr>
+            <th className="prompt-column">Prompt</th>
+            <th className="response-column">Response</th>
+            {isInstructorView && <th className="status-column">Status</th>}
+          </tr>
+        </thead>
+        <tbody>
+          {matchItems.map((item) => (
+            <tr key={item.id} className={getStatusClass(item)}>
+              <td className="prompt-cell">{item.prompt}</td>
+              <td className="response-cell">
+                {readOnly ? (
+                  <div className="selected-answer">{item.studentAnswer || 'Not answered'}</div>
+                ) : (
+                  <select
+                    value={item.studentAnswer || ''}
+                    onChange={(e) => handleSelectionChange(item.id, e.target.value)}
+                    className="answer-select"
+                  >
+                    <option value="">Select an answer</option>
+                    {allOptions.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                )}
+              </td>
+              {isInstructorView && (
+                <td className="status-cell">
+                  {item.studentAnswer ? (
+                    isCorrect(item) ? (
+                      <span className="status-icon correct">✓</span>
+                    ) : (
+                      <>
+                        <span className="status-icon incorrect">✗</span>
+                        <span className="correct-answer">
+                          Correct: {item.correctAnswer}
+                        </span>
+                      </>
+                    )
+                  ) : (
+                    <span className="status-unanswered">Not answered</span>
+                  )}
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default MatchingTable;
\ No newline at end of file
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx
index 46fc8a1e..ebbb8d24 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.tsx
+++ b/devU-client/src/components/pages/courses/courseDetailPage.tsx
@@ -108,6 +108,12 @@ const CourseDetailPage = () => {
                                         history.push(`/course/${courseId}/gradebook`)
                                     }}>Gradebook
                                     </button>
+                                
+                                    <button className='btnSecondary' onClick={() => {
+                                        role.isInstructor() ? history.push(`/course/${courseId}/attendance/instructor`) : 
+                                        history.push(`/course/${courseId}/attendance`)
+                                    }}> Attendance
+                                    </button>
                                 </div>
                                 <AddAssignmentModal open={openModal} onClose={handleCloseModal} />
                             </div>
diff --git a/devU-client/src/components/pages/forms/assignments/AddProblemModal.scss b/devU-client/src/components/pages/forms/assignments/AddProblemModal.scss
new file mode 100644
index 00000000..0774a4d5
--- /dev/null
+++ b/devU-client/src/components/pages/forms/assignments/AddProblemModal.scss
@@ -0,0 +1,102 @@
+@import 'variables';
+
+
+
+
+h2 {
+  text-align: center;
+}
+
+p {
+  text-align: center;
+  margin-left: 0;
+}
+
+.pageWrapper {
+  padding: 0 100px;
+}
+
+
+.form {
+  background-color: $list-item-background;
+  border-radius: 20px;
+  padding: 30px;
+  width: 50%;
+  height: fit-content;
+}
+
+.form>h2 {
+  margin-top: 0;
+}
+
+.datepickerContainer {
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.header {
+  color: $text-color;
+  display: flex;
+  align-items: center;
+}
+
+
+.fileName {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fileRemovalButton {
+  background: none;
+  border: none;
+  color: $text-color;
+  cursor: pointer;
+  font-size: 0.9em;
+
+
+  &:hover {
+    text-decoration: dashed;
+    color: red;
+  }
+}
+
+@media (max-width: 1115px) {
+  .pageWrapper {
+    padding: 0 50px;
+  }
+}
+
+@media (max-width: 1015px) {
+  .pageWrapper {
+    padding: 0 100px;
+  }
+
+  .flex {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .form {
+    width: 100%;
+  }
+}
+
+@media (max-width: 670px) {
+  .pageWrapper {
+    padding: 0 50px;
+  }
+}
+
+@media (max-width: 560px) {
+  .datepickerContainer {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
\ No newline at end of file
diff --git a/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
index def6162d..668fc903 100644
--- a/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
@@ -16,13 +16,13 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
     const { assignmentId } = useParams<{ assignmentId: string }>();
     const { courseId } = useParams<{ courseId: string }>();
 
-    
 
     const [formData, setFormData] = useState({
         title: '',
         maxScore: '',
     });
 
+
     const submittable = () => {
         if (!formData.title || !formData.maxScore) {return false}
         else {return true}
@@ -47,6 +47,7 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
                 setAlert({ autoDelete: false, type: 'error', message });
             });
 
+
         closeModal();
     };
 
@@ -58,6 +59,7 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
         onClose()
     }
 
+
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const key = e.target.id;
         const value = e.target.value;
@@ -90,4 +92,4 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
     );
 };
 
-export default CodeProblemModal;
+export default CodeProblemModal;
\ No newline at end of file