diff --git a/frontend/src/components/Cell.jsx b/frontend/src/components/Cell.jsx
index edaaff3..ffbaf6a 100644
--- a/frontend/src/components/Cell.jsx
+++ b/frontend/src/components/Cell.jsx
@@ -36,7 +36,7 @@ const Cell = ({ cell, callbacks }) => {
     }
 
     return (
-        <Flex ref={setNodeRef} sx={theme => {
+        <Flex ref={setNodeRef} w='10vh' sx={theme => {
             let color = theme.colors.lime;
             return { backgroundColor: squareColor === 'b' ? '#769854' : '#e8edcd', aspectRatio: '1/1' }
         }} onClick={handleClick} bg={squareColor === 'w' ? "white" : "gray"} >
diff --git a/frontend/src/components/GameHistory.jsx b/frontend/src/components/GameHistory.jsx
index 3b2ec09..60b9dfd 100644
--- a/frontend/src/components/GameHistory.jsx
+++ b/frontend/src/components/GameHistory.jsx
@@ -52,8 +52,8 @@ const GameHistory = () => {
     }
 
     return (
-        <div style={{ width: '100%', userSelect: 'none' }}>
-            <ScrollArea h={400} scrollbarSize={6} >
+        <div style={{ width: '600px', userSelect: 'none' }}>
+            <ScrollArea h={'640px'} scrollbarSize={6} >
                 <Flex direction='column' align='start' w='100%'>
                     {gameHistoryJSX}
                 </Flex>
diff --git a/frontend/src/layout/MainLayout.jsx b/frontend/src/layout/MainLayout.jsx
index f5fb226..9e8f6d0 100644
--- a/frontend/src/layout/MainLayout.jsx
+++ b/frontend/src/layout/MainLayout.jsx
@@ -1,95 +1,129 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState } from "react";
 
-import { Outlet } from 'react-router-dom'
-import { AppShell, Burger, Container, Header, MediaQuery, Navbar, Paper, Text, createStyles, useMantineTheme } from '@mantine/core'
+import { Outlet } from "react-router-dom";
+import {
+  AppShell,
+  Burger,
+  Container,
+  Header,
+  MediaQuery,
+  Navbar,
+  Paper,
+  Text,
+  createStyles,
+  useMantineTheme,
+} from "@mantine/core";
 
-import UserDataContextProvider, { UserDataContext } from '../context/user-data-context';
-import MainLoader from '../components/MainLoader';
-import NavbarLinks from '../components/NavbarLinks';
-import Logout from '../components/Logout';
+import UserDataContextProvider, {
+  UserDataContext,
+} from "../context/user-data-context";
+import MainLoader from "../components/MainLoader";
+import NavbarLinks from "../components/NavbarLinks";
+import Logout from "../components/Logout";
 
 const useStyles = createStyles(() => ({
-    body: {
-        width: '100%',
-        height: '100%'
-
-    },
-    root: {
-        width: '100%',
-        height: '100vh'
-
-    },
-    main: {
-        width: '100%',
-        height: '100vh'
-    }
-}))
+  body: {
+    width: "100%",
+    height: "100%",
+  },
+  root: {
+    width: "100%",
+    height: "100vh",
+  },
+  main: {
+    width: "100%",
+    height: "100vh",
+  },
+}));
 
 const MainLayout = () => {
-    const { classes } = useStyles();
-    const theme = useMantineTheme();
-    const [opened, setOpened] = useState(false);
-    const { isLoggedIn, errorMessage } = useContext(UserDataContext);
+  const { classes } = useStyles();
+  const theme = useMantineTheme();
+  const [opened, setOpened] = useState(false);
+  const { isLoggedIn, errorMessage } = useContext(UserDataContext);
 
-    if (!isLoggedIn) {
-        return <MainLoader errorMessage={errorMessage} />
-    }
+  if (!isLoggedIn) {
+    return <MainLoader errorMessage={errorMessage} />;
+  }
 
-    return (
-        <UserDataContextProvider>
-            <Paper>
-                <AppShell classNames={{
-                    body: classes.body,
-                    root: classes.root,
-                    main: classes.main
-                }}
-                    styles={{
-                        main: {
-                            background: theme.colorScheme === 'dark' ? '#302e2a' : theme.colors.gray[0]
-                        },
-                        body: {
-                            textAlign: 'center'
-                        }
-                    }}
-                    layout='alt'
-                    navbar={
-                        <Navbar py="md" px="0" hiddenBreakpoint="md" sx={{ backgroundColor: '#262523' }} hidden={!opened} width={{ md: 150 }}>
-                            <Navbar.Section>
-                                <Text size={30} weight={700}>Chess</Text>
-                            </Navbar.Section>
-                            <Navbar.Section grow mt="md">
-                                <NavbarLinks />
-                            </Navbar.Section>
-                            <Navbar.Section >
-                                <Logout />
-                            </Navbar.Section>
-                        </Navbar>
-                    }
-                    header={
-                        <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
-                            <Header zIndex={1000} p="md">
-                                <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
-                                    <Burger
-                                        opened={opened}
-                                        onClick={() => setOpened((o) => !o)}
-                                        size="sm"
-                                        color={theme.colors.gray[6]}
-                                        mr="xl"
-                                    />
-
-                                    <Text>Application header</Text>
-                                </div>
-                            </Header>
-                        </MediaQuery>
-                    }
+  return (
+    <UserDataContextProvider>
+      <Paper>
+        <AppShell
+          classNames={{
+            body: classes.body,
+            root: classes.root,
+            main: classes.main,
+          }}
+          styles={{
+            main: {
+              background:
+                theme.colorScheme === "dark" ? "#302e2a" : theme.colors.gray[0],
+            },
+            body: {
+              textAlign: "center",
+            },
+          }}
+          layout="alt"
+          navbar={
+            <Navbar
+              py="md"
+              px="0"
+              hiddenBreakpoint="md"
+              sx={{ backgroundColor: "#262523" }}
+              hidden={!opened}
+              width={{ md: 150 }}
+            >
+              <Navbar.Section>
+                <Text size={30} weight={700}>
+                  Chess
+                </Text>
+              </Navbar.Section>
+              <Navbar.Section grow mt="md">
+                <NavbarLinks />
+              </Navbar.Section>
+              <Navbar.Section>
+                <Logout />
+              </Navbar.Section>
+            </Navbar>
+          }
+          header={
+            <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+              <Header zIndex={1000} p="md">
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    height: "100%",
+                  }}
                 >
-                    <Container size="100%" px={{ 'md': '10px', 'lg': '30px' }} >
-                        <Outlet />
-                    </Container>
-                </AppShell>
-            </Paper>
-        </UserDataContextProvider>
-    );
-}
+                  <Burger
+                    opened={opened}
+                    onClick={() => setOpened((o) => !o)}
+                    size="sm"
+                    color={theme.colors.gray[6]}
+                    mr="xl"
+                  />
 
