# I redesigned the front-end style of DietPi-Dashboard. What do you guys think?

**URL:** https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978
**Category:** General Discussion
**Tags:** dietpi-dashboard
**Created:** [16 February 2026 00:41 UTC](https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978 "2026-02-16T00:41:45Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![CJackHwang](https://dietpi.com/forum/user_avatar/dietpi.com/cjackhwang/32/8759_2.png) [@CJackHwang](https://dietpi.com/forum/u/CJackHwang)
#### Post date: [16 February 2026 00:41 UTC](https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978/1 "2026-02-16T00:41:45Z")

</div>

I contributed to the front-end refactoring of DietPi-Dashboard, aiming to transform it from “plain and practical” to “modern and attractive.”

Key improvements: flicker-free dark mode, KPI cards, process pagination with persistent scrolling, responsive layout, and Chinese/English language switching.

> <https://github.com/nonnorm/DietPi-Dashboard/pull/1170>
>
> \## Summary
> 
> This PR redesigns the frontend panel UI and improves refresh behav…ior.
> 
> \### Changes
> 
> 1. Responsive layout improvements for cards, charts, sidebar, and lists.
> 2. Visual redesign with a minimalist black-and-white style and rounded corners.
> 3. Fixed brief flicker during page refresh when switching themes.
> 4. Added list pagination and internal scrolling.
> 5. Added i18n support for English and Chinese.
> 6. Improved refresh flow for smoother page updates.
> 
> \### Screenshots
> 
> \<img width="1280" height="683" alt="截屏2026-02-16 3 10 44" src="https://github.com/user-attachments/assets/846f1773-2dfe-4ea0-a353-c37c3bb16bc1" /\>
> \<img width="1280" height="678" alt="截屏2026-02-16 3 12 06" src="https://github.com/user-attachments/assets/0f257dd1-f4e8-45bd-a6c9-5031a7cf6581" /\>
> \<img width="1280" height="685" alt="截屏2026-02-16 3 10 58" src="https://github.com/user-attachments/assets/434c847d-8382-4e57-9052-38d8a9690214" /\>
> \<img width="1280" height="680" alt="截屏2026-02-16 3 12 14" src="https://github.com/user-attachments/assets/1bc9e814-9b3e-40ea-887b-d9ea332dddd9" /\>
> \<img width="1280" height="675" alt="截屏2026-02-16 3 11 11" src="https://github.com/user-attachments/assets/52c45bcc-0c96-4250-92a9-bd7c630df394" /\>
> \<img width="1280" height="677" alt="截屏2026-02-16 3 12 31" src="https://github.com/user-attachments/assets/f3b9d695-c004-406b-8431-fa4b89992d11" /\>
> \<img width="493" height="565" alt="截屏2026-02-16 3 13 17" src="https://github.com/user-attachments/assets/2e6e7159-6666-48f2-9220-7a6b066cfd4d" /\>
> \<img width="498" height="567" alt="截屏2026-02-16 3 13 26" src="https://github.com/user-attachments/assets/ceef56dc-db34-4889-9a3f-18e72539ca10" /\>
> \<img width="499" height="567" alt="截屏2026-02-16 3 13 43" src="https://github.com/user-attachments/assets/d958f49e-5a7a-416e-9883-abc91cdb618a" /\>
> 
> \### Verification
> 
> Tested on:
> \- Device: Orange Pi Zero3 2GB
> \- OS: DietPi v10.0.1
> \- Backend: v0.7.0
> \- Verification time: 2026-02-15 20:15 UTC
> 
> \<img width="1280" height="679" alt="截屏2026-02-16 5 53 32" src="https://github.com/user-attachments/assets/24beaff9-056a-4786-b8c6-5467c6ab46e1" /\>
> 
> Validated:
> 1. Desktop and mobile layouts render correctly.
> 2. Theme switching + refresh no longer flickers.
> 3. List pagination and internal scrolling work as expected.
> 4. Language switching (EN/ZH) works correctly.
> 5. Regular page refresh is stable and smooth.
> 
> \### Compatibility / Scope
> 
> \- No backend protocol changes.
> \- Frontend-focused changes only.

before

 ![IMG_20260216_015329](https://dietpi.com/forum/uploads/default/original/2X/8/829996107119d331b064234339301a5b63fdf3ad.jpeg)

 ![wx_camera_1771178093099](https://dietpi.com/forum/uploads/default/original/2X/d/d97e19910577b4a5fbf94f2005d9b2f02a86ce19.jpeg)

new

 ![550200268-434c847d-8382-4e57-9052-38d8a9690214](https://dietpi.com/forum/uploads/default/original/2X/e/ed71110f0484b365c95542d0690d90e66bc5ccf9.png)

 ![550200264-846f1773-2dfe-4ea0-a353-c37c3bb16bc1](https://dietpi.com/forum/uploads/default/original/2X/c/c74da000d1ec6915ac5b3df5db85764d8a19b440.png)

---

<div class="post-metadata">

### Author: ![TRHH](https://dietpi.com/forum/letter_avatar_proxy/v4/letter/t/ecb155/32.png) [@TRHH](https://dietpi.com/forum/u/TRHH)
#### Post date: [16 February 2026 01:01 UTC](https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978/2 "2026-02-16T01:01:13Z")

</div>

Looks great

Torben

---

<div class="post-metadata">

### Author: ![CJackHwang](https://dietpi.com/forum/user_avatar/dietpi.com/cjackhwang/32/8759_2.png) [@CJackHwang](https://dietpi.com/forum/u/CJackHwang)
#### Post date: [17 February 2026 13:54 UTC](https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978/3 "2026-02-17T13:54:12Z")

</div>

thank you！

---

<div class="post-metadata">

### Author: ![Heisenberg](https://dietpi.com/forum/user_avatar/dietpi.com/heisenberg/32/3994_2.png) [@Heisenberg](https://dietpi.com/forum/u/Heisenberg)
#### Post date: [20 February 2026 19:58 UTC](https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978/4 "2026-02-20T19:58:17Z")

</div>

The new one looks even better. 👌

---

<div class="post-metadata">

### Author: ![Eskimos2000](https://dietpi.com/forum/user_avatar/dietpi.com/eskimos2000/32/2639_2.png) [@Eskimos2000](https://dietpi.com/forum/u/Eskimos2000)
#### Post date: [22 February 2026 06:52 UTC](https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978/5 "2026-02-22T06:52:27Z")

</div>

**[  
TRHH](https://dietpi.com/forum/u/trhh)**

[6d](https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978/2 "Post date")

Looks clean. modern just 💪 great

---

<div class="post-metadata">

### Author: ![Jagoop](https://dietpi.com/forum/letter_avatar_proxy/v4/letter/j/b5ac83/32.png) [@Jagoop](https://dietpi.com/forum/u/Jagoop)
#### Post date: [22 February 2026 18:09 UTC](https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978/6 "2026-02-22T18:09:08Z")

</div>

Looks very sharp and modern. I do miss a small greenish hightlight somewhere, but it is a vast improvement.  
Good work!

---

<div class="post-metadata">

### Author: ![system](https://dietpi.com/forum/uploads/default/original/1X/7e1021de2213860bce185915ce2c1786e56490ec.png) [@system](https://dietpi.com/forum/u/system)
#### Post date: [21 August 2026 18:10 UTC](https://dietpi.com/forum/t/i-redesigned-the-front-end-style-of-dietpi-dashboard-what-do-you-guys-think/24978/7 "2026-08-21T18:10:01Z")

</div>

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.