Anytime you need to change how something looks or where gets placed, you need to start with CSS.
To edit both arrows:
Code:
.arrow-navigator a {}
To edit LEFT arrow:
Code:
.arrow-navigator a[data-action=prev] {}
To edit RIGHT arrow:
Code:
.arrow-navigator a[data-action=next] {}
But, those arrows are part of a navigator block (container), so you need to edit app/themes/Peafowl/views/image.php and get rid of that thing and place your own arrows top, and bottom. To achieve this you will need a lot of CSS, to be honest, I won't bother in change it since later on you will notice that you will also need the JS and more stuff.
Sure, but you need to edit the PHP/HTML of the view file (app/themes/Peafowl/views/image.php). I'm sorry but since is not something that easy to do I can't write it for you.
No, I won't do it for you since this has nothing to do with tech support and is not fair to spend time in one person single customization while there are dozens of features not yet released.
I will appreciate if you can understand the fact that customization != support.