diff --git a/frontend/.cursor/rules/development-guideline.mdc b/frontend/.cursor/rules/development-guideline.mdc
new file mode 100644
index 0000000..ffe4bab
--- /dev/null
+++ b/frontend/.cursor/rules/development-guideline.mdc
@@ -0,0 +1,163 @@
+---
+description: Main guideline for frontend development guideline include all consideration of the project.
+alwaysApply: false
+---
+# Development Guideline for LLM
+
+## Project Overview
+Nuxt 3 frontend app for Subturtle Dashboard (language learning platform). Uses Vue 3 Composition API, TypeScript, and modular architecture.
+
+## Key Technologies
+- **Framework**: Nuxt 3 with Vue 3 Composition API
+- **UI Library**: `@codebridger/lib-vue-components` - ALWAYS fetch docs from: https://codebridger.github.io/lib-vue-components/llm.md
+- **Backend Client**: `@modular-rest/client` - ALWAYS fetch docs from:
+ - https://modular-rest.github.io/modular-rest/js-client/install.html
+ - https://modular-rest.github.io/modular-rest/js-client/authentication.html
+ - https://modular-rest.github.io/modular-rest/js-client/data-provider.html
+ - https://modular-rest.github.io/modular-rest/js-client/file-provider.html
+- **Styling**: Tailwind CSS
+- **State**: Pinia stores
+- **HTTP**: Use `node-fetch` (NOT axios)
+
+## Project Structure
+```
+components/ # Vue components (organized by feature)
+composables/ # Vue composables
+pages/ # Nuxt pages
+stores/ # Pinia stores
+types/ # TypeScript types
+utils/ # Utility functions
+plugins/ # Nuxt plugins
+middleware/ # Route middleware
+```
+
+## Coding Standards
+
+### Component Structure
+```vue
+
+
+
+
+
+
+
+```
+
+### API Integration
+```typescript
+import { authentication, dataProvider } from '@modular-rest/client';
+import { DATABASE, COLLECTIONS } from '~/types/database.type';
+
+// Authentication
+await authentication.login(email, password);
+await authentication.loginWithLastSession();
+
+// Data operations
+const data = await dataProvider.find({
+ database: DATABASE.USER_CONTENT,
+ collection: COLLECTIONS.PHRASE_BUNDLE,
+ query: { refId: authUser.value?.id }
+});
+```
+
+### Store Pattern
+```typescript
+export const useStore = defineStore('store', () => {
+ const state = ref({});
+ const actions = {
+ async fetchData() {
+ // API calls here
+ }
+ };
+ return { ...toRefs(state), ...actions };
+});
+```
+
+## Key Patterns
+
+### Authentication
+- Use `authUser` and `isLogin` from `~/utils/auth.ts`
+- Implement auth middleware for protected routes
+- Handle session restoration on app load
+
+### Form Validation
+```typescript
+import { useForm } from 'vee-validate';
+import * as yup from 'yup';
+
+const { errors, defineField } = useForm({
+ validationSchema: yup.object({
+ title: yup.string().required()
+ })
+});
+```
+
+### Error Handling
+- Always wrap API calls in try-catch
+- Use proper error states in components
+- Implement global error handling
+
+### Internationalization
+```typescript
+const { t } = useI18n();
+// Use t('key') for translations
+```
+
+## File Naming
+- Components: PascalCase (`UserProfile.vue`)
+- Pages: kebab-case (`user-profile.vue`)
+- Composables: camelCase with `use` prefix (`useUserData.ts`)
+- Types: camelCase with `.type.ts` suffix (`user.type.ts`)
+
+## Testing Integration
+- When creating/improving features, ALWAYS consider testing
+- Create or update test files accordingly
+- Follow existing test patterns in the project
+
+## Critical Rules
+1. **ALWAYS** use `@codebridger/lib-vue-components` for UI elements
+2. **ALWAYS** use `@modular-rest/client` for API calls
+3. **NEVER** use axios - use `node-fetch` instead
+4. **ALWAYS** use TypeScript for type safety
+5. **ALWAYS** use Vue 3 Composition API with `