From 16d4f816152322923bec3e8343b631d88fa15239 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 31 Jan 2026 18:49:48 +0200
Subject: [PATCH 1/5] feat: Enhance `development/SKILL.md` with E2E testing and
 navigation guidelines, and new principles for testing, documentation, and UI
 component usage.

---
 .agent/development/SKILL.md | 41 ++++++++++++++++++++++++++++++++++---
 .agent/e2e/SKILL.md         | 35 -------------------------------
 2 files changed, 38 insertions(+), 38 deletions(-)
 delete mode 100644 .agent/e2e/SKILL.md

diff --git a/.agent/development/SKILL.md b/.agent/development/SKILL.md
index 7e172b2..335c046 100644
--- a/.agent/development/SKILL.md
+++ b/.agent/development/SKILL.md
@@ -7,7 +7,16 @@ description: Core development guidelines and documentation for the Subturtle/Cod
 
 ## General Principles
 
-- **Modularity**: Prioritize modularity in all code changes. Organize logic into distinct modules (Server-side) or reusable components (Frontend).
+- **Modularity**: Prioritize modularity and separation of concerns. Organize logic into distinct, independent modules (Server-side) or reusable components (Frontend). Each module should have a single responsibility and a clear interface.
+- **Testing**: 
+    - Write unit tests for core logic and services.
+    - Implement integration tests for API endpoints and complex component interactions.
+    - Ensure tests are easy to run and provide clear feedback.
+- **Human-friendly Documentation**:
+    - Write code that is self-documenting through clear naming conventions.
+    - Use JSDoc for functions and classes to document parameters, return values, and behavior.
+    - Add context-rich inline comments for complex logic, explaining the "why" rather than just the "what".
+    - Maintain up-to-date documentation within the `.agent/development` directory.
 - **ClickUp Integration**: 
     - Task management primarily relies on ClickUp.
     - Always reference the ClickUp task ID in commit messages. Format: `feat: #taskid message`.
@@ -34,8 +43,34 @@ Always refer to the official documentation for package-specific implementations:
 ### UI Components (lib-vue-components)
 - **Primary Docs**: [lib-vue-components.md](./lib-vue-components.md)
 - **Key Patterns**:
-    - Import components directly from `@codebridger/lib-vue-components` as needed (e.g., `import { Button } from '@codebridger/lib-vue-components'`).
-    - Follow the design system guidelines for consistent aesthetics.
+    - **Extensive Usage**: Prioritize and extensively use components from `@codebridger/lib-vue-components`.
+    - **Custom Components**: Only create custom components if no equivalent exists within the library.
+    - **Direct Imports**: Import components directly from `@codebridger/lib-vue-components` as needed (e.g., `import { Button } from '@codebridger/lib-vue-components'`).
+    - **Design Consistency**: Strictly follow the design system guidelines for consistent aesthetics.
+
+## E2E Testing and Navigation
+
+### Prerequisites
+1. **Server**: Ensure the server is running (usually on port 8080).
+2. **Frontend**: Ensure the frontend is running (usually on port 3000).
+
+### Authentication Flow
+The application uses hash-based routing. To authenticate via token:
+1. **Initial Navigation**: Open the website with the expected path (e.g., `http://localhost:3000/#/settings`).
+2. **Manual Login (if needed)**: If you face the login page, use browser tools to store the token in the browser's local storage with the key `token` (e.g., `localStorage.setItem('token', 'YOUR_TOKEN')`).
+3. **Re-navigate**: Enter the expected path again or reload the page to access the authenticated route.
+
+### Navigation Structure
+- Home/Overview: `/#/`
+- Board (Learning System): `/#/board`
+- Statistic: `/#/statistic`
+- Sessions: `/#/sessions`
+- Settings: `/#/settings`
+
+### Troubleshooting
+- **Blank Page**: Check browser console for authentication errors.
+- **Login Redirect**: If redirected to `/#/auth/login`, the token might be invalid, expired, or not correctly set in local storage.
+- **Missing Hash**: Always ensure the URL contains `/#/` after the origin due to `hashMode: true`.
 
 
 ---
diff --git a/.agent/e2e/SKILL.md b/.agent/e2e/SKILL.md
deleted file mode 100644
index b636dd5..0000000
--- a/.agent/e2e/SKILL.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-name: e2e
-description: End-to-end navigation and testing guide for Subturtle Dashboard
----
-
-This skill provides specific instructions for navigating and testing the Subturtle Dashboard application using browser tools.
-
-## Prerequisites
-1. **Server**: Ensure the server is running (usually on port 8080).
-2. **Frontend**: Ensure the frontend is running (usually on port 3000).
-
-## Authentication Flow
-The application uses hash-based routing (`hashMode: true` in Nuxt config). To authenticate via token, you MUST include the `#` character in the URL.
-
-**Correct URL Template:**
-`http://localhost:3000/#/auth/login_with_token?token={YOUR_TOKEN}`
-
-### Steps for Browser Agents:
-1. **Navigate**: Use the `open_browser_url` tool with the correct hash-based login URL.
-2. **Wait for Redirect**: The `login_with_token` page is a redirection page. Wait at least 3 seconds for the `onMounted` hook to process the token and redirect to the dashboard.
-3. **Verify Dashboard**: After redirection, verify you are on `/#/` or another authenticated route. Use `capture_browser_screenshot` to confirm the UI has loaded.
-4. **Inspect UI**: Once logged in, use the navigation menu or direct hash-links to find the specific page.
-
-## Navigation Structure
-- Home/Overview: `/#/`
-- Board (Learning System): `/#/board`
-- Statistic: `/#/statistic`
-- Sessions: `/#/sessions`
-- Settings: `/#/settings`
-
-## Troubleshooting
-- **Blank Page**: Check browser console for authentication errors.
-- **Login Redirect**: If redirected to `/#/auth/login`, the token might be invalid or expired.
-- **Missing Hash**: Always ensure the URL contains `/#/` after the origin.
-- **Login Issue**: If you are not logged in, try to store the token in the browser's local storage `token={YOUR_TOKEN}` and then navigate to the dashboard.
\ No newline at end of file

From 09972611634b826c33bd8c37a2fe4d486188ea48 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 31 Jan 2026 19:07:41 +0200
Subject: [PATCH 2/5] refactor: reorganize agent development files into
 categorized skill directories.

---
 .agent/development/SKILL.md                   |  78 ----------
 .agent/skills/backend/SKILL.md                |  28 ++++
 .../backend}/modular-rest_server.md           |   0
 .agent/skills/frontend/SKILL.md               |  32 +++++
 .../frontend}/modular-rest_client.md          |   0
 .agent/skills/frontend_design/SKILL.md        | 135 ++++++++++++++++++
 .../frontend_design}/lib-vue-components.md    |   0
 7 files changed, 195 insertions(+), 78 deletions(-)
 delete mode 100644 .agent/development/SKILL.md
 create mode 100644 .agent/skills/backend/SKILL.md
 rename .agent/{development => skills/backend}/modular-rest_server.md (100%)
 create mode 100644 .agent/skills/frontend/SKILL.md
 rename .agent/{development => skills/frontend}/modular-rest_client.md (100%)
 create mode 100644 .agent/skills/frontend_design/SKILL.md
 rename .agent/{development => skills/frontend_design}/lib-vue-components.md (100%)

