diff --git a/frontend/src/components/AttackBox/AttackBox.jsx b/frontend/src/components/AttackBox/AttackBox.tsx
similarity index 100%
rename from frontend/src/components/AttackBox/AttackBox.jsx
rename to frontend/src/components/AttackBox/AttackBox.tsx
diff --git a/frontend/src/components/AttackBox/AttackMechanism.jsx b/frontend/src/components/AttackBox/AttackMechanism.tsx
similarity index 75%
rename from frontend/src/components/AttackBox/AttackMechanism.jsx
rename to frontend/src/components/AttackBox/AttackMechanism.tsx
index 2fc8b12ce..5cba1e7a6 100644
--- a/frontend/src/components/AttackBox/AttackMechanism.jsx
+++ b/frontend/src/components/AttackBox/AttackMechanism.tsx
@@ -1,14 +1,15 @@
+import { AttackInfo } from "../../models/attack";
 import "../StrategyBox/StrategyMechanism.css";
 import React from "react";
 
-function DefenceMechanism(props) {
+function DefenceMechanism({ attack }: { attack: AttackInfo }) {
   const [isInfoBoxVisible, setIsInfoBoxVisible] = React.useState(false);
 
   return (
     <span>
       <div className="strategy-mechanism">
         <div className="strategy-mechanism-header">
-          <span>{props.attack.name}</span>
+          <span>{attack.name}</span>
           <span
             className="strategy-mechanism-info"
             onMouseOver={() => {
@@ -22,7 +23,7 @@ function DefenceMechanism(props) {
           </span>
         </div>
         {isInfoBoxVisible ? (
-          <div className="strategy-mechanism-info-box">{props.attack.info}</div>
+          <div className="strategy-mechanism-info-box">{attack.info}</div>
         ) : null}
       </div>
     </span>