diff --git a/sth-frontend/src/App.jsx b/sth-frontend/src/App.jsx
index a3a7e253f6d522fd8b76b4ded6dc6b205f7e7d8f..44798e3def41b80c43e008ad69853579271fb8af 100644
--- a/sth-frontend/src/App.jsx
+++ b/sth-frontend/src/App.jsx
@@ -1,7 +1,6 @@
 import Navbar from "./layouts/Navbar";
 import {Outlet} from "react-router-dom";
 import "./index.css"
-import Test from "./components/Test";
 
 function App() {
   return (
diff --git a/sth-frontend/src/components/Test.jsx b/sth-frontend/src/components/Test.jsx
deleted file mode 100644
index daad32d996b81c00e3ff494e81920257c8e450e2..0000000000000000000000000000000000000000
--- a/sth-frontend/src/components/Test.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Test({style}) {
-    return (
-        <div className={`font-bold ${style}`}>
-            <h1>Test</h1>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/BracketingRound.jsx b/sth-frontend/src/features/tournament/components/BracketingRound.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..65603ce391bf18099a8b2b972dad5dd437ffc0f8
--- /dev/null
+++ b/sth-frontend/src/features/tournament/components/BracketingRound.jsx
@@ -0,0 +1,16 @@
+import Match from "./Match";
+
+export default function BracketingRound({matchesNum}) {
+    const matches = [];
+
+    for (let i = 0; i < matchesNum; i++) {
+        matches.push(<Match style={i + 1} key={i} />)
+
+    }
+
+    return(
+        <div className={'flex-col justify-around w-40 h-[500px] bg-blue-500 border-spacing-1 border-2 m-3 border-amber-500 flex'}>
+            {matches}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/BracketingTree.jsx b/sth-frontend/src/features/tournament/components/BracketingTree.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9e2aabfdcdf19edb0ee21df8867642fb9effb395
--- /dev/null
+++ b/sth-frontend/src/features/tournament/components/BracketingTree.jsx
@@ -0,0 +1,16 @@
+import BracketingRound from "./BracketingRound";
+
+export default function BracketingTree({roundsNum}) {
+
+    const rounds = [];
+
+    for (let i = 0; i < roundsNum; i++) {
+        rounds.push(<BracketingRound    key={i} matchesNum={roundsNum - i * 2 } />)
+    }
+
+    return (
+        <div className={'flex flex-row justify-center'}>
+            {rounds}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/Match.jsx b/sth-frontend/src/features/tournament/components/Match.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..71c6538afc822e7333d8cbbc08f2c439b5bfd49a
--- /dev/null
+++ b/sth-frontend/src/features/tournament/components/Match.jsx
@@ -0,0 +1,8 @@
+
+export default function Match({style}) {
+    return(
+        <div className={`bg-green-600 w-24 h-12 border-2 border-b-fuchsia-600`}>
+
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/components/Team.jsx b/sth-frontend/src/features/tournament/components/Team.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/sth-frontend/src/features/tournament/components/Tournament.jsx b/sth-frontend/src/features/tournament/components/Tournament.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f0858c8a3551163620b96274b93b2239716a74f
--- /dev/null
+++ b/sth-frontend/src/features/tournament/components/Tournament.jsx
@@ -0,0 +1,12 @@
+import BracketingTree from "./BracketingTree";
+
+
+export default function Tournament() {
+
+
+    return(
+        <div>
+            <BracketingTree roundsNum={4}/>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/sth-frontend/src/features/tournament/index.jsx b/sth-frontend/src/features/tournament/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..139597f9cb07c5d48bed18984ec4747f4b4f3438
--- /dev/null
+++ b/sth-frontend/src/features/tournament/index.jsx
@@ -0,0 +1,2 @@
+
+
diff --git a/sth-frontend/src/index.jsx b/sth-frontend/src/index.jsx
index 50e232e6e8dd7107266ed4e5f3b74f0dd1e2d397..e81e3b13307d00008f109996563b63d13a69104b 100644
--- a/sth-frontend/src/index.jsx
+++ b/sth-frontend/src/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {RouterProvider} from "react-router-dom";
-import router from "./router";
+import router from "./utils/router";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
diff --git a/sth-frontend/src/router.jsx b/sth-frontend/src/utils/router.jsx
similarity index 72%
rename from sth-frontend/src/router.jsx
rename to sth-frontend/src/utils/router.jsx
index 4e67c2de702aad83af0e2a4a0214fb2e07e945c9..e5eb6de3abc64ddc4656d0190ec3a01de4cc4331 100644
--- a/sth-frontend/src/router.jsx
+++ b/sth-frontend/src/utils/router.jsx
@@ -1,6 +1,6 @@
 import {createBrowserRouter} from "react-router-dom";
-import Tournament from "./pages/Tournament";
-import App from "./App";
+import Tournament from "../features/tournament/components/Tournament";
+import App from "../App";
 
 const router = createBrowserRouter([
     {
@@ -10,8 +10,6 @@ const router = createBrowserRouter([
             {path: "", element: <Tournament/>},
         ]
     },
-
-
 ])