diff --git a/.agent/development/SKILL.md b/.agent/development/SKILL.md
deleted file mode 100644
index 335c046..0000000
--- a/.agent/development/SKILL.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-name: CodeBridger Development Skill
-description: Core development guidelines and documentation for the Subturtle/CodeBridger ecosystem. Triggered when working on dashboard-app or server.
----
-
-# Development Guidelines
-
-## General Principles
-
-- **Modularity**: Prioritize modularity and separation of concerns. Organize logic into distinct, independent modules (Server-side) or reusable components (Frontend). Each module should have a single responsibility and a clear interface.
-- **Testing**: 
-    - Write unit tests for core logic and services.
-    - Implement integration tests for API endpoints and complex component interactions.
-    - Ensure tests are easy to run and provide clear feedback.
-- **Human-friendly Documentation**:
-    - Write code that is self-documenting through clear naming conventions.
-    - Use JSDoc for functions and classes to document parameters, return values, and behavior.
-    - Add context-rich inline comments for complex logic, explaining the "why" rather than just the "what".
-    - Maintain up-to-date documentation within the `.agent/development` directory.
-- **ClickUp Integration**: 
-    - Task management primarily relies on ClickUp.
-    - Always reference the ClickUp task ID in commit messages. Format: `feat: #taskid message`.
-- **Communication**: 
-    - Favor answering questions and providing explanations over direct code modifications unless explicitly requested.
-    - Ensure all explanations are clear and provide necessary context.
-
-## Framework Documentation
-
-Always refer to the official documentation for package-specific implementations:
-
-### Server-Side (@modular-rest/server)
-- **Primary Docs**: [modular-rest_server.md](./modular-rest_server.md)
-- **Key Patterns**:
-    - Use `defineCollection` in `db.ts` for database models.
-    - Use `defineFunction` in `functions.ts` for API logic.
-    - Avoid manual router creation unless necessary (`router.ts`).
-
-### Frontend-Side (@modular-rest/client)
-- **Primary Docs**: [modular-rest_client.md](./modular-rest_client.md)
-- **Key Patterns**:
-    - Reference the JS client for consuming services and calling server functions.
-
-### UI Components (lib-vue-components)
-- **Primary Docs**: [lib-vue-components.md](./lib-vue-components.md)
-- **Key Patterns**:
-    - **Extensive Usage**: Prioritize and extensively use components from `@codebridger/lib-vue-components`.
-    - **Custom Components**: Only create custom components if no equivalent exists within the library.
-    - **Direct Imports**: Import components directly from `@codebridger/lib-vue-components` as needed (e.g., `import { Button } from '@codebridger/lib-vue-components'`).
-    - **Design Consistency**: Strictly follow the design system guidelines for consistent aesthetics.
-
-## E2E Testing and Navigation
-
-### Prerequisites
-1. **Server**: Ensure the server is running (usually on port 8080).
-2. **Frontend**: Ensure the frontend is running (usually on port 3000).
-
-### Authentication Flow
-The application uses hash-based routing. To authenticate via token:
-1. **Initial Navigation**: Open the website with the expected path (e.g., `http://localhost:3000/#/settings`).
-2. **Manual Login (if needed)**: If you face the login page, use browser tools to store the token in the browser's local storage with the key `token` (e.g., `localStorage.setItem('token', 'YOUR_TOKEN')`).
-3. **Re-navigate**: Enter the expected path again or reload the page to access the authenticated route.
-
-### Navigation Structure
-- Home/Overview: `/#/`
-- Board (Learning System): `/#/board`
-- Statistic: `/#/statistic`
-- Sessions: `/#/sessions`
-- Settings: `/#/settings`
-
-### Troubleshooting
-- **Blank Page**: Check browser console for authentication errors.
-- **Login Redirect**: If redirected to `/#/auth/login`, the token might be invalid, expired, or not correctly set in local storage.
-- **Missing Hash**: Always ensure the URL contains `/#/` after the origin due to `hashMode: true`.
-
-
----
-
-You must read the specific documentation files listed above before proposing or implementing any technical changes related to these packages.
\ No newline at end of file
diff --git a/.agent/skills/backend/SKILL.md b/.agent/skills/backend/SKILL.md
new file mode 100644
index 0000000..193f733
--- /dev/null
+++ b/.agent/skills/backend/SKILL.md
@@ -0,0 +1,28 @@
+---
+name: Backend Development
+description: Guidelines for Server-side development using Modular Rest, Database schemas, and Business Logic.
+---
+
+# Backend Development Skill
+
+## 1. Core Principles
+- **Modularity**: Organize logic into distinct, independent modules. Each module should have a single responsibility.
+- **Testing**: Write unit tests for core logic and services.
+- **Documentation**: Use JSDoc for functions to document parameters and return values.
+- **Workflow**: Always reference the ClickUp task ID in commit messages (e.g., `feat: #taskid message`).
+
+## 2. Technology Stack
+- **Framework**: Modular Rest Server (@modular-rest/server)
+- **Database**: MongoDB (via `defineCollection`)
+
+## 3. Documentation Reference
+**You MUST read the following file for API details:**
+- [Modular Rest Server Docs](./modular-rest_server.md)
+
+## 4. Key Patterns
+- **Database Models**: Use `defineCollection` in `db.ts` files within modules.
+- **API Functions**: Use `defineFunction` in `functions.ts` files.
+- **Routing**: Avoid manual router creation; let the framework handle it.
+
+## 5. Directory Structure
+Code should be written in `/Users/navid-shad/Projects/CodeBridger/learn-by-subtitle/dashboard-app/server`.
diff --git a/.agent/development/modular-rest_server.md b/.agent/skills/backend/modular-rest_server.md
similarity index 100%
rename from .agent/development/modular-rest_server.md
rename to .agent/skills/backend/modular-rest_server.md
diff --git a/.agent/skills/frontend/SKILL.md b/.agent/skills/frontend/SKILL.md
new file mode 100644
index 0000000..3824523
--- /dev/null
+++ b/.agent/skills/frontend/SKILL.md
@@ -0,0 +1,32 @@
+---
+name: Frontend Logic
+description: Guidelines for Client-side logic, State Management (Pinia), API Integration, and App Navigation.
+---
+
+# Frontend Logic Skill
+
+## 1. Core Principles
+- **State Management**: Use Pinia for global state.
+- **API Integration**: Use `@modular-rest/client` to call server functions.
+- **Testing**: Implement integration tests for complex component interactions.
+- **Workflow**: Always reference the ClickUp task ID in commit messages (e.g., `feat: #taskid message`).
+
+## 2. Documentation Reference
+**You MUST read the following file for API Client details:**
+- [Modular Rest Client Docs](./modular-rest_client.md)
+
+## 3. Navigation & Auth Flow
+The application uses hash-based routing (`/#/`).
+
+### Common Routes
+- Home: `/#/`
+- Board: `/#/board`
+- Settings: `/#/settings`
+
+### Authentication
+- Token is stored in `localStorage` key `token`.
+- If redirected to login, verify token presence.
+
+## 4. Key Patterns
+- **Services**: Import `functionProvider` from `@modular-rest/client` to execute backend functions.
+- **Composables**: Use Vue composables for reusable logic.
diff --git a/.agent/development/modular-rest_client.md b/.agent/skills/frontend/modular-rest_client.md
similarity index 100%
rename from .agent/development/modular-rest_client.md
rename to .agent/skills/frontend/modular-rest_client.md
diff --git a/.agent/skills/frontend_design/SKILL.md b/.agent/skills/frontend_design/SKILL.md
new file mode 100644
index 0000000..94f8b6f
--- /dev/null
+++ b/.agent/skills/frontend_design/SKILL.md
@@ -0,0 +1,135 @@
+---
+name: Frontend Design System
+description: Comprehensive guide for creating premium, high-fidelity UI layouts using the project's Vue component library and Tailwind CSS.
+---
+
+# Frontend Design System
+
+This skill provides the standards and patterns for building user interfaces in the dashboard application. The goal is to create a **premium, dynamic, and highly polished** user experience that "wows" the user.
+
+## 1. Design Philosophy
+
+- **High-End Aesthetics**: We do not build "MVP-looking" apps. We build refined, polished interfaces.
+- **Glassmorphism & Depth**: Utilize layers, blurs (`backdrop-blur-xl`), and subtle transparencies (`bg-white/40`) to create depth.
+- **Vibrant Colors**: Use the project's `primary` and `secondary` palette, but often via gradients or low-opacity tints (`bg-primary/10`) rather than solid blocks of harsh color.
+- **Dynamic Motion**: Nothing should feel static. Smooth transitions (`duration-500`, `duration-700`), micro-interactions on hover, and entrance animations are required.
+
+## 2. Component Usage
+
+All standard UI elements must come from the internal component library.
+
+**Reference Documentation:**
+- [UI Component Library (lib-vue-components)](./lib-vue-components.md) - Contains full list of available components and their props.
+
+```typescript
+// Import path
+import { Card, Button, Icon } from '@codebridger/lib-vue-components/elements.ts';
+import { Modal } from '@codebridger/lib-vue-components/complex.ts';
+```
+
+### Key Components
+- **Card**: The building block for content.
+- **Button**: Use for actions.
+- **Icon**: Wrapper for Iconify icons. PREFERRED SET: `iconify solar--*-bold-duotone` or `*-bold`.
+
+## 3. Layout Patterns
+
+### Main Page Shell
+Pages normally live within a `DashboardShell` (via `default` layout). Content should be centered with max-width.
+
+```vue
+<template>
+    <div class="relative min-h-screen">
+		<!-- Decorative Background Elements -->
+        <div
+            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+        <div
+            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+
+        <!-- Standard Container -->
+        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
+            
+            <!-- Standard Header Block -->
+            <div class="mb-14 flex flex-col md:flex-row justify-between gap-6">
+                <div class="flex flex-col gap-3">
+                    <!-- Overline Label -->
+                    <div class="flex items-center gap-2">
+                        <div class="h-2 w-2 rounded-full bg-primary animate-pulse"></div>
+                        <span class="text-[10px] font-black uppercase tracking-[0.2em] text-primary/60">
+                            Section Label
+                        </span>
+                    </div>
+                    
+                    <!-- Main Title - often with gradient -->
+                    <h1 class="text-5xl font-black text-gray-900 dark:text-white tracking-tight leading-none bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400">
+                        Page Title
+                    </h1>
+                    
+                    <!-- Subtitle -->
+                    <p class="text-lg text-gray-500 dark:text-gray-400 font-medium max-w-md">
+                        Descriptive text goes here.
+                    </p>
+                </div>
+                
+                <!-- Optional Right-side Actions/Status -->
+                <div class="hidden md:flex flex-col items-end gap-2">...</div>
+            </div>
+
+            <!-- Content Grid -->
+            <div class="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+```
+
+### Card Styling
+Cards should rarely be just plain rectangles.
+
+**Premium Card Recipe:**
+- **Rounding**: `rounded-[2.5rem]` or `rounded-3xl` (generous curves).
+- **Background**: `bg-white dark:bg-gray-800`.
+- **Shadow**: Light idle shadow `shadow-[0_4px_20px_rgba(0,0,0,0.03)]` -> Deep hover shadow `hover:shadow-[0_40px_80px_rgba(var(--primary-rgb),0.15)]`.
+- **Interaction**: `group hover:-translate-y-3 transition-all duration-700`.
+- **Decorations**: Use absolute positioned gradients or icons in the background of cards to add texture.
+
+## 4. Typography Standards
+
+- **Titles (H1-H2)**: `font-black`, `tracking-tight`.
+- **Body**: `font-medium` (avoid thin weights for body text to maintain legibility and premium feel).
+- **Labels/Meta**: `text-[10px]` or `text-xs`, `font-bold`, `uppercase`, `tracking-widest` (typographic spacing is key for the premium look).
+- **Colors**:
+  - Primary text: `text-gray-900` / `dark:text-white`
+  - Secondary text: `text-gray-500` / `dark:text-gray-400`
+  - Accent text: `text-primary`
+
+## 5. Visual Effects & Assets
+
+### Gradients
+Use gradients to create "glows".
+- *Example*: `bg-gradient-to-br from-primary via-primary-dark to-secondary`
+
+### Glassmorphism
+- Use `backdrop-blur-md` or `backdrop-blur-xl`.
+- Combine with `bg-white/10` or `bg-white/70`.
+- Add `border border-white/20` for the "glass edge" look.
+
+### Background Elements
+Add "blobs" behind the main content to avoid empty whitespace looking boring.
+```html
+<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none"></div>
+```
+
+## 6. Development Checklist
+
+When creating a new page or component:
+1. [ ] Did I use `Card` and `Button` from the library?
+2. [ ] Are the borders rounded enough (`rounded-2xl+`)?
+3. [ ] Is there an entrance animation (e.g., `animate-fade-in-up`)?
+4. [ ] Are interactable elements responsive to hover (scale, shadow, lift)?
+5. [ ] Is Dark Mode supported (`dark:` variants)?
+6. [ ] Did I use the "Solar" icon set (`iconify solar--...`)?
+7. [ ] Is the typography hierarchy clear (Big titles, tiny uppercase labels)?
diff --git a/.agent/development/lib-vue-components.md b/.agent/skills/frontend_design/lib-vue-components.md
similarity index 100%
rename from .agent/development/lib-vue-components.md
rename to .agent/skills/frontend_design/lib-vue-components.md

From d5aff848fafdd790fdf06c4bf3809fdaf71009b9 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sun, 1 Feb 2026 15:33:52 +0200
Subject: [PATCH 3/5] refactor: #86ewevg3y Redesign bundle list and detail
 pages with a new layout, decorative background elements, and improved empty
 states.

---
 frontend/pages/bundles/[id].vue  | 305 +++++++++++++++++--------------
 frontend/pages/bundles/index.vue | 139 +++++++++-----
 2 files changed, 258 insertions(+), 186 deletions(-)

diff --git a/frontend/pages/bundles/[id].vue b/frontend/pages/bundles/[id].vue
index a232351..ecadf2f 100644
--- a/frontend/pages/bundles/[id].vue
+++ b/frontend/pages/bundles/[id].vue
@@ -1,161 +1,186 @@
 <template>
-    <div class="p-4">
-        <BundleDetailCard v-if="bundleStore.bundleDetail" :bundle-detail="bundleStore.bundleDetail" />
+    <div class="relative min-h-screen">
+        <!-- Decorative Background Elements -->
+        <div
+            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+        <div
+            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+
+        <!-- Standard Container -->
+        <div class="container relative mx-auto px-6 py-12 max-w-7xl">
+            <!-- Back Button -->
+            <div class="mb-8">
+                <Button to="/#/bundles" variant="text" iconName="IconArrowLeft" icon-pos="left"
+                    class="!px-0 text-gray-500 hover:text-gray-900 dark:hover:text-white">
+                    {{ t('common.back', 'Back to Bundles') }}
+                </Button>
+            </div>
 
-        <!-- Practice Features -->
-        <section class="my-4 flex flex-wrap items-start justify-between">
-            <section class="flex flex-1 flex-wrap gap-2">
-                <StartLiveSessionFormModal v-model="isLiveSessionModalOpen" @start="handleStartLiveSession" />
-                <Button :to="`#/practice/flashcards-${id}`" iconName="IconOpenBook" :label="t('flashcard-tool.label')" />
+            <!-- Bundle Info Card -->
+            <div class="mb-10">
+                <BundleDetailCard v-if="bundleStore.bundleDetail" :bundle-detail="bundleStore.bundleDetail" />
+            </div>
 
-                <!-- <Button disabled iconName="IconListCheck" :label="t('match-tool.label')" /> -->
+            <!-- Practice Features Toolbar -->
+            <section
+                class="mb-12 rounded-2xl border border-white/20 bg-white/40 p-4 shadow-sm backdrop-blur-md dark:bg-gray-800/40">
+                <div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+                    <!-- Left: Practice Tools -->
+                    <div class="flex w-full flex-col gap-4 md:w-auto md:flex-row md:items-center">
+                        <h3 class="text-xs font-bold uppercase tracking-widest text-gray-500">Practice Tools:</h3>
+                        <div class="flex flex-wrap gap-3">
+                            <StartLiveSessionFormModal v-model="isLiveSessionModalOpen"
+                                @start="handleStartLiveSession" />
+                            <Button :to="`#/practice/flashcards-${id}`" variant="soft" iconName="IconOpenBook"
+                                :label="t('flashcard-tool.label')" />
+                            <!-- <Button disabled iconName="IconListCheck" :label="t('match-tool.label')" /> -->
+                        </div>
+                    </div>
+
+                    <!-- Right: Add Content -->
+                    <div class="flex w-full flex-col items-end justify-end md:w-auto md:flex-row">
+                        <!-- Freemium: Combined Limitation + Add Phrase in Beautiful Gradient Wrapper -->
+                        <div v-if="profileStore.isFreemium" class="w-full md:w-auto">
+                            <FreemiumLimitationModal :modal-title="t('freemium.limitation.title')"
+                                :main-message="t('freemium.limitation.no_free_spots_left')"
+                                :sub-message="t('freemium.limitation.upgrade_to_pro_message')"
+                                :primary-button-label="t('freemium.limitation.go_pro')"
+                                :secondary-button-label="t('freemium.limitation.continue_with_limits')"
+                                auto-redirect-on-upgrade>
+                                <template #trigger="{ toggleModal }">
+                                    <FreemiumLimitCard type="phrase" @action="handleFreemiumAddPhrase"
+                                        @upgrade-needed="toggleModal(true)" />
+                                </template>
+                            </FreemiumLimitationModal>
+                        </div>
+
+                        <!-- Premium: Simple Add Phrase Button -->
+                        <div v-else class="w-full md:w-auto">
+                            <Button color="primary" size="md" @click="bundleStore.addEmptyTemporarilyPhrase()"
+                                iconName="IconPlus" label="Add New Phrase"
+                                class="w-full shadow-lg shadow-primary/20 hover:shadow-primary/40 md:w-auto" />
+                        </div>
+                    </div>
+                </div>
             </section>
 
