diff --git a/src/App.js b/src/App.js
index 7c96152..818076d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import MyInfo from './components/MyInfoComponent/MyInfo';
 
 function App() {
   return (
     <div>
-      <h1>Hello World!!</h1>
+      <MyInfo />
     </div>
   );
 }
diff --git a/src/components/MyInfoComponent/MyInfo.css b/src/components/MyInfoComponent/MyInfo.css
new file mode 100644
index 0000000..43b5ccf
--- /dev/null
+++ b/src/components/MyInfoComponent/MyInfo.css
@@ -0,0 +1,14 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+  font-family: monospace;
+  font-size: 20px;
+}
+body {
+  background-color: beige;
+}
+div {
+  margin: 10px;
+}
diff --git a/src/components/MyInfoComponent/MyInfo.jsx b/src/components/MyInfoComponent/MyInfo.jsx
new file mode 100644
index 0000000..a418114
--- /dev/null
+++ b/src/components/MyInfoComponent/MyInfo.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import './MyInfo.css';
+
+const MyInfo = () => {
+  
+  const name = 'Mohammed Ali';
+  const about =
+    'A 20 years old guy from Baghdad who is studying business information technology.spending most of the time in coding, gaming and watching series';
+  const places = [
+    'bali island',
+    'langkawi malaysia',
+    'japan',
+    'rio de janeiro brazil',
+  ];
+  return (
+    <div>
+      <h1>{name}</h1>
+      <h2>About Me:</h2>
+      <p>
+        {about}
+      </p>
+      <h2>Places i want to vist in a vacation:</h2>
+      <ul>
+      {places.map((place,i)=>
+        <li key={i}>{place}</li>
+      )}
+      </ul>
+    </div>
+  );
+};
+
+export default MyInfo;