diff --git a/src/screens/JoinGroupScreen/JoinGroupScreen.tsx b/src/screens/JoinGroupScreen/JoinGroupScreen.tsx
index fbbec01..830c69f 100644
--- a/src/screens/JoinGroupScreen/JoinGroupScreen.tsx
+++ b/src/screens/JoinGroupScreen/JoinGroupScreen.tsx
@@ -1,6 +1,6 @@
 import { Typography } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { Wrapper, Content, GroupCodeInput, GroupCodeField, JoinButton, CreateGroupButton, BackButton, SvgContainer, Logo } from './JoinGroupScreenStyles';
+import { Wrapper, Content, GroupCodeInput, GroupCodeField, JoinButton, CreateGroupButton, BackButton, SvgContainer, Logo, StyledTypography } from './JoinGroupScreenStyles';
 
 const JoinGroup = () => {
   return (
@@ -25,11 +25,11 @@ const JoinGroup = () => {
           <GroupCodeField inputProps={{ maxLength: 1 }} />
           <GroupCodeField inputProps={{ maxLength: 1 }} />
         </GroupCodeInput>
-        <Typography variant="body1" display="block" sx={{ color: '#BBBBBB', marginLeft: 'auto', marginRight: '0' }} gutterBottom>
+        <StyledTypography variant="body1"  gutterBottom>
           Czym jest kod grupy?
-        </Typography>
+        </StyledTypography>
         <JoinButton variant="contained">Dołącz do grupy</JoinButton>
-        <Typography variant="body1" sx={{ color: "#BBBBBB" }}>lub</Typography>
+        <StyledTypography variant="body1" >lub</StyledTypography>
         <CreateGroupButton variant="outlined">Utwórz grupę</CreateGroupButton>
       </Content>
     </Wrapper>
diff --git a/src/screens/JoinGroupScreen/JoinGroupScreenStyles.ts b/src/screens/JoinGroupScreen/JoinGroupScreenStyles.ts
index abf4652..2380d27 100644
--- a/src/screens/JoinGroupScreen/JoinGroupScreenStyles.ts
+++ b/src/screens/JoinGroupScreen/JoinGroupScreenStyles.ts
@@ -1,5 +1,7 @@
-import { Box, Button, IconButton, Input } from '@mui/material';
-import { styled } from '@mui/system';
+import { Box, Button, IconButton, Input, Typography } from '@mui/material';
+import {styled }from 'styled-components';
+
+
 
 export const Wrapper = styled(Box)`
   display: flex;
@@ -50,7 +52,7 @@ export const GroupCodeField = styled(Input)`
   &::after {
     border-bottom: none !important;
   }
-  border-bottom: 2px solid #000;
+  border-bottom: 2px solid ${({ theme }) => theme.colors.underline_grey};
   @media (max-width: 600px) {
     width: 40px;
     height: 40px;
@@ -62,10 +64,10 @@ export const GroupCodeField = styled(Input)`
 `;
 
 export const JoinButton = styled(Button)`
-  background-color: #ff3b30;
+  background-color: ${({ theme }) => theme.colors.button_red} !important;
   color: white;
   &:hover {
-    background-color: #e6392e;
+    background-color: ${({ theme }) => theme.colors.button_red} !important;
   }
   margin: 55px 0 15px;
   padding: 16px 0;
@@ -80,9 +82,10 @@ export const JoinButton = styled(Button)`
 `;
 
 export const CreateGroupButton = styled(Button)`
-  border: 1px solid #c4c4c4;
+  border: 1px solid ${({ theme }) => theme.colors.border_grey} !important;
   padding: 16px 0;
   font-size: 18px;
+  color: ${({ theme }) => theme.colors.black_100} !important;
   border-radius: 8px;
   width: 100%;
   color: black;
@@ -123,3 +126,9 @@ export const Logo = styled('img')`
     margin-bottom: 8px;
   }
 `;
+
+export const StyledTypography = styled(Typography)`
+  color: ${({ theme }) => theme.colors.light_grey};
+  margin-left: auto;
+  margin-right: 0;
+`;
\ No newline at end of file