-            <section class="flex flex-1 flex-wrap items-start justify-end gap-2">
-                <!-- Freemium: Combined Limitation + Add Phrase in Beautiful Gradient Wrapper -->
-                <div v-if="profileStore.isFreemium">
-                    <FreemiumLimitationModal
-                        :modal-title="t('freemium.limitation.title')"
-                        :main-message="t('freemium.limitation.no_free_spots_left')"
-                        :sub-message="t('freemium.limitation.upgrade_to_pro_message')"
-                        :primary-button-label="t('freemium.limitation.go_pro')"
-                        :secondary-button-label="t('freemium.limitation.continue_with_limits')"
-                        auto-redirect-on-upgrade
-                    >
-                        <template #trigger="{ toggleModal }">
-                            <FreemiumLimitCard type="phrase" @action="handleFreemiumAddPhrase" @upgrade-needed="toggleModal(true)" />
-                        </template>
-                    </FreemiumLimitationModal>
+            <!-- Phrase List Section -->
+            <section>
+                <div class="mb-6 flex items-center gap-3">
+                    <div class="h-1.5 w-1.5 rounded-full bg-secondary"></div>
+                    <h2
+                        class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400">
+                        Phrases in this Bundle
+                    </h2>
                 </div>
 
-                <!-- Premium: Simple Add Phrase Button -->
-                <div v-else class="flex items-start">
-                    <Button
-                        color="primary"
-                        size="md"
-                        @click="bundleStore.addEmptyTemporarilyPhrase()"
-                        iconName="IconPlus"
-                        label="Add Phrase"
-                        class="min-w-[140px]"
-                    />
-                </div>
-            </section>
-        </section>
-
-        <!-- Phrase List -->
-        <section class="mt-8">
-            <!-- Empty State -->
-            <div v-if="!isPhraseListLoading && !bundleStore.phrases.length && !bundleStore.tempPhrases.length">
-                <div class="py-12 text-center">
-                    <img
-                        class="mx-auto h-48 w-auto dark:hidden"
-                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3.svg"
-                        alt="No phrases available"
-                    />
-                    <img
-                        class="mx-auto hidden h-48 w-auto dark:block"
-                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3-dark.svg"
-                        alt="No phrases available"
-                    />
-                    <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-gray-100">No Phrases Available</h3>
-                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
-                        Looks like we couldn't find any phrases in this bundle. Try to add some phrases first.
-                    </p>
+                <!-- Empty State -->
+                <div v-if="!isPhraseListLoading && !bundleStore.phrases.length && !bundleStore.tempPhrases.length">
+                    <div
+                        class="rounded-3xl border border-dashed border-gray-200 bg-gray-50/50 py-16 text-center dark:border-gray-700 dark:bg-gray-800/20">
+                        <div
+                            class="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+                            <div class="text-4xl">📭</div>
+                        </div>
+                        <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">No Phrases Yet</h3>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto">
+                            This bundle is currently empty. Start adding phrases to build your collection!
+                        </p>
+                    </div>
                 </div>
-            </div>
 
-            <!-- Phrases List -->
-            <div v-else class="space-y-4">
-                <TransitionGroup name="list">
-                    <template v-for="tempPhrase in bundleStore.tempPhrases" :key="tempPhrase.id">
-                        <BundlePhraseCard :newPhrase="tempPhrase" />
-                    </template>
-
-                    <template v-for="phrase in bundleStore.phrases" :key="phrase._id">
-                        <BundlePhraseCard v-if="phrase" :phrase="phrase" :number="bundleStore.getPhraseNumber(phrase._id)" />
-                    </template>
-                </TransitionGroup>
-
-                <!-- Pagination -->
-                <div class="mt-6">
-                    <Pagination
-                        v-if="bundleStore.phrasePagination"
-                        v-model="bundleStore.phrasePagination.page"
-                        :totalPages="bundleStore.phrasePagination.pages"
-                        @change-page="fetchPhraseList($event)"
-                    />
+                <!-- Phrases List -->
+                <div v-else class="space-y-4">
+                    <TransitionGroup name="list">
+                        <template v-for="tempPhrase in bundleStore.tempPhrases" :key="tempPhrase.id">
+                            <BundlePhraseCard :newPhrase="tempPhrase" />
+                        </template>
+
+                        <template v-for="phrase in bundleStore.phrases" :key="phrase._id">
+                            <BundlePhraseCard v-if="phrase" :phrase="phrase"
+                                :number="bundleStore.getPhraseNumber(phrase._id)" />
+                        </template>
+                    </TransitionGroup>
+
+                    <!-- Pagination -->
+                    <div class="mt-10 flex justify-center">
+                        <Pagination v-if="bundleStore.phrasePagination" v-model="bundleStore.phrasePagination.page"
+                            :totalPages="bundleStore.phrasePagination.pages" @change-page="fetchPhraseList($event)" />
+                    </div>
                 </div>
-            </div>
-        </section>
+            </section>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-    import { Button } from '@codebridger/lib-vue-components/elements.ts';
-    import { Pagination } from '@codebridger/lib-vue-components/complex.ts';
-    import { useBundleStore } from '@/stores/bundle';
-    import StartLiveSessionFormModal from '~/components/bundle/StartLiveSessionFormModal.vue';
-    import type { LivePracticeSessionSetupType } from '~/types/live-session.type';
-    import { useProfileStore } from '~/stores/profile';
-    import FreemiumLimitCard from '~/components/freemium_alerts/FreemiumLimitCard.vue';
-    import FreemiumLimitationModal from '~/components/freemium_alerts/LimitationModal.vue';
-
-    const { t } = useI18n();
-    const router = useRouter();
-    const profileStore = useProfileStore();
-
-    definePageMeta({
-        layout: 'default',
-        title: () => t('bundle.detail'),
-        // @ts-ignore
-        middleware: ['auth'],
-    });
+import { Button } from '@codebridger/lib-vue-components/elements.ts';
+import { Pagination } from '@codebridger/lib-vue-components/complex.ts';
+import { useBundleStore } from '@/stores/bundle';
+import StartLiveSessionFormModal from '~/components/bundle/StartLiveSessionFormModal.vue';
+import type { LivePracticeSessionSetupType } from '~/types/live-session.type';
+import { useProfileStore } from '~/stores/profile';
+import FreemiumLimitCard from '~/components/freemium_alerts/FreemiumLimitCard.vue';
+import FreemiumLimitationModal from '~/components/freemium_alerts/LimitationModal.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const profileStore = useProfileStore();
+
+definePageMeta({
+    layout: 'default',
+    title: () => t('bundle.detail'),
+    // @ts-ignore
+    middleware: ['auth'],
+});
+
+const bundleStore = useBundleStore();
+const route = useRoute();
+const id = ref(route.params.id?.toString() || '');
+const isBundleDetailLoading = ref(false);
+const isPhraseListLoading = ref(false);
+const isLiveSessionModalOpen = ref(false);
+
+onMounted(() => {
+    if (id.value) {
+        isBundleDetailLoading.value = true;
+        bundleStore
+            .fetchBundleDetail(id.value)
+            .then(() => {
+                // useRoute().meta.title = bundleStore.bundleDetail?.title;
+            })
+            .finally(() => {
+                isBundleDetailLoading.value = false;
+                fetchPhraseList(1);
+            });
+    }
+});
 
-    const bundleStore = useBundleStore();
-    const route = useRoute();
-    const id = ref(route.params.id?.toString() || '');
-    const isBundleDetailLoading = ref(false);
-    const isPhraseListLoading = ref(false);
-    const isLiveSessionModalOpen = ref(false);
-
-    onMounted(() => {
-        if (id.value) {
-            isBundleDetailLoading.value = true;
-            bundleStore
-                .fetchBundleDetail(id.value)
-                .then(() => {
-                    // useRoute().meta.title = bundleStore.bundleDetail?.title;
-                })
-                .finally(() => {
-                    isBundleDetailLoading.value = false;
-                    fetchPhraseList(1);
-                });
-        }
-    });
+onBeforeRouteLeave(() => {
+    bundleStore.clear();
+});
 
-    onBeforeRouteLeave(() => {
-        bundleStore.clear();
-    });
+function fetchPhraseList(page: number = 1) {
+    isPhraseListLoading.value = true;
 
-    function fetchPhraseList(page: number = 1) {
-        isPhraseListLoading.value = true;
+    bundleStore.fetchPhrases(page).finally(() => {
+        isPhraseListLoading.value = false;
+    });
+}
 
-        bundleStore.fetchPhrases(page).finally(() => {
-            isPhraseListLoading.value = false;
-        });
-    }
+function handleStartLiveSession(sessionData: LivePracticeSessionSetupType) {
+    // convert sessionData to base64
+    const sessionDataBase64 = btoa(JSON.stringify(sessionData));
 
-    function handleStartLiveSession(sessionData: LivePracticeSessionSetupType) {
-        // convert sessionData to base64
-        const sessionDataBase64 = btoa(JSON.stringify(sessionData));
+    // Uerl should not be include # at the beginning
+    const url = `/practice/live-session-${id.value}?sessionData=${sessionDataBase64}`;
+    router.push(url);
+}
 
-        // Uerl should not be include # at the beginning
-        const url = `/practice/live-session-${id.value}?sessionData=${sessionDataBase64}`;
-        router.push(url);
-    }
-
-    function handleFreemiumAddPhrase() {
-        // User is not at limit yet, so add the phrase
-        bundleStore.addEmptyTemporarilyPhrase();
-    }
+function handleFreemiumAddPhrase() {
+    // User is not at limit yet, so add the phrase
+    bundleStore.addEmptyTemporarilyPhrase();
+}
 </script>
diff --git a/frontend/pages/bundles/index.vue b/frontend/pages/bundles/index.vue
index 08061c8..4a1779e 100644
--- a/frontend/pages/bundles/index.vue
+++ b/frontend/pages/bundles/index.vue
@@ -1,57 +1,104 @@
 <template>
-    <div class="p-4">
-        <!-- Left section -->
-        <div v-if="!isEmptyState" class="mb-4 flex items-center justify-between gap-4">
-            <div>
-                <Input
-                    iconName="IconSearch"
-                    v-model="filter"
-                    :placeholder="t('bundle.filter_bundles')"
-                    disabled
-                    :error="!!error"
-                    :error-message="error || ''"
-                />
-            </div>
+    <div class="relative min-h-screen">
+        <!-- Decorative Background Elements -->
+        <div
+            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none"
+        ></div>
+        <div
+            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none"
+        ></div>
+
+        <!-- Standard Container -->
+        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
+            <!-- Standard Header Block -->
+            <div class="mb-14 flex flex-col md:flex-row justify-between gap-6">
+                <div class="flex flex-col gap-3">
+                    <!-- Overline Label -->
+                    <div class="flex items-center gap-2">
+                        <div class="h-2 w-2 rounded-full bg-primary animate-pulse"></div>
+                        <span class="text-[10px] font-black uppercase tracking-[0.2em] text-primary/60">
+                            {{ t('bundle.collection_label', 'LIBRARY') }}
+                        </span>
+                    </div>
+
+                    <!-- Main Title - often with gradient -->
+                    <h1
+                        class="text-5xl font-black text-gray-900 dark:text-white tracking-tight leading-none bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400"
+                    >
+                        {{ t('bundle.list_title', 'Your bundles') }}
+                    </h1>
 
-            <!-- Right section -->
-            <div>
-                <BundleAddNew />
+                    <!-- Subtitle -->
+                    <p class="text-lg text-gray-500 dark:text-gray-400 font-medium max-w-md">
+                        {{ t('bundle.list_subtitle', 'Manage and practice your language collections.') }}
+                    </p>
+                </div>
+
+                <!-- Right-side Actions/Status (Filter + Add) -->
+                <div class="flex flex-col items-end gap-4 md:flex-row md:items-end">
+                    <div class="w-full md:w-64">
+                        <Input
+                            iconName="IconSearch"
+                            v-model="filter"
+                            :placeholder="t('bundle.filter_bundles')"
+                            :error="!!error"
+                            :error-message="error || ''"
+                            class="bg-white/50 backdrop-blur-sm"
+                        />
+                    </div>
+                    <div>
+                        <BundleAddNew />
+                    </div>
+                </div>
             </div>
-        </div>
 
