4 files changed, 21 insertions, 30 deletions

diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index a8b7826..b7bd534 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -28,12 +28,12 @@ const About: React.FC = () => {
 
 
     return (
-        <div id="about">
+        <main>
             <Helmet>
                 <title>LPHUB | About</title>
             </Helmet>
             <ReactMarkdown>{aboutText}</ReactMarkdown>
-        </div>
+        </main>
     );
 };
 
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index 15cc891..5e0d5bf 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -3,43 +3,26 @@ import { Helmet } from 'react-helmet';
 
 import GameEntry from '@components/GameEntry';
 import { Game } from '@customTypes/Game';
-import "@css/Maps.css"
+import gamesCSS from "@css/Games.module.css";
 
 interface GamesProps {
     games: Game[];
 }
 
 const Games: React.FC<GamesProps> = ({ games }) => {
-
-    const _page_load = () => {
-        const loaders = document.querySelectorAll(".loader");
-        loaders.forEach((loader) => {
-            (loader as HTMLElement).style.display = "none";
-        });
-    }
-
-    React.useEffect(() => {
-        document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
-            game.innerHTML = "";
-        });
-        _page_load();
-    }, []);
-
     return (
-        <div className='games-page'>
+        <main>
             <Helmet>
                 <title>LPHUB | Games</title>
             </Helmet>
             <section>
-                <div className='games-page-content'>
-                    <div className='games-page-item-content'>
-                        {games.map((game, index) => (
-                            <GameEntry game={game} key={index} />
-                        ))}
-                    </div>
+                                <div className={gamesCSS.content}>
+                    {games.map((game, index) => (
+                        <GameEntry game={game} key={index} />
+                    ))}
                 </div>
             </section>
-        </div>
+        </main>
     );
 };
 
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 76f9a52..b9e17f7 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -88,7 +88,13 @@ const Maplist: React.FC = () => {
     }
   }, [gameChapters])
 
-
+  useEffect(() => {
+          const queryParams = new URLSearchParams(location.search);
+          const cat = queryParams.get("cat");
+          if (cat != null) {
+                  setCatNum(parseFloat(cat) - 1);
+          }
+  }, [location])
 
   return (
     <main>
@@ -121,7 +127,9 @@ const Maplist: React.FC = () => {
                     )?.portal_count
                   }
                 </h2>
-                <h3>portals</h3>
+                                <h3>{game?.category_portals.find(
+                                        (obj) => obj.category.id === catNum + 1)!.portal_count == 1 ? "portal" : "portals"
+                                }</h3>
               </div>
               <div className="game-header-categories">
                 {game?.category_portals.map((cat, index) => (
@@ -160,7 +168,7 @@ const Maplist: React.FC = () => {
                         <span>{map.is_disabled ? map.category_portals[0].portal_count : map.category_portals.find(
                           (obj) => obj.category.id === catNum + 1
                         )?.portal_count}</span>
-                        <span>portals</span>
+                                        <span>{map.category_portals.find((obj) => obj.category.id === catNum + 1)?.portal_count == 1 ? "portal" : "portals"}</span>
                       </div>
                     </div>
                     <div className="difficulty-bar">
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 48233bf..ee56999 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -109,7 +109,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
   };
 
   return (
-    <div>
+    <div style={{position: "absolute", width: "calc(100% - 50px)", left: "350px"}}>
       <Helmet>
         <title>LPHUB | {profile.user_name}</title>
         <meta name="description" content={profile.user_name} />