diff --git a/pages/profile.tsx b/pages/profile.tsx
new file mode 100644
index 0000000..5356d68
--- /dev/null
+++ b/pages/profile.tsx
@@ -0,0 +1,15 @@
+import { NextPage } from 'next';
+import { ReactElement } from 'react';
+import ProfileCard from 'src/components/profile/ProfileCard';
+import { AuthenticatedLayout } from 'src/layouts';
+
+const ProfilePage: NextPage = (): ReactElement => {
+  // This should be replaced with real user data
+  const userData = { username: 'JohnDoe', email: 'john.doe@example.com' };
+
+  return (
+    <ProfileCard username={userData.username} email={userData.email} />
+  );
+};
+
+export default AuthenticatedLayout(ProfilePage);
diff --git a/src/components/profile/ProfileCard/index.module.scss b/src/components/profile/ProfileCard/index.module.scss
new file mode 100644
index 0000000..4381326
--- /dev/null
+++ b/src/components/profile/ProfileCard/index.module.scss
@@ -0,0 +1,9 @@
+@import '~/styles/variables.scss';
+
+.card {
+  margin: $spacing-4;
+  padding: $spacing-3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/src/components/profile/ProfileCard/index.tsx b/src/components/profile/ProfileCard/index.tsx
new file mode 100644
index 0000000..dc542ff
--- /dev/null
+++ b/src/components/profile/ProfileCard/index.tsx
@@ -0,0 +1,23 @@
+import { Card, CardContent, Typography } from '@mui/material';
+import { ReactElement } from 'react';
+import styles from './index.module.scss';
+
+interface ProfileCardProps {
+  username: string;
+  email: string;
+}
+
+const ProfileCard = ({ username, email }: ProfileCardProps): ReactElement => (
+  <Card className={styles.card}>
+    <CardContent>
+      <Typography variant='h5' component='div'>
+        {username}
+      </Typography>
+      <Typography variant='body2'>
+        {email}
+      </Typography>
+    </CardContent>
+  </Card>
+);
+
+export default ProfileCard;