diff --git a/docs/1-internationalization.md b/docs/1-internationalization.md
index b352f9e93..16e01471e 100644
--- a/docs/1-internationalization.md
+++ b/docs/1-internationalization.md
@@ -13,7 +13,7 @@ When using translations in a React component, default to using the [useTranslati
 
 ```jsx
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 export function MyComponent() {
   const { t } = useTranslation()
@@ -32,7 +32,7 @@ For simple interpolation, follow this pattern:
 
 ```jsx
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 export function MyComponent() {
   const { t } = useTranslation()
diff --git a/packages/web/components/Badge/Badge.tsx b/packages/web/components/Badge/Badge.tsx
index bed60793b..897a8a742 100644
--- a/packages/web/components/Badge/Badge.tsx
+++ b/packages/web/components/Badge/Badge.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { UserBadgeFragmentFragment as Badge, BadgeType } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import theme from '@/theme'
 
 type Props = {
diff --git a/packages/web/components/Dashboard/Filters/Filters.tsx b/packages/web/components/Dashboard/Filters/Filters.tsx
index 3b3003e75..aae182dd9 100644
--- a/packages/web/components/Dashboard/Filters/Filters.tsx
+++ b/packages/web/components/Dashboard/Filters/Filters.tsx
@@ -7,7 +7,7 @@ import LanguageSelect from './LanguageSelect'
 import TopicSelect from './TopicSelect'
 import useToggle from '@/hooks/useToggle'
 import useUILanguage from '@/hooks/useUILanguage'
-import { Router, useTranslation } from '@/config/i18n'
+import { Router, useTranslation } from 'next-i18next'
 import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal'
 
 export type PostQueryVarsType = {
diff --git a/packages/web/components/Dashboard/Filters/LanguageSelect.tsx b/packages/web/components/Dashboard/Filters/LanguageSelect.tsx
index e3b57f15d..526c26c49 100644
--- a/packages/web/components/Dashboard/Filters/LanguageSelect.tsx
+++ b/packages/web/components/Dashboard/Filters/LanguageSelect.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import MultiSelect from '@/components/MultiSelect'
 import { LanguagesQuery } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type Props = {
   languagesData: LanguagesQuery | undefined
diff --git a/packages/web/components/Dashboard/Filters/SearchInput.tsx b/packages/web/components/Dashboard/Filters/SearchInput.tsx
index 4ff8c4b38..7509bb868 100644
--- a/packages/web/components/Dashboard/Filters/SearchInput.tsx
+++ b/packages/web/components/Dashboard/Filters/SearchInput.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import _ from 'lodash'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type Props = {
   defaultValue: string
diff --git a/packages/web/components/Dashboard/Filters/TopicSelect.tsx b/packages/web/components/Dashboard/Filters/TopicSelect.tsx
index ed2c5a7a1..b043d9f25 100644
--- a/packages/web/components/Dashboard/Filters/TopicSelect.tsx
+++ b/packages/web/components/Dashboard/Filters/TopicSelect.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import MultiSelect from '@/components/MultiSelect'
 import { Topic } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type Props = {
   topics: Topic[] | undefined
diff --git a/packages/web/components/Dashboard/MyFeed/MyFeed.tsx b/packages/web/components/Dashboard/MyFeed/MyFeed.tsx
index 2bfabaf96..c16f93771 100644
--- a/packages/web/components/Dashboard/MyFeed/MyFeed.tsx
+++ b/packages/web/components/Dashboard/MyFeed/MyFeed.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { toast } from 'react-toastify'
 import _ from 'lodash'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { gtag } from '@/components/GoogleAnalytics'
 import Pagination from '@/components/Pagination'
 import LoadingWrapper from '@/components/LoadingWrapper'
diff --git a/packages/web/components/Dashboard/MyPosts/MyPosts.tsx b/packages/web/components/Dashboard/MyPosts/MyPosts.tsx
index 7a2067c65..07ccdd53e 100644
--- a/packages/web/components/Dashboard/MyPosts/MyPosts.tsx
+++ b/packages/web/components/Dashboard/MyPosts/MyPosts.tsx
@@ -6,7 +6,7 @@ import {
   User as UserType,
   usePostsQuery,
 } from '@/generated/graphql'
-import { useTranslation, Trans } from '@/config/i18n'
+import { useTranslation, Trans } from 'next-i18next'
 import TranslationLink from '@/components/TranslationLink'
 import LoadingSpinner from '@/components/Icons/LoadingSpinner'
 import PostCard from '../PostCard'
diff --git a/packages/web/components/Dashboard/Nav/Nav.tsx b/packages/web/components/Dashboard/Nav/Nav.tsx
index 5b9ba49c4..6bb5d98e0 100644
--- a/packages/web/components/Dashboard/Nav/Nav.tsx
+++ b/packages/web/components/Dashboard/Nav/Nav.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState, useEffect, useRef } from 'react'
 import Link from 'next/link'
 import classNames from 'classnames'
 
-import { Router, useTranslation } from '@/config/i18n'
+import { Router, useTranslation } from 'next-i18next'
 import { navConstants } from './nav-constants'
 import theme from '@/theme'
 import {
diff --git a/packages/web/components/Dashboard/Post/Post.tsx b/packages/web/components/Dashboard/Post/Post.tsx
index 4cf1234b9..59254b746 100644
--- a/packages/web/components/Dashboard/Post/Post.tsx
+++ b/packages/web/components/Dashboard/Post/Post.tsx
@@ -23,7 +23,7 @@ import Button, { ButtonVariant } from '@/components/Button'
 import theme from '@/theme'
 import PostBodyStyles from '@/components/PostBodyStyles'
 import InlineFeedbackPopover, { PendingThreadData } from '@/components/InlineFeedbackPopover'
-import { Router, useTranslation } from '@/config/i18n'
+import { Router, useTranslation } from 'next-i18next'
 import PostHeader from '@/components/PostHeader'
 import ConfirmationModal from '@/components/Modals/ConfirmationModal'
 import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal'
diff --git a/packages/web/components/Dashboard/Post/PostAuthorCard.tsx b/packages/web/components/Dashboard/Post/PostAuthorCard.tsx
index a01f4c43c..55adcf110 100644
--- a/packages/web/components/Dashboard/Post/PostAuthorCard.tsx
+++ b/packages/web/components/Dashboard/Post/PostAuthorCard.tsx
@@ -7,7 +7,7 @@ import {
   useUnfollowUserMutation,
   useFollowingUsersQuery,
 } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { languageNameWithDialect } from '@/utils/languages'
 import Button, { ButtonVariant } from '@/components/Button'
 import LevelGauge from '@/components/LevelGauge'
diff --git a/packages/web/components/Dashboard/Post/PostComment.tsx b/packages/web/components/Dashboard/Post/PostComment.tsx
index ed63e3f2d..ba65a026c 100644
--- a/packages/web/components/Dashboard/Post/PostComment.tsx
+++ b/packages/web/components/Dashboard/Post/PostComment.tsx
@@ -6,7 +6,7 @@ import {
   useDeletePostCommentMutation,
   PostCommentFragmentFragment as PostCommentType,
 } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 import EditableMarkdown from '@/components/EditableMarkdown'
 import Button, { ButtonSize, ButtonVariant } from '@/components/Button'
diff --git a/packages/web/components/Dashboard/Post/PostComments.tsx b/packages/web/components/Dashboard/Post/PostComments.tsx
index 159926727..33266291e 100644
--- a/packages/web/components/Dashboard/Post/PostComments.tsx
+++ b/packages/web/components/Dashboard/Post/PostComments.tsx
@@ -12,7 +12,7 @@ import {
   PostPageQueryVariables,
   LanguageLevel,
 } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 import theme from '@/theme'
 import PostComment from './PostComment'
diff --git a/packages/web/components/Dashboard/Post/helpers.ts b/packages/web/components/Dashboard/Post/helpers.ts
index b9af7a01b..79f071ad1 100644
--- a/packages/web/components/Dashboard/Post/helpers.ts
+++ b/packages/web/components/Dashboard/Post/helpers.ts
@@ -1,5 +1,5 @@
 import { PostClapFragmentFragment as PostClapType } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { isChildOf } from '@/utils'
 
 // Elements whose boundaries a comment can cross
diff --git a/packages/web/components/Dashboard/PostCard/PostCard.tsx b/packages/web/components/Dashboard/PostCard/PostCard.tsx
index 08c1d9940..89f76dd25 100644
--- a/packages/web/components/Dashboard/PostCard/PostCard.tsx
+++ b/packages/web/components/Dashboard/PostCard/PostCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
 import classNames from 'classnames'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { formatShortDate } from '@/utils/date'
 import {
   PostStatus as PostStatusType,
diff --git a/packages/web/components/Dashboard/Profile/PostList.tsx b/packages/web/components/Dashboard/Profile/PostList.tsx
index 556da74a0..522d91945 100644
--- a/packages/web/components/Dashboard/Profile/PostList.tsx
+++ b/packages/web/components/Dashboard/Profile/PostList.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation, Trans } from '@/config/i18n'
+import { useTranslation, Trans } from 'next-i18next'
 import {
   PostCardFragmentFragment as PostType,
   UserWithLanguagesFragmentFragment as UserType,
diff --git a/packages/web/components/Dashboard/Profile/Profile.tsx b/packages/web/components/Dashboard/Profile/Profile.tsx
index 9dd3c6ddd..3dc624a9e 100644
--- a/packages/web/components/Dashboard/Profile/Profile.tsx
+++ b/packages/web/components/Dashboard/Profile/Profile.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import theme from '@/theme'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   ProfileUserFragmentFragment as UserType,
   PostCardFragmentFragment as PostCardType,
diff --git a/packages/web/components/Dashboard/Profile/ProfileCard.tsx b/packages/web/components/Dashboard/Profile/ProfileCard.tsx
index 29a660828..df02422ea 100644
--- a/packages/web/components/Dashboard/Profile/ProfileCard.tsx
+++ b/packages/web/components/Dashboard/Profile/ProfileCard.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FacebookIcon from '@/components/Icons/FacebookIcon'
 import InstagramIcon from '@/components/Icons/InstagramIcon'
 import YoutubeIcon from '@/components/Icons/YoutubeIcon'
diff --git a/packages/web/components/Dashboard/Profile/ProfileStats.tsx b/packages/web/components/Dashboard/Profile/ProfileStats.tsx
index cac6327ac..9ca981c7f 100644
--- a/packages/web/components/Dashboard/Profile/ProfileStats.tsx
+++ b/packages/web/components/Dashboard/Profile/ProfileStats.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback } from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import chroma from 'chroma-js'
 
 import differenceInCalendarWeeks from 'date-fns/differenceInCalendarWeeks'
diff --git a/packages/web/components/Dashboard/Settings/BioForm.tsx b/packages/web/components/Dashboard/Settings/BioForm.tsx
index ce915fe3b..72d9728cb 100644
--- a/packages/web/components/Dashboard/Settings/BioForm.tsx
+++ b/packages/web/components/Dashboard/Settings/BioForm.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'react-toastify'
 import { sanitize } from '@/utils'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FormError from '@/components/FormError'
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'
diff --git a/packages/web/components/Dashboard/Settings/Breadcrumbs.tsx b/packages/web/components/Dashboard/Settings/Breadcrumbs.tsx
index f7c4156f0..f87d105c5 100644
--- a/packages/web/components/Dashboard/Settings/Breadcrumbs.tsx
+++ b/packages/web/components/Dashboard/Settings/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useRouter } from 'next/router'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import theme from '@/theme'
 
 const Breadcrumbs: React.FC = () => {
diff --git a/packages/web/components/Dashboard/Settings/DetailsForm.tsx b/packages/web/components/Dashboard/Settings/DetailsForm.tsx
index 3026c23d3..6cdfed298 100644
--- a/packages/web/components/Dashboard/Settings/DetailsForm.tsx
+++ b/packages/web/components/Dashboard/Settings/DetailsForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback } from 'react'
 import { useForm } from 'react-hook-form'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FormError from '@/components/FormError'
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'
diff --git a/packages/web/components/Dashboard/Settings/InterestsForm.tsx b/packages/web/components/Dashboard/Settings/InterestsForm.tsx
index de12562ff..d74bf88bb 100644
--- a/packages/web/components/Dashboard/Settings/InterestsForm.tsx
+++ b/packages/web/components/Dashboard/Settings/InterestsForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   TopicFragmentFragment as TopicType,
   UserInterestFragmentFragment as UserInterestType,
diff --git a/packages/web/components/Dashboard/Settings/LanguagesForm.tsx b/packages/web/components/Dashboard/Settings/LanguagesForm.tsx
index bcb187de9..a7cf4caee 100644
--- a/packages/web/components/Dashboard/Settings/LanguagesForm.tsx
+++ b/packages/web/components/Dashboard/Settings/LanguagesForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   LanguageFragmentFragment as LanguageType,
   LanguageRelation as LanguageRelationType,
diff --git a/packages/web/components/Dashboard/Settings/NotificationSettingsForm.tsx b/packages/web/components/Dashboard/Settings/NotificationSettingsForm.tsx
index bd0e6ed7b..466e85ddf 100644
--- a/packages/web/components/Dashboard/Settings/NotificationSettingsForm.tsx
+++ b/packages/web/components/Dashboard/Settings/NotificationSettingsForm.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   DigestEmailConfiguration as DigestEmailConfigurationType,
   useUpdateUserConfigurationMutation,
diff --git a/packages/web/components/Dashboard/Settings/SettingsNav.tsx b/packages/web/components/Dashboard/Settings/SettingsNav.tsx
index 4a698a7fe..1b8090a71 100644
--- a/packages/web/components/Dashboard/Settings/SettingsNav.tsx
+++ b/packages/web/components/Dashboard/Settings/SettingsNav.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import NavLink from '@/components/NavLink'
 import theme from '@/theme'
 
diff --git a/packages/web/components/Dashboard/Settings/SocialForm.tsx b/packages/web/components/Dashboard/Settings/SocialForm.tsx
index 6e8acd2ca..5e746aa77 100644
--- a/packages/web/components/Dashboard/Settings/SocialForm.tsx
+++ b/packages/web/components/Dashboard/Settings/SocialForm.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'react-toastify'
 import { ApolloError } from '@apollo/client'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'
 import Button, { ButtonVariant } from '@/components/Button'
diff --git a/packages/web/components/Dashboard/Settings/SocialFormField.tsx b/packages/web/components/Dashboard/Settings/SocialFormField.tsx
index a99475528..d8f09ec80 100644
--- a/packages/web/components/Dashboard/Settings/SocialFormField.tsx
+++ b/packages/web/components/Dashboard/Settings/SocialFormField.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { FieldError, ValidationOptions } from 'react-hook-form'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FacebookIcon from '@/components/Icons/FacebookIcon'
 import GlobeIcon from '@/components/Icons/GlobeIcon'
 import InstagramIcon from '@/components/Icons/InstagramIcon'
diff --git a/packages/web/components/Dashboard/Settings/Subscription/CardOnFile.tsx b/packages/web/components/Dashboard/Settings/Subscription/CardOnFile.tsx
index 5e1c903d5..9461ad300 100644
--- a/packages/web/components/Dashboard/Settings/Subscription/CardOnFile.tsx
+++ b/packages/web/components/Dashboard/Settings/Subscription/CardOnFile.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import theme from '@/theme'
 import Button, { ButtonSize, ButtonVariant } from '@/components/Button'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import UpdateCardFormModal from './UpdateCardFormModal'
 
 type CardOnFileProps = {
diff --git a/packages/web/components/Dashboard/Settings/Subscription/PaymentForm.tsx b/packages/web/components/Dashboard/Settings/Subscription/PaymentForm.tsx
index 040b0f9f0..ff678ddc7 100644
--- a/packages/web/components/Dashboard/Settings/Subscription/PaymentForm.tsx
+++ b/packages/web/components/Dashboard/Settings/Subscription/PaymentForm.tsx
@@ -9,7 +9,7 @@ import {
 } from '@/generated/graphql'
 import Button from '@/components/Button'
 import SubscriptionPlanSelect from './SubscriptionPlanSelect'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import theme from '@/theme'
 
 type PaymentFormProps = {
diff --git a/packages/web/components/Dashboard/Settings/Subscription/PaymentFormModal.tsx b/packages/web/components/Dashboard/Settings/Subscription/PaymentFormModal.tsx
index b0a561b5a..14d55b531 100644
--- a/packages/web/components/Dashboard/Settings/Subscription/PaymentFormModal.tsx
+++ b/packages/web/components/Dashboard/Settings/Subscription/PaymentFormModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Modal from '@/components/Modal'
 import PaymentForm from './PaymentForm'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type PaymentFormModalProps = {
   onClose: () => void
diff --git a/packages/web/components/Dashboard/Settings/Subscription/SubscriptionForm.tsx b/packages/web/components/Dashboard/Settings/Subscription/SubscriptionForm.tsx
index a4288bab7..9ad958376 100644
--- a/packages/web/components/Dashboard/Settings/Subscription/SubscriptionForm.tsx
+++ b/packages/web/components/Dashboard/Settings/Subscription/SubscriptionForm.tsx
@@ -3,7 +3,7 @@ import { toast } from 'react-toastify'
 
 import Button, { ButtonVariant } from '@/components/Button'
 import { useConfirmationModal } from '@/components/Modals/ConfirmationModal'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   MembershipSubscriptionPeriod,
   UserWithSubscriptionFragmentFragment as UserType,
diff --git a/packages/web/components/Dashboard/Settings/Subscription/SubscriptionPlanSelect.tsx b/packages/web/components/Dashboard/Settings/Subscription/SubscriptionPlanSelect.tsx
index d0b23c0c1..08b1d7523 100644
--- a/packages/web/components/Dashboard/Settings/Subscription/SubscriptionPlanSelect.tsx
+++ b/packages/web/components/Dashboard/Settings/Subscription/SubscriptionPlanSelect.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { MembershipSubscriptionPeriod } from '@/generated/graphql'
 import Select from '@/components/Select'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type SubscriptionPlanSelectProps = {
   selectedOption: MembershipSubscriptionPeriod
diff --git a/packages/web/components/Dashboard/Settings/Subscription/UpdateCardForm.tsx b/packages/web/components/Dashboard/Settings/Subscription/UpdateCardForm.tsx
index 28605b4a3..b6880a192 100644
--- a/packages/web/components/Dashboard/Settings/Subscription/UpdateCardForm.tsx
+++ b/packages/web/components/Dashboard/Settings/Subscription/UpdateCardForm.tsx
@@ -7,7 +7,7 @@ import {
   useUpdateSubscriptionPaymentMethodMutation,
 } from '@/generated/graphql'
 import Button from '@/components/Button'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import theme from '@/theme'
 
 type UpdateCardFormProps = {
diff --git a/packages/web/components/Dashboard/Settings/Subscription/UpdateCardFormModal.tsx b/packages/web/components/Dashboard/Settings/Subscription/UpdateCardFormModal.tsx
index bb8f38601..2046feee8 100644
--- a/packages/web/components/Dashboard/Settings/Subscription/UpdateCardFormModal.tsx
+++ b/packages/web/components/Dashboard/Settings/Subscription/UpdateCardFormModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Modal from '@/components/Modal'
 import UpdateCardForm from './UpdateCardForm'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type UpdateCardFormModalProps = {
   onClose: () => void
diff --git a/packages/web/components/Dashboard/Settings/UILanguageForm.tsx b/packages/web/components/Dashboard/Settings/UILanguageForm.tsx
index db1ac2f84..2b63e8637 100644
--- a/packages/web/components/Dashboard/Settings/UILanguageForm.tsx
+++ b/packages/web/components/Dashboard/Settings/UILanguageForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'
diff --git a/packages/web/components/Dashboard/Settings/UpdatePasswordForm.tsx b/packages/web/components/Dashboard/Settings/UpdatePasswordForm.tsx
index da3d67de2..3afa1179a 100644
--- a/packages/web/components/Dashboard/Settings/UpdatePasswordForm.tsx
+++ b/packages/web/components/Dashboard/Settings/UpdatePasswordForm.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'react-toastify'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FormError from '@/components/FormError'
 import SettingsForm from '@/components/Dashboard/Settings/SettingsForm'
 import SettingsFieldset from '@/components/Dashboard/Settings/SettingsFieldset'
diff --git a/packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx b/packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx
index 2eb3d8db7..fedfea5fe 100644
--- a/packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx
+++ b/packages/web/components/FeatureComparisonTable/FeatureComparisonTable.tsx
@@ -1,6 +1,6 @@
 import theme from '@/theme'
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import CheckmarkCircleIcon from '../Icons/CheckmarkCircleIcon'
 
 type FeatureProps = {
diff --git a/packages/web/components/InlineFeedbackPopover/Comment.tsx b/packages/web/components/InlineFeedbackPopover/Comment.tsx
index e22050b1b..cd4a2b6dd 100644
--- a/packages/web/components/InlineFeedbackPopover/Comment.tsx
+++ b/packages/web/components/InlineFeedbackPopover/Comment.tsx
@@ -15,7 +15,7 @@ import {
   useApplySuggestionMutation,
 } from '@/generated/graphql'
 import theme from '@/theme'
-import { Router, useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import EditableMarkdown from '@/components/EditableMarkdown'
 import Button, { ButtonSize, ButtonVariant } from '@/components/Button'
 import { useConfirmationModal } from '@/components/Modals/ConfirmationModal'
@@ -28,6 +28,7 @@ import LevelGauge from '../LevelGauge'
 import UserAvatar from '../UserAvatar'
 import PremiumFeatureModal from '../Modals/PremiumFeatureModal'
 import { JOURNALY_PREMIUM_URL } from '@/constants'
+import { useRouter } from 'next/router'
 
 type CommentProps = {
   comment: CommentType
@@ -52,6 +53,7 @@ const Comment = ({
   currentContentInPost,
   postAuthorId,
 }: CommentProps) => {
+  const router = useRouter()
   const { t } = useTranslation('comment')
   const [isEditMode, setIsEditMode] = useState(false)
   const [updatingCommentBody, setUpdatingCommentBody] = useState(comment.body)
@@ -310,7 +312,7 @@ const Comment = ({
           featureExplanation={t('acceptSuggestionPremiumFeatureExplanation')}
           onAcknowledge={() => setDisplayPremiumFeatureModal(false)}
           onGoToPremium={() => {
-            Router.push(JOURNALY_PREMIUM_URL)
+            router.push(JOURNALY_PREMIUM_URL)
             setDisplayPremiumFeatureModal(false)
           }}
         />
diff --git a/packages/web/components/InlineFeedbackPopover/Thread.tsx b/packages/web/components/InlineFeedbackPopover/Thread.tsx
index 56245c1a2..c664c38d9 100644
--- a/packages/web/components/InlineFeedbackPopover/Thread.tsx
+++ b/packages/web/components/InlineFeedbackPopover/Thread.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import {
   useCreateCommentMutation,
   useCreateThreadMutation,
diff --git a/packages/web/components/InterestFormField/InterestFormField.tsx b/packages/web/components/InterestFormField/InterestFormField.tsx
index 05ba80b41..c0b20d595 100644
--- a/packages/web/components/InterestFormField/InterestFormField.tsx
+++ b/packages/web/components/InterestFormField/InterestFormField.tsx
@@ -7,7 +7,7 @@ import {
 } from '@/generated/graphql'
 import Button, { ButtonVariant } from '@/components/Button'
 import { OptionPills } from '@/components/MultiSelect'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import Select from '../Select'
 
 type Props = {
diff --git a/packages/web/components/JournalyEditor/Toolbar/InsertImageButton.tsx b/packages/web/components/JournalyEditor/Toolbar/InsertImageButton.tsx
index 12581bed0..c91701897 100644
--- a/packages/web/components/JournalyEditor/Toolbar/InsertImageButton.tsx
+++ b/packages/web/components/JournalyEditor/Toolbar/InsertImageButton.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { useSlate } from 'slate-react'
 
-import { useTranslation, Router } from '@/config/i18n'
+import { useTranslation, Router } from 'next-i18next'
 import BaseToolbarButton from './BaseToolbarButton'
 import { insertImage } from '../helpers'
 import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal'
diff --git a/packages/web/components/JournalyEditor/Toolbar/Toolbar.tsx b/packages/web/components/JournalyEditor/Toolbar/Toolbar.tsx
index 988c07874..c1998195d 100644
--- a/packages/web/components/JournalyEditor/Toolbar/Toolbar.tsx
+++ b/packages/web/components/JournalyEditor/Toolbar/Toolbar.tsx
@@ -30,7 +30,7 @@ import ToolbarButton from './ToolbarButton'
 import InsertImageButton from './InsertImageButton'
 import { isTableActive } from '../helpers'
 import SwitchToggle from '@/components/SwitchToggle'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import useIntersectionObserver from '@/hooks/userIntersectionObserver'
 
 type ToolbarProps = {
diff --git a/packages/web/components/JournalyEditor/Toolbar/ToolbarButton.tsx b/packages/web/components/JournalyEditor/Toolbar/ToolbarButton.tsx
index a6ce18bc5..0a1ad4850 100644
--- a/packages/web/components/JournalyEditor/Toolbar/ToolbarButton.tsx
+++ b/packages/web/components/JournalyEditor/Toolbar/ToolbarButton.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { useSlate } from 'slate-react'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 import BaseToolbarButton from './BaseToolbarButton'
 import { ButtonType, toogleByType, isTypeActive } from '../helpers'
diff --git a/packages/web/components/LanguageFormField/LanguageFormField.tsx b/packages/web/components/LanguageFormField/LanguageFormField.tsx
index ca6253296..08407246b 100644
--- a/packages/web/components/LanguageFormField/LanguageFormField.tsx
+++ b/packages/web/components/LanguageFormField/LanguageFormField.tsx
@@ -11,7 +11,7 @@ import Button, { ButtonVariant } from '@/components/Button'
 import { OptionPills } from '@/components/MultiSelect'
 import { languageNameWithDialect } from '@/utils/languages'
 import theme from '@/theme'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type Props = {
   languages: LanguageType[]
diff --git a/packages/web/components/LoadingWrapper/LoadingWrapper.tsx b/packages/web/components/LoadingWrapper/LoadingWrapper.tsx
index cee56a034..06479eab4 100644
--- a/packages/web/components/LoadingWrapper/LoadingWrapper.tsx
+++ b/packages/web/components/LoadingWrapper/LoadingWrapper.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ApolloError } from '@apollo/client'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import LoadingSpinner from '@/components/Icons/LoadingSpinner'
 import theme from '@/theme'
 
diff --git a/packages/web/components/LoginForm/LoginForm.tsx b/packages/web/components/LoginForm/LoginForm.tsx
index 52505fd53..eb5284857 100644
--- a/packages/web/components/LoginForm/LoginForm.tsx
+++ b/packages/web/components/LoginForm/LoginForm.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useForm, ErrorMessage } from 'react-hook-form'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { useLoginUserMutation, CurrentUserDocument, useCurrentUserQuery } from '@/generated/graphql'
 import FormError from '@/components/FormError'
 import Button from '@/components/Button'
diff --git a/packages/web/components/Modals/ConfirmationModal/ConfirmationModal.tsx b/packages/web/components/Modals/ConfirmationModal/ConfirmationModal.tsx
index 5a0ed89be..ff1a33981 100644
--- a/packages/web/components/Modals/ConfirmationModal/ConfirmationModal.tsx
+++ b/packages/web/components/Modals/ConfirmationModal/ConfirmationModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import Button, { ButtonVariant } from '@/components/Button'
 import Modal from '@/components/Modal'
 
diff --git a/packages/web/components/Modals/ImageUploadModal/ImageUploadModal.tsx b/packages/web/components/Modals/ImageUploadModal/ImageUploadModal.tsx
index a1a7950b6..b1d7bb669 100644
--- a/packages/web/components/Modals/ImageUploadModal/ImageUploadModal.tsx
+++ b/packages/web/components/Modals/ImageUploadModal/ImageUploadModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import Button, { ButtonVariant } from '@/components/Button'
 import Modal from '@/components/Modal'
 import theme from '@/theme'
diff --git a/packages/web/components/Modals/ImageUploadModal/SearchUnsplash.tsx b/packages/web/components/Modals/ImageUploadModal/SearchUnsplash.tsx
index fda65333f..890989199 100644
--- a/packages/web/components/Modals/ImageUploadModal/SearchUnsplash.tsx
+++ b/packages/web/components/Modals/ImageUploadModal/SearchUnsplash.tsx
@@ -4,7 +4,7 @@ import { toast } from 'react-toastify'
 import { InitiatePostImageUploadResponse } from '@/generated/graphql'
 import theme from '@/theme'
 import SearchInput from '@/components/Dashboard/Filters/SearchInput'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 /**
  * PostEditor
diff --git a/packages/web/components/Modals/ImageUploadModal/UploadImage.tsx b/packages/web/components/Modals/ImageUploadModal/UploadImage.tsx
index b20bdf684..c8da22c32 100644
--- a/packages/web/components/Modals/ImageUploadModal/UploadImage.tsx
+++ b/packages/web/components/Modals/ImageUploadModal/UploadImage.tsx
@@ -5,7 +5,7 @@ import { ButtonVariant } from '@/components/Button'
 import usePostImageUpload from '@/hooks/usePostImageUpload'
 import { InitiatePostImageUploadResponse } from '@/generated/graphql'
 import { HTMLInputEvent } from '@/hooks/useImageUpload'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type UploadImageProps = {
   onImageSelect: (image: InitiatePostImageUploadResponse | null) => void
diff --git a/packages/web/components/Modals/PremiumFeatureModal/PremiumFeatureModal.tsx b/packages/web/components/Modals/PremiumFeatureModal/PremiumFeatureModal.tsx
index af70dcdc5..0015eb8bd 100644
--- a/packages/web/components/Modals/PremiumFeatureModal/PremiumFeatureModal.tsx
+++ b/packages/web/components/Modals/PremiumFeatureModal/PremiumFeatureModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import Button, { ButtonVariant } from '@/components/Button'
 import Modal from '@/components/Modal'
 
diff --git a/packages/web/components/Modals/WelcomeModal/WelcomeModalBody.tsx b/packages/web/components/Modals/WelcomeModal/WelcomeModalBody.tsx
index fa892514d..d1c091f21 100644
--- a/packages/web/components/Modals/WelcomeModal/WelcomeModalBody.tsx
+++ b/packages/web/components/Modals/WelcomeModal/WelcomeModalBody.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { ApolloQueryResult } from '@apollo/client'
 import {
   LanguagesFormDataQuery,
diff --git a/packages/web/components/NotificationFeed/NotificationFeed.tsx b/packages/web/components/NotificationFeed/NotificationFeed.tsx
index 980403995..3b6ada40a 100644
--- a/packages/web/components/NotificationFeed/NotificationFeed.tsx
+++ b/packages/web/components/NotificationFeed/NotificationFeed.tsx
@@ -17,7 +17,7 @@ import GenericErrorBoundary from '@/components/GenericErrorBoundary'
 import XIcon from '../Icons/XIcon'
 import { useNotificationContext } from './NotificationContext'
 import NotificationLevelTwo from './NotificationLevelTwo'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import useOnClickOut from '@/hooks/useOnClickOut'
 import { findEventTargetParent } from '@/utils'
 
diff --git a/packages/web/components/NotificationFeed/Notifications.tsx b/packages/web/components/NotificationFeed/Notifications.tsx
index 35019d85f..230ed0453 100644
--- a/packages/web/components/NotificationFeed/Notifications.tsx
+++ b/packages/web/components/NotificationFeed/Notifications.tsx
@@ -10,7 +10,7 @@ import {
 import theme from '@/theme'
 import ClapIcon from '../Icons/ClapIcon'
 import UserList from '../UserList'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import LikeIcon from '../Icons/LikeIcon'
 import UserAvatar from '../UserAvatar'
 import MultiuserAvatar from '../MultiuserAvatar'
diff --git a/packages/web/components/Pagination/Pagination.tsx b/packages/web/components/Pagination/Pagination.tsx
index 4fe555fea..1738bc654 100644
--- a/packages/web/components/Pagination/Pagination.tsx
+++ b/packages/web/components/Pagination/Pagination.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type Props = {
   currentPage: number
diff --git a/packages/web/components/PostEditor/PostEditor.tsx b/packages/web/components/PostEditor/PostEditor.tsx
index 9e11c2b05..1b61e6b9e 100644
--- a/packages/web/components/PostEditor/PostEditor.tsx
+++ b/packages/web/components/PostEditor/PostEditor.tsx
@@ -18,7 +18,7 @@ import {
   InitiatePostImageUploadResponse,
 } from '@/generated/graphql'
 import { languageNameWithDialect } from '@/utils/languages'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import ImageUploadModal from '../Modals/ImageUploadModal'
 
 type BasePostData = {
diff --git a/packages/web/components/PostHeader/PostHeader.tsx b/packages/web/components/PostHeader/PostHeader.tsx
index 58fe84218..5e5acc5cb 100644
--- a/packages/web/components/PostHeader/PostHeader.tsx
+++ b/packages/web/components/PostHeader/PostHeader.tsx
@@ -7,7 +7,7 @@ import {
   LanguageFragmentFragment as LanguageType,
   LanguageLevel,
 } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { formatLongDate } from '@/utils'
 
 import theme from '@/theme'
diff --git a/packages/web/components/PrivateShareLink/PrivateShareLink.tsx b/packages/web/components/PrivateShareLink/PrivateShareLink.tsx
index c867a23e0..6ab9df04e 100644
--- a/packages/web/components/PrivateShareLink/PrivateShareLink.tsx
+++ b/packages/web/components/PrivateShareLink/PrivateShareLink.tsx
@@ -3,7 +3,7 @@ import { toast } from 'react-toastify'
 import Button, { ButtonVariant } from '@/components/Button'
 import ContentCopyIcon from '../Icons/ContentCopyIcon'
 import theme from '@/theme'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type PrivateShareLinkProps = {
   privateShareId: string
diff --git a/packages/web/components/RequestResetPasswordForm/RequestResetPasswordForm.tsx b/packages/web/components/RequestResetPasswordForm/RequestResetPasswordForm.tsx
index f7dc2b348..5162522cc 100644
--- a/packages/web/components/RequestResetPasswordForm/RequestResetPasswordForm.tsx
+++ b/packages/web/components/RequestResetPasswordForm/RequestResetPasswordForm.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { useForm, ErrorMessage } from 'react-hook-form'
 import { toast } from 'react-toastify'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { useRequestResetPasswordMutation } from '@/generated/graphql'
 import FormError from '@/components/FormError'
 import Button from '@/components/Button'
diff --git a/packages/web/components/ResetPasswordForm/ResetPasswordForm.tsx b/packages/web/components/ResetPasswordForm/ResetPasswordForm.tsx
index 0ebd6668f..dd1827baa 100644
--- a/packages/web/components/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/packages/web/components/ResetPasswordForm/ResetPasswordForm.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { useForm, ErrorMessage } from 'react-hook-form'
 import { toast } from 'react-toastify'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { useResetPasswordMutation } from '@/generated/graphql'
 import FormError from '@/components/FormError'
 import Button from '@/components/Button'
diff --git a/packages/web/components/SignupForm/SignupForm.tsx b/packages/web/components/SignupForm/SignupForm.tsx
index bbf118197..4f2cf70a6 100644
--- a/packages/web/components/SignupForm/SignupForm.tsx
+++ b/packages/web/components/SignupForm/SignupForm.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useForm, ErrorMessage } from 'react-hook-form'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { useCreateUserMutation, useCurrentUserQuery } from '@/generated/graphql'
 import FormError from '@/components/FormError'
 import Button from '@/components/Button'
diff --git a/packages/web/components/Site/Home/FeatureSection.tsx b/packages/web/components/Site/Home/FeatureSection.tsx
index 60b30cba3..380231873 100644
--- a/packages/web/components/Site/Home/FeatureSection.tsx
+++ b/packages/web/components/Site/Home/FeatureSection.tsx
@@ -1,4 +1,4 @@
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import FeatureComparisonTable from '@/components/FeatureComparisonTable'
 import HomeSection from './HomeSection'
 
diff --git a/packages/web/components/Site/Home/ReasonsSection.tsx b/packages/web/components/Site/Home/ReasonsSection.tsx
index 136bcbfa6..4d8a4f4e7 100644
--- a/packages/web/components/Site/Home/ReasonsSection.tsx
+++ b/packages/web/components/Site/Home/ReasonsSection.tsx
@@ -1,5 +1,5 @@
 import HomeSection from './HomeSection'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type ReasonCardProps = {
   image: string
diff --git a/packages/web/components/Site/Home/TestimonialsSection.tsx b/packages/web/components/Site/Home/TestimonialsSection.tsx
index 41bdd22a9..a0815c7b2 100644
--- a/packages/web/components/Site/Home/TestimonialsSection.tsx
+++ b/packages/web/components/Site/Home/TestimonialsSection.tsx
@@ -1,4 +1,4 @@
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import React from 'react'
 import HomeSection from './HomeSection'
 import Testimonial from './Testimonial'
diff --git a/packages/web/components/Site/Home/TopSection.tsx b/packages/web/components/Site/Home/TopSection.tsx
index acc40b64c..cad85357c 100644
--- a/packages/web/components/Site/Home/TopSection.tsx
+++ b/packages/web/components/Site/Home/TopSection.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import theme from '@/theme'
 import Button, { ButtonSize } from '@/components/Button'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 const TopSection = () => {
   const { t } = useTranslation('common')
diff --git a/packages/web/components/Site/Home/VideoSection.tsx b/packages/web/components/Site/Home/VideoSection.tsx
index f330a48ab..2491abbb3 100644
--- a/packages/web/components/Site/Home/VideoSection.tsx
+++ b/packages/web/components/Site/Home/VideoSection.tsx
@@ -1,4 +1,4 @@
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import HomeSection from './HomeSection'
 
 const VideoSection = () => {
diff --git a/packages/web/components/Site/Nav/Nav.tsx b/packages/web/components/Site/Nav/Nav.tsx
index 9521ca03f..5af650eab 100644
--- a/packages/web/components/Site/Nav/Nav.tsx
+++ b/packages/web/components/Site/Nav/Nav.tsx
@@ -1,5 +1,5 @@
 import { useCurrentUserQuery, User as UserType } from '@/generated/graphql'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import NavLink from '@/components/NavLink'
 import Logo from '@/components/Logo'
 import theme from '@/theme'
diff --git a/packages/web/components/Site/Pricing/Pricing.tsx b/packages/web/components/Site/Pricing/Pricing.tsx
index 488b7e4f0..5ae3b3ab9 100644
--- a/packages/web/components/Site/Pricing/Pricing.tsx
+++ b/packages/web/components/Site/Pricing/Pricing.tsx
@@ -1,6 +1,6 @@
 import FeatureComparisonTable from '@/components/FeatureComparisonTable'
 import theme from '@/theme'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 const Pricing = () => {
   const { t } = useTranslation('settings')
diff --git a/packages/web/components/SwipeableElement/SwipeableElement.tsx b/packages/web/components/SwipeableElement/SwipeableElement.tsx
index 7084739b8..8d680ff05 100644
--- a/packages/web/components/SwipeableElement/SwipeableElement.tsx
+++ b/packages/web/components/SwipeableElement/SwipeableElement.tsx
@@ -3,7 +3,7 @@ import React, { useRef } from 'react'
 import Button, { ButtonVariant } from '@/components/Button'
 import CheckmarkIcon from '../Icons/CheckmarkIcon'
 import DeleteIcon from '../Icons/DeleteIcon'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 
 type SwipeableElementProps = {
   nonDestructiveAction: () => void
diff --git a/packages/web/components/UILanguageSelect/UILanguageSelect.tsx b/packages/web/components/UILanguageSelect/UILanguageSelect.tsx
index e46c3d88d..096583b8b 100644
--- a/packages/web/components/UILanguageSelect/UILanguageSelect.tsx
+++ b/packages/web/components/UILanguageSelect/UILanguageSelect.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { I18nContext } from 'react-i18next'
-import { useTranslation, i18n } from '@/config/i18n'
+import { useTranslation, i18n } from 'next-i18next'
 
 import Select from '@/components/Select'
 
diff --git a/packages/web/hooks/useImageUpload.ts b/packages/web/hooks/useImageUpload.ts
index 28fa3941d..aa3a72aca 100644
--- a/packages/web/hooks/useImageUpload.ts
+++ b/packages/web/hooks/useImageUpload.ts
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { toast } from 'react-toastify'
 
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { uploadFile, BaseUploadData } from '@/utils/images'
 
 export interface HTMLInputEvent extends React.FormEvent {
diff --git a/packages/web/hooks/useUILanguage.ts b/packages/web/hooks/useUILanguage.ts
index 0c94a686d..3300e73d9 100644
--- a/packages/web/hooks/useUILanguage.ts
+++ b/packages/web/hooks/useUILanguage.ts
@@ -14,7 +14,8 @@ export const langCodeToUILangMap: { [key: string]: UILanguage } = {
 }
 
 const useUILanguage = () => {
-  const { i18n: { language } } = React.useContext(I18nContext)
+  const { i18n } = React.useContext(I18nContext)
+  const language = i18n?.language
 
   return langCodeToUILangMap[language] || UILanguage.English
 }
diff --git a/packages/web/config/i18n.js b/packages/web/next-i18next.config.js
similarity index 55%
rename from packages/web/config/i18n.js
rename to packages/web/next-i18next.config.js
index 8a10539ba..98d50f086 100644
--- a/packages/web/config/i18n.js
+++ b/packages/web/next-i18next.config.js
@@ -1,5 +1,4 @@
 const path = require('path')
-const NextI18Next = require('next-i18next').default
 
 const getLocalePath = () => {
   if (typeof window === 'undefined') {
@@ -14,13 +13,15 @@ const getLocalePath = () => {
   }
 }
 
-module.exports = new NextI18Next({
-  defaultLanguage: 'en',
-  // Other languages will be added here once there are translations for them, e.g. ['es', 'de']
-  otherLanguages: ['de', 'es', 'zh_CN', 'zh_TW', 'it', 'pt_BR'],
-  // The "dev" fallback language will show the translation key, indicating there is a missing translation
-  fallbackLng: process.env.NODE_ENV === 'production' ? 'en' : 'dev',
-  // Help nexti18next figure out how to load in a serverless env
+module.exports = {
+  i18n: {
+    // The "dev" fallback language will show the translation key, indicating there is a missing translation
+    defaultLocale: process.env.NODE_ENV === 'production' ? 'en-US' : 'dev',
+    // These are all the locales that we support in the application.
+    // Other languages will be added here once there are translations for them.
+    locales: ['en-US', 'de', 'es', 'zh_CN', 'zh_TW', 'it', 'pt_BR', 'dev'],
+    // Help nexti18next figure out how to load in a serverless env
+  },
   localePath: getLocalePath(),
   ns: [
     'common',
@@ -35,4 +36,4 @@ module.exports = new NextI18Next({
     'marketing',
   ],
   defaultNS: 'common',
-})
+}
diff --git a/packages/web/next.config.js b/packages/web/next.config.js
index 22445598a..fb4d39187 100644
--- a/packages/web/next.config.js
+++ b/packages/web/next.config.js
@@ -1,7 +1,13 @@
+const { i18n } = require('./next-i18next.config')
+
 const CopyPlugin = require("copy-webpack-plugin")
 
+/**
+ * @type {import('next').NextConfig}
+ */
 let config = {
   productionBrowserSourceMaps: true,
+  i18n,
   webpack: (config, { isServer }) => {
     // This is a workaround due to: https://github.com/prisma/prisma/issues/6564
     // Should be able to remove this when: https://github.com/prisma/prisma/pull/7931 is merged
diff --git a/packages/web/package-lock.json b/packages/web/package-lock.json
index 7a14d297b..b4b4ddd71 100644
--- a/packages/web/package-lock.json
+++ b/packages/web/package-lock.json
@@ -42,7 +42,7 @@
         "jwt-decode": "^4.0.0",
         "lodash": "^4.17.20",
         "next": "^14.2.5",
-        "next-i18next": "^7.0.1",
+        "next-i18next": "^15.3.1",
         "nexus": "^1.0.0",
         "nexus-plugin-prisma": "^0.35.0",
         "node-fetch": "^2.6.7",
@@ -1362,11 +1362,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.0.tgz",
-      "integrity": "sha512-TT6NB0oszYQ4oxLNUdG+FNHIc3MohXVCKA2BeyQ4WeM2VCSC6wBZ6P0Yfkdzxv+87D8Xk0LJyHeCKlWMvpZt0g==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
+      "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -4264,6 +4264,15 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/http-assert": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.3.tgz",
@@ -7889,9 +7898,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.30.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
-      "integrity": "sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -10283,6 +10292,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
       "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "peer": true,
       "dependencies": {
         "void-elements": "3.1.0"
       }
@@ -10358,65 +10368,32 @@
       "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
     },
     "node_modules/i18next": {
-      "version": "19.9.2",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.9.2.tgz",
-      "integrity": "sha512-0i6cuo6ER6usEOtKajUUDj92zlG+KArFia0857xxiEHAQcUwh/RtOQocui1LPJwunSYT574Pk64aNva1kwtxZg==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.0"
-      }
-    },
-    "node_modules/i18next-browser-languagedetector": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-5.0.1.tgz",
-      "integrity": "sha512-7K4A6DJ2rNz3Yd835Y493UgkzUxgpGsCeIMKLGkt6Ps0cbgSaJ+LdATFNFA+ujp2brmsUM9BeDThXKhabXUbUw==",
+      "version": "23.15.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.15.1.tgz",
+      "integrity": "sha512-wB4abZ3uK7EWodYisHl/asf8UYEhrI/vj/8aoSsrj/ZDxj4/UXPOa1KvFt1Fq5hkUHquNqwFlDprmjZ8iySgYA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "peer": true,
       "dependencies": {
-        "@babel/runtime": "^7.5.5"
+        "@babel/runtime": "^7.23.2"
       }
     },
     "node_modules/i18next-fs-backend": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-1.2.0.tgz",
-      "integrity": "sha512-pUx3AcgXCbur0jpFA7U67Z2RJflAcIi698Y8VL+phdOqUchahxriV3Cs+M6UkPNQSS/zPEzWLfdJ8EgjB7HVxg=="
-    },
-    "node_modules/i18next-http-backend": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.4.5.tgz",
-      "integrity": "sha512-tLuHWuLWl6CmS07o+UB6EcQCaUjrZ1yhdseIN7sfq0u7phsMePJ8pqlGhIAdRDPF/q7ooyo5MID5DRFBCH+x5w==",
-      "dependencies": {
-        "cross-fetch": "3.1.5"
-      }
-    },
-    "node_modules/i18next-http-backend/node_modules/cross-fetch": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
-      "dependencies": {
-        "node-fetch": "2.6.7"
-      }
-    },
-    "node_modules/i18next-http-backend/node_modules/node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/i18next-http-middleware": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/i18next-http-middleware/-/i18next-http-middleware-3.3.1.tgz",
-      "integrity": "sha512-mWUsdeV9SJSnrcLryUPhc5DZUewOXJd1Gx+UuEZYMtUv/Di4Zzt2I/A92x6/49ZFV2iRZ70oHgQGbqyrArIycw=="
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.3.2.tgz",
+      "integrity": "sha512-LIwUlkqDZnUI8lnUxBnEj8K/FrHQTT/Sc+1rvDm9E8YvvY5YxzoEAASNx+W5M9DfD5s77lI5vSAFWeTp26B/3Q=="
     },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
@@ -13781,47 +13758,38 @@
       }
     },
     "node_modules/next-i18next": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-7.0.1.tgz",
-      "integrity": "sha512-x97lSfB11q/5Flf1Ocz02WoXeIRuVi7oJQ+8p9kNSfoIJExz1nTLPpJmWr2SF8wDxaljzL/kjlETUOyptGhSjQ==",
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-15.3.1.tgz",
+      "integrity": "sha512-+pa2pZJb7B6k5PKW3TLVMmAodqkNaOBWVYlpWX56mgcEJz0UMW+MKSdKM9Z72CHp6Bp48g7OWwDnLqxXNp/84w==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        }
+      ],
       "dependencies": {
-        "@types/express": "^4.16.1",
+        "@babel/runtime": "^7.23.2",
+        "@types/hoist-non-react-statics": "^3.3.4",
         "core-js": "^3",
-        "hoist-non-react-statics": "^3.2.0",
-        "i18next": "^19.6.3",
-        "i18next-browser-languagedetector": "^5.0.0",
-        "i18next-fs-backend": "^1.0.7",
-        "i18next-http-backend": "^1.0.17",
-        "i18next-http-middleware": "^3.0.2",
-        "path-match": "^1.2.4",
-        "prop-types": "^15.6.2",
-        "react-i18next": "^11.7.3",
-        "url": "^0.11.0"
+        "hoist-non-react-statics": "^3.3.2",
+        "i18next-fs-backend": "^2.3.2"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/isaachinman"
+        "node": ">=14"
       },
       "peerDependencies": {
-        "next": ">= 9.5.0",
-        "react": ">= 16.8.0"
-      }
-    },
-    "node_modules/next-i18next/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
-    },
-    "node_modules/next-i18next/node_modules/url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
+        "i18next": ">= 23.7.13",
+        "next": ">= 12.0.0",
+        "react": ">= 17.0.2",
+        "react-i18next": ">= 13.5.0"
       }
     },
     "node_modules/nexus": {
@@ -14449,53 +14417,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-match": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/path-match/-/path-match-1.2.4.tgz",
-      "integrity": "sha512-UWlehEdqu36jmh4h5CWJ7tARp1OEVKGHKm6+dg9qMq5RKUTV5WJrGgaZ3dN2m7WFAXDbjlHzvJvL/IUpy84Ktw==",
-      "dependencies": {
-        "http-errors": "~1.4.0",
-        "path-to-regexp": "^1.0.0"
-      }
-    },
-    "node_modules/path-match/node_modules/http-errors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.4.0.tgz",
-      "integrity": "sha512-oLjPqve1tuOl5aRhv8GK5eHpqP1C9fb+Ol+XTLjKfLltE44zdDbEdjPSbU7Ch5rSNsVFqZn97SrMmZLdu1/YMw==",
-      "dependencies": {
-        "inherits": "2.0.1",
-        "statuses": ">= 1.2.1 < 2"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/path-match/node_modules/inherits": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-      "integrity": "sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA=="
-    },
-    "node_modules/path-match/node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
-    "node_modules/path-match/node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
-    "node_modules/path-match/node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -15042,15 +14963,16 @@
       }
     },
     "node_modules/react-i18next": {
-      "version": "11.18.6",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz",
-      "integrity": "sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==",
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.2.tgz",
+      "integrity": "sha512-z0W3/RES9Idv3MmJUcf0mDNeeMOUXe+xoL0kPfQPbDoZHmni/XsIoq5zgT2MCFUiau283GuBUK578uD/mkAbLQ==",
+      "peer": true,
       "dependencies": {
-        "@babel/runtime": "^7.14.5",
+        "@babel/runtime": "^7.25.0",
         "html-parse-stringify": "^3.0.1"
       },
       "peerDependencies": {
-        "i18next": ">= 19.0.0",
+        "i18next": ">= 23.2.3",
         "react": ">= 16.8.0"
       },
       "peerDependenciesMeta": {
@@ -15366,9 +15288,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.0",
@@ -18211,6 +18133,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
       "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -19600,11 +19523,11 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.0.tgz",
-      "integrity": "sha512-TT6NB0oszYQ4oxLNUdG+FNHIc3MohXVCKA2BeyQ4WeM2VCSC6wBZ6P0Yfkdzxv+87D8Xk0LJyHeCKlWMvpZt0g==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
+      "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
       "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       }
     },
     "@babel/template": {
@@ -21726,6 +21649,15 @@
         "@types/unist": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/http-assert": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.3.tgz",
@@ -24377,9 +24309,9 @@
       }
     },
     "core-js": {
-      "version": "3.30.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
-      "integrity": "sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg=="
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw=="
     },
     "core-js-pure": {
       "version": "3.30.2",
@@ -26202,6 +26134,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
       "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "peer": true,
       "requires": {
         "void-elements": "3.1.0"
       }
@@ -26261,56 +26194,18 @@
       "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
     },
     "i18next": {
-      "version": "19.9.2",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.9.2.tgz",
-      "integrity": "sha512-0i6cuo6ER6usEOtKajUUDj92zlG+KArFia0857xxiEHAQcUwh/RtOQocui1LPJwunSYT574Pk64aNva1kwtxZg==",
-      "requires": {
-        "@babel/runtime": "^7.12.0"
-      }
-    },
-    "i18next-browser-languagedetector": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-5.0.1.tgz",
-      "integrity": "sha512-7K4A6DJ2rNz3Yd835Y493UgkzUxgpGsCeIMKLGkt6Ps0cbgSaJ+LdATFNFA+ujp2brmsUM9BeDThXKhabXUbUw==",
+      "version": "23.15.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.15.1.tgz",
+      "integrity": "sha512-wB4abZ3uK7EWodYisHl/asf8UYEhrI/vj/8aoSsrj/ZDxj4/UXPOa1KvFt1Fq5hkUHquNqwFlDprmjZ8iySgYA==",
+      "peer": true,
       "requires": {
-        "@babel/runtime": "^7.5.5"
+        "@babel/runtime": "^7.23.2"
       }
     },
     "i18next-fs-backend": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-1.2.0.tgz",
-      "integrity": "sha512-pUx3AcgXCbur0jpFA7U67Z2RJflAcIi698Y8VL+phdOqUchahxriV3Cs+M6UkPNQSS/zPEzWLfdJ8EgjB7HVxg=="
-    },
-    "i18next-http-backend": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.4.5.tgz",
-      "integrity": "sha512-tLuHWuLWl6CmS07o+UB6EcQCaUjrZ1yhdseIN7sfq0u7phsMePJ8pqlGhIAdRDPF/q7ooyo5MID5DRFBCH+x5w==",
-      "requires": {
-        "cross-fetch": "3.1.5"
-      },
-      "dependencies": {
-        "cross-fetch": {
-          "version": "3.1.5",
-          "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
-          "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
-          "requires": {
-            "node-fetch": "2.6.7"
-          }
-        },
-        "node-fetch": {
-          "version": "2.6.7",
-          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-          "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-          "requires": {
-            "whatwg-url": "^5.0.0"
-          }
-        }
-      }
-    },
-    "i18next-http-middleware": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/i18next-http-middleware/-/i18next-http-middleware-3.3.1.tgz",
-      "integrity": "sha512-mWUsdeV9SJSnrcLryUPhc5DZUewOXJd1Gx+UuEZYMtUv/Di4Zzt2I/A92x6/49ZFV2iRZ70oHgQGbqyrArIycw=="
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.3.2.tgz",
+      "integrity": "sha512-LIwUlkqDZnUI8lnUxBnEj8K/FrHQTT/Sc+1rvDm9E8YvvY5YxzoEAASNx+W5M9DfD5s77lI5vSAFWeTp26B/3Q=="
     },
     "iconv-lite": {
       "version": "0.4.24",
@@ -28633,38 +28528,15 @@
       }
     },
     "next-i18next": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-7.0.1.tgz",