-        <!-- Empty State -->
-        <div v-if="isEmptyState" class="flex flex-1 flex-col items-center justify-center">
-            <div class="flex max-w-xl flex-col items-center justify-center py-12 text-center">
-                <img
-                    class="mx-auto h-48 w-auto dark:hidden"
-                    src="/assets/images/illustrations/placeholders/flat/placeholder-search-3.svg"
-                    alt="No bundles available"
-                />
-                <img
-                    class="mx-auto hidden h-48 w-auto dark:block"
-                    src="/assets/images/illustrations/placeholders/flat/placeholder-search-3-dark.svg"
-                    alt="No bundles available"
-                />
-                <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ t('bundle.no-bundles') }}</h3>
-                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
-                    {{ t('bundle.no-bundles-description') }}
-                </p>
-                <div class="mt-6">
-                    <BundleAddNew />
+            <!-- Empty State -->
+            <div v-if="isEmptyState" class="flex flex-1 flex-col items-center justify-center py-20">
+                <div
+                    class="relative flex max-w-xl flex-col items-center justify-center rounded-3xl border border-white/20 bg-white/40 p-12 text-center shadow-xl backdrop-blur-md dark:bg-gray-800/40"
+                >
+                    <!-- Decorative blob for empty state -->
+                    <div
+                        class="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 blur-2xl"
+                    ></div>
+
+                    <img
+                        class="mx-auto h-48 w-auto dark:hidden"
+                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3.svg"
+                        alt="No bundles available"
+                    />
+                    <img
+                        class="mx-auto hidden h-48 w-auto dark:block"
+                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3-dark.svg"
+                        alt="No bundles available"
+                    />
+                    <h3 class="mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+                        {{ t('bundle.no-bundles') }}
+                    </h3>
+                    <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
+                        {{ t('bundle.no-bundles-description') }}
+                    </p>
+                    <div class="mt-8">
+                        <BundleAddNew />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Grid section -->
-        <section v-else class="tablet:grid-cols-2 grid w-full grid-cols-1 gap-4 lg:grid-cols-3">
-            <template v-for="bundle of bundleList">
-                <BundleGenerativeCard :bundle="bundle" />
-            </template>
-        </section>
+            <!-- Grid section -->
+            <section v-else class="grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+                <template v-for="bundle of bundleList" :key="bundle._id">
+                    <BundleGenerativeCard :bundle="bundle" />
+                </template>
+            </section>
 
-        <!-- Pagination -->
-        <div v-if="pagination && !isEmptyState" class="mt-6">
-            <Pagination v-model="controller.pagination.page" :totalPages="controller.pagination.pages" @change-page="controller.fetchPage($event)" />
+            <!-- Pagination -->
+            <div v-if="pagination && !isEmptyState" class="mt-12 flex justify-center">
+                <Pagination
+                    v-model="controller.pagination.page"
+                    :totalPages="controller.pagination.pages"
+                    @change-page="controller.fetchPage($event)"
+                />
+            </div>
         </div>
     </div>
 </template>

From 93731d9aeb9023245b8c5053cb22e7ad75d48b64 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sun, 1 Feb 2026 15:43:43 +0200
Subject: [PATCH 4/5] feat: #86ewevg3y Implement common `PageHeader` and
 `Breadcrumb` components, updating bundle pages and documentation.

---
 .agent/skills/frontend_design/SKILL.md    |  35 ++--
 frontend/components/common/Breadcrumb.vue |  39 +++++
 frontend/components/common/PageHeader.vue |  51 ++++++
 frontend/pages/bundles/[id].vue           |   9 +-
 frontend/pages/bundles/index.vue          | 198 +++++++++-------------
 5 files changed, 187 insertions(+), 145 deletions(-)
 create mode 100644 frontend/components/common/Breadcrumb.vue
 create mode 100644 frontend/components/common/PageHeader.vue

diff --git a/.agent/skills/frontend_design/SKILL.md b/.agent/skills/frontend_design/SKILL.md
index 94f8b6f..dc0317a 100644
--- a/.agent/skills/frontend_design/SKILL.md
+++ b/.agent/skills/frontend_design/SKILL.md
@@ -31,6 +31,8 @@ import { Modal } from '@codebridger/lib-vue-components/complex.ts';
 - **Card**: The building block for content.
 - **Button**: Use for actions.
 - **Icon**: Wrapper for Iconify icons. PREFERRED SET: `iconify solar--*-bold-duotone` or `*-bold`.
+- **PageHeader**: Standard top-of-page layout with title, subtitle, and actions.
+- **Breadcrumb**: Navigation hierarchy component.
 
 ## 3. Layout Patterns
 
@@ -52,30 +54,15 @@ Pages normally live within a `DashboardShell` (via `default` layout). Content sh
         <div class="container relative mx-auto px-6 py-16 max-w-7xl">
             
             <!-- Standard Header Block -->
-            <div class="mb-14 flex flex-col md:flex-row justify-between gap-6">
-                <div class="flex flex-col gap-3">
-                    <!-- Overline Label -->
-                    <div class="flex items-center gap-2">
-                        <div class="h-2 w-2 rounded-full bg-primary animate-pulse"></div>
-                        <span class="text-[10px] font-black uppercase tracking-[0.2em] text-primary/60">
-                            Section Label
-                        </span>
-                    </div>
-                    
-                    <!-- Main Title - often with gradient -->
-                    <h1 class="text-5xl font-black text-gray-900 dark:text-white tracking-tight leading-none bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400">
-                        Page Title
-                    </h1>
-                    
-                    <!-- Subtitle -->
-                    <p class="text-lg text-gray-500 dark:text-gray-400 font-medium max-w-md">
-                        Descriptive text goes here.
-                    </p>
-                </div>
-                
-                <!-- Optional Right-side Actions/Status -->
-                <div class="hidden md:flex flex-col items-end gap-2">...</div>
-            </div>
+            <PageHeader
+                overline="Section Label"
+                title="Page Title"
+                subtitle="Descriptive text goes here."
+            >
+                <template #actions>
+                    <!-- Optional Right-side Actions/Status -->
+                </template>
+            </PageHeader>
 
             <!-- Content Grid -->
             <div class="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
diff --git a/frontend/components/common/Breadcrumb.vue b/frontend/components/common/Breadcrumb.vue
new file mode 100644
index 0000000..9317d02
--- /dev/null
+++ b/frontend/components/common/Breadcrumb.vue
@@ -0,0 +1,39 @@
+<template>
+	<nav class="flex" aria-label="Breadcrumb">
+		<ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+			<template v-for="(item, index) in items" :key="index">
+				<li class="inline-flex items-center">
+					<component :is="isLast(index) ? 'span' : 'RouterLink'" :to="!isLast(index) ? item.to : undefined"
+						:class="[
+							'inline-flex items-center text-sm font-medium transition-colors duration-200',
+							isLast(index)
+								? 'text-gray-500 cursor-default dark:text-gray-400'
+								: 'text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white',
+						]">
+						{{ item.label }}
+					</component>
+				</li>
+				<li v-if="!isLast(index)" aria-hidden="true">
+					<div class="flex items-center">
+						<Icon name="icon-park-outline:right" class="mx-1 h-4 w-4 text-gray-400" />
+					</div>
+				</li>
+			</template>
+		</ol>
+	</nav>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+
+type BreadcrumbItem = {
+	label: string;
+	to?: string;
+};
+
+const props = defineProps<{
+	items: BreadcrumbItem[];
+}>();
+
+const isLast = (index: number) => index === props.items.length - 1;
+</script>
diff --git a/frontend/components/common/PageHeader.vue b/frontend/components/common/PageHeader.vue
new file mode 100644
index 0000000..707b723
--- /dev/null
+++ b/frontend/components/common/PageHeader.vue
@@ -0,0 +1,51 @@
+<template>
+	<div class="mb-14 flex flex-col justify-between gap-6 md:flex-row">
+		<div class="flex flex-col gap-3">
+			<!-- Breadcrumbs -->
+			<div v-if="breadcrumbs && breadcrumbs.length" class="mb-2">
+				<Breadcrumb :items="breadcrumbs" />
+			</div>
+
+			<!-- Overline Label -->
+			<div v-if="overline" class="flex items-center gap-2">
+				<div class="h-2 w-2 rounded-full bg-primary animate-pulse"></div>
+				<span class="text-[10px] font-black uppercase tracking-[0.2em] text-primary/60">
+					{{ overline }}
+				</span>
+			</div>
+
+			<!-- Main Title -->
+			<h1
+				class="bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-5xl font-black leading-none tracking-tight text-transparent dark:from-white dark:to-gray-400">
+				{{ title }}
+			</h1>
+
+			<!-- Subtitle -->
+			<p v-if="subtitle" class="max-w-md text-lg font-medium text-gray-500 dark:text-gray-400">
+				{{ subtitle }}
+			</p>
+		</div>
+
+		<!-- Right-side Actions -->
+		<div v-if="$slots.actions" class="flex flex-col items-end gap-4 md:flex-row md:items-end">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Breadcrumb from './Breadcrumb.vue';
+
+// Define types for cleaner props
+type BreadcrumbItem = {
+	label: string;
+	to?: string;
+};
+
+defineProps<{
+	title: string;
+	subtitle?: string;
+	overline?: string;
+	breadcrumbs?: BreadcrumbItem[];
+}>();
+</script>
diff --git a/frontend/pages/bundles/[id].vue b/frontend/pages/bundles/[id].vue
index ecadf2f..6af5d3a 100644
--- a/frontend/pages/bundles/[id].vue
+++ b/frontend/pages/bundles/[id].vue
@@ -10,12 +10,10 @@
 
         <!-- Standard Container -->
         <div class="container relative mx-auto px-6 py-12 max-w-7xl">
-            <!-- Back Button -->
+            <!-- Breadcrumbs -->
             <div class="mb-8">
-                <Button to="/#/bundles" variant="text" iconName="IconArrowLeft" icon-pos="left"
-                    class="!px-0 text-gray-500 hover:text-gray-900 dark:hover:text-white">
-                    {{ t('common.back', 'Back to Bundles') }}
-                </Button>
+                <Breadcrumb
+                    :items="[{ label: t('bundle.list_title', 'Your bundles'), to: '/bundles' }, { label: bundleStore.bundleDetail?.title || '...' }]" />
             </div>
 
             <!-- Bundle Info Card -->
@@ -118,6 +116,7 @@
 <script setup lang="ts">
 import { Button } from '@codebridger/lib-vue-components/elements.ts';
 import { Pagination } from '@codebridger/lib-vue-components/complex.ts';
+import Breadcrumb from '~/components/common/Breadcrumb.vue';
 import { useBundleStore } from '@/stores/bundle';
 import StartLiveSessionFormModal from '~/components/bundle/StartLiveSessionFormModal.vue';
 import type { LivePracticeSessionSetupType } from '~/types/live-session.type';
diff --git a/frontend/pages/bundles/index.vue b/frontend/pages/bundles/index.vue
index 4a1779e..3673414 100644
--- a/frontend/pages/bundles/index.vue
+++ b/frontend/pages/bundles/index.vue
@@ -2,76 +2,44 @@
     <div class="relative min-h-screen">
         <!-- Decorative Background Elements -->
         <div
-            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none"
-        ></div>
+            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
         <div
-            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none"
-        ></div>
+            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
 
         <!-- Standard Container -->
         <div class="container relative mx-auto px-6 py-16 max-w-7xl">
             <!-- Standard Header Block -->
-            <div class="mb-14 flex flex-col md:flex-row justify-between gap-6">
-                <div class="flex flex-col gap-3">
-                    <!-- Overline Label -->
-                    <div class="flex items-center gap-2">
-                        <div class="h-2 w-2 rounded-full bg-primary animate-pulse"></div>
-                        <span class="text-[10px] font-black uppercase tracking-[0.2em] text-primary/60">
-                            {{ t('bundle.collection_label', 'LIBRARY') }}
-                        </span>
-                    </div>
-
-                    <!-- Main Title - often with gradient -->
-                    <h1
-                        class="text-5xl font-black text-gray-900 dark:text-white tracking-tight leading-none bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400"
-                    >
-                        {{ t('bundle.list_title', 'Your bundles') }}
-                    </h1>
-
-                    <!-- Subtitle -->
-                    <p class="text-lg text-gray-500 dark:text-gray-400 font-medium max-w-md">
-                        {{ t('bundle.list_subtitle', 'Manage and practice your language collections.') }}
-                    </p>
-                </div>
-
-                <!-- Right-side Actions/Status (Filter + Add) -->
-                <div class="flex flex-col items-end gap-4 md:flex-row md:items-end">
+            <PageHeader :overline="t('bundle.collection_label', 'LIBRARY')"
+                :title="t('bundle.list_title', 'Your bundles')"
+                :subtitle="t('bundle.list_subtitle', 'Manage and practice your language collections.')">
+                <template #actions>
                     <div class="w-full md:w-64">
-                        <Input
-                            iconName="IconSearch"
-                            v-model="filter"
-                            :placeholder="t('bundle.filter_bundles')"
-                            :error="!!error"
-                            :error-message="error || ''"
-                            class="bg-white/50 backdrop-blur-sm"
-                        />
+                        <Input iconName="IconSearch" v-model="filter" :placeholder="t('bundle.filter_bundles')"
+                            :error="!!error" :error-message="error || ''" class="bg-white/50 backdrop-blur-sm" />
                     </div>
                     <div>
                         <BundleAddNew />
                     </div>
-                </div>
-            </div>
+                </template>
+            </PageHeader>
 
             <!-- Empty State -->
             <div v-if="isEmptyState" class="flex flex-1 flex-col items-center justify-center py-20">
                 <div
