diff --git a/1-basics/package-lock.json b/1-basics/package-lock.json
index dd5589f..79903b8 100644
--- a/1-basics/package-lock.json
+++ b/1-basics/package-lock.json
@@ -8,6 +8,7 @@
       "name": "my-app",
       "version": "0.1.0",
       "dependencies": {
+        "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -1157,6 +1158,14 @@
       "integrity": "sha512-2xfmOrRkGogbTK9R6Leda0DGiXeY3p2NJpy4+gNCffdUvV6mdEJnaDEic1i3Ec2djAo8jWYoJMR5PB0MSMpxUA==",
       "dev": true
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1187,6 +1196,16 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -1210,6 +1229,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -2133,6 +2157,11 @@
       "integrity": "sha512-2xfmOrRkGogbTK9R6Leda0DGiXeY3p2NJpy4+gNCffdUvV6mdEJnaDEic1i3Ec2djAo8jWYoJMR5PB0MSMpxUA==",
       "dev": true
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2150,6 +2179,16 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -2167,6 +2206,11 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
diff --git a/1-basics/package.json b/1-basics/package.json
index 63bf202..b4164fa 100644
--- a/1-basics/package.json
+++ b/1-basics/package.json
@@ -2,6 +2,7 @@
   "name": "my-app",
   "version": "0.1.0",
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/1-basics/src/assets/Bulbazaur.jpg b/1-basics/src/assets/Bulbazaur.jpg
new file mode 100644
index 0000000..f541556
Binary files /dev/null and b/1-basics/src/assets/Bulbazaur.jpg differ
diff --git a/1-basics/src/assets/Charmander.jpg b/1-basics/src/assets/Charmander.jpg
new file mode 100644
index 0000000..61e6ee0
Binary files /dev/null and b/1-basics/src/assets/Charmander.jpg differ
diff --git a/1-basics/src/assets/Pikachu.jpg b/1-basics/src/assets/Pikachu.jpg
new file mode 100644
index 0000000..3938549
Binary files /dev/null and b/1-basics/src/assets/Pikachu.jpg differ
diff --git a/1-basics/src/assets/Squirtle.jpg b/1-basics/src/assets/Squirtle.jpg
new file mode 100644
index 0000000..221c72f
Binary files /dev/null and b/1-basics/src/assets/Squirtle.jpg differ
diff --git a/1-basics/src/components/App.css b/1-basics/src/components/App.css
index b509606..564c68a 100644
--- a/1-basics/src/components/App.css
+++ b/1-basics/src/components/App.css
@@ -1,4 +1,16 @@
 main {
   flex: 1;
   display: flex;
+  background-color: brown;
 }
+h1 {
+text-align: center;
+}
+.btn{
+  size-adjust: 
+}
+
+body {
+  text-align: center;
+}
+
diff --git a/1-basics/src/components/App.jsx b/1-basics/src/components/App.jsx
index f89001f..0af43da 100644
--- a/1-basics/src/components/App.jsx
+++ b/1-basics/src/components/App.jsx
@@ -1,14 +1,14 @@
 import { List } from './List';
-import { Button } from './Button';
+import { Header } from './header';
 
 import './App.css';
 
 export const App = () => (
   <>
-    <header>
-      <h1>Pokemon app</h1>
-      <Button>Click me</Button>
-    </header>
+    
+     <Header/>
+      
+    
     <main>
       <List />
     </main>
diff --git a/1-basics/src/components/Button.css b/1-basics/src/components/Button.css
index 3577d39..4bd5c53 100644
--- a/1-basics/src/components/Button.css
+++ b/1-basics/src/components/Button.css
@@ -5,3 +5,4 @@
   border-radius: 5px;
   padding: 5px 15px;
 }
+
diff --git a/1-basics/src/components/Button.jsx b/1-basics/src/components/Button.jsx
index 20506f3..a642d41 100644
--- a/1-basics/src/components/Button.jsx
+++ b/1-basics/src/components/Button.jsx
@@ -1,7 +1,11 @@
+import PropTypes from 'prop-types';
 import './Button.css';
 
-export const Button = (props) => {
-  console.log('props', props);
+export const Button = ({text}) => {
+  //console.log('props', props);
 
-  return <button className='btn'>{props.children}</button>;
+  return <button className='btn'>{text}</button>;
+};
+Button.prototype={
+  text: PropTypes.string.isRequired
 };
diff --git a/1-basics/src/components/List.jsx b/1-basics/src/components/List.jsx
index f561a81..6376a88 100644
--- a/1-basics/src/components/List.jsx
+++ b/1-basics/src/components/List.jsx
@@ -1,4 +1,5 @@
 import { Button } from './Button';
+import {Listitem} from './Listitem';
 
 const list = ['Pikachu', 'Bulbazaur', 'Charmander', 'Squirtle']
 
@@ -6,14 +7,11 @@ export const List = () => (
   <div>
     <ul>
       {list.map((listItem) => (
-        <li key={listItem}>{listItem}</li>
+        <Listitem ListItem={listItem}key={listItem}/>
       ))}
     </ul>
-    <ul>
-      <li>{list[0]}</li>
-      <li>{list[1]}</li>
-      <li>{list[2]}</li>
-    </ul>
-    <Button>Do it!</Button>
+   
+    <Button text = 'Do it!'/>
+    
   </div>
 );
diff --git a/1-basics/src/components/Listitem.jsx b/1-basics/src/components/Listitem.jsx
new file mode 100644
index 0000000..1660401
--- /dev/null
+++ b/1-basics/src/components/Listitem.jsx
@@ -0,0 +1,12 @@
+//import Pikachu from '../assets/Pikachu.jpg';
+
+export const Listitem= ({ListItem, fileSrc, id})=>{
+    return(
+     <>
+     <h1 className="item">{ListItem}</h1>
+     <img src={`../assets/${ListItem}.jpg`}/>
+  
+
+     </> 
+    )
+}
\ No newline at end of file
diff --git a/1-basics/src/components/Pikachu.jpg b/1-basics/src/components/Pikachu.jpg
new file mode 100644
index 0000000..3938549
Binary files /dev/null and b/1-basics/src/components/Pikachu.jpg differ
diff --git a/1-basics/src/components/header.css b/1-basics/src/components/header.css
new file mode 100644
index 0000000..e69de29
diff --git a/1-basics/src/components/header.jsx b/1-basics/src/components/header.jsx
new file mode 100644
index 0000000..2300cbb
--- /dev/null
+++ b/1-basics/src/components/header.jsx
@@ -0,0 +1,12 @@
+import { Button } from './Button';
+import './header.css';
+
+export const Header = () => {
+   
+  
+    return ( <header> <h1>Pokemon App</h1> 
+      <Button text="Click Me"/>
+      </header>)
+   
+  };
+  
\ No newline at end of file