-      "integrity": "sha512-x97lSfB11q/5Flf1Ocz02WoXeIRuVi7oJQ+8p9kNSfoIJExz1nTLPpJmWr2SF8wDxaljzL/kjlETUOyptGhSjQ==",
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-15.3.1.tgz",
+      "integrity": "sha512-+pa2pZJb7B6k5PKW3TLVMmAodqkNaOBWVYlpWX56mgcEJz0UMW+MKSdKM9Z72CHp6Bp48g7OWwDnLqxXNp/84w==",
       "requires": {
-        "@types/express": "^4.16.1",
+        "@babel/runtime": "^7.23.2",
+        "@types/hoist-non-react-statics": "^3.3.4",
         "core-js": "^3",
-        "hoist-non-react-statics": "^3.2.0",
-        "i18next": "^19.6.3",
-        "i18next-browser-languagedetector": "^5.0.0",
-        "i18next-fs-backend": "^1.0.7",
-        "i18next-http-backend": "^1.0.17",
-        "i18next-http-middleware": "^3.0.2",
-        "path-match": "^1.2.4",
-        "prop-types": "^15.6.2",
-        "react-i18next": "^11.7.3",
-        "url": "^0.11.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
-        },
-        "url": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-          "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
-          "requires": {
-            "punycode": "1.3.2",
-            "querystring": "0.2.0"
-          }
-        }
+        "hoist-non-react-statics": "^3.3.2",
+        "i18next-fs-backend": "^2.3.2"
       }
     },
     "nexus": {
@@ -29118,49 +28990,6 @@
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
     },