-                    class="relative flex max-w-xl flex-col items-center justify-center rounded-3xl border border-white/20 bg-white/40 p-12 text-center shadow-xl backdrop-blur-md dark:bg-gray-800/40"
-                >
+                    class="relative flex max-w-xl flex-col items-center justify-center rounded-3xl border border-white/20 bg-white/40 p-12 text-center shadow-xl backdrop-blur-md dark:bg-gray-800/40">
                     <!-- Decorative blob for empty state -->
                     <div
-                        class="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 blur-2xl"
-                    ></div>
+                        class="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 blur-2xl">
+                    </div>
 
-                    <img
-                        class="mx-auto h-48 w-auto dark:hidden"
+                    <img class="mx-auto h-48 w-auto dark:hidden"
                         src="/assets/images/illustrations/placeholders/flat/placeholder-search-3.svg"
-                        alt="No bundles available"
-                    />
-                    <img
-                        class="mx-auto hidden h-48 w-auto dark:block"
+                        alt="No bundles available" />
+                    <img class="mx-auto hidden h-48 w-auto dark:block"
                         src="/assets/images/illustrations/placeholders/flat/placeholder-search-3-dark.svg"
-                        alt="No bundles available"
-                    />
+                        alt="No bundles available" />
                     <h3 class="mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
                         {{ t('bundle.no-bundles') }}
                     </h3>
@@ -93,78 +61,76 @@
 
             <!-- Pagination -->
             <div v-if="pagination && !isEmptyState" class="mt-12 flex justify-center">
