diff --git a/src/core/components/ProfileButton.tsx b/src/core/components/ProfileButton.tsx
index 7de7a1699eaedc9711d45a016a5d77fba1f5e6ad..65ac9a39482c289982a18a2e30ff17ca959dd397 100644
--- a/src/core/components/ProfileButton.tsx
+++ b/src/core/components/ProfileButton.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@material-ui/core';
 import React, { useState } from 'react';
-import { CustomModal } from './CustomModal';
+import { ProfileModal } from './ProfileModal';
 
 export const ProfileButton = () => {
   const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false);
@@ -14,13 +14,7 @@ export const ProfileButton = () => {
       <Button variant="contained" color="primary" onClick={handleProfileModalOpen}>
         Open Profile
       </Button>
-      <CustomModal
-        isOpen={isProfileModalOpen}
-        setIsOpen={setIsProfileModalOpen}
-        customStyle={{ backgroundColor: 'white', padding: '10px' }}
-      >
-        Modal content
-      </CustomModal>
+      <ProfileModal isOpen={isProfileModalOpen} setIsOpen={setIsProfileModalOpen} />
     </div>
   );
 };
diff --git a/src/core/components/ProfileModal.tsx b/src/core/components/ProfileModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..26edd64152fe5daaeb35821fb43ce2760e17cc81
--- /dev/null
+++ b/src/core/components/ProfileModal.tsx
@@ -0,0 +1,24 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { CustomModal } from './CustomModal';
+
+type Dispatcher<S> = Dispatch<SetStateAction<S>>;
+
+interface IProfileModalProps {
+  isOpen: boolean;
+  setIsOpen: Dispatcher<boolean>;
+}
+
+export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
+  const placeHolder = 'test text';
+  return (
+    <CustomModal
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      customStyle={{ backgroundColor: 'white', padding: '10px' }}
+    >
+      {placeHolder}
+    </CustomModal>
+  );
+};
+
+export default ProfileModal;