Enhance layout

src/components/SignIn&UpCard.tsx

@@ -1,21 +1,40 @@
 import { styled } from '@mui/material/styles'
+import { createTheme } from '@mui/material/styles'
 import MuiCard from '@mui/material/Card'
 
+export const authTheme = createTheme({
+    palette: {
+        primary: {
+            main: '#27b722',
+            light: '#63ce5c',
+            dark: '#1b8317',
+            contrastText: '#000000',
+        },
+    },
+})
+
 export const SignInAndUpCard = styled(MuiCard)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     alignSelf: 'center',
-    width: '100%',
+    width: 'min(calc(100% - 3rem), 450px)',
     padding: theme.spacing(4),
     gap: theme.spacing(2),
     margin: 'auto',
+    borderColor: 'var(--secondary-component-color)',
+    '& a': {
+        color: theme.palette.primary.main,
+        '&:hover': {
+            color: theme.palette.primary.dark,
+        },
+    },
     boxShadow:
-        'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
+        '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)',
     [theme.breakpoints.up('sm')]: {
         width: '450px',
     },
     ...theme.applyStyles('dark', {
         boxShadow:
-            'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px',
+            '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)',
     }),
 }))

src/components/WishlistCard.tsx

@@ -6,17 +6,16 @@ export const WishlistCard = styled(MuiCard)(({ theme }) => ({
     flexDirection: 'column',
     width: '100%',
     boxSizing: 'border-box',
-    padding: theme.spacing(4),
+    padding: theme.spacing(2),
     gap: theme.spacing(2),
     // margin: 'auto',
     boxShadow:
-        'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
+        '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)',
     [theme.breakpoints.up('sm')]: {
-        width: '100%',
-        maxWidth: '900px',
+        padding: theme.spacing(4),
     },
     ...theme.applyStyles('dark', {
         boxShadow:
-            'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px',
+            '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)',
     }),
 }))

src/components/activegamecard.tsx

@@ -39,7 +39,7 @@ export default function ActiveGameCard({ game, onAddToWishlist }: ActiveGameCard
                 <Card className="activeGameInfoCard">
                     <CardContent className="activeGameInfoContent">
                         <Box className="activeGameInfoHeader">
-                            <Typography className="activeGameTitle" component="h1">
+                            <Typography className="activeGameTitle" component="h2">
                                 {game.name}
                             </Typography>
                             <Box className="activeGamePriceGroup">

src/components/footer.tsx

@@ -1,12 +1,16 @@
 import '../css/footer.css'
-import { Gamepad2 } from 'lucide-react'
+import gameStartLogo from '../assets/logo_gamestart_transparent.png'
+import { Divider } from '@mui/material'
 
 export default function Footer() {
     return (
-        <footer>
-            <h1>
-                <Gamepad2 id="console" />© 2026 GameStart
-            </h1>
-        </footer>
+        <div className="footerWrapper">
+            <Divider/>
+            <footer>
+                <h1>
+                    <img className="footerBrandLogo" src={gameStartLogo} alt="GameStart" />© 2026
+                </h1>
+            </footer>
+        </div>
     )
 }

src/components/header.tsx

@@ -1,6 +1,8 @@
-import { Link } from 'react-router-dom'
+import { Link, NavLink } from 'react-router-dom'
 import '../css/header.css'
-import { House, UserRound, Search, Sparkles, Gamepad2, LogIn } from 'lucide-react'
+import { House, UserRound, Search, Sparkles, LogIn } from 'lucide-react'
+import gameStartLogo from '../assets/logo_gamestart_transparent.png'
+import Divider from '@mui/material/Divider';
 
 export default function Header() {
     const navigationLinks = [
@@ -13,22 +15,29 @@ export default function Header() {
     ]
 
     return (
-        <header>
+        <div>
+            <header>
             <div id="logo">
-                <h1>
-                    <Gamepad2 id="console" />
-                    GameStart
-                </h1>
+                <Link to="/" aria-label="GameStart home">
+                    <img className="headerBrandLogo" src={gameStartLogo} alt="GameStart" />
+                </Link>
             </div>
 
             <div id="navigationMenue">
                 {navigationLinks.map((link) => (
-                    <Link key={link.to} to={link.to}>
+                    <NavLink
+                        key={link.to}
+                        to={link.to}
+                        end
+                        className={({ isActive }) => (isActive ? 'is-active' : undefined)}
+                    >
                         {link.icon}
                         {link.label}
-                    </Link>
+                    </NavLink>
                 ))}
             </div>
-        </header>
+            </header>
+            <Divider/>
+        </div>
     )
 }

src/components/pageheading.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import '../css/pageheading.css'
+
+type PageHeadingProps = {
+    title: string
+    actions?: ReactNode
+    showBack?: boolean
+}
+
+export default function PageHeading({ title, actions, showBack = true }: PageHeadingProps) {
+    const navigate = useNavigate()
+
+    const handleBack = () => {
+        const historyIndex = window.history.state?.idx
+        if (typeof historyIndex === 'number' && historyIndex > 0) {
+            navigate(-1)
+        } else {
+            navigate('/')
+        }
+    }
+
+    return (
+        <div className="pageHeading">
+            <div className="pageHeadingTitleGroup">
+                {showBack ? (
+                    <button
+                        className="pageHeadingBackButton"
+                        type="button"
+                        aria-label="Go back"
+                        title="Go back"
+                        onClick={handleBack}
+                    >
+                        <ArrowLeft aria-hidden="true" />
+                    </button>
+                ) : (
+                    <span className="pageHeadingBackSlot" aria-hidden="true" />
+                )}
+                <h1 className="pageHeadingTitle">{title}</h1>
+            </div>
+            {actions && <div className="pageHeadingActions">{actions}</div>}
+        </div>
+    )
+}

src/css/activegamecard.css

@@ -1,8 +1,8 @@
 .activeGameLayout {
     display: grid;
     gap: 1.25rem;
-    width: min(calc(100% - 2rem), 76rem);
-    margin: 1.25rem auto;
+    width: 100%;
+    margin: 1.25rem 0;
 }
 
 .activeGamePosterCard {
@@ -13,7 +13,7 @@
     overflow: hidden;
     border-radius: 0.375rem;
     background-color: var(--primary-background-color);
-    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+    box-shadow: 0 2px 8px var(--box-shadow-color);
 }
 
 .activeGamePoster {
@@ -30,7 +30,7 @@
     z-index: 1;
     top: 0.75rem;
     right: 0.75rem;
-    background-color: var(--primary-component-color);
+    background-color: var(--primary-background-color);
     color: var(--primary-text-color);
     text-transform: none;
 }
@@ -51,7 +51,7 @@
     min-width: 0;
     background-color: var(--primary-component-color) !important;
     color: var(--primary-text-color);
-    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
+    box-shadow: 0 2px 8px var(--box-shadow-color);
 }
 
 .activeGameInfoContent.MuiCardContent-root,
@@ -102,7 +102,7 @@
 }
 
 .activeGameSaleChip.MuiChip-root {
-    background-color: var(--secondary-component-color);
+    background-color: var(--primary-background-color);
     color: var(--primary-text-color);
     font-weight: 700;
 }
