diff --git a/src/components/App.js b/src/components/App.js
index 4a4af56..b976645 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -12,3 +12,22 @@
 // Step 11: Inside the return statement, write a selfclosing tag called MoviesList
 // Step 12: Inside the selfclosing tag, give it an attribute called movies, and pass it this.state.movies inside a set of curly bracket.
 // Step 13: Outside the class, export the App class as a default.
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import MoviesList from './MoviesList';
+
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      movies: ['Godzilla (1998)', 'Jurrasic Park', 'Titanic', 'Pulp Fiction'],
+    };
+  }
+  render() {
+    return (
+      <MoviesList movies={this.state.movies} />    
+    );
+  }
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/components/MoviesList.js b/src/components/MoviesList.js
index c6eb3e4..7bfec39 100644
--- a/src/components/MoviesList.js
+++ b/src/components/MoviesList.js
@@ -8,3 +8,16 @@
 // The function should return a list item, with a javascript expression movie (the same variable as map).
 // The list item should have an attribute called key, that takes in i as a javascript expression.
 // Outside the arrow function, export the function MoviesList as a default.
+import React from 'react';
+
+const MoviesList = (props) => {
+  return (
+    <ul>
+      {props.movies.map((movie, i) => {
+        return <li key={i}>{movie}</li>
+      })}
+    </ul>
+  )
+}
+
+export default MoviesList;