diff --git a/index.html b/index.html
index 7a5cacc..112a81e 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"
+    >
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TMNT</title>
   </head>
diff --git a/src/App.css b/src/App.css
index ba89c48..be12f83 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,23 +2,8 @@
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-  text-align: center;
 }
 
-.card {
-  /*padding: 2em;*/
-}
-
-.movie-table {
-  display: grid;
-  column-gap: 2em;
-  grid-template-columns: 50% 50%;
-}
-
-.screened {
-  text-align: right;
-}
-
-.title {
-  text-align: left;
-}
+.poster {
+  max-width: min(10vh,16vw);
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index cbf096e..f279099 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import {useEffect, useState} from 'react'
 import './App.css'
 import {Movie} from "./Models.ts";
 import hostName from "./Config.ts";
+import MoviePoster from "./MoviePoster.tsx";
 
 function App() {
   const [movies, setMovies] = useState<Movie[]>([])
@@ -26,16 +27,10 @@ function App() {
   /*function sortByTitle(a: Movie, b: Movie): number {
     return a.title < b.title ? -1 : 1
   }*/
-  
-  function handleMovieSelectionClick() {
-
-  }
 
   return (
     <>
       <h1>Tuesday Movie Night Team</h1>
-      <div className="card">
-        <div className={"movie-table"}>
           {movies.sort(sortByScreenedDate).map((movie) => {
             const screenedFormatted = new Date(movie.screenedDate).toLocaleDateString(
                 'en-gb',
@@ -45,14 +40,33 @@ function App() {
                   day: 'numeric'
                 }
             );
+            const regex = /(tt\d+)/
+            const match = regex.exec(movie.imdbLink)
+            let imdbId = ""
+            if (match) {
+              imdbId = match[1]
+            }
             return (
-                <>
-                  <div className={"screened"}>{screenedFormatted}</div><div onClick={handleMovieSelectionClick} className={"title"}>{movie.title} ({movie.releaseYear})</div>
-                </>
+              <div className={'card'} key={movie.id}>
+                <header className={'card-header'}>
+                  <p className={'card-header-title'}>
+                    {movie.title} ({movie.releaseYear})
+                  </p>
+                </header>
+                <div className={'card-content'}>
+                  <div className={'media'}>
+                    <div className={'media-right'}>
+                      <a href={movie.imdbLink}><MoviePoster imdbId={imdbId} /></a>
+                    </div>
+                    <div className={'media-content'}>
+                      <p className={'is-size-5'}>{screenedFormatted}</p>
+                      <p className={''}>{movie.notes}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
             )
           })}
-        </div>
-      </div>
 
     </>
   )
diff --git a/src/MovieDetails.tsx b/src/MovieDetails.tsx
deleted file mode 100644
index 2cfc36d..0000000
--- a/src/MovieDetails.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {Movie} from "./Models.ts";
-
-interface MovieDetailsProps {
-  movie: Movie
-}
-
-export default function MovieDetails(props: MovieDetailsProps) {
-  return (
-      <>
-        <div>{props.movie.title} ({props.movie.releaseYear})</div>
-        <div>{props.movie.screenedDate}</div>
-      </>
-  )
-
-}
\ No newline at end of file
diff --git a/src/MoviePoster.tsx b/src/MoviePoster.tsx
new file mode 100644
index 0000000..4c53d87
--- /dev/null
+++ b/src/MoviePoster.tsx
@@ -0,0 +1,28 @@
+import {useEffect, useState} from 'react'
+interface MoviePosterProps {
+  imdbId: string
+}
+export default function MoviePoster(props: Readonly<MoviePosterProps>) {
+  const [posterLink, setPosterLink] = useState<string>("");
+
+  useEffect(() => {
+    console.log(props.imdbId);
+    fetch("https://api.themoviedb.org/3/find/" + props.imdbId + "?external_source=imdb_id&api_key=15d2ea6d0dc1d476efbca3eba2b9bbfb", {})
+    .then(response => response.json())
+    .then((json) =>{
+      console.log(json);
+      setPosterLink("http://image.tmdb.org/t/p/w500" + json.movie_results[0].poster_path)
+    })
+  }, []);
+
+  if(posterLink == "") {
+    return (
+      <img className={'poster'} src={'https://placehold.co/500x750'}/>
+    )
+  } else {
+    return (
+        <img className={'poster'} src={posterLink}/>
+    )
+  }
+
+}
\ No newline at end of file
