diff --git a/apps/client/src/app/Router.tsx b/apps/client/src/app/Router.tsx
index bf9827e..68e1e24 100644
--- a/apps/client/src/app/Router.tsx
+++ b/apps/client/src/app/Router.tsx
@@ -22,7 +22,7 @@ export const Router = () => {
     return (
         <BrowserRouter>
             <Routes>
-                <Route
+                {/* <Route
                     element={
                         <LoggedOutRoute>
                             <BaseScreen />
@@ -48,7 +48,7 @@ export const Router = () => {
                         path={`${ROUTES.ACTIVATE_ACCOUNT}/:token`}
                         element={<ActivateAccount />}
                     />
-                </Route>
+                </Route> */}
 
                 <Route
                     element={
diff --git a/apps/client/src/app/sceens/ActivateAccount/ActivateAccount.style.ts b/apps/client/src/app/sceens/ActivateAccount/ActivateAccount.style.ts
new file mode 100644
index 0000000..afa66e2
--- /dev/null
+++ b/apps/client/src/app/sceens/ActivateAccount/ActivateAccount.style.ts
@@ -0,0 +1,29 @@
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import styled from '@emotion/styled';
+
+export const StyledPageBox = styled(Box)`
+    margin: 80px 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+`;
+export const StyledAvatar = styled(Avatar)`
+    margin-bottom: 30px;
+    background-color: #4caf50;
+    width: 70px;
+    height: 70px;
+    @media (max-width: 480px) {
+        width: 50px;
+        height: 50px;
+    }
+`;
+export const StyledAvatarCheck = styled(CheckRoundedIcon)`
+    font-size: 48px;
+    color: #fff;
+    @media (max-width: 480px) {
+        font-size: 36px;
+    }
+`;
diff --git a/apps/client/src/app/sceens/ActivateAccount/ActivateAccount.tsx b/apps/client/src/app/sceens/ActivateAccount/ActivateAccount.tsx
index e29d6dd..017cac8 100644
--- a/apps/client/src/app/sceens/ActivateAccount/ActivateAccount.tsx
+++ b/apps/client/src/app/sceens/ActivateAccount/ActivateAccount.tsx
@@ -1,3 +1,19 @@
+import Typography from '@mui/material/Typography';
+import {
+    StyledPageBox,
+    StyledAvatar,
+    StyledAvatarCheck,
+} from './ActivateAccount.style';
+
 export const ActivateAccount = () => {
-    return <div>ActivateAccount</div>;
+    return (
+        <StyledPageBox>
+            <StyledAvatar>
+                <StyledAvatarCheck />
+            </StyledAvatar>
+            <Typography component='h1' variant='h4'>
+                Congrats, successfully confirmation mail
+            </Typography>
+        </StyledPageBox>
+    );
 };
diff --git a/apps/client/src/app/sceens/Home/Home.style.ts b/apps/client/src/app/sceens/Home/Home.style.ts
new file mode 100644
index 0000000..488b9f0
--- /dev/null
+++ b/apps/client/src/app/sceens/Home/Home.style.ts
@@ -0,0 +1,47 @@
+import RestaurantMenuRoundedIcon from '@mui/icons-material/RestaurantMenuRounded';
+import { Box, Fab, Typography } from '@mui/material';
+import Button from '@mui/material/Button';
+import { NavLink } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+export const StyledPageBox = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 40px;
+    @media (max-width: 480px) {
+        margin-top: 80px;
+    }
+`;
+export const StyledLogoBox = styled(Box)`
+    display: flex;
+    flex-direction: row;
+    margin-top: 20px;
+    align-items: center;
+`;
+export const StyledFabLogo = styled(Fab)`
+    width: 50px;
+    height: 50px;
+    margin-left: 20px;
+    cursor: unset;
+`;
+export const StyledIconLogo = styled(RestaurantMenuRoundedIcon)`
+    font-size: 42px;
+    color: #fff;
+`;
+export const StyledFirstTypography = styled(Typography)`
+    text-align: center;
+    margin: 20px auto;
+`;
+export const StyledLinkText = styled(NavLink)`
+    text-decoration: none;
+    width: 90%;
+`;
+export const StyledNavButton = styled(Button)`
+    width: 100%;
+    color: #fff;
+`;
+export const StyledSecondTypography = styled(Typography)`
+    text-align: center;
+    margin: 10px auto;
+`;
diff --git a/apps/client/src/app/sceens/Home/Home.tsx b/apps/client/src/app/sceens/Home/Home.tsx
index 192e8a8..0441642 100644
--- a/apps/client/src/app/sceens/Home/Home.tsx
+++ b/apps/client/src/app/sceens/Home/Home.tsx
@@ -1,51 +1,16 @@
 import RestaurantMenuRoundedIcon from '@mui/icons-material/RestaurantMenuRounded';
-import { Box, Fab, Typography } from '@mui/material';
-import Button from '@mui/material/Button';
-import { NavLink } from 'react-router-dom';
+import { Typography } from '@mui/material';
 import { ROUTES } from '../../routes/Routes';
-import styled from '@emotion/styled';
-
-const StyledPageBox = styled(Box)`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 40px;
-    @media (max-width: 480px) {
-        margin-top: 80px;
-    }
-`;
-const StyledLogoBox = styled(Box)`
-    display: flex;
-    flex-direction: row;
-    margin-top: 20px;
-    align-items: center;
-`;
-const StyledFabLogo = styled(Fab)`
-    width: 50px;
-    height: 50px;
-    margin-left: 20px;
-    cursor: unset;
-`;
-const StyledIconLogo = styled(RestaurantMenuRoundedIcon)`
-    font-size: 42px;
-    color: #fff;
-`;
-const StyledFirstTypography = styled(Typography)`
-    text-align: center;
-    margin: 20px auto;
-`;
-const StyledLinkText = styled(NavLink)`
-    text-decoration: none;
-    width: 90%;
-`;
-const StyledNavButton = styled(Button)`
-    width: 100%;
-    color: #fff;
-`;
-const StyledSecondTypography = styled(Typography)`
-    text-align: center;
-    margin: 10px auto;
-`;
+import {
+    StyledPageBox,
+    StyledLogoBox,
+    StyledFabLogo,
+    StyledIconLogo,
+    StyledFirstTypography,
+    StyledLinkText,
+    StyledNavButton,
+    StyledSecondTypography,
+} from './Home.style';
 
 export const Home = () => {
     return (
diff --git a/apps/client/src/app/sceens/Login/Login.style.ts b/apps/client/src/app/sceens/Login/Login.style.ts
new file mode 100644
index 0000000..f1b9aad
--- /dev/null
+++ b/apps/client/src/app/sceens/Login/Login.style.ts
@@ -0,0 +1,64 @@
+import Lock from '@mui/icons-material/Lock';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { NavLink } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+export const StyledPageBox = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+export const StyledSectionBox = styled(Box)`
+    margin: 80px 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 90%;
+`;
+export const StyledAvatar = styled(Avatar)`
+    margin: 8px;
+    background-color: #4caf50;
+    width: 70px;
+    height: 70px;
+    @media (max-width: 480px) {
+        width: 40px;
+        height: 40px;
+    }
+`;
+export const StyledAvatarLock = styled(Lock)`
+    font-size: 48px;
+    color: #fff;
+    @media (max-width: 480px) {
+        font-size: 24px;
+    }
+`;
+export const StyledTypography = styled(Typography)`
+    @media (max-width: 480px) {
+        font-size: 24px;
+    }
+`;
+export const StyledFormTextField = styled(TextField)`
+    width: 100%;
+    margin: 10px 0;
+`;
+export const StyledErrorDiv = styled(Box)`
+    color: #ff0000;
+`;
+export const StyledSignButton = styled(Button)`
+    width: 100%;
+    color: #fff;
+`;
+export const StyledBottomSection = styled(Box)`
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 30px;
+`;
+export const StyledNavLink = styled(NavLink)`
+    color: #000;
+`;
diff --git a/apps/client/src/app/sceens/Login/Login.tsx b/apps/client/src/app/sceens/Login/Login.tsx
index d2f7fe7..0388781 100644
--- a/apps/client/src/app/sceens/Login/Login.tsx
+++ b/apps/client/src/app/sceens/Login/Login.tsx
@@ -1,3 +1,65 @@
+import {
+    StyledPageBox,
+    StyledSectionBox,
+    StyledAvatar,
+    StyledAvatarLock,
+    StyledTypography,
+    StyledFormTextField,
+    StyledErrorDiv,
+    StyledSignButton,
+    StyledBottomSection,
+    StyledNavLink,
+} from './Login.style';
+
+import { ROUTES } from '../../routes/Routes';
+import { useState } from 'react';
+
 export const Login = () => {
-    return <div>Login</div>;
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    return (
+        <StyledPageBox>
+            <StyledSectionBox>
+                <StyledAvatar>
+                    <StyledAvatarLock />
+                </StyledAvatar>
+
+                <StyledTypography variant='h4'>Sign in</StyledTypography>
+
+                <form onSubmit={() => console.log('sent')}>
+                    <StyledFormTextField
+                        variant='outlined'
+                        required
+                        label='Email'
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        autoComplete='email'
+                    />
+                    <StyledFormTextField
+                        variant='outlined'
+                        required
+                        label='Password'
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        type='password'
+                        autoComplete='current-password'
+                    />
+                    <StyledErrorDiv className='invalid-feedback'></StyledErrorDiv>
+                    <StyledSignButton variant='contained' type='submit'>
+                        Sign In
+                    </StyledSignButton>
+                </form>
+
+                <StyledBottomSection>
+                    <StyledNavLink to={ROUTES.REQUEST_PASSWORD_RESET}>
+                        Forgot password?
+                    </StyledNavLink>
+                    <StyledNavLink to={ROUTES.REGISTER}>
+                        Don't have an account? Sign up
+                    </StyledNavLink>
+                </StyledBottomSection>
+            </StyledSectionBox>
+        </StyledPageBox>
+    );
 };
diff --git a/apps/client/src/app/sceens/Register/Register.style.ts b/apps/client/src/app/sceens/Register/Register.style.ts
new file mode 100644
index 0000000..1d49895
--- /dev/null
+++ b/apps/client/src/app/sceens/Register/Register.style.ts
@@ -0,0 +1,71 @@
+import Lock from '@mui/icons-material/Lock';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import styled from '@emotion/styled';
+import { NavLink } from 'react-router-dom';
+
+export const StyledPageBox = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+export const StyledSectionBox = styled(Box)`
+    margin: 80px 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 90%;
+`;
+export const StyledAvatar = styled(Avatar)`
+    margin: 8px;
+    background-color: #4caf50;
+    width: 70px;
+    height: 70px;
+    @media (max-width: 480px) {
+        width: 40px;
+        height: 40px;
+    }
+`;
+export const StyledAvatarLock = styled(Lock)`
+    font-size: 48px;
+    color: #fff;
+    @media (max-width: 480px) {
+        font-size: 24px;
+    }
+`;
+export const StyledInputsName = styled(Box)`
+    width: 100%;
+    display: ;flex;
+    flex-direciotn: row;
+    margin: 10px 0;
+`;
+export const StyledFormTextFieldName = styled(TextField)`
+    width: 50%;
+`;
+export const StyledFormTextField = styled(TextField)`
+    width: 100%;
+    margin: 10px 0;
+`;
+export const StyledFormTextFieldBirtday = styled(TextField)`
+    width: 100%;
+    margin: 10px 0;
+`;
+export const StyledErrorDiv = styled(Box)`
+    color: red;
+`;
+export const StyledButtonSign = styled(Button)`
+    width: 100%;
+    color: #fff;
+`;
+export const StyledSectionBottom = styled(Box)`
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    margin-top: 2rem;
+`;
+export const StyledNavLink = styled(NavLink)`
+    color: #000;
+`;
diff --git a/apps/client/src/app/sceens/Register/Register.tsx b/apps/client/src/app/sceens/Register/Register.tsx
index 09a9c8e..ce80fa6 100644
--- a/apps/client/src/app/sceens/Register/Register.tsx
+++ b/apps/client/src/app/sceens/Register/Register.tsx
@@ -1,3 +1,112 @@
+import Typography from '@mui/material/Typography';
+import {
+    StyledPageBox,
+    StyledSectionBox,
+    StyledAvatar,
+    StyledAvatarLock,
+    StyledInputsName,
+    StyledFormTextFieldName,
+    StyledFormTextField,
+    StyledFormTextFieldBirtday,
+    StyledErrorDiv,
+    StyledButtonSign,
+    StyledSectionBottom,
+    StyledNavLink,
+} from './Register.style';
+import { useState } from 'react';
+import { ROUTES } from '../../routes/Routes';
+
 export const Register = () => {
-    return <div>Register</div>;
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setlastName] = useState('');
+    const [email, setEmail] = useState('');
+    const [birthday, setBirthday] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+
+    return (
+        <StyledPageBox>
+            <StyledSectionBox>
+                <StyledAvatar>
+                    <StyledAvatarLock />
+                </StyledAvatar>
+
+                <Typography component='h1' variant='h4'>
+                    Sign up
+                </Typography>
+
+                <form onSubmit={() => console.log('sent')}>
+                    <StyledInputsName>
+                        <StyledFormTextFieldName
+                            variant='outlined'
+                            required
+                            label='First Name'
+                            value={firstName}
+                            onChange={(e) => setFirstName(e.target.value)}
+                        />
+
+                        <StyledFormTextFieldName
+                            variant='outlined'
+                            required
+                            label='Last Name'
+                            value={lastName}
+                            onChange={(e) => setlastName(e.target.value)}
+                        />
+                    </StyledInputsName>
+
+                    <StyledFormTextField
+                        variant='outlined'
+                        required
+                        label='Email Address'
+                        type='email'
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                    />
+
+                    <StyledFormTextFieldBirtday
+                        variant='outlined'
+                        required
+                        label='Birthdate'
+                        type='date'
+                        sx={{ label: { display: 'none' } }}
+                        value={birthday}
+                        onChange={(e) => {
+                            setBirthday(e.target.value);
+                        }}
+                    />
+
+                    <StyledFormTextField
+                        variant='outlined'
+                        required
+                        label='Password'
+                        type='password'
+                        value={password}
+                        autoComplete='new-password'
+                        onChange={(e) => setPassword(e.target.value)}
+                    />
+
+                    <StyledFormTextField
+                        variant='outlined'
+                        required
+                        label='Confirm Password'
+                        type='password'
+                        value={confirmPassword}
+                        autoComplete='new-password'
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                    />
+                    <StyledErrorDiv className='invalid-feedback'></StyledErrorDiv>
+
+                    <StyledButtonSign variant='contained' type='submit'>
+                        Sign Up
+                    </StyledButtonSign>
+                </form>
+
+                <StyledSectionBottom>
+                    <StyledNavLink to={ROUTES.LOGIN}>
+                        Already have an account? Sign in
+                    </StyledNavLink>
+                </StyledSectionBottom>
+            </StyledSectionBox>
+        </StyledPageBox>
+    );
 };
diff --git a/apps/client/src/app/sceens/RequestPasswordReset/RequestPasswordReset.style.ts b/apps/client/src/app/sceens/RequestPasswordReset/RequestPasswordReset.style.ts
new file mode 100644
index 0000000..b3f2527
--- /dev/null
+++ b/apps/client/src/app/sceens/RequestPasswordReset/RequestPasswordReset.style.ts
@@ -0,0 +1,52 @@
+import Lock from '@mui/icons-material/Lock';
+import { Avatar, Box, Button, TextField, Typography } from '@mui/material';
+import styled from '@emotion/styled';
+
+export const StyledPageBox = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+export const StyledSectionBox = styled(Box)`
+    margin: 80px 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 90%;
+`;
+export const StyledAvatar = styled(Avatar)`
+    margin: 8px;
+    background-color: #4caf50;
+    width: 70px;
+    height: 70px;
+    @media (max-width: 480px) {
+        width: 40px;
+        height: 40px;
+    }
+`;
+export const StyledAvatarLock = styled(Lock)`
+    font-size: 48px;
+    color: #fff;
+    @media (max-width: 480px) {
+        font-size: 24px;
+    }
+`;
+export const StyledTypographyTop = styled(Typography)`
+    font-size: 48px;
+    color: #000;
+    @media (max-width: 480px) {
+        font-size: 24px;
+    }
+`;
+export const StyledFormStyle = styled.form`
+    width: 100%;
+`;
+export const StyledFormTextField = styled(TextField)`
+    width: 100%;
+    margin: 10px 0;
+`;
+export const StyledButtonSend = styled(Button)`
+    width: 100%;
+    color: #fff;
+`;
diff --git a/apps/client/src/app/sceens/RequestPasswordReset/RequestPasswordReset.tsx b/apps/client/src/app/sceens/RequestPasswordReset/RequestPasswordReset.tsx
index bc49ac1..57e45f1 100644
--- a/apps/client/src/app/sceens/RequestPasswordReset/RequestPasswordReset.tsx
+++ b/apps/client/src/app/sceens/RequestPasswordReset/RequestPasswordReset.tsx
@@ -1,3 +1,42 @@
+import {
+    StyledPageBox,
+    StyledSectionBox,
+    StyledAvatar,
+    StyledAvatarLock,
+    StyledTypographyTop,
+    StyledFormStyle,
+    StyledFormTextField,
+    StyledButtonSend,
+} from './RequestPasswordReset.style';
+import { useState } from 'react';
+
 export const RequestPasswordReset = () => {
-    return <div>RequestPasswordReset</div>;
+    const [email, setEmail] = useState('');
+
+    return (
+        <StyledPageBox>
+            <StyledSectionBox>
+                <StyledAvatar>
+                    <StyledAvatarLock />
+                </StyledAvatar>
+
+                <StyledTypographyTop variant='h4'>
+                    Forgot Password?
+                </StyledTypographyTop>
+
+                <StyledFormStyle onSubmit={() => console.log('sent')}>
+                    <StyledFormTextField
+                        variant='outlined'
+                        required
+                        label='Email'
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                    />
+                    <StyledButtonSend variant='contained' type='submit'>
+                        Send Email
+                    </StyledButtonSend>
+                </StyledFormStyle>
+            </StyledSectionBox>
+        </StyledPageBox>
+    );
 };
diff --git a/apps/client/src/app/sceens/ResetPassword/ResetPassword.style.ts b/apps/client/src/app/sceens/ResetPassword/ResetPassword.style.ts
new file mode 100644
index 0000000..3489654
--- /dev/null
+++ b/apps/client/src/app/sceens/ResetPassword/ResetPassword.style.ts
@@ -0,0 +1,51 @@
+import Lock from '@mui/icons-material/Lock';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import styled from '@emotion/styled';
+
+export const StyledPageBox = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`;
+export const StyledSectionBox = styled(Box)`
+    margin: 80px 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 90%;
+`;
+export const StyledAvatar = styled(Avatar)`
+    margin: 8px;
+    background-color: #4caf50;
+    width: 70px;
+    height: 70px;
+    @media (max-width: 480px) {
+        width: 40px;
+        height: 40px;
+    }
+`;
+export const StyledAvatarLock = styled(Lock)`
+    font-size: 48px;
+    color: #fff;
+    @media (max-width: 480px) {
+        font-size: 24px;
+    }
+`;
+export const StyledFormStyle = styled.form`
+    width: 100%;
+`;
+export const StyledFormTextField = styled(TextField)`
+    width: 100%;
+    margin: 10px 0;
+`;
+export const StyledErrorDiv = styled(Box)`
+    color: #ff0000;
+`;
+export const StyledButtonSend = styled(Button)`
+    width: 100%;
+    color: #fff;
+`;
diff --git a/apps/client/src/app/sceens/ResetPassword/ResetPassword.tsx b/apps/client/src/app/sceens/ResetPassword/ResetPassword.tsx
index 8b74038..ee225c5 100644
--- a/apps/client/src/app/sceens/ResetPassword/ResetPassword.tsx
+++ b/apps/client/src/app/sceens/ResetPassword/ResetPassword.tsx
@@ -1,3 +1,56 @@
+import Typography from '@mui/material/Typography';
+import {
+    StyledPageBox,
+    StyledSectionBox,
+    StyledAvatar,
+    StyledAvatarLock,
+    StyledFormStyle,
+    StyledFormTextField,
+    StyledErrorDiv,
+    StyledButtonSend,
+} from './ResetPassword.style';
+import { useState } from 'react';
+
 export const ResetPassword = () => {
-    return <div>ResetPassword</div>;
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+
+    return (
+        <StyledPageBox>
+            <StyledSectionBox>
+                <StyledAvatar>
+                    <StyledAvatarLock />
+                </StyledAvatar>
+
+                <Typography component='h1' variant='h4'>
+                    Reset Password
+                </Typography>
+
+                <StyledFormStyle onSubmit={() => console.log('sent')}>
+                    <StyledFormTextField
+                        variant='outlined'
+                        required
+                        label='New Password'
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        autoComplete='new-password'
+                    />
+
+                    <StyledFormTextField
+                        variant='outlined'
+                        required
+                        label='Repeat Password'
+                        value={confirmPassword}
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                        autoComplete='new-password'
+                    />
+                    <StyledErrorDiv className='invalid-feedback'></StyledErrorDiv>
+
+                    <StyledButtonSend variant='contained' type='submit'>
+                        Change Password
+                    </StyledButtonSend>
+                </StyledFormStyle>
+            </StyledSectionBox>
+        </StyledPageBox>
+    );
 };
diff --git a/apps/client/src/app/sceens/Settings/Settings.style.ts b/apps/client/src/app/sceens/Settings/Settings.style.ts
new file mode 100644
index 0000000..b48d571
--- /dev/null
+++ b/apps/client/src/app/sceens/Settings/Settings.style.ts
@@ -0,0 +1,59 @@
+import {
+    Button,
+    FormControl,
+    RadioGroup,
+    TextField,
+    Typography,
+} from '@mui/material';
+import { Box } from '@mui/system';
+import styled from '@emotion/styled';
+
+export const StyledPageBox = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 50px;
+`;
+export const StyledSectionBox = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 90%;
+`;
+export const StyledMainHeader = styled(Typography)`
+    margin: 10px 0;
+`;
+export const StyledSecondHeader = styled(Typography)`
+    align-self: start;
+    margin-bottom: 10px;
+`;
+export const StyledRadioBox = styled(Box)`
+    align-self: start;
+    margin-left: 30px;
+`;
+export const StyledRadioGroup = styled(RadioGroup)`
+    display: flex;
+    flex-direction: row;
+`;
+export const StyledTextField = styled(TextField)`
+    width: 100%;
+    margin-bottom: 10px;
+`;
+export const StyledMarginBox = styled(Box)`
+    margin-bottom: 10px;
+`;
+export const StyledHalfWidth = styled(FormControl)`
+    width: 50%;
+`;
+export const StyledFullWidth = styled(FormControl)`
+    width: 100%;
+    margin-bottom: 10px;
+`;
+export const StyledButtonDelete = styled(Button)`
+    width: 100%;
+    margin-bottom: 10px;
+`;
+export const StyledButtonSave = styled(Button)`
+    width: 50%;
+`;
diff --git a/apps/client/src/app/sceens/Settings/Settings.tsx b/apps/client/src/app/sceens/Settings/Settings.tsx
index 0381375..d2d778a 100644
--- a/apps/client/src/app/sceens/Settings/Settings.tsx
+++ b/apps/client/src/app/sceens/Settings/Settings.tsx
@@ -1,3 +1,210 @@
+import {
+    FormControlLabel,
+    FormHelperText,
+    InputAdornment,
+    OutlinedInput,
+    Radio,
+} from '@mui/material';
+import { Box } from '@mui/system';
+import {
+    StyledTextField,
+    StyledHalfWidth,
+    StyledMainHeader,
+    StyledMarginBox,
+    StyledPageBox,
+    StyledRadioBox,
+    StyledRadioGroup,
+    StyledSecondHeader,
+    StyledSectionBox,
+    StyledFullWidth,
+    StyledButtonDelete,
+    StyledButtonSave,
+} from './Settings.style';
+
 export const Settings = () => {
-    return <div>settings</div>;
+    return (
+        <StyledPageBox>
+            <StyledSectionBox>
+                <StyledMainHeader variant='h5'>Settings</StyledMainHeader>
+
+                <StyledSecondHeader variant='h6'>Profile</StyledSecondHeader>
+
+                <StyledRadioBox>
+                    <StyledRadioGroup
+                        aria-labelledby='demo-radio-buttons-group-label'
+                        name='radio-buttons-group'
+                    >
+                        <FormControlLabel
+                            value='female'
+                            control={<Radio />}
+                            label='Female'
+                        />
+                        <FormControlLabel
+                            value='male'
+                            control={<Radio />}
+                            label='Male'
+                        />
+                    </StyledRadioGroup>
+                </StyledRadioBox>
+
+                <Box>
+                    <StyledTextField
+                        variant='outlined'
+                        label='Birthdate'
+                        type='date'
+                        sx={{
+                            label: { visibility: 'hidden' },
+                        }}
+                    />
+
+                    <StyledFullWidth variant='outlined'>
+                        <OutlinedInput
+                            endAdornment={
+                                <InputAdornment position='end'>
+                                    kg
+                                </InputAdornment>
+                            }
+                        />
+                        <FormHelperText id='outlined-weight-helper-text'>
+                            Weight
+                        </FormHelperText>
+                    </StyledFullWidth>
+
+                    <StyledFullWidth variant='outlined'>
+                        <OutlinedInput
+                            endAdornment={
+                                <InputAdornment position='end'>
+                                    cm
+                                </InputAdornment>
+                            }
+                        />
+                        <FormHelperText id='outlined-height-helper-text'>
+                            Height
+                        </FormHelperText>
+                    </StyledFullWidth>
+                </Box>
+
+                <StyledSecondHeader variant='h6'>
+                    Daily goals
+                </StyledSecondHeader>
+
+                <StyledFullWidth variant='outlined'>
+                    <OutlinedInput
+                        endAdornment={
+                            <InputAdornment position='end'>kcal</InputAdornment>
+                        }
+                    />
+                    <FormHelperText id='outlined-height-helper-text'>
+                        Calorie needs
+                    </FormHelperText>
+                </StyledFullWidth>
+
+                <StyledMarginBox>
+                    <StyledHalfWidth variant='outlined'>
+                        <OutlinedInput
+                            endAdornment={
+                                <InputAdornment position='end'>
+                                    g
+                                </InputAdornment>
+                            }
+                        />
+                        <FormHelperText id='outlined-height-helper-text'>
+                            Proteins
+                        </FormHelperText>
+                    </StyledHalfWidth>
+
+                    <StyledHalfWidth variant='outlined'>
+                        <OutlinedInput
+                            endAdornment={
+                                <InputAdornment position='end'>
+                                    %
+                                </InputAdornment>
+                            }
+                        />
+                        <FormHelperText id='outlined-height-helper-text'>
+                            Proteins
+                        </FormHelperText>
+                    </StyledHalfWidth>
+                </StyledMarginBox>
+
+                <StyledMarginBox>
+                    <StyledHalfWidth variant='outlined'>
+                        <OutlinedInput
+                            endAdornment={
+                                <InputAdornment position='end'>
+                                    g
+                                </InputAdornment>
+                            }
+                        />
+                        <FormHelperText id='outlined-height-helper-text'>
+                            Fats
+                        </FormHelperText>
+                    </StyledHalfWidth>
+
+                    <StyledHalfWidth variant='outlined'>
+                        <OutlinedInput
+                            endAdornment={
+                                <InputAdornment position='end'>
+                                    %
+                                </InputAdornment>
+                            }
+                        />
+                        <FormHelperText id='outlined-height-helper-text'>
+                            Fats
+                        </FormHelperText>
+                    </StyledHalfWidth>
+                </StyledMarginBox>
+
+                <StyledMarginBox>
+                    <StyledHalfWidth variant='outlined'>
+                        <OutlinedInput
+                            endAdornment={
+                                <InputAdornment position='end'>
+                                    g
+                                </InputAdornment>
+                            }
+                        />
+                        <FormHelperText id='outlined-height-helper-text'>
+                            Carbs
+                        </FormHelperText>
+                    </StyledHalfWidth>
+
+                    <StyledHalfWidth variant='outlined'>
+                        <OutlinedInput
+                            endAdornment={
+                                <InputAdornment position='end'>
+                                    %
+                                </InputAdornment>
+                            }
+                        />
+                        <FormHelperText id='outlined-height-helper-text'>
+                            Carbs
+                        </FormHelperText>
+                    </StyledHalfWidth>
+                </StyledMarginBox>
+
+                <StyledSecondHeader variant='h6'>
+                    Account information
+                </StyledSecondHeader>
+
+                <StyledTextField
+                    variant='outlined'
+                    label='Email'
+                    autoComplete='email'
+                />
+                <StyledTextField
+                    variant='outlined'
+                    label='Password'
+                    type='password'
+                    autoComplete='current-password'
+                />
+                <StyledButtonDelete variant='contained' color='error'>
+                    Delete account
+                </StyledButtonDelete>
+                <StyledButtonSave variant='contained' color='primary'>
+                    Save
+                </StyledButtonSave>
+            </StyledSectionBox>
+        </StyledPageBox>
+    );
 };