diff --git a/ludos/annotation/README.md b/ludos/annotation/README.md
index 9a505dd2..7ae61ece 100644
--- a/ludos/annotation/README.md
+++ b/ludos/annotation/README.md
@@ -1 +1,6 @@
-# LUDOS Annotation Api
+# LUDOS Annotation Server
+
+## How to run?
+```WORKDIR=./ludos/annotation```<br/>
+1. Run ```docker compose up --build``` <br/>
+2. Now, the api is available with localhost:8090 base url.
diff --git a/ludos/backend/README.md b/ludos/backend/README.md
index fcf8c96d..14537c4c 100644
--- a/ludos/backend/README.md
+++ b/ludos/backend/README.md
@@ -1,5 +1,5 @@
 # LUDOS Backend Api
-Deployed Swagger Documentation: http://3.125.225.39:8080/api 
+Deployed Swagger Documentation: http://164.92.195.35:8080/api
 ## How to run?
 ```WORKDIR=./ludos/backend```<br/>
 1. Create a .env file for the environment variables. Please ask for the variables. The name of the variables are included in .env.example file. <br/>
diff --git a/ludos/frontend/src/components/ForumTopic.js b/ludos/frontend/src/components/ForumTopic.js
index 6f443846..655d8c5c 100644
--- a/ludos/frontend/src/components/ForumTopic.js
+++ b/ludos/frontend/src/components/ForumTopic.js
@@ -171,28 +171,26 @@ function ForumTopic(data) {
               ))}
           </Grid>
         </Grid>
-
-        <Typography
-          variant="body2"
-          component="div"
-          style={{
-            color: "white",
-            marginTop: "3px",
-            marginRight: "10px",
-            display: "flex",
-            marginLeft: "10px",
-            textAlign: "center",
-            lineHeight: "1.7",
-          }}
+        <Link
+          to={`/thread/${data.topic.id}`}
+          style={{ textDecoration: "none", color: "inherit" }}
         >
-          <Link
-            to={`/thread/${data.topic.id}`}
-            style={{ textDecoration: "none", color: "inherit" }}
+          <Typography
+            variant="body2"
+            component="div"
+            style={{
+              color: "white",
+              marginTop: "3px",
+              marginRight: "10px",
+              display: "flex",
+              marginLeft: "10px",
+              textAlign: "center",
+              lineHeight: "1.7",
+            }}
           >
             {data.topic.title}
