diff --git a/sections/src/AddSessionModal.js b/sections/src/AddSessionModal.js
index 1aec0424..8f2605bd 100644
--- a/sections/src/AddSessionModal.js
+++ b/sections/src/AddSessionModal.js
@@ -31,7 +31,7 @@ export default function AddSessionModel({ section, show, onClose }: Props) {
       <Modal.Body>
         <ListGroup variant="flush">
           {startTimes.map((startTime) => (
-            <ListGroup.Item>
+            <ListGroup.Item key={`${startTime}-${section.id}`}>
               {startTime.format("MMMM D")}{" "}
               <FloatRightDiv>
                 <Button
diff --git a/sections/src/AttendanceRow.js b/sections/src/AttendanceRow.js
index fa5fb147..587a5902 100644
--- a/sections/src/AttendanceRow.js
+++ b/sections/src/AttendanceRow.js
@@ -1,14 +1,16 @@
 // @flow strict
 
-import React from "react";
+import React, { useState } from "react";
 import Button from "react-bootstrap/Button";
 import { AttendanceStatus } from "./models";
 import type { AttendanceStatusType } from "./models";
+import useSectionAPI from "./useSectionAPI";
 
 type Props = {
   editable: boolean,
   status: ?AttendanceStatusType,
-  onClick?: (AttendanceStatusType) => void,
+  sessionId: string,
+  email: String,
 };
 
 const buttonColorMap = {
@@ -17,7 +19,14 @@ const buttonColorMap = {
   absent: "danger",
 };
 
-export default function AttendanceRow({ editable, status, onClick }: Props) {
+export default function AttendanceRow({
+  editable,
+  status,
+  sessionId,
+  email,
+}: Props) {
+  const [currentStatus, setStatus] = useState(status);
+  const setAttendance = useSectionAPI("set_attendance");
   return (
     <>
       {Object.entries(AttendanceStatus).map(([statusOption, text]) => (
@@ -25,14 +34,24 @@ export default function AttendanceRow({ editable, status, onClick }: Props) {
           <Button
             size="sm"
             variant={
-              status === statusOption
+              statusOption === currentStatus
                 ? buttonColorMap[statusOption]
                 : `outline-${buttonColorMap[statusOption]}`
             }
             disabled={!editable && status !== statusOption}
-            onClick={() =>
-              onClick && onClick(((statusOption: any): AttendanceStatusType))
-            }
+            onClick={() => {
+              if (sessionId != null && email != null) {
+                const settingAttendance = async () => {
+                  await setAttendance({
+                    session_id: sessionId,
+                    students: email,
+                    status: statusOption,
+                  });
+                  setStatus(statusOption);
+                };
+                settingAttendance();
+              }
+            }}
           >
             {text}
           </Button>{" "}
diff --git a/sections/src/HistoryPage.js b/sections/src/HistoryPage.js
index 40cf09b7..203f1318 100644
--- a/sections/src/HistoryPage.js
+++ b/sections/src/HistoryPage.js
@@ -64,25 +64,35 @@ export default function HistoryPage({ userID }: Props): React.Node {
               </tr>
             </thead>
             <tbody>
-              {user.attendanceHistory.map(({ section, session, status }, i) => (
-                <tr key={i} className="text-center">
-                  <td className="align-middle">
-                    <b>{moment.unix(session.startTime).format("MMMM D")}</b>
-                  </td>
-                  <td className="align-middle">
-                    {section != null && currentUser.isStaff ? (
-                      <Link to={`/section/${section.id}`}>
-                        {sectionTitle(section)}
-                      </Link>
-                    ) : (
-                      sectionTitle(section)
-                    )}
-                  </td>
-                  <td>
-                    <AttendanceRow editable={false} status={status} />
-                  </td>
-                </tr>
-              ))}
+              {user.attendanceHistory.map(({ section, session, status }, i) => {
+                return (
+                  <tr key={i} className="text-center">
+                    <td className="align-middle">
+                      <b>{moment.unix(session.startTime).format("MMMM D")}</b>
+                    </td>
+                    <td className="align-middle">
+                      {section != null && currentUser.isStaff ? (
+                        <Link to={`/section/${section.id}`}>
+                          {sectionTitle(section)}
+                        </Link>
+                      ) : (
+                        sectionTitle(section)
+                      )}
+                    </td>
+                    <td>
+                      <AttendanceRow
+                        editable={
+                          currentUser.isStaff &&
+                          section.staff.email === currentUser.email
+                        }
+                        status={status}
+                        sessionId={session.id}
+                        email={user.email}
+                      />
+                    </td>
+                  </tr>
+                );
+              })}
             </tbody>
           </Table>
         </Col>
diff --git a/sections/src/SessionAttendance.js b/sections/src/SessionAttendance.js
index 7d4d5cf0..034fe215 100644
--- a/sections/src/SessionAttendance.js
+++ b/sections/src/SessionAttendance.js
@@ -129,14 +129,8 @@ export default function SectionAttendance({ section, session }: Props) {
                     <AttendanceRow
                       editable={session != null}
                       status={getStudentAttendanceStatus(student.email)}
-                      onClick={(status) => {
-                        if (session != null)
-                          setAttendance({
-                            session_id: session.id,
-                            students: student.email,
-                            status,
-                          });
-                      }}
+                      sessionId={session != null ? session.id: null}
+                      email={session != null ? student.email: null}
                     />
                   </td>
                 </tr>