@@ -130,7 +130,7 @@
 
 .activeGameGenreChip.MuiChip-root {
     border-color: transparent;
-    background-color: var(--secondary-component-color);
+    background-color: var(--primary-background-color);
     color: var(--primary-text-color);
 }
 
@@ -156,7 +156,7 @@
 
 .activeGameReviewsContent .MuiButton-root {
     align-self: flex-start;
-    background-color: var(--secondary-component-color);
+    background-color: var(--primary-background-color);
     color: var(--primary-text-color);
     text-transform: none;
 }
@@ -169,7 +169,6 @@
 
 @media (max-width: 48rem) {
     .activeGameLayout {
-        width: min(calc(100% - 1.5rem), 76rem);
         margin-block: 1rem;
         gap: 1.25rem;
     }

src/css/footer.css

@@ -1,22 +1,28 @@
+ .footerWrapper {
+    width: 100%;
+    flex: 0 0 auto;
+    margin-top: auto;
+}
+
 footer {
-    height: 8rem;
+    height: 4rem;
+    flex: 0 0 4rem;
     width: 100%;
     background-color: var(--secondary-background-color);
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: auto;
 }
 
 footer h1 {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin: 0;
-    font-size: 2.5rem;
+    font-size: 1rem;
 }
 
-#console {
-    height: 6rem;
+.footerBrandLogo {
+    height: 1.5rem;
     width: auto;
 }

src/css/gamepage.css

@@ -5,13 +5,14 @@
 }
 
 .game-page {
-    width: min(calc(100% - 6rem), 68rem);
+    box-sizing: border-box;
+    width: min(calc(100% - 3rem), 68rem);
     margin: 0 auto;
-    padding-top: 1rem;
+    padding-left: 3.25rem;
 }
 
-@media (max-width: 48rem) {
+@media (max-width: 43.75rem) {
     .game-page {
-        width: min(calc(100% - 1rem), 68rem);
+        width: min(calc(100% - 2rem), 32rem);
     }
 }

src/css/global.css

@@ -1,10 +1,12 @@
 :root {
     /* Colors */
     --primary-background-color: #ffffff;
-    --secondary-background-color: #0077b3;
 
-    --primary-component-color: #a3d1e0;
-    --secondary-component-color: #f0f8ff;
+    --primary-component-color: #7BCF73;
+    --secondary-component-color: #DAF1D7;
+
+    --primary-accent-color: #27b722;
+    --box-shadow-color: #DAF1D7;
 
     /* Text */
     --primary-text-color: #000000;

src/css/header.css

@@ -18,8 +18,13 @@ header {
     margin: 0;
 }
 
-#console {
-    height: 4rem;
+#logo a {
+    display: flex;
+    align-items: center;
+}
+
+.headerBrandLogo {
+    height: 2.5rem;
     width: auto;
 }
 
@@ -39,6 +44,10 @@ header {
     text-decoration: none;
 }
 
+#navigationMenue a.is-active {
+    color: var(--primary-component-color);
+}
+
 header > button {
     margin-left: 0.5rem;
     margin-right: 1rem;

src/css/mainpage.css

@@ -7,11 +7,16 @@
 .main-page {
     width: min(calc(100% - 3rem), 68rem);
     margin: 0 auto;
-    padding: clamp(2rem, 8vh, 4rem) 0;
+    padding: 1.75rem 0 clamp(2rem, 8vh, 4rem);
 }
 
-.featured-games h1 {
-    margin: 0 0 1.25rem;
+.featured-games-title {
+    display: flex;
+    align-items: center;
+    min-height: 2.5rem;
+    margin: 0 0 1.5rem;
+    font-size: 2rem;
+    line-height: 1.2;
 }
 
 .featured-games-grid {
@@ -23,7 +28,11 @@
 @media (max-width: 43.75rem) {
     .main-page {
         width: min(calc(100% - 2rem), 32rem);
-        padding: clamp(1.5rem, 6vh, 2.5rem) 0;
+        padding: 1.25rem 0 clamp(1.5rem, 6vh, 2.5rem);
+    }
+
+    .featured-games-title {
+        font-size: 1.75rem;
     }
 
     .featured-games-grid {