-                <Pagination
-                    v-model="controller.pagination.page"
-                    :totalPages="controller.pagination.pages"
-                    @change-page="controller.fetchPage($event)"
-                />
+                <Pagination v-model="controller.pagination.page" :totalPages="controller.pagination.pages"
+                    @change-page="controller.fetchPage($event)" />
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-    import { Input } from '@codebridger/lib-vue-components/elements.ts';
-    import { Pagination } from '@codebridger/lib-vue-components/complex.ts';
-    import { dataProvider } from '@modular-rest/client';
-    import type { PaginationType } from '@modular-rest/client/dist/types/types';
-    import { COLLECTIONS, DATABASE, type PhraseBundleType } from '~/types/database.type';
-
-    const { t } = useI18n();
-
-    const error = ref<string | null>(null);
-
-    definePageMeta({
-        layout: 'default',
-        title: () => t('bundle.list'),
-        // @ts-ignore
-        middleware: ['auth'],
-    });
-
-    const filter = ref('');
-    const perPage = ref(20);
-    const bundleList = ref<PhraseBundleType[]>([]);
-    const pagination = ref<PaginationType | null>(null);
-    const isLoading = ref(false);
-    const isEmptyState = computed(() => !bundleList.value.length && !isLoading.value);
-
-    const controller = dataProvider.list<PhraseBundleType>(
-        {
-            database: DATABASE.USER_CONTENT,
-            collection: COLLECTIONS.PHRASE_BUNDLE,
-            query: {
-                refId: authUser.value?.id,
-                title: {
-                    $regex: filter.value,
-                    $options: 'i',
-                },
-            },
-            options: {
-                sort: {
-                    _id: -1,
-                },
+import { Input } from '@codebridger/lib-vue-components/elements.ts';
+import { Pagination } from '@codebridger/lib-vue-components/complex.ts';
+import PageHeader from '~/components/common/PageHeader.vue';
+import { dataProvider } from '@modular-rest/client';
+import type { PaginationType } from '@modular-rest/client/dist/types/types';
+import { COLLECTIONS, DATABASE, type PhraseBundleType } from '~/types/database.type';
+
+const { t } = useI18n();
+
+const error = ref<string | null>(null);
+
+definePageMeta({
+    layout: 'default',
+    title: () => t('bundle.list'),
+    // @ts-ignore
+    middleware: ['auth'],
+});
+
+const filter = ref('');
+const perPage = ref(20);
+const bundleList = ref<PhraseBundleType[]>([]);
+const pagination = ref<PaginationType | null>(null);
+const isLoading = ref(false);
+const isEmptyState = computed(() => !bundleList.value.length && !isLoading.value);
+
+const controller = dataProvider.list<PhraseBundleType>(
+    {
+        database: DATABASE.USER_CONTENT,
+        collection: COLLECTIONS.PHRASE_BUNDLE,
+        query: {
+            refId: authUser.value?.id,
+            title: {
+                $regex: filter.value,
+                $options: 'i',
             },
         },
-        {
-            limit: perPage.value,
-            page: 1,
-            onFetched: (data) => {
-                bundleList.value = data;
-                pagination.value = controller.pagination;
+        options: {
+            sort: {
+                _id: -1,
             },
-        }
-    );
-
-    onMounted(async () => {
-        isLoading.value = true;
-
-        try {
-            // update pagination
-            await controller.updatePagination();
-            // fetch first page
-            await controller.fetchPage(1);
-        } catch (error) {
-            isLoading.value = false;
-        }
-    });
+        },
+    },
+    {
+        limit: perPage.value,
+        page: 1,
+        onFetched: (data) => {
+            bundleList.value = data;
+            pagination.value = controller.pagination;
+        },
+    }
+);
+
+onMounted(async () => {
+    isLoading.value = true;
+
+    try {
+        // update pagination
+        await controller.updatePagination();
+        // fetch first page
+        await controller.fetchPage(1);
+    } catch (error) {
+        isLoading.value = false;
+    }
+});
 </script>

From 9820fafe0c62c5a92502548f8d47f12ce3d0973a Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sun, 1 Feb 2026 15:59:15 +0200
Subject: [PATCH 5/5] refactor: #86ewevg3y Modernize the UI design and styling
 of various dashboard pages.

---
 frontend/pages/sessions/index.vue        | 279 ++++++------
 frontend/pages/sessions/new.vue          |  34 +-
 frontend/pages/settings/subscription.vue | 523 ++++++++++++-----------
 frontend/pages/statistic.vue             | 183 ++++----
 4 files changed, 547 insertions(+), 472 deletions(-)

diff --git a/frontend/pages/sessions/index.vue b/frontend/pages/sessions/index.vue
index 7f0942b..b89b1e5 100644
--- a/frontend/pages/sessions/index.vue
+++ b/frontend/pages/sessions/index.vue
@@ -1,156 +1,177 @@
 <template>
-    <div class="p-4">
-        <!-- Left section -->
-        <div v-if="!isEmptyState" class="mb-4 flex items-center justify-between gap-4">
-            <div>
-                <div class="flex items-center gap-1">
-                    <Icon name="IconMultipleForwardRight" class="h-6 w-6" />
-                    <h1 class="text-2xl font-bold">{{ t('live-session.your-sessions') }}</h1>
-                </div>
-                <p>{{ t('live-session.6-months-expiry') }}</p>
-            </div>
+    <div class="relative min-h-screen">
+        <!-- Decorative Background Elements -->
+        <div
+            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+        <div
+            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
         </div>
 
-        <!-- Empty State -->
-        <div v-if="isEmptyState" class="flex flex-1 flex-col items-center justify-center">
-            <div class="flex max-w-xl flex-col items-center justify-center py-12 text-center">
-                <img
-                    class="mx-auto h-48 w-auto dark:hidden"
-                    src="/assets/images/illustrations/placeholders/flat/placeholder-search-3.svg"
-                    alt="No sessions available"
-                />
-                <img
-                    class="mx-auto hidden h-48 w-auto dark:block"
-                    src="/assets/images/illustrations/placeholders/flat/placeholder-search-3-dark.svg"
-                    alt="No sessions available"
-                />
-                <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ t('live-session.no-sessions') }}</h3>
-                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
-                    {{ t('live-session.no-sessions-description') }}
-                </p>
-                <div class="mt-6">
-                    <Button color="primary" iconName="IconPlay" :label="t('live-session.start-first-session')" @click="goToBundles" />
+        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
+            <PageHeader :title="t('live-session.your-sessions')" :subtitle="t('live-session.6-months-expiry')"
+                overline="LIVE SESSIONS" />
+
+            <!-- Empty State -->
+            <div v-if="isEmptyState" class="flex flex-1 flex-col items-center justify-center py-12">
+                <div
+                    class="flex max-w-xl flex-col items-center justify-center rounded-3xl border border-white/20 bg-white/40 p-12 text-center shadow-xl backdrop-blur-md dark:bg-gray-800/40">
+                    <!-- Decorative blob for empty state -->
+                    <div
+                        class="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 blur-2xl">
+                    </div>
+
+                    <img class="mx-auto h-48 w-auto dark:hidden"
+                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3.svg"
+                        alt="No sessions available" />
+                    <img class="mx-auto hidden h-48 w-auto dark:block"
+                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3-dark.svg"
+                        alt="No sessions available" />
+                    <h3 class="mt-6 text-xl font-bold text-gray-900 dark:text-gray-100">{{ t('live-session.no-sessions')
+                    }}</h3>
+                    <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
+                        {{ t('live-session.no-sessions-description') }}
+                    </p>
+                    <div class="mt-8">
+                        <Button color="primary" iconName="IconPlay" :label="t('live-session.start-first-session')"
+                            @click="goToBundles" class="shadow-lg shadow-primary/20" />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Sessions List -->
-        <div v-else class="max-w-2xl space-y-4">
-            <div v-for="session in sessionList" :key="session._id" class="rounded-lg bg-white p-4 shadow transition-shadow hover:shadow-md dark:bg-gray-800">
-                <NuxtLink :to="`/sessions/${session._id}`" class="block">
-                    <!-- Header with Type and Date -->
-                    <div class="mb-3 flex items-baseline justify-between">
-                        <div class="flex items-center gap-2">
-                            <span class="rounded-lg bg-blue-100 px-2 py-1 text-xs font-medium uppercase text-blue-600 dark:bg-blue-900 dark:text-blue-400">
-                                {{ session.type }}
-                            </span>
-                            <span class="text-sm text-gray-600 dark:text-gray-400">
-                                {{ new Date(session.createdAt).toLocaleString() }}
-                            </span>
-                        </div>
-                        <div class="">
-                            <span class="text-sm text-gray-600 dark:text-gray-400"> {{ session.dialogs.length || 0 }} {{ t('live-session.dialogs') }} </span>
-                            <Icon name="IconChevronRight" class="h-5 w-5" />
+            <!-- Sessions List -->
+            <div v-else class="max-w-2xl space-y-4">
+                <div v-for="session in sessionList" :key="session._id"
+                    class="rounded-xl border border-gray-100 bg-white/60 p-5 shadow-sm backdrop-blur-sm transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-700 dark:bg-gray-800/60">
+                    <NuxtLink :to="`/sessions/${session._id}`" class="block">
+                        <!-- Header with Type and Date -->
+                        <div class="mb-3 flex items-baseline justify-between">
+                            <div class="flex items-center gap-2">
+                                <span
+                                    class="rounded-lg bg-blue-100 px-2 py-1 text-xs font-bold uppercase tracking-wide text-blue-600 dark:bg-blue-900/50 dark:text-blue-300">
+                                    {{ session.type }}
+                                </span>
+                                <span class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                                    {{ new Date(session.createdAt).toLocaleString() }}
+                                </span>
+                            </div>
+                            <div
+                                class="flex items-center gap-1 text-sm font-semibold text-primary transition-colors group-hover:text-primary-dark">
+                                <span> {{ session.dialogs.length || 0 }} {{ t('live-session.dialogs') }} </span>
+                                <Icon name="IconChevronRight" class="h-4 w-4" />
+                            </div>
                         </div>
-                    </div>
 
-                    <!-- Session Metadata -->
-                    <div v-if="isPracticeSession(session)" class="mt-2 flex flex-wrap justify-between gap-2 text-sm text-gray-600 dark:text-gray-400">
-                        <div>
-                            <span class="font-medium">{{ t('live-session.ai-character') }}:</span>
-                            <span class="ml-1">{{ session.metadata.aiCharacter || '-' }}</span>
-                        </div>
-                        <div>
-                            <span class="font-medium">{{ t('live-session.selection-mode') }}:</span>
-                            <span class="ml-1 capitalize">{{ session.metadata.selectionMode || '-' }}</span>
-                        </div>
-                        <div v-if="session.session.totalPhrases">
-                            <span class="font-medium">{{ t('live-session.total-phrases') }}:</span>
-                            <span class="ml-1">{{ session.metadata.totalPhrases || '-' }}</span>
+                        <!-- Session Metadata -->
+                        <div v-if="isPracticeSession(session)"
+                            class="mt-3 flex flex-wrap gap-4 text-sm text-gray-600 dark:text-gray-400">
+                            <div class="flex items-center gap-1">
+                                <span class="font-bold text-gray-400 text-xs uppercase">{{
+                                    t('live-session.ai-character') }}:</span>
+                                <span class="font-medium text-gray-900 dark:text-gray-100">{{
+                                    session.metadata.aiCharacter || '-' }}</span>
+                            </div>
+                            <div class="flex items-center gap-1">
+                                <span class="font-bold text-gray-400 text-xs uppercase">{{
+                                    t('live-session.selection-mode') }}:</span>
+                                <span class="font-medium capitalize text-gray-900 dark:text-gray-100">{{
+                                    session.metadata.selectionMode || '-' }}</span>
+                            </div>
+                            <div v-if="session.session.totalPhrases">
+                                <span class="font-bold text-gray-400 text-xs uppercase">{{
+                                    t('live-session.total-phrases') }}:</span>
+                                <span class="font-medium text-gray-900 dark:text-gray-100">{{
+                                    session.metadata.totalPhrases || '-' }}</span>
+                            </div>
+                            <div v-if="session.metadata.selectionMode === 'selection'">
+                                <span class="font-bold text-gray-400 text-xs uppercase">{{
+                                    t('live-session.phrase-range') }}:</span>
+                                <span class="font-medium text-gray-900 dark:text-gray-100">{{
+                                    session.metadata.fromPhrase || '-' }} - {{ session.metadata.toPhrase || '-'
+                                    }}</span>
+                            </div>
                         </div>
-                        <div v-if="session.metadata.selectionMode === 'selection'">
-                            <span class="font-medium">{{ t('live-session.phrase-range') }}:</span>
-                            <span class="ml-1">{{ session.metadata.fromPhrase || '-' }} - {{ session.metadata.toPhrase || '-' }}</span>
-                        </div>
-                    </div>
-                </NuxtLink>
+                    </NuxtLink>
+                </div>
             </div>
-        </div>
 
-        <!-- Pagination -->
-        <div v-if="pagination && !isEmptyState" class="mt-6 max-w-2xl">
-            <Pagination v-model="controller.pagination.page" :totalPages="controller.pagination.pages" @change-page="controller.fetchPage($event)" />
+            <!-- Pagination -->
+            <div v-if="pagination && !isEmptyState" class="mt-8 max-w-2xl flex justify-center">
+                <Pagination v-model="controller.pagination.page" :totalPages="controller.pagination.pages"
+                    @change-page="controller.fetchPage($event)" />
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-    import { Icon, Button } from '@codebridger/lib-vue-components/elements.ts';
-    import { Pagination } from '@codebridger/lib-vue-components/complex.ts';
-    import { dataProvider } from '@modular-rest/client';
-    import type { PaginationType } from '@modular-rest/client/dist/types/types';
-    import { COLLECTIONS, DATABASE } from '~/types/database.type';
-    import type { LiveSessionRecordType, LivePracticeSessionSetupType } from '~/types/live-session.type';
+import { Icon, Button } from '@codebridger/lib-vue-components/elements.ts';
+import { Pagination } from '@codebridger/lib-vue-components/complex.ts';
+import PageHeader from '~/components/common/PageHeader.vue';
+import { dataProvider } from '@modular-rest/client';
+import type { PaginationType } from '@modular-rest/client/dist/types/types';
+import { COLLECTIONS, DATABASE } from '~/types/database.type';
+import type { LiveSessionRecordType, LivePracticeSessionSetupType } from '~/types/live-session.type';
 
-    const { t } = useI18n();
-    const router = useRouter();
+const { t } = useI18n();
+const router = useRouter();
 
-    definePageMeta({
-        layout: 'default',
-        title: () => t('live-session.session-history'),
-        middleware: ['auth'],
-    });
+definePageMeta({
+    layout: 'default',
+    title: () => t('live-session.session-history'),
+    middleware: ['auth'],
+});
 
-    const perPage = ref(20);
-    const sessionList = ref<LiveSessionRecordType[]>([]);
-    const pagination = ref<PaginationType | null>(null);
-    const isLoading = ref(false);
-    const isEmptyState = computed(() => !sessionList.value.length && !isLoading.value);
+const perPage = ref(20);
+const sessionList = ref<LiveSessionRecordType[]>([]);
+const pagination = ref<PaginationType | null>(null);
+const isLoading = ref(false);
+const isEmptyState = computed(() => !sessionList.value.length && !isLoading.value);
 
-    // Type guard for practice sessions
-    const isPracticeSession = (session: LiveSessionRecordType): session is LiveSessionRecordType & { session: LivePracticeSessionSetupType } => {
-        return session.type === 'bundle-practice' && !!session.session;
-    };
+// Type guard for practice sessions
+const isPracticeSession = (session: LiveSessionRecordType): session is LiveSessionRecordType & { session: LivePracticeSessionSetupType } => {
+    return session.type === 'bundle-practice' && !!session.session;
+};
 
-    const controller = dataProvider.list<LiveSessionRecordType>(
-        {
-            database: DATABASE.USER_CONTENT,
-            collection: COLLECTIONS.LIVE_SESSION,
-            query: {
-                refId: authUser.value?.id,
-                // where dialogs atleast contains one object with speaker:"user"
-                // dialogs: { $elemMatch: { speaker: 'user' } },
-            },
-            options: {
-                sort: {
-                    createdAt: -1,
-                },
-            },
+const controller = dataProvider.list<LiveSessionRecordType>(
+    {
+        database: DATABASE.USER_CONTENT,
+        collection: COLLECTIONS.LIVE_SESSION,
+        query: {
+            refId: authUser.value?.id,
+            // where dialogs atleast contains one object with speaker:"user"
+            // dialogs: { $elemMatch: { speaker: 'user' } },
         },
-        {
-            limit: perPage.value,
-            page: 1,
-            onFetched: (data) => {
-                sessionList.value = data;
-                pagination.value = controller.pagination;
+        options: {
+            sort: {
+                createdAt: -1,
             },
-        }
-    );
-
-    onMounted(async () => {
-        isLoading.value = true;
+        },
+    },
+    {
+        limit: perPage.value,
+        page: 1,
+        onFetched: (data) => {
+            sessionList.value = data;
+            pagination.value = controller.pagination;
+        },
+    }
+);
 
-        try {
-            // update pagination
-            await controller.updatePagination();
-            // fetch first page
-            await controller.fetchPage(1);
-        } catch (error) {
-            isLoading.value = false;
-        }
-    });
+onMounted(async () => {
+    isLoading.value = true;
 
-    function goToBundles() {
-        router.push('/bundles');
+    try {
+        // update pagination
+        await controller.updatePagination();
+        // fetch first page
+        await controller.fetchPage(1);
+    } catch (error) {
+        isLoading.value = false;
     }
+});
+
+function goToBundles() {
+    router.push('/bundles');
+}
 </script>
diff --git a/frontend/pages/sessions/new.vue b/frontend/pages/sessions/new.vue
index c15fa40..73e86af 100644
--- a/frontend/pages/sessions/new.vue
+++ b/frontend/pages/sessions/new.vue
@@ -1,14 +1,30 @@
 <template>
-    <section class="p-4">
-        <LiveSessionStartNew />
-    </section>
+    <div class="relative min-h-screen">
+        <!-- Decorative Background Elements -->
+        <div
+            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+        <div
+            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+
+        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
+            <PageHeader :title="t('live-session.start-new-session')"
+                :breadcrumbs="[{ label: t('live-session.your-sessions'), to: '/sessions' }, { label: t('live-session.start-new-session') }]" />
+
+            <section>
+                <LiveSessionStartNew />
+            </section>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
-    const { t } = useI18n();
-    definePageMeta({
-        layout: 'default',
-        title: () => t('live-session.start-new-session'),
-        middleware: ['auth'],
-    });
+const { t } = useI18n();
+import PageHeader from '~/components/common/PageHeader.vue';
+definePageMeta({
+    layout: 'default',
+    title: () => t('live-session.start-new-session'),
+    middleware: ['auth'],
+});
 </script>
diff --git a/frontend/pages/settings/subscription.vue b/frontend/pages/settings/subscription.vue
index d447e05..e90e936 100644
--- a/frontend/pages/settings/subscription.vue
+++ b/frontend/pages/settings/subscription.vue
@@ -1,290 +1,315 @@
 <template>
-    <div class="container mx-auto flex flex-col gap-4 p-4">
-        <!-- Active Plan Card -->
-        <Card v-if="activeSubscriptionData !== null" class="w-full rounded-lg border border-gray-100 shadow-sm">
-            <h2 class="text-xl font-bold text-gray-900">
-                {{ activeSubscriptionData.label }}
-            </h2>
+    <div class="relative min-h-screen">
+        <!-- Decorative Background Elements -->
+        <div
+            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+        <div
+            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
 
-            <div v-if="activeSubscriptionData">
-                <div class="flex flex-col gap-4">
-                    <div class="flex items-center justify-between">
-                        <p class="text-gray-600">{{ t('subscription.started-at') }} {{ new Date(activeSubscriptionData.start_date).toLocaleDateString() }}</p>
+        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
+            <PageHeader :title="t('subscription.subscription-plans')" overline="MEMBERSHIP" />
 
-                        <Button color="primary" size="md" :label="t('subscription.manage-subscription')" :to="activeSubscriptionData.portal_url" />
-                    </div>
-                    <ul class="space-y-2.5">
-                        <li class="flex items-start">
-                            <Icon name="IconCheck" class="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
-                            <span class="text-sm text-gray-700">Usage percentage: {{ activeSubscriptionData.usage_percentage + '%' }}</span>
-                        </li>
-                        <li class="flex items-start">
-                            <Icon name="IconCheck" class="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
-                            <span class="text-sm text-gray-700"
-                                >Created at: {{ activeSubscriptionData.createdAt ? new Date(activeSubscriptionData.createdAt).toLocaleDateString() : '' }}</span
-                            >
-                        </li>
-                        <li class="flex items-start">
-                            <Icon name="IconCheck" class="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
-                            <span class="text-sm text-gray-700"
-                                >Updated at: {{ activeSubscriptionData.updatedAt ? new Date(activeSubscriptionData.updatedAt).toLocaleDateString() : '' }}</span
-                            >
-                        </li>
-                        <li class="flex items-start">
-                            <Icon name="IconCheck" class="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
-                            <span class="text-sm text-gray-700"
-                                >End date: {{ activeSubscriptionData.end_date ? new Date(activeSubscriptionData.end_date).toLocaleDateString() : '' }}</span
-                            >
-                        </li>
-                    </ul>
-                </div>
-                <div class="mt-8 flex items-center gap-4">
-                    <div class="flex h-8 w-[160px] items-center gap-2 rounded-full bg-gray-600 px-3 py-1.5 text-sm font-medium text-white">
-                        <Icon name="IconClock" class="h-4 w-4" />
-                        <span>{{ t('billing.days-left') }}: {{ activeSubscriptionData.remaining_days }}</span>
-                    </div>
-                    <Progress :value="activeSubscriptionData.usage_percentage!" :max="100" size="md" color="primary" />
-                </div>
-            </div>
-        </Card>
+            <div class="flex flex-col gap-8">
+                <!-- Active Plan Card -->
+                <Card v-if="activeSubscriptionData !== null" class="w-full rounded-lg border border-gray-100 shadow-sm">
+                    <h2 class="text-xl font-bold text-gray-900">
+                        {{ activeSubscriptionData.label }}
+                    </h2>
 
-        <!-- Credit Infomation (Dev Only) -->
-        <Card v-if="config.public.isNotProduction" class="w-full rounded-lg border border-gray-100 shadow-sm">
-            <template v-if="activeSubscriptionData !== null">
-                <h2 class="text-xl font-bold text-gray-900">Credit Infomation (Dev Only)</h2>
-                <!-- Credits and USD Table -->
-                <div class="my-6" v-if="activeSubscriptionData">
-                    <div class="overflow-x-auto">
-                        <table class="w-full table-auto border-collapse">
-                            <thead>
-                                <tr class="border-b border-gray-200">
-                                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ t('subscription.metric') }}</th>
-                                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ t('subscription.credits') }}</th>
-                                    <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{ t('subscription.credit-in-usd') }}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr class="border-b border-gray-200">
-                                    <td class="px-4 py-2 text-sm text-gray-700">{{ t('subscription.total') }}</td>
-                                    <td class="px-4 py-2 text-sm text-gray-700">{{ activeSubscriptionData.total_credits }}</td>
-                                    <td class="px-4 py-2 text-sm text-gray-700">{{ activeSubscriptionData.total_credit_in_usd }}</td>
-                                </tr>
-                                <tr class="border-b border-gray-200">
-                                    <td class="px-4 py-2 text-sm text-gray-700">{{ t('subscription.available') }}</td>
-                                    <td class="px-4 py-2 text-sm text-gray-700">{{ activeSubscriptionData.available_credit }}</td>
-                                    <td class="px-4 py-2 text-sm text-gray-700">${{ activeSubscriptionData.available_credit_in_usd }}</td>
-                                </tr>
-                                <tr>
-                                    <td class="px-4 py-2 text-sm text-gray-700">{{ t('subscription.used') }}</td>
-                                    <td class="px-4 py-2 text-sm text-gray-700">{{ activeSubscriptionData.credits_used }}</td>
-                                    <td class="px-4 py-2 text-sm text-gray-700">${{ activeSubscriptionData.used_credit_in_usd }}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </template>
+                    <div v-if="activeSubscriptionData">
+                        <div class="flex flex-col gap-4">
+                            <div class="flex items-center justify-between">
+                                <p class="text-gray-600">{{ t('subscription.started-at') }} {{ new
+                                    Date(activeSubscriptionData.start_date).toLocaleDateString() }}</p>
 
