diff --git a/src/Match/MatchView.js b/src/Match/MatchView.js
index 692f761..2e9ea10 100644
--- a/src/Match/MatchView.js
+++ b/src/Match/MatchView.js
@@ -1,12 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import UserButtons from '../User/UserButtons';
 import { MatchesService } from '../services/MatchesService';
 import MovesTable from './MovesTable';
+import {MovesTableButtons} from './MovesTable';
 import MatchOverView from './MatchOverView';
 import Visualization from './Visualization';
 
 import './MatchView.scss';
+import { set } from 'date-fns';
 
 function getLog(log) {
   let table = log.split('\n').map((x) => x.trim());
@@ -55,6 +57,13 @@ export default function MatchView() {
   const [match, setMatch] = useState({});
   const [log, setLog] = useState({"rounds": [], "result": ""});
   const [gameData, setGameData] = useState({ gameStates: [] });
+  const canvasRef = useRef(null);
+  const [round, setRound] = useState(0);
+  const setMove = function (value) {
+    if (value == -2 || value >= log.rounds.length) setRound(log.rounds.length - 1);
+    else setRound(Math.min(Math.max(value,0), log.rounds.length - 1));
+    console.log("round: " + round);
+  }
 
   useEffect(() => {
     MatchesService.getMatch(id).then((data) => {
@@ -81,13 +90,13 @@ export default function MatchView() {
 
   return (
     <div>
-      <UserButtons />
       <div className="match-site"> 
         <MatchOverView match={match} />
         <div className="visualization">
-          <Visualization gameData={gameData} />
+          <Visualization gameData={gameData} curentRound={round} />
+          <MovesTableButtons move={round} setMove={setMove}/>
         </div>
-        <MovesTable log={log} />
+        <MovesTable log={log} scrollRef={canvasRef}/>
       </div>
     </div>
   );
diff --git a/src/Match/MovesTable.js b/src/Match/MovesTable.js
index 86c2e53..e4e8c4f 100644
--- a/src/Match/MovesTable.js
+++ b/src/Match/MovesTable.js
@@ -21,15 +21,28 @@ function getColor(value) {
     return 'def';
 }
 
-export default function MovesTable({log}) {
-    let boardState, playerMove, playerHand;
+function MovesTableButtons({move, setMove}) {
+    return(<> 
+            <div className="match-table-btns">
+                <div className="match-table-btns-container">
+                        <button className="match-table-btn" onClick={setMove(0)}>First</button>
+                        <button className="match-table-btn" onClick={setMove(move - 1)}>≪</button>
+                        <button className="match-table-btn">{move + 1}</button>
+                        <button className="match-table-btn" onClick={setMove(move + 1)}>≫</button>
+                        <button className="match-table-btn" onClick={setMove(-2)}>Last</button>
+                </div>
+            </div>
+        </>
+    );
+}
 
-    const [move, setMove] = useState(1);
+export default function MovesTable({log, scrollRef, }) {
+    let boardState, playerMove, playerHand;
 
     return <>
         <div className="move-table">
             <div className="move-table-container">
-                <div className='move-table-container-scrollable-table'>
+                <div className='move-table-container-scrollable-table' ref={scrollRef}>
                     <table>
                         <thead>
                             <tr>
@@ -41,7 +54,6 @@ export default function MovesTable({log}) {
                         </thead>
                         <tbody>
                             {log.rounds.map((round, index) => {
-                                //console.log(round.boardState);
                                 boardState = round.boardState.map((x) => <p className={getColor(x)}>{x}</p>)
                                 playerMove = round.playerMove.map((x) => <p className={getColor(x)}>{x}</p>)
                                 playerHand = round.playerHand.map((x) => <p className={getColor(x)}>{x}</p>)
@@ -56,16 +68,9 @@ export default function MovesTable({log}) {
                         </tbody>
                     </table>
                 </div>
-                <div className="match-table-btns">
-                <div className="match-table-btns-container">
-                        <button className="match-table-btn">First</button>
-                        <button className="match-table-btn">≪</button>
-                        <button className="match-table-btn">{move}</button>
-                        <button className="match-table-btn">≫</button>
-                        <button className="match-table-btn">Last</button>
-                </div>
-            </div>
             </div>
         </div>
     </>
-}
\ No newline at end of file
+}
+
+export { MovesTableButtons };
\ No newline at end of file
diff --git a/src/Match/Visualization.js b/src/Match/Visualization.js
index 320eeec..353d899 100644
--- a/src/Match/Visualization.js
+++ b/src/Match/Visualization.js
@@ -1,9 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './Visualization.scss';
 
-export default function Visualization({ gameData }) {
+export default function Visualization({ gameData, currentMove }) {
   const canvasRef = useRef(null);
   const [gameStateIndex, setGameStateIndex] = useState(0);
+  useEffect(() => {
+    setGameStateIndex(currentMove);
+  }, [currentMove]);
 
   useEffect(() => {
     if (!gameData || !gameData.gameStates || gameData.gameStates.length === 0) return;
@@ -19,7 +22,7 @@ export default function Visualization({ gameData }) {
       try {
         ctx.fillStyle = kolor.toLowerCase();
         ctx.fillRect(x, y, cardWidth, cardHeight);
-        ctx.strokeStyle = 'black';
+        ctx.strokeStyle = 'white'; 
         ctx.lineWidth = 2;
         ctx.strokeRect(x, y, cardWidth, cardHeight);
         ctx.fillStyle = 'black';
@@ -72,7 +75,7 @@ export default function Visualization({ gameData }) {
 
   return (
     <div className="visualization-container">
-      <canvas id="myCanvas" ref={canvasRef} width="1500" height="600"></canvas> {/* Adjusted canvas size */}
+      <canvas id="myCanvas" ref={canvasRef} width="1500" height="600"></canvas>
       <div id="controls">
         <button onClick={() => setGameStateIndex(Math.max(0, gameStateIndex - 1))}>
           Poprzedni układ
@@ -89,9 +92,6 @@ export default function Visualization({ gameData }) {
           value={gameStateIndex + 1}
           onChange={(e) => setGameStateIndex(e.target.value - 1)}
         />
-        <button onClick={() => setGameStateIndex(document.getElementById('moveNumber').value - 1)}>
-          Idź do ruchu
-        </button>
       </div>
     </div>
   );
diff --git a/src/Match/Visualization.scss b/src/Match/Visualization.scss
index a417b08..38b38f4 100644
--- a/src/Match/Visualization.scss
+++ b/src/Match/Visualization.scss
@@ -1,4 +1,6 @@
 .visualization-container {
+    background-color: #1a1a1a;
+    border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -8,8 +10,7 @@
   
   #myCanvas {
     border: 1px solid #000;
-    max-width: 100%;
-    max-height: 100%;
+    width: 100%;
   }
   
   #controls {
diff --git a/src/Matches/MatchesFilterPanel.js b/src/Matches/MatchesFilterPanel.js
index be8924a..7057b3c 100644
--- a/src/Matches/MatchesFilterPanel.js
+++ b/src/Matches/MatchesFilterPanel.js
@@ -1,18 +1,141 @@
+import React, { useEffect, useState } from 'react';
+import { GameService } from '../services/GameService';
+import { UserService } from '../services/UserService';
+import { TournamentService } from '../services/TournamentService';
+import './MatchesFilterPanel.scss';
+import { set } from 'date-fns';
 
+export default function MatchesFilterPanel({triggerFilter}) {
+    const [maxDate, setMaxDate] = useState('');
+    const [minDate, setMinDate] = useState('');
+
+    const [gameName, setGameName] = useState('');
+    const [games, setGames] = useState([]);
+    const [gameType, setGameType] = useState({});
+
+    const [playerName, setPlayerName] = useState('');
+    const [players, setPlayers] = useState([]);
+    const [player, setPlayer] = useState({});
+
+    const [tournamentName, setTournamentName] = useState('');
+    const [tournaments, setTournaments] = useState([]);
+    const [tournament, setTournament] = useState({});
+
+    const composeAndTriggerFilter = () => {
+        const filter = {};
+        if (tournament !== null || tournamentName !== '') {
+            filter.tournamentName = tournamentName;
+        }
+        if (player !== null || playerName !== '') {
+            filter.userParticipation = playerName;
+        }
+        if (gameType !== null || gameName !== '') {
+            filter.gameName = gameName;
+        }
+        if (maxDate !== null || minDate !== null) {
+            filter.maxPlayOutDate = maxDate;
+        }
+        if (minDate !== null || minDate !== null) {
+            filter.minPlayOutDate = minDate;
+        }
+        triggerFilter ? triggerFilter(filter) : console.log(filter);
+    }
+
+    useEffect(() => {
+        if (gameName === '' || gameName === gameType.gameFileName) {
+            setGames([]);
+            return;
+        }
+        GameService.getByName(gameName, 0, 5)
+        .then((response) => {
+            setGames(response.data.data.page);
+        })
+        .catch((error) => {
+            console.log(error);
+        })}, [gameName, gameType]);
+
+    useEffect(() => {
+        if (playerName === '' || playerName === player.login) {
+            setPlayers([]);
+            return;
+        }
+        UserService.searchPlayersByName(playerName, 0, 5)
+        .then((response) => {
+            setPlayers(response.data.data);
+        }).catch((error) => {
+            console.log(error);
+        })}, [playerName, player]);
+
+    useEffect(() => {
+        if (tournamentName === '' || tournamentName === tournament.tournamentTitle) {
+            setTournaments([]);
+            return;
+        }
+        TournamentService.getByName(tournamentName, 0, 5)
+        .then((response) => {
+            setTournaments(response.data.data.page);
+        }).catch((error) => {
+            console.log(error);
+        })}, [tournamentName, tournament]);
+
+    const gameClickHandler = (game) => {
+        return () => {
+            setGameType(game);
+            setGameName(game.gameFileName);
+        }
+    }
+
+    const playerClickHandler = (player) => {
+        return () => {
+            setPlayer(player);
+            setPlayerName(player.login);
+        }
+    }
+
+    const tournamentClickHandler = (tournament) => {
+        return () => {
+            setTournament(tournament);
+            setTournamentName(tournament.tournamentTitle);
+        }
+    }
 
-export default function MatchesFilterPanel({setTournamentId, setPlayerName, setMaxDate, setMinDate, setGameType}) {
     return (
-        <div>
-            <label htmlFor="tournamentId">Tournament Id</label>
-            <input type="number" id="tournamentId" onChange={(e) => setTournamentId(e.target.value)} />
+        <div className='matches-search-filter-panel'>
+            <label htmlFor="tournamentId">Tournament</label>
+            <input type="text" id="tournament" value={tournamentName} onChange={(e) => setTournamentName(e.target.value)} />
+            <div className='tournaments-list-container'>
+                <div className='tournaments-list'>
+                    {tournaments.map((tournament) => (
+                        <div className='tournaments-list-element' onClick={tournamentClickHandler(tournament)}>
+                            {tournament.tournamentTitle}
+                        </div>))}
+                </div>
+            </div>
             <label htmlFor="playerName">Player Name</label>
-            <input type="text" id="playerName" onChange={(e) => setPlayerName(e.target.value)} />
+            <input type="text" id="playerName" value={playerName} onChange={(e) => setPlayerName(e.target.value)} />
+            <div className='players-list-container'>
+                <div className='players-list'>
+                    {players.map((player) => (
+                        <div className='players-list-element' onClick={playerClickHandler(player)}>
+                            {player.login}
+                        </div>))}
+                </div>
+            </div>
             <label htmlFor="maxDate">Max Date</label>
             <input type="date" id="maxDate" onChange={(e) => setMaxDate(e.target.value)} />
             <label htmlFor="minDate">Min Date</label>
             <input type="date" id="minDate" onChange={(e) => setMinDate(e.target.value)} />
-            <label htmlFor="gameType">Game Type</label>
-            <input type="text" id="gameType" onChange={(e) => setGameType(e.target.value)} />
+            <label htmlFor="gameType">Game</label>
+            <input type="text" id="gameType" value={gameName} onChange={(e) => setGameName(e.target.value)} />
+            <div className='games-list-container'>
+                <div className='games-list'>
+                    {games.map((game) => (
+                        <div className='games-list-element' onClick={gameClickHandler(game)}>
+                            {game.gameFileName}
+                        </div>))}
+                </div>
+            </div>
+            <button onClick={composeAndTriggerFilter}>Filter</button>
         </div>
     );
 
diff --git a/src/Matches/MatchesFilterPanel.scss b/src/Matches/MatchesFilterPanel.scss
new file mode 100644
index 0000000..7359629
--- /dev/null
+++ b/src/Matches/MatchesFilterPanel.scss
@@ -0,0 +1,75 @@
+.matches-search-filter-panel {
+    
+    display: flex;
+    flex-direction: column;
+    align-self: start;
+    gap: 5px;
+    background-color: #181818;
+    padding: 20px;
+
+    * {
+        font-size: 20px;
+    }
+
+    .tournaments-list-container {
+        width: 100%;
+        height: 10px;
+        .tournaments-list {
+            position: relative;
+            width: 100%;
+            background-color: #333; 
+            .tournaments-list-element {
+                width: 100%;    
+                padding: 5px;
+                transition: all 0.5s ease;
+
+                &:hover {
+                    background-color: #111;
+                    color: #eee;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .players-list-container {
+        width: 100%;
+        height: 10px;
+        .players-list {
+            position: relative;
+            width: 100%;
+            background-color: #333; 
+            .players-list-element {
+                width: 100%;    
+                padding: 5px;
+                transition: all 0.5s ease;
+
+                &:hover {
+                    background-color: #111;
+                    color: #eee;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    .games-list-container {
+        width: 100%;
+        height: 10px;
+        .games-list {
+            position: relative;
+            width: 100%;
+            background-color: #333; 
+            .games-list-element {
+                width: 100%;    
+                padding: 5px;
+                transition: all 0.5s ease;
+                &:hover {
+                    background-color: #111;
+                    color: #eee;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Matches/MatchesList.css b/src/Matches/MatchesList.css
deleted file mode 100644
index 7120b6b..0000000
--- a/src/Matches/MatchesList.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.match-list-element {
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid #ccc;
-
-    border-radius: 5px; 
-
-    transition: all 0.5s ease-in;
-}
-
-.match-list-element:hover {
-    background-color: #333;
-    cursor: pointer;
-} 
-
-.match-list-element-title {
-    font-size: 30px;
-}
-
-.match-list-element-container {
-    display: flex;
-}
-
-.match-list-element-container-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-}
-
-.match-list-element-info{
-    font-size: medium;
-}
-
-.match-list-container {
-    width: 60%;
-    margin: 0 auto;
-}
\ No newline at end of file
diff --git a/src/Matches/MatchesList.js b/src/Matches/MatchesList.js
index c462842..9f32ebe 100644
--- a/src/Matches/MatchesList.js
+++ b/src/Matches/MatchesList.js
@@ -1,7 +1,8 @@
-import "./MatchesList.css";
+import "./MatchesList.scss";
 import {useNavigate} from 'react-router-dom';
+import Paginator from '../elements/Paginator/Paginator';
 
-export default function MatchesList({matchList}) {
+export default function MatchesList({matchList, maxPage, pageClickHandle}) {
     const navigate = useNavigate();
     const handleTournamentClick = (matchId) => {
         return () => navigate(`/match/${matchId}`);
@@ -16,16 +17,19 @@ export default function MatchesList({matchList}) {
         {matchList.map((match) => (
             <div className='match-list-element' key={match.id}>
                 <div className='match-list-element-container'>
-                    <input type="checkbox" onChange={handleMatchChecked(match.id)} />
-                    <div className='match-list-element-title' onClick={handleTournamentClick(match.id)} >{match.tournamentName}</div>
+                    <div className='match-list-element-title-checkbox'>
+                        <input type="checkbox" onChange={handleMatchChecked(match.id)} />
+                        <div className='match-list-element-title' onClick={handleTournamentClick(match.id)} >{match.tournamentName}</div>
+                    </div>
                     <div className='match-list-element-info-container'>
-                        <div className='match-list-element-info'>{match.players.join(', ')}</div>
-                        <div className='match-list-element-info'>{match.gameType}</div>
-                        <div className='match-list-element-info'>{match.date}</div>
+                        <div className='match-list-element-info'>{match.playersBots.map(e => e.userName).join(', ')}</div>
+                        <div className='match-list-element-info'>{match.gameName}</div>
+                        <div className='match-list-element-info'>{match.playedOutDate}</div>
                     </div>
                 </div>
             </div>
         ))}
+        <Paginator pageCount={maxPage} handlePageClick={pageClickHandle}/>
         </div>
         </>
 }
\ No newline at end of file
diff --git a/src/Matches/MatchesList.scss b/src/Matches/MatchesList.scss
new file mode 100644
index 0000000..3f53f14
--- /dev/null
+++ b/src/Matches/MatchesList.scss
@@ -0,0 +1,46 @@
+.match-list-container {
+    width: 90%;
+    margin: 0 auto;
+    background-color: #181818;
+    padding: 20px;
+
+    .match-list-element {
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+        margin: 10px 0;
+        border-bottom: 1px solid #ccc;
+        border-radius: 5px; 
+        transition: all 0.5s ease-in;
+
+        .match-list-element-title-checkbox {
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+
+            .match-list-element-title {
+                font-size: 25px;
+            }
+        }
+
+        &:hover {
+            background-color: #333;
+            cursor: pointer;
+        }
+
+        .match-list-element-container {
+            font-size: 20px;
+
+            .match-list-element-info-container {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+
+                .match-list-element-info{
+                    font-size: medium;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Matches/MatchesSearch.css b/src/Matches/MatchesSearch.css
deleted file mode 100644
index 38ee97f..0000000
--- a/src/Matches/MatchesSearch.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.matches-list-container {
-    display: grid;
-    grid-template-columns: 25% 70%;
-}
\ No newline at end of file
diff --git a/src/Matches/MatchesSearch.js b/src/Matches/MatchesSearch.js
index c66d3e0..dcd8d22 100644
--- a/src/Matches/MatchesSearch.js
+++ b/src/Matches/MatchesSearch.js
@@ -1,37 +1,38 @@
 import { useParams } from 'react-router-dom';
-import UserButtons from '../User/UserButtons';
+import TournamentNav from '../Tournaments/TournamentNav';
 import { useEffect, useState } from 'react';
 import { MatchesService } from '../services/MatchesService';
 import MatchesList from './MatchesList';
 import MatchesFilterPanel from './MatchesFilterPanel';
-import './MatchesSearch.css';
-
-export default function MatchesSearch() {
-  const { tournamentid, playername, maxdate, mindate, gametype } = useParams();
-  
-  const [tournamentId, setTournamentId] = useState(parseInt(tournamentid) ? parseInt(tournamentid) : null);
-  const [playerName, setPlayerName] = useState(playername ? playername : null);
-  const [maxDate, setMaxDate] = useState(maxdate ? new Date(maxdate) : null);
-  const [minDate, setMinDate] = useState(mindate ? new Date(mindate) : null);
-  const [gameType, setGameType] = useState(gametype ? gametype : null);
+import './MatchesSearch.scss';
 
+export default function MatchesSearch({isAuthenticated}) {
+  const [filter, setFilter] = useState({});
   const [matches, setMatches] = useState([]);
 
+  const [page, setPage] = useState({selected: 0});
+  const [maxPage, setMaxPage] = useState(0);
+
   useEffect(() => {
-    MatchesService.getMatches(1, 10, tournamentId, maxDate, minDate, gameType).then((data) => {
-      setMatches(data);
+    if (filter.minPlayOutDate === '') {
+      filter.minPlayOutDate = new Date(1).toISOString();
+    }
+    MatchesService.getMatches(page.selected, 10, filter).then((data) => {
+      console.log(data);
+      setMatches(data.data.page);
+      setMaxPage(data.data.amountOfPages);
     }).catch((e) => {
       console.log(e);
     });
-  }, [tournamentId, playerName, maxDate, minDate, gameType]);
+  }, [filter, page]);
 
   return (
     <div>
-      <UserButtons />
+      <TournamentNav isAuthenticated={isAuthenticated}/>
       <h1>Matches</h1>
       <div className="matches-list-container">
-        <MatchesFilterPanel setTournamentId={setTournamentId} setPlayerName={setPlayerName} setMaxDate={setMaxDate} setMinDate={setMinDate} setGameType={setGameType} />
-        <MatchesList matchList={matches} />
+        <MatchesFilterPanel triggerFilter={setFilter} />
+        <MatchesList matchList={matches} maxPage={maxPage} pageClickHandle={setPage} />
       </div>
     </div>
   );
diff --git a/src/Matches/MatchesSearch.scss b/src/Matches/MatchesSearch.scss
new file mode 100644
index 0000000..3396080
--- /dev/null
+++ b/src/Matches/MatchesSearch.scss
@@ -0,0 +1,6 @@
+.matches-list-container {
+    margin: 20px 0 0 0;
+    display: grid;
+    grid-template-columns: min(25%, 250px) auto;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/Navbar.scss b/src/Navbar.scss
index 9fdb917..f5e5c30 100644
--- a/src/Navbar.scss
+++ b/src/Navbar.scss
@@ -12,6 +12,10 @@ $menu-breakpoint: 900px;
     border-bottom: 1px solid #0f0;
     position: relative;
 
+    .logo-link {
+        text-decoration: none;
+    }
+
     .logo {
         display: flex;
         justify-content: left;
diff --git a/src/Tournaments/TournamentNav.js b/src/Tournaments/TournamentNav.js
index cdb1ef0..27e3b3d 100644
--- a/src/Tournaments/TournamentNav.js
+++ b/src/Tournaments/TournamentNav.js
@@ -14,9 +14,11 @@ function TournamentNav({ isAuthenticated }) {
 
     return (
         <div className="navbar">
-            <div className="logo">
-                <h1>Bot-Wars</h1>
-            </div>
+            <NavLink exact to="/" className="logo-link">
+                <div className="logo">
+                    <h1>Bot-Wars</h1>
+                </div>
+            </NavLink>
             <nav className={`nav ${menuOpen ? 'open' : ''}`}>
                 <div className="menu-btns">
                     <div className="menu-btn">
@@ -35,8 +37,8 @@ function TournamentNav({ isAuthenticated }) {
                         </NavLink>
                     </div>
                     <div className="menu-btn">
-                        <NavLink exact to="/" className={({ isActive }) => (isActive ? 'active-nav' : 'inactive')}>
-                            <button className="btn">Home</button>
+                        <NavLink exact to="/matches/" className={({ isActive }) => (isActive ? 'active-nav' : 'inactive')}>
+                            <button className="btn">Matches</button>
                         </NavLink>
                     </div>
                     <div className="menu-btn">
diff --git a/src/index.js b/src/index.js
index fd3fbd7..981b573 100644
--- a/src/index.js
+++ b/src/index.js
@@ -32,7 +32,6 @@ import UserSettings from './User/Settings/UserSettings';
 import AnimatedBackground from "./AnimatedBackground";
 import MatchesSearch from './Matches/MatchesSearch';
 import MatchView from './Match/MatchView';
-import AnimatedBackground from "./AnimatedBackground";
 
 const games = [{name:'Szachy', id:1}, {name:'Warcaby', id:2}, {name:'Scrabble', id:3}, {name:'Chińczyk', id:4}, {name:'Go', id:5}]
 
diff --git a/src/services/MatchesService.js b/src/services/MatchesService.js
index b962589..603a07f 100644
--- a/src/services/MatchesService.js
+++ b/src/services/MatchesService.js
@@ -1,7 +1,7 @@
 import { Api } from './Api'
 
 export const MatchesService = {
-    getMatches: async (page, pageSize, tournamentId, maxDate, minDate, gameType) => {
+    getMatches: async (page, pageSize, filter) => {
         // Type Post
         // Params:
         //// page - integer - int32
@@ -11,32 +11,22 @@ export const MatchesService = {
         //// maxDate - string - date-time
         //// minDate - string - date-time
         //// gameType - string
-
-        return [{"players": ["stanely", "jordan", "stachurski"], "gameType": "chess", "tournamentName": "chess tournament", "date": "2021-10-10", "id": 1},
-            {"players": ["stanely", "jordan", "stachurski"], "gameType": "chess", "tournamentName": "chess tournament", "date": "2021-10-10", "id": 2},
-            {"players": ["stanely", "jordan", "stachurski"], "gameType": "chess", "tournamentName": "chess tournament", "date": "2021-10-10", "id": 3},
-            {"players": ["stanely", "jordan", "stachurski"], "gameType": "chess", "tournamentName": "chess tournament", "date": "2021-10-10", "id": 4},
-            {"players": ["stanely", "jordan", "stachurski"], "gameType": "chess", "tournamentName": "chess tournament", "date": "2021-10-10", "id": 5},
-            {"players": ["stanely", "jordan", "stachurski"], "gameType": "chess", "tournamentName": "chess tournament", "date": "2021-10-10", "id": 6}]
         
-        const response = await Api.get(`Matches/getAll?page=${page}&pageSize=${pageSize}`, {
-            tournamentId: tournamentId,
-            maxDate: maxDate,
-            minDate: minDate,
-            gameType: gameType
-            });
+        console.log(filter);
+        for (const key in filter) {
+            if (filter[key] === '') {
+                delete filter[key];
+            }
+        }
+    
+        const response = await Api.post(`Match/getFiltered?PageNumber=${page}&pageSize=${pageSize}`,filter);
         return response.data;
     },
     getMatch: async (matchId) => {
         // Type Get
         // Params:
         //// matchId - integer - int64
-        return {"players": ["stanely", "jordan", "stachurski"], 
-            "result": {"stanely": 2, "jordan": 1, "stachurski": 0},
-            "gameType": "chess", 
-            "tournamentName": "chess tournament", 
-            "date": "2021-10-10", 
-            "id": 1};
+
         const response = await Api.get('Matches/get', {
             params: {
                 matchId: matchId
@@ -48,7 +38,7 @@ export const MatchesService = {
         // Type Get
         // Params:
         //// matchId - integer - int64
-        return {log: `0
+        /*return {log: `0
         7 of Yellow;6 of Brown;2 of Red;8 of Brown;3 of Pink;7 of Brown;8 of Red;8 of Green;4 of Yellow; Table: 2 of Brown;6 of Yellow;6 of White;7 of White;8 of White;
         1 4
         1
@@ -67,7 +57,7 @@ export const MatchesService = {
         7 of Red;1 of Yellow;7 of Pink;5 of Brown;1 of Blue;2 of Brown;5 of Red;7 of Green;7 of White; Table: 4 of Green;6 of Yellow;6 of White;4 of Yellow;6 of Brown;
         fold
         -1
-        0`};
+        0`};*/
         const response = await Api.get('Matches/getLog', {
             params: {
                 matchId: matchId
diff --git a/src/services/TournamentService.js b/src/services/TournamentService.js
index c7970f5..188d048 100644
--- a/src/services/TournamentService.js
+++ b/src/services/TournamentService.js
@@ -2,8 +2,10 @@ import {Api} from './Api'
 
 export const TournamentService = {
   getFilteredTournaments: async function (page, pageSize, body) {
-    const {tournamentTitle, minPlayOutDate, maxPlayOutDate, creator, userParticipation} = body;
-    return await Api.req(() => {return Api.post(`Tournament/getFiltered?PageNumber=${page}&PageSize=${pageSize}`, body)})
+    return await Api.req(() => {return Api.post(`Tournament/getFiltered?page=${page}&pageSize=${pageSize}`, body)})
+  },
+  getByName: async function (name, page, pageSize) {
+    return await Api.req(() => {return Api.post(`Tournament/getFiltered?page=${page}&pageSize=${pageSize}`, {tournamentTitle: name})})
   },
   getListOfTournaments: async function (page, pageSize) {
     return await Api.req(() => {return Api.post(`Tournament/getFiltered?PageNumber=${page}&PageSize=${pageSize}`, {})})
diff --git a/src/services/UserService.js b/src/services/UserService.js
index 7f96533..b39d45a 100644
--- a/src/services/UserService.js
+++ b/src/services/UserService.js
@@ -52,6 +52,9 @@ export const UserService = {
       newLogin: newLogin,
     })})
   },
+  searchPlayersByName: async function (name, pageNumber, pageSize) {
+    return await Api.req(() => {return Api.get(`Player/SearchByName?playerName=${name}&PageNumber=${pageNumber}&PageSize=${pageSize}`)})
+  },
   getGamesForPlayer: async function (id) {
     return await Api.req(() => {return Api.get(`Player/getGamesForPlayer?playerId=${id}`)})
   },