diff --git a/client/src/components/layouts/index.js b/client/src/components/layouts/index.js
index 915de3b04f..b66b5ece7d 100644
--- a/client/src/components/layouts/index.js
+++ b/client/src/components/layouts/index.js
@@ -1,3 +1,3 @@
 export { default as CertificationLayout } from './Certification';
 export { default as DefaultLayout } from './Default';
-export { default as LearnLayout } from './Learn';
+export { default as LearnLayout } from './learn';
diff --git a/client/src/components/layouts/Learn.js b/client/src/components/layouts/learn.tsx
similarity index 75%
rename from client/src/components/layouts/Learn.js
rename to client/src/components/layouts/learn.tsx
index 528ee73384..bde898e350 100644
--- a/client/src/components/layouts/Learn.js
+++ b/client/src/components/layouts/learn.tsx
@@ -1,5 +1,4 @@
 import React, { Fragment, Component } from 'react';
-import PropTypes from 'prop-types';
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
@@ -18,11 +17,21 @@ import './prism-night.css';
 import 'react-reflex/styles.css';
 import './learn.css';
 
+type FetchState = {
+  pending: boolean;
+  complete: boolean;
+  errored: boolean;
+};
+
+type User = {
+  acceptedPrivacyTerms: boolean;
+};
+
 const mapStateToProps = createSelector(
   userFetchStateSelector,
   isSignedInSelector,
   userSelector,
-  (fetchState, isSignedIn, user) => ({
+  (fetchState: FetchState, isSignedIn, user: User) => ({
     fetchState,
     isSignedIn,
     user
@@ -35,7 +44,17 @@ const mapDispatchToProps = {
 
 const RedirectEmailSignUp = createRedirect('/email-sign-up');
 
-class LearnLayout extends Component {
+type LearnLayoutProps = {
+  isSignedIn?: boolean;
+  fetchState: FetchState;
+  user: User;
+  tryToShowDonationModal: () => void;
+  children?: React.ReactNode;
+};
+
+class LearnLayout extends Component<LearnLayoutProps> {
+  static displayName = 'LearnLayout';
+
   componentDidMount() {
     this.props.tryToShowDonationModal();
   }
@@ -69,25 +88,12 @@ class LearnLayout extends Component {
           <meta content='noindex' name='robots' />
         </Helmet>
         <main id='learn-app-wrapper'>{children}</main>
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+        /* @ts-ignore  */}
         <DonateModal />
       </Fragment>
     );
   }
 }
 
-LearnLayout.displayName = 'LearnLayout';
-LearnLayout.propTypes = {
-  children: PropTypes.any,
-  fetchState: PropTypes.shape({
-    pending: PropTypes.bool,
-    complete: PropTypes.bool,
-    errored: PropTypes.bool
-  }),
-  isSignedIn: PropTypes.bool,
-  tryToShowDonationModal: PropTypes.func.isRequired,
-  user: PropTypes.shape({
-    acceptedPrivacyTerms: PropTypes.bool
-  })
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(LearnLayout);
diff --git a/client/src/pages/learn.tsx b/client/src/pages/learn.tsx
index f6f5ed7e1b..04a7a83a81 100644
--- a/client/src/pages/learn.tsx
+++ b/client/src/pages/learn.tsx
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
 import { Spacer } from '../components/helpers';
-import LearnLayout from '../components/layouts/Learn';
+import LearnLayout from '../components/layouts/learn';
 import Map from '../components/Map';
 import Intro from '../components/Intro';
 import {
diff --git a/client/src/templates/Challenges/classic/Show.tsx b/client/src/templates/Challenges/classic/Show.tsx
index e4f8a575f9..9dbef352b1 100644
--- a/client/src/templates/Challenges/classic/Show.tsx
+++ b/client/src/templates/Challenges/classic/Show.tsx
@@ -12,7 +12,7 @@ import Media from 'react-responsive';
 import { withTranslation } from 'react-i18next';
 
 // Local Utilities
-import LearnLayout from '../../../components/layouts/Learn';
+import LearnLayout from '../../../components/layouts/learn';
 import MultifileEditor from './MultifileEditor';
 import Preview from '../components/Preview';
 import SidePanel from '../components/Side-Panel';
diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
index 73484e7ce3..a0a38d25f3 100644
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -9,7 +9,7 @@ import { graphql } from 'gatsby';
 import type { Dispatch } from 'redux';
 
 // Local Utilities
-import LearnLayout from '../../../components/layouts/Learn';
+import LearnLayout from '../../../components/layouts/learn';
 import {
   ChallengeNodeType,
   ChallengeMetaType
diff --git a/client/src/templates/Challenges/projects/backend/Show.tsx b/client/src/templates/Challenges/projects/backend/Show.tsx
index a3b8181831..7efaeeb733 100644
--- a/client/src/templates/Challenges/projects/backend/Show.tsx
+++ b/client/src/templates/Challenges/projects/backend/Show.tsx
@@ -23,7 +23,7 @@ import {
   updateSolutionFormValues
 } from '../../redux';
 import { getGuideUrl } from '../../utils';
-import LearnLayout from '../../../../components/layouts/Learn';
+import LearnLayout from '../../../../components/layouts/learn';
 import ChallengeTitle from '../../components/challenge-title';
 import ChallengeDescription from '../../components/Challenge-Description';
 import TestSuite from '../../components/Test-Suite';
diff --git a/client/src/templates/Challenges/projects/frontend/Show.tsx b/client/src/templates/Challenges/projects/frontend/Show.tsx
index 9fcb69edb8..706826f09b 100644
--- a/client/src/templates/Challenges/projects/frontend/Show.tsx
+++ b/client/src/templates/Challenges/projects/frontend/Show.tsx
@@ -24,7 +24,7 @@ import {
   updateSolutionFormValues
 } from '../../redux';
 import { getGuideUrl } from '../../utils';
-import LearnLayout from '../../../../components/layouts/Learn';
+import LearnLayout from '../../../../components/layouts/learn';
 import ChallengeTitle from '../../components/challenge-title';
 import ChallengeDescription from '../../components/Challenge-Description';
 import Spacer from '../../../../components/helpers/spacer';
diff --git a/client/src/templates/Challenges/video/Show.tsx b/client/src/templates/Challenges/video/Show.tsx
index 1000a64984..6bae5a5e36 100644
--- a/client/src/templates/Challenges/video/Show.tsx
+++ b/client/src/templates/Challenges/video/Show.tsx
@@ -17,7 +17,7 @@ import {
   ChallengeNodeType,
   ChallengeMetaType
 } from '../../../redux/prop-types';
-import LearnLayout from '../../../components/layouts/Learn';
+import LearnLayout from '../../../components/layouts/learn';
 import ChallengeTitle from '../components/challenge-title';
 import ChallengeDescription from '../components/Challenge-Description';
 import Spacer from '../../../components/helpers/spacer';
diff --git a/client/src/templates/Introduction/Intro.js b/client/src/templates/Introduction/Intro.js
index 3c750bfecc..1090077bde 100644
--- a/client/src/templates/Introduction/Intro.js
+++ b/client/src/templates/Introduction/Intro.js
@@ -5,7 +5,7 @@ import Helmet from 'react-helmet';
 import { Grid, ListGroup, ListGroupItem } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-import LearnLayout from '../../components/layouts/Learn';
+import LearnLayout from '../../components/layouts/learn';
 import FullWidthRow from '../../components/helpers/full-width-row';
 import ButtonSpacer from '../../components/helpers/button-spacer';
 import { MarkdownRemark, AllChallengeNode } from '../../redux/prop-types';