How I Built a Stunning Admin Dashboard in Power Pages?

When I started building a hospital management app as a weekend project, I never imagined the frontend would become the most exciting part. I set up Power Pages as an external-facing portal - patients could book appointments, staff could track them, and everyone had what they needed in one place. But then I looked at the default design and thought: this has to change.

Here's the story of how I transformed a generic Power Pages site into a dashboard I'm actually proud of.

The Design Problem Nobody Talks About

Power Pages is powerful, but out of the box, it looks like every other portal on the internet. Default headers, default footers, default login screens. For a hospital app, that just didn't feel trustworthy or professional. So I rolled up my sleeves and started customizing — piece by piece.

Bootstrap Icons

Power Pages already supports Bootstrap for styling, which is a great starting point. To layer in Bootstrap Icons, I created a content snippet with the CDN link tag. Power Pages automatically injects it across the site - clean, simple, no hacks needed.

Custom Web Templates

This was the game-changer. I found the default header and footer web templates and replaced them entirely. I built three custom templates - admin-sidebar, admin-header, and admin-footer - tailored specifically for logged-in hospital staff. The result was a cohesive dashboard feel with full control over every pixel.

Custom Login Page

The default Power Pages login page honestly frustrated me every time I saw it. So I built a custom one - complete with Microsoft Entra and Google authentication. It immediately made the app feel more polished and enterprise-ready. Check out my blog about How to Customize the Sign in page in Power Pages Easily to know how I did that.

admin-sidebar.html

admin-header.html

admin-footer.html

The Small Details That Made a Big Difference

A favicon might seem trivial, but it signals credibility. I added one, and suddenly the browser tab looked like it belonged to a real product. Here is my blog about How to Add a Favicon in Power Pages? and do check out to know if you want to.

For charts and graphs, I skipped the built-in Power Apps charts - they felt too rigid for a custom dashboard. Instead, I used Chart.js, an open-source library that gave me colorful, interactive visuals with full creative control.

And for profile avatars, I used the UI Avatars API to generate initials-based profile images dynamically. One image tag. Zero effort. Looks great.

Finally

Building a custom admin dashboard in Power Pages is absolutely doable - you just need to know which defaults to override and which tools to bring in from outside. Bootstrap Icons, Chart.js, UI Avatars, and custom web templates each solved a specific problem without overcomplicating things.

References:

Have a great day!