-            <!-- Profile Reset Section -->
-            <div class="flex items-center justify-between">
-                <div>
-                    <h3 class="text-lg font-medium text-gray-900">Profile Reset</h3>
-                    <p class="mt-1 text-sm text-gray-500">Clear all subscription and freemium data for testing purposes. This action cannot be undone.</p>
-                </div>
-                <Button @click="handleProfileReset" color="danger" :loading="isResetLoading" class="ml-4"> Reset Profile </Button>
-            </div>
-        </Card>
-
-        <!-- Pricing Tables -->
-        <div class="mt-4 max-w-full dark:text-white-dark">
-            <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
-                <!-- Plan Cards -->
-                <Card
-                    v-for="(plan, index) in plans"
-                    :key="index"
-                    class="group flex h-full w-full flex-col rounded border border-[#e0e6ed] !p-1 shadow-none transition-all duration-300 dark:border-[#1b2e4b]"
-                    style="min-height: 440px"
-                >
-                    <div class="border-b border-[#e0e6ed] p-2 dark:border-[#1b2e4b]">
-                        <div
-                            class="-mt-[30px] flex h-[70px] w-[150px] items-center justify-center rounded border-2 border-blue-600 bg-white text-sm text-[#3b3f5c] shadow-[0_0_15px_1px_rgba(37,99,235,0.20)] transition-all duration-300 group-hover:-translate-y-[10px] dark:bg-[#0e1726] dark:text-white-light"
-                        >
-                            <div>
-                                <span class="-mt-1 text-lg font-semibold"> {{ plan.currency }}{{ plan.price }} </span>/
-                                <span class="-mb-1 text-sm"> {{ t('subscription.month') }} </span>
+                                <Button color="primary" size="md" :label="t('subscription.manage-subscription')"
+                                    :to="activeSubscriptionData.portal_url" />
+                            </div>
+                            <ul class="space-y-2.5">
+                                <li class="flex items-start">
+                                    <Icon name="IconCheck" class="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
+                                    <span class="text-sm text-gray-700">Usage percentage: {{
+                                        activeSubscriptionData.usage_percentage + '%' }}</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <Icon name="IconCheck" class="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
+                                    <span class="text-sm text-gray-700">Created at: {{ activeSubscriptionData.createdAt
+                                        ? new Date(activeSubscriptionData.createdAt).toLocaleDateString() : '' }}</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <Icon name="IconCheck" class="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
+                                    <span class="text-sm text-gray-700">Updated at: {{ activeSubscriptionData.updatedAt
+                                        ? new Date(activeSubscriptionData.updatedAt).toLocaleDateString() : '' }}</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <Icon name="IconCheck" class="mr-2 mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
+                                    <span class="text-sm text-gray-700">End date: {{ activeSubscriptionData.end_date ?
+                                        new Date(activeSubscriptionData.end_date).toLocaleDateString() : '' }}</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="mt-8 flex items-center gap-4">
+                            <div
+                                class="flex h-8 w-[160px] items-center gap-2 rounded-full bg-gray-600 px-3 py-1.5 text-sm font-medium text-white">
+                                <Icon name="IconClock" class="h-4 w-4" />
+                                <span>{{ t('billing.days-left') }}: {{ activeSubscriptionData.remaining_days }}</span>
                             </div>
+                            <Progress :value="activeSubscriptionData.usage_percentage!" :max="100" size="md"
+                                color="primary" />
                         </div>
-                        <h3 class="mb-2.5 mt-4 text-xl lg:text-xl">{{ plan.name }}</h3>
-                        <p class="text-sm">{{ plan.description }}</p>
                     </div>
-                    <div class="flex flex-grow flex-col p-2">
-                        <ul class="mb-8 flex-grow space-y-4 font-semibold">
-                            <li v-for="feature in plan.features" :key="feature" class="flex items-start">
-                                <Icon name="IconCheck" class="mr-3 mt-1 text-xl text-blue-600" />
-                                <span>{{ feature }}</span>
-                            </li>
-                        </ul>
-                        <div class="mt-auto">
-                            <template v-if="plan.is_freemium">
-                                <Button v-if="!activeSubscriptionData" block disabled>
-                                    {{ t('subscription.current-plan') }}
-                                </Button>
-
-                                <Button v-if="activeSubscriptionData" block disabled>
-                                    {{ t('subscription.downgrade-plan') }}
-                                </Button>
-                            </template>
+                </Card>
 
-                            <template v-if="!plan.is_freemium">
-                                <Button v-if="!activeSubscriptionData" @click="initiateCheckout(plan.product_id)" color="primary" block>
-                                    <span v-if="isLoading" class="flex items-center justify-center">
-                                        <svg
-                                            class="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
-                                            xmlns="http://www.w3.org/2000/svg"
-                                            fill="none"
-                                            viewBox="0 0 24 24"
-                                        >
-                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                            <path
-                                                class="opacity-75"
-                                                fill="currentColor"
-                                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                                            ></path>
-                                        </svg>
-                                        {{ t('subscription.processing') }}
-                                    </span>
+                <!-- Credit Infomation (Dev Only) -->
+                <Card v-if="config.public.isNotProduction" class="w-full rounded-lg border border-gray-100 shadow-sm">
+                    <template v-if="activeSubscriptionData !== null">
+                        <h2 class="text-xl font-bold text-gray-900">Credit Infomation (Dev Only)</h2>
+                        <!-- Credits and USD Table -->
+                        <div class="my-6" v-if="activeSubscriptionData">
+                            <div class="overflow-x-auto">
+                                <table class="w-full table-auto border-collapse">
+                                    <thead>
+                                        <tr class="border-b border-gray-200">
+                                            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{
+                                                t('subscription.metric') }}</th>
+                                            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{
+                                                t('subscription.credits') }}</th>
+                                            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">{{
+                                                t('subscription.credit-in-usd') }}</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr class="border-b border-gray-200">
+                                            <td class="px-4 py-2 text-sm text-gray-700">{{ t('subscription.total') }}
+                                            </td>
+                                            <td class="px-4 py-2 text-sm text-gray-700">{{
+                                                activeSubscriptionData.total_credits }}</td>
+                                            <td class="px-4 py-2 text-sm text-gray-700">{{
+                                                activeSubscriptionData.total_credit_in_usd }}</td>
+                                        </tr>
+                                        <tr class="border-b border-gray-200">
+                                            <td class="px-4 py-2 text-sm text-gray-700">{{ t('subscription.available')
+                                            }}</td>
+                                            <td class="px-4 py-2 text-sm text-gray-700">{{
+                                                activeSubscriptionData.available_credit }}</td>
+                                            <td class="px-4 py-2 text-sm text-gray-700">${{
+                                                activeSubscriptionData.available_credit_in_usd }}</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-4 py-2 text-sm text-gray-700">{{ t('subscription.used') }}
+                                            </td>
+                                            <td class="px-4 py-2 text-sm text-gray-700">{{
+                                                activeSubscriptionData.credits_used }}</td>
+                                            <td class="px-4 py-2 text-sm text-gray-700">${{
+                                                activeSubscriptionData.used_credit_in_usd }}</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </template>
 
-                                    <span v-else>
-                                        {{ t('subscription.upgrade-plan') }}
-                                    </span>
-                                </Button>
-                            </template>
+                    <!-- Profile Reset Section -->
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <h3 class="text-lg font-medium text-gray-900">Profile Reset</h3>
+                            <p class="mt-1 text-sm text-gray-500">Clear all subscription and freemium data for testing
+                                purposes. This action
+                                cannot be undone.</p>
                         </div>
+                        <Button @click="handleProfileReset" color="danger" :loading="isResetLoading" class="ml-4"> Reset
+                            Profile </Button>
                     </div>
                 </Card>
-            </div>
-        </div>
 
-        <!-- Payment Status Messages -->
-        <div v-if="error" class="mt-4 rounded-lg bg-red-100 p-4 text-red-700">
-            {{ error }}
+                <!-- Pricing Tables -->
+                <div class="mt-4 max-w-full dark:text-white-dark">
+                    <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
+                        <!-- Plan Cards -->
+                        <Card v-for="(plan, index) in plans" :key="index"
+                            class="group flex h-full w-full flex-col rounded border border-[#e0e6ed] !p-1 shadow-none transition-all duration-300 dark:border-[#1b2e4b]"
+                            style="min-height: 440px">
+                            <div class="border-b border-[#e0e6ed] p-2 dark:border-[#1b2e4b]">
+                                <div
+                                    class="-mt-[30px] flex h-[70px] w-[150px] items-center justify-center rounded border-2 border-blue-600 bg-white text-sm text-[#3b3f5c] shadow-[0_0_15px_1px_rgba(37,99,235,0.20)] transition-all duration-300 group-hover:-translate-y-[10px] dark:bg-[#0e1726] dark:text-white-light">
+                                    <div>
+                                        <span class="-mt-1 text-lg font-semibold"> {{ plan.currency }}{{ plan.price }}
+                                        </span>/
+                                        <span class="-mb-1 text-sm"> {{ t('subscription.month') }} </span>
+                                    </div>
+                                </div>
+                                <h3 class="mb-2.5 mt-4 text-xl lg:text-xl">{{ plan.name }}</h3>
+                                <p class="text-sm">{{ plan.description }}</p>
+                            </div>
+                            <div class="flex flex-grow flex-col p-2">
+                                <ul class="mb-8 flex-grow space-y-4 font-semibold">
+                                    <li v-for="feature in plan.features" :key="feature" class="flex items-start">
+                                        <Icon name="IconCheck" class="mr-3 mt-1 text-xl text-blue-600" />
+                                        <span>{{ feature }}</span>
+                                    </li>
+                                </ul>
+                                <div class="mt-auto">
+                                    <template v-if="plan.is_freemium">
+                                        <Button v-if="!activeSubscriptionData" block disabled>
+                                            {{ t('subscription.current-plan') }}
+                                        </Button>
+
+                                        <Button v-if="activeSubscriptionData" block disabled>
+                                            {{ t('subscription.downgrade-plan') }}
+                                        </Button>
+                                    </template>
+
+                                    <template v-if="!plan.is_freemium">
+                                        <Button v-if="!activeSubscriptionData"
+                                            @click="initiateCheckout(plan.product_id)" color="primary" block>
+                                            <span v-if="isLoading" class="flex items-center justify-center">
+                                                <svg class="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
+                                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                                    <circle class="opacity-25" cx="12" cy="12" r="10"
+                                                        stroke="currentColor" stroke-width="4"></circle>
+                                                    <path class="opacity-75" fill="currentColor"
+                                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                                                    </path>
+                                                </svg>
+                                                {{ t('subscription.processing') }}
+                                            </span>
+
+                                            <span v-else>
+                                                {{ t('subscription.upgrade-plan') }}
+                                            </span>
+                                        </Button>
+                                    </template>
+                                </div>
+                            </div>
+                        </Card>
+                    </div>
+                </div>
+
+                <!-- Payment Status Messages -->
+                <div v-if="error" class="mt-4 rounded-lg bg-red-100 p-4 text-red-700">
+                    {{ error }}
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-    import { Card, Button, Progress, Icon } from '@codebridger/lib-vue-components/elements.ts';
+import { Card, Button, Progress, Icon } from '@codebridger/lib-vue-components/elements.ts';
+import PageHeader from '~/components/common/PageHeader.vue';
 
-    import { ref } from 'vue';
-    import { functionProvider } from '@modular-rest/client';
-    import type { SubscriptionPlan } from '../../../server/src/modules/subscription/types';
-    import { useProfileStore } from '~/stores/profile';
-    const { t } = useI18n();
-    const isLoading = ref(false);
-    const isResetLoading = ref(false);
-    const error = ref('');
+import { ref } from 'vue';
+import { functionProvider } from '@modular-rest/client';
+import type { SubscriptionPlan } from '../../../server/src/modules/subscription/types';
+import { useProfileStore } from '~/stores/profile';
+const { t } = useI18n();
+const isLoading = ref(false);
+const isResetLoading = ref(false);
+const error = ref('');
 