-    "path-match": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/path-match/-/path-match-1.2.4.tgz",
-      "integrity": "sha512-UWlehEdqu36jmh4h5CWJ7tARp1OEVKGHKm6+dg9qMq5RKUTV5WJrGgaZ3dN2m7WFAXDbjlHzvJvL/IUpy84Ktw==",
-      "requires": {
-        "http-errors": "~1.4.0",
-        "path-to-regexp": "^1.0.0"
-      },
-      "dependencies": {
-        "http-errors": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.4.0.tgz",
-          "integrity": "sha512-oLjPqve1tuOl5aRhv8GK5eHpqP1C9fb+Ol+XTLjKfLltE44zdDbEdjPSbU7Ch5rSNsVFqZn97SrMmZLdu1/YMw==",
-          "requires": {
-            "inherits": "2.0.1",
-            "statuses": ">= 1.2.1 < 2"
-          }
-        },
-        "inherits": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "integrity": "sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA=="
-        },
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-        },
-        "path-to-regexp": {
-          "version": "1.8.0",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-          "requires": {
-            "isarray": "0.0.1"
-          }
-        },
-        "statuses": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-          "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA=="
-        }
-      }
-    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -29533,11 +29362,12 @@
       "requires": {}
     },
     "react-i18next": {
-      "version": "11.18.6",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.18.6.tgz",
-      "integrity": "sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==",
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.2.tgz",
+      "integrity": "sha512-z0W3/RES9Idv3MmJUcf0mDNeeMOUXe+xoL0kPfQPbDoZHmni/XsIoq5zgT2MCFUiau283GuBUK578uD/mkAbLQ==",
+      "peer": true,
       "requires": {
-        "@babel/runtime": "^7.14.5",
+        "@babel/runtime": "^7.25.0",
         "html-parse-stringify": "^3.0.1"
       }
     },