-          </Link>
-        </Typography>
-
+          </Typography>
+        </Link>
         <Grid
           style={{
             display: "flex",
diff --git a/ludos/frontend/src/components/ForumTopicForGame.js b/ludos/frontend/src/components/ForumTopicForGame.js
index cfeee4cc..404d95e1 100644
--- a/ludos/frontend/src/components/ForumTopicForGame.js
+++ b/ludos/frontend/src/components/ForumTopicForGame.js
@@ -9,7 +9,7 @@ import LaunchIcon from "@mui/icons-material/Launch";
 //isUpcomingTitle, launching date and demo link is needed
 function ForumTopic(data) {
   console.log(data.topic);
-  const directLink = `/profile-page/${data.topic.user.id}`;
+  const directLink = `/profile-page/${data.topic.user?.id}`;
   const tagBox = {
     display: "flex",
     justifyContent: "center",
@@ -82,7 +82,7 @@ function ForumTopic(data) {
     marginRight: "5px",
   };
 */
-  useEffect(() => {}, []);
+  useEffect(() => { }, []);
 
   return (
     <Grid
@@ -123,7 +123,7 @@ function ForumTopic(data) {
             paddingBottom: "10px",
           }}
           src={
-            data.topic.user.avatar ||
+            data.topic.user?.avatar ||
             "https://p7.hiclipart.com/preview/173/464/909/clip-art-pokeball-png.jpg"
           }
         />
@@ -138,7 +138,7 @@ function ForumTopic(data) {
         >
           @
           <Link to={directLink} style={userStyle}>
-            {data.topic.user.username}
+            {data.topic.user?.username}
           </Link>
         </Typography>
       </Grid>
@@ -175,7 +175,7 @@ function ForumTopic(data) {
             }}
           >
             <Typography variant="caption" component="div" style={forumStyle}>
-              {data.topic.game.title}
+              {data.topic.game?.title}
             </Typography>
             {data.topic.upcomingTitle != null &&
               data.topic.upcomingTitle.isUpcomingTitle && (
@@ -190,7 +190,7 @@ function ForumTopic(data) {
           </Grid>
           <Grid style={{ display: "flex", justifyContent: "space-between" }}>
             {data.topic &&
-              data.topic.tags.map((tag1, index1) => (
+              data.topic.tags?.map((tag1, index1) => (
                 <Typography
                   variant="caption"
                   component="div"
@@ -202,24 +202,24 @@ function ForumTopic(data) {
               ))}
           </Grid>
         </Grid>
-        <Typography
-          variant="body2"
-          component="div"
-          style={{
-            color: "white",
-            marginTop: "3px",
-            marginRight: "10px",
-            display: "flex",
-            marginLeft: "10px",
-            textAlign: "center",
-            lineHeight: "1.7",
-            fontSize: "20px",
-          }}
-        >
-          <Link to={`/thread/${data.topic.id}`} style={userStyle}>
+        <Link to={`/thread/${data.topic.id}`} style={userStyle}>
+          <Typography
+            variant="body2"
+            component="div"
+            style={{
+              color: "white",
+              marginTop: "3px",
+              marginRight: "10px",
+              display: "flex",
+              marginLeft: "10px",
+              textAlign: "center",
+              lineHeight: "1.7",
+              fontSize: "20px",
+            }}
+          >
             {data.topic.title}
-          </Link>
-        </Typography>
+          </Typography>
+        </Link>
         <Grid
           style={{
             display: "flex",
@@ -248,7 +248,7 @@ function ForumTopic(data) {
               flexDirection: "row",
               justifyContent:
                 data.topic.upcomingTitle != null &&
-                data.topic.upcomingTitle.isUpcomingTitle
+                  data.topic.upcomingTitle.isUpcomingTitle
                   ? "space-between"
                   : "flex-end",
             }}
@@ -322,7 +322,7 @@ function ForumTopic(data) {
                   marginRight: "3px",
                 }}
               >
-                @{data.topic.user.username}
+                @{data.topic.user?.username}
               </Typography>
               <AccessTimeIcon />
               <Typography
@@ -337,8 +337,8 @@ function ForumTopic(data) {
                   marginBottom: "10px",
                 }}
               >
-                {data.topic.createdAt.split("T")[0]}{" "}
-                {data.topic.createdAt.split("T")[1].split(".")[0]}
+                {data.topic.createdAt?.split("T")[0]}{" "}
+                {data.topic.createdAt?.split("T")[1].split(".")[0]}
               </Typography>
               <MapsUgcIcon />
               <Typography
diff --git a/ludos/frontend/src/pages/ForumsPage.js b/ludos/frontend/src/pages/ForumsPage.js
index e3315755..56050d72 100644
--- a/ludos/frontend/src/pages/ForumsPage.js
+++ b/ludos/frontend/src/pages/ForumsPage.js
@@ -1,12 +1,28 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import ForumsBackground from "../assets/forumBackground.png";
-import { Typography, Button, TextField, Container } from "@mui/material";
-import ForumTopic from "../components/ForumTopic";
+import {
+  Typography,
+  Button,
+  TextField,
+  Container,
+  Grid,
+  Select,
+  MenuItem,
+  FormControlLabel,
+  Pagination,
+  Checkbox,
+  Chip,
+  FormControl,
+  Input,
+
+} from "@mui/material";
+import ForumTopic from "../components/ForumTopicForGame";
 import Autocomplete from "@mui/material/Autocomplete";
 import axios from "axios";
 
 const ForumsPage = () => {
+  const myComponentRef = useRef(null);
   const navigate = useNavigate();
   const [searchValue, setSearchValue] = useState("");
   const [searchKey, setSearchKey] = useState("");
@@ -18,6 +34,194 @@ const ForumsPage = () => {
     new Set(mergedThreads.map((item) => item.title)),
   );
   const [trendingTopics, setTrendingTopics] = useState([]);
+  const [detailSearch, setDetailSearch] = useState(false);
+  const [nameSearch, setNameSearch] = useState("");
+  const [tags, setTags] = useState([])
+  const [currTag, setCurrTag] = useState("");
+  const [detailGames, setDetailGames] = useState([]);
+  const [searchGame, setSearchGame] = useState("");
+  const [searchGroup, setSearchGroup] = useState("");
+  const [groups, setGroups] = useState([]);
+  const [sortBy, setSortBy] = useState("numberOfLikes");
+  const [sortOrder, setSortOrder] = useState("ASC");
+  const [searchUser, setSearchUser] = useState("");
+  const [users, setUsers] = useState([]);
+  const [refresh, setRefresh] = useState(false);
+  const [page, setPage] = useState(1);
+  const [auth, setAuth] = useState(false);
+  const [detailThreads, setDetailThreads] = useState([]);
+  const [pageCount, setPageCount] = useState(1);
+
+  const handleDetailSearch = () => {
+    setDetailSearch((prevDetailSearch) => !prevDetailSearch);
+  };
+
+  const handleNameSearchChange = (event) => {
+    setNameSearch(event.target.value);
+  }
+
+  const handleDeleteTag = (item, index) => {
+    let arr = [...tags];
+    arr.splice(index, 1);
+    console.log(item);
+    setTags(arr);
+  };
+
+  const handleTagsChange = (e) => {
+    setCurrTag(e.target.value);
+  };
+
+  const handleKeyUp = (e) => {
+    if (e.keyCode == 13) {
+      setTags((oldState) => [...oldState, e.target.value]);
+      setCurrTag("");
+    }
+  };
+
+  const handleGameChange = (event, option) => {
+    if (option) {
+      setSearchGame(option.value);
+    } else {
+      setSearchGame("");
+    }
+  };
+
+  const handleGameSearch = (event) => {
+    if (event?.target?.value) {
+      const link = `http://${process.env.REACT_APP_API_URL}/game?searchKey=${event.target.value}`;
+      axios
+        .get(link, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("accessToken"),
+          },
+        })
+        .then((response) => {
+          console.log(response);
+          setDetailGames(response.data.items);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      setDetailGames([]);
+    }
+  };
+
+  const handleGroupChange = (event, option) => {
+    if (option) {
+      setSearchGroup(option.value);
+    } else {
+      setSearchGroup("");
+    }
+  };
+
+  const handleGroupSearch = (event) => {
+    if (event?.target?.value) {
+      const link = `http://${process.env.REACT_APP_API_URL}/group?searchKey=${event.target.value}`;
+      axios
+        .get(link, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("accessToken"),
+          },
+        })
+        .then((response) => {
+          console.log(response);
+          setGroups(response.data.items);
+          console.log(groups);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      setGroups([]);
+    }
+  };
+
+  const handleUserChange = (event, option) => {
+    if (option) {
+      setSearchUser(option.value);
+    } else {
+      setSearchUser("");
+    }
+  };
+
+  const handleUserSearch = (event) => {
+    if (event?.target?.value) {
+      const link = `http://${process.env.REACT_APP_API_URL}/search/${event.target.value}`;
+      axios
+        .get(link, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("accessToken"),
+          },
+        })
+        .then((response) => {
+          console.log(response);
+          setUsers(response.data.users);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    } else {
+      setUsers([]);
+    }
+  };
+
+  const handleSortByChange = (event) => {
+    setSortBy(event.target.value);
+  };
+
+  const handleSortOrderChange = (event) => {
+    setSortOrder(event.target.value);
+  };
+
+  const handleFilterButtonClick = () => {
+    setPage(1);
+    setRefresh(!refresh);
+  };
+
+  useEffect(() => {
+    if (localStorage.getItem("accessToken")) {
+      const link1 = `http://${process.env.REACT_APP_API_URL}/user/info`;
+      axios
+        .get(link1, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("accessToken"),
+          },
+        })
+        .then(() => {
+          setAuth(true);
+        })
+        .catch((error) => {
+          console.log(error);
+          setAuth(false);
+        });
+    } else {
+      setAuth(false);
+    }
+    const tagsString = tags.join("%2C");
+    const link = `http://${process.env.REACT_APP_API_URL}/post?page=${page}&searchKey=${nameSearch}&tags=${tagsString}&gameId=${searchGame}&ownerUserId=${searchUser}&order=${sortOrder}&orderByKey=${sortBy}`;
+    console.log(link);
+    axios
+      .get(link, {
+        headers: {
+          Authorization: "Bearer " + localStorage.getItem("accessToken"),
+        },
+      })
+      .then((response) => {
+        console.log(response.data.items);
+        setDetailThreads(response.data.items);
+        setPageCount(response.data.meta.totalPages);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, [refresh]);
+
+  const handlePageChange = (event, value) => {
+    setPage(value);
+    setRefresh(!refresh);
+  };
+
 
   const handleThreadSearch = (threadId) => {
     //value should be the id of the thread
@@ -240,6 +444,16 @@ const ForumsPage = () => {
     },
     // Add more topics as needed...
   ]; */
+
+  const paginStyle = {
+    backgroundColor: "rgba(204, 204, 255, 0.9)",
+    borderRadius: "10px",
+    border: "4px solid rgba(51, 153, 255, 1)", // Çerçeve rengi ve genişliği
+    boxSizing: "border-box", // Kutu modelini içerir
+    fontFamily: "Trebuchet MS, sans-serif",
+    width: "auto",
+    marginTop: "10px",
+  };
   return (
     <div
       style={{
@@ -365,9 +579,320 @@ const ForumsPage = () => {
                 width: "100%",
               }}
             />
+            <div style={{ display: 'flex', justifyContent: 'flex-start', marginLeft: '20px', marginBottom: '10px' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', marginTop: '20px' }}>
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  style={{ borderRadius: '40px', display: 'flex', backgroundColor: 'green' }}
+                  onClick={handleDetailSearch}
+                >
+                  {detailSearch ? "Close" : "Detailed Search"}
+                </Button>
+              </div>
+
+
+
+            </div>
           </div>
         </div>
       </div>
+
+      <Container xs={9} style={{ width: '60%' }}>
+        <div >
+          {detailSearch && (
+            <div>
+              <Grid
+                item
+                xs={9}
+                style={{
+                  backgroundColor: "rgba(51, 153, 255, 1)",
+                  borderRadius: "10px",
+                  paddingRight: "10px",
+                  marginTop: "10px",
+                  padding: '50px',
+                }}
+              >
+                <Typography
+                  variant="h3"
+                  gutterBottom
+                  style={{
+                    color: "white",
+                    fontFamily: "Trebuchet MS, sans-serif",
+                    fontWeight: "bold",
+                  }}
+                >
+                  Detailed Search
+                </Typography>
+                {/* Search Input */}
+                <Typography
+                  variant="h7"
+                  gutterBottom
+                  style={{
+                    color: "white",
+                    fontFamily: "Trebuchet MS, sans-serif",
+                    fontWeight: "bold",
+                  }}
+                >
+                  Thread Name:
+                </Typography>
+                <TextField
+                  type="text"
+                  label="Search the Thread Name"
+                  placeholder="Search..."
+                  value={nameSearch}
+                  onChange={handleNameSearchChange}
+                  variant="outlined"
+                  fullWidth
+                  style={{
+                    marginBottom: "10px",
+                    backgroundColor: "white",
+                    borderRadius: "10px",
+                  }}
+                />
+
+                <Typography
+                  variant="h7"
+                  gutterBottom
+                  style={{
+                    color: "white",
+                    fontFamily: "Trebuchet MS, sans-serif",
+                    fontWeight: "bold",
+                  }}
+                >
+                  Filter with Tags:
+                </Typography>
+                <div ref={myComponentRef}>
+                  <FormControl
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "20px",
+                      flexWrap: "wrap",
+                      flexDirection: "row",
+                      border: "2px solid lightgray",
+                      padding: 1,
+                      borderRadius: "4px",
+                      backgroundColor: "white",
+                      marginBottom: "10px",
+                    }}
+                  >
+                    <div className={"container"}>
+                      {tags.map((item, index) => (
+                        <Chip
+                          key={index}
+                          size="small"
+                          onDelete={() => handleDeleteTag(item, index)}
+                          label={item}
+                        />
+                      ))}
+                    </div>
+                    <Input
+                      value={currTag}
+                      onChange={handleTagsChange}
+                      onKeyDown={handleKeyUp}
+                    />
+                  </FormControl>
+                </div>
+                <Typography
+                  variant="h7"
+                  gutterBottom
+                  style={{
+                    color: "white",
+                    fontFamily: "Trebuchet MS, sans-serif",
+                    fontWeight: "bold",
+                  }}
+                >
+                  Filter with Game:
+                </Typography>
+                <Autocomplete
+                  onChange={handleGameChange}
+                  options={detailGames.map((game) => ({
+                    label: game.title,
+                    value: game.id,
+                  }))}
+                  getOptionLabel={(option) => option.label || ""}
+                  onInputChange={handleGameSearch}
+                  required
+                  renderInput={(params) => (
+                    <TextField {...params} label="Search Game" width="90%" />
+                  )}
+                  style={{
+                    marginBottom: "10px",
+                    backgroundColor: "white",
+                    borderRadius: "10px",
+                  }}
+                />
+                <Typography
+                  variant="h7"
+                  gutterBottom
+                  style={{
+                    color: "white",
+                    fontFamily: "Trebuchet MS, sans-serif",
+                    fontWeight: "bold",
+                  }}
+                >
+                  Filter with Group:
+                </Typography>
+                <Autocomplete
+                  onChange={handleGroupChange}
+                  options={groups.map((group) => ({
+                    label: group.name,
+                    value: group.id,
+                  }))}
+                  getOptionLabel={(option) => option.label || ""}
+                  onInputChange={handleGroupSearch}
+                  required
+                  renderInput={(params) => (
+                    <TextField {...params} label="Search Group" width="90%" />
+                  )}
+                  style={{
+                    marginBottom: "10px",
+                    backgroundColor: "white",
+                    borderRadius: "10px",
+                  }}
+                />
+
+                <Typography
+                  variant="h7"
+                  gutterBottom
+                  style={{
+                    color: "white",
+                    fontFamily: "Trebuchet MS, sans-serif",
+                    fontWeight: "bold",
+                  }}
+                >
+                  Filter with User:
+                </Typography>
+                <Autocomplete
+                  onChange={handleUserChange}
+                  options={users.map((user) => ({
+                    label: user.username,
+                    value: user.id,
+                  }))}
+                  getOptionLabel={(option) => option.label || ""}
+                  onInputChange={handleUserSearch}
+                  required
+                  renderInput={(params) => (
+                    <TextField {...params} label="Search User" width="90%" />
+                  )}
+                  style={{
+                    marginBottom: "10px",
+                    backgroundColor: "white",
+                    borderRadius: "10px",
+                  }}
+                />
+
+                <Typography
+                  variant="h7"
+                  gutterBottom
+                  style={{
+                    color: "white",
+                    fontFamily: "Trebuchet MS, sans-serif",
+                    fontWeight: "bold",
+                  }}
+                >
+                  Sort By:
+                </Typography>
+                <Select
+                  labelId="sort-by-label"
+                  id="sort-by"
+                  value={sortBy}
+                  onChange={handleSortByChange}
+                  label="Sort By Field"
+                  placeholder="Sort By Field"
+                  style={{
+                    marginBottom: "10px",
+                    backgroundColor: "white",
+                    width: "100%",
+                    borderRadius: "10px",
+                  }}
+                >
+                  {[
+                    { value: "title", label: "Title" },
+                    {
+                      value: "numberOfLikes",
+                      label: "Number of Likes",
+                    },
+                    {
+                      value: "numberOfDislikes",
+                      label: "Number of Dislikes",
+                    },
+                    // Add other sorting options as needed
+                  ].map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                      {option.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+                <Typography
+                  variant="h7"
+                  gutterBottom
+                  style={{
+                    color: "white",
+                    fontFamily: "Trebuchet MS, sans-serif",
+                    fontWeight: "bold",
+                  }}
+                >
+                  Sort Order:
+                </Typography>
+                <Select
+                  labelId="sortTypeLabel"
+                  id="sortType"
+                  value={sortOrder}
+                  onChange={handleSortOrderChange}
+                  label="Sort By Field"
+                  placeholder="Sort By Field"
+                  style={{
+                    marginBottom: "10px",
+                    backgroundColor: "white",
+                    width: "100%",
+                    borderRadius: "10px",
+                  }}
+                >
+                  {[
+                    { value: "ASC", label: "Ascending" },
+                    { value: "DESC", label: "Descending" },
+                    // Add other sorting options as needed
+                  ].map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                      {option.label}
+                    </MenuItem>
+                  ))}
+                </Select>
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  onClick={handleFilterButtonClick}
+                  style={{
+                    backgroundColor: "pink",
+                    color: "white",
+                    marginBottom: "10px",
+                  }}
+                >
+                  Filter
+                </Button>
+                {/* Main Content */}
+                {detailThreads.map((topic, index) => (
+                  <ForumTopic key={index} topic={topic} />
+                ))}
+                <Pagination
+                  count={pageCount}
+                  color="secondary"
+                  page={page}
+                  onChange={handlePageChange}
+                  style={paginStyle}
+                />
+              </Grid>
+
+
+
+            </div>
+          )}
+        </div>
+      </Container >
+
+
       <Container
         style={{
           backgroundColor: "rgb(30,30,30,0.9)",
@@ -489,7 +1014,7 @@ const ForumsPage = () => {
           </div>
         </Container>
       </div>
-    </div>
+    </div >
   );
 };
 
diff --git a/ludos/frontend/src/pages/GamesPage.js b/ludos/frontend/src/pages/GamesPage.js
index fd495249..ce0488af 100644
--- a/ludos/frontend/src/pages/GamesPage.js
+++ b/ludos/frontend/src/pages/GamesPage.js
@@ -56,6 +56,37 @@ const convertToSlug = (text) => {
     .replace(/--+/g, "-"); // Replace multiple dashes with single dash
 };
 
+const predefinedTags = [
+  "Action",
+  "Adventure",
+  "RPG",
+  "Strategy",
+  "Simulation",
+  "Sports",
+  "Fighting",
+  "Horror",
+  "Puzzle",
+  "Multiplayer",
+  "Indie",
+  "RTS",
+  "Racing",
+  "Open World",
+  "Educational",
+  "VR",
+  "Survival",
+  "Story-Driven",
+  "Retro",
+  "Anime",
+  "Hack and Slash",
+  "Mystery",
+  "Historical",
+  "Sci-Fi",
+  "Fantasy",
+  "Comedy",
+  "Artistic",
+  "Puzzle-Platformer",
+];
+
 export default function GamesPage() {
   const myComponentRef = useRef(null);
   const [searchValue, setSearchValue] = useState("");
@@ -76,6 +107,7 @@ export default function GamesPage() {
   const [auth, setAuth] = useState(false);
   const [detailGames, setDetailGames] = useState([]);
   const [pageCount, setPageCount] = useState(1);
+  const [isTagSelected, setIsTagSelected] = useState(false);
 
   const [gameHighlight, setGameHighlight] = useState([]);
 
@@ -142,6 +174,10 @@ export default function GamesPage() {
   const handleGameRoute = (value) => {
     navigate(`/game/${convertToSlug(value)}`);
   };
+  const handleTagSelect = (selectedTags) => {
+    setIsTagSelected(selectedTags.length > 0);
+    setTags(selectedTags);
+  };
 
   useEffect(() => {
     if (localStorage.getItem("accessToken")) {
@@ -416,19 +452,31 @@ export default function GamesPage() {
           style={{
             display: "flex",
             justifyContent: "flex-start",
-            alignItems: "center",
             marginLeft: "20px",
             marginBottom: "10px",
           }}
         >
-          <Button
-            variant="contained"
-            color="secondary"
-            style={{ borderRadius: "40px", alignItems: "flex-start" }}
-            onClick={handleDetailSearch}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              marginTop: "20px",
+            }}
           >
-            Detailed Search
-          </Button>
+            <Button
+              variant="contained"
+              color="secondary"
+              style={{
+                borderRadius: "40px",
+                display: "flex",
+                backgroundColor: "green",
+              }}
+              onClick={handleDetailSearch}
+            >
+              {detailSearch ? "Close" : "Detailed Search"}
+            </Button>
+          </div>
 
           {detailSearch ? (
             <div style={{ padding: "10px" }}>
@@ -482,38 +530,29 @@ export default function GamesPage() {
                 >
                   Filter with Tags:
                 </Typography>
-                <div ref={myComponentRef}>
-                  <FormControl
-                    sx={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "20px",
-                      flexWrap: "wrap",
-                      flexDirection: "row",
-                      border: "2px solid lightgray",
-                      padding: 1,
-                      borderRadius: "4px",
-                      backgroundColor: "white",
-                      marginBottom: "10px",
-                    }}
-                  >
-                    <div className={"container"}>
-                      {tags.map((item, index) => (
-                        <Chip
-                          key={index}
-                          size="small"
-                          onDelete={() => handleDeleteTag(item, index)}
-                          label={item}
-                        />
+                <Select
+                  label="Tags"
+                  labelId="tags-label"
+                  id="tags"
+                  name="tags"
+                  multiple
+                  value={tags}
+                  onChange={(e) => handleTagSelect(e.target.value)}
+                  fullWidth
+                  renderValue={(selected) => (
+                    <div style={{ display: "flex", flexWrap: "wrap" }}>
+                      {selected.map((tag) => (
+                        <Chip key={tag} label={tag} style={{ margin: 2 }} />
                       ))}
                     </div>
-                    <Input
-                      value={currTag}
-                      onChange={handleTagsChange}
-                      onKeyDown={handleKeyUp}
-                    />
-                  </FormControl>
-                </div>
+                  )}
+                >
+                  {predefinedTags.map((tag) => (
+                    <MenuItem key={tag} value={tag}>
+                      {tag}
+                    </MenuItem>
+                  ))}
+                </Select>
                 <Typography
                   variant="h7"
                   gutterBottom
diff --git a/ludos/frontend/src/pages/GroupsPage.js b/ludos/frontend/src/pages/GroupsPage.js
index b5a20300..df63fd15 100644
--- a/ludos/frontend/src/pages/GroupsPage.js
+++ b/ludos/frontend/src/pages/GroupsPage.js
@@ -449,7 +449,14 @@ const ForumsPage = () => {
           </Button>
         </Grid>
 
-        <Grid item xs={12} sm={9} md={9} lg={9}>
+        <Grid
+          item
+          xs={12}
+          sm={9}
+          md={9}
+          lg={9}
+          style={{ display: "grid", gap: "32px" }}
+        >
           {/* Main Content */}
           {groups.map((topic, index) => (
             <GroupTopic key={index} topic={topic} />
diff --git a/ludos/frontend/src/pages/LoginPage.js b/ludos/frontend/src/pages/LoginPage.js
index 9903d042..ffd4945d 100644
--- a/ludos/frontend/src/pages/LoginPage.js
+++ b/ludos/frontend/src/pages/LoginPage.js
@@ -15,12 +15,11 @@ import axios from "axios";
 import MuiAlert from "@mui/material/Alert";
 import LoginIcon from "@mui/icons-material/Login";
 import { useNavigate } from "react-router-dom";
-import Visibility from '@mui/icons-material/Visibility';
-import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import FormControl from '@mui/material/FormControl';
-
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import FormControl from "@mui/material/FormControl";
 
 const Alert = React.forwardRef(function Alert(props, ref) {
   return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
@@ -31,7 +30,7 @@ const backgroundImage = require("../assets/logo.png");
 export default function Login() {
   useEffect(() => {
     window.scrollTo(0, 0);
-}, []);
+  }, []);
 
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -118,6 +117,8 @@ export default function Login() {
             flexDirection: "column",
             alignItems: "center",
             backgroundColor: "#0C1929",
+            maxHeight: "100%",
+            justifyContent: "center",
           }}
         >
           <Box
@@ -204,9 +205,11 @@ export default function Login() {
                     variant="outlined"
                     required
                     fullWidth
-                    type={showPassword ? 'text' : 'password'}
+                    type={showPassword ? "text" : "password"}
                     error={passwordEmpty}
-                    helperText={passwordEmpty ? "Password cannot be empty." : ""}
+                    helperText={
+                      passwordEmpty ? "Password cannot be empty." : ""
+                    }
                     onChange={(e) => {
                       setPasswordEmpty(false);
                       setPassword(e.target.value);
@@ -249,7 +252,11 @@ export default function Login() {
                     xs
                     sx={{ display: "flex", alignItems: "flex-start" }}
                   >
-                    <Link href="/forgot-password" variant="body2" color="#F49A32">
+                    <Link
+                      href="/forgot-password"
+                      variant="body2"
+                      color="#F49A32"
+                    >
                       Forgot password?
                     </Link>
                   </Grid>
diff --git a/ludos/semantic-search/README.md b/ludos/semantic-search/README.md
new file mode 100644
index 00000000..e0ace9a3
--- /dev/null
+++ b/ludos/semantic-search/README.md
@@ -0,0 +1,6 @@
+# LUDOS Semantic Search Server
+
+## How to run?
+```WORKDIR=./ludos/semantic-search```<br/>
+1. Run ```docker compose up --build``` <br/>
+2. Now, the api is available with localhost:8000 base url.