diff --git a/sth-frontend/src/Tournament.js b/sth-frontend/src/Tournament.js
index dd1e04d56c9cd13f6b6bdf55b48bc81751a4a070..908ebbfc98ae40116977e3e59ea05fc89dc556c3 100644
--- a/sth-frontend/src/Tournament.js
+++ b/sth-frontend/src/Tournament.js
@@ -1,64 +1,76 @@
 import {useState} from "react";
 
 export default function Tournament() {
-    const [globalScore, setGlobalScore] = useState(Array(14).fill(0))
-    function handleChange(score, index) {
-        const tempCopy = globalScore.slice()
-        console.log(globalScore)
-        console.log(score)
-        tempCopy[index] = score
-        setGlobalScore(tempCopy)
+    const [teams, setTeams] = useState(Array(14).fill({name: '', score: 0}))
+
+    function handleChange(key, data, index) {
+        const tempCopy = teams.slice()
+        console.log(teams)
+        console.log(data)
+        if (key === 'score')
+            tempCopy[index].score = data
+        else
+            tempCopy[index].name = data
+        setTeams(tempCopy)
     }
 
     return (
         <div style={{display: "flex", flexDirection: "row", gap: "50px"}}>
             <div className="firstPhase" style={{display: "flex", flexDirection: "column", gap: "50px"}}>
                 <div className="match">
-                    <Bracket value={globalScore[0]} onScoreChange={handleChange} index={0}/>
-                    <Bracket value={globalScore[1]} onScoreChange={handleChange} index={1}/>
+                    <Bracket value={teams[0]} onDataChange={handleChange} index={0}/>
+                    <Bracket value={teams[1]} onDataChange={handleChange} index={1}/>
                 </div>
                 <div className="match">
-                    <Bracket value={globalScore[2]} onScoreChange={handleChange} index={2}/>
-                    <Bracket value={globalScore[3]} onScoreChange={handleChange} index={3}/>
+                    <Bracket value={teams[2]} onDataChange={handleChange} index={2}/>
+                    <Bracket value={teams[3]} onDataChange={handleChange} index={3}/>
                 </div>
                 <div className="match">
-                    <Bracket value={globalScore[4]} onScoreChange={handleChange} index={4}/>
-                    <Bracket value={globalScore[5]} onScoreChange={handleChange} index={5}/>
+                    <Bracket value={teams[4]} onDataChange={handleChange} index={4}/>
+                    <Bracket value={teams[5]} onDataChange={handleChange} index={5}/>
                 </div>
                 <div className="match">
-                    <Bracket value={globalScore[6]} onScoreChange={handleChange} index={6}/>
-                    <Bracket value={globalScore[7]} onScoreChange={handleChange} index={7}/>
+                    <Bracket value={teams[6]} onDataChange={handleChange} index={6}/>
+                    <Bracket value={teams[7]} onDataChange={handleChange} index={7}/>
                 </div>
             </div>
-            <div className="secondPhase" style={{display: "flex", flexDirection:"column", justifyContent: "space-around"}}>
+            <div className="secondPhase"
+                 style={{display: "flex", flexDirection: "column", justifyContent: "space-around"}}>
                 <div className="match">
-                    <Bracket value={globalScore[8]} onScoreChange={handleChange} index={8}/>
-                    <Bracket value={globalScore[9]} onScoreChange={handleChange} index={9}/>
+                    <Bracket value={teams[8]} onDataChange={handleChange} index={8}/>
+                    <Bracket value={teams[9]} onDataChange={handleChange} index={9}/>
                 </div>
                 <div className="match">
-                    <Bracket value={globalScore[10]} onScoreChange={handleChange} index={10}/>
-                    <Bracket value={globalScore[11]} onScoreChange={handleChange} index={11}/>
+                    <Bracket value={teams[10]} onDataChange={handleChange} index={10}/>
+                    <Bracket value={teams[11]} onDataChange={handleChange} index={11}/>
                 </div>
             </div>
             <div className="thirdPhase" style={{display: "flex", alignItems: "center"}}>
                 <div className="match">
-                    <Bracket value={globalScore[12]} onScoreChange={handleChange} index={12}/>
-                    <Bracket value={globalScore[13]} onScoreChange={handleChange} index={13}/>
+                    <Bracket value={teams[12]} onDataChange={handleChange} index={12}/>
+                    <Bracket value={teams[13]} onDataChange={handleChange} index={13}/>
                 </div>
             </div>
         </div>
     )
 }
 
-function Bracket({value, highlight, onScoreChange, index}) {
-    return <div id="bracketWrapper" style={{display: "flex",flexDirection:"row" ,padding: "10px", border: "1px solid black", width: "fit-content"}}>
+function Bracket({value, highlight, onDataChange, index}) {
+    return <div id="bracketWrapper" style={{
+        display: "flex",
+        flexDirection: "row",
+        padding: "10px",
+        border: "1px solid black",
+        width: "fit-content"
+    }}>
         <div id="teamNameWrapper" style={{display: "flex", flexDirection: "column"}}>
             <label htmlFor="teamName" style={{fontSize: "8pt"}}>teamname</label>
-            <input id="teamName" type="text"/>
+            <input id={`teamName${index}`} type="text" onChange={() => onDataChange('name', document.getElementById(`teamName${index}`).value, index)}/>
         </div>
         <div id="scoreWrapper" style={{display: "flex", flexDirection: "column", marginLeft: "10px"}}>
-            <label htmlFor={"score"+index} style={{fontSize: "8pt"}}>score</label>
-            <input id={"score"+index} type="number" min={0} style={{width: "35px"}} value={value} onChange={() => onScoreChange(document.querySelector(`#score${index}`).value, index)}/>
+            <label htmlFor={"score" + index} style={{fontSize: "8pt"}}>score</label>
+            <input id={`score${index}`} type="number" min={0} style={{width: "35px"}} value={value.score}
+                   onChange={() => onDataChange('score', document.getElementById(`score${index}`).value, index)}/>
         </div>
     </div>
 }
\ No newline at end of file