@@ -29738,9 +29568,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regexp.prototype.flags": {
       "version": "1.5.0",
@@ -31807,7 +31637,8 @@
     "void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "peer": true
     },
     "walker": {
       "version": "1.0.8",
diff --git a/packages/web/package.json b/packages/web/package.json
index 9c6b3813b..c7f7fabd2 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -71,7 +71,7 @@
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.20",
     "next": "^14.2.5",
-    "next-i18next": "^7.0.1",
+    "next-i18next": "^15.3.1",
     "nexus": "^1.0.0",
     "nexus-plugin-prisma": "^0.35.0",
     "node-fetch": "^2.6.7",
diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
index b4b827d83..09641694a 100644
--- a/packages/web/pages/_app.tsx
+++ b/packages/web/pages/_app.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import App from 'next/app'
+import {AppProps} from 'next/app'
 import Head from 'next/head'
-import Router, { withRouter } from 'next/router'
+import Router from 'next/router'
 import NProgress from 'nprogress'
 import { ToastContainer } from 'react-toastify'
-import nexti18Next from '@/config/i18n'
+import {appWithTranslation} from 'next-i18next'
 
 import GoogleAnalytics from '@/components/GoogleAnalytics'
 
@@ -20,11 +20,10 @@ import { initApolloClient } from '@/lib/apollo'
 Router.events.on('routeChangeStart', () => NProgress.start())
 Router.events.on('routeChangeError', () => NProgress.done())
 Router.events.on('routeChangeComplete', () => NProgress.done())
-class JournalyApp extends App {
-  componentDidMount() {}
 
-  render() {
-    const { Component, pageProps } = this.props
+const JournalyApp = (props: AppProps) =>  {
+    const { Component, pageProps } = props
+
     const client = initApolloClient(pageProps.apolloState)
 
     return (
@@ -39,7 +38,6 @@ class JournalyApp extends App {
         <ToastContainer />
       </ApolloProvider>
     )
-  }
 }
 
-export default nexti18Next.appWithTranslation(withRouter(JournalyApp))
+export default appWithTranslation(JournalyApp)
diff --git a/packages/web/pages/_document.tsx b/packages/web/pages/_document.tsx
index 7afae5f14..481af7e84 100644
--- a/packages/web/pages/_document.tsx
+++ b/packages/web/pages/_document.tsx
@@ -8,7 +8,7 @@ import Document, {
   DocumentProps,
 } from 'next/document'
 
-import { i18n } from '@/config/i18n'
+import { i18n } from 'next-i18next'
 
 interface CustomProps {
   language: string
@@ -19,7 +19,7 @@ class MyDocument extends Document<DocumentProps & { children?: ReactNode } & Cus
     const initialProps = await Document.getInitialProps(context)
 
     const additionalProps = {
-      language: i18n.language,
+      language: i18n?.language,
     }
 
     return { ...initialProps, ...additionalProps }
diff --git a/packages/web/pages/_error.tsx b/packages/web/pages/_error.tsx
index 7fdb9ddee..140b4efcd 100644
--- a/packages/web/pages/_error.tsx
+++ b/packages/web/pages/_error.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { NextPage } from 'next'
 import Error, { ErrorProps } from 'next/error'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import theme from '@/theme'
 
 const ErrorPage: NextPage<ErrorProps> = ({ statusCode }) => {
diff --git a/packages/web/pages/my-posts.tsx b/packages/web/pages/my-posts.tsx
index 03cbd1df2..27bf2f0b6 100644
--- a/packages/web/pages/my-posts.tsx
+++ b/packages/web/pages/my-posts.tsx
@@ -10,7 +10,7 @@ import {
   PostsDocument,
 } from '@/generated/graphql'
 import theme from '@/theme'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { journalyMiddleware } from '@/lib/journalyMiddleware'
 import { NUM_POSTS_PER_MY_POSTS_PAGE } from '@/constants'
 import { getCurrentUserId } from '@/utils/getCurrentUserId'
diff --git a/packages/web/pages/new-post.tsx b/packages/web/pages/new-post.tsx
index 2daae7f64..3b8ae2beb 100644
--- a/packages/web/pages/new-post.tsx
+++ b/packages/web/pages/new-post.tsx
@@ -21,7 +21,7 @@ import {
   NewPostDocument,
 } from '@/generated/graphql'
 import AuthGate from '@/components/AuthGate'
-import { useTranslation, Router } from '@/config/i18n'
+import { useTranslation, Router } from 'next-i18next'
 import useUILanguage from '@/hooks/useUILanguage'
 import useUploadInlineImages from '@/hooks/useUploadInlineImages'
 import PremiumFeatureModal from '@/components/Modals/PremiumFeatureModal'
diff --git a/packages/web/pages/post/[id]/edit.tsx b/packages/web/pages/post/[id]/edit.tsx
index f5ba80c38..c954856e0 100644
--- a/packages/web/pages/post/[id]/edit.tsx
+++ b/packages/web/pages/post/[id]/edit.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { NextPage } from 'next'
 import { useRouter } from 'next/router'
-import { useTranslation } from '@/config/i18n'
+import { useTranslation } from 'next-i18next'
 import { TElement } from '@udecode/plate'
 
 import DashboardLayout from '@/components/Layouts/DashboardLayout'
diff --git a/packages/web/server/index.js b/packages/web/server/index.js
index a275aefc2..e230ff533 100644
--- a/packages/web/server/index.js
+++ b/packages/web/server/index.js
@@ -1,6 +1,7 @@
 const express = require('express')
 const next = require('next')
-const nextI18next = require('../config/i18n')
+// const nextI18next = require('../next-i18next.config')
+const nextI18next = require('next-i18next')
 
 const port = parseInt(process.env.PORT || '3000', 10)
 const dev = process.env.NODE_ENV !== 'production'
diff --git a/packages/web/utils/getUiLanguage.ts b/packages/web/utils/getUiLanguage.ts
index e069f3d76..97e09d3bc 100644
--- a/packages/web/utils/getUiLanguage.ts
+++ b/packages/web/utils/getUiLanguage.ts
@@ -1,7 +1,7 @@
 import { NextPageContext } from 'next'
 import { langCodeToUILangMap } from '@/hooks/useUILanguage'
 import { UiLanguage } from '@/generated/graphql'
-import i18nConfig from '@/config/i18n'
+import i18nConfig from 'next-i18next'
 
 export const getUiLanguage = (ctx: NextPageContext): UiLanguage => {
   let langCode
@@ -20,7 +20,7 @@ export const getUiLanguage = (ctx: NextPageContext): UiLanguage => {
       }
     }
   } else {
-    langCode = i18nConfig.i18n.language
+    langCode = i18nConfig?.i18n?.language
   }
 
   return langCodeToUILangMap[langCode] || UiLanguage.English