diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..8a7dbb5
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,25 @@
+.t-center{
+    text-align: center;
+}
+.card{
+    background-color: aliceblue;
+    width: 500px;
+   display: grid;
+   justify-content: center;
+   align-items: center;
+   justify-items: center;
+}
+
+.bio{
+    text-align: center;
+}
+
+.card-header{
+    background-color: white;
+    display: inline-block;
+}
+
+.p-0{
+    padding: 0px;
+    margin: 0px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 7c96152..04a2f60 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,15 @@
 import React from 'react';
+import './App.css';
+import MyInfo from './Components/MyInfo.jsx'
 
 function App() {
+ const placesToVisit = ["Antalya", "Parague", "Berlin", "goal"]
+ const name = "Haval "
+const bio = " I am an IT gradute from the American univerisy of Iraq Sulaimani, I have studied several different topics about IT at uni.  One of the most intersting classes was Robotics in whcih we were coding robots and we could see the output of our code phyically running." 
+
   return (
-    <div>
-      <h1>Hello World!!</h1>
+    <div >
+     <MyInfo placesToVisit={placesToVisit} name = {name} bio ={bio} />
     </div>
   );
 }
diff --git a/src/Components/MyInfo.jsx b/src/Components/MyInfo.jsx
new file mode 100644
index 0000000..6bee046
--- /dev/null
+++ b/src/Components/MyInfo.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+
+export default function MyInfo({placesToVisit, name, bio}) {
+
+    const listItems = placesToVisit.map((item) =>
+    <li className="nav" key={item}>{item}</li>
+    );
+    return (
+        <div className="card">
+            <h1 className="card-header">{name}</h1>
+            <p className="bio"> 
+            {bio}
+            </p>
+
+            <h3 className="p-0">Placeses I would Want to visit:</h3>
+            <ul>
+              {listItems}
+            </ul>
+        </div>
+    )
+}