Custom UserCP Page & Profile Fields Issue -3.7.2

[LostForWords]

Ah so I currently have a multi-genre play by post Roleplay in the works, inspired by many other forums around with the same theme.

I've downloaded the 3.7.2 software as I know that what I'd like to achieve is achievable on this software for sure.

Okay so basically, via custom fields and templates I am able to achieve a different postbit 'look' for each different roleplay forum, which is great. So for example, the user will enter 'Rolelplay-1 Character Name', 'Roleplay-1 Avatar' 'Roleplay-1 Race', etc etc, which will only show up on the particular style set to the forum that 'Roleplay-1' is in.

Now firstly, I would like to create a page within the userCP (like in the image below) where I can chose specific (or a category) of custom profile fields. Could somebody possibly direct me to a way in which I can achieve this?

Obviously I'd be able to code in the boxes and stuff, that's not an issue. However at the moment my profile fields are simply showing up in a list. What I'd like to be able to do is something similar to what is possible in the postbit, whereby you can code via 'field1' 'field5' etc. (Or whatever way the effect achieved in the image above can be achieved).

I'll be grateful for any help.