diff --git a/03_Day_Setting_Up/03_setting_up_boilerplate/src/UserCard.js b/03_Day_Setting_Up/03_setting_up_boilerplate/src/UserCard.js
new file mode 100644
index 0000000..843753e
--- /dev/null
+++ b/03_Day_Setting_Up/03_setting_up_boilerplate/src/UserCard.js
@@ -0,0 +1,22 @@
+import React from "react";
+import aso from './images/asabeneh.jpg';
+
+const imageStyle = {
+    width: 200,
+    height: 200,
+    borderRadius: '50%'
+}
+
+const skills = ['html','react','css','javascript']
+
+export const UserCard = (
+    <div>
+        <img src={aso} style={imageStyle} alt={'image'}/>
+        <p>Alex De Souza</p>
+        <ul>
+            {
+                skills.map( skill => <li key={skill}>{skill}</li> )
+            }
+        </ul>
+    </div>
+);
\ No newline at end of file
diff --git a/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js b/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js
index 24928b7..fd38ba3 100644
--- a/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js
+++ b/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js
@@ -10,6 +10,7 @@ import doSomeMath from './math.js'
 // to import the other modules
 // since these modules were not exported as default we have to desctructure
 import { addTwo, multiply, subtract } from './math.js'
+import { UserCard } from "./UserCard";
 
 import * as everything from './math.js'
 console.log(addTwo(5, 5))
@@ -105,9 +106,7 @@ const footer = (
 // JSX element, app
 const app = (
   <div className='app'>
-    {header}
-    {main}
-    {footer}
+      {UserCard}
   </div>
 )