diff --git a/UPGRADE_NOTES.md b/UPGRADE_NOTES.md
index 6ba0556ba..7889c3e84 100644
--- a/UPGRADE_NOTES.md
+++ b/UPGRADE_NOTES.md
@@ -154,6 +154,8 @@ There are certainly cases where lodash is helpful, but uses of underscore could
 
 Also, rather than lodash, using native JS functions such as map, filter, etc. would be good.
 
+5/5/2025: Lodash global has been replaced by pulling out individual functions from lodash-es. Also, underscore has been removed entirely from the client side.
+
 ## Removal of jQuery
 
 Modern Ember recommends removing jQuery, using standard DOM access routines instead. Our file app.js sets $ globally to jQuery, so finding all instances will involve both searching for imports of jQuery and for $ (whether "$." or "$(").
@@ -164,6 +166,8 @@ Note that we cannot completely remove jQuery because it's a dependency of select
 
 Moment as a package has a fairly large footprint and is considered a legacy project. Because Encompass uses only uncomplicated pieces of moment, all of the app's usage could be replaced by modern JS or more lightweight, modular packages (e.g., date-fns).
 
+5/24/2025: Changed format-date helper to use date-fns. Removed redundant 'dates' helper and changed its one use in a component. Also removed moment in components/models that I already had upgrade.
+
 ## Avoid runtime errors through use of optional chaining and nullish coalescing
 
 Through the use of ?. and ??, we can avoid runtime errors if an attempt is made to get a property from undefined.
