diff --git a/package-lock.json b/package-lock.json
index 927b173fe441093f8c2c2dae5ad502d0ea7bfa90..d5729b90991739e6596e1061de2531510d8086a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2512,6 +2512,14 @@
         }
       }
     },
+    "@material-ui/icons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
+      "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
diff --git a/package.json b/package.json
index 8d886b8328d32aff461ada7750b0126b5f4000d8..26d80d02513dbe3c9fc73497bc8642b4bf268708 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@types/styled-components": "^5.1.2",
     "axios": "^0.20.0",
     "react": "^16.13.1",
diff --git a/src/core/components/CustomModal.tsx b/src/core/components/CustomModal.tsx
index 43d8169ff33322e6135ad45ceab07267806dc0d3..e0c6af7a42e9cf8c739090064058120c217d9a35 100644
--- a/src/core/components/CustomModal.tsx
+++ b/src/core/components/CustomModal.tsx
@@ -8,7 +8,13 @@ interface ICustomModalProps {
   isOpen: boolean;
   setIsOpen: Dispatcher<boolean>;
   children: React.ReactNode;
-  customStyle: { backgroundColor?: string; padding?: string; width?: string; border?: string };
+  customStyle: {
+    backgroundColor?: string;
+    padding?: string;
+    width?: string;
+    border?: string;
+    borderRadius?: string;
+  };
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -28,6 +34,7 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: customStyle.backgroundColor || 'theme.palette.background.paper',
       border: customStyle.border || 'none',
       padding: customStyle.padding || 'none',
+      borderRadius: customStyle.borderRadius || 'none',
       boxShadow: theme.shadows[5],
       '&:focus': {
         outline: 'none',
diff --git a/src/core/components/ProfileButton.tsx b/src/core/components/ProfileButton.tsx
index 65ac9a39482c289982a18a2e30ff17ca959dd397..34451f47da81afa65fbc46141699763f75aee43a 100644
--- a/src/core/components/ProfileButton.tsx
+++ b/src/core/components/ProfileButton.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { ProfileModal } from './ProfileModal';
 
 export const ProfileButton = () => {
-  const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false);
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(true);
 
   const handleProfileModalOpen = () => {
     setIsProfileModalOpen(true);
diff --git a/src/core/components/ProfileModal.tsx b/src/core/components/ProfileModal.tsx
index 8d442d6206b6d1926afa9336bd0ba279ba10b469..bbaaaf5c803f4e137277c206e8bc5c71abd8cd1f 100644
--- a/src/core/components/ProfileModal.tsx
+++ b/src/core/components/ProfileModal.tsx
@@ -1,3 +1,7 @@
+import {
+  Avatar, Box, Button, IconButton, TextField, Typography,
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
 import React, { Dispatch, SetStateAction } from 'react';
 import { CustomModal } from './CustomModal';
 
@@ -9,14 +13,64 @@ interface IProfileModalProps {
 }
 
 export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
-  const placeHolder = 'test text';
+  const onClose = () => {
+    setIsOpen(false);
+  };
   return (
     <CustomModal
       isOpen={isOpen}
       setIsOpen={setIsOpen}
-      customStyle={{ backgroundColor: 'white', padding: '10px', width: '650px' }}
+      customStyle={{
+        backgroundColor: '#EBEBEB',
+        padding: '15px',
+        width: '500px',
+        borderRadius: '8px',
+      }}
     >
-      {placeHolder}
+      <Box
+        fontWeight="fontWeightBold"
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
+        pl={2}
+      >
+        <Typography variant="h5" component="h5">
+          Profilom
+        </Typography>
+        <IconButton onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+      <Box display="flex" justifyContent="center" my={3}>
+        <Avatar alt="Profile image" variant="rounded" style={{ width: '200px', height: '200px' }} />
+      </Box>
+      <Box px={1} mt={2} mb={1}>
+        <Box my={1}>
+          <TextField
+            label="Diákigazolvány szám"
+            variant="outlined"
+            color="secondary"
+            fullWidth
+            size="small"
+            style={{ backgroundColor: 'white' }}
+          />
+        </Box>
+        <Box my={1}>
+          <TextField
+            label="Szobaszám"
+            variant="outlined"
+            color="secondary"
+            fullWidth
+            size="small"
+            style={{ backgroundColor: 'white' }}
+          />
+        </Box>
+        <Box display="flex" justifyContent="flex-end" mt={3}>
+          <Button variant="contained" onClick={onClose}>
+            Mentés
+          </Button>
+        </Box>
+      </Box>
     </CustomModal>
   );
 };