diff --git a/assets/svg/rotten-tomatoes.svg b/assets/svg/rotten-tomatoes.svg
new file mode 100644
index 0000000..0276848
--- /dev/null
+++ b/assets/svg/rotten-tomatoes.svg
@@ -0,0 +1,56 @@
+<svg
+  width="80px"
+  height="80px"
+  viewBox="0 0 80 80"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+  <title>Icons/Tomatometer &amp; AS/fresh</title>
+  <desc>Created with Sketch.</desc>
+  <defs>
+    <polygon
+      id="path-1"
+      points="0.000109100102 0.246970954 77.0827837 0.246970954 77.0827837 63.7145228 0.000109100102 63.7145228"
+    />
+  </defs>
+  <g
+    id="Icons/Tomatometer-&amp;-AS/fresh"
+    stroke="none"
+    stroke-width="1"
+    fill="none"
+    fill-rule="evenodd"
+  >
+    <g id="Group">
+      <rect
+        id="Rectangle-Copy-2"
+        fill="#000000"
+        opacity="0"
+        x="0"
+        y="0"
+        width="80"
+        height="80"
+      />
+      <g id="RT_Fresh_Tomato_RGB-(1)" transform="translate(1.327801, 0.000000)">
+        <g id="Group-3" transform="translate(0.000000, 16.265560)">
+          <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1" />
+          </mask>
+          <g id="Clip-2" />
+          <path
+            d="M77.0137759,27.0426556 C76.2423237,14.6741909 69.9521992,5.42041494 60.4876349,0.246970954 C60.5414108,0.548381743 60.273195,0.925145228 59.9678008,0.791701245 C53.7772614,-1.91634855 43.2753527,6.84780083 35.9365975,2.25825726 C35.9917012,3.90539419 35.6700415,11.940249 24.3515353,12.4063071 C24.0843154,12.4172614 23.9372614,12.1443983 24.1062241,11.9512033 C25.619917,10.2247303 27.1482158,5.85360996 24.9507054,3.5233195 C20.2446473,7.74041494 17.5117012,9.32746888 8.48829876,7.23319502 C2.71103734,13.2740249 -0.562655602,21.5419087 0.08,31.8413278 C1.39120332,52.86639 21.0848133,64.8846473 40.9165145,63.6471369 C60.746888,62.4106224 78.3253112,48.0677178 77.0137759,27.0426556"
+            id="Fill-1"
+            fill="#FA320A"
+            mask="url(#mask-2)"
+          />
+        </g>
+        <path
+          d="M40.8717012,11.4648963 C44.946722,10.49361 56.6678838,11.3702905 60.4232365,16.3518672 C60.6486307,16.6506224 60.3312863,17.2159336 59.9678008,17.0572614 C53.7772614,14.3492116 43.2753527,23.113361 35.9365975,18.5238174 C35.9917012,20.1709544 35.6700415,28.2058091 24.3515353,28.6718672 C24.0843154,28.6828216 23.9372614,28.4099585 24.1062241,28.2167635 C25.619917,26.4902905 27.1478838,22.1191701 24.9507054,19.7888797 C19.8243983,24.3827386 17.0453112,25.8589212 5.91900415,22.8514523 C5.55485477,22.753195 5.67900415,22.1679668 6.06639004,22.020249 C8.16929461,21.2165975 12.933444,17.6965975 17.4406639,16.1450622 C18.2987552,15.8499585 19.1541909,15.6209129 19.9890456,15.4878008 C15.02639,15.0443154 12.7893776,14.3541909 9.63286307,14.8302075 C9.28697095,14.8823237 9.05195021,14.479668 9.26639004,14.2034855 C13.5193361,8.7253112 21.3540249,7.07087137 26.1878838,9.98107884 C23.2082988,6.28912863 20.8743568,3.34473029 20.8743568,3.34473029 L26.4046473,0.203485477 C26.4046473,0.203485477 28.6894606,5.30821577 30.3518672,9.02340249 C34.4657261,2.94506224 42.119834,2.38406639 45.3536929,6.69676349 C45.5455602,6.95302905 45.3450622,7.31751037 45.0247303,7.30987552 C42.3926971,7.24580913 40.9434025,9.63983402 40.833527,11.4605809 L40.8717012,11.4648963"
+          id="Fill-4"
+          fill="#00912D"
+        />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/components/Film.vue b/components/Film.vue
new file mode 100644
index 0000000..987538b
--- /dev/null
+++ b/components/Film.vue
@@ -0,0 +1,111 @@
+<template>
+  <article
+    class="film bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
+  >
+    <header class="p-4 rounded-t-md">
+      <h1>
+        {{ film.title + " (" + film.release_date + ")" }}
+      </h1>
+      <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
+    </header>
+
+    <main class="inline-block px-4">
+      <h3>Summary</h3>
+      <p>{{ excerptOfDescription }}</p>
+    </main>
+
+    <footer class="px-4 flex items-center justify-between">
+      <p
+        class="film-score font-bold text-lg"
+        :class="{
+          'text-green-600': film.rt_score >= 75,
+          'text-orange-600': film.rt_score >= 50 && film.rt_score < 75,
+          'text-yellow-600': film.rt_score >= 25 && film.rt_score < 50,
+          'text-red-600': film.rt_score >= 0 && film.rt_score < 25
+        }"
+      >
+        {{ film.rt_score + "%" }}
+      </p>
+      <router-link
+        class="rounded font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
+        :to="`/film/${film.id}`"
+        tag="button"
+      >
+        Read more
+      </router-link>
+    </footer>
+  </article>
+</template>
+
+<script>
+export default {
+  name: "Film",
+  props: {
+    film: {
+      type: Object,
+      default: () => {},
+      required: true
+    }
+  },
+  computed: {
+    excerptOfDescription: function() {
+      return this.film.description.substring(0, 300) + "...";
+    }
+  }
+};
+</script>
+
+<style lang="css" scoped>
+/* .film {
+  flex: 1 1 calc(50% - 2rem);
+}
+
+@media screen and (min-width: 600px) {
+  .card {
+    flex: 1 1 calc(50% - 2rem);
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .card {
+    flex: 1 1 calc(33% - 2rem);
+  }
+} */
+
+header {
+  background-color: #85ffbd;
+  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
+}
+
+.film:nth-child(2n) header {
+  background-color: #ff9a8b;
+  background-image: linear-gradient(
+    90deg,
+    #ff9a8b 0%,
+    #ff6a88 55%,
+    #ff99ac 100%
+  );
+}
+
+.film:nth-child(4n) header {
+  background-color: #fee140;
+  background-image: linear-gradient(90deg, #fee140 0%, #fa709a 100%);
+}
+
+.film:nth-child(5n) header {
+  background-color: #a9c9ff;
+  background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%);
+}
+
+.film-score::before {
+  content: "";
+  background: url(~assets/svg/rotten-tomatoes.svg);
+  background-repeat: no-repeat;
+  background-size: 100%;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-block;
+  vertical-align: sub;
+  margin-right: 0.5rem;
+}
+</style>
diff --git a/components/Grid.vue b/components/Grid.vue
index a991e15..69396da 100644
--- a/components/Grid.vue
+++ b/components/Grid.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="grid">
-    {{ dataSource }}
+    <Film :key="film.id" v-for="film in dataSource" :film="film" />
   </div>
 </template>
 
 <script>
+import Film from "./Film";
+
 export default {
+  components: { Film },
   name: "Grid",
   props: {
     dataSource: {
diff --git a/test/Grid.spec.js b/test/Grid.spec.js
index 4f012fd..61e7bfb 100644
--- a/test/Grid.spec.js
+++ b/test/Grid.spec.js
@@ -1,4 +1,4 @@
-import { mount } from "@vue/test-utils";
+import { shallowMount } from "@vue/test-utils";
 import Grid from "@/components/Grid";
 import mockFilms from "./fake-films.json";
 
@@ -12,12 +12,15 @@ describe("Grid", () => {
     });
   });
 
-  it("should render Grid instance", () => {
-    const wrapper = mount(Grid, {
+  it("should render Grid instance with expected Film components", () => {
+    const wrapper = shallowMount(Grid, {
       propsData: {
         dataSource: mockFilms
       }
     });
-    expect(JSON.parse(wrapper.text())).toEqual(mockFilms);
+
+    expect(wrapper.findAllComponents({ name: "Film" }).length).toBe(
+      mockFilms.length
+    );
   });
 });