refactored UI to custom directive