 messages/en.json                                   |  422 +++++++
 messages/ja.json                                   |  422 +++++++
 messages/translation-todo.json                     | 1258 ++++++++++++++++++++
 next.config.ts                                     |    5 +-
 package.json                                       |    3 +-
 src/app/about/page.tsx                             |   31 +-
 src/app/dashboard/billing/page.tsx                 |   11 +-
 src/app/dashboard/exclusive/page.tsx               |    8 +-
 src/app/dashboard/forms/advanced/page.tsx          |    6 +-
 src/app/dashboard/forms/basic/page.tsx             |    6 +-
 src/app/dashboard/forms/multi-step/page.tsx        |    4 +-
 src/app/dashboard/forms/sheet-form/page.tsx        |    6 +-
 src/app/dashboard/overview/@area_stats/error.tsx   |    4 +-
 src/app/dashboard/overview/@bar_stats/error.tsx    |    8 +-
 src/app/dashboard/overview/@pie_stats/error.tsx    |    4 +-
 src/app/dashboard/overview/@sales/error.tsx        |    4 +-
 src/app/dashboard/overview/error.tsx               |    4 +-
 src/app/dashboard/overview/layout.tsx              |   20 +-
 src/app/dashboard/product/page.tsx                 |    6 +-
 src/app/dashboard/react-query/page.tsx             |    6 +-
 src/app/dashboard/users/page.tsx                   |    6 +-
 src/app/dashboard/workspaces/page.tsx              |    6 +-
 .../dashboard/workspaces/team/[[...rest]]/page.tsx |    6 +-
 src/app/layout.tsx                                 |    5 +
 src/app/not-found.tsx                              |   10 +-
 src/app/privacy-policy/page.tsx                    |   38 +-
 src/app/terms-of-service/page.tsx                  |   49 +-
 src/components/file-uploader.tsx                   |    4 +-
 src/components/forms/demo-form.tsx                 |   80 +-
 src/components/layout/user-nav.tsx                 |   10 +-
 src/components/modal/alert-modal.tsx               |   10 +-
 src/components/nav-main.tsx                        |    4 +-
 src/components/nav-projects.tsx                    |    6 +-
 src/components/nav-user.tsx                        |    6 +-
 src/components/org-switcher.tsx                    |   14 +-
 src/components/themes/theme-mode-toggle.tsx        |    4 +-
 src/components/themes/theme-selector.tsx           |   10 +-
 src/components/ui/breadcrumb.tsx                   |    7 +-
 src/components/ui/dialog.tsx                       |    4 +-
 src/components/ui/info-button.tsx                  |    6 +-
 src/components/ui/infobar.tsx                      |   14 +-
 src/components/ui/pagination.tsx                   |   17 +-
 src/components/ui/sheet.tsx                        |    4 +-
 src/components/ui/sidebar.tsx                      |   14 +-
 src/components/ui/spinner.tsx                      |    4 +-
 .../ui/table/data-table-faceted-filter.tsx         |    4 +-
 src/components/ui/table/data-table-pagination.tsx  |   12 +-
 .../ui/table/data-table-slider-filter.tsx          |    8 +-
 .../ui/table/data-table-view-options.tsx           |    8 +-
 src/features/auth/components/sign-in-view.tsx      |   11 +-
 src/features/auth/components/sign-up-view.tsx      |   13 +-
 src/features/auth/components/user-auth-form.tsx    |    6 +-
 src/features/chat/components/chat-header.tsx       |    8 +-
 src/features/chat/components/conversation-list.tsx |   12 +-
 .../chat/components/conversation-select.tsx        |    8 +-
 src/features/chat/components/message-composer.tsx  |   10 +-
 .../elements/components/icons-view-page.tsx        |    6 +-
 .../forms/components/advanced-form-patterns.tsx    |   51 +-
 src/features/forms/components/sheet-form-demo.tsx  |   52 +-
 .../forms/components/sheet-product-form.tsx        |   10 +-
 .../kanban/components/kanban-view-page.tsx         |    6 +-
 src/features/kanban/components/new-task-dialog.tsx |   14 +-
 .../components/notification-center.tsx             |    6 +-
 .../components/notifications-page.tsx              |    8 +-
 src/features/overview/components/area-graph.tsx    |    4 +-
 src/features/overview/components/bar-graph.tsx     |    4 +-
 src/features/overview/components/overview.tsx      |   26 +-
 src/features/overview/components/pie-graph.tsx     |    4 +-
 src/features/overview/components/recent-sales.tsx  |    6 +-
 src/features/products/components/product-form.tsx  |   24 +-
 .../components/product-tables/cell-action.tsx      |    6 +-
 .../products/components/product-view-page.tsx      |    7 +-
 .../react-query-demo/components/pokemon-info.tsx   |    6 +-
 src/features/users/components/user-form-sheet.tsx  |   26 +-
 .../users/components/users-table/cell-action.tsx   |    6 +-
 src/i18n/request.ts                                |   11 +
 76 files changed, 2594 insertions(+), 365 deletions(-)

diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 0000000..1647dfd
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,422 @@
+{
+  "advanced_form_patterns": {
+    "account": "Account",
+    "async_validation_linked_fields": "Async validation, linked fields",
+    "choose_a_username": "Choose a username",
+    "country": "Country",
+    "demonstrates_async_validation_linked_fie": "Demonstrates async validation, linked fields, nested objects, dynamic arrays, listeners, form-level errors, and scroll-to-first-error.",
+    "dynamic_array_rows_with_add_remove": "Dynamic array rows with add / remove",
+    "e_g_alpha_squad": "e.g. Alpha Squad",
+    "email": "Email",
+    "listener_side_effects_country_resets_sta": "Listener side effects — country resets state",
+    "members": "Members",
+    "min_8_characters": "Min 8 characters",
+    "nested_objects_with_dot_notation_paths": "Nested objects with dot-notation paths",
+    "password": "Password",
+    "preferences": "Preferences",
+    "register_team": "Register Team",
+    "reset": "Reset",
+    "select_a_country": "Select a country",
+    "state_region": "State / Region",
+    "team_info": "Team Info",
+    "team_name": "Team Name",
+    "team_registration": "Team Registration",
+    "team_size": "Team Size",
+    "username": "Username",
+    "you_example_com": "you@example.com"
+  },
+  "alert_modal": {
+    "are_you_sure": "Are you sure?",
+    "cancel": "Cancel",
+    "continue": "Continue",
+    "this_action_cannot_be_undone": "This action cannot be undone."
+  },
+  "area_graph": {
+    "showing_total_visitors_for_the_last_6_mo": "Showing total visitors for the last 6 months"
+  },
+  "bar_graph": {
+    "january_june_2025": "January - June 2025"
+  },
+  "breadcrumb": {
+    "breadcrumb": "breadcrumb",
+    "more": "More"
+  },
+  "cell_action": {
+    "actions": "Actions",
+    "open_menu": "Open menu"
+  },
+  "chat_header": {
+    "open_conversation_menu": "Open conversation menu",
+    "start_audio_call": "Start audio call",
+    "start_video_call": "Start video call"
+  },
+  "columns": {
+    "category": "Category",
+    "name": "Name",
+    "role": "Role"
+  },
+  "conversation_list": {
+    "conversation_list": "Conversation list",
+    "live": "Live",
+    "messenger": "Messenger",
+    "search_conversations": "Search conversations"
+  },
+  "conversation_select": {
+    "conversation": "Conversation",
+    "live": "Live",
+    "messenger": "Messenger"
+  },
+  "data_table_faceted_filter": {
+    "no_results_found": "No results found."
+  },
+  "data_table_pagination": {
+    "go_to_first_page": "Go to first page",
+    "go_to_last_page": "Go to last page",
+    "go_to_next_page": "Go to next page",
+    "go_to_previous_page": "Go to previous page",
+    "rows_per_page": "Rows per page"
+  },
+  "data_table_slider_filter": {
+    "clear": "Clear",
+    "from": "From",
+    "to": "to"
+  },
+  "data_table_view_options": {
+    "no_columns_found": "No columns found.",
+    "search_columns": "Search columns...",
+    "toggle_columns": "Toggle columns"
+  },
+  "demo_form": {
+    "add": "Add",
+    "age": "Age",
+    "all_form_inputs_demo": "All Form Inputs Demo",
+    "bio": "Bio",
+    "checkbox_radio": "Checkbox & Radio",
+    "country": "Country",
+    "date_time": "Date & Time",
+    "drag_drop_or_click_to_upload_max_5mb": "Drag & drop or click to upload (max 5MB)",
+    "email": "Email",
+    "every_possible_form_input_built_with_tan": "Every possible form input — built with TanStack Form + shadcn/ui",
+    "file_upload": "File Upload",
+    "form_data_preview": "Form Data Preview",
+    "full_name": "Full Name",
+    "gender": "Gender",
+    "https_example_com": "https://example.com",
+    "john_doe": "John Doe",
+    "john_example_com": "john@example.com",
+    "min_8_characters": "Min 8 characters",
+    "no_framework_found": "No framework found.",
+    "overall_rating": "Overall Rating",
+    "password": "Password",
+    "phone": "Phone",
+    "profile_picture": "Profile Picture",
+    "rate_your_experience_0_10": "Rate your experience (0-10)",
+    "receive_updates_about_new_features_and_p": "Receive updates about new features and products",
+    "reset": "Reset",
+    "search": "Search...",
+    "select_combobox": "Select & Combobox",
+    "select_your_country": "Select your country",
+    "slider": "Slider",
+    "special_inputs": "Special Inputs",
+    "submit_form": "Submit Form",
+    "subscribe_to_newsletter": "Subscribe to Newsletter",
+    "tell_us_about_yourself": "Tell us about yourself...",
+    "text_inputs": "Text Inputs",
+    "toggle_switch": "Toggle & Switch",
+    "type_and_press_enter": "Type and press Enter...",
+    "website": "Website"
+  },
+  "dialog": {
+    "close": "Close"
+  },
+  "error": {
+    "error": "Error",
+    "try_again": "Try again",
+    "unable_to_display_statistics_at_this_tim": "Unable to display statistics at this time"
+  },
+  "file_uploader": {
+    "remove_file": "Remove file"
+  },
+  "icons_view_page": {
+    "icons": "Icons",
+    "search_icons": "Search icons..."
+  },
+  "info_button": {
+    "show_information": "Show information"
+  },
+  "infobar": {
+    "close_info_panel": "Close info panel",
+    "displays_the_mobile_infobar": "Displays the mobile infobar.",
+    "infobar": "Infobar",
+    "toggle_infobar": "Toggle Infobar"
+  },
+  "kanban_view_page": {
+    "kanban": "Kanban",
+    "manage_tasks_with_drag_and_drop": "Manage tasks with drag and drop"
+  },
+  "layout": {
+    "acquisition_needs_attention": "Acquisition needs attention",
+    "active_accounts": "Active Accounts",
+    "engagement_exceed_targets": "Engagement exceed targets",
+    "growth_rate": "Growth Rate",
+    "hi_welcome_back": "Hi, Welcome back 👋",
+    "meets_growth_projections": "Meets growth projections",
+    "new_customers": "New Customers",
+    "total_revenue": "Total Revenue",
+    "visitors_for_the_last_6_months": "Visitors for the last 6 months"
+  },
+  "message_composer": {
+    "attach_a_file": "Attach a file",
+    "reply_composer": "Reply composer",
+    "send_message": "Send message",
+    "write_a_message": "Write a message"
+  },
+  "multi_step_product_form": {
+    "add_a_detailed_product_description": "Add a detailed product description.",
+    "basic_info": "Basic Info",
+    "category": "Category",
+    "description": "Description",
+    "details": "Details",
+    "enter_the_product_name_category_and_pric": "Enter the product name, category, and price.",
+    "name": "Name",
+    "price": "Price",
+    "review_submit": "Review & Submit",
+    "review_the_details_below_before_submitti": "Review the details below before submitting."
+  },
+  "nav_main": {
+    "platform": "Platform"
+  },
+  "nav_projects": {
+    "more": "More",
+    "projects": "Projects"
+  },
+  "nav_user": {
+    "cn": "CN"
+  },
+  "new_task_dialog": {
+    "add_new_task": "+ Add New Task",
+    "add_new_task_2": "Add New Task",
+    "add_task": "Add Task",
+    "description": "Description...",
+    "task_title": "Task title...",
+    "what_do_you_want_to_get_done_today": "What do you want to get done today?"
+  },
+  "not_found": {
+    "back_to_home": "Back to Home",
+    "go_back": "Go back",
+    "something_apos_s_missing": "Something&apos;s missing",
+    "sorry_the_page_you_are_looking_for_doesn": "Sorry, the page you are looking for doesn&apos;t exist or has been moved."
+  },
+  "notification_center": {
+    "notifications": "Notifications"
+  },
+  "notifications_page": {
+    "no_notifications": "No notifications",
+    "notifications": "Notifications",
+    "view_and_manage_all_your_notifications": "View and manage all your notifications."
+  },
+  "org_switcher": {
+    "add_organization": "Add organization",
+    "create_organization": "Create organization",
+    "get_started": "Get started",
+    "loading": "Loading...",
+    "organizations": "Organizations"
+  },
+  "overview": {
+    "acquisition_needs_attention": "Acquisition needs attention",
+    "active_accounts": "Active Accounts",
+    "analytics": "Analytics",
+    "download": "Download",
+    "engagement_exceed_targets": "Engagement exceed targets",
+    "growth_rate": "Growth Rate",
+    "hi_welcome_back": "Hi, Welcome back 👋",
+    "meets_growth_projections": "Meets growth projections",
+    "new_customers": "New Customers",
+    "overview": "Overview",
+    "total_revenue": "Total Revenue",
+    "visitors_for_the_last_6_months": "Visitors for the last 6 months"
+  },
+  "page": {
+    "a_comprehensive_form_demo_with_all_field": "A comprehensive form demo with all field types.",
+    "about": "About",
+    "advanced_form_patterns": "Advanced Form Patterns",
+    "any_data_you_provide_while_using_this_de": "Any data you provide while using this demo application may be stored temporarily for the purpose of demonstrating functionality. We do not guarantee the security or privacy of any data entered into this demo application. Please do not enter sensitive, personal, or confidential information. Data may be deleted or reset at any time without notice.",
+    "authentication_by_clerk": "Authentication by Clerk",
+    "available_plans": "Available Plans",
+    "basic_form": "Basic Form",
+    "billing_plans": "Billing & Plans",
+    "built_with_next_js_tailwind_css_and_shad": "Built with Next.js, Tailwind CSS, and shadcn/ui",
+    "changes_to_these_terms": "Changes to These Terms",
+    "choose_a_plan_that_fits_your_organizatio": "Choose a plan that fits your organization's needs",
+    "contact_us": "Contact Us",
+    "data_collection": "Data Collection",
+    "data_privacy": "Data Privacy",
+    "data_usage": "Data Usage",
+    "demo_application": "Demo Application",
+    "demo_purpose": "Demo Purpose",
+    "form_patterns_inside_sheets_and_dialogs": "Form patterns inside sheets and dialogs with external submit buttons.",
+    "have_a_wonderful_day": "Have a wonderful day!",
+    "if_you_have_any_questions_about_these_te": "If you have any questions about these Terms of Service, please refer to the project documentation or repository for more information.",
+    "introduction": "Introduction",
+    "last_updated_february_2026": "Last updated: February 2026",
+    "learn_more_about_this_project": "Learn more about this project",
+    "linked_fields_async_validation_dynamic_r": "Linked fields, async validation, dynamic rows, nested objects, cross-field validation, and form-level errors.",
+    "manage_products_react_query_nuqs_table_p": "Manage products (React Query + nuqs table pattern.)",
+    "manage_users_react_query_nuqs_table_patt": "Manage users (React Query + nuqs table pattern.)",
+    "manage_your_workspace_team_members_roles": "Manage your workspace team, members, roles, security and more.",
+    "manage_your_workspaces_and_switch_betwee": "Manage your workspaces and switch between them",
+    "multi_step_form": "Multi-Step Form",
+    "multi_step_wizard_form_pattern": "Multi-step wizard form pattern.",
+    "no_data_misuse": "No Data Misuse",
+    "no_warranty": "No Warranty",
+    "open_source": "Open Source",
+    "open_source_project": "Open-Source Project",
+    "our_application_collects_minimal_data_ne": "Our application collects minimal data necessary for authentication purposes. When you sign in using our authentication provider, we receive basic profile information such as your email address and name. This data is used solely to identify you within the application and provide personalized access to features.",
+    "plans_and_subscriptions_are_managed_thro": "Plans and subscriptions are managed through Clerk Billing. Subscribe to a plan to unlock features and higher limits.",
+    "please_note_that_this_is_a_demo_applicat": "Please note that this is a demo application created for demonstration and educational purposes. It showcases various features and technologies but should not be considered a production-ready service. Any data you provide may be temporary and could be removed at any time as part of regular maintenance.",
+    "privacy_policy": "Privacy Policy",
+    "products": "Products",
+    "react_query": "React Query",
+    "server_prefetch_client_hydration_suspens": "Server prefetch + client hydration + suspense query pattern.",
+    "sheet_dialog_forms": "Sheet & Dialog Forms",
+    "team_management": "Team Management",
+    "terms_of_service": "Terms of Service",
+    "thank_you_for_checking_out_the_exclusive": "Thank You for Checking Out the Exclusive Page",
+    "this_application_is_provided_ldquo_as_is": "This application is provided &ldquo;as is&rdquo; without any warranties of any kind, either express or implied. We expressly disclaim all warranties, including but not limited to implied warranties of merchantability, fitness for a particular purpose, and non-infringement. We do not warrant that the application will be uninterrupted, timely, secure, or error-free.",
+    "this_application_is_provided_solely_for": "This application is provided solely for demonstration and educational purposes. It is not intended for production use, and we make no guarantees regarding its suitability for any specific purpose. All data and functionality are provided as-is for showcasing features and capabilities only.",
+    "this_application_serves_as_a_demo_for_de": "This application serves as a demo for demonstration purposes. It showcases the features, components, and capabilities of the admin dashboard starter. Feel free to explore the interface, test the functionality, and evaluate if it meets your project requirements.",
+    "this_is_an_open_source_next_js_admin_das": "This is an open-source Next.js admin dashboard starter built with modern web technologies. It provides a solid foundation for building powerful admin interfaces and dashboards. The source code is freely available for developers to use, modify, and distribute.",
+    "this_is_an_open_source_project_the_sourc": "This is an open-source project. The source code is available for review, modification, and distribution under the applicable open-source license. We encourage community contributions and feedback to help improve the project. Please refer to the project repository for licensing details and contribution guidelines.",
+    "this_means_you_belong_to_an_organization": "This means you belong to an organization subscribed to the Pro plan.",
+    "this_privacy_policy_explains_how_we_hand": "This Privacy Policy explains how we handle your personal information when you use our application. We are committed to protecting your privacy and ensuring transparency about our data practices. Please read this policy carefully to understand how we collect, use, and safeguard your information.",
+    "users": "Users",
+    "we_reserve_the_right_to_modify_or_replac": "We reserve the right to modify or replace these Terms of Service at any time at our sole discretion. It is your responsibility to review these terms periodically for changes. Your continued use of the application following the posting of any changes constitutes acceptance of those changes.",
+    "we_take_your_privacy_seriously_no_person": "We take your privacy seriously. No personal data is misused, shared, or sold to third parties. Any information collected during your use of this demo application is used solely for the purpose of providing the demonstration experience and is handled in accordance with best practices for data protection.",
+    "we_take_your_privacy_seriously_we_want_t": "We take your privacy seriously. We want to assure you that your personal data is never sold, rented, or shared with third parties for marketing or commercial purposes. Your information is used exclusively for the intended functionality of this application and is never misused or exploited in any way.",
+    "welcome_to_our_application_these_terms_o": "Welcome to our application. These Terms of Service govern your access to and use of our platform. By accessing or using this application, you agree to be bound by these terms. Please read them carefully before proceeding to use our services.",
+    "workspaces": "Workspaces"
+  },
+  "pagination": {
+    "go_to_next_page": "Go to next page",
+    "go_to_previous_page": "Go to previous page",
+    "more_pages": "More pages",
+    "next": "Next",
+    "pagination": "pagination",
+    "previous": "Previous"
+  },
+  "pie_graph": {
+    "january_june_2024": "January - June 2024"
+  },
+  "pokemon_info": {
+    "data_from_pokeapi_middot_prefetched_on_s": "Data from PokeAPI &middot; Prefetched on server, hydrated on client",
+    "pick_a_pokemon": "Pick a Pokemon"
+  },
+  "product_form": {
+    "back": "Back",
+    "category": "Category",
+    "description": "Description",
+    "enter_price": "Enter price",
+    "enter_product_description": "Enter product description",
+    "enter_product_name": "Enter product name",
+    "price": "Price",
+    "product_image": "Product Image",
+    "product_name": "Product Name",
+    "select_category": "Select category",
+    "upload_a_product_image": "Upload a product image"
+  },
+  "product_view_page": {
+    "create_new_product": "Create New Product",
+    "edit_product": "Edit Product"
+  },
+  "recent_sales": {
+    "recent_sales": "Recent Sales",
+    "you_made_265_sales_this_month": "You made 265 sales this month."
+  },
+  "sheet_form_demo": {
+    "cancel": "Cancel",
+    "category": "Category",
+    "create_product": "Create Product",
+    "default": "Default",
+    "description": "Description",
+    "dialog_form": "Dialog Form",
+    "enter_product_description": "Enter product description",
+    "enter_product_name": "Enter product name",
+    "feedback": "Feedback",
+    "fill_in_the_details_below_to_create_a_ne": "Fill in the details below to create a new product.",
+    "new_product": "New Product",
+    "price": "Price",
+    "product_name": "Product Name",
+    "quick_feedback": "Quick Feedback",
+    "rate_your_experience_0_10": "Rate your experience (0-10)",
+    "rate_your_experience_and_leave_a_comment": "Rate your experience and leave a comment.",
+    "rating": "Rating",
+    "select_a_category": "Select a category",
+    "sheet_form": "Sheet Form",
+    "submit_feedback": "Submit Feedback",
+    "tell_us_what_you_think": "Tell us what you think...",
+    "toast_notifications": "Toast Notifications",
+    "trigger_different_toast_variants_to_prev": "Trigger different toast variants to preview notification styles."
+  },
+  "sheet_product_form": {
+    "cancel": "Cancel",
+    "create_product": "Create Product",
+    "fill_in_the_details_to_create_a_new_prod": "Fill in the details to create a new product.",
+    "new_product": "New Product"
+  },
+  "sheet": {
+    "close": "Close"
+  },
+  "sidebar": {
+    "displays_the_mobile_sidebar": "Displays the mobile sidebar.",
+    "sidebar": "Sidebar",
+    "toggle_sidebar": "Toggle Sidebar"
+  },
+  "sign_in_view": {
+    "ldquo_this_starter_template_has_saved_me": "&ldquo;This starter template has saved me countless hours of work and helped me deliver projects to my clients faster than ever before.&rdquo;",
+    "login": "Login",
+    "random_dude": "Random Dude",
+    "view_on_github": "View on GitHub"
+  },
+  "sign_up_view": {
+    "ldquo_this_starter_template_has_saved_me": "&ldquo;This starter template has saved me countless hours of work and helped me deliver projects to my clients faster than ever before.&rdquo;",
+    "random_dude": "Random Dude",
+    "sign_up": "Sign Up",
+    "star_on_github": "Star on GitHub",
+    "view_on_github": "View on GitHub"
+  },
+  "spinner": {
+    "loading": "Loading"
+  },
+  "theme_mode_toggle": {
+    "toggle_theme": "Toggle theme"
+  },
+  "theme_selector": {
+    "select_a_theme": "Select a theme",
+    "t_t": "T T",
+    "theme": "Theme"
+  },
+  "user_auth_form": {
+    "continue_with_email": "Continue With Email",
+    "or_continue_with": "Or continue with"
+  },
+  "user_form_sheet": {
+    "cancel": "Cancel",
+    "doe": "Doe",
+    "email": "Email",
+    "first_name": "First Name",
+    "john": "John",
+    "john_example_com": "john@example.com",
+    "last_name": "Last Name",
+    "phone": "Phone",
+    "role": "Role",
+    "select_role": "Select role",
+    "select_status": "Select status",
+    "status": "Status"
+  },
+  "user_nav": {
+    "billing": "Billing",
+    "new_team": "New Team",
+    "profile": "Profile",
+    "settings": "Settings"
+  }
+}
diff --git a/messages/ja.json b/messages/ja.json
new file mode 100644
index 0000000..1647dfd
--- /dev/null
+++ b/messages/ja.json
@@ -0,0 +1,422 @@
+{
+  "advanced_form_patterns": {
+    "account": "Account",
+    "async_validation_linked_fields": "Async validation, linked fields",
+    "choose_a_username": "Choose a username",
+    "country": "Country",
+    "demonstrates_async_validation_linked_fie": "Demonstrates async validation, linked fields, nested objects, dynamic arrays, listeners, form-level errors, and scroll-to-first-error.",
+    "dynamic_array_rows_with_add_remove": "Dynamic array rows with add / remove",
+    "e_g_alpha_squad": "e.g. Alpha Squad",
+    "email": "Email",
+    "listener_side_effects_country_resets_sta": "Listener side effects — country resets state",
+    "members": "Members",
+    "min_8_characters": "Min 8 characters",
+    "nested_objects_with_dot_notation_paths": "Nested objects with dot-notation paths",
+    "password": "Password",
+    "preferences": "Preferences",
+    "register_team": "Register Team",
+    "reset": "Reset",
+    "select_a_country": "Select a country",
+    "state_region": "State / Region",
+    "team_info": "Team Info",
+    "team_name": "Team Name",
+    "team_registration": "Team Registration",
+    "team_size": "Team Size",
+    "username": "Username",
+    "you_example_com": "you@example.com"
+  },
+  "alert_modal": {
+    "are_you_sure": "Are you sure?",
+    "cancel": "Cancel",
+    "continue": "Continue",
+    "this_action_cannot_be_undone": "This action cannot be undone."
+  },
+  "area_graph": {
+    "showing_total_visitors_for_the_last_6_mo": "Showing total visitors for the last 6 months"
+  },
+  "bar_graph": {
+    "january_june_2025": "January - June 2025"
+  },
+  "breadcrumb": {
+    "breadcrumb": "breadcrumb",
+    "more": "More"
+  },
+  "cell_action": {
+    "actions": "Actions",
+    "open_menu": "Open menu"
+  },
+  "chat_header": {
+    "open_conversation_menu": "Open conversation menu",
+    "start_audio_call": "Start audio call",
+    "start_video_call": "Start video call"
+  },
+  "columns": {
+    "category": "Category",
+    "name": "Name",
+    "role": "Role"
+  },
+  "conversation_list": {
+    "conversation_list": "Conversation list",
+    "live": "Live",
+    "messenger": "Messenger",
+    "search_conversations": "Search conversations"
+  },
+  "conversation_select": {
+    "conversation": "Conversation",
+    "live": "Live",
+    "messenger": "Messenger"
+  },
+  "data_table_faceted_filter": {
+    "no_results_found": "No results found."
+  },
+  "data_table_pagination": {
+    "go_to_first_page": "Go to first page",
+    "go_to_last_page": "Go to last page",
+    "go_to_next_page": "Go to next page",
+    "go_to_previous_page": "Go to previous page",
+    "rows_per_page": "Rows per page"
+  },
+  "data_table_slider_filter": {
+    "clear": "Clear",
+    "from": "From",
+    "to": "to"
+  },
+  "data_table_view_options": {
+    "no_columns_found": "No columns found.",
+    "search_columns": "Search columns...",
+    "toggle_columns": "Toggle columns"
+  },
+  "demo_form": {
+    "add": "Add",
+    "age": "Age",
+    "all_form_inputs_demo": "All Form Inputs Demo",
+    "bio": "Bio",
+    "checkbox_radio": "Checkbox & Radio",
+    "country": "Country",
+    "date_time": "Date & Time",
+    "drag_drop_or_click_to_upload_max_5mb": "Drag & drop or click to upload (max 5MB)",
+    "email": "Email",
+    "every_possible_form_input_built_with_tan": "Every possible form input — built with TanStack Form + shadcn/ui",
+    "file_upload": "File Upload",
+    "form_data_preview": "Form Data Preview",
+    "full_name": "Full Name",
+    "gender": "Gender",
+    "https_example_com": "https://example.com",
+    "john_doe": "John Doe",
+    "john_example_com": "john@example.com",
+    "min_8_characters": "Min 8 characters",
+    "no_framework_found": "No framework found.",
+    "overall_rating": "Overall Rating",
+    "password": "Password",
+    "phone": "Phone",
+    "profile_picture": "Profile Picture",
+    "rate_your_experience_0_10": "Rate your experience (0-10)",
+    "receive_updates_about_new_features_and_p": "Receive updates about new features and products",
+    "reset": "Reset",
+    "search": "Search...",
+    "select_combobox": "Select & Combobox",
+    "select_your_country": "Select your country",
+    "slider": "Slider",
+    "special_inputs": "Special Inputs",
+    "submit_form": "Submit Form",
+    "subscribe_to_newsletter": "Subscribe to Newsletter",
+    "tell_us_about_yourself": "Tell us about yourself...",
+    "text_inputs": "Text Inputs",
+    "toggle_switch": "Toggle & Switch",
+    "type_and_press_enter": "Type and press Enter...",
+    "website": "Website"
+  },
+  "dialog": {
+    "close": "Close"
+  },
+  "error": {
+    "error": "Error",
+    "try_again": "Try again",
+    "unable_to_display_statistics_at_this_tim": "Unable to display statistics at this time"
+  },
+  "file_uploader": {
+    "remove_file": "Remove file"
+  },
+  "icons_view_page": {
+    "icons": "Icons",
+    "search_icons": "Search icons..."
+  },
+  "info_button": {
+    "show_information": "Show information"
+  },
+  "infobar": {
+    "close_info_panel": "Close info panel",
+    "displays_the_mobile_infobar": "Displays the mobile infobar.",
+    "infobar": "Infobar",
+    "toggle_infobar": "Toggle Infobar"
+  },
+  "kanban_view_page": {
+    "kanban": "Kanban",
+    "manage_tasks_with_drag_and_drop": "Manage tasks with drag and drop"
+  },
+  "layout": {
+    "acquisition_needs_attention": "Acquisition needs attention",
+    "active_accounts": "Active Accounts",
+    "engagement_exceed_targets": "Engagement exceed targets",
+    "growth_rate": "Growth Rate",
+    "hi_welcome_back": "Hi, Welcome back 👋",
+    "meets_growth_projections": "Meets growth projections",
+    "new_customers": "New Customers",
+    "total_revenue": "Total Revenue",
+    "visitors_for_the_last_6_months": "Visitors for the last 6 months"
+  },
+  "message_composer": {
+    "attach_a_file": "Attach a file",
+    "reply_composer": "Reply composer",
+    "send_message": "Send message",
+    "write_a_message": "Write a message"
+  },
+  "multi_step_product_form": {
+    "add_a_detailed_product_description": "Add a detailed product description.",
+    "basic_info": "Basic Info",
+    "category": "Category",
+    "description": "Description",
+    "details": "Details",
+    "enter_the_product_name_category_and_pric": "Enter the product name, category, and price.",
+    "name": "Name",
+    "price": "Price",
+    "review_submit": "Review & Submit",
+    "review_the_details_below_before_submitti": "Review the details below before submitting."
+  },
+  "nav_main": {
+    "platform": "Platform"
+  },
+  "nav_projects": {
+    "more": "More",
+    "projects": "Projects"
+  },
+  "nav_user": {
+    "cn": "CN"
+  },
+  "new_task_dialog": {
+    "add_new_task": "+ Add New Task",
+    "add_new_task_2": "Add New Task",
+    "add_task": "Add Task",
+    "description": "Description...",
+    "task_title": "Task title...",
+    "what_do_you_want_to_get_done_today": "What do you want to get done today?"
+  },
+  "not_found": {
+    "back_to_home": "Back to Home",
+    "go_back": "Go back",
+    "something_apos_s_missing": "Something&apos;s missing",
+    "sorry_the_page_you_are_looking_for_doesn": "Sorry, the page you are looking for doesn&apos;t exist or has been moved."
+  },
+  "notification_center": {
+    "notifications": "Notifications"
+  },
+  "notifications_page": {
+    "no_notifications": "No notifications",
+    "notifications": "Notifications",
+    "view_and_manage_all_your_notifications": "View and manage all your notifications."
+  },
+  "org_switcher": {
+    "add_organization": "Add organization",
+    "create_organization": "Create organization",
+    "get_started": "Get started",
+    "loading": "Loading...",
+    "organizations": "Organizations"
+  },
+  "overview": {
+    "acquisition_needs_attention": "Acquisition needs attention",
+    "active_accounts": "Active Accounts",
+    "analytics": "Analytics",
+    "download": "Download",
+    "engagement_exceed_targets": "Engagement exceed targets",
+    "growth_rate": "Growth Rate",
+    "hi_welcome_back": "Hi, Welcome back 👋",
+    "meets_growth_projections": "Meets growth projections",
+    "new_customers": "New Customers",
+    "overview": "Overview",
+    "total_revenue": "Total Revenue",
+    "visitors_for_the_last_6_months": "Visitors for the last 6 months"
+  },
+  "page": {
+    "a_comprehensive_form_demo_with_all_field": "A comprehensive form demo with all field types.",
+    "about": "About",
+    "advanced_form_patterns": "Advanced Form Patterns",
+    "any_data_you_provide_while_using_this_de": "Any data you provide while using this demo application may be stored temporarily for the purpose of demonstrating functionality. We do not guarantee the security or privacy of any data entered into this demo application. Please do not enter sensitive, personal, or confidential information. Data may be deleted or reset at any time without notice.",
+    "authentication_by_clerk": "Authentication by Clerk",
+    "available_plans": "Available Plans",
+    "basic_form": "Basic Form",
+    "billing_plans": "Billing & Plans",
+    "built_with_next_js_tailwind_css_and_shad": "Built with Next.js, Tailwind CSS, and shadcn/ui",
+    "changes_to_these_terms": "Changes to These Terms",
+    "choose_a_plan_that_fits_your_organizatio": "Choose a plan that fits your organization's needs",
+    "contact_us": "Contact Us",
+    "data_collection": "Data Collection",
+    "data_privacy": "Data Privacy",
+    "data_usage": "Data Usage",
+    "demo_application": "Demo Application",
+    "demo_purpose": "Demo Purpose",
+    "form_patterns_inside_sheets_and_dialogs": "Form patterns inside sheets and dialogs with external submit buttons.",
+    "have_a_wonderful_day": "Have a wonderful day!",
+    "if_you_have_any_questions_about_these_te": "If you have any questions about these Terms of Service, please refer to the project documentation or repository for more information.",
+    "introduction": "Introduction",
+    "last_updated_february_2026": "Last updated: February 2026",
+    "learn_more_about_this_project": "Learn more about this project",
+    "linked_fields_async_validation_dynamic_r": "Linked fields, async validation, dynamic rows, nested objects, cross-field validation, and form-level errors.",
+    "manage_products_react_query_nuqs_table_p": "Manage products (React Query + nuqs table pattern.)",
+    "manage_users_react_query_nuqs_table_patt": "Manage users (React Query + nuqs table pattern.)",
+    "manage_your_workspace_team_members_roles": "Manage your workspace team, members, roles, security and more.",
+    "manage_your_workspaces_and_switch_betwee": "Manage your workspaces and switch between them",
+    "multi_step_form": "Multi-Step Form",
+    "multi_step_wizard_form_pattern": "Multi-step wizard form pattern.",
+    "no_data_misuse": "No Data Misuse",
+    "no_warranty": "No Warranty",
+    "open_source": "Open Source",
+    "open_source_project": "Open-Source Project",
+    "our_application_collects_minimal_data_ne": "Our application collects minimal data necessary for authentication purposes. When you sign in using our authentication provider, we receive basic profile information such as your email address and name. This data is used solely to identify you within the application and provide personalized access to features.",
+    "plans_and_subscriptions_are_managed_thro": "Plans and subscriptions are managed through Clerk Billing. Subscribe to a plan to unlock features and higher limits.",
+    "please_note_that_this_is_a_demo_applicat": "Please note that this is a demo application created for demonstration and educational purposes. It showcases various features and technologies but should not be considered a production-ready service. Any data you provide may be temporary and could be removed at any time as part of regular maintenance.",
+    "privacy_policy": "Privacy Policy",
+    "products": "Products",
+    "react_query": "React Query",
+    "server_prefetch_client_hydration_suspens": "Server prefetch + client hydration + suspense query pattern.",
+    "sheet_dialog_forms": "Sheet & Dialog Forms",
+    "team_management": "Team Management",
+    "terms_of_service": "Terms of Service",
+    "thank_you_for_checking_out_the_exclusive": "Thank You for Checking Out the Exclusive Page",
+    "this_application_is_provided_ldquo_as_is": "This application is provided &ldquo;as is&rdquo; without any warranties of any kind, either express or implied. We expressly disclaim all warranties, including but not limited to implied warranties of merchantability, fitness for a particular purpose, and non-infringement. We do not warrant that the application will be uninterrupted, timely, secure, or error-free.",
+    "this_application_is_provided_solely_for": "This application is provided solely for demonstration and educational purposes. It is not intended for production use, and we make no guarantees regarding its suitability for any specific purpose. All data and functionality are provided as-is for showcasing features and capabilities only.",
+    "this_application_serves_as_a_demo_for_de": "This application serves as a demo for demonstration purposes. It showcases the features, components, and capabilities of the admin dashboard starter. Feel free to explore the interface, test the functionality, and evaluate if it meets your project requirements.",
+    "this_is_an_open_source_next_js_admin_das": "This is an open-source Next.js admin dashboard starter built with modern web technologies. It provides a solid foundation for building powerful admin interfaces and dashboards. The source code is freely available for developers to use, modify, and distribute.",
+    "this_is_an_open_source_project_the_sourc": "This is an open-source project. The source code is available for review, modification, and distribution under the applicable open-source license. We encourage community contributions and feedback to help improve the project. Please refer to the project repository for licensing details and contribution guidelines.",
+    "this_means_you_belong_to_an_organization": "This means you belong to an organization subscribed to the Pro plan.",
+    "this_privacy_policy_explains_how_we_hand": "This Privacy Policy explains how we handle your personal information when you use our application. We are committed to protecting your privacy and ensuring transparency about our data practices. Please read this policy carefully to understand how we collect, use, and safeguard your information.",
+    "users": "Users",
+    "we_reserve_the_right_to_modify_or_replac": "We reserve the right to modify or replace these Terms of Service at any time at our sole discretion. It is your responsibility to review these terms periodically for changes. Your continued use of the application following the posting of any changes constitutes acceptance of those changes.",
+    "we_take_your_privacy_seriously_no_person": "We take your privacy seriously. No personal data is misused, shared, or sold to third parties. Any information collected during your use of this demo application is used solely for the purpose of providing the demonstration experience and is handled in accordance with best practices for data protection.",
+    "we_take_your_privacy_seriously_we_want_t": "We take your privacy seriously. We want to assure you that your personal data is never sold, rented, or shared with third parties for marketing or commercial purposes. Your information is used exclusively for the intended functionality of this application and is never misused or exploited in any way.",
+    "welcome_to_our_application_these_terms_o": "Welcome to our application. These Terms of Service govern your access to and use of our platform. By accessing or using this application, you agree to be bound by these terms. Please read them carefully before proceeding to use our services.",
+    "workspaces": "Workspaces"
+  },
+  "pagination": {
+    "go_to_next_page": "Go to next page",
+    "go_to_previous_page": "Go to previous page",
+    "more_pages": "More pages",
+    "next": "Next",
+    "pagination": "pagination",
+    "previous": "Previous"
+  },
+  "pie_graph": {
+    "january_june_2024": "January - June 2024"
+  },
+  "pokemon_info": {
+    "data_from_pokeapi_middot_prefetched_on_s": "Data from PokeAPI &middot; Prefetched on server, hydrated on client",
+    "pick_a_pokemon": "Pick a Pokemon"
+  },
+  "product_form": {
+    "back": "Back",
+    "category": "Category",
+    "description": "Description",
+    "enter_price": "Enter price",
+    "enter_product_description": "Enter product description",
+    "enter_product_name": "Enter product name",
+    "price": "Price",
+    "product_image": "Product Image",
+    "product_name": "Product Name",
+    "select_category": "Select category",
+    "upload_a_product_image": "Upload a product image"
+  },
+  "product_view_page": {
+    "create_new_product": "Create New Product",
+    "edit_product": "Edit Product"
+  },
+  "recent_sales": {
+    "recent_sales": "Recent Sales",
+    "you_made_265_sales_this_month": "You made 265 sales this month."
+  },
+  "sheet_form_demo": {
+    "cancel": "Cancel",
+    "category": "Category",
+    "create_product": "Create Product",
+    "default": "Default",
+    "description": "Description",
+    "dialog_form": "Dialog Form",
+    "enter_product_description": "Enter product description",
+    "enter_product_name": "Enter product name",
+    "feedback": "Feedback",
+    "fill_in_the_details_below_to_create_a_ne": "Fill in the details below to create a new product.",
+    "new_product": "New Product",
+    "price": "Price",
+    "product_name": "Product Name",
+    "quick_feedback": "Quick Feedback",
+    "rate_your_experience_0_10": "Rate your experience (0-10)",
+    "rate_your_experience_and_leave_a_comment": "Rate your experience and leave a comment.",
+    "rating": "Rating",
+    "select_a_category": "Select a category",
+    "sheet_form": "Sheet Form",
+    "submit_feedback": "Submit Feedback",
+    "tell_us_what_you_think": "Tell us what you think...",
+    "toast_notifications": "Toast Notifications",
+    "trigger_different_toast_variants_to_prev": "Trigger different toast variants to preview notification styles."
+  },
+  "sheet_product_form": {
+    "cancel": "Cancel",
+    "create_product": "Create Product",
+    "fill_in_the_details_to_create_a_new_prod": "Fill in the details to create a new product.",
+    "new_product": "New Product"
+  },
+  "sheet": {
+    "close": "Close"
+  },
+  "sidebar": {
+    "displays_the_mobile_sidebar": "Displays the mobile sidebar.",
+    "sidebar": "Sidebar",
+    "toggle_sidebar": "Toggle Sidebar"
+  },
+  "sign_in_view": {
+    "ldquo_this_starter_template_has_saved_me": "&ldquo;This starter template has saved me countless hours of work and helped me deliver projects to my clients faster than ever before.&rdquo;",
+    "login": "Login",
+    "random_dude": "Random Dude",
+    "view_on_github": "View on GitHub"
+  },
+  "sign_up_view": {
+    "ldquo_this_starter_template_has_saved_me": "&ldquo;This starter template has saved me countless hours of work and helped me deliver projects to my clients faster than ever before.&rdquo;",
+    "random_dude": "Random Dude",
+    "sign_up": "Sign Up",
+    "star_on_github": "Star on GitHub",
+    "view_on_github": "View on GitHub"
+  },
+  "spinner": {
+    "loading": "Loading"
+  },
+  "theme_mode_toggle": {
+    "toggle_theme": "Toggle theme"
+  },
+  "theme_selector": {
+    "select_a_theme": "Select a theme",
+    "t_t": "T T",
+    "theme": "Theme"
+  },
+  "user_auth_form": {
+    "continue_with_email": "Continue With Email",
+    "or_continue_with": "Or continue with"
+  },
+  "user_form_sheet": {
+    "cancel": "Cancel",
+    "doe": "Doe",
+    "email": "Email",
+    "first_name": "First Name",
+    "john": "John",
+    "john_example_com": "john@example.com",
+    "last_name": "Last Name",
+    "phone": "Phone",
+    "role": "Role",
+    "select_role": "Select role",
+    "select_status": "Select status",
+    "status": "Status"
+  },
+  "user_nav": {
+    "billing": "Billing",
+    "new_team": "New Team",
+    "profile": "Profile",
+    "settings": "Settings"
+  }
+}
diff --git a/messages/translation-todo.json b/messages/translation-todo.json
new file mode 100644
index 0000000..1531556
--- /dev/null
+++ b/messages/translation-todo.json
@@ -0,0 +1,1258 @@
+[
+  {
+    "key": "advanced_form_patterns.account",
+    "en": "Account"
+  },
+  {
+    "key": "advanced_form_patterns.async_validation_linked_fields",
+    "en": "Async validation, linked fields"
+  },
+  {
+    "key": "advanced_form_patterns.choose_a_username",
+    "en": "Choose a username"
+  },
+  {
+    "key": "advanced_form_patterns.country",
+    "en": "Country"
+  },
+  {
+    "key": "advanced_form_patterns.demonstrates_async_validation_linked_fie",
+    "en": "Demonstrates async validation, linked fields, nested objects, dynamic arrays, listeners, form-level errors, and scroll-to-first-error."
+  },
+  {
+    "key": "advanced_form_patterns.dynamic_array_rows_with_add_remove",
+    "en": "Dynamic array rows with add / remove"
+  },
+  {
+    "key": "advanced_form_patterns.e_g_alpha_squad",
+    "en": "e.g. Alpha Squad"
+  },
+  {
+    "key": "advanced_form_patterns.email",
+    "en": "Email"
+  },
+  {
+    "key": "advanced_form_patterns.listener_side_effects_country_resets_sta",
+    "en": "Listener side effects — country resets state"
+  },
+  {
+    "key": "advanced_form_patterns.members",
+    "en": "Members"
+  },
+  {
+    "key": "advanced_form_patterns.min_8_characters",
+    "en": "Min 8 characters"
+  },
+  {
+    "key": "advanced_form_patterns.nested_objects_with_dot_notation_paths",
+    "en": "Nested objects with dot-notation paths"
+  },
+  {
+    "key": "advanced_form_patterns.password",
+    "en": "Password"
+  },
+  {
+    "key": "advanced_form_patterns.preferences",
+    "en": "Preferences"
+  },
+  {
+    "key": "advanced_form_patterns.register_team",
+    "en": "Register Team"
+  },
+  {
+    "key": "advanced_form_patterns.reset",
+    "en": "Reset"
+  },
+  {
+    "key": "advanced_form_patterns.select_a_country",
+    "en": "Select a country"
+  },
+  {
+    "key": "advanced_form_patterns.state_region",
+    "en": "State / Region"
+  },
+  {
+    "key": "advanced_form_patterns.team_info",
+    "en": "Team Info"
+  },
+  {
+    "key": "advanced_form_patterns.team_name",
+    "en": "Team Name"
+  },
+  {
+    "key": "advanced_form_patterns.team_registration",
+    "en": "Team Registration"
+  },
+  {
+    "key": "advanced_form_patterns.team_size",
+    "en": "Team Size"
+  },
+  {
+    "key": "advanced_form_patterns.username",
+    "en": "Username"
+  },
+  {
+    "key": "advanced_form_patterns.you_example_com",
+    "en": "you@example.com"
+  },
+  {
+    "key": "alert_modal.are_you_sure",
+    "en": "Are you sure?"
+  },
+  {
+    "key": "alert_modal.cancel",
+    "en": "Cancel"
+  },
+  {
+    "key": "alert_modal.continue",
+    "en": "Continue"
+  },
+  {
+    "key": "alert_modal.this_action_cannot_be_undone",
+    "en": "This action cannot be undone."
+  },
+  {
+    "key": "area_graph.showing_total_visitors_for_the_last_6_mo",
+    "en": "Showing total visitors for the last 6 months"
+  },
+  {
+    "key": "bar_graph.january_june_2025",
+    "en": "January - June 2025"
+  },
+  {
+    "key": "breadcrumb.breadcrumb",
+    "en": "breadcrumb"
+  },
+  {
+    "key": "breadcrumb.more",
+    "en": "More"
+  },
+  {
+    "key": "cell_action.actions",
+    "en": "Actions"
+  },
+  {
+    "key": "cell_action.open_menu",
+    "en": "Open menu"
+  },
+  {
+    "key": "chat_header.open_conversation_menu",
+    "en": "Open conversation menu"
+  },
+  {
+    "key": "chat_header.start_audio_call",
+    "en": "Start audio call"
+  },
+  {
+    "key": "chat_header.start_video_call",
+    "en": "Start video call"
+  },
+  {
+    "key": "columns.category",
+    "en": "Category"
+  },
+  {
+    "key": "columns.name",
+    "en": "Name"
+  },
+  {
+    "key": "columns.role",
+    "en": "Role"
+  },
+  {
+    "key": "conversation_list.conversation_list",
+    "en": "Conversation list"
+  },
+  {
+    "key": "conversation_list.live",
+    "en": "Live"
+  },
+  {
+    "key": "conversation_list.messenger",
+    "en": "Messenger"
+  },
+  {
+    "key": "conversation_list.search_conversations",
+    "en": "Search conversations"
+  },
+  {
+    "key": "conversation_select.conversation",
+    "en": "Conversation"
+  },
+  {
+    "key": "conversation_select.live",
+    "en": "Live"
+  },
+  {
+    "key": "conversation_select.messenger",
+    "en": "Messenger"
+  },
+  {
+    "key": "data_table_faceted_filter.no_results_found",
+    "en": "No results found."
+  },
+  {
+    "key": "data_table_pagination.go_to_first_page",
+    "en": "Go to first page"
+  },
+  {
+    "key": "data_table_pagination.go_to_last_page",
+    "en": "Go to last page"
+  },
+  {
+    "key": "data_table_pagination.go_to_next_page",
+    "en": "Go to next page"
+  },
+  {
+    "key": "data_table_pagination.go_to_previous_page",
+    "en": "Go to previous page"
+  },
+  {
+    "key": "data_table_pagination.rows_per_page",
+    "en": "Rows per page"
+  },
+  {
+    "key": "data_table_slider_filter.clear",
+    "en": "Clear"
+  },
+  {
+    "key": "data_table_slider_filter.from",
+    "en": "From"
+  },
+  {
+    "key": "data_table_slider_filter.to",
+    "en": "to"
+  },
+  {
+    "key": "data_table_view_options.no_columns_found",
+    "en": "No columns found."
+  },
+  {
+    "key": "data_table_view_options.search_columns",
+    "en": "Search columns..."
+  },
+  {
+    "key": "data_table_view_options.toggle_columns",
+    "en": "Toggle columns"
+  },
+  {
+    "key": "demo_form.add",
+    "en": "Add"
+  },
+  {
+    "key": "demo_form.age",
+    "en": "Age"
+  },
+  {
+    "key": "demo_form.all_form_inputs_demo",
+    "en": "All Form Inputs Demo"
+  },
+  {
+    "key": "demo_form.bio",
+    "en": "Bio"
+  },
+  {
+    "key": "demo_form.checkbox_radio",
+    "en": "Checkbox & Radio"
+  },
+  {
+    "key": "demo_form.country",
+    "en": "Country"
+  },
+  {
+    "key": "demo_form.date_time",
+    "en": "Date & Time"
+  },
+  {
+    "key": "demo_form.drag_drop_or_click_to_upload_max_5mb",
+    "en": "Drag & drop or click to upload (max 5MB)"
+  },
+  {
+    "key": "demo_form.email",
+    "en": "Email"
+  },
+  {
+    "key": "demo_form.every_possible_form_input_built_with_tan",
+    "en": "Every possible form input — built with TanStack Form + shadcn/ui"
+  },
+  {
+    "key": "demo_form.file_upload",
+    "en": "File Upload"
+  },
+  {
+    "key": "demo_form.form_data_preview",
+    "en": "Form Data Preview"
+  },
+  {
+    "key": "demo_form.full_name",
+    "en": "Full Name"
+  },
+  {
+    "key": "demo_form.gender",
+    "en": "Gender"
+  },
+  {
+    "key": "demo_form.https_example_com",
+    "en": "https://example.com"
+  },
+  {
+    "key": "demo_form.john_doe",
+    "en": "John Doe"
+  },
+  {
+    "key": "demo_form.john_example_com",
+    "en": "john@example.com"
+  },
+  {
+    "key": "demo_form.min_8_characters",
+    "en": "Min 8 characters"
+  },
+  {
+    "key": "demo_form.no_framework_found",
+    "en": "No framework found."
+  },
+  {
+    "key": "demo_form.overall_rating",
+    "en": "Overall Rating"
+  },
+  {
+    "key": "demo_form.password",
+    "en": "Password"
+  },
+  {
+    "key": "demo_form.phone",
+    "en": "Phone"
+  },
+  {
+    "key": "demo_form.profile_picture",
+    "en": "Profile Picture"
+  },
+  {
+    "key": "demo_form.rate_your_experience_0_10",
+    "en": "Rate your experience (0-10)"
+  },
+  {
+    "key": "demo_form.receive_updates_about_new_features_and_p",
+    "en": "Receive updates about new features and products"
+  },
+  {
+    "key": "demo_form.reset",
+    "en": "Reset"
+  },
+  {
+    "key": "demo_form.search",
+    "en": "Search..."
+  },
+  {
+    "key": "demo_form.select_combobox",
+    "en": "Select & Combobox"
+  },
+  {
+    "key": "demo_form.select_your_country",
+    "en": "Select your country"
+  },
+  {
+    "key": "demo_form.slider",
+    "en": "Slider"
+  },
+  {
+    "key": "demo_form.special_inputs",
+    "en": "Special Inputs"
+  },
+  {
+    "key": "demo_form.submit_form",
+    "en": "Submit Form"
+  },
+  {
+    "key": "demo_form.subscribe_to_newsletter",
+    "en": "Subscribe to Newsletter"
+  },
+  {
+    "key": "demo_form.tell_us_about_yourself",
+    "en": "Tell us about yourself..."
+  },
+  {
+    "key": "demo_form.text_inputs",
+    "en": "Text Inputs"
+  },
+  {
+    "key": "demo_form.toggle_switch",
+    "en": "Toggle & Switch"
+  },
+  {
+    "key": "demo_form.type_and_press_enter",
+    "en": "Type and press Enter..."
+  },
+  {
+    "key": "demo_form.website",
+    "en": "Website"
+  },
+  {
+    "key": "dialog.close",
+    "en": "Close"
+  },
+  {
+    "key": "error.error",
+    "en": "Error"
+  },
+  {
+    "key": "error.try_again",
+    "en": "Try again"
+  },
+  {
+    "key": "error.unable_to_display_statistics_at_this_tim",
+    "en": "Unable to display statistics at this time"
+  },
+  {
+    "key": "file_uploader.remove_file",
+    "en": "Remove file"
+  },
+  {
+    "key": "icons_view_page.icons",
+    "en": "Icons"
+  },
+  {
+    "key": "icons_view_page.search_icons",
+    "en": "Search icons..."
+  },
+  {
+    "key": "info_button.show_information",
+    "en": "Show information"
+  },
+  {
+    "key": "infobar.close_info_panel",
+    "en": "Close info panel"
+  },
+  {
+    "key": "infobar.displays_the_mobile_infobar",
+    "en": "Displays the mobile infobar."
+  },
+  {
+    "key": "infobar.infobar",
+    "en": "Infobar"
+  },
+  {
+    "key": "infobar.toggle_infobar",
+    "en": "Toggle Infobar"
+  },
+  {
+    "key": "kanban_view_page.kanban",
+    "en": "Kanban"
+  },
+  {
+    "key": "kanban_view_page.manage_tasks_with_drag_and_drop",
+    "en": "Manage tasks with drag and drop"
+  },
+  {
+    "key": "layout.acquisition_needs_attention",
+    "en": "Acquisition needs attention"
+  },
+  {
+    "key": "layout.active_accounts",
+    "en": "Active Accounts"
+  },
+  {
+    "key": "layout.engagement_exceed_targets",
+    "en": "Engagement exceed targets"
+  },
+  {
+    "key": "layout.growth_rate",
+    "en": "Growth Rate"
+  },
+  {
+    "key": "layout.hi_welcome_back",
+    "en": "Hi, Welcome back 👋"
+  },
+  {
+    "key": "layout.meets_growth_projections",
+    "en": "Meets growth projections"
+  },
+  {
+    "key": "layout.new_customers",
+    "en": "New Customers"
+  },
+  {
+    "key": "layout.total_revenue",
+    "en": "Total Revenue"
+  },
+  {
+    "key": "layout.visitors_for_the_last_6_months",
+    "en": "Visitors for the last 6 months"
+  },
+  {
+    "key": "message_composer.attach_a_file",
+    "en": "Attach a file"
+  },
+  {
+    "key": "message_composer.reply_composer",
+    "en": "Reply composer"
+  },
+  {
+    "key": "message_composer.send_message",
+    "en": "Send message"
+  },
+  {
+    "key": "message_composer.write_a_message",
+    "en": "Write a message"
+  },
+  {
+    "key": "multi_step_product_form.add_a_detailed_product_description",
+    "en": "Add a detailed product description."
+  },
+  {
+    "key": "multi_step_product_form.basic_info",
+    "en": "Basic Info"
+  },
+  {
+    "key": "multi_step_product_form.category",
+    "en": "Category"
+  },
+  {
+    "key": "multi_step_product_form.description",
+    "en": "Description"
+  },
+  {
+    "key": "multi_step_product_form.details",
+    "en": "Details"
+  },
+  {
+    "key": "multi_step_product_form.enter_the_product_name_category_and_pric",
+    "en": "Enter the product name, category, and price."
+  },
+  {
+    "key": "multi_step_product_form.name",
+    "en": "Name"
+  },
+  {
+    "key": "multi_step_product_form.price",
+    "en": "Price"
+  },
+  {
+    "key": "multi_step_product_form.review_submit",
+    "en": "Review & Submit"
+  },
+  {
+    "key": "multi_step_product_form.review_the_details_below_before_submitti",
+    "en": "Review the details below before submitting."
+  },
+  {
+    "key": "nav_main.platform",
+    "en": "Platform"
+  },
+  {
+    "key": "nav_projects.more",
+    "en": "More"
+  },
+  {
+    "key": "nav_projects.projects",
+    "en": "Projects"
+  },
+  {
+    "key": "nav_user.cn",
+    "en": "CN"
+  },
+  {
+    "key": "new_task_dialog.add_new_task",
+    "en": "+ Add New Task"
+  },
+  {
+    "key": "new_task_dialog.add_new_task_2",
+    "en": "Add New Task"
+  },
+  {
+    "key": "new_task_dialog.add_task",
+    "en": "Add Task"
+  },
+  {
+    "key": "new_task_dialog.description",
+    "en": "Description..."
+  },
+  {
+    "key": "new_task_dialog.task_title",
+    "en": "Task title..."
+  },
+  {
+    "key": "new_task_dialog.what_do_you_want_to_get_done_today",
+    "en": "What do you want to get done today?"
+  },
+  {
+    "key": "not_found.back_to_home",
+    "en": "Back to Home"
+  },
+  {
+    "key": "not_found.go_back",
+    "en": "Go back"
+  },
+  {
+    "key": "not_found.something_apos_s_missing",
+    "en": "Something&apos;s missing"
+  },
+  {
+    "key": "not_found.sorry_the_page_you_are_looking_for_doesn",
+    "en": "Sorry, the page you are looking for doesn&apos;t exist or has been moved."
+  },
+  {
+    "key": "notification_center.notifications",
+    "en": "Notifications"
+  },
+  {
+    "key": "notifications_page.no_notifications",
+    "en": "No notifications"
+  },
+  {
+    "key": "notifications_page.notifications",
+    "en": "Notifications"
+  },
+  {
+    "key": "notifications_page.view_and_manage_all_your_notifications",
+    "en": "View and manage all your notifications."
+  },
+  {
+    "key": "org_switcher.add_organization",
+    "en": "Add organization"
+  },
+  {
+    "key": "org_switcher.create_organization",
+    "en": "Create organization"
+  },
+  {
+    "key": "org_switcher.get_started",
+    "en": "Get started"
+  },
+  {
+    "key": "org_switcher.loading",
+    "en": "Loading..."
+  },
+  {
+    "key": "org_switcher.organizations",
+    "en": "Organizations"
+  },
+  {
+    "key": "overview.acquisition_needs_attention",
+    "en": "Acquisition needs attention"
+  },
+  {
+    "key": "overview.active_accounts",
+    "en": "Active Accounts"
+  },
+  {
+    "key": "overview.analytics",
+    "en": "Analytics"
+  },
+  {
+    "key": "overview.download",
+    "en": "Download"
+  },
+  {
+    "key": "overview.engagement_exceed_targets",
+    "en": "Engagement exceed targets"
+  },
+  {
+    "key": "overview.growth_rate",
+    "en": "Growth Rate"
+  },
+  {
+    "key": "overview.hi_welcome_back",
+    "en": "Hi, Welcome back 👋"
+  },
+  {
+    "key": "overview.meets_growth_projections",
+    "en": "Meets growth projections"
+  },
+  {
+    "key": "overview.new_customers",
+    "en": "New Customers"
+  },
+  {
+    "key": "overview.overview",
+    "en": "Overview"
+  },
+  {
+    "key": "overview.total_revenue",
+    "en": "Total Revenue"
+  },
+  {
+    "key": "overview.visitors_for_the_last_6_months",
+    "en": "Visitors for the last 6 months"
+  },
+  {
+    "key": "page.a_comprehensive_form_demo_with_all_field",
+    "en": "A comprehensive form demo with all field types."
+  },
+  {
+    "key": "page.about",
+    "en": "About"
+  },
+  {
+    "key": "page.advanced_form_patterns",
+    "en": "Advanced Form Patterns"
+  },
+  {
+    "key": "page.any_data_you_provide_while_using_this_de",
+    "en": "Any data you provide while using this demo application may be stored temporarily for the purpose of demonstrating functionality. We do not guarantee the security or privacy of any data entered into this demo application. Please do not enter sensitive, personal, or confidential information. Data may be deleted or reset at any time without notice."
+  },
+  {
+    "key": "page.authentication_by_clerk",
+    "en": "Authentication by Clerk"
+  },
+  {
+    "key": "page.available_plans",
+    "en": "Available Plans"
+  },
+  {
+    "key": "page.basic_form",
+    "en": "Basic Form"
+  },
+  {
+    "key": "page.billing_plans",
+    "en": "Billing & Plans"
+  },
+  {
+    "key": "page.built_with_next_js_tailwind_css_and_shad",
+    "en": "Built with Next.js, Tailwind CSS, and shadcn/ui"
+  },
+  {
+    "key": "page.changes_to_these_terms",
+    "en": "Changes to These Terms"
+  },
+  {
+    "key": "page.choose_a_plan_that_fits_your_organizatio",
+    "en": "Choose a plan that fits your organization's needs"
+  },
+  {
+    "key": "page.contact_us",
+    "en": "Contact Us"
+  },
+  {
+    "key": "page.data_collection",
+    "en": "Data Collection"
+  },
+  {
+    "key": "page.data_privacy",
+    "en": "Data Privacy"
+  },
+  {
+    "key": "page.data_usage",
+    "en": "Data Usage"
+  },
+  {
+    "key": "page.demo_application",
+    "en": "Demo Application"
+  },
+  {
+    "key": "page.demo_purpose",
+    "en": "Demo Purpose"
+  },
+  {
+    "key": "page.form_patterns_inside_sheets_and_dialogs",
+    "en": "Form patterns inside sheets and dialogs with external submit buttons."
+  },
+  {
+    "key": "page.have_a_wonderful_day",
+    "en": "Have a wonderful day!"
+  },
+  {
+    "key": "page.if_you_have_any_questions_about_these_te",
+    "en": "If you have any questions about these Terms of Service, please refer to the project documentation or repository for more information."
+  },
+  {
+    "key": "page.introduction",
+    "en": "Introduction"
+  },
+  {
+    "key": "page.last_updated_february_2026",
+    "en": "Last updated: February 2026"
+  },
+  {
+    "key": "page.learn_more_about_this_project",
+    "en": "Learn more about this project"
+  },
+  {
+    "key": "page.linked_fields_async_validation_dynamic_r",
+    "en": "Linked fields, async validation, dynamic rows, nested objects, cross-field validation, and form-level errors."
+  },
+  {
+    "key": "page.manage_products_react_query_nuqs_table_p",
+    "en": "Manage products (React Query + nuqs table pattern.)"
+  },
+  {
+    "key": "page.manage_users_react_query_nuqs_table_patt",
+    "en": "Manage users (React Query + nuqs table pattern.)"
+  },
+  {
+    "key": "page.manage_your_workspace_team_members_roles",
+    "en": "Manage your workspace team, members, roles, security and more."
+  },
+  {
+    "key": "page.manage_your_workspaces_and_switch_betwee",
+    "en": "Manage your workspaces and switch between them"
+  },
+  {
+    "key": "page.multi_step_form",
+    "en": "Multi-Step Form"
+  },
+  {
+    "key": "page.multi_step_wizard_form_pattern",
+    "en": "Multi-step wizard form pattern."
+  },
+  {
+    "key": "page.no_data_misuse",
+    "en": "No Data Misuse"
+  },
+  {
+    "key": "page.no_warranty",
+    "en": "No Warranty"
+  },
+  {
+    "key": "page.open_source",
+    "en": "Open Source"
+  },
+  {
+    "key": "page.open_source_project",
+    "en": "Open-Source Project"
+  },
+  {
+    "key": "page.our_application_collects_minimal_data_ne",
+    "en": "Our application collects minimal data necessary for authentication purposes. When you sign in using our authentication provider, we receive basic profile information such as your email address and name. This data is used solely to identify you within the application and provide personalized access to features."
+  },
+  {
+    "key": "page.plans_and_subscriptions_are_managed_thro",
+    "en": "Plans and subscriptions are managed through Clerk Billing. Subscribe to a plan to unlock features and higher limits."
+  },
+  {
+    "key": "page.please_note_that_this_is_a_demo_applicat",
+    "en": "Please note that this is a demo application created for demonstration and educational purposes. It showcases various features and technologies but should not be considered a production-ready service. Any data you provide may be temporary and could be removed at any time as part of regular maintenance."
+  },
+  {
+    "key": "page.privacy_policy",
+    "en": "Privacy Policy"
+  },
+  {
+    "key": "page.products",
+    "en": "Products"
+  },
+  {
+    "key": "page.react_query",
+    "en": "React Query"
+  },
+  {
+    "key": "page.server_prefetch_client_hydration_suspens",
+    "en": "Server prefetch + client hydration + suspense query pattern."
+  },
+  {
+    "key": "page.sheet_dialog_forms",
+    "en": "Sheet & Dialog Forms"
+  },
+  {
+    "key": "page.team_management",
+    "en": "Team Management"
+  },
+  {
+    "key": "page.terms_of_service",
+    "en": "Terms of Service"
+  },
+  {
+    "key": "page.thank_you_for_checking_out_the_exclusive",
+    "en": "Thank You for Checking Out the Exclusive Page"
+  },
+  {
+    "key": "page.this_application_is_provided_ldquo_as_is",
+    "en": "This application is provided &ldquo;as is&rdquo; without any warranties of any kind, either express or implied. We expressly disclaim all warranties, including but not limited to implied warranties of merchantability, fitness for a particular purpose, and non-infringement. We do not warrant that the application will be uninterrupted, timely, secure, or error-free."
+  },
+  {
+    "key": "page.this_application_is_provided_solely_for",
+    "en": "This application is provided solely for demonstration and educational purposes. It is not intended for production use, and we make no guarantees regarding its suitability for any specific purpose. All data and functionality are provided as-is for showcasing features and capabilities only."
+  },
+  {
+    "key": "page.this_application_serves_as_a_demo_for_de",
+    "en": "This application serves as a demo for demonstration purposes. It showcases the features, components, and capabilities of the admin dashboard starter. Feel free to explore the interface, test the functionality, and evaluate if it meets your project requirements."
+  },
+  {
+    "key": "page.this_is_an_open_source_next_js_admin_das",
+    "en": "This is an open-source Next.js admin dashboard starter built with modern web technologies. It provides a solid foundation for building powerful admin interfaces and dashboards. The source code is freely available for developers to use, modify, and distribute."
+  },
+  {
+    "key": "page.this_is_an_open_source_project_the_sourc",
+    "en": "This is an open-source project. The source code is available for review, modification, and distribution under the applicable open-source license. We encourage community contributions and feedback to help improve the project. Please refer to the project repository for licensing details and contribution guidelines."
+  },
+  {
+    "key": "page.this_means_you_belong_to_an_organization",
+    "en": "This means you belong to an organization subscribed to the Pro plan."
+  },
+  {
+    "key": "page.this_privacy_policy_explains_how_we_hand",
+    "en": "This Privacy Policy explains how we handle your personal information when you use our application. We are committed to protecting your privacy and ensuring transparency about our data practices. Please read this policy carefully to understand how we collect, use, and safeguard your information."
+  },
+  {
+    "key": "page.users",
+    "en": "Users"
+  },
+  {
+    "key": "page.we_reserve_the_right_to_modify_or_replac",
+    "en": "We reserve the right to modify or replace these Terms of Service at any time at our sole discretion. It is your responsibility to review these terms periodically for changes. Your continued use of the application following the posting of any changes constitutes acceptance of those changes."
+  },
+  {
+    "key": "page.we_take_your_privacy_seriously_no_person",
+    "en": "We take your privacy seriously. No personal data is misused, shared, or sold to third parties. Any information collected during your use of this demo application is used solely for the purpose of providing the demonstration experience and is handled in accordance with best practices for data protection."
+  },
+  {
+    "key": "page.we_take_your_privacy_seriously_we_want_t",
+    "en": "We take your privacy seriously. We want to assure you that your personal data is never sold, rented, or shared with third parties for marketing or commercial purposes. Your information is used exclusively for the intended functionality of this application and is never misused or exploited in any way."
+  },
+  {
+    "key": "page.welcome_to_our_application_these_terms_o",
+    "en": "Welcome to our application. These Terms of Service govern your access to and use of our platform. By accessing or using this application, you agree to be bound by these terms. Please read them carefully before proceeding to use our services."
+  },
+  {
+    "key": "page.workspaces",
+    "en": "Workspaces"
+  },
+  {
+    "key": "pagination.go_to_next_page",
+    "en": "Go to next page"
+  },
+  {
+    "key": "pagination.go_to_previous_page",
+    "en": "Go to previous page"
+  },
+  {
+    "key": "pagination.more_pages",
+    "en": "More pages"
+  },
+  {
+    "key": "pagination.next",
+    "en": "Next"
+  },
+  {
+    "key": "pagination.pagination",
+    "en": "pagination"
+  },
+  {
+    "key": "pagination.previous",
+    "en": "Previous"
+  },
+  {
+    "key": "pie_graph.january_june_2024",
+    "en": "January - June 2024"
+  },
+  {
+    "key": "pokemon_info.data_from_pokeapi_middot_prefetched_on_s",
+    "en": "Data from PokeAPI &middot; Prefetched on server, hydrated on client"
+  },
+  {
+    "key": "pokemon_info.pick_a_pokemon",
+    "en": "Pick a Pokemon"
+  },
+  {
+    "key": "product_form.back",
+    "en": "Back"
+  },
+  {
+    "key": "product_form.category",
+    "en": "Category"
+  },
+  {
+    "key": "product_form.description",
+    "en": "Description"
+  },
+  {
+    "key": "product_form.enter_price",
+    "en": "Enter price"
+  },
+  {
+    "key": "product_form.enter_product_description",
+    "en": "Enter product description"
+  },
+  {
+    "key": "product_form.enter_product_name",
+    "en": "Enter product name"
+  },
+  {
+    "key": "product_form.price",
+    "en": "Price"
+  },
+  {
+    "key": "product_form.product_image",
+    "en": "Product Image"
+  },
+  {
+    "key": "product_form.product_name",
+    "en": "Product Name"
+  },
+  {
+    "key": "product_form.select_category",
+    "en": "Select category"
+  },
+  {
+    "key": "product_form.upload_a_product_image",
+    "en": "Upload a product image"
+  },
+  {
+    "key": "product_view_page.create_new_product",
+    "en": "Create New Product"
+  },
+  {
+    "key": "product_view_page.edit_product",
+    "en": "Edit Product"
+  },
+  {
+    "key": "recent_sales.recent_sales",
+    "en": "Recent Sales"
+  },
+  {
+    "key": "recent_sales.you_made_265_sales_this_month",
+    "en": "You made 265 sales this month."
+  },
+  {
+    "key": "sheet_form_demo.cancel",
+    "en": "Cancel"
+  },
+  {
+    "key": "sheet_form_demo.category",
+    "en": "Category"
+  },
+  {
+    "key": "sheet_form_demo.create_product",
+    "en": "Create Product"
+  },
+  {
+    "key": "sheet_form_demo.default",
+    "en": "Default"
+  },
+  {
+    "key": "sheet_form_demo.description",
+    "en": "Description"
+  },
+  {
+    "key": "sheet_form_demo.dialog_form",
+    "en": "Dialog Form"
+  },
+  {
+    "key": "sheet_form_demo.enter_product_description",
+    "en": "Enter product description"
+  },
+  {
+    "key": "sheet_form_demo.enter_product_name",
+    "en": "Enter product name"
+  },
+  {
+    "key": "sheet_form_demo.feedback",
+    "en": "Feedback"
+  },
+  {
+    "key": "sheet_form_demo.fill_in_the_details_below_to_create_a_ne",
+    "en": "Fill in the details below to create a new product."
+  },
+  {
+    "key": "sheet_form_demo.new_product",
+    "en": "New Product"
+  },
+  {
+    "key": "sheet_form_demo.price",
+    "en": "Price"
+  },
+  {
+    "key": "sheet_form_demo.product_name",
+    "en": "Product Name"
+  },
+  {
+    "key": "sheet_form_demo.quick_feedback",
+    "en": "Quick Feedback"
+  },
+  {
+    "key": "sheet_form_demo.rate_your_experience_0_10",
+    "en": "Rate your experience (0-10)"
+  },
+  {
+    "key": "sheet_form_demo.rate_your_experience_and_leave_a_comment",
+    "en": "Rate your experience and leave a comment."
+  },
+  {
+    "key": "sheet_form_demo.rating",
+    "en": "Rating"
+  },
+  {
+    "key": "sheet_form_demo.select_a_category",
+    "en": "Select a category"
+  },
+  {
+    "key": "sheet_form_demo.sheet_form",
+    "en": "Sheet Form"
+  },
+  {
+    "key": "sheet_form_demo.submit_feedback",
+    "en": "Submit Feedback"
+  },
+  {
+    "key": "sheet_form_demo.tell_us_what_you_think",
+    "en": "Tell us what you think..."
+  },
+  {
+    "key": "sheet_form_demo.toast_notifications",
+    "en": "Toast Notifications"
+  },
+  {
+    "key": "sheet_form_demo.trigger_different_toast_variants_to_prev",
+    "en": "Trigger different toast variants to preview notification styles."
+  },
+  {
+    "key": "sheet_product_form.cancel",
+    "en": "Cancel"
+  },
+  {
+    "key": "sheet_product_form.create_product",
+    "en": "Create Product"
+  },
+  {
+    "key": "sheet_product_form.fill_in_the_details_to_create_a_new_prod",
+    "en": "Fill in the details to create a new product."
+  },
+  {
+    "key": "sheet_product_form.new_product",
+    "en": "New Product"
+  },
+  {
+    "key": "sheet.close",
+    "en": "Close"
+  },
+  {
+    "key": "sidebar.displays_the_mobile_sidebar",
+    "en": "Displays the mobile sidebar."
+  },
+  {
+    "key": "sidebar.sidebar",
+    "en": "Sidebar"
+  },
+  {
+    "key": "sidebar.toggle_sidebar",
+    "en": "Toggle Sidebar"
+  },
+  {
+    "key": "sign_in_view.ldquo_this_starter_template_has_saved_me",
+    "en": "&ldquo;This starter template has saved me countless hours of work and helped me deliver projects to my clients faster than ever before.&rdquo;"
+  },
+  {
+    "key": "sign_in_view.login",
+    "en": "Login"
+  },
+  {
+    "key": "sign_in_view.random_dude",
+    "en": "Random Dude"
+  },
+  {
+    "key": "sign_in_view.view_on_github",
+    "en": "View on GitHub"
+  },
+  {
+    "key": "sign_up_view.ldquo_this_starter_template_has_saved_me",
+    "en": "&ldquo;This starter template has saved me countless hours of work and helped me deliver projects to my clients faster than ever before.&rdquo;"
+  },
+  {
+    "key": "sign_up_view.random_dude",
+    "en": "Random Dude"
+  },
+  {
+    "key": "sign_up_view.sign_up",
+    "en": "Sign Up"
+  },
+  {
+    "key": "sign_up_view.star_on_github",
+    "en": "Star on GitHub"
+  },
+  {
+    "key": "sign_up_view.view_on_github",
+    "en": "View on GitHub"
+  },
+  {
+    "key": "spinner.loading",
+    "en": "Loading"
+  },
+  {
+    "key": "theme_mode_toggle.toggle_theme",
+    "en": "Toggle theme"
+  },
+  {
+    "key": "theme_selector.select_a_theme",
+    "en": "Select a theme"
+  },
+  {
+    "key": "theme_selector.t_t",
+    "en": "T T"
+  },
+  {
+    "key": "theme_selector.theme",
+    "en": "Theme"
+  },
+  {
+    "key": "user_auth_form.continue_with_email",
+    "en": "Continue With Email"
+  },
+  {
+    "key": "user_auth_form.or_continue_with",
+    "en": "Or continue with"
+  },
+  {
+    "key": "user_form_sheet.cancel",
+    "en": "Cancel"
+  },
+  {
+    "key": "user_form_sheet.doe",
+    "en": "Doe"
+  },
+  {
+    "key": "user_form_sheet.email",
+    "en": "Email"
+  },
+  {
+    "key": "user_form_sheet.first_name",
+    "en": "First Name"
+  },
+  {
+    "key": "user_form_sheet.john",
+    "en": "John"
+  },
+  {
+    "key": "user_form_sheet.john_example_com",
+    "en": "john@example.com"
+  },
+  {
+    "key": "user_form_sheet.last_name",
+    "en": "Last Name"
+  },
+  {
+    "key": "user_form_sheet.phone",
+    "en": "Phone"
+  },
+  {
+    "key": "user_form_sheet.role",
+    "en": "Role"
+  },
+  {
+    "key": "user_form_sheet.select_role",
+    "en": "Select role"
+  },
+  {
+    "key": "user_form_sheet.select_status",
+    "en": "Select status"
+  },
+  {
+    "key": "user_form_sheet.status",
+    "en": "Status"
+  },
+  {
+    "key": "user_nav.billing",
+    "en": "Billing"
+  },
+  {
+    "key": "user_nav.new_team",
+    "en": "New Team"
+  },
+  {
+    "key": "user_nav.profile",
+    "en": "Profile"
+  },
+  {
+    "key": "user_nav.settings",
+    "en": "Settings"
+  }
+]
diff --git a/next.config.ts b/next.config.ts
index b7634bc..0ba90a3 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,3 +1,6 @@
+import createNextIntlPlugin from 'next-intl/plugin';
+const withNextIntl = createNextIntlPlugin();
+
 import type { NextConfig } from 'next';
 import { withSentryConfig } from '@sentry/nextjs';
 
