[AC-118] Reskin frontend UI

[NorrisWu0]

Provide screenshots or videos that the function is working.

Provide screenshots of no warning, error in console.

Definitely has error or warning in console, but can fix later

• [x] No merge conflict with the develop branch.
• [x] Check PR title is correct, (i.e [AC-xx: Feature] Create pull request template).
• [x] Check your app will run without crashes.
• [x] Check if there are hard coded values.
• [ ] No //eslint-disable-next-line no-unused-vars, unless otherwise specified.
• [x] No unnecessary spaces between lines of code.
• [x] Check you are using camelCase && PascalCase correctly.
• [x] Check you named your code properly.
• [x] Remove unused comments.