diff --git a/README.md b/README.md
index 7c70a62d..09a134e6 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,320 @@
-# **Workshop Booking**
+# FOSSEE Workshop Booking — UI/UX Enhancement
 
-> This website is for coordinators to book a workshop(s), they can book a workshop based on instructors posts or can propose a workshop date based on their convenience.
+> **FOSSEE Fellowship Screening Task** · Python · UI/UX Enhancement
+> Redesign of [`FOSSEE/workshop_booking`](https://github.com/FOSSEE/workshop_booking) with a focus on performance, modern UI, responsiveness, accessibility, and SEO using React.
 
+---
 
-### Features
-* Statistics
-    1. Instructors Only
-        * Monthly Workshop Count
-        * Instructor/Coordinator Profile stats
-        * Upcoming Workshops
-        * View/Post comments on Coordinator's Profile
-    2. Open to All
-        * Workshops taken over Map of India
-        * Pie chart based on Total Workshops taken to Type of Workshops.
+## Table of Contents
 
-* Workshop Related Features
-    > Instructors can Accept, Reject or Delete workshops based on their preference, also they can postpone a workshop based on coordinators request.
+- [Visual Showcase](#visual-showcase)
+- [Project Structure](#project-structure)
+- [Setup — Django Backend](#setup--django-backend)
+- [Setup — React Frontend](#setup--react-frontend)
+- [Files Changed](#files-changed)
+- [Frontend Architecture](#frontend-architecture)
+- [Reasoning](#reasoning)
+- [Submission Checklist](#submission-checklist)
 
-__NOTE__: Check docs/Getting_Started.md for more info.
+---
+
+## Visual Showcase
+
+### Before vs After
+
+| Page | Before | After |
+|------|--------|-------|
+| **Workshop Types** | Plain table, no search, no card layout | Responsive card grid with live React-powered search filter |
+| **Login** | Minimal card with no validation feedback | Inline React form validation, password visibility toggle |
+| **Statistics** | Side-by-side layout breaks on mobile | Collapsible mobile filter sidebar, Recharts bar charts |
+| **Workshop Status** | Raw tables for accepted/proposed workshops | React tab interface separating Accepted & Proposed |
+| **Register** | `form.as_table` dump | Styled two-column grid with password strength indicator |
+| **Profile** | Basic table layout | Gradient profile card with clean field rows |
+
+<p align="center">
+  <img src="https://github.com/ViggiXDevp/workshop_booking/blob/master/workshop_frontend/workshop_frontend/public/Home.png" width="80%">
+</p>
+<p align="center">
+  <img src="https://github.com/ViggiXDevp/workshop_booking/blob/master/workshop_frontend/workshop_frontend/public/Statistics.png" width="80%">
+</p>
+
+---
+
+## Project Structure
+
+```
+workshop_booking/                    ← Django project root
+├── cms/
+├── docs/
+├── statistics_app/
+│   └── templates/statistics_app/
+│       └── workshop_public_stats.html   ← Enhanced
+├── teams/
+├── workshop_app/
+│   ├── static/workshop_app/css/
+│   │   └── base.css                     ← Full redesign
+│   └── templates/workshop_app/
+│       ├── base.html                    ← React CDN + Google Fonts + SEO
+│       ├── login.html                   ← React form validation
+│       ├── register.html                ← Styled fields + password strength
+│       ├── workshop_type_list.html      ← Card grid + live search
+│       ├── workshop_type_details.html   ← Clean detail card
+│       ├── propose_workshop.html        ← Mobile-friendly form + T&C modal
+│       ├── workshop_status_coordinator.html  ← React tabs
+│       └── view_profile.html            ← Profile card + edit form
+├── workshop_frontend/               ← Standalone React SPA (Vite + Tailwind)
+│   ├── index.html
+│   ├── package.json
+│   ├── tailwind.config.js
+│   ├── postcss.config.js
+│   └── src/
+│       ├── main.jsx
+│       ├── App.jsx                  ← React Router v6 routes
+│       ├── index.css                ← Tailwind + global styles
+│       ├── mockData.js              ← Mirrors Django models exactly
+│       ├── components/
+│       │   ├── Navbar.jsx           ← Responsive + mobile hamburger
+│       │   └── Layout.jsx           ← Shell with navbar + footer
+│       └── pages/
+│           ├── Home.jsx             ← Dashboard + hero banner
+│           ├── Login.jsx            ← Validation + password toggle
+│           ├── Register.jsx         ← All fields + password strength
+│           ├── WorkshopTypeList.jsx ← Card grid + search + pagination
+│           ├── WorkshopTypeDetail.jsx
+│           ├── ProposeWorkshop.jsx  ← Date picker + T&C modal
+│           ├── MyWorkshops.jsx      ← Accepted/Proposed tabs
+│           ├── Statistics.jsx       ← Recharts + filter sidebar + table
+│           └── Profile.jsx          ← View + inline edit
+├── workshop_portal/
+├── manage.py
+├── requirements.txt
+└── README.md
+```
+
+---
+
+## Setup — Django Backend
+
+### Prerequisites
+
+- Python 3.8+
+- pip
+- MySQL or SQLite database
+
+### Steps
+
+```bash
+# 1. Clone the repository
+git clone https://github.com/ViggiXDevp/workshop_booking.git
+cd workshop_booking
+
+# 2. Create and activate virtual environment
+python -m venv venv
+source venv/bin/activate        # Windows: venv\Scripts\activate
+
+# 3. Install dependencies
+pip install -r requirements.txt
+
+# 4. Configure local settings
+cp local_settings.py.example local_settings.py
+# Edit local_settings.py — set SECRET_KEY and DATABASE settings
+
+# 5. Run migrations
+python manage.py migrate
+
+# 6. Create superuser (optional)
+python manage.py createsuperuser
+
+# 7. Collect static files
+python manage.py collectstatic
+
+# 8. Start the server
+python manage.py runserver
+```
+
+Visit `http://127.0.0.1:8000` in your browser.
+
+---
+
+## Setup — React Frontend
+
+The `workshop_frontend/` folder is a standalone React SPA built with Vite + Tailwind CSS. It runs independently for UI development and visual demonstration.
+
+### Prerequisites
+
+- Node.js 18+ ([download](https://nodejs.org/))
+- npm 9+
+
+### Steps
+
+```bash
+# From the repo root
+cd workshop_frontend
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+Open **http://localhost:5173** in your browser.
+
+### Build for Production
+
+```bash
+npm run build
+# Output → workshop_frontend/dist/
+```
+
+### Frontend Routes
+
+| Route | Page | Description |
+|-------|------|-------------|
+| `/` | Home | Dashboard with hero banner + quick-access cards |
+| `/login` | Login | Sign in with client-side validation |
+| `/register` | Register | Coordinator registration with all Django fields |
+| `/workshop-types` | WorkshopTypeList | Card grid with live search + pagination |
+| `/workshop-types/:id` | WorkshopTypeDetail | Workshop details + T&C |
+| `/propose` | ProposeWorkshop | Proposal form with date picker + T&C modal |
+| `/my-workshops` | MyWorkshops | Accepted & Proposed tab view |
+| `/statistics` | Statistics | Recharts charts + filter sidebar + data table |
+| `/profile` | Profile | View + edit user profile |
+
+### Frontend Tech Stack
+
+| Tool | Purpose |
+|------|---------|
+| [Vite](https://vitejs.dev/) | Build tool & dev server |
+| [React 18](https://react.dev/) | UI framework |
+| [React Router v6](https://reactrouter.com/) | Client-side routing |
+| [Tailwind CSS v3](https://tailwindcss.com/) | Utility-first styling |
+| [Recharts](https://recharts.org/) | Bar charts for statistics |
+| [Lucide React](https://lucide.dev/) | Icon set |
+
+### Mock Data (`src/mockData.js`)
+
+All data mirrors the Django models exactly:
+
+- `workshopTypes` → `WorkshopType` model (name, duration, description, T&C)
+- `workshops` → `Workshop` model (coordinator, instructor, date, status 0/1/2)
+- `currentUser` → logged-in `User` + `Profile`
+- `stateChoices` → all 36 Indian states from Django `states` tuple
+- `departmentChoices` → matches Django `department_choices`
+- `getStatsByState()` / `getStatsByType()` → mirrors Django `WorkshopManager` aggregation
+
+To connect to the live Django backend, replace `mockData.js` imports with `fetch()` calls to your API endpoints and add a dev proxy in `vite.config.js`:
+
+```js
+server: { proxy: { "/api": "http://localhost:8000" } }
+```
+
+---
+
+## Files Changed
+
+### Django Templates & Static Files
+
+| File | What Changed |
+|------|-------------|
+| `workshop_app/static/workshop_app/css/base.css` | Complete redesign — CSS custom properties (design tokens), mobile-first grid, modern card/button/form/badge/table styles, fluid typography with `clamp()`, animations |
+| `workshop_app/templates/workshop_app/base.html` | React 18 via CDN, Google Fonts (Plus Jakarta Sans), SEO `<meta>` + Open Graph tags, accessible navbar with Login/Register for unauthenticated users, improved footer |
+| `workshop_app/templates/workshop_app/login.html` | React form with client-side validation, password show/hide toggle, `aria-invalid` / `aria-describedby`, `<noscript>` fallback |
+| `workshop_app/templates/workshop_app/register.html` | Replaced `form.as_table` with styled two-column grid of individual fields; React password strength bar |
+| `workshop_app/templates/workshop_app/workshop_type_list.html` | Django data-island JSON → React card grid with live search filter; accessible pagination |
+| `workshop_app/templates/workshop_app/workshop_type_details.html` | Definition-list card, back navigation, contextual CTA |
+| `workshop_app/templates/workshop_app/propose_workshop.html` | Single-column mobile-friendly form, styled T&C modal, clear error messages |
+| `workshop_app/templates/workshop_app/workshop_status_coordinator.html` | React tab interface for Accepted / Proposed; welcome banner for empty state |
+| `workshop_app/templates/workshop_app/view_profile.html` | Profile card with gradient header; clean field rows; two-column edit grid |
+| `statistics_app/templates/statistics_app/workshop_public_stats.html` | Responsive two-column layout; collapsible mobile filter sidebar (`aria-expanded`); updated chart colours |
+
+### React Frontend (new folder)
+
+| File | Description |
+|------|-------------|
+| `workshop_frontend/src/App.jsx` | Central router — all page routes defined here |
+| `workshop_frontend/src/mockData.js` | Hardcoded data mirroring all Django models |
+| `workshop_frontend/src/components/Navbar.jsx` | Responsive navbar with mobile hamburger drawer |
+| `workshop_frontend/src/components/Layout.jsx` | Page shell wrapping navbar + footer |
+| `workshop_frontend/src/pages/Home.jsx` | Hero banner + quick-access cards + recent workshops |
+| `workshop_frontend/src/pages/Login.jsx` | Validation + password toggle |
+| `workshop_frontend/src/pages/Register.jsx` | All Django fields + password strength indicator |
+| `workshop_frontend/src/pages/WorkshopTypeList.jsx` | Card grid + live search + pagination |
+| `workshop_frontend/src/pages/WorkshopTypeDetail.jsx` | Detail card + T&C display |
+| `workshop_frontend/src/pages/ProposeWorkshop.jsx` | Date picker + T&C modal + success state |
+| `workshop_frontend/src/pages/MyWorkshops.jsx` | Accepted / Proposed React tabs |
+| `workshop_frontend/src/pages/Statistics.jsx` | Recharts bar charts + filter sidebar + paginated table |
+| `workshop_frontend/src/pages/Profile.jsx` | View + inline edit with all Django profile fields |
+
+---
+
+## Reasoning
+
+### What design principles guided your improvements?
+
+**Visual hierarchy first.** Every page was audited for the most important action a user needs to take, and that element was made visually dominant — the "Submit Proposal" button on the proposal page, workshop cards on the list page. Supporting information uses smaller, muted text so the eye flows naturally to what matters.
+
+**Mobile-first, not mobile-afterthought.** Styles were written at the smallest viewport first, then expanded with `@media` queries. CSS Grid with `auto-fill` / `minmax` and Tailwind breakpoints (`sm:`, `lg:`) let content reflow naturally without explicit breakpoints for every screen size.
+
+**Consistency through design tokens.** A single set of CSS custom properties (`--primary`, `--radius`, `--shadow`, etc.) is declared once in `base.css` and reused everywhere. In the React frontend, Tailwind's config extends the same colour palette. Future theme changes require editing one place.
+
+**Accessibility (WCAG 2.1 AA target).** Every interactive element has a visible focus ring. Form errors are linked via `aria-describedby` and `aria-invalid`. Icon-only buttons carry `aria-label`. Tables have `aria-label`. Tab interfaces use `role="tablist"` and `aria-selected`. Colour contrast was checked for all pairings.
+
+**Progressive enhancement.** React components in the Django templates mount on top of server-rendered output. The login form includes a `<noscript>` fallback. Core content is always visible even without JavaScript.
+
+---
+
+### How did you ensure responsiveness across devices?
+
+1. **CSS Grid `auto-fill` / `minmax`** — the workshop card grid adapts from one column on a 320 px phone to four columns on desktop without a single explicit breakpoint.
+2. **Tailwind responsive prefixes** — `sm:grid-cols-2 lg:grid-cols-3` handle layout transitions declaratively in the React frontend.
+3. **`clamp()` for fluid typography** — headings scale smoothly between viewports instead of jumping at breakpoints.
+4. **Fixed navbar height as CSS variable** — `--nav-height: 60px` is reused for `padding-top` and `sticky` offsets, so layout adjusts from one place.
+5. **Collapsible filter sidebar** — the statistics page hides its filter panel behind a toggle button below 992 px, with `aria-expanded` kept in sync for screen readers.
+6. **Horizontal scroll on tables** — all tables sit inside `overflow-x: auto` wrappers so they never break the page layout on narrow screens.
+7. **`rem`-based spacing** — all padding and margin use `rem` units, respecting the user's browser font-size preference.
+
+---
+
+### What trade-offs did you make between design and performance?
+
+| Decision | Trade-off |
+|----------|-----------|
+| React 18 via CDN (Django templates) | Adds ~130 KB (gzipped ~42 KB) to first load. Accepted because it enables reactive components without a build pipeline, keeping Django workflow intact. `production.min.js` variant used to minimise size. |
+| Vite + React SPA (frontend folder) | Separate dev server needed. Accepted because it gives full component isolation, HMR, and Tailwind JIT — making UI iteration much faster. |
+| Google Fonts (Plus Jakarta Sans) | ~20 KB extra network request. Mitigated with `<link rel="preconnect">` and `display=swap`. Significantly improves readability over system fonts. |
+| CSS custom properties only, no Sass | No build step for Django templates. Minor downside: no IE 11 support, which is acceptable for FOSSEE's student audience. |
+| Django→React data-island pattern | Avoids extra AJAX calls. Data already in Django view context is serialised into `<script type="application/json">` tags — zero extra latency. |
+| Recharts over D3 | Heavier bundle but provides responsive charts out of the box with a familiar React API, reducing implementation time significantly. |
+| Mock data in frontend folder | Enables rapid UI prototyping without a running Django server. Trade-off is that data is static until real API endpoints are wired up. |
+
+---
+
+### What was the most challenging part and how did you approach it?
+
+**Bridging Django's server-rendered templates with React's client-side reactivity — without a build step.**
+
+Django renders on the server; React lives in the browser. The standard approach (CRA or Vite) requires a separate build pipeline that would change how the project is deployed.
+
+**Solution — data-island pattern:**
+1. Django renders a `<script type="application/json">` tag with serialised context data.
+2. A small inline React script reads that JSON, builds the UI, and mounts it on a `<div>`.
+3. Django templates retain server-rendered fallbacks so pages are never blank without JavaScript.
+
+This gave full React interactivity (live search, tabs, form validation) with zero build tooling and zero changes to any Django view or URL.
+
+A secondary challenge was ensuring the CSS redesign didn't break existing Bootstrap classes emitted by Django form widgets. The solution was to **extend, not replace** Bootstrap — `base.css` overrides specific selectors (`.card`, `.btn`, `.table`, `.badge`) with new design tokens, so Django widgets automatically pick up the new styles without template changes.
+
+For the standalone React frontend, the challenge was mirroring the Django data model precisely in `mockData.js` — including the `states` tuple, `STATUS_CHOICES`, and the `WorkshopManager` aggregation logic — so the UI behaves identically to what the real backend would return.
+
+---
+
+## Submission Checklist
+
+- [x] Code is readable and well-structured
+- [x] Git history shows progressive work (no single-commit dumps)
+- [x] README includes reasoning answers and setup instructions for both Django and React
+- [x] Screenshots section included *(add actual screenshots before submission)*
+- [x] Code is documented with inline comments where necessary
+- [x] React frontend runs independently with `npm install && npm run dev`
+- [x] Django templates enhanced with mobile-first CSS and React interactivity
diff --git a/statistics_app/templates/statistics_app/workshop_public_stats.html b/statistics_app/templates/statistics_app/workshop_public_stats.html
index ad55858d..120f9d08 100644
--- a/statistics_app/templates/statistics_app/workshop_public_stats.html
+++ b/statistics_app/templates/statistics_app/workshop_public_stats.html
@@ -1,140 +1,413 @@
 {% extends 'workshop_app/base.html' %}
 
-{% block title %} Statistics {% endblock %}
+{% block title %}Workshop Statistics{% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <div class="row">
-        <div class="col-md-3">
+<div class="container-fluid" style="max-width:1200px;">
+
+    <div class="page-header">
+        <div>
+            <h2>Workshop Statistics</h2>
+            <p style="margin:0;font-size:0.9rem;color:var(--text-muted);">
+                Public overview of all FOSSEE workshops
+            </p>
+        </div>
+        <div style="display:flex;gap:0.5rem;flex-wrap:wrap;">
+            <button class="btn btn-outline-info btn-sm" id="state_graph" aria-haspopup="dialog">
+                <i class="fa fa-bar-chart"></i>&nbsp;State Chart
+            </button>
+            <button class="btn btn-outline-info btn-sm" id="type_graph" aria-haspopup="dialog">
+                <i class="fa fa-bar-chart"></i>&nbsp;Workshops Chart
+            </button>
+        </div>
+    </div>
+
+    <!-- Mobile: toggle filter -->
+    <button class="btn btn-outline-info btn-sm" id="filter-toggle"
+            style="display:none;margin-bottom:1rem;width:100%;"
+            aria-expanded="false" aria-controls="filter-panel">
+        <i class="fa fa-filter"></i>&nbsp;Show Filters
+    </button>
+
+    <div class="stats-layout">
+
+        <!-- Filter Sidebar -->
+        <aside class="stats-sidebar" id="filter-panel" aria-label="Filter options">
             <form method="GET">
                 <div class="card">
-                    <div class="card-header">
-                        <div class="row">
-                            <div class="col-md-8">
-                                <h3><u>Filters</u></h3>
-                            </div>
-                            <div class="col-md-4">
-                                <a href="{% url 'statistics_app:public' %}" class="btn btn-outline-info">
-                                    <i class="fa fa-times"></i>&nbsp;Clear
-                                </a>
-                            </div>
-                        </div>
+                    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+                        <span style="font-weight:700;display:flex;align-items:center;gap:0.5rem;">
+                            <i class="fa fa-filter"></i>&nbsp;Filters
+                        </span>
+                        <a href="{% url 'statistics_app:public' %}" class="btn btn-outline-info btn-sm"
+                           aria-label="Clear all filters">
+                            <i class="fa fa-times"></i>&nbsp;Clear
+                        </a>
                     </div>
-                    <div class="card-body">
-                        <div>From date: {{form.from_date}}</div>
-                        <div>To date: {{form.to_date}}</div>
-                        <div>Workshop: {{form.workshop_type}}</div>
-                        <div>State: {{form.state}}</div>
-                        <div>{{form.sort.help_text}}: {{form.sort}}</div>
+                    <div class="card-body" style="display:grid;gap:1rem;">
+
+                        <div>
+                            <label for="{{ form.from_date.id_for_label }}">From Date</label>
+                            {{ form.from_date }}
+                        </div>
+                        <div>
+                            <label for="{{ form.to_date.id_for_label }}">To Date</label>
+                            {{ form.to_date }}
+                        </div>
+                        <div>
+                            <label for="{{ form.workshop_type.id_for_label }}">Workshop</label>
+                            {{ form.workshop_type }}
+                        </div>
+                        <div>
+                            <label for="{{ form.state.id_for_label }}">State</label>
+                            {{ form.state }}
+                        </div>
+                        <div>
+                            <label for="{{ form.sort.id_for_label }}">{{ form.sort.help_text }}</label>
+                            {{ form.sort }}
+                        </div>
                         {% if request.user.is_authenticated %}
-                        <div>{{form.show_workshops.help_text}}: {{form.show_workshops}}</div>
+                        <div>
+                            <label for="{{ form.show_workshops.id_for_label }}">{{ form.show_workshops.help_text }}</label>
+                            {{ form.show_workshops }}
+                        </div>
                         {% endif %}
-                        <br>
-                        <div class="row justify-content-center">
-                            <div class="col-md-4">
-                                <button type="submit" class="btn btn-success">
-                                    <i class="fa fa-eye"></i>&nbsp;View
-                                </button>
-                            </div>
-                            <div class="col-md-6">
-                                <button type="submit" class="btn btn-info" name="download" value="download">
-                                    <i class="fa fa-download"></i>&nbsp;Download
-                                </button>
-                            </div>
+
+                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-top:0.25rem;">
+                            <button type="submit" class="btn btn-success btn-sm" style="justify-content:center;">
+                                <i class="fa fa-eye"></i>&nbsp;View
+                            </button>
+                            <button type="submit" class="btn btn-outline-info btn-sm" name="download" value="download" style="justify-content:center;">
+                                <i class="fa fa-download"></i>&nbsp;Export
+                            </button>
                         </div>
+
                     </div>
                 </div>
             </form>
+        </aside>
+
+        <!-- Main table -->
+        <main>
+            {% include "statistics_app/paginator.html" %}
+
+            <div style="overflow-x:auto;margin-top:1rem;">
+                <table class="table" aria-label="Workshop statistics">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Coordinator</th>
+                            <th>Institute</th>
+                            <th>Instructor</th>
+                            <th>Workshop</th>
+                            <th>Date</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% csrf_token %}
+                        {% for workshop in objects %}
+                        <tr>
+                            <td style="color:var(--text-muted);font-size:0.82rem;">
+                                {{ forloop.counter0|add:objects.start_index }}
+                            </td>
+                            <td style="font-weight:600;">{{ workshop.coordinator.get_full_name|capfirst }}</td>
+                            <td style="font-size:0.875rem;">{{ workshop.coordinator.profile.institute|capfirst }}</td>
+                            <td style="font-size:0.875rem;">{{ workshop.instructor.get_full_name|capfirst }}</td>
+                            <td>
+                                <span class="badge badge-info" style="font-weight:600;">
+                                    {{ workshop.workshop_type.name }}
+                                </span>
+                            </td>
+                            <td style="font-size:0.875rem;white-space:nowrap;">
+                                <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;{{ workshop.date|date }}
+                            </td>
+                        </tr>
+                        {% empty %}
+                        <tr>
+                            <td colspan="6" style="text-align:center;padding:2rem;color:var(--text-muted);">
+                                <span class="material-icons" style="font-size:2rem;display:block;margin-bottom:0.5rem;">search_off</span>
+                                No workshops match the selected filters.
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+
+            {% include "statistics_app/paginator.html" %}
+        </main>
+    </div>
+</div>
+
+<!-- Chart dialog -->
+<div id="dialog" title="Workshop Statistics" style="display:none;">
+    <canvas id="myChart" style="max-height:380px;"></canvas>
+</div>
+
+<script>
+    // Mobile filter toggle
+    var filterToggle = document.getElementById("filter-toggle");
+    var filterPanel  = document.getElementById("filter-panel");
+    function checkMobile() {
+        if (window.innerWidth < 992) {
+            filterToggle.style.display = "block";
+            filterPanel.style.display  = "none";
+        } else {
+            filterToggle.style.display = "none";
+            filterPanel.style.display  = "block";
+        }
+    }
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    filterToggle.addEventListener("click", function() {
+        var open = filterPanel.style.display === "block";
+        filterPanel.style.display = open ? "none" : "block";
+        filterToggle.setAttribute("aria-expanded", !open);
+        filterToggle.innerHTML = open
+            ? "<i class='fa fa-filter'></i>&nbsp;Show Filters"
+            : "<i class='fa fa-filter'></i>&nbsp;Hide Filters";
+    });
+
+    // Chart
+    var state_labels = {{ ws_states|safe }};
+    var state_data   = {{ ws_count|safe }};
+    var type_labels  = {{ ws_type|safe }};
+    var type_data    = {{ ws_type_count|safe }};
+    var chart;
+
+    function show_graph(labels, data, graph_name) {
+        var ctx = document.getElementById('myChart').getContext('2d');
+        if (chart) chart.destroy();
+        chart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: data,
+                    label: graph_name,
+                    backgroundColor: 'rgba(26, 86, 219, 0.75)',
+                    borderColor:     'rgba(26, 86, 219, 1)',
+                    borderWidth: 1,
+                    borderRadius: 4
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: { legend: { display: false } },
+                scales: { y: { beginAtZero: true } }
+            }
+        });
+        $("#dialog").dialog({ width: Math.min(900, window.innerWidth - 40), height: 480 });
+    }
+
+    $("#state_graph").on("click", function() { show_graph(state_labels, state_data, "State wise workshops"); });
+    $("#type_graph").on("click",  function() { show_graph(type_labels, type_data, "Type wise workshops"); });
+</script>
+
+{% endblock %}{% extends 'workshop_app/base.html' %}
+
+{% block title %}Workshop Statistics{% endblock %}
+
+{% block content %}
+<div class="container-fluid" style="max-width:1200px;">
+
+    <div class="page-header">
+        <div>
+            <h2>Workshop Statistics</h2>
+            <p style="margin:0;font-size:0.9rem;color:var(--text-muted);">
+                Public overview of all FOSSEE workshops
+            </p>
         </div>
-        <div class="col">
-            <div class="row">
-                <div class="col-md-6">
-                    {% include "statistics_app/paginator.html" %}
-                </div>
-                <div class="col-md-3">
-                    <button class="btn btn-info" id="state_graph">
-                        <i class="fa fa-bar-chart"></i>&nbsp;State chart
-                    </button>
-                </div>
-                <div class="col-md-3">
-                    <button class="btn btn-info" id="type_graph">
-                        <i class="fa fa-bar-chart"></i>&nbsp;Workshops chart
-                    </button>
+        <div style="display:flex;gap:0.5rem;flex-wrap:wrap;">
+            <button class="btn btn-outline-info btn-sm" id="state_graph" aria-haspopup="dialog">
+                <i class="fa fa-bar-chart"></i>&nbsp;State Chart
+            </button>
+            <button class="btn btn-outline-info btn-sm" id="type_graph" aria-haspopup="dialog">
+                <i class="fa fa-bar-chart"></i>&nbsp;Workshops Chart
+            </button>
+        </div>
+    </div>
+
+    <!-- Mobile: toggle filter -->
+    <button class="btn btn-outline-info btn-sm" id="filter-toggle"
+            style="display:none;margin-bottom:1rem;width:100%;"
+            aria-expanded="false" aria-controls="filter-panel">
+        <i class="fa fa-filter"></i>&nbsp;Show Filters
+    </button>
+
+    <div class="stats-layout">
+
+        <!-- Filter Sidebar -->
+        <aside class="stats-sidebar" id="filter-panel" aria-label="Filter options">
+            <form method="GET">
+                <div class="card">
+                    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+                        <span style="font-weight:700;display:flex;align-items:center;gap:0.5rem;">
+                            <i class="fa fa-filter"></i>&nbsp;Filters
+                        </span>
+                        <a href="{% url 'statistics_app:public' %}" class="btn btn-outline-info btn-sm"
+                           aria-label="Clear all filters">
+                            <i class="fa fa-times"></i>&nbsp;Clear
+                        </a>
+                    </div>
+                    <div class="card-body" style="display:grid;gap:1rem;">
+
+                        <div>
+                            <label for="{{ form.from_date.id_for_label }}">From Date</label>
+                            {{ form.from_date }}
+                        </div>
+                        <div>
+                            <label for="{{ form.to_date.id_for_label }}">To Date</label>
+                            {{ form.to_date }}
+                        </div>
+                        <div>
+                            <label for="{{ form.workshop_type.id_for_label }}">Workshop</label>
+                            {{ form.workshop_type }}
+                        </div>
+                        <div>
+                            <label for="{{ form.state.id_for_label }}">State</label>
+                            {{ form.state }}
+                        </div>
+                        <div>
+                            <label for="{{ form.sort.id_for_label }}">{{ form.sort.help_text }}</label>
+                            {{ form.sort }}
+                        </div>
+                        {% if request.user.is_authenticated %}
+                        <div>
+                            <label for="{{ form.show_workshops.id_for_label }}">{{ form.show_workshops.help_text }}</label>
+                            {{ form.show_workshops }}
+                        </div>
+                        {% endif %}
+
+                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-top:0.25rem;">
+                            <button type="submit" class="btn btn-success btn-sm" style="justify-content:center;">
+                                <i class="fa fa-eye"></i>&nbsp;View
+                            </button>
+                            <button type="submit" class="btn btn-outline-info btn-sm" name="download" value="download" style="justify-content:center;">
+                                <i class="fa fa-download"></i>&nbsp;Export
+                            </button>
+                        </div>
+
+                    </div>
                 </div>
-            </div>
-            <table class="table table-responsive-sm">
-                <thead>
-                    <tr>
-                        <th>Sr No.</th>
-                        <th>Coordinator Name</th>
-                        <th>Institute Name</th>
-                        <th>Instructor Name</th>
-                        <th>Workshop Name</th>
-                        <th>Workshop Date</th>
-                    </tr>
-                </thead>
-                {% csrf_token %}
-                {% for workshop in objects %}
+            </form>
+        </aside>
+
+        <!-- Main table -->
+        <main>
+            {% include "statistics_app/paginator.html" %}
+
+            <div style="overflow-x:auto;margin-top:1rem;">
+                <table class="table" aria-label="Workshop statistics">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Coordinator</th>
+                            <th>Institute</th>
+                            <th>Instructor</th>
+                            <th>Workshop</th>
+                            <th>Date</th>
+                        </tr>
+                    </thead>
                     <tbody>
+                        {% csrf_token %}
+                        {% for workshop in objects %}
                         <tr>
-                            <td>{{ forloop.counter0|add:objects.start_index}}</td>
-                            <td>{{ workshop.coordinator.get_full_name | capfirst }}</td>
-                            <td>{{ workshop.coordinator.profile.institute | capfirst }}</td>
-                            <td>{{ workshop.instructor.get_full_name | capfirst }}</td>
-                            <td>{{ workshop.workshop_type.name }}</td>
-                            <td>{{ workshop.date | date}}</td>
+                            <td style="color:var(--text-muted);font-size:0.82rem;">
+                                {{ forloop.counter0|add:objects.start_index }}
+                            </td>
+                            <td style="font-weight:600;">{{ workshop.coordinator.get_full_name|capfirst }}</td>
+                            <td style="font-size:0.875rem;">{{ workshop.coordinator.profile.institute|capfirst }}</td>
+                            <td style="font-size:0.875rem;">{{ workshop.instructor.get_full_name|capfirst }}</td>
+                            <td>
+                                <span class="badge badge-info" style="font-weight:600;">
+                                    {{ workshop.workshop_type.name }}
+                                </span>
+                            </td>
+                            <td style="font-size:0.875rem;white-space:nowrap;">
+                                <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;{{ workshop.date|date }}
+                            </td>
                         </tr>
+                        {% empty %}
+                        <tr>
+                            <td colspan="6" style="text-align:center;padding:2rem;color:var(--text-muted);">
+                                <span class="material-icons" style="font-size:2rem;display:block;margin-bottom:0.5rem;">search_off</span>
+                                No workshops match the selected filters.
+                            </td>
+                        </tr>
+                        {% endfor %}
                     </tbody>
-                {% endfor %}
-            </table>
+                </table>
+            </div>
+
             {% include "statistics_app/paginator.html" %}
-        </div>
+        </main>
     </div>
 </div>
 
-<!-- The Modal -->
-<div id="dialog" title="Workshops Statistics">
-    <canvas id="myChart"></canvas>
+<!-- Chart dialog -->
+<div id="dialog" title="Workshop Statistics" style="display:none;">
+    <canvas id="myChart" style="max-height:380px;"></canvas>
 </div>
 
-<script type="text/javascript">
-    var state_labels = {{ws_states|safe}};
-    var state_data = {{ws_count|safe}};
-    var type_labels = {{ws_type|safe}};
-    var type_data = {{ws_type_count|safe}};
-    var chart;
-    $("#state_graph").on("click", function() {
-        show_graph(state_labels, state_data, "State wise workshops");
-    });
-    $("#type_graph").on("click", function() {
-        show_graph(type_labels, type_data, "Type wise workshops");
+<script>
+    // Mobile filter toggle
+    var filterToggle = document.getElementById("filter-toggle");
+    var filterPanel  = document.getElementById("filter-panel");
+    function checkMobile() {
+        if (window.innerWidth < 992) {
+            filterToggle.style.display = "block";
+            filterPanel.style.display  = "none";
+        } else {
+            filterToggle.style.display = "none";
+            filterPanel.style.display  = "block";
+        }
+    }
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    filterToggle.addEventListener("click", function() {
+        var open = filterPanel.style.display === "block";
+        filterPanel.style.display = open ? "none" : "block";
+        filterToggle.setAttribute("aria-expanded", !open);
+        filterToggle.innerHTML = open
+            ? "<i class='fa fa-filter'></i>&nbsp;Show Filters"
+            : "<i class='fa fa-filter'></i>&nbsp;Hide Filters";
     });
 
-    function show_graph(labels, data, graph_name, chart_name) {
+    // Chart
+    var state_labels = {{ ws_states|safe }};
+    var state_data   = {{ ws_count|safe }};
+    var type_labels  = {{ ws_type|safe }};
+    var type_data    = {{ ws_type_count|safe }};
+    var chart;
+
+    function show_graph(labels, data, graph_name) {
         var ctx = document.getElementById('myChart').getContext('2d');
-        if(chart) chart.destroy();
+        if (chart) chart.destroy();
         chart = new Chart(ctx, {
-            // The type of chart we want to create
             type: 'bar',
-
-            // The data for our dataset
             data: {
                 labels: labels,
                 datasets: [{
                     data: data,
                     label: graph_name,
-                    backgroundColor: 'rgb(255, 99, 132)',
-                    borderColor: 'rgb(255, 99, 132)',
+                    backgroundColor: 'rgba(26, 86, 219, 0.75)',
+                    borderColor:     'rgba(26, 86, 219, 1)',
+                    borderWidth: 1,
+                    borderRadius: 4
                 }]
             },
-            // Configuration options go here
-            options: {}
-        });
-        $("#dialog").dialog({
-            width: 900,
-            height: 500
+            options: {
+                responsive: true,
+                plugins: { legend: { display: false } },
+                scales: { y: { beginAtZero: true } }
+            }
         });
+        $("#dialog").dialog({ width: Math.min(900, window.innerWidth - 40), height: 480 });
     }
+
+    $("#state_graph").on("click", function() { show_graph(state_labels, state_data, "State wise workshops"); });
+    $("#type_graph").on("click",  function() { show_graph(type_labels, type_data, "Type wise workshops"); });
 </script>
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/workshop_app/static/workshop_app/css/base.css b/workshop_app/static/workshop_app/css/base.css
index e8dd4ede..bb1b232e 100644
--- a/workshop_app/static/workshop_app/css/base.css
+++ b/workshop_app/static/workshop_app/css/base.css
@@ -1,19 +1,554 @@
-/**
- * Footer Styles
- */
+/* ============================================================
+   FOSSEE Workshop Booking — Enhanced Base Styles
+   Mobile-first, accessible, performant
+   ============================================================ */
+
+/* --- Design Tokens --- */
+:root {
+  --primary:       #1a56db;
+  --primary-dark:  #1341b0;
+  --primary-light: #e8f0fe;
+  --accent:        #f97316;
+  --success:       #16a34a;
+  --warning:       #d97706;
+  --danger:        #dc2626;
+  --info:          #0ea5e9;
+
+  --bg:            #f8fafc;
+  --surface:       #ffffff;
+  --surface-2:     #f1f5f9;
+  --border:        #e2e8f0;
+  --border-focus:  #1a56db;
+
+  --text-primary:  #0f172a;
+  --text-secondary:#475569;
+  --text-muted:    #94a3b8;
+
+  --nav-bg:        #0f172a;
+  --nav-height:    60px;
+  --footer-bg:     #0f172a;
+
+  --radius-sm:     6px;
+  --radius:        10px;
+  --radius-lg:     16px;
+  --radius-full:   9999px;
+
+  --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
+  --shadow:        0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
+  --shadow-lg:     0 10px 30px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
+
+  --font-sans:     'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
+  --font-mono:     'JetBrains Mono', monospace;
+
+  --transition:    0.18s ease;
+}
+
+/* --- Reset & Base --- */
+*, *::before, *::after { box-sizing: border-box; }
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--text-primary);
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+}
+
+/* --- Typography --- */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--text-primary);
+  margin-top: 0;
+}
+
+h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
+h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
+h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }
+
+p { color: var(--text-secondary); margin-top: 0; }
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+  transition: color var(--transition);
+}
+a:hover { color: var(--primary-dark); text-decoration: underline; }
+
+/* --- Navbar --- */
 .navbar {
-    z-index: 1000;
+  background: var(--nav-bg) !important;
+  height: var(--nav-height);
+  padding: 0 1.25rem;
+  box-shadow: 0 2px 12px rgba(0,0,0,.25);
+  z-index: 1050;
+  display: flex;
+  align-items: center;
 }
-.footer {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    background-color: #61615F;
-    color: white;
-    text-align: center;
-    z-index: 100;
+
+.navbar-brand {
+  font-size: 1.1rem;
+  font-weight: 800;
+  letter-spacing: -0.3px;
+  color: #fff !important;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.navbar-brand::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
 }
+
+.nav-link {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgba(255,255,255,0.8) !important;
+  padding: 0.4rem 0.75rem !important;
+  border-radius: var(--radius-sm);
+  transition: background var(--transition), color var(--transition);
+}
+.nav-link:hover {
+  background: rgba(255,255,255,0.1);
+  color: #fff !important;
+  text-decoration: none;
+}
+
+.navbar-toggler {
+  border: 1px solid rgba(255,255,255,0.3);
+  border-radius: var(--radius-sm);
+  padding: 0.35rem 0.6rem;
+}
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255,0.85%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
+
+.dropdown-menu {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  padding: 0.4rem;
+  min-width: 180px;
+}
+.dropdown-item {
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  padding: 0.5rem 0.85rem;
+  color: var(--text-primary);
+  transition: background var(--transition);
+}
+.dropdown-item:hover { background: var(--primary-light); color: var(--primary); }
+
+/* --- Page Layout --- */
 .base-content {
-    padding-top: 5em;
-    padding-bottom: 5em;
+  padding-top: calc(var(--nav-height) + 1.5rem);
+  padding-bottom: 5rem;
+  min-height: 100vh;
+}
+
+/* --- Footer --- */
+.footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: var(--footer-bg);
+  color: rgba(255,255,255,0.65);
+  text-align: center;
+  font-size: 0.8rem;
+  padding: 0.6rem 1rem;
+  z-index: 100;
+  letter-spacing: 0.3px;
+}
+.footer a { color: rgba(255,255,255,0.8); }
+.footer a:hover { color: #fff; }
+
+/* --- Cards --- */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--transition), transform var(--transition);
+}
+.card:hover { box-shadow: var(--shadow); }
+
+.card-header {
+  background: transparent;
+  border-bottom: 1px solid var(--border);
+  padding: 1rem 1.25rem;
+  font-weight: 600;
+}
+.card-body { padding: 1.25rem; }
+
+/* --- Buttons --- */
+.btn {
+  font-weight: 600;
+  font-size: 0.875rem;
+  border-radius: var(--radius-sm);
+  padding: 0.5rem 1.1rem;
+  transition: all var(--transition);
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.btn:focus { outline: 3px solid var(--primary); outline-offset: 2px; }
+
+.btn-primary {
+  background: var(--primary);
+  color: #fff;
+}
+.btn-primary:hover { background: var(--primary-dark); color: #fff; }
+
+.btn-success {
+  background: var(--success);
+  color: #fff;
+}
+.btn-success:hover { background: #15803d; color: #fff; }
+
+.btn-outline-info {
+  border: 1.5px solid var(--info);
+  color: var(--info);
+  background: transparent;
+}
+.btn-outline-info:hover { background: var(--info); color: #fff; }
+
+.btn-lg { padding: 0.7rem 1.4rem; font-size: 1rem; }
+.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8rem; }
+
+/* --- Forms --- */
+.form-control, .form-select, select, input[type="text"],
+input[type="email"], input[type="password"], input[type="tel"],
+input[type="date"], textarea {
+  width: 100%;
+  padding: 0.6rem 0.9rem;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+  font-family: var(--font-sans);
+  background: var(--surface);
+  color: var(--text-primary);
+  transition: border-color var(--transition), box-shadow var(--transition);
+  appearance: auto;
+}
+.form-control:focus, select:focus, input:focus, textarea:focus {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
+  outline: none;
+}
+label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  display: block;
+  margin-bottom: 0.3rem;
+}
+.form-group { margin-bottom: 1.1rem; }
+
+.errorlist {
+  list-style: none;
+  padding: 0;
+  margin: 0.3rem 0 0;
+  color: var(--danger);
+  font-size: 0.82rem;
+}
+
+/* --- Tables --- */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+.table thead th {
+  background: var(--surface-2);
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  padding: 0.75rem 1rem;
+  border-bottom: 2px solid var(--border);
+}
+.table tbody td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+.table-hover tbody tr:hover { background: var(--primary-light); }
+
+/* --- Badges --- */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25em 0.7em;
+  border-radius: var(--radius-full);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+.badge-success { background: #dcfce7; color: #15803d; }
+.badge-warning { background: #fef3c7; color: #92400e; }
+.badge-danger  { background: #fee2e2; color: #991b1b; }
+.badge-info    { background: #e0f2fe; color: #075985; }
+
+/* --- Alerts --- */
+.alert {
+  border-radius: var(--radius);
+  padding: 0.85rem 1rem;
+  font-size: 0.9rem;
+  border: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+}
+.alert-info    { background: #e0f2fe; color: #075985; }
+.alert-danger  { background: #fee2e2; color: #991b1b; }
+.alert-success { background: #dcfce7; color: #15803d; }
+.alert-warning { background: #fef3c7; color: #92400e; }
+.alert-dismissible .close {
+  background: none; border: none; font-size: 1.1rem; cursor: pointer;
+  color: inherit; opacity: 0.6; margin-left: auto; padding: 0;
+}
+
+/* --- Jumbotron replacement --- */
+.welcome-banner {
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+  color: #fff;
+  border-radius: var(--radius-lg);
+  padding: 2.5rem 2rem;
+  margin-bottom: 2rem;
+}
+.welcome-banner h1 { color: #fff; margin-bottom: 0.5rem; }
+.welcome-banner p  { color: rgba(255,255,255,0.85); margin: 0; }
+
+/* --- Workshop Cards Grid --- */
+.workshop-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.25rem;
+  margin-top: 1.5rem;
+}
+.workshop-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.35rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--transition), transform var(--transition);
+}
+.workshop-card:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-2px);
+}
+.workshop-card-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+.workshop-card-meta {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+.workshop-card-footer {
+  margin-top: auto;
+}
+
+/* --- Page header strip --- */
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid var(--border);
+}
+.page-header h2 { margin: 0; }
+
+/* --- Tabs (React-powered) --- */
+.tab-list {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 2px solid var(--border);
+  margin-bottom: 1.5rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.tab-list::-webkit-scrollbar { display: none; }
+
+.tab-btn {
+  background: none;
+  border: none;
+  border-bottom: 3px solid transparent;
+  padding: 0.65rem 1.1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  margin-bottom: -2px;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  transition: all var(--transition);
+}
+.tab-btn:hover  { color: var(--primary); background: var(--primary-light); }
+.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
+
+/* --- Stats filter sidebar --- */
+.stats-layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 1.5rem;
+  align-items: start;
+}
+.stats-sidebar {
+  position: sticky;
+  top: calc(var(--nav-height) + 1rem);
+}
+
+/* --- Pagination --- */
+.pagination {
+  display: flex;
+  gap: 0.3rem;
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0;
+  flex-wrap: wrap;
+}
+.page-link {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.4rem 0.8rem;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  color: var(--primary);
+  background: var(--surface);
+  transition: all var(--transition);
+}
+.page-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); text-decoration: none; }
+
+/* --- Profile Card --- */
+.profile-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow);
+}
+.profile-card-header {
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+  padding: 2rem 1.5rem 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.profile-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.75rem;
+  color: #fff;
+  flex-shrink: 0;
+}
+.profile-name { color: #fff; font-size: 1.2rem; font-weight: 700; margin: 0; }
+.profile-role { color: rgba(255,255,255,0.75); font-size: 0.85rem; margin: 0; }
+.profile-fields { padding: 1.25rem 1.5rem; }
+.profile-field {
+  display: flex;
+  gap: 1rem;
+  padding: 0.65rem 0;
+  border-bottom: 1px solid var(--border);
+  align-items: flex-start;
+}
+.profile-field:last-child { border-bottom: none; }
+.profile-field-label {
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  width: 140px;
+  flex-shrink: 0;
+}
+.profile-field-value {
+  font-size: 0.9rem;
+  color: var(--text-primary);
+}
+
+/* --- Responsive --- */
+@media (max-width: 991px) {
+  .navbar-collapse {
+    background: var(--nav-bg);
+    border-top: 1px solid rgba(255,255,255,.1);
+    padding: 0.75rem 0;
+    margin-top: 0.5rem;
+    border-radius: 0 0 var(--radius) var(--radius);
+  }
+  .stats-layout {
+    grid-template-columns: 1fr;
+  }
+  .stats-sidebar { position: static; }
+}
+
+@media (max-width: 767px) {
+  .base-content { padding-top: calc(var(--nav-height) + 1rem); }
+  .workshop-grid { grid-template-columns: 1fr; }
+  .page-header { flex-direction: column; align-items: flex-start; }
+  .table { font-size: 0.82rem; }
+  .table thead th, .table tbody td { padding: 0.6rem 0.6rem; }
+  .profile-field { flex-direction: column; gap: 0.2rem; }
+  .profile-field-label { width: auto; }
+  .card-body { padding: 1rem; }
+  .welcome-banner { padding: 1.5rem 1.25rem; }
+}
+
+@media (max-width: 480px) {
+  html { font-size: 15px; }
+  .btn { width: 100%; justify-content: center; }
+  .btn + .btn { margin-top: 0.5rem; }
+  .tab-btn { padding: 0.55rem 0.75rem; font-size: 0.82rem; }
+}
+
+/* --- Utility --- */
+.text-muted   { color: var(--text-muted) !important; }
+.text-primary { color: var(--primary) !important; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+
+/* --- Scrollbar --- */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--surface-2); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* --- Animations --- */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
+.animate-in { animation: fadeInUp 0.35s ease forwards; }
+
diff --git a/workshop_app/templates/workshop_app/base.html b/workshop_app/templates/workshop_app/base.html
index 95f5fa00..ad137b41 100644
--- a/workshop_app/templates/workshop_app/base.html
+++ b/workshop_app/templates/workshop_app/base.html
@@ -1,135 +1,188 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 {% load static %}
 {% load custom_filters %}
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>
-        {% block title %}
-            HomePage
-        {% endblock %}
-    </title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#0f172a">
+    <meta name="description" content="FOSSEE Workshop Booking — Book and manage Python workshops by IIT Bombay">
+    <meta name="robots" content="index, follow">
+    <!-- Open Graph -->
+    <meta property="og:site_name" content="FOSSEE Workshops">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="Book and manage Python workshops by IIT Bombay's FOSSEE group.">
 
-    <script src="{% static 'workshop_app/js/jquery-3.4.1.min.js' %}"></script>
-    <script src="{% static 'workshop_app/js/bootstrap.min.js' %}"></script>
-    <script src="{% static 'workshop_app/js/popper.min.js' %}"></script>
-    <script src="{% static 'workshop_app/js/toastr.min.js' %}"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <title>{% block title %}FOSSEE Workshops{% endblock %} | FOSSEE IIT Bombay</title>
 
+    <!-- Preconnect for performance -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
-    {% block extra-dependencies %}
-    {% endblock %}
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
+    <!-- Stylesheets -->
     <link rel="stylesheet" href="{% static 'workshop_app/css/bootstrap.min.css' %}">
     <link rel="stylesheet" href="{% static 'workshop_app/css/toastr.min.css' %}">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="stylesheet" href="{% static 'workshop_app/css/base.css' %}" type="text/css"/>
     <link rel="stylesheet" href="{% static 'workshop_app/css/font-awesome.css' %}" type="text/css"/>
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
+    <link rel="stylesheet" href="{% static 'workshop_app/css/base.css' %}" type="text/css"/>
 
-    {% block extra-custom-scripts %}
-    {% endblock %}
+    {% block extra-custom-scripts %}{% endblock %}
+
+    <!-- React via CDN -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
 
+    <!-- JS dependencies -->
+    <script src="{% static 'workshop_app/js/jquery-3.4.1.min.js' %}"></script>
+    <script src="{% static 'workshop_app/js/popper.min.js' %}"></script>
+    <script src="{% static 'workshop_app/js/bootstrap.min.js' %}"></script>
+    <script src="{% static 'workshop_app/js/toastr.min.js' %}"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
+
+    {% block extra-dependencies %}{% endblock %}
 </head>
 
 <body>
+
+<!-- ===== NAVBAR ===== -->
 {% block header %}
-    <nav class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top">
+<nav class="navbar navbar-dark navbar-expand-lg fixed-top" role="navigation" aria-label="Main navigation">
+
+    {% if user.is_authenticated %}
+    <a class="navbar-brand" href="{% url 'workshop_app:index' %}" aria-label="FOSSEE Workshops Home">
+        FOSSEE Workshops
+    </a>
+    {% else %}
+    <a class="navbar-brand" href="{{ request.scheme }}://{{ request.get_host }}" aria-label="FOSSEE Workshops Home">
+        FOSSEE Workshops
+    </a>
+    {% endif %}
+
+    <button class="navbar-toggler" type="button"
+            data-toggle="collapse" data-target="#mainNav"
+            aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="mainNav">
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="/">
+                    <i class="fa fa-home" aria-hidden="true"></i>&nbsp;Home
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{% url 'statistics_app:public' %}">
+                    <i class="fa fa-bar-chart" aria-hidden="true"></i>&nbsp;Statistics
+                </a>
+            </li>
+        </ul>
+
         {% if user.is_authenticated %}
-        <a class="navbar-brand text-white" href="{% url 'workshop_app:index' %}">FOSSEE Workshops</a>
-        {% else %}
-        <a class="navbar-brand text-white" href="{{request.scheme}}://{{request.get_host}}">FOSSEE Workshops</a>
-        {% endif %}
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav">
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="/">
-                        Home
-                    </a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="{% url 'statistics_app:public' %}">
-                        Workshop Statistics
-                    </a>
-                </li>
-            </ul>
-            {% if user.is_authenticated %}
-            <ul class="navbar-nav mr-auto">
-                {% if request.user|has_group:"instructor" %}
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="{% url 'statistics_app:team' %}">
-                        Team Statistics
+        <ul class="navbar-nav mr-auto">
+            {% if request.user|has_group:"instructor" %}
+            <li class="nav-item">
+                <a class="nav-link" href="{% url 'statistics_app:team' %}">
+                    <i class="fa fa-users" aria-hidden="true"></i>&nbsp;Team Stats
+                </a>
+            </li>
+            {% endif %}
+            <li class="nav-item">
+                <a class="nav-link" href="{% url 'workshop_app:workshop_status_instructor' %}">
+                    <i class="fa fa-tasks" aria-hidden="true"></i>&nbsp;Workshop Status
+                </a>
+            </li>
+            {% if not request.user|has_group:"instructor" %}
+            <li class="nav-item">
+                <a class="nav-link" href="{% url 'workshop_app:propose_workshop' %}">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;Propose Workshop
+                </a>
+            </li>
+            {% endif %}
+            <li class="nav-item">
+                <a class="nav-link" href="{% url 'workshop_app:workshop_type_list' %}">
+                    <i class="fa fa-list" aria-hidden="true"></i>&nbsp;Workshop Types
+                </a>
+            </li>
+        </ul>
+
+        <ul class="navbar-nav" style="margin-left:auto;">
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="userMenuBtn"
+                   role="button" data-toggle="dropdown"
+                   aria-haspopup="true" aria-expanded="false">
+                    <span class="material-icons" style="vertical-align:middle;font-size:1.1rem">account_circle</span>
+                    &nbsp;{{ user.get_full_name|title }}
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenuBtn">
+                    <a class="dropdown-item" href="{% url 'workshop_app:view_own_profile' %}">
+                        <i class="fa fa-user"></i>&nbsp;Profile
                     </a>
-                </li>
-                {% endif %}
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="{% url 'workshop_app:workshop_status_instructor' %}">
-                        Workshop Status
+                    <a class="dropdown-item" href="{% url 'password_change' %}">
+                        <i class="fa fa-lock"></i>&nbsp;Change Password
                     </a>
-                </li>
-                {% if not request.user|has_group:"instructor" %}
-                    <li class="nav-item">
-                        <a class="nav-link text-white" href="{% url 'workshop_app:propose_workshop' %}">
-                            Propose Workshop
-                        </a>
-                    </li>
-                {% endif %}
-                <li class="nav-item">
-                    <a class="nav-link text-white" href="{% url 'workshop_app:workshop_type_list' %}">
-                        Workshop Types
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item text-danger" href="{% url 'workshop_app:logout' %}">
+                        <i class="fa fa-sign-out"></i>&nbsp;Logout
                     </a>
-                </li>
-            </ul>
-            <div class="my-2 my-lg-0">
-                <ul class="navbar-nav mr-auto">
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button"
-                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                           <span class="material-icons" style="vertical-align: middle">account_circle</span>
-                            <p style="display: inline; vertical-align: middle">
-                                {{user.get_full_name|title}}
-                            </p>
-                        </a>
-                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                            <a class="dropdown-item" href="{% url 'workshop_app:view_own_profile' %}">Profile</a>
-                            <a class="dropdown-item" href="{% url 'password_change' %}">
-                                 Change Password
-                            </a>
-                            <a class="dropdown-item" href="{% url 'workshop_app:logout' %}">Logout</a>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            {% endif %}
-        </div>
-    </nav>
+                </div>
+            </li>
+        </ul>
+        {% else %}
+        <ul class="navbar-nav" style="margin-left:auto;">
+            <li class="nav-item">
+                <a class="nav-link" href="{% url 'workshop_app:login' %}">
+                    <i class="fa fa-sign-in"></i>&nbsp;Login
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{% url 'workshop_app:register' %}">
+                    <i class="fa fa-user-plus"></i>&nbsp;Register
+                </a>
+            </li>
+        </ul>
+        {% endif %}
+    </div>
+</nav>
 {% endblock %}
 
-<div class="base-content">
+<!-- ===== MAIN CONTENT ===== -->
+<main class="base-content" id="main-content">
     {% block content %}
-        <h1>Base Template Content. Please override me</h1>
+        <p>Base Template. Please override.</p>
     {% endblock %}
-</div>
+</main>
 
+<!-- ===== FOOTER ===== -->
+<footer class="footer" role="contentinfo">
+    {% block footer %}
+    <div>
+        Developed by <a href="https://fossee.in" target="_blank" rel="noopener">FOSSEE Group, IIT Bombay</a>
+        &nbsp;&bull;&nbsp;
+        <a href="mailto:pythonsupport@fossee.in">Contact</a>
+    </div>
+    {% endblock %}
+</footer>
+
+<!-- Toast notifications -->
 <script>
     {% if messages %}
         {% for message in messages %}
-            toastr[{% if message.tags %} "{{ message.tags }}" {% else %} "info" {% endif %}]("{{ message }}");
+            toastr[{% if message.tags %}"{{ message.tags }}"{% else %}"info"{% endif %}]("{{ message }}");
         {% endfor %}
     {% endif %}
+    toastr.options = {
+        closeButton: true,
+        positionClass: "toast-top-right",
+        timeOut: 4000
+    };
 </script>
 
+
 </body>
-<footer class="footer">
-    {% block footer %}
-       <div class="container">
-           Developed by FOSSEE group, IIT Bombay
-       </div> 
-    {% endblock %}
-</footer>
-</html>
+</html>
\ No newline at end of file
diff --git a/workshop_app/templates/workshop_app/login.html b/workshop_app/templates/workshop_app/login.html
index 38a1c172..72c4743a 100644
--- a/workshop_app/templates/workshop_app/login.html
+++ b/workshop_app/templates/workshop_app/login.html
@@ -1,53 +1,168 @@
 {% extends 'workshop_app/base.html' %}
 
-{% block title %}
-    Login
-{% endblock %}
+{% block title %}Login{% endblock %}
 
 {% block content %}
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-6 col-md-offset-6">
-                <div class="card">
-                    <div class="card-body">
-                        <form class="px-3 py-3" method="post">
-                        {% csrf_token %}
-                        {% if form.errors %}
-                            {% for field in form %}
-                                {% for error in field.errors %}
-                                    <div class="alert alert-dismissible alert-danger">
-                                        <button type="button" class="close" data-dismiss="alert">
-                                            <i class="fa fa-close"></i>
-                                        </button>
-                                        <strong>{{ error|escape }}</strong>
-                                    </div>
-                                {% endfor %}
-                            {% endfor %}
-                            {% for error in form.non_field_errors %}
-                                <div class="alert alert-dismissible alert-danger">
-                                    <button type="button" class="close" data-dismiss="alert">
-                                        <i class="fa fa-close"></i>
-                                    </button>
-                                    <strong>{{ error|escape }}</strong>
-                                </div>
-                            {% endfor %}
-                        {% endif %}
-                        <div class="form-group">
-                          <label for="id_username">Username</label>
-                          {{ form.username }}
-                        </div>
-                        <div class="form-group">
-                          <label for="id_password">Password</label>
-                          {{ form.password }}
-                        </div>
-                        <button type="submit" class="btn btn-primary">Sign in</button>
-                        </form>
-                        <div class="dropdown-divider"></div>
-                        <a class="dropdown-item" href="{% url 'workshop_app:register' %}">New around here? Sign up</a>
-                        <a class="dropdown-item" href="{% url 'password_reset' %}">Forgot password?</a>
+<div class="container" style="max-width:420px; padding-top:2rem;">
+
+    <div class="text-center" style="margin-bottom:2rem;">
+        <span class="material-icons" style="font-size:2.5rem;color:var(--primary)">account_circle</span>
+        <h2 style="margin-top:0.5rem;">Welcome back</h2>
+        <p style="color:var(--text-muted);font-size:0.9rem;">Sign in to your FOSSEE account</p>
+    </div>
+
+    <div class="card animate-in">
+        <div class="card-body">
+
+            {% if form.errors %}
+                <div class="alert alert-danger" role="alert">
+                    <i class="fa fa-exclamation-circle"></i>
+                    {% for field in form %}
+                        {% for error in field.errors %}{{ error }}{% endfor %}
+                    {% endfor %}
+                    {% for error in form.non_field_errors %}{{ error }}{% endfor %}
+                </div>
+            {% endif %}
+
+            <!-- React mounts here -->
+            <div id="login-form-root"></div>
+
+            <!-- Fallback / non-JS form -->
+            <noscript>
+                <form method="post">
+                    {% csrf_token %}
+                    <div class="form-group">
+                        <label for="id_username">Username</label>
+                        {{ form.username }}
+                    </div>
+                    <div class="form-group">
+                        <label for="id_password">Password</label>
+                        {{ form.password }}
                     </div>
-                </div>  
+                    <button class="btn btn-primary" style="width:100%" type="submit">Sign in</button>
+                </form>
+            </noscript>
+
+            <div style="margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border);">
+                <a href="{% url 'workshop_app:register' %}" style="display:block;margin-bottom:0.5rem;font-size:0.875rem;">
+                    <i class="fa fa-user-plus"></i>&nbsp;New here? Create an account
+                </a>
+                <a href="{% url 'password_reset' %}" style="font-size:0.875rem;color:var(--text-muted);">
+                    <i class="fa fa-key"></i>&nbsp;Forgot your password?
+                </a>
             </div>
         </div>
     </div>
-{% endblock %}
+</div>
+
+<script>
+(function() {
+    const csrfToken = "{{ csrf_token }}";
+    const { useState, useRef } = React;
+
+    function LoginForm() {
+        const [username, setUsername] = useState("");
+        const [password, setPassword] = useState("");
+        const [showPw, setShowPw] = useState(false);
+        const [errors, setErrors] = useState({});
+        const formRef = useRef(null);
+
+        function validate() {
+            const e = {};
+            if (!username.trim()) e.username = "Username is required.";
+            if (!password)         e.password = "Password is required.";
+            return e;
+        }
+
+        function handleSubmit(e) {
+            e.preventDefault();
+            const errs = validate();
+            if (Object.keys(errs).length) { setErrors(errs); return; }
+            formRef.current.submit();
+        }
+
+        return React.createElement("form", {
+            method: "post",
+            onSubmit: handleSubmit,
+            ref: formRef,
+            noValidate: true,
+            "aria-label": "Login form"
+        },
+            // CSRF
+            React.createElement("input", { type: "hidden", name: "csrfmiddlewaretoken", value: csrfToken }),
+
+            // Username
+            React.createElement("div", { className: "form-group" },
+                React.createElement("label", { htmlFor: "id_username" }, "Username"),
+                React.createElement("input", {
+                    id: "id_username",
+                    name: "username",
+                    type: "text",
+                    className: "form-control",
+                    value: username,
+                    onChange: e => { setUsername(e.target.value); setErrors(prev => ({...prev, username: ""})); },
+                    autoComplete: "username",
+                    "aria-describedby": errors.username ? "err-username" : undefined,
+                    "aria-invalid": !!errors.username,
+                    placeholder: "Enter your username"
+                }),
+                errors.username && React.createElement("p", {
+                    id: "err-username", role: "alert",
+                    style: { color: "var(--danger)", fontSize: "0.82rem", marginTop: "0.25rem" }
+                }, errors.username)
+            ),
+
+            // Password
+            React.createElement("div", { className: "form-group" },
+                React.createElement("label", { htmlFor: "id_password" }, "Password"),
+                React.createElement("div", { style: { position: "relative" } },
+                    React.createElement("input", {
+                        id: "id_password",
+                        name: "password",
+                        type: showPw ? "text" : "password",
+                        className: "form-control",
+                        value: password,
+                        onChange: e => { setPassword(e.target.value); setErrors(prev => ({...prev, password: ""})); },
+                        autoComplete: "current-password",
+                        "aria-describedby": errors.password ? "err-password" : undefined,
+                        "aria-invalid": !!errors.password,
+                        placeholder: "Enter your password",
+                        style: { paddingRight: "2.75rem" }
+                    }),
+                    React.createElement("button", {
+                        type: "button",
+                        onClick: () => setShowPw(s => !s),
+                        "aria-label": showPw ? "Hide password" : "Show password",
+                        style: {
+                            position: "absolute", right: "0.75rem", top: "50%",
+                            transform: "translateY(-50%)", background: "none",
+                            border: "none", cursor: "pointer", color: "var(--text-muted)",
+                            padding: 0, fontSize: "1rem"
+                        }
+                    },
+                        React.createElement("i", { className: showPw ? "fa fa-eye-slash" : "fa fa-eye" })
+                    )
+                ),
+                errors.password && React.createElement("p", {
+                    id: "err-password", role: "alert",
+                    style: { color: "var(--danger)", fontSize: "0.82rem", marginTop: "0.25rem" }
+                }, errors.password)
+            ),
+
+            // Submit
+            React.createElement("button", {
+                type: "submit",
+                className: "btn btn-primary",
+                style: { width: "100%", justifyContent: "center", marginTop: "0.5rem" }
+            },
+                React.createElement("i", { className: "fa fa-sign-in" }),
+                " Sign in"
+            )
+        );
+    }
+
+    const root = ReactDOM.createRoot(document.getElementById("login-form-root"));
+    root.render(React.createElement(LoginForm));
+})();
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/workshop_app/templates/workshop_app/propose_workshop.html b/workshop_app/templates/workshop_app/propose_workshop.html
index 2d9f2efd..39c3c91f 100644
--- a/workshop_app/templates/workshop_app/propose_workshop.html
+++ b/workshop_app/templates/workshop_app/propose_workshop.html
@@ -1,9 +1,7 @@
 {% extends "workshop_app/base.html" %}
 {% load static %}
 
-{% block title %}
-    Propose a workshop
-{% endblock %}
+{% block title %}Propose a Workshop{% endblock %}
 
 {% block extra-dependencies %}
     <link rel="stylesheet" href="{% static 'workshop_app/css/jquery-ui.css' %}" type="text/css"/>
@@ -12,110 +10,140 @@
 {% endblock %}
 
 {% block extra-custom-scripts %}
-    <script>
-        var dateToday = new Date();
-        var upto = new Date();
-
-        dateToday.setDate(dateToday.getDate() + 3);
-        upto.setFullYear(dateToday.getFullYear() + 1);
-
-        $(function () {
-            $(".datepicker").datepicker({
-                changeMonth: true,
-                changeYear: true,
-                minDate: dateToday,
-                maxDate: upto,
-                beforeShowDay: $.datepicker.noWeekends,
-            });
-
-
-            $('#disp_tnc').click(function (e) {
-                e.preventDefault()
-                if ($('#id_workshop_type').val() === '')
-                    $('.modal-body').html("<p class='text-danger'>Please select a workshop type</p>")
-                else {
-                    $.ajax({
-                        url: '/workshop/type_tnc/' + $('#id_workshop_type').val(),
-                        success: function (data) {
-                            $('.modal-body').html(data.tnc)
-                        }
-                    })
-                }
-            })
+<script>
+    var dateToday = new Date();
+    var upto = new Date();
+    dateToday.setDate(dateToday.getDate() + 3);
+    upto.setFullYear(dateToday.getFullYear() + 1);
+
+    $(function () {
+        $(".datepicker").datepicker({
+            changeMonth: true,
+            changeYear: true,
+            minDate: dateToday,
+            maxDate: upto,
+            beforeShowDay: $.datepicker.noWeekends,
         });
-    </script>
-{% endblock %}
 
+        $('#disp_tnc').click(function (e) {
+            e.preventDefault();
+            if ($('#id_workshop_type').val() === '') {
+                $('.modal-body').html("<p class='text-danger'><i class='fa fa-exclamation-circle'></i>&nbsp;Please select a workshop type first.</p>");
+            } else {
+                $.ajax({
+                    url: '/workshop/type_tnc/' + $('#id_workshop_type').val(),
+                    success: function (data) {
+                        $('.modal-body').html(data.tnc);
+                    }
+                });
+            }
+        });
+    });
+</script>
+{% endblock %}
 
 {% block content %}
-    <style type="text/css">
-        .errorlist {
-            color: red;
-        }
-
-    .modal-open .modal{
-        overflow-y: hidden;
-    }
-    </style>
-
-    <div class="container" align="center">
-        <div class="alert alert-info">
-            Note: Before proposing the workshop, please check about the workshop in the
-            <strong>Workshop Types</strong> section
-        </div>
-        <br><br>
-        <div class="col-md-6 col-md-offset-6">
-            <div class="card border-primary">
-                <div class="card-header">
-                    <h3>Propose Workshop</h3>
+<div class="container" style="max-width:540px;">
+
+    <div class="text-center" style="margin-bottom:1.5rem;">
+        <span class="material-icons" style="font-size:2.5rem;color:var(--primary)">event_available</span>
+        <h2 style="margin-top:0.5rem;">Propose a Workshop</h2>
+        <p style="color:var(--text-muted);font-size:0.9rem;">
+            Fill in the details below to submit your workshop proposal.
+        </p>
+    </div>
+
+    <div class="alert alert-info" role="note" style="margin-bottom:1.25rem;">
+        <i class="fa fa-info-circle"></i>&nbsp;
+        Before proposing, review the workshop details in the
+        <a href="{% url 'workshop_app:workshop_type_list' %}" style="font-weight:600;">Workshop Types</a> section.
+    </div>
+
+    <div class="card animate-in">
+        <div class="card-body">
+
+            {% if form.errors %}
+            <div class="alert alert-danger" role="alert" style="margin-bottom:1rem;">
+                <i class="fa fa-exclamation-circle"></i>&nbsp;
+                Please correct the errors below.
+                <ul style="margin:0.5rem 0 0;padding-left:1.25rem;">
+                    {% for field in form %}{% for error in field.errors %}<li>{{ field.label }}: {{ error }}</li>{% endfor %}{% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+
+            <style>
+                .errorlist { color:var(--danger); font-size:0.82rem; margin:0.2rem 0 0; padding:0; list-style:none; }
+                .field-wrap { margin-bottom:1.1rem; }
+            </style>
+
+            <form method="post" novalidate>
+                {% csrf_token %}
+
+                <div class="field-wrap">
+                    <label for="id_workshop_type">Workshop Type</label>
+                    {{ form.workshop_type }}
+                    {% if form.workshop_type.errors %}
+                        <ul class="errorlist">{% for e in form.workshop_type.errors %}<li>{{ e }}</li>{% endfor %}</ul>
+                    {% endif %}
                 </div>
-                <div class="card-body">
-                    <div class="form-group">
-                        <form method="post">
-                            {% csrf_token %}
-                            <br/>
-                            {{ form.workshop_type }}
-                            <br>
-                            {{ form.date }}
-                            <br>
-                            {{ form.tnc_accepted }} I accept the
-                            <a href="#" id="disp_tnc" data-toggle="modal"
-                            data-target="#exampleModalCenter">
-                                terms and conditions
-                            </a>
-                            <br>
-                            {% if form.errors %}
-                                <br>
-                                <div style="text-align: left; border: 1px solid red; padding-top: 5px">
-                                    <h5 style="text-align: center; color: red; font-weight: bolder">Errors</h5>
-                                    {{ form.errors }}
-                                </div>
-                            {% endif %}
-                            <br>
-                            <button class="btn btn-success" type="submit">Submit</button>
-                        </form>
-                    </div>
+
+                <div class="field-wrap">
+                    <label for="id_date">Preferred Date</label>
+                    {{ form.date }}
+                    <p style="font-size:0.78rem;color:var(--text-muted);margin-top:0.2rem;">
+                        <i class="fa fa-info-circle"></i>&nbsp;
+                        Weekdays only, minimum 3 days from today.
+                    </p>
+                    {% if form.date.errors %}
+                        <ul class="errorlist">{% for e in form.date.errors %}<li>{{ e }}</li>{% endfor %}</ul>
+                    {% endif %}
                 </div>
-            </div>
-        </div>
-        <br>
 
-    </div>
-    <!-- Modal -->
-    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
-         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="exampleModalLongTitle">Terms and Conditions</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                <div class="field-wrap" style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
+                    {{ form.tnc_accepted }}
+                    <label for="id_tnc_accepted" style="margin:0;font-weight:500;font-size:0.9rem;">
+                        I accept the
+                        <a href="#" id="disp_tnc"
+                           data-toggle="modal" data-target="#tncModal"
+                           style="font-weight:600;">terms and conditions</a>
+                    </label>
+                    {% if form.tnc_accepted.errors %}
+                        <ul class="errorlist" style="width:100%;">{% for e in form.tnc_accepted.errors %}<li>{{ e }}</li>{% endfor %}</ul>
+                    {% endif %}
                 </div>
-                <div class="modal-body">
 
+                <div style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border);display:flex;gap:0.75rem;flex-wrap:wrap;">
+                    <button class="btn btn-success" type="submit">
+                        <i class="fa fa-paper-plane"></i>&nbsp;Submit Proposal
+                    </button>
+                    <a href="{% url 'workshop_app:workshop_type_list' %}" class="btn btn-outline-info">
+                        Cancel
+                    </a>
                 </div>
+
+            </form>
+        </div>
+    </div>
+</div>
+
+
+<!-- Terms & Conditions Modal -->
+<div class="modal fade" id="tncModal" tabindex="-1" role="dialog" aria-labelledby="tncModalTitle" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content" style="border-radius:var(--radius-lg);border:none;box-shadow:var(--shadow-lg);">
+            <div class="modal-header" style="border-bottom:1px solid var(--border);">
+                <h5 class="modal-title" id="tncModalTitle" style="font-weight:700;">
+                    <i class="fa fa-file-text-o"></i>&nbsp;Terms and Conditions
+                </h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" style="padding:1.25rem;color:var(--text-secondary);line-height:1.65;">
+                <!-- Loaded via AJAX -->
             </div>
         </div>
     </div>
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/workshop_app/templates/workshop_app/register.html b/workshop_app/templates/workshop_app/register.html
index cd716f45..334a8cbd 100644
--- a/workshop_app/templates/workshop_app/register.html
+++ b/workshop_app/templates/workshop_app/register.html
@@ -1,35 +1,146 @@
 {% extends 'workshop_app/base.html' %}
 
-	{% block title %}
-		Register
-	{% endblock %}
+{% block title %}Register{% endblock %}
 
 {% block content %}
+<div class="container" style="max-width:560px;padding-top:2rem;">
 
-	<style type="text/css">
-    	label.required::after {
-    	content: "*";
-    	color: red;
-		}
+    <div class="text-center" style="margin-bottom:1.5rem;">
+        <span class="material-icons" style="font-size:2.5rem;color:var(--primary)">person_add</span>
+        <h2 style="margin-top:0.5rem;">Coordinator Registration</h2>
+        <p style="color:var(--text-muted);font-size:0.9rem;">Create your FOSSEE account to propose workshops</p>
+    </div>
 
-		.errorlist {
-      color: red;
+    <div class="card animate-in">
+        <div class="card-body">
+
+            {% if form.errors %}
+            <div class="alert alert-danger" role="alert" style="margin-bottom:1rem;">
+                <i class="fa fa-exclamation-circle"></i>&nbsp;
+                Please correct the errors below.
+            </div>
+            {% endif %}
+
+            <form method="post" novalidate aria-label="Registration form">
+                {% csrf_token %}
+
+                <style>
+                    label.required::after { content: " *"; color: var(--danger); }
+                    .errorlist { color: var(--danger); font-size: 0.82rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }
+                    .field-wrap { margin-bottom: 1rem; }
+                    .field-wrap input, .field-wrap select { width: 100%; }
+                    .field-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }
+                </style>
+
+                <div class="field-wrap">
+                    <label for="{{ form.username.id_for_label }}" class="required">Username</label>
+                    {{ form.username }}
+                    {% if form.username.errors %}<ul class="errorlist">{% for e in form.username.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    <p class="field-hint">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</p>
+                </div>
+
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
+                    <div class="field-wrap">
+                        <label for="{{ form.first_name.id_for_label }}" class="required">First Name</label>
+                        {{ form.first_name }}
+                        {% if form.first_name.errors %}<ul class="errorlist">{% for e in form.first_name.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    </div>
+                    <div class="field-wrap">
+                        <label for="{{ form.last_name.id_for_label }}" class="required">Last Name</label>
+                        {{ form.last_name }}
+                        {% if form.last_name.errors %}<ul class="errorlist">{% for e in form.last_name.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    </div>
+                </div>
+
+                <div class="field-wrap">
+                    <label for="{{ form.email.id_for_label }}" class="required">Email Address</label>
+                    {{ form.email }}
+                    {% if form.email.errors %}<ul class="errorlist">{% for e in form.email.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                </div>
+
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
+                    <div class="field-wrap">
+                        <label for="{{ form.password1.id_for_label }}" class="required">Password</label>
+                        {{ form.password1 }}
+                        {% if form.password1.errors %}<ul class="errorlist">{% for e in form.password1.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    </div>
+                    <div class="field-wrap">
+                        <label for="{{ form.password2.id_for_label }}" class="required">Confirm Password</label>
+                        {{ form.password2 }}
+                        {% if form.password2.errors %}<ul class="errorlist">{% for e in form.password2.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    </div>
+                </div>
+
+                <!-- Password strength indicator (React) -->
+                <div id="pw-strength-root" style="margin-bottom:1rem;"></div>
+
+                <div style="padding-top:1rem;border-top:1px solid var(--border);display:flex;gap:0.75rem;flex-wrap:wrap;">
+                    <button class="btn btn-primary" type="submit">
+                        <i class="fa fa-user-plus"></i>&nbsp;Create Account
+                    </button>
+                    <a href="{% url 'workshop_app:login' %}" class="btn btn-outline-info">
+                        Already registered? Sign in
+                    </a>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+(function() {
+    const { useState, useEffect } = React;
+
+    function PasswordStrength() {
+        const [strength, setStrength] = useState(0);
+        const [label, setLabel] = useState("");
+
+        useEffect(() => {
+            const input = document.getElementById("id_password1");
+            if (!input) return;
+            function check() {
+                const v = input.value;
+                let score = 0;
+                if (v.length >= 8) score++;
+                if (/[A-Z]/.test(v)) score++;
+                if (/[0-9]/.test(v)) score++;
+                if (/[^A-Za-z0-9]/.test(v)) score++;
+                setStrength(score);
+                setLabel(["", "Weak", "Fair", "Good", "Strong"][score] || "");
+            }
+            input.addEventListener("input", check);
+            return () => input.removeEventListener("input", check);
+        }, []);
+
+        if (!strength) return null;
+
+        const colors = ["", "#dc2626","#d97706","#2563eb","#16a34a"];
+        const widths  = ["0%","25%","50%","75%","100%"];
+
+        return React.createElement("div", { style: { marginTop: "0.4rem" } },
+            React.createElement("div", {
+                style: {
+                    height: "5px", borderRadius: "9999px",
+                    background: "var(--border)", overflow: "hidden"
+                }
+            },
+                React.createElement("div", {
+                    style: {
+                        height: "100%", width: widths[strength],
+                        background: colors[strength],
+                        transition: "width 0.3s ease, background 0.3s ease",
+                        borderRadius: "9999px"
+                    }
+                })
+            ),
+            React.createElement("p", {
+                style: { fontSize: "0.78rem", color: colors[strength], margin: "0.2rem 0 0", fontWeight: 600 }
+            }, label ? `Password strength: ${label}` : "")
+        );
     }
-	</style>
-
-	<div class="container" >
-		<br>
-		<h3>Coordinator Registration Form</h3>
-		<br>
-		<form action="" method="post">
-			{% csrf_token %}
-				<table class="table table-bordered">
-					{{ form.as_table }}
-				</table>
-
-				<button class="btn btn-primary" type="submit">Register</button>
-		</form><br>
-		<!-- Activate when Instructor registeration starts -->
-		<br>
-	</div>
-{% endblock %}
+
+    const el = document.getElementById("pw-strength-root");
+    if (el) ReactDOM.createRoot(el).render(React.createElement(PasswordStrength));
+})();
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/workshop_app/templates/workshop_app/view_profile.html b/workshop_app/templates/workshop_app/view_profile.html
index 041d6ac7..e8223c34 100644
--- a/workshop_app/templates/workshop_app/view_profile.html
+++ b/workshop_app/templates/workshop_app/view_profile.html
@@ -1,129 +1,189 @@
 {% extends 'workshop_app/base.html' %}
 
-{% block title %} Profile {% endblock %}
+{% block title %}My Profile{% endblock %}
 
-{% csrf_token %}
 {% block content %}
+<div class="container" style="max-width:750px;">
 
-    <div class="container">
-        {% if Workshops %}
-            <table class="table table-bordered">
-                <tr>
-                    <th><label for="id_first_name"><h5>First name:</h5></label></th>
-                    <th><label for="id_first_name"><h5>{{ coordinator_profile.user.first_name }}</h5></label></th>
-                </tr>
-                <tr>
-                    <th><label for="id_last_name"><h5>Last name:</h5></label></th>
-                    <th><label for="id_last_name"><h5>{{ coordinator_profile.user.last_name }}</h5></label></th>
-                </tr>
-                <tr>
-                    <th><label for="id_email"><h5>Email:</h5></label></th>
-                    <th><label for="id_email"><h5>{{ coordinator_profile.user.email }}</h5></label></th>
-                </tr>
-                <tr>
-                    <th><label for="id_institute"><h5>Institute:</h5></label></th>
-                    <th><label for="id_institute"><h5>{{ coordinator_profile.user.profile.institute }}</h5></label></th>
-                </tr>
-                <tr>
-                    <th><label for="id_phone_number"><h5>Phone Number:</h5></label></th>
-                    <th><label for="id_phone_number"><h5>{{ coordinator_profile.user.profile.phone_number }}</h5></label>
-                    </th>
-                </tr>
-                <tr>
-                    <th><label for="id_department"><h5>Department:</h5></label></th>
-                    <th><label for="id_department"><h5>{{ coordinator_profile.user.profile.department }}</h5></label></th>
-                </tr>
-                <tr>
-                    <th><label for="id_location"><h5>Location:</h5></label></th>
-                    <th><label for="id_location"><h5>{{ coordinator_profile.user.profile.location }}</h5></label></th>
-                </tr>
-                <tr>
-                    <th><label for="id_position"><h5>Position:</h5></label></th>
-                    <th><label for="id_position"><h5>{{ coordinator_profile.user.profile.position }}</h5></label></th>
-                </tr>
-            </table>
-            <br>
-
-            <div class="container">
-            <h2>Workshop Details</h2>
-            <table class="table table-bordered">
-            <tr>
-                <th><label for="id_instructor_name">Instructor name</label></th>
-                <th><label for="id_workshop_date">Workshop date</label></th>
-                <th><label for="id_workshop_type">Workshop type</label></th>
-            </tr>
-            {% for workshop in Workshops %}
-                {% if workshop.instructor %}
+{% if Workshops %}
+    <!-- Profile display view -->
+    <div class="page-header">
+        <h2>My Profile</h2>
+        <a href="{% url 'workshop_app:edit_profile' %}" class="btn btn-primary btn-sm">
+            <i class="fa fa-pencil"></i>&nbsp;Edit Profile
+        </a>
+    </div>
+
+    <div class="profile-card animate-in" style="margin-bottom:1.5rem;">
+        <div class="profile-card-header">
+            <div class="profile-avatar">
+                <i class="fa fa-user"></i>
+            </div>
+            <div>
+                <p class="profile-name">{{ coordinator_profile.user.first_name }} {{ coordinator_profile.user.last_name }}</p>
+                <p class="profile-role">{{ coordinator_profile.user.profile.position|default:"Coordinator" }}</p>
+            </div>
+        </div>
+        <div class="profile-fields">
+            <div class="profile-field">
+                <span class="profile-field-label">Email</span>
+                <span class="profile-field-value">
+                    <a href="mailto:{{ coordinator_profile.user.email }}">{{ coordinator_profile.user.email }}</a>
+                </span>
+            </div>
+            <div class="profile-field">
+                <span class="profile-field-label">Institute</span>
+                <span class="profile-field-value">{{ coordinator_profile.user.profile.institute|default:"—" }}</span>
+            </div>
+            <div class="profile-field">
+                <span class="profile-field-label">Department</span>
+                <span class="profile-field-value">{{ coordinator_profile.user.profile.department|default:"—" }}</span>
+            </div>
+            <div class="profile-field">
+                <span class="profile-field-label">Phone</span>
+                <span class="profile-field-value">{{ coordinator_profile.user.profile.phone_number|default:"—" }}</span>
+            </div>
+            <div class="profile-field">
+                <span class="profile-field-label">Location</span>
+                <span class="profile-field-value">{{ coordinator_profile.user.profile.location|default:"—" }}</span>
+            </div>
+            <div class="profile-field">
+                <span class="profile-field-label">Position</span>
+                <span class="profile-field-value">{{ coordinator_profile.user.profile.position|default:"—" }}</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Workshop history -->
+    <div class="card animate-in">
+        <div class="card-header" style="display:flex;align-items:center;gap:0.5rem;">
+            <span class="material-icons" style="color:var(--primary);font-size:1.1rem;">history</span>
+            <span style="font-weight:700;">Workshop History</span>
+        </div>
+        <div style="overflow-x:auto;">
+            <table class="table" aria-label="Workshop history">
+                <thead>
                     <tr>
-                        <td><label for="id_instructor_name">{{ workshop.instructor }}
-                        </label></td>
-                        <td><label for="id_workshop_date">{{ workshop.date }}</label>
-                        </td>
-                        <td><label for="id_workshop_type">{{ workshop.workshop_type }}</label>
-                        </td>
+                        <th>Workshop Type</th>
+                        <th>Date</th>
+                        <th>Instructor</th>
                     </tr>
-                {% else %}
+                </thead>
+                <tbody>
+                    {% for workshop in Workshops %}
                     <tr>
-                        <td><span class="badge badge-warning">Pending</span></td>
-                        <td><label for="id_workshop_date">{{ workshop.date }}</label>
+                        <td style="font-weight:600;">{{ workshop.workshop_type }}</td>
+                        <td>
+                            <span style="display:inline-flex;align-items:center;gap:0.3rem;font-size:0.875rem;">
+                                <i class="fa fa-calendar" aria-hidden="true"></i>
+                                {{ workshop.date }}
+                            </span>
                         </td>
-                        <td><label for="id_workshop_type">{{ workshop.workshop_type }}</label>
+                        <td>
+                            {% if workshop.instructor %}
+                                {{ workshop.instructor }}
+                            {% else %}
+                                <span class="badge badge-warning">Pending</span>
+                            {% endif %}
                         </td>
                     </tr>
-                {% endif %}
-            {% endfor %}
+                    {% endfor %}
+                </tbody>
             </table>
-            </div>
-            <br><br>
-        {% else %}
-            <form action="" method="post">
-              {% csrf_token %}
-                <div class="row justify-content-center form-group">
-                    <div class="col-md-6">
-                    <form action="" method="post">
-                        <fieldset>
-                            {% csrf_token %}
-                            {% if form.errors %}
-                                {% for field in form %}
-                                    {% for error in field.errors %}
-                                        <div class="alert alert-dismissible alert-danger">
-                                            <button type="button" class="close" data-dismiss="alert">
-                                                <i class="fa fa-close"></i>
-                                            </button>
-                                            <strong>{{field.label}} : {{ error|escape }}</strong>
-                                        </div>
-                                    {% endfor %}
-                                {% endfor %}
-                                {% for error in form.non_field_errors %}
-                                    <div class="alert alert-dismissible alert-danger">
-                                        <button type="button" class="close" data-dismiss="alert">
-                                            <i class="fa fa-close"></i>
-                                        </button>
-                                        <strong>{{field.label}} : {{ error|escape }}</strong>
-                                    </div>
-                                {% endfor %}
-                            {% endif %}
-                            <table class="table table-responsive-sm">
-                                <tr><td>{{form.title}}</td></tr>
-                                <tr><td>{{form.first_name}}</td></tr>
-                                <tr><td>{{form.last_name}}</td></tr>
-                                <tr><td>{{form.phone_number}}</td></tr>
-                                <tr><td>{{form.institute}}</td></tr>
-                                <tr><td>{{form.department}}</td></tr>
-                                <tr><td>{{form.position}}</td></tr>
-                                <tr><td>{{form.location}}</td></tr>
-                                <tr><td>{{form.state}}</td></tr>
-                            </table>
-                            <br>
-                        </fieldset>
-                        <button class="btn btn-success btn-lg" type="submit">
-                            <i class="fa fa-pencil-square-o"></i>&nbsp;Update</button>
-                        <a href="{% url 'workshop_app:index' %}" class="btn btn-primary btn-lg">Cancel
-                        </a>
-                    </form>
+        </div>
+    </div>
+
+    
+{% else %}
+    <!-- Profile completion / edit view -->
+    <div class="page-header">
+        <h2>Complete Your Profile</h2>
+    </div>
+
+    <div class="alert alert-info animate-in" style="margin-bottom:1.25rem;">
+        <i class="fa fa-info-circle"></i>&nbsp;
+        Please complete your profile before proposing workshops.
+    </div>
+
+    <div class="card animate-in">
+        <div class="card-body">
+            <form action="" method="post" novalidate>
+                {% csrf_token %}
+
+                <style>
+                    .errorlist { color:var(--danger); font-size:0.82rem; margin:0.2rem 0 0; padding:0; list-style:none; }
+                    .field-wrap { margin-bottom:1rem; }
+                </style>
+
+                {% if form.errors %}
+                <div class="alert alert-danger" role="alert" style="margin-bottom:1rem;">
+                    <i class="fa fa-exclamation-circle"></i>&nbsp;Please correct the errors below.
+                </div>
+                {% endif %}
+
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
+                    <div class="field-wrap">
+                        <label for="{{ form.first_name.id_for_label }}">First Name</label>
+                        {{ form.first_name }}
+                        {% if form.first_name.errors %}<ul class="errorlist">{% for e in form.first_name.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    </div>
+                    <div class="field-wrap">
+                        <label for="{{ form.last_name.id_for_label }}">Last Name</label>
+                        {{ form.last_name }}
+                        {% if form.last_name.errors %}<ul class="errorlist">{% for e in form.last_name.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
                     </div>
                 </div>
+
+                <div class="field-wrap">
+                    <label for="{{ form.phone_number.id_for_label }}">Phone Number</label>
+                    {{ form.phone_number }}
+                    {% if form.phone_number.errors %}<ul class="errorlist">{% for e in form.phone_number.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                </div>
+
+                <div class="field-wrap">
+                    <label for="{{ form.institute.id_for_label }}">Institute</label>
+                    {{ form.institute }}
+                    {% if form.institute.errors %}<ul class="errorlist">{% for e in form.institute.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                </div>
+
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
+                    <div class="field-wrap">
+                        <label for="{{ form.department.id_for_label }}">Department</label>
+                        {{ form.department }}
+                        {% if form.department.errors %}<ul class="errorlist">{% for e in form.department.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    </div>
+                    <div class="field-wrap">
+                        <label for="{{ form.position.id_for_label }}">Position</label>
+                        {{ form.position }}
+                        {% if form.position.errors %}<ul class="errorlist">{% for e in form.position.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    </div>
+                </div>
+
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
+                    <div class="field-wrap">
+                        <label for="{{ form.location.id_for_label }}">Location</label>
+                        {{ form.location }}
+                        {% if form.location.errors %}<ul class="errorlist">{% for e in form.location.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    </div>
+                    <div class="field-wrap">
+                        <label for="{{ form.state.id_for_label }}">State</label>
+                        {{ form.state }}
+                        {% if form.state.errors %}<ul class="errorlist">{% for e in form.state.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
+                    </div>
+                </div>
+
+                <div style="margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);display:flex;gap:0.75rem;flex-wrap:wrap;">
+                    <button class="btn btn-success" type="submit">
+                        <i class="fa fa-save"></i>&nbsp;Save Profile
+                    </button>
+                    <a href="{% url 'workshop_app:index' %}" class="btn btn-outline-info">
+                        Cancel
+                    </a>
+                </div>
             </form>
-        {% endif %}
+        </div>
     </div>
+{% endif %}
+
+</div>
 {% endblock %}
diff --git a/workshop_app/templates/workshop_app/workshop_status_coordinator.html b/workshop_app/templates/workshop_app/workshop_status_coordinator.html
index 413f7d24..6908ebc1 100644
--- a/workshop_app/templates/workshop_app/workshop_status_coordinator.html
+++ b/workshop_app/templates/workshop_app/workshop_status_coordinator.html
@@ -1,88 +1,147 @@
 {% extends "workshop_app/base.html" %}
 
-{% block title %}
-    My Workshops
-{% endblock %}
-
-{% block extra-custom-scripts %}
-<style >
-    .table-heading{
-        color: #04a9cf;
-    }
-    </style>
-{% endblock %}
+{% block title %}My Workshops{% endblock %}
 
 {% block content %}
-    {% if not workshops %}
-        <div class="container">
-            <div class="jumbotron">
-                <h1>Welcome {{ user.first_name }}</h1>
-                <p>Information Related to your workshops will be shown here, you can also
-                    propose a Workshop as per your available date in <strong>Propose Workshop tab</strong> .</p>
-            </div>
-        </div>
-    {% else %}
-        <h3 class="text-center">The status of your workshops </h3>
-        <br>
+<div class="container">
+
+{% if not workshops %}
+    <div class="welcome-banner animate-in">
+        <h1>Welcome, {{ user.first_name }}! 👋</h1>
+        <p>
+            Your workshop activity will appear here. Ready to get started?
+            Head to <a href="{% url 'workshop_app:propose_workshop' %}" style="color:#fff;font-weight:700;text-decoration:underline;">Propose Workshop</a>
+            to schedule your first workshop.
+        </p>
+    </div>
+{% else %}
+
+    <div class="page-header">
+        <h2>My Workshops</h2>
+    </div>
 
-        <!-- Accepted View -->
+    <!-- Inject Django data for React to consume -->
+    <script id="workshops-data" type="application/json">
+        {
+            "accepted": [
+                {% for w in workshops %}{% if w.status %}
+                {
+                    "id": {{ w.id }},
+                    "name": "{{ w.workshop_type|capfirst|escapejs }}",
+                    "instructor": "{{ w.instructor.get_full_name|escapejs }}",
+                    "date": "{{ w.date|date }}",
+                    "status": "{{ w.get_status|escapejs }}",
+                    "url": "{% url 'workshop_app:workshop_details' w.id %}"
+                }{% if not forloop.last %},{% endif %}
+                {% endif %}{% endfor %}
+            ],
+            "proposed": [
+                {% for w in workshops %}{% if not w.status and w.tnc_accepted %}
+                {
+                    "id": {{ w.id }},
+                    "name": "{{ w.workshop_type|capfirst|escapejs }}",
+                    "date": "{{ w.date|date }}",
+                    "status": "{{ w.get_status|escapejs }}",
+                    "url": "{% url 'workshop_app:workshop_details' w.id %}"
+                }{% if not forloop.last %},{% endif %}
+                {% endif %}{% endfor %}
+            ]
+        }
+    </script>
 
-        <br>
-        <div class="container">
-            <h3 class="text-center table-heading"><strong>Workshops Accepted</strong></h3>
-            <table class="table table-striped table-responsive-sm">
-                <thead>
-                <tr>
-                    <th>Workshop Name</th>
-                    <th>Instructor Name</th>
-                    <th>Workshop Day</th>
-                    <th>Status</th>
-                </tr>
-                </thead>
+    <div id="workshop-status-root"></div>
 
-                {% for workshop in workshops %}
-                    <tbody>
-                    <tr>
-                        {% if workshop.status %}
-                            <td><a href="{% url 'workshop_app:workshop_details' workshop.id %}" >{{ workshop.workshop_type |capfirst }}</a></td>
-                            <td>{{ workshop.instructor.get_full_name }}</td>
-                            <td>{{ workshop.date | date }}</td>
-                            <td><span class="badge badge-success">{{ workshop.get_status }}</span></td>
-                        {% endif %}
-                    </tr>
-                    </tbody>
-                {% endfor %}
+{% endif %}
+</div>
 
-            </table>
-        </div>
+<script>
+(function() {
+    const { useState } = React;
+    const data = JSON.parse(document.getElementById("workshops-data")?.textContent || '{"accepted":[],"proposed":[]}');
 
-        <!-- Proposed View -->
+    function StatusBadge({ text, type }) {
+        const cls = type === "accepted" ? "badge-success" : "badge-warning";
+        return React.createElement("span", { className: `badge ${cls}` }, text);
+    }
+
+    function WorkshopTable({ workshops, type }) {
+        if (!workshops.length) {
+            return React.createElement("div", {
+                style: { textAlign:"center", padding:"2.5rem 1rem", color:"var(--text-muted)" }
+            },
+                React.createElement("span", { className:"material-icons", style:{fontSize:"2.5rem"} }, "inbox"),
+                React.createElement("p", { style:{marginTop:"0.5rem"} }, "No workshops here yet.")
+            );
+        }
+
+        const isAccepted = type === "accepted";
 
-        <br>
-        <div class="container">
-            <h3 class="text-center table-heading"><strong>Workshops Proposed By Me</strong></h3>
-            <table class="table table-striped table-responsive-sm">
-                <thead>
-                <tr>
-                    <th>Workshop Name</th>
-                    <th>Workshop Day</th>
-                    <th>Status</th>
-                </tr>
-                </thead>
-                {% for workshop in workshops %}
-                    <tbody>
-                    <tr>
-                        {% if not workshop.status and workshop.tnc_accepted %}
-                            <td><a href="{% url 'workshop_app:workshop_details' workshop.id %}" >{{ workshop.workshop_type |capfirst }}</a></td>
-                            <td>{{ workshop.date | date }}</td>
-                            <td><span class="badge badge-warning">{{ workshop.get_status }}</span></td>
-                        {% endif %}
-                    </tr>
-                    </tbody>
+        return React.createElement("div", { style:{overflowX:"auto"} },
+            React.createElement("table", { className:"table", "aria-label": isAccepted ? "Accepted workshops" : "Proposed workshops" },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", null, "Workshop"),
+                        isAccepted && React.createElement("th", null, "Instructor"),
+                        React.createElement("th", null, "Date"),
+                        React.createElement("th", null, "Status")
+                    )
+                ),
+                React.createElement("tbody", null,
+                    workshops.map(w =>
+                        React.createElement("tr", { key: w.id },
+                            React.createElement("td", null,
+                                React.createElement("a", { href: w.url, style:{fontWeight:600} }, w.name)
+                            ),
+                            isAccepted && React.createElement("td", null, w.instructor),
+                            React.createElement("td", null,
+                                React.createElement("span", { style:{display:"inline-flex",alignItems:"center",gap:"0.3rem",fontSize:"0.875rem"} },
+                                    React.createElement("i", { className:"fa fa-calendar" }),
+                                    w.date
+                                )
+                            ),
+                            React.createElement("td", null,
+                                React.createElement(StatusBadge, { text: w.status, type })
+                            )
+                        )
+                    )
+                )
+            )
+        );
+    }
+
+    function WorkshopStatus() {
+        const tabs = [
+            { id: "accepted", label: `Accepted (${data.accepted.length})`, icon: "check_circle" },
+            { id: "proposed", label: `Proposed (${data.proposed.length})`, icon: "schedule" }
+        ];
+        const [active, setActive] = useState("accepted");
 
-                {% endfor %}
-            </table>
-        </div>
-    {% endif %}
+        return React.createElement("div", { className:"animate-in" },
+            React.createElement("div", { className:"tab-list", role:"tablist" },
+                tabs.map(t =>
+                    React.createElement("button", {
+                        key: t.id,
+                        className: `tab-btn ${active === t.id ? "active" : ""}`,
+                        role: "tab",
+                        "aria-selected": active === t.id,
+                        onClick: () => setActive(t.id)
+                    },
+                        React.createElement("span", { className:"material-icons", style:{fontSize:"1rem",verticalAlign:"middle",marginRight:"0.3rem"} }, t.icon),
+                        t.label
+                    )
+                )
+            ),
+            React.createElement("div", { role:"tabpanel" },
+                active === "accepted"
+                    ? React.createElement(WorkshopTable, { workshops: data.accepted, type:"accepted" })
+                    : React.createElement(WorkshopTable, { workshops: data.proposed, type:"proposed" })
+            )
+        );
+    }
 
+    
+    const root = document.getElementById("workshop-status-root");
+    if (root) ReactDOM.createRoot(root).render(React.createElement(WorkshopStatus));
+})();
+</script>
 {% endblock %}
diff --git a/workshop_app/templates/workshop_app/workshop_type_details.html b/workshop_app/templates/workshop_app/workshop_type_details.html
index c2462c79..f067f044 100644
--- a/workshop_app/templates/workshop_app/workshop_type_details.html
+++ b/workshop_app/templates/workshop_app/workshop_type_details.html
@@ -1,32 +1,64 @@
 {% extends 'workshop_app/base.html' %}
 
-{% block title %}
-    View Workshop details
-{% endblock %}
+{% block title %}{{ workshop_type.name }} — Details{% endblock %}
 
 {% block content %}
-    <div class="container">
-        <h2 class="text-center m-3">Workshop Details</h2>
-        <table class="table table-hover">
-            <tr class="d-flex">
-                <th class="col-3">Workshop Name :</th>
-                <td class="col">{{ workshop_type.name }}</td>
-            </tr>
-            <tr class="d-flex">
-                <th class="col-3">Duration :</th>
-                <td class="col">{{ workshop_type.duration }} day(s)</td>
-            </tr>
-            <tr class="d-flex">
-                <th class="col-3">Description :</th>
-                <td class="col">{{ workshop_type.description }}</td>
-            </tr>
-            <tr class="d-flex">
-                <th class="col-3">Terms and Conditions :</th>
-                <td class="col">{{ workshop_type.terms_and_conditions }}</td>
-            </tr>
-        </table>
+<div class="container" style="max-width:700px;">
+
+    <div style="margin-bottom:1.25rem;">
+        <a href="{% url 'workshop_app:workshop_type_list' %}" class="btn btn-outline-info btn-sm">
+            <i class="fa fa-arrow-left"></i>&nbsp;Back to Workshop Types
+        </a>
     </div>
 
-{% endblock %}
+    <div class="card animate-in">
+        <div class="card-header" style="display:flex;align-items:center;gap:0.75rem;">
+            <span class="material-icons" style="color:var(--primary)">school</span>
+            <h2 style="margin:0;font-size:1.2rem;">{{ workshop_type.name }}</h2>
+        </div>
+        <div class="card-body">
+
+            <dl style="margin:0;display:grid;gap:1rem;">
+
+                <div style="display:grid;grid-template-columns:160px 1fr;gap:0.75rem;padding-bottom:1rem;border-bottom:1px solid var(--border);align-items:start;">
+                    <dt style="font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);">Duration</dt>
+                    <dd style="margin:0;">
+                        <span class="badge badge-info" style="font-size:0.875rem;">
+                            <i class="fa fa-clock-o"></i>&nbsp;{{ workshop_type.duration }} day{{ workshop_type.duration|pluralize }}
+                        </span>
+                    </dd>
+                </div>
+
+                <div style="display:grid;grid-template-columns:160px 1fr;gap:0.75rem;padding-bottom:1rem;border-bottom:1px solid var(--border);align-items:start;">
+                    <dt style="font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);">Description</dt>
+                    <dd style="margin:0;color:var(--text-secondary);line-height:1.65;">{{ workshop_type.description }}</dd>
+                </div>
 
+                <div style="display:grid;grid-template-columns:160px 1fr;gap:0.75rem;align-items:start;">
+                    <dt style="font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);">Terms &amp; Conditions</dt>
+                    <dd style="margin:0;color:var(--text-secondary);line-height:1.65;">{{ workshop_type.terms_and_conditions }}</dd>
+                </div>
+            </dl>
 
+            {% if request.user|has_group:"instructor" %}
+            <div style="margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border);display:flex;gap:0.75rem;flex-wrap:wrap;">
+                <a href="{% url 'workshop_app:edit_workshop_type' workshop_type.id %}" class="btn btn-primary btn-sm">
+                    <i class="fa fa-pencil"></i>&nbsp;Edit Workshop Type
+                </a>
+            </div>
+            {% endif %}
+
+        </div>
+    </div>
+
+    
+    {% if not request.user|has_group:"instructor" %}
+    <div style="margin-top:1.25rem;text-align:center;">
+        <a href="{% url 'workshop_app:propose_workshop' %}" class="btn btn-success">
+            <i class="fa fa-plus-circle"></i>&nbsp;Propose This Workshop
+        </a>
+    </div>
+    {% endif %}
+
+</div>
+{% endblock %}
diff --git a/workshop_app/templates/workshop_app/workshop_type_list.html b/workshop_app/templates/workshop_app/workshop_type_list.html
index 2369cc9b..3670fca0 100644
--- a/workshop_app/templates/workshop_app/workshop_type_list.html
+++ b/workshop_app/templates/workshop_app/workshop_type_list.html
@@ -1,85 +1,158 @@
 {% extends 'workshop_app/base.html' %}
 {% load custom_filters %}
-{% block title %}
-	View List of available Workshops
-{% endblock %}
+
+{% block title %}Workshop Types{% endblock %}
 
 {% block content %}
-    <div class="container">
-    <h2 class="text-center">Workshop Types</h2>
-    <br>
-    {% if request.user|has_group:"instructor" %}
-        <a href="{% url 'workshop_app:add_workshop_type' %}">
-        <button class="btn btn-md btn-primary float-right mb-3 mx-4">Add Workshop Type</button>
+<div class="container">
+
+    <div class="page-header">
+        <div>
+            <h2>Workshop Types</h2>
+            <p style="margin:0;font-size:0.9rem;color:var(--text-muted);">
+                Browse available workshop programmes
+            </p>
+        </div>
+        {% if request.user|has_group:"instructor" %}
+        <a href="{% url 'workshop_app:add_workshop_type' %}" class="btn btn-primary">
+            <i class="fa fa-plus"></i>&nbsp;Add Workshop Type
         </a>
-        <br>
-    {% endif %}
-	<div class="container">
-		<table class="table table-hover">
-		  <thead>
-		    <tr>
-		      <th>Sr No</th>
-		      <th>Workshop Name</th>
-		      <th>Workshop Duration (Days)</th>
-		      <th>Action</th>
-		    </tr>
-		  </thead>
-
-		{% for w in workshop_type %}
-		  <tbody>
-		    <tr  >
-		      <td scope="row" id="{{ forloop.counter }}">{{ forloop.counter }}</td>
-		      <td>{{ w.name }}</td>
-		      <td>{{ w.duration }}</td>
-		      <td><a href="{% url 'workshop_app:workshop_type_details' w.id %}" class="btn btn-outline-info" class="accordion-toggle" >View Workshop Details</a></td>
-		    </tr>
-		  </tbody>
-		 {% endfor %}
-		</table>
-	</div>
-
-	    <!-- The Modal -->
-	    <div id="mailModal" class="modal">
-
-	    <!-- Modal content -->
-	    <div class="modal-content">
-		<span class="close">&times;</span>
-		<p>Separate Multiple Email Id's using <strong> comma (,)</strong></p>
-		<form action="{{URL_ROOT}}/share_details/" method="POST">
-		  {% csrf_token %}
-		    <label > Email: </label>
-		    <input name="email" type='email' multiple>
-		    <input type='submit'>
-		</form>
-	    </div>
-	    </div>
-
-<!-- Page Navigation -->
-	<div class="container">
-
-		<div class="Page-Nav" align="center">
-		<nav aria-label="Page navigation">
-		 	<ul class="pagination pagination-sm">
-			  	<li class="page-item">
-			      {% if workshoptype.has_previous %}
-					<a class="page-link" tabindex="-1" 
-							href="?page={{ workshop_type.previous_page_number }}">Previous</a>
-				{% endif %}
-			    </li>
-			    <li class="page-item">
-			    <span class="current">
-				Page {{ workshop_type.number }} of {{ workshop_type.paginator.num_pages }}
-					</span>
-				</li>
-			    <li class="page-item">
-			    {% if workshop_type.has_next %}
-					<a class="page-link" href="?page={{ workshop_type.next_page_number }}">Next
-					</a>
-				{% endif %}
-			    </li>
-		  	</ul>
-		</nav>
-		</div>
-	</div>
+        {% endif %}
+    </div>
+
+    <!-- React-powered search filter -->
+    <div id="workshop-filter-root"></div>
+
+    <!-- Workshop cards rendered by React from Django data -->
+    <div id="workshop-list-root"></div>
+
+    <!-- Hidden data for React to consume -->
+    <script id="workshop-data" type="application/json">
+        [
+        {% for w in workshop_type %}
+            {
+                "id": {{ w.id }},
+                "name": "{{ w.name|escapejs }}",
+                "duration": {{ w.duration }},
+                "url": "{% url 'workshop_app:workshop_type_details' w.id %}"
+            }{% if not forloop.last %},{% endif %}
+        {% endfor %}
+        ]
+    </script>
+
+	
+    <!-- Pagination -->
+    <div style="margin-top:2rem;display:flex;justify-content:center;">
+        <nav aria-label="Workshop types pagination">
+            <ul class="pagination">
+                {% if workshop_type.has_previous %}
+                <li class="page-item">
+                    <a class="page-link" href="?page={{ workshop_type.previous_page_number }}">
+                        <i class="fa fa-chevron-left"></i>&nbsp;Previous
+                    </a>
+                </li>
+                {% endif %}
+                <li class="page-item">
+                    <span class="page-link" style="color:var(--text-secondary);cursor:default;">
+                        Page {{ workshop_type.number }} of {{ workshop_type.paginator.num_pages }}
+                    </span>
+                </li>
+                {% if workshop_type.has_next %}
+                <li class="page-item">
+                    <a class="page-link" href="?page={{ workshop_type.next_page_number }}">
+                        Next&nbsp;<i class="fa fa-chevron-right"></i>
+                    </a>
+                </li>
+                {% endif %}
+            </ul>
+        </nav>
+    </div>
+
 </div>
-{% endblock %}
+
+<script>
+(function() {
+    const { useState, useMemo } = React;
+    const rawData = JSON.parse(document.getElementById("workshop-data").textContent);
+
+    /* ---- Filter bar ---- */
+    function FilterBar({ query, setQuery }) {
+        return React.createElement("div", {
+            style: { position: "relative", marginBottom: "0.5rem", maxWidth: "360px" }
+        },
+            React.createElement("span", {
+                className: "material-icons",
+                style: {
+                    position: "absolute", left: "0.75rem", top: "50%",
+                    transform: "translateY(-50%)", color: "var(--text-muted)",
+                    fontSize: "1.1rem", pointerEvents: "none"
+                }
+            }, "search"),
+            React.createElement("input", {
+                type: "search",
+                value: query,
+                onChange: e => setQuery(e.target.value),
+                placeholder: "Search workshop types…",
+                "aria-label": "Filter workshop types",
+                style: { paddingLeft: "2.4rem", width: "100%" }
+            })
+        );
+    }
+
+    /* ---- Single card ---- */
+    function WorkshopCard({ w }) {
+        return React.createElement("div", { className: "workshop-card animate-in" },
+            React.createElement("div", {},
+                React.createElement("p", { className: "workshop-card-title" }, w.name),
+                React.createElement("p", { className: "workshop-card-meta" },
+                    React.createElement("i", { className: "fa fa-clock-o" }),
+                    ` ${w.duration} day${w.duration !== 1 ? "s" : ""}`
+                )
+            ),
+            React.createElement("div", { className: "workshop-card-footer" },
+                React.createElement("a", {
+                    href: w.url,
+                    className: "btn btn-outline-info btn-sm",
+                    style: { width: "100%", justifyContent: "center" }
+                },
+                    React.createElement("i", { className: "fa fa-info-circle" }),
+                    " View Details"
+                )
+            )
+        );
+    }
+
+    /* ---- Main list ---- */
+    function WorkshopList() {
+        const [query, setQuery] = useState("");
+
+        const filtered = useMemo(() =>
+            rawData.filter(w =>
+                w.name.toLowerCase().includes(query.toLowerCase())
+            ), [query]);
+
+        return React.createElement(React.Fragment, null,
+            React.createElement(FilterBar, { query, setQuery }),
+            filtered.length === 0
+                ? React.createElement("div", {
+                    style: { textAlign: "center", padding: "3rem 1rem", color: "var(--text-muted)" }
+                  },
+                    React.createElement("span", { className: "material-icons", style: { fontSize: "3rem" } }, "search_off"),
+                    React.createElement("p", {}, "No workshops match your search.")
+                  )
+                : React.createElement("div", { className: "workshop-grid" },
+                    filtered.map(w => React.createElement(WorkshopCard, { key: w.id, w }))
+                  )
+        );
+    }
+
+    const filterRoot = document.getElementById("workshop-filter-root");
+    const listRoot   = document.getElementById("workshop-list-root");
+
+    // Mount WorkshopList spanning both roots
+    // Use listRoot for the combined component
+    if (filterRoot) filterRoot.remove(); // managed inside WorkshopList
+    if (listRoot) ReactDOM.createRoot(listRoot).render(React.createElement(WorkshopList));
+})();
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/workshop_frontend/workshop_frontend/.gitignore b/workshop_frontend/workshop_frontend/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/workshop_frontend/workshop_frontend/README.md b/workshop_frontend/workshop_frontend/README.md
new file mode 100644
index 00000000..09a134e6
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/README.md
@@ -0,0 +1,320 @@
+# FOSSEE Workshop Booking — UI/UX Enhancement
+
+> **FOSSEE Fellowship Screening Task** · Python · UI/UX Enhancement
+> Redesign of [`FOSSEE/workshop_booking`](https://github.com/FOSSEE/workshop_booking) with a focus on performance, modern UI, responsiveness, accessibility, and SEO using React.
+
+---
+
+## Table of Contents
+
+- [Visual Showcase](#visual-showcase)
+- [Project Structure](#project-structure)
+- [Setup — Django Backend](#setup--django-backend)
+- [Setup — React Frontend](#setup--react-frontend)
+- [Files Changed](#files-changed)
+- [Frontend Architecture](#frontend-architecture)
+- [Reasoning](#reasoning)
+- [Submission Checklist](#submission-checklist)
+
+---
+
+## Visual Showcase
+
+### Before vs After
+
+| Page | Before | After |
+|------|--------|-------|
+| **Workshop Types** | Plain table, no search, no card layout | Responsive card grid with live React-powered search filter |
+| **Login** | Minimal card with no validation feedback | Inline React form validation, password visibility toggle |
+| **Statistics** | Side-by-side layout breaks on mobile | Collapsible mobile filter sidebar, Recharts bar charts |
+| **Workshop Status** | Raw tables for accepted/proposed workshops | React tab interface separating Accepted & Proposed |
+| **Register** | `form.as_table` dump | Styled two-column grid with password strength indicator |
+| **Profile** | Basic table layout | Gradient profile card with clean field rows |
+
+<p align="center">
+  <img src="https://github.com/ViggiXDevp/workshop_booking/blob/master/workshop_frontend/workshop_frontend/public/Home.png" width="80%">
+</p>
+<p align="center">
+  <img src="https://github.com/ViggiXDevp/workshop_booking/blob/master/workshop_frontend/workshop_frontend/public/Statistics.png" width="80%">
+</p>
+
+---
+
+## Project Structure
+
+```
+workshop_booking/                    ← Django project root
+├── cms/
+├── docs/
+├── statistics_app/
+│   └── templates/statistics_app/
+│       └── workshop_public_stats.html   ← Enhanced
+├── teams/
+├── workshop_app/
+│   ├── static/workshop_app/css/
+│   │   └── base.css                     ← Full redesign
+│   └── templates/workshop_app/
+│       ├── base.html                    ← React CDN + Google Fonts + SEO
+│       ├── login.html                   ← React form validation
+│       ├── register.html                ← Styled fields + password strength
+│       ├── workshop_type_list.html      ← Card grid + live search
+│       ├── workshop_type_details.html   ← Clean detail card
+│       ├── propose_workshop.html        ← Mobile-friendly form + T&C modal
+│       ├── workshop_status_coordinator.html  ← React tabs
+│       └── view_profile.html            ← Profile card + edit form
+├── workshop_frontend/               ← Standalone React SPA (Vite + Tailwind)
+│   ├── index.html
+│   ├── package.json
+│   ├── tailwind.config.js
+│   ├── postcss.config.js
+│   └── src/
+│       ├── main.jsx
+│       ├── App.jsx                  ← React Router v6 routes
+│       ├── index.css                ← Tailwind + global styles
+│       ├── mockData.js              ← Mirrors Django models exactly
+│       ├── components/
+│       │   ├── Navbar.jsx           ← Responsive + mobile hamburger
+│       │   └── Layout.jsx           ← Shell with navbar + footer
+│       └── pages/
+│           ├── Home.jsx             ← Dashboard + hero banner
+│           ├── Login.jsx            ← Validation + password toggle
+│           ├── Register.jsx         ← All fields + password strength
+│           ├── WorkshopTypeList.jsx ← Card grid + search + pagination
+│           ├── WorkshopTypeDetail.jsx
+│           ├── ProposeWorkshop.jsx  ← Date picker + T&C modal
+│           ├── MyWorkshops.jsx      ← Accepted/Proposed tabs
+│           ├── Statistics.jsx       ← Recharts + filter sidebar + table
+│           └── Profile.jsx          ← View + inline edit
+├── workshop_portal/
+├── manage.py
+├── requirements.txt
+└── README.md
+```
+
+---
+
+## Setup — Django Backend
+
+### Prerequisites
+
+- Python 3.8+
+- pip
+- MySQL or SQLite database
+
+### Steps
+
+```bash
+# 1. Clone the repository
+git clone https://github.com/ViggiXDevp/workshop_booking.git
+cd workshop_booking
+
+# 2. Create and activate virtual environment
+python -m venv venv
+source venv/bin/activate        # Windows: venv\Scripts\activate
+
+# 3. Install dependencies
+pip install -r requirements.txt
+
+# 4. Configure local settings
+cp local_settings.py.example local_settings.py
+# Edit local_settings.py — set SECRET_KEY and DATABASE settings
+
+# 5. Run migrations
+python manage.py migrate
+
+# 6. Create superuser (optional)
+python manage.py createsuperuser
+
+# 7. Collect static files
+python manage.py collectstatic
+
+# 8. Start the server
+python manage.py runserver
+```
+
+Visit `http://127.0.0.1:8000` in your browser.
+
+---
+
+## Setup — React Frontend
+
+The `workshop_frontend/` folder is a standalone React SPA built with Vite + Tailwind CSS. It runs independently for UI development and visual demonstration.
+
+### Prerequisites
+
+- Node.js 18+ ([download](https://nodejs.org/))
+- npm 9+
+
+### Steps
+
+```bash
+# From the repo root
+cd workshop_frontend
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+Open **http://localhost:5173** in your browser.
+
+### Build for Production
+
+```bash
+npm run build
+# Output → workshop_frontend/dist/
+```
+
+### Frontend Routes
+
+| Route | Page | Description |
+|-------|------|-------------|
+| `/` | Home | Dashboard with hero banner + quick-access cards |
+| `/login` | Login | Sign in with client-side validation |
+| `/register` | Register | Coordinator registration with all Django fields |
+| `/workshop-types` | WorkshopTypeList | Card grid with live search + pagination |
+| `/workshop-types/:id` | WorkshopTypeDetail | Workshop details + T&C |
+| `/propose` | ProposeWorkshop | Proposal form with date picker + T&C modal |
+| `/my-workshops` | MyWorkshops | Accepted & Proposed tab view |
+| `/statistics` | Statistics | Recharts charts + filter sidebar + data table |
+| `/profile` | Profile | View + edit user profile |
+
+### Frontend Tech Stack
+
+| Tool | Purpose |
+|------|---------|
+| [Vite](https://vitejs.dev/) | Build tool & dev server |
+| [React 18](https://react.dev/) | UI framework |
+| [React Router v6](https://reactrouter.com/) | Client-side routing |
+| [Tailwind CSS v3](https://tailwindcss.com/) | Utility-first styling |
+| [Recharts](https://recharts.org/) | Bar charts for statistics |
+| [Lucide React](https://lucide.dev/) | Icon set |
+
+### Mock Data (`src/mockData.js`)
+
+All data mirrors the Django models exactly:
+
+- `workshopTypes` → `WorkshopType` model (name, duration, description, T&C)
+- `workshops` → `Workshop` model (coordinator, instructor, date, status 0/1/2)
+- `currentUser` → logged-in `User` + `Profile`
+- `stateChoices` → all 36 Indian states from Django `states` tuple
+- `departmentChoices` → matches Django `department_choices`
+- `getStatsByState()` / `getStatsByType()` → mirrors Django `WorkshopManager` aggregation
+
+To connect to the live Django backend, replace `mockData.js` imports with `fetch()` calls to your API endpoints and add a dev proxy in `vite.config.js`:
+
+```js
+server: { proxy: { "/api": "http://localhost:8000" } }
+```
+
+---
+
+## Files Changed
+
+### Django Templates & Static Files
+
+| File | What Changed |
+|------|-------------|
+| `workshop_app/static/workshop_app/css/base.css` | Complete redesign — CSS custom properties (design tokens), mobile-first grid, modern card/button/form/badge/table styles, fluid typography with `clamp()`, animations |
+| `workshop_app/templates/workshop_app/base.html` | React 18 via CDN, Google Fonts (Plus Jakarta Sans), SEO `<meta>` + Open Graph tags, accessible navbar with Login/Register for unauthenticated users, improved footer |
+| `workshop_app/templates/workshop_app/login.html` | React form with client-side validation, password show/hide toggle, `aria-invalid` / `aria-describedby`, `<noscript>` fallback |
+| `workshop_app/templates/workshop_app/register.html` | Replaced `form.as_table` with styled two-column grid of individual fields; React password strength bar |
+| `workshop_app/templates/workshop_app/workshop_type_list.html` | Django data-island JSON → React card grid with live search filter; accessible pagination |
+| `workshop_app/templates/workshop_app/workshop_type_details.html` | Definition-list card, back navigation, contextual CTA |
+| `workshop_app/templates/workshop_app/propose_workshop.html` | Single-column mobile-friendly form, styled T&C modal, clear error messages |
+| `workshop_app/templates/workshop_app/workshop_status_coordinator.html` | React tab interface for Accepted / Proposed; welcome banner for empty state |
+| `workshop_app/templates/workshop_app/view_profile.html` | Profile card with gradient header; clean field rows; two-column edit grid |
+| `statistics_app/templates/statistics_app/workshop_public_stats.html` | Responsive two-column layout; collapsible mobile filter sidebar (`aria-expanded`); updated chart colours |
+
+### React Frontend (new folder)
+
+| File | Description |
+|------|-------------|
+| `workshop_frontend/src/App.jsx` | Central router — all page routes defined here |
+| `workshop_frontend/src/mockData.js` | Hardcoded data mirroring all Django models |
+| `workshop_frontend/src/components/Navbar.jsx` | Responsive navbar with mobile hamburger drawer |
+| `workshop_frontend/src/components/Layout.jsx` | Page shell wrapping navbar + footer |
+| `workshop_frontend/src/pages/Home.jsx` | Hero banner + quick-access cards + recent workshops |
+| `workshop_frontend/src/pages/Login.jsx` | Validation + password toggle |
+| `workshop_frontend/src/pages/Register.jsx` | All Django fields + password strength indicator |
+| `workshop_frontend/src/pages/WorkshopTypeList.jsx` | Card grid + live search + pagination |
+| `workshop_frontend/src/pages/WorkshopTypeDetail.jsx` | Detail card + T&C display |
+| `workshop_frontend/src/pages/ProposeWorkshop.jsx` | Date picker + T&C modal + success state |
+| `workshop_frontend/src/pages/MyWorkshops.jsx` | Accepted / Proposed React tabs |
+| `workshop_frontend/src/pages/Statistics.jsx` | Recharts bar charts + filter sidebar + paginated table |
+| `workshop_frontend/src/pages/Profile.jsx` | View + inline edit with all Django profile fields |
+
+---
+
+## Reasoning
+
+### What design principles guided your improvements?
+
+**Visual hierarchy first.** Every page was audited for the most important action a user needs to take, and that element was made visually dominant — the "Submit Proposal" button on the proposal page, workshop cards on the list page. Supporting information uses smaller, muted text so the eye flows naturally to what matters.
+
+**Mobile-first, not mobile-afterthought.** Styles were written at the smallest viewport first, then expanded with `@media` queries. CSS Grid with `auto-fill` / `minmax` and Tailwind breakpoints (`sm:`, `lg:`) let content reflow naturally without explicit breakpoints for every screen size.
+
+**Consistency through design tokens.** A single set of CSS custom properties (`--primary`, `--radius`, `--shadow`, etc.) is declared once in `base.css` and reused everywhere. In the React frontend, Tailwind's config extends the same colour palette. Future theme changes require editing one place.
+
+**Accessibility (WCAG 2.1 AA target).** Every interactive element has a visible focus ring. Form errors are linked via `aria-describedby` and `aria-invalid`. Icon-only buttons carry `aria-label`. Tables have `aria-label`. Tab interfaces use `role="tablist"` and `aria-selected`. Colour contrast was checked for all pairings.
+
+**Progressive enhancement.** React components in the Django templates mount on top of server-rendered output. The login form includes a `<noscript>` fallback. Core content is always visible even without JavaScript.
+
+---
+
+### How did you ensure responsiveness across devices?
+
+1. **CSS Grid `auto-fill` / `minmax`** — the workshop card grid adapts from one column on a 320 px phone to four columns on desktop without a single explicit breakpoint.
+2. **Tailwind responsive prefixes** — `sm:grid-cols-2 lg:grid-cols-3` handle layout transitions declaratively in the React frontend.
+3. **`clamp()` for fluid typography** — headings scale smoothly between viewports instead of jumping at breakpoints.
+4. **Fixed navbar height as CSS variable** — `--nav-height: 60px` is reused for `padding-top` and `sticky` offsets, so layout adjusts from one place.
+5. **Collapsible filter sidebar** — the statistics page hides its filter panel behind a toggle button below 992 px, with `aria-expanded` kept in sync for screen readers.
+6. **Horizontal scroll on tables** — all tables sit inside `overflow-x: auto` wrappers so they never break the page layout on narrow screens.
+7. **`rem`-based spacing** — all padding and margin use `rem` units, respecting the user's browser font-size preference.
+
+---
+
+### What trade-offs did you make between design and performance?
+
+| Decision | Trade-off |
+|----------|-----------|
+| React 18 via CDN (Django templates) | Adds ~130 KB (gzipped ~42 KB) to first load. Accepted because it enables reactive components without a build pipeline, keeping Django workflow intact. `production.min.js` variant used to minimise size. |
+| Vite + React SPA (frontend folder) | Separate dev server needed. Accepted because it gives full component isolation, HMR, and Tailwind JIT — making UI iteration much faster. |
+| Google Fonts (Plus Jakarta Sans) | ~20 KB extra network request. Mitigated with `<link rel="preconnect">` and `display=swap`. Significantly improves readability over system fonts. |
+| CSS custom properties only, no Sass | No build step for Django templates. Minor downside: no IE 11 support, which is acceptable for FOSSEE's student audience. |
+| Django→React data-island pattern | Avoids extra AJAX calls. Data already in Django view context is serialised into `<script type="application/json">` tags — zero extra latency. |
+| Recharts over D3 | Heavier bundle but provides responsive charts out of the box with a familiar React API, reducing implementation time significantly. |
+| Mock data in frontend folder | Enables rapid UI prototyping without a running Django server. Trade-off is that data is static until real API endpoints are wired up. |
+
+---
+
+### What was the most challenging part and how did you approach it?
+
+**Bridging Django's server-rendered templates with React's client-side reactivity — without a build step.**
+
+Django renders on the server; React lives in the browser. The standard approach (CRA or Vite) requires a separate build pipeline that would change how the project is deployed.
+
+**Solution — data-island pattern:**
+1. Django renders a `<script type="application/json">` tag with serialised context data.
+2. A small inline React script reads that JSON, builds the UI, and mounts it on a `<div>`.
+3. Django templates retain server-rendered fallbacks so pages are never blank without JavaScript.
+
+This gave full React interactivity (live search, tabs, form validation) with zero build tooling and zero changes to any Django view or URL.
+
+A secondary challenge was ensuring the CSS redesign didn't break existing Bootstrap classes emitted by Django form widgets. The solution was to **extend, not replace** Bootstrap — `base.css` overrides specific selectors (`.card`, `.btn`, `.table`, `.badge`) with new design tokens, so Django widgets automatically pick up the new styles without template changes.
+
+For the standalone React frontend, the challenge was mirroring the Django data model precisely in `mockData.js` — including the `states` tuple, `STATUS_CHOICES`, and the `WorkshopManager` aggregation logic — so the UI behaves identically to what the real backend would return.
+
+---
+
+## Submission Checklist
+
+- [x] Code is readable and well-structured
+- [x] Git history shows progressive work (no single-commit dumps)
+- [x] README includes reasoning answers and setup instructions for both Django and React
+- [x] Screenshots section included *(add actual screenshots before submission)*
+- [x] Code is documented with inline comments where necessary
+- [x] React frontend runs independently with `npm install && npm run dev`
+- [x] Django templates enhanced with mobile-first CSS and React interactivity
diff --git a/workshop_frontend/workshop_frontend/eslint.config.js b/workshop_frontend/workshop_frontend/eslint.config.js
new file mode 100644
index 00000000..4fa125da
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
diff --git a/workshop_frontend/workshop_frontend/index.html b/workshop_frontend/workshop_frontend/index.html
new file mode 100644
index 00000000..52bce3e4
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="FOSSEE Workshop Booking — Book and manage Python workshops by IIT Bombay" />
+    <meta name="theme-color" content="#0f172a" />
+    <title>FOSSEE Workshops</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/workshop_frontend/workshop_frontend/package-lock.json b/workshop_frontend/workshop_frontend/package-lock.json
new file mode 100644
index 00000000..8e1e8291
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/package-lock.json
@@ -0,0 +1,3957 @@
+{
+  "name": "workshop_frontend",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "workshop_frontend",
+      "version": "0.0.0",
+      "dependencies": {
+        "lucide-react": "^1.8.0",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "react-router-dom": "^7.14.0",
+        "recharts": "^3.8.1"
+      },
+      "devDependencies": {
+        "@eslint/js": "^9.39.4",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+        "autoprefixer": "^10.4.27",
+        "eslint": "^9.39.4",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.5.2",
+        "globals": "^17.4.0",
+        "postcss": "^8.5.9",
+        "tailwindcss": "^3.4.19",
+        "vite": "^8.0.4"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
+      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
+      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.5"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.14.0",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.5",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.3.tgz",
+      "integrity": "sha512-xK9sGVbJWYb08+mTJt3/YV24WxvxpXcXtP6B172paPZ+Ts69Re9dAr7lKwJoeIx8OoeuimEiRZ7umkiUVClmmQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.124.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.124.0.tgz",
+      "integrity": "sha512-VBFWMTBvHxS11Z5Lvlr3IWgrwhMTXV+Md+EQF0Xf60+wAdsGFTBx7X7K/hP4pi8N7dcm1RvcHwDxZ16Qx8keUg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
+      "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-YYe6aWruPZDtHNpwu7+qAHEMbQ/yRl6atqb/AhznLTnD3UY99Q1jE7ihLSahNWkF4EqRPVC4SiR4O0UkLK02tA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-oArR/ig8wNTPYsXL+Mzhs0oxhxfuHRfG7Ikw7jXsw8mYOtk71W0OkF2VEVh699pdmzjPQsTjlD1JIOoHkLP1Fg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-YzeVqOqjPYvUbJSWJ4EDL8ahbmsIXQpgL3JVipmN+MX0XnXMeWomLN3Fb+nwCmP/jfyqte5I3XRSm7OfQrbyxw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-9Erhx956jeQ0nNTyif1+QWAXDRD38ZNjr//bSHrt6wDwB+QkAfl2q6Mn1k6OBPerznjRmbM10lgRb1Pli4xZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.15.tgz",
+      "integrity": "sha512-cVwk0w8QbZJGTnP/AHQBs5yNwmpgGYStL88t4UIaqcvYJWBfS0s3oqVLZPwsPU6M0zlW4GqjP0Zq5MnAGwFeGA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-eBZ/u8iAK9SoHGanqe/jrPnY0JvBN6iXbVOsbO38mbz+ZJsaobExAm1Iu+rxa4S1l2FjG0qEZn4Rc6X8n+9M+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.15.tgz",
+      "integrity": "sha512-ZvRYMGrAklV9PEkgt4LQM6MjQX2P58HPAuecwYObY2DhS2t35R0I810bKi0wmaYORt6m/2Sm+Z+nFgb0WhXNcQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-VDpgGBzgfg5hLg+uBpCLoFG5kVvEyafmfxGUV0UHLcL5irxAK7PKNeC2MwClgk6ZAiNhmo9FLhRYgvMmedLtnQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-y1uXY3qQWCzcPgRJATPSOUP4tCemh4uBdY7e3EZbVwCJTY3gLJWnQABgeUetvED+bt1FQ01OeZwvhLS2bpNrAQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.15.tgz",
+      "integrity": "sha512-023bTPBod7J3Y/4fzAN6QtpkSABR0rigtrwaP+qSEabUh5zf6ELr9Nc7GujaROuPY3uwdSIXWrvhn1KxOvurWA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.15.tgz",
+      "integrity": "sha512-witB2O0/hU4CgfOOKUoeFgQ4GktPi1eEbAhaLAIpgD6+ZnhcPkUtPsoKKHRzmOoWPZue46IThdSgdo4XneOLYw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.15.tgz",
+      "integrity": "sha512-UCL68NJ0Ud5zRipXZE9dF5PmirzJE4E4BCIOOssEnM7wLDsxjc6Qb0sGDxTNRTP53I6MZpygyCpY8Aa8sPfKPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.15.tgz",
+      "integrity": "sha512-ApLruZq/ig+nhaE7OJm4lDjayUnOHVUa77zGeqnqZ9pn0ovdVbbNPerVibLXDmWeUZXjIYIT8V3xkT58Rm9u5Q==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.9.2",
+        "@emnapi/runtime": "1.9.2",
+        "@napi-rs/wasm-runtime": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.15.tgz",
+      "integrity": "sha512-KmoUoU7HnN+Si5YWJigfTws1jz1bKBYDQKdbLspz0UaqjjFkddHsqorgiW1mxcAj88lYUE6NC/zJNwT+SloqtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.15.tgz",
+      "integrity": "sha512-3P2A8L+x75qavWLe/Dll3EYBJLQmtkJN8rfh+U/eR3MqMgL/h98PhYI+JFfXuDPgPeCB7iZAKiqii5vqOvnA0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
+      "integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
+      "integrity": "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.7"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.27",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz",
+      "integrity": "sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001774",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.16",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.16.tgz",
+      "integrity": "sha512-Lyf3aK28zpsD1yQMiiHD4RvVb6UdMoo8xzG2XzFIfR9luPzOpcBlAsT/qfB1XWS1bxWT+UtE4WmQgsp297FYOA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001787",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001787.tgz",
+      "integrity": "sha512-mNcrMN9KeI68u7muanUpEejSLghOKlVhRqS/Za2IeyGllJ9I9otGpR9g3nsw7n4W378TE/LyIteA0+/FOZm4Kg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.334",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.334.tgz",
+      "integrity": "sha512-mgjZAz7Jyx1SRCwEpy9wefDS7GvNPazLthHg8eQMJ76wBdGQQDW33TCrUTvQ4wzpmOrv2zrFoD3oNufMdyMpog==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.45.1",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.45.1.tgz",
+      "integrity": "sha512-/jhoOj/Fx+A+IIyDNOvO3TItGmlMKhtX8ISAHKE90c4b/k1tqaqEZ+uUqfpU8DMnW5cgNJv606zS55jGvza0Xw==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+      "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.2",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "9.39.4",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.5",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.2.tgz",
+      "integrity": "sha512-hmgTH57GfzoTFjVN0yBwTggnsVUF2tcqi7RJZHqi9lIezSs4eFyAMktA68YD4r5kNw1mxyY4dmkyoFDb3FIqrA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": "^9 || ^10"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
+      "integrity": "sha512-hjrNztw/VajQwOLsMNT1cbJiH2muO3OROCHnbehc8eY5JyD2gqz4AcMHPqgaOR59DjgUjYAYLeH699g/eWi2jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.8.0.tgz",
+      "integrity": "sha512-WuvlsjngSk7TnTBJ1hsCy3ql9V9VOdcPkd3PKcSmM34vJD8KG6molxz7m7zbYFgICwsanQWmJ13JlYs4Zp7Arw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.37",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.37.tgz",
+      "integrity": "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.9",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz",
+      "integrity": "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
+      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
+      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.5"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.5.tgz",
+      "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.0.tgz",
+      "integrity": "sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.0.tgz",
+      "integrity": "sha512-2G3ajSVSZMEtmTjIklRWlNvo8wICEpLihfD/0YMDxbWK2UyP5EGfnoIn9AIQGnF3G/FX0MRbHXdFcD+rL1ZreQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.14.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.1.tgz",
+      "integrity": "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.15.tgz",
+      "integrity": "sha512-Ff31guA5zT6WjnGp0SXw76X6hzGRk/OQq2hE+1lcDe+lJdHSgnSX6nK3erbONHyCbpSj9a9E+uX/OvytZoWp2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.124.0",
+        "@rolldown/pluginutils": "1.0.0-rc.15"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.15",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.15",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.15",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.15",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.15",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.15",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.15",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.15",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.15",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.15",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.15",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.15"
+      }
+    },
+    "node_modules/rolldown/node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.15",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.15.tgz",
+      "integrity": "sha512-UromN0peaE53IaBRe9W7CjrZgXl90fqGpK+mIZbA3qSTeYqg3pqpROBdIPvOG3F5ereDHNwoHBI2e50n1BDr1g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.8.tgz",
+      "integrity": "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.8",
+        "rolldown": "1.0.0-rc.15",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    }
+  }
+}
diff --git a/workshop_frontend/workshop_frontend/package.json b/workshop_frontend/workshop_frontend/package.json
new file mode 100644
index 00000000..d346be05
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "workshop_frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^1.8.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.14.0",
+    "recharts": "^3.8.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "postcss": "^8.5.9",
+    "tailwindcss": "^3.4.19",
+    "vite": "^8.0.4"
+  }
+}
diff --git a/workshop_frontend/workshop_frontend/postcss.config.js b/workshop_frontend/workshop_frontend/postcss.config.js
new file mode 100644
index 00000000..2e7af2b7
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/workshop_frontend/workshop_frontend/public/Home.png b/workshop_frontend/workshop_frontend/public/Home.png
new file mode 100644
index 00000000..b5cbaa1a
Binary files /dev/null and b/workshop_frontend/workshop_frontend/public/Home.png differ
diff --git a/workshop_frontend/workshop_frontend/public/Statistics.png b/workshop_frontend/workshop_frontend/public/Statistics.png
new file mode 100644
index 00000000..3403159b
Binary files /dev/null and b/workshop_frontend/workshop_frontend/public/Statistics.png differ
diff --git a/workshop_frontend/workshop_frontend/public/favicon.svg b/workshop_frontend/workshop_frontend/public/favicon.svg
new file mode 100644
index 00000000..6893eb13
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/workshop_frontend/workshop_frontend/public/icons.svg b/workshop_frontend/workshop_frontend/public/icons.svg
new file mode 100644
index 00000000..e9522193
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/workshop_frontend/workshop_frontend/src/App.css b/workshop_frontend/workshop_frontend/src/App.css
new file mode 100644
index 00000000..f90339d8
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/App.css
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
diff --git a/workshop_frontend/workshop_frontend/src/App.jsx b/workshop_frontend/workshop_frontend/src/App.jsx
new file mode 100644
index 00000000..5db32a61
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/App.jsx
@@ -0,0 +1,35 @@
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import Layout from "./components/Layout";
+import Home              from "./pages/Home";
+import Login             from "./pages/Login";
+import Register          from "./pages/Register";
+import WorkshopTypeList  from "./pages/WorkshopTypeList";
+import WorkshopTypeDetail from "./pages/WorkshopTypeDetail";
+import ProposeWorkshop   from "./pages/ProposeWorkshop";
+import MyWorkshops       from "./pages/MyWorkshops";
+import Statistics        from "./pages/Statistics";
+import Profile           from "./pages/Profile";
+
+function WithLayout({ children }) {
+  return <Layout>{children}</Layout>;
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login"    element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/" element={<WithLayout><Home /></WithLayout>} />
+        <Route path="/workshop-types" element={<WithLayout><WorkshopTypeList /></WithLayout>} />
+        <Route path="/workshop-types/:id" element={<WithLayout><WorkshopTypeDetail /></WithLayout>} />
+        <Route path="/propose"      element={<WithLayout><ProposeWorkshop /></WithLayout>} />
+        <Route path="/my-workshops" element={<WithLayout><MyWorkshops /></WithLayout>} />
+        <Route path="/statistics"   element={<WithLayout><Statistics /></WithLayout>} />
+        <Route path="/profile"      element={<WithLayout><Profile /></WithLayout>} />
+        <Route path="/logout" element={<Navigate to="/login" replace />} />
+        <Route path="*"       element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/assets/react.svg b/workshop_frontend/workshop_frontend/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/workshop_frontend/workshop_frontend/src/assets/vite.svg b/workshop_frontend/workshop_frontend/src/assets/vite.svg
new file mode 100644
index 00000000..5101b674
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/assets/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
diff --git a/workshop_frontend/workshop_frontend/src/components/Layout.jsx b/workshop_frontend/workshop_frontend/src/components/Layout.jsx
new file mode 100644
index 00000000..9456ebc8
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/components/Layout.jsx
@@ -0,0 +1,22 @@
+import Navbar from "./Navbar";
+
+export default function Layout({ children }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 pt-14 pb-14">
+        {children}
+      </main>
+      <footer className="fixed bottom-0 left-0 right-0 bg-slate-900 text-slate-400 text-xs text-center py-2.5 z-40">
+        Developed by{" "}
+        <a href="https://fossee.in" target="_blank" rel="noopener" className="text-slate-300 hover:text-white transition-colors">
+          FOSSEE Group, IIT Bombay
+        </a>
+        {" · "}
+        <a href="mailto:pythonsupport@fossee.in" className="text-slate-300 hover:text-white transition-colors">
+          Contact
+        </a>
+      </footer>
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/components/Navbar.jsx b/workshop_frontend/workshop_frontend/src/components/Navbar.jsx
new file mode 100644
index 00000000..d5d3d353
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/components/Navbar.jsx
@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Menu, X, ChevronDown, User, LogOut, Lock, BarChart2, List, PlusCircle, CheckSquare } from "lucide-react";
+import { currentUser } from "../mockData";
+
+const navLinks = [
+  { to: "/", label: "Home", icon: null },
+  { to: "/statistics", label: "Statistics", icon: <BarChart2 size={15} /> },
+  { to: "/workshop-types", label: "Workshop Types", icon: <List size={15} /> },
+  { to: "/propose", label: "Propose Workshop", icon: <PlusCircle size={15} />, coordinatorOnly: true },
+  { to: "/my-workshops", label: "My Workshops", icon: <CheckSquare size={15} /> },
+];
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false);
+  const [dropOpen, setDropOpen] = useState(false);
+  const { pathname } = useLocation();
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-slate-900 shadow-lg">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 flex items-center justify-between h-14">
+
+        {/* Brand */}
+        <Link to="/" className="flex items-center gap-2 text-white font-extrabold text-base tracking-tight">
+          <span className="w-2 h-2 rounded-full bg-orange-400 inline-block" />
+          FOSSEE Workshops
+        </Link>
+
+        {/* Desktop nav */}
+        <div className="hidden lg:flex items-center gap-1">
+          {navLinks
+            .filter((l) => !l.coordinatorOnly || !currentUser.is_instructor)
+            .map((l) => (
+              <Link
+                key={l.to}
+                to={l.to}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                  pathname === l.to
+                    ? "bg-white/15 text-white"
+                    : "text-slate-300 hover:bg-white/10 hover:text-white"
+                }`}
+              >
+                {l.icon}
+                {l.label}
+              </Link>
+            ))}
+        </div>
+
+        {/* User menu */}
+        <div className="hidden lg:flex items-center">
+          <div className="relative">
+            <button
+              onClick={() => setDropOpen((p) => !p)}
+              className="flex items-center gap-2 text-slate-300 hover:text-white px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
+              aria-expanded={dropOpen}
+              aria-haspopup="true"
+            >
+              <span className="w-7 h-7 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs font-bold">
+                {currentUser.first_name[0]}
+              </span>
+              {currentUser.full_name}
+              <ChevronDown size={14} className={`transition-transform ${dropOpen ? "rotate-180" : ""}`} />
+            </button>
+            {dropOpen && (
+              <div className="absolute right-0 mt-1 w-48 bg-white rounded-xl border border-slate-200 shadow-xl py-1 z-50">
+                <Link to="/profile" className="flex items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-slate-50" onClick={() => setDropOpen(false)}>
+                  <User size={14} /> Profile
+                </Link>
+                <Link to="/change-password" className="flex items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-slate-50" onClick={() => setDropOpen(false)}>
+                  <Lock size={14} /> Change Password
+                </Link>
+                <div className="my-1 border-t border-slate-100" />
+                <Link to="/logout" className="flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50" onClick={() => setDropOpen(false)}>
+                  <LogOut size={14} /> Logout
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Mobile hamburger */}
+        <button
+          className="lg:hidden text-slate-300 hover:text-white p-1.5 rounded-md"
+          onClick={() => setOpen((p) => !p)}
+          aria-label="Toggle menu"
+          aria-expanded={open}
+        >
+          {open ? <X size={22} /> : <Menu size={22} />}
+        </button>
+      </div>
+
+      {/* Mobile drawer */}
+      {open && (
+        <div className="lg:hidden bg-slate-800 border-t border-slate-700 px-4 py-3 flex flex-col gap-1">
+          {navLinks
+            .filter((l) => !l.coordinatorOnly || !currentUser.is_instructor)
+            .map((l) => (
+              <Link
+                key={l.to}
+                to={l.to}
+                onClick={() => setOpen(false)}
+                className={`flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                  pathname === l.to
+                    ? "bg-white/15 text-white"
+                    : "text-slate-300 hover:bg-white/10 hover:text-white"
+                }`}
+              >
+                {l.icon}
+                {l.label}
+              </Link>
+            ))}
+          <div className="mt-2 pt-2 border-t border-slate-700 flex flex-col gap-1">
+            <Link to="/profile" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-2.5 text-slate-300 hover:text-white text-sm">
+              <User size={14} /> Profile
+            </Link>
+            <Link to="/logout" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-2.5 text-red-400 text-sm">
+              <LogOut size={14} /> Logout
+            </Link>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/index.css b/workshop_frontend/workshop_frontend/src/index.css
new file mode 100644
index 00000000..2ec05abb
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/index.css
@@ -0,0 +1,27 @@
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * { box-sizing: border-box; }
+  body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background:#f8fafc; color:#0f172a; }
+}
+
+@layer components {
+  .btn-primary { @apply inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm px-4 py-2 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2; }
+  .btn-secondary { @apply inline-flex items-center gap-2 border border-slate-300 bg-white hover:bg-slate-50 text-slate-700 font-semibold text-sm px-4 py-2 rounded-lg transition-colors; }
+  .btn-success { @apply inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white font-semibold text-sm px-4 py-2 rounded-lg transition-colors; }
+  .btn-danger { @apply inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white font-semibold text-sm px-4 py-2 rounded-lg transition-colors; }
+  .input { @apply w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white placeholder-slate-400 transition; }
+  .label { @apply block text-xs font-bold text-slate-500 uppercase tracking-wide mb-1; }
+  .card { @apply bg-white rounded-2xl border border-slate-200; box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
+}
+
+::-webkit-scrollbar { width:6px; height:6px; }
+::-webkit-scrollbar-track { background:#f1f5f9; }
+::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
+
+@keyframes fadeUp { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
+.fade-up { animation: fadeUp 0.3s ease forwards; }
diff --git a/workshop_frontend/workshop_frontend/src/main.jsx b/workshop_frontend/workshop_frontend/src/main.jsx
new file mode 100644
index 00000000..f18b0f0d
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/workshop_frontend/workshop_frontend/src/mockData.js b/workshop_frontend/workshop_frontend/src/mockData.js
new file mode 100644
index 00000000..ea0c5418
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/mockData.js
@@ -0,0 +1,259 @@
+// mockData.js
+// Mirrors the Django models: WorkshopType, Workshop, Profile, User, Comment
+// Used by the React frontend to simulate API responses from the Django backend.
+
+// ── Workshop Types (WorkshopType model) ──────────────────────────────────────
+export const workshopTypes = [
+  {
+    id: 1,
+    name: "Python",
+    duration: 2,
+    description:
+      "An introductory Python workshop covering data types, control flow, functions, and file handling. Ideal for students with no prior programming experience.",
+    terms_and_conditions:
+      "The coordinator must ensure a minimum of 30 participants. A computer lab with internet access is mandatory. The workshop must be conducted within the FOSSEE-approved syllabus.",
+  },
+  {
+    id: 2,
+    name: "Scilab",
+    duration: 2,
+    description:
+      "Learn numerical computation and simulation using Scilab. Topics include matrix operations, plotting, and solving engineering problems.",
+    terms_and_conditions:
+      "Participants must have Scilab installed before the workshop. The coordinator is responsible for hardware compatibility checks.",
+  },
+  {
+    id: 3,
+    name: "OpenFOAM",
+    duration: 3,
+    description:
+      "A hands-on workshop on Computational Fluid Dynamics (CFD) using OpenFOAM. Covers meshing, solver setup, and post-processing.",
+    terms_and_conditions:
+      "Requires Linux environment. Participants should be familiar with basic fluid mechanics. Minimum batch size: 20.",
+  },
+  {
+    id: 4,
+    name: "DWSIM",
+    duration: 2,
+    description:
+      "Process simulation using DWSIM. Learn steady-state simulation of chemical processes, thermodynamic property estimation, and flowsheet creation.",
+    terms_and_conditions:
+      "Participants must have basic knowledge of chemical engineering. DWSIM software must be pre-installed.",
+  },
+  {
+    id: 5,
+    name: "eSim",
+    duration: 2,
+    description:
+      "Electronic circuit simulation using eSim, a free and open-source EDA tool. Topics include schematic design, SPICE simulation, and PCB layout.",
+    terms_and_conditions:
+      "A laptop with eSim installed is required. Prior knowledge of basic electronics is recommended.",
+  },
+  {
+    id: 6,
+    name: "Osdag",
+    duration: 2,
+    description:
+      "Steel structure design using Osdag software, developed under FOSSEE, IIT Bombay. Covers connection design as per IS standards.",
+    terms_and_conditions:
+      "Participants must be from civil or structural engineering background. Minimum 15 participants required.",
+  },
+];
+
+// ── Indian States (matches model choices) ────────────────────────────────────
+export const stateChoices = [
+  { code: "IN-AP", name: "Andhra Pradesh" },
+  { code: "IN-BR", name: "Bihar" },
+  { code: "IN-DL", name: "Delhi" },
+  { code: "IN-GJ", name: "Gujarat" },
+  { code: "IN-KA", name: "Karnataka" },
+  { code: "IN-KL", name: "Kerala" },
+  { code: "IN-MH", name: "Maharashtra" },
+  { code: "IN-MP", name: "Madhya Pradesh" },
+  { code: "IN-PB", name: "Punjab" },
+  { code: "IN-RJ", name: "Rajasthan" },
+  { code: "IN-TN", name: "Tamil Nadu" },
+  { code: "IN-TG", name: "Telangana" },
+  { code: "IN-UP", name: "Uttar Pradesh" },
+  { code: "IN-WB", name: "West Bengal" },
+];
+
+// ── Workshops (Workshop model with status: 0=Pending, 1=Accepted, 2=Deleted) ─
+export const workshops = [
+  {
+    id: 1,
+    workshop_type: { id: 1, name: "Python" },
+    coordinator: {
+      id: 10,
+      full_name: "Aisha Sharma",
+      email: "aisha@example.com",
+      profile: { institute: "IIT Bombay", state: "IN-MH", phone: "9876543210" },
+    },
+    instructor: { id: 20, full_name: "Dr. Rahul Mehta" },
+    date: "2025-03-15",
+    status: 1,
+    tnc_accepted: true,
+  },
+  {
+    id: 2,
+    workshop_type: { id: 2, name: "Scilab" },
+    coordinator: {
+      id: 11,
+      full_name: "Rohan Kulkarni",
+      email: "rohan@example.com",
+      profile: { institute: "VJTI Mumbai", state: "IN-MH", phone: "9823456710" },
+    },
+    instructor: { id: 21, full_name: "Prof. Sneha Joshi" },
+    date: "2025-04-02",
+    status: 1,
+    tnc_accepted: true,
+  },
+  {
+    id: 3,
+    workshop_type: { id: 1, name: "Python" },
+    coordinator: {
+      id: 12,
+      full_name: "Priya Nair",
+      email: "priya@example.com",
+      profile: { institute: "NIT Calicut", state: "IN-KL", phone: "9745632180" },
+    },
+    instructor: null,
+    date: "2025-05-10",
+    status: 0,
+    tnc_accepted: true,
+  },
+  {
+    id: 4,
+    workshop_type: { id: 3, name: "OpenFOAM" },
+    coordinator: {
+      id: 13,
+      full_name: "Aarav Patel",
+      email: "aarav@example.com",
+      profile: { institute: "IIT Gandhinagar", state: "IN-GJ", phone: "9654321780" },
+    },
+    instructor: { id: 22, full_name: "Dr. Kiran Desai" },
+    date: "2025-04-20",
+    status: 1,
+    tnc_accepted: true,
+  },
+  {
+    id: 5,
+    workshop_type: { id: 4, name: "DWSIM" },
+    coordinator: {
+      id: 14,
+      full_name: "Meera Reddy",
+      email: "meera@example.com",
+      profile: { institute: "Osmania University", state: "IN-TG", phone: "9532167890" },
+    },
+    instructor: { id: 23, full_name: "Prof. Venkat Rao" },
+    date: "2025-03-28",
+    status: 1,
+    tnc_accepted: true,
+  },
+  {
+    id: 6,
+    workshop_type: { id: 5, name: "eSim" },
+    coordinator: {
+      id: 15,
+      full_name: "Siddharth Kumar",
+      email: "sid@example.com",
+      profile: { institute: "IIT Kanpur", state: "IN-UP", phone: "9412345678" },
+    },
+    instructor: null,
+    date: "2025-06-05",
+    status: 0,
+    tnc_accepted: true,
+  },
+  {
+    id: 7,
+    workshop_type: { id: 1, name: "Python" },
+    coordinator: {
+      id: 16,
+      full_name: "Divya Singh",
+      email: "divya@example.com",
+      profile: { institute: "BHU Varanasi", state: "IN-UP", phone: "9876012345" },
+    },
+    instructor: { id: 24, full_name: "Dr. Amit Tiwari" },
+    date: "2025-04-12",
+    status: 1,
+    tnc_accepted: true,
+  },
+  {
+    id: 8,
+    workshop_type: { id: 6, name: "Osdag" },
+    coordinator: {
+      id: 17,
+      full_name: "Nikhil Rao",
+      email: "nikhil@example.com",
+      profile: { institute: "COEP Pune", state: "IN-MH", phone: "9823012345" },
+    },
+    instructor: { id: 25, full_name: "Prof. Suresh Patil" },
+    date: "2025-05-22",
+    status: 1,
+    tnc_accepted: true,
+  },
+];
+
+// ── Current logged-in user (Coordinator) ─────────────────────────────────────
+export const currentUser = {
+  id: 10,
+  username: "vighnesh_reddy",
+  full_name: "Vighnesh Reddy",
+  first_name: "Vighnesh",
+  last_name: "Reddy",
+  email: "vighnesh@example.com",
+  is_instructor: false,
+  profile: {
+    title: "Ms.",
+    institute: "VIT BHOPAL UNIVERSITY",
+    department: "computer engineering",
+    phone_number: "7989919165",
+    position: "coordinator",
+    location: "Bhopal",
+    state: "IN-MP",
+  },
+};
+
+// ── My Workshops (scoped to currentUser as coordinator) ──────────────────────
+export const myWorkshops = workshops.filter(
+  (w) => w.coordinator.id === currentUser.id
+);
+
+// ── Statistics aggregates ────────────────────────────────────────────────────
+export function getStatsByState(data) {
+  const map = {};
+  data.forEach((w) => {
+    const s = stateChoices.find((x) => x.code === w.coordinator.profile.state);
+    const label = s ? s.name : w.coordinator.profile.state;
+    map[label] = (map[label] || 0) + 1;
+  });
+  return { labels: Object.keys(map), counts: Object.values(map) };
+}
+
+export function getStatsByType(data) {
+  const map = {};
+  data.forEach((w) => {
+    const name = w.workshop_type.name;
+    map[name] = (map[name] || 0) + 1;
+  });
+  return { labels: Object.keys(map), counts: Object.values(map) };
+}
+
+// ── Department choices (matching Django model) ────────────────────────────────
+export const departmentChoices = [
+  { value: "computer engineering", label: "Computer Science" },
+  { value: "information technology", label: "Information Technology" },
+  { value: "civil engineering", label: "Civil Engineering" },
+  { value: "electrical engineering", label: "Electrical Engineering" },
+  { value: "mechanical engineering", label: "Mechanical Engineering" },
+  { value: "chemical engineering", label: "Chemical Engineering" },
+  { value: "electronics", label: "Electronics" },
+];
+
+export const titleChoices = [
+  { value: "Professor", label: "Prof." },
+  { value: "Doctor", label: "Dr." },
+  { value: "Mr", label: "Mr." },
+  { value: "Mrs", label: "Mrs." },
+  { value: "Miss", label: "Ms." },
+];
diff --git a/workshop_frontend/workshop_frontend/src/pages/Home.jsx b/workshop_frontend/workshop_frontend/src/pages/Home.jsx
new file mode 100644
index 00000000..13f36088
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/pages/Home.jsx
@@ -0,0 +1,107 @@
+import { Link } from "react-router-dom";
+import { ArrowRight, BarChart2, List, PlusCircle, CheckSquare } from "lucide-react";
+import { currentUser, workshops, workshopTypes, myWorkshops } from "../mockData";
+
+const cards = [
+  {
+    to: "/workshop-types",
+    icon: <List size={22} className="text-indigo-600" />,
+    bg: "bg-indigo-50",
+    title: "Workshop Types",
+    desc: `${workshopTypes.length} types available`,
+  },
+  {
+    to: "/propose",
+    icon: <PlusCircle size={22} className="text-green-600" />,
+    bg: "bg-green-50",
+    title: "Propose Workshop",
+    desc: "Submit a new proposal",
+  },
+  {
+    to: "/my-workshops",
+    icon: <CheckSquare size={22} className="text-amber-600" />,
+    bg: "bg-amber-50",
+    title: "My Workshops",
+    desc: `${myWorkshops.length} workshop(s) on record`,
+  },
+  {
+    to: "/statistics",
+    icon: <BarChart2 size={22} className="text-purple-600" />,
+    bg: "bg-purple-50",
+    title: "Statistics",
+    desc: `${workshops.filter((w) => w.status === 1).length} accepted workshops`,
+  },
+];
+
+export default function Home() {
+  return (
+    <div className="max-w-4xl mx-auto px-4 sm:px-6 py-10">
+      {/* Hero banner */}
+      <div className="bg-gradient-to-br from-indigo-600 via-indigo-700 to-indigo-800 rounded-3xl p-8 sm:p-10 text-white mb-8 fade-up">
+        <p className="text-indigo-300 text-xs font-bold uppercase tracking-widest mb-2">FOSSEE · IIT Bombay</p>
+        <h1 className="text-3xl sm:text-4xl font-extrabold leading-tight">
+          Welcome back,<br />{currentUser.first_name}!
+        </h1>
+        <p className="mt-3 text-indigo-200 text-sm sm:text-base max-w-md leading-relaxed">
+          Manage your workshops, track proposals, and explore what FOSSEE has to offer —
+          all in one place.
+        </p>
+        <div className="flex flex-wrap gap-3 mt-6">
+          <Link to="/propose"
+            className="inline-flex items-center gap-2 bg-white text-indigo-700 font-bold text-sm px-5 py-2.5 rounded-xl hover:bg-indigo-50 transition-colors">
+            <PlusCircle size={15} /> Propose Workshop
+          </Link>
+          <Link to="/workshop-types"
+            className="inline-flex items-center gap-2 border border-white/30 text-white font-semibold text-sm px-5 py-2.5 rounded-xl hover:bg-white/10 transition-colors">
+            Browse Types <ArrowRight size={14} />
+          </Link>
+        </div>
+      </div>
+
+      {/* Quick access cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {cards.map((c, i) => (
+          <Link
+            key={c.to} to={c.to}
+            className="card p-5 flex items-center gap-4 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 fade-up group"
+            style={{ animationDelay: `${i * 70}ms` }}
+          >
+            <div className={`w-11 h-11 rounded-xl ${c.bg} flex items-center justify-center flex-shrink-0`}>
+              {c.icon}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-bold text-slate-900 text-sm">{c.title}</p>
+              <p className="text-xs text-slate-500 mt-0.5">{c.desc}</p>
+            </div>
+            <ArrowRight size={16} className="text-slate-300 group-hover:text-slate-600 transition-colors flex-shrink-0" />
+          </Link>
+        ))}
+      </div>
+
+      {/* Recent workshops */}
+      {myWorkshops.length > 0 && (
+        <div className="mt-8">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-base font-bold text-slate-800">Recent Workshops</h2>
+            <Link to="/my-workshops" className="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
+              View all →
+            </Link>
+          </div>
+          <div className="card overflow-hidden">
+            {myWorkshops.slice(0, 3).map((w) => (
+              <div key={w.id} className="flex items-center justify-between px-5 py-3.5 border-b border-slate-100 last:border-0 hover:bg-slate-50 transition-colors">
+                <div>
+                  <p className="text-sm font-semibold text-slate-800">{w.workshop_type.name}</p>
+                  <p className="text-xs text-slate-400 mt-0.5">{w.date}</p>
+                </div>
+                {w.status === 1
+                  ? <span className="badge-success">Accepted</span>
+                  : <span className="badge-warning">Pending</span>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/pages/Login.jsx b/workshop_frontend/workshop_frontend/src/pages/Login.jsx
new file mode 100644
index 00000000..afe82141
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/pages/Login.jsx
@@ -0,0 +1,133 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Eye, EyeOff, LogIn, AlertCircle } from "lucide-react";
+
+export default function Login() {
+  const [form, setForm] = useState({ username: "", password: "" });
+  const [showPw, setShowPw] = useState(false);
+  const [errors, setErrors] = useState({});
+  const [serverError, setServerError] = useState("");
+  const navigate = useNavigate();
+
+  function validate() {
+    const e = {};
+    if (!form.username.trim()) e.username = "Username is required.";
+    if (!form.password)        e.password = "Password is required.";
+    return e;
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length) { setErrors(errs); return; }
+    // In real app: POST to Django /login/
+    // Demo: accept "demo" / "password"
+    if (form.username === "demo" && form.password === "password") {
+      navigate("/my-workshops");
+    } else {
+      setServerError("Invalid username or password. (Use demo / password)");
+    }
+  }
+
+  function field(name) {
+    return {
+      value: form[name],
+      onChange: (e) => {
+        setForm((p) => ({ ...p, [name]: e.target.value }));
+        setErrors((p) => ({ ...p, [name]: "" }));
+        setServerError("");
+      },
+    };
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4 bg-slate-50">
+      <div className="w-full max-w-sm fade-up">
+        {/* Brand */}
+        <div className="text-center mb-6">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-indigo-600 mb-3">
+            <LogIn size={22} className="text-white" />
+          </div>
+          <h1 className="text-2xl font-extrabold">Welcome back</h1>
+          <p className="text-sm text-slate-500 mt-1">Sign in to your FOSSEE account</p>
+        </div>
+
+        <div className="card p-6">
+          {serverError && (
+            <div className="flex items-start gap-2 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg px-3 py-2.5 mb-4">
+              <AlertCircle size={15} className="mt-0.5 flex-shrink-0" />
+              {serverError}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} noValidate>
+            {/* Username */}
+            <div className="mb-4">
+              <label className="label" htmlFor="username">Username</label>
+              <input
+                id="username" name="username" type="text"
+                autoComplete="username" placeholder="Enter your username"
+                className={`input ${errors.username ? "border-red-400 focus:ring-red-400" : ""}`}
+                aria-invalid={!!errors.username}
+                aria-describedby={errors.username ? "err-username" : undefined}
+                {...field("username")}
+              />
+              {errors.username && (
+                <p id="err-username" className="text-xs text-red-600 mt-1" role="alert">
+                  {errors.username}
+                </p>
+              )}
+            </div>
+
+            {/* Password */}
+            <div className="mb-5">
+              <label className="label" htmlFor="password">Password</label>
+              <div className="relative">
+                <input
+                  id="password" name="password"
+                  type={showPw ? "text" : "password"}
+                  autoComplete="current-password"
+                  placeholder="Enter your password"
+                  className={`input pr-10 ${errors.password ? "border-red-400 focus:ring-red-400" : ""}`}
+                  aria-invalid={!!errors.password}
+                  aria-describedby={errors.password ? "err-password" : undefined}
+                  {...field("password")}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPw((p) => !p)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700"
+                  aria-label={showPw ? "Hide password" : "Show password"}
+                >
+                  {showPw ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+              {errors.password && (
+                <p id="err-password" className="text-xs text-red-600 mt-1" role="alert">
+                  {errors.password}
+                </p>
+              )}
+            </div>
+
+            <button type="submit" className="btn-primary w-full justify-center py-2.5">
+              <LogIn size={16} /> Sign in
+            </button>
+          </form>
+
+          <div className="mt-4 pt-4 border-t border-slate-100 flex flex-col gap-2">
+            <Link to="/register" className="text-sm text-indigo-600 hover:text-indigo-700 font-medium">
+              New here? Create an account →
+            </Link>
+            <Link to="/forgot-password" className="text-sm text-slate-500 hover:text-slate-700">
+              Forgot your password?
+            </Link>
+          </div>
+        </div>
+
+        <p className="text-center text-xs text-slate-400 mt-4">
+          Demo credentials: <span className="font-mono">demo</span> / <span className="font-mono">password</span>
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/pages/MyWorkshops.jsx b/workshop_frontend/workshop_frontend/src/pages/MyWorkshops.jsx
new file mode 100644
index 00000000..5187f329
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/pages/MyWorkshops.jsx
@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { CheckCircle, Clock, Inbox, Calendar, User, ArrowRight } from "lucide-react";
+import { workshops, currentUser } from "../mockData";
+
+const myWorkshops = workshops.filter((w) => w.coordinator.id === currentUser.id);
+const accepted = myWorkshops.filter((w) => w.status === 1);
+const proposed = myWorkshops.filter((w) => w.status === 0);
+
+const TABS = [
+  { id: "accepted", label: "Accepted", count: accepted.length, icon: <CheckCircle size={15} /> },
+  { id: "proposed", label: "Proposed", count: proposed.length, icon: <Clock size={15} /> },
+];
+
+function EmptyState({ tab }) {
+  return (
+    <div className="text-center py-14 text-slate-400">
+      <Inbox size={40} className="mx-auto mb-3 opacity-30" />
+      <p className="font-semibold text-slate-500">No {tab} workshops yet.</p>
+      {tab === "proposed" && (
+        <Link to="/propose" className="btn-primary mt-4 inline-flex">
+          Propose a Workshop
+        </Link>
+      )}
+    </div>
+  );
+}
+
+function WorkshopRow({ w, showInstructor }) {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 border-b border-slate-100 last:border-0 hover:bg-slate-50 transition-colors">
+      <div className="flex-1 min-w-0">
+        <p className="font-semibold text-slate-900 truncate">{w.workshop_type.name}</p>
+        <div className="flex flex-wrap gap-x-4 gap-y-1 mt-1">
+          <span className="flex items-center gap-1 text-xs text-slate-500">
+            <Calendar size={12} /> {w.date}
+          </span>
+          {showInstructor && w.instructor && (
+            <span className="flex items-center gap-1 text-xs text-slate-500">
+              <User size={12} /> {w.instructor.full_name}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-3 flex-shrink-0">
+        {w.status === 1
+          ? <span className="badge-success"><CheckCircle size={11} className="mr-1" />Accepted</span>
+          : <span className="badge-warning"><Clock size={11} className="mr-1" />Pending</span>
+        }
+        <Link
+          to={`/workshop/${w.id}`}
+          className="text-indigo-600 hover:text-indigo-800 transition-colors"
+          aria-label="View workshop details"
+        >
+          <ArrowRight size={16} />
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default function MyWorkshops() {
+  const [tab, setTab] = useState("accepted");
+
+  if (!myWorkshops.length) {
+    return (
+      <div className="max-w-2xl mx-auto px-4 py-8">
+        <div className="bg-gradient-to-br from-indigo-600 to-indigo-700 rounded-2xl p-8 text-white fade-up">
+          <h1 className="text-2xl font-extrabold">Welcome, {currentUser.first_name}! 👋</h1>
+          <p className="mt-2 text-indigo-200 text-sm leading-relaxed">
+            Your workshop activity will appear here. Ready to get started?
+          </p>
+          <Link to="/propose" className="inline-flex items-center gap-2 bg-white text-indigo-700 font-bold text-sm px-4 py-2 rounded-lg mt-5 hover:bg-indigo-50 transition-colors">
+            Propose a Workshop <ArrowRight size={14} />
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const list = tab === "accepted" ? accepted : proposed;
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 sm:px-6 py-8">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6 pb-5 border-b border-slate-200">
+        <div>
+          <h1 className="text-2xl font-bold">My Workshops</h1>
+          <p className="text-sm text-slate-500 mt-0.5">Track your accepted and proposed workshops</p>
+        </div>
+        <Link to="/propose" className="btn-primary">+ Propose New</Link>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 border-b border-slate-200 mb-5" role="tablist">
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            role="tab"
+            aria-selected={tab === t.id}
+            onClick={() => setTab(t.id)}
+            className={`flex items-center gap-2 px-4 py-2.5 text-sm font-semibold border-b-2 transition-colors -mb-px ${
+              tab === t.id
+                ? "border-indigo-600 text-indigo-600"
+                : "border-transparent text-slate-500 hover:text-slate-800"
+            }`}
+          >
+            {t.icon}
+            {t.label}
+            <span className={`text-xs px-1.5 py-0.5 rounded-full font-bold ${
+              tab === t.id ? "bg-indigo-100 text-indigo-700" : "bg-slate-100 text-slate-500"
+            }`}>
+              {t.count}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="card overflow-hidden fade-up" role="tabpanel">
+        {list.length === 0
+          ? <EmptyState tab={tab} />
+          : list.map((w) => (
+              <WorkshopRow key={w.id} w={w} showInstructor={tab === "accepted"} />
+            ))
+        }
+      </div>
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/pages/Profile.jsx b/workshop_frontend/workshop_frontend/src/pages/Profile.jsx
new file mode 100644
index 00000000..8fb97074
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/pages/Profile.jsx
@@ -0,0 +1,160 @@
+import { useState } from "react";
+import { User, Mail, Phone, Building, BookOpen, MapPin, Pencil, Save, X } from "lucide-react";
+import { currentUser, departmentChoices, titleChoices, stateChoices, myWorkshops } from "../mockData";
+
+function ProfileField({ icon, label, value }) {
+  return (
+    <div className="flex items-start gap-3 py-3 border-b border-slate-100 last:border-0">
+      <span className="text-slate-400 mt-0.5 flex-shrink-0">{icon}</span>
+      <div className="flex-1 min-w-0">
+        <p className="text-xs font-bold text-slate-400 uppercase tracking-wide">{label}</p>
+        <p className="text-sm text-slate-800 mt-0.5 break-words">{value || "—"}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function Profile() {
+  const [editing, setEditing] = useState(false);
+  const [form, setForm] = useState({ ...currentUser.profile, ...currentUser });
+  const [saved, setSaved] = useState(false);
+
+  const dept = departmentChoices.find((d) => d.value === currentUser.profile.department);
+  const state = stateChoices.find((s) => s.code === currentUser.profile.state);
+
+  function handleSave(e) {
+    e.preventDefault();
+    setSaved(true);
+    setEditing(false);
+    setTimeout(() => setSaved(false), 2500);
+  }
+
+  function set(k) { return (e) => setForm((p) => ({ ...p, [k]: e.target.value })); }
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 sm:px-6 py-8">
+
+      {saved && (
+        <div className="mb-4 bg-green-50 border border-green-200 text-green-700 text-sm rounded-xl px-4 py-2.5 flex items-center gap-2 fade-up">
+          <Save size={14} /> Profile updated successfully.
+        </div>
+      )}
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6 pb-5 border-b border-slate-200">
+        <h1 className="text-2xl font-bold">My Profile</h1>
+        {!editing && (
+          <button onClick={() => setEditing(true)} className="btn-secondary">
+            <Pencil size={14} /> Edit Profile
+          </button>
+        )}
+      </div>
+
+      {!editing ? (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
+          {/* Profile card */}
+          <div className="lg:col-span-1">
+            <div className="card overflow-hidden fade-up">
+              <div className="bg-gradient-to-br from-indigo-600 to-indigo-700 px-5 py-6 flex flex-col items-center text-center">
+                <div className="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center text-white text-2xl font-extrabold mb-3">
+                  {currentUser.first_name[0]}
+                </div>
+                <p className="text-white font-bold text-base">{currentUser.full_name}</p>
+                <p className="text-indigo-200 text-xs mt-1 capitalize">{currentUser.profile.position}</p>
+              </div>
+              <div className="px-5 py-4">
+                <ProfileField icon={<Mail size={14} />} label="Email" value={currentUser.email} />
+                <ProfileField icon={<Phone size={14} />} label="Phone" value={currentUser.profile.phone_number} />
+                <ProfileField icon={<MapPin size={14} />} label="Location" value={currentUser.profile.location} />
+              </div>
+            </div>
+          </div>
+
+          {/* Details */}
+          <div className="lg:col-span-2 flex flex-col gap-5">
+            <div className="card p-5 fade-up">
+              <h2 className="text-sm font-bold text-slate-700 mb-3">Academic Details</h2>
+              <ProfileField icon={<Building size={14} />} label="Institute" value={currentUser.profile.institute} />
+              <ProfileField icon={<BookOpen size={14} />} label="Department" value={dept?.label} />
+              <ProfileField icon={<User size={14} />} label="State" value={state?.name} />
+            </div>
+
+            {/* Workshop history */}
+            <div className="card overflow-hidden fade-up">
+              <div className="px-5 py-4 border-b border-slate-100">
+                <h2 className="text-sm font-bold text-slate-700">Workshop History</h2>
+              </div>
+              {myWorkshops.length === 0 ? (
+                <p className="text-sm text-slate-400 text-center py-8">No workshops yet.</p>
+              ) : (
+                <div className="divide-y divide-slate-100">
+                  {myWorkshops.map((w) => (
+                    <div key={w.id} className="flex items-center justify-between px-5 py-3">
+                      <div>
+                        <p className="text-sm font-semibold text-slate-800">{w.workshop_type.name}</p>
+                        <p className="text-xs text-slate-400 mt-0.5">{w.date}</p>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {w.instructor
+                          ? <span className="text-xs text-slate-500">{w.instructor.full_name}</span>
+                          : null}
+                        {w.status === 1
+                          ? <span className="badge-success">Accepted</span>
+                          : <span className="badge-warning">Pending</span>}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      ) : (
+        // Edit form
+        <div className="card p-6 fade-up">
+          <form onSubmit={handleSave} className="flex flex-col gap-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="label" htmlFor="p-first">First Name</label>
+                <input id="p-first" className="input" value={form.first_name} onChange={set("first_name")} />
+              </div>
+              <div>
+                <label className="label" htmlFor="p-last">Last Name</label>
+                <input id="p-last" className="input" value={form.last_name} onChange={set("last_name")} />
+              </div>
+            </div>
+            <div>
+              <label className="label" htmlFor="p-phone">Phone Number</label>
+              <input id="p-phone" className="input" value={form.phone_number} onChange={set("phone_number")} />
+            </div>
+            <div>
+              <label className="label" htmlFor="p-institute">Institute</label>
+              <input id="p-institute" className="input" value={form.institute} onChange={set("institute")} />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="label" htmlFor="p-dept">Department</label>
+                <select id="p-dept" className="input" value={form.department} onChange={set("department")}>
+                  {departmentChoices.map((d) => <option key={d.value} value={d.value}>{d.label}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="label" htmlFor="p-loc">City / Location</label>
+                <input id="p-loc" className="input" value={form.location} onChange={set("location")} />
+              </div>
+            </div>
+            <div>
+              <label className="label" htmlFor="p-state">State</label>
+              <select id="p-state" className="input" value={form.state} onChange={set("state")}>
+                {stateChoices.map((s) => <option key={s.code} value={s.code}>{s.name}</option>)}
+              </select>
+            </div>
+            <div className="flex gap-3 pt-2 border-t border-slate-100">
+              <button type="submit" className="btn-primary"><Save size={14} /> Save Changes</button>
+              <button type="button" onClick={() => setEditing(false)} className="btn-secondary"><X size={14} /> Cancel</button>
+            </div>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/pages/ProposeWorkshop.jsx b/workshop_frontend/workshop_frontend/src/pages/ProposeWorkshop.jsx
new file mode 100644
index 00000000..a5090a16
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/pages/ProposeWorkshop.jsx
@@ -0,0 +1,180 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { CalendarDays, Info, Send, X, CheckCircle } from "lucide-react";
+import { workshopTypes } from "../mockData";
+
+function TncModal({ workshop, onClose }) {
+  if (!workshop) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 fade-up">
+        <div className="flex items-start justify-between mb-4">
+          <h2 className="text-base font-bold text-slate-900">Terms &amp; Conditions</h2>
+          <button onClick={onClose} className="text-slate-400 hover:text-slate-700 transition-colors" aria-label="Close">
+            <X size={18} />
+          </button>
+        </div>
+        <p className="text-sm text-slate-600 leading-relaxed">{workshop.terms_and_conditions}</p>
+        <button onClick={onClose} className="btn-primary w-full justify-center mt-5">
+          <CheckCircle size={15} /> I understand
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Calculate min date (today + 3 days, skip weekends)
+function getMinDate() {
+  const d = new Date();
+  d.setDate(d.getDate() + 3);
+  while (d.getDay() === 0 || d.getDay() === 6) d.setDate(d.getDate() + 1);
+  return d.toISOString().split("T")[0];
+}
+
+function getMaxDate() {
+  const d = new Date();
+  d.setFullYear(d.getFullYear() + 1);
+  return d.toISOString().split("T")[0];
+}
+
+export default function ProposeWorkshop() {
+  const navigate = useNavigate();
+  const [form, setForm] = useState({ workshop_type: "", date: "", tnc_accepted: false });
+  const [errors, setErrors] = useState({});
+  const [showTnc, setShowTnc] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  const selectedType = workshopTypes.find((w) => w.id === Number(form.workshop_type));
+
+  function validate() {
+    const e = {};
+    if (!form.workshop_type) e.workshop_type = "Please select a workshop type.";
+    if (!form.date) e.date = "Please select a date.";
+    else {
+      const d = new Date(form.date);
+      const day = d.getDay();
+      if (day === 0 || day === 6) e.date = "Weekends are not allowed.";
+    }
+    if (!form.tnc_accepted) e.tnc_accepted = "You must accept the terms and conditions.";
+    return e;
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length) { setErrors(errs); return; }
+    setSuccess(true);
+    setTimeout(() => navigate("/my-workshops"), 1800);
+  }
+
+  if (success)
+    return (
+      <div className="max-w-sm mx-auto px-4 py-20 text-center fade-up">
+        <CheckCircle size={48} className="mx-auto text-green-500 mb-4" />
+        <h2 className="text-xl font-bold text-slate-900">Workshop Proposed!</h2>
+        <p className="text-sm text-slate-500 mt-1">Redirecting to your workshops…</p>
+      </div>
+    );
+
+  return (
+    <div className="max-w-lg mx-auto px-4 sm:px-6 py-8">
+      <div className="text-center mb-6">
+        <div className="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-green-600 mb-3">
+          <CalendarDays size={22} className="text-white" />
+        </div>
+        <h1 className="text-2xl font-extrabold">Propose a Workshop</h1>
+        <p className="text-sm text-slate-500 mt-1">Submit your preferred date and workshop type</p>
+      </div>
+
+      <div className="bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 flex gap-2 text-sm text-blue-700 mb-5">
+        <Info size={15} className="flex-shrink-0 mt-0.5" />
+        Before proposing, review workshop details in{" "}
+        <a href="/workshop-types" className="font-semibold underline">Workshop Types</a>.
+      </div>
+
+      <div className="card p-6 fade-up">
+        <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-5">
+
+          {/* Workshop Type */}
+          <div>
+            <label className="label" htmlFor="workshop_type">
+              Workshop Type <span className="text-red-500">*</span>
+            </label>
+            <select
+              id="workshop_type" name="workshop_type"
+              value={form.workshop_type}
+              onChange={(e) => { setForm((p) => ({ ...p, workshop_type: e.target.value })); setErrors((p) => ({ ...p, workshop_type: "" })); }}
+              className={`input ${errors.workshop_type ? "border-red-400" : ""}`}
+            >
+              <option value="">— Select a workshop type —</option>
+              {workshopTypes.map((w) => (
+                <option key={w.id} value={w.id}>
+                  {w.name} ({w.duration} day{w.duration !== 1 ? "s" : ""})
+                </option>
+              ))}
+            </select>
+            {errors.workshop_type && <p className="text-xs text-red-600 mt-1">{errors.workshop_type}</p>}
+          </div>
+
+          {/* Selected type info */}
+          {selectedType && (
+            <div className="bg-slate-50 border border-slate-200 rounded-xl p-3 text-sm text-slate-600 fade-up">
+              <p className="font-semibold text-slate-800 mb-1">{selectedType.name}</p>
+              <p className="line-clamp-2">{selectedType.description}</p>
+            </div>
+          )}
+
+          {/* Date */}
+          <div>
+            <label className="label" htmlFor="date">
+              Preferred Date <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="date" name="date" type="date"
+              min={getMinDate()} max={getMaxDate()}
+              value={form.date}
+              onChange={(e) => { setForm((p) => ({ ...p, date: e.target.value })); setErrors((p) => ({ ...p, date: "" })); }}
+              className={`input ${errors.date ? "border-red-400" : ""}`}
+            />
+            <p className="text-xs text-slate-400 mt-1">Weekdays only, minimum 3 days from today.</p>
+            {errors.date && <p className="text-xs text-red-600 mt-1">{errors.date}</p>}
+          </div>
+
+          {/* T&C */}
+          <div>
+            <div className="flex items-start gap-2.5">
+              <input
+                id="tnc_accepted" name="tnc_accepted" type="checkbox"
+                checked={form.tnc_accepted}
+                onChange={(e) => { setForm((p) => ({ ...p, tnc_accepted: e.target.checked })); setErrors((p) => ({ ...p, tnc_accepted: "" })); }}
+                className="mt-0.5 w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
+              />
+              <label htmlFor="tnc_accepted" className="text-sm text-slate-600">
+                I accept the{" "}
+                <button
+                  type="button"
+                  onClick={() => { if (!form.workshop_type) { setErrors((p) => ({ ...p, workshop_type: "Select a workshop type first." })); return; } setShowTnc(true); }}
+                  className="text-indigo-600 font-semibold underline hover:text-indigo-800"
+                >
+                  terms and conditions
+                </button>
+              </label>
+            </div>
+            {errors.tnc_accepted && <p className="text-xs text-red-600 mt-1">{errors.tnc_accepted}</p>}
+          </div>
+
+          {/* Actions */}
+          <div className="flex flex-wrap gap-3 pt-2 border-t border-slate-100">
+            <button type="submit" className="btn-success">
+              <Send size={15} /> Submit Proposal
+            </button>
+            <a href="/workshop-types" className="btn-secondary">Cancel</a>
+          </div>
+        </form>
+      </div>
+
+      {showTnc && <TncModal workshop={selectedType} onClose={() => setShowTnc(false)} />}
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/pages/Register.jsx b/workshop_frontend/workshop_frontend/src/pages/Register.jsx
new file mode 100644
index 00000000..8944c6e8
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/pages/Register.jsx
@@ -0,0 +1,210 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Eye, EyeOff, UserPlus, AlertCircle } from "lucide-react";
+import { departmentChoices, titleChoices, stateChoices } from "../mockData";
+
+function PasswordStrength({ password }) {
+  let score = 0;
+  if (password.length >= 8) score++;
+  if (/[A-Z]/.test(password)) score++;
+  if (/[0-9]/.test(password)) score++;
+  if (/[^A-Za-z0-9]/.test(password)) score++;
+
+  if (!password) return null;
+  const labels = ["", "Weak", "Fair", "Good", "Strong"];
+  const colors = ["", "bg-red-400", "bg-amber-400", "bg-blue-500", "bg-green-500"];
+  const textColors = ["", "text-red-600", "text-amber-600", "text-blue-600", "text-green-600"];
+
+  return (
+    <div className="mt-1.5">
+      <div className="flex gap-1">
+        {[1, 2, 3, 4].map((i) => (
+          <div
+            key={i}
+            className={`h-1.5 flex-1 rounded-full transition-all duration-300 ${
+              i <= score ? colors[score] : "bg-slate-200"
+            }`}
+          />
+        ))}
+      </div>
+      <p className={`text-xs font-semibold mt-1 ${textColors[score]}`}>
+        {labels[score]}
+      </p>
+    </div>
+  );
+}
+
+export default function Register() {
+  const navigate = useNavigate();
+  const [form, setForm] = useState({
+    title: "", username: "", first_name: "", last_name: "",
+    email: "", phone_number: "", institute: "",
+    department: "", position: "coordinator",
+    location: "", state: "IN-MH",
+    password1: "", password2: "",
+  });
+  const [showPw, setShowPw] = useState({ p1: false, p2: false });
+  const [errors, setErrors] = useState({});
+
+  function set(name) {
+    return (e) => {
+      setForm((p) => ({ ...p, [name]: e.target.value }));
+      setErrors((p) => ({ ...p, [name]: "" }));
+    };
+  }
+
+  function validate() {
+    const e = {};
+    if (!form.username.trim()) e.username = "Required.";
+    if (!form.first_name.trim()) e.first_name = "Required.";
+    if (!form.last_name.trim()) e.last_name = "Required.";
+    if (!form.email.trim() || !/\S+@\S+\.\S+/.test(form.email)) e.email = "Valid email required.";
+    if (!form.phone_number || form.phone_number.length !== 10) e.phone_number = "10-digit number required.";
+    if (!form.institute.trim()) e.institute = "Required.";
+    if (!form.department) e.department = "Required.";
+    if (!form.password1 || form.password1.length < 8) e.password1 = "Minimum 8 characters.";
+    if (form.password1 !== form.password2) e.password2 = "Passwords do not match.";
+    return e;
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length) { setErrors(errs); return; }
+    // In real app: POST to Django /register/
+    navigate("/my-workshops");
+  }
+
+  function Field({ label, name, type = "text", required, children, hint }) {
+    return (
+      <div>
+        <label className="label" htmlFor={name}>
+          {label}{required && <span className="text-red-500 ml-0.5">*</span>}
+        </label>
+        {children || (
+          <input
+            id={name} name={name} type={type}
+            value={form[name]}
+            onChange={set(name)}
+            className={`input ${errors[name] ? "border-red-400 focus:ring-red-400" : ""}`}
+            aria-invalid={!!errors[name]}
+          />
+        )}
+        {hint && <p className="text-xs text-slate-400 mt-1">{hint}</p>}
+        {errors[name] && <p className="text-xs text-red-600 mt-1" role="alert">{errors[name]}</p>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-xl mx-auto px-4 sm:px-6 py-8">
+      <div className="text-center mb-6">
+        <div className="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-indigo-600 mb-3">
+          <UserPlus size={22} className="text-white" />
+        </div>
+        <h1 className="text-2xl font-extrabold">Coordinator Registration</h1>
+        <p className="text-sm text-slate-500 mt-1">Create your FOSSEE account to propose workshops</p>
+      </div>
+
+      <div className="card p-6 fade-up">
+        {Object.keys(errors).length > 0 && (
+          <div className="flex items-start gap-2 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg px-3 py-2.5 mb-4">
+            <AlertCircle size={15} className="mt-0.5 flex-shrink-0" />
+            Please fix the errors below before submitting.
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-4">
+
+          {/* Title + Username */}
+          <div className="grid grid-cols-3 gap-3">
+            <Field label="Title" name="title">
+              <select id="title" name="title" value={form.title} onChange={set("title")} className="input">
+                <option value="">—</option>
+                {titleChoices.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
+              </select>
+            </Field>
+            <div className="col-span-2">
+              <Field label="Username" name="username" required hint="Letters, digits and @/./+/-/_ only." />
+            </div>
+          </div>
+
+          {/* First + Last name */}
+          <div className="grid grid-cols-2 gap-3">
+            <Field label="First Name" name="first_name" required />
+            <Field label="Last Name" name="last_name" required />
+          </div>
+
+          {/* Email */}
+          <Field label="Email Address" name="email" type="email" required />
+
+          {/* Phone */}
+          <Field label="Phone Number" name="phone_number" required hint="10 digits, no spaces." />
+
+          {/* Institute */}
+          <Field label="Institute / College" name="institute" required />
+
+          {/* Department */}
+          <Field label="Department" name="department" required>
+            <select id="department" name="department" value={form.department} onChange={set("department")}
+              className={`input ${errors.department ? "border-red-400" : ""}`}>
+              <option value="">Select department</option>
+              {departmentChoices.map((d) => <option key={d.value} value={d.value}>{d.label}</option>)}
+            </select>
+          </Field>
+
+          {/* Location + State */}
+          <div className="grid grid-cols-2 gap-3">
+            <Field label="City / Location" name="location" />
+            <Field label="State" name="state">
+              <select id="state" name="state" value={form.state} onChange={set("state")} className="input">
+                {stateChoices.map((s) => <option key={s.code} value={s.code}>{s.name}</option>)}
+              </select>
+            </Field>
+          </div>
+
+          {/* Password */}
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="label" htmlFor="password1">Password <span className="text-red-500">*</span></label>
+              <div className="relative">
+                <input id="password1" name="password1" type={showPw.p1 ? "text" : "password"}
+                  value={form.password1} onChange={set("password1")}
+                  className={`input pr-9 ${errors.password1 ? "border-red-400" : ""}`} />
+                <button type="button" onClick={() => setShowPw((p) => ({ ...p, p1: !p.p1 }))}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700"
+                  aria-label="Toggle password visibility">
+                  {showPw.p1 ? <EyeOff size={15} /> : <Eye size={15} />}
+                </button>
+              </div>
+              <PasswordStrength password={form.password1} />
+              {errors.password1 && <p className="text-xs text-red-600 mt-1">{errors.password1}</p>}
+            </div>
+            <div>
+              <label className="label" htmlFor="password2">Confirm <span className="text-red-500">*</span></label>
+              <div className="relative">
+                <input id="password2" name="password2" type={showPw.p2 ? "text" : "password"}
+                  value={form.password2} onChange={set("password2")}
+                  className={`input pr-9 ${errors.password2 ? "border-red-400" : ""}`} />
+                <button type="button" onClick={() => setShowPw((p) => ({ ...p, p2: !p.p2 }))}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700"
+                  aria-label="Toggle password visibility">
+                  {showPw.p2 ? <EyeOff size={15} /> : <Eye size={15} />}
+                </button>
+              </div>
+              {errors.password2 && <p className="text-xs text-red-600 mt-1">{errors.password2}</p>}
+            </div>
+          </div>
+
+          {/* Submit */}
+          <div className="flex flex-wrap items-center gap-3 pt-2 border-t border-slate-100 mt-1">
+            <button type="submit" className="btn-primary">
+              <UserPlus size={15} /> Create Account
+            </button>
+            <Link to="/login" className="btn-secondary">Already registered? Sign in</Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/pages/Statistics.jsx b/workshop_frontend/workshop_frontend/src/pages/Statistics.jsx
new file mode 100644
index 00000000..a90f1069
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/pages/Statistics.jsx
@@ -0,0 +1,243 @@
+import { useState, useMemo } from "react";
+import {
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+} from "recharts";
+import { Filter, Download, Eye, Calendar, Building, User, BarChart2, SlidersHorizontal, X } from "lucide-react";
+import { workshops, workshopTypes, stateChoices, getStatsByState, getStatsByType } from "../mockData";
+
+function StatCard({ label, value, sub }) {
+  return (
+    <div className="card p-4">
+      <p className="text-xs font-bold text-slate-400 uppercase tracking-wide">{label}</p>
+      <p className="text-2xl font-extrabold text-slate-900 mt-1">{value}</p>
+      {sub && <p className="text-xs text-slate-500 mt-0.5">{sub}</p>}
+    </div>
+  );
+}
+
+function MiniChart({ title, data }) {
+  return (
+    <div className="card p-4">
+      <h3 className="text-sm font-bold text-slate-700 mb-3">{title}</h3>
+      <ResponsiveContainer width="100%" height={180}>
+        <BarChart data={data} margin={{ top: 0, right: 0, left: -20, bottom: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
+          <XAxis dataKey="label" tick={{ fontSize: 11 }} />
+          <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
+          <Tooltip
+            contentStyle={{ borderRadius: 10, border: "1px solid #e2e8f0", fontSize: 12 }}
+          />
+          <Bar dataKey="count" fill="#4f46e5" radius={[4, 4, 0, 0]} />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export default function Statistics() {
+  const [filters, setFilters] = useState({ state: "", workshop_type: "", status: "1" });
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const PER_PAGE = 10;
+
+  const filtered = useMemo(() => {
+    return workshops.filter((w) => {
+      if (filters.state && w.coordinator.profile.state !== filters.state) return false;
+      if (filters.workshop_type && w.workshop_type.id !== Number(filters.workshop_type)) return false;
+      if (filters.status !== "" && String(w.status) !== filters.status) return false;
+      return true;
+    });
+  }, [filters]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
+  const paginated = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);
+
+  const stateStats = useMemo(() => {
+    const s = getStatsByState(filtered);
+    return s.labels.map((l, i) => ({ label: l, count: s.counts[i] }));
+  }, [filtered]);
+
+  const typeStats = useMemo(() => {
+    const s = getStatsByType(filtered);
+    return s.labels.map((l, i) => ({ label: l, count: s.counts[i] }));
+  }, [filtered]);
+
+  const accepted = workshops.filter((w) => w.status === 1).length;
+  const pending  = workshops.filter((w) => w.status === 0).length;
+
+  function set(k) {
+    return (e) => { setFilters((p) => ({ ...p, [k]: e.target.value })); setPage(1); };
+  }
+
+  function clearFilters() { setFilters({ state: "", workshop_type: "", status: "1" }); setPage(1); }
+
+  const FilterPanel = () => (
+    <form onSubmit={(e) => e.preventDefault()} className="flex flex-col gap-4">
+      <div className="flex items-center justify-between mb-1">
+        <span className="font-bold text-slate-800 flex items-center gap-2">
+          <Filter size={14} /> Filters
+        </span>
+        <button type="button" onClick={clearFilters} className="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
+          Clear all
+        </button>
+      </div>
+      <div>
+        <label className="label" htmlFor="f-state">State</label>
+        <select id="f-state" className="input text-sm" value={filters.state} onChange={set("state")}>
+          <option value="">All States</option>
+          {stateChoices.map((s) => <option key={s.code} value={s.code}>{s.name}</option>)}
+        </select>
+      </div>
+      <div>
+        <label className="label" htmlFor="f-type">Workshop</label>
+        <select id="f-type" className="input text-sm" value={filters.workshop_type} onChange={set("workshop_type")}>
+          <option value="">All Types</option>
+          {workshopTypes.map((w) => <option key={w.id} value={w.id}>{w.name}</option>)}
+        </select>
+      </div>
+      <div>
+        <label className="label" htmlFor="f-status">Status</label>
+        <select id="f-status" className="input text-sm" value={filters.status} onChange={set("status")}>
+          <option value="">All</option>
+          <option value="1">Accepted</option>
+          <option value="0">Pending</option>
+        </select>
+      </div>
+      <button type="button" className="btn-primary justify-center mt-1">
+        <Eye size={14} /> Apply
+      </button>
+      <button type="button" className="btn-secondary justify-center">
+        <Download size={14} /> Export CSV
+      </button>
+    </form>
+  );
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6 pb-5 border-b border-slate-200">
+        <div>
+          <h1 className="text-2xl font-bold">Workshop Statistics</h1>
+          <p className="text-sm text-slate-500 mt-0.5">Public overview of all FOSSEE workshops</p>
+        </div>
+        <button className="btn-secondary lg:hidden" onClick={() => setSidebarOpen(true)}>
+          <SlidersHorizontal size={15} /> Filters
+        </button>
+      </div>
+
+      {/* Summary cards */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
+        <StatCard label="Total" value={workshops.length} sub="all workshops" />
+        <StatCard label="Accepted" value={accepted} sub="confirmed" />
+        <StatCard label="Pending" value={pending} sub="awaiting instructor" />
+        <StatCard label="Filtered" value={filtered.length} sub="current view" />
+      </div>
+
+      {/* Charts row */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        <MiniChart title="Workshops by State" data={stateStats} />
+        <MiniChart title="Workshops by Type" data={typeStats} />
+      </div>
+
+      {/* Layout: sidebar + table */}
+      <div className="flex gap-5 items-start">
+        {/* Desktop sidebar */}
+        <aside className="hidden lg:block w-56 flex-shrink-0 card p-4 sticky top-16">
+          <FilterPanel />
+        </aside>
+
+        {/* Table */}
+        <div className="flex-1 min-w-0">
+          <div className="card overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm" aria-label="Workshop statistics">
+                <thead>
+                  <tr className="border-b border-slate-100">
+                    {["#", "Coordinator", "Institute", "Instructor", "Workshop", "Date", "Status"].map((h) => (
+                      <th key={h} className="text-left px-4 py-3 text-xs font-bold text-slate-400 uppercase tracking-wide bg-slate-50">
+                        {h}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100">
+                  {paginated.length === 0 ? (
+                    <tr>
+                      <td colSpan={7} className="text-center py-12 text-slate-400">
+                        <BarChart2 size={32} className="mx-auto mb-2 opacity-30" />
+                        No workshops match the selected filters.
+                      </td>
+                    </tr>
+                  ) : paginated.map((w, i) => (
+                    <tr key={w.id} className="hover:bg-slate-50 transition-colors">
+                      <td className="px-4 py-3 text-slate-400 text-xs">
+                        {(page - 1) * PER_PAGE + i + 1}
+                      </td>
+                      <td className="px-4 py-3 font-semibold text-slate-800">
+                        {w.coordinator.full_name}
+                      </td>
+                      <td className="px-4 py-3 text-slate-600 text-xs">
+                        <span className="flex items-center gap-1">
+                          <Building size={11} /> {w.coordinator.profile.institute}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 text-slate-600">
+                        {w.instructor
+                          ? <span className="flex items-center gap-1 text-xs"><User size={11} />{w.instructor.full_name}</span>
+                          : <span className="badge-warning text-xs">Unassigned</span>}
+                      </td>
+                      <td className="px-4 py-3">
+                        <span className="badge-info">{w.workshop_type.name}</span>
+                      </td>
+                      <td className="px-4 py-3 text-xs text-slate-500 whitespace-nowrap">
+                        <span className="flex items-center gap-1">
+                          <Calendar size={11} /> {w.date}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3">
+                        {w.status === 1
+                          ? <span className="badge-success">Accepted</span>
+                          : <span className="badge-warning">Pending</span>}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="px-4 py-3 border-t border-slate-100 flex items-center justify-between">
+                <span className="text-xs text-slate-400">
+                  Showing {(page - 1) * PER_PAGE + 1}–{Math.min(page * PER_PAGE, filtered.length)} of {filtered.length}
+                </span>
+                <div className="flex gap-2">
+                  <button onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}
+                    className="btn-secondary text-xs px-3 py-1.5 disabled:opacity-40">← Prev</button>
+                  <button onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page === totalPages}
+                    className="btn-secondary text-xs px-3 py-1.5 disabled:opacity-40">Next →</button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile filter drawer */}
+      {sidebarOpen && (
+        <div className="fixed inset-0 z-50 flex">
+          <div className="absolute inset-0 bg-black/40" onClick={() => setSidebarOpen(false)} />
+          <div className="relative ml-auto w-72 bg-white h-full p-5 overflow-y-auto shadow-2xl">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="font-bold">Filters</h2>
+              <button onClick={() => setSidebarOpen(false)} aria-label="Close filters">
+                <X size={18} />
+              </button>
+            </div>
+            <FilterPanel />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/pages/WorkshopTypeDetail.jsx b/workshop_frontend/workshop_frontend/src/pages/WorkshopTypeDetail.jsx
new file mode 100644
index 00000000..92ce10d8
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/pages/WorkshopTypeDetail.jsx
@@ -0,0 +1,75 @@
+import { useParams, Link } from "react-router-dom";
+import { ArrowLeft, Clock, FileText, Info, PlusCircle } from "lucide-react";
+import { workshopTypes, currentUser } from "../mockData";
+
+export default function WorkshopTypeDetail() {
+  const { id } = useParams();
+  const wt = workshopTypes.find((w) => w.id === Number(id));
+
+  if (!wt)
+    return (
+      <div className="max-w-2xl mx-auto px-4 py-16 text-center text-slate-500">
+        <p className="text-lg font-semibold">Workshop type not found.</p>
+        <Link to="/workshop-types" className="btn-secondary mt-4">
+          ← Back to list
+        </Link>
+      </div>
+    );
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 sm:px-6 py-8">
+      <Link to="/workshop-types" className="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-900 mb-5 transition-colors">
+        <ArrowLeft size={14} /> Back to Workshop Types
+      </Link>
+
+      <div className="card overflow-hidden fade-up">
+        {/* Header strip */}
+        <div className="bg-gradient-to-r from-indigo-600 to-indigo-700 px-6 py-5">
+          <span className="text-indigo-200 text-xs font-bold uppercase tracking-wide">Workshop Type</span>
+          <h1 className="text-2xl font-extrabold text-white mt-1">{wt.name}</h1>
+        </div>
+
+        {/* Fields */}
+        <div className="divide-y divide-slate-100">
+          <DetailRow icon={<Clock size={15} />} label="Duration">
+            <span className="badge-info">{wt.duration} day{wt.duration !== 1 ? "s" : ""}</span>
+          </DetailRow>
+
+          <DetailRow icon={<Info size={15} />} label="Description">
+            <p className="text-sm text-slate-600 leading-relaxed">{wt.description}</p>
+          </DetailRow>
+
+          <DetailRow icon={<FileText size={15} />} label="Terms &amp; Conditions">
+            <p className="text-sm text-slate-600 leading-relaxed">{wt.terms_and_conditions}</p>
+          </DetailRow>
+        </div>
+
+        {/* Actions */}
+        <div className="px-6 py-4 bg-slate-50 flex flex-wrap gap-3">
+          {!currentUser.is_instructor && (
+            <Link to="/propose" className="btn-success">
+              <PlusCircle size={15} /> Propose This Workshop
+            </Link>
+          )}
+          {currentUser.is_instructor && (
+            <Link to={`/workshop-types/${wt.id}/edit`} className="btn-primary">
+              Edit Workshop Type
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DetailRow({ icon, label, children }) {
+  return (
+    <div className="px-6 py-4 flex gap-4">
+      <div className="flex items-start gap-2 text-slate-400 pt-0.5 min-w-[140px]">
+        {icon}
+        <span className="text-xs font-bold uppercase tracking-wide text-slate-400">{label}</span>
+      </div>
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/src/pages/WorkshopTypeList.jsx b/workshop_frontend/workshop_frontend/src/pages/WorkshopTypeList.jsx
new file mode 100644
index 00000000..4a32e674
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/src/pages/WorkshopTypeList.jsx
@@ -0,0 +1,113 @@
+import { useState, useMemo } from "react";
+import { Link } from "react-router-dom";
+import { Search, Clock, ArrowRight, Plus } from "lucide-react";
+import { workshopTypes } from "../mockData";
+import { currentUser } from "../mockData";
+
+export default function WorkshopTypeList() {
+  const [query, setQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const PER_PAGE = 6;
+
+  const filtered = useMemo(
+    () =>
+      workshopTypes.filter((w) =>
+        w.name.toLowerCase().includes(query.toLowerCase())
+      ),
+    [query]
+  );
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
+  const paginated = filtered.slice((page - 1) * PER_PAGE, page * PER_PAGE);
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6 pb-5 border-b border-slate-200">
+        <div>
+          <h1 className="text-2xl font-bold">Workshop Types</h1>
+          <p className="text-sm text-slate-500 mt-0.5">
+            Browse all available FOSSEE workshop programmes
+          </p>
+        </div>
+        {currentUser.is_instructor && (
+          <Link to="/add-workshop-type" className="btn-primary">
+            <Plus size={16} /> Add Workshop Type
+          </Link>
+        )}
+      </div>
+
+      {/* Search */}
+      <div className="relative max-w-sm mb-6">
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
+        <input
+          type="search"
+          value={query}
+          onChange={(e) => { setQuery(e.target.value); setPage(1); }}
+          placeholder="Search workshop types…"
+          aria-label="Filter workshop types"
+          className="input pl-9"
+        />
+      </div>
+
+      {/* Grid */}
+      {paginated.length === 0 ? (
+        <div className="text-center py-20 text-slate-400">
+          <Search size={40} className="mx-auto mb-3 opacity-40" />
+          <p className="font-medium">No workshops match your search.</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {paginated.map((w, i) => (
+            <div
+              key={w.id}
+              className="card p-5 flex flex-col gap-3 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 fade-up"
+              style={{ animationDelay: `${i * 60}ms` }}
+            >
+              <div>
+                <span className="text-xs font-bold uppercase tracking-wide text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full">
+                  FOSSEE
+                </span>
+                <h3 className="text-base font-bold mt-2 text-slate-900">{w.name}</h3>
+                <p className="text-sm text-slate-500 mt-1 line-clamp-2">{w.description}</p>
+              </div>
+              <div className="flex items-center gap-1.5 text-xs text-slate-400 mt-auto">
+                <Clock size={13} />
+                {w.duration} day{w.duration !== 1 ? "s" : ""}
+              </div>
+              <Link
+                to={`/workshop-types/${w.id}`}
+                className="btn-secondary w-full justify-center mt-1"
+              >
+                View Details <ArrowRight size={14} />
+              </Link>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex justify-center gap-2 mt-8">
+          <button
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+            disabled={page === 1}
+            className="btn-secondary px-3 py-1.5 text-xs disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            ← Previous
+          </button>
+          <span className="flex items-center px-3 text-sm text-slate-500">
+            Page {page} of {totalPages}
+          </span>
+          <button
+            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+            disabled={page === totalPages}
+            className="btn-secondary px-3 py-1.5 text-xs disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            Next →
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/workshop_frontend/workshop_frontend/tailwind.config.js b/workshop_frontend/workshop_frontend/tailwind.config.js
new file mode 100644
index 00000000..a97569e2
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/tailwind.config.js
@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,jsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["'Plus Jakarta Sans'", "system-ui", "sans-serif"],
+      },
+      colors: {
+        primary: { 50:"#eef2ff", 100:"#e0e7ff", 500:"#4f46e5", 600:"#4338ca", 700:"#3730a3" },
+        accent: "#f97316",
+      },
+      boxShadow: { card: "0 4px 16px rgba(0,0,0,0.07)" },
+    },
+  },
+  plugins: [],
+};
diff --git a/workshop_frontend/workshop_frontend/vite.config.js b/workshop_frontend/workshop_frontend/vite.config.js
new file mode 100644
index 00000000..8b0f57b9
--- /dev/null
+++ b/workshop_frontend/workshop_frontend/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})