diff --git a/src/App.js b/src/App.js
index 7f85411..0ae196d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,21 @@
-import React from 'react';
+import React, { useState } from "react";
+import TMDB from "./TMDB";
+import FilmListing from "./FilmListing";
+import FilmDetails from "./FilmDetails";
 
 const App = () => {
+  const myFilms = TMDB.films;
+  const [films, setFilms] = useState(myFilms);
+
   return (
     <main className="film-library">
-      APP GOES HERE
+      <div className="film-library">
+        <FilmListing films={films} />
+        <FilmDetails films={films} />
+      </div>
     </main>
   );
-}
+};
 
 export default App;
+
diff --git a/src/FilmDetails.js b/src/FilmDetails.js
new file mode 100644
index 0000000..3a85056
--- /dev/null
+++ b/src/FilmDetails.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const FilmDetails = ({films}) => {
+  return (
+    <div className="film-details">
+      <h1 className="section-title">DETAILS</h1>
+    </div>
+  );
+};
+
+export default FilmDetails;
\ No newline at end of file
diff --git a/src/FilmListing.js b/src/FilmListing.js
new file mode 100644
index 0000000..5d9bb81
--- /dev/null
+++ b/src/FilmListing.js
@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import FilmRow from "./FilmRow";
+
+const FilmListing = ({ films }) => {
+//   const [f, setF] = useState(TMDB.films)
+
+  const filmsCollection = films.map((film, i) => 
+    <FilmRow key={i} {...film} />
+  );
+
+  return (
+    <div className="film-list">
+      <h1 className="section-title">FILMS</h1>
+      {filmsCollection}
+    </div>
+  );
+};
+
+export default FilmListing;
+
+// const listingElements = listings.map( (listing, i) =>
+// <Listing key={i} {...listing} />
+// )
+
+// const Listing = ({title, description, views}) => {
+
+//     const [v, setV] = useState(views)
+//     const [faves, setFaves] = useState(10)
+
+//     const incrementFaves = () => {
+//         setFaves(faves + 1);
+//     }
+
+//     useEffect( () => {
+//         setV(views)
+//     })
+
+//     return (
+//         <div>
+//             <h1>{title}</h1>
+//             <h2>Views: {v}</h2>
+//             <h2>Faves: {faves}</h2>
+//             <p>{description}</p>
+//             <button onClick={ incrementFaves }>Favourite!</button>
+//         </div>
+//     )
diff --git a/src/FilmPoster.js b/src/FilmPoster.js
new file mode 100644
index 0000000..e750994
--- /dev/null
+++ b/src/FilmPoster.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+const FilmPoster = ({ title, poster_path }) => {
+  return (
+    <div>
+      <figure className="film-poster">
+        <img
+          src={`https://image.tmdb.org/t/p/w780/${poster_path}`}
+          alt= {title}
+        />
+      </figure>
+    </div>
+  );
+};
+
+export default FilmPoster;
+
+
diff --git a/src/FilmRow.js b/src/FilmRow.js
new file mode 100644
index 0000000..0e3f312
--- /dev/null
+++ b/src/FilmRow.js
@@ -0,0 +1,17 @@
+import React from "react";
+import FilmPoster from "./FilmPoster"
+
+const FilmRow = ({ title, poster_path, release_date }) => {
+  return (
+    <div className="film-row">
+        <FilmPoster poster_path={poster_path} title={title}/>
+
+      <div className="film-summary">
+        <h1>{title}</h1>
+        <p>{new Date (release_date).getFullYear()}</p>
+      </div>
+    </div>
+  );
+};
+
+export default FilmRow;