diff --git a/src/pages/components/UserInformation/UserInfo.js b/src/pages/components/UserInformation/UserInfo.js
new file mode 100644
index 00000000..44bd1bae
--- /dev/null
+++ b/src/pages/components/UserInformation/UserInfo.js
@@ -0,0 +1,16 @@
+import { Heading } from '@chakra-ui/react';
+import React from 'react';
+import Card from '../Card';
+
+const UserInfo = () => (
+  <Card
+    title="User Information"
+    description="This is your profile information"
+    icon="👤"
+    tooltipLabel="User Information"
+  >
+    <Heading as="h2">Profile</Heading>
+  </Card>
+);
+
+export default UserInfo;
diff --git a/src/pages/components/UserInformation/index.js b/src/pages/components/UserInformation/index.js
new file mode 100644
index 00000000..472091c5
--- /dev/null
+++ b/src/pages/components/UserInformation/index.js
@@ -0,0 +1,3 @@
+import UserInfo from './UserInfo';
+
+export default UserInfo;
diff --git a/src/pages/dashboard.js b/src/pages/dashboard.js
index 6f0a0932..98cf1363 100644
--- a/src/pages/dashboard.js
+++ b/src/pages/dashboard.js
@@ -1,6 +1,21 @@
 import { Heading } from '@chakra-ui/react';
 import React from 'react';
+import UserInfo from './components/UserInformation';
 
-const Dashboard = () => <Heading as="h1">Dashboard</Heading>;
+const Dashboard = () => (
+  <div
+    className="flex flex-col items-center h-screen"
+    // style={{
+    //   display: 'flex',
+    //   flexDirection: 'column',
+    //   alignItems: 'center',
+    //   justifyContent: 'center',
+    //   height: '100vh',
+    // }}
+  >
+    <Heading as="h1">Dashboard</Heading>
+    <UserInfo />
+  </div>
+);
 
 export default Dashboard;