diff --git a/api/main_endpoints/models/OfficeAccessCard.js b/api/main_endpoints/models/OfficeAccessCard.js
index fb612711a..e6dc91968 100644
--- a/api/main_endpoints/models/OfficeAccessCard.js
+++ b/api/main_endpoints/models/OfficeAccessCard.js
@@ -14,7 +14,7 @@ const OfficeAccessCardSchema = new Schema(
     },
     verifiedCount:{
       type:Number,
-      default:0
+      default:1
     },
     lastVerified:{
       type:Date,
diff --git a/api/main_endpoints/routes/OfficeAccessCard.js b/api/main_endpoints/routes/OfficeAccessCard.js
index 930c66132..00218d07f 100644
--- a/api/main_endpoints/routes/OfficeAccessCard.js
+++ b/api/main_endpoints/routes/OfficeAccessCard.js
@@ -4,6 +4,7 @@ const {
   SERVER_ERROR,
   NOT_FOUND,
   OK,
+  FORBIDDEN,
 } = require('../../util/constants').STATUS_CODES;
 const express = require('express');
 const router = express.Router();
@@ -12,7 +13,13 @@ const OfficeAccessCard = require('../models/OfficeAccessCard.js');
 const logger = require('../../util/logger');
 const { officeAccessCard = {} } = require('../../config/config.json');
 const { API_KEY = 'NOTHING_REALLY' } = officeAccessCard;
-const { decodeTokenFromBodyOrQuery } = require('../util/token-functions.js');
+const {
+  decodeTokenFromBodyOrQuery,
+  decodeToken,
+  checkIfTokenSent,
+  checkIfTokenValid
+} = require('../util/token-functions.js');
+const ROWS_PER_PAGE = 25;
 
 router.use(bodyParser.json());
 
@@ -20,21 +27,20 @@ function checkIfCardExists(cardBytes) {
   return new Promise((resolve) => {
     try {
       OfficeAccessCard.findOneAndUpdate(
-        { cardBytes:cardBytes},
+        { cardBytes },
         {
           $inc: { verifiedCount: 1 },
           $set: { lastVerified: Date.now() }
         }, {
-          useFindAndModify: false, new:true, upsert:false
+          useFindAndModify: false, new: true, upsert: false
         }
         , (error, result) => {
           if (error) {
             logger.error('checkIfCardExists got an error querying mongodb: ', error);
             return resolve(false);
           }
-          if(!result){
+          if (!result) {
             logger.info(`Card:${cardBytes} not found in the database`);
-            return resolve(false);
           }
           return resolve(!!result);
         });
@@ -56,7 +62,7 @@ function deleteCard(cardBytes) {
             return resolve(false);
           }
           if (!result) {
-            logger.info(`Card:${cardBytes} not found in the database`);
+            logger.info(`Card ${cardBytes} not found in the database`);
           }
           return resolve(!!result);
         }
@@ -70,18 +76,33 @@ function deleteCard(cardBytes) {
 
 let clients = [];
 
-const defaultResponse = {
-  cardWasAdded: false,
+const defaultGetResponse = {
   message: 'Card authorized!',
   endpoint: '/verify',
+  requestType: 'GET',
 };
 
-const writeRequestResponse = ({ statusCode, ...rest }) => {
-  const response = {
-    statusCode,
-    ...defaultResponse,
-    ...rest,
-  };
+const defaultPostResponse = {
+  message: 'Card deleted!',
+  endpoint: '/delete',
+  requestType: 'POST',
+};
+
+const writeLogToClient = (requestType, { statusCode, ...rest }) => {
+  let response = {};
+  if (requestType === 'GET') {
+    response = {
+      statusCode,
+      ...defaultGetResponse,
+      ...rest,
+    };
+  } else {
+    response = {
+      statusCode,
+      ...defaultPostResponse,
+      ...rest,
+    };
+  }
   clients.forEach(client => {
     client.res.write(`data: ${JSON.stringify(response)}\n\n`);
   });
@@ -98,7 +119,7 @@ router.get('/verify', async (req, res) =>{
   const missingValue = required.find(({ value }) => !value);
 
   if (missingValue) {
-    writeRequestResponse({ statusCode: BAD_REQUEST, message: `${missingValue.title} missing from request` });
+    writeLogToClient(req.method, { statusCode: BAD_REQUEST, message: `${missingValue.title} missing from request` });
     return res.status(BAD_REQUEST).send(` ${missingValue.title} missing from request`);
   }
 
@@ -108,7 +129,7 @@ router.get('/verify', async (req, res) =>{
 
   const cardExists = await checkIfCardExists(cardBytes);
   if (cardExists) {
-    writeRequestResponse({ statusCode: OK });
+    writeLogToClient(req.method, { statusCode: OK });
     return res.sendStatus(OK);
   }
   // if a card doesnt exist and we arent trying
@@ -116,22 +137,20 @@ router.get('/verify', async (req, res) =>{
   // to verify a card, and that card isnt found.
   // therefore return a non OK status
   if (!add) {
-    writeRequestResponse({ statusCode: NOT_FOUND, message: 'Card not found' });
+    writeLogToClient(req.method, { statusCode: NOT_FOUND, message: 'Card not found' });
     return res.sendStatus(NOT_FOUND);
   }
-
+  // if we reached here, the card does not exist and is trying to be added
   try {
-    if (add) {
-      logger.info('adding a new card');
-      await new OfficeAccessCard({
-        cardBytes
-      }).save();
-      writeRequestResponse({ statusCode: OK, message: 'Card added!', endpoint: '/verify?add=1' });
-      return res.sendStatus(OK);
-    }
+    logger.info('adding a new card');
+    await new OfficeAccessCard({
+      cardBytes,
+    }).save();
+    writeLogToClient(req.method, { statusCode: OK, message: 'Card added!', endpoint: '/verify?add=1' });
+    return res.sendStatus(OK);
   } catch (error) {
     logger.error('Error creating OfficeAccessCard: ', error);
-    writeRequestResponse({
+    writeLogToClient(req.method, {
       statusCode: SERVER_ERROR,
       endpoint: '/verify?add=1',
       message: `Error creating Office AccessCard: ${error}`
@@ -140,44 +159,67 @@ router.get('/verify', async (req, res) =>{
   }
 });
 
-router.get('/delete', async (req, res) => {
-  if (!await decodeTokenFromBodyOrQuery(req)) {
+router.post('/delete', async (req, res) => {
+  if (!await decodeToken(req)) {
     return res.sendStatus(UNAUTHORIZED);
   }
 
-  const { cardBytes } = req.query;
+  const { cardBytes } = req.body;
   if (!cardBytes) {
-    writeRequestResponse({
+    writeLogToClient(req.method, {
       statusCode: BAD_REQUEST,
-      endpoint: '/delete',
-      message: 'cardBytes missing from request'
+      message: 'cardBytes missing from request',
+      requestType: req.method,
     });
     return res.sendStatus(BAD_REQUEST);
   }
 
   if (!await checkIfCardExists(cardBytes)) {
     logger.info('Card does not exist');
-    writeRequestResponse({
+    writeLogToClient(req.method, {
       statusCode: NOT_FOUND,
-      endpoint: '/delete',
       message: 'Card does not exist',
+      requestType: req.method,
     });
     return res.sendStatus(NOT_FOUND);
   }
 
-  const tryDeleteCard = await deleteCard(cardBytes);
-  if (!tryDeleteCard) {
-    logger.info('Error deleting card');
-    writeRequestResponse({
-      statusCode: SERVER_ERROR,
-      endpoint: '/delete',
-      message: 'Error deleting card'
+  if (await deleteCard(cardBytes)) { // successful
+    logger.info('Successfully deleted card');
+    writeLogToClient(req.method, {
+      statusCode: OK,
+      message: 'Card deleted!',
     });
+    return res.sendStatus(OK);
+  }
+  writeLogToClient({
+    statusCode: SERVER_ERROR,
+    message: 'Error deleting card',
+  });
+  return res.sendStatus(SERVER_ERROR);
+});
+
+router.post('/getAllCards', async (req, res) => {
+  if (!checkIfTokenSent(req)) {
+    return res.sendStatus(FORBIDDEN);
+  } else if (!checkIfTokenValid(req)) {
+    return res.sendStatus(UNAUTHORIZED);
+  }
+
+  const skip = Math.max(Number(req.body.page) || 0, 0) * ROWS_PER_PAGE;
+
+  try {
+    const total = await OfficeAccessCard.count({});
+    const items = await OfficeAccessCard.find({}, {}, { skip, limit: ROWS_PER_PAGE });
+    return res.status(OK).send({
+      items,
+      total,
+      rowsPerPage: ROWS_PER_PAGE,
+    });
+  } catch (error) {
+    logger.error('Error fetching cards: ', error);
     return res.sendStatus(SERVER_ERROR);
   }
-  logger.info('Successfully deleted card');
-  writeRequestResponse({ statusCode: OK, endpoint: '/delete', message: 'Card deleted!' });
-  return res.sendStatus(OK);
 });
 
 router.get('/listen', async (req, res) => {
diff --git a/src/APIFunctions/CardReader.js b/src/APIFunctions/CardReader.js
new file mode 100644
index 000000000..cec5ea517
--- /dev/null
+++ b/src/APIFunctions/CardReader.js
@@ -0,0 +1,57 @@
+import { ApiResponse } from './ApiResponses';
+import { BASE_API_URL } from '../Enums';
+
+export async function getAllCardsFromDb({
+  token,
+  page = null,
+}) {
+  let status = new ApiResponse();
+  try {
+    const url = new URL('/api/OfficeAccessCard/getAllCards', BASE_API_URL);
+    const res = await fetch(url.href, {
+      method: 'POST',
+      body: JSON.stringify({
+        page,
+      }),
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      }
+    });
+    if (res.ok) {
+      const result = await res.json();
+      status.responseData = result;
+    } else {
+      status.error = true;
+    }
+  } catch (err) {
+    status.error = true;
+    status.responseData = err;
+  }
+  return status;
+}
+
+export async function deleteCardFromDb(token, cardBytes) {
+  let status = new ApiResponse();
+  try {
+    const url = new URL('/api/OfficeAccessCard/delete', BASE_API_URL);
+    const res = await fetch(url.href, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ cardBytes, }),
+    });
+    if (res.ok) {
+      const result = await res.json();
+      status.responseData = result;
+    } else {
+      status.error = true;
+    }
+  } catch (err) {
+    status.error = true;
+    status.responseData = err;
+  }
+  return status;
+}
diff --git a/src/APIFunctions/Messaging.js b/src/APIFunctions/Messaging.js
index 7fb04f0bf..d29f6e5d5 100644
--- a/src/APIFunctions/Messaging.js
+++ b/src/APIFunctions/Messaging.js
@@ -25,7 +25,7 @@ export async function sendMessage(id, token, message) {
     }
   } catch(err) {
     status.error = true;
-    status.responseData = error;
+    status.responseData = err;
   }
   return status;
 }
diff --git a/src/Pages/CardReader/CardReader.js b/src/Pages/CardReader/CardReader.js
index 0e3e5e9fe..a2437e5ba 100644
--- a/src/Pages/CardReader/CardReader.js
+++ b/src/Pages/CardReader/CardReader.js
@@ -1,30 +1,123 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { BASE_API_URL } from '../../Enums';
 import { useUser } from '../../Components/context/UserContext';
+import { getAllCardsFromDb, deleteCardFromDb } from '../../APIFunctions/CardReader';
+import ConfirmationModal from '../../Components/DecisionModal/ConfirmationModal';
+import { trashcanSymbol } from '../Overview/SVG';
+
+const header = [
+  'TIMESTAMP'.padEnd(30),
+  'TYPE'.padEnd(12),
+  'ENDPOINT'.padEnd(20),
+  'STATUS CODE'.padEnd(15),
+  'MESSAGE\n'
+].join('');
 
 export default function CardReader() {
-  const [logs, setLogs] = useState([]);
-  const [error, setError] = useState('');
   const { user } = useUser();
   const token = user.token;
+  const [logs, setLogs] = useState([]);
+  const [cards, setCards] = useState([]);
+  const [toggleDelete, setToggleDelete] = useState(false);
+  const [cardToDelete, setCardToDelete] = useState({});
+  const [tab, setTab] = useState(() => {
+    const params = new URLSearchParams(window.location.search);
+    return params.get('tab') || 'registry';
+  });
+  const [connected, setConnected] = useState(true);
+  const [connectionStatusText, setConnectionStatusText] = useState('');
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(25);
+  const [paginationText, setPaginationText] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState(0);
+
+  function buildLog(data) {
+    const date = new Date().toISOString().padEnd(30);
+    const requestType = data.requestType.padEnd(12);
+    const endpoint = data.endpoint.padEnd(20);
+    const statusCode = String(data.statusCode).padEnd(15);
+    return [date, requestType, endpoint, statusCode, data.message].join('');
+  }
+
+  async function getAllCards() {
+    setLoading(true);
+    const apiResponse = await getAllCardsFromDb({
+      token,
+      page,
+    });
+    if (!apiResponse.error) {
+      setCards(apiResponse.responseData.items);
+      setTotal(apiResponse.responseData.total);
+      setRowsPerPage(apiResponse.responseData.rowsPerPage);
+    }
+    setLoading(false);
+  }
 
-  const buildLog = (data) => {
-    let date = new Date().toISOString().padEnd(30, ' ');
-    let endpoint = data.endpoint.padEnd(20, ' ');
-    let statusCode = String(data.statusCode).padEnd(8, ' ');
-    return [date, endpoint, statusCode, data.message].join('');
-  };
+  function handleTabChange(newTab) {
+    setTab(newTab);
+    const params = new URLSearchParams(window.location.search);
+    params.set('tab', newTab);
+    const newUrl = `${window.location.pathname}?${params.toString()}`;
+    window.history.pushState({}, '', newUrl);
+  }
+
+  function handleDeleteClick(card) {
+    setToggleDelete(!toggleDelete);
+    setCardToDelete(card);
+  }
+
+  function CardEntry({ card }) {
+    return (
+      <tr key={card._id} className='break-all !rounded md:break-keep hover:bg-gray-100 dark:hover:bg-white/10'>
+        <td className='hidden md:table-cell '>
+          <div className='flex items-center justify-center text-base text-gray-700 dark:text-white'>
+            {card.cardBytes}
+          </div>
+        </td>
+        <td className='hidden md:table-cell'>
+          <div className='flex items-center justify-center text-base text-gray-700 dark:text-white'>
+            {card.createdAt}
+          </div>
+        </td>
+        <td className='hidden md:table-cell'>
+          <div className='flex items-center justify-center text-base text-gray-700 dark:text-white'>
+            {card.lastVerified}
+          </div>
+        </td>
+        <td className='hidden md:table-cell'>
+          <div className='flex items-center justify-center text-base text-gray-700 dark:text-white'>
+            {card.verifiedCount}
+          </div>
+        </td>
+        <td>
+          <button
+            className = 'p-2 hover:bg-gray-200 dark:hover:bg-white/30 rounded-xl'
+            onClick={() => handleDeleteClick(card)}
+          >
+            {trashcanSymbol()}
+          </button>
+        </td>
+      </tr>
+    );
+  }
 
   useEffect(() => {
+    getAllCards();
     const url = new URL('/api/OfficeAccessCard/listen', BASE_API_URL);
     url.searchParams.append('token', token);
     const eventSource = new EventSource(url.href);
     eventSource.onmessage = (event) => {
       try {
-        let data = JSON.parse(event.data);
-        let newLog = buildLog(data);
-        setLogs(currLogs => [newLog, ...currLogs]); // prepend the new log
-      } catch (error) {
+        const data = JSON.parse(event.data);
+        const url = new URL(data.endpoint, window.location.origin);
+        // if card is verified or added successfully, query the DB again to get latest card data
+        if (url.pathname === '/verify' && data.statusCode === 200) {
+          getAllCards();
+        }
+        const newLog = buildLog(data);
+        setLogs(currLogs => [newLog, ...currLogs]);
+      } catch (err) { // if the message sent from error cannot be parsed
         setLogs(
           (currLogs) => [
             '[error] unable to format response, check browser logs',
@@ -34,25 +127,164 @@ export default function CardReader() {
       }
     };
 
-    eventSource.onerror = () => {
-      setError('Error connecting to SSE');
+    eventSource.onerror = () => { // if the connection to the event source encounters error
+      setLogs(
+        (currLogs) => [
+          'EventSource didn\'t work, check browser logs',
+          ...currLogs
+        ]
+      );
+      setConnected(false);
     };
 
     return () => {
       eventSource.close();
     };
-
   }, []);
 
+  useEffect(() => {
+    if (connected) {
+      setConnectionStatusText('Listening for card reader activity...');
+      return;
+    }
+    setConnectionStatusText('Client disconnected. Please reload to reconnect.');
+  }, [connected]);
+
+  useEffect(() => {
+    const amountOfCardsOnCurrentPage = Math.min((page + 1) * rowsPerPage, cards.length);
+    const pageOffset = page * rowsPerPage;
+    const startingElementNumber = (page * rowsPerPage) + 1;
+    const endingElementNumber = amountOfCardsOnCurrentPage + pageOffset;
+    setPaginationText(
+      <>
+        <p className='md:hidden text-gray-700 dark:text-white'>
+          {startingElementNumber} - {endingElementNumber} / {total}
+        </p>
+        <p className="hidden md:inline-block text-gray-700 dark:text-white">
+          Showing <span className='font-medium'>{startingElementNumber}</span> to <span className='font-medium'>{endingElementNumber}</span> of <span className='font-medium'>{total}</span> results
+        </p>
+      </>
+    );
+  }, [page, rowsPerPage, cards, total]);
+
+  useEffect(() => {
+    getAllCards();
+  }, [page]);
+
+  function maybeRenderPagination() {
+    const amountofCardsOnCurrentPage = Math.min((page + 1) * rowsPerPage, cards.length);
+    const pageOffset = page * rowsPerPage;
+    const endingElementNumber = amountofCardsOnCurrentPage + pageOffset;
+    if (cards.length) {
+      return (
+        <nav className='flex justify-start py-6 mx-4'>
+          <div className='flex items-center navbar-start'>
+            <span className="text-gray-700 dark:text-white">
+              {loading ? '...' : paginationText}
+            </span>
+          </div>
+          <div className='flex justify-end space-x-3 navbar-end'>
+            <button
+              className='btn btn-neutral text-gray-800 bg-gray-200 hover:bg-gray-300 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600'
+              onClick={() => setPage(page - 1)}
+              disabled={page === 0 || loading}
+            >
+              previous
+            </button>
+            <button
+              className='btn btn-neutral text-gray-800 bg-gray-200 hover:bg-gray-300 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-600'
+              onClick={() => setPage(page + 1)}
+              disabled={endingElementNumber >= total || loading}
+            >
+              next
+            </button>
+          </div>
+        </nav>
+      );
+    }
+    return <></>;
+  }
+
+  function getComponentFromTabChoice(tab) {
+    if (tab === 'registry') {
+      return (
+        <div>
+          <ConfirmationModal {... {
+            headerText: `Delete card: ${cardToDelete.cardBytes}?`,
+            bodyText: `Are you sure you want to delete 
+              card: ${cardToDelete.cardBytes}? It'll be gone forever if you do.`,
+            confirmText: `Yes, delete ${cardToDelete.cardBytes}`,
+            cancelText: 'No, keep the card',
+            confirmClassAddons: 'bg-red-600 hover:bg-red-500',
+            handleConfirmation: async () => {
+              await deleteCardFromDb(token, cardToDelete.cardBytes);
+              await getAllCards();
+              setToggleDelete(!toggleDelete);
+            },
+            open: toggleDelete
+          }
+          } />
+          <div className='flex flex-col m-6'>
+            <table className='table px-3'>
+              <thead>
+                <tr>
+                  {[
+                    { title: 'Card Bytes', columnName: 'cardBytes' },
+                    { title: 'Registration Date', columnName: 'registrationDate' },
+                    { title: 'Last Verified At', columnName: 'lastVerifiedAt' },
+                    { title: 'Verified Count', columnName: 'verifiedCount' }
+                  ].map(({ title }) => (
+                    <th key={title} className='text-base text-gray-700 dark:text-white/70 text-center'>
+                      <div className='flex items-center justify-center'>
+                        {title}
+                      </div>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {cards.map(card => <CardEntry card={card}/>)}
+              </tbody>
+            </table>
+            {maybeRenderPagination()}
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div>
+        <h3 className='flex items-center justify-center text-lg pt-4 text-gray-700 dark:text-white text-base'>
+          {connectionStatusText}
+        </h3>
+        <pre className='m-4 text-gray-700 dark:text-white'>
+          {header}
+          {logs.join('\n')}
+        </pre>
+      </div>
+    );
+  }
+
   return (
-    <div className='m-4'>
-      <h1 className='text-4xl font-bold text-white mb-4'>SCE Card Reader Activity</h1>
-      <pre>
-        {logs.join('\n')}
-      </pre>
-      {error &&
-        <h2>{error}</h2>
-      }
+    <div className='overview-container bg-white dark:bg-gradient-to-r dark:from-gray-800 dark:to-gray-600 min-h-[100dvh]'>
+      <h1 className='flex items-center justify-center text-gray-700 dark:text-white text-4xl font-bold py-4'>SCE Card Reader Page</h1>
+      <pre className='flex items-center justify-center text-gray-700 dark:text-white text-md py-2'>This webpage manages RFID cards used to unlock the office door in the SCE room</pre>
+      <div className='flex flex-row items-center justify-center text-gray-700 dark:text-white text-xl font-bold pt-4'>
+        <button
+          className={`p-2 hover:bg-gray-400 rounded-xl ${tab === 'registry' ? 'underline underline-offset-4' : ''}`}
+          onClick={() => handleTabChange('registry')}
+        >
+          Card Registry
+        </button>
+        {/* spacer to differentiate between the two options */}
+        <div>&nbsp;|&nbsp;</div>
+        <button
+          className={`p-2 hover:bg-gray-400 rounded-xl ${tab === 'logs' ? 'underline underline-offset-4' : ''}`}
+          onClick={() => handleTabChange('logs')}
+        >
+          Card Reader Logs
+        </button>
+      </div>
+      {getComponentFromTabChoice(tab)}
     </div>
   );
 }