diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..59dfedf
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,8 @@
+h1 {
+    text-align: center;
+    background-color: aquamarine;
+}
+
+p{
+    background-color: rgba(27, 255, 255, 0.755);
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 7c96152..c96c60a 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/MyInfo';
+
+const name="Name: Faeza Salman";
+const description="I graduated from software Engineering, and working as a developer";
+
 
 function App() {
   return (
     <div>
-      <h1>Hello World!!</h1>
+     <Myinfo name={name} description={description}/>
     </div>
   );
 }
diff --git a/src/Components/MyInfo/MyInfo.jsx b/src/Components/MyInfo/MyInfo.jsx
new file mode 100644
index 0000000..79a8ae3
--- /dev/null
+++ b/src/Components/MyInfo/MyInfo.jsx
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+
+
+ const vacationList =  ["Korea","Swizerland","Canada","USA"]
+
+    export default class Myinfo extends Component {
+        render() {
+        return (
+            <div className="myinfo">
+                <h1>{this.props.name}</h1>
+                <p>{this.props.description}</p>
+               <label>                The countries i want to visit are:
+</label> <ol>
+                {vacationList.map(vacation =>
+                <li key={vacation}>{vacation}</li>
+                )}
+            </ol>
+            </div>
+            
+        )
+    }
+}