diff --git a/containers/react/src/components/Alert/GreenAlert.jsx b/containers/react/src/components/Alert/GreenAlert.tsx
similarity index 100%
rename from containers/react/src/components/Alert/GreenAlert.jsx
rename to containers/react/src/components/Alert/GreenAlert.tsx
diff --git a/containers/react/src/components/Alert/RedAlert.jsx b/containers/react/src/components/Alert/RedAlert.tsx
similarity index 100%
rename from containers/react/src/components/Alert/RedAlert.jsx
rename to containers/react/src/components/Alert/RedAlert.tsx
diff --git a/containers/react/src/components/Alert/YellowAlert.jsx b/containers/react/src/components/Alert/YellowAlert.tsx
similarity index 100%
rename from containers/react/src/components/Alert/YellowAlert.jsx
rename to containers/react/src/components/Alert/YellowAlert.tsx
diff --git a/containers/react/src/components/AnimatedRoute.jsx b/containers/react/src/components/AnimatedRoute.tsx
similarity index 100%
rename from containers/react/src/components/AnimatedRoute.jsx
rename to containers/react/src/components/AnimatedRoute.tsx
diff --git a/containers/react/src/components/App.tsx b/containers/react/src/components/App.tsx
index 7e7f99ef..12d2f719 100644
--- a/containers/react/src/components/App.tsx
+++ b/containers/react/src/components/App.tsx
@@ -4,18 +4,18 @@ import HomeLogin from "../pages/Home.js";
 
 import Home from "../pages/Home.tsx";
 
-import PlayButton from "./Game/PlayButton.js";
-import Field from "../pages/Field.js";
+import PlayButton from "./Game/PlayButton.tsx";
+import Field from "../pages/Field.tsx";
 import Login42 from "../pages/Login42.tsx";
 import Messages from "../pages/Messages.tsx";
-import QrCode from '../pages/QrCode.jsx'
+import QrCode from '../pages/QrCode.tsx'
 import { useLocation } from "react-router-dom";
 import {AnimatePresence} from "framer-motion";
 
-import SuccessToken from '../script/tokenSuccess.js'
+import SuccessToken from '../script/tokenSuccess.tsx'
 
 
-import DoubleAuth from "../pages/2fa.js";
+import DoubleAuth from "../pages/2fa.tsx";
 import Game from "../pages/Game.tsx";
 import Social from "./Social/Social.tsx";
 import Logout from "./Profile/Logout.tsx";