@@ -66,4 +69,4 @@ if (!process.env.NEXT_PUBLIC_SENTRY_DISABLED) {
 }
 
 const nextConfig = configWithPlugins;
-export default nextConfig;
+export default withNextIntl(nextConfig);
diff --git a/package.json b/package.json
index 725fa3d..bf425af 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,8 @@
     "uuid": "^11.1.0",
     "vaul": "^1.1.2",
     "zod": "^4.3.6",
-    "zustand": "^5.0.12"
+    "zustand": "^5.0.12",
+    "next-intl": "^4.0.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.9.0",
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index bc5087f..c698320 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -5,42 +6,37 @@ export const metadata: Metadata = {
 };
 
 export default function AboutPage() {
+  const t = useTranslations();
   return (
     <div className='min-h-screen px-4 py-12 sm:px-6 lg:px-8'>
       <div className='mx-auto max-w-3xl'>
         {/* Header */}
         <div className='mb-12 text-center'>
-          <h1 className='text-foreground text-3xl font-bold tracking-tight sm:text-4xl'>About</h1>
-          <p className='text-muted-foreground mt-4 text-lg'>Learn more about this project</p>
+          <h1 className='text-foreground text-3xl font-bold tracking-tight sm:text-4xl'>{t('page.about')}</h1>
+          <p className='text-muted-foreground mt-4 text-lg'>{t('page.learn_more_about_this_project')}</p>
         </div>
 
         {/* Content Sections */}
         <div className='space-y-8'>
           {/* Open Source Section */}
           <section className='bg-card rounded-2xl border p-8 shadow-sm'>
-            <h2 className='text-foreground mb-4 text-xl font-semibold'>Open-Source Project</h2>
+            <h2 className='text-foreground mb-4 text-xl font-semibold'>{t('page.open_source_project')}</h2>
             <p className='text-muted-foreground text-lg leading-relaxed'>
-              This is an open-source Next.js admin dashboard starter built with modern web
-              technologies. It provides a solid foundation for building powerful admin interfaces
-              and dashboards. The source code is freely available for developers to use, modify, and
-              distribute.
+              {t('page.this_is_an_open_source_next_js_admin_das')}
             </p>
           </section>
 
           {/* Demo Purpose Section */}
           <section className='bg-card rounded-2xl border p-8 shadow-sm'>
-            <h2 className='text-foreground mb-4 text-xl font-semibold'>Demo Purpose</h2>
+            <h2 className='text-foreground mb-4 text-xl font-semibold'>{t('page.demo_purpose')}</h2>
             <p className='text-muted-foreground text-lg leading-relaxed'>
-              This application serves as a demo for demonstration purposes. It showcases the
-              features, components, and capabilities of the admin dashboard starter. Feel free to
-              explore the interface, test the functionality, and evaluate if it meets your project
-              requirements.
+              {t('page.this_application_serves_as_a_demo_for_de')}
             </p>
           </section>
 
           {/* Auth Section */}
           <section className='bg-card rounded-2xl border p-8 shadow-sm'>
-            <h2 className='text-foreground mb-4 text-xl font-semibold'>Authentication by Clerk</h2>
+            <h2 className='text-foreground mb-4 text-xl font-semibold'>{t('page.authentication_by_clerk')}</h2>
             <p className='text-muted-foreground text-lg leading-relaxed'>
               Authentication for this application is securely handled by{' '}
               <a
@@ -58,12 +54,9 @@ export default function AboutPage() {
 
           {/* Data Privacy Section */}
           <section className='bg-card rounded-2xl border p-8 shadow-sm'>
-            <h2 className='text-foreground mb-4 text-xl font-semibold'>Data Privacy</h2>
+            <h2 className='text-foreground mb-4 text-xl font-semibold'>{t('page.data_privacy')}</h2>
             <p className='text-muted-foreground text-lg leading-relaxed'>
-              We take your privacy seriously. No personal data is misused, shared, or sold to third
-              parties. Any information collected during your use of this demo application is used
-              solely for the purpose of providing the demonstration experience and is handled in
-              accordance with best practices for data protection.
+              {t('page.we_take_your_privacy_seriously_no_person')}
             </p>
           </section>
         </div>
@@ -71,7 +64,7 @@ export default function AboutPage() {
         {/* Footer Note */}
         <div className='mt-12 text-center'>
           <p className='text-muted-foreground text-sm'>
-            Built with Next.js, Tailwind CSS, and shadcn/ui
+            {t('page.built_with_next_js_tailwind_css_and_shad')}
           </p>
         </div>
       </div>
diff --git a/src/app/dashboard/billing/page.tsx b/src/app/dashboard/billing/page.tsx
index 9a1bedb..3bc29ca 100644
--- a/src/app/dashboard/billing/page.tsx
+++ b/src/app/dashboard/billing/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import PageContainer from '@/components/layout/page-container';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -9,6 +10,7 @@ import { Icons } from '@/components/icons';
 import { billingInfoContent } from '@/config/infoconfig';
 
 export default function BillingPage() {
+  const t = useTranslations();
   const { organization, isLoaded } = useOrganization();
 
   return (
@@ -26,7 +28,7 @@ export default function BillingPage() {
         </div>
       }
       infoContent={billingInfoContent}
-      pageTitle='Billing & Plans'
+      pageTitle={t('page.billing_plans')}
       pageDescription={`Manage your subscription and usage limits for ${organization?.name}`}
     >
       <div className='space-y-6'>
@@ -34,16 +36,15 @@ export default function BillingPage() {
         <Alert>
           <Icons.info className='h-4 w-4' />
           <AlertDescription>
-            Plans and subscriptions are managed through Clerk Billing. Subscribe to a plan to unlock
-            features and higher limits.
+            {t('page.plans_and_subscriptions_are_managed_thro')}
           </AlertDescription>
         </Alert>
 
         {/* Clerk Pricing Table */}
         <Card>
           <CardHeader>
-            <CardTitle>Available Plans</CardTitle>
-            <CardDescription>Choose a plan that fits your organization's needs</CardDescription>
+            <CardTitle>{t('page.available_plans')}</CardTitle>
+            <CardDescription>{t('page.choose_a_plan_that_fits_your_organizatio')}</CardDescription>
           </CardHeader>
           <CardContent>
             <div className='mx-auto max-w-4xl'>
diff --git a/src/app/dashboard/exclusive/page.tsx b/src/app/dashboard/exclusive/page.tsx
index 1adb73b..838bc18 100644
--- a/src/app/dashboard/exclusive/page.tsx
+++ b/src/app/dashboard/exclusive/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import PageContainer from '@/components/layout/page-container';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -8,6 +9,7 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 import Link from 'next/link';
 
 export default function ExclusivePage() {
+  const t = useTranslations();
   const { organization, isLoaded } = useOrganization();
 
   return (
@@ -48,13 +50,13 @@ export default function ExclusivePage() {
           </div>
           <Card>
             <CardHeader>
-              <CardTitle>Thank You for Checking Out the Exclusive Page</CardTitle>
+              <CardTitle>{t('page.thank_you_for_checking_out_the_exclusive')}</CardTitle>
               <CardDescription>
-                This means you belong to an organization subscribed to the Pro plan.
+                {t('page.this_means_you_belong_to_an_organization')}
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <div className='text-lg'>Have a wonderful day!</div>
+              <div className='text-lg'>{t('page.have_a_wonderful_day')}</div>
             </CardContent>
           </Card>
         </div>
diff --git a/src/app/dashboard/forms/advanced/page.tsx b/src/app/dashboard/forms/advanced/page.tsx
index 77afe32..618bf0c 100644
--- a/src/app/dashboard/forms/advanced/page.tsx
+++ b/src/app/dashboard/forms/advanced/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import PageContainer from '@/components/layout/page-container';
 import AdvancedFormPatterns from '@/features/forms/components/advanced-form-patterns';
 
@@ -6,10 +7,11 @@ export const metadata = {
 };
 
 export default function Page() {
+  const t = useTranslations();
   return (
     <PageContainer
-      pageTitle='Advanced Form Patterns'
-      pageDescription='Linked fields, async validation, dynamic rows, nested objects, cross-field validation, and form-level errors.'
+      pageTitle={t('page.advanced_form_patterns')}
+      pageDescription={t('page.linked_fields_async_validation_dynamic_r')}
     >
       <AdvancedFormPatterns />
     </PageContainer>
diff --git a/src/app/dashboard/forms/basic/page.tsx b/src/app/dashboard/forms/basic/page.tsx
index c85ea97..37d9ecc 100644
--- a/src/app/dashboard/forms/basic/page.tsx
+++ b/src/app/dashboard/forms/basic/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import PageContainer from '@/components/layout/page-container';
 import DemoForm from '@/components/forms/demo-form';
 
@@ -6,10 +7,11 @@ export const metadata = {
 };
 
 export default function Page() {
+  const t = useTranslations();
   return (
     <PageContainer
-      pageTitle='Basic Form'
-      pageDescription='A comprehensive form demo with all field types.'
+      pageTitle={t('page.basic_form')}
+      pageDescription={t('page.a_comprehensive_form_demo_with_all_field')}
     >
       <DemoForm />
     </PageContainer>
diff --git a/src/app/dashboard/forms/multi-step/page.tsx b/src/app/dashboard/forms/multi-step/page.tsx
index ae8ce28..802d744 100644
--- a/src/app/dashboard/forms/multi-step/page.tsx
+++ b/src/app/dashboard/forms/multi-step/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import PageContainer from '@/components/layout/page-container';
 import FormsShowcasePage from '@/features/forms/components/forms-showcase-page';
 
@@ -6,8 +7,9 @@ export const metadata = {
 };
 
 export default function Page() {
+  const t = useTranslations();
   return (
-    <PageContainer pageTitle='Multi-Step Form' pageDescription='Multi-step wizard form pattern.'>
+    <PageContainer pageTitle={t('page.multi_step_form')} pageDescription={t('page.multi_step_wizard_form_pattern')}>
       <FormsShowcasePage />
     </PageContainer>
   );
diff --git a/src/app/dashboard/forms/sheet-form/page.tsx b/src/app/dashboard/forms/sheet-form/page.tsx
index 8d460c7..62db4b1 100644
--- a/src/app/dashboard/forms/sheet-form/page.tsx
+++ b/src/app/dashboard/forms/sheet-form/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import PageContainer from '@/components/layout/page-container';
 import SheetFormDemo from '@/features/forms/components/sheet-form-demo';
 
@@ -6,10 +7,11 @@ export const metadata = {
 };
 
 export default function Page() {
+  const t = useTranslations();
   return (
     <PageContainer
-      pageTitle='Sheet & Dialog Forms'
-      pageDescription='Form patterns inside sheets and dialogs with external submit buttons.'
+      pageTitle={t('page.sheet_dialog_forms')}
+      pageDescription={t('page.form_patterns_inside_sheets_and_dialogs')}
     >
       <SheetFormDemo />
     </PageContainer>
diff --git a/src/app/dashboard/overview/@area_stats/error.tsx b/src/app/dashboard/overview/@area_stats/error.tsx
index 4e0d601..ea314c0 100644
--- a/src/app/dashboard/overview/@area_stats/error.tsx
+++ b/src/app/dashboard/overview/@area_stats/error.tsx
@@ -1,13 +1,15 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Icons } from '@/components/icons';
 
 export default function AreaStatsError({ error }: { error: Error }) {
+  const t = useTranslations();
   return (
     <Alert variant='destructive'>
       <Icons.alertCircle className='h-4 w-4' />
-      <AlertTitle>Error</AlertTitle>
+      <AlertTitle>{t('error.error')}</AlertTitle>
       <AlertDescription>Failed to load area statistics: {error.message}</AlertDescription>
     </Alert>
   );
diff --git a/src/app/dashboard/overview/@bar_stats/error.tsx b/src/app/dashboard/overview/@bar_stats/error.tsx
index 0651ccd..46b7732 100644
--- a/src/app/dashboard/overview/@bar_stats/error.tsx
+++ b/src/app/dashboard/overview/@bar_stats/error.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
@@ -13,6 +14,7 @@ interface StatsErrorProps {
   reset: () => void; // Add reset function from error boundary
 }
 export default function StatsError({ error, reset }: StatsErrorProps) {
+  const t = useTranslations();
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
 
@@ -33,7 +35,7 @@ export default function StatsError({ error, reset }: StatsErrorProps) {
         <div className='flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6'>
           <Alert variant='destructive' className='border-none'>
             <Icons.alertCircle className='h-4 w-4' />
-            <AlertTitle>Error</AlertTitle>
+            <AlertTitle>{t('error.error')}</AlertTitle>
             <AlertDescription className='mt-2'>
               Failed to load statistics: {error.message}
             </AlertDescription>
@@ -43,7 +45,7 @@ export default function StatsError({ error, reset }: StatsErrorProps) {
       <CardContent className='flex h-[316px] items-center justify-center p-6'>
         <div className='text-center'>
           <p className='text-muted-foreground mb-4 text-sm'>
-            Unable to display statistics at this time
+            {t('error.unable_to_display_statistics_at_this_tim')}
           </p>
           <Button
             onClick={() => reload()}
@@ -51,7 +53,7 @@ export default function StatsError({ error, reset }: StatsErrorProps) {
             className='min-w-[120px]'
             disabled={isPending}
           >
-            Try again
+            {t('error.try_again')}
           </Button>
         </div>
       </CardContent>
diff --git a/src/app/dashboard/overview/@pie_stats/error.tsx b/src/app/dashboard/overview/@pie_stats/error.tsx
index 4fe966c..d249468 100644
--- a/src/app/dashboard/overview/@pie_stats/error.tsx
+++ b/src/app/dashboard/overview/@pie_stats/error.tsx
@@ -1,13 +1,15 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Icons } from '@/components/icons';
 
 export default function PieStatsError({ error }: { error: Error }) {
+  const t = useTranslations();
   return (
     <Alert variant='destructive'>
       <Icons.alertCircle className='h-4 w-4' />
-      <AlertTitle>Error</AlertTitle>
+      <AlertTitle>{t('error.error')}</AlertTitle>
       <AlertDescription>Failed to load pie statistics: {error.message}</AlertDescription>
     </Alert>
   );
diff --git a/src/app/dashboard/overview/@sales/error.tsx b/src/app/dashboard/overview/@sales/error.tsx
index 17dd857..b1dd507 100644
--- a/src/app/dashboard/overview/@sales/error.tsx
+++ b/src/app/dashboard/overview/@sales/error.tsx
@@ -1,13 +1,15 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Icons } from '@/components/icons';
 
 export default function SalesError({ error }: { error: Error }) {
+  const t = useTranslations();
   return (
     <Alert variant='destructive'>
       <Icons.alertCircle className='h-4 w-4' />
-      <AlertTitle>Error</AlertTitle>
+      <AlertTitle>{t('error.error')}</AlertTitle>
       <AlertDescription>Failed to load sales data: {error.message}</AlertDescription>
     </Alert>
   );
diff --git a/src/app/dashboard/overview/error.tsx b/src/app/dashboard/overview/error.tsx
index fd9a31a..e7f3dd6 100644
--- a/src/app/dashboard/overview/error.tsx
+++ b/src/app/dashboard/overview/error.tsx
@@ -1,13 +1,15 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Icons } from '@/components/icons';
 
 export default function OverviewError({ error }: { error: Error }) {
+  const t = useTranslations();
   return (
     <Alert variant='destructive'>
       <Icons.alertCircle className='h-4 w-4' />
-      <AlertTitle>Error</AlertTitle>
+      <AlertTitle>{t('error.error')}</AlertTitle>
       <AlertDescription>Failed to load statistics: {error.message}</AlertDescription>
     </Alert>
   );
diff --git a/src/app/dashboard/overview/layout.tsx b/src/app/dashboard/overview/layout.tsx
index 0d6393d..44cad62 100644
--- a/src/app/dashboard/overview/layout.tsx
+++ b/src/app/dashboard/overview/layout.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import PageContainer from '@/components/layout/page-container';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -22,17 +23,18 @@ export default function OverViewLayout({
   bar_stats: React.ReactNode;
   area_stats: React.ReactNode;
 }) {
+  const t = useTranslations();
   return (
     <PageContainer>
       <div className='flex flex-1 flex-col space-y-2'>
         <div className='flex items-center justify-between'>
-          <h2 className='text-2xl font-bold tracking-tight'>Hi, Welcome back 👋</h2>
+          <h2 className='text-2xl font-bold tracking-tight'>{t('layout.hi_welcome_back')}</h2>
         </div>
 
         <div className='*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs md:grid-cols-2 lg:grid-cols-4'>
           <Card className='@container/card'>
             <CardHeader>
-              <CardDescription>Total Revenue</CardDescription>
+              <CardDescription>{t('layout.total_revenue')}</CardDescription>
               <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
                 $1,250.00
               </CardTitle>
@@ -47,12 +49,12 @@ export default function OverViewLayout({
               <div className='line-clamp-1 flex gap-2 font-medium'>
                 Trending up this month <Icons.trendingUp className='size-4' />
               </div>
-              <div className='text-muted-foreground'>Visitors for the last 6 months</div>
+              <div className='text-muted-foreground'>{t('layout.visitors_for_the_last_6_months')}</div>
             </CardFooter>
           </Card>
           <Card className='@container/card'>
             <CardHeader>
-              <CardDescription>New Customers</CardDescription>
+              <CardDescription>{t('layout.new_customers')}</CardDescription>
               <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
                 1,234
               </CardTitle>
@@ -67,12 +69,12 @@ export default function OverViewLayout({
               <div className='line-clamp-1 flex gap-2 font-medium'>
                 Down 20% this period <Icons.trendingDown className='size-4' />
               </div>
-              <div className='text-muted-foreground'>Acquisition needs attention</div>
+              <div className='text-muted-foreground'>{t('layout.acquisition_needs_attention')}</div>
             </CardFooter>
           </Card>
           <Card className='@container/card'>
             <CardHeader>
-              <CardDescription>Active Accounts</CardDescription>
+              <CardDescription>{t('layout.active_accounts')}</CardDescription>
               <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
                 45,678
               </CardTitle>
@@ -87,12 +89,12 @@ export default function OverViewLayout({
               <div className='line-clamp-1 flex gap-2 font-medium'>
                 Strong user retention <Icons.trendingUp className='size-4' />
               </div>
-              <div className='text-muted-foreground'>Engagement exceed targets</div>
+              <div className='text-muted-foreground'>{t('layout.engagement_exceed_targets')}</div>
             </CardFooter>
           </Card>
           <Card className='@container/card'>
             <CardHeader>
-              <CardDescription>Growth Rate</CardDescription>
+              <CardDescription>{t('layout.growth_rate')}</CardDescription>
               <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
                 4.5%
               </CardTitle>
@@ -107,7 +109,7 @@ export default function OverViewLayout({
               <div className='line-clamp-1 flex gap-2 font-medium'>
                 Steady performance increase <Icons.trendingUp className='size-4' />
               </div>
-              <div className='text-muted-foreground'>Meets growth projections</div>
+              <div className='text-muted-foreground'>{t('layout.meets_growth_projections')}</div>
             </CardFooter>
           </Card>
         </div>
diff --git a/src/app/dashboard/product/page.tsx b/src/app/dashboard/product/page.tsx
index 776ee0c..d563aab 100644
--- a/src/app/dashboard/product/page.tsx
+++ b/src/app/dashboard/product/page.tsx
@@ -1,3 +1,4 @@
+import { getTranslations } from 'next-intl/server';
 import PageContainer from '@/components/layout/page-container';
 import { buttonVariants } from '@/components/ui/button';
 import ProductListingPage from '@/features/products/components/product-listing';
@@ -17,13 +18,14 @@ type pageProps = {
 };
 
 export default async function Page(props: pageProps) {
+  const t = await getTranslations();
   const searchParams = await props.searchParams;
   searchParamsCache.parse(searchParams);
 
   return (
     <PageContainer
-      pageTitle='Products'
-      pageDescription='Manage products (React Query + nuqs table pattern.)'
+      pageTitle={t('page.products')}
+      pageDescription={t('page.manage_products_react_query_nuqs_table_p')}
       infoContent={productInfoContent}
       pageHeaderAction={
         <Link href='/dashboard/product/new' className={cn(buttonVariants(), 'text-xs md:text-sm')}>
diff --git a/src/app/dashboard/react-query/page.tsx b/src/app/dashboard/react-query/page.tsx
index ec5eb8a..80ba0f7 100644
--- a/src/app/dashboard/react-query/page.tsx
+++ b/src/app/dashboard/react-query/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
 import { getQueryClient } from '@/lib/query-client';
 import { pokemonOptions } from '@/features/react-query-demo/api/queries';
@@ -12,6 +13,7 @@ export const metadata = {
 };
 
 export default function ReactQueryPage() {
+  const t = useTranslations();
   const queryClient = getQueryClient();
 
   // Prefetch on the server — data is ready before client JS loads
@@ -19,8 +21,8 @@ export default function ReactQueryPage() {
 
   return (
     <PageContainer
-      pageTitle='React Query'
-      pageDescription='Server prefetch + client hydration + suspense query pattern.'
+      pageTitle={t('page.react_query')}
+      pageDescription={t('page.server_prefetch_client_hydration_suspens')}
       infoContent={reactQueryInfoContent}
     >
       <HydrationBoundary state={dehydrate(queryClient)}>
diff --git a/src/app/dashboard/users/page.tsx b/src/app/dashboard/users/page.tsx
index 8fc348d..70dd90b 100644
--- a/src/app/dashboard/users/page.tsx
+++ b/src/app/dashboard/users/page.tsx
@@ -1,3 +1,4 @@
+import { getTranslations } from 'next-intl/server';
 import PageContainer from '@/components/layout/page-container';
 import UserListingPage from '@/features/users/components/user-listing';
 import { searchParamsCache } from '@/lib/searchparams';
@@ -14,13 +15,14 @@ type PageProps = {
 };
 
 export default async function UsersPage(props: PageProps) {
+  const t = await getTranslations();
   const searchParams = await props.searchParams;
   searchParamsCache.parse(searchParams);
 
   return (
     <PageContainer
-      pageTitle='Users'
-      pageDescription='Manage users (React Query + nuqs table pattern.)'
+      pageTitle={t('page.users')}
+      pageDescription={t('page.manage_users_react_query_nuqs_table_patt')}
       infoContent={usersInfoContent}
       pageHeaderAction={<UserFormSheetTrigger />}
     >
diff --git a/src/app/dashboard/workspaces/page.tsx b/src/app/dashboard/workspaces/page.tsx
index 64d43dc..e23eee6 100644
--- a/src/app/dashboard/workspaces/page.tsx
+++ b/src/app/dashboard/workspaces/page.tsx
@@ -1,14 +1,16 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import PageContainer from '@/components/layout/page-container';
 import { OrganizationList } from '@clerk/nextjs';
 import { workspacesInfoContent } from '@/config/infoconfig';
 
 export default function WorkspacesPage() {
+  const t = useTranslations();
   return (
     <PageContainer
-      pageTitle='Workspaces'
-      pageDescription='Manage your workspaces and switch between them'
+      pageTitle={t('page.workspaces')}
+      pageDescription={t('page.manage_your_workspaces_and_switch_betwee')}
       infoContent={workspacesInfoContent}
     >
       <OrganizationList
diff --git a/src/app/dashboard/workspaces/team/[[...rest]]/page.tsx b/src/app/dashboard/workspaces/team/[[...rest]]/page.tsx
index c9de530..5484a3d 100644
--- a/src/app/dashboard/workspaces/team/[[...rest]]/page.tsx
+++ b/src/app/dashboard/workspaces/team/[[...rest]]/page.tsx
@@ -1,14 +1,16 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import PageContainer from '@/components/layout/page-container';
 import { OrganizationProfile } from '@clerk/nextjs';
 import { teamInfoContent } from '@/config/infoconfig';
 
 export default function TeamPage() {
+  const t = useTranslations();
   return (
     <PageContainer
-      pageTitle='Team Management'
-      pageDescription='Manage your workspace team, members, roles, security and more.'
+      pageTitle={t('page.team_management')}
+      pageDescription={t('page.manage_your_workspace_team_members_roles')}
       infoContent={teamInfoContent}
     >
       <OrganizationProfile />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 73642ee..2182292 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,5 @@
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages } from 'next-intl/server';
 import Providers from '@/components/layout/providers';
 import { Toaster } from '@/components/ui/sonner';
 import { fontVariables } from '@/components/themes/font.config';
@@ -25,6 +27,7 @@ export const viewport: Viewport = {
 };
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const messages = await getMessages();
   const cookieStore = await cookies();
   const activeThemeValue = cookieStore.get('active_theme')?.value;
   const isValidTheme = THEMES.some((t) => t.value === activeThemeValue);
@@ -52,6 +55,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           fontVariables
         )}
       >
+        <NextIntlClientProvider messages={messages}>
         <NextTopLoader color='var(--primary)' showSpinner={false} />
         <NuqsAdapter>
           <ThemeProvider
@@ -67,6 +71,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             </Providers>
           </ThemeProvider>
         </NuqsAdapter>
+      </NextIntlClientProvider>
       </body>
     </html>
   );
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 92cddb5..b155213 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,10 +1,12 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useRouter } from 'next/navigation';
 
 import { Button } from '@/components/ui/button';
 
 export default function NotFound() {
+  const t = useTranslations();
   const router = useRouter();
 
   return (
@@ -12,14 +14,14 @@ export default function NotFound() {
       <span className='from-foreground bg-linear-to-b to-transparent bg-clip-text text-[10rem] leading-none font-extrabold text-transparent'>
         404
       </span>
-      <h2 className='font-heading my-2 text-2xl font-bold'>Something&apos;s missing</h2>
-      <p>Sorry, the page you are looking for doesn&apos;t exist or has been moved.</p>
+      <h2 className='font-heading my-2 text-2xl font-bold'>{t('not_found.something_apos_s_missing')}</h2>
+      <p>{t('not_found.sorry_the_page_you_are_looking_for_doesn')}</p>
       <div className='mt-8 flex justify-center gap-2'>
         <Button onClick={() => router.back()} variant='default' size='lg'>
-          Go back
+          {t('not_found.go_back')}
         </Button>
         <Button onClick={() => router.push('/dashboard')} variant='ghost' size='lg'>
-          Back to Home
+          {t('not_found.back_to_home')}
         </Button>
       </div>
     </div>
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
index 1ded132..e78b870 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -8,37 +9,32 @@ export const metadata: Metadata = {
 };
 
 export default function PrivacyPolicyPage() {
+  const t = useTranslations();
   return (
     <div className='min-h-screen px-4 py-12 sm:px-6 lg:px-8'>
       <div className='mx-auto max-w-3xl space-y-8'>
         {/* Main Heading */}
-        <h1 className='text-foreground text-3xl font-bold'>Privacy Policy</h1>
+        <h1 className='text-foreground text-3xl font-bold'>{t('page.privacy_policy')}</h1>
 
         {/* Introduction */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Introduction</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.introduction')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            This Privacy Policy explains how we handle your personal information when you use our
-            application. We are committed to protecting your privacy and ensuring transparency about
-            our data practices. Please read this policy carefully to understand how we collect, use,
-            and safeguard your information.
+            {t('page.this_privacy_policy_explains_how_we_hand')}
           </p>
         </section>
 
         {/* Data Collection */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Data Collection</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.data_collection')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            Our application collects minimal data necessary for authentication purposes. When you
-            sign in using our authentication provider, we receive basic profile information such as
-            your email address and name. This data is used solely to identify you within the
-            application and provide personalized access to features.
+            {t('page.our_application_collects_minimal_data_ne')}
           </p>
         </section>
 
         {/* Auth handled by Clerk */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Authentication by Clerk</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.authentication_by_clerk')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
             Our application uses{' '}
             <a
@@ -66,29 +62,23 @@ export default function PrivacyPolicyPage() {
 
         {/* No data misuse */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>No Data Misuse</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.no_data_misuse')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            We take your privacy seriously. We want to assure you that your personal data is never
-            sold, rented, or shared with third parties for marketing or commercial purposes. Your
-            information is used exclusively for the intended functionality of this application and
-            is never misused or exploited in any way.
+            {t('page.we_take_your_privacy_seriously_we_want_t')}
           </p>
         </section>
 
         {/* Demo purpose */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Demo Application</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.demo_application')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            Please note that this is a demo application created for demonstration and educational
-            purposes. It showcases various features and technologies but should not be considered a
-            production-ready service. Any data you provide may be temporary and could be removed at
-            any time as part of regular maintenance.
+            {t('page.please_note_that_this_is_a_demo_applicat')}
           </p>
         </section>
 
         {/* Contact */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Contact Us</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.contact_us')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
             If you have any questions, concerns, or requests regarding this Privacy Policy or our
             data practices, please feel free to contact us at{' '}
@@ -104,7 +94,7 @@ export default function PrivacyPolicyPage() {
 
         {/* Last Updated */}
         <div className='border-border border-t pt-4'>
-          <p className='text-muted-foreground text-sm'>Last updated: February 2026</p>
+          <p className='text-muted-foreground text-sm'>{t('page.last_updated_february_2026')}</p>
         </div>
       </div>
     </div>
diff --git a/src/app/terms-of-service/page.tsx b/src/app/terms-of-service/page.tsx
index f26e7f1..cb885aa 100644
--- a/src/app/terms-of-service/page.tsx
+++ b/src/app/terms-of-service/page.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -8,12 +9,13 @@ export const metadata: Metadata = {
 };
 
 export default function TermsOfServicePage() {
+  const t = useTranslations();
   return (
     <div className='min-h-screen px-4 py-12 sm:px-6 lg:px-8'>
       <div className='mx-auto max-w-3xl space-y-8'>
         {/* Main Heading */}
         <div className='text-center'>
-          <h1 className='text-foreground text-3xl font-bold'>Terms of Service</h1>
+          <h1 className='text-foreground text-3xl font-bold'>{t('page.terms_of_service')}</h1>
           <p className='text-muted-foreground mt-2 text-sm'>
             Last updated:{' '}
             {new Date().toLocaleDateString('en-US', {
@@ -26,75 +28,56 @@ export default function TermsOfServicePage() {
 
         {/* Introduction */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Introduction</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.introduction')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            Welcome to our application. These Terms of Service govern your access to and use of our
-            platform. By accessing or using this application, you agree to be bound by these terms.
-            Please read them carefully before proceeding to use our services.
+            {t('page.welcome_to_our_application_these_terms_o')}
           </p>
         </section>
 
         {/* Demo Purpose */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Demo Purpose</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.demo_purpose')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            This application is provided solely for demonstration and educational purposes. It is
-            not intended for production use, and we make no guarantees regarding its suitability for
-            any specific purpose. All data and functionality are provided as-is for showcasing
-            features and capabilities only.
+            {t('page.this_application_is_provided_solely_for')}
           </p>
         </section>
 
         {/* Open Source */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Open Source</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.open_source')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            This is an open-source project. The source code is available for review, modification,
-            and distribution under the applicable open-source license. We encourage community
-            contributions and feedback to help improve the project. Please refer to the project
-            repository for licensing details and contribution guidelines.
+            {t('page.this_is_an_open_source_project_the_sourc')}
           </p>
         </section>
 
         {/* No Warranty */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>No Warranty</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.no_warranty')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            This application is provided &ldquo;as is&rdquo; without any warranties of any kind,
-            either express or implied. We expressly disclaim all warranties, including but not
-            limited to implied warranties of merchantability, fitness for a particular purpose, and
-            non-infringement. We do not warrant that the application will be uninterrupted, timely,
-            secure, or error-free.
+            {t('page.this_application_is_provided_ldquo_as_is')}
           </p>
         </section>
 
         {/* Data Usage */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Data Usage</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.data_usage')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            Any data you provide while using this demo application may be stored temporarily for the
-            purpose of demonstrating functionality. We do not guarantee the security or privacy of
-            any data entered into this demo application. Please do not enter sensitive, personal, or
-            confidential information. Data may be deleted or reset at any time without notice.
+            {t('page.any_data_you_provide_while_using_this_de')}
           </p>
         </section>
 
         {/* Changes */}
         <section>
-          <h2 className='text-foreground mb-3 text-xl font-semibold'>Changes to These Terms</h2>
+          <h2 className='text-foreground mb-3 text-xl font-semibold'>{t('page.changes_to_these_terms')}</h2>
           <p className='text-muted-foreground text-base leading-relaxed'>
-            We reserve the right to modify or replace these Terms of Service at any time at our sole
-            discretion. It is your responsibility to review these terms periodically for changes.
-            Your continued use of the application following the posting of any changes constitutes
-            acceptance of those changes.
+            {t('page.we_reserve_the_right_to_modify_or_replac')}
           </p>
         </section>
 
         {/* Contact */}
         <section className='border-border border-t pt-4'>
           <p className='text-muted-foreground text-center text-sm'>
-            If you have any questions about these Terms of Service, please refer to the project
-            documentation or repository for more information.
+            {t('page.if_you_have_any_questions_about_these_te')}
           </p>
         </section>
       </div>
diff --git a/src/components/file-uploader.tsx b/src/components/file-uploader.tsx
index ba5344a..682e068 100644
--- a/src/components/file-uploader.tsx
+++ b/src/components/file-uploader.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Icons } from '@/components/icons';
 import Image from 'next/image';
@@ -253,6 +254,7 @@ interface FileCardProps {
 }
 
 function FileCard({ file, progress, onRemove }: FileCardProps) {
+  const t = useTranslations();
   return (
     <div className='relative flex items-center space-x-4'>
       <div className='flex flex-1 space-x-4'>
@@ -284,7 +286,7 @@ function FileCard({ file, progress, onRemove }: FileCardProps) {
           className='size-8 rounded-full'
         >
           <Icons.close className='text-muted-foreground' />
-          <span className='sr-only'>Remove file</span>
+          <span className='sr-only'>{t('file_uploader.remove_file')}</span>
         </Button>
       </div>
     </div>
diff --git a/src/components/forms/demo-form.tsx b/src/components/forms/demo-form.tsx
index b2dd211..551bf36 100644
--- a/src/components/forms/demo-form.tsx
+++ b/src/components/forms/demo-form.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import * as React from 'react';
 import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
@@ -109,6 +110,7 @@ function ComboboxField({
   isTouched: boolean;
   isValid: boolean;
 }) {
+  const t = useTranslations();
   const [open, setOpen] = React.useState(false);
   const selected = frameworkOptions.find((o) => o.value === value);
   return (
@@ -129,9 +131,9 @@ function ComboboxField({
       </PopoverTrigger>
       <PopoverContent className='w-[--radix-popover-trigger-width] p-0'>
         <Command>
-          <CommandInput placeholder='Search...' />
+          <CommandInput placeholder={t('demo_form.search')} />
           <CommandList>
-            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandEmpty>{t('demo_form.no_framework_found')}</CommandEmpty>
             <CommandGroup>
               {frameworkOptions.map((opt) => (
                 <CommandItem
@@ -168,6 +170,7 @@ function TagsField({
   onPush: (val: string) => void;
   onRemove: (idx: number) => void;
 }) {
+  const t = useTranslations();
   const [tagInput, setTagInput] = React.useState('');
 
   const addTag = () => {
@@ -190,10 +193,10 @@ function TagsField({
               addTag();
             }
           }}
-          placeholder='Type and press Enter...'
+          placeholder={t('demo_form.type_and_press_enter')}
         />
         <Button type='button' variant='secondary' onClick={addTag}>
-          Add
+          {t('demo_form.add')}
         </Button>
       </div>
       {values.length > 0 && (
@@ -255,6 +258,7 @@ type DemoFormValues = {
 };
 
 export default function DemoForm() {
+  const t = useTranslations();
   const form = useAppForm({
     defaultValues: {
       name: '',
@@ -305,23 +309,23 @@ export default function DemoForm() {
     <div className='grid grid-cols-1 gap-6 xl:grid-cols-[1fr_320px]'>
       <Card>
         <CardHeader>
-          <CardTitle className='text-2xl font-bold'>All Form Inputs Demo</CardTitle>
+          <CardTitle className='text-2xl font-bold'>{t('demo_form.all_form_inputs_demo')}</CardTitle>
           <p className='text-muted-foreground'>
-            Every possible form input — built with TanStack Form + shadcn/ui
+            {t('demo_form.every_possible_form_input_built_with_tan')}
           </p>
         </CardHeader>
         <CardContent>
           <form.AppForm>
             <form.Form className='space-y-6'>
               {/* ─── TEXT INPUTS (flat pattern + field-level onBlur validation) ─── */}
-              <SectionTitle>Text Inputs</SectionTitle>
+              <SectionTitle>{t('demo_form.text_inputs')}</SectionTitle>
 
               <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
                 <FormTextField
                   name='name'
-                  label='Full Name'
+                  label={t('demo_form.full_name')}
                   required
-                  placeholder='John Doe'
+                  placeholder={t('demo_form.john_doe')}
                   validators={{
                     onBlur: z.string().min(2, 'Name must be at least 2 characters')
                   }}
@@ -329,10 +333,10 @@ export default function DemoForm() {
                 {/* Async validation: simulated server-side email check */}
                 <FormTextField
                   name='email'
-                  label='Email'
+                  label={t('demo_form.email')}
                   required
                   type='email'
-                  placeholder='john@example.com'
+                  placeholder={t('demo_form.john_example_com')}
                   validators={{
                     onBlur: z.string().email('Invalid email address'),
                     onChangeAsync: async ({ value }: { value: string }) => {
@@ -349,17 +353,17 @@ export default function DemoForm() {
                 />
                 <FormTextField
                   name='password'
-                  label='Password'
+                  label={t('demo_form.password')}
                   required
                   type='password'
-                  placeholder='Min 8 characters'
+                  placeholder={t('demo_form.min_8_characters')}
                   validators={{
                     onBlur: z.string().min(8, 'Password must be at least 8 characters')
                   }}
                 />
                 <FormTextField
                   name='age'
-                  label='Age'
+                  label={t('demo_form.age')}
                   required
                   type='number'
                   min={18}
@@ -371,7 +375,7 @@ export default function DemoForm() {
                 />
                 <FormTextField
                   name='phone'
-                  label='Phone'
+                  label={t('demo_form.phone')}
                   required
                   type='tel'
                   placeholder='+1 (555) 000-0000'
@@ -381,18 +385,18 @@ export default function DemoForm() {
                 />
                 <FormTextField
                   name='website'
-                  label='Website'
+                  label={t('demo_form.website')}
                   type='url'
-                  placeholder='https://example.com'
+                  placeholder={t('demo_form.https_example_com')}
                 />
               </div>
 
               {/* ─── TEXTAREA (flat pattern + onBlur validation) ─── */}
               <FormTextareaField
                 name='bio'
-                label='Bio'
+                label={t('demo_form.bio')}
                 required
-                placeholder='Tell us about yourself...'
+                placeholder={t('demo_form.tell_us_about_yourself')}
                 maxLength={500}
                 rows={4}
                 validators={{
@@ -401,16 +405,16 @@ export default function DemoForm() {
               />
 
               {/* ─── SELECT & COMBOBOX ─── */}
-              <SectionTitle>Select & Combobox</SectionTitle>
+              <SectionTitle>{t('demo_form.select_combobox')}</SectionTitle>
 
               <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
                 {/* Listener: logs country changes (replace with dependent field reset) */}
                 <FormSelectField
                   name='country'
-                  label='Country'
+                  label={t('demo_form.country')}
                   required
                   options={countryOptions}
-                  placeholder='Select your country'
+                  placeholder={t('demo_form.select_your_country')}
                   validators={{
                     onBlur: z.string().min(1, 'Please select a country')
                   }}
@@ -448,7 +452,7 @@ export default function DemoForm() {
               </div>
 
               {/* ─── CHECKBOX & RADIO ─── */}
-              <SectionTitle>Checkbox & Radio</SectionTitle>
+              <SectionTitle>{t('demo_form.checkbox_radio')}</SectionTitle>
 
               {/* Checkbox Group — array mode, needs AppField */}
               <form.AppField
@@ -497,7 +501,7 @@ export default function DemoForm() {
               {/* Radio Group (flat pattern + onBlur validation) */}
               <FormRadioGroupField
                 name='gender'
-                label='Gender'
+                label={t('demo_form.gender')}
                 required
                 options={genderOptions}
                 validators={{
@@ -506,13 +510,13 @@ export default function DemoForm() {
               />
 
               {/* ─── TOGGLE & SWITCH ─── */}
-              <SectionTitle>Toggle & Switch</SectionTitle>
+              <SectionTitle>{t('demo_form.toggle_switch')}</SectionTitle>
 
               {/* Switch (flat pattern) */}
               <FormSwitchField
                 name='newsletter'
-                label='Subscribe to Newsletter'
-                description='Receive updates about new features and products'
+                label={t('demo_form.subscribe_to_newsletter')}
+                description={t('demo_form.receive_updates_about_new_features_and_p')}
               />
 
               {/* Toggle Group — array mode, needs AppField */}
@@ -571,19 +575,19 @@ export default function DemoForm() {
               />
 
               {/* ─── SLIDER (flat pattern) ─── */}
-              <SectionTitle>Slider</SectionTitle>
+              <SectionTitle>{t('demo_form.slider')}</SectionTitle>
 
               <FormSliderField
                 name='rating'
-                label='Overall Rating'
-                description='Rate your experience (0-10)'
+                label={t('demo_form.overall_rating')}
+                description={t('demo_form.rate_your_experience_0_10')}
                 min={0}
                 max={10}
                 step={0.5}
               />
 
               {/* ─── DATE & TIME (custom, need AppField) ─── */}
-              <SectionTitle>Date & Time</SectionTitle>
+              <SectionTitle>{t('demo_form.date_time')}</SectionTitle>
 
               <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
                 {/* Date Picker */}
@@ -695,7 +699,7 @@ export default function DemoForm() {
               />
 
               {/* ─── SPECIAL INPUTS (custom, need AppField) ─── */}
-              <SectionTitle>Special Inputs</SectionTitle>
+              <SectionTitle>{t('demo_form.special_inputs')}</SectionTitle>
 
               <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
                 {/* OTP Input */}
@@ -782,12 +786,12 @@ export default function DemoForm() {
               />
 
               {/* ─── FILE UPLOAD (flat pattern) ─── */}
-              <SectionTitle>File Upload</SectionTitle>
+              <SectionTitle>{t('demo_form.file_upload')}</SectionTitle>
 
               <FormFileUploadField
                 name='avatar'
-                label='Profile Picture'
-                description='Drag & drop or click to upload (max 5MB)'
+                label={t('demo_form.profile_picture')}
+                description={t('demo_form.drag_drop_or_click_to_upload_max_5mb')}
                 maxSize={5000000}
                 maxFiles={1}
               />
@@ -801,9 +805,9 @@ export default function DemoForm() {
                   onClick={() => form.reset()}
                   className='flex-1'
                 >
-                  Reset
+                  {t('demo_form.reset')}
                 </Button>
-                <form.SubmitButton className='flex-1'>Submit Form</form.SubmitButton>
+                <form.SubmitButton className='flex-1'>{t('demo_form.submit_form')}</form.SubmitButton>
               </div>
             </form.Form>
           </form.AppForm>
@@ -814,7 +818,7 @@ export default function DemoForm() {
       <div className='xl:sticky xl:top-16 xl:self-start'>
         <Card>
           <CardHeader>
-            <CardTitle>Form Data Preview</CardTitle>
+            <CardTitle>{t('demo_form.form_data_preview')}</CardTitle>
           </CardHeader>
           <CardContent>
             <pre className='bg-muted max-h-[calc(100vh-8rem)] overflow-auto rounded-lg p-4 text-xs'>
diff --git a/src/components/layout/user-nav.tsx b/src/components/layout/user-nav.tsx
index ff6ca1e..0b7ddb5 100644
--- a/src/components/layout/user-nav.tsx
+++ b/src/components/layout/user-nav.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -13,6 +14,7 @@ import { UserAvatarProfile } from '@/components/user-avatar-profile';
 import { SignOutButton, useUser } from '@clerk/nextjs';
 import { useRouter } from 'next/navigation';
 export function UserNav() {
+  const t = useTranslations();
   const { user } = useUser();
   const router = useRouter();
   if (user) {
@@ -35,11 +37,11 @@ export function UserNav() {
           <DropdownMenuSeparator />
           <DropdownMenuGroup>
             <DropdownMenuItem onClick={() => router.push('/dashboard/profile')}>
-              Profile
+              {t('user_nav.profile')}
             </DropdownMenuItem>
-            <DropdownMenuItem>Billing</DropdownMenuItem>
-            <DropdownMenuItem>Settings</DropdownMenuItem>
-            <DropdownMenuItem>New Team</DropdownMenuItem>
+            <DropdownMenuItem>{t('user_nav.billing')}</DropdownMenuItem>
+            <DropdownMenuItem>{t('user_nav.settings')}</DropdownMenuItem>
+            <DropdownMenuItem>{t('user_nav.new_team')}</DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
diff --git a/src/components/modal/alert-modal.tsx b/src/components/modal/alert-modal.tsx
index c72ad73..c1b503a 100644
--- a/src/components/modal/alert-modal.tsx
+++ b/src/components/modal/alert-modal.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Modal } from '@/components/ui/modal';
@@ -11,6 +12,7 @@ interface AlertModalProps {
 }
 
 export function AlertModal({ isOpen, onClose, onConfirm, loading }: AlertModalProps) {
+  const t = useTranslations();
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
@@ -23,17 +25,17 @@ export function AlertModal({ isOpen, onClose, onConfirm, loading }: AlertModalPr
 
   return (
     <Modal
-      title='Are you sure?'
-      description='This action cannot be undone.'
+      title={t('alert_modal.are_you_sure')}
+      description={t('alert_modal.this_action_cannot_be_undone')}
       isOpen={isOpen}
       onClose={onClose}
     >
       <div className='flex w-full items-center justify-end space-x-2 pt-6'>
         <Button disabled={loading} variant='outline' onClick={onClose}>
-          Cancel
+          {t('alert_modal.cancel')}
         </Button>
         <Button disabled={loading} variant='destructive' onClick={onConfirm}>
-          Continue
+          {t('alert_modal.continue')}
         </Button>
       </div>
     </Modal>
diff --git a/src/components/nav-main.tsx b/src/components/nav-main.tsx
index 077e176..b8469c0 100644
--- a/src/components/nav-main.tsx
+++ b/src/components/nav-main.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Icons } from '@/components/icons';
 
@@ -30,9 +31,10 @@ export function NavMain({
     }[];
   }[];
 }) {
+  const t = useTranslations();
   return (
     <SidebarGroup>
-      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarGroupLabel>{t('nav_main.platform')}</SidebarGroupLabel>
       <SidebarGroupContent className='flex flex-col gap-2'>
         <SidebarMenu>
           {items.map((item) => (
diff --git a/src/components/nav-projects.tsx b/src/components/nav-projects.tsx
index bf36d15..45bf29e 100644
--- a/src/components/nav-projects.tsx
+++ b/src/components/nav-projects.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Icons } from '@/components/icons';
 import {
@@ -28,11 +29,12 @@ export function NavProjects({
     icon: Icon;
   }[];
 }) {
+  const t = useTranslations();
   const { isMobile } = useSidebar();
 
   return (
     <SidebarGroup className='group-data-[collapsible=icon]:hidden'>
-      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarGroupLabel>{t('nav_projects.projects')}</SidebarGroupLabel>
       <SidebarMenu>
         {projects.map((item) => (
           <SidebarMenuItem key={item.name}>
@@ -74,7 +76,7 @@ export function NavProjects({
         <SidebarMenuItem>
           <SidebarMenuButton className='text-sidebar-foreground/70'>
             <Icons.dots className='text-sidebar-foreground/70' />
-            <span>More</span>
+            <span>{t('nav_projects.more')}</span>
           </SidebarMenuButton>
         </SidebarMenuItem>
       </SidebarMenu>
diff --git a/src/components/nav-user.tsx b/src/components/nav-user.tsx
index cf647b3..67dd081 100644
--- a/src/components/nav-user.tsx
+++ b/src/components/nav-user.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Icons } from '@/components/icons';
 
@@ -28,6 +29,7 @@ export function NavUser({
     avatar: string;
   };
 }) {
+  const t = useTranslations();
   const { isMobile } = useSidebar();
 
   return (
@@ -41,7 +43,7 @@ export function NavUser({
             >
               <Avatar className='h-8 w-8 rounded-lg'>
                 <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className='rounded-lg'>CN</AvatarFallback>
+                <AvatarFallback className='rounded-lg'>{t('nav_user.cn')}</AvatarFallback>
               </Avatar>
               <div className='grid flex-1 text-left text-sm leading-tight'>
                 <span className='truncate font-semibold'>{user.name}</span>
@@ -60,7 +62,7 @@ export function NavUser({
               <div className='flex items-center gap-2 px-1 py-1.5 text-left text-sm'>
                 <Avatar className='h-8 w-8 rounded-lg'>
                   <AvatarImage src={user.avatar} alt={user.name} />
-                  <AvatarFallback className='rounded-lg'>CN</AvatarFallback>
+                  <AvatarFallback className='rounded-lg'>{t('nav_user.cn')}</AvatarFallback>
                 </Avatar>
                 <div className='grid flex-1 text-left text-sm leading-tight'>
                   <span className='truncate font-semibold'>{user.name}</span>
diff --git a/src/components/org-switcher.tsx b/src/components/org-switcher.tsx
index 1afb098..aac0fda 100644
--- a/src/components/org-switcher.tsx
+++ b/src/components/org-switcher.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useAuth, useOrganizationList } from '@clerk/nextjs';
 import { Icons } from '@/components/icons';
@@ -23,6 +24,7 @@ import {
 import { useEffect } from 'react';
 
 export function OrgSwitcher() {
+  const t = useTranslations();
   const { isMobile, state } = useSidebar();
   const router = useRouter();
   const { isLoaded, setActive, userMemberships } = useOrganizationList({
@@ -74,8 +76,8 @@ export function OrgSwitcher() {
                   : 'visible max-w-full opacity-100'
               }`}
             >
-              <span className='truncate font-medium'>Loading...</span>
-              <span className='text-muted-foreground truncate text-xs'>Organizations</span>
+              <span className='truncate font-medium'>{t('org_switcher.loading')}</span>
+              <span className='text-muted-foreground truncate text-xs'>{t('org_switcher.organizations')}</span>
             </div>
           </SidebarMenuButton>
         </SidebarMenuItem>
@@ -103,8 +105,8 @@ export function OrgSwitcher() {
                   : 'visible max-w-full opacity-100'
               }`}
             >
-              <span className='truncate font-medium'>Create organization</span>
-              <span className='text-muted-foreground truncate text-xs'>Get started</span>
+              <span className='truncate font-medium'>{t('org_switcher.create_organization')}</span>
+              <span className='text-muted-foreground truncate text-xs'>{t('org_switcher.get_started')}</span>
             </div>
             <Icons.chevronsUpDown
               className={`ml-auto transition-all duration-200 ease-in-out ${
@@ -177,7 +179,7 @@ export function OrgSwitcher() {
             sideOffset={4}
           >
             <DropdownMenuLabel className='text-muted-foreground text-xs'>
-              Organizations
+              {t('org_switcher.organizations')}
             </DropdownMenuLabel>
             {userMemberships.data.map((membership, index) => {
               const isActive = membership.organization.id === orgId;
@@ -216,7 +218,7 @@ export function OrgSwitcher() {
               <div className='flex size-6 items-center justify-center rounded-md border bg-transparent'>
                 <Icons.add className='size-4' />
               </div>
-              <div className='text-muted-foreground font-medium'>Add organization</div>
+              <div className='text-muted-foreground font-medium'>{t('org_switcher.add_organization')}</div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/src/components/themes/theme-mode-toggle.tsx b/src/components/themes/theme-mode-toggle.tsx
index 6e4ec13..831c9c9 100644
--- a/src/components/themes/theme-mode-toggle.tsx
+++ b/src/components/themes/theme-mode-toggle.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Icons } from '@/components/icons';
 import { useTheme } from 'next-themes';
@@ -9,6 +10,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { Kbd } from '@/components/ui/kbd';
 
 export function ThemeModeToggle() {
+  const t = useTranslations();
   const { setTheme, resolvedTheme } = useTheme();
 
   const handleThemeToggle = React.useCallback(
@@ -44,7 +46,7 @@ export function ThemeModeToggle() {
           onClick={handleThemeToggle}
         >
           <Icons.brightness />
-          <span className='sr-only'>Toggle theme</span>
+          <span className='sr-only'>{t('theme_mode_toggle.toggle_theme')}</span>
         </Button>
       </TooltipTrigger>
       <TooltipContent>
diff --git a/src/components/themes/theme-selector.tsx b/src/components/themes/theme-selector.tsx
index 7eb09e6..023bc49 100644
--- a/src/components/themes/theme-selector.tsx
+++ b/src/components/themes/theme-selector.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useThemeConfig } from '@/components/themes/active-theme';
 import { Label } from '@/components/ui/label';
@@ -17,12 +18,13 @@ import { Kbd } from '@/components/ui/kbd';
 import { THEMES } from './theme.config';
 
 export function ThemeSelector() {
+  const t = useTranslations();
   const { activeTheme, setActiveTheme } = useThemeConfig();
 
   return (
     <div className='flex items-center gap-2'>
       <Label htmlFor='theme-selector' className='sr-only'>
-        Theme
+        {t('theme_selector.theme')}
       </Label>
       <Select value={activeTheme} onValueChange={setActiveTheme}>
         <SelectTrigger
@@ -32,9 +34,9 @@ export function ThemeSelector() {
           <span className='text-muted-foreground hidden sm:block'>
             <Icons.palette />
           </span>
-          <span className='text-muted-foreground block sm:hidden'>Theme</span>
-          <SelectValue placeholder='Select a theme' />
-          <Kbd>T T</Kbd>
+          <span className='text-muted-foreground block sm:hidden'>{t('theme_selector.theme')}</span>
+          <SelectValue placeholder={t('theme_selector.select_a_theme')} />
+          <Kbd>{t('theme_selector.t_t')}</Kbd>
         </SelectTrigger>
         <SelectContent align='end'>
           {THEMES.length > 0 && (
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index b72b86b..0b89c25 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { Icons } from '@/components/icons';
@@ -5,7 +6,8 @@ import { Icons } from '@/components/icons';
 import { cn } from '@/lib/utils';
 
 function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
-  return <nav aria-label='breadcrumb' data-slot='breadcrumb' {...props} />;
+  const t = useTranslations();
+  return <nav aria-label={t('breadcrumb.breadcrumb')} data-slot='breadcrumb' {...props} />;
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
@@ -77,6 +79,7 @@ function BreadcrumbSeparator({ children, className, ...props }: React.ComponentP
 }
 
 function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+  const t = useTranslations();
   return (
     <span
       data-slot='breadcrumb-ellipsis'
@@ -86,7 +89,7 @@ function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'
       {...props}
     >
       <Icons.moreHorizontal className='size-4' />
-      <span className='sr-only'>More</span>
+      <span className='sr-only'>{t('breadcrumb.more')}</span>
     </span>
   );
 }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index a27a7f3..845a272 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -43,6 +44,7 @@ function DialogContent({
   children,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  const t = useTranslations();
   return (
     <DialogPortal data-slot='dialog-portal'>
       <DialogOverlay />
@@ -57,7 +59,7 @@ function DialogContent({
         {children}
         <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
           <Icons.close />
-          <span className='sr-only'>Close</span>
+          <span className='sr-only'>{t('dialog.close')}</span>
         </DialogPrimitive.Close>
       </DialogPrimitive.Content>
     </DialogPortal>
diff --git a/src/components/ui/info-button.tsx b/src/components/ui/info-button.tsx
index 8fa4343..8ad0683 100644
--- a/src/components/ui/info-button.tsx
+++ b/src/components/ui/info-button.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import * as React from 'react';
 import { Icons } from '@/components/icons';
@@ -19,6 +20,7 @@ export function InfoButton({
   size = 'icon',
   ...props
 }: InfoButtonProps) {
+  const t = useTranslations();
   const { setContent, setOpen } = useInfobar();
 
   // Set content on mount so the infobar has it ready, but don't force it open
@@ -41,11 +43,11 @@ export function InfoButton({
       size={size}
       className={cn('shrink-0', className)}
       onClick={handleClick}
-      aria-label='Show information'
+      aria-label={t('info_button.show_information')}
       {...props}
     >
       <Icons.info className='h-4 w-4' />
-      <span className='sr-only'>Show information</span>
+      <span className='sr-only'>{t('info_button.show_information')}</span>
     </Button>
   );
 }
diff --git a/src/components/ui/infobar.tsx b/src/components/ui/infobar.tsx
index 49494d2..877aca3 100644
--- a/src/components/ui/infobar.tsx
+++ b/src/components/ui/infobar.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -228,6 +229,7 @@ function Infobar({
   variant?: 'sidebar' | 'floating' | 'inset';
   collapsible?: 'offcanvas' | 'icon' | 'none';
 }) {
+  const t = useTranslations();
   const { isMobile, state, setOpen, openMobile, setOpenMobile, isPathnameChanging } = useInfobar();
 
   if (collapsible === 'none') {
@@ -268,8 +270,8 @@ function Infobar({
           side={side}
         >
           <SheetHeader className='sr-only'>
-            <SheetTitle>Infobar</SheetTitle>
-            <SheetDescription>Displays the mobile infobar.</SheetDescription>
+            <SheetTitle>{t('infobar.infobar')}</SheetTitle>
+            <SheetDescription>{t('infobar.displays_the_mobile_infobar')}</SheetDescription>
           </SheetHeader>
           <div className='flex h-full w-full flex-col'>{children}</div>
         </SheetContent>
@@ -313,6 +315,7 @@ function Infobar({
 }
 
 function InfobarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+  const t = useTranslations();
   const { toggleInfobar } = useInfobar();
 
   return (
@@ -322,7 +325,7 @@ function InfobarTrigger({ className, onClick, ...props }: React.ComponentProps<t
       variant='ghost'
       size='icon'
       className={cn('size-7', className)}
-      aria-label='Close info panel'
+      aria-label={t('infobar.close_info_panel')}
       onClick={(event) => {
         onClick?.(event);
         toggleInfobar();
@@ -335,16 +338,17 @@ function InfobarTrigger({ className, onClick, ...props }: React.ComponentProps<t
 }
 
 function InfobarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const t = useTranslations();
   const { toggleInfobar } = useInfobar();
 
   return (
     <button
       data-infobar='rail'
       data-slot='infobar-rail'
-      aria-label='Toggle Infobar'
+      aria-label={t('infobar.toggle_infobar')}
       tabIndex={-1}
       onClick={toggleInfobar}
-      title='Toggle Infobar'
+      title={t('infobar.toggle_infobar')}
       className={cn(
         'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
         'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index b3ffc78..a629bc3 100644
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import * as React from 'react';
 import { Icons } from '@/components/icons';
 
@@ -5,9 +6,10 @@ import { cn } from '@/lib/utils';
 import { Button, buttonVariants } from '@/components/ui/button';
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+  const t = useTranslations();
   return (
     <nav
-      aria-label='pagination'
+      aria-label={t('pagination.pagination')}
       data-slot='pagination'
       className={cn('mx-auto flex w-full justify-center', className)}
       {...props}
@@ -54,34 +56,37 @@ function PaginationLink({ className, isActive, size = 'icon', ...props }: Pagina
 }
 
 function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+  const t = useTranslations();
   return (
     <PaginationLink
-      aria-label='Go to previous page'
+      aria-label={t('pagination.go_to_previous_page')}
       size='default'
       className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
       {...props}
     >
       <Icons.chevronLeft />
-      <span className='hidden sm:block'>Previous</span>
+      <span className='hidden sm:block'>{t('pagination.previous')}</span>
     </PaginationLink>
   );
 }
 
 function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+  const t = useTranslations();
   return (
     <PaginationLink
-      aria-label='Go to next page'
+      aria-label={t('pagination.go_to_next_page')}
       size='default'
       className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
       {...props}
     >
-      <span className='hidden sm:block'>Next</span>
+      <span className='hidden sm:block'>{t('pagination.next')}</span>
       <Icons.chevronRight />
     </PaginationLink>
   );
 }
 
 function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+  const t = useTranslations();
   return (
     <span
       aria-hidden
@@ -90,7 +95,7 @@ function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'
       {...props}
     >
       <Icons.moreHorizontal className='size-4' />
-      <span className='sr-only'>More pages</span>
+      <span className='sr-only'>{t('pagination.more_pages')}</span>
     </span>
   );
 }
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index c3c4256..6969f4e 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import * as React from 'react';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
@@ -46,6 +47,7 @@ function SheetContent({
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: 'top' | 'right' | 'bottom' | 'left';
 }) {
+  const t = useTranslations();
   return (
     <SheetPortal>
       <SheetOverlay />
@@ -68,7 +70,7 @@ function SheetContent({
         {children}
         <SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none'>
           <Icons.close className='size-4' />
-          <span className='sr-only'>Close</span>
+          <span className='sr-only'>{t('sheet.close')}</span>
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
     </SheetPortal>
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 3c076c9..59dd62d 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -154,6 +155,7 @@ function Sidebar({
   variant?: 'sidebar' | 'floating' | 'inset';
   collapsible?: 'offcanvas' | 'icon' | 'none';
 }) {
+  const t = useTranslations();
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
   if (collapsible === 'none') {
@@ -187,8 +189,8 @@ function Sidebar({
           side={side}
         >
           <SheetHeader className='sr-only'>
-            <SheetTitle>Sidebar</SheetTitle>
-            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            <SheetTitle>{t('sidebar.sidebar')}</SheetTitle>
+            <SheetDescription>{t('sidebar.displays_the_mobile_sidebar')}</SheetDescription>
           </SheetHeader>
           <div className='flex h-full w-full flex-col'>{children}</div>
         </SheetContent>
@@ -245,6 +247,7 @@ function Sidebar({
 }
 
 function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+  const t = useTranslations();
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -261,22 +264,23 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
       {...props}
     >
       <Icons.panelLeft />
-      <span className='sr-only'>Toggle Sidebar</span>
+      <span className='sr-only'>{t('sidebar.toggle_sidebar')}</span>
     </Button>
   );
 }
 
 function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const t = useTranslations();
   const { toggleSidebar } = useSidebar();
 
   return (
     <button
       data-sidebar='rail'
       data-slot='sidebar-rail'
-      aria-label='Toggle Sidebar'
+      aria-label={t('sidebar.toggle_sidebar')}
       tabIndex={-1}
       onClick={toggleSidebar}
-      title='Toggle Sidebar'
+      title={t('sidebar.toggle_sidebar')}
       className={cn(
         'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
         'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
index c195109..c45c8be 100644
--- a/src/components/ui/spinner.tsx
+++ b/src/components/ui/spinner.tsx
@@ -1,12 +1,14 @@
+import { useTranslations } from 'next-intl';
 import { Icons } from '@/components/icons';
 
 import { cn } from '@/lib/utils';
 
 function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+  const t = useTranslations();
   return (
     <Icons.spinner
       role='status'
-      aria-label='Loading'
+      aria-label={t('spinner.loading')}
       className={cn('size-4 animate-spin', className)}
       {...props}
     />
diff --git a/src/components/ui/table/data-table-faceted-filter.tsx b/src/components/ui/table/data-table-faceted-filter.tsx
index 09d7d9c..04bc022 100644
--- a/src/components/ui/table/data-table-faceted-filter.tsx
+++ b/src/components/ui/table/data-table-faceted-filter.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import type { Option } from '@/types/data-table';
 import type { Column } from '@tanstack/react-table';
@@ -34,6 +35,7 @@ export function DataTableFacetedFilter<TData, TValue>({
   options,
   multiple
 }: DataTableFacetedFilterProps<TData, TValue>) {
+  const t = useTranslations();
   const [open, setOpen] = React.useState(false);
 
   const columnFilterValue = column?.getFilterValue();
@@ -124,7 +126,7 @@ export function DataTableFacetedFilter<TData, TValue>({
         <Command>
           <CommandInput placeholder={title} />
           <CommandList className='max-h-full'>
-            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandEmpty>{t('data_table_faceted_filter.no_results_found')}</CommandEmpty>
             <CommandGroup className='max-h-[18.75rem] overflow-x-hidden overflow-y-auto'>
               {options.map((option) => {
                 const isSelected = selectedValues.has(option.value);
diff --git a/src/components/ui/table/data-table-pagination.tsx b/src/components/ui/table/data-table-pagination.tsx
index ca7b366..066a667 100644
--- a/src/components/ui/table/data-table-pagination.tsx
+++ b/src/components/ui/table/data-table-pagination.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import type { Table } from '@tanstack/react-table';
 import { Icons } from '@/components/icons';
 
@@ -23,6 +24,7 @@ export function DataTablePagination<TData>({
   className,
   ...props
 }: DataTablePaginationProps<TData>) {
+  const t = useTranslations();
   return (
     <div
       className={cn(
@@ -43,7 +45,7 @@ export function DataTablePagination<TData>({
       </div>
       <div className='flex items-center gap-2 sm:gap-6 lg:gap-8'>
         <div className='hidden items-center space-x-2 sm:flex'>
-          <p className='text-sm font-medium whitespace-nowrap'>Rows per page</p>
+          <p className='text-sm font-medium whitespace-nowrap'>{t('data_table_pagination.rows_per_page')}</p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
@@ -67,7 +69,7 @@ export function DataTablePagination<TData>({
         </div>
         <div className='flex items-center space-x-1'>
           <Button
-            aria-label='Go to first page'
+            aria-label={t('data_table_pagination.go_to_first_page')}
             variant='outline'
             size='icon'
             className='hidden size-8 lg:flex'
@@ -77,7 +79,7 @@ export function DataTablePagination<TData>({
             <Icons.chevronsLeft />
           </Button>
           <Button
-            aria-label='Go to previous page'
+            aria-label={t('data_table_pagination.go_to_previous_page')}
             variant='outline'
             size='icon'
             className='size-8'
@@ -87,7 +89,7 @@ export function DataTablePagination<TData>({
             <ChevronLeftIcon />
           </Button>
           <Button
-            aria-label='Go to next page'
+            aria-label={t('data_table_pagination.go_to_next_page')}
             variant='outline'
             size='icon'
             className='size-8'
@@ -97,7 +99,7 @@ export function DataTablePagination<TData>({
             <ChevronRightIcon />
           </Button>
           <Button
-            aria-label='Go to last page'
+            aria-label={t('data_table_pagination.go_to_last_page')}
             variant='outline'
             size='icon'
             className='hidden size-8 lg:flex'
diff --git a/src/components/ui/table/data-table-slider-filter.tsx b/src/components/ui/table/data-table-slider-filter.tsx
index e8b0318..bdc23cb 100644
--- a/src/components/ui/table/data-table-slider-filter.tsx
+++ b/src/components/ui/table/data-table-slider-filter.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import type { Column } from '@tanstack/react-table';
 import * as React from 'react';
@@ -34,6 +35,7 @@ interface DataTableSliderFilterProps<TData> {
 }
 
 export function DataTableSliderFilter<TData>({ column, title }: DataTableSliderFilterProps<TData>) {
+  const t = useTranslations();
   const id = React.useId();
 
   const columnFilterValue = getIsValidRange(column.getFilterValue())
@@ -154,7 +156,7 @@ export function DataTableSliderFilter<TData>({ column, title }: DataTableSliderF
           </p>
           <div className='flex items-center gap-4'>
             <Label htmlFor={`${id}-from`} className='sr-only'>
-              From
+              {t('data_table_slider_filter.from')}
             </Label>
             <div className='relative'>
               <Input
@@ -178,7 +180,7 @@ export function DataTableSliderFilter<TData>({ column, title }: DataTableSliderF
               )}
             </div>
             <Label htmlFor={`${id}-to`} className='sr-only'>
-              to
+              {t('data_table_slider_filter.to')}
             </Label>
             <div className='relative'>
               <Input
@@ -215,7 +217,7 @@ export function DataTableSliderFilter<TData>({ column, title }: DataTableSliderF
           />
         </div>
         <Button aria-label={`Clear ${title} filter`} variant='outline' size='sm' onClick={onReset}>
-          Clear
+          {t('data_table_slider_filter.clear')}
         </Button>
       </PopoverContent>
     </Popover>
diff --git a/src/components/ui/table/data-table-view-options.tsx b/src/components/ui/table/data-table-view-options.tsx
index b0b21f8..7978d3c 100644
--- a/src/components/ui/table/data-table-view-options.tsx
+++ b/src/components/ui/table/data-table-view-options.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import type { Table } from '@tanstack/react-table';
 import { Icons } from '@/components/icons';
@@ -22,6 +23,7 @@ interface DataTableViewOptionsProps<TData> {
 }
 
 export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+  const t = useTranslations();
   const columns = React.useMemo(
     () =>
       table
@@ -34,7 +36,7 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
     <Popover>
       <PopoverTrigger asChild>
         <Button
-          aria-label='Toggle columns'
+          aria-label={t('data_table_view_options.toggle_columns')}
           variant='outline'
           size='sm'
           className='ml-auto hidden h-8 lg:flex'
@@ -46,9 +48,9 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
       </PopoverTrigger>
       <PopoverContent align='end' className='w-44 p-0'>
         <Command>
-          <CommandInput placeholder='Search columns...' />
+          <CommandInput placeholder={t('data_table_view_options.search_columns')} />
           <CommandList>
-            <CommandEmpty>No columns found.</CommandEmpty>
+            <CommandEmpty>{t('data_table_view_options.no_columns_found')}</CommandEmpty>
             <CommandGroup>
               {columns.map((column) => (
                 <CommandItem
diff --git a/src/features/auth/components/sign-in-view.tsx b/src/features/auth/components/sign-in-view.tsx
index d2bb0e1..6b1128d 100644
--- a/src/features/auth/components/sign-in-view.tsx
+++ b/src/features/auth/components/sign-in-view.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import { buttonVariants } from '@/components/ui/button';
 import { GitHubStarsButton } from '@/components/github-stars-button';
 import { cn } from '@/lib/utils';
@@ -12,6 +13,7 @@ export const metadata: Metadata = {
 };
 
 export default function SignInViewPage() {
+  const t = useTranslations();
   return (
     <div className='relative flex min-h-screen flex-col items-center justify-center overflow-hidden md:grid lg:max-w-none lg:grid-cols-2 lg:px-0'>
       <Link
@@ -21,7 +23,7 @@ export default function SignInViewPage() {
           'absolute top-4 right-4 hidden md:top-8 md:right-8'
         )}
       >
-        Login
+        {t('sign_in_view.login')}
       </Link>
       <div className='relative hidden h-full flex-col p-10 lg:flex dark:border-r'>
         <div className='absolute inset-0 bg-sidebar' />
@@ -49,10 +51,9 @@ export default function SignInViewPage() {
         <div className='text-sidebar-foreground relative z-20 mt-auto'>
           <blockquote className='space-y-2'>
             <p className='text-lg'>
-              &ldquo;This starter template has saved me countless hours of work and helped me
-              deliver projects to my clients faster than ever before.&rdquo;
+              {t('sign_in_view.ldquo_this_starter_template_has_saved_me')}
             </p>
-            <footer className='text-sidebar-foreground/70 text-sm'>Random Dude</footer>
+            <footer className='text-sidebar-foreground/70 text-sm'>{t('sign_in_view.random_dude')}</footer>
           </blockquote>
         </div>
       </div>
@@ -85,7 +86,7 @@ export default function SignInViewPage() {
                 target='_blank'
                 className='hover:text-primary underline underline-offset-4'
               >
-                View on GitHub
+                {t('sign_in_view.view_on_github')}
               </Link>
             </p>
           </div>
diff --git a/src/features/auth/components/sign-up-view.tsx b/src/features/auth/components/sign-up-view.tsx
index dd546bb..f44e593 100644
--- a/src/features/auth/components/sign-up-view.tsx
+++ b/src/features/auth/components/sign-up-view.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import { buttonVariants } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { SignUp as ClerkSignUpForm } from '@clerk/nextjs';
@@ -13,6 +14,7 @@ export const metadata: Metadata = {
 };
 
 export default function SignUpViewPage({ stars }: { stars: number }) {
+  const t = useTranslations();
   return (
     <div className='relative h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0'>
       <Link
@@ -22,7 +24,7 @@ export default function SignUpViewPage({ stars }: { stars: number }) {
           'absolute top-4 right-4 hidden md:top-8 md:right-8'
         )}
       >
-        Sign Up
+        {t('sign_up_view.sign_up')}
       </Link>
       <div className='relative hidden h-full flex-col p-10 lg:flex dark:border-r'>
         <div className='absolute inset-0 bg-sidebar' />
@@ -50,10 +52,9 @@ export default function SignUpViewPage({ stars }: { stars: number }) {
         <div className='text-sidebar-foreground relative z-20 mt-auto'>
           <blockquote className='space-y-2'>
             <p className='text-lg'>
-              &ldquo;This starter template has saved me countless hours of work and helped me
-              deliver projects to my clients faster than ever before.&rdquo;
+              {t('sign_up_view.ldquo_this_starter_template_has_saved_me')}
             </p>
-            <footer className='text-sidebar-foreground/70 text-sm'>Random Dude</footer>
+            <footer className='text-sidebar-foreground/70 text-sm'>{t('sign_up_view.random_dude')}</footer>
           </blockquote>
         </div>
       </div>
@@ -67,7 +68,7 @@ export default function SignUpViewPage({ stars }: { stars: number }) {
           >
             <div className='flex items-center'>
               <GitHubLogoIcon className='size-4' />
-              <span className='ml-1 inline'>Star on GitHub</span>{' '}
+              <span className='ml-1 inline'>{t('sign_up_view.star_on_github')}</span>{' '}
             </div>
             <div className='ml-2 flex items-center gap-1 text-sm md:flex'>
               <Icons.exclusive
@@ -96,7 +97,7 @@ export default function SignUpViewPage({ stars }: { stars: number }) {
                 target='_blank'
                 className='hover:text-primary underline underline-offset-4'
               >
-                View on GitHub
+                {t('sign_up_view.view_on_github')}
               </Link>
             </p>
           </div>
diff --git a/src/features/auth/components/user-auth-form.tsx b/src/features/auth/components/user-auth-form.tsx
index dc4bf2b..3ff64e4 100644
--- a/src/features/auth/components/user-auth-form.tsx
+++ b/src/features/auth/components/user-auth-form.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { useAppForm } from '@/components/ui/tanstack-form';
@@ -12,6 +13,7 @@ const formSchema = z.object({
 });
 
 export default function UserAuthForm() {
+  const t = useTranslations();
   const [loading, startTransition] = useTransition();
 
   const form = useAppForm({
@@ -54,7 +56,7 @@ export default function UserAuthForm() {
             )}
           />
           <Button disabled={loading} className='mt-2 ml-auto w-full' type='submit'>
-            Continue With Email
+            {t('user_auth_form.continue_with_email')}
           </Button>
         </form.Form>
       </form.AppForm>
@@ -63,7 +65,7 @@ export default function UserAuthForm() {
           <span className='w-full border-t' />
         </div>
         <div className='relative flex justify-center text-xs uppercase'>
-          <span className='bg-background text-muted-foreground px-2'>Or continue with</span>
+          <span className='bg-background text-muted-foreground px-2'>{t('user_auth_form.or_continue_with')}</span>
         </div>
       </div>
       <GithubSignInButton />
diff --git a/src/features/chat/components/chat-header.tsx b/src/features/chat/components/chat-header.tsx
index 75535b1..745b56d 100644
--- a/src/features/chat/components/chat-header.tsx
+++ b/src/features/chat/components/chat-header.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Icons } from '@/components/icons';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
@@ -16,6 +17,7 @@ interface ChatHeaderProps {
 }
 
 export function ChatHeader({ conversation }: ChatHeaderProps) {
+  const t = useTranslations();
   return (
     <header className='flex flex-wrap items-center justify-between gap-3 sm:gap-4'>
       <div className='flex items-center gap-2 sm:gap-3'>
@@ -45,7 +47,7 @@ export function ChatHeader({ conversation }: ChatHeaderProps) {
           variant='ghost'
           size='icon'
           className='border-border/40 bg-background/60 text-muted-foreground hover:bg-muted/60 focus-visible:ring-primary/40 focus-visible:ring-offset-background size-8 rounded-full border transition focus-visible:ring-2 focus-visible:ring-offset-2 sm:size-10'
-          aria-label='Start audio call'
+          aria-label={t('chat_header.start_audio_call')}
         >
           <Icons.phone className='h-3.5 w-3.5 sm:h-4 sm:w-4' />
         </Button>
@@ -54,7 +56,7 @@ export function ChatHeader({ conversation }: ChatHeaderProps) {
           variant='ghost'
           size='icon'
           className='border-border/40 bg-background/60 text-muted-foreground hover:bg-muted/60 focus-visible:ring-primary/40 focus-visible:ring-offset-background size-8 rounded-full border transition focus-visible:ring-2 focus-visible:ring-offset-2 sm:size-10'
-          aria-label='Start video call'
+          aria-label={t('chat_header.start_video_call')}
         >
           <Icons.video className='h-3.5 w-3.5 sm:h-4 sm:w-4' />
         </Button>
@@ -63,7 +65,7 @@ export function ChatHeader({ conversation }: ChatHeaderProps) {
           variant='ghost'
           size='icon'
           className='border-border/40 bg-background/60 text-muted-foreground hover:bg-muted/60 focus-visible:ring-primary/40 focus-visible:ring-offset-background size-8 rounded-full border transition focus-visible:ring-2 focus-visible:ring-offset-2 sm:size-10'
-          aria-label='Open conversation menu'
+          aria-label={t('chat_header.open_conversation_menu')}
         >
           <Icons.ellipsis className='h-3.5 w-3.5 sm:h-4 sm:w-4' />
         </Button>
diff --git a/src/features/chat/components/conversation-list.tsx b/src/features/chat/components/conversation-list.tsx
index cd8363a..aa94cee 100644
--- a/src/features/chat/components/conversation-list.tsx
+++ b/src/features/chat/components/conversation-list.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useMemo, useState } from 'react';
 import { Icons } from '@/components/icons';
@@ -21,6 +22,7 @@ interface ConversationListProps {
 }
 
 export function ConversationList({ conversations, selectedId, onSelect }: ConversationListProps) {
+  const t = useTranslations();
   const [search, setSearch] = useState('');
 
   const filtered = useMemo(() => {
@@ -35,7 +37,7 @@ export function ConversationList({ conversations, selectedId, onSelect }: Conver
     <div className='border-border/40 bg-background/75 hidden h-full flex-col gap-4 overflow-hidden rounded-2xl border p-3 backdrop-blur lg:col-start-1 lg:col-end-2 lg:flex lg:rounded-3xl lg:p-4'>
       <div className='flex items-center justify-between gap-3'>
         <div>
-          <p className='text-foreground text-sm font-semibold'>Messenger</p>
+          <p className='text-foreground text-sm font-semibold'>{t('conversation_list.messenger')}</p>
           <p className='text-muted-foreground text-xs'>
             {conversations.length} active conversation
             {conversations.length === 1 ? '' : 's'}
@@ -45,12 +47,12 @@ export function ConversationList({ conversations, selectedId, onSelect }: Conver
           variant='outline'
           className='bg-primary/15 text-primary hover:bg-primary/15 hover:text-primary border-border/50 rounded-full border px-3 py-1 text-[0.7rem] tracking-[0.24em] uppercase'
         >
-          Live
+          {t('conversation_list.live')}
         </Badge>
       </div>
 
       <label htmlFor='messenger-search' className='sr-only'>
-        Search conversations
+        {t('conversation_list.search_conversations')}
       </label>
       <div className='relative'>
         <Icons.search
@@ -62,14 +64,14 @@ export function ConversationList({ conversations, selectedId, onSelect }: Conver
           type='search'
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          placeholder='Search conversations'
+          placeholder={t('conversation_list.search_conversations')}
           className='border-border/40 bg-background/60 text-foreground placeholder:text-muted-foreground/70 focus-visible:ring-primary/40 w-full rounded-2xl pl-10 text-sm focus-visible:ring-2'
         />
       </div>
 
       <div
         className='flex-1 space-y-2 overflow-y-auto pr-1'
-        aria-label='Conversation list'
+        aria-label={t('conversation_list.conversation_list')}
         role='list'
       >
         {filtered.length === 0 ? (
diff --git a/src/features/chat/components/conversation-select.tsx b/src/features/chat/components/conversation-select.tsx
index 4740115..83126b3 100644
--- a/src/features/chat/components/conversation-select.tsx
+++ b/src/features/chat/components/conversation-select.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Badge } from '@/components/ui/badge';
 import type { Conversation } from '../utils/types';
@@ -14,11 +15,12 @@ export function ConversationSelect({
   selectedId,
   onSelect
 }: ConversationSelectProps) {
+  const t = useTranslations();
   return (
     <div className='border-border/40 bg-background/75 flex flex-col gap-3 rounded-2xl border p-3 backdrop-blur sm:gap-4 sm:rounded-3xl sm:p-4 lg:hidden'>
       <div className='flex items-center justify-between gap-2 sm:gap-3'>
         <div>
-          <p className='text-foreground text-xs font-semibold sm:text-sm'>Messenger</p>
+          <p className='text-foreground text-xs font-semibold sm:text-sm'>{t('conversation_select.messenger')}</p>
           <p className='text-muted-foreground text-[0.65rem] sm:text-xs'>
             {conversations.length} active conversation
             {conversations.length === 1 ? '' : 's'}
@@ -28,7 +30,7 @@ export function ConversationSelect({
           variant='outline'
           className='bg-primary/15 text-primary hover:bg-primary/15 hover:text-primary border-border/50 rounded-full border px-2 py-0.5 text-[0.65rem] tracking-[0.2em] uppercase sm:px-3 sm:py-1 sm:text-[0.7rem] sm:tracking-[0.24em]'
         >
-          Live
+          {t('conversation_select.live')}
         </Badge>
       </div>
       <div className='space-y-1.5 sm:space-y-2'>
@@ -36,7 +38,7 @@ export function ConversationSelect({
           htmlFor='messenger-conversation'
           className='text-muted-foreground text-[0.65rem] font-medium sm:text-xs'
         >
-          Conversation
+          {t('conversation_select.conversation')}
         </label>
         <select
           id='messenger-conversation'
diff --git a/src/features/chat/components/message-composer.tsx b/src/features/chat/components/message-composer.tsx
index b6b9cd9..2bb2691 100644
--- a/src/features/chat/components/message-composer.tsx
+++ b/src/features/chat/components/message-composer.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { FormEvent, useRef } from 'react';
 import { Icons } from '@/components/icons';
@@ -28,12 +29,13 @@ export function MessageComposer({
   onAddAttachments,
   onRemoveAttachment
 }: MessageComposerProps) {
+  const t = useTranslations();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <form onSubmit={onSubmit} className='space-y-2 sm:space-y-3' aria-label='Reply composer'>
+    <form onSubmit={onSubmit} className='space-y-2 sm:space-y-3' aria-label={t('message_composer.reply_composer')}>
       <label htmlFor='messenger-editor' className='sr-only'>
-        Write a message
+        {t('message_composer.write_a_message')}
       </label>
       <div className='border-border/40 bg-background/80 flex items-end gap-2 rounded-2xl border p-3 backdrop-blur sm:gap-3 sm:rounded-3xl sm:p-4'>
         <div className='min-w-0 flex-1'>
@@ -98,7 +100,7 @@ export function MessageComposer({
             variant='ghost'
             size='icon'
             className='border-border/40 bg-background/70 text-muted-foreground hover:bg-muted/50 focus-visible:ring-primary/40 focus-visible:ring-offset-background size-8 rounded-full border transition focus-visible:ring-2 focus-visible:ring-offset-2 sm:size-10'
-            aria-label='Attach a file'
+            aria-label={t('message_composer.attach_a_file')}
             onClick={() => fileInputRef.current?.click()}
           >
             <Icons.paperclip className='h-3.5 w-3.5 sm:h-4 sm:w-4' />
@@ -108,7 +110,7 @@ export function MessageComposer({
             size='icon'
             className='bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/40 focus-visible:ring-offset-background size-8 rounded-full shadow-lg transition focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 sm:size-10'
             disabled={!draft.trim() && attachments.length === 0}
-            aria-label='Send message'
+            aria-label={t('message_composer.send_message')}
           >
             <Icons.send className='h-3.5 w-3.5 sm:h-4 sm:w-4' aria-hidden='true' />
           </Button>
diff --git a/src/features/elements/components/icons-view-page.tsx b/src/features/elements/components/icons-view-page.tsx
index 86aae56..79539d5 100644
--- a/src/features/elements/components/icons-view-page.tsx
+++ b/src/features/elements/components/icons-view-page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useState } from 'react';
 import { Icons } from '@/components/icons';
@@ -10,6 +11,7 @@ import Link from 'next/link';
 const TABLER_ICONS_URL = 'https://tabler.io/icons';
 
 export default function IconsViewPage() {
+  const t = useTranslations();
   const [search, setSearch] = useState('');
 
   const iconEntries = Object.entries(Icons).filter(([name]) =>
@@ -18,7 +20,7 @@ export default function IconsViewPage() {
 
   return (
     <PageContainer
-      pageTitle='Icons'
+      pageTitle={t('icons_view_page.icons')}
       pageHeaderAction={
         <Link
           href={TABLER_ICONS_URL}
@@ -33,7 +35,7 @@ export default function IconsViewPage() {
     >
       <div className='space-y-4'>
         <Input
-          placeholder='Search icons...'
+          placeholder={t('icons_view_page.search_icons')}
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           className='max-w-sm'
diff --git a/src/features/forms/components/advanced-form-patterns.tsx b/src/features/forms/components/advanced-form-patterns.tsx
index 9ccd199..9db70cf 100644
--- a/src/features/forms/components/advanced-form-patterns.tsx
+++ b/src/features/forms/components/advanced-form-patterns.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import * as React from 'react';
 import {
@@ -93,6 +94,7 @@ const advancedSchema = z.object({
 // ---------------------------------------------------------------------------
 
 export default function AdvancedFormPatterns() {
+  const t = useTranslations();
   const form = useAppForm({
     defaultValues: {
       username: '',
@@ -127,10 +129,9 @@ export default function AdvancedFormPatterns() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle className='text-2xl font-bold'>Team Registration</CardTitle>
+        <CardTitle className='text-2xl font-bold'>{t('advanced_form_patterns.team_registration')}</CardTitle>
         <p className='text-muted-foreground'>
-          Demonstrates async validation, linked fields, nested objects, dynamic arrays, listeners,
-          form-level errors, and scroll-to-first-error.
+          {t('advanced_form_patterns.demonstrates_async_validation_linked_fie')}
         </p>
       </CardHeader>
       <CardContent>
@@ -141,17 +142,17 @@ export default function AdvancedFormPatterns() {
 
             {/* ─── Section 1: Account ─── */}
             <div className='space-y-1'>
-              <h3 className='text-lg font-semibold'>Account</h3>
-              <p className='text-muted-foreground text-sm'>Async validation, linked fields</p>
+              <h3 className='text-lg font-semibold'>{t('advanced_form_patterns.account')}</h3>
+              <p className='text-muted-foreground text-sm'>{t('advanced_form_patterns.async_validation_linked_fields')}</p>
             </div>
 
             <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
               {/* Username — async validation (spinner built into FormTextField) */}
               <FormTextField
                 name='username'
-                label='Username'
+                label={t('advanced_form_patterns.username')}
                 required
-                placeholder='Choose a username'
+                placeholder={t('advanced_form_patterns.choose_a_username')}
                 validators={{
                   onBlur: z.string().min(3, 'Username must be at least 3 characters'),
                   onChangeAsync: async ({ value }: { value: string }) => {
@@ -169,10 +170,10 @@ export default function AdvancedFormPatterns() {
               {/* Email */}
               <FormTextField
                 name='email'
-                label='Email'
+                label={t('advanced_form_patterns.email')}
                 required
                 type='email'
-                placeholder='you@example.com'
+                placeholder={t('advanced_form_patterns.you_example_com')}
                 validators={{
                   onBlur: z.string().email('Invalid email')
                 }}
@@ -181,10 +182,10 @@ export default function AdvancedFormPatterns() {
               {/* Password */}
               <FormTextField
                 name='password'
-                label='Password'
+                label={t('advanced_form_patterns.password')}
                 required
                 type='password'
-                placeholder='Min 8 characters'
+                placeholder={t('advanced_form_patterns.min_8_characters')}
                 validators={{
                   onBlur: z.string().min(8, 'Must be at least 8 characters')
                 }}
@@ -218,25 +219,25 @@ export default function AdvancedFormPatterns() {
 
             {/* ─── Section 2: Team Info (nested objects) ─── */}
             <div className='space-y-1'>
-              <h3 className='text-lg font-semibold'>Team Info</h3>
+              <h3 className='text-lg font-semibold'>{t('advanced_form_patterns.team_info')}</h3>
               <p className='text-muted-foreground text-sm'>
-                Nested objects with dot-notation paths
+                {t('advanced_form_patterns.nested_objects_with_dot_notation_paths')}
               </p>
             </div>
 
             <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
               <FormTextField
                 name='team.name'
-                label='Team Name'
+                label={t('advanced_form_patterns.team_name')}
                 required
-                placeholder='e.g. Alpha Squad'
+                placeholder={t('advanced_form_patterns.e_g_alpha_squad')}
                 validators={{
                   onBlur: z.string().min(2, 'Team name must be at least 2 characters')
                 }}
               />
               <FormTextField
                 name='team.size'
-                label='Team Size'
+                label={t('advanced_form_patterns.team_size')}
                 required
                 type='number'
                 min={1}
@@ -252,8 +253,8 @@ export default function AdvancedFormPatterns() {
 
             {/* ─── Section 3: Members (dynamic array rows) ─── */}
             <div className='space-y-1'>
-              <h3 className='text-lg font-semibold'>Members</h3>
-              <p className='text-muted-foreground text-sm'>Dynamic array rows with add / remove</p>
+              <h3 className='text-lg font-semibold'>{t('advanced_form_patterns.members')}</h3>
+              <p className='text-muted-foreground text-sm'>{t('advanced_form_patterns.dynamic_array_rows_with_add_remove')}</p>
             </div>
 
             <form.AppField name='members' mode='array'>
@@ -339,19 +340,19 @@ export default function AdvancedFormPatterns() {
 
             {/* ─── Section 4: Preferences (listeners / side effects) ─── */}
             <div className='space-y-1'>
-              <h3 className='text-lg font-semibold'>Preferences</h3>
+              <h3 className='text-lg font-semibold'>{t('advanced_form_patterns.preferences')}</h3>
               <p className='text-muted-foreground text-sm'>
-                Listener side effects — country resets state
+                {t('advanced_form_patterns.listener_side_effects_country_resets_sta')}
               </p>
             </div>
 
             <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
               <FormSelectField
                 name='country'
-                label='Country'
+                label={t('advanced_form_patterns.country')}
                 required
                 options={countryOptions}
-                placeholder='Select a country'
+                placeholder={t('advanced_form_patterns.select_a_country')}
                 validators={{
                   onBlur: z.string().min(1, 'Select a country')
                 }}
@@ -363,7 +364,7 @@ export default function AdvancedFormPatterns() {
               />
               <FormSelectField
                 name='state'
-                label='State / Region'
+                label={t('advanced_form_patterns.state_region')}
                 required
                 options={stateOptions}
                 placeholder={selectedCountry ? 'Select state' : 'Select a country first'}
@@ -383,9 +384,9 @@ export default function AdvancedFormPatterns() {
                 onClick={() => form.reset()}
                 className='flex-1'
               >
-                Reset
+                {t('advanced_form_patterns.reset')}
               </Button>
-              <form.SubmitButton className='flex-1'>Register Team</form.SubmitButton>
+              <form.SubmitButton className='flex-1'>{t('advanced_form_patterns.register_team')}</form.SubmitButton>
             </div>
           </form.Form>
         </form.AppForm>
diff --git a/src/features/forms/components/sheet-form-demo.tsx b/src/features/forms/components/sheet-form-demo.tsx
index f4ad3e1..c20b2a3 100644
--- a/src/features/forms/components/sheet-form-demo.tsx
+++ b/src/features/forms/components/sheet-form-demo.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useState } from 'react';
 import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
@@ -58,6 +59,7 @@ const categoryOptions = [
 // ---------------------------------------------------------------------------
 
 function SheetFormSection() {
+  const t = useTranslations();
   const [open, setOpen] = useState(false);
 
   const form = useAppForm({
@@ -81,7 +83,7 @@ function SheetFormSection() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Sheet Form</CardTitle>
+        <CardTitle>{t('sheet_form_demo.sheet_form')}</CardTitle>
         <CardDescription>
           A product creation form inside a Sheet. The submit button lives in the SheetFooter,
           outside the form element, connected via the HTML{' '}
@@ -98,9 +100,9 @@ function SheetFormSection() {
           </SheetTrigger>
           <SheetContent className='flex flex-col'>
             <SheetHeader>
-              <SheetTitle>New Product</SheetTitle>
+              <SheetTitle>{t('sheet_form_demo.new_product')}</SheetTitle>
               <SheetDescription>
-                Fill in the details below to create a new product.
+                {t('sheet_form_demo.fill_in_the_details_below_to_create_a_ne')}
               </SheetDescription>
             </SheetHeader>
 
@@ -108,9 +110,9 @@ function SheetFormSection() {
               <form.Form id='sheet-form-id' className='space-y-4 p-0 md:p-0'>
                 <FormTextField
                   name='name'
-                  label='Product Name'
+                  label={t('sheet_form_demo.product_name')}
                   required
-                  placeholder='Enter product name'
+                  placeholder={t('sheet_form_demo.enter_product_name')}
                   validators={{
                     onBlur: z.string().min(2, 'Product name must be at least 2 characters')
                   }}
@@ -118,10 +120,10 @@ function SheetFormSection() {
 
                 <FormSelectField
                   name='category'
-                  label='Category'
+                  label={t('sheet_form_demo.category')}
                   required
                   options={categoryOptions}
-                  placeholder='Select a category'
+                  placeholder={t('sheet_form_demo.select_a_category')}
                   validators={{
                     onBlur: z.string().min(1, 'Please select a category')
                   }}
@@ -129,7 +131,7 @@ function SheetFormSection() {
 
                 <FormTextField
                   name='price'
-                  label='Price'
+                  label={t('sheet_form_demo.price')}
                   required
                   type='number'
                   min={0}
@@ -142,9 +144,9 @@ function SheetFormSection() {
 
                 <FormTextareaField
                   name='description'
-                  label='Description'
+                  label={t('sheet_form_demo.description')}
                   required
-                  placeholder='Enter product description'
+                  placeholder={t('sheet_form_demo.enter_product_description')}
                   maxLength={500}
                   rows={4}
                   validators={{
@@ -156,10 +158,10 @@ function SheetFormSection() {
 
             <SheetFooter className='pt-4'>
               <Button type='button' variant='outline' onClick={() => setOpen(false)}>
-                Cancel
+                {t('sheet_form_demo.cancel')}
               </Button>
               <Button type='submit' form='sheet-form-id'>
-                Create Product
+                {t('sheet_form_demo.create_product')}
               </Button>
             </SheetFooter>
           </SheetContent>
@@ -174,6 +176,7 @@ function SheetFormSection() {
 // ---------------------------------------------------------------------------
 
 function DialogFormSection() {
+  const t = useTranslations();
   const [open, setOpen] = useState(false);
 
   const form = useAppForm({
@@ -195,7 +198,7 @@ function DialogFormSection() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Dialog Form</CardTitle>
+        <CardTitle>{t('sheet_form_demo.dialog_form')}</CardTitle>
         <CardDescription>
           A quick feedback form inside a Dialog. Uses composed field components from{' '}
           <code className='bg-muted rounded px-1 text-sm'>useFormFields</code> with the submit
@@ -212,16 +215,16 @@ function DialogFormSection() {
           </DialogTrigger>
           <DialogContent>
             <DialogHeader>
-              <DialogTitle>Quick Feedback</DialogTitle>
-              <DialogDescription>Rate your experience and leave a comment.</DialogDescription>
+              <DialogTitle>{t('sheet_form_demo.quick_feedback')}</DialogTitle>
+              <DialogDescription>{t('sheet_form_demo.rate_your_experience_and_leave_a_comment')}</DialogDescription>
             </DialogHeader>
 
             <form.AppForm>
               <form.Form id='dialog-form-id' className='space-y-4 py-2'>
                 <FormSliderField
                   name='rating'
-                  label='Rating'
-                  description='Rate your experience (0-10)'
+                  label={t('sheet_form_demo.rating')}
+                  description={t('sheet_form_demo.rate_your_experience_0_10')}
                   min={0}
                   max={10}
                   step={1}
@@ -229,9 +232,9 @@ function DialogFormSection() {
 
                 <FormTextareaField
                   name='feedback'
-                  label='Feedback'
+                  label={t('sheet_form_demo.feedback')}
                   required
-                  placeholder='Tell us what you think...'
+                  placeholder={t('sheet_form_demo.tell_us_what_you_think')}
                   maxLength={300}
                   rows={3}
                   validators={{
@@ -243,10 +246,10 @@ function DialogFormSection() {
 
             <DialogFooter>
               <Button type='button' variant='outline' onClick={() => setOpen(false)}>
-                Cancel
+                {t('sheet_form_demo.cancel')}
               </Button>
               <Button type='submit' form='dialog-form-id'>
-                Submit Feedback
+                {t('sheet_form_demo.submit_feedback')}
               </Button>
             </DialogFooter>
           </DialogContent>
@@ -261,17 +264,18 @@ function DialogFormSection() {
 // ---------------------------------------------------------------------------
 
 function ToastDemoSection() {
+  const t = useTranslations();
   return (
     <Card className='md:col-span-2'>
       <CardHeader>
-        <CardTitle>Toast Notifications</CardTitle>
+        <CardTitle>{t('sheet_form_demo.toast_notifications')}</CardTitle>
         <CardDescription>
-          Trigger different toast variants to preview notification styles.
+          {t('sheet_form_demo.trigger_different_toast_variants_to_prev')}
         </CardDescription>
       </CardHeader>
       <CardContent className='flex flex-wrap gap-2'>
         <Button variant='outline' onClick={() => toast('Default toast notification')}>
-          Default
+          {t('sheet_form_demo.default')}
         </Button>
         <Button variant='outline' onClick={() => toast.success('Action completed successfully!')}>
           <Icons.circleCheck className='mr-2 h-4 w-4' />
diff --git a/src/features/forms/components/sheet-product-form.tsx b/src/features/forms/components/sheet-product-form.tsx
index 2880245..e07c0bf 100644
--- a/src/features/forms/components/sheet-product-form.tsx
+++ b/src/features/forms/components/sheet-product-form.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useAppForm } from '@/components/ui/tanstack-form';
 import * as z from 'zod';
@@ -32,6 +33,7 @@ const productSchema = z.object({
 });
 
 export default function SheetProductForm() {
+  const t = useTranslations();
   const [open, setOpen] = useState(false);
 
   const form = useAppForm({
@@ -62,8 +64,8 @@ export default function SheetProductForm() {
       </SheetTrigger>
       <SheetContent className='flex flex-col'>
         <SheetHeader>
-          <SheetTitle>New Product</SheetTitle>
-          <SheetDescription>Fill in the details to create a new product.</SheetDescription>
+          <SheetTitle>{t('sheet_product_form.new_product')}</SheetTitle>
+          <SheetDescription>{t('sheet_product_form.fill_in_the_details_to_create_a_new_prod')}</SheetDescription>
         </SheetHeader>
 
         <div className='flex-1 overflow-auto'>
@@ -187,10 +189,10 @@ export default function SheetProductForm() {
 
         <SheetFooter>
           <Button type='button' variant='outline' onClick={() => setOpen(false)}>
-            Cancel
+            {t('sheet_product_form.cancel')}
           </Button>
           <Button type='submit' form='sheet-product-form'>
-            Create Product
+            {t('sheet_product_form.create_product')}
           </Button>
         </SheetFooter>
       </SheetContent>
diff --git a/src/features/kanban/components/kanban-view-page.tsx b/src/features/kanban/components/kanban-view-page.tsx
index b9d961d..b7409eb 100644
--- a/src/features/kanban/components/kanban-view-page.tsx
+++ b/src/features/kanban/components/kanban-view-page.tsx
@@ -1,12 +1,14 @@
+import { useTranslations } from 'next-intl';
 import PageContainer from '@/components/layout/page-container';
 import { KanbanBoard } from './kanban-board';
 import NewTaskDialog from './new-task-dialog';
 
 export default function KanbanViewPage() {
+  const t = useTranslations();
   return (
     <PageContainer
-      pageTitle='Kanban'
-      pageDescription='Manage tasks with drag and drop'
+      pageTitle={t('kanban_view_page.kanban')}
+      pageDescription={t('kanban_view_page.manage_tasks_with_drag_and_drop')}
       pageHeaderAction={<NewTaskDialog />}
     >
       <KanbanBoard />
diff --git a/src/features/kanban/components/new-task-dialog.tsx b/src/features/kanban/components/new-task-dialog.tsx
index 3e51425..72635a0 100644
--- a/src/features/kanban/components/new-task-dialog.tsx
+++ b/src/features/kanban/components/new-task-dialog.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Button } from '@/components/ui/button';
 import {
@@ -15,6 +16,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { useTaskStore } from '../utils/store';
 
 export default function NewTaskDialog() {
+  const t = useTranslations();
   const addTask = useTaskStore((state) => state.addTask);
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -32,23 +34,23 @@ export default function NewTaskDialog() {
     <Dialog>
       <DialogTrigger asChild>
         <Button variant='secondary' size='sm'>
-          + Add New Task
+          {t('new_task_dialog.add_new_task')}
         </Button>
       </DialogTrigger>
       <DialogContent className='sm:max-w-[425px]'>
         <DialogHeader>
-          <DialogTitle>Add New Task</DialogTitle>
-          <DialogDescription>What do you want to get done today?</DialogDescription>
+          <DialogTitle>{t('new_task_dialog.add_new_task_2')}</DialogTitle>
+          <DialogDescription>{t('new_task_dialog.what_do_you_want_to_get_done_today')}</DialogDescription>
         </DialogHeader>
         <form id='task-form' className='grid gap-4 py-4' onSubmit={handleSubmit}>
           <div className='grid grid-cols-4 items-center gap-4'>
-            <Input id='title' name='title' placeholder='Task title...' className='col-span-4' />
+            <Input id='title' name='title' placeholder={t('new_task_dialog.task_title')} className='col-span-4' />
           </div>
           <div className='grid grid-cols-4 items-center gap-4'>
             <Textarea
               id='description'
               name='description'
-              placeholder='Description...'
+              placeholder={t('new_task_dialog.description')}
               className='col-span-4'
             />
           </div>
@@ -56,7 +58,7 @@ export default function NewTaskDialog() {
         <DialogFooter>
           <DialogTrigger asChild>
             <Button type='submit' size='sm' form='task-form'>
-              Add Task
+              {t('new_task_dialog.add_task')}
             </Button>
           </DialogTrigger>
         </DialogFooter>
diff --git a/src/features/notifications/components/notification-center.tsx b/src/features/notifications/components/notification-center.tsx
index afbf95f..0ea6d85 100644
--- a/src/features/notifications/components/notification-center.tsx
+++ b/src/features/notifications/components/notification-center.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Icons } from '@/components/icons';
 import Link from 'next/link';
@@ -21,6 +22,7 @@ const actionRoutes: Record<string, string> = {
 };
 
 export function NotificationCenter() {
+  const t = useTranslations();
   const { notifications, markAsRead, markAllAsRead, unreadCount } = useNotificationStore();
   const router = useRouter();
   const count = unreadCount();
@@ -36,13 +38,13 @@ export function NotificationCenter() {
               {count > 9 ? '9+' : count}
             </span>
           )}
-          <span className='sr-only'>Notifications</span>
+          <span className='sr-only'>{t('notification_center.notifications')}</span>
         </Button>
       </PopoverTrigger>
       <PopoverContent align='end' className='w-[calc(100vw-2rem)] p-0 sm:w-[380px]' sideOffset={8}>
         <div className='flex items-center justify-between px-4 py-3'>
           <Link href='/dashboard/notifications' className='group flex items-center gap-1'>
-            <h4 className='text-sm font-semibold group-hover:underline'>Notifications</h4>
+            <h4 className='text-sm font-semibold group-hover:underline'>{t('notification_center.notifications')}</h4>
             <Icons.chevronRight className='text-muted-foreground h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5' />
           </Link>
           <div className='flex items-center gap-2'>
diff --git a/src/features/notifications/components/notifications-page.tsx b/src/features/notifications/components/notifications-page.tsx
index 6b33b1c..13948c0 100644
--- a/src/features/notifications/components/notifications-page.tsx
+++ b/src/features/notifications/components/notifications-page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Icons } from '@/components/icons';
 import PageContainer from '@/components/layout/page-container';
@@ -17,6 +18,7 @@ const actionRoutes: Record<string, string> = {
 };
 
 export default function NotificationsPage() {
+  const t = useTranslations();
   const { notifications, markAsRead, markAllAsRead, unreadCount } = useNotificationStore();
   const router = useRouter();
   const count = unreadCount();
@@ -29,7 +31,7 @@ export default function NotificationsPage() {
       return (
         <div className='flex flex-col items-center justify-center py-16'>
           <Icons.notification className='text-muted-foreground/40 mb-3 h-10 w-10' />
-          <p className='text-muted-foreground text-sm'>No notifications</p>
+          <p className='text-muted-foreground text-sm'>{t('notifications_page.no_notifications')}</p>
         </div>
       );
     }
@@ -61,8 +63,8 @@ export default function NotificationsPage() {
 
   return (
     <PageContainer
-      pageTitle='Notifications'
-      pageDescription='View and manage all your notifications.'
+      pageTitle={t('notifications_page.notifications')}
+      pageDescription={t('notifications_page.view_and_manage_all_your_notifications')}
       pageHeaderAction={
         count > 0 ? (
           <Button variant='outline' size='sm' onClick={markAllAsRead}>
diff --git a/src/features/overview/components/area-graph.tsx b/src/features/overview/components/area-graph.tsx
index ea75fd8..b25ac62 100644
--- a/src/features/overview/components/area-graph.tsx
+++ b/src/features/overview/components/area-graph.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';
 
@@ -40,6 +41,7 @@ const chartConfig = {
 } satisfies ChartConfig;
 
 export function AreaGraph() {
+  const t = useTranslations();
   return (
     <Card>
       <CardHeader>
@@ -50,7 +52,7 @@ export function AreaGraph() {
             -5.2%
           </Badge>
         </CardTitle>
-        <CardDescription>Showing total visitors for the last 6 months</CardDescription>
+        <CardDescription>{t('area_graph.showing_total_visitors_for_the_last_6_mo')}</CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig}>
diff --git a/src/features/overview/components/bar-graph.tsx b/src/features/overview/components/bar-graph.tsx
index b961c73..1c8d064 100644
--- a/src/features/overview/components/bar-graph.tsx
+++ b/src/features/overview/components/bar-graph.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { Bar, BarChart, XAxis } from 'recharts';
 
@@ -33,6 +34,7 @@ const chartConfig = {
 } satisfies ChartConfig;
 
 export function BarGraph() {
+  const t = useTranslations();
   return (
     <Card>
       <CardHeader>
@@ -43,7 +45,7 @@ export function BarGraph() {
             -5.2%
           </Badge>
         </CardTitle>
-        <CardDescription>January - June 2025</CardDescription>
+        <CardDescription>{t('bar_graph.january_june_2025')}</CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig}>
diff --git a/src/features/overview/components/overview.tsx b/src/features/overview/components/overview.tsx
index 9074b96..58e2119 100644
--- a/src/features/overview/components/overview.tsx
+++ b/src/features/overview/components/overview.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import PageContainer from '@/components/layout/page-container';
 import { Button } from '@/components/ui/button';
 import {
@@ -17,27 +18,28 @@ import { Icons } from '@/components/icons';
 import { Badge } from '@/components/ui/badge';
 
 export default function OverViewPage() {
+  const t = useTranslations();
   return (
     <PageContainer>
       <div className='flex flex-1 flex-col space-y-2'>
         <div className='flex items-center justify-between space-y-2'>
-          <h2 className='text-2xl font-bold tracking-tight'>Hi, Welcome back 👋</h2>
+          <h2 className='text-2xl font-bold tracking-tight'>{t('overview.hi_welcome_back')}</h2>
           <div className='hidden items-center space-x-2 md:flex'>
-            <Button>Download</Button>
+            <Button>{t('overview.download')}</Button>
           </div>
         </div>
         <Tabs defaultValue='overview' className='space-y-4'>
           <TabsList>
-            <TabsTrigger value='overview'>Overview</TabsTrigger>
+            <TabsTrigger value='overview'>{t('overview.overview')}</TabsTrigger>
             <TabsTrigger value='analytics' disabled>
-              Analytics
+              {t('overview.analytics')}
             </TabsTrigger>
           </TabsList>
           <TabsContent value='overview' className='space-y-4'>
             <div className='*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4'>
               <Card className='@container/card'>
                 <CardHeader>
-                  <CardDescription>Total Revenue</CardDescription>
+                  <CardDescription>{t('overview.total_revenue')}</CardDescription>
                   <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
                     $1,250.00
                   </CardTitle>
@@ -52,12 +54,12 @@ export default function OverViewPage() {
                   <div className='line-clamp-1 flex gap-2 font-medium'>
                     Trending up this month <Icons.trendingUp className='size-4' />
                   </div>
-                  <div className='text-muted-foreground'>Visitors for the last 6 months</div>
+                  <div className='text-muted-foreground'>{t('overview.visitors_for_the_last_6_months')}</div>
                 </CardFooter>
               </Card>
               <Card className='@container/card'>
                 <CardHeader>
-                  <CardDescription>New Customers</CardDescription>
+                  <CardDescription>{t('overview.new_customers')}</CardDescription>
                   <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
                     1,234
                   </CardTitle>
@@ -72,12 +74,12 @@ export default function OverViewPage() {
                   <div className='line-clamp-1 flex gap-2 font-medium'>
                     Down 20% this period <Icons.trendingDown className='size-4' />
                   </div>
-                  <div className='text-muted-foreground'>Acquisition needs attention</div>
+                  <div className='text-muted-foreground'>{t('overview.acquisition_needs_attention')}</div>
                 </CardFooter>
               </Card>
               <Card className='@container/card'>
                 <CardHeader>
-                  <CardDescription>Active Accounts</CardDescription>
+                  <CardDescription>{t('overview.active_accounts')}</CardDescription>
                   <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
                     45,678
                   </CardTitle>
@@ -92,12 +94,12 @@ export default function OverViewPage() {
                   <div className='line-clamp-1 flex gap-2 font-medium'>
                     Strong user retention <Icons.trendingUp className='size-4' />
                   </div>
-                  <div className='text-muted-foreground'>Engagement exceed targets</div>
+                  <div className='text-muted-foreground'>{t('overview.engagement_exceed_targets')}</div>
                 </CardFooter>
               </Card>
               <Card className='@container/card'>
                 <CardHeader>
-                  <CardDescription>Growth Rate</CardDescription>
+                  <CardDescription>{t('overview.growth_rate')}</CardDescription>
                   <CardTitle className='text-2xl font-semibold tabular-nums @[250px]/card:text-3xl'>
                     4.5%
                   </CardTitle>
@@ -112,7 +114,7 @@ export default function OverViewPage() {
                   <div className='line-clamp-1 flex gap-2 font-medium'>
                     Steady performance increase <Icons.trendingUp className='size-4' />
                   </div>
-                  <div className='text-muted-foreground'>Meets growth projections</div>
+                  <div className='text-muted-foreground'>{t('overview.meets_growth_projections')}</div>
                 </CardFooter>
               </Card>
             </div>
diff --git a/src/features/overview/components/pie-graph.tsx b/src/features/overview/components/pie-graph.tsx
index b28e5ea..9eef760 100644
--- a/src/features/overview/components/pie-graph.tsx
+++ b/src/features/overview/components/pie-graph.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { LabelList, Pie, PieChart } from 'recharts';
 
@@ -47,6 +48,7 @@ const chartConfig = {
 } satisfies ChartConfig;
 
 export function PieGraph() {
+  const t = useTranslations();
   return (
     <Card className='flex h-full flex-col'>
       <CardHeader className='items-center pb-0'>
@@ -57,7 +59,7 @@ export function PieGraph() {
             +5.2%
           </Badge>
         </CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
+        <CardDescription>{t('pie_graph.january_june_2024')}</CardDescription>
       </CardHeader>
       <CardContent className='flex flex-1 items-center justify-center pb-0'>
         <ChartContainer
diff --git a/src/features/overview/components/recent-sales.tsx b/src/features/overview/components/recent-sales.tsx
index 7ceff1f..675589a 100644
--- a/src/features/overview/components/recent-sales.tsx
+++ b/src/features/overview/components/recent-sales.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from 'next-intl';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Card, CardHeader, CardContent, CardTitle, CardDescription } from '@/components/ui/card';
 
@@ -40,11 +41,12 @@ const salesData = [
 ];
 
 export function RecentSales() {
+  const t = useTranslations();
   return (
     <Card className='h-full'>
       <CardHeader>
-        <CardTitle>Recent Sales</CardTitle>
-        <CardDescription>You made 265 sales this month.</CardDescription>
+        <CardTitle>{t('recent_sales.recent_sales')}</CardTitle>
+        <CardDescription>{t('recent_sales.you_made_265_sales_this_month')}</CardDescription>
       </CardHeader>
       <CardContent>
         <div className='space-y-8'>
diff --git a/src/features/products/components/product-form.tsx b/src/features/products/components/product-form.tsx
index e5d22a4..779cc1d 100644
--- a/src/features/products/components/product-form.tsx
+++ b/src/features/products/components/product-form.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
 import { Button } from '@/components/ui/button';
@@ -19,6 +20,7 @@ export default function ProductForm({
   initialData: Product | null;
   pageTitle: string;
 }) {
+  const t = useTranslations();
   const router = useRouter();
   const isEdit = !!initialData;
 
@@ -84,8 +86,8 @@ export default function ProductForm({
           <form.Form className='space-y-8'>
             <FormFileUploadField
               name='image'
-              label='Product Image'
-              description='Upload a product image'
+              label={t('product_form.product_image')}
+              description={t('product_form.upload_a_product_image')}
               maxSize={5 * 1024 * 1024}
               maxFiles={4}
             />
@@ -93,9 +95,9 @@ export default function ProductForm({
             <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
               <FormTextField
                 name='name'
-                label='Product Name'
+                label={t('product_form.product_name')}
                 required
-                placeholder='Enter product name'
+                placeholder={t('product_form.enter_product_name')}
                 validators={{
                   onBlur: z.string().min(2, 'Product name must be at least 2 characters.')
                 }}
@@ -103,10 +105,10 @@ export default function ProductForm({
 
               <FormSelectField
                 name='category'
-                label='Category'
+                label={t('product_form.category')}
                 required
                 options={categoryOptions}
-                placeholder='Select category'
+                placeholder={t('product_form.select_category')}
                 validators={{
                   onBlur: z.string().min(1, 'Please select a category')
                 }}
@@ -114,12 +116,12 @@ export default function ProductForm({
 
               <FormTextField
                 name='price'
-                label='Price'
+                label={t('product_form.price')}
                 required
                 type='number'
                 min={0}
                 step={0.01}
-                placeholder='Enter price'
+                placeholder={t('product_form.enter_price')}
                 validators={{
                   onBlur: z.number({ message: 'Price is required' })
                 }}
@@ -128,9 +130,9 @@ export default function ProductForm({
 
             <FormTextareaField
               name='description'
-              label='Description'
+              label={t('product_form.description')}
               required
-              placeholder='Enter product description'
+              placeholder={t('product_form.enter_product_description')}
               maxLength={500}
               rows={4}
               validators={{
@@ -140,7 +142,7 @@ export default function ProductForm({
 
             <div className='flex justify-end gap-2'>
               <Button type='button' variant='outline' onClick={() => router.back()}>
-                Back
+                {t('product_form.back')}
               </Button>
               <form.SubmitButton>{isEdit ? 'Update Product' : 'Add Product'}</form.SubmitButton>
             </div>
diff --git a/src/features/products/components/product-tables/cell-action.tsx b/src/features/products/components/product-tables/cell-action.tsx
index 4803041..aa217c8 100644
--- a/src/features/products/components/product-tables/cell-action.tsx
+++ b/src/features/products/components/product-tables/cell-action.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 import { AlertModal } from '@/components/modal/alert-modal';
 import { Button } from '@/components/ui/button';
 import {
@@ -21,6 +22,7 @@ interface CellActionProps {
 }
 
 export function CellAction({ data }: CellActionProps) {
+  const t = useTranslations();
   const [open, setOpen] = useState(false);
   const router = useRouter();
 
@@ -46,12 +48,12 @@ export function CellAction({ data }: CellActionProps) {
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button variant='ghost' className='h-8 w-8 p-0'>
-            <span className='sr-only'>Open menu</span>
+            <span className='sr-only'>{t('cell_action.open_menu')}</span>
             <Icons.ellipsis className='h-4 w-4' />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='end'>
-          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuLabel>{t('cell_action.actions')}</DropdownMenuLabel>
           <DropdownMenuItem onClick={() => router.push(`/dashboard/product/${data.id}`)}>
             <Icons.edit className='mr-2 h-4 w-4' /> Update
           </DropdownMenuItem>
diff --git a/src/features/products/components/product-view-page.tsx b/src/features/products/components/product-view-page.tsx
index 20a8f1a..514cb1b 100644
--- a/src/features/products/components/product-view-page.tsx
+++ b/src/features/products/components/product-view-page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
 import type { Product } from '../api/types';
@@ -11,19 +12,21 @@ type TProductViewPageProps = {
 };
 
 export default function ProductViewPage({ productId }: TProductViewPageProps) {
+  const t = useTranslations();
   if (productId === 'new') {
-    return <ProductForm initialData={null} pageTitle='Create New Product' />;
+    return <ProductForm initialData={null} pageTitle={t('product_view_page.create_new_product')} />;
   }
 
   return <EditProductView productId={Number(productId)} />;
 }
 
 function EditProductView({ productId }: { productId: number }) {
+  const t = useTranslations();
   const { data } = useSuspenseQuery(productByIdOptions(productId));
 
   if (!data?.success || !data?.product) {
     notFound();
   }
 
-  return <ProductForm initialData={data.product as Product} pageTitle='Edit Product' />;
+  return <ProductForm initialData={data.product as Product} pageTitle={t('product_view_page.edit_product')} />;
 }
diff --git a/src/features/react-query-demo/components/pokemon-info.tsx b/src/features/react-query-demo/components/pokemon-info.tsx
index 99ca042..8cbdc21 100644
--- a/src/features/react-query-demo/components/pokemon-info.tsx
+++ b/src/features/react-query-demo/components/pokemon-info.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useState } from 'react';
 import { useSuspenseQuery } from '@tanstack/react-query';
@@ -18,6 +19,7 @@ import { Progress } from '@/components/ui/progress';
 const POKEMON_IDS = [25, 1, 4, 7, 6, 150, 133, 39, 143, 94];
 
 export function PokemonInfo() {
+  const t = useTranslations();
   const [pokemonId, setPokemonId] = useState(25);
   const { data } = useSuspenseQuery(pokemonOptions(pokemonId));
 
@@ -26,7 +28,7 @@ export function PokemonInfo() {
       {/* Pokemon selector */}
       <Card>
         <CardHeader>
-          <CardTitle>Pick a Pokemon</CardTitle>
+          <CardTitle>{t('pokemon_info.pick_a_pokemon')}</CardTitle>
           <CardDescription>
             Each selection triggers <code>useSuspenseQuery</code> — cached results are instant, new
             fetches show the Suspense fallback.
@@ -90,7 +92,7 @@ export function PokemonInfo() {
         </CardContent>
         <CardFooter>
           <p className='text-muted-foreground text-xs'>
-            Data from PokeAPI &middot; Prefetched on server, hydrated on client
+            {t('pokemon_info.data_from_pokeapi_middot_prefetched_on_s')}
           </p>
         </CardFooter>
       </Card>
diff --git a/src/features/users/components/user-form-sheet.tsx b/src/features/users/components/user-form-sheet.tsx
index 4c1096b..e4562fb 100644
--- a/src/features/users/components/user-form-sheet.tsx
+++ b/src/features/users/components/user-form-sheet.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 
 import { useState } from 'react';
 import { useAppForm, useFormFields } from '@/components/ui/tanstack-form';
@@ -33,6 +34,7 @@ interface UserFormSheetProps {
 }
 
 export function UserFormSheet({ user, open, onOpenChange }: UserFormSheetProps) {
+  const t = useTranslations();
   const isEdit = !!user;
 
   const createMutation = useMutation({
@@ -97,18 +99,18 @@ export function UserFormSheet({ user, open, onOpenChange }: UserFormSheetProps)
               <div className='grid grid-cols-2 gap-4'>
                 <FormTextField
                   name='first_name'
-                  label='First Name'
+                  label={t('user_form_sheet.first_name')}
                   required
-                  placeholder='John'
+                  placeholder={t('user_form_sheet.john')}
                   validators={{
                     onBlur: z.string().min(2, 'First name must be at least 2 characters')
                   }}
                 />
                 <FormTextField
                   name='last_name'
-                  label='Last Name'
+                  label={t('user_form_sheet.last_name')}
                   required
-                  placeholder='Doe'
+                  placeholder={t('user_form_sheet.doe')}
                   validators={{
                     onBlur: z.string().min(2, 'Last name must be at least 2 characters')
                   }}
@@ -117,10 +119,10 @@ export function UserFormSheet({ user, open, onOpenChange }: UserFormSheetProps)
 
               <FormTextField
                 name='email'
-                label='Email'
+                label={t('user_form_sheet.email')}
                 required
                 type='email'
-                placeholder='john@example.com'
+                placeholder={t('user_form_sheet.john_example_com')}
                 validators={{
                   onBlur: z.string().email('Please enter a valid email')
                 }}
@@ -128,7 +130,7 @@ export function UserFormSheet({ user, open, onOpenChange }: UserFormSheetProps)
 
               <FormTextField
                 name='phone'
-                label='Phone'
+                label={t('user_form_sheet.phone')}
                 required
                 type='tel'
                 placeholder='(555) 123-4567'
@@ -139,10 +141,10 @@ export function UserFormSheet({ user, open, onOpenChange }: UserFormSheetProps)
 
               <FormSelectField
                 name='role'
-                label='Role'
+                label={t('user_form_sheet.role')}
                 required
                 options={ROLE_OPTIONS}
-                placeholder='Select role'
+                placeholder={t('user_form_sheet.select_role')}
                 validators={{
                   onBlur: z.string().min(1, 'Please select a role')
                 }}
@@ -150,10 +152,10 @@ export function UserFormSheet({ user, open, onOpenChange }: UserFormSheetProps)
 
               <FormSelectField
                 name='status'
-                label='Status'
+                label={t('user_form_sheet.status')}
                 required
                 options={STATUS_OPTIONS}
-                placeholder='Select status'
+                placeholder={t('user_form_sheet.select_status')}
                 validators={{
                   onBlur: z.string().min(1, 'Please select a status')
                 }}
@@ -164,7 +166,7 @@ export function UserFormSheet({ user, open, onOpenChange }: UserFormSheetProps)
 
         <SheetFooter>
           <Button type='button' variant='outline' onClick={() => onOpenChange(false)}>
-            Cancel
+            {t('user_form_sheet.cancel')}
           </Button>
           <Button type='submit' form='user-form-sheet' isLoading={isPending}>
             <Icons.check /> {isEdit ? 'Update User' : 'Create User'}
diff --git a/src/features/users/components/users-table/cell-action.tsx b/src/features/users/components/users-table/cell-action.tsx
index 154872b..f155130 100644
--- a/src/features/users/components/users-table/cell-action.tsx
+++ b/src/features/users/components/users-table/cell-action.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { useTranslations } from 'next-intl';
 import { AlertModal } from '@/components/modal/alert-modal';
 import { Button } from '@/components/ui/button';
 import {
@@ -21,6 +22,7 @@ interface CellActionProps {
 }
 
 export function CellAction({ data }: CellActionProps) {
+  const t = useTranslations();
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [editOpen, setEditOpen] = useState(false);
 
@@ -47,12 +49,12 @@ export function CellAction({ data }: CellActionProps) {
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
           <Button variant='ghost' className='h-8 w-8 p-0'>
-            <span className='sr-only'>Open menu</span>
+            <span className='sr-only'>{t('cell_action.open_menu')}</span>
             <Icons.ellipsis className='h-4 w-4' />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='end'>
-          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuLabel>{t('cell_action.actions')}</DropdownMenuLabel>
           <DropdownMenuItem onClick={() => setEditOpen(true)}>
             <Icons.edit className='mr-2 h-4 w-4' /> Update
           </DropdownMenuItem>
diff --git a/src/i18n/request.ts b/src/i18n/request.ts
new file mode 100644
index 0000000..eb85a4b
--- /dev/null
+++ b/src/i18n/request.ts
@@ -0,0 +1,11 @@
+import { getRequestConfig } from 'next-intl/server';
+
+// Single-locale setup (no locale routing): the agent localizes the code and seeds the
+// messages; negotiating / switching the active locale is left to the team.
+export default getRequestConfig(async () => {
+  const locale = 'en';
+  return {
+    locale,
+    messages: (await import(`../../messages/${locale}.json`)).default,
+  };
+});