-export default MainLayout
\ No newline at end of file
+                  <Text>Application header</Text>
+                </div>
+              </Header>
+            </MediaQuery>
+          }
+          padding
+        >
+          <Container
+            size="100%"
+            style={{ height: "100vh" }}
+            pl={{ md: 150 }}
+            pr={{ md: 0 }}
+          >
+            <Outlet />
+          </Container>
+        </AppShell>
+      </Paper>
+    </UserDataContextProvider>
+  );
+};
+
+export default MainLayout;
diff --git a/frontend/src/pages/Chess/ChessBoard.jsx b/frontend/src/pages/Chess/ChessBoard.jsx
index 04988cc..2c19f33 100644
--- a/frontend/src/pages/Chess/ChessBoard.jsx
+++ b/frontend/src/pages/Chess/ChessBoard.jsx
@@ -67,11 +67,11 @@ const ChessBoard = ({ callbacks }) => {
     if (myColor === 'w') {
         return (
             <DndContext onDragEnd={dragEndCallback}>
-                <Flex className={classes.chessboard} sx={{ userSelect: 'none' }}>
+                <Flex h='80vh' sx={{ userSelect: 'none' }}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {
                             return (
-                                <Flex className={classes.boardrow} key={rowIndex * 2}>
+                                <Flex key={rowIndex * 2}>
                                     {row.map(cell => <Cell callbacks={{ pieceClickCallback: callbacks.pieceClickCallback }} key={cell.square} cell={cell} />)}
                                 </Flex>
                             )
@@ -83,11 +83,11 @@ const ChessBoard = ({ callbacks }) => {
     } else {
         return (
             <DndContext onDragEnd={dragEndCallback}>
-                <Flex className={classes.chessboard}>
+                <Flex h='80vh' sx={{userSelect:'none'}}>
                     <div>
                         {chessBoard.map((row, rowIndex) => {
                             return (
-                                <Flex className={classes.boardrow} key={rowIndex * 2}>
+                                <Flex key={rowIndex * 2}>
                                     {row.map(cell => <Cell callbacks={{ pieceClickCallback: callbacks.pieceClickCallback }} key={cell.square} cell={cell} />).reverse()}
                                 </Flex>
                             )
diff --git a/frontend/src/pages/Play/ChallengeFriend.jsx b/frontend/src/pages/Play/ChallengeFriend.jsx
index 8617fd9..00d03a2 100644
--- a/frontend/src/pages/Play/ChallengeFriend.jsx
+++ b/frontend/src/pages/Play/ChallengeFriend.jsx
@@ -13,12 +13,13 @@ const ChallengeFriend = () => {
 
     return (
         <Card
-            maw={450} sx={{
-                width: '100%',
-                height: '600px',
+            sx={{
+                width: '600px',
+                height: '80%',
                 textAlign: 'center',
                 backgroundColor: '#262523'
             }}
+            px='20px'
         >
             <Form action={`/play/friend/${friend_username}`} method='POST'>
                 <Flex align="center" direction="column" justify="center" gap="xs" my="lg">
diff --git a/frontend/src/pages/Play/ChessGameComputer.jsx b/frontend/src/pages/Play/ChessGameComputer.jsx
index 1d0d1ec..a8644a1 100644
--- a/frontend/src/pages/Play/ChessGameComputer.jsx
+++ b/frontend/src/pages/Play/ChessGameComputer.jsx
@@ -70,7 +70,7 @@ const ChessGameComputer = () => {
                 <Button mx='md' color='lime' onClick={modalFunctions.close}>OK</Button>
             </Modal>
             <Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
-                <Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
+                <Flex gap="xs" justify='center' h='100vh' align='start' wrap='nowrap' direction='column' >
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <NavLink
                             style={{ width: "500px" }}
@@ -111,9 +111,9 @@ const ChessGameComputer = () => {
                     </div>
                 </Flex>
                 <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
-                    <Flex maw={450} sx={{
+                    <Flex maw={600} sx={{
                         width: '100%',
-                        height: '100%',
+                        height: '840px',
                         textAlign: 'center',
                         borderRadius: '10px',
                         backgroundColor: '#272623'
diff --git a/frontend/src/pages/Play/ChessGameMultiplayer.jsx b/frontend/src/pages/Play/ChessGameMultiplayer.jsx
index 58f7aac..04f69dc 100644
--- a/frontend/src/pages/Play/ChessGameMultiplayer.jsx
+++ b/frontend/src/pages/Play/ChessGameMultiplayer.jsx
@@ -109,11 +109,10 @@ const ChessGameMultiplayer = () => {
                 <Button color='lime' onClick={exitGame}>Go back</Button>
                 <Button mx='md' color='lime' onClick={modalFunctions.close}>OK</Button>
             </Modal>
-            <Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
-                <Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Flex gap="xl" justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
+                <Flex gap="xs" justify='center' h='100vh' align='start' wrap='nowrap' direction='column' >
+                    <div style={{ width:"100%", height:'6vh', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <NavLink
-                            style={{ width: "500px" }}
                             p="2px"
                             label={isWaiting ? "Waiting for opponent..." : opponent}
                             icon={<Avatar radius="3px" >
@@ -125,19 +124,19 @@ const ChessGameMultiplayer = () => {
                     </div>
                     {
                         // TODO: handle isWaiting state
-                        false ?
-                            <>
-                                <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-                                    <Image width={600} miw={480} src="/src/assets/images/chess_board.png" />
-                                </MediaQuery>
-                                <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
-                                    <Image width="100%" maw={540} src="/src/assets/images/chess_board.png" />
-                                </MediaQuery>
-                            </>
-                            :
-                            <ChessBoard callbacks={{ pieceDropCallback, pieceClickCallback }} />
+                        // false ?
+                        //     <>
+                        //         <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+                        //             <Image width={600} miw={480} src="/src/assets/images/chess_board.png" />
+                        //         </MediaQuery>
+                        //         <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
+                        //             <Image width="100%" maw={540} src="/src/assets/images/chess_board.png" />
+                        //         </MediaQuery>
+                        //     </>
+                        //     :
+                        <ChessBoard callbacks={{ pieceDropCallback, pieceClickCallback }} />
                     }
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div style={{ width:"100%", height:'6vh', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <NavLink
                             style={{ width: "500px" }}
                             p="2px"
@@ -151,9 +150,9 @@ const ChessGameMultiplayer = () => {
                     </div>
                 </Flex>
                 <MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
-                    <Flex maw={450} sx={{
+                    <Flex maw={600} sx={{
                         width: '100%',
-                        height: '100%',
+                        height: '840px',
                         textAlign: 'center',
                         borderRadius: '10px',
                         backgroundColor: '#272623'
diff --git a/frontend/src/pages/Play/Computer.jsx b/frontend/src/pages/Play/Computer.jsx
index d00b9cf..6ddc683 100644
--- a/frontend/src/pages/Play/Computer.jsx
+++ b/frontend/src/pages/Play/Computer.jsx
@@ -6,13 +6,14 @@ const Computer = () => {
   
   return (
     <Card
-      maw={450}
+      maw={600}
       sx={{
         width: "100%",
-        height: "600px",
+        height: "75vh",
         textAlign: "center",
         backgroundColor: "#262523",
       }}
+      p={'30px'}
     >
       <Flex align="center" justify="center" gap="xs" my="lg">
         <Image
diff --git a/frontend/src/pages/Play/Layout.jsx b/frontend/src/pages/Play/Layout.jsx
index 26b73e0..4ae9d86 100644
--- a/frontend/src/pages/Play/Layout.jsx
+++ b/frontend/src/pages/Play/Layout.jsx
@@ -9,8 +9,8 @@ const Layout = () => {
     const user = getUserData();
     let username = user.username;
     return (
-        <Flex gap="xl" miw={360} justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
-            <Flex gap="xs" justify='center' align='start' wrap='nowrap' direction='column' >
+        <Flex h='100vh' justify='center' align='center' wrap='nowrap' mt={{ base: '50px', sm: '0px' }} direction={{ base: 'column', lg: 'row' }}>
+            <Flex gap="xs" h={'95vh'} justify='center' align='start' wrap='nowrap' direction='column' >
                 <NavLink
                     p="2px"
                     label={"opponent"}
@@ -18,7 +18,7 @@ const Layout = () => {
                     description={"description"}
                 />
                 <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
-                    <img draggable={false} width={600} miw={480} src="/src/assets/images/chess_board.png" />
+                    <img draggable={false} height={'100%'} style={{aspectRatio:'1'}} miw={480} src="/src/assets/images/chess_board.png" />
                 </MediaQuery>
                 <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
                     <img draggable={false} width="100%" maw={540} src="/src/assets/images/chess_board.png" />
diff --git a/frontend/src/pages/Play/Play.jsx b/frontend/src/pages/Play/Play.jsx
index 0e7ba29..b6c2307 100644
--- a/frontend/src/pages/Play/Play.jsx
+++ b/frontend/src/pages/Play/Play.jsx
@@ -6,13 +6,13 @@ import { Card, Flex, Image, NavLink, Title } from '@mantine/core'
 
 const Play = () => {
     return (
-        <Card maw={450} sx={{
-            width: '100%',
-            height: '600px',
+        <Card sx={{
+            width: '540px',
+            height: '75%',
             textAlign: 'center',
             backgroundColor: '#262523'
         }}>
-            <Flex gap="5px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
+            <Flex gap="15px" px="20px" justify='center' align='center' wrap='nowrap' direction='column'>
                 <Title order={2} >Play Chess</Title>
                 <Image my="md" withPlaceholder width={200} height={120} src={null} />
                 {
@@ -32,6 +32,7 @@ const CardItem = ({ label, description, src, to }) => {
             icon={<Image src={src} width={50} />}
             description={description}
             sx={{ backgroundColor: '#1f1f1a', borderRadius: '5px' }}
+            p='20px'
         />
     )
 }
diff --git a/frontend/src/pages/Play/PlayFriend.jsx b/frontend/src/pages/Play/PlayFriend.jsx
index f51b7b9..2ede59a 100644
--- a/frontend/src/pages/Play/PlayFriend.jsx
+++ b/frontend/src/pages/Play/PlayFriend.jsx
@@ -22,12 +22,13 @@ const PlayFriend = () => {
                 </div>
             </Modal>
             <Card
-                maw={450} sx={{
-                    width: '100%',
-                    height: '600px',
+                sx={{
+                    width: '600px',
+                    height: '90%',
                     textAlign: 'center',
                     backgroundColor: '#262523'
                 }}
+                px='30px'
             >
                 <Flex align="center" justify="center" gap="xs" my="lg">
                     <Image width="30px" src="https://www.chess.com/bundles/web/images/color-icons/handshake.fb30f50b.svg" />