diff --git a/package-lock.json b/package-lock.json
index 67d7f02f40..9fba9cfc93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15825,7 +15825,7 @@
     },
     "heatmap.js": {
       "version": "git+ssh://git@github.com/muyao1987/heatmap.js.git#28b6ea93819375d2f7de1a49f37d106b2370744d",
-      "from": "heatmap.js@muyao1987/heatmap.js"
+      "from": "heatmap.js@github:muyao1987/heatmap.js"
     },
     "highlight-es": {
       "version": "1.0.3",
diff --git a/src/components/Home/Buttons.jsx b/src/components/Home/Buttons.tsx
similarity index 83%
rename from src/components/Home/Buttons.jsx
rename to src/components/Home/Buttons.tsx
index 6e6c7db3d9..bee2e061ee 100644
--- a/src/components/Home/Buttons.jsx
+++ b/src/components/Home/Buttons.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
 import FlatButton from 'material-ui/FlatButton';
 import { connect } from 'react-redux';
 import { IconSteam } from '../Icons';
 import { ButtonsDiv } from './Styled';
 import config from '../../config';
 
-const Buttons = ({ user, strings }) => (
+import { HomePageProps } from './Home';
+
+const Buttons = ({ user, strings }: HomePageProps) => (
   <ButtonsDiv>
     {
       !user &&
@@ -30,12 +31,7 @@ const Buttons = ({ user, strings }) => (
   </ButtonsDiv>
 );
 
-Buttons.propTypes = {
-  user: PropTypes.shape({}),
-  strings: PropTypes.shape({}),
-};
-
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: any) => {
   const { data } = state.app.metadata;
   return {
     user: data.user,
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.tsx
similarity index 67%
rename from src/components/Home/Home.jsx
rename to src/components/Home/Home.tsx
index e0025d919e..1fa0492f5b 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import Buttons from './Buttons';
 import Why from './Why';
 import Sponsors from './Sponsors';
 import { HeadContainerDiv, HeadlineDiv, DescriptionDiv, BottomTextDiv } from './Styled';
 
-const Home = ({ strings }) => (
+export interface HomePageProps {
+  user?: string;
+  strings: { [key: string]: string };
+}
+
+const Home = ({ strings }: HomePageProps) => (
   <div>
     <HeadContainerDiv>
       <HeadlineDiv>
@@ -15,29 +19,25 @@ const Home = ({ strings }) => (
       <DescriptionDiv>
         <h2>{strings.app_description}</h2>
       </DescriptionDiv>
-      <Buttons />
+      <Buttons strings={strings} />
     </HeadContainerDiv>
     <Why />
     <Sponsors />
     <BottomTextDiv>
       <span id="bg-image-description">{strings.home_background_by}</span>
-      <a 
-        href="//www.artstation.com/artist/mikeazevedo" 
-        target="_blank" 
-        rel="noopener noreferrer" 
-        aria-describedby="bg-image-description" 
+      <a
+        href="//www.artstation.com/artist/mikeazevedo"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-describedby="bg-image-description"
         aria-label="Mike Azevedo on artstation.com"
       > Mike Azevedo
-      </a> 
+      </a>
     </BottomTextDiv>
   </div>
 );
 
-Home.propTypes = {
-  strings: PropTypes.shape({}),
-};
-
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
   content: state.content,
   strings: state.app.strings,
 });
diff --git a/src/components/Home/Sponsors.jsx b/src/components/Home/Sponsors.tsx
similarity index 91%
rename from src/components/Home/Sponsors.jsx
rename to src/components/Home/Sponsors.tsx
index 8787d89df6..278dc402c4 100644
--- a/src/components/Home/Sponsors.jsx
+++ b/src/components/Home/Sponsors.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import FlatButton from 'material-ui/FlatButton';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { ButtonsDiv } from './Styled';
 import config from '../../config';
 
+import { HomePageProps } from './Home';
+
 const StyledDiv = styled.div`
   display: flex;
   flex-direction: column;
@@ -34,11 +35,11 @@ const StyledDiv = styled.div`
   }
 `;
 
-const Sponsors = ({ strings }) => (
+const Sponsors = ({ strings }: HomePageProps) => (
   <StyledDiv>
     <div className="headline">{strings.home_sponsored_by}</div>
     <div className="images">
-      {config.VITE_ENABLE_DOTA_COACH && (
+      {config.VITE_ENABLE_DOTACOACH && (
         <a
           href="https://dota-coach.com?s=OpenDota&c=main"
           target="_blank"
@@ -84,11 +85,7 @@ const Sponsors = ({ strings }) => (
   </StyledDiv>
 );
 
-Sponsors.propTypes = {
-  strings: PropTypes.shape({}),
-};
-
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: any) => ({
   strings: state.app.strings,
 });
 
diff --git a/src/components/Home/Styled.jsx b/src/components/Home/Styled.tsx
similarity index 100%
rename from src/components/Home/Styled.jsx
rename to src/components/Home/Styled.tsx
diff --git a/src/components/Home/Why.jsx b/src/components/Home/Why.tsx
similarity index 92%
rename from src/components/Home/Why.jsx
rename to src/components/Home/Why.tsx
index 12f272fbbd..e3bf5b0642 100644
--- a/src/components/Home/Why.jsx
+++ b/src/components/Home/Why.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import { IconOpenSource, IconStatsBars, IconWand } from '../Icons';
 import constants from '../constants';
 
+import { HomePageProps } from './Home';
+
 const StyledDiv = styled.div`
   margin: 50px auto 0;
   text-align: center;
@@ -50,7 +51,7 @@ const StyledDiv = styled.div`
   }
 `;
 
-const Why = ({ strings }) => (
+const Why = ({ strings }: HomePageProps) => (
   <StyledDiv>
     <div className="whyList">
       <div className="whyElement">
@@ -84,11 +85,7 @@ const Why = ({ strings }) => (
   </StyledDiv>
 );
 
-Why.propTypes = {
-  strings: PropTypes.shape({}),
-};
-
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
   strings: state.app.strings,
 });
 
diff --git a/src/components/Home/index.js b/src/components/Home/index.ts
similarity index 100%
rename from src/components/Home/index.js
rename to src/components/Home/index.ts