diff --git a/package.json b/package.json
index 6a679b6..9e9e41e 100644
--- a/package.json
+++ b/package.json
@@ -1,61 +1,54 @@
 {
   "name": "la-feedback-system",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": true,
   "license": "Apache-2.0",
   "description": "A website to gather feedback from students after interactions with LAs",
   "homepage": ".",
   "dependencies": {
-    "bootstrap": "^4.5.2",
-    "easymde": "^2.11.0",
-    "react": "^16.13.1",
-    "react-bootstrap": "^1.3.0",
+    "bootstrap": "^4.6.0",
+    "react": "^17.0.1",
+    "react-bootstrap": "^1.5.0",
     "react-bootstrap-typeahead": "^5.1.4",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.1",
     "react-markdown": "^4.3.1",
-    "react-modal": "^3.11.2",
-    "react-scripts": "^3.4.3",
-    "react-simplemde-editor": "^4.1.3",
+    "react-modal": "^3.12.1",
     "zustand": "^2.2.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "@types/node": "^12.12.47",
-    "@types/nodemailer": "^6.4.0",
-    "@types/nodemailer-smtp-transport": "^2.7.4",
-    "@types/react": "^16.9.41",
+    "@types/node": "^14.14.28",
+    "@types/react": "^17.0.1",
     "@types/react-bootstrap": "^1.0.1",
-    "@types/react-bootstrap-typeahead": "^5.1.1",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-modal": "^3.10.6",
-    "@types/react-transition-group": "^4.4.0",
-    "@types/webpack": "^4.41.21",
-    "@types/webpack-dev-server": "^3.11.0",
+    "@types/react-bootstrap-typeahead": "^5.1.2",
+    "@types/react-dom": "^17.0.1",
+    "@types/react-modal": "^3.12.0",
+    "@types/webpack": "^4.41.26",
+    "@types/webpack-dev-server": "^3.11.1",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
-    "css-loader": "^4.2.1",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-import-resolver-typescript": "^2.2.0",
+    "css-loader": "^4.3.0",
+    "eslint": "^7.20.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-button-label-required": "^1.0.1",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^2.5.1",
-    "eslint-plugin-typescript-sort-keys": "^1.3.0",
-    "prettier": "^2.0.5",
-    "prettier-eslint": "^11.0.0",
-    "react-app-rewired": "^2.1.6",
-    "ts-loader": "^8.0.2",
+    "eslint-plugin-typescript-sort-keys": "^1.5.0",
+    "prettier": "^2.2.1",
+    "prettier-eslint": "^12.0.0",
+    "ts-loader": "^8.0.17",
     "ts-node": "^8.10.2",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
-    "typescript": "^3.9.7",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12"
+    "typescript": "^4.1.5",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.5.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/CHANGELOG.json b/src/CHANGELOG.json
index e3dd06c..6f39850 100644
--- a/src/CHANGELOG.json
+++ b/src/CHANGELOG.json
@@ -1,5 +1,6 @@
 {
   "changes": [
+    "## 2.0.3\n- Add appropriate cursors to sortable table headers",
     "## 2.0.2\n- Shows the number of interactions with each student to the expended interaction section\n- Adds weekly interactions to the admin table",
     "## 2.0.1\n- Change session interaction count button style and disable requirements\n- Fix un-removable student bug\n- Clear students on course selection change",
     "## 2.0.0\n- Auto-suggest students registered in the course\n- Use a typeahead input field for students\n- Prevent logging student interactions with a student that doesn't exist.",
diff --git a/src/components/AnnouncementEditor.tsx b/src/components/AnnouncementEditor.tsx
index 8f1e352..a1ac01c 100644
--- a/src/components/AnnouncementEditor.tsx
+++ b/src/components/AnnouncementEditor.tsx
@@ -1,7 +1,5 @@
 import React, { ChangeEvent, useCallback, useState } from 'react';
 
-import SimpleMDE from 'react-simplemde-editor';
-
 import ReactMarkdown from 'react-markdown';
 
 import Alert from 'react-bootstrap/Alert';
@@ -21,6 +19,8 @@ import Redux, { AppReduxState } from 'redux/modules';
 
 const ALL_COURSE_OPTION = 'all';
 
+const CONTENT_ID = 'AnnouncementContentEditorTextArea';
+
 const COURSE_ID = 'AnnouncementCourseSelectionDropdown';
 const COURSE_LABEL = 'Course';
 
@@ -46,10 +46,17 @@ const AnnouncementEditor = () => {
   const [heading, setHeading] = useState<string | null>(null);
 
   const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    (
+      event: ChangeEvent<
+        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+      >
+    ) => {
       setHeading(null);
       const { id, value } = event.target;
       switch (id) {
+        case CONTENT_ID:
+          setCurrentBody(value);
+          break;
         case CLASS_ID:
           setAlertType(value === 'choose' ? null : (value as ResponseClass));
           break;
@@ -89,28 +96,7 @@ const AnnouncementEditor = () => {
         </Alert>
       </Collapse>
 
-      <SimpleMDE
-        onChange={setCurrentBody}
-        options={{
-          toolbar: [
-            'bold',
-            'italic',
-            'heading',
-            '|',
-            'code',
-            'quote',
-            'ordered-list',
-            'unordered-list',
-            '|',
-            'link',
-            'image',
-            'table',
-            'horizontal-rule',
-            '|',
-            'guide',
-          ],
-        }}
-      />
+      <textarea id={CONTENT_ID} onChange={handleChange} value={currentBody} />
       <FormGroup as={Row} controlId={COURSE_ID}>
         <Form.Label className="col-sm-5">{COURSE_LABEL}</Form.Label>
         <div className="col-sm-7">
diff --git a/src/components/BreakdownTable.tsx b/src/components/BreakdownTable.tsx
index 4db8d30..3431e0b 100644
--- a/src/components/BreakdownTable.tsx
+++ b/src/components/BreakdownTable.tsx
@@ -123,18 +123,34 @@ const BreakdownTable = ({ style }: Props) => {
       <Table hover style={{ width: '100%', cursor: 'default' }}>
         <thead className="thead-dark">
           <tr>
-            <th id={NAME_ID} onClick={handleSortClick}>
+            <th
+              id={NAME_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Name ${column === NAME_ID ? SORT_CHARS.get(order) : ' '}`}
             </th>
-            <th id={COURSE_ID} onClick={handleSortClick}>
+            <th
+              id={COURSE_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Course ${column === COURSE_ID ? SORT_CHARS.get(order) : ' '}`}
             </th>
-            <th id={COUNT_ID} onClick={handleSortClick}>
+            <th
+              id={COUNT_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Interactions ${
                 column === COUNT_ID ? SORT_CHARS.get(order) : ' '
               }`}
             </th>
-            <th id={WEEK_COUNT_ID} onClick={handleSortClick}>
+            <th
+              id={WEEK_COUNT_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Interactions (Last 7 Days) ${
                 column === WEEK_COUNT_ID ? SORT_CHARS.get(order) : ' '
               }`}
diff --git a/src/components/CountsTable.tsx b/src/components/CountsTable.tsx
index c0507d6..671dfbd 100644
--- a/src/components/CountsTable.tsx
+++ b/src/components/CountsTable.tsx
@@ -100,10 +100,18 @@ const CountsTable = () => {
       <Table hover style={{ width: '100%', cursor: 'default' }}>
         <thead className="thead-dark">
           <tr>
-            <th id={COURSE_ID} onClick={handleSortClick}>
+            <th
+              id={COURSE_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Course ${column === COURSE_ID ? SORT_CHARS.get(order) : ' '}`}
             </th>
-            <th id={COUNT_ID} onClick={handleSortClick}>
+            <th
+              id={COUNT_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Interactions ${
                 column === COUNT_ID ? SORT_CHARS.get(order) : ' '
               }`}
diff --git a/src/components/LADetailTable.tsx b/src/components/LADetailTable.tsx
index 8ec31c9..7903213 100644
--- a/src/components/LADetailTable.tsx
+++ b/src/components/LADetailTable.tsx
@@ -126,23 +126,39 @@ const LADetailTable = () => {
       <Table hover style={{ width: '100%', cursor: 'default' }}>
         <thead className="thead-dark">
           <tr>
-            <th id={RATING_ID} onClick={handleSortClick}>
+            <th
+              id={RATING_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Rating (Avg: ${avg.toFixed(2)}) ${
                 column === RATING_ID ? SORT_CHARS.get(order) : ' '
               }`}
             </th>
-            <th id={TIME_ID} onClick={handleSortClick}>
+            <th
+              id={TIME_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Time of Interaction ${
                 column === TIME_ID ? SORT_CHARS.get(order) : ' '
               }`}
             </th>
-            <th id={SENTIMENT_ID} onClick={handleSortClick}>
+            <th
+              id={SENTIMENT_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Sentiment ${
                 column === SENTIMENT_ID ? SORT_CHARS.get(order) : ' '
               }`}
             </th>
             {isMultiCourseLA && (
-              <th id={COURSE_ID} onClick={handleSortClick}>
+              <th
+                id={COURSE_ID}
+                onClick={handleSortClick}
+                style={{ cursor: 'pointer' }}
+              >
                 {`Course ${column === COURSE_ID ? SORT_CHARS.get(order) : ' '}`}
               </th>
             )}
diff --git a/src/components/LASummaryTable.tsx b/src/components/LASummaryTable.tsx
index 6ddcc9f..7a3967b 100644
--- a/src/components/LASummaryTable.tsx
+++ b/src/components/LASummaryTable.tsx
@@ -180,16 +180,27 @@ const LASummaryTable = ({ showLA }: Props) => {
       <Table hover style={{ width: '100%', cursor: 'default' }} role="table">
         <thead className="thead-dark">
           <tr>
-            <th role="columnheader" id={LA_ID} onClick={handleSortClick}>
+            <th
+              role="columnheader"
+              id={LA_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`LA ${column === LA_ID ? SORT_CHARS.get(order) : ' '}`}
             </th>
-            <th role="columnheader" id={COURSE_ID} onClick={handleSortClick}>
+            <th
+              role="columnheader"
+              id={COURSE_ID}
+              onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
+            >
               {`Course ${column === COURSE_ID ? SORT_CHARS.get(order) : ' '}`}
             </th>
             <th
               role="columnheader"
               id={INTERACTION_COUNT_ID}
               onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
             >
               {`Interactions ${
                 column === INTERACTION_COUNT_ID ? SORT_CHARS.get(order) : ' '
@@ -199,6 +210,7 @@ const LASummaryTable = ({ showLA }: Props) => {
               role="columnheader"
               id={WEEKLY_INTERACTION_COUNT_ID}
               onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
             >
               {`Weekly Interactions ${
                 column === WEEKLY_INTERACTION_COUNT_ID
@@ -210,6 +222,7 @@ const LASummaryTable = ({ showLA }: Props) => {
               role="columnheader"
               id={AVERAGE_RATING_ID}
               onClick={handleSortClick}
+              style={{ cursor: 'pointer' }}
             >
               {`Average Rating ${
                 column === AVERAGE_RATING_ID ? SORT_CHARS.get(order) : ' '