diff --git a/MODULE_REPORT.md b/MODULE_REPORT.md
deleted file mode 100644
index e3d527fb2..000000000
--- a/MODULE_REPORT.md
+++ /dev/null
@@ -1,14 +0,0 @@
-## Module Report
-### Unknown Global
-
-**Global**: `Ember.Copyable`
-
-**Location**: `app/models/tagging.js` at line 11
-
-```js
-
-
-export default Model.extend(Ember.Copyable, Auditable, {
-  workspace: belongsTo('workspace', { async: false }),
-  selection: belongsTo('selection'),
-```
diff --git a/README.md b/README.md
index 9292f9a1b..45ecc9700 100644
--- a/README.md
+++ b/README.md
@@ -76,7 +76,7 @@ If you run into the following error while running tests:
 
 ## Client `/app`
 
-EnCOMPASS uses Ember for the client and was recently migrated to Ember Octane from v2.14. Portions are not fully migrated.
+EnCOMPASS uses Ember for the client and was recently migrated to Ember Octane from v2.14. Portions are not fully migrated. See [UPGRADE_NOTES](./UPGRADE_NOTES.md) for more information.
 
 ### workflow
 
@@ -90,9 +90,6 @@ EnCOMPASS uses Ember for the client and was recently migrated to Ember Octane fr
 
 Ember is switching to Glimmer for its component engine. Components that have their templates (.hbs files) in `app/components` have been migrated. Their classes (.js files) will look like native JS classes. Components with templates in `app/templates/components` have not been migrated and still use Classic Ember component classes. I tried to combine similar components when possible.
 
-- `admin-problem-filter` and `admin-workspace-filter` could be comined
-- `problem-filter` and `workspace-filter` could be combined
-
 ### mixins
 
 usage of mixins (found in `app/mixins`) are deprecated - they still work for classic components but should be refactored away
@@ -122,9 +119,7 @@ Each route has a corresponding template that gets rendered. It should be in the
 
 Libraries that are not managed by npm are added in the `/vendor` directory and configured into the bundle in `/ember-cli-build.js` including:
 
-1. selectize input library (see `app/components/selectize-input.js`)
-2. typeahead library (see `app/components/twitter-typeahead.js`)
-3. selection libraries (`vendor/image-tagging.js` and `vendor/selection-highlighting.js`) that are used in `app/components/workspace-submission.js`
+- selection libraries (`vendor/image-tagging.js` and `vendor/selection-highlighting.js`) that are used in `app/components/workspace-submission.js`
 
 ### `/helpers`
 
diff --git a/UPGRADE_NOTES.md b/UPGRADE_NOTES.md
index 989b7a25b..5151cd256 100644
--- a/UPGRADE_NOTES.md
+++ b/UPGRADE_NOTES.md
@@ -1,4 +1,4 @@
-This are notes taken as I attempt to upgrade Encompass to Ember 4.5. Note that there is a fair bit of redundancy in this file as these notes are being created as I do the work.
+These are notes taken as I attempt to upgrade Encompass to Ember 4.5. Note that there is a fair bit of redundancy in this file as these notes are being created as I do the work.
 
 # Backstory
 
@@ -6,20 +6,45 @@ There has been various attempts to upgrade this app to modern Ember (Octane, Emb
 
 This file is an attempt to document what has and has not been done, as well as suggestions for future developers if I (like all others) leave an incomplete upgrade process.
 
+# Notes about the current state (1 Dec 2024)
+
+Enc-test has been updated with the latest version of the work that I've done over the last couple of months, as represented in this file. Of course, there is plenty that does not work; mostly parts of the system that have not yet been upgraded, upgrades that have not been adequately tested, and a few items that I document below that represent my current work when this contracted ended. To help the next developer, there are two files beyond this one:
+
+1. component audit.xls -- contains notes about all components in the Encompass system, including which have been upgraded or deleted.
+2. componentFinder.js -- script (run with "node componentFinder") that produces a report of all the components used in the different routes, all the components used by other components, etc. This should help the next developer in understanding how the Encompass app is organized.
+
+## Items in progress
+
+1. user-info component -- mostly works except for a few of the updates: seen tour, authorized, etc.
+2. problem-list-container and related components -- trashed problems might not be showing up correctly. Deleting and some actions might not be working.
+3. workspace-list-container and related components -- trashed and hidden workspaces might not be showing up correctly. Many of the actions in the three-dot (more) menu are not working.
+
 # Upgrades needed globally
 
+## Use of this.model or @model
+
+There are several components (js or template) that reference the model. In standard Ember practice, only the route templates should access the model and pass along the specific bits of the model needed by each component. That way, there's a single source of model truth (from the route) and we don't have components knowing about what's in the model.
+
+## Use to 'toXXX' methods
+
+There are several, largely unused, methods throughout the codebase such as 'toProblemInfo' that seem to be intended to transition to certain routes. It seems like these are legacy code so should be removed because the more modern approach -- using LinkTo in templates -- seems to be used throughout the app. The use of LinkTo is much better than prop-drilling these 'toXXX' methods.
+
 ## Removal of Mixins
 
 A fair number of mixins have been removed, replaced by services or component superclasses. There are still more mixins on some legacy components and elsewhere. The plan is to step through all mixins in app/mixins, replacing them with existing or new services everywhere they are used. See below: on 11/10/2024 I deleted most of them and identified just three that need refactoring before removal.
 
 ## Error handling service
 
-The error handling service was previously implemented incorrectly. The ErrorHandling superclass worked, but was a bit obscure in terms of creating properties for the component behind-the-scenes. The corrected error handling service is more explict in how it works and how components should use it. Note that all components that use this service should create a getter to access the errors generated. Also, the component should clean up those errors when it unmounts or at least regularly clean out the errors when we have a successful action.
+The error handling service was previously implemented incorrectly. The ErrorHandling superclass worked, but was a bit obscure in terms of creating properties for the component behind-the-scenes. The corrected error handling service is more explict in how it works and how components should use it. Note that all components that use this service should create a getter to access the errors generated. Also, the component should clean up those errors when it unmounts or at least regularly clean out the errors when we have a successful action. (In January 2025, I added a timer to the ErrorHandling service such that errors automatically clear after 3 minutes.)
 
 Note that there are many classic components that use the error handling service but it does not exactly behave as these components expect, so this needs to be fixed.
 
 But the above is not enough! Apparently the display of errors was a work-in-progresss. There are several components (e.g., workspace-list-container, problem-list-container) that incorporate either the error-handling service, superclass, or mixin, but don't display the errors (albiet they do nicely keep track of them).
 
+## .slice() replaces .toArray()
+
+To convert a RecordArray to a plain JS array, Ember docs now recommend using .slice() because .toArray() has been deprecated. As of 1/2/2025 I've made this replacement in selectize-input.js and troubleshooting.md, but still have to change it in about 55 places among 31 files.
+
 ## Store
 
 Store is a service, so there is no need for it to be passed as an argument to a component, route, or controller. This has been corrected for many cases (selectize-input, various aspects of the workspace and problem subsystems), but there are several more uses of @store={{this.store}} that need to be refactored.
@@ -32,23 +57,25 @@ These should be replaced with usage of htmlSafe().
 
 A number of components used two-way data binding, which is discouraged in modern Ember. In two-way data binding, it's possible to mutate the value of a property and have that property's value be changed in the property of the original component. Difficulties arise because it's tricky to recognize when two-way data binding is being used and therefore tricky for a new developer to see how (or that) certain property values are being updated.
 
-Instead, modern Ember uses the Data down, actions up pattern. Parent components send data down to their child components. A parent also sends actions (functions) to the child when updates are needed. When the child wants to update the property's value, it uses the appropriate action (essentially a callback to the parent). In this way, the parent is responsible for all of its properties' values, both getting and setting them.
+Instead, modern Ember uses the Data down, Actions up pattern. Parent components send data down to their child components. A parent also sends actions (functions) to the child when updates are needed. When the child wants to update the property's value, it uses the appropriate action (essentially a callback to the parent). In this way, the parent is responsible for all of its properties' values, both getting and setting them.
 
 ## Template and Component files
 
-Should be co-located in the app/components folder rather than in the app/templates/components folder. The app/templates folder should be for route templates only. Note that many of the still-to be upgraded components are split between the folders; the upgraded ones have their hbs files in app/components.
+Should be co-located in the app/components folder rather than in the app/templates/components folder. The app/templates folder should be for route templates only. Note that many of the still-to-be upgraded components are split between the folders; the upgraded ones have their hbs files in app/components.
 
 ## Vendor imports
 
 Currently, ember-cli-build.js and the vendor/ folder reflects an older-style of imports. Wouldn't it be better to include the necessary packages and import them as needed in the various components?
 
-This has been done for randomcolor, jQuery (older versions), typeahead.js, and selectize. Imports that were unused were deleted, including ajax (part of Ember), daterangePicker, error, ie_hacks, and jquery.mousewheel.
+This has been done for randomcolor, jQuery (older versions), typeahead.js, and selectize. Imports that were unused were deleted, including ajax (it's already part of Ember so no need to import it), daterangePicker, error, ie_hacks, and jquery.mousewheel.
 
 Changing these vendor imports involved installing the corresponding packages (selectize and typeahead.js), then importing those packages into the wrapping components (selectize-input and twitter-typeahead).
 
+There are also several packages that are essentially polyfills for outdated browsers, such as IE.
+
 ## Move from built-in Ember components (Input, TextArea, Select, etc.) to the plain HTML versions
 
-As possible, I will be replacing <Input> with <input>, and so forth. Although the Ember built-ins provide some convenience for assessibility options, they also encourage older-style approachs such as two-way data binding.
+As possible, I will be replacing <Input> with <input>, and so forth. Although the Ember built-ins provide some convenience for assessibility options, they also encourage older-style approachs such as two-way data binding. [NOTE: I'm not certain this is always a good idea.]
 
 ## Helpers
 
@@ -60,6 +87,14 @@ In Ember 4.5, helpers can now be regular functions rather than wrapped in a mana
 
 11/14/2024: Upgraded to 4.5 and simplified all helpers.
 
+## Controllers
+
+Controllers may be slated for deprecation. Best practice is to refactor the logic and properties in the controller, distributing them as appropriate to the route (for building the model), a service (for application state that will be used elsewhere), and a component (for everything else). The idea is that a route templates should be simple and reference just one or more components that contain much of the work that had been done by the controller.
+
+## Route Templates
+
+Route templates should refer to the model via @model rather than this.model as per the Ember Octane upgrade guide.
+
 ## EmberTable
 
 There are other packages that are more aligned with Glimmer and Octane approaches to Ember. However, depending on the needs, perhaps the 5 uses of EmberTable could be replaced with vanilla JS.
@@ -75,18 +110,34 @@ The current code includes several subsystems of components that are tightly coup
 
 # Possible future upgrades
 
+## Model definitions
+
+All hasMany and belongsTo relationships should specify inverse and async options explicitly. Not doing so is deprecated.
+
 ## DB document timestamps
 
 Currently, all timestamping of db documents (users, problems, workspaces, etc.) appears to be done manually primarily on the client side. This approach could cause issues because the clients clocks might be wrong. Also, because the dates are updated manually (all over the codebase), there is a higher likelihood of errors.
 
-Instead, we could leverage the {timestamps: true} option when defining all the Mongoose Schemas. This option has the db (a single )
+Instead, we could leverage the {timestamps: true} option when defining all the Mongoose Schemas. This option has the db (a single source of truth) automatically insert and maintain createdAt and updatedAt fields.
+
+## Route organization
+
+There are several routes directly under the routes/ folder that have corresponding subfolders. For example, there is app/routes/assignments.js as well as app/routes/assignments/assignment.js and app/routes/assignments/new.js. A more consistent naming scheme would be to move these top-level routes to be index.js files in their corresponding folders (e.g., assignments.js file would become app/routes/assignments/index.js). That way, all the related routing files are grouped together.
+
+Another argument for this approach is that this is how the corresponding template files are organized. For example, there is a app/templates/assignments/ folder with index.hbs, assignment.hbs, and new.hbs.
+
+On the other hand, the current structure reflects a parent / child route structure because there are also files such as app/templates/assignments.hbs in addition to app/templates/assignments/index.hbs. On the other hand, we have to ask if the complexity is needed, but that is an issue for another day.
 
 ## Component organization
 
-# UI Elements
+### UI Elements
 
 There is now the folder app/components/ui that contains the form-field and expandable-cell components. The purpose of this folder is a place for generic UI components. Other generic UI components include: my-select, selectize-input, twitter-typeahead, radio-group (and radio-group-item), toggle-control, checkbox-list (and checkbox-list-item), collapsible-list, and quill-container. Once these get moved into that folder, every usage must reference the "Ui" namespace, such as <Ui::ToggleControl /> or <Ui::MySelect />.
 
+### Other components
+
+Similar to the Ui example above, usage of Namespaces is encouraged in Ember moving forward. Thus, we should reorganize the app/components folder with subfolders representing the distinct subsystems of Encompass. The components in the folders would then be referenced in templates via namespaces, such as <Users::UserList> which refers to app/components/users/user-list.js and user-list.hbs.
+
 ## New Workspaces
 
 The components workspace-new, workspace-new-enc, and workspace-new-pows are currently not used. They seem to reflect some type of new functionality (rather than template/workspaces/new.hbs and workspace-new-container, which are used) that Pedro was working on but never finished. I'm leaving these files in the codebase with the hope that someday someone will use them to figure out what was being done and to finish the work. Likely the intent was to have tempalte/workspaces/new.hbs use the workspace-new component.
@@ -97,13 +148,13 @@ Both lodash and underscore are used extensively throughout the app. These cases
 
 Underscore is not as well maintained as is lodash, so lodash should be used as needed. Note that underscore is used extensively in the app_server. It is used in about 15 files in the client code.
 
-There are certainly cases where lodash is helpful, but uses of underscore could be replaced by lodash. Also, rather than globally making the underscore character a reference to the entire lodash library, it would be better to import just the lodash functions needed. Also, rather than lodash, using native JS functions such as map, filter, etc. would be good.
+There are certainly cases where lodash is helpful, but uses of underscore could be replaced by lodash. Also, rather than globally making the underscore character a reference to the entire lodash library, it would be better to import just the lodash functions needed.
 
-Also, of course, as possible we should replace the use of lodash functions with native JS equivalents.
+Also, rather than lodash, using native JS functions such as map, filter, etc. would be good.
 
 ## 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 "$("). Note that we cannot completely eliminate jQuery because the selectize package depends on it.
+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 "$(").
 
 Note that we cannot completely remove jQuery because it's a dependency of selectize. But we can eliminate its use in our own code to be conistent with modern Ember best practices.
 
@@ -129,7 +180,7 @@ There are a variety of superclasses
 
 I need to figure out if something needs to be done about this. I know that the Component superclasses should be made into services.
 
-In particular, the ErrorHandling superclass works, but it obscures how errors are accumulated (i.e., handleErrors creates a new property in the component that typically the template accesses). There is an error-handling service that handles errors more explicitly, requiring the component to create a getter to access the error variable created. Also, components should clean these up when they unmount.
+In particular, the ErrorHandling superclass works, but it obscures how errors are accumulated (i.e., handleErrors creates a new property in the component that typically the template accesses). See earlier notes on the ErrorHandling service.
 
 ## Cleaning up packages and unused elements
 
@@ -158,11 +209,12 @@ There are several README.md files scattered through the /test folder.
 
 - **Routes** Many of the routes are in the classic style, so should be upgraded to JS classes, although they all seem to work fine in Ember 4.5.
 - **Services** Most of the services are still in the classic style.
+- **Models** Several models include component-specific logic, including both derived properties (via get) and functions. Modern Ember encourages leaner models that focus on the data and their relationships. It would be best to trim down several of the models, pushing the specific logic out into the components.
 
 # Gotchas
 
 - For the built-in component <Input>, the id argument should be id= rather than @id=. If you do "@id", the component will not respond to clicks.
-- If a classic component receives @store={{this.store}} but this.store is undefined, then that component will see this.store as undefined even if you added store as a service.
+- If a classic component receives @store={{this.store}} but this.store (i.e., the argument) is undefined, then that component will see this.store as undefined even if you added store as a service.
 - "Error: Expected a dynamic component definition, but received an object or function that did not have a component manager associated with it. The dynamic invocation was <(result of a unknown helper)> or {{(result of a unknown helper)}}, and the incorrect definition is the value at the path (result of a unknown helper), which was: Object". This error has nothing to do with helpers. For some reason, a template file didn't like that I used the standard <input> tag. When I switched to the Ember <Input> tag, the problem went away.
 - Occasionally, Ember will fail quietly. For example,
 
@@ -177,14 +229,26 @@ There are several README.md files scattered through the /test folder.
 If this.removeMessages is undefined, Ember might **not** show an error in the console or indicate anywhere that it failed. Subsequent lines will simply not execute but the app will continue running as if everything is fine.
 
 - Be careful around the use of objects that are being tracked. One must be careful to update their references so that they are reactive. Just setting a property won't be enough unless you use TrackedObject from tracked-built-ins.
+- The error "Error while processing route: assignments.new Assertion Failed: Expected hash or Mixin instance, got [object Function]" was just caused by a syntax error in a model. The assertion failed because when hydrating a model, trying get all the documents from the store in that model failed.
+- Not really a gotcha, just something about Ember. If there is an async relationship in the route when the model is being put together, there are cases where you'll need to `await` a property access to ensure that the value has arrived.
+- a gotcha related to above: 'hash' waits for the resolution of regular Promises but not Ember ProxyPromises. Thus, if there's an async relationship in a model, if you use dot notation you must wait for that access to fully resolve (i.e., use await). 'hash' will not wait for that type of Promise. You'll see this via an error message such as:
+
+`Error while processing route: problems.problem.index Assertion Failed: You attempted to access the recommendedProblems property (of <(unknown):ember236>).
+Since Ember 3.1, this is usually fine as you no longer need to use .get() to access computed properties. However, in this case, the object in question is a special kind of Ember object (a proxy). Therefore, it is still necessary to use .get('recommendedProblems') in this case.`
+
+- 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.)
 
 # Current Progress
 
+## CurrentUser service
+
+Today (Feb 10, 2025) I upgraded the currentUser service so that clients don't have to always dig in to the user object it provides. Now you can do this.currentUser.isAdmin, etc., instead of this.currentUser.user.isAdmin. In other words, you can get directly to the most popular properties of user, most of which are getters in the model. Really, though, the model should be simply the specs of the data and the currentUser service should be calculating all the things that right now the user model is doing. Before I do that, I need to make sure that I replace accessing the user object (e.g., this.user.XXX) with accessing the service (e.g., this.currentUser.XXX, but really we could name the service 'user' in the components) in the entire codebase for those calculated properties.
+
 ## Upgrade of elements
 
 - **Components** - most of the discussion in this file focuses on the upgrading of components from classic to modern (Glimmer, Octane, Ember 4.5).
 - **Adapters** - Upgraded
-- **Controllers** - Seem to have already been upgraded. I've not tested these.
+- **Controllers** - Controllers might be slated to be deprecated in favor of using components. That is, the template for a route would simply contain invocations of one or ore components. Thus, working through the controllers and refactoring to remove them all is another goal of the upgrade.
 - **Helpers** - as document elsewhere in this document, all upgraded.
 - **Initializers** - only one and I believe it's not needed for production. I upgraded it, however.
 - **Mixins** - as documented elsewhere, I'm in the process of eliminating these and double-checking others' work on removing these from components, etc.
@@ -213,3 +277,47 @@ These mixins are slated to be removed:
 ## Upgrade of Helpers
 
 With the upgrade to Ember 4.5 (11/14/2024), all helpers have been simplified to regular functions.
+
+## .gitkeep
+
+Removed all the unnecessary .gitkeep files that were created when the project began 6 years ago. This empty file is just a convention so that git will keep an otherwise empty folder in the history.
+
+## UI folder
+
+As of 12/9, the components/ui folder contains the following:
+
+- checkbox-list, checkbox-list-item
+- error-box
+- expandable-cell
+- form-field
+- radio-group, radio-group-item
+- twitter-typeahead
+- wordcloud-container
+
+Components potentially to include in the ui folder:
+
+- bread-crumbs, bread-crumbs-item
+- draggable-selection, DragNDrop, Droppable
+- my-select
+- pagination-control
+- quill-container
+- radio-filter
+- selectize-input
+- toggle-control
+
+The following components, included above, are actually wrappers for third-party packages, so might go into their own folder: (uiwrappers?):
+
+- quill-container
+- selectize-input
+- twitter-typeahead
+- wordcloud-container
+
+## New Routes
+
+- I upgraded the problems parent route:
+
+  - problems/problem/<id>
+  - problems/problem/<id>/edit
+  - 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.
diff --git a/app/components/.gitkeep b/app/components/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/components/admin-filter.hbs b/app/components/admin-filter.hbs
index 5f369aa6b..755050e16 100644
--- a/app/components/admin-filter.hbs
+++ b/app/components/admin-filter.hbs
@@ -1,4 +1,4 @@
-<div id='admin-workspace-filter'>
+<div id='admin-filter'>
   <!-- Main Dropdown -->
   <div class='choose-filter-admin'>
     <span class='filter-text'>Find by</span>
diff --git a/app/components/admin-filter.js b/app/components/admin-filter.js
index 062c220d1..ab9d95caf 100644
--- a/app/components/admin-filter.js
+++ b/app/components/admin-filter.js
@@ -16,7 +16,7 @@ Admin filter expects the subOptions to be an object with the following structure
     val2: {type: 'checkbox', options: [{value, icon, label}, {value, icon, label, etc...]}
  */
 
-export default class AdminWorkspaceFilterComponent extends Component {
+export default class AdminFilterComponent extends Component {
   @service('utility-methods') utils;
   @service inputState;
   @tracked dropdownSelections = [];
diff --git a/app/components/answer-new.hbs b/app/components/answer-new.hbs
index b63733724..79e7f7a6a 100644
--- a/app/components/answer-new.hbs
+++ b/app/components/answer-new.hbs
@@ -24,7 +24,7 @@
           <Input id='answer' required='true' @type='hidden' @value={{answer}} />
         </div>
         {{#each this.briefSummaryErrors as |error|}}
-          <ErrorBox
+          <Ui::ErrorBox
             @error={{error}}
             @resetError={{action (mut this.briefSummaryErrors) null}}
             @showDismiss={{true}}
@@ -42,7 +42,7 @@
           />
         </div>
         {{#each this.explanationErrors as |error|}}
-          <ErrorBox
+          <Ui::ErrorBox
             @error={{error}}
             @resetError={{action (mut this.explanationErrors) null}}
             @showDismiss={{true}}
@@ -119,21 +119,21 @@
         {{/if}}
       </fieldset>
       {{#if this.isMissingRequiredFields}}
-        <ErrorBox
+        <Ui::ErrorBox
           @error='Please provide all required fields.'
           @showDismiss={{true}}
           @resetError={{action (mut this.isMissingRequiredFields) null}}
         />
       {{/if}}
       {{#if this.overSizedFileError}}
-        <ErrorBox
+        <Ui::ErrorBox
           @error={{this.overSizedFileError}}
           @showDismiss={{true}}
           @resetError={{action (mut this.overSizedFileError) null}}
         />
       {{/if}}
       {{#if this.isExplanationTooLarge}}
-        <ErrorBox
+        <Ui::ErrorBox
           @error={{this.tooLargeExplanationMsg}}
           @showDismiss={{true}}
           @resetError={{action (mut this.isExplanationTooLarge) null}}
diff --git a/app/components/assignment-info-student.hbs b/app/components/assignment-info-student.hbs
index eff5df325..ff14c456b 100644
--- a/app/components/assignment-info-student.hbs
+++ b/app/components/assignment-info-student.hbs
@@ -48,7 +48,7 @@
     {{/if}}
   </section>
   {{#each this.loadAnswerErrors as |error|}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error={{error}}
       @showDismiss={{true}}
       @resetError={{action 'removeErrorFromArray' 'loadAnswerErrors' error}}
@@ -80,12 +80,17 @@
   {{/if}}
   {{#if this.showReviseButton}}
     <button
-      class='edit-assignment-button' type="button" {{action 'reviseAssignmentResponse'}}
+      class='edit-assignment-button'
+      type='button'
+      {{action 'reviseAssignmentResponse'}}
     >Revise <i class='fas fa-edit'></i></button>
   {{/if}}
   {{#if this.showRespondButton}}
-    <button class='save-assign-btn' type="button" {{action 'beginAssignmentResponse'}}>Share
-      Your Ideas
+    <button
+      class='save-assign-btn'
+      type='button'
+      {{action 'beginAssignmentResponse'}}
+    >Share Your Ideas
       <i class='fas fa-lightbulb'></i></button>
   {{/if}}
 
diff --git a/app/components/assignment-info-teacher.hbs b/app/components/assignment-info-teacher.hbs
index c5c6d1386..44b3625b8 100644
--- a/app/components/assignment-info-teacher.hbs
+++ b/app/components/assignment-info-teacher.hbs
@@ -24,7 +24,8 @@
         name='daterange'
         id='assignedDate'
         @type='date'
-        @value={{(format-date @assignment.assignedDate 'YYYY-MM-DD')}} {{on "change" (action 'updateAssignedDate')}}
+        @value={{(format-date @assignment.assignedDate 'YYYY-MM-DD')}}
+        {{on 'change' (action 'updateAssignedDate')}}
       />
     {{else}}
       <p class='label'>
@@ -41,7 +42,8 @@
         id='dueDate'
         name='daterange'
         @type='date'
-        @value={{(format-date @assignment.dueDate 'YYYY-MM-DD')}} {{on "change" (action 'updateDueDate')}}
+        @value={{(format-date @assignment.dueDate 'YYYY-MM-DD')}}
+        {{on 'change' (action 'updateDueDate')}}
       />
     {{else}}
       <p class='label'>
@@ -54,16 +56,12 @@
   </div>
   {{! Class, Problem }}
   <div class='section-details'>
-    {{!-- {{#if this.showSectionInput}}
-      <SelectizeInput @inputId="assn-new-section-select" @initialOptions={{this.sectionOptions}} @initialItems={{this.initialSectionItem}} @onItemAdd={{action "updateSelectizeSingle"}} @onItemRemove={{action "updateSelectizeSingle"}} @maxItems={{1}} @labelField="name" @valueField="id" @searchField="name" @propToUpdate="section" @placeholder="Search for a section by name" @model="section" @store={{this.store}} />
-    {{else}} --}}
     <p>
       Class:
       <LinkTo @route='sections.section' @model={{@section.id}}>
         <span>{{@section.name}}</span>
       </LinkTo>
     </p>
-    {{!-- {{/if}} --}}
   </div>
   <div class='section-details'>
     <p>
@@ -72,10 +70,6 @@
         <span>{{@problem.title}}</span>
       </LinkTo>
     </p>
-    {{!-- {{#if this.showProblemInput}}
-      <SelectizeInput @store={{this.store}} @inputId="assn-new-problem-select" @initialOptions={{this.problemOptions}} @initialItems={{this.initialProblemItem}} @onItemAdd={{action "updateSelectizeSingle"}} @onItemRemove={{action "updateSelectizeSingle"}} @maxItems={{1}} @labelField="title" @valueField="id" @searchField="title" @propToUpdate="problem" @placeholder="Search for a problem by title" @isAsync={{true}} @model="problem" @queryParamsKey="query" @searchCriterion="title" @topLevelQueryParams="searchBy" @preload={{this.problemsPreloadValue}} />
-    {{else}} --}}
-    {{!-- {{/if}} --}}
   </div>
   <div class='workspace-details'>
     <p class='labelP'>
@@ -109,14 +103,15 @@
         @section={{@section}}
         @problem={{@problem}}
         @onCancel={{action (mut showLinkedWsForm) false}}
-        @store={{this.store}}
         @handleResults={{action 'handleCreatedLinkedWs'}}
       />
     {{/if}}
     {{#if this.showAddLinkedWsBtn}}
       <button
         data-test='add-linked-ws'
-        class='add-linkedworkspaces-btn' type="button" {{action (mut showLinkedWsForm) true}}
+        class='add-linkedworkspaces-btn'
+        type='button'
+        {{action (mut showLinkedWsForm) true}}
       >
         Add Linked Workspaces
         <i class='fas fa-plus-circle'></i>
@@ -152,14 +147,15 @@
         @section={{@section}}
         @problem={{@problem}}
         @onCancel={{action (mut showParentWsForm) false}}
-        @store={{this.store}}
         @handleResults={{action 'handleCreatedParentWs'}}
       />
     {{/if}}
     {{#if this.showAddParentWsBtn}}
       <button
         data-test='add-parent-ws'
-        class='add-parent-workspace-btn' type="button" {{action (mut showParentWsForm) true}}
+        class='add-parent-workspace-btn'
+        type='button'
+        {{action (mut showParentWsForm) true}}
       >Add Parent Workspace <i class='fas fa-plus-circle'></i></button>
     {{/if}}
     {{#if this.showNoParentWsMsg}}
@@ -188,7 +184,9 @@
     {{#if this.showEditButton}}
       <button
         data-test='edit-assignment'
-        class='edit-assignment-button' type="button" {{action 'editAssignment'}}
+        class='edit-assignment-button'
+        type='button'
+        {{action 'editAssignment'}}
       >
         Edit Assignment
         <i class='fas fa-edit'></i>
@@ -197,19 +195,28 @@
     {{#if this.isEditing}}
       <button
         class='save-assign-btn'
-        data-test='assn-save' type="button" {{action 'updateAssignment'}}
+        data-test='assn-save'
+        type='button'
+        {{action 'updateAssignment'}}
       >
         Save Assignment
         <i class='fas fa-save'></i>
       </button>
       <button
         class='cancelEditBtn'
-        data-test='assn-cancel' type="button" {{action 'stopEditing'}}
+        data-test='assn-cancel'
+        type='button'
+        {{action 'stopEditing'}}
       >
         Cancel
         <i class='fas fa-times'></i>
       </button>
-      <button data-test='trash-assn' class='right' type="button" {{action 'showDeleteModal'}}>
+      <button
+        data-test='trash-assn'
+        class='right'
+        type='button'
+        {{action 'showDeleteModal'}}
+      >
         <i class='fa fa-trash' aria-hidden='true'></i>
       </button>
     {{/if}}
diff --git a/app/components/assignment-info-teacher.js b/app/components/assignment-info-teacher.js
index 4c07e8edc..fc2966b20 100644
--- a/app/components/assignment-info-teacher.js
+++ b/app/components/assignment-info-teacher.js
@@ -6,6 +6,12 @@ import $ from 'jquery';
 import moment from 'moment';
 
 export default class AssignmentInfoTeacherComponent extends ErrorHandlingComponent {
+  @service store;
+  @service router;
+  @service currentUser;
+  @service('sweet-alert') alert;
+  @service('assignment-permissions') permissions;
+  @service('utility-methods') utils;
   @tracked formattedDueDate = null;
   @tracked formattedAssignedDate = null;
   @tracked isEditing = false;
@@ -21,6 +27,11 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   @tracked showLinkedWsForm = false;
   @tracked areSubmissionsExpanded = true;
   @tracked cachedProblem = [];
+
+  get user() {
+    return this.currentUser.user;
+  }
+
   get showProblemInput() {
     return this.isEditing && this.canEditProblem;
   }
@@ -45,11 +56,6 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   get allGroupsHaveWs() {
     return this.groupsWithoutWorkspaces.length === 0;
   }
-  @service store;
-  @service router;
-  @service('sweet-alert') alert;
-  @service('assignment-permissions') permissions;
-  @service('utility-methods') utils;
 
   get hasLinkedWorkspaces() {
     return this.args.assignment.linkedWorkspaces.length > 0;
@@ -86,7 +92,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
       this.args.assignment,
       'createdBy'
     );
-    return this.args.currentUser.id === creatorId;
+    return this.user.id === creatorId;
   }
 
   get isDirty() {
@@ -103,7 +109,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   }
 
   get canEdit() {
-    const isAdmin = this.args.currentUser.isAdmin;
+    const isAdmin = this.user.isAdmin;
     const isClean = this.isClean;
     const isYourOwn = this.isYourOwn;
 
@@ -140,7 +146,7 @@ export default class AssignmentInfoTeacherComponent extends ErrorHandlingCompone
   }
 
   get canEditDate() {
-    const isAdmin = this.args.currentUser.isAdmin;
+    const isAdmin = this.user.isAdmin;
     const canEdit = this.canEdit;
     const isBeforeAssignedDate = this.isBeforeAssignedDate;
     return isAdmin || (canEdit && isBeforeAssignedDate);
diff --git a/app/components/assignment-info.hbs b/app/components/assignment-info.hbs
index b101ded89..d225aed1d 100644
--- a/app/components/assignment-info.hbs
+++ b/app/components/assignment-info.hbs
@@ -1,18 +1,22 @@
- <h2 class="info-header">Assignment Details</h2>
-  <div class="clear"></div>
-{{#each this.initialLoadErrors as |error|}}
-    <p class="error-message">{{error}}</p>
-{{/each}}
-{{#if @currentUser.isStudent}}
-  <AssignmentInfoStudent @assignment={{@assignment}} @problem={{this.currentProblem}} @section={{this.currentSection}} @answerList={{@assignment.answers.content}} />
+<h2 class='info-header'>Assignment Details</h2>
+<div class='clear'></div>
+{{#if @isStudent}}
+  <AssignmentInfoStudent
+    @assignment={{@assignment}}
+    @problem={{@currentProblem}}
+    @section={{@currentSection}}
+    @answerList={{@answers}}
+    @onAnswerCreated={{@onAnswerCreated}}
+  />
 {{else}}
-  <AssignmentInfoTeacher @groups={{@groups}} @sections={{@sections}} @assignment={{@assignment}} @currentUser={{@currentUser}} @studentList={{@assignmentStudents}} @section={{this.currentSection}} @problem={{this.currentProblem}} @linkedWorkspaces={{@assignment.linkedWorkspaces.content}} @parentWorkspace={{@assignment.parentWorkspace.content}} />
-{{/if}}
-
-
-
-
-
-
-
-
+  <AssignmentInfoTeacher
+    @groups={{@groups}}
+    @sections={{@sections}}
+    @assignment={{@assignment}}
+    @studentList={{@assignmentStudents}}
+    @section={{@currentSection}}
+    @problem={{@currentProblem}}
+    @linkedWorkspaces={{@linkedWorkspaces}}
+    @parentWorkspace={{@parentWorkspace}}
+  />
+{{/if}}
\ No newline at end of file
diff --git a/app/components/assignment-info.js b/app/components/assignment-info.js
deleted file mode 100644
index 43bfd074c..000000000
--- a/app/components/assignment-info.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import ErrorHandlingComponent from './error-handling';
-import { inject as service } from '@ember/service';
-
-export default class AssignmentInfoComponent extends ErrorHandlingComponent {
-  @service('utility-methods') utils;
-
-  get currentProblem() {
-    let assignment = this.args.assignment;
-    if (!assignment) {
-      return null;
-    }
-    return assignment.get('problem.content');
-  }
-
-  get currentSection() {
-    let assignment = this.args.assignment;
-    if (!assignment) {
-      return null;
-    }
-    return assignment.get('section.content');
-  }
-}
diff --git a/app/components/assignment-list.hbs b/app/components/assignment-list.hbs
index 9570ffaeb..1f6940ea7 100644
--- a/app/components/assignment-list.hbs
+++ b/app/components/assignment-list.hbs
@@ -2,7 +2,7 @@
 <section class='list-side'>
   <header class='list-header'>
     <h1>Assignments</h1>
-    {{#unless @currentUser.isStudent}}
+    {{#unless this.user.isStudent}}
       <LinkTo
         @route='assignments.new'
         id='assignment-new-btn'
@@ -17,10 +17,10 @@
 
   <section>
     <nav class='list-box'>
-      {{#unless @currentUser.isStudent}}
-        <h2>{{@currentUser.username}}'s Assignments</h2>
+      {{#unless this.user.isStudent}}
+        <h2>{{this.user.username}}'s Assignments</h2>
         <ul class='your-assignments'>
-          {{#if this.yourList}}
+          {{#if (not-empty this.yourList)}}
             {{#each this.yourList as |assignment|}}
               {{#if assignment.name}}
                 <li>
@@ -51,8 +51,8 @@
           {{/if}}
         </ul>
       {{/unless}}
-      {{#if @currentUser.isStudent}}
-        <h2>{{@currentUser.username}}'s Assignments</h2>
+      {{#if this.user.isStudent}}
+        <h2>{{this.user.username}}'s Assignments</h2>
         <ul class='your-assignments'>
           {{#if this.studentList}}
             {{#each this.studentList as |assignment|}}
@@ -83,10 +83,10 @@
           {{/if}}
         </ul>
       {{/if}}
-      {{#if @currentUser.isAdmin}}
+      {{#if this.user.isAdmin}}
         <h2>All Assignments</h2>
         <ul class='admin-assignments'>
-          {{#if this.adminList}}
+          {{#if (not-empty this.adminList)}}
             {{#each this.adminList as |assignment|}}
               {{#if assignment.name}}
                 <li>
@@ -117,10 +117,10 @@
           {{/if}}
         </ul>
       {{/if}}
-      {{#if @currentUser.isPdAdmin}}
-        <h2>{{@currentUser.organization.name}} Assignments</h2>
+      {{#if this.user.isPdAdmin}}
+        <h2>{{this.organizationName}} Assignments</h2>
         <ul class='pd-assignments'>
-          {{#if this.pdList}}
+          {{#if (not-empty this.pdList)}}
             {{#each this.pdList as |assignment|}}
               {{#if assignment.name}}
                 <li>
diff --git a/app/components/assignment-list.js b/app/components/assignment-list.js
index f58f0fda2..35e6d0cbe 100644
--- a/app/components/assignment-list.js
+++ b/app/components/assignment-list.js
@@ -1,54 +1,56 @@
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class AssignmentListComponent extends Component {
   @service('utility-methods') utils;
+  @service currentUser;
+
+  get user() {
+    return this.currentUser.user;
+  }
+
+  get userId() {
+    return this.user.id;
+  }
 
   get yourList() {
-    let currentUser = this.args.currentUser;
-    let yourList = this.args.assignments.filter((assignment) => {
-      let userId = currentUser.get('id');
-      let assigmentCreatorId = this.utils.getBelongsToId(
+    const yourList = this.args.assignments.filter((assignment) => {
+      const assignmentCreatorId = this.utils.getBelongsToId(
         assignment,
         'createdBy'
       );
-      return userId === assigmentCreatorId && !assignment.get('isTrashed');
+      return this.userId === assignmentCreatorId && !assignment.isTrashed;
     });
     return yourList.sortBy('createDate').reverse();
   }
 
-  get adminList() {
-    let currentUser = this.args.currentUser;
-    let adminList = this.args.assignments.filter((assignment) => {
-      let userId = currentUser.get('id');
-      let assigmentCreatorId = this.utils.getBelongsToId(
+  get notYourList() {
+    const notYourList = this.args.assignments.filter((assignment) => {
+      const assignmentCreatorId = this.utils.getBelongsToId(
         assignment,
         'createdBy'
       );
-      return userId !== assigmentCreatorId && !assignment.get('isTrashed');
+      return this.userId !== assignmentCreatorId && !assignment.isTrashed;
     });
-    return adminList.sortBy('createDate').reverse();
+    return notYourList.sortBy('createDate').reverse();
+  }
+
+  get adminList() {
+    return this.notYourList;
   }
 
   get pdList() {
-    let currentUser = this.args.currentUser;
-    let pdList = this.args.assignments.filter((assignment) => {
-      let userId = currentUser.get('id');
-      let assigmentCreatorId = this.utils.getBelongsToId(
-        assignment,
-        'createdBy'
-      );
-      return userId !== assigmentCreatorId && !assignment.get('isTrashed');
-    });
-    return pdList.sortBy('createDate').reverse();
+    return this.notYourList;
   }
 
   get studentList() {
-    let currentUser = this.args.currentUser;
-    return currentUser
-      .get('assignments')
-      .toArray()
+    return this.user.assignments
+      .slice()
       .filter((assignment) => assignment.name && !assignment.isTrashed)
       .reverse();
   }
+
+  get organizationName() {
+    return this.user.organization?.name ?? 'No Organization';
+  }
 }
diff --git a/app/components/assignment-new.hbs b/app/components/assignment-new.hbs
index bcc3cb5db..9b595f5df 100644
--- a/app/components/assignment-new.hbs
+++ b/app/components/assignment-new.hbs
@@ -46,17 +46,6 @@
                   @type='hidden'
                   @value={{this.selectedSection}}
                 />
-                {{#each this.sectionFormErrors as |error|}}
-                  <ErrorBox
-                    @error={{error}}
-                    @showDismiss={{true}}
-                    @resetError={{action
-                      'removeErrorFromArray'
-                      'sectionFormErrors'
-                      error
-                    }}
-                  />
-                {{/each}}
               {{/if}}
             </div>
           </li>
@@ -96,17 +85,6 @@
                   @topLevelQueryParams='searchBy'
                   @preload={{this.problemsPreloadValue}}
                 />
-                {{#each this.problemFormErrors as |error|}}
-                  <ErrorBox
-                    @error={{error}}
-                    @showDismiss={{true}}
-                    @resetError={{action
-                      'removeErrorFromArray'
-                      'problemFormErrors'
-                      error
-                    }}
-                  />
-                {{/each}}
               </div>
             {{/if}}
           </li>
@@ -128,11 +106,6 @@
                   @value={{this.assignedDate}}
                   {{on 'input' this.cancelDateError}}
                 />
-                {{#each this.assignedDateFormErrors as |error|}}
-                  <p class='error-message'>
-                    {{error}}
-                  </p>
-                {{/each}}
               </div>
             </li>
             <li>
@@ -152,13 +125,8 @@
                   @value={{this.dueDate}}
                   {{on 'input' this.cancelDateError}}
                 />
-                {{#each this.dueDateFormErrors as |error|}}
-                  <p class='error-message'>
-                    {{error}}
-                  </p>
-                {{/each}}
                 {{#if this.invalidDateRange}}
-                  <ErrorBox
+                  <Ui::ErrorBox
                     @error='Invalid Date Range'
                     @showDismiss={{true}}
                     @resetError={{action (mut this.invalidDateRange) null}}
@@ -183,11 +151,6 @@
                 @value={{this.name}}
                 class='assignmentInput'
               />
-              {{#each this.nameFormErrors as |error|}}
-                <p class='error-message'>
-                  {{error}}
-                </p>
-              {{/each}}
             </div>
           </li>
           <li class='linked-ws'>
@@ -200,7 +163,7 @@
               </span>
             </label>
             <div class='choice-selection'>
-              <RadioGroup
+              <Ui::RadioGroup
                 @options={{this.linkedWsOptions}}
                 @selectedValue={{this.doCreateLinkedWorkspaces}}
                 @updateValue={{action 'updateDoCreateLinkedWorkspaces'}}
@@ -211,7 +174,7 @@
                 class='group-selection'
                 {{on 'click' this.updateSectionGroups}}
               >
-                <RadioGroup
+                <Ui::RadioGroup
                   @options={{this.groupWsOptions}}
                   @selectedValue={{this.linkedWorkspacesMode}}
                   @updateValue={{action 'updateLinkedWorkspacesMode'}}
@@ -242,7 +205,7 @@
                     Create Parent Workspace Now?
                   </span>
                 </label>
-                <RadioGroup
+                <Ui::RadioGroup
                   @options={{this.parentWsOptions}}
                   @selectedValue={{this.doCreateParentWorkspace}}
                   @updateValue={{action 'updateDoCreateParentWorkspace'}}
@@ -257,7 +220,7 @@
                       Share parent workspace with students?
                     </span>
                   </label>
-                  <RadioGroup
+                  <Ui::RadioGroup
                     @options={{this.parentWorkspaceAccessOptions}}
                     @selectedValue={{this.parentWorkspaceAccess}}
                     @updateValue={{action 'updateParentWorkspaceAccess'}}
@@ -296,7 +259,7 @@
       <i class='fas fa-times'></i>
     </button>
   </section>
-  {{#each this.createRecordErrors as |error|}}
+  {{#each this.errors as |error|}}
     <p class='error-message'>
       {{error}}
     </p>
diff --git a/app/components/assignment-new.js b/app/components/assignment-new.js
index 047aa643c..6704d6a2a 100644
--- a/app/components/assignment-new.js
+++ b/app/components/assignment-new.js
@@ -1,30 +1,26 @@
-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 { service } from '@ember/service';
 import moment from 'moment';
 
-export default class AssignmentNewComponent extends ErrorHandlingComponent {
+export default class AssignmentNewComponent extends Component {
   @service router;
   @service store;
   @service('sweet-alert') alert;
-  @tracked createAssignmentError = null;
+  @service currentUser;
+  @service errorHandling;
   @tracked isMissingRequiredFields = null;
   @tracked selectedSection = null;
   @tracked selectedProblem = null;
   @tracked problemList = null;
   @tracked formId = null;
-  @tracked createRecordErrors = [];
-  @tracked queryErrors = [];
   @tracked linkedWorkspacesMode = 'individual';
   @tracked doCreateLinkedWorkspaces = false;
   @tracked doCreateParentWorkspace = false;
   @tracked fromProblemInfo = false;
   @tracked parentWorkspaceAccess = false;
   @tracked allSelected = true;
-  @tracked problemFormErrors = [];
-  @tracked sectionFormErrors = [];
   @tracked invalidDateRange = false;
   @tracked assignedDate = moment(new Date()).format('YYYY-MM-DD');
   tooltips = {
@@ -154,6 +150,10 @@ export default class AssignmentNewComponent extends ErrorHandlingComponent {
     }
   }
 
+  get user() {
+    return this.currentUser.user;
+  }
+
   get hasSelectedSection() {
     return !!this.selectedSection;
   }
@@ -210,13 +210,14 @@ export default class AssignmentNewComponent extends ErrorHandlingComponent {
     }
   }
 
+  get errors() {
+    return this.errorHandling.getErrors('createRecordErrors');
+  }
+
   constructor() {
     super(...arguments);
-    let selectedProblem = this.args.selectedProblem;
-    if (selectedProblem && selectedProblem.isForAssignment) {
-      this.fromProblemInfo = true;
-      this.selectedProblem = selectedProblem;
-    }
+    if (this.args.fromProbleInfo)
+      this.selectedProblem = this.args.selectedProblem;
     if (this.args.fromSectionInfo) {
       this.fromSectionInfo = true;
       this.selectedSection = this.args.selectedSection;
@@ -233,7 +234,7 @@ export default class AssignmentNewComponent extends ErrorHandlingComponent {
 
   createAssignment(formValues) {
     let { section, problem, assignedDate, dueDate, name } = formValues;
-    const createdBy = this.args.currentUser;
+    const createdBy = this.user;
 
     if (!name) {
       // let nameDate = $('#assignedDate')
@@ -269,14 +270,14 @@ export default class AssignmentNewComponent extends ErrorHandlingComponent {
     const doCreateLinkedWorkspaces = this.doCreateLinkedWorkspaces;
     const doCreateParentWorkspace = this.doCreateParentWorkspace;
 
-    let linkedFormatInput = $('#linked-ws-new-name');
+    let linkedFormatInput = document.getElementById('linked-ws-new-name');
     let linkedNameFormat;
 
     if (linkedFormatInput) {
       linkedNameFormat = linkedFormatInput.val();
     }
 
-    let parentFormatInput = $('#parent-ws-new-name');
+    let parentFormatInput = document.getElementById('parent-ws-new-name');
     let parentNameFormat;
 
     if (parentFormatInput) {
@@ -315,7 +316,11 @@ export default class AssignmentNewComponent extends ErrorHandlingComponent {
         );
       })
       .catch((err) => {
-        this.handleErrors(err, 'createRecordErrors', createAssignmentData);
+        this.errorHandling.handleErrors(
+          err,
+          'createRecordErrors',
+          createAssignmentData
+        );
       });
   }
 
@@ -380,8 +385,8 @@ export default class AssignmentNewComponent extends ErrorHandlingComponent {
   @action validate() {
     const section = this.selectedSection;
     const problem = this.selectedProblem;
-    let assignedDate = $('#assignedDate').val();
-    let dueDate = $('#dueDate').val();
+    let assignedDate = document.getElementById('assignedDate')?.value;
+    let dueDate = document.getElementById('dueDate')?.value;
     const name = this.name;
 
     const values = {
diff --git a/app/components/categories-menu.hbs b/app/components/categories-menu.hbs
new file mode 100644
index 000000000..5fe5cb556
--- /dev/null
+++ b/app/components/categories-menu.hbs
@@ -0,0 +1,7 @@
+<div id='categories'>
+  <ul class='cd-accordion-menu animated'>
+    {{#each this.categories as |category|}}
+      <RecursiveMenu @item={{category}} @onAddCategory={{this.addCategory}} />
+    {{/each}}
+  </ul>
+</div>
\ No newline at end of file
diff --git a/app/components/categories-menu.js b/app/components/categories-menu.js
index 5ab655484..bb74b68ee 100644
--- a/app/components/categories-menu.js
+++ b/app/components/categories-menu.js
@@ -1,22 +1,73 @@
 import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+export default class CategoriesMenuComponent extends Component {
+  @service store;
+  @tracked categories = [];
 
-export default class CategoriesMenu extends Component {
-  // didReceiveAttrs: function () {
-  //   this._super(...arguments);
-  //   let categories = this.get('categories.meta');
-  //   this.set('categories', categories.categories);
-  // }
-  addCategoryAction(cat) {
-    this.addCategories(cat);
+  constructor() {
+    super(...arguments);
+    this.loadCategoryTree().then((categories) => {
+      this.categories = this.normalizeCategories(categories);
+    });
   }
+
+  async loadCategoryTree() {
+    const queryCats = await this.store.query('category', {});
+    const categories = queryCats.meta;
+    return categories.categories;
+  }
+
+  normalizeCategories(categories = []) {
+    return categories.map((category) => {
+      return {
+        ...category,
+        url: null,
+        children: this.normalizeDomains(category.domains),
+      };
+    });
+  }
+
+  normalizeDomains(domains = []) {
+    return domains.map((domain) => {
+      return {
+        ...domain,
+        children: this.normalizeTopics(domain.topics),
+      };
+    });
+  }
+
+  normalizeTopics(topics = []) {
+    return topics.map((topic) => {
+      return {
+        ...topic,
+        url: null,
+        children: this.normalizeStandards(topic.standards),
+      };
+    });
+  }
+
+  normalizeStandards(standards = []) {
+    return standards.map((standard) => {
+      return {
+        ...standard,
+        url: null,
+        children: standard.substandards || [],
+      };
+    });
+  }
+
   @action
-  addCategory(category) {
-    let identifier = category.identifier;
-    this.store
-      .queryRecord('category', { identifier: identifier })
-      .then((cat) => {
-        this.addCategoryAction('addCategories', cat);
+  async addCategory(category) {
+    if (category) {
+      const [categ] = await this.store.query('category', {
+        identifier: category.identifier,
       });
+      console.log('categ', categ);
+      if (categ && this.args.addCategory) {
+        this.args.addCategory(categ);
+      }
+    }
   }
 }
diff --git a/app/components/category-filter.hbs b/app/components/category-filter.hbs
new file mode 100644
index 000000000..2b99982f9
--- /dev/null
+++ b/app/components/category-filter.hbs
@@ -0,0 +1,63 @@
+<div>
+  <ul class='category-filter-list'>
+    <SelectizeInput
+      @inputId='categories-filter'
+      @onItemAdd={{this.handleAddCategoryIdentifier}}
+      @maxItems={{1}}
+      @labelField='identifier'
+      @valueField='identifier'
+      @searchField='identifier'
+      @model='category'
+      @queryParamsKey='identifier'
+      @topLevelQueryParams='searchBy'
+      @isAsync={{true}}
+      @placeholder='Search categories to add'
+    />
+    <li>
+      <button
+        class='show-category-btn'
+        type='button'
+        {{on 'click' this.handleOpenCategoryList}}
+      >Show Category Menu</button>
+    </li>
+    <h5>Selected Categories</h5>
+    <label class='subfilter'>
+      <input
+        id='toggle-sub-cats'
+        type='checkbox'
+        checked={{this.includeSubCats}}
+        {{on 'change' this.toggleIncludeSubCats}}
+      />
+      <span>Include Subcategories</span>
+    </label>
+    {{#if this.hasSelectedCategories}}
+      <ul class='selected-cat-list'>
+        {{#each this.selectedCategories as |category|}}
+          <li>
+            {{category.identifier}}
+            <i
+              class='far fa-times-circle'
+              {{on 'click' (fn this.handleRemoveCategory category)}}
+              aria-hidden='true'
+              title='Remove'
+            ></i>
+          </li>
+        {{/each}}
+      </ul>
+    {{else}}
+      <p>No categories selected.</p>
+    {{/if}}
+  </ul>
+
+  {{#if this.showCategoryList}}
+    <div id='category-list-modal'>
+      <div class='modal-content'>
+        <h4>Select a Category</h4>
+        <button class='close' {{on 'click' this.handleCloseCategoryList}}>
+          <i class='fas fa-times'></i>
+        </button>
+        <CategoriesMenu @addCategory={{this.handleAddCategory}} />
+      </div>
+    </div>
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/app/components/category-filter.js b/app/components/category-filter.js
new file mode 100644
index 000000000..cf02c54d3
--- /dev/null
+++ b/app/components/category-filter.js
@@ -0,0 +1,96 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class CategoryFilterComponent extends Component {
+  @service store;
+  @service inputState;
+  @tracked showCategoryList = false;
+  @tracked selectedCategories = [];
+
+  /**
+   * <Problems::CategoryFilter
+        @filterName={{@categoryFilterName}}
+        @onUpdate={{@onUpdate}}
+/>
+
+    The category filter is assumed to have a single main option, which is selected by default.
+    The list of selected categories is stored in the listState of that main option.
+    The single main option has a single suboption, which is whether to include
+    subcategories in the filter.
+ */
+
+  get hasSelectedCategories() {
+    return this.selectedCategories.length > 0;
+  }
+
+  get includeSubCatsOption() {
+    return this.inputState.getSubOptions(this.args.filterName)[0].value;
+  }
+
+  get includeSubCats() {
+    return this.inputState
+      .getSubSelections(this.args.filterName)
+      .includes(this.includeSubCatsOption);
+  }
+
+  @action
+  toggleIncludeSubCats() {
+    this.inputState.setSubSelection(
+      this.args.filterName,
+      this.includeSubCatsOption,
+      !this.includeSubCats
+    );
+    if (this.args.onUpdate) {
+      this.args.onUpdate();
+    }
+  }
+
+  @action
+  handleAddCategoryIdentifier(identifier) {
+    // get the category by identifier from the store
+    // then call handleAddCategory with the full category object
+    this.store.query('category', { identifier }).then((categories) => {
+      if (categories.length > 0) {
+        this.handleAddCategory(categories.firstObject);
+      }
+    });
+  }
+
+  @action
+  handleAddCategory(category) {
+    console.log('category', category);
+    if (category && !this.selectedCategories.includes(category)) {
+      this.selectedCategories = [...this.selectedCategories, category];
+      this.inputState.setListState(
+        this.args.filterName,
+        this.selectedCategories
+      );
+      if (this.args.onUpdate) {
+        this.args.onUpdate();
+      }
+    }
+  }
+
+  @action
+  handleRemoveCategory(category) {
+    this.selectedCategories = this.selectedCategories.filter(
+      (selectedCategory) => selectedCategory.id !== category.id
+    );
+    this.inputState.setListState(this.args.filterName, this.selectedCategories);
+    if (this.args.onUpdate) {
+      this.args.onUpdate();
+    }
+  }
+
+  @action
+  handleOpenCategoryList() {
+    this.showCategoryList = true;
+  }
+
+  @action
+  handleCloseCategoryList() {
+    this.showCategoryList = false;
+  }
+}
diff --git a/app/components/image-upload.hbs b/app/components/image-upload.hbs
new file mode 100644
index 000000000..ed37b4d79
--- /dev/null
+++ b/app/components/image-upload.hbs
@@ -0,0 +1,70 @@
+<div id='image-upload'>
+  <form enctype='multipart/form-data'>
+    <input
+      multiple={{@acceptMultiple}}
+      accept={{this.acceptableFileTypes}}
+      type='file'
+      class='image-upload'
+      {{on 'change' this.updateFiles}}
+      {{did-insert this.storeFileInputEl}}
+    />
+
+    {{#unless @hideSubmit}}
+      {{#if this.filesToBeUploaded}}
+        <input
+          type='button'
+          value='Upload Files'
+          {{on 'click' this.uploadImages}}
+        />
+      {{/if}}
+    {{/unless}}
+  </form>
+
+  {{#if this.missingFilesError}}
+    <Ui::ErrorBox
+      @error='Please select files to upload'
+      @resetError={{this.resetMissingFilesError}}
+      @showDismiss={{true}}
+    />
+  {{/if}}
+
+  {{#if this.isOverSizeLimit}}
+    {{#if this.isOverPdfLimit}}
+      <Ui::ErrorBox @error={{this.overPdfLimitMsg}} @showDismiss={{true}} />
+    {{/if}}
+    {{#if this.isOverImageLimit}}
+      <Ui::ErrorBox @error={{this.overImageLimitMsg}} @showDismiss={{true}} />
+    {{/if}}
+  {{/if}}
+
+  {{#if this.overSizedFileError}}
+    <Ui::ErrorBox
+      @error={{this.overSizedFileError}}
+      @showDismiss={{true}}
+      @resetError={{this.resetOverSizedFileError}}
+    />
+  {{/if}}
+
+  {{#unless this.uploadResults}}
+    {{#if this.showLoadingMessage}}
+      <p class='loading-message'>Uploading images... Thank you for your
+        patience.</p>
+    {{/if}}
+  {{/unless}}
+
+  {{#each this.uploadErrors as |error|}}
+    <p class='error-message'>{{error}}</p>
+  {{/each}}
+
+  {{#if this.uploadResults}}
+    <p class='upload-results'>
+      {{this.uploadResults.length}}
+      {{#if (greater-equal this.uploadResults.length 2)}}
+        files
+      {{else}}
+        file
+      {{/if}}
+      uploaded successfully!
+    </p>
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/app/components/image-upload.js b/app/components/image-upload.js
index d67947457..faf9f7cfc 100644
--- a/app/components/image-upload.js
+++ b/app/components/image-upload.js
@@ -1,36 +1,30 @@
-import Component from '@ember/component';
-import { computed, observer } from '@ember/object';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 import { later } from '@ember/runloop';
-import { inject as service } from '@ember/service';
-import $ from 'jquery';
-import CurrentUserMixin from '../mixins/current_user_mixin';
-
-export default Component.extend(CurrentUserMixin, {
-  elementId: 'image-upload',
-
-  alert: service('sweet-alert'),
-  store: service(),
-  errorHandling: service('error-handling'),
-  isHidden: false,
-  //uploadedFiles: null,
-  filesToBeUploaded: null,
-  uploadResults: null,
-  uploadError: null,
-  missingFilesError: false,
-  acceptMultiple: false,
-  uploadErrors: [],
-  singleFileSizeLimit: 10485760, // 10MB
-  totalPdfSizeLimit: 52428800, // 50MB
-  totalImageSizeLimit: 52428800, // 50MB
-
-  didReceiveAttrs() {
-    this._super();
-    let acceptableFileTypes = 'image/png,image/jpeg,application/pdf';
-    if (this.isPdfOnly) {
-      acceptableFileTypes = 'application/pdf';
-    }
-    this.set('acceptableFileTypes', acceptableFileTypes);
-  },
+export default class ImageUploadComponent extends Component {
+  @service('sweet-alert') alert;
+  @service store;
+  @service currentUser;
+  @service errorHandling;
+
+  @tracked isHidden = false;
+  @tracked filesToBeUploaded = null;
+  @tracked uploadResults = null;
+  @tracked uploadError = null;
+  @tracked missingFilesError = false;
+  @tracked acceptMultiple = false;
+  @tracked uploadErrors = [];
+  @tracked singleFileSizeLimit = 10485760; // 10MB
+  @tracked totalPdfSizeLimit = 52428800; // 50MB
+  @tracked totalImageSizeLimit = 52428800; // 50MB
+  @tracked acceptableFileTypes = this.args.isPdfOnly
+    ? 'application/pdf'
+    : 'image/png,image/jpeg,application/pdf';
+  @tracked showLoadingMessage = false;
+  loadingMessageTimer = null;
+  _fileInputEl = null;
 
   returnSizeDisplay(bytes) {
     if (bytes < 1024) {
@@ -40,7 +34,7 @@ export default Component.extend(CurrentUserMixin, {
     } else if (bytes >= 1048576) {
       return (bytes / 1048576).toFixed(1) + 'MB';
     }
-  },
+  }
 
   getOverSizedFileMsg(fileSize, fileName) {
     let limit = this.singleFileSizeLimit;
@@ -49,90 +43,100 @@ export default Component.extend(CurrentUserMixin, {
     let limitDisplay = this.returnSizeDisplay(limit);
 
     return `The file ${fileName} (${actualDisplay}) was not accepted due to exceeding the size limit of ${limitDisplay}`;
-  },
+  }
 
-  overPdfLimitMsg: computed('totalPdfSizeLimit', 'totalPdfSize', function () {
+  get overPdfLimitMsg() {
     let limit = this.totalPdfSizeLimit;
     let actual = this.totalPdfSize;
     let actualDisplay = this.returnSizeDisplay(actual);
     let limitDisplay = this.returnSizeDisplay(limit);
 
     return `Sorry, the total size of your PDF uploads (${actualDisplay}) exceeds the maximum of ${limitDisplay}`;
-  }),
-
-  overImageLimitMsg: computed(
-    'totalImageSizeLimit',
-    'totalImageSize',
-    function () {
-      let limit = this.totalImageSizeLimit;
-      let actual = this.totalImageSize;
-      let actualDisplay = this.returnSizeDisplay(actual);
-      let limitDisplay = this.returnSizeDisplay(limit);
-
-      return `Sorry, the total size of your image uploads (${actualDisplay}) exceeds the maximum of ${limitDisplay}`;
-    }
-  ),
+  }
 
-  handleLoadingMessage: observer('isUploading', function () {
-    const that = this;
-    if (!this.isUploading) {
-      this.set('showLoadingMessage', false);
-      return;
-    }
-    later(function () {
-      if (that.isDestroyed || that.isDestroying) {
-        return;
-      }
-      that.set('showLoadingMessage', that.get('isUploading'));
-    }, 500);
-  }),
-
-  uploadImage: function (currentUser, formData) {
-    const that = this;
-    return $.post({
-      url: '/image',
-      processData: false,
-      contentType: false,
-      // createdBy: currentUser,
-      data: formData,
+  get overImageLimitMsg() {
+    let limit = this.totalImageSizeLimit;
+    let actual = this.totalImageSize;
+    let actualDisplay = this.returnSizeDisplay(actual);
+    let limitDisplay = this.returnSizeDisplay(limit);
+
+    return `Sorry, the total size of your image uploads (${actualDisplay}) exceeds the maximum of ${limitDisplay}`;
+  }
+
+  uploadImage(formData) {
+    return fetch('/image', {
+      method: 'POST',
+      body: formData,
     })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+      })
       .then((res) => {
         let images = res.images;
-        that.set('uploadedImages', images);
-        that.get('store').pushPayload({ images });
+        this.uploadedImages = images;
+        this.store.pushPayload({ images });
 
         return res.images;
       })
       .catch((err) => {
-        that.set('isUploading', false);
-        that.errorHandling.handleErrors(err, 'uploadErrors', err);
+        this.setShowLoadingMessage(false);
+        this.errorHandling.handleErrors(err, 'uploadErrors', err);
         return err;
       });
-  },
-
-  uploadPdf: function (currentUser, formData) {
-    const that = this;
-    return $.post({
-      url: '/pdf',
-      processData: false,
-      contentType: false,
-      data: formData,
-      // createdBy: currentUser
-    })
-      .then(function (res) {
-        let images = res.images;
-        that.set('uploadedPdfs', images);
-        that.get('store').pushPayload({ images });
-        return res.images;
-      })
-      .catch((err) => {
-        that.set('isUploading', false);
-        that.errorHandling.handleErrors(err, 'uploadErrors', err);
-        return;
+  }
+
+  @action
+  async uploadPdf(formData) {
+    // Show a loading state if needed
+    this.setShowLoadingMessage(true);
+
+    try {
+      let response = await fetch('/pdf', {
+        method: 'POST',
+        body: formData,
       });
-  },
 
-  totalPdfSize: computed('filesToBeUploaded', function () {
+      if (!response.ok) {
+        // Read the error body to provide a meaningful message
+        let errorText = await response.text();
+        throw new Error(errorText);
+      }
+
+      let data = await response.json();
+      let { images } = data;
+      this.uploadedPdfs = images;
+      this.store.pushPayload({ images });
+      return images;
+    } catch (err) {
+      this.setShowLoadingMessage(false);
+      this.errorHandling.handleErrors(err, 'uploadErrors', err);
+    }
+  }
+
+  setShowLoadingMessage(shouldShow) {
+    if (shouldShow) {
+      // Schedule a delayed toggle to show the message after 500 ms
+      this.loadingMessageTimer = later(
+        this,
+        () => {
+          this.showLoadingMessage = true;
+        },
+        500
+      );
+    } else {
+      // Hide immediately and cancel any pending timer
+      this.showLoadingMessage = false;
+      if (this.loadingMessageTimer) {
+        this.loadingMessageTimer.cancel();
+        this.loadingMessageTimer = null;
+      }
+    }
+  }
+
+  get totalPdfSize() {
     let total = 0;
     let files = this.filesToBeUploaded;
     if (!files) {
@@ -145,9 +149,9 @@ export default Component.extend(CurrentUserMixin, {
       }
     }
     return total;
-  }),
+  }
 
-  totalImageSize: computed('filesToBeUploaded', function () {
+  get totalImageSize() {
     let total = 0;
     let files = this.filesToBeUploaded;
     if (!files) {
@@ -160,152 +164,150 @@ export default Component.extend(CurrentUserMixin, {
       }
     }
     return total;
-  }),
+  }
 
-  isOverPdfLimit: computed('totalPdfSize', 'totalPdfSizeLimit', function () {
+  get isOverPdfLimit() {
     return this.totalPdfSize > this.totalPdfSizeLimit;
-  }),
+  }
 
-  isOverImageLimit: computed(
-    'totalImageSize',
-    'totalImageSizeLimit',
-    function () {
-      return this.totalImageSize > this.totalImageSizeLimit;
-    }
-  ),
+  get isOverImageLimit() {
+    return this.totalImageSize > this.totalImageSizeLimit;
+  }
 
   resetFileInput() {
-    let input = $('input.image-upload');
-    if (input) {
-      this.set('filesToBeUploaded', null);
-      input.val('');
+    if (this._fileInputEl) {
+      this.filesToBeUploaded = null;
+      this._fileInputEl.value = ''; // Clear the real DOM input
     }
-  },
-
-  actions: {
-    uploadImages: function () {
-      const that = this;
-      const currentUser = that.get('currentUser');
-      const uploadData = that.get('filesToBeUploaded');
-      if (!uploadData) {
-        this.set('isUploading', false);
-        this.set('missingFilesError', true);
-        return;
-      }
-      if (this.isOverPdfLimit || this.isOverImageLimit) {
-        this.set('isUploading', false);
-        this.set('isOverSizeLimit', true);
+  }
+
+  @action
+  storeFileInputEl(el) {
+    this._fileInputEl = el;
+  }
+
+  @action
+  resetMissingFilesError() {
+    this.missingFilesError = false;
+  }
+
+  @action
+  resetOverSizedFileError() {
+    this.overSizedFileError = null;
+  }
+
+  @action
+  uploadImages() {
+    const uploadData = this.filesToBeUploaded;
+    if (!uploadData) {
+      this.setShowLoadingMessage(false);
+      this.missingFilesError = true;
+      return;
+    }
+    if (this.isOverPdfLimit || this.isOverImageLimit) {
+      this.setShowLoadingMessage(false);
+      this.isOverSizeLimit = true;
+      return;
+    }
+    this.setShowLoadingMessage(true);
+
+    let formData = new FormData();
+    let pdfFormData = new FormData();
+
+    let imageCount = 0;
+    let pdfCount = 0;
+
+    for (let f of uploadData) {
+      let fileSize = f.size;
+      if (fileSize > this.singleFileSizeLimit) {
+        this.setShowLoadingMessage(false);
+        this.overSizedFileError = this.getOverSizedFileMsg(f.size, f.name);
+        this.filesToBeUploaded = null;
         return;
+      } else if (f.type === 'application/pdf') {
+        pdfFormData.append('photo', f);
+        pdfCount++;
+      } else {
+        formData.append('photo', f);
+        imageCount++;
       }
-      this.set('isUploading', true);
-
-      let formData = new FormData();
-      let pdfFormData = new FormData();
-
-      let imageCount = 0;
-      let pdfCount = 0;
-
-      for (let f of uploadData) {
-        let fileSize = f.size;
-        if (fileSize > this.singleFileSizeLimit) {
-          this.set('isUploading', false);
-          this.set(
-            'overSizedFileError',
-            this.getOverSizedFileMsg(f.size, f.name)
-          );
-          this.set('filesToBeUploaded', null);
-          return;
-        } else if (f.type === 'application/pdf') {
-          pdfFormData.append('photo', f);
-          pdfCount++;
-        } else {
-          formData.append('photo', f);
-          imageCount++;
-        }
-      }
+    }
 
-      if (imageCount > 0) {
-        return this.uploadImage(currentUser, formData).then((res) => {
-          if (pdfCount > 0) {
-            return this.uploadPdf(currentUser, pdfFormData).then((res) => {
-              let results;
-              if (this.uploadedPdfs && this.uploadedImages) {
-                results = this.uploadedPdfs.concat(this.uploadedImages);
-                this.set('isUploading', false);
-                let fileModifier = results.length === 1 ? 'file' : 'files';
-
-                let msg = `Uploaded ${results.length} ${fileModifier} successfully`;
-                this.alert.showToast(
-                  'success',
-                  msg,
-                  'bottom-end',
-                  3000,
-                  false,
-                  null
-                );
-                if (this.handleUploadResults) {
-                  this.handleUploadResults(results);
-                }
-                this.set('uploadResults', results);
-                if (this.doResetFilesAfterUpload) {
-                  this.resetFileInput();
-                }
+    if (imageCount > 0) {
+      return this.uploadImage(formData).then(() => {
+        if (pdfCount > 0) {
+          return this.uploadPdf(pdfFormData).then(() => {
+            let results;
+            if (this.uploadedPdfs && this.uploadedImages) {
+              results = this.uploadedPdfs.concat(this.uploadedImages);
+              this.setShowLoadingMessage(false);
+              let fileModifier = results.length === 1 ? 'file' : 'files';
+
+              let msg = `Uploaded ${results.length} ${fileModifier} successfully`;
+              this.alert.showToast(
+                'success',
+                msg,
+                'bottom-end',
+                3000,
+                false,
+                null
+              );
+              if (this.handleUploadResults) {
+                this.handleUploadResults(results);
+              }
+              this.uploadResults = results;
+              if (this.doResetFilesAfterUpload) {
+                this.resetFileInput();
               }
-            });
-          } else {
-            this.set('isUploading', false);
-
-            let images = this.uploadedImages;
-            let fileModifier = images.length === 1 ? 'file' : 'files';
-
-            let msg = `Uploaded ${images.length} ${fileModifier} successfully`;
-            this.alert.showToast(
-              'success',
-              msg,
-              'bottom-end',
-              3000,
-              false,
-              null
-            );
-            if (this.handleUploadResults) {
-              this.handleUploadResults(images);
-            }
-            this.set('uploadResults', this.uploadedImages);
-            if (this.doResetFilesAfterUpload) {
-              this.resetFileInput();
             }
-          }
-        });
-      } else if (pdfCount > 0) {
-        return this.uploadPdf(currentUser, pdfFormData).then((res) => {
-          this.set('isUploading', false);
-
-          let pdfs = this.uploadedPdfs;
+          });
+        } else {
+          this.setShowLoadingMessage(false);
 
-          let fileModifier = pdfs.length === 1 ? 'file' : 'files';
+          let images = this.uploadedImages;
+          let fileModifier = images.length === 1 ? 'file' : 'files';
 
-          let msg = `Uploaded ${pdfs.length} ${fileModifier} successfully`;
+          let msg = `Uploaded ${images.length} ${fileModifier} successfully`;
           this.alert.showToast('success', msg, 'bottom-end', 3000, false, null);
           if (this.handleUploadResults) {
-            this.handleUploadResults(pdfs);
+            this.handleUploadResults(images);
           }
-          this.set('uploadResults', this.uploadedPdfs);
+          this.uploadResults = this.uploadedImages;
           if (this.doResetFilesAfterUpload) {
             this.resetFileInput();
           }
-        });
-      }
-    },
+        }
+      });
+    } else if (pdfCount > 0) {
+      return this.uploadPdf(pdfFormData).then(() => {
+        this.setShowLoadingMessage(false);
 
-    updateFiles(event) {
-      if (this.missingFilesError) {
-        this.set('missingFilesError', false);
-      }
+        let pdfs = this.uploadedPdfs;
 
-      this.set('filesToBeUploaded', event.target.form.firstElementChild.files);
-      if (this.storeFiles) {
-        this.storeFiles(event.target.form.firstElementChild.files);
-      }
-    },
-  },
-});
+        let fileModifier = pdfs.length === 1 ? 'file' : 'files';
+
+        let msg = `Uploaded ${pdfs.length} ${fileModifier} successfully`;
+        this.alert.showToast('success', msg, 'bottom-end', 3000, false, null);
+        if (this.handleUploadResults) {
+          this.handleUploadResults(pdfs);
+        }
+        this.uploadResults = this.uploadedPdfs;
+        if (this.doResetFilesAfterUpload) {
+          this.resetFileInput();
+        }
+      });
+    }
+  }
+
+  @action
+  updateFiles(event) {
+    if (this.missingFilesError) {
+      this.missingFilesError = false;
+    }
+
+    this.filesToBeUploaded = event.target.form.firstElementChild.files;
+    if (this.storeFiles) {
+      this.storeFiles(event.target.form.firstElementChild.files);
+    }
+  }
+}
diff --git a/app/components/linked-workspaces-new.hbs b/app/components/linked-workspaces-new.hbs
index 669399ad2..8cdbdca16 100644
--- a/app/components/linked-workspaces-new.hbs
+++ b/app/components/linked-workspaces-new.hbs
@@ -49,7 +49,7 @@
       </ul>
     </div>
     {{#each this.workspaceNameErrors as |error|}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{error}}
         @showDismiss={{true}}
         @resetError={{action (mut this.workspaceNameErrors) null}}
@@ -60,7 +60,7 @@
   {{#unless @isDisplayOnly}}
     <div class='create-ws-error'>
       {{#if this.createWorkspaceError}}
-        <ErrorBox
+        <Ui::ErrorBox
           @error={{createWorkspaceError}}
           @showDismiss={{true}}
           @resetError={{action (mut this.createWorkspaceError) null}}
@@ -77,11 +77,15 @@
       <div class='button-row'>
         <button
           class='primary-button create-ws'
-          data-test='add-linked-ws-create' type="button" {{action 'create'}}
+          data-test='add-linked-ws-create'
+          type='button'
+          {{action 'create'}}
         >Create Workspaces</button>
         <button
           class='primary-button cancel-button'
-          data-test='add-linked-ws-cancel' type="button" {{action 'cancel'}}
+          data-test='add-linked-ws-cancel'
+          type='button'
+          {{action 'cancel'}}
         >Cancel</button>
       </div>
     {{/unless}}
diff --git a/app/components/log-in.hbs b/app/components/log-in.hbs
index 7d8d17a29..00083d706 100644
--- a/app/components/log-in.hbs
+++ b/app/components/log-in.hbs
@@ -9,7 +9,7 @@
   <form class='form-signin'>
     <div class='auth-form-input'>
       {{#if this.missingCredentials}}
-        <ErrorBox
+        <Ui::ErrorBox
           @error='Incorrect username or password'
           @showDismiss={{true}}
         />
@@ -27,7 +27,7 @@
       />
 
       {{#if this.incorrectUsername}}
-        <ErrorBox @error='Incorrect Username' @showDismiss={{true}} />
+        <Ui::ErrorBox @error='Incorrect Username' @showDismiss={{true}} />
       {{/if}}
     </div>
 
@@ -44,18 +44,18 @@
       />
 
       {{#if this.incorrectPassword}}
-        <ErrorBox @error='Incorrect Password' @showDismiss={{true}} />
+        <Ui::ErrorBox @error='Incorrect Password' @showDismiss={{true}} />
       {{/if}}
 
       {{#if this.oauthErrorMsg}}
-        <ErrorBox @error={{this.oauthErrorMsg}} @showDismiss={{true}} />
+        <Ui::ErrorBox @error={{this.oauthErrorMsg}} @showDismiss={{true}} />
       {{/if}}
 
     </div>
 
     <button class='auth-button' type='button' {{action 'login'}}>Log In</button>
     {{#each this.postErrors as |error|}}
-      <ErrorBox @error={{error}} @showDismiss={{true}} />
+      <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
     {{/each}}
   </form>
 
diff --git a/app/components/my-select.js b/app/components/my-select.js
deleted file mode 100644
index fbc1b4f00..000000000
--- a/app/components/my-select.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  content: null,
-  selectedValue: null,
-  optionLabelPath: '',
-  classNames: ['mySelect', 'my-select'],
-
-  // didInitAttrs is deprecated according to Ember docs
-  didInitAttrs: function (attrs) {
-    this._super.apply(null, arguments);
-    var content = this.content;
-
-    if (!content) {
-      this.set('content', []);
-    }
-  },
-
-  actions: {
-    selectChange: function () {
-      var changeAction = this.action;
-      var selectedEl = $('select')[0];
-      var prompt = $('#select-prompt');
-      var selectedIndex;
-
-      if (prompt.length > 0) {
-        selectedIndex = selectedEl.selectedIndex - 1;
-      } else {
-        selectedIndex = selectedEl.selectedIndex;
-      }
-
-      var content = this.content;
-      var selectedValue = content.objectAt(selectedIndex);
-      this.set('selectedValue', selectedValue);
-      changeAction(selectedValue);
-    },
-  },
-});
diff --git a/app/components/parent-workspace-new.hbs b/app/components/parent-workspace-new.hbs
index 15c17277c..dcd1ca310 100644
--- a/app/components/parent-workspace-new.hbs
+++ b/app/components/parent-workspace-new.hbs
@@ -1,34 +1,62 @@
-<div id="parent-workspace-new">
-  <div class="ws-new name">
-    <p class="input-label">
+<div id='parent-workspace-new'>
+  <div class='ws-new name'>
+    <p class='input-label'>
       Workspace Name
-      <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Provide an easily identifiable name for this workspace">
-        <i class="fas fa-info-circle info-icon"></i>
+      <span
+        class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+        data-tooltip='Provide an easily identifiable name for this workspace'
+      >
+        <i class='fas fa-info-circle info-icon'></i>
       </span>
     </p>
     <div>
-      <Input id="parent-ws-new-name" class="single-text-input" @type="text" @value={{this.workspaceName}} placeholder="Provide a name for your workspace" />
+      <Input
+        id='parent-ws-new-name'
+        class='single-text-input'
+        @type='text'
+        @value={{this.workspaceName}}
+        placeholder='Provide a name for your workspace'
+      />
     </div>
-  {{#each this.workspaceNameErrors as |error|}}
-    <ErrorBox @error={{error}} @showDismiss={{true}} @resetError={{action (mut this.workspaceNameErrors) null}} />
-  {{/each}}
+    {{#each this.workspaceNameErrors as |error|}}
+      <Ui::ErrorBox
+        @error={{error}}
+        @showDismiss={{true}}
+        @resetError={{action (mut this.workspaceNameErrors) null}}
+      />
+    {{/each}}
   </div>
 
   {{#unless @isDisplayOnly}}
-    <div class="create-ws-error">
+    <div class='create-ws-error'>
       {{#if this.createWorkspaceError}}
-        <ErrorBox @error={{createWorkspaceError}} @showDismiss={{true}} @resetError={{action (mut this.createWorkspaceError) null}} />
+        <Ui::ErrorBox
+          @error={{createWorkspaceError}}
+          @showDismiss={{true}}
+          @resetError={{action (mut this.createWorkspaceError) null}}
+        />
       {{/if}}
     </div>
 
     {{#if this.doShowLoadingMessage}}
-      <p class="loading-message">Request in Progress... Thank you for your patience.</p>
+      <p class='loading-message'>Request in Progress... Thank you for your
+        patience.</p>
     {{/if}}
 
     {{#unless this.isRequestIsInProgress}}
-      <div class="button-row">
-        <button class="primary-button" data-test="add-parent-ws-create" type="button" {{action "create"}}>Create Workspace</button>
-        <button class="primary-button cancel-button" data-test="add-parent-ws-cancel" type="button" {{action "cancel"}}>Cancel</button>
+      <div class='button-row'>
+        <button
+          class='primary-button'
+          data-test='add-parent-ws-create'
+          type='button'
+          {{action 'create'}}
+        >Create Workspace</button>
+        <button
+          class='primary-button cancel-button'
+          data-test='add-parent-ws-cancel'
+          type='button'
+          {{action 'cancel'}}
+        >Cancel</button>
       </div>
     {{/unless}}
   {{/unless}}
diff --git a/app/components/parent-ws-collab-new.hbs b/app/components/parent-ws-collab-new.hbs
index 033b23e5d..317c499c9 100644
--- a/app/components/parent-ws-collab-new.hbs
+++ b/app/components/parent-ws-collab-new.hbs
@@ -1,12 +1,12 @@
 <div id='parent-ws-collab-new'>
   <div class='collab-container'>
-    <RadioGroup
+    <Ui::RadioGroup
       @options={{this.addTypeItems}}
       @selectedValue={{this.addType}}
       @updateValue={{action 'updateAddType'}}
     />
     {{#if isBulkAdd}}
-      <CheckboxList
+      <Ui::CheckboxList
         @items={{this.usersToAdd}}
         @selectedItems={{this.collabsToAdd}}
         @itemDisplayProp='username'
@@ -36,7 +36,7 @@
     {{/if}}
     {{#unless this.isNoActionToTake}}
       <div class='collab-settings global'>
-        <RadioGroup
+        <Ui::RadioGroup
           @options={{this.globalItems}}
           @selectedValue={{this.globalPermissionValue}}
           @updateValue={{action 'updateGlobalPermissionValue'}}
@@ -46,7 +46,7 @@
     <div class='collab-settings'>
       {{#if this.missingUserError}}
         <div class='card-row'>
-          <ErrorBox
+          <Ui::ErrorBox
             @error='Please select a user'
             @resetError={{action (mut this.missingUserError) false}}
             @showDismiss={{true}}
@@ -55,7 +55,7 @@
       {{/if}}
       {{#if this.existingUserError}}
         <div class='card-row'>
-          <ErrorBox
+          <Ui::ErrorBox
             @error='Collaborator already exists. Edit permissions below'
             @resetError={{action (mut this.existingUserError) false}}
             @showDismiss={{true}}
diff --git a/app/components/primary-list-filter.hbs b/app/components/primary-list-filter.hbs
index 14df38c8f..635ef5547 100644
--- a/app/components/primary-list-filter.hbs
+++ b/app/components/primary-list-filter.hbs
@@ -2,7 +2,7 @@
 <ul class='primary-filter-list'>
   {{#each this.mainOptions as |input|}}
     <li class='filter-{{input.value}}'>
-      <RadioFilter
+      <Ui::RadioFilter
         @groupValue={{this.mainSelection}}
         @isChecked={{(is-equal this.mainSelectionValue input.value)}}
         @groupName='top-level'
diff --git a/app/components/problem-filter.hbs b/app/components/problem-filter.hbs
index 30a4b5ffa..ca8cb6c2b 100644
--- a/app/components/problem-filter.hbs
+++ b/app/components/problem-filter.hbs
@@ -16,57 +16,12 @@
       Category
     </h3>
     {{#if this.showCategoryFilters}}
-      <ul class='category-filter-list'>
-        <SelectizeInput
-          @inputId='categories-filter'
-          @onItemAdd={{this.addCategory}}
-          @maxItems={{1}}
-          @labelField='identifier'
-          @valueField='id'
-          @searchField='identifier'
-          @model='category'
-          @queryParamsKey='identifier'
-          @topLevelQueryParams='searchBy'
-          @isAsync={{true}}
-          @placeholder='Search categories to add'
-        />
-        <li>
-          <button
-            class='show-category-btn'
-            type='button'
-            {{on 'click' this.showCategoryMenu}}
-          >Show Category Menu</button>
-        </li>
-        <h5>Selected Categories</h5>
-        <label class='subfilter'>
-          <Input
-            id='toggle-sub-cats'
-            @type='checkbox'
-            @checked={{@doIncludeSubCategories}}
-            {{on 'change' this.toggleIncludeSubCats}}
-          />
-          <span>Include Subcategories</span>
-        </label>
-        {{#if @categoriesFilter}}
-          <ul class='selected-cat-list'>
-            {{#each @categoriesFilter as |category|}}
-              <li>
-                {{category.identifier}}
-                <i
-                  class='far fa-times-circle'
-                  {{on 'click' (fn this.removeCategory category)}}
-                  aria-hidden='true'
-                  title='Remove'
-                ></i>
-              </li>
-            {{/each}}
-          </ul>
-        {{else}}
-          <p>No categories selected.</p>
-        {{/if}}
-      </ul>
+      <CategoryFilter
+        @onUpdate={{@onUpdate}}
+        @filterName={{@categoryFilterName}}
+      />
     {{/if}}
-    {{#if this.isAdminUser}}
+    {{#if this.userIsAdmin}}
       <h3
         class='more-header {{if this.closedMenu "closed"}}'
         {{on 'click' this.toggleMoreFilters}}
@@ -85,9 +40,9 @@
               id='toggle-trashed'
               @type='checkbox'
               @checked={{@showTrashed}}
-              {{on 'change' this.toggleTrashedProblems}}
+              {{on 'change' @toggleTrashed}}
             />
-            <span>Show All Trashed Problems</span>
+            <span>Show All the Trashed Problems</span>
           </label>
         </ul>
       {{/if}}
diff --git a/app/components/problem-filter.js b/app/components/problem-filter.js
index 34026d089..cb6fe80be 100644
--- a/app/components/problem-filter.js
+++ b/app/components/problem-filter.js
@@ -4,18 +4,15 @@ import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
 /**
- *     <ProblemFilter
-        @mainOptions={{this.mainOptions}}
-        @mainSelection={{this.mainSelection}}
-        @onUpdateMain={{this.handleUpdateMain}}
-        @subOptions={{this.subOptions}}
-        @subSelections={{this.subSelections}}
-        @onUpdateSub={{this.handleUpdateSub}}
-        @showTrashed={{this.toggleTrashed}}
+ *   <ProblemFilter
+        @filterName={{this.filterName}}
+        @adminFilterName={{this.adminFilterName}}
+        @showAdminFilters={{this.showAdminFilters}}
+        @onUpdate={{this.triggerFetch}}
+        @showTrashed={{this.showOnlyTrashed}}
         @toggleTrashed={{this.triggerShowTrashed}}
-        @categoriesFilter={{this.categoriesFilter}}
-        @onUpdateCategories={{this.handleUpdateCategories}}
-      >
+        @categoryFilterName={{this.categoryFilterName}}
+      />
  */
 export default class ProblemFilterComponent extends Component {
   @service currentUser;
@@ -56,34 +53,11 @@ export default class ProblemFilterComponent extends Component {
     this.closedMenu = !this.closedMenu;
   }
 
-  @action
-  toggleTrashedProblems() {
-    if (this.args.triggerShowTrashed) {
-      this.args.triggerShowTrashed();
-    }
-  }
-
   @action
   toggleCategoryFilters() {
     this.showCategoryFilters = !this.showCategoryFilters;
   }
 
-  @action
-  addCategory(val) {
-    if (!val) {
-      return;
-    }
-    let category = this.args.store.peekRecord('category', val);
-    if (category) {
-      this.args.categoriesFilter.addObject(category);
-    }
-  }
-
-  @action
-  removeCategory(category) {
-    this.args.categoriesFilter.removeObject(category);
-  }
-
   @action
   toggleIncludeSubCats() {
     this.args.onUpdate();
diff --git a/app/components/problem-info.hbs b/app/components/problem-info.hbs
index b3153207f..35f30156b 100644
--- a/app/components/problem-info.hbs
+++ b/app/components/problem-info.hbs
@@ -1,160 +1,104 @@
-<header class='info-header'>
-  {{#if this.isEditing}}
-    <span class='top-left-icon'>
-      {{{public-private this.privacySettingIcon}}}
-    </span>
-    <div class='select-container'>
-      <select
-        name='privacy-settings'
-        id='privacy-select'
-        {{on 'change' this.changePrivacy}}
+<div {{did-update this.loadLocalProblem @problem}}>
+  <header class='info-header'>
+    {{#if @isEditing}}
+      <span class='top-left-icon'>
+        {{public-private this.problem.privacySetting}}
+      </span>
+      <div class='select-container'>
+        <select
+          name='privacy-settings'
+          id='privacy-select'
+          {{on 'change' this.changePrivacy}}
+        >
+          <option
+            value='E'
+            selected={{is-equal this.problem.privacySetting 'E'}}
+          >Everyone</option>
+          <option
+            value='O'
+            selected={{is-equal this.problem.privacySetting 'O'}}
+          >My Org</option>
+          <option
+            value='M'
+            selected={{is-equal this.problem.privacySetting 'M'}}
+          >Just Me</option>
+        </select>
+      </div>
+    {{else}}
+      <span
+        class='top-left-icon simptip-position-right simptip-smooth'
+        data-tooltip={{privacy-setting this.problem.privacySetting}}
       >
-        <option
-          value='E'
-          selected={{is-equal @problem.privacySetting 'E'}}
-        >Everyone</option>
-        <option value='O' selected={{is-equal @problem.privacySetting 'O'}}>My
-          Org</option>
-        <option value='M' selected={{is-equal @problem.privacySetting 'M'}}>Just
-          Me</option>
-      </select>
-    </div>
-  {{else}}
-    <span
-      class='top-left-icon simptip-position-right simptip-smooth'
-      data-tooltip={{privacy-setting @problem.privacySetting}}
-    >
-      {{{public-private @problem.privacySetting}}}
+        {{public-private this.problem.privacySetting}}
+      </span>
+    {{/if}}
+    <span class='remove-icon' {{on 'click' this.hideInfo}}>
+      <i class='fas fa-times'></i>
     </span>
-  {{/if}}
-  <span class='remove-icon' {{action 'hideInfo'}}>
-    <i class='fas fa-times'></i>
-  </span>
-</header>
+  </header>
 
-<div class='side-info-menu'>
-  <section class='info-details'>
-    <div class='info-main'>
-      <div class='heading'>
-        {{#if this.isEditing}}
-          <Input
-            name='title'
-            id='title'
+  <div class='side-info-menu'>
+    <section class='info-details'>
+      <div class='info-main'>
+        <div class='heading'>
+          <Ui::FormField
+            @isEditing={{@isEditing}}
             @type='text'
-            @value={{this.problemName}}
+            @value={{this.problem.title}}
+            @onChange={{fn this.handleChange 'title'}}
           />
-        {{else}}
-          {{{@problem.title}}}
-        {{/if}}
-      </div>
-      <div class='subheading date'>{{format-date
-          @problem.createDate
-          'MM/DD/YYYY'
-        }}</div>
-      <div class='subheading'><LinkTo @route='metrics.problem' @model={{@problem}}>See Reports</LinkTo></div>
-    </div>
-    <div class='info-menu'>
-      <button
-        class='tab-link general {{if this.showGeneral 'active-btn'}}' type="button" {{on 'click' this.toggleGeneral}}
-      >General</button>
-      <button
-        class='tab-link categories {{if this.showCats 'active-btn'}}' type="button" {{on 'click' this.toggleCats}}
-      >Categories</button>
-      <button
-        class='tab-link additional {{if this.showAdditional 'active-btn'}}' type="button" {{on 'click' this.toggleAdditional}}
-      >Additional</button>
-      <button
-        class='tab-link legal {{if this.showLegal 'active-btn'}}' type="button" {{on 'click' this.toggleLegal}}
-      >Legal</button>
-    </div>
-    <div class='info-content'>
-      {{#if this.showGeneral}}
-        <p class='info-content-label'>Problem Statement</p>
-        <div class='info-content-block statement large-content'>
-          {{#if this.isEditing}}
-            <QuillContainer
-              @onEditorChange={{action 'updateQuillText'}}
-              @startingText={{@problem.text}}
-            />
-          {{else}}
-            {{{@problem.text}}}
-          {{/if}}
         </div>
-        {{#if this.isEditing}}
+        <div class='subheading date'>
+          {{format-date @problem.createDate 'MM/DD/YYYY'}}
+        </div>
+        <div class='subheading'><LinkTo
+            @route='metrics.problem'
+            @model={{@problem}}
+          >See Reports</LinkTo></div>
+      </div>
+      <Ui::TabButtons
+        @tabs={{this.tabs}}
+        @activeTab={{this.activeTab}}
+        @onSelect={{this.onSelectTab}}
+      />
+      <div class='info-content'>
+        {{! General tab}}
+        {{#if this.showGeneral}}
+          <p class='info-content-label'>Problem Statement</p>
+          <div class='info-content-block statement large-content'>
+            {{#if @isEditing}}
+              {{! The starting text is from the argument; we change the local value }}
+              <QuillContainer
+                @onEditorChange={{this.updateQuillText}}
+                @startingText={{@problem.text}}
+              />
+            {{else}}
+              {{make-html-safe @problem.text}}
+            {{/if}}
+          </div>
           <p class='info-content-label'>Author</p>
           <div class='info-content-block author'>
-            {{#if @problem.author}}
-              <div class='input-container'>
-                <Input
-                  name='author'
-                  id='author'
-                  @type='text'
-                  @value={{this.author}}
-                />
-              </div>
-            {{else}}
-              <div class='input-container'>
-                <Input
-                  name='author'
-                  id='author'
-                  @type='text'
-                  placeholder='Add author'
-                  @value={{this.author}}
-                />
+            <Ui::FormField
+              @isEditing={{@isEditing}}
+              @type='text'
+              @value={{this.problem.author}}
+              @onChange={{fn this.handleChange 'author'}}
+              @placeholder='Add author'
+            />
+          </div>
+          {{#if @problem.organization}}
+            {{#if this.user.isAdmin}}
+              <p class='info-content-label'>Organization</p>
+              <div class='info-content-block org'>
+                {{#if @problem.organization}}
+                  {{@problem.organization.name}}
+                {{/if}}
               </div>
             {{/if}}
-          </div>
-        {{else}}
-          {{#if @problem.author}}
-            <p class='info-content-label'>Author</p>
-            <div class='info-content-block author'>
-              {{@problem.author}}
-            </div>
-          {{/if}}
-        {{/if}}
-        {{#if @problem.organization}}
-          {{#if @currentUser.isAdmin}}
-            <p class='info-content-label'>Organization</p>
-            <div class='info-content-block org'>
-              {{#if @problem.organization}}
-                {{@problem.organization.name}}
-              {{/if}}
-            </div>
           {{/if}}
-        {{/if}}
-        <p class='info-content-label'>Problem Status</p>
-        <div class='info-content-block'>
-          {{#if this.isEditing}}
-            {{#if @currentUser.isTeacher}}
-              <svg height='20' width='20'>
-                <circle
-                  cx='10'
-                  cy='15'
-                  r='5'
-                  fill={{this.statusIconFill}}
-                ></circle>
-              </svg>
-              <span class='status-text'>
-                {{@problem.status}}
-              </span>
-            {{else}}
-              <svg height='20' width='20'>
-                <circle
-                  cx='10'
-                  cy='15'
-                  r='5'
-                  fill={{this.statusIconFill}}
-                ></circle>
-              </svg>
-              <MySelect
-                @cannotBeNull={{true}}
-                @selectedValue={{@problem.status}}
-                @content={{this.problemStatusOptions}}
-                @action={{action (mut this.problemStatus)}}
-                @isDisabled={{this.isReadOnly}}
-              />
-            {{/if}}
-          {{else}}
+
+          <p class='info-content-label'>Problem Status</p>
+          <div class='info-content-block'>
             <svg height='20' width='20'>
               <circle
                 cx='10'
@@ -163,416 +107,380 @@
                 fill={{this.statusIconFill}}
               ></circle>
             </svg>
-            <span class='status-text'>
-              {{@problem.status}}
-            </span>
-            {{#if (is-equal @problem.status 'flagged')}}
-              {{#if this.showFlagReason}}
-                <span
-                  class='show-reason'
-                  {{action 'toggleShowFlagReason'}}
-                >Hide</span>
-                <div class='flag-reason'>
-                  <p class='reason'><strong>Reason:</strong>
-                    {{@problem.flagReason.reason}}</p>
-                  <p class='details'>By
-                    <LinkTo
-                      @route='users.user'
-                      @model={{@flaggedBy.id}}
-                    >{{@flaggedBy.username}}</LinkTo>
-                    on
-                    {{format-date @flaggedDate 'MMM Do YYYY'}}</p>
-                </div>
-              {{else}}
-                <span
-                  class='show-reason'
-                  {{on 'click' this.toggleShowFlagReason}}
-                >Why?</span>
-              {{/if}}
+
+            {{#if this.canEditStatus}}
+              <Ui::MySelect
+                @cannotBeNull={{true}}
+                @selectedValue={{this.problem.status}}
+                @content={{this.problemStatusOptions}}
+                @action={{(fn this.handleChange 'status')}}
+              />
+            {{else}}
+              <span class='status-text'>
+                {{@problem.status}}
+              </span>
             {{/if}}
-          {{/if}}
-        </div>
-      {{/if}}
+            {{#unless @isEditing}}
+              {{#if (is-equal @problem.status 'flagged')}}
+                {{#if this.showFlagReason}}
+                  <span
+                    class='show-reason'
+                    {{on 'click' this.toggleShowFlagReason}}
+                  >Hide</span>
+                  <div class='flag-reason'>
+                    <p class='reason'><strong>Reason:</strong>
+                      {{@problem.flagReason.reason}}</p>
+                    <p class='details'>By
+                      <LinkTo
+                        @route='users.user'
+                        @model={{@flaggedBy.id}}
+                      >{{@flaggedBy.username}}</LinkTo>
+                      on
+                      {{format-date @flaggedDate 'MMM Do YYYY'}}</p>
+                  </div>
+                {{else}}
+                  <span
+                    class='show-reason'
+                    {{on 'click' this.toggleShowFlagReason}}
+                  >Why?</span>
+                {{/if}}
+              {{/if}}
+            {{/unless}}
+          </div>
+        {{/if}}
 
-      {{#if this.showCats}}
-        <p class='info-content-label'>Problem Categories</p>
-        <div class='info-content-block categories'>
-          {{#if this.isEditing}}
-            {{#if @problem.categories}}
-              <ul>
-                {{#each @problem.categories as |category|}}
-                  <li class='category-item'>
-                    <a
-                      href='{{category.url}}'
-                      target='_blank' rel="noopener noreferrer"
-                    >{{category.identifier}}</a>
-                    <button
-                      class='remove-cat' type="button" {{action 'removeCategory' category}}
-                    ><i class='far fa-times-circle'></i></button>
-                    <p class='category-description'>{{category.description}}</p>
-                  </li>
-                {{/each}}
-              </ul>
-              {{#unless this.showCategories}}
-                <div class='button-row-list'>
-                  <button
-                    class='cancel-button' type="button" {{action 'toggleCategories'}}
-                  >Add Categories</button>
-                </div>
-              {{/unless}}
-              {{#if this.showCategories}}
-                <div class='button-row-list'>
-                  <button
-                    class='cancel-button' type="button" {{action 'toggleCategories'}}
-                  >Hide Categories</button>
-                </div>
-                <CategoriesMenu
-                  @categories={{this.categoryTree}}
-                  @store={{this.store}}
-                  @addCategories='addCategories'
-                />
+        {{! Categories tab}}
+        {{#if this.showCats}}
+          <p class='info-content-label'>Problem Categories</p>
+          <div class='info-content-block categories'>
+            {{#if @isEditing}}
+              {{#if this.problem.categories}}
+                <ul>
+                  {{#each this.problem.categories as |category|}}
+                    <li class='category-item'>
+                      <a
+                        href='{{category.url}}'
+                        target='_blank'
+                        rel='noopener noreferrer'
+                      >{{category.identifier}}</a>
+                      <button
+                        class='remove-cat'
+                        type='button'
+                        {{on 'click' (fn this.removeCategory category)}}
+                      ><i class='far fa-times-circle'></i></button>
+                      <p
+                        class='category-description'
+                      >{{category.description}}</p>
+                    </li>
+                  {{/each}}
+                </ul>
               {{/if}}
-            {{else}}
-              {{#unless this.showCategories}}
-                <div class='button-row'>
-                  <button
-                    class='cancel-button' type="button" {{action 'toggleCategories'}}
-                  >Add Categories</button>
-                </div>
-              {{/unless}}
+              <div class='button-row-list'>
+                <button
+                  class='cancel-button'
+                  type='button'
+                  {{on 'click' this.toggleCategories}}
+                >{{if
+                    this.showCategories
+                    'Hide Categories'
+                    'Add Categories'
+                  }}</button>
+              </div>
               {{#if this.showCategories}}
-                <div class='button-row'>
-                  <button
-                    class='cancel-button' type="button" {{action 'toggleCategories'}}
-                  >Hide Categories</button>
-                </div>
-                {{#if this.categoryTree}}
-                  <CategoriesMenu
-                    @categories={{this.categoryTree}}
-                    @store={{this.store}}
-                    @addCategories='addCategories'
-                  />
-                {{/if}}
+                <CategoriesMenu @addCategory={{this.addCategory}} />
               {{/if}}
-            {{/if}}
-          {{else}}
-            {{#if @problem.categories}}
-              <ul>
-                {{#each @problem.categories as |category|}}
-                  <li class='category-item'>
-                    <a
-                      href='{{category.url}}'
-                      target='_blank' rel="noopener noreferrer"
-                    >{{category.identifier}}</a>
-                    <p class='category-description'>{{category.description}}</p>
-                  </li>
-                {{/each}}
-              </ul>
             {{else}}
-              No Problem Categories
+              {{#if @problem.categories}}
+                <ul>
+                  {{#each @problem.categories as |category|}}
+                    <li class='category-item'>
+                      <a
+                        href='{{category.url}}'
+                        target='_blank'
+                        rel='noopener noreferrer'
+                      >{{category.identifier}}</a>
+                      <p
+                        class='category-description'
+                      >{{category.description}}</p>
+                    </li>
+                  {{/each}}
+                </ul>
+              {{else}}
+                No Problem Categories
+              {{/if}}
             {{/if}}
-          {{/if}}
-        </div>
-        <p class='info-content-label'>Problem Keywords</p>
-        <div class='info-content-block keywords'>
-          {{#if this.isEditing}}
-            <SelectizeInput
-              @inputId='select-edit-keywords'
-              @onItemAdd={{action 'updateKeywords'}}
-              @onItemRemove={{action 'updateKeywords'}}
-              @maxItems={{5}}
-              @create={{true}}
-              @createFilter={{this.keywordFilter}}
-              @persist={{false}}
-              @initialItems={{@problem.keywords}}
-              @initialOptions={{this.keywordSelectOptions}}
-              @labelField='label'
-              @valueField='value'
-            />
-          {{else}}
-            {{#if @problem.keywords}}
-              <ul>
-                {{#each @problem.keywords as |keyword|}}
-                  <li>
-                    {{keyword}}
-                  </li>
-                {{/each}}
-              </ul>
+          </div>
+          <p class='info-content-label'>Problem Keywords</p>
+          <div class='info-content-block keywords'>
+            {{#if @isEditing}}
+              <SelectizeInput
+                @inputId='select-edit-keywords'
+                @onItemAdd={{this.updateKeywords}}
+                @onItemRemove={{this.updateKeywords}}
+                @maxItems={{5}}
+                @create={{true}}
+                @createFilter={{this.keywordFilter}}
+                @persist={{false}}
+                @initialItems={{@problem.keywords}}
+                @initialOptions={{this.keywordSelectOptions}}
+                @labelField='label'
+                @valueField='value'
+              />
             {{else}}
-              No Problem Keywords
+              {{#if @problem.keywords}}
+                <ul>
+                  {{#each @problem.keywords as |keyword|}}
+                    <li>
+                      {{keyword}}
+                    </li>
+                  {{/each}}
+                </ul>
+              {{else}}
+                No Problem Keywords
+              {{/if}}
             {{/if}}
-          {{/if}}
-
-        </div>
-      {{/if}}
+          </div>
+        {{/if}}
 
-      {{#if this.showAdditional}}
-        <p class='info-content-label'>Additional Info</p>
-        {{#if this.isEditing}}
+        {{! Additional tab}}
+        {{#if this.showAdditional}}
+          <p class='info-content-label'>Additional Info</p>
           <div class='info-content-block additional'>
             <div class='input-container'>
-              <Textarea
-                class='additional-info-area'
-                @value={{this.additionalInfo}}
-                rows='4'
-                placeholder='Additional info...'
-              />
-              <Input
-                id='additionalInfo'
-                @type='hidden'
-                @value={{this.additionalInfo}}
+              <Ui::FormField
+                @isEditing={{@isEditing}}
+                @type='textarea'
+                @value={{this.problem.additionalInfo}}
+                @onChange={{fn this.handleChange 'additionalInfo'}}
+                @placeholder='Additional info...'
+                className='additional-info-area'
               />
             </div>
           </div>
-        {{else}}
-          <div class='info-content-block large-content additional'>
-            {{#if @problem.additionalInfo}}
-              {{{@problem.additionalInfo}}}
-            {{else}}
-              No Additional Info
-            {{/if}}
-          </div>
-        {{/if}}
-        <p class='info-content-label'>Additional Image</p>
-        <div class='info-content-block image'>
-          {{#if @problem.image}}
-            <a {{action 'toggleImageSize'}}>
-              <img
-                src='{{@problem.image.imageData}}'
-                alt='Image Error'
-                class='additional-image {{if this.isWide 'wide'}}'
-              />
-            </a>
-          {{else}}
-            {{#unless this.isEditing}}
-              No Additional Image
-            {{/unless}}
-          {{/if}}
-          {{#if this.isEditing}}
+
+          <p class='info-content-label'>Additional Image</p>
+          <div class='info-content-block image'>
             {{#if @problem.image}}
               <button
-                class='edit-image-btn' type="button" {{action 'deleteImage'}}
-              >Delete</button>
-            {{else}}
-              <div class='input-container' id='image-upload'>
-                <ImageUpload
-                  @filesToBeUploaded={{this.filesToBeUploaded}}
-                  @hideSubmit={{true}}
+                type='button'
+                class='image-toggle-btn'
+                {{on 'click' this.toggleImageSize}}
+              >
+                <img
+                  src={{@problem.image.imageData}}
+                  alt='Additional Image'
+                  class='additional-image {{if this.isWide "wide"}}'
                 />
-              </div>
+              </button>
+            {{else}}
+              {{#unless @isEditing}}
+                No Additional Image
+              {{/unless}}
+            {{/if}}
+            {{#if @isEditing}}
+              {{#if @problem.image}}
+                <button
+                  class='edit-image-btn'
+                  type='button'
+                  {{on 'click' this.deleteImage}}
+                >Delete</button>
+              {{else}}
+                <div class='input-container' id='image-upload'>
+                  <ImageUpload
+                    @filesToBeUploaded={{this.filesToBeUploaded}}
+                    @hideSubmit={{true}}
+                  />
+                </div>
+              {{/if}}
             {{/if}}
-          {{/if}}
-        </div>
-        {{#if @problem.origin}}
-          <p class='info-content-label'>Problem Origin</p>
-          <div class='info-content-block origin'>
-            <p><LinkTo
-                @route='problems.problem'
-                @model={{@problem.origin.id}}
-              >{{@problem.origin.title}}</LinkTo></p>
-          </div>
-        {{/if}}
-        {{#if @currentUser.isAdmin}}
-          <p class='info-content-label'>Created By</p>
-          <div class='info-content-block creator'>
-            <p><LinkTo
-                @route='users.user'
-                @model={{@problem.createdBy.id}}
-              >{{@problem.createdBy.username}}</LinkTo></p>
           </div>
+          {{#if @problem.origin}}
+            <p class='info-content-label'>Problem Origin</p>
+            <div class='info-content-block origin'>
+              <p><LinkTo
+                  @route='problems.problem'
+                  @model={{@problem.origin.id}}
+                >{{@problem.origin.title}}</LinkTo></p>
+            </div>
+          {{/if}}
+          {{#if this.user.isAdmin}}
+            <p class='info-content-label'>Created By</p>
+            <div class='info-content-block creator'>
+              <p><LinkTo
+                  @route='users.user'
+                  @model={{@problem.createdBy.id}}
+                >{{@problem.createdBy.username}}</LinkTo></p>
+            </div>
+          {{/if}}
         {{/if}}
-      {{/if}}
 
-      {{#if this.showLegal}}
-        <p class='info-content-label'>Copyright Notice</p>
-        <div class='info-content-block copyright'>
-          {{#if this.isEditing}}
-            <div class='input-container' id='copyright-container'>
-              <span id='icon'>&copy;</span>
-              <Input
-                name='copyright'
-                id='copyright'
-                @type='text'
-                @value={{this.copyrightNotice}}
-                placeholder='Add Copyright Notice'
-              />
-            </div>
-          {{else}}
-            {{#if @problem.copyrightNotice}}
-              <p>&copy; {{@problem.copyrightNotice}}</p>
+        {{#if this.showLegal}}
+          <p class='info-content-label'>Copyright Notice</p>
+          <div class='info-content-block copyright'>
+            {{#if @isEditing}}
+              <div class='input-container' id='copyright-container'>
+                <span id='icon'>&copy;</span>
+                <Input
+                  name='copyright'
+                  id='copyright'
+                  @type='text'
+                  @value={{this.copyrightNotice}}
+                  placeholder='Add Copyright Notice'
+                />
+              </div>
             {{else}}
-              No Copyright Notice
+              {{#if @problem.copyrightNotice}}
+                <p>&copy; {{@problem.copyrightNotice}}</p>
+              {{else}}
+                No Copyright Notice
+              {{/if}}
             {{/if}}
-          {{/if}}
-        </div>
-        <p class='info-content-label'>Sharing Authorization</p>
-        <div class='info-content-block sharing'>
-          {{#if this.isEditing}}
+          </div>
+          <p class='info-content-label'>Sharing Authorization</p>
+          <div class='info-content-block sharing'>
             <div class='input-container'>
-              <Input
-                name='sharing'
-                id='sharing'
+              <Ui::FormField
+                @isEditing={{@isEditing}}
                 @type='text'
-                @value={{this.sharingAuth}}
-                placeholder='Add Sharing Authorization'
+                @value={{this.problem.sharingAuth}}
+                @onChange={{fn this.handleChange 'sharingAuth'}}
+                @placeholder='Add Sharing Authorization'
               />
             </div>
-          {{else}}
-            {{#if @problem.sharingAuth}}
-              {{@problem.sharingAuth}}
-            {{else}}
-              No Sharing Authorization
-            {{/if}}
-          {{/if}}
-        </div>
-      {{/if}}
-    </div>
-  </section>
+          </div>
+        {{/if}}
+      </div>
+    </section>
 
-  <section class='info-actions'>
-    <div class='buttons-container'>
-      <span class='left-buttons'>
-        {{#if this.isEditing}}
-          {{#unless @problem.isTrashed}}
-            <button class='button-icon' type="button" {{on 'click' this.deleteProblem}}><i
-                class='fas fa-trash'
-              ></i></button>
-          {{/unless}}
-        {{else}}
-          <span
-            class='info-text-tip simptip-position-right simptip-smooth'
-            data-tooltip='Make a Copy of this Problem'
-          >
-            <button class='button-icon' type="button" {{action 'addToMyProblems'}}><i
-                class='far fa-copy'
-              ></i></button>
-          </span>
-          {{#unless @currentUser.isTeacher}}
+    <section class='info-actions'>
+      <div class='buttons-container'>
+        <span class='left-buttons'>
+          {{#if @isEditing}}
             {{#unless @problem.isTrashed}}
-              {{#if (not (is-equal @problem.status 'flagged'))}}
-                {{#if this.isRecommended}}
-                  <span
-                    class='info-text-tip simptip-position-right simptip-smooth'
-                    data-tooltip='Remove this Problem from Recommended'
-                  >
-                    <button
-                      class='button-icon star-icon' type="button" {{action 'removeRecommend'}}
+              <button
+                class='button-icon'
+                type='button'
+                {{on 'click' this.deleteProblem}}
+              ><i class='fas fa-trash'></i></button>
+            {{/unless}}
+          {{else}}
+            <span
+              class='info-text-tip simptip-position-right simptip-smooth'
+              data-tooltip='Make a Copy of this Problem'
+            >
+              <button
+                class='button-icon'
+                type='button'
+                {{on 'click' this.addToMyProblems}}
+              ><i class='far fa-copy'></i></button>
+            </span>
+            {{#unless this.user.isTeacher}}
+              {{#unless @problem.isTrashed}}
+                {{#if this.notFlagged}}
+                  {{#if this.isRecommended}}
+                    <span
+                      class='info-text-tip simptip-position-right simptip-smooth'
+                      data-tooltip='Remove this Problem from Recommended'
                     >
-                      <i class='fas fa-star star-filled'></i>
-                    </button>
-                  </span>
-                {{else}}
-                  <span
-                    class='info-text-tip simptip-position-right simptip-smooth'
-                    data-tooltip='Add this Problem to Recommended'
-                  >
-                    <button
-                      class='button-icon star-icon' type="button" {{action 'checkRecommend'}}
+                      <button
+                        class='button-icon star-icon'
+                        type='button'
+                        {{on 'click' this.removeRecommend}}
+                      >
+                        <i class='fas fa-star star-filled'></i>
+                      </button>
+                    </span>
+                  {{else}}
+                    <span
+                      class='info-text-tip simptip-position-right simptip-smooth'
+                      data-tooltip='Add this Problem to Recommended'
                     >
-                      <i class='far fa-star star-line'></i>
-                    </button>
-                  </span>
+                      <button
+                        class='button-icon star-icon'
+                        type='button'
+                        {{on 'click' this.checkRecommend}}
+                      >
+                        <i class='far fa-star star-line'></i>
+                      </button>
+                    </span>
+                  {{/if}}
                 {{/if}}
-              {{/if}}
+              {{/unless}}
             {{/unless}}
-          {{/unless}}
-          {{#if @currentUser.isTeacher}}
-            {{#if this.isRecommended}}
-              <button class='button-icon star-icon no-cursor' type="button">
-                <i class='fas fa-star star-filled'></i>
-              </button>
+            {{#if this.user.isTeacher}}
+              {{#if this.isRecommended}}
+                <button class='button-icon star-icon no-cursor' type='button'>
+                  <i class='fas fa-star star-filled'></i>
+                </button>
+              {{/if}}
             {{/if}}
           {{/if}}
-        {{/if}}
-      </span>
-      <span class='right-buttons'>
-        {{#if this.isEditing}}
-          <button
-            class='action_button cancel-button' type="button" {{action 'cancelEdit'}}
-          >Cancel</button>
-          <button
-            class='primary-button save' type="button" {{action 'checkPrivacy'}}
-          >Save</button>
-        {{else}}
-          {{#if this.writePermissions.canEdit}}
-            {{#if @problem.isUsed}}
-              {{#if @currentUser.isAdmin}}
-                <button
-                  class='primary-button edit' type="button" {{action 'editProblem'}}
-                >Edit</button>
-              {{/if}}
-            {{else}}
+        </span>
+        <span class='right-buttons'>
+          {{#if @isEditing}}
+            <LinkTo
+              @route='problems.problem'
+              @model={{@problem.id}}
+              @query={{hash tab=this.activeTab}}
+              class='action_button cancel-button'
+              role='button'
+            >
+              Cancel
+            </LinkTo>
+
+            <button
+              class='primary-button save'
+              type='button'
+              {{on 'click' this.updateProblem}}
+            >Save</button>
+          {{else}}
+            {{#if this.writePermissions.canEdit}}
               <button
-                class='primary-button edit' type="button" {{action 'editProblem'}}
+                class='primary-button edit'
+                type='button'
+                {{on 'click' this.editProblem}}
               >Edit</button>
             {{/if}}
+            {{#unless @problem.isTrashed}}
+              {{#if this.notFlagged}}
+                <button
+                  class='primary-button assign'
+                  type='button'
+                  {{on 'click' this.toggleAssignment}}
+                >Assign</button>
+              {{/if}}
+            {{/unless}}
           {{/if}}
-          {{#unless @problem.isTrashed}}
-            {{#if (not (is-equal @problem.status 'flagged'))}}
-              <button
-                class='primary-button assign' type="button" {{action 'toggleAssignment'}}
-              >Assign</button>
+          {{#if @problem.isTrashed}}
+            {{#if this.user.isAdmin}}
+              {{#unless @isEditing}}
+                <button
+                  class='primary-button restore'
+                  type='button'
+                  {{on 'click' this.restoreProblem}}
+                >Restore</button>
+              {{/unless}}
             {{/if}}
-          {{/unless}}
-        {{/if}}
-        {{#if @problem.isTrashed}}
-          {{#if @currentUser.isAdmin}}
-            {{#unless this.isEditing}}
-              <button
-                class='primary-button restore' type="button" {{action 'restoreProblem'}}
-              >Restore</button>
-            {{/unless}}
           {{/if}}
-        {{/if}}
-      </span>
-    </div>
-  </section>
-  {{#if this.isMissingRequiredFields}}
-    <ErrorBox
-      @error='Please fill in all required fields'
-      @showDismiss={{true}}
-    />
-  {{/if}}
-
-  {{#each this.updateProblemErrors as |error|}}
-    <ErrorBox
-      @error={{error}}
-      @showDismiss={{true}}
-      @resetError={{action (mut this.updateProblemErrors) null}}
-    />
-  {{/each}}
-  {{#each this.imageUploadErrors as |error|}}
-    <ErrorBox
-      @error={{error}}
-      @showDismiss={{true}}
-      @resetError={{action (mut this.imageUploadErrors) null}}
-    />
-  {{/each}}
-  {{#each this.createRecordErrors as |error|}}
-    <ErrorBox
-      @error={{error}}
-      @showDismiss={{true}}
-      @resetError={{action (mut this.createRecordErrors) null}}
-    />
-  {{/each}}
-  {{#each this.findRecordErrors as |error|}}
-    <ErrorBox
-      @error={{error}}
-      @showDismiss={{true}}
-      @resetError={{action (mut this.findRecordErrors) null}}
-    />
-  {{/each}}
+        </span>
+      </div>
+    </section>
+    {{#if this.isMissingRequiredFields}}
+      <Ui::ErrorBox
+        @error='Please fill in all required fields'
+        @showDismiss={{true}}
+      />
+    {{/if}}
 
-  {{#if this.showAssignment}}
-    <AssignmentNew
-      @currentUser={{@currentUser}}
-      @cancel={{action (mut this.showAssignment) null}}
-      @fromProblemInfo={{true}}
-      @problems={{this.problemList}}
-      @selectedProblem={{@problem}}
-      @sections={{@sectionList}}
-      @store={{this.store}}
-      @toAssignmentInfo='toAssignmentInfo'
-    />
-  {{/if}}
+    {{#each this.errors as |error|}}
+      <Ui::ErrorBox
+        @error={{error}}
+        @showDismiss={{true}}
+        @resetError={{this.resetErrors}}
+      />
+    {{/each}}
+    <div id='problem-info-outlet'>
+      {{outlet}}
+    </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/app/components/problem-info.js b/app/components/problem-info.js
index 0825aee79..3f12f8f96 100644
--- a/app/components/problem-info.js
+++ b/app/components/problem-info.js
@@ -1,89 +1,97 @@
-import ErrorHandlingComponent from './error-handling';
+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 $ from 'jquery';
-
-export default class ProblemInfoComponent extends ErrorHandlingComponent {
-  @tracked isEditing = false;
-  @tracked showGeneral = true;
-  @tracked problemName = null;
-  @tracked problemText = null;
-  @tracked problemPublic = true;
-  @tracked privacySetting = null;
-  @tracked savedProblem = null;
-  @tracked showFlagReason = false;
-  @tracked isWide = false;
-  @tracked checked = true;
-  @tracked filesToBeUploaded = null;
-  @tracked isProblemUsed = false;
-  @tracked showAssignment = false;
-  @tracked problemList = [];
-  @tracked sectionList = null;
-  @tracked updateProblemErrors = [];
-  @tracked imageUploadErrors = [];
-  @tracked findRecordErrors = [];
-  @tracked createRecordErrors = [];
-  @tracked isMissingRequiredFields = null;
-  @tracked showCategories = false;
-  @tracked showGeneral = true;
-  @tracked showCats = false;
-  @tracked showAdditional = false;
-  @tracked showLegal = false;
-  @tracked categoryTree = {};
+import _isEqual from 'lodash/isEqual';
+import _isNull from 'lodash/isNull';
+import { service } from '@ember/service';
+
+export default class ProblemInfoComponent extends Component {
   @service('sweet-alert') alert;
   @service('problem-permissions') permissions;
+  @service problemUtils;
   @service('utility-methods') utils;
   @service store;
   @service router;
-  @tracked copyrightNotice = '';
-  @tracked sharingAuth = '';
-  @tracked author = '';
-  @tracked problemName = '';
-  @tracked problemText = '';
-  @tracked organization = '';
-  @tracked problemCategories = '';
-  @tracked problemStatus = '';
-  @tracked additionalInfo = '';
-  @tracked privacySetting = '';
-  @tracked sharingAuth = '';
-  @tracked privacySettingIcon = '';
+  @service currentUser;
+  @service errorHandling;
+  @tracked problem = {};
+  @tracked showFlagReason = false;
+  @tracked showCategories = false;
+  @tracked isWide = false;
+  @tracked filesToBeUploaded = null;
+  @tracked isMissingRequiredFields = false;
+
+  get tabs() {
+    return [
+      { label: 'General', key: 'general' },
+      { label: 'Categories', key: 'categories' },
+      { label: 'Additional', key: 'additional' },
+      { label: 'Legal', key: 'legal' },
+    ];
+  }
+
+  get showGeneral() {
+    return this.activeTab === 'general';
+  }
+
+  get showCats() {
+    return this.activeTab === 'categories';
+  }
+
+  get showAdditional() {
+    return this.activeTab === 'additional';
+  }
+
+  get showLegal() {
+    return this.activeTab === 'legal';
+  }
+
+  get activeTab() {
+    const tabValue = this.args.tab; // could be undefined if no query param
+    const validTabs = this.tabs.map((tab) => tab.key);
+    if (!validTabs.includes(tabValue)) {
+      return 'general';
+    }
+    return tabValue;
+  }
+
   constructor() {
     super(...arguments);
-    $('.list-outlet').removeClass('hidden');
-    if (this.args.problem.isForAssignment) {
-      this.showAssignment = true;
-    }
-    if (this.args.problem.isForEdit) {
-      this.isEditing = true;
-      this.privacySettingIcon = this.args.problem.privacySetting;
-      this.copyrightNotice = this.args.problem.copyrightNotice;
-      this.sharingAuth = this.args.problem.sharingAuth;
-      this.author = this.args.problem.author;
-      this.problemName = this.args.problem.title;
-      this.problemText = this.args.problem.text;
-      this.organization = this.args.problem.organization;
-      this.problemCategories = this.args.problem.categories;
-      this.problemStatus = this.args.problem.status;
-      this.additionalInfo = this.args.problem.additionalInfo;
-      this.privacySetting = this.args.problem.privacySetting;
-      this.sharingAuth = this.args.problem.sharingAuth;
-      this.privacySettingIcon = this.args.problem.privacySetting;
+    const outletEl = document.getElementById('outlet');
+    if (outletEl) {
+      outletEl.classList.remove('hidden');
     }
+    this.loadLocalProblem();
+  }
+
+  // use @action to mark that this function is called by a lifecycle hook and ensure that 'this' is the component.
+  // updates the local problem object with the properties of the problem passed in as an argument when:
+  // a. the component is first rendered
+  // b. the problem passed in as an argument changes
+  @action
+  async loadLocalProblem() {
+    this.problem = await this.problemUtils.extractEditableProperties(
+      this.args.problem
+    );
+  }
+
+  get user() {
+    return this.currentUser.user;
+  }
+
+  get notFlagged() {
+    return this.problem.status !== 'flagged';
   }
   get writePermissions() {
     return this.permissions.writePermissions(this.args.problem);
   }
-  get parentActions() {
-    return this.parentView.actions;
+
+  get errors() {
+    return this.errorHandling.getErrors(this.errorLabel);
   }
-  get flaggedBy() {
-    if (!this.args.problem.get('flagReason.flaggedBy')) return '';
-    return this.store.findRecord(
-      'user',
-      this.args.problem.get('flagReason.flaggedBy')
-    );
+
+  get errorLabel() {
+    return 'problemInfoErrors';
   }
   iconFillOptions = {
     approved: '#35A853',
@@ -98,21 +106,16 @@ export default class ProblemInfoComponent extends ErrorHandlingComponent {
     other: 'Other Reason',
   };
   get statusIconFill() {
-    let status = this.args.problem.status;
+    let status = this.problem.status;
     return this.iconFillOptions[status];
   }
 
+  get canEditStatus() {
+    return !this.user.isTeacher && this.args.isEditing;
+  }
+
   resetErrors() {
-    let errors = [
-      'updateProblemErrors',
-      'imageUploadErrors',
-      'isMissingRequiredFields',
-    ];
-    for (let error of errors) {
-      if (this[error]) {
-        this[error] = null;
-      }
-    }
+    this.errorHandling.removeMessages(this.errorLabel);
   }
   // Empty quill editor .html() property returns <p><br></p>
   // For quill to not be empty, there must either be some text or
@@ -122,330 +125,224 @@ export default class ProblemInfoComponent extends ErrorHandlingComponent {
   }
 
   get keywordSelectOptions() {
-    let keywords = this.args.problem.keywords;
-    if (!_.isArray(keywords)) {
+    let keywords = this.problem.keywords;
+    if (!Array.isArray(keywords)) {
       return [];
     }
-    return _.map(keywords, (keyword) => {
-      return {
-        value: keyword,
-        label: keyword,
-      };
-    });
+    return keywords.map((keyword) => ({
+      value: keyword,
+      label: keyword,
+    }));
   }
   get isRecommended() {
     let problem = this.args.problem;
-    let recommendedProblems = this.args.recommendedProblems.toArray() || [];
-    if (recommendedProblems.includes(problem)) {
-      return true;
-    } else {
-      return false;
-    }
+    let recommendedProblems = this.args.recommendedProblems.slice() || [];
+    return recommendedProblems.includes(problem);
   }
 
   createKeywordFilter(keyword) {
     if (!keyword) {
-      return;
+      return false;
     }
-    let keywords = $('#select-edit-keywords')[0].selectize.items;
-    let keywordLower = keyword.trim().toLowerCase();
 
-    let keywordsLower = _.map(keywords, (key, val) => {
-      return key.toLowerCase();
-    });
+    // Grab the element without jQuery
+    const selectEl = document.getElementById('select-edit-keywords');
+    if (!selectEl || !selectEl.selectize) {
+      // Fallback if the element or selectize instance isn't found
+      return true;
+    }
+
+    // Get the selected items array (strings/IDs)
+    const items = selectEl.selectize.items;
+
+    // Lowercase the new keyword
+    const keywordLower = keyword.trim().toLowerCase();
 
-    // don't let user create keyword if it matches exactly an existing keyword
-    return !_.contains(keywordsLower, keywordLower);
+    // Convert each selected item to lowercase
+    const itemsLower = items.map((item) => item.toLowerCase());
+
+    // Return true if the new keyword does NOT already exist
+    return !itemsLower.includes(keywordLower);
   }
 
   continueEdit() {
-    this.showEditWarning = false;
-    this.isEditing = true;
-    let problem = this.args.problem;
-    this.problemName = problem.title;
-    this.problemText = problem.text;
-    this.privacySetting = problem.privacySetting;
+    this.router.transitionTo('problems.edit', this.args.problem.id, {
+      queryParams: { tab: this.activeTab },
+    });
   }
 
-  setStatus() {
-    let problem = this.args.problem;
-    let currentUser = this.args.currentUser;
-    let accountType = currentUser.get('accountType');
-    let privacy = this.privacySetting;
-    let originalPrivacy = problem.get('privacySetting');
-    let status;
-
-    if (originalPrivacy !== privacy) {
+  adjustStatus(originalPrivacy, newPrivacy, accountType) {
+    if (originalPrivacy !== newPrivacy) {
       if (accountType === 'A') {
-        status = this.problemStatus;
+        return this.problem.status;
       } else if (accountType === 'P') {
-        if (privacy === 'E') {
-          status = 'pending';
+        if (newPrivacy === 'E') {
+          return 'pending';
         } else {
-          status = this.problemStatus;
+          return this.problem.status;
         }
       } else {
-        if (privacy === 'M') {
-          status = 'approved';
+        if (newPrivacy === 'M') {
+          return 'approved';
         } else {
-          status = 'pending';
+          return 'pending';
         }
       }
     } else {
-      status = this.problemStatus;
+      return this.problem.status;
     }
+  }
 
-    this.generatedStatus = status;
+  @action
+  async updateProblem() {
+    const isPrivacyOk = await this.checkPrivacy(
+      this.args.problem.privacySetting,
+      this.problem.privacySetting
+    );
 
-    if (accountType === 'A' || accountType === 'P') {
-      this.checkStatus();
-    } else {
-      return this.updateProblem();
+    if (!isPrivacyOk) {
+      return;
     }
-  }
 
-  updateProblem() {
-    let problem = this.args.problem;
-    let currentUser = this.args.currentUser;
-    let title = this.problemName.trim();
-    const quillContent = $('.ql-editor').html();
-    let text;
-    let isQuillValid;
-
-    if (quillContent !== undefined) {
-      text = quillContent.replace(/["]/g, "'");
-      isQuillValid = this.isQuillValid();
+    const currentStatus = this.args.problem.status;
+    const newStatus = this.adjustStatus(
+      this.args.problem.status,
+      this.problem.status,
+      this.user.accountType
+    );
+
+    if (currentStatus !== 'flagged' && newStatus === 'flagged') {
+      const { isStatusOk, flaggedReason } = await this.handleFlaggedStatus();
+      if (!isStatusOk) {
+        return;
+      }
+      this.problem.flagReason = flaggedReason;
     } else {
-      text = problem.get('text');
-      isQuillValid = true;
+      this.problem.flagReason = null;
     }
-    let privacy = this.privacySetting;
-    let additionalInfo = this.additionalInfo;
-    let copyright = this.copyrightNotice;
-    let sharingAuth = this.sharingAuth;
-
-    let keywords = problem.get('keywords');
-    let initialKeywords = this.initialKeywords;
-    let didKeywordsChange = !_.isEqual(keywords, initialKeywords);
 
-    let flaggedReason = this.flaggedReason;
+    // adjust properties of the local copy of the problem
+    this.problem.title = this.problem.title.trim();
 
-    let author = this.author;
-    let status = this.generatedStatus;
+    this.problem.text = (this.problem.text || '').replace(/["]/g, "'");
 
-    if (!title || !isQuillValid || !privacy) {
+    if (
+      !this.problem.title ||
+      !this.isQuillValid ||
+      !this.problem.privacySetting
+    ) {
       this.isMissingRequiredFields = true;
       return;
     } else {
-      if (this.isMissingRequiredFields) {
-        this.isMissingRequiredFields = null;
-      }
+      this.isMissingRequiredFields = false;
     }
 
-    if (privacy !== null) {
-      problem.set('privacySetting', privacy);
+    const uploadResults = this.filesToBeUploaded
+      ? await this.uploadFiles(this.filesToBeUploaded)
+      : null;
+
+    if (uploadResults) {
+      const image = await this.store.findRecord('image', uploadResults[0]._id);
+      this.problem.image = image;
     }
 
-    problem.set('title', title);
-    problem.set('text', text);
-    problem.set('additionalInfo', additionalInfo);
-    problem.set('copyrightNotice', copyright);
-    problem.set('sharingAuth', sharingAuth);
-    problem.set('author', author);
-    problem.set('status', status);
-    problem.set('flagReason', flaggedReason);
-
-    if (this.filesToBeUploaded) {
-      var uploadData = this.filesToBeUploaded;
-      var formData = new FormData();
-      for (let f of uploadData) {
-        formData.append('photo', f);
-      }
-      let firstItem = uploadData[0];
-      let isPDF = firstItem.type === 'application/pdf';
-
-      if (isPDF) {
-        $.post({
-          url: '/pdf',
-          processData: false,
-          contentType: false,
-          data: formData,
-        })
-          .then((res) => {
-            this.uploadResults = res.images;
-            this.store.findRecord('image', res.images[0]._id).then((image) => {
-              problem.set('image', image);
-              problem
-                .save()
-                .then((res) => {
-                  this.alert.showToast(
-                    'success',
-                    'Problem Updated',
-                    'bottom-end',
-                    3000,
-                    false,
-                    null
-                  );
-                  // handle success
-                  this.isEditing = false;
-                  if (problem.get('isForEdit')) {
-                    problem.set('isForEdit', false);
-                  }
-                  this.resetErrors();
-                })
-                .catch((err) => {
-                  this.handleErrors(err, 'updateProblemErrors', problem);
-                  this.showConfirmModal = false;
-                });
-            });
-          })
-          .catch((err) => {
-            this.handleErrors(err, 'imageUploadErrors');
+    if (
+      !_isEqual(this.problem, this.args.problem) ||
+      !_isEqual(this.problem.keywords, this.args.problem.keywords) ||
+      !_isEqual(
+        this.problem.categories.slice(),
+        this.args.problem.categories.slice()
+      )
+    ) {
+      // update problem with the values from the local copy
+      Object.keys(this.problem).forEach((key) => {
+        this.args.problem.set(key, this.problem[key]);
+      });
+      this.args.problem
+        .save()
+        .then(() => {
+          this.alert.showToast(
+            'success',
+            'Problem Updated',
+            'bottom-end',
+            3000,
+            false,
+            null
+          );
+          // handle success
+          this.showConfirmModal = false;
+          this.router.transitionTo('problems.problem', this.args.problem.id, {
+            queryParams: { tab: this.activeTab },
           });
-      } else {
-        $.post({
-          url: '/image',
-          processData: false,
-          contentType: false,
-          data: formData,
         })
-          .then((res) => {
-            this.uploadResults = res.images;
-            this.store.findRecord('image', res.images[0]._id).then((image) => {
-              problem.set('image', image);
-              problem
-                .save()
-                .then((res) => {
-                  this.alert.showToast(
-                    'success',
-                    'Problem Updated',
-                    'bottom-end',
-                    3000,
-                    false,
-                    null
-                  );
-                  this.isEditing = false;
-                  if (problem.get('isForEdit')) {
-                    problem.set('isForEdit', false);
-                  }
-                  this.resetErrors();
-                })
-                .catch((err) => {
-                  this.handleErrors(err, 'updateProblemErrors', problem);
-                  this.showConfirmModal = false;
-                });
-            });
-          })
-          .catch((err) => {
-            this.handleErrors(err, 'imageUploadErrors');
-          });
-      }
-    } else {
-      if (problem.get('hasDirtyAttributes') || didKeywordsChange) {
-        problem.set('modifiedBy', currentUser);
-        problem
-          .save()
-          .then(() => {
-            this.alert.showToast(
-              'success',
-              'Problem Updated',
-              'bottom-end',
-              3000,
-              false,
-              null
-            );
-            this.resetErrors();
-            this.showConfirmModal = false;
-            this.isEditing = false;
-            if (problem.get('isForEdit')) {
-              problem.set('isForEdit', false);
-            }
-          })
-          .catch((err) => {
-            this.handleErrors(err, 'updateProblemErrors', problem);
-            this.showConfirmModal = false;
-            return;
-          });
-      } else {
-        this.isEditing = false;
-      }
+        .catch((err) => {
+          this.errorHandling.handleErrors(
+            err,
+            this.errorLabel,
+            this.args.problem
+          );
+          this.showConfirmModal = false;
+        });
     }
   }
 
-  @action deleteProblem() {
-    let problem = this.args.problem;
-    this.alert
-      .showModal(
-        'warning',
-        'Are you sure you want to delete this problem?',
-        null,
-        'Yes, delete it'
-      )
-      .then((result) => {
-        if (result.value) {
-          this.hideInfo();
-          problem.set('isTrashed', true);
-          window.history.back();
-          problem
-            .save()
-            .then((problem) => {
-              this.alert
-                .showToast(
-                  'success',
-                  'Problem Deleted',
-                  'bottom-end',
-                  5000,
-                  true,
-                  'Undo'
-                )
-                .then((result) => {
-                  if (result.value) {
-                    problem.set('isTrashed', false);
-                    problem.save().then(() => {
-                      this.alert.showToast(
-                        'success',
-                        'Problem Restored',
-                        'bottom-end',
-                        3000,
-                        false,
-                        null
-                      );
-                      window.history.back();
-                    });
-                  }
-                });
-            })
-            .catch((err) => {
-              this.handleErrors(err, 'updateProblemErrors', problem);
-            });
+  uploadFiles(filesToBeUploaded = []) {
+    const formData = new FormData();
+    filesToBeUploaded.forEach((f) => {
+      formData.append('photo', f);
+    });
+
+    const isPDF = filesToBeUploaded[0].type === 'application/pdf';
+    const url = isPDF ? '/pdf' : '/image';
+    return fetch(url, {
+      method: 'POST',
+      body: formData,
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
         }
+        return response.json();
+      })
+      .then((res) => {
+        return res.images;
+      })
+      .catch((err) => {
+        this.errorHandling.handleErrors(err, this.errorLabel);
       });
   }
 
+  @action
+  handleChange(property, value) {
+    this.problem = { ...this.problem, [property]: value };
+  }
+
+  @action async deleteProblem() {
+    try {
+      const { wasDeleted, wasRestored } = await this.problemUtils.deleteProblem(
+        this.args.problem
+      );
+      if (wasDeleted) {
+        this.hideInfo();
+        window.history.back();
+        return;
+      }
+
+      if (wasRestored) {
+        window.history.back();
+        return;
+      }
+    } catch (err) {
+      this.errorHandling.handleErrors(err, this.errorLabel, problem);
+    }
+  }
+
   @action editProblem() {
     let problem = this.args.problem;
-    let problemId = problem.get('id');
-    let currentUserAccountType = this.args.currentUser.get('accountType');
-    let isAdmin = currentUserAccountType === 'A';
-    this.copyrightNotice = problem.copyrightNotice;
-    this.sharingAuth = problem.sharingAuth;
-    this.author = problem.author;
-    this.problemName = problem.title;
-    this.problemText = problem.text;
-    this.organization = problem.organization;
-    this.problemCategories = problem.categories;
-    this.problemStatus = problem.status;
-    this.additionalInfo = problem.additionalInfo;
-    this.privacySetting = problem.privacySetting;
-    this.sharingAuth = problem.sharingAuth;
-    this.privacySettingIcon = problem.privacySetting;
-
-    let keywords = problem.get('keywords') || [];
-
-    let keywordsCopy = keywords.slice();
-    this.initialKeywords = keywordsCopy;
-
-    if (!problem.get('isUsed')) {
+    let problemId = problem.id;
+    let isAdmin = this.user.isAdmin;
+
+    if (!problem.isUsed) {
       this.store
         .queryRecord('assignment', {
           problem: problemId,
@@ -486,164 +383,95 @@ export default class ProblemInfoComponent extends ErrorHandlingComponent {
     }
   }
 
-  @action cancelEdit() {
-    this.isEditing = false;
-
-    let problem = this.args.problem;
-    if (problem.get('isForEdit')) {
-      problem.set('isForEdit', false);
-    }
-    this.resetErrors();
-  }
-
-  @action radioSelect(value) {
-    this.privacySetting = value;
+  @action
+  onSelectTab(tab) {
+    // this.activeTab = tab;
+    this.router.transitionTo({
+      queryParams: { tab },
+    });
   }
 
-  @action changePrivacy() {
-    let privacy = $('#privacy-select :selected').val();
-    this.privacySettingIcon = privacy;
+  @action
+  changePrivacy(event) {
+    const newPrivacy = event.target.value;
+    this.problem = { ...this.problem, privacySetting: newPrivacy };
   }
 
-  @action checkPrivacy() {
-    let currentPrivacy = this.args.problem.get('privacySetting');
-    let privacy = $('#privacy-select :selected').val();
-    this.privacySetting = privacy;
-
-    if (currentPrivacy !== 'E' && privacy === 'E') {
-      this.alert
-        .showModal(
-          'question',
-          'Are you sure you want to make your problem public?',
-          "You are changing your problem's privacy status to public. This means it will be accessible to all EnCoMPASS users. You will not be able to make any changes to this problem once it has been used",
-          'Yes'
-        )
-        .then((result) => {
-          if (result.value) {
-            return this.setStatus();
-          }
-        });
+  async checkPrivacy(currentPrivacy, newPrivacy) {
+    if (currentPrivacy !== 'E' && newPrivacy === 'E') {
+      const response = await this.alert.showModal(
+        'question',
+        'Are you sure you want to make your problem public?',
+        "You are changing your problem's privacy status to public. This means it will be accessible to all EnCoMPASS users. You will not be able to make any changes to this problem once it has been used",
+        'Yes'
+      );
+      return response.value;
     } else {
-      return this.setStatus();
+      return true;
     }
   }
 
-  @action checkStatus() {
-    let currentUser = this.args.currentUser;
-    let status = this.generatedStatus;
-    let problem = this.args.problem;
-    let title = this.problemName;
-    let flaggedReason = {
-      flaggedBy: currentUser.get('id'),
+  async handleFlaggedStatus() {
+    const flaggedReason = {
+      flaggedBy: this.user,
       reason: '',
       flaggedDate: new Date(),
     };
 
-    if (status === 'approved' || status === 'pending') {
-      this.flaggedReason = null;
-      return this.updateProblem();
-    } else if (status === 'flagged' && !problem.get('flagReason')) {
-      this.alert
-        .showModal(
-          'warning',
-          `Are you sure you want to mark ${title} as flagged`,
-          null,
-          `Yes, Flag it!`
-        )
-        .then((result) => {
-          if (result.value) {
-            this.alert
-              .showPromptSelect(
-                'Flag Reason',
-                this.flagOptions,
-                'Select a reason'
-              )
-              .then((result) => {
-                if (result.value) {
-                  if (result.value === 'other') {
-                    this.alert
-                      .showPrompt(
-                        'text',
-                        'Other Flag Reason',
-                        'Please provide a brief explanation for why this problem should be flagged.',
-                        'Flag'
-                      )
-                      .then((result) => {
-                        if (result.value) {
-                          flaggedReason.reason = result.value;
-                          this.flaggedBy = currentUser;
-                          this.flaggedReason = flaggedReason;
-                          return this.updateProblem();
-                        }
-                      });
-                  } else {
-                    flaggedReason.reason = result.value;
-                    this.flaggedBy = currentUser;
-                    this.flaggedReason = flaggedReason;
-                    return this.updateProblem();
-                  }
-                }
-              });
-          }
-        });
+    const { value: isStatusOk } = await this.alert.showModal(
+      'warning',
+      `Are you sure you want to mark ${this.problem.title} as flagged`,
+      null,
+      `Yes, Flag it!`
+    );
+
+    if (!isStatusOk) {
+      return { isStatusOk: false, flaggedReason: null };
     }
+
+    const { value: reason } = await this.alert.showPromptSelect(
+      'Flag Reason',
+      this.flagOptions,
+      'Select a reason'
+    );
+
+    flaggedReason.reason = reason;
+
+    if (reason === 'other') {
+      const { value: other } = this.alert.showPrompt(
+        'text',
+        'Other Flag Reason',
+        'Please provide a brief explanation for why this problem should be flagged.',
+        'Flag'
+      );
+      flaggedReason.reason = other;
+    }
+    return { isStatusOk: true, flaggedReason };
   }
 
-  @action addToMyProblems() {
-    let problem = this.args.problem;
-    let originalTitle = problem.get('title');
-    let title = 'Copy of ' + originalTitle;
-    let text = problem.get('text');
-    let author = problem.get('author');
-    let additionalInfo = problem.get('additionalInfo');
-    let isPublic = problem.get('isPublic');
-    let image = problem.get('image');
-    let imageUrl = problem.get('imageUrl');
-    let createdBy = this.args.currentUser;
-    let categories = problem.get('categories');
-    let status = problem.get('status');
-    let currentUser = this.args.currentUser;
-    let keywords = problem.get('keywords');
-    let organization = currentUser.get('organization');
-    let copyright = problem.get('copyrightNotice');
-    let sharingAuth = problem.get('sharingAuth');
-
-    let newProblem = this.store.createRecord('problem', {
-      title: title,
-      text: text,
-      author: author,
-      additionalInfo: additionalInfo,
-      imageUrl: imageUrl,
-      isPublic: isPublic,
-      origin: problem,
-      categories: categories,
-      createdBy: createdBy,
-      image: image,
-      organization: organization,
+  // this function is used when we aren't editing, so it's appropriate that we reference this.args.problem.
+  @action
+  addToMyProblems() {
+    const copyProperties = {
+      title: `Copy of ${this.args.problem.title}`,
+      createdBy: this.user,
+      organization: this.user.organization,
       privacySetting: 'M',
-      copyrightNotice: copyright,
-      sharingAuth: sharingAuth,
-      status: status,
       createDate: new Date(),
-      keywords: keywords,
-    });
+    };
 
-    newProblem
-      .save()
+    this.problemUtils
+      .saveCopy(this.args.problem, copyProperties)
       .then((problem) => {
-        let name = problem.get('title');
-        this.savedProblem = problem;
         this.alert.showToast(
           'success',
-          `${name} added to your problems`,
+          `${problem.title} added to your problems`,
           'bottom-end',
           3000,
           false,
           null
         );
         this.router.transitionTo('problems.problem', problem.id);
-        // let parentView = this.parentView;
-        // this.parentActions.refreshList.call(parentView);
       })
       .catch((err) => {
         this.alert.showToast(
@@ -654,142 +482,55 @@ export default class ProblemInfoComponent extends ErrorHandlingComponent {
           false,
           null
         );
-        // this.handleErrors(err, 'createRecordErrors', newProblem);
       });
   }
 
-  @action toggleImageSize() {
+  @action
+  toggleImageSize() {
     this.isWide = !this.isWide;
   }
 
-  @action deleteImage() {
-    let problem = this.args.problem;
-    problem.set('image', null);
-    problem
-      .save()
-      .then((res) => {
-        this.alert.showToast(
-          'success',
-          'Image Deleted',
-          'bottom-end',
-          3000,
-          false,
-          null
-        );
-      })
-      .catch((err) => {
-        this.handleErrors(err, 'updateProblemErrors', problem);
-      });
-  }
-
-  @action toggleCategories() {
-    this.store.query('category', {}).then((queryCats) => {
-      let categories = queryCats.get('meta');
-      this.categoryTree = categories.categories;
-    });
-    this.showCategories = !this.showCategories;
+  @action
+  deleteImage() {
+    this.problem = { ...this.problem, image: null };
   }
 
-  @action addCategories(category) {
-    let problem = this.args.problem;
-    let categories = problem.get('categories');
-    if (!categories.includes(category)) {
+  @action
+  addCategory(category) {
+    const categories = this.problem.categories;
+    if (category && !categories.includes(category)) {
       categories.pushObject(category);
-      problem.save().then(() => {
-        this.alert
-          .showToast(
-            'success',
-            'Category Added',
-            'bottom-end',
-            4000,
-            true,
-            'Undo'
-          )
-          .then((result) => {
-            if (result.value) {
-              problem.get('categories').removeObject(category);
-              problem.save().then(() => {
-                this.alert.showToast(
-                  'success',
-                  'Category Removed',
-                  'bottom-end',
-                  4000,
-                  false,
-                  null
-                );
-              });
-            }
-          });
-      });
     }
   }
 
-  @action removeCategory(category) {
-    let problem = this.args.problem;
-    let categories = problem.get('categories');
-    categories.removeObject(category);
-    problem.save().then(() => {
-      this.alert
-        .showToast(
-          'success',
-          'Category Removed',
-          'bottom-end',
-          4000,
-          true,
-          'Undo'
-        )
-        .then((result) => {
-          if (result.value) {
-            problem.get('categories').pushObject(category);
-            problem.save().then(() => {
-              this.alert.showToast(
-                'success',
-                'Category Restored',
-                'bottom-end',
-                4000,
-                false,
-                null
-              );
-            });
-          }
-        });
-    });
-  }
-
-  @action toAssignmentInfo(assignment) {
-    this.router.transitionTo('assignments.assignment', assignment);
+  @action
+  removeCategory(category) {
+    this.problem.categories.removeObject(category);
   }
 
-  @action toggleAssignment() {
-    this.showAssignment = true;
-    this.args.problem.isForAssignment = true;
-    this.problemList.pushObject(this.args.problem);
-    var scr = $('#outlet')[0].scrollHeight;
-    $('#outlet').animate({ scrollTop: scr }, 100);
+  @action
+  toggleAssignment() {
+    this.router.transitionTo(
+      'problems.problem.assignment',
+      this.args.problem.id
+    );
   }
 
-  @action hideInfo(doTransition = true) {
+  @action
+  hideInfo() {
     // transition back to list
-
-    if (this.isEditing) {
-      this.isEditing = false;
-    }
-    let problem = this.args.problem;
-    if (problem.isForEdit) {
-      problem.isForEdit = false;
-    }
-    $('.list-outlet').addClass('hidden');
-    if (doTransition) {
-      this.router.transitionTo('problems');
+    const outletEl = document.getElementById('outlet');
+    if (outletEl) {
+      outletEl.classList.add('hidden');
     }
+    this.router.transitionTo('problems');
   }
 
   @action checkRecommend() {
-    let currentUser = this.args.currentUser;
-    let accountType = currentUser.get('accountType');
-    let problem = this.args.problem;
-    let privacySetting = problem.get('privacySetting');
-    let status = problem.get('status');
+    const accountType = this.user.accountType;
+    const problem = this.args.problem;
+    const privacySetting = problem.privacySetting;
+    const status = problem.status;
 
     if (accountType === 'T') {
       return;
@@ -832,9 +573,9 @@ export default class ProblemInfoComponent extends ErrorHandlingComponent {
 
   @action addToRecommend() {
     let problem = this.args.problem;
-    let accountType = this.args.currentUser.accountType;
+    let accountType = this.user.accountType;
     if (accountType === 'A') {
-      let orgList = this.args.orgList.toArray();
+      let orgList = this.args.orgList.slice();
       let optionList = {};
       for (let org of orgList) {
         let id = org.id;
@@ -886,7 +627,7 @@ export default class ProblemInfoComponent extends ErrorHandlingComponent {
 
   @action removeRecommend() {
     let problem = this.args.problem;
-    return this.args.currentUser.get('organization').then((org) => {
+    return this.user.get('organization').then((org) => {
       org.get('recommendedProblems').removeObject(problem);
       org.save().then(() => {
         this.alert.showToast(
@@ -901,35 +642,8 @@ export default class ProblemInfoComponent extends ErrorHandlingComponent {
     });
   }
 
-  @action toggleGeneral() {
-    this.showGeneral = true;
-    this.showCats = false;
-    this.showAdditional = false;
-    this.showLegal = false;
-  }
-
-  @action toggleCats() {
-    this.showCats = true;
-    this.showGeneral = false;
-    this.showAdditional = false;
-    this.showLegal = false;
-  }
-
-  @action toggleAdditional() {
-    this.showAdditional = true;
-    this.showCats = false;
-    this.showGeneral = false;
-    this.showLegal = false;
-  }
-
-  @action toggleLegal() {
-    this.showLegal = true;
-    this.showCats = false;
-    this.showAdditional = false;
-    this.showGeneral = false;
-  }
-
-  @action restoreProblem() {
+  @action
+  restoreProblem() {
     let problem = this.args.problem;
     this.alert
       .showModal(
@@ -940,7 +654,7 @@ export default class ProblemInfoComponent extends ErrorHandlingComponent {
       )
       .then((result) => {
         if (result.value) {
-          problem.set('isTrashed', false);
+          problem.isTrashed = false;
           problem.save().then(() => {
             this.alert.showToast(
               'success',
@@ -950,37 +664,45 @@ export default class ProblemInfoComponent extends ErrorHandlingComponent {
               false,
               null
             );
-            let parentView = this.parentView;
-            this.parentActions.refreshList.call(parentView);
           });
         }
       });
   }
 
-  @action toggleShowFlagReason() {
+  @action
+  toggleCategories() {
+    this.showCategories = !this.showCategories;
+  }
+
+  @action
+  toggleShowFlagReason() {
     this.showFlagReason = !this.showFlagReason;
   }
-  @action updateKeywords(val, $item) {
+  @action
+  updateKeywords(val, $item) {
     if (!val) {
       return;
     }
 
-    let keywords = this.args.problem.keywords;
-    if (!_.isArray(keywords)) {
-      this.args.problem.keywords = [];
-      keywords = this.args.problem.keywords;
-    }
-    let isRemoval = _.isNull($item);
+    const isRemoval = _isNull($item);
 
     if (isRemoval) {
-      keywords.removeObject(val);
-      return;
+      const keywords = this.problem.keywords.filter(
+        (keyword) => keyword !== val
+      );
+      this.problem = { ...this.problem, keywords };
+    } else {
+      this.problem = {
+        ...this.problem,
+        keywords: [...this.problem.keywords, val],
+      };
     }
-    keywords.addObject(val);
   }
-  @action updateQuillText(content, isEmpty, isOverLengthLimit) {
-    this.quillText = content;
+
+  @action
+  updateQuillText(text, isEmpty, isOverLengthLimit) {
     this.isQuillEmpty = isEmpty;
     this.isQuillTooLong = isOverLengthLimit;
+    this.problem = { ...this.problem, text };
   }
 }
diff --git a/app/components/problem-list-container.hbs b/app/components/problem-list-container.hbs
index a57cf554a..c06ccdec4 100644
--- a/app/components/problem-list-container.hbs
+++ b/app/components/problem-list-container.hbs
@@ -1,4 +1,5 @@
-<div id='problem-list-container' {{did-insert this.detectWidth}}>
+{{! took out the problem-list-container id and put it in the route so that the outlet can be rendered in the right place }}
+<div {{did-insert this.detectWidth}}>
   <div class='flex-container-full'>
     <div
       class='flex-item-full filter-options
@@ -10,10 +11,9 @@
         @adminFilterName={{this.adminFilterName}}
         @showAdminFilters={{this.showAdminFilters}}
         @onUpdate={{this.triggerFetch}}
-        @showTrashed={{this.toggleTrashed}}
+        @showTrashed={{this.showOnlyTrashed}}
         @toggleTrashed={{this.triggerShowTrashed}}
-        @categoriesFilter={{this.categoriesFilter}}
-        @onUpdateCategories={{this.handleUpdateCategories}}
+        @categoryFilterName={{this.categoryFilterName}}
       />
     </div>
 
@@ -58,13 +58,13 @@
             <span class='layout-icons'>
               {{#if this.showList}}
                 <img
-                  src='../assets/images/grid.svg'
+                  src='/assets/images/grid.svg'
                   alt='grid'
                   {{on 'click' this.setGrid}}
                   title='Show in grid view'
                 />
                 <img
-                  src='../assets/images/list-active.svg'
+                  src='/assets/images/list-active.svg'
                   alt='list'
                   {{on 'click' this.setList}}
                   title='Currently in list view'
@@ -102,7 +102,7 @@
                 <ul>
                   {{#each this.privacySettingOptions as |option|}}
                     <li>
-                      <RadioFilter
+                      <Ui::RadioFilter
                         @labelName={{option.label}}
                         @labelIcon={{option.icon}}
                         @inputValue={{option.value}}
@@ -126,6 +126,9 @@
               @type='title'
               @activeType={{this.sortCriterion.type}}
             />
+            <div class='sort-bar-item description'>
+              Description
+            </div>
             <ToggleControl
               @classToAdd='sort-bar-item date'
               @onUpdate={{this.updateSortCriterion}}
@@ -140,7 +143,7 @@
               <i class='fas fa-filter sort-icon'></i>
               <span class='hover-menu'>
                 <ul>
-                  {{#each this.statusOptions as |option|}}
+                  {{#each this.statusOptionsList as |option|}}
                     <li>
                       <label>
                         <input
@@ -177,12 +180,11 @@
             @recommendedProblems={{this.model.recommendedProblems}}
             @currentUser={{this.currentUser}}
             @isSearching={{this.isSearchingProblems}}
-            @problems={{this.displayProblems}}
+            @problems={{this.problems}}
             @metadata={{this.problemsMetadata}}
             @isList={{this.showList}}
             @isGrid={{this.showGrid}}
             @moreMenuOptions={{this.moreMenuOptions}}
-            @toProblemInfo='toProblemInfo'
             @refreshList={{this.refreshList}}
           />
 
diff --git a/app/components/problem-list-container.js b/app/components/problem-list-container.js
index dc053b3fa..7aeb7d41f 100644
--- a/app/components/problem-list-container.js
+++ b/app/components/problem-list-container.js
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { action } from '@ember/object';
 
 export default class ProblemListContainerComponent extends Component {
@@ -12,10 +12,13 @@ export default class ProblemListContainerComponent extends Component {
 
   @tracked problems = this.args.problems || [];
   @tracked selectedPrivacySetting = ['M', 'O', 'E'];
+  @tracked selectedStatusSetting = ['approved', 'pending', 'flagged'];
   @tracked showList = true;
   @tracked showGrid = false;
   @tracked isFilterListCollapsed = true;
-  @tracked toggleTrashed = false;
+  @tracked showOnlyTrashed = false;
+  @tracked criteriaTooExclusive = false;
+  @tracked areNoRecommendedProblems = false;
   @tracked isFetchingProblems = false;
   @tracked isDisplayingSearchResults = false;
   @tracked searchCriterion = 'general';
@@ -122,7 +125,7 @@ export default class ProblemListContainerComponent extends Component {
       this.userOrgName = name;
       this.configureFilters();
       this.configureAdminFilter();
-      // this.setCategoriesFilter(this.selectedCategories);
+      this.configureCategoryFilter();
     });
   }
 
@@ -149,17 +152,12 @@ export default class ProblemListContainerComponent extends Component {
     return 'problem-filter';
   }
 
-  get user() {
-    return this.currentUser.user;
+  get categoryFilterName() {
+    return 'category-filter';
   }
 
-  get displayProblems() {
-    if (!this.problems) {
-      return [];
-    }
-    return this.toggleTrashed
-      ? this.problems
-      : this.problems.filter((p) => !p.isTrashed);
+  get user() {
+    return this.currentUser.user;
   }
 
   get listResultsMessage() {
@@ -173,6 +171,10 @@ export default class ProblemListContainerComponent extends Component {
       return 'No results found. Please try expanding your filter criteria.';
     }
 
+    if (this.areNoRecommendedProblems) {
+      return `There are currently no recommended problems for ${this.userOrgName}.`;
+    }
+
     if (this.isDisplayingSearchResults) {
       let total = this.problemsMetadata?.total || 0;
       let countDescriptor = total === 1 ? 'problem' : 'problems';
@@ -184,24 +186,22 @@ export default class ProblemListContainerComponent extends Component {
   }
 
   get statusOptionsList() {
-    return this.currentUser.isTeacher
+    return this.user.isTeacher
       ? this.statusOptions.filter((option) => !option.teacherHide)
       : this.statusOptions;
   }
 
   @action
   updateStatusFilter(status) {
-    let allowedValues = ['approved', 'pending', 'flagged'];
+    let allowedValues = this.statusOptionsList.map((option) => option.value);
     if (!allowedValues.includes(status)) {
       return;
     }
-    let statusFilter = this.statusFilter;
 
-    if (statusFilter.includes(status)) {
-      statusFilter.removeObject(status);
-    } else {
-      statusFilter.addObject(status);
-    }
+    this.selectedStatusSetting = this.selectedStatusSetting.includes(status)
+      ? this.selectedStatusSetting.filter((item) => item !== status)
+      : [...this.selectedStatusSetting, status];
+
     this.triggerFetch();
   }
 
@@ -213,9 +213,8 @@ export default class ProblemListContainerComponent extends Component {
 
   @action
   triggerFetch() {
-    if (this.criteriaTooExclusive) {
-      this.criteriaTooExclusive = null;
-    }
+    this.criteriaTooExclusive = false;
+    this.areNoRecommendedProblems = false;
     this.getProblems();
   }
 
@@ -226,6 +225,7 @@ export default class ProblemListContainerComponent extends Component {
 
   @action
   triggerShowTrashed() {
+    this.showOnlyTrashed = !this.showOnlyTrashed;
     this.getProblems();
   }
 
@@ -274,7 +274,10 @@ export default class ProblemListContainerComponent extends Component {
               value: 'all',
               label: 'All',
               icon: 'fas fa-infinity',
-              buildFilter: () => ({}),
+              buildFilter: () => {
+                // Admin can see everything, no restrictions
+                return this.inputState.getFilter(this.adminFilterName);
+              },
             },
           ]
         : []),
@@ -283,7 +286,7 @@ export default class ProblemListContainerComponent extends Component {
         label: 'Mine',
         icon: 'fas fa-user',
         buildFilter: () => {
-          const id = this.currentUser.user?.id ?? null;
+          const id = this.user.id ?? null;
           return id ? { createdBy: id } : {};
         },
       },
@@ -292,7 +295,7 @@ export default class ProblemListContainerComponent extends Component {
         label: 'My Org',
         icon: 'fas fa-university',
         buildFilter: () => {
-          const id = this.currentUser.user?.organization?.id ?? null;
+          const id = this.user.organization?.id ?? null;
           return id ? { organization: id } : {};
         },
       },
@@ -302,21 +305,86 @@ export default class ProblemListContainerComponent extends Component {
       this.filterName,
       'myOrg',
       [
+        {
+          label: 'Recommended',
+          value: 'recommended',
+          icon: 'fas fa-star',
+          default: true,
+        },
         {
           label: `Created by ${this.userOrgName} Members`,
           value: 'fromOrg',
           icon: 'fas fa-users',
           default: true,
         },
+      ],
+      { multiSelect: true, persist: true },
+      (selections = []) => {
+        const includeRecommended = selections.includes('recommended');
+        const includeFromOrg = selections.includes('fromOrg');
+
+        if (!includeRecommended && !includeFromOrg) {
+          this.criteriaTooExclusive = true;
+          return {};
+        }
+
+        const recommendedProblems =
+          this.user?.organization?.get('recommendedProblems') ?? [];
+        const recommendedIds = recommendedProblems.map((p) => p.id);
+
+        if (
+          includeRecommended &&
+          recommendedIds.length === 0 &&
+          !includeFromOrg
+        ) {
+          this.areNoRecommendedProblems = true;
+          return {};
+        }
+
+        const conditions = [];
+
+        if (includeRecommended && recommendedIds.length > 0) {
+          conditions.push({ id: { $in: recommendedIds } });
+        }
+
+        if (includeFromOrg && this.user?.organization?.id) {
+          conditions.push({ organization: this.user.organization.id });
+        }
+
+        return conditions.length > 0 ? { $or: conditions } : {};
+      }
+    );
+  }
+
+  configureCategoryFilter() {
+    this.inputState.createStates(this.categoryFilterName, [
+      {
+        value: 'categories',
+        label: 'Categories',
+        type: 'list',
+      },
+    ]);
+    this.inputState.createSubStates(
+      this.categoryFilterName,
+      'categories',
+      [
         {
-          label: 'Recommended',
-          value: 'recommended',
-          icon: 'fas fa-star',
-          default: true,
+          label: 'Include Subcategories',
+          value: 'includeSubcats',
+          default: false,
         },
-        { label: 'Owner', value: 'owner', default: true },
       ],
-      { multiSelect: true, persist: true }
+      {},
+      (selections = []) => {
+        const selectedCategories =
+          this.inputState.getListState(this.categoryFilterName) || [];
+        if (selectedCategories.length === 0) {
+          return {};
+        }
+        const ids = selectedCategories.map((cat) => cat.id);
+        const includeSubCats = selections.includes('includeSubcats');
+        return { categories: { ids, includeSubCats } };
+      }
     );
   }
 
@@ -349,10 +417,18 @@ export default class ProblemListContainerComponent extends Component {
         queryParamsKey: 'usernameSearch',
         isAsync: true,
         type: 'list',
+        buildFilter: () => {
+          const selectedUsers =
+            this.inputState.getListState(this.adminFilterName) || [];
+          return { createdBy: { $in: selectedUsers } };
+        },
       },
       {
         value: 'pows',
         label: 'PoWs',
+        buildFilter: () => {
+          return { pows: 'all' };
+        },
       },
     ]);
 
@@ -373,7 +449,27 @@ export default class ProblemListContainerComponent extends Component {
           default: true,
         },
       ],
-      { listBased: true, multiSelect: true }
+      { listBased: true, multiSelect: true },
+      (selections = []) => {
+        const includeRecommended = selections.includes('recommended');
+        const includeFromOrg = selections.includes('fromOrg');
+
+        if (!includeRecommended && !includeFromOrg) {
+          this.criteriaTooExclusive = true;
+          return { all: {} };
+        }
+
+        const organizations =
+          this.inputState.getListState(this.adminFilterName) || [];
+        return {
+          all: {
+            org: {
+              ...(includeRecommended && { recommended: organizations }),
+              ...(includeFromOrg && { organizations }),
+            },
+          },
+        };
+      }
     );
   }
 
@@ -388,15 +484,27 @@ export default class ProblemListContainerComponent extends Component {
 
   getProblems() {
     this.isFetchingProblems = true;
-    let filterBy = this.buildFilterBy();
-    let sortBy = this.buildSortBy();
-    let queryParams = { filterBy, sortBy };
+    const queryParams = {};
+    if (!this.showOnlyTrashed) {
+      queryParams.filterBy = this.buildFilterBy();
+      queryParams.sortBy = this.buildSortBy();
+    } else {
+      queryParams.isTrashedOnly = true;
+    }
+
+    if (this.criteriaTooExclusive || this.areNoRecommendedProblems) {
+      this.problems = [];
+      this.isFetchingProblems = false;
+      return;
+    }
+
+    console.log('queryParams', queryParams);
 
     this.store
       .query('problem', queryParams)
       .then((results) => {
         this.errorHandling.removeMessages('problemLoadErrors');
-        this.problems = results;
+        this.problems = results || [];
         this.isFetchingProblems = false;
       })
       .catch((err) => {
@@ -406,9 +514,16 @@ export default class ProblemListContainerComponent extends Component {
   }
 
   buildFilterBy() {
-    const filter = { privacySetting: { $in: this.selectedPrivacySetting } };
-    const mainFilter = this.inputState.getFilter(this.filterName);
-    return { ...filter, ...mainFilter };
+    if (this.selectedStatusSetting.length === 0) {
+      this.criteriaTooExclusive = true;
+    }
+    const filter = {
+      privacySetting: { $in: this.selectedPrivacySetting },
+      status: { $in: this.selectedStatusSetting },
+    };
+    const mainFilter = this.inputState.getFilter(this.filterName); // includes admin filter
+    const categoryFilter = this.inputState.getFilter(this.categoryFilterName);
+    return { ...filter, ...mainFilter, ...categoryFilter };
   }
 
   buildSortBy() {
@@ -416,7 +531,7 @@ export default class ProblemListContainerComponent extends Component {
   }
 
   async getUserOrg() {
-    const org = await this.currentUser.user?.organization;
+    const org = await this.user.organization;
     return org?.name || 'undefined';
   }
 }
diff --git a/app/components/problem-list-item.hbs b/app/components/problem-list-item.hbs
index f20a4347f..69b0358a7 100644
--- a/app/components/problem-list-item.hbs
+++ b/app/components/problem-list-item.hbs
@@ -47,14 +47,21 @@
         {{this.getActionButtonName}}
       </button>
     </div>
-    <div class='item-section more' {{on 'click' this.toggleShowMoreMenu}}>
+    <div
+      class='item-section more'
+      {{on 'mouseenter' this.handleShowMoreMenu}}
+      {{on 'mouseleave' this.handleHideMoreMenu}}
+    >
       <i class='fas fa-ellipsis-v more-menu'></i>
       {{#if this.showMoreMenu}}
         <span class='click-menu'>
           <ul>
             {{#if this.ellipsisMenuOptions}}
               {{#each this.ellipsisMenuOptions as |option|}}
-                <li {{on 'click' option.action}}>
+                <li
+                  {{on 'click' option.action}}
+                  {{on 'click' this.handleHideMoreMenu}}
+                >
                   <label>
                     <span class='icon-text'>{{option.label}}</span>
                     <i class={{option.icon}}></i>
@@ -149,13 +156,4 @@
       </div>
     </div>
   </div>
-{{/if}}
-
-<!-- Leaving this for now. Relates to the pop up of Problem info -->
-<script>
-  $('.problem-title').click(function (e) {
-  $('.list-outlet').removeClass('hidden'); $('.list-outlet').addClass('animated
-  slideInRight'); }); $('.results-list').click(function (e) {
-  $('.click-menu').addClass('hidden'); }); $('.flex-item-full').click(function
-  (e) { $('.click-menu').addClass('hidden'); });
-</script>
\ No newline at end of file
+{{/if}}
\ No newline at end of file
diff --git a/app/components/problem-list-item.js b/app/components/problem-list-item.js
index df462b5df..90f650e06 100644
--- a/app/components/problem-list-item.js
+++ b/app/components/problem-list-item.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';
 
 const ACTION_BUTTONS = {
   Restore: (problem) => () => this.restoreProblem(problem),
@@ -11,11 +11,14 @@ const ACTION_BUTTONS = {
     this.confirmStatusUpdate(problem, 'title', 'approved'),
   Assign: (problem) => () => this.assignProblem(problem),
   Copy: (problem) => () => this.addToMyProblems(problem),
+  Delete: (problem) => () => this.deleteProblem(problem),
 };
 
 export default class ProblemListItemComponent extends Component {
   @service('sweet-alert') alert;
   @service('problem-permissions') permissions;
+  @service currentUser;
+  @service problemUtils;
   @service router;
   @service store;
 
@@ -58,11 +61,11 @@ export default class ProblemListItemComponent extends Component {
   ];
 
   get isAdminUser() {
-    return this.args.currentUser.isAdmin;
+    return this.currentUser.isAdmin;
   }
 
   get isPdAdminUser() {
-    return this.args.currentUser.isPdAdmin;
+    return this.currentUser.isPdAdmin;
   }
 
   get actionButtonName() {
@@ -209,18 +212,16 @@ export default class ProblemListItemComponent extends Component {
   }
 
   get actionButton() {
-    let actionBtn = {};
-    let isAdmin = this.args.currentUser.isAdmin;
-    let isPdAdmin = this.args.currentUser.isPdAdmin;
-    let problem = this.args.problem;
+    const actionBtn = {};
+    const problem = this.args.problem;
 
-    if (isAdmin) {
+    if (this.isAdmin) {
       if (problem.isTrashed) {
         actionBtn.function = 'restoreProblem';
         actionBtn.name = 'Restore';
       } else {
         actionBtn.function = 'confirmStatusUpdate';
-        if (problem.get('status') === 'approved') {
+        if (problem.status === 'approved') {
           actionBtn.name = 'Flag';
           actionBtn.argument1 = 'title';
           actionBtn.argument2 = 'flagged';
@@ -231,17 +232,14 @@ export default class ProblemListItemComponent extends Component {
         }
       }
     } else {
-      if (isPdAdmin) {
-        if (
-          problem.get('privacySetting') !== 'E' &&
-          problem.get('status') !== 'approved'
-        ) {
+      if (this.isPdAdmin) {
+        if (problem.privacySetting !== 'E' && problem.status !== 'approved') {
           actionBtn.function = 'confirmStatusUpdate';
           actionBtn.name = 'Approve';
           actionBtn.argument1 = 'title';
           actionBtn.argument2 = 'approved';
         } else {
-          if (problem.get('status') !== 'flagged') {
+          if (problem.status !== 'flagged') {
             actionBtn.function = 'assignProblem';
             actionBtn.name = 'Assign';
           } else {
@@ -260,6 +258,16 @@ export default class ProblemListItemComponent extends Component {
   @action showStatusOptions() {
     this.showAdminStatusMenu = true;
   }
+
+  @action
+  handleShowMoreMenu() {
+    this.showMoreMenu = true;
+  }
+  @action
+  handleHideMoreMenu() {
+    this.showMoreMenu = false;
+  }
+
   @action toggleShowMoreMenu() {
     let isShowing = this.showMoreMenu;
     this.showMoreMenu = !isShowing;
@@ -336,7 +344,7 @@ export default class ProblemListItemComponent extends Component {
     record.set('status', value);
     if (reason) {
       let flagReason = {
-        flaggedBy: this.args.currentUser.id,
+        flaggedBy: this.currentUser.id,
         reason: reason,
         flaggedDate: new Date(),
       };
@@ -344,7 +352,7 @@ export default class ProblemListItemComponent extends Component {
     }
     record
       .save()
-      .then((record) => {
+      .then(() => {
         this.alert.showToast('success', msg, 'bottom-end', 5000, false, null);
         if (this.showMoreMenu) {
           this.showMoreMenu = false;
@@ -404,7 +412,6 @@ export default class ProblemListItemComponent extends Component {
       .then((result) => {
         if (result.value) {
           problem.set('isTrashed', true);
-          // this.sendAction('toProblemList');
           problem
             .save()
             .then((problem) => {
@@ -432,78 +439,49 @@ export default class ProblemListItemComponent extends Component {
                         false,
                         null
                       );
-                      // window.history.back();
                     });
                   }
                 });
             })
             .catch((err) => {
-              this.handleErrors(err, 'updateProblemErrors', problem);
+              this.alert.showToast(
+                'error',
+                `${err}`,
+                'bottom-end',
+                3000,
+                false,
+                null
+              );
             });
         }
       });
   }
   @action assignProblem() {
-    // this.set('creatingAssignment', true);
-    // send to parent to handle?
-    let problem = this.args.problem;
-    problem.set('isForAssignment', true);
-    this.router.transitionTo('problems.problem', problem.id);
+    this.router.transitionTo(
+      'problems.problem.assignment',
+      this.args.problem.id
+    );
   }
   @action editProblem() {
-    // send to parent to handle?
-    let problem = this.args.problem;
-    problem.set('isForEdit', true);
-    this.router.transitionTo('problems.problem', problem.id);
+    this.router.transitionTo('problems.edit', this.args.problem.id);
   }
 
   @action addToMyProblems() {
-    let problem = this.args.problem;
-    let originalTitle = problem.title;
-    let title = 'Copy of ' + originalTitle;
-    let text = problem.text;
-    let author = problem.author;
-    let additionalInfo = problem.additionalInfo;
-    let isPublic = problem.isPublic;
-    let image = problem.image;
-    let imageUrl = problem.imageUrl;
-    let createdBy = this.args.currentUser;
-    let categories = problem.categories;
-    let status = problem.status;
-    let currentUser = this.args.currentUser;
-    let keywords = problem.keywords;
-    let organization = currentUser.get('organization');
-    let copyright = problem.copyrightNotice;
-    let sharingAuth = problem.sharingAuth;
-
-    let newProblem = this.store.createRecord('problem', {
-      title: title,
-      text: text,
-      author: author,
-      additionalInfo: additionalInfo,
-      imageUrl: imageUrl,
-      isPublic: isPublic,
-      origin: problem,
-      categories: categories,
-      createdBy: createdBy,
-      image: image,
-      organization: organization,
+    const copyProperties = {
+      title: `Copy of ${this.args.problem.title}`,
+      createdBy: this.user,
+      organization: this.user.organization,
       privacySetting: 'M',
-      copyrightNotice: copyright,
-      sharingAuth: sharingAuth,
-      status: status,
       createDate: new Date(),
-      keywords: keywords,
-    });
+    };
 
-    newProblem
-      .save()
+    this.problemUtils
+      .saveCopy(this.args.problem, copyProperties)
       .then((problem) => {
-        let name = problem.get('title');
-        this.avedProblem = problem;
+        this.savedProblem = problem;
         this.alert.showToast(
           'success',
-          `${name} added to your problems`,
+          `${problem.title} added to your problems`,
           'bottom-end',
           3000,
           false,
@@ -520,13 +498,9 @@ export default class ProblemListItemComponent extends Component {
           false,
           null
         );
-        // this.handleErrors(err, 'createRecordErrors', newProblem);
       });
   }
 
-  @action toProblemInfo(problem) {
-    this.router.transitionTo('problems.problem', problem.id);
-  }
   @action makePending() {
     this.confirmStatusUpdate(this.args.problem, 'title', 'pending');
   }
diff --git a/app/components/problem-new.hbs b/app/components/problem-new.hbs
index ffc705f4f..7eebeffa6 100644
--- a/app/components/problem-new.hbs
+++ b/app/components/problem-new.hbs
@@ -1,5 +1,5 @@
 <header class='info-header'>
-  <span class='remove-icon' {{action 'hideInfo'}}>
+  <span class='remove-icon' {{on 'click' this.hideInfo}}>
     <i class='fas fa-times'></i>
   </span>
 </header>
@@ -62,7 +62,7 @@
         </p>
         <div class='info-content-block'>
           <QuillContainer
-            @onEditorChange={{action 'updateQuillText'}}
+            @onEditorChange={{this.updateQuillText}}
             @startingText={{this.problemStatement}}
           />
         </div>
@@ -102,7 +102,8 @@
                   required='true'
                   name='privacy'
                   class='justMe'
-                  onclick={{action 'radioSelect' 'M'}}
+                  onclick={{fn this.radioSelect 'M'}}
+                  {{on 'click' (fn this.radioSelect 'M')}}
                   {{on 'blur' this.observeErrors}}
                 />
                 <span class='radio-text'>Just Me</span>
@@ -118,7 +119,8 @@
                   required='true'
                   name='privacy'
                   class='myOrg'
-                  onclick={{action 'radioSelect' 'O'}}
+                  onclick={{fn this.radioSelect 'O'}}
+                  {{on 'click' (fn this.radioSelect 'O')}}
                   {{on 'blur' this.observeErrors}}
                 />
                 <span class='radio-text'>My Organization</span>
@@ -133,7 +135,8 @@
                   required='true'
                   name='privacy'
                   class='everyone'
-                  onclick={{action 'radioSelect' 'E'}}
+                  onclick={{fn this.radioSelect 'E'}}
+                  {{on 'click' (fn this.radioSelect 'E')}}
                   {{on 'blur' this.observeErrors}}
                 />
                 <span class='radio-text'>Everyone</span>
@@ -163,7 +166,7 @@
                   <button
                     class='remove-cat'
                     type='button'
-                    {{action 'removeCategory' category}}
+                    {{on 'click' (fn this.removeCategory category)}}
                   ><i class='far fa-times-circle'></i></button></li>
               {{/each}}
             </ul>
@@ -172,20 +175,16 @@
             <button
               class='cancel-button show-cats-btn'
               type='button'
-              {{action 'toggleCategories'}}
+              {{on 'click' this.toggleCategories}}
             >Show Category Menu</button>
           {{/unless}}
           {{#if this.showCategories}}
             <button
               class='cancel-button hide-cats-btn'
               type='button'
-              {{action 'toggleCategories'}}
+              {{on 'click' this.toggleCategories}}
             >Hide Category Menu</button>
-            <CategoriesMenu
-              @categories={{this.categoryTree}}
-              @store={{this.store}}
-              @addCategories='addCategories'
-            />
+            <CategoriesMenu @addCategory={{this.addCategory}} />
           {{/if}}
         </div>
         <p class='info-content-label keywords'>
@@ -198,8 +197,8 @@
         <div class='info-content-block'>
           <SelectizeInput
             @inputId='select-add-keywords'
-            @onItemAdd={{action 'updateKeywords'}}
-            @onItemRemove={{action 'updateKeywords'}}
+            @onItemAdd={{this.updateKeywords}}
+            @onItemRemove={{this.updateKeywords}}
             @maxItems={{5}}
             @create={{true}}
             @createFilter={{this.keywordFilter}}
@@ -245,13 +244,13 @@
               <button
                 class='remove-cat'
                 type='button'
-                {{action 'removeFile'}}
+                {{on 'click' this.removeFile}}
               ><i class='far fa-times-circle'></i></button></p>
           {{else}}
             <ImageUpload
               @filesToBeUploaded={{this.filesToBeUploaded}}
               @hideSubmit={{true}}
-              @storeFiles={{action 'setFileToUpload'}}
+              @storeFiles={{this.setFileToUpload}}
             />
           {{/if}}
         </div>
@@ -325,35 +324,35 @@
           <button
             class='action_button cancel-button'
             type='button'
-            {{action 'cancelProblem'}}
+            {{on 'click' this.cancelProblem}}
           >Cancel</button>
           <button
             class='action_button primary-button'
             type='button'
-            {{action 'nextStep'}}
+            {{on 'click' this.nextStep}}
           >Next</button>
         {{else}}
           {{#if this.showLegal}}
             <button
               class='action_button cancel-button'
               type='button'
-              {{action 'backStep'}}
+              {{on 'click' this.backStep}}
             >Back</button>
             <button
               class='action_button primary-button'
               type='button'
-              {{action 'validate'}}
+              {{on 'click' this.validate}}
             >Create</button>
           {{else}}
             <button
               class='action_button cancel-button'
               type='button'
-              {{action 'backStep'}}
+              {{on 'click' this.backStep}}
             >Back</button>
             <button
               class='action_button primary-button'
               type='button'
-              {{action 'nextStep'}}
+              {{on 'click' this.nextStep}}
             >Next</button>
           {{/if}}
         {{/if}}
@@ -362,157 +361,24 @@
   </section>
 
   {{#each this.createProblemErrors as |error|}}
-    <ErrorBox @error={{error}} @showDismiss={{true}} />
+    <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
   {{/each}}
   {{#each this.imageUploadErrors as |error|}}
-    <ErrorBox @error={{error}} @showDismiss={{true}} />
+    <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
   {{/each}}
 
   {{#if this.isMissingRequiredFields}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error='Please provide all required fields'
       @showDismiss={{true}}
     />
   {{/if}}
 
   {{#if this.noLegalNotice}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error='Please verify that you have permission to post this problem'
       @showDismiss={{true}}
     />
   {{/if}}
 
-</div>
-
-{{!-- <section class="third submissions">
-  <form id='newproblemform' class='properForm'>
-    <fieldset>
-      <ol>
-        <li>
-          <label class="form-label" for="title" id="problemName">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.name}}>Problem Name </span>
-            <span class="required-star">*</span>
-          </label>
-          {{input id="title" required="true" type="text" value=title placeholder="enter problem name"
-          action="resetErrors" on="key-down"}}
-        </li>
-        <li>
-          <label class="form-label" for="text">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.statement}}>Problem Statement </span>
-            <span class="required-star">*</span></label>
-          <div class="quill-container">
-            <section id="editor"></section>
-          </div>
-        </li>
-        <li>
-          <label class="form-label" for="categories">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.categories}}>Problem Categories </span>
-            <span class="required-star">*</span>
-          </label>
-          {{#if selectedCategories}}
-          <ul class="problem-info">
-            {{#each selectedCategories as |category|}}
-            <li><a href="{{category.url}}" target="_blank">{{category.identifier}}</a> <button {{action 'removeCategory'
-                category}}><i class="far fa-times-circle"></i></button></li>
-            {{/each}}
-          </ul>
-          {{/if}}
-          {{#unless showCategories}}
-          <div class="button-row {{if selectedCategories " center"}}">
-            <button id="add-category" {{action 'showCategories' }}>Show Category Menu</button>
-          </div>
-          {{/unless}}
-          {{#if showCategories}}
-          <div class="button-row {{if selectedCategories " center"}}">
-            <button id="add-category" {{action 'showCategories' }}>Hide Category Menu</button>
-          </div>
-          {{categories-menu categories=categoryTree store=store addCategories="addCategories"}}
-          {{/if}}
-        </li>
-        <li>
-          <label class="form-label" for="keywords">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.keywords}}>Keywords</span>
-          </label>
-          {{twitter-typeahead}}
-        </li>
-        <li>
-          <label class="form-label" for="additionalInfo">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.additionalInfo}}>Additional Info</span>
-          </label>
-          {{textarea class="additional-info-area" value=additionalInfo rows="3" placeholder="Additional info..."}}
-          {{input id="additionalInfo" type="hidden" value=additionalInfo }}
-        </li>
-        <li>
-          <label class="form-label" for="imageUrl">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.additionalImage}}> Additional Image</span>
-          </label>
-          {{image-upload filesToBeUploaded = filesToBeUploaded hideSubmit = true}}
-        </li>
-        <li class="privacy-settings">
-          <label class="form-label">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.privacySettings}}> Privacy Settings</span>
-            <span class="required-star">*</span>
-          </label>
-          {{input type="radio" value=privacySetting required="true" name="privacy" class="justMe" click=(action
-          "radioSelect" 'M')}}
-          <label class="radio-label">Just Me</label>
-          {{input type="radio" id="myOrg" value=privacySetting required="true" name="privacy" class="myOrg"
-          click=(action "radioSelect" 'O')}}
-          <label class="radio-label">My Organization</label>
-          {{input type="radio" value=privacySetting required="true" name="privacy" class="everyone" click=(action
-          "radioSelect" 'E')}}
-          <label class="radio-label">Everyone</label>
-        </li>
-        <li>
-          <label class="form-label" for="copyright">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.copyrightNotice}}> Copyright Notice</span>
-          </label>
-          <span id="copyright-container">
-            <span id="icon">&copy;</span>
-            {{input name="copyright" id="copyright" type="text" value=copyrightNotice}}
-          </span>
-        </li>
-        <li>
-          <label class="form-label" for="sharing">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.sharingAuth}}> Sharing Authorization</span>
-          </label>
-          {{input name="sharing" id="sharing" type="text" value=sharingAuth}}
-        </li>
-        <li>
-          <label class="form-label" for="author">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.author}}> Author</span>
-          </label>
-          {{input name="author" id="author" type="text" value=author}}
-        </li>
-        <li>
-          <label class="form-label" for="legal-notice">
-            <span class="label-text simptip-position-right simptip-multiline simptip-smooth"
-              data-tooltip={{tooltips.legalNotice}}> Legal Notice</span>
-            <span class="required-star">*</span>
-          </label>
-          {{input type="checkbox" id="legal-notice" checked=approvedProblem required="true" click=(action
-          "resetErrors")}}
-          <span id="approved-problem">This problem does not contain any unapproved copywritten material</span>
-        </li>
-      </ol>
-    </fieldset>
-  </form>
-
-</section>
-<div style="clear: left"></div>
-<section class="submit">
-  <button class="action_button" {{action 'validate' }}>
-    Create Problem
-  </button>
-  <button class="action_button cancel-button" type="button" {{action 'cancelProblem' }}>Cancel</button>
-</section> --}}
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/app/components/problem-new.js b/app/components/problem-new.js
index d259f2b26..a478a8f57 100644
--- a/app/components/problem-new.js
+++ b/app/components/problem-new.js
@@ -1,18 +1,17 @@
-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 'underscore';
-import $ from 'jquery';
+import { service } from '@ember/service';
+import _isNull from 'lodash/isNull';
 
-export default class ProblemNewComponent extends ErrorHandlingComponent {
+export default class ProblemNewComponent extends Component {
   @service('sweet-alert') alert;
+  @service errorHandling;
   @service store;
   @service router;
+  @service currentUser;
   @tracked showGeneral = true;
   @tracked filesToBeUploaded = null;
-  @tracked createProblemErrors = [];
-  @tracked imageUploadErrors = [];
   @tracked isMissingRequiredFields = null;
   @tracked isPublic = null;
   @tracked privacySetting = null;
@@ -26,7 +25,6 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
   @tracked showGeneral = true;
   @tracked showAdditional = false;
   @tracked showLegal = false;
-  // parentActions: alias('parentView.actions'),
   @tracked approvedProblem = false;
   @tracked noLegalNotice = null;
   @tracked showCategories = false;
@@ -34,7 +32,6 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
   @tracked uploadResults = null;
   @tracked additionalImage = null;
   @tracked fileName = null;
-  @tracked categoryTree = {};
   tooltips = {
     name: 'Please try and give all your problems a unique title',
     statement: 'Content of the problem to be completed',
@@ -55,9 +52,18 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
   };
   @tracked selectedCategories = [];
 
+  get createProblemErrors() {
+    return this.errorHandling.getErrors('createProblemErrors') || [];
+  }
+
+  get imageUploadErrors() {
+    return this.errorHandling.getErrors('imageUploadErrors') || [];
+  }
+
   constructor() {
     super(...arguments);
-    $('.list-outlet').removeClass('hidden');
+    // if the outlet exists (where this component appears in the parent), show it
+    document.getElementById('outlet')?.classList.remove('hidden');
   }
 
   @action observeErrors() {
@@ -81,11 +87,11 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
 
   createProblem() {
     const problemStatement = this.problemStatement;
-    let createdBy = this.args.currentUser;
+    const currentUser = this.currentUser.user;
+    let createdBy = currentUser;
     let title = this.problemTitle.trim();
     let additionalInfo = this.additionalInfo;
     let privacySetting = this.privacySetting;
-    let currentUser = this.args.currentUser;
     let accountType = currentUser.accountType;
     let organization = currentUser.organization;
     let categories = this.selectedCategories;
@@ -139,18 +145,22 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
       for (let f of uploadData) {
         formData.append('photo', f);
       }
+      formData.append('createdBy', createdBy);
       let firstItem = uploadData[0];
       let isPDF = firstItem.type === 'application/pdf';
 
       if (isPDF) {
-        $.post({
-          url: '/pdf',
-          processData: false,
-          contentType: false,
-          data: formData,
-          createdBy: createdBy,
+        fetch('/pdf', {
+          method: 'POST',
+          body: formData,
         })
-          .then(function (res) {
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+          })
+          .then((res) => {
             this.uploadResults = res.images;
             this.store.findRecord('image', res.images[0]._id).then((image) => {
               createProblemData.set('image', image);
@@ -176,7 +186,7 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
                   ) {
                     this.toggleGeneral();
                   }
-                  this.handleErrors(
+                  this.errorHandling.handleErrors(
                     err,
                     'createProblemErrors',
                     createProblemData
@@ -185,16 +195,19 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
             });
           })
           .catch(function (err) {
-            this.handleErrors(err, 'imageUploadErrors');
+            this.errorHandling.handleErrors(err, 'imageUploadErrors');
           });
       } else {
-        $.post({
-          url: '/image',
-          processData: false,
-          contentType: false,
-          data: formData,
-          createdBy: createdBy,
+        fetch('/image', {
+          method: 'POST',
+          body: formData,
         })
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+          })
           .then(function (res) {
             this.uploadResults = res.images;
             this.store.findRecord('image', res.images[0]._id).then((image) => {
@@ -210,8 +223,6 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
                     false,
                     null
                   );
-                  // let parentView = this.parentView;
-                  // this.get('parentActions.refreshList').call(parentView);
                   this.router.transitionTo('problems.problem', problem.id);
                 })
                 .catch((err) => {
@@ -221,7 +232,7 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
                   ) {
                     this.toggleGeneral();
                   }
-                  this.handleErrors(
+                  this.errorHandling.handleErrors(
                     err,
                     'createProblemErrors',
                     createProblemData
@@ -230,7 +241,7 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
             });
           })
           .catch(function (err) {
-            this.handleErrors(err, 'imageUploadErrors');
+            this.errorHandling.handleErrors(err, 'imageUploadErrors');
           });
       }
     } else {
@@ -256,24 +267,36 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
           ) {
             this.toggleGeneral();
           }
-          this.handleErrors(err, 'createProblemErrors', createProblemData);
+          this.errorHandling.handleErrors(
+            err,
+            'createProblemErrors',
+            createProblemData
+          );
         });
     }
   }
 
   keywordFilter(keyword) {
     if (!keyword) {
-      return;
+      // No keyword was entered
+      return false;
     }
-    let keywords = $('#select-add-keywords')[0].selectize.items;
 
-    let keywordLower = keyword.trim().toLowerCase();
+    // Grab the element without jQuery
+    const selectEl = document.getElementById('select-add-keywords');
+    if (!selectEl || !selectEl.selectize) {
+      // If the element or Selectize isn't set up, allow keyword creation by default
+      return true;
+    }
 
-    let keywordsLower = _.map(keywords, (key) => {
-      return key.toLowerCase();
-    });
-    // don't let user create keyword if it matches exactly an existing keyword
-    return !_.contains(keywordsLower, keywordLower);
+    // Get the current list of items (strings/IDs)
+    const items = selectEl.selectize.items;
+    // Convert the new keyword and existing items to lowercase
+    const keywordLower = keyword.trim().toLowerCase();
+    const itemsLower = items.map((item) => item.toLowerCase());
+
+    // Don't let the user create the keyword if it matches an existing one exactly
+    return !itemsLower.includes(keywordLower);
   }
 
   @action radioSelect(value) {
@@ -297,14 +320,10 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
   }
 
   @action toggleCategories() {
-    this.store.query('category', {}).then((queryCats) => {
-      let categories = queryCats.get('meta');
-      this.categoryTree = categories.categories;
-    });
     this.showCategories = !this.showCategories;
   }
 
-  @action addCategories(category) {
+  @action addCategory(category) {
     let categories = this.selectedCategories;
     if (!categories.includes(category)) {
       categories.pushObject(category);
@@ -316,8 +335,9 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
     categories.removeObject(category);
   }
 
-  @action cancelProblem() {
-    $('.list-outlet').addClass('hidden');
+  @action
+  cancelProblem() {
+    document.getElementById('outlet')?.classList.add('hidden');
     this.router.transitionTo('problems');
   }
 
@@ -326,11 +346,6 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
     this.fileName = file[0].name;
   }
 
-  // @action removeFile() {
-  //   this.additionalImage = null;
-  //   this.fileName = null;
-  // }
-
   @action resetErrors() {
     const errors = [
       'noLegalNotice',
@@ -338,15 +353,12 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
       'imageUploadErrors',
     ];
 
-    for (let error of errors) {
-      if (this[error]) {
-        this[error] = null;
-      }
-    }
+    this.errorHandling.removeMessages(...errors);
   }
 
-  @action hideInfo() {
-    $('.list-outlet').addClass('hidden');
+  @action
+  hideInfo() {
+    document.getElementById('outlet')?.classList.add('hidden');
     this.router.transitionTo('problems');
   }
 
@@ -369,18 +381,16 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
   }
 
   @action toggleGeneral() {
-    // this.set('privacySetting', this.privacySetting);
     this.showGeneral = true;
     this.showCats = false;
     this.showAdditional = false;
     this.showLegal = false;
   }
 
-  @action toggleCats() {
+  @action
+  toggleCats() {
     // clear existing errors before validating
-    if (this.createProblemErrors) {
-      this.createProblemErrors = [];
-    }
+    this.errorHandling.removeMessages('createProblemErrors');
 
     if (this.showAdditional) {
       this.showCats = true;
@@ -389,12 +399,12 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
       this.showLegal = false;
     } else {
       this.problemTitle = this.title;
-      let quillContent = $('.ql-editor').html();
-      let problemStatement = quillContent.replace(/["]/g, "'");
+      const quillContent =
+        document.querySelector('.ql-editor')?.innerHTML || '';
+      const problemStatement = quillContent.replace(/["]/g, "'");
       this.problemStatement = problemStatement;
-      // this.set('privacySetting', this.privacySetting);
 
-      let isQuillValid = this.isQuillValid();
+      const isQuillValid = this.isQuillValid();
       if (
         !isQuillValid ||
         !this.problemTitle ||
@@ -456,7 +466,7 @@ export default class ProblemNewComponent extends ErrorHandlingComponent {
     }
     let keywords = this.keywords;
 
-    let isRemoval = _.isNull($item);
+    let isRemoval = _isNull($item);
 
     if (isRemoval) {
       keywords.removeObject(val);
diff --git a/app/components/recursive-menu.hbs b/app/components/recursive-menu.hbs
new file mode 100644
index 000000000..af983a446
--- /dev/null
+++ b/app/components/recursive-menu.hbs
@@ -0,0 +1,47 @@
+<li class='has-children'>
+  {{#if (not-empty @item.children)}}
+    <!-- Expandable (has children) -->
+    <input
+      type='checkbox'
+      id={{@item.identifier}}
+      name={{@item.identifier}}
+      checked={{this.isOpen}}
+      {{on 'change' this.toggleOpen}}
+    />
+    <label class='menu-label' for={{@item.identifier}}>
+      {{@item.description}}
+      {{#if @item.url}}
+        <a href={{@item.url}} target='_blank' rel='noopener noreferrer'>
+          <i class='fas fa-external-link-alt'></i>
+        </a>
+      {{/if}}
+    </label>
+
+    {{#if this.isOpen}}
+      <ul>
+        {{#each @item.children as |child|}}
+          <!-- Recursively render each child as a <RecursiveMenu> -->
+          <RecursiveMenu @item={{child}} @onAddCategory={{@onAddCategory}} />
+        {{/each}}
+
+        <!-- The 'Other' button for this parent item -->
+        <li class='item'>
+          <button type='button' {{on 'click' (fn @onAddCategory @item)}}>
+            +
+          </button>
+          Other
+        </li>
+      </ul>
+    {{/if}}
+  {{else}}
+    <!-- Leaf (no children) -->
+    <li class='item'>
+      <button type='button' {{on 'click' (fn @onAddCategory @item)}}>
+        +
+      </button>
+      <span>{{@item.identifier}}</span>
+      -
+      {{@item.description}}
+    </li>
+  {{/if}}
+</li>
\ No newline at end of file
diff --git a/app/components/recursive-menu.js b/app/components/recursive-menu.js
new file mode 100644
index 000000000..b471d0901
--- /dev/null
+++ b/app/components/recursive-menu.js
@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class RecursiveMenuComponent extends Component {
+  @tracked isOpen = false;
+
+  @action
+  toggleOpen() {
+    this.isOpen = !this.isOpen;
+  }
+}
diff --git a/app/components/selectize-input.js b/app/components/selectize-input.js
index 3f311560f..bf698ed01 100644
--- a/app/components/selectize-input.js
+++ b/app/components/selectize-input.js
@@ -162,7 +162,7 @@ export default class SelectizeInputComponent extends Component {
       .then((results) => {
         // results is Ember AdapterPopulatedRecordArray
         this.metaData = results.meta;
-        let resultsArray = results.toArray();
+        let resultsArray = results.slice();
         const selectedItemsHash = this.args.selectedItemsHash;
         const valueField = this.args.valueField;
 
diff --git a/app/components/checkbox-list-item.hbs b/app/components/ui/checkbox-list-item.hbs
similarity index 100%
rename from app/components/checkbox-list-item.hbs
rename to app/components/ui/checkbox-list-item.hbs
diff --git a/app/components/checkbox-list-item.js b/app/components/ui/checkbox-list-item.js
similarity index 100%
rename from app/components/checkbox-list-item.js
rename to app/components/ui/checkbox-list-item.js
diff --git a/app/components/checkbox-list.hbs b/app/components/ui/checkbox-list.hbs
similarity index 96%
rename from app/components/checkbox-list.hbs
rename to app/components/ui/checkbox-list.hbs
index 71cf20676..e5b7bde94 100644
--- a/app/components/checkbox-list.hbs
+++ b/app/components/ui/checkbox-list.hbs
@@ -18,7 +18,7 @@
     {{/if}}
     {{#each @items as |item|}}
       <li>
-        <CheckboxListItem
+        <Ui::CheckboxListItem
           @item={{item}}
           @selectedItems={{this.selectedItems}}
           @displayProp={{@itemDisplayProp}}
diff --git a/app/components/checkbox-list.js b/app/components/ui/checkbox-list.js
similarity index 100%
rename from app/components/checkbox-list.js
rename to app/components/ui/checkbox-list.js
diff --git a/app/components/error-box.hbs b/app/components/ui/error-box.hbs
similarity index 100%
rename from app/components/error-box.hbs
rename to app/components/ui/error-box.hbs
diff --git a/app/components/error-box.js b/app/components/ui/error-box.js
similarity index 100%
rename from app/components/error-box.js
rename to app/components/ui/error-box.js
diff --git a/app/components/ui/form-field.hbs b/app/components/ui/form-field.hbs
index 64f96545e..3a83aa03a 100644
--- a/app/components/ui/form-field.hbs
+++ b/app/components/ui/form-field.hbs
@@ -1,24 +1,50 @@
-<div class='ui-form-field'>
+<div
+  class='ui-form-field'
+  {{did-update this.resetEditingValue @isEditing}}
+  {{did-update this.resetEditingValue @value}}
+>
   {{! If isEditing is true, render an input/checkbox/other editable UI }}
   {{#if @isEditing}}
     {{#if (is-equal @type 'checkbox')}}
+      {{#if @label}}
+        <label for='{{this.id}}'>{{@label}}</label>
+      {{/if}}
       <input
+        id='{{this.id}}'
         type='checkbox'
         class='ui-checkbox {{@className}}'
         checked={{this.currentValue}}
         {{on 'change' this.handleCheckboxChange}}
       />
     {{else if (is-equal @type 'textarea')}}
+      {{#if @label}}
+        <label for='{{this.id}}'>{{@label}}</label>
+      {{/if}}
       <textarea
+        id='{{this.id}}'
         class='ui-textarea {{@className}}'
         value={{this.currentValue}}
+        placeholder={{@placeholder}}
         {{on 'input' this.handleInput}}
       ></textarea>
+    {{else if (is-equal @type 'button')}}
+      <button
+        type='button'
+        class='ui-button {{@className}}'
+        {{on 'click' this.handleButtonClick}}
+      >
+        {{@label}}
+      </button>
     {{else}}
+      {{#if @label}}
+        <label for='{{this.id}}'>{{@label}}</label>
+      {{/if}}
       <input
+        id='{{this.id}}'
         type='{{@type}}'
         class='ui-input {{@className}}'
         value={{this.currentValue}}
+        placeholder={{@placeholder}}
         {{on 'input' this.handleInput}}
       />
     {{/if}}
@@ -28,19 +54,21 @@
       {{#if (is-equal @type 'checkbox')}}
         {{if @value 'Yes' 'No'}}
       {{else}}
-        {{@value}}
+        {{make-html-safe @value}}
       {{/if}}
     </span>
   {{/if}}
 
-  {{! Render a button if provided }}
+  {{! Render a post-field button if provided }}
   {{#if @buttonLabel}}
-    <button
-      type='button'
-      class='ui-button {{@className}}'
-      {{on 'click' this.handleButtonClick}}
-    >
-      {{@buttonLabel}}
-    </button>
+    {{#if @isEditing}}
+      <button
+        type='button'
+        class='ui-button {{@className}}'
+        {{on 'click' this.handleButtonClick}}
+      >
+        {{@buttonLabel}}
+      </button>
+    {{/if}}
   {{/if}}
 </div>
\ No newline at end of file
diff --git a/app/components/ui/form-field.js b/app/components/ui/form-field.js
index e4ed262eb..38806c0e5 100644
--- a/app/components/ui/form-field.js
+++ b/app/components/ui/form-field.js
@@ -3,7 +3,11 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class UiFormFieldComponent extends Component {
-  @tracked currentValue = this.args.value; // Track the value for inline editing
+  @tracked currentValue = this.args.value;
+
+  get id() {
+    return this.args.id || this.args.name || 'xyzzy';
+  }
 
   @action
   handleInput(event) {
@@ -27,4 +31,9 @@ export default class UiFormFieldComponent extends Component {
       this.args.onClick();
     }
   }
+
+  @action
+  resetEditingValue() {
+    this.currentValue = this.args.value;
+  }
 }
diff --git a/app/components/ui/my-select.hbs b/app/components/ui/my-select.hbs
new file mode 100644
index 000000000..36bc19508
--- /dev/null
+++ b/app/components/ui/my-select.hbs
@@ -0,0 +1,31 @@
+<div class='mySelect my-select'><select
+    disabled={{@isDisabled}}
+    {{on 'change' this.selectChange}}
+  >
+    {{#if @prompt}}
+      {{#unless @selectedValue}}
+        <option value='' id='select-prompt'>{{@prompt}}</option>
+      {{/unless}}
+    {{/if}}
+
+    {{#each @content as |item|}}
+      <option
+        class='option'
+        value='{{item}}'
+        selected={{is-equal item @selectedValue}}
+      >
+        {{item}}
+      </option>
+    {{/each}}
+  </select>
+
+  {{#unless @cannotBeNull}}
+    {{#if @selectedValue}}
+      <i
+        {{on 'click' this.clearSelection}}
+        class='fa fa-times cancel-icon'
+        aria-hidden='true'
+      ></i>
+    {{/if}}
+  {{/unless}}
+</div>
\ No newline at end of file
diff --git a/app/components/ui/my-select.js b/app/components/ui/my-select.js
new file mode 100644
index 000000000..05d4dff3f
--- /dev/null
+++ b/app/components/ui/my-select.js
@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class MySelectComponent extends Component {
+  @action
+  selectChange(event) {
+    let selectedIndex = event.target.selectedIndex;
+    if (this.args.prompt && selectedIndex > 0) {
+      selectedIndex -= 1;
+    }
+
+    const selectedItem = this.args.content[selectedIndex];
+    if (this.args.action) {
+      this.args.action(selectedItem);
+    }
+  }
+
+  @action
+  clearSelection() {
+    if (this.args.action) {
+      this.args.action(null);
+    }
+  }
+}
diff --git a/app/components/radio-filter.hbs b/app/components/ui/radio-filter.hbs
similarity index 100%
rename from app/components/radio-filter.hbs
rename to app/components/ui/radio-filter.hbs
diff --git a/app/components/radio-filter.js b/app/components/ui/radio-filter.js
similarity index 100%
rename from app/components/radio-filter.js
rename to app/components/ui/radio-filter.js
diff --git a/app/components/radio-group-item.hbs b/app/components/ui/radio-group-item.hbs
similarity index 100%
rename from app/components/radio-group-item.hbs
rename to app/components/ui/radio-group-item.hbs
diff --git a/app/components/radio-group.hbs b/app/components/ui/radio-group.hbs
similarity index 96%
rename from app/components/radio-group.hbs
rename to app/components/ui/radio-group.hbs
index 2e2501a5a..14c245405 100644
--- a/app/components/radio-group.hbs
+++ b/app/components/ui/radio-group.hbs
@@ -14,7 +14,7 @@
   {{#each @options.inputs as |input|}}
     <ol class='radio-list'>
       <li>
-        <RadioGroupItem
+        <Ui::RadioGroupItem
           @noWidth={{@noWidth}}
           @selectedValue={{@selectedValue}}
           @label={{input.label}}
diff --git a/app/components/radio-group.js b/app/components/ui/radio-group.js
similarity index 100%
rename from app/components/radio-group.js
rename to app/components/ui/radio-group.js
diff --git a/app/components/ui/tab-buttons.hbs b/app/components/ui/tab-buttons.hbs
new file mode 100644
index 000000000..a49dc3abe
--- /dev/null
+++ b/app/components/ui/tab-buttons.hbs
@@ -0,0 +1,15 @@
+<div class='info-menu'>
+  {{! We expect @tabs to be an array of objects like:
+       [{ label: "General", key: "general" }, ... ] }}
+  {{#each @tabs as |tab|}}
+    <button
+      type='button'
+      class='tab-link
+        {{tab.key}}
+        {{if (is-equal tab.key @activeTab) "active-btn"}}'
+      {{on 'click' (fn @onSelect tab.key)}}
+    >
+      {{tab.label}}
+    </button>
+  {{/each}}
+</div>
\ No newline at end of file
diff --git a/app/components/wordcloud-container.hbs b/app/components/ui/wordcloud-container.hbs
similarity index 100%
rename from app/components/wordcloud-container.hbs
rename to app/components/ui/wordcloud-container.hbs
diff --git a/app/components/wordcloud-container.js b/app/components/ui/wordcloud-container.js
similarity index 100%
rename from app/components/wordcloud-container.js
rename to app/components/ui/wordcloud-container.js
diff --git a/app/components/collapsible-list.hbs b/app/components/user-collapsible-list.hbs
similarity index 100%
rename from app/components/collapsible-list.hbs
rename to app/components/user-collapsible-list.hbs
diff --git a/app/components/collapsible-list.js b/app/components/user-collapsible-list.js
similarity index 100%
rename from app/components/collapsible-list.js
rename to app/components/user-collapsible-list.js
diff --git a/app/components/user-info.hbs b/app/components/user-info.hbs
index 830c615b4..52333ef94 100644
--- a/app/components/user-info.hbs
+++ b/app/components/user-info.hbs
@@ -1,5 +1,7 @@
-<h3><span class='username'>{{@user.username}}</span>'s Account Details</h3>
-{{#each this.errorHandling.loadOrgsErrors as |error|}}
+<h3>
+  <span class='username'>{{@user.username}}</span>'s Account Details
+</h3>
+{{#each this.loadOrgsErrors as |error|}}
   <p class='error-message'>{{error}}</p>
 {{/each}}
 <article class='user'>
@@ -11,36 +13,38 @@
     <tr>
       <td>Username</td>
       <td>
-        {{#if this.isEditing}}
-          <Input
-            @value={{@user.username}}
-            class='user-username'
-            {{on 'input' (fn (mut user.username) value='target.value')}}
-          />
-        {{else}}
-          {{@user.username}}
-        {{/if}}
+        <Ui::FormField
+          @isEditing={{this.isEditing}}
+          @type='text'
+          @value={{@user.username}}
+          @className='user-username'
+          @onChange={{fn this.handleChange 'username'}}
+        />
       </td>
     </tr>
 
     <tr>
       <td>First Name</td>
       <td>
-        {{#if this.isEditing}}
-          <Input @value={{@user.firstName}} class='user-first-name' />
-        {{else}}
-          {{@user.firstName}}
-        {{/if}}
+        <Ui::FormField
+          @isEditing={{this.isEditing}}
+          @type='text'
+          @value={{@user.firstName}}
+          @className='user-first-name'
+          @onChange={{fn this.handleChange 'firstName'}}
+        />
       </td>
     </tr>
     <tr>
       <td>Last Name</td>
       <td>
-        {{#if this.isEditing}}
-          <Input @value={{@user.lastName}} class='user-last-name' />
-        {{else}}
-          {{@user.lastName}}
-        {{/if}}
+        <Ui::FormField
+          @isEditing={{this.isEditing}}
+          @type='text'
+          @value={{@user.lastName}}
+          @className='user-last-name'
+          @onChange={{fn this.handleChange 'lastName'}}
+        />
       </td>
     </tr>
     <tr>
@@ -52,11 +56,13 @@
     <tr>
       <td>Email</td>
       <td>
-        {{#if this.isEditing}}
-          <Input @value={{@user.email}} class='user-email' />
-        {{else}}
-          {{@user.email}}
-        {{/if}}
+        <Ui::FormField
+          @isEditing={{this.isEditing}}
+          @type='text'
+          @value={{@user.email}}
+          @className='user-email'
+          @onChange={{fn this.handleChange 'email'}}
+        />
       </td>
     </tr>
 
@@ -64,22 +70,20 @@
       <tr>
         <td>Email Confirmed</td>
         <td class='is-email-confirm'>
-          {{#if this.isEditing}}
-            {{#if this.unconfirmedEmail}}
-              {{#if @user.email}}
-                <input
-                  class='user-email-auth'
-                  type='checkbox'
-                  checked={{@user.isEmailConfirmed}}
-                  onclick={{action 'onManualConfirm' @user.isEmailConfirmed}}
-                />
-                <label for=''>Manually confirm email?</label>
-              {{/if}}
-            {{else}}
-              {{@user.isEmailConfirmed}}
-            {{/if}}
+          {{#if this.noEmail}}
+            No email address provided
+          {{else if @user.isEmailConfirmed}}
+            {{! Note: Use the original value so can undo during editing }}
+            Yes
           {{else}}
-            {{@user.isEmailConfirmed}}
+            <Ui::FormField
+              @isEditing={{this.isEditing}}
+              @type='checkbox'
+              @value={{@user.isEmailConfirmed}}
+              @className='user-email-auth'
+              @label='Manually confirm email?'
+              @onChange={{fn this.handleChange 'isEmailConfirmed'}}
+            />
           {{/if}}
         </td>
       </tr>
@@ -87,8 +91,23 @@
     {{#if this.isEditing}}
       <tr>
         <td>Password</td>
-        <td><button class='reset-password' type="button" {{action 'resetPassword'}}>Reset
-            Password</button></td>
+        <td>
+          {{#if this.isResettingPassword}}
+            <ResetPasswordUser
+              @user={{@user}}
+              @handleResetSuccess={{this.handleResetSuccess}}
+              @cancelReset={{this.handleCancelForm}}
+            />
+          {{else}}
+            <button
+              class='reset-password'
+              type='button'
+              {{on 'click' this.resetPassword}}
+            >
+              Reset Password
+            </button>
+          {{/if}}
+        </td>
       </tr>
     {{/if}}
     {{#unless @user.organizationRequest}}
@@ -97,14 +116,16 @@
           {{#if this.isEditing}}<span class='required-star'>*</span>{{/if}}</td>
         {{#if this.isEditing}}
           {{#if @currentUser.isAdmin}}
-            <td><TwitterTypeahead
+            <td>
+              <Ui::TwitterTypeahead
                 @dataList={{@orgList}}
                 @selectedValue={{@user.organization}}
                 @onSelect='setOrg'
                 @minLength={{0}}
                 @optionLabelPath='name'
                 @setSelectedValueOnChange={{true}}
-              /></td>
+              />
+            </td>
           {{else}}
             <td>{{@user.organization.name}}</td>
           {{/if}}
@@ -121,8 +142,11 @@
             <td>
               Would you like to create
               {{@user.organizationRequest}}<br />
-              <button type="button" {{action 'confirmOrgModal'}}>Yes</button>
-              <button type="button" {{action 'removeOrg'}}>No</button>
+              <button
+                type='button'
+                {{on 'click' this.confirmOrgModal}}
+              >Yes</button>
+              <button type='button' {{on 'click' this.removeOrg}}>No</button>
             </td>
           {{else}}
             {{@user.organizationRequest}}
@@ -139,10 +163,11 @@
         <td>User's Sections</td>
         <td>
           {{#each @userSections as |section|}}
-            <p><LinkTo
-                @route='sections.section'
-                @model={{section.id}}
-              >{{section.name}}</LinkTo></p>
+            <p>
+              <LinkTo @route='sections.section' @model={{section.id}}>
+                {{section.name}}
+              </LinkTo>
+            </p>
           {{/each}}
         </td>
       </tr>
@@ -150,32 +175,36 @@
     <tr>
       <td>Location</td>
       <td>
-        {{#if this.isEditing}}
-          <Input @value={{@user.location}} class='user-location' />
-        {{else}}
-          {{@user.location}}
-        {{/if}}
+        <Ui::FormField
+          @isEditing={{this.isEditing}}
+          @type='text'
+          @value={{@user.location}}
+          @className='user-location'
+          @onChange={{fn this.handleChange 'location'}}
+        />
       </td>
     </tr>
     <tr>
       <td>Seen Tour</td>
       <td>
-        {{#if this.isEditing}}
-          {{#if this.seenTour}}
-            <button class='clearTour' type="button" {{action 'clearTour'}}>re-take tour</button>
-          {{else}}
-            <button class='doneTour' type="button" {{action 'doneTour'}}>don't show the tour</button>
-          {{/if}}
-        {{/if}}
-        <span class='tourDate'>{{this.tourDate}}</span>
+        <Ui::FormField
+          @isEditing={{this.isEditing}}
+          @type='button'
+          @value={{this.tourDate}}
+          @className='user-seen-tour'
+          @onClick={{if this.seenTour this.clearTour this.doneTour}}
+          @label={{if this.seenTour 'Re-take tour' 'Skip the tour'}}
+        />
       </td>
     </tr>
     <tr>
       <td>Last Seen</td>
       {{#if @user.lastSeen}}
-        <td>{{format-date @user.lastSeen 'MMM Do YYYY'}}
+        <td>
+          {{format-date @user.lastSeen 'MMM Do YYYY'}}
           at
-          {{format-date @user.lastSeen 'hh:mma'}}</td>
+          {{format-date @user.lastSeen 'hh:mma'}}
+        </td>
       {{else}}
         <td>Never</td>
       {{/if}}
@@ -183,9 +212,11 @@
     {{#if @user.lastModifiedBy}}
       <tr>
         <td>Last Modified</td>
-        <td>{{format-date @user.lastModifiedDate 'MMM Do YYYY'}}
+        <td>
+          {{format-date @user.lastModifiedDate 'MMM Do YYYY'}}
           by
-          {{@user.lastModifiedBy.username}}</td>
+          {{@user.lastModifiedBy.username}}
+        </td>
       </tr>
     {{/if}}
     <tr>
@@ -194,16 +225,11 @@
       {{#if this.isEditing}}
         <td>
           {{#if this.canEdit}}
-            <MySelect
-              @selectedValue={{this.selectedType}}
+            <Ui::MySelect
+              @selectedValue={{account-types @user.accountType}}
               @cannotBeNull={{true}}
               @content={{this.accountTypes}}
-              @action={{action (mut this.selectedType)}}
-            />
-            <Input
-              required={{true}}
-              @type='hidden'
-              @value={{this.selectedType}}
+              @action={{this.handleAccountTypeChange}}
             />
           {{/if}}
         </td>
@@ -211,112 +237,87 @@
         <td>{{account-types @user.accountType}}</td>
       {{/if}}
     </tr>
-    {{#if @user.isAuthorized}}
+    <tr>
+      <td>Authorized</td>
+      <td>
+        {{#if this.canEdit}}
+          <Ui::FormField
+            @isEditing={{this.isEditing}}
+            @type='checkbox'
+            @value={{yes-no @user.isAuthorized}}
+            @checked={{@user.isAuthorized}}
+            @className='user-isAuth'
+            @onChange={{fn this.handleChange 'isAuthorized'}}
+          />
+        {{else}}
+          {{yes-no @user.isAuthorized}}
+        {{/if}}
+      </td>
+    </tr>
+    {{#if @user.authorizedBy}}
       <tr>
-        <td>Authorized</td>
-        <td>
-          {{#if this.isEditing}}
-            {{#if this.canEdit}}
-              <Input
-                @type='checkbox'
-                @checked={{@user.isAuthorized}}
-                class='user-isAuth'
-              />
-            {{else}}
-              {{@user.isAuthorized}}
-            {{/if}}
-          {{else}}
-            {{@user.isAuthorized}}
-          {{/if}}
-        </td>
+        <td>Authorized By</td>
+        <td>{{@user.authorizedBy.username}}</td>
       </tr>
-      {{#if @user.authorizedBy}}
-        <tr>
-          <td>Authorized By</td>
-          <td>{{@user.authorizedBy.username}}</td>
-        </tr>
-      {{/if}}
-    {{else}}
+    {{/if}}
+    {{#if @user.requestReason}}
       <tr>
-        <td>Request Reason</td>
+        <td>Reason for Authorization Requst</td>
         <td>
           {{@user.requestReason}}
         </td>
       </tr>
-      {{#if this.isEditing}}
-        <tr>
-          <td>Authorize</td>
-          <td>
-            {{#if this.canEdit}}
-              <Input
-                @type='checkbox'
-                @checked={{@user.isAuthorized}}
-                name='isAuthorized'
-                class='user-isAuth'
-              />
-            {{else}}
-              {{@user.isAuthorized}}
-            {{/if}}
-          </td>
-        </tr>
-      {{else}}
-        <tr>
-          <td>Authorized</td>
-          <td>
-            No
-          </td>
-        </tr>
-      {{/if}}
     {{/if}}
   </table>
   {{#if this.canEdit}}
     {{#if this.isEditing}}
-      {{#if this.isResettingPassword}}
-        <ResetPasswordUser
-          @user={{@user}}
-          @handleResetSuccess={{action 'handleResetSuccess'}}
-          @cancelReset={{action 'handleCancelForm'}}
-        />
-      {{/if}}
-      {{#unless this.isResettingPassword}}
-        <div class='button-row'>
-          <button
-            class='action_button save-user' type="button" {{action 'checkOrgExists'}}
-          >Save</button>
-          <button
-            class='action_button cancel-button cancel-user' type="button" {{action 'cancel'}}
-          >Cancel</button>
-        </div>
-      {{/unless}}
+      <div class='button-row'>
+        <button
+          class='action_button save-user'
+          type='button'
+          {{on 'click' this.handleSave}}
+        >Save</button>
+        <button
+          class='action_button cancel-button cancel-user'
+          type='button'
+          {{on 'click' this.handleCancelEdit}}
+        >Cancel</button>
+      </div>
     {{else}}
       <div class='button-row'>
         <button
-          class='action_button edit-user' type="button" {{action 'editUser'}}
+          class='action_button edit-user'
+          type='button'
+          {{on 'click' this.editUser}}
         >Edit</button>
         {{#if @currentUser.isAdmin}}
           {{#if @user.isTrashed}}
             <button
-              class='action_button restore-button' type="button" {{action 'restoreUser'}}
+              class='action_button restore-button'
+              type='button'
+              {{on 'click' this.restoreUser}}
             >Restore User</button>
           {{else}}
             <button
-              class='action_button delete-button' type="button" {{action 'deleteUser'}}
+              class='action_button delete-button'
+              type='button'
+              {{on 'click' this.deleteUser}}
             >Delete</button>
           {{/if}}
         {{/if}}
       </div>
     {{/if}}
   {{else}}
-    <p class='warning-message'>You can't edit users you haven't created. Contact
-      an admin to make changes.</p>
+    <p class='warning-message'>You may not edit users whom you did not create.
+      Contact an admin to make changes.</p>
   {{/if}}
 </article>
-{{#each this.errorHandling.findRecordErrors as |error|}}
+{{#each this.findRecordErrors as |error|}}
   <p class='error-message'>{{error}}</p>
 {{/each}}
-{{#each this.errorHandling.createRecordErrors as |error|}}
+{{#each this.createRecordErrors as |error|}}
   <p class='error-message'>{{error}}</p>
 {{/each}}
-{{#each this.errorHandling.updateRecordErrors as |error|}}
+{{#each this.updateRecordErrors as |error|}}
   <p class='error-message'>{{error}}</p>
 {{/each}}
\ No newline at end of file
diff --git a/app/components/user-info.js b/app/components/user-info.js
index 0db8cbb15..14fc8c77f 100644
--- a/app/components/user-info.js
+++ b/app/components/user-info.js
@@ -9,125 +9,118 @@ export default class UserInfoComponent extends Component {
   @service('utility-methods') utils;
   @service('error-handling') errorHandling;
   @service('edit-permissions') basePermissions;
+  @service currentUser;
   @service store;
 
   @tracked isEditing = false;
-  @tracked authorized = null;
-  @tracked selectedType = null;
-  @tracked willOveride = null;
-  @tracked fieldType = 'password';
-  @tracked loadOrgsErrors = [];
-  @tracked updateRecordErrors = [];
-  @tracked createRecordErrors = [];
-  @tracked findRecordErrors = [];
   @tracked isResettingPassword = false;
+  @tracked user = null;
 
-  get canEdit() {
-    let user = this.args.user;
-    let currentUser = this.args.currentUser;
-    if (!user || !currentUser) {
-      return false;
-    }
-
-    // is Admin
-    if (this.args.currentUser.accountType === 'A') {
-      return true;
-    }
+  get loadOrgsErrors() {
+    return this.errorHandling.getErrors('loadOrgsErrors');
+  }
 
-    // is self
-    if (user.get('id') === currentUser.get('id')) {
-      return true;
-    }
+  get updateRecordErrors() {
+    return this.errorHandling.getErrors('updateRecordErrors');
+  }
 
-    let creatorId = this.utils.getBelongsToId(user, 'createdBy');
+  get createRecordErrors() {
+    return this.errorHandling.getErrors('createRecordErrors');
+  }
 
-    // is creator
-    if (currentUser.get('id') === creatorId) {
-      return true;
-    }
+  get findRecordErrors() {
+    return this.errorHandling.getErrors('findRecordErrors');
+  }
 
-    // pd admin for user's org
-    if (this.basePermissions.isRecordInPdDomain(user)) {
-      return true;
-    }
-    return false;
+  get noEmail() {
+    return !this.args.user.email;
   }
 
-  get canConfirm() {
-    if (this.basePermissions.isActingAdmin) {
-      return true;
-    }
-    if (this.basePermissions.isRecordInPdDomain(this.args.user)) {
-      return true;
-    }
-    return false;
+  get canEdit() {
+    const user = this.args.user;
+    if (!user) return false;
+
+    const creatorId = this.utils.getBelongsToId(user, 'createdBy');
+
+    // can edit if:
+    // - current user is an admin
+    // - current user is editing their own profile
+    // - current user is the creator of the user
+    // - current user is a PD admin for the user's org
+    return (
+      this.currentUser.isAdmin ||
+      user.id === this.currentUser.id ||
+      creatorId === this.currentUser.id ||
+      this.basePermissions.isRecordInPdDomain(user)
+    );
   }
 
-  get unconfirmedEmail() {
-    return !this.args.user.isEmailConfirmed;
+  get canConfirm() {
+    return (
+      this.currentUser.isActingAdmin ||
+      this.basePermissions.isRecordInPdDomain(this.args.user)
+    );
   }
 
   get accountTypes() {
-    let accountType = this.args.currentUser.get('accountType');
-    let accountTypes;
-
-    if (accountType === 'A') {
-      accountTypes = ['Teacher', 'Student', 'Pd Admin', 'Admin'];
-    } else if (accountType === 'P') {
-      accountTypes = ['Teacher', 'Student'];
-    } else if (accountType === 'T') {
-      accountTypes = ['Student'];
+    if (this.currentUser.isAdmin) {
+      return ['Teacher', 'Student', 'Pd Admin', 'Admin'];
+    } else if (this.currentUser.isPdAdmin) {
+      return ['Teacher', 'Student'];
+    } else if (this.currentUser.isTeacher) {
+      return ['Student'];
     } else {
-      accountTypes = [];
+      return [];
     }
+  }
 
-    return accountTypes;
+  get seenTour() {
+    return this.user?.seenTour ?? this.args.user.seenTour;
   }
 
   get tourDate() {
-    var date = this.seenTour;
+    var date = this.args.user.seenTour;
     if (date) {
       return moment(date).fromNow();
     }
-    return 'no';
+    return 'No';
   }
 
-  @action editUser() {
-    let user = this.args.user;
-    this.userEmail = user.email;
-
-    let accountType = user.get('accountType');
-    if (accountType === 'S') {
-      this.selectedType = 'Student';
-    } else if (accountType === 'T') {
-      this.selectedType = 'Teacher';
-    } else if (accountType === 'A') {
-      this.selectedType = 'Admin';
-    } else if (accountType === 'P') {
-      this.selectedType = 'Pd Admin';
-    } else {
-      this.selectedType = null;
-    }
+  @action
+  editUser() {
     this.isEditing = true;
-    let isAuth = user.get('isAuthorized');
-    this.authorized = isAuth;
+    this.user = this.extractEditableProperties(this.args.user);
+  }
+
+  @action
+  handleCancelEdit() {
+    this.isEditing = false;
+    this.user = this.extractEditableProperties(this.args.user);
+  }
+
+  @action
+  handleSave() {
+    this.checkOrgExists();
+  }
+
+  @action
+  handleChange(property, value) {
+    this.user = { ...this.user, [property]: value };
+  }
+
+  @action
+  handleAccountTypeChange(value) {
+    this.handleChange('accountType', value[0]);
   }
 
   @action checkOrgExists() {
-    let user = this.args.user;
-    let userOrg = user.get('organization.content');
-    let userOrgRequest = user.get('organizationRequest');
+    let user = this.user;
+    let userOrg = user.organization?.content;
+    let userOrgRequest = user.organizationRequest;
     let org = this.org;
     let orgReq = this.orgReq;
 
-    let options = [
-      Boolean(userOrg),
-      Boolean(userOrgRequest),
-      Boolean(org),
-      Boolean(orgReq),
-    ];
-
-    if (options.includes(true)) {
+    if (userOrg || userOrgRequest || org || orgReq) {
       this.saveUser();
     } else {
       this.alert
@@ -146,38 +139,38 @@ export default class UserInfoComponent extends Component {
   }
 
   saveUser() {
-    let currentUser = this.args.currentUser;
-    let user = this.args.user;
-    let org = this.org;
-    let orgReq = this.orgReq;
+    const user = this.args.user;
+
+    // set the isConfirmingEmail flag if the current user has manually confirmed this user's email
+    // so server knows whether to make request to sso server
+    user.isConfirmingEmail =
+      this.user.isEmailConfirmed && !user.isEmailConfirmed;
+
+    // update user with the values from the properties in this.user
+    Object.keys(this.user).forEach((key) => {
+      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);
     if (matchingOrg) {
-      org = matchingOrg;
-      orgReq = null;
+      this.org = matchingOrg;
+      this.orgReq = null;
     }
 
-    // should we check to see if any information was actually updated before updating modified by/date?
-    let accountType = this.selectedType;
-    let accountTypeLetter = accountType.charAt(0).toUpperCase();
-    user.set('accountType', accountTypeLetter);
-
     if (org) {
-      user.set('organization', org);
+      user.org = org;
     }
     if (orgReq) {
-      user.set('organizationRequest', orgReq);
+      user.organizationRequest = orgReq;
     }
-    user.set('email', this.userEmail);
 
     //if is authorized is now true, then we need to set the value of authorized by to current user
-    let newDate = new Date();
-    user.set('lastModifiedBy', currentUser);
-    user.set('lastModifiedDate', newDate);
-
-    // so server knows whether to make request to sso server
-    user.set('isConfirmingEmail', this.isConfirmingEmail);
+    user.lastModifiedBy = this.currentUser.user;
+    user.lastModifiedDate = new Date();
 
     user
       .save()
@@ -190,7 +183,6 @@ export default class UserInfoComponent extends Component {
           false,
           null
         );
-        this.isEditing = false;
         this.errorHandling.removeMessages('updateRecordErrors');
       })
       .catch((err) => {
@@ -211,14 +203,11 @@ export default class UserInfoComponent extends Component {
     }
   }
 
-  @action resetPassword() {
+  @action
+  resetPassword() {
     this.isResettingPassword = true;
   }
 
-  @action authEmail() {
-    this.willOveride = true;
-  }
-
   @action confirmOrgModal() {
     let user = this.args.user;
     let reqOrg = user.get('organizationRequest');
@@ -238,11 +227,10 @@ export default class UserInfoComponent extends Component {
 
   @action createNewOrg() {
     let user = this.args.user;
-    let currentUser = this.args.currentUser;
     let reqOrg = user.get('organizationRequest');
     let newOrg = this.store.createRecord('organization', {
       name: reqOrg,
-      createdBy: currentUser,
+      createdBy: this.currentUser.user,
     });
     newOrg
       .save()
@@ -255,7 +243,7 @@ export default class UserInfoComponent extends Component {
         user.set('organizationRequest', null);
         user
           .save()
-          .then((user) => {
+          .then(() => {
             this.alert.showToast(
               'success',
               `${orgName} Created`,
@@ -281,7 +269,7 @@ export default class UserInfoComponent extends Component {
     user.set('organizationRequest', null);
     user
       .save()
-      .then((res) => {
+      .then(() => {
         // handle success
         this.errorHandling.removeMessages('updateRecordErrors');
       })
@@ -370,29 +358,37 @@ export default class UserInfoComponent extends Component {
     this.isResettingPassword = false;
   }
 
-  @action handleResetSuccess(updatedUser) {
+  @action handleResetSuccess() {
     this.isResettingPassword = false;
     this.resetPasswordSuccess = true;
     this.errorHandling.removeMessages('findRecordErrors');
     this.args.refresh();
   }
 
-  @action clearTour() {
-    this.args.user.seenTour = null;
+  @action
+  clearTour() {
+    this.handleChange('seenTour', null);
   }
 
-  @action doneTour() {
-    this.args.user.seenTour = new Date();
+  @action
+  doneTour() {
+    this.handleChange('seenTour', new Date());
   }
-  @action onManualConfirm() {
-    // clicked manual confirm email box
-    let user = this.args.user;
-
-    if (user) {
-      let isConfirmingEmail = !user.get('isEmailConfirmed');
 
-      this.isConfirmingEmail = isConfirmingEmail;
-      user.toggleProperty('isEmailConfirmed');
-    }
+  extractEditableProperties(user) {
+    return {
+      username: user.username,
+      firstName: user.firstName,
+      lastName: user.lastName,
+      email: user.email,
+      isEmailConfirmed: user.isEmailConfirmed,
+      organizationRequest: user.organizationRequest,
+      location: user.location,
+      accountType: user.accountType,
+      organization: user.organization,
+      isAuthorized: user.isAuthorized,
+      isTrashed: user.isTrashed,
+      seenTour: user.seenTour,
+    };
   }
 }
diff --git a/app/components/user-list.hbs b/app/components/user-list.hbs
index d2b4a27fb..a8d4ba270 100644
--- a/app/components/user-list.hbs
+++ b/app/components/user-list.hbs
@@ -7,57 +7,57 @@
   </header>
   <section>
     <nav class='list-box'>
-      <CollapsibleList
+      <UserCollapsibleList
         @tag='your-account'
         @title='Your account'
         @user={{@currentUser}}
       />
       {{#if @currentUser.isTeacher}}
-        <CollapsibleList
+        <UserCollapsibleList
           @title='Students in your Classes'
           @users={{this.yourStudents}}
           @noInfo="You don't have any students yet"
         />
-        <CollapsibleList
+        <UserCollapsibleList
           @tag='your-users'
           @title='Users you have created'
           @users={{this.yourUsers}}
           @noInfo="You haven't created any users yet"
         />
-        <CollapsibleList
+        <UserCollapsibleList
           @tag='org-users'
           @title='Users in {{@currentUser.organization.name}}'
           @users={{this.orgUsers}}
           @noInfo='There are no users in your organization'
         />
       {{/if}}
-      <CollapsibleList
+      <UserCollapsibleList
         @tag='waiting-auth'
         @title='Waiting for Authorization'
         @users={{this.unauthUsers}}
         @noInfo='There are no users waiting to be authorized'
       />
       {{#if @currentUser.isAdmin}}
-        <CollapsibleList
+        <UserCollapsibleList
           @tag='admin-users'
           @title='Administrators'
           @users={{this.adminUsers}}
           @noInfo='There are no admins'
         />
-        <CollapsibleList
+        <UserCollapsibleList
           @tag='pd-users'
           @title='Pd Admins'
           @users={{this.pdUsers}}
           @noInfo='There are no Pd Admins yet'
         />
       {{/if}}
-      <CollapsibleList
+      <UserCollapsibleList
         @tag='teacher-users'
         @title='Teacher'
         @users={{this.teacherUsers}}
         @noInfo='There are no teachers yet'
       />
-      <CollapsibleList
+      <UserCollapsibleList
         @tag='student-users'
         @title='Students'
         @users={{this.studentUsers}}
@@ -67,16 +67,16 @@
         <button
           class='toggle-button'
           type='button'
-          {{action 'toggleDeletedUsers'}}
+          {{on 'click' this.toggleDeletedUsers}}
         >
           {{if this.showDeletedUsers 'Hide' 'Show'}}
           Deleted Users
         </button>
 
         {{#if this.showDeletedUsers}}
-          <CollapsibleList
+          <UserCollapsibleList
             @title='Deleted Users'
-            @users={{this.trashedUsers}}
+            @users={{@trashedUsers}}
             @noInfo='There are no trashed users.'
           />
         {{/if}}
diff --git a/app/components/user-list.js b/app/components/user-list.js
index f2e31b6a5..f58f2b3f6 100644
--- a/app/components/user-list.js
+++ b/app/components/user-list.js
@@ -8,126 +8,128 @@ export default class UserListComponent extends Component {
   @service store;
 
   get unauthUsers() {
-    let users = this.args.users.filterBy('isTrashed', false);
-    let unauthUsers = users.filterBy('isAuthorized', false);
-    if (this.args.currentUser.isPdAdmin) {
-      let orgUsersNotYou = unauthUsers
-        .filterBy(
-          'organization.id',
-          this.args.currentUser.get('organization.id')
-        )
-        .rejectBy('username', this.args.currentUser.user);
-      return orgUsersNotYou.sortBy('createDate').reverse();
+    const { users, currentUser } = this.args;
+    const filteredUsers = users.filter(
+      (user) => !user.isTrashed && !user.isAuthorized
+    );
+
+    if (currentUser.isPdAdmin) {
+      const orgUsers = filteredUsers.filter(
+        (user) =>
+          user.organization?.id === currentUser.organization?.id &&
+          user.username !== currentUser.username
+      );
+      return this.sortByCreateDateDesc(orgUsers);
     }
-    return unauthUsers.sortBy('createDate').reverse();
+
+    return this.sortByCreateDateDesc(filteredUsers);
   }
 
   get adminUsers() {
-    let users = this.args.users.filterBy('isTrashed', false);
-    let authUsers = users.filterBy('isAuthorized', true);
-    let adminUsers = authUsers.filterBy('accountType', 'A');
-    let adminUsersNotYou = adminUsers.rejectBy(
-      'username',
-      this.args.currentUser.username
+    const { users, currentUser } = this.args;
+    const filteredAdmins = users.filter(
+      (user) =>
+        !user.isTrashed &&
+        user.isAuthorized &&
+        user.accountType === 'A' &&
+        user.username !== currentUser.username
     );
-    return adminUsersNotYou.sortBy('createDate').reverse();
+
+    return this.sortByCreateDateDesc(filteredAdmins);
   }
 
   get pdUsers() {
-    let users = this.args.users.filterBy('isTrashed', false);
-    let authUsers = users.filterBy('isAuthorized', true);
-    let students = authUsers.filterBy('accountType', 'P');
-    return students.sortBy('createDate').reverse();
+    const filteredPdUsers = this.args.users.filter(
+      (user) => !user.isTrashed && user.isAuthorized && user.accountType === 'P'
+    );
+    return this.sortByCreateDateDesc(filteredPdUsers);
   }
 
+  // Getter for teacher users
   get teacherUsers() {
-    let users = this.args.users.filterBy('isTrashed', false);
-    let teacherUsers = users.filterBy('accountType', 'T');
-    let authTeachers = teacherUsers.filterBy('isAuthorized', true);
-    if (this.args.currentUser.isPdAdmin) {
-      let orgUsersNotYou = authTeachers
-        .filterBy(
-          'organization.id',
-          this.args.currentUser.get('organization.id')
-        )
-        .rejectBy('username', this.args.currentUser.username);
-      return orgUsersNotYou.sortBy('createDate').reverse();
+    const { users, currentUser } = this.args;
+    const filteredTeachers = users.filter(
+      (user) => !user.isTrashed && user.isAuthorized && user.accountType === 'T'
+    );
+    if (currentUser.isPdAdmin) {
+      const orgUsersNotYou = filteredTeachers.filter(
+        (user) =>
+          user.organization?.id === currentUser.organization?.id &&
+          user.username !== currentUser.username
+      );
+      return this.sortByCreateDateDesc(orgUsersNotYou);
     }
-    return authTeachers.sortBy('createDate').reverse();
+    return this.sortByCreateDateDesc(filteredTeachers);
   }
 
   get studentUsers() {
-    let users = this.args.users.filterBy('isTrashed', false);
-    let authUsers = users.filterBy('isAuthorized', true);
-    let students = authUsers.filterBy('accountType', 'S');
-    if (this.args.currentUser.isPdAdmin) {
-      let orgUsersNotYou = students
-        .filterBy(
-          'organization.id',
-          this.args.currentUser.get('organization.id')
-        )
-        .rejectBy('username', this.args.currentUser.username);
-      return orgUsersNotYou.sortBy('createDate').reverse();
+    const { users, currentUser } = this.args;
+    const filteredStudents = users.filter(
+      (user) => !user.isTrashed && user.isAuthorized && user.accountType === 'S'
+    );
+    if (currentUser.isPdAdmin) {
+      const orgUsersNotYou = filteredStudents.filter(
+        (user) =>
+          user.organization?.id === currentUser.organization?.id &&
+          user.username !== currentUser.username
+      );
+      return this.sortByCreateDateDesc(orgUsersNotYou);
     }
-    return students.sortBy('createDate').reverse();
+    return this.sortByCreateDateDesc(filteredStudents);
   }
 
-  get trashedUsers() {
-    return this.store.query('user', {
-      isTrashed: true,
-    });
-  }
   // These are all the students that are in sections you are a teacher of
-
   get yourStudents() {
-    let yourSections = this.args.currentUser.get('sections');
-    let yourTeacherSections = yourSections.filterBy('role', 'teacher');
-    let yourSectionIds = yourTeacherSections.map((section) => {
-      return section.sectionId;
-    });
-
-    let studentUsers = this.args.users.filterBy('accountType', 'S');
-
-    let studentListing = studentUsers.map((student) => {
-      for (let section of student.get('sections')) {
-        if (section.role === 'student') {
-          if (yourSectionIds.includes(section.sectionId)) {
-            return student;
-          }
-        }
-      }
-    });
+    const { users, currentUser } = this.args;
+    const teacherSections =
+      currentUser.sections?.filter((section) => section.role === 'teacher') ??
+      [];
+    const teacherSectionIds = teacherSections.map(
+      (section) => section.sectionId
+    );
 
-    return studentListing.without(undefined);
+    return users.filter((user) =>
+      user.sections.some(
+        (section) =>
+          section.role === 'student' &&
+          teacherSectionIds.includes(section.sectionId)
+      )
+    );
   }
 
   // These are all the users that you have created - filter out duplicates
-
   get yourUsers() {
-    let yourId = this.args.currentUser.get('id');
-    let yourUsers = this.args.users.filterBy('createdBy.id', yourId);
-    return yourUsers.sortBy('createDate').reverse();
+    const yourId = this.args.currentUser.id;
+    const yourUsers = this.args.users.filter(
+      (user) => user.createdBy?.id === yourId
+    );
+    return this.sortByCreateDateDesc(yourUsers);
   }
 
   // These are all the users that are in the same org as you
-
   get orgUsers() {
-    let usersWithOrgs = this.args.users.filter((user) => {
-      let accountType = user.get('accountType');
-      return (
-        !user.get('isTrashed') &&
-        user.get('organization.id') &&
-        accountType !== 'S' &&
-        accountType
-      );
-    });
-    let yourOrgId = this.args.currentUser.get('organization').get('id');
-    usersWithOrgs = usersWithOrgs.filterBy('organization.id', yourOrgId);
-    let orgUsersNotYou = usersWithOrgs.rejectBy(
-      'username',
-      this.args.currentUser.username
+    const { users, currentUser } = this.args;
+    const yourOrgId = currentUser.organization?.id;
+
+    const orgUsers = users.filter(
+      (user) =>
+        !user.isTrashed &&
+        user.organization?.id === yourOrgId &&
+        user.accountType &&
+        user.accountType !== 'S' &&
+        user.username !== currentUser.username
     );
-    return orgUsersNotYou.sortBy('createDate').reverse();
+
+    return this.sortByCreateDateDesc(orgUsers);
+  }
+
+  // Helper method to sort by create date in descending order
+  sortByCreateDateDesc(users) {
+    return users.sort((a, b) => {
+      const dateA = new Date(a.createDate);
+      const dateB = new Date(b.createDate);
+      return dateB - dateA;
+    });
   }
 
   @action
diff --git a/app/components/user-new.hbs b/app/components/user-new.hbs
index fbdab59fa..cbdb63512 100644
--- a/app/components/user-new.hbs
+++ b/app/components/user-new.hbs
@@ -83,13 +83,12 @@
       <tr>
         <td>Account Type <span class='required-star'>*</span></td>
         <td>
-          <MySelect
+          <Ui::MySelect
             @selectedValue={{this.selectedType}}
             @prompt='Select Account Type'
             @content={{this.accountTypes}}
             @action={{action (mut this.selectedType)}}
             @cannotBeNull={{true}}
-            @classNames='user-account-type'
           />
         </td>
       </tr>
@@ -107,7 +106,7 @@
   </table>
 
   {{#if this.usernameError}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error={{this.usernameError}}
       @showDismiss={{true}}
       @resetError={{action (mut this.usernameError) null}}
@@ -115,7 +114,7 @@
   {{/if}}
 
   {{#if this.emailError}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error={{this.emailError}}
       @showDismiss={{true}}
       @resetError={{action (mut this.emailError) null}}
@@ -123,7 +122,7 @@
   {{/if}}
 
   {{#if this.passwordError}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error={{this.passwordError}}
       @showDismiss={{true}}
       @resetError={{action (mut this.passwordError) null}}
@@ -131,7 +130,7 @@
   {{/if}}
 
   {{#if this.noSpacesError}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error='Passwords cannot contain spaces'
       @showDismiss={{true}}
       @resetError={{action (mut this.noSpacesError) null}}
@@ -139,7 +138,7 @@
   {{/if}}
 
   {{#if this.missingAccountType}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error='Missing account type'
       @showDismiss={{true}}
       @resetError={{action (mut this.missingAccountType) null}}
@@ -147,7 +146,7 @@
   {{/if}}
 
   {{#if this.errorMessage}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error='Missing required fields'
       @showDismiss={{true}}
       @resetError={{action (mut this.errorMessage) null}}
@@ -155,14 +154,14 @@
   {{/if}}
 
   {{#each this.createOrgErrors as |error|}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error={{error}}
       @showDismiss={{true}}
       @resetError={{action 'removeErrorFromArray' 'createOrgErrors' error}}
     />
   {{/each}}
   {{#each this.createUserErrors as |error|}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error={{error}}
       @showDismiss={{true}}
       @resetError={{action 'removeErrorFromArray' 'createUserErrors' error}}
diff --git a/app/components/workspace-info-collaborators-new.hbs b/app/components/workspace-info-collaborators-new.hbs
index b6b663442..40bcebf17 100644
--- a/app/components/workspace-info-collaborators-new.hbs
+++ b/app/components/workspace-info-collaborators-new.hbs
@@ -19,7 +19,7 @@
       />
     </div>
     <div class='collab-settings global'>
-      <RadioGroup
+      <Ui::RadioGroup
         @options={{@globalItems}}
         @selectedValue={{this.globalPermissionValue}}
         @updateValue={{action 'updateGlobalPermissionValue'}}
@@ -33,11 +33,10 @@
             Submissions
           </div>
           <div class='row-value'>
-            <MySelect
+            <Ui::MySelect
               @cannotBeNull={{true}}
               @selectedValue={{this.submissions}}
               @content={{this.submissionPermissions}}
-              @optionLabelPath='display'
               @action={{action (mut this.submissions)}}
             />
             {{#if (is-equal this.submissions.value 'custom')}}
@@ -54,11 +53,10 @@
             Selections
           </div>
           <div class='row-value'>
-            <MySelect
+            <Ui::MySelect
               @cannotBeNull={{true}}
               @selectedValue={{this.selections}}
               @content={{this.mainPermissions}}
-              @optionLabelPath='display'
               @action={{action (mut this.selections)}}
             />
           </div>
@@ -68,11 +66,10 @@
             Comments
           </div>
           <div class='row-value'>
-            <MySelect
+            <Ui::MySelect
               @cannotBeNull={{true}}
               @selectedValue={{this.comments}}
               @content={{this.mainPermissions}}
-              @optionLabelPath='display'
               @action={{action (mut this.comments)}}
             />
           </div>
@@ -82,11 +79,10 @@
             Folders
           </div>
           <div class='row-value'>
-            <MySelect
+            <Ui::MySelect
               @cannotBeNull={{true}}
               @selectedValue={{this.folders}}
               @content={{mainPermissions}}
-              @optionLabelPath='display'
               @action={{action (mut folders)}}
             />
           </div>
@@ -96,11 +92,10 @@
             Feedback
           </div>
           <div class='row-value'>
-            <MySelect
+            <Ui::MySelect
               @cannotBeNull={{true}}
               @selectedValue={{this.feedback}}
               @content={{this.feedbackPermissions}}
-              @optionLabelPath='display'
               @action={{action (mut this.feedback)}}
             />
           </div>
@@ -108,7 +103,7 @@
       {{/if}}
       {{#if this.missingUserError}}
         <div class='card-row'>
-          <ErrorBox
+          <Ui::ErrorBox
             @error='Please select a user'
             @resetError={{action (mut this.missingUserError) false}}
             @showDismiss={{true}}
@@ -117,7 +112,7 @@
       {{/if}}
       {{#if this.existingUserError}}
         <div class='card-row'>
-          <ErrorBox
+          <Ui::ErrorBox
             @error='Collaborator already exists. Edit permissions below'
             @resetError={{action (mut existingUserError) false}}
             @showDismiss={{true}}
diff --git a/app/components/workspace-info-collaborators.hbs b/app/components/workspace-info-collaborators.hbs
index e135d7ecc..6576a2cab 100644
--- a/app/components/workspace-info-collaborators.hbs
+++ b/app/components/workspace-info-collaborators.hbs
@@ -79,7 +79,9 @@
                 }}
                   <div class='button-row'>
                     <button
-                      class='primary-button cancel-button' type="button" {{action 'cancelEditCollab'}}
+                      class='primary-button cancel-button'
+                      type='button'
+                      {{action 'cancelEditCollab'}}
                     >Cancel</button>
                   </div>
                 {{/if}}
@@ -115,7 +117,9 @@
               <div class='collab-settings'>
                 <div class='card-row'>
                   {{#if
-                    (not (is-equal collaborator.userObj this.selectedCollaborator))
+                    (not
+                      (is-equal collaborator.userObj this.selectedCollaborator)
+                    )
                   }}
                     <div class='row-label'>
                       Permissions Type
@@ -125,7 +129,7 @@
                     {{#if
                       (is-equal collaborator.userObj this.selectedCollaborator)
                     }}
-                      <RadioGroup
+                      <Ui::RadioGroup
                         @options={{this.globalItems}}
                         @selectedValue={{globalPermissionValue}}
                         @updateValue={{action 'updateGlobalPermissionValue'}}
@@ -154,11 +158,10 @@
                         Submissions
                       </div>
                       <div class='row-value'>
-                        <MySelect
+                        <Ui::MySelect
                           @cannotBeNull={{true}}
                           @selectedValue={{this.submissions}}
                           @content={{this.submissionPermissions}}
-                          @optionLabelPath='display'
                           @action={{action (mut this.submissions)}}
                         />
                         {{#if (is-equal this.submissions.value 'custom')}}
@@ -185,11 +188,10 @@
                         Selections
                       </div>
                       <div class='row-value'>
-                        <MySelect
+                        <Ui::MySelect
                           @cannotBeNull={{true}}
                           @selectedValue={{this.selections}}
                           @content={{this.mainPermissions}}
-                          @optionLabelPath='display'
                           @action={{action (mut this.selections)}}
                         />
                       </div>
@@ -199,11 +201,10 @@
                         Comments
                       </div>
                       <div class='row-value'>
-                        <MySelect
+                        <Ui::MySelect
                           @cannotBeNull={{true}}
                           @selectedValue={{this.comments}}
                           @content={{this.mainPermissions}}
-                          @optionLabelPath='display'
                           @action={{action (mut this.comments)}}
                         />
                       </div>
@@ -213,11 +214,10 @@
                         Folders
                       </div>
                       <div class='row-value'>
-                        <MySelect
+                        <Ui::MySelect
                           @cannotBeNull={{true}}
                           @selectedValue={{this.folders}}
                           @content={{this.mainPermissions}}
-                          @optionLabelPath='display'
                           @action={{action (mut this.folders)}}
                         />
                       </div>
@@ -227,11 +227,10 @@
                         Feedback
                       </div>
                       <div class='row-value'>
-                        <MySelect
+                        <Ui::MySelect
                           @cannotBeNull={{true}}
                           @selectedValue={{this.feedback}}
                           @content={{this.feedbackPermissions}}
-                          @optionLabelPath='display'
                           @action={{action (mut this.feedback)}}
                         />
                       </div>
@@ -250,11 +249,10 @@
                             collaborator.userObj this.selectedCollaborator
                           )
                         }}
-                          <MySelect
+                          <Ui::MySelect
                             @cannotBeNull={{true}}
                             @selectedValue={{this.submissions}}
                             @content={{this.submissionPermissions}}
-                            @optionLabelPath='display'
                             @action={{action (mut this.submissions)}}
                           />
                           {{#if (is-equal this.submissions.value 'custom')}}
@@ -320,10 +318,14 @@
                 }}
                   <div class='button-row'>
                     <button
-                      class='primary-button cancel-button' type="button" {{action 'cancelEditCollab'}}
+                      class='primary-button cancel-button'
+                      type='button'
+                      {{action 'cancelEditCollab'}}
                     >Cancel</button>
                     <button
-                      class='primary-button' type="button" {{action 'savePermissions' collaborator}}
+                      class='primary-button'
+                      type='button'
+                      {{action 'savePermissions' collaborator}}
                     >Save</button>
                   </div>
                 {{/if}}
diff --git a/app/components/workspace-info-settings.hbs b/app/components/workspace-info-settings.hbs
index d51215610..d291cd3d2 100644
--- a/app/components/workspace-info-settings.hbs
+++ b/app/components/workspace-info-settings.hbs
@@ -86,7 +86,7 @@
         </div>
         <div class='row-value'>
           {{#if this.isEditing}}
-            <MySelect
+            <Ui::MySelect
               @cannotBeNull={{true}}
               @selectedValue={{this.selectedMode}}
               @content={{this.modes}}
@@ -139,7 +139,7 @@
           </div>
           <div data-test='allow-updates' class='row-value'>
             {{#if this.isEditing}}
-              <MySelect
+              <Ui::MySelect
                 @cannotBeNull={{true}}
                 @selectedValue={{this.selectedAutoUpdateSetting}}
                 @content={{this.yesNoMySelect}}
@@ -159,14 +159,14 @@
             >Update Workspace</button>
             <div class='update-results'>
               {{#if this.missingLinkedAssignment}}
-                <ErrorBox
+                <Ui::ErrorBox
                   @error='Please link an assignment first.'
                   @showDismiss={{true}}
                   @resetError={{action (mut this.missingLinkedAssignment) null}}
                 />
               {{/if}}
               {{#each this.updateErrors as |error|}}
-                <ErrorBox
+                <Ui::ErrorBox
                   @error={{error}}
                   @showDismiss={{true}}
                   @resetError={{action
@@ -177,7 +177,7 @@
                 />
               {{/each}}
               {{#each this.serverErrors as |error|}}
-                <ErrorBox
+                <Ui::ErrorBox
                   @error={{error}}
                   @showDismiss={{true}}
                   @resetError={{action
@@ -219,7 +219,7 @@
           </div>
           <div data-test='allow-updates' class='row-value'>
             {{#if this.isEditing}}
-              <MySelect
+              <Ui::MySelect
                 @cannotBeNull={{true}}
                 @selectedValue={{this.selectedAutoUpdateSetting}}
                 @content={{this.yesNoMySelect}}
@@ -240,14 +240,14 @@
             >Update Parent Workspace</button>
             <div class='update-results'>
               {{#if this.missingChildWorkspaces}}
-                <ErrorBox
+                <Ui::ErrorBox
                   @error='No child workspaces to update from'
                   @showDismiss={{true}}
                   @resetError={{action (mut this.missingChildWorkspaces) null}}
                 />
               {{/if}}
               {{#each this.updateErrors as |error|}}
-                <ErrorBox
+                <Ui::ErrorBox
                   @error={{error}}
                   @showDismiss={{true}}
                   @resetError={{action
@@ -258,7 +258,7 @@
                 />
               {{/each}}
               {{#each this.serverErrors as |error|}}
-                <ErrorBox
+                <Ui::ErrorBox
                   @error={{error}}
                   @showDismiss={{true}}
                   @resetError={{action
diff --git a/app/components/workspace-info.js b/app/components/workspace-info.js
index 4c8e58b66..76ac511b8 100644
--- a/app/components/workspace-info.js
+++ b/app/components/workspace-info.js
@@ -11,7 +11,6 @@ export default class WorkspaceInfoComponent extends ErrorHandlingComponent {
   // comments: controller(),
   @service('sweet-alert') alert;
   @service store;
-  @service('workspace-permissions') permissions;
   @service('utility-methods') utils;
   @tracked updateRecordErrors = [];
   @tracked isShowingCustomViewer = false;
diff --git a/app/components/workspace-list-container.hbs b/app/components/workspace-list-container.hbs
index 1bcf107a5..1e69abd14 100644
--- a/app/components/workspace-list-container.hbs
+++ b/app/components/workspace-list-container.hbs
@@ -10,8 +10,8 @@
         @adminFilterName={{this.adminFilterName}}
         @showAdminFilters={{this.showAdminFilters}}
         @onUpdate={{this.triggerFetch}}
-        @showTrashed={{this.toggleTrashed}}
-        @showHidden={{this.toggleHidden}}
+        @showTrashed={{this.showOnlyTrashed}}
+        @showHidden={{this.showOnlyHidden}}
         @toggleTrashed={{this.triggerShowTrashed}}
         @toggleHidden={{this.triggerShowHidden}}
       />
@@ -102,7 +102,7 @@
                 <ul>
                   {{#each this.modeOptions as |option|}}
                     <li>
-                      <RadioFilter
+                      <Ui::RadioFilter
                         @labelName={{option.label}}
                         @labelIcon={{option.icon}}
                         @inputValue={{option.value}}
diff --git a/app/components/workspace-submission.js b/app/components/workspace-submission.js
index f381fa34a..f63713e7e 100644
--- a/app/components/workspace-submission.js
+++ b/app/components/workspace-submission.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';
 import { isEmpty } from '@ember/utils';
 import $ from 'jquery';
 
@@ -166,7 +166,7 @@ export default class WorkspaceSubmissionCompComponent extends Component {
   @action
   onSelectionSelect() {
     if (this.isVmt) {
-      let vmtStartTime = this.currentSelection.vmtInfo.startTime;
+      let vmtStartTime = this.currentSelection.vmtInfo?.startTime;
       if (vmtStartTime >= 0) {
         let endTime = this.currentSelection.vmtInfo.endTime;
         this.setVmtReplayerTime(vmtStartTime, true, endTime);
@@ -353,7 +353,7 @@ export default class WorkspaceSubmissionCompComponent extends Component {
 
   get isVmt() {
     return this.utils.isValidMongoId(
-      this.args.currentSubmission.vmtRoomInfo.roomId
+      this.args.currentSubmission?.vmtRoomInfo?.roomId
     );
   }
 
diff --git a/app/controllers/.gitkeep b/app/controllers/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/controllers/index.js b/app/controllers/index.js
index f9d8907a9..2cc8a826b 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -12,18 +12,15 @@ import { inject as service } from '@ember/service';
 import config from 'encompass/config/environment';
 
 export default class IndexController extends Controller {
-  @service('edit-permissions') basePermissions;
-  @tracked dataToShow = this.basePermissions.isStudent
-    ? 'assignment'
-    : 'workspace';
+  @service currentUser;
+  @tracked dataToShow = this.currentUser.isStudent ? 'assignment' : 'workspace';
   @tracked currentBound = 'oneWeek';
   @tracked showTable = true;
   // this changes when user changes the tab. initially starts at "mine"
   @tracked selectedData = this.data[0].details;
-  @tracked activeDetailTab = this.basePermissions.isStudent
+  @tracked activeDetailTab = this.currentUser.isStudent
     ? 'Assigned To Me'
     : 'Mine';
-  @service('edit-permissions') basePermissions;
 
   version = config.APP.VERSION;
   buildDate = config.APP.BUILD_DATE;
diff --git a/app/controllers/landing-page.js b/app/controllers/landing-page.js
deleted file mode 100644
index 0ccb3ca84..000000000
--- a/app/controllers/landing-page.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Controller from '@ember/controller';
-import config from 'encompass/config/environment';
-
-export default class LandingPageController extends Controller {
-  version = config.APP.VERSION;
-  buildDate = config.APP.BUILD_DATE;
-}
diff --git a/app/controllers/metrics/workspace.js b/app/controllers/metrics/workspace.js
index 785e36fb6..3323119d4 100644
--- a/app/controllers/metrics/workspace.js
+++ b/app/controllers/metrics/workspace.js
@@ -14,10 +14,12 @@ export default class MetricsWorkspaceController extends Controller {
   ];
 
   get workspaceCsv() {
-    return this.workspaceReports.submissionReport(this.model);
+    return encodeURIComponent(
+      this.workspaceReports.submissionReport(this.model)
+    );
   }
   get responseCsv() {
-    return this.workspaceReports.responseReport(this.model);
+    return encodeURIComponent(this.workspaceReports.responseReport(this.model));
   }
   @action
   handleToggle(prop) {
diff --git a/app/controllers/problems/edit.js b/app/controllers/problems/edit.js
new file mode 100644
index 000000000..8b151833c
--- /dev/null
+++ b/app/controllers/problems/edit.js
@@ -0,0 +1,5 @@
+import Controller from '@ember/controller';
+
+export default class ProblemsEditController extends Controller {
+  queryParams = ['tab'];
+}
diff --git a/app/controllers/problems/problem.js b/app/controllers/problems/problem.js
new file mode 100644
index 000000000..69fd99ace
--- /dev/null
+++ b/app/controllers/problems/problem.js
@@ -0,0 +1,5 @@
+import Controller from '@ember/controller';
+
+export default class ProblemsProblemController extends Controller {
+  queryParams = ['tab'];
+}
diff --git a/app/controllers/problems/problem/assignment.js b/app/controllers/problems/problem/assignment.js
new file mode 100644
index 000000000..e627b8df8
--- /dev/null
+++ b/app/controllers/problems/problem/assignment.js
@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+
+export default class ProblemsProblemAssignmentController extends Controller {
+  @service router;
+
+  @action
+  handleHideAssignment() {
+    this.router.transitionTo('problems.problem', this.model.problem.id);
+  }
+}
diff --git a/app/controllers/workspace.js b/app/controllers/workspace.js
index 38efb81cf..b25c86173 100644
--- a/app/controllers/workspace.js
+++ b/app/controllers/workspace.js
@@ -6,15 +6,11 @@
  */
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
-import { computed } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class WorkspaceController extends Controller {
-  // comments: controller();
-
   @tracked currentSelection = null; //ENC-397, ENC-398
 
-  @computed('makingSelection', 'taggingSelection')
   get showOverlay() {
     return this.makingSelection || this.taggingSelection;
   }
@@ -23,9 +19,4 @@ export default class WorkspaceController extends Controller {
   popupMaskClicked() {
     this.transitionToRoute('workspace.submission', this.currentSubmission);
   }
-  // Was this ever used? If not, remove it.
-  // @action
-  // tagSelection(selection, tags) {
-  //   // Your implementation here
-  // }
 }
diff --git a/app/helpers/.gitkeep b/app/helpers/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/helpers/is-empty.js b/app/helpers/is-empty.js
new file mode 100644
index 000000000..d4c52120d
--- /dev/null
+++ b/app/helpers/is-empty.js
@@ -0,0 +1,5 @@
+import isEmpty from 'lodash/isEmpty';
+
+export default function (value) {
+  return isEmpty(value);
+}
diff --git a/app/helpers/not-empty.js b/app/helpers/not-empty.js
new file mode 100644
index 000000000..7c574eaff
--- /dev/null
+++ b/app/helpers/not-empty.js
@@ -0,0 +1,5 @@
+import isEmpty from 'lodash/isEmpty';
+
+export default function (value) {
+  return !isEmpty(value);
+}
diff --git a/app/models/.gitkeep b/app/models/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/models/answer.js b/app/models/answer.js
index a3c8d6085..d12168524 100644
--- a/app/models/answer.js
+++ b/app/models/answer.js
@@ -1,5 +1,4 @@
 import { attr, belongsTo, hasMany } from '@ember-data/model';
-import _ from 'underscore';
 import AuditableModel from './auditable';
 
 export default class AnswerModel extends AuditableModel {
@@ -7,16 +6,16 @@ export default class AnswerModel extends AuditableModel {
     return this.id;
   }
   @attr('string') studentName;
-  @belongsTo('problem', { async: true }) problem;
+  @belongsTo('problem', { inverse: null, async: true }) problem;
   @attr('string') answer;
   @attr('string') explanation;
   @belongsTo('image', { inverse: null, async: true }) explanationImage;
-  @belongsTo('section', { async: true }) section;
+  @belongsTo('section', { inverse: null, async: true }) section;
   @attr('boolean') isSubmitted;
   @hasMany('users', { inverse: null, async: true }) students;
   @attr studentNames;
   @belongsTo('answer', { inverse: null, async: true }) priorAnswer;
-  @belongsTo('assignment', { async: true }) assignment;
+  @belongsTo('assignment', { inverse: 'answers', async: true }) assignment;
   @belongsTo('image', { inverse: null, async: true }) additionalImage;
   @attr workspacesToUpdate;
   @attr vmtRoomInfo;
@@ -45,7 +44,7 @@ export default class AnswerModel extends AuditableModel {
     const names = this.studentNames;
 
     if (Array.isArray(names)) {
-      let firstStringName = _.find(names, _.isString);
+      const firstStringName = names.find((name) => typeof name === 'string');
       if (firstStringName) {
         return firstStringName.trim();
       }
diff --git a/app/models/assignment.js b/app/models/assignment.js
index 22c73ca70..87d99e1af 100644
--- a/app/models/assignment.js
+++ b/app/models/assignment.js
@@ -6,10 +6,10 @@ export default class AssignmentModel extends AuditableModel {
     return this.id;
   }
   @attr('string') name;
-  @hasMany('answer', { async: true }) answers;
+  @hasMany('answer', { inverse: 'assignment', async: true }) answers;
   @hasMany('user', { inverse: null, async: true }) students;
-  @belongsTo('section', { async: true }) section;
-  @belongsTo('problem', { async: true }) problem;
+  @belongsTo('section', { inverse: 'assignments', async: true }) section;
+  @belongsTo('problem', { inverse: null, async: true }) problem;
   @attr('date') assignedDate;
   @attr('date') dueDate;
   @belongsTo('workspace', { inverse: null, async: true }) taskWorkspace;
diff --git a/app/models/folder.js b/app/models/folder.js
index 9ad85c21f..388a62ab2 100644
--- a/app/models/folder.js
+++ b/app/models/folder.js
@@ -4,7 +4,7 @@ import AuditableModel from './auditable';
 export default class FolderModel extends AuditableModel {
   @attr('string') name;
   @attr('number') weight;
-  @hasMany('tagging', { async: true }) taggings;
+  @hasMany('tagging', { inverse: 'folder', async: true }) taggings;
   @belongsTo('folder', { inverse: 'children', async: true }) parent;
   @hasMany('folder', { inverse: 'parent', async: true }) children;
   @belongsTo('workspace', { async: true }) workspace;
diff --git a/app/models/group.js b/app/models/group.js
index e7df1ebf0..27ca1e034 100644
--- a/app/models/group.js
+++ b/app/models/group.js
@@ -1,7 +1,7 @@
-import Model, { attr, hasMany, belongsTo } from '@ember-data/model';
+import { attr, hasMany, belongsTo } from '@ember-data/model';
 import AuditableModel from './auditable';
 
-export default class GroupModel extends Model.extend(AuditableModel) {
+export default class GroupModel extends AuditableModel {
   @attr name;
   @belongsTo('section', { inverse: null, async: true }) section;
   @hasMany('user', { inverse: null, async: true }) students;
diff --git a/app/models/import_request.js b/app/models/import_request.js
index d035ea71b..e9de0007b 100644
--- a/app/models/import_request.js
+++ b/app/models/import_request.js
@@ -4,7 +4,7 @@
  */
 import Model, { attr } from '@ember-data/model';
 import Auditable from './auditable';
-export default class ImportRequestModel extends Model(Auditable) {
+export default class ImportRequestModel extends Auditable {
   @attr('string') teacher;
   @attr('string') submitter;
   @attr('number') publication;
diff --git a/app/models/notification.js b/app/models/notification.js
index 421ff1933..5dd2ef252 100644
--- a/app/models/notification.js
+++ b/app/models/notification.js
@@ -5,12 +5,12 @@ export default class NotificationModel extends Auditable {
   @attr('string') primaryRecordType;
   @attr('string') notificationType;
   @belongsTo('submission', { inverse: null, async: true }) submission;
-  @belongsTo('workspace', { async: true }) workspace;
-  @belongsTo('response', { async: true }) response;
-  @belongsTo('user', { async: true }) recipient;
-  @belongsTo('assignment', { async: true }) assignment;
-  @belongsTo('problem', { async: true }) problem;
-  @belongsTo('section', { async: true }) section;
-  @belongsTo('organization', { async: true }) organization;
+  @belongsTo('workspace', { inverse: null, async: true }) workspace;
+  @belongsTo('response', { inverse: null, async: true }) response;
+  @belongsTo('user', { inverse: 'notifications', async: true }) recipient;
+  @belongsTo('assignment', { inverse: null, async: true }) assignment;
+  @belongsTo('problem', { inverse: null, async: true }) problem;
+  @belongsTo('section', { inverse: null, async: true }) section;
+  @belongsTo('organization', { inverse: null, async: true }) organization;
   @attr('boolean', { defaultValue: false }) wasSeen;
 }
diff --git a/app/models/problem.js b/app/models/problem.js
index 36808419c..a55148f93 100644
--- a/app/models/problem.js
+++ b/app/models/problem.js
@@ -16,15 +16,13 @@ export default class ProblemModel extends Auditable {
   @attr('string') additionalInfo;
   @attr('string') privacySetting;
   @hasMany('category', { inverse: null, async: true }) categories;
-  @attr keywords;
+  @attr keywords; // an array of strings
   @attr('string') copyrightNotice;
   @attr('string') sharingAuth;
   @attr('string') author;
   @attr('string') error;
-  @attr('boolean') isUsed;
+  @attr('boolean') isUsed; // indicates if a problem has associated answers
   @attr('string') status;
   @attr flagReason;
-  @attr('boolean', { defaultValue: false }) isForEdit;
-  @attr('boolean', { defaultValue: false }) isForAssignment;
   @attr contexts;
 }
diff --git a/app/models/section.js b/app/models/section.js
index 427ad8b70..246a910ca 100644
--- a/app/models/section.js
+++ b/app/models/section.js
@@ -9,6 +9,6 @@ export default class SectionModel extends Auditable {
   @hasMany('user', { inverse: null, async: true }) teachers;
   @attr('string') sectionPassword;
   @hasMany('user', { inverse: null, async: true }) students;
-  @hasMany('problem', { async: true }) problems;
-  @hasMany('assignment', { async: true }) assignments;
+  @hasMany('problem', { inverse: null, async: true }) problems;
+  @hasMany('assignment', { inverse: 'section', async: true }) assignments;
 }
diff --git a/app/models/tagging.js b/app/models/tagging.js
index 8d4d4c259..3d265e6a4 100644
--- a/app/models/tagging.js
+++ b/app/models/tagging.js
@@ -3,9 +3,9 @@ import { belongsTo } from '@ember-data/model';
 import AuditableModel from './auditable';
 
 export default class TaggingModel extends AuditableModel {
-  @belongsTo('workspace', { async: false }) workspace;
-  @belongsTo('selection', { async: true }) selection;
-  @belongsTo('folder', { async: true }) folder;
+  @belongsTo('workspace', { inverse: 'taggings', async: false }) workspace;
+  @belongsTo('selection', { inverse: 'taggings', async: true }) selection;
+  @belongsTo('folder', { inverse: 'taggings', async: true }) folder;
   @belongsTo('tagging', { inverse: null, async: true }) originalTagging;
 
   copy() {
diff --git a/app/models/user.js b/app/models/user.js
index 739789eb8..c2832e302 100644
--- a/app/models/user.js
+++ b/app/models/user.js
@@ -49,6 +49,17 @@ export default class UserModel extends AuditableModel {
   get isStudent() {
     return this.accountType === 'S' || this.actingRole === 'student';
   }
+  get isPseudoStudent() {
+    return this.actingRole === 'S';
+  }
+
+  get isActingAdmin() {
+    return !this.isPseudoStudent && this.isAdmin;
+  }
+
+  get isActingPdAdmin() {
+    return !this.isPseudoStudent && this.isPdAdmin;
+  }
   get isPdAdmin() {
     return this.accountType === 'P';
   }
diff --git a/app/models/workspace.js b/app/models/workspace.js
index bd3a06d9a..ab967673e 100644
--- a/app/models/workspace.js
+++ b/app/models/workspace.js
@@ -12,7 +12,7 @@ export default class WorkspaceModel extends AuditableModel {
   @belongsTo('user', { async: true }) owner;
   @hasMany('user', { async: true }) editors;
   @hasMany('folder', { async: true }) folders;
-  @attr() group;
+  @belongsTo('group', { inverse: null, async: true }) group;
   @hasMany('submission', { async: true }) submissions;
   @hasMany('response', { async: true }) responses;
   @hasMany('selection', { async: true }) selections;
diff --git a/app/router.js b/app/router.js
index 0532dcbef..87c271a8c 100644
--- a/app/router.js
+++ b/app/router.js
@@ -21,7 +21,10 @@ Router.map(function () {
 
   // PROBLEMS PARENT ROUTE
   this.route('problems', function () {
-    this.route('problem', { path: '/:problem_id' });
+    this.route('problem', { path: '/:problem_id' }, function () {
+      this.route('assignment');
+    });
+    this.route('edit', { path: '/:problem_id/edit' });
     this.route('new');
   });
 
diff --git a/app/routes/application.js b/app/routes/application.js
index 6bb87f802..33299ffbb 100644
--- a/app/routes/application.js
+++ b/app/routes/application.js
@@ -13,11 +13,10 @@ import { action } from '@ember/object';
 
 export default class Application extends Route {
   //the application route can't require authentication since it's getting the user
-  @service('user-ntfs') userNtfs;
+  @service userNtfs;
   @service store;
-  @service('workspace-permissions') workspacePermissions;
-  @service('edit-permissions') editPermissions;
-  @service('current-user') currentUser;
+  @service router;
+  @service currentUser;
   beforeModel() {
     let that = this;
     window.addEventListener(
@@ -32,8 +31,6 @@ export default class Application extends Route {
 
   async model() {
     let user = await this.store.queryRecord('user', { alias: 'current' });
-    this.workspacePermissions.setUser(user);
-    this.editPermissions.setUser(user);
     this.currentUser.setUser(user);
     return user;
   }
@@ -62,11 +59,11 @@ export default class Application extends Route {
     // should be extending AuthenticatedRoute.
     if (!user.get('isAuthenticated')) {
       this.store.unloadAll();
-      this.transitionTo('welcome');
+      this.router.transitionTo('welcome');
     } else if (!user.get('isEmailConfirmed') && !user.get('isStudent')) {
-      this.transitionTo('unconfirmed');
+      this.router.transitionTo('unconfirmed');
     } else if (!user.get('isAuthz')) {
-      this.transitionTo('unauthorized');
+      this.router.transitionTo('unauthorized');
     }
   }
 
diff --git a/app/routes/assignments.js b/app/routes/assignments.js
index 96c581dba..148710e80 100644
--- a/app/routes/assignments.js
+++ b/app/routes/assignments.js
@@ -1,6 +1,6 @@
 import AuthenticatedRoute from './_authenticated_route';
 import { hash } from 'rsvp';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 /**
  * # Assignments Route
@@ -8,18 +8,11 @@ import { inject as service } from '@ember/service';
  */
 export default class AssignmentsRoute extends AuthenticatedRoute {
   @service store;
-
-  async model() {
-    let currentUser = this.modelFor('application');
-    let assignments = await this.store.findAll('assignment');
-    let filtered = assignments.filter((assignment) => {
-      return assignment.id && !assignment.get('isTrashed');
-    });
-    filtered = filtered.sortBy('createDate').reverse();
+  @service currentUser;
+  model() {
     return hash({
-      currentUser,
-      assignments,
-      filtered,
+      isStudent: this.currentUser.isStudent,
+      assignments: this.store.findAll('assignment'),
     });
   }
 }
diff --git a/app/routes/assignments/assignment.js b/app/routes/assignments/assignment.js
index 4e0336d04..82f8415e8 100644
--- a/app/routes/assignments/assignment.js
+++ b/app/routes/assignments/assignment.js
@@ -1,32 +1,46 @@
 import AuthenticatedRoute from '../_authenticated_route';
 import { action } from '@ember/object';
 import { hash } from 'rsvp';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 export default class AssignmentsAssignmentRoute extends AuthenticatedRoute {
   @service store;
+  @service router;
+  @service currentUser;
   async model(params) {
-    let currentUser = this.modelFor('application');
     const assignment = await this.store.findRecord(
       'assignment',
       params.assignment_id
     );
-    const sections = await this.store.findAll('section');
 
-    const section = await assignment.get('section.id');
-    const groups = await this.store.query('group', {
-      section: section,
+    const section = await assignment.section;
+    const sectionId = section?.id ?? null;
+    const groups = this.store.query('group', {
+      section: sectionId,
       isTrashed: false,
     });
-    const students = await assignment.get('students');
     return hash({
-      currentUser,
       assignment,
+      currentSection: section,
+      currentProblem: assignment.problem,
       groups,
-      students,
-      sections,
+      students: assignment.students,
+      sections: this.store.findAll('section'),
+      linkedWorkspaces: assignment.linkedWorkspaces,
+      parentWorkspace: assignment.parentWorkspace,
+      answers: assignment.answers,
+      isStudent: this.currentUser.isStudent,
     });
   }
-  @action toAssignments() {
-    this.transitionTo('assignments');
+
+  @action
+  async onAnswerCreated(answer) {
+    const { assignment } = this.model;
+    assignment.answers.pushObject(answer);
+
+    try {
+      await assignment.save();
+    } catch (error) {
+      console.error('Error saving assignment:', error);
+    }
   }
 }
diff --git a/app/routes/assignments/new.js b/app/routes/assignments/new.js
index eb8ad1d41..a6ca2d38f 100644
--- a/app/routes/assignments/new.js
+++ b/app/routes/assignments/new.js
@@ -4,27 +4,26 @@ import AuthenticatedRoute from '../_authenticated_route';
 import { inject as service } from '@ember/service';
 export default class AssignmentsNewRoute extends AuthenticatedRoute {
   @service store;
+  @service router;
   beforeModel() {
     const user = this.modelFor('application');
     const isStudent = user.get('isStudent');
-
     if (isStudent) {
-      this.transitionTo('assignments');
+      this.router.transitionTo('assignments');
     }
   }
-  async model() {
-    let currentUser = this.modelFor('application');
+  model() {
     return hash({
-      currentUser,
-      sections: await this.store.findAll('section'),
-      groups: await this.store.findAll('group'),
-      cachedProblems: await this.store.findAll('problem'),
+      currentUser: this.modelFor('application'),
+      sections: this.store.findAll('section'),
+      groups: this.store.findAll('group'),
+      cachedProblems: this.store.findAll('problem'),
     });
   }
   @action toAssignmentInfo(model) {
-    this.transitionTo('assignment', model);
+    this.router.transitionTo('assignment', model);
   }
   @action toAssignmentsHome() {
-    this.transitionTo('assignments');
+    this.router.transitionTo('assignments');
   }
 }
diff --git a/app/routes/folders_index.js b/app/routes/folders_index.js
index a17c88c26..024c757f1 100644
--- a/app/routes/folders_index.js
+++ b/app/routes/folders_index.js
@@ -4,15 +4,17 @@
  * @since 1.0.0
  */
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class FoldersIndexRoute extends Route {
+  @service router;
   model() {
     return this.store.findAll('folder');
   }
 
   afterModel(folders, transition) {
     if (folders.length === 1) {
-      this.transitionTo('workspaceFolder', folders.firstObject);
+      this.router.transitionTo('workspaceFolder', folders.firstObject);
     }
   }
 }
diff --git a/app/routes/index.js b/app/routes/index.js
index 689611b5a..d81d0eaa9 100644
--- a/app/routes/index.js
+++ b/app/routes/index.js
@@ -32,21 +32,23 @@ export default class IndexRoute extends Route {
       const user = this.currentUser.user;
       const sections = await this.store.findAll('section');
 
-      const teacherSections = sections.filter((section) =>
-        section.teachers.includes(user)
-      );
-
-      const studentSections = sections.filter((section) =>
-        section.students.includes(user)
-      );
-
-      const teacherAssignments = teacherSections.flatMap((section) =>
-        section.assignments.toArray()
-      );
+      const teacherAssignments = (
+        await Promise.all(
+          sections.map(async (section) => {
+            const teachers = await section.teachers;
+            return teachers.includes(user) ? section.assignments.toArray() : [];
+          })
+        )
+      ).flat();
 
-      const studentAssignments = studentSections.flatMap((section) =>
-        section.assignments.toArray()
-      );
+      const studentAssignments = (
+        await Promise.all(
+          sections.map(async (section) => {
+            const students = await section.students;
+            return students.includes(user) ? section.assignments.toArray() : [];
+          })
+        )
+      ).flat();
 
       const teacherClasses = user.sections.map((section) => section.sectionId);
 
diff --git a/app/routes/problems/edit.js b/app/routes/problems/edit.js
new file mode 100644
index 000000000..f0f410f03
--- /dev/null
+++ b/app/routes/problems/edit.js
@@ -0,0 +1,12 @@
+// app/routes/problems/edit.js
+import AuthenticatedRoute from '../_authenticated_route';
+import { service } from '@ember/service';
+
+export default class ProblemsEditRoute extends AuthenticatedRoute {
+  @service store;
+  @service problemUtils;
+
+  async model(params) {
+    return this.problemUtils.fetchProblemData(params.problem_id);
+  }
+}
diff --git a/app/routes/problems/new.js b/app/routes/problems/new.js
index 1fbd7f8ae..8232f123d 100644
--- a/app/routes/problems/new.js
+++ b/app/routes/problems/new.js
@@ -1,23 +1,13 @@
 import { hash } from 'rsvp';
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import AuthenticatedRoute from '../_authenticated_route';
 
 export default class ProblemsNewRoute extends AuthenticatedRoute {
   @service store;
   model() {
-    let currentUser = this.modelFor('application');
     return hash({
-      currentUser,
       problems: this.store.findAll('problem'),
       organizations: this.store.findAll('organization'),
     });
   }
-
-  @action toProblemInfo(problem) {
-    this.transitionTo('problems.problem', problem.id);
-  }
-  @action toProblemList() {
-    this.transitionTo('problems');
-  }
 }
diff --git a/app/routes/problems/problem.js b/app/routes/problems/problem.js
index 46295ec80..061038b1d 100644
--- a/app/routes/problems/problem.js
+++ b/app/routes/problems/problem.js
@@ -1,35 +1,12 @@
+// app/routes/problems/problem.js
 import AuthenticatedRoute from '../_authenticated_route';
-import { hash } from 'rsvp';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class ProblemsProblemRoute extends AuthenticatedRoute {
   @service store;
+  @service problemUtils;
+
   async model(params) {
-    const currentUser = this.modelFor('application');
-    const userOrg = await currentUser.get('organization');
-    const recommendedProblems = await userOrg.get('recommendedProblems');
-    const problem = await this.store.findRecord('problem', params.problem_id);
-    const sectionList = await this.store.findAll('section');
-    const orgList = await this.store.findAll('organization');
-    let flaggedBy;
-    let flaggedDate;
-    if (problem.flagReason?.flaggedBy) {
-      flaggedBy = await this.store.findRecord(
-        'user',
-        problem.flagReason.flaggedBy
-      );
-    }
-    if (problem.flagReason?.flaggedBy) {
-      flaggedDate = new Date(problem.flagReason.flaggedDate);
-    }
-    return hash({
-      currentUser,
-      problem,
-      sectionList,
-      orgList,
-      recommendedProblems,
-      flaggedBy,
-      flaggedDate,
-    });
+    return this.problemUtils.fetchProblemData(params.problem_id);
   }
 }
diff --git a/app/routes/problems/problem/assignment.js b/app/routes/problems/problem/assignment.js
new file mode 100644
index 000000000..7e17ce975
--- /dev/null
+++ b/app/routes/problems/problem/assignment.js
@@ -0,0 +1,17 @@
+import AuthenticatedRoute from 'encompass/routes/_authenticated_route';
+
+export default class ProblemsProblemAssignmentRoute extends AuthenticatedRoute {
+  activate() {
+    super.activate(...arguments);
+    requestAnimationFrame(() => {
+      let outletEl = document.getElementById('problem-info-outlet');
+      if (outletEl) {
+        outletEl.scrollIntoView({ behavior: 'smooth' });
+      }
+    });
+  }
+  model() {
+    // This reuses the model already loaded by problems/problem.js (must be a parent route)
+    return this.modelFor('problems.problem');
+  }
+}
diff --git a/app/routes/responses.js b/app/routes/responses.js
index ef0c88aa7..e4230374a 100644
--- a/app/routes/responses.js
+++ b/app/routes/responses.js
@@ -1,15 +1,16 @@
 import AuthenticatedRoute from './_authenticated_route';
 import { action } from '@ember/object';
-
+import { inject as service } from '@ember/service';
 export default class ResponsesRoute extends AuthenticatedRoute {
+  @service router;
   @action toSubmissionResponse(subId) {
-    this.transitionTo('responses.submission', subId);
+    this.router.transitionTo('responses.submission', subId);
   }
   @action toResponses() {
     this.refresh();
   }
   @action toResponse(submissionId, responseId) {
-    this.transitionTo('responses.submission', submissionId, {
+    this.router.transitionTo('responses.submission', submissionId, {
       queryParams: { responseId: responseId },
     });
   }
diff --git a/app/routes/responses/new/submission.js b/app/routes/responses/new/submission.js
index ed49f78e6..535d22dc1 100644
--- a/app/routes/responses/new/submission.js
+++ b/app/routes/responses/new/submission.js
@@ -1,14 +1,12 @@
-import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { hash, resolve } from 'rsvp';
 import ConfirmLeavingRoute from '../../_confirm_leaving_route';
 import { action } from '@ember/object';
 
-export default class ResponsesNewSubmissionRoute extends Route.extend(
-  ConfirmLeavingRoute
-) {
+export default class ResponsesNewSubmissionRoute extends ConfirmLeavingRoute {
   @service('utility-methods') utils;
   @service store;
+  @service router;
   renderTemplate() {
     this.render('responses/response');
   }
@@ -130,18 +128,18 @@ export default class ResponsesNewSubmissionRoute extends Route.extend(
 
   afterModel(model) {
     if (model.isDraft) {
-      this.transitionTo('responses.submission', model.submissionId, {
+      this.router.transitionTo('responses.submission', model.submissionId, {
         queryParams: { responseId: model.responseId },
       });
     }
   }
 
   @action toResponse(submissionId, responseId) {
-    this.transitionTo('responses.submission', submissionId, {
+    this.router.transitionTo('responses.submission', submissionId, {
       queryParams: { responseId: responseId },
     });
   }
   @action toResponseSubmission(subId) {
-    this.transitionTo('responses.submission', subId);
+    this.router.transitionTo('responses.submission', subId);
   }
 }
diff --git a/app/routes/responses/submission.js b/app/routes/responses/submission.js
index 7318894d4..064246382 100644
--- a/app/routes/responses/submission.js
+++ b/app/routes/responses/submission.js
@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 export default class ResponsesRoute extends AuthenticatedRoute {
   @service('utility-methods') utils;
   @service store;
+  @service router;
   queryParams = {
     responseId: {
       refreshModel: true,
@@ -86,26 +87,26 @@ export default class ResponsesRoute extends AuthenticatedRoute {
 
   redirect(model, transition) {
     if (!model) {
-      this.transitionTo('responses');
+      this.router.transitionTo('responses');
     }
   }
 
   @action toResponseSubmission(subId) {
-    this.transitionTo('responses.submission', subId);
+    this.router.transitionTo('responses.submission', subId);
   }
 
   @action toResponse(submissionId, responseId) {
-    this.transitionTo('responses.submission', submissionId, {
+    this.router.transitionTo('responses.submission', submissionId, {
       queryParams: { responseId: responseId },
     });
   }
 
   @action toResponses() {
-    this.transitionTo('responses');
+    this.router.transitionTo('responses');
   }
 
   @action toNewResponse(submissionId, workspaceId) {
-    this.transitionTo('responses.new.submission', submissionId, {
+    this.router.transitionTo('responses.new.submission', submissionId, {
       queryParams: { workspaceId: workspaceId },
     });
   }
diff --git a/app/routes/sections/new.js b/app/routes/sections/new.js
index 1dff6df38..40fbc3b16 100644
--- a/app/routes/sections/new.js
+++ b/app/routes/sections/new.js
@@ -4,12 +4,13 @@ import { inject as service } from '@ember/service';
 
 export default class SectionsNewRoute extends AuthenticatedRoute {
   @service store;
+  @service router;
   beforeModel() {
     const user = this.modelFor('application');
     const isStudent = user.get('isStudent');
 
     if (isStudent) {
-      this.transitionTo('sections');
+      this.router.transitionTo('sections');
     }
   }
 
diff --git a/app/routes/sections/section.js b/app/routes/sections/section.js
index 2fdb8a271..59d20db75 100644
--- a/app/routes/sections/section.js
+++ b/app/routes/sections/section.js
@@ -5,6 +5,7 @@ import { inject as service } from '@ember/service';
 
 export default class SectionsSectionRoute extends AuthenticatedRoute {
   @service store;
+  @service router;
   async model(params) {
     let section = await this.store.findRecord('section', params.section_id);
     let groups = await this.store.query('group', {
@@ -23,10 +24,10 @@ export default class SectionsSectionRoute extends AuthenticatedRoute {
   }
 
   @action toSectionList() {
-    this.transitionTo('sections');
+    this.router.transitionTo('sections');
   }
   @action toAssignmentInfo(assignment) {
-    this.transitionTo('assignments.assignment', assignment);
+    this.router.transitionTo('assignments.assignment', assignment);
   }
   @action refreshModel() {
     this.refresh();
diff --git a/app/routes/submission/response.js b/app/routes/submission/response.js
index a6fd3953d..f9659d480 100644
--- a/app/routes/submission/response.js
+++ b/app/routes/submission/response.js
@@ -4,33 +4,34 @@ import { action } from '@ember/object';
 export default class ResponsesRoute extends ConfirmLeavingRoute {
   @service('utility-methods') utils;
   @service store;
+  @service router;
   model(params) {
     return this.store.findRecord('response', params.response_id);
   }
 
   redirect(model, transition) {
     if (!model) {
-      this.transitionTo('responses');
+      this.router.transitionTo('responses');
     } else {
       let submissionId = this.utils.getBelongsToId(model, 'submission');
       if (this.utils.isValidMongoId(submissionId)) {
-        this.transitionTo('responses.submission', submissionId, {
+        this.router.transitionTo('responses.submission', submissionId, {
           queryParams: { responseId: model.get('id') },
         });
       } else {
-        this.transitionTo('responses');
+        this.router.transitionTo('responses');
       }
     }
   }
 
   @action toResponseInfo(response) {
-    this.transitionTo('response', response.get('id'));
+    this.router.transitionTo('response', response.get('id'));
   }
   @action toResponses() {
-    this.transitionTo('responses');
+    this.router.transitionTo('responses');
   }
   @action toNewResponse(submissionId, workspaceId) {
-    this.transitionTo('responses.new.submission', submissionId, {
+    this.router.transitionTo('responses.new.submission', submissionId, {
       queryParams: { workspaceId: workspaceId },
     });
   }
diff --git a/app/routes/submissions/first.js b/app/routes/submissions/first.js
index 67c8ecf09..af73e7cbf 100644
--- a/app/routes/submissions/first.js
+++ b/app/routes/submissions/first.js
@@ -10,6 +10,7 @@ import { inject as service } from '@ember/service';
 export default Route.extend({
   utils: service('utility-methods'),
   alert: service('sweet-alert'),
+  router: service(),
 
   model: function () {
     return this.modelFor('workspace.submissions');
@@ -22,7 +23,7 @@ export default Route.extend({
       let firstStudent = sorted.get('firstObject.student');
       let lastRevision = sorted.getEach('student').lastIndexOf(firstStudent);
 
-      this.transitionTo(
+      this.router.transitionTo(
         'workspace.submissions.submission',
         workspace,
         sorted.objectAt(lastRevision).get('id')
@@ -38,7 +39,7 @@ export default Route.extend({
         null
       );
 
-      this.transitionTo('workspace.info');
+      this.router.transitionTo('workspace.info');
     }
   },
 });
diff --git a/app/routes/submissions/submission.js b/app/routes/submissions/submission.js
index 72a70d21e..3858769c5 100644
--- a/app/routes/submissions/submission.js
+++ b/app/routes/submissions/submission.js
@@ -18,6 +18,7 @@ import VmtHostMixin from '../mixins/vmt-host';
 export default Route.extend(CurrentUserMixin, VmtHostMixin, {
   alert: service('sweet-alert'),
   utils: service('utility-methods'),
+  router: service(),
 
   queryParams: 'vmtRoomId',
 
@@ -39,9 +40,13 @@ export default Route.extend(CurrentUserMixin, VmtHostMixin, {
 
       // so links to selections still work
       if (transition.intent.name === 'workspace.submissions.submission') {
-        this.transitionTo('workspace.submissions.submission', submission, {
-          queryParams: { vmtRoomId },
-        });
+        this.router.transitionTo(
+          'workspace.submissions.submission',
+          submission,
+          {
+            queryParams: { vmtRoomId },
+          }
+        );
       }
     });
   },
diff --git a/app/routes/unauthorized.js b/app/routes/unauthorized.js
index 96857a9a5..3a49aa925 100644
--- a/app/routes/unauthorized.js
+++ b/app/routes/unauthorized.js
@@ -4,12 +4,13 @@ import { action } from '@ember/object';
 
 export default class UnauthorizedRoute extends Route {
   @service store;
+  @service router;
   beforeModel() {
     // redirect to login if no user logged in
     const user = this.modelFor('application');
 
     if (!user || !user.get('isAuthenticated')) {
-      return this.transitionTo('auth.login');
+      return this.router.transitionTo('auth.login');
     }
     // redirect to confirm email info page if
     // email still needs confirming
@@ -19,12 +20,12 @@ export default class UnauthorizedRoute extends Route {
       !user.get('isStudent');
 
     if (doesEmailNeedConfirming) {
-      return this.transitionTo('unconfirmed');
+      return this.router.transitionTo('unconfirmed');
     }
 
     // redirect to home page if already authorized
     if (user.get('isAuthz')) {
-      this.transitionTo('/');
+      this.router.transitionTo('/');
     }
   }
 
diff --git a/app/routes/unconfirmed.js b/app/routes/unconfirmed.js
index 21ef0706e..5f443a839 100644
--- a/app/routes/unconfirmed.js
+++ b/app/routes/unconfirmed.js
@@ -1,17 +1,18 @@
 import Route from '@ember/routing/route';
-
+import { inject as service } from '@ember/service';
 export default class UnconfirmedRoute extends Route {
+  @service router;
   beforeModel() {
     // redirect to login if no user logged in
     const user = this.modelFor('application');
 
     if (!user || !user.get('isAuthenticated')) {
-      return this.transitionTo('auth.login');
+      return this.router.transitionTo('auth.login');
     }
 
     // redirect to home page if email is already confirmed or user does not have an email
     if (user.get('isEmailConfirmed') || !user.get('email')) {
-      this.transitionTo('/');
+      this.router.transitionTo('/');
     }
   }
 }
diff --git a/app/routes/users.js b/app/routes/users.js
index cecee2ae9..10b203f1c 100644
--- a/app/routes/users.js
+++ b/app/routes/users.js
@@ -11,20 +11,23 @@ import { inject as service } from '@ember/service';
 
 export default class UsersRoute extends Route {
   @service store;
+  @service router;
   beforeModel() {
     const user = this.modelFor('application');
     const isStudent = user.get('isStudent');
 
     if (isStudent) {
-      this.transitionTo('/');
+      this.router.transitionTo('/');
     }
   }
-  model() {
+  async model() {
     const currentUser = this.modelFor('application');
+    const users = await this.store.findAll('user');
     return hash({
       currentUser,
-      users: this.store.findAll('user'),
+      users,
       organizations: this.store.findAll('organization'),
+      trashedUsers: users.filter((user) => user.isTrashed),
     });
   }
 }
diff --git a/app/routes/users/user.js b/app/routes/users/user.js
index 54f03253e..be02bde38 100644
--- a/app/routes/users/user.js
+++ b/app/routes/users/user.js
@@ -1,24 +1,18 @@
 import Route from '@ember/routing/route';
 import { hash } from 'rsvp';
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default class UsersUserRoute extends Route {
   @service store;
   async model(params) {
     const user = await this.store.findRecord('user', params.user_id);
-    const userSections = await this.store.query('section', {
-      ids: user.sections.map((section) => section.sectionId),
-    });
-    let currentUser = this.modelFor('application');
     return hash({
-      currentUser,
+      currentUser: this.modelFor('application'),
       user,
-      userSections,
-      organizations: await this.store.findAll('organization'),
+      userSections: this.store.query('section', {
+        ids: user.sections.map((section) => section.sectionId),
+      }),
+      organizations: this.store.findAll('organization'),
     });
   }
-  @action refresh() {
-    this.refresh();
-  }
 }
diff --git a/app/routes/vmt/import.js b/app/routes/vmt/import.js
index 63f472f7b..856467191 100644
--- a/app/routes/vmt/import.js
+++ b/app/routes/vmt/import.js
@@ -1,8 +1,10 @@
 import { hash } from 'rsvp';
 import AuthenticatedRoute from '../_authenticated_route';
+import { inject as service } from '@ember/service';
 
 export default AuthenticatedRoute.extend({
   controllerName: 'vmt-import',
+  router: service(),
 
   model() {
     return hash({
@@ -13,7 +15,7 @@ export default AuthenticatedRoute.extend({
 
   actions: {
     toWorkspaces: function (workspaceId) {
-      this.transitionTo('workspace.work', workspaceId);
+      this.router.transitionTo('workspace.work', workspaceId);
       // window.location.href = `#/workspaces/${workspace._id}/submissions/${workspace.submissions[0]}`;
     },
   },
diff --git a/app/routes/welcome.js b/app/routes/welcome.js
new file mode 100644
index 000000000..e5b979d10
--- /dev/null
+++ b/app/routes/welcome.js
@@ -0,0 +1,12 @@
+// app/routes/welcome.js
+import Route from '@ember/routing/route';
+import config from 'encompass/config/environment';
+
+export default class WelcomeRoute extends Route {
+  model() {
+    return {
+      version: config.APP.VERSION,
+      buildDate: config.APP.BUILD_DATE,
+    };
+  }
+}
diff --git a/app/routes/workspace/submissions/submission.js b/app/routes/workspace/submissions/submission.js
index 4ee987996..76702ce60 100644
--- a/app/routes/workspace/submissions/submission.js
+++ b/app/routes/workspace/submissions/submission.js
@@ -11,12 +11,12 @@ import Route from '@ember/routing/route';
 import { schedule } from '@ember/runloop';
 import { hash, resolve } from 'rsvp';
 import { inject as service } from '@ember/service';
-import $ from 'jquery';
 import { action } from '@ember/object';
 export default class WorkspaceSubmissionRoute extends Route {
   @service sweetAlert;
   @service('utility-methods') utils;
   @service currentUser;
+  @service router;
 
   queryParams = {
     vmtRoomId: {
@@ -44,9 +44,13 @@ export default class WorkspaceSubmissionRoute extends Route {
 
       // so links to selections still work
       if (transition.intent.name === 'workspace.submissions.submission') {
-        this.transitionTo('workspace.submissions.submission', submission, {
-          queryParams: { vmtRoomId },
-        });
+        this.router.transitionTo(
+          'workspace.submissions.submission',
+          submission,
+          {
+            queryParams: { vmtRoomId },
+          }
+        );
       }
     });
   }
diff --git a/app/routes/workspaces.js b/app/routes/workspaces.js
index 1182eb171..5ec6ed47a 100644
--- a/app/routes/workspaces.js
+++ b/app/routes/workspaces.js
@@ -7,11 +7,13 @@
 
 import AuthenticatedRoute from './_authenticated_route';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class WorkspacesRoute extends AuthenticatedRoute {
+  @service router;
   @action toCopyWorkspace(workspace) {
     let workspaceId = workspace.get('id');
-    this.transitionTo('workspaces.copy', {
+    this.router.transitionTo('workspaces.copy', {
       queryParams: { workspace: workspaceId },
     });
   }
diff --git a/app/routes/workspaces/copy.js b/app/routes/workspaces/copy.js
index 6d6bf9e5f..f00117477 100644
--- a/app/routes/workspaces/copy.js
+++ b/app/routes/workspaces/copy.js
@@ -5,6 +5,7 @@ import AuthenticatedRoute from '../_authenticated_route';
 
 export default class WorkspacesCopyRoute extends AuthenticatedRoute {
   @service store;
+  @service router;
   workspaceToCopy = null;
   workspaceId = null;
   beforeModel(transition) {
@@ -23,6 +24,6 @@ export default class WorkspacesCopyRoute extends AuthenticatedRoute {
   }
 
   @action toWorkspace(id) {
-    this.transitionTo('workspace.work', id);
+    this.router.transitionTo('workspace.work', id);
   }
 }
diff --git a/app/routes/workspaces/new.js b/app/routes/workspaces/new.js
index 65838ccd7..519ac56f5 100644
--- a/app/routes/workspaces/new.js
+++ b/app/routes/workspaces/new.js
@@ -5,12 +5,13 @@ import AuthenticatedRoute from '../_authenticated_route';
 
 export default class WorkspacesNewRoute extends AuthenticatedRoute {
   @service store;
+  @service router;
   beforeModel() {
     const user = this.modelFor('application');
     const isStudent = user.get('isStudent');
 
     if (isStudent) {
-      this.transitionTo('/');
+      this.router.transitionTo('/');
     }
   }
   model() {
@@ -27,10 +28,10 @@ export default class WorkspacesNewRoute extends AuthenticatedRoute {
   }
   // Created workspaceId and is passed from component to redirect
   @action toWorkspaces(id) {
-    this.transitionTo('workspace.work', id);
+    this.router.transitionTo('workspace.work', id);
   }
 
   @action toWorkspace(id) {
-    this.transitionTo('workspace/work', id);
+    this.router.transitionTo('workspace/work', id);
   }
 }
diff --git a/app/services/assignment-permissions.js b/app/services/assignment-permissions.js
index 8444e9970..9cea23ec8 100644
--- a/app/services/assignment-permissions.js
+++ b/app/services/assignment-permissions.js
@@ -3,12 +3,13 @@ import Service, { inject as service } from '@ember/service';
 export default class AssignmentPermissionsService extends Service {
   @service('edit-permissions') base;
   @service('utility-methods') utils;
+  @service currentUser;
 
-  getPermissionsLevel(assignment, section, user = this.base.user) {
+  getPermissionsLevel(assignment, section, user = this.currentUser.user) {
     if (!user) {
       return 0;
     }
-    if (this.base.isActingAdmin) {
+    if (this.currentUser.isActingAdmin) {
       return 4;
     }
     if (this.base.isRecordInPdDomain(section)) {
@@ -37,18 +38,18 @@ export default class AssignmentPermissionsService extends Service {
     if (!this.utils.isNonEmptyArray(teacherIds)) {
       return false;
     }
-    return teacherIds.includes(this.base.userId);
+    return teacherIds.includes(this.currentUser.id);
   }
 
   canDelete(assignment) {
-    if (this.base.isActingAdmin) {
+    if (this.currentUser.isActingAdmin) {
       return true;
     }
     return !this.haveAnswersBeenSubmitted(assignment);
   }
 
   canEditProblem(assignment, section) {
-    if (this.base.isActingAdmin) {
+    if (this.currentUser.isActingAdmin) {
       return true;
     }
     if (this.haveAnswersBeenSubmitted(assignment)) {
@@ -58,7 +59,7 @@ export default class AssignmentPermissionsService extends Service {
   }
 
   canEditLinkedWorkspace(assignment) {
-    if (this.base.isActingAdmin) {
+    if (this.currentUser.isActingAdmin) {
       return true;
     }
     return this.base.isCreator(assignment);
@@ -82,7 +83,7 @@ export default class AssignmentPermissionsService extends Service {
   }
 
   canEditDueDate(assignment) {
-    if (this.base.isActingAdmin) {
+    if (this.currentUser.isActingAdmin) {
       return true;
     }
     return this.base.isCreator(assignment);
diff --git a/app/services/current-user.js b/app/services/current-user.js
index cfcba1ad0..36e4de9da 100644
--- a/app/services/current-user.js
+++ b/app/services/current-user.js
@@ -7,4 +7,32 @@ export default class CurrentUserService extends Service {
   setUser(data) {
     this.user = data;
   }
+
+  get isAdmin() {
+    return this.user.isAdmin;
+  }
+
+  get isPdAdmin() {
+    return this.user.isPdAdmin;
+  }
+
+  get isTeacher() {
+    return this.user.isTeacher;
+  }
+
+  get isStudent() {
+    return this.user.isStudent;
+  }
+
+  get isActingAdmin() {
+    return this.user.isActingAdmin;
+  }
+
+  get isActingPdAdmin() {
+    return this.user.isActingPdAdmin;
+  }
+
+  get id() {
+    return this.user.id;
+  }
 }
diff --git a/app/services/edit-permissions.js b/app/services/edit-permissions.js
index 71d3a5300..418d95096 100644
--- a/app/services/edit-permissions.js
+++ b/app/services/edit-permissions.js
@@ -1,49 +1,29 @@
-import { computed } from '@ember/object';
-import { alias, equal } from '@ember/object/computed';
 import Service, { inject as service } from '@ember/service';
+export default class EditPermissionsService extends Service {
+  @service('utility-methods') utils;
+  @service currentUser;
 
-export default Service.extend({
-  utils: service('utility-methods'),
-  user: null,
-  setUser(user) {
-    this.set('user', user);
-  },
-  userId: alias('user.id'),
-  userOrg: alias('user.organization'),
-  accountType: alias('user.accountType'),
-  actingRole: alias('user.actingRole'),
-  isAdmin: equal('accountType', 'A'),
-  isPdAdmin: equal('accountType', 'P'),
-  isTeacher: equal('accountType', 'T'),
-  isStudent: equal('accountType', 'S'),
-  isPseudoStudent: equal('actingRole', 'S'),
-
-  userOrgId: computed('user', function () {
-    return this.utils.getBelongsToId(this.user, 'organization');
-  }),
-  isActingAdmin: computed('isPseudoStudent', 'isAdmin', function () {
-    return !this.isPseudoStudent && this.isAdmin;
-  }),
-
-  isActingPdAdmin: computed('isPseudoStudent', 'isPdAdmin', function () {
-    return !this.isPseudoStudent && this.isPdAdmin;
-  }),
-
-  isCreator: function (record, user = this.user) {
+  isCreator(record, user = this.currentUser.user) {
     if (!user || !record) {
       return;
     }
-    return this.utils.getBelongsToId(record, 'createdBy') === this.userId;
-  },
+    return (
+      this.utils.getBelongsToId(record, 'createdBy') ===
+      this.currentUser.user.id
+    );
+  }
 
-  doesRecordBelongToOrg(record, orgId = this.userOrgId) {
+  doesRecordBelongToOrg(
+    record,
+    orgId = this.utils.getBelongsToId(this.user, 'organization')
+  ) {
     if (!record || !orgId) {
       return;
     }
     return this.utils.getBelongsToId(record, 'organization') === orgId;
-  },
+  }
 
   isRecordInPdDomain(record) {
     return this.isActingPdAdmin && this.doesRecordBelongToOrg(record);
-  },
-});
+  }
+}
diff --git a/app/services/error-handling.js b/app/services/error-handling.js
index 6249b1ea2..b5fab5ae2 100644
--- a/app/services/error-handling.js
+++ b/app/services/error-handling.js
@@ -1,114 +1,106 @@
-import Service from '@ember/service';
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
+import Service, { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
+/**
+ * A service for collecting, storing, and auto-clearing error messages,
+ * 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 = {};
 
-  isAdapterError(err) {
-    if (!err) {
-      return;
-    }
-    return err.isAdapterError === true;
-  }
-
-  isRecordInvalid(record) {
-    if (!record) {
-      return;
-    }
-    return record.get('isValid') === false;
-  }
-
-  setErrorMessages(err, propName) {
-    if (!err || !propName) {
-      return;
-    }
-
-    if (err.errors && Array.isArray(err.errors)) {
-      const details = err.errors.map((e) => e.detail);
-      this.errors = { ...this.errors, [propName]: details };
-    } else if (typeof err.message === 'string') {
-      this.errors = { ...this.errors, [propName]: [err.message] };
-    } else {
-      this.errors = { ...this.errors, [propName]: ['Unknown Error'] };
-    }
-  }
-
+  /**
+   * Delays (in ms) after which errors are automatically removed for a given key.
+   * 3 minutes = 180_000.
+   */
+  AUTO_CLEAR_DELAY = 180_000;
+
+  /**
+   * Map of propName -> setTimeout handle for auto-clear timers.
+   */
+  _autoClearTimers = {};
+
+  // ---------------------------------------------------------------------------
+  // PUBLIC METHODS (API)
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Store error messages for `propName`, rolling back the given record(s) if invalid.
+   * @param {Object} err - The error object (may contain `errors` array, etc.).
+   * @param {string} propName - The key under which to store these errors.
+   * @param {DS.Model|null} record - A single record to possibly rollback.
+   * @param {Array<DS.Model>} records - Additional records to possibly rollback.
+   */
   handleErrors(err, propName, record = null, records = []) {
-    this.setErrorMessages(err, propName);
+    this._setErrorMessages(err, propName);
 
-    if (record) {
-      if (this.isRecordInvalid(record)) {
-        record.rollbackAttributes();
-      }
+    if (record && this._isRecordInvalid(record)) {
+      record.rollbackAttributes();
     }
+
     if (records) {
-      records.forEach((record) => {
-        if (this.isRecordInvalid(record)) {
-          record.rollbackAttributes();
+      records.forEach((r) => {
+        if (this._isRecordInvalid(r)) {
+          r.rollbackAttributes();
         }
       });
     }
   }
 
+  /**
+   * Retrieve the error array for a given key (e.g., "problemLoadErrors").
+   * @param {string} prop - Key at which errors are stored.
+   * @returns {Array<string>|undefined} - Array of error messages (or undefined if none).
+   */
   getErrors(prop) {
     return this.errors[prop];
   }
 
+  /**
+   * Remove error messages for the given key(s).
+   * e.g., removeMessages('problemLoadErrors') or removeMessages('foo', 'bar').
+   * @param {...string|Array<string>} errors - One or more keys (or an array of keys).
+   */
   removeMessages(...errors) {
-    for (let e of errors) {
+    for (const e of errors) {
       this._removeMessages(e);
     }
   }
 
-  _removeMessages(err) {
-    if (!err) {
-      return;
-    }
-
-    if (Array.isArray(err)) {
-      for (let e of err) {
-        if (typeof e === 'string') {
-          if (this.errors[e]) {
-            this.errors[e] = null;
-          }
-        }
-      }
-    } else {
-      if (typeof err !== 'string') {
-        return;
-      }
-      if (this.errors[err]) {
-        this.errors[err] = null;
-      }
-    }
-    this.errors = { ...this.errors };
-  }
-
+  /**
+   * Display an error toast (via SweetAlert) and optionally rollback invalid records.
+   * @param {Object} err - The error object (may contain `errors` array, etc.).
+   * @param {DS.Model|Array<DS.Model>} recordsToRollback - One or more records to rollback.
+   */
   displayErrorToast(err, recordsToRollback) {
     if (!err) {
       return;
     }
-    let msg;
 
-    let errors = err.errors;
+    let msg;
+    const { errors } = err;
 
     if (Array.isArray(errors) && errors.length > 0) {
-      let firstError = errors[0];
+      const firstError = errors[0];
       if (firstError) {
-        msg = errors[0].detail || 'Unknown Error';
+        msg = firstError.detail || 'Unknown Error';
       }
     }
 
-    let records = Array.isArray(recordsToRollback)
+    const records = Array.isArray(recordsToRollback)
       ? recordsToRollback
       : [recordsToRollback];
 
     records.forEach((rec) => {
-      if (this.isRecordInvalid(rec)) {
+      if (this._isRecordInvalid(rec)) {
         rec.rollbackAttributes();
       }
     });
@@ -116,13 +108,134 @@ export default class ErrorHandlingService extends Service {
     this.alert.showToast('error', msg, 'bottom-end', 5000, false, null);
   }
 
-  @action
+  /**
+   * Remove a single error string from the array stored at `prop`.
+   * If removing it empties the array, remove the key entirely (and cancel the auto-clear timer).
+   * @param {string} prop - The key under which the error array lives.
+   * @param {string} err - The error string to remove from the array.
+   */
   removeErrorFromArray(prop, err) {
     if (!this.errors[prop]) {
       return;
     }
-    this.errors[prop].splice(this.errors[prop].indexOf(err), 1);
-    this.errors = { ...this.errors };
-    return;
+
+    const idx = this.errors[prop].indexOf(err);
+    if (idx !== -1) {
+      const updatedErrors = [...this.errors[prop]];
+      updatedErrors.splice(idx, 1);
+      if (updatedErrors.length === 0) {
+        delete this.errors[prop];
+        this._cancelTimerFor(prop);
+      } else {
+        this.errors = { ...this.errors, [prop]: updatedErrors };
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // PRIVATE METHODS
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Checks if a record is invalid. We assume `.isValid` is a property on the model.
+   * @param {DS.Model} record
+   * @returns {boolean}
+   */
+  _isRecordInvalid(record) {
+    return !record?.isValid ?? false;
+  }
+
+  /**
+   * Sets error messages for a given key, parsing the error object.
+   * Schedules an auto-clear timer for that key.
+   * @param {Object} err - The error object
+   * @param {string} propName - Key under which to store errors
+   */
+  _setErrorMessages(err, propName) {
+    if (!err || !propName) {
+      return;
+    }
+
+    let updatedErrors = { ...this.errors };
+
+    if (err.errors && Array.isArray(err.errors)) {
+      // Typically an array of { detail: 'Message...' }
+      const details = err.errors.map((e) => {
+        if (typeof e.detail === 'object') {
+          console.log('Error detail object:', e.detail);
+        }
+        return e.detail;
+      });
+      updatedErrors[propName] = details;
+    } else if (typeof err.message === 'string') {
+      updatedErrors[propName] = [err.message];
+    } else {
+      updatedErrors[propName] = ['Unknown Error'];
+    }
+
+    this.errors = updatedErrors;
+    this._restartAutoClearTimer(propName);
+  }
+
+  /**
+   * Internal helper used by removeMessages(...).
+   * Accepts either a single string key or an array of string keys.
+   */
+  _removeMessages(propOrProps) {
+    if (!propOrProps) {
+      return;
+    }
+
+    if (Array.isArray(propOrProps)) {
+      propOrProps.forEach((key) => this._clearErrorsForKey(key));
+    } else {
+      this._clearErrorsForKey(propOrProps);
+    }
+  }
+
+  /**
+   * Clears all errors at a particular key and cancels its auto-clear timer.
+   * @param {string} key
+   */
+  _clearErrorsForKey(key) {
+    if (typeof key !== 'string') {
+      return;
+    }
+
+    if (this.errors[key]) {
+      const updatedErrors = { ...this.errors };
+      delete updatedErrors[key];
+      this.errors = updatedErrors;
+      this._cancelTimerFor(key);
+    }
+  }
+
+  /**
+   * Cancel any existing timer for a given key and start a fresh one.
+   * If no errors are added before it fires, that key is auto-removed.
+   * @param {string} key
+   */
+  _restartAutoClearTimer(key) {
+    this._cancelTimerFor(key);
+
+    this._autoClearTimers[key] = setTimeout(() => {
+      if (this.errors[key]) {
+        const updatedErrors = { ...this.errors };
+        delete updatedErrors[key];
+        this.errors = updatedErrors;
+      }
+      delete this._autoClearTimers[key];
+    }, this.AUTO_CLEAR_DELAY);
+  }
+
+  /**
+   * Cancels the timer for a particular key (if it exists), then deletes it from the map.
+   * @param {string} key
+   */
+  _cancelTimerFor(key) {
+    if (this._autoClearTimers[key]) {
+      clearTimeout(this._autoClearTimers[key]);
+      delete this._autoClearTimers[key];
+    }
   }
 }
diff --git a/app/services/json-csv.js b/app/services/json-csv.js
index d680464bd..d52ce4945 100644
--- a/app/services/json-csv.js
+++ b/app/services/json-csv.js
@@ -1,25 +1,49 @@
 import Service from '@ember/service';
 
 export default class JsonCsvService extends Service {
-  arrayToCsv(array) {
+  arrayToCsv(array, columnHeaders) {
     if (!array.length) {
       return 'No data to display';
     }
+
     try {
-      const rows = [Object.keys(array[0])].concat(array);
-      return rows
-        .map((row) => {
-          return Object.values(row)
-            .map((value) => {
-              return typeof value === 'string'
-                ? encodeURIComponent(JSON.stringify(value)).replace(/,/g, '')
-                : value;
-            })
-            .toString();
+      // Use given headers or from the first object
+      const headers = columnHeaders || Object.keys(array[0]);
+
+      // Create CSV header row
+      const headerRow = headers
+        .map((header) => {
+          const escaped = header.replace(/"/g, '""');
+          return `"${escaped}"`;
         })
-        .join('\n');
+        .join(',');
+
+      // Create data rows
+      const dataRows = array.map((item) => {
+        return headers
+          .map((header) => {
+            const value = item[header];
+            if (value == null) {
+              return '';
+            }
+            // Convert anything that isn’t a string into a string
+            let text = String(value);
+
+            // Escape internal quotes by doubling them
+            text = text.replace(/"/g, '""');
+
+            // Wrap the entire text in quotes
+            return `"${text}"`;
+          })
+          .join(',');
+      });
+
+      // Combine header and data rows into a proper CSV string
+      const csvContent = [headerRow, ...dataRows].join('\n');
+
+      return csvContent;
     } catch (err) {
-      console.log(err);
+      console.error(err);
       return `error: ${err.message}`;
     }
   }
diff --git a/app/services/problem-permissions.js b/app/services/problem-permissions.js
index c9f383420..0a22fba7d 100644
--- a/app/services/problem-permissions.js
+++ b/app/services/problem-permissions.js
@@ -1,25 +1,28 @@
 import Service, { inject as service } from '@ember/service';
 
-export default Service.extend({
-  base: service('edit-permissions'),
-  isPublic: function (problem) {
-    return problem.get('privacySetting') === 'E';
-  },
-  isPrivate: function (problem) {
-    return problem.get('privacySetting') === 'M';
-  },
+export default class ProblemPermissionsService extends Service {
+  @service('edit-permissions') base;
+  @service currentUser;
 
-  isApproved(problem) {
-    return problem.get('status') === 'approved';
-  },
+  isPublic(problem) {
+    return problem.privacySetting === 'E';
+  }
 
-  isUsed(problem) {
-    return problem.get('isUsed');
-  },
+  isPrivate(problem) {
+    return problem.privacySetting === 'M';
+  }
+
+  isApproved(problem) {
+    return problem.status === 'approved';
+  }
 
   isTrashed(problem) {
-    return problem.get('isTrashed');
-  },
+    return problem.isTrashed;
+  }
+
+  isUsed(problem) {
+    return problem.isUsed;
+  }
 
   canDelete(problem) {
     // undefined if no or bad argument passed in
@@ -27,7 +30,7 @@ export default Service.extend({
       return;
     }
     // if admin return true
-    if (this.get('base.isAdmin')) {
+    if (this.currentUser.isAdmin) {
       return true;
     }
 
@@ -45,7 +48,7 @@ export default Service.extend({
 
     // currently this means that any non PdAdmin would not be able to edit/delete
 
-    if (!this.get('base.isPdAdmin')) {
+    if (!this.currentUser.isPdAdmin) {
       return false;
     }
 
@@ -57,7 +60,7 @@ export default Service.extend({
 
     // privacy setting can now only be 'O' or 'M'
     return this.base.doesRecordBelongToOrg(problem);
-  },
+  }
 
   canEdit(problem) {
     // undefined if no or bad argument passed in
@@ -65,7 +68,7 @@ export default Service.extend({
       return;
     }
     // if admin return true
-    if (this.get('base.isAdmin')) {
+    if (this.currentUser.isAdmin) {
       return true;
     }
 
@@ -83,7 +86,7 @@ export default Service.extend({
 
     // currently this means that any non PdAdmin would not be able to edit/delete
 
-    if (!this.get('base.isPdAdmin')) {
+    if (!this.currentUser.isPdAdmin) {
       return false;
     }
 
@@ -96,7 +99,7 @@ export default Service.extend({
     // privacy setting can now only be 'O' or 'M'
 
     return this.base.doesRecordBelongToOrg(problem);
-  },
+  }
 
   canAssign(problem) {
     // undefined if no or bad argument passed in
@@ -104,19 +107,19 @@ export default Service.extend({
       return;
     }
     // if admin return true
-    if (this.get('base.isAdmin')) {
+    if (this.currentUser.isAdmin) {
       return true;
     }
 
     return this.isApproved(problem);
-  },
+  }
 
   canPend(problem) {
     if (!problem) {
       return;
     }
-    return this.get('base.isAdmin');
-  },
+    return this.currentUser.isAdmin;
+  }
 
   writePermissions(problem, isDeleteSameAsEdit = true) {
     let ret = {};
@@ -134,5 +137,5 @@ export default Service.extend({
     ret.canPend = this.canPend(problem);
 
     return ret;
-  },
-});
+  }
+}
diff --git a/app/services/problem-utils.js b/app/services/problem-utils.js
new file mode 100644
index 000000000..a29a8496b
--- /dev/null
+++ b/app/services/problem-utils.js
@@ -0,0 +1,149 @@
+import Service from '@ember/service';
+import { service } from '@ember/service';
+import { hash } from 'rsvp';
+
+export default class ProblemUtilityService extends Service {
+  @service store;
+  @service currentUser;
+  @service('sweet-alert') alert;
+
+  async fetchProblemData(problemId) {
+    const problem = await this.store.findRecord('problem', problemId);
+    const organization = await this.currentUser.user.organization;
+    const recommendedProblems = organization
+      ? await organization.recommendedProblems
+      : [];
+
+    let flaggedBy, flaggedDate;
+    if (problem.flagReason?.flaggedBy) {
+      flaggedBy = await this.store.findRecord(
+        'user',
+        problem.flagReason.flaggedBy
+      );
+      flaggedDate = new Date(problem.flagReason.flaggedDate);
+    }
+
+    return hash({
+      problem,
+      sectionList: this.store.findAll('section'),
+      orgList: this.store.findAll('organization'),
+      recommendedProblems,
+      flaggedBy,
+      flaggedDate,
+    });
+  }
+
+  // Return a local copy of the problem as an object.
+  async extractEditableProperties(problem) {
+    const categories = await problem.categories; // fully load
+    return {
+      title: problem.title,
+      author: problem.author,
+      text: problem.text,
+      categories: categories || [],
+      status: problem.status,
+      privacySetting: problem.privacySetting,
+      sharingAuth: problem.sharingAuth,
+      additionalInfo: problem.additionalInfo,
+      copyrightNotice: problem.copyrightNotice,
+      image: problem.image,
+      keywords: problem.keywords?.slice() || [],
+    };
+  }
+
+  /**
+   * Converts an Ember Data Problem model into a plain JS object
+   * suitable for passing to createRecord('problem', { ... }).
+   *
+   * Note: We omit fields like 'id', 'isUsed', 'error' because they
+   * are typically not needed when creating a new problem record.
+   */
+  async convertToObject(problem) {
+    const categories = await problem.categories; // fully load
+    return {
+      title: problem.title,
+      puzzleId: problem.puzzleId,
+      text: problem.text,
+      imageUrl: problem.imageUrl,
+      sourceUrl: problem.sourceUrl,
+      image: problem.image, // Ember Data relationship (model instance) if loaded
+      origin: problem.origin,
+      modifiedBy: problem.modifiedBy,
+      organization: problem.organization,
+      additionalInfo: problem.additionalInfo,
+      privacySetting: problem.privacySetting,
+      categories: categories || [], // copy the array of models
+      keywords: problem.keywords?.slice() ?? [], // copy the array of strings
+      copyrightNotice: problem.copyrightNotice,
+      sharingAuth: problem.sharingAuth,
+      author: problem.author,
+      status: problem.status,
+      flagReason: problem.flagReason,
+      contexts: problem.contexts,
+    };
+  }
+
+  /**
+   * Creates and saves a new "Problem" record, copying all fields from the given
+   * `problem` but overwriting any specified in `newProperties`.
+   *
+   * @param {DS.Model} problem - An existing Problem model to copy.
+   * @param {Object} newProperties - Key-value pairs that override the copied fields.
+   * @returns {Promise<DS.Model>} - Resolves with the newly created and saved Problem.
+   */
+  async saveCopy(problem, newProperties = {}) {
+    // Convert the existing problem into plain JS object
+    let baseObject = await this.convertToObject(problem);
+
+    // Merge the newProperties over the base fields
+    let mergedProps = { ...baseObject, ...newProperties };
+
+    // Create a new problem record
+    let newProblem = this.store.createRecord('problem', mergedProps);
+
+    // Save and return the promise so callers can await or .then().catch()
+    return newProblem.save();
+  }
+
+  async deleteProblem(problem) {
+    const { value: shouldDelete } = await this.alert.showModal(
+      'warning',
+      'Are you sure you want to delete this problem?',
+      null,
+      'Yes, delete it'
+    );
+
+    if (!shouldDelete) {
+      return { wasDeleted: false, wasRestored: false };
+    }
+
+    problem.isTrashed = true;
+    const savedProblem = await problem.save();
+
+    const { value: shouldRestore } = await this.alert.showToast(
+      'success',
+      'Problem Deleted',
+      'bottom-end',
+      5000,
+      true,
+      'Undo'
+    );
+
+    if (!shouldRestore) {
+      return { wasDeleted: true, wasRestored: false };
+    }
+
+    savedProblem.isTrashed = false;
+    savedProblem.save().then(() => {
+      this.alert.showToast(
+        'success',
+        'Problem Restored',
+        'bottom-end',
+        3000,
+        false,
+        null
+      );
+      return { wasDeleted: false, wasRestored: true };
+    });
+  }
+}
diff --git a/app/services/utility-methods.js b/app/services/utility-methods.js
index e12a04b13..23ed4a88b 100644
--- a/app/services/utility-methods.js
+++ b/app/services/utility-methods.js
@@ -1,5 +1,5 @@
 import Service from '@ember/service';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class UtilityService extends Service {
   @service currentUser;
diff --git a/app/services/workspace-permissions.js b/app/services/workspace-permissions.js
index ecae584bc..677c0bf84 100644
--- a/app/services/workspace-permissions.js
+++ b/app/services/workspace-permissions.js
@@ -1,85 +1,82 @@
-/* eslint-disable */
-import Service, { inject as service } from '@ember/service';
+import Service, { service } from '@ember/service';
 
-export default Service.extend({
-  currentUser: null,
-  setUser(user) {
-    this.set('currentUser', user);
-  },
-  utils: service('utility-methods'),
+export default class WorkspacePermissionsService extends Service {
+  @service('utility-methods') utils;
+  @service currentUser;
 
-  isAdmin() {
-    return this.get('currentUser.isAdmin');
-  },
+  get user() {
+    return this.currentUser.user;
+  }
 
-  isPdAdmin() {
-    return this.get('currentUser.isPdAdmin');
-  },
+  get isAdmin() {
+    return this.user.isAdmin;
+  }
+
+  get isPdAdmin() {
+    return this.user.isPdAdmin;
+  }
 
   isOwner(ws) {
     let ownerId = this.utils.getBelongsToId(ws, 'owner');
-    return ownerId === this.get('currentUser.id');
-  },
+    return ownerId === this.user.id;
+  }
 
   isCreator(ws) {
     let creatorId = this.utils.getBelongsToId(ws, 'createdBy');
-    return creatorId === this.get('currentUser.id');
-  },
+    return creatorId === this.user.id;
+  }
 
   isInPdAdminDomain(ws) {
-    if (!this.isPdAdmin()) {
+    if (!this.isPdAdmin) {
       return false;
     }
     let utils = this.utils;
 
-    let userOrgId = utils.getBelongsToId(this.currentUser, 'organization');
+    let userOrgId = utils.getBelongsToId(this.user, 'organization');
     let wsOrgId = utils.getBelongsToId(ws, 'organization');
 
     return userOrgId === wsOrgId;
-  },
+  }
 
   canDelete(ws) {
-    return this.isAdmin() || this.isCreator(ws) || this.isOwner(ws);
-  },
+    return this.isAdmin || this.isCreator(ws) || this.isOwner(ws);
+  }
 
   hasOwnerPrivileges(ws) {
     return (
-      this.isAdmin() ||
+      this.isAdmin ||
       this.isOwner(ws) ||
       this.isCreator(ws) ||
       this.isInPdAdminDomain(ws)
     );
-  },
+  }
 
   canCopy(ws) {
     // have to add a check is workspace is allowed to be copied
-    if (this.canDelete(ws) || this.isInPdAdminDomain(ws)) {
-      return true;
-    } else {
-      return false;
-    }
-  },
+    return this.canDelete(ws) || this.isInPdAdminDomain(ws);
+  }
+
   isFeedbackApprover(ws) {
     if (!ws) {
       return false;
     }
 
-    let approvers = ws.get('feedbackAuthorizers') || [];
-    return approvers.includes(this.get('currentUser.id'));
-  },
+    let approvers = ws.feedbackAuthorizers || [];
+    return approvers.includes(this.user.id);
+  }
 
   canApproveFeedback(ws) {
     if (!ws || ws.workspaceType === 'parent') {
       return false;
     }
     return (
-      this.isAdmin() ||
+      this.isAdmin ||
       this.isOwner(ws) ||
       this.isCreator(ws) ||
       this.isFeedbackApprover(ws) ||
       this.isInPdAdminDomain(ws)
     );
-  },
+  }
 
   canEdit(ws, recordType, requiredPermissionLevel) {
     const utils = this.utils;
@@ -88,7 +85,7 @@ export default Service.extend({
       return false;
     }
 
-    let wsType = ws.get('workspaceType');
+    let wsType = ws.workspaceType;
 
     if (wsType === 'parent') {
       // cannot create new selections or taggings or edit folders
@@ -103,7 +100,7 @@ export default Service.extend({
     }
 
     if (
-      this.isAdmin() ||
+      this.isAdmin ||
       this.isOwner(ws) ||
       this.isCreator(ws) ||
       this.isInPdAdminDomain(ws)
@@ -111,7 +108,7 @@ export default Service.extend({
       return true;
     }
 
-    let wsMode = ws.get('mode');
+    let wsMode = ws.mode;
 
     let isPublic = wsMode === 'public' || wsMode === 'internet';
 
@@ -122,16 +119,13 @@ export default Service.extend({
 
     // check ws permissions
 
-    const wsPermissions = ws.get('permissions');
+    const wsPermissions = ws.permissions;
 
     if (!utils.isNonEmptyArray(wsPermissions)) {
       return false;
     }
 
-    const userPermissions = wsPermissions.findBy(
-      'user',
-      this.get('currentUser.id')
-    );
+    const userPermissions = wsPermissions.findBy('user', this.user.id);
     if (!utils.isNonEmptyObject(userPermissions)) {
       return false;
     }
@@ -169,5 +163,5 @@ export default Service.extend({
     }
 
     return permissionLevel >= requiredPermissionLevel;
-  },
-});
+  }
+}
diff --git a/app/services/workspace-reports.js b/app/services/workspace-reports.js
index a990b19a5..314b2434a 100644
--- a/app/services/workspace-reports.js
+++ b/app/services/workspace-reports.js
@@ -6,8 +6,17 @@ export default class WorkspaceReportsService extends Service {
   @service jsonCsv;
   @service currentUrl;
 
+  getUniqueFolderNames(selection) {
+    const folderNames = new Set();
+    const folders = selection.get('folders') || [];
+    folders.forEach((folder) => {
+      folderNames.add(folder.get('name'));
+    });
+    return Array.from(folderNames);
+  }
+
   submissionReportCsv(model) {
-    const submissionsArray = model.submissions.toArray();
+    const submissionsArray = model.submissions.slice();
 
     // Group submissions by submitter
     const submissionsByUser = submissionsArray.reduce((acc, submission) => {
@@ -34,17 +43,8 @@ export default class WorkspaceReportsService extends Service {
     // Flatten the grouped submissions back into an array
     const labeledSubmissions = [].concat(...Object.values(submissionsByUser));
 
-    // Determine the maximum number of selections
-    let maxSelections = 0;
-    labeledSubmissions.forEach((submission) => {
-      const selectionsCount = submission.get('selections').length;
-      if (selectionsCount > maxSelections) {
-        maxSelections = selectionsCount;
-      }
-    });
-
     // Generate CSV data with dynamic columns for selections
-    return labeledSubmissions.flatMap((submission) => {
+    const data = labeledSubmissions.flatMap((submission) => {
       const baseData = {
         'Name of workspace': submission.get('workspaces.firstObject.name'),
         'Workspace URL': this.currentUrl.currentUrl,
@@ -65,13 +65,10 @@ export default class WorkspaceReportsService extends Service {
         }`,
         'Submission ID': submission.id,
         'Submission or Revision': submission.submissionLabel,
-        'Number of Folders': model.workspace.foldersLength,
+        'Number of Workspace Folders': model.workspace.foldersLength,
         'Number of Notice/Wonder/Feedback': model.workspace.commentsLength,
-        // Do we need this? Submission order currently inaccurate due to sorting of array.
-        // 'Submission Order': index + 1,
       };
-
-      const selections = submission.get('selections').toArray();
+      const selections = submission.get('selections').slice();
       if (selections.length === 0) {
         // For submissions without selections, return the base data only
         return [baseData];
@@ -85,13 +82,18 @@ export default class WorkspaceReportsService extends Service {
             [`Selector Date`]: selectorInfo.selectionCreateDate,
             [`Annotator`]: selectorInfo.annotatorUsername,
             [`Text of Annotator`]: selectorInfo.annotatorText,
-            ['Annotator Date']: selectorInfo.annotatorCreateDate,
+            [`Annotator Date`]: selectorInfo.annotatorCreateDate,
+            [`Folder(s) for Selection`]:
+              this.getUniqueFolderNames(selection).join('; '),
           };
 
           return { ...baseData, ...selectionData };
         });
       }
     });
+
+    const headers = [...new Set(data.flatMap((row) => Object.keys(row)))];
+    return { headers, data };
   }
 
   createSelectorInfo(selector) {
@@ -187,7 +189,8 @@ export default class WorkspaceReportsService extends Service {
     });
   }
   submissionReport(model) {
-    return this.jsonCsv.arrayToCsv(this.submissionReportCsv(model));
+    const { headers, data } = this.submissionReportCsv(model);
+    return this.jsonCsv.arrayToCsv(data, headers);
   }
 
   responseReport(model) {
diff --git a/app/styles/_filter-list.scss b/app/styles/_filter-list.scss
index a609b1a06..43686ac02 100644
--- a/app/styles/_filter-list.scss
+++ b/app/styles/_filter-list.scss
@@ -434,7 +434,7 @@
             }
           }
         }
-        #admin-problem-filter, #admin-workspace-filter {
+        #admin-filter {
           background-color: $background-body;
           padding: 10px 0 20px 20px;
           .choose-filter-admin {
@@ -790,7 +790,7 @@
 .click-menu {
   position: absolute;
   z-index: 100;
-  margin-top: 28px;
+  margin-top: 10px;
   margin-left: -120px;
   width: 100px;
   padding: 10px 15px;
diff --git a/app/styles/_users.scss b/app/styles/_users.scss
index 4821cb3a4..63e357614 100644
--- a/app/styles/_users.scss
+++ b/app/styles/_users.scss
@@ -97,9 +97,8 @@
 }
 
 .reset-user-box {
-  margin: 20px;
   .auth-form-input {
-    width: 50%;
+    width: 80%;
     margin: 0 auto;
     label {
       margin-bottom: 10px;
diff --git a/app/templates/assignments.hbs b/app/templates/assignments.hbs
index f2317adb9..a56560b67 100644
--- a/app/templates/assignments.hbs
+++ b/app/templates/assignments.hbs
@@ -1,7 +1,7 @@
-<AssignmentList @store={{this.store}} @assignments={{this.model.assignments}} @currentUser={{this.model.currentUser}} @assignmentList={{this.model.filtered}} />
+<AssignmentList @assignments={{@model.assignments}} />
 
-<div class="list-outlet">
+<div class='list-outlet'>
   {{outlet}}
 </div>
 
-<div class="clear"/>
\ No newline at end of file
+<div class='clear' />
\ No newline at end of file
diff --git a/app/templates/assignments/assignment.hbs b/app/templates/assignments/assignment.hbs
index 29aa9da1f..314581a12 100644
--- a/app/templates/assignments/assignment.hbs
+++ b/app/templates/assignments/assignment.hbs
@@ -1,2 +1,14 @@
-{{page-title this.model.assignment.name}}
-<AssignmentInfo @sections={{this.model.sections}} @assignment={{this.model.assignment}} @groups={{this.model.groups}} @assignmentStudents={{this.model.students}} @currentUser={{this.model.currentUser}} @store={{this.store}} @toAssignments="toAssignments" />
\ No newline at end of file
+{{page-title @model.assignment.name}}
+<AssignmentInfo
+  @sections={{@model.sections}}
+  @assignment={{@model.assignment}}
+  @groups={{@model.groups}}
+  @assignmentStudents={{@model.students}}
+  @currentProblem={{@model.currentProblem}}
+  @currentSection={{@model.currentSection}}
+  @linkedWorkspaces={{@model.linkedWorkspaces}}
+  @parentWorkspace={{@model.parentWorkspace}}
+  @answers={{@model.answers}}
+  @onAnswerCreated={{this.onAnswerCreated}}
+  @isStudent={{@model.isStudent}}
+/>
\ No newline at end of file
diff --git a/app/templates/components/categories-menu.hbs b/app/templates/components/categories-menu.hbs
deleted file mode 100644
index 4704bfb51..000000000
--- a/app/templates/components/categories-menu.hbs
+++ /dev/null
@@ -1,71 +0,0 @@
-<ul class="cd-accordion-menu animated">
-  {{#each categories as |category|}}
-  <li class="has-children">
-    <input type="checkbox" name="{{category.identifier}}" id="{{category.identifier}}">
-    <label class="menu-label" for="{{category.identifier}}">{{category.description}}</label>
-    <ul>
-      {{#each category.domains as |domain|}}
-      <li class="has-children">
-        <input type="checkbox" name="{{domain.identifier}}" id="{{domain.identifier}}">
-        <label class="menu-label" for="{{domain.identifier}}">{{domain.description}}<a href="{{domain.url}}" target="_blank" rel="noopener noreferrer"> <i class="fas fa-external-link-alt"></i></a></label>
-          <ul>
-            {{#each domain.topics as |topic|}}
-              {{#if topic.standards}}
-                <li class="has-children">
-                  <input type="checkbox" name="{{topic.identifier}}" id="{{topic.identifier}}">
-                  <label class="menu-label" for="{{topic.identifier}}">{{topic.description}}</label>
-                  <ul>
-                    {{#each topic.standards as |standard|}}
-                    {{#if standard.substandards}}
-                    <li class="has-children">
-                      <input type="checkbox" name="{{standard.identifier}}" id="{{standard.identifier}}">
-                      <label class="menu-label" for="{{standard.identifier}}">{{standard.description}}</label>
-                      <ul>
-                        {{#each standard.substandards as |sub|}}
-                        <li class="item"><button type="button" {{action 'addCategory' sub}}>+</button> <span>{{sub.identifier}}</span> - {{sub.description}}</li>
-                        {{/each}}
-                      </ul>
-                    </li>
-                    {{else}}
-                    <li class="item"><button id="{{standard.identifier}}" type="button" {{action 'addCategory' standard}}>+</button> <span>{{standard.identifier}}</span> - {{standard.description}}</li>
-                    {{/if}}
-                    {{/each}}
-                      <li class="item"><button type="button" {{action 'addCategory' topic}}>+</button> Other</li>
-                  </ul>
-                </li>
-              {{else}}
-                  <li class="item"><button type="button" {{action 'addCategory' topic}}>+</button> <span>{{topic.identifier}}</span> - {{topic.description}}</li>
-              {{/if}}
-            {{/each}}
-              <li class="item"><button type="button" {{action 'addCategory' domain}}>+</button> Other</li>
-          </ul>
-      </li>
-      {{/each}}
-      <li>
-        <label for="other" class="menu-label-2"><button type="button" {{action 'addCategory' category}}>+</button> Other</label>
-      </li>
-        {{!-- <li class="top-level"><button {{action 'addCategory' category}}>+</button> Other</li> --}}
-    </ul>
-  </li>
-  {{/each}}
-</ul>
-
-
-
-<script>
-  jQuery(document).ready(function () {
-    var accordionsMenu = $('.cd-accordion-menu');
-
-    if (accordionsMenu.length > 0) {
-
-      accordionsMenu.each(function () {
-        var accordion = $(this);
-        //detect change in the input[type="checkbox"] value
-        accordion.on('change', 'input[type="checkbox"]', function () {
-          var checkbox = $(this);
-          (checkbox.prop('checked')) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
-        });
-      });
-    }
-  });
-</script>
\ No newline at end of file
diff --git a/app/templates/components/comment-list.hbs b/app/templates/components/comment-list.hbs
index 251d81900..d03216e42 100644
--- a/app/templates/components/comment-list.hbs
+++ b/app/templates/components/comment-list.hbs
@@ -9,7 +9,7 @@
   </header>
   {{#if this.canComment}}
     <div class='label-select {{this.newCommentLabel}}'>
-      <MySelect
+      <Ui::MySelect
         @content={{this.labelOptions}}
         @cannotBeNull={{true}}
         @selectedValue={{this.newCommentLabel}}
@@ -41,10 +41,14 @@
     {{#if this.showComposeButtons}}
       <div class='submit-buttons'>
         <button
-          class='primary-button cancel-button' type="button" {{action 'cancelComment'}}
+          class='primary-button cancel-button'
+          type='button'
+          {{action 'cancelComment'}}
         >Cancel</button>
         <button
-          class='primary-button save' type="button" {{action 'madeSelection'}}
+          class='primary-button save'
+          type='button'
+          {{action 'madeSelection'}}
         >Save</button>
       </div>
     {{/if}}
@@ -87,7 +91,10 @@
                   @value={{this.sinceDate}}
                 />
                 {{#if this.showApplyDate}}
-                  <button type="button" {{action 'applySinceDate'}}>Apply</button>
+                  <button
+                    type='button'
+                    {{action 'applySinceDate'}}
+                  >Apply</button>
                 {{/if}}
               </span>
             </label>
@@ -126,7 +133,7 @@
     <p class='error-message'>{{error}}</p>
   {{/each}}
   {{#if this.invalidDateError}}
-    <ErrorBox
+    <Ui::ErrorBox
       @error={{this.invalidDateError}}
       @showDismiss={{true}}
       @resetError={{action (mut this.invalidDateError) null}}
diff --git a/app/templates/components/image-upload.hbs b/app/templates/components/image-upload.hbs
deleted file mode 100644
index c87b1dcf5..000000000
--- a/app/templates/components/image-upload.hbs
+++ /dev/null
@@ -1,62 +0,0 @@
-<form enctype='multipart/form-data'>
-  <input
-    multiple={{acceptMultiple}}
-    onchange={{action 'updateFiles'}}
-    accept={{acceptableFileTypes}}
-    type='file'
-    class='image-upload'
-  />
-
-  {{#unless hideSubmit}}
-    {{#if filesToBeUploaded}}
-      <input type='button' value='Upload Files' {{action 'uploadImages'}} />
-    {{/if}}
-  {{/unless}}
-</form>
-
-{{#if missingFilesError}}
-  <ErrorBox
-    @error='Please select files to upload'
-    @resetError={{action (mut missingFilesError) null}}
-    @showDismiss={{true}}
-  />
-{{/if}}
-
-{{#if isOverSizeLimit}}
-  {{#if isOverPdfLimit}}
-    <ErrorBox @error={{overPdfLimitMsg}} @showDismiss={{true}} />
-  {{/if}}
-  {{#if isOverImageLimit}}
-    <ErrorBox @error={{overImageLimitMsg}} @showDismiss={{true}} />
-  {{/if}}
-{{/if}}
-
-{{#if overSizedFileError}}
-  <ErrorBox
-    @error={{overSizedFileError}}
-    @showDismiss={{true}}
-    @resetError={{action (mut overSizedFileError) null}}
-  />
-{{/if}}
-
-{{#unless uploadResults}}
-  {{#if showLoadingMessage}}
-    <p class='loading-message'>Uploading images... Thank you for your patience.</p>
-  {{/if}}
-{{/unless}}
-
-{{#each uploadErrors as |error|}}
-  <p class='error-message'>{{error}}</p>
-{{/each}}
-
-{{#if uploadResults}}
-  <p class='upload-results'>
-    {{uploadResults.length}}
-    {{#if (greater-equal uploadResults.length 2)}}
-      files
-    {{else}}
-      file
-    {{/if}}
-    uploaded successfully!
-  </p>
-{{/if}}
\ No newline at end of file
diff --git a/app/templates/components/import-review-answers.hbs b/app/templates/components/import-review-answers.hbs
index 1ddf9c179..e7093d31e 100644
--- a/app/templates/components/import-review-answers.hbs
+++ b/app/templates/components/import-review-answers.hbs
@@ -1,63 +1,83 @@
-<div class="import-review-answers-page">
-  <p class="info">Please review your submissions to ensure everything is accurate. You can either defer creating a workspace until a later date, or we can automatically create a workspace for you from your uploaded submissions</p>
-
-  <div class="workspace-options">
-    <form id="import-workspace-options">
+<div class='import-review-answers-page'>
+  <p class='info'>Please review your submissions to ensure everything is
+    accurate. You can either defer creating a workspace until a later date, or
+    we can automatically create a workspace for you from your uploaded
+    submissions</p>
+
+  <div class='workspace-options'>
+    <form id='import-workspace-options'>
       <fieldset>
-      <h3>Workspace Creation Options</h3>
-      <ol>
-        <li>
-          <label for="createWorkspace">Do not create workspace</label>
-          <Input @type="checkbox" name="createWorkspace" @checked={{doNotCreateWorkspace}} />
-        </li>
-
-
-        {{#unless doNotCreateWorkspace}}
-        <li>
-          <label for="name">Workspace Name</label>
-          <Input id="requestedName" @type="text" @value={{requestedName}} />
-        </li>
-        <li>
-          <label for="folders">Folders</label>
-          <MySelect @content={{folderSets}} @optionLabelPath="name" @prompt="Please select a folder set" @action={{action (mut selectedFolderSet)}} />
-        </li>
-
-
-        <li class="mode">
-          <label>Privacy Setting <span class="required-star">*</span></label>
-            <input type="radio" checked={{is-equal mode "private"}} required="true" name="mode" value="private" onclick={{action "radioSelect" "private"}}>
-            <label class="radio-label">Private</label>
-            <input type="radio" checked={{is-equal mode "public"}} required="true" name="mode" value="public" onclick={{action "radioSelect" "public"}}>
-            <label class="radio-label">Public</label>
-        </li>
-        {{/unless}}
-      </ol>
+        <h3>Workspace Creation Options</h3>
+        <ol>
+          <li>
+            <label for='createWorkspace'>Do not create workspace</label>
+            <Input
+              @type='checkbox'
+              name='createWorkspace'
+              @checked={{doNotCreateWorkspace}}
+            />
+          </li>
+
+          {{#unless doNotCreateWorkspace}}
+            <li>
+              <label for='name'>Workspace Name</label>
+              <Input id='requestedName' @type='text' @value={{requestedName}} />
+            </li>
+            <li>
+              <label for='folders'>Folders</label>
+              <Ui::MySelect
+                @content={{folderSets}}
+                @prompt='Please select a folder set'
+                @action={{action (mut selectedFolderSet)}}
+              />
+            </li>
+
+            <li class='mode'>
+              <label>Privacy Setting
+                <span class='required-star'>*</span></label>
+              <input
+                type='radio'
+                checked={{is-equal mode 'private'}}
+                required='true'
+                name='mode'
+                value='private'
+                onclick={{action 'radioSelect' 'private'}}
+              />
+              <label class='radio-label'>Private</label>
+              <input
+                type='radio'
+                checked={{is-equal mode 'public'}}
+                required='true'
+                name='mode'
+                value='public'
+                onclick={{action 'radioSelect' 'public'}}
+              />
+              <label class='radio-label'>Public</label>
+            </li>
+          {{/unless}}
+        </ol>
       </fieldset>
     </form>
 
-
-
-  <div class="proceed">
-    {{#if doNotCreateWorkspace}}
-      <p>Click submit to upload your submissions.</p>
-    {{else}}
-      <p>Click submit to create your {{mode}} workspace.</p>
-    {{/if}}
-    <button type="button" {{action "formatAnswers"}}>Submit</button>
+    <div class='proceed'>
+      {{#if doNotCreateWorkspace}}
+        <p>Click submit to upload your submissions.</p>
+      {{else}}
+        <p>Click submit to create your {{mode}} workspace.</p>
+      {{/if}}
+      <button type='button' {{action 'formatAnswers'}}>Submit</button>
+    </div>
   </div>
-</div>
 
-
-
-  <div class="review-answers">
+  <div class='review-answers'>
     {{#each answers as |answer|}}
-      <div class="answer-info">
-        <div class="answer-img">
+      <div class='answer-info'>
+        <div class='answer-img'>
           <p>{{answer.explanationImage.originalname}}</p>
-          <img src="{{{answer.explanationImage.imageData}}}" alt="">
+          <img src='{{{answer.explanationImage.imageData}}}' alt='' />
         </div>
 
-        <div class="creators">
+        <div class='creators'>
           <label>Assigned Students</label>
           <ul>
             {{#each answer.students as |student|}}
@@ -69,8 +89,4 @@
     {{/each}}
   </div>
 
-
-</div>
-
-
-
+</div>
\ No newline at end of file
diff --git a/app/templates/components/import-work-container.hbs b/app/templates/components/import-work-container.hbs
index 18ad3044e..d918b627b 100644
--- a/app/templates/components/import-work-container.hbs
+++ b/app/templates/components/import-work-container.hbs
@@ -1,85 +1,180 @@
-<div class="flex-container-full">
-  <div class="flex-item-full filter-options collapse" id="filter-list-side">
-    <div class="filter-items">
+<div class='flex-container-full'>
+  <div class='flex-item-full filter-options collapse' id='filter-list-side'>
+    <div class='filter-items'>
       <h2>Summary</h2>
-      <ul class="primary-filter-list">
+      <ul class='primary-filter-list'>
         {{#each detailsItems as |item|}}
-          <DetailsListItem @label={{item.label}} @displayValue={{item.displayValue}} @emptyValue={{item.emptyValue}} @propName={{item.propName}} @children={{item.children}} @isArray={{item.isArray}} @editValue={{action "goToStep"}} @associatedStep={{item.associatedStep}} @currentStep={{currentStep.value}} />
+          <DetailsListItem
+            @label={{item.label}}
+            @displayValue={{item.displayValue}}
+            @emptyValue={{item.emptyValue}}
+            @propName={{item.propName}}
+            @children={{item.children}}
+            @isArray={{item.isArray}}
+            @editValue={{action 'goToStep'}}
+            @associatedStep={{item.associatedStep}}
+            @currentStep={{currentStep.value}}
+          />
         {{/each}}
       </ul>
     </div>
   </div>
-  <div class="flex-item-full list-view">
-    <div class="results-list">
-      <div class="header">
+  <div class='flex-item-full list-view'>
+    <div class='results-list'>
+      <div class='header'>
         <h1>Import Work</h1>
       </div>
 
-      <div class="step-display">
-        <div class="container">
-          <ul class="progressbar">
-            <li class="step-1 active-step">
+      <div class='step-display'>
+        <div class='container'>
+          <ul class='progressbar'>
+            <li class='step-1 active-step'>
               <span>Select Problem</span>
             </li>
-            <li class="step-2 {{if (greater-equal currentStep.value 2) 'active-step'}}">
+            <li
+              class='step-2
+                {{if (greater-equal currentStep.value 2) "active-step"}}'
+            >
               <span>Select Class</span>
             </li>
-            <li class="step-3 {{if (greater-equal currentStep.value 3) 'active-step'}}">
+            <li
+              class='step-3
+                {{if (greater-equal currentStep.value 3) "active-step"}}'
+            >
               <span>Upload Files</span>
             </li>
-            <li class="step-4 {{if (greater-equal currentStep.value 4) 'active-step'}}">
+            <li
+              class='step-4
+                {{if (greater-equal currentStep.value 4) "active-step"}}'
+            >
               <span>Match Students</span>
             </li>
-            <li class="step-5 {{if (greater-equal currentStep.value 5) 'active-step'}}">
+            <li
+              class='step-5
+                {{if (greater-equal currentStep.value 5) "active-step"}}'
+            >
               <span>Create Workspace</span>
             </li>
-            <li class="step-6 {{if (greater-equal currentStep.value 6) 'active-step'}}">
+            <li
+              class='step-6
+                {{if (greater-equal currentStep.value 6) "active-step"}}'
+            >
               <span>Review</span>
             </li>
           </ul>
         </div>
       </div>
 
-      <div class="step-content">
+      <div class='step-content'>
         {{#if showSelectProblem}}
-          <ImportWorkStep1 @store={{this.store}} @selectedProblem={{selectedProblem}} @onProceed={{action "setSelectedProblem"}} />
+          <ImportWorkStep1
+            @store={{this.store}}
+            @selectedProblem={{selectedProblem}}
+            @onProceed={{action 'setSelectedProblem'}}
+          />
         {{/if}}
 
         {{#if showSelectClass}}
-          <ImportWorkStep2 @store={{this.store}} @selectedSection={{selectedSection}} @selectedValue={{selectedValue}} @onBack={{action "changeStep"}} @onProceed={{action "setSelectedSection"}} />
+          <ImportWorkStep2
+            @store={{this.store}}
+            @selectedSection={{selectedSection}}
+            @selectedValue={{selectedValue}}
+            @onBack={{action 'changeStep'}}
+            @onProceed={{action 'setSelectedSection'}}
+          />
         {{/if}}
 
         {{#if showUploadFiles}}
-          <ImportWorkStep3 @store={{this.store}} @selectedProblem={{selectedProblem}} @selectedSection={{selectedSection}} @onBack={{action "changeStep"}} @onProceed={{action "setUploadedFiles"}} @existingAnswers={{answers}} @uploadedFiles={{uploadedFiles}} />
+          <ImportWorkStep3
+            @store={{this.store}}
+            @selectedProblem={{selectedProblem}}
+            @selectedSection={{selectedSection}}
+            @onBack={{action 'changeStep'}}
+            @onProceed={{action 'setUploadedFiles'}}
+            @existingAnswers={{answers}}
+            @uploadedFiles={{uploadedFiles}}
+          />
         {{/if}}
 
         {{#if showMatchStudents}}
-          <ImportWorkStep4 @store={{this.store}} @uploadedFiles={{uploadedFiles}} @answers={{answers}} @selectedProblem={{selectedProblem}} @studentMap={{studentMap}} @selectedSection={{selectedSection}} @onBack={{action "changeStep"}} @onProceed={{action "setMatchedStudents"}} />
+          <ImportWorkStep4
+            @store={{this.store}}
+            @uploadedFiles={{uploadedFiles}}
+            @answers={{answers}}
+            @selectedProblem={{selectedProblem}}
+            @studentMap={{studentMap}}
+            @selectedSection={{selectedSection}}
+            @onBack={{action 'changeStep'}}
+            @onProceed={{action 'setMatchedStudents'}}
+          />
         {{/if}}
 
         {{#if showCreateWs}}
-          <ImportWorkStep5 @currentUser={{this.currentUser.user}} @users={{users}} @selectedOwner={{selectedOwner}} @selectedFolderSet={{selectedFolderSet}} @createAssignmentValue={{createAssignmentValue}} @doCreateWs={{doCreateWs}} @selectedMode={{selectedMode}} @folderSets={{folderSets}} @store={{this.store}} @uploadedFiles={{uploadedFiles}} @answers={{answers}} @selectedProblem={{selectedProblem}} @selectedSection={{selectedSection}} @workspaceName={{workspaceName}} @workspaceOwner={{workspaceOwner}} @workspaceMode={{workspaceMode}} @folderSet={{folderSet}} @assignmentName={{assignmentName}} @onBack={{action "changeStep"}} @onProceed={{action "prepareReview"}} />
+          <ImportWorkStep5
+            @currentUser={{this.currentUser.user}}
+            @users={{users}}
+            @selectedOwner={{selectedOwner}}
+            @selectedFolderSet={{selectedFolderSet}}
+            @createAssignmentValue={{createAssignmentValue}}
+            @doCreateWs={{doCreateWs}}
+            @selectedMode={{selectedMode}}
+            @folderSets={{folderSets}}
+            @store={{this.store}}
+            @uploadedFiles={{uploadedFiles}}
+            @answers={{answers}}
+            @selectedProblem={{selectedProblem}}
+            @selectedSection={{selectedSection}}
+            @workspaceName={{workspaceName}}
+            @workspaceOwner={{workspaceOwner}}
+            @workspaceMode={{workspaceMode}}
+            @folderSet={{folderSet}}
+            @assignmentName={{assignmentName}}
+            @onBack={{action 'changeStep'}}
+            @onProceed={{action 'prepareReview'}}
+          />
         {{/if}}
 
         {{#if showReview}}
-          <ImportWorkStep6 @store={{this.store}} @uploadedFiles={{uploadedFiles}} @answers={{answers}} @selectedProblem={{selectedProblem}} @selectedSection={{selectedSection}} @submissionCount={{submissionCount}} @workspaceName={{workspaceName}} @workspaceOwner={{workspaceOwner}} @workspaceMode={{workspaceMode}} @folderSet={{folderSet}} @assignmentName={{assignmentName}} @savingAssignment={{savingAssignment}} @isUploadingAnswer={{isUploadingAnswer}} @isCreatingWorkspace={{isCreatingWorkspace}} @uploadedAnswers={{uploadedAnswers}} @createdWorkspace={{createdWorkspace}} @createdAssignment={{createdAssignment}} @onBack={{action "changeStep"}} @onProceed={{action "importWork"}} />
+          <ImportWorkStep6
+            @store={{this.store}}
+            @uploadedFiles={{uploadedFiles}}
+            @answers={{answers}}
+            @selectedProblem={{selectedProblem}}
+            @selectedSection={{selectedSection}}
+            @submissionCount={{submissionCount}}
+            @workspaceName={{workspaceName}}
+            @workspaceOwner={{workspaceOwner}}
+            @workspaceMode={{workspaceMode}}
+            @folderSet={{folderSet}}
+            @assignmentName={{assignmentName}}
+            @savingAssignment={{savingAssignment}}
+            @isUploadingAnswer={{isUploadingAnswer}}
+            @isCreatingWorkspace={{isCreatingWorkspace}}
+            @uploadedAnswers={{uploadedAnswers}}
+            @createdWorkspace={{createdWorkspace}}
+            @createdAssignment={{createdAssignment}}
+            @onBack={{action 'changeStep'}}
+            @onProceed={{action 'importWork'}}
+          />
         {{/if}}
       </div>
 
-    {{#each findRecordErrors as |error|}}
-      <ErrorBox @error={{error}} @showDismiss={{true}} />
-    {{/each}}
-    {{#each postErrors as |error|}}
-      <ErrorBox @error={{error}} @showDismiss={{true}} />
-    {{/each}}
-    {{#each createAnswerErrors as |error|}}
-      <ErrorBox @error={{error}} @showDismiss={{true}} />
-    {{/each}}
+      {{#each findRecordErrors as |error|}}
+        <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
+      {{/each}}
+      {{#each postErrors as |error|}}
+        <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
+      {{/each}}
+      {{#each createAnswerErrors as |error|}}
+        <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
+      {{/each}}
     </div>
   </div>
 </div>
 
-<div class="toggle-filter-menu">
-  <button type="button" {{action 'toggleMenu'}}><i id="arrow-icon" class="fas fa-chevron-right"></i></button>
-</div>
-
+<div class='toggle-filter-menu'>
+  <button type='button' {{action 'toggleMenu'}}><i
+      id='arrow-icon'
+      class='fas fa-chevron-right'
+    ></i></button>
+</div>
\ No newline at end of file
diff --git a/app/templates/components/import-work-step1.hbs b/app/templates/components/import-work-step1.hbs
index e5dd54612..9e2aafc24 100644
--- a/app/templates/components/import-work-step1.hbs
+++ b/app/templates/components/import-work-step1.hbs
@@ -30,7 +30,7 @@
 />
 
 {{#if missingProblem}}
-  <ErrorBox
+  <Ui::ErrorBox
     @error='Please select a problem'
     @resetError={{action (mut missingProblem) null}}
     @showDismiss={{true}}
diff --git a/app/templates/components/import-work-step2.hbs b/app/templates/components/import-work-step2.hbs
index d40bdd5b3..31edc55ca 100644
--- a/app/templates/components/import-work-step2.hbs
+++ b/app/templates/components/import-work-step2.hbs
@@ -7,7 +7,7 @@
     <i class='fas fa-info-circle info-icon'></i>
   </span>
 </p>
-<RadioGroup
+<Ui::RadioGroup
   @options={{useClass}}
   @selectedValue={{this.selectedValue}}
   @updateValue={{action 'updateSelectedValue'}}
@@ -48,7 +48,7 @@
 {{/if}}
 
 {{#if missingSection}}
-  <ErrorBox
+  <Ui::ErrorBox
     @error='Please select a class or no class'
     @resetError={{action (mut missingSection) null}}
     @showDismiss={{true}}
diff --git a/app/templates/components/import-work-step3.hbs b/app/templates/components/import-work-step3.hbs
index 2a925b277..110a0dba9 100644
--- a/app/templates/components/import-work-step3.hbs
+++ b/app/templates/components/import-work-step3.hbs
@@ -1,32 +1,56 @@
-<p class="input-label">
+<p class='input-label'>
   Select Files to Upload
-  <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="We currently only accept pictures and pdfs">
-    <i class="fas fa-info-circle info-icon"></i>
+  <span
+    class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+    data-tooltip='We currently only accept pictures and pdfs'
+  >
+    <i class='fas fa-info-circle info-icon'></i>
   </span>
 </p>
-<p class="sub-input-label">Supported files are jpeg, png or pdf. Multipage pdfs will convert each page into a single image.</p>
-<ImageUpload @class="form-file" @handleUploadResults={{action "updateCurrentFiles"}} @filesToBeUploaded={{selectedFiles}} @acceptMultiple={{true}} @doResetFilesAfterUpload={{true}} />
+<p class='sub-input-label'>Supported files are jpeg, png or pdf. Multipage pdfs
+  will convert each page into a single image.</p>
+<ImageUpload
+  @class='form-file'
+  @handleUploadResults={{action 'updateCurrentFiles'}}
+  @filesToBeUploaded={{selectedFiles}}
+  @acceptMultiple={{true}}
+  @doResetFilesAfterUpload={{true}}
+/>
 
 {{#if missingFiles}}
-  <ErrorBox @error="You must upload at least one file to continue" @resetError={{action (mut missingFiles) null}} @showDismiss={{true}} />
+  <Ui::ErrorBox
+    @error='You must upload at least one file to continue'
+    @resetError={{action (mut missingFiles) null}}
+    @showDismiss={{true}}
+  />
 {{/if}}
 
 {{#if uploadedFiles}}
   <h5> Uploaded Files</h5>
   <ul>
-    {{#each uploadedFiles as  |f| }}
+    {{#each uploadedFiles as |f|}}
       <li>
 
-        {{f.originalname}} {{#if f.pdfPageNum}}(pg. {{f.pdfPageNum}}){{/if}}
+        {{f.originalname}}
+        {{#if f.pdfPageNum}}(pg. {{f.pdfPageNum}}){{/if}}
 
-        <i {{action "removeFile" f}} class="far fa-times-circle" aria-hidden="true" title="Remove"></i>
+        <i
+          {{action 'removeFile' f}}
+          class='far fa-times-circle'
+          aria-hidden='true'
+          title='Remove'
+        ></i>
 
       </li>
     {{/each}}
   </ul>
 {{/if}}
 
-<div class="nav-btn-container">
-  <button class="primary-button cancel-button" type="button" {{action "back"}}>Back</button>
-  <button class="primary-button" type="button" {{action "next"}}>Next</button>
-</div>
+<div class='nav-btn-container'>
+  <button
+    class='primary-button cancel-button'
+    type='button'
+    {{action 'back'}}
+  >Back</button>
+  <button class='primary-button' type='button' {{action 'next'}}>Next</button>
+</div>
\ No newline at end of file
diff --git a/app/templates/components/import-work-step5.hbs b/app/templates/components/import-work-step5.hbs
index d5a86c917..dc1823c51 100644
--- a/app/templates/components/import-work-step5.hbs
+++ b/app/templates/components/import-work-step5.hbs
@@ -1,111 +1,202 @@
-<p class="input-label">
+<p class='input-label'>
   Would you like to create a new workspace?
-  <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="You can always create a workspace at a later date from your imported submissions via the Create Workspace page">
-    <i class="fas fa-info-circle info-icon"></i>
+  <span
+    class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+    data-tooltip='You can always create a workspace at a later date from your imported submissions via the Create Workspace page'
+  >
+    <i class='fas fa-info-circle info-icon'></i>
   </span>
 </p>
-<RadioGroup @options={{createWs}} @selectedValue={{this.doCreateWs}} @updateValue={{action "updateDoCreateWs"}} />
+<Ui::RadioGroup
+  @options={{createWs}}
+  @selectedValue={{this.doCreateWs}}
+  @updateValue={{action 'updateDoCreateWs'}}
+/>
 
 {{#if creatingWs}}
-<div class="create-ws-content">
-  <div class="ws-new name">
-    <p class="input-label">
-      Workspace Name
-      <span class="required-star">*</span>
-      <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Provide an easily identifiable name for this workspace">
-        <i class="fas fa-info-circle info-icon"></i>
-      </span>
-    </p>
-    <div class="single-text-input-container">
-      <Input id="ws-new-name" class="single-text-input" @type="text" @value={{workspaceName}} placeholder="Provide a name for your workspace" />
-    </div>
-    {{#if missingNameError}}
-    <div class="create-ws-error">
-      <ErrorBox @error={{missingNameError}} @showDismiss={{true}} @resetError={{action (mut missingNameError) null}} />
+  <div class='create-ws-content'>
+    <div class='ws-new name'>
+      <p class='input-label'>
+        Workspace Name
+        <span class='required-star'>*</span>
+        <span
+          class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+          data-tooltip='Provide an easily identifiable name for this workspace'
+        >
+          <i class='fas fa-info-circle info-icon'></i>
+        </span>
+      </p>
+      <div class='single-text-input-container'>
+        <Input
+          id='ws-new-name'
+          class='single-text-input'
+          @type='text'
+          @value={{workspaceName}}
+          placeholder='Provide a name for your workspace'
+        />
+      </div>
+      {{#if missingNameError}}
+        <div class='create-ws-error'>
+          <Ui::ErrorBox
+            @error={{missingNameError}}
+            @showDismiss={{true}}
+            @resetError={{action (mut missingNameError) null}}
+          />
+        </div>
+      {{/if}}
     </div>
-    {{/if}}
-  </div>
-
 
-  <div class="ws-new owner">
-    <p class="input-label">
-      Workspace Owner
-      <span class="required-star">*</span>
+    <div class='ws-new owner'>
+      <p class='input-label'>
+        Workspace Owner
+        <span class='required-star'>*</span>
 
-      <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="The owner of the workspace has the ability to edit every aspect of this workspace. You can make it yourself">
-        <i class="fas fa-info-circle info-icon"></i>
-      </span>
-    </p>
-    <SelectizeInput @store={{this.store}} @inputId="owner-select" @initialOptions={{ownerOptions}} @initialItems={{initialOwnerItem}} @maxItems={{1}} @onItemAdd={{action "updateSelectizeSingle"}} @onItemRemove={{action "updateSelectizeSingle"}} @labelField="username" @valueField="id" @searchField="username" @model="user" @propToUpdate="selectedOwner" @placeholder="Search by username to choose as owner" />
-    {{#if missingOwnerError}}
-    <div class="create-ws-error">
-      <ErrorBox @error={{missingOwnerError}} @showDismiss={{true}} @resetError={{action (mut missingOwnerError) null}} />
+        <span
+          class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+          data-tooltip='The owner of the workspace has the ability to edit every aspect of this workspace. You can make it yourself'
+        >
+          <i class='fas fa-info-circle info-icon'></i>
+        </span>
+      </p>
+      <SelectizeInput
+        @store={{this.store}}
+        @inputId='owner-select'
+        @initialOptions={{ownerOptions}}
+        @initialItems={{initialOwnerItem}}
+        @maxItems={{1}}
+        @onItemAdd={{action 'updateSelectizeSingle'}}
+        @onItemRemove={{action 'updateSelectizeSingle'}}
+        @labelField='username'
+        @valueField='id'
+        @searchField='username'
+        @model='user'
+        @propToUpdate='selectedOwner'
+        @placeholder='Search by username to choose as owner'
+      />
+      {{#if missingOwnerError}}
+        <div class='create-ws-error'>
+          <Ui::ErrorBox
+            @error={{missingOwnerError}}
+            @showDismiss={{true}}
+            @resetError={{action (mut missingOwnerError) null}}
+          />
+        </div>
+      {{/if}}
     </div>
-    {{/if}}
-  </div>
-
-  <div class="ws-new mode">
-    <p class="input-label">
-      Privacy Setting
-      <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Decide who can see this workspace, hover over the question mark icons for more info">
-        <i class="fas fa-info-circle info-icon"></i>
-      </span>
-    </p>
-    <RadioGroup @options={{modeInputs}} @selectedValue={{this.selectedMode}} @updateValue={{action "updateSelectedMode"}} />
-  </div>
 
+    <div class='ws-new mode'>
+      <p class='input-label'>
+        Privacy Setting
+        <span
+          class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+          data-tooltip='Decide who can see this workspace, hover over the question mark icons for more info'
+        >
+          <i class='fas fa-info-circle info-icon'></i>
+        </span>
+      </p>
+      <Ui::RadioGroup
+        @options={{modeInputs}}
+        @selectedValue={{this.selectedMode}}
+        @updateValue={{action 'updateSelectedMode'}}
+      />
+    </div>
 
-  <div class="ws-new folderset">
-    <p class="input-label">
-      Folder Set
-      <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="You can choose one of your saved folder sets or a provided set">
-        <i class="fas fa-info-circle info-icon"></i>
-      </span>
-    </p>
-    <SelectizeInput @store={{this.store}} @inputId="folderset-select" @initialOptions={{folderSetOptions}} @maxItems={{1}} @initialItems={{initialFolderSetItem}} @onItemAdd={{action "updateSelectizeSingle"}} @onItemRemove={{action "updateSelectizeSingle"}} @labelField="name" @valueField="id" @searchField="name" @model="folder-set" @propToUpdate="selectedFolderSet" @placeholder="Select a Folder Set" />
-  </div>
-    <p class="info">You can add collaborators and change workspace settings after creating the workspace</p>
+    <div class='ws-new folderset'>
+      <p class='input-label'>
+        Folder Set
+        <span
+          class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+          data-tooltip='You can choose one of your saved folder sets or a provided set'
+        >
+          <i class='fas fa-info-circle info-icon'></i>
+        </span>
+      </p>
+      <SelectizeInput
+        @store={{this.store}}
+        @inputId='folderset-select'
+        @initialOptions={{folderSetOptions}}
+        @maxItems={{1}}
+        @initialItems={{initialFolderSetItem}}
+        @onItemAdd={{action 'updateSelectizeSingle'}}
+        @onItemRemove={{action 'updateSelectizeSingle'}}
+        @labelField='name'
+        @valueField='id'
+        @searchField='name'
+        @model='folder-set'
+        @propToUpdate='selectedFolderSet'
+        @placeholder='Select a Folder Set'
+      />
+    </div>
+    <p class='info'>You can add collaborators and change workspace settings
+      after creating the workspace</p>
   </div>
-  {{/if}}
+{{/if}}
 
-  {{#unless this.currentUser.isStudent}}
-    {{#if selectedSection}}
-    <div class="ws-new assignment">
-      <p class="input-label">
+{{#unless this.currentUser.isStudent}}
+  {{#if selectedSection}}
+    <div class='ws-new assignment'>
+      <p class='input-label'>
         Would you like to save this work as an assignment?
-        <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Saving this as an assignment will make it easier to find uploaded work and add additional revisions">
-          <i class="fas fa-info-circle info-icon"></i>
+        <span
+          class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+          data-tooltip='Saving this as an assignment will make it easier to find uploaded work and add additional revisions'
+        >
+          <i class='fas fa-info-circle info-icon'></i>
         </span>
       </p>
-      <RadioGroup @options={{createAssignment}} @selectedValue={{this.createAssignmentValue}} @updateValue={{action "updateCreateAssignmentValue"}} />
+      <Ui::RadioGroup
+        @options={{createAssignment}}
+        @selectedValue={{this.createAssignmentValue}}
+        @updateValue={{action 'updateCreateAssignmentValue'}}
+      />
     </div>
-    {{/if}}
-  {{/unless}}
+  {{/if}}
+{{/unless}}
 
-  {{#if creatingAssignment}}
-  <div class="create-ws-content">
-    <div class="ws-new name">
-      <p class="input-label">
+{{#if creatingAssignment}}
+  <div class='create-ws-content'>
+    <div class='ws-new name'>
+      <p class='input-label'>
         Assignment Name
-        <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Provide an easily identifiable name for this assignment">
-          <i class="fas fa-info-circle info-icon"></i>
+        <span
+          class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+          data-tooltip='Provide an easily identifiable name for this assignment'
+        >
+          <i class='fas fa-info-circle info-icon'></i>
         </span>
       </p>
-      <div class="single-text-input-container">
-        <Input id="assignment-name" class="single-text-input" @type="text" @value={{assignmentName}} placeholder="Provide a name for your assignment" />
+      <div class='single-text-input-container'>
+        <Input
+          id='assignment-name'
+          class='single-text-input'
+          @type='text'
+          @value={{assignmentName}}
+          placeholder='Provide a name for your assignment'
+        />
       </div>
       {{#if missingAssignmentError}}
-      <div class="create-ws-error">
-        <ErrorBox @error={{missingAssignmentError}} @showDismiss={{true}} @resetError={{action (mut missingAssignmentError) null}} />
-      </div>
+        <div class='create-ws-error'>
+          <Ui::ErrorBox
+            @error={{missingAssignmentError}}
+            @showDismiss={{true}}
+            @resetError={{action (mut missingAssignmentError) null}}
+          />
+        </div>
       {{/if}}
     </div>
   </div>
-  {{/if}}
-
-
+{{/if}}
 
-<div class="nav-btn-container">
-  <button class="primary-button cancel-button" type="button" {{action "back"}}>Back</button>
-  <button class="primary-button" data-test="next" type="button" {{action "next"}}>Next</button>
+<div class='nav-btn-container'>
+  <button
+    class='primary-button cancel-button'
+    type='button'
+    {{action 'back'}}
+  >Back</button>
+  <button
+    class='primary-button'
+    data-test='next'
+    type='button'
+    {{action 'next'}}
+  >Next</button>
 </div>
\ No newline at end of file
diff --git a/app/templates/components/my-select.hbs b/app/templates/components/my-select.hbs
deleted file mode 100644
index fb374103e..000000000
--- a/app/templates/components/my-select.hbs
+++ /dev/null
@@ -1,27 +0,0 @@
-{{! app/templates/components/my-select.hbs}}
-<select disabled={{this.isDisabled}} {{action 'selectChange' on='change'}}>
-  {{#if this.prompt}}
-    {{#unless this.selectedValue}}
-    <option value="" id="select-prompt">{{this.prompt}}</option>
-    {{/unless}}
-  {{/if}}
-  {{#each this.content key="@index" as |item|}}
-    {{#if item.id}}
-    <option class="option" value="{{item.id}}" selected={{is-equal item this.selectedValue}} >
-      {{get item optionLabelPath}}
-      {{!item.label}}
-    </option>
-    {{else}}
-
-    <option class="option" value="{{item}}" selected={{is-equal item this.selectedValue}}>
-      {{item}} {{!item.label}}
-    </option>
-    {{/if}}
-  {{/each}}
-</select>
-
-{{#unless this.cannotBeNull}}
-  {{#if this.selectedValue}}
-    <i {{action (mut this.selectedValue) null}} class="fa fa-times cancel-icon" aria-hidden="true"></i>
-  {{/if}}
-{{/unless}}
\ No newline at end of file
diff --git a/app/templates/components/new-folderset-form.hbs b/app/templates/components/new-folderset-form.hbs
index f477ce371..43dfd69ab 100644
--- a/app/templates/components/new-folderset-form.hbs
+++ b/app/templates/components/new-folderset-form.hbs
@@ -1,27 +1,51 @@
-<div class="new-folderset name">
-  <p class="input-label">
+<div class='new-folderset name'>
+  <p class='input-label'>
     Folder Set Name
-    <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Provide a specific enough name for you folder set in order to be able to indentify and reuse it">
-      <i class="fas fa-info-circle info-icon"></i>
+    <span
+      class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+      data-tooltip='Provide a specific enough name for you folder set in order to be able to indentify and reuse it'
+    >
+      <i class='fas fa-info-circle info-icon'></i>
     </span>
   </p>
-  <div class="single-text-input-container">
-    <Input id="folderset-name" class="single-text-input" @type="text" @value={{name}} placeholder="Provide a name for the new folder set" />
+  <div class='single-text-input-container'>
+    <Input
+      id='folderset-name'
+      class='single-text-input'
+      @type='text'
+      @value={{name}}
+      placeholder='Provide a name for the new folder set'
+    />
   </div>
   {{#each nameErrors as |error|}}
-    <ErrorBox @error={{error}} @showDismiss={{true}} @resetError={{action (mut nameErrors) null}} />
+    <Ui::ErrorBox
+      @error={{error}}
+      @showDismiss={{true}}
+      @resetError={{action (mut nameErrors) null}}
+    />
   {{/each}}
 </div>
 
-<div class="new-folderset privacy">
-  <p class="input-label">
+<div class='new-folderset privacy'>
+  <p class='input-label'>
     Folder Set Privacy Setting
-    <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Folder sets can be shared with other users or private. Hover over the question icon for more info">
-      <i class="fas fa-info-circle info-icon"></i>
+    <span
+      class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+      data-tooltip='Folder sets can be shared with other users or private. Hover over the question icon for more info'
+    >
+      <i class='fas fa-info-circle info-icon'></i>
     </span>
   </p>
-  <RadioGroup @options={{privacyInputs}} @selectedValue={{this.privacySetting}} @updateValue={{action "updatePrivacySetting"}} />
+  <Ui::RadioGroup
+    @options={{privacyInputs}}
+    @selectedValue={{this.privacySetting}}
+    @updateValue={{action 'updatePrivacySetting'}}
+  />
   {{#each privacyErrors as |error|}}
-    <ErrorBox @error={{error}} @showDismiss={{true}} @resetError={{action (mut privacyErrors) null}} />
+    <Ui::ErrorBox
+      @error={{error}}
+      @showDismiss={{true}}
+      @resetError={{action (mut privacyErrors) null}}
+    />
   {{/each}}
-</div>
+</div>
\ 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 630d2e567..ce440c2bd 100644
--- a/app/templates/components/response-approver-reply.hbs
+++ b/app/templates/components/response-approver-reply.hbs
@@ -1,154 +1,282 @@
-<h1 class="heading">Approver Panel</h1>
+<h1 class='heading'>Approver Panel</h1>
 {{#if showApproverActions}}
-<div class="action-container">
-  <h2 class="sub-heading">Manage Mentor Reply</h2>
+  <div class='action-container'>
+    <h2 class='sub-heading'>Manage Mentor Reply</h2>
 
-  <div class="approver-actions button-row">
-    {{#if showNoActionsMessage}}
-      <p class="info">
-     This Mentor Reply has already been approved by {{responseToApprove.approvedBy.username}} and sent to {{responseToApprove.recipient.username}}. There are no further approval actions to take at this time.
-      </p>
-    {{else}}
-      {{#if showApprove}}
-        <button class="approve-button" type="button" {{action "confirmApproval"}}>Approve <i class="fas fa-check"></i></button>
-      {{/if}}
-      {{#if showUndoApproval}}
-        <button class="primary-button undo-approval" type="button" {{action "undoApproval"}}>Undo Approval</button>
-      {{/if}}
-      {{#if showCompose}}
-        <button class="primary-button" type="button" {{action "composeReply"}}>Reply <i class="fas fa-reply"></i></button>
+    <div class='approver-actions button-row'>
+      {{#if showNoActionsMessage}}
+        <p class='info'>
+          This Mentor Reply has already been approved by
+          {{responseToApprove.approvedBy.username}}
+          and sent to
+          {{responseToApprove.recipient.username}}. There are no further
+          approval actions to take at this time.
+        </p>
+      {{else}}
+        {{#if showApprove}}
+          <button
+            class='approve-button'
+            type='button'
+            {{action 'confirmApproval'}}
+          >Approve <i class='fas fa-check'></i></button>
+        {{/if}}
+        {{#if showUndoApproval}}
+          <button
+            class='primary-button undo-approval'
+            type='button'
+            {{action 'undoApproval'}}
+          >Undo Approval</button>
+        {{/if}}
+        {{#if showCompose}}
+          <button
+            class='primary-button'
+            type='button'
+            {{action 'composeReply'}}
+          >Reply <i class='fas fa-reply'></i></button>
+        {{/if}}
       {{/if}}
-    {{/if}}
+    </div>
   </div>
-</div>
 {{/if}}
 
 {{#if showReplyInput}}
   {{#unless isEditingApproverReply}}
-  <div class="compose-reply-container">
-    <p class="info">{{replyHeadingText}}</p>
-    <div class="compose-approver-reply">
-      <QuillContainer @onEditorChange={{action "updateQuillText"}} @attrSectionId={{quillEditorId}} @startingText={{editRevisionText}} />
-      {{#if emptyReplyError}}
-        <ErrorBox @error="Message body cannot be empty." @showDismiss={{true}} @resetError={{action (mut emptyReplyError) null}} />
-      {{/if}}
-      {{#if quillTooLongError}}
-        <ErrorBox @error={{quillTooLongErrorMsg}} @showDismiss={{true}} @resetError={{action (mut quillTooLongError) null}} />
-      {{/if}}
-      {{#each saveRecordErrors as |err|}}
-        <ErrorBox @error={{err}} @showDismiss={{true}} @resetError={{action (mut recordCreateErrors) null}} />
-      {{/each}}
-      <div class="submit-buttons button-row">
-        {{#if isRevisingApproverReply}}
-          <button class="primary-button cancel-button" type="button" {{action "stopRevising"}}>Cancel</button>
-          <button class="primary-button" type="button" {{action "saveReply" null true}}>Save as Draft</button>
-          <button class="primary-button" type="button" {{action "saveRevision"}}>Send Revision</button>
-        {{/if}}
-        {{#if isComposingReply}}
-          <button class="primary-button cancel-button" type="button" {{action "stopComposing"}}>Cancel</button>
-          <button class="primary-button" type="button" {{action "saveReply" null true}}>Save as Draft</button>
-          <button class="primary-button" type="button" {{action "saveReply" 'needsRevisions'}}>Needs Revisions</button>
-          <button class="primary-button" type="button" {{action "saveReply" 'approved'}}>Approve</button>
+    <div class='compose-reply-container'>
+      <p class='info'>{{replyHeadingText}}</p>
+      <div class='compose-approver-reply'>
+        <QuillContainer
+          @onEditorChange={{action 'updateQuillText'}}
+          @attrSectionId={{quillEditorId}}
+          @startingText={{editRevisionText}}
+        />
+        {{#if emptyReplyError}}
+          <Ui::ErrorBox
+            @error='Message body cannot be empty.'
+            @showDismiss={{true}}
+            @resetError={{action (mut emptyReplyError) null}}
+          />
         {{/if}}
-        {{#if isFinishingDraft}}
-          <button class="primary-button cancel-button" type="button" {{action "stopDraft"}}>Cancel</button>
-          <button class="primary-button" type="button" {{action "saveDraft" 'draft'}}>Save as Draft</button>
-          <button class="primary-button" type="button" {{action "saveDraft" 'needsRevisions'}}>Needs Revisions</button>
-          <button class="primary-button" type="button" {{action "saveDraft" 'approved'}}>Approve</button>
+        {{#if quillTooLongError}}
+          <Ui::ErrorBox
+            @error={{quillTooLongErrorMsg}}
+            @showDismiss={{true}}
+            @resetError={{action (mut quillTooLongError) null}}
+          />
         {{/if}}
+        {{#each saveRecordErrors as |err|}}
+          <Ui::ErrorBox
+            @error={{err}}
+            @showDismiss={{true}}
+            @resetError={{action (mut recordCreateErrors) null}}
+          />
+        {{/each}}
+        <div class='submit-buttons button-row'>
+          {{#if isRevisingApproverReply}}
+            <button
+              class='primary-button cancel-button'
+              type='button'
+              {{action 'stopRevising'}}
+            >Cancel</button>
+            <button
+              class='primary-button'
+              type='button'
+              {{action 'saveReply' null true}}
+            >Save as Draft</button>
+            <button
+              class='primary-button'
+              type='button'
+              {{action 'saveRevision'}}
+            >Send Revision</button>
+          {{/if}}
+          {{#if isComposingReply}}
+            <button
+              class='primary-button cancel-button'
+              type='button'
+              {{action 'stopComposing'}}
+            >Cancel</button>
+            <button
+              class='primary-button'
+              type='button'
+              {{action 'saveReply' null true}}
+            >Save as Draft</button>
+            <button
+              class='primary-button'
+              type='button'
+              {{action 'saveReply' 'needsRevisions'}}
+            >Needs Revisions</button>
+            <button
+              class='primary-button'
+              type='button'
+              {{action 'saveReply' 'approved'}}
+            >Approve</button>
+          {{/if}}
+          {{#if isFinishingDraft}}
+            <button
+              class='primary-button cancel-button'
+              type='button'
+              {{action 'stopDraft'}}
+            >Cancel</button>
+            <button
+              class='primary-button'
+              type='button'
+              {{action 'saveDraft' 'draft'}}
+            >Save as Draft</button>
+            <button
+              class='primary-button'
+              type='button'
+              {{action 'saveDraft' 'needsRevisions'}}
+            >Needs Revisions</button>
+            <button
+              class='primary-button'
+              type='button'
+              {{action 'saveDraft' 'approved'}}
+            >Approve</button>
+          {{/if}}
+        </div>
       </div>
     </div>
-  </div>
   {{/unless}}
 {{/if}}
 
-<div class="approver-replies">
-  <h2 class="sub-heading">Existing Approver Replies</h2>
+<div class='approver-replies'>
+  <h2 class='sub-heading'>Existing Approver Replies</h2>
   {{#if showNoPreviousRepliesMsg}}
-    <p class="info">It looks like there are no existing approver replies for this Mentor Reply.</p>
-    <img src="../assets/images/no-message.svg" alt="No Replies">
+    <p class='info'>It looks like there are no existing approver replies for
+      this Mentor Reply.</p>
+    <img src='../assets/images/no-message.svg' alt='No Replies' />
   {{/if}}
-{{#if doShowLoadingMessage}}
-  <LoadingElem />
-{{/if}}
-{{#if displayReply}}
-  <div class="display-approver-reply">
-    <div class="top-row">
-      <p class="reply-date">{{format-date displayReply.createDate 'Do MMM YYYY'}}
-        <span class="reply-time">{{format-date displayReply.createDate 'h:mm a'}}</span>
-      </p>
-      {{#if sortedApproverReplies}}
-        <BreadCrumbs @items={{sortedApproverReplies}} @onSelect={{action "setReplyToView"}} @titleTextPath="shortText" @selectedItem={{displayReply}} @infoToolTipText={{revisionsToolTip}} />
-      {{/if}}
-    </div>
-    <div class="reply-users">
-      <p>
-        <span class="reply-label">From:</span>
-        <span class="reply-value">{{displayReply.createdBy.username}}</span>
-      </p>
-      <p>
-        <span class="reply-label">To:</span>
-        <span class="reply-value recipient">{{displayReply.recipient.username}}</span>
-        {{#if showRecipientReadUnread}}
-          <span class="reply-read-unread"><i title={{recipientReadUnreadIcon.title}} class={{recipientReadUnreadIcon.className}}></i></span>
+  {{#if doShowLoadingMessage}}
+    <LoadingElem />
+  {{/if}}
+  {{#if displayReply}}
+    <div class='display-approver-reply'>
+      <div class='top-row'>
+        <p class='reply-date'>{{format-date
+            displayReply.createDate
+            'Do MMM YYYY'
+          }}
+          <span class='reply-time'>{{format-date
+              displayReply.createDate
+              'h:mm a'
+            }}</span>
+        </p>
+        {{#if sortedApproverReplies}}
+          <BreadCrumbs
+            @items={{sortedApproverReplies}}
+            @onSelect={{action 'setReplyToView'}}
+            @titleTextPath='shortText'
+            @selectedItem={{displayReply}}
+            @infoToolTipText={{revisionsToolTip}}
+          />
         {{/if}}
+      </div>
+      <div class='reply-users'>
+        <p>
+          <span class='reply-label'>From:</span>
+          <span class='reply-value'>{{displayReply.createdBy.username}}</span>
+        </p>
+        <p>
+          <span class='reply-label'>To:</span>
+          <span
+            class='reply-value recipient'
+          >{{displayReply.recipient.username}}</span>
+          {{#if showRecipientReadUnread}}
+            <span class='reply-read-unread'><i
+                title={{recipientReadUnreadIcon.title}}
+                class={{recipientReadUnreadIcon.className}}
+              ></i></span>
+          {{/if}}
 
+        </p>
+      </div>
+      {{#if isDraft}}
+        <p class='response-status'>
+          <svg height='20' width='20'>
+            <circle cx='10' cy='15' r='5' fill={{statusIconFill}} />
+          </svg>
+          <span class='status-text'>
+            {{response-status displayReply.status}}
+          </span>
+        </p>
+      {{/if}}
+      <p class='reply-header'>
+        Message
+        {{#if showApproverEdit}}
+          <i {{action 'startEditing'}} class='far fa-edit'></i>
+        {{/if}}
       </p>
+
+      {{#if isEditingApproverReply}}
+        <div class='reply-revise'>
+          <QuillContainer
+            @onEditorChange={{action 'updateQuillText'}}
+            @attrSectionId={{quillEditorId}}
+            @startingText={{editRevisionText}}
+          />
+        </div>
+        {{#if emptyReplyError}}
+          <Ui::ErrorBox
+            @error='Message body cannot be empty.'
+            @showDismiss={{true}}
+            @resetError={{action (mut emptyReplyError) null}}
+          />
+        {{/if}}
+        {{#if quillTooLongError}}
+          <Ui::ErrorBox
+            @error={{quillTooLongErrorMsg}}
+            @showDismiss={{true}}
+            @resetError={{action (mut quillTooLongError) null}}
+          />
+        {{/if}}
+        {{#each saveRecordErrors as |err|}}
+          <Ui::ErrorBox
+            @error={{err}}
+            @showDismiss={{true}}
+            @resetError={{action (mut recordCreateErrors) null}}
+          />
+        {{/each}}
+      {{else}}
+        <div
+          class='reply-content {{if isOldFormatDisplayResponse "old-format"}}'
+        >
+          {{{displayReply.text}}}
+        </div>
+      {{/if}}
     </div>
-    {{#if isDraft}}
-      <p class="response-status">
-        <svg height="20" width="20">
-          <circle cx="10" cy="15" r="5" fill={{statusIconFill}} />
-        </svg>
-        <span class="status-text">
-          {{response-status displayReply.status}}
-        </span>
-      </p>
+    {{#if showDisplayReplyActions}}
+      <div class='display-reply-actions'>
+        {{#if showApproverRevise}}
+          <button
+            class='primary-button'
+            type='button'
+            {{action 'startRevising'}}
+          >Revise</button>
+        {{/if}}
+        {{#if showResumeDraft}}
+          <button
+            class='primary-button'
+            type='button'
+            {{action 'resumeDraft'}}
+          >Resume Draft</button>
+        {{/if}}
+        {{#if showTrash}}
+          <i {{action 'confirmTrash' displayReply}} class='fas fa-trash'></i>
+        {{/if}}
+      </div>
     {{/if}}
-    <p class="reply-header">
-      Message
-      {{#if showApproverEdit}}
-        <i {{action 'startEditing'}} class="far fa-edit"></i>
-      {{/if}}
-    </p>
-
     {{#if isEditingApproverReply}}
-      <div class="reply-revise">
-      <QuillContainer @onEditorChange={{action "updateQuillText"}} @attrSectionId={{quillEditorId}} @startingText={{editRevisionText}} />
-      </div>
-      {{#if emptyReplyError}}
-        <ErrorBox @error="Message body cannot be empty." @showDismiss={{true}} @resetError={{action (mut emptyReplyError) null}} />
-      {{/if}}
-      {{#if quillTooLongError}}
-        <ErrorBox @error={{quillTooLongErrorMsg}} @showDismiss={{true}} @resetError={{action (mut quillTooLongError) null}} />
-      {{/if}}
-      {{#each saveRecordErrors as |err|}}
-        <ErrorBox @error={{err}} @showDismiss={{true}} @resetError={{action (mut recordCreateErrors) null}} />
-      {{/each}}
-    {{else}}
-      <div class="reply-content {{if isOldFormatDisplayResponse "old-format"}}">
-        {{{displayReply.text}}}
+      <div class='submit-buttons button-row'>
+        <button
+          class='primary-button cancel-button'
+          type='button'
+          {{action 'stopEditing'}}
+        >Cancel</button>
+        <button
+          class='primary-button'
+          type='button'
+          {{action 'saveEdit'}}
+        >Save</button>
       </div>
     {{/if}}
-  </div>
-  {{#if showDisplayReplyActions}}
-    <div class="display-reply-actions">
-      {{#if showApproverRevise}}
-        <button class="primary-button" type="button" {{action "startRevising"}}>Revise</button>
-      {{/if}}
-      {{#if showResumeDraft}}
-        <button class="primary-button" type="button" {{action 'resumeDraft'}}>Resume Draft</button>
-      {{/if}}
-      {{#if showTrash}}
-        <i {{action 'confirmTrash' displayReply}} class="fas fa-trash"></i>
-      {{/if}}
-    </div>
   {{/if}}
-  {{#if isEditingApproverReply}}
-    <div class="submit-buttons button-row">
-      <button class="primary-button cancel-button" type="button" {{action "stopEditing"}}>Cancel</button>
-      <button class="primary-button" type="button" {{action "saveEdit"}}>Save</button>
-    </div>
-  {{/if}}
-{{/if}}
 </div>
\ No newline at end of file
diff --git a/app/templates/components/response-mentor-reply.hbs b/app/templates/components/response-mentor-reply.hbs
index 61dd5a280..8fd3a375b 100644
--- a/app/templates/components/response-mentor-reply.hbs
+++ b/app/templates/components/response-mentor-reply.hbs
@@ -129,14 +129,14 @@
       </div>
     {{/each}}
     {{#if this.emptyReplyError}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error='Message body cannot be empty.'
         @showDismiss={{true}}
         @resetError={{action (mut this.emptyReplyError) null}}
       />
     {{/if}}
     {{#if this.quillTooLongError}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{this.quillTooLongErrorMsg}}
         @showDismiss={{true}}
         @resetError={{action (mut this.quillTooLongError) null}}
@@ -162,28 +162,48 @@
       <div class='submit-buttons button-row'>
         {{#if isEditing}}
           <button
-            class='primary-button cancel-button' type="button" {{action 'handleComposeAction' 'isEditing' false true}}
+            class='primary-button cancel-button'
+            type='button'
+            {{action 'handleComposeAction' 'isEditing' false true}}
           >Cancel</button>
-          <button class='primary-button' type="button" {{action 'saveEdit'}}>Save</button>
+          <button
+            class='primary-button'
+            type='button'
+            {{action 'saveEdit'}}
+          >Save</button>
         {{/if}}
         {{#if isRevising}}
           <button
-            class='primary-button cancel-button' type="button" {{action 'handleComposeAction' 'isRevising' false true}}
+            class='primary-button cancel-button'
+            type='button'
+            {{action 'handleComposeAction' 'isRevising' false true}}
           >Cancel</button>
-          <button class='primary-button' type="button" {{action 'saveRevision' true}}>Save as
-            Draft</button>
           <button
-            class='primary-button' type="button" {{action 'saveRevision'}}
+            class='primary-button'
+            type='button'
+            {{action 'saveRevision' true}}
+          >Save as Draft</button>
+          <button
+            class='primary-button'
+            type='button'
+            {{action 'saveRevision'}}
           >{{sendButtonText}}</button>
         {{/if}}
         {{#if isFinishingDraft}}
           <button
-            class='primary-button cancel-button' type="button" {{action 'handleComposeAction' 'isFinishingDraft' false true}}
+            class='primary-button cancel-button'
+            type='button'
+            {{action 'handleComposeAction' 'isFinishingDraft' false true}}
           >Cancel</button>
-          <button class='primary-button' type="button" {{action 'saveDraft' true}}>Save as
-            Draft</button>
           <button
-            class='primary-button' type="button" {{action 'saveDraft'}}
+            class='primary-button'
+            type='button'
+            {{action 'saveDraft' true}}
+          >Save as Draft</button>
+          <button
+            class='primary-button'
+            type='button'
+            {{action 'saveDraft'}}
           >{{sendButtonText}}</button>
         {{/if}}
       </div>
@@ -194,7 +214,11 @@
     {{#if this.canSendNew}}
       Click 'New Response' to begin composing a new Mentor Reply.
       <div class='submit-buttons button-row'>
-        <button class='primary-button' type="button" {{action 'toNewResponse'}}>New Response</button>
+        <button
+          class='primary-button'
+          type='button'
+          {{action 'toNewResponse'}}
+        >New Response</button>
       </div>
 
     {{/if}}
diff --git a/app/templates/components/response-new.hbs b/app/templates/components/response-new.hbs
index 9503f8d17..0a066decb 100644
--- a/app/templates/components/response-new.hbs
+++ b/app/templates/components/response-new.hbs
@@ -201,14 +201,14 @@
       {{/if}}
     </div>
     {{#if emptyReplyError}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error='Message body cannot be blank'
         @showDismiss={{true}}
         @resetError={{action (mut emptyReplyError) null}}
       />
     {{/if}}
     {{#if quillTooLongError}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{quillTooLongErrorMsg}}
         @showDismiss={{true}}
         @resetError={{action (mut quillTooLongError) null}}
@@ -219,10 +219,14 @@
     {{/if}}
     <div class='submit-buttons button-row'>
       <button
-        class='primary-button save-response' type="button" {{action 'saveResponse'}}
+        class='primary-button save-response'
+        type='button'
+        {{action 'saveResponse'}}
       >{{submitButtonText}}</button>
       <button
-        class='primary-button save-draft' type="button" {{action 'saveResponse' true}}
+        class='primary-button save-draft'
+        type='button'
+        {{action 'saveResponse' true}}
       >Save as Draft</button>
     </div>
   </section>
diff --git a/app/templates/components/search-bar.hbs b/app/templates/components/search-bar.hbs
index 3fb033d8a..ad2cc6783 100644
--- a/app/templates/components/search-bar.hbs
+++ b/app/templates/components/search-bar.hbs
@@ -1,6 +1,6 @@
 {{#if this.showFilter}}
   <div class='select-bar'>
-    <MySelect
+    <Ui::MySelect
       @content={{this.searchOptions}}
       @cannotBeNull={{true}}
       @selectedValue={{this.selectedCriterion}}
@@ -11,9 +11,12 @@
 <span class='clear-field'>
   <Input
     class='search-field'
-    @type='text' @insert-newline={{action 'searchAction'}}
+    @type='text'
+    @insert-newline={{action 'searchAction'}}
     @value={{this.inputValue}}
-    placeholder={{this.placeholder}} {{on "keypress" (action 'clearErrors')}} {{on "keyup" (action 'onInputChange')}}
+    placeholder={{this.placeholder}}
+    {{on 'keypress' (action 'clearErrors')}}
+    {{on 'keyup' (action 'onInputChange')}}
   />
 
   {{#if this.showClear}}
@@ -46,6 +49,6 @@
 
 <div class='error-messages'>
   {{#each this.queryErrors as |error|}}
-    <ErrorBox @error={{error}} @showDismiss={{true}} />
+    <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
   {{/each}}
 </div>
\ No newline at end of file
diff --git a/app/templates/components/submissions-filter.hbs b/app/templates/components/submissions-filter.hbs
index 0976a60ff..d66f73288 100644
--- a/app/templates/components/submissions-filter.hbs
+++ b/app/templates/components/submissions-filter.hbs
@@ -184,7 +184,7 @@
     {{/if}}
 
     {{#if this.isMissingCriteria}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{this.missingCriteriaMessage}}
         @showDismiss={{true}}
         @resetError={{action (mut this.isMissingCriteria) null}}
@@ -192,7 +192,7 @@
     {{/if}}
 
     {{#if this.isInvalidDateRange}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{this.invalidDateRangeMessage}}
         @showDismiss={{true}}
         @resetError={{action (mut this.isInvalidDateRange) null}}
diff --git a/app/templates/components/vmt-import-container.hbs b/app/templates/components/vmt-import-container.hbs
index 9ed64f9e5..63b47ea7c 100644
--- a/app/templates/components/vmt-import-container.hbs
+++ b/app/templates/components/vmt-import-container.hbs
@@ -1,66 +1,117 @@
-<div class="flex-container-full">
-  <div class="flex-item-full filter-options collapse" id="filter-list-side">
-    <div class="filter-items">
+<div class='flex-container-full'>
+  <div class='flex-item-full filter-options collapse' id='filter-list-side'>
+    <div class='filter-items'>
       <h2>Summary</h2>
-      <ul class="primary-filter-list">
+      <ul class='primary-filter-list'>
         {{#each detailsItems as |item|}}
-          <DetailsListItem @label={{item.label}} @displayValue={{item.displayValue}} @emptyValue={{item.emptyValue}} @propName={{item.propName}} @children={{item.children}} @isArray={{item.isArray}} @editValue={{action "goToStep"}} @associatedStep={{item.associatedStep}} @currentStep={{currentStep.value}} />
+          <DetailsListItem
+            @label={{item.label}}
+            @displayValue={{item.displayValue}}
+            @emptyValue={{item.emptyValue}}
+            @propName={{item.propName}}
+            @children={{item.children}}
+            @isArray={{item.isArray}}
+            @editValue={{action 'goToStep'}}
+            @associatedStep={{item.associatedStep}}
+            @currentStep={{currentStep.value}}
+          />
         {{/each}}
       </ul>
     </div>
   </div>
-  <div class="flex-item-full list-view">
-    <div class="results-list">
-      <div class="header">
+  <div class='flex-item-full list-view'>
+    <div class='results-list'>
+      <div class='header'>
         <h1>Import VMT Work</h1>
       </div>
 
-      <div class="step-display">
-        <div class="container">
-          <ul class="progressbar">
-            <li class="step-1 active-step">
+      <div class='step-display'>
+        <div class='container'>
+          <ul class='progressbar'>
+            <li class='step-1 active-step'>
               <span>Select Rooms</span>
             </li>
-            <li class="step-2 {{if (greater-equal currentStep.value 2) 'active-step'}}">
+            <li
+              class='step-2
+                {{if (greater-equal currentStep.value 2) "active-step"}}'
+            >
               <span>Create Workspace</span>
             </li>
-            <li class="step-3 {{if (greater-equal currentStep.value 3) 'active-step'}}">
+            <li
+              class='step-3
+                {{if (greater-equal currentStep.value 3) "active-step"}}'
+            >
               <span>Review</span>
             </li>
           </ul>
         </div>
       </div>
 
-      <div class="step-content">
+      <div class='step-content'>
         {{#if showSelectRooms}}
-          <VmtImportStep2 @store={{this.store}} @onBack={{action "changeStep"}} @onProceed={{action "setSelectedRooms"}} @existingSelectedRooms={{selectedRooms}} @previousResults={{mostRecentSearchResults}} @existingSelectedActivities={{selectedActivities}} />
+          <VmtImportStep2
+            @store={{this.store}}
+            @onBack={{action 'changeStep'}}
+            @onProceed={{action 'setSelectedRooms'}}
+            @existingSelectedRooms={{selectedRooms}}
+            @previousResults={{mostRecentSearchResults}}
+            @existingSelectedActivities={{selectedActivities}}
+          />
         {{/if}}
 
         {{#if showCreateWs}}
-          <ImportWorkStep5 @users={{users}} @selectedOwner={{selectedOwner}} @selectedFolderSet={{selectedFolderSet}} @doCreateWs={{doCreateWs}} @selectedMode={{selectedMode}} @folderSets={{folderSets}} @store={{this.store}} @answers={{selectedRooms}} @workspaceName={{workspaceName}} @workspaceOwner={{workspaceOwner}} @workspaceMode={{workspaceMode}} @folderSet={{folderSet}} @onBack={{action "changeStep"}} @onProceed={{action "prepareReview"}} />
+          <ImportWorkStep5
+            @users={{users}}
+            @selectedOwner={{selectedOwner}}
+            @selectedFolderSet={{selectedFolderSet}}
+            @doCreateWs={{doCreateWs}}
+            @selectedMode={{selectedMode}}
+            @folderSets={{folderSets}}
+            @store={{this.store}}
+            @answers={{selectedRooms}}
+            @workspaceName={{workspaceName}}
+            @workspaceOwner={{workspaceOwner}}
+            @workspaceMode={{workspaceMode}}
+            @folderSet={{folderSet}}
+            @onBack={{action 'changeStep'}}
+            @onProceed={{action 'prepareReview'}}
+          />
         {{/if}}
 
         {{#if showReview}}
-          <VmtImportStep4 @store={{this.store}} @answers={{selectedRooms}} @workspaceName={{workspaceName}} @workspaceOwner={{workspaceOwner}} @workspaceMode={{workspaceMode}} @folderSet={{folderSet}} @isUploadingAnswer={{isUploadingAnswer}} @isCreatingWorkspace={{isCreatingWorkspace}} @uploadedAnswers={{uploadedAnswers}} @createdWorkspace={{createdWorkspace}} @onBack={{action "changeStep"}} @onProceed={{action "importWork"}} />
+          <VmtImportStep4
+            @store={{this.store}}
+            @answers={{selectedRooms}}
+            @workspaceName={{workspaceName}}
+            @workspaceOwner={{workspaceOwner}}
+            @workspaceMode={{workspaceMode}}
+            @folderSet={{folderSet}}
+            @isUploadingAnswer={{isUploadingAnswer}}
+            @isCreatingWorkspace={{isCreatingWorkspace}}
+            @uploadedAnswers={{uploadedAnswers}}
+            @createdWorkspace={{createdWorkspace}}
+            @onBack={{action 'changeStep'}}
+            @onProceed={{action 'importWork'}}
+          />
         {{/if}}
       </div>
 
-    {{#each findRecordErrors as |error|}}
-      <ErrorBox @error={{error}} @showDismiss={{true}} />
-    {{/each}}
-    {{#each postErrors as |error|}}
-      <ErrorBox @error={{error}} @showDismiss={{true}} />
-    {{/each}}
-    {{#each createAnswerErrors as |error|}}
-      <ErrorBox @error={{error}} @showDismiss={{true}} />
-    {{/each}}
+      {{#each findRecordErrors as |error|}}
+        <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
+      {{/each}}
+      {{#each postErrors as |error|}}
+        <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
+      {{/each}}
+      {{#each createAnswerErrors as |error|}}
+        <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
+      {{/each}}
     </div>
   </div>
 </div>
 
-<div class="toggle-filter-menu">
-  <button type="button" {{action 'toggleMenu'}}><i id="arrow-icon" class="fas fa-chevron-right"></i></button>
-</div>
-
-
-
+<div class='toggle-filter-menu'>
+  <button type='button' {{action 'toggleMenu'}}><i
+      id='arrow-icon'
+      class='fas fa-chevron-right'
+    ></i></button>
+</div>
\ No newline at end of file
diff --git a/app/templates/components/vmt-search.hbs b/app/templates/components/vmt-search.hbs
index 9087bb70e..4f11d5a45 100644
--- a/app/templates/components/vmt-search.hbs
+++ b/app/templates/components/vmt-search.hbs
@@ -1,6 +1,18 @@
-<label class="input-label">Search for VMT Rooms / Activities</label>
-<SearchBar @onSearch={{action "submitSearch"}} @basePlaceholder="Room / Activity Name" @inputValue={{searchText}} @clearSearchResults={{action "clearSearchResults"}} @doSearchOnInputChange={{true}} @doDebounce={{true}} @constraints={{searchConstraints}} />
+<label class='input-label'>Search for VMT Rooms / Activities</label>
+<SearchBar
+  @onSearch={{action 'submitSearch'}}
+  @basePlaceholder='Room / Activity Name'
+  @inputValue={{searchText}}
+  @clearSearchResults={{action 'clearSearchResults'}}
+  @doSearchOnInputChange={{true}}
+  @doDebounce={{true}}
+  @constraints={{searchConstraints}}
+/>
 
 {{#each searchErrors as |error|}}
-  <ErrorBox @error={{error}} @showDismiss={{true}} @resetError={{action (mut searchErrors) null}} />
-{{/each}}
+  <Ui::ErrorBox
+    @error={{error}}
+    @showDismiss={{true}}
+    @resetError={{action (mut searchErrors) null}}
+  />
+{{/each}}
\ No newline at end of file
diff --git a/app/templates/components/workspace-new-container.hbs b/app/templates/components/workspace-new-container.hbs
index 5fb958ba0..3e4112653 100644
--- a/app/templates/components/workspace-new-container.hbs
+++ b/app/templates/components/workspace-new-container.hbs
@@ -28,13 +28,17 @@
             {{#if this.toggleTrashed}}
               <div class='action restore-all'>
                 <button
-                  class='primary-button animated fadeIn' type="button" {{action 'restoreAllSelected'}}
+                  class='primary-button animated fadeIn'
+                  type='button'
+                  {{action 'restoreAllSelected'}}
                 >Restore {{this.selectedAnswers.length}} Submissions</button>
               </div>
             {{else}}
               <div class='action'>
                 <button
-                  class='primary-button animated fadeIn create-ws' type="button" {{action 'toSettingsConfig'}}
+                  class='primary-button animated fadeIn create-ws'
+                  type='button'
+                  {{action 'toSettingsConfig'}}
                 >Create Workspace</button>
               </div>
             {{/if}}
@@ -68,7 +72,7 @@
             {{/if}}
           </div>
           <div class='side-icons'>
-            <MySelect
+            <Ui::MySelect
               @content={{this.revisionsSelectOptions}}
               @cannotBeNull={{true}}
               @selectedValue={{this.selectedRevisionOption}}
@@ -181,7 +185,7 @@
 {{/if}}
 {{#if this.showSubmissionViewer}}
   <div class='toggle-filter-menu'>
-    <button type="button" {{action 'toggleMenu'}}><i
+    <button type='button' {{action 'toggleMenu'}}><i
         id='arrow-icon'
         class='fas fa-chevron-right'
       ></i></button>
diff --git a/app/templates/components/workspace-new-copy.hbs b/app/templates/components/workspace-new-copy.hbs
index 233c887ef..7d7913528 100644
--- a/app/templates/components/workspace-new-copy.hbs
+++ b/app/templates/components/workspace-new-copy.hbs
@@ -1,90 +1,166 @@
-<div class="flex-container-full">
-  <div class="flex-item-full filter-options collapse" id="filter-list-side">
-    <div class="filter-items">
+<div class='flex-container-full'>
+  <div class='flex-item-full filter-options collapse' id='filter-list-side'>
+    <div class='filter-items'>
       <h2>Summary</h2>
-      <ul class="primary-filter-list">
+      <ul class='primary-filter-list'>
         {{#each detailsItems as |item|}}
-          <DetailsListItem @label={{item.label}} @displayValue={{item.displayValue}} @emptyValue={{item.emptyValue}} @propName={{item.propName}} @children={{item.children}} @isArray={{item.isArray}} @editValue={{action "goToStep"}} @associatedStep={{item.associatedStep}} @currentStep={{currentStep.value}} />
+          <DetailsListItem
+            @label={{item.label}}
+            @displayValue={{item.displayValue}}
+            @emptyValue={{item.emptyValue}}
+            @propName={{item.propName}}
+            @children={{item.children}}
+            @isArray={{item.isArray}}
+            @editValue={{action 'goToStep'}}
+            @associatedStep={{item.associatedStep}}
+            @currentStep={{currentStep.value}}
+          />
         {{/each}}
       </ul>
     </div>
   </div>
-  <div class="flex-item-full list-view">
-    <div class="results-list">
-      <div class="header">
+  <div class='flex-item-full list-view'>
+    <div class='results-list'>
+      <div class='header'>
         <h1>Copy Workspace</h1>
       </div>
 
-      <div class="step-display">
-        <div class="container">
-          <ul class="progressbar">
-            <li class="step-1 active-step">
+      <div class='step-display'>
+        <div class='container'>
+          <ul class='progressbar'>
+            <li class='step-1 active-step'>
               <span>Select Workspace</span>
             </li>
-            <li class="step-2 {{if (greater-equal currentStep.value 2) 'active-step'}}">
+            <li
+              class='step-2
+                {{if (greater-equal currentStep.value 2) "active-step"}}'
+            >
               <span>Copy Configuration</span>
             </li>
-            <li class="step-3 {{if (greater-equal currentStep.value 3) 'active-step'}}">
+            <li
+              class='step-3
+                {{if (greater-equal currentStep.value 3) "active-step"}}'
+            >
               <span>Workspace Info</span>
             </li>
-            <li class="step-4 {{if (greater-equal currentStep.value 4) 'active-step'}}">
+            <li
+              class='step-4
+                {{if (greater-equal currentStep.value 4) "active-step"}}'
+            >
               <span>Collaborators</span>
             </li>
-            <li class="step-5 {{if (greater-equal currentStep.value 5) 'active-step'}}">
+            <li
+              class='step-5
+                {{if (greater-equal currentStep.value 5) "active-step"}}'
+            >
               <span>Review</span>
             </li>
           </ul>
         </div>
       </div>
 
-      <div class="step-content">
+      <div class='step-content'>
         {{!-- <h5>Step {{currentStep.value}} / {{maxSteps}}: {{currentStep.display}}</h5> --}}
 
         {{#if showSelectWorkspace}}
-          <WsCopyWorkspace @showLoadingSubmissions={{showLoadingSubmissions}} @loadSubmissionErrors={{loadSubmissionErrors}} @store={{this.store}} @workspaceToCopy={{workspaceToCopy}} @selectedWorkspace={{selectedWorkspace}} @fromWorkspaceList={{fromWorkspaceList}} @onProceed={{action "setOriginalWorkspace"}} />
+          <WsCopyWorkspace
+            @showLoadingSubmissions={{showLoadingSubmissions}}
+            @loadSubmissionErrors={{loadSubmissionErrors}}
+            @store={{this.store}}
+            @workspaceToCopy={{workspaceToCopy}}
+            @selectedWorkspace={{selectedWorkspace}}
+            @fromWorkspaceList={{fromWorkspaceList}}
+            @onProceed={{action 'setOriginalWorkspace'}}
+          />
         {{/if}}
 
         {{#if showSelectConfig}}
-          <WsCopyConfig @workspace={{workspaceToCopy}} @submissionThreads={{submissionThreads}} @newWsConfig={{newWsConfig}} @copyConfig={{copyConfig}} @onProceed={{action "setConfig"}} @onBack={{action "changeStep"}} />
+          <WsCopyConfig
+            @workspace={{workspaceToCopy}}
+            @submissionThreads={{submissionThreads}}
+            @newWsConfig={{newWsConfig}}
+            @copyConfig={{copyConfig}}
+            @onProceed={{action 'setConfig'}}
+            @onBack={{action 'changeStep'}}
+          />
         {{/if}}
 
         {{#if showOwnerSettings}}
-          <WsCopyOwnerSettings @newWsOwner={{newWsOwner}} @newWsMode={{newWsMode}} @newWsName={{newWsName}} @newFolderSetOptions={{newFolderSetOptions}} @workspace={{selectedWorkspace}} @store={{this.store}} @modeInputs={{modeInputs}} @onProceed={{action "setOwnerSettings"}} @folderSetInputs={{folderSetInputs}} @folderSets={{model.folderSets}} @isCopyingFolders={{isCopyingFolders}} @onBack={{action "changeStep"}} @existingFolderSet={{existingFolderSet}} />
+          <WsCopyOwnerSettings
+            @newWsOwner={{newWsOwner}}
+            @newWsMode={{newWsMode}}
+            @newWsName={{newWsName}}
+            @newFolderSetOptions={{newFolderSetOptions}}
+            @workspace={{selectedWorkspace}}
+            @store={{this.store}}
+            @modeInputs={{modeInputs}}
+            @onProceed={{action 'setOwnerSettings'}}
+            @folderSetInputs={{folderSetInputs}}
+            @folderSets={{model.folderSets}}
+            @isCopyingFolders={{isCopyingFolders}}
+            @onBack={{action 'changeStep'}}
+            @existingFolderSet={{existingFolderSet}}
+          />
         {{/if}}
 
         {{#if showPermissions}}
-          <WsCopyPermissions @submissionsPool={{submissionsPool}} @workspace={{workspaceToCopy}} @newWsPermissions={{newWsPermissions}} @store={{this.store}} @newWsOwner={{newWsOwner}} @onProceed={{action "setPermissions"}} @onBack={{action "changeStep"}} />
+          <WsCopyPermissions
+            @submissionsPool={{submissionsPool}}
+            @workspace={{workspaceToCopy}}
+            @newWsPermissions={{newWsPermissions}}
+            @store={{this.store}}
+            @newWsOwner={{newWsOwner}}
+            @onProceed={{action 'setPermissions'}}
+            @onBack={{action 'changeStep'}}
+          />
         {{/if}}
 
         {{#if showReview}}
-          <WsCopyReview @showLoadingMessage={{showRequestLoading}} @mode={{newWsMode}} @owner={{newWsOwner}} @name={{newWsName}} @workspace={{workspaceToCopy}} @onProceed={{action "createCopyRequest"}} @onBack={{action "changeStep"}} @recordCounts={{recordCounts}} />
+          <WsCopyReview
+            @showLoadingMessage={{showRequestLoading}}
+            @mode={{newWsMode}}
+            @owner={{newWsOwner}}
+            @name={{newWsName}}
+            @workspace={{workspaceToCopy}}
+            @onProceed={{action 'createCopyRequest'}}
+            @onBack={{action 'changeStep'}}
+            @recordCounts={{recordCounts}}
+          />
         {{/if}}
       </div>
 
-
       {{#if customConfigError}}
-        <ErrorBox @error="Sorry, something went wrong processing your custom configuration." @showDismiss={{true}} @resetError={{action (mut customConfigError) null}} />
+        <Ui::ErrorBox
+          @error='Sorry, something went wrong processing your custom configuration.'
+          @showDismiss={{true}}
+          @resetError={{action (mut customConfigError) null}}
+        />
       {{/if}}
       {{#if copyWorkspaceError}}
-        <ErrorBox @error={{copyWorkspaceError}} @showDismiss={{true}} @resetError={{action (mut copyWorkspaceError) null}} />
+        <Ui::ErrorBox
+          @error={{copyWorkspaceError}}
+          @showDismiss={{true}}
+          @resetError={{action (mut copyWorkspaceError) null}}
+        />
       {{/if}}
 
       {{#each serverErrors as |error|}}
-        <ErrorBox @error={{error}} @showDismiss={{true}} />
+        <Ui::ErrorBox @error={{error}} @showDismiss={{true}} />
       {{/each}}
     </div>
   </div>
 </div>
 
-<div class="toggle-filter-menu">
-  <button type="button" {{action 'toggleMenu'}}><i id="arrow-icon" class="fas fa-chevron-right"></i></button>
+<div class='toggle-filter-menu'>
+  <button type='button' {{action 'toggleMenu'}}><i
+      id='arrow-icon'
+      class='fas fa-chevron-right'
+    ></i></button>
 </div>
 
 <script>
-  $('.list-view').click(function (e) {
-    if (!($('#filter-list-side').hasClass('collapse'))) {
-      $('#arrow-icon').toggleClass('fa-rotate-180');
-    }
-    $('#filter-list-side').addClass('collapse');
-  });
+  $('.list-view').click(function (e) { if
+  (!($('#filter-list-side').hasClass('collapse'))) {
+  $('#arrow-icon').toggleClass('fa-rotate-180'); }
+  $('#filter-list-side').addClass('collapse'); });
 </script>
\ No newline at end of file
diff --git a/app/templates/components/workspace-new-enc.hbs b/app/templates/components/workspace-new-enc.hbs
index 046e7e8a0..e0a93cc11 100644
--- a/app/templates/components/workspace-new-enc.hbs
+++ b/app/templates/components/workspace-new-enc.hbs
@@ -18,10 +18,9 @@
         {{#if currentUser.isTeacher}}
           <p class='workspace-info'>{{currentUser.username}}</p>
         {{else}}
-          <MySelect
+          <Ui::MySelect
             @selectedValue={{selectedTeacher}}
             @content={{teacherPool}}
-            @optionLabelPath='username'
             @prompt='Please select
         a username'
             @action={{action (mut selectedTeacher)}}
@@ -35,9 +34,8 @@
             data-tooltip={{tooltips.assignment}}
           >Assignment </span>
         </label>
-        <MySelect
+        <Ui::MySelect
           @content={{model.assignments}}
-          @optionLabelPath='problem.title'
           @prompt='Please select an assignment'
           @action={{action (mut selectedAssignment)}}
         />
@@ -83,9 +81,8 @@
             data-tooltip={{tooltips.class}}
           >Class </span>
         </label>
-        <MySelect
+        <Ui::MySelect
           @content={{model.sections}}
-          @optionLabelPath='name'
           @prompt='Please select a class'
           @action={{action (mut selectedSection)}}
         />
@@ -125,10 +122,9 @@
         {{#if currentUser.isTeacher}}
           <p class='workspace-info'>{{currentUser.username}}</p>
         {{else}}
-          <MySelect
+          <Ui::MySelect
             @selectedValue={{selectedOwner}}
             @content={{teacherPool}}
-            @optionLabelPath='username'
             @prompt='Please select an
         owner'
             @action={{action (mut selectedOwner)}}
@@ -157,9 +153,8 @@
             data-tooltip={{tooltips.folders}}
           >Folders</span>
         </label>
-        <MySelect
+        <Ui::MySelect
           @content={{model.folderSets}}
-          @optionLabelPath='name'
           @prompt='Please select a folder set'
           @action={{action (mut selectedFolderSet)}}
         />
diff --git a/app/templates/components/workspace-new-pows.hbs b/app/templates/components/workspace-new-pows.hbs
index 4c3d9512b..a54591add 100644
--- a/app/templates/components/workspace-new-pows.hbs
+++ b/app/templates/components/workspace-new-pows.hbs
@@ -1,118 +1,190 @@
-<section class="newWorkspace sanity">
-  <section class="overview">
+<section class='newWorkspace sanity'>
+  <section class='overview'>
     <h2>Overview</h2>
     <p>
-      A workspace is made up of a set of submissions,
-      a way to organize your work (folders),
-      and permissions.<br />
-      Here, you can import submissions.
-      We will automatically create workspaces for you.
+      A workspace is made up of a set of submissions, a way to organize your
+      work (folders), and permissions.<br />
+      Here, you can import submissions. We will automatically create workspaces
+      for you.
     </p>
   </section>
-  <section class="third submissions">
+  <section class='third submissions'>
     <h2>Submissions</h2>
     <div>
-      <Input @type="radio" name="importMode" class="pdImport" @value="0" {{on "click" (action "radioSelect" 0)}} /> <label>PD</label>
-      <Input @type="radio" name="importMode" class="powImport" @value="1" {{on "click" (action "radioSelect" 1)}} /> <label>PoW</label>
-    {{#if isPdImport}}
-      <p>
-        One or more workspaces will be created with the submissions from the
-        PD set you select below.
-        The workspaces will be created based on groupings of problem and class.
-      </p>
-    {{else}}
-      <p>
-        <label>As PD set <Input id="powPd" @type="checkbox" @checked={{pd}} /></label>
-        {{#if pd}}
-          <Input @type="text" @value={{newPdSet}} />
-        {{/if}}
-      </p>
-      {{#if pd}}
+      <Input
+        @type='radio'
+        name='importMode'
+        class='pdImport'
+        @value='0'
+        {{on 'click' (action 'radioSelect' 0)}}
+      />
+      <label>PD</label>
+      <Input
+        @type='radio'
+        name='importMode'
+        class='powImport'
+        @value='1'
+        {{on 'click' (action 'radioSelect' 1)}}
+      />
+      <label>PoW</label>
+      {{#if isPdImport}}
         <p>
-         Your submissions will be imported to the PD set you name above.  No workspaces will be created but you (and others) will be able to import this set of submissions by returning to this page and choosing "PD".
-         {{!-- see ENC-432 --}}
+          One or more workspaces will be created with the submissions from the
+          PD set you select below. The workspaces will be created based on
+          groupings of problem and class.
         </p>
       {{else}}
         <p>
-          One or more workspaces will be created with the
-          submissions imported directly from the PoWs.
-          The workspaces will be created based on groupings
-          of problem and class.
+          <label>As PD set
+            <Input id='powPd' @type='checkbox' @checked={{pd}} /></label>
+          {{#if pd}}
+            <Input @type='text' @value={{newPdSet}} />
+          {{/if}}
         </p>
+        {{#if pd}}
+          <p>
+            Your submissions will be imported to the PD set you name above. No
+            workspaces will be created but you (and others) will be able to
+            import this set of submissions by returning to this page and
+            choosing "PD".
+            {{! see ENC-432 }}
+          </p>
+        {{else}}
+          <p>
+            One or more workspaces will be created with the submissions imported
+            directly from the PoWs. The workspaces will be created based on
+            groupings of problem and class.
+          </p>
+        {{/if}}
       {{/if}}
-    {{/if}}
     </div>
     {{#if isPdImport}}
-    <form id="pdImportForm" class='properForm'>
-    <ol>
-      <li>
-      <MySelect @content={{model.pdSets}} @optionLabelPath="label" @prompt="Please select a PD set" @action={{action (mut selectedPdSet)}} />
-      </li>
-    </ol>
-    </form>
+      <form id='pdImportForm' class='properForm'>
+        <ol>
+          <li>
+            <Ui::MySelect
+              @content={{model.pdSets}}
+              @prompt='Please select a PD set'
+              @action={{action (mut selectedPdSet)}}
+            />
+          </li>
+        </ol>
+      </form>
     {{/if}}
 
     {{pd}}
     {{#if isPowImport}}
-     <form id='powImportForm' class='properForm'>
-     <fieldset> <legend> By ID(s) </legend>
-       <ol>
-         <li>
-           <label for="teacher">Teacher <em>*</em></label>
-           <Input id="teacher" @type="text" @value={{teacher}} disabled={{canEdit}} placeholder="enter username" />
-         </li>
-         <li>
-           <label for="submitter">Submitter</label>
-           <Input id="submitter" @type="text" @value={{submitter}} placeholder="enter username" />
-         </li>
-         <li>
-           <label for="puzzle">Problem</label>
-           <Input id="puzzle" @type="number" @value={{puzzId}} placeholder="enter number" />
-         </li>
-         <li>
-           <label for="course">Class</label>
-           <Input id="course" @type="number" @value={{course}} placeholder="enter ID" />
-         </li>
-         <li style="border-bottom:2px dashed; padding:0.2em; text-align:center;">OR</li>
-         <li>
-           <label for="subs">Submissions</label>
-           <Input id="subs" @type="text" @value={{subs}} size="33" placeholder="one or more IDs" pattern="([0-9]+(,?))*" />
-          </li>
-         </ol>
-     </fieldset><br />
+      <form id='powImportForm' class='properForm'>
+        <fieldset>
+          <legend> By ID(s) </legend>
+          <ol>
+            <li>
+              <label for='teacher'>Teacher <em>*</em></label>
+              <Input
+                id='teacher'
+                @type='text'
+                @value={{teacher}}
+                disabled={{canEdit}}
+                placeholder='enter username'
+              />
+            </li>
+            <li>
+              <label for='submitter'>Submitter</label>
+              <Input
+                id='submitter'
+                @type='text'
+                @value={{submitter}}
+                placeholder='enter username'
+              />
+            </li>
+            <li>
+              <label for='puzzle'>Problem</label>
+              <Input
+                id='puzzle'
+                @type='number'
+                @value={{puzzId}}
+                placeholder='enter number'
+              />
+            </li>
+            <li>
+              <label for='course'>Class</label>
+              <Input
+                id='course'
+                @type='number'
+                @value={{course}}
+                placeholder='enter ID'
+              />
+            </li>
+            <li
+              style='border-bottom:2px dashed; padding:0.2em; text-align:center;'
+            >OR</li>
+            <li>
+              <label for='subs'>Submissions</label>
+              <Input
+                id='subs'
+                @type='text'
+                @value={{subs}}
+                size='33'
+                placeholder='one or more IDs'
+                pattern='([0-9]+(,?))*'
+              />
+            </li>
+          </ol>
+        </fieldset><br />
 
-     <fieldset> <legend> By Date </legend>
-       <ol>
-         <li>
-           <label for="start">From</label>
-           <Input id="start" @type="date" @value={{startDate}} placeholder="mm/dd/yyyy" />
-         </li>
-         <li>
-         <label for="end">To</label>
-         <Input id="end" @type="date" @value={{endDate}} placeholder="mm/dd/yyyy" />
-         </li>
-       </ol>
-     </fieldset>
-     </form>
+        <fieldset>
+          <legend> By Date </legend>
+          <ol>
+            <li>
+              <label for='start'>From</label>
+              <Input
+                id='start'
+                @type='date'
+                @value={{startDate}}
+                placeholder='mm/dd/yyyy'
+              />
+            </li>
+            <li>
+              <label for='end'>To</label>
+              <Input
+                id='end'
+                @type='date'
+                @value={{endDate}}
+                placeholder='mm/dd/yyyy'
+              />
+            </li>
+          </ol>
+        </fieldset>
+      </form>
     {{/if}}
   </section>
 
-
-  <section class="third folders">
+  <section class='third folders'>
     <h2>Folders</h2>
-    <p>Choose the folders you want to start off with.  You will be able to add/remove/reorder folders in each workspace once you get started.</p>
-    <MySelect @content={{model.folderSets}} @optionLabelPath="name" @prompt="Please select a folder set" @action={{action (mut selectedFolderSetId)}} />
+    <p>Choose the folders you want to start off with. You will be able to
+      add/remove/reorder folders in each workspace once you get started.</p>
+    <Ui::MySelect
+      @content={{model.folderSets}}
+      @prompt='Please select a folder set'
+      @action={{action (mut selectedFolderSetId)}}
+    />
   </section>
 
-  <section class="third permissions">
+  <section class='third permissions'>
     <h2>Permissions</h2>
-    <p>Once you create your workspace you'll be able to set the mode and editors (by visiting the 'info' link for your workspace).</p>
+    <p>Once you create your workspace you'll be able to set the mode and editors
+      (by visiting the 'info' link for your workspace).</p>
   </section>
 
-  <div style="clear: left"></div>
-  <section class="submit">
-  <button class="action_button" id="create-workspace-btn" type="button" {{action 'createWorkspace'}}>
-    Create
-  </button>
+  <div style='clear: left'></div>
+  <section class='submit'>
+    <button
+      class='action_button'
+      id='create-workspace-btn'
+      type='button'
+      {{action 'createWorkspace'}}
+    >
+      Create
+    </button>
   </section>
-</section>
+</section>
\ No newline at end of file
diff --git a/app/templates/components/workspace-new-settings.hbs b/app/templates/components/workspace-new-settings.hbs
index 70bbdbb0a..31b0310bb 100644
--- a/app/templates/components/workspace-new-settings.hbs
+++ b/app/templates/components/workspace-new-settings.hbs
@@ -23,7 +23,7 @@
       />
     </div>
     {{#each workspaceNameErrors as |error|}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{error}}
         @showDismiss={{true}}
         @resetError={{action (mut workspaceNameErrors) null}}
@@ -57,7 +57,7 @@
       @isDisabled={{is-equal this.currentUser.accountType 'T'}}
     />
     {{#each ownerErrors as |error|}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{error}}
         @showDismiss={{true}}
         @resetError={{action (mut ownerErrors) null}}
@@ -75,13 +75,13 @@
         <i class='fas fa-info-circle info-icon'></i>
       </span>
     </p>
-    <RadioGroup
+    <Ui::RadioGroup
       @options={{modeInputs}}
       @selectedValue={{this.selectedMode}}
       @updateValue={{action 'updateSelectedMode'}}
     />
     {{#each privacySettingErrors as |error|}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{error}}
         @showDismiss={{true}}
         @resetError={{action (mut privacySettingErrors) null}}
@@ -113,7 +113,7 @@
       @placeholder='Select a Folder Set'
     />
     {{#each folderSetErrors as |error|}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{error}}
         @showDismiss={{true}}
         @resetError={{action (mut folderSetErrors) null}}
@@ -131,7 +131,7 @@
         <i class='fas fa-info-circle info-icon'></i>
       </span>
     </p>
-    <RadioGroup
+    <Ui::RadioGroup
       @options={{submissionSettingsInputs}}
       @selectedValue={{this.selectedSubmissionSettings}}
       @updateValue={{action 'updateSelectedSubmissionSettings'}}
@@ -149,7 +149,7 @@
 
   <div class='create-ws-error'>
     {{#if createWorkspaceError}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error={{createWorkspaceError}}
         @showDismiss={{true}}
         @resetError={{action (mut createWorkspaceError) null}}
diff --git a/app/templates/components/ws-copy-config.hbs b/app/templates/components/ws-copy-config.hbs
index be33956eb..d54c1f291 100644
--- a/app/templates/components/ws-copy-config.hbs
+++ b/app/templates/components/ws-copy-config.hbs
@@ -1,25 +1,50 @@
-<p class="input-label">
+<p class='input-label'>
   Choose Copy Configuration
-  <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Select how you would like to copy this workspace. Hover over the question icons to learn more">
-    <i class="fas fa-info-circle info-icon"></i>
+  <span
+    class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+    data-tooltip='Select how you would like to copy this workspace. Hover over the question icons to learn more'
+  >
+    <i class='fas fa-info-circle info-icon'></i>
   </span>
 </p>
-<RadioGroup @options={{copyConfig}} @selectedValue={{this.selectedConfig}} @updateValue={{action "updateSelectedConfig"}} />
+<Ui::RadioGroup
+  @options={{copyConfig}}
+  @selectedValue={{this.selectedConfig}}
+  @updateValue={{action 'updateSelectedConfig'}}
+/>
 
 {{#if showCustomConfig}}
-  <WsCopyCustomConfig @workspace={{workspace}} @submissionThreads={{submissionThreads}} @onProceed={{action "nextCustom"}} @onBack={{action "back"}} @insufficientSubmissions={{insufficientSubmissions}} />
+  <WsCopyCustomConfig
+    @workspace={{workspace}}
+    @submissionThreads={{submissionThreads}}
+    @onProceed={{action 'nextCustom'}}
+    @onBack={{action 'back'}}
+    @insufficientSubmissions={{insufficientSubmissions}}
+  />
 
   {{#if insufficientSubmissions}}
-    <ErrorBox @error="Please choose a configuration that includes at least 1 submission." @showDismiss={{true}} @resetError={{action (mut insufficientSubmissions) null}} />
+    <Ui::ErrorBox
+      @error='Please choose a configuration that includes at least 1 submission.'
+      @showDismiss={{true}}
+      @resetError={{action (mut insufficientSubmissions) null}}
+    />
   {{/if}}
-  {{else}}
+{{else}}
 
   {{#if invalidOrMissingConfig}}
-    <ErrorBox @showDismiss={{true}} @error="Please select a valid configuration option." @resetError={{action (mut invalidOrMissingConfig) null}} />
+    <Ui::ErrorBox
+      @showDismiss={{true}}
+      @error='Please select a valid configuration option.'
+      @resetError={{action (mut invalidOrMissingConfig) null}}
+    />
   {{/if}}
 
-  <div class="nav-btn-container">
-    <button class="primary-button cancel-button" type="button" {{action "back"}}>Back</button>
-    <button class="primary-button" type="button" {{action "next"}}>Next</button>
+  <div class='nav-btn-container'>
+    <button
+      class='primary-button cancel-button'
+      type='button'
+      {{action 'back'}}
+    >Back</button>
+    <button class='primary-button' type='button' {{action 'next'}}>Next</button>
   </div>
-{{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/app/templates/components/ws-copy-owner-settings.hbs b/app/templates/components/ws-copy-owner-settings.hbs
index 930349d76..42f81cc8b 100644
--- a/app/templates/components/ws-copy-owner-settings.hbs
+++ b/app/templates/components/ws-copy-owner-settings.hbs
@@ -20,7 +20,7 @@
 </div>
 
 {{#each nameErrors as |error|}}
-  <ErrorBox
+  <Ui::ErrorBox
     @error={{error}}
     @showDismiss={{true}}
     @resetError={{action (mut nameErrors) null}}
@@ -55,7 +55,7 @@
 </div>
 
 {{#each ownerErrors as |error|}}
-  <ErrorBox
+  <Ui::ErrorBox
     @error={{error}}
     @showDismiss={{true}}
     @resetError={{action (mut ownerErrors) null}}
@@ -72,7 +72,7 @@
       <i class='fas fa-info-circle info-icon'></i>
     </span>
   </p>
-  <RadioGroup
+  <Ui::RadioGroup
     @options={{modeInputs}}
     @selectedValue={{this.selectedMode}}
     @updateValue={{action 'updateSelectedMode'}}
@@ -80,7 +80,7 @@
 </div>
 
 {{#each modeErrors as |error|}}
-  <ErrorBox
+  <Ui::ErrorBox
     @error={{error}}
     @showDismiss={{true}}
     @resetError={{action (mut modeErrors) null}}
@@ -135,7 +135,7 @@
         @privacySetting={{folderSetPrivacy}}
       />
       {{#if duplicateFolderSetName}}
-        <ErrorBox
+        <Ui::ErrorBox
           @error='There already exists a public Folder Set with that name. Please choose a different name.'
           @showDismiss={{true}}
           @resetError={{action (mut duplicateFolderSetName) null}}
diff --git a/app/templates/components/ws-copy-workspace.hbs b/app/templates/components/ws-copy-workspace.hbs
index 87e6c8553..eec8f62ce 100644
--- a/app/templates/components/ws-copy-workspace.hbs
+++ b/app/templates/components/ws-copy-workspace.hbs
@@ -28,7 +28,7 @@
       @preload='focus'
     />
     {{#if missingWorkspace}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error='Please select a workspace.'
         @resetError={{action (mut missingWorkspace) null}}
         @showDismiss={{true}}
@@ -42,7 +42,7 @@
 {{/if}}
 
 {{#if tooFewSubmissions}}
-  <ErrorBox
+  <Ui::ErrorBox
     @error='Please select a workspace with at least 1 submission.'
     @resetError={{action (mut tooFewSubmissions) null}}
     @showDismiss={{true}}
diff --git a/app/templates/components/ws-new-settings-permissions.hbs b/app/templates/components/ws-new-settings-permissions.hbs
index 5f1e39694..aa4e98ed1 100644
--- a/app/templates/components/ws-new-settings-permissions.hbs
+++ b/app/templates/components/ws-new-settings-permissions.hbs
@@ -26,7 +26,7 @@
 
 {{#if selectedCollaborator}}
   <div class='global-permissions'>
-    <RadioGroup
+    <Ui::RadioGroup
       @options={{globalItems}}
       @selectedValue={{this.globalPermissionValue}}
       @updateValue={{action 'updateGlobalPermissionValue'}}
@@ -35,7 +35,7 @@
       create the workspace</p>
 
     {{#if saveError}}
-      <ErrorBox
+      <Ui::ErrorBox
         @error='Sorry, something went wrong. Please try again'
         @showDismiss={{true}}
         @resetError={{action (mut saveError) null}}
diff --git a/app/templates/components/ws-permissions-new.hbs b/app/templates/components/ws-permissions-new.hbs
index 79a529761..66eab23db 100644
--- a/app/templates/components/ws-permissions-new.hbs
+++ b/app/templates/components/ws-permissions-new.hbs
@@ -1,18 +1,35 @@
-
-<p class="input-label">
-  Configure Permissions for <span class="username">{{selectedUser.username}}</span>
-  <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Select which permissions this user should have for this new workspace">
-    <i class="fas fa-info-circle info-icon"></i>
+<p class='input-label'>
+  Configure Permissions for
+  <span class='username'>{{selectedUser.username}}</span>
+  <span
+    class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+    data-tooltip='Select which permissions this user should have for this new workspace'
+  >
+    <i class='fas fa-info-circle info-icon'></i>
   </span>
 </p>
 
-<div class="submission-permissions">
-<RadioGroup @options={{submissionItems}} @selectedValue={{submissions}} @updateValue={{action "updateSubmissions"}} />
-{{#if closedCustomView}}
-  <span class="show-viewer" {{action (mut showCustomSubmissionViewer) true}}>Show Viewer</span>
-{{/if}}
+<div class='submission-permissions'>
+  <Ui::RadioGroup
+    @options={{submissionItems}}
+    @selectedValue={{submissions}}
+    @updateValue={{action 'updateSubmissions'}}
+  />
+  {{#if closedCustomView}}
+    <span
+      class='show-viewer'
+      {{action (mut showCustomSubmissionViewer) true}}
+    >Show Viewer</span>
+  {{/if}}
   {{#if showCustomSubmissions}}
-    <CustomSubmissionViewerList @submissions={{submissionsPool}} @selectedSubmissionIds={{customSubmissionIds}} @onSelect={{action "updateCustomSubs"}} @onSelectAll={{action "selectAllSubmissions"}} @onUnselectAll={{action "deselectAllSubmissions"}} @showView={{showCustomSubmissionViewer}} />
+    <CustomSubmissionViewerList
+      @submissions={{submissionsPool}}
+      @selectedSubmissionIds={{customSubmissionIds}}
+      @onSelect={{action 'updateCustomSubs'}}
+      @onSelectAll={{action 'selectAllSubmissions'}}
+      @onUnselectAll={{action 'deselectAllSubmissions'}}
+      @showView={{showCustomSubmissionViewer}}
+    />
     {{!-- <ul>
     {{#each workspace.submissions.content as |submission|}}
       <li>
@@ -24,27 +41,59 @@
   {{/if}}
 </div>
 
-<div class="global-permissions">
-  <RadioGroup @options={{globalItems}} @selectedValue={{global}} @updateValue={{action "updateGlobal"}} />
+<div class='global-permissions'>
+  <Ui::RadioGroup
+    @options={{globalItems}}
+    @selectedValue={{global}}
+    @updateValue={{action 'updateGlobal'}}
+  />
   {{#if showCustom}}
-  <div class="custom-global-permissions">
-    <p class="input-label">
-      Configure Custom Permissions
-      <span class="info-text-tip simptip-position-right simptip-multiline simptip-smooth" data-tooltip="Decide user permissions for each aspect of this workspace">
-        <i class="fas fa-info-circle info-icon"></i>
-      </span>
-    </p>
-    <RadioGroup @options={{selectionItems}} @selectedValue={{selections}} @updateValue={{action "updateSelections"}} />
-    <RadioGroup @options={{commentItems}} @selectedValue={{comments}} @updateValue={{action "updateComments"}} />
-    <RadioGroup @options={{folderItems}} @selectedValue={{folders}} @updateValue={{action "updateFolders"}} />
-    <RadioGroup @options={{feedbackItems}} @selectedValue={{feedback}} @updateValue={{action "updateFeedback"}} />
-  </div>
+    <div class='custom-global-permissions'>
+      <p class='input-label'>
+        Configure Custom Permissions
+        <span
+          class='info-text-tip simptip-position-right simptip-multiline simptip-smooth'
+          data-tooltip='Decide user permissions for each aspect of this workspace'
+        >
+          <i class='fas fa-info-circle info-icon'></i>
+        </span>
+      </p>
+      <Ui::RadioGroup
+        @options={{selectionItems}}
+        @selectedValue={{selections}}
+        @updateValue={{action 'updateSelections'}}
+      />
+      <Ui::RadioGroup
+        @options={{commentItems}}
+        @selectedValue={{comments}}
+        @updateValue={{action 'updateComments'}}
+      />
+      <Ui::RadioGroup
+        @options={{folderItems}}
+        @selectedValue={{folders}}
+        @updateValue={{action 'updateFolders'}}
+      />
+      <Ui::RadioGroup
+        @options={{feedbackItems}}
+        @selectedValue={{feedback}}
+        @updateValue={{action 'updateFeedback'}}
+      />
+    </div>
   {{/if}}
 </div>
 
 {{#if saveError}}
-  <ErrorBox @error="Sorry, something went wrong. Please try again." @resetError={{action (mut saveError) null}} @showDismiss={{true}} />
+  <Ui::ErrorBox
+    @error='Sorry, something went wrong. Please try again.'
+    @resetError={{action (mut saveError) null}}
+    @showDismiss={{true}}
+  />
 {{/if}}
 
-<button class="primary-button cancel-button" type="button" {{action (mut selectedUser) null}}>Cancel</button>
-<button class="primary-button" type="button" {{action "savePermissions"}}>Save Permissions</button>
\ No newline at end of file
+<button
+  class='primary-button cancel-button'
+  type='button'
+  {{action (mut selectedUser) null}}
+>Cancel</button>
+<button class='primary-button' type='button' {{action 'savePermissions'}}>Save
+  Permissions</button>
\ No newline at end of file
diff --git a/app/templates/metrics/workspace.hbs b/app/templates/metrics/workspace.hbs
index caafb1bcd..d186b4b6e 100644
--- a/app/templates/metrics/workspace.hbs
+++ b/app/templates/metrics/workspace.hbs
@@ -9,7 +9,7 @@
               this.model.workspace.lastModifiedDate
               'MM/DD/YYYY'
             }}</span></h2>
-        <button id='metrics-workspace-button' type="button">
+        <button id='metrics-workspace-button' type='button'>
           <LinkTo
             @route='workspace.work'
             @model={{this.model.workspace.id}}
@@ -65,10 +65,13 @@
 
   <div class='metrics-container'>
     <div class='controls'>
-      <button type="button" {{on 'click' (fn this.handleToggle 'showCloud')}}>Generate
-        Wordcloud</button>
       <button
-        type="button" {{on 'click' (fn this.handleToggle 'showSubmissions')}}
+        type='button'
+        {{on 'click' (fn this.handleToggle 'showCloud')}}
+      >Generate Wordcloud</button>
+      <button
+        type='button'
+        {{on 'click' (fn this.handleToggle 'showSubmissions')}}
       >Submissions: {{this.model.workspace.submissionsLength}}</button>
     </div>
 
@@ -107,7 +110,7 @@
       </EmberTable>
     {{/if}}
 
-    <WordcloudContainer @showCloud={{this.showCloud}} @list={{this.list}} />
+    <Ui::WordcloudContainer @showCloud={{this.showCloud}} @list={{this.list}} />
   </div>
 
 </div>
\ No newline at end of file
diff --git a/app/templates/problems.hbs b/app/templates/problems.hbs
index 19c65d7af..4d221db82 100644
--- a/app/templates/problems.hbs
+++ b/app/templates/problems.hbs
@@ -1,8 +1,10 @@
 {{page-title 'Problems'}}
-<ProblemListContainer
-  @currentUser={{this.model.currentUser}}
-  @problems={{this.model.problems}}
-  @organizations={{this.model.organizations}}
-  @toProblemInfo='toProblemInfo'
-  @sendtoApplication='sendtoApplication'
-/>
\ No newline at end of file
+<div id='problem-list-container'>
+  <ProblemListContainer
+    @problems={{@model.problems}}
+    @organizations={{@model.organizations}}
+  />
+  <div class='list-outlet hidden' id='outlet'>
+    {{outlet}}
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/templates/problems/edit.hbs b/app/templates/problems/edit.hbs
new file mode 100644
index 000000000..eeeef5ff5
--- /dev/null
+++ b/app/templates/problems/edit.hbs
@@ -0,0 +1,14 @@
+{{page-title @model.problem.title}}
+<div id='problem-info' class='side-info'>
+  <ProblemInfo
+    @orgList={{@model.orgList}}
+    @recommendedProblems={{@model.recommendedProblems}}
+    @problem={{@model.problem}}
+    @sectionList={{@model.sectionList}}
+    @flaggedBy={{@model.flaggedBy}}
+    @flaggedDate={{@model.flaggedDate}}
+    @isEditing={{true}}
+    {{! from the query parameter, via the controller}}
+    @tab={{this.tab}}
+  />
+</div>
\ No newline at end of file
diff --git a/app/templates/problems/new.hbs b/app/templates/problems/new.hbs
index aec96a57d..f4286443d 100644
--- a/app/templates/problems/new.hbs
+++ b/app/templates/problems/new.hbs
@@ -1,4 +1,4 @@
-{{page-title "New Problem"}}
-<div id="problem-new" class="side-info">
-  <ProblemNew @store={{this.store}} @currentUser={{this.model.currentUser}} @toProblemInfo="toProblemInfo" @organizations={{this.model.organizations}} @toProblemList="toProblemList" />
+{{page-title 'New Problem'}}
+<div id='problem-new' class='side-info'>
+  <ProblemNew @organizations={{@model.organizations}} />
 </div>
\ No newline at end of file
diff --git a/app/templates/problems/problem.hbs b/app/templates/problems/problem.hbs
index cd8463c66..8d691dd27 100644
--- a/app/templates/problems/problem.hbs
+++ b/app/templates/problems/problem.hbs
@@ -1,12 +1,13 @@
-{{page-title this.model.problem.title}}
+{{page-title @model.problem.title}}
 <div id='problem-info' class='side-info'>
   <ProblemInfo
-    @orgList={{this.model.orgList}}
-    @recommendedProblems={{this.model.recommendedProblems}}
-    @problem={{this.model.problem}}
-    @sectionList={{this.model.sectionList}}
-    @currentUser={{this.model.currentUser}}
-    @flaggedBy={{this.model.flaggedBy}}
-    @flaggedDate={{this.model.flaggedDate}}
+    @orgList={{@model.orgList}}
+    @recommendedProblems={{@model.recommendedProblems}}
+    @problem={{@model.problem}}
+    @sectionList={{@model.sectionList}}
+    @flaggedBy={{@model.flaggedBy}}
+    @flaggedDate={{@model.flaggedDate}}
+    {{! from the query parameter, via the controller}}
+    @tab={{this.tab}}
   />
 </div>
\ No newline at end of file
diff --git a/app/templates/problems/problem/assignment.hbs b/app/templates/problems/problem/assignment.hbs
new file mode 100644
index 000000000..77511a8f1
--- /dev/null
+++ b/app/templates/problems/problem/assignment.hbs
@@ -0,0 +1,5 @@
+<AssignmentNew
+  @cancel={{this.handleHideAssignment}}
+  @showTitle={{true}}
+  @selectedProblem={{@model.problem}}
+/>
\ No newline at end of file
diff --git a/app/templates/unauthorized.hbs b/app/templates/unauthorized.hbs
index 212cdec83..84ba5c92f 100644
--- a/app/templates/unauthorized.hbs
+++ b/app/templates/unauthorized.hbs
@@ -1 +1 @@
-<UnAuthorized @organizations={{this.model}} />
\ No newline at end of file
+<UnAuthorized @organizations={{@model}} />
\ No newline at end of file
diff --git a/app/templates/users.hbs b/app/templates/users.hbs
index df2c9fa08..3a1d82b6a 100644
--- a/app/templates/users.hbs
+++ b/app/templates/users.hbs
@@ -1,12 +1,14 @@
 {{#if this.model.currentUser.isStudent}}
-  <div class="centered">FORBIDDEN</div>
+  <div class='centered'>FORBIDDEN</div>
 {{else}}
-  <UserList @currentUser={{this.model.currentUser}} @users={{this.model.users}} @organizations={{this.model.organiztions}} />
+  <UserList
+    @currentUser={{this.model.currentUser}}
+    @users={{this.model.users}}
+    @organizations={{this.model.organiztions}}
+    @trashedUsers={{this.model.trashedUsers}}
+  />
 {{/if}}
 
-
-
-<div class="list-outlet users">
+<div class='list-outlet users'>
   {{outlet}}
-</div>
-
+</div>
\ No newline at end of file
diff --git a/app/templates/users/user.hbs b/app/templates/users/user.hbs
index be06db807..d6aa3082f 100644
--- a/app/templates/users/user.hbs
+++ b/app/templates/users/user.hbs
@@ -1,4 +1,10 @@
 {{page-title this.model.user.username}}
-<div id="user-info">
-  <UserInfo @user={{this.model.user}} @refresh={{this.refresh}} @userSections={{this.model.userSections}} @currentUser={{this.model.currentUser}} @orgList={{this.model.organizations}} />
+<div id='user-info'>
+  <UserInfo
+    @user={{this.model.user}}
+    @refresh={{this.refresh}}
+    @userSections={{this.model.userSections}}
+    @currentUser={{this.model.currentUser}}
+    @orgList={{this.model.organizations}}
+  />
 </div>
\ No newline at end of file
diff --git a/app/templates/welcome.hbs b/app/templates/welcome.hbs
index 22409c639..b6041e6e0 100644
--- a/app/templates/welcome.hbs
+++ b/app/templates/welcome.hbs
@@ -83,7 +83,11 @@
     <img src='/assets/images/nsf_logo.png' />
   </div>
   <div class='footerNote'>
-    <p><a href='https://encompassmath.org/' target='_blank' rel="noopener noreferrer">EnCoMPASS</a>
+    <p><a
+        href='https://encompassmath.org/'
+        target='_blank'
+        rel='noopener noreferrer'
+      >EnCoMPASS</a>
       is part of the Online Reflection and Community-based Instructional
       Development System for Mathematics Education (ORCIDS), an NSF-funded
       collaboration between Drexel University, California State University San
@@ -91,16 +95,17 @@
       Maintained by
       <a
         href='https://www.21pstem.org/encompass'
-        target='_blank' rel="noopener noreferrer"
+        target='_blank'
+        rel='noopener noreferrer'
       >21PSTEM.org</a>
       This material is based upon work supported by the National Science
       Foundation under Grant No. 2010306. Any opinions, findings, and
       conclusions or recommendations expressed in this material are those of the
       author(s) and do not necessarily reflect the views of the National Science
       Foundation. EnCoMPASS version
-      {{this.version}}
+      {{this.model.version}}
       last updated on
-      {{this.buildDate}}.
+      {{this.model.buildDate}}.
 
     </p>
   </div>
diff --git a/app/templates/workspace/info.hbs b/app/templates/workspace/info.hbs
index 7642e06e1..701a84dc5 100644
--- a/app/templates/workspace/info.hbs
+++ b/app/templates/workspace/info.hbs
@@ -1,5 +1,5 @@
-{{page-title this.model.workspace.name}}
+{{page-title @model.workspace.name}}
 <WorkspaceInfo
-  @workspace={{this.model.workspace}}
-  @originalCollaborators={{this.model.originalCollaborators}}
+  @workspace={{@model.workspace}}
+  @originalCollaborators={{@model.originalCollaborators}}
 />
\ No newline at end of file
diff --git a/app_server/datasource/schemas/problem.js b/app_server/datasource/schemas/problem.js
index 5cb8c415a..c175dd00c 100644
--- a/app_server/datasource/schemas/problem.js
+++ b/app_server/datasource/schemas/problem.js
@@ -33,7 +33,7 @@ var ProblemSchema = new Schema(
     organization: { type: ObjectId, ref: 'Organization' },
     categories: [{ type: ObjectId, ref: 'Category' }],
     keywords: [{ type: String }],
-    isUsed: { type: Boolean, default: false },
+    isUsed: { type: Boolean, default: false }, // indicates if a problem has associated answers
     status: { type: String, enum: ['approved', 'pending', 'flagged'] },
     flagReason: {
       flaggedBy: { type: ObjectId, ref: 'User' },
diff --git a/ember-cli-build.js b/ember-cli-build.js
index b0b3a9f1e..961541d4b 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -11,16 +11,12 @@ module.exports = function (defaults) {
 
   app.import('vendor/image-tagging.js');
   app.import('vendor/selection-highlighting.js');
-  app.import('vendor/bind.polyfill.js');
   /*
    * These are the dependencies for an Ember application
    * and they have to be loaded before any application code.
    */
-  app.import('vendor/jquery.cookie.js');
-  app.import('vendor/tree.jquery.js');
 
   app.import('vendor/guiders.js');
-  app.import('vendor/jq.keys.js');
   app.import('vendor/validate.min.js');
   app.import('vendor/dropzone.js');
 
diff --git a/jsconfig.json b/jsconfig.json
index a178f9dcd..2c6ea1dc7 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,5 +1,10 @@
 {
   "compilerOptions": {
     "experimentalDecorators": true
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "vendor",
+    "dist"
+  ]
 }
\ No newline at end of file
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/tests/integration/.gitkeep b/tests/integration/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/tests/integration/components/problem-list-container-test.js b/tests/integration/components/problem-list-container-test.js
index 0656cb00f..bd434fc75 100644
--- a/tests/integration/components/problem-list-container-test.js
+++ b/tests/integration/components/problem-list-container-test.js
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, click, findAll } from '@ember/test-helpers';
+import { render, click, findAll, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import Service from '@ember/service';
 
@@ -39,7 +39,6 @@ module('Integration | Component | problem-list-container', function (hooks) {
     );
 
     await render(hbs`<ProblemListContainer @model={{this.model}} />`);
-    console.log(this.element.innerHTML);
     // Verify the error messages are displayed
     const errors = findAll('.error-message');
     assert.strictEqual(errors.length, 2, 'Displays two error messages');
@@ -71,8 +70,8 @@ module('Integration | Component | problem-list-container', function (hooks) {
     // Remove errors
     errorHandling.removeMessages('problemLoadErrors');
 
-    // Trigger re-render by interacting with the component
-    await click('.refresh-icon');
+    // Trigger a full re-render of the component
+    await settled();
 
     // Verify the error is removed
     assert.dom('.error-message').doesNotExist('Error message is removed');
@@ -102,23 +101,30 @@ module('Integration | Component | problem-list-container', function (hooks) {
 
   test('it applies filters using the input-state service', async function (assert) {
     const inputState = this.owner.lookup('service:input-state');
+    const currentUserService = this.owner.lookup('service:current-user');
+
+    // Set the current user in the current-user service
+    currentUserService.setUser({
+      organization: { id: 'myOrg', get: () => [] },
+    });
 
+    // Render the component
     await render(hbs`<ProblemListContainer @model={{this.model}} />`);
 
-    // Update the selection in input-state
-    inputState.states['problem-filter'].selectedOption = inputState.states[
-      'problem-filter'
-    ].options.find((option) => option.value === 'myOrg');
+    // Update the selection in input-state using setSelection
+    inputState.setSelection('problem-filter', 'myOrg');
 
     // Trigger the fetch to apply the new filter
-    await click('.refresh-icon');
+    await settled();
 
     const filterBy = inputState.getFilter('problem-filter');
+
+    // Ensure that the filter is applied correctly
     assert.deepEqual(
       filterBy,
       {
-        organization: this.owner.lookup('service:current-user').user
-          .organization.id,
+        organization: currentUserService.user.organization.id,
+        $or: [{ organization: 'myOrg' }],
       },
       'The filter is applied correctly'
     );
@@ -140,10 +146,7 @@ module('Integration | Component | problem-list-container', function (hooks) {
     // Verify initial message
     assert
       .dom('.results-message')
-      .hasText(
-        'No results found. Please try expanding your filter criteria.',
-        'Displays the correct initial message'
-      );
+      .hasText('0 problems found', 'Displays the correct initial message');
 
     // Set a valid filter
     inputState.states['problem-filter'].selectedOption = inputState.states[
@@ -155,7 +158,7 @@ module('Integration | Component | problem-list-container', function (hooks) {
     // Check the updated results message
     assert
       .dom('.results-message')
-      .doesNotHaveText(
+      .doesNotIncludeText(
         'No results found. Please try expanding your filter criteria.',
         'The error message is no longer displayed after applying a valid filter'
       );
diff --git a/tests/unit/.gitkeep b/tests/unit/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/troubleshooting.md b/troubleshooting.md
index f2ef65fe8..85240f7fa 100644
--- a/troubleshooting.md
+++ b/troubleshooting.md
@@ -20,7 +20,7 @@
 
 # store query is immutable
 
-- convert to array with `.toArray()`
+- convert to array with `.slice()`
 
 # tables use [Ember Table](https://opensource.addepar.com/ember-table/docs)
 
diff --git a/vendor/.gitkeep b/vendor/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/vendor/bind.polyfill.js b/vendor/bind.polyfill.js
deleted file mode 100644
index ad864d8dd..000000000
--- a/vendor/bind.polyfill.js
+++ /dev/null
@@ -1,10 +0,0 @@
-//http://ryanmorr.com/understanding-scope-and-context-in-javascript/
-//this is used in the workspace listings and apparently phantomjs doesn't have it
-if(!('bind' in Function.prototype)){
-    Function.prototype.bind = function(){
-        var fn = this, context = arguments[0], args = Array.prototype.slice.call(arguments, 1);
-        return function(){
-            return fn.apply(context, args.concat(Array.prototype.slice.call(arguments)));
-        }
-    }
-}
diff --git a/vendor/jq.keys.js b/vendor/jq.keys.js
deleted file mode 100644
index 81468cd8c..000000000
--- a/vendor/jq.keys.js
+++ /dev/null
@@ -1,11 +0,0 @@
-$(document).keydown(function(e){
-  if(!($(e.target).is('textarea') || $(e.target).is('input'))) {
-    if(e.keyCode === 37) {
-      $('#leftArrow').click();
-    }
-    if(e.keyCode === 39) {
-      $('#rightArrow').click();
-    }
-  }
-  return true;
-});
diff --git a/vendor/jquery.cookie.js b/vendor/jquery.cookie.js
deleted file mode 100644
index 927190008..000000000
--- a/vendor/jquery.cookie.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/*!
- * jQuery Cookie Plugin v1.4.0
- * https://github.com/carhartl/jquery-cookie
- *
- * Copyright 2013 Klaus Hartl
- * Released under the MIT license
- */
-(function (factory) {
-	if (typeof define === 'function' && define.amd) {
-		// AMD. Register as anonymous module.
-		define(['jquery'], factory);
-	} else {
-		// Browser globals.
-		factory(jQuery);
-	}
-}(function ($) {
-
-	var pluses = /\+/g;
-
-	function encode(s) {
-		return config.raw ? s : encodeURIComponent(s);
-	}
-
-	function decode(s) {
-		return config.raw ? s : decodeURIComponent(s);
-	}
-
-	function stringifyCookieValue(value) {
-		return encode(config.json ? JSON.stringify(value) : String(value));
-	}
-
-	function parseCookieValue(s) {
-		if (s.indexOf('"') === 0) {
-			// This is a quoted cookie as according to RFC2068, unescape...
-			s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
-		}
-
-		try {
-			// Replace server-side written pluses with spaces.
-			// If we can't decode the cookie, ignore it, it's unusable.
-			s = decodeURIComponent(s.replace(pluses, ' '));
-		} catch(e) {
-			return;
-		}
-
-		try {
-			// If we can't parse the cookie, ignore it, it's unusable.
-			return config.json ? JSON.parse(s) : s;
-		} catch(e) {}
-	}
-
-	function read(s, converter) {
-		var value = config.raw ? s : parseCookieValue(s);
-		return $.isFunction(converter) ? converter(value) : value;
-	}
-
-	var config = $.cookie = function (key, value, options) {
-
-		// Write
-		if (value !== undefined && !$.isFunction(value)) {
-			options = $.extend({}, config.defaults, options);
-
-			if (typeof options.expires === 'number') {
-				var days = options.expires, t = options.expires = new Date();
-				t.setDate(t.getDate() + days);
-			}
-
-			return (document.cookie = [
-				encode(key), '=', stringifyCookieValue(value),
-				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
-				options.path    ? '; path=' + options.path : '',
-				options.domain  ? '; domain=' + options.domain : '',
-				options.secure  ? '; secure' : ''
-			].join(''));
-		}
-
-		// Read
-
-		var result = key ? undefined : {};
-
-		// To prevent the for loop in the first place assign an empty array
-		// in case there are no cookies at all. Also prevents odd result when
-		// calling $.cookie().
-		var cookies = document.cookie ? document.cookie.split('; ') : [];
-
-		for (var i = 0, l = cookies.length; i < l; i++) {
-			var parts = cookies[i].split('=');
-			var name = decode(parts.shift());
-			var cookie = parts.join('=');
-
-			if (key && key === name) {
-				// If second argument (value) is a function it's a converter...
-				result = read(cookie, value);
-				break;
-			}
-
-			// Prevent storing a cookie that we couldn't decode.
-			if (!key && (cookie = read(cookie)) !== undefined) {
-				result[name] = cookie;
-			}
-		}
-
-		return result;
-	};
-
-	config.defaults = {};
-
-	$.removeCookie = function (key, options) {
-		if ($.cookie(key) !== undefined) {
-			// Must not alter options, thus extending a fresh object...
-			$.cookie(key, '', $.extend({}, options, { expires: -1 }));
-			return true;
-		}
-		return false;
-	};
-
-}));
diff --git a/vendor/tree.jquery.js b/vendor/tree.jquery.js
deleted file mode 100755
index 9398faf06..000000000
--- a/vendor/tree.jquery.js
+++ /dev/null
@@ -1,2765 +0,0 @@
-// Generated by CoffeeScript 1.6.3
-/*
-Copyright 2013 Marco Braak
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-
-(function() {
-  var $, BorderDropHint, DragAndDropHandler, DragElement, FolderElement, GhostDropHint, HitAreasGenerator, JqTreeWidget, KeyHandler, MouseWidget, Node, NodeElement, Position, SaveStateHandler, ScrollHandler, SelectNodeHandler, SimpleWidget, VisibleNodeIterator, html_escape, indexOf, json_escapable, json_meta, json_quote, json_str, _indexOf, _ref, _ref1, _ref2,
-    __slice = [].slice,
-    __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-  $ = this.jQuery;
-
-  SimpleWidget = (function() {
-    SimpleWidget.prototype.defaults = {};
-
-    function SimpleWidget(el, options) {
-      this.$el = $(el);
-      this.options = $.extend({}, this.defaults, options);
-    }
-
-    SimpleWidget.prototype.destroy = function() {
-      return this._deinit();
-    };
-
-    SimpleWidget.prototype._init = function() {
-      return null;
-    };
-
-    SimpleWidget.prototype._deinit = function() {
-      return null;
-    };
-
-    SimpleWidget.register = function(widget_class, widget_name) {
-      var callFunction, createWidget, destroyWidget, getDataKey;
-      getDataKey = function() {
-        return "simple_widget_" + widget_name;
-      };
-      createWidget = function($el, options) {
-        var data_key, el, widget, _i, _len;
-        data_key = getDataKey();
-        for (_i = 0, _len = $el.length; _i < _len; _i++) {
-          el = $el[_i];
-          widget = new widget_class(el, options);
-          if (!$.data(el, data_key)) {
-            $.data(el, data_key, widget);
-          }
-          widget._init();
-        }
-        return $el;
-      };
-      destroyWidget = function($el) {
-        var data_key, el, widget, _i, _len, _results;
-        data_key = getDataKey();
-        _results = [];
-        for (_i = 0, _len = $el.length; _i < _len; _i++) {
-          el = $el[_i];
-          widget = $.data(el, data_key);
-          if (widget && (widget instanceof SimpleWidget)) {
-            widget.destroy();
-          }
-          _results.push($.removeData(el, data_key));
-        }
-        return _results;
-      };
-      callFunction = function($el, function_name, args) {
-        var el, result, widget, widget_function, _i, _len;
-        result = null;
-        for (_i = 0, _len = $el.length; _i < _len; _i++) {
-          el = $el[_i];
-          widget = $.data(el, getDataKey());
-          if (widget && (widget instanceof SimpleWidget)) {
-            widget_function = widget[function_name];
-            if (widget_function && (typeof widget_function === 'function')) {
-              result = widget_function.apply(widget, args);
-            }
-          }
-        }
-        return result;
-      };
-      return $.fn[widget_name] = function() {
-        var $el, args, argument1, function_name, options;
-        argument1 = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
-        $el = this;
-        if (argument1 === void 0 || typeof argument1 === 'object') {
-          options = argument1;
-          return createWidget($el, options);
-        } else if (typeof argument1 === 'string' && argument1[0] !== '_') {
-          function_name = argument1;
-          if (function_name === 'destroy') {
-            return destroyWidget($el);
-          } else {
-            return callFunction($el, function_name, args);
-          }
-        }
-      };
-    };
-
-    return SimpleWidget;
-
-  })();
-
-  this.SimpleWidget = SimpleWidget;
-
-  /*
-  This widget does the same a the mouse widget in jqueryui.
-  */
-
-
-  MouseWidget = (function(_super) {
-    __extends(MouseWidget, _super);
-
-    function MouseWidget() {
-      _ref = MouseWidget.__super__.constructor.apply(this, arguments);
-      return _ref;
-    }
-
-    MouseWidget.is_mouse_handled = false;
-
-    MouseWidget.prototype._init = function() {
-      this.$el.bind('mousedown.mousewidget', $.proxy(this._mouseDown, this));
-      this.$el.bind('touchstart.mousewidget', $.proxy(this._touchStart, this));
-      this.is_mouse_started = false;
-      this.mouse_delay = 0;
-      this._mouse_delay_timer = null;
-      this._is_mouse_delay_met = true;
-      return this.mouse_down_info = null;
-    };
-
-    MouseWidget.prototype._deinit = function() {
-      var $document;
-      this.$el.unbind('mousedown.mousewidget');
-      this.$el.unbind('touchstart.mousewidget');
-      $document = $(document);
-      $document.unbind('mousemove.mousewidget');
-      return $document.unbind('mouseup.mousewidget');
-    };
-
-    MouseWidget.prototype._mouseDown = function(e) {
-      var result;
-      if (e.which !== 1) {
-        return;
-      }
-      result = this._handleMouseDown(e, this._getPositionInfo(e));
-      if (result) {
-        e.preventDefault();
-      }
-      return result;
-    };
-
-    MouseWidget.prototype._handleMouseDown = function(e, position_info) {
-      if (MouseWidget.is_mouse_handled) {
-        return;
-      }
-      if (this.is_mouse_started) {
-        this._handleMouseUp(position_info);
-      }
-      this.mouse_down_info = position_info;
-      if (!this._mouseCapture(position_info)) {
-        return;
-      }
-      this._handleStartMouse();
-      this.is_mouse_handled = true;
-      return true;
-    };
-
-    MouseWidget.prototype._handleStartMouse = function() {
-      var $document;
-      $document = $(document);
-      $document.bind('mousemove.mousewidget', $.proxy(this._mouseMove, this));
-      $document.bind('touchmove.mousewidget', $.proxy(this._touchMove, this));
-      $document.bind('mouseup.mousewidget', $.proxy(this._mouseUp, this));
-      $document.bind('touchend.mousewidget', $.proxy(this._touchEnd, this));
-      if (this.mouse_delay) {
-        return this._startMouseDelayTimer();
-      }
-    };
-
-    MouseWidget.prototype._startMouseDelayTimer = function() {
-      var _this = this;
-      if (this._mouse_delay_timer) {
-        clearTimeout(this._mouse_delay_timer);
-      }
-      this._mouse_delay_timer = setTimeout(function() {
-        return _this._is_mouse_delay_met = true;
-      }, this.mouse_delay);
-      return this._is_mouse_delay_met = false;
-    };
-
-    MouseWidget.prototype._mouseMove = function(e) {
-      return this._handleMouseMove(e, this._getPositionInfo(e));
-    };
-
-    MouseWidget.prototype._handleMouseMove = function(e, position_info) {
-      if (this.is_mouse_started) {
-        this._mouseDrag(position_info);
-        return e.preventDefault();
-      }
-      if (this.mouse_delay && !this._is_mouse_delay_met) {
-        return true;
-      }
-      this.is_mouse_started = this._mouseStart(this.mouse_down_info) !== false;
-      if (this.is_mouse_started) {
-        this._mouseDrag(position_info);
-      } else {
-        this._handleMouseUp(position_info);
-      }
-      return !this.is_mouse_started;
-    };
-
-    MouseWidget.prototype._getPositionInfo = function(e) {
-      return {
-        page_x: e.pageX,
-        page_y: e.pageY,
-        target: e.target,
-        original_event: e
-      };
-    };
-
-    MouseWidget.prototype._mouseUp = function(e) {
-      return this._handleMouseUp(this._getPositionInfo(e));
-    };
-
-    MouseWidget.prototype._handleMouseUp = function(position_info) {
-      var $document;
-      $document = $(document);
-      $document.unbind('mousemove.mousewidget');
-      $document.unbind('touchmove.mousewidget');
-      $document.unbind('mouseup.mousewidget');
-      $document.unbind('touchend.mousewidget');
-      if (this.is_mouse_started) {
-        this.is_mouse_started = false;
-        this._mouseStop(position_info);
-      }
-    };
-
-    MouseWidget.prototype._mouseCapture = function(position_info) {
-      return true;
-    };
-
-    MouseWidget.prototype._mouseStart = function(position_info) {
-      return null;
-    };
-
-    MouseWidget.prototype._mouseDrag = function(position_info) {
-      return null;
-    };
-
-    MouseWidget.prototype._mouseStop = function(position_info) {
-      return null;
-    };
-
-    MouseWidget.prototype.setMouseDelay = function(mouse_delay) {
-      return this.mouse_delay = mouse_delay;
-    };
-
-    MouseWidget.prototype._touchStart = function(e) {
-      var touch;
-      if (e.originalEvent.touches.length > 1) {
-        return;
-      }
-      touch = e.originalEvent.changedTouches[0];
-      return this._handleMouseDown(e, this._getPositionInfo(touch));
-    };
-
-    MouseWidget.prototype._touchMove = function(e) {
-      var touch;
-      if (e.originalEvent.touches.length > 1) {
-        return;
-      }
-      touch = e.originalEvent.changedTouches[0];
-      return this._handleMouseMove(e, this._getPositionInfo(touch));
-    };
-
-    MouseWidget.prototype._touchEnd = function(e) {
-      var touch;
-      if (e.originalEvent.touches.length > 1) {
-        return;
-      }
-      touch = e.originalEvent.changedTouches[0];
-      return this._handleMouseUp(this._getPositionInfo(touch));
-    };
-
-    return MouseWidget;
-
-  })(SimpleWidget);
-
-  this.Tree = {};
-
-  $ = this.jQuery;
-
-  Position = {
-    getName: function(position) {
-      return Position.strings[position - 1];
-    },
-    nameToIndex: function(name) {
-      var i, _i, _ref1;
-      for (i = _i = 1, _ref1 = Position.strings.length; 1 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 1 <= _ref1 ? ++_i : --_i) {
-        if (Position.strings[i - 1] === name) {
-          return i;
-        }
-      }
-      return 0;
-    }
-  };
-
-  Position.BEFORE = 1;
-
-  Position.AFTER = 2;
-
-  Position.INSIDE = 3;
-
-  Position.NONE = 4;
-
-  Position.strings = ['before', 'after', 'inside', 'none'];
-
-  this.Tree.Position = Position;
-
-  Node = (function() {
-    function Node(o, is_root, node_class) {
-      if (is_root == null) {
-        is_root = false;
-      }
-      if (node_class == null) {
-        node_class = Node;
-      }
-      this.setData(o);
-      this.children = [];
-      this.parent = null;
-      if (is_root) {
-        this.id_mapping = {};
-        this.tree = this;
-        this.node_class = node_class;
-      }
-    }
-
-    Node.prototype.setData = function(o) {
-      var key, value, _results;
-      if (typeof o !== 'object') {
-        return this.name = o;
-      } else {
-        _results = [];
-        for (key in o) {
-          value = o[key];
-          if (key === 'label') {
-            _results.push(this.name = value);
-          } else {
-            _results.push(this[key] = value);
-          }
-        }
-        return _results;
-      }
-    };
-
-    Node.prototype.initFromData = function(data) {
-      var addChildren, addNode,
-        _this = this;
-      addNode = function(node_data) {
-        _this.setData(node_data);
-        if (node_data.children) {
-          return addChildren(node_data.children);
-        }
-      };
-      addChildren = function(children_data) {
-        var child, node, _i, _len;
-        for (_i = 0, _len = children_data.length; _i < _len; _i++) {
-          child = children_data[_i];
-          node = new _this.tree.node_class('');
-          node.initFromData(child);
-          _this.addChild(node);
-        }
-        return null;
-      };
-      addNode(data);
-      return null;
-    };
-
-    /*
-    Create tree from data.
-    
-    Structure of data is:
-    [
-        {
-            label: 'node1',
-            children: [
-                { label: 'child1' },
-                { label: 'child2' }
-            ]
-        },
-        {
-            label: 'node2'
-        }
-    ]
-    */
-
-
-    Node.prototype.loadFromData = function(data) {
-      var node, o, _i, _len;
-      this.removeChildren();
-      for (_i = 0, _len = data.length; _i < _len; _i++) {
-        o = data[_i];
-        node = new this.tree.node_class(o);
-        this.addChild(node);
-        if (typeof o === 'object' && o.children) {
-          node.loadFromData(o.children);
-        }
-      }
-      return null;
-    };
-
-    /*
-    Add child.
-    
-    tree.addChild(
-        new Node('child1')
-    );
-    */
-
-
-    Node.prototype.addChild = function(node) {
-      this.children.push(node);
-      return node._setParent(this);
-    };
-
-    /*
-    Add child at position. Index starts at 0.
-    
-    tree.addChildAtPosition(
-        new Node('abc'),
-        1
-    );
-    */
-
-
-    Node.prototype.addChildAtPosition = function(node, index) {
-      this.children.splice(index, 0, node);
-      return node._setParent(this);
-    };
-
-    Node.prototype._setParent = function(parent) {
-      this.parent = parent;
-      this.tree = parent.tree;
-      return this.tree.addNodeToIndex(this);
-    };
-
-    /*
-    Remove child. This also removes the children of the node.
-    
-    tree.removeChild(tree.children[0]);
-    */
-
-
-    Node.prototype.removeChild = function(node) {
-      node.removeChildren();
-      return this._removeChild(node);
-    };
-
-    Node.prototype._removeChild = function(node) {
-      this.children.splice(this.getChildIndex(node), 1);
-      return this.tree.removeNodeFromIndex(node);
-    };
-
-    /*
-    Get child index.
-    
-    var index = getChildIndex(node);
-    */
-
-
-    Node.prototype.getChildIndex = function(node) {
-      return $.inArray(node, this.children);
-    };
-
-    /*
-    Does the tree have children?
-    
-    if (tree.hasChildren()) {
-        //
-    }
-    */
-
-
-    Node.prototype.hasChildren = function() {
-      return this.children.length !== 0;
-    };
-
-    Node.prototype.isFolder = function() {
-      return this.hasChildren() || this.load_on_demand;
-    };
-
-    /*
-    Iterate over all the nodes in the tree.
-    
-    Calls callback with (node, level).
-    
-    The callback must return true to continue the iteration on current node.
-    
-    tree.iterate(
-        function(node, level) {
-           console.log(node.name);
-    
-           // stop iteration after level 2
-           return (level <= 2);
-        }
-    );
-    */
-
-
-    Node.prototype.iterate = function(callback) {
-      var _iterate,
-        _this = this;
-      _iterate = function(node, level) {
-        var child, result, _i, _len, _ref1;
-        if (node.children) {
-          _ref1 = node.children;
-          for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
-            child = _ref1[_i];
-            result = callback(child, level);
-            if (_this.hasChildren() && result) {
-              _iterate(child, level + 1);
-            }
-          }
-          return null;
-        }
-      };
-      _iterate(this, 0);
-      return null;
-    };
-
-    /*
-    Move node relative to another node.
-    
-    Argument position: Position.BEFORE, Position.AFTER or Position.Inside
-    
-    // move node1 after node2
-    tree.moveNode(node1, node2, Position.AFTER);
-    */
-
-
-    Node.prototype.moveNode = function(moved_node, target_node, position) {
-      if (moved_node.isParentOf(target_node)) {
-        return;
-      }
-      moved_node.parent._removeChild(moved_node);
-      if (position === Position.AFTER) {
-        return target_node.parent.addChildAtPosition(moved_node, target_node.parent.getChildIndex(target_node) + 1);
-      } else if (position === Position.BEFORE) {
-        return target_node.parent.addChildAtPosition(moved_node, target_node.parent.getChildIndex(target_node));
-      } else if (position === Position.INSIDE) {
-        return target_node.addChildAtPosition(moved_node, 0);
-      }
-    };
-
-    /*
-    Get the tree as data.
-    */
-
-
-    Node.prototype.getData = function() {
-      var getDataFromNodes,
-        _this = this;
-      getDataFromNodes = function(nodes) {
-        var data, k, node, tmp_node, v, _i, _len;
-        data = [];
-        for (_i = 0, _len = nodes.length; _i < _len; _i++) {
-          node = nodes[_i];
-          tmp_node = {};
-          for (k in node) {
-            v = node[k];
-            if ((k !== 'parent' && k !== 'children' && k !== 'element' && k !== 'tree') && Object.prototype.hasOwnProperty.call(node, k)) {
-              tmp_node[k] = v;
-            }
-          }
-          if (node.hasChildren()) {
-            tmp_node.children = getDataFromNodes(node.children);
-          }
-          data.push(tmp_node);
-        }
-        return data;
-      };
-      return getDataFromNodes(this.children);
-    };
-
-    Node.prototype.getNodeByName = function(name) {
-      var result;
-      result = null;
-      this.iterate(function(node) {
-        if (node.name === name) {
-          result = node;
-          return false;
-        } else {
-          return true;
-        }
-      });
-      return result;
-    };
-
-    Node.prototype.addAfter = function(node_info) {
-      var child_index, node;
-      if (!this.parent) {
-        return null;
-      } else {
-        node = new this.tree.node_class(node_info);
-        child_index = this.parent.getChildIndex(this);
-        this.parent.addChildAtPosition(node, child_index + 1);
-        return node;
-      }
-    };
-
-    Node.prototype.addBefore = function(node_info) {
-      var child_index, node;
-      if (!this.parent) {
-        return null;
-      } else {
-        node = new this.tree.node_class(node_info);
-        child_index = this.parent.getChildIndex(this);
-        this.parent.addChildAtPosition(node, child_index);
-        return node;
-      }
-    };
-
-    Node.prototype.addParent = function(node_info) {
-      var child, new_parent, original_parent, _i, _len, _ref1;
-      if (!this.parent) {
-        return null;
-      } else {
-        new_parent = new this.tree.node_class(node_info);
-        new_parent._setParent(this.tree);
-        original_parent = this.parent;
-        _ref1 = original_parent.children;
-        for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
-          child = _ref1[_i];
-          new_parent.addChild(child);
-        }
-        original_parent.children = [];
-        original_parent.addChild(new_parent);
-        return new_parent;
-      }
-    };
-
-    Node.prototype.remove = function() {
-      if (this.parent) {
-        this.parent.removeChild(this);
-        return this.parent = null;
-      }
-    };
-
-    Node.prototype.append = function(node_info) {
-      var node;
-      node = new this.tree.node_class(node_info);
-      this.addChild(node);
-      return node;
-    };
-
-    Node.prototype.prepend = function(node_info) {
-      var node;
-      node = new this.tree.node_class(node_info);
-      this.addChildAtPosition(node, 0);
-      return node;
-    };
-
-    Node.prototype.isParentOf = function(node) {
-      var parent;
-      parent = node.parent;
-      while (parent) {
-        if (parent === this) {
-          return true;
-        }
-        parent = parent.parent;
-      }
-      return false;
-    };
-
-    Node.prototype.getLevel = function() {
-      var level, node;
-      level = 0;
-      node = this;
-      while (node.parent) {
-        level += 1;
-        node = node.parent;
-      }
-      return level;
-    };
-
-    Node.prototype.getNodeById = function(node_id) {
-      return this.id_mapping[node_id];
-    };
-
-    Node.prototype.addNodeToIndex = function(node) {
-      if (node.id != null) {
-        return this.id_mapping[node.id] = node;
-      }
-    };
-
-    Node.prototype.removeNodeFromIndex = function(node) {
-      if (node.id != null) {
-        return delete this.id_mapping[node.id];
-      }
-    };
-
-    Node.prototype.removeChildren = function() {
-      var _this = this;
-      this.iterate(function(child) {
-        _this.tree.removeNodeFromIndex(child);
-        return true;
-      });
-      return this.children = [];
-    };
-
-    Node.prototype.getPreviousSibling = function() {
-      var previous_index;
-      if (!this.parent) {
-        return null;
-      } else {
-        previous_index = this.parent.getChildIndex(this) - 1;
-        if (previous_index >= 0) {
-          return this.parent.children[previous_index];
-        } else {
-          return null;
-        }
-      }
-    };
-
-    Node.prototype.getNextSibling = function() {
-      var next_index;
-      if (!this.parent) {
-        return null;
-      } else {
-        next_index = this.parent.getChildIndex(this) + 1;
-        if (next_index < this.parent.children.length) {
-          return this.parent.children[next_index];
-        } else {
-          return null;
-        }
-      }
-    };
-
-    return Node;
-
-  })();
-
-  this.Tree.Node = Node;
-
-  /*
-  Copyright 2013 Marco Braak
-  
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-  
-      http://www.apache.org/licenses/LICENSE-2.0
-  
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-  */
-
-
-  JqTreeWidget = (function(_super) {
-    __extends(JqTreeWidget, _super);
-
-    function JqTreeWidget() {
-      _ref1 = JqTreeWidget.__super__.constructor.apply(this, arguments);
-      return _ref1;
-    }
-
-    JqTreeWidget.prototype.defaults = {
-      autoOpen: false,
-      saveState: false,
-      dragAndDrop: false,
-      selectable: true,
-      useContextMenu: true,
-      onCanSelectNode: null,
-      onSetStateFromStorage: null,
-      onGetStateFromStorage: null,
-      onCreateLi: null,
-      onIsMoveHandle: null,
-      onCanMove: null,
-      onCanMoveTo: null,
-      onLoadFailed: null,
-      autoEscape: true,
-      dataUrl: null,
-      closedIcon: '&#x25ba;',
-      openedIcon: '&#x25bc;',
-      slide: true,
-      nodeClass: Node,
-      dataFilter: null,
-      keyboardSupport: true
-    };
-
-    JqTreeWidget.prototype.toggle = function(node, slide) {
-      if (slide == null) {
-        slide = true;
-      }
-      if (node.is_open) {
-        return this.closeNode(node, slide);
-      } else {
-        return this.openNode(node, slide);
-      }
-    };
-
-    JqTreeWidget.prototype.getTree = function() {
-      return this.tree;
-    };
-
-    JqTreeWidget.prototype.selectNode = function(node) {
-      return this._selectNode(node, false);
-    };
-
-    JqTreeWidget.prototype._selectNode = function(node, must_toggle) {
-      var canSelect, deselected_node, openParents, saveState,
-        _this = this;
-      if (must_toggle == null) {
-        must_toggle = false;
-      }
-      if (!this.select_node_handler) {
-        return;
-      }
-      canSelect = function() {
-        if (_this.options.onCanSelectNode) {
-          return _this.options.selectable && _this.options.onCanSelectNode(node);
-        } else {
-          return _this.options.selectable;
-        }
-      };
-      openParents = function() {
-        var parent;
-        parent = node.parent;
-        if (parent && parent.parent && !parent.is_open) {
-          return _this.openNode(parent, false);
-        }
-      };
-      saveState = function() {
-        if (_this.options.saveState) {
-          return _this.save_state_handler.saveState();
-        }
-      };
-      if (!node) {
-        this._deselectCurrentNode();
-        saveState();
-        return;
-      }
-      if (!canSelect()) {
-        return;
-      }
-      if (this.select_node_handler.isNodeSelected(node)) {
-        if (must_toggle) {
-          this._deselectCurrentNode();
-          this._triggerEvent('tree.select', {
-            node: null,
-            previous_node: node
-          });
-        }
-      } else {
-        deselected_node = this.getSelectedNode();
-        this._deselectCurrentNode();
-        this.addToSelection(node);
-        this._triggerEvent('tree.select', {
-          node: node,
-          deselected_node: deselected_node
-        });
-        openParents();
-      }
-      return saveState();
-    };
-
-    JqTreeWidget.prototype.getSelectedNode = function() {
-      return this.select_node_handler.getSelectedNode();
-    };
-
-    JqTreeWidget.prototype.toJson = function() {
-      return JSON.stringify(this.tree.getData());
-    };
-
-    JqTreeWidget.prototype.loadData = function(data, parent_node) {
-      return this._loadData(data, parent_node);
-    };
-
-    JqTreeWidget.prototype.loadDataFromUrl = function(url, parent_node, on_finished) {
-      if ($.type(url) !== 'string') {
-        on_finished = parent_node;
-        parent_node = url;
-        url = null;
-      }
-      return this._loadDataFromUrl(url, parent_node, on_finished);
-    };
-
-    JqTreeWidget.prototype._loadDataFromUrl = function(url_info, parent_node, on_finished) {
-      var $el, addLoadingClass, parseUrlInfo, removeLoadingClass,
-        _this = this;
-      $el = null;
-      addLoadingClass = function() {
-        var folder_element;
-        if (!parent_node) {
-          $el = _this.element;
-        } else {
-          folder_element = new FolderElement(parent_node, _this);
-          $el = folder_element.getLi();
-        }
-        return $el.addClass('jqtree-loading');
-      };
-      removeLoadingClass = function() {
-        if ($el) {
-          return $el.removeClass('jqtree-loading');
-        }
-      };
-      parseUrlInfo = function() {
-        if ($.type(url_info) === 'string') {
-          url_info = {
-            url: url_info
-          };
-        }
-        if (!url_info.method) {
-          return url_info.method = 'get';
-        }
-      };
-      addLoadingClass();
-      if (!url_info) {
-        url_info = this._getDataUrlInfo(parent_node);
-      }
-      parseUrlInfo();
-      return $.ajax({
-        url: url_info.url,
-        data: url_info.data,
-        type: url_info.method.toUpperCase(),
-        cache: false,
-        dataType: 'json',
-        success: function(response) {
-          var data;
-          if ($.isArray(response) || typeof response === 'object') {
-            data = response;
-          } else {
-            data = $.parseJSON(response);
-          }
-          if (_this.options.dataFilter) {
-            data = _this.options.dataFilter(data);
-          }
-          removeLoadingClass();
-          _this._loadData(data, parent_node);
-          if (on_finished && $.isFunction(on_finished)) {
-            return on_finished();
-          }
-        },
-        error: function(response) {
-          removeLoadingClass();
-          if (_this.options.onLoadFailed) {
-            return _this.options.onLoadFailed(response);
-          }
-        }
-      });
-    };
-
-    JqTreeWidget.prototype._loadData = function(data, parent_node) {
-      var n, selected_nodes_under_parent, _i, _len;
-      this._triggerEvent('tree.load_data', {
-        tree_data: data
-      });
-      if (!parent_node) {
-        this._initTree(data);
-      } else {
-        selected_nodes_under_parent = this.select_node_handler.getSelectedNodes(parent_node);
-        for (_i = 0, _len = selected_nodes_under_parent.length; _i < _len; _i++) {
-          n = selected_nodes_under_parent[_i];
-          this.select_node_handler.removeFromSelection(n);
-        }
-        parent_node.loadFromData(data);
-        parent_node.load_on_demand = false;
-        this._refreshElements(parent_node.parent);
-      }
-      if (this.is_dragging) {
-        return this.dnd_handler.refreshHitAreas();
-      }
-    };
-
-    JqTreeWidget.prototype.getNodeById = function(node_id) {
-      return this.tree.getNodeById(node_id);
-    };
-
-    JqTreeWidget.prototype.getNodeByName = function(name) {
-      return this.tree.getNodeByName(name);
-    };
-
-    JqTreeWidget.prototype.openNode = function(node, slide) {
-      if (slide == null) {
-        slide = true;
-      }
-      return this._openNode(node, slide);
-    };
-
-    JqTreeWidget.prototype._openNode = function(node, slide, on_finished) {
-      var doOpenNode, parent,
-        _this = this;
-      if (slide == null) {
-        slide = true;
-      }
-      doOpenNode = function(_node, _slide, _on_finished) {
-        var folder_element;
-        folder_element = new FolderElement(_node, _this);
-        return folder_element.open(_on_finished, _slide);
-      };
-      if (node.isFolder()) {
-        if (node.load_on_demand) {
-          return this._loadFolderOnDemand(node, slide, on_finished);
-        } else {
-          parent = node.parent;
-          while (parent && !parent.is_open) {
-            if (parent.parent) {
-              doOpenNode(parent, false, null);
-            }
-            parent = parent.parent;
-          }
-          doOpenNode(node, slide, on_finished);
-          return this._saveState();
-        }
-      }
-    };
-
-    JqTreeWidget.prototype._loadFolderOnDemand = function(node, slide, on_finished) {
-      var _this = this;
-      if (slide == null) {
-        slide = true;
-      }
-      return this._loadDataFromUrl(null, node, function() {
-        return _this._openNode(node, slide, on_finished);
-      });
-    };
-
-    JqTreeWidget.prototype.closeNode = function(node, slide) {
-      if (slide == null) {
-        slide = true;
-      }
-      if (node.isFolder()) {
-        new FolderElement(node, this).close(slide);
-        return this._saveState();
-      }
-    };
-
-    JqTreeWidget.prototype.isDragging = function() {
-      return this.is_dragging;
-    };
-
-    JqTreeWidget.prototype.refreshHitAreas = function() {
-      return this.dnd_handler.refreshHitAreas();
-    };
-
-    JqTreeWidget.prototype.addNodeAfter = function(new_node_info, existing_node) {
-      var new_node;
-      new_node = existing_node.addAfter(new_node_info);
-      this._refreshElements(existing_node.parent);
-      return new_node;
-    };
-
-    JqTreeWidget.prototype.addNodeBefore = function(new_node_info, existing_node) {
-      var new_node;
-      new_node = existing_node.addBefore(new_node_info);
-      this._refreshElements(existing_node.parent);
-      return new_node;
-    };
-
-    JqTreeWidget.prototype.addParentNode = function(new_node_info, existing_node) {
-      var new_node;
-      new_node = existing_node.addParent(new_node_info);
-      this._refreshElements(new_node.parent);
-      return new_node;
-    };
-
-    JqTreeWidget.prototype.removeNode = function(node) {
-      var parent;
-      parent = node.parent;
-      if (parent) {
-        this.select_node_handler.removeFromSelection(node, true);
-        node.remove();
-        return this._refreshElements(parent.parent);
-      }
-    };
-
-    JqTreeWidget.prototype.appendNode = function(new_node_info, parent_node) {
-      var is_already_folder_node, node;
-      if (!parent_node) {
-        parent_node = this.tree;
-      }
-      is_already_folder_node = parent_node.isFolder();
-      node = parent_node.append(new_node_info);
-      if (is_already_folder_node) {
-        this._refreshElements(parent_node);
-      } else {
-        this._refreshElements(parent_node.parent);
-      }
-      return node;
-    };
-
-    JqTreeWidget.prototype.prependNode = function(new_node_info, parent_node) {
-      var node;
-      if (!parent_node) {
-        parent_node = this.tree;
-      }
-      node = parent_node.prepend(new_node_info);
-      this._refreshElements(parent_node);
-      return node;
-    };
-
-    JqTreeWidget.prototype.updateNode = function(node, data) {
-      var id_is_changed;
-      id_is_changed = data.id && data.id !== node.id;
-      if (id_is_changed) {
-        this.tree.removeNodeFromIndex(node);
-      }
-      node.setData(data);
-      if (id_is_changed) {
-        this.tree.addNodeToIndex(node);
-      }
-      this._refreshElements(node.parent);
-      return this._selectCurrentNode();
-    };
-
-    JqTreeWidget.prototype.moveNode = function(node, target_node, position) {
-      var position_index;
-      position_index = Position.nameToIndex(position);
-      this.tree.moveNode(node, target_node, position_index);
-      return this._refreshElements();
-    };
-
-    JqTreeWidget.prototype.getStateFromStorage = function() {
-      return this.save_state_handler.getStateFromStorage();
-    };
-
-    JqTreeWidget.prototype.addToSelection = function(node) {
-      this.select_node_handler.addToSelection(node);
-      return this._getNodeElementForNode(node).select();
-    };
-
-    JqTreeWidget.prototype.getSelectedNodes = function() {
-      return this.select_node_handler.getSelectedNodes();
-    };
-
-    JqTreeWidget.prototype.isNodeSelected = function(node) {
-      return this.select_node_handler.isNodeSelected(node);
-    };
-
-    JqTreeWidget.prototype.removeFromSelection = function(node) {
-      this.select_node_handler.removeFromSelection(node);
-      return this._getNodeElementForNode(node).deselect();
-    };
-
-    JqTreeWidget.prototype.scrollToNode = function(node) {
-      var $element, top;
-      $element = $(node.element);
-      top = $element.offset().top - this.$el.offset().top;
-      return this.scroll_handler.scrollTo(top);
-    };
-
-    JqTreeWidget.prototype.getState = function() {
-      return this.save_state_handler.getState();
-    };
-
-    JqTreeWidget.prototype.setState = function(state) {
-      this.save_state_handler.setState(state);
-      return this._refreshElements();
-    };
-
-    JqTreeWidget.prototype._init = function() {
-      JqTreeWidget.__super__._init.call(this);
-      this.element = this.$el;
-      this.mouse_delay = 300;
-      this.is_initialized = false;
-      if (typeof SaveStateHandler !== "undefined" && SaveStateHandler !== null) {
-        this.save_state_handler = new SaveStateHandler(this);
-      } else {
-        this.options.saveState = false;
-      }
-      if (typeof SelectNodeHandler !== "undefined" && SelectNodeHandler !== null) {
-        this.select_node_handler = new SelectNodeHandler(this);
-      }
-      if (typeof DragAndDropHandler !== "undefined" && DragAndDropHandler !== null) {
-        this.dnd_handler = new DragAndDropHandler(this);
-      } else {
-        this.options.dragAndDrop = false;
-      }
-      if (typeof ScrollHandler !== "undefined" && ScrollHandler !== null) {
-        this.scroll_handler = new ScrollHandler(this);
-      }
-      if ((typeof KeyHandler !== "undefined" && KeyHandler !== null) && (typeof SelectNodeHandler !== "undefined" && SelectNodeHandler !== null)) {
-        this.key_handler = new KeyHandler(this);
-      }
-      this._initData();
-      this.element.click($.proxy(this._click, this));
-      this.element.dblclick($.proxy(this._dblclick, this));
-      if (this.options.useContextMenu) {
-        return this.element.bind('contextmenu', $.proxy(this._contextmenu, this));
-      }
-    };
-
-    JqTreeWidget.prototype._deinit = function() {
-      this.element.empty();
-      this.element.unbind();
-      this.key_handler.deinit();
-      this.tree = null;
-      return JqTreeWidget.__super__._deinit.call(this);
-    };
-
-    JqTreeWidget.prototype._initData = function() {
-      if (this.options.data) {
-        return this._loadData(this.options.data);
-      } else {
-        return this._loadDataFromUrl(this._getDataUrlInfo());
-      }
-    };
-
-    JqTreeWidget.prototype._getDataUrlInfo = function(node) {
-      var data_url, getUrlFromString,
-        _this = this;
-      data_url = this.options.dataUrl || this.element.data('url');
-      getUrlFromString = function() {
-        var data, selected_node_id, url_info;
-        url_info = {
-          url: data_url
-        };
-        if (node && node.id) {
-          data = {
-            node: node.id
-          };
-          url_info['data'] = data;
-        } else {
-          selected_node_id = _this._getNodeIdToBeSelected();
-          if (selected_node_id) {
-            data = {
-              selected_node: selected_node_id
-            };
-            url_info['data'] = data;
-          }
-        }
-        return url_info;
-      };
-      if ($.isFunction(data_url)) {
-        return data_url(node);
-      } else if ($.type(data_url) === 'string') {
-        return getUrlFromString();
-      } else {
-        return data_url;
-      }
-    };
-
-    JqTreeWidget.prototype._getNodeIdToBeSelected = function() {
-      if (this.options.saveState) {
-        return this.save_state_handler.getNodeIdToBeSelected();
-      } else {
-        return null;
-      }
-    };
-
-    JqTreeWidget.prototype._initTree = function(data) {
-      this.tree = new this.options.nodeClass(null, true, this.options.nodeClass);
-      if (this.select_node_handler) {
-        this.select_node_handler.clear();
-      }
-      this.tree.loadFromData(data);
-      this._openNodes();
-      this._refreshElements();
-      if (!this.is_initialized) {
-        this.is_initialized = true;
-        return this._triggerEvent('tree.init');
-      }
-    };
-
-    JqTreeWidget.prototype._openNodes = function() {
-      var max_level;
-      if (this.options.saveState) {
-        if (this.save_state_handler.restoreState()) {
-          return;
-        }
-      }
-      if (this.options.autoOpen === false) {
-        return;
-      } else if (this.options.autoOpen === true) {
-        max_level = -1;
-      } else {
-        max_level = parseInt(this.options.autoOpen);
-      }
-      return this.tree.iterate(function(node, level) {
-        if (node.hasChildren()) {
-          node.is_open = true;
-        }
-        return level !== max_level;
-      });
-    };
-
-    JqTreeWidget.prototype._refreshElements = function(from_node) {
-      var $element, createFolderLi, createLi, createNodeLi, createUl, doCreateDomElements, escapeIfNecessary, is_root_node, node_element,
-        _this = this;
-      if (from_node == null) {
-        from_node = null;
-      }
-      escapeIfNecessary = function(value) {
-        if (_this.options.autoEscape) {
-          return html_escape(value);
-        } else {
-          return value;
-        }
-      };
-      createUl = function(is_root_node) {
-        var class_string;
-        if (is_root_node) {
-          class_string = 'jqtree-tree';
-        } else {
-          class_string = '';
-        }
-        return $("<ul class=\"jqtree_common " + class_string + "\"></ul>");
-      };
-      createLi = function(node) {
-        var $li;
-        if (node.isFolder()) {
-          $li = createFolderLi(node);
-        } else {
-          $li = createNodeLi(node);
-        }
-        if (_this.options.onCreateLi) {
-          _this.options.onCreateLi(node, $li);
-        }
-        return $li;
-      };
-      createNodeLi = function(node) {
-        var class_string, escaped_name, li_classes;
-        li_classes = ['jqtree_common'];
-        if (_this.select_node_handler && _this.select_node_handler.isNodeSelected(node)) {
-          li_classes.push('jqtree-selected');
-        }
-        class_string = li_classes.join(' ');
-        escaped_name = escapeIfNecessary(node.name);
-        return $("<li class=\"" + class_string + "\"><div class=\"jqtree-element jqtree_common\"><span class=\"jqtree-title jqtree_common\">" + escaped_name + "</span></div></li>");
-      };
-      createFolderLi = function(node) {
-        var button_char, button_classes, escaped_name, folder_classes, getButtonClasses, getFolderClasses;
-        getButtonClasses = function() {
-          var classes;
-          classes = ['jqtree-toggler'];
-          if (!node.is_open) {
-            classes.push('jqtree-closed');
-          }
-          return classes.join(' ');
-        };
-        getFolderClasses = function() {
-          var classes;
-          classes = ['jqtree-folder'];
-          if (!node.is_open) {
-            classes.push('jqtree-closed');
-          }
-          if (_this.select_node_handler && _this.select_node_handler.isNodeSelected(node)) {
-            classes.push('jqtree-selected');
-          }
-          return classes.join(' ');
-        };
-        button_classes = getButtonClasses();
-        folder_classes = getFolderClasses();
-        escaped_name = escapeIfNecessary(node.name);
-        if (node.is_open) {
-          button_char = _this.options.openedIcon;
-        } else {
-          button_char = _this.options.closedIcon;
-        }
-        return $("<li class=\"jqtree_common " + folder_classes + "\"><div class=\"jqtree-element jqtree_common\"><a class=\"jqtree_common " + button_classes + "\">" + button_char + "</a><span class=\"jqtree_common jqtree-title\">" + escaped_name + "</span></div></li>");
-      };
-      doCreateDomElements = function($element, children, is_root_node, is_open) {
-        var $li, $ul, child, _i, _len;
-        $ul = createUl(is_root_node);
-        $element.append($ul);
-        for (_i = 0, _len = children.length; _i < _len; _i++) {
-          child = children[_i];
-          $li = createLi(child);
-          $ul.append($li);
-          child.element = $li[0];
-          $li.data('node', child);
-          if (child.hasChildren()) {
-            doCreateDomElements($li, child.children, false, child.is_open);
-          }
-        }
-        return null;
-      };
-      if (from_node && from_node.parent) {
-        is_root_node = false;
-        node_element = this._getNodeElementForNode(from_node);
-        node_element.getUl().remove();
-        $element = node_element.$element;
-      } else {
-        from_node = this.tree;
-        $element = this.element;
-        $element.empty();
-        is_root_node = true;
-      }
-      doCreateDomElements($element, from_node.children, is_root_node, is_root_node);
-      return this._triggerEvent('tree.refresh');
-    };
-
-    JqTreeWidget.prototype._click = function(e) {
-      var click_target, event, node;
-      click_target = this._getClickTarget(e.target);
-      if (click_target) {
-        if (click_target.type === 'button') {
-          this.toggle(click_target.node, this.options.slide);
-          e.preventDefault();
-          return e.stopPropagation();
-        } else if (click_target.type === 'label') {
-          node = click_target.node;
-          event = this._triggerEvent('tree.click', {
-            node: node
-          });
-          if (!event.isDefaultPrevented()) {
-            return this._selectNode(node, true);
-          }
-        }
-      }
-    };
-
-    JqTreeWidget.prototype._dblclick = function(e) {
-      var click_target;
-      click_target = this._getClickTarget(e.target);
-      if (click_target && click_target.type === 'label') {
-        return this._triggerEvent('tree.dblclick', {
-          node: click_target.node
-        });
-      }
-    };
-
-    JqTreeWidget.prototype._getClickTarget = function(element) {
-      var $button, $el, $target, node;
-      $target = $(element);
-      $button = $target.closest('.jqtree-toggler');
-      if ($button.length) {
-        node = this._getNode($button);
-        if (node) {
-          return {
-            type: 'button',
-            node: node
-          };
-        }
-      } else {
-        $el = $target.closest('.jqtree-element');
-        if ($el.length) {
-          node = this._getNode($el);
-          if (node) {
-            return {
-              type: 'label',
-              node: node
-            };
-          }
-        }
-      }
-      return null;
-    };
-
-    JqTreeWidget.prototype._getNode = function($element) {
-      var $li;
-      $li = $element.closest('li');
-      if ($li.length === 0) {
-        return null;
-      } else {
-        return $li.data('node');
-      }
-    };
-
-    JqTreeWidget.prototype._getNodeElementForNode = function(node) {
-      if (node.isFolder()) {
-        return new FolderElement(node, this);
-      } else {
-        return new NodeElement(node, this);
-      }
-    };
-
-    JqTreeWidget.prototype._getNodeElement = function($element) {
-      var node;
-      node = this._getNode($element);
-      if (node) {
-        return this._getNodeElementForNode(node);
-      } else {
-        return null;
-      }
-    };
-
-    JqTreeWidget.prototype._contextmenu = function(e) {
-      var $div, node;
-      $div = $(e.target).closest('ul.jqtree-tree .jqtree-element');
-      if ($div.length) {
-        node = this._getNode($div);
-        if (node) {
-          e.preventDefault();
-          e.stopPropagation();
-          this._triggerEvent('tree.contextmenu', {
-            node: node,
-            click_event: e
-          });
-          return false;
-        }
-      }
-    };
-
-    JqTreeWidget.prototype._saveState = function() {
-      if (this.options.saveState) {
-        return this.save_state_handler.saveState();
-      }
-    };
-
-    JqTreeWidget.prototype._mouseCapture = function(position_info) {
-      if (this.options.dragAndDrop) {
-        return this.dnd_handler.mouseCapture(position_info);
-      } else {
-        return false;
-      }
-    };
-
-    JqTreeWidget.prototype._mouseStart = function(position_info) {
-      if (this.options.dragAndDrop) {
-        return this.dnd_handler.mouseStart(position_info);
-      } else {
-        return false;
-      }
-    };
-
-    JqTreeWidget.prototype._mouseDrag = function(position_info) {
-      var result;
-      if (this.options.dragAndDrop) {
-        result = this.dnd_handler.mouseDrag(position_info);
-        if (this.scroll_handler) {
-          this.scroll_handler.checkScrolling();
-        }
-        return result;
-      } else {
-        return false;
-      }
-    };
-
-    JqTreeWidget.prototype._mouseStop = function(position_info) {
-      if (this.options.dragAndDrop) {
-        return this.dnd_handler.mouseStop(position_info);
-      } else {
-        return false;
-      }
-    };
-
-    JqTreeWidget.prototype._triggerEvent = function(event_name, values) {
-      var event;
-      event = $.Event(event_name);
-      $.extend(event, values);
-      this.element.trigger(event);
-      return event;
-    };
-
-    JqTreeWidget.prototype.testGenerateHitAreas = function(moving_node) {
-      this.dnd_handler.current_item = this._getNodeElementForNode(moving_node);
-      this.dnd_handler.generateHitAreas();
-      return this.dnd_handler.hit_areas;
-    };
-
-    JqTreeWidget.prototype._selectCurrentNode = function() {
-      var node, node_element;
-      node = this.getSelectedNode();
-      if (node) {
-        node_element = this._getNodeElementForNode(node);
-        if (node_element) {
-          return node_element.select();
-        }
-      }
-    };
-
-    JqTreeWidget.prototype._deselectCurrentNode = function() {
-      var node;
-      node = this.getSelectedNode();
-      if (node) {
-        return this.removeFromSelection(node);
-      }
-    };
-
-    return JqTreeWidget;
-
-  })(MouseWidget);
-
-  SimpleWidget.register(JqTreeWidget, 'tree');
-
-  NodeElement = (function() {
-    function NodeElement(node, tree_widget) {
-      this.init(node, tree_widget);
-    }
-
-    NodeElement.prototype.init = function(node, tree_widget) {
-      this.node = node;
-      this.tree_widget = tree_widget;
-      return this.$element = $(node.element);
-    };
-
-    NodeElement.prototype.getUl = function() {
-      return this.$element.children('ul:first');
-    };
-
-    NodeElement.prototype.getSpan = function() {
-      return this.$element.children('.jqtree-element').find('span.jqtree-title');
-    };
-
-    NodeElement.prototype.getLi = function() {
-      return this.$element;
-    };
-
-    NodeElement.prototype.addDropHint = function(position) {
-      if (position === Position.INSIDE) {
-        return new BorderDropHint(this.$element);
-      } else {
-        return new GhostDropHint(this.node, this.$element, position);
-      }
-    };
-
-    NodeElement.prototype.select = function() {
-      return this.getLi().addClass('jqtree-selected');
-    };
-
-    NodeElement.prototype.deselect = function() {
-      return this.getLi().removeClass('jqtree-selected');
-    };
-
-    return NodeElement;
-
-  })();
-
-  FolderElement = (function(_super) {
-    __extends(FolderElement, _super);
-
-    function FolderElement() {
-      _ref2 = FolderElement.__super__.constructor.apply(this, arguments);
-      return _ref2;
-    }
-
-    FolderElement.prototype.open = function(on_finished, slide) {
-      var $button, doOpen,
-        _this = this;
-      if (slide == null) {
-        slide = true;
-      }
-      if (!this.node.is_open) {
-        this.node.is_open = true;
-        $button = this.getButton();
-        $button.removeClass('jqtree-closed');
-        $button.html(this.tree_widget.options.openedIcon);
-        doOpen = function() {
-          _this.getLi().removeClass('jqtree-closed');
-          if (on_finished) {
-            on_finished();
-          }
-          return _this.tree_widget._triggerEvent('tree.open', {
-            node: _this.node
-          });
-        };
-        if (slide) {
-          return this.getUl().slideDown('fast', doOpen);
-        } else {
-          this.getUl().show();
-          return doOpen();
-        }
-      }
-    };
-
-    FolderElement.prototype.close = function(slide) {
-      var $button, doClose,
-        _this = this;
-      if (slide == null) {
-        slide = true;
-      }
-      if (this.node.is_open) {
-        this.node.is_open = false;
-        $button = this.getButton();
-        $button.addClass('jqtree-closed');
-        $button.html(this.tree_widget.options.closedIcon);
-        doClose = function() {
-          _this.getLi().addClass('jqtree-closed');
-          return _this.tree_widget._triggerEvent('tree.close', {
-            node: _this.node
-          });
-        };
-        if (slide) {
-          return this.getUl().slideUp('fast', doClose);
-        } else {
-          this.getUl().hide();
-          return doClose();
-        }
-      }
-    };
-
-    FolderElement.prototype.getButton = function() {
-      return this.$element.children('.jqtree-element').find('a.jqtree-toggler');
-    };
-
-    FolderElement.prototype.addDropHint = function(position) {
-      if (!this.node.is_open && position === Position.INSIDE) {
-        return new BorderDropHint(this.$element);
-      } else {
-        return new GhostDropHint(this.node, this.$element, position);
-      }
-    };
-
-    return FolderElement;
-
-  })(NodeElement);
-
-  html_escape = function(string) {
-    return ('' + string).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g, '&#x2F;');
-  };
-
-  _indexOf = function(array, item) {
-    var i, value, _i, _len;
-    for (i = _i = 0, _len = array.length; _i < _len; i = ++_i) {
-      value = array[i];
-      if (value === item) {
-        return i;
-      }
-    }
-    return -1;
-  };
-
-  indexOf = function(array, item) {
-    if (array.indexOf) {
-      return array.indexOf(item);
-    } else {
-      return _indexOf(array, item);
-    }
-  };
-
-  this.Tree.indexOf = indexOf;
-
-  this.Tree._indexOf = _indexOf;
-
-  if (!((this.JSON != null) && (this.JSON.stringify != null) && typeof this.JSON.stringify === 'function')) {
-    json_escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
-    json_meta = {
-      '\b': '\\b',
-      '\t': '\\t',
-      '\n': '\\n',
-      '\f': '\\f',
-      '\r': '\\r',
-      '"': '\\"',
-      '\\': '\\\\'
-    };
-    json_quote = function(string) {
-      json_escapable.lastIndex = 0;
-      if (json_escapable.test(string)) {
-        return '"' + string.replace(json_escapable, function(a) {
-          var c;
-          c = json_meta[a];
-          return (typeof c === 'string' ? c : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4));
-        }) + '"';
-      } else {
-        return '"' + string + '"';
-      }
-    };
-    json_str = function(key, holder) {
-      var i, k, partial, v, value, _i, _len;
-      value = holder[key];
-      switch (typeof value) {
-        case 'string':
-          return json_quote(value);
-        case 'number':
-          if (isFinite(value)) {
-            return String(value);
-          } else {
-            return 'null';
-          }
-        case 'boolean':
-        case 'null':
-          return String(value);
-        case 'object':
-          if (!value) {
-            return 'null';
-          }
-          partial = [];
-          if (Object.prototype.toString.apply(value) === '[object Array]') {
-            for (i = _i = 0, _len = value.length; _i < _len; i = ++_i) {
-              v = value[i];
-              partial[i] = json_str(i, value) || 'null';
-            }
-            return (partial.length === 0 ? '[]' : '[' + partial.join(',') + ']');
-          }
-          for (k in value) {
-            if (Object.prototype.hasOwnProperty.call(value, k)) {
-              v = json_str(k, value);
-              if (v) {
-                partial.push(json_quote(k) + ':' + v);
-              }
-            }
-          }
-          return (partial.length === 0 ? '{}' : '{' + partial.join(',') + '}');
-      }
-    };
-    if (this.JSON == null) {
-      this.JSON = {};
-    }
-    this.JSON.stringify = function(value) {
-      return json_str('', {
-        '': value
-      });
-    };
-  }
-
-  SaveStateHandler = (function() {
-    function SaveStateHandler(tree_widget) {
-      this.tree_widget = tree_widget;
-    }
-
-    SaveStateHandler.prototype.saveState = function() {
-      var state;
-      state = JSON.stringify(this.getState());
-      if (this.tree_widget.options.onSetStateFromStorage) {
-        return this.tree_widget.options.onSetStateFromStorage(state);
-      } else if (this.supportsLocalStorage()) {
-        return localStorage.setItem(this.getCookieName(), state);
-      } else if ($.cookie) {
-        $.cookie.raw = true;
-        return $.cookie(this.getCookieName(), state, {
-          path: '/'
-        });
-      }
-    };
-
-    SaveStateHandler.prototype.restoreState = function() {
-      var state;
-      state = this.getStateFromStorage();
-      if (state) {
-        this.setState($.parseJSON(state));
-        return true;
-      } else {
-        return false;
-      }
-    };
-
-    SaveStateHandler.prototype.getStateFromStorage = function() {
-      if (this.tree_widget.options.onGetStateFromStorage) {
-        return this.tree_widget.options.onGetStateFromStorage();
-      } else if (this.supportsLocalStorage()) {
-        return localStorage.getItem(this.getCookieName());
-      } else if ($.cookie) {
-        $.cookie.raw = true;
-        return $.cookie(this.getCookieName());
-      } else {
-        return null;
-      }
-    };
-
-    SaveStateHandler.prototype.getState = function() {
-      var open_nodes, selected_node, selected_node_id,
-        _this = this;
-      open_nodes = [];
-      this.tree_widget.tree.iterate(function(node) {
-        if (node.is_open && node.id && node.hasChildren()) {
-          open_nodes.push(node.id);
-        }
-        return true;
-      });
-      selected_node = this.tree_widget.getSelectedNode();
-      if (selected_node) {
-        selected_node_id = selected_node.id;
-      } else {
-        selected_node_id = '';
-      }
-      return {
-        open_nodes: open_nodes,
-        selected_node: selected_node_id
-      };
-    };
-
-    SaveStateHandler.prototype.setState = function(state) {
-      var open_nodes, selected_node, selected_node_id,
-        _this = this;
-      if (state) {
-        open_nodes = state.open_nodes;
-        selected_node_id = state.selected_node;
-        this.tree_widget.tree.iterate(function(node) {
-          node.is_open = node.id && node.hasChildren() && (indexOf(open_nodes, node.id) >= 0);
-          return true;
-        });
-        if (selected_node_id && this.tree_widget.select_node_handler) {
-          this.tree_widget.select_node_handler.clear();
-          selected_node = this.tree_widget.getNodeById(selected_node_id);
-          if (selected_node) {
-            return this.tree_widget.select_node_handler.addToSelection(selected_node);
-          }
-        }
-      }
-    };
-
-    SaveStateHandler.prototype.getCookieName = function() {
-      if (typeof this.tree_widget.options.saveState === 'string') {
-        return this.tree_widget.options.saveState;
-      } else {
-        return 'tree';
-      }
-    };
-
-    SaveStateHandler.prototype.supportsLocalStorage = function() {
-      var testSupport;
-      testSupport = function() {
-        var error, key;
-        if (typeof localStorage === "undefined" || localStorage === null) {
-          return false;
-        } else {
-          try {
-            key = '_storage_test';
-            sessionStorage.setItem(key, true);
-            sessionStorage.removeItem(key);
-          } catch (_error) {
-            error = _error;
-            return false;
-          }
-          return true;
-        }
-      };
-      if (this._supportsLocalStorage == null) {
-        this._supportsLocalStorage = testSupport();
-      }
-      return this._supportsLocalStorage;
-    };
-
-    SaveStateHandler.prototype.getNodeIdToBeSelected = function() {
-      var state, state_json;
-      state_json = this.getStateFromStorage();
-      if (state_json) {
-        state = $.parseJSON(state_json);
-        return state.selected_node;
-      } else {
-        return null;
-      }
-    };
-
-    return SaveStateHandler;
-
-  })();
-
-  SelectNodeHandler = (function() {
-    function SelectNodeHandler(tree_widget) {
-      this.tree_widget = tree_widget;
-      this.clear();
-    }
-
-    SelectNodeHandler.prototype.getSelectedNode = function() {
-      var selected_nodes;
-      selected_nodes = this.getSelectedNodes();
-      if (selected_nodes.length) {
-        return selected_nodes[0];
-      } else {
-        return false;
-      }
-    };
-
-    SelectNodeHandler.prototype.getSelectedNodes = function() {
-      var id, node, selected_nodes;
-      if (this.selected_single_node) {
-        return [this.selected_single_node];
-      } else {
-        selected_nodes = [];
-        for (id in this.selected_nodes) {
-          node = this.tree_widget.getNodeById(id);
-          if (node) {
-            selected_nodes.push(node);
-          }
-        }
-        return selected_nodes;
-      }
-    };
-
-    SelectNodeHandler.prototype.isNodeSelected = function(node) {
-      if (node.id) {
-        return this.selected_nodes[node.id];
-      } else if (this.selected_single_node) {
-        return this.selected_single_node.element === node.element;
-      } else {
-        return false;
-      }
-    };
-
-    SelectNodeHandler.prototype.clear = function() {
-      this.selected_nodes = {};
-      return this.selected_single_node = null;
-    };
-
-    SelectNodeHandler.prototype.removeFromSelection = function(node, include_children) {
-      var _this = this;
-      if (include_children == null) {
-        include_children = false;
-      }
-      if (!node.id) {
-        if (node.element === this.selected_single_node.element) {
-          return this.selected_single_node = null;
-        }
-      } else {
-        delete this.selected_nodes[node.id];
-        if (include_children) {
-          return node.iterate(function(n) {
-            delete _this.selected_nodes[node.id];
-            return true;
-          });
-        }
-      }
-    };
-
-    SelectNodeHandler.prototype.addToSelection = function(node) {
-      if (node.id) {
-        return this.selected_nodes[node.id] = true;
-      } else {
-        return this.selected_single_node = node;
-      }
-    };
-
-    return SelectNodeHandler;
-
-  })();
-
-  DragAndDropHandler = (function() {
-    function DragAndDropHandler(tree_widget) {
-      this.tree_widget = tree_widget;
-      this.hovered_area = null;
-      this.$ghost = null;
-      this.hit_areas = [];
-      this.is_dragging = false;
-    }
-
-    DragAndDropHandler.prototype.mouseCapture = function(position_info) {
-      var $element, node_element;
-      $element = $(position_info.target);
-      if (this.tree_widget.options.onIsMoveHandle && !this.tree_widget.options.onIsMoveHandle($element)) {
-        return null;
-      }
-      node_element = this.tree_widget._getNodeElement($element);
-      if (node_element && this.tree_widget.options.onCanMove) {
-        if (!this.tree_widget.options.onCanMove(node_element.node)) {
-          node_element = null;
-        }
-      }
-      this.current_item = node_element;
-      return this.current_item !== null;
-    };
-
-    DragAndDropHandler.prototype.mouseStart = function(position_info) {
-      var offset;
-      this.refreshHitAreas();
-      offset = $(position_info.target).offset();
-      this.drag_element = new DragElement(this.current_item.node, position_info.page_x - offset.left, position_info.page_y - offset.top, this.tree_widget.element);
-      this.is_dragging = true;
-      this.current_item.$element.addClass('jqtree-moving');
-      return true;
-    };
-
-    DragAndDropHandler.prototype.mouseDrag = function(position_info) {
-      var area, can_move_to;
-      this.drag_element.move(position_info.page_x, position_info.page_y);
-      area = this.findHoveredArea(position_info.page_x, position_info.page_y);
-      can_move_to = this.canMoveToArea(area);
-      if (area) {
-        if (this.hovered_area !== area) {
-          this.hovered_area = area;
-          if (this.mustOpenFolderTimer(area)) {
-            this.startOpenFolderTimer(area.node);
-          }
-          if (can_move_to) {
-            this.updateDropHint();
-          }
-        }
-      } else {
-        this.removeHover();
-        this.removeDropHint();
-        this.stopOpenFolderTimer();
-      }
-      return true;
-    };
-
-    DragAndDropHandler.prototype.canMoveToArea = function(area) {
-      var position_name;
-      if (!area) {
-        return false;
-      } else if (this.tree_widget.options.onCanMoveTo) {
-        position_name = Position.getName(area.position);
-        return this.tree_widget.options.onCanMoveTo(this.current_item.node, area.node, position_name);
-      } else {
-        return true;
-      }
-    };
-
-    DragAndDropHandler.prototype.mouseStop = function(position_info) {
-      this.moveItem(position_info);
-      this.clear();
-      this.removeHover();
-      this.removeDropHint();
-      this.removeHitAreas();
-      if (this.current_item) {
-        this.current_item.$element.removeClass('jqtree-moving');
-      }
-      this.is_dragging = false;
-      return false;
-    };
-
-    DragAndDropHandler.prototype.refreshHitAreas = function() {
-      this.removeHitAreas();
-      return this.generateHitAreas();
-    };
-
-    DragAndDropHandler.prototype.removeHitAreas = function() {
-      return this.hit_areas = [];
-    };
-
-    DragAndDropHandler.prototype.clear = function() {
-      this.drag_element.remove();
-      return this.drag_element = null;
-    };
-
-    DragAndDropHandler.prototype.removeDropHint = function() {
-      if (this.previous_ghost) {
-        return this.previous_ghost.remove();
-      }
-    };
-
-    DragAndDropHandler.prototype.removeHover = function() {
-      return this.hovered_area = null;
-    };
-
-    DragAndDropHandler.prototype.generateHitAreas = function() {
-      var hit_areas_generator;
-      hit_areas_generator = new HitAreasGenerator(this.tree_widget.tree, this.current_item.node, this.getTreeDimensions().bottom);
-      return this.hit_areas = hit_areas_generator.generate();
-    };
-
-    DragAndDropHandler.prototype.findHoveredArea = function(x, y) {
-      var area, dimensions, high, low, mid;
-      dimensions = this.getTreeDimensions();
-      if (x < dimensions.left || y < dimensions.top || x > dimensions.right || y > dimensions.bottom) {
-        return null;
-      }
-      low = 0;
-      high = this.hit_areas.length;
-      while (low < high) {
-        mid = (low + high) >> 1;
-        area = this.hit_areas[mid];
-        if (y < area.top) {
-          high = mid;
-        } else if (y > area.bottom) {
-          low = mid + 1;
-        } else {
-          return area;
-        }
-      }
-      return null;
-    };
-
-    DragAndDropHandler.prototype.mustOpenFolderTimer = function(area) {
-      var node;
-      node = area.node;
-      return node.isFolder() && !node.is_open && area.position === Position.INSIDE;
-    };
-
-    DragAndDropHandler.prototype.updateDropHint = function() {
-      var node_element;
-      if (!this.hovered_area) {
-        return;
-      }
-      this.removeDropHint();
-      node_element = this.tree_widget._getNodeElementForNode(this.hovered_area.node);
-      return this.previous_ghost = node_element.addDropHint(this.hovered_area.position);
-    };
-
-    DragAndDropHandler.prototype.startOpenFolderTimer = function(folder) {
-      var openFolder,
-        _this = this;
-      openFolder = function() {
-        return _this.tree_widget._openNode(folder, _this.tree_widget.options.slide, function() {
-          _this.refreshHitAreas();
-          return _this.updateDropHint();
-        });
-      };
-      return this.open_folder_timer = setTimeout(openFolder, 500);
-    };
-
-    DragAndDropHandler.prototype.stopOpenFolderTimer = function() {
-      if (this.open_folder_timer) {
-        clearTimeout(this.open_folder_timer);
-        return this.open_folder_timer = null;
-      }
-    };
-
-    DragAndDropHandler.prototype.moveItem = function(position_info) {
-      var doMove, event, moved_node, position, previous_parent, target_node,
-        _this = this;
-      if (this.hovered_area && this.hovered_area.position !== Position.NONE && this.canMoveToArea(this.hovered_area)) {
-        moved_node = this.current_item.node;
-        target_node = this.hovered_area.node;
-        position = this.hovered_area.position;
-        previous_parent = moved_node.parent;
-        if (position === Position.INSIDE) {
-          this.hovered_area.node.is_open = true;
-        }
-        doMove = function() {
-          _this.tree_widget.tree.moveNode(moved_node, target_node, position);
-          _this.tree_widget.element.empty();
-          return _this.tree_widget._refreshElements();
-        };
-        event = this.tree_widget._triggerEvent('tree.move', {
-          move_info: {
-            moved_node: moved_node,
-            target_node: target_node,
-            position: Position.getName(position),
-            previous_parent: previous_parent,
-            do_move: doMove,
-            original_event: position_info.original_event
-          }
-        });
-        if (!event.isDefaultPrevented()) {
-          return doMove();
-        }
-      }
-    };
-
-    DragAndDropHandler.prototype.getTreeDimensions = function() {
-      var offset;
-      offset = this.tree_widget.element.offset();
-      return {
-        left: offset.left,
-        top: offset.top,
-        right: offset.left + this.tree_widget.element.width(),
-        bottom: offset.top + this.tree_widget.element.height() + 16
-      };
-    };
-
-    return DragAndDropHandler;
-
-  })();
-
-  VisibleNodeIterator = (function() {
-    function VisibleNodeIterator(tree) {
-      this.tree = tree;
-    }
-
-    VisibleNodeIterator.prototype.iterate = function() {
-      var is_first_node, _iterateNode,
-        _this = this;
-      is_first_node = true;
-      _iterateNode = function(node, next_node) {
-        var $element, child, children_length, i, must_iterate_inside, _i, _len, _ref3;
-        must_iterate_inside = (node.is_open || !node.element) && node.hasChildren();
-        if (node.element) {
-          $element = $(node.element);
-          if (!$element.is(':visible')) {
-            return;
-          }
-          if (is_first_node) {
-            _this.handleFirstNode(node, $element);
-            is_first_node = false;
-          }
-          if (!node.hasChildren()) {
-            _this.handleNode(node, next_node, $element);
-          } else if (node.is_open) {
-            if (!_this.handleOpenFolder(node, $element)) {
-              must_iterate_inside = false;
-            }
-          } else {
-            _this.handleClosedFolder(node, next_node, $element);
-          }
-        }
-        if (must_iterate_inside) {
-          children_length = node.children.length;
-          _ref3 = node.children;
-          for (i = _i = 0, _len = _ref3.length; _i < _len; i = ++_i) {
-            child = _ref3[i];
-            if (i === (children_length - 1)) {
-              _iterateNode(node.children[i], null);
-            } else {
-              _iterateNode(node.children[i], node.children[i + 1]);
-            }
-          }
-          if (node.is_open) {
-            return _this.handleAfterOpenFolder(node, next_node, $element);
-          }
-        }
-      };
-      return _iterateNode(this.tree, null);
-    };
-
-    VisibleNodeIterator.prototype.handleNode = function(node, next_node, $element) {};
-
-    VisibleNodeIterator.prototype.handleOpenFolder = function(node, $element) {};
-
-    VisibleNodeIterator.prototype.handleClosedFolder = function(node, next_node, $element) {};
-
-    VisibleNodeIterator.prototype.handleAfterOpenFolder = function(node, next_node, $element) {};
-
-    VisibleNodeIterator.prototype.handleFirstNode = function(node, $element) {};
-
-    return VisibleNodeIterator;
-
-  })();
-
-  HitAreasGenerator = (function(_super) {
-    __extends(HitAreasGenerator, _super);
-
-    function HitAreasGenerator(tree, current_node, tree_bottom) {
-      HitAreasGenerator.__super__.constructor.call(this, tree);
-      this.current_node = current_node;
-      this.tree_bottom = tree_bottom;
-    }
-
-    HitAreasGenerator.prototype.generate = function() {
-      this.positions = [];
-      this.last_top = 0;
-      this.iterate();
-      return this.generateHitAreas(this.positions);
-    };
-
-    HitAreasGenerator.prototype.getTop = function($element) {
-      return $element.offset().top;
-    };
-
-    HitAreasGenerator.prototype.addPosition = function(node, position, top) {
-      this.positions.push({
-        top: top,
-        node: node,
-        position: position
-      });
-      return this.last_top = top;
-    };
-
-    HitAreasGenerator.prototype.handleNode = function(node, next_node, $element) {
-      var top;
-      top = this.getTop($element);
-      if (node === this.current_node) {
-        this.addPosition(node, Position.NONE, top);
-      } else {
-        this.addPosition(node, Position.INSIDE, top);
-      }
-      if (next_node === this.current_node || node === this.current_node) {
-        return this.addPosition(node, Position.NONE, top);
-      } else {
-        return this.addPosition(node, Position.AFTER, top);
-      }
-    };
-
-    HitAreasGenerator.prototype.handleOpenFolder = function(node, $element) {
-      if (node === this.current_node) {
-        return false;
-      }
-      if (node.children[0] !== this.current_node) {
-        this.addPosition(node, Position.INSIDE, this.getTop($element));
-      }
-      return true;
-    };
-
-    HitAreasGenerator.prototype.handleClosedFolder = function(node, next_node, $element) {
-      var top;
-      top = this.getTop($element);
-      if (node === this.current_node) {
-        return this.addPosition(node, Position.NONE, top);
-      } else {
-        this.addPosition(node, Position.INSIDE, top);
-        if (next_node !== this.current_node) {
-          return this.addPosition(node, Position.AFTER, top);
-        }
-      }
-    };
-
-    HitAreasGenerator.prototype.handleAfterOpenFolder = function(node, next_node, $element) {
-      if (node === this.current_node || next_node === this.current_node) {
-        return this.addPosition(node, Position.NONE, this.last_top);
-      } else {
-        return this.addPosition(node, Position.AFTER, this.last_top);
-      }
-    };
-
-    HitAreasGenerator.prototype.handleFirstNode = function(node, $element) {
-      if (node !== this.current_node) {
-        return this.addPosition(node, Position.BEFORE, this.getTop($(node.element)));
-      }
-    };
-
-    HitAreasGenerator.prototype.generateHitAreas = function(positions) {
-      var group, hit_areas, position, previous_top, _i, _len;
-      previous_top = -1;
-      group = [];
-      hit_areas = [];
-      for (_i = 0, _len = positions.length; _i < _len; _i++) {
-        position = positions[_i];
-        if (position.top !== previous_top && group.length) {
-          if (group.length) {
-            this.generateHitAreasForGroup(hit_areas, group, previous_top, position.top);
-          }
-          previous_top = position.top;
-          group = [];
-        }
-        group.push(position);
-      }
-      this.generateHitAreasForGroup(hit_areas, group, previous_top, this.tree_bottom);
-      return hit_areas;
-    };
-
-    HitAreasGenerator.prototype.generateHitAreasForGroup = function(hit_areas, positions_in_group, top, bottom) {
-      var area_height, area_top, position, _i, _len;
-      area_height = (bottom - top) / positions_in_group.length;
-      area_top = top;
-      for (_i = 0, _len = positions_in_group.length; _i < _len; _i++) {
-        position = positions_in_group[_i];
-        hit_areas.push({
-          top: area_top,
-          bottom: area_top + area_height,
-          node: position.node,
-          position: position.position
-        });
-        area_top += area_height;
-      }
-      return null;
-    };
-
-    return HitAreasGenerator;
-
-  })(VisibleNodeIterator);
-
-  DragElement = (function() {
-    function DragElement(node, offset_x, offset_y, $tree) {
-      this.offset_x = offset_x;
-      this.offset_y = offset_y;
-      this.$element = $("<span class=\"jqtree-title jqtree-dragging\">" + node.name + "</span>");
-      this.$element.css("position", "absolute");
-      $tree.append(this.$element);
-    }
-
-    DragElement.prototype.move = function(page_x, page_y) {
-      return this.$element.offset({
-        left: page_x - this.offset_x,
-        top: page_y - this.offset_y
-      });
-    };
-
-    DragElement.prototype.remove = function() {
-      return this.$element.remove();
-    };
-
-    return DragElement;
-
-  })();
-
-  GhostDropHint = (function() {
-    function GhostDropHint(node, $element, position) {
-      this.$element = $element;
-      this.node = node;
-      this.$ghost = $('<li class="jqtree_common jqtree-ghost"><span class="jqtree_common jqtree-circle"></span><span class="jqtree_common jqtree-line"></span></li>');
-      if (position === Position.AFTER) {
-        this.moveAfter();
-      } else if (position === Position.BEFORE) {
-        this.moveBefore();
-      } else if (position === Position.INSIDE) {
-        if (node.isFolder() && node.is_open) {
-          this.moveInsideOpenFolder();
-        } else {
-          this.moveInside();
-        }
-      }
-    }
-
-    GhostDropHint.prototype.remove = function() {
-      return this.$ghost.remove();
-    };
-
-    GhostDropHint.prototype.moveAfter = function() {
-      return this.$element.after(this.$ghost);
-    };
-
-    GhostDropHint.prototype.moveBefore = function() {
-      return this.$element.before(this.$ghost);
-    };
-
-    GhostDropHint.prototype.moveInsideOpenFolder = function() {
-      return $(this.node.children[0].element).before(this.$ghost);
-    };
-
-    GhostDropHint.prototype.moveInside = function() {
-      this.$element.after(this.$ghost);
-      return this.$ghost.addClass('jqtree-inside');
-    };
-
-    return GhostDropHint;
-
-  })();
-
-  BorderDropHint = (function() {
-    function BorderDropHint($element) {
-      var $div, width;
-      $div = $element.children('.jqtree-element');
-      width = $element.width() - 4;
-      this.$hint = $('<span class="jqtree-border"></span>');
-      $div.append(this.$hint);
-      this.$hint.css({
-        width: width,
-        height: $div.height() - 4
-      });
-    }
-
-    BorderDropHint.prototype.remove = function() {
-      return this.$hint.remove();
-    };
-
-    return BorderDropHint;
-
-  })();
-
-  ScrollHandler = (function() {
-    function ScrollHandler(tree_widget) {
-      this.tree_widget = tree_widget;
-      this.previous_top = -1;
-      this._initScrollParent();
-    }
-
-    ScrollHandler.prototype._initScrollParent = function() {
-      var $scroll_parent, getParentWithOverflow, setDocumentAsScrollParent,
-        _this = this;
-      getParentWithOverflow = function() {
-        var css_value, css_values, parent, scroll_parent, _i, _j, _len, _len1, _ref3, _ref4;
-        css_values = ['overflow', 'overflow-y'];
-        scroll_parent = null;
-        _ref3 = _this.tree_widget.$el.parents();
-        for (_i = 0, _len = _ref3.length; _i < _len; _i++) {
-          parent = _ref3[_i];
-          for (_j = 0, _len1 = css_values.length; _j < _len1; _j++) {
-            css_value = css_values[_j];
-            if ((_ref4 = $.css(parent, css_value)) === 'auto' || _ref4 === 'scroll') {
-              return $(parent);
-            }
-          }
-        }
-        return null;
-      };
-      setDocumentAsScrollParent = function() {
-        _this.scroll_parent_top = 0;
-        return _this.$scroll_parent = null;
-      };
-      if (this.tree_widget.$el.css('position') === 'fixed') {
-        setDocumentAsScrollParent();
-      }
-      $scroll_parent = getParentWithOverflow();
-      if ($scroll_parent && $scroll_parent.length && $scroll_parent[0].tagName !== 'HTML') {
-        this.$scroll_parent = $scroll_parent;
-        return this.scroll_parent_top = this.$scroll_parent.offset().top;
-      } else {
-        return setDocumentAsScrollParent();
-      }
-    };
-
-    ScrollHandler.prototype.checkScrolling = function() {
-      var hovered_area;
-      hovered_area = this.tree_widget.dnd_handler.hovered_area;
-      if (hovered_area && hovered_area.top !== this.previous_top) {
-        this.previous_top = hovered_area.top;
-        if (this.$scroll_parent) {
-          return this._handleScrollingWithScrollParent(hovered_area);
-        } else {
-          return this._handleScrollingWithDocument(hovered_area);
-        }
-      }
-    };
-
-    ScrollHandler.prototype._handleScrollingWithScrollParent = function(area) {
-      var distance_bottom;
-      distance_bottom = this.scroll_parent_top + this.$scroll_parent[0].offsetHeight - area.bottom;
-      if (distance_bottom < 20) {
-        this.$scroll_parent[0].scrollTop += 20;
-        this.tree_widget.refreshHitAreas();
-        return this.previous_top = -1;
-      } else if ((area.top - this.scroll_parent_top) < 20) {
-        this.$scroll_parent[0].scrollTop -= 20;
-        this.tree_widget.refreshHitAreas();
-        return this.previous_top = -1;
-      }
-    };
-
-    ScrollHandler.prototype._handleScrollingWithDocument = function(area) {
-      var distance_top;
-      distance_top = area.top - $(document).scrollTop();
-      if (distance_top < 20) {
-        return $(document).scrollTop($(document).scrollTop() - 20);
-      } else if ($(window).height() - (area.bottom - $(document).scrollTop()) < 20) {
-        return $(document).scrollTop($(document).scrollTop() + 20);
-      }
-    };
-
-    ScrollHandler.prototype.scrollTo = function(top) {
-      var tree_top;
-      if (this.$scroll_parent) {
-        return this.$scroll_parent[0].scrollTop = top;
-      } else {
-        tree_top = this.tree_widget.$el.offset().top;
-        return $(document).scrollTop(top + tree_top);
-      }
-    };
-
-    ScrollHandler.prototype.isScrolledIntoView = function(element) {
-      var $element, element_bottom, element_top, view_bottom, view_top;
-      $element = $(element);
-      if (this.$scroll_parent) {
-        view_top = 0;
-        view_bottom = this.$scroll_parent.height();
-        element_top = $element.offset().top - this.scroll_parent_top;
-        element_bottom = element_top + $element.height();
-      } else {
-        view_top = $(window).scrollTop();
-        view_bottom = view_top + $(window).height();
-        element_top = $element.offset().top;
-        element_bottom = element_top + $element.height();
-      }
-      return (element_bottom <= view_bottom) && (element_top >= view_top);
-    };
-
-    return ScrollHandler;
-
-  })();
-
-  KeyHandler = (function() {
-    var DOWN, LEFT, RIGHT, UP;
-
-    LEFT = 37;
-
-    UP = 38;
-
-    RIGHT = 39;
-
-    DOWN = 40;
-
-    function KeyHandler(tree_widget) {
-      this.tree_widget = tree_widget;
-      if (tree_widget.options.keyboardSupport) {
-        $(document).bind('keydown.jqtree', $.proxy(this.handleKeyDown, this));
-      }
-    }
-
-    KeyHandler.prototype.deinit = function() {
-      return $(document).unbind('keydown.jqtree');
-    };
-
-    KeyHandler.prototype.handleKeyDown = function(e) {
-      var current_node, key, moveDown, moveLeft, moveRight, moveUp, selectNode,
-        _this = this;
-      if ($(document.activeElement).is('textarea,input')) {
-        return true;
-      }
-      current_node = this.tree_widget.getSelectedNode();
-      selectNode = function(node) {
-        if (node) {
-          _this.tree_widget.selectNode(node);
-          if (_this.tree_widget.scroll_handler && (!_this.tree_widget.scroll_handler.isScrolledIntoView($(node.element).find('.jqtree-element')))) {
-            _this.tree_widget.scrollToNode(node);
-          }
-          return false;
-        } else {
-          return true;
-        }
-      };
-      moveDown = function() {
-        return selectNode(_this.getNextNode(current_node));
-      };
-      moveUp = function() {
-        return selectNode(_this.getPreviousNode(current_node));
-      };
-      moveRight = function() {
-        if (current_node.hasChildren() && !current_node.is_open) {
-          _this.tree_widget.openNode(current_node);
-          return false;
-        } else {
-          return true;
-        }
-      };
-      moveLeft = function() {
-        if (current_node.hasChildren() && current_node.is_open) {
-          _this.tree_widget.closeNode(current_node);
-          return false;
-        } else {
-          return true;
-        }
-      };
-      if (!current_node) {
-        return true;
-      } else {
-        key = e.which;
-        switch (key) {
-          case DOWN:
-            return moveDown();
-          case UP:
-            return moveUp();
-          case RIGHT:
-            return moveRight();
-          case LEFT:
-            return moveLeft();
-        }
-      }
-    };
-
-    KeyHandler.prototype.getNextNode = function(node, include_children) {
-      var next_sibling;
-      if (include_children == null) {
-        include_children = true;
-      }
-      if (include_children && node.hasChildren() && node.is_open) {
-        return node.children[0];
-      } else {
-        if (!node.parent) {
-          return null;
-        } else {
-          next_sibling = node.getNextSibling();
-          if (next_sibling) {
-            return next_sibling;
-          } else {
-            return this.getNextNode(node.parent, false);
-          }
-        }
-      }
-    };
-
-    KeyHandler.prototype.getPreviousNode = function(node) {
-      var previous_sibling;
-      if (!node.parent) {
-        return null;
-      } else {
-        previous_sibling = node.getPreviousSibling();
-        if (previous_sibling) {
-          if (!previous_sibling.hasChildren() || !previous_sibling.is_open) {
-            return previous_sibling;
-          } else {
-            return this.getLastChild(previous_sibling);
-          }
-        } else {
-          if (node.parent.parent) {
-            return node.parent;
-          } else {
-            return null;
-          }
-        }
-      }
-    };
-
-    KeyHandler.prototype.getLastChild = function(node) {
-      var last_child;
-      if (!node.hasChildren()) {
-        return null;
-      } else {
-        last_child = node.children[node.children.length - 1];
-        if (!last_child.hasChildren() || !last_child.is_open) {
-          return last_child;
-        } else {
-          return this.getLastChild(last_child);
-        }
-      }
-    };
-
-    return KeyHandler;
-
-  })();
-
-}).call(this);