diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
deleted file mode 100644
index f4919e9a23..0000000000
--- a/src/components/App/App.jsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import React, { Suspense } from 'react';
-import Helmet from 'react-helmet';
-import { connect } from 'react-redux';
-import { Route, Switch, withRouter } from 'react-router-dom';
-import styled from 'styled-components';
-
-import Combos from './../Combos/Combos';
-import Api from '../Api';
-import Subscription from '../Subscription';
-import constants from '../constants';
-import Distributions from '../Distributions';
-import Footer from '../Footer';
-import FourOhFour from '../FourOhFour';
-import Header from '../Header';
-import Home from '../Home';
-import Matches from '../Matches';
-import Player from '../Player';
-// import Predictions from '../Predictions';
-// import Assistant from "../Assistant";
-import Records from '../Records';
-import Request from '../Request';
-import Scenarios from '../Scenarios';
-import Search from '../Search';
-import Teams from '../Teams';
-import GlobalStyle from './GlobalStyle';
-import muiTheme from './muiTheme';
-import config from '../../config';
-import Spinner from '../Spinner';
-
-const Status = React.lazy(() => import('../Status'));
-const Explorer = React.lazy(() => import('../Explorer'));
-const Heroes = React.lazy(() => import('../Heroes'));
-
-const StyledDiv = styled.div`
-  transition: ${constants.normalTransition};
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  left: ${(props) => (props.open ? '256px' : '0px')};
-  margin-top: 0px;
-  background-image: ${(props) =>
-    props.location.pathname === '/'
-      ? 'url("/assets/images/home-background.png")'
-      : ''};
-  background-position: center top -56px;
-  background-repeat: ${(props) =>
-    props.location.pathname === '/' ? 'no-repeat' : ''};
-
-  #back2Top {
-    position: fixed;
-    left: auto;
-    right: 0px;
-    top: auto;
-    bottom: 20px;
-    outline: none;
-    color: rgb(196, 196, 196);
-    text-align: center;
-    outline: none;
-    border: none;
-    background-color: rgba(0, 0, 0, 0.3);
-    width: 40px;
-    font-size: 14px;
-    border-radius: 2px;
-    cursor: pointer;
-    z-index: 999999;
-    opacity: 0;
-    display: block;
-    pointer-events: none;
-    -webkit-transform: translate3d(0, 0, 0);
-    padding: 3px;
-    transition: opacity 0.3s ease-in-out;
-
-    & #back2TopTxt {
-      font-size: 10px;
-      line-height: 12px;
-      text-align: center;
-      margin-bottom: 3px;
-    }
-  }
-
-  #back2Top:hover {
-    background-color: rgb(26, 108, 239);
-  }
-`;
-
-const StyledBodyDiv = styled.div`
-  padding: 0px 25px 25px 25px;
-  flex-grow: 1;
-
-  @media only screen and (min-width: ${constants.appWidth}px) {
-    width: ${constants.appWidth}px;
-    margin: auto;
-  }
-`;
-
-const AdBannerDiv = styled.div`
-  text-align: center;
-  margin-bottom: 5px;
-
-  & img {
-    margin-top: 10px;
-    max-width: 100%;
-  }
-`;
-
-const App = (props) => {
-  const { strings, location } = props;
-
-  const back2Top = React.useRef();
-
-  React.useEffect(() => {
-    const handleScroll = () => {
-      let wait = false;
-      const { current } = back2Top;
-      if (!wait) {
-        if (
-          document.body.scrollTop > 1000 ||
-          document.documentElement.scrollTop > 1000
-        ) {
-          current.style.opacity = 1;
-          current.style.pointerEvents = 'auto';
-        } else {
-          current.style.opacity = 0;
-          current.style.pointerEvents = 'none';
-        }
-      }
-      setTimeout(() => {
-        wait = !wait;
-      }, 300);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  });
-
-  React.useLayoutEffect(() => {
-    window.scrollTo(0, 0);
-  }, [location]);
-
-  const includeAds = !['/', '/api-keys', '/status'].includes(location.pathname);
-
-  React.useEffect(() => {
-    if (includeAds) {
-      (window.adsbygoogle = window.adsbygoogle || []).push({});
-    }
-  }, []);
-
-  return (
-    <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme, muiTheme)}>
-      <Suspense fallback={<Spinner />}>
-      <GlobalStyle />
-      <StyledDiv {...props}>
-        <Helmet
-          defaultTitle={strings.title_default}
-          titleTemplate={strings.title_template}
-        />
-        <Header location={location} />
-        <StyledBodyDiv {...props}>
-        <AdBannerDiv>
-        {includeAds && config.VITE_ENABLE_ADSENSE && (
-        <ins 
-          className="adsbygoogle"
-          style={{display: 'block', width: 728, height: 90, margin: 'auto'}}
-          data-ad-client="ca-pub-5591574346816667"
-          data-ad-slot="9789745633"
-        />)}
-        </AdBannerDiv>
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route exact path="/matches/:matchId?/:info?" component={Matches} />
-            <Route
-              exact
-              path="/players/:playerId/:info?/:subInfo?"
-              component={Player}
-            />
-            <Route exact path="/heroes/:heroId?/:info?" component={Heroes} />
-            <Route exact path="/teams/:teamId?/:info?" component={Teams} />
-            <Route
-              exact
-              path="/distributions/:info?"
-              component={Distributions}
-            />
-            <Route exact path="/request" component={Request} />
-            <Route exact path="/status" component={Status} />
-            <Route exact path="/explorer" component={Explorer} />
-            <Route exact path="/combos" component={Combos} />
-            <Route exact path="/search" component={Search} />
-            <Route exact path="/records/:info?" component={Records} />
-            {/* <Route exact path="/meta" component={Meta} /> */}
-            <Route exact path="/scenarios/:info?" component={Scenarios} />
-            {/* <Route exact path="/predictions" component={Predictions} /> */}
-            <Route exact path="/api-keys" component={Api} />
-            <Route exact path="/subscribe" component={Subscription} />
-            <Route component={FourOhFour} />
-          </Switch>
-        </StyledBodyDiv>
-        <AdBannerDiv>
-          {includeAds && config.VITE_ENABLE_RIVALRY && (
-            <div style={{ fontSize: '12px' }}>
-              <a href="https://www.rivalry.com/opendota">
-                <img src="/assets/images/rivalry-banner.gif" alt="Logo for Rivalry.com" />
-              </a>
-              <div>
-                {strings.home_sponsored_by}{' '}
-                <a href="https://www.rivalry.com/opendota">Rivalry</a>
-              </div>
-            </div>
-          )}
-          {includeAds && config.VITE_ENABLE_ADSENSE && (
-            <ins
-              className="adsbygoogle"
-              style={{display: 'block', width: 728, height: 90, margin: 'auto'}}
-              data-ad-client="ca-pub-5591574346816667"
-              data-ad-slot="7739169508"
-            />
-          )}
-        </AdBannerDiv>
-        <Footer />
-        <button
-          ref={back2Top}
-          id="back2Top"
-          title={strings.back2Top}
-          onClick={() => {
-            document.body.scrollTop = 0;
-            document.documentElement.scrollTop = 0;
-          }}
-        >
-          <div>&#9650;</div>
-          <div id="back2TopTxt">{strings.back2Top}</div>
-        </button>
-      </StyledDiv>
-      </Suspense>
-    </MuiThemeProvider>
-  );
-};
-
-const mapStateToProps = (state) => ({
-  strings: state.app.strings,
-});
-
-export default connect(mapStateToProps)(withRouter(App));
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
new file mode 100644
index 0000000000..5f795267e8
--- /dev/null
+++ b/src/components/App/App.tsx
@@ -0,0 +1,273 @@
+import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import React, { Suspense } from 'react';
+import Helmet from 'react-helmet';
+import { connect } from 'react-redux';
+import { Route, Switch, withRouter } from 'react-router-dom';
+import styled from 'styled-components';
+
+import Combos from '../Combos/Combos';
+import Api from '../Api';
+import Subscription from '../Subscription';
+import constants from '../constants';
+import Distributions from '../Distributions';
+import Footer from '../Footer';
+import FourOhFour from '../FourOhFour';
+import Header from '../Header';
+import Home from '../Home';
+import Matches from '../Matches';
+import Player from '../Player';
+import Records from '../Records';
+import Request from '../Request';
+import Scenarios from '../Scenarios';
+import Search from '../Search';
+import Teams from '../Teams';
+import GlobalStyle from './GlobalStyle';
+import muiTheme from './muiTheme';
+import config from '../../config';
+import Spinner from '../Spinner';
+
+const Status = React.lazy(() => import('../Status'));
+const Explorer = React.lazy(() => import('../Explorer'));
+const Heroes = React.lazy(() => import('../Heroes'));
+
+type AppStylesProps = {
+  open?: boolean;
+  location: {
+    pathname?: string;
+  };
+}
+
+type Back2TopStylesProps = {
+  open?: boolean;
+  location: {
+    pathname: string;
+  };
+}
+
+type AppProps = {
+  location: Record<string, string>
+  strings: Record<string, string>
+}
+
+const StyledDiv = styled.div<AppStylesProps>`
+  transition: ${constants.normalTransition};
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  left: ${(props) => (props.open ? '256px' : '0px')};
+  margin-top: 0px;
+
+  background-image: ${(props) =>
+    props.location.pathname === '/'
+      ? `url("/assets/images/home-background.png")`
+      : ''};
+  background-position: center top -56px;
+  background-repeat: ${(props) =>
+    props.location.pathname === '/' ? 'no-repeat' : ''};
+`;
+
+
+const Back2Top = styled.button<Back2TopStylesProps>`
+  position: fixed;
+  left: auto;
+  right: 0px;
+  top: auto;
+  bottom: 20px;
+  outline: none;
+  color: rgb(196, 196, 196);
+  text-align: center;
+  outline: none;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 40px;
+  font-size: 14px;
+  border-radius: 2px;
+  cursor: pointer;
+  z-index: 999999;
+  opacity: 0;
+  display: block;
+  pointer-events: none;
+  -webkit-transform: translate3d(0, 0, 0);
+  padding: 3px;
+  transition: opacity 0.3s ease-in-out;
+
+  &:hover {
+    background-color: rgb(26, 108, 239);
+  }
+
+  #back2TopTxt {
+    font-size: 10px;
+    line-height: 12px;
+    text-align: center;
+    margin-bottom: 3px;
+  }
+`;
+
+const StyledBodyDiv = styled.div`
+  padding: 0px 25px 25px 25px;
+  flex-grow: 1;
+
+  @media only screen and (min-width: ${constants.appWidth}px) {
+    width: ${constants.appWidth}px;
+    margin: auto;
+  }
+`;
+
+const AdBannerDiv = styled.div`
+  text-align: center;
+  margin-bottom: 5px;
+
+  img {
+    margin-top: 10px;
+    max-width: 100%;
+  }
+`;
+
+declare let window: Window & { adsbygoogle: any }
+
+const App = (props: AppProps) => {
+  const { strings, location } = props;
+
+  const back2Top = React.useRef<HTMLButtonElement>();
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      let wait = false;
+      const { current } = back2Top;
+
+      if (!wait && current) {
+        if (
+          document.body.scrollTop > 1000 ||
+          document.documentElement.scrollTop > 1000
+        ) {
+          current.style.opacity = '1';
+          current.style.pointerEvents = 'auto';
+        } else {
+          current.style.opacity = '0';
+          current.style.pointerEvents = 'none';
+        }
+      }
+      setTimeout(() => {
+        wait = !wait;
+      }, 300);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  });
+
+  React.useLayoutEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location]);
+
+  const includeAds = !['/', '/api-keys', '/status'].includes(location.pathname);
+
+  React.useEffect(() => {
+    if (includeAds) {
+      (window.adsbygoogle = window.adsbygoogle || []).push({});
+    }
+  }, []);
+
+  return (
+    // @ts-ignore
+    <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme, muiTheme)}> {/* muiTheme types are missing here */}
+      <Suspense fallback={<Spinner />}>
+        <GlobalStyle />
+        <StyledDiv {...props}>
+          <Helmet
+            defaultTitle={strings.title_default}
+            titleTemplate={strings.title_template}
+          />
+          <Header location={location} />
+          <StyledBodyDiv {...props}>
+            <AdBannerDiv>
+              {includeAds && config.VITE_ENABLE_ADSENSE && (
+                <ins
+                  className="adsbygoogle"
+                  style={{ display: 'block', width: 728, height: 90, margin: 'auto' }}
+                  data-ad-client="ca-pub-5591574346816667"
+                  data-ad-slot="9789745633"
+                />)}
+            </AdBannerDiv>
+            <Switch>
+              <Route exact path="/" component={Home} />
+              <Route exact path="/matches/:matchId?/:info?" component={Matches} />
+              <Route
+                exact
+                path="/players/:playerId/:info?/:subInfo?"
+                component={Player}
+              />
+              <Route exact path="/heroes/:heroId?/:info?" component={Heroes} />
+              <Route exact path="/teams/:teamId?/:info?" component={Teams} />
+              <Route
+                exact
+                path="/distributions/:info?"
+                component={Distributions}
+              />
+              <Route exact path="/request" component={Request} />
+              <Route exact path="/status" component={Status} />
+              <Route exact path="/explorer" component={Explorer} />
+              <Route exact path="/combos" component={Combos} />
+              <Route exact path="/search" component={Search} />
+              <Route exact path="/records/:info?" component={Records} />
+              {/* <Route exact path="/meta" component={Meta} /> */}
+              <Route exact path="/scenarios/:info?" component={Scenarios} />
+              {/* <Route exact path="/predictions" component={Predictions} /> */}
+              <Route exact path="/api-keys" component={Api} />
+              <Route exact path="/subscribe" component={Subscription} />
+              <Route component={FourOhFour} />
+            </Switch>
+          </StyledBodyDiv>
+          <AdBannerDiv>
+            {includeAds && config.VITE_ENABLE_RIVALRY && (
+              <div style={{ fontSize: '12px' }}>
+                <a href="https://www.rivalry.com/opendota">
+                  <img src="/assets/images/rivalry-banner.gif" alt="Logo for Rivalry.com" />
+                </a>
+                <div>
+                  {strings.home_sponsored_by}{' '}
+                  <a href="https://www.rivalry.com/opendota">Rivalry</a>
+                </div>
+              </div>
+            )}
+            {includeAds && config.VITE_ENABLE_ADSENSE && (
+              <ins
+                className="adsbygoogle"
+                style={{ display: 'block', width: 728, height: 90, margin: 'auto' }}
+                data-ad-client="ca-pub-5591574346816667"
+                data-ad-slot="7739169508"
+              />
+            )}
+          </AdBannerDiv>
+          <Footer />
+          <Back2Top
+            // @ts-ignore
+            ref={back2Top} // type 'undefined' is not assignable to type 'HTMLButtonElement | null' 
+            id="back2Top"
+            title={strings.back2Top}
+            onClick={() => {
+              document.body.scrollTop = 0;
+              document.documentElement.scrollTop = 0;
+            }}
+          >
+            <div>&#9650;</div>
+            <div id="back2TopTxt">{strings.back2Top}</div>
+          </Back2Top>
+        </StyledDiv>
+      </Suspense>
+    </MuiThemeProvider>
+  );
+};
+
+const mapStateToProps = (state: any) => ({
+  strings: state.app.strings,
+});
+
+// @ts-ignore
+export default connect(mapStateToProps)(withRouter(App)); // property 'strings' is missing in type
\ No newline at end of file
diff --git a/src/components/App/AppLogo.jsx b/src/components/App/AppLogo.tsx
similarity index 75%
rename from src/components/App/AppLogo.jsx
rename to src/components/App/AppLogo.tsx
index 08d8b772df..151371099c 100644
--- a/src/components/App/AppLogo.jsx
+++ b/src/components/App/AppLogo.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import constants from '../constants';
@@ -16,7 +15,13 @@ const StyledLink = styled(Link)`
   }
 `;
 
-const AppLogo = ({ size, strings, onClick }) => (
+interface AppLogoProps {
+  size: string
+  strings: { [key: string]: string }
+  onClick: () => void
+}
+
+const AppLogo = ({ size, strings, onClick }: AppLogoProps) => (
   <StyledLink aria-label="Go to the Open Dota homepage" to="/" onClick={onClick}>
     <span style={{ fontSize: size }}>
       {strings.app_name && `<${strings.app_name}/>`}
@@ -24,13 +29,7 @@ const AppLogo = ({ size, strings, onClick }) => (
   </StyledLink>
 );
 
-AppLogo.propTypes = {
-  size: PropTypes.string,
-  strings: PropTypes.shape({}),
-  onClick: PropTypes.func,
-};
-
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
   strings: state.app.strings,
 });
 
diff --git a/src/components/App/index.js b/src/components/App/index.ts
similarity index 100%
rename from src/components/App/index.js
rename to src/components/App/index.ts
diff --git a/src/components/App/muiTheme.js b/src/components/App/muiTheme.ts
similarity index 100%
rename from src/components/App/muiTheme.js
rename to src/components/App/muiTheme.ts