-    const config = useRuntimeConfig();
-    const profileStore = useProfileStore();
+const config = useRuntimeConfig();
+const profileStore = useProfileStore();
 
-    definePageMeta({
-        layout: 'default',
-        title: () => t('subscription.subscription-plans'),
-        // @ts-ignore
-        middleware: ['auth'],
-    });
+definePageMeta({
+    layout: 'default',
+    title: () => t('subscription.subscription-plans'),
+    // @ts-ignore
+    middleware: ['auth'],
+});
 
-    const plans = ref<SubscriptionPlan[]>([]);
+const plans = ref<SubscriptionPlan[]>([]);
 
-    // Define checkout response type
-    interface CheckoutResponse {
-        sessionId: string;
-        url: string;
-        expiresAt: string;
-    }
+// Define checkout response type
+interface CheckoutResponse {
+    sessionId: string;
+    url: string;
+    expiresAt: string;
+}
 
-    const activeSubscriptionData = computed(() => profileStore.activeSubscription);
+const activeSubscriptionData = computed(() => profileStore.activeSubscription);
 
-    function fetchPlans() {
-        return functionProvider
-            .run<SubscriptionPlan[]>({
-                name: 'getSubscriptionPlans',
-                args: {},
-            })
-            .then((res) => {
-                plans.value = res;
-            });
-    }
+function fetchPlans() {
+    return functionProvider
+        .run<SubscriptionPlan[]>({
+            name: 'getSubscriptionPlans',
+            args: {},
+        })
+        .then((res) => {
+            plans.value = res;
+        });
+}
 
-    onMounted(() => {
-        fetchPlans();
-    });
+onMounted(() => {
+    fetchPlans();
+});
 
-    // Function to initiate the checkout process
-    async function initiateCheckout(productId: string) {
-        isLoading.value = true;
-        error.value = '';
+// Function to initiate the checkout process
+async function initiateCheckout(productId: string) {
+    isLoading.value = true;
+    error.value = '';
 
-        try {
-            // Get the base URL for success/cancel redirects
-            const baseUrl = window.location.origin;
-            const successUrl = `${baseUrl}/#/payment-success`;
-            const cancelUrl = `${baseUrl}/#/payment-canceled`;
+    try {
+        // Get the base URL for success/cancel redirects
+        const baseUrl = window.location.origin;
+        const successUrl = `${baseUrl}/#/payment-success`;
+        const cancelUrl = `${baseUrl}/#/payment-canceled`;
 
-            // Call the API to create a payment session using functionProvider
-            const response = await functionProvider.run<CheckoutResponse>({
-                name: 'createPaymentSession',
-                args: {
-                    productId,
-                    successUrl,
-                    cancelUrl,
-                    userId: authUser.value?.id,
-                },
-            });
+        // Call the API to create a payment session using functionProvider
+        const response = await functionProvider.run<CheckoutResponse>({
+            name: 'createPaymentSession',
+            args: {
+                productId,
+                successUrl,
+                cancelUrl,
+                userId: authUser.value?.id,
+            },
+        });
 
-            // Redirect to Stripe checkout
-            if (response && response.url) {
-                window.location.href = response.url;
-            } else {
-                throw new Error(t('subscription.checkout-failed'));
-            }
-        } catch (err: any) {
-            error.value = err.message || t('subscription.unexpected-error');
-            console.error('Checkout error:', err);
-        } finally {
-            isLoading.value = false;
+        // Redirect to Stripe checkout
+        if (response && response.url) {
+            window.location.href = response.url;
+        } else {
+            throw new Error(t('subscription.checkout-failed'));
         }
+    } catch (err: any) {
+        error.value = err.message || t('subscription.unexpected-error');
+        console.error('Checkout error:', err);
+    } finally {
+        isLoading.value = false;
     }
+}
 
-    async function handleProfileReset() {
-        if (!confirm('Are you sure you want to reset your profile? This will clear all subscription and freemium data and cannot be undone.')) {
-            return;
-        }
+async function handleProfileReset() {
+    if (!confirm('Are you sure you want to reset your profile? This will clear all subscription and freemium data and cannot be undone.')) {
+        return;
+    }
 
-        isResetLoading.value = true;
-        error.value = '';
+    isResetLoading.value = true;
+    error.value = '';
 
-        try {
-            await functionProvider.run({
-                name: 'clearSubscriptionAndFreemium',
-                args: {
-                    userId: profileStore.authUser?.id,
-                },
-            });
+    try {
+        await functionProvider.run({
+            name: 'clearSubscriptionAndFreemium',
+            args: {
+                userId: profileStore.authUser?.id,
+            },
+        });
 
-            // Refresh the profile data to reflect changes
-            await profileStore.fetchSubscription();
+        // Refresh the profile data to reflect changes
+        await profileStore.fetchSubscription();
 
-            // Show success message
-            alert('Profile reset successfully! All subscription and freemium data has been cleared.');
+        // Show success message
+        alert('Profile reset successfully! All subscription and freemium data has been cleared.');
 
-            // refresh the page
-            window.location.reload();
-        } catch (err: any) {
-            error.value = err.message || 'Failed to reset profile';
-            console.error('Profile reset error:', err);
-        } finally {
-            isResetLoading.value = false;
-        }
+        // refresh the page
+        window.location.reload();
+    } catch (err: any) {
+        error.value = err.message || 'Failed to reset profile';
+        console.error('Profile reset error:', err);
+    } finally {
+        isResetLoading.value = false;
     }
+}
 </script>
diff --git a/frontend/pages/statistic.vue b/frontend/pages/statistic.vue
index b0f5d2e..be21f2f 100644
--- a/frontend/pages/statistic.vue
+++ b/frontend/pages/statistic.vue
@@ -1,100 +1,113 @@
 <template>
-    <div class="p-4">
-        <h1 class="mb-6 text-lg font-bold">{{ t('statistic.your-statistic') }}</h1>
-        <section class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-4">
-            <Card class="col-span-1 rounded-md shadow-none lg:col-span-3">
-                <WidgetActivityChartOverview title="Your last 7 days" />
-            </Card>
-            <Card class="max-h-min rounded-md shadow-none">
-                <h1 class="text-lg font-bold">{{ t('statistic.quick-states.label') }}</h1>
-                <div class="flex items-center space-x-4 rounded-md bg-gray-100 p-2 dark:bg-gray-900">
-                    <IconButton icon="IconNotes" rounded="full" size="lg" class="text-secondary" />
-                    <div class="flex flex-col items-start space-y-2">
-                        <h1 class="text-lg font-bold">
-                            {{ statistics.totalBundles }}
-                        </h1>
-                        <span class="text-gray-500">
-                            {{ t('statistic.quick-states.total-bundles') }}
-                        </span>
+    <div class="relative min-h-screen">
+        <!-- Decorative Background Elements -->
+        <div
+            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+        <div
+            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
+        </div>
+
+        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
+            <PageHeader :title="t('statistic.your-statistic')" overline="ANALYTICS" />
+
+            <section class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-4">
+                <Card class="col-span-1 rounded-md shadow-none lg:col-span-3">
+                    <WidgetActivityChartOverview title="Your last 7 days" />
+                </Card>
+                <Card class="max-h-min rounded-md shadow-none">
+                    <h1 class="text-lg font-bold">{{ t('statistic.quick-states.label') }}</h1>
+                    <div class="flex items-center space-x-4 rounded-md bg-gray-100 p-2 dark:bg-gray-900">
+                        <IconButton icon="IconNotes" rounded="full" size="lg" class="text-secondary" />
+                        <div class="flex flex-col items-start space-y-2">
+                            <h1 class="text-lg font-bold">
+                                {{ statistics.totalBundles }}
+                            </h1>
+                            <span class="text-gray-500">
+                                {{ t('statistic.quick-states.total-bundles') }}
+                            </span>
+                        </div>
                     </div>
-                </div>
-                <div class="mt-2 flex items-center space-x-4 rounded-md bg-gray-100 p-2 dark:bg-gray-900">
-                    <IconButton icon="IconClipboardText" rounded="full" size="lg" class="text-info" />
-                    <div class="flex flex-col items-start space-y-2">
-                        <h1 class="text-lg font-bold">
-                            {{ statistics.totalPhrases }}
-                        </h1>
-                        <span class="text-gray-500">
-                            {{ t('statistic.quick-states.total-phrases') }}
-                        </span>
+                    <div class="mt-2 flex items-center space-x-4 rounded-md bg-gray-100 p-2 dark:bg-gray-900">
+                        <IconButton icon="IconClipboardText" rounded="full" size="lg" class="text-info" />
+                        <div class="flex flex-col items-start space-y-2">
+                            <h1 class="text-lg font-bold">
+                                {{ statistics.totalPhrases }}
+                            </h1>
+                            <span class="text-gray-500">
+                                {{ t('statistic.quick-states.total-phrases') }}
+                            </span>
+                        </div>
                     </div>
+                </Card>
+            </section>
+            <section>
+                <h1 class="text-lg font-bold">{{ t('statistic.recent') }}</h1>
+                <div class="grid w-full grid-cols-2 gap-4 lg:grid-cols-3">
+                    <BundleGenerativeCard v-for="bundle in recentBundles" :key="bundle._id" :bundle="bundle" />
                 </div>
-            </Card>
-        </section>
-        <section>
-            <h1 class="text-lg font-bold">{{ t('statistic.recent') }}</h1>
-            <div class="grid w-full grid-cols-2 gap-4 lg:grid-cols-3">
-                <BundleGenerativeCard v-for="bundle in recentBundles" :key="bundle._id" :bundle="bundle" />
-            </div>
-        </section>
+            </section>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-    import { dataProvider, functionProvider } from '@modular-rest/client';
-    import { COLLECTIONS, DATABASE, type PhraseBundleType } from '~/types/database.type';
-    import { FN, type UserStatisticType } from '~/types/function.type';
-    import { Card, IconButton, Icon } from '@codebridger/lib-vue-components/elements.ts';
-    const { t } = useI18n();
+import { dataProvider, functionProvider } from '@modular-rest/client';
+import { COLLECTIONS, DATABASE, type PhraseBundleType } from '~/types/database.type';
+import { FN, type UserStatisticType } from '~/types/function.type';
+import { Card, IconButton } from '@codebridger/lib-vue-components/elements.ts';
+import PageHeader from '~/components/common/PageHeader.vue';
 
-    definePageMeta({
-        layout: 'default',
-        title: () => t('statistic.your-statistic'),
-        // @ts-ignore
-        middleware: ['auth'],
-    });
+const { t } = useI18n();
 
-    const recentBundles = ref<PhraseBundleType[]>([]);
-    const statistics = ref<UserStatisticType>({
-        totalPhrases: 0,
-        totalBundles: 0,
-    });
+definePageMeta({
+    layout: 'default',
+    title: () => t('statistic.your-statistic'),
+    // @ts-ignore
+    middleware: ['auth'],
+});
 
-    function getRecentBundles() {
-        dataProvider
-            .find<PhraseBundleType>({
-                database: DATABASE.USER_CONTENT,
-                collection: COLLECTIONS.PHRASE_BUNDLE,
-                query: {
-                    refId: authUser.value?.id,
-                },
-                options: {
-                    limit: 3,
-                    sort: {
-                        updatedAt: -1,
-                    },
-                },
-            })
-            .then((data) => {
-                recentBundles.value = data;
-            });
-    }
+const recentBundles = ref<PhraseBundleType[]>([]);
+const statistics = ref<UserStatisticType>({
+    totalPhrases: 0,
+    totalBundles: 0,
+});
 
-    function getUserStatistics() {
-        functionProvider
-            .run<UserStatisticType>({
-                name: FN.getUserStatistic,
-                args: {
-                    userId: authUser.value?.id,
+function getRecentBundles() {
+    dataProvider
+        .find<PhraseBundleType>({
+            database: DATABASE.USER_CONTENT,
+            collection: COLLECTIONS.PHRASE_BUNDLE,
+            query: {
+                refId: authUser.value?.id,
+            },
+            options: {
+                limit: 3,
+                sort: {
+                    updatedAt: -1,
                 },
-            })
-            .then((data) => {
-                statistics.value = data;
-            });
-    }
+            },
+        })
+        .then((data) => {
+            recentBundles.value = data;
+        });
+}
+
+function getUserStatistics() {
+    functionProvider
+        .run<UserStatisticType>({
+            name: FN.getUserStatistic,
+            args: {
+                userId: authUser.value?.id,
+            },
+        })
+        .then((data) => {
+            statistics.value = data;
+        });
+}
 
-    onMounted(() => {
-        getRecentBundles();
-        getUserStatistics();
-    });
+onMounted(() => {
+    getRecentBundles();
+    getUserStatistics();
+});
 </script>