diff --git a/containers/react/src/components/Game/PlayButton.js b/containers/react/src/components/Game/PlayButton.tsx
similarity index 100%
rename from containers/react/src/components/Game/PlayButton.js
rename to containers/react/src/components/Game/PlayButton.tsx
diff --git a/containers/react/src/components/Game/Rank.jsx b/containers/react/src/components/Game/Rank.tsx
similarity index 97%
rename from containers/react/src/components/Game/Rank.jsx
rename to containers/react/src/components/Game/Rank.tsx
index 8e167a18..12f62d6d 100644
--- a/containers/react/src/components/Game/Rank.jsx
+++ b/containers/react/src/components/Game/Rank.tsx
@@ -14,7 +14,7 @@
 import React, { useState, useEffect, useRef } from "react";
 // import {Rank} from '../../DataBase/DataRank.js'
 import DefaultPicture from '../../assets/profile.jpg'
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 
 function Rank({user, index}){
 
diff --git a/containers/react/src/components/Game/Ranking.jsx b/containers/react/src/components/Game/Ranking.tsx
similarity index 95%
rename from containers/react/src/components/Game/Ranking.jsx
rename to containers/react/src/components/Game/Ranking.tsx
index 8cce52d5..168952c5 100644
--- a/containers/react/src/components/Game/Ranking.jsx
+++ b/containers/react/src/components/Game/Ranking.tsx
@@ -1,8 +1,8 @@
 // import React from "react"
 import React, { useState, useEffect, useRef } from "react";
-import Rank from './Rank.jsx'
+import Rank from './Rank.tsx'
 import defaultpic from '../../assets/profile.jpg'
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 
 function Ranking(){
 
diff --git a/containers/react/src/components/Header.tsx b/containers/react/src/components/Header.tsx
index d8624ad4..c4b61346 100644
--- a/containers/react/src/components/Header.tsx
+++ b/containers/react/src/components/Header.tsx
@@ -10,7 +10,7 @@ import Modal from './Sidebar/Modal.tsx';
 // import AnimatePresence from 
 import '../styles/Header.css';
 
-import api from '../script/axiosApi';
+import api from '../script/axiosApi.tsx';
 
 function Header() {
 	// const [sidebar, setSidebar] = useState(false);
diff --git a/containers/react/src/components/Messages/Chats.tsx b/containers/react/src/components/Messages/Chats.tsx
index 61041b3c..44e9713c 100644
--- a/containers/react/src/components/Messages/Chats.tsx
+++ b/containers/react/src/components/Messages/Chats.tsx
@@ -3,7 +3,7 @@ import io from 'socket.io-client';
 import '../../styles/Messages.css'
 import styled from "styled-components";
 import DefaultPic from '../../assets/profile.jpg'
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 import { motion , AnimatePresence} from "framer-motion";
 import Modal from "./Modal.tsx";
 
@@ -18,9 +18,9 @@ import { GrAdd } from 'react-icons/gr';
 import { RiListSettingsLine } from 'react-icons/ri'
 
 import { Rank } from "../../DataBase/DataRank";
-import GreenAlert from "../Alert/GreenAlert";
-import RedAlert from "../Alert/RedAlert";
-import YellowAlert from "../Alert/YellowAlert";
+import GreenAlert from "../Alert/GreenAlert.tsx";
+import RedAlert from "../Alert/RedAlert.tsx";
+import YellowAlert from "../Alert/YellowAlert.tsx";
 import ModalSetting from "./ModalSetting.tsx";
 
 
diff --git a/containers/react/src/components/Messages/Message.tsx b/containers/react/src/components/Messages/Message.tsx
index 8e99ef90..84208d2a 100644
--- a/containers/react/src/components/Messages/Message.tsx
+++ b/containers/react/src/components/Messages/Message.tsx
@@ -11,7 +11,7 @@
 /* ************************************************************************** */
 
 import { useEffect, useState, useRef } from "react";
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 import styled from "styled-components"
 import DefaultPicture from '../../assets/profile.jpg'
 // import { useRef } from "react";
diff --git a/containers/react/src/components/Profile/EditName.tsx b/containers/react/src/components/Profile/EditName.tsx
index 4111f064..c8b74e85 100644
--- a/containers/react/src/components/Profile/EditName.tsx
+++ b/containers/react/src/components/Profile/EditName.tsx
@@ -5,7 +5,7 @@ import { UserProfile } from "../../DataBase/DataUserProfile";
 import {useState} from 'react';
 import "../../styles/Profile.css"
 
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 
 const dropIn = {
 	hidden: {
diff --git a/containers/react/src/components/Profile/Win_Loss.tsx b/containers/react/src/components/Profile/Win_Loss.tsx
index a59de74c..26314607 100644
--- a/containers/react/src/components/Profile/Win_Loss.tsx
+++ b/containers/react/src/components/Profile/Win_Loss.tsx
@@ -46,7 +46,7 @@ import '../../styles/Win_Loss.css'
   
 import React, { useState, useEffect, useRef } from "react";
 import { useParams } from 'react-router-dom';
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 
 
 function WinLoss() {
diff --git a/containers/react/src/components/Social/Friend.tsx b/containers/react/src/components/Social/Friend.tsx
index 8630f8c1..4feae2e5 100644
--- a/containers/react/src/components/Social/Friend.tsx
+++ b/containers/react/src/components/Social/Friend.tsx
@@ -11,7 +11,7 @@
 /* ************************************************************************** */
 
 import { useEffect, useState } from "react";
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 import DefaultPicture from '../../assets/profile.jpg'
 import styled from "styled-components";
 
diff --git a/containers/react/src/components/Social/FriendRequest.tsx b/containers/react/src/components/Social/FriendRequest.tsx
index bc828167..3b982f32 100644
--- a/containers/react/src/components/Social/FriendRequest.tsx
+++ b/containers/react/src/components/Social/FriendRequest.tsx
@@ -1,6 +1,6 @@
 
 import { useEffect, useState } from "react";
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 import DefaultPicture from '../../assets/profile.jpg'
 import styled from "styled-components";
 
diff --git a/containers/react/src/components/Social/Social.tsx b/containers/react/src/components/Social/Social.tsx
index 5916b866..b5916b43 100644
--- a/containers/react/src/components/Social/Social.tsx
+++ b/containers/react/src/components/Social/Social.tsx
@@ -1,5 +1,5 @@
 import DefaultPicture from '../../assets/profile.jpg'
-import api from '../../script/axiosApi';
+import api from '../../script/axiosApi.tsx';
 import React, { useState, useEffect, useRef } from "react";
 import styled from "styled-components";
 
diff --git a/containers/react/src/index.js b/containers/react/src/index.js
index 9d37d521..88d13f52 100644
--- a/containers/react/src/index.js
+++ b/containers/react/src/index.js
@@ -4,7 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 
 import reportWebVitals from './reportWebVitals';
 import Header from './components/Header.tsx';
-import Head from './pages/Head';
+import Head from './pages/Head.tsx';
 import App from './components/App.tsx';
 
 import './styles/index.css';
diff --git a/containers/react/src/pages/2fa.js b/containers/react/src/pages/2fa.tsx
similarity index 98%
rename from containers/react/src/pages/2fa.js
rename to containers/react/src/pages/2fa.tsx
index 9cc51df6..166b1130 100644
--- a/containers/react/src/pages/2fa.js
+++ b/containers/react/src/pages/2fa.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useEffect } from 'react';
-import api from '../script/axiosApi';
+import api from '../script/axiosApi.tsx';
 
 // function DoubleAuth() {
 
diff --git a/containers/react/src/pages/Field.js b/containers/react/src/pages/Field.tsx
similarity index 97%
rename from containers/react/src/pages/Field.js
rename to containers/react/src/pages/Field.tsx
index c937b880..bb1f8009 100644
--- a/containers/react/src/pages/Field.js
+++ b/containers/react/src/pages/Field.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 // import { useState, useRef } from 'react';
-import { drawCanvas } from './canvas.js';
+import { drawCanvas } from './canvas.tsx';
 import '../styles/field.css';
 
 function Field()
diff --git a/containers/react/src/pages/Game.tsx b/containers/react/src/pages/Game.tsx
index 92d89c23..37ebb430 100644
--- a/containers/react/src/pages/Game.tsx
+++ b/containers/react/src/pages/Game.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import PlayButton from "../components/Game/PlayButton";
-import Ranking from "../components/Game/Ranking";
+import PlayButton from "../components/Game/PlayButton.tsx";
+import Ranking from "../components/Game/Ranking.tsx";
 import '../styles/Game.css'
 
 function Game(){
diff --git a/containers/react/src/pages/Head.js b/containers/react/src/pages/Head.tsx
similarity index 100%
rename from containers/react/src/pages/Head.js
rename to containers/react/src/pages/Head.tsx
diff --git a/containers/react/src/pages/Home.js b/containers/react/src/pages/Home.js
index 5273ff21..8331debb 100644
--- a/containers/react/src/pages/Home.js
+++ b/containers/react/src/pages/Home.js
@@ -2,7 +2,7 @@ import '../styles/old.css';
 import '../styles/field.css';
 
 import { useLocation } from 'react-router-dom';
-import api from '../script/axiosApi';
+import api from '../script/axiosApi.tsx';
  
 function HomeLogin()
 {
diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx
index 2b2e0169..5e557fc8 100644
--- a/containers/react/src/pages/Home.tsx
+++ b/containers/react/src/pages/Home.tsx
@@ -24,7 +24,7 @@ import {AiOutlineHistory} from 'react-icons/ai'
 // import { Link } from "react-router-dom";
 // import {UserProfile} from "../DataBase/DataUserProfile";
 // import axios from "axios";
-import api from '../script/axiosApi';
+import api from '../script/axiosApi.tsx';
 import { CgEditMarkup } from 'react-icons/cg'
 import { IoCloseCircleOutline } from "react-icons/io5";
 
diff --git a/containers/react/src/pages/NewLogin.js b/containers/react/src/pages/NewLogin.tsx
similarity index 100%
rename from containers/react/src/pages/NewLogin.js
rename to containers/react/src/pages/NewLogin.tsx
diff --git a/containers/react/src/pages/QrCode.jsx b/containers/react/src/pages/QrCode.tsx
similarity index 97%
rename from containers/react/src/pages/QrCode.jsx
rename to containers/react/src/pages/QrCode.tsx
index d8f2c664..98182a30 100644
--- a/containers/react/src/pages/QrCode.jsx
+++ b/containers/react/src/pages/QrCode.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import "../styles/App.css";
 import QRCodeStyling from "qr-code-styling";
 import { motion } from 'framer-motion'
-import api from '../script/axiosApi';
+import api from '../script/axiosApi.tsx';
 
 
 const qrCode = new QRCodeStyling({
diff --git a/containers/react/src/pages/canvas.js b/containers/react/src/pages/canvas.tsx
similarity index 99%
rename from containers/react/src/pages/canvas.js
rename to containers/react/src/pages/canvas.tsx
index ec45cf8c..126079a0 100644
--- a/containers/react/src/pages/canvas.js
+++ b/containers/react/src/pages/canvas.tsx
@@ -1,6 +1,6 @@
 // import io from 'socket.io-client';
 
-import api from '../script/axiosApi';
+import api from '../script/axiosApi.tsx';
 
 // import { useEffect } from 'react';
 import io from 'socket.io-client';
diff --git a/containers/react/src/script/axiosApi.js b/containers/react/src/script/axiosApi.tsx
similarity index 100%
rename from containers/react/src/script/axiosApi.js
rename to containers/react/src/script/axiosApi.tsx
diff --git a/containers/react/src/script/login.js b/containers/react/src/script/login.tsx
similarity index 100%
rename from containers/react/src/script/login.js
rename to containers/react/src/script/login.tsx
diff --git a/containers/react/src/script/login42.js b/containers/react/src/script/login42.tsx
similarity index 100%
rename from containers/react/src/script/login42.js
rename to containers/react/src/script/login42.tsx
diff --git a/containers/react/src/script/tokenSuccess.js b/containers/react/src/script/tokenSuccess.tsx
similarity index 100%
rename from containers/react/src/script/tokenSuccess.js
rename to containers/react/src/script/tokenSuccess.tsx