@@ -240,6 +244,8 @@ Since Ember 3.1, this is usually fine as you no longer need to use .get() to acc
 
 - related to above, in components, dot notation might result in a PromiseProxy. However, if it's used in a template, Ember will re-render once the value is fully resolved, so you don't have to worry about it. However, if you are using the value in js, such as wanting to loop over an array, you need to use await. (Of course, if you are just defining a convenience getter that uses dot notiation for use by a template, you don't have to await.)
 
+- if you forget to put the @action decorator on a function then call it from your template, 'this' will not be defined.
+
 # Current Progress
 
 ## CurrentUser service
@@ -323,3 +329,25 @@ The following components, included above, are actually wrappers for third-party
   - problems/problem/<id>/assignment
 
   Previously, edit and assignment were handled by flags in the db inside of a problem. When we transitioned to the problem, we first set the correct flag so that <ProblemInfo> would render correctly. With this change, we don't use the db for local application state, which is poor practice.
+
+## Quill upgrades
+
+I upgraded the loading and use of the Quill (enhanced text editing) package:
+
+- Quill is now loaded as any other third party package, rather than via the vendor folder and manual install.
+- The Ember component, quill-container, has been upgraded to modern Ember (v4.5 at least).
+- The quill-container component has been moved to the components/ui folder.
+- In all quill-container clients, the reference has been updated (<<Ui::QuillContainer ...>>)
+- TODO: in response-submission-view.hbs, the use of quill-container has always had an incorrect signature. I need to figure out what would be the correct signature should be.
+
+## Validate.js
+
+This package's loading has also been upgrading to the modern approach. TODO -- consider whether a custom utility function should replace using a 3rd party package.
+
+## Twitter typeahead
+
+This package has been removed from the system in favor of a simpler, custom component. The new component is contained within the file twitter-typeahead.js/hbs just to simplify references throughout the system. I tested all clients of the new component and they appear to work. Still need to test the usage in the signup-google component (TODO). Note that getting typeahead to work in some components (section-new, user-info, and user-new) involved upgrades to those components because of various old-style Ember idioms, such as the use of two-way binding.
+
+## lodash-es
+
+loadash-es is now loaded. I did this because some of the regular lodash subpackages (e.g., lodash/isEqual) are being deprecated. Thus, the correct thing to do now is to use lodash-es/isEqual, for example. Eventually, I should change all uses of lodash to lodash-es.
diff --git a/app/app.js b/app/app.js
index 7cbce9fd0..e1898cf34 100644
--- a/app/app.js
+++ b/app/app.js
@@ -3,12 +3,10 @@ import Application from '@ember/application';
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import $ from 'jquery';
-import * as _ from 'lodash-es';
 import config from './config/environment';
 
 // export for others scripts to use
 window.$ = $;
-window._ = _;
 
 $.ajaxSetup({
   xhrFields: {
diff --git a/app/components/admin-filter.hbs b/app/components/admin-filter.hbs
index 755050e16..478e5374e 100644
--- a/app/components/admin-filter.hbs
+++ b/app/components/admin-filter.hbs
@@ -1,8 +1,8 @@
 <div id='admin-filter'>
-  <!-- Main Dropdown -->
+  {{!-- Main Dropdown --}}
   <div class='choose-filter-admin'>
     <span class='filter-text'>Find by</span>
-    <!-- onItemAdd sends the value to the parent component -->
+    {{!-- onItemAdd sends the value to the parent component --}}
     <SelectizeInput
       @inputId='admin-filter-select'
       @initialOptions={{this.mainOptions}}
@@ -14,7 +14,7 @@
     />
   </div>
 
-  <!-- Conditional Rendering of Options -->
+  {{!-- Conditional Rendering of Options --}}
   {{#if (is-equal this.mainSelection.type 'list')}}
     <div class='filter-admin'>
       <SelectizeInput
diff --git a/app/components/answer-new.hbs b/app/components/answer-new.hbs
index 79e7f7a6a..fba569b4e 100644
--- a/app/components/answer-new.hbs
+++ b/app/components/answer-new.hbs
@@ -16,17 +16,18 @@
             <span class='required-star'>*</span></label>
           <Textarea
             name='brief-summary'
-            cols='80'
-            @value={{answer}}
-            rows='3'
+            cols={{80}}
+            rows={{3}}
+            @value={{this.answer}}
             placeholder='Brief Summary...'
+            {{on 'input' this.updateAnswer}}
           />
-          <Input id='answer' required='true' @type='hidden' @value={{answer}} />
+
         </div>
         {{#each this.briefSummaryErrors as |error|}}
           <Ui::ErrorBox
             @error={{error}}
-            @resetError={{action (mut this.briefSummaryErrors) null}}
+            @resetError={{this.resetBriefSummaryErrors}}
             @showDismiss={{true}}
           />
         {{/each}}
@@ -35,8 +36,8 @@
             out
             <span class='required-star'>*</span></label>
 
-          <QuillContainer
-            @onEditorChange={{action 'updateQuillText'}}
+          <Ui::QuillContainer
+            @onEditorChange={{this.updateQuillText}}
             @attrSectionId={{this.quillEditorId}}
             @startingText={{this.explanationText}}
           />
@@ -44,7 +45,7 @@
         {{#each this.explanationErrors as |error|}}
           <Ui::ErrorBox
             @error={{error}}
-            @resetError={{action (mut this.explanationErrors) null}}
+            @resetError={{this.resetExplanationErrors}}
             @showDismiss={{true}}
           />
         {{/each}}
@@ -52,34 +53,24 @@
           {{! <label for="uploadedFile">Upload PDF</label> }}
           {{#if this.imageData}}
             <a
-              {{action 'toggleImageSize'}}
+              {{on 'click' this.toggleImageSize}}
               class='image {{if this.isWide " wide "}}'
             >
               <img
-                src='{{this.imageData}}'
-                alt='{{format-date
-                  this.answer.createDate
-                  "MMM Do YYYY hh:mm A"
-                }}'
+                src={{this.imageData}}
+                alt={{format-date this.answer.createDate 'MMM Do YYYY hh:mm A'}}
               />
             </a>
             <button
               class='edit-image-btn'
               type='button'
-              {{action 'deleteImage'}}
+              {{on 'click' this.deleteImage}}
             >Delete</button>
             <button
               class='edit-image-btn'
               type='submit'
-              {{action 'addImage'}}
+              {{on 'click' this.addImage}}
             >Add</button>
-            {{!-- {{else}}
-              {{image-upload
-                filesToBeUploaded=filesToBeUploaded
-                hideSubmit=true
-                acceptMultiple=true
-                isPdfOnly=true
-                }} --}}
           {{/if}}
         </div>
         <div class='new-answer-input contributors'>
@@ -88,9 +79,9 @@
             <ul>
               {{#each this.contributors as |student|}}
                 <li>{{student.username}}
-                  {{#if (not (is-equal student this.currentUser.user))}}
+                  {{#if (not-equal student this.currentUser.user)}}
                     <i
-                      {{action 'removeStudent' student}}
+                      {{on 'click' (fn this.removeStudent student)}}
                       class='far fa-times-circle'
                       aria-hidden='true'
                       title='Remove'
@@ -104,7 +95,7 @@
         <Ui::TwitterTypeahead
           @selectedValue={{this.studentToAdd}}
           @selectedItems={{this.contributors}}
-          @onSelect='addStudent'
+          @onSelect={{this.addStudent}}
           @dataList={{@section.students}}
           @placeholder='username'
           @optionLabelPath='username'
@@ -122,21 +113,21 @@
         <Ui::ErrorBox
           @error='Please provide all required fields.'
           @showDismiss={{true}}
-          @resetError={{action (mut this.isMissingRequiredFields) null}}
+          @resetError={{this.resetMissingRequiredFields}}
         />
       {{/if}}
       {{#if this.overSizedFileError}}
         <Ui::ErrorBox
           @error={{this.overSizedFileError}}
           @showDismiss={{true}}
-          @resetError={{action (mut this.overSizedFileError) null}}
+          @resetError={{this.resetOverSizedFileError}}
         />
       {{/if}}
       {{#if this.isExplanationTooLarge}}
         <Ui::ErrorBox
           @error={{this.tooLargeExplanationMsg}}
           @showDismiss={{true}}
-          @resetError={{action (mut this.isExplanationTooLarge) null}}
+          @resetError={{this.resetIsExplanationTooLarge}}
         />
       {{/if}}
     </form>
@@ -152,14 +143,14 @@
           class='add-parent-workspace-btn create'
           data-test='submit-answer'
           type='button'
-          {{action 'validate'}}
+          {{on 'click' this.validate}}
         >{{if @createButtonText @createButtonText 'Submit Answer'}} </button>
       </span>
       <span class='cancelResponse'>
         <button
           class='cancelEditBtn'
           type='button'
-          {{action 'cancelResponse'}}
+          {{on 'click' this.cancelResponse}}
         >Cancel</button>
       </span>
 
diff --git a/app/components/answer-new.js b/app/components/answer-new.js
index 5ec352fb0..0db5cc9ef 100644
--- a/app/components/answer-new.js
+++ b/app/components/answer-new.js
@@ -1,17 +1,16 @@
-import ErrorHandlingComponent from './error-handling';
+import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import isEqual from 'lodash-es/isEqual';
 import { service } from '@ember/service';
+import isEqual from 'lodash-es/isEqual';
 import validate from 'validate.js';
-import $ from 'jquery';
-import { all, reject, resolve } from 'rsvp';
 
-export default class AnswerNew extends ErrorHandlingComponent {
+export default class AnswerNew extends Component {
   @service('sweet-alert') alert;
   @service('utility-methods') utils;
   @service currentUser;
   @service store;
+  @service errorHandling;
   @tracked filesToBeUploaded = null;
   @tracked createAnswerError = null;
   @tracked isMissingRequiredFields = null;
@@ -77,13 +76,10 @@ export default class AnswerNew extends ErrorHandlingComponent {
       //prefill form if revising
       const ans = this.args.priorAnswer;
       this.answer = ans.answer;
-      let explanation = ans.explanation;
-
-      this.explanationText = explanation;
-      let students = ans.students;
-      this.contributors = students.map((s) => s);
+      this.explanationText = ans.explanation;
+      this.contributors = [...ans.students.slice()];
     } else {
-      this.contributors.addObject(this.currentUser.user);
+      this.contributors = [this.currentUser.user];
     }
   }
 
@@ -97,15 +93,15 @@ export default class AnswerNew extends ErrorHandlingComponent {
     super.willDestroy(...arguments);
   }
 
-  handleImages() {
+  async handleImages() {
     if (this.existingImageId) {
-      return resolve(this.existingImageId);
+      return this.existingImageId;
     }
 
     let filesToUpload = this.filesToBeUploaded;
 
     if (!filesToUpload) {
-      return resolve(null);
+      return null;
     }
 
     const formData = new FormData();
@@ -113,7 +109,7 @@ export default class AnswerNew extends ErrorHandlingComponent {
     for (let f of filesToUpload) {
       if (f.size > this.singleFileSizeLimit) {
         this.overSizedFileError = this.getOverSizedFileMsg(f.size, f.name);
-        return reject('oversizedFile');
+        throw new Error('oversizedFile');
       } else {
         formData.append('photo', f);
       }
@@ -122,32 +118,28 @@ export default class AnswerNew extends ErrorHandlingComponent {
     let firstItem = filesToUpload[0];
     let isPDF = firstItem.type === 'application/pdf';
     let postUrl = isPDF ? '/pdf' : '/image';
-    let resultingImages;
 
-    resultingImages = $.post({
-      url: postUrl,
-      processData: false,
-      contentType: false,
-      data: formData,
+    let response = await fetch(postUrl, {
+      method: 'POST',
+      body: formData,
     });
 
-    return resolve(resultingImages)
-      .then((results) => {
-        let images = results.images;
-        this.store.pushPayload({ images });
-        return resolve(images);
-      })
-      .catch((err) => {
-        return reject(err);
-      });
+    if (!response.ok) {
+      throw new Error('Upload failed');
+    }
+
+    let results = await response.json();
+    let images = results.images;
+    this.store.pushPayload({ images });
+
+    return images;
   }
 
   createAnswer() {
     this.isCreatingAnswer = true;
 
     const answer = this.answer; // brief summary
-    const quillContent = $('.ql-editor').html();
-    let explanation = quillContent.replace(/["]/g, "'");
+    let explanation = this.quillText.replace(/["]/g, "'");
     const priorAnswer = this.args.priorAnswer ? this.args.priorAnswer : null;
     const students = this.contributors;
     if (priorAnswer) {
@@ -203,7 +195,7 @@ export default class AnswerNew extends ErrorHandlingComponent {
           });
         });
         // additional uploaded image base 64 data was concatenated to explanation
-        return all(
+        return Promise.all(
           records.map((rec) => {
             return rec.save();
           })
@@ -222,21 +214,21 @@ export default class AnswerNew extends ErrorHandlingComponent {
               null
             );
 
-            this.args.handleCreatedAnswer(yourAnswer);
+            this.args.handleCreatedAnswer?.(yourAnswer);
           })
           .catch((err) => {
             // do we need to roll back all recs this were created?
             if (!this.isDestroying && !this.isDestroyed) {
               this.isCreatingAnswer = false;
             }
-            this.handleErrors(err, 'createRecordErrors');
+            this.errorHandling.handleErrors(err, 'createRecordErrors');
           });
       })
       .catch((err) => {
         if (!this.isDestroying && !this.isDestroyed) {
           this.isCreatingAnswer = false;
         }
-        if (err === 'oversizedFile') {
+        if (err.message === 'oversizedFile') {
           return;
         }
       });
@@ -276,12 +268,10 @@ export default class AnswerNew extends ErrorHandlingComponent {
 
   @action validate() {
     // remove existing errors
-    const formErrors = ['briefSummaryErrors', 'explanationErrors'];
-    for (let error of formErrors) {
-      if (this[error]) {
-        this[error] = null;
-      }
-    }
+    this.errorHandling.removeMessages(
+      'briefSummaryErrors',
+      'explanationErrors'
+    );
 
     let isQuillValid = !this.isQuillEmpty;
     let briefSummary = this.answer;
@@ -325,14 +315,12 @@ export default class AnswerNew extends ErrorHandlingComponent {
       return;
     }
 
-    let students = this.contributors;
-
-    if (students.includes(student)) {
+    if (this.contributors.includes(student)) {
       this.userAlreadyInSection = true;
       return;
     }
 
-    students.pushObject(student);
+    this.contributors = [...this.contributors, student];
     this.alert.showToast(
       'success',
       'Student Added',
@@ -346,8 +334,7 @@ export default class AnswerNew extends ErrorHandlingComponent {
     if (!student) {
       return;
     }
-    let students = this.contributors;
-    students.removeObject(student);
+    this.contributors = this.contributors.filter((s) => !isEqual(s, student));
     this.alert.showToast(
       'success',
       'Student Removed',
@@ -357,6 +344,34 @@ export default class AnswerNew extends ErrorHandlingComponent {
       null
     );
   }
+  @action
+  resetBriefSummaryErrors() {
+    this.errorHandling.removeMessages('briefSummaryErrors');
+  }
+  @action resetExplanationErrors() {
+    this.errorHandling.removeMessages('explanationErrors');
+  }
+  @action resetImageErrors() {
+    this.errorHandling.removeMessages('imageErrors');
+  }
+  @action resetFileErrors() {
+    this.errorHandling.removeMessages('fileErrors');
+  }
+  @action resetMissingRequiredFields() {
+    this.isMissingRequiredFields = null;
+  }
+  @action resetOverSizedFileError() {
+    this.overSizedFileError = null;
+  }
+  @action resetIsExplanationTooLarge() {
+    this.isExplanationTooLarge = null;
+  }
+
+  @action
+  updateAnswer(event) {
+    this.answer = event.target.value;
+  }
+
   @action updateQuillText(content, isEmpty, isOverLengthLimit) {
     this.quillText = content;
     this.isQuillEmpty = isEmpty;
diff --git a/app/components/assignment-info-student.hbs b/app/components/assignment-info-student.hbs
index ff14c456b..f2b6df0eb 100644
--- a/app/components/assignment-info-student.hbs
+++ b/app/components/assignment-info-student.hbs
@@ -8,12 +8,12 @@
     {{/if}}
     <div class='info-detail'>
       <label>Problem Name:</label>
-      <p>{{@assignment.problem.title}}</p>
+      <p>{{@problem.title}}</p>
     </div>
     <div class='info-detail'>
       <label>Class:</label>
-      <a><LinkTo @route='sections.section' @model={{@assignment.section.id}}>
-          {{@assignment.section.name}}</LinkTo></a>
+      <a><LinkTo @route='sections.section' @model={{@section.id}}>
+          {{@section.name}}</LinkTo></a>
     </div>
 
     <div class='info-detail'>
@@ -35,32 +35,22 @@
     </div>
     <div class='info-detail'>
       <label>Problem Statement:</label>
-      <p>{{{@assignment.problem.text}}}</p>
+      <p>{{{@problem.text}}}</p>
     </div>
-    {{#if @assignment.problem.image}}
+    {{#if @problem.image}}
       <div class='assignmentImage info-detail'>
         <label>Problem Image:</label>
-        <img
-          src='{{{@assignment.problem.image.imageData}}}'
-          alt={{@problem.title}}
-        />
+        <img src='{{{@problem.image.imageData}}}' alt={{@problem.title}} />
       </div>
     {{/if}}
   </section>
-  {{#each this.loadAnswerErrors as |error|}}
-    <Ui::ErrorBox
-      @error={{error}}
-      @showDismiss={{true}}
-      @resetError={{action 'removeErrorFromArray' 'loadAnswerErrors' error}}
-    />
-  {{/each}}
   {{#if this.isResponding}}
     <AnswerNew
       @assignment={{@assignment}}
-      @cancelResponse={{action 'cancelResponse'}}
+      @cancelResponse={{this.cancelResponse}}
       @section={{@section}}
       @problem={{@problem}}
-      @handleCreatedAnswer={{action 'handleCreatedAnswer'}}
+      @handleCreatedAnswer={{this.handleCreatedAnswer}}
       @workspacesToUpdateIds={{this.workspacesToUpdateIds}}
     />
   {{/if}}
@@ -73,8 +63,8 @@
       @priorAnswer={{this.priorAnswer}}
       @section={{@section}}
       @problem={{@problem}}
-      @cancelResponse={{action 'cancelResponse'}}
-      @handleCreatedAnswer={{action 'handleCreatedAnswer'}}
+      @cancelResponse={{this.cancelResponse}}
+      @handleCreatedAnswer={{this.handleCreatedAnswer}}
       @workspacesToUpdateIds={{this.workspacesToUpdateIds}}
     />
   {{/if}}
@@ -82,14 +72,14 @@
     <button
       class='edit-assignment-button'
       type='button'
-      {{action 'reviseAssignmentResponse'}}
+      {{on 'click' this.reviseAssignmentResponse}}
     >Revise <i class='fas fa-edit'></i></button>
   {{/if}}
   {{#if this.showRespondButton}}
     <button
       class='save-assign-btn'
       type='button'
-      {{action 'beginAssignmentResponse'}}
+      {{on 'click' this.beginAssignmentResponse}}
     >Share Your Ideas
       <i class='fas fa-lightbulb'></i></button>
   {{/if}}
@@ -118,10 +108,10 @@
           {{#each this.sortedList as |answer|}}
             <li
               class={{if
-                (is-equal answer.answerId displayedAnswer.answerId)
+                (is-equal answer.answerId this.displayedAnswer.answerId)
                 'highlight'
               }}
-              {{action 'displayAnswer' answer}}
+              {{on 'click' (fn this.displayAnswer answer)}}
             >{{format-date answer.createDate 'MMM Do YYYY hh:mm A'}}</li>
           {{/each}}
         </ol>
diff --git a/app/components/assignment-info-student.js b/app/components/assignment-info-student.js
index e5a9dab34..b973f6f44 100644
--- a/app/components/assignment-info-student.js
+++ b/app/components/assignment-info-student.js
@@ -1,30 +1,15 @@
-import ErrorHandlingComponent from './error-handling';
+import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { later } from '@ember/runloop';
-import { inject as service } from '@ember/service';
-import $ from 'jquery';
+import { service } from '@ember/service';
 
-export default class AssignmentInfoStudentComponent extends ErrorHandlingComponent {
+export default class AssignmentInfoStudentComponent extends Component {
   @service('utility-methods') utils;
   @service store;
+  @service scroll;
   @tracked isResponding = false;
   @tracked isRevising = false;
   @tracked displayedAnswer = null;
-  @tracked loadAnswerErrors = [];
-
-  constructor() {
-    super(...arguments);
-    let assignment = this.args.assignment;
-
-    if (assignment) {
-      if (this.displayedAnswer) {
-        this.displayedAnswer = null;
-      }
-
-      this.toggleResponse();
-    }
-  }
 
   get workspacesToUpdateIds() {
     return this.utils.getHasManyIds(this.args.assignment, 'linkedWorkspaces');
@@ -50,7 +35,7 @@ export default class AssignmentInfoStudentComponent extends ErrorHandlingCompone
   }
 
   get priorAnswer() {
-    return this.sortedList.get('firstObject');
+    return this.sortedList[0];
   }
 
   toggleResponse() {
@@ -63,29 +48,22 @@ export default class AssignmentInfoStudentComponent extends ErrorHandlingCompone
 
   @action beginAssignmentResponse() {
     this.isResponding = true;
-    later(() => {
-      $('html, body').animate({ scrollTop: $(document).height() });
-    }, 100);
+    this.scroll.toBottomAfterRender();
   }
 
   @action reviseAssignmentResponse() {
     this.isRevising = true;
-
-    later(() => {
-      $('html, body').animate({ scrollTop: $(document).height() });
-    }, 100);
+    this.scroll.toBottomAfterRender();
   }
 
   @action displayAnswer(answer) {
     this.displayedAnswer = answer;
-    later(() => {
-      $('html, body').animate({ scrollTop: $(document).height() });
-    }, 100);
+    this.scroll.toBottomAfterRender();
   }
 
   @action handleCreatedAnswer(answer) {
     this.toggleResponse();
-    this.args.answerList.addObject(answer);
+    this.args.onAnswerCreated?.(answer);
   }
 
   @action cancelResponse() {
diff --git a/app/components/assignment-info-teacher.hbs b/app/components/assignment-info-teacher.hbs
index 44b3625b8..7c44e2929 100644
--- a/app/components/assignment-info-teacher.hbs
+++ b/app/components/assignment-info-teacher.hbs
@@ -25,7 +25,7 @@
         id='assignedDate'
         @type='date'
         @value={{(format-date @assignment.assignedDate 'YYYY-MM-DD')}}
-        {{on 'change' (action 'updateAssignedDate')}}
+        {{on 'change' this.updateAssignedDate}}
       />
     {{else}}
       <p class='label'>
@@ -43,7 +43,7 @@
         name='daterange'
         @type='date'
         @value={{(format-date @assignment.dueDate 'YYYY-MM-DD')}}
-        {{on 'change' (action 'updateDueDate')}}
+        {{on 'change' this.updateDueDate}}
       />
     {{else}}
       <p class='label'>
@@ -102,8 +102,8 @@
         @assignment={{@assignment}}
         @section={{@section}}
         @problem={{@problem}}
-        @onCancel={{action (mut showLinkedWsForm) false}}
-        @handleResults={{action 'handleCreatedLinkedWs'}}
+        @onCancel={{this.hideLinkedWs}}
+        @handleResults={{this.handleCreatedLinkedWs}}
       />
     {{/if}}
     {{#if this.showAddLinkedWsBtn}}
@@ -111,7 +111,7 @@
         data-test='add-linked-ws'
         class='add-linkedworkspaces-btn'
         type='button'
-        {{action (mut showLinkedWsForm) true}}
+        {{on 'click' this.showLinkedWs}}
       >
         Add Linked Workspaces
         <i class='fas fa-plus-circle'></i>
@@ -146,8 +146,8 @@
         @assignment={{@assignment}}
         @section={{@section}}
         @problem={{@problem}}
-        @onCancel={{action (mut showParentWsForm) false}}
-        @handleResults={{action 'handleCreatedParentWs'}}
+        @onCancel={{this.hideParentWs}}
+        @handleResults={{this.handleCreatedParentWs}}
       />
     {{/if}}
     {{#if this.showAddParentWsBtn}}
@@ -155,7 +155,7 @@
         data-test='add-parent-ws'
         class='add-parent-workspace-btn'
         type='button'
-        {{action (mut showParentWsForm) true}}
+        {{on 'click' this.showParentWs}}
       >Add Parent Workspace <i class='fas fa-plus-circle'></i></button>
     {{/if}}
     {{#if this.showNoParentWsMsg}}
@@ -169,7 +169,7 @@
       Submissions
       <i
         class={{this.displayListsOptions.submissions.icon}}
-        {{action 'toggleProperty' 'areSubmissionsExpanded'}}
+        {{on 'click' (fn this.toggleProperty 'areSubmissionsExpanded')}}
       ></i>
     </p>
     {{#if this.areSubmissionsExpanded}}
@@ -186,7 +186,7 @@
         data-test='edit-assignment'
         class='edit-assignment-button'
         type='button'
-        {{action 'editAssignment'}}
+        {{on 'click' this.editAssignment}}
       >
         Edit Assignment
         <i class='fas fa-edit'></i>
@@ -197,7 +197,7 @@
         class='save-assign-btn'
         data-test='assn-save'
         type='button'
-        {{action 'updateAssignment'}}
+        {{on 'click' this.updateAssignment}}
       >
         Save Assignment
         <i class='fas fa-save'></i>
@@ -206,7 +206,7 @@
         class='cancelEditBtn'
         data-test='assn-cancel'
         type='button'
-        {{action 'stopEditing'}}
+        {{on 'click' this.stopEditing}}
       >
         Cancel
         <i class='fas fa-times'></i>
@@ -215,25 +215,16 @@
         data-test='trash-assn'
         class='right'
         type='button'
-        {{action 'showDeleteModal'}}
+        {{on 'click' this.showDeleteModal}}
       >
         <i class='fa fa-trash' aria-hidden='true'></i>
       </button>
     {{/if}}
   </div>
   <div class='info-flex-item errors'>
-    {{#each this.findRecordErrors as |error|}}
-      <p class='error-message'>{{error}}</p>
-    {{/each}}
     {{#each this.updateRecordErrors as |error|}}
       <p class='error-message'>{{error}}</p>
     {{/each}}
-    {{#each this.dataFetchErrors as |error|}}
-      <p class='error-message'>{{error}}</p>
-    {{/each}}
-    {{#if this.isMissingRequiredFields}}
-      <p class='error-message'>Please provide all required fields.</p>
-    {{/if}}
     {{#if this.invalidDateRange}}
       <p class='error-message'>Invalid Date Range</p>
     {{/if}}
diff --git a/app/components/assignment-info-teacher.js b/app/components/assignment-info-teacher.js
index fc2966b20..97b807a95 100644
--- a/app/components/assignment-info-teacher.js
+++ b/app/components/assignment-info-teacher.js
@@ -1,37 +1,32 @@
-import ErrorHandlingComponent from './error-handling';
+import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
-import $ from 'jquery';
-import moment from 'moment';
+import { service } from '@ember/service';
 
-export default class AssignmentInfoTeacherComponent extends ErrorHandlingComponent {
+export default class AssignmentInfoTeacherComponent extends Component {
   @service store;
   @service router;
   @service currentUser;
   @service('sweet-alert') alert;
   @service('assignment-permissions') permissions;
   @service('utility-methods') utils;
-  @tracked formattedDueDate = null;
-  @tracked formattedAssignedDate = null;
+  @service errorHandling;
   @tracked isEditing = false;
-  @tracked isPreparingReport = false;
-  @tracked htmlDateFormat = 'YYYY-MM-DD';
-  @tracked displayDateFormat = 'MMM Do YYYY';
   @tracked assignmentToDelete = null;
-  @tracked dataFetchErrors = [];
-  @tracked findRecordErrors = [];
-  @tracked updateRecordErrors = [];
   @tracked areLinkedWsExpanded = true;
   @tracked showParentWsForm = false;
   @tracked showLinkedWsForm = false;
   @tracked areSubmissionsExpanded = true;
-  @tracked cachedProblem = [];
+  @tracked invalidDateRange = false;
 
   get user() {
     return this.currentUser.user;
   }
 
+  get updateRecordErrors() {
+    return this.errorHandling.getErrors('updateRecordErrors');
+  }
+
   get showProblemInput() {
     return this.isEditing && this.canEditProblem;
   }
@@ -65,11 +60,11 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   }
 
   get showFullLinkedWsMsg() {
-    if (this.args.assignment.linkedWorkspacesRequest.linkType === 'group') {
+    if (this.args.assignment.linkedWorkspacesRequest?.linkType === 'group') {
       return this.isEditing && this.allGroupsHaveWs;
     }
     if (
-      this.args.assignment.linkedWorkspacesRequest.linkType === 'individual'
+      this.args.assignment.linkedWorkspacesRequest?.linkType === 'individual'
     ) {
       return this.isEditing && this.allStudentsHaveWs;
     }
@@ -79,14 +74,6 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
     return this.isEditing && this.doesNotHaveLinkedWs;
   }
 
-  constructor() {
-    super(...arguments);
-    // get all sections and problems
-    // only need to get these on init because user won't be creating new sections or problems from this component
-
-    this.cachedProblems = this.store.peekAll('problem');
-  }
-
   get isYourOwn() {
     let creatorId = this.utils.getBelongsToId(
       this.args.assignment,
@@ -157,21 +144,13 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   }
 
   getMongoDate(htmlDateString) {
-    const htmlFormat = 'YYYY-MM-DD';
-    if (typeof htmlDateString !== 'string') {
-      return;
-    }
-    let dateMoment = moment(htmlDateString, htmlFormat);
-    return new Date(dateMoment);
+    if (typeof htmlDateString !== 'string') return;
+    return new Date(`${htmlDateString}T00:00:00`);
   }
 
   getEndDate(htmlDateString) {
-    const htmlFormat = 'YYYY-MM-DD HH:mm';
-    if (typeof htmlDateString !== 'string') {
-      return;
-    }
-    let dateMoment = moment(htmlDateString, htmlFormat);
-    let date = new Date(dateMoment);
+    if (typeof htmlDateString !== 'string') return;
+    const date = new Date(htmlDateString);
     date.setHours(23, 59, 59);
     return date;
   }
@@ -182,35 +161,6 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
     );
   }
 
-  get problemOptions() {
-    let cachedProblems = this.cachedProblems;
-    let toArray = cachedProblems.toArray();
-    return toArray.map((cachedProblem) => {
-      return {
-        id: cachedProblem.id,
-        title: cachedProblem.get('title'),
-      };
-    });
-  }
-  get sectionOptions() {
-    let sections = this.args.sections || [];
-    let toArray = sections.toArray();
-    return toArray.map((section) => {
-      return {
-        id: section.id,
-        name: section.get('name'),
-      };
-    });
-  }
-
-  get initialProblemItem() {
-    return [this.args.assignment.get('problem.id')];
-  }
-
-  get initialSectionItem() {
-    return [this.args.assignment.get('section.id')];
-  }
-
   get showAddParentWsBtn() {
     return (
       this.isEditing &&
@@ -264,7 +214,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
     return students.reject((student) => {
       return existingWorkspaces.find((ws) => {
         let ownerId = this.utils.getBelongsToId(ws, 'owner');
-        return ownerId === student.get('id');
+        return ownerId === student.id;
       });
     });
   }
@@ -279,15 +229,15 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   }
 
   get linkedByGroup() {
-    return this.args.assignment.linkedWorkspacesRequest.linkType === 'group';
+    return this.args.assignment.linkedWorkspacesRequest?.linkType === 'group';
   }
 
   get missingWorkspaces() {
-    if (this.args.assignment.linkedWorkspacesRequest.linkType === 'group') {
+    if (this.args.assignment.linkedWorkspacesRequest?.linkType === 'group') {
       return this.groupsWithoutWorkspaces;
     }
     if (
-      this.args.assignment.linkedWorkspacesRequest.linkType === 'individual'
+      this.args.assignment.linkedWorkspacesRequest?.linkType === 'individual'
     ) {
       return this.studentsWithoutWorkspaces;
     }
@@ -318,7 +268,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
 
   @action deleteAssignment() {
     const assignment = this.args.assignment;
-    assignment.set('isTrashed', true);
+    assignment.isTrashed = true;
     return assignment
       .save()
       .then((assignment) => {
@@ -334,7 +284,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
           )
           .then((result) => {
             if (result.value) {
-              assignment.set('isTrashed', false);
+              assignment.isTrashed = false;
               assignment.save().then(() => {
                 this.alert.showToast(
                   'success',
@@ -352,7 +302,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
       })
       .catch((err) => {
         this.assignmentToDelete = null;
-        this.handleErrors(err, 'updateRecordErrors', assignment);
+        this.errorHandling.handleErrors(err, 'updateRecordErrors', assignment);
       });
   }
 
@@ -376,10 +326,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
 
     const assignment = this.args.assignment;
 
-    if (
-      !this.args.assignment.get('problem') ||
-      !this.args.assignment.get('section')
-    ) {
+    if (!this.args.problem || !this.args.section) {
       return this.alert.showToast(
         'error',
         'Class and Problem are required',
@@ -427,10 +374,10 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
       }
     }
 
-    if (assignment.get('hasDirtyAttributes')) {
+    if (assignment.hasDirtyAttributes) {
       // never creating workspaces from this function
-      assignment.set('linkedWorkspacesRequest', { doCreate: false });
-      assignment.set('parentWorkspaceRequest', { doCreate: false });
+      assignment.linkedWorkspacesRequest = { doCreate: false };
+      assignment.parentWorkspaceRequest = { doCreate: false };
 
       return assignment
         .save()
@@ -444,12 +391,15 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
             null
           );
           this.assignmentUpdateSuccess = true;
-          $('.daterangepicker').remove();
           this.isEditing = false;
           return;
         })
         .catch((err) => {
-          this.handleErrors(err, 'updateRecordErrors', assignment);
+          this.errorHandling.handleErrors(
+            err,
+            'updateRecordErrors',
+            assignment
+          );
         });
     } else {
       this.alert.showToast(
@@ -462,7 +412,6 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
       );
       this.args.assignment.rollbackAttributes();
       this.isEditing = false;
-      $('.daterangepicker').remove();
     }
   }
   @action stopEditing() {
@@ -485,33 +434,13 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
               this.showParentWsForm = false;
             }
             this.isEditing = false;
-            $('.daterangepicker').remove();
           }
         });
     } else {
       this.isEditing = false;
-      $('.daterangepicker').remove();
     }
     this.args.assignment.rollbackAttributes();
   }
-  @action updateSelectizeSingle(val, $item, propToUpdate, model) {
-    let errorProp = `${model}FormErrors`;
-    this[errorProp] = [];
-
-    if ($item === null) {
-      this.args[propToUpdate] = null;
-      return;
-    }
-    let record = this.store.peekRecord(model, val);
-    if (!record) {
-      return;
-    }
-    if (propToUpdate === 'section') {
-      this.args.assignment.section = record;
-    } else if (propToUpdate === 'problem') {
-      this.args.assignment.problem = record;
-    }
-  }
   @action handleCreatedParentWs(assignment) {
     if (assignment) {
       this.alert.showToast(
@@ -553,4 +482,24 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
       event.target.value.replace(/-/g, '/')
     );
   }
+
+  @action
+  showLinkedWs() {
+    this.showLinkedWsForm = true;
+  }
+
+  @action
+  hideLinkedWs() {
+    this.showLinkedWsForm = false;
+  }
+
+  @action
+  hideParentWs() {
+    this.showParentWsForm = false;
+  }
+
+  @action
+  showParentWs() {
+    this.showParentWsForm = true;
+  }
 }
diff --git a/app/components/assignment-info.hbs b/app/components/assignment-info.hbs
index d225aed1d..e6b4f9cfb 100644
--- a/app/components/assignment-info.hbs
+++ b/app/components/assignment-info.hbs
@@ -11,7 +11,6 @@
 {{else}}
   <AssignmentInfoTeacher
     @groups={{@groups}}
-    @sections={{@sections}}
     @assignment={{@assignment}}
     @studentList={{@assignmentStudents}}
     @section={{@currentSection}}
diff --git a/app/components/assignment-new.js b/app/components/assignment-new.js
index e779e6d7f..a229ef485 100644
--- a/app/components/assignment-new.js
+++ b/app/components/assignment-new.js
@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import validate from 'validate.js';
-import moment from 'moment';
+import { format, parse, parseISO } from 'date-fns';
 
 export default class AssignmentNewComponent extends Component {
   @service router;
@@ -22,7 +22,7 @@ export default class AssignmentNewComponent extends Component {
   @tracked parentWorkspaceAccess = false;
   @tracked allSelected = true;
   @tracked invalidDateRange = false;
-  @tracked assignedDate = moment(new Date()).format('YYYY-MM-DD');
+  @tracked assignedDate = format(new Date(), 'yyyy-MM-dd');
   tooltips = {
     class: 'Select which class you want to assign the problem',
     problem: 'Select which problem you want to assign',
@@ -49,7 +49,7 @@ export default class AssignmentNewComponent extends Component {
       presence: false,
     },
   };
-  nameDate = moment().format('MMM Do YYYY');
+  nameDate = format(new Date(), 'MMM do yyyy');
 
   linkedWsOptions = {
     groupName: 'linkedWorkspaces',
@@ -195,7 +195,7 @@ export default class AssignmentNewComponent extends Component {
     }
     let title = this.selectedProblem.title;
 
-    return `${title} / ${moment(this.assignedDate).format('MMM Do YYYY')}`;
+    return `${title} / ${format(parseISO(this.assignedDate), 'MMM do yyyy')}`;
   }
   //for the 'workspaces to be created' list
   get workspacesList() {
@@ -231,10 +231,8 @@ export default class AssignmentNewComponent extends Component {
 
     if (!name) {
       let nameDate = assignedDate
-        ? moment(new Date(assignedDate.replace(/-/g, '/'))).format(
-            'MMM Do YYYY'
-          )
-        : moment(new Date()).format('MMM Do YYYY');
+        ? format(new Date(assignedDate.replace(/-/g, '/')), 'MMM do yyyy')
+        : format(new Date(), 'MMM do yyyy');
       let problemTitle = problem.get('title');
       name = `${problemTitle} / ${nameDate}`;
     }
@@ -264,14 +262,14 @@ export default class AssignmentNewComponent extends Component {
     let linkedNameFormat;
 
     if (linkedFormatInput) {
-      linkedNameFormat = linkedFormatInput.val();
+      linkedNameFormat = linkedFormatInput.value;
     }
 
     let parentFormatInput = document.getElementById('parent-ws-new-name');
     let parentNameFormat;
 
     if (parentFormatInput) {
-      parentNameFormat = parentFormatInput.val();
+      parentNameFormat = parentFormatInput.value;
     }
 
     createAssignmentData.linkedWorkspacesRequest = {
@@ -315,24 +313,17 @@ export default class AssignmentNewComponent extends Component {
   }
 
   getMongoDate(htmlDateString) {
-    const htmlFormat = 'YYYY-MM-DD';
-    if (typeof htmlDateString !== 'string') {
-      return;
-    }
-    let dateMoment = moment(htmlDateString, htmlFormat);
-    return new Date(dateMoment);
+    if (typeof htmlDateString !== 'string') return;
+    return parse(htmlDateString, 'yyyy-MM-dd', new Date());
   }
 
   getEndDate(htmlDateString) {
-    const htmlFormat = 'YYYY-MM-DD HH:mm';
-    if (typeof htmlDateString !== 'string') {
-      return;
-    }
-    let dateMoment = moment(htmlDateString, htmlFormat);
-    let date = new Date(dateMoment);
-    date.setHours(23, 59, 59);
-    return date;
+    if (typeof htmlDateString !== 'string') return;
+    const parsed = parse(htmlDateString, 'yyyy-MM-dd HH:mm', new Date());
+    parsed.setHours(23, 59, 59);
+    return parsed;
   }
+
   get problemOptions() {
     let cachedProblems = this.args.cachedProblems;
     if (cachedProblems) {
diff --git a/app/components/assignment-report.hbs b/app/components/assignment-report.hbs
index e62e85a8e..e0aebead3 100644
--- a/app/components/assignment-report.hbs
+++ b/app/components/assignment-report.hbs
@@ -1,25 +1,53 @@
-<div id="assignment-report">
-  <section class="assignmentReport">
-    <p class="info-summary">{{this.summaryMessage}}</p>
-    <table class="report rows values">
-      <tr class="headers">
-        <th><ToggleControl @classToAdd="sort-bar-item name" @onUpdate={{action "updateSortCriterion"}} @initialState={{1}} @options={{this.sortOptions.student}} @label="Student" @parentProp={{this.sortCriterion}} @type="username" @activeType={{this.sortCriterion.type}} />
+<div id='assignment-report'>
+  <section class='assignmentReport'>
+    <p class='info-summary'>{{this.summaryMessage}}</p>
+    <table class='report rows values'>
+      <tr class='headers'>
+        <th><ToggleControl
+            @classToAdd='sort-bar-item name'
+            @onUpdate={{this.updateSortCriterion}}
+            @initialState={{1}}
+            @options={{this.sortOptions.student}}
+            @label='Student'
+            @parentProp={{this.sortCriterion}}
+            @type='username'
+            @activeType={{this.sortCriterion.type}}
+          />
         </th>
         <th>
-          <ToggleControl @classToAdd="sort-bar-item revisions" @onUpdate={{action "updateSortCriterion"}} @initialState={{0}} @options={{this.sortOptions.revisionCount}} @label="Submissions" @type="count" @activeType={{this.sortCriterion.type}} />
+          <ToggleControl
+            @classToAdd='sort-bar-item revisions'
+            @onUpdate={{this.updateSortCriterion}}
+            @initialState={{0}}
+            @options={{this.sortOptions.revisionCount}}
+            @label='Submissions'
+            @type='count'
+            @activeType={{this.sortCriterion.type}}
+          />
+        </th>
+        <th><ToggleControl
+            @classToAdd='sort-bar-item date'
+            @onUpdate={{this.updateSortCriterion}}
+            @initialState={{0}}
+            @options={{this.sortOptions.latestRevisionDate}}
+            @label='Latest Revision'
+            @type='latestRevision'
+            @activeType={{this.sortCriterion.type}}
+          />
         </th>
-        <th><ToggleControl @classToAdd="sort-bar-item date" @onUpdate={{action "updateSortCriterion"}} @initialState={{0}} @options={{this.sortOptions.latestRevisionDate}} @label="Latest Revision" @type="latestRevision" @activeType={{this.sortCriterion.type}} />
-          </th>
       </tr>
-      {{#each this.sortedReportItems as |item| }}
+      {{#each this.sortedReportItems as |item|}}
         <tr>
-            <td class="username">{{item.username}}</td>
-            <td class="count">{{item.count}}</td>
-            {{#if item.count}}
-              <td class="latest-date">{{format-date item.latestRevision "MMM Do YYYY h:mm A"}}</td>
-            {{else}}
+          <td class='username'>{{item.username}}</td>
+          <td class='count'>{{item.count}}</td>
+          {{#if item.count}}
+            <td class='latest-date'>{{format-date
+                item.latestRevision
+                'MMM Do YYYY h:mm A'
+              }}</td>
+          {{else}}
             <td> N/A</td>
-            {{/if}}
+          {{/if}}
         </tr>
       {{else}}
         <p>No submissions yet.</p>
diff --git a/app/components/assignment-report.js b/app/components/assignment-report.js
index 6497fae08..28f5577d2 100644
--- a/app/components/assignment-report.js
+++ b/app/components/assignment-report.js
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import _ from 'underscore';
 
 export default class AssignmentReportComponent extends Component {
   @tracked sortCriterion = {
@@ -12,44 +11,46 @@ export default class AssignmentReportComponent extends Component {
   };
 
   get sortedReportItems() {
-    let reportObj = this.reportWithUser;
-    let items = [];
-    _.each(reportObj, (info, username) => {
-      // eslint-disable-next-line prefer-object-spread
-      let obj = Object.assign({}, info);
-      obj.username = username;
+    const reportObj = this.reportWithUser;
+
+    const items = Object.entries(reportObj).map(([username, info]) => ({
+      ...info,
+      username,
       //make sure latestRevision is instanceof Date
-      obj.latestRevision = obj.latestRevision
-        ? new Date(obj.latestRevision)
-        : obj.latestRevision;
-      items.push(obj);
+      latestRevision: info.latestRevision
+        ? new Date(info.latestRevision)
+        : info.latestRevision,
+    }));
+
+    const { param: sortValue = 'username', direction: sortDirection = 'asc' } =
+      this.sortCriterion.sortParam;
+
+    const sorted = [...items].sort((a, b) => {
+      const valA = a[sortValue];
+      const valB = b[sortValue];
+
+      if (valA == null) return 1;
+      if (valB == null) return -1;
+
+      if (valA < valB) return -1;
+      if (valA > valB) return 1;
+      return 0;
     });
-    let sortValue = this.sortCriterion.sortParam.param || 'username';
-    let sortDirection = this.sortCriterion.sortParam.direction || 'asc';
-    let sorted = items.sortBy(sortValue);
-
-    if (sortDirection === 'desc') {
-      return sorted.reverse();
-    }
-    return sorted;
+
+    return sortDirection === 'desc' ? sorted.reverse() : sorted;
   }
 
   get reportWithUser() {
-    let details = this.args.details;
-
-    let results = {};
+    const { details, students } = this.args;
 
-    _.each(details, (val, userId) => {
-      let user = this.args.students.findBy('id', userId);
-      if (user) {
-        let username = user.get('username');
-        if (username) {
-          results[username] = val;
-        }
+    return Object.entries(details).reduce((acc, [userId, val]) => {
+      const user = students.find((s) => s.id === userId);
+      const username = user?.username;
+      if (username) {
+        acc[username] = val;
       }
-    });
-
-    return results;
+      return acc;
+    }, {});
   }
 
   sortOptions = {
@@ -103,24 +104,23 @@ export default class AssignmentReportComponent extends Component {
   };
 
   get totalSubmissionsCount() {
-    return this.sortedReportItems.mapBy('count').reduce((acc, val) => {
-      return acc + val;
-    }, 0);
+    return this.sortedReportItems.reduce(
+      (acc, item) => acc + (item.count || 0),
+      0
+    );
   }
 
   get uniqueSubmitters() {
-    return this.sortedReportItems.filter((item) => {
-      return item.count > 0;
-    });
+    return this.sortedReportItems.filter((item) => item.count > 0);
   }
 
   get summaryMessage() {
-    let numStudents = this.sortedReportItems.length;
-    let numSubmitters = this.uniqueSubmitters.length;
-    let numSubmissions = this.totalSubmissionsCount;
+    const numStudents = this.sortedReportItems.length;
+    const numSubmitters = this.uniqueSubmitters.length;
+    const numSubmissions = this.totalSubmissionsCount;
 
-    let studentNoun = numStudents === 1 ? 'student' : 'students';
-    let submissionNoun = numSubmissions === 1 ? 'submission' : 'submissions';
+    const studentNoun = numStudents === 1 ? 'student' : 'students';
+    const submissionNoun = numSubmissions === 1 ? 'submission' : 'submissions';
 
     return `${numSubmitters} out of ${numStudents} ${studentNoun} have submitted to this assignment, for a total of ${numSubmissions} ${submissionNoun}.`;
   }
diff --git a/app/components/category-filter.hbs b/app/components/category-filter.hbs
index 2b99982f9..04295cce1 100644
--- a/app/components/category-filter.hbs
+++ b/app/components/category-filter.hbs
@@ -53,7 +53,7 @@
     <div id='category-list-modal'>
       <div class='modal-content'>
         <h4>Select a Category</h4>
-        <button class='close' {{on 'click' this.handleCloseCategoryList}}>
+        <button class='close' type="button" {{on 'click' this.handleCloseCategoryList}}>
           <i class='fas fa-times'></i>
         </button>
         <CategoriesMenu @addCategory={{this.handleAddCategory}} />
diff --git a/app/components/forgot-password.hbs b/app/components/forgot-password.hbs
index dbc0aaf2c..0ffa9e0c2 100644
--- a/app/components/forgot-password.hbs
+++ b/app/components/forgot-password.hbs
@@ -59,7 +59,7 @@
 
     </form>
     <p class='login-link'>
-      <LinkTo @route='auth.login' @classNames='login-link'>Back to Login</LinkTo>
+      <LinkTo @route='auth.login' class='login-link'>Back to Login</LinkTo>
     </p>
 
   </div>
diff --git a/app/components/image-upload.js b/app/components/image-upload.js
index faf9f7cfc..327426e35 100644
--- a/app/components/image-upload.js
+++ b/app/components/image-upload.js
@@ -83,7 +83,7 @@ export default class ImageUploadComponent extends Component {
       })
       .catch((err) => {
         this.setShowLoadingMessage(false);
-        this.errorHandling.handleErrors(err, 'uploadErrors', err);
+        this.errorHandling.handleErrors(err, 'uploadErrors');
         return err;
       });
   }
diff --git a/app/components/linked-workspaces-new.hbs b/app/components/linked-workspaces-new.hbs
index 8cdbdca16..e8e1b939f 100644
--- a/app/components/linked-workspaces-new.hbs
+++ b/app/components/linked-workspaces-new.hbs
@@ -1,4 +1,4 @@
-<div id='linked-workspaces-new'>
+<div id='linked-workspaces-new' {{did-insert this.initialSelectAll}}>
   {{#unless @isDisplayOnly}}
     <p class='info'>
       Clicking "Create Workspaces" will generate a private workspace for each
@@ -35,7 +35,7 @@
         <li><label class='no-width'><Input
               @type='checkbox'
               {{on 'input' this.selectAll}}
-              @checked={{this.showAllSelected}}
+              checked={{this.showAllSelected}}
               class='select-all'
             />Select All</label></li>
         {{#each @students as |student|}}
@@ -48,13 +48,6 @@
         {{/each}}
       </ul>
     </div>
-    {{#each this.workspaceNameErrors as |error|}}
-      <Ui::ErrorBox
-        @error={{error}}
-        @showDismiss={{true}}
-        @resetError={{action (mut this.workspaceNameErrors) null}}
-      />
-    {{/each}}
   </div>
 
   {{#unless @isDisplayOnly}}
@@ -63,7 +56,7 @@
         <Ui::ErrorBox
           @error={{createWorkspaceError}}
           @showDismiss={{true}}
-          @resetError={{action (mut this.createWorkspaceError) null}}
+          @resetError={{this.resetCreateWorkspaceError}}
         />
       {{/if}}
     </div>
@@ -79,13 +72,13 @@
           class='primary-button create-ws'
           data-test='add-linked-ws-create'
           type='button'
-          {{action 'create'}}
+          {{on 'click' this.create}}
         >Create Workspaces</button>
         <button
           class='primary-button cancel-button'
           data-test='add-linked-ws-cancel'
           type='button'
-          {{action 'cancel'}}
+          {{on 'click' this.cancel}}
         >Cancel</button>
       </div>
     {{/unless}}
diff --git a/app/components/linked-workspaces-new.js b/app/components/linked-workspaces-new.js
index a5edbb435..bf2eb32a7 100644
--- a/app/components/linked-workspaces-new.js
+++ b/app/components/linked-workspaces-new.js
@@ -14,17 +14,18 @@ export default class LinkedWorkspacesNew extends Component {
   @tracked groupWorkspacesToMake = [];
   @tracked studentWorkspacesToMake = [];
   @tracked allSelected = false;
-  get showAllSelected() {
-    return this.args.allSelected || this.allSelected;
-  }
+  @tracked isRequestInProgress = false;
+  @tracked doShowLoadingMessage = false;
+  @tracked createWorkspaceError = null;
+
   constructor() {
     super(...arguments);
     this.workspaceName = this.defaultName;
-    if (!this.args.isDisplayOnly) {
-      this.selectAll();
-    }
   }
 
+  get showAllSelected() {
+    return this.args.allSelected || this.allSelected;
+  }
   get defaultName() {
     let assignmentName = this.args.assignmentName || this.args.assignment.name;
     let sectionName = this.args.sectionName || this.args.section.name;
@@ -46,9 +47,16 @@ export default class LinkedWorkspacesNew extends Component {
     return [...this.groupWorkspacesToMake, ...this.studentWorkspacesToMake];
   }
 
+  @action
+  initialSelectAll() {
+    if (!this.args.isDisplayOnly) {
+      this.args.selectAll?.();
+    }
+  }
+
   @action selectAll() {
     if (this.args.isDisplayOnly) {
-      return this.args.selectAll();
+      return this.args.selectAll?.();
     }
     if (this.allSelected) {
       this.studentWorkspacesToMake = [];
@@ -57,10 +65,10 @@ export default class LinkedWorkspacesNew extends Component {
       return;
     }
     this.studentWorkspacesToMake = this.args.students
-      .filter((item) => item.constructor.modelName === 'user')
+      .filter((item) => item.isModelType('user'))
       .map((item) => item.id);
     this.groupWorkspacesToMake = this.args.students
-      .filter((item) => item.constructor.modelName === 'group')
+      .filter((item) => item.isModelType('group'))
       .map((item) => item.id);
     this.allSelected = true;
   }
@@ -69,11 +77,10 @@ export default class LinkedWorkspacesNew extends Component {
     if (this.args.isDisplayOnly) {
       return this.args.updateLists(student);
     }
-    if (student.constructor.modelName === 'user') {
+    if (student.isModelType('user')) {
       if (this.studentWorkspacesToMake.includes(student.id)) {
-        this.studentWorkspacesToMake.splice(
-          this.studentWorkspacesToMake.indexOf(student.id),
-          1
+        this.studentWorkspacesToMake = this.studentWorkspacesToMake.filter(
+          (id) => id !== student.id
         );
       } else {
         this.studentWorkspacesToMake = [
@@ -81,11 +88,10 @@ export default class LinkedWorkspacesNew extends Component {
           student.id,
         ];
       }
-    } else if (student.constructor.modelName === 'group') {
+    } else if (student.isModelType('group')) {
       if (this.groupWorkspacesToMake.includes(student.id)) {
-        this.groupWorkspacesToMake.splice(
-          this.groupWorkspacesToMake.indexOf(student.id),
-          1
+        this.groupWorkspacesToMake = this.groupWorkspacesToMake.filter(
+          (id) => id !== student.id
         );
       } else {
         this.groupWorkspacesToMake = [
@@ -106,6 +112,12 @@ export default class LinkedWorkspacesNew extends Component {
       this.isCreating = false;
     }
   }
+
+  @action
+  resetCreateWorkspaceError() {
+    this.createWorkspaceError = null;
+  }
+
   @action create() {
     let assignment = this.args.assignment;
 
@@ -113,12 +125,12 @@ export default class LinkedWorkspacesNew extends Component {
       return;
     }
 
-    // this.loading.handleLoadingMessage(
-    //   this,
-    //   'start',
-    //   'isRequestInProgress',
-    //   'doShowLoadingMessage'
-    // );
+    this.loading.handleLoadingMessage(
+      this,
+      'start',
+      'isRequestInProgress',
+      'doShowLoadingMessage'
+    );
 
     assignment.linkedWorkspacesRequest = {
       ...assignment.linkedWorkspacesRequest,
@@ -133,31 +145,29 @@ export default class LinkedWorkspacesNew extends Component {
     return assignment
       .save()
       .then((assignment) => {
-        // this.loading.handleLoadingMessage(
-        //   this,
-        //   'end',
-        //   'isRequestInProgress',
-        //   'doShowLoadingMessage'
-        // );
-
-        let createWorkspaceError = assignment.get(
-          'linkedWorkspacesRequest.error'
+        this.loading.handleLoadingMessage(
+          this,
+          'end',
+          'isRequestInProgress',
+          'doShowLoadingMessage'
         );
 
+        let createWorkspaceError = assignment.linkedWorkspacesRequest.error;
+
         if (createWorkspaceError) {
           return (this.createWorkspaceError = createWorkspaceError);
         }
 
-        this.args.handleResults(assignment);
+        this.args.handleResults?.(assignment);
         this.cancel();
       })
       .catch((err) => {
-        // this.loading.handleLoadingMessage(
-        //   this,
-        //   'start',
-        //   'isRequestInProgress',
-        //   'doShowLoadingMessage'
-        // );
+        this.loading.handleLoadingMessage(
+          this,
+          'end',
+          'isRequestInProgress',
+          'doShowLoadingMessage'
+        );
 
         this.createWorkspaceError = err;
       });
diff --git a/app/components/log-in.hbs b/app/components/log-in.hbs
index 00083d706..ddb4c2fc9 100644
--- a/app/components/log-in.hbs
+++ b/app/components/log-in.hbs
@@ -66,10 +66,10 @@
 
     <p class='signup-link' data-test='auth-signup'>
       New to EnCoMPASS?
-      <LinkTo @route='auth.signup' @classNames='signup-link'>Sign up now</LinkTo>
+      <LinkTo @route='auth.signup' class='signup-link'>Sign up now</LinkTo>
     </p>
     <p class='forgot-link'>Forgot Password?
-      <LinkTo @route='auth.forgot' @classNames='forgot-link'>Request password
+      <LinkTo @route='auth.forgot' class='forgot-link'>Request password
         reset</LinkTo>
     </p>
 
diff --git a/app/components/parent-workspace-new.hbs b/app/components/parent-workspace-new.hbs
index dcd1ca310..a3cfb727b 100644
--- a/app/components/parent-workspace-new.hbs
+++ b/app/components/parent-workspace-new.hbs
@@ -18,13 +18,6 @@
         placeholder='Provide a name for your workspace'
       />
     </div>
-    {{#each this.workspaceNameErrors as |error|}}
-      <Ui::ErrorBox
-        @error={{error}}
-        @showDismiss={{true}}
-        @resetError={{action (mut this.workspaceNameErrors) null}}
-      />
-    {{/each}}
   </div>
 
   {{#unless @isDisplayOnly}}
@@ -33,7 +26,7 @@
         <Ui::ErrorBox
           @error={{createWorkspaceError}}
           @showDismiss={{true}}
-          @resetError={{action (mut this.createWorkspaceError) null}}
+          @resetError={{this.resetCreateWorkspaceError}}
         />
       {{/if}}
     </div>
@@ -49,13 +42,13 @@
           class='primary-button'
           data-test='add-parent-ws-create'
           type='button'
-          {{action 'create'}}
+          {{on 'click' this.create}}
         >Create Workspace</button>
         <button
           class='primary-button cancel-button'
           data-test='add-parent-ws-cancel'
           type='button'
-          {{action 'cancel'}}
+          {{on 'click' this.cancel}}
         >Cancel</button>
       </div>
     {{/unless}}
diff --git a/app/components/parent-workspace-new.js b/app/components/parent-workspace-new.js
index 4ea435d1e..d5dc2d0d1 100644
--- a/app/components/parent-workspace-new.js
+++ b/app/components/parent-workspace-new.js
@@ -1,15 +1,16 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class ParentWorkspaceNewComponent extends Component {
   @service('loading-display') loading;
-  @service('current-user') currentUser;
-  @tracked isRequestInProgess = false;
+  @service currentUser;
+  @tracked isRequestInProgress = false;
   @tracked doShowLoadingMessage = false;
   @tracked workspaceName = '';
   @tracked isCreating = true;
+  @tracked createWorkspaceError = null;
 
   constructor() {
     super(...arguments);
@@ -38,21 +39,22 @@ export default class ParentWorkspaceNewComponent extends Component {
   }
   @action create() {
     let childWorkspaces = this.args.childWorkspaces || [];
-    if (!childWorkspaces) {
-      return (this.createWorkspaceError =
-        'Must provide child workspaces to create parent workspace');
+    if (childWorkspaces.length === 0) {
+      this.createWorkspaceError =
+        'Must provide child workspaces to create parent workspace';
+      return;
     }
 
-    // this.loading.handleLoadingMessage(
-    //   this,
-    //   'start',
-    //   'isRequestInProgress',
-    //   'doShowLoadingMessage'
-    // );
+    this.loading.handleLoadingMessage(
+      this,
+      'start',
+      'isRequestInProgress',
+      'doShowLoadingMessage'
+    );
 
     let assignment = this.args.assignment;
     let data = {
-      childWorkspaces: childWorkspaces.mapBy('id'),
+      childWorkspaces: childWorkspaces.map((ws) => ws.id),
       doAutoUpdateFromChildren: true,
       name: this.workspaceName || this.defaultName,
       doCreate: true,
@@ -65,33 +67,37 @@ export default class ParentWorkspaceNewComponent extends Component {
     return assignment
       .save()
       .then((results) => {
-        // this.loading.handleLoadingMessage(
-        //   this,
-        //   'end',
-        //   'isRequestInProgress',
-        //   'doShowLoadingMessage'
-        // );
-
-        let createWorkspaceError = results.get('parentWorkspaceRequest.error');
-        let createdWorkspace = results.get(
-          'parentWorkspaceRequest.createdWorkspace'
+        this.loading.handleLoadingMessage(
+          this,
+          'end',
+          'isRequestInProgress',
+          'doShowLoadingMessage'
         );
 
+        let createWorkspaceError = results.parentWorkspaceRequest?.error;
+        let createdWorkspace = results.parentWorkspaceRequest?.createdWorkspace;
+
         if (createWorkspaceError) {
-          return (this.createWorkspaceError = createWorkspaceError);
+          this.createWorkspaceError = createWorkspaceError;
+          return;
         }
 
-        this.args.handleResults(createdWorkspace);
+        this.args.handleResults?.(createdWorkspace);
         this.cancel();
       })
       .catch((err) => {
-        // this.loading.handleLoadingMessage(
-        //   this,
-        //   'end',
-        //   'isRequestInProgress',
-        //   'doShowLoadingMessage'
-        // );
+        this.loading.handleLoadingMessage(
+          this,
+          'end',
+          'isRequestInProgress',
+          'doShowLoadingMessage'
+        );
         this.createWorkspaceError = err;
       });
   }
+
+  @action
+  resetCreateWorkspaceError() {
+    this.createWorkspaceError = null;
+  }
 }
diff --git a/app/components/parent-ws-collab-new.js b/app/components/parent-ws-collab-new.js
index 5b34aae13..2f5e4efbd 100644
--- a/app/components/parent-ws-collab-new.js
+++ b/app/components/parent-ws-collab-new.js
@@ -1,8 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import _ from 'underscore';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class ParentWsCollabNewComponent extends Component {
   @service('utility-methods') utils;
@@ -122,9 +121,9 @@ export default class ParentWsCollabNewComponent extends Component {
     if (!val) {
       return;
     }
-    let existingCollab = this.args.workspace.get('collaborators');
+    let existingCollab = this.args.workspace.get('collaborators') || [];
     const user = this.store.peekRecord('user', val);
-    let alreadyCollab = _.contains(existingCollab, user.get('id'));
+    let alreadyCollab = existingCollab.includes(user.get('id'));
 
     if (alreadyCollab) {
       this.existingUserError = true;
diff --git a/app/components/problem-info.hbs b/app/components/problem-info.hbs
index 35f30156b..c4d228463 100644
--- a/app/components/problem-info.hbs
+++ b/app/components/problem-info.hbs
@@ -68,7 +68,7 @@
           <div class='info-content-block statement large-content'>
             {{#if @isEditing}}
               {{! The starting text is from the argument; we change the local value }}
-              <QuillContainer
+              <Ui::QuillContainer
                 @onEditorChange={{this.updateQuillText}}
                 @startingText={{@problem.text}}
               />
diff --git a/app/components/problem-new.hbs b/app/components/problem-new.hbs
index 7eebeffa6..d497031c4 100644
--- a/app/components/problem-new.hbs
+++ b/app/components/problem-new.hbs
@@ -61,7 +61,7 @@
           ><i class='fas fa-info-circle info-icon'></i></span>
         </p>
         <div class='info-content-block'>
-          <QuillContainer
+          <Ui::QuillContainer
             @onEditorChange={{this.updateQuillText}}
             @startingText={{this.problemStatement}}
           />
diff --git a/app/components/quill-container.js b/app/components/quill-container.js
deleted file mode 100644
index 52ee18cfb..000000000
--- a/app/components/quill-container.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import { inject as service } from '@ember/service';
-import Component from '@ember/component';
-import $ from 'jquery';
-
-export default Component.extend({
-  classNames: ['quill-container'],
-  utils: service('utility-methods'),
-
-  isEmpty: true,
-  isOverLengthLimit: false,
-
-  defaultOptions: {
-    debug: 'false',
-    modules: {
-      toolbar: [
-        ['bold', 'italic', 'underline', 'strike'],
-        [{ color: [] }, { background: [] }],
-        [{ script: 'sub' }, { script: 'super' }],
-        ['blockquote'],
-        [{ list: 'ordered' }, { list: 'bullet' }],
-        ['link', 'image', 'formula'],
-      ],
-    },
-    theme: 'snow',
-    placeholder:
-      'Type a detailed explanation here. This box will expand as you type.',
-  },
-
-  defaultMaxLength: 14680064, // 14MB
-
-  didReceiveAttrs() {
-    this._super();
-    let attrSectionId = this.attrSectionId;
-    if (!attrSectionId) {
-      this.set('sectionId', 'editor');
-    } else {
-      this.set('sectionId', attrSectionId);
-    }
-
-    let limit = this.maxLength || this.defaultMaxLength;
-    this.set('lengthLimit', limit);
-  },
-
-  didInsertElement() {
-    let elId = this.elementId;
-    let selector = `#${elId} section`;
-
-    let options;
-    if (!this.options) {
-      options = this.defaultOptions;
-    }
-    options.bounds = selector;
-
-    $(selector).ready(() => {
-      let quill = new window.Quill(selector, options);
-      this.set('quillInstance', quill);
-
-      quill.on('text-change', (delta, oldDelta, source) => {
-        this.handleQuillChange();
-      });
-
-      this.handleStartingText();
-      this.handleQuillChange();
-    });
-    this._super(...arguments);
-  },
-
-  didUpdateAttrs() {
-    this._super();
-    this.handleStartingText();
-  },
-
-  willDestroyElement() {
-    let quill = this.quillInstance;
-    if (quill) {
-      quill.off('text-change');
-    }
-    this._super(...arguments);
-  },
-
-  handleStartingText() {
-    let attrStartingText = this.startingText;
-    let startingText =
-      typeof attrStartingText === 'string' ? attrStartingText : '';
-    $('.ql-editor').html(startingText);
-  },
-  // Empty quill editor .html() property returns <p><br></p>
-  // For quill to not be empty, there must either be some text or a student
-  // must have uploaded an img so there must be an img tag
-  isQuillNonEmpty() {
-    let editor = $('.ql-editor');
-
-    if (!editor) {
-      return false;
-    }
-    let editorText = editor.text();
-    let trimmed = typeof editorText === 'string' ? editorText.trim() : '';
-
-    if (trimmed.length > 0) {
-      return true;
-    }
-
-    let content = editor.html();
-    if (content.includes('<img')) {
-      return true;
-    }
-    return false;
-  },
-
-  handleQuillChange() {
-    let editor = $('.ql-editor');
-    if (!editor) {
-      return;
-    }
-
-    let htmlContents = editor.html();
-
-    let replaced = htmlContents.replace(/["]/g, "'");
-    let isEmpty = !this.isQuillNonEmpty();
-    this.set('isEmpty', isEmpty);
-
-    let isOverLengthLimit = replaced.length > this.lengthLimit;
-    this.set('isOverLengthLimit', isOverLengthLimit);
-
-    this.onTextChange(replaced, isEmpty, isOverLengthLimit);
-  },
-
-  onTextChange(html, isEmpty, isOverLengthLimit) {
-    if (this.onEditorChange) {
-      this.onEditorChange(html, isEmpty, isOverLengthLimit);
-    }
-  },
-});
diff --git a/app/components/recursive-menu.hbs b/app/components/recursive-menu.hbs
index af983a446..347e0bdd6 100644
--- a/app/components/recursive-menu.hbs
+++ b/app/components/recursive-menu.hbs
@@ -1,6 +1,6 @@
 <li class='has-children'>
   {{#if (not-empty @item.children)}}
-    <!-- Expandable (has children) -->
+    {{!-- Expandable (has children) --}}
     <input
       type='checkbox'
       id={{@item.identifier}}
@@ -20,11 +20,11 @@
     {{#if this.isOpen}}
       <ul>
         {{#each @item.children as |child|}}
-          <!-- Recursively render each child as a <RecursiveMenu> -->
+          {{!-- Recursively render each child as a <RecursiveMenu> --}}
           <RecursiveMenu @item={{child}} @onAddCategory={{@onAddCategory}} />
         {{/each}}
 
-        <!-- The 'Other' button for this parent item -->
+        {{!-- The 'Other' button for this parent item --}}
         <li class='item'>
           <button type='button' {{on 'click' (fn @onAddCategory @item)}}>
             +
@@ -34,7 +34,7 @@
       </ul>
     {{/if}}
   {{else}}
-    <!-- Leaf (no children) -->
+    {{!-- Leaf (no children) --}}
     <li class='item'>
       <button type='button' {{on 'click' (fn @onAddCategory @item)}}>
         +
diff --git a/app/components/response-container.js b/app/components/response-container.js
index a764f965a..e12ffed9b 100644
--- a/app/components/response-container.js
+++ b/app/components/response-container.js
@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { action, computed } from '@ember/object';
 import { alias, equal, gt } from '@ember/object/computed';
 import { set } from '@ember/object';
+import isEqual from 'lodash-es/isEqual';
 export default class ResponseContainer extends Component {
   @service('current-user') currentUser;
   @service('workspace-permissions') wsPermissions;
@@ -305,7 +306,7 @@ export default class ResponseContainer extends Component {
     }
 
     return peekedResponseThreads.find((thread) => {
-      return thread.threadType === threadType && _.isEqual(thread.id, threadId);
+      return thread.threadType === threadType && isEqual(thread.id, threadId);
     });
   }
 
diff --git a/app/components/section-new.hbs b/app/components/section-new.hbs
index 8ddb9571a..3080b05d5 100644
--- a/app/components/section-new.hbs
+++ b/app/components/section-new.hbs
@@ -60,7 +60,7 @@
               @placeholder="Teacher's username"
               @dataList={{@addableTeachers}}
               @optionLabelPath='username'
-              @selectedValue={{this.teacher}}
+              @onSelect={{this.setTeacher}}
               @minLength={{2}}
               @setSelectedValueOnChange={{true}}
             />
diff --git a/app/components/section-new.js b/app/components/section-new.js
index eba21171b..765351179 100644
--- a/app/components/section-new.js
+++ b/app/components/section-new.js
@@ -11,7 +11,6 @@ export default class SectionNewComponent extends ErrorHandlingComponent {
   @service router;
   @service('sweet-alert') alert;
   @tracked createRecordErrors = [];
-  @tracked teacher = null;
   @tracked leader = null;
   @tracked teachers = [];
   @tracked selectedOrganization = null;
@@ -54,42 +53,6 @@ export default class SectionNewComponent extends ErrorHandlingComponent {
     }
   }
 
-  // get invalidTeacherUsername() {
-  //   return !this.teacher;
-  // }
-
-  // setTeacher: observer('teacher', function () {
-  //   let teacher = this.teacher;
-  //   if (!teacher) {
-  //     if (this.organization) {
-  //       this.set('organization', null);
-  //     }
-  //     return;
-  //   }
-
-  //   if (typeof teacher === 'string') {
-  //     let users = this.users;
-  //     let user = users.findBy('username', teacher);
-  //     if (!user) {
-  //       this.set('invalidTeacherUsername', true);
-  //       this.set('organization', null);
-  //       return;
-  //     }
-  //     teacher = user;
-  //   }
-
-  //   let organization = teacher.get('organization');
-
-  //   if (organization) {
-  //     this.set('organization', organization);
-  //   } else {
-  //     this.set('organization', this.get('currentUser.organization'));
-  //   }
-  //   if (this.invalidTeacherUsername) {
-  //     this.set('invalidTeacherUsername', null);
-  //   }
-  // }),
-
   get validTeacher() {
     return this.teacher && !this.invalidTeacherUsername;
   }
@@ -177,4 +140,9 @@ export default class SectionNewComponent extends ErrorHandlingComponent {
   @action cancel() {
     this.router.transitionTo('sections');
   }
+
+  @action
+  setTeacher(selectedTeacher) {
+    this.teacher = selectedTeacher;
+  }
 }
diff --git a/app/components/sign-up.hbs b/app/components/sign-up.hbs
index 3504235eb..24f03eb85 100644
--- a/app/components/sign-up.hbs
+++ b/app/components/sign-up.hbs
@@ -182,7 +182,7 @@
     <SocialSignin />
     <p class='login-link'>
       Already have an account?
-      <LinkTo @route='auth.login' @classNames='login-link'>Log in here
+      <LinkTo @route='auth.login' class='login-link'>Log in here
       </LinkTo>
     </p>
   </div>
diff --git a/app/components/sign-up.js b/app/components/sign-up.js
index b1d905994..93c050726 100644
--- a/app/components/sign-up.js
+++ b/app/components/sign-up.js
@@ -1,9 +1,11 @@
 import UserSignupComponent from './user-signup';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
-import _ from 'underscore';
+import { service } from '@ember/service';
 import $ from 'jquery';
+import isNull from 'lodash-es/isNull';
+import filter from 'lodash-es/filter';
+import map from 'lodash-es/map';
 
 export default class SignUpComponent extends UserSignupComponent {
   @tracked missingCredentials = false;
@@ -64,7 +66,7 @@ export default class SignUpComponent extends UserSignupComponent {
       stopWords
     );
 
-    let similarOrgs = _.filter(sliced, (org) => {
+    let similarOrgs = filter(sliced, (org) => {
       let name = org.get('name');
       let compare = this.similarity.convertStringForCompare(name, stopWords);
       let score = this.similarity.compareTwoStrings(compare, requestCompare);
@@ -80,7 +82,7 @@ export default class SignUpComponent extends UserSignupComponent {
     }
 
     let toArray = orgs.toArray();
-    let mapped = _.map(toArray, (org) => {
+    let mapped = map(toArray, (org) => {
       return {
         id: org.id,
         name: org.get('name'),
@@ -100,7 +102,7 @@ export default class SignUpComponent extends UserSignupComponent {
       return org.get('name').toLowerCase();
     });
     // don't let user create org request if it matches exactly an existing org name
-    return !_.contains(orgNamesLower, requestLower);
+    return !orgNamesLower.includes(requestLower);
   }
   @action signup() {
     var firstName = this.firstName;
@@ -243,7 +245,7 @@ export default class SignUpComponent extends UserSignupComponent {
       return;
     }
 
-    let isRemoval = _.isNull($item);
+    let isRemoval = isNull($item);
     if (isRemoval) {
       this.org = null;
       return;
diff --git a/app/components/student-matching-answer.js b/app/components/student-matching-answer.js
index b5e0a73c7..4a4a4d5e3 100644
--- a/app/components/student-matching-answer.js
+++ b/app/components/student-matching-answer.js
@@ -1,6 +1,8 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
+import each from 'lodash-es/each';
+import isNull from 'lodash-es/isNull';
 
 export default Component.extend({
   classNames: ['student-matching-answer'],
@@ -59,7 +61,7 @@ export default Component.extend({
       let options = [];
       let selectedIds = this.selectedIds || [];
 
-      _.each(this.studentMap, (val, key) => {
+      each(this.studentMap, (val, key) => {
         if (!selectedIds.includes(val)) {
           options.addObject({
             id: val.get('id'),
@@ -67,7 +69,7 @@ export default Component.extend({
           });
         }
       });
-      _.each(this.addedStudentNames, (name) => {
+      each(this.addedStudentNames, (name) => {
         options.addObject({
           id: name,
           username: name,
@@ -122,7 +124,7 @@ export default Component.extend({
         return;
       }
       let doRemove;
-      if (_.isNull($item)) {
+      if (isNull($item)) {
         this.selectedIds.removeObject(val);
         doRemove = true;
       } else {
diff --git a/app/components/summary-list.hbs b/app/components/summary-list.hbs
index 188caa568..9d0d69099 100644
--- a/app/components/summary-list.hbs
+++ b/app/components/summary-list.hbs
@@ -37,7 +37,7 @@
         <LinkTo
           @route='workspace.submissions.submission'
           @model={{submission.id}}
-        >{{dates
+        >{{format-date
             submission.newestSubmission.createDate
             'MM-D-YYYY @h:mm A'
           }}</LinkTo>
@@ -64,7 +64,7 @@
             @model={{submission.newestSubmission.id}}
             class='response-link'
           >
-            {{dates
+            {{format-date
               submission.newestResponse.createDate
               'MM-DD-YYYY @h:mm A'
             }}</LinkTo>
diff --git a/app/components/ui/quill-container.hbs b/app/components/ui/quill-container.hbs
new file mode 100644
index 000000000..bada4777a
--- /dev/null
+++ b/app/components/ui/quill-container.hbs
@@ -0,0 +1,8 @@
+{{!-- app/components/quill-container.hbs --}}
+<div class='quill-container'>
+  <section
+    {{did-insert this.setupQuill}}
+    {{will-destroy this.teardownQuill}}
+    id={{this.sectionId}}
+  ></section>
+</div>
\ No newline at end of file
diff --git a/app/components/ui/quill-container.js b/app/components/ui/quill-container.js
new file mode 100644
index 000000000..c75dc0ac1
--- /dev/null
+++ b/app/components/ui/quill-container.js
@@ -0,0 +1,95 @@
+// app/components/quill-container.js
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+import Quill from 'quill';
+
+export default class QuillContainerComponent extends Component {
+  @service('utility-methods') utils;
+
+  @tracked quillInstance = null;
+  @tracked isEmpty = true;
+  @tracked isOverLengthLimit = false;
+
+  defaultOptions = {
+    debug: 'false',
+    modules: {
+      toolbar: [
+        ['bold', 'italic', 'underline', 'strike'],
+        [{ color: [] }, { background: [] }],
+        [{ script: 'sub' }, { script: 'super' }],
+        ['blockquote'],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        ['link', 'image', 'formula'],
+      ],
+    },
+    theme: 'snow',
+    placeholder:
+      'Type a detailed explanation here. This box will expand as you type.',
+  };
+
+  defaultMaxLength = 14680064; // 14MB
+
+  get sectionId() {
+    return this.args.attrSectionId || 'editor';
+  }
+
+  get lengthLimit() {
+    return this.args.maxLength || this.defaultMaxLength;
+  }
+
+  @action
+  setupQuill(element) {
+    const options = this.args.options || this.defaultOptions;
+    options.bounds = element;
+
+    const quill = new Quill(element, options);
+    this.quillInstance = quill;
+
+    quill.on('text-change', this.handleQuillChange.bind(this));
+
+    this.handleStartingText();
+    this.handleQuillChange();
+  }
+
+  @action
+  teardownQuill() {
+    if (this.quillInstance) {
+      this.quillInstance.off('text-change');
+      this.quillInstance = null;
+    }
+  }
+
+  handleStartingText() {
+    if (this.quillInstance && typeof this.args.startingText === 'string') {
+      this.quillInstance.root.innerHTML = this.args.startingText;
+    }
+  }
+
+  handleQuillChange() {
+    if (!this.quillInstance) return;
+
+    const htmlContents = this.quillInstance.root.innerHTML;
+    const replaced = htmlContents.replace(/"/g, "'");
+
+    const isEmpty = this.isQuillNonEmpty();
+    const isOverLengthLimit = replaced.length > this.lengthLimit;
+
+    this.isEmpty = !isEmpty;
+    this.isOverLengthLimit = isOverLengthLimit;
+
+    if (this.args.onEditorChange) {
+      this.args.onEditorChange(replaced, !isEmpty, isOverLengthLimit);
+    }
+  }
+
+  isQuillNonEmpty() {
+    if (!this.quillInstance) return false;
+    const text = this.quillInstance.getText().trim();
+    if (text.length > 0) return true;
+    const content = this.quillInstance.root.innerHTML;
+    return content.includes('<img');
+  }
+}
diff --git a/app/components/ui/twitter-typeahead.hbs b/app/components/ui/twitter-typeahead.hbs
index 0e45b6e2b..bba4d3ed8 100644
--- a/app/components/ui/twitter-typeahead.hbs
+++ b/app/components/ui/twitter-typeahead.hbs
@@ -1,2 +1,28 @@
+<div class='typeahead-container' {{on 'focusout' this.handleBlur}}>
+  <div class='twitter-typeahead'>
+    <input
+      type='text'
+      class='typeahead-input'
+      placeholder={{this.placeholder}}
+      value={{this.query}}
+      {{on 'input' this.updateQuery}}
+      {{on 'keydown' this.handleKeydown}}
+    />
 
-  <input class="typeahead" type="text" placeholder={{this.placeholder}}>
\ No newline at end of file
+    {{#if this.hasResults}}
+      <ul class='typeahead-dropdown'>
+        {{#each this.filteredList as |entry index|}}
+          <li
+            class={{if
+              (is-equal index this.highlightedIndex)
+              'highlighted-item'
+            }}
+            {{on 'click' (fn this.selectItem entry)}}
+          >
+            {{entry.label}}
+          </li>
+        {{/each}}
+      </ul>
+    {{/if}}
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/ui/twitter-typeahead.js b/app/components/ui/twitter-typeahead.js
index 533680d4f..198c504e9 100644
--- a/app/components/ui/twitter-typeahead.js
+++ b/app/components/ui/twitter-typeahead.js
@@ -1,221 +1,101 @@
-import Ember from 'ember';
-import 'typeahead.js';
-
-export default Ember.Component.extend({
-  classNames: ['twitter-typeahead'],
-
-  init() {
-    this._super(...arguments);
-  },
-
-  didReceiveAttrs() {
-    this._super(...arguments);
-    let templates = {
-      ...(this.showNotFound && { notFound: this.showNotFound }),
-      ...(this.header && { header: this.header }),
-      ...(this.footer && { footer: this.footer }),
-      ...(this.pending && { pending: this.pending }),
-    };
-
-    this.set('templates', templates);
-  },
-
-  didInsertElement() {
-    this._super(...arguments);
-
-    let options = this.getOptions();
-    let dataSetOptions = this.getDataSetOptions();
-
-    let path = this.optionLabelPath;
-    let selectedValue = this.selectedValue;
-
-    const that = this;
-
-    $('.typeahead').typeahead(options, dataSetOptions);
-
-    let startingValue;
-
-    if (selectedValue === undefined || selectedValue === null) {
-      startingValue = '';
-    } else if (typeof selectedValue === 'string') {
-      startingValue = selectedValue;
-    } else if (typeof selectedValue === 'object') {
-      let val = selectedValue.get(path);
-      if (val) {
-        startingValue = val;
-      } else {
-        startingValue = '';
-      }
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import debounce from 'lodash-es/debounce';
+
+export default class UiTypeaheadComponent extends Component {
+  @tracked query = '';
+  @tracked isOpen = false;
+  @tracked highlightedIndex = -1;
+
+  debouncedCloseDropdown = debounce(() => {
+    this.isOpen = false;
+  }, 200);
+
+  get placeholder() {
+    return this.args.placeholder || '';
+  }
+
+  get minLength() {
+    return this.args.minLength ?? 1;
+  }
+
+  get filteredList() {
+    const dataList = this.args.dataList || [];
+    const query = this.query.trim().toLowerCase();
+
+    if (query.length < this.minLength) {
+      return [];
     }
 
-    $('.typeahead').typeahead('val', startingValue);
-
-    $('.typeahead').on('typeahead:select', function (ev, suggestion) {
-      that.set('selectedValue', suggestion);
-      if (typeof that.onSelect === 'function') {
-        that[that.onSelect](suggestion);
-      }
-      if (that.get('allowMultiple')) {
-        that.$('.typeahead').typeahead('val', '');
-      }
-    });
-
-    if (this.setSelectedValueOnChange) {
-      $('.typeahead').on('typeahead:change', function (ev, val) {
-        if (that.get('isDestroyed') || that.get('isDestroying')) {
-          return;
-        }
-        let selectedValue = that.get('selectedValue');
-        let inputValue = that.$('.typeahead').typeahead('val');
-
-        if (selectedValue && typeof selectedValue === 'object') {
-          // check if text value in typeahead component is same as the object's path value
-          let str = selectedValue.get(path);
-          if (inputValue === str) {
-            return;
-          }
-        } else if (typeof selectedValue === 'string') {
-          if (selectedValue === inputValue) {
-            return;
-          }
-        }
-
-        that.set('selectedValue', inputValue);
-        if (typeof that.onSelect === 'function') {
-          that[that.onSelect](inputValue);
-        }
-        if (that.get('allowMultiple')) {
-          that.$('.typeahead').typeahead('val', '');
-        }
-      });
-    }
-  },
-
-  willDestroyElement: function () {
-    this._super(...arguments);
-    $('.typeahead').typeahead('destroy');
-  },
-
-  getOptions: function () {
-    let minLength = this.minLength;
-    let limit = this.limit;
-    let async = this.isAsync;
-    let hint = false;
-    let highlight = true;
+    return dataList
+      .map((item) => ({
+        item,
+        label: this.getItemLabel(item),
+      }))
+      .filter(({ label }) => label?.toLowerCase().includes(query));
+  }
+
+  get hasResults() {
+    return this.isOpen && this.filteredList.length > 0;
+  }
+
+  getItemLabel(item) {
+    const path = this.args.optionLabelPath || 'id';
+    return typeof item.get === 'function' ? item.get(path) : item[path];
+  }
+
+  @action
+  updateQuery(event) {
+    const value = event.target.value;
+    this.query = value;
+    this.highlightedIndex = -1;
+    this.isOpen = true;
 
     if (
-      minLength === undefined ||
-      minLength === null ||
-      typeof minLength !== 'number'
+      this.args.setSelectedValueOnChange &&
+      typeof this.args.onSelect === 'function'
     ) {
-      minLength = 1;
+      this.args.onSelect(value);
     }
+  }
 
-    if (limit === undefined || limit === null || typeof limit !== 'number') {
-      limit = 5;
+  @action
+  selectItem(entry) {
+    const item = entry.item;
+    if (this.args.onSelect) {
+      this.args.onSelect(item);
     }
 
-    let ret = {
-      minLength,
-      limit,
-      async,
-      hint,
-      highlight,
-    };
-
-    // name will default to random number if not provided
-    return ret;
-  },
-
-  getDataSetOptions: function () {
-    let name = this.listName;
-    let dataList = this.dataList;
-    let sourceFunction = this.sourceFunction;
-    let path = this.optionLabelPath;
-    let display = this.display;
-    let templates = this.templates;
-    let isAsync = this.isAsync;
-    let debounceTime = this.debounceTime;
-
-    if (!debounceTime) {
-      debounceTime = 100;
-    }
-
-    let source;
-
-    if (!sourceFunction || typeof sourceFunction !== 'function') {
-      source = this.substringMatcher.call(this, dataList);
-    } else if (!isAsync) {
-      source = sourceFunction.call(this, dataList);
+    if (this.args.allowMultiple) {
+      this.query = '';
+      this.isOpen = false;
     } else {
-      source = window._.debounce(sourceFunction, debounceTime);
+      this.query = entry.label || '';
+      this.isOpen = false;
     }
-
-    if (!path || typeof path !== 'string') {
-      path = 'id';
+  }
+
+  @action
+  handleBlur() {
+    this.debouncedCloseDropdown();
+  }
+
+  @action
+  handleKeydown(event) {
+    if (!this.hasResults) return;
+
+    const maxIndex = this.filteredList.length - 1;
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      this.highlightedIndex = Math.min(this.highlightedIndex + 1, maxIndex);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+    } else if (event.key === 'Enter' && this.highlightedIndex >= 0) {
+      event.preventDefault();
+      this.selectItem(this.filteredList[this.highlightedIndex]);
     }
-    if (!display) {
-      display = function (suggestion) {
-        return suggestion.get(path);
-      };
-    }
-    let ret = {
-      source,
-      display,
-      templates,
-    };
-    if (name) {
-      ret.name = name;
-    }
-    return ret;
-  },
-
-  substringMatcher: function (data) {
-    // data should be array of ember objects
-    let path = this.optionLabelPath;
-    if (!path) {
-      path = 'id';
-    }
-
-    if (!data) {
-      data = [];
-    }
-
-    let suggestions;
-    suggestions = data;
-    const that = this;
-
-    return function findMatches(q, cb, async) {
-      var matches, substrRegex, filtered, pool;
-      if (that.get('allowMultiple')) {
-        // filter out already selected items
-        let selectedItems = that.get('selectedItems');
-        if (!selectedItems) {
-          selectedItems = [];
-        }
-        filtered = suggestions.filter((item) => {
-          let alreadySelected = selectedItems.includes(item);
-          return !alreadySelected;
-        });
-      }
-
-      if (filtered) {
-        pool = filtered;
-      } else {
-        pool = suggestions;
-      }
-      // an array that will be populated with substring matches
-      matches = [];
-      // regex used to determine if a string contains the substring `q`
-      substrRegex = new RegExp(q, 'i');
-      // iterate through the pool of strings and for any string that
-      // contains the substring `q`, add it to the `matches` array
-      matches = pool.filter((obj) => {
-        let str = obj.get(path);
-        return substrRegex.test(str);
-      });
-
-      cb(matches);
-    };
-  },
-});
+  }
+}
diff --git a/app/components/user-info.hbs b/app/components/user-info.hbs
index 52333ef94..5a60d3c37 100644
--- a/app/components/user-info.hbs
+++ b/app/components/user-info.hbs
@@ -117,10 +117,10 @@
         {{#if this.isEditing}}
           {{#if @currentUser.isAdmin}}
             <td>
+              {{@user.organization.name}}
               <Ui::TwitterTypeahead
                 @dataList={{@orgList}}
-                @selectedValue={{@user.organization}}
-                @onSelect='setOrg'
+                @onSelect={{this.setOrg}}
                 @minLength={{0}}
                 @optionLabelPath='name'
                 @setSelectedValueOnChange={{true}}
diff --git a/app/components/user-info.js b/app/components/user-info.js
index 14fc8c77f..ade0af431 100644
--- a/app/components/user-info.js
+++ b/app/components/user-info.js
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import moment from 'moment';
+import { formatDistanceToNow, isValid } from 'date-fns';
 
 export default class UserInfoComponent extends Component {
   @service('sweet-alert') alert;
@@ -79,9 +79,9 @@ export default class UserInfoComponent extends Component {
   }
 
   get tourDate() {
-    var date = this.args.user.seenTour;
-    if (date) {
-      return moment(date).fromNow();
+    const date = this.args.user.seenTour;
+    if (date instanceof Date && isValid(date)) {
+      return formatDistanceToNow(date, { addSuffix: true });
     }
     return 'No';
   }
@@ -115,7 +115,7 @@ export default class UserInfoComponent extends Component {
 
   @action checkOrgExists() {
     let user = this.user;
-    let userOrg = user.organization?.content;
+    let userOrg = user.organization;
     let userOrgRequest = user.organizationRequest;
     let org = this.org;
     let orgReq = this.orgReq;
@@ -151,21 +151,21 @@ export default class UserInfoComponent extends Component {
       user.set(key, this.user[key]);
     });
 
-    const org = this.org;
-    const orgReq = this.orgReq;
-
     let orgs = this.args.orgList;
-    let matchingOrg = orgs.findBy('name', orgReq);
+    let matchingOrg = orgs.findBy('name', this.orgReq);
     if (matchingOrg) {
       this.org = matchingOrg;
       this.orgReq = null;
+      user.organizationRequest = null;
     }
 
-    if (org) {
-      user.org = org;
+    if (this.org) {
+      user.organization = this.org;
+      this.orgReq = null;
+      user.organizationRequest = null;
     }
-    if (orgReq) {
-      user.organizationRequest = orgReq;
+    if (this.orgReq) {
+      user.organizationRequest = this.orgReq;
     }
 
     //if is authorized is now true, then we need to set the value of authorized by to current user
@@ -200,6 +200,7 @@ export default class UserInfoComponent extends Component {
       this.orgReq = org;
     } else {
       this.org = org;
+      this.orgReq = null;
     }
   }
 
@@ -220,7 +221,7 @@ export default class UserInfoComponent extends Component {
       )
       .then((result) => {
         if (result.value) {
-          this.send('createNewOrg');
+          this.createNewOrg();
         }
       });
   }
diff --git a/app/components/user-list.hbs b/app/components/user-list.hbs
index a8d4ba270..bfdebb1bb 100644
--- a/app/components/user-list.hbs
+++ b/app/components/user-list.hbs
@@ -1,7 +1,7 @@
 <section class='list-side'>
   <header class='list-header'>
     <h1>Users</h1>
-    <LinkTo @route='users.new' @id='new-user-link' class='new-link-btn'><span
+    <LinkTo @route='users.new' id='new-user-link' class='new-link-btn'><span
         class='create-text'
       >Create New User</span><i class='fas fa-plus'></i></LinkTo>
   </header>
diff --git a/app/components/user-list.js b/app/components/user-list.js
index f58f2b3f6..455203908 100644
--- a/app/components/user-list.js
+++ b/app/components/user-list.js
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class UserListComponent extends Component {
   @tracked showDeletedUsers = false;
diff --git a/app/components/user-new.hbs b/app/components/user-new.hbs
index cbdb63512..bfc3170ec 100644
--- a/app/components/user-new.hbs
+++ b/app/components/user-new.hbs
@@ -12,8 +12,8 @@
           @type='text'
           class='user-username'
           @value={{this.username}}
-          {{on 'focusout' (action 'usernameValidate')}}
-          {{on 'focusin' (action 'resetErrors')}}
+          {{on 'focusout' this.usernameValidate}}
+          {{on 'focusin' this.resetErrors}}
         />
       </td>
     </tr>
@@ -24,8 +24,8 @@
           @type='password'
           class='user-password'
           @value={{this.password}}
-          {{on 'focusout' (action 'passwordValidate')}}
-          {{on 'focusin' (action 'resetErrors')}}
+          {{on 'focusout' (fn this.passwordValidate this.password)}}
+          {{on 'focusin' this.resetErrors}}
         />
       </td>
     </tr>
@@ -41,7 +41,7 @@
         <Input @type='text' @value={{this.lastName}} class='user-last-name' />
       </td>
     </tr>
-    {{#unless @currentUser.isTeacher}}
+    {{#unless this.currentUser.isTeacher}}
       <tr>
         <td>Email
           {{#if this.isEmailRequired}}
@@ -52,25 +52,22 @@
           <Input
             @type='text'
             class='user-email'
-            @value={{this.email}}
-            {{on 'focusout' (action 'emailValidate')}}
-            {{on 'focusin' (action 'resetErrors')}}
+            {{on 'focusout' this.emailValidate}}
+            {{on 'focusin' this.resetErrors}}
           />
         </td>
       </tr>
       <tr>
         <td>Organization <span class='required-star'>*</span></td>
         <td>
-          {{#if @currentUser.isAdmin}}
+          {{#if this.currentUser.isAdmin}}
             <Ui::TwitterTypeahead
               @dataList={{@organizations}}
-              @minLength={{0}}
-              @onSelect='setOrg'
+              @onSelect={{this.setOrg}}
               @optionLabelPath='name'
-              @setSelectedValueOnChange={{true}}
             />
           {{else}}
-            {{@currentUser.organization.name}}
+            {{this.currentUser.user.organization?.name}}
           {{/if}}
         </td>
       </tr>
@@ -87,7 +84,7 @@
             @selectedValue={{this.selectedType}}
             @prompt='Select Account Type'
             @content={{this.accountTypes}}
-            @action={{action (mut this.selectedType)}}
+            @action={{this.setAccountType}}
             @cannotBeNull={{true}}
           />
         </td>
@@ -109,7 +106,7 @@
     <Ui::ErrorBox
       @error={{this.usernameError}}
       @showDismiss={{true}}
-      @resetError={{action (mut this.usernameError) null}}
+      @resetError={{fn this.resetError 'usernameError'}}
     />
   {{/if}}
 
@@ -117,7 +114,7 @@
     <Ui::ErrorBox
       @error={{this.emailError}}
       @showDismiss={{true}}
-      @resetError={{action (mut this.emailError) null}}
+      @resetError={{fn this.resetError 'emailError'}}
     />
   {{/if}}
 
@@ -125,7 +122,7 @@
     <Ui::ErrorBox
       @error={{this.passwordError}}
       @showDismiss={{true}}
-      @resetError={{action (mut this.passwordError) null}}
+      @resetError={{fn this.resetError 'passwordError'}}
     />
   {{/if}}
 
@@ -133,7 +130,7 @@
     <Ui::ErrorBox
       @error='Passwords cannot contain spaces'
       @showDismiss={{true}}
-      @resetError={{action (mut this.noSpacesError) null}}
+      @resetError={{fn this.resetError 'noSpacesError'}}
     />
   {{/if}}
 
@@ -141,7 +138,7 @@
     <Ui::ErrorBox
       @error='Missing account type'
       @showDismiss={{true}}
-      @resetError={{action (mut this.missingAccountType) null}}
+      @resetError={{fn this.resetError 'missingAccountType'}}
     />
   {{/if}}
 
@@ -149,7 +146,7 @@
     <Ui::ErrorBox
       @error='Missing required fields'
       @showDismiss={{true}}
-      @resetError={{action (mut this.errorMessage) null}}
+      @resetError={{fn this.resetError 'errorMessage'}}
     />
   {{/if}}
 
@@ -157,14 +154,14 @@
     <Ui::ErrorBox
       @error={{error}}
       @showDismiss={{true}}
-      @resetError={{action 'removeErrorFromArray' 'createOrgErrors' error}}
+      @resetError={{fn this.removeErrorFromArray 'createOrgErrors' error}}
     />
   {{/each}}
   {{#each this.createUserErrors as |error|}}
     <Ui::ErrorBox
       @error={{error}}
       @showDismiss={{true}}
-      @resetError={{action 'removeErrorFromArray' 'createUserErrors' error}}
+      @resetError={{fn this.removeErrorFromArray 'createUserErrors' error}}
     />
   {{/each}}
 
@@ -173,12 +170,12 @@
       class='action_button new-user'
       id='new-user-btn'
       type='button'
-      {{action 'confirmOrg'}}
+      {{on 'click' this.confirmOrg}}
     >Create New User</button>
     <button
       class='action_button new-user cancel-button'
       type='button'
-      {{action 'cancelNew'}}
+      {{on 'click' this.cancelNew}}
     >Cancel</button>
   </div>
 
diff --git a/app/components/user-new.js b/app/components/user-new.js
index c10240579..2e0fae01f 100644
--- a/app/components/user-new.js
+++ b/app/components/user-new.js
@@ -1,14 +1,14 @@
-import { later } from '@ember/runloop';
-import { inject as service } from '@ember/service';
+import UserSignupComponent from './user-signup';
+import { service } from '@ember/service';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import UserSignupComponent from './user-signup';
-import $ from 'jquery';
 
 export default class UserNewComponent extends UserSignupComponent {
   @service router;
   @service store;
   @service('sweet-alert') alert;
+  @service currentUser;
+  @service errorHandling;
   @tracked errorMessage = null;
   @tracked username = '';
   @tracked password = '';
@@ -17,35 +17,51 @@ export default class UserNewComponent extends UserSignupComponent {
   @tracked email = '';
   @tracked org = null;
   @tracked location = '';
-  get accountTypes() {
-    return this.args.currentUser.isAdmin
-      ? ['Teacher', 'Student', 'Pd Admin', 'Admin']
-      : ['Teacher', 'Student'];
-  }
   @tracked isAuthorized = null;
   @tracked authorizedBy = '';
   newUserData = {};
   @tracked actingRole = null;
   orgReq = null;
-  @tracked createOrgErrors = [];
-  @tracked createUserErrors = [];
   @tracked missingAccountType = false;
-  createNewUser(data) {
-    return new Promise((resolve, reject) => {
-      if (!data) {
-        return reject('Invalid data');
+
+  get accountTypes() {
+    return this.currentUser.isAdmin
+      ? ['Teacher', 'Student', 'Pd Admin', 'Admin']
+      : ['Teacher', 'Student'];
+  }
+  
+
+  get createOrgErrors() {
+    return this.errorHandling.getErrors('createOrgErrors')
+  }
+
+  get createUserErrors() {
+    return this.errorHandling.getErrors('createUserErrors')
+  }
+
+  async createNewUser(data) {
+    if (!data) {
+      throw new Error('Invalid data');
+    }
+
+    try {
+      let response = await fetch('/auth/signup', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        let error = await response.text(); // or `await response.json()` if JSON
+        throw new Error(error);
       }
-      $.post({
-        url: '/auth/signup',
-        data: data,
-      })
-        .then((res) => {
-          return resolve(res);
-        })
-        .catch((err) => {
-          reject(err);
-        });
-    });
+
+      return await response.json(); // adjust based on actual response type
+    } catch (err) {
+      throw err;
+    }
   }
 
   handleOrg(org) {
@@ -71,20 +87,20 @@ export default class UserNewComponent extends UserSignupComponent {
       if (orgReq) {
         let rec = that.store.createRecord('organization', {
           name: orgReq,
-          createdBy: that.get('currentUser'),
+          createdBy: that.currentUser.user,
         });
 
         rec
           .save()
-          .then((res) => {
-            return resolve(res.get('organizationId'));
+          .then((newOrg) => {
+            return resolve(newOrg.id);
           })
           .catch((err) => {
-            this.handleErrors(err, 'createOrgErrors', rec);
+            this.errorHandling.handleErrors(err, 'createOrgErrors', rec);
             return reject(err);
           });
       } else {
-        return resolve(org.get('organizationId'));
+        return resolve(org.id);
       }
     });
   }
@@ -128,7 +144,7 @@ export default class UserNewComponent extends UserSignupComponent {
     var lastName = this.lastName;
     var email = this.email;
     var organization =
-      this.org || (await this.args.currentUser.get('organization'));
+      this.org || (await this.currentUser.user.organization);
     var location = this.location;
     var accountType = this.selectedType || 'student';
     var accountTypeLetter;
@@ -136,15 +152,13 @@ export default class UserNewComponent extends UserSignupComponent {
       accountTypeLetter = accountType.charAt(0).toUpperCase();
     } else {
       this.missingAccountType = true;
-      $('.account').show();
       return;
     }
     var isAuthorized = this.isAuthorized;
-    var currentUserId = this.args.currentUser.get('id');
+    var currentUserId = this.currentUser.id;
 
     if (!username || !password) {
       this.errorMessage = true;
-      $('.required').show();
       return;
     }
 
@@ -175,12 +189,12 @@ export default class UserNewComponent extends UserSignupComponent {
       this.newUserData = userData;
     } else {
       let userData = {
-        username: username,
-        password: password,
+        username,
+        password,
         firstName,
         lastName,
-        email: email,
-        location: location,
+        email,
+        location,
         accountType: accountTypeLetter,
         isAuthorized: false,
         createdBy: currentUserId,
@@ -219,11 +233,11 @@ export default class UserNewComponent extends UserSignupComponent {
             ) {
               this.emailError = this.emailErrors.taken;
             } else {
-              this.createUserErrors = [res.message];
+              this.errorHandling.handleErrors(res.message, 'createUserErrors');
             }
           })
           .catch((err) => {
-            this.handleErrors(err, 'createUserErrors', newUserData);
+            this.errorHandling.handleErrors(err, 'createUserErrors', newUserData);
           });
       })
       .catch(() => {
@@ -243,11 +257,19 @@ export default class UserNewComponent extends UserSignupComponent {
     //  }
   }
 
-  @action closeError(error) {
-    $(`.${error}`).addClass('fadeOutRight');
-    later(() => {
-      $(`.${error}`).removeClass('fadeOutRight');
-      $(`.${error}`).hide();
-    }, 500);
+  @action
+  setAccountType (type) {
+    this.selectedType = type;
   }
+
+  @action
+  resetError(errorType) {
+    this.errorHandling.removeMessages(errorType)
+  }
+
+  @action
+  removeErrorFromArray(type, error) {
+    this.errorHandling.removeErrorFromArray(type, error);
+  }
+
 }
diff --git a/app/components/user-signup.js b/app/components/user-signup.js
index cae104eb6..15c0171a2 100644
--- a/app/components/user-signup.js
+++ b/app/components/user-signup.js
@@ -1,9 +1,9 @@
-import ErrorHandlingComponent from './error-handling';
+import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-export default class UserSignupComponent extends ErrorHandlingComponent {
-  emailRegEx = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+export default class UserSignupComponent extends Component {
+  emailRegEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   usernameRegEx = /^[a-z0-9_]{3,30}$/;
   passwordMinLength = 10;
   passwordMaxLength = 72;
@@ -62,11 +62,8 @@ export default class UserSignupComponent extends ErrorHandlingComponent {
   }
 
   validateEmail(email) {
-    if (!email) {
-      return false;
-    }
-    var emailPattern = new RegExp(this.emailRegEx);
-    return emailPattern.test(email);
+    if (!email) return false;
+    return this.emailRegEx.test(email.trim());
   }
 
   validatePassword(password) {
@@ -123,7 +120,8 @@ export default class UserSignupComponent extends ErrorHandlingComponent {
       this.password = password;
     }
   }
-  @action emailValidate(email) {
+  @action emailValidate(event) {
+    const email = event.target.value;
     let isValid = this.validateEmail(email);
     if (isValid) {
       this.emailError = null;
@@ -132,6 +130,7 @@ export default class UserSignupComponent extends ErrorHandlingComponent {
       this.emailError = this.emailErrors.invalid;
     }
   }
+
   @action resetErrors() {
     const errors = [
       'missingCredentials',
diff --git a/app/components/workspace-info-collaborators-new.js b/app/components/workspace-info-collaborators-new.js
index 8620a6240..a43c7bc78 100644
--- a/app/components/workspace-info-collaborators-new.js
+++ b/app/components/workspace-info-collaborators-new.js
@@ -1,8 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import _ from 'underscore';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class WorkspaceInfoCollaboratorsNewComponent extends Component {
   @service('utility-methods') utils;
@@ -96,7 +95,7 @@ export default class WorkspaceInfoCollaboratorsNewComponent extends Component {
     }
     let existingCollab = this.args.workspace.get('collaborators');
     const user = this.store.peekRecord('user', val);
-    let alreadyCollab = _.contains(existingCollab, user.get('id'));
+    let alreadyCollab = existingCollab.includes(user.get('id'));
 
     if (alreadyCollab) {
       this.existingUserError = true;
diff --git a/app/components/workspace-info-settings.js b/app/components/workspace-info-settings.js
index 42ebf8896..5a634833c 100644
--- a/app/components/workspace-info-settings.js
+++ b/app/components/workspace-info-settings.js
@@ -1,9 +1,9 @@
 import ErrorHandlingComponent from './error-handling';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import _ from 'underscore';
-import { inject as service } from '@ember/service';
-
+import { service } from '@ember/service';
+import each from 'lodash-es/each';
+import isNull from 'lodash-es/isNull';
 export default class WorkspaceInfoSettingsComponent extends ErrorHandlingComponent {
   @service('current-user') currentUser;
   @service('sweet-alert') alert;
@@ -147,7 +147,7 @@ export default class WorkspaceInfoSettingsComponent extends ErrorHandlingCompone
 
     let linkedAssignmentId = this.args.linkedAssignment.id;
 
-    if (_.isNull($item)) {
+    if (isNull($item)) {
       if (linkedAssignmentId) {
         this.selectedLinkedAssignment = null;
         this.didLinkedAssignmentChange = true;
@@ -264,7 +264,7 @@ export default class WorkspaceInfoSettingsComponent extends ErrorHandlingCompone
   }
 
   @action updateWithExistingWork() {
-    _.each(
+    each(
       [
         'wereNoAnswersToUpdate',
         'updateErrors',
diff --git a/app/components/ws-copy-custom-config.js b/app/components/ws-copy-custom-config.js
index 1805b91c4..96204a0cf 100644
--- a/app/components/ws-copy-custom-config.js
+++ b/app/components/ws-copy-custom-config.js
@@ -5,7 +5,6 @@ import { service } from '@ember/service';
 import without from 'lodash-es/without';
 import chain from 'lodash-es/chain';
 import isNull from 'lodash-es/isNull';
-import contains from 'lodash-es/contains';
 
 export default Component.extend({
   elementId: 'ws-copy-custom-config',
@@ -406,7 +405,7 @@ export default Component.extend({
         keys = ['all', 'includeStructureOnly', 'none'];
       }
 
-      if (!contains(keys, val)) {
+      if (!keys.includes(val)) {
         return;
       }
       const propToToggle = `${propName}.${val}`;
diff --git a/app/helpers/dates.js b/app/helpers/dates.js
deleted file mode 100644
index cec24138b..000000000
--- a/app/helpers/dates.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// app/helpers/dates.js
-
-import moment from 'moment';
-
-export default function (date, format) {
-  return moment(date).format(format);
-}
diff --git a/app/helpers/format-date.js b/app/helpers/format-date.js
index 307aa10cf..6658b0bfa 100644
--- a/app/helpers/format-date.js
+++ b/app/helpers/format-date.js
@@ -1,25 +1,41 @@
-import moment from 'moment';
+import { format, isValid } from 'date-fns';
+import { formatDistanceToNow } from 'date-fns';
 
-export default function (date, format, doUseRelativeTime) {
-  if (date === null || date === undefined) {
-    return 'N/A';
-  }
-  if (!(date instanceof Date)) {
-    return date;
-  }
-  let formattedDate;
+const FORMAT_ALIASES = {
+  'MMMM Do YYYY': 'MMMM do yyyy',
+  'MMM Do YYYY hh:mm A': 'MMM do yyyy hh:mm a',
+  'MMM Do YYYY': 'MMM do yyyy',
+  'MMMM Do, YYYY': 'MMMM do, yyyy',
+  'YYYY-MM-DD': 'yyyy-MM-dd',
+  'MM/DD/YY': 'MM/dd/yy',
+  'MM/DD/YYYY': 'MM/dd/yyyy',
+  'h:mm A': 'hh:mm a',
+  L: 'P',
+  'Do MMM YYYY': 'do MMM yyyy',
+  'l h:mm a': 'P h:mm a',
+  'MM-D-YYYY @h:mm A': 'MM-d-yyyy @h:mm a',
+  'MM-DD-YYYY @h:mm A': 'MM-dd-yyyy @h:mm a',
+  'MMM Do YYYY h:mm A': 'MMM do yyyy h:mm a',
+};
 
-  let momentObj = moment(date);
+export default function formatDate(
+  date,
+  fmt = 'PPP',
+  doUseRelativeTime = false
+) {
+  if (date === null || date === undefined) return 'N/A';
+  if (!(date instanceof Date)) return date;
+  if (!isValid(date)) return 'N/A';
 
-  if (!momentObj.isValid()) {
-    return 'N/A';
-  }
+  const resolvedFormat = FORMAT_ALIASES[fmt] || fmt;
 
   if (doUseRelativeTime) {
-    formattedDate = momentObj.fromNow();
-  } else {
-    formattedDate = momentObj.format(format);
+    return formatDistanceToNow(date, { addSuffix: true });
   }
 
-  return formattedDate;
+  try {
+    return format(date, resolvedFormat);
+  } catch {
+    return date.toLocaleString();
+  }
 }
diff --git a/app/helpers/not-equal.js b/app/helpers/not-equal.js
new file mode 100644
index 000000000..db62af5d2
--- /dev/null
+++ b/app/helpers/not-equal.js
@@ -0,0 +1,5 @@
+import isEqual from 'lodash-es/isEqual';
+
+export default function (leftSide, rightSide) {
+  return !isEqual(leftSide, rightSide);
+}
diff --git a/app/index.html b/app/index.html
index 3fb5672b2..f4485ae74 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Encompass</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     {{content-for "head"}}
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
@@ -28,7 +28,6 @@
 
   <body>
     {{content-for "body"}}
-    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/encompass.js"></script>
 
diff --git a/app/models/auditable.js b/app/models/auditable.js
index 2ce5e8cf2..a7eb6899a 100644
--- a/app/models/auditable.js
+++ b/app/models/auditable.js
@@ -6,4 +6,8 @@ export default class AuditableModel extends Model {
   @attr('boolean', { defaultValue: false }) isTrashed;
   @belongsTo('user', { inverse: null, async: true }) lastModifiedBy;
   @attr('date') lastModifiedDate;
+
+  isModelType(type) {
+    return this.constructor.modelName === type;
+  }
 }
diff --git a/app/models/folder.js b/app/models/folder.js
index 388a62ab2..c3be89312 100644
--- a/app/models/folder.js
+++ b/app/models/folder.js
@@ -13,7 +13,7 @@ export default class FolderModel extends AuditableModel {
   sortProperties = ['weight', 'name'];
 
   get cleanTaggings() {
-    return this.taggings.filter((tagging) => !tagging.isTrashed);
+    return this.taggings.filter((tagging) => !tagging.get('isTrashed'));
   }
 
   get taggedSelections() {
@@ -23,11 +23,13 @@ export default class FolderModel extends AuditableModel {
   }
 
   get cleanSelections() {
-    return this.taggedSelections.filter((selection) => !selection.isTrashed);
+    return this.taggedSelections.filter(
+      (selection) => !selection.get('isTrashed')
+    );
   }
 
   get cleanChildren() {
-    return this.children.filter((child) => !child.isTrashed);
+    return this.children.filter((child) => !child.get('isTrashed'));
   }
 
   get hasChildren() {
diff --git a/app/models/organization.js b/app/models/organization.js
index 0c80b271d..4deae63c4 100644
--- a/app/models/organization.js
+++ b/app/models/organization.js
@@ -1,9 +1,6 @@
 import { attr, hasMany } from '@ember-data/model';
 import Auditable from './auditable';
 export default class OrganizationModel extends Auditable {
-  get organizationId() {
-    return this.id;
-  }
   @attr('string') name;
   @hasMany('problem', { async: true, inverse: null }) recommendedProblems;
 }
diff --git a/app/models/workspace.js b/app/models/workspace.js
index ab967673e..e50e3a9e6 100644
--- a/app/models/workspace.js
+++ b/app/models/workspace.js
@@ -1,6 +1,6 @@
 import AuditableModel from './auditable';
 import { attr, belongsTo, hasMany } from '@ember-data/model';
-import moment from 'moment';
+import { format, isValid } from 'date-fns';
 
 export default class WorkspaceModel extends AuditableModel {
   getWorkspaceId() {
@@ -88,24 +88,25 @@ export default class WorkspaceModel extends AuditableModel {
   }
 
   get submissionDates() {
-    let loFmt,
-      lo = this.data.submissionSet.description.firstSubmissionDate;
-    let hiFmt,
-      hi = this.data.submissionSet.description.lastSubmissionDate;
-    if (lo > hi) {
-      const tmp = lo;
-      lo = hi;
-      hi = tmp;
+    let lo = this.data.submissionSet.description.firstSubmissionDate;
+    let hi = this.data.submissionSet.description.lastSubmissionDate;
+
+    if (!(lo instanceof Date) || !(hi instanceof Date)) {
+      return null;
+    }
+
+    if (!isValid(lo) || !isValid(hi)) {
+      return null;
     }
-    if (lo && hi) {
-      loFmt = moment(lo).zone('us').format('l');
-      hiFmt = moment(hi).zone('us').format('l');
-      if (loFmt === hiFmt) {
-        return loFmt;
-      }
-      return loFmt + ' - ' + hiFmt;
+
+    if (lo > hi) {
+      [lo, hi] = [hi, lo]; // swap
     }
-    return null;
+
+    const loFmt = format(lo, 'MM/dd/yyyy'); // equivalent to 'l' in moment
+    const hiFmt = format(hi, 'MM/dd/yyyy');
+
+    return loFmt === hiFmt ? loFmt : `${loFmt} - ${hiFmt}`;
   }
 
   @attr() permissions;
diff --git a/app/routes/assignments/assignment.js b/app/routes/assignments/assignment.js
index 82f8415e8..3f9c4ec6b 100644
--- a/app/routes/assignments/assignment.js
+++ b/app/routes/assignments/assignment.js
@@ -4,7 +4,6 @@ import { hash } from 'rsvp';
 import { service } from '@ember/service';
 export default class AssignmentsAssignmentRoute extends AuthenticatedRoute {
   @service store;
-  @service router;
   @service currentUser;
   async model(params) {
     const assignment = await this.store.findRecord(
@@ -20,11 +19,10 @@ export default class AssignmentsAssignmentRoute extends AuthenticatedRoute {
     });
     return hash({
       assignment,
-      currentSection: section,
-      currentProblem: assignment.problem,
       groups,
       students: assignment.students,
-      sections: this.store.findAll('section'),
+      currentProblem: assignment.problem,
+      currentSection: section,
       linkedWorkspaces: assignment.linkedWorkspaces,
       parentWorkspace: assignment.parentWorkspace,
       answers: assignment.answers,
diff --git a/app/routes/users/new.js b/app/routes/users/new.js
index 2c3def66f..967a4155e 100644
--- a/app/routes/users/new.js
+++ b/app/routes/users/new.js
@@ -1,14 +1,11 @@
 import AuthenticatedRoute from '../_authenticated_route';
 import { hash } from 'rsvp';
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class UsersNewRoute extends AuthenticatedRoute {
   @service store;
   async model() {
-    const currentUser = this.modelFor('application');
     return hash({
-      currentUser,
       organizations: await this.store.findAll('organization'),
     });
   }
diff --git a/app/routes/workspace.js b/app/routes/workspace.js
index 19f74d539..33b022ee0 100644
--- a/app/routes/workspace.js
+++ b/app/routes/workspace.js
@@ -5,7 +5,7 @@
  */
 import Route from '@ember/routing/route';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 export default class WorkspaceRoute extends Route {
   @service store;
   /*
@@ -20,18 +20,6 @@ export default class WorkspaceRoute extends Route {
     );
 
     return workspace;
-    // let url = `/api/workspaces/${params.workspace_id}`;
-
-    // return $.get({ url }).then((results) => {
-    //   _.each(results, (val, key) => {
-    //     if (val) {
-    //       this.store.pushPayload({
-    //         [key]: val,
-    //       });
-    //     }
-    //   });
-    //   return this.store.peekRecord('workspace', params.workspace_id);
-    // });
   }
 
   @action tour() {
diff --git a/app/services/error-handling.js b/app/services/error-handling.js
index b5fab5ae2..8e5fab69c 100644
--- a/app/services/error-handling.js
+++ b/app/services/error-handling.js
@@ -6,14 +6,10 @@ import { tracked } from '@glimmer/tracking';
  * plus optional record rollback and SweetAlert toasts.
  */
 export default class ErrorHandlingService extends Service {
-  /**
-   * The SweetAlert service for showing error toasts, etc.
-   */
   @service('sweet-alert') alert;
 
   /**
    * Store of all errors, keyed by a property name (e.g., "problemLoadErrors").
-   * Using a TrackedObject so that updates remain reactive in templates.
    */
   @tracked errors = {};
 
diff --git a/app/services/loading-display.js b/app/services/loading-display.js
index 8e3f79239..6b33b20b0 100644
--- a/app/services/loading-display.js
+++ b/app/services/loading-display.js
@@ -1,7 +1,6 @@
-import { later } from '@ember/runloop';
 import Service from '@ember/service';
 
-export default Service.extend({
+export default class LoadingMessageService extends Service {
   handleLoadingMessage(
     context,
     eventType,
@@ -9,42 +8,37 @@ export default Service.extend({
     propToSet,
     timeout = 500
   ) {
-    if (context.get('isDestroyed') || context.get('isDestroying')) {
-      return;
-    }
+    if (context.isDestroyed || context.isDestroying) return;
 
-    let isDisplayingLoadingMessage = context.get(propToSet);
+    let isDisplayingLoadingMessage = context[propToSet];
 
     if (eventType === 'start') {
-      context.set(triggerProperty, true);
+      context[triggerProperty] = true;
     } else if (eventType === 'end') {
-      context.set(triggerProperty, false);
+      context[triggerProperty] = false;
       if (isDisplayingLoadingMessage) {
-        context.set(propToSet, false);
+        context[propToSet] = false;
       }
       return;
     } else {
-      // invalid eventType
-      return;
+      return; // invalid eventType
     }
 
-    later(function () {
-      if (context.isDestroyed || context.isDestroying) {
-        return;
-      }
-      let isInProgress = context.get(triggerProperty);
-      let isDisplayingLoadingMessage = context.get(propToSet);
+    setTimeout(() => {
+      if (context.isDestroyed || context.isDestroying) return;
+
+      let isInProgress = context[triggerProperty];
+      let isStillDisplaying = context[propToSet];
 
       if (isInProgress) {
-        if (!isDisplayingLoadingMessage) {
-          context.set(propToSet, true);
-          return;
+        if (!isStillDisplaying) {
+          context[propToSet] = true;
         }
       } else {
-        if (isDisplayingLoadingMessage) {
-          context.set(propToSet, false);
+        if (isStillDisplaying) {
+          context[propToSet] = false;
         }
       }
     }, timeout);
-  },
-});
+  }
+}
diff --git a/app/services/scroll.js b/app/services/scroll.js
new file mode 100644
index 000000000..6c71f4a11
--- /dev/null
+++ b/app/services/scroll.js
@@ -0,0 +1,18 @@
+// services/scroll.js
+import Service from '@ember/service';
+import { next } from '@ember/runloop';
+
+export default class ScrollService extends Service {
+  toBottom() {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: 'smooth',
+    });
+  }
+
+  toBottomAfterRender() {
+    next(() => {
+      this.toBottom();
+    });
+  }
+}
diff --git a/app/services/string-similarity.js b/app/services/string-similarity.js
index fc7e18949..03a60fe8b 100644
--- a/app/services/string-similarity.js
+++ b/app/services/string-similarity.js
@@ -1,9 +1,6 @@
 import Service from '@ember/service';
-import isString from 'lodash-es/isString';
-import isArray from 'lodash-es/isArray';
-import difference from 'lodash-es/difference';
 
-export default Service.extend({
+export default class StringSimilarityService extends Service {
   compareTwoStrings(str1, str2) {
     if (!str1.length && !str2.length) {
       // if both are empty strings
@@ -38,7 +35,7 @@ export default Service.extend({
       }
     });
     return (intersection * 2) / union;
-  },
+  }
 
   findBestMatch(mainString, targetStrings) {
     if (!this.areArgsValid(mainString, targetStrings)) {
@@ -54,13 +51,13 @@ export default Service.extend({
       (a, b) => b.rating - a.rating
     )[0];
     return { ratings, bestMatch };
-  },
+  }
 
   flattenDeep(arr) {
     return Array.isArray(arr)
       ? arr.reduce((a, b) => a.concat(this.flattenDeep(b)), [])
       : [arr];
-  },
+  }
 
   areArgsValid(mainString, targetStrings) {
     if (typeof mainString !== 'string') {
@@ -76,7 +73,7 @@ export default Service.extend({
       return false;
     }
     return true;
-  },
+  }
 
   letterPairs(str) {
     const pairs = [];
@@ -84,26 +81,26 @@ export default Service.extend({
       pairs[i] = str.substring(i, i + 2);
     }
     return pairs;
-  },
+  }
 
   wordLetterPairs(str) {
     const pairs = str.toUpperCase().split(' ').map(this.letterPairs);
     return this.flattenDeep(pairs);
-  },
+  }
 
   // trims, converts to lowercase, splits into words, removes any stopwords and then rejoins to string
   convertStringForCompare(str, stopwords) {
-    if (!isString(str)) {
+    if (typeof str !== 'string') {
       return;
     }
 
     let lower = str.trim().toLowerCase();
     let tokens = lower.split(' ');
 
-    if (isArray(stopwords)) {
-      tokens = difference(tokens, stopwords);
+    if (Array.isArray(stopwords)) {
+      tokens = tokens.filter((token) => !stopwords.includes(token));
     }
 
     return tokens.join('');
-  },
-});
+  }
+}
diff --git a/app/styles/_type-ahead-twitter.scss b/app/styles/_type-ahead-twitter.scss
index 44506fe28..0e502a114 100644
--- a/app/styles/_type-ahead-twitter.scss
+++ b/app/styles/_type-ahead-twitter.scss
@@ -1,75 +1,46 @@
-
-.tt-menu,
-.gist {
-  text-align: left;
-}
-
-.typeahead,
-.tt-query,
-.tt-hint {
-  width: 100%;
-  padding: 8px 12px;
-  font-size: 0.8em;
-  line-height: 1.2em;
-  outline: none;
-}
-
-.typeahead {
-  background-color: #fff;
-}
-
-.typeahead:focus {
-  border: 2px solid #0097cf;
-}
-
-.tt-query {
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-.tt-hint {
-  color: #999
-}
-
-.tt-menu {
+.typeahead-container {
+  position: relative;
   width: 100%;
-  z-index:100;
-  margin: 12px 0;
-  padding: 8px 0;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 8px;
-     -moz-border-radius: 8px;
-          border-radius: 8px;
-  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-          box-shadow: 0 5px 10px rgba(0,0,0,.2);
-}
 
-.tt-suggestion {
-  padding: 3px 20px;
-  font-size: .8em;
-  line-height: 1.2em;
-}
-.tt-header {
-  padding: 3px 20px;
-  font-weight: bold;
+  .twitter-typeahead {
+    display: inline-block;
+    max-width: 200px;
+    width: 100%;
+    position: relative;
+  }
+
+  .typeahead-input {
+    width: 100%;
+    padding: 0.5rem;
+    box-sizing: border-box;
+  }
+
+  .typeahead-dropdown {
+    position: absolute;
+    width: 100%;
+    background: white;
+    border: 1px solid #ccc;
+    z-index: 10;
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 2px;
+    padding: 0;
+    list-style: none;
+
+    li {
+      padding: 0.5rem;
+      cursor: pointer;
+      margin: 0;
+  
+      &:hover {
+        color: #eee;
+        background-color: #0097cf;
+      }
+  
+      &.highlighted-item {
+        background-color: #0097cf;
+        color: #eee;
+      }
+    }
+  }
 }
-
-.tt-suggestion:hover {
-  cursor: pointer;
-  color: #fff;
-  background-color: #0097cf;
-}
-
-.tt-suggestion.tt-cursor {
-  color: #fff;
-  background-color: #0097cf;
-
-}
-
-.tt-suggestion p {
-  margin: 0;
-}
\ No newline at end of file
diff --git a/app/templates/assignments/assignment.hbs b/app/templates/assignments/assignment.hbs
index 314581a12..a1b3f66da 100644
--- a/app/templates/assignments/assignment.hbs
+++ b/app/templates/assignments/assignment.hbs
@@ -1,6 +1,5 @@
 {{page-title @model.assignment.name}}
 <AssignmentInfo
-  @sections={{@model.sections}}
   @assignment={{@model.assignment}}
   @groups={{@model.groups}}
   @assignmentStudents={{@model.students}}
diff --git a/app/templates/components/draggable-selection.hbs b/app/templates/components/draggable-selection.hbs
index 51cdacf86..8565fb127 100644
--- a/app/templates/components/draggable-selection.hbs
+++ b/app/templates/components/draggable-selection.hbs
@@ -15,7 +15,7 @@
       this.selection.submission.id
       this.selection.id
     }}
-    @class={{this.linkToClassName}}
+    class={{this.linkToClassName}}
   >
     {{#if this.isImage}}
       <img
diff --git a/app/templates/components/import-work-step1.hbs b/app/templates/components/import-work-step1.hbs
index 9e2aafc24..6e58e7d90 100644
--- a/app/templates/components/import-work-step1.hbs
+++ b/app/templates/components/import-work-step1.hbs
@@ -10,7 +10,7 @@
 <p class='sub-input-label'>Start typing the name of the problem of which you
   would like to add existing work. If your problem does not exist yet, create
   one
-  <LinkTo @route='problems.new' @classNames='new-link'>here</LinkTo>.</p>
+  <LinkTo @route='problems.new' class='new-link'>here</LinkTo>.</p>
 <SelectizeInput
   @inputId='select-problem'
   @isAsync={{true}}
diff --git a/app/templates/components/import-work-step2.hbs b/app/templates/components/import-work-step2.hbs
index 31edc55ca..e34658b6a 100644
--- a/app/templates/components/import-work-step2.hbs
+++ b/app/templates/components/import-work-step2.hbs
@@ -14,7 +14,7 @@
 />
 
 <p class='sub-input-label'>If you want, you can create a new class
-  <LinkTo @route='sections.new' @classNames='new-link'>here</LinkTo></p>
+  <LinkTo @route='sections.new' class='new-link'>here</LinkTo></p>
 
 {{#if selectingClass}}
   <p class='input-label class'>
diff --git a/app/templates/components/quill-container.hbs b/app/templates/components/quill-container.hbs
deleted file mode 100644
index 59159b47c..000000000
--- a/app/templates/components/quill-container.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<section id={{this.sectionId}}></section>
\ No newline at end of file
diff --git a/app/templates/components/response-approver-reply.hbs b/app/templates/components/response-approver-reply.hbs
index ce440c2bd..6fe3b1e96 100644
--- a/app/templates/components/response-approver-reply.hbs
+++ b/app/templates/components/response-approver-reply.hbs
@@ -44,7 +44,7 @@
     <div class='compose-reply-container'>
       <p class='info'>{{replyHeadingText}}</p>
       <div class='compose-approver-reply'>
-        <QuillContainer
+        <Ui::QuillContainer
           @onEditorChange={{action 'updateQuillText'}}
           @attrSectionId={{quillEditorId}}
           @startingText={{editRevisionText}}
@@ -208,7 +208,7 @@
 
       {{#if isEditingApproverReply}}
         <div class='reply-revise'>
-          <QuillContainer
+          <Ui::QuillContainer
             @onEditorChange={{action 'updateQuillText'}}
             @attrSectionId={{quillEditorId}}
             @startingText={{editRevisionText}}
diff --git a/app/templates/components/response-mentor-reply.hbs b/app/templates/components/response-mentor-reply.hbs
index 8fd3a375b..c28b997d7 100644
--- a/app/templates/components/response-mentor-reply.hbs
+++ b/app/templates/components/response-mentor-reply.hbs
@@ -82,7 +82,7 @@
 
                     <div class='response-text-container'>
                       {{#if this.isComposing}}
-                        <QuillContainer
+                        <Ui::QuillContainer
                           @onEditorChange={{action 'updateQuillText'}}
                           @attrSectionId={{quillEditorId}}
                           @startingText={{editRevisionText}}
diff --git a/app/templates/components/response-new.hbs b/app/templates/components/response-new.hbs
index 0a066decb..e978532eb 100644
--- a/app/templates/components/response-new.hbs
+++ b/app/templates/components/response-new.hbs
@@ -183,7 +183,7 @@
     <div class='response-compose'>
       <p class='response-header'>Message</p>
 
-      <QuillContainer
+      <Ui::QuillContainer
         @onEditorChange={{action 'updateQuillText'}}
         @attrSectionId={{quillEditorId}}
         @startingText={{replyText}}
diff --git a/app/templates/components/response-submission-view.hbs b/app/templates/components/response-submission-view.hbs
index 8dc5ee093..37f23f4c0 100644
--- a/app/templates/components/response-submission-view.hbs
+++ b/app/templates/components/response-submission-view.hbs
@@ -86,7 +86,7 @@
           </div>
         {{/if}}
         {{#if this.isRevising}}
-          <QuillContainer @setup='insertQuillContent' />
+          <Ui::QuillContainer @setup='insertQuillContent' />
         {{else}}
           {{#if this.isLongExpanded}}
             <div class='submission-content-container submission-content-long'>
@@ -145,7 +145,8 @@
               <div id='submission_images'>
                 <a
                   target='_blank'
-                  href='{{unbound this.displaySubmission.imageUrl}}' rel="noopener noreferrer"
+                  href='{{unbound this.displaySubmission.imageUrl}}'
+                  rel='noopener noreferrer'
                 >
                   <img
                     src='{{this.displaySubmission.imageUrl}}'
@@ -162,13 +163,21 @@
         <div class='mentor-reply-actions button-row'>
           {{#if this.isRevising}}
             <button
-              class='primary-button cancel-button' type="button" {{action 'cancelRevising'}}
+              class='primary-button cancel-button'
+              type='button'
+              {{action 'cancelRevising'}}
             >Cancel</button>
-            <button class='primary-button' type="button" {{action 'submitRevision'}}>Submit
-              Revision</button>
+            <button
+              class='primary-button'
+              type='button'
+              {{action 'submitRevision'}}
+            >Submit Revision</button>
           {{else}}
             <button
-              data-test='submitter-revise' class='edit-assignment-button' type="button" {{action 'startRevising'}}
+              data-test='submitter-revise'
+              class='edit-assignment-button'
+              type='button'
+              {{action 'startRevising'}}
             >Revise <i class='fas fa-edit'></i></button>
           {{/if}}
         </div>
diff --git a/app/templates/components/section-list.hbs b/app/templates/components/section-list.hbs
index 778367924..193c2814a 100644
--- a/app/templates/components/section-list.hbs
+++ b/app/templates/components/section-list.hbs
@@ -4,7 +4,7 @@
     {{#if this.currentUser.isStudent}}{{else}}
       <LinkTo
         @route='sections.new'
-        @id='new-section-link'
+        id='new-section-link'
         class='new-link-btn'
       ><span>Create New Class</span><i class='fas fa-plus'></i></LinkTo>
     {{/if}}
@@ -21,7 +21,7 @@
               <li><LinkTo
                   @route='sections.section'
                   @model={{section.id}}
-                  @classNames='section'
+                  class='section'
                 >{{section.name}}</LinkTo></li>
             {{/each}}
           {{else}}
@@ -36,7 +36,7 @@
               <li><LinkTo
                   @route='sections.section'
                   @model={{section.id}}
-                  @classNames='section'
+                  class='section'
                 >{{section.name}}</LinkTo></li>
             {{/each}}
           {{else}}
@@ -53,7 +53,7 @@
               <li><LinkTo
                   @route='sections.section'
                   @model={{section.id}}
-                  @classNames='section'
+                  class='section'
                 >{{section.name}}</LinkTo></li>
             {{/each}}
           {{else}}
@@ -70,7 +70,7 @@
               <li><LinkTo
                   @route='sections.section'
                   @model={{section.id}}
-                  @classNames='section'
+                  class='section'
                 >{{section.name}}</LinkTo></li>
             {{/each}}
           {{else}}
@@ -89,7 +89,7 @@
                 <li><LinkTo
                     @route='sections.section'
                     @model={{section.id}}
-                    @classNames='section'
+                    class='section'
                   >{{section.name}}</LinkTo></li>
               {{/each}}
             {{/if}}
diff --git a/app/templates/components/undraggable-selection.hbs b/app/templates/components/undraggable-selection.hbs
index 865acbc37..09e91ceac 100644
--- a/app/templates/components/undraggable-selection.hbs
+++ b/app/templates/components/undraggable-selection.hbs
@@ -18,7 +18,7 @@
       this.selection.submission.id
       this.selection.id
     }}
-    @class={{this.linkToClassName}}
+    class={{this.linkToClassName}}
   >
     {{#if this.isImage}}
       <img
diff --git a/app/templates/components/workspace-comment.hbs b/app/templates/components/workspace-comment.hbs
index 866e080d4..8898018c6 100644
--- a/app/templates/components/workspace-comment.hbs
+++ b/app/templates/components/workspace-comment.hbs
@@ -7,7 +7,7 @@
           this.comment.selection.submission
           this.comment.selection
         }}
-        @class='comment comment-text'
+        class='comment comment-text'
       >
         {{this.comment.text}}
       </LinkTo>
diff --git a/app/templates/users/index.hbs b/app/templates/users/index.hbs
index 9ad58a754..65a699564 100644
--- a/app/templates/users/index.hbs
+++ b/app/templates/users/index.hbs
@@ -6,7 +6,7 @@
       confirmation</p>
     <p>Click on a username to see more info about their account and edit them</p>
     <p class='or'>Or</p>
-    <LinkTo @route='users.new' @id='user-new-link' class='new-link-btn'><span
+    <LinkTo @route='users.new' id='user-new-link' class='new-link-btn'><span
       >Create New User</span></LinkTo>
   </div>
 {{/if}}
\ No newline at end of file
diff --git a/app/templates/users/new.hbs b/app/templates/users/new.hbs
index 35b6f3c31..de9c41ad0 100644
--- a/app/templates/users/new.hbs
+++ b/app/templates/users/new.hbs
@@ -1,6 +1,6 @@
 {{page-title "New User"}}
 <div id="user-new">
   <div id="user-new-admin">
-    <UserNew @organizations={{this.model.organizations}} @currentUser={{this.model.currentUser}} />
+    <UserNew @organizations={{this.model.organizations}} />
   </div>
 </div>
diff --git a/package-lock.json b/package-lock.json
index 89c004aab..56c4be69c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9256,9 +9256,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001680",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-      "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA=="
+      "version": "1.0.30001715",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001715.tgz",
+      "integrity": "sha512-7ptkFGMm2OAOgvZpwgA4yjQ5SQbrNVGdRjzH0pBdy1Fasvcr+KAeECmbCAECzTuDuoX0FCY8KzUxjf9+9kfZEw=="
     },
     "capture-exit": {
       "version": "2.0.0",
@@ -10052,6 +10052,15 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "date-fns": {
+          "version": "2.30.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+          "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.21.0"
+          }
+        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -10670,13 +10679,9 @@
       }
     },
     "date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.21.0"
-      }
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="
     },
     "date-format": {
       "version": "4.0.14",
@@ -15907,6 +15912,15 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "date-fns": {
+          "version": "2.30.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+          "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.21.0"
+          }
+        },
         "find-up": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz",
@@ -17763,8 +17777,7 @@
     "fast-diff": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="
     },
     "fast-glob": {
       "version": "3.3.2",
@@ -19445,7 +19458,8 @@
     "immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "dev": true
     },
     "immutable": {
       "version": "4.3.6",
@@ -20333,6 +20347,7 @@
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
       "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dev": true,
       "requires": {
         "lie": "~3.3.0",
         "pako": "~1.0.2",
@@ -20471,6 +20486,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
       "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dev": true,
       "requires": {
         "immediate": "~3.0.5"
       }
@@ -20581,8 +20597,7 @@
     "lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-      "dev": true
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
     "lodash._baseassign": {
       "version": "3.2.0",
@@ -20655,6 +20670,11 @@
       "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
       "integrity": "sha512-GhrVeweiTD6uTmmn5hV/lzgCQhccwReIVRLHp7LT4SopOjqEZ5BbX8b5WWEtAKasjmy8hR7ZPwsYlxRCku5odg=="
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -20698,6 +20718,11 @@
       "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
       "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
     "lodash.isinteger": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
@@ -22649,7 +22674,8 @@
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true
     },
     "parallel-transform": {
       "version": "1.2.0",
@@ -22662,6 +22688,11 @@
         "readable-stream": "^2.1.5"
       }
     },
+    "parchment": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
+      "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -23560,6 +23591,34 @@
         "underscore.string": "~3.3.4"
       }
     },
+    "quill": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.3.tgz",
+      "integrity": "sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==",
+      "requires": {
+        "eventemitter3": "^5.0.1",
+        "lodash-es": "^4.17.21",
+        "parchment": "^3.0.0",
+        "quill-delta": "^5.1.0"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+          "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
+      "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
+      "requires": {
+        "fast-diff": "^1.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
+      }
+    },
     "qunit": {
       "version": "2.21.0",
       "resolved": "https://registry.npmjs.org/qunit/-/qunit-2.21.0.tgz",
@@ -24655,6 +24714,7 @@
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-4.21.0.tgz",
       "integrity": "sha512-WaEJHZjOWNth1QG5FEpxpREER0qptZBMonFU6GtAqdCNLJVxbtC3E7oS/I/+Q1sf1W032Wg0Ebk+m46lANOXyQ==",
+      "dev": true,
       "requires": {
         "jszip": "^3.10.1",
         "tmp": "^0.2.3",
@@ -24664,7 +24724,8 @@
         "tmp": {
           "version": "0.2.3",
           "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
-          "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w=="
+          "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+          "dev": true
         }
       }
     },
@@ -24836,7 +24897,8 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "dev": true
     },
     "setprototypeof": {
       "version": "1.2.0",
@@ -26875,14 +26937,6 @@
         "mime-types": "~2.1.24"
       }
     },
-    "typeahead.js": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/typeahead.js/-/typeahead.js-0.11.1.tgz",
-      "integrity": "sha512-yGaLzGjVHyryZdNfrWz2NHXUwEO7hrlVmGMGCo5+6mH3nEEhcQ0Te3mK3G60uRnxfERu8twOWSU4WmwScbwhMg==",
-      "requires": {
-        "jquery": ">=1.7"
-      }
-    },
     "typed-array-buffer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
@@ -27412,6 +27466,11 @@
         }
       }
     },
+    "validate.js": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.13.1.tgz",
+      "integrity": "sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -28033,7 +28092,8 @@
     "ws": {
       "version": "8.17.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow=="
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "dev": true
     },
     "xdg-basedir": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index 8532a5404..cd2d0fc2a 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
     "csvtojson": "^2.0.10",
+    "date-fns": "^4.1.0",
     "debug": "^4.3.4",
     "dotenv": "^8.2.0",
     "express": "^4.19.2",
@@ -79,15 +80,14 @@
     "nodemailer": "^6.9.13",
     "pdf2pic": "^2.2.4",
     "q": "^1.5.1",
+    "quill": "^2.0.3",
     "randomcolor": "^0.6.2",
     "request": "^2.88.2",
     "selectize": "^0.12.6",
-    "selenium-webdriver": "^4.21.0",
     "sharp": "^0.29.2",
     "socket.io": "^2.5.0",
     "sweetalert2": "^11.12.4",
     "tracked-built-ins": "^3.3.0",
-    "typeahead.js": "^0.11.1",
     "underscore": "^1.13.6",
     "uuid": "^8.3.2",
     "validate.js": "^0.13.1",
@@ -150,6 +150,7 @@
     "qunit": "^2.21.0",
     "qunit-dom": "^2.0.0",
     "sass": "^1.77.3",
+    "selenium-webdriver": "^4.21.0",
     "webpack": "^5.91.0"
   },
   "engines": {
diff --git a/tests/integration/components/assignment-info-student-test.js b/tests/integration/components/assignment-info-student-test.js
new file mode 100644
index 000000000..a7269a3c9
--- /dev/null
+++ b/tests/integration/components/assignment-info-student-test.js
@@ -0,0 +1,202 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | assignment-info-student', function (hooks) {
+  setupRenderingTest(hooks);
+  hooks.beforeEach(function () {
+    // Mock format-date helper
+    this.owner.register(
+      'helper:format-date',
+      function ([date, format, doUseRelativeTime]) {
+        if (!date) {
+          return 'N/A';
+        }
+        if (date === '2023-10-01') {
+          return 'October 1, 2023';
+        }
+        if (date === '2023-10-15') {
+          return 'October 15, 2023';
+        }
+        return 'Invalid Date';
+      }
+    );
+  });
+
+  test('it renders assignment information correctly', async function (assert) {
+    this.set('assignment', {
+      name: 'Math Assignment',
+      assignedDate: '2023-10-01',
+      dueDate: '2023-10-15',
+    });
+    this.set('problem', {
+      title: 'Solve for X',
+      text: 'Find the value of X in the equation.',
+    });
+    this.set('section', {
+      id: '123',
+      name: 'Algebra 101',
+    });
+
+    await render(hbs`<AssignmentInfoStudent
+      @assignment={{this.assignment}}
+      @problem={{this.problem}}
+      @section={{this.section}}
+    />`);
+
+    assert
+      .dom('.assignment-name')
+      .hasText('Math Assignment', 'Assignment name is rendered correctly');
+    assert
+      .dom('.assigned-date')
+      .hasText('October 1, 2023', 'Assigned date is formatted correctly');
+    assert
+      .dom('.due-date')
+      .hasText('October 15, 2023', 'Due date is formatted correctly');
+  });
+
+  test('it renders assignment details correctly', async function (assert) {
+    this.set('assignment', {
+      name: 'Math Assignment',
+      assignedDate: '2023-10-01',
+      dueDate: '2023-10-15',
+    });
+    this.set('problem', {
+      title: 'Solve for X',
+      text: 'Find the value of X in the equation.',
+    });
+    this.set('section', {
+      id: '123',
+      name: 'Algebra 101',
+    });
+
+    await render(hbs`<AssignmentInfoStudent
+      @assignment={{this.assignment}}
+      @problem={{this.problem}}
+      @section={{this.section}}
+    />`);
+
+    assert
+      .dom('.info-detail label[for="assignment"]')
+      .hasText('Assignment Name:');
+    assert.dom('.info-detail p').containsText('Math Assignment');
+    assert.dom('.info-detail').containsText('Solve for X');
+    assert.dom('.info-detail').containsText('Algebra 101');
+    assert.dom('.info-detail').containsText('Oct 1st 2023');
+    assert.dom('.info-detail').containsText('Oct 15th 2023');
+  });
+
+  test('it handles missing assignedDate and dueDate', async function (assert) {
+    this.set('assignment', {
+      name: 'Math Assignment',
+    });
+    this.set('problem', {
+      title: 'Solve for X',
+      text: 'Find the value of X in the equation.',
+    });
+    this.set('section', {
+      id: '123',
+      name: 'Algebra 101',
+    });
+
+    await render(hbs`<AssignmentInfoStudent
+      @assignment={{this.assignment}}
+      @problem={{this.problem}}
+      @section={{this.section}}
+    />`);
+
+    assert.dom('.info-detail').containsText('N/A', 'Assigned Date is N/A');
+    assert.dom('.info-detail').containsText('N/A', 'Due Date is N/A');
+  });
+
+  test('it renders problem statement and image', async function (assert) {
+    this.set('problem', {
+      title: 'Solve for X',
+      text: 'Find the value of X in the equation.',
+      image: {
+        imageData: 'data:image/png;base64,someImageData',
+      },
+    });
+
+    await render(hbs`<AssignmentInfoStudent
+      @problem={{this.problem}}
+    />`);
+
+    assert
+      .dom('.info-detail')
+      .containsText('Find the value of X in the equation.');
+    assert.dom('.assignmentImage img').exists('Problem image is rendered');
+    assert
+      .dom('.assignmentImage img')
+      .hasAttribute('src', 'data:image/png;base64,someImageData');
+  });
+
+  test('it displays revise and respond buttons', async function (assert) {
+    this.set('showReviseButton', true);
+    this.set('showRespondButton', true);
+    this.set('reviseAssignmentResponse', () => assert.step('revise clicked'));
+    this.set('beginAssignmentResponse', () => assert.step('respond clicked'));
+
+    await render(hbs`<AssignmentInfoStudent
+      @showReviseButton={{this.showReviseButton}}
+      @showRespondButton={{this.showRespondButton}}
+      @reviseAssignmentResponse={{this.reviseAssignmentResponse}}
+      @beginAssignmentResponse={{this.beginAssignmentResponse}}
+    />`);
+
+    assert.dom('.edit-assignment-button').exists('Revise button is visible');
+    assert.dom('.save-assign-btn').exists('Respond button is visible');
+
+    await click('.edit-assignment-button');
+    await click('.save-assign-btn');
+
+    assert.verifySteps(['revise clicked', 'respond clicked']);
+  });
+
+  test('it displays past submissions', async function (assert) {
+    this.set('sortedList', [
+      { answerId: '1', createDate: '2023-10-01T10:00:00Z' },
+      { answerId: '2', createDate: '2023-10-02T12:00:00Z' },
+    ]);
+    this.set('displayedAnswer', null);
+    this.set('displayAnswer', (answer) => {
+      this.set('displayedAnswer', answer);
+    });
+
+    await render(hbs`<AssignmentInfoStudent
+      @sortedList={{this.sortedList}}
+      @displayAnswer={{this.displayAnswer}}
+    />`);
+
+    assert
+      .dom('.past-submissions')
+      .exists('Past submissions section is visible');
+    assert
+      .dom('.submission-list li')
+      .exists({ count: 2 }, 'Two past submissions are displayed');
+    assert.dom('.submission-list li:first-child').containsText('Oct 1st 2023');
+
+    await click('.submission-list li:first-child');
+    assert.strictEqual(
+      this.displayedAnswer.answerId,
+      '1',
+      'First submission is displayed'
+    );
+  });
+
+  test('it handles no past submissions', async function (assert) {
+    this.set('sortedList', []);
+
+    await render(hbs`<AssignmentInfoStudent
+      @sortedList={{this.sortedList}}
+    />`);
+
+    assert
+      .dom('.info-msg-container .info-none')
+      .exists('No submissions message is displayed');
+    assert
+      .dom('.past-submissions')
+      .doesNotExist('Past submissions section is not visible');
+  });
+});