diff --git a/client/src/components/layouts/default.tsx b/client/src/components/layouts/default.tsx
index ca3c5c37094..81d2b266c75 100644
--- a/client/src/components/layouts/default.tsx
+++ b/client/src/components/layouts/default.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useEffect } from 'react';
 import Helmet from 'react-helmet';
-import { TFunction, withTranslation } from 'react-i18next';
+import { useTranslation, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
@@ -104,7 +104,6 @@ interface DefaultLayoutProps extends StateProps, DispatchProps {
   block?: string;
   showCodeAlly: boolean;
   superBlock?: string;
-  t: TFunction;
 }
 
 const getSystemTheme = () =>
@@ -127,13 +126,13 @@ function DefaultLayout({
   isChallenge = false,
   block,
   superBlock,
-  t,
   theme = Themes.Default,
   showCodeAlly,
   user,
   fetchUser,
   updateAllChallengesInfo
 }: DefaultLayoutProps): JSX.Element {
+  const { t } = useTranslation();
   const { challengeEdges, certificateNodes } = useGetAllBlockIds();
   useEffect(() => {
     // componentDidMount
diff --git a/client/src/components/profile/components/camper.tsx b/client/src/components/profile/components/camper.tsx
index ce940eb5121..fee63038cc3 100644
--- a/client/src/components/profile/components/camper.tsx
+++ b/client/src/components/profile/components/camper.tsx
@@ -6,7 +6,8 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Col, Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
-import { TFunction, useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import envData from '../../../../../config/env.json';
 import { getLangCode } from '../../../../../config/i18n';
diff --git a/client/src/components/profile/components/heat-map.tsx b/client/src/components/profile/components/heat-map.tsx
index e9594ed134c..28fd6fc8d94 100644
--- a/client/src/components/profile/components/heat-map.tsx
+++ b/client/src/components/profile/components/heat-map.tsx
@@ -7,7 +7,8 @@ import addMonths from 'date-fns/addMonths';
 import isEqual from 'date-fns/isEqual';
 import startOfDay from 'date-fns/startOfDay';
 import React, { Component } from 'react';
-import { TFunction, useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
 import ReactTooltip from 'react-tooltip';
 
 import '@freecodecamp/react-calendar-heatmap/dist/styles.css';
diff --git a/client/src/components/profile/components/time-line.tsx b/client/src/components/profile/components/time-line.tsx
index f6a17e9e3db..ab7fe1e39d7 100644
--- a/client/src/components/profile/components/time-line.tsx
+++ b/client/src/components/profile/components/time-line.tsx
@@ -3,7 +3,8 @@ import Loadable from '@loadable/component';
 import { graphql, useStaticQuery } from 'gatsby';
 import { reverse, sortBy } from 'lodash-es';
 import React, { useMemo, useState } from 'react';
-import { TFunction, withTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
 import envData from '../../../../../config/env.json';
diff --git a/client/src/components/profile/profile.tsx b/client/src/components/profile/profile.tsx
index 4276946b086..14333227995 100644
--- a/client/src/components/profile/profile.tsx
+++ b/client/src/components/profile/profile.tsx
@@ -1,7 +1,8 @@
 import { Grid, Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import Helmet from 'react-helmet';
-import { TFunction, useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import { FullWidthRow, Link, Spacer } from '../helpers';
 import { User } from './../../redux/prop-types';
diff --git a/client/src/components/search/searchBar/search-bar.tsx b/client/src/components/search/searchBar/search-bar.tsx
index f244b99d8db..2ceafad7fa7 100644
--- a/client/src/components/search/searchBar/search-bar.tsx
+++ b/client/src/components/search/searchBar/search-bar.tsx
@@ -1,7 +1,8 @@
 import { isEqual } from 'lodash-es';
 import React, { Component } from 'react';
 import { HotKeys, ObserveKeys } from 'react-hotkeys';
-import { TFunction, withTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+import { withTranslation } from 'react-i18next';
 import { Hit } from 'react-instantsearch-core';
 import { SearchBox } from 'react-instantsearch-dom';
 import { connect } from 'react-redux';