Edit state placement

I'm looking for a user friendly way to display a form which has 2 states display and edit. I have this component which renders a basic form.

This will Render two states which look like this:

as you can see the edit button looks out of place, I would like to have this to look more like an editable form, perhaps with a colored header and less space between the edit button and list.

Does anyone know of a way to do this? Also, and other UX Tips would be greatfully appreciated