Drag and drop nested list, how to make this more visually appealing?

I am currently working on a web app that manages time cards according to specific jobs for the construction industry.

This is what a typical time card may look like. "TEST1" is the name of a job, and the information under it are "cost codes" assigned to it.

Clicking "add cost codes" on the right will then bring the user to a new page (shown below) where they can see a drag and drop nested list view of their cost codes. Here they can add, remove, or rearrange the cost codes.

Here's an overview modal that pops up when a user tries to add a cost code. This displays every cost code available along with the option to search via description or cost code.

My questions here now are:

Do I keep the nested list view? What are the better alternatives?

Should users still be allowed to access the options on the same page as the time card? Or still keep it as a separate page?