diff --git a/.agent/development/SKILL.md b/.agent/development/SKILL.md
deleted file mode 100644
index 7e172b2..0000000
--- a/.agent/development/SKILL.md
+++ /dev/null
@@ -1,43 +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 in all code changes. Organize logic into distinct modules (Server-side) or reusable components (Frontend).
-- **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**:
-    - 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.
-
-
----
-
-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/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
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..dc0317a
--- /dev/null
+++ b/.agent/skills/frontend_design/SKILL.md
@@ -0,0 +1,122 @@
+---
+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`.
+- **PageHeader**: Standard top-of-page layout with title, subtitle, and actions.
+- **Breadcrumb**: Navigation hierarchy component.
+
+## 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 -->
+            <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">
+                <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
diff --git a/frontend/components/Leitner/BoxStats.vue b/frontend/components/Leitner/BoxStats.vue
index 41f44de..be45c70 100644
--- a/frontend/components/Leitner/BoxStats.vue
+++ b/frontend/components/Leitner/BoxStats.vue
@@ -3,12 +3,13 @@
         <div class="h-8 w-8 animate-spin rounded-full border-4 border-primary-500 border-t-transparent"></div>
     </div>
     <div v-else class="rounded-xl border border-gray-100 bg-white p-6 shadow-sm dark:bg-gray-800">
-        <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">Leitner Progress</h3>
-        
-        <div v-if="!stats || stats.totalItems === 0" class="flex h-40 flex-col items-center justify-center text-gray-500">
+        <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">{{ $t('smart_review.progress') }}</h3>
+
+        <div v-if="!leitnerStore.stats || leitnerStore.stats.totalItems === 0"
+            class="flex h-40 flex-col items-center justify-center text-gray-500">
             <p>No phrases in the system yet.</p>
         </div>
-        
+
         <client-only v-else>
             <apexchart type="bar" height="300" :options="chartOptions" :series="series"></apexchart>
         </client-only>
@@ -17,28 +18,30 @@
 
 <script setup lang="ts">
 import { useLeitnerStore } from '~/stores/leitner';
-import { storeToRefs } from 'pinia';
+
+
 
 // Use standard ApexCharts via plugin global component usually
 // or import defineAsyncComponent if needed. 
 // Assuming 'apexchart' is globally registered or handled by nuxt plugin.
 
 const leitnerStore = useLeitnerStore();
-const { stats } = storeToRefs(leitnerStore);
+const { t } = useI18n();
+// const { stats } = storeToRefs(leitnerStore); // Old syntax removed
 const loading = ref(true);
 
 const series = computed(() => {
-    if (!stats.value || !stats.value.distribution) return [{ name: 'Phrases', data: [] }];
-    
+    if (!leitnerStore.stats || !leitnerStore.stats.distribution) return [{ name: 'Phrases', data: [] }];
+
     // Convert distribution object to array
     // Box 1, Box 2, ...
     const data = [];
-    const totalBoxes = stats.value.settings?.totalBoxes || 5;
-    
+    const totalBoxes = leitnerStore.stats.settings?.totalBoxes || 5;
+
     for (let i = 1; i <= totalBoxes; i++) {
-        data.push(stats.value.distribution[i] || 0);
+        data.push(leitnerStore.stats.distribution[i] || 0);
     }
-    
+
     return [{
         name: 'Phrases',
         data: data
@@ -62,8 +65,8 @@ const chartOptions = computed(() => {
             enabled: false
         },
         xaxis: {
-            categories: Array.from({ length: stats.value?.settings?.totalBoxes || 5 }, (_, i) => `Box ${i + 1}`),
-            title: { text: 'Leitner Boxes' }
+            categories: Array.from({ length: leitnerStore.stats?.settings?.totalBoxes || 5 }, (_, i) => t('smart_review.level_number', { number: i + 1 })),
+            title: { text: t('smart_review.levels') }
         },
         yaxis: {
             title: { text: 'Phrases' }
@@ -78,7 +81,7 @@ const chartOptions = computed(() => {
 // Detect dark mode helper (naive)
 const isDark = computed(() => {
     // Just a placeholder, assume light or detect via DOM/Store
-    return false; 
+    return false;
 });
 
 onMounted(async () => {
diff --git a/frontend/components/Leitner/LeitnerPhrasePicker.vue b/frontend/components/Leitner/LeitnerPhrasePicker.vue
index 8070909..5c62ac1 100644
--- a/frontend/components/Leitner/LeitnerPhrasePicker.vue
+++ b/frontend/components/Leitner/LeitnerPhrasePicker.vue
@@ -193,7 +193,7 @@ function close() {
 </script>
 
 <template>
-	<Modal :modelValue="modelValue" title="Select Phrase" @close="close" size="xl">
+	<Modal :modelValue="modelValue" :title="$t('smart_review.select_phrase')" @close="close" size="xl">
 		<template #trigger="{ toggleModal }">
 			<p></p>
 		</template>
@@ -201,28 +201,30 @@ function close() {
 			<div class="flex flex-col gap-4">
 				<!-- Box Selector -->
 				<div class="flex flex-wrap gap-2 border-b border-gray-100 pb-4 dark:border-gray-700">
-					<span class="flex items-center text-sm font-semibold text-gray-500 mr-2">Target Box:</span>
+					<span class="flex items-center text-sm font-semibold text-gray-500 mr-2">{{
+						$t('smart_review.target_level') }}:</span>
 					<button v-for="b in totalBoxes" :key="b" @click="activeBox = b" :class="[
 						'px-4 py-1.5 rounded-full text-xs font-bold transition-all border',
 						activeBox === b
 							? 'bg-primary border-primary text-white shadow-md ring-2 ring-primary/20'
 							: 'bg-white border-gray-200 text-gray-600 hover:border-primary-400 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400'
 					]">
-						Box {{ b }}
+						{{ $t('smart_review.level_number', { number: b }) }}
 					</button>
 				</div>
 
 				<!-- Search & Filters -->
 				<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
 					<div class="flex-1">
-						<Input v-model="search" iconName="IconSearch" placeholder="Search phrases..." class="w-full" />
+						<Input v-model="search" iconName="IconSearch"
+							:placeholder="$t('smart_review.search_phrases_placeholder')" class="w-full" />
 					</div>
 
 					<div class="flex items-center gap-3 bg-gray-50 dark:bg-gray-800/50 p-1.5 px-3 rounded-lg border border-gray-100 dark:border-gray-700 transition-all"
 						:class="{ 'border-primary/50 dark:border-primary/50': showOnlyInBox }">
 						<select v-model="selectedBundleId"
 							class="rounded-md border-0 bg-transparent text-sm focus:ring-0 dark:text-white cursor-pointer min-w-[140px]">
-							<option value="">All Bundles</option>
+							<option value="">{{ $t('smart_review.all_bundles') }}</option>
 							<option v-for="bundle in bundles" :key="bundle._id" :value="bundle._id">
 								{{ bundle.title }}
 							</option>
@@ -232,7 +234,8 @@ function close() {
 
 						<div class="flex items-center px-2 py-1 rounded-md transition-all"
 							:class="{ 'bg-primary-light dark:bg-primary-dark-light shadow-sm': showOnlyInBox }">
-							<Toggle v-model="showOnlyInBox" :label="`Box ${activeBox}:`" />
+							<Toggle v-model="showOnlyInBox"
+								:label="$t('smart_review.level_number', { number: activeBox }) + ':'" />
 						</div>
 					</div>
 				</div>
@@ -241,10 +244,10 @@ function close() {
 				<div
 					class="phrase-list-container h-[450px] overflow-y-auto rounded-lg border border-gray-100 dark:border-gray-700 shadow-inner">
 					<div v-if="loading" class="flex h-64 items-center justify-center">
-						<span class="text-gray-500">Loading...</span>
+						<span class="text-gray-500">{{ $t('smart_review.loading') }}</span>
 					</div>
 					<div v-else-if="phrases.length === 0" class="flex h-64 items-center justify-center">
-						<span class="text-gray-500">No phrases found.</span>
+						<span class="text-gray-500">{{ $t('smart_review.no_phrases_found') }}</span>
 					</div>
 					<div v-else class="divide-y divide-gray-100 dark:divide-gray-700">
 						<div v-for="phrase in phrases" :key="phrase._id"
@@ -257,15 +260,15 @@ function close() {
 								<template v-if="phraseToBoxMap[phrase._id]">
 									<Button v-if="phraseToBoxMap[phrase._id] !== activeBox" size="sm" variant="outline"
 										@click="addPhrase(phrase._id)">
-										Move to Box {{ activeBox }}
+										{{ $t('smart_review.move_to_level', { number: activeBox }) }}
 									</Button>
 									<Button v-if="phraseToBoxMap[phrase._id] === activeBox" size="sm" variant="danger"
 										@click="removePhrase(phrase._id)">
-										Remove from Box {{ activeBox }}
+										{{ $t('smart_review.remove_from_level', { number: activeBox }) }}
 									</Button>
 								</template>
 								<Button v-else size="sm" @click="addPhrase(phrase._id)">
-									Add to Box {{ activeBox }}
+									{{ $t('smart_review.add_to_level', { number: activeBox }) }}
 								</Button>
 							</div>
 						</div>
@@ -274,12 +277,18 @@ function close() {
 
 				<!-- Pagination -->
 				<div class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-gray-700">
-					<span class="text-sm text-gray-500">Total: {{ totalPhrases }} phrases</span>
+					<span class="text-sm text-gray-500">{{ $t('smart_review.total_phrases', { count: totalPhrases })
+						}}</span>
 					<div class="flex gap-2">
-						<Button size="sm" variant="secondary" :disabled="page <= 1" @click="page--">Previous</Button>
-						<span class="flex items-center px-4 py-1 text-sm font-medium">Page {{ page }}</span>
-						<Button size="sm" variant="secondary" :disabled="phrases.length < limit"
-							@click="page++">Next</Button>
+						<Button size="sm" variant="secondary" :disabled="page <= 1" @click="page--">{{
+							$t('smart_review.previous')
+							}}</Button>
+						<span class="flex items-center px-4 py-1 text-sm font-medium">{{ $t('smart_review.page', {
+							page:
+								page })
+							}}</span>
+						<Button size="sm" variant="secondary" :disabled="phrases.length < limit" @click="page++">{{
+							$t('smart_review.next') }}</Button>
 					</div>
 				</div>
 			</div>
diff --git a/frontend/components/Leitner/LeitnerSettings.vue b/frontend/components/Leitner/LeitnerSettings.vue
index 7c6d1b9..80c1c6c 100644
--- a/frontend/components/Leitner/LeitnerSettings.vue
+++ b/frontend/components/Leitner/LeitnerSettings.vue
@@ -4,10 +4,11 @@
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
             <Card
                 class="p-4 bg-gradient-to-br from-primary-light to-white dark:from-primary-dark-light dark:to-gray-800 border-none shadow-sm overflow-hidden relative">
-                <div class="relative z-10">
-                    <p class="text-xs font-bold text-primary uppercase tracking-wider">Total Progress</p>
+                <div class="relative">
+                    <p class="text-xs font-bold text-primary uppercase tracking-wider">{{
+                        $t('smart_review.total_progress') }}</p>
                     <h3 class="text-2xl font-black text-gray-900 dark:text-white">{{ stats?.totalItems || 0 }}</h3>
-                    <p class="text-xs text-gray-500">Collected phrases</p>
+                    <p class="text-xs text-gray-500">{{ $t('smart_review.collected_phrases') }}</p>
                 </div>
                 <div class="absolute -right-4 -bottom-4 opacity-10 pointer-events-none">
                     <Icon name="IconFolder" class="!w-24 !h-24 text-primary" />
@@ -16,11 +17,12 @@
 
             <Card
                 class="p-4 bg-gradient-to-br from-success-light to-white dark:from-success-dark-light dark:to-gray-800 border-none shadow-sm overflow-hidden relative">
-                <div class="relative z-10">
-                    <p class="text-xs font-bold text-success uppercase tracking-wider">Next Session</p>
+                <div class="relative">
+                    <p class="text-xs font-bold text-success uppercase tracking-wider">{{
+                        $t('smart_review.next_session') }}</p>
                     <h3 class="text-2xl font-black text-gray-900 dark:text-white">{{ localSettings.reviewHour }}:00</h3>
-                    <p class="text-xs text-gray-500">{{ localSettings.reviewInterval === 1 ? 'Daily' : 'Every ' +
-                        localSettings.reviewInterval + ' days' }} reminder</p>
+                    <p class="text-xs text-gray-500">{{ localSettings.reviewInterval === 1 ? $t('smart_review.daily') :
+                        $t('smart_review.every_days_reminder', { days: localSettings.reviewInterval }) }}</p>
                 </div>
                 <div class="absolute -right-4 -bottom-4 opacity-10 pointer-events-none">
                     <Icon name="IconClock" class="!w-24 !h-24 text-success" />
@@ -29,10 +31,11 @@
 
             <Card
                 class="p-4 bg-gradient-to-br from-warning-light to-white dark:from-warning-dark-light dark:to-gray-800 border-none shadow-sm overflow-hidden relative">
-                <div class="relative z-10">
-                    <p class="text-xs font-bold text-warning uppercase tracking-wider">Boxes Active</p>
+                <div class="relative">
+                    <p class="text-xs font-bold text-warning uppercase tracking-wider">{{
+                        $t('smart_review.levels_active') }}</p>
                     <h3 class="text-2xl font-black text-gray-900 dark:text-white">{{ localSettings.totalBoxes }}</h3>
-                    <p class="text-xs text-gray-500">Step progression</p>
+                    <p class="text-xs text-gray-500">{{ $t('smart_review.step_progression') }}</p>
                 </div>
                 <div class="absolute -right-4 -bottom-4 opacity-10 pointer-events-none">
                     <Icon name="IconArchive" class="!w-24 !h-24 text-warning" />
@@ -41,7 +44,7 @@
         </div>
 
         <!-- Main Configuration Card -->
-        <Card class="rounded-2xl border border-gray-100 shadow-sm dark:border-gray-700 relative z-20">
+        <Card class="rounded-2xl border border-gray-100 shadow-sm dark:border-gray-700 relative">
             <!-- <div class="h-1.5 bg-gradient-to-r from-primary via-secondary to-primary-light"></div> -->
             <div class="flex flex-col gap-6 p-8">
                 <div class="flex items-center gap-4">
@@ -49,9 +52,10 @@
                         <Icon name="IconSettings" class="!w-6 !h-6" />
                     </div>
                     <div>
-                        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Leitner System Configuration</h3>
+                        <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ $t('smart_review.settings') }}
+                        </h3>
                         <p class="text-sm text-gray-500 dark:text-gray-400">
-                            Configure your spaced repetition journey. Items move down the chain as you learn them.
+                            {{ $t('smart_review.settings_desc') }}
                         </p>
                     </div>
                 </div>
@@ -66,11 +70,11 @@
                                     <Icon name="iconify solar--rocket-bold"
                                         class="text-primary opacity-50 !w-4 !h-4 shrink-0" />
                                 </div>
-                                <label
-                                    class="font-bold text-gray-800 dark:text-gray-200 leading-none">Auto-Entry</label>
+                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">{{
+                                    $t('smart_review.auto_entry') }}</label>
                             </div>
-                            <p class="text-xs text-gray-500 dark:text-gray-400 max-w-[200px]">Automatically add any new
-                                saved phrase to Box 1</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 max-w-[200px]">{{
+                                $t('smart_review.auto_entry_desc') }}</p>
                         </div>
                         <Toggle v-model="localSettings.autoEntry" />
                     </div>
@@ -83,10 +87,12 @@
                                     <Icon name="iconify solar--layers-bold"
                                         class="text-primary opacity-50 !w-4 !h-4 shrink-0" />
                                 </div>
-                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">Total
-                                    Boxes</label>
+                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">
+                                    {{ $t('smart_review.total_levels') }}
+                                </label>
                             </div>
-                            <p class="text-xs text-gray-500 dark:text-gray-400">Total number of boxes in the chain</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $t('smart_review.settings_desc') }}
+                            </p>
                         </div>
                         <div class="relative">
                             <input v-model.number="localSettings.totalBoxes" type="number" min="1" max="10"
@@ -101,10 +107,11 @@
                                 <div class="flex items-center justify-center p-0.5">
                                     <Icon name="IconChartSquare" class="text-primary opacity-50 !w-4 !h-4 shrink-0" />
                                 </div>
-                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">Global Daily
-                                    Limit</label>
+                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">{{
+                                    $t('smart_review.global_daily_limit') }}</label>
                             </div>
-                            <p class="text-xs text-gray-500 dark:text-gray-400">Max phrases to review per session</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $t('smart_review.max_phrases_desc')
+                            }}</p>
                         </div>
                         <div class="relative">
                             <input v-model.number="localSettings.dailyLimit" type="number" min="1"
@@ -113,22 +120,24 @@
                     </div>
 
                     <!-- Input: Review Interval Group -->
-                    <div class="flex items-center justify-between group relative z-50">
+                    <div class="flex items-center justify-between group relative flex-wrap">
                         <div class="flex flex-col gap-0.5">
                             <div class="flex items-center gap-2 mb-0.5">
                                 <div class="flex items-center justify-center p-0.5">
                                     <Icon name="IconClock" class="text-primary opacity-50 !w-4 !h-4 shrink-0" />
                                 </div>
-                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">Review
-                                    Interval</label>
+                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">{{
+                                    $t('smart_review.review_interval') }}</label>
                             </div>
-                            <p class="text-xs text-gray-500 dark:text-gray-400">Session frequency and time</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">{{
+                                $t('smart_review.session_frequency_desc') }}</p>
                         </div>
                         <div class="flex items-center gap-2">
-                            <span class="text-xs font-bold text-gray-400 uppercase">Each</span>
+                            <span class="text-xs font-bold text-gray-400 uppercase">{{ $t('smart_review.each') }}</span>
                             <input v-model.number="localSettings.reviewInterval" type="number" min="1"
                                 class="form-input w-16 rounded-lg border-gray-200 bg-gray-50 py-2 px-2 text-sm font-bold focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary/10 dark:border-gray-600 dark:bg-gray-700 transition-all text-center" />
-                            <span class="text-xs font-bold text-gray-400 uppercase whitespace-nowrap">day at</span>
+                            <span class="text-xs font-bold text-gray-400 uppercase whitespace-nowrap">{{
+                                $t('smart_review.day_at') }}</span>
                             <HourSelector v-model="localSettings.reviewHour" />
                         </div>
                     </div>
@@ -148,7 +157,7 @@
                         </div>
 
                         <!-- Box Circle -->
-                        <div class="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border-2 bg-white shadow-lg transition-all z-10 my-0"
+                        <div class="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border-2 bg-white shadow-lg transition-all my-0"
                             :class="[
                                 index === 0 ? 'border-primary text-primary dark:border-primary-400 dark:text-primary-400 ring-4 ring-primary/5' : 'border-gray-200 text-gray-400 dark:border-gray-700 dark:text-gray-500 dark:bg-gray-800',
                                 getItemCount(index) > 0 ? 'bg-primary/5 border-primary/40' : ''
@@ -174,20 +183,22 @@
                                     <div
                                         class="h-14 w-14 rounded-2xl bg-gray-50 dark:bg-gray-700/50 flex flex-col items-center justify-center border border-gray-100 dark:border-gray-600">
                                         <span class="text-xl font-black text-primary">{{ getItemCount(index) }}</span>
-                                        <span
-                                            class="text-[10px] font-bold uppercase tracking-tighter text-gray-400">Cards</span>
+                                        <span class="text-[10px] font-bold uppercase tracking-tighter text-gray-400">{{
+                                            $t('smart_review.cards') }}</span>
                                     </div>
                                     <div>
                                         <h4
                                             class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
-                                            Box {{ index + 1 }}
+                                            {{ $t('smart_review.level_number', { number: index + 1 }) }}
                                             <span v-if="index === 0"
-                                                class="px-1.5 py-0 rounded text-[9px] bg-primary/10 text-primary uppercase font-bold border border-primary/20">Entrance</span>
+                                                class="px-1.5 py-0 rounded text-[9px] bg-primary/10 text-primary uppercase font-bold border border-primary/20">{{
+                                                    $t('smart_review.entrance') }}</span>
                                             <span v-else-if="index === localSettings.totalBoxes - 1"
-                                                class="px-1.5 py-0 rounded text-[9px] bg-success/10 text-success uppercase font-bold border border-success/20">Mature</span>
+                                                class="px-1.5 py-0 rounded text-[9px] bg-success/10 text-success uppercase font-bold border border-success/20">{{
+                                                    $t('smart_review.mature') }}</span>
                                         </h4>
-                                        <p class="text-xs text-gray-500 dark:text-gray-400 italic">Level {{ index + 1 }}
-                                            of knowledge retention</p>
+                                        <p class="text-xs text-gray-500 dark:text-gray-400 italic">{{
+                                            $t('smart_review.level_retention_desc', { number: index + 1 }) }}</p>
                                     </div>
                                 </div>
 
@@ -197,14 +208,15 @@
                                         <label
                                             class="text-[10px] font-bold text-gray-400 uppercase tracking-widest flex items-center gap-1">
                                             <Icon name="IconCalendar" class="!w-3 !h-3 shrink-0" />
-                                            <span class="leading-none">Interval</span>
+                                            <span class="leading-none">{{ $t('smart_review.interval') }}</span>
                                         </label>
                                         <div class="relative group/input">
                                             <input v-model.number="localSettings.boxIntervals[index]" type="number"
                                                 min="1"
                                                 class="form-input w-24 rounded-lg border-gray-100 bg-gray-50/50 py-1.5 px-3 text-sm font-semibold focus:border-primary focus:bg-white transition-all dark:bg-gray-700 dark:border-gray-600" />
                                             <span
-                                                class="absolute right-2 top-2 text-[10px] text-gray-400 pointer-events-none">days</span>
+                                                class="absolute right-2 top-2 text-[10px] text-gray-400 pointer-events-none">{{
+                                                    $t('smart_review.days') }}</span>
                                         </div>
                                     </div>
 
@@ -213,13 +225,14 @@
                                         <label
                                             class="text-[10px] font-bold text-gray-400 uppercase tracking-widest flex items-center gap-1">
                                             <Icon name="IconBolt" class="!w-3 !h-3 shrink-0" />
-                                            <span class="leading-none">Quota</span>
+                                            <span class="leading-none">{{ $t('smart_review.quota') }}</span>
                                         </label>
                                         <div class="relative group/input">
                                             <input v-model.number="localSettings.boxQuotas[index]" type="number" min="0"
                                                 class="form-input w-24 rounded-lg border-gray-100 bg-gray-50/50 py-1.5 px-3 text-sm font-semibold focus:border-primary focus:bg-white transition-all dark:bg-gray-700 dark:border-gray-600" />
                                             <span
-                                                class="absolute right-2 top-2 text-[10px] text-gray-400 pointer-events-none">items</span>
+                                                class="absolute right-2 top-2 text-[10px] text-gray-400 pointer-events-none">{{
+                                                    $t('smart_review.items') }}</span>
                                         </div>
                                     </div>
 
@@ -230,7 +243,7 @@
                                         <template #icon>
                                             <Icon name="iconify solar--add-circle-bold" class="!w-4 !h-4" />
                                         </template>
-                                        Manage
+                                        {{ $t('smart_review.manage') }}
                                     </Button>
                                 </div>
                             </div>
@@ -242,22 +255,22 @@
 
         <!-- Float Action Footer -->
         <div
-            class="fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-[95%] max-w-2xl flex items-center justify-between gap-4 rounded-2xl border border-white/20 bg-white/70 p-4 shadow-2xl backdrop-blur-xl dark:border-gray-700/30 dark:bg-gray-900/70">
+            class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[95%] max-w-2xl flex items-center justify-between gap-4 rounded-2xl border border-white/20 bg-white/70 p-4 shadow-2xl backdrop-blur-xl dark:border-gray-700/30 dark:bg-gray-900/70">
             <div class="flex items-center gap-4 pl-2">
                 <div v-if="settingsDirty" class="flex h-2 w-2 rounded-full bg-warning animate-pulse"></div>
                 <div v-else class="flex h-2 w-2 rounded-full bg-success"></div>
                 <span class="text-xs font-bold text-gray-600 dark:text-gray-400">
-                    {{ settingsDirty ? 'Unsaved changes' : 'Settings synced' }}
+                    {{ settingsDirty ? $t('smart_review.unsaved_changes') : $t('smart_review.settings_synced') }}
                 </span>
             </div>
 
             <div class="flex items-center gap-3">
-                <Modal title="Reset Leitner System">
+                <Modal :title="$t('smart_review.reset_title')">
                     <template #trigger="{ toggleModal }">
                         <button
                             class="px-4 py-2 rounded-xl text-xs font-bold text-danger hover:bg-danger/10 transition-colors disabled:opacity-50"
                             :disabled="loading || resetting" @click="toggleModal(true)">
-                            Reset Progress
+                            {{ $t('smart_review.reset_progress') }}
                         </button>
                     </template>
                     <template #default>
@@ -267,27 +280,28 @@
                                 <Icon name="IconInfoTriangle" class="!w-8 !h-8" />
                             </div>
                             <div>
-                                <h4 class="text-xl font-bold text-gray-900 dark:text-white">Dangerous Action!</h4>
+                                <h4 class="text-xl font-bold text-gray-900 dark:text-white">{{
+                                    $t('smart_review.dangerous_action') }}</h4>
                                 <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                                    Are you sure you want to reset your entire Leitner system?
+                                    {{ $t('smart_review.reset_confirm') }}
                                     <br />
-                                    <strong class="text-danger">This cannot be undone.</strong> All progress, card
-                                    levels, and history will be cleared.
+                                    <strong class="text-danger">{{ $t('smart_review.reset_warning') }}</strong> {{
+                                        $t('smart_review.settings_desc') }}
                                 </p>
                             </div>
                         </div>
                     </template>
                     <template #footer="{ toggleModal }">
                         <div class="flex justify-end gap-3 w-full p-4 border-t dark:border-gray-700">
-                            <Button variant="outline" :disabled="resetting" @click="toggleModal(false)">Keep
-                                Everything</Button>
-                            <Button color="danger" :is-loading="resetting" @click="performReset(toggleModal)">Confirm
-                                Wipe</Button>
+                            <Button variant="outline" :disabled="resetting" @click="toggleModal(false)">{{
+                                $t('smart_review.keep_everything') }}</Button>
+                            <Button color="danger" :is-loading="resetting" @click="performReset(toggleModal)">{{
+                                $t('smart_review.confirm_wipe') }}</Button>
                         </div>
                     </template>
                 </Modal>
 
-                <Modal title="Confirm Save">
+                <Modal :title="$t('smart_review.confirm_save')">
                     <template #trigger="{ toggleModal }">
                         <Button color="primary" size="md" rounded="xl" :is-loading="loading"
                             :disabled="!settingsDirty || resetting"
@@ -296,7 +310,7 @@
                             <template #icon>
                                 <Icon name="IconSave" class="!w-4 !h-4" />
                             </template>
-                            Save Preferences
+                            {{ $t('smart_review.save_preferences') }}
                         </Button>
                     </template>
                     <template #default>
@@ -306,19 +320,20 @@
                                 <Icon name="IconInfoCircle" class="!w-8 !h-8" />
                             </div>
                             <div>
-                                <h4 class="text-xl font-bold text-gray-900 dark:text-white">Review Changes</h4>
+                                <h4 class="text-xl font-bold text-gray-900 dark:text-white">{{
+                                    $t('smart_review.review_changes') }}</h4>
                                 <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                                    You are about to update your Leitner intervals.
-                                    Existing items might be rescheduled to align with your new configuration.
+                                    {{ $t('smart_review.save_confirm_desc') }}
                                 </p>
                             </div>
                         </div>
                     </template>
                     <template #footer="{ toggleModal }">
                         <div class="flex justify-end gap-3 w-full p-4 border-t dark:border-gray-700">
-                            <Button variant="outline" :disabled="loading" @click="toggleModal(false)">Go Back</Button>
-                            <Button color="primary" :is-loading="loading" @click="performSave(toggleModal)">Apply
-                                Now</Button>
+                            <Button variant="outline" :disabled="loading" @click="toggleModal(false)">{{
+                                $t('smart_review.go_back') }}</Button>
+                            <Button color="primary" :is-loading="loading" @click="performSave(toggleModal)">{{
+                                $t('smart_review.apply_now') }}</Button>
                         </div>
                     </template>
                 </Modal>
@@ -342,6 +357,7 @@ import HourSelector from '~/components/material/HourSelector.vue';
 import { functionProvider } from '@modular-rest/client';
 import { useProfileStore } from '~/stores/profile';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 interface Settings {
     dailyLimit: number;
     totalBoxes: number;
@@ -363,7 +379,9 @@ const props = defineProps<{
 const emit = defineEmits(['saved', 'reset']);
 
 const profileStore = useProfileStore();
+
 const { authUser } = storeToRefs(profileStore);
+const { t } = useI18n();
 
 const loading = ref(false);
 const resetting = ref(false);
@@ -481,7 +499,7 @@ async function performSave(toggleModal: (state: boolean) => void) {
         emit('saved');
     } catch (e) {
         console.error(e);
-        toastError('Failed to save settings');
+        toastError(t('smart_review.failed_save'));
     } finally {
         loading.value = false;
     }
@@ -498,10 +516,10 @@ async function performReset(toggleModal: (state: boolean) => void) {
         });
         toggleModal(false);
         emit('reset');
-        toastSuccess('System has been reset.');
+        toastSuccess(t('smart_review.system_reset_success'));
     } catch (e) {
         console.error(e);
-        toastError('Failed to reset system');
+        toastError(t('smart_review.failed_reset'));
     } finally {
         resetting.value = false;
     }
diff --git a/frontend/components/bundle/GenerativeCard.vue b/frontend/components/bundle/GenerativeCard.vue
index b0bf2bd..452b3bd 100644
--- a/frontend/components/bundle/GenerativeCard.vue
+++ b/frontend/components/bundle/GenerativeCard.vue
@@ -20,51 +20,51 @@
     </NuxtLink>
 </template>
 <script setup lang="ts">
-    import { dataProvider } from '@modular-rest/client';
-    import { COLLECTIONS, DATABASE, type PhraseBundleType, type PhraseType } from '~/types/database.type';
-    import { Card, IconButton } from '@codebridger/lib-vue-components/elements.ts';
+import { dataProvider } from '@modular-rest/client';
+import { COLLECTIONS, DATABASE, type PhraseBundleType, type PhraseType } from '~/types/database.type';
+import { Card, IconButton } from '@codebridger/lib-vue-components/elements.ts';
 
-    const props = defineProps<{
-        bundle: PhraseBundleType;
-    }>();
+const props = defineProps<{
+    bundle: PhraseBundleType;
+}>();
 
-    const phraseList = ref<string[]>([]);
+const phraseList = ref<string[]>([]);
 
-    async function getWords() {
-        // get last 10 words
-        const phraseIds = props.bundle.phrases.slice(-10);
+async function getWords() {
+    // get last 10 words
+    const phraseIds = props.bundle.phrases.slice(-10);
 
-        if (phraseIds.length === 0) {
-            return;
-        }
-
-        const phrases = await dataProvider.findByIds<PhraseType>({
-            database: DATABASE.USER_CONTENT,
-            collection: COLLECTIONS.PHRASE,
-            ids: phraseIds,
-            accessQuery: {
-                refId: authUser.value?.id,
-            },
-        });
-
-        phraseList.value = phrases.map(({ phrase, translation }) => {
-            // choose between phrase and translation
-            return [phrase, translation][Math.floor(Math.random() * 2)];
-        });
+    if (phraseIds.length === 0) {
+        return;
     }
 
-    onMounted(async () => {
-        getWords();
+    const phrases = await dataProvider.findByIds<PhraseType>({
+        database: DATABASE.USER_CONTENT,
+        collection: COLLECTIONS.PHRASE,
+        ids: phraseIds,
+        accessQuery: {
+            refId: authUser.value?.id,
+        },
     });
 
-    function navigateToBundle() {
-        // navigate to the bundle page
-        navigateTo(`/bundles/${props.bundle._id}`);
-    }
+    phraseList.value = phrases.map(({ phrase, translation }) => {
+        // choose between phrase and translation
+        return [phrase, translation][Math.floor(Math.random() * 2)];
+    });
+}
+
+onMounted(async () => {
+    getWords();
+});
+
+function navigateToBundle() {
+    // navigate to the bundle page
+    navigateTo(`/bundles/${props.bundle._id}`);
+}
 </script>
 
 <style lang="css" scoped>
-    .no-padding {
-        padding: 0 !important;
-    }
+.no-padding {
+    padding: 0 !important;
+}
 </style>
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/components/partial/ProfileButton.vue b/frontend/components/partial/ProfileButton.vue
index c4a8053..25cad71 100644
--- a/frontend/components/partial/ProfileButton.vue
+++ b/frontend/components/partial/ProfileButton.vue
@@ -23,27 +23,21 @@
                     </div>
                 </li>
                 <li class="cursor-pointer">
-                    <a
-                        class="dark:hover:text-white"
-                        @click="
-                            close();
-                            goToProfileSettings();
-                        "
-                    >
+                    <a class="dark:hover:text-white" @click="
+                        close();
+                    goToProfileSettings();
+                    ">
                         <Icon name="IconUser" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
                         {{ t('profile.profile') }}
                     </a>
                 </li>
                 <li class="cursor-pointer">
-                    <a
-                        class="dark:hover:text-white"
-                        @click="
-                            close();
-                            goToLeitnerSettings();
-                        "
-                    >
+                    <a class="dark:hover:text-white" @click="
+                        close();
+                    goToLeitnerSettings();
+                    ">
                         <Icon name="IconSettings" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
-                        Leitner Preferences
+                        {{ t('smart_review.settings') }}
                     </a>
                 </li>
                 <li class="cursor-pointer border-t border-white-light dark:border-white-light/10">
@@ -77,34 +71,34 @@
 </template>
 
 <script lang="ts" setup>
-    import { useProfileStore } from '@/stores/profile';
-    import { Dropdown, IconButton, Icon, Button } from '@codebridger/lib-vue-components/elements.ts';
-    import { Modal } from '@codebridger/lib-vue-components/complex.ts';
+import { useProfileStore } from '@/stores/profile';
+import { Dropdown, IconButton, Icon, Button } from '@codebridger/lib-vue-components/elements.ts';
+import { Modal } from '@codebridger/lib-vue-components/complex.ts';
 
-    const router = useRouter();
-    const { t } = useI18n();
+const router = useRouter();
+const { t } = useI18n();
 
-    const profileStore = useProfileStore();
+const profileStore = useProfileStore();
 
-    const profilePicture = computed(() => {
-        return profileStore.profilePicture || '/assets/images/user.png';
-    });
+const profilePicture = computed(() => {
+    return profileStore.profilePicture || '/assets/images/user.png';
+});
 
-    function logout() {
-        profileStore.logout();
-        router.push('/auth/login');
-    }
+function logout() {
+    profileStore.logout();
+    router.push('/auth/login');
+}
 
-    function confirmSignOut(toggleModal: (state: boolean) => void) {
-        toggleModal(false);
-        logout();
-    }
+function confirmSignOut(toggleModal: (state: boolean) => void) {
+    toggleModal(false);
+    logout();
+}
 
-    function goToProfileSettings() {
-        router.push('/settings/profile');
-    }
+function goToProfileSettings() {
+    router.push('/settings/profile');
+}
 
-    function goToLeitnerSettings() {
-        router.push('/settings/preferences');
-    }
+function goToLeitnerSettings() {
+    router.push('/settings/preferences');
+}
 </script>
diff --git a/frontend/components/practice/LeitnerReviewSession.vue b/frontend/components/practice/LeitnerReviewSession.vue
new file mode 100644
index 0000000..4a29129
--- /dev/null
+++ b/frontend/components/practice/LeitnerReviewSession.vue
@@ -0,0 +1,154 @@
+<template>
+	<MaterialPracticeToolScaffold :title="title" :activePhrase="currentIndex + 1" :totalPhrases="totalItems"
+		bundleId="leitner" @end-session="$emit('end-session')">
+		<div v-if="loading" class="flex h-full w-full items-center justify-center">
+			<div class="h-8 w-8 animate-spin rounded-full border-4 border-primary-500 border-t-transparent"></div>
+		</div>
+
+		<div v-else-if="items.length === 0"
+			class="flex h-full w-full flex-col items-center justify-center p-8 text-center">
+			<Icon name="iconify solar--confetti-bold-duotone" class="mb-4 text-6xl text-success-500" />
+			<h2 class="text-2xl font-bold">{{ $t('board.all_caught_up') }}</h2>
+			<Button class="mt-6" @click="$emit('end-session')" variant="soft">{{ $t('board.back_to_board') }}</Button>
+		</div>
+
+		<div v-else class="flex h-full w-full flex-col items-center p-5 md:px-16 md:py-14">
+			<div
+				:class="['w-full flex-1 transition-all duration-300 ease-in-out', 'md:max-h-[80%] md:max-w-[80%]', 'lg:max-h-[65%] lg:max-w-[65%]']">
+				<!-- Use WidgetFlashCard based on phrase type -->
+				<Transition name="fade-slide" mode="out-in">
+					<WidgetFlashCard v-if="currentPhrase && currentPhrase.type === 'normal'"
+						:key="`normal-${currentIndex}`" ref="flashCardRef" :phrase-type="'normal'"
+						:front="currentPhrase.phrase" :back="currentPhrase.translation" :context="currentPhrase.context"
+						:translation-language="currentPhrase.translation_language" />
+
+					<WidgetFlashCard v-else-if="currentPhrase && currentPhrase.type === 'linguistic'"
+						:key="`linguistic-${currentIndex}`" ref="flashCardRef" :phrase-type="'linguistic'"
+						:front="currentPhrase.phrase"
+						:back="currentPhrase.linguistic_data?.definition || currentPhrase.phrase"
+						:context="currentPhrase.context" :direction="currentPhrase.direction"
+						:language-info="currentPhrase.language_info" :linguistic-data="currentPhrase.linguistic_data" />
+
+					<WidgetFlashCard v-else-if="currentPhrase" :key="`fallback-${currentIndex}`" ref="flashCardRef"
+						:front="currentPhrase.phrase" :back="currentPhrase.translation || 'No translation'" />
+				</Transition>
+			</div>
+
+			<!-- Leitner Controls -->
+			<section class="my-10 flex w-full max-w-2xl items-center justify-center gap-6">
+				<div class="flex flex-col items-center gap-3">
+					<Button @click="submitResult(false)" color="danger" :outline="true" rounded="lg" size="lg"
+						class="group flex h-12 w-40 items-center justify-center gap-3 px-6 shadow-sm transition-all hover:scale-[1.02] active:scale-95">
+						<template #icon>
+							<Icon name="iconify solar--close-circle-bold-duotone"
+								class="h-5 w-5 transition-transform group-hover:rotate-12" />
+						</template>
+						<span class="text-sm font-bold tracking-wide">{{ $t('smart_review.forgot') }}</span>
+					</Button>
+					<div class="text-[10px] font-bold uppercase tracking-widest text-gray-400">
+						{{ $t('smart_review.press_key_or_key', { key1: '←', key2: '1' }) }}
+					</div>
+				</div>
+
+				<div class="flex flex-col items-center gap-3">
+					<Button @click="submitResult(true)" color="success" :outline="true" rounded="lg" size="lg"
+						class="group flex h-12 w-40 items-center justify-center gap-3 px-6 shadow-sm transition-all hover:scale-[1.02] active:scale-95">
+						<template #icon>
+							<Icon name="iconify solar--check-circle-bold-duotone"
+								class="h-5 w-5 transition-transform group-hover:-rotate-12" />
+						</template>
+						<span class="text-sm font-bold tracking-wide">{{ $t('smart_review.learned') }}</span>
+					</Button>
+					<div class="text-[10px] font-bold uppercase tracking-widest text-gray-400">
+						{{ $t('smart_review.press_key_or_key', { key1: '→', key2: '2' }) }}
+					</div>
+				</div>
+			</section>
+			<div class="mt-4 flex items-center gap-2 text-[11px] font-medium text-gray-400">
+				{{ $t('smart_review.press_space_to_flip') }}
+			</div>
+		</div>
+	</MaterialPracticeToolScaffold>
+</template>
+
+<script setup lang="ts">
+import { Button, Icon } from '@codebridger/lib-vue-components/elements.ts';
+import { type PhraseType, type LeitnerItemType } from '~/types/database.type';
+
+const props = defineProps<{
+	items: LeitnerItemType[];
+	loading: boolean;
+	title: string;
+}>();
+
+const emit = defineEmits<{
+	(e: 'submit-result', phraseId: string, isCorrect: boolean): void;
+	(e: 'end-session'): void;
+}>();
+
+const currentIndex = ref(0);
+const flashCardRef = ref(null);
+
+const currentItem = computed(() => props.items[currentIndex.value]);
+const currentPhrase = computed(() => currentItem.value?.phrase as PhraseType);
+const totalItems = computed(() => props.items.length);
+
+onMounted(() => {
+	window.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('keydown', handleKeyDown);
+});
+
+function handleKeyDown(event: KeyboardEvent) {
+	if (props.loading || props.items.length === 0) return;
+
+	switch (event.code) {
+		case 'Space':
+			event.preventDefault();
+			// @ts-ignore
+			flashCardRef.value?.flipCard();
+			break;
+		case 'ArrowLeft':
+		case 'Digit1':
+		case 'Numpad1':
+			submitResult(false);
+			break;
+		case 'ArrowRight':
+		case 'Digit2':
+		case 'Numpad2':
+			submitResult(true);
+			break;
+	}
+}
+
+function submitResult(isCorrect: boolean) {
+	if (!currentPhrase.value) return;
+
+	emit('submit-result', currentPhrase.value._id, isCorrect);
+
+	if (currentIndex.value < totalItems.value - 1) {
+		currentIndex.value++;
+	} else {
+		emit('end-session');
+	}
+}
+</script>
+
+<style scoped>
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+	transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+	opacity: 0;
+	transform: translateX(30px);
+}
+
+.fade-slide-leave-to {
+	opacity: 0;
+	transform: translateX(-30px);
+}
+</style>
diff --git a/frontend/composables/useDashboardNavigatorItems.ts b/frontend/composables/useDashboardNavigatorItems.ts
index 57a5c08..280f00e 100644
--- a/frontend/composables/useDashboardNavigatorItems.ts
+++ b/frontend/composables/useDashboardNavigatorItems.ts
@@ -17,6 +17,11 @@ export const useDashboardNavigatorItems = (): Array<SidebarGroupType> => {
         {
             title: t('practice.title'),
             children: [
+                {
+                    title: t('smart_review.settings'),
+                    icon: 'IconSettings',
+                    to: '/settings/preferences',
+                },
                 {
                     title: t('activities.title'),
                     icon: 'iconify solar--rocket-2-bold-duotone',
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 9e5ca11..f968a99 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -229,6 +229,75 @@
         "recent-lectures": "Recent AI Lectures",
         "view-all": "View All"
     },
+    "smart_review": {
+        "title": "Smart Review",
+        "settings": "Smart Review Settings",
+        "settings_desc": "Configure your spaced repetition journey. Items move down the chain as you learn them.",
+        "reset_title": "Reset Smart Review",
+        "reset_confirm": "Are you sure you want to reset your entire review progress?",
+        "level": "Level",
+        "levels": "Levels",
+        "levels_active": "Levels Active",
+        "total_levels": "Total Levels",
+        "level_number": "Level {number}",
+        "target_level": "Target Level",
+        "move_to_level": "Move to Level {number}",
+        "remove_from_level": "Remove from Level {number}",
+        "add_to_level": "Add to Level {number}",
+        "auto_entry_desc": "Automatically add any new saved phrase to Level 1",
+        "progress": "Review Progress",
+        "save_confirm_desc": "You are about to update your review intervals. Existing items might be rescheduled.",
+        "total_progress": "Total Progress",
+        "collected_phrases": "Collected phrases",
+        "next_session": "Next Session",
+        "daily": "Daily",
+        "every_days_reminder": "Every {days} days reminder",
+        "step_progression": "Step progression",
+        "auto_entry": "Auto-Entry",
+        "global_daily_limit": "Global Daily Limit",
+        "max_phrases_desc": "Max phrases to review per session",
+        "review_interval": "Review Interval",
+        "session_frequency_desc": "Session frequency and time",
+        "each": "Each",
+        "day_at": "day at",
+        "cards": "Cards",
+        "entrance": "Entrance",
+        "mature": "Mature",
+        "level_retention_desc": "Level {number} of knowledge retention",
+        "interval": "Interval",
+        "days": "days",
+        "quota": "Cards Per Session",
+        "items": "items",
+        "manage": "Manage",
+        "unsaved_changes": "Unsaved changes",
+        "settings_synced": "Settings synced",
+        "reset_progress": "Reset Progress",
+        "dangerous_action": "Dangerous Action!",
+        "reset_warning": "This cannot be undone.",
+        "keep_everything": "Keep Everything",
+        "confirm_wipe": "Confirm Wipe",
+        "confirm_save": "Confirm Save",
+        "save_preferences": "Save Preferences",
+        "review_changes": "Review Changes",
+        "go_back": "Go Back",
+        "apply_now": "Apply Now",
+        "failed_save": "Failed to save settings",
+        "system_reset_success": "System has been reset.",
+        "failed_reset": "Failed to reset system",
+        "forgot": "Forgot",
+        "learned": "Learned",
+        "press_key_or_key": "Press {key1} or {key2}",
+        "press_space_to_flip": "Press Space to flip the card",
+        "search_phrases_placeholder": "Search phrases...",
+        "all_bundles": "All Bundles",
+        "loading": "Loading...",
+        "no_phrases_found": "No phrases found.",
+        "total_phrases": "Total: {count} phrases",
+        "previous": "Previous",
+        "page": "Page {page}",
+        "next": "Next",
+        "select_phrase": "Select Phrase"
+    },
     "board": {
         "no_activities": "No activities right now",
         "all_caught_up": "You are all caught up! Check back later.",
diff --git a/frontend/pages/bundles/[id].vue b/frontend/pages/bundles/[id].vue
index a232351..11e064e 100644
--- a/frontend/pages/bundles/[id].vue
+++ b/frontend/pages/bundles/[id].vue
@@ -1,161 +1,322 @@
 <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>
 
-        <!-- 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')" />
+        <!-- Standard Container -->
+        <div class="container relative mx-auto px-6 py-12 max-w-7xl">
+            <!-- Breadcrumbs -->
+            <div class="mb-8">
+                <Breadcrumb
+                    :items="[{ label: t('bundle.list_title', 'Your bundles'), to: '/bundles' }, { label: bundleStore.bundleDetail?.title || '...' }]" />
+            </div>
+
+            <!-- Bundle Info Card -->
+            <div class="mb-10">
+                <BundleDetailCard v-if="bundleStore.bundleDetail" :bundle-detail="bundleStore.bundleDetail" />
+            </div>
+
+            <!-- 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 @click="openReviewModal" variant="soft" iconName="IconOpenBook"
+                                :label="t('flashcard-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>
 
-                <!-- <Button disabled iconName="IconListCheck" :label="t('match-tool.label')" /> -->
+                        <!-- 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>
+
+                <!-- 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>
 
-                <!-- 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]"
-                    />
+                <!-- 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>
             </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>
+        </div>
+    </div>
+
+    <!-- Review Selection Modal -->
+    <Modal v-model="isReviewModalOpen" :title="t('review.select_phrases')" size="lg">
+        <div class="p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold">Select phrases to review</h3>
+                <div class="flex gap-2">
+                    <Button size="sm" variant="soft" @click="selectAllPhrases">Select All</Button>
+                    <Button size="sm" variant="soft" @click="deselectAllPhrases">Deselect All</Button>
                 </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)"
-                    />
+            <div class="max-h-[60vh] overflow-y-auto space-y-2 border rounded-lg p-2 bg-gray-50/50 dark:bg-gray-800/20">
+                <div v-if="loadingAllPhrases" class="flex justify-center p-8">
+                    <div class="h-8 w-8 animate-spin rounded-full border-4 border-primary-500 border-t-transparent">
+                    </div>
+                </div>
+
+                <div v-else-if="allBundlePhrases.length === 0"
+                    class="flex flex-col items-center justify-center p-8 text-gray-500">
+                    <div class="text-2xl mb-2">📭</div>
+                    <p class="text-sm">No phrases found in this bundle.</p>
+                </div>
+
+                <div v-else v-for="phrase in allBundlePhrases" :key="phrase._id"
+                    class="group flex items-center gap-3 p-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 hover:border-primary/30 dark:hover:border-primary/30 hover:shadow-sm transition-all cursor-pointer"
+                    @click="togglePhraseSelection(phrase._id)">
+                    <div class="relative flex items-center justify-center">
+                        <input type="checkbox" :checked="selectedPhraseIds.includes(phrase._id)"
+                            class="peer h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary transition-colors cursor-pointer" />
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <div
+                            class="font-medium text-gray-900 dark:text-gray-100 truncate group-hover:text-primary transition-colors">
+                            {{ phrase.phrase }}</div>
+                        <div class="text-sm text-gray-500 truncate">{{ phrase.translation }}</div>
+                    </div>
                 </div>
             </div>
-        </section>
-    </div>
+
+            <div class="mt-6 flex justify-end gap-3">
+                <Button variant="soft" @click="isReviewModalOpen = false">Cancel</Button>
+                <Button color="primary" @click="startReview" :disabled="selectedPhraseIds.length === 0">
+                    Start Review ({{ selectedPhraseIds.length }})
+                </Button>
+            </div>
+        </div>
+    </Modal>
 </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, Modal } from '@codebridger/lib-vue-components/complex.ts';
+import Breadcrumb from '~/components/common/Breadcrumb.vue';
+import { useBundleStore } from '@/stores/bundle';
+import { useLeitnerStore } from '@/stores/leitner';
+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 leitnerStore = useLeitnerStore();
+const route = useRoute();
+const id = ref(route.params.id?.toString() || '');
+const isBundleDetailLoading = ref(false);
+const isPhraseListLoading = ref(false);
+const isLiveSessionModalOpen = ref(false);
+
+// Review Modal State
+const isReviewModalOpen = ref(false);
+const selectedPhraseIds = ref<string[]>([]);
+const allBundlePhrases = ref<any[]>([]);
+const loadingAllPhrases = 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();
+});
+
+function fetchPhraseList(page: number = 1) {
+    isPhraseListLoading.value = true;
+
+    bundleStore.fetchPhrases(page).finally(() => {
+        isPhraseListLoading.value = false;
     });
+}
+
+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);
+}
+
+function handleFreemiumAddPhrase() {
+    // User is not at limit yet, so add the phrase
+    bundleStore.addEmptyTemporarilyPhrase();
+}
+
+async function openReviewModal() {
+    isReviewModalOpen.value = true;
+    loadingAllPhrases.value = true;
 
-    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);
-                });
+    // Fetch all phrases for the bundle (not just paginated) for selection
+    // Note: bundleStore.fetchPhrases updates store state. 
+    // If we want ALL phrases, we might need a separate call or handle pagination manually.
+    // For now, assuming bundle items are reasonable count, or we use store's logic.
+    // Ideally backend supports "getAll" or we iterate. 
+    // Given current store logic, let's use what we have or add a helper.
+    // If we just need IDs for this modal, maybe we can fetch IDs?
+
+    // Current workaround: Fetch all (assuming small bundle) or just use current page + option to fetch more?
+    // User requirement: "All option".
+    // We should probably fetch all phrases for this bundle.
+    // Since bundleStore.fetchPhrases sets pagination, maybe we can fetch with big limit?
+    // Or add a specialized store action.
+    // Let's assume for now we can fetch with page 1 and large limit using the store's underlying logic, 
+    // OR just use existing store items if fully loaded.
+
+    // Let's implement a quick fetch for *all* phrases just for this modal.
+    try {
+        if (!bundleStore.bundleDetail) {
+            console.error("Bundle detail not loaded");
+            return;
         }
-    });
 
-    onBeforeRouteLeave(() => {
-        bundleStore.clear();
-    });
+        const phraseIds = bundleStore.bundleDetail.phrases;
+
+        if (phraseIds.length === 0) {
+            allBundlePhrases.value = [];
+            selectedPhraseIds.value = [];
+            return;
+        }
 
-    function fetchPhraseList(page: number = 1) {
-        isPhraseListLoading.value = true;
+        // Fetch details for all phrases using dataProvider
+        const { dataProvider } = await import('@modular-rest/client');
+        const { COLLECTIONS, DATABASE } = await import('~/types/database.type');
 
-        bundleStore.fetchPhrases(page).finally(() => {
-            isPhraseListLoading.value = false;
+        const phrases = await dataProvider.findByIds<any>({
+            database: DATABASE.USER_CONTENT,
+            collection: COLLECTIONS.PHRASE,
+            ids: phraseIds,
+            accessQuery: {
+                refId: profileStore.userDetail?._id || profileStore.userDetail?.refId, // robust access
+            },
         });
-    }
 
-    function handleStartLiveSession(sessionData: LivePracticeSessionSetupType) {
-        // convert sessionData to base64
-        const sessionDataBase64 = btoa(JSON.stringify(sessionData));
+        allBundlePhrases.value = phrases;
+        selectedPhraseIds.value = allBundlePhrases.value.map(p => p._id);
 
-        // Uerl should not be include # at the beginning
-        const url = `/practice/live-session-${id.value}?sessionData=${sessionDataBase64}`;
-        router.push(url);
+    } catch (e) {
+        console.error("Failed to load bundle phrases for review:", e);
+    } finally {
+        loadingAllPhrases.value = false;
     }
+}
+
+function selectAllPhrases() {
+    selectedPhraseIds.value = allBundlePhrases.value.map(p => p._id);
+}
+
+function deselectAllPhrases() {
+    selectedPhraseIds.value = [];
+}
 
-    function handleFreemiumAddPhrase() {
-        // User is not at limit yet, so add the phrase
-        bundleStore.addEmptyTemporarilyPhrase();
+function togglePhraseSelection(phraseId: string) {
+    if (selectedPhraseIds.value.includes(phraseId)) {
+        selectedPhraseIds.value = selectedPhraseIds.value.filter(id => id !== phraseId);
+    } else {
+        selectedPhraseIds.value.push(phraseId);
     }
+}
+
+function startReview() {
+    leitnerStore.setPendingBundleReview(selectedPhraseIds.value);
+    router.push('/practice/bundle-review');
+    isReviewModalOpen.value = false;
+}
+
 </script>
diff --git a/frontend/pages/bundles/index.vue b/frontend/pages/bundles/index.vue
index 08061c8..3673414 100644
--- a/frontend/pages/bundles/index.vue
+++ b/frontend/pages/bundles/index.vue
@@ -1,123 +1,136 @@
 <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>
-
-            <!-- Right section -->
-            <div>
-                <BundleAddNew />
-            </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 -->
+            <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" />
+                    </div>
+                    <div>
+                        <BundleAddNew />
+                    </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">
+                    <!-- 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>
 
-        <!-- 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 />
+                    <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>
 
 <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';
+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 { t } = useI18n();
 
-    const error = ref<string | null>(null);
+const error = ref<string | null>(null);
 
-    definePageMeta({
-        layout: 'default',
-        title: () => t('bundle.list'),
-        // @ts-ignore
-        middleware: ['auth'],
-    });
+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 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,
-                },
+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,
             },
-        }
-    );
+        },
+    },
+    {
+        limit: perPage.value,
+        page: 1,
+        onFetched: (data) => {
+            bundleList.value = data;
+            pagination.value = controller.pagination;
+        },
+    }
+);
 
-    onMounted(async () => {
-        isLoading.value = true;
+onMounted(async () => {
+    isLoading.value = true;
 
-        try {
-            // update pagination
-            await controller.updatePagination();
-            // fetch first page
-            await controller.fetchPage(1);
-        } catch (error) {
-            isLoading.value = false;
-        }
-    });
+    try {
+        // update pagination
+        await controller.updatePagination();
+        // fetch first page
+        await controller.fetchPage(1);
+    } catch (error) {
+        isLoading.value = false;
+    }
+});
 </script>
diff --git a/frontend/pages/practice/bundle-review.vue b/frontend/pages/practice/bundle-review.vue
new file mode 100644
index 0000000..2b9f1e9
--- /dev/null
+++ b/frontend/pages/practice/bundle-review.vue
@@ -0,0 +1,46 @@
+<template>
+	<LeitnerReviewSession :items="items" :loading="loading" :title="$t('review.bundle_review')"
+		@submit-result="handleSubmitResult" @end-session="endSession" />
+</template>
+
+<script setup lang="ts">
+import { useLeitnerStore } from '~/stores/leitner';
+import { storeToRefs } from 'pinia';
+import LeitnerReviewSession from '~/components/practice/LeitnerReviewSession.vue';
+
+definePageMeta({
+	// @ts-ignore
+	layout: 'empty',
+	middleware: ['auth'],
+});
+
+const router = useRouter();
+const leitnerStore = useLeitnerStore();
+const { customReviewSessionItems, pendingBundleReviewIds } = storeToRefs(leitnerStore);
+
+const loading = ref(true);
+const items = computed(() => customReviewSessionItems.value);
+
+onMounted(async () => {
+	if (pendingBundleReviewIds.value.length === 0) {
+		// If no items pending, redirect back (or handle empty state)
+		router.push('/bundles');
+		return;
+	}
+
+	loading.value = true;
+	await leitnerStore.fetchCustomReviewSession(pendingBundleReviewIds.value);
+	loading.value = false;
+});
+
+async function handleSubmitResult(phraseId: string, isCorrect: boolean) {
+	await leitnerStore.submitReview(phraseId, isCorrect);
+}
+
+function endSession() {
+	// Return to previous page or bundle detail?
+	router.back();
+}
+</script>
+
+<style scoped></style>
diff --git a/frontend/pages/practice/review.vue b/frontend/pages/practice/review.vue
index 7ac0613..b092736 100644
--- a/frontend/pages/practice/review.vue
+++ b/frontend/pages/practice/review.vue
@@ -1,85 +1,12 @@
 <template>
-    <MaterialPracticeToolScaffold :title="$t('review.title')" :activePhrase="currentIndex + 1"
-        :totalPhrases="totalItems" bundleId="leitner" @end-session="endSession">
-        <div v-if="loading" class="flex h-full w-full items-center justify-center">
-            <div class="h-8 w-8 animate-spin rounded-full border-4 border-primary-500 border-t-transparent"></div>
-        </div>
-
-        <div v-else-if="items.length === 0"
-            class="flex h-full w-full flex-col items-center justify-center p-8 text-center">
-            <Icon name="iconify solar--confetti-bold-duotone" class="mb-4 text-6xl text-success-500" />
-            <h2 class="text-2xl font-bold">{{ $t('board.all_caught_up') }}</h2>
-            <Button class="mt-6" @click="endSession" variant="soft">{{ $t('board.back_to_board') }}</Button>
-        </div>
-
-        <div v-else class="flex h-full w-full flex-col items-center p-5 md:px-16 md:py-14">
-            <div
-                :class="['w-full flex-1 transition-all duration-300 ease-in-out', 'md:max-h-[80%] md:max-w-[80%]', 'lg:max-h-[65%] lg:max-w-[65%]']">
-                <!-- Use WidgetFlashCard based on phrase type -->
-                <Transition name="fade-slide" mode="out-in">
-                    <WidgetFlashCard v-if="currentPhrase && currentPhrase.type === 'normal'"
-                        :key="`normal-${currentIndex}`" ref="flashCardRef" :phrase-type="'normal'"
-                        :front="currentPhrase.phrase" :back="currentPhrase.translation" :context="currentPhrase.context"
-                        :translation-language="currentPhrase.translation_language" />
-
-                    <WidgetFlashCard v-else-if="currentPhrase && currentPhrase.type === 'linguistic'"
-                        :key="`linguistic-${currentIndex}`" ref="flashCardRef" :phrase-type="'linguistic'"
-                        :front="currentPhrase.phrase"
-                        :back="currentPhrase.linguistic_data?.definition || currentPhrase.phrase"
-                        :context="currentPhrase.context" :direction="currentPhrase.direction"
-                        :language-info="currentPhrase.language_info" :linguistic-data="currentPhrase.linguistic_data" />
-
-                    <WidgetFlashCard v-else-if="currentPhrase" :key="`fallback-${currentIndex}`" ref="flashCardRef"
-                        :front="currentPhrase.phrase" :back="currentPhrase.translation || 'No translation'" />
-                </Transition>
-            </div>
-
-            <!-- Leitner Controls -->
-            <section class="my-10 flex w-full max-w-2xl items-center justify-center gap-6">
-                <div class="flex flex-col items-center gap-3">
-                    <Button @click="submitResult(false)" color="danger" :outline="true" rounded="lg" size="lg"
-                        class="group flex h-12 w-40 items-center justify-center gap-3 px-6 shadow-sm transition-all hover:scale-[1.02] active:scale-95">
-                        <template #icon>
-                            <Icon name="iconify solar--close-circle-bold-duotone"
-                                class="h-5 w-5 transition-transform group-hover:rotate-12" />
-                        </template>
-                        <span class="text-sm font-bold tracking-wide">Forgot</span>
-                    </Button>
-                    <div class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Press
-                        <span class="rounded bg-gray-100 px-2 py-0.5 font-mono text-gray-500 shadow-sm">←</span>
-                        or 1
-                    </div>
-                </div>
-
-                <div class="flex flex-col items-center gap-3">
-                    <Button @click="submitResult(true)" color="success" :outline="true" rounded="lg" size="lg"
-                        class="group flex h-12 w-40 items-center justify-center gap-3 px-6 shadow-sm transition-all hover:scale-[1.02] active:scale-95">
-                        <template #icon>
-                            <Icon name="iconify solar--check-circle-bold-duotone"
-                                class="h-5 w-5 transition-transform group-hover:-rotate-12" />
-                        </template>
-                        <span class="text-sm font-bold tracking-wide">Learned</span>
-                    </Button>
-                    <div class="text-[10px] font-bold uppercase tracking-widest text-gray-400">Press
-                        <span class="rounded bg-gray-100 px-2 py-0.5 font-mono text-gray-500 shadow-sm">→</span>
-                        or 2
-                    </div>
-                </div>
-            </section>
-            <div class="mt-4 flex items-center gap-2 text-[11px] font-medium text-gray-400">
-                Press
-                <span class="rounded bg-gray-100 px-2 py-0.5 font-mono text-gray-500 shadow-sm">Space</span>
-                <span>to flip the card</span>
-            </div>
-        </div>
-    </MaterialPracticeToolScaffold>
+    <LeitnerReviewSession :items="items" :loading="loading" :title="$t('review.title')"
+        @submit-result="handleSubmitResult" @end-session="endSession" />
 </template>
 
 <script setup lang="ts">
 import { useLeitnerStore } from '~/stores/leitner';
-import { IconButton, Button, Icon } from '@codebridger/lib-vue-components/elements.ts';
-import { type PhraseType } from '~/types/database.type';
 import { storeToRefs } from 'pinia';
+import LeitnerReviewSession from '~/components/practice/LeitnerReviewSession.vue';
 
 definePageMeta({
     // @ts-ignore
@@ -92,64 +19,16 @@ const leitnerStore = useLeitnerStore();
 const { reviewSessionItems } = storeToRefs(leitnerStore);
 
 const loading = ref(true);
-const currentIndex = ref(0);
-
 const items = computed(() => reviewSessionItems.value);
-const totalItems = computed(() => items.value.length);
-
-const currentItem = computed(() => items.value[currentIndex.value]);
-const currentPhrase = computed(() => currentItem.value?.phrase as PhraseType);
-
-const flashCardRef = ref(null);
 
 onMounted(async () => {
     loading.value = true;
-    const res = await leitnerStore.fetchReviewSession(20); // Default limit
+    await leitnerStore.fetchReviewSession(20);
     loading.value = false;
-
-    window.addEventListener('keydown', handleKeyDown);
 });
 
-onUnmounted(() => {
-    window.removeEventListener('keydown', handleKeyDown);
-});
-
-function handleKeyDown(event: KeyboardEvent) {
-    if (loading.value || items.value.length === 0) return;
-
-    switch (event.code) {
-        case 'Space':
-            event.preventDefault();
-            // @ts-ignore
-            flashCardRef.value?.flipCard();
-            break;
-        case 'ArrowLeft':
-        case 'Digit1':
-        case 'Numpad1':
-            submitResult(false);
-            break;
-        case 'ArrowRight':
-        case 'Digit2':
-        case 'Numpad2':
-            submitResult(true);
-            break;
-    }
-}
-
-async function submitResult(isCorrect: boolean) {
-    if (!currentPhrase.value) return;
-
-    // Submit to store/API
-    const phraseId = currentPhrase.value._id;
+async function handleSubmitResult(phraseId: string, isCorrect: boolean) {
     await leitnerStore.submitReview(phraseId, isCorrect);
-
-    // Move to next
-    if (currentIndex.value < totalItems.value - 1) {
-        currentIndex.value++;
-    } else {
-        // Finished session
-        endSession();
-    }
 }
 
 function endSession() {
@@ -157,6 +36,10 @@ function endSession() {
 }
 </script>
 
+<style scoped>
+/* Scoped styles moved to component or can be removed if specific page styling needed */
+</style>
+
 <style scoped>
 .fade-slide-enter-active,
 .fade-slide-leave-active {
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/preferences.vue b/frontend/pages/settings/preferences.vue
index 293e8a3..62d6171 100644
--- a/frontend/pages/settings/preferences.vue
+++ b/frontend/pages/settings/preferences.vue
@@ -3,7 +3,7 @@
     <div class="flex flex-col gap-8">
       <Card class="w-full rounded-lg border border-gray-100 shadow-sm">
         <div class="flex flex-col gap-6 p-4">
-          <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Leitner System Preferences</h2>
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white">{{ t('smart_review.title') }}</h2>
 
           <div v-if="loading" class="flex justify-center p-8">
             <span class="text-gray-500">Loading settings...</span>
@@ -22,6 +22,9 @@ import LeitnerSettings from '~/components/Leitner/LeitnerSettings.vue';
 import { functionProvider } from "@modular-rest/client";
 import { useProfileStore } from '~/stores/profile';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 definePageMeta({
   layout: 'default',
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>
diff --git a/frontend/stores/leitner.ts b/frontend/stores/leitner.ts
index 3253f46..aefd1d6 100644
--- a/frontend/stores/leitner.ts
+++ b/frontend/stores/leitner.ts
@@ -4,9 +4,13 @@ import { type BoardActivityType, type LeitnerItemType } from '~/types/database.t
 import { analytic } from '~/plugins/mixpanel';
 
 export const useLeitnerStore = defineStore('leitner', () => {
+	// State
 	// State
 	const boardActivities = ref<BoardActivityType[]>([]);
 	const reviewSessionItems = ref<LeitnerItemType[]>([]);
+	const customReviewSessionItems = ref<LeitnerItemType[]>([]);
+	const pendingBundleReviewIds = ref<string[]>([]);
+	const stats = ref<any>(null);
 
 	// Actions
 
@@ -66,6 +70,21 @@ export const useLeitnerStore = defineStore('leitner', () => {
 		}
 	}
 
+	async function fetchCustomReviewSession(phraseIds: string[]) {
+		try {
+			const items = await functionProvider.run({
+				name: 'get-custom-review-session',
+				args: { phraseIds, userId: authUser.value?.id }
+			}) as LeitnerItemType[];
+
+			customReviewSessionItems.value = items || [];
+			return items;
+		} catch (error) {
+			console.error('Failed to fetch custom review session:', error);
+			return [];
+		}
+	}
+
 	async function submitReview(phraseId: string, isCorrect: boolean) {
 		try {
 			await functionProvider.run({
@@ -82,12 +101,34 @@ export const useLeitnerStore = defineStore('leitner', () => {
 		}
 	}
 
+	function setPendingBundleReview(phraseIds: string[]) {
+		pendingBundleReviewIds.value = phraseIds;
+	}
+
+	async function fetchStats() {
+		try {
+			const res = await functionProvider.run({
+				name: 'get-stats',
+				args: { userId: authUser.value?.id }
+			});
+			stats.value = res;
+		} catch (error) {
+			console.error('Failed to fetch stats:', error);
+		}
+	}
+
 	return {
 		boardActivities,
 		reviewSessionItems,
+		customReviewSessionItems,
+		pendingBundleReviewIds,
 		fetchBoard,
 		consumeActivity,
 		fetchReviewSession,
-		submitReview
+		fetchCustomReviewSession,
+		submitReview,
+		setPendingBundleReview,
+		stats,
+		fetchStats
 	};
 });
diff --git a/server/src/modules/leitner_box/functions.ts b/server/src/modules/leitner_box/functions.ts
index 184fa01..9f2516d 100644
--- a/server/src/modules/leitner_box/functions.ts
+++ b/server/src/modules/leitner_box/functions.ts
@@ -130,6 +130,20 @@ const getPhraseManagementInfo = defineFunction({
 	},
 });
 
+const getCustomReviewSession = defineFunction({
+	name: "get-custom-review-session",
+	permissionTypes: ["user_access"],
+	callback: async (context) => {
+		const { phraseIds, userId } = context;
+		if (!userId) throw new Error("Unauthorized");
+		if (!Array.isArray(phraseIds)) throw new Error("phraseIds must be an array");
+
+		await LeitnerService.ensureInitialized(userId);
+
+		return LeitnerService.getCustomReviewItems(userId, phraseIds as string[]);
+	},
+});
+
 module.exports.functions = [
 	getReviewSession,
 	submitReview,
@@ -140,4 +154,5 @@ module.exports.functions = [
 	addPhraseToBox,
 	removePhraseFromBox,
 	getPhraseManagementInfo,
+	getCustomReviewSession,
 ];
diff --git a/server/src/modules/leitner_box/service.ts b/server/src/modules/leitner_box/service.ts
index c5bfcd2..9be6739 100644
--- a/server/src/modules/leitner_box/service.ts
+++ b/server/src/modules/leitner_box/service.ts
@@ -117,6 +117,38 @@ export class LeitnerService {
     }).filter((item: any) => item.phrase);
   }
 
+  static async getCustomReviewItems(userId: string, phraseIds: string[]) {
+    const system = await this.getSystem(userId);
+    const items = system?.items || [];
+    const now = new Date();
+
+    const selectedItems: LeitnerItem[] = phraseIds.map((id) => {
+      const existing = items.find((i: LeitnerItem) => i.phraseId.toString() === id.toString());
+      if (existing) return existing;
+
+      return {
+        phraseId: id,
+        boxLevel: 1,
+        nextReviewDate: now,
+        lastAttemptDate: new Date(0),
+        consecutiveIncorrect: 0,
+      } as unknown as LeitnerItem;
+    });
+
+    const phraseCollection = await getCollection(DATABASE, PHRASE_COLLECTION);
+    const phrases = await phraseCollection.find({ _id: { $in: phraseIds } });
+
+    return selectedItems
+      .map((item: LeitnerItem) => {
+        const phrase = phrases.find((p: any) => p._id.toString() === item.phraseId.toString());
+        return {
+          ...item,
+          phrase,
+        };
+      })
+      .filter((item: any) => item.phrase);
+  }
+
   static async getDueCount(userId: string): Promise<number> {
     const system = await this.getSystem(userId);
     if (!system) return 0;