Remix

Make your own version of PennyPilot Finance Dashboard

Get an exact, working copy in your account, then change anything with chat.

Original by Sahid Islam

What would you change?

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

# Build PennyPilot — Premium Personal Finance Dashboard Website

Create a polished, modern, browser-accessible, responsive, multi-page **WEBSITE, NOT a native mobile app**, called **PennyPilot**. It is a fictional personal finance dashboard concept created for the Digital Elevate web design portfolio.

**Tagline:** “Take control of your money.”

## 1. Visual Design
Create a premium fintech aesthetic inspired by high-quality financial SaaS dashboards. Use a clean off-white/light-gray background, deep navy text, emerald-green accents, subtle borders, rounded cards, tasteful shadows, and excellent typography. Include a collapsible sidebar, a clean top navigation bar, consistent spacing, and elegant charts. The design must feel professional, trustworthy, and production-ready—not like a generic AI-generated template.

## 2. Main Dashboard
Build an interactive overview containing:
- Total balance, monthly income, monthly expenses, and savings cards.
- A beautiful interactive income-versus-expenses chart with selectable time ranges.
- A spending breakdown chart by category.
- Recent transactions with merchant names, dates, categories, and amounts.
- A monthly budget overview with progress bars.
- A savings goal card showing progress toward a target.
- Clear positive and negative indicators without clutter.

Use realistic but entirely fictional demo data. Display a visible **“DEMO DATA — No real financial accounts connected”** notice. Do not request bank credentials or imply that real banking integrations exist.

## 3. Pages and Navigation
Create these functional pages with consistent styling:
1. **Dashboard** — financial overview, charts, and recent activity.
2. **Transactions** — searchable and filterable transaction table with category filters and income/expense indicators.
3. **Budgets** — category budgets, spending progress, and editable demo budget limits.
4. **Savings Goals** — goal cards, target amounts, saved amounts, and progress indicators.
5. **Monthly Reports** — monthly income, expenses, savings rate, category breakdowns, and a comparison with the previous month.

Navigation must work correctly. Every page must have meaningful content, not just a placeholder screen.

## 4. Functionality
- Use interactive charts and working date-range selectors.
- Make search, category filters, navigation, and relevant buttons functional.
- Allow users to edit demo budgets and savings goals, with changes reflected in the interface.
- Include realistic empty states and clear feedback after actions.
- Ensure all demo data is internally consistent across pages.
- Store demo changes locally if supported, but never collect sensitive financial information.

## 5. Responsive Design and Quality
Make the website fully responsive on desktop, tablet, and mobile browsers. Use readable typography, accessible contrast, clear hover and focus states, and intuitive layouts. Avoid broken links, fake integrations, nonfunctional buttons, excessive animations, and unnecessary decorative elements.

**Priority:** Focus first on visual quality, a complete dashboard, consistent demo data, and genuinely working core interactions. Build the complete experience in one coherent pass. Do not add authentication, real banking APIs, payment processing, or unnecessary features.

The final result should look like a premium fintech SaaS website that Digital Elevate could confidently showcase as a concept project to prospective web design clients.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.